@elice/material-exercise 1.240718.0-trasncript.2 → 1.240718.2

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

@@ -1,5 +1,3 @@
-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';
@@ -13,38 +11,32 @@ import messageKo from './locales/ko.json.js';
 import 'monaco-editor/esm/vs/editor/editor.api';
 import { normalizeMonacoPreference } from './utils/monacoPreference.js';
 
-var StyledPreferenceBodyItem = styled.div.withConfig({
+const 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;}"]);
-var StyledSelect = styled(Select).withConfig({
+const 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);
-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];
+const MonacoEditorPerferenceForm = ({
+  value,
+  onChange,
+  __intl
+}) => {
+  const [preference, setPreference] = React.useState(normalizeMonacoPreference(value));
   /**
    * Update preference from form.
    */
-  var updatePreference = function updatePreference(newPreference) {
-    setPreference(function (prev) {
-      return normalizeMonacoPreference(Object.assign(Object.assign({}, prev), newPreference));
-    });
+  const updatePreference = newPreference => {
+    setPreference(prev => normalizeMonacoPreference(Object.assign(Object.assign({}, prev), newPreference)));
   };
   //
   // Update state from value.
   //
-  useDeepCompareEffect(function () {
-    return setPreference(normalizeMonacoPreference(value));
-  }, [value]);
+  useDeepCompareEffect(() => setPreference(normalizeMonacoPreference(value)), [value]);
   //
   // Emit change event.
   //
-  useDeepCompareEffect(function () {
+  useDeepCompareEffect(() => {
     if (typeof onChange === 'function') {
       onChange(preference);
     }
@@ -52,267 +44,225 @@ var MonacoEditorPerferenceForm = function MonacoEditorPerferenceForm(_ref) {
   /**
    * appearance > theme
    */
-  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);
-        })
-      })]
-    });
+  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))));
   };
   /**
    * appearance > font 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);
-        })
-      })]
-    });
+  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))));
   };
   /**
    * appearance > word wrap
    */
-  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'
-          });
-        }
-      })]
-    });
+  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'
+        });
+      }
+    }));
   };
   /**
    * appearance > white space
    */
-  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);
-        })
-      })]
-    });
+  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}`
+    })))));
   };
   /**
    * appearance > minimap
    */
-  var renderPreferenceItemMinimap = function renderPreferenceItemMinimap() {
+  const renderPreferenceItemMinimap = () => {
     var _a;
-    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
-            }
-          });
-        }
-      })]
-    });
+    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
+          }
+        });
+      }
+    }));
   };
   /**
    * appearance > cursor smooth caret animation
    */
-  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
-          });
-        }
-      })]
-    });
+  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
+        });
+      }
+    }));
   };
   /**
    * text editing > auto closing brackets
    */
-  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'
-          });
-        }
-      })]
-    });
+  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'
+        });
+      }
+    }));
   };
   /**
    * text editing > detect indentation
    */
-  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
-          });
-        }
-      })]
-    });
+  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
+        });
+      }
+    }));
   };
   /**
    * text editing > tab 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);
-        })
-      })]
-    });
+  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))));
   };
   //
   //
   //
-  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()]
-  });
+  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());
 };
 //
 //