zarm/lib/date-picker-view/DatePickerView.js

基于 React 的移动端UI库

"use strict";

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

var _typeof = require("@babel/runtime/helpers/typeof");

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

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _ahooks = require("ahooks");

var _clamp = _interopRequireDefault(require("lodash/clamp"));

var _isEqual = _interopRequireDefault(require("lodash/isEqual"));

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

var _pickerView = _interopRequireDefault(require("../picker-view"));

var _utils = require("../picker-view/utils");

var _interface = require("./interface");

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

function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }

function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) { if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } } return n.default = e, t && t.set(e, n), n; }

var currentYear = new Date().getFullYear();
var DatePickerView = /*#__PURE__*/React.forwardRef(function (props, ref) {
  var _props$min = props.min,
      min = _props$min === void 0 ? new Date(new Date().setFullYear(currentYear - 10)) : _props$min,
      _props$max = props.max,
      max = _props$max === void 0 ? new Date(new Date().setFullYear(currentYear + 10)) : _props$max,
      _props$columnType = props.columnType,
      columnType = _props$columnType === void 0 ? [_interface.COLUMN_TYPE.YEAR, _interface.COLUMN_TYPE.MONTH, _interface.COLUMN_TYPE.DAY] : _props$columnType,
      value = props.value,
      defaultValue = props.defaultValue,
      filter = props.filter,
      renderLabel = props.renderLabel,
      onChange = props.onChange,
      rest = (0, _objectWithoutProperties2.default)(props, ["min", "max", "columnType", "value", "defaultValue", "filter", "renderLabel", "onChange"]);
  var pickerViewRef = React.useRef(null);

  var _React$useState = React.useState(value || defaultValue),
      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
      innerValue = _React$useState2[0],
      setInnerValue = _React$useState2[1];

  var prevColumnType = React.useRef(columnType);
  var defaultRenderLabel = (0, _utils2.useRenderLabel)(renderLabel);
  (0, _ahooks.useUpdateEffect)(function () {
    if ((0, _isEqual.default)(props.value, innerValue)) return;
    setInnerValue(props.value);
  }, [props.value]);
  React.useEffect(function () {
    prevColumnType.current = columnType;
  }, [columnType]);
  var now = React.useMemo(function () {
    return new Date();
  }, []);
  var currentValue = React.useMemo(function () {
    var date = innerValue || now;
    return new Date((0, _clamp.default)(date.getTime(), min.getTime(), max.getTime()));
  }, [innerValue, min, max, columnType]);
  var pickerValue = React.useMemo(function () {
    return (0, _utils2.dateToNumberArray)(currentValue, columnType);
  }, [currentValue, columnType]);
  var wheelDefaultValue = React.useMemo(function () {
    return (0, _utils2.dateToNumberArray)(props.wheelDefaultValue, columnType);
  }, [props.wheelDefaultValue, columnType]);
  var handleChange = React.useCallback(function (changedPickerValue, items, level) {
    if (prevColumnType.current[level] !== columnType[level]) return;
    var date = (0, _utils2.numberArrayToDate)(currentValue, changedPickerValue, columnType, level);
    setInnerValue(date);
    onChange === null || onChange === void 0 ? void 0 : onChange(date, items, level);
  }, [currentValue, prevColumnType, columnType]);

  var _resolved = (0, _utils.resolved)({
    dataSource: (0, _utils2.generateDatePickerColumns)(currentValue, min, max, columnType, defaultRenderLabel, filter),
    value: pickerValue
  }),
      items = _resolved.items,
      columns = _resolved.columns;

  React.useImperativeHandle(ref, function () {
    var _pickerViewRef$curren;

    return {
      value: currentValue,
      items: items,
      reset: (_pickerViewRef$curren = pickerViewRef.current) === null || _pickerViewRef$curren === void 0 ? void 0 : _pickerViewRef$curren.reset
    };
  });
  return /*#__PURE__*/React.createElement(_pickerView.default, (0, _extends2.default)({}, rest, {
    value: pickerValue,
    wheelDefaultValue: wheelDefaultValue,
    dataSource: columns,
    onChange: handleChange
  }));
});
var _default = DatePickerView;
exports.default = _default;