@skbkontur/react-ui 0.0.0-444dd4e7b3 → 0.0.0-48840c3b9c

package/internal/ThemeShowcase/ThemeShowcase/ThemeShowcase.js

@@ -10,10 +10,11 @@ import { Sticky } from "../../../components/Sticky";
 import * as ColorFunctions from "../../../lib/styles/ColorFunctions";
 import { Tooltip } from "../../../components/Tooltip";
 import { IS_PROXY_SUPPORTED } from "../../../lib/Supports";
-import { cx } from "../../../lib/theming/Emotion";
+import { EmotionConsumer, useEmotion } from "../../../lib/theming/Emotion";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { useTheme } from "../../../lib/theming/useTheme";
 import { ALL_USED_VARIABLES, CALLS_COUNT, COMPONENT_DESCRIPTIONS, COMPONENT_DESCRIPTIONS_BY_VARIABLE, EXECUTION_TIME } from "../VariablesCollector";
-import { styles } from "../ThemeShowcase.styles";
+import { getStyles } from "../ThemeShowcase.styles";
 var EMPTY_ARRAY = [];
 var ALL_VARIABLES = Object.keys(defaultVariables);
 export var ThemeShowcase = /*#__PURE__*/function (_React$Component) {
@@ -87,37 +88,41 @@ export var ThemeShowcase = /*#__PURE__*/function (_React$Component) {
     var isDebugMode = this.props.isDebugMode;
     var callsCount = isDebugMode ? "(" + CALLS_COUNT + " \u0432\u044B\u0437\u043E\u0432\u043E\u0432)" : '';
     var executionTime = isDebugMode ? "\u0421\u0433\u0435\u043D\u0435\u0440\u0438\u0440\u043E\u0432\u0430\u043D\u043E \u0437\u0430 " + EXECUTION_TIME.toFixed(3) + "ms" : '';
-    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
-      return /*#__PURE__*/React.createElement(Gapped, {
-        wrap: true,
-        gap: 30,
-        verticalAlign: 'top'
-      }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Sticky, {
-        side: 'top'
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.searchBar(theme),
-        "data-perf-info": executionTime + " " + callsCount
-      }, /*#__PURE__*/React.createElement(Gapped, {
-        gap: 15
-      }, /*#__PURE__*/React.createElement(ComboBox, {
-        getItems: _this2.getItems,
-        value: selectedVariable,
-        onValueChange: _this2.handleVariableChange,
-        onUnexpectedInput: _this2.handleUnexpectedVariableInput,
-        placeholder: 'поиск по названию переменной'
-      }), !!selectedVariable && /*#__PURE__*/React.createElement(Link, {
-        onClick: _this2.resetVariable
-      }, "\u0441\u0431\u0440\u043E\u0441\u0438\u0442\u044C")))), Object.keys(descriptionsToRender).sort().map(function (componentName) {
-        return /*#__PURE__*/React.createElement(ComponentShowcase, {
-          key: componentName,
-          name: componentName,
-          description: descriptionsToRender[componentName],
-          isDebugMode: isDebugMode,
-          onVariableSelect: _this2.handleVariableChange
-        });
-      })), /*#__PURE__*/React.createElement(ShowUnusedVariables, {
-        diff: _this2.variablesDiff
-      }));
+    return /*#__PURE__*/React.createElement(EmotionConsumer, null, function (emotion) {
+      _this2.emotion = emotion;
+      return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+        var styles = getStyles(_this2.emotion);
+        return /*#__PURE__*/React.createElement(Gapped, {
+          wrap: true,
+          gap: 30,
+          verticalAlign: 'top'
+        }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Sticky, {
+          side: 'top'
+        }, /*#__PURE__*/React.createElement("div", {
+          className: styles.searchBar(theme),
+          "data-perf-info": executionTime + " " + callsCount
+        }, /*#__PURE__*/React.createElement(Gapped, {
+          gap: 15
+        }, /*#__PURE__*/React.createElement(ComboBox, {
+          getItems: _this2.getItems,
+          value: selectedVariable,
+          onValueChange: _this2.handleVariableChange,
+          onUnexpectedInput: _this2.handleUnexpectedVariableInput,
+          placeholder: 'поиск по названию переменной'
+        }), !!selectedVariable && /*#__PURE__*/React.createElement(Link, {
+          onClick: _this2.resetVariable
+        }, "\u0441\u0431\u0440\u043E\u0441\u0438\u0442\u044C")))), Object.keys(descriptionsToRender).sort().map(function (componentName) {
+          return /*#__PURE__*/React.createElement(ComponentShowcase, {
+            key: componentName,
+            name: componentName,
+            description: descriptionsToRender[componentName],
+            isDebugMode: isDebugMode,
+            onVariableSelect: _this2.handleVariableChange
+          });
+        })), /*#__PURE__*/React.createElement(ShowUnusedVariables, {
+          diff: _this2.variablesDiff
+        }));
+      });
     });
   };
 
