@elice/material-exercise 1.230325.0 → 1.230418.0

package/es/components/shared/file-tree/FileTreeListItemContentInput.js

@@ -6,50 +6,45 @@ import { getParentPath } from './utils/fileTreeGenerator.js';
 import { useFileTreeDispatch } from './context/FileTreeContext.js';
 import { StyledInputForm, StyledInput } from './FileTreeListItemContentInput.styled.js';
 
-const FILENAME_MAX_LENGTH = 65535;
-const FILENAME_REGEXP_DOT = /^\.$/;
-const FILENAME_REGEXP_DOTDOT = /^\.\.$/;
-const FILENAME_REGEXP_DOT_ELICE = /^\.elice$/;
-const FILENAME_REGEXP_SLASH = /\//;
-const FILENAME_REGEXP_BACK_SLASH = /\\/;
-
-const FileTreeListItemContentInput = ({
-  type,
-  initialValue,
-  className,
-  style,
-  currentPath,
-  currentDirTitleList,
-  newInputType
-}) => {
-  const intl = useIntl();
-  const targetPath = getParentPath(currentPath);
-  const {
-    dispatch,
-    onFileAdd,
-    onDirectoryAdd,
-    onActivePathChange,
-    onFileMove,
-    onDirectoryMove
-  } = useFileTreeDispatch();
-  const {
-    control,
-    handleSubmit,
-    reset,
-    getValues
-  } = useForm({
-    defaultValues: {
-      filename: initialValue || ''
-    },
-    mode: 'onChange'
-  });
-  const formElRef = React.useRef(null);
-  const inputElRef = React.useRef(null);
+var FILENAME_MAX_LENGTH = 65535;
+var FILENAME_REGEXP_DOT = /^\.$/;
+var FILENAME_REGEXP_DOTDOT = /^\.\.$/;
+var FILENAME_REGEXP_DOT_ELICE = /^\.elice$/;
+var FILENAME_REGEXP_SLASH = /\//;
+var FILENAME_REGEXP_BACK_SLASH = /\\/;
+var FileTreeListItemContentInput = function FileTreeListItemContentInput(_ref) {
+  var type = _ref.type,
+    initialValue = _ref.initialValue,
+    className = _ref.className,
+    style = _ref.style,
+    currentPath = _ref.currentPath,
+    currentDirTitleList = _ref.currentDirTitleList,
+    newInputType = _ref.newInputType;
+  var intl = useIntl();
+  var targetPath = getParentPath(currentPath);
+  var _useFileTreeDispatch = useFileTreeDispatch(),
+    dispatch = _useFileTreeDispatch.dispatch,
+    onFileAdd = _useFileTreeDispatch.onFileAdd,
+    onDirectoryAdd = _useFileTreeDispatch.onDirectoryAdd,
+    onActivePathChange = _useFileTreeDispatch.onActivePathChange,
+    onFileMove = _useFileTreeDispatch.onFileMove,
+    onDirectoryMove = _useFileTreeDispatch.onDirectoryMove;
+  var _useForm = useForm({
+      defaultValues: {
+        filename: initialValue || ''
+      },
+      mode: 'onChange'
+    }),
+    control = _useForm.control,
+    handleSubmit = _useForm.handleSubmit,
+    reset = _useForm.reset,
+    getValues = _useForm.getValues;
+  var formElRef = React.useRef(null);
+  var inputElRef = React.useRef(null);
   /**
    * Close current input.
    */
-
-  const close = () => {
+  var close = function close() {
     reset({
       filename: initialValue
     });
@@ -67,9 +62,7 @@ const FileTreeListItemContentInput = ({
   /**
    * Validate input value.
    */
-
-
-  const validateFilename = newFilename => {
+  var validateFilename = function validateFilename(newFilename) {
     switch (true) {
       // has dot or dot-dot
       case FILENAME_REGEXP_DOT.test(newFilename) || FILENAME_REGEXP_DOTDOT.test(newFilename):
@@ -77,24 +70,22 @@ const FileTreeListItemContentInput = ({
           id: 'fileTree.list.item.content.input.validation.error.filename.dot'
         });
       // has `.elice`
-
       case FILENAME_REGEXP_DOT_ELICE.test(newFilename):
         return intl.formatMessage({
           id: 'fileTree.list.item.content.input.validation.error.filename.dotElice'
         });
       // has slash or backslash
-
       case FILENAME_REGEXP_SLASH.test(newFilename) || FILENAME_REGEXP_BACK_SLASH.test(newFilename):
         return intl.formatMessage({
           id: 'fileTree.list.item.content.input.validation.error.filename.slash'
         });
       // duplicated
-
-      case currentDirTitleList.some(title => title === newFilename):
+      case currentDirTitleList.some(function (title) {
+        return title === newFilename;
+      }):
         return intl.formatMessage({
           id: 'fileTree.list.item.content.input.validation.error.filename.duplicated'
         });
-
       default:
         return true;
     }
@@ -102,71 +93,64 @@ const FileTreeListItemContentInput = ({
   /**
    * Add file.
    */
-
-
-  const addFile = params => {
+  var addFile = function addFile(params) {
     if (typeof onFileAdd !== 'function' || !params.emptyFileWithName) {
       close();
       return;
     }
-
-    onFileAdd(params).then(() => onActivePathChange(params.path === '' ? `${params.emptyFileWithName}` : `${params.path}/${params.emptyFileWithName}`, false)).then(close).catch(() => {//
+    onFileAdd(params).then(function () {
+      return onActivePathChange(params.path === '' ? "".concat(params.emptyFileWithName) : "".concat(params.path, "/").concat(params.emptyFileWithName), false);
+    }).then(close).catch(function () {
+      //
     });
   };
   /**
    * Add directory.
    */
-
-
-  const addDirectory = params => {
+  var addDirectory = function addDirectory(params) {
     if (typeof onDirectoryAdd !== 'function' || !params.name) {
       close();
       return;
     }
-
-    onDirectoryAdd(params).then(() => onActivePathChange(params.path === '' ? `${params.name}` : `${params.path}/${params.name}`, true)).then(close).catch(() => {//
+    onDirectoryAdd(params).then(function () {
+      return onActivePathChange(params.path === '' ? "".concat(params.name) : "".concat(params.path, "/").concat(params.name), true);
+    }).then(close).catch(function () {
+      //
     });
   };
   /**
    * Move file.
    */
-
-
-  const moveFile = params => {
+  var moveFile = function moveFile(params) {
     if (typeof onFileMove !== 'function' || params.newName === initialValue) {
       close();
       return;
     }
-
-    onFileMove(params).then(close).catch(() => {//
+    onFileMove(params).then(close).catch(function () {
+      //
     });
   };
   /**
    * Move directory.
    */
-
-
-  const moveDirectory = params => {
+  var moveDirectory = function moveDirectory(params) {
     if (typeof onDirectoryMove !== 'function' || params.newName === initialValue) {
       close();
       return;
     }
-
-    onDirectoryMove(params).then(close).catch(() => {//
+    onDirectoryMove(params).then(close).catch(function () {
+      //
     });
   };
   /**
    * Submit and rename file.
    */
-
-
-  const handleFormSubmit = handleSubmit(newData => {
+  var handleFormSubmit = handleSubmit(function (newData) {
     // if new input is empty, close it.
     if (!newData.filename) {
       close();
       return;
     }
-
     if (type === 'new') {
       if (newInputType === 'file') {
         addFile({
@@ -175,7 +159,6 @@ const FileTreeListItemContentInput = ({
           overwrite: false
         });
       }
-
       if (newInputType === 'directory') {
         addDirectory({
           path: targetPath,
@@ -191,7 +174,6 @@ const FileTreeListItemContentInput = ({
           newPath: targetPath
         });
       }
-
       if (newInputType === 'directory') {
         moveDirectory({
           currentFilename: currentPath,
@@ -204,50 +186,42 @@ const FileTreeListItemContentInput = ({
   /**
    * Handle click away.
    */
-
-  const handleFormClickAway = () => {
-    const newFilename = getValues('filename');
-
+  var handleFormClickAway = function handleFormClickAway() {
+    var newFilename = getValues('filename');
     if (newFilename) {
       void handleFormSubmit();
       return;
     }
-
     close();
   };
   /**
    * Handle keydown event.
    */
-
-
-  const handleKeyDown = e => {
+  var handleKeyDown = function handleKeyDown(e) {
     switch (e.key) {
       case 'Escape':
         close();
         break;
     }
-  }; //
+  };
+  //
   // Select value at input when initial value is set.
   //
-
-
-  React.useEffect(() => {
+  React.useEffect(function () {
     var _a;
-
     if (!inputElRef.current || !initialValue) {
       return;
     }
-
-    const rangeEndExcludeExtension = initialValue.indexOf((_a = initialValue.split('.').pop()) !== null && _a !== void 0 ? _a : '') - 1;
+    var rangeEndExcludeExtension = initialValue.indexOf((_a = initialValue.split('.').pop()) !== null && _a !== void 0 ? _a : '') - 1;
     inputElRef.current.setSelectionRange(0, rangeEndExcludeExtension > 0 ? rangeEndExcludeExtension : initialValue.length);
-  }, [initialValue]); //
+  }, [initialValue]);
+  //
   // Submit form when click outside.
   //
-
-  useClickAway(formElRef, handleFormClickAway); //
+  useClickAway(formElRef, handleFormClickAway);
+  //
   //
   //
-
   return React.createElement(StyledInputForm, {
     onSubmit: handleFormSubmit,
     ref: formElRef
@@ -271,12 +245,10 @@ const FileTreeListItemContentInput = ({
       },
       validate: validateFilename
     },
-    render: ({
-      field,
-      fieldState
-    }) => {
+    render: function render(_ref2) {
+      var field = _ref2.field,
+        fieldState = _ref2.fieldState;
       var _a;
-
       return React.createElement(StyledInput, Object.assign({}, field, {
         type: "text",
         className: className,
@@ -286,7 +258,9 @@ const FileTreeListItemContentInput = ({
         invalidText: (_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message,
         autoFocus: true,
         style: style,
-        onChange: e => field.onChange(e.target.value.trim()),
+        onChange: function onChange(e) {
+          return field.onChange(e.target.value.trim());
+        },
         onKeyDown: handleKeyDown,
         ref: inputElRef
       }));

package/es/components/shared/file-tree/FileTreeListItemContentInput.styled.js

@@ -2,14 +2,14 @@ import { Input } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
 import styled from 'styled-components';
 
-const INPUT_HEIGHT = '1.25rem';
-const INPUT_FONT_SIZE = '0.75rem';
-const INPUT_INNER_LEFT_PADDING = '0.125rem';
-const INPUT_INNER_RIGHT_PADDING = '0.25rem';
-const StyledInputForm = styled.form.withConfig({
+var INPUT_HEIGHT = '1.25rem';
+var INPUT_FONT_SIZE = '0.75rem';
+var INPUT_INNER_LEFT_PADDING = '0.125rem';
+var INPUT_INNER_RIGHT_PADDING = '0.25rem';
+var StyledInputForm = styled.form.withConfig({
   componentId: "sc-1glq6yp-0"
 })(["flex:1;display:flex;"]);
-const StyledInput = styled(Input).withConfig({
+var StyledInput = styled(Input).withConfig({
   componentId: "sc-1glq6yp-1"
 })(["min-height:", ";> div{background:transparent !important;> div{&:nth-child(1){padding:", ";}&:nth-child(3){padding:", ";}}.eb-icon{width:0.875em;height:0.875em;font-size:0.875em;}}& input{padding-top:0 !important;padding-bottom:0 !important;height:", " !important;color:", " !important;font-size:", " !important;}"], INPUT_HEIGHT, INPUT_INNER_LEFT_PADDING, INPUT_INNER_RIGHT_PADDING, INPUT_HEIGHT, base.color.gray0, INPUT_FONT_SIZE);
 

package/es/components/shared/file-tree/FileTreeListItemContentMenu.js

@@ -1,31 +1,31 @@
+import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import React from 'react';
 import { useIntl, FormattedMessage } from 'react-intl';
 import { Menu, List, Dialog } from '@elice/blocks';
 import { useFileTreeState, useFileTreeDispatch } from './context/FileTreeContext.js';
 
-const FileTreeListItemContentMenu = ({
-  node,
-  anchorEl,
-  onClose
-}) => {
-  const intl = useIntl();
-  const {
-    allowToggleHidden,
-    allowToggleReadonly
-  } = useFileTreeState();
-  const {
-    dispatch,
-    onHiddenSet,
-    onReadOnlySet,
-    onFileDelete,
-    onDirectoryDelete
-  } = useFileTreeDispatch();
-  const [isDeleteDialogOpen, setDeleteDialogOpen] = React.useState(false);
+var FileTreeListItemContentMenu = function FileTreeListItemContentMenu(_ref) {
+  var node = _ref.node,
+    anchorEl = _ref.anchorEl,
+    onClose = _ref.onClose;
+  var intl = useIntl();
+  var _useFileTreeState = useFileTreeState(),
+    allowToggleHidden = _useFileTreeState.allowToggleHidden,
+    allowToggleReadonly = _useFileTreeState.allowToggleReadonly;
+  var _useFileTreeDispatch = useFileTreeDispatch(),
+    dispatch = _useFileTreeDispatch.dispatch,
+    onHiddenSet = _useFileTreeDispatch.onHiddenSet,
+    onReadOnlySet = _useFileTreeDispatch.onReadOnlySet,
+    onFileDelete = _useFileTreeDispatch.onFileDelete,
+    onDirectoryDelete = _useFileTreeDispatch.onDirectoryDelete;
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    isDeleteDialogOpen = _React$useState2[0],
+    setDeleteDialogOpen = _React$useState2[1];
   /**
    * Set file readonly.
    */
-
-  const handleReadOnlySet = () => {
+  var handleReadOnlySet = function handleReadOnlySet() {
     if (typeof onReadOnlySet === 'function') {
       onReadOnlySet({
         path: node.path,
@@ -36,9 +36,7 @@ const FileTreeListItemContentMenu = ({
   /**
    * Unset file readonly.
    */
-
-
-  const handleReadOnlyUnset = () => {
+  var handleReadOnlyUnset = function handleReadOnlyUnset() {
     if (typeof onReadOnlySet === 'function') {
       onReadOnlySet({
         path: node.path,
@@ -49,9 +47,7 @@ const FileTreeListItemContentMenu = ({
   /**
    * Set file hidden.
    */
-
-
-  const handleHiddenSet = () => {
+  var handleHiddenSet = function handleHiddenSet() {
     if (typeof onHiddenSet === 'function') {
       onHiddenSet({
         path: node.path,
@@ -62,9 +58,7 @@ const FileTreeListItemContentMenu = ({
   /**
    * Unset file hidden.
    */
-
-
-  const handleHiddenUnset = () => {
+  var handleHiddenUnset = function handleHiddenUnset() {
     if (typeof onHiddenSet === 'function') {
       onHiddenSet({
         path: node.path,
@@ -75,9 +69,7 @@ const FileTreeListItemContentMenu = ({
   /**
    * Create a new file.
    */
-
-
-  const handleNewFile = () => {
+  var handleNewFile = function handleNewFile() {
     dispatch({
       type: 'NEW_INPUT_OPEN',
       newInput: {
@@ -89,9 +81,7 @@ const FileTreeListItemContentMenu = ({
   /**
    * Create a new directory.
    */
-
-
-  const handleNewDirectory = () => {
+  var handleNewDirectory = function handleNewDirectory() {
     dispatch({
       type: 'NEW_INPUT_OPEN',
       newInput: {
@@ -103,9 +93,7 @@ const FileTreeListItemContentMenu = ({
   /**
    * Rename file.
    */
-
-
-  const handleRename = () => {
+  var handleRename = function handleRename() {
     dispatch({
       type: 'UPDATE_RENAME_INPUT_PATH',
       path: node.path
@@ -114,13 +102,10 @@ const FileTreeListItemContentMenu = ({
   /**
    * Delete file.
    */
-
-
-  const handleDelete = () => {
+  var handleDelete = function handleDelete() {
     if (node.isDirectory && typeof onDirectoryDelete === 'function') {
       void onDirectoryDelete(node.path);
     }
-
     if (!node.isDirectory && typeof onFileDelete === 'function') {
       void onFileDelete(node.path);
     }
@@ -128,13 +113,10 @@ const FileTreeListItemContentMenu = ({
   /**
    * Set file readonly.
    */
-
-
-  const renderMenuItemReadOnlySet = () => {
+  var renderMenuItemReadOnlySet = function renderMenuItemReadOnlySet() {
     if (!allowToggleReadonly || node.isDirectory || node.isReadonly || node.isHidden) {
       return null;
     }
-
     return React.createElement(List.Item, {
       onClick: handleReadOnlySet
     }, React.createElement(List.ItemText, null, React.createElement(FormattedMessage, {
@@ -144,13 +126,10 @@ const FileTreeListItemContentMenu = ({
   /**
    * Unset file readonly.
    */
-
-
-  const renderMenuItemReadOnlyUnset = () => {
+  var renderMenuItemReadOnlyUnset = function renderMenuItemReadOnlyUnset() {
     if (!allowToggleReadonly || node.isDirectory || !node.isReadonly) {
       return null;
     }
-
     return React.createElement(List.Item, {
       onClick: handleReadOnlyUnset
     }, React.createElement(List.ItemText, null, React.createElement(FormattedMessage, {
@@ -160,13 +139,10 @@ const FileTreeListItemContentMenu = ({
   /**
    * Set file hidden.
    */
-
-
-  const renderMenuItemHiddenSet = () => {
+  var renderMenuItemHiddenSet = function renderMenuItemHiddenSet() {
     if (!allowToggleHidden || node.isDirectory || node.isReadonly || node.isHidden) {
       return null;
     }
-
     return React.createElement(List.Item, {
       onClick: handleHiddenSet
     }, React.createElement(List.ItemText, null, React.createElement(FormattedMessage, {
@@ -176,13 +152,10 @@ const FileTreeListItemContentMenu = ({
   /**
    * Unset file hidden.
    */
-
-
-  const renderMenuItemHiddenUnset = () => {
+  var renderMenuItemHiddenUnset = function renderMenuItemHiddenUnset() {
     if (!allowToggleHidden || node.isDirectory || !node.isHidden) {
       return null;
     }
-
     return React.createElement(List.Item, {
       onClick: handleHiddenUnset
     }, React.createElement(List.ItemText, null, React.createElement(FormattedMessage, {
@@ -192,13 +165,10 @@ const FileTreeListItemContentMenu = ({
   /**
    * New file.
    */
-
-
-  const renderMenuItemNewFile = () => {
+  var renderMenuItemNewFile = function renderMenuItemNewFile() {
     if (!node.isDirectory) {
       return null;
     }
-
     return React.createElement(List.Item, {
       onClick: handleNewFile
     }, React.createElement(List.ItemText, null, React.createElement(FormattedMessage, {
@@ -208,13 +178,10 @@ const FileTreeListItemContentMenu = ({
   /**
    * New directory.
    */
-
-
-  const renderMenuItemNewDirectory = () => {
+  var renderMenuItemNewDirectory = function renderMenuItemNewDirectory() {
     if (!node.isDirectory) {
       return null;
     }
-
     return React.createElement(List.Item, {
       onClick: handleNewDirectory
     }, React.createElement(List.ItemText, null, React.createElement(FormattedMessage, {
@@ -224,9 +191,7 @@ const FileTreeListItemContentMenu = ({
   /**
    * Rename file.
    */
-
-
-  const renderMenuItemRename = () => {
+  var renderMenuItemRename = function renderMenuItemRename() {
     return React.createElement(List.Item, {
       disabled: !node.isRemovable,
       onClick: handleRename
@@ -237,12 +202,12 @@ const FileTreeListItemContentMenu = ({
   /**
    * Delete file.
    */
-
-
-  const renderMenuItemDelete = () => {
+  var renderMenuItemDelete = function renderMenuItemDelete() {
     return React.createElement(List.Item, {
       disabled: !node.isRemovable,
-      onClick: () => setDeleteDialogOpen(true)
+      onClick: function onClick() {
+        return setDeleteDialogOpen(true);
+      }
     }, React.createElement(List.ItemText, null, React.createElement(FormattedMessage, {
       id: "fileTree.list.item.content.menu.item.delete"
     })));
@@ -250,9 +215,7 @@ const FileTreeListItemContentMenu = ({
   /**
    * Menu.
    */
-
-
-  const renderMenu = () => {
+  var renderMenu = function renderMenu() {
     return React.createElement(Menu, {
       open: Boolean(anchorEl),
       anchorEl: anchorEl,
@@ -265,13 +228,10 @@ const FileTreeListItemContentMenu = ({
   /**
    * Dialog for confirm delete.
    */
-
-
-  const renderDeleteConfirmDialog = () => {
+  var renderDeleteConfirmDialog = function renderDeleteConfirmDialog() {
     if (!isDeleteDialogOpen) {
       return null;
     }
-
     return React.createElement(Dialog, {
       type: "warning",
       title: intl.formatMessage({
@@ -282,9 +242,13 @@ const FileTreeListItemContentMenu = ({
       }, {
         title: node.title
       }),
-      onHide: () => setDeleteDialogOpen(false)
+      onHide: function onHide() {
+        return setDeleteDialogOpen(false);
+      }
     }, React.createElement(Dialog.CloseButton, {
-      onClick: () => setDeleteDialogOpen(false)
+      onClick: function onClick() {
+        return setDeleteDialogOpen(false);
+      }
     }, React.createElement(FormattedMessage, {
       id: "fileTree.list.item.content.menu.deleteConfirmDialog.cancel"
     })), React.createElement(Dialog.ActionButton, {
@@ -292,11 +256,10 @@ const FileTreeListItemContentMenu = ({
     }, React.createElement(FormattedMessage, {
       id: "fileTree.list.item.content.menu.deleteConfirmDialog.confirm"
     })));
-  }; //
+  };
+  //
   //
   //
-
-
   return React.createElement(React.Fragment, null, renderMenu(), renderDeleteConfirmDialog());
 };