@gm-pc/react 1.25.1-beta.1 → 1.26.0-beta.0

package/src/component/box/box_form.tsx

@@ -1,83 +1,83 @@
-import React, {
-  FC,
-  ReactElement,
-  createContext,
-  useContext,
-  useEffect,
-  useState,
-} from 'react'
-import _ from 'lodash'
-import { ControlledForm, ControlledFormProps } from '../controlled_form'
-import { Form } from '../form'
-
-import { Flex } from '../flex'
-import { IconDownUp } from '../icon_down_up'
-import { getLocale } from '@gm-pc/locales'
-import { ButtonText } from '../button'
-
-interface BoxFormContext {
-  open: boolean
-  onHasMore: () => void
-}
-
-const BoxFormContext = createContext<BoxFormContext>({
-  open: false,
-  onHasMore: _.noop,
-})
-
-const BoxFormMore: FC = ({ children }) => {
-  const { open, onHasMore } = useContext(BoxFormContext)
-
-  useEffect(() => {
-    onHasMore()
-  }, [onHasMore])
-
-  if (!open) {
-    return null
-  }
-
-  return children as ReactElement
-}
-
-type BoxFormProps<T> = ControlledFormProps<T> & {
-  isControl?: boolean
-}
-
-function BoxForm<K = any>(props: BoxFormProps<K>) {
-  const { btnPosition = 'left', isControl, children, ...rest } = props
-  const [hasMore, setHasMore] = useState(false)
-  const [open, setOpen] = useState(false)
-
-  const handleToggle = (): void => {
-    setOpen(!open)
-  }
-
-  const handleHasMore = (): void => {
-    setHasMore(true)
-  }
-  const TempForm = isControl ? ControlledForm : Form
-
-  return (
-    <div className='gm-box gm-box-form'>
-      <Flex>
-        <Flex flex column>
-          <BoxFormContext.Provider value={{ open, onHasMore: handleHasMore }}>
-            <TempForm {...rest} btnPosition={btnPosition} inline={!open}>
-              {children}
-            </TempForm>
-          </BoxFormContext.Provider>
-        </Flex>
-        {hasMore && (
-          <ButtonText type='primary' onClick={handleToggle}>
-            {open && getLocale('收起')}
-            {getLocale('高级筛选')} <IconDownUp active={open} />
-          </ButtonText>
-        )}
-      </Flex>
-    </div>
-  )
-}
-
-export { BoxForm, BoxFormMore }
-export default BoxForm
-export type { BoxFormProps }
+import React, {
+  FC,
+  ReactElement,
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+} from 'react'
+import _ from 'lodash'
+import { ControlledForm, ControlledFormProps } from '../controlled_form'
+import { Form } from '../form'
+
+import { Flex } from '../flex'
+import { IconDownUp } from '../icon_down_up'
+import { getLocale } from '@gm-pc/locales'
+import { ButtonText } from '../button'
+
+interface BoxFormContext {
+  open: boolean
+  onHasMore: () => void
+}
+
+const BoxFormContext = createContext<BoxFormContext>({
+  open: false,
+  onHasMore: _.noop,
+})
+
+const BoxFormMore: FC = ({ children }) => {
+  const { open, onHasMore } = useContext(BoxFormContext)
+
+  useEffect(() => {
+    onHasMore()
+  }, [onHasMore])
+
+  if (!open) {
+    return null
+  }
+
+  return children as ReactElement
+}
+
+type BoxFormProps<T> = ControlledFormProps<T> & {
+  isControl?: boolean
+}
+
+function BoxForm<K = any>(props: BoxFormProps<K>) {
+  const { btnPosition = 'left', isControl, children, ...rest } = props
+  const [hasMore, setHasMore] = useState(false)
+  const [open, setOpen] = useState(false)
+
+  const handleToggle = (): void => {
+    setOpen(!open)
+  }
+
+  const handleHasMore = (): void => {
+    setHasMore(true)
+  }
+  const TempForm = isControl ? ControlledForm : Form
+
+  return (
+    <div className='gm-box gm-box-form'>
+      <Flex>
+        <Flex flex column>
+          <BoxFormContext.Provider value={{ open, onHasMore: handleHasMore }}>
+            <TempForm {...rest} btnPosition={btnPosition} inline={!open}>
+              {children}
+            </TempForm>
+          </BoxFormContext.Provider>
+        </Flex>
+        {hasMore && (
+          <ButtonText type='primary' onClick={handleToggle}>
+            {open && getLocale('收起')}
+            {getLocale('高级筛选')} <IconDownUp active={open} />
+          </ButtonText>
+        )}
+      </Flex>
+    </div>
+  )
+}
+
+export { BoxForm, BoxFormMore }
+export default BoxForm
+export type { BoxFormProps }

