@gmfe/react 2.14.20 → 2.14.26-beta.0

package/src/component/list/list.stories.js

@@ -1,99 +1,99 @@
-import React from 'react'
-import { storiesOf } from '@storybook/react'
-import List from './index'
-import { observable } from 'mobx'
-
-const data = [
-  { value: '南山', text: '南山' },
-  { value: '福田', text: '福田', disabled: true },
-  { value: '龙岗', text: '龙岗' },
-  { value: '罗湖', text: '罗湖' },
-  { value: '罗湖1', text: '罗湖1' },
-  { value: '罗湖2', text: '罗湖2' },
-  { value: '罗湖3', text: '罗湖3' },
-  { value: '罗湖4', text: '罗湖4' },
-  { value: '罗湖5', text: '罗湖5' }
-]
-
-const groupData = [
-  {
-    label: '分组二',
-    children: [{ value: '南山', text: '南山' }, { value: '福田', text: '福田' }]
-  },
-  {
-    label: '分组一',
-    children: [{ value: '龙岗', text: '龙岗' }, { value: '罗湖', text: '罗湖' }]
-  }
-]
-
-const store = observable({
-  selected: null,
-  setSelected(selected) {
-    console.log(selected)
-    this.selected = selected
-  }
-})
-
-storiesOf('List', module)
-  .add('default', () => (
-    <div className='gm-inline-block'>
-      <List
-        data={data}
-        selected={store.selected}
-        onSelect={selected => store.setSelected(selected)}
-      />
-    </div>
-  ))
-  .add('disabled', () => (
-    <div className='gm-inline-block'>
-      <List
-        data={data}
-        selected={store.selected}
-        onSelect={selected => store.setSelected(selected)}
-      />
-    </div>
-  ))
-  .add('multiple', () => (
-    <div className='gm-inline-block'>
-      <List
-        multiple
-        data={data}
-        selected={store.selected}
-        onSelect={selected => store.setSelected(selected)}
-      />
-    </div>
-  ))
-  .add('group', () => (
-    <div className='gm-inline-block'>
-      <List
-        data={groupData}
-        isGroupList
-        selected={store.selected}
-        onSelect={selected => store.setSelected(selected)}
-      />
-    </div>
-  ))
-  .add('自定义 item', () => (
-    <div className='gm-inline-block'>
-      <List
-        data={data}
-        selected={store.selected}
-        onSelect={selected => store.setSelected(selected)}
-        renderItem={(item, index) => item.text + index}
-      />
-    </div>
-  ))
-  .add('isScrollTo', () => (
-    <div className='gm-inline-block'>
-      <List
-        data={data}
-        selected='罗湖5'
-        onSelect={selected => store.setSelected(selected)}
-        renderItem={(item, index) => item.text + index}
-        isScrollTo
-        style={{
-          maxHeight: '100px'
-        }}
-      />
-    </div>
-  ))
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import List from './index'
+import { observable } from 'mobx'
+
+const data = [
+  { value: '南山', text: '南山' },
+  { value: '福田', text: '福田', disabled: true },
+  { value: '龙岗', text: '龙岗' },
+  { value: '罗湖', text: '罗湖' },
+  { value: '罗湖1', text: '罗湖1' },
+  { value: '罗湖2', text: '罗湖2' },
+  { value: '罗湖3', text: '罗湖3' },
+  { value: '罗湖4', text: '罗湖4' },
+  { value: '罗湖5', text: '罗湖5' }
+]
+
+const groupData = [
+  {
+    label: '分组二',
+    children: [{ value: '南山', text: '南山' }, { value: '福田', text: '福田' }]
+  },
+  {
+    label: '分组一',
+    children: [{ value: '龙岗', text: '龙岗' }, { value: '罗湖', text: '罗湖' }]
+  }
+]
+
+const store = observable({
+  selected: null,
+  setSelected(selected) {
+    console.log(selected)
+    this.selected = selected
+  }
+})
+
+storiesOf('List', module)
+  .add('default', () => (
+    <div className='gm-inline-block'>
+      <List
+        data={data}
+        selected={store.selected}
+        onSelect={selected => store.setSelected(selected)}
+      />
+    </div>
+  ))
+  .add('disabled', () => (
+    <div className='gm-inline-block'>
+      <List
+        data={data}
+        selected={store.selected}
+        onSelect={selected => store.setSelected(selected)}
+      />
+    </div>
+  ))
+  .add('multiple', () => (
+    <div className='gm-inline-block'>
+      <List
+        multiple
+        data={data}
+        selected={store.selected}
+        onSelect={selected => store.setSelected(selected)}
+      />
+    </div>
+  ))
+  .add('group', () => (
+    <div className='gm-inline-block'>
+      <List
+        data={groupData}
+        isGroupList
+        selected={store.selected}
+        onSelect={selected => store.setSelected(selected)}
+      />
+    </div>
+  ))
+  .add('自定义 item', () => (
+    <div className='gm-inline-block'>
+      <List
+        data={data}
+        selected={store.selected}
+        onSelect={selected => store.setSelected(selected)}
+        renderItem={(item, index) => item.text + index}
+      />
+    </div>
+  ))
+  .add('isScrollTo', () => (
+    <div className='gm-inline-block'>
+      <List
+        data={data}
+        selected='罗湖5'
+        onSelect={selected => store.setSelected(selected)}
+        renderItem={(item, index) => item.text + index}
+        isScrollTo
+        style={{
+          maxHeight: '100px'
+        }}
+      />
+    </div>
+  ))

