zarm-web/lib/time-picker/TimeSelect.js

基于 React 的桌面端UI库

"use strict";

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

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

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

var _rAF = _interopRequireDefault(require("../utils/rAF"));

var _select = _interopRequireDefault(require("../select"));

var _createContext = require("../form/createContext");

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

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

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; if (obj != null) { var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

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

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } 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 _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

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); 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 } }); if (superClass) _setPrototypeOf(subClass, superClass); }

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

var scrollTo = function scrollTo(element, to, duration) {
  if (duration <= 0) {
    element.scrollTop = to;
    return;
  }

  var difference = to - element.scrollTop;
  var perTick = difference / duration * 10;

  _rAF.default.rAF(function () {
    element.scrollTop += perTick;

    if (element.scrollTop === to) {
      return;
    }

    scrollTo(element, to, duration - 10);
  });
};

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

  _createClass(TimeSelect, null, [{
    key: "scrollToSelected",
    value: function scrollToSelected(element, selectIndex, duration) {
      // eslint-disable-next-line react/no-find-dom-node
      var selectDom = _reactDom.default.findDOMNode(element).children[0];

      var list = selectDom.querySelector('ul');
      var topOption = list.children[selectIndex];
      var to = topOption.offsetTop;

      if (!list) {
        return;
      }

      scrollTo(selectDom, to, duration);
    }
  }]);

  function TimeSelect(props) {
    var _this;

    _classCallCheck(this, TimeSelect);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(TimeSelect).call(this, props));
    _this.hourDom = void 0;
    _this.minuteDom = void 0;
    _this.secondDom = void 0;
    _this.state = {
      selectH: [],
      selectedH: [],
      selectM: [],
      selectedM: [],
      selectS: [],
      selectedS: []
    };
    return _this;
  }

  _createClass(TimeSelect, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.selectInit();
      this.setDataFromValue(this.props);
    }
  }, {
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(nextProps) {
      this.setDataFromValue(nextProps);
    }
  }, {
    key: "onSelect",
    value: function onSelect(type, element, arr, selectIndex) {
      var handleFieldChange = this.context.handleFieldChange;
      var onChange = this.props.onChange;
      var _this$state = this.state,
          selectedH = _this$state.selectedH,
          selectedM = _this$state.selectedM,
          selectedS = _this$state.selectedS;

      if (type === 'H') {
        selectedH = arr;
      }

      if (type === 'M') {
        selectedM = arr;
      }

      if (type === 'S') {
        selectedS = arr;
      }

      if (!(0, _utils.isEmpty)(this.context)) {
        handleFieldChange();
      }

      this.setState({
        selectedH: selectedH,
        selectedM: selectedM,
        selectedS: selectedS
      });
      var rVal = "".concat(selectedH[0], ":").concat(selectedM[0], ":").concat(selectedS[0]);
      TimeSelect.scrollToSelected(element, selectIndex, 120);
      onChange(rVal);
    }
  }, {
    key: "setDataFromValue",
    value: function setDataFromValue(props) {
      var arrTime = props.value.split(':');
      this.setState({
        selectedH: [arrTime[0]],
        selectedM: [arrTime[1]],
        selectedS: [arrTime[2]]
      });
    }
  }, {
    key: "selectInit",
    value: function selectInit() {
      var _this$state2 = this.state,
          selectH = _this$state2.selectH,
          selectM = _this$state2.selectM,
          selectS = _this$state2.selectS;

      for (var i = 0; i < 60; i++) {
        var num = i < 10 ? "0".concat(i) : "".concat(i);

        if (i < 24) {
          selectH.push(num);
        }

        selectM.push(num);
        selectS.push(num);
      }

      this.setState({
        selectH: selectH,
        selectM: selectM,
        selectS: selectS
      });
    }
  }, {
    key: "render",
    value: function render() {
      var _this2 = this;

      var _this$state3 = this.state,
          selectH = _this$state3.selectH,
          selectM = _this$state3.selectM,
          selectS = _this$state3.selectS,
          selectedH = _this$state3.selectedH,
          selectedS = _this$state3.selectedS,
          selectedM = _this$state3.selectedM;
      return _react.default.createElement("div", {
        className: "za-time__select"
      }, _react.default.createElement(_select.default.Multiple, {
        value: selectedH,
        ref: function ref(el) {
          _this2.hourDom = el;
        },
        onChange: function onChange(_, row) {
          return _this2.onSelect('H', _this2.hourDom, [row.value], row.index);
        }
      }, selectH && selectH.map(function (option, index) {
        return _react.default.createElement(_select.default.Option, {
          key: index.toString(),
          value: option
        }, option);
      })), _react.default.createElement(_select.default.Multiple, {
        value: selectedM,
        ref: function ref(el) {
          _this2.minuteDom = el;
        },
        onChange: function onChange(_, row) {
          return _this2.onSelect('M', _this2.minuteDom, [row.value], row.index);
        }
      }, selectM && selectM.map(function (option, index) {
        return _react.default.createElement(_select.default.Option, {
          key: index.toString(),
          value: option
        }, option);
      })), _react.default.createElement(_select.default.Multiple, {
        value: selectedS,
        ref: function ref(el) {
          _this2.secondDom = el;
        },
        onChange: function onChange(_, row) {
          return _this2.onSelect('S', _this2.secondDom, [row.value], row.index);
        }
      }, selectS && selectS.map(function (option, index) {
        return _react.default.createElement(_select.default.Option, {
          key: index.toString(),
          value: option
        }, option);
      })));
    }
  }]);

  return TimeSelect;
}(_react.Component);

TimeSelect.contextType = _createContext.FormItemContext;
var _default = TimeSelect;
exports.default = _default;