@gmfe/react 2.14.17 → 2.14.19-beta.0

package/src/component/filter_select/style.less

@@ -1,117 +1,117 @@
-.gm-filter-select {
-  vertical-align: middle;
-  position: relative;
-  border: 1px solid @gm-border-color;
-  border-radius: @gm-border-radius;
-  background-color: white;
-  cursor: pointer;
-  min-height: 30px;
-
-  &.gm-filter-select-disabled {
-    background-color: @gray-lighter;
-    cursor: not-allowed;
-    opacity: 0.6;
-
-    input {
-      cursor: not-allowed;
-    }
-
-    button.close {
-      cursor: not-allowed;
-    }
-  }
-
-  .gm-filter-select-clear-btn {
-    display: block;
-    position: absolute;
-    top: 7px;
-    right: 8px;
-    color: @gm-border-color;
-    cursor: pointer;
-  }
-
-  .gm-filter-select-target-box {
-    overflow-x: auto;
-
-    .selected {
-      background-color: @list-group-hover-bg;
-      padding: 0 5px;
-      margin-right: 5px;
-      border-radius: 4px;
-      height: 20px;
-      line-height: 20px;
-
-      .close {
-        right: -5px;
-        line-height: 1;
-        font-size: 15px;
-        padding-left: 2px;
-      }
-    }
-
-    .gm-filter-select-target {
-      position: static;
-      padding: 5px 10px;
-    }
-  }
-}
-
-.gm-filter-select-popup {
-  background: white;
-
-  .gm-filter-select-popup-input {
-    padding: 5px 10px;
-
-    input {
-      padding: 0 5px;
-      height: 28px;
-      box-shadow: none;
-      min-width: 50px;
-      width: 100%;
-      outline: none;
-    }
-  }
-
-  .list-group {
-    width: 100%;
-    overflow-x: hidden;
-    overflow-y: auto;
-    z-index: 1;
-    margin-bottom: 0;
-
-    .list-group-item {
-      cursor: pointer;
-      border: none;
-      padding: 5px 10px;
-
-      &.active {
-        z-index: inherit;
-        color: @selected-primary;
-      }
-
-      &:first-child {
-        border-top: none;
-      }
-
-      &.active.line-selected {
-        background-color: @gm-list-bg-hover;
-      }
-
-      &.line-selected {
-        background-color: @gm-list-bg-hover;
-      }
-    }
-
-    .list-group-label {
-      .list-group-label-item {
-        padding: 5px 10px;
-        border-top: 1px solid @gm-border-color;
-        color: @input-color-placeholder;
-      }
-
-      .list-group-item {
-        padding: 5px 22px;
-      }
-    }
-  }
-}
+.gm-filter-select {
+  vertical-align: middle;
+  position: relative;
+  border: 1px solid @gm-border-color;
+  border-radius: @gm-border-radius;
+  background-color: white;
+  cursor: pointer;
+  min-height: 30px;
+
+  &.gm-filter-select-disabled {
+    background-color: @gray-lighter;
+    cursor: not-allowed;
+    opacity: 0.6;
+
+    input {
+      cursor: not-allowed;
+    }
+
+    button.close {
+      cursor: not-allowed;
+    }
+  }
+
+  .gm-filter-select-clear-btn {
+    display: block;
+    position: absolute;
+    top: 7px;
+    right: 8px;
+    color: @gm-border-color;
+    cursor: pointer;
+  }
+
+  .gm-filter-select-target-box {
+    overflow-x: auto;
+
+    .selected {
+      background-color: @list-group-hover-bg;
+      padding: 0 5px;
+      margin-right: 5px;
+      border-radius: 4px;
+      height: 20px;
+      line-height: 20px;
+
+      .close {
+        right: -5px;
+        line-height: 1;
+        font-size: 15px;
+        padding-left: 2px;
+      }
+    }
+
+    .gm-filter-select-target {
+      position: static;
+      padding: 5px 10px;
+    }
+  }
+}
+
+.gm-filter-select-popup {
+  background: white;
+
+  .gm-filter-select-popup-input {
+    padding: 5px 10px;
+
+    input {
+      padding: 0 5px;
+      height: 28px;
+      box-shadow: none;
+      min-width: 50px;
+      width: 100%;
+      outline: none;
+    }
+  }
+
+  .list-group {
+    width: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+    z-index: 1;
+    margin-bottom: 0;
+
+    .list-group-item {
+      cursor: pointer;
+      border: none;
+      padding: 5px 10px;
+
+      &.active {
+        z-index: inherit;
+        color: @selected-primary;
+      }
+
+      &:first-child {
+        border-top: none;
+      }
+
+      &.active.line-selected {
+        background-color: @gm-list-bg-hover;
+      }
+
+      &.line-selected {
+        background-color: @gm-list-bg-hover;
+      }
+    }
+
+    .list-group-label {
+      .list-group-label-item {
+        padding: 5px 10px;
+        border-top: 1px solid @gm-border-color;
+        color: @input-color-placeholder;
+      }
+
+      .list-group-item {
+        padding: 5px 22px;
+      }
+    }
+  }
+}

