useFilledProps.js 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
  1. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  2. import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
  3. import { warning } from 'rc-util';
  4. import * as React from 'react';
  5. import useLocale from "../../hooks/useLocale";
  6. import { fillShowTimeConfig, getTimeProps } from "../../hooks/useTimeConfig";
  7. import { toArray } from "../../utils/miscUtil";
  8. import { fillClearIcon } from "../Selector/hooks/useClearIcon";
  9. import useDisabledBoundary from "./useDisabledBoundary";
  10. import { useFieldFormat } from "./useFieldFormat";
  11. import useInputReadOnly from "./useInputReadOnly";
  12. import useInvalidate from "./useInvalidate";
  13. function useList(value) {
  14. var fillMode = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
  15. var values = React.useMemo(function () {
  16. var list = value ? toArray(value) : value;
  17. if (fillMode && list) {
  18. list[1] = list[1] || list[0];
  19. }
  20. return list;
  21. }, [value, fillMode]);
  22. return values;
  23. }
  24. /**
  25. * Align the outer props with unique typed and fill undefined props.
  26. * This is shared with both RangePicker and Picker. This will do:
  27. * - Convert `value` & `defaultValue` to array
  28. * - handle the legacy props fill like `clearIcon` + `allowClear` = `clearIcon`
  29. */
  30. export default function useFilledProps(props, updater) {
  31. var generateConfig = props.generateConfig,
  32. locale = props.locale,
  33. _props$picker = props.picker,
  34. picker = _props$picker === void 0 ? 'date' : _props$picker,
  35. _props$prefixCls = props.prefixCls,
  36. prefixCls = _props$prefixCls === void 0 ? 'rc-picker' : _props$prefixCls,
  37. _props$styles = props.styles,
  38. styles = _props$styles === void 0 ? {} : _props$styles,
  39. _props$classNames = props.classNames,
  40. classNames = _props$classNames === void 0 ? {} : _props$classNames,
  41. _props$order = props.order,
  42. order = _props$order === void 0 ? true : _props$order,
  43. _props$components = props.components,
  44. components = _props$components === void 0 ? {} : _props$components,
  45. inputRender = props.inputRender,
  46. allowClear = props.allowClear,
  47. clearIcon = props.clearIcon,
  48. needConfirm = props.needConfirm,
  49. multiple = props.multiple,
  50. format = props.format,
  51. inputReadOnly = props.inputReadOnly,
  52. disabledDate = props.disabledDate,
  53. minDate = props.minDate,
  54. maxDate = props.maxDate,
  55. showTime = props.showTime,
  56. value = props.value,
  57. defaultValue = props.defaultValue,
  58. pickerValue = props.pickerValue,
  59. defaultPickerValue = props.defaultPickerValue;
  60. var values = useList(value);
  61. var defaultValues = useList(defaultValue);
  62. var pickerValues = useList(pickerValue);
  63. var defaultPickerValues = useList(defaultPickerValue);
  64. // ======================== Picker ========================
  65. /** Almost same as `picker`, but add `datetime` for `date` with `showTime` */
  66. var internalPicker = picker === 'date' && showTime ? 'datetime' : picker;
  67. /** The picker is `datetime` or `time` */
  68. var multipleInteractivePicker = internalPicker === 'time' || internalPicker === 'datetime';
  69. var complexPicker = multipleInteractivePicker || multiple;
  70. var mergedNeedConfirm = needConfirm !== null && needConfirm !== void 0 ? needConfirm : multipleInteractivePicker;
  71. // ========================== Time ==========================
  72. // Auto `format` need to check `showTime.showXXX` first.
  73. // And then merge the `locale` into `mergedShowTime`.
  74. var _getTimeProps = getTimeProps(props),
  75. _getTimeProps2 = _slicedToArray(_getTimeProps, 4),
  76. timeProps = _getTimeProps2[0],
  77. localeTimeProps = _getTimeProps2[1],
  78. showTimeFormat = _getTimeProps2[2],
  79. propFormat = _getTimeProps2[3];
  80. // ======================= Locales ========================
  81. var mergedLocale = useLocale(locale, localeTimeProps);
  82. var mergedShowTime = React.useMemo(function () {
  83. return fillShowTimeConfig(internalPicker, showTimeFormat, propFormat, timeProps, mergedLocale);
  84. }, [internalPicker, showTimeFormat, propFormat, timeProps, mergedLocale]);
  85. // ======================= Warning ========================
  86. if (process.env.NODE_ENV !== 'production' && picker === 'time') {
  87. if (['disabledHours', 'disabledMinutes', 'disabledSeconds'].some(function (key) {
  88. return props[key];
  89. })) {
  90. warning(false, "'disabledHours', 'disabledMinutes', 'disabledSeconds' will be removed in the next major version, please use 'disabledTime' instead.");
  91. }
  92. }
  93. // ======================== Props =========================
  94. var filledProps = React.useMemo(function () {
  95. return _objectSpread(_objectSpread({}, props), {}, {
  96. prefixCls: prefixCls,
  97. locale: mergedLocale,
  98. picker: picker,
  99. styles: styles,
  100. classNames: classNames,
  101. order: order,
  102. components: _objectSpread({
  103. input: inputRender
  104. }, components),
  105. clearIcon: fillClearIcon(prefixCls, allowClear, clearIcon),
  106. showTime: mergedShowTime,
  107. value: values,
  108. defaultValue: defaultValues,
  109. pickerValue: pickerValues,
  110. defaultPickerValue: defaultPickerValues
  111. }, updater === null || updater === void 0 ? void 0 : updater());
  112. }, [props]);
  113. // ======================== Format ========================
  114. var _useFieldFormat = useFieldFormat(internalPicker, mergedLocale, format),
  115. _useFieldFormat2 = _slicedToArray(_useFieldFormat, 2),
  116. formatList = _useFieldFormat2[0],
  117. maskFormat = _useFieldFormat2[1];
  118. // ======================= ReadOnly =======================
  119. var mergedInputReadOnly = useInputReadOnly(formatList, inputReadOnly, multiple);
  120. // ======================= Boundary =======================
  121. var disabledBoundaryDate = useDisabledBoundary(generateConfig, locale, disabledDate, minDate, maxDate);
  122. // ====================== Invalidate ======================
  123. var isInvalidateDate = useInvalidate(generateConfig, picker, disabledBoundaryDate, mergedShowTime);
  124. // ======================== Merged ========================
  125. var mergedProps = React.useMemo(function () {
  126. return _objectSpread(_objectSpread({}, filledProps), {}, {
  127. needConfirm: mergedNeedConfirm,
  128. inputReadOnly: mergedInputReadOnly,
  129. disabledDate: disabledBoundaryDate
  130. });
  131. }, [filledProps, mergedNeedConfirm, mergedInputReadOnly, disabledBoundaryDate]);
  132. return [mergedProps, internalPicker, complexPicker, formatList, maskFormat, isInvalidateDate];
  133. }