StyleContext.js 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. var _typeof = require("@babel/runtime/helpers/typeof");
  4. Object.defineProperty(exports, "__esModule", {
  5. value: true
  6. });
  7. exports.StyleProvider = exports.CSS_IN_JS_INSTANCE = exports.ATTR_TOKEN = exports.ATTR_MARK = exports.ATTR_CACHE_PATH = void 0;
  8. exports.createCache = createCache;
  9. exports.default = void 0;
  10. var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
  11. var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
  12. var _useMemo = _interopRequireDefault(require("rc-util/lib/hooks/useMemo"));
  13. var _isEqual = _interopRequireDefault(require("rc-util/lib/isEqual"));
  14. var React = _interopRequireWildcard(require("react"));
  15. var _Cache = _interopRequireDefault(require("./Cache"));
  16. var _excluded = ["children"];
  17. function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
  18. function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
  19. var ATTR_TOKEN = exports.ATTR_TOKEN = 'data-token-hash';
  20. var ATTR_MARK = exports.ATTR_MARK = 'data-css-hash';
  21. var ATTR_CACHE_PATH = exports.ATTR_CACHE_PATH = 'data-cache-path';
  22. // Mark css-in-js instance in style element
  23. var CSS_IN_JS_INSTANCE = exports.CSS_IN_JS_INSTANCE = '__cssinjs_instance__';
  24. function createCache() {
  25. var cssinjsInstanceId = Math.random().toString(12).slice(2);
  26. // Tricky SSR: Move all inline style to the head.
  27. // PS: We do not recommend tricky mode.
  28. if (typeof document !== 'undefined' && document.head && document.body) {
  29. var styles = document.body.querySelectorAll("style[".concat(ATTR_MARK, "]")) || [];
  30. var firstChild = document.head.firstChild;
  31. Array.from(styles).forEach(function (style) {
  32. style[CSS_IN_JS_INSTANCE] = style[CSS_IN_JS_INSTANCE] || cssinjsInstanceId;
  33. // Not force move if no head
  34. if (style[CSS_IN_JS_INSTANCE] === cssinjsInstanceId) {
  35. document.head.insertBefore(style, firstChild);
  36. }
  37. });
  38. // Deduplicate of moved styles
  39. var styleHash = {};
  40. Array.from(document.querySelectorAll("style[".concat(ATTR_MARK, "]"))).forEach(function (style) {
  41. var hash = style.getAttribute(ATTR_MARK);
  42. if (styleHash[hash]) {
  43. if (style[CSS_IN_JS_INSTANCE] === cssinjsInstanceId) {
  44. var _style$parentNode;
  45. (_style$parentNode = style.parentNode) === null || _style$parentNode === void 0 || _style$parentNode.removeChild(style);
  46. }
  47. } else {
  48. styleHash[hash] = true;
  49. }
  50. });
  51. }
  52. return new _Cache.default(cssinjsInstanceId);
  53. }
  54. var StyleContext = /*#__PURE__*/React.createContext({
  55. hashPriority: 'low',
  56. cache: createCache(),
  57. defaultCache: true
  58. });
  59. var StyleProvider = exports.StyleProvider = function StyleProvider(props) {
  60. var children = props.children,
  61. restProps = (0, _objectWithoutProperties2.default)(props, _excluded);
  62. var parentContext = React.useContext(StyleContext);
  63. var context = (0, _useMemo.default)(function () {
  64. var mergedContext = (0, _objectSpread2.default)({}, parentContext);
  65. Object.keys(restProps).forEach(function (key) {
  66. var value = restProps[key];
  67. if (restProps[key] !== undefined) {
  68. mergedContext[key] = value;
  69. }
  70. });
  71. var cache = restProps.cache;
  72. mergedContext.cache = mergedContext.cache || createCache();
  73. mergedContext.defaultCache = !cache && parentContext.defaultCache;
  74. return mergedContext;
  75. }, [parentContext, restProps], function (prev, next) {
  76. return !(0, _isEqual.default)(prev[0], next[0], true) || !(0, _isEqual.default)(prev[1], next[1], true);
  77. });
  78. return /*#__PURE__*/React.createElement(StyleContext.Provider, {
  79. value: context
  80. }, children);
  81. };
  82. var _default = exports.default = StyleContext;