@tipp/ui 2.3.6 → 2.3.7
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.cjs.map +1 -1
- package/dist/app/index.js +61 -61
- package/dist/app/platform/coach-question-list.js +27 -27
- package/dist/app/platform/contents-card.js +27 -27
- package/dist/app/platform/curriculum-card.js +2 -2
- package/dist/app/platform/edit-coaching-time.cjs.map +1 -1
- package/dist/app/platform/edit-coaching-time.js +49 -49
- package/dist/app/platform/edit-service-type.cjs.map +1 -1
- package/dist/app/platform/edit-service-type.js +48 -48
- package/dist/app/platform/goal-manage-card-edit.cjs.map +1 -1
- package/dist/app/platform/goal-manage-card-edit.js +49 -49
- package/dist/app/platform/goal-manage-card-read.js +27 -27
- package/dist/app/platform/on-offline-radio-card.cjs.map +1 -1
- package/dist/app/platform/on-offline-radio-card.js +48 -48
- package/dist/app/platform/report-card.js +27 -27
- package/dist/app/platform/reservation-card.cjs.map +1 -1
- package/dist/app/platform/reservation-card.js +49 -49
- package/dist/app/platform/session-card.cjs.map +1 -1
- package/dist/app/platform/session-card.js +50 -50
- package/dist/app/platform/session-review-simple-read.js +27 -27
- package/dist/app/platform/userInfos/coaching-customer-info/index.js +29 -29
- package/dist/app/platform/userInfos/coaching-customer-info/large.js +27 -27
- package/dist/app/platform/userInfos/coaching-customer-info/medium.js +27 -27
- package/dist/app/platform/userInfos/coaching-customer-info/small.js +26 -26
- package/dist/app/platform/userInfos/session-user-info-detail.js +26 -26
- package/dist/app/platform/userInfos/utils.js +26 -26
- package/dist/atoms/index.js +63 -63
- package/dist/chunk-2LRQWOIG.js +63 -0
- package/dist/chunk-2LRQWOIG.js.map +1 -0
- package/dist/chunk-3SCBKVQQ.js +51 -0
- package/dist/chunk-3SCBKVQQ.js.map +1 -0
- package/dist/chunk-4ETFHDG5.js +174 -0
- package/dist/chunk-4ETFHDG5.js.map +1 -0
- package/dist/chunk-5ZBSW4UW.js +64 -0
- package/dist/chunk-5ZBSW4UW.js.map +1 -0
- package/dist/chunk-6DR4EIVU.js +196 -0
- package/dist/chunk-6DR4EIVU.js.map +1 -0
- package/dist/chunk-7FRK5KLV.js +89 -0
- package/dist/chunk-7FRK5KLV.js.map +1 -0
- package/dist/chunk-DDFCVUO2.js +196 -0
- package/dist/chunk-DDFCVUO2.js.map +1 -0
- package/dist/chunk-E72OTAC6.js +89 -0
- package/dist/chunk-E72OTAC6.js.map +1 -0
- package/dist/chunk-IB7IFIYY.js +165 -0
- package/dist/chunk-IB7IFIYY.js.map +1 -0
- package/dist/chunk-IH6VDQ6C.js +61 -0
- package/dist/chunk-IH6VDQ6C.js.map +1 -0
- package/dist/chunk-KD6EXWP7.js +74 -0
- package/dist/chunk-KD6EXWP7.js.map +1 -0
- package/dist/chunk-KXCFAFL3.js +151 -0
- package/dist/chunk-KXCFAFL3.js.map +1 -0
- package/dist/chunk-N45T3WWG.js +139 -0
- package/dist/chunk-N45T3WWG.js.map +1 -0
- package/dist/chunk-P6DHFQXU.js +30 -0
- package/dist/chunk-P6DHFQXU.js.map +1 -0
- package/dist/chunk-PB4O3U6O.js +49 -0
- package/dist/chunk-PB4O3U6O.js.map +1 -0
- package/dist/chunk-PBWH6CMJ.js +217 -0
- package/dist/chunk-PBWH6CMJ.js.map +1 -0
- package/dist/chunk-QIXJ27DM.js +99 -0
- package/dist/chunk-QIXJ27DM.js.map +1 -0
- package/dist/chunk-RAKVKAXI.js +144 -0
- package/dist/chunk-RAKVKAXI.js.map +1 -0
- package/dist/chunk-RFXVHZAN.js +64 -0
- package/dist/chunk-RFXVHZAN.js.map +1 -0
- package/dist/chunk-T4HTYL5M.js +139 -0
- package/dist/chunk-T4HTYL5M.js.map +1 -0
- package/dist/chunk-TYBX7Q7B.js +64 -0
- package/dist/chunk-TYBX7Q7B.js.map +1 -0
- package/dist/chunk-UMBRV35P.js +217 -0
- package/dist/chunk-UMBRV35P.js.map +1 -0
- package/dist/context/dynamic-form-context.cjs +3 -1
- package/dist/context/dynamic-form-context.cjs.map +1 -1
- package/dist/context/dynamic-form-context.d.cts +3 -1
- package/dist/context/dynamic-form-context.d.ts +3 -1
- package/dist/context/dynamic-form-context.js +1 -1
- package/dist/context/index.cjs +3 -1
- package/dist/context/index.cjs.map +1 -1
- package/dist/context/index.js +2 -2
- package/dist/index.cjs +23 -14
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +0 -1
- package/dist/index.js +114 -114
- package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/index.js +7 -7
- package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-body.js +6 -6
- package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-radio.js +2 -2
- package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-satisfaction-option.js +2 -2
- package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-satisfaction-text.js +1 -1
- package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-text.js +3 -3
- package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/index.js +10 -10
- package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/start-review.js +2 -2
- package/dist/molecules/curriculumV2/CurriculumContents/curriculum-review.js +11 -11
- package/dist/molecules/curriculumV2/CurriculumContents/index.js +12 -12
- package/dist/molecules/curriculumV2/CurriculumSidebar/index.js +4 -4
- package/dist/molecules/curriculumV2/CurriculumSidebar/sidebar-item.js +2 -2
- package/dist/molecules/curriculumV2/index.js +20 -20
- package/dist/molecules/dynamic-field.cjs +15 -9
- package/dist/molecules/dynamic-field.cjs.map +1 -1
- package/dist/molecules/dynamic-field.js +4 -4
- package/dist/molecules/dynamic-form.cjs +23 -14
- package/dist/molecules/dynamic-form.cjs.map +1 -1
- package/dist/molecules/dynamic-form.d.cts +2 -1
- package/dist/molecules/dynamic-form.d.ts +2 -1
- package/dist/molecules/dynamic-form.js +5 -5
- package/dist/molecules/expand-table/index.js +1 -1
- package/dist/molecules/index.cjs +23 -14
- package/dist/molecules/index.cjs.map +1 -1
- package/dist/molecules/index.js +44 -44
- package/dist/molecules/learning-post.js +2 -2
- package/dist/molecules/stepper.js +2 -2
- package/dist/molecules/tag-selector.js +3 -3
- package/package.json +1 -1
- package/src/context/dynamic-form-context.tsx +4 -0
- package/src/molecules/dynamic-field.tsx +12 -6
- package/src/molecules/dynamic-form.tsx +5 -3
|
@@ -0,0 +1,151 @@
|
|
|
1
|
+
import {
|
|
2
|
+
useCurriculumReviewContext
|
|
3
|
+
} from "./chunk-GMKRNFH5.js";
|
|
4
|
+
import {
|
|
5
|
+
getCurriculumIcon,
|
|
6
|
+
getCurriculumQuestionIconColor,
|
|
7
|
+
getCurriculumQuestionTypeDescription
|
|
8
|
+
} from "./chunk-JF7JAMOQ.js";
|
|
9
|
+
import {
|
|
10
|
+
Separator
|
|
11
|
+
} from "./chunk-HYITAA4J.js";
|
|
12
|
+
import {
|
|
13
|
+
Grid
|
|
14
|
+
} from "./chunk-EGEQY3KT.js";
|
|
15
|
+
import {
|
|
16
|
+
Heading
|
|
17
|
+
} from "./chunk-BESTU2AY.js";
|
|
18
|
+
import {
|
|
19
|
+
Box
|
|
20
|
+
} from "./chunk-4Y5BEXVN.js";
|
|
21
|
+
import {
|
|
22
|
+
Typo
|
|
23
|
+
} from "./chunk-PMJIFLDT.js";
|
|
24
|
+
import {
|
|
25
|
+
Flex
|
|
26
|
+
} from "./chunk-25HMMI7R.js";
|
|
27
|
+
import {
|
|
28
|
+
Button
|
|
29
|
+
} from "./chunk-ZVDAEY5Q.js";
|
|
30
|
+
import {
|
|
31
|
+
Badge
|
|
32
|
+
} from "./chunk-U3BQT7ZO.js";
|
|
33
|
+
|
|
34
|
+
// src/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/start-review.tsx
|
|
35
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
36
|
+
var renderPreviewContent = (args) => {
|
|
37
|
+
const { question } = args;
|
|
38
|
+
const Icon = getCurriculumIcon({
|
|
39
|
+
type: question.type,
|
|
40
|
+
icon: question.icon
|
|
41
|
+
});
|
|
42
|
+
const getDescription = () => {
|
|
43
|
+
return [
|
|
44
|
+
getCurriculumQuestionTypeDescription(question.type),
|
|
45
|
+
question.duration ? `${question.duration}\uBD84` : ""
|
|
46
|
+
].filter(Boolean).join(" | ");
|
|
47
|
+
};
|
|
48
|
+
return /* @__PURE__ */ jsxs(
|
|
49
|
+
Grid,
|
|
50
|
+
{
|
|
51
|
+
columns: "16px 1fr",
|
|
52
|
+
gap: "2",
|
|
53
|
+
px: "4",
|
|
54
|
+
py: "2",
|
|
55
|
+
width: "100%",
|
|
56
|
+
children: [
|
|
57
|
+
/* @__PURE__ */ jsx(Box, { mt: "1", children: /* @__PURE__ */ jsx(Icon, { color: getCurriculumQuestionIconColor(question.type) }) }),
|
|
58
|
+
/* @__PURE__ */ jsxs(Box, { children: [
|
|
59
|
+
/* @__PURE__ */ jsx(Typo, { as: "p", color: "gray", weight: "bold", children: question.title }),
|
|
60
|
+
/* @__PURE__ */ jsx(Typo, { color: "gray", children: getDescription() })
|
|
61
|
+
] })
|
|
62
|
+
]
|
|
63
|
+
},
|
|
64
|
+
question.uuid
|
|
65
|
+
);
|
|
66
|
+
};
|
|
67
|
+
var getReviewContentValue = (question, answer) => {
|
|
68
|
+
var _a, _b, _c;
|
|
69
|
+
if (question.type === "question_satisfaction_option") {
|
|
70
|
+
return (_c = (_b = (_a = question.options) == null ? void 0 : _a.find((option) => option.value === Number(answer))) == null ? void 0 : _b.label) != null ? _c : "";
|
|
71
|
+
}
|
|
72
|
+
return answer;
|
|
73
|
+
};
|
|
74
|
+
var renderReviewContent = (args) => {
|
|
75
|
+
const { question, answer } = args;
|
|
76
|
+
const Icon = getCurriculumIcon({
|
|
77
|
+
type: question.type,
|
|
78
|
+
icon: question.icon
|
|
79
|
+
});
|
|
80
|
+
const color = getCurriculumQuestionIconColor(question.type);
|
|
81
|
+
const badgeColor = ["question_radio", "question_satisfaction_option"].includes(question.type) ? "accent" : "neutral";
|
|
82
|
+
const value = getReviewContentValue(question, answer);
|
|
83
|
+
return /* @__PURE__ */ jsxs(
|
|
84
|
+
Grid,
|
|
85
|
+
{
|
|
86
|
+
columns: "16px 1fr",
|
|
87
|
+
gap: "2",
|
|
88
|
+
px: "4",
|
|
89
|
+
py: "2",
|
|
90
|
+
width: "100%",
|
|
91
|
+
children: [
|
|
92
|
+
/* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Icon, { color }) }),
|
|
93
|
+
/* @__PURE__ */ jsxs(Box, { children: [
|
|
94
|
+
/* @__PURE__ */ jsx(Typo, { as: "p", color: "gray", mb: "2", weight: "bold", children: question.title }),
|
|
95
|
+
/* @__PURE__ */ jsx(Badge, { color: badgeColor, size: "large", style: { whiteSpace: "break-spaces", lineBreak: "anywhere" }, children: value || "(\uBBF8 \uC751\uB2F5)" })
|
|
96
|
+
] })
|
|
97
|
+
]
|
|
98
|
+
},
|
|
99
|
+
question.uuid
|
|
100
|
+
);
|
|
101
|
+
};
|
|
102
|
+
function StartReview({ onStart }) {
|
|
103
|
+
const { curriculum, reviewContents, sectionTitle, done, formik } = useCurriculumReviewContext();
|
|
104
|
+
return /* @__PURE__ */ jsx(
|
|
105
|
+
Flex,
|
|
106
|
+
{
|
|
107
|
+
align: "center",
|
|
108
|
+
direction: "column",
|
|
109
|
+
height: "100%",
|
|
110
|
+
justify: "center",
|
|
111
|
+
width: "100%",
|
|
112
|
+
children: /* @__PURE__ */ jsxs(
|
|
113
|
+
Flex,
|
|
114
|
+
{
|
|
115
|
+
align: "center",
|
|
116
|
+
direction: "column",
|
|
117
|
+
height: "100%",
|
|
118
|
+
justify: "center",
|
|
119
|
+
maxWidth: "650px",
|
|
120
|
+
pb: { initial: "6", sm: "0" },
|
|
121
|
+
pt: { initial: "4", sm: "0" },
|
|
122
|
+
px: { initial: "4", sm: "0" },
|
|
123
|
+
width: "100%",
|
|
124
|
+
children: [
|
|
125
|
+
/* @__PURE__ */ jsx(Typo, { color: "gray", mb: "1", children: curriculum.title }),
|
|
126
|
+
/* @__PURE__ */ jsx(Heading, { variant: "heading3", children: reviewContents.title }),
|
|
127
|
+
/* @__PURE__ */ jsx(Separator, { my: "4", style: { width: 100 } }),
|
|
128
|
+
/* @__PURE__ */ jsxs(Typo, { align: "left", as: "p", color: "gray", mb: "4", children: [
|
|
129
|
+
/* @__PURE__ */ jsx(Typo, { as: "span", weight: "bold", children: sectionTitle }),
|
|
130
|
+
" ",
|
|
131
|
+
/* @__PURE__ */ jsx(Typo, { children: reviewContents.description })
|
|
132
|
+
] }),
|
|
133
|
+
/* @__PURE__ */ jsx(Box, { mb: "5", overflowY: "auto", width: "100%", children: reviewContents.questions.map((question) => {
|
|
134
|
+
if (done) {
|
|
135
|
+
return renderReviewContent({ question, answer: formik.values.answers[question.uuid] });
|
|
136
|
+
}
|
|
137
|
+
return renderPreviewContent({ question });
|
|
138
|
+
}) }),
|
|
139
|
+
/* @__PURE__ */ jsx(Button, { color: "yellow", onClick: onStart, variant: done ? "outline" : "solid", children: done ? "\uB098\uC758 \uC751\uB2F5 \uC218\uC815\uD558\uAE30" : reviewContents.buttonTitle })
|
|
140
|
+
]
|
|
141
|
+
}
|
|
142
|
+
)
|
|
143
|
+
}
|
|
144
|
+
);
|
|
145
|
+
}
|
|
146
|
+
var start_review_default = StartReview;
|
|
147
|
+
|
|
148
|
+
export {
|
|
149
|
+
start_review_default
|
|
150
|
+
};
|
|
151
|
+
//# sourceMappingURL=chunk-KXCFAFL3.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/start-review.tsx"],"sourcesContent":["import React from 'react'; \nimport type { BadgeProps } from '@/atoms/badge';\nimport { Badge } from '@/atoms/badge';\nimport { Box } from '@/atoms/box';\nimport { Button } from '@/atoms/button';\nimport { Flex } from '@/atoms/flex';\nimport { Grid } from '@/atoms/grid';\nimport { Heading } from '@/atoms/heading';\nimport { Separator } from '@/atoms/separator';\nimport { Typo } from '@/atoms/typo';\nimport {\n getCurriculumIcon,\n getCurriculumQuestionIconColor,\n getCurriculumQuestionTypeDescription,\n} from '@/utils/curriculum.utils';\nimport type { ReviewQuestionElement } from '@/types/curriculum.type';\nimport { useCurriculumReviewContext } from './curriculum-review-context';\n\ninterface StartReviewProps {\n onStart: () => void;\n}\n\n\nconst renderPreviewContent = (args: {\n question: ReviewQuestionElement;\n}):React.ReactElement => {\n const { question } = args;\n const Icon = getCurriculumIcon({\n type: question.type,\n icon: question.icon,\n });\n const getDescription = (): string => {\n return [\n getCurriculumQuestionTypeDescription(question.type),\n question.duration ? `${question.duration}분` : '',\n ]\n .filter(Boolean)\n .join(' | ');\n };\n\n return (\n <Grid\n columns=\"16px 1fr\"\n gap=\"2\"\n key={question.uuid}\n px=\"4\"\n py=\"2\"\n width=\"100%\"\n >\n <Box mt=\"1\">\n <Icon color={getCurriculumQuestionIconColor(question.type)} />\n </Box>\n <Box>\n <Typo as=\"p\" color=\"gray\" weight=\"bold\">\n {question.title}\n </Typo>\n <Typo color=\"gray\">{getDescription()}</Typo>\n </Box>\n </Grid>\n );\n};\n\n\nconst getReviewContentValue = (question: ReviewQuestionElement, answer: string): string => {\n if(question.type === 'question_satisfaction_option'){ \n return question.options?.find((option)=>option.value === Number(answer))?.label ?? '';\n }\n return answer\n}\n\n\nconst renderReviewContent = (args: {\n question: ReviewQuestionElement;\n answer: string;\n}):React.ReactElement => {\n const { question, answer } = args;\n const Icon = getCurriculumIcon({\n type: question.type,\n icon: question.icon,\n }); \n\n const color = getCurriculumQuestionIconColor(question.type);\n const badgeColor: BadgeProps['color'] = ['question_radio','question_satisfaction_option'].includes(question.type) ? 'accent' : 'neutral';\n const value = getReviewContentValue(question, answer);\n\n return (\n <Grid\n columns=\"16px 1fr\"\n gap=\"2\"\n key={question.uuid}\n px=\"4\"\n py=\"2\"\n width=\"100%\"\n >\n <Box>\n <Icon color={color} />\n </Box>\n\n <Box>\n <Typo as=\"p\" color=\"gray\" mb=\"2\" weight=\"bold\">{question.title}</Typo>\n <Badge color={badgeColor} size=\"large\" style={{whiteSpace: 'break-spaces', lineBreak: 'anywhere'}}>\n {value || '(미 응답)'}\n </Badge>\n </Box>\n \n </Grid>\n );\n};\n\nfunction StartReview({ onStart }: StartReviewProps): React.ReactNode {\n const { curriculum, reviewContents, sectionTitle, done,formik } =\n useCurriculumReviewContext();\n\n return (\n <Flex\n align=\"center\"\n direction=\"column\"\n height=\"100%\"\n justify=\"center\"\n width=\"100%\"\n >\n <Flex\n align=\"center\"\n direction=\"column\"\n height=\"100%\"\n justify=\"center\"\n maxWidth=\"650px\"\n pb={{initial: '6', sm: '0'}}\n pt={{initial: '4', sm: '0'}}\n px={{initial: '4', sm: '0'}}\n width=\"100%\"\n >\n <Typo color=\"gray\" mb=\"1\">{curriculum.title}</Typo>\n <Heading variant=\"heading3\">{reviewContents.title}</Heading>\n <Separator my=\"4\" style={{ width: 100 }} />\n\n <Typo align=\"left\" as=\"p\" color=\"gray\" mb=\"4\">\n <Typo as=\"span\" weight=\"bold\">\n {sectionTitle}\n </Typo>\n {' '}\n <Typo>{reviewContents.description}</Typo>\n </Typo>\n\n <Box mb=\"5\" overflowY=\"auto\" width=\"100%\">\n {reviewContents.questions.map((question)=>{\n if(done){\n return renderReviewContent({ question, answer: formik.values.answers[question.uuid]});\n }\n return renderPreviewContent({ question });\n })}\n </Box>\n <Button color=\"yellow\" onClick={onStart} variant={done ? 'outline' : 'solid'}>\n {done ? '나의 응답 수정하기' : reviewContents.buttonTitle}\n </Button>\n </Flex>\n </Flex>\n );\n}\n\nexport default StartReview;\n"],"mappings":"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","names":[]}
|
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
import {
|
|
2
|
+
useDynamicForm
|
|
3
|
+
} from "./chunk-PB4O3U6O.js";
|
|
4
|
+
import {
|
|
5
|
+
TextArea
|
|
6
|
+
} from "./chunk-5XYPLDI5.js";
|
|
7
|
+
import {
|
|
8
|
+
TextField
|
|
9
|
+
} from "./chunk-6NPTJBFE.js";
|
|
10
|
+
import {
|
|
11
|
+
Select
|
|
12
|
+
} from "./chunk-X2GMDZ7M.js";
|
|
13
|
+
import {
|
|
14
|
+
RadioGroup
|
|
15
|
+
} from "./chunk-6DJOIRMF.js";
|
|
16
|
+
import {
|
|
17
|
+
CheckboxGroup
|
|
18
|
+
} from "./chunk-W7X7KSJP.js";
|
|
19
|
+
import {
|
|
20
|
+
Checkbox
|
|
21
|
+
} from "./chunk-VYCYVN3L.js";
|
|
22
|
+
import {
|
|
23
|
+
__spreadProps,
|
|
24
|
+
__spreadValues
|
|
25
|
+
} from "./chunk-CRTRMMJ7.js";
|
|
26
|
+
|
|
27
|
+
// src/molecules/dynamic-field.tsx
|
|
28
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
29
|
+
function DynamicFormField({
|
|
30
|
+
field
|
|
31
|
+
}) {
|
|
32
|
+
const {
|
|
33
|
+
getFieldValue,
|
|
34
|
+
getFieldError,
|
|
35
|
+
getFieldTouched,
|
|
36
|
+
setFieldValue,
|
|
37
|
+
handleChange,
|
|
38
|
+
handleBlur,
|
|
39
|
+
readonly
|
|
40
|
+
} = useDynamicForm();
|
|
41
|
+
const { name, type } = field;
|
|
42
|
+
const value = getFieldValue(name);
|
|
43
|
+
const error = getFieldError(name);
|
|
44
|
+
const touched = getFieldTouched(name);
|
|
45
|
+
const hasError = Boolean(error && touched);
|
|
46
|
+
const commonProps = {
|
|
47
|
+
name,
|
|
48
|
+
value: String(value || ""),
|
|
49
|
+
onChange: readonly ? void 0 : handleChange,
|
|
50
|
+
onBlur: readonly ? void 0 : handleBlur,
|
|
51
|
+
error: hasError,
|
|
52
|
+
disabled: readonly
|
|
53
|
+
};
|
|
54
|
+
switch (type) {
|
|
55
|
+
case "short_text":
|
|
56
|
+
case "email":
|
|
57
|
+
return /* @__PURE__ */ jsx(
|
|
58
|
+
TextField.Root,
|
|
59
|
+
__spreadProps(__spreadValues({}, commonProps), {
|
|
60
|
+
placeholder: field.placeholder,
|
|
61
|
+
type: type === "short_text" ? "text" : type
|
|
62
|
+
})
|
|
63
|
+
);
|
|
64
|
+
case "number":
|
|
65
|
+
return /* @__PURE__ */ jsx(
|
|
66
|
+
TextField.Root,
|
|
67
|
+
__spreadProps(__spreadValues({}, commonProps), {
|
|
68
|
+
inputMode: "numeric",
|
|
69
|
+
pattern: "[0-9]*",
|
|
70
|
+
placeholder: field.placeholder,
|
|
71
|
+
type: "number"
|
|
72
|
+
})
|
|
73
|
+
);
|
|
74
|
+
case "long_text":
|
|
75
|
+
return /* @__PURE__ */ jsx(TextArea, __spreadProps(__spreadValues({}, commonProps), { placeholder: field.placeholder, rows: 4 }));
|
|
76
|
+
case "dropdown":
|
|
77
|
+
return /* @__PURE__ */ jsxs(
|
|
78
|
+
Select.Root,
|
|
79
|
+
{
|
|
80
|
+
onValueChange: readonly ? void 0 : (newValue) => {
|
|
81
|
+
void setFieldValue(name, newValue);
|
|
82
|
+
},
|
|
83
|
+
value,
|
|
84
|
+
disabled: readonly,
|
|
85
|
+
children: [
|
|
86
|
+
/* @__PURE__ */ jsx(Select.Trigger, { placeholder: field.placeholder }),
|
|
87
|
+
/* @__PURE__ */ jsx(Select.Content, { children: field.options.map((option) => /* @__PURE__ */ jsx(Select.Item, { value: String(option.value), children: option.label }, option.value)) })
|
|
88
|
+
]
|
|
89
|
+
}
|
|
90
|
+
);
|
|
91
|
+
case "choice":
|
|
92
|
+
return /* @__PURE__ */ jsx(
|
|
93
|
+
RadioGroup.Root,
|
|
94
|
+
{
|
|
95
|
+
onValueChange: readonly ? void 0 : (newValue) => {
|
|
96
|
+
void setFieldValue(name, newValue);
|
|
97
|
+
},
|
|
98
|
+
orientation: field.orientation,
|
|
99
|
+
value: String(value || ""),
|
|
100
|
+
disabled: readonly,
|
|
101
|
+
children: field.options.map((option) => /* @__PURE__ */ jsx(RadioGroup.Item, { value: String(option.value), children: option.label }, option.value))
|
|
102
|
+
}
|
|
103
|
+
);
|
|
104
|
+
case "choices":
|
|
105
|
+
return /* @__PURE__ */ jsx(
|
|
106
|
+
CheckboxGroup.Root,
|
|
107
|
+
{
|
|
108
|
+
onValueChange: readonly ? void 0 : (newValue) => {
|
|
109
|
+
void setFieldValue(name, newValue);
|
|
110
|
+
},
|
|
111
|
+
orientation: field.orientation,
|
|
112
|
+
value: Array.isArray(value) ? value.map(String) : [],
|
|
113
|
+
disabled: readonly,
|
|
114
|
+
children: field.options.map((option) => /* @__PURE__ */ jsx(CheckboxGroup.Item, { value: String(option.value), children: option.label }, option.value))
|
|
115
|
+
}
|
|
116
|
+
);
|
|
117
|
+
case "yes_no":
|
|
118
|
+
return /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "flex-start", gap: "8px" }, children: [
|
|
119
|
+
/* @__PURE__ */ jsx(
|
|
120
|
+
Checkbox,
|
|
121
|
+
{
|
|
122
|
+
checked: Boolean(value),
|
|
123
|
+
onCheckedChange: readonly ? void 0 : (checked) => {
|
|
124
|
+
void setFieldValue(name, checked);
|
|
125
|
+
},
|
|
126
|
+
disabled: readonly
|
|
127
|
+
}
|
|
128
|
+
),
|
|
129
|
+
field.description ? /* @__PURE__ */ jsx("div", { style: { fontSize: "14px", color: "#666", lineHeight: "1.4" }, children: field.description }) : null
|
|
130
|
+
] });
|
|
131
|
+
default:
|
|
132
|
+
return null;
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
export {
|
|
137
|
+
DynamicFormField
|
|
138
|
+
};
|
|
139
|
+
//# sourceMappingURL=chunk-N45T3WWG.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/molecules/dynamic-field.tsx"],"sourcesContent":["\nimport { useDynamicForm } from '../context/dynamic-form-context';\nimport { TextField } from '../atoms/text-field';\nimport { TextArea } from '../atoms/text-area';\nimport { Select } from '../atoms/select';\nimport { CheckboxGroup } from '../atoms/check-box-group';\nimport { RadioGroup } from '../atoms/radio-group';\nimport { Checkbox } from '../atoms/check-box';\nimport type { DynamicFormFieldSchema } from '../types/dynamic-form-schema-generated';\n\ninterface DynamicFormFieldRendererProps {\n field: DynamicFormFieldSchema;\n}\n\nexport function DynamicFormField({\n field,\n}: DynamicFormFieldRendererProps): React.ReactElement | null {\n const {\n getFieldValue,\n getFieldError,\n getFieldTouched,\n setFieldValue,\n handleChange,\n handleBlur,\n readonly,\n } = useDynamicForm();\n const { name, type } = field;\n\n const value = getFieldValue(name);\n const error = getFieldError(name);\n const touched = getFieldTouched(name);\n const hasError = Boolean(error && touched);\n\n const commonProps = {\n name,\n value: String(value || ''),\n onChange: readonly ? undefined : handleChange,\n onBlur: readonly ? undefined : handleBlur,\n error: hasError,\n disabled: readonly,\n };\n\n switch (type) {\n case 'short_text':\n case 'email':\n return (\n <TextField.Root \n {...commonProps} \n placeholder={field.placeholder}\n type={type === 'short_text' ? 'text' : type}\n />\n );\n case 'number':\n return (\n <TextField.Root\n {...commonProps}\n inputMode=\"numeric\"\n pattern=\"[0-9]*\"\n placeholder={field.placeholder}\n type=\"number\"\n />\n );\n case 'long_text':\n return <TextArea {...commonProps} placeholder={field.placeholder} rows={4} />;\n\n case 'dropdown':\n return (\n <Select.Root\n onValueChange={readonly ? undefined : (newValue: string) => {\n void setFieldValue(name, newValue);\n }}\n value={value as string}\n disabled={readonly}\n >\n <Select.Trigger placeholder={field.placeholder} />\n <Select.Content>\n {field.options.map((option) => (\n <Select.Item key={option.value} value={String(option.value)}>\n {option.label}\n </Select.Item>\n ))}\n </Select.Content>\n </Select.Root>\n );\n\n case 'choice':\n return (\n <RadioGroup.Root\n onValueChange={readonly ? undefined : (newValue: string) => {\n void setFieldValue(name, newValue);\n }}\n orientation={field.orientation}\n value={String(value || '')}\n disabled={readonly}\n >\n {field.options.map((option) => (\n <RadioGroup.Item key={option.value} value={String(option.value)}>\n {option.label}\n </RadioGroup.Item>\n ))}\n </RadioGroup.Root>\n );\n\n case 'choices':\n return (\n <CheckboxGroup.Root\n onValueChange={readonly ? undefined : (newValue: string[]) => {\n void setFieldValue(name, newValue);\n }}\n orientation={field.orientation}\n value={Array.isArray(value) ? value.map(String) : []}\n disabled={readonly}\n >\n {field.options.map((option) => (\n <CheckboxGroup.Item key={option.value} value={String(option.value)}>\n {option.label}\n </CheckboxGroup.Item>\n ))}\n </CheckboxGroup.Root>\n );\n\n case 'yes_no':\n return (\n <div style={{ display: 'flex', alignItems: 'flex-start', gap: '8px' }}>\n <Checkbox\n checked={Boolean(value)}\n onCheckedChange={readonly ? undefined : (checked: boolean) => {\n void setFieldValue(name, checked);\n }}\n disabled={readonly}\n />\n {field.description ? (\n <div style={{ fontSize: '14px', color: '#666', lineHeight: '1.4' }}>\n {field.description}\n </div>\n ) : null}\n </div>\n );\n\n default:\n return null;\n }\n}\n"],"mappings":"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","names":[]}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import {
|
|
2
|
+
CoachingCustomerInfoSmall
|
|
3
|
+
} from "./chunk-YADSNPMG.js";
|
|
4
|
+
import {
|
|
5
|
+
CoachingCustomerInfoLarge
|
|
6
|
+
} from "./chunk-RFXVHZAN.js";
|
|
7
|
+
import {
|
|
8
|
+
CoachingCustomerInfoMedium
|
|
9
|
+
} from "./chunk-KD6EXWP7.js";
|
|
10
|
+
import {
|
|
11
|
+
Box
|
|
12
|
+
} from "./chunk-4Y5BEXVN.js";
|
|
13
|
+
import {
|
|
14
|
+
__spreadValues
|
|
15
|
+
} from "./chunk-CRTRMMJ7.js";
|
|
16
|
+
|
|
17
|
+
// src/app/platform/userInfos/coaching-customer-info/index.tsx
|
|
18
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
19
|
+
function CoachingCustomerInfo(props) {
|
|
20
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
21
|
+
/* @__PURE__ */ jsx(Box, { display: { initial: "block", sm: "none", md: "none" }, children: /* @__PURE__ */ jsx(CoachingCustomerInfoSmall, __spreadValues({}, props)) }),
|
|
22
|
+
/* @__PURE__ */ jsx(Box, { display: { initial: "none", sm: "block", md: "none" }, children: /* @__PURE__ */ jsx(CoachingCustomerInfoMedium, __spreadValues({}, props)) }),
|
|
23
|
+
/* @__PURE__ */ jsx(Box, { display: { initial: "none", sm: "none", md: "block" }, children: /* @__PURE__ */ jsx(CoachingCustomerInfoLarge, __spreadValues({}, props)) })
|
|
24
|
+
] });
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
export {
|
|
28
|
+
CoachingCustomerInfo
|
|
29
|
+
};
|
|
30
|
+
//# sourceMappingURL=chunk-P6DHFQXU.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/app/platform/userInfos/coaching-customer-info/index.tsx"],"sourcesContent":["import React from 'react';\nimport { Box } from '../../../../atoms';\nimport type { CoachingCustomerInfoProps } from '../utils';\nimport { CoachingCustomerInfoSmall } from './small';\nimport { CoachingCustomerInfoMedium } from './medium';\nimport { CoachingCustomerInfoLarge } from './large';\n\nexport {\n CoachingCustomerInfoLarge,\n CoachingCustomerInfoMedium,\n CoachingCustomerInfoSmall,\n};\n\nexport { type CoachingCustomerInfoProps };\n\nexport function CoachingCustomerInfo(\n props: CoachingCustomerInfoProps\n): React.ReactNode {\n return (\n <>\n <Box display={{ initial: 'block', sm: 'none', md: 'none' }}>\n <CoachingCustomerInfoSmall {...props} />\n </Box>\n <Box display={{ initial: 'none', sm: 'block', md: 'none' }}>\n <CoachingCustomerInfoMedium {...props} />\n </Box>\n <Box display={{ initial: 'none', sm: 'none', md: 'block' }}>\n <CoachingCustomerInfoLarge {...props} />\n </Box>\n </>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAmBI,mBAEI,KAFJ;AAJG,SAAS,qBACd,OACiB;AACjB,SACE,iCACE;AAAA,wBAAC,OAAI,SAAS,EAAE,SAAS,SAAS,IAAI,QAAQ,IAAI,OAAO,GACvD,8BAAC,8CAA8B,MAAO,GACxC;AAAA,IACA,oBAAC,OAAI,SAAS,EAAE,SAAS,QAAQ,IAAI,SAAS,IAAI,OAAO,GACvD,8BAAC,+CAA+B,MAAO,GACzC;AAAA,IACA,oBAAC,OAAI,SAAS,EAAE,SAAS,QAAQ,IAAI,QAAQ,IAAI,QAAQ,GACvD,8BAAC,8CAA8B,MAAO,GACxC;AAAA,KACF;AAEJ;","names":[]}
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import {
|
|
2
|
+
Form
|
|
3
|
+
} from "./chunk-2OMSNCRH.js";
|
|
4
|
+
import {
|
|
5
|
+
__async
|
|
6
|
+
} from "./chunk-CRTRMMJ7.js";
|
|
7
|
+
|
|
8
|
+
// src/context/dynamic-form-context.tsx
|
|
9
|
+
import { createContext, useContext } from "react";
|
|
10
|
+
import { jsx } from "react/jsx-runtime";
|
|
11
|
+
var DynamicFormContext = createContext(null);
|
|
12
|
+
function DynamicFormProvider({
|
|
13
|
+
children,
|
|
14
|
+
fields,
|
|
15
|
+
formik,
|
|
16
|
+
readonly = false
|
|
17
|
+
}) {
|
|
18
|
+
const contextValue = {
|
|
19
|
+
formik,
|
|
20
|
+
fields,
|
|
21
|
+
readonly,
|
|
22
|
+
getFieldValue: (name) => formik.values[name],
|
|
23
|
+
getFieldError: (name) => {
|
|
24
|
+
const error = formik.errors[name];
|
|
25
|
+
const touched = formik.touched[name];
|
|
26
|
+
return touched && error ? String(error) : void 0;
|
|
27
|
+
},
|
|
28
|
+
getFieldTouched: (name) => Boolean(formik.touched[name]),
|
|
29
|
+
setFieldValue: (field, value) => __async(null, null, function* () {
|
|
30
|
+
yield formik.setFieldValue(field, value);
|
|
31
|
+
}),
|
|
32
|
+
handleChange: formik.handleChange,
|
|
33
|
+
handleBlur: formik.handleBlur
|
|
34
|
+
};
|
|
35
|
+
return /* @__PURE__ */ jsx(DynamicFormContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(Form.Root, { onSubmit: formik.handleSubmit, children }) });
|
|
36
|
+
}
|
|
37
|
+
function useDynamicForm() {
|
|
38
|
+
const context = useContext(DynamicFormContext);
|
|
39
|
+
if (!context) {
|
|
40
|
+
throw new Error("useDynamicForm must be used within a DynamicFormProvider");
|
|
41
|
+
}
|
|
42
|
+
return context;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
export {
|
|
46
|
+
DynamicFormProvider,
|
|
47
|
+
useDynamicForm
|
|
48
|
+
};
|
|
49
|
+
//# sourceMappingURL=chunk-PB4O3U6O.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/context/dynamic-form-context.tsx"],"sourcesContent":["import React, { createContext, useContext } from 'react';\nimport type { FormikProps } from 'formik';\nimport { Form } from '@/molecules/form/form';\nimport type { DynamicFormFieldSchema } from '@/types/dynamic-form-schema-generated';\n\nexport interface DynamicFormContextValue {\n formik: FormikProps<Record<string, unknown>>;\n fields: DynamicFormFieldSchema[];\n readonly: boolean;\n getFieldValue: (name: string) => unknown;\n getFieldError: (name: string) => string | undefined;\n getFieldTouched: (name: string) => boolean;\n setFieldValue: (field: string, value: unknown) => Promise<void>;\n handleChange: (e: React.ChangeEvent<unknown>) => void;\n handleBlur: (e: React.FocusEvent<unknown>) => void;\n}\n\nconst DynamicFormContext = createContext<DynamicFormContextValue | null>(null);\n\ninterface DynamicFormProviderProps {\n children: React.ReactNode;\n fields: DynamicFormFieldSchema[];\n formik: FormikProps<Record<string, unknown>>;\n readonly?: boolean;\n}\n\nexport function DynamicFormProvider({\n children,\n fields,\n formik,\n readonly = false,\n}: DynamicFormProviderProps): React.ReactElement {\n const contextValue: DynamicFormContextValue = {\n formik,\n fields,\n readonly,\n getFieldValue: (name: string): unknown => formik.values[name],\n getFieldError: (name: string): string | undefined => {\n const error = formik.errors[name];\n const touched = formik.touched[name];\n return touched && error ? String(error) : undefined;\n },\n getFieldTouched: (name: string): boolean => Boolean(formik.touched[name]),\n setFieldValue: async (field: string, value: unknown): Promise<void> => {\n await formik.setFieldValue(field, value);\n },\n handleChange: formik.handleChange,\n handleBlur: formik.handleBlur, \n };\n\n return (\n <DynamicFormContext.Provider value={contextValue}>\n <Form.Root onSubmit={formik.handleSubmit}>{children}</Form.Root>\n </DynamicFormContext.Provider>\n );\n}\n\nexport function useDynamicForm(): DynamicFormContextValue {\n const context = useContext(DynamicFormContext);\n\n if (!context) {\n throw new Error('useDynamicForm must be used within a DynamicFormProvider');\n }\n\n return context;\n}\n"],"mappings":";;;;;;;;AAAA,SAAgB,eAAe,kBAAkB;AAoD3C;AAnCN,IAAM,qBAAqB,cAA8C,IAAI;AAStE,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AACb,GAAiD;AAC/C,QAAM,eAAwC;AAAA,IAC5C;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe,CAAC,SAA0B,OAAO,OAAO,IAAI;AAAA,IAC5D,eAAe,CAAC,SAAqC;AACnD,YAAM,QAAQ,OAAO,OAAO,IAAI;AAChC,YAAM,UAAU,OAAO,QAAQ,IAAI;AACnC,aAAO,WAAW,QAAQ,OAAO,KAAK,IAAI;AAAA,IAC5C;AAAA,IACA,iBAAiB,CAAC,SAA0B,QAAQ,OAAO,QAAQ,IAAI,CAAC;AAAA,IACxE,eAAe,CAAO,OAAe,UAAkC;AACrE,YAAM,OAAO,cAAc,OAAO,KAAK;AAAA,IACzC;AAAA,IACA,cAAc,OAAO;AAAA,IACrB,YAAY,OAAO;AAAA,EACrB;AAEA,SACE,oBAAC,mBAAmB,UAAnB,EAA4B,OAAO,cAClC,8BAAC,KAAK,MAAL,EAAU,UAAU,OAAO,cAAe,UAAS,GACtD;AAEJ;AAEO,SAAS,iBAA0C;AACxD,QAAM,UAAU,WAAW,kBAAkB;AAE7C,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,0DAA0D;AAAA,EAC5E;AAEA,SAAO;AACT;","names":[]}
|
|
@@ -0,0 +1,217 @@
|
|
|
1
|
+
import {
|
|
2
|
+
DynamicFormField
|
|
3
|
+
} from "./chunk-T4HTYL5M.js";
|
|
4
|
+
import {
|
|
5
|
+
DynamicFormProvider,
|
|
6
|
+
useDynamicForm
|
|
7
|
+
} from "./chunk-PB4O3U6O.js";
|
|
8
|
+
import {
|
|
9
|
+
Form
|
|
10
|
+
} from "./chunk-2OMSNCRH.js";
|
|
11
|
+
import {
|
|
12
|
+
Typo
|
|
13
|
+
} from "./chunk-PMJIFLDT.js";
|
|
14
|
+
import {
|
|
15
|
+
__async
|
|
16
|
+
} from "./chunk-CRTRMMJ7.js";
|
|
17
|
+
|
|
18
|
+
// src/molecules/dynamic-form.tsx
|
|
19
|
+
import { useMemo, useCallback, useEffect } from "react";
|
|
20
|
+
import { useFormik } from "formik";
|
|
21
|
+
import * as Yup from "yup";
|
|
22
|
+
import { Box } from "@radix-ui/themes";
|
|
23
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
24
|
+
function scrollToFirstError(errors, _fields) {
|
|
25
|
+
const firstErrorFieldName = Object.keys(errors)[0];
|
|
26
|
+
if (!firstErrorFieldName) return;
|
|
27
|
+
let fieldElement = document.querySelector(`[name="${firstErrorFieldName}"]`);
|
|
28
|
+
if (!fieldElement) {
|
|
29
|
+
fieldElement = document.querySelector(`[data-field-name="${firstErrorFieldName}"]`);
|
|
30
|
+
}
|
|
31
|
+
if (!fieldElement) {
|
|
32
|
+
fieldElement = document.querySelector(`[data-error-field="${firstErrorFieldName}"]`);
|
|
33
|
+
}
|
|
34
|
+
if (fieldElement) {
|
|
35
|
+
fieldElement.scrollIntoView({
|
|
36
|
+
behavior: "smooth",
|
|
37
|
+
block: "nearest"
|
|
38
|
+
});
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
function DynamicFormRoot({
|
|
42
|
+
fields,
|
|
43
|
+
initialValues = {},
|
|
44
|
+
onSubmit,
|
|
45
|
+
children,
|
|
46
|
+
readonly = false
|
|
47
|
+
}) {
|
|
48
|
+
const validationSchema = useMemo(() => {
|
|
49
|
+
const schema = {};
|
|
50
|
+
fields.forEach((field) => {
|
|
51
|
+
if (field.validation) {
|
|
52
|
+
const validation = createYupValidation(field, field.validation);
|
|
53
|
+
if (validation) {
|
|
54
|
+
schema[field.name] = validation;
|
|
55
|
+
}
|
|
56
|
+
} else if (field.required) {
|
|
57
|
+
if (field.type === "choices") {
|
|
58
|
+
schema[field.name] = Yup.array().min(1, `${field.label}\uC744(\uB97C) \uD558\uB098 \uC774\uC0C1 \uC120\uD0DD\uD574\uC8FC\uC138\uC694`).required(`${field.label}\uC740(\uB294) \uD544\uC218\uC785\uB2C8\uB2E4`);
|
|
59
|
+
} else if (field.type === "yes_no") {
|
|
60
|
+
schema[field.name] = Yup.boolean().oneOf([true], `${field.label}\uC5D0 \uB3D9\uC758\uD574\uC8FC\uC138\uC694`);
|
|
61
|
+
} else {
|
|
62
|
+
schema[field.name] = Yup.string().required(
|
|
63
|
+
`${field.label}\uC740(\uB294) \uD544\uC218\uC785\uB2C8\uB2E4`
|
|
64
|
+
);
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
});
|
|
68
|
+
return Object.keys(schema).length > 0 ? Yup.object(schema) : void 0;
|
|
69
|
+
}, [fields]);
|
|
70
|
+
const handleSubmit = useCallback((values) => __async(null, null, function* () {
|
|
71
|
+
yield onSubmit(values);
|
|
72
|
+
}), [onSubmit]);
|
|
73
|
+
const formik = useFormik({
|
|
74
|
+
initialValues: fields.reduce((acc, field) => {
|
|
75
|
+
if (field.type === "choices") {
|
|
76
|
+
acc[field.name] = initialValues[field.name] || [];
|
|
77
|
+
} else if (field.type === "yes_no") {
|
|
78
|
+
acc[field.name] = initialValues[field.name] || false;
|
|
79
|
+
} else {
|
|
80
|
+
acc[field.name] = initialValues[field.name] || "";
|
|
81
|
+
}
|
|
82
|
+
return acc;
|
|
83
|
+
}, {}),
|
|
84
|
+
validationSchema,
|
|
85
|
+
validateOnBlur: true,
|
|
86
|
+
validateOnChange: true,
|
|
87
|
+
onSubmit: handleSubmit
|
|
88
|
+
});
|
|
89
|
+
useEffect(() => {
|
|
90
|
+
if (formik.submitCount > 0 && Object.keys(formik.errors).length > 0) {
|
|
91
|
+
const timeoutId = setTimeout(() => {
|
|
92
|
+
scrollToFirstError(formik.errors, fields);
|
|
93
|
+
}, 100);
|
|
94
|
+
return () => {
|
|
95
|
+
clearTimeout(timeoutId);
|
|
96
|
+
};
|
|
97
|
+
}
|
|
98
|
+
}, [formik.submitCount, formik.errors, fields]);
|
|
99
|
+
return /* @__PURE__ */ jsx(DynamicFormProvider, { fields, formik, readonly, children });
|
|
100
|
+
}
|
|
101
|
+
function DynamicFormFieldList({
|
|
102
|
+
fields: fieldsProp,
|
|
103
|
+
labelVariant
|
|
104
|
+
}) {
|
|
105
|
+
const { formik, fields: fieldsFromContext, readonly } = useDynamicForm();
|
|
106
|
+
const fields = fieldsProp || fieldsFromContext;
|
|
107
|
+
return /* @__PURE__ */ jsx(Fragment, { children: fields.map((field) => {
|
|
108
|
+
const errorMessage = !readonly && formik.touched[field.name] && formik.errors[field.name] ? String(formik.errors[field.name]) : void 0;
|
|
109
|
+
return /* @__PURE__ */ jsx(
|
|
110
|
+
Box,
|
|
111
|
+
{
|
|
112
|
+
"data-error-field": errorMessage ? field.name : void 0,
|
|
113
|
+
"data-field-name": field.name,
|
|
114
|
+
mb: "2",
|
|
115
|
+
children: /* @__PURE__ */ jsxs(
|
|
116
|
+
Form.FormItem,
|
|
117
|
+
{
|
|
118
|
+
errorMessage,
|
|
119
|
+
label: field.label,
|
|
120
|
+
labelVariant,
|
|
121
|
+
name: field.name,
|
|
122
|
+
required: field.required,
|
|
123
|
+
children: [
|
|
124
|
+
/* @__PURE__ */ jsx(DynamicFormField, { field }),
|
|
125
|
+
field.description ? /* @__PURE__ */ jsx(Typo, { children: field.description }) : null
|
|
126
|
+
]
|
|
127
|
+
}
|
|
128
|
+
)
|
|
129
|
+
},
|
|
130
|
+
field.name
|
|
131
|
+
);
|
|
132
|
+
}) });
|
|
133
|
+
}
|
|
134
|
+
var DynamicForm = {
|
|
135
|
+
Root: DynamicFormRoot,
|
|
136
|
+
FieldList: DynamicFormFieldList
|
|
137
|
+
};
|
|
138
|
+
function createYupValidation(field, validation) {
|
|
139
|
+
if (!validation) return void 0;
|
|
140
|
+
let schema;
|
|
141
|
+
if (field.type === "number") {
|
|
142
|
+
schema = Yup.number();
|
|
143
|
+
} else if (field.type === "email") {
|
|
144
|
+
schema = Yup.string().email(
|
|
145
|
+
validation.message || "\uC62C\uBC14\uB978 \uC774\uBA54\uC77C \uD615\uC2DD\uC774 \uC544\uB2D9\uB2C8\uB2E4"
|
|
146
|
+
);
|
|
147
|
+
} else if (field.type === "choices") {
|
|
148
|
+
schema = Yup.array();
|
|
149
|
+
} else if (field.type === "yes_no") {
|
|
150
|
+
schema = Yup.boolean();
|
|
151
|
+
} else {
|
|
152
|
+
schema = Yup.string();
|
|
153
|
+
}
|
|
154
|
+
if (validation.min !== void 0) {
|
|
155
|
+
if (field.type === "number") {
|
|
156
|
+
schema = schema.min(
|
|
157
|
+
validation.min,
|
|
158
|
+
validation.message || `\uCD5C\uC18C ${validation.min}\uC774\uC5B4\uC57C \uD569\uB2C8\uB2E4`
|
|
159
|
+
);
|
|
160
|
+
} else if (field.type === "choices") {
|
|
161
|
+
schema = schema.min(
|
|
162
|
+
validation.min,
|
|
163
|
+
validation.message || `\uCD5C\uC18C ${validation.min}\uAC1C \uC774\uC0C1 \uC120\uD0DD\uD574\uC8FC\uC138\uC694`
|
|
164
|
+
);
|
|
165
|
+
} else if (field.type === "yes_no") {
|
|
166
|
+
} else {
|
|
167
|
+
schema = schema.min(
|
|
168
|
+
validation.min,
|
|
169
|
+
validation.message || `\uCD5C\uC18C ${validation.min}\uC790 \uC774\uC0C1\uC774\uC5B4\uC57C \uD569\uB2C8\uB2E4`
|
|
170
|
+
);
|
|
171
|
+
}
|
|
172
|
+
}
|
|
173
|
+
if (validation.max !== void 0) {
|
|
174
|
+
if (field.type === "number") {
|
|
175
|
+
schema = schema.max(
|
|
176
|
+
validation.max,
|
|
177
|
+
validation.message || `\uCD5C\uB300 ${validation.max}\uC774\uC5B4\uC57C \uD569\uB2C8\uB2E4`
|
|
178
|
+
);
|
|
179
|
+
} else if (field.type === "choices") {
|
|
180
|
+
schema = schema.max(
|
|
181
|
+
validation.max,
|
|
182
|
+
validation.message || `\uCD5C\uB300 ${validation.max}\uAC1C\uAE4C\uC9C0 \uC120\uD0DD \uAC00\uB2A5\uD569\uB2C8\uB2E4`
|
|
183
|
+
);
|
|
184
|
+
} else if (field.type === "yes_no") {
|
|
185
|
+
} else {
|
|
186
|
+
schema = schema.max(
|
|
187
|
+
validation.max,
|
|
188
|
+
validation.message || `\uCD5C\uB300 ${validation.max}\uC790 \uC774\uD558\uC5EC\uC57C \uD569\uB2C8\uB2E4`
|
|
189
|
+
);
|
|
190
|
+
}
|
|
191
|
+
}
|
|
192
|
+
if (validation.pattern) {
|
|
193
|
+
if (field.type === "yes_no") {
|
|
194
|
+
} else {
|
|
195
|
+
schema = schema.matches(
|
|
196
|
+
new RegExp(validation.pattern),
|
|
197
|
+
validation.message || "\uC62C\uBC14\uB978 \uD615\uC2DD\uC774 \uC544\uB2D9\uB2C8\uB2E4"
|
|
198
|
+
);
|
|
199
|
+
}
|
|
200
|
+
}
|
|
201
|
+
if (field.required) {
|
|
202
|
+
if (field.type === "yes_no") {
|
|
203
|
+
schema = schema.oneOf([true], validation.message || `${field.label}\uC5D0 \uB3D9\uC758\uD574\uC8FC\uC138\uC694`);
|
|
204
|
+
} else if (field.type === "choices") {
|
|
205
|
+
schema = schema.min(1, validation.message || `${field.label}\uC744(\uB97C) \uD558\uB098 \uC774\uC0C1 \uC120\uD0DD\uD574\uC8FC\uC138\uC694`);
|
|
206
|
+
} else {
|
|
207
|
+
schema = schema.required(validation.message || `${field.label}\uC740(\uB294) \uD544\uC218\uC785\uB2C8\uB2E4`);
|
|
208
|
+
}
|
|
209
|
+
}
|
|
210
|
+
return schema;
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
export {
|
|
214
|
+
DynamicForm,
|
|
215
|
+
createYupValidation
|
|
216
|
+
};
|
|
217
|
+
//# sourceMappingURL=chunk-PBWH6CMJ.js.map
|