反応を用いたファイルディレクトリ表示コンポーネントの構築

このポストは何ですか。

ハローフェロー.今日は基本的なファイルディレクトリ表示コンポーネントを実装しようとします.このポストは、必要最小限のロジックではなく、スタイリングに集中することはありません.
ここでアプリをチェックアウト:

内容

ファイルデータ構造

ディレクトリの生成

ファイルビューアーの表示

それぞれの1つに深いダイビングを行って、それが実装された方法を探ることができます.

ファイルデータ構造

export class File {
  constructor(fileName, childFiles, fileType) {
    this.fileName = fileName;
    this.childFiles = childFiles;
    this.fileType = fileType;
  }

  fileName = "";
  childFiles = [];
  fileType = "";
}

ディレクトリの生成

const COMPONENTS = [
  "first.js",
  "second.js",
  "third.js",
  "fourth.exe",
  "fifth.doc",
  "six.txt"
];

const files = [
  new File(
    "src",
    [
      new File(
        "components",
        [...COMPONENTS].map((comp) => new File(comp, [], "file")),
        "directory"
      ),
      new File("App.js", [], "file")
    ],
    "directory"
  )
];

ファイルビューアーの表示

const FileViewer = () => {
  console.log(files);
  return (
    <Wrapper>
      <FileViewerContainer>
        {files.map((file, index) => {
          return <FilesViewer file={file} key={index} level={0} />;
        })}
      </FileViewerContainer>
    </Wrapper>
  );
};

const FilesViewer = ({ file, level }) => {
  const { fileType, childFiles, fileName } = file;
  const [expanded, setExpanded] = useState(false);
  const onToggle = () => {
    setExpanded((ex) => !ex);
  };
  return (
    <>
      <FilesContainer paddingLeft={`${(level + 1) * 2}rem`}>
        {fileType === "directory" && (
          <IconContainer onClick={onToggle}>
            {expanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}
          </IconContainer>
        )}
        <FileTitle>{fileName}</FileTitle>
      </FilesContainer>
      {childFiles.length > 0 &&
        expanded &&
        file.childFiles.map((childFile, index) => {
          return <FilesViewer file={childFile} key={index} level={level + 1} />;
        })}
    </>
  );
};

const IconContainer = styled.div`
  align-self: center;
  cursor: pointer;
`;

const ExpandLessIcon = styled(MdExpandLess)`
  width: 2rem;
  align-self: center;
`;

const ExpandMoreIcon = styled(MdExpandMore)`
  width: 2rem;
  align-self: center;
`;

const Wrapper = styled.div`
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
`;

const FileViewerContainer = styled.div`
  width: 60vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  background: hsl(210deg, 30%, 8%);
  border: 1px solid hsl(210deg, 15%, 20%);
  border-radius: 1rem;
  color: #e9dd78;
  overflow-y: auto;
  justify-content: center;
`;

const FilesContainer = styled.div`
  width: fit-content;
  height: 3rem;
  padding-left: ${(props) => props?.paddingLeft ?? 0};
  display: flex;
  flex-direction: row;
`;

const FileTitle = styled.div`
  font-size: x-large;
  align-self: center;
`;

結論

このアプリは、実際の生活のアプリケーションで使用されている新しいコンポーネントを学習の一環として行われました.
安心して手を貸してください

Vignesh Iyer