choerodon-ui/es/rc-components/time-picker/TimePicker.js

An enterprise-class UI design language and React-based implementation

import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/inherits";
import _createSuper from "@babel/runtime/helpers/createSuper";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import React, { Component } from 'react';
import noop from 'lodash/noop';
import moment from 'moment';
import Trigger from '../trigger';
import Panel from './Panel';
import placements, { getPlacements } from './placements';
import Icon from '../../icon';
import Input from '../../input';

function refFn(field, component) {
  this[field] = component;
}

var Picker = /*#__PURE__*/function (_Component) {
  _inherits(Picker, _Component);

  var _super = _createSuper(Picker);

  function Picker(props) {
    var _this;

    _classCallCheck(this, Picker);

    _this = _super.call(this, props);

    _defineProperty(_assertThisInitialized(_this), "onPanelChange", function (value) {
      _this.setValue(value);
    });

    _defineProperty(_assertThisInitialized(_this), "onPanelClear", function () {
      _this.setValue(null);

      _this.setOpen(false);
    });

    _defineProperty(_assertThisInitialized(_this), "onVisibleChange", function (open) {
      _this.setOpen(open);
    });

    _defineProperty(_assertThisInitialized(_this), "onEsc", function () {
      _this.setOpen(false);

      _this.focus();
    });

    _defineProperty(_assertThisInitialized(_this), "onKeyDown", function (e) {
      if (e.keyCode === 40) {
        _this.setOpen(true);
      }
    });

    _this.saveInputRef = refFn.bind(_assertThisInitialized(_this), 'picker');
    _this.savePanelRef = refFn.bind(_assertThisInitialized(_this), 'panelInstance');

    var defaultOpen = props.defaultOpen,
        defaultValue = props.defaultValue,
        _props$open = props.open,
        _open = _props$open === void 0 ? defaultOpen : _props$open,
        _props$value = props.value,
        _value = _props$value === void 0 ? defaultValue : _props$value;

    _this.state = {
      open: _open,
      value: _value
    };
    return _this;
  }

  _createClass(Picker, [{
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(nextProps) {
      var value = nextProps.value,
          open = nextProps.open;

      if ('value' in nextProps) {
        this.setState({
          value: value
        });
      }

      if (open !== undefined) {
        this.setState({
          open: open
        });
      }
    }
  }, {
    key: "setValue",
    value: function setValue(value) {
      if (!('value' in this.props)) {
        this.setState({
          value: value
        });
      }

      this.props.onChange(value);
    }
  }, {
    key: "getFormat",
    value: function getFormat() {
      var _this$props = this.props,
          format = _this$props.format,
          showHour = _this$props.showHour,
          showMinute = _this$props.showMinute,
          showSecond = _this$props.showSecond,
          use12Hours = _this$props.use12Hours;

      if (format) {
        return format;
      }

      if (use12Hours) {
        var fmtString = [showHour ? 'h' : '', showMinute ? 'mm' : '', showSecond ? 'ss' : ''].filter(function (item) {
          return !!item;
        }).join(':');
        return fmtString.concat(' a');
      }

      return [showHour ? 'HH' : '', showMinute ? 'mm' : '', showSecond ? 'ss' : ''].filter(function (item) {
        return !!item;
      }).join(':');
    }
  }, {
    key: "getPanelElement",
    value: function getPanelElement() {
      var _this$props2 = this.props,
          prefixCls = _this$props2.prefixCls,
          placeholder = _this$props2.placeholder,
          disabledHours = _this$props2.disabledHours,
          disabledMinutes = _this$props2.disabledMinutes,
          disabledSeconds = _this$props2.disabledSeconds,
          hideDisabledOptions = _this$props2.hideDisabledOptions,
          inputReadOnly = _this$props2.inputReadOnly,
          allowEmpty = _this$props2.allowEmpty,
          showHour = _this$props2.showHour,
          showMinute = _this$props2.showMinute,
          showSecond = _this$props2.showSecond,
          defaultOpenValue = _this$props2.defaultOpenValue,
          clearText = _this$props2.clearText,
          addon = _this$props2.addon,
          use12Hours = _this$props2.use12Hours,
          focusOnOpen = _this$props2.focusOnOpen,
          onKeyDown = _this$props2.onKeyDown,
          hourStep = _this$props2.hourStep,
          minuteStep = _this$props2.minuteStep,
          secondStep = _this$props2.secondStep,
          clearIcon = _this$props2.clearIcon;
      return /*#__PURE__*/React.createElement(Panel, {
        clearText: clearText,
        prefixCls: "".concat(prefixCls, "-panel"),
        ref: this.savePanelRef,
        value: this.state.value,
        inputReadOnly: inputReadOnly,
        onChange: this.onPanelChange,
        onClear: this.onPanelClear,
        defaultOpenValue: defaultOpenValue,
        showHour: showHour,
        showMinute: showMinute,
        showSecond: showSecond,
        onEsc: this.onEsc,
        allowEmpty: allowEmpty,
        format: this.getFormat(),
        placeholder: placeholder,
        disabledHours: disabledHours,
        disabledMinutes: disabledMinutes,
        disabledSeconds: disabledSeconds,
        hideDisabledOptions: hideDisabledOptions,
        use12Hours: use12Hours,
        hourStep: hourStep,
        minuteStep: minuteStep,
        secondStep: secondStep,
        addon: addon,
        focusOnOpen: focusOnOpen,
        onKeyDown: onKeyDown,
        clearIcon: clearIcon
      });
    }
  }, {
    key: "getPopupClassName",
    value: function getPopupClassName() {
      var _this$props3 = this.props,
          showHour = _this$props3.showHour,
          showMinute = _this$props3.showMinute,
          showSecond = _this$props3.showSecond,
          use12Hours = _this$props3.use12Hours,
          prefixCls = _this$props3.prefixCls;
      var popupClassName = this.props.popupClassName; // Keep it for old compatibility

      if ((!showHour || !showMinute || !showSecond) && !use12Hours) {
        popupClassName += " ".concat(prefixCls, "-panel-narrow");
      }

      var selectColumnCount = 0;

      if (showHour) {
        selectColumnCount += 1;
      }

      if (showMinute) {
        selectColumnCount += 1;
      }

      if (showSecond) {
        selectColumnCount += 1;
      }

      if (use12Hours) {
        selectColumnCount += 1;
      }

      popupClassName += " ".concat(prefixCls, "-panel-column-").concat(selectColumnCount);
      return popupClassName;
    }
  }, {
    key: "getBuiltInPlacements",
    value: function getBuiltInPlacements() {
      var label = this.props.label;
      var placement_haslabel = {
        'bottomLeft': [0, -19],
        'bottomRight': [0, -19]
      };

      if (label) {
        return getPlacements(placement_haslabel);
      }

      return placements;
    }
  }, {
    key: "setOpen",
    value: function setOpen(open) {
      var _this$props4 = this.props,
          onOpen = _this$props4.onOpen,
          onClose = _this$props4.onClose;

      if (this.state.open !== open) {
        if (!('open' in this.props)) {
          this.setState({
            open: open
          });
        }

        if (open) {
          onOpen({
            open: open
          });
        } else {
          onClose({
            open: open
          });
        }
      }
    }
  }, {
    key: "focus",
    value: function focus() {
      this.picker.focus();
    }
  }, {
    key: "blur",
    value: function blur() {
      this.picker.blur();
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props5 = this.props,
          prefixCls = _this$props5.prefixCls,
          placeholder = _this$props5.placeholder,
          placement = _this$props5.placement,
          align = _this$props5.align,
          id = _this$props5.id,
          disabled = _this$props5.disabled,
          transitionName = _this$props5.transitionName,
          style = _this$props5.style,
          className = _this$props5.className,
          getPopupContainer = _this$props5.getPopupContainer,
          name = _this$props5.name,
          autoComplete = _this$props5.autoComplete,
          onFocus = _this$props5.onFocus,
          onBlur = _this$props5.onBlur,
          autoFocus = _this$props5.autoFocus,
          inputReadOnly = _this$props5.inputReadOnly,
          label = _this$props5.label,
          inputIcon = _this$props5.inputIcon,
          _this$props5$componen = _this$props5.component,
          component = _this$props5$componen === void 0 ? Input : _this$props5$componen;
      var Cmp = component;
      var _this$state = this.state,
          open = _this$state.open,
          value = _this$state.value;
      var popupClassName = this.getPopupClassName();
      return /*#__PURE__*/React.createElement(Trigger, {
        prefixCls: "".concat(prefixCls, "-panel"),
        popupClassName: popupClassName,
        popup: this.getPanelElement(),
        popupAlign: align,
        builtinPlacements: this.getBuiltInPlacements(),
        popupPlacement: placement,
        action: disabled ? [] : ['click'],
        destroyPopupOnHide: true,
        getPopupContainer: getPopupContainer,
        popupTransitionName: transitionName,
        popupVisible: open,
        onPopupVisibleChange: this.onVisibleChange
      }, /*#__PURE__*/React.createElement("span", {
        className: "".concat(prefixCls, " ").concat(className),
        style: style
      }, /*#__PURE__*/React.createElement(Cmp, {
        className: "".concat(prefixCls, "-input"),
        ref: this.saveInputRef,
        type: "text",
        label: label,
        placeholder: placeholder,
        name: name,
        onKeyDown: this.onKeyDown,
        disabled: disabled,
        value: value && value.format(this.getFormat()) || '',
        autoComplete: autoComplete,
        onFocus: onFocus,
        onBlur: onBlur,
        suffix: /*#__PURE__*/React.createElement(Icon, {
          type: "av_timer",
          className: "".concat(prefixCls, "-icon")
        }),
        autoFocus: autoFocus,
        focused: open,
        onChange: noop,
        readOnly: !!inputReadOnly,
        id: id
      }), inputIcon || /*#__PURE__*/React.createElement("span", {
        className: "".concat(prefixCls, "-icon")
      })));
    }
  }]);

  return Picker;
}(Component);

_defineProperty(Picker, "defaultProps", {
  clearText: 'clear',
  prefixCls: 'rc-time-picker',
  defaultOpen: false,
  inputReadOnly: false,
  style: {},
  className: '',
  popupClassName: '',
  id: '',
  align: {},
  defaultOpenValue: moment(),
  allowEmpty: true,
  showHour: true,
  showMinute: true,
  showSecond: true,
  disabledHours: noop,
  disabledMinutes: noop,
  disabledSeconds: noop,
  hideDisabledOptions: false,
  placement: 'bottomLeft',
  onChange: noop,
  onOpen: noop,
  onClose: noop,
  onFocus: noop,
  onBlur: noop,
  addon: noop,
  use12Hours: false,
  focusOnOpen: false,
  onKeyDown: noop
});

export { Picker as default };
//# sourceMappingURL=TimePicker.js.map