@gmfe/react 2.14.17 → 2.14.19-beta.0

package/src/component/selection/index.js

@@ -1,132 +1,132 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-import _ from 'lodash'
-import SVGCloseCircle from '../../../svg/close-circle.svg'
-import IconDownUp from '../icon_down_up'
-
-// TODO multiple
-class Selection extends React.Component {
-  refInput = React.createRef()
-
-  apiDoFocus = () => {
-    this.refInput.current.focus()
-  }
-
-  handleClear = () => {
-    const { onSelect } = this.props
-
-    onSelect(null)
-  }
-
-  render() {
-    const {
-      selected,
-      onSelect,
-      disabled,
-      renderSelected,
-      placeholder,
-      funIcon,
-      clean,
-      disabledClose,
-      className,
-      onKeyDown,
-      isForSelect,
-      ...rest
-    } = this.props
-
-    const text =
-      selected !== null && selected !== undefined
-        ? renderSelected(selected)
-        : ''
-
-    return (
-      <div
-        {...rest}
-        className={classNames(
-          'gm-selection',
-          {
-            disabled,
-            'gm-selection-disabled-clean': clean,
-            'gm-selection-disabled-close': disabledClose
-          },
-          className
-        )}
-      >
-        {isForSelect ? (
-          <div
-            ref={this.refInput}
-            className={classNames('form-control gm-selection-selected')}
-            disabled={disabled}
-            tabIndex={0}
-            onKeyDown={onKeyDown}
-          >
-            {text || placeholder}
-          </div>
-        ) : (
-          <input
-            ref={this.refInput}
-            disabled={disabled}
-            type='text'
-            value={text}
-            onChange={_.noop}
-            onKeyDown={onKeyDown}
-            placeholder={placeholder}
-            className='form-control gm-selection-selected'
-          />
-        )}
-        {selected && !disabledClose && !clean && (
-          <SVGCloseCircle
-            onClick={!disabled && this.handleClear}
-            className='gm-selection-icon gm-selection-close-icon'
-          />
-        )}
-        {funIcon ? (
-          React.cloneElement(funIcon, {
-            className: classNames(
-              'gm-selection-icon',
-              {
-                'gm-selection-fun-icon': selected && !disabledClose && !clean
-              },
-              funIcon.props.className
-            )
-          })
-        ) : (
-          <IconDownUp
-            active={(className || '').includes('gm-popover-active')}
-            className={classNames('gm-selection-icon gm-selection-down-up', {
-              'gm-selection-fun-icon': selected && !disabledClose && !clean
-            })}
-          />
-        )}
-      </div>
-    )
-  }
-}
-
-Selection.propTypes = {
-  /** 单选情况 无 or {value, text} */
-  selected: PropTypes.any,
-  onSelect: PropTypes.func.isRequired,
-  disabled: PropTypes.bool,
-  renderSelected: PropTypes.func,
-  placeholder: PropTypes.string,
-  /** 代替默认的 icon */
-  funIcon: PropTypes.element,
-  /** 干净模式 */
-  clean: PropTypes.bool,
-  /** 禁用 x 按钮 */
-  disabledClose: PropTypes.bool,
-  /** 键盘用 */
-  onKeyDown: PropTypes.func,
-  className: PropTypes.string,
-  style: PropTypes.object,
-  /** 给 Select 定制的 */
-  isForSelect: PropTypes.bool
-}
-
-Selection.defaultProps = {
-  renderSelected: item => item.text
-}
-
-export default Selection
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import _ from 'lodash'
+import SVGCloseCircle from '../../../svg/close-circle.svg'
+import IconDownUp from '../icon_down_up'
+
+// TODO multiple
+class Selection extends React.Component {
+  refInput = React.createRef()
+
+  apiDoFocus = () => {
+    this.refInput.current.focus()
+  }
+
+  handleClear = () => {
+    const { onSelect } = this.props
+
+    onSelect(null)
+  }
+
+  render() {
+    const {
+      selected,
+      onSelect,
+      disabled,
+      renderSelected,
+      placeholder,
+      funIcon,
+      clean,
+      disabledClose,
+      className,
+      onKeyDown,
+      isForSelect,
+      ...rest
+    } = this.props
+
+    const text =
+      selected !== null && selected !== undefined
+        ? renderSelected(selected)
+        : ''
+
+    return (
+      <div
+        {...rest}
+        className={classNames(
+          'gm-selection',
+          {
+            disabled,
+            'gm-selection-disabled-clean': clean,
+            'gm-selection-disabled-close': disabledClose
+          },
+          className
+        )}
+      >
+        {isForSelect ? (
+          <div
+            ref={this.refInput}
+            className={classNames('form-control gm-selection-selected')}
+            disabled={disabled}
+            tabIndex={0}
+            onKeyDown={onKeyDown}
+          >
+            {text || placeholder}
+          </div>
+        ) : (
+          <input
+            ref={this.refInput}
+            disabled={disabled}
+            type='text'
+            value={text}
+            onChange={_.noop}
+            onKeyDown={onKeyDown}
+            placeholder={placeholder}
+            className='form-control gm-selection-selected'
+          />
+        )}
+        {selected && !disabledClose && !clean && (
+          <SVGCloseCircle
+            onClick={!disabled && this.handleClear}
+            className='gm-selection-icon gm-selection-close-icon'
+          />
+        )}
+        {funIcon ? (
+          React.cloneElement(funIcon, {
+            className: classNames(
+              'gm-selection-icon',
+              {
+                'gm-selection-fun-icon': selected && !disabledClose && !clean
+              },
+              funIcon.props.className
+            )
+          })
+        ) : (
+          <IconDownUp
+            active={(className || '').includes('gm-popover-active')}
+            className={classNames('gm-selection-icon gm-selection-down-up', {
+              'gm-selection-fun-icon': selected && !disabledClose && !clean
+            })}
+          />
+        )}
+      </div>
+    )
+  }
+}
+
+Selection.propTypes = {
+  /** 单选情况 无 or {value, text} */
+  selected: PropTypes.any,
+  onSelect: PropTypes.func.isRequired,
+  disabled: PropTypes.bool,
+  renderSelected: PropTypes.func,
+  placeholder: PropTypes.string,
+  /** 代替默认的 icon */
+  funIcon: PropTypes.element,
+  /** 干净模式 */
+  clean: PropTypes.bool,
+  /** 禁用 x 按钮 */
+  disabledClose: PropTypes.bool,
+  /** 键盘用 */
+  onKeyDown: PropTypes.func,
+  className: PropTypes.string,
+  style: PropTypes.object,
+  /** 给 Select 定制的 */
+  isForSelect: PropTypes.bool
+}
+
+Selection.defaultProps = {
+  renderSelected: item => item.text
+}
+
+export default Selection

