@gmfe/react 2.14.17 → 2.14.19-beta.0

package/src/component/nav/nav.stories.js

@@ -1,133 +1,133 @@
-import React from 'react'
-import { storiesOf } from '@storybook/react'
-import Nav from './index'
-import { observable } from 'mobx'
-
-const data = [
-  {
-    link: '/merchandise',
-    name: '商品',
-    sub: [
-      {
-        name: '商品管理',
-        link: '/merchandise/manage',
-        sub: [
-          {
-            link: '/merchandise/manage/sale',
-            name: '报价单管理'
-          },
-          {
-            link: '/merchandise/manage/list',
-            name: '商品库'
-          },
-          {
-            link: '/merchandise/manage/spu_remark',
-            name: '商品备注'
-          }
-        ]
-      },
-      {
-        name: '营销',
-        link: '/merchandise/marketing_tool',
-        sub: [
-          {
-            link: '/merchandise/marketing_tool/price_rule',
-            name: '限时锁价'
-          }
-        ]
-      }
-    ]
-  },
-  {
-    link: '/merchandise',
-    name: '商品',
-    sub: [
-      {
-        name: '商品管理',
-        link: '/merchandise/manage',
-        sub: [
-          {
-            link: '/merchandise/manage/tax_rate',
-            name: '税率规则'
-          }
-        ]
-      }
-    ]
-  },
-  {
-    link: '/supply_chain',
-    name: '供应链',
-    sub: [
-      {
-        name: '订单',
-        link: '/supply_chain/order',
-        sub: [
-          {
-            link: '/supply_chain/order/list',
-            name: '订单列表'
-          }
-        ]
-      },
-      {
-        name: '分拣',
-        link: '/supply_chain/sorting',
-        sub: [
-          {
-            link: '/supply_chain/sorting/schedule',
-            name: '分拣进度'
-          },
-          {
-            link: '/supply_chain/sorting/detail',
-            name: '分拣明细'
-          },
-          {
-            link: '/supply_chain/sorting/method',
-            name: '分拣方式'
-          }
-        ]
-      }
-    ]
-  }
-]
-
-const application = {
-  name: '应用中心',
-  link: '/application_center'
-}
-
-const store = observable({
-  selected: '/merchandise/manage/tax_rate',
-  setSelect(selected) {
-    console.log(selected)
-    this.selected = selected.link
-  }
-})
-
-storiesOf('Nav', module).add('default', () => (
-  <div style={{ height: '700px' }}>
-    <Nav
-      logo={
-        <img
-          src='https://js.guanmai.cn/static_storage/json/common/logo/default/logo.pure.png'
-          style={{
-            maxHeight: '35px',
-            maxWidth: '80px'
-          }}
-          alt=''
-        />
-      }
-      data={data}
-      selected={store.selected}
-      onSelect={store.setSelect.bind(store)}
-      other={
-        <Nav.SingleItem
-          data={application}
-          selected={store.selected}
-          onSelect={store.setSelect.bind(store)}
-        />
-      }
-    >
-      点击显示 loading
-    </Nav>
-  </div>
-))
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import Nav from './index'
+import { observable } from 'mobx'
+
+const data = [
+  {
+    link: '/merchandise',
+    name: '商品',
+    sub: [
+      {
+        name: '商品管理',
+        link: '/merchandise/manage',
+        sub: [
+          {
+            link: '/merchandise/manage/sale',
+            name: '报价单管理'
+          },
+          {
+            link: '/merchandise/manage/list',
+            name: '商品库'
+          },
+          {
+            link: '/merchandise/manage/spu_remark',
+            name: '商品备注'
+          }
+        ]
+      },
+      {
+        name: '营销',
+        link: '/merchandise/marketing_tool',
+        sub: [
+          {
+            link: '/merchandise/marketing_tool/price_rule',
+            name: '限时锁价'
+          }
+        ]
+      }
+    ]
+  },
+  {
+    link: '/merchandise',
+    name: '商品',
+    sub: [
+      {
+        name: '商品管理',
+        link: '/merchandise/manage',
+        sub: [
+          {
+            link: '/merchandise/manage/tax_rate',
+            name: '税率规则'
+          }
+        ]
+      }
+    ]
+  },
+  {
+    link: '/supply_chain',
+    name: '供应链',
+    sub: [
+      {
+        name: '订单',
+        link: '/supply_chain/order',
+        sub: [
+          {
+            link: '/supply_chain/order/list',
+            name: '订单列表'
+          }
+        ]
+      },
+      {
+        name: '分拣',
+        link: '/supply_chain/sorting',
+        sub: [
+          {
+            link: '/supply_chain/sorting/schedule',
+            name: '分拣进度'
+          },
+          {
+            link: '/supply_chain/sorting/detail',
+            name: '分拣明细'
+          },
+          {
+            link: '/supply_chain/sorting/method',
+            name: '分拣方式'
+          }
+        ]
+      }
+    ]
+  }
+]
+
+const application = {
+  name: '应用中心',
+  link: '/application_center'
+}
+
+const store = observable({
+  selected: '/merchandise/manage/tax_rate',
+  setSelect(selected) {
+    console.log(selected)
+    this.selected = selected.link
+  }
+})
+
+storiesOf('Nav', module).add('default', () => (
+  <div style={{ height: '700px' }}>
+    <Nav
+      logo={
+        <img
+          src='https://js.guanmai.cn/static_storage/json/common/logo/default/logo.pure.png'
+          style={{
+            maxHeight: '35px',
+            maxWidth: '80px'
+          }}
+          alt=''
+        />
+      }
+      data={data}
+      selected={store.selected}
+      onSelect={store.setSelect.bind(store)}
+      other={
+        <Nav.SingleItem
+          data={application}
+          selected={store.selected}
+          onSelect={store.setSelect.bind(store)}
+        />
+      }
+    >
+      点击显示 loading
+    </Nav>
+  </div>
+))

