@elice/material-exercise 1.231212.0 → 1.231228.0

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

@@ -7,35 +7,38 @@ import { getTargetDirectoryPath } from './utils/fileTreeInput.js';
 import { isMovingTheSamePath } from './utils/fileTreePath.js';
 import { StyledTreeItems, StyledTreeItem } from './FileTreeListItems.styled.js';
 
-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 FileTreeListItems = ({
+  node,
+  indent = 1
+}) => {
+  const uniqCompId = 'treeitem';
+  const {
+    activePath,
+    newInput,
+    dropzonePath,
+    renameInputPath,
+    fileTree,
+    maxFileUploadSize,
+    isHiddenFilelistVisible
+  } = useFileTreeState();
+  const {
+    dispatch,
+    onFileMove,
+    onDirectoryMove,
+    onFilesUpload
+  } = useFileTreeDispatch();
   /**
    *
    */
-  var handleFilesUpload = function handleFilesUpload(_ref2) {
-    var files = _ref2.files,
-      path = _ref2.path;
+  const handleFilesUpload = ({
+    files,
+    path
+  }) => {
     if (validateFilesSize(files, maxFileUploadSize)) {
       if (typeof onFilesUpload === 'function') {
         onFilesUpload({
-          files: files,
-          path: path
+          files,
+          path
         });
       }
     }
@@ -43,118 +46,108 @@ var FileTreeListItems = function FileTreeListItems(_ref) {
   /**
    *
    */
-  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 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 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 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 getDragEnterHandler = function getDragEnterHandler(childNode) {
-    return function (e) {
-      e.preventDefault();
-      e.stopPropagation();
-      if (childNode.isDirectory) {
-        dispatch({
-          type: 'ADD_OPENED_DIRECTORY_LIST',
-          path: childNode.path
-        });
-      }
+  const getDragEnterHandler = childNode => e => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (childNode.isDirectory) {
       dispatch({
-        type: 'UPDATE_DROPZONE_PATH',
-        path: getTargetDirectoryPath(childNode)
+        type: 'ADD_OPENED_DIRECTORY_LIST',
+        path: childNode.path
       });
-    };
+    }
+    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
    */
-  var getDragOverHandler = function getDragOverHandler(_) {
-    return function (e) {
-      e.preventDefault();
-      e.stopPropagation();
-    };
+  const getDragOverHandler = _ => e => {
+    e.preventDefault();
+    e.stopPropagation();
   };
   /**
    *
    */
-  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 && void onDirectoryMove({
-              currentFilename: dragFileTreeNode.path,
-              newPath: dropzonePath,
-              newName: dragFileTreeNode.title
-            });
-          } else {
-            onFileMove && void onFileMove({
-              currentFilename: dragFileTreeNode.path,
-              newPath: dropzonePath,
-              newName: dragFileTreeNode.title
-            });
-          }
+  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 && void onDirectoryMove({
+            currentFilename: dragFileTreeNode.path,
+            newPath: dropzonePath,
+            newName: dragFileTreeNode.title
+          });
+        } else {
+          onFileMove && void onFileMove({
+            currentFilename: dragFileTreeNode.path,
+            newPath: dropzonePath,
+            newName: dragFileTreeNode.title
+          });
         }
       }
-    };
+    }
   };
   //
   //
@@ -163,37 +156,33 @@ var FileTreeListItems = function FileTreeListItems(_ref) {
     style: {
       backgroundColor: dropzonePath === '' ? base.color.primary7 : 'transparent'
     }
-  }, 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);
-  }));
+  }, 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)));
 };
 
 export { FileTreeListItems as default };

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

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

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

@@ -7,29 +7,32 @@ import { validateFilesSize } from './utils/fileTreeFiles.js';
 import { getTargetDirectoryPath } from './utils/fileTreeInput.js';
 import { StyledFileTreeToolbar } from './FileTreeToolbar.styled.js';
 
-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);
+const FileTreeToolbar = ({
+  className
+}) => {
+  const intl = useIntl();
+  const {
+    activePath,
+    fileTree,
+    maxFileUploadSize
+  } = useFileTreeState();
+  const {
+    dispatch,
+    onFilesUpload
+  } = useFileTreeDispatch();
+  const inputRef = React.useRef(null);
   /**
    * File add button.
    */
-  var renderFileAddButton = function renderFileAddButton() {
+  const renderFileAddButton = () => {
     return React.createElement(ExerciseMenuButton, {
       icon: eilFileAdd,
       title: intl.formatMessage({
         id: 'fileTree.toolbar.newFile'
       }),
       placement: "bottom-start",
-      onClick: function onClick() {
-        var activeFileNode = fileTree.findTreeNode(activePath);
+      onClick: () => {
+        const activeFileNode = fileTree.findTreeNode(activePath);
         dispatch({
           type: 'NEW_INPUT_OPEN',
           newInput: {
@@ -43,15 +46,15 @@ var FileTreeToolbar = function FileTreeToolbar(_ref) {
   /**
    * Folder add button.
    */
-  var renderFolderAddButton = function renderFolderAddButton() {
+  const renderFolderAddButton = () => {
     return React.createElement(ExerciseMenuButton, {
       icon: eilFolderAdd,
       title: intl.formatMessage({
         id: 'fileTree.toolbar.newDirectory'
       }),
       placement: "bottom-start",
-      onClick: function onClick() {
-        var activeFileNode = fileTree.findTreeNode(activePath);
+      onClick: () => {
+        const activeFileNode = fileTree.findTreeNode(activePath);
         dispatch({
           type: 'NEW_INPUT_OPEN',
           newInput: {
@@ -65,14 +68,14 @@ var FileTreeToolbar = function FileTreeToolbar(_ref) {
   /**
    * File upload button.
    */
-  var renderFileUploadButton = function renderFileUploadButton() {
+  const renderFileUploadButton = () => {
     return React.createElement(React.Fragment, null, React.createElement(ExerciseMenuButton, {
       icon: eilUpload,
       title: intl.formatMessage({
         id: 'fileTree.toolbar.upload'
       }),
       placement: "bottom-start",
-      onClick: function onClick() {
+      onClick: () => {
         var _a;
         (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
       }
@@ -83,13 +86,13 @@ var FileTreeToolbar = function FileTreeToolbar(_ref) {
       style: {
         display: 'none'
       },
-      onChange: function onChange(e) {
+      onChange: e => {
         var _a;
-        var files = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.files;
+        const 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: ''
             });
           }

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

@@ -1,7 +1,7 @@
 import { base } from '@elice/design-tokens';
 import styled from 'styled-components';
 
-var StyledFileTreeToolbar = styled.div.withConfig({
+const 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);