@gm-pc/react 1.24.9-beta.7 → 1.24.9-beta.9

package/src/component/tabs/tabs.tsx

@@ -1,232 +1,232 @@
-import React, {
-  CSSProperties,
-  ReactNode,
-  useState,
-  useRef,
-  useEffect,
-  useMemo,
-} from 'react'
-import classNames from 'classnames'
-import _ from 'lodash'
-import { Flex, FlexProps } from '../flex'
-import SVGCloseSquare from '../../svg/close-square.svg'
-import PopupContentConfirm from '../popup/popup_content_confirm'
-import Popover from '../popover/popover'
-import { anyCallback } from '../../types'
-import { judgeFunction } from '../../common/utils/utils'
-interface TabsItem<V extends string | number> {
-  text: string
-  value: V
-  children: ReactNode
-  disabled?: boolean
-  /* 是否可关闭 */
-  closable?: boolean
-  ref?: HTMLDivElement | null
-  /** 是否隐藏 */
-  hide?: boolean
-}
-
-interface TabsProps<V extends string | number> extends Omit<FlexProps, 'onChange'> {
-  tabs: TabsItem<V>[]
-  defaultActive?: V
-  active?: V
-  onChange?(value: V): void
-  onClose?(value: V): void
-  onChangeValidate?(): boolean
-  keep?: boolean
-  light?: boolean
-  /* didMount之后不再重新渲染 */
-  activeOnce?: boolean
-  /* 是否全屏 */
-  full?: boolean
-  className?: string
-  column?: boolean
-  /* 卡片类型 editable-card 可以编辑的卡片 */
-  type?: 'editable-card'
-  style?: CSSProperties
-  /* 而外操作，比如新增tab的操作 */
-  extraAction?: ReactNode
-  popup?(value: V, closePopup: anyCallback): ReactNode
-  isPopover?: boolean
-  popoverContent?: ReactNode
-  popverTitle?: string
-}
-
-function Tabs<V extends string | number = string>({
-  tabs,
-  light,
-  active,
-  defaultActive,
-  keep,
-  onChange,
-  onClose,
-  onChangeValidate,
-  className,
-  column = true,
-  activeOnce,
-  full,
-  type,
-  extraAction,
-  isPopover,
-  popup,
-  popoverContent,
-  popverTitle,
-  ...rest
-}: TabsProps<V>) {
-  tabs = useMemo(() => tabs.filter((tab) => !tab.hide), [tabs])
-  const editableCard: boolean = type === 'editable-card'
-
-  const baseTabClassName = `gm-${full ? 'framework-full-' : ''}tabs`
-  if (active !== undefined && defaultActive !== undefined) {
-    console.warn('prop `active` and prop `defaultActive` can not exist at the same time!')
-  }
-
-  if (active !== undefined && !onChange) {
-    console.warn('prop `active` `onChange` must exist at the same time!')
-  }
-  const [selected, setSelected] = useState(defaultActive || active)
-  const hasSelectedsRef = useRef<Set<V>>(new Set())
-
-  // tab滚动使用
-  const tabRef = useRef(null)
-
-  useEffect(() => {
-    defaultActive === undefined && active !== undefined && setSelected(active)
-  }, [active, defaultActive])
-
-  // 增加切换tab的校验
-  const handleClick = (value: V) => {
-    if (typeof onChangeValidate === 'function' && !onChangeValidate()) return
-    setSelected(value)
-    judgeFunction(onChange, value)
-  }
-
-  const tabsChildrenKeep = (tabs: TabsItem<V>[]) => (
-    <>
-      {_.map(tabs, (tab: TabsItem<V>) => (
-        <div
-          key={tab.value}
-          className={classNames(`${baseTabClassName}-content-item`, {
-            'gm-hidden': selected !== tab.value,
-          })}
-        >
-          {tab.children}
-        </div>
-      ))}
-    </>
-  )
-
-  const tabsChildren = () => {
-    if (activeOnce && selected) {
-      hasSelectedsRef.current.add(selected)
-    }
-    let items: typeof tabs = []
-    if (activeOnce) {
-      items = _.filter(tabs, (tab) => hasSelectedsRef.current.has(tab.value))
-    } else {
-      const item = _.find(tabs, (tab) => tab.value === selected)
-      if (item) {
-        items = [item]
-      }
-    }
-    return tabsChildrenKeep(items)
-  }
-
-  const handleClose = (value: V) => {
-    judgeFunction(onClose, value)
-  }
-
-  const handleDelete = (value: V) => {
-    handleClose(value)
-  }
-
-  const innerPopup: TabsProps<V>['popup'] = (value, closePopover) => {
-    if (popup) {
-      return popup(value, closePopover)
-    }
-
-    return (
-      <PopupContentConfirm
-        type='delete'
-        title={popverTitle}
-        onCancel={closePopover}
-        onDelete={() => handleDelete(value)}
-      >
-        {popoverContent}
-      </PopupContentConfirm>
-    )
-  }
-
-  return (
-    <Flex
-      {...rest}
-      column={column}
-      className={classNames(
-        baseTabClassName,
-        {
-          'gm-tabs-light': light,
-          'gm-tabs-edit': editableCard,
-        },
-        className
-      )}
-    >
-      <div className={`${baseTabClassName}-head-fix`}>
-        <Flex alignEnd className={`${baseTabClassName}-head`}>
-          <Flex ref={tabRef} alignEnd className='gm-tabs-max-head-scroll'>
-            {_.map(tabs, (tab) => {
-              const isClose = tab.closable === false ? false : editableCard
-              return (
-                <Flex
-                  alignCenter
-                  id={`#gm-tabs-${tab.value}`}
-                  ref={(ref) => (tab.ref = ref)}
-                  key={tab.value}
-                  className={classNames(`${baseTabClassName}-head-item`, {
-                    active: !tab.disabled && selected === tab.value,
-                    'gm-tabs-head-disabled': tab.disabled,
-                    'gm-tabs-closable': isClose,
-                  })}
-                >
-                  <span
-                    title={tab.text}
-                    className={classNames({
-                      'gm-tabs-text-overflow-ellipsis': editableCard,
-                    })}
-                    onClick={tab.disabled ? _.noop : () => handleClick(tab.value)}
-                  >
-                    {tab.text}
-                  </span>
-
-                  {isClose && isPopover && (
-                    <Popover
-                      center
-                      popup={(closePopover) => innerPopup(tab.value, closePopover)}
-                    >
-                      <div>
-                        <SVGCloseSquare
-                          className='tw-ml-1'
-                          style={{ width: '10px', height: '10px', marginBottom: '2px' }}
-                        />
-                      </div>
-                    </Popover>
-                  )}
-                </Flex>
-              )
-            })}
-          </Flex>
-          {extraAction && (
-            <Flex style={{ minWidth: '80px' }} className='tw-h-6 tw-ml-2'>
-              {extraAction}
-            </Flex>
-          )}
-        </Flex>
-      </div>
-      <Flex flex column className={`${baseTabClassName}-content`}>
-        {keep ? tabsChildrenKeep(tabs) : tabsChildren()}
-      </Flex>
-    </Flex>
-  )
-}
-
-export default Tabs
-export type { TabsProps, TabsItem }
+import React, {
+  CSSProperties,
+  ReactNode,
+  useState,
+  useRef,
+  useEffect,
+  useMemo,
+} from 'react'
+import classNames from 'classnames'
+import _ from 'lodash'
+import { Flex, FlexProps } from '../flex'
+import SVGCloseSquare from '../../svg/close-square.svg'
+import PopupContentConfirm from '../popup/popup_content_confirm'
+import Popover from '../popover/popover'
+import { anyCallback } from '../../types'
+import { judgeFunction } from '../../common/utils/utils'
+interface TabsItem<V extends string | number> {
+  text: string
+  value: V
+  children: ReactNode
+  disabled?: boolean
+  /* 是否可关闭 */
+  closable?: boolean
+  ref?: HTMLDivElement | null
+  /** 是否隐藏 */
+  hide?: boolean
+}
+
+interface TabsProps<V extends string | number> extends Omit<FlexProps, 'onChange'> {
+  tabs: TabsItem<V>[]
+  defaultActive?: V
+  active?: V
+  onChange?(value: V): void
+  onClose?(value: V): void
+  onChangeValidate?(): boolean
+  keep?: boolean
+  light?: boolean
+  /* didMount之后不再重新渲染 */
+  activeOnce?: boolean
+  /* 是否全屏 */
+  full?: boolean
+  className?: string
+  column?: boolean
+  /* 卡片类型 editable-card 可以编辑的卡片 */
+  type?: 'editable-card'
+  style?: CSSProperties
+  /* 而外操作，比如新增tab的操作 */
+  extraAction?: ReactNode
+  popup?(value: V, closePopup: anyCallback): ReactNode
+  isPopover?: boolean
+  popoverContent?: ReactNode
+  popverTitle?: string
+}
+
+function Tabs<V extends string | number = string>({
+  tabs,
+  light,
+  active,
+  defaultActive,
+  keep,
+  onChange,
+  onClose,
+  onChangeValidate,
+  className,
+  column = true,
+  activeOnce,
+  full,
+  type,
+  extraAction,
+  isPopover,
+  popup,
+  popoverContent,
+  popverTitle,
+  ...rest
+}: TabsProps<V>) {
+  tabs = useMemo(() => tabs.filter((tab) => !tab.hide), [tabs])
+  const editableCard: boolean = type === 'editable-card'
+
+  const baseTabClassName = `gm-${full ? 'framework-full-' : ''}tabs`
+  if (active !== undefined && defaultActive !== undefined) {
+    console.warn('prop `active` and prop `defaultActive` can not exist at the same time!')
+  }
+
+  if (active !== undefined && !onChange) {
+    console.warn('prop `active` `onChange` must exist at the same time!')
+  }
+  const [selected, setSelected] = useState(defaultActive || active)
+  const hasSelectedsRef = useRef<Set<V>>(new Set())
+
+  // tab滚动使用
+  const tabRef = useRef(null)
+
+  useEffect(() => {
+    defaultActive === undefined && active !== undefined && setSelected(active)
+  }, [active, defaultActive])
+
+  // 增加切换tab的校验
+  const handleClick = (value: V) => {
+    if (typeof onChangeValidate === 'function' && !onChangeValidate()) return
+    setSelected(value)
+    judgeFunction(onChange, value)
+  }
+
+  const tabsChildrenKeep = (tabs: TabsItem<V>[]) => (
+    <>
+      {_.map(tabs, (tab: TabsItem<V>) => (
+        <div
+          key={tab.value}
+          className={classNames(`${baseTabClassName}-content-item`, {
+            'gm-hidden': selected !== tab.value,
+          })}
+        >
+          {tab.children}
+        </div>
+      ))}
+    </>
+  )
+
+  const tabsChildren = () => {
+    if (activeOnce && selected) {
+      hasSelectedsRef.current.add(selected)
+    }
+    let items: typeof tabs = []
+    if (activeOnce) {
+      items = _.filter(tabs, (tab) => hasSelectedsRef.current.has(tab.value))
+    } else {
+      const item = _.find(tabs, (tab) => tab.value === selected)
+      if (item) {
+        items = [item]
+      }
+    }
+    return tabsChildrenKeep(items)
+  }
+
+  const handleClose = (value: V) => {
+    judgeFunction(onClose, value)
+  }
+
+  const handleDelete = (value: V) => {
+    handleClose(value)
+  }
+
+  const innerPopup: TabsProps<V>['popup'] = (value, closePopover) => {
+    if (popup) {
+      return popup(value, closePopover)
+    }
+
+    return (
+      <PopupContentConfirm
+        type='delete'
+        title={popverTitle}
+        onCancel={closePopover}
+        onDelete={() => handleDelete(value)}
+      >
+        {popoverContent}
+      </PopupContentConfirm>
+    )
+  }
+
+  return (
+    <Flex
+      {...rest}
+      column={column}
+      className={classNames(
+        baseTabClassName,
+        {
+          'gm-tabs-light': light,
+          'gm-tabs-edit': editableCard,
+        },
+        className
+      )}
+    >
+      <div className={`${baseTabClassName}-head-fix`}>
+        <Flex alignEnd className={`${baseTabClassName}-head`}>
+          <Flex ref={tabRef} alignEnd className='gm-tabs-max-head-scroll'>
+            {_.map(tabs, (tab) => {
+              const isClose = tab.closable === false ? false : editableCard
+              return (
+                <Flex
+                  alignCenter
+                  id={`#gm-tabs-${tab.value}`}
+                  ref={(ref) => (tab.ref = ref)}
+                  key={tab.value}
+                  className={classNames(`${baseTabClassName}-head-item`, {
+                    active: !tab.disabled && selected === tab.value,
+                    'gm-tabs-head-disabled': tab.disabled,
+                    'gm-tabs-closable': isClose,
+                  })}
+                >
+                  <span
+                    title={tab.text}
+                    className={classNames({
+                      'gm-tabs-text-overflow-ellipsis': editableCard,
+                    })}
+                    onClick={tab.disabled ? _.noop : () => handleClick(tab.value)}
+                  >
+                    {tab.text}
+                  </span>
+
+                  {isClose && isPopover && (
+                    <Popover
+                      center
+                      popup={(closePopover) => innerPopup(tab.value, closePopover)}
+                    >
+                      <div>
+                        <SVGCloseSquare
+                          className='tw-ml-1'
+                          style={{ width: '10px', height: '10px', marginBottom: '2px' }}
+                        />
+                      </div>
+                    </Popover>
+                  )}
+                </Flex>
+              )
+            })}
+          </Flex>
+          {extraAction && (
+            <Flex style={{ minWidth: '80px' }} className='tw-h-6 tw-ml-2'>
+              {extraAction}
+            </Flex>
+          )}
+        </Flex>
+      </div>
+      <Flex flex column className={`${baseTabClassName}-content`}>
+        {keep ? tabsChildrenKeep(tabs) : tabsChildren()}
+      </Flex>
+    </Flex>
+  )
+}
+
+export default Tabs
+export type { TabsProps, TabsItem }

