shineout/es/DatePicker/Time.js

Shein 前端组件库

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 { datepickerClass } from './styles';
import TimeScroll from './TimeScroll';
import utils from './utils';
import { isRTL } from '../config';
import paramUtils from './paramUtils';
import { getLocale } from '../locale';

var Time =
/*#__PURE__*/
function (_PureComponent) {
  _inheritsLoose(Time, _PureComponent);

  function Time(props) {
    var _this;

    _this = _PureComponent.call(this, props) || this;

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "defaultValue", void 0);

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleMinuteChange", void 0);

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleHourChange", void 0);

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleSecondChange", void 0);

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleAMPMChange", void 0);

    _this.defaultValue = _this.getDefaultTime();
    _this.handleHourChange = _this.handleChange.bind(_assertThisInitialized(_assertThisInitialized(_this)), 'hour');
    _this.handleMinuteChange = _this.handleChange.bind(_assertThisInitialized(_assertThisInitialized(_this)), 'minute');
    _this.handleSecondChange = _this.handleChange.bind(_assertThisInitialized(_assertThisInitialized(_this)), 'second');
    _this.handleAMPMChange = _this.handleChange.bind(_assertThisInitialized(_assertThisInitialized(_this)), 'ampm');
    _this.handleDisabled = _this.handleDisabled.bind(_assertThisInitialized(_assertThisInitialized(_this)));
    props.disabledRegister(_this.handleDisabled, 'time', props.index);
    return _this;
  }

  var _proto = Time.prototype;

  _proto.getOptions = function getOptions() {
    var timeZone = this.props.timeZone;
    return {
      timeZone: timeZone,
      weekStartsOn: getLocale('startOfWeek')
    };
  };

  _proto.getDefaultTime = function getDefaultTime() {
    var idx = 0;
    var current = utils.newDate(undefined, this.getOptions());
    var _this$props = this.props,
        index = _this$props.index,
        defaultTime = _this$props.defaultTime,
        format = _this$props.format;
    if (typeof index === 'number') idx = index;
    if (!defaultTime[idx]) return current;
    return utils.cloneTime(current, defaultTime[idx], format, this.getOptions());
  };

  _proto.getValue = function getValue() {
    return this.props.value || this.defaultValue;
  };

  _proto.handleDisabled = function handleDisabled(value, val, mode, onlyVaild) {
    var _this$props2 = this.props,
        disabled = _this$props2.disabled,
        min = _this$props2.min,
        max = _this$props2.max,
        range = _this$props2.range,
        disabledTime = _this$props2.disabledTime,
        index = _this$props2.index,
        rangeDate = _this$props2.rangeDate;

    var _paramUtils$judgeTime = paramUtils.judgeTimeByRange({
      target: val,
      value: value,
      mode: mode,
      min: min,
      max: max,
      range: range,
      disabled: disabled,
      disabledTime: disabledTime,
      index: index,
      rangeDate: rangeDate,
      options: this.getOptions()
    }),
        isDisabled = _paramUtils$judgeTime[0],
        date = _paramUtils$judgeTime[1];

    return onlyVaild ? isDisabled : [isDisabled, date];
  };

  _proto.handleChange = function handleChange(type, val) {
    var _this$props3;

    var format = this.props.format;
    var value = this.getValue();
    var mode = type;

    if (type === 'hour') {
      if (format.indexOf('h') >= 0) {
        mode = 'h';
      } else {
        mode = 'H';
      }
    }

    var _this$handleDisabled = this.handleDisabled(value, val, mode),
        isDisabled = _this$handleDisabled[0],
        date = _this$handleDisabled[1];

    if (isDisabled) return;

    (_this$props3 = this.props).onChange.apply(_this$props3, paramUtils.timeHandleChangeParams(date, true, false, true));
  };

  _proto.renderTimeScroller = function renderTimeScroller(value, min, max, hours) {
    var _this$props4 = this.props,
        format = _this$props4.format,
        hourStep = _this$props4.hourStep,
        minuteStep = _this$props4.minuteStep,
        secondStep = _this$props4.secondStep,
        range = _this$props4.range,
        disabled = _this$props4.disabled,
        disabledTime = _this$props4.disabledTime,
        index = _this$props4.index,
        rangeDate = _this$props4.rangeDate,
        timeZone = _this$props4.timeZone;
    var rtl = isRTL();
    var res = [format.indexOf('H') >= 0 && React.createElement(TimeScroll, {
      key: "HH",
      current: value,
      value: utils.getDateInfo(value, 'hour', this.getOptions()),
      mode: "H",
      range: range,
      min: min,
      max: max,
      disabled: disabled,
      total: 24,
      step: hourStep,
      onChange: this.handleHourChange,
      disabledTime: disabledTime,
      index: index,
      rangeDate: rangeDate,
      timeZone: timeZone
    }), format.indexOf('h') >= 0 && React.createElement(TimeScroll, {
      key: "hh",
      current: value,
      mode: "h",
      range: range,
      min: min,
      max: max,
      disabled: disabled,
      value: hours,
      total: 12,
      step: hourStep,
      onChange: this.handleHourChange,
      disabledTime: disabledTime,
      index: index,
      rangeDate: rangeDate,
      timeZone: timeZone
    }), format.indexOf('m') >= 0 && React.createElement(TimeScroll, {
      key: "mm",
      current: value,
      mode: "m",
      range: range,
      min: min,
      max: max,
      disabled: disabled,
      value: utils.getDateInfo(value, 'minute', this.getOptions()),
      step: minuteStep,
      onChange: this.handleMinuteChange,
      disabledTime: disabledTime,
      index: index,
      rangeDate: rangeDate,
      timeZone: timeZone
    }), format.indexOf('s') >= 0 && React.createElement(TimeScroll, {
      key: "ss",
      current: value,
      mode: "s",
      range: range,
      min: min,
      max: max,
      disabled: disabled,
      value: utils.getDateInfo(value, 'second', this.getOptions()),
      step: secondStep,
      onChange: this.handleSecondChange,
      disabledTime: disabledTime,
      index: index,
      rangeDate: rangeDate,
      timeZone: timeZone
    }), /a|A/.test(format) && React.createElement(TimeScroll, {
      key: "ampm",
      current: value,
      mode: "ampm",
      range: range,
      min: min,
      max: max,
      disabled: disabled,
      value: utils.getDateInfo(value, 'hour', this.getOptions()) >= 12 ? 1 : 0,
      total: 2,
      ampm: true,
      onChange: this.handleAMPMChange,
      disabledTime: disabledTime,
      index: index,
      rangeDate: rangeDate,
      timeZone: timeZone
    })];

    if (rtl) {
      res = res.reverse();
    }

    return res;
  };

  _proto.render = function render() {
    var _this$props5 = this.props,
        format = _this$props5.format,
        mi = _this$props5.min,
        ma = _this$props5.max;
    var value = this.getValue();
    var className = datepickerClass('time-picker');
    var hours = value.getHours();

    if (format.indexOf('h') >= 0 && hours >= 12) {
      hours -= 12;
    } // reset


    var min = utils.resetTimeByFormat(mi, format, this.getOptions());
    var max = utils.resetTimeByFormat(ma, format, this.getOptions());
    return React.createElement("div", {
      className: className
    }, this.renderTimeScroller(value, min, max, hours));
  };

  return Time;
}(PureComponent);

export default Time;