@gmfe/react 2.14.17 → 2.14.19-beta.0

package/src/component/button/index.js

@@ -1,92 +1,92 @@
-import React, { useState } from 'react'
-import PropTypes from 'prop-types'
-import _ from 'lodash'
-import classNames from 'classnames'
-import { is } from '@gm-common/tool'
-import Loading from '../loading'
-
-const Button = ({
-  type,
-  plain,
-  size,
-  block,
-  disabled,
-  onClick,
-  loading,
-  href,
-  children,
-  htmlType,
-  className,
-  ...rest
-}) => {
-  const [isLoading, setIsLoading] = useState(false)
-
-  const loadFlag = loading || isLoading
-
-  const handleClick = e => {
-    if (loadFlag) {
-      return
-    }
-
-    const result = onClick(e)
-
-    if (!is.promise(result)) {
-      return
-    }
-
-    setIsLoading(true)
-
-    Promise.resolve(result).finally(() => {
-      setIsLoading(false)
-    })
-  }
-  const Tag = type === 'link' && href ? 'a' : 'button'
-
-  return (
-    <Tag
-      {...rest}
-      type={htmlType}
-      href={href}
-      className={classNames(
-        `gm-btn gm-btn-${type}`,
-        {
-          'gm-btn-block': block,
-          [`gm-btn-${size}`]: size,
-          'gm-btn-plain': type !== 'link' && plain
-        },
-        className
-      )}
-      disabled={loadFlag || disabled}
-      onClick={handleClick}
-    >
-      {loadFlag && <Loading className='gm-btn-loading' size={12} />}
-      {children}
-    </Tag>
-  )
-}
-
-// 只封装了 loading
-Button.propTypes = {
-  type: PropTypes.oneOf(['default', 'primary', 'success', 'danger', 'link']),
-  plain: PropTypes.bool,
-  size: PropTypes.oneOf(['large']),
-  block: PropTypes.bool,
-  /** 原生的 type */
-  htmlType: PropTypes.string,
-  loading: PropTypes.bool,
-  /** type 为 link 才有用 */
-  href: PropTypes.string,
-  /** 返回 Promise 才有 loading */
-  onClick: PropTypes.func,
-  disabled: PropTypes.bool,
-  className: PropTypes.string,
-  style: PropTypes.object
-}
-
-Button.defaultProps = {
-  type: 'default',
-  htmlType: 'button',
-  onClick: _.noop
-}
-
-export default Button
+import React, { useState } from 'react'
+import PropTypes from 'prop-types'
+import _ from 'lodash'
+import classNames from 'classnames'
+import { is } from '@gm-common/tool'
+import Loading from '../loading'
+
+const Button = ({
+  type,
+  plain,
+  size,
+  block,
+  disabled,
+  onClick,
+  loading,
+  href,
+  children,
+  htmlType,
+  className,
+  ...rest
+}) => {
+  const [isLoading, setIsLoading] = useState(false)
+
+  const loadFlag = loading || isLoading
+
+  const handleClick = e => {
+    if (loadFlag) {
+      return
+    }
+
+    const result = onClick(e)
+
+    if (!is.promise(result)) {
+      return
+    }
+
+    setIsLoading(true)
+
+    Promise.resolve(result).finally(() => {
+      setIsLoading(false)
+    })
+  }
+  const Tag = type === 'link' && href ? 'a' : 'button'
+
+  return (
+    <Tag
+      {...rest}
+      type={htmlType}
+      href={href}
+      className={classNames(
+        `gm-btn gm-btn-${type}`,
+        {
+          'gm-btn-block': block,
+          [`gm-btn-${size}`]: size,
+          'gm-btn-plain': type !== 'link' && plain
+        },
+        className
+      )}
+      disabled={loadFlag || disabled}
+      onClick={handleClick}
+    >
+      {loadFlag && <Loading className='gm-btn-loading' size={12} />}
+      {children}
+    </Tag>
+  )
+}
+
+// 只封装了 loading
+Button.propTypes = {
+  type: PropTypes.oneOf(['default', 'primary', 'success', 'danger', 'link']),
+  plain: PropTypes.bool,
+  size: PropTypes.oneOf(['large']),
+  block: PropTypes.bool,
+  /** 原生的 type */
+  htmlType: PropTypes.string,
+  loading: PropTypes.bool,
+  /** type 为 link 才有用 */
+  href: PropTypes.string,
+  /** 返回 Promise 才有 loading */
+  onClick: PropTypes.func,
+  disabled: PropTypes.bool,
+  className: PropTypes.string,
+  style: PropTypes.object
+}
+
+Button.defaultProps = {
+  type: 'default',
+  htmlType: 'button',
+  onClick: _.noop
+}
+
+export default Button

