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

package/src/component/more_select/style.less

@@ -1,72 +1,72 @@
-.gm-more-select {
-  .gm-more-select-selected {
-    cursor: pointer;
-    vertical-align: middle;
-    position: relative;
-    border: 1px solid var(--gm-color-border);
-    background-color: white;
-    min-height: 30px;
-    padding: 6px 20px 6px 10px;
-    border-radius: var(--gm-size-border-radius);
-
-    &.gm-popover-active {
-      border-color: var(--gm-color-primary);
-    }
-  }
-
-  .gm-more-select-clear-btn {
-    position: absolute;
-    right: 5px;
-    top: 7px;
-    cursor: pointer;
-    color: var(--gm-color-desc);
-  }
-
-  &.disabled {
-    .gmDisabledBg();
-
-    .gm-more-select-selected {
-      .gmDisabledBg();
-    }
-
-    input {
-      cursor: not-allowed;
-    }
-
-    .gm-more-select-clear-btn {
-      cursor: not-allowed;
-    }
-  }
-
-  &.gm-more-select-multiple {
-    .gm-more-select-selected-item {
-      position: relative;
-      padding: 0 16px 0 5px;
-      background-color: var(--gm-color-bg-primary-more-light);
-      margin-right: 5px;
-      border-radius: 4px;
-
-      .gm-more-select-clear-btn {
-        top: 2px;
-        right: 0;
-      }
-    }
-  }
-}
-
-.gm-more-select-popup {
-  background: white;
-
-  .gm-more-select-popup-input {
-    padding: 5px 10px;
-
-    input {
-      padding: 0 5px;
-      height: 28px;
-      box-shadow: none;
-      min-width: 50px;
-      width: 100%;
-      outline: none;
-    }
-  }
-}
+.gm-more-select {
+  .gm-more-select-selected {
+    cursor: pointer;
+    vertical-align: middle;
+    position: relative;
+    border: 1px solid var(--gm-color-border);
+    background-color: white;
+    min-height: 30px;
+    padding: 6px 20px 6px 10px;
+    border-radius: var(--gm-size-border-radius);
+
+    &.gm-popover-active {
+      border-color: var(--gm-color-primary);
+    }
+  }
+
+  .gm-more-select-clear-btn {
+    position: absolute;
+    right: 5px;
+    top: 7px;
+    cursor: pointer;
+    color: var(--gm-color-desc);
+  }
+
+  &.disabled {
+    .gmDisabledBg();
+
+    .gm-more-select-selected {
+      .gmDisabledBg();
+    }
+
+    input {
+      cursor: not-allowed;
+    }
+
+    .gm-more-select-clear-btn {
+      cursor: not-allowed;
+    }
+  }
+
+  &.gm-more-select-multiple {
+    .gm-more-select-selected-item {
+      position: relative;
+      padding: 0 16px 0 5px;
+      background-color: var(--gm-color-bg-primary-more-light);
+      margin-right: 5px;
+      border-radius: 4px;
+
+      .gm-more-select-clear-btn {
+        top: 2px;
+        right: 0;
+      }
+    }
+  }
+}
+
+.gm-more-select-popup {
+  background: white;
+
+  .gm-more-select-popup-input {
+    padding: 5px 10px;
+
+    input {
+      padding: 0 5px;
+      height: 28px;
+      box-shadow: none;
+      min-width: 50px;
+      width: 100%;
+      outline: none;
+    }
+  }
+}

package/src/component/more_select/types.ts

