@gmfe/react 2.14.17 → 2.14.19-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gmfe/react",
-  "version": "2.14.17",
+  "version": "2.14.19-beta.0",
   "description": "",
   "author": "liyatang <liyatang@qq.com>",
   "homepage": "https://github.com/gmfe/gmfe#readme",
@@ -27,7 +27,7 @@
   },
   "dependencies": {
     "@gm-common/tool": "^1.0.0",
-    "@gmfe/locales": "^2.14.17",
+    "@gmfe/locales": "^2.14.19-beta.0",
     "big.js": "^5.2.2",
     "classnames": "^2.2.5",
     "lodash": "^4.17.14",
@@ -35,5 +35,5 @@
     "prop-types": "^15.7.2",
     "react-window": "^1.8.5"
   },
-  "gitHead": "b67a2bc4a20a13c4cb8c99cd4b5ed80f12e7c879"
+  "gitHead": "575d13d8d27800bccbc2631f3a68a8c590524a16"
 }

package/src/common/hooks/index.js

@@ -1,3 +1,3 @@
-import useMutationObserver from './use_mutation_observer'
-
-export { useMutationObserver }
+import useMutationObserver from './use_mutation_observer'
+
+export { useMutationObserver }

package/src/common/hooks/use_mutation_observer.js

@@ -1,25 +1,25 @@
-import { useEffect } from 'react'
-
-function useMutationObserver(
-  ref,
-  callback,
-  options = {
-    attributes: true,
-    characterData: true,
-    subtree: true,
-    childList: true
-  }
-) {
-  useEffect(() => {
-    if (ref.current) {
-      const observer = new window.MutationObserver(callback)
-
-      observer.observe(ref.current, options)
-      return () => {
-        observer.disconnect()
-      }
-    }
-  }, [callback, options])
-}
-
-export default useMutationObserver
+import { useEffect } from 'react'
+
+function useMutationObserver(
+  ref,
+  callback,
+  options = {
+    attributes: true,
+    characterData: true,
+    subtree: true,
+    childList: true
+  }
+) {
+  useEffect(() => {
+    if (ref.current) {
+      const observer = new window.MutationObserver(callback)
+
+      observer.observe(ref.current, options)
+      return () => {
+        observer.disconnect()
+      }
+    }
+  }, [callback, options])
+}
+
+export default useMutationObserver

package/src/common/util.js

@@ -1,52 +1,52 @@
-import _ from 'lodash'
-
-/**
- * 筛选叶子节点，返回满足predicate条件的树
- * @param list 树状数组
- * @param predicate 断言
- * @return {array}
- */
-export function filterGroupListLeaf(list, predicate) {
-  return _.filter(
-    _.map(list, item => {
-      const copy = Object.assign({}, item)
-      if (copy.children) {
-        copy.children = filterGroupListLeaf(copy.children, predicate)
-      }
-      return copy
-    }),
-    d => {
-      if (d.children) {
-        return !!d.children.length
-      } else {
-        return predicate(d)
-      }
-    }
-  )
-}
-
-/**
- * 筛选所有节点，返回满足predicate条件的树
- * @param list 树状数组
- * @param predicate 断言
- * @return {array}
- */
-export function filterGroupListNode(list, predicate) {
-  return _.filter(
-    _.map(list, item => {
-      const copy = Object.assign({}, item)
-      if (predicate(copy)) return copy
-      if (copy.children) {
-        copy.children = filterGroupListNode(copy.children, predicate)
-      }
-      return copy
-    }),
-    d => {
-      if (d.children) {
-        return !!d.children.length
-      } else {
-        return predicate(d)
-      }
-    }
-  )
-}
+import _ from 'lodash'
+
+/**
+ * 筛选叶子节点，返回满足predicate条件的树
+ * @param list 树状数组
+ * @param predicate 断言
+ * @return {array}
+ */
+export function filterGroupListLeaf(list, predicate) {
+  return _.filter(
+    _.map(list, item => {
+      const copy = Object.assign({}, item)
+      if (copy.children) {
+        copy.children = filterGroupListLeaf(copy.children, predicate)
+      }
+      return copy
+    }),
+    d => {
+      if (d.children) {
+        return !!d.children.length
+      } else {
+        return predicate(d)
+      }
+    }
+  )
+}
+
+/**
+ * 筛选所有节点，返回满足predicate条件的树
+ * @param list 树状数组
+ * @param predicate 断言
+ * @return {array}
+ */
+export function filterGroupListNode(list, predicate) {
+  return _.filter(
+    _.map(list, item => {
+      const copy = Object.assign({}, item)
+      if (predicate(copy)) return copy
+      if (copy.children) {
+        copy.children = filterGroupListNode(copy.children, predicate)
+      }
+      return copy
+    }),
+    d => {
+      if (d.children) {
+        return !!d.children.length
+      } else {
+        return predicate(d)
+      }
+    }
+  )
+}

package/src/component/affix/affix.stories.js

