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

package/src/component/level_list/types.ts

@@ -1,36 +1,36 @@
-import { CSSProperties } from 'react'
-import { TreeDataItem } from '../../types'
-
-interface BaseLevelListProps<V> extends LevelListProps<V> {
-  willActiveSelected: V[]
-  onWillActiveSelect(selected: V[]): void
-}
-
-interface LevelListProps<V> {
-  data?: TreeDataItem<V>[]
-  selected?: V[]
-  onSelect?(selected: V[]): void
-  willActiveSelected?: V[]
-  onWillActiveSelect?(selected: V[]): void
-  titles?: string[]
-  onlySelectLeaf?: boolean
-  isReverse?: boolean
-  className?: string
-  style?: CSSProperties
-  /* 内部用，暂时这么处理 */
-  isForFunctionSet?: boolean
-}
-
-interface LevelItemProps<V> {
-  title?: string
-  data?: TreeDataItem<V>[]
-  selected?: V
-  onSelect?(selected: V): void
-  onListItemMouseEnter?(value: TreeDataItem<V>): void
-  willActiveSelected?: V
-  onlySelectLeaf?: boolean
-  className?: string
-  style?: CSSProperties
-}
-
-export type { BaseLevelListProps, LevelListProps, LevelItemProps }
+import { CSSProperties } from 'react'
+import { TreeDataItem } from '../../types'
+
+interface BaseLevelListProps<V> extends LevelListProps<V> {
+  willActiveSelected: V[]
+  onWillActiveSelect(selected: V[]): void
+}
+
+interface LevelListProps<V> {
+  data?: TreeDataItem<V>[]
+  selected?: V[]
+  onSelect?(selected: V[]): void
+  willActiveSelected?: V[]
+  onWillActiveSelect?(selected: V[]): void
+  titles?: string[]
+  onlySelectLeaf?: boolean
+  isReverse?: boolean
+  className?: string
+  style?: CSSProperties
+  /* 内部用，暂时这么处理 */
+  isForFunctionSet?: boolean
+}
+
+interface LevelItemProps<V> {
+  title?: string
+  data?: TreeDataItem<V>[]
+  selected?: V
+  onSelect?(selected: V): void
+  onListItemMouseEnter?(value: TreeDataItem<V>): void
+  willActiveSelected?: V
+  onlySelectLeaf?: boolean
+  className?: string
+  style?: CSSProperties
+}
+
+export type { BaseLevelListProps, LevelListProps, LevelItemProps }

package/src/component/level_list/utils.ts

@@ -1,19 +1,19 @@
-/**
- * 将树状数据平铺成多个数组，方便展示数据浮层
- */
-import { TreeDataItem } from '../../types'
-
-function getLevel<V>(data: TreeDataItem<V>[], selected: V[]): TreeDataItem<V>[][] {
-  const result = [data]
-  selected.forEach((item, index) => {
-    const match = result[index].find((v) => v.value === item)
-    if (match) {
-      if (match.children) {
-        result.push(match.children)
-      }
-    }
-  })
-  return result
-}
-
-export { getLevel }
+/**
+ * 将树状数据平铺成多个数组，方便展示数据浮层
+ */
+import { TreeDataItem } from '../../types'
+
+function getLevel<V>(data: TreeDataItem<V>[], selected: V[]): TreeDataItem<V>[][] {
+  const result = [data]
+  selected.forEach((item, index) => {
+    const match = result[index].find((v) => v.value === item)
+    if (match) {
+      if (match.children) {
+        result.push(match.children)
+      }
+    }
+  })
+  return result
+}
+
+export { getLevel }

package/src/component/level_select/index.ts

@@ -1,7 +1,7 @@
-export { default as LevelSelect } from './level_select'
-export { default as MultipleLevelSelect } from './multiple_level_select'
-export type {
-  LevelSelectProps,
-  LevelSelectDataItem,
-  MultipleLevelSelectProps,
-} from './types'
+export { default as LevelSelect } from './level_select'
+export { default as MultipleLevelSelect } from './multiple_level_select'
+export type {
+  LevelSelectProps,
+  LevelSelectDataItem,
+  MultipleLevelSelectProps,
+} from './types'

package/src/component/level_select/level_select.tsx

