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

package/src/component/transfer/types.ts

@@ -1,42 +1,42 @@
-import { TreeListItem, TreeWithFilter } from '../tree'
-import { CSSProperties, ReactNode } from 'react'
-import { FlexProps } from '../flex'
-
-type TransferListItem = TreeListItem
-type Value = any
-
-interface TransferProps extends FlexProps {
-  list: TransferListItem[]
-  selectedValues: Value[]
-  onSelectValues(selectedValues: Value[]): void
-  /** 右侧是否以树状结构展示 */
-  rightTree?: boolean
-
-  /* 左侧树 */
-  leftTitle?: string
-  /** 左侧树自定义筛选 */
-  leftWithFilter?: TreeWithFilter
-  leftPlaceholder?: string
-  /** 左侧自定义渲染叶子节点 */
-  leftRenderLeafItem?(item: TransferListItem): ReactNode
-  /** 左侧自定义渲染分支节点 */
-  leftRenderGroupItem?(item: TransferListItem): ReactNode
-  leftStyle?: CSSProperties
-  leftClassName?: string
-
-  /* 右侧树 */
-  rightTitle?: string
-  /** 右侧自定义筛选 */
-  rightWithFilter?: TreeWithFilter
-  rightPlaceholder?: string
-  /** 右侧自定义渲染叶子节点 */
-  rightRenderLeafItem?(item: TransferListItem): ReactNode
-  /** 右侧自定义渲染分支节点 */
-  rightRenderGroupItem?(item: TransferListItem): ReactNode
-  rightStyle?: CSSProperties
-  rightClassName?: string
-
-  hideToLeftBtn?: boolean
-}
-
-export type { Value, TransferProps, TransferListItem }
+import { TreeListItem, TreeWithFilter } from '../tree'
+import { CSSProperties, ReactNode } from 'react'
+import { FlexProps } from '../flex'
+
+type TransferListItem = TreeListItem
+type Value = any
+
+interface TransferProps extends FlexProps {
+  list: TransferListItem[]
+  selectedValues: Value[]
+  onSelectValues(selectedValues: Value[]): void
+  /** 右侧是否以树状结构展示 */
+  rightTree?: boolean
+
+  /* 左侧树 */
+  leftTitle?: string
+  /** 左侧树自定义筛选 */
+  leftWithFilter?: TreeWithFilter
+  leftPlaceholder?: string
+  /** 左侧自定义渲染叶子节点 */
+  leftRenderLeafItem?(item: TransferListItem): ReactNode
+  /** 左侧自定义渲染分支节点 */
+  leftRenderGroupItem?(item: TransferListItem): ReactNode
+  leftStyle?: CSSProperties
+  leftClassName?: string
+
+  /* 右侧树 */
+  rightTitle?: string
+  /** 右侧自定义筛选 */
+  rightWithFilter?: TreeWithFilter
+  rightPlaceholder?: string
+  /** 右侧自定义渲染叶子节点 */
+  rightRenderLeafItem?(item: TransferListItem): ReactNode
+  /** 右侧自定义渲染分支节点 */
+  rightRenderGroupItem?(item: TransferListItem): ReactNode
+  rightStyle?: CSSProperties
+  rightClassName?: string
+
+  hideToLeftBtn?: boolean
+}
+
+export type { Value, TransferProps, TransferListItem }

package/src/component/tree/bottom.tsx

@@ -1,34 +1,34 @@
-import { getLocale } from '@gm-pc/locales'
-import React, { FC, useMemo } from 'react'
-import { Flex } from '../flex'
-import { Checkbox } from '../checkbox'
-import { getLeafValues } from './util'
-import { BottomProps } from './types'
-
-const Bottom: FC<BottomProps> = ({ list, selectedValues, onChange }) => {
-  const leafValues = useMemo(() => {
-    return getLeafValues(list)
-  }, [list])
-
-  const checkedAll =
-    leafValues.length !== 0 && leafValues.length === selectedValues.length
-  const isIndeterminate =
-    selectedValues.length !== 0 && selectedValues.length < leafValues.length
-
-  return (
-    <Flex justifyBetween alignCenter className='gm-border-top gm-padding-5'>
-      <Checkbox
-        checked={checkedAll}
-        indeterminate={isIndeterminate}
-        onChange={() => onChange(!checkedAll)}
-      >
-        {getLocale('全选')}
-      </Checkbox>
-      <div className='gm-padding-lr-5 gm-text-desc'>
-        {selectedValues.length}/{leafValues.length}
-      </div>
-    </Flex>
-  )
-}
-
-export default React.memo(Bottom)
+import { getLocale } from '@gm-pc/locales'
+import React, { FC, useMemo } from 'react'
+import { Flex } from '../flex'
+import { Checkbox } from '../checkbox'
+import { getLeafValues } from './util'
+import { BottomProps } from './types'
+
+const Bottom: FC<BottomProps> = ({ list, selectedValues, onChange }) => {
+  const leafValues = useMemo(() => {
+    return getLeafValues(list)
+  }, [list])
+
+  const checkedAll =
+    leafValues.length !== 0 && leafValues.length === selectedValues.length
+  const isIndeterminate =
+    selectedValues.length !== 0 && selectedValues.length < leafValues.length
+
+  return (
+    <Flex justifyBetween alignCenter className='gm-border-top gm-padding-5'>
+      <Checkbox
+        checked={checkedAll}
+        indeterminate={isIndeterminate}
+        onChange={() => onChange(!checkedAll)}
+      >
+        {getLocale('全选')}
+      </Checkbox>
+      <div className='gm-padding-lr-5 gm-text-desc'>
+        {selectedValues.length}/{leafValues.length}
+      </div>
+    </Flex>
+  )
+}
+
+export default React.memo(Bottom)

