@skbkontur/react-ui 6.3.4 → 6.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.
- package/CHANGELOG.md +29 -0
- package/components/Input/InputLayout/InputLayout.styles.d.ts +1 -0
- package/components/Input/InputLayout/InputLayout.styles.js +11 -8
- package/components/Input/InputLayout/InputLayout.styles.js.map +1 -1
- package/components/Input/InputLayout/InputLayoutAsideText.js +3 -1
- package/components/Input/InputLayout/InputLayoutAsideText.js.map +1 -1
- package/components/Radio/Radio.js +18 -22
- package/components/Radio/Radio.js.map +1 -1
- package/components/Radio/Radio.styles.js +1 -1
- package/components/Radio/Radio.styles.js.map +1 -1
- package/components/SidePage/SidePage.styles.d.ts +1 -0
- package/components/SidePage/SidePage.styles.js +19 -16
- package/components/SidePage/SidePage.styles.js.map +1 -1
- package/components/SidePage/SidePageHeader.js +3 -0
- package/components/SidePage/SidePageHeader.js.map +1 -1
- package/components/TokenInput/TokenInput.d.ts +17 -16
- package/components/TokenInput/TokenInput.js +202 -59
- package/components/TokenInput/TokenInput.js.map +1 -1
- package/components/TokenInput/TokenInputFailedMenu.d.ts +17 -0
- package/components/TokenInput/TokenInputFailedMenu.js +30 -0
- package/components/TokenInput/TokenInputFailedMenu.js.map +1 -0
- package/components/TokenInput/TokenInputMenu.d.ts +13 -2
- package/components/TokenInput/TokenInputMenu.js +134 -19
- package/components/TokenInput/TokenInputMenu.js.map +1 -1
- package/components/TokenInput/TokenInputMobileMenu.js +3 -2
- package/components/TokenInput/TokenInputMobileMenu.js.map +1 -1
- package/components/TokenInput/TokenInputReducer.d.ts +6 -1
- package/components/TokenInput/TokenInputReducer.js +14 -3
- package/components/TokenInput/TokenInputReducer.js.map +1 -1
- package/components/TokenInput/locale/locales/en.js +1 -0
- package/components/TokenInput/locale/locales/en.js.map +1 -1
- package/components/TokenInput/locale/locales/ru.js +1 -0
- package/components/TokenInput/locale/locales/ru.js.map +1 -1
- package/components/TokenInput/locale/types.d.ts +1 -0
- package/components/TokenInput/locale/types.js.map +1 -1
- package/internal/Popup/Popup.js.map +1 -1
- package/internal/themes/BasicTheme.d.ts +15 -0
- package/internal/themes/BasicTheme.js +21 -0
- package/internal/themes/BasicTheme.js.map +1 -1
- package/internal/themes/DarkTheme6_0.js +1 -0
- package/internal/themes/DarkTheme6_0.js.map +1 -1
- package/internal/themes/DarkTheme6_4.d.ts +1 -0
- package/internal/themes/DarkTheme6_4.js +44 -0
- package/internal/themes/DarkTheme6_4.js.map +1 -0
- package/internal/themes/LightTheme6_4.d.ts +1 -0
- package/internal/themes/LightTheme6_4.js +44 -0
- package/internal/themes/LightTheme6_4.js.map +1 -0
- package/lib/theming/ThemeVersions.d.ts +1 -1
- package/lib/theming/ThemeVersions.js.map +1 -1
- package/lib/theming/themes/DarkTheme.d.ts +1 -0
- package/lib/theming/themes/DarkTheme.js +3 -1
- package/lib/theming/themes/DarkTheme.js.map +1 -1
- package/lib/theming/themes/LightTheme.d.ts +1 -0
- package/lib/theming/themes/LightTheme.js +3 -1
- package/lib/theming/themes/LightTheme.js.map +1 -1
- package/package.json +1 -1
|
@@ -14,11 +14,15 @@ var __extends = (this && this.__extends) || (function () {
|
|
|
14
14
|
};
|
|
15
15
|
})();
|
|
16
16
|
import React from 'react';
|
|
17
|
+
import { ComboBoxRequestStatus } from '../../internal/CustomComboBox/CustomComboBoxTypes.js';
|
|
17
18
|
import { ComboBoxMenu } from '../../internal/CustomComboBox/index.js';
|
|
18
19
|
import { Popup } from '../../internal/Popup/index.js';
|
|
19
20
|
import { ThemeContext } from '../../lib/theming/ThemeContext.js';
|
|
20
21
|
import { ThemeFactory } from '../../lib/theming/ThemeFactory.js';
|
|
22
|
+
import { isThemeGTE } from '../../lib/theming/ThemeHelpers.js';
|
|
21
23
|
import { TokenInputDataTids } from './TokenInput.js';
|
|
24
|
+
import { TokenInputFailedMenu } from './TokenInputFailedMenu.js';
|
|
25
|
+
var cursorNearFieldEdgeTolerancePx = 1;
|
|
22
26
|
var TokenInputMenu = /** @class */ (function (_super) {
|
|
23
27
|
__extends(TokenInputMenu, _super);
|
|
24
28
|
function TokenInputMenu() {
|
|
@@ -26,50 +30,161 @@ var TokenInputMenu = /** @class */ (function (_super) {
|
|
|
26
30
|
_this.state = {};
|
|
27
31
|
_this.menu = null;
|
|
28
32
|
_this.getMenuRef = function () { return _this.menu; };
|
|
29
|
-
_this.handleMenuPositionChange = function (
|
|
33
|
+
_this.handleMenuPositionChange = function (position, isFullyVisible) {
|
|
34
|
+
var nextState = {};
|
|
35
|
+
if (_this.shouldUpgradeToRootAnchor(position)) {
|
|
36
|
+
nextState.useRootAnchor = true;
|
|
37
|
+
}
|
|
30
38
|
if (!_this.state.forceMenuLeftAlign && !isFullyVisible && _this.props.menuAlign === 'cursor') {
|
|
31
|
-
|
|
39
|
+
nextState.forceMenuLeftAlign = true;
|
|
40
|
+
}
|
|
41
|
+
if (Object.keys(nextState).length > 0) {
|
|
42
|
+
_this.setState(nextState);
|
|
32
43
|
}
|
|
33
|
-
};
|
|
34
|
-
_this.getPopupMargin = function () {
|
|
35
|
-
var paddingY = parseInt(_this.theme.tokenInputPaddingYSmall, 10) || 0;
|
|
36
|
-
var outlineWidth = parseInt(_this.theme.controlOutlineWidth, 10) || 0;
|
|
37
|
-
var marginY = parseInt(_this.theme.tokenMarginYSmall, 10) || 0;
|
|
38
|
-
return paddingY + outlineWidth + marginY;
|
|
39
44
|
};
|
|
40
45
|
_this.menuRef = function (node) { return (_this.menu = node); };
|
|
41
46
|
return _this;
|
|
42
47
|
}
|
|
48
|
+
TokenInputMenu.prototype.componentDidUpdate = function (prevProps) {
|
|
49
|
+
if (prevProps.opened && !this.props.opened && (this.state.forceMenuLeftAlign || this.state.useRootAnchor)) {
|
|
50
|
+
this.setState({ forceMenuLeftAlign: false, useRootAnchor: false });
|
|
51
|
+
}
|
|
52
|
+
};
|
|
43
53
|
TokenInputMenu.prototype.render = function () {
|
|
44
54
|
var _this = this;
|
|
45
55
|
return (React.createElement(ThemeContext.Consumer, null, function (theme) {
|
|
46
56
|
_this.theme = theme;
|
|
47
57
|
return (React.createElement(ThemeContext.Provider, { value: ThemeFactory.create({
|
|
48
|
-
popupMargin: _this.getPopupMargin() + 'px',
|
|
49
58
|
popupBackground: _this.theme.tokenInputMenuPopupBg,
|
|
50
59
|
}, theme) }, _this.renderMain()));
|
|
51
60
|
}));
|
|
52
61
|
};
|
|
53
|
-
TokenInputMenu.prototype.
|
|
62
|
+
TokenInputMenu.prototype.getLabelPaddingY = function (t, size) {
|
|
63
|
+
switch (size) {
|
|
64
|
+
case 'large':
|
|
65
|
+
return parseInt(t.tokenInputPaddingYLarge, 10) || 0;
|
|
66
|
+
case 'medium':
|
|
67
|
+
return parseInt(t.tokenInputPaddingYMedium, 10) || 0;
|
|
68
|
+
case 'small':
|
|
69
|
+
default:
|
|
70
|
+
return parseInt(t.tokenInputPaddingYSmall, 10) || 0;
|
|
71
|
+
}
|
|
72
|
+
};
|
|
73
|
+
TokenInputMenu.prototype.getTokenPaddingY = function (t, size) {
|
|
74
|
+
switch (size) {
|
|
75
|
+
case 'large':
|
|
76
|
+
return parseInt(t.tokenPaddingYLarge, 10) || 0;
|
|
77
|
+
case 'medium':
|
|
78
|
+
return parseInt(t.tokenPaddingYMedium, 10) || 0;
|
|
79
|
+
case 'small':
|
|
80
|
+
default:
|
|
81
|
+
return parseInt(t.tokenPaddingYSmall, 10) || 0;
|
|
82
|
+
}
|
|
83
|
+
};
|
|
84
|
+
TokenInputMenu.prototype.getTokenMarginY = function (t, size) {
|
|
85
|
+
switch (size) {
|
|
86
|
+
case 'large':
|
|
87
|
+
return parseInt(t.tokenMarginYLarge, 10) || 0;
|
|
88
|
+
case 'medium':
|
|
89
|
+
return parseInt(t.tokenMarginYMedium, 10) || 0;
|
|
90
|
+
case 'small':
|
|
91
|
+
default:
|
|
92
|
+
return parseInt(t.tokenMarginYSmall, 10) || 0;
|
|
93
|
+
}
|
|
94
|
+
};
|
|
95
|
+
TokenInputMenu.prototype.getExpectedDistanceToFieldEdge = function (t, size) {
|
|
96
|
+
var tokenPaddingY = this.getTokenPaddingY(t, size);
|
|
97
|
+
var tokenBorderWidth = parseInt(t.tokenBorderWidth, 10) || 0;
|
|
98
|
+
var tokenMarginY = this.getTokenMarginY(t, size);
|
|
99
|
+
var labelPaddingY = this.getLabelPaddingY(t, size);
|
|
100
|
+
var labelBorderWidth = parseInt(t.tokenInputBorderWidth, 10) || 0;
|
|
101
|
+
return tokenPaddingY + tokenBorderWidth + tokenMarginY + labelPaddingY + labelBorderWidth;
|
|
102
|
+
};
|
|
103
|
+
TokenInputMenu.prototype.getAnchorRects = function () {
|
|
104
|
+
var _a = this.props, anchorElementRoot = _a.anchorElementRoot, anchorElementForCursor = _a.anchorElementForCursor;
|
|
105
|
+
if (!(anchorElementRoot instanceof HTMLElement) || !(anchorElementForCursor instanceof HTMLElement)) {
|
|
106
|
+
return null;
|
|
107
|
+
}
|
|
108
|
+
return {
|
|
109
|
+
root: anchorElementRoot.getBoundingClientRect(),
|
|
110
|
+
cursor: anchorElementForCursor.getBoundingClientRect(),
|
|
111
|
+
};
|
|
112
|
+
};
|
|
113
|
+
TokenInputMenu.prototype.isCursorNearFieldTop = function () {
|
|
114
|
+
var rects = this.getAnchorRects();
|
|
115
|
+
if (!rects) {
|
|
116
|
+
return false;
|
|
117
|
+
}
|
|
118
|
+
var expected = this.getExpectedDistanceToFieldEdge(this.theme, this.props.size);
|
|
119
|
+
return rects.cursor.top - rects.root.top <= expected + cursorNearFieldEdgeTolerancePx;
|
|
120
|
+
};
|
|
121
|
+
TokenInputMenu.prototype.isCursorNearFieldBottom = function () {
|
|
122
|
+
var rects = this.getAnchorRects();
|
|
123
|
+
if (!rects) {
|
|
124
|
+
return false;
|
|
125
|
+
}
|
|
126
|
+
var expected = this.getExpectedDistanceToFieldEdge(this.theme, this.props.size);
|
|
127
|
+
return rects.root.bottom - rects.cursor.bottom <= expected + cursorNearFieldEdgeTolerancePx;
|
|
128
|
+
};
|
|
129
|
+
TokenInputMenu.prototype.shouldUseRootAnchor = function (menuAlign) {
|
|
130
|
+
if (menuAlign === 'left') {
|
|
131
|
+
return true;
|
|
132
|
+
}
|
|
133
|
+
if (!isThemeGTE(this.theme, '6.4')) {
|
|
134
|
+
return false;
|
|
135
|
+
}
|
|
136
|
+
return !!this.state.useRootAnchor;
|
|
137
|
+
};
|
|
138
|
+
TokenInputMenu.prototype.shouldUpgradeToRootAnchor = function (position) {
|
|
139
|
+
if (this.state.useRootAnchor || !isThemeGTE(this.theme, '6.4') || this.props.menuAlign !== 'cursor') {
|
|
140
|
+
return false;
|
|
141
|
+
}
|
|
142
|
+
var direction = position.split(' ')[0];
|
|
143
|
+
if (direction === 'top') {
|
|
144
|
+
return this.isCursorNearFieldTop();
|
|
145
|
+
}
|
|
146
|
+
return this.isCursorNearFieldBottom();
|
|
147
|
+
};
|
|
148
|
+
TokenInputMenu.prototype.getPopupMargin = function (menuAlign) {
|
|
149
|
+
var t = this.theme;
|
|
150
|
+
var menuOffsetY = parseInt(t.tokenInputMenuOffsetY, 10) || 0;
|
|
151
|
+
if (isThemeGTE(t, '6.4')) {
|
|
152
|
+
return menuOffsetY;
|
|
153
|
+
}
|
|
154
|
+
if (menuAlign === 'left') {
|
|
155
|
+
return 1;
|
|
156
|
+
}
|
|
54
157
|
switch (this.props.size) {
|
|
55
158
|
case 'large':
|
|
56
|
-
return t.tokenInputPopupMarginLarge;
|
|
159
|
+
return parseInt(t.tokenInputPopupMarginLarge, 10) || 0;
|
|
57
160
|
case 'medium':
|
|
58
|
-
return t.tokenInputPopupMarginMedium;
|
|
161
|
+
return parseInt(t.tokenInputPopupMarginMedium, 10) || 0;
|
|
59
162
|
case 'small':
|
|
60
163
|
default:
|
|
61
|
-
return t.tokenInputPopupMarginSmall;
|
|
164
|
+
return parseInt(t.tokenInputPopupMarginSmall, 10) || 0;
|
|
165
|
+
}
|
|
166
|
+
};
|
|
167
|
+
TokenInputMenu.prototype.getPopupOffset = function (menuAlign, useRootAnchor) {
|
|
168
|
+
var baseOffset = parseInt(this.theme.tokenInputPopupOffset, 10) || 0;
|
|
169
|
+
if (menuAlign === 'left') {
|
|
170
|
+
return baseOffset;
|
|
171
|
+
}
|
|
172
|
+
var cursorOffset = 8 + baseOffset;
|
|
173
|
+
if (!useRootAnchor) {
|
|
174
|
+
return cursorOffset;
|
|
175
|
+
}
|
|
176
|
+
var rects = this.getAnchorRects();
|
|
177
|
+
if (!rects) {
|
|
178
|
+
return cursorOffset;
|
|
62
179
|
}
|
|
180
|
+
return rects.root.left - rects.cursor.left + cursorOffset;
|
|
63
181
|
};
|
|
64
182
|
TokenInputMenu.prototype.renderMain = function () {
|
|
65
183
|
var _a = this.props, loading = _a.loading, maxMenuHeight = _a.maxMenuHeight, renderTotalCount = _a.renderTotalCount, totalCount = _a.totalCount, opened = _a.opened, items = _a.items, renderNotFound = _a.renderNotFound, renderItem = _a.renderItem, onValueChange = _a.onValueChange, renderAddButton = _a.renderAddButton, anchorElementForCursor = _a.anchorElementForCursor, anchorElementRoot = _a.anchorElementRoot, menuWidth = _a.menuWidth;
|
|
66
184
|
var menuAlign = this.state.forceMenuLeftAlign ? 'left' : this.props.menuAlign;
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
? parseInt(this.theme.tokenInputPopupOffset)
|
|
71
|
-
: 8 + parseInt(this.theme.tokenInputPopupOffset), margin: menuAlign === 'left' ? 1 : parseInt(this.getPopupMarginSize(this.theme)), hasShadow: true, width: menuAlign === 'cursor' ? 'auto' : menuWidth, onPositionChange: this.handleMenuPositionChange },
|
|
72
|
-
React.createElement(ComboBoxMenu, { size: this.props.size, items: items, loading: loading, hasMargin: false, maxMenuHeight: maxMenuHeight, onValueChange: onValueChange, opened: opened, refMenu: this.menuRef, renderTotalCount: renderTotalCount, renderItem: renderItem, renderNotFound: renderNotFound, totalCount: totalCount, renderAddButton: renderAddButton })));
|
|
185
|
+
var isCursorAlign = menuAlign === 'cursor';
|
|
186
|
+
var useRootAnchor = this.shouldUseRootAnchor(menuAlign);
|
|
187
|
+
return (React.createElement(Popup, { id: this.props.popupMenuId, "data-tid": TokenInputDataTids.tokenInputMenu, opened: !!opened, positions: isCursorAlign ? ['bottom left', 'top left'] : ['bottom left', 'top left', 'bottom right', 'top right'], anchorElement: useRootAnchor ? anchorElementRoot : anchorElementForCursor, popupOffset: this.getPopupOffset(menuAlign, useRootAnchor), margin: this.getPopupMargin(menuAlign), hasShadow: true, width: isCursorAlign ? 'auto' : menuWidth, onPositionChange: this.handleMenuPositionChange }, opened && items === null && this.props.requestStatus === ComboBoxRequestStatus.Failed && !loading ? (React.createElement(TokenInputFailedMenu, { refMenu: this.menuRef, maxMenuHeight: maxMenuHeight, size: this.props.size, hasMargin: false, repeatRequest: this.props.repeatRequest, renderAddButton: renderAddButton })) : (React.createElement(ComboBoxMenu, { size: this.props.size, items: items, loading: loading, hasMargin: false, maxMenuHeight: maxMenuHeight, onValueChange: onValueChange, opened: opened, refMenu: this.menuRef, renderTotalCount: renderTotalCount, renderItem: renderItem, renderNotFound: renderNotFound, totalCount: totalCount, renderAddButton: renderAddButton, requestStatus: this.props.requestStatus, repeatRequest: this.props.repeatRequest }))));
|
|
73
188
|
};
|
|
74
189
|
TokenInputMenu.__KONTUR_REACT_UI__ = 'TokenInputMenu';
|
|
75
190
|
TokenInputMenu.displayName = 'TokenInputMenu';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TokenInputMenu.js","sourceRoot":"","sources":["TokenInputMenu.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { ComboBoxMenu } from '../../internal/CustomComboBox/index.js';\nimport type { ComboBoxMenuProps } from '../../internal/CustomComboBox/index.js';\nimport type { Menu } from '../../internal/Menu/index.js';\nimport type { PopupPositionsType, PopupProps } from '../../internal/Popup/index.js';\nimport { Popup } from '../../internal/Popup/index.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory.js';\nimport type { HTMLProps } from '../../typings/html.js';\nimport type { TokenSize } from '../Token/index.js';\nimport type { TokenInputMenuAlign, TokenInputProps } from './TokenInput.js';\nimport { TokenInputDataTids } from './TokenInput.js';\n\nexport interface TokenInputMenuProps<T> extends ComboBoxMenuProps<T> {\n /** html-элемент от которого будет позиционировано Menu в случае menuAlign cursor */\n anchorElementForCursor: PopupProps['anchorElement'];\n /** html-элемент от которого будет позиционировано Menu в случае menuAlign left */\n anchorElementRoot: PopupProps['anchorElement'];\n /** Задает ширину выпадающего меню. */\n menuWidth: TokenInputProps<string>['menuWidth'];\n /** Задает выравнивание выпадающего меню. */\n menuAlign: TokenInputMenuAlign;\n /** Задает id выпадающему меню.\n Полезно при реализации a11y. Например, помогает связать aria-controls с выпадающим меню. */\n popupMenuId?: HTMLProps['id'];\n /** Задает размер контрола. */\n size?: TokenSize;\n}\n\ninterface TokenInputMenuState {\n forceMenuLeftAlign?: boolean;\n}\n\nexport class TokenInputMenu<T = string> extends React.Component<TokenInputMenuProps<T>, TokenInputMenuState> {\n public static __KONTUR_REACT_UI__ = 'TokenInputMenu';\n public static displayName = 'TokenInputMenu';\n\n public state: TokenInputMenuState = {};\n\n private theme!: Theme;\n\n private menu: Menu | null = null;\n\n public render(): React.JSX.Element {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return (\n <ThemeContext.Provider\n value={ThemeFactory.create(\n {\n popupMargin: this.getPopupMargin() + 'px',\n popupBackground: this.theme.tokenInputMenuPopupBg,\n },\n theme,\n )}\n >\n {this.renderMain()}\n </ThemeContext.Provider>\n );\n }}\n </ThemeContext.Consumer>\n );\n }\n\n public getMenuRef = (): Menu | null => this.menu;\n\n private getPopupMarginSize(t: Theme) {\n switch (this.props.size) {\n case 'large':\n return t.tokenInputPopupMarginLarge;\n case 'medium':\n return t.tokenInputPopupMarginMedium;\n case 'small':\n default:\n return t.tokenInputPopupMarginSmall;\n }\n }\n\n private renderMain() {\n const {\n loading,\n maxMenuHeight,\n renderTotalCount,\n totalCount,\n opened,\n items,\n renderNotFound,\n renderItem,\n onValueChange,\n renderAddButton,\n anchorElementForCursor,\n anchorElementRoot,\n menuWidth,\n } = this.props;\n\n const menuAlign = this.state.forceMenuLeftAlign ? 'left' : this.props.menuAlign;\n\n return (\n <Popup\n id={this.props.popupMenuId}\n data-tid={TokenInputDataTids.tokenInputMenu}\n opened={!!opened}\n positions={\n menuAlign === 'cursor'\n ? ['bottom left', 'top left']\n : ['bottom left', 'top left', 'bottom right', 'top right']\n }\n anchorElement={menuAlign === 'cursor' ? anchorElementForCursor : anchorElementRoot}\n popupOffset={\n menuAlign === 'left'\n ? parseInt(this.theme.tokenInputPopupOffset)\n : 8 + parseInt(this.theme.tokenInputPopupOffset)\n }\n margin={menuAlign === 'left' ? 1 : parseInt(this.getPopupMarginSize(this.theme))}\n hasShadow\n width={menuAlign === 'cursor' ? 'auto' : menuWidth}\n onPositionChange={this.handleMenuPositionChange}\n >\n <ComboBoxMenu\n size={this.props.size}\n items={items}\n loading={loading}\n hasMargin={false}\n maxMenuHeight={maxMenuHeight}\n onValueChange={onValueChange}\n opened={opened}\n refMenu={this.menuRef}\n renderTotalCount={renderTotalCount}\n renderItem={renderItem}\n renderNotFound={renderNotFound}\n totalCount={totalCount}\n renderAddButton={renderAddButton}\n />\n </Popup>\n );\n }\n\n private handleMenuPositionChange = (_: PopupPositionsType, isFullyVisible: boolean) => {\n if (!this.state.forceMenuLeftAlign && !isFullyVisible && this.props.menuAlign === 'cursor') {\n this.setState({ forceMenuLeftAlign: true });\n }\n };\n\n private getPopupMargin = (): number => {\n const paddingY = parseInt(this.theme.tokenInputPaddingYSmall, 10) || 0;\n const outlineWidth = parseInt(this.theme.controlOutlineWidth, 10) || 0;\n const marginY = parseInt(this.theme.tokenMarginYSmall, 10) || 0;\n\n return paddingY + outlineWidth + marginY;\n };\n\n private menuRef = (node: any) => (this.menu = node);\n}\n"]}
|
|
1
|
+
{"version":3,"file":"TokenInputMenu.js","sourceRoot":"","sources":["TokenInputMenu.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { ComboBoxRequestStatus } from '../../internal/CustomComboBox/CustomComboBoxTypes.js';\nimport { ComboBoxMenu } from '../../internal/CustomComboBox/index.js';\nimport type { ComboBoxMenuProps } from '../../internal/CustomComboBox/index.js';\nimport type { Menu } from '../../internal/Menu/index.js';\nimport type { PopupPositionsType, PopupProps } from '../../internal/Popup/index.js';\nimport { Popup } from '../../internal/Popup/index.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory.js';\nimport { isThemeGTE } from '../../lib/theming/ThemeHelpers.js';\nimport type { HTMLProps } from '../../typings/html.js';\nimport type { TokenSize } from '../Token/index.js';\nimport type { TokenInputMenuAlign, TokenInputProps } from './TokenInput.js';\nimport { TokenInputDataTids } from './TokenInput.js';\nimport { TokenInputFailedMenu } from './TokenInputFailedMenu.js';\n\nconst cursorNearFieldEdgeTolerancePx = 1;\n\nexport interface TokenInputMenuProps<T> extends ComboBoxMenuProps<T> {\n /** html-элемент от которого будет позиционировано Menu в случае menuAlign cursor */\n anchorElementForCursor: PopupProps['anchorElement'];\n /** html-элемент от которого будет позиционировано Menu в случае menuAlign left */\n anchorElementRoot: PopupProps['anchorElement'];\n /** Задает ширину выпадающего меню. */\n menuWidth: TokenInputProps<string>['menuWidth'];\n /** Задает выравнивание выпадающего меню. */\n menuAlign: TokenInputMenuAlign;\n /** Задает id выпадающему меню.\n Полезно при реализации a11y. Например, помогает связать aria-controls с выпадающим меню. */\n popupMenuId?: HTMLProps['id'];\n /** Задает размер контрола. */\n size?: TokenSize;\n}\n\ninterface TokenInputMenuState {\n forceMenuLeftAlign?: boolean;\n useRootAnchor?: boolean;\n}\n\nexport class TokenInputMenu<T = string> extends React.Component<TokenInputMenuProps<T>, TokenInputMenuState> {\n public static __KONTUR_REACT_UI__ = 'TokenInputMenu';\n public static displayName = 'TokenInputMenu';\n\n public state: TokenInputMenuState = {};\n\n private theme!: Theme;\n\n private menu: Menu | null = null;\n\n public componentDidUpdate(prevProps: TokenInputMenuProps<T>) {\n if (prevProps.opened && !this.props.opened && (this.state.forceMenuLeftAlign || this.state.useRootAnchor)) {\n this.setState({ forceMenuLeftAlign: false, useRootAnchor: false });\n }\n }\n\n public render(): React.JSX.Element {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return (\n <ThemeContext.Provider\n value={ThemeFactory.create(\n {\n popupBackground: this.theme.tokenInputMenuPopupBg,\n },\n theme,\n )}\n >\n {this.renderMain()}\n </ThemeContext.Provider>\n );\n }}\n </ThemeContext.Consumer>\n );\n }\n\n public getMenuRef = (): Menu | null => this.menu;\n\n private getLabelPaddingY(t: Theme, size: TokenSize | undefined): number {\n switch (size) {\n case 'large':\n return parseInt(t.tokenInputPaddingYLarge, 10) || 0;\n case 'medium':\n return parseInt(t.tokenInputPaddingYMedium, 10) || 0;\n case 'small':\n default:\n return parseInt(t.tokenInputPaddingYSmall, 10) || 0;\n }\n }\n\n private getTokenPaddingY(t: Theme, size: TokenSize | undefined): number {\n switch (size) {\n case 'large':\n return parseInt(t.tokenPaddingYLarge, 10) || 0;\n case 'medium':\n return parseInt(t.tokenPaddingYMedium, 10) || 0;\n case 'small':\n default:\n return parseInt(t.tokenPaddingYSmall, 10) || 0;\n }\n }\n\n private getTokenMarginY(t: Theme, size: TokenSize | undefined): number {\n switch (size) {\n case 'large':\n return parseInt(t.tokenMarginYLarge, 10) || 0;\n case 'medium':\n return parseInt(t.tokenMarginYMedium, 10) || 0;\n case 'small':\n default:\n return parseInt(t.tokenMarginYSmall, 10) || 0;\n }\n }\n\n private getExpectedDistanceToFieldEdge(t: Theme, size: TokenSize | undefined): number {\n const tokenPaddingY = this.getTokenPaddingY(t, size);\n const tokenBorderWidth = parseInt(t.tokenBorderWidth, 10) || 0;\n const tokenMarginY = this.getTokenMarginY(t, size);\n const labelPaddingY = this.getLabelPaddingY(t, size);\n const labelBorderWidth = parseInt(t.tokenInputBorderWidth, 10) || 0;\n\n return tokenPaddingY + tokenBorderWidth + tokenMarginY + labelPaddingY + labelBorderWidth;\n }\n\n private getAnchorRects() {\n const { anchorElementRoot, anchorElementForCursor } = this.props;\n if (!(anchorElementRoot instanceof HTMLElement) || !(anchorElementForCursor instanceof HTMLElement)) {\n return null;\n }\n\n return {\n root: anchorElementRoot.getBoundingClientRect(),\n cursor: anchorElementForCursor.getBoundingClientRect(),\n };\n }\n\n private isCursorNearFieldTop(): boolean {\n const rects = this.getAnchorRects();\n if (!rects) {\n return false;\n }\n\n const expected = this.getExpectedDistanceToFieldEdge(this.theme, this.props.size);\n return rects.cursor.top - rects.root.top <= expected + cursorNearFieldEdgeTolerancePx;\n }\n\n private isCursorNearFieldBottom(): boolean {\n const rects = this.getAnchorRects();\n if (!rects) {\n return false;\n }\n\n const expected = this.getExpectedDistanceToFieldEdge(this.theme, this.props.size);\n return rects.root.bottom - rects.cursor.bottom <= expected + cursorNearFieldEdgeTolerancePx;\n }\n\n private shouldUseRootAnchor(menuAlign: TokenInputMenuAlign): boolean {\n if (menuAlign === 'left') {\n return true;\n }\n\n if (!isThemeGTE(this.theme, '6.4')) {\n return false;\n }\n\n return !!this.state.useRootAnchor;\n }\n\n private shouldUpgradeToRootAnchor(position: PopupPositionsType): boolean {\n if (this.state.useRootAnchor || !isThemeGTE(this.theme, '6.4') || this.props.menuAlign !== 'cursor') {\n return false;\n }\n\n const direction = position.split(' ')[0];\n\n if (direction === 'top') {\n return this.isCursorNearFieldTop();\n }\n\n return this.isCursorNearFieldBottom();\n }\n\n private getPopupMargin(menuAlign: TokenInputMenuAlign): number {\n const t = this.theme;\n const menuOffsetY = parseInt(t.tokenInputMenuOffsetY, 10) || 0;\n\n if (isThemeGTE(t, '6.4')) {\n return menuOffsetY;\n }\n\n if (menuAlign === 'left') {\n return 1;\n }\n\n switch (this.props.size) {\n case 'large':\n return parseInt(t.tokenInputPopupMarginLarge, 10) || 0;\n case 'medium':\n return parseInt(t.tokenInputPopupMarginMedium, 10) || 0;\n case 'small':\n default:\n return parseInt(t.tokenInputPopupMarginSmall, 10) || 0;\n }\n }\n\n private getPopupOffset(menuAlign: TokenInputMenuAlign, useRootAnchor: boolean): number {\n const baseOffset = parseInt(this.theme.tokenInputPopupOffset, 10) || 0;\n\n if (menuAlign === 'left') {\n return baseOffset;\n }\n\n const cursorOffset = 8 + baseOffset;\n if (!useRootAnchor) {\n return cursorOffset;\n }\n\n const rects = this.getAnchorRects();\n if (!rects) {\n return cursorOffset;\n }\n\n return rects.root.left - rects.cursor.left + cursorOffset;\n }\n\n private renderMain() {\n const {\n loading,\n maxMenuHeight,\n renderTotalCount,\n totalCount,\n opened,\n items,\n renderNotFound,\n renderItem,\n onValueChange,\n renderAddButton,\n anchorElementForCursor,\n anchorElementRoot,\n menuWidth,\n } = this.props;\n\n const menuAlign = this.state.forceMenuLeftAlign ? 'left' : this.props.menuAlign;\n const isCursorAlign = menuAlign === 'cursor';\n const useRootAnchor = this.shouldUseRootAnchor(menuAlign);\n\n return (\n <Popup\n id={this.props.popupMenuId}\n data-tid={TokenInputDataTids.tokenInputMenu}\n opened={!!opened}\n positions={\n isCursorAlign ? ['bottom left', 'top left'] : ['bottom left', 'top left', 'bottom right', 'top right']\n }\n anchorElement={useRootAnchor ? anchorElementRoot : anchorElementForCursor}\n popupOffset={this.getPopupOffset(menuAlign, useRootAnchor)}\n margin={this.getPopupMargin(menuAlign)}\n hasShadow\n width={isCursorAlign ? 'auto' : menuWidth}\n onPositionChange={this.handleMenuPositionChange}\n >\n {opened && items === null && this.props.requestStatus === ComboBoxRequestStatus.Failed && !loading ? (\n <TokenInputFailedMenu\n refMenu={this.menuRef}\n maxMenuHeight={maxMenuHeight}\n size={this.props.size}\n hasMargin={false}\n repeatRequest={this.props.repeatRequest}\n renderAddButton={renderAddButton}\n />\n ) : (\n <ComboBoxMenu\n size={this.props.size}\n items={items}\n loading={loading}\n hasMargin={false}\n maxMenuHeight={maxMenuHeight}\n onValueChange={onValueChange}\n opened={opened}\n refMenu={this.menuRef}\n renderTotalCount={renderTotalCount}\n renderItem={renderItem}\n renderNotFound={renderNotFound}\n totalCount={totalCount}\n renderAddButton={renderAddButton}\n requestStatus={this.props.requestStatus}\n repeatRequest={this.props.repeatRequest}\n />\n )}\n </Popup>\n );\n }\n\n private handleMenuPositionChange = (position: PopupPositionsType, isFullyVisible: boolean) => {\n const nextState: Partial<TokenInputMenuState> = {};\n\n if (this.shouldUpgradeToRootAnchor(position)) {\n nextState.useRootAnchor = true;\n }\n\n if (!this.state.forceMenuLeftAlign && !isFullyVisible && this.props.menuAlign === 'cursor') {\n nextState.forceMenuLeftAlign = true;\n }\n\n if (Object.keys(nextState).length > 0) {\n this.setState(nextState);\n }\n };\n\n private menuRef = (node: any) => (this.menu = node);\n}\n"]}
|
|
@@ -14,8 +14,10 @@ var __extends = (this && this.__extends) || (function () {
|
|
|
14
14
|
};
|
|
15
15
|
})();
|
|
16
16
|
import React from 'react';
|
|
17
|
+
import { ComboBoxRequestStatus } from '../../internal/CustomComboBox/CustomComboBoxTypes.js';
|
|
17
18
|
import { ComboBoxMenu } from '../../internal/CustomComboBox/index.js';
|
|
18
19
|
import { MobilePopup } from '../../internal/MobilePopup/index.js';
|
|
20
|
+
import { TokenInputFailedMenu } from './TokenInputFailedMenu.js';
|
|
19
21
|
var TokenInputMobileMenu = /** @class */ (function (_super) {
|
|
20
22
|
__extends(TokenInputMobileMenu, _super);
|
|
21
23
|
function TokenInputMobileMenu() {
|
|
@@ -29,8 +31,7 @@ var TokenInputMobileMenu = /** @class */ (function (_super) {
|
|
|
29
31
|
}
|
|
30
32
|
TokenInputMobileMenu.prototype.render = function () {
|
|
31
33
|
var _a = this.props, loading = _a.loading, maxMenuHeight = _a.maxMenuHeight, renderTotalCount = _a.renderTotalCount, totalCount = _a.totalCount, opened = _a.opened, items = _a.items, renderNotFound = _a.renderNotFound, renderItem = _a.renderItem, onValueChange = _a.onValueChange, renderAddButton = _a.renderAddButton, onCloseRequest = _a.onCloseRequest;
|
|
32
|
-
return (React.createElement(MobilePopup, { opened: true, footerChildComponent: this.props.mobileFooterComponent, size: this.props.size, id: this.props.popupMenuId, onCloseRequest: onCloseRequest },
|
|
33
|
-
React.createElement(ComboBoxMenu, { size: this.props.size, items: items, loading: loading, hasMargin: false, refMenu: this.menuRef, maxMenuHeight: maxMenuHeight, onValueChange: onValueChange, opened: opened, renderTotalCount: renderTotalCount, renderItem: renderItem, renderNotFound: renderNotFound, totalCount: totalCount, renderAddButton: renderAddButton })));
|
|
34
|
+
return (React.createElement(MobilePopup, { opened: true, footerChildComponent: this.props.mobileFooterComponent, size: this.props.size, id: this.props.popupMenuId, onCloseRequest: onCloseRequest }, opened && items === null && this.props.requestStatus === ComboBoxRequestStatus.Failed && !loading ? (React.createElement(TokenInputFailedMenu, { refMenu: this.menuRef, maxMenuHeight: maxMenuHeight, size: this.props.size, isMobile: true, hasMargin: false, repeatRequest: this.props.repeatRequest, renderAddButton: renderAddButton })) : (React.createElement(ComboBoxMenu, { size: this.props.size, items: items, loading: loading, hasMargin: false, refMenu: this.menuRef, maxMenuHeight: maxMenuHeight, onValueChange: onValueChange, opened: opened, renderTotalCount: renderTotalCount, renderItem: renderItem, renderNotFound: renderNotFound, totalCount: totalCount, renderAddButton: renderAddButton, requestStatus: this.props.requestStatus, repeatRequest: this.props.repeatRequest }))));
|
|
34
35
|
};
|
|
35
36
|
TokenInputMobileMenu.__KONTUR_REACT_UI__ = 'TokenInputMobileMenu';
|
|
36
37
|
TokenInputMobileMenu.displayName = 'TokenInputMobileMenu';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TokenInputMobileMenu.js","sourceRoot":"","sources":["TokenInputMobileMenu.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AACA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"TokenInputMobileMenu.js","sourceRoot":"","sources":["TokenInputMobileMenu.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,qBAAqB,EAAE,MAAM,sDAAsD,CAAC;AAE7F,OAAO,EAAE,YAAY,EAAE,MAAM,wCAAwC,CAAC;AAEtE,OAAO,EAAE,WAAW,EAAE,MAAM,qCAAqC,CAAC;AAIlE,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAcjE;IAAsD,wCAA6C;IAAnG;;QAIU,UAAI,GAAgB,IAAI,CAAC;QAE1B,gBAAU,GAAG,cAAmB,OAAA,KAAI,CAAC,IAAI,EAAT,CAAS,CAAC;QA0DzC,aAAO,GAAG,UAAC,IAAoB;YACrC,KAAI,CAAC,IAAI,GAAG,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,IAAI,CAAC;QAC3B,CAAC,CAAC;;IACJ,CAAC;IA3DQ,qCAAM,GAAb;QACQ,IAAA,KAYF,IAAI,CAAC,KAAK,EAXZ,OAAO,aAAA,EACP,aAAa,mBAAA,EACb,gBAAgB,sBAAA,EAChB,UAAU,gBAAA,EACV,MAAM,YAAA,EACN,KAAK,WAAA,EACL,cAAc,oBAAA,EACd,UAAU,gBAAA,EACV,aAAa,mBAAA,EACb,eAAe,qBAAA,EACf,cAAc,oBACF,CAAC;QAEf,OAAO,CACL,oBAAC,WAAW,IACV,MAAM,QACN,oBAAoB,EAAE,IAAI,CAAC,KAAK,CAAC,qBAAqB,EACtD,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EACrB,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,WAAW,EAC1B,cAAc,EAAE,cAAc,IAE7B,MAAM,IAAI,KAAK,KAAK,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,aAAa,KAAK,qBAAqB,CAAC,MAAM,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CACnG,oBAAC,oBAAoB,IACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,aAAa,EAAE,aAAa,EAC5B,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EACrB,QAAQ,QACR,SAAS,EAAE,KAAK,EAChB,aAAa,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa,EACvC,eAAe,EAAE,eAAe,GAChC,CACH,CAAC,CAAC,CAAC,CACF,oBAAC,YAAY,IACX,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EACrB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,KAAK,EAChB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,aAAa,EAAE,aAAa,EAC5B,aAAa,EAAE,aAAa,EAC5B,MAAM,EAAE,MAAM,EACd,gBAAgB,EAAE,gBAAgB,EAClC,UAAU,EAAE,UAAU,EACtB,cAAc,EAAE,cAAc,EAC9B,UAAU,EAAE,UAAU,EACtB,eAAe,EAAE,eAAe,EAChC,aAAa,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa,EACvC,aAAa,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa,GACvC,CACH,CACW,CACf,CAAC;IACJ,CAAC;IA7Da,wCAAmB,GAAG,sBAAsB,AAAzB,CAA0B;IAC7C,gCAAW,GAAG,sBAAsB,AAAzB,CAA0B;IAiErD,2BAAC;CAAA,AAnED,CAAsD,KAAK,CAAC,SAAS,GAmEpE;SAnEY,oBAAoB","sourcesContent":["import type { ReactElement, ReactNode } from 'react';\nimport React from 'react';\n\nimport { ComboBoxRequestStatus } from '../../internal/CustomComboBox/CustomComboBoxTypes.js';\nimport type { ComboBoxMenuProps } from '../../internal/CustomComboBox/index.js';\nimport { ComboBoxMenu } from '../../internal/CustomComboBox/index.js';\nimport type { Menu } from '../../internal/Menu/index.js';\nimport { MobilePopup } from '../../internal/MobilePopup/index.js';\nimport type { HTMLProps } from '../../typings/html.js';\nimport type { Nullable } from '../../typings/utility-types.js';\nimport type { TokenSize } from '../Token/index.js';\nimport { TokenInputFailedMenu } from './TokenInputFailedMenu.js';\n\nexport interface TokenInputMobileMenuProps<T> extends ComboBoxMenuProps<T> {\n /** Задает id выпадающему меню.\n Полезно при реализации a11y. Например, помогает связать aria-controls с выпадающим меню. */\n popupMenuId?: HTMLProps['id'];\n /** Задает размер контрола. */\n size?: TokenSize;\n /** Компонент для футера в мобильном попапе */\n mobileFooterComponent?: ReactNode;\n /** Функция вызываем при клике по вуали в мобильном модале */\n onCloseRequest?: () => void;\n}\n\nexport class TokenInputMobileMenu<T = string> extends React.Component<TokenInputMobileMenuProps<T>> {\n public static __KONTUR_REACT_UI__ = 'TokenInputMobileMenu';\n public static displayName = 'TokenInputMobileMenu';\n\n private menu: Menu | null = null;\n\n public getMenuRef = (): Menu | null => this.menu;\n\n public render(): ReactElement {\n const {\n loading,\n maxMenuHeight,\n renderTotalCount,\n totalCount,\n opened,\n items,\n renderNotFound,\n renderItem,\n onValueChange,\n renderAddButton,\n onCloseRequest,\n } = this.props;\n\n return (\n <MobilePopup\n opened\n footerChildComponent={this.props.mobileFooterComponent}\n size={this.props.size}\n id={this.props.popupMenuId}\n onCloseRequest={onCloseRequest}\n >\n {opened && items === null && this.props.requestStatus === ComboBoxRequestStatus.Failed && !loading ? (\n <TokenInputFailedMenu\n refMenu={this.menuRef}\n maxMenuHeight={maxMenuHeight}\n size={this.props.size}\n isMobile\n hasMargin={false}\n repeatRequest={this.props.repeatRequest}\n renderAddButton={renderAddButton}\n />\n ) : (\n <ComboBoxMenu\n size={this.props.size}\n items={items}\n loading={loading}\n hasMargin={false}\n refMenu={this.menuRef}\n maxMenuHeight={maxMenuHeight}\n onValueChange={onValueChange}\n opened={opened}\n renderTotalCount={renderTotalCount}\n renderItem={renderItem}\n renderNotFound={renderNotFound}\n totalCount={totalCount}\n renderAddButton={renderAddButton}\n requestStatus={this.props.requestStatus}\n repeatRequest={this.props.repeatRequest}\n />\n )}\n </MobilePopup>\n );\n }\n\n private menuRef = (node: Nullable<Menu>) => {\n this.menu = node ?? null;\n };\n}\n"]}
|
|
@@ -1,4 +1,8 @@
|
|
|
1
|
+
import { ComboBoxRequestStatus } from '../../internal/CustomComboBox/CustomComboBoxTypes.js';
|
|
1
2
|
import type { TokenInputState } from './TokenInput.js';
|
|
3
|
+
export interface TokenInputInternalState<T> extends TokenInputState<T> {
|
|
4
|
+
requestStatus: ComboBoxRequestStatus;
|
|
5
|
+
}
|
|
2
6
|
export interface TokenInputAction {
|
|
3
7
|
type: TokenInputActionType;
|
|
4
8
|
payload?: any;
|
|
@@ -14,6 +18,7 @@ export declare const TokenActions: {
|
|
|
14
18
|
SET_ACTIVE_TOKENS: string;
|
|
15
19
|
REMOVE_ALL_ACTIVE_TOKENS: string;
|
|
16
20
|
SET_LOADING: string;
|
|
21
|
+
SET_REQUEST_FAILURE: string;
|
|
17
22
|
CLEAR_INPUT: string;
|
|
18
23
|
RESET: string;
|
|
19
24
|
SET_EDITING_TOKEN_INDEX: string;
|
|
@@ -24,4 +29,4 @@ export declare const TokenActions: {
|
|
|
24
29
|
SET_CLOSE_MOBILE_POPUP: string;
|
|
25
30
|
};
|
|
26
31
|
export type TokenInputActionType = keyof typeof TokenActions;
|
|
27
|
-
export declare function tokenInputReducer<T = string>(state:
|
|
32
|
+
export declare function tokenInputReducer<T = string>(state: TokenInputInternalState<T>, action: TokenInputAction): Pick<TokenInputInternalState<T>, never>;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { ComboBoxRequestStatus } from '../../internal/CustomComboBox/CustomComboBoxTypes.js';
|
|
1
2
|
import { DefaultState } from './TokenInput.js';
|
|
2
3
|
export var TokenActions = {
|
|
3
4
|
SET_INPUT_VALUE_WIDTH: 'SET_INPUT_VALUE_WIDTH',
|
|
@@ -10,6 +11,7 @@ export var TokenActions = {
|
|
|
10
11
|
SET_ACTIVE_TOKENS: 'SET_ACTIVE_TOKENS',
|
|
11
12
|
REMOVE_ALL_ACTIVE_TOKENS: 'REMOVE_ALL_ACTIVE_TOKENS',
|
|
12
13
|
SET_LOADING: 'SET_LOADING',
|
|
14
|
+
SET_REQUEST_FAILURE: 'SET_REQUEST_FAILURE',
|
|
13
15
|
CLEAR_INPUT: 'CLEAR_INPUT',
|
|
14
16
|
RESET: 'RESET',
|
|
15
17
|
SET_EDITING_TOKEN_INDEX: 'SET_EDITING_TOKEN_INDEX',
|
|
@@ -38,7 +40,7 @@ export function tokenInputReducer(state, action) {
|
|
|
38
40
|
return { preventBlur: payload };
|
|
39
41
|
}
|
|
40
42
|
case TokenActions.SET_AUTOCOMPLETE_ITEMS: {
|
|
41
|
-
return { autocompleteItems: payload };
|
|
43
|
+
return { autocompleteItems: payload, loading: false, requestStatus: ComboBoxRequestStatus.Unknown };
|
|
42
44
|
}
|
|
43
45
|
case TokenActions.SET_ACTIVE_TOKENS: {
|
|
44
46
|
return { activeTokens: payload };
|
|
@@ -49,17 +51,24 @@ export function tokenInputReducer(state, action) {
|
|
|
49
51
|
preventBlur: false,
|
|
50
52
|
autocompleteItems: undefined,
|
|
51
53
|
activeTokens: [],
|
|
54
|
+
loading: false,
|
|
55
|
+
requestStatus: ComboBoxRequestStatus.Unknown,
|
|
52
56
|
};
|
|
53
57
|
}
|
|
54
58
|
case TokenActions.REMOVE_ALL_ACTIVE_TOKENS: {
|
|
55
59
|
return { activeTokens: [] };
|
|
56
60
|
}
|
|
57
61
|
case TokenActions.CLEAR_INPUT: {
|
|
58
|
-
return { inputValue: '', autocompleteItems: undefined };
|
|
62
|
+
return { inputValue: '', autocompleteItems: undefined, requestStatus: ComboBoxRequestStatus.Unknown };
|
|
59
63
|
}
|
|
60
64
|
case TokenActions.SET_LOADING: {
|
|
65
|
+
return payload ? { loading: true } : { loading: false, requestStatus: ComboBoxRequestStatus.Unknown };
|
|
66
|
+
}
|
|
67
|
+
case TokenActions.SET_REQUEST_FAILURE: {
|
|
61
68
|
return {
|
|
62
|
-
loading:
|
|
69
|
+
loading: false,
|
|
70
|
+
autocompleteItems: undefined,
|
|
71
|
+
requestStatus: ComboBoxRequestStatus.Failed,
|
|
63
72
|
};
|
|
64
73
|
}
|
|
65
74
|
case TokenActions.RESET: {
|
|
@@ -87,6 +96,8 @@ export function tokenInputReducer(state, action) {
|
|
|
87
96
|
preventBlur: false,
|
|
88
97
|
autocompleteItems: undefined,
|
|
89
98
|
activeTokens: [],
|
|
99
|
+
loading: false,
|
|
100
|
+
requestStatus: ComboBoxRequestStatus.Unknown,
|
|
90
101
|
};
|
|
91
102
|
}
|
|
92
103
|
default:
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TokenInputReducer.js","sourceRoot":"","sources":["TokenInputReducer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"TokenInputReducer.js","sourceRoot":"","sources":["TokenInputReducer.ts"],"names":[],"mappings":"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","sourcesContent":["import { ComboBoxRequestStatus } from '../../internal/CustomComboBox/CustomComboBoxTypes.js';\nimport { DefaultState } from './TokenInput.js';\nimport type { TokenInputState } from './TokenInput.js';\n\nexport interface TokenInputInternalState<T> extends TokenInputState<T> {\n requestStatus: ComboBoxRequestStatus;\n}\n\nexport interface TokenInputAction {\n type: TokenInputActionType;\n payload?: any;\n}\n\nexport const TokenActions = {\n SET_INPUT_VALUE_WIDTH: 'SET_INPUT_VALUE_WIDTH',\n SET_INPUT_VALUE_HEIGHT: 'SET_INPUT_VALUE_HEIGHT',\n UPDATE_QUERY: 'UPDATE_QUERY',\n SET_FOCUS_IN: 'SET_FOCUS_IN',\n SET_PREVENT_BLUR: 'SET_PREVENT_BLUR',\n BLUR: 'BLUR',\n SET_AUTOCOMPLETE_ITEMS: 'SET_AUTOCOMPLETE_ITEMS',\n SET_ACTIVE_TOKENS: 'SET_ACTIVE_TOKENS',\n REMOVE_ALL_ACTIVE_TOKENS: 'REMOVE_ALL_ACTIVE_TOKENS',\n SET_LOADING: 'SET_LOADING',\n SET_REQUEST_FAILURE: 'SET_REQUEST_FAILURE',\n CLEAR_INPUT: 'CLEAR_INPUT',\n RESET: 'RESET',\n SET_EDITING_TOKEN_INDEX: 'SET_EDITING_TOKEN_INDEX',\n REMOVE_EDITING_TOKEN_INDEX: 'REMOVE_EDITING_TOKEN_INDEX',\n SET_TEMPORARY_QUERY: 'SET_TEMPORARY_QUERY',\n REMOVE_TEMPORARY_QUERY: 'REMOVE_TEMPORARY_QUERY',\n SET_SHOW_MOBILE_POPUP: 'SET_SHOW_MOBILE_POPUP',\n SET_CLOSE_MOBILE_POPUP: 'SET_CLOSE_MOBILE_POPUP',\n};\n\nexport type TokenInputActionType = keyof typeof TokenActions;\n\nexport function tokenInputReducer<T = string>(\n state: TokenInputInternalState<T>,\n action: TokenInputAction,\n): Pick<TokenInputInternalState<T>, never> {\n const payload = action.payload;\n switch (action.type) {\n case TokenActions.SET_INPUT_VALUE_WIDTH: {\n return { inputValueWidth: payload };\n }\n case TokenActions.SET_INPUT_VALUE_HEIGHT: {\n return { inputValueHeight: payload };\n }\n case TokenActions.UPDATE_QUERY: {\n return { inputValue: payload };\n }\n case TokenActions.SET_FOCUS_IN: {\n return { inFocus: true };\n }\n case TokenActions.SET_PREVENT_BLUR: {\n return { preventBlur: payload };\n }\n case TokenActions.SET_AUTOCOMPLETE_ITEMS: {\n return { autocompleteItems: payload, loading: false, requestStatus: ComboBoxRequestStatus.Unknown };\n }\n case TokenActions.SET_ACTIVE_TOKENS: {\n return { activeTokens: payload };\n }\n case TokenActions.BLUR: {\n return {\n inFocus: false,\n preventBlur: false,\n autocompleteItems: undefined,\n activeTokens: [],\n loading: false,\n requestStatus: ComboBoxRequestStatus.Unknown,\n };\n }\n case TokenActions.REMOVE_ALL_ACTIVE_TOKENS: {\n return { activeTokens: [] };\n }\n case TokenActions.CLEAR_INPUT: {\n return { inputValue: '', autocompleteItems: undefined, requestStatus: ComboBoxRequestStatus.Unknown };\n }\n case TokenActions.SET_LOADING: {\n return payload ? { loading: true } : { loading: false, requestStatus: ComboBoxRequestStatus.Unknown };\n }\n case TokenActions.SET_REQUEST_FAILURE: {\n return {\n loading: false,\n autocompleteItems: undefined,\n requestStatus: ComboBoxRequestStatus.Failed,\n };\n }\n case TokenActions.RESET: {\n return DefaultState;\n }\n case TokenActions.SET_EDITING_TOKEN_INDEX: {\n return { editingTokenIndex: payload };\n }\n case TokenActions.REMOVE_EDITING_TOKEN_INDEX: {\n return { editingTokenIndex: -1 };\n }\n case TokenActions.SET_TEMPORARY_QUERY: {\n return { reservedInputValue: payload };\n }\n case TokenActions.REMOVE_TEMPORARY_QUERY: {\n return { reservedInputValue: undefined };\n }\n case TokenActions.SET_SHOW_MOBILE_POPUP: {\n return { showMobilePopup: true };\n }\n case TokenActions.SET_CLOSE_MOBILE_POPUP: {\n return {\n showMobilePopup: false,\n inFocus: false,\n preventBlur: false,\n autocompleteItems: undefined,\n activeTokens: [],\n loading: false,\n requestStatus: ComboBoxRequestStatus.Unknown,\n };\n }\n default:\n return state;\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"en.js","sourceRoot":"","sources":["en.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,IAAM,iBAAiB,GAAqB;IACjD,gBAAgB,EAAE,YAAY;IAC9B,cAAc,EAAE,KAAK;CACtB,CAAC","sourcesContent":["import type { TokenInputLocale } from '../types.js';\n\nexport const componentsLocales: TokenInputLocale = {\n addButtonComment: 'Type comma',\n addButtonTitle: 'Add',\n};\n"]}
|
|
1
|
+
{"version":3,"file":"en.js","sourceRoot":"","sources":["en.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,IAAM,iBAAiB,GAAqB;IACjD,gBAAgB,EAAE,YAAY;IAC9B,uBAAuB,EAAE,gBAAgB;IACzC,cAAc,EAAE,KAAK;CACtB,CAAC","sourcesContent":["import type { TokenInputLocale } from '../types.js';\n\nexport const componentsLocales: TokenInputLocale = {\n addButtonComment: 'Type comma',\n addButtonInvalidComment: 'Invalid format',\n addButtonTitle: 'Add',\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ru.js","sourceRoot":"","sources":["ru.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,IAAM,iBAAiB,GAAqB;IACjD,gBAAgB,EAAE,iBAAiB;IACnC,cAAc,EAAE,UAAU;CAC3B,CAAC","sourcesContent":["import type { TokenInputLocale } from '../types.js';\n\nexport const componentsLocales: TokenInputLocale = {\n addButtonComment: 'Нажмите запятую',\n addButtonTitle: 'Добавить',\n};\n"]}
|
|
1
|
+
{"version":3,"file":"ru.js","sourceRoot":"","sources":["ru.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,IAAM,iBAAiB,GAAqB;IACjD,gBAAgB,EAAE,iBAAiB;IACnC,uBAAuB,EAAE,iBAAiB;IAC1C,cAAc,EAAE,UAAU;CAC3B,CAAC","sourcesContent":["import type { TokenInputLocale } from '../types.js';\n\nexport const componentsLocales: TokenInputLocale = {\n addButtonComment: 'Нажмите запятую',\n addButtonInvalidComment: 'Неверный формат',\n addButtonTitle: 'Добавить',\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["types.ts"],"names":[],"mappings":"","sourcesContent":["export interface TokenInputLocale {\n addButtonComment: string;\n addButtonTitle: string;\n}\n"]}
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["types.ts"],"names":[],"mappings":"","sourcesContent":["export interface TokenInputLocale {\n addButtonComment: string;\n addButtonInvalidComment: string;\n addButtonTitle: string;\n}\n"]}
|