UNPKG

irisrad-ui

Version:

UI elements developered for IRIS R&D Group Inc

397 lines (389 loc) 14.4 kB
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