simple-ui-components
Simple ui components for all react basic components like Autocomplete, Button, Dialog and Form all in one package.
Install
npm i simple-ui-components@latest
Tooltip
import { SimpleTooltip } from "simple-ui-components";
const { TooltipContainer } = SimpleTooltip;
<Tooltip
text="Tooltip Content"
placement="left"
space={10}
disabled={false}
click={true} // if you want to hide tooltip on mouse click
>
Hover me
</Tooltip>;
<TooltipContainer />; // call once in root file if you are using tooltip do not call more then one time;
Button
import { Button } from "simple-ui-components";
<Button
className="myClass"
theme="default"
type="button"
clicked={() => console.log("Button has been clicked!")}
icon={""} // you add SVG icon
text="Click me"
/>;
Dialog
import { SimpleDialog } from "simple-ui-components";
const {Dialog, DialogBody, DialogFooter} = SimpleDialog;
<Dialog
close={()=>}
title="Simple dialog box"
theme="default"
size="md"
open={true}
className="myClass"
>
<DialogBody
className="myClass"
>
Dialog box body content.
</DialogBody>
<DialogFooter
multiple={true}
className="myClass"
>
Dialog box footer content.
</DialogFooter>
</Dialog>
Autocomplete
import { Autocomplete, SimpleForm } from "simple-ui-components";
const { InputGroup } = SimpleForm;
<div className="md default">
<InputGroup type="autocomplete" placeholder="Input Name">
<Autocomplete
id="testing"
list={[
{
label: "One",
id: "one",
icon: "https://unprint.pt/static/media/logo.4af0ed03.png",
color: "#000",
},
{
label: "Two",
id: "two",
icon: "https://unprint.pt/static/media/logo.4af0ed03.png",
color: "#000",
},
{
label: "Three",
id: "three",
icon: "https://unprint.pt/static/media/logo.4af0ed03.png",
color: "#000",
},
]}
change={() => console.log("change handler")}
value={[
{
label: "Three",
id: "three",
icon: "https://unprint.pt/static/media/logo.4af0ed03.png",
color: "#000",
},
]}
placeholder="Placeholder text"
inputPlaceholder="Input search placeholder"
emptyText="List is empty"
multiple={false}
clear={true}
selectedCallback={true}
secondaryOption="label" // if you want to add secondary option
iconText={true} // if you want to display short label as icon
/>
</InputGroup>
</div>;
Form
import { SimpleForm, SimpleUtility } from "simple-ui-components";
import ptLocale from "date-fns/locale/pt";
import { DatePicker, MuiPickersUtilsProvider } from "@material-ui/pickers";
import DateFnsUtils from "@date-io/date-fns";
import { MaterialUiPickersDate } from "@material-ui/pickers/typings/date";
type autocompleteType = {
label: string,
id: string | number,
icon?: string,
color?: string
};
type objectTypes = {
dateOfBirth?: Date,
hobbies?: autocompleteType[],
};
const {
UpdateObject,
UpdateArray,
ShortArray,
GetIndexBy,
ShortNameGenerate,
GetUniqueId,
} = SimpleUtility;
const { SimplePreventAlphabet, SimpleOnBlur, Message, Form, InputGroup } =
SimpleForm;
const [data, setData] =
useState <
objectTypes >
{
dateOfBirth: new Date("2021-07-07"),
hobbies: [
{
label: 'One',
id: 'one',
icon:'https://unprint.pt/static/media/logo.4af0ed03.png',
color:'#000'
},
],
};
const onSubmit = () => console.log(data);
const inputChangeHandler = (e: any) =>
setData((prev) => UpdateObject(prev, { [e.target.name]: e.target.value }));
const dateChangeHandler = (date: MaterialUiPickersDate) =>
setData((prev) => UpdateObject(prev, { dateOfBirth: date }));
const selectChangeHandler = (e: React.ChangeEvent<HTMLSelectElement>) =>
setData((prev) => UpdateObject(prev, { occupation: e.target.value }));
const autocompleteChangeHandler = (data: autocompleteType[]) =>
setData((prev) => UpdateObject(prev, { hobbies: data }));
const checkboxChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) =>
setData((prev) => UpdateObject(prev, { [e.target.name]: e.target.checked }));
const getUploadedFileHandler = (file:File|string|null)=>setData((prev) => UpdateObject(prev, { file: file }))
return (
<Form
size="md"
layout="outline"
onSubmit={(e: React.FormEvent<HTMLFormElement>) => e.preventDefault()}
>
<InputGroup
name="fullName"
placeholder="Full Name"
inputElement={{
name: "fullName", // must have name
type: "text", // must have type
onChange: inputChangeHandler,
}}
/>
<InputGroup
type="date"
name="dateOfBirth"
placeholder="Date of birth material"
>
<MuiPickersUtilsProvider utils={DateFnsUtils} locale={ptLocale}>
<DatePicker
name="dateOfBirth"
format="yyyy-MM-dd"
views={["year", "month", "date"]}
onChange={dateChangeHandler}
value={data.dateOfBirth}
InputProps={{ disableUnderline: true }}
/>
</MuiPickersUtilsProvider>
</InputGroup>
<InputGroup
placeholder="Age"
inputElement={{
name: "age", // must have name
type: "number", // must have type
onChange: inputChangeHandler,
}}
/>
<InputGroup
placeholder="Email"
inputElement={{
name="email" // must have name
type: "email", // must have title
onChange: inputChangeHandler,
}}
/>
<InputGroup
type="select"
name="occupation" // must have name
placeholder="Occupation"
inputElement={{
defaultValue: "Programmer",
options: [
{ value: "Designer", label: "Designer" },
{ value: "Programmer", label: "Programmer" },
], // options must have value and label.
onChange: selectChangeHandler,
}}
/>
<InputGroup
type="autocomplete"
name="hobbies"
placeholder="hobbies"
inputElement={{
id: "hobbies", // id should be unique.
list: [
{
label: "One",
id: "one",
color:'#000000',
icon:'icon.png'
},
{ label: "Two",
id: "two"
color:'#000000'
icon:'icon.png'
},
{ label: "Three",
id: "three"
color:'#000000'
icon:'icon.png'
},
], // list must have label and id.
change: autocompleteChangeHandler,
value: data.hobbies, // array[] || undefined.
placeholder: "hobbies...", // String | null | undefined
inputPlaceholder: "search hobbies...", // String | null | undefined
emptyText: "No hobbies to display", // String | null | undefined
multiple: true, // true | false | null | undefined
clear: true, // true | false | null | undefined
secondaryOption:"label" // if you want to add secondary option or undefined
iconText:true // if you want to display short label as icon
}}
/>
<InputGroup
type="password"
placeholder="Password"
inputElement={{
id: "password", // id should be unique.
autoComplete: "password-new",
onChange: inputChangeHandler,
}}
/>
<InputGroup
type="radio" // 'radio' | 'radio-row'
name="gender" // must have name
placeholder="Gender"
inputElement={{
onChange: inputChangeHandler,
options: [
{ value: "Male", label: "Male" },
{ value: "Female", label: "Female" },
], // must have value and label
}}
/>
<InputGroup
type="checkbox"
name="privacy" // must have name
placeholder="Privacy"
inputElement={{
onChange: checkboxChangeHandler,
label: "Accept all privacy",
}}
/>
<InputGroup
type="file"
placeholder="Upload File"
inputElement={{
feedbackText: (e: string) =>
`Document <u><b>${e}</b></u> has been successfully uploaded.`, // or String | null | undefined
labelText: "Upload",
id: "myFile", // id should be unique.
Uploaded: getUploadedFileHandler,
format: "base64", // 'file' | 'base64' | null | undefined
clear: true, // true | false | null | undefined
}}
/>
<InputGroup
type="textarea"
name="feedback"
placeholder="feedback"
inputElement={{
onChange: inputChangeHandler,
rows: 10, // Number
}}
/>
<input type="submit" onClick={onSubmit} />
</Form>
);
Author
Nimesh Deuja