@gmfe/react 2.14.17 → 2.14.19-beta.0

package/src/component/function_set/overlay.js

@@ -1,56 +1,56 @@
-import React, { useState } from 'react'
-import PropTypes from 'prop-types'
-import LevelList from '../level_list'
-import _ from 'lodash'
-
-function processDataWithValue(data, map, pre = '') {
-  return _.map(data, (v, i) => {
-    const value = `${pre}_${i}`
-    map[value] = v
-
-    if (v.children) {
-      v.children = processDataWithValue(v.children, map, value)
-    }
-
-    return {
-      value,
-      ...v
-    }
-  })
-}
-
-const FunctionSetOverlay = props => {
-  const { data, onSelect, isReverse } = props
-  const [will, setWill] = useState([])
-
-  // 做个map存起来，方便快速通过 value 找到 item
-  const map = {}
-  const newData = processDataWithValue(data, map)
-
-  const handleSelect = selected => {
-    // 取最后一个
-    const item = map[selected.slice(-1)[0]]
-    onSelect(item)
-  }
-
-  return (
-    <LevelList
-      data={newData}
-      selected={[]}
-      onSelect={handleSelect}
-      willActiveSelected={will}
-      onWillActiveSelect={will => setWill(will)}
-      isReverse={isReverse}
-      isForFunctionSet
-    />
-  )
-}
-
-FunctionSetOverlay.propTypes = {
-  /** [{text, disabled, onClick, children}] */
-  data: PropTypes.array.isRequired,
-  onSelect: PropTypes.func.isRequired,
-  isReverse: PropTypes.bool
-}
-
-export default FunctionSetOverlay
+import React, { useState } from 'react'
+import PropTypes from 'prop-types'
+import LevelList from '../level_list'
+import _ from 'lodash'
+
+function processDataWithValue(data, map, pre = '') {
+  return _.map(data, (v, i) => {
+    const value = `${pre}_${i}`
+    map[value] = v
+
+    if (v.children) {
+      v.children = processDataWithValue(v.children, map, value)
+    }
+
+    return {
+      value,
+      ...v
+    }
+  })
+}
+
+const FunctionSetOverlay = props => {
+  const { data, onSelect, isReverse } = props
+  const [will, setWill] = useState([])
+
+  // 做个map存起来，方便快速通过 value 找到 item
+  const map = {}
+  const newData = processDataWithValue(data, map)
+
+  const handleSelect = selected => {
+    // 取最后一个
+    const item = map[selected.slice(-1)[0]]
+    onSelect(item)
+  }
+
+  return (
+    <LevelList
+      data={newData}
+      selected={[]}
+      onSelect={handleSelect}
+      willActiveSelected={will}
+      onWillActiveSelect={will => setWill(will)}
+      isReverse={isReverse}
+      isForFunctionSet
+    />
+  )
+}
+
+FunctionSetOverlay.propTypes = {
+  /** [{text, disabled, onClick, children}] */
+  data: PropTypes.array.isRequired,
+  onSelect: PropTypes.func.isRequired,
+  isReverse: PropTypes.bool
+}
+
+export default FunctionSetOverlay

package/src/component/grid/col.js

