From 5612e309f97d78e031885b9c4589d6d8607f04d4 Mon Sep 17 00:00:00 2001 From: Uni <1025687605@qq.com> Date: Wed, 10 Apr 2019 23:37:09 +0800 Subject: [PATCH 1/6] refactor: add forwardRef --- components/Icon/index.tsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/components/Icon/index.tsx b/components/Icon/index.tsx index de3677a..8d58920 100644 --- a/components/Icon/index.tsx +++ b/components/Icon/index.tsx @@ -1,13 +1,16 @@ import * as React from 'react' import cx from 'classnames' import * as warning from 'warning' -import { IconProps } from '../../types/icon.d' +import { IconProps } from 'types/icon.d' const { useCallback, useEffect } = React const cacheScript = new Set() const url = 'https://at.alicdn.com/t/font_1127944_82mztmm5t8t.js' -export default function Icon({ spin = false, prefixCls = 'snake-icon', ...rest }: IconProps) { +function Icon( + { spin = false, prefixCls = 'snake-icon', ...rest }: IconProps, + ref: React.RefObject +) { const { className, size, type, color, rotate, style, ...other } = rest const classStr = cx( prefixCls, @@ -38,8 +41,10 @@ export default function Icon({ spin = false, prefixCls = 'snake-icon', ...rest } warning(!!type, 'Icon', 'Should have `type` prop.') return ( - + ) } + +export default React.forwardRef(Icon) From aa8e715d410b5bab3572aa9e4631e0278be92507 Mon Sep 17 00:00:00 2001 From: Uni <1025687605@qq.com> Date: Tue, 16 Apr 2019 23:09:57 +0800 Subject: [PATCH 2/6] chore: change travis node version --- .travis.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.travis.yml b/.travis.yml index 213ee53..f1eb056 100644 --- a/.travis.yml +++ b/.travis.yml @@ -9,7 +9,7 @@ notifications: - 1171009543@qq.com node_js: - - 8 + - 10 before_install: - npm install codecov.io coveralls From 519b7339b30aa9d5c484874d9377c8774a3d9635 Mon Sep 17 00:00:00 2001 From: Uni <1025687605@qq.com> Date: Tue, 16 Apr 2019 23:23:15 +0800 Subject: [PATCH 3/6] chore: change npm to yarn --- .travis.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.travis.yml b/.travis.yml index f1eb056..132107d 100644 --- a/.travis.yml +++ b/.travis.yml @@ -12,7 +12,7 @@ node_js: - 10 before_install: - - npm install codecov.io coveralls + - yarn add codecov.io coveralls after_success: - cat ./coverage/lcov.info | ./node_modules/codecov.io/bin/codecov.io.js From 0e5a7fe76528439113a2ddcb830c7e99304e419d Mon Sep 17 00:00:00 2001 From: Uni <1025687605@qq.com> Date: Tue, 16 Apr 2019 23:30:44 +0800 Subject: [PATCH 4/6] test: change test --- components/Button/__test__/index.test.tsx | 0 components/Checkbox/__test__/index.test.tsx | 4 ++-- components/Panel/__test__/index.test.tsx | 0 3 files changed, 2 insertions(+), 2 deletions(-) delete mode 100644 components/Button/__test__/index.test.tsx delete mode 100644 components/Panel/__test__/index.test.tsx diff --git a/components/Button/__test__/index.test.tsx b/components/Button/__test__/index.test.tsx deleted file mode 100644 index e69de29..0000000 diff --git a/components/Checkbox/__test__/index.test.tsx b/components/Checkbox/__test__/index.test.tsx index ac552aa..0738433 100644 --- a/components/Checkbox/__test__/index.test.tsx +++ b/components/Checkbox/__test__/index.test.tsx @@ -71,9 +71,9 @@ describe('checkbox test', () => { it('disabled checkbox', () => { const fn = jest.fn() const { getByText } = render( - + 测试 - + ) const inputNode = getByText(/测试/i).previousSibling.firstChild as HTMLInputElement fireEvent.click(inputNode) diff --git a/components/Panel/__test__/index.test.tsx b/components/Panel/__test__/index.test.tsx deleted file mode 100644 index e69de29..0000000 From f606353c70e5832c0da4e9c6e8d06db02579840a Mon Sep 17 00:00:00 2001 From: Uni <1025687605@qq.com> Date: Sun, 9 Jun 2019 20:04:07 +0800 Subject: [PATCH 5/6] feat: add transfer --- components/Checkbox/index.scss | 9 +- components/Transfer/index.scss | 85 +++++++++++++++++ components/Transfer/index.tsx | 3 + components/Transfer/transfer.tsx | 126 +++++++++++++++++++++++++ components/Transfer/transferItem.tsx | 136 +++++++++++++++++++++++++++ components/index.tsx | 1 + components/utils/tool.ts | 12 +++ docs/components/Transfer/README.md | 17 ++++ docs/components/Transfer/base.tsx | 49 ++++++++++ docs/components/Transfer/index.tsx | 6 ++ docs/routes/components.ts | 8 +- types/transfer.d.ts | 73 ++++++++++++++ 12 files changed, 523 insertions(+), 2 deletions(-) create mode 100644 components/Transfer/index.scss create mode 100644 components/Transfer/index.tsx create mode 100644 components/Transfer/transfer.tsx create mode 100644 components/Transfer/transferItem.tsx create mode 100644 docs/components/Transfer/README.md create mode 100644 docs/components/Transfer/base.tsx create mode 100644 docs/components/Transfer/index.tsx create mode 100644 types/transfer.d.ts diff --git a/components/Checkbox/index.scss b/components/Checkbox/index.scss index be0bbc6..d983557 100644 --- a/components/Checkbox/index.scss +++ b/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 { diff --git a/components/Transfer/index.scss b/components/Transfer/index.scss new file mode 100644 index 0000000..135b528 --- /dev/null +++ b/components/Transfer/index.scss @@ -0,0 +1,85 @@ +.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; + } + } + + &-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; + } +} diff --git a/components/Transfer/index.tsx b/components/Transfer/index.tsx new file mode 100644 index 0000000..41842a4 --- /dev/null +++ b/components/Transfer/index.tsx @@ -0,0 +1,3 @@ +import Transfer from './Transfer' + +export default Transfer diff --git a/components/Transfer/transfer.tsx b/components/Transfer/transfer.tsx new file mode 100644 index 0000000..0e02dc7 --- /dev/null +++ b/components/Transfer/transfer.tsx @@ -0,0 +1,126 @@ +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 + onSelectChange([], []) + } + + return ( +
+ +
+
+ +
+
+ +
+
+ +
+ ) +} + +export default Transfer diff --git a/components/Transfer/transferItem.tsx b/components/Transfer/transferItem.tsx new file mode 100644 index 0000000..993184d --- /dev/null +++ b/components/Transfer/transferItem.tsx @@ -0,0 +1,136 @@ +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 ( +
+
+
+ {showSelectAll ? ( + + ) : null} + + {selectedKeys.length ? `${selectedKeys.length}/` : null} + {dataSource.length}项 + +
+
{title}
+
+
+ {showSearch ? ( +
+ {/* */} +
+ ) : null} +
+ {isFunction(children) ? ( + (children as ChildrenFn)({}) + ) : ( +
    + {dataSource.map((d, index) => { + return ( +
  • + handleChange(checked, d.key)} + disabled={d.disabled} + > + {render ? render(d, index) : d.title} + +
    • + ) + })} +
+ )} +
+
+ {footer ?
{footer}
: null} +
+ ) +} + +export default TransferItem diff --git a/components/index.tsx b/components/index.tsx index cb8cc4d..f2f3e99 100644 --- a/components/index.tsx +++ b/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' diff --git a/components/utils/tool.ts b/components/utils/tool.ts index 3788b85..e3410d6 100644 --- a/components/utils/tool.ts +++ b/components/utils/tool.ts @@ -92,3 +92,15 @@ export const getClientSize = () => { window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight } } + +/** isFunction */ +export const isFunction = (value: any) => typeof value === 'function' + +export const partition = (arr: any[], fn: (val: any, i: number, arr: any) => boolean) => + arr.reduce( + (acc, val, i, arr) => { + acc[fn(val, i, arr) ? 0 : 1].push(val) + return acc + }, + [[], []] + ) diff --git a/docs/components/Transfer/README.md b/docs/components/Transfer/README.md new file mode 100644 index 0000000..1162d4e --- /dev/null +++ b/docs/components/Transfer/README.md @@ -0,0 +1,17 @@ +--- +imports: + import BasicDemoCode from '!raw-loader!./base.tsx'; + import BasicDemo from './base.tsx'; +--- + +# Transfer 穿梭框 + +双栏穿梭选择框。 + +## 基础用法 + +:::demo + + + +::: \ No newline at end of file diff --git a/docs/components/Transfer/base.tsx b/docs/components/Transfer/base.tsx new file mode 100644 index 0000000..412fcc6 --- /dev/null +++ b/docs/components/Transfer/base.tsx @@ -0,0 +1,49 @@ +import * as React from 'react' +import { Transfer, Checkbox } from 'components' + +const CheckboxItem = Checkbox.item + +const { useState } = React + +const mockData: any = [] +for (let i = 0; i < 20; i++) { + mockData.push({ + key: `${i}`, + title: `content${i + 1}`, + disabled: i % 3 < 1 + }) +} + +const oriTargetKeys = mockData.filter(item => +item.key % 3 > 1).map(item => item.key) + +export default function Base() { + const [targetKey, setTargetKey] = useState(oriTargetKeys) + const [selectedKeys, setSelectedKeys] = useState([]) + const [checked, setChecked] = useState(false) + + const handleChange = tar => { + setTargetKey(tar) + } + + const handleSelectChange = (src, tar) => { + setSelectedKeys([...src, ...tar]) + } + return ( +
+ +
+ setChecked(checked)}> + disabled + +
+
+ ) +} diff --git a/docs/components/Transfer/index.tsx b/docs/components/Transfer/index.tsx new file mode 100644 index 0000000..fcaa244 --- /dev/null +++ b/docs/components/Transfer/index.tsx @@ -0,0 +1,6 @@ +import * as React from 'react' +import README from './README.md' + +export default function() { + return +} diff --git a/docs/routes/components.ts b/docs/routes/components.ts index 1ed34cf..92af8c3 100644 --- a/docs/routes/components.ts +++ b/docs/routes/components.ts @@ -85,8 +85,14 @@ export default [ }, { key: 'spin', - name: 'Spin 文字提示', + name: 'Spin 加载指示器', path: '/app/basic/spin', component: require('../components/Spin').default + }, + { + key: 'transfer', + name: 'Transfer 加载指示器', + path: '/app/basic/transfer', + component: require('../components/Transfer').default } ] diff --git a/types/transfer.d.ts b/types/transfer.d.ts new file mode 100644 index 0000000..5dfead3 --- /dev/null +++ b/types/transfer.d.ts @@ -0,0 +1,73 @@ +import { OmitType } from 'components/utils/type' + +export interface TransferProps { + // 自定义类名 + className?: string + // dataSource 数据源 左侧区域的数据源 + dataSource?: ItemProps[] + // targetKeys 显示在右侧框数据的 key 集合 + targetKeys?: string[] + // footer 底部自定义 + footer?: React.ReactNode + // render 自定义渲染函数 + render?: (record: ItemProps, index: number) => React.ReactNode + // selectedKeys 选中的 key + selectedKeys?: string[] + // showSearch 是否展示搜索框 默认为 false + showSearch?: boolean + // showSelectAll 是否展示全选框 默认为 true + showSelectAll?: boolean + // onChange 在发生转移的时候的回调 + onChange?: (targetKeys: string[], direction: Direction, moveKeys: string[]) => void + // onSearch 点击搜索的回调或者不存在 `onInputChange` 的时候，输入变化的回调 + onSearch?: (value: string, direction: Direction) => void + // searchOnChange 是否在 input change 的时候调用 默认为 true + searchOnChange?: boolean + // onSelectChange 选中项发生变化的回调函数 + onSelectChange?: (sourceSelectedKeys: string[], targetSelectedKeys: string[]) => void + // listStyle 穿梭框的样式 + listStyle?: React.CSSProperties + // 操作文案的集合 从上到下 默认是['>', '<'] + operations?: string[] + // title 标题集合 默认是从左到右 默认 ['', ''] + titles?: string[] + // disabled 是否不可用 + disabled?: boolean + children?: React.ReactNode | ChildrenFn +} + +export interface TransferItemProps + extends OmitType { + // 标题 + title?: string + // direction + direction?: Direction + // prefixCls + prefixCls?: string + // onChange + onChange?: (selectedKeys: string[], direction: Direction) => void +} + +export type Direction = 'left' | 'right' + +export interface ItemProps { + // 键值 + key: string + // 标题 + title?: string + // disabled 是否禁用 + disabled?: boolean +} + +export type ChildrenFn = (props: RenderProps) => React.ReactNode + +export interface RenderProps { + direction?: Direction + disabled?: boolean + // 勾选单个 + onItemSelect?: (key: string, selected: boolean) => void + // 勾选一组 + onItemSelectAll?: (selectedKeys: string[], selected: boolean) => void + // selectedKeys + selectedKeys?: string[] +} \ No newline at end of file From 4d9fe666a4196623c21e0a8cb41d605824274c99 Mon Sep 17 00:00:00 2001 From: Uni <1025687605@qq.com> Date: Sun, 9 Jun 2019 20:36:06 +0800 Subject: [PATCH 6/6] docs: add docs --- components/Transfer/index.scss | 17 +++++++++ components/Transfer/transfer.tsx | 4 +- components/Transfer/transferItem.tsx | 3 +- docs/components/Transfer/README.md | 41 +++++++++++++++++++- docs/components/Transfer/withFooter.tsx | 50 +++++++++++++++++++++++++ docs/layout/block/index.scss | 6 ++- docs/routes/components.ts | 2 +- types/transfer.d.ts | 2 +- 8 files changed, 118 insertions(+), 7 deletions(-) create mode 100644 docs/components/Transfer/withFooter.tsx diff --git a/components/Transfer/index.scss b/components/Transfer/index.scss index 135b528..8cdd481 100644 --- a/components/Transfer/index.scss +++ b/components/Transfer/index.scss @@ -45,6 +45,19 @@ } } + &-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%; @@ -81,5 +94,9 @@ margin: 0 8px; overflow: hidden; vertical-align: middle; + + .snake-button-default { + padding: 0 10px; + } } } diff --git a/components/Transfer/transfer.tsx b/components/Transfer/transfer.tsx index 0e02dc7..bc8430f 100644 --- a/components/Transfer/transfer.tsx +++ b/components/Transfer/transfer.tsx @@ -72,7 +72,9 @@ function Transfer({ moveKeys = direction === 'right' ? rightSelectedKeys.slice() : leftSelectedKeys.slice() onChange(cloneTargetKeys, direction as Direction, moveKeys) // 变化后重置 keys - onSelectChange([], []) + direction === 'left' + ? onSelectChange(leftSelectedKeys, []) + : onSelectChange([], rightSelectedKeys) } return ( diff --git a/components/Transfer/transferItem.tsx b/components/Transfer/transferItem.tsx index 993184d..c40b256 100644 --- a/components/Transfer/transferItem.tsx +++ b/components/Transfer/transferItem.tsx @@ -77,7 +77,8 @@ function TransferItem({ return (
diff --git a/docs/components/Transfer/README.md b/docs/components/Transfer/README.md index 1162d4e..0c6fc20 100644 --- a/docs/components/Transfer/README.md +++ b/docs/components/Transfer/README.md @@ -2,6 +2,8 @@ imports: import BasicDemoCode from '!raw-loader!./base.tsx'; import BasicDemo from './base.tsx'; + import FooterDemoCode from '!raw-loader!./withFooter.tsx'; + import FooterDemo from './withFooter.tsx'; --- # Transfer 穿梭框 @@ -14,4 +16,41 @@ imports: -::: \ No newline at end of file +::: + +## 自定义底部 + +:::demo + + + +::: + +## Api + +| 属性 | 说明 | 类型 | 默认值 | 必填 | +| :------------- | :---------------------------------------- | :----------------------------------------------------------------------- | :--------- | :--- | +| className | 类名 | string | -- | -- | +| dataSource | 数据源 | Item[] | [] | -- | +| targetKeys | 右侧框数据的 key 集合 | string[] | [] | -- | +| footer | 自定义的底部 | ReactNode | -- | -- | +| render | 自定义渲染每一行的内容 | (record: ItemProps, index: number) => React.ReactNode | -- | -- | +| selectedKeys | 选中的 `key` 集合 | string[] | [] | -- | +| showSearch | 是否展示搜索框 | boolean | `false` | -- | +| showSelectAll | 是否展示全选框 | boolean | `true` | -- | +| onChange | 在发生转移的时候的回调 | (targetKeys: string[], direction: Direction, moveKeys: string[]) => void | -- | -- | +| onSearch | 点击搜索的回调 | (value: string, direction: Direction) => void | -- | -- | +| searchOnChange | 是否在 input change 的时候调用 `onSearch` | boolean | `true` | -- | +| onSelectChange | 选中项发生变化的回调函数 | (sourceSelectedKeys: string[], targetSelectedKeys: string[]) => void | -- | -- | +| listStyle | 穿梭框的样式 | CSSProperties | -- | -- | +| operations | 操作文案的集合 从上到下 | string[] | ['>', '<'] | -- | +| titles | 标题集合 默认是从左到右 | string[] | ['>', '<'] | -- | +| disabled | 是否不可用 | boolean | `false` | -- | + +### Item + +| 属性 | 说明 | 类型 | 默认值 | 必填 | +| :------- | :------- | :------ | :------ | :--- | +| key | 键值必填 | string | -- | `是` | +| title | 标题 | string | -- | -- | +| disabled | 是否禁用 | boolean | `false` | -- | diff --git a/docs/components/Transfer/withFooter.tsx b/docs/components/Transfer/withFooter.tsx new file mode 100644 index 0000000..68a29b0 --- /dev/null +++ b/docs/components/Transfer/withFooter.tsx @@ -0,0 +1,50 @@ +import * as React from 'react' +import { Transfer, Checkbox } from 'components' + +const CheckboxItem = Checkbox.item + +const { useState } = React + +const mockData: any = [] +for (let i = 0; i < 20; i++) { + mockData.push({ + key: `${i}`, + title: `content${i + 1}`, + disabled: i % 3 < 1 + }) +} + +const oriTargetKeys = mockData.filter(item => +item.key % 3 > 1).map(item => item.key) + +export default function Base() { + const [targetKey, setTargetKey] = useState(oriTargetKeys) + const [selectedKeys, setSelectedKeys] = useState([]) + const [checked, setChecked] = useState(false) + + const handleChange = tar => { + setTargetKey(tar) + } + + const handleSelectChange = (src, tar) => { + setSelectedKeys([...src, ...tar]) + } + return ( +
+ footer
} + /> +
+ setChecked(checked)}> + disabled + +
+
+ ) +} diff --git a/docs/layout/block/index.scss b/docs/layout/block/index.scss index 2bbba1f..79c65a2 100644 --- a/docs/layout/block/index.scss +++ b/docs/layout/block/index.scss @@ -1,20 +1,22 @@ .snake-design-block { &-header { border-bottom: 1px solid #e2ecf4; - padding: 0 20px 20px; + padding: 20px; } &-description { padding: 10px; color: #314659; position: relative; + span { position: absolute; right: 20px; cursor: pointer; } + &.dash { border-bottom: 1px dashed #e2ecf4; } } -} +} \ No newline at end of file diff --git a/docs/routes/components.ts b/docs/routes/components.ts index 92af8c3..e299d42 100644 --- a/docs/routes/components.ts +++ b/docs/routes/components.ts @@ -91,7 +91,7 @@ export default [ }, { key: 'transfer', - name: 'Transfer 加载指示器', + name: 'Transfer 穿梭框', path: '/app/basic/transfer', component: require('../components/Transfer').default } diff --git a/types/transfer.d.ts b/types/transfer.d.ts index 5dfead3..0b79474 100644 --- a/types/transfer.d.ts +++ b/types/transfer.d.ts @@ -70,4 +70,4 @@ export interface RenderProps { onItemSelectAll?: (selectedKeys: string[], selected: boolean) => void // selectedKeys selectedKeys?: string[] -} \ No newline at end of file +}