context.js 2.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  1. import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
  2. import useEvent from "rc-util/es/hooks/useEvent";
  3. import useLayoutEffect from "rc-util/es/hooks/useLayoutEffect";
  4. import isEqual from "rc-util/es/isEqual";
  5. import * as React from 'react';
  6. import { unstable_batchedUpdates } from 'react-dom';
  7. export function createContext(defaultValue) {
  8. var Context = /*#__PURE__*/React.createContext(undefined);
  9. var Provider = function Provider(_ref) {
  10. var value = _ref.value,
  11. children = _ref.children;
  12. var valueRef = React.useRef(value);
  13. valueRef.current = value;
  14. var _React$useState = React.useState(function () {
  15. return {
  16. getValue: function getValue() {
  17. return valueRef.current;
  18. },
  19. listeners: new Set()
  20. };
  21. }),
  22. _React$useState2 = _slicedToArray(_React$useState, 1),
  23. context = _React$useState2[0];
  24. useLayoutEffect(function () {
  25. unstable_batchedUpdates(function () {
  26. context.listeners.forEach(function (listener) {
  27. listener(value);
  28. });
  29. });
  30. }, [value]);
  31. return /*#__PURE__*/React.createElement(Context.Provider, {
  32. value: context
  33. }, children);
  34. };
  35. return {
  36. Context: Context,
  37. Provider: Provider,
  38. defaultValue: defaultValue
  39. };
  40. }
  41. /** e.g. useSelect(userContext) => user */
  42. /** e.g. useSelect(userContext, user => user.name) => user.name */
  43. /** e.g. useSelect(userContext, ['name', 'age']) => user { name, age } */
  44. /** e.g. useSelect(userContext, 'name') => user.name */
  45. export function useContext(holder, selector) {
  46. var eventSelector = useEvent(typeof selector === 'function' ? selector : function (ctx) {
  47. if (selector === undefined) {
  48. return ctx;
  49. }
  50. if (!Array.isArray(selector)) {
  51. return ctx[selector];
  52. }
  53. var obj = {};
  54. selector.forEach(function (key) {
  55. obj[key] = ctx[key];
  56. });
  57. return obj;
  58. });
  59. var context = React.useContext(holder === null || holder === void 0 ? void 0 : holder.Context);
  60. var _ref2 = context || {},
  61. listeners = _ref2.listeners,
  62. getValue = _ref2.getValue;
  63. var valueRef = React.useRef();
  64. valueRef.current = eventSelector(context ? getValue() : holder === null || holder === void 0 ? void 0 : holder.defaultValue);
  65. var _React$useState3 = React.useState({}),
  66. _React$useState4 = _slicedToArray(_React$useState3, 2),
  67. forceUpdate = _React$useState4[1];
  68. useLayoutEffect(function () {
  69. if (!context) {
  70. return;
  71. }
  72. function trigger(nextValue) {
  73. var nextSelectorValue = eventSelector(nextValue);
  74. if (!isEqual(valueRef.current, nextSelectorValue, true)) {
  75. forceUpdate({});
  76. }
  77. }
  78. listeners.add(trigger);
  79. return function () {
  80. listeners.delete(trigger);
  81. };
  82. }, [context]);
  83. return valueRef.current;
  84. }