@skbkontur/react-ui 0.0.0-e66a3400ba → 0.0.0-eab52adf66

package/cjs/internal/ThemePlayground/ThemeEditor.js

@@ -0,0 +1,172 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.ThemeEditor = void 0;var _createForOfIteratorHelperLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/createForOfIteratorHelperLoose"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+
+var _ThemeFactory = require("../../lib/theming/ThemeFactory");
+
+var _Gapped = require("../../components/Gapped");
+var _Loader = require("../../components/Loader");
+var _utils = require("../../lib/utils");
+
+var _VariableValue = require("./VariableValue");
+var _constants = require("./constants");
+
+var _Playground = require("./Playground.styles");var
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ThemeEditor = exports.ThemeEditor = /*#__PURE__*/function (_React$Component) {function ThemeEditor() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
+    state = {
+      groups: [],
+      isLoading: true
+    };_this.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    renderGroups = function () {
+      var _this$props = _this.props,editingTheme = _this$props.editingTheme,currentTheme = _this$props.currentTheme,currentErrors = _this$props.currentErrors,onValueChange = _this$props.onValueChange;
+      var keys = _ThemeFactory.ThemeFactory.getKeys(editingTheme).filter(function (key) {return !isDeprecatedVariable(key);});
+
+      return /*#__PURE__*/(
+        _react.default.createElement(_Gapped.Gapped, { vertical: true },
+        _this.state.groups.map(function (i) {return /*#__PURE__*/(
+            _react.default.createElement(Group, {
+              editingTheme: editingTheme,
+              currentTheme: currentTheme,
+              currentErrors: currentErrors,
+              onValueChange: onValueChange,
+              title: i.title,
+              variables: keys.filter(
+                i.isCommon ?
+                isCommonVariable.bind(null, _this.state.groups.reduce(prefixesReducer, [])) :
+                isGroupVariable.bind(null, i.prefix)
+              ),
+              key: i.title }
+            ));}
+        ),
+        _constants.DEPRECATED_VARIABLES.length > 0 ? /*#__PURE__*/
+        _react.default.createElement(Group, {
+          editingTheme: editingTheme,
+          currentTheme: currentTheme,
+          currentErrors: currentErrors,
+          onValueChange: onValueChange,
+          title: 'Deprecated Variables',
+          variables: _constants.DEPRECATED_VARIABLES }
+        ) :
+        null
+        ));
+
+    };return _this;}(0, _inheritsLoose2.default)(ThemeEditor, _React$Component);var _proto = ThemeEditor.prototype;_proto.render = function render() {return this.state.isLoading ? /*#__PURE__*/_react.default.createElement("div", { className: _Playground.styles.loaderWrapper() }, /*#__PURE__*/_react.default.createElement(_Loader.Loader, { type: "big", active: true, className: _Playground.styles.loader() })) : this.renderGroups();};_proto.componentDidMount = function componentDidMount() {var _this2 = this;this.updateTimeout = window.setTimeout(function () {_this2.setState({ groups: _constants.VARIABLES_GROUPS, isLoading: false });}, 500);};_proto.componentWillUnmount = function componentWillUnmount() {clearTimeout(this.updateTimeout);};return ThemeEditor;}(_react.default.Component);
+
+
+
+
+
+
+
+
+
+
+var Group = function Group(props) {
+  var editingTheme = props.editingTheme,currentTheme = props.currentTheme,currentErrors = props.currentErrors,onValueChange = props.onValueChange,title = props.title,variables = props.variables;
+
+  return variables.length > 0 ? /*#__PURE__*/
+  _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/
+  _react.default.createElement("h2", { className: _Playground.styles.editorGroupHeader(currentTheme) }, title),
+  variables.map(function (variable) {
+    var value = editingTheme[variable];
+    var isError = currentErrors[variable];
+    return /*#__PURE__*/(
+      _react.default.createElement(_VariableValue.VariableValue, {
+        theme: currentTheme,
+        onChange: onValueChange,
+        value: value,
+        isError: isError || false,
+        variable: variable,
+        key: variable,
+        baseVariables: getBaseVariables(editingTheme, variable),
+        deprecated: isDeprecatedVariable(variable) }
+      ));
+
+  })
+  ) :
+  null;
+};
+
+var isDeprecatedVariable = function isDeprecatedVariable(name) {
+  return _constants.DEPRECATED_VARIABLES.includes(name);
+};
+
+var isGroupVariable = function isGroupVariable(prefix, name) {
+  var splitPrefix = prefix.split(' ') || [];
+
+  for (var _iterator = (0, _createForOfIteratorHelperLoose2.default)(splitPrefix), _step; !(_step = _iterator()).done;) {var item = _step.value;
+    if (name.startsWith(item.trim())) {
+      return true;
+    }
+  }
+  return false;
+};
+var isCommonVariable = function isCommonVariable(prefixes, name) {
+  for (var _iterator2 = (0, _createForOfIteratorHelperLoose2.default)(prefixes), _step2; !(_step2 = _iterator2()).done;) {var item = _step2.value;
+    if (name.startsWith(item.trim())) {
+      return false;
+    }
+  }
+  return true;
+};
+var prefixesReducer = function prefixesReducer(acc, current) {
+  var splitPrefix = current.prefix.split(' ');
+  return [].concat(acc, splitPrefix);
+};
+
+
+var getBaseVariables = function getBaseVariables(theme, variable) {
+  // TODO: Rewrite for loop.
+  // TODO: Enable `no-param-reassign` rule.
+  // eslint-disable-next-line no-param-reassign
+  for (; (0, _utils.isNonNullable)(theme); theme = Object.getPrototypeOf(theme)) {
+    if (Object.prototype.hasOwnProperty.call(theme, variable)) {
+      var descriptor = Object.getOwnPropertyDescriptor(theme, variable);
+
+      if (descriptor && typeof descriptor.get !== 'undefined') {
+        var getterBody = descriptor.get.toString();
+        var variableNameMatchArray = getterBody.match(/this\.(\w+)\b/gm) || [];
+        return (variableNameMatchArray || []).map(function (v) {return v.replace(/this\./g, '');});
+      }
+      break;
+    }
+  }
+
+  return [];
+};

