@gm-pc/react 1.25.0-beta.0 → 1.25.1-beta.0

package/src/component/level_select/multiple_level_select.tsx

@@ -1,104 +1,104 @@
-import React, { useRef, ReactNode } from 'react'
-import { LevelSelectDataItem, MultipleLevelSelectProps } from './types'
-import { MultipleSelection } from '../multiple_selection'
-import { Popover } from '../popover'
-import { Flex } from '../flex'
-import { LevelList } from '../level_list'
-import _ from 'lodash'
-import { getItems } from './util'
-import { MultipleSelectionSelectedItem } from '../multiple_selection/multiple_selection'
-
-const defaultRenderSelected = (items: any[]) => {
-  return items.map((v) => v.text).join(',')
-}
-
-function MultipleLevelSelect<V = any>({
-  data,
-  selected,
-  onSelect,
-  disabled,
-  renderSelected = defaultRenderSelected,
-  titles,
-  onlySelectLeaf,
-  popoverType = 'focus',
-  right,
-  placeholder,
-  children,
-  className,
-  style,
-}: MultipleLevelSelectProps<V>) {
-  const popoverRef = useRef<Popover>(null)
-
-  const handleLevelListSelect = (item: V[]): void => {
-    popoverRef.current!.apiDoSetActive(false)
-
-    // 先这样去重
-    const newSelect = _.uniqBy(selected.concat([item]), (v) => v.join(','))
-
-    onSelect(newSelect)
-  }
-
-  const handleMultipleSelectionSelect = (
-    selectionSelected: MultipleSelectionSelectedItem<any>[]
-  ) => {
-    onSelect(
-      _.map(selectionSelected, (v) => {
-        return v.value
-      })
-    )
-  }
-
-  const renderPopup = (): ReactNode => {
-    return (
-      <Flex justifyEnd={right}>
-        <LevelList
-          isReverse={right}
-          data={data}
-          selected={[]}
-          onSelect={handleLevelListSelect}
-          titles={titles}
-          onlySelectLeaf={onlySelectLeaf}
-        />
-      </Flex>
-    )
-  }
-
-  // 二维
-  const selectedItems: LevelSelectDataItem<V>[][] = _.map(selected, (v) => {
-    return getItems(data, v)
-  })
-
-  // 转成符合 MultipleSelection 的数据
-  const selectionSelected: MultipleSelectionSelectedItem<any>[] = _.map(
-    selectedItems,
-    (items) => {
-      return {
-        value: _.map(items, (v) => v.value),
-        text: renderSelected(items),
-      } as MultipleSelectionSelectedItem<any>
-    }
-  )
-
-  return (
-    <Popover
-      ref={popoverRef}
-      right={right}
-      disabled={disabled}
-      popup={renderPopup()}
-      type={popoverType}
-      pureContainer
-    >
-      {children ?? (
-        <MultipleSelection<V[]>
-          selected={selectionSelected}
-          onSelect={handleMultipleSelectionSelect}
-          className={className}
-          style={style}
-          placeholder={placeholder}
-        />
-      )}
-    </Popover>
-  )
-}
-
-export default MultipleLevelSelect
+import React, { useRef, ReactNode } from 'react'
+import { LevelSelectDataItem, MultipleLevelSelectProps } from './types'
+import { MultipleSelection } from '../multiple_selection'
+import { Popover } from '../popover'
+import { Flex } from '../flex'
+import { LevelList } from '../level_list'
+import _ from 'lodash'
+import { getItems } from './util'
+import { MultipleSelectionSelectedItem } from '../multiple_selection/multiple_selection'
+
+const defaultRenderSelected = (items: any[]) => {
+  return items.map((v) => v.text).join(',')
+}
+
+function MultipleLevelSelect<V = any>({
+  data,
+  selected,
+  onSelect,
+  disabled,
+  renderSelected = defaultRenderSelected,
+  titles,
+  onlySelectLeaf,
+  popoverType = 'focus',
+  right,
+  placeholder,
+  children,
+  className,
+  style,
+}: MultipleLevelSelectProps<V>) {
+  const popoverRef = useRef<Popover>(null)
+
+  const handleLevelListSelect = (item: V[]): void => {
+    popoverRef.current!.apiDoSetActive(false)
+
+    // 先这样去重
+    const newSelect = _.uniqBy(selected.concat([item]), (v) => v.join(','))
+
+    onSelect(newSelect)
+  }
+
+  const handleMultipleSelectionSelect = (
+    selectionSelected: MultipleSelectionSelectedItem<any>[]
+  ) => {
+    onSelect(
+      _.map(selectionSelected, (v) => {
+        return v.value
+      })
+    )
+  }
+
+  const renderPopup = (): ReactNode => {
+    return (
+      <Flex justifyEnd={right}>
+        <LevelList
+          isReverse={right}
+          data={data}
+          selected={[]}
+          onSelect={handleLevelListSelect}
+          titles={titles}
+          onlySelectLeaf={onlySelectLeaf}
+        />
+      </Flex>
+    )
+  }
+
+  // 二维
+  const selectedItems: LevelSelectDataItem<V>[][] = _.map(selected, (v) => {
+    return getItems(data, v)
+  })
+
+  // 转成符合 MultipleSelection 的数据
+  const selectionSelected: MultipleSelectionSelectedItem<any>[] = _.map(
+    selectedItems,
+    (items) => {
+      return {
+        value: _.map(items, (v) => v.value),
+        text: renderSelected(items),
+      } as MultipleSelectionSelectedItem<any>
+    }
+  )
+
+  return (
+    <Popover
+      ref={popoverRef}
+      right={right}
+      disabled={disabled}
+      popup={renderPopup()}
+      type={popoverType}
+      pureContainer
+    >
+      {children ?? (
+        <MultipleSelection<V[]>
+          selected={selectionSelected}
+          onSelect={handleMultipleSelectionSelect}
+          className={className}
+          style={style}
+          placeholder={placeholder}
+        />
+      )}
+    </Popover>
+  )
+}
+
+export default MultipleLevelSelect

