fix(list-pro): fix can't drag, update datasource state not synchronize

src/components/config-provider/context.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { useContext, forwardRef } from 'react';
 
 import { SizeType } from './SizeContext';
 
@@ -58,16 +58,16 @@ interface ConstructorProps {
   displayName?: string;
 }
 export function withConfigConsumer<ExportProps extends BasicExportProps>(config: ConsumerConfig) {
-  return function withConfigConsumerFunc<ComponentDef>(
+  return function withConfigConsumerFunc(
     Component: IReactComponent
-  ): React.FC<ExportProps> & ComponentDef {
+  ): React.ForwardRefExoticComponent<React.PropsWithoutRef<ExportProps> & React.RefAttributes<unknown>> {
     // Wrap with ConfigConsumer. Since we need compatible with react 15, be care when using ref methods
-    const SFC = ((props: ExportProps) => {
+    const SFC = forwardRef((props: ExportProps, ref) => {
       const { subPrefixCls } = config;
       const { rootPrefixCls, ...restConfigContext } = useContext(ConfigContext);
       const prefixCls = getGioDesignPrefixCls(subPrefixCls, rootPrefixCls);
-      return <Component {...restConfigContext} {...props} prefixCls={prefixCls} />;
-    }) as React.FC<ExportProps> & ComponentDef;
+      return <Component {...restConfigContext} {...props} prefixCls={prefixCls} ref={ref} />;
+    }) as React.ForwardRefExoticComponent<React.PropsWithoutRef<ExportProps> & React.RefAttributes<unknown>>;
 
     const cons: ConstructorProps = Component.constructor as ConstructorProps;
     const name = cons?.displayName || Component.name || 'Component';

src/components/drawer/interfaces.ts

@@ -125,6 +125,7 @@ export interface DrawerProps {
   onNext?: () => void;
   nextDisabled?: boolean;
   loading?: boolean;
+  children?: React.ReactNode[] | React.ReactNode;
 }
 
 export interface IDrawerState {

src/components/list-pro/Sortable/index.tsx

@@ -40,7 +40,7 @@ export default class SortableCollection extends React.PureComponent<SortableColl
     if (state.stateChanged) {
       return { ...state, stateChanged: false };
     }
-    return { collection: nextProps.collection };
+    return { collections: nextProps.collection };
   }
 
   private _handleHover = (originalSourcePosition: number, originalTargetPosition: number) => {
@@ -50,9 +50,6 @@ export default class SortableCollection extends React.PureComponent<SortableColl
     const currentSourcePosition = collections.indexOf(source);
     const target = collection[originalTargetPosition];
     const currentTargetPosition = collections.indexOf(target);
-    console.log('====================================');
-    console.log(collection);
-    console.log('====================================');
     if (source) {
       // eslint-disable-next-line react/no-access-state-in-setstate
       const newCollection = [...collections];

src/components/list-pro/Sortable/template.tsx

@@ -78,7 +78,7 @@ class SiderSelectedItem extends React.PureComponent<SiderSelectedItemProps & Con
           })}
           aria-hidden="true"
         >
-          <CloseCircleFilled size="small" color="#5C4E61" />
+          <CloseCircleFilled size="14px" color="#313E75" />
         </span>
       </div>
     );

src/components/list-pro/drag.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { unionBy, noop } from 'lodash';
 import usePrefixCls from '../../utils/hooks/use-prefix-cls';
 import Sortable from './Sortable';
@@ -19,6 +19,10 @@ const DragableList = ({
   const prefixCls = usePrefixCls('list', customPrefixCls);
   const [data, setData] = useState(dataSource);
 
+  useEffect(() => {
+    setData(dataSource);
+  }, [dataSource])
+
   const innerHandleSort = (steps: any) => {
     const combineDashbord = unionBy(steps, dataSource, 'value');
     if (handleSort) {

src/components/list-pro/option.tsx

@@ -59,7 +59,7 @@ const SelectOption = (props: OptionProps) => {
       {isMultiple && !allowDuplicate && (
         <>
           <Checkbox checked={isSelected} disabled={disabled} onChange={noop} />
-          <span style={{ width: 10 }} />
+          <span style={{ width: 8 }} />
         </>
       )}
       {props.children}

src/components/list-pro/style/option.less

@@ -3,7 +3,7 @@
 .@{select-prefix-cls}-option {
   box-sizing: border-box;
   max-width: 100%;
-  padding: 0 25px 0 16px;
+  padding: 0 25px 0 12px;
   overflow: hidden;
   color: @color-font-list-primary-normal;
   font-size: 14px;

src/components/list-pro/style/sort.less

@@ -3,15 +3,19 @@
 @icon-circle-color-light: #f1f1fa;
 @icon-circle-color-text: #220968;
 
+.@{list-prefix-cls}-wrapper:hover .icon-drag {
+  display: inline;
+}
+
 .pa_sider-selected-item {
   position: relative;
   display: flex;
   align-items: center;
-  height: 40px;
-  padding-left: 20px;
+  height: 36px;
+  padding-left: 34px;
   color: @color-font-list-primary-normal;
   font-size: 14px;
-  line-height: 40px;
+  line-height: 36px;
   background: white;
   cursor: pointer;
   transition: background-color 0.3s ease;
@@ -24,7 +28,7 @@
   &__name-wrap {
     position: relative;
     display: inline-block;
-    height: 40px;
+    height: 36px;
     padding-left: 4px;
   }
 
@@ -99,7 +103,7 @@
     right: 10px;
     display: none;
     width: 12px;
-    height: 40px;
+    height: 36px;
     &.collapsed {
       display: none;
     }
@@ -108,12 +112,13 @@
 
 .pa-sider-icon-circle {
   position: absolute;
-  left: 2px;
+  left: 12px;
   display: inline-block;
-  width: 24px;
+  width: 20px;
   height: 24px;
   line-height: 23px;
   text-align: center;
+  transform: rotate(90deg);
   cursor: move;
 
   &.hollow {