@gmfe/react 2.14.17 → 2.14.19-beta.0

package/src/component/tool_tip/stories.js

@@ -1,36 +1,36 @@
-import React from 'react'
-import { storiesOf } from '@storybook/react'
-import ToolTip from './index'
-
-storiesOf('ToolTip', module).add('default', () => (
-  <div style={{ padding: '100px' }}>
-    <ToolTip
-      popup={<div style={{ width: '100px', height: '100px' }}>hello</div>}
-    />
-    <ToolTip
-      popup={<div style={{ width: '100px', height: '100px' }}>hello</div>}
-    >
-      <span>hover tip</span>
-    </ToolTip>
-    <br />
-    <ToolTip
-      right
-      popup={<div style={{ width: '100px', height: '100px' }}>hello</div>}
-    >
-      <span>right hover tip</span>
-    </ToolTip>
-    <ToolTip
-      center
-      popup={<div style={{ width: '100px', height: '100px' }}>hello</div>}
-    >
-      <span>center hover tip</span>
-    </ToolTip>
-    <br />
-    <ToolTip
-      top
-      popup={<div style={{ width: '100px', height: '100px' }}>hello</div>}
-    >
-      <span>top hover tip</span>
-    </ToolTip>
-  </div>
-))
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import ToolTip from './index'
+
+storiesOf('ToolTip', module).add('default', () => (
+  <div style={{ padding: '100px' }}>
+    <ToolTip
+      popup={<div style={{ width: '100px', height: '100px' }}>hello</div>}
+    />
+    <ToolTip
+      popup={<div style={{ width: '100px', height: '100px' }}>hello</div>}
+    >
+      <span>hover tip</span>
+    </ToolTip>
+    <br />
+    <ToolTip
+      right
+      popup={<div style={{ width: '100px', height: '100px' }}>hello</div>}
+    >
+      <span>right hover tip</span>
+    </ToolTip>
+    <ToolTip
+      center
+      popup={<div style={{ width: '100px', height: '100px' }}>hello</div>}
+    >
+      <span>center hover tip</span>
+    </ToolTip>
+    <br />
+    <ToolTip
+      top
+      popup={<div style={{ width: '100px', height: '100px' }}>hello</div>}
+    >
+      <span>top hover tip</span>
+    </ToolTip>
+  </div>
+))

package/src/component/transfer/box.js

