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

package/src/component/affix/index.ts

@@ -1,2 +1,2 @@
-export { default as Affix } from './affix'
-export type { AffixProps } from './affix'
+export { default as Affix } from './affix'
+export type { AffixProps } from './affix'

package/src/component/affix/stories.tsx

@@ -1,16 +1,16 @@
-import React from 'react'
-import Affix from './affix'
-
-export const ComAffix = () => (
-  <div>
-    <div style={{ height: '1500px' }} />
-    <Affix bottom={0} top={0}>
-      <div style={{ backgroundColor: 'red' }}>我会被钉住在底部 和 顶部</div>
-    </Affix>
-    <div style={{ height: '1500px' }} />
-  </div>
-)
-
-export default {
-  title: '布局/Affix',
-}
+import React from 'react'
+import Affix from './affix'
+
+export const ComAffix = () => (
+  <div>
+    <div style={{ height: '1500px' }} />
+    <Affix bottom={0} top={0}>
+      <div style={{ backgroundColor: 'red' }}>我会被钉住在底部 和 顶部</div>
+    </Affix>
+    <div style={{ height: '1500px' }} />
+  </div>
+)
+
+export default {
+  title: '布局/Affix',
+}

package/src/component/affix/style.less

@@ -1,3 +1,3 @@
-.gm-affix {
-  z-index: var(--gm-z-index-affix);
-}
+.gm-affix {
+  z-index: var(--gm-z-index-affix);
+}

package/src/component/auto_complete/auto_complete.tsx

@@ -1,202 +1,202 @@
-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) => {
-    if (value === true && options.length <= 0) return
-    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 (event.key === 'Enter') {
-      if (willActiveIndex >= 0) {
-        const val = options[willActiveIndex]?.value
-        if (!_.isNil(val) && value !== val) {
-          onChange && onChange(val)
-          triggerPopover(false)
-          return
-        }
-        if (popoverVisible.current) {
-          triggerPopover(false)
-          return
-        }
-      }
-      onKeyDown && onKeyDown(event)
-      return
-    }
-    if (!popoverVisible.current) {
-      onKeyDown && onKeyDown(event)
-      return
-    }
-    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
-    return (value: ListDataItem<string>, index: number) => {
-      return renderOption({ value: value.value }, index)
-    }
-  }, [renderOption])
-
-  useImperativeHandle(ref, () => ({
-    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
-          triggerPopover(val.length === 0)
-          onChange && onChange(val)
-        }}
-        onBlur={(e) => {
-          triggerPopover(false)
-          onBlur && onBlur(e)
-        }}
-        onKeyDown={handleKeyDown}
-      />
-    </Popover>
-  )
-})
-
-export default AutoComplete
+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) => {
+    if (value === true && options.length <= 0) return
+    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 (event.key === 'Enter') {
+      if (willActiveIndex >= 0) {
+        const val = options[willActiveIndex]?.value
+        if (!_.isNil(val) && value !== val) {
+          onChange && onChange(val)
+          triggerPopover(false)
+          return
+        }
+        if (popoverVisible.current) {
+          triggerPopover(false)
+          return
+        }
+      }
+      onKeyDown && onKeyDown(event)
+      return
+    }
+    if (!popoverVisible.current) {
+      onKeyDown && onKeyDown(event)
+      return
+    }
+    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
+    return (value: ListDataItem<string>, index: number) => {
+      return renderOption({ value: value.value }, index)
+    }
+  }, [renderOption])
+
+  useImperativeHandle(ref, () => ({
+    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
+          triggerPopover(val.length === 0)
+          onChange && onChange(val)
+        }}
+        onBlur={(e) => {
+          triggerPopover(false)
+          onBlur && onBlur(e)
+        }}
+        onKeyDown={handleKeyDown}
+      />
+    </Popover>
+  )
+})
+
+export default AutoComplete

package/src/component/auto_complete/index.ts

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

package/src/component/auto_complete/stories.tsx

@@ -1,37 +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',
-}
+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/auto_full/auto_full.tsx

@@ -1,36 +1,36 @@
-import React, { FC, HTMLAttributes, ReactNode, useEffect, useRef, useState } from 'react'
-
-interface Size {
-  height: number
-  width: number
-}
-
-interface AutoFullProps extends HTMLAttributes<HTMLDivElement> {
-  children(size: Size): ReactNode
-}
-
-const fullStyle = {
-  width: '100%',
-  height: '100%',
-}
-
-const AutoFull: FC<AutoFullProps> = (props) => {
-  const [size, setSize] = useState<Size | null>(null)
-  const ref = useRef<HTMLDivElement>(null)
-
-  useEffect(() => {
-    if (ref.current) {
-      setSize({
-        height: ref.current.offsetHeight,
-        width: ref.current.offsetWidth,
-      })
-    }
-  }, [])
-
-  return (
-    <div ref={ref} {...props} style={fullStyle}>
-      {size && props.children(size)}
-    </div>
-  )
-}
-export default AutoFull
+import React, { FC, HTMLAttributes, ReactNode, useEffect, useRef, useState } from 'react'
+
+interface Size {
+  height: number
+  width: number
+}
+
+interface AutoFullProps extends HTMLAttributes<HTMLDivElement> {
+  children(size: Size): ReactNode
+}
+
+const fullStyle = {
+  width: '100%',
+  height: '100%',
+}
+
+const AutoFull: FC<AutoFullProps> = (props) => {
+  const [size, setSize] = useState<Size | null>(null)
+  const ref = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (ref.current) {
+      setSize({
+        height: ref.current.offsetHeight,
+        width: ref.current.offsetWidth,
+      })
+    }
+  }, [])
+
+  return (
+    <div ref={ref} {...props} style={fullStyle}>
+      {size && props.children(size)}
+    </div>
+  )
+}
+export default AutoFull

package/src/component/auto_full/index.ts

@@ -1 +1 @@
-export { default as AutoFull } from './auto_full'
+export { default as AutoFull } from './auto_full'

package/src/component/box/box.tsx

@@ -1,29 +1,29 @@
-import React, { FC, HTMLAttributes } from 'react'
-import classNames from 'classnames'
-
-interface BoxProps extends HTMLAttributes<HTMLDivElement> {
-  hasGap?: boolean
-}
-
-/** Box，用来包裹一块内容 */
-const Box: FC<BoxProps> = (props) => {
-  const { hasGap, className, children, ...rest } = props
-
-  return (
-    <div
-      {...rest}
-      className={classNames(
-        'gm-box',
-        {
-          'gm-padding-tb-10 gm-padding-lr-20 ': hasGap,
-        },
-        className
-      )}
-    >
-      {children}
-    </div>
-  )
-}
-
-export default Box
-export type { BoxProps }
+import React, { FC, HTMLAttributes } from 'react'
+import classNames from 'classnames'
+
+interface BoxProps extends HTMLAttributes<HTMLDivElement> {
+  hasGap?: boolean
+}
+
+/** Box，用来包裹一块内容 */
+const Box: FC<BoxProps> = (props) => {
+  const { hasGap, className, children, ...rest } = props
+
+  return (
+    <div
+      {...rest}
+      className={classNames(
+        'gm-box',
+        {
+          'gm-padding-tb-10 gm-padding-lr-20 ': hasGap,
+        },
+        className
+      )}
+    >
+      {children}
+    </div>
+  )
+}
+
+export default Box
+export type { BoxProps }