@headless-adminapp/fluent 0.0.17-alpha.44 → 0.0.17-alpha.45
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.
|
@@ -18,6 +18,7 @@ const FormTab_1 = require("../form/layout/FormTab");
|
|
|
18
18
|
const CommandContainer_1 = require("./CommandContainer");
|
|
19
19
|
const FormTabRelated_1 = require("./FormTabRelated");
|
|
20
20
|
const PageEntityFormStringContext_1 = require("./PageEntityFormStringContext");
|
|
21
|
+
const ProcessFlow_1 = require("./ProcessFlow");
|
|
21
22
|
const RelatedViewSelector_1 = require("./RelatedViewSelector");
|
|
22
23
|
const SectionContainer_1 = require("./SectionContainer");
|
|
23
24
|
const PageEntityFormDesktopContainer = () => {
|
|
@@ -30,6 +31,7 @@ const PageEntityFormDesktopContainer = () => {
|
|
|
30
31
|
const { language } = (0, locale_1.useLocale)();
|
|
31
32
|
const schema = (0, hooks_1.useDataFormSchema)();
|
|
32
33
|
const formConfig = (0, hooks_1.useSelectedForm)();
|
|
34
|
+
const processFlowSteps = (0, hooks_1.useProcessFlowSteps)();
|
|
33
35
|
const setActiveTab = (0, mutable_1.useContextValueSetter)(dataform_1.DataFormContext, (setValue) => (value) => {
|
|
34
36
|
setValue((state) => (Object.assign(Object.assign({}, state), { activeTab: value })));
|
|
35
37
|
});
|
|
@@ -100,20 +102,9 @@ const PageEntityFormDesktopContainer = () => {
|
|
|
100
102
|
} })), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Body1, { style: { color: react_components_1.tokens.colorNeutralForeground4 }, children: attribute.label }), (0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { control: formInstance.control, name: controlName, render: ({ field }) => {
|
|
101
103
|
return ((0, jsx_runtime_1.jsx)(react_components_1.Body1, { children: (0, utils_2.getAttributeFormattedValue)(attribute, field.value) }));
|
|
102
104
|
} })] })] }, controlName));
|
|
103
|
-
}) })] }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', paddingBottom: react_components_1.tokens.spacingVerticalS }, children: [(0, jsx_runtime_1.jsxs)(react_components_1.TabList, { selectedValue: activeTab, onTabSelect: (e, value) => setActiveTab(value.value), children: [formConfig.experience.tabs.map((tab) => ((0, jsx_runtime_1.jsx)(react_components_1.Tab, { value: tab.name, children: (0, utils_1.localizedLabel)(language, tab) }, tab.name))), !!selectedRelatedItem && ((0, jsx_runtime_1.jsx)(react_components_1.Tab, { value: "related", children: (_c = (_b = selectedRelatedItem.localizedPluralLabels) === null || _b === void 0 ? void 0 : _b[language]) !== null && _c !== void 0 ? _c : selectedRelatedItem.pluralLabel }))] }), (0, jsx_runtime_1.jsx)(RelatedViewSelector_1.RelatedViewSelector, { onSelect: (item) => {
|
|
105
|
+
}) })] }), !!(processFlowSteps === null || processFlowSteps === void 0 ? void 0 : processFlowSteps.length) && ((0, jsx_runtime_1.jsx)(ProcessFlow_1.ProcessFlow, { height: 28, rounded: false, items: processFlowSteps })), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', paddingBottom: react_components_1.tokens.spacingVerticalS }, children: [(0, jsx_runtime_1.jsxs)(react_components_1.TabList, { selectedValue: activeTab, onTabSelect: (e, value) => setActiveTab(value.value), children: [formConfig.experience.tabs.map((tab) => ((0, jsx_runtime_1.jsx)(react_components_1.Tab, { value: tab.name, children: (0, utils_1.localizedLabel)(language, tab) }, tab.name))), !!selectedRelatedItem && ((0, jsx_runtime_1.jsx)(react_components_1.Tab, { value: "related", children: (_c = (_b = selectedRelatedItem.localizedPluralLabels) === null || _b === void 0 ? void 0 : _b[language]) !== null && _c !== void 0 ? _c : selectedRelatedItem.pluralLabel }))] }), (0, jsx_runtime_1.jsx)(RelatedViewSelector_1.RelatedViewSelector, { onSelect: (item) => {
|
|
104
106
|
setSelectedRelatedItem(item);
|
|
105
107
|
setActiveTab('related');
|
|
106
108
|
} })] })] })] }), (0, jsx_runtime_1.jsxs)(FormBody_1.FormBody, { children: [formConfig.experience.tabs.map((tab) => ((0, jsx_runtime_1.jsx)(FormTab_1.FormTab, { value: tab.name, columnCount: tab.columnCount, columnWidths: tab.columnWidths, children: tab.tabColumns.map((tabColumn, index) => ((0, jsx_runtime_1.jsx)(FormTab_1.FormTab.Column, { children: tabColumn.sections.map((section) => ((0, jsx_runtime_1.jsx)(SectionContainer_1.SectionContainer, { section: section, readOnly: false }, section.name))) }, index))) }, tab.name))), (0, jsx_runtime_1.jsx)(FormTabRelated_1.FormTabRelated, { selectedRelatedItem: selectedRelatedItem })] })] }));
|
|
107
|
-
// return (
|
|
108
|
-
// <Fragment>
|
|
109
|
-
// <PageEntityViewDesktopFrame
|
|
110
|
-
// commandBar={<CommandContainer />}
|
|
111
|
-
// header={<GridHeaderContainer />}
|
|
112
|
-
// content={<GridTableContainer />}
|
|
113
|
-
// footer={<GridPaginationContainer />}
|
|
114
|
-
// />
|
|
115
|
-
// {/* <CustomizeColumnsContainer /> */}
|
|
116
|
-
// </Fragment>
|
|
117
|
-
// );
|
|
118
109
|
};
|
|
119
110
|
exports.PageEntityFormDesktopContainer = PageEntityFormDesktopContainer;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
interface ProcessFlowProps {
|
|
2
|
+
height?: number;
|
|
3
|
+
rounded?: boolean;
|
|
4
|
+
items: Array<{
|
|
5
|
+
label: string;
|
|
6
|
+
isActivated?: boolean;
|
|
7
|
+
}>;
|
|
8
|
+
}
|
|
9
|
+
export declare function ProcessFlow({ height, rounded, items, }: ProcessFlowProps): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export {};
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.ProcessFlow = ProcessFlow;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const react_components_1 = require("@fluentui/react-components");
|
|
6
|
+
function ProcessFlow({ height = 32, rounded = true, items, }) {
|
|
7
|
+
return ((0, jsx_runtime_1.jsx)("div", { style: { position: 'relative', height }, children: (0, jsx_runtime_1.jsx)("div", { style: {
|
|
8
|
+
display: 'flex',
|
|
9
|
+
overflow: 'hidden',
|
|
10
|
+
borderRadius: rounded ? react_components_1.tokens.borderRadiusMedium : 0,
|
|
11
|
+
}, children: items.map((item, index) => ((0, jsx_runtime_1.jsx)(ProcessFlowItem, { height: height, label: item.label, isActivated: item.isActivated, isFirst: index === 0, isLast: index === items.length - 1 }, index))) }) }));
|
|
12
|
+
}
|
|
13
|
+
const ProcessFlowItem = ({ label, height, isActivated, isFirst, isLast, }) => {
|
|
14
|
+
const backgroundColor = isActivated
|
|
15
|
+
? react_components_1.tokens.colorBrandBackground
|
|
16
|
+
: react_components_1.tokens.colorNeutralStrokeDisabled;
|
|
17
|
+
return ((0, jsx_runtime_1.jsxs)("div", { style: {
|
|
18
|
+
flex: 1,
|
|
19
|
+
position: 'relative',
|
|
20
|
+
display: 'flex',
|
|
21
|
+
alignItems: 'center',
|
|
22
|
+
justifyContent: 'center',
|
|
23
|
+
height,
|
|
24
|
+
}, children: [(0, jsx_runtime_1.jsxs)("div", { style: { zIndex: 1 }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
|
|
25
|
+
position: 'absolute',
|
|
26
|
+
left: 20,
|
|
27
|
+
right: 20,
|
|
28
|
+
top: 0,
|
|
29
|
+
height: '100%',
|
|
30
|
+
backgroundColor: backgroundColor,
|
|
31
|
+
} }), (0, jsx_runtime_1.jsx)("div", { style: {
|
|
32
|
+
position: 'absolute',
|
|
33
|
+
left: 0,
|
|
34
|
+
top: 0,
|
|
35
|
+
width: 40,
|
|
36
|
+
height: '50%',
|
|
37
|
+
backgroundColor: backgroundColor,
|
|
38
|
+
transform: isFirst ? 'skewX(0deg)' : 'skewX(30deg)',
|
|
39
|
+
borderLeft: isFirst
|
|
40
|
+
? 'none'
|
|
41
|
+
: `1px solid ${react_components_1.tokens.colorNeutralBackground1}`,
|
|
42
|
+
} }), (0, jsx_runtime_1.jsx)("div", { style: {
|
|
43
|
+
position: 'absolute',
|
|
44
|
+
right: 0,
|
|
45
|
+
top: 0,
|
|
46
|
+
width: 40,
|
|
47
|
+
height: '50%',
|
|
48
|
+
backgroundColor: backgroundColor,
|
|
49
|
+
transform: isLast ? 'skewX(0deg)' : 'skewX(30deg)',
|
|
50
|
+
borderRight: isLast
|
|
51
|
+
? 'none'
|
|
52
|
+
: `1px solid ${react_components_1.tokens.colorNeutralBackground1}`,
|
|
53
|
+
} }), (0, jsx_runtime_1.jsx)("div", { style: {
|
|
54
|
+
position: 'absolute',
|
|
55
|
+
left: 0,
|
|
56
|
+
top: '50%',
|
|
57
|
+
width: 40,
|
|
58
|
+
height: '50%',
|
|
59
|
+
backgroundColor: backgroundColor,
|
|
60
|
+
transform: isFirst ? 'skewX(0deg)' : 'skewX(-30deg)',
|
|
61
|
+
borderLeft: isFirst
|
|
62
|
+
? 'none'
|
|
63
|
+
: `1px solid ${react_components_1.tokens.colorNeutralBackground1}`,
|
|
64
|
+
} }), (0, jsx_runtime_1.jsx)("div", { style: {
|
|
65
|
+
position: 'absolute',
|
|
66
|
+
right: 0,
|
|
67
|
+
top: '50%',
|
|
68
|
+
width: 40,
|
|
69
|
+
height: '50%',
|
|
70
|
+
backgroundColor: backgroundColor,
|
|
71
|
+
transform: isLast ? 'skewX(0deg)' : 'skewX(-30deg)',
|
|
72
|
+
borderRight: isLast
|
|
73
|
+
? 'none'
|
|
74
|
+
: `1px solid ${react_components_1.tokens.colorNeutralBackground1}`,
|
|
75
|
+
} })] }), (0, jsx_runtime_1.jsx)("div", { style: {
|
|
76
|
+
display: 'flex',
|
|
77
|
+
flexDirection: 'column',
|
|
78
|
+
flex: 1,
|
|
79
|
+
alignItems: 'center',
|
|
80
|
+
gap: react_components_1.tokens.spacingVerticalS,
|
|
81
|
+
color: isActivated ? 'white' : undefined,
|
|
82
|
+
zIndex: 2,
|
|
83
|
+
}, children: (0, jsx_runtime_1.jsx)(react_components_1.Caption1, { children: label }) })] }));
|
|
84
|
+
};
|
|
@@ -4,6 +4,7 @@ exports.RecordCard = RecordCard;
|
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
5
|
const react_components_1 = require("@fluentui/react-components");
|
|
6
6
|
const utils_1 = require("@headless-adminapp/app/utils");
|
|
7
|
+
const color_1 = require("@headless-adminapp/app/utils/color");
|
|
7
8
|
const useStyles = (0, react_components_1.makeStyles)({
|
|
8
9
|
root: {
|
|
9
10
|
width: '100%',
|
|
@@ -71,9 +72,15 @@ function RecordCard({ schema, cardView, record, selected, }) {
|
|
|
71
72
|
if (!choice) {
|
|
72
73
|
return null;
|
|
73
74
|
}
|
|
75
|
+
const bgColor = choice.color;
|
|
76
|
+
const color = bgColor
|
|
77
|
+
? (0, color_1.isColorDark)(bgColor)
|
|
78
|
+
? '#FFFFFF'
|
|
79
|
+
: '#000000'
|
|
80
|
+
: undefined;
|
|
74
81
|
return ((0, jsx_runtime_1.jsx)(react_components_1.Tag, { size: "extra-small", appearance: "filled", style: {
|
|
75
|
-
background:
|
|
76
|
-
color:
|
|
82
|
+
background: bgColor,
|
|
83
|
+
color: color,
|
|
77
84
|
height: 16,
|
|
78
85
|
display: 'flex',
|
|
79
86
|
alignItems: 'center',
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@headless-adminapp/fluent",
|
|
3
|
-
"version": "0.0.17-alpha.
|
|
3
|
+
"version": "0.0.17-alpha.45",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"types": "index.d.ts",
|
|
@@ -48,5 +48,5 @@
|
|
|
48
48
|
"uuid": "11.0.3",
|
|
49
49
|
"yup": "^1.4.0"
|
|
50
50
|
},
|
|
51
|
-
"gitHead": "
|
|
51
|
+
"gitHead": "7538074665d8fa6f67ca2a91e62ea32d09570a31"
|
|
52
52
|
}
|