@skbkontur/react-ui 3.7.2 → 3.8.3
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 +60 -2
- package/README.md +1 -1
- package/cjs/components/Checkbox/Checkbox.styles.js +1 -2
- package/cjs/components/Checkbox/Checkbox.styles.js.map +1 -1
- package/cjs/components/CurrencyLabel/CurrencyLabel.js +5 -14
- package/cjs/components/CurrencyLabel/CurrencyLabel.js.map +1 -1
- package/cjs/components/DateInput/DateInput.js +2 -1
- package/cjs/components/DateInput/DateInput.js.map +1 -1
- package/cjs/components/DatePicker/DatePicker.d.ts +3 -2
- package/cjs/components/DatePicker/DatePicker.js +12 -5
- package/cjs/components/DatePicker/DatePicker.js.map +1 -1
- package/cjs/components/Dropdown/Dropdown.d.ts +1 -0
- package/cjs/components/Dropdown/Dropdown.js +1 -0
- package/cjs/components/Dropdown/Dropdown.js.map +1 -1
- package/cjs/components/Dropdown/Dropdown.md +0 -1
- package/cjs/components/DropdownMenu/DropdownMenu.d.ts +17 -3
- package/cjs/components/DropdownMenu/DropdownMenu.js +15 -1
- package/cjs/components/DropdownMenu/DropdownMenu.js.map +1 -1
- package/cjs/components/DropdownMenu/DropdownMenu.md +87 -6
- package/cjs/components/Kebab/Kebab.d.ts +5 -2
- package/cjs/components/Kebab/Kebab.js +5 -1
- package/cjs/components/Kebab/Kebab.js.map +1 -1
- package/cjs/components/Kebab/Kebab.md +249 -3
- package/cjs/components/MenuHeader/MenuHeader.d.ts +5 -1
- package/cjs/components/MenuHeader/MenuHeader.js +5 -1
- package/cjs/components/MenuHeader/MenuHeader.js.map +1 -1
- package/cjs/components/MenuHeader/MenuHeader.md +23 -0
- package/cjs/components/MenuItem/MenuItem.d.ts +10 -1
- package/cjs/components/MenuItem/MenuItem.js +11 -1
- package/cjs/components/MenuItem/MenuItem.js.map +1 -1
- package/cjs/components/MenuItem/MenuItem.md +106 -4
- package/cjs/components/MenuSeparator/MenuSeparator.d.ts +3 -1
- package/cjs/components/MenuSeparator/MenuSeparator.js +3 -1
- package/cjs/components/MenuSeparator/MenuSeparator.js.map +1 -1
- package/cjs/components/MenuSeparator/MenuSeparator.md +14 -0
- package/cjs/components/Modal/Modal.styles.d.ts +1 -0
- package/cjs/components/Modal/Modal.styles.js +22 -20
- package/cjs/components/Modal/Modal.styles.js.map +1 -1
- package/cjs/components/Modal/ModalClose.js +23 -3
- package/cjs/components/Modal/ModalClose.js.map +1 -1
- package/cjs/components/Textarea/Textarea.d.ts +0 -2
- package/cjs/components/Textarea/Textarea.js +6 -3
- package/cjs/components/Textarea/Textarea.js.map +1 -1
- package/cjs/components/Toggle/Toggle.d.ts +47 -1
- package/cjs/components/Toggle/Toggle.js +52 -2
- package/cjs/components/Toggle/Toggle.js.map +1 -1
- package/cjs/components/Toggle/Toggle.md +83 -9
- package/cjs/components/Toggle/Toggle.styles.d.ts +3 -0
- package/cjs/components/Toggle/Toggle.styles.js +36 -23
- package/cjs/components/Toggle/Toggle.styles.js.map +1 -1
- package/cjs/components/TooltipMenu/TooltipMenu.d.ts +26 -8
- package/cjs/components/TooltipMenu/TooltipMenu.js +24 -6
- package/cjs/components/TooltipMenu/TooltipMenu.js.map +1 -1
- package/cjs/components/TooltipMenu/TooltipMenu.md +76 -8
- package/cjs/internal/CommonWrapper/CommonWrapper.d.ts +9 -1
- package/cjs/internal/CommonWrapper/CommonWrapper.js +8 -0
- package/cjs/internal/CommonWrapper/CommonWrapper.js.map +1 -1
- package/cjs/internal/CustomComboBox/ComboBoxView.js +2 -1
- package/cjs/internal/CustomComboBox/ComboBoxView.js.map +1 -1
- package/cjs/internal/CustomComboBox/CustomComboBoxReducer.js +3 -2
- package/cjs/internal/CustomComboBox/CustomComboBoxReducer.js.map +1 -1
- package/cjs/internal/InputLikeText/InputLikeText.d.ts +1 -0
- package/cjs/internal/InputLikeText/InputLikeText.js +8 -3
- package/cjs/internal/InputLikeText/InputLikeText.js.map +1 -1
- package/cjs/internal/InputLikeText/InputLikeText.styles.d.ts +1 -1
- package/cjs/internal/InputLikeText/InputLikeText.styles.js +1 -1
- package/cjs/internal/InputLikeText/InputLikeText.styles.js.map +1 -1
- package/cjs/internal/RenderContainer/RenderContainer.js +2 -1
- package/cjs/internal/RenderContainer/RenderContainer.js.map +1 -1
- package/cjs/internal/ThemeShowcase/VariablesCollector.d.ts +1 -1
- package/cjs/internal/themes/DefaultTheme.d.ts +3 -0
- package/cjs/internal/themes/DefaultTheme.js +11 -2
- package/cjs/internal/themes/DefaultTheme.js.map +1 -1
- package/cjs/lib/Upgrades.d.ts +2 -0
- package/cjs/lib/Upgrades.js +14 -0
- package/cjs/lib/Upgrades.js.map +1 -1
- package/cjs/lib/theming/Emotion.js +1 -1
- package/cjs/lib/theming/Emotion.js.map +1 -1
- package/components/Checkbox/Checkbox.styles/Checkbox.styles.js +1 -1
- package/components/Checkbox/Checkbox.styles/Checkbox.styles.js.map +1 -1
- package/components/CurrencyLabel/CurrencyLabel/CurrencyLabel.js +5 -11
- package/components/CurrencyLabel/CurrencyLabel/CurrencyLabel.js.map +1 -1
- package/components/DateInput/DateInput/DateInput.js +2 -1
- package/components/DateInput/DateInput/DateInput.js.map +1 -1
- package/components/DatePicker/DatePicker/DatePicker.js +12 -4
- package/components/DatePicker/DatePicker/DatePicker.js.map +1 -1
- package/components/DatePicker/DatePicker.d.ts +3 -2
- package/components/Dropdown/Dropdown/Dropdown.js +1 -0
- package/components/Dropdown/Dropdown/Dropdown.js.map +1 -1
- package/components/Dropdown/Dropdown.d.ts +1 -0
- package/components/Dropdown/Dropdown.md +0 -1
- package/components/DropdownMenu/DropdownMenu/DropdownMenu.js +1 -1
- package/components/DropdownMenu/DropdownMenu/DropdownMenu.js.map +1 -1
- package/components/DropdownMenu/DropdownMenu.d.ts +17 -3
- package/components/DropdownMenu/DropdownMenu.md +87 -6
- package/components/Kebab/Kebab/Kebab.js +2 -1
- package/components/Kebab/Kebab/Kebab.js.map +1 -1
- package/components/Kebab/Kebab.d.ts +5 -2
- package/components/Kebab/Kebab.md +249 -3
- package/components/MenuHeader/MenuHeader/MenuHeader.js +5 -1
- package/components/MenuHeader/MenuHeader/MenuHeader.js.map +1 -1
- package/components/MenuHeader/MenuHeader.d.ts +5 -1
- package/components/MenuHeader/MenuHeader.md +23 -0
- package/components/MenuItem/MenuItem/MenuItem.js +4 -1
- package/components/MenuItem/MenuItem/MenuItem.js.map +1 -1
- package/components/MenuItem/MenuItem.d.ts +10 -1
- package/components/MenuItem/MenuItem.md +106 -4
- package/components/MenuSeparator/MenuSeparator/MenuSeparator.js +3 -1
- package/components/MenuSeparator/MenuSeparator/MenuSeparator.js.map +1 -1
- package/components/MenuSeparator/MenuSeparator.d.ts +3 -1
- package/components/MenuSeparator/MenuSeparator.md +14 -0
- package/components/Modal/Modal.styles/Modal.styles.js +18 -15
- package/components/Modal/Modal.styles/Modal.styles.js.map +1 -1
- package/components/Modal/Modal.styles.d.ts +1 -0
- package/components/Modal/ModalClose/ModalClose.js +25 -2
- package/components/Modal/ModalClose/ModalClose.js.map +1 -1
- package/components/Textarea/Textarea/Textarea.js +1 -2
- package/components/Textarea/Textarea/Textarea.js.map +1 -1
- package/components/Textarea/Textarea.d.ts +0 -2
- package/components/Toggle/Toggle/Toggle.js +11 -5
- package/components/Toggle/Toggle/Toggle.js.map +1 -1
- package/components/Toggle/Toggle.d.ts +47 -1
- package/components/Toggle/Toggle.md +83 -9
- package/components/Toggle/Toggle.styles/Toggle.styles.js +21 -15
- package/components/Toggle/Toggle.styles/Toggle.styles.js.map +1 -1
- package/components/Toggle/Toggle.styles.d.ts +3 -0
- package/components/TooltipMenu/TooltipMenu/TooltipMenu.js +9 -6
- package/components/TooltipMenu/TooltipMenu/TooltipMenu.js.map +1 -1
- package/components/TooltipMenu/TooltipMenu.d.ts +26 -8
- package/components/TooltipMenu/TooltipMenu.md +76 -8
- package/internal/CommonWrapper/CommonWrapper/CommonWrapper.js.map +1 -1
- package/internal/CommonWrapper/CommonWrapper.d.ts +9 -1
- package/internal/CustomComboBox/ComboBoxView/ComboBoxView.js +2 -1
- package/internal/CustomComboBox/ComboBoxView/ComboBoxView.js.map +1 -1
- package/internal/CustomComboBox/CustomComboBoxReducer/CustomComboBoxReducer.js +3 -2
- package/internal/CustomComboBox/CustomComboBoxReducer/CustomComboBoxReducer.js.map +1 -1
- package/internal/InputLikeText/InputLikeText/InputLikeText.js +6 -3
- package/internal/InputLikeText/InputLikeText/InputLikeText.js.map +1 -1
- package/internal/InputLikeText/InputLikeText.d.ts +1 -0
- package/internal/InputLikeText/InputLikeText.styles/InputLikeText.styles.js +1 -1
- package/internal/InputLikeText/InputLikeText.styles/InputLikeText.styles.js.map +1 -1
- package/internal/InputLikeText/InputLikeText.styles.d.ts +1 -1
- package/internal/RenderContainer/RenderContainer/RenderContainer.js +2 -1
- package/internal/RenderContainer/RenderContainer/RenderContainer.js.map +1 -1
- package/internal/ThemeShowcase/VariablesCollector.d.ts +1 -1
- package/internal/themes/DefaultTheme/DefaultTheme.js +16 -1
- package/internal/themes/DefaultTheme/DefaultTheme.js.map +1 -1
- package/internal/themes/DefaultTheme.d.ts +3 -0
- package/lib/Upgrades/Upgrades.js +13 -0
- package/lib/Upgrades/Upgrades.js.map +1 -1
- package/lib/Upgrades.d.ts +2 -0
- package/lib/theming/Emotion/Emotion.js +1 -1
- package/lib/theming/Emotion/Emotion.js.map +1 -1
- package/package.json +2 -2
- package/cjs/components/CurrencyLabel/CurrencyLabel.styles.d.ts +0 -4
- package/cjs/components/CurrencyLabel/CurrencyLabel.styles.js +0 -9
- package/cjs/components/CurrencyLabel/CurrencyLabel.styles.js.map +0 -1
- package/components/CurrencyLabel/CurrencyLabel.styles/CurrencyLabel.styles.js +0 -10
- package/components/CurrencyLabel/CurrencyLabel.styles/CurrencyLabel.styles.js.map +0 -1
- package/components/CurrencyLabel/CurrencyLabel.styles/package.json +0 -6
- package/components/CurrencyLabel/CurrencyLabel.styles.d.ts +0 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["TooltipMenu.tsx"],"names":["TooltipMenu","props","caption","isProductionEnv","Error","render","theme","ThemeFactory","create","popupPinOffset","tooltipMenuPinOffset","popupMargin","tooltipMenuMargin","popupPinSize","tooltipMenuPinSize","renderMain","menuMaxHeight","menuWidth","header","footer","positions","disableAnimations","children","React","Component","__KONTUR_REACT_UI__","defaultProps","isTestEnv"],"mappings":"uPAAA;;AAEA;AACA;AACA;;AAEA;;;AAGA
|
|
1
|
+
{"version":3,"sources":["TooltipMenu.tsx"],"names":["TooltipMenu","props","caption","isProductionEnv","Error","render","theme","ThemeFactory","create","popupPinOffset","tooltipMenuPinOffset","popupMargin","tooltipMenuMargin","popupPinSize","tooltipMenuPinSize","renderMain","menuMaxHeight","menuWidth","header","footer","positions","disableAnimations","children","React","Component","__KONTUR_REACT_UI__","defaultProps","isTestEnv"],"mappings":"uPAAA;;AAEA;AACA;AACA;;AAEA;;;AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,G;AACaA,W;;;;;;AAMX,uBAAYC,KAAZ,EAAqC;AACnC,wCAAMA,KAAN;;AAEA,QAAI,CAACA,KAAK,CAACC,OAAP,IAAkB,CAACC,mCAAvB,EAAwC;AACtC,YAAM,IAAIC,KAAJ,CAAU,+BAAV,CAAN;AACD,KALkC;AAMpC,G;;AAEMC,EAAAA,M,GAAP,kBAAgB;AACd;AACE,mCAAC,0BAAD,CAAc,QAAd;AACG,gBAACC,KAAD,EAAW;AACV;AACE,uCAAC,0BAAD,CAAc,QAAd;AACE,YAAA,KAAK,EAAEC,2BAAaC,MAAb;AACL;AACEC,cAAAA,cAAc,EAAEH,KAAK,CAACI,oBADxB;AAEEC,cAAAA,WAAW,EAAEL,KAAK,CAACM,iBAFrB;AAGEC,cAAAA,YAAY,EAAEP,KAAK,CAACQ,kBAHtB,EADK;;AAMLR,YAAAA,KANK,CADT;;;AAUG,UAAA,MAAI,CAACS,UAAL,EAVH,CADF;;;AAcD,OAhBH,CADF;;;AAoBD,G;;AAEMA,EAAAA,U,GAAP,sBAAoB;AAClB,QAAI,CAAC,KAAKd,KAAL,CAAWC,OAAhB,EAAyB;AACvB,aAAO,IAAP;AACD;;AAED;AACE,mCAAC,4BAAD,EAAmB,KAAKD,KAAxB;AACE,mCAAC,oBAAD;AACE,QAAA,aAAa,EAAE,KAAKA,KAAL,CAAWe,aAD5B;AAEE,QAAA,SAAS,EAAE,KAAKf,KAAL,CAAWgB,SAFxB;AAGE,QAAA,OAAO,EAAE,KAAKhB,KAAL,CAAWC,OAHtB;AAIE,QAAA,MAAM,EAAE,KAAKD,KAAL,CAAWiB,MAJrB;AAKE,QAAA,MAAM,EAAE,KAAKjB,KAAL,CAAWkB,MALrB;AAME,QAAA,SAAS,EAAE,KAAKlB,KAAL,CAAWmB,SANxB;AAOE,QAAA,WAAW,EAAE,IAPf;AAQE,QAAA,iBAAiB,EAAE,KAAKnB,KAAL,CAAWoB,iBARhC;;AAUG,WAAKpB,KAAL,CAAWqB,QAVd,CADF,CADF;;;;AAgBD,G,sBA1D8BC,eAAMC,S,oCAA1BxB,W,CACGyB,mB,GAAsB,a,CADzBzB,W,CAGG0B,Y,GAAe,EAC3BL,iBAAiB,EAAEM,6BADQ,E","sourcesContent":["import React from 'react';\n\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { PopupMenu, PopupMenuProps } from '../../internal/PopupMenu';\nimport { MenuItemProps } from '../MenuItem';\nimport { isProductionEnv, isTestEnv } from '../../lib/currentEnvironment';\nimport { MenuHeaderProps } from '../MenuHeader';\nimport { PopupPosition } from '../../internal/Popup';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\n\nexport type TooltipMenuChildType = React.ReactElement<MenuItemProps | {} | MenuHeaderProps>;\n\nexport interface TooltipMenuProps extends CommonProps {\n children?: TooltipMenuChildType | TooltipMenuChildType[];\n /** Максимальная высота меню */\n menuMaxHeight?: number | string;\n /** Ширина меню */\n menuWidth?: number | string;\n /**\n * Элемент или функция возвращающая элемент,\n * если передана, используется вместо `caption`,\n * в таком случае управлять открытием и закрытием меню\n * придется в этой функции\n */\n caption: PopupMenuProps['caption'];\n /**\n * Произвольный элемент, который будет отрендерен в шапке меню.\n *\n * _Примечание_: контрол [`MenuHeader`](#/Components/MenuHeader) передаётся только в `children` меню-контролов. Не стоит передавать `MenuHeader` в `header`.\n */\n header?: React.ReactNode;\n /**\n * Произвольный элемент, который будет отрендерен в подвале меню.\n *\n * Перед элементом переданным в `footer` будет отрендерен [`MenuSeparator`](#/Components/MenuSeparator).\n */\n footer?: React.ReactNode;\n /** Список позиций доступных для расположения выпадашки относительно `caption`.\n *\n * Если во всех позициях выпадашка вылезает за пределы `viewport`, будет использована первая из этого списка.\n *\n * **Возможные значения**: `top left`, `top center`, `top right`, `right top`, `right middle`, `right bottom`, `bottom left`, `bottom center`, `bottom right`, `left top`, `left middle`, `left bottom`\n */\n positions?: PopupPosition[];\n /**\n * Не показывать анимацию\n */\n disableAnimations: boolean;\n}\n\n/**\n * Меню, раскрывающееся по клику на переданный в `caption` элемент.\n *\n * Положение меню задаётся с помощью массива `positions` и работает так:\n * первое значение в массиве - дефолтная позиция, меню раскроется на этой позиции, если оно не будет выходить за пределы `viewport`,\n * если раскрыться в дефолтной позиции не получится - будет использована следующая позиция, и так далее, пока не будет достигнут конец массива. Если все положения из списка будут выходить за пределы `viewport`, в качестве положения будет использовано первое значение в массиве.\n *\n * Если меню должно раскрываться только в одну сторону - массив `positions` должен содержать только один элемент: сторону, в которую должно открываться меню.\n *\n * Если массив `positions` не передан (или передан пустой массив), будут использованы всевозможные значения.\n */\nexport class TooltipMenu extends React.Component<TooltipMenuProps> {\n public static __KONTUR_REACT_UI__ = 'TooltipMenu';\n\n public static defaultProps = {\n disableAnimations: isTestEnv,\n };\n constructor(props: TooltipMenuProps) {\n super(props);\n\n if (!props.caption && !isProductionEnv) {\n throw new Error('Prop \"caption\" is required!!!');\n }\n }\n\n public render() {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n return (\n <ThemeContext.Provider\n value={ThemeFactory.create(\n {\n popupPinOffset: theme.tooltipMenuPinOffset,\n popupMargin: theme.tooltipMenuMargin,\n popupPinSize: theme.tooltipMenuPinSize,\n },\n theme,\n )}\n >\n {this.renderMain()}\n </ThemeContext.Provider>\n );\n }}\n </ThemeContext.Consumer>\n );\n }\n\n public renderMain() {\n if (!this.props.caption) {\n return null;\n }\n\n return (\n <CommonWrapper {...this.props}>\n <PopupMenu\n menuMaxHeight={this.props.menuMaxHeight}\n menuWidth={this.props.menuWidth}\n caption={this.props.caption}\n header={this.props.header}\n footer={this.props.footer}\n positions={this.props.positions}\n popupHasPin={true}\n disableAnimations={this.props.disableAnimations}\n >\n {this.props.children}\n </PopupMenu>\n </CommonWrapper>\n );\n }\n}\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
Базовый пример тултип-меню.
|
|
2
2
|
|
|
3
3
|
```jsx harmony
|
|
4
4
|
import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
|
|
@@ -16,12 +16,15 @@ import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui
|
|
|
16
16
|
</TooltipMenu>;
|
|
17
17
|
```
|
|
18
18
|
|
|
19
|
-
|
|
19
|
+
Тултип-меню с заданной шириной.
|
|
20
20
|
|
|
21
21
|
```jsx harmony
|
|
22
22
|
import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
|
|
23
23
|
|
|
24
|
-
<TooltipMenu
|
|
24
|
+
<TooltipMenu
|
|
25
|
+
caption={<Button use="primary">Открыть меню с заданной шириной</Button>}
|
|
26
|
+
menuWidth={350}
|
|
27
|
+
>
|
|
25
28
|
<MenuHeader>Заголовок меню</MenuHeader>
|
|
26
29
|
<MenuSeparator />
|
|
27
30
|
<MenuItem>Раз</MenuItem>
|
|
@@ -34,12 +37,15 @@ import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui
|
|
|
34
37
|
</TooltipMenu>;
|
|
35
38
|
```
|
|
36
39
|
|
|
37
|
-
|
|
40
|
+
Тултип-меню с заданной максимальной высотой.
|
|
38
41
|
|
|
39
42
|
```jsx harmony
|
|
40
43
|
import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
|
|
41
44
|
|
|
42
|
-
<TooltipMenu
|
|
45
|
+
<TooltipMenu
|
|
46
|
+
caption={<Button use="primary">Открыть меню с заданной высотой</Button>}
|
|
47
|
+
menuMaxHeight={150}
|
|
48
|
+
>
|
|
43
49
|
<MenuHeader>Заголовок меню</MenuHeader>
|
|
44
50
|
<MenuSeparator />
|
|
45
51
|
<MenuItem>Раз</MenuItem>
|
|
@@ -52,7 +58,24 @@ import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui
|
|
|
52
58
|
</TooltipMenu>;
|
|
53
59
|
```
|
|
54
60
|
|
|
55
|
-
|
|
61
|
+
Тултип-меню с отключенной анимацией.
|
|
62
|
+
|
|
63
|
+
```jsx harmony
|
|
64
|
+
import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
|
|
65
|
+
|
|
66
|
+
<TooltipMenu
|
|
67
|
+
disableAnimations
|
|
68
|
+
caption={<Button use="primary">Открыть меню без анимации</Button>}
|
|
69
|
+
>
|
|
70
|
+
<MenuHeader>Заголовок меню</MenuHeader>
|
|
71
|
+
<MenuSeparator />
|
|
72
|
+
<MenuItem>Раз</MenuItem>
|
|
73
|
+
<MenuItem>Два</MenuItem>
|
|
74
|
+
<MenuItem>Три</MenuItem>
|
|
75
|
+
</TooltipMenu>;
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
В `caption` можно передать любой элемент.
|
|
56
79
|
|
|
57
80
|
```jsx harmony
|
|
58
81
|
import { MenuItem } from '@skbkontur/react-ui';
|
|
@@ -72,7 +95,7 @@ import MenuIcon from '@skbkontur/react-icons/Menu';
|
|
|
72
95
|
</TooltipMenu>;
|
|
73
96
|
```
|
|
74
97
|
|
|
75
|
-
|
|
98
|
+
Тултип-меню всегда всплывающее справа от `caption`.
|
|
76
99
|
|
|
77
100
|
```jsx harmony
|
|
78
101
|
import { MenuItem } from '@skbkontur/react-ui';
|
|
@@ -93,7 +116,7 @@ import LightbulbIcon from '@skbkontur/react-icons/Lightbulb';
|
|
|
93
116
|
</TooltipMenu>;
|
|
94
117
|
```
|
|
95
118
|
|
|
96
|
-
|
|
119
|
+
Тултип-меню всегда всплывающее сверху от `caption` и выравненное по правому краю `caption`.
|
|
97
120
|
|
|
98
121
|
```jsx harmony
|
|
99
122
|
import { MenuItem } from '@skbkontur/react-ui';
|
|
@@ -113,3 +136,48 @@ import LightbulbIcon from '@skbkontur/react-icons/Lightbulb';
|
|
|
113
136
|
<MenuItem>Три</MenuItem>
|
|
114
137
|
</TooltipMenu>;
|
|
115
138
|
```
|
|
139
|
+
|
|
140
|
+
Тултип-меню c шапкой и подвалом.
|
|
141
|
+
|
|
142
|
+
```jsx harmony
|
|
143
|
+
import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
|
|
144
|
+
|
|
145
|
+
<TooltipMenu
|
|
146
|
+
header={<p>Это шапка в виде обычного текста</p>}
|
|
147
|
+
footer={<Button>А это подвал в виде кнопки</Button>}
|
|
148
|
+
caption={<Button use="primary">Открыть меню</Button>}
|
|
149
|
+
>
|
|
150
|
+
<MenuItem>Раз</MenuItem>
|
|
151
|
+
<MenuItem>Два</MenuItem>
|
|
152
|
+
<MenuItem>Три</MenuItem>
|
|
153
|
+
</TooltipMenu>;
|
|
154
|
+
```
|
|
155
|
+
|
|
156
|
+
Условный рендер элементов тултип-меню (с сохранением поведения [`MenuItem`](#/Components/MenuItem)).
|
|
157
|
+
|
|
158
|
+
```jsx harmony
|
|
159
|
+
import {Button, MenuItem, Gapped, MenuSeparator} from '@skbkontur/react-ui';
|
|
160
|
+
|
|
161
|
+
const [showItems, setShowItems] = React.useState(false);
|
|
162
|
+
|
|
163
|
+
const hiddenItems = [
|
|
164
|
+
<MenuSeparator />,
|
|
165
|
+
<MenuItem>А я скрываюсь</MenuItem>,
|
|
166
|
+
<MenuItem>И я</MenuItem>,
|
|
167
|
+
<MenuItem>Я с вами</MenuItem>,
|
|
168
|
+
];
|
|
169
|
+
|
|
170
|
+
|
|
171
|
+
<Gapped>
|
|
172
|
+
<Button onClick={() => setShowItems(!showItems)}>
|
|
173
|
+
{showItems ? 'Спрятать' : 'Показать'} элементы
|
|
174
|
+
</Button>
|
|
175
|
+
|
|
176
|
+
<TooltipMenu caption={<Button use="primary">Открыть меню</Button>}>
|
|
177
|
+
<MenuItem>Меня видно всегда</MenuItem>
|
|
178
|
+
<MenuItem>Меня тоже</MenuItem>
|
|
179
|
+
<MenuItem>Ага, и меня!</MenuItem>
|
|
180
|
+
{showItems && hiddenItems}
|
|
181
|
+
</TooltipMenu>
|
|
182
|
+
</Gapped>
|
|
183
|
+
```
|
|
@@ -1,8 +1,16 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
export interface CommonProps {
|
|
3
|
+
/**
|
|
4
|
+
* HTML-атрибут `class`.
|
|
5
|
+
*/
|
|
3
6
|
className?: React.HTMLAttributes<HTMLElement>['className'];
|
|
7
|
+
/**
|
|
8
|
+
* HTML-атрибут `style`.
|
|
9
|
+
*/
|
|
4
10
|
style?: React.HTMLAttributes<HTMLElement>['style'];
|
|
5
|
-
/**
|
|
11
|
+
/**
|
|
12
|
+
* На равне с data-tid транслируются любые data-атрибуты. Они попадают на корневой элемент.
|
|
13
|
+
*/
|
|
6
14
|
'data-tid'?: string;
|
|
7
15
|
}
|
|
8
16
|
export declare type NotCommonProps<P> = Omit<P, keyof CommonProps>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["CommonWrapper.tsx"],"names":["CommonWrapper","render","extractCommonProps","props","className","style","dataProps","children","rest","child","isValidElement","React","cloneElement","Component","common","key","isCommonProp","name","indexOf"],"mappings":"ucAAA;;AAEA;AACA,oD
|
|
1
|
+
{"version":3,"sources":["CommonWrapper.tsx"],"names":["CommonWrapper","render","extractCommonProps","props","className","style","dataProps","children","rest","child","isValidElement","React","cloneElement","Component","common","key","isCommonProp","name","indexOf"],"mappings":"ucAAA;;AAEA;AACA,oD;;;;;;;;;;;;;;;;;;;;;;;;AAwBaA,a;AACXC,EAAAA,M,GAAA,kBAAS;AAC6DC,IAAAA,kBAAkB,CAAC,KAAKC,KAAN,CAD/E,+CACEC,SADF,wBACEA,SADF,CACaC,KADb,wBACaA,KADb,CACuBC,SADvB,4IACsCC,QADtC,yBACsCA,QADtC,CACmDC,IADnD;AAEP,QAAMC,KAAK,GAAG,uBAAWF,QAAX,IAAuBA,QAAQ,CAACC,IAAD,CAA/B,GAAwCD,QAAtD;;AAEA,WAAO,4BAAMG,cAAN,CAAkCD,KAAlC;AACHE,mBAAMC,YAAN,CAAmBH,KAAnB;AACEL,MAAAA,SAAS,EAAE,iBAAGK,KAAK,CAACN,KAAN,CAAYC,SAAf,EAA0BA,SAA1B,CADb;AAEEC,MAAAA,KAAK;AACAI,MAAAA,KAAK,CAACN,KAAN,CAAYE,KADZ;AAEAA,MAAAA,KAFA,CAFP;;AAMKC,IAAAA,SANL,EADG;;AASHG,IAAAA,KATJ;AAUD,G,wBAfuDE,eAAME,S;;;AAkBhE,IAAMX,kBAAkB,GAAG,SAArBA,kBAAqB,CAAwBC,KAAxB,EAAuE;AAChG,MAAMW,MAAM,GAAG,EAAf;AACA,MAAMN,IAAI,GAAG,EAAb;;AAEA,OAAK,IAAMO,GAAX,IAAkBZ,KAAlB,EAAyB;AACvB,QAAIa,YAAY,CAACD,GAAD,CAAhB,EAAuB;AACrB;AACAD,MAAAA,MAAM,CAACC,GAAD,CAAN,GAAcZ,KAAK,CAACY,GAAD,CAAnB;AACD,KAHD,MAGO;AACL;AACAP,MAAAA,IAAI,CAACO,GAAD,CAAJ,GAAYZ,KAAK,CAACY,GAAD,CAAjB;AACD;AACF;;AAED,SAAO,CAACD,MAAD,EAASN,IAAT,CAAP;AACD,CAfD;;AAiBA,IAAMQ,YAAY,GAAG,SAAfA,YAAe,CAACC,IAAD,EAAkB;AACrC,UAAQ,IAAR;AACE,SAAKA,IAAI,IAAI,WAAb;AACA,SAAKA,IAAI,IAAI,OAAb;AACA,SAAKA,IAAI,CAACC,OAAL,CAAa,OAAb,MAA0B,CAA/B,EAAkC;AAChC,aAAO,IAAP;AACF;AACE,aAAO,KAAP,CANJ;;AAQD,CATD","sourcesContent":["import React from 'react';\n\nimport { isFunction } from '../../lib/utils';\nimport { cx } from '../../lib/theming/Emotion';\n\nexport interface CommonProps {\n /**\n * HTML-атрибут `class`.\n */\n className?: React.HTMLAttributes<HTMLElement>['className'];\n /**\n * HTML-атрибут `style`.\n */\n style?: React.HTMLAttributes<HTMLElement>['style'];\n /**\n * На равне с data-tid транслируются любые data-атрибуты. Они попадают на корневой элемент.\n */\n 'data-tid'?: string;\n}\n\nexport type NotCommonProps<P> = Omit<P, keyof CommonProps>;\n\nexport type CommonWrapperProps<P> = P & {\n children: React.ReactNode | ((rest: CommonWrapperRestProps<P>) => React.ReactNode);\n};\nexport type CommonWrapperRestProps<P> = Omit<NotCommonProps<P>, 'children'>;\n\nexport class CommonWrapper<P extends CommonProps> extends React.Component<CommonWrapperProps<P>> {\n render() {\n const [{ className, style, ...dataProps }, { children, ...rest }] = extractCommonProps(this.props);\n const child = isFunction(children) ? children(rest) : children;\n\n return React.isValidElement<CommonProps>(child)\n ? React.cloneElement(child, {\n className: cx(child.props.className, className),\n style: {\n ...child.props.style,\n ...style,\n },\n ...dataProps,\n })\n : child;\n }\n}\n\nconst extractCommonProps = <P extends CommonProps>(props: P): [CommonProps, NotCommonProps<P>] => {\n const common = {} as CommonProps;\n const rest = {} as NotCommonProps<P>;\n\n for (const key in props) {\n if (isCommonProp(key)) {\n // @ts-ignore\n common[key] = props[key];\n } else {\n // @ts-ignore\n rest[key] = props[key];\n }\n }\n\n return [common, rest];\n};\n\nconst isCommonProp = (name: string) => {\n switch (true) {\n case name == 'className':\n case name == 'style':\n case name.indexOf('data-') === 0: // все data-атрибуты\n return true;\n default:\n return false;\n }\n};\n"]}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.ComboBoxView = void 0;var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
|
|
2
2
|
var _reactDom = require("react-dom");
|
|
3
3
|
|
|
4
|
+
var _utils = require("../../lib/utils");
|
|
4
5
|
var _DropdownContainer = require("../DropdownContainer");
|
|
5
6
|
var _Input = require("../../components/Input");
|
|
6
7
|
var _InputLikeText = require("../InputLikeText");
|
|
@@ -286,4 +287,4 @@ ComboBoxView = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.def
|
|
|
286
287
|
}
|
|
287
288
|
|
|
288
289
|
return null;
|
|
289
|
-
};return _this;}var _proto = ComboBoxView.prototype;_proto.componentDidMount = function componentDidMount() {if (this.props.autoFocus && this.props.onFocus) {this.props.onFocus();}};_proto.componentDidUpdate = function componentDidUpdate(prevProps) {var input = this.input,props = this.props;if (props.editing && !prevProps.editing && input) {input.focus();}};_proto.render = function render() {var _this2 = this;var _this$props2 = this.props,items = _this$props2.items,loading = _this$props2.loading,menuAlign = _this$props2.menuAlign,onClickOutside = _this$props2.onClickOutside,onFocusOutside = _this$props2.onFocusOutside,onMouseEnter = _this$props2.onMouseEnter,onMouseLeave = _this$props2.onMouseLeave,onMouseOver = _this$props2.onMouseOver,opened = _this$props2.opened,refMenu = _this$props2.refMenu,maxMenuHeight = _this$props2.maxMenuHeight,renderTotalCount = _this$props2.renderTotalCount,renderItem = _this$props2.renderItem,renderNotFound = _this$props2.renderNotFound,repeatRequest = _this$props2.repeatRequest,requestStatus = _this$props2.requestStatus,totalCount = _this$props2.totalCount,size = _this$props2.size,width = _this$props2.width;var input = this.renderInput();var topOffsets = { spinner: 6, arrow: 15 };if (size === 'medium') {topOffsets.spinner += 4;topOffsets.arrow += 4;}if (size === 'large') {topOffsets.spinner += 6;topOffsets.arrow += 6;}return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, this.props, /*#__PURE__*/_react.default.createElement(_RenderLayer.RenderLayer, { onClickOutside: onClickOutside, onFocusOutside: onFocusOutside, active: opened }, /*#__PURE__*/_react.default.createElement("span", { style: { width: width }, className: _CustomComboBox.styles.root(), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onMouseOver: onMouseOver }, input, opened && /*#__PURE__*/_react.default.createElement(_DropdownContainer.DropdownContainer, { align: menuAlign, getParent: function getParent() {return (0, _reactDom.findDOMNode)(_this2);}, offsetY: 1, disablePortal: this.props.disablePortal }, /*#__PURE__*/_react.default.createElement(_ComboBoxMenu.ComboBoxMenu, { items: items, loading: loading, maxMenuHeight: maxMenuHeight, onValueChange: this.handleItemSelect, opened: opened, refMenu: refMenu, renderTotalCount: renderTotalCount, renderItem: renderItem, renderNotFound: renderNotFound, renderAddButton: this.renderAddButton, repeatRequest: repeatRequest, requestStatus: requestStatus, totalCount: totalCount })))));};_proto.renderInput = function renderInput() {var _this$props3 = this.props,align = _this$props3.align,borderless = _this$props3.borderless,disabled = _this$props3.disabled,editing = _this$props3.editing,error = _this$props3.error,onFocus = _this$props3.onFocus,onInputBlur = _this$props3.onInputBlur,onInputValueChange = _this$props3.onInputValueChange,onInputFocus = _this$props3.onInputFocus,onInputClick = _this$props3.onInputClick,onInputKeyDown = _this$props3.onInputKeyDown,placeholder = _this$props3.placeholder,renderValue = _this$props3.renderValue,size = _this$props3.size,textValue = _this$props3.textValue,value = _this$props3.value,warning = _this$props3.warning,refInputLikeText = _this$props3.refInputLikeText,leftIcon = _this$props3.leftIcon,inputMode = _this$props3.inputMode;var rightIcon = this.getRightIcon();if (editing) {return /*#__PURE__*/_react.default.createElement(_Input.Input, { align: align, borderless: borderless, disabled: disabled, error: error, maxLength: this.props.maxLength, onBlur: onInputBlur, onValueChange: onInputValueChange, onFocus: onInputFocus, onClick: onInputClick, leftIcon: leftIcon, rightIcon: rightIcon, value: textValue || '', onKeyDown: onInputKeyDown, placeholder: placeholder, width: "100%", size: size, ref: this.refInput, warning: warning, inputMode: inputMode });}return /*#__PURE__*/_react.default.createElement(_InputLikeText.InputLikeText, { align: align, borderless: borderless, error: error, onFocus: onFocus, leftIcon: leftIcon, rightIcon: rightIcon, disabled: disabled, warning: warning, placeholder: placeholder, size: size, width: "100%", ref: refInputLikeText }, value ? renderValue(value) : null);};return ComboBoxView;}(_react.default.Component);exports.ComboBoxView = ComboBoxView;ComboBoxView.__KONTUR_REACT_UI__ = 'ComboBoxView';ComboBoxView.defaultProps = { renderItem: function renderItem(item) {return item;}, renderValue: function renderValue(item) {return item;}, renderAddButton: function renderAddButton() {return null;}, repeatRequest: function repeatRequest() {return undefined;}, requestStatus: _CustomComboBoxTypes.ComboBoxRequestStatus.Unknown, onClickOutside: function onClickOutside() {/**/}, onFocusOutside: function onFocusOutside() {/**/}, size: 'small', width: 250 };
|
|
290
|
+
};return _this;}var _proto = ComboBoxView.prototype;_proto.componentDidMount = function componentDidMount() {if (this.props.autoFocus && this.props.onFocus) {this.props.onFocus();}};_proto.componentDidUpdate = function componentDidUpdate(prevProps) {var input = this.input,props = this.props;if (props.editing && !prevProps.editing && input) {input.focus();}};_proto.render = function render() {var _this2 = this;var _this$props2 = this.props,items = _this$props2.items,loading = _this$props2.loading,menuAlign = _this$props2.menuAlign,onClickOutside = _this$props2.onClickOutside,onFocusOutside = _this$props2.onFocusOutside,onMouseEnter = _this$props2.onMouseEnter,onMouseLeave = _this$props2.onMouseLeave,onMouseOver = _this$props2.onMouseOver,opened = _this$props2.opened,refMenu = _this$props2.refMenu,maxMenuHeight = _this$props2.maxMenuHeight,renderTotalCount = _this$props2.renderTotalCount,renderItem = _this$props2.renderItem,renderNotFound = _this$props2.renderNotFound,repeatRequest = _this$props2.repeatRequest,requestStatus = _this$props2.requestStatus,totalCount = _this$props2.totalCount,size = _this$props2.size,width = _this$props2.width;var input = this.renderInput();var topOffsets = { spinner: 6, arrow: 15 };if (size === 'medium') {topOffsets.spinner += 4;topOffsets.arrow += 4;}if (size === 'large') {topOffsets.spinner += 6;topOffsets.arrow += 6;}return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, this.props, /*#__PURE__*/_react.default.createElement(_RenderLayer.RenderLayer, { onClickOutside: onClickOutside, onFocusOutside: onFocusOutside, active: opened }, /*#__PURE__*/_react.default.createElement("span", { style: { width: width }, className: _CustomComboBox.styles.root(), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onMouseOver: onMouseOver }, input, opened && /*#__PURE__*/_react.default.createElement(_DropdownContainer.DropdownContainer, { align: menuAlign, getParent: function getParent() {return (0, _reactDom.findDOMNode)(_this2);}, offsetY: 1, disablePortal: this.props.disablePortal }, /*#__PURE__*/_react.default.createElement(_ComboBoxMenu.ComboBoxMenu, { items: items, loading: loading, maxMenuHeight: maxMenuHeight, onValueChange: this.handleItemSelect, opened: opened, refMenu: refMenu, renderTotalCount: renderTotalCount, renderItem: renderItem, renderNotFound: renderNotFound, renderAddButton: this.renderAddButton, repeatRequest: repeatRequest, requestStatus: requestStatus, totalCount: totalCount })))));};_proto.renderInput = function renderInput() {var _this$props3 = this.props,align = _this$props3.align,borderless = _this$props3.borderless,disabled = _this$props3.disabled,editing = _this$props3.editing,error = _this$props3.error,onFocus = _this$props3.onFocus,onInputBlur = _this$props3.onInputBlur,onInputValueChange = _this$props3.onInputValueChange,onInputFocus = _this$props3.onInputFocus,onInputClick = _this$props3.onInputClick,onInputKeyDown = _this$props3.onInputKeyDown,placeholder = _this$props3.placeholder,renderValue = _this$props3.renderValue,size = _this$props3.size,textValue = _this$props3.textValue,value = _this$props3.value,warning = _this$props3.warning,refInputLikeText = _this$props3.refInputLikeText,leftIcon = _this$props3.leftIcon,inputMode = _this$props3.inputMode;var rightIcon = this.getRightIcon();if (editing) {return /*#__PURE__*/_react.default.createElement(_Input.Input, { align: align, borderless: borderless, disabled: disabled, error: error, maxLength: this.props.maxLength, onBlur: onInputBlur, onValueChange: onInputValueChange, onFocus: onInputFocus, onClick: onInputClick, leftIcon: leftIcon, rightIcon: rightIcon, value: textValue || '', onKeyDown: onInputKeyDown, placeholder: placeholder, width: "100%", size: size, ref: this.refInput, warning: warning, inputMode: inputMode });}return /*#__PURE__*/_react.default.createElement(_InputLikeText.InputLikeText, { align: align, borderless: borderless, error: error, onFocus: onFocus, leftIcon: leftIcon, rightIcon: rightIcon, disabled: disabled, warning: warning, placeholder: placeholder, size: size, width: "100%", ref: refInputLikeText }, (0, _utils.isNonNullable)(value) && renderValue ? renderValue(value) : null);};return ComboBoxView;}(_react.default.Component);exports.ComboBoxView = ComboBoxView;ComboBoxView.__KONTUR_REACT_UI__ = 'ComboBoxView';ComboBoxView.defaultProps = { renderItem: function renderItem(item) {return item;}, renderValue: function renderValue(item) {return item;}, renderAddButton: function renderAddButton() {return null;}, repeatRequest: function repeatRequest() {return undefined;}, requestStatus: _CustomComboBoxTypes.ComboBoxRequestStatus.Unknown, onClickOutside: function onClickOutside() {/**/}, onFocusOutside: function onFocusOutside() {/**/}, size: 'small', width: 250 };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["ComboBoxView.tsx"],"names":["ComboBoxView","input","renderAddButton","props","textValue","handleItemSelect","item","onValueChange","refInput","renderSpinner","styles","spinnerWrapper","getRightIcon","loading","items","drawArrow","rightIcon","length","rightIconWrapper","componentDidMount","autoFocus","onFocus","componentDidUpdate","prevProps","editing","focus","render","menuAlign","onClickOutside","onFocusOutside","onMouseEnter","onMouseLeave","onMouseOver","opened","refMenu","maxMenuHeight","renderTotalCount","renderItem","renderNotFound","repeatRequest","requestStatus","totalCount","size","width","renderInput","topOffsets","spinner","arrow","root","disablePortal","align","borderless","disabled","error","onInputBlur","onInputValueChange","onInputFocus","onInputClick","onInputKeyDown","placeholder","renderValue","value","warning","refInputLikeText","leftIcon","inputMode","maxLength","React","Component","__KONTUR_REACT_UI__","defaultProps","undefined","ComboBoxRequestStatus","Unknown"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { findDOMNode } from 'react-dom';\n\nimport { DropdownContainer } from '../DropdownContainer';\nimport { Input, InputIconType } from '../../components/Input';\nimport { InputLikeText } from '../InputLikeText';\nimport { Menu } from '../Menu';\nimport { MenuItemState } from '../../components/MenuItem';\nimport { RenderLayer } from '../RenderLayer';\nimport { Spinner } from '../../components/Spinner';\nimport { Nullable } from '../../typings/utility-types';\nimport { ArrowChevronDownIcon } from '../icons/16px';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\n\nimport { ComboBoxMenu } from './ComboBoxMenu';\nimport { ComboBoxRequestStatus } from './CustomComboBoxTypes';\nimport { styles } from './CustomComboBox.styles';\n\ninterface ComboBoxViewProps<T> extends CommonProps {\n align?: 'left' | 'center' | 'right';\n autoFocus?: boolean;\n borderless?: boolean;\n disablePortal?: boolean;\n disabled?: boolean;\n editing?: boolean;\n error?: boolean;\n items?: Nullable<T[]>;\n loading?: boolean;\n menuAlign?: 'left' | 'right';\n opened?: boolean;\n drawArrow?: boolean;\n placeholder?: string;\n size?: 'small' | 'medium' | 'large';\n textValue?: string;\n totalCount?: number;\n value?: Nullable<T>;\n warning?: boolean;\n width?: string | number;\n maxLength?: number;\n maxMenuHeight?: number | string;\n leftIcon?: InputIconType;\n rightIcon?: InputIconType;\n inputMode?: React.HTMLAttributes<HTMLInputElement>['inputMode'];\n\n onValueChange?: (value: T) => void;\n onClickOutside?: (e: Event) => void;\n onFocus?: () => void;\n onFocusOutside?: () => void;\n onInputBlur?: () => void;\n onInputValueChange?: (value: string) => void;\n onInputFocus?: () => void;\n onInputClick?: () => void;\n onInputKeyDown?: (e: React.KeyboardEvent) => void;\n onMouseEnter?: (e: React.MouseEvent) => void;\n onMouseOver?: (e: React.MouseEvent) => void;\n onMouseLeave?: (e: React.MouseEvent) => void;\n renderItem?: (item: T, state: MenuItemState) => React.ReactNode;\n renderNotFound?: () => React.ReactNode;\n renderTotalCount?: (found: number, total: number) => React.ReactNode;\n renderValue?: (item: T) => React.ReactNode;\n renderAddButton: (query?: string) => React.ReactNode;\n repeatRequest?: () => void;\n requestStatus?: ComboBoxRequestStatus;\n refInput?: (input: Nullable<Input>) => void;\n refMenu?: (menu: Nullable<Menu>) => void;\n refInputLikeText?: (inputLikeText: Nullable<InputLikeText>) => void;\n}\n\nexport class ComboBoxView<T> extends React.Component<ComboBoxViewProps<T>> {\n public static __KONTUR_REACT_UI__ = 'ComboBoxView';\n\n public static defaultProps = {\n renderItem: (item: any) => item,\n renderValue: (item: any) => item,\n renderAddButton: () => null,\n repeatRequest: () => undefined,\n requestStatus: ComboBoxRequestStatus.Unknown,\n onClickOutside: () => {\n /**/\n },\n onFocusOutside: () => {\n /**/\n },\n size: 'small',\n width: 250,\n };\n\n private input: Nullable<Input>;\n\n public componentDidMount() {\n if (this.props.autoFocus && this.props.onFocus) {\n this.props.onFocus();\n }\n }\n\n public componentDidUpdate(prevProps: ComboBoxViewProps<T>) {\n const { input, props } = this;\n if (props.editing && !prevProps.editing && input) {\n input.focus();\n }\n }\n\n public render() {\n const {\n items,\n loading,\n menuAlign,\n onClickOutside,\n onFocusOutside,\n onMouseEnter,\n onMouseLeave,\n onMouseOver,\n opened,\n refMenu,\n maxMenuHeight,\n renderTotalCount,\n renderItem,\n renderNotFound,\n repeatRequest,\n requestStatus,\n totalCount,\n size,\n width,\n } = this.props;\n\n const input = this.renderInput();\n\n const topOffsets = {\n spinner: 6,\n arrow: 15,\n };\n if (size === 'medium') {\n topOffsets.spinner += 4;\n topOffsets.arrow += 4;\n }\n if (size === 'large') {\n topOffsets.spinner += 6;\n topOffsets.arrow += 6;\n }\n\n return (\n <CommonWrapper {...this.props}>\n <RenderLayer onClickOutside={onClickOutside} onFocusOutside={onFocusOutside} active={opened}>\n <span\n style={{ width }}\n className={styles.root()}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n onMouseOver={onMouseOver}\n >\n {input}\n {opened && (\n <DropdownContainer\n align={menuAlign}\n getParent={() => findDOMNode(this)}\n offsetY={1}\n disablePortal={this.props.disablePortal}\n >\n <ComboBoxMenu\n items={items}\n loading={loading}\n maxMenuHeight={maxMenuHeight}\n onValueChange={this.handleItemSelect}\n opened={opened}\n refMenu={refMenu}\n renderTotalCount={renderTotalCount}\n renderItem={renderItem!}\n renderNotFound={renderNotFound}\n renderAddButton={this.renderAddButton}\n repeatRequest={repeatRequest}\n requestStatus={requestStatus}\n totalCount={totalCount}\n />\n </DropdownContainer>\n )}\n </span>\n </RenderLayer>\n </CommonWrapper>\n );\n }\n\n private renderAddButton = (): React.ReactNode => {\n return this.props.renderAddButton(this.props.textValue);\n };\n\n private renderInput(): React.ReactNode {\n const {\n align,\n borderless,\n disabled,\n editing,\n error,\n onFocus,\n onInputBlur,\n onInputValueChange,\n onInputFocus,\n onInputClick,\n onInputKeyDown,\n placeholder,\n renderValue,\n size,\n textValue,\n value,\n warning,\n refInputLikeText,\n leftIcon,\n inputMode,\n } = this.props;\n\n const rightIcon = this.getRightIcon();\n\n if (editing) {\n return (\n <Input\n align={align}\n borderless={borderless}\n disabled={disabled}\n error={error}\n maxLength={this.props.maxLength}\n onBlur={onInputBlur}\n onValueChange={onInputValueChange}\n onFocus={onInputFocus}\n onClick={onInputClick}\n leftIcon={leftIcon}\n rightIcon={rightIcon}\n value={textValue || ''}\n onKeyDown={onInputKeyDown}\n placeholder={placeholder}\n width=\"100%\"\n size={size}\n ref={this.refInput}\n warning={warning}\n inputMode={inputMode}\n />\n );\n }\n\n return (\n <InputLikeText\n align={align}\n borderless={borderless}\n error={error}\n onFocus={onFocus}\n leftIcon={leftIcon}\n rightIcon={rightIcon}\n disabled={disabled}\n warning={warning}\n placeholder={placeholder}\n size={size}\n width=\"100%\"\n ref={refInputLikeText}\n >\n {value ? renderValue!(value) : null}\n </InputLikeText>\n );\n }\n\n private handleItemSelect = (item: T) => {\n if (this.props.onValueChange) {\n this.props.onValueChange(item);\n }\n };\n\n private refInput = (input: Nullable<Input>) => {\n if (this.props.refInput) {\n this.props.refInput(input);\n }\n this.input = input;\n };\n\n private renderSpinner = () => (\n <span className={styles.spinnerWrapper()}>\n <Spinner type=\"mini\" caption=\"\" dimmed />\n </span>\n );\n\n private getRightIcon = () => {\n const { loading, items, drawArrow, rightIcon } = this.props;\n\n if (loading && items && !!items.length) {\n return this.renderSpinner();\n }\n\n if (rightIcon || drawArrow) {\n return <span className={styles.rightIconWrapper()}>{rightIcon ?? <ArrowChevronDownIcon />}</span>;\n }\n\n return null;\n };\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["ComboBoxView.tsx"],"names":["ComboBoxView","input","renderAddButton","props","textValue","handleItemSelect","item","onValueChange","refInput","renderSpinner","styles","spinnerWrapper","getRightIcon","loading","items","drawArrow","rightIcon","length","rightIconWrapper","componentDidMount","autoFocus","onFocus","componentDidUpdate","prevProps","editing","focus","render","menuAlign","onClickOutside","onFocusOutside","onMouseEnter","onMouseLeave","onMouseOver","opened","refMenu","maxMenuHeight","renderTotalCount","renderItem","renderNotFound","repeatRequest","requestStatus","totalCount","size","width","renderInput","topOffsets","spinner","arrow","root","disablePortal","align","borderless","disabled","error","onInputBlur","onInputValueChange","onInputFocus","onInputClick","onInputKeyDown","placeholder","renderValue","value","warning","refInputLikeText","leftIcon","inputMode","maxLength","React","Component","__KONTUR_REACT_UI__","defaultProps","undefined","ComboBoxRequestStatus","Unknown"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { findDOMNode } from 'react-dom';\n\nimport { isNonNullable } from '../../lib/utils';\nimport { DropdownContainer } from '../DropdownContainer';\nimport { Input, InputIconType } from '../../components/Input';\nimport { InputLikeText } from '../InputLikeText';\nimport { Menu } from '../Menu';\nimport { MenuItemState } from '../../components/MenuItem';\nimport { RenderLayer } from '../RenderLayer';\nimport { Spinner } from '../../components/Spinner';\nimport { Nullable } from '../../typings/utility-types';\nimport { ArrowChevronDownIcon } from '../icons/16px';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\n\nimport { ComboBoxMenu } from './ComboBoxMenu';\nimport { ComboBoxRequestStatus } from './CustomComboBoxTypes';\nimport { styles } from './CustomComboBox.styles';\n\ninterface ComboBoxViewProps<T> extends CommonProps {\n align?: 'left' | 'center' | 'right';\n autoFocus?: boolean;\n borderless?: boolean;\n disablePortal?: boolean;\n disabled?: boolean;\n editing?: boolean;\n error?: boolean;\n items?: Nullable<T[]>;\n loading?: boolean;\n menuAlign?: 'left' | 'right';\n opened?: boolean;\n drawArrow?: boolean;\n placeholder?: string;\n size?: 'small' | 'medium' | 'large';\n textValue?: string;\n totalCount?: number;\n value?: Nullable<T>;\n warning?: boolean;\n width?: string | number;\n maxLength?: number;\n maxMenuHeight?: number | string;\n leftIcon?: InputIconType;\n rightIcon?: InputIconType;\n inputMode?: React.HTMLAttributes<HTMLInputElement>['inputMode'];\n\n onValueChange?: (value: T) => void;\n onClickOutside?: (e: Event) => void;\n onFocus?: () => void;\n onFocusOutside?: () => void;\n onInputBlur?: () => void;\n onInputValueChange?: (value: string) => void;\n onInputFocus?: () => void;\n onInputClick?: () => void;\n onInputKeyDown?: (e: React.KeyboardEvent) => void;\n onMouseEnter?: (e: React.MouseEvent) => void;\n onMouseOver?: (e: React.MouseEvent) => void;\n onMouseLeave?: (e: React.MouseEvent) => void;\n renderItem?: (item: T, state: MenuItemState) => React.ReactNode;\n renderNotFound?: () => React.ReactNode;\n renderTotalCount?: (found: number, total: number) => React.ReactNode;\n renderValue?: (item: T) => React.ReactNode;\n renderAddButton: (query?: string) => React.ReactNode;\n repeatRequest?: () => void;\n requestStatus?: ComboBoxRequestStatus;\n refInput?: (input: Nullable<Input>) => void;\n refMenu?: (menu: Nullable<Menu>) => void;\n refInputLikeText?: (inputLikeText: Nullable<InputLikeText>) => void;\n}\n\nexport class ComboBoxView<T> extends React.Component<ComboBoxViewProps<T>> {\n public static __KONTUR_REACT_UI__ = 'ComboBoxView';\n\n public static defaultProps = {\n renderItem: (item: any) => item,\n renderValue: (item: any) => item,\n renderAddButton: () => null,\n repeatRequest: () => undefined,\n requestStatus: ComboBoxRequestStatus.Unknown,\n onClickOutside: () => {\n /**/\n },\n onFocusOutside: () => {\n /**/\n },\n size: 'small',\n width: 250,\n };\n\n private input: Nullable<Input>;\n\n public componentDidMount() {\n if (this.props.autoFocus && this.props.onFocus) {\n this.props.onFocus();\n }\n }\n\n public componentDidUpdate(prevProps: ComboBoxViewProps<T>) {\n const { input, props } = this;\n if (props.editing && !prevProps.editing && input) {\n input.focus();\n }\n }\n\n public render() {\n const {\n items,\n loading,\n menuAlign,\n onClickOutside,\n onFocusOutside,\n onMouseEnter,\n onMouseLeave,\n onMouseOver,\n opened,\n refMenu,\n maxMenuHeight,\n renderTotalCount,\n renderItem,\n renderNotFound,\n repeatRequest,\n requestStatus,\n totalCount,\n size,\n width,\n } = this.props;\n\n const input = this.renderInput();\n\n const topOffsets = {\n spinner: 6,\n arrow: 15,\n };\n if (size === 'medium') {\n topOffsets.spinner += 4;\n topOffsets.arrow += 4;\n }\n if (size === 'large') {\n topOffsets.spinner += 6;\n topOffsets.arrow += 6;\n }\n\n return (\n <CommonWrapper {...this.props}>\n <RenderLayer onClickOutside={onClickOutside} onFocusOutside={onFocusOutside} active={opened}>\n <span\n style={{ width }}\n className={styles.root()}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n onMouseOver={onMouseOver}\n >\n {input}\n {opened && (\n <DropdownContainer\n align={menuAlign}\n getParent={() => findDOMNode(this)}\n offsetY={1}\n disablePortal={this.props.disablePortal}\n >\n <ComboBoxMenu\n items={items}\n loading={loading}\n maxMenuHeight={maxMenuHeight}\n onValueChange={this.handleItemSelect}\n opened={opened}\n refMenu={refMenu}\n renderTotalCount={renderTotalCount}\n renderItem={renderItem!}\n renderNotFound={renderNotFound}\n renderAddButton={this.renderAddButton}\n repeatRequest={repeatRequest}\n requestStatus={requestStatus}\n totalCount={totalCount}\n />\n </DropdownContainer>\n )}\n </span>\n </RenderLayer>\n </CommonWrapper>\n );\n }\n\n private renderAddButton = (): React.ReactNode => {\n return this.props.renderAddButton(this.props.textValue);\n };\n\n private renderInput(): React.ReactNode {\n const {\n align,\n borderless,\n disabled,\n editing,\n error,\n onFocus,\n onInputBlur,\n onInputValueChange,\n onInputFocus,\n onInputClick,\n onInputKeyDown,\n placeholder,\n renderValue,\n size,\n textValue,\n value,\n warning,\n refInputLikeText,\n leftIcon,\n inputMode,\n } = this.props;\n\n const rightIcon = this.getRightIcon();\n\n if (editing) {\n return (\n <Input\n align={align}\n borderless={borderless}\n disabled={disabled}\n error={error}\n maxLength={this.props.maxLength}\n onBlur={onInputBlur}\n onValueChange={onInputValueChange}\n onFocus={onInputFocus}\n onClick={onInputClick}\n leftIcon={leftIcon}\n rightIcon={rightIcon}\n value={textValue || ''}\n onKeyDown={onInputKeyDown}\n placeholder={placeholder}\n width=\"100%\"\n size={size}\n ref={this.refInput}\n warning={warning}\n inputMode={inputMode}\n />\n );\n }\n\n return (\n <InputLikeText\n align={align}\n borderless={borderless}\n error={error}\n onFocus={onFocus}\n leftIcon={leftIcon}\n rightIcon={rightIcon}\n disabled={disabled}\n warning={warning}\n placeholder={placeholder}\n size={size}\n width=\"100%\"\n ref={refInputLikeText}\n >\n {isNonNullable(value) && renderValue ? renderValue(value) : null}\n </InputLikeText>\n );\n }\n\n private handleItemSelect = (item: T) => {\n if (this.props.onValueChange) {\n this.props.onValueChange(item);\n }\n };\n\n private refInput = (input: Nullable<Input>) => {\n if (this.props.refInput) {\n this.props.refInput(input);\n }\n this.input = input;\n };\n\n private renderSpinner = () => (\n <span className={styles.spinnerWrapper()}>\n <Spinner type=\"mini\" caption=\"\" dimmed />\n </span>\n );\n\n private getRightIcon = () => {\n const { loading, items, drawArrow, rightIcon } = this.props;\n\n if (loading && items && !!items.length) {\n return this.renderSpinner();\n }\n\n if (rightIcon || drawArrow) {\n return <span className={styles.rightIconWrapper()}>{rightIcon ?? <ArrowChevronDownIcon />}</span>;\n }\n\n return null;\n };\n}\n"]}
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
var _lodash = _interopRequireDefault(require("lodash.debounce"));
|
|
3
3
|
var _lodash2 = _interopRequireDefault(require("lodash.isequal"));
|
|
4
4
|
|
|
5
|
+
var _utils = require("../../lib/utils");
|
|
5
6
|
var _identifiers = require("../../lib/events/keyboard/identifiers");
|
|
6
7
|
var LayoutEvents = _interopRequireWildcard(require("../../lib/LayoutEvents"));
|
|
7
8
|
|
|
@@ -66,7 +67,7 @@ var _CustomComboBoxTypes = require("./CustomComboBoxTypes");
|
|
|
66
67
|
var DEBOUNCE_DELAY = 300;
|
|
67
68
|
|
|
68
69
|
var getValueString = function getValueString(value, valueToString) {
|
|
69
|
-
return value ? valueToString(value) : '';
|
|
70
|
+
return (0, _utils.isNonNullable)(value) ? valueToString(value) : '';
|
|
70
71
|
};
|
|
71
72
|
|
|
72
73
|
var Effect = {
|
|
@@ -153,7 +154,7 @@ var Effect = {
|
|
|
153
154
|
}
|
|
154
155
|
|
|
155
156
|
var index = -1;
|
|
156
|
-
if (items && items.length && value) {
|
|
157
|
+
if (items && items.length && (0, _utils.isNonNullable)(value)) {
|
|
157
158
|
index = items.findIndex(function (x) {return itemToValue(x) === itemToValue(value);});
|
|
158
159
|
}
|
|
159
160
|
menu.highlightItem(index);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["CustomComboBoxReducer.tsx"],"names":["DEBOUNCE_DELAY","getValueString","value","valueToString","Effect","Search","query","dispatch","getState","getProps","getInstance","search","DebouncedSearch","searchEffect","textValue","CancelRequest","cancel","cancelSearch","Blur","onBlur","Focus","onFocus","ValueChange","onValueChange","UnexpectedInput","items","onUnexpectedInput","Array","isArray","length","singleItem","valueContent","type","keepFocus","undefined","InputChange","onInputValueChange","returnedValue","InputFocus","input","focus","HighlightMenuItem","itemToValue","focused","requestStatus","menu","valueString","index","findIndex","x","highlightItem","requestAnimationFrame","scrollToSelected","ComboBoxRequestStatus","Failed","down","SelectMenuItem","event","enter","MoveMenuHighlight","direction","ResetHighlightedMenuItem","combobox","hasHighlightedItem","reset","Reflow","LayoutEvents","emit","SelectInputText","selectInputText","InputKeyDown","onInputKeyDown","never","_","reducer","state","props","action","opened","inputChanged","editing","newState","searchOnFocus","e","effects","nextState","preventDefault","push","prevProps","DefaultState","loading","Pending","shouldResetMenuHighlight","Success","repeatRequest","Unknown"],"mappings":"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","sourcesContent":["import React from 'react';\nimport debounce from 'lodash.debounce';\nimport isEqual from 'lodash.isequal';\n\nimport { isKeyArrowUp, isKeyArrowVertical, isKeyEnter, isKeyEscape } from '../../lib/events/keyboard/identifiers';\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { Nullable } from '../../typings/utility-types';\n\nimport { CustomComboBox, CustomComboBoxProps, CustomComboBoxState, DefaultState } from './CustomComboBox';\nimport { ComboBoxRequestStatus } from './CustomComboBoxTypes';\n\nexport type CustomComboBoxAction<T> =\n | { type: 'ValueChange'; value: T; keepFocus: boolean }\n | { type: 'TextChange'; value: string }\n | { type: 'KeyPress'; event: React.KeyboardEvent }\n | {\n type: 'DidUpdate';\n prevProps: CustomComboBoxProps<T>;\n prevState: CustomComboBoxState<T>;\n }\n | { type: 'Mount' }\n | { type: 'Focus' }\n | { type: 'InputClick' }\n | { type: 'Blur' }\n | { type: 'Reset' }\n | { type: 'Open' }\n | { type: 'Close' }\n | { type: 'Search'; query: string }\n | { type: 'RequestItems' }\n | { type: 'ReceiveItems'; items: T[] }\n | { type: 'RequestFailure'; repeatRequest: () => void }\n | { type: 'CancelRequest' };\n\nexport type CustomComboBoxEffect<T> = (\n dispatch: (action: CustomComboBoxAction<T>) => void,\n getState: () => CustomComboBoxState<T>,\n getProps: () => CustomComboBoxProps<T>,\n getInstance: () => CustomComboBox<T>,\n) => void;\n\ntype Effect = CustomComboBoxEffect<any>;\n\ninterface EffectFactory {\n Search: (query: string) => Effect;\n DebouncedSearch: Effect & {\n cancel(): void;\n flush(): void;\n };\n CancelRequest: Effect;\n Blur: Effect;\n Focus: Effect;\n\n ValueChange: (value: any) => Effect;\n UnexpectedInput: (textValue: string, items: Nullable<any[]>) => Effect;\n InputChange: Effect;\n InputFocus: Effect;\n HighlightMenuItem: Effect;\n SelectMenuItem: (event: React.KeyboardEvent<HTMLElement>) => Effect;\n InputKeyDown: (event: React.KeyboardEvent<HTMLElement>) => Effect;\n MoveMenuHighlight: (direction: 'up' | 'down') => Effect;\n ResetHighlightedMenuItem: Effect;\n Reflow: Effect;\n SelectInputText: Effect;\n}\n\nconst DEBOUNCE_DELAY = 300;\n\nconst getValueString = (value: any, valueToString: CustomComboBoxProps<any>['valueToString']) => {\n return value ? valueToString(value) : '';\n};\n\nexport const Effect: EffectFactory = {\n Search: (query) => (dispatch, getState, getProps, getInstance) => {\n getInstance().search(query);\n },\n DebouncedSearch: debounce((dispatch, getState, getProps, getInstance) => {\n const searchEffect = Effect.Search(getState().textValue);\n searchEffect(dispatch, getState, getProps, getInstance);\n }, DEBOUNCE_DELAY),\n CancelRequest: (dispatch, getState, getProps, getInstance) => {\n Effect.DebouncedSearch.cancel();\n getInstance().cancelSearch();\n },\n Blur: (dispatch, getState, getProps) => {\n const { onBlur } = getProps();\n if (onBlur) {\n onBlur();\n }\n },\n Focus: (dispatch, getState, getProps) => {\n const { onFocus } = getProps();\n if (onFocus) {\n onFocus();\n }\n },\n ValueChange: (value) => (dispatch, getState, getProps) => {\n const { onValueChange } = getProps();\n if (onValueChange) {\n onValueChange(value);\n }\n },\n UnexpectedInput: (textValue, items) => (dispatch, getState, getProps) => {\n const { onUnexpectedInput, valueToString } = getProps();\n\n if (Array.isArray(items) && items.length === 1) {\n const singleItem = items[0];\n const valueContent = getValueString(singleItem, valueToString);\n\n if (valueContent === textValue) {\n dispatch({ type: 'ValueChange', value: singleItem, keepFocus: false });\n return;\n }\n }\n\n if (onUnexpectedInput) {\n const value = onUnexpectedInput(textValue);\n if (value !== undefined) {\n dispatch({ type: 'ValueChange', value, keepFocus: false });\n }\n }\n },\n InputChange: (dispatch, getState, getProps) => {\n const { onInputValueChange } = getProps();\n const { textValue } = getState();\n if (onInputValueChange) {\n const returnedValue = onInputValueChange(textValue);\n if (typeof returnedValue === 'string' && returnedValue !== textValue) {\n dispatch({ type: 'TextChange', value: returnedValue });\n }\n }\n },\n InputFocus: (dispatch, getState, getProps, getInstance) => {\n const { input } = getInstance();\n\n if (!input) {\n return;\n }\n\n input.focus();\n },\n HighlightMenuItem: (dispatch, getState, getProps, getInstance) => {\n const { value, itemToValue, valueToString } = getProps();\n const { items, focused, textValue, requestStatus } = getState();\n const { menu } = getInstance();\n const valueString = getValueString(value, valueToString);\n\n if (!menu) {\n return;\n }\n\n if (!focused) {\n return;\n }\n\n let index = -1;\n if (items && items.length && value) {\n index = items.findIndex((x) => itemToValue(x) === itemToValue(value));\n }\n menu.highlightItem(index);\n\n if (index >= 0) {\n // FIXME: accessing private props\n // @ts-ignore\n requestAnimationFrame(() => menu && menu.scrollToSelected());\n return;\n }\n\n if (textValue !== valueString || requestStatus === ComboBoxRequestStatus.Failed) {\n requestAnimationFrame(() => menu && menu.down());\n }\n },\n SelectMenuItem: (event) => (dispatch, getState, getProps, getInstance) => {\n const { menu } = getInstance();\n if (menu) {\n menu.enter(event);\n }\n },\n MoveMenuHighlight: (direction) => (dispatch, getState, getProps, getInstance) => {\n const { menu } = getInstance();\n if (menu) {\n menu[direction]();\n }\n },\n ResetHighlightedMenuItem: (dispatch, getState, getProps, getInstance) => {\n const combobox = getInstance();\n\n if (combobox.menu && combobox.menu.hasHighlightedItem()) {\n combobox.menu.reset();\n }\n },\n Reflow: () => {\n LayoutEvents.emit();\n },\n SelectInputText: (dispatch, getState, getProps, getInstance) => {\n const combobox = getInstance();\n combobox.selectInputText();\n },\n InputKeyDown: (event) => (dispatch, getState, getProps, getInstance) => {\n const { onInputKeyDown } = getProps();\n if (onInputKeyDown) {\n onInputKeyDown(event);\n }\n },\n};\n\nconst never = (_: never) => null;\n\nexport function reducer<T>(\n state: CustomComboBoxState<T>,\n props: CustomComboBoxProps<T>,\n action: CustomComboBoxAction<T>,\n): Pick<CustomComboBoxState<T>, never> | [Pick<CustomComboBoxState<T>, never>, Array<CustomComboBoxEffect<T>>] {\n switch (action.type) {\n case 'ValueChange': {\n const { value, keepFocus } = action;\n const textValue = getValueString(value, props.valueToString);\n if (keepFocus) {\n return [\n {\n opened: false,\n inputChanged: false,\n editing: true,\n items: null,\n textValue,\n },\n [Effect.ValueChange(value), Effect.CancelRequest, Effect.InputFocus],\n ];\n }\n return [\n {\n opened: false,\n inputChanged: false,\n editing: false,\n items: null,\n textValue,\n },\n [Effect.ValueChange(value), Effect.CancelRequest],\n ];\n }\n case 'TextChange': {\n const newState = {\n inputChanged: true,\n textValue: action.value,\n };\n if (!action.value && !props.searchOnFocus) {\n return [\n {\n ...newState,\n opened: false,\n items: null,\n },\n [Effect.InputChange],\n ];\n }\n return [newState, [Effect.DebouncedSearch, Effect.InputChange]];\n }\n case 'KeyPress': {\n const e = action.event as React.KeyboardEvent<HTMLElement>;\n const effects = [];\n let nextState = state;\n\n switch (true) {\n case isKeyEnter(e):\n e.preventDefault();\n effects.push(Effect.SelectMenuItem(e));\n break;\n case isKeyArrowVertical(e):\n e.preventDefault();\n effects.push(Effect.MoveMenuHighlight(isKeyArrowUp(e) ? 'up' : 'down'));\n if (!state.opened) {\n effects.push(Effect.Search(state.textValue));\n }\n break;\n case isKeyEscape(e):\n nextState = {\n ...state,\n items: null,\n opened: false,\n };\n break;\n }\n return [nextState, [...effects, Effect.InputKeyDown(e)]];\n }\n case 'DidUpdate': {\n if (isEqual(props.value, action.prevProps.value)) {\n return state;\n }\n\n return {\n opened: false,\n textValue: state.editing ? state.textValue : getValueString(props.value, props.valueToString),\n };\n }\n case 'Mount': {\n return {\n textValue: getValueString(props.value, props.valueToString),\n };\n }\n case 'Focus': {\n const newState = {\n focused: true,\n editing: true,\n };\n if (!props.searchOnFocus) {\n return [newState, [Effect.Focus]];\n }\n if (state.editing) {\n return [newState, [Effect.Search(state.textValue), Effect.Focus]];\n }\n return [newState, [Effect.Search(''), Effect.Focus, Effect.SelectInputText]];\n }\n case 'InputClick': {\n if (!state.opened && props.searchOnFocus) {\n return [state, [Effect.Search('')]];\n }\n return state;\n }\n case 'Blur': {\n const { inputChanged, items } = state;\n if (!inputChanged) {\n return [\n {\n focused: false,\n opened: false,\n items: null,\n editing: false,\n },\n [Effect.Blur, Effect.CancelRequest],\n ];\n }\n\n return [\n {\n focused: false,\n opened: false,\n items: null,\n },\n [Effect.Blur, Effect.CancelRequest, Effect.UnexpectedInput(state.textValue, items)],\n ];\n }\n case 'Reset': {\n return DefaultState;\n }\n case 'Open': {\n return { opened: true };\n }\n case 'Close': {\n return { opened: false, items: null };\n }\n case 'Search': {\n return [state, [Effect.Search(action.query)]];\n }\n case 'RequestItems': {\n return {\n loading: true,\n opened: true,\n requestStatus: ComboBoxRequestStatus.Pending,\n };\n }\n case 'ReceiveItems': {\n const shouldResetMenuHighlight = state.textValue === '';\n return [\n {\n loading: false,\n opened: true,\n items: action.items,\n requestStatus: ComboBoxRequestStatus.Success,\n },\n [shouldResetMenuHighlight ? Effect.ResetHighlightedMenuItem : Effect.HighlightMenuItem, Effect.Reflow],\n ];\n }\n case 'RequestFailure': {\n return [\n {\n loading: false,\n opened: true,\n items: null,\n requestStatus: ComboBoxRequestStatus.Failed,\n repeatRequest: action.repeatRequest,\n },\n [Effect.HighlightMenuItem],\n ];\n }\n case 'CancelRequest': {\n return {\n loading: false,\n requestStatus: ComboBoxRequestStatus.Unknown,\n };\n }\n default: {\n never(action);\n }\n }\n return state;\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["CustomComboBoxReducer.tsx"],"names":["DEBOUNCE_DELAY","getValueString","value","valueToString","Effect","Search","query","dispatch","getState","getProps","getInstance","search","DebouncedSearch","searchEffect","textValue","CancelRequest","cancel","cancelSearch","Blur","onBlur","Focus","onFocus","ValueChange","onValueChange","UnexpectedInput","items","onUnexpectedInput","Array","isArray","length","singleItem","valueContent","type","keepFocus","undefined","InputChange","onInputValueChange","returnedValue","InputFocus","input","focus","HighlightMenuItem","itemToValue","focused","requestStatus","menu","valueString","index","findIndex","x","highlightItem","requestAnimationFrame","scrollToSelected","ComboBoxRequestStatus","Failed","down","SelectMenuItem","event","enter","MoveMenuHighlight","direction","ResetHighlightedMenuItem","combobox","hasHighlightedItem","reset","Reflow","LayoutEvents","emit","SelectInputText","selectInputText","InputKeyDown","onInputKeyDown","never","_","reducer","state","props","action","opened","inputChanged","editing","newState","searchOnFocus","e","effects","nextState","preventDefault","push","prevProps","DefaultState","loading","Pending","shouldResetMenuHighlight","Success","repeatRequest","Unknown"],"mappings":"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","sourcesContent":["import React from 'react';\nimport debounce from 'lodash.debounce';\nimport isEqual from 'lodash.isequal';\n\nimport { isNonNullable } from '../../lib/utils';\nimport { isKeyArrowUp, isKeyArrowVertical, isKeyEnter, isKeyEscape } from '../../lib/events/keyboard/identifiers';\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { Nullable } from '../../typings/utility-types';\n\nimport { CustomComboBox, CustomComboBoxProps, CustomComboBoxState, DefaultState } from './CustomComboBox';\nimport { ComboBoxRequestStatus } from './CustomComboBoxTypes';\n\nexport type CustomComboBoxAction<T> =\n | { type: 'ValueChange'; value: T; keepFocus: boolean }\n | { type: 'TextChange'; value: string }\n | { type: 'KeyPress'; event: React.KeyboardEvent }\n | {\n type: 'DidUpdate';\n prevProps: CustomComboBoxProps<T>;\n prevState: CustomComboBoxState<T>;\n }\n | { type: 'Mount' }\n | { type: 'Focus' }\n | { type: 'InputClick' }\n | { type: 'Blur' }\n | { type: 'Reset' }\n | { type: 'Open' }\n | { type: 'Close' }\n | { type: 'Search'; query: string }\n | { type: 'RequestItems' }\n | { type: 'ReceiveItems'; items: T[] }\n | { type: 'RequestFailure'; repeatRequest: () => void }\n | { type: 'CancelRequest' };\n\nexport type CustomComboBoxEffect<T> = (\n dispatch: (action: CustomComboBoxAction<T>) => void,\n getState: () => CustomComboBoxState<T>,\n getProps: () => CustomComboBoxProps<T>,\n getInstance: () => CustomComboBox<T>,\n) => void;\n\ntype Effect = CustomComboBoxEffect<any>;\n\ninterface EffectFactory {\n Search: (query: string) => Effect;\n DebouncedSearch: Effect & {\n cancel(): void;\n flush(): void;\n };\n CancelRequest: Effect;\n Blur: Effect;\n Focus: Effect;\n\n ValueChange: (value: any) => Effect;\n UnexpectedInput: (textValue: string, items: Nullable<any[]>) => Effect;\n InputChange: Effect;\n InputFocus: Effect;\n HighlightMenuItem: Effect;\n SelectMenuItem: (event: React.KeyboardEvent<HTMLElement>) => Effect;\n InputKeyDown: (event: React.KeyboardEvent<HTMLElement>) => Effect;\n MoveMenuHighlight: (direction: 'up' | 'down') => Effect;\n ResetHighlightedMenuItem: Effect;\n Reflow: Effect;\n SelectInputText: Effect;\n}\n\nconst DEBOUNCE_DELAY = 300;\n\nconst getValueString = (value: any, valueToString: CustomComboBoxProps<any>['valueToString']) => {\n return isNonNullable(value) ? valueToString(value) : '';\n};\n\nexport const Effect: EffectFactory = {\n Search: (query) => (dispatch, getState, getProps, getInstance) => {\n getInstance().search(query);\n },\n DebouncedSearch: debounce((dispatch, getState, getProps, getInstance) => {\n const searchEffect = Effect.Search(getState().textValue);\n searchEffect(dispatch, getState, getProps, getInstance);\n }, DEBOUNCE_DELAY),\n CancelRequest: (dispatch, getState, getProps, getInstance) => {\n Effect.DebouncedSearch.cancel();\n getInstance().cancelSearch();\n },\n Blur: (dispatch, getState, getProps) => {\n const { onBlur } = getProps();\n if (onBlur) {\n onBlur();\n }\n },\n Focus: (dispatch, getState, getProps) => {\n const { onFocus } = getProps();\n if (onFocus) {\n onFocus();\n }\n },\n ValueChange: (value) => (dispatch, getState, getProps) => {\n const { onValueChange } = getProps();\n if (onValueChange) {\n onValueChange(value);\n }\n },\n UnexpectedInput: (textValue, items) => (dispatch, getState, getProps) => {\n const { onUnexpectedInput, valueToString } = getProps();\n\n if (Array.isArray(items) && items.length === 1) {\n const singleItem = items[0];\n const valueContent = getValueString(singleItem, valueToString);\n\n if (valueContent === textValue) {\n dispatch({ type: 'ValueChange', value: singleItem, keepFocus: false });\n return;\n }\n }\n\n if (onUnexpectedInput) {\n const value = onUnexpectedInput(textValue);\n if (value !== undefined) {\n dispatch({ type: 'ValueChange', value, keepFocus: false });\n }\n }\n },\n InputChange: (dispatch, getState, getProps) => {\n const { onInputValueChange } = getProps();\n const { textValue } = getState();\n if (onInputValueChange) {\n const returnedValue = onInputValueChange(textValue);\n if (typeof returnedValue === 'string' && returnedValue !== textValue) {\n dispatch({ type: 'TextChange', value: returnedValue });\n }\n }\n },\n InputFocus: (dispatch, getState, getProps, getInstance) => {\n const { input } = getInstance();\n\n if (!input) {\n return;\n }\n\n input.focus();\n },\n HighlightMenuItem: (dispatch, getState, getProps, getInstance) => {\n const { value, itemToValue, valueToString } = getProps();\n const { items, focused, textValue, requestStatus } = getState();\n const { menu } = getInstance();\n const valueString = getValueString(value, valueToString);\n\n if (!menu) {\n return;\n }\n\n if (!focused) {\n return;\n }\n\n let index = -1;\n if (items && items.length && isNonNullable(value)) {\n index = items.findIndex((x) => itemToValue(x) === itemToValue(value));\n }\n menu.highlightItem(index);\n\n if (index >= 0) {\n // FIXME: accessing private props\n // @ts-ignore\n requestAnimationFrame(() => menu && menu.scrollToSelected());\n return;\n }\n\n if (textValue !== valueString || requestStatus === ComboBoxRequestStatus.Failed) {\n requestAnimationFrame(() => menu && menu.down());\n }\n },\n SelectMenuItem: (event) => (dispatch, getState, getProps, getInstance) => {\n const { menu } = getInstance();\n if (menu) {\n menu.enter(event);\n }\n },\n MoveMenuHighlight: (direction) => (dispatch, getState, getProps, getInstance) => {\n const { menu } = getInstance();\n if (menu) {\n menu[direction]();\n }\n },\n ResetHighlightedMenuItem: (dispatch, getState, getProps, getInstance) => {\n const combobox = getInstance();\n\n if (combobox.menu && combobox.menu.hasHighlightedItem()) {\n combobox.menu.reset();\n }\n },\n Reflow: () => {\n LayoutEvents.emit();\n },\n SelectInputText: (dispatch, getState, getProps, getInstance) => {\n const combobox = getInstance();\n combobox.selectInputText();\n },\n InputKeyDown: (event) => (dispatch, getState, getProps, getInstance) => {\n const { onInputKeyDown } = getProps();\n if (onInputKeyDown) {\n onInputKeyDown(event);\n }\n },\n};\n\nconst never = (_: never) => null;\n\nexport function reducer<T>(\n state: CustomComboBoxState<T>,\n props: CustomComboBoxProps<T>,\n action: CustomComboBoxAction<T>,\n): Pick<CustomComboBoxState<T>, never> | [Pick<CustomComboBoxState<T>, never>, Array<CustomComboBoxEffect<T>>] {\n switch (action.type) {\n case 'ValueChange': {\n const { value, keepFocus } = action;\n const textValue = getValueString(value, props.valueToString);\n if (keepFocus) {\n return [\n {\n opened: false,\n inputChanged: false,\n editing: true,\n items: null,\n textValue,\n },\n [Effect.ValueChange(value), Effect.CancelRequest, Effect.InputFocus],\n ];\n }\n return [\n {\n opened: false,\n inputChanged: false,\n editing: false,\n items: null,\n textValue,\n },\n [Effect.ValueChange(value), Effect.CancelRequest],\n ];\n }\n case 'TextChange': {\n const newState = {\n inputChanged: true,\n textValue: action.value,\n };\n if (!action.value && !props.searchOnFocus) {\n return [\n {\n ...newState,\n opened: false,\n items: null,\n },\n [Effect.InputChange],\n ];\n }\n return [newState, [Effect.DebouncedSearch, Effect.InputChange]];\n }\n case 'KeyPress': {\n const e = action.event as React.KeyboardEvent<HTMLElement>;\n const effects = [];\n let nextState = state;\n\n switch (true) {\n case isKeyEnter(e):\n e.preventDefault();\n effects.push(Effect.SelectMenuItem(e));\n break;\n case isKeyArrowVertical(e):\n e.preventDefault();\n effects.push(Effect.MoveMenuHighlight(isKeyArrowUp(e) ? 'up' : 'down'));\n if (!state.opened) {\n effects.push(Effect.Search(state.textValue));\n }\n break;\n case isKeyEscape(e):\n nextState = {\n ...state,\n items: null,\n opened: false,\n };\n break;\n }\n return [nextState, [...effects, Effect.InputKeyDown(e)]];\n }\n case 'DidUpdate': {\n if (isEqual(props.value, action.prevProps.value)) {\n return state;\n }\n\n return {\n opened: false,\n textValue: state.editing ? state.textValue : getValueString(props.value, props.valueToString),\n };\n }\n case 'Mount': {\n return {\n textValue: getValueString(props.value, props.valueToString),\n };\n }\n case 'Focus': {\n const newState = {\n focused: true,\n editing: true,\n };\n if (!props.searchOnFocus) {\n return [newState, [Effect.Focus]];\n }\n if (state.editing) {\n return [newState, [Effect.Search(state.textValue), Effect.Focus]];\n }\n return [newState, [Effect.Search(''), Effect.Focus, Effect.SelectInputText]];\n }\n case 'InputClick': {\n if (!state.opened && props.searchOnFocus) {\n return [state, [Effect.Search('')]];\n }\n return state;\n }\n case 'Blur': {\n const { inputChanged, items } = state;\n if (!inputChanged) {\n return [\n {\n focused: false,\n opened: false,\n items: null,\n editing: false,\n },\n [Effect.Blur, Effect.CancelRequest],\n ];\n }\n\n return [\n {\n focused: false,\n opened: false,\n items: null,\n },\n [Effect.Blur, Effect.CancelRequest, Effect.UnexpectedInput(state.textValue, items)],\n ];\n }\n case 'Reset': {\n return DefaultState;\n }\n case 'Open': {\n return { opened: true };\n }\n case 'Close': {\n return { opened: false, items: null };\n }\n case 'Search': {\n return [state, [Effect.Search(action.query)]];\n }\n case 'RequestItems': {\n return {\n loading: true,\n opened: true,\n requestStatus: ComboBoxRequestStatus.Pending,\n };\n }\n case 'ReceiveItems': {\n const shouldResetMenuHighlight = state.textValue === '';\n return [\n {\n loading: false,\n opened: true,\n items: action.items,\n requestStatus: ComboBoxRequestStatus.Success,\n },\n [shouldResetMenuHighlight ? Effect.ResetHighlightedMenuItem : Effect.HighlightMenuItem, Effect.Reflow],\n ];\n }\n case 'RequestFailure': {\n return [\n {\n loading: false,\n opened: true,\n items: null,\n requestStatus: ComboBoxRequestStatus.Failed,\n repeatRequest: action.repeatRequest,\n },\n [Effect.HighlightMenuItem],\n ];\n }\n case 'CancelRequest': {\n return {\n loading: false,\n requestStatus: ComboBoxRequestStatus.Unknown,\n };\n }\n default: {\n never(action);\n }\n }\n return state;\n}\n"]}
|
|
@@ -9,6 +9,7 @@ export interface InputLikeTextProps extends CommonProps, InputProps {
|
|
|
9
9
|
onBlur?: React.FocusEventHandler<HTMLElement>;
|
|
10
10
|
onMouseDragStart?: MouseDragEventHandler;
|
|
11
11
|
onMouseDragEnd?: MouseDragEventHandler;
|
|
12
|
+
takeContentWidth?: boolean;
|
|
12
13
|
}
|
|
13
14
|
export declare type InputLikeTextState = Omit<InputState, 'polyfillPlaceholder'>;
|
|
14
15
|
export declare class InputLikeText extends React.Component<InputLikeTextProps, InputLikeTextState> {
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.InputLikeText = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
|
|
2
2
|
|
|
3
|
+
var _utils = require("../../lib/utils");
|
|
3
4
|
var _identifiers = require("../../lib/events/keyboard/identifiers");
|
|
4
5
|
var _MouseDrag = require("../../lib/events/MouseDrag");
|
|
5
6
|
var _client = require("../../lib/client");
|
|
@@ -27,6 +28,7 @@ var _HiddenInput = require("./HiddenInput");var
|
|
|
27
28
|
|
|
28
29
|
|
|
29
30
|
|
|
31
|
+
|
|
30
32
|
InputLikeText = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(InputLikeText, _React$Component);function InputLikeText() {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.
|
|
31
33
|
|
|
32
34
|
|
|
@@ -146,7 +148,8 @@ InputLikeText = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.de
|
|
|
146
148
|
|
|
147
149
|
|
|
148
150
|
|
|
149
|
-
|
|
151
|
+
|
|
152
|
+
props.innerRef,tabIndex = props.tabIndex,placeholder = props.placeholder,align = props.align,borderless = props.borderless,width = props.width,size = props.size,error = props.error,warning = props.warning,onValueChange = props.onValueChange,disabled = props.disabled,prefix = props.prefix,suffix = props.suffix,leftIcon = props.leftIcon,rightIcon = props.rightIcon,value = props.value,onMouseDragStart = props.onMouseDragStart,onMouseDragEnd = props.onMouseDragEnd,takeContentWidth = props.takeContentWidth,rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["innerRef", "tabIndex", "placeholder", "align", "borderless", "width", "size", "error", "warning", "onValueChange", "disabled", "prefix", "suffix", "leftIcon", "rightIcon", "value", "onMouseDragStart", "onMouseDragEnd", "takeContentWidth"]);var _this$state =
|
|
150
153
|
|
|
151
154
|
_this.state,focused = _this$state.focused,blinking = _this$state.blinking;
|
|
152
155
|
|
|
@@ -187,7 +190,8 @@ InputLikeText = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.de
|
|
|
187
190
|
_react.default.createElement("span", { className: wrapperClass }, /*#__PURE__*/
|
|
188
191
|
_react.default.createElement("span", {
|
|
189
192
|
"data-tid": "InputLikeText__input",
|
|
190
|
-
className: (0, _Emotion.cx)(
|
|
193
|
+
className: (0, _Emotion.cx)(_Input.styles.input(_this.theme), (_cx3 = {}, _cx3[
|
|
194
|
+
_InputLikeText.styles.absolute()] = !takeContentWidth, _cx3[
|
|
191
195
|
_Input.styles.inputFocus(_this.theme)] = focused, _cx3[
|
|
192
196
|
_Input.styles.inputDisabled(_this.theme)] = disabled, _cx3)) },
|
|
193
197
|
|
|
@@ -304,8 +308,9 @@ InputLikeText = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.de
|
|
|
304
308
|
renderPlaceholder = function () {var _this$props3 =
|
|
305
309
|
_this.props,children = _this$props3.children,placeholder = _this$props3.placeholder,disabled = _this$props3.disabled;var
|
|
306
310
|
focused = _this.state.focused;
|
|
311
|
+
var hasValue = (0, _utils.isNonNullable)(children) && children !== '';
|
|
307
312
|
|
|
308
|
-
if (!
|
|
313
|
+
if (!hasValue && placeholder) {var _cx7;
|
|
309
314
|
return /*#__PURE__*/(
|
|
310
315
|
_react.default.createElement("span", {
|
|
311
316
|
className: (0, _Emotion.cx)(_Input.styles.placeholder(_this.theme), (_cx7 = {}, _cx7[
|