useInputProps.js 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173
  1. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  2. import { warning } from 'rc-util';
  3. import pickAttrs from "rc-util/es/pickAttrs";
  4. import * as React from 'react';
  5. import { formatValue } from "../../../utils/dateUtil";
  6. export default function useInputProps(props, /** Used for SinglePicker */
  7. postProps) {
  8. var format = props.format,
  9. maskFormat = props.maskFormat,
  10. generateConfig = props.generateConfig,
  11. locale = props.locale,
  12. preserveInvalidOnBlur = props.preserveInvalidOnBlur,
  13. inputReadOnly = props.inputReadOnly,
  14. required = props.required,
  15. ariaRequired = props['aria-required'],
  16. onSubmit = props.onSubmit,
  17. _onFocus = props.onFocus,
  18. _onBlur = props.onBlur,
  19. onInputChange = props.onInputChange,
  20. onInvalid = props.onInvalid,
  21. open = props.open,
  22. onOpenChange = props.onOpenChange,
  23. _onKeyDown = props.onKeyDown,
  24. _onChange = props.onChange,
  25. activeHelp = props.activeHelp,
  26. name = props.name,
  27. autoComplete = props.autoComplete,
  28. id = props.id,
  29. value = props.value,
  30. invalid = props.invalid,
  31. placeholder = props.placeholder,
  32. disabled = props.disabled,
  33. activeIndex = props.activeIndex,
  34. allHelp = props.allHelp,
  35. picker = props.picker;
  36. // ======================== Parser ========================
  37. var parseDate = function parseDate(str, formatStr) {
  38. var parsed = generateConfig.locale.parse(locale.locale, str, [formatStr]);
  39. return parsed && generateConfig.isValidate(parsed) ? parsed : null;
  40. };
  41. // ========================= Text =========================
  42. var firstFormat = format[0];
  43. var getText = React.useCallback(function (date) {
  44. return formatValue(date, {
  45. locale: locale,
  46. format: firstFormat,
  47. generateConfig: generateConfig
  48. });
  49. }, [locale, generateConfig, firstFormat]);
  50. var valueTexts = React.useMemo(function () {
  51. return value.map(getText);
  52. }, [value, getText]);
  53. // ========================= Size =========================
  54. var size = React.useMemo(function () {
  55. var defaultSize = picker === 'time' ? 8 : 10;
  56. var length = typeof firstFormat === 'function' ? firstFormat(generateConfig.getNow()).length : firstFormat.length;
  57. return Math.max(defaultSize, length) + 2;
  58. }, [firstFormat, picker, generateConfig]);
  59. // ======================= Validate =======================
  60. var _validateFormat = function validateFormat(text) {
  61. for (var i = 0; i < format.length; i += 1) {
  62. var singleFormat = format[i];
  63. // Only support string type
  64. if (typeof singleFormat === 'string') {
  65. var parsed = parseDate(text, singleFormat);
  66. if (parsed) {
  67. return parsed;
  68. }
  69. }
  70. }
  71. return false;
  72. };
  73. // ======================== Input =========================
  74. var getInputProps = function getInputProps(index) {
  75. function getProp(propValue) {
  76. return index !== undefined ? propValue[index] : propValue;
  77. }
  78. var pickedAttrs = pickAttrs(props, {
  79. aria: true,
  80. data: true
  81. });
  82. var inputProps = _objectSpread(_objectSpread({}, pickedAttrs), {}, {
  83. // ============== Shared ==============
  84. format: maskFormat,
  85. validateFormat: function validateFormat(text) {
  86. return !!_validateFormat(text);
  87. },
  88. preserveInvalidOnBlur: preserveInvalidOnBlur,
  89. readOnly: inputReadOnly,
  90. required: required,
  91. 'aria-required': ariaRequired,
  92. name: name,
  93. autoComplete: autoComplete,
  94. size: size,
  95. // ============= By Index =============
  96. id: getProp(id),
  97. value: getProp(valueTexts) || '',
  98. invalid: getProp(invalid),
  99. placeholder: getProp(placeholder),
  100. active: activeIndex === index,
  101. helped: allHelp || activeHelp && activeIndex === index,
  102. disabled: getProp(disabled),
  103. onFocus: function onFocus(event) {
  104. _onFocus(event, index);
  105. },
  106. onBlur: function onBlur(event) {
  107. // Blur do not trigger close
  108. // Since it may focus to the popup panel
  109. _onBlur(event, index);
  110. },
  111. onSubmit: onSubmit,
  112. // Get validate text value
  113. onChange: function onChange(text) {
  114. onInputChange();
  115. var parsed = _validateFormat(text);
  116. if (parsed) {
  117. onInvalid(false, index);
  118. _onChange(parsed, index);
  119. return;
  120. }
  121. // Tell outer that the value typed is invalid.
  122. // If text is empty, it means valid.
  123. onInvalid(!!text, index);
  124. },
  125. onHelp: function onHelp() {
  126. onOpenChange(true, {
  127. index: index
  128. });
  129. },
  130. onKeyDown: function onKeyDown(event) {
  131. var prevented = false;
  132. _onKeyDown === null || _onKeyDown === void 0 || _onKeyDown(event, function () {
  133. if (process.env.NODE_ENV !== 'production') {
  134. warning(false, '`preventDefault` callback is deprecated. Please call `event.preventDefault` directly.');
  135. }
  136. prevented = true;
  137. });
  138. if (!event.defaultPrevented && !prevented) {
  139. switch (event.key) {
  140. case 'Escape':
  141. onOpenChange(false, {
  142. index: index
  143. });
  144. break;
  145. case 'Enter':
  146. if (!open) {
  147. onOpenChange(true);
  148. }
  149. break;
  150. }
  151. }
  152. }
  153. }, postProps === null || postProps === void 0 ? void 0 : postProps({
  154. valueTexts: valueTexts
  155. }));
  156. // ============== Clean Up ==============
  157. Object.keys(inputProps).forEach(function (key) {
  158. if (inputProps[key] === undefined) {
  159. delete inputProps[key];
  160. }
  161. });
  162. return inputProps;
  163. };
  164. return [getInputProps, getText];
  165. }