@gmfe/react 2.14.17 → 2.14.19-beta.0

package/src/component/progress_circle/index.js

@@ -1,116 +1,116 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import Flex from '../flex'
-import classNames from 'classnames'
-
-const radius = 110 // 半径r
-const diameter = Math.round(Math.PI * radius * 2) // 周长(路径长度)
-const getOffset = (val = 0) =>
-  Math.round(((100 - Math.min(val, 100)) / 100) * diameter)
-
-class ProgressCircle extends React.Component {
-  get text() {
-    const { percentage, showText, text } = this.props
-    if (!showText) return null
-
-    return text || percentage + '%'
-  }
-
-  render() {
-    const { text } = this
-    const {
-      status,
-      textPosition,
-      percentage,
-      size,
-      lineWidth,
-      progressColor,
-      bgColor
-    } = this.props
-    const { centerColor, animate, animationDuration, roundedStroke } = {
-      centerColor: 'transparent',
-      animate: false,
-      animationDuration: '1s',
-      roundedStroke: false
-    }
-
-    const strokeDashoffset = getOffset(percentage)
-    const transition = animate
-      ? `stroke-dashoffset ${animationDuration} ease-out`
-      : undefined
-    const strokeLinecap = roundedStroke ? 'round' : 'butt'
-
-    return (
-      <Flex alignCenter>
-        {text && textPosition === 'left' && (
-          <span className='gm-progress-circle-innerText-left'>{text}</span>
-        )}
-        <svg width={size} height={size} viewBox='0 0 300 300'>
-          <circle
-            stroke={bgColor}
-            cx='150'
-            cy='150'
-            r={radius}
-            strokeWidth={lineWidth}
-            fill={centerColor}
-          />
-          <circle
-            className={classNames({
-              'gm-progress-circle-success': status === 'success',
-              'gm-progress-circle-exception': status === 'exception'
-            })}
-            transform='rotate(-90 150 150)'
-            cx='150'
-            cy='150'
-            r={radius}
-            strokeDasharray={diameter}
-            strokeWidth={lineWidth}
-            strokeDashoffset={diameter}
-            strokeLinecap={strokeLinecap}
-            fill='none'
-            style={{ strokeDashoffset, transition, stroke: progressColor }}
-          />
-          {text && textPosition === 'center' && (
-            <text
-              fill='currentColor'
-              fontSize='45'
-              x='150'
-              y='150'
-              textAnchor='middle'
-              dominantBaseline='central'
-            >
-              {text}
-            </text>
-          )}
-        </svg>
-        {text && textPosition === 'right' && (
-          <span className='gm-progress-circle-innerText-right'>{text}</span>
-        )}
-      </Flex>
-    )
-  }
-}
-
-ProgressCircle.propTypes = {
-  percentage: PropTypes.number.isRequired,
-  text: PropTypes.string,
-  showText: PropTypes.bool,
-  textPosition: PropTypes.oneOf(['left', 'center', 'right']),
-  status: PropTypes.oneOf(['success', 'exception']),
-  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  lineWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  progressColor: PropTypes.string,
-  bgColor: PropTypes.string
-}
-
-ProgressCircle.defaultProps = {
-  percentage: 0,
-  status: 'success',
-  showText: true,
-  textPosition: 'center',
-  size: '40',
-  lineWidth: '60',
-  bgColor: '#e4e8f1'
-}
-
-export default ProgressCircle
+import React from 'react'
+import PropTypes from 'prop-types'
+import Flex from '../flex'
+import classNames from 'classnames'
+
+const radius = 110 // 半径r
+const diameter = Math.round(Math.PI * radius * 2) // 周长(路径长度)
+const getOffset = (val = 0) =>
+  Math.round(((100 - Math.min(val, 100)) / 100) * diameter)
+
+class ProgressCircle extends React.Component {
+  get text() {
+    const { percentage, showText, text } = this.props
+    if (!showText) return null
+
+    return text || percentage + '%'
+  }
+
+  render() {
+    const { text } = this
+    const {
+      status,
+      textPosition,
+      percentage,
+      size,
+      lineWidth,
+      progressColor,
+      bgColor
+    } = this.props
+    const { centerColor, animate, animationDuration, roundedStroke } = {
+      centerColor: 'transparent',
+      animate: false,
+      animationDuration: '1s',
+      roundedStroke: false
+    }
+
+    const strokeDashoffset = getOffset(percentage)
+    const transition = animate
+      ? `stroke-dashoffset ${animationDuration} ease-out`
+      : undefined
+    const strokeLinecap = roundedStroke ? 'round' : 'butt'
+
+    return (
+      <Flex alignCenter>
+        {text && textPosition === 'left' && (
+          <span className='gm-progress-circle-innerText-left'>{text}</span>
+        )}
+        <svg width={size} height={size} viewBox='0 0 300 300'>
+          <circle
+            stroke={bgColor}
+            cx='150'
+            cy='150'
+            r={radius}
+            strokeWidth={lineWidth}
+            fill={centerColor}
+          />
+          <circle
+            className={classNames({
+              'gm-progress-circle-success': status === 'success',
+              'gm-progress-circle-exception': status === 'exception'
+            })}
+            transform='rotate(-90 150 150)'
+            cx='150'
+            cy='150'
+            r={radius}
+            strokeDasharray={diameter}
+            strokeWidth={lineWidth}
+            strokeDashoffset={diameter}
+            strokeLinecap={strokeLinecap}
+            fill='none'
+            style={{ strokeDashoffset, transition, stroke: progressColor }}
+          />
+          {text && textPosition === 'center' && (
+            <text
+              fill='currentColor'
+              fontSize='45'
+              x='150'
+              y='150'
+              textAnchor='middle'
+              dominantBaseline='central'
+            >
+              {text}
+            </text>
+          )}
+        </svg>
+        {text && textPosition === 'right' && (
+          <span className='gm-progress-circle-innerText-right'>{text}</span>
+        )}
+      </Flex>
+    )
+  }
+}
+
+ProgressCircle.propTypes = {
+  percentage: PropTypes.number.isRequired,
+  text: PropTypes.string,
+  showText: PropTypes.bool,
+  textPosition: PropTypes.oneOf(['left', 'center', 'right']),
+  status: PropTypes.oneOf(['success', 'exception']),
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  lineWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  progressColor: PropTypes.string,
+  bgColor: PropTypes.string
+}
+
+ProgressCircle.defaultProps = {
+  percentage: 0,
+  status: 'success',
+  showText: true,
+  textPosition: 'center',
+  size: '40',
+  lineWidth: '60',
+  bgColor: '#e4e8f1'
+}
+
+export default ProgressCircle

