@gm-pc/react 1.24.9-beta.5 → 1.24.9-beta.9

package/src/component/tooltip/tooltip.tsx

@@ -1,40 +1,40 @@
-import React, { forwardRef, HTMLAttributes, ReactNode } from 'react'
-import classNames from 'classnames'
-import { Popover } from '../popover'
-import SVGQuestionCircle from '../../svg/question-circle-o.svg'
-
-interface TooltipProps extends HTMLAttributes<HTMLSpanElement> {
-  popup: ReactNode
-  right?: boolean
-  top?: boolean
-  center?: boolean
-  offset?: number
-  showArrow?: boolean
-}
-
-const Tooltip = forwardRef<Popover, TooltipProps>(
-  (
-    { popup, children, right, top, center, offset, showArrow, className, ...rest },
-    ref
-  ) => (
-    <Popover
-      popup={popup}
-      ref={ref}
-      top={top}
-      type='hover'
-      right={right}
-      offset={offset}
-      center={center}
-      showArrow={showArrow}
-    >
-      {children ?? (
-        <span {...rest} className={classNames('gm-text-desc', className)}>
-          <SVGQuestionCircle />
-        </span>
-      )}
-    </Popover>
-  )
-)
-
-export default Tooltip
-export type { TooltipProps }
+import React, { forwardRef, HTMLAttributes, ReactNode } from 'react'
+import classNames from 'classnames'
+import { Popover } from '../popover'
+import SVGQuestionCircle from '../../svg/question-circle-o.svg'
+
+interface TooltipProps extends HTMLAttributes<HTMLSpanElement> {
+  popup: ReactNode
+  right?: boolean
+  top?: boolean
+  center?: boolean
+  offset?: number
+  showArrow?: boolean
+}
+
+const Tooltip = forwardRef<Popover, TooltipProps>(
+  (
+    { popup, children, right, top, center, offset, showArrow, className, ...rest },
+    ref
+  ) => (
+    <Popover
+      popup={popup}
+      ref={ref}
+      top={top}
+      type='hover'
+      right={right}
+      offset={offset}
+      center={center}
+      showArrow={showArrow}
+    >
+      {children ?? (
+        <span {...rest} className={classNames('gm-text-desc', className)}>
+          <SVGQuestionCircle />
+        </span>
+      )}
+    </Popover>
+  )
+)
+
+export default Tooltip
+export type { TooltipProps }

package/src/component/transfer/index.ts

@@ -1,2 +1,2 @@
-export { default as Transfer } from './transfer'
-export type { TransferProps, TransferListItem } from './types'
+export { default as Transfer } from './transfer'
+export type { TransferProps, TransferListItem } from './types'

package/src/component/transfer/stories.tsx

