@gmfe/react 2.14.17 → 2.14.19-beta.0

package/src/component/switch/index.js

@@ -1,118 +1,118 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-import _ from 'lodash'
-
-class Switch extends React.Component {
-  constructor(props) {
-    super(props)
-
-    this.state = {
-      checked: props.checked,
-      labelWidth: null,
-      isReady: false
-    }
-    this.handleChange = ::this.handleChange
-  }
-
-  componentDidMount() {
-    // 初始化后开始计算on和off的宽度，取较大值作为switch开关的宽度
-
-    const labelWidth =
-      this.refInputOff.offsetWidth >= this.refInputOn.offsetWidth
-        ? this.refInputOff.offsetWidth + 7
-        : this.refInputOn.offsetWidth + 7
-
-    this.setState({
-      labelWidth: Math.max(labelWidth, 34),
-      isReady: true
-    })
-  }
-
-  componentWillReceiveProps(nextProps) {
-    if ('checked' in nextProps) {
-      this.setState({
-        checked: !!nextProps.checked
-      })
-    }
-  }
-
-  setChecked(checked) {
-    if (!('checked' in this.props)) {
-      this.setState({
-        checked
-      })
-    }
-    this.props.onChange(checked)
-  }
-
-  handleChange(e) {
-    if (this.props.disabled) {
-      return
-    }
-    this.setChecked(e.target.checked)
-  }
-
-  render() {
-    const {
-      className, // checked, onChange, // eslint-disable-line
-      type,
-      disabled,
-      on,
-      off,
-      ...rest
-    } = this.props
-
-    let inputStyle = { width: this.state.labelWidth }
-    if (rest.style) inputStyle = Object.assign({}, inputStyle, rest.style)
-
-    return (
-      <>
-        <input
-          {...rest}
-          data-text={this.state.checked ? on : off}
-          ref={ref => (this.refInputOff = ref)}
-          className={classNames('gm-switch gm-switch-' + type, className, {
-            'gm-switch-disabled': disabled
-          })}
-          style={inputStyle}
-          data-attr={this.state.labelWidth}
-          disabled={disabled}
-          type='checkbox'
-          checked={this.state.checked}
-          onChange={this.handleChange}
-        />
-        {!this.state.isReady && (
-          <input
-            data-text={this.state.checked ? off : on}
-            ref={ref => (this.refInputOn = ref)}
-            className='gm-switch'
-            type='checkbox'
-            style={{ position: 'fixed', visibility: 'hidden' }}
-          />
-        )}
-      </>
-    )
-  }
-}
-
-Switch.displayName = 'Switch'
-
-Switch.propTypes = {
-  type: PropTypes.string, // default primary success info warning danger
-  checked: PropTypes.bool.isRequired,
-  disabled: PropTypes.bool,
-  on: PropTypes.any, // 请保证 on off 的宽度一样
-  off: PropTypes.any,
-  onChange: PropTypes.func,
-  className: PropTypes.string,
-  style: PropTypes.object
-}
-Switch.defaultProps = {
-  type: 'default',
-  on: '',
-  off: '',
-  onChange: _.noop
-}
-
-export default Switch
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import _ from 'lodash'
+
+class Switch extends React.Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      checked: props.checked,
+      labelWidth: null,
+      isReady: false
+    }
+    this.handleChange = ::this.handleChange
+  }
+
+  componentDidMount() {
+    // 初始化后开始计算on和off的宽度，取较大值作为switch开关的宽度
+
+    const labelWidth =
+      this.refInputOff.offsetWidth >= this.refInputOn.offsetWidth
+        ? this.refInputOff.offsetWidth + 7
+        : this.refInputOn.offsetWidth + 7
+
+    this.setState({
+      labelWidth: Math.max(labelWidth, 34),
+      isReady: true
+    })
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if ('checked' in nextProps) {
+      this.setState({
+        checked: !!nextProps.checked
+      })
+    }
+  }
+
+  setChecked(checked) {
+    if (!('checked' in this.props)) {
+      this.setState({
+        checked
+      })
+    }
+    this.props.onChange(checked)
+  }
+
+  handleChange(e) {
+    if (this.props.disabled) {
+      return
+    }
+    this.setChecked(e.target.checked)
+  }
+
+  render() {
+    const {
+      className, // checked, onChange, // eslint-disable-line
+      type,
+      disabled,
+      on,
+      off,
+      ...rest
+    } = this.props
+
+    let inputStyle = { width: this.state.labelWidth }
+    if (rest.style) inputStyle = Object.assign({}, inputStyle, rest.style)
+
+    return (
+      <>
+        <input
+          {...rest}
+          data-text={this.state.checked ? on : off}
+          ref={ref => (this.refInputOff = ref)}
+          className={classNames('gm-switch gm-switch-' + type, className, {
+            'gm-switch-disabled': disabled
+          })}
+          style={inputStyle}
+          data-attr={this.state.labelWidth}
+          disabled={disabled}
+          type='checkbox'
+          checked={this.state.checked}
+          onChange={this.handleChange}
+        />
+        {!this.state.isReady && (
+          <input
+            data-text={this.state.checked ? off : on}
+            ref={ref => (this.refInputOn = ref)}
+            className='gm-switch'
+            type='checkbox'
+            style={{ position: 'fixed', visibility: 'hidden' }}
+          />
+        )}
+      </>
+    )
+  }
+}
+
+Switch.displayName = 'Switch'
+
+Switch.propTypes = {
+  type: PropTypes.string, // default primary success info warning danger
+  checked: PropTypes.bool.isRequired,
+  disabled: PropTypes.bool,
+  on: PropTypes.any, // 请保证 on off 的宽度一样
+  off: PropTypes.any,
+  onChange: PropTypes.func,
+  className: PropTypes.string,
+  style: PropTypes.object
+}
+Switch.defaultProps = {
+  type: 'default',
+  on: '',
+  off: '',
+  onChange: _.noop
+}
+
+export default Switch