package/src/component/selection/selection.stories.js

@@ -1,41 +1,41 @@
-import React from 'react'
-import { storiesOf } from '@storybook/react'
-import Selection from './'
-
-storiesOf('Selection', module)
-  .add('default', () => (
-    <Selection
-      onSelect={selected => console.log(selected)}
-      placeholder='请选择'
-    />
-  ))
-  .add('disabled', () => (
-    <Selection
-      disabled
-      onSelect={selected => console.log(selected)}
-      placeholder='请选择'
-    />
-  ))
-  .add('自定义选中项', () => (
-    <Selection
-      selected={{ value: 0, text: '选中项' }}
-      onSelect={selected => console.log(selected)}
-      renderSelected={item => item.text + 'lalala'}
-    />
-  ))
-  .add('clean', () => (
-    <Selection
-      clean
-      selected={{ value: 0, text: '选中项' }}
-      onSelect={selected => console.log(selected)}
-      placeholder='请选择'
-    />
-  ))
-  .add('disabledClose', () => (
-    <Selection
-      disabledClose
-      selected={{ value: 0, text: '选中项' }}
-      onSelect={selected => console.log(selected)}
-      placeholder='请选择'
-    />
-  ))
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import Selection from './'
+
+storiesOf('Selection', module)
+  .add('default', () => (
+    <Selection
+      onSelect={selected => console.log(selected)}
+      placeholder='请选择'
+    />
+  ))
+  .add('disabled', () => (
+    <Selection
+      disabled
+      onSelect={selected => console.log(selected)}
+      placeholder='请选择'
+    />
+  ))
+  .add('自定义选中项', () => (
+    <Selection
+      selected={{ value: 0, text: '选中项' }}
+      onSelect={selected => console.log(selected)}
+      renderSelected={item => item.text + 'lalala'}
+    />
+  ))
+  .add('clean', () => (
+    <Selection
+      clean
+      selected={{ value: 0, text: '选中项' }}
+      onSelect={selected => console.log(selected)}
+      placeholder='请选择'
+    />
+  ))
+  .add('disabledClose', () => (
+    <Selection
+      disabledClose
+      selected={{ value: 0, text: '选中项' }}
+      onSelect={selected => console.log(selected)}
+      placeholder='请选择'
+    />
+  ))

