shineout 1.7.0 → 1.7.1-beta.3

package/es/DatePicker/TimeScroll.js

@@ -1,130 +1,164 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import { range } from '../utils/numbers'
-import { datepickerClass } from './styles'
-import paramUtils from './paramUtils'
-
-const lineHeight = 30
-const grayStyle = {
-  1: { color: '#888' },
-  2: { color: '#ccc' },
-  3: { color: '#eee' },
-}
-
-class TimeScroll extends PureComponent {
-  constructor(props) {
-    super(props)
-
-    this.bindElement = this.bindElement.bind(this)
-    this.handleMouseLeave = this.handleMouseLeave.bind(this)
-    this.handleScroll = this.handleScroll.bind(this)
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { range } from '../utils/numbers';
+import { datepickerClass } from './styles';
+import paramUtils from './paramUtils';
+var lineHeight = 30;
+var grayStyle = {
+  1: {
+    color: '#888'
+  },
+  2: {
+    color: '#ccc'
+  },
+  3: {
+    color: '#eee'
   }
+};
 
-  componentDidMount() {
-    this.updateScrollTop()
-  }
+var TimeScroll =
+/*#__PURE__*/
+function (_PureComponent) {
+  _inheritsLoose(TimeScroll, _PureComponent);
 
-  componentDidUpdate() {
-    this.updateScrollTop()
-  }
+  function TimeScroll(props) {
+    var _this;
 
-  getValue(v) {
-    const { step, ampm } = this.props
-    if (!step || ampm) return v
-    return Math.ceil(v / step)
+    _this = _PureComponent.call(this, props) || this;
+    _this.bindElement = _this.bindElement.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleMouseLeave = _this.handleMouseLeave.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleScroll = _this.handleScroll.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    return _this;
   }
 
-  getItemStyle(num, isDisabled) {
-    if (isDisabled) return null
-    if (this.props.ampm || (typeof this.props.step === 'number' && this.props.step > 0)) {
-      if (this.props.value % this.props.step) return null
-      return grayStyle[Math.ceil(Math.abs(this.props.value - num) / this.props.step)]
+  var _proto = TimeScroll.prototype;
+
+  _proto.componentDidMount = function componentDidMount() {
+    this.updateScrollTop();
+  };
+
+  _proto.componentDidUpdate = function componentDidUpdate() {
+    this.updateScrollTop();
+  };
+
+  _proto.getValue = function getValue(v) {
+    var _this$props = this.props,
+        step = _this$props.step,
+        ampm = _this$props.ampm;
+    if (!step || ampm) return v;
+    return Math.ceil(v / step);
+  };
+
+  _proto.getItemStyle = function getItemStyle(num, isDisabled) {
+    if (isDisabled) return null;
+
+    if (this.props.ampm || typeof this.props.step === 'number' && this.props.step > 0) {
+      if (this.props.value % this.props.step) return null;
+      return grayStyle[Math.ceil(Math.abs(this.props.value - num) / this.props.step)];
     }
-    return grayStyle[Math.abs(this.props.value - num)]
-  }
 
-  bindElement(el) {
-    this.element = el
-  }
+    return grayStyle[Math.abs(this.props.value - num)];
+  };
+
+  _proto.bindElement = function bindElement(el) {
+    this.element = el;
+  };
+
+  _proto.updateScrollTop = function updateScrollTop() {
+    var _this2 = this;
+
+    var value = this.props.value;
+    if (!this.element) return;
+    if (typeof this.props.step === 'number' && this.props.step > 0 && value % this.props.step) return;
 
-  updateScrollTop() {
-    const { value } = this.props
-    if (!this.element) return
-    if (typeof this.props.step === 'number' && this.props.step > 0 && value % this.props.step) return
     if (this.element.scrollTop !== lineHeight * value) {
-      setTimeout(() => {
-        if (this.element) this.scrollToValue()
-      })
+      setTimeout(function () {
+        if (_this2.element) _this2.scrollToValue();
+      });
     }
-  }
+  };
 
-  scrollToValue() {
-    const { value } = this.props
-    this.element.scrollTop = lineHeight * this.getValue(value)
-  }
+  _proto.scrollToValue = function scrollToValue() {
+    var value = this.props.value;
+    this.element.scrollTop = lineHeight * this.getValue(value);
+  };
 
-  handleClick(value) {
-    this.props.onChange(value)
-    this.element.scrollTop = lineHeight * this.getValue(value)
-  }
+  _proto.handleClick = function handleClick(value) {
+    this.props.onChange(value);
+    this.element.scrollTop = lineHeight * this.getValue(value);
+  };
 
-  handleMouseLeave() {
-    const value = Math.round(this.element.scrollTop / lineHeight)
-    this.element.scrollTop = lineHeight * value
-  }
+  _proto.handleMouseLeave = function handleMouseLeave() {
+    var value = Math.round(this.element.scrollTop / lineHeight);
+    this.element.scrollTop = lineHeight * value;
+  };
+
+  _proto.handleScroll = function handleScroll() {
+    var _this$props2 = this.props,
+        step = _this$props2.step,
+        ampm = _this$props2.ampm;
+    var value = Math.round(this.element.scrollTop / lineHeight);
 
-  handleScroll() {
-    const { step, ampm } = this.props
-    const value = Math.round(this.element.scrollTop / lineHeight)
     if (typeof step === 'number' && step > 0 && !ampm && value !== this.props.value) {
-      this.props.onChange(value * step)
-      return
+      this.props.onChange(value * step);
+      return;
     }
-    if (value !== this.props.value) this.props.onChange(value)
-  }
 
-  renderItem(num) {
-    const { ampm, total, value, step, mode, min, max, range: ra, current, disabled, disabledTime } = this.props
-
-    if (typeof step === 'number' && step <= 0) return null
-    if (!ampm && typeof step === 'number' && num % step !== 0) return null
-
-    let text = num
-    if (ampm) text = ['am', 'pm'][num]
-    else if (total === 12 && num === 0) text = '12'
-    else if (num < 10) text = `0${num}`
-
-    const [isDisabled] = paramUtils.judgeTimeByRange(num, current, mode, min, max, ra, disabled, disabledTime)
-
-    const className = datepickerClass(!isDisabled && value === num && 'time-active')
-    return (
-      <span
-        key={num}
-        className={className}
-        style={this.getItemStyle(num, isDisabled)}
-        onClick={this.handleClick.bind(this, num)}
-      >
-        {text}
-      </span>
-    )
-  }
-
-  render() {
-    const { total } = this.props
-    return (
-      <div
-        ref={this.bindElement}
-        className={datepickerClass('time-list')}
-        onMouseLeave={this.handleMouseLeave}
-        onScroll={this.handleScroll}
-      >
-        <div className={datepickerClass('pad')} />
-        {range(total, 0).map(v => this.renderItem(v))}
-        <div className={datepickerClass('pad')} />
-      </div>
-    )
-  }
-}
+    if (value !== this.props.value) this.props.onChange(value);
+  };
+
+  _proto.renderItem = function renderItem(num) {
+    var _this$props3 = this.props,
+        ampm = _this$props3.ampm,
+        total = _this$props3.total,
+        value = _this$props3.value,
+        step = _this$props3.step,
+        mode = _this$props3.mode,
+        min = _this$props3.min,
+        max = _this$props3.max,
+        ra = _this$props3.range,
+        current = _this$props3.current,
+        disabled = _this$props3.disabled,
+        disabledTime = _this$props3.disabledTime;
+    if (typeof step === 'number' && step <= 0) return null;
+    if (!ampm && typeof step === 'number' && num % step !== 0) return null;
+    var text = num;
+    if (ampm) text = ['am', 'pm'][num];else if (total === 12 && num === 0) text = '12';else if (num < 10) text = "0" + num;
+
+    var _paramUtils$judgeTime = paramUtils.judgeTimeByRange(num, current, mode, min, max, ra, disabled, disabledTime),
+        isDisabled = _paramUtils$judgeTime[0];
+
+    var className = datepickerClass(!isDisabled && value === num && 'time-active');
+    return React.createElement("span", {
+      key: num,
+      className: className,
+      style: this.getItemStyle(num, isDisabled),
+      onClick: this.handleClick.bind(this, num)
+    }, text);
+  };
+
+  _proto.render = function render() {
+    var _this3 = this;
+
+    var total = this.props.total;
+    return React.createElement("div", {
+      ref: this.bindElement,
+      className: datepickerClass('time-list'),
+      onMouseLeave: this.handleMouseLeave,
+      onScroll: this.handleScroll
+    }, React.createElement("div", {
+      className: datepickerClass('pad')
+    }), range(total, 0).map(function (v) {
+      return _this3.renderItem(v);
+    }), React.createElement("div", {
+      className: datepickerClass('pad')
+    }));
+  };
+
+  return TimeScroll;
+}(PureComponent);
 
 TimeScroll.propTypes = {
   ampm: PropTypes.bool,
@@ -138,11 +172,9 @@ TimeScroll.propTypes = {
   range: PropTypes.number,
   current: PropTypes.object,
   mode: PropTypes.string,
-  disabledTime: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
-}
-
+  disabledTime: PropTypes.oneOfType([PropTypes.string, PropTypes.func])
+};
 TimeScroll.defaultProps = {
-  total: 60,
-}
-
-export default TimeScroll
+  total: 60
+};
+export default TimeScroll;

package/es/DatePicker/Year.js

@@ -1,68 +1,89 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import { range } from '../utils/numbers'
-import { datepickerClass } from './styles'
-import Icon from './Icon'
-import utils from './utils'
-import paramUtils from './paramUtils'
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { range } from '../utils/numbers';
+import { datepickerClass } from './styles';
+import Icon from './Icon';
+import utils from './utils';
+import paramUtils from './paramUtils';
 
-class Year extends PureComponent {
-  constructor(props) {
-    super(props)
+var Year =
+/*#__PURE__*/
+function (_PureComponent) {
+  _inheritsLoose(Year, _PureComponent);
 
-    this.handlePrevRange = this.handleRangeChange.bind(this, -15)
-    this.handleNextRange = this.handleRangeChange.bind(this, 15)
-  }
+  function Year(props) {
+    var _this;
 
-  handleChange(year) {
-    const { current, onChange, onModeChange } = this.props
-    const date = new Date(current.getTime())
-    date.setFullYear(year)
-    onChange(...paramUtils.yearHandleChangeParams(date))
-    onModeChange('month')
+    _this = _PureComponent.call(this, props) || this;
+    _this.handlePrevRange = _this.handleRangeChange.bind(_assertThisInitialized(_assertThisInitialized(_this)), -15);
+    _this.handleNextRange = _this.handleRangeChange.bind(_assertThisInitialized(_assertThisInitialized(_this)), 15);
+    return _this;
   }
 
-  handleRangeChange(year) {
-    const { current, onChange } = this.props
-    onChange(...paramUtils.yearHandleChangeParams(utils.addYears(current, year)))
-  }
+  var _proto = Year.prototype;
 
-  render() {
-    const { current, value } = this.props
-    const cy = current.getFullYear() - 7
-    const years = range(15, 0).map(i => cy + i)
+  _proto.handleChange = function handleChange(year) {
+    var _this$props = this.props,
+        current = _this$props.current,
+        onChange = _this$props.onChange,
+        onModeChange = _this$props.onModeChange;
+    var date = new Date(current.getTime());
+    date.setFullYear(year);
+    onChange.apply(void 0, paramUtils.yearHandleChangeParams(date));
+    onModeChange('month');
+  };
 
-    return (
-      <div className={datepickerClass('year-picker')}>
-        <div className={datepickerClass('header')}>
-          <Icon name="AngleLeft" className="left" onClick={this.handlePrevRange} />
+  _proto.handleRangeChange = function handleRangeChange(year) {
+    var _this$props2 = this.props,
+        current = _this$props2.current,
+        onChange = _this$props2.onChange;
+    onChange.apply(void 0, paramUtils.yearHandleChangeParams(utils.addYears(current, year)));
+  };
 
-          <span className={datepickerClass('ym')}>{`${years[0]} ~ ${years[years.length - 1]}`}</span>
+  _proto.render = function render() {
+    var _this2 = this;
 
-          <Icon name="AngleRight" className="right" onClick={this.handleNextRange} />
-        </div>
+    var _this$props3 = this.props,
+        current = _this$props3.current,
+        value = _this$props3.value;
+    var cy = current.getFullYear() - 7;
+    var years = range(15, 0).map(function (i) {
+      return cy + i;
+    });
+    return React.createElement("div", {
+      className: datepickerClass('year-picker')
+    }, React.createElement("div", {
+      className: datepickerClass('header')
+    }, React.createElement(Icon, {
+      name: "AngleLeft",
+      className: "left",
+      onClick: this.handlePrevRange
+    }), React.createElement("span", {
+      className: datepickerClass('ym')
+    }, years[0] + " ~ " + years[years.length - 1]), React.createElement(Icon, {
+      name: "AngleRight",
+      className: "right",
+      onClick: this.handleNextRange
+    })), React.createElement("div", {
+      className: datepickerClass('list')
+    }, years.map(function (y) {
+      return React.createElement("span", {
+        key: y,
+        className: datepickerClass(value && value.getFullYear() === y && 'active'),
+        onClick: _this2.handleChange.bind(_this2, y)
+      }, y);
+    })));
+  };
 
-        <div className={datepickerClass('list')}>
-          {years.map(y => (
-            <span
-              key={y}
-              className={datepickerClass(value && value.getFullYear() === y && 'active')}
-              onClick={this.handleChange.bind(this, y)}
-            >
-              {y}
-            </span>
-          ))}
-        </div>
-      </div>
-    )
-  }
-}
+  return Year;
+}(PureComponent);
 
 Year.propTypes = {
   current: PropTypes.object.isRequired,
   onChange: PropTypes.func.isRequired,
   onModeChange: PropTypes.func.isRequired,
-  value: PropTypes.object,
-}
-
-export default Year
+  value: PropTypes.object
+};
+export default Year;

package/es/DatePicker/index.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react'
-import { StandardProps, FormItemStandardProps } from '../@types/common'
+import { StandardProps, FormItemStandardProps, CommonProps } from '../@types/common'
 
-export type DateTimeType = Date | number | string
+export type DateTimeType = Date | number | string | undefined
 
 export type AreaType = 'year' | 'month' | 'week' | 'day' | 'time' | 'quick'
 
@@ -19,7 +19,8 @@ export interface QuickSelect extends Base {
 }
 
 export interface DatePickerProps<T =DatePickerValue > extends StandardProps,
-FormItemStandardProps<T> {
+FormItemStandardProps<T>,
+  Pick<CommonProps, 'absolute'> {
 
   /**
    * onChange get undefined while clear
@@ -46,7 +47,7 @@ FormItemStandardProps<T> {
    *
    * default: null
    */
-  width?: number;
+  width?: number | string;
 
   /**
    * whether it can be cleared
@@ -131,15 +132,6 @@ FormItemStandardProps<T> {
    */
   defaultTime?: DatePickerValue;
 
-  /**
-   * When it is true, the pop-up layer of option append into document.body.
-   *
-   * 为 true 时，选项弹出层在 DOM 中独立 render
-   *
-   * default: false
-   */
-  absolute?: boolean;
-
   /**
    * panel z-index
    *

package/es/DatePicker/index.js

@@ -1,20 +1,18 @@
-import inputBorder from '../hoc/inputBorder'
-import inputable from '../Form/inputable'
-import { compose } from '../utils/func'
-import { datepickerClass } from './styles'
-import Container from './Container'
-import value from './value'
-import absolute from '../Table/context'
+import inputBorder from '../hoc/inputBorder';
+import inputable from '../Form/inputable';
+import { compose } from '../utils/func';
+import { datepickerClass } from './styles';
+import Container from './Container';
+import value from './value';
+import absolute from '../Table/context';
 
-const getClassName = opt => datepickerClass('_', `${opt.range ? 'r' : 'c'}-${opt.type || 'date'}`)
+var getClassName = function getClassName(opt) {
+  return datepickerClass('_', (opt.range ? 'r' : 'c') + "-" + (opt.type || 'date'));
+};
 
-const Datepicker = compose(
-  inputable,
-  inputBorder({ className: getClassName, innerWidth: true }),
-  value,
-  absolute
-)(Container)
-
-Datepicker.displayName = 'ShineoutDatepicker'
-
-export default Datepicker
+var Datepicker = compose(inputable, inputBorder({
+  className: getClassName,
+  innerWidth: true
+}), value, absolute)(Container);
+Datepicker.displayName = 'ShineoutDatepicker';
+export default Datepicker;