@gmfe/react 2.14.17 → 2.14.19-beta.0

package/src/component/box/box_panel.js

@@ -1,91 +1,91 @@
-import React, { useState } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-import _ from 'lodash'
-import Collapse from '../../component/collapse'
-import Flex from '../flex'
-import SVGUp from '../../../svg/up.svg'
-import SVGDown from '../../../svg/down.svg'
-
-const BoxPanel = ({
-  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, i) => {
-                if (i < summary.length - 1)
-                  return (
-                    <span>
-                      {s.text}:&nbsp;
-                      <span className='gm-text-primary gm-text-bold'>
-                        {s.value}
-                      </span>
-                      ,&nbsp;
-                    </span>
-                  )
-                else
-                  return (
-                    <span>
-                      {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 in={isCollapse}>
-        <div>{children}</div>
-      </Collapse>
-    </div>
-  )
-}
-
-BoxPanel.propTypes = {
-  title: PropTypes.string.isRequired,
-  /** undefined 就是没有此功能， false 默认收起 true 默认展开 */
-  collapse: PropTypes.bool,
-  /** 汇总信息，数组：数据格式为[{text, value}] or element */
-  summary: PropTypes.oneOfType([PropTypes.array, PropTypes.element]),
-  right: PropTypes.element,
-  className: PropTypes.string,
-  style: PropTypes.object
-}
-
-export default BoxPanel
+import React, { useState } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import _ from 'lodash'
+import Collapse from '../../component/collapse'
+import Flex from '../flex'
+import SVGUp from '../../../svg/up.svg'
+import SVGDown from '../../../svg/down.svg'
+
+const BoxPanel = ({
+  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, i) => {
+                if (i < summary.length - 1)
+                  return (
+                    <span>
+                      {s.text}:&nbsp;
+                      <span className='gm-text-primary gm-text-bold'>
+                        {s.value}
+                      </span>
+                      ,&nbsp;
+                    </span>
+                  )
+                else
+                  return (
+                    <span>
+                      {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 in={isCollapse}>
+        <div>{children}</div>
+      </Collapse>
+    </div>
+  )
+}
+
+BoxPanel.propTypes = {
+  title: PropTypes.string.isRequired,
+  /** undefined 就是没有此功能， false 默认收起 true 默认展开 */
+  collapse: PropTypes.bool,
+  /** 汇总信息，数组：数据格式为[{text, value}] or element */
+  summary: PropTypes.oneOfType([PropTypes.array, PropTypes.element]),
+  right: PropTypes.element,
+  className: PropTypes.string,
+  style: PropTypes.object
+}
+
+export default BoxPanel

package/src/component/box/box_table.js

@@ -1,51 +1,51 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-import Flex from '../flex'
-
-// 暂时没什么用
-const Info = props => {
-  return (
-    <div
-      {...props}
-      className={classNames('gm-box-table-info', props.className)}
-    />
-  )
-}
-
-Info.propTypes = {
-  className: PropTypes.string,
-  style: PropTypes.object
-}
-
-const BoxTable = props => {
-  const { info, action, children, className, headerProps = {}, ...rest } = props
-  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>
-  )
-}
-
-BoxTable.Info = Info
-
-BoxTable.propTypes = {
-  info: PropTypes.element,
-  action: PropTypes.element,
-  className: PropTypes.string,
-  style: PropTypes.object,
-  headerProps: PropTypes.object
-}
-
-export default BoxTable
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import Flex from '../flex'
+
+// 暂时没什么用
+const Info = props => {
+  return (
+    <div
+      {...props}
+      className={classNames('gm-box-table-info', props.className)}
+    />
+  )
+}
+
+Info.propTypes = {
+  className: PropTypes.string,
+  style: PropTypes.object
+}
+
+const BoxTable = props => {
+  const { info, action, children, className, headerProps = {}, ...rest } = props
+  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>
+  )
+}
+
+BoxTable.Info = Info
+
+BoxTable.propTypes = {
+  info: PropTypes.element,
+  action: PropTypes.element,
+  className: PropTypes.string,
+  style: PropTypes.object,
+  headerProps: PropTypes.object
+}
+
+export default BoxTable

package/src/component/box/index.js

@@ -1,6 +1,6 @@
-import Box from './box'
-import BoxForm from './box_form'
-import BoxTable from './box_table'
-import BoxPanel from './box_panel'
-
-export { Box, BoxForm, BoxTable, BoxPanel }
+import Box from './box'
+import BoxForm from './box_form'
+import BoxTable from './box_table'
+import BoxPanel from './box_panel'
+
+export { Box, BoxForm, BoxTable, BoxPanel }

package/src/component/box/style.less

@@ -1,39 +1,39 @@
-.gm-box {
-  background: white;
-
-  & + .gm-box {
-    border-top: 1px solid fadeout(@gm-frame-border-color, 50%);
-  }
-
-  &.gm-box-table {
-    .gm-box-table-header {
-      padding: 10px 20px;
-      height: 50px;
-      background-color: @gm-back-body-bg;
-    }
-  }
-
-  &.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 {
-        border-right: 1px solid @gm-frame-border-color;
-        font-size: 14px;
-        padding-left: 10px;
-        padding-right: 10px;
-      }
-
-      .gm-box-panel-summary {
-        padding-left: 10px;
-      }
-    }
-  }
-}
+.gm-box {
+  background: white;
+
+  & + .gm-box {
+    border-top: 1px solid fadeout(@gm-frame-border-color, 50%);
+  }
+
+  &.gm-box-table {
+    .gm-box-table-header {
+      padding: 10px 20px;
+      height: 50px;
+      background-color: @gm-back-body-bg;
+    }
+  }
+
+  &.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 {
+        border-right: 1px solid @gm-frame-border-color;
+        font-size: 14px;
+        padding-left: 10px;
+        padding-right: 10px;
+      }
+
+      .gm-box-panel-summary {
+        padding-left: 10px;
+      }
+    }
+  }
+}