package/src/component/button/style.less

@@ -1,114 +1,114 @@
-.gm-btn {
-  height: 30px;
-  border-radius: 2px;
-  display: inline-block;
-  text-align: center;
-  vertical-align: middle;
-  cursor: pointer;
-  border: 1px solid transparent;
-  white-space: nowrap;
-  padding: 5px 10px;
-  font-size: 12px;
-  line-height: 1.33;
-  user-select: none;
-
-  &.gm-btn-default {
-    .gm-btn-variants(@gm-color-first, white);
-
-    border-color: @gm-border-color;
-
-    &.gm-btn-plain {
-      border-color: @gm-border-color;
-      color: @gm-color-first;
-    }
-  }
-
-  &.gm-btn-primary {
-    .gm-btn-variants(white, @gm-color-primary);
-  }
-
-  &.gm-btn-success {
-    .gm-btn-variants(white, @gm-color-success);
-  }
-
-  &.gm-btn-danger {
-    .gm-btn-variants(white, @gm-color-danger);
-  }
-
-  &.gm-btn-link {
-    background: transparent;
-    border-color: transparent;
-    color: @gm-color-link;
-
-    &:hover {
-      text-decoration: underline;
-    }
-
-    &.disabled,
-    &[disabled] {
-      cursor: not-allowed;
-      border-color: transparent;
-      color: @gm-color-disabled;
-    }
-  }
-
-  &.gm-btn-large {
-    height: 40px;
-    font-size: 14px;
-  }
-
-  &.gm-btn-block {
-    display: block;
-    width: 100%;
-  }
-
-  .gm-btn-loading {
-    display: inline-block;
-    margin-right: 5px;
-    animation: gm-btn-rotating 1s linear infinite;
-  }
-}
-
-@keyframes gm-btn-rotating {
-  0% {
-    transform: rotate(0);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-.gm-btn-variants(@color; @brand;) {
-  background: @brand;
-  border-color: @brand;
-  color: @color;
-
-  &.gm-btn-plain {
-    background: white;
-    border-color: @brand;
-    color: @brand;
-
-    &:hover {
-      color: white;
-    }
-  }
-
-  &:hover {
-    background: darken(@brand, 10%);
-  }
-
-  &.gm-btn-default:not([disabled]):hover {
-    background: white;
-    color: @gm-color-primary;
-    border-color: @gm-color-primary;
-  }
-
-  &.disabled,
-  &[disabled] {
-    background: @gm-bg-disabled;
-    border-color: @gm-border-color;
-    color: @gm-color-disabled;
-    cursor: not-allowed;
-  }
-}
+.gm-btn {
+  height: 30px;
+  border-radius: 2px;
+  display: inline-block;
+  text-align: center;
+  vertical-align: middle;
+  cursor: pointer;
+  border: 1px solid transparent;
+  white-space: nowrap;
+  padding: 5px 10px;
+  font-size: 12px;
+  line-height: 1.33;
+  user-select: none;
+
+  &.gm-btn-default {
+    .gm-btn-variants(@gm-color-first, white);
+
+    border-color: @gm-border-color;
+
+    &.gm-btn-plain {
+      border-color: @gm-border-color;
+      color: @gm-color-first;
+    }
+  }
+
+  &.gm-btn-primary {
+    .gm-btn-variants(white, @gm-color-primary);
+  }
+
+  &.gm-btn-success {
+    .gm-btn-variants(white, @gm-color-success);
+  }
+
+  &.gm-btn-danger {
+    .gm-btn-variants(white, @gm-color-danger);
+  }
+
+  &.gm-btn-link {
+    background: transparent;
+    border-color: transparent;
+    color: @gm-color-link;
+
+    &:hover {
+      text-decoration: underline;
+    }
+
+    &.disabled,
+    &[disabled] {
+      cursor: not-allowed;
+      border-color: transparent;
+      color: @gm-color-disabled;
+    }
+  }
+
+  &.gm-btn-large {
+    height: 40px;
+    font-size: 14px;
+  }
+
+  &.gm-btn-block {
+    display: block;
+    width: 100%;
+  }
+
+  .gm-btn-loading {
+    display: inline-block;
+    margin-right: 5px;
+    animation: gm-btn-rotating 1s linear infinite;
+  }
+}
+
+@keyframes gm-btn-rotating {
+  0% {
+    transform: rotate(0);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.gm-btn-variants(@color; @brand;) {
+  background: @brand;
+  border-color: @brand;
+  color: @color;
+
+  &.gm-btn-plain {
+    background: white;
+    border-color: @brand;
+    color: @brand;
+
+    &:hover {
+      color: white;
+    }
+  }
+
+  &:hover {
+    background: darken(@brand, 10%);
+  }
+
+  &.gm-btn-default:not([disabled]):hover {
+    background: white;
+    color: @gm-color-primary;
+    border-color: @gm-color-primary;
+  }
+
+  &.disabled,
+  &[disabled] {
+    background: @gm-bg-disabled;
+    border-color: @gm-border-color;
+    color: @gm-color-disabled;
+    cursor: not-allowed;
+  }
+}

package/src/component/calendar/calendar.js

@@ -1,52 +1,52 @@
-import React from 'react'
-import RangeCalendar from './range_calendar'
-import PropTypes from 'prop-types'
-import _ from 'lodash'
-
-const Calendar = props => {
-  const { selected, onSelect, ...rest } = props
-
-  const handleSelect = begin => {
-    onSelect(begin)
-  }
-
-  return (
-    <RangeCalendar
-      {...rest}
-      begin={selected}
-      end={selected}
-      onSelect={handleSelect}
-      disabledYearAndMonth={undefined}
-    />
-  )
-}
-
-Calendar.propTypes = {
-  /** 日期，Date 对象 */
-  selected: PropTypes.object,
-  /** 日期选中回调函数，参数 date */
-  onSelect: PropTypes.func,
-  /** 键盘 */
-  willActiveSelected: PropTypes.object,
-  /** 参数 date */
-  onWillActiveSelected: PropTypes.func,
-
-  /** Date对象，表示可选的最小日期 */
-  min: PropTypes.object,
-  /** Date对象，表示可选的最大日期 */
-  max: PropTypes.object,
-  /** 自定义日期是否可选。传入参数为Date对象，返回true or false。 有此属性则min max无效。 */
-  disabledDate: PropTypes.func,
-
-  className: PropTypes.string,
-  style: PropTypes.object,
-
-  /** 目前全键盘用 */
-  onKeyDown: PropTypes.func
-}
-
-Calendar.defaultProps = {
-  onSelect: _.noop
-}
-
-export default Calendar
+import React from 'react'
+import RangeCalendar from './range_calendar'
+import PropTypes from 'prop-types'
+import _ from 'lodash'
+
+const Calendar = props => {
+  const { selected, onSelect, ...rest } = props
+
+  const handleSelect = begin => {
+    onSelect(begin)
+  }
+
+  return (
+    <RangeCalendar
+      {...rest}
+      begin={selected}
+      end={selected}
+      onSelect={handleSelect}
+      disabledYearAndMonth={undefined}
+    />
+  )
+}
+
+Calendar.propTypes = {
+  /** 日期，Date 对象 */
+  selected: PropTypes.object,
+  /** 日期选中回调函数，参数 date */
+  onSelect: PropTypes.func,
+  /** 键盘 */
+  willActiveSelected: PropTypes.object,
+  /** 参数 date */
+  onWillActiveSelected: PropTypes.func,
+
+  /** Date对象，表示可选的最小日期 */
+  min: PropTypes.object,
+  /** Date对象，表示可选的最大日期 */
+  max: PropTypes.object,
+  /** 自定义日期是否可选。传入参数为Date对象，返回true or false。 有此属性则min max无效。 */
+  disabledDate: PropTypes.func,
+
+  className: PropTypes.string,
+  style: PropTypes.object,
+
+  /** 目前全键盘用 */
+  onKeyDown: PropTypes.func
+}
+
+Calendar.defaultProps = {
+  onSelect: _.noop
+}
+
+export default Calendar

package/src/component/calendar/calendar.stories.js

@@ -1,57 +1,57 @@
-import React from 'react'
-import { storiesOf } from '@storybook/react'
-import Calendar from './calendar'
-import RangeCalendar from './range_calendar'
-import { observable } from 'mobx'
-import moment from 'moment'
-
-const store = observable({
-  selected: null,
-  setSelected(date) {
-    this.selected = date
-  }
-})
-
-const rangeStore = observable({
-  begin: null,
-  end: null,
-  setSelected(begin, end) {
-    console.log(begin, end)
-    this.begin = begin
-    this.end = end
-  }
-})
-
-storiesOf('Calendar', module)
-  .add('default', () => (
-    <Calendar
-      selected={store.selected}
-      onSelect={selected => store.setSelected(selected)}
-    />
-  ))
-  .add('min max', () => (
-    <Calendar
-      selected={store.selected}
-      onSelect={selected => store.setSelected(selected)}
-      min={moment().toDate()}
-      max={moment()
-        .add(10, 'd')
-        .toDate()}
-    />
-  ))
-  .add('custom disabledDate', () => (
-    <Calendar
-      selected={store.selected}
-      onSelect={selected => store.setSelected(selected)}
-      disabledDate={d => {
-        return moment(d).get('day') === 5
-      }}
-    />
-  ))
-  .add('RangeCalendar', () => (
-    <RangeCalendar
-      begin={rangeStore.begin}
-      end={rangeStore.end}
-      onSelect={(begin, end) => rangeStore.setSelected(begin, end)}
-    />
-  ))
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import Calendar from './calendar'
+import RangeCalendar from './range_calendar'
+import { observable } from 'mobx'
+import moment from 'moment'
+
+const store = observable({
+  selected: null,
+  setSelected(date) {
+    this.selected = date
+  }
+})
+
+const rangeStore = observable({
+  begin: null,
+  end: null,
+  setSelected(begin, end) {
+    console.log(begin, end)
+    this.begin = begin
+    this.end = end
+  }
+})
+
+storiesOf('Calendar', module)
+  .add('default', () => (
+    <Calendar
+      selected={store.selected}
+      onSelect={selected => store.setSelected(selected)}
+    />
+  ))
+  .add('min max', () => (
+    <Calendar
+      selected={store.selected}
+      onSelect={selected => store.setSelected(selected)}
+      min={moment().toDate()}
+      max={moment()
+        .add(10, 'd')
+        .toDate()}
+    />
+  ))
+  .add('custom disabledDate', () => (
+    <Calendar
+      selected={store.selected}
+      onSelect={selected => store.setSelected(selected)}
+      disabledDate={d => {
+        return moment(d).get('day') === 5
+      }}
+    />
+  ))
+  .add('RangeCalendar', () => (
+    <RangeCalendar
+      begin={rangeStore.begin}
+      end={rangeStore.end}
+      onSelect={(begin, end) => rangeStore.setSelected(begin, end)}
+    />
+  ))