feat(Transfer): 增加双栏穿梭选择框 (#666)

uiwjs · Mar 15, 2022 · 6223c70 · 6223c70
1 parent 5d1d047
commit 6223c70
Show file tree

Hide file tree

Showing 12 changed files with 521 additions and 15 deletions.
diff --git a/packages/react-table/src/Expandable.tsx b/packages/react-table/src/Expandable.tsx
@@ -1,22 +1,24 @@
-import React, {useState} from 'react';
+import React, { useState } from 'react';
 
 interface ExpandableProps<T> {
-  onClick: (expand: boolean)=>void;
-  expandIcon: (expanded: boolean) => React.ReactNode,
-  defaultExpand: boolean,
+  onClick: (expand: boolean) => void;
+  expandIcon: (expanded: boolean) => React.ReactNode;
+  defaultExpand: boolean;
 }
 /**
  * 可展开配置
-*/
-export default function ExpandableComponent<T>({defaultExpand,onClick, expandIcon}: ExpandableProps<T>) {
-  const [ expand, setExpand ] = useState<boolean>(defaultExpand)
-  return <div
-      style={{display: 'flex',justifyContent:'center',alignItems:'center'}}
-      onClick={()=>{
-        setExpand(!expand)
-        onClick(expand)
+ */
+export default function ExpandableComponent<T>({ defaultExpand, onClick, expandIcon }: ExpandableProps<T>) {
+  const [expand, setExpand] = useState<boolean>(defaultExpand);
+  return (
+    <div
+      style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}
+      onClick={() => {
+        setExpand(!expand);
+        onClick(expand);
         // record: T, index: number, expanded: boolean
       }}
       children={expandIcon(expand)}
     />
-}
+  );
+}
diff --git a/packages/react-table/src/util.ts b/packages/react-table/src/util.ts
@@ -126,4 +126,4 @@ export function getAllColumnsKeys<T>(data: TableColumns<T>[], keys: any[] = []):
     }
   }
   return keys;