package/src/component/list/style.less

@@ -1,58 +1,58 @@
-// 注意注意
-// gm-list gm-list-item.active 被 Select 使用
-.gm-list {
-  border: 1px solid @gm-border-color;
-  background: white;
-  // 注意，overflow-y 会被 FunctionSet 覆盖
-  overflow-y: auto;
-  min-width: 80px;
-
-  .gm-list-item {
-    line-height: 1;
-    cursor: pointer;
-    padding: 9px 10px;
-    background: #fff;
-
-    &.active {
-      color: @selected-primary;
-    }
-
-    &.disabled {
-      cursor: not-allowed;
-      color: @gm-color-fourth;
-    }
-
-    &.will-active {
-      background-color: @gm-list-bg-hover;
-    }
-
-    &:hover {
-      background-color: @gm-list-bg-hover;
-
-      &.disabled {
-        color: @gm-color-third;
-      }
-    }
-  }
-
-  &.gm-list-group {
-    line-height: 1;
-
-    .gm-list-group-item {
-      border-bottom: 1px solid @gm-border-color;
-
-      &:last-child {
-        border-bottom: none;
-      }
-    }
-
-    .gm-list-label {
-      color: @gm-color-second;
-      padding: 9px 10px;
-    }
-
-    .gm-list-item {
-      padding: 9px 10px 9px 22px;
-    }
-  }
-}
+// 注意注意
+// gm-list gm-list-item.active 被 Select 使用
+.gm-list {
+  border: 1px solid @gm-border-color;
+  background: white;
+  // 注意，overflow-y 会被 FunctionSet 覆盖
+  overflow-y: auto;
+  min-width: 80px;
+
+  .gm-list-item {
+    line-height: 1;
+    cursor: pointer;
+    padding: 9px 10px;
+    background: #fff;
+
+    &.active {
+      color: @selected-primary;
+    }
+
+    &.disabled {
+      cursor: not-allowed;
+      color: @gm-color-fourth;
+    }
+
+    &.will-active {
+      background-color: @gm-list-bg-hover;
+    }
+
+    &:hover {
+      background-color: @gm-list-bg-hover;
+
+      &.disabled {
+        color: @gm-color-third;
+      }
+    }
+  }
+
+  &.gm-list-group {
+    line-height: 1;
+
+    .gm-list-group-item {
+      border-bottom: 1px solid @gm-border-color;
+
+      &:last-child {
+        border-bottom: none;
+      }
+    }
+
+    .gm-list-label {
+      color: @gm-color-second;
+      padding: 9px 10px;
+    }
+
+    .gm-list-item {
+      padding: 9px 10px 9px 22px;
+    }
+  }
+}

