@elice/material-exercise 1.220803.0

package/es/components/shared/file-tree/context/FileTreeContext.d.ts

@@ -0,0 +1,127 @@
+import React from 'react';
+import type { OnDirectoryAdd, OnDirectoryDelete, OnDirectoryMove, OnFileAdd, OnFileDelete, OnFileMove, OnFilesUpload, OnHiddenSet, OnInitialOpenFileSet, OnReadOnlySet } from '../interface';
+import type { FileTreeNode } from '../utils';
+export declare type FileTreeTheme = 'dark' | 'white';
+export interface FileTreeThemeOptions {
+    backgroundColor: string;
+}
+export interface NewInput {
+    type: 'file' | 'directory';
+    path: string;
+}
+export declare type Mode = 'default' | 'checkbox';
+export interface State {
+    mode: Mode;
+    maxFileUploadSize: number;
+    fileTree: FileTreeNode;
+    theme: FileTreeTheme;
+    openedDirectoryList: string[];
+    draggedPath: string | null;
+    dropzonePath: string | null;
+    newInput?: NewInput;
+    renameInputPath?: string;
+    initialOpenFileListTemp: string[];
+}
+declare type Action = {
+    type: 'UPDATE_THEME';
+    theme: State['theme'];
+} | {
+    type: 'TOGGLE_OPENED_DIRECTORY_LIST';
+    path: string;
+} | {
+    type: 'ADD_OPENED_DIRECTORY_LIST';
+    path: string;
+} | {
+    type: 'NEW_INPUT_OPEN';
+    newInput: NewInput;
+} | {
+    type: 'NEW_INPUT_CLOSE';
+    newInput: Pick<NewInput, 'path'>;
+} | {
+    type: 'UPDATE_FILE_TREE';
+    fileTree: FileTreeNode;
+} | {
+    type: 'UPDATE_RENAME_INPUT_PATH';
+    path: string;
+} | {
+    type: 'UPDATE_DRAGGED_PATH';
+    path: string | null;
+} | {
+    type: 'UPDATE_DROPZONE_PATH';
+    path: string | null;
+} | {
+    type: 'UPDATE_MODE';
+    mode: Mode;
+} | {
+    type: 'INITIAL_OPEN_FILELIST_UPDATE';
+    initialOpenFilelist: string[];
+} | {
+    type: 'INITIAL_OPEN_FILELIST_ADD';
+    path: string;
+} | {
+    type: 'INITIAL_OPEN_FILELIST_REMOVE';
+    path: string;
+};
+declare type Dispatch = (action: Action) => void;
+declare type FileTreeProviderProps = {
+    children: React.ReactNode;
+    theme?: FileTreeTheme;
+    collapsed?: boolean;
+    activePath: string;
+    allowToggleReadonly?: boolean;
+    allowToggleHidden?: boolean;
+    onCollapse?: (collapsed: boolean) => void;
+    onActivePathChange: (path: string, isDirectory: boolean) => void;
+    /** max file upload size in MB */
+    maxFileUploadSize?: number;
+    /** calls when user upload files by input or dnd */
+    onFilesUpload?: OnFilesUpload;
+    /** calls when user clicks add file button */
+    onFileAdd?: OnFileAdd;
+    /** calls when user clicks add directory button */
+    onDirectoryAdd?: OnDirectoryAdd;
+    onHiddenSet?: OnHiddenSet;
+    onReadOnlySet?: OnReadOnlySet;
+    /** exerciseroom file list (User) */
+    exerciseRoomFilelist: string[];
+    /** readyExerciseRoom filelist (Admin) */
+    imageFilelist: string[];
+    /** readyExerciseRoom readOnly filelist (Admin) */
+    readOnlyFilelist?: string[];
+    /** readyExerciseRoom hidden filelist (Admin) */
+    hiddenFilelist?: string[];
+    /** whether the hiddenFilelist is visible or not */
+    isHiddenFilelistVisible?: boolean;
+    onFileDelete?: OnFileDelete;
+    onDirectoryDelete?: OnDirectoryDelete;
+    onFileMove?: OnFileMove;
+    onDirectoryMove?: OnDirectoryMove;
+};
+interface StateContextType extends State {
+    collapsed?: boolean;
+    activePath: string;
+    allowToggleReadonly: boolean;
+    allowToggleHidden: boolean;
+    draggedPath: string | null;
+    dropzonePath: string | null;
+    isHiddenFilelistVisible: boolean;
+}
+interface DispatchContextType {
+    dispatch: Dispatch;
+    onCollapse?: (collapsed: boolean) => void;
+    onActivePathChange: (path: string, isDirectory: boolean) => void;
+    onFileAdd?: OnFileAdd;
+    onDirectoryAdd?: OnDirectoryAdd;
+    onHiddenSet?: OnHiddenSet;
+    onReadOnlySet?: OnReadOnlySet;
+    onFileDelete?: OnFileDelete;
+    onDirectoryDelete?: OnDirectoryDelete;
+    onFileMove?: OnFileMove;
+    onDirectoryMove?: OnDirectoryMove;
+    onSetInitialOpenFile?: OnInitialOpenFileSet;
+    onFilesUpload?: OnFilesUpload;
+}
+declare function FileTreeProvider({ theme, collapsed, activePath, allowToggleReadonly, allowToggleHidden, onCollapse, onActivePathChange, maxFileUploadSize, onFilesUpload, onFileAdd, onDirectoryAdd, onHiddenSet, onReadOnlySet, onFileDelete, onDirectoryDelete, onFileMove, onDirectoryMove, exerciseRoomFilelist, imageFilelist, readOnlyFilelist, hiddenFilelist, isHiddenFilelistVisible, children, }: FileTreeProviderProps): JSX.Element;
+declare function useFileTreeState(): StateContextType;
+declare function useFileTreeDispatch(): DispatchContextType;
+export { FileTreeProvider, useFileTreeState, useFileTreeDispatch };

