@gm-pc/react 1.24.9-beta.11 → 1.24.9-beta.13

package/src/component/box/stories.tsx

@@ -1,119 +1,119 @@
-import React from 'react'
-import Box from './box'
-import { BoxTable, BoxTableInfo } from './box_table'
-import BoxPagination from './box_pagination'
-import { BoxForm, BoxFormMore } from './box_form'
-import BoxPanel from './box_panel'
-import { FormItem, FormBlock, FormButton } from '../form'
-import { Button } from '../button'
-import { Price } from '../price'
-import { Pagination } from '../pagination'
-
-export const ComBox = () => (
-  <div>
-    <Box>这是一块内容</Box>
-    <Box>这是一块内容，内容直接会有 border </Box>
-    <Box hasGap>这是一块内容，切有内边距</Box>
-  </div>
-)
-
-export const ComBoxTable = () => (
-  <div>
-    <BoxTable
-      info={<BoxTableInfo>这是左边的内容</BoxTableInfo>}
-      action={<div>这是右边的内容</div>}
-    >
-      <div>真正的内容</div>
-    </BoxTable>
-  </div>
-)
-
-export const ComBoxPagination = () => (
-  <div>
-    <BoxPagination>
-      <Pagination
-        paging={{
-          offset: 0,
-          limit: 10,
-          need_count: true,
-          count: 100,
-          has_more: true,
-        }}
-        onChange={() => {
-          // something
-        }}
-      />
-    </BoxPagination>
-  </div>
-)
-
-export const ComBoxForm = () => (
-  <div>
-    <div>一定要用 FormBlock 包起来</div>
-    <BoxForm labelWidth='4em'>
-      <FormBlock col={3}>
-        <FormItem label='商品'>
-          <input type='text' />
-        </FormItem>
-        <FormItem label='啦啦'>
-          <input type='text' />
-        </FormItem>
-      </FormBlock>
-      <BoxFormMore>
-        <FormBlock col={3}>
-          <FormItem label='商品'>
-            <input type='text' />
-          </FormItem>
-          <FormItem label='啦啦'>
-            <input type='text' />
-          </FormItem>
-          <FormItem label='商品'>
-            <input type='text' />
-          </FormItem>
-          <FormItem label='啦啦'>
-            <input type='text' />
-          </FormItem>
-          <FormItem label='商品'>
-            <input type='text' />
-          </FormItem>
-          <FormItem label='啦啦'>
-            <input type='text' />
-          </FormItem>
-        </FormBlock>
-      </BoxFormMore>
-      <FormButton>
-        <Button type='primary' htmlType='submit'>
-          搜索
-        </Button>
-        <BoxFormMore>
-          <Button type='link'>重置</Button>
-        </BoxFormMore>
-      </FormButton>
-    </BoxForm>
-  </div>
-)
-
-export const ComBoxPanel = () => <BoxPanel title='商品明细'>lalala</BoxPanel>
-
-export const ComBoxPanelWithCollapseAndRight = () => (
-  <BoxPanel title='商品明细' collapse right={<div>233333333</div>}>
-    lalala
-  </BoxPanel>
-)
-export const ComBoxPanelWithSummary = () => (
-  <BoxPanel
-    title='商品明细'
-    collapse
-    summary={[
-      { text: '共计', value: 2 },
-      { text: '合计', value: Price.getCurrency() + 23389 },
-    ]}
-    right={<div>233333333</div>}
-  >
-    lalala
-  </BoxPanel>
-)
-
-export default {
-  title: '布局/Box',
-}
+import React from 'react'
+import Box from './box'
+import { BoxTable, BoxTableInfo } from './box_table'
+import BoxPagination from './box_pagination'
+import { BoxForm, BoxFormMore } from './box_form'
+import BoxPanel from './box_panel'
+import { FormItem, FormBlock, FormButton } from '../form'
+import { Button } from '../button'
+import { Price } from '../price'
+import { Pagination } from '../pagination'
+
+export const ComBox = () => (
+  <div>
+    <Box>这是一块内容</Box>
+    <Box>这是一块内容，内容直接会有 border </Box>
+    <Box hasGap>这是一块内容，切有内边距</Box>
+  </div>
+)
+
+export const ComBoxTable = () => (
+  <div>
+    <BoxTable
+      info={<BoxTableInfo>这是左边的内容</BoxTableInfo>}
+      action={<div>这是右边的内容</div>}
+    >
+      <div>真正的内容</div>
+    </BoxTable>
+  </div>
+)
+
+export const ComBoxPagination = () => (
+  <div>
+    <BoxPagination>
+      <Pagination
+        paging={{
+          offset: 0,
+          limit: 10,
+          need_count: true,
+          count: 100,
+          has_more: true,
+        }}
+        onChange={() => {
+          // something
+        }}
+      />
+    </BoxPagination>
+  </div>
+)
+
+export const ComBoxForm = () => (
+  <div>
+    <div>一定要用 FormBlock 包起来</div>
+    <BoxForm labelWidth='4em'>
+      <FormBlock col={3}>
+        <FormItem label='商品'>
+          <input type='text' />
+        </FormItem>
+        <FormItem label='啦啦'>
+          <input type='text' />
+        </FormItem>
+      </FormBlock>
+      <BoxFormMore>
+        <FormBlock col={3}>
+          <FormItem label='商品'>
+            <input type='text' />
+          </FormItem>
+          <FormItem label='啦啦'>
+            <input type='text' />
+          </FormItem>
+          <FormItem label='商品'>
+            <input type='text' />
+          </FormItem>
+          <FormItem label='啦啦'>
+            <input type='text' />
+          </FormItem>
+          <FormItem label='商品'>
+            <input type='text' />
+          </FormItem>
+          <FormItem label='啦啦'>
+            <input type='text' />
+          </FormItem>
+        </FormBlock>
+      </BoxFormMore>
+      <FormButton>
+        <Button type='primary' htmlType='submit'>
+          搜索
+        </Button>
+        <BoxFormMore>
+          <Button type='link'>重置</Button>
+        </BoxFormMore>
+      </FormButton>
+    </BoxForm>
+  </div>
+)
+
+export const ComBoxPanel = () => <BoxPanel title='商品明细'>lalala</BoxPanel>
+
+export const ComBoxPanelWithCollapseAndRight = () => (
+  <BoxPanel title='商品明细' collapse right={<div>233333333</div>}>
+    lalala
+  </BoxPanel>
+)
+export const ComBoxPanelWithSummary = () => (
+  <BoxPanel
+    title='商品明细'
+    collapse
+    summary={[
+      { text: '共计', value: 2 },
+      { text: '合计', value: Price.getCurrency() + 23389 },
+    ]}
+    right={<div>233333333</div>}
+  >
+    lalala
+  </BoxPanel>
+)
+
+export default {
+  title: '布局/Box',
+}

