dromo

You can view a live demo here

Install

To get add Dromo to your own project:

npm install --save dromo-uploader-react

Usage

Check out our developer documentation here

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: "[email protected]",
    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<IColumnHookInput>) => {
      const newValues = new Array<IColumnHookOutput>();
      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 (
    <div>
      <div>
        <DromoUploader
          licenseKey="TEST_KEY"
          style={{ padding: 15, border: 0 }}
          settings={settings}
          fields={fields}
          user={user}
          rowHooks={rowHooks}
          columnHooks={columnHooks}
          onResults={(data: any, metadata: IResultMetadata) => setResults(JSON.stringify(data, null, 2))}
        >
          Launch Dromo
        </DromoUploader>
      </div>
      <textarea readOnly id="response" value={results} />
    </div>
  );
}