parcel-terminal v1.0.2

parcel-terminal

React component for displaying parcel pick up terminals list from json file

Install

npm install --save parcel-terminal

Usage example

import React, { useState } from 'react'

import ParcelTerminals from 'parcel-terminal'
import data from './locations'

const App = () => {
  const [selectedCity, setSelectedCity] = useState('')
  const [selectedTerminal, setSelectedTerminal] = useState('')
  const filteredData = data.filter(location => location.A0_NAME === 'LT')

  const handleCityChange = (event) => {
    setSelectedCity(event.target.value)
  }

  const handleTerminalChange = (event) => {
    setSelectedTerminal(event.target.value)
  }

  return (
    <React.Fragment>
      <p>Selected city: {selectedCity}</p>
      <p>Selected terminal: {selectedTerminal}</p>

      <ParcelTerminals
        data={filteredData}
        cityLabel="Select city"
        terminalLabel="Select terminal"
        emptySelectionLabel="-----"
        dataSourceCityKey="A1_NAME"
        dataSourceTerminalKey="A2_NAME"
        selectedCity={selectedCity}
        selectedTerminal={selectedTerminal}
        onCityChange={handleCityChange}
        onTerminalChange={handleTerminalChange}
      />
    </React.Fragment>
    )
};

export default App

Available properties

• cityLabel - label above city input

• terminalLabel - label above terminal input

• data - json terminals data (see below for examples)

• variant - select input style variant. Possible options: "outlined" or "standard". "Standard" is default input style

• emptySelectionLabel - empty select box input label

• cityHelperText - text which is shown below city input

• terminalHelperText - text which is shown below terminal input

• cityError - city input error message

• terminalError - terminal input errors message

• inline - if set to true, city and terminal select inputs will be displayed inline

• dataSourceCityKey - city property name in provided data source

• dataSourceTerminalKey - terminal property name in provided data source

• onCityChange - function which is executed on city change

• onTerminalChange - function which is executed on terminal change

• selectedCity - selected city value

• selectedTerminal - selected terminal value

JSON data example

[
    {
        "A1_NAME": "Kaunas",
        "A2_NAME": "K.Donelaičio g. 44A, Kaunas"
    },
    {
        "A1_NAME": "Kaunas",
        "A2_NAME": "Panerių g. 166, Kaunas"
    },
    {
        "A1_NAME": "Kaunas",
        "A2_NAME": "Vytauto pr. 11, Kaunas"
    },
    {
        "A1_NAME": "Švenčionys",
        "A2_NAME": "Vilniaus g. 37, Švenčionys"
    },
    {
        "A1_NAME": "Švenčionėliai",
        "A2_NAME": "Žemutinė g. 26, Švenčionėliai, Švenčionių raj."
    },
    {
        "A1_NAME": "Švėkšna",
        "A2_NAME": "Bažnyčios g. 7, Švėkšna, Šilutės raj."
    },
    {
        "A1_NAME": "Žiežmariai",
        "A2_NAME": "Žaslių g. 78, Žiežmariai, Kaišiadorių raj."
    }
]

Other info

This component is only responsible for displaying city and terminal options from provided data source. Validation, saving and other functions should be handled by your application.

Components are styled with Material-UI.

Example application

Example application with possible options is in example folder.

You can start example application with npm start inside example folder.

Example application screenshot:

License

MIT © lukenzo