@synerise/ds-layout 0.9.0 → 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 (7) hide show
  1. package/CHANGELOG.md +35 -0
  2. package/README.md +26 -17
  3. package/dist/Layout.js +43 -44
  4. package/dist/Layout.styles.d.ts +8 -1
  5. package/dist/Layout.styles.js +8 -4
  6. package/dist/Layout.types.d.ts +17 -6
  7. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -3,6 +3,41 @@
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
+
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)
18
+
19
+ **Note:** Version bump only for package @synerise/ds-layout
20
+
21
+
22
+
23
+
24
+
25
+ ## [0.10.1](https://github.com/synerise/synerise-design/compare/@synerise/ds-layout@0.10.0...@synerise/ds-layout@0.10.1) (2022-01-17)
26
+
27
+ **Note:** Version bump only for package @synerise/ds-layout
28
+
29
+
30
+
31
+
32
+
33
+ # [0.10.0](https://github.com/synerise/synerise-design/compare/@synerise/ds-layout@0.9.0...@synerise/ds-layout@0.10.0) (2022-01-13)
34
+
35
+ **Note:** Version bump only for package @synerise/ds-layout
36
+
37
+
38
+
39
+
40
+
6
41
  # [0.9.0](https://github.com/synerise/synerise-design/compare/@synerise/ds-layout@0.8.4...@synerise/ds-layout@0.9.0) (2022-01-04)
7
42
 
8
43
 
package/README.md CHANGED
@@ -22,10 +22,8 @@ import Layout from '@synerise/ds-layout'
22
22
 
23
23
  <Layout
24
24
  header={<HeaderComponent />}
25
- left={<LeftSidebarComponent>}
26
- right={RightSidebarComponent}
27
- leftOpened=true
28
- rightOpened=true
25
+ left={{content: <LeftSidebarComponent />, opened: true, onChange: () => {}}}
26
+ right={{content: <RightSidebarComponent />, opened: false, onChange: () => {}}}
29
27
  className={layoutClass}
30
28
  >
31
29
  <Content />
@@ -34,19 +32,30 @@ import Layout from '@synerise/ds-layout'
34
32
 
35
33
  ## API
36
34
 
37
- | Property | Description | Type | Default |
38
- | --------- | ---------------------------------------- | --------------- | ------- |
39
- | header | Set top header content page | React.ReactNode | |
40
- | subheader | Set subheader content page | React.ReactNode | |
41
- | left | Set left content page | React.ReactNode | |
42
- | right | Set right content page | React.ReactNode | |
43
- | children | The layout elements passed to the parent | React.ReactNode | |
44
- | className | Layout's className | string | |
45
- | styles | Custom layout styles | LayoutStyles | |
46
- | leftOpened | Whether left sidebar is opened | boolean | false |
47
- | rightOpened | Whether right sidebar is opened | boolean | false |
48
- | leftOpenedWidth | Width of opened left sidebar | number | 320 |
49
- | 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 |
50
+
51
+ ### SidebarProps
52
+
53
+ | Property | Description | Type | Default |
54
+ | --------- | ---------------------------------------- | --------------- | ------- |
55
+ | opened | Wheter sidebar is opened | boolean | false |
56
+ | onChange | Callback fired when user clicks the sidebar button | (isOpened: boolean) => void | - |
57
+ | content | Content of sidebar | React.ReactNode | - |
58
+ | width | Width of opened sidebar | number | 320 |
50
59
 
51
60
 
52
61
  ### LayoutStyles
package/dist/Layout.js CHANGED
@@ -2,8 +2,8 @@ import * as React from 'react';
2
2
  import Scrollbar from '@synerise/ds-scrollbar';
3
3
  import { AngleLeftS, AngleRightS, CloseS } from '@synerise/ds-icon';
4
4
  import theme from '@synerise/ds-core/dist/js/DSProvider/ThemeProvider/theme';
5
- import { usePrevious } from '@synerise/ds-utils';
6
5
  import * as S from './Layout.styles';
6
+ var DEFAULT_SIDEBAR_WIDTH = 320;
7
7
 
