teko-file-history v1.1.1

Teko File History

A library for creating a file history web page used for Teko system.

Installation

yarn

yarn add teko-file-history

npm

npm install teko-file-history

Preview UI

Usage

The library consists of 2 separated components: Table and Uploader

The library has its own mechanism to fetch configs from server. In order to get server config, you need to provide clientId, env and accessToken to the library. Configs from server will overwrite client config.

1. Props list

Base props

Table props

The table component wraps Antd Table, so it will inherit Antd Table props, besides that we have:

Uploader props

The uploader component also wraps Antd Upload, similarly, we have these extra props:

2. Features and their required props/ alternative usage

1. Fetching import history

• Required props: env, clientId, accessToken
• Alternative usage: pass dataSource and reload to tableProps

2. Download file

• Required props: env, accessToken
• Alternative usage: pass downloadFile to FileImportHistory

3. Upload file

• Required props: env, clientId, accessToken
• Alternative usage: using your own Uploader

4. Debug modal

• Required props: env, accessToken
• Alternative usage: hide it by setting isShowDebug to false

3. Understand about styling

The library does not have its own styling. It adds classnames to the components, and apply the style from the parent application.

You can overwrite the default classnames by passing the classNames prop to the component.

import { FileImportHistory } from 'teko-file-history';

return <FileImportHistory classNames={{ ...customClassNames }} />;

List of classNames in the library:

4. Implementation examples

1. Using full FPS flow

import { FileImportHistory } from 'teko-file-history';

return (
  /**
   * Let the component do everything 🤸‍♂️
   * From fetching data to file handling, validation, and download 🤝
   */
  <FileImportHistory
    env={env}
    clientId={clientId}
    language={language}
    accessToken={`Bearer ${accessToken}`}
    /**
     * Customize your component like a pro 🤷‍♂️
     */
    tableProps={{
      dateFormat: 'DD/MM/YYYY HH:mm:ss',
      orderColumn: ['id', 'name', 'createdAt', 'status', 'progressStatus'],
    }}
    uploaderProps={{
      importFileTemplateUrl: 'https://example.com/import-file-template.xlsx',
      maxFileSize: 5,
      inputFileTypes: ['xlsx', 'xls', 'csv'],
      onUploadFile: (file, setFile) => {
        // Your upload file logic, it got triggered when you click submit button
      },
    }}
  />
);

2. You control your own data

import { FileImportHistory } from 'teko-file-history';

return (
  <FileImportHistory
    env={env}
    language={language}
    accessToken={`Bearer ${accessToken}`}
    /**
     * Just like that, you don't have to worry about clientId anymore 🦈
     * But beware, you can't use our default uploader this way, try using onUploadFile 🤷‍♂️
     */
    tableProps={{
      dataSource, // Your data 🤸‍♂️
      pagination, // Your pagination 🤸‍♂️
      onReload: () => {},
    }}
    uploaderProps={{
      onUploadFile: (file, setFile) => {
        // Your upload file logic, it got triggered when you click submit button
      },
    }}
  />
);

3. You only need the table thing, and you control your own data

import { FileImportHistory } from 'teko-file-history';

return (
  <FileImportHistory
    language={language}
    uploaderProps={{
      isShowUploader: false,
    }}
    tableProps={{
      dataSource, // Your data 🤸‍♂️
      pagination, // Your pagination 🤸‍♂️
      onReload: () => {},
    }}
    downloadFile={(url: string) => onDownloadFile(url)} // Your download function 🤷‍♂️
  />
);