@gmfe/react 2.14.17 → 2.14.19-beta.0

package/src/component/table_select/index.js

@@ -1,152 +1,152 @@
-import React, { useEffect } from 'react'
-import PropTypes from 'prop-types'
-import MoreSelect from '../more_select'
-import Flex from '../flex'
-import _ from 'lodash'
-import { getColumnKey } from './util'
-import classNames from 'classnames'
-import { devWarn } from '@gm-common/tool'
-
-/** 和 MoreSelect 类似。多了 columns，和不能多选 */
-const TableSelect = React.forwardRef((props, ref) => {
-  const { data, columns, className, ...rest } = props
-
-  devWarn(() => {
-    useEffect(() => {
-      _.each(columns, column => {
-        if (!column.width) {
-          console.warn('column need width', column)
-        }
-      })
-    }, [])
-  })
-
-  const Title = (
-    <Flex
-      alignCenter
-      justifyCenter
-      style={{
-        minHeight: '40px'
-      }}
-    >
-      {_.map(columns, (column, i) => (
-        <div
-          key={`${i}_${getColumnKey(column)}`}
-          className={classNames('gm-flex-flex', {
-            'gm-flex-none': column.width
-          })}
-          style={{
-            width: `${column.width}px`
-          }}
-        >
-          {column.Header}
-        </div>
-      ))}
-    </Flex>
-  )
-
-  const newData =
-    data.length !== 0
-      ? [
-          {
-            label: Title,
-            children: data
-          }
-        ]
-      : []
-
-  const renderListItem = (item, index) => {
-    return (
-      <Flex
-        key={item.value}
-        alignCenter
-        justifyCenter
-        style={{
-          minHeight: '40px',
-          position: 'relative'
-        }}
-      >
-        {_.map(columns, (column, i) => {
-          let content = null
-          if (column.Cell) {
-            content = column.Cell({
-              original: item,
-              index
-            })
-          } else if (_.isFunction(column.accessor)) {
-            content = column.accessor(item)
-          } else if (_.isString(column.accessor)) {
-            content = _.get(item, column.accessor)
-          }
-
-          if (content === null || content === undefined) {
-            content = <div className='gm-text-desc'>-</div>
-          }
-          return (
-            <div
-              key={`${i}_${getColumnKey(column)}`}
-              className={classNames('gm-flex-flex', {
-                'gm-flex-none': column.width
-              })}
-              style={{
-                width: `${column.width}px`
-              }}
-            >
-              {content}
-            </div>
-          )
-        })}
-      </Flex>
-    )
-  }
-
-  return (
-    <MoreSelect
-      ref={ref}
-      {...rest}
-      isGroupList
-      data={newData}
-      renderListItem={renderListItem}
-      className={classNames('gm-table-select', className)}
-      popupClassName='gm-table-select-popup'
-    />
-  )
-})
-
-TableSelect.propTypes = {
-  /** 全部展示，没有过滤 */
-  data: PropTypes.array.isRequired,
-  selected: PropTypes.any,
-  onSelect: PropTypes.func.isRequired,
-  /** 类似 ReactTable  [{Header, accessor, Cell, width}] */
-  columns: PropTypes.array.isRequired,
-
-  // 状态
-  disabled: PropTypes.bool,
-
-  // 列表 搜索
-  onSearch: PropTypes.func, // searchValue, data
-  delay: PropTypes.number,
-  searchPlaceholder: PropTypes.string,
-  renderListFilter: PropTypes.func, // 过滤，提供 searchValue 和 data
-  renderListFilterType: PropTypes.oneOf(['default', 'pinyin']), // 也可简单指定 默认的过滤类型
-
-  // 展示
-  placeholder: PropTypes.string,
-  renderSelected: PropTypes.func, // 定制已选的区域，提供 selected
-
-  // 样式
-  listHeight: PropTypes.string,
-
-  popoverType: PropTypes.oneOf(['focus', 'realFocus']),
-
-  className: PropTypes.string,
-  style: PropTypes.object,
-  popupClassName: PropTypes.string,
-
-  /** 目前为了 keyboard */
-  isKeyboard: PropTypes.bool,
-  onKeyDown: PropTypes.func
-}
-
-export default TableSelect
+import React, { useEffect } from 'react'
+import PropTypes from 'prop-types'
+import MoreSelect from '../more_select'
+import Flex from '../flex'
+import _ from 'lodash'
+import { getColumnKey } from './util'
+import classNames from 'classnames'
+import { devWarn } from '@gm-common/tool'
+
+/** 和 MoreSelect 类似。多了 columns，和不能多选 */
+const TableSelect = React.forwardRef((props, ref) => {
+  const { data, columns, className, ...rest } = props
+
+  devWarn(() => {
+    useEffect(() => {
+      _.each(columns, column => {
+        if (!column.width) {
+          console.warn('column need width', column)
+        }
+      })
+    }, [])
+  })
+
+  const Title = (
+    <Flex
+      alignCenter
+      justifyCenter
+      style={{
+        minHeight: '40px'
+      }}
+    >
+      {_.map(columns, (column, i) => (
+        <div
+          key={`${i}_${getColumnKey(column)}`}
+          className={classNames('gm-flex-flex', {
+            'gm-flex-none': column.width
+          })}
+          style={{
+            width: `${column.width}px`
+          }}
+        >
+          {column.Header}
+        </div>
+      ))}
+    </Flex>
+  )
+
+  const newData =
+    data.length !== 0
+      ? [
+          {
+            label: Title,
+            children: data
+          }
+        ]
+      : []
+
+  const renderListItem = (item, index) => {
+    return (
+      <Flex
+        key={item.value}
+        alignCenter
+        justifyCenter
+        style={{
+          minHeight: '40px',
+          position: 'relative'
+        }}
+      >
+        {_.map(columns, (column, i) => {
+          let content = null
+          if (column.Cell) {
+            content = column.Cell({
+              original: item,
+              index
+            })
+          } else if (_.isFunction(column.accessor)) {
+            content = column.accessor(item)
+          } else if (_.isString(column.accessor)) {
+            content = _.get(item, column.accessor)
+          }
+
+          if (content === null || content === undefined) {
+            content = <div className='gm-text-desc'>-</div>
+          }
+          return (
+            <div
+              key={`${i}_${getColumnKey(column)}`}
+              className={classNames('gm-flex-flex', {
+                'gm-flex-none': column.width
+              })}
+              style={{
+                width: `${column.width}px`
+              }}
+            >
+              {content}
+            </div>
+          )
+        })}
+      </Flex>
+    )
+  }
+
+  return (
+    <MoreSelect
+      ref={ref}
+      {...rest}
+      isGroupList
+      data={newData}
+      renderListItem={renderListItem}
+      className={classNames('gm-table-select', className)}
+      popupClassName='gm-table-select-popup'
+    />
+  )
+})
+
+TableSelect.propTypes = {
+  /** 全部展示，没有过滤 */
+  data: PropTypes.array.isRequired,
+  selected: PropTypes.any,
+  onSelect: PropTypes.func.isRequired,
+  /** 类似 ReactTable  [{Header, accessor, Cell, width}] */
+  columns: PropTypes.array.isRequired,
+
+  // 状态
+  disabled: PropTypes.bool,
+
+  // 列表 搜索
+  onSearch: PropTypes.func, // searchValue, data
+  delay: PropTypes.number,
+  searchPlaceholder: PropTypes.string,
+  renderListFilter: PropTypes.func, // 过滤，提供 searchValue 和 data
+  renderListFilterType: PropTypes.oneOf(['default', 'pinyin']), // 也可简单指定 默认的过滤类型
+
+  // 展示
+  placeholder: PropTypes.string,
+  renderSelected: PropTypes.func, // 定制已选的区域，提供 selected
+
+  // 样式
+  listHeight: PropTypes.string,
+
+  popoverType: PropTypes.oneOf(['focus', 'realFocus']),
+
+  className: PropTypes.string,
+  style: PropTypes.object,
+  popupClassName: PropTypes.string,
+
+  /** 目前为了 keyboard */
+  isKeyboard: PropTypes.bool,
+  onKeyDown: PropTypes.func
+}
+
+export default TableSelect

