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

package/src/component/select/stories.tsx

@@ -1,140 +1,140 @@
-import React from 'react'
-import Select from './select'
-import { observable } from 'mobx'
-import Flex from '../flex/flex'
-
-const list = [
-  {
-    value: 1,
-    text: '南山',
-  },
-  {
-    value: 2,
-    text: '福田',
-  },
-  {
-    value: 3,
-    text: '宝安',
-  },
-  {
-    value: 4,
-    text: '宝安不可用',
-    disabled: true,
-  },
-  {
-    value: 5,
-    text: '罗湖',
-  },
-]
-
-const store = observable({
-  value: 0,
-  setValue(value: number) {
-    console.log(value)
-    this.value = value
-  },
-})
-
-export const ComSelect = () => (
-  <div>
-    <div>
-      <h3>基础</h3>
-      <Select
-        data={list}
-        value={store.value}
-        onChange={(value) => {
-          console.log({ value })
-          return store.setValue(value!)
-        }}
-      />
-    </div>
-    <Flex>
-      <div>
-        <h3>选择全部</h3>
-        <Select
-          data={list}
-          all
-          placeholder='select'
-          value={store.value}
-          onChange={(value) => {
-            console.log({ value })
-            return store.setValue(value!)
-          }}
-        />
-      </div>
-      <div className='gm-margin-left-10'>
-        <h3>自定义全部文案</h3>
-        <Select
-          data={list}
-          all={{ text: '😊全部地址😊' }}
-          value={store.value}
-          onChange={(value) => {
-            console.log({ value })
-            return store.setValue(value!)
-          }}
-        />
-      </div>
-      <div className='gm-margin-left-10'>
-        <h3>自定义全部值</h3>
-        <Select
-          data={list}
-          all={{ text: '😊全部地址😊', value: undefined }}
-          value={store.value}
-          onChange={(value) => {
-            return store.setValue(value!)
-          }}
-        />
-      </div>
-    </Flex>
-    <div>
-      <h3>disabled</h3>
-      <Select
-        data={list}
-        all
-        value={store.value}
-        onChange={(value) => {
-          store.setValue(value!)
-        }}
-        disabled
-      />
-    </div>
-    <h3>clean</h3>
-    <Select
-      clean
-      all
-      data={list}
-      value={store.value}
-      onChange={(value) => {
-        store.setValue(value!)
-      }}
-    />
-    <h3>renderItem</h3>
-    <Select
-      data={list}
-      value={store.value}
-      onChange={(value) => {
-        console.log({ value })
-        return store.setValue(value!)
-      }}
-      renderItem={(item) => {
-        return `${item.value}_${item.text}`
-      }}
-    />
-    <h3>renderSelected</h3>
-    <Select
-      data={list}
-      value={store.value}
-      onChange={(value) => {
-        console.log({ value })
-        return store.setValue(value!)
-      }}
-      renderSelected={(item) => {
-        return `${item.value}_${item.text}`
-      }}
-    />
-  </div>
-)
-
-export default {
-  title: '表单/Select',
-}
+import React from 'react'
+import Select from './select'
+import { observable } from 'mobx'
+import Flex from '../flex/flex'
+
+const list = [
+  {
+    value: 1,
+    text: '南山',
+  },
+  {
+    value: 2,
+    text: '福田',
+  },
+  {
+    value: 3,
+    text: '宝安',
+  },
+  {
+    value: 4,
+    text: '宝安不可用',
+    disabled: true,
+  },
+  {
+    value: 5,
+    text: '罗湖',
+  },
+]
+
+const store = observable({
+  value: 0,
+  setValue(value: number) {
+    console.log(value)
+    this.value = value
+  },
+})
+
+export const ComSelect = () => (
+  <div>
+    <div>
+      <h3>基础</h3>
+      <Select
+        data={list}
+        value={store.value}
+        onChange={(value) => {
+          console.log({ value })
+          return store.setValue(value!)
+        }}
+      />
+    </div>
+    <Flex>
+      <div>
+        <h3>选择全部</h3>
+        <Select
+          data={list}
+          all
+          placeholder='select'
+          value={store.value}
+          onChange={(value) => {
+            console.log({ value })
+            return store.setValue(value!)
+          }}
+        />
+      </div>
+      <div className='gm-margin-left-10'>
+        <h3>自定义全部文案</h3>
+        <Select
+          data={list}
+          all={{ text: '😊全部地址😊' }}
+          value={store.value}
+          onChange={(value) => {
+            console.log({ value })
+            return store.setValue(value!)
+          }}
+        />
+      </div>
+      <div className='gm-margin-left-10'>
+        <h3>自定义全部值</h3>
+        <Select
+          data={list}
+          all={{ text: '😊全部地址😊', value: undefined }}
+          value={store.value}
+          onChange={(value) => {
+            return store.setValue(value!)
+          }}
+        />
+      </div>
+    </Flex>
+    <div>
+      <h3>disabled</h3>
+      <Select
+        data={list}
+        all
+        value={store.value}
+        onChange={(value) => {
+          store.setValue(value!)
+        }}
+        disabled
+      />
+    </div>
+    <h3>clean</h3>
+    <Select
+      clean
+      all
+      data={list}
+      value={store.value}
+      onChange={(value) => {
+        store.setValue(value!)
+      }}
+    />
+    <h3>renderItem</h3>
+    <Select
+      data={list}
+      value={store.value}
+      onChange={(value) => {
+        console.log({ value })
+        return store.setValue(value!)
+      }}
+      renderItem={(item) => {
+        return `${item.value}_${item.text}`
+      }}
+    />
+    <h3>renderSelected</h3>
+    <Select
+      data={list}
+      value={store.value}
+      onChange={(value) => {
+        console.log({ value })
+        return store.setValue(value!)
+      }}
+      renderSelected={(item) => {
+        return `${item.value}_${item.text}`
+      }}
+    />
+  </div>
+)
+
+export default {
+  title: '表单/Select',
+}

