dromo


You can view a live demo here

Install

To get add Dromo to your own project:

``bash
npm install --save dromo-uploader-react
`

Usage

Check out our developer documentation here

`tsx
import React, { useState } from "react";
import { isoCountries } from "./DemoData";
import "./styles.css";

import DromoUploader from "dromo-uploader-react";
import { IColumnHookInput, IColumnHookOutput, IDeveloperField, IDeveloperSettings, IRowHookInput, IRowHookOutput } from "../../dist/interfaces";

export default function App() {
const [results, setResults] = useState("");

const fields: IDeveloperField[] = [
// required field
{
label: "Geography",
key: "geography",
alternateMatches: ["region"],
description: "Region of the sale",
validators: [{ validate: "required" }]
},
{
label: "Country",
key: "country"
},
// unique
{
label: "Order Number",
key: "orderNumber",
validators: [{ validate: "unique" }]
},
{
label: "Priority",
key: "priority"
},
// boolean
{
label: "Sold Offline?",
key: "soldOffline",
type: "checkbox",
validators: [
{
validate: "regex_match",
regex: "^$|^(1|0|yes|no|true|false|on|off)$",
regexOptions: { ignoreCase: true }
}
]
},
// options
{
label: "Type",
key: "type",
type: "select",
selectOptions: [
{ label: "Food", value: "food" },
{ label: "Clothing", value: "clothing" },
{ label: "Household Items", value: "household_items" },
{ label: "Produce", value: "produce" }
],
validators: [{ validate: "required" }]
},
// simple regex
{
label: "Amount Sold",
key: "amountSold",
validators: [{ validate: "regex_match", regex: "^[0-9]*$" }]
},
{
label: "Profit",
key: "profit"
}
];

const settings: IDeveloperSettings = {
importIdentifier: "Sales",
displayEncoding: true,
allowInvalidSubmit: true,
backendSync: false,
manualInputDisabled: false,
manualInputOnly: false,
allowCustomFields: true,
maxRecords: null,
developmentMode: true
};

const user = {
id: "1",
name: "Jane Doe",
email: "jane@dromo.io",
companyId: "Dromo",
companyName: "12345"
};

const rowHooks = [(record: IRowHookInput) => {
const newRecord: IRowHookOutput = record;

if (record.index < 10) {
if (newRecord.row.geography) {
newRecord.row.geography.info = [{
message: "Prepend 0 to value",
level: "error"
}];
newRecord.row.geography.value = "0" + newRecord.row.geography.value;
}
}

return newRecord;
}];

const columnHooks = [{
fieldName: "country",
callback: (values: Array) => {
const newValues = new Array();
values.forEach((row) => {
// Update row if ISO country code exists for the
// existing country name
if (isoCountries[row.value]) {
const newRow: IColumnHookOutput = {
index: row.index,
value: isoCountries[row.value],
info: [{
message: "Update to use ISO country code",
level: "info"
}]
};

newValues.push(newRow);
}
});

return newValues;
}
}];

return (