package/src/component/table_select/style.less

@@ -1,12 +1,12 @@
-.gm-table-select-popup {
-  .gm-list.gm-list-group {
-    .gm-list-label {
-      background: @gm-table-bg-accent;
-      color: @gm-color-first;
-    }
-
-    .gm-list-item {
-      padding: 8px 10px 5px 10px;
-    }
-  }
-}
+.gm-table-select-popup {
+  .gm-list.gm-list-group {
+    .gm-list-label {
+      background: @gm-table-bg-accent;
+      color: @gm-color-first;
+    }
+
+    .gm-list-item {
+      padding: 8px 10px 5px 10px;
+    }
+  }
+}

package/src/component/table_select/table_select.stories.js

@@ -1,91 +1,91 @@
-import React from 'react'
-import { storiesOf } from '@storybook/react'
-import TableSelect from './index'
-import { observable } from 'mobx'
-import _ from 'lodash'
-
-const data = [
-  {
-    purchase_price_limit: null,
-    std_unit_name: '斤',
-    sale_ratio: 3,
-    category_id_1: 'A3978',
-    settle_supplier_name: '水果供应商',
-    spu_id: 'C874502',
-    sku_id: 'D13944575',
-    sale_unit_name: '包',
-    category_id_2: 'B19074',
-    category_id_2_name: '甘蓝类',
-    settle_supplier_id: 'T13251',
-    sku_name: '大白菜',
-    station_id: 'T7936',
-    category_id_1_name: '蔬菜',
-    max_stock_unit_price: null
-  },
-  {
-    purchase_price_limit: null,
-    std_unit_name: '斤',
-    sale_ratio: 1,
-    category_id_1: 'A3978',
-    settle_supplier_name: '水果供应商',
-    spu_id: 'C874502',
-    sku_id: 'D3628124',
-    sale_unit_name: '斤',
-    category_id_2: 'B19074',
-    category_id_2_name: '甘蓝类',
-    settle_supplier_id: 'T13251',
-    sku_name: '小白菜',
-    station_id: 'T7936',
-    category_id_1_name: '蔬菜',
-    max_stock_unit_price: null
-  }
-]
-
-const columns = [
-  {
-    Header: 'id',
-    accessor: 'original.sku_id',
-    width: 100
-  },
-  {
-    Header: '名字',
-    accessor: 'original.sku_name',
-    width: 100
-  },
-  {
-    Header: '供应商',
-    accessor: 'original.settle_supplier_name',
-    width: 100
-  },
-  {
-    Header: '加粗',
-    accessor: 'original.sku_name',
-    width: 100,
-    Cell: cellProps => {
-      console.log(cellProps)
-      return <strong>{cellProps.original.original.sku_name}</strong>
-    }
-  }
-]
-
-const mapData = _.map(data, v => ({
-  value: v.sku_id,
-  text: v.sku_name,
-  original: v
-}))
-
-const store = observable({
-  selected: mapData[0],
-  setSelect(selected) {
-    this.selected = selected
-  }
-})
-
-storiesOf('TableSelect', module).add('default', () => (
-  <TableSelect
-    data={mapData}
-    columns={columns}
-    selected={store.selected}
-    onSelect={selected => store.setSelect(selected)}
-  />
-))
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import TableSelect from './index'
+import { observable } from 'mobx'
+import _ from 'lodash'
+
+const data = [
+  {
+    purchase_price_limit: null,
+    std_unit_name: '斤',
+    sale_ratio: 3,
+    category_id_1: 'A3978',
+    settle_supplier_name: '水果供应商',
+    spu_id: 'C874502',
+    sku_id: 'D13944575',
+    sale_unit_name: '包',
+    category_id_2: 'B19074',
+    category_id_2_name: '甘蓝类',
+    settle_supplier_id: 'T13251',
+    sku_name: '大白菜',
+    station_id: 'T7936',
+    category_id_1_name: '蔬菜',
+    max_stock_unit_price: null
+  },
+  {
+    purchase_price_limit: null,
+    std_unit_name: '斤',
+    sale_ratio: 1,
+    category_id_1: 'A3978',
+    settle_supplier_name: '水果供应商',
+    spu_id: 'C874502',
+    sku_id: 'D3628124',
+    sale_unit_name: '斤',
+    category_id_2: 'B19074',
+    category_id_2_name: '甘蓝类',
+    settle_supplier_id: 'T13251',
+    sku_name: '小白菜',
+    station_id: 'T7936',
+    category_id_1_name: '蔬菜',
+    max_stock_unit_price: null
+  }
+]
+
+const columns = [
+  {
+    Header: 'id',
+    accessor: 'original.sku_id',
+    width: 100
+  },
+  {
+    Header: '名字',
+    accessor: 'original.sku_name',
+    width: 100
+  },
+  {
+    Header: '供应商',
+    accessor: 'original.settle_supplier_name',
+    width: 100
+  },
+  {
+    Header: '加粗',
+    accessor: 'original.sku_name',
+    width: 100,
+    Cell: cellProps => {
+      console.log(cellProps)
+      return <strong>{cellProps.original.original.sku_name}</strong>
+    }
+  }
+]
+
+const mapData = _.map(data, v => ({
+  value: v.sku_id,
+  text: v.sku_name,
+  original: v
+}))
+
+const store = observable({
+  selected: mapData[0],
+  setSelect(selected) {
+    this.selected = selected
+  }
+})
+
+storiesOf('TableSelect', module).add('default', () => (
+  <TableSelect
+    data={mapData}
+    columns={columns}
+    selected={store.selected}
+    onSelect={selected => store.setSelect(selected)}
+  />
+))

