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

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

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _react = _interopRequireWildcard(require("react"));

var _noop = _interopRequireDefault(require("lodash/noop"));

var _moment = _interopRequireDefault(require("moment"));

var _trigger = _interopRequireDefault(require("../trigger"));

var _Panel = _interopRequireDefault(require("./Panel"));

var _placements = _interopRequireWildcard(require("./placements"));

var _icon = _interopRequireDefault(require("../../icon"));

var _input = _interopRequireDefault(require("../../input"));

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

var Picker = /*#__PURE__*/function (_Component) {
  (0, _inherits2["default"])(Picker, _Component);

  var _super = (0, _createSuper2["default"])(Picker);

  function Picker(props) {
    var _this;

    (0, _classCallCheck2["default"])(this, Picker);
    _this = _super.call(this, props);
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onPanelChange", function (value) {
      _this.setValue(value);
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onPanelClear", function () {
      _this.setValue(null);

      _this.setOpen(false);
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onVisibleChange", function (open) {
      _this.setOpen(open);
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onEsc", function () {
      _this.setOpen(false);

      _this.focus();
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onKeyDown", function (e) {
      if (e.keyCode === 40) {
        _this.setOpen(true);
      }
    });
    _this.saveInputRef = refFn.bind((0, _assertThisInitialized2["default"])(_this), 'picker');
    _this.savePanelRef = refFn.bind((0, _assertThisInitialized2["default"])(_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;
  }

  (0, _createClass2["default"])(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["default"].createElement(_Panel["default"], {
        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 (0, _placements.getPlacements)(placement_haslabel);
      }

      return _placements["default"];
    }
  }, {
    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["default"] : _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["default"].createElement(_trigger["default"], {
        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["default"].createElement("span", {
        className: "".concat(prefixCls, " ").concat(className),
        style: style
      }, /*#__PURE__*/_react["default"].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["default"].createElement(_icon["default"], {
          type: "av_timer",
          className: "".concat(prefixCls, "-icon")
        }),
        autoFocus: autoFocus,
        focused: open,
        onChange: _noop["default"],
        readOnly: !!inputReadOnly,
        id: id
      }), inputIcon || /*#__PURE__*/_react["default"].createElement("span", {
        className: "".concat(prefixCls, "-icon")
      })));
    }
  }]);
  return Picker;
}(_react.Component);

exports["default"] = Picker;
(0, _defineProperty2["default"])(Picker, "defaultProps", {
  clearText: 'clear',
  prefixCls: 'rc-time-picker',
  defaultOpen: false,
  inputReadOnly: false,
  style: {},
  className: '',
  popupClassName: '',
  id: '',
  align: {},
  defaultOpenValue: (0, _moment["default"])(),
  allowEmpty: true,
  showHour: true,
  showMinute: true,
  showSecond: true,
  disabledHours: _noop["default"],
  disabledMinutes: _noop["default"],
  disabledSeconds: _noop["default"],
  hideDisabledOptions: false,
  placement: 'bottomLeft',
  onChange: _noop["default"],
  onOpen: _noop["default"],
  onClose: _noop["default"],
  onFocus: _noop["default"],
  onBlur: _noop["default"],
  addon: _noop["default"],
  use12Hours: false,
  focusOnOpen: false,
  onKeyDown: _noop["default"]
});
//# sourceMappingURL=TimePicker.js.map