package/es/components/shared/file-tree/context/FileTreeContext.js

@@ -0,0 +1,192 @@
+import React from 'react';
+import 'filesize';
+import { create } from '../utils/fileTreeGenerator.js';
+
+const StateContext = React.createContext(undefined);
+const DispatchContext = React.createContext(undefined);
+StateContext.displayName = 'FileTreeStateContext';
+DispatchContext.displayName = 'FileTreeDispatchContext';
+
+function reducer(state, action) {
+  switch (action.type) {
+    case 'UPDATE_THEME':
+      return Object.assign(Object.assign({}, state), {
+        theme: action.theme
+      });
+
+    case 'TOGGLE_OPENED_DIRECTORY_LIST':
+      return Object.assign(Object.assign({}, state), {
+        openedDirectoryList: state.openedDirectoryList.includes(action.path) ? state.openedDirectoryList.filter(path => path !== action.path) : [...state.openedDirectoryList, action.path]
+      });
+
+    case 'ADD_OPENED_DIRECTORY_LIST':
+      return Object.assign(Object.assign({}, state), {
+        openedDirectoryList: [...new Set([...state.openedDirectoryList, action.path])]
+      });
+
+    case 'NEW_INPUT_OPEN':
+      return Object.assign(Object.assign({}, state), {
+        newInput: {
+          type: action.newInput.type,
+          path: action.newInput.path
+        },
+        openedDirectoryList: [...state.openedDirectoryList, action.newInput.path]
+      });
+
+    case 'NEW_INPUT_CLOSE':
+      return Object.assign(Object.assign({}, state), {
+        newInput: undefined
+      });
+
+    case 'UPDATE_FILE_TREE':
+      return Object.assign(Object.assign({}, state), {
+        fileTree: action.fileTree
+      });
+
+    case 'UPDATE_RENAME_INPUT_PATH':
+      return Object.assign(Object.assign({}, state), {
+        renameInputPath: action.path
+      });
+
+    case 'UPDATE_DRAGGED_PATH':
+      return Object.assign(Object.assign({}, state), {
+        draggedPath: action.path
+      });
+
+    case 'UPDATE_DROPZONE_PATH':
+      return Object.assign(Object.assign({}, state), {
+        dropzonePath: action.path
+      });
+
+    case 'UPDATE_MODE':
+      return Object.assign(Object.assign({}, state), {
+        mode: action.mode
+      });
+
+    case 'INITIAL_OPEN_FILELIST_UPDATE':
+      return Object.assign(Object.assign({}, state), {
+        initialOpenFileListTemp: [...action.initialOpenFilelist]
+      });
+
+    case 'INITIAL_OPEN_FILELIST_ADD':
+      return Object.assign(Object.assign({}, state), {
+        initialOpenFileListTemp: [...state.initialOpenFileListTemp, action.path]
+      });
+
+    case 'INITIAL_OPEN_FILELIST_REMOVE':
+      return Object.assign(Object.assign({}, state), {
+        initialOpenFileListTemp: state.initialOpenFileListTemp.filter(path => path !== action.path)
+      });
+
+    default:
+      return state;
+  }
+}
+
+const init = state => Object.assign({}, state);
+
+function FileTreeProvider({
+  theme = 'dark',
+  collapsed = false,
+  activePath,
+  allowToggleReadonly = false,
+  allowToggleHidden = false,
+  onCollapse,
+  onActivePathChange,
+  maxFileUploadSize = 50,
+  onFilesUpload,
+  onFileAdd,
+  onDirectoryAdd,
+  onHiddenSet,
+  onReadOnlySet,
+  onFileDelete,
+  onDirectoryDelete,
+  onFileMove,
+  onDirectoryMove,
+  exerciseRoomFilelist,
+  imageFilelist,
+  readOnlyFilelist,
+  hiddenFilelist,
+  isHiddenFilelistVisible = false,
+  children
+}) {
+  const [state, dispatch] = React.useReducer(reducer, {
+    mode: 'default',
+    maxFileUploadSize,
+    draggedPath: null,
+    dropzonePath: null,
+    openedDirectoryList: [],
+    initialOpenFileListTemp: [],
+    theme,
+    fileTree: create({
+      exerciseRoomFilelist,
+      imageFilelist,
+      hiddenFilelist,
+      readOnlyFilelist,
+      openedDirectoryList: []
+    })
+  }, init);
+  React.useEffect(() => {
+    dispatch({
+      type: 'UPDATE_FILE_TREE',
+      fileTree: create({
+        exerciseRoomFilelist,
+        imageFilelist,
+        hiddenFilelist,
+        readOnlyFilelist,
+        initialOpenFilelist: state.initialOpenFileListTemp,
+        openedDirectoryList: state.openedDirectoryList,
+        newInput: state.newInput,
+        renameInputPath: state.renameInputPath
+      })
+    });
+  }, [exerciseRoomFilelist, imageFilelist, hiddenFilelist, readOnlyFilelist, state.initialOpenFileListTemp, state.openedDirectoryList, state.newInput, state.renameInputPath]);
+  return (// StateContext and DispatchContext are seperated on purpose in order to optimize rendering performance.
+    React.createElement(StateContext.Provider, {
+      value: Object.assign(Object.assign({}, state), {
+        collapsed,
+        activePath,
+        allowToggleReadonly,
+        allowToggleHidden,
+        isHiddenFilelistVisible
+      })
+    }, React.createElement(DispatchContext.Provider, {
+      value: {
+        dispatch,
+        onCollapse,
+        onActivePathChange,
+        onFileAdd,
+        onDirectoryAdd,
+        onHiddenSet,
+        onReadOnlySet,
+        onFileDelete,
+        onDirectoryDelete,
+        onFileMove,
+        onDirectoryMove,
+        onFilesUpload
+      }
+    }, children))
+  );
+}
+
+function useFileTreeState() {
+  const context = React.useContext(StateContext);
+
+  if (context === undefined) {
+    throw new Error('useFileTreeState must be used within a FileTreeProvider');
+  }
+
+  return context;
+}
+
+function useFileTreeDispatch() {
+  const context = React.useContext(DispatchContext);
+
+  if (context === undefined) {
+    throw new Error('useFileTreeDispatch must be used within a FileTreeProvider');
+  }
+
+  return context;
+}
+
+export { FileTreeProvider, useFileTreeDispatch, useFileTreeState };