package/src/component/select/style.less

@@ -1,4 +1,4 @@
-.gm-select {
-  display: inline-block;
-  vertical-align: middle;
-}
+.gm-select {
+  display: inline-block;
+  vertical-align: middle;
+}

package/src/component/select/types.ts

@@ -1,29 +1,29 @@
-import { CSSProperties, KeyboardEvent, ReactNode } from 'react'
-import { ListDataItem } from '../../types'
-
-interface SelectProps<V> {
-  data?: ListDataItem<V>[]
-  value?: V
-  /** 默认 {value: 0, text: '全部'} */
-  all?: boolean | { value?: V; text?: string }
-  onChange?(selected: V): void
-  disabled?: boolean
-  renderItem?(item: ListDataItem<V>, index: number): ReactNode
-  renderSelected?(selected: ListDataItem<V>): ReactNode
-  clean?: boolean
-  popoverType?: 'focus' | 'realFocus'
-  isInPopup?: boolean
-  onKeyDown?(event: KeyboardEvent): void
-  className?: string
-  style?: CSSProperties
-  placeholder?: string
-  /**
-   * 在下拉选项最后自定义内容
-   *
-   * 注意：点击自定义内容时，会将浮层关闭。
-   * 你可以在自定义内容的事件处理函数中添加 `e.preventDefault()` 来阻止这个行为。
-   */
-  addonLast?: ReactNode
-}
-
-export type { SelectProps }
+import { CSSProperties, KeyboardEvent, ReactNode } from 'react'
+import { ListDataItem } from '../../types'
+
+interface SelectProps<V> {
+  data?: ListDataItem<V>[]
+  value?: V
+  /** 默认 {value: 0, text: '全部'} */
+  all?: boolean | { value?: V; text?: string }
+  onChange?(selected: V): void
+  disabled?: boolean
+  renderItem?(item: ListDataItem<V>, index: number): ReactNode
+  renderSelected?(selected: ListDataItem<V>): ReactNode
+  clean?: boolean
+  popoverType?: 'focus' | 'realFocus'
+  isInPopup?: boolean
+  onKeyDown?(event: KeyboardEvent): void
+  className?: string
+  style?: CSSProperties
+  placeholder?: string
+  /**
+   * 在下拉选项最后自定义内容
+   *
+   * 注意：点击自定义内容时，会将浮层关闭。
+   * 你可以在自定义内容的事件处理函数中添加 `e.preventDefault()` 来阻止这个行为。
+   */
+  addonLast?: ReactNode
+}
+
+export type { SelectProps }

package/src/component/selection/index.ts

@@ -1,2 +1,2 @@
-export { default as Selection } from './selection'
-export type { SelectionProps } from './selection'
+export { default as Selection } from './selection'
+export type { SelectionProps } from './selection'

package/src/component/selection/selection.tsx

