File List

v.5.0.0

Installation

yarn

yarn add @mercell/file-list-react

pnpm

pnpm add @mercell/file-list-react

npm

npm install --save @mercell/file-list-react

The FileList has necessary peerDependencies, please make sure that you have them in your project

"@carbon/icons-react": "^10.49.0",
"@mercell/action-menu-react": "^5.0.0",
"@mercell/checkbox-react": "^5.0.1",
"@mercell/tailwind": "^6.0.1",
"classnames": "^2.3.1",
"react": "^17.0.2" 

Usage

Using the File List is as simple as importing it like this.

import { FileList } from '@mercell/file-list-react';

Live Editor

// You can play with code, with HTML tags and text as much as you want! const FileListWrapper = () => { const numberOfFiles = 3; const hasActions = true; const files = Array(numberOfFiles) .fill(null) .map( (_, index) => new File([''], "file-"+index, { type: 'text/html', lastModified: index, }) ); const allLabelText = (label) => {label}; return ( <div className="file-list-example"> <FileList id="myFileList" files={files} actions={ hasActions ? [ { label: 'Download', handler: (file) => console.log('Download file:', file), Icon: Download32, schemeType: 'vertical', }, { label: 'Remove', handler: (file) => console.log('Delete file:', file), Icon: TrashCan32, schemeType: 'vertical', }, ] : undefined } getAllLabel={allLabelText} /> </div> ); } render(<FileListWrapper />)

// You can play with code, with HTML tags and text as much as you want!
const FileListWrapper = () => {
    const numberOfFiles = 3;
    const hasActions = true;
    const files = Array(numberOfFiles)
        .fill(null)
        .map(
            (_, index) =>
                new File([''], "file-"+index, {
                    type: 'text/html',
                    lastModified: index,
                })
        );
    const allLabelText = (label) => {label};
    return (
        <div className="file-list-example">
            <FileList
                id="myFileList"
                files={files}
                actions={
                    hasActions
                        ? [
                            {
                                label: 'Download',
                                handler: (file) =>
                                    console.log('Download file:', file),
                                Icon: Download32,
                                schemeType: 'vertical',
                            },
                            {
                                label: 'Remove',
                                handler: (file) =>
                                    console.log('Delete file:', file),
                                Icon: TrashCan32,
                                schemeType: 'vertical',
                            },
                        ]
                        : undefined
                }
                getAllLabel={allLabelText}
            />
        </div>
    );
}
render(<FileListWrapper />)

Result

Types, definitions, etc.

Types

FilesListProps

interface FileListProps {
    id: string;
    files: ListFile[];
    actions?: FileAction[];
    actionMenuLabel?: string;
    selectAllLabel?: string;
    getAllLabel?: (label: string) => string;
} & JSX.IntrinsicElements['table']

Name	Type	Default	Required	Description
id	string	-	yes	Unique identifier
files	array	-	yes	Array of files
actions	array	-	yes	Array of functions for handler
actionMenuLabel	string	-	no	Label for action menu
selectAllLabel	string	'Select all'	no	Label text for select all checkbox
getAllLabel	function	-	no	Only for cases where the labels passed inside action are not to be rendered. You can use this method to render a custom label from elsewhere

FileAction

interface FileAction {
    label: string;
    Icon: CarbonIconType;
    schemeType: 'horizontal' | 'vertical';
    handler: (files: File[]) => void;
    className?: string;
}

Name	Type	Default	Required	Description
label	string	-	yes	ActionMenu label
Icon	CarbonIconType	-	yes	Icon for ActionMenu
schemeType	'horizontal' | 'vertical'	-	yes	Alignment for icon
handler	function	-	yes	What happens on clicking the icon buttons
className	function	-	no	Class for ActionMenu

Changelog

Change Log - @mercell/file-list-react

This log was last generated on Fri, 11 Nov 2022 09:18:57 GMT and should not be manually modified.

5.0.0

Fri, 11 Nov 2022 09:18:57 GMT

Breaking changes

• New styling approach - use only tailwind classes, add tailwind-merge library

4.0.0

Thu, 15 Sep 2022 06:07:41 GMT

Breaking changes

• Migration to Tailwind3, React 18 and ViteJS from webpack.

3.0.6

Thu, 30 Jun 2022 10:57:49 GMT

Patches

• Package.json refactor, add test suite, more tests soon

3.0.5

Fri, 08 Apr 2022 10:19:50 GMT

Patches

• Bump dependencies

3.0.4

Mon, 28 Feb 2022 12:45:49 GMT

Patches

• Dependency update

3.0.3

Mon, 28 Feb 2022 10:55:32 GMT

Patches

• Bump typescript

3.0.2

Wed, 26 Jan 2022 16:19:19 GMT

Patches

• Move dependencies to peerDependencies to avoid duplication in installation process in project
• Adding the same peerDependencies to devDependencies

3.0.1

Fri, 21 Jan 2022 12:06:38 GMT

Patches

• Changed bg- variables

3.0.0

Wed, 15 Dec 2021 22:20:34 GMT

Breaking changes

• Update to match figma design

2.0.5

Fri, 12 Nov 2021 13:08:30 GMT

Patches

• Add @mercell/tailwind to devDeps to be always up to date

2.0.4

Fri, 05 Nov 2021 11:10:13 GMT

Patches

• Bump peerDependency

2.0.3

Thu, 04 Nov 2021 10:10:16 GMT

Patches

• Tailwind type fix
• Revert tailwind version

2.0.2

Wed, 03 Nov 2021 15:28:42 GMT

Patches

• react types >=17

2.0.1

Wed, 27 Oct 2021 12:53:13 GMT

Patches

• Delete unused selectedFilesText method
• Gitignore fix

2.0.0

Mon, 18 Oct 2021 07:16:21 GMT

Breaking changes

• New local build process with webpack without storybook, add npmignore and update dependencies

1.0.10

Mon, 12 Jul 2021 10:50:09 GMT

Patches

• Updating dependencies
• Updating dependencies

1.0.9

Thu, 15 Apr 2021 10:25:52 GMT

Patches

• removed action menu on upload, added styling

1.0.8

Wed, 24 Mar 2021 10:17:01 GMT

Patches

• Enabling eslint

1.0.7

Tue, 23 Mar 2021 13:40:42 GMT

Patches

• Adding esm module export

1.0.6

Wed, 17 Mar 2021 10:01:28 GMT

Patches

• Adding readme

1.0.5

Fri, 12 Mar 2021 11:29:04 GMT

Patches

• new spinner

1.0.4

Mon, 08 Mar 2021 10:14:23 GMT

Patches

• show a spinner when uploading files to the FileList

1.0.3

Fri, 19 Feb 2021 09:41:17 GMT

Patches

• bump

1.0.2

Thu, 18 Feb 2021 10:26:12 GMT

Patches

• Export

1.0.1

Tue, 09 Feb 2021 09:25:03 GMT

Patches

• bump

1.0.0

Fri, 05 Feb 2021 13:40:11 GMT

Breaking changes

• Added component

Figma

Sometimes it can take some time until Figma will render component inside embed iframe. Try to click plus icon to 'reset' initial loader. (Works only in Chrome)

Click me to open figma in the new card