package/src/component/textarea/index.ts

@@ -1,3 +1,3 @@
-export { default as TextArea } from './textarea'
-
-export type { TextAreaProps } from './textarea'
+export { default as TextArea } from './textarea'
+
+export type { TextAreaProps } from './textarea'

package/src/component/textarea/stories.tsx

@@ -1,37 +1,37 @@
-import React from 'react'
-import TextArea from './textarea'
-import { observable } from 'mobx'
-
-const store = observable({
-  value: 'a',
-})
-
-export const ComInput = () => {
-  return (
-    <div>
-      <div className='gm-padding-10' style={{ width: '200px' }}>
-        <TextArea
-          placeholder='请输入'
-          value={store.value}
-          onChange={(e) => {
-            store.value = e.target.value
-          }}
-        />
-      </div>
-      <div className='gm-padding-10' style={{ width: '200px' }}>
-        <TextArea
-          disabled
-          placeholder='请输入'
-          value={store.value}
-          onChange={(e) => {
-            store.value = e.target.value
-          }}
-        />
-      </div>
-    </div>
-  )
-}
-
-export default {
-  title: '表单/TextArea',
-}
+import React from 'react'
+import TextArea from './textarea'
+import { observable } from 'mobx'
+
+const store = observable({
+  value: 'a',
+})
+
+export const ComInput = () => {
+  return (
+    <div>
+      <div className='gm-padding-10' style={{ width: '200px' }}>
+        <TextArea
+          placeholder='请输入'
+          value={store.value}
+          onChange={(e) => {
+            store.value = e.target.value
+          }}
+        />
+      </div>
+      <div className='gm-padding-10' style={{ width: '200px' }}>
+        <TextArea
+          disabled
+          placeholder='请输入'
+          value={store.value}
+          onChange={(e) => {
+            store.value = e.target.value
+          }}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default {
+  title: '表单/TextArea',
+}

package/src/component/textarea/style.less

@@ -1,12 +1,12 @@
-.gm-textarea {
-  .gmFormControl();
-
-  height: 8em;
-  line-height: normal;
-
-  .gmDisabledBgWith();
-
-  &.gm-textarea-text-sm {
-    font-size: var(--gm-size-text-sm);
-  }
-}
+.gm-textarea {
+  .gmFormControl();
+
+  height: 8em;
+  line-height: normal;
+
+  .gmDisabledBgWith();
+
+  &.gm-textarea-text-sm {
+    font-size: var(--gm-size-text-sm);
+  }
+}

package/src/component/textarea/textarea.tsx

@@ -1,22 +1,22 @@
-import React, { forwardRef, TextareaHTMLAttributes, useContext } from 'react'
-import classNames from 'classnames'
-import { ConfigContext } from '../config_provider'
-
-type TextAreaProps = TextareaHTMLAttributes<HTMLTextAreaElement>
-
-const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>((props, ref) => {
-  const { fontSize } = useContext(ConfigContext)
-  const { className, ...rest } = props
-  return (
-    <textarea
-      ref={ref}
-      {...rest}
-      className={classNames('gm-textarea', className, {
-        [`gm-textarea-text-${fontSize}`]: fontSize,
-      })}
-    />
-  )
-})
-
-export default TextArea
-export type { TextAreaProps }
+import React, { forwardRef, TextareaHTMLAttributes, useContext } from 'react'
+import classNames from 'classnames'
+import { ConfigContext } from '../config_provider'
+
+type TextAreaProps = TextareaHTMLAttributes<HTMLTextAreaElement>
+
+const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>((props, ref) => {
+  const { fontSize } = useContext(ConfigContext)
+  const { className, ...rest } = props
+  return (
+    <textarea
+      ref={ref}
+      {...rest}
+      className={classNames('gm-textarea', className, {
+        [`gm-textarea-text-${fontSize}`]: fontSize,
+      })}
+    />
+  )
+})
+
+export default TextArea
+export type { TextAreaProps }

package/src/component/time_span/index.ts

@@ -1,4 +1,4 @@
-export { default as TimeSpan } from './time_span'
-export { default as TimeSpanPicker } from './time_span_picker'
-
-export type { TimeSpanProps, TimeSpanPickerProps } from './types'
+export { default as TimeSpan } from './time_span'
+export { default as TimeSpanPicker } from './time_span_picker'
+
+export type { TimeSpanProps, TimeSpanPickerProps } from './types'