@elice/material-exercise 1.220803.0

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

@@ -0,0 +1,250 @@
+'use strict';
+
+var React = require('react');
+var blocks = require('@elice/blocks');
+var designTokens = require('@elice/design-tokens');
+var icons = require('@elice/icons');
+var FileIcon = require('../file-icon/FileIcon.js');
+var FileTreeContext = require('./context/FileTreeContext.js');
+var FileTreeListItemContentInput = require('./FileTreeListItemContentInput.js');
+var FileTreeListItemContentMenu = require('./FileTreeListItemContentMenu.js');
+var FileTreeListItemContent_styled = require('./FileTreeListItemContent.styled.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+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__default["default"].useState();
+  const isNewItem = newInput && node.isEdit;
+  /**
+   * Indent.
+   */
+
+  const contentIndents = React__default["default"].useMemo(() => {
+    const depth = (node.path.match(/\//g) || []).length;
+    const counts = depth === 0 ? 0 : indent * depth;
+    return React__default["default"].createElement(FileTreeListItemContent_styled.StyledContentIndents, {
+      style: {
+        flex: `0 0 ${ITEM_IDENT_WIDTH * counts}px`
+      }
+    }, Array(counts).fill(0).map((_, index) => React__default["default"].createElement(FileTreeListItemContent_styled.StyledContentIndentGuide, {
+      key: index,
+      style: {
+        width: `${ITEM_IDENT_WIDTH}px`
+      }
+    })));
+  }, [node, indent]);
+  /**
+   * Handle item click.
+   */
+
+  const handleClick = () => {
+    if (node.isEdit) {
+      return;
+    }
+
+    if (node.isDirectory) {
+      dispatch({
+        type: 'TOGGLE_OPENED_DIRECTORY_LIST',
+        path: node.path
+      });
+    }
+
+    onActivePathChange(node.path, node.isDirectory);
+  };
+  /**
+   * Handle item right-click.
+   */
+
+
+  const handleContextMenu = e => {
+    e.preventDefault();
+    setMenuAnchorEl({
+      x: e.clientX,
+      y: e.clientY
+    });
+  };
+  /**
+   * Directory expand arrow.
+   */
+
+
+  const renderContentDirectoryExpandArrow = () => {
+    // new or directory
+    if (isNewItem || !node.isDirectory) {
+      return React__default["default"].createElement(FileTreeListItemContent_styled.StyledContentLabelDirArrowWrap, null);
+    }
+
+    return React__default["default"].createElement(FileTreeListItemContent_styled.StyledContentLabelDirArrowWrap, null, React__default["default"].createElement(blocks.Icon, {
+      icon: icons.eilArrowDownwardsSingle,
+      size: "tiny",
+      rotate: node.expanded ? 0 : 270,
+      color: designTokens.base.color.gray3
+    }));
+  };
+  /**
+   * Icon.
+   */
+
+
+  const renderContentIcon = () => {
+    // new
+    if (isNewItem) {
+      return React__default["default"].createElement(FileTreeListItemContent_styled.StyledContentLabelIconWrap, null, React__default["default"].createElement(FileIcon, {
+        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 React__default["default"].createElement(FileTreeListItemContent_styled.StyledContentLabelIconWrap, null, React__default["default"].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 React__default["default"].createElement(FileTreeListItemContent_styled.StyledContentLabelIconWrap, null, React__default["default"].createElement(FileIcon, {
+      filename: node.title,
+      directory: node.isDirectory,
+      expanded: node.expanded,
+      width: "1rem",
+      height: "1rem"
+    }));
+  };
+  /**
+   * Filename.
+   */
+
+
+  const renderContentFilename = () => {
+    var _a; // new
+
+
+    if (isNewItem) {
+      return React__default["default"].createElement(FileTreeListItemContentInput, {
+        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(({
+          title
+        }) => title)
+      });
+    } // rename
+
+
+    if (node.isRenaming) {
+      return React__default["default"].createElement(FileTreeListItemContentInput, {
+        type: "edit",
+        initialValue: node.title,
+        newInputType: node.isDirectory ? 'directory' : 'file',
+        currentPath: node.path,
+        currentDirTitleList: parentNode.children.map(({
+          title
+        }) => title).filter(title => title !== node.title)
+      });
+    }
+
+    return React__default["default"].createElement(FileTreeListItemContent_styled.StyledContentLabelFilename, {
+      size: "tiny",
+      block: true,
+      ellipsis: true
+    }, node.title);
+  };
+  /**
+   * Status icon.
+   */
+
+
+  const renderContentStatusIcon = () => {
+    // new or rename
+    if (isNewItem || node.isRenaming) {
+      return null;
+    } // hidden
+
+
+    if (node.isHidden) {
+      return React__default["default"].createElement(FileTreeListItemContent_styled.StyledContentLabelStatusIcon, {
+        icon: icons.eilVisibilityOff,
+        color: designTokens.base.color.gray4,
+        size: "small"
+      });
+    } // readonly
+
+
+    if (node.isReadonly) {
+      return React__default["default"].createElement(FileTreeListItemContent_styled.StyledContentLabelStatusIcon, {
+        icon: icons.eilLockOn,
+        color: designTokens.base.color.gray4,
+        size: "small"
+      });
+    }
+
+    return null;
+  };
+  /**
+   * Menu button.
+   */
+
+
+  const renderContentMenuButton = () => {
+    // new or rename
+    if (isNewItem || node.isRenaming) {
+      return null;
+    }
+
+    return React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement(FileTreeListItemContent_styled.StyledContentLabelMenuButton, {
+      icon: icons.eilMoreVertical,
+      size: "tiny",
+      role: "white",
+      transparent: true,
+      border: false,
+      onClick: e => {
+        e.stopPropagation();
+        setMenuAnchorEl(e.currentTarget);
+      }
+    }), React__default["default"].createElement(FileTreeListItemContentMenu, {
+      node: node,
+      anchorEl: menuAnchorEl,
+      onClose: () => setMenuAnchorEl(undefined)
+    }));
+  }; //
+  //
+  //
+
+
+  return React__default["default"].createElement(FileTreeListItemContent_styled.StyledContent, {
+    title: `~/${node.path}`,
+    active: activePath === node.path,
+    isDragging: dropzonePath !== null,
+    onClick: handleClick,
+    onContextMenu: handleContextMenu
+  }, contentIndents, React__default["default"].createElement(FileTreeListItemContent_styled.StyledContentLabel, null, renderContentDirectoryExpandArrow(), renderContentIcon(), renderContentFilename(), renderContentStatusIcon(), renderContentMenuButton()));
+};
+
+module.exports = FileTreeListItemContent;

package/cjs/components/shared/file-tree/FileTreeListItemContent.styled.d.ts

@@ -0,0 +1,37 @@
+/// <reference types="react" />
+import { Text } from '@elice/blocks';
+interface StyledContentProps {
+    active?: boolean;
+    isDragging?: boolean;
+}
+/**
+ * indent
+ */
+export declare const StyledContentIndents: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledContentIndentGuide: import("styled-components").StyledComponent<"div", any, {}, never>;
+/**
+ * label
+ */
+export declare const StyledContentLabel: import("styled-components").StyledComponent<"div", any, {}, never>;
+/**
+ * label > dir arrow
+ */
+export declare const StyledContentLabelDirArrowWrap: import("styled-components").StyledComponent<"div", any, {}, never>;
+/**
+ * label > icon
+ */
+export declare const StyledContentLabelIconWrap: import("styled-components").StyledComponent<"div", any, {}, never>;
+/**
+ * label > filename
+ */
+export declare const StyledContentLabelFilename: import("styled-components").StyledComponent<typeof Text, any, {}, never>;
+/**
+ * label > status icon
+ */
+export declare const StyledContentLabelStatusIcon: import("styled-components").StyledComponent<import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<import("@elice/blocks").IconProps & import("react").RefAttributes<SVGSVGElement>>>, any, {}, never>;
+/**
+ * label > menu button
+ */
+export declare const StyledContentLabelMenuButton: import("styled-components").StyledComponent<import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<import("@elice/blocks").IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>>, any, {}, never>;
+export declare const StyledContent: import("styled-components").StyledComponent<"div", any, StyledContentProps, never>;
+export {};

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

@@ -0,0 +1,105 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var blocks = require('@elice/blocks');
+var designTokens = require('@elice/design-tokens');
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+//
+//
+
+const CONTENT_MIN_HEIGHT = 28; // 1.75rem
+
+const CONTENT_LEFT_BORDER_WIDTH = 3; // 0.1875rem
+
+const CONTENT_RIGHT_PADDING = 12; // 0.75rem
+
+const CONTENT_LABEL_VERTICAL_PADDING = 4; // 0.25rem
+
+const CONTENT_LABEL_ICON_SIZE = 16; // 1rem
+
+const CONTENT_LABEL_ICON_AFTER_MARGIN = 4; // 1rem
+
+const CONTENT_LABEL_DIR_ARROW_PADDING = 4; // 0.25rem
+
+const CONTENT_LABEL_DIR_ARROW_SIZE = 12; // 0.75rem
+
+const CONTENT_LABEL_MENU_BUTTON_SIZE = CONTENT_MIN_HEIGHT - CONTENT_LABEL_VERTICAL_PADDING * 2; //
+//
+//
+
+/**
+ * indent
+ */
+
+const StyledContentIndents = styled__default["default"].div.withConfig({
+  componentId: "sc-3wfxns-0"
+})([""]);
+const StyledContentIndentGuide = styled__default["default"].div.withConfig({
+  componentId: "sc-3wfxns-1"
+})(["display:inline-block;height:100%;border-right:0.5px solid ", ";"], designTokens.base.color.gray7);
+/**
+ * label
+ */
+
+const StyledContentLabel = styled__default["default"].div.withConfig({
+  componentId: "sc-3wfxns-2"
+})(["flex:1;display:flex;align-items:center;padding-top:", "px;padding-bottom:", "px;overflow:hidden;"], CONTENT_LABEL_VERTICAL_PADDING, CONTENT_LABEL_VERTICAL_PADDING);
+/**
+ * label > dir arrow
+ */
+
+const StyledContentLabelDirArrowWrap = styled__default["default"].div.withConfig({
+  componentId: "sc-3wfxns-3"
+})(["flex:0 0 ", "px;display:flex;justify-content:center;align-items:center;padding:", ";height:", "px;"], CONTENT_LABEL_DIR_ARROW_SIZE + CONTENT_LABEL_DIR_ARROW_PADDING * 2, CONTENT_LABEL_DIR_ARROW_PADDING, CONTENT_LABEL_DIR_ARROW_SIZE);
+/**
+ * label > icon
+ */
+
+const StyledContentLabelIconWrap = styled__default["default"].div.withConfig({
+  componentId: "sc-3wfxns-4"
+})(["flex:0 0 ", "px;display:flex;margin-right:", "px;height:", "px;"], CONTENT_LABEL_ICON_SIZE + CONTENT_LABEL_ICON_AFTER_MARGIN, CONTENT_LABEL_ICON_AFTER_MARGIN, CONTENT_LABEL_ICON_SIZE);
+/**
+ * label > filename
+ */
+
+const StyledContentLabelFilename = styled__default["default"](blocks.Text).withConfig({
+  componentId: "sc-3wfxns-5"
+})(["flex:1;margin-right:0.125rem;color:", ";font-weight:500;"], designTokens.base.color.gray4);
+/**
+ * label > status icon
+ */
+
+const StyledContentLabelStatusIcon = styled__default["default"](blocks.Icon).withConfig({
+  componentId: "sc-3wfxns-6"
+})(["margin-left:0.25rem;margin-right:0;&:last-of-type{margin-right:0.25rem;}"]);
+/**
+ * label > menu button
+ */
+
+const StyledContentLabelMenuButton = styled__default["default"](blocks.IconButton).withConfig({
+  componentId: "sc-3wfxns-7"
+})(["flex:0 0 ", "px;width:", "px !important;height:", "px !important;opacity:0;transition:opacity 150ms ease-in-out;"], CONTENT_LABEL_MENU_BUTTON_SIZE, CONTENT_LABEL_MENU_BUTTON_SIZE, CONTENT_LABEL_MENU_BUTTON_SIZE); //
+//
+//
+
+const cssStyledContentActive = styled.css(["border-left-color:", ";background-color:", ";", "{color:", ";}"], designTokens.base.color.primary4, designTokens.base.color.navy7, StyledContentLabelFilename, designTokens.base.color.gray3);
+const cssStyledContentDragging = styled.css(["border-left-color:transparent !important;background-color:transparent !important;"]);
+const StyledContent = styled__default["default"].div.withConfig({
+  componentId: "sc-3wfxns-8"
+})(["display:flex;padding-right:", "px;width:100%;min-width:0;min-height:", "px;border-left-width:", "px;border-left-style:solid;border-left-color:transparent;user-select:none;", " ", " &:hover{background-color:", ";", "{color:", ";}", "{opacity:1;}}"], CONTENT_RIGHT_PADDING, CONTENT_MIN_HEIGHT, CONTENT_LEFT_BORDER_WIDTH, props => props.active && cssStyledContentActive, props => props.isDragging && cssStyledContentDragging, designTokens.base.color.navy8, StyledContentLabelFilename, designTokens.base.color.gray3, StyledContentLabelMenuButton);
+
+exports.StyledContent = StyledContent;
+exports.StyledContentIndentGuide = StyledContentIndentGuide;
+exports.StyledContentIndents = StyledContentIndents;
+exports.StyledContentLabel = StyledContentLabel;
+exports.StyledContentLabelDirArrowWrap = StyledContentLabelDirArrowWrap;
+exports.StyledContentLabelFilename = StyledContentLabelFilename;
+exports.StyledContentLabelIconWrap = StyledContentLabelIconWrap;
+exports.StyledContentLabelMenuButton = StyledContentLabelMenuButton;
+exports.StyledContentLabelStatusIcon = StyledContentLabelStatusIcon;

package/cjs/components/shared/file-tree/FileTreeListItemContentInput.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { NewInput } from './context';
+export interface FileTreeListItemContentInputProps {
+    type: 'new' | 'edit';
+    currentPath: string;
+    currentDirTitleList: string[];
+    newInputType: NewInput['type'];
+    initialValue?: string;
+    /** class */
+    className?: string;
+    /** custom style */
+    style?: React.CSSProperties;
+}
+declare const FileTreeListItemContentInput: React.VFC<FileTreeListItemContentInputProps>;
+export default FileTreeListItemContentInput;