package/src/component/nav/style.less

@@ -1,156 +1,156 @@
-@gm-nav-width: 60px;
-
-@keyframes hover-padding {
-  0% {
-    margin-bottom: 0;
-    padding-bottom: 100px;
-  }
-
-  99% {
-    margin-bottom: 0;
-    padding-bottom: 100px;
-  }
-
-  100% {
-    margin-bottom: 100px;
-    padding-bottom: 0;
-  }
-}
-
-.gm-nav {
-  width: @gm-nav-width;
-  height: 100vh;
-  background: #243351;
-
-  .gm-nav-logo {
-    text-align: center;
-    margin-bottom: 10px;
-    height: 60px;
-    display: flex;
-    align-content: center;
-    justify-content: center;
-    cursor: pointer;
-
-    &:hover {
-      background: #17233d;
-    }
-  }
-
-  .gm-nav-content {
-    overflow-y: auto;
-
-    &::-webkit-scrollbar {
-      width: 0;
-      height: 0;
-    }
-  }
-
-  .gm-nav-one {
-    height: 64px;
-    padding: 5px 0;
-    text-decoration: none;
-    color: rgba(255, 255, 255, 80%);
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-content: center;
-    opacity: 0.8;
-
-    .gm-nav-one-icon {
-      font-size: 26px;
-      line-height: 1;
-      text-align: center;
-    }
-
-    .gm-nav-one-text {
-      margin-top: 3px;
-      text-align: center;
-      font-size: 14px;
-    }
-  }
-
-  .gm-nav-popup {
-    color: @gm-color-first;
-    background: white;
-    position: absolute;
-    top: 0;
-    left: @gm-nav-width;
-    box-shadow: 1px 1px 6px 1px rgba(36, 51, 81, 0.2);
-  }
-
-  .gm-nav-one-box {
-    padding-bottom: 10px;
-    position: relative;
-
-    .gm-nav-one-triangle {
-      display: none;
-      position: absolute;
-      width: 0;
-      height: 0;
-      border: 6px solid transparent;
-      border-right: 6px solid white;
-      top: 25px;
-      right: -1px;
-    }
-
-    &:hover {
-      .gm-nav-one {
-        color: white;
-        opacity: 1;
-        background: rgba(40, 113, 187, 0.4);
-      }
-
-      .gm-nav-one-triangle {
-        display: block;
-      }
-    }
-
-    &.active {
-      .gm-nav-one {
-        color: white;
-        opacity: 1;
-        background: rgba(40, 113, 187, 1);
-      }
-
-      .gm-nav-one-triangle {
-        display: block;
-      }
-    }
-  }
-
-  .gm-nav-two {
-    min-width: 110px;
-    padding: 20px 10px 20px;
-
-    .gm-nav-two-title {
-      color: @gm-color-first;
-      padding: 0 0 10px;
-      font-weight: 600;
-      font-size: 14px;
-      border-bottom: 1px solid #f0f1f3;
-      margin: 0 10px 8px;
-    }
-  }
-
-  .gm-nav-three {
-    display: block;
-    padding: 0 10px;
-    margin: 2px 0;
-    font-size: 14px;
-    line-height: 30px;
-    text-decoration: none;
-    color: @gm-color-first;
-    border-radius: 2px;
-    white-space: nowrap;
-
-    &:hover {
-      color: @brand-primary;
-      background-color: @gm-back-body-bg;
-    }
-
-    &.active {
-      color: @selected-primary;
-      background-color: @gm-back-body-bg;
-    }
-  }
-}
+@gm-nav-width: 60px;
+
+@keyframes hover-padding {
+  0% {
+    margin-bottom: 0;
+    padding-bottom: 100px;
+  }
+
+  99% {
+    margin-bottom: 0;
+    padding-bottom: 100px;
+  }
+
+  100% {
+    margin-bottom: 100px;
+    padding-bottom: 0;
+  }
+}
+
+.gm-nav {
+  width: @gm-nav-width;
+  height: 100vh;
+  background: #243351;
+
+  .gm-nav-logo {
+    text-align: center;
+    margin-bottom: 10px;
+    height: 60px;
+    display: flex;
+    align-content: center;
+    justify-content: center;
+    cursor: pointer;
+
+    &:hover {
+      background: #17233d;
+    }
+  }
+
+  .gm-nav-content {
+    overflow-y: auto;
+
+    &::-webkit-scrollbar {
+      width: 0;
+      height: 0;
+    }
+  }
+
+  .gm-nav-one {
+    height: 64px;
+    padding: 5px 0;
+    text-decoration: none;
+    color: rgba(255, 255, 255, 80%);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-content: center;
+    opacity: 0.8;
+
+    .gm-nav-one-icon {
+      font-size: 26px;
+      line-height: 1;
+      text-align: center;
+    }
+
+    .gm-nav-one-text {
+      margin-top: 3px;
+      text-align: center;
+      font-size: 14px;
+    }
+  }
+
+  .gm-nav-popup {
+    color: @gm-color-first;
+    background: white;
+    position: absolute;
+    top: 0;
+    left: @gm-nav-width;
+    box-shadow: 1px 1px 6px 1px rgba(36, 51, 81, 0.2);
+  }
+
+  .gm-nav-one-box {
+    padding-bottom: 10px;
+    position: relative;
+
+    .gm-nav-one-triangle {
+      display: none;
+      position: absolute;
+      width: 0;
+      height: 0;
+      border: 6px solid transparent;
+      border-right: 6px solid white;
+      top: 25px;
+      right: -1px;
+    }
+
+    &:hover {
+      .gm-nav-one {
+        color: white;
+        opacity: 1;
+        background: rgba(40, 113, 187, 0.4);
+      }
+
+      .gm-nav-one-triangle {
+        display: block;
+      }
+    }
+
+    &.active {
+      .gm-nav-one {
+        color: white;
+        opacity: 1;
+        background: rgba(40, 113, 187, 1);
+      }
+
+      .gm-nav-one-triangle {
+        display: block;
+      }
+    }
+  }
+
+  .gm-nav-two {
+    min-width: 110px;
+    padding: 20px 10px 20px;
+
+    .gm-nav-two-title {
+      color: @gm-color-first;
+      padding: 0 0 10px;
+      font-weight: 600;
+      font-size: 14px;
+      border-bottom: 1px solid #f0f1f3;
+      margin: 0 10px 8px;
+    }
+  }
+
+  .gm-nav-three {
+    display: block;
+    padding: 0 10px;
+    margin: 2px 0;
+    font-size: 14px;
+    line-height: 30px;
+    text-decoration: none;
+    color: @gm-color-first;
+    border-radius: 2px;
+    white-space: nowrap;
+
+    &:hover {
+      color: @brand-primary;
+      background-color: @gm-back-body-bg;
+    }
+
+    &.active {
+      color: @selected-primary;
+      background-color: @gm-back-body-bg;
+    }
+  }
+}

