[WIP]Transfer

components/Checkbox/index.scss

@@ -1,5 +1,4 @@
 @import '../styles/themes/default';
-
 $checkbox: 'snake-checkbox-item';
 
 .#{$checkbox} {
@@ -137,6 +136,14 @@ $checkbox: 'snake-checkbox-item';
         opacity: 1;
       }
     }
+
+    &.#{$checkbox}-disabled {
+      .#{$checkbox}-select-inner {
+        &::after {
+          background-color: rgba(0, 0, 0, 0.25);
+        }
+      }
+    }
   }
 
   &-disabled {

components/Transfer/index.scss

@@ -0,0 +1,102 @@
+.snake-transfer {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: rgba(0, 0, 0, 0.65);
+  font-size: 14px;
+  line-height: 1.5;
+  list-style: none;
+  position: relative;
+
+  &-item {
+    position: relative;
+    display: inline-block;
+    width: 180px;
+    height: 200px;
+    vertical-align: middle;
+    border: 1px solid #d9d9d9;
+    border-radius: 4px;
+    overflow: hidden;
+    padding-top: 40px;
+
+    &-disabled {
+      background: #f5f5f5;
+    }
+
+    &-header {
+      padding: 8px 12px 9px;
+      overflow: hidden;
+      color: rgba(0, 0, 0, 0.65);
+      background: #fff;
+      border-bottom: 1px solid #e8e8e8;
+      border-radius: 4px 4px 0 0;
+      display: flex;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+
+      &-title {
+        margin-left: auto;
+      }
+
+      &-number {
+        padding-right: 8px;
+      }
+    }
+
+    &-footer {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      border-top: 1px solid #e8e8e8;
+      border-radius: 0 0 4px 4px;
+    }
+
+    &-with-footer {
+      padding-bottom: 34px;
+    }
+
+    &-content {
+      position: relative;
+      height: 100%;
+      font-size: 14px;
+
+      &-search {
+        padding: 12px;
+      }
+
+      &-body {
+        height: 100%;
+        margin: 0;
+        padding: 0;
+        overflow: auto;
+
+        ul {
+          list-style: none;
+          padding: 0;
+          margin: 0;
+        }
+      }
+
+      &-list-item {
+        padding: 6px 12px;
+        overflow: hidden;
+        white-space: nowrap;
+        transition: all 0.3s;
+      }
+    }
+  }
+
+  &-operation {
+    display: inline-block;
+    margin: 0 8px;
+    overflow: hidden;
+    vertical-align: middle;
+
+    .snake-button-default {
+      padding: 0 10px;
+    }
+  }
+}

components/Transfer/index.tsx

@@ -0,0 +1,3 @@
+import Transfer from './Transfer'
+
+export default Transfer

components/Transfer/transfer.tsx

@@ -0,0 +1,128 @@
+import * as React from 'react'
+import cx from 'classnames'
+import TransferItem from './TransferItem'
+import { TransferProps, Direction } from 'types/transfer'
+import { partition, noop } from '../utils/tool'
+import Button from '../Button'
+
+import './index.scss'
+
+const prefixCls = 'snake-transfer'
+
+function Transfer({
+  titles = ['', ''],
+  operations = ['>', '<'],
+  className,
+  dataSource = [],
+  targetKeys = [],
+  footer,
+  render,
+  selectedKeys = [],
+  showSearch = false,
+  showSelectAll = true,
+  onChange = noop,
+  onSearch = noop,
+  searchOnChange = true,
+  onSelectChange = noop,
+  children,
+  listStyle,
+  disabled = false
+}: TransferProps) {
+  const getCommonProps = () => {
+    return {
+      footer: footer,
+      render: render,
+      showSearch: showSearch,
+      showSelectAll: showSelectAll,
+      searchOnChange: searchOnChange,
+      onSearch: onSearch,
+      children: children,
+      listStyle: listStyle,
+      disabled: disabled
+    }
+  }
+
+  const getItemDataSource = () => {
+    return partition(dataSource, d => targetKeys.includes(d.key))
+  }
+
+  const getItemSelectedKeys = () => {
+    return partition(selectedKeys, d => targetKeys.includes(d))
+  }
+
+  const [rightDataSource, leftDataSource] = getItemDataSource()
+  const [rightSelectedKeys, leftSelectedKeys] = getItemSelectedKeys()
+
+  const handleSelectChange = (selectedKeys, direction) => {
+    if (direction === 'left') {
+      onSelectChange(selectedKeys, rightSelectedKeys)
+    } else {
+      onSelectChange(leftSelectedKeys, selectedKeys)
+    }
+  }
+
+  const handleChange = (direction: string) => {
+    if (disabled) return
+    let cloneTargetKeys = targetKeys.slice()
+    let moveKeys = []
+    cloneTargetKeys =
+      direction === 'right'
+        ? cloneTargetKeys.concat(leftSelectedKeys)
+        : cloneTargetKeys.filter(d => !rightSelectedKeys.includes(d))
+    moveKeys = direction === 'right' ? rightSelectedKeys.slice() : leftSelectedKeys.slice()
+    onChange(cloneTargetKeys, direction as Direction, moveKeys)
+    // 变化后重置 keys
+    direction === 'left'
+      ? onSelectChange(leftSelectedKeys, [])
+      : onSelectChange([], rightSelectedKeys)
+  }
+
+  return (
+    <div
+      className={cx(
+        prefixCls,
+        {
+          [`${prefixCls}-transfer-disabled`]: disabled
+        },
+        className
+      )}
+    >
+      <TransferItem
+        title={titles[0]}
+        dataSource={leftDataSource}
+        selectedKeys={leftSelectedKeys}
+        direction="left"
+        onChange={handleSelectChange}
+        {...getCommonProps()}
+      />
+      <div className={`${prefixCls}-operation`}>
+        <div>
+          <Button
+            onClick={() => handleChange('right')}
+            disabled={disabled || !leftSelectedKeys.length}
+          >
+            {operations[0]}
+          </Button>
+        </div>
+        <div style={{ marginTop: 20 }}>
+          <Button
+            onClick={() => handleChange('left')}
+            disabled={disabled || !rightSelectedKeys.length}
+          >
+            {operations[1]}
+          </Button>
+        </div>
+      </div>
+      <TransferItem
+        title={titles[1]}
+        dataSource={rightDataSource}
+        selectedKeys={rightSelectedKeys}
+        direction="right"
+        onChange={handleSelectChange}
+        {...getCommonProps()}
+      />
+    </div>
+  )
+}
+
+export default Transfer

components/Transfer/transferItem.tsx

@@ -0,0 +1,137 @@
+import * as React from 'react'
+import cx from 'classnames'
+import { TransferItemProps, ChildrenFn } from 'types/transfer'
+import Checkbox from '../Checkbox'
+import { isFunction } from '../utils/tool'
+
+const CheckboxItem = Checkbox.item
+
+// const { useState } = React
+const noop = () => {}
+
+function TransferItem({
+  dataSource = [],
+  showSelectAll = true,
+  title = '',
+  showSearch = false,
+  footer,
+  prefixCls = 'snake-transfer-item',
+  // item 中的 selectedKeys 为对应的区域的 selectedKeys, 左边为 sourceSelectedKeys 右边为 targetSelectedKeys
+  selectedKeys = [],
+  direction = 'left',
+  onChange = noop,
+  // onSearch = noop,
+  // searchOnChange = true,
+  disabled = false,
+  children,
+  listStyle,
+  render
+}: TransferItemProps) {
+  // const [inputValue, setInputValue] = useState('')
+
+  const getAvailableData = () => {
+    const availableData = dataSource.filter(d => !d.disabled)
+    return availableData
+  }
+
+  const isIndeterminate = () => {
+    const availableData = getAvailableData()
+    const isIndeterminate =
+      availableData.some(d => selectedKeys.includes(d.key)) &&
+      selectedKeys.length !== availableData.length
+    return isIndeterminate
+  }
+
+  const handleChange = (checked: boolean, key: string) => {
+    const cloneSelectedKeys = selectedKeys.slice()
+    if (checked) {
+      cloneSelectedKeys.push(key)
+    } else {
+      cloneSelectedKeys.splice(selectedKeys.indexOf(key), 1)
+    }
+    onChange(cloneSelectedKeys, direction)
+  }
+
+  const handleSelectAll = (checked: boolean) => {
+    let cloneSelectedKeys: string[] = []
+    const initialArray: string[] = []
+    const availableData = getAvailableData()
+    if (checked) {
+      cloneSelectedKeys = availableData.reduce((pre, cur) => {
+        pre.push(cur.key)
+        return pre
+      }, initialArray)
+    } else {
+      cloneSelectedKeys = []
+    }
+    onChange(cloneSelectedKeys, direction)
+  }
+
+  // const handleInputChange = (value: string) => {
+  //   setInputValue(value)
+  //   if (searchOnChange) {
+  //     onSearch(inputValue, direction)
+  //   }
+  // }
+
+  return (
+    <div
+      className={cx(prefixCls, {
+        [`${prefixCls}-disabled`]: disabled,
+        [`${prefixCls}-with-footer`]: footer
+      })}
+      style={listStyle}
+    >
+      <div className={`${prefixCls}-header`}>
+        <div className={`${prefixCls}-header-total`}>
+          {showSelectAll ? (
+            <CheckboxItem
+              checked={
+                selectedKeys.length === getAvailableData().length && selectedKeys.length !== 0
+              }
+              indeterminate={isIndeterminate()}
+              onChange={handleSelectAll}
+              disabled={disabled}
+            />
+          ) : null}
+          <span className={`${prefixCls}-header-number`}>
+            {selectedKeys.length ? `${selectedKeys.length}/` : null}
+            {dataSource.length}项
+          </span>
+        </div>
+        <div className={`${prefixCls}-header-title`}>{title}</div>
+      </div>
+      <div className={`${prefixCls}-content`}>
+        {showSearch ? (
+          <div className={`${prefixCls}-content-search`}>
+            {/* <Input value={inputValue} onChange={handleInputChange} /> */}
+          </div>
+        ) : null}
+        <div className={`${prefixCls}-content-body`}>
+          {isFunction(children) ? (
+            (children as ChildrenFn)({})
+          ) : (
+            <ul>
+              {dataSource.map((d, index) => {
+                return (
+                  <li key={d.key} className={`${prefixCls}-content-list-item`}>
+                    <CheckboxItem
+                      checked={selectedKeys.includes(d.key)}
+                      onChange={checked => handleChange(checked, d.key)}
+                      disabled={d.disabled}
+                    >
+                      {render ? render(d, index) : d.title}
+                    </CheckboxItem>
+                  </li>
+                )
+              })}
+            </ul>
+          )}
+        </div>
+      </div>
+      {footer ? <div className={`${prefixCls}-footer`}>{footer}</div> : null}
+    </div>
+  )
+}
+
+export default TransferItem

components/index.tsx

@@ -15,3 +15,4 @@ export { default as BackTop } from './BackTop/index'
 export { default as Popover } from './Popover/index'
 export { default as Tooltip } from './Tooltip/index'
 export { default as Spin } from './Spin/index'
+export { default as Transfer } from './Transfer/index'