@gmfe/react 2.14.17 → 2.14.19-beta.0

package/src/component/price/stories.js

@@ -1,34 +1,34 @@
-import React from 'react'
-import { storiesOf } from '@storybook/react'
-import _ from 'lodash'
-import Price from './index'
-
-const list = [
-  0,
-  10839,
-  2345454545,
-  1000,
-  12310,
-  10000000,
-  -10,
-  -226,
-  -1000,
-  -1000002323
-]
-
-storiesOf('Price', module).add('default', () => (
-  <div>
-    {_.map(list, v => (
-      <div key={v}>
-        <Price value={v} />
-      </div>
-    ))}
-    <Price isFenUnit value={1234} style={{ fontSize: '28px', color: 'red' }} />{' '}
-    <br />
-    <Price
-      value={40002288}
-      currencyScale={0.8}
-      style={{ fontSize: '28px', color: 'red' }}
-    />
-  </div>
-))
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import _ from 'lodash'
+import Price from './index'
+
+const list = [
+  0,
+  10839,
+  2345454545,
+  1000,
+  12310,
+  10000000,
+  -10,
+  -226,
+  -1000,
+  -1000002323
+]
+
+storiesOf('Price', module).add('default', () => (
+  <div>
+    {_.map(list, v => (
+      <div key={v}>
+        <Price value={v} />
+      </div>
+    ))}
+    <Price isFenUnit value={1234} style={{ fontSize: '28px', color: 'red' }} />{' '}
+    <br />
+    <Price
+      value={40002288}
+      currencyScale={0.8}
+      style={{ fontSize: '28px', color: 'red' }}
+    />
+  </div>
+))

package/src/component/progress/index.js

