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

React component for Alibaba Cloud.

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";

/**
 * 使用 getComputedStyle(element).getPropertyValue(varName)
 * 来读取 css var 的值
 */
import React, { useRef, useLayoutEffect, useState, useContext } from 'react';
var ctx = /*#__PURE__*/React.createContext({});
var style = {
  display: 'none'
}; // TODO: support reading from document.documentElement
// which can avoid creating a dummy div

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

  var _useState = useState(null),
      _useState2 = _slicedToArray(_useState, 2),
      dict = _useState2[0],
      setDict = _useState2[1];

  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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    ref: elRef,
    className: "css-var-reader",
    style: style
  }, "[css-var-utils] css variables reader"), dict && /*#__PURE__*/React.createElement(ctx.Provider, {
    value: dict
  }, children));
};
export var withCssVarReader = function withCssVarReader(varNames, Wrapped) {
  var CssVarReaderHOC = function CssVarReaderHOC(props) {
    return /*#__PURE__*/React.createElement(CssVarReader, {
      varNames: varNames
    }, /*#__PURE__*/React.createElement(Wrapped, props));
  };

  return CssVarReaderHOC;
};
export function useCssVar(varName) {
  var dict = useContext(ctx);

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

  return dict[varName];
}