@headless-adminapp/fluent 1.4.20 → 1.4.21
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/App/AppHeaderContianer.js +4 -4
- package/App/Navigation/NavigationContainer.js +28 -19
- package/App/QuickActionItem.js +1 -1
- package/DataGrid/CustomFilter/CustomFilter.js +4 -6
- package/DataGrid/CustomizeColumns/AddColumns.js +15 -18
- package/DataGrid/CustomizeColumns/CustomizeColumns.js +21 -30
- package/PageEntityForm/CommandContainer.js +2 -2
- package/PageEntityForm/EditableGridControl/CardUi.js +1 -1
- package/components/DrawerFooter.d.ts +6 -0
- package/components/DrawerFooter.js +14 -0
- package/components/DrawerHeader.d.ts +10 -0
- package/components/DrawerHeader.js +22 -0
- package/form/controls/LookupControl.js +4 -4
- package/package.json +2 -2
- package/DataGrid/CustomFilter/Header.d.ts +0 -6
- package/DataGrid/CustomFilter/Header.js +0 -19
|
@@ -40,8 +40,8 @@ const NavBackButton = () => {
|
|
|
40
40
|
color: 'inherit',
|
|
41
41
|
width: !isMobile ? 44 : undefined,
|
|
42
42
|
maxWidth: !isMobile ? 44 : undefined,
|
|
43
|
-
}, icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.ArrowLeft, {}), onClick: () => {
|
|
44
|
-
router.back();
|
|
43
|
+
}, icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.ArrowLeft, {}), onClick: async () => {
|
|
44
|
+
await router.back();
|
|
45
45
|
} }));
|
|
46
46
|
};
|
|
47
47
|
const NavTitle = () => {
|
|
@@ -98,12 +98,12 @@ const NavActions = () => {
|
|
|
98
98
|
flex: 1,
|
|
99
99
|
}, children: [(0, jsx_runtime_1.jsx)(react_components_1.Caption1Strong, { children: authSession?.fullName }), (0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { textOverflow: 'ellipsis', overflow: 'hidden' }, children: authSession?.email })] })] })), !isSkipAuthCheck && (0, jsx_runtime_1.jsx)(react_components_1.MenuDivider, { style: { marginInline: 0 } }), (0, jsx_runtime_1.jsxs)(react_components_1.MenuList, { style: { width: 200, marginBottom: 4 }, children: [accountMenuItems?.map((item) => {
|
|
100
100
|
const Icon = item.icon;
|
|
101
|
-
return ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(Icon, { size: "inherit" }), onClick: () => {
|
|
101
|
+
return ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(Icon, { size: "inherit" }), onClick: async () => {
|
|
102
102
|
if (item.onClick) {
|
|
103
103
|
item.onClick();
|
|
104
104
|
}
|
|
105
105
|
else if (item.link) {
|
|
106
|
-
router.push(basePath + item.link);
|
|
106
|
+
await router.push(basePath + item.link);
|
|
107
107
|
}
|
|
108
108
|
}, children: item.localizedLabel?.[language] ?? item.label }, item.__key));
|
|
109
109
|
}), !isSkipAuthCheck && ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.SignOut, {}), onClick: () => logout(), children: strings.logout }))] })] })] }))] }));
|
|
@@ -4,8 +4,9 @@ exports.NavigationContainer = void 0;
|
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
5
|
const react_components_1 = require("@fluentui/react-components");
|
|
6
6
|
const app_1 = require("@headless-adminapp/app/app");
|
|
7
|
+
const hooks_1 = require("@headless-adminapp/app/hooks");
|
|
7
8
|
const locale_1 = require("@headless-adminapp/app/locale");
|
|
8
|
-
const
|
|
9
|
+
const hooks_2 = require("@headless-adminapp/app/route/hooks");
|
|
9
10
|
const app_2 = require("@headless-adminapp/core/experience/app");
|
|
10
11
|
const react_1 = require("react");
|
|
11
12
|
const NavCategoryItemComponent_1 = require("./NavCategoryItemComponent");
|
|
@@ -26,11 +27,12 @@ const NavigationContainer = ({ open, type, onOpenChange, isMini, }) => {
|
|
|
26
27
|
const styles = useStyles();
|
|
27
28
|
const { appExperience: app } = (0, app_1.useAppContext)();
|
|
28
29
|
const { schemaMetadataDic } = (0, app_1.useAppContext)();
|
|
29
|
-
const
|
|
30
|
-
const
|
|
30
|
+
const isMobile = (0, hooks_1.useIsMobile)();
|
|
31
|
+
const router = (0, hooks_2.useRouter)();
|
|
32
|
+
const pathname = (0, hooks_2.usePathname)();
|
|
31
33
|
const { language } = (0, locale_1.useLocale)();
|
|
32
|
-
const isRouteActive = (0,
|
|
33
|
-
const routeResolver = (0,
|
|
34
|
+
const isRouteActive = (0, hooks_2.useIsRouteActive)();
|
|
35
|
+
const routeResolver = (0, hooks_2.useRouteResolver)();
|
|
34
36
|
const sections = (0, react_1.useMemo)(() => (0, utils_1.transformNavSections)({
|
|
35
37
|
navItems: app.navItems,
|
|
36
38
|
schemaMetadataDic,
|
|
@@ -46,7 +48,7 @@ const NavigationContainer = ({ open, type, onOpenChange, isMini, }) => {
|
|
|
46
48
|
isRouteActive,
|
|
47
49
|
pathname,
|
|
48
50
|
]);
|
|
49
|
-
const handleNavigation = (item) => {
|
|
51
|
+
const handleNavigation = async (item) => {
|
|
50
52
|
if (type === 'overlay') {
|
|
51
53
|
onOpenChange(false);
|
|
52
54
|
}
|
|
@@ -54,22 +56,29 @@ const NavigationContainer = ({ open, type, onOpenChange, isMini, }) => {
|
|
|
54
56
|
window.open(item.link, '_blank');
|
|
55
57
|
}
|
|
56
58
|
else {
|
|
57
|
-
router.push(item.link);
|
|
59
|
+
await router.push(item.link);
|
|
58
60
|
}
|
|
59
61
|
};
|
|
60
|
-
return ((0, jsx_runtime_1.jsx)("div", { className: styles.root, children: (0, jsx_runtime_1.
|
|
62
|
+
return ((0, jsx_runtime_1.jsx)("div", { className: styles.root, children: (0, jsx_runtime_1.jsxs)(react_components_1.NavDrawer, { selectedValue: "active", selectedCategoryValue: "active", defaultOpenCategories: ['active'], open: open || isMini, type: type, onOpenChange: (_value, data) => onOpenChange(data.open), onNavItemSelect: () => {
|
|
61
63
|
// do nothing
|
|
62
|
-
}, style: { width: isMini ? 60 : undefined }, children: (0, jsx_runtime_1.jsx)(react_components_1.
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
64
|
+
}, style: { width: isMini ? 60 : undefined }, children: [isMobile && ((0, jsx_runtime_1.jsx)(react_components_1.NavDrawerHeader, { style: { padding: 0 }, children: (0, jsx_runtime_1.jsx)("div", { style: {
|
|
65
|
+
display: 'flex',
|
|
66
|
+
alignItems: 'center',
|
|
67
|
+
height: 50,
|
|
68
|
+
minHeight: 50,
|
|
69
|
+
paddingInline: 12,
|
|
70
|
+
gap: 8,
|
|
71
|
+
}, children: (0, jsx_runtime_1.jsx)(react_components_1.Hamburger, { onClick: () => onOpenChange(false) }) }) })), (0, jsx_runtime_1.jsx)(react_components_1.NavDrawerBody, { style: {
|
|
72
|
+
paddingTop: 8,
|
|
73
|
+
}, children: sections.map((section, index) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [!section.hideLabel && !isMini && ((0, jsx_runtime_1.jsx)(react_components_1.NavSectionHeader, { children: section.label })), isMini && index > 0 && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_components_1.Divider, { style: { opacity: 0.5 } }) })), section.items.map((item) => {
|
|
74
|
+
if (item.type === app_2.PageType.Category) {
|
|
75
|
+
const isActive = item.items.some((subItem) => subItem.active);
|
|
76
|
+
if (isMini) {
|
|
77
|
+
return ((0, jsx_runtime_1.jsx)(NavMiniCategoryMenu_1.NavMiniCategoryMenu, { isActive: isActive, item: item, onSelect: handleNavigation }, item.key));
|
|
78
|
+
}
|
|
79
|
+
return ((0, jsx_runtime_1.jsxs)(react_components_1.NavCategory, { value: isActive ? 'active' : '', children: [(0, jsx_runtime_1.jsx)(NavCategoryItemComponent_1.NavCategoryItemComponent, { item: item, isActive: isActive }), (0, jsx_runtime_1.jsx)(react_components_1.NavSubItemGroup, { children: item.items.map((subItem) => ((0, jsx_runtime_1.jsx)(NavSubItemComponent_1.NavSubItemComponent, { item: subItem, onClick: handleNavigation }, subItem.key))) })] }, item.key));
|
|
69
80
|
}
|
|
70
|
-
return ((0, jsx_runtime_1.
|
|
71
|
-
}
|
|
72
|
-
return ((0, jsx_runtime_1.jsx)(NavItemComponent_1.NavItemComponent, { item: item, onClick: handleNavigation, isMini: isMini }, item.key));
|
|
73
|
-
})] }, section.label))) }) }) }));
|
|
81
|
+
return ((0, jsx_runtime_1.jsx)(NavItemComponent_1.NavItemComponent, { item: item, onClick: handleNavigation, isMini: isMini }, item.key));
|
|
82
|
+
})] }, section.label))) })] }) }));
|
|
74
83
|
};
|
|
75
84
|
exports.NavigationContainer = NavigationContainer;
|
package/App/QuickActionItem.js
CHANGED
|
@@ -32,7 +32,7 @@ const QuickActionItem = ({ label, Icon, onClick, link, badgeCount, badgeColor =
|
|
|
32
32
|
position: 'relative',
|
|
33
33
|
fontWeight: react_components_1.tokens.fontWeightRegular,
|
|
34
34
|
minWidth: 'unset',
|
|
35
|
-
}, as: "a", href: fullLink, title: label, className: styles.root, onClick: (event) => {
|
|
35
|
+
}, as: "a", href: fullLink, title: label, "aria-label": label, className: styles.root, onClick: (event) => {
|
|
36
36
|
event.preventDefault();
|
|
37
37
|
if (fullLink) {
|
|
38
38
|
router.push(fullLink);
|
|
@@ -9,11 +9,12 @@ const react_components_1 = require("@fluentui/react-components");
|
|
|
9
9
|
const datagrid_1 = require("@headless-adminapp/app/datagrid");
|
|
10
10
|
const constants_1 = require("@headless-adminapp/app/datagrid/column-filter/constants");
|
|
11
11
|
const react_1 = require("react");
|
|
12
|
+
const DrawerFooter_1 = require("../../components/DrawerFooter");
|
|
13
|
+
const DrawerHeader_1 = require("../../components/DrawerHeader");
|
|
12
14
|
const SectionControl_1 = require("../../DataForm/SectionControl");
|
|
13
15
|
const SelectControl_1 = __importDefault(require("../../form/controls/SelectControl"));
|
|
14
16
|
const utils_1 = require("../GridColumnHeader/utils");
|
|
15
17
|
const ColumnFilterItem_1 = require("./ColumnFilterItem");
|
|
16
|
-
const Header_1 = require("./Header");
|
|
17
18
|
const CustomFilter = ({ open, onClose }) => {
|
|
18
19
|
return ((0, jsx_runtime_1.jsx)(react_components_1.Drawer, { open: open, position: "end", size: "small", style: { borderLeftWidth: 0 }, children: (0, jsx_runtime_1.jsx)(DrawerContent, { onClose: onClose }) }));
|
|
19
20
|
};
|
|
@@ -79,7 +80,7 @@ const DrawerContent = ({ onClose }) => {
|
|
|
79
80
|
setSortingInternal(sorting);
|
|
80
81
|
onClose();
|
|
81
82
|
};
|
|
82
|
-
return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(
|
|
83
|
+
return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(DrawerHeader_1.DrawerHeader, { title: "Sort and Filter", onClose: handleCancel, showCloseButton: true }), (0, jsx_runtime_1.jsx)(react_components_1.DrawerBody, { style: { padding: react_components_1.tokens.spacingHorizontalM }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
|
|
83
84
|
display: 'flex',
|
|
84
85
|
flexDirection: 'column',
|
|
85
86
|
gap: react_components_1.tokens.spacingVerticalM,
|
|
@@ -134,8 +135,5 @@ const DrawerContent = ({ onClose }) => {
|
|
|
134
135
|
if (!value)
|
|
135
136
|
return;
|
|
136
137
|
handleAddFilter(value);
|
|
137
|
-
}, options: attributeOptions.filter((x) => !columnFiltersInternal[x.value]) }) })] }) }), (0, jsx_runtime_1.jsxs)(
|
|
138
|
-
padding: react_components_1.tokens.spacingHorizontalM,
|
|
139
|
-
gap: react_components_1.tokens.spacingHorizontalM,
|
|
140
|
-
}, children: [(0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "primary", disabled: !isValid, onClick: handleApply, children: "Apply" }), (0, jsx_runtime_1.jsx)(react_components_1.Button, { onClick: handleCancel, children: "Cancel" })] })] }));
|
|
138
|
+
}, options: attributeOptions.filter((x) => !columnFiltersInternal[x.value]) }) })] }) }), (0, jsx_runtime_1.jsxs)(DrawerFooter_1.DrawerFooter, { children: [(0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "primary", disabled: !isValid, onClick: handleApply, children: "Apply" }), (0, jsx_runtime_1.jsx)(react_components_1.Button, { onClick: handleCancel, children: "Cancel" })] })] }));
|
|
141
139
|
};
|
|
@@ -11,6 +11,8 @@ const hooks_2 = require("@headless-adminapp/app/metadata/hooks");
|
|
|
11
11
|
const icons_1 = require("@headless-adminapp/icons");
|
|
12
12
|
const react_1 = require("react");
|
|
13
13
|
const AppStringContext_1 = require("../../App/AppStringContext");
|
|
14
|
+
const DrawerFooter_1 = require("../../components/DrawerFooter");
|
|
15
|
+
const DrawerHeader_1 = require("../../components/DrawerHeader");
|
|
14
16
|
const PageEntityViewStringContext_1 = require("../../PageEntityView/PageEntityViewStringContext");
|
|
15
17
|
function AddColumns({ onColumnAdd, onColumnRemove, columns, opened, onClose, }) {
|
|
16
18
|
const schema = (0, hooks_1.useDataGridSchema)();
|
|
@@ -60,18 +62,18 @@ function AddColumns({ onColumnAdd, onColumnRemove, columns, opened, onClose, })
|
|
|
60
62
|
acc[column.id] = true;
|
|
61
63
|
return acc;
|
|
62
64
|
}, {});
|
|
63
|
-
return ((0, jsx_runtime_1.jsxs)(react_components_1.Drawer, { separator: true, open: opened, position: "end", children: [(0, jsx_runtime_1.jsx)(
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
65
|
+
return ((0, jsx_runtime_1.jsxs)(react_components_1.Drawer, { separator: true, open: opened, position: "end", children: [(0, jsx_runtime_1.jsx)(DrawerHeader_1.DrawerHeader, { title: strings.addColumns, showCloseButton: true, onClose: onClose, bottomContent: (0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { style: {
|
|
66
|
+
display: 'flex',
|
|
67
|
+
flexDirection: 'column-reverse',
|
|
68
|
+
gap: 8,
|
|
69
|
+
marginBlock: react_components_1.tokens.spacingVerticalS,
|
|
70
|
+
paddingInline: react_components_1.tokens.spacingHorizontalS,
|
|
71
|
+
}, children: [(0, jsx_runtime_1.jsx)(react_components_1.Input, { contentBefore: (0, jsx_runtime_1.jsx)(icons_1.Icons.Search, { size: 16 }), placeholder: appStrings.searchPlaceholder, value: searchText, onChange: (e) => setSearchText(e.target.value) }), (0, jsx_runtime_1.jsx)(react_components_1.Dropdown, { value: selectedGroupItem?.label ?? '', selectedOptions: selectedGroupItem ? [String(selectedGroupItem.key)] : [], onOptionSelect: (event, data) => {
|
|
72
|
+
setSelectedGroup(data.optionValue);
|
|
73
|
+
}, style: { flex: 1, minWidth: 'unset' }, positioning: {
|
|
74
|
+
align: 'bottom',
|
|
75
|
+
position: 'below',
|
|
76
|
+
}, children: tableItems.map((x) => ((0, jsx_runtime_1.jsx)(react_components_1.Option, { value: x.key, children: x.label }, x.key))) })] }), (0, jsx_runtime_1.jsx)(react_components_1.Divider, {})] }) }), (0, jsx_runtime_1.jsx)(react_components_1.DrawerBody, { style: { paddingInline: 0 }, children: filteredColumns.map((column) => ((0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "transparent", icon: (0, jsx_runtime_1.jsx)(react_components_1.Checkbox, { checked: includedColumnsObj[column.id] ?? false }), style: {
|
|
75
77
|
fontWeight: react_components_1.tokens.fontSizeBase400,
|
|
76
78
|
width: '100%',
|
|
77
79
|
justifyContent: 'flex-start',
|
|
@@ -83,10 +85,5 @@ function AddColumns({ onColumnAdd, onColumnRemove, columns, opened, onClose, })
|
|
|
83
85
|
else {
|
|
84
86
|
onColumnAdd(column);
|
|
85
87
|
}
|
|
86
|
-
}, children: column.label }, column.id))) }), (0, jsx_runtime_1.
|
|
87
|
-
display: 'flex',
|
|
88
|
-
padding: 8,
|
|
89
|
-
gap: 8,
|
|
90
|
-
justifyContent: 'flex-end',
|
|
91
|
-
}, children: (0, jsx_runtime_1.jsx)(react_components_1.Button, { onClick: onClose, children: strings.close }) })] })] }));
|
|
88
|
+
}, children: column.label }, column.id))) }), (0, jsx_runtime_1.jsx)(DrawerFooter_1.DrawerFooter, { children: (0, jsx_runtime_1.jsx)(react_components_1.Button, { onClick: onClose, children: strings.close }) })] }));
|
|
92
89
|
}
|
|
@@ -12,7 +12,11 @@ const mutable_1 = require("@headless-adminapp/app/mutable");
|
|
|
12
12
|
const icons_1 = require("@headless-adminapp/icons");
|
|
13
13
|
const immutability_helper_1 = __importDefault(require("immutability-helper"));
|
|
14
14
|
const react_1 = require("react");
|
|
15
|
+
const Button_1 = require("../../CommandBar/Button");
|
|
16
|
+
const Wrapper_1 = require("../../CommandBar/Wrapper");
|
|
15
17
|
const DndProvider_1 = require("../../components/DndProvider");
|
|
18
|
+
const DrawerFooter_1 = require("../../components/DrawerFooter");
|
|
19
|
+
const DrawerHeader_1 = require("../../components/DrawerHeader");
|
|
16
20
|
const PageEntityViewStringContext_1 = require("../../PageEntityView/PageEntityViewStringContext");
|
|
17
21
|
const AddColumns_1 = require("./AddColumns");
|
|
18
22
|
const ColumnItem_1 = require("./ColumnItem");
|
|
@@ -44,34 +48,21 @@ function CustomizeColumns({ onClose, opened }) {
|
|
|
44
48
|
const onColumnRemove = (0, react_1.useCallback)((column) => {
|
|
45
49
|
setItems((prev) => prev.filter((x) => x.id !== column.id));
|
|
46
50
|
}, []);
|
|
47
|
-
return ((0, jsx_runtime_1.jsxs)(react_components_1.Drawer, { separator: true, open: opened, position: "end", size: "small", children: [(0, jsx_runtime_1.jsx)(
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
}, children: items.map((item, index) => ((0, jsx_runtime_1.jsx)(ColumnItem_1.ColumnItem, { index: index, item: item, moveItem: moveItem, isFirst: index === 0, isLast: index === items.length - 1, onRemove: () => onColumnRemove(item), stringSet: strings }, item.id))) }) }) }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', width: '100%' }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Divider, {}), (0, jsx_runtime_1.jsxs)("div", { style: {
|
|
65
|
-
display: 'flex',
|
|
66
|
-
padding: 8,
|
|
67
|
-
gap: 8,
|
|
68
|
-
justifyContent: 'flex-end',
|
|
69
|
-
}, children: [(0, jsx_runtime_1.jsx)(react_components_1.Button, { onClick: () => {
|
|
70
|
-
setContextValue({
|
|
71
|
-
columns: items,
|
|
72
|
-
});
|
|
73
|
-
onClose();
|
|
74
|
-
}, appearance: "primary", children: strings.apply }), (0, jsx_runtime_1.jsx)(react_components_1.Button, { onClick: () => {
|
|
75
|
-
onClose();
|
|
76
|
-
}, children: strings.cancel })] })] })] }));
|
|
51
|
+
return ((0, jsx_runtime_1.jsxs)(react_components_1.Drawer, { separator: true, open: opened, position: "end", size: "small", children: [(0, jsx_runtime_1.jsx)(DrawerHeader_1.DrawerHeader, { title: strings.editColumns, showCloseButton: true, onClose: onClose }), (0, jsx_runtime_1.jsxs)(react_components_1.DrawerBody, { style: { paddingInline: react_components_1.tokens.spacingHorizontalM }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { marginInline: -8, marginTop: 8 }, children: [(0, jsx_runtime_1.jsxs)(Wrapper_1.CommandBarWrapper, { children: [(0, jsx_runtime_1.jsx)(Button_1.CommandButton, { Icon: icons_1.Icons.Add, text: strings.add, onClick: () => setShowAddColumns(true) }), (0, jsx_runtime_1.jsx)(Button_1.CommandButton, { Icon: icons_1.Icons.Edit, text: strings.reset, disabled: !isDirty, onClick: () => {
|
|
52
|
+
setItems(columns);
|
|
53
|
+
} })] }), (0, jsx_runtime_1.jsx)(AddColumns_1.AddColumns, { onColumnAdd: onColumnAdd, onColumnRemove: onColumnRemove, columns: items, opened: showAddColumns, onClose: () => setShowAddColumns(false) })] }), (0, jsx_runtime_1.jsx)(DndProvider_1.DndProvider, { children: (0, jsx_runtime_1.jsx)("div", { style: {
|
|
54
|
+
display: 'flex',
|
|
55
|
+
flexDirection: 'column',
|
|
56
|
+
width: '100%',
|
|
57
|
+
gap: react_components_1.tokens.spacingVerticalS,
|
|
58
|
+
// padding: tokens.spacingHorizontalS,
|
|
59
|
+
paddingBlock: react_components_1.tokens.spacingVerticalS,
|
|
60
|
+
}, children: items.map((item, index) => ((0, jsx_runtime_1.jsx)(ColumnItem_1.ColumnItem, { index: index, item: item, moveItem: moveItem, isFirst: index === 0, isLast: index === items.length - 1, onRemove: () => onColumnRemove(item), stringSet: strings }, item.id))) }) })] }), (0, jsx_runtime_1.jsxs)(DrawerFooter_1.DrawerFooter, { children: [(0, jsx_runtime_1.jsx)(react_components_1.Button, { onClick: () => {
|
|
61
|
+
setContextValue({
|
|
62
|
+
columns: items,
|
|
63
|
+
});
|
|
64
|
+
onClose();
|
|
65
|
+
}, appearance: "primary", children: strings.apply }), (0, jsx_runtime_1.jsx)(react_components_1.Button, { onClick: () => {
|
|
66
|
+
onClose();
|
|
67
|
+
}, children: strings.cancel })] })] }));
|
|
77
68
|
}
|
|
@@ -61,7 +61,7 @@ const CardUi = ({ schema, control, formControl, onAddRow, onRemoveRow, rows, ali
|
|
|
61
61
|
}, children: (0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: `${alias}.${index}.${attributeName}`, control: formControl, render: ({ field, fieldState, formState }) => {
|
|
62
62
|
const isError = (fieldState.isTouched || formState.isSubmitted) &&
|
|
63
63
|
!!fieldState.error?.message;
|
|
64
|
-
return ((0, jsx_runtime_1.jsx)(SectionControl_1.SectionControlWrapper, { label: attribute.label, labelPosition: "top", isError: isError, children: (0, jsx_runtime_1.jsx)(StandardControl_1.StandardControl, { attribute: attribute, name: attributeName, value: field.value ?? null, readOnly: isControlReadonly, onChange: (value) => {
|
|
64
|
+
return ((0, jsx_runtime_1.jsx)(SectionControl_1.SectionControlWrapper, { label: attribute.label, labelPosition: "top", isError: isError, required: attribute.required, children: (0, jsx_runtime_1.jsx)(StandardControl_1.StandardControl, { attribute: attribute, name: attributeName, value: field.value ?? null, readOnly: isControlReadonly, onChange: (value) => {
|
|
65
65
|
const previousValue = field.value;
|
|
66
66
|
field.onChange(value);
|
|
67
67
|
eventManager.emit(constants_1.EVENT_KEY_ON_FIELD_CHANGE, field.name, value, previousValue);
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.DrawerFooter = void 0;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const react_components_1 = require("@fluentui/react-components");
|
|
6
|
+
const DrawerFooter = ({ children, justify, }) => {
|
|
7
|
+
return ((0, jsx_runtime_1.jsx)(react_components_1.DrawerFooter, { style: {
|
|
8
|
+
padding: react_components_1.tokens.spacingHorizontalM,
|
|
9
|
+
gap: react_components_1.tokens.spacingHorizontalM,
|
|
10
|
+
background: react_components_1.tokens.colorNeutralBackground2,
|
|
11
|
+
justifyContent: justify,
|
|
12
|
+
}, children: children }));
|
|
13
|
+
};
|
|
14
|
+
exports.DrawerFooter = DrawerFooter;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
interface DrawerHeaderProps {
|
|
3
|
+
title: string;
|
|
4
|
+
onClose?: () => void;
|
|
5
|
+
showCloseButton: boolean;
|
|
6
|
+
rightContent?: React.ReactNode;
|
|
7
|
+
bottomContent?: React.ReactNode;
|
|
8
|
+
}
|
|
9
|
+
export declare const DrawerHeader: FC<DrawerHeaderProps>;
|
|
10
|
+
export {};
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.DrawerHeader = void 0;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const react_components_1 = require("@fluentui/react-components");
|
|
6
|
+
const icons_1 = require("@headless-adminapp/icons");
|
|
7
|
+
const QuickActionItem_1 = require("../App/QuickActionItem");
|
|
8
|
+
const DrawerHeader = ({ title, onClose, showCloseButton, rightContent, bottomContent, }) => {
|
|
9
|
+
return ((0, jsx_runtime_1.jsx)(react_components_1.DrawerHeader, { style: { padding: 0 }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
|
|
10
|
+
display: 'flex',
|
|
11
|
+
flexDirection: 'column',
|
|
12
|
+
}, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
|
|
13
|
+
display: 'flex',
|
|
14
|
+
alignItems: 'center',
|
|
15
|
+
height: 50,
|
|
16
|
+
minHeight: 50,
|
|
17
|
+
background: react_components_1.tokens.colorNeutralBackground3,
|
|
18
|
+
paddingInline: 8,
|
|
19
|
+
gap: 8,
|
|
20
|
+
}, children: [(0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flex: 1, alignItems: 'center', gap: 8 }, children: (0, jsx_runtime_1.jsx)(react_components_1.Subtitle2, { style: { paddingLeft: 4 }, children: title }) }), rightContent, showCloseButton && ((0, jsx_runtime_1.jsx)(QuickActionItem_1.QuickActionItem, { Icon: icons_1.Icons.Close, label: "Close", onClick: onClose }))] }), bottomContent] }) }));
|
|
21
|
+
};
|
|
22
|
+
exports.DrawerHeader = DrawerHeader;
|
|
@@ -55,13 +55,13 @@ const LookupControlMd = ({ value, onChange, id, name, onBlur, onFocus, placehold
|
|
|
55
55
|
id: value.id,
|
|
56
56
|
});
|
|
57
57
|
}, [allowNavigation, routeResolver, schema.logicalName, value]);
|
|
58
|
-
const handleOpenRecord = (0, react_1.useCallback)((event) => {
|
|
58
|
+
const handleOpenRecord = (0, react_1.useCallback)(async (event) => {
|
|
59
59
|
event.preventDefault();
|
|
60
60
|
event.stopPropagation();
|
|
61
61
|
if (!path) {
|
|
62
62
|
return;
|
|
63
63
|
}
|
|
64
|
-
router.push(path);
|
|
64
|
+
await router.push(path);
|
|
65
65
|
}, [path, router]);
|
|
66
66
|
(0, react_1.useEffect)(() => {
|
|
67
67
|
if (open)
|
|
@@ -118,8 +118,8 @@ const LookupControlMd = ({ value, onChange, id, name, onBlur, onFocus, placehold
|
|
|
118
118
|
}, disableAutoFocus: true, onBlur: onBlur, onFocus: onFocus, id: id, autoFocus: autoFocus, children: [data?.records.map((item) => ((0, jsx_runtime_1.jsx)(react_components_1.Option, { value: item[schema.idAttribute], className: (0, react_components_1.mergeClasses)(styles.option), text: item[schema.primaryAttribute], children: view?.experience.card ? ((0, jsx_runtime_1.jsx)(RecordCard_1.RecordCard, { cardView: view.experience.card, record: item, schema: schema })) : item[schema.primaryAttribute] }, item[schema.idAttribute]))), !isLoading && !data?.records.length && ((0, jsx_runtime_1.jsx)("div", { style: {
|
|
119
119
|
paddingInline: react_components_1.tokens.spacingHorizontalL,
|
|
120
120
|
paddingBlock: react_components_1.tokens.spacingVerticalS,
|
|
121
|
-
}, children: (0, jsx_runtime_1.jsx)(react_components_1.Body1, { children: lookupStrings.noRecordsFound }) })), allowNewRecord && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_components_1.Divider, {}), (0, jsx_runtime_1.jsx)("div", { style: { marginTop: react_components_1.tokens.spacingVerticalXXS }, children: (0, jsx_runtime_1.jsx)(react_components_1.ToolbarButton, { style: { fontWeight: 'normal' }, icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Add, {}), onClick: () => {
|
|
122
|
-
router.push(routeResolver({
|
|
121
|
+
}, children: (0, jsx_runtime_1.jsx)(react_components_1.Body1, { children: lookupStrings.noRecordsFound }) })), allowNewRecord && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_components_1.Divider, {}), (0, jsx_runtime_1.jsx)("div", { style: { marginTop: react_components_1.tokens.spacingVerticalXXS }, children: (0, jsx_runtime_1.jsx)(react_components_1.ToolbarButton, { style: { fontWeight: 'normal' }, icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Add, {}), onClick: async () => {
|
|
122
|
+
await router.push(routeResolver({
|
|
123
123
|
logicalName: schema.logicalName,
|
|
124
124
|
type: app_2.PageType.EntityForm,
|
|
125
125
|
}));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@headless-adminapp/fluent",
|
|
3
|
-
"version": "1.4.
|
|
3
|
+
"version": "1.4.21",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"types": "index.d.ts",
|
|
@@ -51,5 +51,5 @@
|
|
|
51
51
|
"uuid": "11.0.3",
|
|
52
52
|
"yup": "^1.4.0"
|
|
53
53
|
},
|
|
54
|
-
"gitHead": "
|
|
54
|
+
"gitHead": "2a993d2eb239ff24ffd73df81aba26240aaf1b2f"
|
|
55
55
|
}
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.Header = void 0;
|
|
4
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
-
const react_components_1 = require("@fluentui/react-components");
|
|
6
|
-
const icons_1 = require("@headless-adminapp/icons");
|
|
7
|
-
const QuickActionItem_1 = require("../../App/QuickActionItem");
|
|
8
|
-
const Header = ({ onClose }) => {
|
|
9
|
-
return ((0, jsx_runtime_1.jsx)(react_components_1.DrawerHeader, { style: { padding: 0 }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
|
|
10
|
-
display: 'flex',
|
|
11
|
-
alignItems: 'center',
|
|
12
|
-
height: 50,
|
|
13
|
-
minHeight: 50,
|
|
14
|
-
background: react_components_1.tokens.colorNeutralBackground3,
|
|
15
|
-
paddingInline: 8,
|
|
16
|
-
gap: 8,
|
|
17
|
-
}, children: [(0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flex: 1, alignItems: 'center', gap: 8 }, children: (0, jsx_runtime_1.jsx)(react_components_1.Subtitle2, { style: { paddingLeft: 4 }, children: "Sort and Filter" }) }), (0, jsx_runtime_1.jsx)(QuickActionItem_1.QuickActionItem, { Icon: icons_1.Icons.Close, label: "Close", onClick: onClose })] }) }));
|
|
18
|
-
};
|
|
19
|
-
exports.Header = Header;
|