@gm-pc/react 1.25.1-beta.1 → 1.26.0-beta.0

package/src/component/function_set/function_set.tsx

@@ -1,84 +1,84 @@
-import React, { Component, createRef, FC, HTMLAttributes } from 'react'
-import { FunctionSetData, FunctionSetProps } from './types'
-import { Popover } from '../popover'
-import Overlay from './overlay'
-import { Button } from '../button'
-import { getLocale } from '@gm-pc/locales'
-import { IconDownUp } from '../icon_down_up'
-import { ConfigConsumer, ConfigProvider } from '../config_provider'
-
-interface InnerProps extends HTMLAttributes<HTMLDivElement> {
-  disabled: boolean
-}
-
-const Inner: FC<InnerProps> = ({ disabled, className, children, ...rest }) => {
-  return (
-    <div className='gm-inline-block' {...rest}>
-      {children ?? (
-        <Default
-          active={(className ?? '').includes('gm-popover-active')}
-          disabled={disabled}
-        />
-      )}
-    </div>
-  )
-}
-
-interface DefaultProps {
-  disabled: boolean
-  active: boolean
-}
-
-const Default: FC<DefaultProps> = ({ disabled, active }) => {
-  return (
-    <Button type='primary' plain disabled={disabled}>
-      {getLocale('更多功能')} &nbsp;
-      <IconDownUp active={active} />
-    </Button>
-  )
-}
-
-class FunctionSet extends Component<FunctionSetProps> {
-  private _popoverRef = createRef<Popover>()
-
-  public apiDoSetActive = (active?: boolean): void => {
-    this._popoverRef.current!.apiDoSetActive(active)
-  }
-
-  private _handleSelect = (select: FunctionSetData): void => {
-    if (!select.onClick) {
-      return
-    }
-    this._popoverRef.current!.apiDoSetActive()
-    select.onClick()
-  }
-
-  render() {
-    const { data, right, disabled, children } = this.props
-    const newData = data.filter((value) => value.show !== false)
-    if (!newData.length) {
-      return null
-    }
-    return (
-      <ConfigConsumer>
-        {(config) => (
-          <Popover
-            ref={this._popoverRef}
-            popup={
-              <ConfigProvider {...config}>
-                <Overlay data={newData} onSelect={this._handleSelect} isReverse={right} />
-              </ConfigProvider>
-            }
-            right={right}
-            type='hover'
-            disabled={disabled}
-            pureContainer
-          >
-            <Inner disabled={!!disabled}>{children}</Inner>
-          </Popover>
-        )}
-      </ConfigConsumer>
-    )
-  }
-}
-export default FunctionSet
+import React, { Component, createRef, FC, HTMLAttributes } from 'react'
+import { FunctionSetData, FunctionSetProps } from './types'
+import { Popover } from '../popover'
+import Overlay from './overlay'
+import { Button } from '../button'
+import { getLocale } from '@gm-pc/locales'
+import { IconDownUp } from '../icon_down_up'
+import { ConfigConsumer, ConfigProvider } from '../config_provider'
+
+interface InnerProps extends HTMLAttributes<HTMLDivElement> {
+  disabled: boolean
+}
+
+const Inner: FC<InnerProps> = ({ disabled, className, children, ...rest }) => {
+  return (
+    <div className='gm-inline-block' {...rest}>
+      {children ?? (
+        <Default
+          active={(className ?? '').includes('gm-popover-active')}
+          disabled={disabled}
+        />
+      )}
+    </div>
+  )
+}
+
+interface DefaultProps {
+  disabled: boolean
+  active: boolean
+}
+
+const Default: FC<DefaultProps> = ({ disabled, active }) => {
+  return (
+    <Button type='primary' plain disabled={disabled}>
+      {getLocale('更多功能')} &nbsp;
+      <IconDownUp active={active} />
+    </Button>
+  )
+}
+
+class FunctionSet extends Component<FunctionSetProps> {
+  private _popoverRef = createRef<Popover>()
+
+  public apiDoSetActive = (active?: boolean): void => {
+    this._popoverRef.current!.apiDoSetActive(active)
+  }
+
+  private _handleSelect = (select: FunctionSetData): void => {
+    if (!select.onClick) {
+      return
+    }
+    this._popoverRef.current!.apiDoSetActive()
+    select.onClick()
+  }
+
+  render() {
+    const { data, right, disabled, children } = this.props
+    const newData = data.filter((value) => value.show !== false)
+    if (!newData.length) {
+      return null
+    }
+    return (
+      <ConfigConsumer>
+        {(config) => (
+          <Popover
+            ref={this._popoverRef}
+            popup={
+              <ConfigProvider {...config}>
+                <Overlay data={newData} onSelect={this._handleSelect} isReverse={right} />
+              </ConfigProvider>
+            }
+            right={right}
+            type='hover'
+            disabled={disabled}
+            pureContainer
+          >
+            <Inner disabled={!!disabled}>{children}</Inner>
+          </Popover>
+        )}
+      </ConfigConsumer>
+    )
+  }
+}
+export default FunctionSet

