mirror of
https://bitbucket.org/Mattrixwv/mattrixwvreactcomponents.git
synced 2025-12-06 21:53:57 -05:00
Updated several input components
This commit is contained in:
504
src/util/InputUtils.tsx
Normal file
504
src/util/InputUtils.tsx
Normal file
@@ -0,0 +1,504 @@
|
||||
import { Button } from "$/component/button";
|
||||
import { OptionInput, SelectInput, TextInput } from "$/component/input";
|
||||
import ButtonSwitch from "$/component/input/switch/ButtonSwitch";
|
||||
import DangerSwitch from "$/component/input/switch/DangerSwitch";
|
||||
import DarkSwitch from "$/component/input/switch/DarkSwitch";
|
||||
import LightSwitch from "$/component/input/switch/LightSwitch";
|
||||
import MattrixwvSwitch from "$/component/input/switch/MattrixwvSwitch";
|
||||
import PrimarySwitch from "$/component/input/switch/PrimarySwitch";
|
||||
import SecondarySwitch from "$/component/input/switch/SecondarySwitch";
|
||||
import SuccessDangerSwitch from "$/component/input/switch/SuccessDangerSwitch";
|
||||
import SuccessSwitch from "$/component/input/switch/SuccessSwitch";
|
||||
import TertiarySwitch from "$/component/input/switch/TertiarySwitch";
|
||||
import WarningSwitch from "$/component/input/switch/WarningSwitch";
|
||||
import TextArea from "$/component/input/TextArea";
|
||||
import type { MattrixwvSwitchSize } from "$/types/Input";
|
||||
import { useState } from "react";
|
||||
import { BsCheck, BsX } from "react-icons/bs";
|
||||
|
||||
|
||||
export function SwitchContent(): React.ReactNode{
|
||||
const sizes: MattrixwvSwitchSize[] = [ "xs", "sm", "md", "lg", "xl" ];
|
||||
|
||||
|
||||
return (
|
||||
<div
|
||||
className="flex flex-col items-center justify-center gap-y-8 mt-8"
|
||||
>
|
||||
<SwitchDisplay title="Basic">
|
||||
{
|
||||
sizes.map((size) => (
|
||||
<div
|
||||
key={size}
|
||||
className="flex flex-row items-center justify-center gap-x-2"
|
||||
>
|
||||
<MattrixwvSwitch
|
||||
className="bg-gray-400 data-checked:bg-blue-600"
|
||||
knobClassName="bg-white"
|
||||
size={size}
|
||||
>
|
||||
{size} Switch
|
||||
</MattrixwvSwitch>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</SwitchDisplay>
|
||||
<SwitchDisplay title="Wide">
|
||||
{
|
||||
sizes.map((size) => (
|
||||
<div
|
||||
key={size}
|
||||
className="flex flex-row items-center justify-center gap-x-2"
|
||||
>
|
||||
<MattrixwvSwitch
|
||||
className="bg-gray-400 data-checked:bg-blue-600"
|
||||
knobClassName="bg-white"
|
||||
size={size}
|
||||
wide={true}
|
||||
offText={<span className="text-black">Off</span>}
|
||||
onText="On"
|
||||
>
|
||||
{size} Switch
|
||||
</MattrixwvSwitch>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</SwitchDisplay>
|
||||
<SwitchDisplay title="Primary">
|
||||
{
|
||||
sizes.map((size) => (
|
||||
<div
|
||||
key={size}
|
||||
className="flex flex-row items-center justify-center gap-x-2"
|
||||
>
|
||||
<PrimarySwitch
|
||||
size={size}
|
||||
>
|
||||
{size} Switch
|
||||
</PrimarySwitch>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
<div
|
||||
className="flex flex-row items-center justify-center gap-x-2"
|
||||
>
|
||||
<PrimarySwitch
|
||||
size="md"
|
||||
disabled={true}
|
||||
>
|
||||
Disabled Switch
|
||||
</PrimarySwitch>
|
||||
</div>
|
||||
<div
|
||||
className="flex flex-row items-center justify-center gap-x-2"
|
||||
>
|
||||
<PrimarySwitch
|
||||
size="md"
|
||||
disabled={true}
|
||||
checked={true}
|
||||
>
|
||||
Disabled Switch
|
||||
</PrimarySwitch>
|
||||
</div>
|
||||
</SwitchDisplay>
|
||||
<SwitchDisplay title="Secondary">
|
||||
{
|
||||
sizes.map((size) => (
|
||||
<div
|
||||
key={size}
|
||||
className="flex flex-row items-center justify-center gap-x-2"
|
||||
>
|
||||
<SecondarySwitch
|
||||
size={size}
|
||||
>
|
||||
{size} Switch
|
||||
</SecondarySwitch>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
<div
|
||||
className="flex flex-row items-center justify-center gap-x-2"
|
||||
>
|
||||
<SecondarySwitch
|
||||
size="md"
|
||||
disabled={true}
|
||||
>
|
||||
Disabled Switch
|
||||
</SecondarySwitch>
|
||||
</div>
|
||||
<div
|
||||
className="flex flex-row items-center justify-center gap-x-2"
|
||||
>
|
||||
<SecondarySwitch
|
||||
size="md"
|
||||
disabled={true}
|
||||
checked={true}
|
||||
>
|
||||
Disabled Switch
|
||||
</SecondarySwitch>
|
||||
</div>
|
||||
</SwitchDisplay>
|
||||
<SwitchDisplay title="Tertiary">
|
||||
{
|
||||
sizes.map((size) => (
|
||||
<div
|
||||
key={size}
|
||||
className="flex flex-row items-center justify-center gap-x-2"
|
||||
>
|
||||
<TertiarySwitch
|
||||
size={size}
|
||||
>
|
||||
{size} Switch
|
||||
</TertiarySwitch>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
<div
|
||||
className="flex flex-row items-center justify-center gap-x-2"
|
||||
>
|
||||
<TertiarySwitch
|
||||
size="md"
|
||||
disabled={true}
|
||||
>
|
||||
Disabled Switch
|
||||
</TertiarySwitch>
|
||||
</div>
|
||||
<div
|
||||
className="flex flex-row items-center justify-center gap-x-2"
|
||||
>
|
||||
<TertiarySwitch
|
||||
size="md"
|
||||
disabled={true}
|
||||
checked={true}
|
||||
>
|
||||
Disabled Switch
|
||||
</TertiarySwitch>
|
||||
</div>
|
||||
</SwitchDisplay>
|
||||
<SwitchDisplay title="Success">
|
||||
{
|
||||
sizes.map((size) => (
|
||||
<div
|
||||
key={size}
|
||||
className="flex flex-row items-center justify-center gap-x-2"
|
||||
>
|
||||
<SuccessSwitch
|
||||
size={size}
|
||||
>
|
||||
{size} Switch
|
||||
</SuccessSwitch>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
<div
|
||||
className="flex flex-row items-center justify-center gap-x-2"
|
||||
>
|
||||
<SuccessSwitch
|
||||
size="md"
|
||||
disabled={true}
|
||||
>
|
||||
Disabled Switch
|
||||
</SuccessSwitch>
|
||||
</div>
|
||||
<div
|
||||
className="flex flex-row items-center justify-center gap-x-2"
|
||||
>
|
||||
<SuccessSwitch
|
||||
size="md"
|
||||
disabled={true}
|
||||
checked={true}
|
||||
>
|
||||
Disabled Switch
|
||||
</SuccessSwitch>
|
||||
</div>
|
||||
</SwitchDisplay>
|
||||
<SwitchDisplay title="Warning">
|
||||
{
|
||||
sizes.map((size) => (
|
||||
<div
|
||||
key={size}
|
||||
className="flex flex-row items-center justify-center gap-x-2"
|
||||
>
|
||||
<WarningSwitch
|
||||
size={size}
|
||||
>
|
||||
{size} Switch
|
||||
</WarningSwitch>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
<div
|
||||
className="flex flex-row items-center justify-center gap-x-2"
|
||||
>
|
||||
<WarningSwitch
|
||||
size="md"
|
||||
disabled={true}
|
||||
>
|
||||
Disabled Switch
|
||||
</WarningSwitch>
|
||||
</div>
|
||||
<div
|
||||
className="flex flex-row items-center justify-center gap-x-2"
|
||||
>
|
||||
<WarningSwitch
|
||||
size="md"
|
||||
disabled={true}
|
||||
checked={true}
|
||||
>
|
||||
Disabled Switch
|
||||
</WarningSwitch>
|
||||
</div>
|
||||
</SwitchDisplay>
|
||||
<SwitchDisplay title="Danger">
|
||||
{
|
||||
sizes.map((size) => (
|
||||
<div
|
||||
key={size}
|
||||
className="flex flex-row items-center justify-center gap-x-2"
|
||||
>
|
||||
<DangerSwitch
|
||||
size={size}
|
||||
>
|
||||
{size} Switch
|
||||
</DangerSwitch>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
<div
|
||||
className="flex flex-row items-center justify-center gap-x-2"
|
||||
>
|
||||
<DangerSwitch
|
||||
size="md"
|
||||
disabled={true}
|
||||
>
|
||||
Disabled Switch
|
||||
</DangerSwitch>
|
||||
</div>
|
||||
<div
|
||||
className="flex flex-row items-center justify-center gap-x-2"
|
||||
>
|
||||
<DangerSwitch
|
||||
size="md"
|
||||
disabled={true}
|
||||
checked={true}
|
||||
>
|
||||
Disabled Switch
|
||||
</DangerSwitch>
|
||||
</div>
|
||||
</SwitchDisplay>
|
||||
<SwitchDisplay title="Dark">
|
||||
{
|
||||
sizes.map((size) => (
|
||||
<div
|
||||
key={size}
|
||||
className="flex flex-row items-center justify-center gap-x-2"
|
||||
>
|
||||
<DarkSwitch
|
||||
size={size}
|
||||
>
|
||||
{size} Switch
|
||||
</DarkSwitch>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
<div
|
||||
className="flex flex-row items-center justify-center gap-x-2"
|
||||
>
|
||||
<DarkSwitch
|
||||
size="md"
|
||||
disabled={true}
|
||||
>
|
||||
Disabled Switch
|
||||
</DarkSwitch>
|
||||
</div>
|
||||
<div
|
||||
className="flex flex-row items-center justify-center gap-x-2"
|
||||
>
|
||||
<DarkSwitch
|
||||
size="md"
|
||||
disabled={true}
|
||||
checked={true}
|
||||
>
|
||||
Disabled Switch
|
||||
</DarkSwitch>
|
||||
</div>
|
||||
</SwitchDisplay>
|
||||
<SwitchDisplay title="Light">
|
||||
{
|
||||
sizes.map((size) => (
|
||||
<div
|
||||
key={size}
|
||||
className="flex flex-row items-center justify-center gap-x-2"
|
||||
>
|
||||
<LightSwitch
|
||||
size={size}
|
||||
>
|
||||
{size} Switch
|
||||
</LightSwitch>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
<div
|
||||
className="flex flex-row items-center justify-center gap-x-2"
|
||||
>
|
||||
<LightSwitch
|
||||
size="md"
|
||||
disabled={true}
|
||||
>
|
||||
Disabled Switch
|
||||
</LightSwitch>
|
||||
</div>
|
||||
<div
|
||||
className="flex flex-row items-center justify-center gap-x-2"
|
||||
>
|
||||
<LightSwitch
|
||||
size="md"
|
||||
disabled={true}
|
||||
checked={true}
|
||||
>
|
||||
Disabled Switch
|
||||
</LightSwitch>
|
||||
</div>
|
||||
</SwitchDisplay>
|
||||
<SwitchDisplay title="Success Danger">
|
||||
{
|
||||
sizes.map((size) => (
|
||||
<div
|
||||
key={size}
|
||||
className="flex flex-row items-center justify-center gap-x-2"
|
||||
>
|
||||
<SuccessDangerSwitch
|
||||
size={size}
|
||||
>
|
||||
{size} Switch
|
||||
</SuccessDangerSwitch>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
<div
|
||||
className="flex flex-row items-center justify-center gap-x-2"
|
||||
>
|
||||
<SuccessDangerSwitch
|
||||
size="md"
|
||||
disabled={true}
|
||||
>
|
||||
Disabled Switch
|
||||
</SuccessDangerSwitch>
|
||||
</div>
|
||||
<div
|
||||
className="flex flex-row items-center justify-center gap-x-2"
|
||||
>
|
||||
<SuccessDangerSwitch
|
||||
size="md"
|
||||
disabled={true}
|
||||
checked={true}
|
||||
>
|
||||
Disabled Switch
|
||||
</SuccessDangerSwitch>
|
||||
</div>
|
||||
</SwitchDisplay>
|
||||
<SwitchDisplay title="Button">
|
||||
<div
|
||||
className="flex flex-row items-center justify-center gap-x-2"
|
||||
>
|
||||
<ButtonSwitch
|
||||
className="cursor-pointer transition-all duration-250"
|
||||
onNode={<Button size="sm" shape="square" className="bg-green-600 border-green-600"><BsCheck size={32}/></Button>}
|
||||
offNode={<Button size="sm" shape="square" className="bg-red-600 border-red-600"><BsX size={32}/></Button>}
|
||||
/>
|
||||
</div>
|
||||
</SwitchDisplay>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SwitchDisplay({
|
||||
title,
|
||||
children
|
||||
}:{
|
||||
title: React.ReactNode;
|
||||
children: React.ReactNode;
|
||||
}){
|
||||
return (
|
||||
<div
|
||||
className="flex flex-col items-center justify-center gap-y-2"
|
||||
>
|
||||
<h2 className="text-2xl">{title}</h2>
|
||||
<div
|
||||
className="flex flex-row items-center justify-center gap-x-4"
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function TextContent(){
|
||||
const selectOptions = [
|
||||
{value: "1", label: "Test 1"},
|
||||
{value: "2", label: "Test 2"},
|
||||
{value: "3", label: "Test 3"},
|
||||
{value: "4", label: "Test 4"},
|
||||
{value: "5", label: "Test 5"},
|
||||
{value: "6", label: "Test 6"},
|
||||
{value: "7", label: "Test 7"},
|
||||
{value: "8", label: "Test 8"},
|
||||
{value: "9", label: "Test 9"},
|
||||
{value: "10", label: "Test 10"},
|
||||
{value: "11", label: "Test 11"},
|
||||
{value: "12", label: "Test 12"},
|
||||
{value: "13", label: "Test 13"},
|
||||
{value: "14", label: "Test 14"},
|
||||
{value: "15", label: "Test 15"},
|
||||
{value: "16", label: "Test 16"},
|
||||
{value: "17", label: "Test 17"},
|
||||
{value: "18", label: "Test 18"},
|
||||
{value: "19", label: "Test 19"}
|
||||
];
|
||||
|
||||
const [ selected, setSelected ] = useState(selectOptions[0]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="flex flex-col items-center justify-center gap-y-8 mt-8"
|
||||
>
|
||||
<TextDisplay title="Text Input">
|
||||
<TextInput placeholder="Text Input" labelClassName="bg-(--bg-color)"/>
|
||||
</TextDisplay>
|
||||
<TextDisplay title="Text Area">
|
||||
<TextArea placeholder="Textarea" labelClassName="bg-(--bg-color)"/>
|
||||
</TextDisplay>
|
||||
<TextDisplay title="Select">
|
||||
<SelectInput label={selected.label} onChange={(newValue) => setSelected(selectOptions.find((option) => option.value === newValue) || selectOptions[0])}>
|
||||
{
|
||||
selectOptions.map((option) => (
|
||||
<OptionInput
|
||||
key={option.value}
|
||||
className="bg-neutral-600 hover:bg-neutral-700"
|
||||
value={option.value}
|
||||
children={option.label}
|
||||
/>
|
||||
))
|
||||
}
|
||||
</SelectInput>
|
||||
</TextDisplay>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function TextDisplay({
|
||||
title,
|
||||
children
|
||||
}:{
|
||||
title: React.ReactNode;
|
||||
children: React.ReactNode;
|
||||
}){
|
||||
return (
|
||||
<div
|
||||
className="flex flex-col items-center justify-center gap-y-2 w-full"
|
||||
>
|
||||
<h2 className="text-2xl">{title}</h2>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user