package/src/component/tree/find.tsx

@@ -1,73 +1,73 @@
-import React, { ChangeEvent, FC, useMemo, useRef, useState } from 'react'
-import { Input } from '../input'
-import { Button } from '../button'
-import { getLocale } from '@gm-pc/locales'
-import { Flex } from '../flex'
-import { FindProps } from './types'
-import _ from 'lodash'
-import { pinYinFilter } from '@gm-common/tool/src/index'
-
-const Find: FC<FindProps> = ({ placeholder, flatList, onFind }) => {
-  const [query, setQuery] = useState('')
-  // 用 ref，因为不影响 UI
-  const refIndex = useRef(-1)
-
-  const debounceFind = useMemo(() => {
-    return _.debounce((value: any) => {
-      onFind(value)
-    }, 500)
-  }, [onFind])
-
-  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-    setQuery(e.target.value)
-    // 重置索引
-    refIndex.current = -1
-    // 复原
-    debounceFind(null)
-  }
-
-  // 1 处理 groupSelected
-  // 2 回调 滚动的值
-  const handleFind = () => {
-    if (query === '') {
-      return
-    }
-
-    const matchFlatList = _.filter(flatList, (item) => {
-      return pinYinFilter([item], query, (v) => v.data.text).length > 0
-    })
-
-    // 没有数据返回
-    if (matchFlatList.length === 0) {
-      return
-    }
-
-    // 匹配的原始数据
-    const items = _.map(matchFlatList, (v) => v.data)
-
-    // 处理下索引
-    if (refIndex.current === -1) {
-      refIndex.current = 0
-    } else {
-      refIndex.current++
-    }
-    if (refIndex.current >= items.length) {
-      refIndex.current = 0
-    }
-
-    const value = items[refIndex.current].value
-
-    onFind(value)
-  }
-
-  return (
-    <Flex className='gm-tree-find'>
-      <Input placeholder={placeholder} onChange={handleChange} value={query} />
-      <Button type='primary' onClick={handleFind}>
-        {getLocale('定位')}
-      </Button>
-    </Flex>
-  )
-}
-
-export default React.memo(Find)
+import React, { ChangeEvent, FC, useMemo, useRef, useState } from 'react'
+import { Input } from '../input'
+import { Button } from '../button'
+import { getLocale } from '@gm-pc/locales'
+import { Flex } from '../flex'
+import { FindProps } from './types'
+import _ from 'lodash'
+import { pinYinFilter } from '@gm-common/tool/src/index'
+
+const Find: FC<FindProps> = ({ placeholder, flatList, onFind }) => {
+  const [query, setQuery] = useState('')
+  // 用 ref，因为不影响 UI
+  const refIndex = useRef(-1)
+
+  const debounceFind = useMemo(() => {
+    return _.debounce((value: any) => {
+      onFind(value)
+    }, 500)
+  }, [onFind])
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setQuery(e.target.value)
+    // 重置索引
+    refIndex.current = -1
+    // 复原
+    debounceFind(null)
+  }
+
+  // 1 处理 groupSelected
+  // 2 回调 滚动的值
+  const handleFind = () => {
+    if (query === '') {
+      return
+    }
+
+    const matchFlatList = _.filter(flatList, (item) => {
+      return pinYinFilter([item], query, (v) => v.data.text).length > 0
+    })
+
+    // 没有数据返回
+    if (matchFlatList.length === 0) {
+      return
+    }
+
+    // 匹配的原始数据
+    const items = _.map(matchFlatList, (v) => v.data)
+
+    // 处理下索引
+    if (refIndex.current === -1) {
+      refIndex.current = 0
+    } else {
+      refIndex.current++
+    }
+    if (refIndex.current >= items.length) {
+      refIndex.current = 0
+    }
+
+    const value = items[refIndex.current].value
+
+    onFind(value)
+  }
+
+  return (
+    <Flex className='gm-tree-find'>
+      <Input placeholder={placeholder} onChange={handleChange} value={query} />
+      <Button type='primary' onClick={handleFind}>
+        {getLocale('定位')}
+      </Button>
+    </Flex>
+  )
+}
+
+export default React.memo(Find)