package/src/component/function_set/index.ts

@@ -1,2 +1,2 @@
-export { default as FunctionSet } from './function_set'
-export type { FunctionSetProps } from './types'
+export { default as FunctionSet } from './function_set'
+export type { FunctionSetProps } from './types'

package/src/component/function_set/overlay.tsx

@@ -1,41 +1,41 @@
-import React, { FC, useCallback, useState } from 'react'
-import { FunctionSetData } from './types'
-import { processDataWithValue } from './utils'
-import { LevelList } from '../level_list'
-
-interface OverlayProps {
-  data: FunctionSetData[]
-  onSelect(selected: FunctionSetData): void
-  isReverse?: boolean
-}
-
-const Overlay: FC<OverlayProps> = ({ data, onSelect, isReverse }) => {
-  const [will, setWill] = useState<string[]>([])
-
-  // 做个map存起来，方便快速通过 value 找到 item
-  const map: { [key: string]: FunctionSetData } = {}
-  const newData = processDataWithValue(data, map)
-
-  const handleSelect = useCallback(
-    (selected: string[]) => {
-      // 取最后一个
-      const item = map[selected.slice(-1)[0]]
-      onSelect(item)
-    },
-    [map, onSelect]
-  )
-
-  return (
-    <LevelList
-      data={newData}
-      selected={[]}
-      onSelect={handleSelect}
-      willActiveSelected={will}
-      onWillActiveSelect={(will) => setWill(will)}
-      isReverse={isReverse}
-      isForFunctionSet
-    />
-  )
-}
-
-export default Overlay
+import React, { FC, useCallback, useState } from 'react'
+import { FunctionSetData } from './types'
+import { processDataWithValue } from './utils'
+import { LevelList } from '../level_list'
+
+interface OverlayProps {
+  data: FunctionSetData[]
+  onSelect(selected: FunctionSetData): void
+  isReverse?: boolean
+}
+
+const Overlay: FC<OverlayProps> = ({ data, onSelect, isReverse }) => {
+  const [will, setWill] = useState<string[]>([])
+
+  // 做个map存起来，方便快速通过 value 找到 item
+  const map: { [key: string]: FunctionSetData } = {}
+  const newData = processDataWithValue(data, map)
+
+  const handleSelect = useCallback(
+    (selected: string[]) => {
+      // 取最后一个
+      const item = map[selected.slice(-1)[0]]
+      onSelect(item)
+    },
+    [map, onSelect]
+  )
+
+  return (
+    <LevelList
+      data={newData}
+      selected={[]}
+      onSelect={handleSelect}
+      willActiveSelected={will}
+      onWillActiveSelect={(will) => setWill(will)}
+      isReverse={isReverse}
+      isForFunctionSet
+    />
+  )
+}
+
+export default Overlay

package/src/component/function_set/stories.tsx