package/es/components/shared/file-tree/context/index.d.ts

@@ -0,0 +1 @@
+export * from './FileTreeContext';

package/es/components/shared/file-tree/index.d.ts

@@ -0,0 +1,15 @@
+export { default as FileTree } from './FileTree';
+export type { FileTreeProps } from './FileTree';
+export type { FileTreeToolbarProps } from './FileTreeToolbar';
+export type { FileTreeListProps } from './FileTreeList';
+export type { FileTreeConfigProps } from './FileTreeConfig';
+export type { OnDirectoryAdd, OnDirectoryAddParams } from './interface';
+export type { OnFileAdd, OnFileAddParams } from './interface';
+export type { OnDirectoryDelete } from './interface';
+export type { OnFileDelete } from './interface';
+export type { OnFilesUpload, OnFilesUploadParams } from './interface';
+export type { OnDirectoryMove, OnDirectoryMoveParams } from './interface';
+export type { OnFileMove, OnFileMoveParams } from './interface';
+export type { OnHiddenSet, OnHiddenSetParams } from './interface';
+export type { OnInitialOpenFileSet, OnInitialOpenFileSetParams, } from './interface';
+export type { OnReadOnlySet, OnReadOnlySetParams } from './interface';

package/es/components/shared/file-tree/interface/index.d.ts

