@synerise/ds-layout 1.0.11 → 1.0.13
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 +364 -1277
- package/README.md +28 -29
- package/dist/Layout.d.ts +1 -1
- package/dist/Layout.js +2 -2
- package/dist/Layout.styles.js +2 -2
- package/dist/Layout.types.d.ts +1 -1
- package/dist/Page/Page.d.ts +1 -1
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -32,38 +32,37 @@ import Layout from '@synerise/ds-layout'
|
|
|
32
32
|
|
|
33
33
|
## API
|
|
34
34
|
|
|
35
|
-
| Property | Description
|
|
36
|
-
|
|
37
|
-
| header | Set top header content page
|
|
38
|
-
| subheader | Set subheader content page
|
|
39
|
-
| left | Configuration of left sidebar
|
|
40
|
-
| right | Configuration of right sidebar
|
|
41
|
-
| children | The layout elements passed to the parent
|
|
42
|
-
| className | Layout's className
|
|
43
|
-
| styles | Custom layout styles
|
|
44
|
-
| leftOpened | Whether left sidebar is opened
|
|
45
|
-
| rightOpened | Whether right sidebar is opened
|
|
46
|
-
| leftOpenedWidth | Width of opened left sidebar
|
|
47
|
-
| rightOpenedWidth | Width of opened right sidebar
|
|
48
|
-
| renderLeftSidebarControls | Left sidebar visibility. Accepts function returning `ReactNode`.
|
|
49
|
-
| renderRightSidebarControls | Right sidebar visibility. Accepts function returning `ReactNode`.
|
|
50
|
-
| leftSidebarWithDnd | Set withDnd in left sidebar scrollbar
|
|
51
|
-
| mainSidebarWithDnd | Set withDnd in main sidebar scrollbar
|
|
52
|
-
| rightSidebarWithDnd | Set withDnd in right sidebar scrollbar
|
|
53
|
-
| nativeScroll | Set main column to use native browser scroll
|
|
54
|
-
| nativeScrollRef | ref to pass to scrollable element
|
|
55
|
-
| fillViewport | sets layout to absolute with calc(100vh - viewportTopOffset) height | boolean
|
|
56
|
-
| viewportTopOffset | top viewport offset (if fillViewport is true)
|
|
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
|
+
| leftSidebarWithDnd | Set withDnd in left sidebar scrollbar | boolean | false |
|
|
51
|
+
| mainSidebarWithDnd | Set withDnd in main sidebar scrollbar | boolean | false |
|
|
52
|
+
| rightSidebarWithDnd | Set withDnd in right sidebar scrollbar | boolean | false |
|
|
53
|
+
| nativeScroll | Set main column to use native browser scroll | boolean | false |
|
|
54
|
+
| nativeScrollRef | ref to pass to scrollable element | Ref<HTMLDivElement> | - |
|
|
55
|
+
| fillViewport | sets layout to absolute with calc(100vh - viewportTopOffset) height | boolean | false |
|
|
56
|
+
| viewportTopOffset | top viewport offset (if fillViewport is true) | number | 55 |
|
|
57
57
|
|
|
58
58
|
### SidebarProps
|
|
59
59
|
|
|
60
|
-
| Property
|
|
61
|
-
|
|
|
62
|
-
| opened
|
|
63
|
-
| onChange
|
|
64
|
-
| content
|
|
65
|
-
| width
|
|
66
|
-
|
|
60
|
+
| Property | Description | Type | Default |
|
|
61
|
+
| -------- | -------------------------------------------------- | --------------------------- | ------- |
|
|
62
|
+
| opened | Wheter sidebar is opened | boolean | false |
|
|
63
|
+
| onChange | Callback fired when user clicks the sidebar button | (isOpened: boolean) => void | - |
|
|
64
|
+
| content | Content of sidebar | React.ReactNode | - |
|
|
65
|
+
| width | Width of opened sidebar | number | 320 |
|
|
67
66
|
|
|
68
67
|
### LayoutStyles
|
|
69
68
|
|
package/dist/Layout.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import * as T from './Layout.types';
|
|
2
|
+
import type * as T from './Layout.types';
|
|
3
3
|
declare const Layout: ({ header, left, right, children, className, styles, subheader, fullPage, nativeScroll, nativeScrollRef, fillViewport, viewportTopOffset, sidebarAnimationDisabled, renderLeftSidebarControls, renderRightSidebarControls, leftSidebarWithDnd, rightSidebarWithDnd, mainSidebarWithDnd, }: T.LayoutProps) => React.JSX.Element;
|
|
4
4
|
export default Layout;
|
package/dist/Layout.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React, { useMemo } from 'react';
|
|
2
|
-
import Scrollbar from '@synerise/ds-scrollbar';
|
|
3
|
-
import { AngleLeftS, AngleRightS, CloseS } from '@synerise/ds-icon';
|
|
4
2
|
import { theme } from '@synerise/ds-core';
|
|
3
|
+
import { AngleLeftS, AngleRightS, CloseS } from '@synerise/ds-icon';
|
|
4
|
+
import Scrollbar from '@synerise/ds-scrollbar';
|
|
5
5
|
import * as S from './Layout.styles';
|
|
6
6
|
var DEFAULT_SIDEBAR_WIDTH = 320;
|
|
7
7
|
var Layout = function Layout(_ref) {
|
package/dist/Layout.styles.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22;
|
|
2
2
|
function _taggedTemplateLiteralLoose(e, t) { return t || (t = e.slice(0)), e.raw = t, e; }
|
|
3
3
|
import styled, { css } from 'styled-components';
|
|
4
|
-
import { hexToRgba } from '@synerise/ds-utils';
|
|
5
4
|
import { mediaQuery } from '@synerise/ds-core';
|
|
6
5
|
import Icon from '@synerise/ds-icon';
|
|
6
|
+
import { hexToRgba } from '@synerise/ds-utils';
|
|
7
7
|
var DEFAULT_TOP_OFFSET = 55;
|
|
8
8
|
export var ArrowIcon = styled(Icon).withConfig({
|
|
9
9
|
displayName: "Layoutstyles__ArrowIcon",
|
|
@@ -49,7 +49,7 @@ export var LayoutContainer = styled.div.withConfig({
|
|
|
49
49
|
displayName: "Layoutstyles__LayoutContainer",
|
|
50
50
|
componentId: "sc-i053aj-8"
|
|
51
51
|
})(["height:100%;display:flex;flex-direction:column;overflow:hidden;", ";", "{", ";}", "{overflow:", ";", ";}"], function (props) {
|
|
52
|
-
return props.fillViewport && css(["position:absolute;width:100%;height:calc(100vh - ", "px);"], props.viewportTopOffset !== undefined ? props.viewportTopOffset : DEFAULT_TOP_OFFSET);
|
|
52
|
+
return props.fillViewport && css(["position:absolute;width:100%;height:calc( 100vh - ", "px );"], props.viewportTopOffset !== undefined ? props.viewportTopOffset : DEFAULT_TOP_OFFSET);
|
|
53
53
|
}, LayoutMain, function (props) {
|
|
54
54
|
return props.nativeScroll && css(["display:flex;flex-direction:column;overflow:hidden;"]);
|
|
55
55
|
}, LayoutMainInner, function (props) {
|
package/dist/Layout.types.d.ts
CHANGED
package/dist/Page/Page.d.ts
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@synerise/ds-layout",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.13",
|
|
4
4
|
"description": "Layout UI Component for the Synerise Design System",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"repository": "synerise/synerise-design",
|
|
@@ -34,14 +34,14 @@
|
|
|
34
34
|
],
|
|
35
35
|
"types": "dist/index.d.ts",
|
|
36
36
|
"dependencies": {
|
|
37
|
-
"@synerise/ds-icon": "^1.5.
|
|
38
|
-
"@synerise/ds-scrollbar": "^1.1.
|
|
39
|
-
"@synerise/ds-utils": "^1.3.
|
|
37
|
+
"@synerise/ds-icon": "^1.5.4",
|
|
38
|
+
"@synerise/ds-scrollbar": "^1.1.2",
|
|
39
|
+
"@synerise/ds-utils": "^1.3.1"
|
|
40
40
|
},
|
|
41
41
|
"peerDependencies": {
|
|
42
42
|
"@synerise/ds-core": "*",
|
|
43
43
|
"react": ">=16.9.0 <= 18.3.1",
|
|
44
44
|
"styled-components": "^5.3.3"
|
|
45
45
|
},
|
|
46
|
-
"gitHead": "
|
|
46
|
+
"gitHead": "4512641033ba3581a3df208143c547fcfed45895"
|
|
47
47
|
}
|