@gm-pc/react 1.17.0-beta.0 → 1.17.0-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gm-pc/react",
-  "version": "1.17.0-beta.0",
+  "version": "1.17.0-beta.3",
   "description": "观麦前端基础组件库",
   "author": "liyatang <liyatang@qq.com>",
   "homepage": "https://github.com/gmfe/gm-pc#readme",
@@ -24,7 +24,7 @@
   "dependencies": {
     "@gm-common/hooks": "^2.10.0",
     "@gm-common/tool": "^2.10.0",
-    "@gm-pc/locales": "^1.17.0-beta.0",
+    "@gm-pc/locales": "^1.17.0-beta.3",
     "big.js": "^6.0.1",
     "classnames": "^2.2.5",
     "lodash": "^4.17.19",
@@ -48,5 +48,5 @@
     "react-router-dom": "^5.2.0",
     "react-window": "^1.8.5"
   },
-  "gitHead": "4ded82c728d9153ce0f837ad39777ac461a57d1f"
+  "gitHead": "c6262effbcbb9685808340368095de89903bcfde"
 }

package/src/component/auto_complete/auto_complete.tsx

@@ -0,0 +1,195 @@
+import React, {
+  useRef,
+  useState,
+  useMemo,
+  useEffect,
+  InputHTMLAttributes,
+  CSSProperties,
+  ReactNode,
+  forwardRef,
+  useImperativeHandle,
+} from 'react'
+import { Input } from '../input'
+import { Popover } from '../popover'
+import { List } from '../list'
+
+import _ from 'lodash'
+import classNames from 'classnames'
+import { ListDataItem } from '../../types'
+
+export interface AutoCompleteOption {
+  value: string
+}
+
+type InputProps = InputHTMLAttributes<HTMLInputElement>
+
+export interface AutoCompleteProps extends Omit<InputProps, 'value' | 'onChange'> {
+  /** input value */
+  value?: string
+  /** 填充文本列表 */
+  options?: AutoCompleteOption[]
+  /** 自定义 options 外层容器类名 */
+  optionsWrapClassName?: string
+  /** 自定义 options 外层容器行内样式 */
+  optionsWrapStyle?: CSSProperties
+  /** 自定义 option 渲染 */
+  renderOption?: (value: AutoCompleteOption, index: number) => ReactNode
+  /** 在 options 前追加内容 */
+  addonOptionsBefore?: () => ReactNode
+  /** 在 options 后追加内容 */
+  addonOptionsAfter?: () => ReactNode
+  /** input onChange 触发、点击 option 时触发、键盘选择 option 并回车时触发 */
+  onChange?: (value: string) => void
+}
+
+export interface AutoCompleteRef {
+  /** input DOM 节点 */
+  input?: HTMLInputElement | null
+  /** 控制弹出层显示 */
+  triggerPopover: (value: boolean) => void
+}
+
+const preventDefault = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
+  e.preventDefault()
+}
+
+const LIST_ITEM_PROPS: React.HTMLAttributes<HTMLDivElement> = {
+  onPointerDown: preventDefault,
+  onMouseDown: preventDefault,
+  onClick: preventDefault,
+}
+
+const listItemProps = () => LIST_ITEM_PROPS
+
+const AutoComplete = forwardRef<AutoCompleteRef, AutoCompleteProps>((props, ref) => {
+  const {
+    value,
+    options: externalOptions,
+    optionsWrapClassName,
+    optionsWrapStyle,
+    onChange,
+    onKeyDown,
+    onBlur,
+    renderOption,
+    addonOptionsAfter,
+    addonOptionsBefore,
+    ...rest
+  } = props
+
+  const [willActiveIndex, setWillActiveIndex] = useState(0)
+  const popoverNode = useRef<Popover | null>(null)
+  const popoverVisible = useRef(false)
+  const inputNode = useRef<HTMLInputElement | null>(null)
+
+  const triggerPopover = (value: boolean) => {
+    popoverNode.current && popoverNode.current.apiDoSetActive(value)
+  }
+
+  const options = useMemo(() => {
+    return _.map(externalOptions, (item) => ({ text: item.value, value: item.value }))
+  }, [externalOptions])
+
+  useEffect(() => {
+    if (_.isNil(value) || options.length <= 0) return
+    setWillActiveIndex(() => {
+      return options.findIndex((item) => item.value === value)
+    })
+  }, [value, options])
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (!popoverVisible.current) {
+      onKeyDown && onKeyDown(event)
+      return
+    }
+    if (event.key === 'Enter') {
+      onChange && onChange(options[willActiveIndex].value)
+      triggerPopover(false)
+    }
+    if (event.key === 'Escape') {
+      triggerPopover(false)
+    }
+    if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown') {
+      onKeyDown && onKeyDown(event)
+      return
+    }
+    let index = willActiveIndex
+    if (event.key === 'ArrowUp') {
+      index--
+    } else if (event.key === 'ArrowDown') {
+      index++
+    }
+    if (index < 0) {
+      index = options.length - 1
+    } else if (index > options.length - 1) {
+      index = 0
+    }
+    setWillActiveIndex(index)
+  }
+
+  const renderItem = useMemo(() => {
+    if (renderOption) {
+      return (value: ListDataItem<string>, index: number) => {
+        return renderOption({ value: value.value }, index)
+      }
+    }
+    return undefined
+  }, [renderOption])
+
+  useImperativeHandle(ref, () => {
+    return {
+      input: inputNode.current,
+      triggerPopover,
+    }
+  })
+
+  return (
+    <Popover
+      ref={popoverNode}
+      type='click'
+      disabled={options.length === 0}
+      onVisibleChange={(visible) => {
+        popoverVisible.current = visible
+      }}
+      popup={
+        <>
+          {addonOptionsBefore && <div {...LIST_ITEM_PROPS}>{addonOptionsBefore()}</div>}
+          <List
+            data={options}
+            selected={value}
+            onSelect={(val) => {
+              onChange && onChange(val as string)
+              triggerPopover(false)
+              inputNode.current && inputNode.current.focus()
+            }}
+            willActiveIndex={willActiveIndex}
+            className={classNames('gm-border-0', optionsWrapClassName)}
+            renderItem={renderItem}
+            style={{ maxHeight: 250, ...optionsWrapStyle }}
+            getItemProps={listItemProps}
+          />
+          {addonOptionsAfter && <div {...LIST_ITEM_PROPS}>{addonOptionsAfter()}</div>}
+        </>
+      }
+    >
+      <Input
+        {...rest}
+        ref={inputNode}
+        value={value}
+        onChange={(e) => {
+          const val = e.target.value
+          if (val.length === 0) {
+            triggerPopover(true)
+          }
+          onChange && onChange(val)
+        }}
+        onBlur={(e) => {
+          triggerPopover(false)
+          onBlur && onBlur(e)
+        }}
+        onKeyDown={handleKeyDown}
+      />
+    </Popover>
+  )
+})
+
+export default AutoComplete