package/cjs/internal/ThemePlayground/ThemeEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_ThemeFactory","_Gapped","_Loader","_utils","_VariableValue","_constants","_Playground","ThemeEditor","exports","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","state","groups","isLoading","renderGroups","_this$props","props","editingTheme","currentTheme","currentErrors","onValueChange","keys","ThemeFactory","getKeys","filter","key","isDeprecatedVariable","default","createElement","Gapped","vertical","map","i","Group","title","variables","isCommon","isCommonVariable","bind","reduce","prefixesReducer","isGroupVariable","prefix","DEPRECATED_VARIABLES","_inheritsLoose2","_proto","prototype","render","className","styles","loaderWrapper","Loader","type","active","loader","componentDidMount","_this2","updateTimeout","window","setTimeout","setState","VARIABLES_GROUPS","componentWillUnmount","clearTimeout","React","Component","Fragment","editorGroupHeader","variable","value","isError","VariableValue","theme","onChange","baseVariables","getBaseVariables","deprecated","name","includes","splitPrefix","split","_iterator","_createForOfIteratorHelperLoose2","_step","done","item","startsWith","trim","prefixes","_iterator2","_step2","acc","current","isNonNullable","Object","getPrototypeOf","hasOwnProperty","descriptor","getOwnPropertyDescriptor","get","getterBody","toString","variableNameMatchArray","match","v","replace"],"sources":["ThemeEditor.tsx"],"sourcesContent":["import React from 'react';\n\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport type { Theme } from '../../lib/theming/Theme';\nimport { Gapped } from '../../components/Gapped';\nimport { Loader } from '../../components/Loader';\nimport { isNonNullable } from '../../lib/utils';\n\nimport { VariableValue } from './VariableValue';\nimport { VARIABLES_GROUPS, DEPRECATED_VARIABLES } from './constants';\nimport type { ThemeErrorsType } from './ThemeContextPlayground';\nimport { styles } from './Playground.styles';\n\ninterface ThemeEditorProps {\n  editingTheme: Theme;\n  currentTheme: Theme;\n  currentErrors: ThemeErrorsType;\n  onValueChange: (variable: keyof Theme, value: string) => void;\n}\ninterface ThemeEditorState {\n  groups: Group[];\n  isLoading: boolean;\n}\ninterface Group {\n  title: string;\n  prefix: string;\n  isCommon?: boolean;\n}\nexport class ThemeEditor extends React.Component<ThemeEditorProps, ThemeEditorState> {\n  public state: ThemeEditorState = {\n    groups: [],\n    isLoading: true,\n  };\n  private updateTimeout?: number;\n\n  public render() {\n    return this.state.isLoading ? (\n      <div className={styles.loaderWrapper()}>\n        <Loader type=\"big\" active className={styles.loader()} />\n      </div>\n    ) : (\n      this.renderGroups()\n    );\n  }\n\n  public componentDidMount() {\n    this.updateTimeout = window.setTimeout(() => {\n      this.setState({ groups: VARIABLES_GROUPS, isLoading: false });\n    }, 500);\n  }\n\n  public componentWillUnmount(): void {\n    clearTimeout(this.updateTimeout);\n  }\n\n  private renderGroups = () => {\n    const { editingTheme, currentTheme, currentErrors, onValueChange } = this.props;\n    const keys = ThemeFactory.getKeys(editingTheme).filter((key) => !isDeprecatedVariable(key));\n\n    return (\n      <Gapped vertical>\n        {this.state.groups.map((i: Group) => (\n          <Group\n            editingTheme={editingTheme}\n            currentTheme={currentTheme}\n            currentErrors={currentErrors}\n            onValueChange={onValueChange}\n            title={i.title}\n            variables={keys.filter(\n              i.isCommon\n                ? isCommonVariable.bind(null, this.state.groups.reduce(prefixesReducer, []))\n                : isGroupVariable.bind(null, i.prefix),\n            )}\n            key={i.title}\n          />\n        ))}\n        {DEPRECATED_VARIABLES.length > 0 ? (\n          <Group\n            editingTheme={editingTheme}\n            currentTheme={currentTheme}\n            currentErrors={currentErrors}\n            onValueChange={onValueChange}\n            title={'Deprecated Variables'}\n            variables={DEPRECATED_VARIABLES}\n          />\n        ) : null}\n      </Gapped>\n    );\n  };\n}\n\ninterface GroupProps {\n  editingTheme: Theme;\n  currentTheme: Theme;\n  currentErrors: ThemeErrorsType;\n  title: string;\n  variables: Array<keyof Theme>;\n  onValueChange: (variable: keyof Theme, value: string) => void;\n}\nconst Group = (props: GroupProps) => {\n  const { editingTheme, currentTheme, currentErrors, onValueChange, title, variables } = props;\n\n  return variables.length > 0 ? (\n    <React.Fragment>\n      <h2 className={styles.editorGroupHeader(currentTheme)}>{title}</h2>\n      {variables.map((variable) => {\n        const value = editingTheme[variable] as string;\n        const isError = currentErrors[variable];\n        return (\n          <VariableValue\n            theme={currentTheme}\n            onChange={onValueChange}\n            value={value}\n            isError={isError || false}\n            variable={variable}\n            key={variable}\n            baseVariables={getBaseVariables(editingTheme, variable)}\n            deprecated={isDeprecatedVariable(variable)}\n          />\n        );\n      })}\n    </React.Fragment>\n  ) : null;\n};\n\nconst isDeprecatedVariable = (name: keyof Theme) => {\n  return DEPRECATED_VARIABLES.includes(name);\n};\n\nconst isGroupVariable = (prefix: string, name: string) => {\n  const splitPrefix = prefix.split(' ') || [];\n\n  for (const item of splitPrefix) {\n    if (name.startsWith(item.trim())) {\n      return true;\n    }\n  }\n  return false;\n};\nconst isCommonVariable = (prefixes: string[], name: string) => {\n  for (const item of prefixes) {\n    if (name.startsWith(item.trim())) {\n      return false;\n    }\n  }\n  return true;\n};\nconst prefixesReducer = (acc: string[], current: { title: string; prefix: string }): string[] => {\n  const splitPrefix = current.prefix.split(' ');\n  return [...acc, ...splitPrefix];\n};\n\ntype GetBaseVariablesReturnType = Array<keyof Theme>;\nconst getBaseVariables = (theme: Theme, variable: keyof Theme): GetBaseVariablesReturnType => {\n  // TODO: Rewrite for loop.\n  // TODO: Enable `no-param-reassign` rule.\n  // eslint-disable-next-line no-param-reassign\n  for (; isNonNullable(theme); theme = Object.getPrototypeOf(theme)) {\n    if (Object.prototype.hasOwnProperty.call(theme, variable)) {\n      const descriptor = Object.getOwnPropertyDescriptor(theme, variable);\n\n      if (descriptor && typeof descriptor.get !== 'undefined') {\n        const getterBody = descriptor.get.toString();\n        const variableNameMatchArray = getterBody.match(/this\\.(\\w+)\\b/gm) || [];\n        return (variableNameMatchArray || []).map((v) => v.replace(/this\\./g, '')) as GetBaseVariablesReturnType;\n      }\n      break;\n    }\n  }\n\n  return [];\n};\n"],"mappings":"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","ignoreList":[]}

package/cjs/internal/ThemePlayground/TogglePlayground.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare class TogglePlayground extends React.Component {
+    render(): React.JSX.Element;
+}

package/cjs/internal/ThemePlayground/TogglePlayground.js

@@ -0,0 +1,20 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.TogglePlayground = void 0;var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+
+var _Gapped = require("../../components/Gapped");
+var _Toggle = require("../../components/Toggle");var
+
+TogglePlayground = exports.TogglePlayground = /*#__PURE__*/function (_React$Component) {function TogglePlayground() {return _React$Component.apply(this, arguments) || this;}(0, _inheritsLoose2.default)(TogglePlayground, _React$Component);var _proto = TogglePlayground.prototype;_proto.
+  render = function render() {
+    return /*#__PURE__*/(
+      _react.default.createElement(_Gapped.Gapped, { vertical: true }, /*#__PURE__*/
+      _react.default.createElement(_Gapped.Gapped, { gap: 10 }, /*#__PURE__*/
+      _react.default.createElement(_Toggle.Toggle, null), /*#__PURE__*/
+      _react.default.createElement("div", null, "Toggle")
+      ), /*#__PURE__*/
+      _react.default.createElement(_Gapped.Gapped, { gap: 10 }, /*#__PURE__*/
+      _react.default.createElement(_Toggle.Toggle, { disabled: true }), /*#__PURE__*/
+      _react.default.createElement("div", null, "Disabled toggle")
+      )
+      ));
+
+  };return TogglePlayground;}(_react.default.Component);

package/cjs/internal/ThemePlayground/TogglePlayground.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_Gapped","_Toggle","TogglePlayground","exports","_React$Component","apply","arguments","_inheritsLoose2","default","_proto","prototype","render","createElement","Gapped","vertical","gap","Toggle","disabled","React","Component"],"sources":["TogglePlayground.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Gapped } from '../../components/Gapped';\nimport { Toggle } from '../../components/Toggle';\n\nexport class TogglePlayground extends React.Component {\n  public render() {\n    return (\n      <Gapped vertical>\n        <Gapped gap={10}>\n          <Toggle />\n          <div>Toggle</div>\n        </Gapped>\n        <Gapped gap={10}>\n          <Toggle disabled />\n          <div>Disabled toggle</div>\n        </Gapped>\n      </Gapped>\n    );\n  }\n}\n"],"mappings":"oQAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;;AAEA,IAAAC,OAAA,GAAAD,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA,4BAAiD;;AAEpCG,gBAAgB,GAAAC,OAAA,CAAAD,gBAAA,0BAAAE,gBAAA,YAAAF,iBAAA,UAAAE,gBAAA,CAAAC,KAAA,OAAAC,SAAA,eAAAC,eAAA,CAAAC,OAAA,EAAAN,gBAAA,EAAAE,gBAAA,MAAAK,MAAA,GAAAP,gBAAA,CAAAQ,SAAA,CAAAD,MAAA;EACpBE,MAAM,GAAb,SAAAA,OAAA,EAAgB;IACd;MACEd,MAAA,CAAAW,OAAA,CAAAI,aAAA,CAACZ,OAAA,CAAAa,MAAM,IAACC,QAAQ;MACdjB,MAAA,CAAAW,OAAA,CAAAI,aAAA,CAACZ,OAAA,CAAAa,MAAM,IAACE,GAAG,EAAE,EAAG;MACdlB,MAAA,CAAAW,OAAA,CAAAI,aAAA,CAACX,OAAA,CAAAe,MAAM,MAAE,CAAC;MACVnB,MAAA,CAAAW,OAAA,CAAAI,aAAA,cAAK,QAAW;MACV,CAAC;MACTf,MAAA,CAAAW,OAAA,CAAAI,aAAA,CAACZ,OAAA,CAAAa,MAAM,IAACE,GAAG,EAAE,EAAG;MACdlB,MAAA,CAAAW,OAAA,CAAAI,aAAA,CAACX,OAAA,CAAAe,MAAM,IAACC,QAAQ,QAAE,CAAC;MACnBpB,MAAA,CAAAW,OAAA,CAAAI,aAAA,cAAK,iBAAoB;MACnB;MACF,CAAC;;EAEb,CAAC,QAAAV,gBAAA,GAdmCgB,cAAK,CAACC,SAAS","ignoreList":[]}