@@ -1,101 +1,101 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-import SVGSuccessCircle from '../../../svg/success-circle.svg'
-import SVGCloseCircle from '../../../svg/close-circle.svg'
-
-class ProgressBar extends React.Component {
-  render() {
-    const {
-      percentage,
-      status,
-      strokeWidth,
-      text,
-      textInside,
-      textInsideFix,
-      showText,
-      className,
-      textColor,
-      strokeColor,
-      bgColor,
-      ...rest
-    } = this.props
-    return (
-      <div className={classNames('gm-progress', className)} {...rest}>
-        <div className='gm-progress-bar'>
-          <div
-            className='gm-progress-bar-outer'
-            style={{ height: `${strokeWidth}px`, backgroundColor: bgColor }}
-          >
-            <div
-              className={classNames('gm-progress-bar-inner', {
-                'gm-progress-bar-success': status === 'success',
-                'gm-progress-bar-exception': status === 'exception'
-              })}
-              style={{ width: `${percentage}%`, background: strokeColor }}
-            >
-              {showText && textInside && !textInsideFix && (
-                <div
-                  className='gm-progress-bar-innerText'
-                  style={{ color: textColor }}
-                >
-                  {text || `${percentage}%`}
-                </div>
-              )}
-            </div>
-            {showText && textInside && textInsideFix && (
-              <div
-                className={classNames('gm-progress-bar-innerTextFix-wrapper')}
-                style={{ textAlign: textInsideFix }}
-              >
-                <div
-                  className='gm-progress-bar-innerText'
-                  style={{ color: textColor }}
-                >
-                  {text || `${percentage}%`}
-                </div>
-              </div>
-            )}
-          </div>
-        </div>
-        {showText && !textInside && (
-          <div
-            className='gm-progress-bar-text'
-            style={{ fontSize: `12px`, color: textColor }}
-          >
-            {status ? (
-              status === 'success' ? (
-                <SVGSuccessCircle className='gm-progress-bar-success-icon' />
-              ) : (
-                <SVGCloseCircle className='gm-progress-bar-exception-icon' />
-              )
-            ) : (
-              text || `${percentage}%`
-            )}
-          </div>
-        )}
-      </div>
-    )
-  }
-}
-
-ProgressBar.propTypes = {
-  percentage: PropTypes.number.isRequired,
-  text: PropTypes.string,
-  status: PropTypes.oneOf(['success', 'exception']),
-  strokeWidth: PropTypes.number,
-  textInside: PropTypes.bool,
-  textInsideFix: PropTypes.oneOf(['left', 'right', 'center']),
-  showText: PropTypes.bool,
-  className: PropTypes.string,
-  textColor: PropTypes.string,
-  strokeColor: PropTypes.string,
-  bgColor: PropTypes.string
-}
-
-ProgressBar.defaultProps = {
-  textInside: false,
-  showText: true
-}
-
-export default ProgressBar
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import SVGSuccessCircle from '../../../svg/success-circle.svg'
+import SVGCloseCircle from '../../../svg/close-circle.svg'
+
+class ProgressBar extends React.Component {
+  render() {
+    const {
+      percentage,
+      status,
+      strokeWidth,
+      text,
+      textInside,
+      textInsideFix,
+      showText,
+      className,
+      textColor,
+      strokeColor,
+      bgColor,
+      ...rest
+    } = this.props
+    return (
+      <div className={classNames('gm-progress', className)} {...rest}>
+        <div className='gm-progress-bar'>
+          <div
+            className='gm-progress-bar-outer'
+            style={{ height: `${strokeWidth}px`, backgroundColor: bgColor }}
+          >
+            <div
+              className={classNames('gm-progress-bar-inner', {
+                'gm-progress-bar-success': status === 'success',
+                'gm-progress-bar-exception': status === 'exception'
+              })}
+              style={{ width: `${percentage}%`, background: strokeColor }}
+            >
+              {showText && textInside && !textInsideFix && (
+                <div
+                  className='gm-progress-bar-innerText'
+                  style={{ color: textColor }}
+                >
+                  {text || `${percentage}%`}
+                </div>
+              )}
+            </div>
+            {showText && textInside && textInsideFix && (
+              <div
+                className={classNames('gm-progress-bar-innerTextFix-wrapper')}
+                style={{ textAlign: textInsideFix }}
+              >
+                <div
+                  className='gm-progress-bar-innerText'
+                  style={{ color: textColor }}
+                >
+                  {text || `${percentage}%`}
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+        {showText && !textInside && (
+          <div
+            className='gm-progress-bar-text'
+            style={{ fontSize: `12px`, color: textColor }}
+          >
+            {status ? (
+              status === 'success' ? (
+                <SVGSuccessCircle className='gm-progress-bar-success-icon' />
+              ) : (
+                <SVGCloseCircle className='gm-progress-bar-exception-icon' />
+              )
+            ) : (
+              text || `${percentage}%`
+            )}
+          </div>
+        )}
+      </div>
+    )
+  }
+}
+
+ProgressBar.propTypes = {
+  percentage: PropTypes.number.isRequired,
+  text: PropTypes.string,
+  status: PropTypes.oneOf(['success', 'exception']),
+  strokeWidth: PropTypes.number,
+  textInside: PropTypes.bool,
+  textInsideFix: PropTypes.oneOf(['left', 'right', 'center']),
+  showText: PropTypes.bool,
+  className: PropTypes.string,
+  textColor: PropTypes.string,
+  strokeColor: PropTypes.string,
+  bgColor: PropTypes.string
+}
+
+ProgressBar.defaultProps = {
+  textInside: false,
+  showText: true
+}
+
+export default ProgressBar

package/src/component/progress/stories.js

@@ -1,60 +1,60 @@
-import React from 'react'
-import { storiesOf } from '@storybook/react'
-import Progress from './index'
-
-storiesOf('Progress', module).add('default', () => (
-  <div style={{ width: '400px' }}>
-    <Progress percentage={10} />
-    <Progress percentage={10} showText={false} />
-
-    <Progress percentage={0} textInside strokeWidth={18} />
-
-    <Progress percentage={30} />
-    <Progress percentage={70} textInside strokeWidth={18} />
-    <Progress
-      percentage={0}
-      textInside
-      textInsideFix='center'
-      strokeWidth={18}
-    />
-    <Progress
-      percentage={0}
-      textInside
-      textInsideFix='center'
-      strokeWidth={18}
-      textColor='gray'
-    />
-    <Progress
-      percentage={70}
-      textInside
-      textInsideFix='center'
-      strokeWidth={18}
-      textColor='black'
-      strokeColor='orange'
-      bgColor='lightgray'
-    />
-    <Progress
-      percentage={70}
-      textInside
-      textInsideFix='center'
-      strokeWidth={18}
-    />
-    <Progress
-      percentage={70}
-      textInside
-      textInsideFix='left'
-      strokeWidth={18}
-    />
-    <Progress
-      percentage={70}
-      textInside
-      textInsideFix='right'
-      strokeWidth={18}
-    />
-    <Progress percentage={20} text='20斤/100斤' strokeWidth={18} />
-
-    <Progress percentage={100} />
-    <Progress percentage={100} status='success' />
-    <Progress percentage={50} status='exception' />
-  </div>
-))
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import Progress from './index'
+
+storiesOf('Progress', module).add('default', () => (
+  <div style={{ width: '400px' }}>
+    <Progress percentage={10} />
+    <Progress percentage={10} showText={false} />
+
+    <Progress percentage={0} textInside strokeWidth={18} />
+
+    <Progress percentage={30} />
+    <Progress percentage={70} textInside strokeWidth={18} />
+    <Progress
+      percentage={0}
+      textInside
+      textInsideFix='center'
+      strokeWidth={18}
+    />
+    <Progress
+      percentage={0}
+      textInside
+      textInsideFix='center'
+      strokeWidth={18}
+      textColor='gray'
+    />
+    <Progress
+      percentage={70}
+      textInside
+      textInsideFix='center'
+      strokeWidth={18}
+      textColor='black'
+      strokeColor='orange'
+      bgColor='lightgray'
+    />
+    <Progress
+      percentage={70}
+      textInside
+      textInsideFix='center'
+      strokeWidth={18}
+    />
+    <Progress
+      percentage={70}
+      textInside
+      textInsideFix='left'
+      strokeWidth={18}
+    />
+    <Progress
+      percentage={70}
+      textInside
+      textInsideFix='right'
+      strokeWidth={18}
+    />
+    <Progress percentage={20} text='20斤/100斤' strokeWidth={18} />
+
+    <Progress percentage={100} />
+    <Progress percentage={100} status='success' />
+    <Progress percentage={50} status='exception' />
+  </div>
+))

package/src/component/progress/style.less

@@ -1,88 +1,88 @@
-.gm-progress-bar {
-  padding-right: 50px;
-  width: 100%;
-  margin-right: -55px;
-  box-sizing: border-box;
-  display: inline-block;
-  vertical-align: middle;
-}
-
-.gm-progress-bar-outer {
-  height: 8px;
-  border-radius: 100px;
-  background-color: #e4e8f1;
-  overflow: hidden;
-  position: relative;
-  vertical-align: middle;
-}
-
-.gm-progress-bar-inner {
-  position: absolute;
-  left: 0;
-  top: 0;
-  height: 100%;
-  background-color: @brand-primary;
-  text-align: right;
-  border-radius: 100px;
-  line-height: 1;
-  white-space: nowrap;
-
-  &::after {
-    content: "";
-    display: inline-block;
-    height: 100%;
-    vertical-align: middle;
-  }
-}
-
-.gm-progress-bar-success {
-  background-color: @brand-primary;
-}
-
-.gm-progress-bar-exception {
-  background-color: @brand-danger;
-}
-
-.gm-progress-bar-innerText {
-  font-size: 12px;
-  color: #fff;
-  display: inline-block;
-  vertical-align: middle;
-  margin-left: 5px;
-  margin-right: 5px;
-  line-height: 1;
-}
-
-.gm-progress-bar-innerTextFix-wrapper {
-  height: 100%;
-  line-height: 1;
-  white-space: nowrap;
-  position: relative;
-  z-index: 0;
-
-  &::after {
-    content: "";
-    display: inline-block;
-    height: 100%;
-    vertical-align: middle;
-  }
-}
-
-.gm-progress-bar-text {
-  font-size: 14px;
-  color: #48576a;
-  display: inline-block;
-  vertical-align: middle;
-  margin-left: 10px;
-  line-height: 1;
-}
-
-.gm-progress-bar-success-icon {
-  font-size: 16px;
-  color: @brand-primary;
-}
-
-.gm-progress-bar-exception-icon {
-  font-size: 16px;
-  color: @brand-danger;
-}
+.gm-progress-bar {
+  padding-right: 50px;
+  width: 100%;
+  margin-right: -55px;
+  box-sizing: border-box;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.gm-progress-bar-outer {
+  height: 8px;
+  border-radius: 100px;
+  background-color: #e4e8f1;
+  overflow: hidden;
+  position: relative;
+  vertical-align: middle;
+}
+
+.gm-progress-bar-inner {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  background-color: @brand-primary;
+  text-align: right;
+  border-radius: 100px;
+  line-height: 1;
+  white-space: nowrap;
+
+  &::after {
+    content: "";
+    display: inline-block;
+    height: 100%;
+    vertical-align: middle;
+  }
+}
+
+.gm-progress-bar-success {
+  background-color: @brand-primary;
+}
+
+.gm-progress-bar-exception {
+  background-color: @brand-danger;
+}
+
+.gm-progress-bar-innerText {
+  font-size: 12px;
+  color: #fff;
+  display: inline-block;
+  vertical-align: middle;
+  margin-left: 5px;
+  margin-right: 5px;
+  line-height: 1;
+}
+
+.gm-progress-bar-innerTextFix-wrapper {
+  height: 100%;
+  line-height: 1;
+  white-space: nowrap;
+  position: relative;
+  z-index: 0;
+
+  &::after {
+    content: "";
+    display: inline-block;
+    height: 100%;
+    vertical-align: middle;
+  }
+}
+
+.gm-progress-bar-text {
+  font-size: 14px;
+  color: #48576a;
+  display: inline-block;
+  vertical-align: middle;
+  margin-left: 10px;
+  line-height: 1;
+}
+
+.gm-progress-bar-success-icon {
+  font-size: 16px;
+  color: @brand-primary;
+}
+
+.gm-progress-bar-exception-icon {
+  font-size: 16px;
+  color: @brand-danger;
+}