useMergedState.js 2.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
  3. Object.defineProperty(exports, "__esModule", {
  4. value: true
  5. });
  6. exports.default = useMergedState;
  7. var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
  8. var _useEvent = _interopRequireDefault(require("./useEvent"));
  9. var _useLayoutEffect = require("./useLayoutEffect");
  10. var _useState5 = _interopRequireDefault(require("./useState"));
  11. /** We only think `undefined` is empty */
  12. function hasValue(value) {
  13. return value !== undefined;
  14. }
  15. /**
  16. * Similar to `useState` but will use props value if provided.
  17. * Note that internal use rc-util `useState` hook.
  18. */
  19. function useMergedState(defaultStateValue, option) {
  20. var _ref = option || {},
  21. defaultValue = _ref.defaultValue,
  22. value = _ref.value,
  23. onChange = _ref.onChange,
  24. postState = _ref.postState;
  25. // ======================= Init =======================
  26. var _useState = (0, _useState5.default)(function () {
  27. if (hasValue(value)) {
  28. return value;
  29. } else if (hasValue(defaultValue)) {
  30. return typeof defaultValue === 'function' ? defaultValue() : defaultValue;
  31. } else {
  32. return typeof defaultStateValue === 'function' ? defaultStateValue() : defaultStateValue;
  33. }
  34. }),
  35. _useState2 = (0, _slicedToArray2.default)(_useState, 2),
  36. innerValue = _useState2[0],
  37. setInnerValue = _useState2[1];
  38. var mergedValue = value !== undefined ? value : innerValue;
  39. var postMergedValue = postState ? postState(mergedValue) : mergedValue;
  40. // ====================== Change ======================
  41. var onChangeFn = (0, _useEvent.default)(onChange);
  42. var _useState3 = (0, _useState5.default)([mergedValue]),
  43. _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
  44. prevValue = _useState4[0],
  45. setPrevValue = _useState4[1];
  46. (0, _useLayoutEffect.useLayoutUpdateEffect)(function () {
  47. var prev = prevValue[0];
  48. if (innerValue !== prev) {
  49. onChangeFn(innerValue, prev);
  50. }
  51. }, [prevValue]);
  52. // Sync value back to `undefined` when it from control to un-control
  53. (0, _useLayoutEffect.useLayoutUpdateEffect)(function () {
  54. if (!hasValue(value)) {
  55. setInnerValue(value);
  56. }
  57. }, [value]);
  58. // ====================== Update ======================
  59. var triggerChange = (0, _useEvent.default)(function (updater, ignoreDestroy) {
  60. setInnerValue(updater, ignoreDestroy);
  61. setPrevValue([mergedValue], ignoreDestroy);
  62. });
  63. return [postMergedValue, triggerChange];
  64. }