@b-design/ui-console-menu/lib/css-var-utils/react/CssVarReader.js

React component for Alibaba Cloud.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _typeof = require("@babel/runtime/helpers/typeof");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.CssVarReader = void 0;
exports.useCssVar = useCssVar;
exports.withCssVarReader = void 0;

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _react = _interopRequireWildcard(require("react"));

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

/**
 * 使用 getComputedStyle(element).getPropertyValue(varName)
 * 来读取 css var 的值
 */
var ctx = /*#__PURE__*/_react.default.createContext({});

var style = {
  display: 'none'
}; // TODO: support reading from document.documentElement
// which can avoid creating a dummy div

var CssVarReader = function CssVarReader(_ref) {
  var varNames = _ref.varNames,
      children = _ref.children;
  var elRef = (0, _react.useRef)(null);

  var _useState = (0, _react.useState)(null),
      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
      dict = _useState2[0],
      setDict = _useState2[1];

  (0, _react.useLayoutEffect)(function () {
    if (!elRef.current) {
      return;
    }

    var computedStyle = getComputedStyle(elRef.current);
    var nextDict = {};
    var hasDiff = false;
    varNames.forEach(function (varName) {
      nextDict[varName] = computedStyle.getPropertyValue(varName);

      if (!dict || dict[varName] !== nextDict[varName]) {
        hasDiff = true;
      }
    });

    if (hasDiff) {
      setDict(nextDict);
    }
  }, [varNames]);
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
    ref: elRef,
    className: "css-var-reader",
    style: style
  }, "[css-var-utils] css variables reader"), dict && /*#__PURE__*/_react.default.createElement(ctx.Provider, {
    value: dict
  }, children));
};

exports.CssVarReader = CssVarReader;

var withCssVarReader = function withCssVarReader(varNames, Wrapped) {
  var CssVarReaderHOC = function CssVarReaderHOC(props) {
    return /*#__PURE__*/_react.default.createElement(CssVarReader, {
      varNames: varNames
    }, /*#__PURE__*/_react.default.createElement(Wrapped, props));
  };

  return CssVarReaderHOC;
};

exports.withCssVarReader = withCssVarReader;

function useCssVar(varName) {
  var dict = (0, _react.useContext)(ctx);

  if (Array.isArray(varName)) {
    return varName.map(function (n) {
      return dict[n];
    });
  }

  return dict[varName];
}