package/src/component/loading/index.js

@@ -1,45 +1,45 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-class Loading extends React.Component {
-  render() {
-    const { style, size, text, className, ...rest } = this.props
-
-    return (
-      <div {...rest} className={classNames('gm-loading', className)}>
-        <svg
-          className='gm-loading-circular'
-          style={{
-            ...style,
-            width: size + 'px',
-            height: size + 'px'
-          }}
-          viewBox='0 0 50 50'
-        >
-          <circle
-            className='gm-loading-path'
-            cx='25'
-            cy='25'
-            r='20'
-            fill='none'
-          />
-        </svg>
-        {text && <p className='gm-loading-text'>{text}</p>}
-      </div>
-    )
-  }
-}
-
-Loading.propTypes = {
-  text: PropTypes.string,
-  size: PropTypes.number,
-  className: PropTypes.string,
-  style: PropTypes.object
-}
-
-Loading.defaultProps = {
-  size: 40
-}
-
-export default Loading
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+class Loading extends React.Component {
+  render() {
+    const { style, size, text, className, ...rest } = this.props
+
+    return (
+      <div {...rest} className={classNames('gm-loading', className)}>
+        <svg
+          className='gm-loading-circular'
+          style={{
+            ...style,
+            width: size + 'px',
+            height: size + 'px'
+          }}
+          viewBox='0 0 50 50'
+        >
+          <circle
+            className='gm-loading-path'
+            cx='25'
+            cy='25'
+            r='20'
+            fill='none'
+          />
+        </svg>
+        {text && <p className='gm-loading-text'>{text}</p>}
+      </div>
+    )
+  }
+}
+
+Loading.propTypes = {
+  text: PropTypes.string,
+  size: PropTypes.number,
+  className: PropTypes.string,
+  style: PropTypes.object
+}
+
+Loading.defaultProps = {
+  size: 40
+}
+
+export default Loading

package/src/component/loading/loading_chunk.js

@@ -1,59 +1,59 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-import Loading from './index'
-
-class LoadingChunk extends React.Component {
-  render() {
-    const {
-      loading,
-      style,
-      size,
-      text,
-      className,
-      children,
-      ...rest
-    } = this.props
-
-    return (
-      <div
-        {...rest}
-        className={classNames(className, {
-          'gm-loading-chunk': loading
-        })}
-      >
-        {children || <div style={{ height: (size || 50) + 'px' }} />}
-        {loading && (
-          <div className='gm-loading-mask'>
-            <Loading
-              style={{
-                ...style,
-                width: size + 'px',
-                height: size + 'px'
-              }}
-              text={text}
-              size={size}
-              className='gm-loading-position'
-            />
-          </div>
-        )}
-      </div>
-    )
-  }
-}
-
-LoadingChunk.propTypes = {
-  loading: PropTypes.bool,
-  text: PropTypes.string,
-  size: PropTypes.number,
-  children: PropTypes.any,
-  className: PropTypes.string,
-  style: PropTypes.object
-}
-
-LoadingChunk.defaultProps = {
-  size: 50,
-  loading: false
-}
-
-export default LoadingChunk
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import Loading from './index'
+
+class LoadingChunk extends React.Component {
+  render() {
+    const {
+      loading,
+      style,
+      size,
+      text,
+      className,
+      children,
+      ...rest
+    } = this.props
+
+    return (
+      <div
+        {...rest}
+        className={classNames(className, {
+          'gm-loading-chunk': loading
+        })}
+      >
+        {children || <div style={{ height: (size || 50) + 'px' }} />}
+        {loading && (
+          <div className='gm-loading-mask'>
+            <Loading
+              style={{
+                ...style,
+                width: size + 'px',
+                height: size + 'px'
+              }}
+              text={text}
+              size={size}
+              className='gm-loading-position'
+            />
+          </div>
+        )}
+      </div>
+    )
+  }
+}
+
+LoadingChunk.propTypes = {
+  loading: PropTypes.bool,
+  text: PropTypes.string,
+  size: PropTypes.number,
+  children: PropTypes.any,
+  className: PropTypes.string,
+  style: PropTypes.object
+}
+
+LoadingChunk.defaultProps = {
+  size: 50,
+  loading: false
+}
+
+export default LoadingChunk

