shineout 1.12.2 → 1.12.3

package/esm/DatePicker/Quarter.js

@@ -0,0 +1,164 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React, { PureComponent } from 'react';
+import Icon from './Icon';
+import utils from './utils';
+import paramUtils from './paramUtils';
+import { datepickerClass } from './styles';
+import { getLocale } from '../locale';
+import { isArray, isNumber } from '../utils/is';
+var Quarters = ['Q1', 'Q2', 'Q3', 'Q4'];
+
+var Quarter =
+/*#__PURE__*/
+function (_PureComponent) {
+  _inheritsLoose(Quarter, _PureComponent);
+
+  function Quarter(props) {
+    var _this;
+
+    _this = _PureComponent.call(this, props) || this;
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleNextYear", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handlePrevYear", void 0);
+
+    _this.handleNextYear = _this.handleYearChange.bind(_assertThisInitialized(_assertThisInitialized(_this)), 1);
+    _this.handlePrevYear = _this.handleYearChange.bind(_assertThisInitialized(_assertThisInitialized(_this)), -1);
+    _this.handleQuarterClick = _this.handleQuarterClick.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleDisabled = _this.handleDisabled.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    props.disabledRegister(_this.handleDisabled, 'quarter', props.index);
+    return _this;
+  }
+
+  var _proto = Quarter.prototype;
+
+  _proto.getOptions = function getOptions() {
+    var timeZone = this.props.timeZone;
+    return {
+      timeZone: timeZone,
+      weekStartsOn: getLocale('startOfWeek')
+    };
+  };
+
+  _proto.handleYearChange = function handleYearChange(year) {
+    var _this$props = this.props,
+        current = _this$props.current,
+        onChange = _this$props.onChange;
+    onChange.apply(void 0, paramUtils.yearHandleChangeParams(utils.addYears(current, year, this.getOptions())));
+  };
+
+  _proto.handleYearClick = function handleYearClick() {
+    this.props.onModeChange('year');
+  };
+
+  _proto.handleQuarterClick = function handleQuarterClick(date) {
+    var onChange = this.props.onChange;
+    onChange.apply(void 0, paramUtils.quarterHandleChangeParams(date, true, true));
+  };
+
+  _proto.handleDisabled = function handleDisabled(date) {
+    var _this$props2 = this.props,
+        disabled = _this$props2.disabled,
+        index = _this$props2.index,
+        min = _this$props2.min,
+        max = _this$props2.max,
+        rangeDate = _this$props2.rangeDate,
+        range = _this$props2.range,
+        type = _this$props2.type;
+    var isDisabled = min && utils.compareQuarter(min, date, 1, this.getOptions()) >= 0;
+
+    if (!isDisabled) {
+      isDisabled = max && utils.compareQuarter(date, max, 1, this.getOptions()) >= 0;
+    }
+
+    if (!isDisabled && type === 'quarter' && typeof disabled === 'function') {
+      isDisabled = disabled(date);
+    }
+
+    if (!isDisabled && index === 0 && isArray(rangeDate)) {
+      if (isNumber(range) && rangeDate[1] && utils.compareQuarter(date, utils.addSeconds(rangeDate[1], -range, this.getOptions()), 0, this.getOptions()) < 0) {
+        isDisabled = true;
+      }
+    }
+
+    if (!isDisabled && index === 1 && isArray(rangeDate)) {
+      if (isNumber(range) && rangeDate[0] && utils.compareQuarter(date, utils.addSeconds(rangeDate[0], range, this.getOptions()), 0, this.getOptions()) > 0) {
+        isDisabled = true;
+      }
+    }
+
+    return isDisabled;
+  };
+
+  _proto.renderQuarter = function renderQuarter(q, i) {
+    var _this$props3 = this.props,
+        current = _this$props3.current,
+        index = _this$props3.index,
+        rangeDate = _this$props3.rangeDate,
+        value = _this$props3.value;
+    var year = utils.getDateInfo(current, 'year', this.getOptions());
+    var date = utils.parse(year + " " + (i + 1), 'yyyy Q', this.getOptions());
+    var isDisabled = this.handleDisabled(date); // let hoverClass
+
+    var classList = [isDisabled && 'disabled'];
+
+    if (rangeDate && index !== undefined) {
+      if (utils.isSameQuarter(date, rangeDate[index], this.getOptions())) {
+        classList.push('active');
+      } // hoverClass = datepickerClass(
+      //   rangeDate[0] &&
+      //     utils.compareQuarter(rangeDate[0], date) <= 0 &&
+      //     rangeDate[1] &&
+      //     utils.compareQuarter(rangeDate[1], date) >= 0 &&
+      //     'hover',
+      //   // Datetime Picker range end datetime classname #330
+      //   utils.isSameQuarter(rangeDate[index], date) && `hover-${index === 0 ? 'start' : 'end'} active`
+      // )
+
+    } else if (value) {
+      if (utils.isSameQuarter(date, value, this.getOptions())) {
+        classList.push('active');
+      }
+    }
+
+    return React.createElement("div", {
+      key: date.getTime() // className={hoverClass}
+      ,
+      onClick: isDisabled ? undefined : this.handleQuarterClick.bind(this, date, undefined)
+    }, React.createElement("span", {
+      className: datepickerClass.apply(void 0, classList)
+    }, q));
+  };
+
+  _proto.render = function render() {
+    var _this2 = this;
+
+    var current = this.props.current;
+    return React.createElement("div", {
+      className: datepickerClass('quarter-picker')
+    }, React.createElement("div", {
+      className: datepickerClass('header')
+    }, React.createElement(Icon, {
+      name: "AngleLeft",
+      className: "left",
+      onClick: this.handlePrevYear
+    }), React.createElement("span", {
+      onClick: this.handleYearClick.bind(this),
+      className: datepickerClass('ym')
+    }, utils.getDateInfo(current, 'year', this.getOptions())), React.createElement(Icon, {
+      name: "AngleRight",
+      className: "right",
+      onClick: this.handleNextYear
+    })), React.createElement("div", {
+      className: datepickerClass('list')
+    }, Quarters.map(function (q, i) {
+      return _this2.renderQuarter(q, i);
+    })));
+  };
+
+  return Quarter;
+}(PureComponent);
+
+export default Quarter;

