useInputProps.js 6.0 KB

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