@elice/material-exercise 1.240718.2 → 1.240719.0

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

@@ -2,6 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var reactUse = require('react-use');
 var blocks = require('@elice/blocks');
@@ -15,32 +17,43 @@ var ko = require('./locales/ko.json.js');
 require('monaco-editor/esm/vs/editor/editor.api');
 var monacoPreference = require('./utils/monacoPreference.js');
 
-const StyledPreferenceBodyItem = styled.div.withConfig({
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+
+var StyledPreferenceBodyItem = styled__default.default.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(blocks.Select).withConfig({
+var StyledSelect = styled__default.default(blocks.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;}}"], designTokens.base.color.navy8, designTokens.base.color.navy7, designTokens.base.color.navy8);
-const MonacoEditorPerferenceForm = ({
-  value,
-  onChange,
-  __intl
-}) => {
-  const [preference, setPreference] = React.useState(monacoPreference.normalizeMonacoPreference(value));
+var MonacoEditorPerferenceForm = function MonacoEditorPerferenceForm(_ref) {
+  var value = _ref.value,
+    onChange = _ref.onChange,
+    __intl = _ref.__intl;
+  var _React$useState = React__default.default.useState(monacoPreference.normalizeMonacoPreference(value)),
+    _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
+    preference = _React$useState2[0],
+    setPreference = _React$useState2[1];
   /**
    * Update preference from form.
    */
-  const updatePreference = newPreference => {
-    setPreference(prev => monacoPreference.normalizeMonacoPreference(Object.assign(Object.assign({}, prev), newPreference)));
+  var updatePreference = function updatePreference(newPreference) {
+    setPreference(function (prev) {
+      return monacoPreference.normalizeMonacoPreference(Object.assign(Object.assign({}, prev), newPreference));
+    });
   };
   //
   // Update state from value.
   //
-  reactUse.useDeepCompareEffect(() => setPreference(monacoPreference.normalizeMonacoPreference(value)), [value]);
+  reactUse.useDeepCompareEffect(function () {
+    return setPreference(monacoPreference.normalizeMonacoPreference(value));
+  }, [value]);
   //
   // Emit change event.
   //
-  reactUse.useDeepCompareEffect(() => {
+  reactUse.useDeepCompareEffect(function () {
     if (typeof onChange === 'function') {
       onChange(preference);
     }
@@ -48,225 +61,267 @@ const MonacoEditorPerferenceForm = ({
   /**
    * appearance > theme
    */
-  const renderPreferenceItemTheme = () => {
-    return React.createElement(StyledPreferenceBodyItem, null, React.createElement(blocks.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
-        });
-      }
-    }, index.VSCODE_THEMES.map(({
-      id,
-      name
-    }) => React.createElement("option", {
-      key: id,
-      value: id
-    }, name))));
+  var renderPreferenceItemTheme = function renderPreferenceItemTheme() {
+    return jsxRuntime.jsxs(StyledPreferenceBodyItem, {
+      children: [jsxRuntime.jsx(blocks.Text, {
+        role: "navy",
+        size: "tiny",
+        block: true,
+        children: __intl.formatMessage({
+          id: 'monacoEditorPerferenceForm.displaying.item.theme.name'
+        })
+      }), jsxRuntime.jsx(StyledSelect, {
+        value: preference.theme,
+        size: "small",
+        width: "xsmall",
+        onChange: function onChange(value) {
+          updatePreference({
+            theme: value
+          });
+        },
+        children: index.VSCODE_THEMES.map(function (_ref2) {
+          var id = _ref2.id,
+            name = _ref2.name;
+          return jsxRuntime.jsx("option", {
+            value: id,
+            children: name
+          }, id);
+        })
+      })]
+    });
   };
   /**
    * appearance > font size
    */
-  const renderPreferenceItemFontSize = () => {
-    return React.createElement(StyledPreferenceBodyItem, null, React.createElement(blocks.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)
-        });
-      }
-    }, preferences.MONACO_EDITOR_PREFERENCE_OPTIONS_FONT_SIZES.map(size => React.createElement("option", {
-      key: size,
-      value: size
-    }, size))));
+  var renderPreferenceItemFontSize = function renderPreferenceItemFontSize() {
+    return jsxRuntime.jsxs(StyledPreferenceBodyItem, {
+      children: [jsxRuntime.jsx(blocks.Text, {
+        role: "navy",
+        size: "tiny",
+        block: true,
+        children: __intl.formatMessage({
+          id: 'monacoEditorPerferenceForm.displaying.item.fontSize.name'
+        })
+      }), jsxRuntime.jsx(StyledSelect, {
+        value: preference.fontSize,
+        size: "small",
+        width: "xsmall",
+        onChange: function onChange(value) {
+          updatePreference({
+            fontSize: Number(value)
+          });
+        },
+        children: preferences.MONACO_EDITOR_PREFERENCE_OPTIONS_FONT_SIZES.map(function (size) {
+          return jsxRuntime.jsx("option", {
+            value: size,
+            children: size
+          }, size);
+        })
+      })]
+    });
   };
   /**
    * appearance > word wrap
    */
-  const renderPreferenceItemWordWrap = () => {
-    return React.createElement(StyledPreferenceBodyItem, null, React.createElement(blocks.Text, {
-      role: "navy",
-      size: "tiny",
-      block: true
-    }, __intl.formatMessage({
-      id: 'monacoEditorPerferenceForm.displaying.item.wordWrap.name'
-    })), React.createElement(blocks.AntSwitch, {
-      checked: preference.wordWrap === 'on',
-      onChange: value => {
-        updatePreference({
-          wordWrap: value ? 'on' : 'off'
-        });
-      }
-    }));
+  var renderPreferenceItemWordWrap = function renderPreferenceItemWordWrap() {
+    return jsxRuntime.jsxs(StyledPreferenceBodyItem, {
+      children: [jsxRuntime.jsx(blocks.Text, {
+        role: "navy",
+        size: "tiny",
+        block: true,
+        children: __intl.formatMessage({
+          id: 'monacoEditorPerferenceForm.displaying.item.wordWrap.name'
+        })
+      }), jsxRuntime.jsx(blocks.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(blocks.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
-        });
-      }
-    }, preferences.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 jsxRuntime.jsxs(StyledPreferenceBodyItem, {
+      children: [jsxRuntime.jsx(blocks.Text, {
+        role: "navy",
+        size: "tiny",
+        block: true,
+        children: __intl.formatMessage({
+          id: 'monacoEditorPerferenceForm.displaying.item.renderWhiteSpace.name'
+        })
+      }), jsxRuntime.jsx(StyledSelect, {
+        value: preference.renderWhitespace,
+        size: "small",
+        width: "xsmall",
+        onChange: function onChange(value) {
+          updatePreference({
+            renderWhitespace: value
+          });
+        },
+        children: preferences.MONACO_EDITOR_RENDER_WHITESPACE_OPTIONS.map(function (option) {
+          return jsxRuntime.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(blocks.Text, {
-      role: "navy",
-      size: "tiny",
-      block: true
-    }, __intl.formatMessage({
-      id: 'monacoEditorPerferenceForm.displaying.item.minimap.name'
-    })), React.createElement(blocks.AntSwitch, {
-      checked: (_a = preference.minimap) === null || _a === void 0 ? void 0 : _a.enabled,
-      onChange: value => {
-        updatePreference({
-          minimap: {
-            enabled: value
-          }
-        });
-      }
-    }));
+    return jsxRuntime.jsxs(StyledPreferenceBodyItem, {
+      children: [jsxRuntime.jsx(blocks.Text, {
+        role: "navy",
+        size: "tiny",
+        block: true,
+        children: __intl.formatMessage({
+          id: 'monacoEditorPerferenceForm.displaying.item.minimap.name'
+        })
+      }), jsxRuntime.jsx(blocks.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(blocks.Text, {
-      role: "navy",
-      size: "tiny",
-      block: true
-    }, __intl.formatMessage({
-      id: 'monacoEditorPerferenceForm.displaying.item.cursorSmoothCaretAnimation.name'
-    })), React.createElement(blocks.AntSwitch, {
-      checked: preference.cursorSmoothCaretAnimation,
-      onChange: value => {
-        updatePreference({
-          cursorSmoothCaretAnimation: value
-        });
-      }
-    }));
+  var renderPreferenceItemCursorSmoothCaretAnimation = function renderPreferenceItemCursorSmoothCaretAnimation() {
+    return jsxRuntime.jsxs(StyledPreferenceBodyItem, {
+      children: [jsxRuntime.jsx(blocks.Text, {
+        role: "navy",
+        size: "tiny",
+        block: true,
+        children: __intl.formatMessage({
+          id: 'monacoEditorPerferenceForm.displaying.item.cursorSmoothCaretAnimation.name'
+        })
+      }), jsxRuntime.jsx(blocks.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(blocks.Text, {
-      role: "navy",
-      size: "tiny",
-      block: true
-    }, __intl.formatMessage({
-      id: 'monacoEditorPerferenceForm.textEditing.item.autoClosingBrackets.name'
-    })), React.createElement(blocks.AntSwitch, {
-      checked: preference.autoClosingBrackets === 'always',
-      onChange: value => {
-        updatePreference({
-          autoClosingBrackets: value ? 'always' : 'never'
-        });
-      }
-    }));
+  var renderPreferenceItemAutoClosingBrackets = function renderPreferenceItemAutoClosingBrackets() {
+    return jsxRuntime.jsxs(StyledPreferenceBodyItem, {
+      children: [jsxRuntime.jsx(blocks.Text, {
+        role: "navy",
+        size: "tiny",
+        block: true,
+        children: __intl.formatMessage({
+          id: 'monacoEditorPerferenceForm.textEditing.item.autoClosingBrackets.name'
+        })
+      }), jsxRuntime.jsx(blocks.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(blocks.Text, {
-      role: "navy",
-      size: "tiny",
-      block: true
-    }, __intl.formatMessage({
-      id: 'monacoEditorPerferenceForm.textEditing.item.detectIndentation.name'
-    })), React.createElement(blocks.AntSwitch, {
-      checked: preference.detectIndentation,
-      onChange: value => {
-        updatePreference({
-          detectIndentation: value
-        });
-      }
-    }));
+  var renderPreferenceItemDetectIndentation = function renderPreferenceItemDetectIndentation() {
+    return jsxRuntime.jsxs(StyledPreferenceBodyItem, {
+      children: [jsxRuntime.jsx(blocks.Text, {
+        role: "navy",
+        size: "tiny",
+        block: true,
+        children: __intl.formatMessage({
+          id: 'monacoEditorPerferenceForm.textEditing.item.detectIndentation.name'
+        })
+      }), jsxRuntime.jsx(blocks.AntSwitch, {
+        checked: preference.detectIndentation,
+        onChange: function onChange(value) {
+          updatePreference({
+            detectIndentation: value
+          });
+        }
+      })]
+    });
   };
   /**
    * text editing > tab size
    */
-  const renderPreferenceItemTabSize = () => {
-    return React.createElement(StyledPreferenceBodyItem, null, React.createElement(blocks.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)
-        });
-      }
-    }, preferences.MONACO_EDITOR_PREFERENCE_OPTIONS_TAB_SIZES.map(size => React.createElement("option", {
-      key: size,
-      value: size
-    }, size))));
+  var renderPreferenceItemTabSize = function renderPreferenceItemTabSize() {
+    return jsxRuntime.jsxs(StyledPreferenceBodyItem, {
+      children: [jsxRuntime.jsx(blocks.Text, {
+        role: preference.detectIndentation ? 'grey6' : 'info',
+        block: true,
+        size: "small",
+        children: __intl.formatMessage({
+          id: 'monacoEditorPerferenceForm.textEditing.item.tabSize.name'
+        })
+      }), jsxRuntime.jsx(StyledSelect, {
+        value: preference.tabSize,
+        size: "small",
+        width: "xsmall",
+        disabled: preference.detectIndentation,
+        onChange: function onChange(value) {
+          updatePreference({
+            tabSize: Number(value)
+          });
+        },
+        children: preferences.MONACO_EDITOR_PREFERENCE_OPTIONS_TAB_SIZES.map(function (size) {
+          return jsxRuntime.jsx("option", {
+            value: size,
+            children: size
+          }, size);
+        })
+      })]
+    });
   };
   //
   //
   //
-  return React.createElement(React.Fragment, null, React.createElement(blocks.Text, {
-    role: "lightgrey",
-    size: "small",
-    bold: true
-  }, __intl.formatMessage({
-    id: 'monacoEditorPerferenceForm.displaying.title'
-  })), React.createElement(blocks.Vspace, {
-    height: 1
-  }), renderPreferenceItemTheme(), renderPreferenceItemFontSize(), renderPreferenceItemWordWrap(), renderPreferenceItemWhiteSpace(), renderPreferenceItemMinimap(), renderPreferenceItemCursorSmoothCaretAnimation(), React.createElement(blocks.Vspace, {
-    height: 2
-  }), React.createElement(blocks.Text, {
-    role: "lightgrey",
-    size: "small",
-    bold: true
-  }, __intl.formatMessage({
-    id: 'monacoEditorPerferenceForm.textEditing.title'
-  })), React.createElement(blocks.Vspace, {
-    height: 1
-  }), renderPreferenceItemAutoClosingBrackets(), renderPreferenceItemDetectIndentation(), renderPreferenceItemTabSize());
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsx(blocks.Text, {
+      role: "lightgrey",
+      size: "small",
+      bold: true,
+      children: __intl.formatMessage({
+        id: 'monacoEditorPerferenceForm.displaying.title'
+      })
+    }), jsxRuntime.jsx(blocks.Vspace, {
+      height: 1
+    }), renderPreferenceItemTheme(), renderPreferenceItemFontSize(), renderPreferenceItemWordWrap(), renderPreferenceItemWhiteSpace(), renderPreferenceItemMinimap(), renderPreferenceItemCursorSmoothCaretAnimation(), jsxRuntime.jsx(blocks.Vspace, {
+      height: 2
+    }), jsxRuntime.jsx(blocks.Text, {
+      role: "lightgrey",
+      size: "small",
+      bold: true,
+      children: __intl.formatMessage({
+        id: 'monacoEditorPerferenceForm.textEditing.title'
+      })
+    }), jsxRuntime.jsx(blocks.Vspace, {
+      height: 1
+    }), renderPreferenceItemAutoClosingBrackets(), renderPreferenceItemDetectIndentation(), renderPreferenceItemTabSize()]
+  });
 };
 //
 //