@@ -1,140 +1,140 @@
-import React from 'react'
-import { observable, toJS } from 'mobx'
-import Transfer from './transfer'
-
-const store = observable({
-  treeData: [
-    {
-      value: 'A33792',
-      children: [
-        {
-          value: 'B119099',
-          children: [
-            { value: 'C4125709', text: '腿肉（冷鲜）' },
-            { value: 'C4125717', text: '肉片（冷鲜）' },
-            { value: 'C4125676', text: '带皮五花肉（冷鲜）' },
-            { value: 'C4125698', text: '去皮五花肉（冷鲜）' },
-            { value: 'C4125706', text: '瘦肉（冷鲜）' },
-          ],
-          text: '冷鲜肉',
-        },
-      ],
-      text: '冷鲜肉类',
-    },
-    {
-      value: 'A6982',
-      children: [
-        {
-          value: 'B34032',
-          children: [
-            { value: 'C1292441', text: '中排骨' },
-            { value: 'C3125818', text: '保鲜筒子骨' },
-            { value: 'C1292444', text: '排骨 不砍' },
-            { value: 'C1292448', text: '棒骨（带肉）' },
-            { value: 'C1292443', text: '仔排' },
-            { value: 'C1292449', text: '棒骨（不带扇骨）' },
-            { value: 'C1292451', text: '肉脊骨（20%肉）' },
-            { value: 'C1292445', text: '排骨 砍块' },
-            { value: 'C1292455', text: '猪脆骨 ' },
-            { value: 'C1292456', text: '猪腔骨 ' },
-            { value: 'C1292454', text: '猪肋骨（二级）' },
-            { value: 'C1292453', text: '猪头骨(7斤/只）' },
-            { value: 'C1292446', text: '猪前排（去颈/1.25kg/块）' },
-            { value: 'C1292447', text: '棒骨  （砍断）' },
-            { value: 'C1292442', text: '排骨块（老排/约3-5厘米）' },
-            { value: 'C1292452', text: '扇骨（剁块）' },
-            { value: 'C1292450', text: '前腿骨头（带肉）' },
-          ],
-          text: '猪排骨类',
-        },
-        {
-          value: 'B34021',
-          children: [
-            { value: 'C1292514', text: '土鸡  （鲜 2斤/只 去内脏）' },
-            { value: 'C1354435', text: '老鸡' },
-            { value: 'C1634180', text: '黄油鸡' },
-            { value: 'C1292516', text: '叫鸡  （鲜 3斤/只 去内脏）' },
-            { value: 'C1292509', text: '老母鸡（鲜 3斤/只 去内脏）' },
-            { value: 'C1634561', text: '活  乌鸡' },
-            { value: 'C1620471', text: '蛋鸡' },
-            { value: 'C1292518', text: '草鸡  （鲜 3斤/只 去内脏）' },
-            { value: 'C1292513', text: '黑脚鸡  （鲜 3斤/只去内脏）' },
-            { value: 'C1880029', text: '正宗土鸡' },
-            { value: 'C1292507', text: '乌鸡 （鲜 2斤/只 去内脏）' },
-            { value: 'C1292512', text: '矮脚鸡（鲜 2斤/只 去内脏）' },
-            { value: 'C1292515', text: '肉鸡  （鲜 3斤/只 去内脏）' },
-            { value: 'C1292511', text: '清远鸡 （鲜 2斤/只 去内脏）' },
-            { value: 'C1292510', text: '黑毛鸡 （鲜 2斤/只 去内脏）' },
-            { value: 'C1354096', text: '仔鸡' },
-            { value: 'C1292517', text: '老公鸡  （鲜 3斤/只 去内脏）' },
-            { value: 'C1292505', text: '三黄鸡 （鲜 2斤/只 去内脏）' },
-          ],
-          text: '整鸡类',
-        },
-      ],
-      text: '肉禽类',
-    },
-  ],
-  flatData: [
-    { value: 'C1292441', text: '中排骨' },
-    { value: 'C3125818', text: '保鲜筒子骨' },
-    { value: 'C1292444', text: '排骨 不砍' },
-    { value: 'C1292448', text: '棒骨（带肉）' },
-    { value: 'C1292443', text: '仔排' },
-    { value: 'C1292449', text: '棒骨（不带扇骨）' },
-    { value: 'C1292451', text: '肉脊骨（20%肉）' },
-    { value: 'C1292445', text: '排骨 砍块' },
-    { value: 'C1292455', text: '猪脆骨 ' },
-    { value: 'C1292456', text: '猪腔骨 ' },
-    { value: 'C1292454', text: '猪肋骨（二级）' },
-    { value: 'C1292453', text: '猪头骨(7斤/只）' },
-    { value: 'C1292446', text: '猪前排（去颈/1.25kg/块）' },
-    { value: 'C1292447', text: '棒骨  （砍断）' },
-    { value: 'C1292442', text: '排骨块（老排/约3-5厘米）' },
-    { value: 'C1292452', text: '扇骨（剁块）' },
-    { value: 'C1292450', text: '前腿骨头（带肉）' },
-  ],
-  selected: ['C1292452'],
-  onSelected(selected: string[]) {
-    this.selected = selected
-  },
-  parentInfo: [] as string[],
-  doShowParentInfo(select: string[]) {
-    this.parentInfo = select
-  },
-})
-
-export const ComTransfer = () => (
-  <Transfer
-    list={toJS(store.flatData)}
-    selectedValues={store.selected}
-    onSelectValues={(selected) => store.onSelected(selected)}
-    rightTree
-  />
-)
-
-export const ComTransferWithRightTree = () => (
-  <div style={{ display: 'flex' }}>
-    <div style={{ marginRight: '30px' }}>
-      <p>右边非树结构</p>
-      <Transfer
-        list={toJS(store.treeData)}
-        selectedValues={store.selected}
-        onSelectValues={(selected) => store.onSelected(selected)}
-      />
-    </div>
-    <div>
-      <p>右边树结构</p>
-      <Transfer
-        list={toJS(store.treeData)}
-        selectedValues={store.selected}
-        onSelectValues={(selected) => store.onSelected(selected)}
-        rightTree
-      />
-    </div>
-  </div>
-)
-
-export default {
-  title: '表单/Transfer',
-}
+import React from 'react'
+import { observable, toJS } from 'mobx'
+import Transfer from './transfer'
+
+const store = observable({
+  treeData: [
+    {
+      value: 'A33792',
+      children: [
+        {
+          value: 'B119099',
+          children: [
+            { value: 'C4125709', text: '腿肉（冷鲜）' },
+            { value: 'C4125717', text: '肉片（冷鲜）' },
+            { value: 'C4125676', text: '带皮五花肉（冷鲜）' },
+            { value: 'C4125698', text: '去皮五花肉（冷鲜）' },
+            { value: 'C4125706', text: '瘦肉（冷鲜）' },
+          ],
+          text: '冷鲜肉',
+        },
+      ],
+      text: '冷鲜肉类',
+    },
+    {
+      value: 'A6982',
+      children: [
+        {
+          value: 'B34032',
+          children: [
+            { value: 'C1292441', text: '中排骨' },
+            { value: 'C3125818', text: '保鲜筒子骨' },
+            { value: 'C1292444', text: '排骨 不砍' },
+            { value: 'C1292448', text: '棒骨（带肉）' },
+            { value: 'C1292443', text: '仔排' },
+            { value: 'C1292449', text: '棒骨（不带扇骨）' },
+            { value: 'C1292451', text: '肉脊骨（20%肉）' },
+            { value: 'C1292445', text: '排骨 砍块' },
+            { value: 'C1292455', text: '猪脆骨 ' },
+            { value: 'C1292456', text: '猪腔骨 ' },
+            { value: 'C1292454', text: '猪肋骨（二级）' },
+            { value: 'C1292453', text: '猪头骨(7斤/只）' },
+            { value: 'C1292446', text: '猪前排（去颈/1.25kg/块）' },
+            { value: 'C1292447', text: '棒骨  （砍断）' },
+            { value: 'C1292442', text: '排骨块（老排/约3-5厘米）' },
+            { value: 'C1292452', text: '扇骨（剁块）' },
+            { value: 'C1292450', text: '前腿骨头（带肉）' },
+          ],
+          text: '猪排骨类',
+        },
+        {
+          value: 'B34021',
+          children: [
+            { value: 'C1292514', text: '土鸡  （鲜 2斤/只 去内脏）' },
+            { value: 'C1354435', text: '老鸡' },
+            { value: 'C1634180', text: '黄油鸡' },
+            { value: 'C1292516', text: '叫鸡  （鲜 3斤/只 去内脏）' },
+            { value: 'C1292509', text: '老母鸡（鲜 3斤/只 去内脏）' },
+            { value: 'C1634561', text: '活  乌鸡' },
+            { value: 'C1620471', text: '蛋鸡' },
+            { value: 'C1292518', text: '草鸡  （鲜 3斤/只 去内脏）' },
+            { value: 'C1292513', text: '黑脚鸡  （鲜 3斤/只去内脏）' },
+            { value: 'C1880029', text: '正宗土鸡' },
+            { value: 'C1292507', text: '乌鸡 （鲜 2斤/只 去内脏）' },
+            { value: 'C1292512', text: '矮脚鸡（鲜 2斤/只 去内脏）' },
+            { value: 'C1292515', text: '肉鸡  （鲜 3斤/只 去内脏）' },
+            { value: 'C1292511', text: '清远鸡 （鲜 2斤/只 去内脏）' },
+            { value: 'C1292510', text: '黑毛鸡 （鲜 2斤/只 去内脏）' },
+            { value: 'C1354096', text: '仔鸡' },
+            { value: 'C1292517', text: '老公鸡  （鲜 3斤/只 去内脏）' },
+            { value: 'C1292505', text: '三黄鸡 （鲜 2斤/只 去内脏）' },
+          ],
+          text: '整鸡类',
+        },
+      ],
+      text: '肉禽类',
+    },
+  ],
+  flatData: [
+    { value: 'C1292441', text: '中排骨' },
+    { value: 'C3125818', text: '保鲜筒子骨' },
+    { value: 'C1292444', text: '排骨 不砍' },
+    { value: 'C1292448', text: '棒骨（带肉）' },
+    { value: 'C1292443', text: '仔排' },
+    { value: 'C1292449', text: '棒骨（不带扇骨）' },
+    { value: 'C1292451', text: '肉脊骨（20%肉）' },
+    { value: 'C1292445', text: '排骨 砍块' },
+    { value: 'C1292455', text: '猪脆骨 ' },
+    { value: 'C1292456', text: '猪腔骨 ' },
+    { value: 'C1292454', text: '猪肋骨（二级）' },
+    { value: 'C1292453', text: '猪头骨(7斤/只）' },
+    { value: 'C1292446', text: '猪前排（去颈/1.25kg/块）' },
+    { value: 'C1292447', text: '棒骨  （砍断）' },
+    { value: 'C1292442', text: '排骨块（老排/约3-5厘米）' },
+    { value: 'C1292452', text: '扇骨（剁块）' },
+    { value: 'C1292450', text: '前腿骨头（带肉）' },
+  ],
+  selected: ['C1292452'],
+  onSelected(selected: string[]) {
+    this.selected = selected
+  },
+  parentInfo: [] as string[],
+  doShowParentInfo(select: string[]) {
+    this.parentInfo = select
+  },
+})
+
+export const ComTransfer = () => (
+  <Transfer
+    list={toJS(store.flatData)}
+    selectedValues={store.selected}
+    onSelectValues={(selected) => store.onSelected(selected)}
+    rightTree
+  />
+)
+
+export const ComTransferWithRightTree = () => (
+  <div style={{ display: 'flex' }}>
+    <div style={{ marginRight: '30px' }}>
+      <p>右边非树结构</p>
+      <Transfer
+        list={toJS(store.treeData)}
+        selectedValues={store.selected}
+        onSelectValues={(selected) => store.onSelected(selected)}
+      />
+    </div>
+    <div>
+      <p>右边树结构</p>
+      <Transfer
+        list={toJS(store.treeData)}
+        selectedValues={store.selected}
+        onSelectValues={(selected) => store.onSelected(selected)}
+        rightTree
+      />
+    </div>
+  </div>
+)
+
+export default {
+  title: '表单/Transfer',
+}