package/esm/DatePicker/Quick.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { QuickProps } from './Props';
+export default class Quick extends React.Component<QuickProps> {
+    getOptions(): {
+        timeZone: string | undefined;
+        startOfWeek: any;
+    };
+    compareDate(a: Date[], b: Date[]): boolean;
+    handleQuick(quick: {
+        invalid: boolean;
+        value: Date[];
+        name: string;
+    }): void;
+    render(): {} | null;
+}

package/esm/DatePicker/Quick.js

@@ -0,0 +1,64 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import React from 'react';
+import utils from './utils';
+import { datepickerClass } from './styles';
+import { getLocale } from '../locale';
+
+var Quick =
+/*#__PURE__*/
+function (_React$Component) {
+  _inheritsLoose(Quick, _React$Component);
+
+  function Quick() {
+    return _React$Component.apply(this, arguments) || this;
+  }
+
+  var _proto = Quick.prototype;
+
+  _proto.getOptions = function getOptions() {
+    var timeZone = this.props.timeZone;
+    return {
+      timeZone: timeZone,
+      startOfWeek: getLocale('startOfWeek')
+    };
+  };
+
+  _proto.compareDate = function compareDate(a, b) {
+    var type = this.props.type;
+    return utils.compareDateArray(a, b, type, this.getOptions());
+  };
+
+  _proto.handleQuick = function handleQuick(quick) {
+    if (quick.invalid) {
+      console.error("the date you provider for " + quick.name + " is invalid, please check the date in quickSelect!");
+      return;
+    }
+
+    var onChange = this.props.onChange;
+    if (onChange) onChange(quick);
+  };
+
+  _proto.render = function render() {
+    var _this = this;
+
+    var _this$props = this.props,
+        quicks = _this$props.quicks,
+        current = _this$props.current,
+        children = _this$props.children;
+    var currentArray = Array.isArray(current) ? current : [current];
+    if (!quicks) return children || null;
+    return React.createElement("div", {
+      className: datepickerClass('quick-select')
+    }, quicks.map(function (q) {
+      return React.createElement("div", {
+        onClick: _this.handleQuick.bind(_this, q),
+        className: datepickerClass('quick-select-item', _this.compareDate(q.value, currentArray) && 'quick-select-item-active'),
+        key: q.name
+      }, q.name);
+    }));
+  };
+
+  return Quick;
+}(React.Component);
+
+export { Quick as default };

package/esm/DatePicker/Range.d.ts