@@ -146,177 +151,120 @@ export var ThemeShowcase = /*#__PURE__*/function (_React$Component) {
   return ThemeShowcase;
 }(React.Component);
 
-var ComponentShowcase = /*#__PURE__*/function (_React$Component2) {
-  _inheritsLoose(ComponentShowcase, _React$Component2);
-
-  function ComponentShowcase() {
-    return _React$Component2.apply(this, arguments) || this;
-  }
-
-  var _proto2 = ComponentShowcase.prototype;
-
-  _proto2.render = function render() {
-    var _this3 = this;
-
-    var _this$props = this.props,
-        name = _this$props.name,
-        description = _this$props.description,
-        onVariableSelect = _this$props.onVariableSelect,
-        isDebugMode = _this$props.isDebugMode;
-    var elements = Object.keys(description);
-    return elements.length ? /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Sticky, {
-        side: 'top',
-        offset: 40
-      }, function (isSticky) {
-        var _cx;
-
-        return /*#__PURE__*/React.createElement("h2", {
-          className: cx((_cx = {}, _cx[styles.heading(theme)] = true, _cx[styles.headingSticky()] = isSticky, _cx))
-        }, _this3.props.name);
-      }), /*#__PURE__*/React.createElement("table", {
-        className: styles.table()
-      }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", {
-        className: styles.headerCell(),
-        style: {
-          width: 170
-        }
-      }, "ClassName"), /*#__PURE__*/React.createElement("th", {
-        className: styles.headerCell(),
-        style: {
-          width: 210
-        }
-      }, "Variable Name"), /*#__PURE__*/React.createElement("th", {
-        className: styles.headerCell(),
-        style: {
-          width: 250
-        }
-      }, "Default Value"), /*#__PURE__*/React.createElement("th", {
-        className: styles.headerCell(),
-        style: {
-          width: 250
-        }
-      }, "Dark Value"))), /*#__PURE__*/React.createElement("tbody", null, elements.map(function (el) {
-        return /*#__PURE__*/React.createElement(ComponentShowcaseRow, {
-          key: name + "_" + el,
-          element: el,
-          row: description[el],
-          onVariableSelect: onVariableSelect,
-          isDebugMode: isDebugMode
-        });
-      }))));
-    }) : null;
-  };
-
-  return ComponentShowcase;
-}(React.Component);
-
-var ComponentShowcaseRow = /*#__PURE__*/function (_React$Component3) {
-  _inheritsLoose(ComponentShowcaseRow, _React$Component3);
-
-  function ComponentShowcaseRow() {
-    return _React$Component3.apply(this, arguments) || this;
-  }
-
-  var _proto3 = ComponentShowcaseRow.prototype;
-
-  _proto3.render = function render() {
-    var _this4 = this;
-
-    var _this$props2 = this.props,
-        el = _this$props2.element,
-        row = _this$props2.row,
-        isDebugMode = _this$props2.isDebugMode;
-    var rowSpan = row.variables.length + 1;
-    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
-      var _cx2;
-
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("tr", {
-        className: cx(styles.invisibleRow(), (_cx2 = {}, _cx2[styles.invisibleDarkRow()] = theme === darkVariables, _cx2))
-      }, /*#__PURE__*/React.createElement("td", {
-        className: cx(styles.cell(), styles.majorCell()),
-        rowSpan: rowSpan
-      }, /*#__PURE__*/React.createElement("span", {
-        className: styles.elementName()
-      }, ".", el)), /*#__PURE__*/React.createElement("td", {
-        className: styles.invisibleCell()
-      }), /*#__PURE__*/React.createElement("td", {
-        className: styles.invisibleCell()
-      }), /*#__PURE__*/React.createElement("td", {
-        className: styles.invisibleCell()
-      })), row.variables.map(function (varName) {
-        var _cx3;
-
-        var dependencies = row.dependencies[varName] || EMPTY_ARRAY;
-        var variableDefault = defaultVariables[varName];
-        var variableDark = darkVariables[varName];
-        var hasNoVariables = isDebugMode && !variableDefault;
-        return /*#__PURE__*/React.createElement("tr", {
-          key: el + "_" + varName,
-          className: cx(styles.row(), (_cx3 = {}, _cx3[styles.suspiciousRow()] = hasNoVariables, _cx3[styles.darkRow()] = theme === darkVariables, _cx3))
-        }, /*#__PURE__*/React.createElement("td", {
-          className: styles.cell()
-        }, /*#__PURE__*/React.createElement(VariableName, {
-          variableName: varName,
-          dependencies: dependencies,
-          onVariableSelect: _this4.props.onVariableSelect
-        })), /*#__PURE__*/React.createElement("td", {
-          className: styles.cell()
-        }, /*#__PURE__*/React.createElement(VariableValue, {
-          value: variableDefault
-        })), /*#__PURE__*/React.createElement("td", {
-          className: styles.cell()
-        }, /*#__PURE__*/React.createElement(VariableValue, {
-          value: variableDark
-        })));
-      }));
-    });
-  };
-
-  return ComponentShowcaseRow;
-}(React.Component);
-
-var VariableName = /*#__PURE__*/function (_React$Component4) {
-  _inheritsLoose(VariableName, _React$Component4);
-
-  function VariableName() {
-    var _this5;
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+function ComponentShowcase(props) {
+  var theme = useTheme();
+  var emotion = useEmotion();
+  var name = props.name,
+      description = props.description,
+      onVariableSelect = props.onVariableSelect,
+      isDebugMode = props.isDebugMode;
+  var elements = Object.keys(description);
+  var styles = getStyles(emotion);
+  return elements.length ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Sticky, {
+    side: 'top',
+    offset: 40
+  }, function (isSticky) {
+    var _emotion$cx;
+
+    return /*#__PURE__*/React.createElement("h2", {
+      className: emotion.cx((_emotion$cx = {}, _emotion$cx[styles.heading(theme)] = true, _emotion$cx[styles.headingSticky()] = isSticky, _emotion$cx))
+    }, props.name);
+  }), /*#__PURE__*/React.createElement("table", {
+    className: styles.table()
+  }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", {
+    className: styles.headerCell(),
+    style: {
+      width: 170
     }
-
-    _this5 = _React$Component4.call.apply(_React$Component4, [this].concat(args)) || this;
-
-    _this5.handleVariableSelect = function () {
-      var _this5$props = _this5.props,
-          variableName = _this5$props.variableName,
-          onVariableSelect = _this5$props.onVariableSelect;
-
-      if (onVariableSelect) {
-        onVariableSelect({
-          value: variableName,
-          label: variableName
-        });
-      }
-    };
-
-    return _this5;
-  }
-
-  var _proto4 = VariableName.prototype;
-
-  _proto4.render = function render() {
-    return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("span", {
-      className: styles.variableName(),
-      onClick: this.handleVariableSelect
-    }, this.props.variableName), this.props.dependencies.length > 0 && this.renderDependencies());
-  };
-
-  _proto4.renderDependencies = function renderDependencies() {
-    var _this$props3 = this.props,
-        dependencies = _this$props3.dependencies,
-        onVariableSelect = _this$props3.onVariableSelect;
+  }, "ClassName"), /*#__PURE__*/React.createElement("th", {
+    className: styles.headerCell(),
+    style: {
+      width: 210
+    }
+  }, "Variable Name"), /*#__PURE__*/React.createElement("th", {
+    className: styles.headerCell(),
+    style: {
+      width: 250
+    }
+  }, "Default Value"), /*#__PURE__*/React.createElement("th", {
+    className: styles.headerCell(),
+    style: {
+      width: 250
+    }
+  }, "Dark Value"))), /*#__PURE__*/React.createElement("tbody", null, elements.map(function (el) {
+    return /*#__PURE__*/React.createElement(ComponentShowcaseRow, {
+      key: name + "_" + el,
+      element: el,
+      row: description[el],
+      onVariableSelect: onVariableSelect,
+      isDebugMode: isDebugMode
+    });
+  })))) : null;
+}
+
+function ComponentShowcaseRow(props) {
+  var _emotion$cx2;
+
+  var theme = useTheme();
+  var emotion = useEmotion();
+  var el = props.element,
+      row = props.row,
+      isDebugMode = props.isDebugMode;
+  var rowSpan = row.variables.length + 1;
+  var styles = getStyles(emotion);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("tr", {
+    className: emotion.cx(styles.invisibleRow(), (_emotion$cx2 = {}, _emotion$cx2[styles.invisibleDarkRow()] = theme === darkVariables, _emotion$cx2))
+  }, /*#__PURE__*/React.createElement("td", {
+    className: emotion.cx(styles.cell(), styles.majorCell()),
+    rowSpan: rowSpan
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles.elementName()
+  }, ".", el)), /*#__PURE__*/React.createElement("td", {
+    className: styles.invisibleCell()
+  }), /*#__PURE__*/React.createElement("td", {
+    className: styles.invisibleCell()
+  }), /*#__PURE__*/React.createElement("td", {
+    className: styles.invisibleCell()
+  })), row.variables.map(function (varName) {
+    var _emotion$cx3;
+
+    var dependencies = row.dependencies[varName] || EMPTY_ARRAY;
+    var variableDefault = defaultVariables[varName];
+    var variableDark = darkVariables[varName];
+    var hasNoVariables = isDebugMode && !variableDefault;
+    return /*#__PURE__*/React.createElement("tr", {
+      key: el + "_" + varName,
+      className: emotion.cx(styles.row(), (_emotion$cx3 = {}, _emotion$cx3[styles.suspiciousRow()] = hasNoVariables, _emotion$cx3[styles.darkRow()] = theme === darkVariables, _emotion$cx3))
+    }, /*#__PURE__*/React.createElement("td", {
+      className: styles.cell()
+    }, /*#__PURE__*/React.createElement(VariableName, {
+      variableName: varName,
+      dependencies: dependencies,
+      onVariableSelect: props.onVariableSelect
+    })), /*#__PURE__*/React.createElement("td", {
+      className: styles.cell()
+    }, /*#__PURE__*/React.createElement(VariableValue, {
+      value: variableDefault
+    })), /*#__PURE__*/React.createElement("td", {
+      className: styles.cell()
+    }, /*#__PURE__*/React.createElement(VariableValue, {
+      value: variableDark
+    })));
+  }));
+}
+
+function VariableName(_ref) {
+  var variableName = _ref.variableName,
+      dependencies = _ref.dependencies,
+      onVariableSelect = _ref.onVariableSelect;
+  var emotion = useEmotion();
+  var styles = getStyles(emotion);
+  return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("span", {
+    className: styles.variableName(),
+    onClick: handleVariableSelect
+  }, variableName), dependencies.length > 0 && renderDependencies());
+
+  function renderDependencies() {
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), "\u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043E\u0442:", dependencies.map(function (dependency) {
       return /*#__PURE__*/React.createElement(DependencyName, {
         key: "dependency_" + dependency,
@@ -324,69 +272,56 @@ var VariableName = /*#__PURE__*/function (_React$Component4) {
         onDependencySelect: onVariableSelect
       });
     }));