@@ -1,141 +1,186 @@
-import { getLocale } from '@gmfe/locales'
-import React from 'react'
-import PropTypes from 'prop-types'
-import Flex from '../flex'
-import { Checkbox, CheckboxGroup } from '../checkbox'
-import { pinYinFilter } from '@gm-common/tool'
-import _ from 'lodash'
-import SearchSvg from '../../../svg/search.svg'
-
-class Box extends React.Component {
-  constructor(props) {
-    super(props)
-    this.state = {
-      query: ''
-    }
-  }
-
-  handleChange = selectedValues => {
-    const { onSelect } = this.props
-    onSelect(selectedValues)
-  }
-
-  handleSelectAll = checked => {
-    const { onSelect } = this.props
-
-    onSelect(
-      checked.length === 0 ? [] : _.map(this.getProcessList(), v => v.value)
-    )
-  }
-
-  handleQuery = e => {
-    this.setState({
-      query: e.target.value
-    })
-  }
-
-  getProcessList = () => {
-    const { list, withFilter } = this.props
-    const { query } = this.state
-    if (withFilter === true) {
-      return pinYinFilter(list, query, e => e.name)
-    } else if (withFilter) {
-      return withFilter(list, query)
-    }
-  }
-
-  render() {
-    const {
-      selectedValues,
-
-      style,
-
-      title,
-      placeholder,
-      disabled,
-      withFilter
-    } = this.props
-
-    const { query } = this.state
-
-    const processList = this.getProcessList()
-
-    return (
-      <Flex column className='gm-transfer-box gm-border gm-bg' style={style}>
-        {title && (
-          <div className='gm-transfer-box-title gm-padding-5 gm-back-bg text-center gm-border-bottom'>
-            {title}
-          </div>
-        )}
-
-        {withFilter ? (
-          <div className='gm-transfer-box-filter'>
-            <i className='gm-text-desc gm-text-16 gm-line-height-1'>
-              <SearchSvg />
-            </i>
-            <input
-              type='text'
-              className='form-control'
-              value={query}
-              disabled={disabled}
-              onChange={this.handleQuery}
-              placeholder={placeholder}
-            />
-          </div>
-        ) : null}
-        <Flex flex column className='gm-bg gm-transfer-box-list gm-overflow-y'>
-          <CheckboxGroup
-            className='gm-margin-0'
-            name={'transferBox' + Math.random()}
-            value={selectedValues}
-            onChange={this.handleChange}
-          >
-            {_.map(processList, v => (
-              <Checkbox
-                key={v.value}
-                value={v.value}
-                disabled={disabled}
-                block
-                className='gm-cursor'
-              >
-                {v.name}
-              </Checkbox>
-            ))}
-          </CheckboxGroup>
-        </Flex>
-
-        <Flex justifyBetween alignCenter className='gm-border-top'>
-          <CheckboxGroup
-            name='transferBoxBottom'
-            className='gm-margin-0 gm-padding-5'
-            value={[
-              processList.length !== 0 &&
-                processList.length === selectedValues.length
-            ]}
-            onChange={this.handleSelectAll}
-          >
-            <Checkbox value disabled={disabled}>
-              {getLocale('全选')}
-            </Checkbox>
-          </CheckboxGroup>
-          <div className='gm-padding-lr-5 gm-text-desc'>
-            {selectedValues.length}/{processList.length}
-          </div>
-        </Flex>
-      </Flex>
-    )
-  }
-}
-
-Box.propTypes = {
-  onSelect: PropTypes.func.isRequired,
-  list: PropTypes.array.isRequired,
-  selectedValues: PropTypes.array.isRequired,
-  title: PropTypes.string,
-  placeholder: PropTypes.string,
-  withFilter: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
-  style: PropTypes.object,
-  disabled: PropTypes.bool
-}
-
-export default Box
+import { getLocale } from '@gmfe/locales'
+import React from 'react'
+import PropTypes from 'prop-types'
+import Flex from '../flex'
+import { Checkbox, CheckboxGroup } from '../checkbox'
+import { pinYinFilter } from '@gm-common/tool'
+import _, { property } from 'lodash'
+import SearchSvg from '../../../svg/search.svg'
+import { FixedSizeList as List } from 'react-window'
+
+const pxToNumber = value => {
+  return parseInt(value, 10)
+}
+class Box extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      query: ''
+    }
+  }
+
+  handleChange = selectedValues => {
+    const { onSelect } = this.props
+    onSelect(selectedValues)
+  }
+
+  handleSelectAll = checked => {
+    const { onSelect } = this.props
+
+    onSelect(
+      checked.length === 0 ? [] : _.map(this.getProcessList(), v => v.value)
+    )
+  }
+
+  handleQuery = e => {
+    this.setState({
+      query: e.target.value
+    })
+  }
+
+  getProcessList = () => {
+    const { list, withFilter } = this.props
+    const { query } = this.state
+    if (withFilter === true) {
+      return pinYinFilter(list, query, e => e.name)
+    } else if (withFilter) {
+      return withFilter(list, query)
+    }
+  }
+
+  render() {
+    const {
+      selectedValues,
+      style,
+      title,
+      isVirtual = false,
+      itemSize,
+      placeholder,
+      disabled,
+      withFilter
+    } = this.props
+    const { query } = this.state
+
+    const processList = this.getProcessList()
+
+    return (
+      <Flex
+        column
+        className='gm-transfer-box gm-border gm-bg'
+        style={isVirtual ? _.omit(style, 'height') : style}
+      >
+        {title && (
+          <div className='gm-transfer-box-title gm-padding-5 gm-back-bg text-center gm-border-bottom'>
+            {title}
+          </div>
+        )}
+
+        {withFilter ? (
+          <div className='gm-transfer-box-filter'>
+            <i className='gm-text-desc gm-text-16 gm-line-height-1'>
+              <SearchSvg />
+            </i>
+            <input
+              type='text'
+              className='form-control'
+              value={query}
+              disabled={disabled}
+              onChange={this.handleQuery}
+              placeholder={placeholder}
+            />
+          </div>
+        ) : null}
+        {isVirtual ? (
+          <Flex flex column className='gm-bg gm-transfer-box-list'>
+            <List
+              itemKey={v => v.value}
+              style={{ height: style?.height || '300px' }}
+              height={pxToNumber(style?.height || 300)}
+              itemCount={processList.length}
+              itemSize={+itemSize || 25}
+              itemData={processList}
+            >
+              {({ index, style }) => (
+                <CheckboxGroup
+                  className='gm-margin-0'
+                  name={'transferBox' + Math.random()}
+                  value={selectedValues}
+                  onChange={this.handleChange}
+                >
+                  <Checkbox
+                    key={index}
+                    value={processList[index].value}
+                    disabled={disabled}
+                    block
+                    className='gm-cursor'
+                    style={style}
+                  >
+                    {processList[index].name}
+                  </Checkbox>
+                </CheckboxGroup>
+              )}
+            </List>
+          </Flex>
+        ) : (
+          <Flex
+            flex
+            column
+            className='gm-bg gm-transfer-box-list gm-overflow-y'
+          >
+            <CheckboxGroup
+              className='gm-margin-0'
+              name={'transferBox' + Math.random()}
+              value={selectedValues}
+              onChange={this.handleChange}
+            >
+              {_.map(processList, v => (
+                <Checkbox
+                  key={v.value}
+                  value={v.value}
+                  disabled={disabled}
+                  block
+                  className='gm-cursor'
+                >
+                  {v.name}
+                </Checkbox>
+              ))}
+            </CheckboxGroup>
+          </Flex>
+        )}
+        <Flex justifyBetween alignCenter className='gm-border-top'>
+          <CheckboxGroup
+            name='transferBoxBottom'
+            className='gm-margin-0 gm-padding-5'
+            value={[
+              processList.length !== 0 &&
+                processList.length === selectedValues.length
+            ]}
+            onChange={this.handleSelectAll}
+          >
+            <Checkbox value disabled={disabled}>
+              {getLocale('全选')}
+            </Checkbox>
+          </CheckboxGroup>
+          <div className='gm-padding-lr-5 gm-text-desc'>
+            {selectedValues.length}/{processList.length}
+          </div>
+        </Flex>
+      </Flex>
+    )
+  }
+}
+
+Box.propTypes = {
+  onSelect: PropTypes.func.isRequired,
+  list: PropTypes.array.isRequired,
+  selectedValues: PropTypes.array.isRequired,
+  title: PropTypes.string,
+  placeholder: PropTypes.string,
+  withFilter: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
+  style: PropTypes.object,
+  disabled: PropTypes.bool,
+  isVirtual: PropTypes.bool,
+  itemSize: PropTypes.number
+}
+
+export default Box

