@elice/material-exercise 1.240718.0-trasncript.2 → 1.240718.1

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

@@ -2,7 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var blocks = require('@elice/blocks');
 var designTokens = require('@elice/design-tokens');
@@ -10,58 +9,53 @@ var classnames = require('classnames');
 var styled = require('styled-components');
 var FileTreeContext = require('./context/FileTreeContext.js');
 
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-var classnames__default = /*#__PURE__*/_interopDefaultCompat(classnames);
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
-
-var StyledFileTreeConfig = styled__default.default.div.withConfig({
+const StyledFileTreeConfig = styled.div.withConfig({
   componentId: "sc-1dxe3z0-0"
 })(["background-color:", ";padding:1rem;"], designTokens.base.color.navy8);
-var FileTreeConfig = React.forwardRef(function (_ref, ref) {
-  var className = _ref.className,
-    style = _ref.style,
-    onInitialOpenFileListChange = _ref.onInitialOpenFileListChange,
-    initialOpenFilelist = _ref.initialOpenFilelist;
-  var _useFileTreeState = FileTreeContext.useFileTreeState(),
-    mode = _useFileTreeState.mode,
-    initialOpenFileListTemp = _useFileTreeState.initialOpenFileListTemp;
-  var _useFileTreeDispatch = FileTreeContext.useFileTreeDispatch(),
-    dispatch = _useFileTreeDispatch.dispatch;
-  React__default.default.useEffect(function () {
+const FileTreeConfig = React.forwardRef(({
+  className,
+  style,
+  onInitialOpenFileListChange,
+  initialOpenFilelist
+}, ref) => {
+  const {
+    mode,
+    initialOpenFileListTemp
+  } = FileTreeContext.useFileTreeState();
+  const {
+    dispatch
+  } = FileTreeContext.useFileTreeDispatch();
+  React.useEffect(() => {
     dispatch({
       type: 'INITIAL_OPEN_FILELIST_UPDATE',
-      initialOpenFilelist: initialOpenFilelist
+      initialOpenFilelist
     });
   }, [dispatch, initialOpenFilelist]);
-  return jsxRuntime.jsx(StyledFileTreeConfig, {
-    className: classnames__default.default('em-file-tree__config', className),
+  return React.createElement(StyledFileTreeConfig, {
+    className: classnames('em-file-tree__config', className),
     ref: ref,
-    style: Object.assign({}, style),
-    children: jsxRuntime.jsx(blocks.Button, {
-      block: true,
-      size: "small",
-      role: "white",
-      transparent: true,
-      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'
-        });
-      },
-      children: mode === 'default' ? "Initial Open Files(".concat(initialOpenFileListTemp.length, ")") : "Settings (".concat(initialOpenFileListTemp.length, ")")
-    })
-  });
+    style: Object.assign({}, style)
+  }, React.createElement(blocks.Button, {
+    block: true,
+    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'
+      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})`));
 });
 
 exports.default = FileTreeConfig;

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

@@ -2,7 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var designTokens = require('@elice/design-tokens');
 var classnames = require('classnames');
@@ -13,55 +12,54 @@ var FileTreeListItems = require('./FileTreeListItems.js');
 var fileTreeFiles = require('./utils/fileTreeFiles.js');
 var fileTreePath = require('./utils/fileTreePath.js');
 
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var classnames__default = /*#__PURE__*/_interopDefaultCompat(classnames);
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
-
-var StyledFileTreeList = styled__default.default.div.withConfig({
+const StyledFileTreeList = styled.div.withConfig({
   componentId: "sc-5ddw80-0"
 })(["flex:auto;background-color:", ";overflow-x:hidden;overflow-y:overlay;", ""], designTokens.base.color.navy9, stylesheets.getMaterialScrollBarCss({
   width: '0.375rem',
   borderRadius: '2px',
   hideable: true
 }));
-var FileTreeList = React.forwardRef(function (_ref, ref) {
-  var className = _ref.className,
-    style = _ref.style,
-    options = _ref.options;
-  var _useFileTreeState = FileTreeContext.useFileTreeState(),
-    fileTree = _useFileTreeState.fileTree,
-    dropzonePath = _useFileTreeState.dropzonePath,
-    draggedPath = _useFileTreeState.draggedPath,
-    maxFileUploadSize = _useFileTreeState.maxFileUploadSize;
-  var _useFileTreeDispatch = FileTreeContext.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;
+const FileTreeList = React.forwardRef(({
+  className,
+  style,
+  options
+}, ref) => {
+  const {
+    fileTree,
+    dropzonePath,
+    draggedPath,
+    maxFileUploadSize
+  } = FileTreeContext.useFileTreeState();
+  const {
+    dispatch,
+    onDirectoryMove,
+    onFileMove,
+    onFilesUpload
+  } = FileTreeContext.useFileTreeDispatch();
+  const handleFilesUpload = ({
+    files,
+    path
+  }) => {
     if (fileTreeFiles.validateFilesSize(files, maxFileUploadSize)) {
       if (typeof onFilesUpload === 'function') {
         onFilesUpload({
-          files: files,
-          path: path
+          files,
+          path
         });
       }
     }
   };
-  return jsxRuntime.jsx(StyledFileTreeList, {
-    className: classnames__default.default('em-file-tree__list', className),
+  return React.createElement(StyledFileTreeList, {
+    className: classnames('em-file-tree__list', className),
     ref: ref,
     role: "tree",
     style: Object.assign({
       backgroundColor: dropzonePath === '' ? designTokens.base.color.primary7 : ''
     }, style),
-    onDragEnter: function onDragEnter(e) {
+    onDragEnter: e => {
       e.preventDefault();
       e.stopPropagation();
-      var isFiles = e.dataTransfer.types[0] === 'Files';
+      const isFiles = e.dataTransfer.types[0] === 'Files';
       if (draggedPath !== null || isFiles) {
         dispatch({
           type: 'UPDATE_DROPZONE_PATH',
@@ -69,14 +67,14 @@ var FileTreeList = React.forwardRef(function (_ref, ref) {
         });
       }
     },
-    onDragOver: function onDragOver(e) {
+    onDragOver: e => {
       e.preventDefault();
       e.stopPropagation();
     },
-    onDrop: function onDrop(e) {
+    onDrop: e => {
       e.stopPropagation();
       e.preventDefault();
-      var draggedPath = e.dataTransfer.getData('text');
+      const draggedPath = e.dataTransfer.getData('text');
       // file drop
       if (e.dataTransfer.files.length > 0) {
         handleFilesUpload({
@@ -93,12 +91,12 @@ var FileTreeList = React.forwardRef(function (_ref, ref) {
         });
       } else {
         // file move
-        var dragFileTreeNode = fileTree.findTreeNode(draggedPath);
+        const dragFileTreeNode = fileTree.findTreeNode(draggedPath);
         // file does not move. from a to a (the same path).
         if (fileTreePath.isMovingTheSamePath({
-          draggedPath: draggedPath,
-          dropzonePath: dropzonePath,
-          dragFileTreeNode: dragFileTreeNode
+          draggedPath,
+          dropzonePath,
+          dragFileTreeNode
         })) {
           return;
         }
@@ -118,12 +116,11 @@ var FileTreeList = React.forwardRef(function (_ref, ref) {
           }
         }
       }
-    },
-    children: jsxRuntime.jsx(FileTreeListItems.default, {
-      node: fileTree,
-      indent: options === null || options === void 0 ? void 0 : options.indent
-    })
-  });
+    }
+  }, React.createElement(FileTreeListItems.default, {
+    node: fileTree,
+    indent: options === null || options === void 0 ? void 0 : options.indent
+  }));
 });
 
 exports.default = FileTreeList;

package/cjs/components/shared/file-tree/FileTreeListItemContent.js

@@ -2,8 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
-var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var blocks = require('@elice/blocks');
 var designTokens = require('@elice/design-tokens');
@@ -14,52 +12,45 @@ var FileTreeListItemContentInput = require('./FileTreeListItemContentInput.js');
 var FileTreeListItemContentMenu = require('./FileTreeListItemContentMenu.js');
 var FileTreeListItemContent_styled = require('./FileTreeListItemContent.styled.js');
 
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-
-var ITEM_IDENT_WIDTH = 8; // 0.5rem
-var FileTreeListItemContent = function FileTreeListItemContent(_ref) {
-  var node = _ref.node,
-    parentNode = _ref.parentNode,
-    _ref$indent = _ref.indent,
-    indent = _ref$indent === void 0 ? 1 : _ref$indent;
-  var _useFileTreeState = FileTreeContext.useFileTreeState(),
-    mode = _useFileTreeState.mode,
-    activePath = _useFileTreeState.activePath,
-    dropzonePath = _useFileTreeState.dropzonePath,
-    newInput = _useFileTreeState.newInput;
-  var _useFileTreeDispatch = FileTreeContext.useFileTreeDispatch(),
-    dispatch = _useFileTreeDispatch.dispatch,
-    onActivePathChange = _useFileTreeDispatch.onActivePathChange;
-  var _React$useState = React__default.default.useState(),
-    _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
-    menuAnchorEl = _React$useState2[0],
-    setMenuAnchorEl = _React$useState2[1];
-  var isNewItem = newInput && node.isEdit;
+const ITEM_IDENT_WIDTH = 8; // 0.5rem
+const FileTreeListItemContent = ({
+  node,
+  parentNode,
+  indent = 1
+}) => {
+  const {
+    mode,
+    activePath,
+    dropzonePath,
+    newInput
+  } = FileTreeContext.useFileTreeState();
+  const {
+    dispatch,
+    onActivePathChange
+  } = FileTreeContext.useFileTreeDispatch();
+  const [menuAnchorEl, setMenuAnchorEl] = React.useState();
+  const isNewItem = newInput && node.isEdit;
   /**
    * Indent.
    */
-  var contentIndents = React__default.default.useMemo(function () {
-    var depth = (node.path.match(/\//g) || []).length;
-    var counts = depth === 0 ? 0 : indent * depth;
-    return jsxRuntime.jsx(FileTreeListItemContent_styled.StyledContentIndents, {
+  const contentIndents = React.useMemo(() => {
+    const depth = (node.path.match(/\//g) || []).length;
+    const counts = depth === 0 ? 0 : indent * depth;
+    return React.createElement(FileTreeListItemContent_styled.StyledContentIndents, {
       style: {
-        flex: "0 0 ".concat(ITEM_IDENT_WIDTH * counts, "px")
-      },
-      children: Array(counts).fill(0).map(function (_, index) {
-        return jsxRuntime.jsx(FileTreeListItemContent_styled.StyledContentIndentGuide, {
-          style: {
-            width: "".concat(ITEM_IDENT_WIDTH, "px")
-          }
-        }, index);
-      })
-    });
+        flex: `0 0 ${ITEM_IDENT_WIDTH * counts}px`
+      }
+    }, Array(counts).fill(0).map((_, index) => React.createElement(FileTreeListItemContent_styled.StyledContentIndentGuide, {
+      key: index,
+      style: {
+        width: `${ITEM_IDENT_WIDTH}px`
+      }
+    })));
   }, [node, indent]);
   /**
    * Handle item click.
    */
-  var handleClick = function handleClick() {
+  const handleClick = () => {
     if (node.isEdit) {
       return;
     }
@@ -74,7 +65,7 @@ var FileTreeListItemContent = function FileTreeListItemContent(_ref) {
   /**
    * Handle item right-click.
    */
-  var handleContextMenu = function handleContextMenu(e) {
+  const handleContextMenu = e => {
     e.preventDefault();
     setMenuAnchorEl({
       x: e.clientX,
@@ -84,110 +75,97 @@ var FileTreeListItemContent = function FileTreeListItemContent(_ref) {
   /**
    * Directory expand arrow.
    */
-  var renderContentDirectoryExpandArrow = function renderContentDirectoryExpandArrow() {
+  const renderContentDirectoryExpandArrow = () => {
     // new or directory
     if (isNewItem || !node.isDirectory) {
-      return jsxRuntime.jsx(FileTreeListItemContent_styled.StyledContentLabelDirArrowWrap, {});
+      return React.createElement(FileTreeListItemContent_styled.StyledContentLabelDirArrowWrap, null);
     }
-    return jsxRuntime.jsx(FileTreeListItemContent_styled.StyledContentLabelDirArrowWrap, {
-      children: jsxRuntime.jsx(blocks.Icon, {
-        icon: icons.eilArrowDownwardsSingle,
-        size: "tiny",
-        rotate: node.expanded ? 0 : 270,
-        color: designTokens.base.color.gray3
-      })
-    });
+    return React.createElement(FileTreeListItemContent_styled.StyledContentLabelDirArrowWrap, null, React.createElement(blocks.Icon, {
+      icon: icons.eilArrowDownwardsSingle,
+      size: "tiny",
+      rotate: node.expanded ? 0 : 270,
+      color: designTokens.base.color.gray3
+    }));
   };
   /**
    * Icon.
    */
-  var renderContentIcon = function renderContentIcon() {
+  const renderContentIcon = () => {
     // new
     if (isNewItem) {
-      return jsxRuntime.jsx(FileTreeListItemContent_styled.StyledContentLabelIconWrap, {
-        children: jsxRuntime.jsx(FileIcon.default, {
-          filename: "newfile",
-          directory: (newInput === null || newInput === void 0 ? void 0 : newInput.type) === 'directory',
-          width: "1rem",
-          height: "1rem"
-        })
-      });
+      return React.createElement(FileTreeListItemContent_styled.StyledContentLabelIconWrap, null, React.createElement(FileIcon.default, {
+        filename: "newfile",
+        directory: (newInput === null || newInput === void 0 ? void 0 : newInput.type) === 'directory',
+        width: "1rem",
+        height: "1rem"
+      }));
     }
     // checkbox for file
     if (mode === 'checkbox' && !node.isDirectory) {
-      return jsxRuntime.jsx(FileTreeListItemContent_styled.StyledContentLabelIconWrap, {
-        children: jsxRuntime.jsx(blocks.Checkbox, {
-          value: node.isInitialOpen,
-          dark: true,
-          onChange: function onChange(checked) {
-            dispatch({
-              type: checked ? 'INITIAL_OPEN_FILELIST_ADD' : 'INITIAL_OPEN_FILELIST_REMOVE',
-              path: node.path
-            });
-          }
-        })
-      });
+      return React.createElement(FileTreeListItemContent_styled.StyledContentLabelIconWrap, null, React.createElement(blocks.Checkbox, {
+        value: node.isInitialOpen,
+        dark: true,
+        onChange: checked => {
+          dispatch({
+            type: checked ? 'INITIAL_OPEN_FILELIST_ADD' : 'INITIAL_OPEN_FILELIST_REMOVE',
+            path: node.path
+          });
+        }
+      }));
     }
-    return jsxRuntime.jsx(FileTreeListItemContent_styled.StyledContentLabelIconWrap, {
-      children: jsxRuntime.jsx(FileIcon.default, {
-        filename: node.title,
-        directory: node.isDirectory,
-        expanded: node.expanded,
-        width: "1rem",
-        height: "1rem"
-      })
-    });
+    return React.createElement(FileTreeListItemContent_styled.StyledContentLabelIconWrap, null, React.createElement(FileIcon.default, {
+      filename: node.title,
+      directory: node.isDirectory,
+      expanded: node.expanded,
+      width: "1rem",
+      height: "1rem"
+    }));
   };
   /**
    * Filename.
    */
-  var renderContentFilename = function renderContentFilename() {
+  const renderContentFilename = () => {
     var _a;
     // new
     if (isNewItem) {
-      return jsxRuntime.jsx(FileTreeListItemContentInput.default, {
+      return React.createElement(FileTreeListItemContentInput.default, {
         type: "new",
         newInputType: (_a = newInput === null || newInput === void 0 ? void 0 : newInput.type) !== null && _a !== void 0 ? _a : 'file',
         currentPath: node.path,
-        currentDirTitleList: parentNode.children.map(function (_ref2) {
-          var title = _ref2.title;
-          return title;
-        })
+        currentDirTitleList: parentNode.children.map(({
+          title
+        }) => title)
       });
     }
     // rename
     if (node.isRenaming) {
-      return jsxRuntime.jsx(FileTreeListItemContentInput.default, {
+      return React.createElement(FileTreeListItemContentInput.default, {
         type: "edit",
         initialValue: node.title,
         newInputType: node.isDirectory ? 'directory' : 'file',
         currentPath: node.path,
-        currentDirTitleList: parentNode.children.map(function (_ref3) {
-          var title = _ref3.title;
-          return title;
-        }).filter(function (title) {
-          return title !== node.title;
-        })
+        currentDirTitleList: parentNode.children.map(({
+          title
+        }) => title).filter(title => title !== node.title)
       });
     }
-    return jsxRuntime.jsx(FileTreeListItemContent_styled.StyledContentLabelFilename, {
+    return React.createElement(FileTreeListItemContent_styled.StyledContentLabelFilename, {
       size: "tiny",
       block: true,
-      ellipsis: true,
-      children: node.title
-    });
+      ellipsis: true
+    }, node.title);
   };
   /**
    * Status icon.
    */
-  var renderContentStatusIcon = function renderContentStatusIcon() {
+  const renderContentStatusIcon = () => {
     // new or rename
     if (isNewItem || node.isRenaming) {
       return null;
     }
     // hidden
     if (node.isHidden) {
-      return jsxRuntime.jsx(FileTreeListItemContent_styled.StyledContentLabelStatusIcon, {
+      return React.createElement(FileTreeListItemContent_styled.StyledContentLabelStatusIcon, {
         icon: icons.eilVisibilityOff,
         color: designTokens.base.color.gray4,
         size: "small"
@@ -195,7 +173,7 @@ var FileTreeListItemContent = function FileTreeListItemContent(_ref) {
     }
     // readonly
     if (node.isReadonly) {
-      return jsxRuntime.jsx(FileTreeListItemContent_styled.StyledContentLabelStatusIcon, {
+      return React.createElement(FileTreeListItemContent_styled.StyledContentLabelStatusIcon, {
         icon: icons.eilLockOn,
         color: designTokens.base.color.gray4,
         size: "small"
@@ -206,44 +184,37 @@ var FileTreeListItemContent = function FileTreeListItemContent(_ref) {
   /**
    * Menu button.
    */
-  var renderContentMenuButton = function renderContentMenuButton() {
+  const renderContentMenuButton = () => {
     // new or rename
     if (isNewItem || node.isRenaming) {
       return null;
     }
-    return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [jsxRuntime.jsx(FileTreeListItemContent_styled.StyledContentLabelMenuButton, {
-        icon: icons.eilMoreVertical,
-        size: "tiny",
-        role: "white",
-        transparent: true,
-        border: false,
-        onClick: function onClick(e) {
-          e.stopPropagation();
-          setMenuAnchorEl(e.currentTarget);
-        }
-      }), jsxRuntime.jsx(FileTreeListItemContentMenu.default, {
-        node: node,
-        anchorEl: menuAnchorEl,
-        onClose: function onClose() {
-          return setMenuAnchorEl(undefined);
-        }
-      })]
-    });
+    return React.createElement(React.Fragment, null, React.createElement(FileTreeListItemContent_styled.StyledContentLabelMenuButton, {
+      icon: icons.eilMoreVertical,
+      size: "tiny",
+      role: "white",
+      transparent: true,
+      border: false,
+      onClick: e => {
+        e.stopPropagation();
+        setMenuAnchorEl(e.currentTarget);
+      }
+    }), React.createElement(FileTreeListItemContentMenu.default, {
+      node: node,
+      anchorEl: menuAnchorEl,
+      onClose: () => setMenuAnchorEl(undefined)
+    }));
   };
   //
   //
   //
-  return jsxRuntime.jsxs(FileTreeListItemContent_styled.StyledContent, {
-    title: "~/".concat(node.path),
+  return React.createElement(FileTreeListItemContent_styled.StyledContent, {
+    title: `~/${node.path}`,
     active: activePath === node.path,
     isDragging: dropzonePath !== null,
     onClick: handleClick,
-    onContextMenu: handleContextMenu,
-    children: [contentIndents, jsxRuntime.jsxs(FileTreeListItemContent_styled.StyledContentLabel, {
-      children: [renderContentDirectoryExpandArrow(), renderContentIcon(), renderContentFilename(), renderContentStatusIcon(), renderContentMenuButton()]
-    })]
-  });
+    onContextMenu: handleContextMenu
+  }, contentIndents, React.createElement(FileTreeListItemContent_styled.StyledContentLabel, null, renderContentDirectoryExpandArrow(), renderContentIcon(), renderContentFilename(), renderContentStatusIcon(), renderContentMenuButton()));
 };
 
 exports.default = FileTreeListItemContent;