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

基于 React 的移动端UI库

import _extends from "@babel/runtime/helpers/extends";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import { useUpdateEffect } from 'ahooks';
import clamp from 'lodash/clamp';
import isEqual from 'lodash/isEqual';
import * as React from 'react';
import PickerView from '../picker-view';
import { resolved } from '../picker-view/utils';
import { COLUMN_TYPE } from './interface';
import { dateToNumberArray, generateDatePickerColumns, numberArrayToDate, useRenderLabel } from './utils';
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 ? [COLUMN_TYPE.YEAR, COLUMN_TYPE.MONTH, COLUMN_TYPE.DAY] : _props$columnType,
      value = props.value,
      defaultValue = props.defaultValue,
      filter = props.filter,
      renderLabel = props.renderLabel,
      onChange = props.onChange,
      rest = _objectWithoutProperties(props, ["min", "max", "columnType", "value", "defaultValue", "filter", "renderLabel", "onChange"]);

  var pickerViewRef = React.useRef(null);

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

  var prevColumnType = React.useRef(columnType);
  var defaultRenderLabel = useRenderLabel(renderLabel);
  useUpdateEffect(function () {
    if (isEqual(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(clamp(date.getTime(), min.getTime(), max.getTime()));
  }, [innerValue, min, max, columnType]);
  var pickerValue = React.useMemo(function () {
    return dateToNumberArray(currentValue, columnType);
  }, [currentValue, columnType]);
  var wheelDefaultValue = React.useMemo(function () {
    return dateToNumberArray(props.wheelDefaultValue, columnType);
  }, [props.wheelDefaultValue, columnType]);
  var handleChange = React.useCallback(function (changedPickerValue, items, level) {
    if (prevColumnType.current[level] !== columnType[level]) return;
    var date = numberArrayToDate(currentValue, changedPickerValue, columnType, level);
    setInnerValue(date);
    onChange === null || onChange === void 0 ? void 0 : onChange(date, items, level);
  }, [currentValue, prevColumnType, columnType]);

  var _resolved = resolved({
    dataSource: 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, _extends({}, rest, {
    value: pickerValue,
    wheelDefaultValue: wheelDefaultValue,
    dataSource: columns,
    onChange: handleChange
  }));
});
export default DatePickerView;