@elice/material-exercise 1.230328.0 → 1.230418.0

package/es/components/shared/file-tabs/FileTab.styled.js

@@ -2,37 +2,41 @@ import { Text, IconButton } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
 import styled, { css } from 'styled-components';
 
-const TAB_MIN_WIDTH = '7rem';
-const TAB_VERTICAL_BORDER_WIDTH = '1.5px';
-const TAB_BACKGROUND_COLOR = base.color.navy8;
-const TAB_ACTIVE_BACKGROUND_COLOR = base.color.navy9;
-const TAB_HOVERED_BACKGROUND_COLOR = base.color.navy7; // ========== Tab label ==========
-
-const StyledTabLabel = styled.div.withConfig({
+var TAB_MIN_WIDTH = '7rem';
+var TAB_VERTICAL_BORDER_WIDTH = '1.5px';
+var TAB_BACKGROUND_COLOR = base.color.navy8;
+var TAB_ACTIVE_BACKGROUND_COLOR = base.color.navy9;
+var TAB_HOVERED_BACKGROUND_COLOR = base.color.navy7;
+// ========== Tab label ==========
+var StyledTabLabel = styled.div.withConfig({
   componentId: "sc-1pe3776-0"
 })(["flex:1;display:flex;align-items:center;overflow:hidden;pointer-events:none;user-select:none;& > *{margin-right:0.5rem;}"]);
-const StyledTabLabelFilename = styled(Text).withConfig({
+var StyledTabLabelFilename = styled(Text).withConfig({
   componentId: "sc-1pe3776-1"
 })(["color:", ";font-weight:500;"], base.color.gray4);
-const StyledTabLabelDirname = styled(Text).withConfig({
+var StyledTabLabelDirname = styled(Text).withConfig({
   componentId: "sc-1pe3776-2"
 })(["font-weight:500;"]);
-const StyledTabCloseButton = styled(IconButton).withConfig({
+var StyledTabCloseButton = styled(IconButton).withConfig({
   componentId: "sc-1pe3776-3"
-})(["flex:0 0 auto;margin-right:0.25rem !important;opacity:0;transition:opacity 150ms ease-in-out;"]); // ========== Tab content ==========
-
-const StyledTabContent = styled.div.withConfig({
+})(["flex:0 0 auto;margin-right:0.25rem !important;opacity:0;transition:opacity 150ms ease-in-out;"]);
+// ========== Tab content ==========
+var StyledTabContent = styled.div.withConfig({
   componentId: "sc-1pe3776-4"
-})(["display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding-left:0.5rem;height:calc(100% - ", ");&:hover{", "{color:", ";}", "{opacity:1;}}"], TAB_VERTICAL_BORDER_WIDTH, StyledTabLabelFilename, base.color.gray3, StyledTabCloseButton); // ========== Tab active border ==========
-
-const StyledTabActiveBorder = styled.div.withConfig({
+})(["display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding-left:0.5rem;height:calc(100% - ", ");&:hover{", "{color:", ";}", "{opacity:1;}}"], TAB_VERTICAL_BORDER_WIDTH, StyledTabLabelFilename, base.color.gray3, StyledTabCloseButton);
+// ========== Tab active border ==========
+var StyledTabActiveBorder = styled.div.withConfig({
   componentId: "sc-1pe3776-5"
-})(["height:", ";background-color:", ";opacity:0;"], TAB_VERTICAL_BORDER_WIDTH, base.color.primary5); // ========== Tab ==========
-
-const cssTabActive = css(["background-color:", ";", "{color:", ";}", "{opacity:1;}", "{opacity:1;}"], TAB_ACTIVE_BACKGROUND_COLOR, StyledTabLabelFilename, base.color.gray3, StyledTabCloseButton, StyledTabActiveBorder);
-const cssTabHovered = css(["background-color:", ";", "{color:", ";}"], TAB_HOVERED_BACKGROUND_COLOR, StyledTabLabelFilename, base.color.gray3);
-const StyledTab = styled.div.withConfig({
+})(["height:", ";background-color:", ";opacity:0;"], TAB_VERTICAL_BORDER_WIDTH, base.color.primary5);
+// ========== Tab ==========
+var cssTabActive = css(["background-color:", ";", "{color:", ";}", "{opacity:1;}", "{opacity:1;}"], TAB_ACTIVE_BACKGROUND_COLOR, StyledTabLabelFilename, base.color.gray3, StyledTabCloseButton, StyledTabActiveBorder);
+var cssTabHovered = css(["background-color:", ";", "{color:", ";}"], TAB_HOVERED_BACKGROUND_COLOR, StyledTabLabelFilename, base.color.gray3);
+var StyledTab = styled.div.withConfig({
   componentId: "sc-1pe3776-6"
-})(["padding-top:", ";width:", ";min-width:fit-content;height:100%;background-color:", ";border-right:1px solid ", ";cursor:pointer;", " ", ""], TAB_VERTICAL_BORDER_WIDTH, TAB_MIN_WIDTH, TAB_BACKGROUND_COLOR, base.color.navy7, props => props.active && cssTabActive, props => props.hovered && cssTabHovered);
+})(["padding-top:", ";width:", ";min-width:fit-content;height:100%;background-color:", ";border-right:1px solid ", ";cursor:pointer;", " ", ""], TAB_VERTICAL_BORDER_WIDTH, TAB_MIN_WIDTH, TAB_BACKGROUND_COLOR, base.color.navy7, function (props) {
+  return props.active && cssTabActive;
+}, function (props) {
+  return props.hovered && cssTabHovered;
+});
 
 export { StyledTab, StyledTabActiveBorder, StyledTabCloseButton, StyledTabContent, StyledTabLabel, StyledTabLabelDirname, StyledTabLabelFilename };

package/es/components/shared/file-tabs/FileTabs.js

@@ -1,103 +1,107 @@
+import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import React from 'react';
 import throttle from 'lodash/throttle';
 import FileTab from './FileTab.js';
 import { getTabProps } from './util.js';
 import { StyledTabs, StyledTabsDropZone } from './FileTabs.styled.js';
 
-const FileTabs = ({
-  openedTabs,
-  activeTab,
-  onSelectTab,
-  onCloseTab,
-  onTabOrderChange
-}) => {
-  const [curDraggingTabIndex, setCurDraggingTabIndex] = React.useState(null);
-  const [curHoveredTabIndex, setCurHoveredTabIndex] = React.useState(null);
+var FileTabs = function FileTabs(_ref) {
+  var openedTabs = _ref.openedTabs,
+    activeTab = _ref.activeTab,
+    onSelectTab = _ref.onSelectTab,
+    onCloseTab = _ref.onCloseTab,
+    onTabOrderChange = _ref.onTabOrderChange;
+  var _React$useState = React.useState(null),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    curDraggingTabIndex = _React$useState2[0],
+    setCurDraggingTabIndex = _React$useState2[1];
+  var _React$useState3 = React.useState(null),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    curHoveredTabIndex = _React$useState4[0],
+    setCurHoveredTabIndex = _React$useState4[1];
   /**
    * Tab props.
    */
-
-  const tabs = React.useMemo(() => getTabProps(openedTabs), [openedTabs]);
+  var tabs = React.useMemo(function () {
+    return getTabProps(openedTabs);
+  }, [openedTabs]);
   /**
    * Reset state.
    */
-
-  const reset = () => {
+  var reset = function reset() {
     setCurDraggingTabIndex(null);
     setCurHoveredTabIndex(null);
   };
   /**
    * Throttled `setCurHoveredTabIndex`.
    */
-
-
-  const setThrottledCurHoveredTabIndex = React.useCallback(throttle(setCurHoveredTabIndex, 100, {
+  var setThrottledCurHoveredTabIndex = React.useCallback(throttle(setCurHoveredTabIndex, 100, {
     leading: true,
     trailing: false
   }), []);
   /**
    * Handle tab drag start.
    */
-
-  const getTabDragStartHandler = React.useCallback(index => _ => {
-    setCurDraggingTabIndex(index);
+  var getTabDragStartHandler = React.useCallback(function (index) {
+    return function (_) {
+      setCurDraggingTabIndex(index);
+    };
   }, []);
   /**
    * Handle tab drag over.
    */
-
-  const getTabDragOverHandler = React.useCallback(index => e => {
-    e.preventDefault();
-    e.stopPropagation();
-    setThrottledCurHoveredTabIndex(index);
+  var getTabDragOverHandler = React.useCallback(function (index) {
+    return function (e) {
+      e.preventDefault();
+      e.stopPropagation();
+      setThrottledCurHoveredTabIndex(index);
+    };
   }, [setThrottledCurHoveredTabIndex]);
   /**
    * Handle tab drop.
    */
-
-  const handleTabDrop = e => {
+  var handleTabDrop = function handleTabDrop(e) {
     e.preventDefault();
     e.stopPropagation();
-
     if (curDraggingTabIndex !== null && curHoveredTabIndex !== null && typeof onTabOrderChange === 'function') {
       onTabOrderChange(curDraggingTabIndex, curHoveredTabIndex);
     }
-
     reset();
   };
   /**
    * Tabs.
    */
-
-
-  const renderTabs = () => {
-    return tabs.map((tab, index) => React.createElement(FileTab, Object.assign({}, tab, {
-      key: tab.fullname,
-      active: activeTab === tab.fullname,
-      hovered: curHoveredTabIndex === index,
-      onClick: () => onSelectTab(tab.fullname),
-      onClose: () => onCloseTab(tab.fullname),
-      onDragStart: getTabDragStartHandler(index),
-      onDragOver: getTabDragOverHandler(index),
-      onDragEnd: reset,
-      onDrop: handleTabDrop
-    })));
+  var renderTabs = function renderTabs() {
+    return tabs.map(function (tab, index) {
+      return React.createElement(FileTab, Object.assign({}, tab, {
+        key: tab.fullname,
+        active: activeTab === tab.fullname,
+        hovered: curHoveredTabIndex === index,
+        onClick: function onClick() {
+          return onSelectTab(tab.fullname);
+        },
+        onClose: function onClose() {
+          return onCloseTab(tab.fullname);
+        },
+        onDragStart: getTabDragStartHandler(index),
+        onDragOver: getTabDragOverHandler(index),
+        onDragEnd: reset,
+        onDrop: handleTabDrop
+      }));
+    });
   };
   /**
    * Tab drop zone.
    */
-
-
-  const renderTabsDropZone = () => {
+  var renderTabsDropZone = function renderTabsDropZone() {
     return React.createElement(StyledTabsDropZone, {
       onDragOver: getTabDragOverHandler(tabs.length - 1),
       onDrop: handleTabDrop
     });
-  }; //
+  };
+  //
   //
   //
-
-
   return React.createElement(StyledTabs, {
     role: "tablist"
   }, renderTabs(), renderTabsDropZone());

package/es/components/shared/file-tabs/FileTabs.styled.js

@@ -2,14 +2,14 @@ import { base } from '@elice/design-tokens';
 import styled from 'styled-components';
 import { getMaterialScrollBarCss } from '../../../constants/stylesheets.js';
 
-const StyledTabs = styled.div.withConfig({
+var StyledTabs = styled.div.withConfig({
   componentId: "sc-ifwvzh-0"
 })(["display:flex;align-items:flex-end;box-sizing:border-box;flex-direction:row;height:2.25rem;font-family:inherit;background:", ";overflow-x:overlay;overflow-y:hidden;scrollbar-width:none;", ""], base.color.navy8, getMaterialScrollBarCss({
   height: '2px',
   borderRadius: '2px',
   hideable: true
 }));
-const StyledTabsDropZone = styled.div.withConfig({
+var StyledTabsDropZone = styled.div.withConfig({
   componentId: "sc-ifwvzh-1"
 })(["flex:1;height:100%;background-color:transparent;"]);
 

package/es/components/shared/file-tabs/util.js

@@ -1,26 +1,37 @@
+import { createForOfIteratorHelper as _createForOfIteratorHelper } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+
 /**
  * Get file tab props.
  */
 function getTabProps(paths) {
-  const tabs = []; // parse file paths
-
-  for (const path of paths) {
-    const chunks = path.split('/');
-    const filename = chunks.pop();
-
-    if (filename) {
-      tabs.push({
-        fullname: path,
-        chunks,
-        filename,
-        isFilenameDuplicated: false
-      });
+  var tabs = [];
+  // parse file paths
+  var _iterator = _createForOfIteratorHelper(paths),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var path = _step.value;
+      var chunks = path.split('/');
+      var filename = chunks.pop();
+      if (filename) {
+        tabs.push({
+          fullname: path,
+          chunks: chunks,
+          filename: filename,
+          isFilenameDuplicated: false
+        });
+      }
     }
-  } // check filename duplication
-
-
-  tabs.forEach(thisTab => {
-    thisTab.isFilenameDuplicated = tabs.filter(thatTab => thisTab.filename === thatTab.filename).length > 1;
+    // check filename duplication
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  tabs.forEach(function (thisTab) {
+    thisTab.isFilenameDuplicated = tabs.filter(function (thatTab) {
+      return thisTab.filename === thatTab.filename;
+    }).length > 1;
   });
   return tabs;
 }

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

@@ -10,14 +10,13 @@ import FileTreeConfig from './FileTreeConfig.js';
 import FileTreeList from './FileTreeList.js';
 import FileTreeToolbar from './FileTreeToolbar.js';
 
-const StyledFileTreeWrapper = styled.div.withConfig({
+var StyledFileTreeWrapper = styled.div.withConfig({
   componentId: "sc-6ext2i-0"
 })(["display:flex;flex-direction:column;user-select:none;overflow:hidden;"]);
-const StyledLoading = styled.div.withConfig({
+var StyledLoading = styled.div.withConfig({
   componentId: "sc-6ext2i-1"
 })(["position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:", ";opacity:0.5;width:100%;height:100%;display:flex;align-items:center;justify-content:center;z-index:100;"], base.color.navy7);
-
-const FileTree = props => {
+var FileTree = function FileTree(props) {
   return React.createElement(MaterialIntlProvider, {
     locale: props.locale,
     phrases: {
@@ -28,7 +27,6 @@ const FileTree = props => {
     style: props.style
   }, props.loading ? React.createElement(StyledLoading, null, React.createElement(Spinner, null)) : null, props.children)));
 };
-
 var FileTree$1 = Object.assign(FileTree, {
   Toolbar: FileTreeToolbar,
   List: FileTreeList,

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

@@ -5,26 +5,23 @@ import classnames from 'classnames';
 import styled from 'styled-components';
 import { useFileTreeState, useFileTreeDispatch } from './context/FileTreeContext.js';
 
-const StyledFileTreeConfig = styled.div.withConfig({
+var StyledFileTreeConfig = styled.div.withConfig({
   componentId: "sc-1dxe3z0-0"
 })(["background-color:", ";padding:1rem;"], base.color.navy8);
-const FileTreeConfig = forwardRef(({
-  className,
-  style,
-  onInitialOpenFileListChange,
-  initialOpenFilelist
-}, ref) => {
-  const {
-    mode,
-    initialOpenFileListTemp
-  } = useFileTreeState();
-  const {
-    dispatch
-  } = useFileTreeDispatch();
-  React.useEffect(() => {
+var FileTreeConfig = forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    style = _ref.style,
+    onInitialOpenFileListChange = _ref.onInitialOpenFileListChange,
+    initialOpenFilelist = _ref.initialOpenFilelist;
+  var _useFileTreeState = useFileTreeState(),
+    mode = _useFileTreeState.mode,
+    initialOpenFileListTemp = _useFileTreeState.initialOpenFileListTemp;
+  var _useFileTreeDispatch = useFileTreeDispatch(),
+    dispatch = _useFileTreeDispatch.dispatch;
+  React.useEffect(function () {
     dispatch({
       type: 'INITIAL_OPEN_FILELIST_UPDATE',
-      initialOpenFilelist
+      initialOpenFilelist: initialOpenFilelist
     });
   }, [dispatch, initialOpenFilelist]);
   return React.createElement(StyledFileTreeConfig, {
@@ -36,20 +33,22 @@ const FileTreeConfig = forwardRef(({
     size: "small",
     role: "white",
     transparent: true,
-    onClick: () => {
-      if ([// when mode changes from 'checkbox' to 'default'
-      mode === 'checkbox', // when some value of initial open filelist changes'
-      JSON.stringify(initialOpenFilelist.sort()) !== JSON.stringify(initialOpenFileListTemp.sort()), // when onInitialOpenFileListChange is function'
+    onClick: function onClick() {
+      if ([
+      // when mode changes from 'checkbox' to 'default'
+      mode === 'checkbox',
+      // when some value of initial open filelist changes'
+      JSON.stringify(initialOpenFilelist.sort()) !== JSON.stringify(initialOpenFileListTemp.sort()),
+      // when onInitialOpenFileListChange is function'
       typeof onInitialOpenFileListChange === 'function'].every(Boolean)) {
         onInitialOpenFileListChange(initialOpenFileListTemp);
       }
-
       dispatch({
         type: 'UPDATE_MODE',
         mode: mode === 'checkbox' ? 'default' : 'checkbox'
       });
     }
-  }, mode === 'default' ? `Initial Open Files(${initialOpenFileListTemp.length})` : `Settings (${initialOpenFileListTemp.length})`));
+  }, mode === 'default' ? "Initial Open Files(".concat(initialOpenFileListTemp.length, ")") : "Settings (".concat(initialOpenFileListTemp.length, ")")));
 });
 var FileTreeConfig$1 = FileTreeConfig;
 

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

@@ -8,45 +8,39 @@ import FileTreeListItems from './FileTreeListItems.js';
 import { validateFilesSize } from './utils/fileTreeFiles.js';
 import { isMovingTheSamePath } from './utils/fileTreePath.js';
 
-const StyledFileTreeList = styled.div.withConfig({
+var StyledFileTreeList = styled.div.withConfig({
   componentId: "sc-5ddw80-0"
 })(["flex:auto;background-color:", ";overflow-x:hidden;overflow-y:overlay;", ""], base.color.navy9, getMaterialScrollBarCss({
   width: '0.375rem',
   borderRadius: '2px',
   hideable: true
 }));
-const FileTreeList = forwardRef(({
-  className,
-  style,
-  options
-}, ref) => {
-  const {
-    fileTree,
-    dropzonePath,
-    draggedPath,
-    maxFileUploadSize
-  } = useFileTreeState();
-  const {
-    dispatch,
-    onDirectoryMove,
-    onFileMove,
-    onFilesUpload
-  } = useFileTreeDispatch();
-
-  const handleFilesUpload = ({
-    files,
-    path
-  }) => {
+var FileTreeList = forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    style = _ref.style,
+    options = _ref.options;
+  var _useFileTreeState = useFileTreeState(),
+    fileTree = _useFileTreeState.fileTree,
+    dropzonePath = _useFileTreeState.dropzonePath,
+    draggedPath = _useFileTreeState.draggedPath,
+    maxFileUploadSize = _useFileTreeState.maxFileUploadSize;
+  var _useFileTreeDispatch = useFileTreeDispatch(),
+    dispatch = _useFileTreeDispatch.dispatch,
+    onDirectoryMove = _useFileTreeDispatch.onDirectoryMove,
+    onFileMove = _useFileTreeDispatch.onFileMove,
+    onFilesUpload = _useFileTreeDispatch.onFilesUpload;
+  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
         });
       }
     }
   };
-
   return React.createElement(StyledFileTreeList, {
     className: classnames('em-file-tree__list', className),
     ref: ref,
@@ -54,11 +48,10 @@ const FileTreeList = forwardRef(({
     style: Object.assign({
       backgroundColor: dropzonePath === '' ? base.color.primary7 : ''
     }, style),
-    onDragEnter: e => {
+    onDragEnter: function onDragEnter(e) {
       e.preventDefault();
       e.stopPropagation();
-      const isFiles = e.dataTransfer.types[0] === 'Files';
-
+      var isFiles = e.dataTransfer.types[0] === 'Files';
       if (draggedPath !== null || isFiles) {
         dispatch({
           type: 'UPDATE_DROPZONE_PATH',
@@ -66,15 +59,15 @@ const FileTreeList = forwardRef(({
         });
       }
     },
-    onDragOver: e => {
+    onDragOver: function onDragOver(e) {
       e.preventDefault();
       e.stopPropagation();
     },
-    onDrop: e => {
+    onDrop: function onDrop(e) {
       e.stopPropagation();
       e.preventDefault();
-      const draggedPath = e.dataTransfer.getData('text'); // file drop
-
+      var draggedPath = e.dataTransfer.getData('text');
+      // file drop
       if (e.dataTransfer.files.length > 0) {
         handleFilesUpload({
           files: e.dataTransfer.files,
@@ -90,16 +83,15 @@ const FileTreeList = forwardRef(({
         });
       } else {
         // file move
-        const dragFileTreeNode = fileTree.findTreeNode(draggedPath); // file does not move. from a to a (the same path).
-
+        var dragFileTreeNode = fileTree.findTreeNode(draggedPath);
+        // file does not move. from a to a (the same path).
         if (isMovingTheSamePath({
-          draggedPath,
-          dropzonePath,
-          dragFileTreeNode
+          draggedPath: draggedPath,
+          dropzonePath: dropzonePath,
+          dragFileTreeNode: dragFileTreeNode
         })) {
           return;
         }
-
         if (dragFileTreeNode) {
           if (dragFileTreeNode.isDirectory) {
             onDirectoryMove && onDirectoryMove({