@synerise/ds-layout 0.8.4 → 0.9.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 +11 -0
  2. package/README.md +14 -9
  3. package/dist/Layout.js +25 -5
  4. package/dist/Layout.styles.d.ts +2 -0
  5. package/dist/Layout.styles.js +19 -5
  6. package/dist/Layout.types.d.ts +2 -0
  7. package/package.json +3 -3
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.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
+
8
+
9
+ ### Features
10
+
11
+ * **layout:** adds custom width of sidebars ([cfd7a37](https://github.com/synerise/synerise-design/commit/cfd7a37e870d09e3a470f5bb113c58fd6fe413f8))
12
+
13
+
14
+
15
+
16
+
6
17
  ## [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
18
 
8
19
 
package/README.md CHANGED
@@ -34,15 +34,20 @@ import Layout from '@synerise/ds-layout'
34
34
 
35
35
  ## API
36
36
 
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 | |
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 |
50
+
46
51
 
47
52
  ### LayoutStyles
48
53
 
package/dist/Layout.js CHANGED
@@ -2,6 +2,7 @@ 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';
5
6
  import * as S from './Layout.styles';
6
7
 
7
8
  var Layout = function Layout(_ref) {
@@ -15,7 +16,13 @@ var Layout = function Layout(_ref) {
15
16
  leftOpened = _ref.leftOpened,
16
17
  rightOpened = _ref.rightOpened,
17
18
  _ref$fullPage = _ref.fullPage,
18
- fullPage = _ref$fullPage === void 0 ? false : _ref$fullPage;
19
+ 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);
19
26
 
20
27
  var _React$useState = React.useState(Boolean(leftOpened)),
21
28
  leftSidebarOpened = _React$useState[0],
@@ -25,16 +32,27 @@ var Layout = function Layout(_ref) {
25
32
  rightSidebarOpened = _React$useState2[0],
26
33
  setRightSidebarOpened = _React$useState2[1];
27
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]);
28
44
  return /*#__PURE__*/React.createElement(S.LayoutContainer, {
29
45
  className: "ds-layout " + (className || '')
30
46
  }, header ? /*#__PURE__*/React.createElement(S.LayoutHeader, {
31
47
  className: "ds-layout__header"
32
48
  }, 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
49
+ opened: leftSidebarOpened,
50
+ openedWidth: leftOpenedWidth
34
51
  }, /*#__PURE__*/React.createElement(S.LayoutSidebar, {
35
52
  className: "ds-layout__sidebar",
36
53
  style: styles && styles.left,
37
- opened: leftSidebarOpened
54
+ opened: leftSidebarOpened,
55
+ openedWidth: leftOpenedWidth
38
56
  }, /*#__PURE__*/React.createElement(Scrollbar, {
39
57
  absolute: true
40
58
  }, /*#__PURE__*/React.createElement(S.LayoutSidebarInner, {
@@ -63,11 +81,13 @@ var Layout = function Layout(_ref) {
63
81
  style: styles && styles.mainInner
64
82
  }, children))), /*#__PURE__*/React.createElement(React.Fragment, null, right ? /*#__PURE__*/React.createElement(S.LayoutSidebarWrapper, {
65
83
  opened: rightSidebarOpened,
66
- right: true
84
+ right: true,
85
+ openedWidth: leftOpenedWidth
67
86
  }, /*#__PURE__*/React.createElement(S.LayoutSidebar, {
68
87
  className: "ds-layout__sidebar ds-layout__sidebar--right",
69
88
  style: styles && styles.right,
70
- opened: rightSidebarOpened
89
+ opened: rightSidebarOpened,
90
+ openedWidth: rightOpenedWidth
71
91
  }, /*#__PURE__*/React.createElement(Scrollbar, {
72
92
  absolute: true
73
93
  }, /*#__PURE__*/React.createElement(S.LayoutSidebarInner, {
package/dist/Layout.styles.d.ts CHANGED
@@ -19,11 +19,13 @@ declare type SidebarButtonProps = {
19
19
  export declare const SidebarButton: import("styled-components").StyledComponent<"button", any, SidebarButtonProps, never>;
20
20
  declare type LayoutSidebarProps = {
21
21
  opened: boolean;
22
+ openedWidth: number;
22
23
  };
23
24
  export declare const LayoutSidebar: import("styled-components").StyledComponent<"div", any, LayoutSidebarProps, never>;
24
25
  declare type LayoutSidebarWrapperProps = {
25
26
  opened: boolean;
26
27
  right?: boolean;
28
+ openedWidth: number;
27
29
  };
28
30
  export declare const LayoutSidebarWrapper: import("styled-components").StyledComponent<"div", any, LayoutSidebarWrapperProps, never>;
29
31
  export declare const LayoutSidebarInner: import("styled-components").StyledComponent<"div", any, {}, never>;
package/dist/Layout.styles.js CHANGED
@@ -73,9 +73,21 @@ 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);transition:all 0.3s ease-in-out;width:", ";max-width:100%;", ";", ";", ";", ";", "}"], function (props) {
77
+ return props.openedWidth + "px";
78
+ }, mediaQuery.to.medium(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["flex: 0 0 auto;"]))), mediaQuery.from.medium(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["flex: 0 1 ", "; width: ", ""])), function (props) {
79
+ return props.openedWidth + "px";
80
+ }, function (props) {
81
+ return props.openedWidth + "px;";
82
+ }), mediaQuery.from.medium(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["max-width: ", ";"])), function (props) {
83
+ return props.opened ? props.openedWidth + "px" : '0px';
84
+ }), 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) {
85
+ return props.openedWidth + "px";
86
+ }, function (props) {
87
+ return props.openedWidth + "px";
88
+ }), mediaQuery.to.medium(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n left: 0;\n width: ", ";\n "])), function (props) {
89
+ return props.openedWidth + "px";
90
+ }));
79
91
  export var LayoutSidebarWrapper = styled.div.withConfig({
80
92
  displayName: "Layoutstyles__LayoutSidebarWrapper",
81
93
  componentId: "i053aj-11"
@@ -93,8 +105,10 @@ export var LayoutSidebarWrapper = styled.div.withConfig({
93
105
  return props.right && props.opened && 'left: -44px';
94
106
  }), mediaQuery.to.medium(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["", ""])), function (props) {
95
107
  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)';
108
+ }), mediaQuery.to.medium(_templateObject22 || (_templateObject22 = _taggedTemplateLiteralLoose(["position: absolute;"]))), mediaQuery.to.medium(_templateObject23 || (_templateObject23 = _taggedTemplateLiteralLoose(["width: ", ";"])), function (props) {
109
+ return props.openedWidth + "px";
110
+ }), mediaQuery.to.medium(_templateObject24 || (_templateObject24 = _taggedTemplateLiteralLoose(["transform: ", ""])), function (props) {
111
+ return props.right ? "translateX(" + props.openedWidth + "px)" : "translateX(-" + props.openedWidth + "px)";
98
112
  }), function (props) {
99
113
  return props.opened && css(["&&{margin:", ";transform:translateX(0);}"], props.right ? '0 0 0 1px' : '0 1px 0 0');
100
114
  });
package/dist/Layout.types.d.ts CHANGED
@@ -18,4 +18,6 @@ export declare type LayoutProps = {
18
18
  leftOpened?: boolean;
19
19
  rightOpened?: boolean;
20
20
  fullPage?: boolean;
21
+ leftOpenedWidth?: number;
22
+ rightOpenedWidth?: number;
21
23
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-layout",
3
- "version": "0.8.4",
3
+ "version": "0.9.0",
4
4
  "description": "Layout UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "synerise/synerise-design",
@@ -34,11 +34,11 @@
34
34
  "dependencies": {
35
35
  "@synerise/ds-icon": "^0.46.2",
36
36
  "@synerise/ds-scrollbar": "^0.4.2",
37
- "@synerise/ds-utils": "^0.19.0"
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": "318a8d87f977c5d8f58c3cd06ccba4f243d7ee99"
44
44
  }