package/src/component/loading/loading_full_screen.js

@@ -1,62 +1,62 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-import Loading from './index'
-import LayoutRoot from '../layout_root'
-import EVENT_TYPE from '../../event_type'
-
-class LoadingFullScreen extends React.Component {
-  render() {
-    const { style, size, text, className, ...rest } = this.props
-
-    const s = Object.assign({}, style, {
-      width: size + 'px',
-      height: size + 'px'
-    })
-
-    return (
-      <div
-        {...rest}
-        className={classNames('gm-loading-full-screen', className)}
-      >
-        <Loading style={s} text={text} className='gm-loading-spinner' />
-      </div>
-    )
-  }
-}
-
-LoadingFullScreen.render = props => {
-  window.dispatchEvent(new window.CustomEvent(EVENT_TYPE.FULL_LOADING_SHOW))
-  LayoutRoot.setComponent(
-    LayoutRoot.TYPE.FULLLOADING,
-    <LoadingFullScreen {...props} />
-  )
-
-  const documentBody = window.document.body
-  if (documentBody) {
-    documentBody.classList.add('gm-loading-body-overflow')
-  }
-}
-
-LoadingFullScreen.hide = () => {
-  window.dispatchEvent(new window.CustomEvent(EVENT_TYPE.FULL_LOADING_HIDE))
-  LayoutRoot.setComponent(LayoutRoot.TYPE.FULLLOADING, null)
-
-  const documentBody = window.document.body
-  if (documentBody) {
-    documentBody.classList.remove('gm-loading-body-overflow')
-  }
-}
-
-LoadingFullScreen.propTypes = {
-  text: PropTypes.string,
-  size: PropTypes.number,
-  className: PropTypes.string,
-  style: PropTypes.object
-}
-
-LoadingFullScreen.defaultProps = {
-  size: 50
-}
-
-export default LoadingFullScreen
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import Loading from './index'
+import LayoutRoot from '../layout_root'
+import EVENT_TYPE from '../../event_type'
+
+class LoadingFullScreen extends React.Component {
+  render() {
+    const { style, size, text, className, ...rest } = this.props
+
+    const s = Object.assign({}, style, {
+      width: size + 'px',
+      height: size + 'px'
+    })
+
+    return (
+      <div
+        {...rest}
+        className={classNames('gm-loading-full-screen', className)}
+      >
+        <Loading style={s} text={text} className='gm-loading-spinner' />
+      </div>
+    )
+  }
+}
+
+LoadingFullScreen.render = props => {
+  window.dispatchEvent(new window.CustomEvent(EVENT_TYPE.FULL_LOADING_SHOW))
+  LayoutRoot.setComponent(
+    LayoutRoot.TYPE.FULLLOADING,
+    <LoadingFullScreen {...props} />
+  )
+
+  const documentBody = window.document.body
+  if (documentBody) {
+    documentBody.classList.add('gm-loading-body-overflow')
+  }
+}
+
+LoadingFullScreen.hide = () => {
+  window.dispatchEvent(new window.CustomEvent(EVENT_TYPE.FULL_LOADING_HIDE))
+  LayoutRoot.setComponent(LayoutRoot.TYPE.FULLLOADING, null)
+
+  const documentBody = window.document.body
+  if (documentBody) {
+    documentBody.classList.remove('gm-loading-body-overflow')
+  }
+}
+
+LoadingFullScreen.propTypes = {
+  text: PropTypes.string,
+  size: PropTypes.number,
+  className: PropTypes.string,
+  style: PropTypes.object
+}
+
+LoadingFullScreen.defaultProps = {
+  size: 50
+}
+
+export default LoadingFullScreen