@tipp/ui 2.3.23 → 2.3.24
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/dist/app/index.js +100 -99
- package/dist/app/platform/coach-question-list.js +29 -29
- package/dist/app/platform/contents-card.js +29 -29
- package/dist/app/platform/curriculum-card.js +6 -6
- package/dist/app/platform/edit-coaching-time.js +78 -77
- package/dist/app/platform/edit-service-type.js +79 -78
- package/dist/app/platform/goal-manage-card-edit.js +78 -77
- package/dist/app/platform/goal-manage-card-read.js +29 -29
- package/dist/app/platform/on-offline-radio-card.js +78 -77
- package/dist/app/platform/report-card.js +29 -29
- package/dist/app/platform/reservation-card.js +79 -78
- package/dist/app/platform/session-card.js +81 -80
- package/dist/app/platform/session-review-simple-read.js +29 -29
- package/dist/app/platform/userInfos/coaching-customer-info/index.js +32 -32
- package/dist/app/platform/userInfos/coaching-customer-info/large.js +29 -29
- package/dist/app/platform/userInfos/coaching-customer-info/medium.js +29 -29
- package/dist/app/platform/userInfos/coaching-customer-info/small.js +29 -29
- package/dist/app/platform/userInfos/session-user-info-detail.js +29 -29
- package/dist/app/platform/userInfos/utils.js +28 -28
- package/dist/atoms/bullet-text.js +2 -2
- package/dist/atoms/dialog.js +2 -2
- package/dist/atoms/field-error-wrapper.js +2 -2
- package/dist/atoms/index.js +62 -62
- package/dist/atoms/list.js +2 -2
- package/dist/atoms/pagination.js +3 -3
- package/dist/chunk-3JADWKXT.js +230 -0
- package/dist/chunk-3JADWKXT.js.map +1 -0
- package/dist/chunk-6UXCNYVO.js +106 -0
- package/dist/chunk-6UXCNYVO.js.map +1 -0
- package/dist/chunk-77H5BUYO.js +55 -0
- package/dist/chunk-77H5BUYO.js.map +1 -0
- package/dist/chunk-7FIDFRJL.js +196 -0
- package/dist/chunk-7FIDFRJL.js.map +1 -0
- package/dist/chunk-ABMGYODX.js +196 -0
- package/dist/chunk-ABMGYODX.js.map +1 -0
- package/dist/chunk-ADLR7QZR.js +69 -0
- package/dist/chunk-ADLR7QZR.js.map +1 -0
- package/dist/chunk-BP5FU7EO.js +196 -0
- package/dist/chunk-BP5FU7EO.js.map +1 -0
- package/dist/chunk-E5W5TCRU.js +89 -0
- package/dist/chunk-E5W5TCRU.js.map +1 -0
- package/dist/chunk-FZ4F7FCO.js +63 -0
- package/dist/chunk-FZ4F7FCO.js.map +1 -0
- package/dist/chunk-HFVVQEOZ.js +1 -0
- package/dist/chunk-HFVVQEOZ.js.map +1 -0
- package/dist/chunk-I46BFZL6.js +69 -0
- package/dist/chunk-I46BFZL6.js.map +1 -0
- package/dist/chunk-JQH27TXL.js +89 -0
- package/dist/chunk-JQH27TXL.js.map +1 -0
- package/dist/chunk-K7LTEKQS.js +56 -0
- package/dist/chunk-K7LTEKQS.js.map +1 -0
- package/dist/chunk-SKA66SQI.js +144 -0
- package/dist/chunk-SKA66SQI.js.map +1 -0
- package/dist/chunk-TQMIIK56.js +230 -0
- package/dist/chunk-TQMIIK56.js.map +1 -0
- package/dist/chunk-XB2GOVFT.js +69 -0
- package/dist/chunk-XB2GOVFT.js.map +1 -0
- package/dist/chunk-Y7I4BEAO.js +69 -0
- package/dist/chunk-Y7I4BEAO.js.map +1 -0
- package/dist/context/index.js +5 -5
- package/dist/index.cjs +59 -34
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +159 -155
- package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/index.js +16 -16
- package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-comp.js +4 -4
- package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-body.js +9 -9
- package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-footer.js +2 -2
- package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-header.js +3 -3
- package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-layout.js +2 -2
- package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-radio.js +5 -5
- package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-satisfaction-option.js +5 -5
- package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-satisfaction-text.js +5 -5
- package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-text.js +5 -5
- package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/complete-review.js +4 -4
- package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/index.js +20 -20
- package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/start-review.js +6 -6
- package/dist/molecules/curriculumV2/CurriculumContents/curriculum-ai-traning.js +3 -3
- package/dist/molecules/curriculumV2/CurriculumContents/curriculum-file-download.js +3 -3
- package/dist/molecules/curriculumV2/CurriculumContents/curriculum-review.js +22 -22
- package/dist/molecules/curriculumV2/CurriculumContents/index.js +26 -26
- package/dist/molecules/curriculumV2/CurriculumSidebar/Items/curriculum-item-title.js +2 -2
- package/dist/molecules/curriculumV2/CurriculumSidebar/Items/section-item.js +4 -4
- package/dist/molecules/curriculumV2/CurriculumSidebar/index.js +8 -8
- package/dist/molecules/curriculumV2/CurriculumSidebar/sidebar-item.js +5 -5
- package/dist/molecules/curriculumV2/curriculum-sub-nav.js +4 -4
- package/dist/molecules/curriculumV2/curriculum-v2-layout.js +2 -2
- package/dist/molecules/curriculumV2/index.js +35 -35
- package/dist/molecules/date-picker/date-picker-button.js +6 -6
- package/dist/molecules/date-picker/index.js +5 -5
- package/dist/molecules/description-json-render.js +5 -5
- package/dist/molecules/download-card.js +2 -2
- package/dist/molecules/dynamic-field.js +5 -5
- package/dist/molecules/dynamic-form-editor-field-editor-panel.js +4 -4
- package/dist/molecules/dynamic-form-editor-field-list-panel.js +3 -3
- package/dist/molecules/dynamic-form-editor-issues-panel.js +3 -3
- package/dist/molecules/dynamic-form-editor-preview-panel.js +8 -8
- package/dist/molecules/dynamic-form-editor.js +15 -15
- package/dist/molecules/dynamic-form-response-item.cjs +59 -34
- package/dist/molecules/dynamic-form-response-item.cjs.map +1 -1
- package/dist/molecules/dynamic-form-response-item.js +2 -1
- package/dist/molecules/dynamic-form.js +6 -6
- package/dist/molecules/expand-table/index.js +4 -4
- package/dist/molecules/force-refresh.js +2 -2
- package/dist/molecules/ghost-post.js +4 -4
- package/dist/molecules/index.cjs +57 -34
- package/dist/molecules/index.cjs.map +1 -1
- package/dist/molecules/index.js +73 -72
- package/dist/molecules/learning-post.js +5 -5
- package/dist/molecules/navigation.js +3 -3
- package/dist/molecules/one-on-one-guide-list.js +3 -3
- package/dist/molecules/stepper.js +4 -4
- package/dist/molecules/tag-selector.js +5 -5
- package/dist/molecules/time-select.js +3 -2
- package/dist/molecules/training-info-guideline.js +7 -7
- package/dist/utils/get-dynamic-form-display-value.cjs +80 -0
- package/dist/utils/get-dynamic-form-display-value.cjs.map +1 -0
- package/dist/utils/get-dynamic-form-display-value.d.cts +5 -0
- package/dist/utils/get-dynamic-form-display-value.d.ts +5 -0
- package/dist/utils/get-dynamic-form-display-value.js +8 -0
- package/dist/utils/get-dynamic-form-display-value.js.map +1 -0
- package/dist/utils/get-dynamic-form-display-value.test.cjs +124 -0
- package/dist/utils/get-dynamic-form-display-value.test.cjs.map +1 -0
- package/dist/utils/get-dynamic-form-display-value.test.d.cts +2 -0
- package/dist/utils/get-dynamic-form-display-value.test.d.ts +2 -0
- package/dist/utils/get-dynamic-form-display-value.test.js +75 -0
- package/dist/utils/get-dynamic-form-display-value.test.js.map +1 -0
- package/dist/utils/index.cjs +54 -0
- package/dist/utils/index.cjs.map +1 -1
- package/dist/utils/index.d.cts +2 -0
- package/dist/utils/index.d.ts +2 -0
- package/dist/utils/index.js +9 -5
- package/package.json +1 -1
- package/src/molecules/dynamic-form-response-item.tsx +6 -44
- package/src/utils/get-dynamic-form-display-value.test.ts +81 -0
- package/src/utils/get-dynamic-form-display-value.ts +74 -0
- package/src/utils/index.ts +2 -1
|
@@ -0,0 +1,230 @@
|
|
|
1
|
+
import {
|
|
2
|
+
DynamicFormEditorFieldEditorPanel
|
|
3
|
+
} from "./chunk-EGTOU5MK.js";
|
|
4
|
+
import {
|
|
5
|
+
DynamicFormEditorFieldListPanel
|
|
6
|
+
} from "./chunk-6UXCNYVO.js";
|
|
7
|
+
import {
|
|
8
|
+
DynamicFormEditorIssuesPanel
|
|
9
|
+
} from "./chunk-MIATMZDP.js";
|
|
10
|
+
import {
|
|
11
|
+
DynamicFormEditorPreviewPanel
|
|
12
|
+
} from "./chunk-JRSZNGFD.js";
|
|
13
|
+
import {
|
|
14
|
+
createDefaultField,
|
|
15
|
+
createUniqueFieldName,
|
|
16
|
+
duplicateField,
|
|
17
|
+
findFieldIndexByName,
|
|
18
|
+
getFieldTypes,
|
|
19
|
+
hasErrorIssues,
|
|
20
|
+
moveField,
|
|
21
|
+
normalizeSchema,
|
|
22
|
+
updateSchemaFields,
|
|
23
|
+
validateDynamicFormSchema
|
|
24
|
+
} from "./chunk-Z7WNKARH.js";
|
|
25
|
+
import {
|
|
26
|
+
Flex
|
|
27
|
+
} from "./chunk-25HMMI7R.js";
|
|
28
|
+
import {
|
|
29
|
+
Button
|
|
30
|
+
} from "./chunk-ZVDAEY5Q.js";
|
|
31
|
+
import {
|
|
32
|
+
__spreadProps,
|
|
33
|
+
__spreadValues
|
|
34
|
+
} from "./chunk-CRTRMMJ7.js";
|
|
35
|
+
|
|
36
|
+
// src/molecules/dynamic-form-editor.tsx
|
|
37
|
+
import { useCallback, useEffect, useMemo, useState } from "react";
|
|
38
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
39
|
+
function getInitialSchema(value, defaultValue) {
|
|
40
|
+
if (value !== void 0) return normalizeSchema(value);
|
|
41
|
+
return normalizeSchema(defaultValue);
|
|
42
|
+
}
|
|
43
|
+
function getSelectedField(schema, selectedFieldName) {
|
|
44
|
+
if (!selectedFieldName) return { field: null, index: -1 };
|
|
45
|
+
const index = findFieldIndexByName(schema.fields, selectedFieldName);
|
|
46
|
+
if (index < 0) return { field: null, index: -1 };
|
|
47
|
+
return { field: schema.fields[index], index };
|
|
48
|
+
}
|
|
49
|
+
function DynamicFormEditor(props) {
|
|
50
|
+
const {
|
|
51
|
+
value,
|
|
52
|
+
defaultValue,
|
|
53
|
+
onChange,
|
|
54
|
+
onSave,
|
|
55
|
+
onCancel,
|
|
56
|
+
readonly = false,
|
|
57
|
+
showPreview = false
|
|
58
|
+
} = props;
|
|
59
|
+
const isControlled = value !== void 0;
|
|
60
|
+
const [uncontrolledSchema, setUncontrolledSchema] = useState(
|
|
61
|
+
() => getInitialSchema(void 0, defaultValue)
|
|
62
|
+
);
|
|
63
|
+
const effectiveSchema = useMemo(() => {
|
|
64
|
+
if (isControlled) return normalizeSchema(value);
|
|
65
|
+
return uncontrolledSchema;
|
|
66
|
+
}, [isControlled, uncontrolledSchema, value]);
|
|
67
|
+
const [selectedFieldName, setSelectedFieldName] = useState(() => {
|
|
68
|
+
var _a, _b;
|
|
69
|
+
const initialSchema = getInitialSchema(value, defaultValue);
|
|
70
|
+
return (_b = (_a = initialSchema.fields[0]) == null ? void 0 : _a.name) != null ? _b : null;
|
|
71
|
+
});
|
|
72
|
+
const selected = useMemo(() => {
|
|
73
|
+
return getSelectedField(effectiveSchema, selectedFieldName);
|
|
74
|
+
}, [effectiveSchema, selectedFieldName]);
|
|
75
|
+
const issues = useMemo(() => {
|
|
76
|
+
return validateDynamicFormSchema(effectiveSchema);
|
|
77
|
+
}, [effectiveSchema]);
|
|
78
|
+
const errorFieldNameSet = useMemo(() => {
|
|
79
|
+
const set = /* @__PURE__ */ new Set();
|
|
80
|
+
issues.forEach((i) => {
|
|
81
|
+
if (i.level === "error" && i.fieldName) set.add(i.fieldName);
|
|
82
|
+
});
|
|
83
|
+
return set;
|
|
84
|
+
}, [issues]);
|
|
85
|
+
const hasFieldError = useCallback(
|
|
86
|
+
(fieldName) => {
|
|
87
|
+
return errorFieldNameSet.has(fieldName);
|
|
88
|
+
},
|
|
89
|
+
[errorFieldNameSet]
|
|
90
|
+
);
|
|
91
|
+
const fieldTypes = useMemo(() => getFieldTypes(), []);
|
|
92
|
+
useEffect(() => {
|
|
93
|
+
var _a, _b;
|
|
94
|
+
if (selectedFieldName && selected.field) return;
|
|
95
|
+
setSelectedFieldName((_b = (_a = effectiveSchema.fields[0]) == null ? void 0 : _a.name) != null ? _b : null);
|
|
96
|
+
}, [effectiveSchema.fields, selected.field, selectedFieldName]);
|
|
97
|
+
useEffect(() => {
|
|
98
|
+
if (isControlled) return;
|
|
99
|
+
setUncontrolledSchema(getInitialSchema(void 0, defaultValue));
|
|
100
|
+
}, [defaultValue, isControlled]);
|
|
101
|
+
const applySchema = useCallback(
|
|
102
|
+
(next) => {
|
|
103
|
+
onChange == null ? void 0 : onChange(next);
|
|
104
|
+
if (!isControlled) setUncontrolledSchema(next);
|
|
105
|
+
},
|
|
106
|
+
[isControlled, onChange]
|
|
107
|
+
);
|
|
108
|
+
const handleAddField = useCallback(
|
|
109
|
+
(type) => {
|
|
110
|
+
if (readonly) return;
|
|
111
|
+
const nextField = createDefaultField(type, effectiveSchema.fields);
|
|
112
|
+
const nextFields = [...effectiveSchema.fields, nextField];
|
|
113
|
+
applySchema(updateSchemaFields(effectiveSchema, nextFields));
|
|
114
|
+
setSelectedFieldName(nextField.name);
|
|
115
|
+
},
|
|
116
|
+
[applySchema, effectiveSchema, readonly]
|
|
117
|
+
);
|
|
118
|
+
const handleUpdateSelectedField = useCallback(
|
|
119
|
+
(nextField) => {
|
|
120
|
+
if (readonly) return;
|
|
121
|
+
if (!selected.field || selected.index < 0) return;
|
|
122
|
+
const nextFields = effectiveSchema.fields.map(
|
|
123
|
+
(f, i) => i === selected.index ? nextField : f
|
|
124
|
+
);
|
|
125
|
+
applySchema(updateSchemaFields(effectiveSchema, nextFields));
|
|
126
|
+
},
|
|
127
|
+
[applySchema, effectiveSchema, readonly, selected.field, selected.index]
|
|
128
|
+
);
|
|
129
|
+
const handleRenameSelected = useCallback(
|
|
130
|
+
(nextName) => {
|
|
131
|
+
if (readonly) return;
|
|
132
|
+
const currentField = selected.field;
|
|
133
|
+
if (!currentField) return;
|
|
134
|
+
const others = effectiveSchema.fields.filter(
|
|
135
|
+
(f) => f.name !== currentField.name
|
|
136
|
+
);
|
|
137
|
+
const uniqueName = createUniqueFieldName(others, nextName);
|
|
138
|
+
const nextField = __spreadProps(__spreadValues({}, currentField), { name: uniqueName });
|
|
139
|
+
handleUpdateSelectedField(nextField);
|
|
140
|
+
setSelectedFieldName(uniqueName);
|
|
141
|
+
},
|
|
142
|
+
[effectiveSchema.fields, handleUpdateSelectedField, readonly, selected.field]
|
|
143
|
+
);
|
|
144
|
+
const handleDeleteSelected = useCallback(() => {
|
|
145
|
+
if (readonly) return;
|
|
146
|
+
if (!selected.field || selected.index < 0) return;
|
|
147
|
+
const nextFields = effectiveSchema.fields.filter(
|
|
148
|
+
(_, i) => i !== selected.index
|
|
149
|
+
);
|
|
150
|
+
applySchema(updateSchemaFields(effectiveSchema, nextFields));
|
|
151
|
+
let nextSelected = null;
|
|
152
|
+
if (nextFields.length > selected.index) nextSelected = nextFields[selected.index].name;
|
|
153
|
+
else if (nextFields.length > 0) nextSelected = nextFields[0].name;
|
|
154
|
+
setSelectedFieldName(nextSelected);
|
|
155
|
+
}, [applySchema, effectiveSchema, readonly, selected.field, selected.index]);
|
|
156
|
+
const handleMoveSelected = useCallback(
|
|
157
|
+
(direction) => {
|
|
158
|
+
if (readonly) return;
|
|
159
|
+
if (!selected.field || selected.index < 0) return;
|
|
160
|
+
const toIndex = direction === "up" ? selected.index - 1 : selected.index + 1;
|
|
161
|
+
const nextFields = moveField(
|
|
162
|
+
effectiveSchema.fields,
|
|
163
|
+
selected.index,
|
|
164
|
+
toIndex
|
|
165
|
+
);
|
|
166
|
+
applySchema(updateSchemaFields(effectiveSchema, nextFields));
|
|
167
|
+
},
|
|
168
|
+
[applySchema, effectiveSchema, readonly, selected.field, selected.index]
|
|
169
|
+
);
|
|
170
|
+
const handleDuplicateSelected = useCallback(() => {
|
|
171
|
+
if (readonly) return;
|
|
172
|
+
if (!selected.field || selected.index < 0) return;
|
|
173
|
+
const nextFields = duplicateField(
|
|
174
|
+
effectiveSchema.fields,
|
|
175
|
+
selected.index
|
|
176
|
+
);
|
|
177
|
+
applySchema(updateSchemaFields(effectiveSchema, nextFields));
|
|
178
|
+
const duplicatedIndex = selected.index + 1;
|
|
179
|
+
const nextSelected = nextFields.length > duplicatedIndex ? nextFields[duplicatedIndex].name : selected.field.name;
|
|
180
|
+
setSelectedFieldName(nextSelected);
|
|
181
|
+
}, [applySchema, effectiveSchema, readonly, selected.field, selected.index]);
|
|
182
|
+
const handleSave = useCallback(() => {
|
|
183
|
+
if (!onSave) return;
|
|
184
|
+
const result = onSave(effectiveSchema);
|
|
185
|
+
void result;
|
|
186
|
+
}, [effectiveSchema, onSave]);
|
|
187
|
+
const disableSave = readonly || !onSave || hasErrorIssues(issues);
|
|
188
|
+
return /* @__PURE__ */ jsxs(Flex, { align: "start", gap: "4", style: { width: "100%" }, children: [
|
|
189
|
+
/* @__PURE__ */ jsx(
|
|
190
|
+
DynamicFormEditorFieldListPanel,
|
|
191
|
+
{
|
|
192
|
+
fieldTypes,
|
|
193
|
+
fields: effectiveSchema.fields,
|
|
194
|
+
hasFieldError,
|
|
195
|
+
onAddField: handleAddField,
|
|
196
|
+
onSelectFieldName: setSelectedFieldName,
|
|
197
|
+
readonly,
|
|
198
|
+
selectedFieldName
|
|
199
|
+
}
|
|
200
|
+
),
|
|
201
|
+
/* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "3", style: { flex: 1, minWidth: 520 }, children: [
|
|
202
|
+
/* @__PURE__ */ jsx(
|
|
203
|
+
DynamicFormEditorFieldEditorPanel,
|
|
204
|
+
{
|
|
205
|
+
field: selected.field,
|
|
206
|
+
fieldIndex: selected.index,
|
|
207
|
+
fieldTypes,
|
|
208
|
+
fields: effectiveSchema.fields,
|
|
209
|
+
onDeleteField: handleDeleteSelected,
|
|
210
|
+
onDuplicateField: handleDuplicateSelected,
|
|
211
|
+
onMoveField: handleMoveSelected,
|
|
212
|
+
onRenameField: handleRenameSelected,
|
|
213
|
+
onUpdateField: handleUpdateSelectedField,
|
|
214
|
+
readonly
|
|
215
|
+
}
|
|
216
|
+
),
|
|
217
|
+
/* @__PURE__ */ jsx(DynamicFormEditorIssuesPanel, { issues }),
|
|
218
|
+
onSave || onCancel ? /* @__PURE__ */ jsxs(Flex, { gap: "2", justify: "end", children: [
|
|
219
|
+
onCancel ? /* @__PURE__ */ jsx(Button, { disabled: readonly, onClick: onCancel, variant: "soft", children: "\uCDE8\uC18C" }) : null,
|
|
220
|
+
onSave ? /* @__PURE__ */ jsx(Button, { disabled: disableSave, onClick: handleSave, children: "\uC800\uC7A5" }) : null
|
|
221
|
+
] }) : null
|
|
222
|
+
] }),
|
|
223
|
+
/* @__PURE__ */ jsx(DynamicFormEditorPreviewPanel, { fields: effectiveSchema.fields, show: showPreview })
|
|
224
|
+
] });
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
export {
|
|
228
|
+
DynamicFormEditor
|
|
229
|
+
};
|
|
230
|
+
//# sourceMappingURL=chunk-3JADWKXT.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/molecules/dynamic-form-editor.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport { Button } from '@/atoms/button';\nimport { Flex } from '@/atoms/flex';\nimport type {\n DynamicFormFieldSchema,\n DynamicFormSchema,\n} from '@/types/dynamic-form-schema-generated';\nimport {\n createDefaultField,\n createUniqueFieldName,\n duplicateField,\n findFieldIndexByName,\n getFieldTypes,\n hasErrorIssues,\n moveField,\n normalizeSchema,\n updateSchemaFields,\n validateDynamicFormSchema,\n type FieldType,\n type SchemaIssue,\n} from './dynamic-form-editor-utils';\nimport { DynamicFormEditorFieldEditorPanel } from './dynamic-form-editor-field-editor-panel';\nimport { DynamicFormEditorFieldListPanel } from './dynamic-form-editor-field-list-panel';\nimport { DynamicFormEditorIssuesPanel } from './dynamic-form-editor-issues-panel';\nimport { DynamicFormEditorPreviewPanel } from './dynamic-form-editor-preview-panel';\n\nfunction getInitialSchema(\n value: DynamicFormSchema | undefined,\n defaultValue: DynamicFormSchema | undefined\n): DynamicFormSchema {\n if (value !== undefined) return normalizeSchema(value);\n return normalizeSchema(defaultValue);\n}\n\nfunction getSelectedField(\n schema: DynamicFormSchema,\n selectedFieldName: string | null\n): { field: DynamicFormFieldSchema | null; index: number } {\n if (!selectedFieldName) return { field: null, index: -1 };\n const index: number = findFieldIndexByName(schema.fields, selectedFieldName);\n if (index < 0) return { field: null, index: -1 };\n return { field: schema.fields[index], index };\n}\n\nexport interface DynamicFormEditorProps {\n value?: DynamicFormSchema;\n defaultValue?: DynamicFormSchema;\n onChange?: (next: DynamicFormSchema) => void;\n onSave?: (next: DynamicFormSchema) => void | Promise<void>;\n onCancel?: () => void;\n readonly?: boolean;\n showPreview?: boolean;\n}\n\nexport function DynamicFormEditor(props: DynamicFormEditorProps): React.ReactElement {\n const {\n value,\n defaultValue,\n onChange,\n onSave,\n onCancel,\n readonly = false,\n showPreview = false,\n } = props;\n\n const isControlled: boolean = value !== undefined;\n\n const [uncontrolledSchema, setUncontrolledSchema] = useState<DynamicFormSchema>(() =>\n getInitialSchema(undefined, defaultValue)\n );\n\n const effectiveSchema: DynamicFormSchema = useMemo(() => {\n if (isControlled) return normalizeSchema(value);\n return uncontrolledSchema;\n }, [isControlled, uncontrolledSchema, value]);\n\n const [selectedFieldName, setSelectedFieldName] = useState<string | null>(() => {\n const initialSchema = getInitialSchema(value, defaultValue);\n return initialSchema.fields[0]?.name ?? null;\n });\n\n const selected = useMemo(() => {\n return getSelectedField(effectiveSchema, selectedFieldName);\n }, [effectiveSchema, selectedFieldName]);\n\n const issues: SchemaIssue[] = useMemo(() => {\n return validateDynamicFormSchema(effectiveSchema);\n }, [effectiveSchema]);\n\n const errorFieldNameSet: Set<string> = useMemo(() => {\n const set = new Set<string>();\n issues.forEach((i) => {\n if (i.level === 'error' && i.fieldName) set.add(i.fieldName);\n });\n return set;\n }, [issues]);\n\n const hasFieldError = useCallback(\n (fieldName: string): boolean => {\n return errorFieldNameSet.has(fieldName);\n },\n [errorFieldNameSet]\n );\n\n const fieldTypes: FieldType[] = useMemo(() => getFieldTypes(), []);\n\n useEffect(() => {\n if (selectedFieldName && selected.field) return;\n setSelectedFieldName(effectiveSchema.fields[0]?.name ?? null);\n }, [effectiveSchema.fields, selected.field, selectedFieldName]);\n\n useEffect(() => {\n if (isControlled) return;\n setUncontrolledSchema(getInitialSchema(undefined, defaultValue));\n }, [defaultValue, isControlled]);\n\n const applySchema = useCallback(\n (next: DynamicFormSchema): void => {\n onChange?.(next);\n if (!isControlled) setUncontrolledSchema(next);\n },\n [isControlled, onChange]\n );\n\n const handleAddField = useCallback(\n (type: FieldType): void => {\n if (readonly) return;\n const nextField: DynamicFormFieldSchema = createDefaultField(type, effectiveSchema.fields);\n const nextFields: DynamicFormFieldSchema[] = [...effectiveSchema.fields, nextField];\n applySchema(updateSchemaFields(effectiveSchema, nextFields));\n setSelectedFieldName(nextField.name);\n },\n [applySchema, effectiveSchema, readonly]\n );\n\n const handleUpdateSelectedField = useCallback(\n (nextField: DynamicFormFieldSchema): void => {\n if (readonly) return;\n if (!selected.field || selected.index < 0) return;\n const nextFields: DynamicFormFieldSchema[] = effectiveSchema.fields.map((f, i) =>\n i === selected.index ? nextField : f\n );\n applySchema(updateSchemaFields(effectiveSchema, nextFields));\n },\n [applySchema, effectiveSchema, readonly, selected.field, selected.index]\n );\n\n const handleRenameSelected = useCallback(\n (nextName: string): void => {\n if (readonly) return;\n const currentField = selected.field;\n if (!currentField) return;\n\n const others: DynamicFormFieldSchema[] = effectiveSchema.fields.filter(\n (f) => f.name !== currentField.name\n );\n const uniqueName: string = createUniqueFieldName(others, nextName);\n const nextField: DynamicFormFieldSchema = { ...currentField, name: uniqueName };\n handleUpdateSelectedField(nextField);\n setSelectedFieldName(uniqueName);\n },\n [effectiveSchema.fields, handleUpdateSelectedField, readonly, selected.field]\n );\n\n const handleDeleteSelected = useCallback((): void => {\n if (readonly) return;\n if (!selected.field || selected.index < 0) return;\n const nextFields: DynamicFormFieldSchema[] = effectiveSchema.fields.filter(\n (_, i) => i !== selected.index\n );\n applySchema(updateSchemaFields(effectiveSchema, nextFields));\n let nextSelected: string | null = null;\n if (nextFields.length > selected.index) nextSelected = nextFields[selected.index].name;\n else if (nextFields.length > 0) nextSelected = nextFields[0].name;\n setSelectedFieldName(nextSelected);\n }, [applySchema, effectiveSchema, readonly, selected.field, selected.index]);\n\n const handleMoveSelected = useCallback(\n (direction: 'up' | 'down'): void => {\n if (readonly) return;\n if (!selected.field || selected.index < 0) return;\n const toIndex: number = direction === 'up' ? selected.index - 1 : selected.index + 1;\n const nextFields: DynamicFormFieldSchema[] = moveField(\n effectiveSchema.fields,\n selected.index,\n toIndex\n );\n applySchema(updateSchemaFields(effectiveSchema, nextFields));\n },\n [applySchema, effectiveSchema, readonly, selected.field, selected.index]\n );\n\n const handleDuplicateSelected = useCallback((): void => {\n if (readonly) return;\n if (!selected.field || selected.index < 0) return;\n const nextFields: DynamicFormFieldSchema[] = duplicateField(\n effectiveSchema.fields,\n selected.index\n );\n applySchema(updateSchemaFields(effectiveSchema, nextFields));\n const duplicatedIndex: number = selected.index + 1;\n const nextSelected: string =\n nextFields.length > duplicatedIndex\n ? nextFields[duplicatedIndex].name\n : selected.field.name;\n setSelectedFieldName(nextSelected);\n }, [applySchema, effectiveSchema, readonly, selected.field, selected.index]);\n\n const handleSave = useCallback((): void => {\n if (!onSave) return;\n const result = onSave(effectiveSchema);\n void result;\n }, [effectiveSchema, onSave]);\n\n const disableSave: boolean = readonly || !onSave || hasErrorIssues(issues);\n\n return (\n <Flex align=\"start\" gap=\"4\" style={{ width: '100%' }}>\n <DynamicFormEditorFieldListPanel\n fieldTypes={fieldTypes}\n fields={effectiveSchema.fields}\n hasFieldError={hasFieldError}\n onAddField={handleAddField}\n onSelectFieldName={setSelectedFieldName}\n readonly={readonly}\n selectedFieldName={selectedFieldName}\n />\n\n <Flex direction=\"column\" gap=\"3\" style={{ flex: 1, minWidth: 520 }}>\n <DynamicFormEditorFieldEditorPanel\n field={selected.field}\n fieldIndex={selected.index}\n fieldTypes={fieldTypes}\n fields={effectiveSchema.fields}\n onDeleteField={handleDeleteSelected}\n onDuplicateField={handleDuplicateSelected}\n onMoveField={handleMoveSelected}\n onRenameField={handleRenameSelected}\n onUpdateField={handleUpdateSelectedField}\n readonly={readonly}\n />\n\n <DynamicFormEditorIssuesPanel issues={issues} />\n\n {(onSave || onCancel) ? <Flex gap=\"2\" justify=\"end\">\n {onCancel ? (\n <Button disabled={readonly} onClick={onCancel} variant=\"soft\">\n 취소\n </Button>\n ) : null}\n {onSave ? (\n <Button disabled={disableSave} onClick={handleSave}>\n 저장\n </Button>\n ) : null}\n </Flex> : null}\n </Flex>\n\n <DynamicFormEditorPreviewPanel fields={effectiveSchema.fields} show={showPreview} />\n </Flex>\n );\n}\n\n"],"mappings":"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","names":[]}
|
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
import {
|
|
2
|
+
getFieldTypeLabel
|
|
3
|
+
} from "./chunk-Z7WNKARH.js";
|
|
4
|
+
import {
|
|
5
|
+
Select
|
|
6
|
+
} from "./chunk-X2GMDZ7M.js";
|
|
7
|
+
import {
|
|
8
|
+
Typo
|
|
9
|
+
} from "./chunk-PMJIFLDT.js";
|
|
10
|
+
import {
|
|
11
|
+
Flex
|
|
12
|
+
} from "./chunk-25HMMI7R.js";
|
|
13
|
+
import {
|
|
14
|
+
Card
|
|
15
|
+
} from "./chunk-RP2RGCAW.js";
|
|
16
|
+
|
|
17
|
+
// src/molecules/dynamic-form-editor-field-list-panel.tsx
|
|
18
|
+
import { useMemo } from "react";
|
|
19
|
+
import { Box } from "@radix-ui/themes";
|
|
20
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
21
|
+
function isFieldType(value, types) {
|
|
22
|
+
return types.some((t) => t === value);
|
|
23
|
+
}
|
|
24
|
+
function DynamicFormEditorFieldListPanel(props) {
|
|
25
|
+
const {
|
|
26
|
+
fields,
|
|
27
|
+
selectedFieldName,
|
|
28
|
+
readonly,
|
|
29
|
+
fieldTypes,
|
|
30
|
+
hasFieldError,
|
|
31
|
+
onSelectFieldName,
|
|
32
|
+
onAddField
|
|
33
|
+
} = props;
|
|
34
|
+
const isEmpty = fields.length === 0;
|
|
35
|
+
const triggerPlaceholder = useMemo(() => {
|
|
36
|
+
return readonly ? "\uCD94\uAC00(\uC77D\uAE30 \uC804\uC6A9)" : "\uCD94\uAC00";
|
|
37
|
+
}, [readonly]);
|
|
38
|
+
return /* @__PURE__ */ jsx(Card, { style: { width: 340, padding: 12 }, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "3", children: [
|
|
39
|
+
/* @__PURE__ */ jsxs(Flex, { align: "center", justify: "between", children: [
|
|
40
|
+
/* @__PURE__ */ jsx(Typo, { variant: "body", children: "\uD544\uB4DC" }),
|
|
41
|
+
/* @__PURE__ */ jsxs(
|
|
42
|
+
Select.Root,
|
|
43
|
+
{
|
|
44
|
+
disabled: readonly,
|
|
45
|
+
onValueChange: (v) => {
|
|
46
|
+
if (!isFieldType(v, fieldTypes)) return;
|
|
47
|
+
onAddField(v);
|
|
48
|
+
},
|
|
49
|
+
value: "",
|
|
50
|
+
children: [
|
|
51
|
+
/* @__PURE__ */ jsx(Select.Trigger, { placeholder: triggerPlaceholder }),
|
|
52
|
+
/* @__PURE__ */ jsx(Select.Content, { children: fieldTypes.map((t) => /* @__PURE__ */ jsx(Select.Item, { value: t, children: getFieldTypeLabel(t) }, t)) })
|
|
53
|
+
]
|
|
54
|
+
}
|
|
55
|
+
)
|
|
56
|
+
] }),
|
|
57
|
+
/* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "2", children: [
|
|
58
|
+
isEmpty ? /* @__PURE__ */ jsx(Typo, { color: "gray", variant: "caption", children: "\uC544\uC9C1 \uD544\uB4DC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." }) : null,
|
|
59
|
+
fields.map((field) => {
|
|
60
|
+
const isSelected = field.name === selectedFieldName;
|
|
61
|
+
const hasError = hasFieldError(field.name);
|
|
62
|
+
return /* @__PURE__ */ jsx(
|
|
63
|
+
Card,
|
|
64
|
+
{
|
|
65
|
+
error: isSelected ? hasError : void 0,
|
|
66
|
+
onClick: () => {
|
|
67
|
+
onSelectFieldName(field.name);
|
|
68
|
+
},
|
|
69
|
+
style: {
|
|
70
|
+
padding: 10,
|
|
71
|
+
cursor: "pointer",
|
|
72
|
+
opacity: readonly ? 0.8 : 1,
|
|
73
|
+
border: isSelected ? "1px solid var(--accent-9)" : "1px solid transparent"
|
|
74
|
+
},
|
|
75
|
+
children: /* @__PURE__ */ jsxs(Box, { style: { minWidth: 0 }, children: [
|
|
76
|
+
/* @__PURE__ */ jsx(
|
|
77
|
+
Typo,
|
|
78
|
+
{
|
|
79
|
+
style: {
|
|
80
|
+
whiteSpace: "nowrap",
|
|
81
|
+
overflow: "hidden",
|
|
82
|
+
textOverflow: "ellipsis"
|
|
83
|
+
},
|
|
84
|
+
variant: "body",
|
|
85
|
+
children: field.label
|
|
86
|
+
}
|
|
87
|
+
),
|
|
88
|
+
/* @__PURE__ */ jsxs(Typo, { color: "gray", variant: "caption", children: [
|
|
89
|
+
field.name,
|
|
90
|
+
" \xB7 ",
|
|
91
|
+
field.type,
|
|
92
|
+
field.required ? " \xB7 required" : ""
|
|
93
|
+
] })
|
|
94
|
+
] })
|
|
95
|
+
},
|
|
96
|
+
field.name
|
|
97
|
+
);
|
|
98
|
+
})
|
|
99
|
+
] })
|
|
100
|
+
] }) });
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
export {
|
|
104
|
+
DynamicFormEditorFieldListPanel
|
|
105
|
+
};
|
|
106
|
+
//# sourceMappingURL=chunk-6UXCNYVO.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/molecules/dynamic-form-editor-field-list-panel.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { Box } from '@radix-ui/themes';\nimport { Card } from '@/atoms/card';\nimport { Flex } from '@/atoms/flex';\nimport { Select } from '@/atoms/select';\nimport { Typo } from '@/atoms/typo';\nimport type { DynamicFormFieldSchema } from '@/types/dynamic-form-schema-generated';\nimport { getFieldTypeLabel, type FieldType } from './dynamic-form-editor-utils';\n\nfunction isFieldType(value: string, types: FieldType[]): value is FieldType {\n return types.some((t) => t === value);\n}\n\nexport interface DynamicFormEditorFieldListPanelProps {\n fields: DynamicFormFieldSchema[];\n selectedFieldName: string | null;\n readonly: boolean;\n fieldTypes: FieldType[];\n hasFieldError: (fieldName: string) => boolean;\n onSelectFieldName: (fieldName: string) => void;\n onAddField: (type: FieldType) => void;\n}\n\nexport function DynamicFormEditorFieldListPanel(\n props: DynamicFormEditorFieldListPanelProps\n): React.ReactElement {\n const {\n fields,\n selectedFieldName,\n readonly,\n fieldTypes,\n hasFieldError,\n onSelectFieldName,\n onAddField,\n } = props;\n\n const isEmpty: boolean = fields.length === 0;\n\n const triggerPlaceholder: string = useMemo(() => {\n return readonly ? '추가(읽기 전용)' : '추가';\n }, [readonly]);\n\n return (\n <Card style={{ width: 340, padding: 12 }}>\n <Flex direction=\"column\" gap=\"3\">\n <Flex align=\"center\" justify=\"between\">\n <Typo variant=\"body\">필드</Typo>\n <Select.Root\n disabled={readonly}\n onValueChange={(v: string): void => {\n if (!isFieldType(v, fieldTypes)) return;\n onAddField(v);\n }}\n value=\"\"\n >\n <Select.Trigger placeholder={triggerPlaceholder} />\n <Select.Content>\n {fieldTypes.map((t) => (\n <Select.Item key={t} value={t}>\n {getFieldTypeLabel(t)}\n </Select.Item>\n ))}\n </Select.Content>\n </Select.Root>\n </Flex>\n\n <Flex direction=\"column\" gap=\"2\">\n {isEmpty ? (\n <Typo color=\"gray\" variant=\"caption\">\n 아직 필드가 없습니다.\n </Typo>\n ) : null}\n\n {fields.map((field) => {\n const isSelected: boolean = field.name === selectedFieldName;\n const hasError: boolean = hasFieldError(field.name);\n\n return (\n <Card\n error={isSelected ? hasError : undefined}\n key={field.name}\n onClick={(): void => { onSelectFieldName(field.name); }}\n style={{\n padding: 10,\n cursor: 'pointer',\n opacity: readonly ? 0.8 : 1,\n border: isSelected\n ? '1px solid var(--accent-9)'\n : '1px solid transparent',\n }}\n >\n <Box style={{ minWidth: 0 }}>\n <Typo\n style={{\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n }}\n variant=\"body\"\n >\n {field.label}\n </Typo>\n <Typo color=\"gray\" variant=\"caption\">\n {field.name} · {field.type}\n {field.required ? ' · required' : ''}\n </Typo>\n </Box>\n </Card>\n );\n })}\n </Flex>\n </Flex>\n </Card>\n );\n}\n\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA,SAAgB,eAAe;AAC/B,SAAS,WAAW;AA6CV,cACA,YADA;AArCV,SAAS,YAAY,OAAe,OAAwC;AAC1E,SAAO,MAAM,KAAK,CAAC,MAAM,MAAM,KAAK;AACtC;AAYO,SAAS,gCACd,OACoB;AACpB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,UAAmB,OAAO,WAAW;AAE3C,QAAM,qBAA6B,QAAQ,MAAM;AAC/C,WAAO,WAAW,4CAAc;AAAA,EAClC,GAAG,CAAC,QAAQ,CAAC;AAEb,SACE,oBAAC,QAAK,OAAO,EAAE,OAAO,KAAK,SAAS,GAAG,GACrC,+BAAC,QAAK,WAAU,UAAS,KAAI,KAC3B;AAAA,yBAAC,QAAK,OAAM,UAAS,SAAQ,WAC3B;AAAA,0BAAC,QAAK,SAAQ,QAAO,0BAAE;AAAA,MACvB;AAAA,QAAC,OAAO;AAAA,QAAP;AAAA,UACC,UAAU;AAAA,UACV,eAAe,CAAC,MAAoB;AAClC,gBAAI,CAAC,YAAY,GAAG,UAAU,EAAG;AACjC,uBAAW,CAAC;AAAA,UACd;AAAA,UACA,OAAM;AAAA,UAEN;AAAA,gCAAC,OAAO,SAAP,EAAe,aAAa,oBAAoB;AAAA,YACjD,oBAAC,OAAO,SAAP,EACE,qBAAW,IAAI,CAAC,MACf,oBAAC,OAAO,MAAP,EAAoB,OAAO,GACzB,4BAAkB,CAAC,KADJ,CAElB,CACD,GACH;AAAA;AAAA;AAAA,MACF;AAAA,OACF;AAAA,IAEA,qBAAC,QAAK,WAAU,UAAS,KAAI,KAC1B;AAAA,gBACC,oBAAC,QAAK,OAAM,QAAO,SAAQ,WAAU,uEAErC,IACE;AAAA,MAEH,OAAO,IAAI,CAAC,UAAU;AACrB,cAAM,aAAsB,MAAM,SAAS;AAC3C,cAAM,WAAoB,cAAc,MAAM,IAAI;AAElD,eACE;AAAA,UAAC;AAAA;AAAA,YACC,OAAO,aAAa,WAAW;AAAA,YAE/B,SAAS,MAAY;AAAE,gCAAkB,MAAM,IAAI;AAAA,YAAG;AAAA,YACtD,OAAO;AAAA,cACL,SAAS;AAAA,cACT,QAAQ;AAAA,cACR,SAAS,WAAW,MAAM;AAAA,cAC1B,QAAQ,aACJ,8BACA;AAAA,YACN;AAAA,YAEA,+BAAC,OAAI,OAAO,EAAE,UAAU,EAAE,GACxB;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,OAAO;AAAA,oBACL,YAAY;AAAA,oBACZ,UAAU;AAAA,oBACV,cAAc;AAAA,kBAChB;AAAA,kBACA,SAAQ;AAAA,kBAEP,gBAAM;AAAA;AAAA,cACT;AAAA,cACA,qBAAC,QAAK,OAAM,QAAO,SAAQ,WACxB;AAAA,sBAAM;AAAA,gBAAK;AAAA,gBAAI,MAAM;AAAA,gBACrB,MAAM,WAAW,mBAAgB;AAAA,iBACpC;AAAA,eACF;AAAA;AAAA,UA1BK,MAAM;AAAA,QA2Bb;AAAA,MAEJ,CAAC;AAAA,OACH;AAAA,KACF,GACF;AAEJ;","names":[]}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import {
|
|
2
|
+
getDynamicFormDisplayValue
|
|
3
|
+
} from "./chunk-K7LTEKQS.js";
|
|
4
|
+
|
|
5
|
+
// src/molecules/dynamic-form-response-item.tsx
|
|
6
|
+
function isRecord(value) {
|
|
7
|
+
return Boolean(value) && typeof value === "object" && !Array.isArray(value);
|
|
8
|
+
}
|
|
9
|
+
function DynamicFormResponseItem({
|
|
10
|
+
payload,
|
|
11
|
+
questionType,
|
|
12
|
+
config
|
|
13
|
+
}) {
|
|
14
|
+
const value = isRecord(payload) && "value" in payload ? payload.value : payload;
|
|
15
|
+
if (value === void 0 || value === null || value === "") {
|
|
16
|
+
return "\uC751\uB2F5 \uC5C6\uC74C";
|
|
17
|
+
}
|
|
18
|
+
if (config) {
|
|
19
|
+
const displayValue = getDynamicFormDisplayValue(config, value);
|
|
20
|
+
return displayValue === "" ? "\uC751\uB2F5 \uC5C6\uC74C" : displayValue;
|
|
21
|
+
}
|
|
22
|
+
switch (questionType) {
|
|
23
|
+
case "text":
|
|
24
|
+
case "textarea":
|
|
25
|
+
return String(value);
|
|
26
|
+
case "radio":
|
|
27
|
+
case "select":
|
|
28
|
+
return String(value);
|
|
29
|
+
case "checkbox":
|
|
30
|
+
case "choices":
|
|
31
|
+
if (Array.isArray(value)) {
|
|
32
|
+
return value.map((v) => String(v)).join(", ");
|
|
33
|
+
}
|
|
34
|
+
return String(value);
|
|
35
|
+
case "rating":
|
|
36
|
+
return String(value);
|
|
37
|
+
case "number":
|
|
38
|
+
return String(value);
|
|
39
|
+
case "yes_no":
|
|
40
|
+
if (value === true || value === "true" || value === "yes") {
|
|
41
|
+
return "\uB3D9\uC758";
|
|
42
|
+
}
|
|
43
|
+
if (value === false || value === "false" || value === "no") {
|
|
44
|
+
return "\uBE44\uB3D9\uC758";
|
|
45
|
+
}
|
|
46
|
+
return String(value);
|
|
47
|
+
default:
|
|
48
|
+
return String(value);
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
export {
|
|
53
|
+
DynamicFormResponseItem
|
|
54
|
+
};
|
|
55
|
+
//# sourceMappingURL=chunk-77H5BUYO.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/molecules/dynamic-form-response-item.tsx"],"sourcesContent":["import type { DynamicFormFieldSchema } from '@/types/dynamic-form-schema-generated';\nimport { getDynamicFormDisplayValue } from '@/utils/get-dynamic-form-display-value';\n\ninterface DynamicFormResponseItemProps {\n payload: unknown;\n questionType: string;\n config?: DynamicFormFieldSchema;\n}\n\nfunction isRecord(value: unknown): value is Record<string, unknown> {\n return Boolean(value) && typeof value === 'object' && !Array.isArray(value);\n}\n\nexport function DynamicFormResponseItem({\n payload,\n questionType,\n config,\n}: DynamicFormResponseItemProps): string {\n const value: unknown =\n isRecord(payload) && 'value' in payload ? payload.value : payload;\n\n // value가 없거나 빈 값인 경우\n if (value === undefined || value === null || value === '') {\n return '응답 없음';\n }\n\n if (config) {\n const displayValue: string = getDynamicFormDisplayValue(config, value);\n return displayValue === '' ? '응답 없음' : displayValue;\n }\n\n switch (questionType) {\n case 'text':\n case 'textarea':\n return String(value);\n case 'radio':\n case 'select':\n return String(value);\n case 'checkbox':\n case 'choices':\n if (Array.isArray(value)) {\n return value.map((v) => String(v)).join(', ');\n }\n return String(value);\n case 'rating':\n return String(value);\n case 'number':\n return String(value);\n case 'yes_no':\n if (value === true || value === 'true' || value === 'yes') {\n return '동의';\n }\n if (value === false || value === 'false' || value === 'no') {\n return '비동의';\n }\n return String(value);\n default:\n return String(value);\n }\n}\n"],"mappings":";;;;;AASA,SAAS,SAAS,OAAkD;AAClE,SAAO,QAAQ,KAAK,KAAK,OAAO,UAAU,YAAY,CAAC,MAAM,QAAQ,KAAK;AAC5E;AAEO,SAAS,wBAAwB;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AACF,GAAyC;AACvC,QAAM,QACJ,SAAS,OAAO,KAAK,WAAW,UAAU,QAAQ,QAAQ;AAG5D,MAAI,UAAU,UAAa,UAAU,QAAQ,UAAU,IAAI;AACzD,WAAO;AAAA,EACT;AAEA,MAAI,QAAQ;AACV,UAAM,eAAuB,2BAA2B,QAAQ,KAAK;AACrE,WAAO,iBAAiB,KAAK,8BAAU;AAAA,EACzC;AAEA,UAAQ,cAAc;AAAA,IACpB,KAAK;AAAA,IACL,KAAK;AACH,aAAO,OAAO,KAAK;AAAA,IACrB,KAAK;AAAA,IACL,KAAK;AACH,aAAO,OAAO,KAAK;AAAA,IACrB,KAAK;AAAA,IACL,KAAK;AACH,UAAI,MAAM,QAAQ,KAAK,GAAG;AACxB,eAAO,MAAM,IAAI,CAAC,MAAM,OAAO,CAAC,CAAC,EAAE,KAAK,IAAI;AAAA,MAC9C;AACA,aAAO,OAAO,KAAK;AAAA,IACrB,KAAK;AACH,aAAO,OAAO,KAAK;AAAA,IACrB,KAAK;AACH,aAAO,OAAO,KAAK;AAAA,IACrB,KAAK;AACH,UAAI,UAAU,QAAQ,UAAU,UAAU,UAAU,OAAO;AACzD,eAAO;AAAA,MACT;AACA,UAAI,UAAU,SAAS,UAAU,WAAW,UAAU,MAAM;AAC1D,eAAO;AAAA,MACT;AACA,aAAO,OAAO,KAAK;AAAA,IACrB;AACE,aAAO,OAAO,KAAK;AAAA,EACvB;AACF;","names":[]}
|
|
@@ -0,0 +1,196 @@
|
|
|
1
|
+
import {
|
|
2
|
+
CurriculumReviewSteps_default
|
|
3
|
+
} from "./chunk-E5W5TCRU.js";
|
|
4
|
+
import {
|
|
5
|
+
useCurriculumContext
|
|
6
|
+
} from "./chunk-WA5A2GB4.js";
|
|
7
|
+
import {
|
|
8
|
+
Dialog
|
|
9
|
+
} from "./chunk-AH4A53SZ.js";
|
|
10
|
+
import {
|
|
11
|
+
IconButton
|
|
12
|
+
} from "./chunk-XK6VEVOK.js";
|
|
13
|
+
import {
|
|
14
|
+
Box
|
|
15
|
+
} from "./chunk-4Y5BEXVN.js";
|
|
16
|
+
import {
|
|
17
|
+
Typo
|
|
18
|
+
} from "./chunk-PMJIFLDT.js";
|
|
19
|
+
import {
|
|
20
|
+
Flex
|
|
21
|
+
} from "./chunk-25HMMI7R.js";
|
|
22
|
+
import {
|
|
23
|
+
Button
|
|
24
|
+
} from "./chunk-ZVDAEY5Q.js";
|
|
25
|
+
import {
|
|
26
|
+
__spreadValues
|
|
27
|
+
} from "./chunk-CRTRMMJ7.js";
|
|
28
|
+
|
|
29
|
+
// src/molecules/curriculumV2/CurriculumContents/curriculum-review.tsx
|
|
30
|
+
import { useCallback, useMemo, useState } from "react";
|
|
31
|
+
import { Cross1Icon } from "@radix-ui/react-icons";
|
|
32
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
33
|
+
function CurriculumReview(props) {
|
|
34
|
+
const { item, sectionTitle } = props;
|
|
35
|
+
const { description, buttonTitle } = item;
|
|
36
|
+
const {
|
|
37
|
+
curriculum,
|
|
38
|
+
onReviewSubmit: _onReviewSubmit,
|
|
39
|
+
onReviewValueChange: _onReviewValueChange,
|
|
40
|
+
curriculumReviewAnswers,
|
|
41
|
+
tempCurriculumReviewAnswers,
|
|
42
|
+
curriculumCompleteMap
|
|
43
|
+
} = useCurriculumContext();
|
|
44
|
+
const [open, setOpen] = useState(false);
|
|
45
|
+
const [isChanged, setIsChanged] = useState(false);
|
|
46
|
+
const [closeDialogOpen, setCloseDialogOpen] = useState(false);
|
|
47
|
+
const onReviewValueChange = useCallback(
|
|
48
|
+
({
|
|
49
|
+
reviewId,
|
|
50
|
+
answer
|
|
51
|
+
}) => {
|
|
52
|
+
if (curriculumReviewAnswers[reviewId] === answer[reviewId]) {
|
|
53
|
+
return;
|
|
54
|
+
}
|
|
55
|
+
setIsChanged(true);
|
|
56
|
+
_onReviewValueChange({ reviewId, answer });
|
|
57
|
+
},
|
|
58
|
+
[_onReviewValueChange, curriculumReviewAnswers]
|
|
59
|
+
);
|
|
60
|
+
const onReviewSubmit = useCallback(
|
|
61
|
+
(values) => {
|
|
62
|
+
return _onReviewSubmit({ reviewId: item.uuid, answer: values }).then(
|
|
63
|
+
(result) => {
|
|
64
|
+
setIsChanged(false);
|
|
65
|
+
return result;
|
|
66
|
+
}
|
|
67
|
+
);
|
|
68
|
+
},
|
|
69
|
+
[item.uuid, _onReviewSubmit]
|
|
70
|
+
);
|
|
71
|
+
const onClickEndReview = useCallback(() => {
|
|
72
|
+
setOpen(false);
|
|
73
|
+
}, []);
|
|
74
|
+
const onClickCloseDrawer = useCallback(() => {
|
|
75
|
+
if (isChanged) {
|
|
76
|
+
setCloseDialogOpen(true);
|
|
77
|
+
} else {
|
|
78
|
+
setOpen(false);
|
|
79
|
+
}
|
|
80
|
+
}, [isChanged]);
|
|
81
|
+
const mode = useMemo(() => {
|
|
82
|
+
return item.questions.every(
|
|
83
|
+
(question) => curriculumReviewAnswers[question.uuid] && curriculumReviewAnswers[question.uuid] !== ""
|
|
84
|
+
) ? "edit" : "create";
|
|
85
|
+
}, [curriculumReviewAnswers, item.questions]);
|
|
86
|
+
const defaultValues = useMemo(() => {
|
|
87
|
+
const allAnswers = __spreadValues(__spreadValues({}, tempCurriculumReviewAnswers), curriculumReviewAnswers);
|
|
88
|
+
return item.questions.reduce((acc, question) => {
|
|
89
|
+
acc[question.uuid] = allAnswers[question.uuid] || "";
|
|
90
|
+
return acc;
|
|
91
|
+
}, {});
|
|
92
|
+
}, [curriculumReviewAnswers, item.questions, tempCurriculumReviewAnswers]);
|
|
93
|
+
const done = useMemo(() => {
|
|
94
|
+
return Boolean(curriculumCompleteMap[item.uuid]);
|
|
95
|
+
}, [curriculumCompleteMap, item.uuid]);
|
|
96
|
+
const bgColor = done ? "var(--color-panel-solid)" : void 0;
|
|
97
|
+
return /* @__PURE__ */ jsxs(Dialog.Root, { onOpenChange: setOpen, open, children: [
|
|
98
|
+
/* @__PURE__ */ jsxs(
|
|
99
|
+
Flex,
|
|
100
|
+
{
|
|
101
|
+
align: "center",
|
|
102
|
+
direction: "column",
|
|
103
|
+
height: "100%",
|
|
104
|
+
justify: "center",
|
|
105
|
+
px: "3",
|
|
106
|
+
py: "3",
|
|
107
|
+
style: {
|
|
108
|
+
backgroundImage: `url(https://tipp-coaching-live.s3.ap-northeast-2.amazonaws.com/images/curriculum_review_bg.png)`,
|
|
109
|
+
backgroundPosition: "center",
|
|
110
|
+
backgroundSize: "cover",
|
|
111
|
+
backgroundRepeat: "no-repeat"
|
|
112
|
+
},
|
|
113
|
+
width: "100%",
|
|
114
|
+
children: [
|
|
115
|
+
/* @__PURE__ */ jsx(Typo, { color: "gray", weight: "bold", children: curriculum.title }),
|
|
116
|
+
/* @__PURE__ */ jsx(Typo, { align: "center", as: "p", color: "gray", children: description }),
|
|
117
|
+
/* @__PURE__ */ jsx(Dialog.Trigger, { children: /* @__PURE__ */ jsx(
|
|
118
|
+
Button,
|
|
119
|
+
{
|
|
120
|
+
mt: "3",
|
|
121
|
+
style: { minWidth: 232, backgroundColor: bgColor },
|
|
122
|
+
variant: done ? "outline" : "solid",
|
|
123
|
+
children: /* @__PURE__ */ jsx(Typo, { truncate: true, children: done ? "\uB098\uC758 \uC751\uB2F5 \uB2E4\uC2DC\uBCF4\uAE30" : buttonTitle })
|
|
124
|
+
}
|
|
125
|
+
) })
|
|
126
|
+
]
|
|
127
|
+
}
|
|
128
|
+
),
|
|
129
|
+
/* @__PURE__ */ jsx(
|
|
130
|
+
Dialog.Content,
|
|
131
|
+
{
|
|
132
|
+
height: "100%",
|
|
133
|
+
hideCloseButton: true,
|
|
134
|
+
style: { borderRadius: 0, padding: 0 },
|
|
135
|
+
title: "",
|
|
136
|
+
width: "100%",
|
|
137
|
+
children: /* @__PURE__ */ jsxs(
|
|
138
|
+
Flex,
|
|
139
|
+
{
|
|
140
|
+
align: "center",
|
|
141
|
+
height: "100%",
|
|
142
|
+
justify: "center",
|
|
143
|
+
pb: "3",
|
|
144
|
+
position: "relative",
|
|
145
|
+
width: "100%",
|
|
146
|
+
children: [
|
|
147
|
+
/* @__PURE__ */ jsx(
|
|
148
|
+
CurriculumReviewSteps_default,
|
|
149
|
+
{
|
|
150
|
+
contents: item,
|
|
151
|
+
curriculum,
|
|
152
|
+
defaultValues,
|
|
153
|
+
done,
|
|
154
|
+
mode,
|
|
155
|
+
onClickEndReview,
|
|
156
|
+
onReviewValueChange,
|
|
157
|
+
onSubmit: onReviewSubmit,
|
|
158
|
+
title: sectionTitle
|
|
159
|
+
}
|
|
160
|
+
),
|
|
161
|
+
/* @__PURE__ */ jsx(Box, { position: "absolute", right: "16px", top: "16px", children: /* @__PURE__ */ jsxs(
|
|
162
|
+
IconButton,
|
|
163
|
+
{
|
|
164
|
+
color: "gray",
|
|
165
|
+
onClick: onClickCloseDrawer,
|
|
166
|
+
variant: "ghost",
|
|
167
|
+
children: [
|
|
168
|
+
/* @__PURE__ */ jsx(Box, { display: { initial: "none", md: "block" }, children: /* @__PURE__ */ jsx(Cross1Icon, { height: 20, width: 20 }) }),
|
|
169
|
+
/* @__PURE__ */ jsx(Box, { display: { initial: "block", md: "none" }, children: /* @__PURE__ */ jsx(Cross1Icon, { height: 16, width: 16 }) })
|
|
170
|
+
]
|
|
171
|
+
}
|
|
172
|
+
) }),
|
|
173
|
+
/* @__PURE__ */ jsx(Dialog.Root, { onOpenChange: setCloseDialogOpen, open: closeDialogOpen, children: /* @__PURE__ */ jsx(
|
|
174
|
+
Dialog.Content,
|
|
175
|
+
{
|
|
176
|
+
buttons: /* @__PURE__ */ jsxs(Flex, { gap: "3", justify: "end", children: [
|
|
177
|
+
/* @__PURE__ */ jsx(Dialog.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { color: "gray", variant: "outline", children: "\uB3CC\uC544\uAC00\uAE30" }) }),
|
|
178
|
+
/* @__PURE__ */ jsx(Dialog.Close, { children: /* @__PURE__ */ jsx(Button, { color: "red", onClick: onClickEndReview, children: "\uB098\uAC00\uAE30" }) })
|
|
179
|
+
] }),
|
|
180
|
+
title: "\uC791\uC131\uC744 \uC911\uB2E8\uD558\uC2DC\uACA0\uC2B5\uB2C8\uAE4C?",
|
|
181
|
+
children: /* @__PURE__ */ jsx(Typo, { children: "\uD398\uC774\uC9C0\uC5D0\uC11C \uBC97\uC5B4\uB098\uBA74 \uC791\uC131\uD55C \uB0B4\uC6A9\uC774 \uC800\uC7A5\uB418\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4." })
|
|
182
|
+
}
|
|
183
|
+
) })
|
|
184
|
+
]
|
|
185
|
+
}
|
|
186
|
+
)
|
|
187
|
+
}
|
|
188
|
+
)
|
|
189
|
+
] });
|
|
190
|
+
}
|
|
191
|
+
var curriculum_review_default = CurriculumReview;
|
|
192
|
+
|
|
193
|
+
export {
|
|
194
|
+
curriculum_review_default
|
|
195
|
+
};
|
|
196
|
+
//# sourceMappingURL=chunk-7FIDFRJL.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/molecules/curriculumV2/CurriculumContents/curriculum-review.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useState } from 'react';\nimport { Cross1Icon } from '@radix-ui/react-icons';\nimport { Box } from '@/atoms/box';\nimport { Button } from '@/atoms/button';\nimport { Dialog } from '@/atoms/dialog';\nimport { Flex } from '@/atoms/flex';\nimport { IconButton } from '@/atoms/icon-button';\nimport { Typo } from '@/atoms/typo';\nimport { type CurriculumReviewContents } from '@/types/curriculumContents.type';\nimport { useCurriculumContext } from '../curriculum-context';\nimport CurriculumReviewSteps from './CurriculumReviewSteps';\n\ninterface CurriculumReviewProps {\n item: CurriculumReviewContents;\n sectionTitle: string | undefined;\n}\n\nfunction CurriculumReview(props: CurriculumReviewProps): React.ReactNode {\n const { item, sectionTitle } = props;\n const { description, buttonTitle } = item;\n const {\n curriculum,\n onReviewSubmit: _onReviewSubmit,\n onReviewValueChange: _onReviewValueChange,\n curriculumReviewAnswers,\n tempCurriculumReviewAnswers,\n curriculumCompleteMap,\n } = useCurriculumContext();\n const [open, setOpen] = useState(false);\n const [isChanged, setIsChanged] = useState(false);\n const [closeDialogOpen, setCloseDialogOpen] = useState(false);\n\n const onReviewValueChange = useCallback(\n ({\n reviewId,\n answer,\n }: {\n reviewId: string;\n answer: Record<string, string>;\n }) => {\n if (curriculumReviewAnswers[reviewId] === answer[reviewId]) {\n return;\n }\n\n setIsChanged(true);\n _onReviewValueChange({ reviewId, answer });\n },\n [_onReviewValueChange, curriculumReviewAnswers]\n );\n\n const onReviewSubmit = useCallback(\n (values: Record<string, string>) => {\n return _onReviewSubmit({ reviewId: item.uuid, answer: values }).then(\n (result) => {\n setIsChanged(false);\n return result;\n }\n );\n },\n [item.uuid, _onReviewSubmit]\n );\n\n const onClickEndReview = useCallback(() => {\n setOpen(false);\n }, []);\n\n const onClickCloseDrawer = useCallback(() => {\n if (isChanged) {\n setCloseDialogOpen(true);\n } else {\n setOpen(false);\n }\n }, [isChanged]);\n\n const mode = useMemo(() => {\n return item.questions.every(\n (question) =>\n curriculumReviewAnswers[question.uuid] &&\n curriculumReviewAnswers[question.uuid] !== ''\n )\n ? 'edit'\n : 'create';\n }, [curriculumReviewAnswers, item.questions]);\n\n const defaultValues = useMemo(() => {\n const allAnswers = {\n ...tempCurriculumReviewAnswers,\n ...curriculumReviewAnswers,\n };\n\n return item.questions.reduce<Record<string, string>>((acc, question) => {\n acc[question.uuid] = allAnswers[question.uuid] || '';\n return acc;\n }, {});\n }, [curriculumReviewAnswers, item.questions, tempCurriculumReviewAnswers]);\n\n const done = useMemo(() => {\n return Boolean(curriculumCompleteMap[item.uuid]);\n }, [curriculumCompleteMap, item.uuid]);\n\n const bgColor = done ? 'var(--color-panel-solid)' : undefined;\n\n return (\n <Dialog.Root onOpenChange={setOpen} open={open}>\n <Flex\n align=\"center\"\n direction=\"column\"\n height=\"100%\"\n justify=\"center\"\n px=\"3\"\n py=\"3\"\n style={{\n backgroundImage: `url(https://tipp-coaching-live.s3.ap-northeast-2.amazonaws.com/images/curriculum_review_bg.png)`,\n backgroundPosition: 'center',\n backgroundSize: 'cover',\n backgroundRepeat: 'no-repeat',\n }}\n width=\"100%\"\n >\n <Typo color=\"gray\" weight=\"bold\">\n {curriculum.title}\n </Typo>\n <Typo align=\"center\" as=\"p\" color=\"gray\">\n {description}\n </Typo>\n\n <Dialog.Trigger>\n <Button\n mt=\"3\"\n style={{ minWidth: 232, backgroundColor: bgColor }}\n variant={done ? 'outline' : 'solid'}\n >\n <Typo truncate>{done ? '나의 응답 다시보기' : buttonTitle}</Typo>\n </Button>\n </Dialog.Trigger>\n </Flex>\n <Dialog.Content\n height=\"100%\"\n hideCloseButton\n style={{ borderRadius: 0, padding: 0 }}\n title=\"\"\n width=\"100%\"\n >\n <Flex\n align=\"center\"\n height=\"100%\"\n justify=\"center\"\n pb=\"3\"\n position=\"relative\"\n width=\"100%\"\n >\n <CurriculumReviewSteps\n contents={item}\n curriculum={curriculum}\n defaultValues={defaultValues}\n done={done}\n mode={mode}\n onClickEndReview={onClickEndReview}\n onReviewValueChange={onReviewValueChange}\n onSubmit={onReviewSubmit}\n title={sectionTitle}\n />\n {/* 닫기 버튼 */}\n <Box position=\"absolute\" right=\"16px\" top=\"16px\">\n <IconButton\n color=\"gray\"\n onClick={onClickCloseDrawer}\n variant=\"ghost\"\n >\n <Box display={{ initial: 'none', md: 'block' }}>\n <Cross1Icon height={20} width={20} />\n </Box>\n <Box display={{ initial: 'block', md: 'none' }}>\n <Cross1Icon height={16} width={16} />\n </Box>\n </IconButton>\n </Box>\n\n {/* 진짜 닫겠습니까 모달 */}\n <Dialog.Root onOpenChange={setCloseDialogOpen} open={closeDialogOpen}>\n <Dialog.Content\n buttons={\n <Flex gap=\"3\" justify=\"end\">\n <Dialog.Close asChild>\n <Button color=\"gray\" variant=\"outline\">\n 돌아가기\n </Button>\n </Dialog.Close>\n <Dialog.Close>\n <Button color=\"red\" onClick={onClickEndReview}>\n 나가기\n </Button>\n </Dialog.Close>\n </Flex>\n }\n title=\"작성을 중단하시겠습니까?\"\n >\n <Typo>페이지에서 벗어나면 작성한 내용이 저장되지 않습니다.</Typo>\n </Dialog.Content>\n </Dialog.Root>\n </Flex>\n </Dialog.Content>\n </Dialog.Root>\n );\n}\n\nexport default CurriculumReview;\n"],"mappings":"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","names":[]}
|