package/src/component/button/button.stories.js

@@ -1,91 +1,91 @@
-import React from 'react'
-import { storiesOf } from '@storybook/react'
-import Button from './'
-
-function handleClick() {
-  console.log('click')
-  return new Promise(resolve => setTimeout(() => resolve(), 2000))
-}
-
-export const normal = () => (
-  <div>
-    默认
-    <div>
-      <Button>默认</Button>
-      <Button type='primary'>主色</Button>
-      <Button type='success'>成功</Button>
-      <Button type='danger'>危险</Button>
-      <Button type='link'>Link</Button>
-      <Button
-        type='link'
-        href='#/supply_chain/purchase/analysis?tab=3'
-        target='_blank'
-      >
-        链接
-      </Button>
-    </div>
-    plain
-    <div>
-      <Button plain>默认</Button>
-      <Button plain type='primary'>
-        主色
-      </Button>
-      <Button plain type='success'>
-        成功
-      </Button>
-      <Button plain type='danger'>
-        危险
-      </Button>
-      <Button plain type='link'>
-        Link
-      </Button>
-    </div>
-    disabled
-    <div>
-      <Button disabled>默认</Button>
-      <Button disabled type='primary'>
-        主色
-      </Button>
-      <Button disabled type='success'>
-        成功
-      </Button>
-      <Button disabled type='danger'>
-        危险
-      </Button>
-      <Button disabled type='link'>
-        Link
-      </Button>
-    </div>
-    size
-    <div>
-      <Button>默认</Button>
-      <Button size='large'>大的</Button>
-    </div>
-  </div>
-)
-
-export const loading = () => (
-  <div>
-    loading
-    <div>
-      <Button loading>loading</Button>
-    </div>
-    onClick promise
-    <div>
-      <Button onClick={handleClick}>点击显示 loading</Button>
-      <Button type='primary' onClick={handleClick}>
-        点击显示 loading
-      </Button>
-      <Button type='success' onClick={handleClick}>
-        点击显示 loading
-      </Button>
-      <Button type='danger' onClick={handleClick}>
-        点击显示 loading
-      </Button>
-    </div>
-  </div>
-)
-
-export default {
-  title: 'Button'
-}
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import Button from './'
+
+function handleClick() {
+  console.log('click')
+  return new Promise(resolve => setTimeout(() => resolve(), 2000))
+}
+
+export const normal = () => (
+  <div>
+    默认
+    <div>
+      <Button>默认</Button>
+      <Button type='primary'>主色</Button>
+      <Button type='success'>成功</Button>
+      <Button type='danger'>危险</Button>
+      <Button type='link'>Link</Button>
+      <Button
+        type='link'
+        href='#/supply_chain/purchase/analysis?tab=3'
+        target='_blank'
+      >
+        链接
+      </Button>
+    </div>
+    plain
+    <div>
+      <Button plain>默认</Button>
+      <Button plain type='primary'>
+        主色
+      </Button>
+      <Button plain type='success'>
+        成功
+      </Button>
+      <Button plain type='danger'>
+        危险
+      </Button>
+      <Button plain type='link'>
+        Link
+      </Button>
+    </div>
+    disabled
+    <div>
+      <Button disabled>默认</Button>
+      <Button disabled type='primary'>
+        主色
+      </Button>
+      <Button disabled type='success'>
+        成功
+      </Button>
+      <Button disabled type='danger'>
+        危险
+      </Button>
+      <Button disabled type='link'>
+        Link
+      </Button>
+    </div>
+    size
+    <div>
+      <Button>默认</Button>
+      <Button size='large'>大的</Button>
+    </div>
+  </div>
+)
+
+export const loading = () => (
+  <div>
+    loading
+    <div>
+      <Button loading>loading</Button>
+    </div>
+    onClick promise
+    <div>
+      <Button onClick={handleClick}>点击显示 loading</Button>
+      <Button type='primary' onClick={handleClick}>
+        点击显示 loading
+      </Button>
+      <Button type='success' onClick={handleClick}>
+        点击显示 loading
+      </Button>
+      <Button type='danger' onClick={handleClick}>
+        点击显示 loading
+      </Button>
+    </div>
+  </div>
+)
+
+export default {
+  title: 'Button'
+}