package/src/component/nprogress/index.js

@@ -1,34 +1,34 @@
-import React from 'react'
-import LayoutRoot from '../layout_root'
-
-const NProgress = () => <div className='gm-nprogress gm-nprogress-loading' />
-
-let timer = null
-let reqLength = 0
-
-const NProgressStatics = {
-  start: function() {
-    reqLength = reqLength + 1
-    if (reqLength === 1) {
-      if (timer) {
-        clearTimeout(timer)
-        timer = null
-      }
-      LayoutRoot.setComponent(LayoutRoot.TYPE.NPROGRESS, <NProgress />)
-    }
-  },
-  done: function() {
-    reqLength = reqLength - 1
-    const nProgress = document.querySelector('.gm-nprogress')
-    if (!reqLength && !timer) {
-      nProgress && (nProgress.className = 'gm-nprogress gm-nprogress-completed')
-      timer = setTimeout(function() {
-        LayoutRoot.removeComponent(LayoutRoot.TYPE.NPROGRESS)
-        timer = null
-      }, 250)
-    }
-  }
-}
-
-Object.assign(NProgress, NProgressStatics)
-export default NProgress
+import React from 'react'
+import LayoutRoot from '../layout_root'
+
+const NProgress = () => <div className='gm-nprogress gm-nprogress-loading' />
+
+let timer = null
+let reqLength = 0
+
+const NProgressStatics = {
+  start: function() {
+    reqLength = reqLength + 1
+    if (reqLength === 1) {
+      if (timer) {
+        clearTimeout(timer)
+        timer = null
+      }
+      LayoutRoot.setComponent(LayoutRoot.TYPE.NPROGRESS, <NProgress />)
+    }
+  },
+  done: function() {
+    reqLength = reqLength - 1
+    const nProgress = document.querySelector('.gm-nprogress')
+    if (!reqLength && !timer) {
+      nProgress && (nProgress.className = 'gm-nprogress gm-nprogress-completed')
+      timer = setTimeout(function() {
+        LayoutRoot.removeComponent(LayoutRoot.TYPE.NPROGRESS)
+        timer = null
+      }, 250)
+    }
+  }
+}
+
+Object.assign(NProgress, NProgressStatics)
+export default NProgress

package/src/component/nprogress/stories.js

@@ -1,22 +1,22 @@
-import React from 'react'
-import { storiesOf } from '@storybook/react'
-import NProgress from './index'
-
-storiesOf('NProgress', module).add('default', () => (
-  <div>
-    <button
-      onClick={() => {
-        NProgress.start()
-      }}
-    >
-      start
-    </button>
-    <button
-      onClick={() => {
-        NProgress.done()
-      }}
-    >
-      end
-    </button>
-  </div>
-))
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import NProgress from './index'
+
+storiesOf('NProgress', module).add('default', () => (
+  <div>
+    <button
+      onClick={() => {
+        NProgress.start()
+      }}
+    >
+      start
+    </button>
+    <button
+      onClick={() => {
+        NProgress.done()
+      }}
+    >
+      end
+    </button>
+  </div>
+))