drip-table/lib/components/cell-components/date-picker/index.js

A tiny and powerful enterprise-class solution for building tables.

"use strict";

function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }

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

require("./index.less");

var _classnames = _interopRequireDefault(require("classnames"));

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

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

var _reactDom = _interopRequireDefault(require("react-dom"));

var _reactEventInjector = require("react-event-injector");

var _uuid = require("uuid");

var _alert = _interopRequireDefault(require("../../react-components/alert"));

var _datePicker = _interopRequireDefault(require("../../react-components/date-picker"));

var _utils = require("../utils");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var prefixCls = 'jfe-drip-table-cc-date-picker';

var DTCDate = /*#__PURE__*/function (_React$PureComponent) {
  _inherits(DTCDate, _React$PureComponent);

  var _super = _createSuper(DTCDate);

  function DTCDate() {
    var _this;

    _classCallCheck(this, DTCDate);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _super.call.apply(_super, [this].concat(args));

    _defineProperty(_assertThisInitialized(_this), "state", {
      cellLeft: 0,
      cellTop: 0,
      cellWidth: 0,
      cellPaddingLeft: 0,
      cellPaddingRight: 0,
      cellPaddingTop: 0,
      cellPaddingBottom: 0,
      editState: 'none'
    });

    _defineProperty(_assertThisInitialized(_this), "onKeyDown", function (e) {
      if (_this.state.editState === 'none' && e.key.length === 1) {
        _this.setState({
          editState: 'editing'
        });

        _this.updateCellRect(e.currentTarget);
      } else if (_this.state.editState === 'editing' && e.key === 'Escape') {
        _this.setState({
          editState: 'none'
        });
      } else if (_this.state.editState === 'none') {
        e.currentTarget.blur();
      }
    });

    _defineProperty(_assertThisInitialized(_this), "componentUuid", "dtc-".concat((0, _uuid.v4)()));

    _defineProperty(_assertThisInitialized(_this), "$main", /*#__PURE__*/_react.default.createRef());

    _defineProperty(_assertThisInitialized(_this), "focusEdit", function () {
      var $editPopup = document.querySelector("#".concat(_this.componentUuid, "-popup"));

      if (!$editPopup) {
        return;
      }

      var $editTextarea = $editPopup.querySelector(".".concat(prefixCls, "-edit-textarea"));

      if (!$editTextarea || !($editTextarea instanceof HTMLTextAreaElement)) {
        return;
      }

      var end = $editTextarea.value.length;
      $editTextarea.setSelectionRange(end, end);
      $editTextarea.focus();
    });

    _defineProperty(_assertThisInitialized(_this), "onDoubleClick", function (e) {
      if (!_this.props.editable) {
        return;
      }

      if (_this.state.editState !== 'none') {
        return;
      }

      _this.updateCellRect(e.currentTarget);

      _this.setState({
        editState: 'entering'
      });
    });

    _defineProperty(_assertThisInitialized(_this), "updateCellRect", function ($main) {
      var innerRect = $main.getBoundingClientRect();
      var $cell = $main.parentElement;
      var cellRect = $cell.getBoundingClientRect();

      _this.setState({
        cellLeft: cellRect.left,
        cellTop: cellRect.top,
        cellPaddingLeft: innerRect.left - cellRect.left,
        cellPaddingRight: cellRect.right - innerRect.right,
        cellPaddingTop: innerRect.top - cellRect.top,
        cellPaddingBottom: cellRect.bottom - innerRect.bottom
      });
    });

    _defineProperty(_assertThisInitialized(_this), "onWheel", function (e) {
      if (e.target instanceof HTMLTextAreaElement) {
        var scrollable = e.deltaY < 0 ? Math.abs(e.target.scrollTop) > Number.EPSILON : e.target.scrollHeight - e.target.scrollTop - e.target.clientHeight > Number.EPSILON;

        if (scrollable) {
          return;
        }
      }

      return (0, _utils.preventEvent)(e);
    });

    return _this;
  }

  _createClass(DTCDate, [{
    key: "configured",
    get: function get() {
      var schema = this.props.schema;
      var options = schema.options;

      if (options.mode === 'basic') {
        return true;
      }

      if (options.mode === 'range') {
        return true;
      }

      return false;
    }
  }, {
    key: "basicValue",
    get: function get() {
      var _this$props$schema = this.props.schema,
          dataIndex = _this$props$schema.dataIndex,
          options = _this$props$schema.options,
          defaultValue = _this$props$schema.defaultValue;
      var indexValue = this.props.indexValue;

      if (options.mode === 'basic') {
        var value = indexValue(dataIndex, '');

        if (typeof value === 'string' || typeof value === 'number') {
          return value;
        }

        if (typeof defaultValue === 'string' || typeof defaultValue === 'number') {
          return defaultValue;
        }
      }

      return '';
    }
  }, {
    key: "rangeValue",
    get: function get() {
      var _this$props$schema2 = this.props.schema,
          dataIndex = _this$props$schema2.dataIndex,
          options = _this$props$schema2.options,
          defaultValue = _this$props$schema2.defaultValue;
      var indexValue = this.props.indexValue;

      if (options.mode === 'range') {
        var value = indexValue(dataIndex, []);

        if (Array.isArray(value) && !value.some(function (v) {
          return typeof v !== 'string' && typeof v !== 'number';
        })) {
          return value;
        }

        if (Array.isArray(defaultValue) && !defaultValue.some(function (v) {
          return typeof v !== 'string' && typeof v !== 'number';
        })) {
          return defaultValue;
        }
      }

      return [];
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate() {
      var _this2 = this;

      if (this.state.editState === 'entering') {
        this.setState({
          editState: 'editing'
        }, function () {
          return _this2.focusEdit();
        });
      }
    }
  }, {
    key: "renderEditDate",
    value: function renderEditDate() {
      var _this3 = this;

      var options = this.props.schema.options;
      var selectMinWidth = 100;
      var selectFinalWidth = Math.max(Math.max(this.state.cellWidth, selectMinWidth), 210);
      var justifyContent = 'center';

      if (this.props.schema.verticalAlign === 'top' || this.props.schema.verticalAlign === 'stretch') {
        justifyContent = 'flex-start';
      } else if (this.props.schema.verticalAlign === 'bottom') {
        justifyContent = 'flex-end';
      }

      if (options.mode === 'basic') {
        return /*#__PURE__*/_react.default.createElement("div", {
          className: (0, _classnames.default)("".concat(prefixCls, "-edit-editing-outline"), "".concat(prefixCls, "-edit-select")),
          style: {
            width: selectFinalWidth,
            height: 300,
            justifyContent: justifyContent
          }
        }, /*#__PURE__*/_react.default.createElement(_datePicker.default.DatePicker, {
          autoFocus: true,
          date: this.basicValue,
          onChange: function onChange(value) {
            var _this3$props$onChange, _this3$props;

            if (_this3.props.preview) {
              return;
            }

            (_this3$props$onChange = (_this3$props = _this3.props).onChange) === null || _this3$props$onChange === void 0 ? void 0 : _this3$props$onChange.call(_this3$props, (0, _moment.default)(value).format(options.format));

            _this3.setState({
              editState: 'none'
            });
          },
          style: {
            width: 170
          },
          onBlur: function onBlur() {
            _this3.setState({
              editState: 'none'
            });
          }
        }));
      }

      if (options.mode === 'range') {
        return /*#__PURE__*/_react.default.createElement("div", {
          className: (0, _classnames.default)("".concat(prefixCls, "-edit-editing-outline"), "".concat(prefixCls, "-edit-select")),
          style: {
            width: 380,
            height: 300,
            justifyContent: justifyContent
          }
        }, /*#__PURE__*/_react.default.createElement(_datePicker.default.DateRangePicker, {
          date: this.rangeValue,
          autoFocus: true,
          style: Object.assign({}, {
            width: 340
          }),
          format: options.format,
          onChange: function onChange(value, dataString) {
            if (_this3.props.preview) {
              return;
            }

            _this3.setState({
              editState: 'none'
            });

            if (value) {
              var _this3$props$onChange2, _this3$props2;

              // 暂时不支持修改2个dataIndex的值
              (_this3$props$onChange2 = (_this3$props2 = _this3.props).onChange) === null || _this3$props$onChange2 === void 0 ? void 0 : _this3$props$onChange2.call(_this3$props2, [(0, _moment.default)(value[0]).format(options.format), (0, _moment.default)(value[1]).format(options.format)]);

              _this3.setState({
                editState: 'none'
              });
            }
          },
          onBlur: function onBlur() {
            _this3.setState({
              editState: 'none'
            });
          }
        }));
      }

      return null;
    }
  }, {
    key: "renderEdit",
    value: function renderEdit() {
      if (!this.props.editable) {
        return null;
      }

      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
        className: "".concat(prefixCls, "-edit-padding-left"),
        style: {
          width: this.state.cellPaddingLeft,
          left: -this.state.cellPaddingLeft
        }
      }), /*#__PURE__*/_react.default.createElement("div", {
        className: "".concat(prefixCls, "-edit-padding-right"),
        style: {
          width: this.state.cellPaddingRight,
          right: -this.state.cellPaddingRight
        }
      }), /*#__PURE__*/_react.default.createElement("div", {
        className: "".concat(prefixCls, "-edit-padding-top"),
        style: {
          height: this.state.cellPaddingTop,
          top: -this.state.cellPaddingTop
        }
      }), /*#__PURE__*/_react.default.createElement("div", {
        className: "".concat(prefixCls, "-edit-padding-bottom"),
        style: {
          height: this.state.cellPaddingBottom,
          bottom: -this.state.cellPaddingBottom
        }
      }), this.state.editState === 'none' ? void 0 : /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/_react.default.createElement(_reactEventInjector.EventInjector, {
        onWheel: this.onWheel,
        settings: {
          capture: true,
          passive: false
        }
      }, /*#__PURE__*/_react.default.createElement("div", {
        className: "".concat(prefixCls, "-edit-popup"),
        id: "".concat(this.componentUuid, "-popup"),
        onWheelCapture: function onWheelCapture(e) {
          return (0, _utils.preventEvent)(e);
        }
      }, /*#__PURE__*/_react.default.createElement("div", {
        className: "".concat(prefixCls, "-edit-popup-body"),
        style: {
          left: this.state.cellLeft,
          right: 0,
          top: this.state.cellTop,
          bottom: 0
        }
      }, this.renderEditDate()))), document.body));
    }
  }, {
    key: "render",
    value: function render() {
      var options = this.props.schema.options;

      if (!this.configured) {
        return /*#__PURE__*/_react.default.createElement(_alert.default, {
          message: "\u672A\u6B63\u786E\u914D\u7F6E\u5B57\u6BB5",
          showIcon: true,
          type: "error"
        });
      }

      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
        ref: this.$main,
        className: (0, _classnames.default)("".concat(prefixCls, "-main"), _defineProperty({}, "".concat(prefixCls, "-editable"), this.props.editable)),
        tabIndex: 0,
        onDoubleClick: this.onDoubleClick,
        onKeyDown: this.onKeyDown
      }, options.mode === 'basic' ? (0, _moment.default)(this.basicValue).format(options.format) : this.rangeValue.map(function (v) {
        return (0, _moment.default)(v).format(options.format);
      }).join(' - '), this.renderEdit()), /*#__PURE__*/_react.default.createElement("div", {
        className: "".concat(prefixCls, "-focus-border")
      }));
    }
  }]);

  return DTCDate;
}(_react.default.PureComponent);

exports.default = DTCDate;

_defineProperty(DTCDate, "componentName", 'date-picker');

_defineProperty(DTCDate, "schema", {
  type: 'object',
  properties: {
    mode: {
      enum: ['basic', 'range']
    },
    parts: {
      type: 'array',
      items: {
        type: 'object',
        properties: {
          dataIndex: {
            anyOf: [{
              type: 'string'
            }, {
              type: 'array',
              items: {
                type: 'string'
              }
            }]
          }
        }
      }
    },
    format: {
      type: 'string'
    }
  }
});