Pikas UI

@pikas-ui/explorer

This package contains a explorer component that can be used to show a list of files and folders.

This library is based on Dnd-kit.

Change Log

Requirements

To use this package, you must install the @pikas-ui/styles package.

Installation

You can install this package using npm, yarn, or pnpm.

npm install @pikas-ui/explorer

yarn add @pikas-ui/explorer

pnpm add @pikas-ui/explorer

Usage

Explorer

This component is used to show a list of files and folders. You can use the showType prop to change the view type. And you can drag and drop items to move them to another folder.

With grid view

Root

Folder after root

Folder test

With list view

Root

Folder after root

Folder test

Name

Size

Created at

import type { ExplorerItem, ExplorerShowType } from '@pikas-ui/explorer';
import { Explorer } from '@pikas-ui/explorer';
import type { IconProps } from '@pikas-ui/icons';
import { IconByName } from '@pikas-ui/icons';

const TrashIcon: FC<IconProps> = (props) => (
  <IconByName {...props} name="bx:trash" />
);

const data: ExplorerItem[] = [
  {
    id: '1',
    name: 'Folder',
    type: 'folder',
    size: '1.2 MB',
    createdAt: '2021-01-01',
    updatedAt: '2021-01-01',
    isFavorite: true,
  },
  {
    id: '2',
    name: 'my-file.png',
    type: 'file',
    size: '987.6 KB',
    createdAt: '2020-03-01',
    updatedAt: '2020-03-01',
    isFavorite: false,
  },
];

const Example: React.FC = () => {
  return (
    <Explorer
      showType={showType}
      showFavorite={true}
      items={data.map((item) => ({
        ...item,
        menu: [
          {
            items: [
              {
                type: 'item',
                label: 'Delete',
                onClick: (): void => {
                  alert(`Delete item id: ${item.id}`);
                },
                colorName: 'danger',
                Icon: TrashIcon,
              },
            ],
          },
        ],
      }))}
      breadcrumb={[
        {
          id: '100',
          name: 'Root',
        },
        {
          id: '101',
          name: 'Folder after root',
        },
        {
          id: '102',
          name: 'Folder',
        },
      ]}
      onOpenItem={(item): void => {
        alert(`Open item id: ${item.id}`);
      }}
      onDropItems={({ folderId, item }): void => {
        alert(
          `Drop item id: ${item
            .map((i) => i.id)
            .join(', ')} to folder id: ${folderId}`
        );
      }}
      onFavoriteItem={async (item): Promise<void> => {
        await new Promise((resolve) => setTimeout(resolve, 1000));
        alert(`Favorite item id: ${item.id}`);
      }}
      showBreadcrumb={{
        default: false,
        xs: false,
        sm: false,
        md: true,
        lg: true,
        xl: true,
      }}
      actions={[
        {
          accessType: ['folder'],
          onClick: (ids): void => {
            alert(`Delete items id: ${ids.join(', ')}`);
          },
          Icon: TrashIcon,
        },
      ]}
    />
  );
};

Props

Prop	Description	Type	Default
`showType`	The type of view to show	`ExplorerShowType`	`grid`
`items`	The items to show	`ExplorerItem[]`	-
`multiSelectable`	If the items can be selected	`boolean`	`true`
`breadcrumb`	The breadcrumb to show	`BreadcrumbItem[]`	-
`onOpenItem`	The callback when an item is opened	`OnOpenItem`	-
`onDropItems`	The callback when an item is dropped	`OnDropItems`	-
`onFavoriteItem`	The callback when an item is favorited	`OnFavoriteItem`	-
`showFavorite`	If the favorite button is shown	`boolean`	-
`showBreadcrumb`	If the breadcrumb is shown	`ShowBreadcrumb`	`{ default: true }`
`showContextMenu`	If the context menu is shown	`boolean`	`true`
`showDropdownMenu`	If the dropdown menu is shown	`boolean`	`true`
`showActions`	If the actions are shown	`ShowActions`	`{ default: true }`
`actions`	The actions to show	`Action[]`	-
`gridCols`	The number of columns to show	`GridContainerCols`	`{ default: 1, sm: 2, md: 3, lg: 4, xl: 5 }`
`gridRowGap`	The row gap to show	`GridContainerRowGap`	`{ default: 16 }`
`gridColumnGap`	The column gap to show	`GridContainerColumnGap`	`{ default: 16 }`

Contributing

This documentation can be edited on GitHub here