@gmfe/react 2.14.17 → 2.14.19-beta.0

package/src/component/tabs/tabs.js

@@ -1,97 +1,97 @@
-import React, { useState } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-const Tabs = props => {
-  const { tabs, active, defaultActive, lazy, onChange, children } = props
-  if (active !== undefined && defaultActive !== undefined) {
-    console.warn(
-      'prop `active` and prop `defaultActive` can not exist at the same time!'
-    )
-  }
-
-  if (active !== undefined && !onChange) {
-    console.warn(
-      'prop `active` and prop `onChange` must exist at the same time!'
-    )
-  }
-
-  const [selected, changeSelected] = useState(defaultActive || 0)
-
-  const currentIndex = active === undefined ? selected : active
-
-  const handleClick = index => {
-    if (active !== undefined) {
-      onChange(index)
-    } else {
-      changeSelected(index)
-    }
-  }
-
-  const tabsChildren = () => (
-    <>
-      {React.Children.toArray(children).map((item, index) => (
-        <div
-          key={index}
-          className={classNames({
-            hidden: currentIndex !== index
-          })}
-        >
-          {item}
-        </div>
-      ))}
-    </>
-  )
-
-  const tabsChildrenLazy = () => {
-    const elements = React.Children.toArray(children)
-    return <div>{elements[currentIndex]}</div>
-  }
-
-  return (
-    <>
-      <div className='gm-tabs-container'>
-        <div className='gm-tabs'>
-          {tabs.map((tab, index) => (
-            <div
-              className={classNames('gm-tab', {
-                active: index === currentIndex
-              })}
-              key={index}
-              onClick={() => handleClick(index)}
-            >
-              {tab}
-            </div>
-          ))}
-        </div>
-      </div>
-      {lazy ? tabsChildrenLazy() : tabsChildren()}
-    </>
-  )
-}
-
-Tabs.propTypes = {
-  /** tab array */
-  tabs: PropTypes.arrayOf(PropTypes.string).isRequired,
-  /** the index which tab is active */
-  active: PropTypes.number,
-  /** the default Index which tab is active for uncontrolled component */
-  defaultActive: PropTypes.number,
-  /** children lazy loading */
-  lazy: PropTypes.bool,
-  /** the function return the index which is changed */
-  onChange: PropTypes.func,
-  /** The tabs must be the same length as the children */
-  children: ({ tabs, children }, propName, componentName) => {
-    if (tabs.length && children.length && tabs.length !== children.length) {
-      return new Error(
-        'Invalid prop `children` supplied to' +
-          ' `' +
-          componentName +
-          '`, prop `tabs` length is not match prop `children` length'
-      )
-    }
-  }
-}
-
-export default Tabs
+import React, { useState } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+const Tabs = props => {
+  const { tabs, active, defaultActive, lazy, onChange, children } = props
+  if (active !== undefined && defaultActive !== undefined) {
+    console.warn(
+      'prop `active` and prop `defaultActive` can not exist at the same time!'
+    )
+  }
+
+  if (active !== undefined && !onChange) {
+    console.warn(
+      'prop `active` and prop `onChange` must exist at the same time!'
+    )
+  }
+
+  const [selected, changeSelected] = useState(defaultActive || 0)
+
+  const currentIndex = active === undefined ? selected : active
+
+  const handleClick = index => {
+    if (active !== undefined) {
+      onChange(index)
+    } else {
+      changeSelected(index)
+    }
+  }
+
+  const tabsChildren = () => (
+    <>
+      {React.Children.toArray(children).map((item, index) => (
+        <div
+          key={index}
+          className={classNames({
+            hidden: currentIndex !== index
+          })}
+        >
+          {item}
+        </div>
+      ))}
+    </>
+  )
+
+  const tabsChildrenLazy = () => {
+    const elements = React.Children.toArray(children)
+    return <div>{elements[currentIndex]}</div>
+  }
+
+  return (
+    <>
+      <div className='gm-tabs-container'>
+        <div className='gm-tabs'>
+          {tabs.map((tab, index) => (
+            <div
+              className={classNames('gm-tab', {
+                active: index === currentIndex
+              })}
+              key={index}
+              onClick={() => handleClick(index)}
+            >
+              {tab}
+            </div>
+          ))}
+        </div>
+      </div>
+      {lazy ? tabsChildrenLazy() : tabsChildren()}
+    </>
+  )
+}
+
+Tabs.propTypes = {
+  /** tab array */
+  tabs: PropTypes.arrayOf(PropTypes.string).isRequired,
+  /** the index which tab is active */
+  active: PropTypes.number,
+  /** the default Index which tab is active for uncontrolled component */
+  defaultActive: PropTypes.number,
+  /** children lazy loading */
+  lazy: PropTypes.bool,
+  /** the function return the index which is changed */
+  onChange: PropTypes.func,
+  /** The tabs must be the same length as the children */
+  children: ({ tabs, children }, propName, componentName) => {
+    if (tabs.length && children.length && tabs.length !== children.length) {
+      return new Error(
+        'Invalid prop `children` supplied to' +
+          ' `' +
+          componentName +
+          '`, prop `tabs` length is not match prop `children` length'
+      )
+    }
+  }
+}
+
+export default Tabs