@@ -0,0 +1,47 @@
+export declare type OnFileAddParams = {
+    path: string;
+    userFile?: File;
+    emptyFileWithName?: string;
+    overwrite?: boolean;
+};
+export declare type OnFileAdd = (params: OnFileAddParams) => Promise<any>;
+export declare type OnDirectoryAddParams = {
+    path: string;
+    name: string;
+    overwrite?: boolean;
+};
+export declare type OnDirectoryAdd = (params: OnDirectoryAddParams) => Promise<any>;
+export declare type OnHiddenSetParams = {
+    path: string;
+    isHidden: boolean;
+};
+export declare type OnHiddenSet = (params: OnHiddenSetParams) => void;
+export declare type OnReadOnlySetParams = {
+    path: string;
+    isReadOnly: boolean;
+};
+export declare type OnReadOnlySet = (params: OnReadOnlySetParams) => void;
+export declare type OnFileDelete = (path: string) => Promise<any>;
+export declare type OnDirectoryDelete = (path: string) => Promise<any>;
+export declare type OnFileMoveParams = {
+    currentFilename: string;
+    newPath: string;
+    newName: string;
+};
+export declare type OnFileMove = (params: OnFileMoveParams) => Promise<any>;
+export declare type OnDirectoryMoveParams = {
+    currentFilename: string;
+    newPath: string;
+    newName: string;
+};
+export declare type OnDirectoryMove = (params: OnDirectoryMoveParams) => Promise<any>;
+export declare type OnInitialOpenFileSetParams = {
+    path: string;
+    isInitialOpen: boolean;
+};
+export declare type OnInitialOpenFileSet = (params: OnInitialOpenFileSetParams) => void;
+export declare type OnFilesUploadParams = {
+    files: FileList;
+    path: string;
+};
+export declare type OnFilesUpload = (params: OnFilesUploadParams) => void;

package/es/components/shared/file-tree/locales/en.json.js

