@team-monolith/cds 1.9.4 → 1.9.5

package/dist/patterns/LexicalEditor/nodes/ProblemInputNode/InputComponent.js

@@ -22,7 +22,7 @@ import useLexicalEditable from "@lexical/react/useLexicalEditable";
 import { $isProblemInputNode } from "./ProblemInputNode";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { $getNodeByKey } from "lexical";
-import { LexicalCustomConfigContext, } from "../../LexicalCustomConfigContext";
+import { LexicalCustomConfigContext } from "../../LexicalCustomConfigContext";
 export function InputComponent(props) {
     const { answer } = props, settingFormProps = __rest(props, ["answer"]);
     const { placeholder, nodeKey } = settingFormProps;

package/dist/patterns/LexicalEditor/nodes/ProblemSelectNode/ProblemSelectNode.d.ts

@@ -15,6 +15,7 @@ export interface Selection {
 export interface ProblemSelectPayload {
     selections: Selection[];
     selected: string[];
+    hasMultipleAnswers?: boolean;
     key?: NodeKey;
 }
 export type SerializedProblemSelectNode = Spread<ProblemSelectPayload, SerializedLexicalNode>;
@@ -25,6 +26,7 @@ export type SerializedProblemSelectNode = Spread<ProblemSelectPayload, Serialize
 export declare class ProblemSelectNode extends DecoratorNode<ReactNode> {
     __selections: Selection[];
     __selected: string[];
+    __hasMultipleAnswers: boolean | undefined;
     isInline(): boolean;
     static getType(): string;
     getSelections(): Selection[];
@@ -32,12 +34,12 @@ export declare class ProblemSelectNode extends DecoratorNode<ReactNode> {
     setSolutions(selections: Selection[]): void;
     setSelected(selected: string[]): void;
     static clone(node: ProblemSelectNode): ProblemSelectNode;
-    constructor(selections: Selection[], selected: string[], key?: NodeKey);
+    constructor(selections: Selection[], selected: string[], hasMultipleAnswers?: boolean, key?: NodeKey);
     createDOM(config: EditorConfig): HTMLElement;
     updateDOM(): boolean;
     static importJSON(serializedNode: SerializedProblemSelectNode): ProblemSelectNode;
     exportJSON(): SerializedProblemSelectNode;
     decorate(): ReactNode;
 }
-export declare function $createProblemSelectNode({ selections, selected, key, }: ProblemSelectPayload): ProblemSelectNode;
+export declare function $createProblemSelectNode({ selections, selected, hasMultipleAnswers, key, }: ProblemSelectPayload): ProblemSelectNode;
 export declare function $isProblemSelectNode(node: LexicalNode | null | undefined): node is ProblemSelectNode;

package/dist/patterns/LexicalEditor/nodes/ProblemSelectNode/ProblemSelectNode.js

@@ -28,12 +28,13 @@ export class ProblemSelectNode extends DecoratorNode {
         self.__selected = selected;
     }
     static clone(node) {
-        return new ProblemSelectNode(node.__selections, node.__selected, node.__key);
+        return new ProblemSelectNode(node.__selections, node.__selected, node.__hasMultipleAnswers, node.__key);
     }
-    constructor(selections, selected, key) {
+    constructor(selections, selected, hasMultipleAnswers, key) {
         super(key);
         this.__selections = selections;
         this.__selected = selected;
+        this.__hasMultipleAnswers = hasMultipleAnswers;
     }
     createDOM(config) {
         // Define the DOM element here
@@ -49,6 +50,7 @@ export class ProblemSelectNode extends DecoratorNode {
             key: serializedNode.key,
             selections: serializedNode.selections,
             selected: serializedNode.selected,
+            hasMultipleAnswers: serializedNode.hasMultipleAnswers,
         });
         return node;
     }
@@ -61,11 +63,11 @@ export class ProblemSelectNode extends DecoratorNode {
         };
     }
     decorate() {
-        return (_jsx(SelectComponent, { selections: this.__selections, selected: this.__selected, nodeKey: this.getKey() }));
+        return (_jsx(SelectComponent, { selections: this.__selections, selected: this.__selected, hasMultipleAnswers: this.__hasMultipleAnswers, nodeKey: this.getKey() }));
     }
 }
-export function $createProblemSelectNode({ selections, selected, key, }) {
-    return $applyNodeReplacement(new ProblemSelectNode(selections, selected, key));
+export function $createProblemSelectNode({ selections, selected, hasMultipleAnswers, key, }) {
+    return $applyNodeReplacement(new ProblemSelectNode(selections, selected, hasMultipleAnswers, key));
 }
 export function $isProblemSelectNode(node) {
     return node instanceof ProblemSelectNode;

package/dist/patterns/LexicalEditor/nodes/ProblemSelectNode/SelectBox.d.ts

@@ -5,7 +5,7 @@ export interface SelectBoxProps {
     isAnswer?: boolean;
     image?: ImageProps;
     text: string;
-    onClick: () => void;
+    onClick?: () => void;
     fullWidth?: boolean;
 }
 export default function SelectBox(props: SelectBoxProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/patterns/LexicalEditor/nodes/ProblemSelectNode/SelectComponent.d.ts

@@ -4,5 +4,6 @@ import { Selection } from "./ProblemSelectNode";
 export declare function SelectComponent(props: {
     selections: Selection[];
     selected: string[];
+    hasMultipleAnswers?: boolean;
     nodeKey: NodeKey;
 }): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/patterns/LexicalEditor/nodes/ProblemSelectNode/SelectComponent.js

@@ -1,18 +1,20 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
 import { $getNodeByKey } from "lexical";
 import { $isProblemSelectNode, } from "./ProblemSelectNode";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-import { useState } from "react";
+import { useContext, useState } from "react";
 import useLexicalEditable from "@lexical/react/useLexicalEditable";
 import { useFieldArray, useForm } from "react-hook-form";
 import SelectBox from "./SelectBox";
 import { css } from "@emotion/react";
 import SquareButton from "../../../../components/SquareButton";
-import { Settings3FillIcon } from "../../../../icons";
+import { AlarmWarningFillIcon, Settings3FillIcon } from "../../../../icons";
 import SettingForm from "./SettingForm";
+import styled from "@emotion/styled";
+import { LexicalCustomConfigContext } from "../../LexicalCustomConfigContext";
 export function SelectComponent(props) {
-    const { selections, selected, nodeKey } = props;
+    const { selections, selected, hasMultipleAnswers, nodeKey } = props;
     const [editor] = useLexicalComposerContext();
     const [settingOpen, setSettingOpen] = useState(false);
     const isEditable = useLexicalEditable();
@@ -28,34 +30,44 @@ export function SelectComponent(props) {
         name: "selections",
         keyName: "uid",
     });
+    const lexicalCustomConfig = useContext(LexicalCustomConfigContext);
     // 학생 view
     if (!isEditable) {
-        return (_jsx(_Fragment, { children: fields.map((field, index) => (_jsx(SelectBox, { index: index + 1, isSelected: selected.includes(field.value), image: field.show.image, text: field.show.text, onClick: () => {
-                    const isSelected = selected.includes(field.value);
-                    if (isSelected) {
-                        editor.update(() => {
-                            const node = $getNodeByKey(nodeKey);
-                            if (!$isProblemSelectNode(node)) {
-                                return;
-                            }
-                            const newSelected = [...selected];
-                            const index = newSelected.indexOf(field.value);
-                            newSelected.splice(index, 1);
-                            node.setSelected(newSelected);
-                        });
-                    }
-                    else {
-                        editor.update(() => {
-                            const node = $getNodeByKey(nodeKey);
-                            if (!$isProblemSelectNode(node)) {
-                                return;
-                            }
-                            const newSelected = [...selected];
-                            newSelected.push(field.value);
-                            node.setSelected(newSelected);
-                        });
-                    }
-                }, fullWidth: true }, index))) }));
+        if (lexicalCustomConfig.freezeProblemNode) {
+            return (_jsxs(_Fragment, { children: [hasMultipleAnswers && (_jsxs(Alert, { children: [_jsx(AlarmWarningFillIcon, { css: css `
+                  width: 14px;
+                  height: 14px;
+                ` }), "\uC9C8\uBB38\uC5D0 \uD574\uB2F9\uD558\uB294 \uB2F5\uC744 \uBAA8\uB450 \uACE0\uB974\uB294 \uBB38\uC81C\uC785\uB2C8\uB2E4."] })), fields.map((field, index) => (_jsx(SelectBox, { index: index + 1, isSelected: selected.includes(field.value), image: field.show.image, text: field.show.text, fullWidth: true }, index)))] }));
+        }
+        return (_jsxs(_Fragment, { children: [hasMultipleAnswers && (_jsxs(Alert, { children: [_jsx(AlarmWarningFillIcon, { css: css `
+                width: 14px;
+                height: 14px;
+              ` }), "\uC9C8\uBB38\uC5D0 \uD574\uB2F9\uD558\uB294 \uB2F5\uC744 \uBAA8\uB450 \uACE0\uB974\uB294 \uBB38\uC81C\uC785\uB2C8\uB2E4."] })), fields.map((field, index) => (_jsx(SelectBox, { index: index + 1, isSelected: selected.includes(field.value), image: field.show.image, text: field.show.text, onClick: () => {
+                        const isSelected = selected.includes(field.value);
+                        if (isSelected) {
+                            editor.update(() => {
+                                const node = $getNodeByKey(nodeKey);
+                                if (!$isProblemSelectNode(node)) {
+                                    return;
+                                }
+                                const newSelected = [...selected];
+                                const index = newSelected.indexOf(field.value);
+                                newSelected.splice(index, 1);
+                                node.setSelected(newSelected);
+                            });
+                        }
+                        else {
+                            editor.update(() => {
+                                const node = $getNodeByKey(nodeKey);
+                                if (!$isProblemSelectNode(node)) {
+                                    return;
+                                }
+                                const newSelected = [...selected];
+                                newSelected.push(field.value);
+                                node.setSelected(newSelected);
+                            });
+                        }
+                    }, fullWidth: true }, index)))] }));
     }
     // 교사 edit view
     return (_jsxs(_Fragment, { children: [_jsxs("div", Object.assign({ css: css `
@@ -69,3 +81,15 @@ export function SelectComponent(props) {
                             setSettingOpen(true);
                         } })] })), settingOpen && (_jsx(SettingForm, { control: control, handleSubmit: handleSubmit, fields: fields, append: append, remove: remove, update: update, nodeKey: nodeKey, onClose: () => setSettingOpen(false) }))] }));
 }
+const Alert = styled.div(({ theme }) => css `
+    display: flex;
+    gap: 4px;
+    margin-bottom: 12px;
+    color: ${theme.color.foreground.neutralBaseDisabled};
+    /* Default/Label/12px-Md */
+    font-family: ${theme.fontFamily.ui};
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 16px; /* 133.333% */
+  `);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@team-monolith/cds",
-  "version": "1.9.4",
+  "version": "1.9.5",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": false,