@@ -1,72 +1,72 @@
-import React from 'react'
-import classNames from 'classnames'
-import PropTypes from 'prop-types'
-import _ from 'lodash'
-import { withWrapContext } from './util'
-
-const sizeList = ['sm', 'md', 'lg', 'xl']
-
-const Col = withWrapContext(
-  ({ gutter, children, className, span, offset, style, ...rest }) => {
-    let sizeClasses = {}
-    _.forEach(sizeList, size => {
-      let sizeProps = {}
-      if (typeof rest[size] === 'number') {
-        sizeProps.span = rest[size]
-      } else if (typeof rest[size] === 'object') {
-        sizeProps = rest[size] || {}
-      }
-      delete rest[size]
-
-      sizeClasses = {
-        ...sizeClasses,
-        [`gm-grid-col-${size}-${sizeProps.span}`]: sizeProps.span,
-        [`gm-grid-col-${size}-offset-${sizeProps.offset}`]: sizeProps.offset
-      }
-    })
-
-    const classes = classNames(
-      'gm-grid-col',
-      {
-        [`gm-grid-col-${span}`]: span,
-        [`gm-grid-col-offset-${offset}`]: offset
-      },
-      className,
-      sizeClasses
-    )
-    const colStyle =
-      gutter > 0
-        ? {
-            paddingLeft: gutter / 2,
-            paddingRight: gutter / 2,
-            ...style
-          }
-        : style
-
-    return (
-      <div style={colStyle} {...rest} className={classes}>
-        {children}
-      </div>
-    )
-  }
-)
-
-Col.propTypes = {
-  className: PropTypes.string,
-  /** 栅格占位格数，为 0 时相当于 display: none */
-  span: PropTypes.number,
-  /** 栅格左侧的间隔格数 */
-  offset: PropTypes.number,
-  /** 768px，响应式栅格，可为栅格数或一个包含其他属性的对象 */
-  sm: PropTypes.oneOfType([PropTypes.object, PropTypes.number]),
-  /** 992px，响应式栅格，可为栅格数或一个包含其他属性的对象 */
-  md: PropTypes.oneOfType([PropTypes.object, PropTypes.number]),
-  /** 1200px, 响应式栅格，可为栅格数或一个包含其他属性的对象 */
-  lg: PropTypes.oneOfType([PropTypes.object, PropTypes.number]),
-  /** 1920px, 响应式栅格，可为栅格数或一个包含其他属性的对象 */
-  xl: PropTypes.oneOfType([PropTypes.object, PropTypes.number])
-}
-
-Col.displayName = 'Col'
-
-export default Col
+import React from 'react'
+import classNames from 'classnames'
+import PropTypes from 'prop-types'
+import _ from 'lodash'
+import { withWrapContext } from './util'
+
+const sizeList = ['sm', 'md', 'lg', 'xl']
+
+const Col = withWrapContext(
+  ({ gutter, children, className, span, offset, style, ...rest }) => {
+    let sizeClasses = {}
+    _.forEach(sizeList, size => {
+      let sizeProps = {}
+      if (typeof rest[size] === 'number') {
+        sizeProps.span = rest[size]
+      } else if (typeof rest[size] === 'object') {
+        sizeProps = rest[size] || {}
+      }
+      delete rest[size]
+
+      sizeClasses = {
+        ...sizeClasses,
+        [`gm-grid-col-${size}-${sizeProps.span}`]: sizeProps.span,
+        [`gm-grid-col-${size}-offset-${sizeProps.offset}`]: sizeProps.offset
+      }
+    })
+
+    const classes = classNames(
+      'gm-grid-col',
+      {
+        [`gm-grid-col-${span}`]: span,
+        [`gm-grid-col-offset-${offset}`]: offset
+      },
+      className,
+      sizeClasses
+    )
+    const colStyle =
+      gutter > 0
+        ? {
+            paddingLeft: gutter / 2,
+            paddingRight: gutter / 2,
+            ...style
+          }
+        : style
+
+    return (
+      <div style={colStyle} {...rest} className={classes}>
+        {children}
+      </div>
+    )
+  }
+)
+
+Col.propTypes = {
+  className: PropTypes.string,
+  /** 栅格占位格数，为 0 时相当于 display: none */
+  span: PropTypes.number,
+  /** 栅格左侧的间隔格数 */
+  offset: PropTypes.number,
+  /** 768px，响应式栅格，可为栅格数或一个包含其他属性的对象 */
+  sm: PropTypes.oneOfType([PropTypes.object, PropTypes.number]),
+  /** 992px，响应式栅格，可为栅格数或一个包含其他属性的对象 */
+  md: PropTypes.oneOfType([PropTypes.object, PropTypes.number]),
+  /** 1200px, 响应式栅格，可为栅格数或一个包含其他属性的对象 */
+  lg: PropTypes.oneOfType([PropTypes.object, PropTypes.number]),
+  /** 1920px, 响应式栅格，可为栅格数或一个包含其他属性的对象 */
+  xl: PropTypes.oneOfType([PropTypes.object, PropTypes.number])
+}
+
+Col.displayName = 'Col'
+
+export default Col