@@ -0,0 +1,3 @@
+var phrasesEn = {"fileTree.list.item.content.input.validation.error.filename.dot":"The filename can't be \".\" or \"..\".","fileTree.list.item.content.input.validation.error.filename.dotElice":"The filename can't be \".elice\".","fileTree.list.item.content.input.validation.error.filename.duplicated":"The file name is already used.","fileTree.list.item.content.input.validation.error.filename.slash":"The filename can't include slash or backslash.","fileTree.list.item.content.input.validation.error.maxLength":"The filename can't be more than {maxLength} characters long.","fileTree.list.item.content.input.validation.error.required":"Please enter a filename.","fileTree.list.item.content.menu.deleteConfirmDialog.body":"Are you sure you want to delete \"{title}\"?","fileTree.list.item.content.menu.deleteConfirmDialog.cancel":"Cancel","fileTree.list.item.content.menu.deleteConfirmDialog.confirm":"Delete","fileTree.list.item.content.menu.deleteConfirmDialog.title":"Confirm Delete","fileTree.list.item.content.menu.item.delete":"Delete","fileTree.list.item.content.menu.item.hiddenSet":"Set Hidden","fileTree.list.item.content.menu.item.hiddenUnset":"Unset Hidden","fileTree.list.item.content.menu.item.newDirectory":"New Directory","fileTree.list.item.content.menu.item.newFile":"New File","fileTree.list.item.content.menu.item.readOnlySet":"Set Read-only","fileTree.list.item.content.menu.item.readOnlyUnset":"Unset Read-only","fileTree.list.item.content.menu.item.rename":"Rename","fileTree.toolbar.newDirectory":"New Directory","fileTree.toolbar.newFile":"New File","fileTree.toolbar.upload":"Upload File"};
+
+export { phrasesEn as default };

package/es/components/shared/file-tree/locales/ko.json.js

@@ -0,0 +1,3 @@
+var phrasesKo = {"fileTree.list.item.content.input.validation.error.filename.dot":"파일 이름은 \".\" 혹은 \"..\"을 사용할 수 없습니다.","fileTree.list.item.content.input.validation.error.filename.dotElice":"파일 이름은 \".elice\"를 사용할 수 없습니다.","fileTree.list.item.content.input.validation.error.filename.duplicated":"이미 존재하는 파일 이름입니다.","fileTree.list.item.content.input.validation.error.filename.slash":"파일 이름은 슬래시나 역슬래시를 포함할 수 없습니다.","fileTree.list.item.content.input.validation.error.maxLength":"파일 이름은 {maxLength}자를 초과할 수 없습니다..","fileTree.list.item.content.input.validation.error.required":"파일 이름을 입력해주세요.","fileTree.list.item.content.menu.deleteConfirmDialog.body":"\"{title}\" 파일을 삭제하시겠습니까?","fileTree.list.item.content.menu.deleteConfirmDialog.cancel":"취소","fileTree.list.item.content.menu.deleteConfirmDialog.confirm":"확인","fileTree.list.item.content.menu.deleteConfirmDialog.title":"파일 삭제","fileTree.list.item.content.menu.item.delete":"삭제","fileTree.list.item.content.menu.item.hiddenSet":"파일 숨기기","fileTree.list.item.content.menu.item.hiddenUnset":"파일 보이기","fileTree.list.item.content.menu.item.newDirectory":"새 폴더","fileTree.list.item.content.menu.item.newFile":"새 파일","fileTree.list.item.content.menu.item.readOnlySet":"읽기 전용","fileTree.list.item.content.menu.item.readOnlyUnset":"읽기 전용 해제","fileTree.list.item.content.menu.item.rename":"이름 바꾸기","fileTree.toolbar.newDirectory":"새 폴더 추가","fileTree.toolbar.newFile":"새 파일 추가","fileTree.toolbar.upload":"파일 업로드"};
+
+export { phrasesKo as default };

package/es/components/shared/file-tree/utils/fileTreeFiles.d.ts

@@ -0,0 +1,2 @@
+export declare const validateFileSize: (file: File, maxFileUploadSize: number) => boolean;
+export declare const validateFilesSize: (files: FileList, maxFileUploadSize: number) => boolean;

package/es/components/shared/file-tree/utils/fileTreeFiles.js