package/src/component/auto_complete/index.ts

@@ -0,0 +1,6 @@
+export { default as AutoComplete } from './auto_complete'
+export type {
+  AutoCompleteProps,
+  AutoCompleteOption,
+  AutoCompleteRef,
+} from './auto_complete'

package/src/component/auto_complete/stories.tsx

@@ -0,0 +1,37 @@
+import React, { useState } from 'react'
+import AutoComplete, { AutoCompleteOption } from './auto_complete'
+
+const tips: AutoCompleteOption[] = [
+  { value: '自动填充文本' },
+  { value: '自动填充文本2' },
+  { value: '自动填充文本3' },
+]
+
+export const ComAutoComplete = () => {
+  const [value, setValue] = useState('')
+
+  return (
+    <div style={{ width: 300 }}>
+      <AutoComplete value={value} options={tips} onChange={setValue} />
+      <br />
+      <br />
+      <br />
+      <AutoComplete
+        value={value}
+        options={tips}
+        onChange={setValue}
+        addonOptionsBefore={() => {
+          return (
+            <span style={{ display: 'block', padding: '4px 10px', color: '#888' }}>
+              最近几条输入记录：
+            </span>
+          )
+        }}
+      />
+    </div>
+  )
+}
+
+export default {
+  title: '表单/AutoComplete',
+}

package/src/component/popover/popover.tsx

@@ -105,6 +105,7 @@ class Popover extends Component<PopoverProps, PopoverState> {
     if (this._isUnmounted) {
       return
     }
+    const { onVisibleChange } = this.props
     if (active) {
       // eslint-disable-next-line react/no-find-dom-node
       const dom = findDOMNode(this) as HTMLElement
@@ -116,6 +117,7 @@ class Popover extends Component<PopoverProps, PopoverState> {
         width: dom.offsetWidth,
       }
     }
+    onVisibleChange && onVisibleChange(active)
     this.setState({ active })
   }
 

package/src/component/popover/types.ts

@@ -19,6 +19,7 @@ interface PopoverProps {
   predictingHeight?: number
   className?: string
   style?: CSSProperties
+  onVisibleChange?: (value: boolean) => void
 }
 
 export type { Popup, PopoverTrigger, PopoverProps }

package/src/index.ts

@@ -2,6 +2,7 @@ export * from './types'
 export { default as EVENT_TYPE } from './event_type'
 export { default as Validator } from './validator'
 export * from './component/affix'
+export * from './component/auto_complete'
 export * from './component/box'
 export * from './component/button'
 export * from './component/calendar'