@skbkontur/react-ui 0.0.0-95a1dbe516 → 0.0.0-9cd4422b72

package/internal/ThemeShowcase/ThemeShowcase/ThemeShowcase.js

@@ -10,11 +10,10 @@ 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 { EmotionConsumer, useEmotion } from "../../../lib/theming/Emotion";
-import { ThemeConsumer } from "../../../lib/theming/ThemeContext";
-import { useTheme } from "../../../lib/theming/useTheme";
+import { cx } from "../../../lib/theming/Emotion";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { ALL_USED_VARIABLES, CALLS_COUNT, COMPONENT_DESCRIPTIONS, COMPONENT_DESCRIPTIONS_BY_VARIABLE, EXECUTION_TIME } from "../VariablesCollector";
-import { getStyles } from "../ThemeShowcase.styles";
+import { styles } from "../ThemeShowcase.styles";
 var EMPTY_ARRAY = [];
 var ALL_VARIABLES = Object.keys(defaultVariables);
 export var ThemeShowcase = /*#__PURE__*/function (_React$Component) {
@@ -88,41 +87,37 @@ 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(EmotionConsumer, null, function (emotion) {
-      _this2.emotion = emotion;
-      return /*#__PURE__*/React.createElement(ThemeConsumer, 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
-        }));
-      });
+    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
+      }));
     });
   };
 
@@ -151,120 +146,177 @@ export var ThemeShowcase = /*#__PURE__*/function (_React$Component) {
   return ThemeShowcase;
 }(React.Component);
 
-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
-    }
-  }, "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
+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
+        })));
+      }));
     });
-  })))) : 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 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];
+    }
+
+    _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;
     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,
@@ -272,56 +324,69 @@ function VariableName(_ref) {
         onDependencySelect: onVariableSelect
       });
     }));
-  }
+  };
 
-  function handleVariableSelect() {
-    if (onVariableSelect) {
-      onVariableSelect({
-        value: variableName,
-        label: variableName
-      });
-    }
-  }
-}
-
-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
-    })));
-  }
+  return VariableName;
+}(React.Component);
 
-  function handleDependencySelect() {
-    if (onDependencySelect) {
-      onDependencySelect({
-        value: dependencyName,
-        label: dependencyName
-      });
+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];
     }
+
+    _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;
   }
-}
+
+  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);
 
 var VariableValue = function VariableValue(props) {
-  var _emotion$cx4;
+  var _cx4;
 
-  var emotion = useEmotion();
   var value = props.value;
   var valueIsColor = isColor(value);
   var valueIsGradient = isGradient(value);
@@ -332,9 +397,8 @@ var VariableValue = function VariableValue(props) {
     borderColor = valueIsColor ? ColorFunctions.contrast(value) : '#000';
   }
 
-  var styles = getStyles(emotion);
   return /*#__PURE__*/React.createElement("span", {
-    className: emotion.cx((_emotion$cx4 = {}, _emotion$cx4[styles.undefined()] = !value, _emotion$cx4))
+    className: cx((_cx4 = {}, _cx4[styles.undefined()] = !value, _cx4))
   }, hasExample && /*#__PURE__*/React.createElement("span", {
     className: styles.colorExample(),
     style: {
@@ -345,13 +409,10 @@ 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) {