@gmfe/react 2.14.17 → 2.14.19-beta.0

package/src/component/sheet/style.less

@@ -1,95 +1,95 @@
-.gm-sheet {
-  position: relative;
-
-  .gm-sheet-select-all-tip {
-    position: absolute;
-    top: -19px;
-    white-space: nowrap;
-    left: 6px;
-    background: white;
-    padding: 4px 10px;
-
-    &-arrow {
-      position: absolute;
-      border: 5px solid transparent;
-      bottom: -5px;
-      border-bottom-width: 0;
-      border-top-color: hsla(0, 0%, 85%, 0.7);
-
-      &::after {
-        bottom: 1px;
-        content: ' ';
-        position: absolute;
-        margin-left: -4px;
-        border-left: 4px solid transparent;
-        border-right: 4px solid transparent;
-        border-top: 4px solid white;
-      }
-    }
-  }
-
-  .gm-pagination-text {
-    margin-right: 10px;
-  }
-
-  .gm-sheet-select {
-    width: 30px;
-  }
-
-  .gm-sheet-table-scroll-x {
-    overflow-x: auto;
-  }
-
-  .gm-sheet-th-expanded {
-    width: 50px;
-  }
-
-  .table {
-    margin-bottom: 0;
-  }
-
-  .table > tbody {
-    .gm-sheet-expanded-icon {
-      cursor: pointer;
-    }
-
-    & > .gm-sheet-expanded-tr {
-      background: @table-bg-accent;
-
-      > td {
-        padding: 0;
-
-        > .gm-sheet {
-          .table {
-            margin-bottom: 0;
-            background: @table-bg-accent;
-            border: 1px solid @brand-primary;
-
-            thead,
-            tbody {
-              tr {
-                background: @table-bg-accent;
-
-                th:last-child,
-                td:last-child {
-                  border-right: 1px solid @brand-primary;
-                }
-              }
-            }
-
-            tbody tr:last-child {
-              border-bottom: none;
-            }
-
-            thead:first-child,
-            tbody:first-child {
-              tr:first-child {
-                padding-left: 2px;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
+.gm-sheet {
+  position: relative;
+
+  .gm-sheet-select-all-tip {
+    position: absolute;
+    top: -19px;
+    white-space: nowrap;
+    left: 6px;
+    background: white;
+    padding: 4px 10px;
+
+    &-arrow {
+      position: absolute;
+      border: 5px solid transparent;
+      bottom: -5px;
+      border-bottom-width: 0;
+      border-top-color: hsla(0, 0%, 85%, 0.7);
+
+      &::after {
+        bottom: 1px;
+        content: ' ';
+        position: absolute;
+        margin-left: -4px;
+        border-left: 4px solid transparent;
+        border-right: 4px solid transparent;
+        border-top: 4px solid white;
+      }
+    }
+  }
+
+  .gm-pagination-text {
+    margin-right: 10px;
+  }
+
+  .gm-sheet-select {
+    width: 30px;
+  }
+
+  .gm-sheet-table-scroll-x {
+    overflow-x: auto;
+  }
+
+  .gm-sheet-th-expanded {
+    width: 50px;
+  }
+
+  .table {
+    margin-bottom: 0;
+  }
+
+  .table > tbody {
+    .gm-sheet-expanded-icon {
+      cursor: pointer;
+    }
+
+    & > .gm-sheet-expanded-tr {
+      background: @table-bg-accent;
+
+      > td {
+        padding: 0;
+
+        > .gm-sheet {
+          .table {
+            margin-bottom: 0;
+            background: @table-bg-accent;
+            border: 1px solid @brand-primary;
+
+            thead,
+            tbody {
+              tr {
+                background: @table-bg-accent;
+
+                th:last-child,
+                td:last-child {
+                  border-right: 1px solid @brand-primary;
+                }
+              }
+            }
+
+            tbody tr:last-child {
+              border-bottom: none;
+            }
+
+            thead:first-child,
+            tbody:first-child {
+              tr:first-child {
+                padding-left: 2px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/src/component/steps/index.js

@@ -1,66 +1,66 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import Flex from '../flex'
-import classNames from 'classnames'
-import _ from 'lodash'
-
-const Step = props => {
-  const { title, description, index } = props
-
-  return (
-    <Flex row className='gm-steps-step gm-margin-top-5'>
-      <Flex column alignCenter className='gm-margin-right-10'>
-        <div className='gm-steps-step-icon'>{index}</div>
-        <div className='gm-steps-step-tag gm-margin-top-5' />
-      </Flex>
-      <div>
-        {title && <div className='gm-steps-step-title'>{title}</div>}
-        {description && (
-          <div className='gm-steps-step-description'>{description}</div>
-        )}
-      </div>
-    </Flex>
-  )
-}
-
-Step.propTypes = {
-  title: PropTypes.string,
-  description: PropTypes.string,
-  index: PropTypes.number.isRequired
-}
-
-const Steps = props => {
-  const { data, className, ...rest } = props
-
-  const renderStep = () => {
-    return _.map(data, (item, index) => {
-      return (
-        <Step
-          index={index + 1}
-          title={item.title}
-          description={item.description}
-          key={`step ${index}`}
-        />
-      )
-    })
-  }
-
-  return (
-    <div {...rest} className={classNames('gm-steps', className)}>
-      {renderStep()}
-    </div>
-  )
-}
-
-Steps.propTypes = {
-  /** @type {[ {title: string, description: string} ] } */
-  data: PropTypes.arrayOf(
-    PropTypes.shape({
-      title: PropTypes.string,
-      description: PropTypes.string
-    })
-  ).isRequired,
-  className: PropTypes.string
-}
-
-export default Steps
+import React from 'react'
+import PropTypes from 'prop-types'
+import Flex from '../flex'
+import classNames from 'classnames'
+import _ from 'lodash'
+
+const Step = props => {
+  const { title, description, index } = props
+
+  return (
+    <Flex row className='gm-steps-step gm-margin-top-5'>
+      <Flex column alignCenter className='gm-margin-right-10'>
+        <div className='gm-steps-step-icon'>{index}</div>
+        <div className='gm-steps-step-tag gm-margin-top-5' />
+      </Flex>
+      <div>
+        {title && <div className='gm-steps-step-title'>{title}</div>}
+        {description && (
+          <div className='gm-steps-step-description'>{description}</div>
+        )}
+      </div>
+    </Flex>
+  )
+}
+
+Step.propTypes = {
+  title: PropTypes.string,
+  description: PropTypes.string,
+  index: PropTypes.number.isRequired
+}
+
+const Steps = props => {
+  const { data, className, ...rest } = props
+
+  const renderStep = () => {
+    return _.map(data, (item, index) => {
+      return (
+        <Step
+          index={index + 1}
+          title={item.title}
+          description={item.description}
+          key={`step ${index}`}
+        />
+      )
+    })
+  }
+
+  return (
+    <div {...rest} className={classNames('gm-steps', className)}>
+      {renderStep()}
+    </div>
+  )
+}
+
+Steps.propTypes = {
+  /** @type {[ {title: string, description: string} ] } */
+  data: PropTypes.arrayOf(
+    PropTypes.shape({
+      title: PropTypes.string,
+      description: PropTypes.string
+    })
+  ).isRequired,
+  className: PropTypes.string
+}
+
+export default Steps

package/src/component/steps/steps.stories.js

@@ -1,15 +1,15 @@
-import React from 'react'
-import { storiesOf } from '@storybook/react'
-import Steps from './index'
-
-storiesOf('Steps', module).add('default', () => (
-  <Steps
-    data={[
-      { title: '第一步' },
-      { title: '第二步', description: '这是第二步' },
-      { title: '第三步', description: '这是第三步' },
-      { title: '第四步', description: '这是第四步这是第四步这是第四步' }
-    ]}
-    style={{ width: '300px' }}
-  />
-))
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import Steps from './index'
+
+storiesOf('Steps', module).add('default', () => (
+  <Steps
+    data={[
+      { title: '第一步' },
+      { title: '第二步', description: '这是第二步' },
+      { title: '第三步', description: '这是第三步' },
+      { title: '第四步', description: '这是第四步这是第四步这是第四步' }
+    ]}
+    style={{ width: '300px' }}
+  />
+))

package/src/component/steps/style.less

@@ -1,39 +1,39 @@
-@gm-icon-diameter: 18px;
-
-.gm-steps {
-  .gm-steps-step {
-    &:first-child {
-      margin-top: 0 !important;
-    }
-
-    // 线条
-    .gm-steps-step-tag {
-      width: 1px;
-      height: 25px;
-      background: @brand-primary;
-    }
-
-    &:last-child .gm-steps-step-tag {
-      display: none;
-    }
-
-    .gm-steps-step-icon {
-      border: 1px @brand-primary solid;
-      border-radius: 50%;
-      line-height: @gm-icon-diameter;
-      text-align: center;
-      width: @gm-icon-diameter;
-      height: @gm-icon-diameter;
-      color: @brand-primary;
-    }
-
-    .gm-steps-step-title {
-      height: @gm-icon-diameter + 2; // 加上icon边框宽度
-      line-height: @gm-icon-diameter + 2; // 加上icon边框宽度
-    }
-
-    .gm-steps-step-description {
-      color: @gm-color-fourth;
-    }
-  }
-}
+@gm-icon-diameter: 18px;
+
+.gm-steps {
+  .gm-steps-step {
+    &:first-child {
+      margin-top: 0 !important;
+    }
+
+    // 线条
+    .gm-steps-step-tag {
+      width: 1px;
+      height: 25px;
+      background: @brand-primary;
+    }
+
+    &:last-child .gm-steps-step-tag {
+      display: none;
+    }
+
+    .gm-steps-step-icon {
+      border: 1px @brand-primary solid;
+      border-radius: 50%;
+      line-height: @gm-icon-diameter;
+      text-align: center;
+      width: @gm-icon-diameter;
+      height: @gm-icon-diameter;
+      color: @brand-primary;
+    }
+
+    .gm-steps-step-title {
+      height: @gm-icon-diameter + 2; // 加上icon边框宽度
+      line-height: @gm-icon-diameter + 2; // 加上icon边框宽度
+    }
+
+    .gm-steps-step-description {
+      color: @gm-color-fourth;
+    }
+  }
+}

package/src/component/storage/index.js

@@ -1,54 +1,54 @@
-import { useEffect } from 'react'
-import PropTypes from 'prop-types'
-import _ from 'lodash'
-
-const prefix = '_react-gm_'
-const { localStorage } = window
-
-const StorageStatics = {
-  set(key, value) {
-    localStorage.setItem(prefix + key, JSON.stringify(value))
-  },
-  get(key) {
-    const v = localStorage.getItem(prefix + key)
-    return v ? JSON.parse(v) : v
-  },
-  remove(key) {
-    localStorage.removeItem(prefix + key)
-  },
-  clear() {
-    localStorage.clear()
-  },
-  getAll() {
-    const result = {}
-    _.each(_.range(localStorage.length), i => {
-      let key = localStorage.key(i)
-      if (key.startsWith(prefix)) {
-        key = key.slice(prefix.length)
-        result[key] = StorageStatics.get(key)
-      }
-    })
-    return _.keys(result) ? result : null
-  }
-}
-
-const Storage = ({ name, value }) => {
-  useEffect(() => {
-    StorageStatics.set(name, value)
-  }, [value])
-
-  return null
-}
-
-Object.assign(Storage, StorageStatics)
-
-Storage.propTypes = {
-  name: PropTypes.string.isRequired,
-  value: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.object,
-    PropTypes.array
-  ])
-}
-
-export default Storage
+import { useEffect } from 'react'
+import PropTypes from 'prop-types'
+import _ from 'lodash'
+
+const prefix = '_react-gm_'
+const { localStorage } = window
+
+const StorageStatics = {
+  set(key, value) {
+    localStorage.setItem(prefix + key, JSON.stringify(value))
+  },
+  get(key) {
+    const v = localStorage.getItem(prefix + key)
+    return v ? JSON.parse(v) : v
+  },
+  remove(key) {
+    localStorage.removeItem(prefix + key)
+  },
+  clear() {
+    localStorage.clear()
+  },
+  getAll() {
+    const result = {}
+    _.each(_.range(localStorage.length), i => {
+      let key = localStorage.key(i)
+      if (key.startsWith(prefix)) {
+        key = key.slice(prefix.length)
+        result[key] = StorageStatics.get(key)
+      }
+    })
+    return _.keys(result) ? result : null
+  }
+}
+
+const Storage = ({ name, value }) => {
+  useEffect(() => {
+    StorageStatics.set(name, value)
+  }, [value])
+
+  return null
+}
+
+Object.assign(Storage, StorageStatics)
+
+Storage.propTypes = {
+  name: PropTypes.string.isRequired,
+  value: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.object,
+    PropTypes.array
+  ])
+}
+
+export default Storage

package/src/component/storage/stories.js

@@ -1,38 +1,38 @@
-import React from 'react'
-import { storiesOf } from '@storybook/react'
-import { observable } from 'mobx'
-import Storage from './index'
-
-const store = observable({
-  data: 'ad',
-  setData(data) {
-    this.data = data
-  }
-})
-
-storiesOf('Storage', module).add(
-  'default',
-  () => (
-    <div>
-      实时存储
-      <input
-        type='text'
-        value={store.data}
-        onChange={event => store.setData(event.target.value)}
-      />
-      <Storage name='test' value={store.data} />
-    </div>
-  ),
-  {
-    info: {
-      text: `
-### Static
-- \`set(key, value)\` 
-- \`get(key)\`
-- \`remove(key)\`
-- \`clear\` 慎用，清除本域名全部存储
-- \`getAll\` 拿到全部存储，以Obj形式返回
-`
-    }
-  }
-)
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import { observable } from 'mobx'
+import Storage from './index'
+
+const store = observable({
+  data: 'ad',
+  setData(data) {
+    this.data = data
+  }
+})
+
+storiesOf('Storage', module).add(
+  'default',
+  () => (
+    <div>
+      实时存储
+      <input
+        type='text'
+        value={store.data}
+        onChange={event => store.setData(event.target.value)}
+      />
+      <Storage name='test' value={store.data} />
+    </div>
+  ),
+  {
+    info: {
+      text: `
+### Static
+- \`set(key, value)\` 
+- \`get(key)\`
+- \`remove(key)\`
+- \`clear\` 慎用，清除本域名全部存储
+- \`getAll\` 拿到全部存储，以Obj形式返回
+`
+    }
+  }
+)