@gm-pc/react 1.27.0 → 1.27.1-beta.0

package/src/component/table_select/table_select.tsx

@@ -1,92 +1,92 @@
-import React from 'react'
-import { MoreSelect, MoreSelectGroupDataItem } from '../more_select'
-import { Flex } from '../flex'
-import _ from 'lodash'
-import { getColumnKey } from './util'
-import classNames from 'classnames'
-import { TableSelectProps, TableSelectDataItem } from './types'
-
-/** todo 泛型 */
-/** 和 MoreSelect 类似。多了 columns */
-const TableSelect = React.forwardRef<MoreSelect, TableSelectProps<any>>((props, ref) => {
-  const { data, columns, className, ...rest } = props
-
-  const Title = (
-    <Flex alignCenter className='gm-table-select-list-head'>
-      {_.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>
-  )
-
-  let newData: MoreSelectGroupDataItem<any>[] = []
-  if (data.length !== 0) {
-    newData = [
-      {
-        label: Title,
-        children: data,
-      },
-    ]
-  }
-
-  const renderListItem = (item: TableSelectDataItem<any>, index: number) => {
-    return (
-      <Flex key={item.value} alignCenter className='gm-table-select-list-item'>
-        {_.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'
-    />
-  )
-})
-
-export default TableSelect
+import React from 'react'
+import { MoreSelect, MoreSelectGroupDataItem } from '../more_select'
+import { Flex } from '../flex'
+import _ from 'lodash'
+import { getColumnKey } from './util'
+import classNames from 'classnames'
+import { TableSelectProps, TableSelectDataItem } from './types'
+
+/** todo 泛型 */
+/** 和 MoreSelect 类似。多了 columns */
+const TableSelect = React.forwardRef<MoreSelect, TableSelectProps<any>>((props, ref) => {
+  const { data, columns, className, ...rest } = props
+
+  const Title = (
+    <Flex alignCenter className='gm-table-select-list-head'>
+      {_.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>
+  )
+
+  let newData: MoreSelectGroupDataItem<any>[] = []
+  if (data.length !== 0) {
+    newData = [
+      {
+        label: Title,
+        children: data,
+      },
+    ]
+  }
+
+  const renderListItem = (item: TableSelectDataItem<any>, index: number) => {
+    return (
+      <Flex key={item.value} alignCenter className='gm-table-select-list-item'>
+        {_.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'
+    />
+  )
+})
+
+export default TableSelect

package/src/component/table_select/types.ts

@@ -1,30 +1,30 @@
-import { ReactNode } from 'react'
-import { MoreSelectProps } from '../more_select'
-
-interface TableSelectDataItem<V> {
-  value: V
-  text: string
-  [key: string]: any
-}
-
-interface TableSelectColumnCellProps<V> {
-  original: TableSelectDataItem<V>
-  index: number
-}
-
-interface TableSelectColumn<V> {
-  id?: string
-  accessor?: string | ((data: TableSelectDataItem<V>) => ReactNode)
-  width: number
-  Header: ReactNode
-  Cell?: (cellProps: TableSelectColumnCellProps<V>) => ReactNode
-}
-
-interface TableSelectProps<V> extends MoreSelectProps<V> {
-  data: TableSelectDataItem<V>[]
-  selected: TableSelectDataItem<V>
-  onSelect(selected: TableSelectDataItem<V>): void
-  columns: TableSelectColumn<V>[]
-}
-
-export type { TableSelectProps, TableSelectColumn, TableSelectDataItem }
+import { ReactNode } from 'react'
+import { MoreSelectProps } from '../more_select'
+
+interface TableSelectDataItem<V> {
+  value: V
+  text: string
+  [key: string]: any
+}
+
+interface TableSelectColumnCellProps<V> {
+  original: TableSelectDataItem<V>
+  index: number
+}
+
+interface TableSelectColumn<V> {
+  id?: string
+  accessor?: string | ((data: TableSelectDataItem<V>) => ReactNode)
+  width: number
+  Header: ReactNode
+  Cell?: (cellProps: TableSelectColumnCellProps<V>) => ReactNode
+}
+
+interface TableSelectProps<V> extends MoreSelectProps<V> {
+  data: TableSelectDataItem<V>[]
+  selected: TableSelectDataItem<V>
+  onSelect(selected: TableSelectDataItem<V>): void
+  columns: TableSelectColumn<V>[]
+}
+
+export type { TableSelectProps, TableSelectColumn, TableSelectDataItem }

package/src/component/table_select/util.ts

@@ -1,15 +1,15 @@
-import _ from 'lodash'
-import { TableSelectColumn } from './types'
-
-function getColumnKey<V>(column: TableSelectColumn<V>): string | null {
-  if (_.isString(column.accessor)) {
-    return column.accessor
-  } else if (_.isFunction(column.accessor) && column.id) {
-    return column.id
-  } else if (column.id) {
-    return column.id
-  }
-  return null
-}
-
-export { getColumnKey }
+import _ from 'lodash'
+import { TableSelectColumn } from './types'
+
+function getColumnKey<V>(column: TableSelectColumn<V>): string | null {
+  if (_.isString(column.accessor)) {
+    return column.accessor
+  } else if (_.isFunction(column.accessor) && column.id) {
+    return column.id
+  } else if (column.id) {
+    return column.id
+  }
+  return null
+}
+
+export { getColumnKey }

package/src/component/tabs/index.ts

@@ -1,2 +1,2 @@
-export { default as Tabs } from './tabs'
-export type { TabsProps, TabsItem } from './tabs'
+export { default as Tabs } from './tabs'
+export type { TabsProps, TabsItem } from './tabs'

package/src/component/tabs/stories.tsx

@@ -1,172 +1,172 @@
-import React, { useEffect } from 'react'
-import Tabs from './tabs'
-import { TabsProps } from '.'
-import { observable } from 'mobx'
-
-const A = ({ value }: { value: string }) => {
-  useEffect(() => {
-    console.log(value)
-  }, [value])
-  return <div>{value}</div>
-}
-
-const tabs = [
-  {
-    text: 'Tab1',
-    value: '1',
-    children: <A value='Tab1' />,
-  },
-  {
-    text: 'Tab2',
-    value: '2',
-    children: <A value='Tab2' />,
-  },
-  {
-    text: 'Tab3',
-    value: '3',
-    children: <A value='Tab3' />,
-  },
-  {
-    text: 'Tab4',
-    value: '4',
-    children: <A value='Tab4' />,
-  },
-  {
-    text: '长度比较长的tabs文本',
-    value: '5',
-    children: <A value='Tab5' />,
-  },
-]
-
-const store = observable({
-  tabs: [...tabs],
-  active: '1',
-  setActive(index: string) {
-    this.active = index
-  },
-
-  handleClose(value: string) {
-    const index = this.tabs.findIndex((f) => f.value === value)
-    this.tabs.splice(index, 1)
-    if (store.active === value) {
-      store.setActive(index === 0 ? this.tabs[index].value : this.tabs[index - 1].value)
-    }
-  },
-  handleCloseDiv(value: string) {
-    const index = this.tabs.findIndex((f) => f.value === value)
-    this.tabs.splice(index, 1)
-    if (store.active === value) {
-      store.setActive(index === 0 ? this.tabs[index].value : this.tabs[index - 1].value)
-    }
-  },
-  handleAdd() {
-    store.tabs.push({
-      text: '长度比较长的tabs文本',
-      value: '' + store.tabs.length + 1,
-      children: <A value='Tab5' />,
-    })
-  },
-})
-
-export const ComTabs = () => (
-  <Tabs
-    tabs={tabs}
-    active={store.active}
-    onChange={(active) => store.setActive(active)}
-  />
-)
-export const ActiveOnceTabs = () => (
-  <>
-    <div>tab active后再次点击不会重新didMount</div>
-    <Tabs
-      tabs={tabs}
-      activeOnce
-      active={store.active}
-      onChange={(active) => store.setActive(active)}
-    />
-  </>
-)
-
-export const FullTabs = () => (
-  <Tabs
-    full
-    tabs={tabs}
-    activeOnce
-    active={store.active}
-    onChange={(active) => store.setActive(active)}
-  />
-)
-export const LightTabs = () => (
-  <Tabs
-    tabs={tabs}
-    light
-    active={store.active}
-    onChange={(active) => store.setActive(active)}
-  />
-)
-
-export const closeTabs = () => (
-  <>
-    <div>支持关闭弹出Popver</div>
-    <Tabs
-      tabs={store.tabs.slice()}
-      light
-      active={store.active}
-      isPopover
-      popverTitle='这是标题'
-      popoverContent='这是内容XXX'
-      type='editable-card'
-      onChange={(active) => store.setActive(active)}
-      onClose={(value) => store.handleClose(value)}
-    />
-  </>
-)
-const popup: TabsProps<string>['popup'] = (value, closeFn) => (
-  <div>
-    asdasd &nbsp;
-    <button onClick={closeFn}>取消</button>
-    <button
-      onClick={() => {
-        store.handleCloseDiv(value)
-        closeFn()
-      }}
-    >
-      删除
-    </button>
-  </div>
-)
-export const diyPoupCloseTabs = () => (
-  <>
-    <div>自定义弹出poup＋关闭tabs</div>
-    <Tabs
-      tabs={store.tabs.slice()}
-      active={store.active}
-      isPopover
-      popverTitle='这是标题'
-      popoverContent='这是内容XXX'
-      type='editable-card'
-      popup={popup}
-      onChange={(active) => store.setActive(active)}
-      onClose={(value) => store.handleClose(value)}
-    />
-  </>
-)
-export const addTabs = () => (
-  <>
-    <div>增加添加规格</div>
-    <Tabs
-      tabs={store.tabs.slice()}
-      active={store.active}
-      isPopover
-      popverTitle='这是标题'
-      popoverContent='这是内容XXX'
-      type='editable-card'
-      onChange={(active) => store.setActive(active)}
-      onClose={(value) => store.handleClose(value)}
-      extraAction={<button onClick={store.handleAdd}>添加规格</button>}
-    />
-  </>
-)
-export default {
-  title: '布局/Tabs',
-}
+import React, { useEffect } from 'react'
+import Tabs from './tabs'
+import { TabsProps } from '.'
+import { observable } from 'mobx'
+
+const A = ({ value }: { value: string }) => {
+  useEffect(() => {
+    console.log(value)
+  }, [value])
+  return <div>{value}</div>
+}
+
+const tabs = [
+  {
+    text: 'Tab1',
+    value: '1',
+    children: <A value='Tab1' />,
+  },
+  {
+    text: 'Tab2',
+    value: '2',
+    children: <A value='Tab2' />,
+  },
+  {
+    text: 'Tab3',
+    value: '3',
+    children: <A value='Tab3' />,
+  },
+  {
+    text: 'Tab4',
+    value: '4',
+    children: <A value='Tab4' />,
+  },
+  {
+    text: '长度比较长的tabs文本',
+    value: '5',
+    children: <A value='Tab5' />,
+  },
+]
+
+const store = observable({
+  tabs: [...tabs],
+  active: '1',
+  setActive(index: string) {
+    this.active = index
+  },
+
+  handleClose(value: string) {
+    const index = this.tabs.findIndex((f) => f.value === value)
+    this.tabs.splice(index, 1)
+    if (store.active === value) {
+      store.setActive(index === 0 ? this.tabs[index].value : this.tabs[index - 1].value)
+    }
+  },
+  handleCloseDiv(value: string) {
+    const index = this.tabs.findIndex((f) => f.value === value)
+    this.tabs.splice(index, 1)
+    if (store.active === value) {
+      store.setActive(index === 0 ? this.tabs[index].value : this.tabs[index - 1].value)
+    }
+  },
+  handleAdd() {
+    store.tabs.push({
+      text: '长度比较长的tabs文本',
+      value: '' + store.tabs.length + 1,
+      children: <A value='Tab5' />,
+    })
+  },
+})
+
+export const ComTabs = () => (
+  <Tabs
+    tabs={tabs}
+    active={store.active}
+    onChange={(active) => store.setActive(active)}
+  />
+)
+export const ActiveOnceTabs = () => (
+  <>
+    <div>tab active后再次点击不会重新didMount</div>
+    <Tabs
+      tabs={tabs}
+      activeOnce
+      active={store.active}
+      onChange={(active) => store.setActive(active)}
+    />
+  </>
+)
+
+export const FullTabs = () => (
+  <Tabs
+    full
+    tabs={tabs}
+    activeOnce
+    active={store.active}
+    onChange={(active) => store.setActive(active)}
+  />
+)
+export const LightTabs = () => (
+  <Tabs
+    tabs={tabs}
+    light
+    active={store.active}
+    onChange={(active) => store.setActive(active)}
+  />
+)
+
+export const closeTabs = () => (
+  <>
+    <div>支持关闭弹出Popver</div>
+    <Tabs
+      tabs={store.tabs.slice()}
+      light
+      active={store.active}
+      isPopover
+      popverTitle='这是标题'
+      popoverContent='这是内容XXX'
+      type='editable-card'
+      onChange={(active) => store.setActive(active)}
+      onClose={(value) => store.handleClose(value)}
+    />
+  </>
+)
+const popup: TabsProps<string>['popup'] = (value, closeFn) => (
+  <div>
+    asdasd &nbsp;
+    <button onClick={closeFn}>取消</button>
+    <button
+      onClick={() => {
+        store.handleCloseDiv(value)
+        closeFn()
+      }}
+    >
+      删除
+    </button>
+  </div>
+)
+export const diyPoupCloseTabs = () => (
+  <>
+    <div>自定义弹出poup＋关闭tabs</div>
+    <Tabs
+      tabs={store.tabs.slice()}
+      active={store.active}
+      isPopover
+      popverTitle='这是标题'
+      popoverContent='这是内容XXX'
+      type='editable-card'
+      popup={popup}
+      onChange={(active) => store.setActive(active)}
+      onClose={(value) => store.handleClose(value)}
+    />
+  </>
+)
+export const addTabs = () => (
+  <>
+    <div>增加添加规格</div>
+    <Tabs
+      tabs={store.tabs.slice()}
+      active={store.active}
+      isPopover
+      popverTitle='这是标题'
+      popoverContent='这是内容XXX'
+      type='editable-card'
+      onChange={(active) => store.setActive(active)}
+      onClose={(value) => store.handleClose(value)}
+      extraAction={<button onClick={store.handleAdd}>添加规格</button>}
+    />
+  </>
+)
+export default {
+  title: '布局/Tabs',
+}