dhl-upload-form

This module exposes a simple form component that handles the upload and parsing of CSV files, with the option to map the parsed data to a predefined structure.

Install

npm i --save dhl-parcel-upload-form

Impression

Upload | Schema :----------------------------------:|:----------------------------------: |

Available Scripts

In the project directory, you can run:

yarn run build

Builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes. Your app is ready to be deployed!

yarn run flow

Check all flow types in the application for possible errors.

yarn run lint

Perform a linting operation to check for possible errors.

yarn run watch

Run continuous iterations of the build process for development.

API

Schema props

| name | description | type | default | |----------|----------------|-----------|------------| |type | a unique name for the component, allows for multiple instances of the component | string| 'import' | |category | used to name and filter schema types, can differ from type, see according parameter in postSchemas | string | 'import' | |fields | (optional) names of the fields | Array<string>| [] | |mandatoryFields | required names of the fields, the component will validate on this | Array<string> | [] | |depends | fields with names that equal to a key of this prop will be disabled unless first the field that corresponds to the value of this prop is selected| {[string]: string} | {} | |setMapping | function that will be called with the result of the parsed and mapped file| (result: {[string]: any}) => void | | |normalize | function that will be used to properly format/ trim a value before persisting.| (string, string, string) => string | (field: string, depends: string, val: string) => val | |getRegexForField | function that will be called to return the regex rules for validation of a field name, the second parameter is usally used to pass a countryCode on wich the regex rule should be based | (string, string) => RegExp | () => null | |showToastMessage | function that will be called to display a message and action string| (string, string) => void | | |getSchemas | Promise that will resolve to a schema array used for presets, see the mapping param in postSchemas for details on this array| Promise | | |postSchemas | Promise that wil resolve to a Response, it should be used to post 'preset schemes' that need to be persisted, type and category are used to filter and tag the preset | (schemes: Array< {id: string, category: string, name: string, matches: {[string]: string}}>, mapping: Array<any>, name: string, category: string)=> Promise | Promise.resolve | |tr | function that will be called to display a translated value. It will be passed a translation key that can to be mapped to a value, locale is not passed.| str => str | |getTranslationMapping | function that will be called by tr callback to allow for for the translation key used in the component to be mapped, this is usefull if you can't modify your translation file, or if it has prefixed keys. | string => string | (str: string) => str |