@elice/material-exercise 1.220803.0

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

@@ -0,0 +1,303 @@
+'use strict';
+
+var React = require('react');
+var reactHookForm = require('react-hook-form');
+var reactIntl = require('react-intl');
+var reactUse = require('react-use');
+var fileTreeGenerator = require('./utils/fileTreeGenerator.js');
+var FileTreeContext = require('./context/FileTreeContext.js');
+var FileTreeListItemContentInput_styled = require('./FileTreeListItemContentInput.styled.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const FILENAME_MAX_LENGTH = 65535;
+const FILENAME_REGEXP_DOT = /^\.$/;
+const FILENAME_REGEXP_DOTDOT = /^\.\.$/;
+const FILENAME_REGEXP_DOT_ELICE = /^\.elice$/;
+const FILENAME_REGEXP_SLASH = /\//;
+const FILENAME_REGEXP_BACK_SLASH = /\\/;
+
+const FileTreeListItemContentInput = ({
+  type,
+  initialValue,
+  className,
+  style,
+  currentPath,
+  currentDirTitleList,
+  newInputType
+}) => {
+  const intl = reactIntl.useIntl();
+  const targetPath = fileTreeGenerator.getParentPath(currentPath);
+  const {
+    dispatch,
+    onFileAdd,
+    onDirectoryAdd,
+    onActivePathChange,
+    onFileMove,
+    onDirectoryMove
+  } = FileTreeContext.useFileTreeDispatch();
+  const {
+    control,
+    handleSubmit,
+    reset,
+    getValues
+  } = reactHookForm.useForm({
+    defaultValues: {
+      filename: initialValue || ''
+    },
+    mode: 'onChange'
+  });
+  const formElRef = React__default["default"].useRef(null);
+  const inputElRef = React__default["default"].useRef(null);
+  /**
+   * Close current input.
+   */
+
+  const close = () => {
+    reset({
+      filename: initialValue
+    });
+    dispatch({
+      type: 'NEW_INPUT_CLOSE',
+      newInput: {
+        path: targetPath
+      }
+    });
+    dispatch({
+      type: 'UPDATE_RENAME_INPUT_PATH',
+      path: ''
+    });
+  };
+  /**
+   * Validate input value.
+   */
+
+
+  const validateFilename = newFilename => {
+    switch (true) {
+      // has dot or dot-dot
+      case FILENAME_REGEXP_DOT.test(newFilename) || FILENAME_REGEXP_DOTDOT.test(newFilename):
+        return intl.formatMessage({
+          id: 'fileTree.list.item.content.input.validation.error.filename.dot'
+        });
+      // has `.elice`
+
+      case FILENAME_REGEXP_DOT_ELICE.test(newFilename):
+        return intl.formatMessage({
+          id: 'fileTree.list.item.content.input.validation.error.filename.dotElice'
+        });
+      // has slash or backslash
+
+      case FILENAME_REGEXP_SLASH.test(newFilename) || FILENAME_REGEXP_BACK_SLASH.test(newFilename):
+        return intl.formatMessage({
+          id: 'fileTree.list.item.content.input.validation.error.filename.slash'
+        });
+      // duplicated
+
+      case currentDirTitleList.some(title => title === newFilename):
+        return intl.formatMessage({
+          id: 'fileTree.list.item.content.input.validation.error.filename.duplicated'
+        });
+
+      default:
+        return true;
+    }
+  };
+  /**
+   * Add file.
+   */
+
+
+  const addFile = params => {
+    if (typeof onFileAdd !== 'function' || !params.emptyFileWithName) {
+      close();
+      return;
+    }
+
+    onFileAdd(params).then(() => onActivePathChange(params.path === '' ? `${params.emptyFileWithName}` : `${params.path}/${params.emptyFileWithName}`, false)).then(close).catch(() => {//
+    });
+  };
+  /**
+   * Add directory.
+   */
+
+
+  const addDirectory = params => {
+    if (typeof onDirectoryAdd !== 'function' || !params.name) {
+      close();
+      return;
+    }
+
+    onDirectoryAdd(params).then(() => onActivePathChange(params.path === '' ? `${params.name}` : `${params.path}/${params.name}`, true)).then(close).catch(() => {//
+    });
+  };
+  /**
+   * Move file.
+   */
+
+
+  const moveFile = params => {
+    if (typeof onFileMove !== 'function' || params.newName === initialValue) {
+      close();
+      return;
+    }
+
+    onFileMove(params).then(close).catch(() => {//
+    });
+  };
+  /**
+   * Move directory.
+   */
+
+
+  const moveDirectory = params => {
+    if (typeof onDirectoryMove !== 'function' || params.newName === initialValue) {
+      close();
+      return;
+    }
+
+    onDirectoryMove(params).then(close).catch(() => {//
+    });
+  };
+  /**
+   * Submit and rename file.
+   */
+
+
+  const handleFormSubmit = handleSubmit(newData => {
+    // if new input is empty, close it.
+    if (!newData.filename) {
+      close();
+      return;
+    }
+
+    if (type === 'new') {
+      if (newInputType === 'file') {
+        addFile({
+          path: targetPath,
+          emptyFileWithName: newData.filename,
+          overwrite: false
+        });
+      }
+
+      if (newInputType === 'directory') {
+        addDirectory({
+          path: targetPath,
+          name: newData.filename,
+          overwrite: false
+        });
+      }
+    } else {
+      if (newInputType === 'file') {
+        moveFile({
+          currentFilename: currentPath,
+          newName: newData.filename,
+          newPath: targetPath
+        });
+      }
+
+      if (newInputType === 'directory') {
+        moveDirectory({
+          currentFilename: currentPath,
+          newName: newData.filename,
+          newPath: targetPath
+        });
+      }
+    }
+  });
+  /**
+   * Handle click away.
+   */
+
+  const handleFormClickAway = () => {
+    const newFilename = getValues('filename');
+
+    if (newFilename) {
+      void handleFormSubmit();
+      return;
+    }
+
+    close();
+  };
+  /**
+   * Handle keydown event.
+   */
+
+
+  const handleKeyDown = e => {
+    switch (e.key) {
+      case 'Escape':
+        close();
+        break;
+    }
+  }; //
+  // Select value at input when initial value is set.
+  //
+
+
+  React__default["default"].useEffect(() => {
+    var _a;
+
+    if (!inputElRef.current || !initialValue) {
+      return;
+    }
+
+    const rangeEndExcludeExtension = initialValue.indexOf((_a = initialValue.split('.').pop()) !== null && _a !== void 0 ? _a : '') - 1;
+    inputElRef.current.setSelectionRange(0, rangeEndExcludeExtension > 0 ? rangeEndExcludeExtension : initialValue.length);
+  }, [initialValue]); //
+  // Submit form when click outside.
+  //
+
+  reactUse.useClickAway(formElRef, handleFormClickAway); //
+  //
+  //
+
+  return React__default["default"].createElement(FileTreeListItemContentInput_styled.StyledInputForm, {
+    onSubmit: handleFormSubmit,
+    ref: formElRef
+  }, React__default["default"].createElement(reactHookForm.Controller, {
+    control: control,
+    name: "filename",
+    rules: {
+      required: {
+        value: true,
+        message: intl.formatMessage({
+          id: 'fileTree.list.item.content.input.validation.error.required'
+        })
+      },
+      maxLength: {
+        value: FILENAME_MAX_LENGTH,
+        message: intl.formatMessage({
+          id: 'fileTree.list.item.content.input.validation.error.maxLength'
+        }, {
+          maxLength: FILENAME_MAX_LENGTH
+        })
+      },
+      validate: validateFilename
+    },
+    render: ({
+      field,
+      fieldState
+    }) => {
+      var _a;
+
+      return React__default["default"].createElement(FileTreeListItemContentInput_styled.StyledInput, Object.assign({}, field, {
+        type: "text",
+        className: className,
+        size: "small",
+        width: "full",
+        invalid: fieldState.invalid,
+        invalidText: (_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message,
+        autoFocus: true,
+        style: style,
+        onChange: e => field.onChange(e.target.value.trim()),
+        onKeyDown: handleKeyDown,
+        ref: inputElRef
+      }));
+    }
+  }));
+};
+
+module.exports = FileTreeListItemContentInput;

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const StyledInputForm: import("styled-components").StyledComponent<"form", any, {}, never>;
+export declare const StyledInput: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elice/blocks").InputProps & import("react").RefAttributes<HTMLInputElement>>, any, {}, never>;

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

@@ -0,0 +1,25 @@
+'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 INPUT_HEIGHT = '1.25rem';
+const INPUT_FONT_SIZE = '0.75rem';
+const INPUT_INNER_LEFT_PADDING = '0.125rem';
+const INPUT_INNER_RIGHT_PADDING = '0.25rem';
+const StyledInputForm = styled__default["default"].form.withConfig({
+  componentId: "sc-1glq6yp-0"
+})(["flex:1;display:flex;"]);
+const StyledInput = styled__default["default"](blocks.Input).withConfig({
+  componentId: "sc-1glq6yp-1"
+})(["min-height:", ";> div{background:transparent !important;> div{&:nth-child(1){padding:", ";}&:nth-child(3){padding:", ";}}.eb-icon{width:0.875em;height:0.875em;font-size:0.875em;}}& input{padding-top:0 !important;padding-bottom:0 !important;height:", " !important;color:", " !important;font-size:", " !important;}"], INPUT_HEIGHT, INPUT_INNER_LEFT_PADDING, INPUT_INNER_RIGHT_PADDING, INPUT_HEIGHT, designTokens.base.color.gray0, INPUT_FONT_SIZE);
+
+exports.StyledInput = StyledInput;
+exports.StyledInputForm = StyledInputForm;

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { MenuAnchorVirtualElement } from '@elice/blocks';
+import type { FileTreeNode } from './utils';
+interface FileTreeListItemContentMenuProps {
+    node: FileTreeNode;
+    anchorEl: undefined | HTMLElement | MenuAnchorVirtualElement;
+    onClose: () => void;
+}
+declare const FileTreeListItemContentMenu: React.VFC<FileTreeListItemContentMenuProps>;
+export default FileTreeListItemContentMenu;

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

@@ -0,0 +1,309 @@
+'use strict';
+
+var React = require('react');
+var reactIntl = require('react-intl');
+var blocks = require('@elice/blocks');
+var FileTreeContext = require('./context/FileTreeContext.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const FileTreeListItemContentMenu = ({
+  node,
+  anchorEl,
+  onClose
+}) => {
+  const intl = reactIntl.useIntl();
+  const {
+    allowToggleHidden,
+    allowToggleReadonly
+  } = FileTreeContext.useFileTreeState();
+  const {
+    dispatch,
+    onHiddenSet,
+    onReadOnlySet,
+    onFileDelete,
+    onDirectoryDelete
+  } = FileTreeContext.useFileTreeDispatch();
+  const [isDeleteDialogOpen, setDeleteDialogOpen] = React__default["default"].useState(false);
+  /**
+   * Set file readonly.
+   */
+
+  const handleReadOnlySet = () => {
+    if (typeof onReadOnlySet === 'function') {
+      onReadOnlySet({
+        path: node.path,
+        isReadOnly: true
+      });
+    }
+  };
+  /**
+   * Unset file readonly.
+   */
+
+
+  const handleReadOnlyUnset = () => {
+    if (typeof onReadOnlySet === 'function') {
+      onReadOnlySet({
+        path: node.path,
+        isReadOnly: false
+      });
+    }
+  };
+  /**
+   * Set file hidden.
+   */
+
+
+  const handleHiddenSet = () => {
+    if (typeof onHiddenSet === 'function') {
+      onHiddenSet({
+        path: node.path,
+        isHidden: true
+      });
+    }
+  };
+  /**
+   * Unset file hidden.
+   */
+
+
+  const handleHiddenUnset = () => {
+    if (typeof onHiddenSet === 'function') {
+      onHiddenSet({
+        path: node.path,
+        isHidden: false
+      });
+    }
+  };
+  /**
+   * Create a new file.
+   */
+
+
+  const handleNewFile = () => {
+    dispatch({
+      type: 'NEW_INPUT_OPEN',
+      newInput: {
+        type: 'file',
+        path: node.path
+      }
+    });
+  };
+  /**
+   * Create a new directory.
+   */
+
+
+  const handleNewDirectory = () => {
+    dispatch({
+      type: 'NEW_INPUT_OPEN',
+      newInput: {
+        type: 'directory',
+        path: node.path
+      }
+    });
+  };
+  /**
+   * Rename file.
+   */
+
+
+  const handleRename = () => {
+    dispatch({
+      type: 'UPDATE_RENAME_INPUT_PATH',
+      path: node.path
+    });
+  };
+  /**
+   * Delete file.
+   */
+
+
+  const handleDelete = () => {
+    if (node.isDirectory && typeof onDirectoryDelete === 'function') {
+      void onDirectoryDelete(node.path);
+    }
+
+    if (!node.isDirectory && typeof onFileDelete === 'function') {
+      void onFileDelete(node.path);
+    }
+  };
+  /**
+   * Set file readonly.
+   */
+
+
+  const renderMenuItemReadOnlySet = () => {
+    if (!allowToggleReadonly || node.isDirectory || node.isReadonly || node.isHidden) {
+      return null;
+    }
+
+    return React__default["default"].createElement(blocks.List.Item, {
+      onClick: handleReadOnlySet
+    }, React__default["default"].createElement(blocks.List.ItemText, null, React__default["default"].createElement(reactIntl.FormattedMessage, {
+      id: "fileTree.list.item.content.menu.item.readOnlySet"
+    })));
+  };
+  /**
+   * Unset file readonly.
+   */
+
+
+  const renderMenuItemReadOnlyUnset = () => {
+    if (!allowToggleReadonly || node.isDirectory || !node.isReadonly) {
+      return null;
+    }
+
+    return React__default["default"].createElement(blocks.List.Item, {
+      onClick: handleReadOnlyUnset
+    }, React__default["default"].createElement(blocks.List.ItemText, null, React__default["default"].createElement(reactIntl.FormattedMessage, {
+      id: "fileTree.list.item.content.menu.item.readOnlyUnset"
+    })));
+  };
+  /**
+   * Set file hidden.
+   */
+
+
+  const renderMenuItemHiddenSet = () => {
+    if (!allowToggleHidden || node.isDirectory || node.isReadonly || node.isHidden) {
+      return null;
+    }
+
+    return React__default["default"].createElement(blocks.List.Item, {
+      onClick: handleHiddenSet
+    }, React__default["default"].createElement(blocks.List.ItemText, null, React__default["default"].createElement(reactIntl.FormattedMessage, {
+      id: "fileTree.list.item.content.menu.item.hiddenSet"
+    })));
+  };
+  /**
+   * Unset file hidden.
+   */
+
+
+  const renderMenuItemHiddenUnset = () => {
+    if (!allowToggleHidden || node.isDirectory || !node.isHidden) {
+      return null;
+    }
+
+    return React__default["default"].createElement(blocks.List.Item, {
+      onClick: handleHiddenUnset
+    }, React__default["default"].createElement(blocks.List.ItemText, null, React__default["default"].createElement(reactIntl.FormattedMessage, {
+      id: "fileTree.list.item.content.menu.item.hiddenUnset"
+    })));
+  };
+  /**
+   * New file.
+   */
+
+
+  const renderMenuItemNewFile = () => {
+    if (!node.isDirectory) {
+      return null;
+    }
+
+    return React__default["default"].createElement(blocks.List.Item, {
+      onClick: handleNewFile
+    }, React__default["default"].createElement(blocks.List.ItemText, null, React__default["default"].createElement(reactIntl.FormattedMessage, {
+      id: "fileTree.list.item.content.menu.item.newFile"
+    })));
+  };
+  /**
+   * New directory.
+   */
+
+
+  const renderMenuItemNewDirectory = () => {
+    if (!node.isDirectory) {
+      return null;
+    }
+
+    return React__default["default"].createElement(blocks.List.Item, {
+      onClick: handleNewDirectory
+    }, React__default["default"].createElement(blocks.List.ItemText, null, React__default["default"].createElement(reactIntl.FormattedMessage, {
+      id: "fileTree.list.item.content.menu.item.newDirectory"
+    })));
+  };
+  /**
+   * Rename file.
+   */
+
+
+  const renderMenuItemRename = () => {
+    return React__default["default"].createElement(blocks.List.Item, {
+      disabled: !node.isRemovable,
+      onClick: handleRename
+    }, React__default["default"].createElement(blocks.List.ItemText, null, React__default["default"].createElement(reactIntl.FormattedMessage, {
+      id: "fileTree.list.item.content.menu.item.rename"
+    })));
+  };
+  /**
+   * Delete file.
+   */
+
+
+  const renderMenuItemDelete = () => {
+    return React__default["default"].createElement(blocks.List.Item, {
+      disabled: !node.isRemovable,
+      onClick: () => setDeleteDialogOpen(true)
+    }, React__default["default"].createElement(blocks.List.ItemText, null, React__default["default"].createElement(reactIntl.FormattedMessage, {
+      id: "fileTree.list.item.content.menu.item.delete"
+    })));
+  };
+  /**
+   * Menu.
+   */
+
+
+  const renderMenu = () => {
+    return React__default["default"].createElement(blocks.Menu, {
+      open: Boolean(anchorEl),
+      anchorEl: anchorEl,
+      size: "xsmall",
+      placement: "right-start",
+      dark: true,
+      onClose: onClose
+    }, renderMenuItemReadOnlySet(), renderMenuItemReadOnlyUnset(), renderMenuItemHiddenSet(), renderMenuItemHiddenUnset(), renderMenuItemNewFile(), renderMenuItemNewDirectory(), renderMenuItemRename(), renderMenuItemDelete());
+  };
+  /**
+   * Dialog for confirm delete.
+   */
+
+
+  const renderDeleteConfirmDialog = () => {
+    if (!isDeleteDialogOpen) {
+      return null;
+    }
+
+    return React__default["default"].createElement(blocks.Dialog, {
+      type: "warning",
+      title: intl.formatMessage({
+        id: 'fileTree.list.item.content.menu.deleteConfirmDialog.title'
+      }),
+      body: intl.formatMessage({
+        id: 'fileTree.list.item.content.menu.deleteConfirmDialog.body'
+      }, {
+        title: node.title
+      }),
+      onHide: () => setDeleteDialogOpen(false)
+    }, React__default["default"].createElement(blocks.Dialog.CloseButton, {
+      onClick: () => setDeleteDialogOpen(false)
+    }, React__default["default"].createElement(reactIntl.FormattedMessage, {
+      id: "fileTree.list.item.content.menu.deleteConfirmDialog.cancel"
+    })), React__default["default"].createElement(blocks.Dialog.ActionButton, {
+      onClick: handleDelete
+    }, React__default["default"].createElement(reactIntl.FormattedMessage, {
+      id: "fileTree.list.item.content.menu.deleteConfirmDialog.confirm"
+    })));
+  }; //
+  //
+  //
+
+
+  return React__default["default"].createElement(React__default["default"].Fragment, null, renderMenu(), renderDeleteConfirmDialog());
+};
+
+module.exports = FileTreeListItemContentMenu;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { FileTreeNode } from './utils';
+interface FileTreeListItemProps {
+    node: FileTreeNode;
+    indent?: number;
+}
+declare const FileTreeListItems: React.VFC<FileTreeListItemProps>;
+export default FileTreeListItems;