@skbkontur/side-menu 1.3.0 → 1.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/README.md +3 -6
  3. package/hooks/useActiveState.d.ts +1 -1
  4. package/hooks/useActiveState.js +3 -1
  5. package/package.json +1 -1
  6. package/src/SideMenuItem/SideMenuItem.md +56 -0
  7. package/src/internal/ClickableElement.d.ts +1 -0
  8. package/src/internal/ClickableElement.js +5 -2
  9. package/src/internal/ClickableElement.styles.d.ts +1 -0
  10. package/src/internal/ClickableElement.styles.js +8 -5
package/CHANGELOG.md CHANGED
@@ -3,6 +3,17 @@
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
+ # [1.4.0](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@1.3.0...@skbkontur/side-menu@1.4.0) (2023-08-24)
7
+
8
+
9
+ ### Features
10
+
11
+ * **SideMenuItem:** add isButton prop ([cad902f](https://git.skbkontur.ru/ui/ui-parking/commits/cad902fc5a62b513e8ec2a09421166b09c044293))
12
+
13
+
14
+
15
+
16
+
6
17
  # [1.3.0](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@1.2.1...@skbkontur/side-menu@1.3.0) (2023-08-22)
7
18
 
8
19
 
package/README.md CHANGED
@@ -96,7 +96,6 @@ import { SettingsGearIcon24Regular } from '@skbkontur/icons/icons/SettingsGearIc
96
96
  import { FaceAHappyIcon24Regular } from '@skbkontur/icons/icons/FaceAHappyIcon/FaceAHappyIcon24Regular';
97
97
 
98
98
  const [opened, setOpened] = React.useState(false);
99
- const [panel, setPanel] = React.useState(false);
100
99
 
101
100
  const open = () => {
102
101
  setOpened(true);
@@ -175,10 +174,7 @@ const renderModal = () => {
175
174
  <SideMenu.Item icon={<BookmarkIcon24Regular/>} caption={'Отчетность'}/>
176
175
  </SideMenu.Body>
177
176
  <SideMenu.Footer>
178
- <div>
179
- {opened && renderModal()}
180
- <SideMenu.Item icon={<StackHDownIcon24Regular/>} caption={'СКБ Контур'} onClick={open}/>
181
- </div>
177
+ <SideMenu.Item icon={<StackHDownIcon24Regular/>} caption={'СКБ Контур'} onClick={open} isButton={true}/>
182
178
  <SideMenu.Item icon={<SettingsGearIcon24Regular/>} caption={'Реквизиты и настройки'}/>
183
179
  <SideMenu.Avatar
184
180
  userName={'Ишматова Елена'}
@@ -198,6 +194,7 @@ const renderModal = () => {
198
194
  </ThemeContext.Provider>
199
195
  <div style={{ background: linearLightGradient, width: '100%', height: '100%' }}>
200
196
  {'Content '.repeat(100)}
197
+ {opened && renderModal()}
201
198
  </div>
202
199
  </div>
203
200
  ```
@@ -219,7 +216,7 @@ import { BookmarkIcon24Regular } from '@skbkontur/icons/icons/BookmarkIcon/Bookm
219
216
  import { StackHDownIcon24Regular } from '@skbkontur/icons/icons/StackHDownIcon/StackHDownIcon24Regular';
220
217
  import { SettingsGearIcon24Regular } from '@skbkontur/icons/icons/SettingsGearIcon/SettingsGearIcon24Regular';
221
218
  import { FaceAHappyIcon24Regular } from '@skbkontur/icons/icons/FaceAHappyIcon/FaceAHappyIcon24Regular';
222
- import { AttachLinkIcon } from '@skbkontur/icons/icons/AttachLinkIcon';
219
+ import { AttachLinkIcon24Regular } from '@skbkontur/icons/icons/AttachLinkIcon/AttachLinkIcon24Regular';
223
220
 
224
221
 
225
222
  const [activeItem, setActiveItem] = useState('122');
package/hooks/useActiveState.d.ts CHANGED
@@ -1 +1 @@
1
- export declare const useActiveState: (id?: string | undefined, href?: string | undefined, generatedId?: string | undefined, activeMenuItem?: string | null | undefined) => boolean;
1
+ export declare const useActiveState: (id?: string | undefined, href?: string | undefined, generatedId?: string | undefined, activeMenuItem?: string | null | undefined, isButton?: boolean | undefined) => boolean;
package/hooks/useActiveState.js CHANGED
@@ -1,8 +1,10 @@
1
1
  import { useEffect, useState } from 'react';
2
2
  import { isElementActive } from '../lib/utils/scripts';
3
- export var useActiveState = function (id, href, generatedId, activeMenuItem) {
3
+ export var useActiveState = function (id, href, generatedId, activeMenuItem, isButton) {
4
4
  var _a = useState(false), isActive = _a[0], setIsActive = _a[1];
5
5
  useEffect(function () {
6
+ if (isButton)
7
+ return;
6
8
  var isHrefActive = isElementActive(href, activeMenuItem);
7
9
  var isIdActive = isElementActive(id, activeMenuItem);
8
10
  var isGeneratedIdActive = isElementActive(generatedId, activeMenuItem);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skbkontur/side-menu",
3
- "version": "1.3.0",
3
+ "version": "1.4.0",
4
4
  "publishConfig": {
5
5
  "access": "public",
6
6
  "registry": "https://registry.npmjs.org/"
package/src/SideMenuItem/SideMenuItem.md CHANGED
@@ -1,3 +1,59 @@
1
+
2
+ Проп `isButton` позволяет использовать пункт меню как обычную кнопку. В таком случае пункт меню не участвует в навигации и не выделяется:
3
+
4
+ ```jsx harmony
5
+ import { Kontur, Buhgalteria } from '@skbkontur/logos';
6
+ import { SideMenu } from '../../index';
7
+ import { DocTextIcon24Regular } from '@skbkontur/icons/icons/DocTextIcon/DocTextIcon24Regular';
8
+ import { FaceAHappyIcon24Regular } from '@skbkontur/icons/icons/FaceAHappyIcon/FaceAHappyIcon24Regular';
9
+ import { StackHDownIcon24Regular } from '@skbkontur/icons/icons/StackHDownIcon/StackHDownIcon24Regular';
10
+ import { ThemeContext, ThemeFactory, Modal, Input } from '@skbkontur/react-ui';
11
+
12
+ const [opened, setOpened] = React.useState(false);
13
+
14
+ const open = () => {
15
+ setOpened(true);
16
+ };
17
+
18
+ const close = () => {
19
+ setOpened(false);
20
+ };
21
+
22
+ const renderModal = () => {
23
+ return (
24
+ <Modal onClose={close}>
25
+ <Modal.Header>Выбор организации</Modal.Header>
26
+ <Modal.Body>
27
+ <Input />
28
+ <div>Список организаций</div>
29
+ </Modal.Body>
30
+ </Modal>
31
+ );
32
+ };
33
+
34
+ <div style={{ height: '100%', display: 'flex' }}>
35
+ <ThemeContext.Provider value={ThemeFactory.create({ sideMenuProductColor: '#64b419' })}>
36
+ <SideMenu>
37
+ <SideMenu.Header konturLogo={<Kontur />} productLogo={<Buhgalteria />} withWidget={false} />
38
+ <SideMenu.Body>
39
+ <SideMenu.Item icon={<DocTextIcon24Regular />} caption={'Документы'} marker={'2'} />
40
+ <SideMenu.Item icon={<FaceAHappyIcon24Regular />} caption={'Контрагенты'} />
41
+ </SideMenu.Body>
42
+ <SideMenu.Footer>
43
+ <SideMenu.Item
44
+ icon={<StackHDownIcon24Regular />}
45
+ caption={'СКБ Контур'}
46
+ onClick={open}
47
+ isButton={true}
48
+ />
49
+ </SideMenu.Footer>
50
+ </SideMenu>
51
+ </ThemeContext.Provider>
52
+ {opened && renderModal()}
53
+ </div>
54
+
55
+
56
+ ```
1
57
  #### Переменные кастомизации (см. [ThemeContext](https://tech.skbkontur.ru/react-ui/#/Customization/ThemeContext))
2
58
 
3
59
  ```typescript
package/src/internal/ClickableElement.d.ts CHANGED
@@ -7,6 +7,7 @@ export interface CommonClickableElementProps extends CommonProps {
7
7
  caption?: string;
8
8
  subCaption?: ReactNode;
9
9
  id?: string;
10
+ isButton?: boolean;
10
11
  /** @ignore */
11
12
  _generatedId?: string;
12
13
  /** @ignore */
package/src/internal/ClickableElement.js CHANGED
@@ -17,10 +17,10 @@ import { ThemeContext } from '@skbkontur/react-ui';
17
17
  */
18
18
  var ClickableElement = forwardRef(function (_a, ref) {
19
19
  var _b;
20
- var onClick = _a.onClick, icon = _a.icon, marker = _a.marker, caption = _a.caption, subCaption = _a.subCaption, id = _a.id, _isSubMenu = _a._isSubMenu, children = _a.children, _isNestedSubMenu = _a._isNestedSubMenu, _generatedId = _a._generatedId, Tag = _a.element, onKeyDown = _a.onKeyDown, onFocus = _a.onFocus, onBlur = _a.onBlur, className = _a.className, _isDropdown = _a._isDropdown, _isBackButton = _a._isBackButton, _isAvatar = _a._isAvatar, rest = __rest(_a, ["onClick", "icon", "marker", "caption", "subCaption", "id", "_isSubMenu", "children", "_isNestedSubMenu", "_generatedId", "element", "onKeyDown", "onFocus", "onBlur", "className", "_isDropdown", "_isBackButton", "_isAvatar"]);
20
+ var onClick = _a.onClick, icon = _a.icon, marker = _a.marker, caption = _a.caption, subCaption = _a.subCaption, id = _a.id, _isSubMenu = _a._isSubMenu, children = _a.children, _isNestedSubMenu = _a._isNestedSubMenu, _generatedId = _a._generatedId, Tag = _a.element, onKeyDown = _a.onKeyDown, onFocus = _a.onFocus, onBlur = _a.onBlur, className = _a.className, _isDropdown = _a._isDropdown, _isBackButton = _a._isBackButton, _isAvatar = _a._isAvatar, isButton = _a.isButton, rest = __rest(_a, ["onClick", "icon", "marker", "caption", "subCaption", "id", "_isSubMenu", "children", "_isNestedSubMenu", "_generatedId", "element", "onKeyDown", "onFocus", "onBlur", "className", "_isDropdown", "_isBackButton", "_isAvatar", "isButton"]);
21
21
  var context = useContext(SideMenuContext);
22
22
  var theme = getSideMenuTheme(useContext(ThemeContext));
23
- var isActive = useActiveState(id, rest.href, _generatedId, context.activeMenuItem);
23
+ var isActive = useActiveState(id, rest.href, _generatedId, context.activeMenuItem, isButton);
24
24
  var _c = useState(false), isFocusedByTab = _c[0], setIsFocusedByTab = _c[1];
25
25
  var isOpened = useOpenedState(id || rest.href, _generatedId, context.openedParents, isActive, children, context.isSeparatedMenuShown, context.isMobile && context.isSeparatedMenu);
26
26
  var hasChildren = function (id, generatedId) {
@@ -31,6 +31,8 @@ var ClickableElement = forwardRef(function (_a, ref) {
31
31
  };
32
32
  var switchActiveItem = function () {
33
33
  var _a, _b, _c;
34
+ if (isButton)
35
+ return;
34
36
  if (id) {
35
37
  (_a = context.switchActiveMenuItem) === null || _a === void 0 ? void 0 : _a.call(context, id);
36
38
  }
@@ -100,6 +102,7 @@ var ClickableElement = forwardRef(function (_a, ref) {
100
102
  var Component = _isSubMenu || _isDropdown ? 'div' : 'li';
101
103
  var newProps = __assign({ className: cx((_b = {},
102
104
  _b[jsStyles.root(theme)] = true,
105
+ _b[jsStyles.rootButton(theme)] = isButton,
103
106
  _b[jsStyles.rootSubItemInSeparatedSubMenu(theme)] = context.isSeparatedMenu && _isSubMenu,
104
107
  _b[jsStyles.focusedRoot(theme)] = isFocusedByTab,
105
108
  _b[jsStyles.activeRoot(theme)] = isActive ||
package/src/internal/ClickableElement.styles.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import { SideMenuTheme } from '../../lib/theming/ThemeTypes';
2
2
  export declare const jsStyles: {
3
3
  root(t: SideMenuTheme): string;
4
+ rootButton(t: SideMenuTheme): string;
4
5
  rootSubItemInSeparatedSubMenu(t: SideMenuTheme): string;
5
6
  focusedRoot(t: SideMenuTheme): string;
6
7
  activeRoot(t: SideMenuTheme): string;
package/src/internal/ClickableElement.styles.js CHANGED
@@ -6,18 +6,21 @@ var styles = {
6
6
  root: function (t) {
7
7
  return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n user-select: text;\n ", ";\n width: 100%;\n border-radius: ", ";\n cursor: pointer;\n &:hover {\n background: ", ";\n }\n "], ["\n user-select: text;\n ", ";\n width: 100%;\n border-radius: ", ";\n cursor: pointer;\n &:hover {\n background: ", ";\n }\n "])), resetButton(), t.sideMenuItemBorderRadius, t.sideMenuItemHoverBg);
8
8
  },
9
+ rootButton: function (t) {
10
+ return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n &:active {\n background: ", ";\n }\n "], ["\n &:active {\n background: ", ";\n }\n "])), t.sideMenuItemActiveBg);
11
+ },
9
12
  rootSubItemInSeparatedSubMenu: function (t) {
10
- return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n &:hover {\n background: ", ";\n }\n "], ["\n &:hover {\n background: ", ";\n }\n "])), t.sideMenuSubItemWithSeparatedSubMenuHoverBg);
13
+ return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n &:hover {\n background: ", ";\n }\n "], ["\n &:hover {\n background: ", ";\n }\n "])), t.sideMenuSubItemWithSeparatedSubMenuHoverBg);
11
14
  },
12
15
  focusedRoot: function (t) {
13
- return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n box-shadow: ", ";\n "], ["\n box-shadow: ", ";\n "])), t.sideMenuFocusedItemBoxShadow);
16
+ return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n box-shadow: ", ";\n "], ["\n box-shadow: ", ";\n "])), t.sideMenuFocusedItemBoxShadow);
14
17
  },
15
18
  activeRoot: function (t) {
16
- return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background: ", " !important;\n "], ["\n background: ", " !important;\n "])), t.sideMenuItemActiveBg);
19
+ return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background: ", " !important;\n "], ["\n background: ", " !important;\n "])), t.sideMenuItemActiveBg);
17
20
  },
18
21
  activeRootSubItemInSeparatedSubMenu: function (t) {
19
- return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background: ", " !important;\n "], ["\n background: ", " !important;\n "])), t.sideMenuSubItemWithSeparatedSubMenuActiveBg);
22
+ return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n background: ", " !important;\n "], ["\n background: ", " !important;\n "])), t.sideMenuSubItemWithSeparatedSubMenuActiveBg);
20
23
  },
21
24
  };
22
25
  export var jsStyles = memoizeStyle(styles);
23
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
26
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;