package/src/component/grid/grid.stories.js

@@ -1,123 +1,123 @@
-import React from 'react'
-import { storiesOf } from '@storybook/react'
-import Row from './row'
-import Col from './col'
-
-storiesOf('grid', module).add('default', () => (
-  <div className='gm-padding-10'>
-    占满24栅格
-    <Row className='gm-back-bg' style={{ height: '120px' }}>
-      <Col className='gm-bg-primary' style={{ height: '60px' }} span={24}>
-        Col 24
-      </Col>
-    </Row>
-    <br />
-    三等分，每块占8栅格
-    <Row justifyStart className='gm-back-bg' style={{ height: '120px' }}>
-      <Col className='gm-bg-primary' style={{ height: '60px' }} span={8}>
-        Col 8
-      </Col>
-      <Col className='gm-bg-primary' style={{ height: '60px' }} span={8}>
-        Col 8
-      </Col>
-      <Col className='gm-bg-primary' style={{ height: '60px' }} span={8}>
-        Col 8
-      </Col>
-    </Row>
-    <br />
-    第一块占8栅格，第二块，左偏移8栅格，占8栅格
-    <Row
-      alignCenter
-      justifyCenter
-      className='gm-back-bg'
-      style={{ height: '120px' }}
-    >
-      <Col className='gm-bg-primary' style={{ height: '60px' }} span={8}>
-        Col 8
-      </Col>
-      <Col
-        className='gm-bg-primary'
-        style={{ height: '60px' }}
-        span={8}
-        offset={8}
-      >
-        Col 8, Offset 8
-      </Col>
-    </Row>
-    <br />
-    第一块占4栅格，第二块和第三块，左偏移4栅格，占4栅格
-    <Row alignEnd className='gm-back-bg' style={{ height: '120px' }}>
-      <Col className='gm-bg-primary' style={{ height: '60px' }} span={4}>
-        Col 4
-      </Col>
-      <Col
-        className='gm-bg-primary'
-        style={{ height: '60px' }}
-        span={4}
-        offset={4}
-      >
-        Col 4, Offset 4
-      </Col>
-      <Col
-        className='gm-bg-primary'
-        style={{ height: '60px' }}
-        span={4}
-        offset={4}
-      >
-        Col 4, Offset 4
-      </Col>
-    </Row>
-    <br />
-    响应式
-    <Row className='gm-back-bg' style={{ height: '120px' }}>
-      <Col
-        className='gm-bg-primary'
-        sm={{ span: 4, offset: 4 }}
-        md={{ span: 5, offset: 1 }}
-        lg={{ span: 6, offset: 2 }}
-        xl={8}
-        style={{ height: '60px' }}
-      >
-        Col
-      </Col>
-      <Col
-        className='gm-bg-primary'
-        sm={{ span: 4, offset: 4 }}
-        md={{ span: 11, offset: 1 }}
-        lg={{ span: 6, offset: 2 }}
-        xl={8}
-        style={{ height: '60px' }}
-      >
-        Col
-      </Col>
-      <Col
-        className='gm-bg-primary'
-        sm={{ span: 4, offset: 4 }}
-        md={{ span: 5, offset: 1 }}
-        lg={{ span: 6, offset: 2 }}
-        xl={8}
-        style={{ height: '60px' }}
-      >
-        Col
-      </Col>
-    </Row>
-    <br />
-    gutter
-    <Row
-      justifyStart
-      className='gm-back-bg'
-      style={{ height: '120px' }}
-      gutter={8}
-    >
-      <Col className='gm-bg-primary' style={{ height: '60px' }} span={8}>
-        Col 8Col 8Col 8Col 8Col 8Col 8Col 8Col 8Col 8Col 8Col 8Col 8Col 8Col 8
-      </Col>
-      <Col className='gm-bg-primary' style={{ height: '60px' }} span={8}>
-        Col 8Col 8Col 8Col 8Col 8Col 8Col 8Col 8Col 8Col 8Col 8Col 8Col 8Col 8
-      </Col>
-      <Col className='gm-bg-primary' style={{ height: '60px' }} span={8}>
-        Col 8Col 8Col 8Col 8Col 8Col 8Col 8Col 8Col 8Col 8Col 8Col 8Col 8Col 8
-      </Col>
-    </Row>
-  </div>
-))
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import Row from './row'
+import Col from './col'
+
+storiesOf('grid', module).add('default', () => (
+  <div className='gm-padding-10'>
+    占满24栅格
+    <Row className='gm-back-bg' style={{ height: '120px' }}>
+      <Col className='gm-bg-primary' style={{ height: '60px' }} span={24}>
+        Col 24
+      </Col>
+    </Row>
+    <br />
+    三等分，每块占8栅格
+    <Row justifyStart className='gm-back-bg' style={{ height: '120px' }}>
+      <Col className='gm-bg-primary' style={{ height: '60px' }} span={8}>
+        Col 8
+      </Col>
+      <Col className='gm-bg-primary' style={{ height: '60px' }} span={8}>
+        Col 8
+      </Col>
+      <Col className='gm-bg-primary' style={{ height: '60px' }} span={8}>
+        Col 8
+      </Col>
+    </Row>
+    <br />
+    第一块占8栅格，第二块，左偏移8栅格，占8栅格
+    <Row
+      alignCenter
+      justifyCenter
+      className='gm-back-bg'
+      style={{ height: '120px' }}
+    >
+      <Col className='gm-bg-primary' style={{ height: '60px' }} span={8}>
+        Col 8
+      </Col>
+      <Col
+        className='gm-bg-primary'
+        style={{ height: '60px' }}
+        span={8}
+        offset={8}
+      >
+        Col 8, Offset 8
+      </Col>
+    </Row>
+    <br />
+    第一块占4栅格，第二块和第三块，左偏移4栅格，占4栅格
+    <Row alignEnd className='gm-back-bg' style={{ height: '120px' }}>
+      <Col className='gm-bg-primary' style={{ height: '60px' }} span={4}>
+        Col 4
+      </Col>
+      <Col
+        className='gm-bg-primary'
+        style={{ height: '60px' }}
+        span={4}
+        offset={4}
+      >
+        Col 4, Offset 4
+      </Col>
+      <Col
+        className='gm-bg-primary'
+        style={{ height: '60px' }}
+        span={4}
+        offset={4}
+      >
+        Col 4, Offset 4
+      </Col>
+    </Row>
+    <br />
+    响应式
+    <Row className='gm-back-bg' style={{ height: '120px' }}>
+      <Col
+        className='gm-bg-primary'
+        sm={{ span: 4, offset: 4 }}
+        md={{ span: 5, offset: 1 }}
+        lg={{ span: 6, offset: 2 }}
+        xl={8}
+        style={{ height: '60px' }}
+      >
+        Col
+      </Col>
+      <Col
+        className='gm-bg-primary'
+        sm={{ span: 4, offset: 4 }}
+        md={{ span: 11, offset: 1 }}
+        lg={{ span: 6, offset: 2 }}
+        xl={8}
+        style={{ height: '60px' }}
+      >
+        Col
+      </Col>
+      <Col
+        className='gm-bg-primary'
+        sm={{ span: 4, offset: 4 }}
+        md={{ span: 5, offset: 1 }}
+        lg={{ span: 6, offset: 2 }}
+        xl={8}
+        style={{ height: '60px' }}
+      >
+        Col
+      </Col>
+    </Row>
+    <br />
+    gutter
+    <Row
+      justifyStart
+      className='gm-back-bg'
+      style={{ height: '120px' }}
+      gutter={8}
+    >
+      <Col className='gm-bg-primary' style={{ height: '60px' }} span={8}>
+        Col 8Col 8Col 8Col 8Col 8Col 8Col 8Col 8Col 8Col 8Col 8Col 8Col 8Col 8
+      </Col>
+      <Col className='gm-bg-primary' style={{ height: '60px' }} span={8}>
+        Col 8Col 8Col 8Col 8Col 8Col 8Col 8Col 8Col 8Col 8Col 8Col 8Col 8Col 8
+      </Col>
+      <Col className='gm-bg-primary' style={{ height: '60px' }} span={8}>
+        Col 8Col 8Col 8Col 8Col 8Col 8Col 8Col 8Col 8Col 8Col 8Col 8Col 8Col 8
+      </Col>
+    </Row>
+  </div>
+))

