@elice/material-exercise 1.240718.2 → 1.240719.0

package/es/components/shared/monaco-editor/MonacoEditorPerferenceForm.js

@@ -1,3 +1,5 @@
+import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import React from 'react';
 import { useDeepCompareEffect } from 'react-use';
 import { Select, Text, Vspace, AntSwitch } from '@elice/blocks';
@@ -11,32 +13,38 @@ import messageKo from './locales/ko.json.js';
 import 'monaco-editor/esm/vs/editor/editor.api';
 import { normalizeMonacoPreference } from './utils/monacoPreference.js';
 
-const StyledPreferenceBodyItem = styled.div.withConfig({
+var StyledPreferenceBodyItem = styled.div.withConfig({
   componentId: "sc-1bwf6gs-0"
 })(["display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;min-height:2rem;color:white;&:last-child{margin-bottom:0;}"]);
-const StyledSelect = styled(Select).withConfig({
+var StyledSelect = styled(Select).withConfig({
   componentId: "sc-1bwf6gs-1"
 })(["> div{background:", " !important;border-color:", " !important;}select{padding:0 !important;height:2rem !important;color:#fff !important;> option{background:", " !important;}}"], base.color.navy8, base.color.navy7, base.color.navy8);
-const MonacoEditorPerferenceForm = ({
-  value,
-  onChange,
-  __intl
-}) => {
-  const [preference, setPreference] = React.useState(normalizeMonacoPreference(value));
+var MonacoEditorPerferenceForm = function MonacoEditorPerferenceForm(_ref) {
+  var value = _ref.value,
+    onChange = _ref.onChange,
+    __intl = _ref.__intl;
+  var _React$useState = React.useState(normalizeMonacoPreference(value)),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    preference = _React$useState2[0],
+    setPreference = _React$useState2[1];
   /**
    * Update preference from form.
    */
-  const updatePreference = newPreference => {
-    setPreference(prev => normalizeMonacoPreference(Object.assign(Object.assign({}, prev), newPreference)));
+  var updatePreference = function updatePreference(newPreference) {
+    setPreference(function (prev) {
+      return normalizeMonacoPreference(Object.assign(Object.assign({}, prev), newPreference));
+    });
   };
   //
   // Update state from value.
   //
-  useDeepCompareEffect(() => setPreference(normalizeMonacoPreference(value)), [value]);
+  useDeepCompareEffect(function () {
+    return setPreference(normalizeMonacoPreference(value));
+  }, [value]);
   //
   // Emit change event.
   //
-  useDeepCompareEffect(() => {
+  useDeepCompareEffect(function () {
     if (typeof onChange === 'function') {
       onChange(preference);
     }
@@ -44,225 +52,267 @@ const MonacoEditorPerferenceForm = ({
   /**
    * appearance > theme
    */
-  const renderPreferenceItemTheme = () => {
-    return React.createElement(StyledPreferenceBodyItem, null, React.createElement(Text, {
-      role: "navy",
-      size: "tiny",
-      block: true
-    }, __intl.formatMessage({
-      id: 'monacoEditorPerferenceForm.displaying.item.theme.name'
-    })), React.createElement(StyledSelect, {
-      value: preference.theme,
-      size: "small",
-      width: "xsmall",
-      onChange: value => {
-        updatePreference({
-          theme: value
-        });
-      }
-    }, VSCODE_THEMES.map(({
-      id,
-      name
-    }) => React.createElement("option", {
-      key: id,
-      value: id
-    }, name))));
+  var renderPreferenceItemTheme = function renderPreferenceItemTheme() {
+    return jsxs(StyledPreferenceBodyItem, {
+      children: [jsx(Text, {
+        role: "navy",
+        size: "tiny",
+        block: true,
+        children: __intl.formatMessage({
+          id: 'monacoEditorPerferenceForm.displaying.item.theme.name'
+        })
+      }), jsx(StyledSelect, {
+        value: preference.theme,
+        size: "small",
+        width: "xsmall",
+        onChange: function onChange(value) {
+          updatePreference({
+            theme: value
+          });
+        },
+        children: VSCODE_THEMES.map(function (_ref2) {
+          var id = _ref2.id,
+            name = _ref2.name;
+          return jsx("option", {
+            value: id,
+            children: name
+          }, id);
+        })
+      })]
+    });
   };
   /**
    * appearance > font size
    */
-  const renderPreferenceItemFontSize = () => {
-    return React.createElement(StyledPreferenceBodyItem, null, React.createElement(Text, {
-      role: "navy",
-      size: "tiny",
-      block: true
-    }, __intl.formatMessage({
-      id: 'monacoEditorPerferenceForm.displaying.item.fontSize.name'
-    })), React.createElement(StyledSelect, {
-      value: preference.fontSize,
-      size: "small",
-      width: "xsmall",
-      onChange: value => {
-        updatePreference({
-          fontSize: Number(value)
-        });
-      }
-    }, MONACO_EDITOR_PREFERENCE_OPTIONS_FONT_SIZES.map(size => React.createElement("option", {
-      key: size,
-      value: size
-    }, size))));
+  var renderPreferenceItemFontSize = function renderPreferenceItemFontSize() {
+    return jsxs(StyledPreferenceBodyItem, {
+      children: [jsx(Text, {
+        role: "navy",
+        size: "tiny",
+        block: true,
+        children: __intl.formatMessage({
+          id: 'monacoEditorPerferenceForm.displaying.item.fontSize.name'
+        })
+      }), jsx(StyledSelect, {
+        value: preference.fontSize,
+        size: "small",
+        width: "xsmall",
+        onChange: function onChange(value) {
+          updatePreference({
+            fontSize: Number(value)
+          });
+        },
+        children: MONACO_EDITOR_PREFERENCE_OPTIONS_FONT_SIZES.map(function (size) {
+          return jsx("option", {
+            value: size,
+            children: size
+          }, size);
+        })
+      })]
+    });
   };
   /**
    * appearance > word wrap
    */
-  const renderPreferenceItemWordWrap = () => {
-    return React.createElement(StyledPreferenceBodyItem, null, React.createElement(Text, {
-      role: "navy",
-      size: "tiny",
-      block: true
-    }, __intl.formatMessage({
-      id: 'monacoEditorPerferenceForm.displaying.item.wordWrap.name'
-    })), React.createElement(AntSwitch, {
-      checked: preference.wordWrap === 'on',
-      onChange: value => {
-        updatePreference({
-          wordWrap: value ? 'on' : 'off'
-        });
-      }
-    }));
+  var renderPreferenceItemWordWrap = function renderPreferenceItemWordWrap() {
+    return jsxs(StyledPreferenceBodyItem, {
+      children: [jsx(Text, {
+        role: "navy",
+        size: "tiny",
+        block: true,
+        children: __intl.formatMessage({
+          id: 'monacoEditorPerferenceForm.displaying.item.wordWrap.name'
+        })
+      }), jsx(AntSwitch, {
+        checked: preference.wordWrap === 'on',
+        onChange: function onChange(value) {
+          updatePreference({
+            wordWrap: value ? 'on' : 'off'
+          });
+        }
+      })]
+    });
   };
   /**
    * appearance > white space
    */
-  const renderPreferenceItemWhiteSpace = () => {
-    return React.createElement(StyledPreferenceBodyItem, null, React.createElement(Text, {
-      role: "navy",
-      size: "tiny",
-      block: true
-    }, __intl.formatMessage({
-      id: 'monacoEditorPerferenceForm.displaying.item.renderWhiteSpace.name'
-    })), React.createElement(StyledSelect, {
-      value: preference.renderWhitespace,
-      size: "small",
-      width: "xsmall",
-      onChange: value => {
-        updatePreference({
-          renderWhitespace: value
-        });
-      }
-    }, MONACO_EDITOR_RENDER_WHITESPACE_OPTIONS.map(option => React.createElement("option", {
-      key: option,
-      value: option
-    }, __intl.formatMessage({
-      id: `monacoEditorPerferenceForm.displaying.item.renderWhiteSpace.value.${option}`
-    })))));
+  var renderPreferenceItemWhiteSpace = function renderPreferenceItemWhiteSpace() {
+    return jsxs(StyledPreferenceBodyItem, {
+      children: [jsx(Text, {
+        role: "navy",
+        size: "tiny",
+        block: true,
+        children: __intl.formatMessage({
+          id: 'monacoEditorPerferenceForm.displaying.item.renderWhiteSpace.name'
+        })
+      }), jsx(StyledSelect, {
+        value: preference.renderWhitespace,
+        size: "small",
+        width: "xsmall",
+        onChange: function onChange(value) {
+          updatePreference({
+            renderWhitespace: value
+          });
+        },
+        children: MONACO_EDITOR_RENDER_WHITESPACE_OPTIONS.map(function (option) {
+          return jsx("option", {
+            value: option,
+            children: __intl.formatMessage({
+              id: "monacoEditorPerferenceForm.displaying.item.renderWhiteSpace.value.".concat(option)
+            })
+          }, option);
+        })
+      })]
+    });
   };
   /**
    * appearance > minimap
    */
-  const renderPreferenceItemMinimap = () => {
+  var renderPreferenceItemMinimap = function renderPreferenceItemMinimap() {
     var _a;
-    return React.createElement(StyledPreferenceBodyItem, null, React.createElement(Text, {
-      role: "navy",
-      size: "tiny",
-      block: true
-    }, __intl.formatMessage({
-      id: 'monacoEditorPerferenceForm.displaying.item.minimap.name'
-    })), React.createElement(AntSwitch, {
-      checked: (_a = preference.minimap) === null || _a === void 0 ? void 0 : _a.enabled,
-      onChange: value => {
-        updatePreference({
-          minimap: {
-            enabled: value
-          }
-        });
-      }
-    }));
+    return jsxs(StyledPreferenceBodyItem, {
+      children: [jsx(Text, {
+        role: "navy",
+        size: "tiny",
+        block: true,
+        children: __intl.formatMessage({
+          id: 'monacoEditorPerferenceForm.displaying.item.minimap.name'
+        })
+      }), jsx(AntSwitch, {
+        checked: (_a = preference.minimap) === null || _a === void 0 ? void 0 : _a.enabled,
+        onChange: function onChange(value) {
+          updatePreference({
+            minimap: {
+              enabled: value
+            }
+          });
+        }
+      })]
+    });
   };
   /**
    * appearance > cursor smooth caret animation
    */
-  const renderPreferenceItemCursorSmoothCaretAnimation = () => {
-    return React.createElement(StyledPreferenceBodyItem, null, React.createElement(Text, {
-      role: "navy",
-      size: "tiny",
-      block: true
-    }, __intl.formatMessage({
-      id: 'monacoEditorPerferenceForm.displaying.item.cursorSmoothCaretAnimation.name'
-    })), React.createElement(AntSwitch, {
-      checked: preference.cursorSmoothCaretAnimation,
-      onChange: value => {
-        updatePreference({
-          cursorSmoothCaretAnimation: value
-        });
-      }
-    }));
+  var renderPreferenceItemCursorSmoothCaretAnimation = function renderPreferenceItemCursorSmoothCaretAnimation() {
+    return jsxs(StyledPreferenceBodyItem, {
+      children: [jsx(Text, {
+        role: "navy",
+        size: "tiny",
+        block: true,
+        children: __intl.formatMessage({
+          id: 'monacoEditorPerferenceForm.displaying.item.cursorSmoothCaretAnimation.name'
+        })
+      }), jsx(AntSwitch, {
+        checked: preference.cursorSmoothCaretAnimation,
+        onChange: function onChange(value) {
+          updatePreference({
+            cursorSmoothCaretAnimation: value
+          });
+        }
+      })]
+    });
   };
   /**
    * text editing > auto closing brackets
    */
-  const renderPreferenceItemAutoClosingBrackets = () => {
-    return React.createElement(StyledPreferenceBodyItem, null, React.createElement(Text, {
-      role: "navy",
-      size: "tiny",
-      block: true
-    }, __intl.formatMessage({
-      id: 'monacoEditorPerferenceForm.textEditing.item.autoClosingBrackets.name'
-    })), React.createElement(AntSwitch, {
-      checked: preference.autoClosingBrackets === 'always',
-      onChange: value => {
-        updatePreference({
-          autoClosingBrackets: value ? 'always' : 'never'
-        });
-      }
-    }));
+  var renderPreferenceItemAutoClosingBrackets = function renderPreferenceItemAutoClosingBrackets() {
+    return jsxs(StyledPreferenceBodyItem, {
+      children: [jsx(Text, {
+        role: "navy",
+        size: "tiny",
+        block: true,
+        children: __intl.formatMessage({
+          id: 'monacoEditorPerferenceForm.textEditing.item.autoClosingBrackets.name'
+        })
+      }), jsx(AntSwitch, {
+        checked: preference.autoClosingBrackets === 'always',
+        onChange: function onChange(value) {
+          updatePreference({
+            autoClosingBrackets: value ? 'always' : 'never'
+          });
+        }
+      })]
+    });
   };
   /**
    * text editing > detect indentation
    */
-  const renderPreferenceItemDetectIndentation = () => {
-    return React.createElement(StyledPreferenceBodyItem, null, React.createElement(Text, {
-      role: "navy",
-      size: "tiny",
-      block: true
-    }, __intl.formatMessage({
-      id: 'monacoEditorPerferenceForm.textEditing.item.detectIndentation.name'
-    })), React.createElement(AntSwitch, {
-      checked: preference.detectIndentation,
-      onChange: value => {
-        updatePreference({
-          detectIndentation: value
-        });
-      }
-    }));
+  var renderPreferenceItemDetectIndentation = function renderPreferenceItemDetectIndentation() {
+    return jsxs(StyledPreferenceBodyItem, {
+      children: [jsx(Text, {
+        role: "navy",
+        size: "tiny",
+        block: true,
+        children: __intl.formatMessage({
+          id: 'monacoEditorPerferenceForm.textEditing.item.detectIndentation.name'
+        })
+      }), jsx(AntSwitch, {
+        checked: preference.detectIndentation,
+        onChange: function onChange(value) {
+          updatePreference({
+            detectIndentation: value
+          });
+        }
+      })]
+    });
   };
   /**
    * text editing > tab size
    */
-  const renderPreferenceItemTabSize = () => {
-    return React.createElement(StyledPreferenceBodyItem, null, React.createElement(Text, {
-      role: preference.detectIndentation ? 'grey6' : 'info',
-      block: true,
-      size: "small"
-    }, __intl.formatMessage({
-      id: 'monacoEditorPerferenceForm.textEditing.item.tabSize.name'
-    })), React.createElement(StyledSelect, {
-      value: preference.tabSize,
-      size: "small",
-      width: "xsmall",
-      disabled: preference.detectIndentation,
-      onChange: value => {
-        updatePreference({
-          tabSize: Number(value)
-        });
-      }
-    }, MONACO_EDITOR_PREFERENCE_OPTIONS_TAB_SIZES.map(size => React.createElement("option", {
-      key: size,
-      value: size
-    }, size))));
+  var renderPreferenceItemTabSize = function renderPreferenceItemTabSize() {
+    return jsxs(StyledPreferenceBodyItem, {
+      children: [jsx(Text, {
+        role: preference.detectIndentation ? 'grey6' : 'info',
+        block: true,
+        size: "small",
+        children: __intl.formatMessage({
+          id: 'monacoEditorPerferenceForm.textEditing.item.tabSize.name'
+        })
+      }), jsx(StyledSelect, {
+        value: preference.tabSize,
+        size: "small",
+        width: "xsmall",
+        disabled: preference.detectIndentation,
+        onChange: function onChange(value) {
+          updatePreference({
+            tabSize: Number(value)
+          });
+        },
+        children: MONACO_EDITOR_PREFERENCE_OPTIONS_TAB_SIZES.map(function (size) {
+          return jsx("option", {
+            value: size,
+            children: size
+          }, size);
+        })
+      })]
+    });
   };
   //
   //
   //
-  return React.createElement(React.Fragment, null, React.createElement(Text, {
-    role: "lightgrey",
-    size: "small",
-    bold: true
-  }, __intl.formatMessage({
-    id: 'monacoEditorPerferenceForm.displaying.title'
-  })), React.createElement(Vspace, {
-    height: 1
-  }), renderPreferenceItemTheme(), renderPreferenceItemFontSize(), renderPreferenceItemWordWrap(), renderPreferenceItemWhiteSpace(), renderPreferenceItemMinimap(), renderPreferenceItemCursorSmoothCaretAnimation(), React.createElement(Vspace, {
-    height: 2
-  }), React.createElement(Text, {
-    role: "lightgrey",
-    size: "small",
-    bold: true
-  }, __intl.formatMessage({
-    id: 'monacoEditorPerferenceForm.textEditing.title'
-  })), React.createElement(Vspace, {
-    height: 1
-  }), renderPreferenceItemAutoClosingBrackets(), renderPreferenceItemDetectIndentation(), renderPreferenceItemTabSize());
+  return jsxs(Fragment, {
+    children: [jsx(Text, {
+      role: "lightgrey",
+      size: "small",
+      bold: true,
+      children: __intl.formatMessage({
+        id: 'monacoEditorPerferenceForm.displaying.title'
+      })
+    }), jsx(Vspace, {
+      height: 1
+    }), renderPreferenceItemTheme(), renderPreferenceItemFontSize(), renderPreferenceItemWordWrap(), renderPreferenceItemWhiteSpace(), renderPreferenceItemMinimap(), renderPreferenceItemCursorSmoothCaretAnimation(), jsx(Vspace, {
+      height: 2
+    }), jsx(Text, {
+      role: "lightgrey",
+      size: "small",
+      bold: true,
+      children: __intl.formatMessage({
+        id: 'monacoEditorPerferenceForm.textEditing.title'
+      })
+    }), jsx(Vspace, {
+      height: 1
+    }), renderPreferenceItemAutoClosingBrackets(), renderPreferenceItemDetectIndentation(), renderPreferenceItemTabSize()]
+  });
 };
 //
 //