package/src/component/table_select/util.js

@@ -1,21 +1,21 @@
-import _ from 'lodash'
-
-function getColumnKey(column) {
-  // 如果是字符串就取 accessor
-  if (_.isString(column.accessor)) {
-    return column.accessor
-  }
-  // 如果 accessor 是函数，则一定会提供 id，否则 react-table 会报错
-  else if (_.isFunction(column.accessor) && column.id) {
-    return column.id
-  }
-  // 额外的情况，有些时候只有id，比如 diy 存储就只存了 id，因为 函数没法存储
-  else if (column.id) {
-    return column.id
-  }
-
-  // 其他情况没法获得 key
-  return null
-}
-
-export { getColumnKey }
+import _ from 'lodash'
+
+function getColumnKey(column) {
+  // 如果是字符串就取 accessor
+  if (_.isString(column.accessor)) {
+    return column.accessor
+  }
+  // 如果 accessor 是函数，则一定会提供 id，否则 react-table 会报错
+  else if (_.isFunction(column.accessor) && column.id) {
+    return column.id
+  }
+  // 额外的情况，有些时候只有id，比如 diy 存储就只存了 id，因为 函数没法存储
+  else if (column.id) {
+    return column.id
+  }
+
+  // 其他情况没法获得 key
+  return null
+}
+
+export { getColumnKey }