@@ -0,0 +1,35 @@
+/// <reference types="react" />
+import { PureComponent } from '../component';
+import Picker from './Picker';
+import { AreaType, QuickSelectType } from './Props';
+import { RangeProps, DisabledType, DatePickerValue } from './Props';
+interface RangeState {
+    rangeDate: Date[];
+}
+declare class Range extends PureComponent<RangeProps, RangeState> {
+    static defaultProps: {
+        value: never[];
+    };
+    pickers: Picker[];
+    handleFirstChange: (date: Date, change: boolean | undefined, _blur: boolean | undefined, _isEnd: boolean | undefined, _isQuickSelect: QuickSelectType | undefined, areaType: AreaType) => void;
+    handleSecondChange: (date: Date, change: boolean | undefined, _blur: boolean | undefined, _isEnd: boolean | undefined, _isQuickSelect: QuickSelectType | undefined, areaType: AreaType) => void;
+    bindFirstPicker: (picker: Picker) => void;
+    bindSecondPicker: (picker: Picker) => void;
+    handleDisabledStart: ((date: Date, type?: DisabledType, value?: DatePickerValue) => boolean);
+    handleDisabledEnd: ((date: Date, type?: DisabledType, value?: DatePickerValue) => boolean);
+    constructor(props: RangeProps);
+    componentDidUpdate(prevProps: RangeProps): void;
+    getOptions(): {
+        timeZone: string | undefined;
+        weekStartsOn: any;
+    };
+    bindPicker(index: number, el: Picker): void;
+    resetRange(rangeDate: DatePickerValue): void;
+    handleDayHover(date: Date): void;
+    changeDateSmart(rangeDate: Date[]): void;
+    handleChange(index: number, date: Date, change: boolean | undefined, _blur: boolean | undefined, _isEnd: boolean | undefined, _isQuickSelect: QuickSelectType | undefined, areaType: AreaType): void;
+    handleDisabled(type: DisabledType, date: Date): boolean;
+    handleQuick(quick: QuickSelectType): void;
+    render(): JSX.Element;
+}
+export default Range;

package/esm/DatePicker/Range.js