package/src/component/tree/index.ts

@@ -1,2 +1,2 @@
-export { default as Tree, TreeUtil } from './tree'
-export type { TreeListItem, TreeProps, TreeStatic, TreeWithFilter } from './types'
+export { default as Tree, TreeUtil } from './tree'
+export type { TreeListItem, TreeProps, TreeStatic, TreeWithFilter } from './types'

package/src/component/tree/item.tsx

@@ -1,75 +1,75 @@
-import React, { FC, MouseEvent } from 'react'
-import { ItemProps } from './types'
-import { Flex } from '../flex'
-import classNames from 'classnames'
-import { Checkbox } from '../checkbox'
-import { IconExpand } from '../icon_expand'
-
-const Item: FC<ItemProps> = ({
-  expand,
-  onExpand,
-  checked,
-  indeterminate,
-  onCheck,
-  flatItem: { isLeaf, level, data },
-  renderLeafItem = (data) => data.text,
-  renderGroupItem = (data) => data.text,
-  active = false,
-  onActive,
-  findActive,
-  disabledCheckbox,
-  style,
-}) => {
-  const handleGroup = (e: MouseEvent<HTMLDivElement>) => {
-    e.stopPropagation()
-    onExpand()
-  }
-
-  const handleRadio = () => {
-    onCheck()
-  }
-
-  const handleActive = () => {
-    onActive(data)
-  }
-
-  return (
-    <Flex
-      alignCenter
-      className={classNames('gm-tree-list-item', {
-        active,
-        'gm-tree-list-item-find-active': findActive,
-      })}
-      style={{
-        ...style,
-        paddingLeft: `calc(${level}em + 5px)`,
-      }}
-      data-value={data.value}
-    >
-      {!isLeaf && (
-        <IconExpand className='gm-margin-left-5' onClick={handleGroup} active={expand} />
-      )}
-      {level > 0 && isLeaf && <div style={{ width: '2em' }} />}
-      {!disabledCheckbox && (
-        <Checkbox
-          checked={checked}
-          onChange={handleRadio}
-          indeterminate={indeterminate}
-          className='gm-padding-left-5'
-        />
-      )}
-      <Flex
-        flex
-        column
-        onClick={handleActive}
-        justifyCenter
-        style={{ height: '100%', minWidth: '0' }}
-        className='gm-margin-left-5'
-      >
-        {isLeaf ? renderLeafItem(data) : renderGroupItem(data)}
-      </Flex>
-    </Flex>
-  )
-}
-
-export default React.memo(Item)
+import React, { FC, MouseEvent } from 'react'
+import { ItemProps } from './types'
+import { Flex } from '../flex'
+import classNames from 'classnames'
+import { Checkbox } from '../checkbox'
+import { IconExpand } from '../icon_expand'
+
+const Item: FC<ItemProps> = ({
+  expand,
+  onExpand,
+  checked,
+  indeterminate,
+  onCheck,
+  flatItem: { isLeaf, level, data },
+  renderLeafItem = (data) => data.text,
+  renderGroupItem = (data) => data.text,
+  active = false,
+  onActive,
+  findActive,
+  disabledCheckbox,
+  style,
+}) => {
+  const handleGroup = (e: MouseEvent<HTMLDivElement>) => {
+    e.stopPropagation()
+    onExpand()
+  }
+
+  const handleRadio = () => {
+    onCheck()
+  }
+
+  const handleActive = () => {
+    onActive(data)
+  }
+
+  return (
+    <Flex
+      alignCenter
+      className={classNames('gm-tree-list-item', {
+        active,
+        'gm-tree-list-item-find-active': findActive,
+      })}
+      style={{
+        ...style,
+        paddingLeft: `calc(${level}em + 5px)`,
+      }}
+      data-value={data.value}
+    >
+      {!isLeaf && (
+        <IconExpand className='gm-margin-left-5' onClick={handleGroup} active={expand} />
+      )}
+      {level > 0 && isLeaf && <div style={{ width: '2em' }} />}
+      {!disabledCheckbox && (
+        <Checkbox
+          checked={checked}
+          onChange={handleRadio}
+          indeterminate={indeterminate}
+          className='gm-padding-left-5'
+        />
+      )}
+      <Flex
+        flex
+        column
+        onClick={handleActive}
+        justifyCenter
+        style={{ height: '100%', minWidth: '0' }}
+        className='gm-margin-left-5'
+      >
+        {isLeaf ? renderLeafItem(data) : renderGroupItem(data)}
+      </Flex>
+    </Flex>
+  )
+}
+
+export default React.memo(Item)