@synerise/ds-layout 0.8.4 → 0.10.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.
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.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
+
8
+ **Note:** Version bump only for package @synerise/ds-layout
9
+
10
+
11
+
12
+
13
+
14
+ ## [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)
15
+
16
+ **Note:** Version bump only for package @synerise/ds-layout
17
+
18
+
19
+
20
+
21
+
22
+ # [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)
23
+
24
+ **Note:** Version bump only for package @synerise/ds-layout
25
+
26
+
27
+
28
+
29
+
30
+ # [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)
31
+
32
+
33
+ ### Features
34
+
35
+ * **layout:** adds custom width of sidebars ([cfd7a37](https://github.com/synerise/synerise-design/commit/cfd7a37e870d09e3a470f5bb113c58fd6fe413f8))
36
+
37
+
38
+
39
+
40
+
6
41
  ## [0.8.4](https://github.com/synerise/synerise-design/compare/@synerise/ds-layout@0.8.3...@synerise/ds-layout@0.8.4) (2021-12-29)
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,15 +32,29 @@ 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 | |
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
+
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
+
46
58
 
47
59
  ### LayoutStyles
48
60
 
package/dist/Layout.js CHANGED
@@ -3,6 +3,7 @@ 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
5
  import * as S from './Layout.styles';
6
+ var DEFAULT_SIDEBAR_WIDTH = 320;
6
7
 
7
8
  var Layout = function Layout(_ref) {
8
9
  var header = _ref.header,
@@ -12,40 +13,40 @@ var Layout = function Layout(_ref) {
12
13
  className = _ref.className,
13
14
  styles = _ref.styles,
14
15
  subheader = _ref.subheader,
15
- leftOpened = _ref.leftOpened,
16
- rightOpened = _ref.rightOpened,
17
16
  _ref$fullPage = _ref.fullPage,
18
- fullPage = _ref$fullPage === void 0 ? false : _ref$fullPage;
19
-
20
- var _React$useState = React.useState(Boolean(leftOpened)),
21
- leftSidebarOpened = _React$useState[0],
22
- setLeftSidebarOpened = _React$useState[1];
23
-
24
- var _React$useState2 = React.useState(Boolean(rightOpened)),
25
- rightSidebarOpened = _React$useState2[0],
26
- setRightSidebarOpened = _React$useState2[1];
27
-
17
+ fullPage = _ref$fullPage === void 0 ? false : _ref$fullPage,
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]);
28
25
  return /*#__PURE__*/React.createElement(S.LayoutContainer, {
29
26
  className: "ds-layout " + (className || '')
30
27
  }, header ? /*#__PURE__*/React.createElement(S.LayoutHeader, {
31
28
  className: "ds-layout__header"
32
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, {
33
- opened: leftSidebarOpened
30
+ opened: !!(left != null && left.opened),
31
+ openedWidth: leftSidebarWidth,
32
+ animationDisabled: !!sidebarAnimationDisabled
34
33
  }, /*#__PURE__*/React.createElement(S.LayoutSidebar, {
35
34
  className: "ds-layout__sidebar",
36
35
  style: styles && styles.left,
37
- opened: leftSidebarOpened
36
+ opened: !!left.opened,
37
+ openedWidth: leftSidebarWidth,
38
+ animationDisabled: !!sidebarAnimationDisabled
38
39
  }, /*#__PURE__*/React.createElement(Scrollbar, {
39
40
  absolute: true
40
41
  }, /*#__PURE__*/React.createElement(S.LayoutSidebarInner, {
41
42
  style: styles && styles.leftInner
42
- }, left))), /*#__PURE__*/React.createElement(S.SidebarButton, {
43
+ }, left == null ? void 0 : left.content))), /*#__PURE__*/React.createElement(S.SidebarButton, {
43
44
  withSubheader: Boolean(subheader),
44
45
  onClick: function onClick() {
45
- return setLeftSidebarOpened(!leftSidebarOpened);
46
+ return left == null ? void 0 : left.onChange(!(left != null && left.opened));
46
47
  },
47
- opened: leftSidebarOpened,
48
- bothOpened: leftSidebarOpened && rightSidebarOpened
48
+ opened: !!(left != null && left.opened),
49
+ bothOpened: (left == null ? void 0 : left.opened) && (right == null ? void 0 : right.opened)
49
50
  }, /*#__PURE__*/React.createElement(S.ArrowIcon, {
50
51
  component: /*#__PURE__*/React.createElement(AngleRightS, null),
51
52
  color: theme.palette.white
@@ -55,31 +56,39 @@ var Layout = function Layout(_ref) {
55
56
  }))) : null), /*#__PURE__*/React.createElement(S.LayoutMain, {
56
57
  className: "ds-layout__main",
57
58
  "data-popup-container": true,
58
- 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
59
64
  }, /*#__PURE__*/React.createElement(S.LayoutSubheader, null, subheader), /*#__PURE__*/React.createElement(Scrollbar, {
60
65
  absolute: true
61
66
  }, /*#__PURE__*/React.createElement(S.LayoutMainInner, {
62
67
  fullPage: fullPage,
63
68
  style: styles && styles.mainInner
64
69
  }, children))), /*#__PURE__*/React.createElement(React.Fragment, null, right ? /*#__PURE__*/React.createElement(S.LayoutSidebarWrapper, {
65
- opened: rightSidebarOpened,
66
- right: true
70
+ opened: !!(right != null && right.opened),
71
+ right: true,
72
+ openedWidth: rightSidebarWidth,
73
+ animationDisabled: !!sidebarAnimationDisabled
67
74
  }, /*#__PURE__*/React.createElement(S.LayoutSidebar, {
68
75
  className: "ds-layout__sidebar ds-layout__sidebar--right",
69
76
  style: styles && styles.right,
70
- opened: rightSidebarOpened
77
+ opened: !!(right != null && right.opened),
78
+ openedWidth: rightSidebarWidth,
79
+ animationDisabled: !!sidebarAnimationDisabled
71
80
  }, /*#__PURE__*/React.createElement(Scrollbar, {
72
81
  absolute: true
73
82
  }, /*#__PURE__*/React.createElement(S.LayoutSidebarInner, {
74
83
  style: styles && styles.rightInner
75
- }, right))), /*#__PURE__*/React.createElement(S.SidebarButton, {
84
+ }, right == null ? void 0 : right.content))), /*#__PURE__*/React.createElement(S.SidebarButton, {
76
85
  withSubheader: Boolean(subheader),
77
86
  onClick: function onClick() {
78
- return setRightSidebarOpened(!rightSidebarOpened);
87
+ return right == null ? void 0 : right.onChange(!(right != null && right.opened));
79
88
  },
80
89
  right: true,
81
- opened: rightSidebarOpened,
82
- bothOpened: leftSidebarOpened && rightSidebarOpened
90
+ opened: !!(right != null && right.opened),
91
+ bothOpened: (left == null ? void 0 : left.opened) && (right == null ? void 0 : right.opened)
83
92
  }, /*#__PURE__*/React.createElement(S.ArrowIcon, {
84
93
  component: /*#__PURE__*/React.createElement(AngleLeftS, null),
85
94
  color: theme.palette.white
@@ -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>;
@@ -19,11 +24,15 @@ declare type SidebarButtonProps = {
19
24
  export declare const SidebarButton: import("styled-components").StyledComponent<"button", any, SidebarButtonProps, never>;
20
25
  declare type LayoutSidebarProps = {
21
26
  opened: boolean;
27
+ openedWidth: number;
28
+ animationDisabled: boolean;
22
29
  };
23
30
  export declare const LayoutSidebar: import("styled-components").StyledComponent<"div", any, LayoutSidebarProps, never>;
24
31
  declare type LayoutSidebarWrapperProps = {
25
32
  opened: boolean;
26
33
  right?: boolean;
34
+ openedWidth: number;
35
+ animationDisabled: boolean;
27
36
  };
28
37
  export declare const LayoutSidebarWrapper: import("styled-components").StyledComponent<"div", any, LayoutSidebarWrapperProps, never>;
29
38
  export declare const LayoutSidebarInner: import("styled-components").StyledComponent<"div", any, {}, never>;
@@ -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,16 +73,32 @@ 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:320px;max-width:100%;", ";", ";", " ", ";", "}"], mediaQuery.to.medium(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["flex: 0 0 auto;"]))), mediaQuery.from.medium(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["flex: 0 1 320px; width: 320px;"]))), mediaQuery.from.medium(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["max-width: ", ";"])), function (props) {
77
- return props.opened ? '320px' : '0px';
78
- }), mediaQuery.from.medium(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n &.slide-enter {\n max-width: 0;\n }\n &.slide-enter.slide-enter-active {\n max-width: 320px;\n }\n &.slide-leave {\n max-width: 320px;\n }\n &.slide-leave.slide-leave-active {\n max-width: 0;\n }\n "]))), mediaQuery.to.medium(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n left: 0;\n width: 320px\n "]))));
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) {
79
+ return props.openedWidth + "px";
80
+ }, mediaQuery.to.medium(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["flex: 0 0 auto;"]))), mediaQuery.from.medium(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["flex: 0 1 ", "; width: ", ""])), function (props) {
81
+ return props.openedWidth + "px";
82
+ }, function (props) {
83
+ return props.openedWidth + "px;";
84
+ }), mediaQuery.from.medium(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["max-width: ", ";"])), function (props) {
85
+ return props.opened ? props.openedWidth + "px" : '0px';
86
+ }), mediaQuery.from.medium(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n &.slide-enter {\n max-width: 0;\n }\n &.slide-enter.slide-enter-active {\n max-width: ", ";\n }\n &.slide-leave {\n max-width: ", ";\n }\n &.slide-leave.slide-leave-active {\n max-width: 0;\n }\n "])), function (props) {
87
+ return props.openedWidth + "px";
88
+ }, function (props) {
89
+ return props.openedWidth + "px";
90
+ }), mediaQuery.to.medium(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n left: 0;\n width: ", ";\n "])), function (props) {
91
+ return props.openedWidth + "px";
92
+ }));
79
93
  export var LayoutSidebarWrapper = styled.div.withConfig({
80
94
  displayName: "Layoutstyles__LayoutSidebarWrapper",
81
95
  componentId: "i053aj-11"
82
- })(["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) {
83
97
  return props.right ? 'auto' : '0';
84
98
  }, function (props) {
85
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;"]);
86
102
  }, SidebarButton, function (props) {
87
103
  return props.theme.palette['grey-600'];
88
104
  }, function (props) {
@@ -93,8 +109,10 @@ export var LayoutSidebarWrapper = styled.div.withConfig({
93
109
  return props.right && props.opened && 'left: -44px';
94
110
  }), mediaQuery.to.medium(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["", ""])), function (props) {
95
111
  return !props.right && props.opened && 'right: -44px';
96
- }), mediaQuery.to.medium(_templateObject22 || (_templateObject22 = _taggedTemplateLiteralLoose(["position: absolute;"]))), mediaQuery.to.medium(_templateObject23 || (_templateObject23 = _taggedTemplateLiteralLoose(["width: 320px;"]))), mediaQuery.to.medium(_templateObject24 || (_templateObject24 = _taggedTemplateLiteralLoose(["transform: ", ""])), function (props) {
97
- return props.right ? 'translateX(320px)' : 'translateX(-320px)';
112
+ }), mediaQuery.to.medium(_templateObject22 || (_templateObject22 = _taggedTemplateLiteralLoose(["position: absolute;"]))), mediaQuery.to.medium(_templateObject23 || (_templateObject23 = _taggedTemplateLiteralLoose(["width: ", ";"])), function (props) {
113
+ return props.openedWidth + "px";
114
+ }), mediaQuery.to.medium(_templateObject24 || (_templateObject24 = _taggedTemplateLiteralLoose(["transform: ", ""])), function (props) {
115
+ return props.right ? "translateX(" + props.openedWidth + "px)" : "translateX(-" + props.openedWidth + "px)";
98
116
  }), function (props) {
99
117
  return props.opened && css(["&&{margin:", ";transform:translateX(0);}"], props.right ? '0 0 0 1px' : '0 1px 0 0');
100
118
  });
@@ -7,15 +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;
25
+ sidebarAnimationDisabled?: boolean;
21
26
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-layout",
3
- "version": "0.8.4",
3
+ "version": "0.10.2",
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",
37
- "@synerise/ds-utils": "^0.19.0"
35
+ "@synerise/ds-icon": "^0.47.1",
36
+ "@synerise/ds-scrollbar": "^0.4.4",
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": "7ddae11318ca2906145c9f48e74df41ca5f15d49"
43
+ "gitHead": "27ef26e44f1814e7fc97b46668078e9a78e8f217"
44
44
  }