@skbkontur/side-menu 0.2.0 → 0.2.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.
Files changed (45) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/README.md +131 -135
  3. package/index.d.ts +1 -1
  4. package/index.js +1 -1
  5. package/package.json +2 -2
  6. package/src/InnerSubMenu.d.ts +9 -0
  7. package/src/InnerSubMenu.js +18 -0
  8. package/src/RightBorder.d.ts +8 -0
  9. package/src/RightBorder.js +71 -0
  10. package/src/SeparatedSubMenu.d.ts +8 -0
  11. package/src/SeparatedSubMenu.js +42 -0
  12. package/src/SideMenu.d.ts +23 -50
  13. package/src/SideMenu.js +81 -143
  14. package/src/SideMenu.styles.d.ts +8 -4
  15. package/src/SideMenu.styles.js +52 -44
  16. package/src/SideMenuAvatar.d.ts +6 -22
  17. package/src/SideMenuAvatar.js +10 -41
  18. package/src/SideMenuBody.d.ts +5 -7
  19. package/src/SideMenuBody.js +22 -15
  20. package/src/SideMenuBodyChildren.d.ts +6 -0
  21. package/src/SideMenuBodyChildren.js +26 -0
  22. package/src/SideMenuContext.d.ts +7 -6
  23. package/src/SideMenuContext.js +1 -1
  24. package/src/SideMenuDivider.d.ts +5 -10
  25. package/src/SideMenuDivider.js +11 -19
  26. package/src/SideMenuDropdown.d.ts +13 -0
  27. package/src/SideMenuDropdown.js +29 -0
  28. package/src/SideMenuFooter.d.ts +5 -7
  29. package/src/SideMenuFooter.js +19 -6
  30. package/src/SideMenuHeader.d.ts +4 -26
  31. package/src/SideMenuHeader.js +32 -76
  32. package/src/SideMenuItem.d.ts +9 -35
  33. package/src/SideMenuItem.js +134 -165
  34. package/src/SideMenuLogotype.d.ts +6 -0
  35. package/src/SideMenuLogotype.js +65 -0
  36. package/src/SideMenuOrganisations.d.ts +4 -16
  37. package/src/SideMenuOrganisations.js +12 -35
  38. package/src/SideMenuSubItem.d.ts +3 -17
  39. package/src/SideMenuSubItem.js +27 -42
  40. package/src/SideMenuSubItemHeader.d.ts +5 -12
  41. package/src/SideMenuSubItemHeader.js +13 -21
  42. package/src/SideMenuDropdownMenuSeparator.d.ts +0 -11
  43. package/src/SideMenuDropdownMenuSeparator.js +0 -25
  44. package/src/SideMenuSubItemButtons.d.ts +0 -15
  45. package/src/SideMenuSubItemButtons.js +0 -25