package/src/component/transfer/transfer.tsx

@@ -1,147 +1,147 @@
-import React, { useState, useMemo, FC } from 'react'
-import { getLocale } from '@gm-pc/locales'
-import { Tree } from '../tree'
-import { Flex } from '../flex'
-import SvgRightSmall from '../../svg/right-small.svg'
-import SvgLeftSmall from '../../svg/left-small.svg'
-import { Button } from '../button'
-import _ from 'lodash'
-import { filterGroupListLeaf } from '@gm-common/tool'
-import { Value, TransferListItem, TransferProps } from './types'
-
-function getLeftAndRightList(
-  list: TransferListItem[],
-  selectedValues: Value[],
-  rightTree?: boolean
-) {
-  let rightList: TransferListItem[] = []
-  const leftList = filterGroupListLeaf(list, (leaf) => {
-    const isRight = selectedValues.includes(leaf.value)
-    if (isRight) {
-      rightList.push(leaf)
-    }
-    return !isRight
-  })
-
-  if (rightTree) {
-    rightList = filterGroupListLeaf(list, (leaf) => {
-      return _.includes(selectedValues, leaf.value)
-    })
-  }
-
-  return [leftList, rightList]
-}
-
-interface State {
-  lefts: Value[]
-  rights: Value[]
-}
-
-const Transfer: FC<TransferProps> = ({
-  list,
-  selectedValues,
-  onSelectValues,
-  rightTree,
-  className,
-  style,
-
-  leftTitle = getLocale('待选择'),
-  leftPlaceholder,
-  leftWithFilter,
-  leftRenderLeafItem,
-  leftRenderGroupItem,
-  leftStyle = { width: '300px', height: '500px' },
-  leftClassName,
-
-  rightTitle = getLocale('已选择'),
-  rightPlaceholder,
-  rightWithFilter,
-  rightRenderLeafItem,
-  rightRenderGroupItem,
-  rightStyle = { width: '300px', height: '500px' },
-  rightClassName,
-  hideToLeftBtn,
-
-  ...rest
-}) => {
-  const [{ lefts, rights }, setLeftRights] = useState<State>({
-    lefts: [],
-    rights: [],
-  })
-
-  const [leftList, rightList] = useMemo(() => {
-    return getLeftAndRightList(list, selectedValues, rightTree)
-  }, [list, selectedValues, rightTree])
-
-  const handleLefts = (values: Value[]) => {
-    setLeftRights({
-      lefts: values,
-      rights,
-    })
-  }
-  const handleRights = (values: Value[]) => {
-    setLeftRights({
-      lefts,
-      rights: values,
-    })
-  }
-
-  const handleClick = (isLeft: boolean) => {
-    setLeftRights({ lefts: [], rights: [] })
-    onSelectValues(_.xor(selectedValues, isLeft ? rights : lefts))
-  }
-
-  const handleToLeft = () => {
-    handleClick(true)
-  }
-
-  const handleToRight = () => {
-    handleClick(false)
-  }
-
-  return (
-    <Flex className={className} {...rest}>
-      <Tree
-        list={leftList}
-        onSelectValues={handleLefts}
-        selectedValues={lefts}
-        title={leftTitle}
-        placeholder={leftPlaceholder}
-        withFilter={leftWithFilter}
-        renderLeafItem={leftRenderLeafItem}
-        renderGroupItem={leftRenderGroupItem}
-        style={leftStyle}
-      />
-      <div className='gm-gap-5' />
-      <Flex column justifyCenter alignCenter className='gm-transfer-operation'>
-        <Button
-          className='gm-margin-bottom-5'
-          plain
-          disabled={lefts.length === 0}
-          onClick={handleToRight}
-        >
-          <SvgRightSmall />
-        </Button>
-        {!hideToLeftBtn && (
-          <Button plain disabled={rights.length === 0} onClick={handleToLeft}>
-            <SvgLeftSmall />
-          </Button>
-        )}
-      </Flex>
-      <div className='gm-gap-5' />
-      <Tree
-        list={rightList}
-        onSelectValues={handleRights}
-        selectedValues={rights}
-        title={rightTitle}
-        placeholder={rightPlaceholder}
-        withFilter={rightWithFilter}
-        renderLeafItem={rightRenderLeafItem}
-        renderGroupItem={rightRenderGroupItem}
-        style={rightStyle}
-      />
-    </Flex>
-  )
-}
-
-export default Transfer
+import React, { useState, useMemo, FC } from 'react'
+import { getLocale } from '@gm-pc/locales'
+import { Tree } from '../tree'
+import { Flex } from '../flex'
+import SvgRightSmall from '../../svg/right-small.svg'
+import SvgLeftSmall from '../../svg/left-small.svg'
+import { Button } from '../button'
+import _ from 'lodash'
+import { filterGroupListLeaf } from '@gm-common/tool'
+import { Value, TransferListItem, TransferProps } from './types'
+
+function getLeftAndRightList(
+  list: TransferListItem[],
+  selectedValues: Value[],
+  rightTree?: boolean
+) {
+  let rightList: TransferListItem[] = []
+  const leftList = filterGroupListLeaf(list, (leaf) => {
+    const isRight = selectedValues.includes(leaf.value)
+    if (isRight) {
+      rightList.push(leaf)
+    }
+    return !isRight
+  })
+
+  if (rightTree) {
+    rightList = filterGroupListLeaf(list, (leaf) => {
+      return _.includes(selectedValues, leaf.value)
+    })
+  }
+
+  return [leftList, rightList]
+}
+
+interface State {
+  lefts: Value[]
+  rights: Value[]
+}
+
+const Transfer: FC<TransferProps> = ({
+  list,
+  selectedValues,
+  onSelectValues,
+  rightTree,
+  className,
+  style,
+
+  leftTitle = getLocale('待选择'),
+  leftPlaceholder,
+  leftWithFilter,
+  leftRenderLeafItem,
+  leftRenderGroupItem,
+  leftStyle = { width: '300px', height: '500px' },
+  leftClassName,
+
+  rightTitle = getLocale('已选择'),
+  rightPlaceholder,
+  rightWithFilter,
+  rightRenderLeafItem,
+  rightRenderGroupItem,
+  rightStyle = { width: '300px', height: '500px' },
+  rightClassName,
+  hideToLeftBtn,
+
+  ...rest
+}) => {
+  const [{ lefts, rights }, setLeftRights] = useState<State>({
+    lefts: [],
+    rights: [],
+  })
+
+  const [leftList, rightList] = useMemo(() => {
+    return getLeftAndRightList(list, selectedValues, rightTree)
+  }, [list, selectedValues, rightTree])
+
+  const handleLefts = (values: Value[]) => {
+    setLeftRights({
+      lefts: values,
+      rights,
+    })
+  }
+  const handleRights = (values: Value[]) => {
+    setLeftRights({
+      lefts,
+      rights: values,
+    })
+  }
+
+  const handleClick = (isLeft: boolean) => {
+    setLeftRights({ lefts: [], rights: [] })
+    onSelectValues(_.xor(selectedValues, isLeft ? rights : lefts))
+  }
+
+  const handleToLeft = () => {
+    handleClick(true)
+  }
+
+  const handleToRight = () => {
+    handleClick(false)
+  }
+
+  return (
+    <Flex className={className} {...rest}>
+      <Tree
+        list={leftList}
+        onSelectValues={handleLefts}
+        selectedValues={lefts}
+        title={leftTitle}
+        placeholder={leftPlaceholder}
+        withFilter={leftWithFilter}
+        renderLeafItem={leftRenderLeafItem}
+        renderGroupItem={leftRenderGroupItem}
+        style={leftStyle}
+      />
+      <div className='gm-gap-5' />
+      <Flex column justifyCenter alignCenter className='gm-transfer-operation'>
+        <Button
+          className='gm-margin-bottom-5'
+          plain
+          disabled={lefts.length === 0}
+          onClick={handleToRight}
+        >
+          <SvgRightSmall />
+        </Button>
+        {!hideToLeftBtn && (
+          <Button plain disabled={rights.length === 0} onClick={handleToLeft}>
+            <SvgLeftSmall />
+          </Button>
+        )}
+      </Flex>
+      <div className='gm-gap-5' />
+      <Tree
+        list={rightList}
+        onSelectValues={handleRights}
+        selectedValues={rights}
+        title={rightTitle}
+        placeholder={rightPlaceholder}
+        withFilter={rightWithFilter}
+        renderLeafItem={rightRenderLeafItem}
+        renderGroupItem={rightRenderGroupItem}
+        style={rightStyle}
+      />
+    </Flex>
+  )
+}
+
+export default Transfer