package/src/component/progress_circle/stories.js

@@ -1,54 +1,54 @@
-import React from 'react'
-import { storiesOf } from '@storybook/react'
-import ProgressCircle from './index'
-import { observable } from 'mobx'
-
-const store = observable({
-  percentage: 0,
-  setPercentage(percentage) {
-    this.percentage = percentage
-  }
-})
-
-setTimeout(() => {
-  store.setPercentage(80)
-}, 1000)
-
-storiesOf('ProgressCircle', module).add('default', () => (
-  <div>
-    <ProgressCircle percentage={store.percentage} showText={false} />
-
-    <ProgressCircle
-      percentage={store.percentage}
-      status='exception'
-      showText={false}
-    />
-
-    <ProgressCircle percentage={store.percentage} textPosition='right' />
-
-    <ProgressCircle
-      percentage={store.percentage}
-      textPosition='left'
-      text={store.percentage + '/100'}
-    />
-
-    <ProgressCircle percentage={store.percentage} size='100' />
-
-    <ProgressCircle percentage={store.percentage} size='100' lineWidth={20} />
-
-    <ProgressCircle
-      percentage={store.percentage}
-      size='100'
-      lineWidth={20}
-      progressColor='orange'
-    />
-
-    <ProgressCircle
-      percentage={store.percentage}
-      size='100'
-      lineWidth={20}
-      progressColor='orange'
-      bgColor='gray'
-    />
-  </div>
-))
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import ProgressCircle from './index'
+import { observable } from 'mobx'
+
+const store = observable({
+  percentage: 0,
+  setPercentage(percentage) {
+    this.percentage = percentage
+  }
+})
+
+setTimeout(() => {
+  store.setPercentage(80)
+}, 1000)
+
+storiesOf('ProgressCircle', module).add('default', () => (
+  <div>
+    <ProgressCircle percentage={store.percentage} showText={false} />
+
+    <ProgressCircle
+      percentage={store.percentage}
+      status='exception'
+      showText={false}
+    />
+
+    <ProgressCircle percentage={store.percentage} textPosition='right' />
+
+    <ProgressCircle
+      percentage={store.percentage}
+      textPosition='left'
+      text={store.percentage + '/100'}
+    />
+
+    <ProgressCircle percentage={store.percentage} size='100' />
+
+    <ProgressCircle percentage={store.percentage} size='100' lineWidth={20} />
+
+    <ProgressCircle
+      percentage={store.percentage}
+      size='100'
+      lineWidth={20}
+      progressColor='orange'
+    />
+
+    <ProgressCircle
+      percentage={store.percentage}
+      size='100'
+      lineWidth={20}
+      progressColor='orange'
+      bgColor='gray'
+    />
+  </div>
+))