-  };
-
-  return VariableName;
-}(React.Component);
-
-var DependencyName = /*#__PURE__*/function (_React$Component5) {
-  _inheritsLoose(DependencyName, _React$Component5);
-
-  function DependencyName() {
-    var _this6;
+  }
 
-    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-      args[_key2] = arguments[_key2];
+  function handleVariableSelect() {
+    if (onVariableSelect) {
+      onVariableSelect({
+        value: variableName,
+        label: variableName
+      });
     }
-
-    _this6 = _React$Component5.call.apply(_React$Component5, [this].concat(args)) || this;
-
-    _this6.getValues = function () {
-      var dependencyName = _this6.props.dependencyName;
-      var dependencyDefault = defaultVariables[dependencyName];
-      var dependencyDark = darkVariables[dependencyName];
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, "Default value: ", /*#__PURE__*/React.createElement(VariableValue, {
-        value: dependencyDefault
-      })), /*#__PURE__*/React.createElement("span", null, "Dark value: ", /*#__PURE__*/React.createElement(VariableValue, {
-        value: dependencyDark
-      })));
-    };
-
-    _this6.handleDependencySelect = function () {
-      var _this6$props = _this6.props,
-          dependencyName = _this6$props.dependencyName,
-          onDependencySelect = _this6$props.onDependencySelect;
-
-      if (onDependencySelect) {
-        onDependencySelect({
-          value: dependencyName,
-          label: dependencyName
-        });
-      }
-    };
-
-    return _this6;
+  }
+}
+
+function DependencyName(_ref2) {
+  var dependencyName = _ref2.dependencyName,
+      onDependencySelect = _ref2.onDependencySelect;
+  var emotion = useEmotion();
+  var styles = getStyles(emotion);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("br", null), "\u2013", ' ', /*#__PURE__*/React.createElement(Tooltip, {
+    trigger: 'hover',
+    render: getValues,
+    pos: 'right middle'
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles.variableName(),
+    onClick: handleDependencySelect
+  }, dependencyName)));
+
+  function getValues() {
+    var dependencyDefault = defaultVariables[dependencyName];
+    var dependencyDark = darkVariables[dependencyName];
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, "Default value: ", /*#__PURE__*/React.createElement(VariableValue, {
+      value: dependencyDefault
+    })), /*#__PURE__*/React.createElement("span", null, "Dark value: ", /*#__PURE__*/React.createElement(VariableValue, {
+      value: dependencyDark
+    })));
   }
 