package/src/component/box/style.less

@@ -1,41 +1,41 @@
-.gm-box {
-  background: white;
-
-  & + .gm-box {
-    border-top: 1px solid var(--gm-color-border-special);
-    margin-top: -1px;
-  }
-
-  &.gm-box-table {
-    .gm-box-table-header {
-      padding: 10px 20px;
-      height: 50px;
-      background-color: var(--gm-color-bg-back);
-      border-bottom: 1px solid var(--gm-color-border);
-    }
-  }
-
-  &.gm-box-form {
-    padding: 10px 20px;
-  }
-
-  &.gm-box-panel {
-    padding: 20px 0 0 0;
-
-    .gm-box-panel-header {
-      margin: 0 0 15px;
-      padding: 0 20px;
-
-      .gm-box-panel-title {
-        font-size: 14px;
-        padding-left: 10px;
-      }
-
-      .gm-box-panel-summary {
-        border-left: 1px solid var(--gm-color-border);
-        margin-left: 10px;
-        padding-left: 10px;
-      }
-    }
-  }
-}
+.gm-box {
+  background: white;
+
+  & + .gm-box {
+    border-top: 1px solid var(--gm-color-border-special);
+    margin-top: -1px;
+  }
+
+  &.gm-box-table {
+    .gm-box-table-header {
+      padding: 10px 20px;
+      height: 50px;
+      background-color: var(--gm-color-bg-back);
+      border-bottom: 1px solid var(--gm-color-border);
+    }
+  }
+
+  &.gm-box-form {
+    padding: 10px 20px;
+  }
+
+  &.gm-box-panel {
+    padding: 20px 0 0 0;
+
+    .gm-box-panel-header {
+      margin: 0 0 15px;
+      padding: 0 20px;
+
+      .gm-box-panel-title {
+        font-size: 14px;
+        padding-left: 10px;
+      }
+
+      .gm-box-panel-summary {
+        border-left: 1px solid var(--gm-color-border);
+        margin-left: 10px;
+        padding-left: 10px;
+      }
+    }
+  }
+}