package/src/component/progress_circle/style.less

@@ -1,17 +1,17 @@
-.gm-progress-circle-success {
-  stroke: @brand-primary;
-}
-
-.gm-progress-circle-exception {
-  stroke: @brand-danger;
-}
-
-.gm-progress-circle-innerText-right {
-  font-size: 12px;
-  margin-left: 5px;
-}
-
-.gm-progress-circle-innerText-left {
-  font-size: 12px;
-  margin-right: 5px;
-}
+.gm-progress-circle-success {
+  stroke: @brand-primary;
+}
+
+.gm-progress-circle-exception {
+  stroke: @brand-danger;
+}
+
+.gm-progress-circle-innerText-right {
+  font-size: 12px;
+  margin-left: 5px;
+}
+
+.gm-progress-circle-innerText-left {
+  font-size: 12px;
+  margin-right: 5px;
+}

package/src/component/radio/index.js

@@ -1,4 +1,4 @@
-import Radio from './radio'
-import RadioGroup from './radio_group'
-
-export { Radio, RadioGroup }
+import Radio from './radio'
+import RadioGroup from './radio_group'
+
+export { Radio, RadioGroup }

package/src/component/radio/radio.js

@@ -1,76 +1,76 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import _ from 'lodash'
-import classNames from 'classnames'
-
-class Radio extends React.Component {
-  render() {
-    const {
-      value,
-      checked,
-      onChange,
-      onClick,
-      children,
-      inline,
-      block,
-      name,
-      disabled,
-      className,
-      ...rest
-    } = this.props
-
-    const inner = (
-      <label
-        {...rest}
-        className={classNames(
-          'gm-radio',
-          {
-            'gm-radio-inline': inline,
-            'gm-radio-block': block,
-            disabled
-          },
-          className
-        )}
-      >
-        <input
-          type='radio'
-          className='gm-radio-input'
-          name={name}
-          value={value}
-          checked={checked || false}
-          onChange={onChange}
-          onClick={onClick}
-          disabled={disabled}
-        />
-        <span className='gm-radio-span' />
-        {children}
-      </label>
-    )
-
-    if (!inline) {
-      return <div>{inner}</div>
-    }
-    return inner
-  }
-}
-
-Radio.propTypes = {
-  checked: PropTypes.bool,
-  onChange: PropTypes.func,
-  value: PropTypes.any,
-  children: PropTypes.any,
-  disabled: PropTypes.bool,
-  inline: PropTypes.bool,
-  block: PropTypes.bool,
-  name: PropTypes.string,
-  onClick: PropTypes.func,
-  className: PropTypes.string,
-  style: PropTypes.object
-}
-
-Radio.defaultProps = {
-  onChange: _.noop,
-  onClick: _.noop
-}
-
-export default Radio
+import React from 'react'
+import PropTypes from 'prop-types'
+import _ from 'lodash'
+import classNames from 'classnames'
+
+class Radio extends React.Component {
+  render() {
+    const {
+      value,
+      checked,
+      onChange,
+      onClick,
+      children,
+      inline,
+      block,
+      name,
+      disabled,
+      className,
+      ...rest
+    } = this.props
+
+    const inner = (
+      <label
+        {...rest}
+        className={classNames(
+          'gm-radio',
+          {
+            'gm-radio-inline': inline,
+            'gm-radio-block': block,
+            disabled
+          },
+          className
+        )}
+      >
+        <input
+          type='radio'
+          className='gm-radio-input'
+          name={name}
+          value={value}
+          checked={checked || false}
+          onChange={onChange}
+          onClick={onClick}
+          disabled={disabled}
+        />
+        <span className='gm-radio-span' />
+        {children}
+      </label>
+    )
+
+    if (!inline) {
+      return <div>{inner}</div>
+    }
+    return inner
+  }
+}
+
+Radio.propTypes = {
+  checked: PropTypes.bool,
+  onChange: PropTypes.func,
+  value: PropTypes.any,
+  children: PropTypes.any,
+  disabled: PropTypes.bool,
+  inline: PropTypes.bool,
+  block: PropTypes.bool,
+  name: PropTypes.string,
+  onClick: PropTypes.func,
+  className: PropTypes.string,
+  style: PropTypes.object
+}
+
+Radio.defaultProps = {
+  onChange: _.noop,
+  onClick: _.noop
+}
+
+export default Radio