package/src/component/grid/index.js

@@ -1,4 +1,4 @@
-import Col from './col'
-import Row from './row'
-
-export { Col, Row }
+import Col from './col'
+import Row from './row'
+
+export { Col, Row }

package/src/component/grid/mixin.less

@@ -1,48 +1,48 @@
-.gm-grid-float-columns(@class) {
-  .col(@index) {
-    // initial
-    @item: ~'.gm-grid-col@{class}-@{index}';
-    .col((@index + 1), @item);
-  }
-  .col(@index, @list) when (@index =< @gm-grid-columns) {
-    // general
-    @item: ~'.gm-grid-col@{class}-@{index}';
-    .col((@index + 1), ~'@{list}, @{item}');
-  }
-  .col(@index, @list) when (@index > @gm-grid-columns) {
-    // terminal
-    @{list} {
-      flex: 0 0 auto;
-      float: left;
-    }
-  }
-  .col(1); // kickstart it
-}
-
-.gm-grid-loop-columns(@index, @class) when (@index > 0) {
-  .gm-grid-col@{class}-@{index} {
-    display: block;
-    box-sizing: border-box;
-    width: percentage((@index / @gm-grid-columns));
-  }
-
-  .gm-grid-col@{class}-offset-@{index} {
-    margin-left: percentage((@index / @gm-grid-columns));
-  }
-  .gm-grid-loop-columns((@index - 1), @class);
-}
-
-.gm-grid-loop-columns(@index, @class) when (@index = 0) {
-  .gm-grid-col@{class}-@{index} {
-    display: none;
-  }
-
-  .gm-grid-col@{class}-offset-@{index} {
-    margin-left: 0;
-  }
-}
-
-.gm-grid(@class: ~'') {
-  .gm-grid-float-columns(@class);
-  .gm-grid-loop-columns(@gm-grid-columns, @class);
-}
+.gm-grid-float-columns(@class) {
+  .col(@index) {
+    // initial
+    @item: ~'.gm-grid-col@{class}-@{index}';
+    .col((@index + 1), @item);
+  }
+  .col(@index, @list) when (@index =< @gm-grid-columns) {
+    // general
+    @item: ~'.gm-grid-col@{class}-@{index}';
+    .col((@index + 1), ~'@{list}, @{item}');
+  }
+  .col(@index, @list) when (@index > @gm-grid-columns) {
+    // terminal
+    @{list} {
+      flex: 0 0 auto;
+      float: left;
+    }
+  }
+  .col(1); // kickstart it
+}
+
+.gm-grid-loop-columns(@index, @class) when (@index > 0) {
+  .gm-grid-col@{class}-@{index} {
+    display: block;
+    box-sizing: border-box;
+    width: percentage((@index / @gm-grid-columns));
+  }
+
+  .gm-grid-col@{class}-offset-@{index} {
+    margin-left: percentage((@index / @gm-grid-columns));
+  }
+  .gm-grid-loop-columns((@index - 1), @class);
+}
+
+.gm-grid-loop-columns(@index, @class) when (@index = 0) {
+  .gm-grid-col@{class}-@{index} {
+    display: none;
+  }
+
+  .gm-grid-col@{class}-offset-@{index} {
+    margin-left: 0;
+  }
+}
+
+.gm-grid(@class: ~'') {
+  .gm-grid-float-columns(@class);
+  .gm-grid-loop-columns(@gm-grid-columns, @class);
+}