package/src/component/flex/index.js

@@ -1,132 +1,132 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-class Flex extends React.Component {
-  render() {
-    const {
-      flex,
-
-      auto,
-      none,
-      width,
-      height,
-
-      row,
-      column,
-
-      wrap,
-      nowrap,
-
-      justifyStart,
-      justifyEnd,
-      justifyCenter,
-      justifyBetween,
-      justifyAround,
-
-      alignStart,
-      alignEnd,
-      alignCenter,
-      alignBaseline,
-      alignStretch,
-
-      alignContentStart,
-      alignContentEnd,
-      alignContentCenter,
-      alignContentBetween,
-      alignContentAround,
-      alignContentStretch,
-
-      className,
-      style,
-
-      ...rest
-    } = this.props
-    const cn = classNames(
-      {
-        'gm-flex': true,
-
-        'gm-flex-flex': flex,
-        'gm-flex-auto': auto,
-        'gm-flex-none': none || width || height,
-
-        'gm-flex-row': row,
-        'gm-flex-column': column,
-
-        'gm-flex-wrap': wrap,
-        'gm-flex-nowrap': nowrap,
-
-        'gm-flex-justify-start': justifyStart,
-        'gm-flex-justify-end': justifyEnd,
-        'gm-flex-justify-center': justifyCenter,
-        'gm-flex-justify-between': justifyBetween,
-        'gm-flex-justify-around': justifyAround,
-
-        'gm-flex-align-start': alignStart,
-        'gm-flex-align-end': alignEnd,
-        'gm-flex-align-center': alignCenter,
-        'gm-flex-align-baseline': alignBaseline,
-        'gm-flex-align-stretch': alignStretch,
-
-        'gm-flex-align-content-start': alignContentStart,
-        'gm-flex-align-content-end': alignContentEnd,
-        'gm-flex-align-content-center': alignContentCenter,
-        'gm-flex-align-content-between': alignContentBetween,
-        'gm-flex-align-content-around': alignContentAround,
-        'gm-flex-align-content-stretch': alignContentStretch
-      },
-      className
-    )
-
-    const s = Object.assign({}, style)
-    if (flex) {
-      s.flex = typeof flex === 'boolean' ? 1 : flex
-      s.WebKitFlex = typeof flex === 'boolean' ? 1 : flex
-    }
-    if (height) {
-      s.height = height
-    }
-    if (width) {
-      s.width = width
-    }
-
-    return (
-      <div {...rest} className={cn} style={s}>
-        {this.props.children}
-      </div>
-    )
-  }
-}
-
-Flex.propTypes = {
-  flex: PropTypes.oneOfType([PropTypes.number, PropTypes.bool]),
-  auto: PropTypes.bool,
-  none: PropTypes.bool,
-  width: PropTypes.string,
-  height: PropTypes.string,
-  row: PropTypes.bool,
-  column: PropTypes.bool,
-  wrap: PropTypes.bool,
-  nowrap: PropTypes.bool,
-  justifyStart: PropTypes.bool,
-  justifyEnd: PropTypes.bool,
-  justifyCenter: PropTypes.bool,
-  justifyBetween: PropTypes.bool,
-  justifyAround: PropTypes.bool,
-  alignStart: PropTypes.bool,
-  alignEnd: PropTypes.bool,
-  alignCenter: PropTypes.bool,
-  alignBaseline: PropTypes.bool,
-  alignStretch: PropTypes.bool,
-  alignContentStart: PropTypes.bool,
-  alignContentEnd: PropTypes.bool,
-  alignContentCenter: PropTypes.bool,
-  alignContentBetween: PropTypes.bool,
-  alignContentAround: PropTypes.bool,
-  alignContentStretch: PropTypes.bool,
-  children: PropTypes.any,
-  className: PropTypes.string,
-  style: PropTypes.object
-}
-
-export default Flex
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+class Flex extends React.Component {
+  render() {
+    const {
+      flex,
+
+      auto,
+      none,
+      width,
+      height,
+
+      row,
+      column,
+
+      wrap,
+      nowrap,
+
+      justifyStart,
+      justifyEnd,
+      justifyCenter,
+      justifyBetween,
+      justifyAround,
+
+      alignStart,
+      alignEnd,
+      alignCenter,
+      alignBaseline,
+      alignStretch,
+
+      alignContentStart,
+      alignContentEnd,
+      alignContentCenter,
+      alignContentBetween,
+      alignContentAround,
+      alignContentStretch,
+
+      className,
+      style,
+
+      ...rest
+    } = this.props
+    const cn = classNames(
+      {
+        'gm-flex': true,
+
+        'gm-flex-flex': flex,
+        'gm-flex-auto': auto,
+        'gm-flex-none': none || width || height,
+
+        'gm-flex-row': row,
+        'gm-flex-column': column,
+
+        'gm-flex-wrap': wrap,
+        'gm-flex-nowrap': nowrap,
+
+        'gm-flex-justify-start': justifyStart,
+        'gm-flex-justify-end': justifyEnd,
+        'gm-flex-justify-center': justifyCenter,
+        'gm-flex-justify-between': justifyBetween,
+        'gm-flex-justify-around': justifyAround,
+
+        'gm-flex-align-start': alignStart,
+        'gm-flex-align-end': alignEnd,
+        'gm-flex-align-center': alignCenter,
+        'gm-flex-align-baseline': alignBaseline,
+        'gm-flex-align-stretch': alignStretch,
+
+        'gm-flex-align-content-start': alignContentStart,
+        'gm-flex-align-content-end': alignContentEnd,
+        'gm-flex-align-content-center': alignContentCenter,
+        'gm-flex-align-content-between': alignContentBetween,
+        'gm-flex-align-content-around': alignContentAround,
+        'gm-flex-align-content-stretch': alignContentStretch
+      },
+      className
+    )
+
+    const s = Object.assign({}, style)
+    if (flex) {
+      s.flex = typeof flex === 'boolean' ? 1 : flex
+      s.WebKitFlex = typeof flex === 'boolean' ? 1 : flex
+    }
+    if (height) {
+      s.height = height
+    }
+    if (width) {
+      s.width = width
+    }
+
+    return (
+      <div {...rest} className={cn} style={s}>
+        {this.props.children}
+      </div>
+    )
+  }
+}
+
+Flex.propTypes = {
+  flex: PropTypes.oneOfType([PropTypes.number, PropTypes.bool]),
+  auto: PropTypes.bool,
+  none: PropTypes.bool,
+  width: PropTypes.string,
+  height: PropTypes.string,
+  row: PropTypes.bool,
+  column: PropTypes.bool,
+  wrap: PropTypes.bool,
+  nowrap: PropTypes.bool,
+  justifyStart: PropTypes.bool,
+  justifyEnd: PropTypes.bool,
+  justifyCenter: PropTypes.bool,
+  justifyBetween: PropTypes.bool,
+  justifyAround: PropTypes.bool,
+  alignStart: PropTypes.bool,
+  alignEnd: PropTypes.bool,
+  alignCenter: PropTypes.bool,
+  alignBaseline: PropTypes.bool,
+  alignStretch: PropTypes.bool,
+  alignContentStart: PropTypes.bool,
+  alignContentEnd: PropTypes.bool,
+  alignContentCenter: PropTypes.bool,
+  alignContentBetween: PropTypes.bool,
+  alignContentAround: PropTypes.bool,
+  alignContentStretch: PropTypes.bool,
+  children: PropTypes.any,
+  className: PropTypes.string,
+  style: PropTypes.object
+}
+
+export default Flex

package/src/component/flex/stories.js

@@ -1,13 +1,13 @@
-import React from 'react'
-import { storiesOf } from '@storybook/react'
-import Flex from './index'
-
-storiesOf('Flex', module).add('default', () => <Flex />, {
-  info: {
-    text: `
-语法见 [Flex](http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html)
-
-本组件只是个简单的封装，只提供兼容的属性
-`
-  }
-})
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import Flex from './index'
+
+storiesOf('Flex', module).add('default', () => <Flex />, {
+  info: {
+    text: `
+语法见 [Flex](http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html)
+
+本组件只是个简单的封装，只提供兼容的属性
+`
+  }
+})