@skbkontur/react-ui 3.8.1 → 3.8.2
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 +15 -2
- package/cjs/components/CurrencyLabel/CurrencyLabel.js +5 -14
- package/cjs/components/CurrencyLabel/CurrencyLabel.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 +3 -0
- 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/Toggle/Toggle.d.ts +4 -0
- package/cjs/components/Toggle/Toggle.js +7 -1
- package/cjs/components/Toggle/Toggle.js.map +1 -1
- package/cjs/components/Toggle/Toggle.md +13 -0
- package/cjs/components/Toggle/Toggle.styles.d.ts +1 -0
- package/cjs/components/Toggle/Toggle.styles.js +6 -7
- 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/components/CurrencyLabel/CurrencyLabel/CurrencyLabel.js +5 -11
- package/components/CurrencyLabel/CurrencyLabel/CurrencyLabel.js.map +1 -1
- 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.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/Toggle/Toggle/Toggle.js +5 -3
- package/components/Toggle/Toggle/Toggle.js.map +1 -1
- package/components/Toggle/Toggle.d.ts +4 -0
- package/components/Toggle/Toggle.md +13 -0
- package/components/Toggle/Toggle.styles/Toggle.styles.js +3 -3
- package/components/Toggle/Toggle.styles/Toggle.styles.js.map +1 -1
- package/components/Toggle/Toggle.styles.d.ts +1 -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/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":["React","ThemeFactory","ThemeContext","PopupMenu","isProductionEnv","isTestEnv","CommonWrapper","TooltipMenu","props","caption","Error","render","theme","create","popupPinOffset","tooltipMenuPinOffset","popupMargin","tooltipMenuMargin","popupPinSize","tooltipMenuPinSize","renderMain","menuMaxHeight","menuWidth","header","footer","positions","disableAnimations","children","Component","__KONTUR_REACT_UI__","defaultProps"],"mappings":"sEAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAASC,SAAT,QAA0C,0BAA1C;;AAEA,SAASC,eAAT,EAA0BC,SAA1B,QAA2C,8BAA3C;;;AAGA,SAAsBC,aAAtB,QAA2C,8BAA3C
|
|
1
|
+
{"version":3,"sources":["TooltipMenu.tsx"],"names":["React","ThemeFactory","ThemeContext","PopupMenu","isProductionEnv","isTestEnv","CommonWrapper","TooltipMenu","props","caption","Error","render","theme","create","popupPinOffset","tooltipMenuPinOffset","popupMargin","tooltipMenuMargin","popupPinSize","tooltipMenuPinSize","renderMain","menuMaxHeight","menuWidth","header","footer","positions","disableAnimations","children","Component","__KONTUR_REACT_UI__","defaultProps"],"mappings":"sEAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAASC,SAAT,QAA0C,0BAA1C;;AAEA,SAASC,eAAT,EAA0BC,SAA1B,QAA2C,8BAA3C;;;AAGA,SAAsBC,aAAtB,QAA2C,8BAA3C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAaC,WAAb;;;;;;AAME,uBAAYC,KAAZ,EAAqC;AACnC,wCAAMA,KAAN;;AAEA,QAAI,CAACA,KAAK,CAACC,OAAP,IAAkB,CAACL,eAAvB,EAAwC;AACtC,YAAM,IAAIM,KAAJ,CAAU,+BAAV,CAAN;AACD,KALkC;AAMpC,GAZH;;AAcSC,EAAAA,MAdT,GAcE,kBAAgB;AACd;AACE,0BAAC,YAAD,CAAc,QAAd;AACG,gBAACC,KAAD,EAAW;AACV;AACE,8BAAC,YAAD,CAAc,QAAd;AACE,YAAA,KAAK,EAAEX,YAAY,CAACY,MAAb;AACL;AACEC,cAAAA,cAAc,EAAEF,KAAK,CAACG,oBADxB;AAEEC,cAAAA,WAAW,EAAEJ,KAAK,CAACK,iBAFrB;AAGEC,cAAAA,YAAY,EAAEN,KAAK,CAACO,kBAHtB,EADK;;AAMLP,YAAAA,KANK,CADT;;;AAUG,UAAA,MAAI,CAACQ,UAAL,EAVH,CADF;;;AAcD,OAhBH,CADF;;;AAoBD,GAnCH;;AAqCSA,EAAAA,UArCT,GAqCE,sBAAoB;AAClB,QAAI,CAAC,KAAKZ,KAAL,CAAWC,OAAhB,EAAyB;AACvB,aAAO,IAAP;AACD;;AAED;AACE,0BAAC,aAAD,EAAmB,KAAKD,KAAxB;AACE,0BAAC,SAAD;AACE,QAAA,aAAa,EAAE,KAAKA,KAAL,CAAWa,aAD5B;AAEE,QAAA,SAAS,EAAE,KAAKb,KAAL,CAAWc,SAFxB;AAGE,QAAA,OAAO,EAAE,KAAKd,KAAL,CAAWC,OAHtB;AAIE,QAAA,MAAM,EAAE,KAAKD,KAAL,CAAWe,MAJrB;AAKE,QAAA,MAAM,EAAE,KAAKf,KAAL,CAAWgB,MALrB;AAME,QAAA,SAAS,EAAE,KAAKhB,KAAL,CAAWiB,SANxB;AAOE,QAAA,WAAW,EAAE,IAPf;AAQE,QAAA,iBAAiB,EAAE,KAAKjB,KAAL,CAAWkB,iBARhC;;AAUG,WAAKlB,KAAL,CAAWmB,QAVd,CADF,CADF;;;;AAgBD,GA1DH,sBAAiC3B,KAAK,CAAC4B,SAAvC,EAAarB,W,CACGsB,mB,GAAsB,a,CADzBtB,W,CAGGuB,Y,GAAe,EAC3BJ,iBAAiB,EAAErB,SADQ,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"]}
|
|
@@ -13,14 +13,29 @@ export interface TooltipMenuProps extends CommonProps {
|
|
|
13
13
|
menuWidth?: number | string;
|
|
14
14
|
/**
|
|
15
15
|
* Элемент или функция возвращающая элемент,
|
|
16
|
-
* если передана, используется вместо
|
|
16
|
+
* если передана, используется вместо `caption`,
|
|
17
17
|
* в таком случае управлять открытием и закрытием меню
|
|
18
18
|
* придется в этой функции
|
|
19
19
|
*/
|
|
20
20
|
caption: PopupMenuProps['caption'];
|
|
21
|
+
/**
|
|
22
|
+
* Произвольный элемент, который будет отрендерен в шапке меню.
|
|
23
|
+
*
|
|
24
|
+
* _Примечание_: контрол [`MenuHeader`](#/Components/MenuHeader) передаётся только в `children` меню-контролов. Не стоит передавать `MenuHeader` в `header`.
|
|
25
|
+
*/
|
|
21
26
|
header?: React.ReactNode;
|
|
27
|
+
/**
|
|
28
|
+
* Произвольный элемент, который будет отрендерен в подвале меню.
|
|
29
|
+
*
|
|
30
|
+
* Перед элементом переданным в `footer` будет отрендерен [`MenuSeparator`](#/Components/MenuSeparator).
|
|
31
|
+
*/
|
|
22
32
|
footer?: React.ReactNode;
|
|
23
|
-
/**
|
|
33
|
+
/** Список позиций доступных для расположения выпадашки относительно `caption`.
|
|
34
|
+
*
|
|
35
|
+
* Если во всех позициях выпадашка вылезает за пределы `viewport`, будет использована первая из этого списка.
|
|
36
|
+
*
|
|
37
|
+
* **Возможные значения**: `top left`, `top center`, `top right`, `right top`, `right middle`, `right bottom`, `bottom left`, `bottom center`, `bottom right`, `left top`, `left middle`, `left bottom`
|
|
38
|
+
*/
|
|
24
39
|
positions?: PopupPosition[];
|
|
25
40
|
/**
|
|
26
41
|
* Не показывать анимацию
|
|
@@ -28,12 +43,15 @@ export interface TooltipMenuProps extends CommonProps {
|
|
|
28
43
|
disableAnimations: boolean;
|
|
29
44
|
}
|
|
30
45
|
/**
|
|
31
|
-
* Меню, раскрывающееся по клику на переданный в
|
|
32
|
-
*
|
|
33
|
-
*
|
|
34
|
-
*
|
|
35
|
-
* Если
|
|
36
|
-
*
|
|
46
|
+
* Меню, раскрывающееся по клику на переданный в `caption` элемент.
|
|
47
|
+
*
|
|
48
|
+
* Положение меню задаётся с помощью массива `positions` и работает так:
|
|
49
|
+
* первое значение в массиве - дефолтная позиция, меню раскроется на этой позиции, если оно не будет выходить за пределы `viewport`,
|
|
50
|
+
* если раскрыться в дефолтной позиции не получится - будет использована следующая позиция, и так далее, пока не будет достигнут конец массива. Если все положения из списка будут выходить за пределы `viewport`, в качестве положения будет использовано первое значение в массиве.
|
|
51
|
+
*
|
|
52
|
+
* Если меню должно раскрываться только в одну сторону - массив `positions` должен содержать только один элемент: сторону, в которую должно открываться меню.
|
|
53
|
+
*
|
|
54
|
+
* Если массив `positions` не передан (или передан пустой массив), будут использованы всевозможные значения.
|
|
37
55
|
*/
|
|
38
56
|
export declare class TooltipMenu extends React.Component<TooltipMenuProps> {
|
|
39
57
|
static __KONTUR_REACT_UI__: string;
|
|
@@ -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
|
+
```
|
package/package.json
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@skbkontur/react-ui",
|
|
3
|
-
"version": "3.8.
|
|
3
|
+
"version": "3.8.2",
|
|
4
4
|
"description": "UI Components",
|
|
5
5
|
"main": "cjs/index.js",
|
|
6
6
|
"module": "index.js",
|
|
7
7
|
"sideEffects": false,
|
|
8
|
-
"homepage": "https://tech.skbkontur.ru/react-ui/3.8.
|
|
8
|
+
"homepage": "https://tech.skbkontur.ru/react-ui/3.8.2/",
|
|
9
9
|
"repository": {
|
|
10
10
|
"type": "git",
|
|
11
11
|
"url": "git@github.com:skbkontur/retail-ui.git"
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");var _templateObject;
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
var styles = (0, _Emotion.memoizeStyle)({
|
|
5
|
-
root: function root(t) {
|
|
6
|
-
return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n color: ", ";\n "])),
|
|
7
|
-
t.textColorDefault);
|
|
8
|
-
|
|
9
|
-
} });exports.styles = styles;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["CurrencyLabel.styles.ts"],"names":["styles","root","t","css","textColorDefault"],"mappings":"4QAAA,oD;;;AAGO,IAAMA,MAAM,GAAG,2BAAa;AACjCC,EAAAA,IADiC,gBAC5BC,CAD4B,EAClB;AACb,eAAOC,YAAP;AACWD,IAAAA,CAAC,CAACE,gBADb;;AAGD,GALgC,EAAb,CAAf,C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n root(t: Theme) {\n return css`\n color: ${t.textColorDefault};\n `;\n },\n});\n"]}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
|
|
2
|
-
|
|
3
|
-
var _templateObject;
|
|
4
|
-
|
|
5
|
-
import { css, memoizeStyle } from "../../../lib/theming/Emotion";
|
|
6
|
-
export var styles = memoizeStyle({
|
|
7
|
-
root: function root(t) {
|
|
8
|
-
return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n color: ", ";\n "])), t.textColorDefault);
|
|
9
|
-
}
|
|
10
|
-
});
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["CurrencyLabel.styles.ts"],"names":["css","memoizeStyle","styles","root","t","textColorDefault"],"mappings":"oHAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;;AAGA,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;AACjCE,EAAAA,IADiC,gBAC5BC,CAD4B,EAClB;AACb,WAAOJ,GAAP;AACWI,IAAAA,CAAC,CAACC,gBADb;;AAGD,GALgC,EAAD,CAA3B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n root(t: Theme) {\n return css`\n color: ${t.textColorDefault};\n `;\n },\n});\n"]}
|