@@ -1,71 +1,71 @@
-import React from 'react'
-import FunctionSet from './function_set'
-
-const data = [
-  {
-    text: '功能1',
-    onClick: () => {
-      window.alert('功能1')
-    },
-  },
-  {
-    text: '功能2',
-    onClick: () => {
-      window.alert('功能2')
-    },
-  },
-  {
-    text: '功能3(不可用)',
-    disabled: true,
-    onClick: () => {
-      window.alert('功能3')
-    },
-  },
-  {
-    text: '功能4(不会示)',
-    show: false,
-    onClick: () => {
-      window.alert('功能4')
-    },
-  },
-  {
-    text: '新建',
-    children: [
-      {
-        text: '商品新建',
-        children: [
-          {
-            text: '商品新建1',
-            onClick: () => {
-              window.alert('商品新建1')
-            },
-          },
-          {
-            text: '商品新建2',
-            onClick: () => {
-              window.alert('商品新建2')
-            },
-          },
-        ],
-      },
-    ],
-  },
-]
-
-export const ComFunctionSet = () => (
-  <div style={{ padding: '50px' }}>
-    <FunctionSet data={data} />
-    <div>disabled</div>
-    <FunctionSet data={data} disabled />
-    <div>children</div>
-    <FunctionSet data={data}>自定义 children</FunctionSet>
-    <div>right</div>
-    <FunctionSet data={data} right />
-    <div>data [] 不显示</div>
-    <FunctionSet data={[]} />
-  </div>
-)
-
-export default {
-  title: '表单/FunctionSet',
-}
+import React from 'react'
+import FunctionSet from './function_set'
+
+const data = [
+  {
+    text: '功能1',
+    onClick: () => {
+      window.alert('功能1')
+    },
+  },
+  {
+    text: '功能2',
+    onClick: () => {
+      window.alert('功能2')
+    },
+  },
+  {
+    text: '功能3(不可用)',
+    disabled: true,
+    onClick: () => {
+      window.alert('功能3')
+    },
+  },
+  {
+    text: '功能4(不会示)',
+    show: false,
+    onClick: () => {
+      window.alert('功能4')
+    },
+  },
+  {
+    text: '新建',
+    children: [
+      {
+        text: '商品新建',
+        children: [
+          {
+            text: '商品新建1',
+            onClick: () => {
+              window.alert('商品新建1')
+            },
+          },
+          {
+            text: '商品新建2',
+            onClick: () => {
+              window.alert('商品新建2')
+            },
+          },
+        ],
+      },
+    ],
+  },
+]
+
+export const ComFunctionSet = () => (
+  <div style={{ padding: '50px' }}>
+    <FunctionSet data={data} />
+    <div>disabled</div>
+    <FunctionSet data={data} disabled />
+    <div>children</div>
+    <FunctionSet data={data}>自定义 children</FunctionSet>
+    <div>right</div>
+    <FunctionSet data={data} right />
+    <div>data [] 不显示</div>
+    <FunctionSet data={[]} />
+  </div>
+)
+
+export default {
+  title: '表单/FunctionSet',
+}

package/src/component/function_set/types.ts

@@ -1,15 +1,15 @@
-interface FunctionSetData {
-  text: string
-  onClick?(): void
-  show?: boolean
-  disabled?: boolean
-  children?: FunctionSetData[]
-}
-
-interface FunctionSetProps {
-  data: FunctionSetData[]
-  right?: boolean
-  disabled?: boolean
-}
-
-export type { FunctionSetData, FunctionSetProps }
+interface FunctionSetData {
+  text: string
+  onClick?(): void
+  show?: boolean
+  disabled?: boolean
+  children?: FunctionSetData[]
+}
+
+interface FunctionSetProps {
+  data: FunctionSetData[]
+  right?: boolean
+  disabled?: boolean
+}
+
+export type { FunctionSetData, FunctionSetProps }

package/src/component/function_set/utils.ts

@@ -1,21 +1,21 @@
-import { FunctionSetData } from './types'
-import { TreeDataItem } from '../../types'
-
-interface ProcessDataWithValue {
-  (data: FunctionSetData[], map: { [key: string]: any }, pre?: string): TreeDataItem<
-    string
-  >[]
-}
-
-const processDataWithValue: ProcessDataWithValue = (data, map, pre = '') => {
-  return data.map((item, index) => {
-    const value = `${pre}_${index}`
-    map[value] = item
-    if (item.children) {
-      item.children = processDataWithValue(item.children, map, value)
-    }
-    return { value, ...item } as TreeDataItem<string>
-  })
-}
-
-export { processDataWithValue }
+import { FunctionSetData } from './types'
+import { TreeDataItem } from '../../types'
+
+interface ProcessDataWithValue {
+  (data: FunctionSetData[], map: { [key: string]: any }, pre?: string): TreeDataItem<
+    string
+  >[]
+}
+
+const processDataWithValue: ProcessDataWithValue = (data, map, pre = '') => {
+  return data.map((item, index) => {
+    const value = `${pre}_${index}`
+    map[value] = item
+    if (item.children) {
+      item.children = processDataWithValue(item.children, map, value)
+    }
+    return { value, ...item } as TreeDataItem<string>
+  })
+}
+
+export { processDataWithValue }