package/src/component/level_select/stories.tsx

@@ -1,102 +1,102 @@
-import React from 'react'
-import LevelSelect from './level_select'
-import MultipleLevelSelect from './multiple_level_select'
-import { observable } from 'mobx'
-
-const data = [
-  {
-    value: 'A',
-    text: '广州越秀越秀越秀越秀越秀越秀越秀越秀越秀越秀越秀越秀越秀越秀越秀',
-    children: [
-      {
-        value: '1',
-        text: '越秀越秀越秀越秀越秀越秀越秀越秀越秀越秀越秀越秀越秀越秀越秀',
-      },
-      { value: '2', text: '荔湾' },
-      { value: '3', text: '天河' },
-      { value: '4', text: '海珠' },
-      { value: '5', text: '白云' },
-      { value: '6', text: '黄埔' },
-      { value: '7', text: '番禺' },
-      { value: '8', text: '南沙' },
-      { value: '9', text: '花都' },
-      { value: '10', text: '增城' },
-      { value: '11', text: '从化' },
-    ],
-  },
-  {
-    value: 'B',
-    text: '深圳',
-    children: [
-      { value: '1', text: '福田' },
-      { value: '2', text: '罗湖' },
-      { value: '3', text: '南山' },
-      { value: '4', text: '盐田' },
-      { value: '5', text: '宝安' },
-      { value: '6', text: '龙岗' },
-      { value: '7', text: '龙华' },
-      { value: '8', text: '坪山' },
-      { value: '9', text: '光明' },
-      { value: '10', text: '大鹏' },
-    ],
-  },
-]
-
-const store = observable({
-  selected: [],
-  changeSelect(value: any) {
-    console.log(value)
-    this.selected = value
-  },
-})
-
-export const ComLevelSelect = () => (
-  <LevelSelect
-    selected={store.selected.slice()}
-    data={data.slice()}
-    onSelect={(value) => {
-      store.changeSelect(value)
-    }}
-    style={{ width: '200px' }}
-  />
-)
-
-export const ComLevelSelectWithOnlySelectLeaf = () => (
-  <LevelSelect
-    selected={store.selected.slice()}
-    data={data.slice()}
-    onSelect={(value) => {
-      store.changeSelect(value)
-    }}
-    style={{ width: '200px' }}
-    onlySelectLeaf
-  />
-)
-
-export const ComLevelSelectWithRight = () => (
-  <LevelSelect
-    selected={store.selected.slice()}
-    data={data.slice()}
-    onSelect={(value) => {
-      store.changeSelect(value)
-    }}
-    right
-    style={{ width: '200px' }}
-  />
-)
-
-export const ComMultipleLevelSelect = () => (
-  <MultipleLevelSelect
-    placeholder='多选'
-    selected={store.selected.slice()}
-    data={data.slice()}
-    onSelect={(value) => {
-      store.changeSelect(value)
-    }}
-    style={{ width: '400px' }}
-  />
-)
-
-export default {
-  title: '表单/LevelSelect',
-}
+import React from 'react'
+import LevelSelect from './level_select'
+import MultipleLevelSelect from './multiple_level_select'
+import { observable } from 'mobx'
+
+const data = [
+  {
+    value: 'A',
+    text: '广州越秀越秀越秀越秀越秀越秀越秀越秀越秀越秀越秀越秀越秀越秀越秀',
+    children: [
+      {
+        value: '1',
+        text: '越秀越秀越秀越秀越秀越秀越秀越秀越秀越秀越秀越秀越秀越秀越秀',
+      },
+      { value: '2', text: '荔湾' },
+      { value: '3', text: '天河' },
+      { value: '4', text: '海珠' },
+      { value: '5', text: '白云' },
+      { value: '6', text: '黄埔' },
+      { value: '7', text: '番禺' },
+      { value: '8', text: '南沙' },
+      { value: '9', text: '花都' },
+      { value: '10', text: '增城' },
+      { value: '11', text: '从化' },
+    ],
+  },
+  {
+    value: 'B',
+    text: '深圳',
+    children: [
+      { value: '1', text: '福田' },
+      { value: '2', text: '罗湖' },
+      { value: '3', text: '南山' },
+      { value: '4', text: '盐田' },
+      { value: '5', text: '宝安' },
+      { value: '6', text: '龙岗' },
+      { value: '7', text: '龙华' },
+      { value: '8', text: '坪山' },
+      { value: '9', text: '光明' },
+      { value: '10', text: '大鹏' },
+    ],
+  },
+]
+
+const store = observable({
+  selected: [],
+  changeSelect(value: any) {
+    console.log(value)
+    this.selected = value
+  },
+})
+
+export const ComLevelSelect = () => (
+  <LevelSelect
+    selected={store.selected.slice()}
+    data={data.slice()}
+    onSelect={(value) => {
+      store.changeSelect(value)
+    }}
+    style={{ width: '200px' }}
+  />
+)
+
+export const ComLevelSelectWithOnlySelectLeaf = () => (
+  <LevelSelect
+    selected={store.selected.slice()}
+    data={data.slice()}
+    onSelect={(value) => {
+      store.changeSelect(value)
+    }}
+    style={{ width: '200px' }}
+    onlySelectLeaf
+  />
+)
+
+export const ComLevelSelectWithRight = () => (
+  <LevelSelect
+    selected={store.selected.slice()}
+    data={data.slice()}
+    onSelect={(value) => {
+      store.changeSelect(value)
+    }}
+    right
+    style={{ width: '200px' }}
+  />
+)
+
+export const ComMultipleLevelSelect = () => (
+  <MultipleLevelSelect
+    placeholder='多选'
+    selected={store.selected.slice()}
+    data={data.slice()}
+    onSelect={(value) => {
+      store.changeSelect(value)
+    }}
+    style={{ width: '400px' }}
+  />
+)
+
+export default {
+  title: '表单/LevelSelect',
+}