package/src/component/transfer/index.js

@@ -1,4 +1,4 @@
-import Transfer from './transfer'
-import TransferGroup from './transfer_group'
-
-export { Transfer, TransferGroup }
+import Transfer from './transfer'
+import TransferGroup from './transfer_group'
+
+export { Transfer, TransferGroup }

package/src/component/transfer/stories.js

@@ -1,118 +1,108 @@
-import React from 'react'
-import { storiesOf } from '@storybook/react'
-import Transfer from './transfer'
-import TransferGroup from './transfer_group'
-import { observable } from 'mobx'
-
-const store = observable({
-  list: [
-    {
-      value: 1,
-      name: '水果'
-    },
-    {
-      value: 2,
-      name: '蔬菜'
-    },
-    {
-      value: 3,
-      name: '肉类'
-    },
-    {
-      value: 4,
-      name: '干果'
-    },
-    {
-      value: 5,
-      name: '什么乱七八糟'
-    },
-    {
-      value: 6,
-      name: '电子科技'
-    }
-  ],
-  groupList: [
-    {
-      value: 1,
-      name: '蔬菜',
-      children: [
-        {
-          value: 11,
-          name: '叶菜',
-          children: [
-            {
-              value: 111,
-              name: '皇帝菜'
-            },
-            {
-              value: 112,
-              name: '金不换'
-            }
-          ]
-        },
-        {
-          value: 12,
-          name: '甘蓝',
-          children: [
-            {
-              value: 121,
-              name: '甘蓝1'
-            },
-            {
-              value: 122,
-              name: '甘蓝2'
-            }
-          ]
-        }
-      ]
-    },
-    {
-      value: 2,
-      name: '冻品',
-      children: [
-        {
-          value: 21,
-          name: '冻猪肉',
-          children: [
-            {
-              value: 211,
-              name: '五花肉'
-            },
-            {
-              value: 212,
-              name: '猪脚'
-            }
-          ]
-        }
-      ]
-    }
-  ],
-  selectedValues: [],
-  setSelectedValues(values) {
-    this.selectedValues = values
-  }
-})
-
-storiesOf('Transfer', module)
-  .add('default', () => (
-    <Transfer
-      list={store.list}
-      selectedValues={store.selectedValues}
-      onSelect={values => store.setSelectedValues(values)}
-    />
-  ))
-  .add('disabled', () => (
-    <Transfer
-      disabled
-      list={store.list}
-      selectedValues={store.selectedValues}
-      onSelect={values => store.setSelectedValues(values)}
-    />
-  ))
-  .add('group', () => (
-    <TransferGroup
-      list={store.groupList}
-      selectedValues={store.selectedValues}
-      onSelect={values => store.setSelectedValues(values)}
-    />
-  ))
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import Transfer from './transfer'
+import TransferGroup from './transfer_group'
+import { observable } from 'mobx'
+
+const store = observable({
+  list: Array.from({ length: 40 }, (_, index) => ({
+    value: index,
+    name: `item ${index}`
+  })),
+  virtualList: Array.from({ length: 400 }, (_, index) => ({
+    value: index,
+    name: `item ${index}`
+  })),
+  groupList: [
+    {
+      value: 1,
+      name: '蔬菜',
+      children: [
+        {
+          value: 11,
+          name: '叶菜',
+          children: [
+            {
+              value: 111,
+              name: '皇帝菜'
+            },
+            {
+              value: 112,
+              name: '金不换'
+            }
+          ]
+        },
+        {
+          value: 12,
+          name: '甘蓝',
+          children: [
+            {
+              value: 121,
+              name: '甘蓝1'
+            },
+            {
+              value: 122,
+              name: '甘蓝2'
+            }
+          ]
+        }
+      ]
+    },
+    {
+      value: 2,
+      name: '冻品',
+      children: [
+        {
+          value: 21,
+          name: '冻猪肉',
+          children: [
+            {
+              value: 211,
+              name: '五花肉'
+            },
+            {
+              value: 212,
+              name: '猪脚'
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  selectedValues: [],
+  setSelectedValues(values) {
+    this.selectedValues = values
+  }
+})
+
+storiesOf('Transfer', module)
+  .add('default', () => (
+    <Transfer
+      list={store.list}
+      selectedValues={store.selectedValues}
+      onSelect={values => store.setSelectedValues(values)}
+    />
+  ))
+  .add('virtual', () => (
+    <Transfer
+      isVirtual
+      list={store.virtualList}
+      selectedValues={store.selectedValues}
+      onSelect={values => store.setSelectedValues(values)}
+    />
+  ))
+  .add('disabled', () => (
+    <Transfer
+      disabled
+      list={store.list}
+      selectedValues={store.selectedValues}
+      onSelect={values => store.setSelectedValues(values)}
+    />
+  ))
+  .add('group', () => (
+    <TransferGroup
+      list={store.groupList}
+      selectedValues={store.selectedValues}
+      onSelect={values => store.setSelectedValues(values)}
+    />
+  ))