package/cjs/internal/ThemePlayground/TokenInputPlayground.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface TokenInputPlaygroundState {
+    selectedItems: string[];
+}
+export declare class TokenInputPlayground extends React.Component {
+    state: TokenInputPlaygroundState;
+    render(): React.JSX.Element;
+}
+export {};

package/cjs/internal/ThemePlayground/TokenInputPlayground.js

@@ -0,0 +1,33 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.TokenInputPlayground = void 0;var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));var _react = _interopRequireDefault(require("react"));
+
+var _TokenInput = require("../../components/TokenInput");
+var _Token = require("../../components/Token");function
+
+getItems(_x) {return _getItems.apply(this, arguments);}function _getItems() {_getItems = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(query) {return _regenerator.default.wrap(function _callee$(_context) {while (1) switch (_context.prev = _context.next) {case 0:return _context.abrupt("return",
+          Promise.resolve(
+            ['First', 'Second', 'Third', 'Fourth', 'Fifth', 'Sixth'].filter(
+              function (x) {return x.toLowerCase().includes(query.toLowerCase()) || x.toString() === query;}
+            )
+          ).then(function (res) {return new Promise(function (resolve) {return setTimeout(resolve.bind(null, res), 500);});}));case 1:case "end":return _context.stop();}}, _callee);}));return _getItems.apply(this, arguments);}var
+
+
+
+
+
+TokenInputPlayground = exports.TokenInputPlayground = /*#__PURE__*/function (_React$Component) {function TokenInputPlayground() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
+    state = { selectedItems: ['First', 'Second'] };return _this;}(0, _inheritsLoose2.default)(TokenInputPlayground, _React$Component);var _proto = TokenInputPlayground.prototype;_proto.
+
+  render = function render() {var _this2 = this;
+    return /*#__PURE__*/(
+      _react.default.createElement(_TokenInput.TokenInput, {
+        getItems: getItems,
+        selectedItems: this.state.selectedItems,
+        renderToken: function renderToken(item, _ref) {var isActive = _ref.isActive,onClick = _ref.onClick,onRemove = _ref.onRemove;return /*#__PURE__*/(
+            _react.default.createElement(_Token.Token, { key: item.toString(), isActive: isActive, onClick: onClick, onRemove: onRemove },
+            item
+            ));},
+
+        onValueChange: function onValueChange(itemsNew) {return _this2.setState({ selectedItems: itemsNew });} }
+      ));
+
+  };return TokenInputPlayground;}(_react.default.Component);