@@ -0,0 +1,299 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import immer from 'immer';
+import { PureComponent } from '../component';
+import shallowEqual from '../utils/shallowEqual';
+import utils from './utils';
+import { getLocale } from '../locale';
+import paramUtils from './paramUtils';
+import Picker from './Picker';
+import { datepickerClass } from './styles';
+import Quick from './Quick';
+var DefaultValue = {
+  value: []
+};
+
+var Range =
+/*#__PURE__*/
+function (_PureComponent) {
+  _inheritsLoose(Range, _PureComponent);
+
+  function Range(props) {
+    var _this;
+
+    _this = _PureComponent.call(this, props) || this;
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "pickers", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleFirstChange", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleSecondChange", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "bindFirstPicker", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "bindSecondPicker", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleDisabledStart", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleDisabledEnd", void 0);
+
+    _this.state = {
+      rangeDate: props.value
+    };
+    _this.pickers = [];
+    _this.handleChange = _this.handleChange.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleFirstChange = _this.handleChange.bind(_assertThisInitialized(_assertThisInitialized(_this)), 0);
+    _this.handleSecondChange = _this.handleChange.bind(_assertThisInitialized(_assertThisInitialized(_this)), 1);
+    _this.handleDayHover = _this.handleDayHover.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.bindFirstPicker = _this.bindPicker.bind(_assertThisInitialized(_assertThisInitialized(_this)), 0);
+    _this.bindSecondPicker = _this.bindPicker.bind(_assertThisInitialized(_assertThisInitialized(_this)), 1);
+    _this.handleDisabledStart = _this.handleDisabled.bind(_assertThisInitialized(_assertThisInitialized(_this)), 'start');
+    _this.handleDisabledEnd = _this.handleDisabled.bind(_assertThisInitialized(_assertThisInitialized(_this)), 'end');
+    _this.changeDateSmart = _this.changeDateSmart.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleQuick = _this.handleQuick.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    return _this;
+  }
+
+  var _proto = Range.prototype;
+
+  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
+    var rangeDate = this.state.rangeDate;
+
+    if (rangeDate.length !== 1 && !shallowEqual(prevProps.value, this.props.value) && !shallowEqual(this.state.rangeDate, this.props.value)) {
+      // eslint-disable-next-line
+      this.setState({
+        rangeDate: this.props.value
+      });
+    }
+  };
+
+  _proto.getOptions = function getOptions() {
+    var timeZone = this.props.timeZone;
+    return {
+      timeZone: timeZone,
+      weekStartsOn: getLocale('startOfWeek')
+    };
+  };
+
+  _proto.bindPicker = function bindPicker(index, el) {
+    this.pickers[index] = el;
+  };
+
+  _proto.resetRange = function resetRange(rangeDate) {
+    this.setState({
+      rangeDate: rangeDate
+    });
+  };
+
+  _proto.handleDayHover = function handleDayHover(date) {
+    if (this.state.rangeDate.length === 1) {
+      utils.cloneTime(date, this.props.value[1], this.props.format, this.getOptions()); // this.setState({ hover: date })
+    }
+  };
+
+  _proto.changeDateSmart = function changeDateSmart(rangeDate) {
+    if (!rangeDate[0] || !rangeDate[1]) return;
+    var s = rangeDate[0],
+        e = rangeDate[1];
+    var range = this.props.range;
+
+    if (typeof range === 'number') {
+      if (utils.compareAsc(s, utils.addSeconds(e, -range, this.getOptions())) < 0) rangeDate[1] = utils.addSeconds(s, range, this.getOptions());
+    }
+
+    if (utils.compareAsc(s, e) > 0) {
+      var sWitheTime = utils.toDate(s, this.getOptions());
+      utils.setTime(sWitheTime, e);
+      rangeDate[1] = utils.compareAsc(s, sWitheTime) > 0 ? s : sWitheTime;
+    }
+  } // Be consistent with the parent onChange, expand first params: index
+  ;
+
+  _proto.handleChange = function handleChange(index, date, change, _blur, _isEnd, _isQuickSelect, areaType) {
+    var _this2 = this;
+
+    var _this$props = this.props,
+        type = _this$props.type,
+        range = _this$props.range,
+        min = _this$props.min,
+        max = _this$props.max;
+    var handleOnChangeParams = paramUtils.handleOnChangeParams(areaType);
+
+    if (!change) {
+      var _this$props2;
+
+      var current = immer(this.props.current, function (draft) {
+        draft[index] = date;
+      });
+
+      (_this$props2 = this.props).onChange.apply(_this$props2, handleOnChangeParams(current));
+
+      return;
+    }
+
+    if (areaType === 'time') {
+      var endChangedDate;
+      this.setState(immer(function (draft) {
+        draft.rangeDate[index] = date;
+        var _draft$rangeDate = draft.rangeDate,
+            s = _draft$rangeDate[0],
+            e = _draft$rangeDate[1];
+
+        if (index !== 0) {
+          if (s && s.getHours() === e.getHours()) {
+            if (utils.compareAsc(s, e) === 1) {
+              e.setMinutes(s.getMinutes());
+            }
+          }
+
+          return;
+        }
+
+        if (range && utils.compareAsc(s, e) === 1) {
+          endChangedDate = date;
+          draft.rangeDate[1] = endChangedDate;
+        }
+
+        if (typeof range === 'number' && utils.compareAsc(s, utils.addSeconds(e, -range, _this2.getOptions())) < 0) {
+          endChangedDate = utils.addSeconds(s, range, _this2.getOptions());
+          draft.rangeDate[1] = endChangedDate;
+        }
+      }), function () {
+        var _this2$props;
+
+        var current = immer(_this2.props.value, function (draft) {
+          draft[index] = date;
+          if (endChangedDate) draft[1] = endChangedDate;
+          draft[1 - index] = draft[1 - index] || '';
+        });
+
+        (_this2$props = _this2.props).onChange.apply(_this2$props, handleOnChangeParams(current, true));
+      });
+      return;
+    }
+
+    if (type === 'month') {
+      var _this$props3;
+
+      // eslint-disable-next-line
+      var rangeDate = [].concat(this.state.rangeDate);
+      rangeDate[index] = date;
+      rangeDate[1 - index] = rangeDate[1 - index] || '';
+      this.changeDateSmart(rangeDate);
+      this.setState({
+        rangeDate: rangeDate
+      });
+
+      (_this$props3 = this.props).onChange.apply(_this$props3, handleOnChangeParams(rangeDate, true, true, index === 1));
+
+      return;
+    }
+
+    utils.cloneTime(date, this.props.value[index], undefined, this.getOptions());
+
+    if (min && utils.compareAsc(date, min) <= 0) {
+      utils.setTime(date, min);
+    }
+
+    if (max && utils.compareAsc(date, max) >= 0) {
+      utils.setTime(date, max);
+    }
+
+    this.setState(immer(function (draft) {
+      draft.rangeDate[index] = date;
+      draft.rangeDate[1 - index] = draft.rangeDate[1 - index] || '';
+
+      _this2.changeDateSmart(draft.rangeDate);
+
+      draft.hover = undefined;
+    }), function () {
+      var _this2$props2;
+
+      // only 'datetime' don not need close, 'time is up'
+      (_this2$props2 = _this2.props).onChange.apply(_this2$props2, handleOnChangeParams(_this2.state.rangeDate, true, type !== 'datetime', index === 1));
+    });
+  };
+
+  _proto.handleDisabled = function handleDisabled(type, date) {
+    var disabled = this.props.disabled;
+    var rangeDate = this.state.rangeDate;
+
+    if (disabled) {
+      return disabled.apply(void 0, [date, type].concat(rangeDate));
+    }
+
+    return false;
+  };
+
+  _proto.handleQuick = function handleQuick(quick) {
+    var _this$props4;
+
+    this.setState({
+      rangeDate: quick.value
+    });
+
+    (_this$props4 = this.props).onChange.apply(_this$props4, paramUtils.quickHandleChangeParams(quick.value, true, false, false, quick));
+  };
+
+  _proto.render = function render() {
+    // min & max can not to child
+    var _this$props5 = this.props,
+        current = _this$props5.current,
+        value = _this$props5.value,
+        range = _this$props5.range,
+        children = _this$props5.children,
+        min = _this$props5.min,
+        max = _this$props5.max,
+        quicks = _this$props5.quicks,
+        props = _objectWithoutPropertiesLoose(_this$props5, ["current", "value", "range", "children", "min", "max", "quicks"]);
+
+    var rangeDate = [].concat(this.state.rangeDate);
+    return React.createElement("div", {
+      className: datepickerClass('range-picker')
+    }, React.createElement(Quick, _extends({}, this.props, {
+      current: this.state.rangeDate,
+      onChange: this.handleQuick
+    })), React.createElement(Picker, _extends({}, props, {
+      pos: "start",
+      disabled: this.handleDisabledStart,
+      index: 0,
+      min: min,
+      max: max,
+      current: current[0],
+      range: typeof range === 'number' ? range : undefined,
+      rangeDate: rangeDate,
+      rangeTemp: rangeDate[0],
+      onChange: this.handleFirstChange,
+      onChangeSync: this.handleChange,
+      onDayHover: this.handleDayHover,
+      ref: this.bindFirstPicker,
+      value: utils.toDateWithFormat(value[0], props.format, undefined, this.getOptions()),
+      showTimePicker: value.length === 2
+    })), React.createElement(Picker, _extends({}, props, {
+      disabled: this.handleDisabledEnd,
+      index: 1,
+      min: rangeDate[0] ? rangeDate[0] : min,
+      max: max,
+      current: current[1],
+      range: typeof range === 'number' ? range : undefined,
+      rangeDate: rangeDate,
+      rangeTemp: rangeDate[0],
+      onChange: this.handleSecondChange,
+      onChangeSync: this.handleChange,
+      onDayHover: this.handleDayHover,
+      ref: this.bindSecondPicker,
+      value: utils.toDateWithFormat(value[1], props.format, undefined, this.getOptions()),
+      showTimePicker: value.length === 2
+    })));
+  };
+
+  return Range;
+}(PureComponent);
+
+_defineProperty(Range, "defaultProps", DefaultValue);
+
+export default Range;

package/esm/DatePicker/Text.d.ts

@@ -0,0 +1,20 @@
+import React, { PureComponent } from 'react';
+import { TextProps } from './Props';
+declare class Text extends PureComponent<TextProps> {
+    static defaultProps: {
+        value: string;
+    };
+    element: HTMLSpanElement;
+    constructor(props: TextProps);
+    componentDidUpdate(prevProps: TextProps): void;
+    getOptions(): {
+        timeZone: string | undefined;
+        weekStartsOn: any;
+    };
+    bindElement(el: HTMLSpanElement): void;
+    handleBlur(e: React.FocusEvent<HTMLSpanElement>): void;
+    handleFocus(e: React.FocusEvent | React.MouseEvent): void;
+    handleInput(e: React.KeyboardEvent<HTMLSpanElement>): void;
+    render(): JSX.Element;
+}
+export default Text;