@@ -0,0 +1,32 @@
+import filesize from 'filesize';
+
+const validateFileSize = (file, maxFileUploadSize) => {
+  const {
+    value: currentSize,
+    unit: currentUnit
+  } = filesize(file.size, {
+    output: 'object',
+    base: 10,
+    exponent: 2
+  });
+  const {
+    value: maxSize,
+    unit: maxUnit
+  } = filesize(maxFileUploadSize * 1024 * 1024, {
+    output: 'object',
+    base: 10,
+    exponent: 2
+  });
+
+  if (currentSize > maxSize) {
+    alert(`The file size can be up to ${maxSize}${maxUnit}, but your file(${file.name}) size is ${currentSize}${currentUnit}.`);
+    return false;
+  }
+
+  return true;
+};
+const validateFilesSize = (files, maxFileUploadSize) => {
+  return Array.from(files).every(file => validateFileSize(file, maxFileUploadSize));
+};
+
+export { validateFileSize, validateFilesSize };

package/es/components/shared/file-tree/utils/fileTreeGenerator.d.ts

@@ -0,0 +1,68 @@
+import type { NewInput } from '../context';
+export declare class FileTreeRoot {
+    readonly root: FileTreeNode;
+    readonly directoryNodes: {
+        [key: string]: FileTreeNode;
+    };
+    imageFilelist: string[];
+    readOnlyFilelist: string[];
+    hiddenFilelist: string[];
+    openedDirectoryList: string[];
+    renameInputPath?: string;
+    initialOpenFilelist: string[];
+    constructor({ imageFilelist, readOnlyFilelist, hiddenFilelist, openedDirectoryList, renameInputPath, initialOpenFilelist, }: {
+        imageFilelist: string[];
+        readOnlyFilelist: string[];
+        hiddenFilelist: string[];
+        openedDirectoryList: string[];
+        newInputDirectoryPath?: string;
+        newInputFilePath?: string;
+        renameInputPath?: string;
+        initialOpenFilelist?: string[];
+    });
+    createDirectoryNode(path: string, parentPath: string): FileTreeNode;
+    createFileNode(path: string, parentPath: string): FileTreeNode;
+    getParentNode(path: string): FileTreeNode;
+    insert(path: string): void;
+    insertInputNode(path: string, inputType: 'directory' | 'file'): void;
+    _setDirectoriesRemovable(node: FileTreeNode): boolean;
+}
+export declare class FileTreeNode {
+    readonly path: string;
+    readonly title: string;
+    readonly isDirectory: boolean;
+    readonly isEdit: boolean;
+    isReadonly: boolean;
+    isRemovable: boolean;
+    isHidden: boolean;
+    expanded: boolean;
+    isRenaming: boolean;
+    children: FileTreeNode[];
+    parentPath: string;
+    isInitialOpen: boolean;
+    constructor({ path, parentPath, title, isDirectory, isReadonly, isRemovable, isHidden, expanded, isEdit, isRenaming, isInitialOpen, }: {
+        path: string;
+        parentPath: string;
+        title?: string;
+        isDirectory?: boolean;
+        isReadonly?: boolean;
+        isRemovable?: boolean;
+        isHidden?: boolean;
+        expanded?: boolean;
+        isEdit?: boolean;
+        isRenaming?: boolean;
+        isInitialOpen?: boolean;
+    });
+    findTreeNode(path: string, depth?: number): FileTreeNode | undefined;
+}
+export declare function create({ imageFilelist, exerciseRoomFilelist, openedDirectoryList, hiddenFilelist, readOnlyFilelist, newInput, renameInputPath, initialOpenFilelist, }: {
+    imageFilelist: string[];
+    exerciseRoomFilelist: string[];
+    openedDirectoryList: string[];
+    hiddenFilelist?: string[];
+    readOnlyFilelist?: string[];
+    newInput?: NewInput;
+    renameInputPath?: string;
+    initialOpenFilelist?: string[];
+}): FileTreeNode;
+export declare function getParentPath(path: string): string;