@gmfe/react 2.14.17 → 2.14.19-beta.0

package/src/component/checkbox/stories.js

@@ -1,103 +1,103 @@
-import React from 'react'
-import { storiesOf } from '@storybook/react'
-import { Checkbox, CheckboxGroup } from './'
-import { observable } from 'mobx'
-
-const store = observable({
-  value: [1, 4],
-  data: [
-    {
-      value: 1,
-      text: '广州'
-    },
-    {
-      value: 2,
-      text: '深圳',
-      disabled: true
-    },
-    {
-      value: 3,
-      text: '成都'
-    },
-    {
-      value: 4,
-      text: '东莞',
-      disabled: true
-    }
-  ],
-  setValue(value) {
-    console.log(value)
-    this.value = value
-  },
-  checked: false,
-  setChecked(checked) {
-    this.checked = checked
-  }
-})
-
-storiesOf('Checkbox', module)
-  .add('default', () => (
-    <div>
-      <div>
-        <h1>默认</h1>
-        <Checkbox checked>选中 checked true</Checkbox>
-        <Checkbox>checked false</Checkbox>
-        <Checkbox indeterminate>checked indeterminate</Checkbox>
-      </div>
-      <div>
-        <h1>disabled</h1>
-        <Checkbox checked disabled>
-          checked true
-        </Checkbox>
-        <Checkbox disabled>checked false</Checkbox>
-        <Checkbox indeterminate disabled>
-          checked indeterminate
-        </Checkbox>
-      </div>
-      <div>
-        <h1>inline</h1>
-        <Checkbox checked inline>
-          checked true
-        </Checkbox>
-        <Checkbox inline>checked false</Checkbox>
-      </div>
-      <div>
-        <h1>block 整行都可以点</h1>
-        <Checkbox
-          block
-          checked={store.checked}
-          onChange={() => store.setChecked(!store.checked)}
-        >
-          checked
-        </Checkbox>
-      </div>
-    </div>
-  ))
-  .add('CheckboxGroup', () => (
-    <CheckboxGroup
-      name='city'
-      value={store.value}
-      onChange={value => store.setValue(value)}
-    >
-      {store.data.map(v => (
-        <Checkbox key={v.value} value={v.value} disabled={v.disabled}>
-          {v.text}
-        </Checkbox>
-      ))}
-    </CheckboxGroup>
-  ))
-  .add('inline and col', () => (
-    <CheckboxGroup
-      name='city'
-      value={store.value}
-      onChange={value => store.setValue(value)}
-      col={2}
-      inline
-    >
-      {store.data.map(v => (
-        <Checkbox key={v.value} value={v.value} disabled={v.disabled}>
-          {v.text}
-        </Checkbox>
-      ))}
-    </CheckboxGroup>
-  ))
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import { Checkbox, CheckboxGroup } from './'
+import { observable } from 'mobx'
+
+const store = observable({
+  value: [1, 4],
+  data: [
+    {
+      value: 1,
+      text: '广州'
+    },
+    {
+      value: 2,
+      text: '深圳',
+      disabled: true
+    },
+    {
+      value: 3,
+      text: '成都'
+    },
+    {
+      value: 4,
+      text: '东莞',
+      disabled: true
+    }
+  ],
+  setValue(value) {
+    console.log(value)
+    this.value = value
+  },
+  checked: false,
+  setChecked(checked) {
+    this.checked = checked
+  }
+})
+
+storiesOf('Checkbox', module)
+  .add('default', () => (
+    <div>
+      <div>
+        <h1>默认</h1>
+        <Checkbox checked>选中 checked true</Checkbox>
+        <Checkbox>checked false</Checkbox>
+        <Checkbox indeterminate>checked indeterminate</Checkbox>
+      </div>
+      <div>
+        <h1>disabled</h1>
+        <Checkbox checked disabled>
+          checked true
+        </Checkbox>
+        <Checkbox disabled>checked false</Checkbox>
+        <Checkbox indeterminate disabled>
+          checked indeterminate
+        </Checkbox>
+      </div>
+      <div>
+        <h1>inline</h1>
+        <Checkbox checked inline>
+          checked true
+        </Checkbox>
+        <Checkbox inline>checked false</Checkbox>
+      </div>
+      <div>
+        <h1>block 整行都可以点</h1>
+        <Checkbox
+          block
+          checked={store.checked}
+          onChange={() => store.setChecked(!store.checked)}
+        >
+          checked
+        </Checkbox>
+      </div>
+    </div>
+  ))
+  .add('CheckboxGroup', () => (
+    <CheckboxGroup
+      name='city'
+      value={store.value}
+      onChange={value => store.setValue(value)}
+    >
+      {store.data.map(v => (
+        <Checkbox key={v.value} value={v.value} disabled={v.disabled}>
+          {v.text}
+        </Checkbox>
+      ))}
+    </CheckboxGroup>
+  ))
+  .add('inline and col', () => (
+    <CheckboxGroup
+      name='city'
+      value={store.value}
+      onChange={value => store.setValue(value)}
+      col={2}
+      inline
+    >
+      {store.data.map(v => (
+        <Checkbox key={v.value} value={v.value} disabled={v.disabled}>
+          {v.text}
+        </Checkbox>
+      ))}
+    </CheckboxGroup>
+  ))