@@ -1,216 +1,216 @@
-import React, { Component, createRef, ReactNode, KeyboardEvent } from 'react'
-import { LevelSelectDataItem, LevelSelectProps } from './types'
-import { Selection } from '../selection'
-import { Popover } from '../popover'
-import { Flex } from '../flex'
-import { LevelList } from '../level_list'
-import { getLevel } from '../level_list/utils'
-import _ from 'lodash'
-import { judgeFunction } from '../../common/utils'
-import { ConfigConsumer, ConfigProvider, ConfigProviderProps } from '../config_provider'
-
-interface LevelSelectState<V> {
-  willActiveSelected: V[]
-}
-
-class LevelSelect<V = any> extends Component<LevelSelectProps<V>, LevelSelectState<V>> {
-  static defaultProps = {
-    renderSelected: (item: any) => item.map((v: any) => v.text).join(','),
-    onKeyDown: _.noop,
-    popoverType: 'focus',
-    selected: [],
-    onSelect: _.noop,
-  }
-
-  readonly state: LevelSelectState<V> = {
-    willActiveSelected: this.props.selected,
-  }
-
-  private _selectionRef = createRef<Selection>()
-  private _popoverRef = createRef<Popover>()
-
-  public apiDoFocus = (): void => {
-    this._selectionRef.current!.apiDoFocus()
-  }
-
-  public apiDoSelectWillActive = (): void => {
-    const { onSelect } = this.props
-    const { willActiveSelected } = this.state
-    judgeFunction(onSelect, willActiveSelected)
-  }
-
-  private _handleSelect = (selected: V[]): void => {
-    const { onSelect } = this.props
-    this._popoverRef.current!.apiDoSetActive(false)
-    judgeFunction(onSelect, selected)
-  }
-
-  private _handleWillActiveSelect = (willActiveSelected: V[]): void => {
-    this.setState({ willActiveSelected })
-  }
-
-  private _renderPopup = (config: ConfigProviderProps): ReactNode => {
-    const { titles, data, selected, right, onlySelectLeaf } = this.props
-    const { willActiveSelected } = this.state
-    return (
-      <ConfigProvider {...config}>
-        <Flex justifyEnd={right}>
-          <LevelList<V>
-            isReverse={right}
-            data={data}
-            onWillActiveSelect={this._handleWillActiveSelect}
-            willActiveSelected={willActiveSelected}
-            selected={selected}
-            onSelect={this._handleSelect}
-            titles={titles}
-            onlySelectLeaf={onlySelectLeaf}
-          />
-        </Flex>
-      </ConfigProvider>
-    )
-  }
-
-  private _handleSelectionSelect = (selected: V[] | null): void => {
-    const { onSelect } = this.props
-    judgeFunction(onSelect, selected === null ? [] : selected)
-  }
-
-  private _getSelectItemText = (): ReactNode => {
-    const { renderSelected } = this.props
-    const selectedItems = this._getSelectedItem()
-    return renderSelected!(selectedItems)
-  }
-
-  private _getSelectedItem = (): LevelSelectDataItem<V>[] => {
-    const { data, selected = [] } = this.props
-    const items: LevelSelectDataItem<V>[] = []
-    selected.forEach((value, index) => {
-      const match = (index === 0 ? data : items[index - 1].children)!.find(
-        (item) => item.value === value
-      )
-      items.push(match!)
-    })
-    return items
-  }
-
-  private _handleKeyDown = (event: KeyboardEvent): void => {
-    const { data = [], onKeyDown } = this.props
-    const { willActiveSelected } = this.state
-
-    // 不是方向键，不用拦截
-    if (
-      event.key !== 'ArrowDown' &&
-      event.key !== 'ArrowUp' &&
-      event.key !== 'ArrowLeft' &&
-      event.key !== 'ArrowRight'
-    ) {
-      onKeyDown!(event)
-      return
-    }
-
-    // 没有数据，不拦截
-    if (data.length === 0) {
-      onKeyDown!(event)
-      return
-    }
-
-    // 避免引用
-    let newWill = willActiveSelected.slice()
-    const level = getLevel(data, willActiveSelected)
-
-    // 如果没法左和右了，则不拦截，抛出去
-    if (
-      (event.key === 'ArrowLeft' && newWill.length === 0) ||
-      (event.key === 'ArrowRight' && newWill.length >= level.length)
-    ) {
-      onKeyDown!(event)
-      return
-    }
-
-    // 以下要拦截拉
-
-    // 阻止默认行为
-    event.preventDefault()
-
-    if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
-      // 如果没有选择，则默认到第一个
-      if (newWill.length === 0) {
-        newWill = [level[0][0].value]
-      } else {
-        const arr = level[newWill.length - 1]
-        let index = _.findIndex(arr, (v) => v.value === newWill[newWill.length - 1])
-
-        if (event.key === 'ArrowDown') {
-          index++
-        } else {
-          index--
-        }
-
-        // fix index
-        if (index > arr.length - 1) {
-          index = 0
-        } else if (index < 0) {
-          index = arr.length - 1
-        }
-
-        newWill[newWill.length - 1] = arr[index].value
-      }
-    } else if (event.key === 'ArrowLeft') {
-      newWill.pop()
-    } else if (event.key === 'ArrowRight') {
-      newWill.push(level[newWill.length][0].value)
-    }
-
-    this.setState({
-      willActiveSelected: newWill,
-    })
-  }
-
-  private _renderTarget = (): ReactNode => {
-    const {
-      titles = [],
-      data = [],
-      selected = [],
-      disabled,
-      popoverType,
-      right,
-      onlySelectLeaf,
-      ...rest
-    } = this.props
-
-    // 注意转换 selected onSelect renderSelected
-    return (
-      <Selection
-        {...rest}
-        ref={this._selectionRef}
-        selected={!selected.length ? null : selected}
-        onSelect={this._handleSelectionSelect}
-        renderSelected={() => this._getSelectItemText()}
-        onKeyDown={this._handleKeyDown}
-        disabled={disabled}
-      />
-    )
-  }
-
-  render() {
-    const { disabled, children, popoverType, right } = this.props
-    return (
-      <ConfigConsumer>
-        {(config) => (
-          <Popover
-            ref={this._popoverRef}
-            right={right}
-            disabled={disabled}
-            popup={this._renderPopup(config)}
-            type={popoverType}
-            pureContainer
-          >
-            {children ?? this._renderTarget()}
-          </Popover>
-        )}
-      </ConfigConsumer>
-    )
-  }
-}
-
-export default LevelSelect
+import React, { Component, createRef, ReactNode, KeyboardEvent } from 'react'
+import { LevelSelectDataItem, LevelSelectProps } from './types'
+import { Selection } from '../selection'
+import { Popover } from '../popover'
+import { Flex } from '../flex'
+import { LevelList } from '../level_list'
+import { getLevel } from '../level_list/utils'
+import _ from 'lodash'
+import { judgeFunction } from '../../common/utils'
+import { ConfigConsumer, ConfigProvider, ConfigProviderProps } from '../config_provider'
+
+interface LevelSelectState<V> {
+  willActiveSelected: V[]
+}
+
+class LevelSelect<V = any> extends Component<LevelSelectProps<V>, LevelSelectState<V>> {
+  static defaultProps = {
+    renderSelected: (item: any) => item.map((v: any) => v.text).join(','),
+    onKeyDown: _.noop,
+    popoverType: 'focus',
+    selected: [],
+    onSelect: _.noop,
+  }
+
+  readonly state: LevelSelectState<V> = {
+    willActiveSelected: this.props.selected,
+  }
+
+  private _selectionRef = createRef<Selection>()
+  private _popoverRef = createRef<Popover>()
+
+  public apiDoFocus = (): void => {
+    this._selectionRef.current!.apiDoFocus()
+  }
+
+  public apiDoSelectWillActive = (): void => {
+    const { onSelect } = this.props
+    const { willActiveSelected } = this.state
+    judgeFunction(onSelect, willActiveSelected)
+  }
+
+  private _handleSelect = (selected: V[]): void => {
+    const { onSelect } = this.props
+    this._popoverRef.current!.apiDoSetActive(false)
+    judgeFunction(onSelect, selected)
+  }
+
+  private _handleWillActiveSelect = (willActiveSelected: V[]): void => {
+    this.setState({ willActiveSelected })
+  }
+
+  private _renderPopup = (config: ConfigProviderProps): ReactNode => {
+    const { titles, data, selected, right, onlySelectLeaf } = this.props
+    const { willActiveSelected } = this.state
+    return (
+      <ConfigProvider {...config}>
+        <Flex justifyEnd={right}>
+          <LevelList<V>
+            isReverse={right}
+            data={data}
+            onWillActiveSelect={this._handleWillActiveSelect}
+            willActiveSelected={willActiveSelected}
+            selected={selected}
+            onSelect={this._handleSelect}
+            titles={titles}
+            onlySelectLeaf={onlySelectLeaf}
+          />
+        </Flex>
+      </ConfigProvider>
+    )
+  }
+
+  private _handleSelectionSelect = (selected: V[] | null): void => {
+    const { onSelect } = this.props
+    judgeFunction(onSelect, selected === null ? [] : selected)
+  }
+
+  private _getSelectItemText = (): ReactNode => {
+    const { renderSelected } = this.props
+    const selectedItems = this._getSelectedItem()
+    return renderSelected!(selectedItems)
+  }
+
+  private _getSelectedItem = (): LevelSelectDataItem<V>[] => {
+    const { data, selected = [] } = this.props
+    const items: LevelSelectDataItem<V>[] = []
+    selected.forEach((value, index) => {
+      const match = (index === 0 ? data : items[index - 1].children)!.find(
+        (item) => item.value === value
+      )
+      items.push(match!)
+    })
+    return items
+  }
+
+  private _handleKeyDown = (event: KeyboardEvent): void => {
+    const { data = [], onKeyDown } = this.props
+    const { willActiveSelected } = this.state
+
+    // 不是方向键，不用拦截
+    if (
+      event.key !== 'ArrowDown' &&
+      event.key !== 'ArrowUp' &&
+      event.key !== 'ArrowLeft' &&
+      event.key !== 'ArrowRight'
+    ) {
+      onKeyDown!(event)
+      return
+    }
+
+    // 没有数据，不拦截
+    if (data.length === 0) {
+      onKeyDown!(event)
+      return
+    }
+
+    // 避免引用
+    let newWill = willActiveSelected.slice()
+    const level = getLevel(data, willActiveSelected)
+
+    // 如果没法左和右了，则不拦截，抛出去
+    if (
+      (event.key === 'ArrowLeft' && newWill.length === 0) ||
+      (event.key === 'ArrowRight' && newWill.length >= level.length)
+    ) {
+      onKeyDown!(event)
+      return
+    }
+
+    // 以下要拦截拉
+
+    // 阻止默认行为
+    event.preventDefault()
+
+    if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+      // 如果没有选择，则默认到第一个
+      if (newWill.length === 0) {
+        newWill = [level[0][0].value]
+      } else {
+        const arr = level[newWill.length - 1]
+        let index = _.findIndex(arr, (v) => v.value === newWill[newWill.length - 1])
+
+        if (event.key === 'ArrowDown') {
+          index++
+        } else {
+          index--
+        }
+
+        // fix index
+        if (index > arr.length - 1) {
+          index = 0
+        } else if (index < 0) {
+          index = arr.length - 1
+        }
+
+        newWill[newWill.length - 1] = arr[index].value
+      }
+    } else if (event.key === 'ArrowLeft') {
+      newWill.pop()
+    } else if (event.key === 'ArrowRight') {
+      newWill.push(level[newWill.length][0].value)
+    }
+
+    this.setState({
+      willActiveSelected: newWill,
+    })
+  }
+
+  private _renderTarget = (): ReactNode => {
+    const {
+      titles = [],
+      data = [],
+      selected = [],
+      disabled,
+      popoverType,
+      right,
+      onlySelectLeaf,
+      ...rest
+    } = this.props
+
+    // 注意转换 selected onSelect renderSelected
+    return (
+      <Selection
+        {...rest}
+        ref={this._selectionRef}
+        selected={!selected.length ? null : selected}
+        onSelect={this._handleSelectionSelect}
+        renderSelected={() => this._getSelectItemText()}
+        onKeyDown={this._handleKeyDown}
+        disabled={disabled}
+      />
+    )
+  }
+
+  render() {
+    const { disabled, children, popoverType, right } = this.props
+    return (
+      <ConfigConsumer>
+        {(config) => (
+          <Popover
+            ref={this._popoverRef}
+            right={right}
+            disabled={disabled}
+            popup={this._renderPopup(config)}
+            type={popoverType}
+            pureContainer
+          >
+            {children ?? this._renderTarget()}
+          </Popover>
+        )}
+      </ConfigConsumer>
+    )
+  }
+}
+
+export default LevelSelect