package/CHANGELOG.md CHANGED
@@ -3,6 +3,26 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [0.2.2](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@0.2.1...@skbkontur/side-menu@0.2.2) (2022-10-11)
7
+
8
+ **Note:** Version bump only for package @skbkontur/side-menu
9
+
10
+
11
+
12
+
13
+
14
+ ## [0.2.1](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@0.2.0...@skbkontur/side-menu@0.2.1) (2022-09-30)
15
+
16
+
17
+ ### Reverts
18
+
19
+ * Revert "chore(SideMenuDropdown): delete disable animation" ([4c4f0af](https://git.skbkontur.ru/ui/ui-parking/commits/4c4f0afb573bf62ff749d059b48d650d8d3e7db3))
20
+ * Revert "chore: delete span around icon" ([660b128](https://git.skbkontur.ru/ui/ui-parking/commits/660b128ab4b769446d7a1246727f1fadbe354b4d))
21
+
22
+
23
+
24
+
25
+
6
26
  # [0.2.0](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@0.1.4...@skbkontur/side-menu@0.2.0) (2022-07-25)
7
27
 
8
28
 
package/README.md CHANGED
@@ -3,73 +3,75 @@
3
3
  SideMenu в фирменном стиле (макеты живут [здесь](https://www.figma.com/file/XA8Ytcx8bxemYAkF7eGVSv/%D0%9A%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82-%D0%BB%D0%B5%D0%B2%D0%BE%D0%B3%D0%BE-%D0%BC%D0%B5%D0%BD%D1%8E?node-id=0%3A1)).
4
4
 
5
5
  ```jsx harmony
6
- import {getKonturAvatarUrl} from '@skbkontur/react-ui-addons';
7
- import {Kontur, Ofd} from '@skbkontur/logos';
8
- import {MenuItem, ThemeContext, ThemeFactory} from '@skbkontur/react-ui';
9
- import {SideMenu} from './index';
6
+ import { getKonturAvatarUrl } from '@skbkontur/react-ui-addons';
7
+ import { Kontur, Ofd } from '@skbkontur/logos';
8
+ import { MenuItem } from '@skbkontur/react-ui';
9
+ import { SideMenu } from './index';
10
10
  import {
11
- CheckIcon24Regular,
12
- InfoSquareIcon24Regular,
13
- DoubleCheckIcon24Regular,
14
- QuestionSquareIcon24Regular,
15
- DivideCircleIcon24Regular,
16
- PlusSquareIcon24Regular,
17
- WarningTriangleIcon24Regular
11
+ DocTextIcon24Regular,
12
+ CommentRectTextIcon24Regular,
13
+ LightbulbIcon24Regular,
14
+ BookOpenTextIcon24Regular,
15
+ BookmarkIcon24Regular,
16
+ StackHDownIcon24Regular,
17
+ SettingsGearIcon24Regular,
18
18
  } from '@skbkontur/icons';
19
19
 
20
-
21
- const myTheme = ThemeFactory.create({addonsSideMenuHeaderPosition: 'sticky', addonsSideMenuBodyMarginTop: '0px'});
22
-
23
20
  <div style={{height: '600px'}}>
24
- <ThemeContext.Provider value={myTheme}>
25
- <SideMenu>
26
- <SideMenu.Header konturLogo={<Kontur/>} productLogo={<Ofd/>}/>
27
- <SideMenu.Body>
28
- <SideMenu.Item icon={<DoubleCheckIcon24Regular/>} caption={'Документы к подписанию'} marker={'новое'}>
29
- <SideMenu.SubItem caption={'Входящие'}/>
30
- <SideMenu.SubItem caption={'Исходящие'} marker={'2'}>
31
- <SideMenu.SubItem caption={'Исходящие1'}/>
32
- <SideMenu.SubItem caption={'Исходящие2'}/>
33
- </SideMenu.SubItem>
34
- <SideMenu.SubItem caption={'Внутренние'}/>
35
- <SideMenu.SubItem caption={'Черновики'}/>
36
- <SideMenu.SubItem caption={'Удаленные'}/>
37
- <SideMenu.SubItemHeader>Согласованные</SideMenu.SubItemHeader>
38
- <SideMenu.SubItem caption={'Требуют обработки'}/>
39
- <SideMenu.SubItem caption={'Обработанные'}/>
40
- </SideMenu.Item>
41
- <SideMenu.Item caption={'Контрагенты'}/>
42
- <SideMenu.Item icon={<CheckIcon24Regular/>} caption={'Сообщения'} marker={'5'}>
43
- <SideMenu.SubItem caption={'Входящие'} marker={'5'}/>
44
- <SideMenu.SubItem caption={'Исходящие'}/>
45
- <SideMenu.SubItem caption={'Внутренние'}/>
46
- <SideMenu.SubItem caption={'Черновики'}/>
47
- <SideMenu.SubItem caption={'Удаленные'}/>
48
- </SideMenu.Item>
49
- <SideMenu.Item icon={<QuestionSquareIcon24Regular/>} caption={'Справочная'}/>
21
+ <SideMenu>
22
+ <SideMenu.Header konturLogo={<Kontur/>} productLogo={<Ofd/>}/>
23
+ <SideMenu.Body>
24
+ <SideMenu.Item icon={<DocTextIcon24Regular/>} caption={'Документы к подписанию'} marker={'новое'}>
25
+ <SideMenu.SubItem caption={'Входящие'}/>
26
+ <SideMenu.SubItem caption={'Исходящие'} marker={'2'}>
27
+ <SideMenu.SubItem caption={'Исходящие1'}/>
28
+ <SideMenu.SubItem caption={'Исходящие2'}/>
29
+ </SideMenu.SubItem>
30
+ <SideMenu.SubItem caption={'Внутренние'}/>
31
+ <SideMenu.SubItem caption={'Черновики'}/>
32
+ <SideMenu.SubItem caption={'Удаленные'}/>
33
+ <SideMenu.SubItemHeader>Согласованные</SideMenu.SubItemHeader>
34
+ <SideMenu.SubItem caption={'Требуют обработки'}/>
35
+ <SideMenu.SubItem caption={'Обработанные'}/>
36
+ </SideMenu.Item>
37
+ <SideMenu.Item caption={'Контрагенты'}/>
38
+ <SideMenu.Item icon={<CommentRectTextIcon24Regular/>} caption={'Сообщения'} marker={'5'}>
39
+ <SideMenu.SubItem caption={'Входящие'} marker={'5'}/>
40
+ <SideMenu.SubItem caption={'Исходящие'}/>
41
+ <SideMenu.SubItem caption={'Внутренние'}/>
42
+ <SideMenu.SubItem caption={'Черновики'}/>
43
+ <SideMenu.SubItem caption={'Удаленные'}/>
44
+ </SideMenu.Item>
45
+ <SideMenu.Item icon={<LightbulbIcon24Regular/>} caption={'Справочная'}/>
46
+ <SideMenu.Divider/>
47
+ <SideMenu.Item icon={<BookOpenTextIcon24Regular/>} caption={'Еще раздел'}/>
48
+ <SideMenu.Item icon={<BookmarkIcon24Regular/>} caption={'Отчетность'}/>
49
+ </SideMenu.Body>
50
+ <SideMenu.Footer>
51
+ <SideMenu.Organisations icon={<StackHDownIcon24Regular/>}>
52
+ <MenuItem>СКБ Контур</MenuItem>
53
+ <MenuItem>Сириус Базинес</MenuItem>
54
+ <MenuItem>Контур НТТ</MenuItem>
55
+ <MenuItem>Промэлектроника</MenuItem>
50
56
  <SideMenu.Divider/>
51
- <SideMenu.Item icon={<InfoSquareIcon24Regular/>} caption={'Еще раздел'}/>
52
- <SideMenu.Item icon={<DivideCircleIcon24Regular/>} caption={'Отчетность'}/>
53
- </SideMenu.Body>
54
- <SideMenu.Footer>
55
- <SideMenu.Organisations icon={<PlusSquareIcon24Regular/>}>
56
- <MenuItem>СКБ Контур</MenuItem>
57
- <MenuItem>Сириус Базинес</MenuItem>
58
- <MenuItem>Контур НТТ</MenuItem>
59
- <MenuItem>Промэлектроника</MenuItem>
60
- <SideMenu.DropdownMenuSeparator/>
61
- <MenuItem>Список организаций</MenuItem>
62
- </SideMenu.Organisations>
63
- <SideMenu.Item icon={<WarningTriangleIcon24Regular/>} caption={'Реквизиты и настройки'}/>
64
- <SideMenu.Avatar
65
- userName={'Ишматова Елена'}
66
- avatarUrl={getKonturAvatarUrl({
67
- userId: '992408aa-050e-41e9-9a48-6bf2f2f20d94'
68
- })}
69
- />
70
- </SideMenu.Footer>
71
- </SideMenu>
72
- </ThemeContext.Provider>
57
+ <MenuItem>Список организаций</MenuItem>
58
+ </SideMenu.Organisations>
59
+ <SideMenu.Item icon={<SettingsGearIcon24Regular/>} caption={'Реквизиты и настройки'}/>
60
+ <SideMenu.Avatar
61
+ userName={'Ишматова Елена'}
62
+ avatarUrl={getKonturAvatarUrl({
63
+ userId: '992408aa-050e-41e9-9a48-6bf2f2f20d94'
64
+ })}
65
+ >
66
+ <MenuItem href={'https://cabinet.kontur.ru'} target="_blank">
67
+ Личный кабинет
68
+ </MenuItem>
69
+ <MenuItem >Безопасность</MenuItem>
70
+ <SideMenu.Divider />
71
+ <MenuItem >Выйти</MenuItem>
72
+ </SideMenu.Avatar>
73
+ </SideMenu.Footer>
74
+ </SideMenu>
73
75
  </div>
74
76
  ```
75
77
 
@@ -78,16 +80,11 @@ SideMenu с меню второго уровня в отдельной коло
78
80
  ```jsx harmony
79
81
  import { getKonturAvatarUrl } from '@skbkontur/react-ui-addons';
80
82
  import { Buhgalteria, Kontur } from '@skbkontur/logos';
81
- import { MenuItem, Button, Modal, Input, ThemeContext, ThemeFactory} from '@skbkontur/react-ui';
83
+ import { MenuItem, Modal, Input } from '@skbkontur/react-ui';
82
84
  import { SideMenu } from './index';
83
85
  import {
84
- CheckIcon24Regular,
85
- InfoSquareIcon24Regular,
86
- DoubleCheckIcon24Regular,
87
- QuestionSquareIcon24Regular,
88
- DivideCircleIcon24Regular,
89
- PlusSquareIcon24Regular,
90
- WarningTriangleIcon24Regular
86
+ StackHDownIcon24Regular,
87
+ SettingsGearIcon24Regular,
91
88
  } from '@skbkontur/icons';
92
89
 
93
90
  const [opened, setOpened] = React.useState(false);
@@ -113,74 +110,73 @@ const renderModal = () => {
113
110
  );
114
111
  }
115
112
 
116
- const myTheme = ThemeFactory.create({ addonsSideMenuHeaderPosition: 'sticky', addonsSideMenuBodyMarginTop: '0px' });
117
-
118
- <div style={{height: '600px', width: '100%', background: '#E5E5E5'}}>
119
- <ThemeContext.Provider value={myTheme} >
120
- <SideMenu isSeparatedMenu={true}>
121
- <SideMenu.Header konturLogo={<Kontur/>} productLogo={<Buhgalteria/>}/>
122
- <SideMenu.Body>
123
- <SideMenu.Item caption={'Документы'} marker={'новое'}>
124
- <SideMenu.SubItemButtons>
125
- <Button use="primary">Создать</Button>
126
- <Button>Загрузить</Button>
127
- </SideMenu.SubItemButtons>
128
- <SideMenu.SubItem caption={'Входящие'} marker={'5'}>
129
- <SideMenu.SubItem caption={'Входящие бла-бла-бла'}>
130
- <SideMenu.SubItem caption={'Входящие11'}>
131
- <SideMenu.SubItem caption={'Входящие111'}/>
132
- <SideMenu.SubItem caption={'Входящие112'}/>
133
- <SideMenu.SubItem caption={'Входящие113'}/>
134
- </SideMenu.SubItem>
135
- <SideMenu.SubItem caption={'Входящие12'}/>
136
- <SideMenu.SubItem caption={'Входящие13'}/>
113
+ <div style={{height: '600px', width: '100%'}}>
114
+ <SideMenu isSeparatedMenu={true}>
115
+ <SideMenu.Header konturLogo={<Kontur/>} productLogo={<Buhgalteria/>}/>
116
+ <SideMenu.Body>
117
+ <SideMenu.Item caption={'Документы'} marker={'новое'}>
118
+ <SideMenu.SubItem caption={'Входящие'} marker={'5'}>
119
+ <SideMenu.SubItem caption={'Входящие бла-бла-бла'}>
120
+ <SideMenu.SubItem caption={'Входящие11'}>
121
+ <SideMenu.SubItem caption={'Входящие111'}/>
122
+ <SideMenu.SubItem caption={'Входящие112'}/>
123
+ <SideMenu.SubItem caption={'Входящие113'}/>
137
124
  </SideMenu.SubItem>
138
- <SideMenu.SubItem caption={'Входящие2'}>
139
- <SideMenu.SubItem caption={'Входящие21'}>
140
- <SideMenu.SubItem caption={'Входящие211'}/>
141
- <SideMenu.SubItem caption={'Входящие212'}/>
142
- <SideMenu.SubItem caption={'Входящие213'}/>
143
- </SideMenu.SubItem>
144
- <SideMenu.SubItem caption={'Входящие22'}/>
145
- <SideMenu.SubItem caption={'Входящие23'}/>
125
+ <SideMenu.SubItem caption={'Входящие12'}/>
126
+ <SideMenu.SubItem caption={'Входящие13'}/>
127
+ </SideMenu.SubItem>
128
+ <SideMenu.SubItem caption={'Входящие2'}>
129
+ <SideMenu.SubItem caption={'Входящие21'}>
130
+ <SideMenu.SubItem caption={'Входящие211'}/>
131
+ <SideMenu.SubItem caption={'Входящие212'}/>
132
+ <SideMenu.SubItem caption={'Входящие213'}/>
146
133
  </SideMenu.SubItem>
147
- <SideMenu.SubItem caption={'Входящие3'}/>
134
+ <SideMenu.SubItem caption={'Входящие22'}/>
135
+ <SideMenu.SubItem caption={'Входящие23'}/>
148
136
  </SideMenu.SubItem>
149
- <SideMenu.SubItem caption={'Исходящие'}/>
150
- <SideMenu.SubItem caption={'Внутренние'}/>
151
- <SideMenu.SubItem caption={'Черновики'}/>
152
- <SideMenu.SubItem caption={'Удаленные'}/>
153
- <SideMenu.SubItemHeader>Согласованные</SideMenu.SubItemHeader>
154
- <SideMenu.SubItem caption={'Требуют обработки'}/>
155
- <SideMenu.SubItem caption={'Обработанные'}/>
156
- </SideMenu.Item>
157
- <SideMenu.Item caption={'Контрагенты'}/>
158
- <SideMenu.Item caption={'Сообщения'} marker={'5'}>
159
- <SideMenu.SubItem caption={'Входящие'} marker={'5'}/>
160
- <SideMenu.SubItem caption={'Исходящие'}/>
161
- <SideMenu.SubItem caption={'Внутренние'}/>
162
- <SideMenu.SubItem caption={'Черновики'}/>
163
- <SideMenu.SubItem caption={'Удаленные'}/>
164
- </SideMenu.Item>
165
- <SideMenu.Item caption={'Справочная'}/>
137
+ <SideMenu.SubItem caption={'Входящие3'}/>
138
+ </SideMenu.SubItem>
139
+ <SideMenu.SubItem caption={'Исходящие'}/>
140
+ <SideMenu.SubItem caption={'Внутренние'}/>
141
+ <SideMenu.SubItem caption={'Черновики'}/>
142
+ <SideMenu.SubItem caption={'Удаленные'}/>
143
+ <SideMenu.SubItemHeader>Согласованные</SideMenu.SubItemHeader>
144
+ <SideMenu.SubItem caption={'Требуют обработки'}/>
145
+ <SideMenu.SubItem caption={'Обработанные'}/>
146
+ </SideMenu.Item>
147
+ <SideMenu.Item caption={'Контрагенты'}/>
148
+ <SideMenu.Item caption={'Сообщения'} marker={'5'}>
149
+ <SideMenu.SubItem caption={'Входящие'} marker={'5'}/>
150
+ <SideMenu.SubItem caption={'Исходящие'}/>
151
+ <SideMenu.SubItem caption={'Внутренние'}/>
152
+ <SideMenu.SubItem caption={'Черновики'}/>
153
+ <SideMenu.SubItem caption={'Удаленные'}/>
154
+ </SideMenu.Item>
155
+ <SideMenu.Item caption={'Справочная'}/>
156
+ <SideMenu.Divider />
157
+ <SideMenu.Item caption={'Еще раздел'}/>
158
+ <SideMenu.Item caption={'Отчетность'}/>
159
+ </SideMenu.Body>
160
+ <SideMenu.Footer>
161
+ <div>
162
+ {opened && renderModal()}
163
+ <SideMenu.Item icon={<StackHDownIcon24Regular/>} caption={'СКБ Контур'} onClick={open}/>
164
+ </div>
165
+ <SideMenu.Item icon={<SettingsGearIcon24Regular/>} caption={'Реквизиты и настройки'}/>
166
+ <SideMenu.Avatar
167
+ userName={'Ишматова Елена'}
168
+ avatarUrl={getKonturAvatarUrl({
169
+ userId: '992408aa-050e-41e9-9a48-6bf2f2f20d94'
170
+ })}
171
+ >
172
+ <MenuItem href={'https://cabinet.kontur.ru'} target="_blank">
173
+ Личный кабинет
174
+ </MenuItem>
175
+ <MenuItem >Безопасность</MenuItem>
166
176
  <SideMenu.Divider />
167
- <SideMenu.Item caption={'Еще раздел'}/>
168
- <SideMenu.Item caption={'Отчетность'}/>
169
- </SideMenu.Body>
170
- <SideMenu.Footer>
171
- <div>
172
- {opened && renderModal()}
173
- <SideMenu.Item icon={<PlusSquareIcon24Regular/>} caption={'СКБ Контур'} _onClick={open}/>
174
- </div>
175
- <SideMenu.Item icon={<WarningTriangleIcon24Regular/>} caption={'Реквизиты и настройки'}/>
176
- <SideMenu.Avatar
177
- userName={'Ишматова Елена'}
178
- avatarUrl={getKonturAvatarUrl({
179
- userId: '992408aa-050e-41e9-9a48-6bf2f2f20d94'
180
- })}
181
- />
182
- </SideMenu.Footer>
183
- </SideMenu>
184
- </ThemeContext.Provider>
177
+ <MenuItem >Выйти</MenuItem>
178
+ </SideMenu.Avatar>
179
+ </SideMenu.Footer>
180
+ </SideMenu>
185
181
  </div>
186
182
  ```
package/index.d.ts CHANGED
@@ -8,4 +8,4 @@ export * from './src/SideMenuAvatar';
8
8
  export * from './src/SideMenuSubItem';
9
9
  export * from './src/SideMenuDivider';
10
10
  export * from './src/SideMenuSubItemHeader';
11
- export * from './src/SideMenuSubItemButtons';
11
+ export * from './src/SideMenuDropdown';
package/index.js CHANGED
@@ -8,4 +8,4 @@ export * from './src/SideMenuAvatar';
8
8
  export * from './src/SideMenuSubItem';
9
9
  export * from './src/SideMenuDivider';
10
10
  export * from './src/SideMenuSubItemHeader';
11
- export * from './src/SideMenuSubItemButtons';
11
+ export * from './src/SideMenuDropdown';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skbkontur/side-menu",
3
- "version": "0.2.0",
3
+ "version": "0.2.2",
4
4
  "publishConfig": {
5
5
  "access": "public",
6
6
  "registry": "https://registry.npmjs.org/"
@@ -23,7 +23,7 @@
23
23
  "@skbkontur/react-ui": "4.0.0"
24
24
  },
25
25
  "dependencies": {
26
- "@skbkontur/react-icons": "^5.2.3",
26
+ "@skbkontur/icons": "0.6.2",
27
27
  "tslib": "^1"
28
28
  }
29
29
  }
package/src/InnerSubMenu.d.ts ADDED
@@ -0,0 +1,9 @@
1
+ import React from 'react';
2
+ interface InnerSubMenuProps {
3
+ children?: React.ReactNode;
4
+ id: string;
5
+ }
6
+ declare const InnerSubMenuWithStaticFields: React.ForwardRefExoticComponent<InnerSubMenuProps & React.RefAttributes<HTMLDivElement>> & {
7
+ __KONTUR_REACT_UI__: string;
8
+ };
9
+ export { InnerSubMenuWithStaticFields as InnerSubMenu };
package/src/InnerSubMenu.js ADDED
@@ -0,0 +1,18 @@
1
+ import React, { forwardRef } from 'react';
2
+ /**
3
+ * Подменю, раскрывающееся внутри основного меню
4
+ *
5
+ * @visibleName InnerSubMenu
6
+ */
7
+ var InnerSubMenu = forwardRef(function (_a, ref) {
8
+ var children = _a.children, id = _a.id;
9
+ return (React.createElement(React.Fragment, null, React.Children.map(children, function (child) {
10
+ if (React.isValidElement(child)) {
11
+ return React.cloneElement(child, { parent: id, ref: ref });
12
+ }
13
+ return child;
14
+ })));
15
+ });
16
+ InnerSubMenu.displayName = 'InnerSubMenu';
17
+ var InnerSubMenuWithStaticFields = Object.assign(InnerSubMenu, { __KONTUR_REACT_UI__: 'InnerSubMenu' });
18
+ export { InnerSubMenuWithStaticFields as InnerSubMenu };
package/src/RightBorder.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ import React from 'react';
2
+ interface RightBorderProps {
3
+ setIsMinimised: (value: boolean) => void;
4
+ }
5
+ declare const RightBorderWithStaticFields: React.ForwardRefExoticComponent<RightBorderProps & React.RefAttributes<HTMLDivElement>> & {
6
+ __KONTUR_REACT_UI__: string;
7
+ };
8
+ export { RightBorderWithStaticFields as RightBorder };
package/src/RightBorder.js ADDED
@@ -0,0 +1,71 @@
1
+ import React, { forwardRef, useContext, useEffect, useRef, useState } from 'react';
2
+ import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
3
+ import { customStyles, jsStyles } from './SideMenu.styles';
4
+ import { SideMenuContext } from './SideMenuContext';
5
+ /**
6
+ * Элемент интерактивной правой границы
7
+ *
8
+ * @visibleName RightBorder
9
+ */
10
+ var RightBorder = forwardRef(function (_a, ref) {
11
+ var _b;
12
+ var setIsMinimised = _a.setIsMinimised;
13
+ var context = useContext(SideMenuContext);
14
+ var resizeTimer = null;
15
+ var _c = useState(false), isAbleToResize = _c[0], setIsAbleToResize = _c[1];
16
+ var rightBorderRef = useRef(null);
17
+ var handleMouseEnter = function () {
18
+ resizeTimer = setTimeout(function () {
19
+ setIsAbleToResize(true);
20
+ }, 500);
21
+ };
22
+ var handleMouseLeave = function () {
23
+ if (resizeTimer) {
24
+ clearTimeout(resizeTimer);
25
+ }
26
+ setIsAbleToResize(false);
27
+ };
28
+ var isMouseDown = false, startX = 0;
29
+ var checkStart = function (event) {
30
+ startX = event.pageX;
31
+ isMouseDown = true;
32
+ };
33
+ var checkMove = function (event) {
34
+ if (!isMouseDown) {
35
+ return;
36
+ }
37
+ if (event.pageX < startX && isAbleToResize) {
38
+ setIsMinimised(true);
39
+ }
40
+ return;
41
+ };
42
+ var checkEnd = function () {
43
+ isMouseDown = false;
44
+ };
45
+ var swipe = function (rightBorder) {
46
+ if (rightBorder) {
47
+ rightBorder.addEventListener('mousedown', checkStart);
48
+ rightBorder.addEventListener('mousemove', checkMove);
49
+ document.addEventListener('mouseup', checkEnd);
50
+ }
51
+ };
52
+ useEffect(function () {
53
+ if (rightBorderRef.current) {
54
+ swipe(rightBorderRef.current);
55
+ }
56
+ return function () {
57
+ if (rightBorderRef.current) {
58
+ rightBorderRef.current.removeEventListener('mousedown', checkStart, true);
59
+ rightBorderRef.current.removeEventListener('mousemove', checkMove, true);
60
+ }
61
+ document.removeEventListener('mouseup', checkEnd, true);
62
+ };
63
+ });
64
+ return (React.createElement("div", { className: cx((_b = {},
65
+ _b[jsStyles.rightBorder()] = true,
66
+ _b[jsStyles.resizableRightBorder()] = isAbleToResize,
67
+ _b)), ref: rightBorderRef || ref, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave }, isAbleToResize && React.createElement("div", { className: customStyles.rightBorderHovered(context.productColor) })));
68
+ });
69
+ RightBorder.displayName = 'RightBorder';
70
+ var RightBorderWithStaticFields = Object.assign(RightBorder, { __KONTUR_REACT_UI__: 'RightBorder' });
71
+ export { RightBorderWithStaticFields as RightBorder };
package/src/SeparatedSubMenu.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ import React from 'react';
2
+ interface SeparatedSubMenuProps {
3
+ children?: React.ReactNode;
4
+ }
5
+ declare const SeparatedSubMenuWithStaticFields: React.ForwardRefExoticComponent<SeparatedSubMenuProps & React.RefAttributes<HTMLDivElement>> & {
6
+ __KONTUR_REACT_UI__: string;
7
+ };
8
+ export { SeparatedSubMenuWithStaticFields as SeparatedSubMenu };
package/src/SeparatedSubMenu.js ADDED
@@ -0,0 +1,42 @@
1
+ import { __assign } from "tslib";
2
+ import React, { forwardRef, useContext } from 'react';
3
+ import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
4
+ import { jsStyles } from './SideMenu.styles';
5
+ import { SideMenuContext } from './SideMenuContext';
6
+ /**
7
+ * Отдельностоящее подменю
8
+ *
9
+ * @visibleName SeparatedSubMenu
10
+ */
11
+ var SeparatedSubMenu = forwardRef(function (_a, ref) {
12
+ var _b;
13
+ var children = _a.children;
14
+ var context = useContext(SideMenuContext);
15
+ var isSubItemWithChildren = function (child) {
16
+ // @ts-expect-error: accessing private property
17
+ return (child === null || child === void 0 ? void 0 : child.type.__KONTUR_REACT_UI__) === 'SideMenuSubItem' && child.props.children;
18
+ };
19
+ var hasSubItems = function (children) {
20
+ return React.Children.toArray(children).some(function (child) {
21
+ if (React.isValidElement(child)) {
22
+ return isSubItemWithChildren(child);
23
+ }
24
+ return child;
25
+ });
26
+ };
27
+ return (React.createElement("div", { className: cx((_b = {}, _b[jsStyles.root()] = true, _b[jsStyles.separatedMenu()] = true, _b)), ref: ref },
28
+ React.createElement(SideMenuContext.Provider, { value: __assign({ hasSubIcons: hasSubItems(children) }, context) }, React.Children.map(children, function (child) {
29
+ if (React.isValidElement(child)) {
30
+ // @ts-expect-error: accessing private property
31
+ if ((child === null || child === void 0 ? void 0 : child.type.__KONTUR_REACT_UI__) === 'SideMenuSubItemHeader' && !hasSubItems(children)) {
32
+ return React.cloneElement(child, {
33
+ className: jsStyles.subItemHeaderWithoutIcons(),
34
+ });
35
+ }
36
+ return child;
37
+ }
38
+ }))));
39
+ });
40
+ SeparatedSubMenu.displayName = 'SeparatedSubMenu';
41
+ var SeparatedSubMenuWithStaticFields = Object.assign(SeparatedSubMenu, { __KONTUR_REACT_UI__: 'SeparatedSubMenu' });
42
+ export { SeparatedSubMenuWithStaticFields as SeparatedSubMenu };
package/src/SideMenu.d.ts CHANGED
@@ -1,60 +1,33 @@
1
1
  import React from 'react';
2
- import { Nullable } from '@skbkontur/react-ui-addons/typings/utility-types';
2
+ import { CommonProps } from '@skbkontur/react-ui/internal/CommonWrapper';
3
3
  import { SideMenuOrganisations } from './SideMenuOrganisations';
4
+ import { SideMenuBody } from './SideMenuBody';
5
+ import { SideMenuFooter } from './SideMenuFooter';
4
6
  import { SideMenuHeader } from './SideMenuHeader';
5
7
  import { SideMenuItem } from './SideMenuItem';
6
8
  import { SideMenuAvatar } from './SideMenuAvatar';
7
9
  import { SideMenuSubItem } from './SideMenuSubItem';
8
10
  import { SideMenuDivider } from './SideMenuDivider';
9
11
  import { SideMenuSubItemHeader } from './SideMenuSubItemHeader';
10
- import { SideMenuSubItemButtons } from './SideMenuSubItemButtons';
11
- import { SideMenuDropdownMenuSeparator } from './SideMenuDropdownMenuSeparator';
12
- declare type SideMenuInterface = {
12
+ export interface SideMenuProps extends CommonProps {
13
13
  children?: React.ReactNode;
14
- };
15
- declare type DefaultProps = {
16
- size: 'small' | 'large';
17
- isSeparatedMenu: boolean;
18
- };
19
- export declare type SideMenuProps = SideMenuInterface & Partial<DefaultProps>;
20
- declare type SideMenuComponentProps = SideMenuInterface & DefaultProps;
21
- declare type SideMenuState = {
22
- isMinimised: boolean;
23
- isAbleToResize: boolean;
24
- activeItem: Nullable<React.ReactNode>;
25
- activeSubItem: Nullable<React.ReactNode>;
26
- hasScrollBar: boolean;
27
- isTransitioned: boolean;
28
- };
29
- export declare class SideMenu extends React.Component<SideMenuComponentProps, SideMenuState> {
30
- static __KONTUR_REACT_UI__: string;
31
- private scrollTimer;
32
- private transitionTimer;
33
- static defaultProps: DefaultProps;
34
- constructor(props: SideMenuComponentProps);
35
- componentDidMount(): void;
36
- componentWillUnmount(): void;
37
- static Body: React.FC<import("./SideMenuBody").SideMenuBodyProps>;
38
- static Footer: React.FC<import("./SideMenuFooter").SideMenuFooterProps>;
39
- static Header: typeof SideMenuHeader;
40
- static Item: typeof SideMenuItem;
41
- static SubItem: typeof SideMenuSubItem;
42
- static SubItemHeader: typeof SideMenuSubItemHeader;
43
- static Avatar: typeof SideMenuAvatar;
44
- static Organisations: typeof SideMenuOrganisations;
45
- static Divider: typeof SideMenuDivider;
46
- static SubItemButtons: typeof SideMenuSubItemButtons;
47
- static DropdownMenuSeparator: typeof SideMenuDropdownMenuSeparator;
48
- private resizeTimer;
49
- private readonly rightBorderRef;
50
- render(): JSX.Element;
51
- private renderMain;
52
- private setActiveItem;
53
- private setActiveSubItem;
54
- private handleMouseEnter;
55
- private handleMouseLeave;
56
- private showMinimisedRoot;
57
- private handleScroll;
58
- private swipe;
14
+ size?: 'small' | 'large';
15
+ isSeparatedMenu?: boolean;
59
16
  }
60
- export {};
17
+ interface SubComponents {
18
+ Body: typeof SideMenuBody;
19
+ Footer: typeof SideMenuFooter;
20
+ Header: typeof SideMenuHeader;
21
+ Item: typeof SideMenuItem;
22
+ SubItem: typeof SideMenuSubItem;
23
+ SubItemHeader: typeof SideMenuSubItemHeader;
24
+ Avatar: typeof SideMenuAvatar;
25
+ Organisations: typeof SideMenuOrganisations;
26
+ Divider: typeof SideMenuDivider;
27
+ __KONTUR_REACT_UI__: string;
28
+ }
29
+ export declare const SideMenuDataTids: {
30
+ root: string;
31
+ };
32
+ declare const SideMenuWithStaticFields: React.ForwardRefExoticComponent<SideMenuProps & React.RefAttributes<HTMLElement>> & SubComponents;
33
+ export { SideMenuWithStaticFields as SideMenu };