StyleContext.js 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  2. import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
  3. var _excluded = ["children"];
  4. import useMemo from "rc-util/es/hooks/useMemo";
  5. import isEqual from "rc-util/es/isEqual";
  6. import * as React from 'react';
  7. import CacheEntity from "./Cache";
  8. export var ATTR_TOKEN = 'data-token-hash';
  9. export var ATTR_MARK = 'data-css-hash';
  10. export var ATTR_CACHE_PATH = 'data-cache-path';
  11. // Mark css-in-js instance in style element
  12. export var CSS_IN_JS_INSTANCE = '__cssinjs_instance__';
  13. export function createCache() {
  14. var cssinjsInstanceId = Math.random().toString(12).slice(2);
  15. // Tricky SSR: Move all inline style to the head.
  16. // PS: We do not recommend tricky mode.
  17. if (typeof document !== 'undefined' && document.head && document.body) {
  18. var styles = document.body.querySelectorAll("style[".concat(ATTR_MARK, "]")) || [];
  19. var firstChild = document.head.firstChild;
  20. Array.from(styles).forEach(function (style) {
  21. style[CSS_IN_JS_INSTANCE] = style[CSS_IN_JS_INSTANCE] || cssinjsInstanceId;
  22. // Not force move if no head
  23. if (style[CSS_IN_JS_INSTANCE] === cssinjsInstanceId) {
  24. document.head.insertBefore(style, firstChild);
  25. }
  26. });
  27. // Deduplicate of moved styles
  28. var styleHash = {};
  29. Array.from(document.querySelectorAll("style[".concat(ATTR_MARK, "]"))).forEach(function (style) {
  30. var hash = style.getAttribute(ATTR_MARK);
  31. if (styleHash[hash]) {
  32. if (style[CSS_IN_JS_INSTANCE] === cssinjsInstanceId) {
  33. var _style$parentNode;
  34. (_style$parentNode = style.parentNode) === null || _style$parentNode === void 0 || _style$parentNode.removeChild(style);
  35. }
  36. } else {
  37. styleHash[hash] = true;
  38. }
  39. });
  40. }
  41. return new CacheEntity(cssinjsInstanceId);
  42. }
  43. var StyleContext = /*#__PURE__*/React.createContext({
  44. hashPriority: 'low',
  45. cache: createCache(),
  46. defaultCache: true
  47. });
  48. export var StyleProvider = function StyleProvider(props) {
  49. var children = props.children,
  50. restProps = _objectWithoutProperties(props, _excluded);
  51. var parentContext = React.useContext(StyleContext);
  52. var context = useMemo(function () {
  53. var mergedContext = _objectSpread({}, parentContext);
  54. Object.keys(restProps).forEach(function (key) {
  55. var value = restProps[key];
  56. if (restProps[key] !== undefined) {
  57. mergedContext[key] = value;
  58. }
  59. });
  60. var cache = restProps.cache;
  61. mergedContext.cache = mergedContext.cache || createCache();
  62. mergedContext.defaultCache = !cache && parentContext.defaultCache;
  63. return mergedContext;
  64. }, [parentContext, restProps], function (prev, next) {
  65. return !isEqual(prev[0], next[0], true) || !isEqual(prev[1], next[1], true);
  66. });
  67. return /*#__PURE__*/React.createElement(StyleContext.Provider, {
  68. value: context
  69. }, children);
  70. };
  71. export default StyleContext;