package/cjs/internal/ThemePlayground/TokenInputPlayground.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_TokenInput","_Token","getItems","_x","_getItems","apply","arguments","_asyncToGenerator2","default","_regenerator","mark","_callee","query","wrap","_callee$","_context","prev","next","abrupt","Promise","resolve","filter","x","toLowerCase","includes","toString","then","res","setTimeout","bind","stop","TokenInputPlayground","exports","_React$Component","_this","_len","length","args","Array","_key","call","concat","state","selectedItems","_inheritsLoose2","_proto","prototype","render","_this2","createElement","TokenInput","renderToken","item","_ref","isActive","onClick","onRemove","Token","key","onValueChange","itemsNew","setState","React","Component"],"sources":["TokenInputPlayground.tsx"],"sourcesContent":["import React from 'react';\n\nimport { TokenInput } from '../../components/TokenInput';\nimport { Token } from '../../components/Token';\n\nasync function getItems(query: string) {\n  return Promise.resolve(\n    ['First', 'Second', 'Third', 'Fourth', 'Fifth', 'Sixth'].filter(\n      (x) => x.toLowerCase().includes(query.toLowerCase()) || x.toString() === query,\n    ),\n  ).then((res: string[]) => new Promise<string[]>((resolve) => setTimeout(resolve.bind(null, res), 500)));\n}\n\ninterface TokenInputPlaygroundState {\n  selectedItems: string[];\n}\nexport class TokenInputPlayground extends React.Component {\n  public state: TokenInputPlaygroundState = { selectedItems: ['First', 'Second'] };\n\n  public render() {\n    return (\n      <TokenInput\n        getItems={getItems}\n        selectedItems={this.state.selectedItems}\n        renderToken={(item, { isActive, onClick, onRemove }) => (\n          <Token key={item.toString()} isActive={isActive} onClick={onClick} onRemove={onRemove}>\n            {item}\n          </Token>\n        )}\n        onValueChange={(itemsNew) => this.setState({ selectedItems: itemsNew })}\n      />\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/cjs/internal/ThemePlayground/UnlinkVarsPlayground.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const UnlinkVarsPlayground: () => React.JSX.Element;

package/cjs/internal/ThemePlayground/UnlinkVarsPlayground.js

@@ -0,0 +1,33 @@
+"use strict";var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;exports.__esModule = true;exports.UnlinkVarsPlayground = void 0;var _react = _interopRequireWildcard(require("react"));
+
+var _ThemeContext = require("../../lib/theming/ThemeContext");
+var _ThemeFactory = require("../../lib/theming/ThemeFactory");
+
+var _Checkbox = require("../../components/Checkbox");
+var _Radio = require("../../components/Radio");
+var _FileUploader = require("../../components/FileUploader");
+var _Paging = require("../../components/Paging");
+
+var _helpers = require("./helpers");
+
+
+var propsList = [
+{ children: 'Semichecked', initialIndeterminate: true },
+{ children: 'Checked', checked: true },
+{ children: 'Checked & Focused', checked: true, focused: true }];
+
+
+var UnlinkVarsPlayground = exports.UnlinkVarsPlayground = function UnlinkVarsPlayground() {
+  var theme = _ThemeFactory.ThemeFactory.create({ borderColorFocus: '#7474DA', linkColor: '#0000cc' });
+  var _useState = (0, _react.useState)(3),active = _useState[0],setActive = _useState[1];
+  return /*#__PURE__*/(
+    _react.default.createElement(_ThemeContext.ThemeContext.Provider, { value: theme }, /*#__PURE__*/
+    _react.default.createElement("div", { style: { display: 'grid', gap: '10px' } },
+    (0, _helpers.getComponentsFromPropsList)( /*#__PURE__*/_react.default.createElement(_Checkbox.Checkbox, null), propsList), /*#__PURE__*/
+    _react.default.createElement(_Paging.Paging, { activePage: active, pagesCount: 5, onPageChange: function onPageChange(num) {return setActive(num);} }), /*#__PURE__*/
+    _react.default.createElement(_FileUploader.FileUploader, null), /*#__PURE__*/
+    _react.default.createElement(_Radio.Radio, { value: 'foo', focused: true })
+    )
+    ));
+
+};

package/cjs/internal/ThemePlayground/UnlinkVarsPlayground.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_ThemeContext","_ThemeFactory","_Checkbox","_Radio","_FileUploader","_Paging","_helpers","propsList","children","initialIndeterminate","checked","focused","UnlinkVarsPlayground","exports","theme","ThemeFactory","create","borderColorFocus","linkColor","_useState","useState","active","setActive","default","createElement","ThemeContext","Provider","value","style","display","gap","getComponentsFromPropsList","Checkbox","Paging","activePage","pagesCount","onPageChange","num","FileUploader","Radio"],"sources":["UnlinkVarsPlayground.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport type { CheckboxProps } from '../../components/Checkbox';\nimport { Checkbox } from '../../components/Checkbox';\nimport { Radio } from '../../components/Radio';\nimport { FileUploader } from '../../components/FileUploader';\nimport { Paging } from '../../components/Paging';\n\nimport { getComponentsFromPropsList } from './helpers';\n\ntype CheckboxProp = CheckboxProps & { focused?: boolean };\nconst propsList: CheckboxProp[] = [\n  { children: 'Semichecked', initialIndeterminate: true },\n  { children: 'Checked', checked: true },\n  { children: 'Checked & Focused', checked: true, focused: true },\n];\n\nexport const UnlinkVarsPlayground = () => {\n  const theme = ThemeFactory.create({ borderColorFocus: '#7474DA', linkColor: '#0000cc' });\n  const [active, setActive] = useState(3);\n  return (\n    <ThemeContext.Provider value={theme}>\n      <div style={{ display: 'grid', gap: '10px' }}>\n        {getComponentsFromPropsList(<Checkbox />, propsList)}\n        <Paging activePage={active} pagesCount={5} onPageChange={(num) => setActive(num)} />\n        <FileUploader />\n        <Radio value={'foo'} focused />\n      </div>\n    </ThemeContext.Provider>\n  );\n};\n"],"mappings":"4KAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;;AAEA,IAAAC,aAAA,GAAAD,OAAA;AACA,IAAAE,aAAA,GAAAF,OAAA;;AAEA,IAAAG,SAAA,GAAAH,OAAA;AACA,IAAAI,MAAA,GAAAJ,OAAA;AACA,IAAAK,aAAA,GAAAL,OAAA;AACA,IAAAM,OAAA,GAAAN,OAAA;;AAEA,IAAAO,QAAA,GAAAP,OAAA;;;AAGA,IAAMQ,SAAyB,GAAG;AAChC,EAAEC,QAAQ,EAAE,aAAa,EAAEC,oBAAoB,EAAE,IAAI,CAAC,CAAC;AACvD,EAAED,QAAQ,EAAE,SAAS,EAAEE,OAAO,EAAE,IAAI,CAAC,CAAC;AACtC,EAAEF,QAAQ,EAAE,mBAAmB,EAAEE,OAAO,EAAE,IAAI,EAAEC,OAAO,EAAE,IAAI,CAAC,CAAC,CAChE;;;AAEM,IAAMC,oBAAoB,GAAAC,OAAA,CAAAD,oBAAA,GAAG,SAAvBA,oBAAoBA,CAAA,EAAS;EACxC,IAAME,KAAK,GAAGC,0BAAY,CAACC,MAAM,CAAC,EAAEC,gBAAgB,EAAE,SAAS,EAAEC,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC;EACxF,IAAAC,SAAA,GAA4B,IAAAC,eAAQ,EAAC,CAAC,CAAC,CAAhCC,MAAM,GAAAF,SAAA,IAAEG,SAAS,GAAAH,SAAA;EACxB;IACEtB,MAAA,CAAA0B,OAAA,CAAAC,aAAA,CAACxB,aAAA,CAAAyB,YAAY,CAACC,QAAQ,IAACC,KAAK,EAAEb,KAAM;IAClCjB,MAAA,CAAA0B,OAAA,CAAAC,aAAA,UAAKI,KAAK,EAAE,EAAEC,OAAO,EAAE,MAAM,EAAEC,GAAG,EAAE,MAAM,CAAC,CAAE;IAC1C,IAAAC,mCAA0B,gBAAClC,MAAA,CAAA0B,OAAA,CAAAC,aAAA,CAACtB,SAAA,CAAA8B,QAAQ,MAAE,CAAC,EAAEzB,SAAS,CAAC;IACpDV,MAAA,CAAA0B,OAAA,CAAAC,aAAA,CAACnB,OAAA,CAAA4B,MAAM,IAACC,UAAU,EAAEb,MAAO,EAACc,UAAU,EAAE,CAAE,EAACC,YAAY,EAAE,SAAAA,aAACC,GAAG,UAAKf,SAAS,CAACe,GAAG,CAAC,EAAC,EAAE,CAAC;IACpFxC,MAAA,CAAA0B,OAAA,CAAAC,aAAA,CAACpB,aAAA,CAAAkC,YAAY,MAAE,CAAC;IAChBzC,MAAA,CAAA0B,OAAA,CAAAC,aAAA,CAACrB,MAAA,CAAAoC,KAAK,IAACZ,KAAK,EAAE,KAAM,EAAChB,OAAO,QAAE;IAC3B;IACgB,CAAC;;AAE5B,CAAC","ignoreList":[]}

package/cjs/internal/ThemePlayground/VariableValue.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+import type { Theme } from '../../lib/theming/Theme';
+export interface VariableValueProps {
+    onChange: (variable: keyof Theme, value: string) => void;
+    value: string;
+    isError: boolean;
+    variable: string;
+    theme: Theme;
+    baseVariables: Array<keyof Theme>;
+    deprecated?: boolean;
+}
+export interface VariableValueState {
+    value: string;
+    editing: boolean;
+}
+type DefaultProps = Required<Pick<VariableValueProps, 'deprecated'>>;
+export declare class VariableValue extends React.Component<VariableValueProps, VariableValueState> {
+    static defaultProps: DefaultProps;
+    private getProps;
+    state: VariableValueState;
+    private subscription;
+    private rootElement;
+    private readonly debounceTimeout;
+    private debounceInterval;
+    render(): React.JSX.Element;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: VariableValueProps): void;
+    componentWillUnmount(): void;
+    private renderBaseVariableLink;
+    private renderInputWrapper;
+    private renderInput;
+    private renderRollbackIcon;
+    private rootRef;
+    private colorIcon;
+    private handleEditLinkClick;
+    private rollbackToBaseVariable;
+    private emitClickEvent;
+    private handleChange;
+    private debounceHandler;
+    private handleBlur;
+    private emitterEventHandler;
+}
+export {};

package/cjs/internal/ThemePlayground/VariableValue.js

@@ -0,0 +1,240 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.VariableValue = void 0;var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+var _ToolPencilLineIcon16Regular = require("@skbkontur/icons/icons/ToolPencilLineIcon/ToolPencilLineIcon16Regular");
+var _XIcon16Regular = require("@skbkontur/icons/icons/XIcon/XIcon16Regular");
+var _eventemitter = _interopRequireDefault(require("eventemitter3"));
+
+var _ColorHelpers = require("../../lib/styles/ColorHelpers");
+var _Input = require("../../components/Input");
+var _Gapped = require("../../components/Gapped");
+
+var _Link = require("../../components/Link");
+var _Hint = require("../../components/Hint");
+var _utils = require("../../lib/utils");
+var _Emotion = require("../../lib/theming/Emotion");
+var _createPropsGetter = require("../../lib/createPropsGetter");
+
+var _Playground = require("./Playground.styles");
+
+var emitter = new _eventemitter.default();var
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+VariableValue = exports.VariableValue = /*#__PURE__*/function (_React$Component) {function VariableValue() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
+
+
+
+    getProps = (0, _createPropsGetter.createPropsGetter)(VariableValue.defaultProps);_this.
+    state = {
+      value: _this.props.value,
+      editing: false
+    };_this.
+    subscription = null;_this.
+    rootElement = null;_this.
+    debounceTimeout = 500;_this.
+    debounceInterval = undefined;_this.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    renderBaseVariableLink = function () {
+      var baseVariables = _this.props.baseVariables;
+      return /*#__PURE__*/(
+        _react.default.createElement("div", { className: _Playground.styles.baseVariableRoot() },
+        _this.colorIcon(), /*#__PURE__*/
+        _react.default.createElement("div", { className: _Playground.styles.baseLinkWrapper() }, /*#__PURE__*/
+        _react.default.createElement(_Gapped.Gapped, null, /*#__PURE__*/
+        _react.default.createElement("div", { style: { textAlign: 'right' } }, /*#__PURE__*/
+        _react.default.createElement(_Gapped.Gapped, { vertical: true },
+        baseVariables.map(function (v) {return /*#__PURE__*/(
+            _react.default.createElement(BaseVariableLink, { key: v, baseVariable: v, emitClickEvent: _this.emitClickEvent }));}
+        )
+        )
+        ), /*#__PURE__*/
+        _react.default.createElement(_Hint.Hint, { text: 'Изменить значение' }, /*#__PURE__*/
+        _react.default.createElement(_Link.Link, { icon: /*#__PURE__*/_react.default.createElement(_ToolPencilLineIcon16Regular.ToolPencilLineIcon16Regular, null), onClick: _this.handleEditLinkClick })
+        )
+        )
+        )
+        ));
+
+    };_this.
+
+    renderInputWrapper = function () {
+      return _this.state.editing ? /*#__PURE__*/
+      _react.default.createElement(_Gapped.Gapped, null,
+      _this.renderInput(),
+      _this.renderRollbackIcon()
+      ) :
+
+      _this.renderInput();
+
+    };_this.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    rootRef = function (instance) {
+      _this.rootElement = instance;
+    };_this.
+
+    colorIcon = function () {
+      return /*#__PURE__*/_react.default.createElement("div", { className: _Playground.styles.colorIcon(), style: { background: _this.state.value } });
+    };_this.
+
+    handleEditLinkClick = function () {
+      _this.setState({
+        editing: true
+      });
+    };_this.
+
+    rollbackToBaseVariable = function () {
+      _this.setState({
+        editing: false,
+        value: _this.props.value
+      });
+    };_this.
+
+    emitClickEvent = function (variable) {
+      emitter.emit('clicked', variable);
+    };_this.
+
+    handleChange = function (value) {
+      _this.setState({
+        value: value
+      });
+
+      if (_this.debounceInterval === undefined) {
+        _this.debounceInterval = window.setInterval(_this.debounceHandler, _this.debounceTimeout);
+      }
+    };_this.
+
+    debounceHandler = function () {
+      var _this$props = _this.props,variable = _this$props.variable,onChange = _this$props.onChange;
+
+      onChange(variable, _this.state.value);
+
+      clearInterval(_this.debounceInterval);
+      _this.debounceInterval = undefined;
+    };_this.
+
+    handleBlur = function () {
+      _this.setState({
+        editing: false
+      });
+    };_this.
+
+    emitterEventHandler = function (name) {
+      if (name === _this.props.variable && _this.rootElement) {
+        _this.rootElement.focus();
+      }
+    };return _this;}(0, _inheritsLoose2.default)(VariableValue, _React$Component);var _proto = VariableValue.prototype;_proto.render = function render() {var _cx;var _this$props2 = this.props,variable = _this$props2.variable,theme = _this$props2.theme,baseVariables = _this$props2.baseVariables;var deprecated = this.getProps().deprecated;return /*#__PURE__*/_react.default.createElement("div", { className: _Playground.styles.variable(theme), ref: this.rootRef, tabIndex: 0 }, /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_Playground.styles.variableName(theme), (_cx = {}, _cx[_Playground.styles.deprecated()] = deprecated, _cx)), title: variable }, variable + ": "), baseVariables.length > 0 && !this.state.editing ? this.renderBaseVariableLink() : this.renderInputWrapper());};_proto.componentDidMount = function componentDidMount() {var _this2 = this;if (!this.subscription) {emitter.addListener('clicked', this.emitterEventHandler);this.subscription = { remove: function remove() {emitter.removeListener('clicked', _this2.emitterEventHandler);} };}};_proto.componentDidUpdate = function componentDidUpdate(prevProps) {if (prevProps.value !== this.props.value) {this.setState({ value: this.props.value });}};_proto.componentWillUnmount = function componentWillUnmount() {if (this.subscription) {this.subscription.remove();}if (this.debounceInterval !== undefined) {clearInterval(this.debounceInterval);}};_proto.renderInput = function renderInput() {return /*#__PURE__*/_react.default.createElement(_Input.Input, { leftIcon: isColorExtended(this.state.value) && this.colorIcon(), value: this.state.value, onValueChange: this.handleChange, onBlur: this.handleBlur, align: 'right', width: this.state.editing ? 225 : 250, error: this.props.isError });};_proto.renderRollbackIcon = function renderRollbackIcon() {return /*#__PURE__*/_react.default.createElement(_Hint.Hint, { text: 'Вернуться к базовой переменной' }, /*#__PURE__*/_react.default.createElement("div", { className: _Playground.styles.linkRoot() }, /*#__PURE__*/_react.default.createElement(_Link.Link, { icon: /*#__PURE__*/_react.default.createElement(_XIcon16Regular.XIcon16Regular, null), onClick: this.rollbackToBaseVariable })));};return VariableValue;}(_react.default.Component);VariableValue.defaultProps = { deprecated: false };var
+
+
+
+
+
+
+BaseVariableLink = /*#__PURE__*/function (_React$Component2) {function BaseVariableLink() {var _this3;for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {args[_key2] = arguments[_key2];}_this3 = _React$Component2.call.apply(_React$Component2, [this].concat(args)) || this;_this3.
+
+
+
+    emitClickEvent = function () {
+      _this3.props.emitClickEvent(_this3.props.baseVariable);
+    };return _this3;}(0, _inheritsLoose2.default)(BaseVariableLink, _React$Component2);var _proto2 = BaseVariableLink.prototype;_proto2.render = function render() {return /*#__PURE__*/_react.default.createElement(_Link.Link, { onClick: this.emitClickEvent }, this.props.baseVariable);};return BaseVariableLink;}(_react.default.Component);
+
+
+
+
+var getColorValue = function getColorValue(color) {
+  if ((0, _utils.isFunction)(color)) {
+    return color();
+  }
+
+  return color;
+};
+
+function isColorExtended(color) {
+  var colorValue = getColorValue(color);
+
+  var style = new Option().style;
+  style.color = colorValue;
+
+  if (colorValue) {
+    return (0, _ColorHelpers.isColor)(colorValue) || style.color === colorValue;
+  }
+
+  return false;
+}