package/src/component/selection/style.less

@@ -1,67 +1,67 @@
-.gm-selection {
-  position: relative;
-  vertical-align: middle;
-  height: 30px;
-
-  .gm-selection-selected {
-    display: block;
-    padding-right: 24px;
-    cursor: pointer;
-    line-height: 18px;
-  }
-
-  .gm-selection-icon {
-    position: absolute;
-    display: block;
-    line-height: 1;
-    top: 9px;
-    right: 6px;
-    color: @gm-color-fourth;
-    cursor: pointer;
-  }
-
-  .gm-selection-close-icon {
-    display: none;
-    right: 6px;
-  }
-
-  .gm-selection-down-up {
-    right: 6px;
-  }
-
-  &:hover {
-    .gm-selection-close-icon {
-      display: block;
-    }
-
-    .gm-selection-fun-icon {
-      display: none;
-    }
-  }
-
-  &.disabled {
-    cursor: not-allowed;
-
-    .gm-selection-selected {
-      cursor: not-allowed;
-      border: 1px solid @gm-border-color;
-    }
-
-    .gm-selection-close-icon {
-      cursor: not-allowed;
-    }
-  }
-
-  &.gm-selection-disabled-close {
-    .gm-selection-selected {
-      padding-right: 20px;
-    }
-  }
-
-  &.gm-selection-disabled-clean {
-    .gm-selection-selected {
-      padding-right: 20px;
-      border: 1px solid transparent;
-    }
-  }
-}
+.gm-selection {
+  position: relative;
+  vertical-align: middle;
+  height: 30px;
+
+  .gm-selection-selected {
+    display: block;
+    padding-right: 24px;
+    cursor: pointer;
+    line-height: 18px;
+  }
+
+  .gm-selection-icon {
+    position: absolute;
+    display: block;
+    line-height: 1;
+    top: 9px;
+    right: 6px;
+    color: @gm-color-fourth;
+    cursor: pointer;
+  }
+
+  .gm-selection-close-icon {
+    display: none;
+    right: 6px;
+  }
+
+  .gm-selection-down-up {
+    right: 6px;
+  }
+
+  &:hover {
+    .gm-selection-close-icon {
+      display: block;
+    }
+
+    .gm-selection-fun-icon {
+      display: none;
+    }
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+
+    .gm-selection-selected {
+      cursor: not-allowed;
+      border: 1px solid @gm-border-color;
+    }
+
+    .gm-selection-close-icon {
+      cursor: not-allowed;
+    }
+  }
+
+  &.gm-selection-disabled-close {
+    .gm-selection-selected {
+      padding-right: 20px;
+    }
+  }
+
+  &.gm-selection-disabled-clean {
+    .gm-selection-selected {
+      padding-right: 20px;
+      border: 1px solid transparent;
+    }
+  }
+}

package/src/component/sheet/index.js

@@ -1,7 +1,7 @@
-import Sheet from './sheet'
-import SheetColumn from './sheet_column'
-import SheetAction from './sheet_action'
-import SheetSelect from './sheet_select'
-import SheetBatchAction from './sheet_batch_action'
-
-export { Sheet, SheetColumn, SheetAction, SheetSelect, SheetBatchAction }
+import Sheet from './sheet'
+import SheetColumn from './sheet_column'
+import SheetAction from './sheet_action'
+import SheetSelect from './sheet_select'
+import SheetBatchAction from './sheet_batch_action'
+
+export { Sheet, SheetColumn, SheetAction, SheetSelect, SheetBatchAction }