-}
+}
diff --git a/packages/react-transfer/README.md b/packages/react-transfer/README.md
@@ -0,0 +1,192 @@
+Transfer 双栏穿梭选择框控件
+===
+
+选择一个或以上的选项后，点击左右的方向按钮，可以把选中的选项移动到另一栏为选中。在 v4.14.0+ 添加。
+
+## 基础用法
+
+最简单的用法。
+
+<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
+```jsx
+import React from 'react';
+import { Transfer } from 'uiw';
+
+function Demo() {
+
+  const options = [
+    { label: '武汉市',  key: 1 },
+    { label: '汉南区1', key: 5 },
+    { label: '汉南区2', key: 6 },
+    { label: '汉南区3', key: 7 },
+  ]
+
+  const [value,valueSet] = React.useState([{ label: '武汉市',  key: 1 }])
+
+  return (
+    <Row style={{ flexDirection:'column' }} >
+      <Transfer
+        options={options}
+        value={value}
+        onChange={(transfer,option)=>{
+          valueSet(option)
+        }}
+      />
+    </Row>
+  );
+}
+
+ReactDOM.render(<Demo />, _mount_);
+```
+
+## 树形节点
+
+<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
+```jsx
+import React from 'react';
+import { Transfer } from 'uiw';
+
+function Demo() {
+const options = [
+    {
+      label: '武汉市',
+      key: 1,
+      children: [
+        { label: '新洲区', key: 2, disabled: true },
+        { label: '武昌区', key: 3 },
+        {
+          label: '汉南区',
+          key: 4,
+          children: [
+            { label: '汉南区1', key: 5 },
+            { label: '汉南区2', key: 6 },
+            { label: '汉南区3', key: 7 },
+          ]
+        },
+      ]
+    }
+  ];
+
+  const [value,valueSet] = React.useState([{ label: '武汉市',  key: 1 }])
+
+  return (
+    <Row style={{ flexDirection:'column' }} >
+      <span style={{margin:'10px 0px 10px 0px'}}>树形节点</span>
+      <Transfer
+        options={options}
+        value={value}
+        onChange={(transfer,option)=>{
+          valueSet(option)
+        }}
+      />
+    </Row>
+  );
+}
+
+ReactDOM.render(<Demo />, _mount_);
+```
+
+## Form中使用
+
+<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
+```jsx
+import React from 'react';
+import { Transfer, Form } from 'uiw';
+
+function Demo() {
+
+  const options = [
+    { label: '武汉市',  key: 1 },
+    { label: '汉南区1', key: 5 },
+    { label: '汉南区2', key: 6 },
+    { label: '汉南区3', key: 7 },
+  ]
+
+  const [value,valueSet] = React.useState([{ label: '武汉市',  key: 1 }])
+  const form=React.useRef()
+
+  const setValue=()=>{
+    form.current.setFields({
+     transfer: [
+        { label: '汉南区1', key: 5 },
+        { label: '汉南区3', key: 7 },
+      ]
+    })
+  }
+
+  const resetValue=()=>{
+    form.current.resetForm()
+  }
+
+  return (
+    <Form
+        ref={form}
+        onSubmitError={(error) => {
+          if (error.filed) {
+            return { ...error.filed };
+          }
+          return null;
+        }}
+        onSubmit={({initial, current}) => {
+          const errorObj = {};
+          if (!current.searchTree) {
+            errorObj.searchTree = '默认需要选择内容，选择入内容';
+          }
+          if(Object.keys(errorObj).length > 0) {
+            const err = new Error();
+            err.filed = errorObj;
+            Notify.error({ title: '提交失败！', description: '请确认提交表单是否正确！' });
+            throw err;
+          }
+          Notify.success({
+            title: '提交成功！',
+            description: `表单提交成功，选择值为：${current.selectField}，将自动填充初始化值！`,
+          });
+        }}
+        fields={{
+          transfer: {
+            initialValue:[{ label: '汉南区2', key: 6 },{ label: '汉南区3', key: 7 },],
+            children: (
+              <Transfer options={options}/>
+            )
+          }
+        }}
+      >
+        {({ fields, state, canSubmit }) => {
+          return (
+            <div>
+              <Row style={{display:'flex',flexDirection:'column'}}>
+                <Col >{fields.transfer}</Col>
+              </Row>
+              <Row>
+                <Col fixed>
+                  <Button disabled={!canSubmit()} type="primary" htmlType="submit">提交</Button>
+                  <Button onClick={setValue} type="primary" >setValue</Button>
+                  <Button onClick={resetValue} type="primary" >重置</Button>
+                </Col>
+              </Row>
+              <Row>
+                <Col>
+                  <pre style={{ padding: 10, marginTop: 10 }}>
+                    {JSON.stringify(state.current, null, 2)}
+                  </pre>
+                </Col>
+              </Row>
+            </div>
+          )
+        }}
+      </Form>
+  );
+}
+
+ReactDOM.render(<Demo />, _mount_);
+```
+
+## Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+|--------- |-------- |--------- |-------- |
+| bodyStyle | 选项区域样式 | Object | { height: 200px, overflow-y: auto } |
+| onChange | 点击穿梭时回调 | (arrow, selectkeys) => void | - |
+| value | 指定当前选中的条目 | [{label, key }] | - |
+| options | 下拉数据源,可参考Tree下拉数据源 | [{ label, key, children: [{label, key}] }] | - |
diff --git a/packages/react-transfer/package.json b/packages/react-transfer/package.json
@@ -0,0 +1,54 @@
+{
+  "name": "@uiw/react-transfer",
+  "version": "4.13.9",
+  "description": "TreeChecked component",
+  "homepage": "https://uiwjs.github.io/#/components/transfer",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/uiwjs/uiw.git"
+  },
+  "license": "MIT",
+  "main": "cjs/index.js",
+  "module": "esm/index.js",
+  "files": [
+    "dist.css",
+    "cjs",
+    "esm",
+    "src"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "checked",
+    "design",
+    "uiw",
+    "uiw-react",
+    "react.js",
+    "react",
+    "react-component",
+    "component",
+    "components",
+    "ui",
+    "css",
+    "uikit",
+    "react-ui",
+    "framework",
+    "front-end",
+    "frontend"
+  ],
+  "peerDependencies": {
+    "react": ">=16.9.0",
+    "react-dom": ">=16.9.0"
+  },
+  "dependencies": {
+    "@uiw/react-card": "^4.13.9",
+    "@uiw/react-grid": "^4.13.9",
+    "@uiw/react-icon": "^4.13.9",
+    "@uiw/react-input": "^4.13.9",
+    "@uiw/react-tree": "^4.13.9",
+    "@uiw/react-tree-checked": "^4.13.9",
+    "@uiw/react-checkbox": "^4.13.9",
+    "@uiw/utils": "^4.13.9"
+  }
+}