@synerise/ds-sidebar-object 1.1.24 → 1.1.25
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 +4 -0
- package/dist/Elements/Content/Content.d.ts +2 -2
- package/dist/Elements/Content/Content.js +31 -27
- package/dist/Elements/Content/Content.style.d.ts +4 -4
- package/dist/Elements/Content/Content.style.js +15 -17
- package/dist/Elements/Content/Content.types.d.ts +3 -3
- package/dist/Elements/Content/Content.types.js +1 -1
- package/dist/Elements/Header/Header.d.ts +2 -2
- package/dist/Elements/Header/Header.js +100 -129
- package/dist/Elements/Header/Header.style.d.ts +9 -9
- package/dist/Elements/Header/Header.style.js +24 -22
- package/dist/Elements/Header/Header.types.d.ts +2 -2
- package/dist/Elements/Header/Header.types.js +14 -10
- package/dist/Elements/ObjectSummary/ObjectSummary.d.ts +2 -2
- package/dist/Elements/ObjectSummary/ObjectSummary.js +10 -13
- package/dist/Elements/ObjectSummary/ObjectSummary.style.d.ts +2 -2
- package/dist/Elements/ObjectSummary/ObjectSummary.style.js +9 -7
- package/dist/Elements/ObjectSummary/ObjectSummary.types.d.ts +1 -1
- package/dist/Elements/ObjectSummary/ObjectSummary.types.js +1 -1
- package/dist/Elements/Overview/Overview.d.ts +2 -2
- package/dist/Elements/Overview/Overview.js +59 -94
- package/dist/Elements/Overview/Overview.types.d.ts +4 -4
- package/dist/Elements/Overview/Overview.types.js +1 -1
- package/dist/SidebarObject.d.ts +2 -2
- package/dist/SidebarObject.js +58 -75
- package/dist/SidebarObject.style.d.ts +4 -4
- package/dist/SidebarObject.style.js +13 -11
- package/dist/SidebarObject.types.d.ts +4 -4
- package/dist/SidebarObject.types.js +1 -1
- package/dist/index.js +4 -1
- package/dist/modules.d.js +1 -1
- package/dist/modules.d.ts +0 -0
- package/package.json +17 -17
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,10 @@
|
|
|
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
|
+
## [1.1.25](https://github.com/Synerise/synerise-design/compare/@synerise/ds-sidebar-object@1.1.24...@synerise/ds-sidebar-object@1.1.25) (2026-03-24)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @synerise/ds-sidebar-object
|
|
9
|
+
|
|
6
10
|
## [1.1.24](https://github.com/Synerise/synerise-design/compare/@synerise/ds-sidebar-object@1.1.23...@synerise/ds-sidebar-object@1.1.24) (2026-03-20)
|
|
7
11
|
|
|
8
12
|
**Note:** Version bump only for package @synerise/ds-sidebar-object
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import {
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { ContentProps } from './Content.types';
|
|
3
3
|
declare const Content: ({ onFolderSelect, texts, mainContent, descriptionProps, tags, textDescription, onDescriptionChange, }: ContentProps) => React.JSX.Element;
|
|
4
4
|
export default Content;
|
|
@@ -1,28 +1,32 @@
|
|
|
1
|
-
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
1
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
+
import Drawer from "@synerise/ds-drawer";
|
|
3
|
+
import SubtleForm from "@synerise/ds-subtle-form";
|
|
4
|
+
import { ContentWrapper, TagsWrapper, InlineEditWrapper } from "./Content.style.js";
|
|
5
|
+
const Content = ({
|
|
6
|
+
onFolderSelect,
|
|
7
|
+
texts,
|
|
8
|
+
mainContent,
|
|
9
|
+
descriptionProps = {},
|
|
10
|
+
tags,
|
|
11
|
+
textDescription,
|
|
12
|
+
onDescriptionChange
|
|
13
|
+
}) => {
|
|
14
|
+
return /* @__PURE__ */ jsxs(Drawer.DrawerBody, { children: [
|
|
15
|
+
/* @__PURE__ */ jsx(ContentWrapper, { withFolder: !!onFolderSelect, children: mainContent }),
|
|
16
|
+
/* @__PURE__ */ jsx(TagsWrapper, { children: tags }),
|
|
17
|
+
!!onDescriptionChange && /* @__PURE__ */ jsx(InlineEditWrapper, { children: /* @__PURE__ */ jsx(
|
|
18
|
+
SubtleForm.TextArea,
|
|
19
|
+
{
|
|
20
|
+
minRows: 3,
|
|
21
|
+
onChange: onDescriptionChange,
|
|
22
|
+
value: textDescription,
|
|
23
|
+
placeholder: texts.placeholder,
|
|
24
|
+
suffixTooltip: texts.suffixTooltip,
|
|
25
|
+
...descriptionProps
|
|
26
|
+
}
|
|
27
|
+
) })
|
|
28
|
+
] });
|
|
29
|
+
};
|
|
30
|
+
export {
|
|
31
|
+
Content as default
|
|
27
32
|
};
|
|
28
|
-
export default Content;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
export declare const ContentWrapper: import(
|
|
1
|
+
export declare const ContentWrapper: import('styled-components').StyledComponent<"div", any, {
|
|
2
2
|
withFolder: boolean;
|
|
3
3
|
}, never>;
|
|
4
|
-
export declare const TagsWrapper: import(
|
|
5
|
-
export declare const InlineEditWrapper: import(
|
|
6
|
-
export declare const DrawerContent: import(
|
|
4
|
+
export declare const TagsWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
5
|
+
export declare const InlineEditWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
6
|
+
export declare const DrawerContent: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
@@ -1,25 +1,23 @@
|
|
|
1
|
-
import styled from
|
|
2
|
-
|
|
1
|
+
import styled from "styled-components";
|
|
2
|
+
const ContentWrapper = /* @__PURE__ */ styled.div.withConfig({
|
|
3
3
|
displayName: "Contentstyle__ContentWrapper",
|
|
4
4
|
componentId: "sc-16tawzf-0"
|
|
5
|
-
})(["padding:12px 140px 12px 0;margin-top:", ";"],
|
|
6
|
-
|
|
7
|
-
});
|
|
8
|
-
export var TagsWrapper = styled.div.withConfig({
|
|
5
|
+
})(["padding:12px 140px 12px 0;margin-top:", ";"], (props) => props.withFolder ? "0" : "-17px");
|
|
6
|
+
const TagsWrapper = /* @__PURE__ */ styled.div.withConfig({
|
|
9
7
|
displayName: "Contentstyle__TagsWrapper",
|
|
10
8
|
componentId: "sc-16tawzf-1"
|
|
11
|
-
})(["padding:22px 0 0;border-top:1px dashed ", ";"],
|
|
12
|
-
|
|
13
|
-
});
|
|
14
|
-
export var InlineEditWrapper = styled.div.withConfig({
|
|
9
|
+
})(["padding:22px 0 0;border-top:1px dashed ", ";"], (props) => props.theme.palette["grey-300"]);
|
|
10
|
+
const InlineEditWrapper = /* @__PURE__ */ styled.div.withConfig({
|
|
15
11
|
displayName: "Contentstyle__InlineEditWrapper",
|
|
16
12
|
componentId: "sc-16tawzf-2"
|
|
17
|
-
})(["border-top:1px dashed ", ";padding:12px 0;margin-left:1px;white-space:pre;.ds-inline-edit > div:nth-child(2){background-color:", ";}"],
|
|
18
|
-
|
|
19
|
-
}, function (props) {
|
|
20
|
-
return props.theme.palette.white;
|
|
21
|
-
});
|
|
22
|
-
export var DrawerContent = styled.div.withConfig({
|
|
13
|
+
})(["border-top:1px dashed ", ";padding:12px 0;margin-left:1px;white-space:pre;.ds-inline-edit > div:nth-child(2){background-color:", ";}"], (props) => props.theme.palette["grey-300"], (props) => props.theme.palette.white);
|
|
14
|
+
const DrawerContent = /* @__PURE__ */ styled.div.withConfig({
|
|
23
15
|
displayName: "Contentstyle__DrawerContent",
|
|
24
16
|
componentId: "sc-16tawzf-3"
|
|
25
|
-
})(["padding:0px;"]);
|
|
17
|
+
})(["padding:0px;"]);
|
|
18
|
+
export {
|
|
19
|
+
ContentWrapper,
|
|
20
|
+
DrawerContent,
|
|
21
|
+
InlineEditWrapper,
|
|
22
|
+
TagsWrapper
|
|
23
|
+
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
1
|
+
import { SubtleTextAreaProps } from '@synerise/ds-subtle-form/dist/Elements/TextArea/TextArea.types';
|
|
2
|
+
import { FolderItem } from '../../SidebarObject.types';
|
|
3
|
+
import { OverviewTexts } from '../Overview/Overview.types';
|
|
4
4
|
export type ContentProps = {
|
|
5
5
|
descriptionProps?: SubtleTextAreaProps;
|
|
6
6
|
mainContent: React.ReactNode;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import {
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { HeaderProps } from './Header.types';
|
|
3
3
|
declare const Header: ({ avatar, preffix, tabs, onMove, onDuplicate, onDelete, onEdit, onId, texts, onCloseClick, inputObject, inputObjectIdKey, inlineEditInputProps, onArrowUp, onArrowDown, name, onRename, additionalNode, type, typeButtons, onCancelClick, onApplyClick, }: HeaderProps) => React.JSX.Element;
|
|
4
4
|
export default Header;
|
|
@@ -1,169 +1,140 @@
|
|
|
1
|
-
|
|
2
|
-
import
|
|
3
|
-
import Button from
|
|
4
|
-
import Drawer from
|
|
5
|
-
import { DropdownMenu } from
|
|
6
|
-
import Icon, {
|
|
7
|
-
import Typography from
|
|
8
|
-
import
|
|
9
|
-
import {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
onCancelClick = _ref.onCancelClick,
|
|
36
|
-
onApplyClick = _ref.onApplyClick;
|
|
37
|
-
var renderBackTitle = function renderBackTitle(titleType) {
|
|
1
|
+
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { useMemo } from "react";
|
|
3
|
+
import Button from "@synerise/ds-button";
|
|
4
|
+
import Drawer from "@synerise/ds-drawer";
|
|
5
|
+
import { DropdownMenu } from "@synerise/ds-dropdown";
|
|
6
|
+
import Icon, { EditM, DuplicateM, FolderM, TrashM, AngleUpM, AngleDownM, OptionHorizontalM, CloseM } from "@synerise/ds-icon";
|
|
7
|
+
import Typography from "@synerise/ds-typography";
|
|
8
|
+
import { DrawerHeaderBar, StyledInlineEdit, SingleTitle, ButtonWrapper, ButtonsWrapper } from "./Header.style.js";
|
|
9
|
+
import { HeaderType, ButtonVariant } from "./Header.types.js";
|
|
10
|
+
const Header = ({
|
|
11
|
+
avatar,
|
|
12
|
+
preffix,
|
|
13
|
+
tabs,
|
|
14
|
+
onMove,
|
|
15
|
+
onDuplicate,
|
|
16
|
+
onDelete,
|
|
17
|
+
onEdit,
|
|
18
|
+
onId,
|
|
19
|
+
texts,
|
|
20
|
+
onCloseClick,
|
|
21
|
+
inputObject,
|
|
22
|
+
inputObjectIdKey = "id",
|
|
23
|
+
inlineEditInputProps = {},
|
|
24
|
+
onArrowUp,
|
|
25
|
+
onArrowDown,
|
|
26
|
+
name = "",
|
|
27
|
+
onRename,
|
|
28
|
+
additionalNode,
|
|
29
|
+
type = HeaderType.READONLY,
|
|
30
|
+
typeButtons,
|
|
31
|
+
onCancelClick,
|
|
32
|
+
onApplyClick
|
|
33
|
+
}) => {
|
|
34
|
+
const renderBackTitle = (titleType) => {
|
|
38
35
|
if (titleType === HeaderType.EDITABLE) {
|
|
39
|
-
return
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
}, inlineEditInputProps)
|
|
50
|
-
});
|
|
36
|
+
return /* @__PURE__ */ jsx(StyledInlineEdit, { disabled: !onRename, input: {
|
|
37
|
+
name: texts.name,
|
|
38
|
+
value: name,
|
|
39
|
+
maxLength: 120,
|
|
40
|
+
placeholder: texts.inlineEditPlaceholder,
|
|
41
|
+
onChange: (event) => {
|
|
42
|
+
onRename && onRename(event.target.value);
|
|
43
|
+
},
|
|
44
|
+
...inlineEditInputProps
|
|
45
|
+
} });
|
|
51
46
|
}
|
|
52
|
-
return
|
|
47
|
+
return /* @__PURE__ */ jsx(SingleTitle, { children: name });
|
|
53
48
|
};
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
49
|
+
const renderMenu = !!(onEdit || onDelete || onDuplicate || onMove || onId);
|
|
50
|
+
const renderMenuDivider = !!((onEdit || onDelete || onDuplicate || onMove) && onId);
|
|
51
|
+
const menuDataSource = useMemo(() => {
|
|
52
|
+
const menuItems = [];
|
|
58
53
|
onEdit && menuItems.push({
|
|
59
|
-
onClick:
|
|
54
|
+
onClick: () => {
|
|
60
55
|
onEdit(inputObject);
|
|
61
56
|
},
|
|
62
|
-
prefixel:
|
|
63
|
-
component: /*#__PURE__*/React.createElement(EditM, null)
|
|
64
|
-
}),
|
|
57
|
+
prefixel: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(EditM, {}) }),
|
|
65
58
|
text: texts.editIcon
|
|
66
59
|
});
|
|
67
60
|
onDuplicate && menuItems.push({
|
|
68
|
-
onClick:
|
|
61
|
+
onClick: () => {
|
|
69
62
|
onDuplicate(inputObject);
|
|
70
63
|
},
|
|
71
|
-
prefixel:
|
|
72
|
-
component: /*#__PURE__*/React.createElement(DuplicateM, null)
|
|
73
|
-
}),
|
|
64
|
+
prefixel: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(DuplicateM, {}) }),
|
|
74
65
|
text: texts.duplicateIcon
|
|
75
66
|
});
|
|
76
67
|
onMove && menuItems.push({
|
|
77
|
-
onClick:
|
|
68
|
+
onClick: () => {
|
|
78
69
|
onMove(inputObject);
|
|
79
70
|
},
|
|
80
|
-
prefixel:
|
|
81
|
-
component: /*#__PURE__*/React.createElement(FolderM, null)
|
|
82
|
-
}),
|
|
71
|
+
prefixel: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(FolderM, {}) }),
|
|
83
72
|
text: texts.moveIcon
|
|
84
73
|
});
|
|
85
74
|
onDelete && menuItems.push({
|
|
86
|
-
onClick:
|
|
75
|
+
onClick: () => {
|
|
87
76
|
onDelete(inputObject);
|
|
88
77
|
},
|
|
89
|
-
type:
|
|
90
|
-
prefixel:
|
|
91
|
-
component: /*#__PURE__*/React.createElement(TrashM, null)
|
|
92
|
-
}),
|
|
78
|
+
type: "danger",
|
|
79
|
+
prefixel: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(TrashM, {}) }),
|
|
93
80
|
text: texts.deleteIcon
|
|
94
81
|
});
|
|
95
82
|
renderMenuDivider && menuItems.push({
|
|
96
|
-
type:
|
|
83
|
+
type: "divider"
|
|
97
84
|
});
|
|
98
85
|
onId && menuItems.push({
|
|
99
|
-
onClick:
|
|
86
|
+
onClick: () => {
|
|
100
87
|
onId(inputObject);
|
|
101
88
|
},
|
|
102
89
|
copyable: {
|
|
103
|
-
copiedLabel:
|
|
104
|
-
copyValue:
|
|
90
|
+
copiedLabel: "Copied!",
|
|
91
|
+
copyValue: `${inputObject[inputObjectIdKey]}`
|
|
105
92
|
},
|
|
106
|
-
text:
|
|
93
|
+
text: `Copy ID`
|
|
107
94
|
});
|
|
108
95
|
return menuItems;
|
|
109
96
|
}, [inputObject, inputObjectIdKey, onDelete, onDuplicate, onEdit, onId, onMove, renderMenuDivider, texts.deleteIcon, texts.duplicateIcon, texts.editIcon, texts.moveIcon]);
|
|
110
|
-
|
|
97
|
+
const renderActionButtons = (typesOfButtons) => {
|
|
111
98
|
if (typesOfButtons === ButtonVariant.WITH_NAVIGATION) {
|
|
112
|
-
return
|
|
113
|
-
onClick: onArrowUp,
|
|
114
|
-
type: "ghost",
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
component:
|
|
119
|
-
})
|
|
120
|
-
onClick: onArrowDown,
|
|
121
|
-
type: "ghost",
|
|
122
|
-
mode: "single-icon"
|
|
123
|
-
}, /*#__PURE__*/React.createElement(Icon, {
|
|
124
|
-
size: 20,
|
|
125
|
-
component: /*#__PURE__*/React.createElement(AngleDownM, null)
|
|
126
|
-
}))), renderMenu && /*#__PURE__*/React.createElement(DropdownMenu, {
|
|
127
|
-
dataSource: menuDataSource,
|
|
128
|
-
placement: "bottomLeft",
|
|
129
|
-
popoverProps: {
|
|
130
|
-
testId: 'sidebar-object-menu'
|
|
131
|
-
},
|
|
132
|
-
asChild: true
|
|
133
|
-
}, /*#__PURE__*/React.createElement(S.ButtonWrapper, {
|
|
134
|
-
"data-testid": "sidebar-object-dropdown-menu-trigger"
|
|
135
|
-
}, /*#__PURE__*/React.createElement(Button, {
|
|
136
|
-
type: "ghost",
|
|
137
|
-
mode: "single-icon"
|
|
138
|
-
}, /*#__PURE__*/React.createElement(Icon, {
|
|
139
|
-
component: /*#__PURE__*/React.createElement(OptionHorizontalM, null)
|
|
140
|
-
})))), /*#__PURE__*/React.createElement(S.ButtonWrapper, null, /*#__PURE__*/React.createElement(Button, {
|
|
141
|
-
type: "ghost",
|
|
142
|
-
mode: "single-icon",
|
|
143
|
-
onClick: onCloseClick
|
|
144
|
-
}, /*#__PURE__*/React.createElement(Icon, {
|
|
145
|
-
component: /*#__PURE__*/React.createElement(CloseM, null)
|
|
146
|
-
}))));
|
|
99
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
100
|
+
onArrowUp && /* @__PURE__ */ jsx(ButtonWrapper, { children: /* @__PURE__ */ jsx(Button, { onClick: onArrowUp, type: "ghost", mode: "single-icon", children: /* @__PURE__ */ jsx(Icon, { size: 20, component: /* @__PURE__ */ jsx(AngleUpM, {}) }) }) }),
|
|
101
|
+
onArrowDown && /* @__PURE__ */ jsx(ButtonWrapper, { children: /* @__PURE__ */ jsx(Button, { onClick: onArrowDown, type: "ghost", mode: "single-icon", children: /* @__PURE__ */ jsx(Icon, { size: 20, component: /* @__PURE__ */ jsx(AngleDownM, {}) }) }) }),
|
|
102
|
+
renderMenu && /* @__PURE__ */ jsx(DropdownMenu, { dataSource: menuDataSource, placement: "bottomLeft", popoverProps: {
|
|
103
|
+
testId: "sidebar-object-menu"
|
|
104
|
+
}, asChild: true, children: /* @__PURE__ */ jsx(ButtonWrapper, { "data-testid": "sidebar-object-dropdown-menu-trigger", children: /* @__PURE__ */ jsx(Button, { type: "ghost", mode: "single-icon", children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(OptionHorizontalM, {}) }) }) }) }),
|
|
105
|
+
/* @__PURE__ */ jsx(ButtonWrapper, { children: /* @__PURE__ */ jsx(Button, { type: "ghost", mode: "single-icon", onClick: onCloseClick, children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(CloseM, {}) }) }) })
|
|
106
|
+
] });
|
|
147
107
|
}
|
|
148
108
|
if (typesOfButtons === ButtonVariant.TWO_BUTTONS) {
|
|
149
|
-
return
|
|
150
|
-
type: "ghost",
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
109
|
+
return /* @__PURE__ */ jsxs(ButtonsWrapper, { children: [
|
|
110
|
+
/* @__PURE__ */ jsx(ButtonWrapper, { children: /* @__PURE__ */ jsxs(Button, { type: "ghost", onClick: onCancelClick, children: [
|
|
111
|
+
" ",
|
|
112
|
+
texts.cancelButton,
|
|
113
|
+
" "
|
|
114
|
+
] }) }),
|
|
115
|
+
/* @__PURE__ */ jsx(ButtonWrapper, { children: /* @__PURE__ */ jsxs(Button, { type: "primary", onClick: onApplyClick, children: [
|
|
116
|
+
" ",
|
|
117
|
+
texts.applyButton,
|
|
118
|
+
" "
|
|
119
|
+
] }) })
|
|
120
|
+
] });
|
|
156
121
|
}
|
|
157
122
|
return null;
|
|
158
123
|
};
|
|
159
|
-
return
|
|
160
|
-
withTabs: !!tabs
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
124
|
+
return /* @__PURE__ */ jsx(Drawer.DrawerHeaderWithoutPadding, { children: /* @__PURE__ */ jsxs(Drawer.DrawerHeader, { children: [
|
|
125
|
+
/* @__PURE__ */ jsxs(DrawerHeaderBar, { withTabs: !!tabs, children: [
|
|
126
|
+
preffix,
|
|
127
|
+
avatar,
|
|
128
|
+
/* @__PURE__ */ jsx(Typography.Title, { style: {
|
|
129
|
+
flex: 2,
|
|
130
|
+
marginLeft: "15px"
|
|
131
|
+
}, level: 4, children: renderBackTitle(type) }),
|
|
132
|
+
renderActionButtons(typeButtons)
|
|
133
|
+
] }),
|
|
134
|
+
additionalNode,
|
|
135
|
+
tabs
|
|
136
|
+
] }) });
|
|
137
|
+
};
|
|
138
|
+
export {
|
|
139
|
+
Header as default
|
|
168
140
|
};
|
|
169
|
-
export default Header;
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export declare const HeaderWrapper: import(
|
|
1
|
+
import { InlineEditProps } from '@synerise/ds-inline-edit/dist/InlineEdit.types';
|
|
2
|
+
export declare const HeaderWrapper: import('styled-components').StyledComponent<"div", any, {
|
|
3
3
|
dashed: boolean;
|
|
4
4
|
}, never>;
|
|
5
|
-
export declare const ButtonWrapper: import(
|
|
6
|
-
export declare const StyledInlineEdit: import(
|
|
7
|
-
export declare const DrawerHeaderBar: import(
|
|
5
|
+
export declare const ButtonWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
6
|
+
export declare const StyledInlineEdit: import('styled-components').StyledComponent<({ className, style, size, disabled, autoFocus, hideIcon, customIcon, tooltipTitle, error, input, }: InlineEditProps) => React.JSX.Element, any, InlineEditProps, never>;
|
|
7
|
+
export declare const DrawerHeaderBar: import('styled-components').StyledComponent<"div", any, {
|
|
8
8
|
withTabs: boolean;
|
|
9
9
|
}, never>;
|
|
10
|
-
export declare const ButtonsWrapper: import(
|
|
11
|
-
export declare const DropdownWrapper: import(
|
|
12
|
-
export declare const OverviewWrapper: import(
|
|
13
|
-
export declare const SingleTitle: import(
|
|
10
|
+
export declare const ButtonsWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
11
|
+
export declare const DropdownWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
12
|
+
export declare const OverviewWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
13
|
+
export declare const SingleTitle: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
@@ -1,42 +1,44 @@
|
|
|
1
|
-
import styled from
|
|
2
|
-
import InlineEdit from
|
|
3
|
-
|
|
1
|
+
import styled from "styled-components";
|
|
2
|
+
import InlineEdit from "@synerise/ds-inline-edit";
|
|
3
|
+
const HeaderWrapper = /* @__PURE__ */ styled.div.withConfig({
|
|
4
4
|
displayName: "Headerstyle__HeaderWrapper",
|
|
5
5
|
componentId: "sc-16ox3vk-0"
|
|
6
|
-
})(["padding:", ";border-bottom:", ";margin-top:-8px;"],
|
|
7
|
-
|
|
8
|
-
}, function (props) {
|
|
9
|
-
return props.dashed ? "1px dashed " + props.theme.palette['grey-300'] : "0";
|
|
10
|
-
});
|
|
11
|
-
export var ButtonWrapper = styled.div.withConfig({
|
|
6
|
+
})(["padding:", ";border-bottom:", ";margin-top:-8px;"], (props) => props.dashed ? "0 0 16px 0" : "0", (props) => props.dashed ? `1px dashed ${props.theme.palette["grey-300"]}` : `0`);
|
|
7
|
+
const ButtonWrapper = /* @__PURE__ */ styled.div.withConfig({
|
|
12
8
|
displayName: "Headerstyle__ButtonWrapper",
|
|
13
9
|
componentId: "sc-16ox3vk-1"
|
|
14
10
|
})(["padding:0 0 0 8px;"]);
|
|
15
|
-
|
|
11
|
+
const StyledInlineEdit = /* @__PURE__ */ styled(InlineEdit).withConfig({
|
|
16
12
|
displayName: "Headerstyle__StyledInlineEdit",
|
|
17
13
|
componentId: "sc-16ox3vk-2"
|
|
18
14
|
})(["&& .autosize-input > input{max-width:350px;overflow:hidden;}"]);
|
|
19
|
-
|
|
15
|
+
const DrawerHeaderBar = /* @__PURE__ */ styled.div.withConfig({
|
|
20
16
|
displayName: "Headerstyle__DrawerHeaderBar",
|
|
21
17
|
componentId: "sc-16ox3vk-3"
|
|
22
|
-
})(["display:flex;justify-content:space-between;align-items:center;padding-bottom:", ";.ant-typography{margin-bottom:0;}"],
|
|
23
|
-
|
|
24
|
-
});
|
|
25
|
-
export var ButtonsWrapper = styled.div.withConfig({
|
|
18
|
+
})(["display:flex;justify-content:space-between;align-items:center;padding-bottom:", ";.ant-typography{margin-bottom:0;}"], (props) => props.withTabs ? "10px" : "24px");
|
|
19
|
+
const ButtonsWrapper = /* @__PURE__ */ styled.div.withConfig({
|
|
26
20
|
displayName: "Headerstyle__ButtonsWrapper",
|
|
27
21
|
componentId: "sc-16ox3vk-4"
|
|
28
22
|
})(["display:flex;"]);
|
|
29
|
-
|
|
23
|
+
const DropdownWrapper = /* @__PURE__ */ styled.div.withConfig({
|
|
30
24
|
displayName: "Headerstyle__DropdownWrapper",
|
|
31
25
|
componentId: "sc-16ox3vk-5"
|
|
32
|
-
})(["background:", ";"],
|
|
33
|
-
|
|
34
|
-
});
|
|
35
|
-
export var OverviewWrapper = styled.div.withConfig({
|
|
26
|
+
})(["background:", ";"], (props) => props.theme.palette.white);
|
|
27
|
+
const OverviewWrapper = /* @__PURE__ */ styled.div.withConfig({
|
|
36
28
|
displayName: "Headerstyle__OverviewWrapper",
|
|
37
29
|
componentId: "sc-16ox3vk-6"
|
|
38
30
|
})(["width:100%;"]);
|
|
39
|
-
|
|
31
|
+
const SingleTitle = /* @__PURE__ */ styled.div.withConfig({
|
|
40
32
|
displayName: "Headerstyle__SingleTitle",
|
|
41
33
|
componentId: "sc-16ox3vk-7"
|
|
42
|
-
})(["font-size:18px;padding-left:1px;padding-top:1px;max-width:350px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"]);
|
|
34
|
+
})(["font-size:18px;padding-left:1px;padding-top:1px;max-width:350px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"]);
|
|
35
|
+
export {
|
|
36
|
+
ButtonWrapper,
|
|
37
|
+
ButtonsWrapper,
|
|
38
|
+
DrawerHeaderBar,
|
|
39
|
+
DropdownWrapper,
|
|
40
|
+
HeaderWrapper,
|
|
41
|
+
OverviewWrapper,
|
|
42
|
+
SingleTitle,
|
|
43
|
+
StyledInlineEdit
|
|
44
|
+
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { InputProps } from '@synerise/ds-inline-edit/dist/InlineEdit.types';
|
|
3
3
|
export type HeaderProps = {
|
|
4
4
|
avatar: ReactNode;
|
|
5
5
|
preffix: ReactNode;
|
|
@@ -1,10 +1,14 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
return
|
|
5
|
-
}({});
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
return
|
|
10
|
-
}({});
|
|
1
|
+
var HeaderType = /* @__PURE__ */ ((HeaderType2) => {
|
|
2
|
+
HeaderType2["READONLY"] = "readonly";
|
|
3
|
+
HeaderType2["EDITABLE"] = "editable";
|
|
4
|
+
return HeaderType2;
|
|
5
|
+
})(HeaderType || {});
|
|
6
|
+
var ButtonVariant = /* @__PURE__ */ ((ButtonVariant2) => {
|
|
7
|
+
ButtonVariant2["TWO_BUTTONS"] = "twoButtons";
|
|
8
|
+
ButtonVariant2["WITH_NAVIGATION"] = "withNavigation";
|
|
9
|
+
return ButtonVariant2;
|
|
10
|
+
})(ButtonVariant || {});
|
|
11
|
+
export {
|
|
12
|
+
ButtonVariant,
|
|
13
|
+
HeaderType
|
|
14
|
+
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import {
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { ObjectSummaryProps } from './ObjectSummary.types';
|
|
3
3
|
declare const ObjectSummary: ({ inputObject }: ObjectSummaryProps) => React.JSX.Element;
|
|
4
4
|
export default ObjectSummary;
|
|
@@ -1,14 +1,11 @@
|
|
|
1
|
-
import
|
|
2
|
-
import Description, { DescriptionRow } from
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
});
|
|
12
|
-
}));
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import Description, { DescriptionRow } from "@synerise/ds-description";
|
|
3
|
+
const ObjectSummary = ({
|
|
4
|
+
inputObject
|
|
5
|
+
}) => {
|
|
6
|
+
const keys = Object.keys(inputObject);
|
|
7
|
+
return /* @__PURE__ */ jsx(Description, { children: keys.map((key) => /* @__PURE__ */ jsx(DescriptionRow, { label: key === "id" ? key.toUpperCase() : key, value: inputObject[key] }, key)) });
|
|
8
|
+
};
|
|
9
|
+
export {
|
|
10
|
+
ObjectSummary as default
|
|
13
11
|
};
|
|
14
|
-
export default ObjectSummary;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export declare const ContentWrapper: import(
|
|
2
|
-
export declare const DrawerContent: import(
|
|
1
|
+
export declare const ContentWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
2
|
+
export declare const DrawerContent: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
@@ -1,11 +1,13 @@
|
|
|
1
|
-
import styled from
|
|
2
|
-
|
|
1
|
+
import styled from "styled-components";
|
|
2
|
+
const ContentWrapper = /* @__PURE__ */ styled.div.withConfig({
|
|
3
3
|
displayName: "ObjectSummarystyle__ContentWrapper",
|
|
4
4
|
componentId: "sc-1ka243j-0"
|
|
5
|
-
})(["padding:12px 140px 12px 0;border-bottom:1px dashed ", ";margin:0 24px;"],
|
|
6
|
-
|
|
7
|
-
});
|
|
8
|
-
export var DrawerContent = styled.div.withConfig({
|
|
5
|
+
})(["padding:12px 140px 12px 0;border-bottom:1px dashed ", ";margin:0 24px;"], (props) => props.theme.palette["grey-300"]);
|
|
6
|
+
const DrawerContent = /* @__PURE__ */ styled.div.withConfig({
|
|
9
7
|
displayName: "ObjectSummarystyle__DrawerContent",
|
|
10
8
|
componentId: "sc-1ka243j-1"
|
|
11
|
-
})(["padding:0px;"]);
|
|
9
|
+
})(["padding:0px;"]);
|
|
10
|
+
export {
|
|
11
|
+
ContentWrapper,
|
|
12
|
+
DrawerContent
|
|
13
|
+
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import {
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { OverviewObjectProps } from './Overview.types';
|
|
3
3
|
declare const Overview: ({ inputObject, contentTags, folders, foldersDisplayKey, foldersFilterKey, foldersIdKey, parentFolder, texts, textDescription, onFolderSelect, onDescriptionChange, descriptionProps, onAddFolderClick, }: OverviewObjectProps) => React.JSX.Element;
|
|
4
4
|
export default Overview;
|
|
@@ -1,96 +1,61 @@
|
|
|
1
|
-
|
|
2
|
-
import
|
|
3
|
-
import Button from
|
|
4
|
-
import { useTheme } from
|
|
5
|
-
import { DropdownMenu } from
|
|
6
|
-
import Icon, {
|
|
7
|
-
import Content from
|
|
8
|
-
import
|
|
9
|
-
import ObjectSummary from
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
return filteredData.map(function (item) {
|
|
39
|
-
return _extends({
|
|
40
|
-
key: item[foldersIdKey] + "-" + item.id,
|
|
41
|
-
onClick: function onClick() {
|
|
42
|
-
return onFolderSelect(item);
|
|
43
|
-
},
|
|
44
|
-
checked: parentFolder[foldersIdKey] === item[foldersIdKey],
|
|
45
|
-
prefixel: /*#__PURE__*/React.createElement(Icon, {
|
|
46
|
-
component: /*#__PURE__*/React.createElement(FolderM, null)
|
|
47
|
-
}),
|
|
48
|
-
// highlight: value,
|
|
49
|
-
text: item[foldersDisplayKey]
|
|
50
|
-
}, item);
|
|
51
|
-
});
|
|
1
|
+
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { useState, useMemo } from "react";
|
|
3
|
+
import Button from "@synerise/ds-button";
|
|
4
|
+
import { useTheme } from "@synerise/ds-core";
|
|
5
|
+
import { DropdownMenu } from "@synerise/ds-dropdown";
|
|
6
|
+
import Icon, { FolderM, AngleDownS, Add3M } from "@synerise/ds-icon";
|
|
7
|
+
import Content from "../Content/Content.js";
|
|
8
|
+
import { OverviewWrapper, HeaderWrapper } from "../Header/Header.style.js";
|
|
9
|
+
import ObjectSummary from "../ObjectSummary/ObjectSummary.js";
|
|
10
|
+
const Overview = ({
|
|
11
|
+
inputObject,
|
|
12
|
+
contentTags,
|
|
13
|
+
folders,
|
|
14
|
+
foldersDisplayKey = "name",
|
|
15
|
+
foldersFilterKey = "name",
|
|
16
|
+
foldersIdKey = "id",
|
|
17
|
+
parentFolder,
|
|
18
|
+
texts,
|
|
19
|
+
textDescription,
|
|
20
|
+
onFolderSelect,
|
|
21
|
+
onDescriptionChange,
|
|
22
|
+
descriptionProps = {},
|
|
23
|
+
onAddFolderClick
|
|
24
|
+
}) => {
|
|
25
|
+
const theme = useTheme();
|
|
26
|
+
const [searchQuery, setSearchQuery] = useState("");
|
|
27
|
+
const filteredData = useMemo(() => folders.filter((item) => typeof item[foldersFilterKey] === "string" && item[foldersFilterKey].toLowerCase().includes(searchQuery.toLowerCase())), [folders, foldersFilterKey, searchQuery]);
|
|
28
|
+
const menuDataSource = useMemo(() => {
|
|
29
|
+
return filteredData.map((item) => ({
|
|
30
|
+
key: `${item[foldersIdKey]}-${item.id}`,
|
|
31
|
+
onClick: () => onFolderSelect(item),
|
|
32
|
+
checked: parentFolder[foldersIdKey] === item[foldersIdKey],
|
|
33
|
+
prefixel: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(FolderM, {}) }),
|
|
34
|
+
// highlight: value,
|
|
35
|
+
text: item[foldersDisplayKey],
|
|
36
|
+
...item
|
|
37
|
+
}));
|
|
52
38
|
}, [filteredData, foldersDisplayKey, foldersIdKey, onFolderSelect, parentFolder]);
|
|
53
|
-
return
|
|
54
|
-
dashed: !!onFolderSelect
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
size: 24,
|
|
76
|
-
color: theme.palette['grey-500']
|
|
77
|
-
}), /*#__PURE__*/React.createElement("div", null, texts.addFolder))
|
|
78
|
-
} : undefined
|
|
79
|
-
}, /*#__PURE__*/React.createElement(Button, {
|
|
80
|
-
mode: "label-icon",
|
|
81
|
-
type: "ghost"
|
|
82
|
-
}, parentFolder == null ? void 0 : parentFolder.name, /*#__PURE__*/React.createElement(Icon, {
|
|
83
|
-
component: /*#__PURE__*/React.createElement(AngleDownS, null)
|
|
84
|
-
}))))), /*#__PURE__*/React.createElement(Content, {
|
|
85
|
-
descriptionProps: descriptionProps,
|
|
86
|
-
onFolderSelect: onFolderSelect,
|
|
87
|
-
texts: texts,
|
|
88
|
-
onDescriptionChange: onDescriptionChange,
|
|
89
|
-
textDescription: textDescription,
|
|
90
|
-
mainContent: /*#__PURE__*/React.createElement(ObjectSummary, {
|
|
91
|
-
inputObject: inputObject
|
|
92
|
-
}),
|
|
93
|
-
tags: contentTags
|
|
94
|
-
}));
|
|
39
|
+
return /* @__PURE__ */ jsxs(OverviewWrapper, { children: [
|
|
40
|
+
/* @__PURE__ */ jsx(HeaderWrapper, { dashed: !!onFolderSelect, children: onFolderSelect && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
41
|
+
texts?.folder,
|
|
42
|
+
":",
|
|
43
|
+
" ",
|
|
44
|
+
/* @__PURE__ */ jsx(DropdownMenu, { withSearch: true, popoverProps: {
|
|
45
|
+
testId: "sidebar-object-folders"
|
|
46
|
+
}, asChild: true, dataSource: menuDataSource, itemMatchesSearchQuery: () => true, onSearchQueryChange: setSearchQuery, footer: onAddFolderClick ? {
|
|
47
|
+
left: /* @__PURE__ */ jsxs(Button, { type: "ghost", mode: "icon-label", onClick: () => onAddFolderClick(searchQuery), children: [
|
|
48
|
+
/* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(Add3M, {}), size: 24, color: theme.palette["grey-500"] }),
|
|
49
|
+
/* @__PURE__ */ jsx("div", { children: texts.addFolder })
|
|
50
|
+
] })
|
|
51
|
+
} : void 0, children: /* @__PURE__ */ jsxs(Button, { mode: "label-icon", type: "ghost", children: [
|
|
52
|
+
parentFolder?.name,
|
|
53
|
+
/* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(AngleDownS, {}) })
|
|
54
|
+
] }) })
|
|
55
|
+
] }) }),
|
|
56
|
+
/* @__PURE__ */ jsx(Content, { descriptionProps, onFolderSelect, texts, onDescriptionChange, textDescription, mainContent: /* @__PURE__ */ jsx(ObjectSummary, { inputObject }), tags: contentTags })
|
|
57
|
+
] });
|
|
58
|
+
};
|
|
59
|
+
export {
|
|
60
|
+
Overview as default
|
|
95
61
|
};
|
|
96
|
-
export default Overview;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { SubtleTextAreaProps } from '@synerise/ds-subtle-form/dist/Elements/TextArea/TextArea.types';
|
|
3
|
+
import { FolderItem } from '../../SidebarObject.types';
|
|
4
|
+
import { HeaderTexts } from '../Header/Header.types';
|
|
5
5
|
export type OverviewObjectProps = {
|
|
6
6
|
inputObject: {
|
|
7
7
|
[key: string]: string | ReactNode;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
|
package/dist/SidebarObject.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import {
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { SidebarObjectProps } from './SidebarObject.types';
|
|
3
3
|
declare const SidebarObject: ({ avatar, headerPreffix, headerTabs, inputObject, inlineEditInputProps, onEdit, onDelete, onDuplicate, onMove, onId, texts, onCloseClick, onArrowUp, onArrowDown, withScrollbar, handleTabClick, footer, name, onRename, inputObjectIdKey, additionalNode, activeTab, headerType, typeButtons, onCancelClick, onApplyClick, }: SidebarObjectProps) => React.JSX.Element;
|
|
4
4
|
export default SidebarObject;
|
package/dist/SidebarObject.js
CHANGED
|
@@ -1,77 +1,60 @@
|
|
|
1
|
-
import
|
|
2
|
-
import Scrollbar from
|
|
3
|
-
import Tabs from
|
|
4
|
-
import Header from
|
|
5
|
-
import { HeaderType } from
|
|
6
|
-
import
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
1
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
+
import Scrollbar from "@synerise/ds-scrollbar";
|
|
3
|
+
import Tabs from "@synerise/ds-tabs";
|
|
4
|
+
import Header from "./Elements/Header/Header.js";
|
|
5
|
+
import { HeaderType } from "./Elements/Header/Header.types.js";
|
|
6
|
+
import { SidebarObjectWrapper, ContentContainer, ContentPlaceholder, FooterContainer } from "./SidebarObject.style.js";
|
|
7
|
+
const SidebarObject = ({
|
|
8
|
+
avatar,
|
|
9
|
+
headerPreffix,
|
|
10
|
+
headerTabs,
|
|
11
|
+
inputObject,
|
|
12
|
+
inlineEditInputProps,
|
|
13
|
+
onEdit,
|
|
14
|
+
onDelete,
|
|
15
|
+
onDuplicate,
|
|
16
|
+
onMove,
|
|
17
|
+
onId,
|
|
18
|
+
texts,
|
|
19
|
+
onCloseClick,
|
|
20
|
+
onArrowUp,
|
|
21
|
+
onArrowDown,
|
|
22
|
+
withScrollbar,
|
|
23
|
+
handleTabClick,
|
|
24
|
+
footer,
|
|
25
|
+
name,
|
|
26
|
+
onRename,
|
|
27
|
+
inputObjectIdKey = "id",
|
|
28
|
+
additionalNode,
|
|
29
|
+
activeTab = 0,
|
|
30
|
+
headerType = HeaderType.READONLY,
|
|
31
|
+
typeButtons,
|
|
32
|
+
onCancelClick,
|
|
33
|
+
onApplyClick
|
|
34
|
+
}) => {
|
|
35
|
+
return /* @__PURE__ */ jsxs(SidebarObjectWrapper, { children: [
|
|
36
|
+
/* @__PURE__ */ jsx(Header, { avatar, preffix: headerPreffix, tabs: headerTabs?.length ? /* @__PURE__ */ jsx(Tabs, { activeTab, tabs: headerTabs, handleTabClick: (index) => {
|
|
37
|
+
handleTabClick && handleTabClick(index);
|
|
38
|
+
} }) : null, onDelete, onDuplicate, onEdit, onMove, onId, texts, onCloseClick, onCancelClick, onApplyClick, inputObject, inputObjectIdKey: inputObjectIdKey || "id", inlineEditInputProps, onArrowUp, onArrowDown, name, additionalNode, onRename, type: headerType, typeButtons }),
|
|
39
|
+
/* @__PURE__ */ jsx(
|
|
40
|
+
Scrollbar,
|
|
41
|
+
{
|
|
42
|
+
absolute: true,
|
|
43
|
+
maxHeight: "100vh",
|
|
44
|
+
options: {
|
|
45
|
+
suppressScrollY: !withScrollbar
|
|
46
|
+
},
|
|
47
|
+
children: headerTabs[activeTab]?.content && /* @__PURE__ */ jsx(ContentContainer, { children: headerTabs[activeTab]?.content })
|
|
46
48
|
}
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
inputObjectIdKey: inputObjectIdKey || 'id',
|
|
59
|
-
inlineEditInputProps: inlineEditInputProps,
|
|
60
|
-
onArrowUp: onArrowUp,
|
|
61
|
-
onArrowDown: onArrowDown,
|
|
62
|
-
name: name,
|
|
63
|
-
additionalNode: additionalNode,
|
|
64
|
-
onRename: onRename,
|
|
65
|
-
type: headerType,
|
|
66
|
-
typeButtons: typeButtons
|
|
67
|
-
}), /*#__PURE__*/React.createElement(Scrollbar, {
|
|
68
|
-
absolute: true,
|
|
69
|
-
maxHeight: "100vh"
|
|
70
|
-
// @ts-expect-error Property 'options' does not exist on type
|
|
71
|
-
,
|
|
72
|
-
options: {
|
|
73
|
-
suppressScrollY: !withScrollbar
|
|
74
|
-
}
|
|
75
|
-
}, ((_headerTabs$activeTab = headerTabs[activeTab]) == null ? void 0 : _headerTabs$activeTab.content) && /*#__PURE__*/React.createElement(S.ContentContainer, null, (_headerTabs$activeTab2 = headerTabs[activeTab]) == null ? void 0 : _headerTabs$activeTab2.content)), /*#__PURE__*/React.createElement(S.ContentPlaceholder, null), !!footer && /*#__PURE__*/React.createElement(S.FooterContainer, null, " ", footer, " "));
|
|
49
|
+
),
|
|
50
|
+
/* @__PURE__ */ jsx(ContentPlaceholder, {}),
|
|
51
|
+
!!footer && /* @__PURE__ */ jsxs(FooterContainer, { children: [
|
|
52
|
+
" ",
|
|
53
|
+
footer,
|
|
54
|
+
" "
|
|
55
|
+
] })
|
|
56
|
+
] });
|
|
57
|
+
};
|
|
58
|
+
export {
|
|
59
|
+
SidebarObject as default
|
|
76
60
|
};
|
|
77
|
-
export default SidebarObject;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export declare const FooterContainer: import(
|
|
2
|
-
export declare const SidebarObjectWrapper: import(
|
|
3
|
-
export declare const ContentPlaceholder: import(
|
|
4
|
-
export declare const ContentContainer: import(
|
|
1
|
+
export declare const FooterContainer: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
2
|
+
export declare const SidebarObjectWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
3
|
+
export declare const ContentPlaceholder: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
4
|
+
export declare const ContentContainer: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
@@ -1,21 +1,23 @@
|
|
|
1
|
-
import styled from
|
|
2
|
-
|
|
1
|
+
import styled from "styled-components";
|
|
2
|
+
const FooterContainer = /* @__PURE__ */ styled.div.withConfig({
|
|
3
3
|
displayName: "SidebarObjectstyle__FooterContainer",
|
|
4
4
|
componentId: "sc-xhivw-0"
|
|
5
|
-
})(["padding:24px;display:flex;align-items:center;justify-content:flex-end;background:", ";border-top:solid 1px ", ";"],
|
|
6
|
-
|
|
7
|
-
}, function (props) {
|
|
8
|
-
return props.theme.palette['grey-100'];
|
|
9
|
-
});
|
|
10
|
-
export var SidebarObjectWrapper = styled.div.withConfig({
|
|
5
|
+
})(["padding:24px;display:flex;align-items:center;justify-content:flex-end;background:", ";border-top:solid 1px ", ";"], (props) => props.theme.palette["grey-050"], (props) => props.theme.palette["grey-100"]);
|
|
6
|
+
const SidebarObjectWrapper = /* @__PURE__ */ styled.div.withConfig({
|
|
11
7
|
displayName: "SidebarObjectstyle__SidebarObjectWrapper",
|
|
12
8
|
componentId: "sc-xhivw-1"
|
|
13
9
|
})(["display:flex;flex-direction:column;height:100vh;"]);
|
|
14
|
-
|
|
10
|
+
const ContentPlaceholder = /* @__PURE__ */ styled.div.withConfig({
|
|
15
11
|
displayName: "SidebarObjectstyle__ContentPlaceholder",
|
|
16
12
|
componentId: "sc-xhivw-2"
|
|
17
13
|
})(["display:flex;flex:1;"]);
|
|
18
|
-
|
|
14
|
+
const ContentContainer = /* @__PURE__ */ styled.div.withConfig({
|
|
19
15
|
displayName: "SidebarObjectstyle__ContentContainer",
|
|
20
16
|
componentId: "sc-xhivw-3"
|
|
21
|
-
})(["padding:24px;display:flex;flex:1;"]);
|
|
17
|
+
})(["padding:24px;display:flex;flex:1;"]);
|
|
18
|
+
export {
|
|
19
|
+
ContentContainer,
|
|
20
|
+
ContentPlaceholder,
|
|
21
|
+
FooterContainer,
|
|
22
|
+
SidebarObjectWrapper
|
|
23
|
+
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { InputProps } from '@synerise/ds-inline-edit/dist/InlineEdit.types';
|
|
3
|
+
import { TabItem } from '@synerise/ds-tabs';
|
|
4
|
+
import { ButtonVariant, HeaderTexts, HeaderType } from './Elements/Header/Header.types';
|
|
5
5
|
export type SidebarObjectProps = {
|
|
6
6
|
avatar?: ReactNode;
|
|
7
7
|
headerPreffix?: ReactNode;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
|
package/dist/index.js
CHANGED
package/dist/modules.d.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import "@testing-library/jest-dom";
|
|
File without changes
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@synerise/ds-sidebar-object",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.25",
|
|
4
4
|
"description": "SidebarObject UI Component for the Synerise Design System",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"repository": "Synerise/synerise-design",
|
|
@@ -16,10 +16,10 @@
|
|
|
16
16
|
"access": "public"
|
|
17
17
|
},
|
|
18
18
|
"scripts": {
|
|
19
|
-
"build": "
|
|
19
|
+
"build": "vite build",
|
|
20
20
|
"build:css": "node ../../../scripts/style/less.js",
|
|
21
21
|
"build:js": "babel --delete-dir-on-start --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx'",
|
|
22
|
-
"build:watch": "
|
|
22
|
+
"build:watch": "vite build --watch",
|
|
23
23
|
"defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
|
|
24
24
|
"pack:ci": "pnpm pack --pack-destination ../../storybook/storybook-static/static",
|
|
25
25
|
"prepublish": "pnpm run build",
|
|
@@ -35,19 +35,19 @@
|
|
|
35
35
|
],
|
|
36
36
|
"types": "dist/index.d.ts",
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@synerise/ds-button": "^1.5.
|
|
39
|
-
"@synerise/ds-description": "^1.3.
|
|
40
|
-
"@synerise/ds-drawer": "^1.1.
|
|
41
|
-
"@synerise/ds-dropdown": "^1.3.
|
|
42
|
-
"@synerise/ds-icon": "^1.15.
|
|
43
|
-
"@synerise/ds-inline-edit": "^1.1.
|
|
44
|
-
"@synerise/ds-menu": "^1.4.
|
|
45
|
-
"@synerise/ds-result": "^1.0.
|
|
46
|
-
"@synerise/ds-scrollbar": "^1.2.
|
|
47
|
-
"@synerise/ds-subtle-form": "^1.1.
|
|
48
|
-
"@synerise/ds-tabs": "^1.1.
|
|
49
|
-
"@synerise/ds-typography": "^1.1.
|
|
50
|
-
"@synerise/ds-utils": "^1.7.
|
|
38
|
+
"@synerise/ds-button": "^1.5.18",
|
|
39
|
+
"@synerise/ds-description": "^1.3.2",
|
|
40
|
+
"@synerise/ds-drawer": "^1.1.2",
|
|
41
|
+
"@synerise/ds-dropdown": "^1.3.2",
|
|
42
|
+
"@synerise/ds-icon": "^1.15.1",
|
|
43
|
+
"@synerise/ds-inline-edit": "^1.1.24",
|
|
44
|
+
"@synerise/ds-menu": "^1.4.13",
|
|
45
|
+
"@synerise/ds-result": "^1.0.49",
|
|
46
|
+
"@synerise/ds-scrollbar": "^1.2.17",
|
|
47
|
+
"@synerise/ds-subtle-form": "^1.1.59",
|
|
48
|
+
"@synerise/ds-tabs": "^1.1.24",
|
|
49
|
+
"@synerise/ds-typography": "^1.1.13",
|
|
50
|
+
"@synerise/ds-utils": "^1.7.1"
|
|
51
51
|
},
|
|
52
52
|
"peerDependencies": {
|
|
53
53
|
"@synerise/ds-core": "*",
|
|
@@ -55,5 +55,5 @@
|
|
|
55
55
|
"react": ">=16.9.0 <= 18.3.1",
|
|
56
56
|
"styled-components": "^5.3.3"
|
|
57
57
|
},
|
|
58
|
-
"gitHead": "
|
|
58
|
+
"gitHead": "e4ecca8944fc9b41c1b9d59c8bcad5e5e2013225"
|
|
59
59
|
}
|