irisrad-ui
Version:
UI elements developered for IRIS R&D Group Inc
397 lines (389 loc) • 14.4 kB
JavaScript
import React, { useState } from "react";
import logo from "../../assets/images/iris_logo.png";
import { IrisHeader } from "../irisHeader/IrisHeader";
import { IrisSideNav } from "../irisSideNav/IrisSideNav";
import { IrisGrid } from "../irisGrid/IrisGrid";
import { IrisSelect } from "../irisSelect/IrisSelect";
import { IrisInput } from "../irisInput/IrisInput";
import { IrisMultiSelect } from "../irisMultiSelect/IrisMultiSelect";
import { IrisButton } from "../irisButton/IrisButton";
import { IrisModal } from "../irisModal/IrisModal";
import { IrisDropDownMenu } from "../irisDropDownMenu/IrisDropDownMenu";
const devices = [
{ 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 singleSelectOptions = [
{
value: "id of Alabamaaaa",
label: "Alabamaaaa ",
},
{ value: "id of Alaska", label: "Alaska" },
{ value: "id of Arizona", label: "Arizona" },
{ value: "id of Arkansas", label: "Arkansas" },
{ value: "id of California", label: "California" },
{ value: "id of Colorado", label: "Colorado" },
{ value: "id of Connecticut", label: "Connecticut" },
{ value: "id of Delaware", label: "Delaware" },
{ value: "id of District Of Columbia", label: "District Of Columbia" },
{ value: "id of Florida", label: "Florida" },
{ value: "id of Georgia", label: "Georgia" },
{ value: "id of Hawaii", label: "Hawaii" },
{ value: "id of Idaho", label: "Idaho" },
{ value: "id of Illinois", label: "Illinois" },
{ value: "id of Indiana", label: "Indiana" },
{ value: "id of Iowa", label: "Iowa" },
{ value: "id of Kansas", label: "Kansas" },
{ value: "id of Kentucky", label: "Kentucky" },
{ value: "id of Louisiana", label: "Louisiana" },
{ value: "id of Maine", label: "Maine" },
{ value: "id of Maryland", label: "Maryland" },
{ value: "id of Massachusetts", label: "Massachusetts" },
{ value: "id of Michigan", label: "Michigan" },
{ value: "id of Minnesota", label: "Minnesota" },
{ value: "id of Mississippi", label: "Mississippi" },
{ value: "id of Missouri", label: "Missouri" },
{ value: "id of Montana", label: "Montana" },
{ value: "id of Nebraska", label: "Nebraska" },
{ value: "id of Nevada", label: "Nevada" },
{ value: "id of New Hampshire", label: "New Hampshire" },
{ value: "id of New Jersey", label: "New Jersey" },
{ value: "id of New Mexico", label: "New Mexico" },
{ value: "id of New York", label: "New York" },
{ value: "id of North Carolina", label: "North Carolina" },
{ value: "id of North Dakota", label: "North Dakota" },
{ value: "id of Ohio", label: "Ohio" },
{ value: "id of Oklahoma", label: "Oklahoma" },
{ value: "id of Oregon", label: "Oregon" },
{ value: "id of Pennsylvania", label: "Pennsylvania" },
{ value: "id of Rhode Island", label: "Rhode Island" },
{ value: "id of South Carolina", label: "South Carolina" },
{ value: "id of South Dakota", label: "South Dakota" },
{ value: "id of Tennessee", label: "Tennessee" },
{ value: "id of Texas", label: "Texas" },
{ value: "id of Utah", label: "Utah" },
{ value: "id of Vermont", label: "Vermont" },
{ value: "id of Virginia", label: "Virginia" },
{ value: "id of Washington", label: "Washington" },
{ value: "id of West Virginia", label: "West Virginia" },
{ value: "id of Wisconsin", label: "Wisconsin" },
{ value: "id of Wyoming", label: "Wyoming" },
];
// export for StoryBook as a tab
const navLinks = [
{
label: "HOME",
iconProps: {
size: "medium",
iconTitle: "local_fire_department",
variant: "outlined",
},
onClick: () => location.replace("https://www.w3schools.com"),
},
{
label: "GIS MAP",
// onClick: () => alert("GIS MAP"),
iconProps: {
size: "medium",
iconTitle: "place",
variant: "outlined",
},
onClick: () => {},
},
{
label: "HEAT",
iconProps: {
size: "medium",
iconTitle: "thermostat",
variant: "outlined",
},
onClick: () => {},
},
];
const hiddenLinks = [
{ label: "Profile", onClick: () => alert("profile") },
{ label: "My Account", onClick: () => alert("My Account") },
{ label: "Logout", onClick: () => alert("Logout") },
];
export default {
title: "Example/Home", // could be represent on the url, example could be a root of the node
parameters: {
layout: "none",
},
};
export const Primary = (args) => {
const [selectedValue, setSelectedValue] = useState(1);
const [inputVale, setInputVale] = useState("iris custom input");
const [selectableInput, setSelectableInput] = useState("");
const [openModal, setOpenModal] = useState(false);
const [multiSelectValues, setMultiSelectValues] = useState([]);
const [options, setOptions] = useState(singleSelectOptions);
const [multiOptions, setMultiOptions] = useState(singleSelectOptions);
return (
<div>
<div>
<IrisHeader
userName="iris_admin"
hiddenLinks={hiddenLinks}
logoComponent={
<a href="https://www.irisradgroup.com/" target="_blank">
<img
src={logo}
alt="iris-logo"
className="logo-img"
height={50}
/>
</a>
}
actionButtons={[
<IrisButton
size="small"
iconProps={{
iconTitle: "summarize",
size: "small",
}}
onClick={() => {
const a = [...singleSelectOptions];
a.splice(0, 10);
setOptions(a);
// setMultiOptions(a);
}}
>
set
</IrisButton>,
<IrisButton
size="small"
iconProps={{
iconTitle: "assessment",
size: "small",
}}
color="secondary"
>
Report
</IrisButton>,
]}
headerTitle="Iris Labeling Title"
fadeInContent={{
toggleBtnProps: {
btnTitle: "Search",
size: "small",
iconProps: {
iconTitle: "search",
size: "small",
},
},
element: (
<IrisGrid container justifyContent="center">
<IrisGrid item>
<IrisInput autoFocus label="Search 0" />
</IrisGrid>
<IrisGrid item>
<IrisInput label="Search 1" />
</IrisGrid>
<IrisGrid item>
<IrisInput label="Search 2" />
</IrisGrid>
<IrisGrid item>
<IrisInput label="Search 3" />
</IrisGrid>
<IrisGrid item>
<IrisInput label="Search 4" />
</IrisGrid>
<IrisGrid item>
<IrisInput label="Search 5" />
</IrisGrid>
</IrisGrid>
),
}}
/>
</div>
<div
style={{
display: "flex",
marginTop: "5px",
height: "calc(100vh - 75px)",
}}
>
<IrisSideNav maxWidth={200} links={navLinks} minWidth={60} />
<div
style={{
flexGrow: 1,
padding: "2em",
overflowY: "scroll",
}}
>
<IrisModal
open={openModal}
onClose={() => setOpenModal(false)}
></IrisModal>
<IrisGrid container>
<IrisGrid item sm={2} xs={12}>
<p>selected {selectedValue}</p>
<IrisSelect
label="Please select a state"
onChange={(e) => {
console.log(`e`, e);
setSelectedValue(e);
}}
options={devices}
labelField="label"
valueField="value"
value={selectedValue}
/>
</IrisGrid>
<IrisGrid item sm={2} xs={12}>
<p>
<em>demo input value:</em> {inputVale}
</p>
<IrisInput
value={inputVale}
onChange={(e) => setInputVale(e.target.value)}
label="Name"
/>
</IrisGrid>
<IrisGrid item sm={2} xs={12}>
<p>
<em>seletable input:</em> {selectableInput}
</p>
<IrisInput
dataList={{
title: "Nice to see you",
data: [
"Adams",
"Hasbeeb",
"Marc",
"Kevin",
"Ye",
"Emil",
"David M",
"David K",
"Lucien",
],
}}
label="with data list"
onChange={(e) => setSelectableInput(e.target.value)}
/>
</IrisGrid>
<IrisGrid className="asdf" item sm={6} xs={12}>
<p>
<em>multi select values:</em> {multiSelectValues}
</p>
<IrisMultiSelect
onChange={(e) => {
setMultiSelectValues([...e]);
}}
label="Please select some states"
options={multiOptions}
labelField="label"
valueField="value"
// values={multiSelectValues}
/>
</IrisGrid>
<IrisGrid container xs={2} alignItems="center">
<IrisButton
onClick={() => setOpenModal(true)}
iconProps={{
size: "medium",
variant: "outlined",
iconTitle: "local_fire_department",
}}
>
Icon button
</IrisButton>
</IrisGrid>
<IrisGrid container xs={2} alignItems="center">
<IrisButton
color="secondary"
onClick={() => setOpenModal(true)}
iconProps={{
size: "medium",
variant: "outlined",
iconTitle: "local_fire_department",
}}
>
Icon button
</IrisButton>
</IrisGrid>
<IrisGrid container item xs={2} alignItems="center">
<IrisButton onClick={() => setOpenModal(true)} disabled>
simple button
</IrisButton>
</IrisGrid>
<IrisGrid item xs={12}>
<div
style={{
width: "100%",
backgroundColor: "teal",
display: "flex",
alignItems: "center",
}}
>
<IrisDropDownMenu
menuItems={[
<a href="#home">Home</a>,
<a href="#about">About</a>,
<a href="#contact">Contact</a>,
]}
menuProps={{
alignment: "right",
shift: 0,
}}
/>
</div>
</IrisGrid>
<IrisGrid item xs={12}>
<div
style={{
width: "100%",
backgroundColor: "teal",
}}
>
<IrisDropDownMenu
menuItems={[
<a href="#home">Home</a>,
<a href="#about">About</a>,
<a href="#contact">Contact</a>,
]}
menuProps={{
alignment: "left",
shift: 100,
}}
/>
</div>
</IrisGrid>
</IrisGrid>
</div>
</div>
</div>
);
};
// define a variant of the ui component