8
8
  var Layout = function Layout(_ref) {
9
9
  var header = _ref.header,
@@ -13,57 +13,50 @@ var Layout = function Layout(_ref) {
13
13
  className = _ref.className,
14
14
  styles = _ref.styles,
15
15
  subheader = _ref.subheader,
16
- leftOpened = _ref.leftOpened,
17
- rightOpened = _ref.rightOpened,
18
16
  _ref$fullPage = _ref.fullPage,
19
17
  fullPage = _ref$fullPage === void 0 ? false : _ref$fullPage,
20
- _ref$leftOpenedWidth = _ref.leftOpenedWidth,
21
- leftOpenedWidth = _ref$leftOpenedWidth === void 0 ? 320 : _ref$leftOpenedWidth,
22
- _ref$rightOpenedWidth = _ref.rightOpenedWidth,
23
- rightOpenedWidth = _ref$rightOpenedWidth === void 0 ? 320 : _ref$rightOpenedWidth;
24
- var previousLeftOpened = usePrevious(leftOpened);
25
- var previousRightOpened = usePrevious(rightOpened);
26
-
27
- var _React$useState = React.useState(Boolean(leftOpened)),
28
- leftSidebarOpened = _React$useState[0],
29
- setLeftSidebarOpened = _React$useState[1];
30
-
31
- var _React$useState2 = React.useState(Boolean(rightOpened)),
32
- rightSidebarOpened = _React$useState2[0],
33
- setRightSidebarOpened = _React$useState2[1];
34
-
35
- React.useEffect(function () {
36
- if (leftOpened !== previousLeftOpened) {
37
- setLeftSidebarOpened(Boolean(leftOpened));
38
- }
39
-
40
- if (rightOpened !== previousRightOpened) {
41
- setRightSidebarOpened(Boolean(rightOpened));
42
- }
43
- }, [leftOpened, rightOpened, previousLeftOpened, previousRightOpened]);
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;
23
+ var leftSidebarWidth = React.useMemo(function () {
24
+ return (left == null ? void 0 : left.width) || DEFAULT_SIDEBAR_WIDTH;
25
+ }, [left]);
26
+ var rightSidebarWidth = React.useMemo(function () {
27
+ return (right == null ? void 0 : right.width) || DEFAULT_SIDEBAR_WIDTH;
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]);
44
35
  return /*#__PURE__*/React.createElement(S.LayoutContainer, {
45
36
  className: "ds-layout " + (className || '')
46
37
  }, header ? /*#__PURE__*/React.createElement(S.LayoutHeader, {
47
38
  className: "ds-layout__header"
48
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, {
49
- opened: leftSidebarOpened,
50
- openedWidth: leftOpenedWidth
40
+ opened: showLeftSidebar,
41
+ openedWidth: leftSidebarWidth,
42
+ animationDisabled: !!sidebarAnimationDisabled
51
43
  }, /*#__PURE__*/React.createElement(S.LayoutSidebar, {
52
44
  className: "ds-layout__sidebar",
53
45
  style: styles && styles.left,
54
- opened: leftSidebarOpened,
55
- openedWidth: leftOpenedWidth
46
+ opened: showLeftSidebar,
47
+ openedWidth: leftSidebarWidth,
48
+ animationDisabled: !!sidebarAnimationDisabled
56
49
  }, /*#__PURE__*/React.createElement(Scrollbar, {
57
50
  absolute: true
58
51
  }, /*#__PURE__*/React.createElement(S.LayoutSidebarInner, {
59
52
  style: styles && styles.leftInner
60
- }, left))), /*#__PURE__*/React.createElement(S.SidebarButton, {
53
+ }, left == null ? void 0 : left.content))), typeof renderLeftSidebarControls === 'function' && renderLeftSidebarControls() || renderLeftSidebarControls === true && /*#__PURE__*/React.createElement(S.SidebarButton, {
61
54
  withSubheader: Boolean(subheader),
62
55
  onClick: function onClick() {
63
- return setLeftSidebarOpened(!leftSidebarOpened);
56
+ return left == null ? void 0 : left.onChange(!(left != null && left.opened));
64
57
  },
65
- opened: leftSidebarOpened,
66
- bothOpened: leftSidebarOpened && rightSidebarOpened
58
+ opened: !!(left != null && left.opened),
59
+ bothOpened: (left == null ? void 0 : left.opened) && (right == null ? void 0 : right.opened)
67
60
  }, /*#__PURE__*/React.createElement(S.ArrowIcon, {
68
61
  component: /*#__PURE__*/React.createElement(AngleRightS, null),
69
62
  color: theme.palette.white
@@ -73,33 +66,39 @@ var Layout = function Layout(_ref) {
73
66
  }))) : null), /*#__PURE__*/React.createElement(S.LayoutMain, {
74
67
  className: "ds-layout__main",
75
68
  "data-popup-container": true,
76
- style: styles && styles.main
69
+ style: styles && styles.main,
70
+ leftOpened: showLeftSidebar,
71
+ rightOpened: showRightSidebar,
72
+ leftSidebarWidth: leftSidebarWidth,
73
+ rightSidebarWidth: rightSidebarWidth
77
74
  }, /*#__PURE__*/React.createElement(S.LayoutSubheader, null, subheader), /*#__PURE__*/React.createElement(Scrollbar, {
78
75
  absolute: true
79
76
  }, /*#__PURE__*/React.createElement(S.LayoutMainInner, {
80
77
  fullPage: fullPage,
81
78
  style: styles && styles.mainInner
82
79
  }, children))), /*#__PURE__*/React.createElement(React.Fragment, null, right ? /*#__PURE__*/React.createElement(S.LayoutSidebarWrapper, {
83
- opened: rightSidebarOpened,
80
+ opened: showRightSidebar,
84
81
  right: true,
85
- openedWidth: leftOpenedWidth
82
+ openedWidth: rightSidebarWidth,
83
+ animationDisabled: !!sidebarAnimationDisabled
86
84
  }, /*#__PURE__*/React.createElement(S.LayoutSidebar, {
87
85
  className: "ds-layout__sidebar ds-layout__sidebar--right",
88
86
  style: styles && styles.right,
89
- opened: rightSidebarOpened,
90
- openedWidth: rightOpenedWidth
87
+ opened: showRightSidebar,
88
+ openedWidth: rightSidebarWidth,
89
+ animationDisabled: !!sidebarAnimationDisabled
91
90
  }, /*#__PURE__*/React.createElement(Scrollbar, {
92
91
  absolute: true
93
92
  }, /*#__PURE__*/React.createElement(S.LayoutSidebarInner, {
94
93
  style: styles && styles.rightInner
95
- }, right))), /*#__PURE__*/React.createElement(S.SidebarButton, {
94
+ }, right == null ? void 0 : right.content))), typeof renderRightSidebarControls === 'function' && renderRightSidebarControls() || renderRightSidebarControls === true && /*#__PURE__*/React.createElement(S.SidebarButton, {
96
95
  withSubheader: Boolean(subheader),
97
96
  onClick: function onClick() {
98
- return setRightSidebarOpened(!rightSidebarOpened);
97
+ return right == null ? void 0 : right.onChange(!(right != null && right.opened));
99
98
  },
100
99
  right: true,
101
- opened: rightSidebarOpened,
102
- bothOpened: leftSidebarOpened && rightSidebarOpened
100
+ opened: !!(right != null && right.opened),
101
+ bothOpened: (left == null ? void 0 : left.opened) && (right == null ? void 0 : right.opened)
103
102
  }, /*#__PURE__*/React.createElement(S.ArrowIcon, {
104
103
  component: /*#__PURE__*/React.createElement(AngleLeftS, null),
105
104
  color: theme.palette.white
package/dist/Layout.styles.d.ts CHANGED
@@ -6,7 +6,12 @@ export declare const LayoutContent: import("styled-components").StyledComponent<
6
6
  export declare const LayoutHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
7
7
  export declare const LayoutSubheader: import("styled-components").StyledComponent<"div", any, {}, never>;
8
8
  export declare const LayoutBody: import("styled-components").StyledComponent<"div", any, {}, never>;
9
- export declare const LayoutMain: import("styled-components").StyledComponent<"div", any, {}, never>;
9
+ export declare const LayoutMain: import("styled-components").StyledComponent<"div", any, {
10
+ leftOpened: boolean;
11
+ rightOpened: boolean;
12
+ leftSidebarWidth: number;
13
+ rightSidebarWidth: number;
14
+ }, never>;
10
15
  export declare const LayoutMainInner: import("styled-components").StyledComponent<"div", any, {
11
16
  fullPage: boolean;
12
17
  }, never>;
@@ -20,12 +25,14 @@ export declare const SidebarButton: import("styled-components").StyledComponent<
20
25
  declare type LayoutSidebarProps = {
21
26
  opened: boolean;
22
27
  openedWidth: number;
28
+ animationDisabled: boolean;
23
29
  };
24
30
  export declare const LayoutSidebar: import("styled-components").StyledComponent<"div", any, LayoutSidebarProps, never>;
25
31
  declare type LayoutSidebarWrapperProps = {
26
32
  opened: boolean;
27
33
  right?: boolean;
28
34
  openedWidth: number;
35
+ animationDisabled: boolean;
29
36
  };
30
37
  export declare const LayoutSidebarWrapper: import("styled-components").StyledComponent<"div", any, LayoutSidebarWrapperProps, never>;
31
38
  export declare const LayoutSidebarInner: import("styled-components").StyledComponent<"div", any, {}, never>;
package/dist/Layout.styles.js CHANGED
@@ -41,7 +41,7 @@ export var LayoutBody = styled.div.withConfig({
41
41
  export var LayoutMain = styled.div.withConfig({
42
42
  displayName: "Layoutstyles__LayoutMain",
43
43
  componentId: "i053aj-7"
44
- })(["flex:1;position:relative;max-width:100%;", ";"], mediaQuery.to.small(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["min-width: 704px;"]))));
44
+ })(["position:relative;max-width:100%;width:100%;", ";"], mediaQuery.to.small(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["min-width: 704px;"]))));
45
45
  export var LayoutMainInner = styled.div.withConfig({
46
46
  displayName: "Layoutstyles__LayoutMainInner",
47
47
  componentId: "i053aj-8"
@@ -51,7 +51,7 @@ export var LayoutMainInner = styled.div.withConfig({
51
51
  export var SidebarButton = styled.button.withConfig({
52
52
  displayName: "Layoutstyles__SidebarButton",
53
53
  componentId: "i053aj-9"
54
- })(["width:36px;height:44px;background-color:", ";align-items:center;justify-content:center;position:absolute;cursor:pointer;border-radius:", ";right:", ";left:", ";top:", ";outline:0;border:0;display:flex;opacity:1;visibility:visible;transition:all 0.3s ease-in-out;z-index:1;", ";", "{transition:transform 0.3s ease-in-out;}", ";", ";", " ", ";"], function (props) {
54
+ })(["width:36px;height:44px;background-color:", ";align-items:center;justify-content:center;position:absolute;cursor:pointer;border-radius:", ";right:", ";left:", ";top:", ";outline:0;border:0;display:flex;opacity:1;visibility:visible;transition:all 0.3s ease;z-index:1;", ";", "{transition:transform 0.3s ease;}", ";", ";", " ", ";"], function (props) {
55
55
  return props.theme.palette['grey-500'];
56
56
  }, function (props) {
57
57
  return props.right ? '3px 0 0 3px' : '0 3px 3px 0';
@@ -73,7 +73,9 @@ export var SidebarButton = styled.button.withConfig({
73
73
  export var LayoutSidebar = styled.div.withConfig({
74
74
  displayName: "Layoutstyles__LayoutSidebar",
75
75
  componentId: "i053aj-10"
76
- })(["position:relative;z-index:10;overflow-y:auto;overflow-x:hidden;background-color:#fff;height:100%;box-shadow:0 4px 12px 0 rgba(35,41,54,0.04);transition:all 0.3s ease-in-out;width:", ";max-width:100%;", ";", ";", ";", ";", "}"], function (props) {
76
+ })(["", ";position:relative;z-index:10;overflow-y:auto;overflow-x:hidden;background-color:#fff;height:100%;box-shadow:0 4px 12px 0 rgba(35,41,54,0.04);width:", ";max-width:100%;", ";", ";", ";", ";", "}"], function (props) {
77
+ return !props.animationDisabled && css(["will-change:width;transform-style:preserve-3d;transition:max-width 0.3s ease;"]);
78
+ }, function (props) {
77
79
  return props.openedWidth + "px";
78
80
  }, mediaQuery.to.medium(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["flex: 0 0 auto;"]))), mediaQuery.from.medium(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["flex: 0 1 ", "; width: ", ""])), function (props) {
79
81
  return props.openedWidth + "px";
@@ -91,10 +93,12 @@ export var LayoutSidebar = styled.div.withConfig({
91
93
  export var LayoutSidebarWrapper = styled.div.withConfig({
92
94
  displayName: "Layoutstyles__LayoutSidebarWrapper",
93
95
  componentId: "i053aj-11"
94
- })(["position:relative;overflow:visible;height:100%;transition:transform .3s ease-in-out;left:", ";right:", ";z-index:10;&:hover{", "{background-color:", ";left:", ";right:", ";", ";", ";}}", ";", ";", ";", ";)"], function (props) {
96
+ })(["position:relative;overflow:visible;height:100%;left:", ";right:", ";z-index:10;", ";&:hover{", "{background-color:", ";left:", ";right:", ";", ";", ";}}", ";", ";", ";", ";)"], function (props) {
95
97
  return props.right ? 'auto' : '0';
96
98
  }, function (props) {
97
99
  return props.right ? '0' : 'auto';
100
+ }, function (props) {
101
+ return !props.animationDisabled && css(["will-change:width,transform;transform-style:preserve-3d;transition:width 0.3s ease,transform 0.3s ease;"]);
98
102
  }, SidebarButton, function (props) {
99
103
  return props.theme.palette['grey-600'];
100
104
  }, function (props) {
package/dist/Layout.types.d.ts CHANGED
@@ -7,17 +7,28 @@ export interface Style<T> {
7
7
  right?: T;
8
8
  rightInner?: T;
9
9
  }
10
+ export declare type SidebarProps = {
11
+ content: React.ReactNode;
12
+ opened: boolean;
13
+ onChange: (isOpened: boolean) => void;
14
+ width?: number;
15
+ };
10
16
  export declare type LayoutProps = {
11
17
  header?: React.ReactNode;
12
18
  subheader?: React.ReactNode;
13
- left?: React.ReactNode;
14
- right?: React.ReactNode;
19
+ left?: SidebarProps;
20
+ right?: SidebarProps;
15
21
  children: React.ReactNode;
16
22
  className?: string;
17
23
  styles?: Style<React.CSSProperties>;
18
- leftOpened?: boolean;
19
- rightOpened?: boolean;
20
24
  fullPage?: boolean;
21
- leftOpenedWidth?: number;
22
- rightOpenedWidth?: number;
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);
23
34
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-layout",
3
- "version": "0.9.0",
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",
@@ -32,13 +32,13 @@
32
32
  ],
33
33
  "types": "dist/index.d.ts",
34
34
  "dependencies": {
35
- "@synerise/ds-icon": "^0.46.2",
36
- "@synerise/ds-scrollbar": "^0.4.2",
35
+ "@synerise/ds-icon": "^0.47.1",
36
+ "@synerise/ds-scrollbar": "^0.4.4",
37
37
  "@synerise/ds-utils": "^0.21.5"
38
38
  },
39
39
  "peerDependencies": {
40
40
  "@synerise/ds-core": "*",
41
41
  "react": ">=16.9.0 < 17.0.0"
42
42
  },
43
- "gitHead": "318a8d87f977c5d8f58c3cd06ccba4f243d7ee99"
43
+ "gitHead": "0601dd61c3fc55bdf557602e4c6ea8605c76476d"
44
44
  }