package/src/component/button/button.tsx

@@ -1,94 +1,94 @@
-import React, { FC, useState, MouseEvent, AnchorHTMLAttributes, useContext } from 'react'
-import _ from 'lodash'
-import classNames from 'classnames'
-import { is } from '@gm-common/tool'
-import { Loading } from '../loading'
-import { ConfigContext } from '../config_provider'
-
-type ButtonType = 'default' | 'primary' | 'success' | 'danger' | 'link'
-type ButtonSize = 'small' | 'middle' | 'large'
-type ButtonHTMLType = 'submit' | 'button' | 'reset'
-
-interface ButtonProps
-  extends AnchorHTMLAttributes<HTMLButtonElement | HTMLAnchorElement> {
-  type?: ButtonType
-  plain?: boolean
-  size?: ButtonSize
-  block?: boolean
-  htmlType?: ButtonHTMLType
-  loading?: boolean
-  href?: string
-  onClick?: (event: MouseEvent<HTMLButtonElement>) => void
-  disabled?: boolean
-}
-
-const Button: FC<ButtonProps> = ({
-  type = 'default',
-  plain,
-  size = 'middle',
-  block,
-  disabled,
-  onClick = _.noop,
-  loading,
-  href,
-  children,
-  htmlType = 'button',
-  className,
-  ...rest
-}) => {
-  const [isLoading, setIsLoading] = useState(false)
-  const { fontSize } = useContext(ConfigContext)
-
-  const loadFlag = loading || isLoading
-
-  const handleClick = (
-    event: MouseEvent<HTMLButtonElement> | MouseEvent<HTMLAnchorElement>
-  ) => {
-    if (loadFlag) {
-      return
-    }
-
-    const result = onClick(event)
-
-    if (!is.promise(result)) {
-      return
-    }
-
-    setIsLoading(true)
-
-    Promise.resolve(result).finally(() => {
-      setIsLoading(false)
-    })
-  }
-  const Tag = type === 'link' && href ? 'a' : 'button'
-
-  return (
-    <Tag
-      {...rest}
-      type={htmlType}
-      href={href}
-      className={classNames(
-        `gm-btn gm-btn-${type}`,
-        {
-          'gm-btn-block': block,
-          'gm-btn-plain': type !== 'link' && plain,
-          [`gm-btn-${size}`]: size,
-          [`gm-btn-text-${fontSize}`]: !!fontSize,
-        },
-        className
-      )}
-      disabled={loadFlag || disabled}
-      onClick={handleClick}
-    >
-      {loadFlag && (
-        <div style={{ marginRight: 4 }}>
-          <Loading size='1em' type={type} />
-        </div>
-      )}
-      {children}
-    </Tag>
-  )
-}
-
-export default Button
-export type { ButtonProps, ButtonType, ButtonSize, ButtonHTMLType }
+import React, { FC, useState, MouseEvent, AnchorHTMLAttributes, useContext } from 'react'
+import _ from 'lodash'
+import classNames from 'classnames'
+import { is } from '@gm-common/tool'
+import { Loading } from '../loading'
+import { ConfigContext } from '../config_provider'
+
+type ButtonType = 'default' | 'primary' | 'success' | 'danger' | 'link'
+type ButtonSize = 'small' | 'middle' | 'large'
+type ButtonHTMLType = 'submit' | 'button' | 'reset'
+
+interface ButtonProps
+  extends AnchorHTMLAttributes<HTMLButtonElement | HTMLAnchorElement> {
+  type?: ButtonType
+  plain?: boolean
+  size?: ButtonSize
+  block?: boolean
+  htmlType?: ButtonHTMLType
+  loading?: boolean
+  href?: string
+  onClick?: (event: MouseEvent<HTMLButtonElement>) => void
+  disabled?: boolean
+}
+
+const Button: FC<ButtonProps> = ({
+  type = 'default',
+  plain,
+  size = 'middle',
+  block,
+  disabled,
+  onClick = _.noop,
+  loading,
+  href,
+  children,
+  htmlType = 'button',
+  className,
+  ...rest
+}) => {
+  const [isLoading, setIsLoading] = useState(false)
+  const { fontSize } = useContext(ConfigContext)
+
+  const loadFlag = loading || isLoading
+
+  const handleClick = (
+    event: MouseEvent<HTMLButtonElement> | MouseEvent<HTMLAnchorElement>
+  ) => {
+    if (loadFlag) {
+      return
+    }
+
+    const result = onClick(event)
+
+    if (!is.promise(result)) {
+      return
+    }
+
+    setIsLoading(true)
+
+    Promise.resolve(result).finally(() => {
+      setIsLoading(false)
+    })
+  }
+  const Tag = type === 'link' && href ? 'a' : 'button'
+
+  return (
+    <Tag
+      {...rest}
+      type={htmlType}
+      href={href}
+      className={classNames(
+        `gm-btn gm-btn-${type}`,
+        {
+          'gm-btn-block': block,
+          'gm-btn-plain': type !== 'link' && plain,
+          [`gm-btn-${size}`]: size,
+          [`gm-btn-text-${fontSize}`]: !!fontSize,
+        },
+        className
+      )}
+      disabled={loadFlag || disabled}
+      onClick={handleClick}
+    >
+      {loadFlag && (
+        <div style={{ marginRight: 4 }}>
+          <Loading size='1em' type={type} />
+        </div>
+      )}
+      {children}
+    </Tag>
+  )
+}
+
+export default Button
+export type { ButtonProps, ButtonType, ButtonSize, ButtonHTMLType }