package/src/component/checkbox/style.less

@@ -1,88 +1,88 @@
-.gm-checkbox {
-  font-weight: normal;
-  margin: 0;
-  cursor: pointer;
-
-  &.gm-checkbox-block {
-    display: block;
-  }
-  &.gm-checkbox-inline {
-    display: inline-block;
-    padding-right: 10px;
-  }
-  &.gm-checkbox-indeterminate {
-    .gm-checkbox-input + .gm-checkbox-span {
-      &::after {
-        content: '';
-        position: absolute;
-        width: 0;
-        height: 0;
-        top: 2px;
-        left: 2px;
-        border: 4px solid @brand-primary;
-      }
-    }
-  }
-
-  &.disabled {
-    cursor: not-allowed;
-    color: @gm-color-fourth;
-
-    .gm-checkbox-input + .gm-checkbox-span {
-      background: #eee;
-    }
-
-    &.gm-checkbox-indeterminate {
-      .gm-checkbox-input + .gm-checkbox-span {
-        &::after {
-          border-color: @gm-border-color;
-        }
-      }
-    }
-
-    .gm-checkbox-input:checked + .gm-checkbox-span {
-      border-color: @gm-border-color;
-      background: #eee;
-
-      &::after {
-        border-left-color: @gm-border-color;
-        border-bottom-color: @gm-border-color;
-      }
-    }
-  }
-
-  .gm-checkbox-input {
-    display: none;
-  }
-
-  .gm-checkbox-input + .gm-checkbox-span {
-    position: relative;
-    top: 2px;
-    background-color: #fff;
-    margin-right: 5px;
-    -webkit-appearance: none;
-    border: 1px solid @gm-border-color;
-    display: inline-block;
-    width: 14px;
-    height: 14px;
-    transition: background-color 0.1s linear;
-    border-radius: @gm-border-radius;
-  }
-
-  .gm-checkbox-input:checked + .gm-checkbox-span {
-    border: 1px solid @brand-primary;
-    background-color: @brand-primary;
-
-    &::after {
-      content: '';
-      position: absolute;
-      width: 8px;
-      height: 5px;
-      top: 3px;
-      left: 2px;
-      border-left: 2px solid #fff;
-      border-bottom: 2px solid #fff;
-      transform: rotate(-45deg);
-    }
-  }
-}
+.gm-checkbox {
+  font-weight: normal;
+  margin: 0;
+  cursor: pointer;
+
+  &.gm-checkbox-block {
+    display: block;
+  }
+  &.gm-checkbox-inline {
+    display: inline-block;
+    padding-right: 10px;
+  }
+  &.gm-checkbox-indeterminate {
+    .gm-checkbox-input + .gm-checkbox-span {
+      &::after {
+        content: '';
+        position: absolute;
+        width: 0;
+        height: 0;
+        top: 2px;
+        left: 2px;
+        border: 4px solid @brand-primary;
+      }
+    }
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+    color: @gm-color-fourth;
+
+    .gm-checkbox-input + .gm-checkbox-span {
+      background: #eee;
+    }
+
+    &.gm-checkbox-indeterminate {
+      .gm-checkbox-input + .gm-checkbox-span {
+        &::after {
+          border-color: @gm-border-color;
+        }
+      }
+    }
+
+    .gm-checkbox-input:checked + .gm-checkbox-span {
+      border-color: @gm-border-color;
+      background: #eee;
+
+      &::after {
+        border-left-color: @gm-border-color;
+        border-bottom-color: @gm-border-color;
+      }
+    }
+  }
+
+  .gm-checkbox-input {
+    display: none;
+  }
+
+  .gm-checkbox-input + .gm-checkbox-span {
+    position: relative;
+    top: 2px;
+    background-color: #fff;
+    margin-right: 5px;
+    -webkit-appearance: none;
+    border: 1px solid @gm-border-color;
+    display: inline-block;
+    width: 14px;
+    height: 14px;
+    transition: background-color 0.1s linear;
+    border-radius: @gm-border-radius;
+  }
+
+  .gm-checkbox-input:checked + .gm-checkbox-span {
+    border: 1px solid @brand-primary;
+    background-color: @brand-primary;
+
+    &::after {
+      content: '';
+      position: absolute;
+      width: 8px;
+      height: 5px;
+      top: 3px;
+      left: 2px;
+      border-left: 2px solid #fff;
+      border-bottom: 2px solid #fff;
+      transform: rotate(-45deg);
+    }
+  }
+}