package/src/component/switch/stories.js

@@ -1,7 +1,7 @@
-import React from 'react'
-import { storiesOf } from '@storybook/react'
-import Switch from './index'
-
-storiesOf('Switch', module)
-  .add('default', () => <Switch />)
-  .add('有文字', () => <Switch on='上架' off='下架' />)
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import Switch from './index'
+
+storiesOf('Switch', module)
+  .add('default', () => <Switch />)
+  .add('有文字', () => <Switch on='上架' off='下架' />)

package/src/component/switch/style.less

@@ -1,70 +1,70 @@
-.gm-switch {
-  position: relative;
-  -webkit-appearance: none;
-  height: 22px;
-  border-radius: 11px;
-  background-color: #afb5c0;
-
-  &::before {
-    position: absolute;
-    content: '';
-    top: 1px;
-    left: 1px;
-    width: 20px;
-    height: 20px;
-    border-radius: 50%;
-    background-color: #fff;
-    transition: all 0.35s;
-  }
-
-  &::after {
-    content: attr(data-text);
-    color: white;
-    padding-left: 24px;
-    line-height: 22px;
-    transition: all 0.35s;
-  }
-}
-
-input.gm-switch {
-  margin: 0;
-}
-
-.gm-switch:checked {
-  background-color: @brand-primary;
-
-  &::before {
-    left: 100%;
-    transform: translateX(-100%);
-    margin-left: -1px;
-  }
-
-  &::after {
-    padding-left: 6px;
-  }
-
-  &.gm-switch-disabled {
-    cursor: @cursor-disabled;
-    .opacity(0.6);
-  }
-
-  &.gm-switch-primary {
-    background-color: @brand-primary;
-  }
-
-  &.gm-switch-success {
-    background-color: @brand-success;
-  }
-
-  &.gm-switch-info {
-    background-color: @brand-info;
-  }
-
-  &.gm-switch-warning {
-    background-color: @brand-warning;
-  }
-
-  &.gm-switch-danger {
-    background-color: @brand-danger;
-  }
-}
+.gm-switch {
+  position: relative;
+  -webkit-appearance: none;
+  height: 22px;
+  border-radius: 11px;
+  background-color: #afb5c0;
+
+  &::before {
+    position: absolute;
+    content: '';
+    top: 1px;
+    left: 1px;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background-color: #fff;
+    transition: all 0.35s;
+  }
+
+  &::after {
+    content: attr(data-text);
+    color: white;
+    padding-left: 24px;
+    line-height: 22px;
+    transition: all 0.35s;
+  }
+}
+
+input.gm-switch {
+  margin: 0;
+}
+
+.gm-switch:checked {
+  background-color: @brand-primary;
+
+  &::before {
+    left: 100%;
+    transform: translateX(-100%);
+    margin-left: -1px;
+  }
+
+  &::after {
+    padding-left: 6px;
+  }
+
+  &.gm-switch-disabled {
+    cursor: @cursor-disabled;
+    .opacity(0.6);
+  }
+
+  &.gm-switch-primary {
+    background-color: @brand-primary;
+  }
+
+  &.gm-switch-success {
+    background-color: @brand-success;
+  }
+
+  &.gm-switch-info {
+    background-color: @brand-info;
+  }
+
+  &.gm-switch-warning {
+    background-color: @brand-warning;
+  }
+
+  &.gm-switch-danger {
+    background-color: @brand-danger;
+  }
+}