finder-react v1.0.3

finder-react

Demo

Setup

npm install finder-react --save

Basics

import React from 'react';
import { Finder } from 'finder-react';

const App = () => {
  const generalRightMenu = [
    {
      text: 'New Folder',
      action: () => {},
    },
    {
      text: 'Get Info',
      action: () => {},
    },
    {
      text: 'Clean Up',
      action: () => {},
    },
  ];
  const folderRightMenu = [
    {
      text: 'Get Info',
      action: () => {}
    },
    {
      text: 'Delete',
      action: () => {}
    },
  ];
  const fileRightMenu = [
    {
      text: 'Get Info',
      action: () => {}
    },
    {
      text: 'Copy',
      action: () => {}
    },
    {
      text: 'Delete',
      action: () => {}
    },
  ];
  const listOfFilesFolders = [
    {
      name: 'README.md',
      isFile: true,
      rightClickMenu: fileRightMenu,
      clickWhenSelected: () => {},
      clickWhenUnselected: () => {},
      doubleClick: () => {},
    },
    {
      name: 'CODE_OF_CONDUCT.md',
      isFile: true,
      rightClickMenu: fileRightMenu,
      clickWhenSelected: () => {
        console.log('clickWhenSelected');
      },
      clickWhenUnselected: () => {
        console.log('clickWhenUnselected');
      },
      doubleClick: () => {
        console.log('double click');
      },
    },
    {
      name: 'src',
      isFile: false,
      rightClickMenu: folderRightMenu,
      clickWhenSelected: () => {},
      clickWhenUnselected: () => {},
      doubleClick: () => {},
    },
  ];
  return (
    <div style={{ height: '100%' }}>
      <Finder
        listOfFilesFolders={listOfFilesFolders}
        generalRightMenu={generalRightMenu}
      />
    </div>
  );
}

export default App;