package/src/component/box/box_pagination.tsx

@@ -1,12 +1,12 @@
-import React, { FC } from 'react'
-import { Flex } from '../flex'
-
-const BoxPagination: FC = ({ children }) => {
-  return (
-    <Flex justifyEnd className='gm-box gm-padding-20'>
-      {children}
-    </Flex>
-  )
-}
-
-export default BoxPagination
+import React, { FC } from 'react'
+import { Flex } from '../flex'
+
+const BoxPagination: FC = ({ children }) => {
+  return (
+    <Flex justifyEnd className='gm-box gm-padding-20'>
+      {children}
+    </Flex>
+  )
+}
+
+export default BoxPagination

package/src/component/box/box_panel.tsx

@@ -1,91 +1,91 @@
-import React, { FC, HTMLAttributes, ReactNode, useState } from 'react'
-import classNames from 'classnames'
-import _ from 'lodash'
-import { Collapse } from '../collapse'
-import { Flex } from '../flex'
-import SVGUp from '../../svg/up.svg'
-import SVGDown from '../../svg/down.svg'
-
-interface BoxPanelSummaryData {
-  text: string
-  value: any
-}
-
-type BoxPanelSummary = BoxPanelSummaryData[] | ReactNode
-
-interface BoxPanelProps extends HTMLAttributes<HTMLDivElement> {
-  title: string
-  /* 不传就是没有此功能， false 默认收起 true 默认展开 */
-  collapse?: boolean
-  right?: ReactNode
-  summary?: BoxPanelSummary
-}
-
-const BoxPanel: FC<BoxPanelProps> = ({
-  title,
-  collapse,
-  right,
-  summary,
-  className,
-  children,
-  ...rest
-}) => {
-  const hasCollapse = collapse !== undefined
-
-  const [isCollapse, setIsCollapse] = useState(hasCollapse ? collapse : true)
-
-  const handleCollapse = () => {
-    setIsCollapse(!isCollapse)
-  }
-
-  return (
-    <div {...rest} className={classNames('gm-box gm-box-panel', className)}>
-      <Flex flex justifyBetween alignCenter className='gm-box-panel-header'>
-        <Flex alignCenter>
-          {hasCollapse && (
-            <a
-              onClick={handleCollapse}
-              className='gm-text-desc gm-cursor gm-decoration-none'
-            >
-              {isCollapse ? <SVGUp /> : <SVGDown />}
-            </a>
-          )}
-          <div className='gm-box-panel-title'>{title}</div>
-          {_.isArray(summary) ? (
-            <div className='gm-box-panel-summary'>
-              {_.map(summary, (s: BoxPanelSummaryData, i) => {
-                if (i < summary.length - 1)
-                  return (
-                    <span key={s.value}>
-                      {s.text}:&nbsp;
-                      <span className='gm-text-primary gm-text-bold'>{s.value}</span>
-                      ,&nbsp;
-                    </span>
-                  )
-                else
-                  return (
-                    <span key={s.value}>
-                      {s.text}:&nbsp;
-                      <span className='gm-text-primary gm-text-bold'>{s.value}</span>
-                    </span>
-                  )
-              })}
-            </div>
-          ) : (
-            <div className='gm-box-panel-summary'>{summary}</div>
-          )}
-        </Flex>
-        <Flex flex />
-        <Flex column none>
-          {right}
-        </Flex>
-      </Flex>
-      <Collapse active={isCollapse!}>
-        <div>{children}</div>
-      </Collapse>
-    </div>
-  )
-}
-
-export default BoxPanel
-export type { BoxPanelProps }
+import React, { FC, HTMLAttributes, ReactNode, useState } from 'react'
+import classNames from 'classnames'
+import _ from 'lodash'
+import { Collapse } from '../collapse'
+import { Flex } from '../flex'
+import SVGUp from '../../svg/up.svg'
+import SVGDown from '../../svg/down.svg'
+
+interface BoxPanelSummaryData {
+  text: string
+  value: any
+}
+
+type BoxPanelSummary = BoxPanelSummaryData[] | ReactNode
+
+interface BoxPanelProps extends HTMLAttributes<HTMLDivElement> {
+  title: string
+  /* 不传就是没有此功能， false 默认收起 true 默认展开 */
+  collapse?: boolean
+  right?: ReactNode
+  summary?: BoxPanelSummary
+}
+
+const BoxPanel: FC<BoxPanelProps> = ({
+  title,
+  collapse,
+  right,
+  summary,
+  className,
+  children,
+  ...rest
+}) => {
+  const hasCollapse = collapse !== undefined
+
+  const [isCollapse, setIsCollapse] = useState(hasCollapse ? collapse : true)
+
+  const handleCollapse = () => {
+    setIsCollapse(!isCollapse)
+  }
+
+  return (
+    <div {...rest} className={classNames('gm-box gm-box-panel', className)}>
+      <Flex flex justifyBetween alignCenter className='gm-box-panel-header'>
+        <Flex alignCenter>
+          {hasCollapse && (
+            <a
+              onClick={handleCollapse}
+              className='gm-text-desc gm-cursor gm-decoration-none'
+            >
+              {isCollapse ? <SVGUp /> : <SVGDown />}
+            </a>
+          )}
+          <div className='gm-box-panel-title'>{title}</div>
+          {_.isArray(summary) ? (
+            <div className='gm-box-panel-summary'>
+              {_.map(summary, (s: BoxPanelSummaryData, i) => {
+                if (i < summary.length - 1)
+                  return (
+                    <span key={s.value}>
+                      {s.text}:&nbsp;
+                      <span className='gm-text-primary gm-text-bold'>{s.value}</span>
+                      ,&nbsp;
+                    </span>
+                  )
+                else
+                  return (
+                    <span key={s.value}>
+                      {s.text}:&nbsp;
+                      <span className='gm-text-primary gm-text-bold'>{s.value}</span>
+                    </span>
+                  )
+              })}
+            </div>
+          ) : (
+            <div className='gm-box-panel-summary'>{summary}</div>
+          )}
+        </Flex>
+        <Flex flex />
+        <Flex column none>
+          {right}
+        </Flex>
+      </Flex>
+      <Collapse active={isCollapse!}>
+        <div>{children}</div>
+      </Collapse>
+    </div>
+  )
+}
+
+export default BoxPanel
+export type { BoxPanelProps }

