@elice/material-exercise 1.230328.0 → 1.230418.1

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

@@ -7,39 +7,35 @@ import { getTargetDirectoryPath } from './utils/fileTreeInput.js';
 import { isMovingTheSamePath } from './utils/fileTreePath.js';
 import { StyledTreeItems, StyledTreeItem } from './FileTreeListItems.styled.js';
 
-const FileTreeListItems = ({
-  node,
-  indent = 1
-}) => {
-  const uniqCompId = 'treeitem';
-  const {
-    activePath,
-    newInput,
-    dropzonePath,
-    renameInputPath,
-    fileTree,
-    maxFileUploadSize,
-    isHiddenFilelistVisible
-  } = useFileTreeState();
-  const {
-    dispatch,
-    onFileMove,
-    onDirectoryMove,
-    onFilesUpload
-  } = useFileTreeDispatch();
+var FileTreeListItems = function FileTreeListItems(_ref) {
+  var node = _ref.node,
+    _ref$indent = _ref.indent,
+    indent = _ref$indent === void 0 ? 1 : _ref$indent;
+  var uniqCompId = 'treeitem';
+  var _useFileTreeState = useFileTreeState(),
+    activePath = _useFileTreeState.activePath,
+    newInput = _useFileTreeState.newInput,
+    dropzonePath = _useFileTreeState.dropzonePath,
+    renameInputPath = _useFileTreeState.renameInputPath,
+    fileTree = _useFileTreeState.fileTree,
+    maxFileUploadSize = _useFileTreeState.maxFileUploadSize,
+    isHiddenFilelistVisible = _useFileTreeState.isHiddenFilelistVisible;
+  var _useFileTreeDispatch = useFileTreeDispatch(),
+    dispatch = _useFileTreeDispatch.dispatch,
+    onFileMove = _useFileTreeDispatch.onFileMove,
+    onDirectoryMove = _useFileTreeDispatch.onDirectoryMove,
+    onFilesUpload = _useFileTreeDispatch.onFilesUpload;
   /**
    *
    */
-
-  const handleFilesUpload = ({
-    files,
-    path
-  }) => {
+  var handleFilesUpload = function handleFilesUpload(_ref2) {
+    var files = _ref2.files,
+      path = _ref2.path;
     if (validateFilesSize(files, maxFileUploadSize)) {
       if (typeof onFilesUpload === 'function') {
         onFilesUpload({
-          files,
-          path
+          files: files,
+          path: path
         });
       }
     }
@@ -47,158 +43,157 @@ const FileTreeListItems = ({
   /**
    *
    */
-
-
-  const getDragStartHandler = childNode => e => {
-    var _a, _b;
-
-    e.stopPropagation(); // 🚨 data should be set in order to trigger onDrop event in "React".
-
-    e.dataTransfer.setData('text/plain', (_b = (_a = e.target) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : 'id');
-    dispatch({
-      type: 'UPDATE_DRAGGED_PATH',
-      path: childNode.path
-    });
+  var getDragStartHandler = function getDragStartHandler(childNode) {
+    return function (e) {
+      var _a, _b;
+      e.stopPropagation();
+      // 🚨 data should be set in order to trigger onDrop event in "React".
+      e.dataTransfer.setData('text/plain', (_b = (_a = e.target) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : 'id');
+      dispatch({
+        type: 'UPDATE_DRAGGED_PATH',
+        path: childNode.path
+      });
+    };
   };
   /**
    *
    */
-
-
-  const getDragEndHandler = childNode => e => {
-    e.preventDefault();
-    e.stopPropagation(); // clear drag data
-
-    e.dataTransfer.clearData(); // reset dragged path
-
-    dispatch({
-      type: 'UPDATE_DRAGGED_PATH',
-      path: null
-    }); // reset dropzone path
-
-    dispatch({
-      type: 'UPDATE_DROPZONE_PATH',
-      path: null
-    });
+  var getDragEndHandler = function getDragEndHandler(childNode) {
+    return function (e) {
+      e.preventDefault();
+      e.stopPropagation();
+      // clear drag data
+      e.dataTransfer.clearData();
+      // reset dragged path
+      dispatch({
+        type: 'UPDATE_DRAGGED_PATH',
+        path: null
+      });
+      // reset dropzone path
+      dispatch({
+        type: 'UPDATE_DROPZONE_PATH',
+        path: null
+      });
+    };
   };
   /**
    *
    */
-
-
-  const getDragEnterHandler = childNode => e => {
-    e.preventDefault();
-    e.stopPropagation();
-
-    if (childNode.isDirectory) {
+  var getDragEnterHandler = function getDragEnterHandler(childNode) {
+    return function (e) {
+      e.preventDefault();
+      e.stopPropagation();
+      if (childNode.isDirectory) {
+        dispatch({
+          type: 'ADD_OPENED_DIRECTORY_LIST',
+          path: childNode.path
+        });
+      }
       dispatch({
-        type: 'ADD_OPENED_DIRECTORY_LIST',
-        path: childNode.path
+        type: 'UPDATE_DROPZONE_PATH',
+        path: getTargetDirectoryPath(childNode)
       });
-    }
-
-    dispatch({
-      type: 'UPDATE_DROPZONE_PATH',
-      path: getTargetDirectoryPath(childNode)
-    });
+    };
   };
   /**
    * Prevent default behavior (Prevent file from being opened)
    * - ref: https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop#prevent_the_browser's_default_drag_behavior
    */
-
-
-  const getDragOverHandler = _ => e => {
-    e.preventDefault();
-    e.stopPropagation();
+  var getDragOverHandler = function getDragOverHandler(_) {
+    return function (e) {
+      e.preventDefault();
+      e.stopPropagation();
+    };
   };
   /**
    *
    */
-
-
-  const getDropHandler = _ => e => {
-    e.preventDefault();
-    e.stopPropagation();
-    const draggedPath = e.dataTransfer.getData('text').replace(`${uniqCompId}-`, ''); // file drop
-
-    if (e.dataTransfer.files.length > 0 && dropzonePath !== null) {
-      handleFilesUpload({
-        files: e.dataTransfer.files,
-        path: dropzonePath
-      });
-      dispatch({
-        type: 'UPDATE_DRAGGED_PATH',
-        path: null
-      });
-      dispatch({
-        type: 'UPDATE_DROPZONE_PATH',
-        path: null
-      });
-    } else {
-      // file move
-      const dragFileTreeNode = fileTree.findTreeNode(draggedPath); // file does not move. from a to a (the same path).
-
-      if (isMovingTheSamePath({
-        draggedPath,
-        dropzonePath,
-        dragFileTreeNode
-      })) {
-        return;
-      }
-
-      if (dragFileTreeNode && dropzonePath !== null) {
-        if (dragFileTreeNode.isDirectory) {
-          onDirectoryMove && onDirectoryMove({
-            currentFilename: dragFileTreeNode.path,
-            newPath: dropzonePath,
-            newName: dragFileTreeNode.title
-          });
-        } else {
-          onFileMove && onFileMove({
-            currentFilename: dragFileTreeNode.path,
-            newPath: dropzonePath,
-            newName: dragFileTreeNode.title
-          });
+  var getDropHandler = function getDropHandler(_) {
+    return function (e) {
+      e.preventDefault();
+      e.stopPropagation();
+      var draggedPath = e.dataTransfer.getData('text').replace("".concat(uniqCompId, "-"), '');
+      // file drop
+      if (e.dataTransfer.files.length > 0 && dropzonePath !== null) {
+        handleFilesUpload({
+          files: e.dataTransfer.files,
+          path: dropzonePath
+        });
+        dispatch({
+          type: 'UPDATE_DRAGGED_PATH',
+          path: null
+        });
+        dispatch({
+          type: 'UPDATE_DROPZONE_PATH',
+          path: null
+        });
+      } else {
+        // file move
+        var dragFileTreeNode = fileTree.findTreeNode(draggedPath);
+        // file does not move. from a to a (the same path).
+        if (isMovingTheSamePath({
+          draggedPath: draggedPath,
+          dropzonePath: dropzonePath,
+          dragFileTreeNode: dragFileTreeNode
+        })) {
+          return;
+        }
+        if (dragFileTreeNode && dropzonePath !== null) {
+          if (dragFileTreeNode.isDirectory) {
+            onDirectoryMove && onDirectoryMove({
+              currentFilename: dragFileTreeNode.path,
+              newPath: dropzonePath,
+              newName: dragFileTreeNode.title
+            });
+          } else {
+            onFileMove && onFileMove({
+              currentFilename: dragFileTreeNode.path,
+              newPath: dropzonePath,
+              newName: dragFileTreeNode.title
+            });
+          }
         }
       }
-    }
-  }; //
+    };
+  };
+  //
   //
   //
-
-
   return React.createElement(StyledTreeItems, {
     style: {
       backgroundColor: dropzonePath === '' ? base.color.primary7 : 'transparent'
     }
-  }, node.children.filter(childNode => isHiddenFilelistVisible ? true : !childNode.isHidden).map((childNode, index) => React.createElement(StyledTreeItem, {
-    key: childNode.path,
-    id: `${uniqCompId}-${childNode.path}`,
-    role: "treeitem",
-    "aria-selected": childNode.path === activePath,
-    "aria-label": childNode.title,
-    "aria-level": indent,
-    "aria-setsize": node.children.length,
-    "aria-posinset": index + 1,
-    "aria-expanded": childNode.isDirectory && childNode.expanded,
-    draggable: !newInput && !renameInputPath && childNode.isRemovable,
-    onDragStart: getDragStartHandler(childNode),
-    onDragEnd: getDragEndHandler(),
-    onDragEnter: getDragEnterHandler(childNode),
-    onDragOver: getDragOverHandler(),
-    onDrop: getDropHandler(),
-    style: {
-      backgroundColor: dropzonePath === childNode.path && !childNode.isEdit ? base.color.primary7 : ''
-    }
-  }, React.createElement(FileTreeListItemContent, {
-    node: childNode,
-    parentNode: node,
-    indent: indent
-  }), childNode.children.length > 0 && childNode.expanded ? React.createElement(FileTreeListItems, {
-    node: childNode,
-    indent: indent
-  }) : null)));
+  }, node.children.filter(function (childNode) {
+    return isHiddenFilelistVisible ? true : !childNode.isHidden;
+  }).map(function (childNode, index) {
+    return React.createElement(StyledTreeItem, {
+      key: childNode.path,
+      id: "".concat(uniqCompId, "-").concat(childNode.path),
+      role: "treeitem",
+      "aria-selected": childNode.path === activePath,
+      "aria-label": childNode.title,
+      "aria-level": indent,
+      "aria-setsize": node.children.length,
+      "aria-posinset": index + 1,
+      "aria-expanded": childNode.isDirectory && childNode.expanded,
+      draggable: !newInput && !renameInputPath && childNode.isRemovable,
+      onDragStart: getDragStartHandler(childNode),
+      onDragEnd: getDragEndHandler(),
+      onDragEnter: getDragEnterHandler(childNode),
+      onDragOver: getDragOverHandler(),
+      onDrop: getDropHandler(),
+      style: {
+        backgroundColor: dropzonePath === childNode.path && !childNode.isEdit ? base.color.primary7 : ''
+      }
+    }, React.createElement(FileTreeListItemContent, {
+      node: childNode,
+      parentNode: node,
+      indent: indent
+    }), childNode.children.length > 0 && childNode.expanded ? React.createElement(FileTreeListItems, {
+      node: childNode,
+      indent: indent
+    }) : null);
+  }));
 };
 
 export { FileTreeListItems as default };

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

@@ -1,9 +1,9 @@
 import styled from 'styled-components';
 
-const StyledTreeItems = styled.ul.withConfig({
+var StyledTreeItems = styled.ul.withConfig({
   componentId: "sc-1bh7pa8-0"
 })(["padding:0;margin:0;overflow:hidden;"]);
-const StyledTreeItem = styled.li.withConfig({
+var StyledTreeItem = styled.li.withConfig({
   componentId: "sc-1bh7pa8-1"
 })(["list-style:none;cursor:pointer;"]);
 

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

@@ -7,33 +7,29 @@ import { validateFilesSize } from './utils/fileTreeFiles.js';
 import { getTargetDirectoryPath } from './utils/fileTreeInput.js';
 import { StyledFileTreeToolbar } from './FileTreeToolbar.styled.js';
 
-const FileTreeToolbar = ({
-  className
-}) => {
-  const intl = useIntl();
-  const {
-    activePath,
-    fileTree,
-    maxFileUploadSize
-  } = useFileTreeState();
-  const {
-    dispatch,
-    onFilesUpload
-  } = useFileTreeDispatch();
-  const inputRef = React.useRef(null);
+var FileTreeToolbar = function FileTreeToolbar(_ref) {
+  var className = _ref.className;
+  var intl = useIntl();
+  var _useFileTreeState = useFileTreeState(),
+    activePath = _useFileTreeState.activePath,
+    fileTree = _useFileTreeState.fileTree,
+    maxFileUploadSize = _useFileTreeState.maxFileUploadSize;
+  var _useFileTreeDispatch = useFileTreeDispatch(),
+    dispatch = _useFileTreeDispatch.dispatch,
+    onFilesUpload = _useFileTreeDispatch.onFilesUpload;
+  var inputRef = React.useRef(null);
   /**
    * File add button.
    */
-
-  const renderFileAddButton = () => {
+  var renderFileAddButton = function renderFileAddButton() {
     return React.createElement(ExerciseMenuButton, {
       icon: eilFileAdd,
       title: intl.formatMessage({
         id: 'fileTree.toolbar.newFile'
       }),
       placement: "bottom-start",
-      onClick: () => {
-        const activeFileNode = fileTree.findTreeNode(activePath);
+      onClick: function onClick() {
+        var activeFileNode = fileTree.findTreeNode(activePath);
         dispatch({
           type: 'NEW_INPUT_OPEN',
           newInput: {
@@ -47,17 +43,15 @@ const FileTreeToolbar = ({
   /**
    * Folder add button.
    */
-
-
-  const renderFolderAddButton = () => {
+  var renderFolderAddButton = function renderFolderAddButton() {
     return React.createElement(ExerciseMenuButton, {
       icon: eilFolderAdd,
       title: intl.formatMessage({
         id: 'fileTree.toolbar.newDirectory'
       }),
       placement: "bottom-start",
-      onClick: () => {
-        const activeFileNode = fileTree.findTreeNode(activePath);
+      onClick: function onClick() {
+        var activeFileNode = fileTree.findTreeNode(activePath);
         dispatch({
           type: 'NEW_INPUT_OPEN',
           newInput: {
@@ -71,18 +65,15 @@ const FileTreeToolbar = ({
   /**
    * File upload button.
    */
-
-
-  const renderFileUploadButton = () => {
+  var renderFileUploadButton = function renderFileUploadButton() {
     return React.createElement(React.Fragment, null, React.createElement(ExerciseMenuButton, {
       icon: eilUpload,
       title: intl.formatMessage({
         id: 'fileTree.toolbar.upload'
       }),
       placement: "bottom-start",
-      onClick: () => {
+      onClick: function onClick() {
         var _a;
-
         (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
       }
     }), React.createElement("input", {
@@ -92,31 +83,27 @@ const FileTreeToolbar = ({
       style: {
         display: 'none'
       },
-      onChange: e => {
+      onChange: function onChange(e) {
         var _a;
-
-        const files = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.files;
-
+        var files = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.files;
         if (files && typeof onFilesUpload === 'function') {
           if (validateFilesSize(files, maxFileUploadSize)) {
             onFilesUpload({
-              files,
+              files: files,
               path: ''
             });
           }
         }
       }
     }));
-  }; //
+  };
+  //
   //
   //
-
-
   return React.createElement(StyledFileTreeToolbar, {
     className: className
   }, renderFileAddButton(), renderFolderAddButton(), renderFileUploadButton());
 };
-
 var FileTreeToolbar$1 = FileTreeToolbar;
 
 export { FileTreeToolbar$1 as default };

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

@@ -1,7 +1,7 @@
 import { base } from '@elice/design-tokens';
 import styled from 'styled-components';
 
-const StyledFileTreeToolbar = styled.div.withConfig({
+var StyledFileTreeToolbar = styled.div.withConfig({
   componentId: "sc-1lmdwux-0"
 })(["flex:0 0 2.25rem;display:flex;align-items:center;padding:0.25rem 0.5rem;background-color:", ";"], base.color.navy8);