@@ -1,13 +1,13 @@
-import React from 'react'
-import { storiesOf } from '@storybook/react'
-import Affix from './index'
-
-storiesOf('Affix', module).add('default', () => (
-  <div>
-    <div style={{ height: '1500px' }} />
-    <Affix bottom={0} top={0}>
-      <div style={{ backgroundColor: 'red' }}>我会被钉住在底部 和 顶部</div>
-    </Affix>
-    <div style={{ height: '1500px' }} />
-  </div>
-))
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import Affix from './index'
+
+storiesOf('Affix', module).add('default', () => (
+  <div>
+    <div style={{ height: '1500px' }} />
+    <Affix bottom={0} top={0}>
+      <div style={{ backgroundColor: 'red' }}>我会被钉住在底部 和 顶部</div>
+    </Affix>
+    <div style={{ height: '1500px' }} />
+  </div>
+))

package/src/component/affix/index.js

@@ -1,21 +1,21 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-const Affix = ({ children, top, bottom }) => {
-  const style = {
-    position: 'sticky',
-    bottom: bottom !== undefined ? `${bottom}px` : null,
-    top: top !== undefined ? `${top}px` : null,
-    zIndex: 950
-  }
-
-  return <div style={style}>{children}</div>
-}
-
-Affix.propTypes = {
-  children: PropTypes.any,
-  top: PropTypes.number,
-  bottom: PropTypes.number
-}
-
-export default Affix
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const Affix = ({ children, top, bottom }) => {
+  const style = {
+    position: 'sticky',
+    bottom: bottom !== undefined ? `${bottom}px` : null,
+    top: top !== undefined ? `${top}px` : null,
+    zIndex: 950
+  }
+
+  return <div style={style}>{children}</div>
+}
+
+Affix.propTypes = {
+  children: PropTypes.any,
+  top: PropTypes.number,
+  bottom: PropTypes.number
+}
+
+export default Affix

package/src/component/box/box.js

@@ -1,31 +1,31 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-/** Box，用来包裹一块内容 */
-const Box = 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>
-  )
-}
-
-Box.propTypes = {
-  hasGap: PropTypes.bool,
-  className: PropTypes.string,
-  style: PropTypes.object
-}
-
-export default Box
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+/** Box，用来包裹一块内容 */
+const Box = 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>
+  )
+}
+
+Box.propTypes = {
+  hasGap: PropTypes.bool,
+  className: PropTypes.string,
+  style: PropTypes.object
+}
+
+export default Box

package/src/component/box/box.stories.js

@@ -1,94 +1,94 @@
-import React from 'react'
-import { storiesOf } from '@storybook/react'
-import Box from './box'
-import BoxTable from './box_table'
-import BoxForm from './box_form'
-import BoxPanel from './box_panel'
-import { FormItem, FormBlock, FormButton } from '../form'
-import Price from '../price'
-import { Button } from '../../index'
-
-storiesOf('Box', module)
-  .add('Box', () => (
-    <div>
-      <Box>这是一块内容</Box>
-      <Box>这是一块内容，内容直接会有 border </Box>
-      <Box hasGap>这是一块内容，切有内边距</Box>
-    </div>
-  ))
-  .add('BoxTable', () => (
-    <div>
-      <BoxTable
-        info={<BoxTable.Info>这是左边的内容</BoxTable.Info>}
-        action={<div>这是右边的内容</div>}
-      >
-        <div>真正的内容</div>
-      </BoxTable>
-    </div>
-  ))
-  .add(
-    'BoxForm',
-    () => (
-      <div>
-        <BoxForm btnPosition='left'>
-          <FormBlock col={3}>
-            <FormItem label='商品'>
-              <input type='text' />
-            </FormItem>
-            <FormItem label='啦啦'>
-              <input type='text' />
-            </FormItem>
-          </FormBlock>
-          <BoxForm.More>
-            <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>
-          </BoxForm.More>
-          <FormButton>
-            <Button type='primary' htmlType='submit'>
-              搜索
-            </Button>
-            <BoxForm.More>
-              <Button type='link'>重置</Button>
-            </BoxForm.More>
-          </FormButton>
-        </BoxForm>
-      </div>
-    ),
-    {
-      info: {
-        text: '一定要用 FormBlock 包起来'
-      }
-    }
-  )
-  .add('BoxPanel', () => <BoxPanel title='商品明细'>lalala</BoxPanel>)
-  .add('BoxPanel with collapse and total', () => (
-    <BoxPanel
-      title='商品明细'
-      collapse
-      summary={[
-        { text: '共计', value: 2 },
-        { text: '合计', value: Price.getCurrency() + 23389 }
-      ]}
-      right={<div>233333333</div>}
-    >
-      lalala
-    </BoxPanel>
-  ))
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import Box from './box'
+import BoxTable from './box_table'
+import BoxForm from './box_form'
+import BoxPanel from './box_panel'
+import { FormItem, FormBlock, FormButton } from '../form'
+import Price from '../price'
+import { Button } from '../../index'
+
+storiesOf('Box', module)
+  .add('Box', () => (
+    <div>
+      <Box>这是一块内容</Box>
+      <Box>这是一块内容，内容直接会有 border </Box>
+      <Box hasGap>这是一块内容，切有内边距</Box>
+    </div>
+  ))
+  .add('BoxTable', () => (
+    <div>
+      <BoxTable
+        info={<BoxTable.Info>这是左边的内容</BoxTable.Info>}
+        action={<div>这是右边的内容</div>}
+      >
+        <div>真正的内容</div>
+      </BoxTable>
+    </div>
+  ))
+  .add(
+    'BoxForm',
+    () => (
+      <div>
+        <BoxForm btnPosition='left'>
+          <FormBlock col={3}>
+            <FormItem label='商品'>
+              <input type='text' />
+            </FormItem>
+            <FormItem label='啦啦'>
+              <input type='text' />
+            </FormItem>
+          </FormBlock>
+          <BoxForm.More>
+            <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>
+          </BoxForm.More>
+          <FormButton>
+            <Button type='primary' htmlType='submit'>
+              搜索
+            </Button>
+            <BoxForm.More>
+              <Button type='link'>重置</Button>
+            </BoxForm.More>
+          </FormButton>
+        </BoxForm>
+      </div>
+    ),
+    {
+      info: {
+        text: '一定要用 FormBlock 包起来'
+      }
+    }
+  )
+  .add('BoxPanel', () => <BoxPanel title='商品明细'>lalala</BoxPanel>)
+  .add('BoxPanel with collapse and total', () => (
+    <BoxPanel
+      title='商品明细'
+      collapse
+      summary={[
+        { text: '共计', value: 2 },
+        { text: '合计', value: Price.getCurrency() + 23389 }
+      ]}
+      right={<div>233333333</div>}
+    >
+      lalala
+    </BoxPanel>
+  ))

