UNPKG

irisrad-ui

Version:

UI elements developered for IRIS R&D Group Inc

88 lines (83 loc) 3.32 kB
import React, { useState } from "react"; import { IrisSelect } from "./IrisSelect"; // ui element // export for StoryBook as a tab export default { title: "Example/IrisSelect", // could be represent on the url, example could be a root of the node component: IrisSelect, }; const Template = (args) => { const states = [ { value: 0, cityId: 0, label: "N / A", cityName: "N / A" }, { value: 17, label: "Disenrolled Device", cityId: 5, cityName: "TestCity" }, { value: 8, label: "Disenrolled Device", cityId: 5, cityName: "TestCity" }, { value: 3, label: "Disenrolled Device", cityId: 5, cityName: "TestCity" }, { value: 18, label: "Disenrolled Device", cityId: 5, cityName: "TestCity" }, { value: 5, label: "Disenrolled Device", cityId: 5, cityName: "TestCity" }, { value: 9, label: "Disenrolled Device", cityId: 5, cityName: "TestCity" }, { value: 24, label: "FORMER-HAMILTON-1", cityId: 5, cityName: "TestCity" }, { value: 20, label: "GooglePixel 3a XL", cityId: 5, cityName: "TestCity" }, { value: 4, label: "HAMILTON-2", cityId: 3, cityName: "Hamilton" }, { value: 27, label: "Kevin-Test", cityId: 5, cityName: "TestCity" }, { value: 14, label: "London-1(2 - 01-033)", cityId: 1, cityName: "London" }, { value: 15, label: "London-2 (3 - 70-091)", cityId: 1, cityName: "London", }, { value: 6, label: "London-4 (5 - 01-068)", cityId: 1, cityName: "London" }, { value: 1, label: "London-5 (4 - 01-165)", cityId: 1, cityName: "London" }, { value: 11, label: "London-Test", cityId: 3, cityName: "Hamilton" }, { value: 10, label: "Orangeville-1", cityId: 6, cityName: "Orangeville" }, { value: 7, label: "Orangeville-2", cityId: 6, cityName: "Orangeville" }, { value: 16, label: "STOLEN - London-3 (1)", cityId: 1, cityName: "London", }, { value: 13, label: "TEST - Lucien", cityId: 5, cityName: "TestCity" }, { value: 12, label: "TEST - Rafael", cityId: 5, cityName: "TestCity" }, { value: 21, label: "TEST - Sam", cityId: 5, cityName: "TestCity" }, { value: 25, label: "Thiago's Personal Device", cityId: 5, cityName: "TestCity", }, { value: 26, label: "Tom Patrol ModeTest", cityId: 5, cityName: "TestCity", }, { value: 19, label: "Unenrolled Device", cityId: 5, cityName: "TestCity" }, { value: 23, label: "Ye - Test", cityId: 3, cityName: "Hamilton" }, ]; const [selectedValue, setSelectedValue] = useState("Washington"); return ( <div> <h2 style={{ marginBottom: "2em" }}>selected {selectedValue}</h2> <IrisSelect label="Please select a state" // onChange={(e) => setSelectedValue(e)} options={states} value={selectedValue} labelField="label" valueField="value" /> </div> ); }; // const Template = (args) => <div>hello</div>; // define a variant of the ui component export const Primary = Template.bind({}); // assign arguement (props) to render the ui component Primary.args = { // primary: true, // label: "Button", }; // export const Secondary = Template.bind({}); // Secondary.args = { // label: "Button", // };