package/src/component/grid/col.tsx

@@ -1,55 +1,55 @@
-import React, { FC, useContext } from 'react'
-import classNames from 'classnames'
-import { ColProps } from './types'
-import { RowContext } from './util'
-
-const SIZE_LIST = ['sm', 'md', 'lg', 'xl']
-
-const Col: FC<ColProps> = ({ span, offset, style, className, children, ...rest }) => {
-  const { gutter } = useContext(RowContext)
-
-  // 这段有点看不懂
-  let sizeClasses: object = {}
-  SIZE_LIST.forEach((size) => {
-    let sizeProps: ColProps = {}
-    if (typeof (rest as any)[size] === 'number') {
-      sizeProps.span = (rest as any)[size]
-    } else if (typeof (rest as any)[size] === 'object') {
-      sizeProps = (rest as any)[size] ?? {}
-    }
-
-    delete (rest as any)[size]
-
-    sizeClasses = {
-      ...sizeClasses,
-      [`gm-grid-col-${size}-span-${sizeProps.span}`]: !!sizeProps.span,
-      [`gm-grid-col-${size}-offset-${sizeProps.offset}`]: !!sizeProps.offset,
-    }
-  })
-
-  const colStyle = style || {}
-  if (typeof gutter === 'number' && gutter! > 0) {
-    colStyle.paddingLeft = gutter / 2
-    colStyle.paddingRight = gutter / 2
-  }
-
-  return (
-    <div
-      {...rest}
-      style={colStyle}
-      className={classNames(
-        'gm-grid-col',
-        {
-          [`gm-grid-col-span-${span}`]: span,
-          [`gm-grid-col-offset-${offset}`]: offset,
-        },
-        className,
-        sizeClasses
-      )}
-    >
-      {children}
-    </div>
-  )
-}
-
-export default Col
+import React, { FC, useContext } from 'react'
+import classNames from 'classnames'
+import { ColProps } from './types'
+import { RowContext } from './util'
+
+const SIZE_LIST = ['sm', 'md', 'lg', 'xl']
+
+const Col: FC<ColProps> = ({ span, offset, style, className, children, ...rest }) => {
+  const { gutter } = useContext(RowContext)
+
+  // 这段有点看不懂
+  let sizeClasses: object = {}
+  SIZE_LIST.forEach((size) => {
+    let sizeProps: ColProps = {}
+    if (typeof (rest as any)[size] === 'number') {
+      sizeProps.span = (rest as any)[size]
+    } else if (typeof (rest as any)[size] === 'object') {
+      sizeProps = (rest as any)[size] ?? {}
+    }
+
+    delete (rest as any)[size]
+
+    sizeClasses = {
+      ...sizeClasses,
+      [`gm-grid-col-${size}-span-${sizeProps.span}`]: !!sizeProps.span,
+      [`gm-grid-col-${size}-offset-${sizeProps.offset}`]: !!sizeProps.offset,
+    }
+  })
+
+  const colStyle = style || {}
+  if (typeof gutter === 'number' && gutter! > 0) {
+    colStyle.paddingLeft = gutter / 2
+    colStyle.paddingRight = gutter / 2
+  }
+
+  return (
+    <div
+      {...rest}
+      style={colStyle}
+      className={classNames(
+        'gm-grid-col',
+        {
+          [`gm-grid-col-span-${span}`]: span,
+          [`gm-grid-col-offset-${offset}`]: offset,
+        },
+        className,
+        sizeClasses
+      )}
+    >
+      {children}
+    </div>
+  )
+}
+
+export default Col

package/src/component/grid/index.ts

@@ -1,3 +1,3 @@
-export { default as Row } from './row'
-export { default as Col } from './col'
-export type { RowProps, ColProps, Gutter } from './types'
+export { default as Row } from './row'
+export { default as Col } from './col'
+export type { RowProps, ColProps, Gutter } from './types'