@@ -1,114 +1,114 @@
-import { Popover } from '@gm-pc/react'
-import { CSSProperties, ReactNode, KeyboardEvent } from 'react'
-
-/** 普通的数据格式 */
-interface MoreSelectDataItem<V extends string | number = string> {
-  value: V
-  text: string
-  disabled?: boolean
-  [key: string]: any
-}
-
-/** 分组的数据格式 */
-interface MoreSelectGroupDataItem<V extends string | number = string> {
-  label: string | ReactNode
-  children: MoreSelectDataItem<V>[]
-}
-
-interface MoreSelectCommonProps<V extends string | number = string> {
-  multiple?: boolean
-
-  disabled?: boolean
-  /** 单选禁止显示关闭按钮 */
-  disabledClose?: boolean
-
-  delay?: number
-  searchPlaceholder?: string
-
-  /** 过滤方式 */
-  renderListFilterType?: 'default' | 'pinyin'
-
-  placeholder?: string
-
-  /** 自定义渲染已选择项 */
-  renderSelected?(selected: MoreSelectDataItem<V>): ReactNode
-  /** 自定义渲染列表项 */
-  renderListItem?(value: MoreSelectDataItem<V>, index: number): ReactNode
-
-  /** 自定义popup底部渲染 */
-  renderCustomizedBottom?(ref: React.RefObject<Popover>): ReactNode
-
-  /**
-   * 自定义“空状态”渲染
-   *
-   * 若函数返回 undefined 则使用默认的空状态
-   */
-  renderEmpty?(searchValue?: string): ReactNode
-
-  listHeight?: string
-  isGroupList?: boolean
-  popoverType?: 'focus' | 'realFocus'
-
-  isInPopup?: boolean
-
-  popupClassName?: string
-
-  className?: string
-  style?: CSSProperties
-  children?: ReactNode
-
-  /** 目前为了 keyboard */
-  isKeyboard?: boolean
-  onKeyDown?(event: KeyboardEvent): void
-}
-
-interface MoreSelectBaseProps<V extends string | number = string>
-  extends MoreSelectCommonProps<V> {
-  data: MoreSelectGroupDataItem<V>[]
-  selected: MoreSelectDataItem<V>[]
-  onSelect(selected: MoreSelectDataItem<V>[]): void
-
-  /** 搜索回调 */
-  onSearch?(searchWord: string, data: MoreSelectGroupDataItem<V>[]): Promise<void> | void
-  /** 点击回调 */
-  onClick?(selected: MoreSelectSelected<V>[]): void
-
-  /** 自定义搜索过滤展示的数据 */
-  renderListFilter?(
-    data: MoreSelectGroupDataItem<V>[],
-    searchValue: string
-  ): MoreSelectGroupDataItem<V>[]
-  /** 是否在active的时候搜索，订单业务相关，searchValue放在localstorage */
-  searchOnActive?: boolean
-}
-
-type MoreSelectData<V extends string | number = string> =
-  | MoreSelectDataItem<V>[]
-  | MoreSelectGroupDataItem<V>[]
-type MoreSelectSelected<V extends string | number = string> =
-  | MoreSelectDataItem<V>[]
-  | MoreSelectDataItem<V>
-
-interface MoreSelectProps<V extends string | number = string>
-  extends MoreSelectCommonProps<V>,
-    Pick<MoreSelectBaseProps, 'searchOnActive'> {
-  data?: MoreSelectData<V>
-  selected?: MoreSelectSelected<V>
-  value?: V | V[]
-  onSelect?(selected?: MoreSelectSelected<V>): void
-  onChange?(value: V | V[]): void
-  /** 搜索回调 */
-  onSearch?(searchWord: string, data: MoreSelectData<V>): Promise<void> | void
-  /** 点击回调 */
-  onClick?(selected: MoreSelectSelected<V>[]): void
-
-  /** 自定义搜索过滤展示的数据 */
-  renderListFilter?(data: MoreSelectData<V>, searchValue: string): MoreSelectData<V>
-}
-
-export type {
-  MoreSelectGroupDataItem,
-  MoreSelectDataItem,
-  MoreSelectBaseProps,
-  MoreSelectProps,
-}
+import { Popover } from '@gm-pc/react'
+import { CSSProperties, ReactNode, KeyboardEvent } from 'react'
+
+/** 普通的数据格式 */
+interface MoreSelectDataItem<V extends string | number = string> {
+  value: V
+  text: string
+  disabled?: boolean
+  [key: string]: any
+}
+
+/** 分组的数据格式 */
+interface MoreSelectGroupDataItem<V extends string | number = string> {
+  label: string | ReactNode
+  children: MoreSelectDataItem<V>[]
+}
+
+interface MoreSelectCommonProps<V extends string | number = string> {
+  multiple?: boolean
+
+  disabled?: boolean
+  /** 单选禁止显示关闭按钮 */
+  disabledClose?: boolean
+
+  delay?: number
+  searchPlaceholder?: string
+
+  /** 过滤方式 */
+  renderListFilterType?: 'default' | 'pinyin'
+
+  placeholder?: string
+
+  /** 自定义渲染已选择项 */
+  renderSelected?(selected: MoreSelectDataItem<V>): ReactNode
+  /** 自定义渲染列表项 */
+  renderListItem?(value: MoreSelectDataItem<V>, index: number): ReactNode
+
+  /** 自定义popup底部渲染 */
+  renderCustomizedBottom?(ref: React.RefObject<Popover>): ReactNode
+
+  /**
+   * 自定义“空状态”渲染
+   *
+   * 若函数返回 undefined 则使用默认的空状态
+   */
+  renderEmpty?(searchValue?: string): ReactNode
+
+  listHeight?: string
+  isGroupList?: boolean
+  popoverType?: 'focus' | 'realFocus'
+
+  isInPopup?: boolean
+
+  popupClassName?: string
+
+  className?: string
+  style?: CSSProperties
+  children?: ReactNode
+
+  /** 目前为了 keyboard */
+  isKeyboard?: boolean
+  onKeyDown?(event: KeyboardEvent): void
+}
+
+interface MoreSelectBaseProps<V extends string | number = string>
+  extends MoreSelectCommonProps<V> {
+  data: MoreSelectGroupDataItem<V>[]
+  selected: MoreSelectDataItem<V>[]
+  onSelect(selected: MoreSelectDataItem<V>[]): void
+
+  /** 搜索回调 */
+  onSearch?(searchWord: string, data: MoreSelectGroupDataItem<V>[]): Promise<void> | void
+  /** 点击回调 */
+  onClick?(selected: MoreSelectSelected<V>[]): void
+
+  /** 自定义搜索过滤展示的数据 */
+  renderListFilter?(
+    data: MoreSelectGroupDataItem<V>[],
+    searchValue: string
+  ): MoreSelectGroupDataItem<V>[]
+  /** 是否在active的时候搜索，订单业务相关，searchValue放在localstorage */
+  searchOnActive?: boolean
+}
+
+type MoreSelectData<V extends string | number = string> =
+  | MoreSelectDataItem<V>[]
+  | MoreSelectGroupDataItem<V>[]
+type MoreSelectSelected<V extends string | number = string> =
+  | MoreSelectDataItem<V>[]
+  | MoreSelectDataItem<V>
+
+interface MoreSelectProps<V extends string | number = string>
+  extends MoreSelectCommonProps<V>,
+    Pick<MoreSelectBaseProps, 'searchOnActive'> {
+  data?: MoreSelectData<V>
+  selected?: MoreSelectSelected<V>
+  value?: V | V[]
+  onSelect?(selected?: MoreSelectSelected<V>): void
+  onChange?(value: V | V[]): void
+  /** 搜索回调 */
+  onSearch?(searchWord: string, data: MoreSelectData<V>): Promise<void> | void
+  /** 点击回调 */
+  onClick?(selected: MoreSelectSelected<V>[]): void
+
+  /** 自定义搜索过滤展示的数据 */
+  renderListFilter?(data: MoreSelectData<V>, searchValue: string): MoreSelectData<V>
+}
+
+export type {
+  MoreSelectGroupDataItem,
+  MoreSelectDataItem,
+  MoreSelectBaseProps,
+  MoreSelectProps,
+}