package/src/component/tabs/style.less

@@ -1,33 +1,33 @@
-.gm-tabs-container {
-  overflow-x: auto;
-
-  .gm-tabs {
-    white-space: nowrap;
-    border-bottom: 1px solid fadeout(@gm-frame-border-color, 50%);
-    height: 40px;
-
-    .gm-tab {
-      display: inline-block;
-      border-radius: 4px 4px 0 0;
-      height: 40px;
-      font-size: 14px;
-      color: @gm-color-fourth;
-      border: 1px solid fadeout(@gm-frame-border-color, 50%);
-      margin-right: 1px;
-      background-color: #e8eaf0;
-      cursor: pointer;
-      padding: 8px 12px;
-      transition: background-color 0.4s;
-
-      &:hover {
-        color: @gm-color-first;
-      }
-
-      &.active {
-        color: @gm-color-first;
-        background-color: #fff;
-        border-bottom: 1px solid transparent;
-      }
-    }
-  }
-}
+.gm-tabs-container {
+  overflow-x: auto;
+
+  .gm-tabs {
+    white-space: nowrap;
+    border-bottom: 1px solid fadeout(@gm-frame-border-color, 50%);
+    height: 40px;
+
+    .gm-tab {
+      display: inline-block;
+      border-radius: 4px 4px 0 0;
+      height: 40px;
+      font-size: 14px;
+      color: @gm-color-fourth;
+      border: 1px solid fadeout(@gm-frame-border-color, 50%);
+      margin-right: 1px;
+      background-color: #e8eaf0;
+      cursor: pointer;
+      padding: 8px 12px;
+      transition: background-color 0.4s;
+
+      &:hover {
+        color: @gm-color-first;
+      }
+
+      &.active {
+        color: @gm-color-first;
+        background-color: #fff;
+        border-bottom: 1px solid transparent;
+      }
+    }
+  }
+}