package/src/component/box/box_table.tsx

@@ -1,57 +1,57 @@
-import React, { CSSProperties, FC, HTMLAttributes, ReactNode } from 'react'
-import classNames from 'classnames'
-import { Flex, FlexProps } from '../flex'
-import BoxPagination from './box_pagination'
-import { Pagination, PaginationProps } from '../pagination'
-interface BoxTableProps {
-  info?: ReactNode
-  action?: ReactNode
-  className?: string
-  style?: CSSProperties
-  headerProps?: FlexProps
-  pagination?: PaginationProps
-}
-
-type BoxTableInfoProps = HTMLAttributes<HTMLDivElement>
-
-const BoxTableInfo: FC<BoxTableInfoProps> = ({ className, ...rest }) => (
-  <div {...rest} className={classNames(className, 'gm-box-table-info')} />
-)
-
-const BoxTable: FC<BoxTableProps> = ({
-  info,
-  action,
-  children,
-  className,
-  headerProps = {},
-  pagination,
-  ...rest
-}) => {
-  const { className: headerClassName } = headerProps
-
-  return (
-    <>
-      <div {...rest} className={classNames('gm-box', 'gm-box-table', className)}>
-        <Flex
-          {...headerProps}
-          className={classNames('gm-box-table-header', headerClassName)}
-          alignCenter
-        >
-          <Flex>{info}</Flex>
-          <Flex flex />
-          <Flex>{action}</Flex>
-        </Flex>
-        <div>{children}</div>
-      </div>
-      {pagination && (
-        <BoxPagination>
-          <Pagination {...pagination} />
-        </BoxPagination>
-      )}
-    </>
-  )
-}
-
-export { BoxTable, BoxTableInfo }
-export default BoxTable
-export type { BoxTableProps, BoxTableInfoProps }
+import React, { CSSProperties, FC, HTMLAttributes, ReactNode } from 'react'
+import classNames from 'classnames'
+import { Flex, FlexProps } from '../flex'
+import BoxPagination from './box_pagination'
+import { Pagination, PaginationProps } from '../pagination'
+interface BoxTableProps {
+  info?: ReactNode
+  action?: ReactNode
+  className?: string
+  style?: CSSProperties
+  headerProps?: FlexProps
+  pagination?: PaginationProps
+}
+
+type BoxTableInfoProps = HTMLAttributes<HTMLDivElement>
+
+const BoxTableInfo: FC<BoxTableInfoProps> = ({ className, ...rest }) => (
+  <div {...rest} className={classNames(className, 'gm-box-table-info')} />
+)
+
+const BoxTable: FC<BoxTableProps> = ({
+  info,
+  action,
+  children,
+  className,
+  headerProps = {},
+  pagination,
+  ...rest
+}) => {
+  const { className: headerClassName } = headerProps
+
+  return (
+    <>
+      <div {...rest} className={classNames('gm-box', 'gm-box-table', className)}>
+        <Flex
+          {...headerProps}
+          className={classNames('gm-box-table-header', headerClassName)}
+          alignCenter
+        >
+          <Flex>{info}</Flex>
+          <Flex flex />
+          <Flex>{action}</Flex>
+        </Flex>
+        <div>{children}</div>
+      </div>
+      {pagination && (
+        <BoxPagination>
+          <Pagination {...pagination} />
+        </BoxPagination>
+      )}
+    </>
+  )
+}
+
+export { BoxTable, BoxTableInfo }
+export default BoxTable
+export type { BoxTableProps, BoxTableInfoProps }

package/src/component/box/index.ts

@@ -1,10 +1,10 @@
-export { default as Box } from './box'
-export { default as BoxForm, BoxFormMore } from './box_form'
-export { default as BoxPanel } from './box_panel'
-export { default as BoxTable, BoxTableInfo } from './box_table'
-export { default as BoxPagination } from './box_pagination'
-
-export type { BoxProps } from './box'
-export type { BoxFormProps } from './box_form'
-export type { BoxPanelProps } from './box_panel'
-export type { BoxTableProps, BoxTableInfoProps } from './box_table'
+export { default as Box } from './box'
+export { default as BoxForm, BoxFormMore } from './box_form'
+export { default as BoxPanel } from './box_panel'
+export { default as BoxTable, BoxTableInfo } from './box_table'
+export { default as BoxPagination } from './box_pagination'
+
+export type { BoxProps } from './box'
+export type { BoxFormProps } from './box_form'
+export type { BoxPanelProps } from './box_panel'
+export type { BoxTableProps, BoxTableInfoProps } from './box_table'