irisrad-ui
Version:
UI elements developered for IRIS R&D Group Inc
88 lines (83 loc) • 3.32 kB
JavaScript
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",
// };