@dhl-parcel/dhl-parcel-upload-form

DHL upload form

Stats

StarsIssuesVersionUpdatedCreatedSize
@dhl-parcel/dhl-parcel-upload-form
0.1.63 years ago3 years agoMinified + gzip package size for @dhl-parcel/dhl-parcel-upload-form in KB

Readme

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

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.