package/src/component/radio/radio_group.js

@@ -1,51 +1,51 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-import _ from 'lodash'
-
-class RadioGroup extends React.Component {
-  render() {
-    const {
-      onChange,
-      value,
-      inline,
-      className,
-      children,
-      name,
-      ...rest
-    } = this.props
-
-    return (
-      <div {...rest} className={classNames('gm-radio-group', className)}>
-        {_.map(React.Children.toArray(children), (child, i) => {
-          return React.cloneElement(child, {
-            key: i,
-            index: i,
-            checked: child.props.value === value,
-            inline,
-            onChange: () => {
-              onChange(child.props.value)
-            },
-            name
-          })
-        })}
-      </div>
-    )
-  }
-}
-
-RadioGroup.propTypes = {
-  name: PropTypes.string.isRequired,
-  value: PropTypes.any,
-  onChange: PropTypes.func,
-  inline: PropTypes.bool,
-  children: PropTypes.any,
-  className: PropTypes.string,
-  style: PropTypes.object
-}
-
-RadioGroup.defaultProps = {
-  onChange: _.noop
-}
-
-export default RadioGroup
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import _ from 'lodash'
+
+class RadioGroup extends React.Component {
+  render() {
+    const {
+      onChange,
+      value,
+      inline,
+      className,
+      children,
+      name,
+      ...rest
+    } = this.props
+
+    return (
+      <div {...rest} className={classNames('gm-radio-group', className)}>
+        {_.map(React.Children.toArray(children), (child, i) => {
+          return React.cloneElement(child, {
+            key: i,
+            index: i,
+            checked: child.props.value === value,
+            inline,
+            onChange: () => {
+              onChange(child.props.value)
+            },
+            name
+          })
+        })}
+      </div>
+    )
+  }
+}
+
+RadioGroup.propTypes = {
+  name: PropTypes.string.isRequired,
+  value: PropTypes.any,
+  onChange: PropTypes.func,
+  inline: PropTypes.bool,
+  children: PropTypes.any,
+  className: PropTypes.string,
+  style: PropTypes.object
+}
+
+RadioGroup.defaultProps = {
+  onChange: _.noop
+}
+
+export default RadioGroup