@synerise/ds-layout 0.9.0 → 0.10.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 +8 -0
  2. package/README.md +13 -6
  3. package/dist/Layout.js +33 -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 +9 -6
  7. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -3,6 +3,14 @@
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.10.0](https://github.com/synerise/synerise-design/compare/@synerise/ds-layout@0.9.0...@synerise/ds-layout@0.10.0) (2022-01-13)
7
+
8
+ **Note:** Version bump only for package @synerise/ds-layout
9
+
10
+
11
+
12
+
13
+
6
14
  # [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
15
 
8
16
 
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 />
@@ -38,8 +36,8 @@ import Layout from '@synerise/ds-layout'
38
36
  | --------- | ---------------------------------------- | --------------- | ------- |
39
37
  | header | Set top header content page | React.ReactNode | |
40
38
  | subheader | Set subheader content page | React.ReactNode | |
41
- | left | Set left content page | React.ReactNode | |
42
- | right | Set right content page | React.ReactNode | |
39
+ | left | Configuration of left sidebar | SidebarProps | |
40
+ | right | Configuration of right sidebar | SidebarProps | |
43
41
  | children | The layout elements passed to the parent | React.ReactNode | |
44
42
  | className | Layout's className | string | |
45
43
  | styles | Custom layout styles | LayoutStyles | |
@@ -48,6 +46,15 @@ import Layout from '@synerise/ds-layout'
48
46
  | leftOpenedWidth | Width of opened left sidebar | number | 320 |
49
47
  | rightOpenedWidth | Width of opened right sidebar | number | 320 |
50
48
 
49
+ ### SidebarProps
50
+
51
+ | Property | Description | Type | Default |
52
+ | --------- | ---------------------------------------- | --------------- | ------- |
53
+ | opened | Wheter sidebar is opened | boolean | false |
54
+ | onChange | Callback fired when user clicks the sidebar button | (isOpened: boolean) => void | - |
55
+ | content | Content of sidebar | React.ReactNode | - |
56
+ | width | Width of opened sidebar | number | 320 |
57
+
51
58
 
52
59
  ### LayoutStyles
53
60
 
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,40 @@ 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
+ var leftSidebarWidth = React.useMemo(function () {
20
+ return (left == null ? void 0 : left.width) || DEFAULT_SIDEBAR_WIDTH;
21
+ }, [left]);
22
+ var rightSidebarWidth = React.useMemo(function () {
23
+ return (right == null ? void 0 : right.width) || DEFAULT_SIDEBAR_WIDTH;
24
+ }, [right]);
44
25
  return /*#__PURE__*/React.createElement(S.LayoutContainer, {
45
26
  className: "ds-layout " + (className || '')
46
27
  }, header ? /*#__PURE__*/React.createElement(S.LayoutHeader, {
47
28
  className: "ds-layout__header"
48
29
  }, 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
30
+ opened: !!(left != null && left.opened),
31
+ openedWidth: leftSidebarWidth,
32
+ animationDisabled: !!sidebarAnimationDisabled
51
33
  }, /*#__PURE__*/React.createElement(S.LayoutSidebar, {
52
34
  className: "ds-layout__sidebar",
53
35
  style: styles && styles.left,
54
- opened: leftSidebarOpened,
55
- openedWidth: leftOpenedWidth
36
+ opened: !!left.opened,
37
+ openedWidth: leftSidebarWidth,
38
+ animationDisabled: !!sidebarAnimationDisabled
56
39
  }, /*#__PURE__*/React.createElement(Scrollbar, {
57
40
  absolute: true
58
41
  }, /*#__PURE__*/React.createElement(S.LayoutSidebarInner, {
59
42
  style: styles && styles.leftInner
60
- }, left))), /*#__PURE__*/React.createElement(S.SidebarButton, {
43
+ }, left == null ? void 0 : left.content))), /*#__PURE__*/React.createElement(S.SidebarButton, {
61
44
  withSubheader: Boolean(subheader),
62
45
  onClick: function onClick() {
63
- return setLeftSidebarOpened(!leftSidebarOpened);
46
+ return left == null ? void 0 : left.onChange(!(left != null && left.opened));
64
47
  },
65
- opened: leftSidebarOpened,
66
- bothOpened: leftSidebarOpened && rightSidebarOpened
48
+ opened: !!(left != null && left.opened),
49
+ bothOpened: (left == null ? void 0 : left.opened) && (right == null ? void 0 : right.opened)
67
50
  }, /*#__PURE__*/React.createElement(S.ArrowIcon, {
68
51
  component: /*#__PURE__*/React.createElement(AngleRightS, null),
69
52
  color: theme.palette.white
@@ -73,33 +56,39 @@ var Layout = function Layout(_ref) {
73
56
  }))) : null), /*#__PURE__*/React.createElement(S.LayoutMain, {
74
57
  className: "ds-layout__main",
75
58
  "data-popup-container": true,
76
- style: styles && styles.main
59
+ style: styles && styles.main,
60
+ leftOpened: !!(left != null && left.opened),
61
+ rightOpened: !!(right != null && right.opened),
62
+ leftSidebarWidth: leftSidebarWidth,
63
+ rightSidebarWidth: rightSidebarWidth
77
64
  }, /*#__PURE__*/React.createElement(S.LayoutSubheader, null, subheader), /*#__PURE__*/React.createElement(Scrollbar, {
78
65
  absolute: true
79
66
  }, /*#__PURE__*/React.createElement(S.LayoutMainInner, {
80
67
  fullPage: fullPage,
81
68
  style: styles && styles.mainInner
82
69
  }, children))), /*#__PURE__*/React.createElement(React.Fragment, null, right ? /*#__PURE__*/React.createElement(S.LayoutSidebarWrapper, {
83
- opened: rightSidebarOpened,
70
+ opened: !!(right != null && right.opened),
84
71
  right: true,
85
- openedWidth: leftOpenedWidth
72
+ openedWidth: rightSidebarWidth,
73
+ animationDisabled: !!sidebarAnimationDisabled
86
74
  }, /*#__PURE__*/React.createElement(S.LayoutSidebar, {
87
75
  className: "ds-layout__sidebar ds-layout__sidebar--right",
88
76
  style: styles && styles.right,
89
- opened: rightSidebarOpened,
90
- openedWidth: rightOpenedWidth
77
+ opened: !!(right != null && right.opened),
78
+ openedWidth: rightSidebarWidth,
79
+ animationDisabled: !!sidebarAnimationDisabled
91
80
  }, /*#__PURE__*/React.createElement(Scrollbar, {
92
81
  absolute: true
93
82
  }, /*#__PURE__*/React.createElement(S.LayoutSidebarInner, {
94
83
  style: styles && styles.rightInner
95
- }, right))), /*#__PURE__*/React.createElement(S.SidebarButton, {
84
+ }, right == null ? void 0 : right.content))), /*#__PURE__*/React.createElement(S.SidebarButton, {
96
85
  withSubheader: Boolean(subheader),
97
86
  onClick: function onClick() {
98
- return setRightSidebarOpened(!rightSidebarOpened);
87
+ return right == null ? void 0 : right.onChange(!(right != null && right.opened));
99
88
  },
100
89
  right: true,
101
- opened: rightSidebarOpened,
102
- bothOpened: leftSidebarOpened && rightSidebarOpened
90
+ opened: !!(right != null && right.opened),
91
+ bothOpened: (left == null ? void 0 : left.opened) && (right == null ? void 0 : right.opened)
103
92
  }, /*#__PURE__*/React.createElement(S.ArrowIcon, {
104
93
  component: /*#__PURE__*/React.createElement(AngleLeftS, null),
105
94
  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,20 @@ 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;
23
26
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-layout",
3
- "version": "0.9.0",
3
+ "version": "0.10.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": "318a8d87f977c5d8f58c3cd06ccba4f243d7ee99"
43
+ "gitHead": "ea9de2181d1be9568be54761a8a0c7940d930a4f"
44
44
  }