package/src/component/box/box_form.js

@@ -1,77 +1,77 @@
-import React, { useState } from 'react'
-import { Form } from '../form'
-import Flex from '../flex'
-import IconDownUp from '../icon_down_up'
-import Button from '../button'
-import _ from 'lodash'
-
-const BoxFormContext = React.createContext({
-  open: false,
-  onHasMore: _.noop
-})
-
-const More = props => {
-  return (
-    <BoxFormContext.Consumer>
-      {({ open, onHasMore }) => {
-        onHasMore(true)
-
-        if (!open) {
-          return null
-        }
-        return props.children
-      }}
-    </BoxFormContext.Consumer>
-  )
-}
-
-const BoxForm = props => {
-  const [hasMore, setHasMore] = useState(false)
-  const [open, setOpen] = useState(false)
-
-  const handleToggle = () => {
-    setOpen(!open)
-  }
-
-  const handleHasMore = () => {
-    if (!hasMore) {
-      setHasMore(true)
-    }
-  }
-
-  return (
-    <div className='gm-box gm-box-form'>
-      <Flex>
-        <Flex flex column>
-          <BoxFormContext.Provider
-            value={{
-              open,
-              onHasMore: handleHasMore
-            }}
-          >
-            <Form inline={!open} {...props}>
-              {props.children}
-            </Form>
-          </BoxFormContext.Provider>
-        </Flex>
-        {hasMore && (
-          <Button
-            type='link'
-            className='gm-padding-right-0'
-            onClick={handleToggle}
-          >
-            {open ? '收起' : ''}高级筛选 <IconDownUp active={open} />
-          </Button>
-        )}
-      </Flex>
-    </div>
-  )
-}
-
-BoxForm.More = More
-
-BoxForm.propTypes = {
-  ...Form.propTypes
-}
-
-export default BoxForm
+import React, { useState } from 'react'
+import { Form } from '../form'
+import Flex from '../flex'
+import IconDownUp from '../icon_down_up'
+import Button from '../button'
+import _ from 'lodash'
+
+const BoxFormContext = React.createContext({
+  open: false,
+  onHasMore: _.noop
+})
+
+const More = props => {
+  return (
+    <BoxFormContext.Consumer>
+      {({ open, onHasMore }) => {
+        onHasMore(true)
+
+        if (!open) {
+          return null
+        }
+        return props.children
+      }}
+    </BoxFormContext.Consumer>
+  )
+}
+
+const BoxForm = props => {
+  const [hasMore, setHasMore] = useState(false)
+  const [open, setOpen] = useState(false)
+
+  const handleToggle = () => {
+    setOpen(!open)
+  }
+
+  const handleHasMore = () => {
+    if (!hasMore) {
+      setHasMore(true)
+    }
+  }
+
+  return (
+    <div className='gm-box gm-box-form'>
+      <Flex>
+        <Flex flex column>
+          <BoxFormContext.Provider
+            value={{
+              open,
+              onHasMore: handleHasMore
+            }}
+          >
+            <Form inline={!open} {...props}>
+              {props.children}
+            </Form>
+          </BoxFormContext.Provider>
+        </Flex>
+        {hasMore && (
+          <Button
+            type='link'
+            className='gm-padding-right-0'
+            onClick={handleToggle}
+          >
+            {open ? '收起' : ''}高级筛选 <IconDownUp active={open} />
+          </Button>
+        )}
+      </Flex>
+    </div>
+  )
+}
+
+BoxForm.More = More
+
+BoxForm.propTypes = {
+  ...Form.propTypes
+}
+
+export default BoxForm