package/src/component/tabs/tabs.stories.js

@@ -1,48 +1,48 @@
-import React from 'react'
-import { storiesOf } from '@storybook/react'
-import Tabs from './tabs'
-import { observable } from 'mobx'
-import Button from '../button'
-
-const store = observable({
-  active: 0,
-  changeActive(index) {
-    this.active = index
-  }
-})
-const tabs = ['第一个', '第二个', '第三个']
-storiesOf('Tabs', module)
-  .add('Control', () => (
-    <Tabs
-      tabs={tabs}
-      active={store.active}
-      onChange={index => store.changeActive(index)}
-    >
-      <Buttons />
-      <Buttons />
-      <Buttons />
-    </Tabs>
-  ))
-  .add('UnControl', () => (
-    <Tabs tabs={tabs} defaultActive={2}>
-      <Buttons />
-      <Buttons />
-      <Buttons />
-    </Tabs>
-  ))
-  .add('Lazy', () => (
-    <Tabs tabs={tabs} lazy>
-      <Buttons />
-      <Buttons />
-      <Buttons />
-    </Tabs>
-  ))
-
-const Buttons = () => {
-  const [state, changeState] = React.useState(0)
-
-  const handleClick = () => {
-    changeState(state + 1)
-  }
-  return <Button onClick={handleClick}>{state}</Button>
-}
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import Tabs from './tabs'
+import { observable } from 'mobx'
+import Button from '../button'
+
+const store = observable({
+  active: 0,
+  changeActive(index) {
+    this.active = index
+  }
+})
+const tabs = ['第一个', '第二个', '第三个']
+storiesOf('Tabs', module)
+  .add('Control', () => (
+    <Tabs
+      tabs={tabs}
+      active={store.active}
+      onChange={index => store.changeActive(index)}
+    >
+      <Buttons />
+      <Buttons />
+      <Buttons />
+    </Tabs>
+  ))
+  .add('UnControl', () => (
+    <Tabs tabs={tabs} defaultActive={2}>
+      <Buttons />
+      <Buttons />
+      <Buttons />
+    </Tabs>
+  ))
+  .add('Lazy', () => (
+    <Tabs tabs={tabs} lazy>
+      <Buttons />
+      <Buttons />
+      <Buttons />
+    </Tabs>
+  ))
+
+const Buttons = () => {
+  const [state, changeState] = React.useState(0)
+
+  const handleClick = () => {
+    changeState(state + 1)
+  }
+  return <Button onClick={handleClick}>{state}</Button>
+}

package/src/component/time_span/style.less

@@ -1,45 +1,45 @@
-.gm-time-span {
-  overflow: hidden;
-  border: 1px solid @gm-border-color;
-  background: white;
-  padding: 10px 0;
-
-  .gm-time-span-list {
-    width: 130px;
-    padding: 0 5px;
-
-    .gm-time-span-list-cell {
-      color: black;
-      text-align: center;
-      cursor: pointer;
-      height: 22px;
-      margin: 2px 5px;
-      line-height: 22px;
-      border: 1px solid transparent;
-
-      &:hover {
-        background-color: @brand-primary;
-        color: white;
-      }
-
-      &.active {
-        border: 1px solid @brand-primary;
-      }
-
-      &.disabled {
-        background: white;
-        color: @gm-color-second;
-        cursor: not-allowed;
-      }
-    }
-  }
-}
-
-.gm-time-span-picker {
-  vertical-align: middle;
-  display: inline-block;
-
-  .gm-time-span {
-    border: none;
-  }
-}
+.gm-time-span {
+  overflow: hidden;
+  border: 1px solid @gm-border-color;
+  background: white;
+  padding: 10px 0;
+
+  .gm-time-span-list {
+    width: 130px;
+    padding: 0 5px;
+
+    .gm-time-span-list-cell {
+      color: black;
+      text-align: center;
+      cursor: pointer;
+      height: 22px;
+      margin: 2px 5px;
+      line-height: 22px;
+      border: 1px solid transparent;
+
+      &:hover {
+        background-color: @brand-primary;
+        color: white;
+      }
+
+      &.active {
+        border: 1px solid @brand-primary;
+      }
+
+      &.disabled {
+        background: white;
+        color: @gm-color-second;
+        cursor: not-allowed;
+      }
+    }
+  }
+}
+
+.gm-time-span-picker {
+  vertical-align: middle;
+  display: inline-block;
+
+  .gm-time-span {
+    border: none;
+  }
+}