@synerise/ds-layout 0.10.2 → 0.11.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 (5) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/README.md +15 -13
  3. package/dist/Layout.js +19 -9
  4. package/dist/Layout.types.d.ts +8 -0
  5. package/package.json +2 -2
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
+ # [0.11.0](https://github.com/synerise/synerise-design/compare/@synerise/ds-layout@0.10.2...@synerise/ds-layout@0.11.0) (2022-02-10)
7
+
8
+
9
+ ### Features
10
+
11
+ * **layout:** render left/right sidebar visibility controls ([cdc317e](https://github.com/synerise/synerise-design/commit/cdc317e75c948ba038f6edfe5945ba75ae797b0c))
12
+
13
+
14
+
15
+
16
+
6
17
  ## [0.10.2](https://github.com/synerise/synerise-design/compare/@synerise/ds-layout@0.10.1...@synerise/ds-layout@0.10.2) (2022-02-03)
7
18
 
8
19
  **Note:** Version bump only for package @synerise/ds-layout
package/README.md CHANGED
@@ -32,19 +32,21 @@ import Layout from '@synerise/ds-layout'
32
32
 
33
33
  ## API
34
34
 
35
- | Property | Description | Type | Default |
36
- | --------- | ---------------------------------------- | --------------- | ------- |
37
- | header | Set top header content page | React.ReactNode | |
38
- | subheader | Set subheader content page | React.ReactNode | |
39
- | left | Configuration of left sidebar | SidebarProps | |
40
- | right | Configuration of right sidebar | SidebarProps | |
41
- | children | The layout elements passed to the parent | React.ReactNode | |
42
- | className | Layout's className | string | |
43
- | styles | Custom layout styles | LayoutStyles | |
44
- | leftOpened | Whether left sidebar is opened | boolean | false |
45
- | rightOpened | Whether right sidebar is opened | boolean | false |
46
- | leftOpenedWidth | Width of opened left sidebar | number | 320 |
47
- | rightOpenedWidth | Width of opened right sidebar | number | 320 |
35
+ | Property | Description | Type | Default |
36
+ | --------- | ---------------------------------------- | --------------- | ------- |
37
+ | header | Set top header content page | React.ReactNode | |
38
+ | subheader | Set subheader content page | React.ReactNode | |
39
+ | left | Configuration of left sidebar | SidebarProps | |
40
+ | right | Configuration of right sidebar | SidebarProps | |
41
+ | children | The layout elements passed to the parent | React.ReactNode | |
42
+ | className | Layout's className | string | |
43
+ | styles | Custom layout styles | LayoutStyles | |
44
+ | leftOpened | Whether left sidebar is opened | boolean | false |
45
+ | rightOpened | Whether right sidebar is opened | boolean | false |
46
+ | leftOpenedWidth | Width of opened left sidebar | number | 320 |
47
+ | rightOpenedWidth | Width of opened right sidebar | number | 320 |
48
+ | renderLeftSidebarControls | Left sidebar visibility. Accepts function returning `ReactNode`. | boolean or function | false |
49
+ | renderRightSidebarControls| Right sidebar visibility. Accepts function returning `ReactNode`.| boolean or function | false |
48
50
 
49
51
  ### SidebarProps
50
52
 
package/dist/Layout.js CHANGED
@@ -15,32 +15,42 @@ var Layout = function Layout(_ref) {
15
15
  subheader = _ref.subheader,
16
16
  _ref$fullPage = _ref.fullPage,
17
17
  fullPage = _ref$fullPage === void 0 ? false : _ref$fullPage,
18
- sidebarAnimationDisabled = _ref.sidebarAnimationDisabled;
18
+ sidebarAnimationDisabled = _ref.sidebarAnimationDisabled,
19
+ _ref$renderLeftSideba = _ref.renderLeftSidebarControls,
20
+ renderLeftSidebarControls = _ref$renderLeftSideba === void 0 ? false : _ref$renderLeftSideba,
21
+ _ref$renderRightSideb = _ref.renderRightSidebarControls,
22
+ renderRightSidebarControls = _ref$renderRightSideb === void 0 ? false : _ref$renderRightSideb;
19
23
  var leftSidebarWidth = React.useMemo(function () {
20
24
  return (left == null ? void 0 : left.width) || DEFAULT_SIDEBAR_WIDTH;
21
25
  }, [left]);
22
26
  var rightSidebarWidth = React.useMemo(function () {
23
27
  return (right == null ? void 0 : right.width) || DEFAULT_SIDEBAR_WIDTH;
24
28
  }, [right]);
29
+ var showLeftSidebar = React.useMemo(function () {
30
+ return (left == null ? void 0 : left.opened) || !renderLeftSidebarControls;
31
+ }, [left, renderLeftSidebarControls]);
32
+ var showRightSidebar = React.useMemo(function () {
33
+ return (right == null ? void 0 : right.opened) || !renderRightSidebarControls;
34
+ }, [right, renderRightSidebarControls]);
25
35
  return /*#__PURE__*/React.createElement(S.LayoutContainer, {
26
36
  className: "ds-layout " + (className || '')
27
37
  }, header ? /*#__PURE__*/React.createElement(S.LayoutHeader, {
28
38
  className: "ds-layout__header"
29
39
  }, header) : null, /*#__PURE__*/React.createElement(S.LayoutContent, null, /*#__PURE__*/React.createElement(S.LayoutBody, null, /*#__PURE__*/React.createElement(React.Fragment, null, left ? /*#__PURE__*/React.createElement(S.LayoutSidebarWrapper, {
30
- opened: !!(left != null && left.opened),
40
+ opened: showLeftSidebar,
31
41
  openedWidth: leftSidebarWidth,
32
42
  animationDisabled: !!sidebarAnimationDisabled
33
43
  }, /*#__PURE__*/React.createElement(S.LayoutSidebar, {
34
44
  className: "ds-layout__sidebar",
35
45
  style: styles && styles.left,
36
- opened: !!left.opened,
46
+ opened: showLeftSidebar,
37
47
  openedWidth: leftSidebarWidth,
38
48
  animationDisabled: !!sidebarAnimationDisabled
39
49
  }, /*#__PURE__*/React.createElement(Scrollbar, {
40
50
  absolute: true
41
51
  }, /*#__PURE__*/React.createElement(S.LayoutSidebarInner, {
42
52
  style: styles && styles.leftInner
43
- }, left == null ? void 0 : left.content))), /*#__PURE__*/React.createElement(S.SidebarButton, {
53
+ }, left == null ? void 0 : left.content))), typeof renderLeftSidebarControls === 'function' && renderLeftSidebarControls() || renderLeftSidebarControls === true && /*#__PURE__*/React.createElement(S.SidebarButton, {
44
54
  withSubheader: Boolean(subheader),
45
55
  onClick: function onClick() {
46
56
  return left == null ? void 0 : left.onChange(!(left != null && left.opened));
@@ -57,8 +67,8 @@ var Layout = function Layout(_ref) {
57
67
  className: "ds-layout__main",
58
68
  "data-popup-container": true,
59
69
  style: styles && styles.main,
60
- leftOpened: !!(left != null && left.opened),
61
- rightOpened: !!(right != null && right.opened),
70
+ leftOpened: showLeftSidebar,
71
+ rightOpened: showRightSidebar,
62
72
  leftSidebarWidth: leftSidebarWidth,
63
73
  rightSidebarWidth: rightSidebarWidth
64
74
  }, /*#__PURE__*/React.createElement(S.LayoutSubheader, null, subheader), /*#__PURE__*/React.createElement(Scrollbar, {
@@ -67,21 +77,21 @@ var Layout = function Layout(_ref) {
67
77
  fullPage: fullPage,
68
78
  style: styles && styles.mainInner
69
79
  }, children))), /*#__PURE__*/React.createElement(React.Fragment, null, right ? /*#__PURE__*/React.createElement(S.LayoutSidebarWrapper, {
70
- opened: !!(right != null && right.opened),
80
+ opened: showRightSidebar,
71
81
  right: true,
72
82
  openedWidth: rightSidebarWidth,
73
83
  animationDisabled: !!sidebarAnimationDisabled
74
84
  }, /*#__PURE__*/React.createElement(S.LayoutSidebar, {
75
85
  className: "ds-layout__sidebar ds-layout__sidebar--right",
76
86
  style: styles && styles.right,
77
- opened: !!(right != null && right.opened),
87
+ opened: showRightSidebar,
78
88
  openedWidth: rightSidebarWidth,
79
89
  animationDisabled: !!sidebarAnimationDisabled
80
90
  }, /*#__PURE__*/React.createElement(Scrollbar, {
81
91
  absolute: true
82
92
  }, /*#__PURE__*/React.createElement(S.LayoutSidebarInner, {
83
93
  style: styles && styles.rightInner
84
- }, right == null ? void 0 : right.content))), /*#__PURE__*/React.createElement(S.SidebarButton, {
94
+ }, right == null ? void 0 : right.content))), typeof renderRightSidebarControls === 'function' && renderRightSidebarControls() || renderRightSidebarControls === true && /*#__PURE__*/React.createElement(S.SidebarButton, {
85
95
  withSubheader: Boolean(subheader),
86
96
  onClick: function onClick() {
87
97
  return right == null ? void 0 : right.onChange(!(right != null && right.opened));
package/dist/Layout.types.d.ts CHANGED
@@ -23,4 +23,12 @@ export declare type LayoutProps = {
23
23
  styles?: Style<React.CSSProperties>;
24
24
  fullPage?: boolean;
25
25
  sidebarAnimationDisabled?: boolean;
26
+ /**
27
+ * Left sidebar: render visibility of show/hide button. Accepts function returning `ReactNode` (see source code).
28
+ */
29
+ renderLeftSidebarControls?: boolean | (() => React.ReactNode);
30
+ /**
31
+ * Right sidebar: render visibility of show/hide button. Accepts function returning `ReactNode` (see source code).
32
+ */
33
+ renderRightSidebarControls?: boolean | (() => React.ReactNode);
26
34
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-layout",
3
- "version": "0.10.2",
3
+ "version": "0.11.0",
4
4
  "description": "Layout UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "synerise/synerise-design",
@@ -40,5 +40,5 @@
40
40
  "@synerise/ds-core": "*",
41
41
  "react": ">=16.9.0 < 17.0.0"
42
42
  },
43
- "gitHead": "27ef26e44f1814e7fc97b46668078e9a78e8f217"
43
+ "gitHead": "0601dd61c3fc55bdf557602e4c6ea8605c76476d"
44
44
  }