npm - @skbkontur/react-ui - Versions diffs - 4.2.2 → 4.4.0 - Mend

@skbkontur/react-ui 4.2.2 → 4.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (694) hide show

package/cjs/internal/ThemePlayground/ThemeContextPlayground.js CHANGED Viewed

@@ -20,7 +20,7 @@ var _Theme2022Dark = require("../../lib/theming/themes/Theme2022Dark");
 var _ThemeEditor = require("./ThemeEditor");
 var _Playground = require("./Playground.styles");
 var _Playground2 = require("./Playground");
-var _constants = require("./constants");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;}var
+var _constants = require("./constants");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;}
@@ -55,6 +55,13 @@ var _constants = require("./constants");function _getRequireWildcardCache(nodeIn
+var getEditingThemeType = function getEditingThemeType(editingThemeItem) {
+  if (editingThemeItem) {
+    return editingThemeItem.value;
+  }
+  return 'default';
+};var
 ThemeContextPlayground = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(ThemeContextPlayground, _React$Component);
@@ -108,7 +115,10 @@ ThemeContextPlayground = /*#__PURE__*/function (_React$Component) {(0, _inherits
     renderSidePage = function () {
       var _this$state = _this.state,currentTheme = _this$state.currentTheme,themesErrors = _this$state.themesErrors,editingThemeItem = _this$state.editingThemeItem,themes = _this$state.themes;
-      var themeErrors = themesErrors[editingThemeItem ? editingThemeItem.value : 'default'];
+      var editingThemeType = getEditingThemeType(editingThemeItem);
+      var themeErrors = themesErrors[editingThemeType];
       return /*#__PURE__*/(
         _react.default.createElement(_SidePage.SidePage, { disableAnimations: true, ignoreBackgroundClick: true, blockBackground: true, width: 600, onClose: _this.handleClose }, /*#__PURE__*/
         _react.default.createElement(_SidePage.SidePage.Header, null, /*#__PURE__*/
@@ -129,7 +139,7 @@ ThemeContextPlayground = /*#__PURE__*/function (_React$Component) {(0, _inherits
         _react.default.createElement(_SidePage.SidePage.Body, null, /*#__PURE__*/
         _react.default.createElement("div", { className: _Playground.styles.sidePageBody() }, /*#__PURE__*/
         _react.default.createElement(_ThemeEditor.ThemeEditor, {
-          editingTheme: themes[editingThemeItem.value],
+          editingTheme: themes[editingThemeType],
           currentTheme: currentTheme,
           currentErrors: themeErrors,
           onValueChange: _this.handleThemeVariableChange })))));
@@ -176,7 +186,7 @@ ThemeContextPlayground = /*#__PURE__*/function (_React$Component) {(0, _inherits
     handleThemeVariableChange = function (variable, value) {
       var _this$state2 = _this.state,editingThemeItem = _this$state2.editingThemeItem,currentTheme = _this$state2.currentTheme,themes = _this$state2.themes,themesErrors = _this$state2.themesErrors;
-      var editingThemeType = editingThemeItem.value;
+      var editingThemeType = getEditingThemeType(editingThemeItem);
       var theme = themes[editingThemeType];
       var currentValue = theme[variable];

package/cjs/internal/ThemePlayground/ThemeContextPlayground.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["ThemeContextPlayground.tsx"],"names":["ThemeContextPlayground","props","editableThemesItems","value","ThemeType","Default","label","Dark","DefaultOld","FlatOld","Theme2022","Theme2022Dark","renderSidePage","state","currentTheme","themesErrors","editingThemeItem","themes","themeErrors","handleClose","styles","editorHeaderWrapper","getEditableThemesItems","handleEditingThemeSwitch","fontSize","marginTop","handelGetTheme","sidePageBody","handleThemeVariableChange","themeObject","ThemeFactory","getKeys","forEach","key","descriptor","Object","getOwnPropertyDescriptor","get","DEFAULT_THEME","console","log","JSON","stringify","handleOpen","setState","editorOpened","find","i","currentThemeType","handleThemeChange","themeType","variable","editingThemeType","theme","currentValue","canSetVariable","ColorFunctions","isValid","nextThemeErrors","stateUpdate","result","changeThemeVariable","query","Promise","resolve","filter","toLowerCase","includes","item","variableName","variableValue","enumerable","configurable","set","defineProperty","create","default","defaultOld","DEFAULT_THEME_8PX_OLD","dark","DARK_THEME","flatOld","FLAT_THEME_8PX_OLD","theme2022","THEME_2022","theme2022Dark","THEME_2022_DARK","render","React","Component"],"mappings":"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","sourcesContent":["import React, { ReactNode } from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme, ThemeIn } from '../../lib/theming/Theme';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { FLAT_THEME_8PX_OLD } from '../../lib/theming/themes/FlatTheme8pxOld';\nimport { DEFAULT_THEME_8PX_OLD } from '../../lib/theming/themes/DefaultTheme8pxOld';\nimport { DEFAULT_THEME } from '../../lib/theming/themes/DefaultTheme';\nimport { DARK_THEME } from '../../lib/theming/themes/DarkTheme';\nimport { SidePage } from '../../components/SidePage';\nimport { Gapped } from '../../components/Gapped';\nimport { ComboBox } from '../../components/ComboBox';\nimport { Link } from '../../components/Link';\nimport * as ColorFunctions from '../../lib/styles/ColorFunctions';\nimport { Writeable } from '../../typings/utility-types';\nimport { THEME_2022 } from '../../lib/theming/themes/Theme2022';\nimport { findPropertyDescriptor } from '../../lib/theming/ThemeHelpers';\nimport { THEME_2022_DARK } from '../../lib/theming/themes/Theme2022Dark';\n\nimport { ThemeEditor } from './ThemeEditor';\nimport { styles } from './Playground.styles';\nimport { Playground } from './Playground';\nimport { ThemeType } from './constants';\n\ninterface PlaygroundState {\n editorOpened: boolean;\n editingThemeItem?: EditingThemeItem;\n themes: Themes;\n themesErrors: ThemesErrors;\n currentTheme: Theme;\n currentThemeType: ThemeType;\n}\ninterface Themes {\n default: Theme;\n dark: Theme;\n defaultOld: Theme;\n flatOld: Theme;\n theme2022: Theme;\n theme2022Dark: Theme;\n}\ninterface ThemesErrors {\n default: ThemeErrorsType;\n dark: ThemeErrorsType;\n defaultOld: ThemeErrorsType;\n flatOld: ThemeErrorsType;\n theme2022: ThemeErrorsType;\n theme2022Dark: ThemeErrorsType;\n}\ninterface EditingThemeItem {\n value: ThemeType;\n label: string;\n}\ninterface PlaygroundProps {\n children?: ReactNode;\n}\nexport type ThemeErrorsType = Writeable<{ [key in keyof Theme]?: boolean }>;\n\nexport class ThemeContextPlayground extends React.Component<PlaygroundProps, PlaygroundState> {\n private readonly editableThemesItems = [\n { value: ThemeType.Default, label: 'Дефолтная' },\n { value: ThemeType.Dark, label: 'Темная' },\n { value: ThemeType.DefaultOld, label: 'Старая дефолтная' },\n { value: ThemeType.FlatOld, label: 'Старая плоская' },\n { value: ThemeType.Theme2022, label: 'Новая 2022' },\n { value: ThemeType.Theme2022Dark, label: 'Новая 2022 Тёмная' },\n ];\n\n constructor(props: PlaygroundProps) {\n super(props);\n this.state = {\n currentTheme: DEFAULT_THEME,\n currentThemeType: ThemeType.Default,\n editorOpened: false,\n themes: {\n default: DEFAULT_THEME,\n defaultOld: DEFAULT_THEME_8PX_OLD,\n dark: DARK_THEME,\n flatOld: FLAT_THEME_8PX_OLD,\n theme2022: THEME_2022,\n theme2022Dark: THEME_2022_DARK,\n },\n themesErrors: {\n default: {},\n defaultOld: {},\n dark: {},\n flatOld: {},\n theme2022: {},\n theme2022Dark: {},\n },\n };\n }\n\n public render() {\n const { currentTheme, editorOpened, currentThemeType } = this.state;\n return (\n <ThemeContext.Provider value={currentTheme}>\n {editorOpened && this.renderSidePage()}\n {\n <Playground\n onThemeChange={this.handleThemeChange}\n currentThemeType={currentThemeType}\n onEditLinkClick={this.handleOpen}\n />\n }\n </ThemeContext.Provider>\n );\n }\n\n private renderSidePage = () => {\n const { currentTheme, themesErrors, editingThemeItem, themes } = this.state;\n const themeErrors = themesErrors[editingThemeItem ? editingThemeItem.value : 'default'];\n return (\n <SidePage disableAnimations ignoreBackgroundClick blockBackground width={600} onClose={this.handleClose}>\n <SidePage.Header>\n <div className={styles.editorHeaderWrapper(currentTheme)}>\n <Gapped wrap verticalAlign=\"middle\">\n <span>Тема для редактирования:</span>\n <ComboBox\n getItems={this.getEditableThemesItems}\n value={editingThemeItem}\n onValueChange={this.handleEditingThemeSwitch}\n />\n </Gapped>\n </div>\n <div style={{ fontSize: 14, marginTop: 8 }}>\n <Link onClick={this.handelGetTheme}>Вывести тему в консоль</Link>\n </div>\n </SidePage.Header>\n <SidePage.Body>\n <div className={styles.sidePageBody()}>\n <ThemeEditor\n editingTheme={themes[editingThemeItem!.value]}\n currentTheme={currentTheme}\n currentErrors={themeErrors}\n onValueChange={this.handleThemeVariableChange}\n />\n </div>\n </SidePage.Body>\n </SidePage>\n );\n };\n\n private handelGetTheme = () => {\n const currentTheme = this.state.currentTheme;\n const themeObject: Writeable<ThemeIn> = {};\n ThemeFactory.getKeys(currentTheme).forEach((key) => {\n const descriptor = Object.getOwnPropertyDescriptor(currentTheme, key);\n if (descriptor && !descriptor.get && DEFAULT_THEME[key] && currentTheme[key] !== DEFAULT_THEME[key]) {\n themeObject[key] = currentTheme[key] as keyof Theme;\n }\n });\n\n console.log(JSON.stringify(themeObject));\n };\n\n private handleOpen = () => {\n this.setState((state) => ({\n editorOpened: true,\n editingThemeItem: this.editableThemesItems.find((i) => i.value === state.currentThemeType),\n }));\n };\n\n private handleClose = () => {\n this.setState({\n editorOpened: false,\n });\n };\n\n private handleThemeChange = (value: string) => {\n const themeType = value as ThemeType;\n this.setState({\n currentThemeType: themeType,\n currentTheme: this.state.themes[themeType],\n });\n };\n\n private handleThemeVariableChange = (variable: keyof Theme, value: string) => {\n const { editingThemeItem, currentTheme, themes, themesErrors } = this.state;\n const editingThemeType = editingThemeItem!.value;\n\n const theme = themes[editingThemeType];\n const currentValue = theme[variable] as string;\n\n let canSetVariable = true;\n if (ColorFunctions.isValid(currentValue)) {\n canSetVariable = ColorFunctions.isValid(value);\n themesErrors[editingThemeType][variable] = !canSetVariable;\n }\n\n const nextThemeErrors: ThemesErrors = { ...themesErrors };\n nextThemeErrors[editingThemeType][variable] = !canSetVariable;\n const stateUpdate = { themes, currentTheme, themesErrors: nextThemeErrors };\n\n if (canSetVariable) {\n const result = this.changeThemeVariable(theme, variable, value);\n stateUpdate.themes[editingThemeType] = result;\n if (this.state.currentThemeType === editingThemeType) {\n stateUpdate.currentTheme = result;\n }\n }\n\n this.setState(stateUpdate);\n };\n\n private getEditableThemesItems = (query: string) => {\n return Promise.resolve(this.editableThemesItems.filter((i) => i.label.toLowerCase().includes(query.toLowerCase())));\n };\n\n private handleEditingThemeSwitch = (item: EditingThemeItem) => {\n this.setState({ editingThemeItem: item });\n };\n\n private changeThemeVariable = (theme: Theme, variableName: keyof Theme, variableValue: string): Theme => {\n const result: ThemeIn = {};\n ThemeFactory.getKeys(theme).forEach((key) => {\n const descriptor = findPropertyDescriptor(theme, key);\n descriptor.enumerable = true;\n descriptor.configurable = true;\n if (key === variableName) {\n delete descriptor.get;\n delete descriptor.set;\n descriptor.value = variableValue;\n }\n Object.defineProperty(result, key, descriptor);\n });\n\n return ThemeFactory.create<ThemeIn>(result);\n };\n}\n"]}
1	+ {"version":3,"sources":["ThemeContextPlayground.tsx"],"names":["getEditingThemeType","editingThemeItem","value","ThemeContextPlayground","props","editableThemesItems","ThemeType","Default","label","Dark","DefaultOld","FlatOld","Theme2022","Theme2022Dark","renderSidePage","state","currentTheme","themesErrors","themes","editingThemeType","themeErrors","handleClose","styles","editorHeaderWrapper","getEditableThemesItems","handleEditingThemeSwitch","fontSize","marginTop","handelGetTheme","sidePageBody","handleThemeVariableChange","themeObject","ThemeFactory","getKeys","forEach","key","descriptor","Object","getOwnPropertyDescriptor","get","DEFAULT_THEME","console","log","JSON","stringify","handleOpen","setState","editorOpened","find","i","currentThemeType","handleThemeChange","themeType","variable","theme","currentValue","canSetVariable","ColorFunctions","isValid","nextThemeErrors","stateUpdate","result","changeThemeVariable","query","Promise","resolve","filter","toLowerCase","includes","item","variableName","variableValue","enumerable","configurable","set","defineProperty","create","default","defaultOld","DEFAULT_THEME_8PX_OLD","dark","DARK_THEME","flatOld","FLAT_THEME_8PX_OLD","theme2022","THEME_2022","theme2022Dark","THEME_2022_DARK","render","React","Component"],"mappings":"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","sourcesContent":["import React, { ReactNode } from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme, ThemeIn } from '../../lib/theming/Theme';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { FLAT_THEME_8PX_OLD } from '../../lib/theming/themes/FlatTheme8pxOld';\nimport { DEFAULT_THEME_8PX_OLD } from '../../lib/theming/themes/DefaultTheme8pxOld';\nimport { DEFAULT_THEME } from '../../lib/theming/themes/DefaultTheme';\nimport { DARK_THEME } from '../../lib/theming/themes/DarkTheme';\nimport { SidePage } from '../../components/SidePage';\nimport { Gapped } from '../../components/Gapped';\nimport { ComboBox } from '../../components/ComboBox';\nimport { Link } from '../../components/Link';\nimport * as ColorFunctions from '../../lib/styles/ColorFunctions';\nimport { Writeable } from '../../typings/utility-types';\nimport { THEME_2022 } from '../../lib/theming/themes/Theme2022';\nimport { findPropertyDescriptor } from '../../lib/theming/ThemeHelpers';\nimport { THEME_2022_DARK } from '../../lib/theming/themes/Theme2022Dark';\n\nimport { ThemeEditor } from './ThemeEditor';\nimport { styles } from './Playground.styles';\nimport { Playground } from './Playground';\nimport { ThemeType } from './constants';\n\ninterface PlaygroundState {\n editorOpened: boolean;\n editingThemeItem?: EditingThemeItem;\n themes: Themes;\n themesErrors: ThemesErrors;\n currentTheme: Theme;\n currentThemeType: ThemeType;\n}\ninterface Themes {\n default: Theme;\n dark: Theme;\n defaultOld: Theme;\n flatOld: Theme;\n theme2022: Theme;\n theme2022Dark: Theme;\n}\ninterface ThemesErrors {\n default: ThemeErrorsType;\n dark: ThemeErrorsType;\n defaultOld: ThemeErrorsType;\n flatOld: ThemeErrorsType;\n theme2022: ThemeErrorsType;\n theme2022Dark: ThemeErrorsType;\n}\ninterface EditingThemeItem {\n value: ThemeType;\n label: string;\n}\ninterface PlaygroundProps {\n children?: ReactNode;\n}\nexport type ThemeErrorsType = Writeable<{ [key in keyof Theme]?: boolean }>;\n\nconst getEditingThemeType = (editingThemeItem: PlaygroundState['editingThemeItem']) => {\n if (editingThemeItem) {\n return editingThemeItem.value;\n }\n\n return 'default';\n};\nexport class ThemeContextPlayground extends React.Component<PlaygroundProps, PlaygroundState> {\n private readonly editableThemesItems = [\n { value: ThemeType.Default, label: 'Дефолтная' },\n { value: ThemeType.Dark, label: 'Темная' },\n { value: ThemeType.DefaultOld, label: 'Старая дефолтная' },\n { value: ThemeType.FlatOld, label: 'Старая плоская' },\n { value: ThemeType.Theme2022, label: 'Новая 2022' },\n { value: ThemeType.Theme2022Dark, label: 'Новая 2022 Тёмная' },\n ];\n\n constructor(props: PlaygroundProps) {\n super(props);\n this.state = {\n currentTheme: DEFAULT_THEME,\n currentThemeType: ThemeType.Default,\n editorOpened: false,\n themes: {\n default: DEFAULT_THEME,\n defaultOld: DEFAULT_THEME_8PX_OLD,\n dark: DARK_THEME,\n flatOld: FLAT_THEME_8PX_OLD,\n theme2022: THEME_2022,\n theme2022Dark: THEME_2022_DARK,\n },\n themesErrors: {\n default: {},\n defaultOld: {},\n dark: {},\n flatOld: {},\n theme2022: {},\n theme2022Dark: {},\n },\n };\n }\n\n public render() {\n const { currentTheme, editorOpened, currentThemeType } = this.state;\n return (\n <ThemeContext.Provider value={currentTheme}>\n {editorOpened && this.renderSidePage()}\n {\n <Playground\n onThemeChange={this.handleThemeChange}\n currentThemeType={currentThemeType}\n onEditLinkClick={this.handleOpen}\n />\n }\n </ThemeContext.Provider>\n );\n }\n\n private renderSidePage = () => {\n const { currentTheme, themesErrors, editingThemeItem, themes } = this.state;\n\n const editingThemeType = getEditingThemeType(editingThemeItem);\n const themeErrors = themesErrors[editingThemeType];\n\n return (\n <SidePage disableAnimations ignoreBackgroundClick blockBackground width={600} onClose={this.handleClose}>\n <SidePage.Header>\n <div className={styles.editorHeaderWrapper(currentTheme)}>\n <Gapped wrap verticalAlign=\"middle\">\n <span>Тема для редактирования:</span>\n <ComboBox\n getItems={this.getEditableThemesItems}\n value={editingThemeItem}\n onValueChange={this.handleEditingThemeSwitch}\n />\n </Gapped>\n </div>\n <div style={{ fontSize: 14, marginTop: 8 }}>\n <Link onClick={this.handelGetTheme}>Вывести тему в консоль</Link>\n </div>\n </SidePage.Header>\n <SidePage.Body>\n <div className={styles.sidePageBody()}>\n <ThemeEditor\n editingTheme={themes[editingThemeType]}\n currentTheme={currentTheme}\n currentErrors={themeErrors}\n onValueChange={this.handleThemeVariableChange}\n />\n </div>\n </SidePage.Body>\n </SidePage>\n );\n };\n\n private handelGetTheme = () => {\n const currentTheme = this.state.currentTheme;\n const themeObject: Writeable<ThemeIn> = {};\n ThemeFactory.getKeys(currentTheme).forEach((key) => {\n const descriptor = Object.getOwnPropertyDescriptor(currentTheme, key);\n if (descriptor && !descriptor.get && DEFAULT_THEME[key] && currentTheme[key] !== DEFAULT_THEME[key]) {\n themeObject[key] = currentTheme[key] as keyof Theme;\n }\n });\n\n console.log(JSON.stringify(themeObject));\n };\n\n private handleOpen = () => {\n this.setState((state) => ({\n editorOpened: true,\n editingThemeItem: this.editableThemesItems.find((i) => i.value === state.currentThemeType),\n }));\n };\n\n private handleClose = () => {\n this.setState({\n editorOpened: false,\n });\n };\n\n private handleThemeChange = (value: string) => {\n const themeType = value as ThemeType;\n this.setState({\n currentThemeType: themeType,\n currentTheme: this.state.themes[themeType],\n });\n };\n\n private handleThemeVariableChange = (variable: keyof Theme, value: string) => {\n const { editingThemeItem, currentTheme, themes, themesErrors } = this.state;\n const editingThemeType = getEditingThemeType(editingThemeItem);\n\n const theme = themes[editingThemeType];\n const currentValue = theme[variable] as string;\n\n let canSetVariable = true;\n if (ColorFunctions.isValid(currentValue)) {\n canSetVariable = ColorFunctions.isValid(value);\n themesErrors[editingThemeType][variable] = !canSetVariable;\n }\n\n const nextThemeErrors: ThemesErrors = { ...themesErrors };\n nextThemeErrors[editingThemeType][variable] = !canSetVariable;\n const stateUpdate = { themes, currentTheme, themesErrors: nextThemeErrors };\n\n if (canSetVariable) {\n const result = this.changeThemeVariable(theme, variable, value);\n stateUpdate.themes[editingThemeType] = result;\n if (this.state.currentThemeType === editingThemeType) {\n stateUpdate.currentTheme = result;\n }\n }\n\n this.setState(stateUpdate);\n };\n\n private getEditableThemesItems = (query: string) => {\n return Promise.resolve(this.editableThemesItems.filter((i) => i.label.toLowerCase().includes(query.toLowerCase())));\n };\n\n private handleEditingThemeSwitch = (item: EditingThemeItem) => {\n this.setState({ editingThemeItem: item });\n };\n\n private changeThemeVariable = (theme: Theme, variableName: keyof Theme, variableValue: string): Theme => {\n const result: ThemeIn = {};\n ThemeFactory.getKeys(theme).forEach((key) => {\n const descriptor = findPropertyDescriptor(theme, key);\n descriptor.enumerable = true;\n descriptor.configurable = true;\n if (key === variableName) {\n delete descriptor.get;\n delete descriptor.set;\n descriptor.value = variableValue;\n }\n Object.defineProperty(result, key, descriptor);\n });\n\n return ThemeFactory.create<ThemeIn>(result);\n };\n}\n"]}

package/cjs/internal/ThemePlayground/ThemeEditor.d.ts CHANGED Viewed

@@ -17,10 +17,7 @@ interface Group {
     isCommon?: boolean;
 }
 export declare class ThemeEditor extends React.Component<ThemeEditorProps, ThemeEditorState> {
-    state: {
-        groups: never[];
-        isLoading: boolean;
-    };
+    state: ThemeEditorState;
     private updateTimeout?;
     render(): JSX.Element;
     componentDidMount(): void;

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["ThemeEditor.tsx"],"names":["ThemeEditor","state","groups","isLoading","renderGroups","props","editingTheme","currentTheme","currentErrors","onValueChange","keys","ThemeFactory","getKeys","filter","key","isDeprecatedVariable","map","i","title","isCommon","isCommonVariable","bind","reduce","prefixesReducer","isGroupVariable","prefix","DEPRECATED_VARIABLES","length","render","styles","loaderWrapper","loader","componentDidMount","updateTimeout","window","setTimeout","setState","VARIABLES_GROUPS","componentWillUnmount","clearTimeout","React","Component","Group","variables","editorGroupHeader","variable","value","isError","getBaseVariables","name","includes","splitPrefix","split","item","startsWith","trim","prefixes","acc","current","theme","Object","getPrototypeOf","prototype","hasOwnProperty","call","descriptor","getOwnPropertyDescriptor","get","getterBody","toString","variableNameMatchArray","match","v","replace"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { 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 { 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 = {\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"]}
1	+ {"version":3,"sources":["ThemeEditor.tsx"],"names":["ThemeEditor","state","groups","isLoading","renderGroups","props","editingTheme","currentTheme","currentErrors","onValueChange","keys","ThemeFactory","getKeys","filter","key","isDeprecatedVariable","map","i","title","isCommon","isCommonVariable","bind","reduce","prefixesReducer","isGroupVariable","prefix","DEPRECATED_VARIABLES","length","render","styles","loaderWrapper","loader","componentDidMount","updateTimeout","window","setTimeout","setState","VARIABLES_GROUPS","componentWillUnmount","clearTimeout","React","Component","Group","variables","editorGroupHeader","variable","value","isError","getBaseVariables","name","includes","splitPrefix","split","item","startsWith","trim","prefixes","acc","current","theme","Object","getPrototypeOf","prototype","hasOwnProperty","call","descriptor","getOwnPropertyDescriptor","get","getterBody","toString","variableNameMatchArray","match","v","replace"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { 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 { 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"]}

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

@@ -1,9 +1,4 @@
-import { Component } from 'react';
-export declare class TogglePlayground extends Component<{}, any> {
-    state: {
-        checked: boolean;
-        loadingActive: boolean;
-        loading: boolean;
-    };
+import React from 'react';
+export declare class TogglePlayground extends React.Component {
     render(): JSX.Element;
 }

package/cjs/internal/ThemePlayground/TogglePlayground.js CHANGED Viewed

@@ -1,15 +1,9 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.TogglePlayground = void 0;var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireWildcard(require("react"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");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");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;}var
-TogglePlayground = /*#__PURE__*/function (_Component) {(0, _inheritsLoose2.default)(TogglePlayground, _Component);function TogglePlayground() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _Component.call.apply(_Component, [this].concat(args)) || this;_this.
-    state = {
-      checked: false,
-      loadingActive: false,
-      loading: false };return _this;}var _proto = TogglePlayground.prototype;_proto.
+var _Toggle = require("../../components/Toggle");var
+TogglePlayground = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(TogglePlayground, _React$Component);function TogglePlayground() {return _React$Component.apply(this, arguments) || this;}var _proto = TogglePlayground.prototype;_proto.
   render = function render() {
     return /*#__PURE__*/(
       _react.default.createElement(_Gapped.Gapped, { vertical: true }, /*#__PURE__*/
@@ -23,4 +17,4 @@ TogglePlayground = /*#__PURE__*/function (_Component) {(0, _inheritsLoose2.defau
-  };return TogglePlayground;}(_react.Component);exports.TogglePlayground = TogglePlayground;
+  };return TogglePlayground;}(_react.default.Component);exports.TogglePlayground = TogglePlayground;

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["TogglePlayground.tsx"],"names":["TogglePlayground","~~state~~","~~checked~~","~~loadingActive","loading","render","~~Component"],"mappings":"4PAAA;;AAEA;AACA,iD;;AAEaA,gB;AACJC,~~IAAAA,K,GAAQ;AACbC,MAAAA,OAAO,EAAE,KADI;AAEbC,MAAAA,aAAa,EAAE,KAFF;AAGbC,MAAAA,OAAO,EAAE,KAHI,E;;;AAMRC,~~EAAAA,M,GAAP,kBAAgB;AACd;AACE,mCAAC,cAAD,IAAQ,QAAQ,MAAhB;AACE,mCAAC,cAAD,IAAQ,GAAG,EAAE,EAAb;AACE,mCAAC,cAAD,OADF;AAEE,yDAFF,CADF;;AAKE,mCAAC,cAAD,IAAQ,GAAG,EAAE,EAAb;AACE,mCAAC,cAAD,IAAQ,QAAQ,MAAhB,GADF;AAEE,kEAFF,CALF,CADF;;;;AAYD,G,~~2BApBmCC~~,gB","sourcesContent":["import React, ~~{ Component }~~ from 'react';\n\nimport { Gapped } from '../../components/Gapped';\nimport { Toggle } from '../../components/Toggle';\n\nexport class TogglePlayground extends Component~~<{},~~ ~~any>~~ {\n public ~~state = {\n checked: false,\n loadingActive: false,\n loading: false,\n };\n\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"]}
1	+ {"version":3,"sources":["TogglePlayground.tsx"],"names":["TogglePlayground","render","React","Component"],"mappings":"4PAAA;;AAEA;AACA,iD;;AAEaA,gB;AACJC,EAAAA,M,GAAP,kBAAgB;AACd;AACE,mCAAC,cAAD,IAAQ,QAAQ,MAAhB;AACE,mCAAC,cAAD,IAAQ,GAAG,EAAE,EAAb;AACE,mCAAC,cAAD,OADF;AAEE,yDAFF,CADF;;AAKE,mCAAC,cAAD,IAAQ,GAAG,EAAE,EAAb;AACE,mCAAC,cAAD,IAAQ,QAAQ,MAAhB,GADF;AAEE,kEAFF,CALF,CADF;;;;AAYD,G,2BAdmCC,eAAMC,S","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"]}

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

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

package/cjs/internal/ThemePlayground/TokenInputPlayground.js CHANGED Viewed

@@ -42,6 +42,9 @@ var tokenColors = {
 TokenInputPlayground = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(TokenInputPlayground, _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;}var _proto = TokenInputPlayground.prototype;_proto.

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["TokenInputPlayground.tsx"],"names":["getItems","query","Promise","resolve","filter","x","toLowerCase","includes","toString","then","res","setTimeout","bind","tokenColors","First","idle","active","Second","Third","Fourth","Fifth","Sixth","default","TokenInputPlayground","state","selectedItems","render","item","isActive","onClick","onRemove","itemsNew","setState","React","Component"],"mappings":"qbAAA;;AAEA;AACA,+C;;AAEeA,Q,yJAAf,iBAAwBC,KAAxB;AACSC,YAAAA,OAAO,CAACC,OAAR;AACL,aAAC,OAAD,EAAU,QAAV,EAAoB,OAApB,EAA6B,QAA7B,EAAuC,OAAvC,EAAgD,OAAhD,EAAyDC,MAAzD;AACE,sBAACC,CAAD,UAAOA,CAAC,CAACC,WAAF,GAAgBC,QAAhB,CAAyBN,KAAK,CAACK,WAAN,EAAzB,KAAiDD,CAAC,CAACG,QAAF,OAAiBP,KAAzE,EADF,CADK;;AAILQ,YAAAA,IAJK,CAIA,UAACC,GAAD,UAAmB,IAAIR,OAAJ,CAAsB,UAACC,OAAD,UAAaQ,UAAU,CAACR,OAAO,CAACS,IAAR,CAAa,IAAb,EAAmBF,GAAnB,CAAD,EAA0B,GAA1B,CAAvB,EAAtB,CAAnB,EAJA,CADT,0D;;;AAQA,IAAMG,WAA2C,GAAG;AAClDC,EAAAA,KAAK,EAAE;AACLC,IAAAA,IAAI,EAAE,UADD;AAELC,IAAAA,MAAM,EAAE,YAFH,EAD2C;;AAKlDC,EAAAA,MAAM,EAAE;AACNF,IAAAA,IAAI,EAAE,UADA;AAENC,IAAAA,MAAM,EAAE,YAFF,EAL0C;;AASlDE,EAAAA,KAAK,EAAE;AACLH,IAAAA,IAAI,EAAE,WADD;AAELC,IAAAA,MAAM,EAAE,aAFH,EAT2C;;AAalDG,EAAAA,MAAM,EAAE;AACNJ,IAAAA,IAAI,EAAE,YADA;AAENC,IAAAA,MAAM,EAAE,cAFF,EAb0C;;AAiBlDI,EAAAA,KAAK,EAAE;AACLL,IAAAA,IAAI,EAAE,SADD;AAELC,IAAAA,MAAM,EAAE,WAFH,EAjB2C;;AAqBlDK,EAAAA,KAAK,EAAE;AACLN,IAAAA,IAAI,EAAE,OADD;AAELC,IAAAA,MAAM,EAAE,OAFH,EArB2C;;AAyBlDM,EAAAA,OAAO,EAAE;AACPP,IAAAA,IAAI,EAAE,aADC;AAEPC,IAAAA,MAAM,EAAE,eAFD,EAzByC,EAApD,C~~;;;;AA+BaO~~,oB;AACJC,IAAAA,K,~~GAAQ~~,EAAEC,aAAa,EAAE,CAAC,OAAD,EAAU,QAAV,CAAjB,E;;~~AAERC~~,EAAAA,M,GAAP,kBAAgB;AACd;AACE,mCAAC,sBAAD;AACE,QAAA,QAAQ,EAAE1B,QADZ;AAEE,QAAA,aAAa,EAAE,KAAKwB,KAAL,CAAWC,aAF5B;AAGE,QAAA,WAAW,EAAE,qBAACE,IAAD,aAASC,QAAT,QAASA,QAAT,CAAmBC,OAAnB,QAAmBA,OAAnB,CAA4BC,QAA5B,QAA4BA,QAA5B;AACX,yCAAC,YAAD;AACE,cAAA,GAAG,EAAEH,IAAI,CAACnB,QAAL,EADP;AAEE,cAAA,MAAM,EAAEK,WAAW,CAACc,IAAD,CAAX,IAAqBd,WAAW,CAACS,OAF3C;AAGE,cAAA,QAAQ,EAAEM,QAHZ;AAIE,cAAA,OAAO,EAAEC,OAJX;AAKE,cAAA,QAAQ,EAAEC,QALZ;;AAOGH,YAAAA,IAPH,CADW,GAHf;;;AAcE,QAAA,aAAa,EAAE,uBAACI,QAAD,UAAc,MAAI,CAACC,QAAL,CAAc,EAAEP,aAAa,EAAEM,QAAjB,EAAd,CAAd,EAdjB,GADF;;;AAkBD,G,+BAtBuCE,eAAMC,S","sourcesContent":["import React from 'react';\n\nimport { TokenInput } from '../../components/TokenInput';\nimport { Token, TokenColors } 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\nconst tokenColors: { [key: string]: TokenColors } = {\n First: {\n idle: 'grayIdle',\n active: 'grayActive',\n },\n Second: {\n idle: 'blueIdle',\n active: 'blueActive',\n },\n Third: {\n idle: 'greenIdle',\n active: 'greenActive',\n },\n Fourth: {\n idle: 'yellowIdle',\n active: 'yellowActive',\n },\n Fifth: {\n idle: 'redIdle',\n active: 'redActive',\n },\n Sixth: {\n idle: 'white',\n active: 'black',\n },\n default: {\n idle: 'defaultIdle',\n active: 'defaultActive',\n },\n};\n\nexport class TokenInputPlayground extends React.Component~~<any,~~ ~~any>~~ {\n public state = { 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\n key={item.toString()}\n colors={tokenColors[item] \|\| tokenColors.default}\n isActive={isActive}\n onClick={onClick}\n onRemove={onRemove}\n >\n {item}\n </Token>\n )}\n onValueChange={(itemsNew) => this.setState({ selectedItems: itemsNew })}\n />\n );\n }\n}\n"]}
1	+ {"version":3,"sources":["TokenInputPlayground.tsx"],"names":["getItems","query","Promise","resolve","filter","x","toLowerCase","includes","toString","then","res","setTimeout","bind","tokenColors","First","idle","active","Second","Third","Fourth","Fifth","Sixth","default","TokenInputPlayground","state","selectedItems","render","item","isActive","onClick","onRemove","itemsNew","setState","React","Component"],"mappings":"qbAAA;;AAEA;AACA,+C;;AAEeA,Q,yJAAf,iBAAwBC,KAAxB;AACSC,YAAAA,OAAO,CAACC,OAAR;AACL,aAAC,OAAD,EAAU,QAAV,EAAoB,OAApB,EAA6B,QAA7B,EAAuC,OAAvC,EAAgD,OAAhD,EAAyDC,MAAzD;AACE,sBAACC,CAAD,UAAOA,CAAC,CAACC,WAAF,GAAgBC,QAAhB,CAAyBN,KAAK,CAACK,WAAN,EAAzB,KAAiDD,CAAC,CAACG,QAAF,OAAiBP,KAAzE,EADF,CADK;;AAILQ,YAAAA,IAJK,CAIA,UAACC,GAAD,UAAmB,IAAIR,OAAJ,CAAsB,UAACC,OAAD,UAAaQ,UAAU,CAACR,OAAO,CAACS,IAAR,CAAa,IAAb,EAAmBF,GAAnB,CAAD,EAA0B,GAA1B,CAAvB,EAAtB,CAAnB,EAJA,CADT,0D;;;AAQA,IAAMG,WAA2C,GAAG;AAClDC,EAAAA,KAAK,EAAE;AACLC,IAAAA,IAAI,EAAE,UADD;AAELC,IAAAA,MAAM,EAAE,YAFH,EAD2C;;AAKlDC,EAAAA,MAAM,EAAE;AACNF,IAAAA,IAAI,EAAE,UADA;AAENC,IAAAA,MAAM,EAAE,YAFF,EAL0C;;AASlDE,EAAAA,KAAK,EAAE;AACLH,IAAAA,IAAI,EAAE,WADD;AAELC,IAAAA,MAAM,EAAE,aAFH,EAT2C;;AAalDG,EAAAA,MAAM,EAAE;AACNJ,IAAAA,IAAI,EAAE,YADA;AAENC,IAAAA,MAAM,EAAE,cAFF,EAb0C;;AAiBlDI,EAAAA,KAAK,EAAE;AACLL,IAAAA,IAAI,EAAE,SADD;AAELC,IAAAA,MAAM,EAAE,WAFH,EAjB2C;;AAqBlDK,EAAAA,KAAK,EAAE;AACLN,IAAAA,IAAI,EAAE,OADD;AAELC,IAAAA,MAAM,EAAE,OAFH,EArB2C;;AAyBlDM,EAAAA,OAAO,EAAE;AACPP,IAAAA,IAAI,EAAE,aADC;AAEPC,IAAAA,MAAM,EAAE,eAFD,EAzByC,EAApD,C;;;;;;;AAkCaO,oB;AACJC,IAAAA,K,GAAmC,EAAEC,aAAa,EAAE,CAAC,OAAD,EAAU,QAAV,CAAjB,E;;AAEnCC,EAAAA,M,GAAP,kBAAgB;AACd;AACE,mCAAC,sBAAD;AACE,QAAA,QAAQ,EAAE1B,QADZ;AAEE,QAAA,aAAa,EAAE,KAAKwB,KAAL,CAAWC,aAF5B;AAGE,QAAA,WAAW,EAAE,qBAACE,IAAD,aAASC,QAAT,QAASA,QAAT,CAAmBC,OAAnB,QAAmBA,OAAnB,CAA4BC,QAA5B,QAA4BA,QAA5B;AACX,yCAAC,YAAD;AACE,cAAA,GAAG,EAAEH,IAAI,CAACnB,QAAL,EADP;AAEE,cAAA,MAAM,EAAEK,WAAW,CAACc,IAAD,CAAX,IAAqBd,WAAW,CAACS,OAF3C;AAGE,cAAA,QAAQ,EAAEM,QAHZ;AAIE,cAAA,OAAO,EAAEC,OAJX;AAKE,cAAA,QAAQ,EAAEC,QALZ;;AAOGH,YAAAA,IAPH,CADW,GAHf;;;AAcE,QAAA,aAAa,EAAE,uBAACI,QAAD,UAAc,MAAI,CAACC,QAAL,CAAc,EAAEP,aAAa,EAAEM,QAAjB,EAAd,CAAd,EAdjB,GADF;;;AAkBD,G,+BAtBuCE,eAAMC,S","sourcesContent":["import React from 'react';\n\nimport { TokenInput } from '../../components/TokenInput';\nimport { Token, TokenColors } 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\nconst tokenColors: { [key: string]: TokenColors } = {\n First: {\n idle: 'grayIdle',\n active: 'grayActive',\n },\n Second: {\n idle: 'blueIdle',\n active: 'blueActive',\n },\n Third: {\n idle: 'greenIdle',\n active: 'greenActive',\n },\n Fourth: {\n idle: 'yellowIdle',\n active: 'yellowActive',\n },\n Fifth: {\n idle: 'redIdle',\n active: 'redActive',\n },\n Sixth: {\n idle: 'white',\n active: 'black',\n },\n default: {\n idle: 'defaultIdle',\n active: 'defaultActive',\n },\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\n key={item.toString()}\n colors={tokenColors[item] \|\| tokenColors.default}\n isActive={isActive}\n onClick={onClick}\n onRemove={onRemove}\n >\n {item}\n </Token>\n )}\n onValueChange={(itemsNew) => this.setState({ selectedItems: itemsNew })}\n />\n );\n }\n}\n"]}

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

@@ -7,20 +7,17 @@ export interface VariableValueProps {
     variable: string;
     theme: Theme;
     baseVariables: Array<keyof Theme>;
-    deprecated: boolean;
+    deprecated?: boolean;
 }
 export interface VariableValueState {
     value: string;
     editing: boolean;
 }
+declare type DefaultProps = Required<Pick<VariableValueProps, 'deprecated'>>;
 export declare class VariableValue extends React.Component<VariableValueProps, VariableValueState> {
-    static defaultProps: {
-        deprecated: boolean;
-    };
-    state: {
-        value: string;
-        editing: boolean;
-    };
+    static defaultProps: DefaultProps;
+    private getProps;
+    state: VariableValueState;
     private subscription;
     private rootElement;
     private readonly debounceTimeout;
@@ -43,3 +40,4 @@ export declare class VariableValue extends React.Component<VariableValueProps, V
     private handleBlur;
     private emitterEventHandler;
 }
+export {};

package/cjs/internal/ThemePlayground/VariableValue.js CHANGED Viewed

@@ -11,6 +11,7 @@ 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");
@@ -31,10 +32,13 @@ var emitter = new _eventemitter.default();var
 VariableValue = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(VariableValue, _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.
@@ -81,6 +85,7 @@ VariableValue = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.de
     renderBaseVariableLink = function () {
@@ -194,7 +199,7 @@ VariableValue = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.de
       if (name === _this.props.variable && _this.rootElement) {
         _this.rootElement.focus();
       }
-    };return _this;}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,deprecated = _this$props2.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(_Delete.default, null), onClick: this.rollbackToBaseVariable })));};return VariableValue;}(_react.default.Component);exports.VariableValue = VariableValue;VariableValue.defaultProps = { deprecated: false };var
+    };return _this;}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(_Delete.default, null), onClick: this.rollbackToBaseVariable })));};return VariableValue;}(_react.default.Component);exports.VariableValue = VariableValue;VariableValue.defaultProps = { deprecated: false };var

package/cjs/internal/ThemePlayground/VariableValue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["VariableValue.tsx"],"names":["emitter","EventEmitter","VariableValue","state","value","props","editing","subscription","rootElement","debounceTimeout","debounceInterval","undefined","renderBaseVariableLink","baseVariables","styles","baseVariableRoot","colorIcon","baseLinkWrapper","textAlign","map","v","emitClickEvent","handleEditLinkClick","renderInputWrapper","renderInput","renderRollbackIcon","rootRef","instance","background","setState","rollbackToBaseVariable","variable","emit","handleChange","window","setInterval","debounceHandler","onChange","clearInterval","handleBlur","emitterEventHandler","name","focus","render","theme","deprecated","variableName","length","componentDidMount","addListener","remove","removeListener","componentDidUpdate","prevProps","componentWillUnmount","isColorExtended","isError","linkRoot","React","Component","defaultProps","BaseVariableLink","baseVariable","getColorValue","color","colorValue","style","Option"],"mappings":"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","sourcesContent":["import React from 'react';\nimport EditIcon from '@skbkontur/react-icons/Edit';\nimport DeleteIcon from '@skbkontur/react-icons/Delete';\nimport EventEmitter from 'eventemitter3';\n\nimport { isColor } from '../../lib/styles/ColorHelpers';\nimport { Input } from '../../components/Input';\nimport { Gapped } from '../../components/Gapped';\nimport { Theme } from '../../lib/theming/Theme';\nimport { Link } from '../../components/Link';\nimport { Hint } from '../../components/Hint';\nimport { isFunction } from '../../lib/utils';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { styles } from './Playground.styles';\n\nconst emitter = new EventEmitter();\n\nexport interface VariableValueProps {\n onChange: (variable: keyof Theme, value: string) => void;\n value: string;\n isError: boolean;\n variable: string;\n theme: Theme;\n baseVariables: Array<keyof Theme>;\n deprecated: boolean;\n}\n\nexport interface VariableValueState {\n value: string;\n editing: boolean;\n}\n\nexport class VariableValue extends React.Component<VariableValueProps, VariableValueState> {\n public static defaultProps = {\n deprecated: false,\n };\n public state = {\n value: this.props.value,\n editing: false,\n };\n private subscription: { remove: () => void } \| null = null;\n private rootElement: HTMLElement \| null = null;\n private readonly debounceTimeout = 500;\n private debounceInterval: number \| undefined = undefined;\n\n public render() {\n const { variable, theme, baseVariables, deprecated } = this.props;\n return (\n <div className={styles.variable(theme)} ref={this.rootRef} tabIndex={0}>\n <div\n className={cx(styles.variableName(theme), { [styles.deprecated()]: deprecated })}\n title={variable}\n >{`${variable}: `}</div>\n {baseVariables.length > 0 && !this.state.editing ? this.renderBaseVariableLink() : this.renderInputWrapper()}\n </div>\n );\n }\n\n public componentDidMount(): void {\n if (!this.subscription) {\n emitter.addListener('clicked', this.emitterEventHandler);\n this.subscription = {\n remove: () => {\n emitter.removeListener('clicked', this.emitterEventHandler);\n },\n };\n }\n }\n\n public componentDidUpdate(prevProps: VariableValueProps) {\n if (prevProps.value !== this.props.value) {\n this.setState({ value: this.props.value });\n }\n }\n\n public componentWillUnmount(): void {\n if (this.subscription) {\n this.subscription.remove();\n }\n if (this.debounceInterval !== undefined) {\n clearInterval(this.debounceInterval);\n }\n }\n\n private renderBaseVariableLink = () => {\n const baseVariables = this.props.baseVariables;\n return (\n <div className={styles.baseVariableRoot()}>\n {this.colorIcon()}\n <div className={styles.baseLinkWrapper()}>\n <Gapped>\n <div style={{ textAlign: 'right' }}>\n <Gapped vertical>\n {baseVariables.map((v) => (\n <BaseVariableLink key={v} baseVariable={v} emitClickEvent={this.emitClickEvent} />\n ))}\n </Gapped>\n </div>\n <Hint text={'Изменить значение'}>\n <Link icon={<EditIcon />} onClick={this.handleEditLinkClick} />\n </Hint>\n </Gapped>\n </div>\n </div>\n );\n };\n\n private renderInputWrapper = () => {\n return this.state.editing ? (\n <Gapped>\n {this.renderInput()}\n {this.renderRollbackIcon()}\n </Gapped>\n ) : (\n this.renderInput()\n );\n };\n\n private renderInput() {\n return (\n <Input\n leftIcon={isColorExtended(this.state.value) && this.colorIcon()}\n value={this.state.value}\n onValueChange={this.handleChange}\n onBlur={this.handleBlur}\n align={'right'}\n width={this.state.editing ? 225 : 250}\n error={this.props.isError}\n />\n );\n }\n\n private renderRollbackIcon() {\n return (\n <Hint text={'Вернуться к базовой переменной'}>\n <div className={styles.linkRoot()}>\n <Link icon={<DeleteIcon />} onClick={this.rollbackToBaseVariable} />\n </div>\n </Hint>\n );\n }\n\n private rootRef = (instance: HTMLElement \| null) => {\n this.rootElement = instance;\n };\n\n private colorIcon = () => {\n return <div className={styles.colorIcon()} style={{ background: this.state.value }} />;\n };\n\n private handleEditLinkClick = () => {\n this.setState({\n editing: true,\n });\n };\n\n private rollbackToBaseVariable = () => {\n this.setState({\n editing: false,\n value: this.props.value,\n });\n };\n\n private emitClickEvent = (variable: string \| number) => {\n emitter.emit('clicked', variable);\n };\n\n private handleChange = (value: string) => {\n this.setState({\n value,\n });\n\n if (this.debounceInterval === undefined) {\n this.debounceInterval = window.setInterval(this.debounceHandler, this.debounceTimeout);\n }\n };\n\n private debounceHandler = () => {\n const { variable, onChange } = this.props;\n\n onChange(variable as keyof Theme, this.state.value);\n clearInterval(this.debounceInterval);\n this.debounceInterval = undefined;\n };\n\n private handleBlur = () => {\n this.setState({\n editing: false,\n });\n };\n\n private emitterEventHandler = (name: keyof Theme) => {\n if (name === this.props.variable && this.rootElement) {\n this.rootElement.focus();\n }\n };\n}\n\ninterface BaseVariableLinkProps {\n baseVariable: string \| number;\n emitClickEvent: (baseVariable: string \| number) => void;\n}\nclass BaseVariableLink extends React.Component<BaseVariableLinkProps> {\n public render() {\n return <Link onClick={this.emitClickEvent}>{this.props.baseVariable}</Link>;\n }\n private emitClickEvent = () => {\n this.props.emitClickEvent(this.props.baseVariable);\n };\n}\n\ntype Color = string \| (() => string);\n\nconst getColorValue = (color: Color) => {\n if (isFunction(color)) {\n return color();\n }\n\n return color;\n};\n\nfunction isColorExtended(color: Color) {\n const colorValue = getColorValue(color);\n\n const style = new Option().style;\n style.color = colorValue;\n\n if (colorValue) {\n return isColor(colorValue) \|\| style.color === colorValue;\n }\n\n return false;\n}\n"]}
1	+ {"version":3,"sources":["VariableValue.tsx"],"names":["emitter","EventEmitter","VariableValue","getProps","defaultProps","state","value","props","editing","subscription","rootElement","debounceTimeout","debounceInterval","undefined","renderBaseVariableLink","baseVariables","styles","baseVariableRoot","colorIcon","baseLinkWrapper","textAlign","map","v","emitClickEvent","handleEditLinkClick","renderInputWrapper","renderInput","renderRollbackIcon","rootRef","instance","background","setState","rollbackToBaseVariable","variable","emit","handleChange","window","setInterval","debounceHandler","onChange","clearInterval","handleBlur","emitterEventHandler","name","focus","render","theme","deprecated","variableName","length","componentDidMount","addListener","remove","removeListener","componentDidUpdate","prevProps","componentWillUnmount","isColorExtended","isError","linkRoot","React","Component","BaseVariableLink","baseVariable","getColorValue","color","colorValue","style","Option"],"mappings":"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","sourcesContent":["import React from 'react';\nimport EditIcon from '@skbkontur/react-icons/Edit';\nimport DeleteIcon from '@skbkontur/react-icons/Delete';\nimport EventEmitter from 'eventemitter3';\n\nimport { isColor } from '../../lib/styles/ColorHelpers';\nimport { Input } from '../../components/Input';\nimport { Gapped } from '../../components/Gapped';\nimport { Theme } from '../../lib/theming/Theme';\nimport { Link } from '../../components/Link';\nimport { Hint } from '../../components/Hint';\nimport { isFunction } from '../../lib/utils';\nimport { cx } from '../../lib/theming/Emotion';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nimport { styles } from './Playground.styles';\n\nconst emitter = new EventEmitter();\n\nexport interface VariableValueProps {\n onChange: (variable: keyof Theme, value: string) => void;\n value: string;\n isError: boolean;\n variable: string;\n theme: Theme;\n baseVariables: Array<keyof Theme>;\n deprecated?: boolean;\n}\n\nexport interface VariableValueState {\n value: string;\n editing: boolean;\n}\n\ntype DefaultProps = Required<Pick<VariableValueProps, 'deprecated'>>;\n\nexport class VariableValue extends React.Component<VariableValueProps, VariableValueState> {\n public static defaultProps: DefaultProps = {\n deprecated: false,\n };\n private getProps = createPropsGetter(VariableValue.defaultProps);\n public state: VariableValueState = {\n value: this.props.value,\n editing: false,\n };\n private subscription: { remove: () => void } \| null = null;\n private rootElement: HTMLElement \| null = null;\n private readonly debounceTimeout = 500;\n private debounceInterval: number \| undefined = undefined;\n\n public render() {\n const { variable, theme, baseVariables } = this.props;\n const deprecated = this.getProps().deprecated;\n return (\n <div className={styles.variable(theme)} ref={this.rootRef} tabIndex={0}>\n <div\n className={cx(styles.variableName(theme), { [styles.deprecated()]: deprecated })}\n title={variable}\n >{`${variable}: `}</div>\n {baseVariables.length > 0 && !this.state.editing ? this.renderBaseVariableLink() : this.renderInputWrapper()}\n </div>\n );\n }\n\n public componentDidMount(): void {\n if (!this.subscription) {\n emitter.addListener('clicked', this.emitterEventHandler);\n this.subscription = {\n remove: () => {\n emitter.removeListener('clicked', this.emitterEventHandler);\n },\n };\n }\n }\n\n public componentDidUpdate(prevProps: VariableValueProps) {\n if (prevProps.value !== this.props.value) {\n this.setState({ value: this.props.value });\n }\n }\n\n public componentWillUnmount(): void {\n if (this.subscription) {\n this.subscription.remove();\n }\n if (this.debounceInterval !== undefined) {\n clearInterval(this.debounceInterval);\n }\n }\n\n private renderBaseVariableLink = () => {\n const baseVariables = this.props.baseVariables;\n return (\n <div className={styles.baseVariableRoot()}>\n {this.colorIcon()}\n <div className={styles.baseLinkWrapper()}>\n <Gapped>\n <div style={{ textAlign: 'right' }}>\n <Gapped vertical>\n {baseVariables.map((v) => (\n <BaseVariableLink key={v} baseVariable={v} emitClickEvent={this.emitClickEvent} />\n ))}\n </Gapped>\n </div>\n <Hint text={'Изменить значение'}>\n <Link icon={<EditIcon />} onClick={this.handleEditLinkClick} />\n </Hint>\n </Gapped>\n </div>\n </div>\n );\n };\n\n private renderInputWrapper = () => {\n return this.state.editing ? (\n <Gapped>\n {this.renderInput()}\n {this.renderRollbackIcon()}\n </Gapped>\n ) : (\n this.renderInput()\n );\n };\n\n private renderInput() {\n return (\n <Input\n leftIcon={isColorExtended(this.state.value) && this.colorIcon()}\n value={this.state.value}\n onValueChange={this.handleChange}\n onBlur={this.handleBlur}\n align={'right'}\n width={this.state.editing ? 225 : 250}\n error={this.props.isError}\n />\n );\n }\n\n private renderRollbackIcon() {\n return (\n <Hint text={'Вернуться к базовой переменной'}>\n <div className={styles.linkRoot()}>\n <Link icon={<DeleteIcon />} onClick={this.rollbackToBaseVariable} />\n </div>\n </Hint>\n );\n }\n\n private rootRef = (instance: HTMLElement \| null) => {\n this.rootElement = instance;\n };\n\n private colorIcon = () => {\n return <div className={styles.colorIcon()} style={{ background: this.state.value }} />;\n };\n\n private handleEditLinkClick = () => {\n this.setState({\n editing: true,\n });\n };\n\n private rollbackToBaseVariable = () => {\n this.setState({\n editing: false,\n value: this.props.value,\n });\n };\n\n private emitClickEvent = (variable: string \| number) => {\n emitter.emit('clicked', variable);\n };\n\n private handleChange = (value: string) => {\n this.setState({\n value,\n });\n\n if (this.debounceInterval === undefined) {\n this.debounceInterval = window.setInterval(this.debounceHandler, this.debounceTimeout);\n }\n };\n\n private debounceHandler = () => {\n const { variable, onChange } = this.props;\n\n onChange(variable as keyof Theme, this.state.value);\n clearInterval(this.debounceInterval);\n this.debounceInterval = undefined;\n };\n\n private handleBlur = () => {\n this.setState({\n editing: false,\n });\n };\n\n private emitterEventHandler = (name: keyof Theme) => {\n if (name === this.props.variable && this.rootElement) {\n this.rootElement.focus();\n }\n };\n}\n\ninterface BaseVariableLinkProps {\n baseVariable: string \| number;\n emitClickEvent: (baseVariable: string \| number) => void;\n}\nclass BaseVariableLink extends React.Component<BaseVariableLinkProps> {\n public render() {\n return <Link onClick={this.emitClickEvent}>{this.props.baseVariable}</Link>;\n }\n private emitClickEvent = () => {\n this.props.emitClickEvent(this.props.baseVariable);\n };\n}\n\ntype Color = string \| (() => string);\n\nconst getColorValue = (color: Color) => {\n if (isFunction(color)) {\n return color();\n }\n\n return color;\n};\n\nfunction isColorExtended(color: Color) {\n const colorValue = getColorValue(color);\n\n const style = new Option().style;\n style.color = colorValue;\n\n if (colorValue) {\n return isColor(colorValue) \|\| style.color === colorValue;\n }\n\n return false;\n}\n"]}

package/cjs/internal/ThemePlayground/helpers.d.ts CHANGED Viewed

@@ -1,2 +1,2 @@
 import React from 'react';
-export declare const getComponentsFromPropsList: <P extends {}>(component: React.ReactElement<P, string | React.JSXElementConstructor<any>>, propsList: P[]) => React.ReactElement<P, string | React.JSXElementConstructor<any>>[];
+export declare const getComponentsFromPropsList: <P extends Record<string, string>>(component: React.ReactElement<P, string | React.JSXElementConstructor<any>>, propsList: P[]) => React.ReactElement<P, string | React.JSXElementConstructor<any>>[];

package/cjs/internal/ThemePlayground/helpers.js CHANGED Viewed

@@ -2,10 +2,12 @@
 var _Checkbox = require("../../components/Checkbox");
-var getComponentsFromPropsList = function getComponentsFromPropsList(component, propsList) {
+var getComponentsFromPropsList = function getComponentsFromPropsList(
+component,
+propsList)
+{
   return propsList.reduce(function (result, props, index) {
     // NOTE: все это ради чекбокса с фокусом, т.к. нет ни focused, ни autofocus; а ref+focus() снаружи нестабилен
-    // @ts-ignore
     var isCheckbox = component.type === _Checkbox.Checkbox;
     if (isCheckbox) {
       var checkboxProps = props;

package/cjs/internal/ThemePlayground/helpers.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["helpers.tsx"],"names":["getComponentsFromPropsList","component","propsList","reduce","result","props","index","isCheckbox","type","Checkbox","checkboxProps","focused","ref","el","setState","focusedByTab","elementWithProps","React","cloneElement","key"],"mappings":"0PAAA;;AAEA;;AAEO,IAAMA,0BAA0B,GAAG,SAA7BA,0BAA6B,~~CAAeC~~,~~SAAf,EAAiDC,SAAjD,EAAoE~~;~~AAC5G~~,SAAOA,SAAS,CAACC,MAAV,CAAiB,UAACC,MAAD,EAAuCC,KAAvC,EAA8CC,KAA9C,EAAwD;AAC9E;AACA~~;AACA~~,QAAMC,UAAU,GAAGN,SAAS,CAACO,IAAV,KAAmBC,kBAAtC;AACA,QAAIF,UAAJ,EAAgB;AACd,UAAMG,aAAa,GAAGL,KAAtB;AACA,UAAIK,aAAa,CAACC,OAAlB,EAA2B;AACzBD,QAAAA,aAAa,CAACE,GAAd,GAAoB,UAACC,EAAD,EAAQ;AAC1B,cAAIA,EAAJ,EAAQ;AACNA,YAAAA,EAAE,CAACC,QAAH,CAAY,EAAEC,YAAY,EAAE,IAAhB,EAAZ;AACD;AACF,SAJD;AAKA,eAAOL,aAAa,CAACC,OAArB;AACD;AACF;;AAED,QAAMK,gBAAgB,gBAAGC,eAAMC,YAAN,CAAmBjB,SAAnB,6BAAmCI,KAAnC,IAA0Cc,GAAG,EAAEb,KAA/C,IAAzB;;AAEA,qBAAWF,MAAX,GAAmBY,gBAAnB;AACD,~~GAnBM~~,~~EAmBJ~~,~~EAnBI~~,CAAP;~~AAoBD~~,~~CArBM~~,C","sourcesContent":["import React from 'react';\n\nimport { Checkbox } from '../../components/Checkbox';\n\nexport const getComponentsFromPropsList = <P extends ~~{}>~~(component: React.ReactElement<P>, propsList: P[]) => {\n return propsList.reduce((result: Array<React.ReactElement<P>>, props, index) => {\n // NOTE: все это ради чекбокса с фокусом, т.к. нет ни focused, ни autofocus; а ref+focus() снаружи нестабилен\n ~~// @ts-ignore\n~~ const isCheckbox = component.type === Checkbox;\n if (isCheckbox) {\n const checkboxProps = props as unknown as { ref: (el: Checkbox) => void; focused?: boolean };\n if (checkboxProps.focused) {\n checkboxProps.ref = (el) => {\n if (el) {\n el.setState({ focusedByTab: true });\n }\n };\n delete checkboxProps.focused;\n }\n }\n\n const elementWithProps = React.cloneElement(component, { ...props, key: index });\n\n return [...result, elementWithProps];\n }, []);\n};\n"]}
1	+ {"version":3,"sources":["helpers.tsx"],"names":["getComponentsFromPropsList","component","propsList","reduce","result","props","index","isCheckbox","type","Checkbox","checkboxProps","focused","ref","el","setState","focusedByTab","elementWithProps","React","cloneElement","key"],"mappings":"0PAAA;;AAEA;;AAEO,IAAMA,0BAA0B,GAAG,SAA7BA,0BAA6B;AACxCC,SADwC;AAExCC,SAFwC;AAGrC;AACH,SAAOA,SAAS,CAACC,MAAV,CAAiB,UAACC,MAAD,EAAuCC,KAAvC,EAA8CC,KAA9C,EAAwD;AAC9E;AACA,QAAMC,UAAU,GAAGN,SAAS,CAACO,IAAV,KAAmBC,kBAAtC;AACA,QAAIF,UAAJ,EAAgB;AACd,UAAMG,aAAa,GAAGL,KAAtB;AACA,UAAIK,aAAa,CAACC,OAAlB,EAA2B;AACzBD,QAAAA,aAAa,CAACE,GAAd,GAAoB,UAACC,EAAD,EAAQ;AAC1B,cAAIA,EAAJ,EAAQ;AACNA,YAAAA,EAAE,CAACC,QAAH,CAAY,EAAEC,YAAY,EAAE,IAAhB,EAAZ;AACD;AACF,SAJD;AAKA,eAAOL,aAAa,CAACC,OAArB;AACD;AACF;;AAED,QAAMK,gBAAgB,gBAAGC,eAAMC,YAAN,CAAmBjB,SAAnB,6BAAmCI,KAAnC,IAA0Cc,GAAG,EAAEb,KAA/C,IAAzB;;AAEA,qBAAWF,MAAX,GAAmBY,gBAAnB;AACD,GAlBM,EAkBJ,EAlBI,CAAP;AAmBD,CAvBM,C","sourcesContent":["import React from 'react';\n\nimport { Checkbox } from '../../components/Checkbox';\n\nexport const getComponentsFromPropsList = <P extends Record<string, string>>(\n component: React.ReactElement<P>,\n propsList: P[],\n) => {\n return propsList.reduce((result: Array<React.ReactElement<P>>, props, index) => {\n // NOTE: все это ради чекбокса с фокусом, т.к. нет ни focused, ни autofocus; а ref+focus() снаружи нестабилен\n const isCheckbox = component.type === Checkbox;\n if (isCheckbox) {\n const checkboxProps = props as unknown as { ref: (el: Checkbox) => void; focused?: boolean };\n if (checkboxProps.focused) {\n checkboxProps.ref = (el) => {\n if (el) {\n el.setState({ focusedByTab: true });\n }\n };\n delete checkboxProps.focused;\n }\n }\n\n const elementWithProps = React.cloneElement(component, { ...props, key: index });\n\n return [...result, elementWithProps];\n }, []);\n};\n"]}