-  var _proto5 = DependencyName.prototype;
-
-  _proto5.render = function render() {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("br", null), "\u2013", ' ', /*#__PURE__*/React.createElement(Tooltip, {
-      trigger: 'hover',
-      render: this.getValues,
-      pos: 'right middle'
-    }, /*#__PURE__*/React.createElement("span", {
-      className: styles.variableName(),
-      onClick: this.handleDependencySelect
-    }, this.props.dependencyName)));
-  };
-
-  return DependencyName;
-}(React.Component);
+  function handleDependencySelect() {
+    if (onDependencySelect) {
+      onDependencySelect({
+        value: dependencyName,
+        label: dependencyName
+      });
+    }
+  }
+}
 
 var VariableValue = function VariableValue(props) {
-  var _cx4;
+  var _emotion$cx4;
 
+  var emotion = useEmotion();
   var value = props.value;
   var valueIsColor = isColor(value);
   var valueIsGradient = isGradient(value);
@@ -397,8 +332,9 @@ var VariableValue = function VariableValue(props) {
     borderColor = valueIsColor ? ColorFunctions.contrast(value) : '#000';
   }
 
+  var styles = getStyles(emotion);
   return /*#__PURE__*/React.createElement("span", {
-    className: cx((_cx4 = {}, _cx4[styles.undefined()] = !value, _cx4))
+    className: emotion.cx((_emotion$cx4 = {}, _emotion$cx4[styles.undefined()] = !value, _emotion$cx4))
   }, hasExample && /*#__PURE__*/React.createElement("span", {
     className: styles.colorExample(),
     style: {
@@ -409,10 +345,13 @@ var VariableValue = function VariableValue(props) {
 };
 
 var ShowUnusedVariables = function ShowUnusedVariables(props) {
+  var emotion = useEmotion();
+
   if (props.diff.length === 0) {
     return null;
   }
 
+  var styles = getStyles(emotion);
   return /*#__PURE__*/React.createElement("div", {
     className: styles.unusedVariablesWarning()
   }, "\u041D\u0435\u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u043D\u043D\u044B\u0435 \u043F\u0435\u0440\u0435\u043C\u0435\u043D\u043D\u044B\u0435 (", props.diff.length, "):", /*#__PURE__*/React.createElement("ul", null, props.diff.sort().map(function (v) {