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:
@@ -17,25 +17,23 @@ export default function SelectInput(props: SelectInputProps){
|
|||||||
<Listbox
|
<Listbox
|
||||||
value={value}
|
value={value}
|
||||||
onChange={onChange}
|
onChange={onChange}
|
||||||
>
|
|
||||||
<div
|
|
||||||
className="relative w-full"
|
|
||||||
>
|
>
|
||||||
<ListboxButton
|
<ListboxButton
|
||||||
className={clsx(
|
className={clsx(
|
||||||
"flex flex-row items-center justify-between w-full",
|
"group relative flex flex-row items-center justify-between w-full",
|
||||||
"outline rounded px-2 py-1"
|
"border-2 px-2 py-1 rounded-lg"
|
||||||
|
//"not-data-open:rounded-lg data-open:rounded-t-lg"
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<span>{label}</span>
|
<span>{label}</span>
|
||||||
<span><BsChevronDown size={22}/></span>
|
<span className="block group-data-open:rotate-180 transition-transform duration-250"><BsChevronDown size={22}/></span>
|
||||||
</ListboxButton>
|
</ListboxButton>
|
||||||
<ListboxOptions
|
<ListboxOptions
|
||||||
className="absolute w-full max-h-60 overflow-scroll z-10 outline-none"
|
className="w-(--button-width) max-h-60! overflow-hidden z-10 outline-none rounded-lg"
|
||||||
|
anchor="bottom"
|
||||||
>
|
>
|
||||||
{children}
|
{children}
|
||||||
</ListboxOptions>
|
</ListboxOptions>
|
||||||
</div>
|
|
||||||
</Listbox>
|
</Listbox>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
61
lib/component/input/TextArea.tsx
Normal file
61
lib/component/input/TextArea.tsx
Normal file
@@ -0,0 +1,61 @@
|
|||||||
|
import type { TextAreaProps } from "$/types/Input";
|
||||||
|
import clsx from "clsx";
|
||||||
|
|
||||||
|
|
||||||
|
export default function TextArea({
|
||||||
|
id = crypto.randomUUID().replaceAll("-", ""),
|
||||||
|
className,
|
||||||
|
inputClassName,
|
||||||
|
labelClassName,
|
||||||
|
maxLength,
|
||||||
|
rows,
|
||||||
|
cols,
|
||||||
|
spellCheck,
|
||||||
|
placeholder,
|
||||||
|
defaultValue,
|
||||||
|
value,
|
||||||
|
onChange,
|
||||||
|
disabled
|
||||||
|
}: TextAreaProps){
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={clsx(
|
||||||
|
"flex flex-row items-center justify-center rounded-lg border-2",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="relative flex flex-row items-center justify-center px-2 py-1"
|
||||||
|
>
|
||||||
|
<textarea
|
||||||
|
id={id}
|
||||||
|
className={clsx(
|
||||||
|
"peer bg-transparent outline-none placeholder-transparent resize",
|
||||||
|
inputClassName
|
||||||
|
)}
|
||||||
|
placeholder={placeholder}
|
||||||
|
maxLength={maxLength}
|
||||||
|
rows={rows}
|
||||||
|
cols={cols}
|
||||||
|
defaultValue={defaultValue}
|
||||||
|
value={value}
|
||||||
|
onChange={onChange}
|
||||||
|
disabled={disabled}
|
||||||
|
spellCheck={spellCheck}
|
||||||
|
/>
|
||||||
|
<label
|
||||||
|
className={clsx(
|
||||||
|
"absolute ml-2 -top-3 left-0 text-sm rounded-md px-1 select-none cursor-default",
|
||||||
|
"peer-placeholder-shown:top-0 peer-placeholder-shown:-left-1 peer-placeholder-shown:text-inherit peer-placeholder-shown:text-base peer-placeholder-shown:bg-transparent peer-placeholder-shown:cursor-text",
|
||||||
|
"flex items-center",
|
||||||
|
labelClassName
|
||||||
|
)}
|
||||||
|
style={{ transitionProperty: "top, left, font-size, line-height", transitionTimingFunction: "cubic-bezier(0.4 0, 0.2, 1)", transitionDuration: "250ms" }}
|
||||||
|
htmlFor={id}
|
||||||
|
>
|
||||||
|
{placeholder}
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -2,20 +2,19 @@ import type { TextInputProps } from "$/types/Input";
|
|||||||
import clsx from "clsx";
|
import clsx from "clsx";
|
||||||
|
|
||||||
|
|
||||||
export default function TextInput(props: TextInputProps){
|
export default function TextInput({
|
||||||
const {
|
id = crypto.randomUUID().replaceAll("-", ""),
|
||||||
id,
|
|
||||||
className,
|
className,
|
||||||
inputClassName,
|
inputClassName,
|
||||||
labelClassName,
|
labelClassName,
|
||||||
|
maxLength,
|
||||||
|
spellCheck,
|
||||||
placeholder,
|
placeholder,
|
||||||
defaultValue,
|
defaultValue,
|
||||||
value,
|
value,
|
||||||
onChange,
|
onChange,
|
||||||
disabled
|
disabled
|
||||||
} = props;
|
}: TextInputProps){
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={clsx(
|
className={clsx(
|
||||||
@@ -34,10 +33,12 @@ export default function TextInput(props: TextInputProps){
|
|||||||
inputClassName
|
inputClassName
|
||||||
)}
|
)}
|
||||||
placeholder={placeholder}
|
placeholder={placeholder}
|
||||||
|
maxLength={maxLength}
|
||||||
defaultValue={defaultValue}
|
defaultValue={defaultValue}
|
||||||
value={value}
|
value={value}
|
||||||
onChange={onChange}
|
onChange={onChange}
|
||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
|
spellCheck={spellCheck}
|
||||||
/>
|
/>
|
||||||
<label
|
<label
|
||||||
className={clsx(
|
className={clsx(
|
||||||
@@ -46,7 +47,7 @@ export default function TextInput(props: TextInputProps){
|
|||||||
"flex items-center",
|
"flex items-center",
|
||||||
labelClassName
|
labelClassName
|
||||||
)}
|
)}
|
||||||
style={{ transitionProperty: "top,, left, font-size, line-height", transitionTimingFunction: "cubic-bezier(0.4 0, 0.2, 1)", transitionDuration: "250ms" }}
|
style={{ transitionProperty: "top, left, font-size, line-height", transitionTimingFunction: "cubic-bezier(0.4 0, 0.2, 1)", transitionDuration: "250ms" }}
|
||||||
htmlFor={id}
|
htmlFor={id}
|
||||||
>
|
>
|
||||||
{placeholder}
|
{placeholder}
|
||||||
|
|||||||
10
lib/types/Input.d.ts
vendored
10
lib/types/Input.d.ts
vendored
@@ -3,10 +3,12 @@ import type { ChangeEventHandler } from "react";
|
|||||||
|
|
||||||
|
|
||||||
export interface TextInputProps {
|
export interface TextInputProps {
|
||||||
id: string;
|
id?: string;
|
||||||
className?: string;
|
className?: string;
|
||||||
inputClassName?: string;
|
inputClassName?: string;
|
||||||
labelClassName?: string;
|
labelClassName?: string;
|
||||||
|
maxLength?: number;
|
||||||
|
spellCheck?: boolean;
|
||||||
placeholder?: string;
|
placeholder?: string;
|
||||||
defaultValue?: string;
|
defaultValue?: string;
|
||||||
value?: string;
|
value?: string;
|
||||||
@@ -14,6 +16,12 @@ export interface TextInputProps {
|
|||||||
disabled?: boolean;
|
disabled?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export interface TextAreaProps extends TextInputProps{
|
||||||
|
rows?: number;
|
||||||
|
cols?: number;
|
||||||
|
onChange?: ChangeEventHandler<HTMLTextAreaElement>;
|
||||||
|
}
|
||||||
|
|
||||||
export interface SelectInputProps {
|
export interface SelectInputProps {
|
||||||
label: React.ReactNode;
|
label: React.ReactNode;
|
||||||
value?: string;
|
value?: string;
|
||||||
|
|||||||
@@ -1,20 +1,7 @@
|
|||||||
import { Button } from "$/component/button";
|
|
||||||
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 { MattrixwvTabGroup } from "$/component/tab";
|
import { MattrixwvTabGroup } from "$/component/tab";
|
||||||
import type { MattrixwvSwitchSize } from "$/types/Input";
|
|
||||||
import type { TabGroupContent } from "$/types/Tab";
|
import type { TabGroupContent } from "$/types/Tab";
|
||||||
|
import { SwitchContent, TextContent } from "@/util/InputUtils";
|
||||||
import { createFileRoute } from "@tanstack/react-router";
|
import { createFileRoute } from "@tanstack/react-router";
|
||||||
import { BsCheck, BsX } from "react-icons/bs";
|
|
||||||
|
|
||||||
|
|
||||||
export const Route = createFileRoute('/input/')({
|
export const Route = createFileRoute('/input/')({
|
||||||
@@ -24,6 +11,7 @@ export const Route = createFileRoute('/input/')({
|
|||||||
|
|
||||||
function InputPage(){
|
function InputPage(){
|
||||||
const tabs: TabGroupContent[] = [
|
const tabs: TabGroupContent[] = [
|
||||||
|
{ tab: "Text", content: <TextContent/> },
|
||||||
{ tab: "Switch", content: <SwitchContent/> }
|
{ tab: "Switch", content: <SwitchContent/> }
|
||||||
];
|
];
|
||||||
|
|
||||||
@@ -37,419 +25,3 @@ function InputPage(){
|
|||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
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"
|
|
||||||
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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|||||||
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