package/src/component/button/button_text.tsx

@@ -1,33 +1,33 @@
-import React, { MouseEvent, FC, HTMLAttributes } from 'react'
-import classNames from 'classnames'
-
-interface ButtonTextProps extends HTMLAttributes<HTMLSpanElement> {
-  type?: 'default' | 'primary' | 'success' | 'danger'
-  disabled?: boolean
-  onClick?(event: MouseEvent<HTMLSpanElement>): void
-}
-
-const ButtonText: FC<ButtonTextProps> = ({
-  type = 'default',
-  disabled,
-  children,
-  className,
-  ...rest
-}) => {
-  return (
-    <span
-      {...rest}
-      className={classNames(
-        'gm-button-text',
-        `gm-button-text-${type}`,
-        { disabled },
-        className
-      )}
-    >
-      {children}
-    </span>
-  )
-}
-
-export default ButtonText
-export type { ButtonTextProps }
+import React, { MouseEvent, FC, HTMLAttributes } from 'react'
+import classNames from 'classnames'
+
+interface ButtonTextProps extends HTMLAttributes<HTMLSpanElement> {
+  type?: 'default' | 'primary' | 'success' | 'danger'
+  disabled?: boolean
+  onClick?(event: MouseEvent<HTMLSpanElement>): void
+}
+
+const ButtonText: FC<ButtonTextProps> = ({
+  type = 'default',
+  disabled,
+  children,
+  className,
+  ...rest
+}) => {
+  return (
+    <span
+      {...rest}
+      className={classNames(
+        'gm-button-text',
+        `gm-button-text-${type}`,
+        { disabled },
+        className
+      )}
+    >
+      {children}
+    </span>
+  )
+}
+
+export default ButtonText
+export type { ButtonTextProps }

package/src/component/button/index.ts

@@ -1,4 +1,4 @@
-export { default as Button } from './button'
-export { default as ButtonText } from './button_text'
-export type { ButtonProps, ButtonType, ButtonSize, ButtonHTMLType } from './button'
-export type { ButtonTextProps } from './button_text'
+export { default as Button } from './button'
+export { default as ButtonText } from './button_text'
+export type { ButtonProps, ButtonType, ButtonSize, ButtonHTMLType } from './button'
+export type { ButtonTextProps } from './button_text'