package/src/component/level_select/types.ts

@@ -1,38 +1,38 @@
-import { ReactNode, KeyboardEvent, CSSProperties } from 'react'
-import { TreeDataItem } from '../../types'
-
-type LevelSelectDataItem<V> = TreeDataItem<V>
-
-interface LevelSelectProps<V> {
-  titles?: string[]
-  data?: LevelSelectDataItem<V>[]
-  selected?: V[]
-  onSelect?(selected: V[]): void
-  disabled?: boolean
-  renderSelected?(selected: LevelSelectDataItem<V>[]): ReactNode
-  onlySelectLeaf?: boolean
-  popoverType?: 'focus' | 'realFocus'
-  right?: boolean
-  onKeyDown?(event: KeyboardEvent): void
-  style?: CSSProperties
-  className?: string
-}
-
-interface MultipleLevelSelectProps<V> {
-  data: LevelSelectDataItem<V>[]
-  selected: V[][]
-  onSelect(selected: V[][]): void
-  disabled?: boolean
-  renderSelected?(items: LevelSelectDataItem<V>[]): ReactNode
-  titles?: string[]
-  onlySelectLeaf?: boolean
-  popoverType?: 'focus' | 'realFocus'
-  right?: boolean
-  placeholder?: string
-  onKeyDown?(event: KeyboardEvent): void
-  children?: ReactNode
-  className?: string
-  style?: CSSProperties
-}
-
-export type { LevelSelectDataItem, LevelSelectProps, MultipleLevelSelectProps }
+import { ReactNode, KeyboardEvent, CSSProperties } from 'react'
+import { TreeDataItem } from '../../types'
+
+type LevelSelectDataItem<V> = TreeDataItem<V>
+
+interface LevelSelectProps<V> {
+  titles?: string[]
+  data?: LevelSelectDataItem<V>[]
+  selected?: V[]
+  onSelect?(selected: V[]): void
+  disabled?: boolean
+  renderSelected?(selected: LevelSelectDataItem<V>[]): ReactNode
+  onlySelectLeaf?: boolean
+  popoverType?: 'focus' | 'realFocus'
+  right?: boolean
+  onKeyDown?(event: KeyboardEvent): void
+  style?: CSSProperties
+  className?: string
+}
+
+interface MultipleLevelSelectProps<V> {
+  data: LevelSelectDataItem<V>[]
+  selected: V[][]
+  onSelect(selected: V[][]): void
+  disabled?: boolean
+  renderSelected?(items: LevelSelectDataItem<V>[]): ReactNode
+  titles?: string[]
+  onlySelectLeaf?: boolean
+  popoverType?: 'focus' | 'realFocus'
+  right?: boolean
+  placeholder?: string
+  onKeyDown?(event: KeyboardEvent): void
+  children?: ReactNode
+  className?: string
+  style?: CSSProperties
+}
+
+export type { LevelSelectDataItem, LevelSelectProps, MultipleLevelSelectProps }

package/src/component/level_select/util.ts

@@ -1,20 +1,20 @@
-import _ from 'lodash'
-import { LevelSelectDataItem } from './types'
-
-function getItems<V>(
-  data: LevelSelectDataItem<V>[],
-  selected: V[]
-): LevelSelectDataItem<V>[] {
-  const items: LevelSelectDataItem<V>[] = []
-  selected.forEach((value, index) => {
-    const list = index === 0 ? data : items[index - 1].children
-
-    const match = _.find(list, (item) => item.value === value)
-
-    items.push(match!)
-  })
-
-  return items
-}
-
-export { getItems }
+import _ from 'lodash'
+import { LevelSelectDataItem } from './types'
+
+function getItems<V>(
+  data: LevelSelectDataItem<V>[],
+  selected: V[]
+): LevelSelectDataItem<V>[] {
+  const items: LevelSelectDataItem<V>[] = []
+  selected.forEach((value, index) => {
+    const list = index === 0 ? data : items[index - 1].children
+
+    const match = _.find(list, (item) => item.value === value)
+
+    items.push(match!)
+  })
+
+  return items
+}
+
+export { getItems }