package/src/component/multiple_selection/index.ts

@@ -1,2 +1,2 @@
-export { default as MultipleSelection } from './multiple_selection'
-export type { MultipleSelectionProps } from './multiple_selection'
+export { default as MultipleSelection } from './multiple_selection'
+export type { MultipleSelectionProps } from './multiple_selection'

package/src/component/multiple_selection/multiple_selection.tsx

@@ -1,118 +1,118 @@
-import React, {
-  cloneElement,
-  MouseEvent,
-  ReactElement,
-  ReactNode,
-  CSSProperties,
-} from 'react'
-import _ from 'lodash'
-import classNames from 'classnames'
-import SVGRemove from '../../svg/remove.svg'
-import { IconDownUp } from '../icon_down_up'
-import { Flex } from '../flex'
-
-interface MultipleSelectionSelectedItem<V> {
-  value: V
-  text: string
-  [key: string]: any
-}
-
-interface MultipleSelectionProps<V> {
-  selected: MultipleSelectionSelectedItem<V>[]
-  onSelect(selected: MultipleSelectionSelectedItem<V>[]): void
-
-  placeholder?: string
-
-  /** 自定义 selected */
-  renderSelected?(item: MultipleSelectionSelectedItem<V>): ReactNode
-  /** 代替默认的 Icon */
-  funIcon?: ReactNode
-  /** 禁用清除 */
-  disabledClose?: boolean
-
-  className?: string
-  style?: CSSProperties
-}
-
-function MultipleSelection<V = any>({
-  selected,
-  onSelect,
-  placeholder,
-  renderSelected = (value: any) => value.text,
-  funIcon,
-  disabledClose,
-  className,
-  style,
-  ...rest
-}: MultipleSelectionProps<V>) {
-  const handleClear = (e: MouseEvent<HTMLDivElement>): void => {
-    e.preventDefault()
-    e.stopPropagation()
-
-    onSelect([])
-  }
-
-  const handleClose = (item: MultipleSelectionSelectedItem<V>) => {
-    onSelect(_.xorBy(selected, [item], (v) => v.value))
-  }
-
-  return (
-    <div
-      {...rest}
-      className={classNames(
-        'gm-multiple-selection',
-        {
-          'gm-multiple-selection-disabled-close': disabledClose,
-        },
-        className
-      )}
-      style={style}
-    >
-      <Flex alignCenter wrap className='gm-multiple-selection-selected'>
-        {selected.length === 0 && <span className='gm-text-desc'>{placeholder}</span>}
-        {_.map(selected, (item: MultipleSelectionSelectedItem<V>, i) => (
-          <div key={i} className='gm-multiple-selection-item'>
-            {renderSelected(item)}
-            <SVGRemove
-              onClick={() => {
-                handleClose(item)
-              }}
-              className='gm-multiple-selection-item-close'
-            />
-          </div>
-        ))}
-      </Flex>
-
-      {selected && !disabledClose && (
-        <div onClick={handleClear}>
-          <SVGRemove className='gm-multiple-selection-icon gm-multiple-selection-close-icon' />
-        </div>
-      )}
-      {funIcon ? (
-        cloneElement(funIcon as ReactElement, {
-          className: classNames(
-            'gm-multiple-selection-icon',
-            {
-              'gm-multiple-selection-fun-icon': selected && !disabledClose,
-            },
-            (funIcon as ReactElement).props?.className
-          ),
-        })
-      ) : (
-        <IconDownUp
-          active={(className ?? '').includes('gm-popover-active')}
-          className={classNames(
-            'gm-multiple-selection-icon',
-            'gm-multiple-selection-down-up',
-            {
-              'gm-multiple-selection-fun-icon': selected && !disabledClose,
-            }
-          )}
-        />
-      )}
-    </div>
-  )
-}
-
-export default MultipleSelection
-export type { MultipleSelectionProps, MultipleSelectionSelectedItem }
+import React, {
+  cloneElement,
+  MouseEvent,
+  ReactElement,
+  ReactNode,
+  CSSProperties,
+} from 'react'
+import _ from 'lodash'
+import classNames from 'classnames'
+import SVGRemove from '../../svg/remove.svg'
+import { IconDownUp } from '../icon_down_up'
+import { Flex } from '../flex'
+
+interface MultipleSelectionSelectedItem<V> {
+  value: V
+  text: string
+  [key: string]: any
+}
+
+interface MultipleSelectionProps<V> {
+  selected: MultipleSelectionSelectedItem<V>[]
+  onSelect(selected: MultipleSelectionSelectedItem<V>[]): void
+
+  placeholder?: string
+
+  /** 自定义 selected */
+  renderSelected?(item: MultipleSelectionSelectedItem<V>): ReactNode
+  /** 代替默认的 Icon */
+  funIcon?: ReactNode
+  /** 禁用清除 */
+  disabledClose?: boolean
+
+  className?: string
+  style?: CSSProperties
+}
+
+function MultipleSelection<V = any>({
+  selected,
+  onSelect,
+  placeholder,
+  renderSelected = (value: any) => value.text,
+  funIcon,
+  disabledClose,
+  className,
+  style,
+  ...rest
+}: MultipleSelectionProps<V>) {
+  const handleClear = (e: MouseEvent<HTMLDivElement>): void => {
+    e.preventDefault()
+    e.stopPropagation()
+
+    onSelect([])
+  }
+
+  const handleClose = (item: MultipleSelectionSelectedItem<V>) => {
+    onSelect(_.xorBy(selected, [item], (v) => v.value))
+  }
+
+  return (
+    <div
+      {...rest}
+      className={classNames(
+        'gm-multiple-selection',
+        {
+          'gm-multiple-selection-disabled-close': disabledClose,
+        },
+        className
+      )}
+      style={style}
+    >
+      <Flex alignCenter wrap className='gm-multiple-selection-selected'>
+        {selected.length === 0 && <span className='gm-text-desc'>{placeholder}</span>}
+        {_.map(selected, (item: MultipleSelectionSelectedItem<V>, i) => (
+          <div key={i} className='gm-multiple-selection-item'>
+            {renderSelected(item)}
+            <SVGRemove
+              onClick={() => {
+                handleClose(item)
+              }}
+              className='gm-multiple-selection-item-close'
+            />
+          </div>
+        ))}
+      </Flex>
+
+      {selected && !disabledClose && (
+        <div onClick={handleClear}>
+          <SVGRemove className='gm-multiple-selection-icon gm-multiple-selection-close-icon' />
+        </div>
+      )}
+      {funIcon ? (
+        cloneElement(funIcon as ReactElement, {
+          className: classNames(
+            'gm-multiple-selection-icon',
+            {
+              'gm-multiple-selection-fun-icon': selected && !disabledClose,
+            },
+            (funIcon as ReactElement).props?.className
+          ),
+        })
+      ) : (
+        <IconDownUp
+          active={(className ?? '').includes('gm-popover-active')}
+          className={classNames(
+            'gm-multiple-selection-icon',
+            'gm-multiple-selection-down-up',
+            {
+              'gm-multiple-selection-fun-icon': selected && !disabledClose,
+            }
+          )}
+        />
+      )}
+    </div>
+  )
+}
+
+export default MultipleSelection
+export type { MultipleSelectionProps, MultipleSelectionSelectedItem }