@@ -1,162 +1,162 @@
-import React, {
-  Component,
-  createRef,
-  RefObject,
-  cloneElement,
-  ReactElement,
-  ReactNode,
-  KeyboardEvent,
-  CSSProperties,
-} from 'react'
-import _ from 'lodash'
-import classNames from 'classnames'
-import SVGCloseCircle from '../../svg/close-circle.svg'
-import { IconDownUp } from '../icon_down_up'
-import { ConfigConsumer } from '../config_provider'
-
-type Selected = any
-
-interface SelectionProps {
-  selected?: Selected
-  onSelect(selected?: Selected): void
-
-  disabled?: boolean
-  placeholder?: string
-
-  /** 自定义 selected */
-  renderSelected?(value?: Selected): ReactNode
-  /** 代替默认的 Icon */
-  funIcon?: ReactNode
-  /** 无边框 */
-  clean?: boolean
-  /** 禁用清除 */
-  disabledClose?: boolean
-
-  /** 给键盘用 */
-  onKeyDown?(event: KeyboardEvent): void
-  className?: string
-  style?: CSSProperties
-
-  /** 给 Select 定制 */
-  noInput?: boolean
-}
-
-class Selection extends Component<SelectionProps> {
-  static defaultProps = {
-    renderSelected: (value: { text: string }) => value.text,
-  }
-
-  private _inputRef = createRef<HTMLInputElement | HTMLDivElement>()
-
-  public apiDoFocus = (): void => {
-    this._inputRef.current!.focus()
-  }
-
-  private _handleClear = (): void => {
-    const { onSelect, disabled } = this.props
-    if (disabled) {
-      return
-    }
-    onSelect(null)
-  }
-
-  render() {
-    const {
-      selected,
-      onSelect,
-      disabled,
-      renderSelected,
-      placeholder,
-      funIcon,
-      clean,
-      disabledClose,
-      className,
-      onKeyDown,
-      noInput,
-      ...rest
-    } = this.props
-    let text
-    if (renderSelected && !_.isNil(selected)) {
-      text = renderSelected(selected)
-    }
-
-    return (
-      <ConfigConsumer>
-        {({ fontSize }) => (
-          <div
-            {...rest}
-            className={classNames(
-              'gm-selection',
-              {
-                disabled,
-                'gm-selection-disabled-clean': clean,
-                'gm-selection-disabled-close': disabledClose,
-                [`gm-selection-text-${fontSize}`]: fontSize,
-              },
-              className
-            )}
-          >
-            {noInput ? (
-              <div
-                ref={this._inputRef}
-                // @ts-ignore
-                disabled={disabled}
-                className={classNames(
-                  'gm-form-control gm-selection-selected gm-text-ellipsis',
-                  {
-                    [`gm-form-control-text-${fontSize}`]: fontSize,
-                  }
-                )}
-                tabIndex={0}
-                onKeyDown={onKeyDown}
-              >
-                {text || <span className='gm-text-desc'>{placeholder}</span>}
-              </div>
-            ) : (
-              <input
-                type='text'
-                ref={this._inputRef as RefObject<HTMLInputElement>}
-                disabled={disabled}
-                value={(text as string) || ''}
-                onChange={_.noop}
-                onKeyDown={onKeyDown}
-                placeholder={placeholder}
-                className={classNames('gm-form-control gm-selection-selected', {
-                  [`gm-form-control-text-${fontSize}`]: fontSize,
-                })}
-              />
-            )}
-            {selected && !disabledClose && !clean && (
-              <SVGCloseCircle
-                onClick={this._handleClear}
-                className='gm-selection-icon gm-selection-close-icon'
-              />
-            )}
-            {funIcon ? (
-              cloneElement(funIcon as ReactElement, {
-                className: classNames(
-                  'gm-selection-icon',
-                  {
-                    'gm-selection-fun-icon': selected && !disabledClose && !clean,
-                  },
-                  (funIcon as ReactElement).props?.className
-                ),
-              })
-            ) : (
-              <IconDownUp
-                disabled={disabled}
-                active={(className ?? '').includes('gm-popover-active')}
-                className={classNames('gm-selection-icon', 'gm-selection-down-up', {
-                  'gm-selection-fun-icon': selected && !disabledClose && !clean,
-                })}
-              />
-            )}
-          </div>
-        )}
-      </ConfigConsumer>
-    )
-  }
-}
-
-export default Selection
-export type { SelectionProps }
+import React, {
+  Component,
+  createRef,
+  RefObject,
+  cloneElement,
+  ReactElement,
+  ReactNode,
+  KeyboardEvent,
+  CSSProperties,
+} from 'react'
+import _ from 'lodash'
+import classNames from 'classnames'
+import SVGCloseCircle from '../../svg/close-circle.svg'
+import { IconDownUp } from '../icon_down_up'
+import { ConfigConsumer } from '../config_provider'
+
+type Selected = any
+
+interface SelectionProps {
+  selected?: Selected
+  onSelect(selected?: Selected): void
+
+  disabled?: boolean
+  placeholder?: string
+
+  /** 自定义 selected */
+  renderSelected?(value?: Selected): ReactNode
+  /** 代替默认的 Icon */
+  funIcon?: ReactNode
+  /** 无边框 */
+  clean?: boolean
+  /** 禁用清除 */
+  disabledClose?: boolean
+
+  /** 给键盘用 */
+  onKeyDown?(event: KeyboardEvent): void
+  className?: string
+  style?: CSSProperties
+
+  /** 给 Select 定制 */
+  noInput?: boolean
+}
+
+class Selection extends Component<SelectionProps> {
+  static defaultProps = {
+    renderSelected: (value: { text: string }) => value.text,
+  }
+
+  private _inputRef = createRef<HTMLInputElement | HTMLDivElement>()
+
+  public apiDoFocus = (): void => {
+    this._inputRef.current!.focus()
+  }
+
+  private _handleClear = (): void => {
+    const { onSelect, disabled } = this.props
+    if (disabled) {
+      return
+    }
+    onSelect(null)
+  }
+
+  render() {
+    const {
+      selected,
+      onSelect,
+      disabled,
+      renderSelected,
+      placeholder,
+      funIcon,
+      clean,
+      disabledClose,
+      className,
+      onKeyDown,
+      noInput,
+      ...rest
+    } = this.props
+    let text
+    if (renderSelected && !_.isNil(selected)) {
+      text = renderSelected(selected)
+    }
+
+    return (
+      <ConfigConsumer>
+        {({ fontSize }) => (
+          <div
+            {...rest}
+            className={classNames(
+              'gm-selection',
+              {
+                disabled,
+                'gm-selection-disabled-clean': clean,
+                'gm-selection-disabled-close': disabledClose,
+                [`gm-selection-text-${fontSize}`]: fontSize,
+              },
+              className
+            )}
+          >
+            {noInput ? (
+              <div
+                ref={this._inputRef}
+                // @ts-ignore
+                disabled={disabled}
+                className={classNames(
+                  'gm-form-control gm-selection-selected gm-text-ellipsis',
+                  {
+                    [`gm-form-control-text-${fontSize}`]: fontSize,
+                  }
+                )}
+                tabIndex={0}
+                onKeyDown={onKeyDown}
+              >
+                {text || <span className='gm-text-desc'>{placeholder}</span>}
+              </div>
+            ) : (
+              <input
+                type='text'
+                ref={this._inputRef as RefObject<HTMLInputElement>}
+                disabled={disabled}
+                value={(text as string) || ''}
+                onChange={_.noop}
+                onKeyDown={onKeyDown}
+                placeholder={placeholder}
+                className={classNames('gm-form-control gm-selection-selected', {
+                  [`gm-form-control-text-${fontSize}`]: fontSize,
+                })}
+              />
+            )}
+            {selected && !disabledClose && !clean && (
+              <SVGCloseCircle
+                onClick={this._handleClear}
+                className='gm-selection-icon gm-selection-close-icon'
+              />
+            )}
+            {funIcon ? (
+              cloneElement(funIcon as ReactElement, {
+                className: classNames(
+                  'gm-selection-icon',
+                  {
+                    'gm-selection-fun-icon': selected && !disabledClose && !clean,
+                  },
+                  (funIcon as ReactElement).props?.className
+                ),
+              })
+            ) : (
+              <IconDownUp
+                disabled={disabled}
+                active={(className ?? '').includes('gm-popover-active')}
+                className={classNames('gm-selection-icon', 'gm-selection-down-up', {
+                  'gm-selection-fun-icon': selected && !disabledClose && !clean,
+                })}
+              />
+            )}
+          </div>
+        )}
+      </ConfigConsumer>
+    )
+  }
+}
+
+export default Selection
+export type { SelectionProps }