package/src/component/collapse/collapse.stories.js

@@ -1,18 +1,18 @@
-import React from 'react'
-import { storiesOf } from '@storybook/react'
-import Collapse from './index'
-import { observable } from 'mobx'
-
-const store = observable({
-  isIn: true,
-  setIsIn() {
-    this.isIn = !this.isIn
-  }
-})
-
-storiesOf('Collapse', module).add('default', () => (
-  <div>
-    <button onClick={() => store.setIsIn()}>toggle</button>
-    <Collapse in={store.isIn}>啦啦啦啦</Collapse>
-  </div>
-))
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import Collapse from './index'
+import { observable } from 'mobx'
+
+const store = observable({
+  isIn: true,
+  setIsIn() {
+    this.isIn = !this.isIn
+  }
+})
+
+storiesOf('Collapse', module).add('default', () => (
+  <div>
+    <button onClick={() => store.setIsIn()}>toggle</button>
+    <Collapse in={store.isIn}>啦啦啦啦</Collapse>
+  </div>
+))

package/src/component/collapse/index.js

@@ -1,36 +1,36 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-class Collapse extends React.Component {
-  render() {
-    const { children, className, in: isIn, style, ...rest } = this.props
-    return (
-      <div
-        {...rest}
-        className={classNames('gm-collapse', className)}
-        style={Object.assign(
-          {
-            transition: isIn ? '0.5s ease all' : 'inherit',
-            height: isIn ? 'inherit' : '0',
-            opacity: isIn ? 1 : 0,
-            overflow: isIn ? 'inherit' : 'hidden'
-          },
-          style
-        )}
-      >
-        {children}
-      </div>
-    )
-  }
-}
-
-Collapse.propTypes = {
-  in: PropTypes.bool.isRequired,
-
-  children: PropTypes.any,
-  className: PropTypes.string,
-  style: PropTypes.object
-}
-
-export default Collapse
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+class Collapse extends React.Component {
+  render() {
+    const { children, className, in: isIn, style, ...rest } = this.props
+    return (
+      <div
+        {...rest}
+        className={classNames('gm-collapse', className)}
+        style={Object.assign(
+          {
+            transition: isIn ? '0.5s ease all' : 'inherit',
+            height: isIn ? 'inherit' : '0',
+            opacity: isIn ? 1 : 0,
+            overflow: isIn ? 'inherit' : 'hidden'
+          },
+          style
+        )}
+      >
+        {children}
+      </div>
+    )
+  }
+}
+
+Collapse.propTypes = {
+  in: PropTypes.bool.isRequired,
+
+  children: PropTypes.any,
+  className: PropTypes.string,
+  style: PropTypes.object
+}
+
+export default Collapse