Sortable Folder View – React Folder

Description:

A React Folder component for creating a file manager that is sortable and collapsible.

How to use it:

1. Install and import the React Folder component.

# NPM
$ npm i @scena/react-folder

import React from "react";
import Folder, { FileProps } from "@scena/react-folder";

2. The example to create a folder view in your app.

interface Info {
  name: string;
  children: Info[];
}
function FileComponent(props: FileProps<Info>) {
  return (
    <div
      style={{
        padding: "10px",
        width: "100%",
        boxSizing: "border-box"
      }}
    >
      {props.name}
    </div>
  );
}
function App() {
  const [infos, setInfos] = React.useState<Info[]>([
    { name: "hi", children: [{ name: "sub hi", children: [] }] },
    { name: "hi2", children: [{ name: "sub hi2", children: [] }] }
  ]);
  const [selected, setSelected] = React.useState<any[]>([]);
  return (
    <div className="App">
      <Folder<Info>
        infos={infos}
        FileComponent={FileComponent}
        nameProperty="name"
        childrenProperty="children"
        selected={selected}
        multiselect={true}
        isPadding={false}
        isMove={true}
        idProperty={"name"}
        pathProperty={"name"}
        onMove={(e) => {
          e.selectedInfos.forEach((info) => {
            const parentInfo = info.parentInfo;
            const children = parentInfo ? parentInfo.children : infos;
            children.splice(children.indexOf(info.info), 1);
          });
          if (e.parentInfo) {
            e.parentInfo.info.children = e.children;
            setInfos([...infos]);
          } else {
            setInfos([...e.children]);
          }
        }}
        onSelect={(e) => {
          console.log(e);
          setSelected(e.selected);
        }}
      />
    </div>
  );
}
export default App;

3. All possible component props.

export interface FolderProps<T> {
  infos: T[];
  originalInfos?: T[];
  FileComponent: ((props: FileProps<T>) => any) | typeof File;
  scope?: string[];
  selected?: string[] | null;
  multiselect?: boolean;
  isMove?: boolean;
  showFoldIcon?: boolean;
  isPadding?: boolean;
  isMoveChildren?: boolean;
  gap?: number;
  fontColor?: string;
  backgroundColor?: string;
  selectedColor?: string;
  borderColor?: string;
  guidelineColor?: string;
  iconColor?: string;
  nameProperty?:
    | (keyof T & string)
    | ((value: T, index: any, scope: any[]) => any);
  idProperty?:
    | (keyof T & string)
    | ((value: T, index: any, scope: any[]) => string);
  childrenProperty?: (keyof T & string) | ((value: T, scope: any[]) => any);
  pathProperty?:
    | (keyof T & string)
    | ((id: string, scope: any[], value: T, index: any) => string);
  checkMove?: (prevInfo: FileInfo<T>) => boolean;
  onMove?: (e: OnMove<T>) => any;
  onSelect?: (e: OnSelect) => any;
}

Preview: