mirror of
https://bitbucket.org/Mattrixwv/mattrixwvreactcomponents.git
synced 2025-12-06 21:53:57 -05:00
Created switches
This commit is contained in:
35
lib/component/input/switch/ButtonSwitch.tsx
Normal file
35
lib/component/input/switch/ButtonSwitch.tsx
Normal file
@@ -0,0 +1,35 @@
|
||||
import type { MattrixwvButtonSwitchProps } from "$/types/Input";
|
||||
import { Switch } from "@headlessui/react";
|
||||
|
||||
|
||||
export default function ButtonSwitch({
|
||||
id,
|
||||
className,
|
||||
name,
|
||||
value,
|
||||
defaultChecked,
|
||||
checked,
|
||||
onChange,
|
||||
disabled,
|
||||
onNode,
|
||||
offNode
|
||||
}: MattrixwvButtonSwitchProps){
|
||||
return (
|
||||
<Switch
|
||||
id={id}
|
||||
className={className}
|
||||
name={name}
|
||||
value={value}
|
||||
defaultChecked={defaultChecked}
|
||||
checked={checked}
|
||||
onChange={onChange}
|
||||
disabled={disabled}
|
||||
>
|
||||
{({ checked }) => (
|
||||
<>
|
||||
{checked ? onNode : offNode}
|
||||
</>
|
||||
)}
|
||||
</Switch>
|
||||
);
|
||||
}
|
||||
@@ -1,7 +1,31 @@
|
||||
export default function DangerSwitch(){
|
||||
import type { MattrixwvSwitchProps } from "$/types/Input";
|
||||
import clsx from "clsx";
|
||||
import MattrixwvSwitch from "./MattrixwvSwitch";
|
||||
|
||||
|
||||
export default function DangerSwitch({
|
||||
className,
|
||||
disabled,
|
||||
...props
|
||||
}: MattrixwvSwitchProps){
|
||||
return (
|
||||
<div>
|
||||
Danger Switch
|
||||
</div>
|
||||
<MattrixwvSwitch
|
||||
{...props}
|
||||
className={clsx(
|
||||
"bg-gray-400",
|
||||
className,
|
||||
{
|
||||
"data-checked:bg-red-600": !disabled,
|
||||
"data-checked:bg-red-400/80": disabled
|
||||
}
|
||||
)}
|
||||
knobClassName={clsx(
|
||||
{
|
||||
"bg-white": !disabled,
|
||||
"bg-gray-300": disabled
|
||||
}
|
||||
)}
|
||||
disabled={disabled}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,7 +1,31 @@
|
||||
export default function DarkSwitch(){
|
||||
import type { MattrixwvSwitchProps } from "$/types/Input";
|
||||
import clsx from "clsx";
|
||||
import MattrixwvSwitch from "./MattrixwvSwitch";
|
||||
|
||||
|
||||
export default function DarkSwitch({
|
||||
className,
|
||||
disabled,
|
||||
...props
|
||||
}: MattrixwvSwitchProps){
|
||||
return (
|
||||
<div>
|
||||
Dark Switch
|
||||
</div>
|
||||
<MattrixwvSwitch
|
||||
{...props}
|
||||
className={clsx(
|
||||
"bg-gray-400",
|
||||
className,
|
||||
{
|
||||
"data-checked:bg-black": !disabled,
|
||||
"data-checked:bg-neutral-800/80": disabled
|
||||
}
|
||||
)}
|
||||
knobClassName={clsx(
|
||||
{
|
||||
"bg-white": !disabled,
|
||||
"bg-gray-300": disabled
|
||||
}
|
||||
)}
|
||||
disabled={disabled}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,7 +1,31 @@
|
||||
export default function LightSwitch(){
|
||||
import type { MattrixwvSwitchProps } from "$/types/Input";
|
||||
import clsx from "clsx";
|
||||
import MattrixwvSwitch from "./MattrixwvSwitch";
|
||||
|
||||
|
||||
export default function LightSwitch({
|
||||
className,
|
||||
disabled,
|
||||
...props
|
||||
}: MattrixwvSwitchProps){
|
||||
return (
|
||||
<div>
|
||||
Light Switch
|
||||
</div>
|
||||
<MattrixwvSwitch
|
||||
{...props}
|
||||
className={clsx(
|
||||
"bg-gray-400",
|
||||
className,
|
||||
{
|
||||
"data-checked:bg-white": !disabled,
|
||||
"data-checked:bg-neutral-300/80": disabled
|
||||
}
|
||||
)}
|
||||
knobClassName={clsx(
|
||||
{
|
||||
"bg-black": !disabled,
|
||||
"bg-neutral-800": disabled
|
||||
}
|
||||
)}
|
||||
disabled={disabled}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
108
lib/component/input/switch/MattrixwvSwitch.tsx
Normal file
108
lib/component/input/switch/MattrixwvSwitch.tsx
Normal file
@@ -0,0 +1,108 @@
|
||||
import type { MattrixwvSwitchProps } from "$/types/Input";
|
||||
import { Field, Label, Switch } from "@headlessui/react";
|
||||
import clsx from "clsx";
|
||||
import { Fragment } from "react/jsx-runtime";
|
||||
|
||||
|
||||
export default function MattrixwvSwitch({
|
||||
id,
|
||||
className,
|
||||
knobClassName,
|
||||
size = "sm",
|
||||
wide,
|
||||
name,
|
||||
value,
|
||||
defaultChecked,
|
||||
checked,
|
||||
onChange,
|
||||
disabled,
|
||||
children,
|
||||
offText,
|
||||
onText
|
||||
}: MattrixwvSwitchProps){
|
||||
return (
|
||||
<Field as={Fragment}>
|
||||
<Switch
|
||||
id={id}
|
||||
className={clsx(
|
||||
"relative group inline-flex items-center rounded-full transition",
|
||||
className,
|
||||
{
|
||||
"cursor-pointer": !disabled,
|
||||
"cursor-default": disabled
|
||||
},
|
||||
{
|
||||
//Normal
|
||||
"h-4 w-7": size === "xs" && !wide,
|
||||
"h-5 w-9": size === "sm" && !wide,
|
||||
"h-6 w-11": size === "md" && !wide,
|
||||
"h-7 w-13": size === "lg" && !wide,
|
||||
"h-8 w-15": size === "xl" && !wide,
|
||||
|
||||
//Wide
|
||||
"h-4 w-9": size === "xs" && wide,
|
||||
"h-5 w-11": size === "sm" && wide,
|
||||
"h-6 w-13": size === "md" && wide,
|
||||
"h-7 w-15": size === "lg" && wide,
|
||||
"h-8 w-17": size === "xl" && wide
|
||||
}
|
||||
)}
|
||||
name={name}
|
||||
value={value}
|
||||
defaultChecked={defaultChecked}
|
||||
checked={checked}
|
||||
onChange={onChange}
|
||||
disabled={disabled}
|
||||
>
|
||||
{
|
||||
offText &&
|
||||
<span className="block group-data-checked:hidden absolute right-2">{offText}</span>
|
||||
}
|
||||
{
|
||||
onText &&
|
||||
<span className="hidden group-data-checked:block absolute left-2">{onText}</span>
|
||||
}
|
||||
<span
|
||||
className={clsx(
|
||||
"rounded-full transition",
|
||||
knobClassName,
|
||||
//Size
|
||||
{
|
||||
"size-2": size === "xs",
|
||||
"size-3": size === "sm",
|
||||
"size-4": size === "md",
|
||||
"size-5": size === "lg",
|
||||
"size-6": size === "xl"
|
||||
},
|
||||
//Transitions
|
||||
{
|
||||
//Normal
|
||||
"translate-x-1 group-data-checked:translate-x-4": size === "xs" && !wide,
|
||||
"translate-x-1 group-data-checked:translate-x-5": size === "sm" && !wide,
|
||||
"translate-x-1 group-data-checked:translate-x-6": size === "md" && !wide,
|
||||
"translate-x-1 group-data-checked:translate-x-7": size === "lg" && !wide,
|
||||
"translate-x-1 group-data-checked:translate-x-8": size === "xl" && !wide,
|
||||
|
||||
//Wide
|
||||
"translate-x-1 group-data-checked:translate-x-6 ": size === "xs" && wide,
|
||||
"translate-x-1 group-data-checked:translate-x-7 ": size === "sm" && wide,
|
||||
"translate-x-1 group-data-checked:translate-x-8 ": size === "md" && wide,
|
||||
"translate-x-1 group-data-checked:translate-x-9 ": size === "lg" && wide,
|
||||
"translate-x-1 group-data-checked:translate-x-10 ": size === "xl" && wide
|
||||
}
|
||||
)}
|
||||
/>
|
||||
</Switch>
|
||||
<Label
|
||||
className={clsx(
|
||||
{
|
||||
"cursor-pointer": !disabled,
|
||||
"cursor-default": disabled
|
||||
}
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</Label>
|
||||
</Field>
|
||||
);
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
export default function PlainSwitch(){
|
||||
return (
|
||||
<div>
|
||||
Plain Switch
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,7 +1,31 @@
|
||||
export default function PrimarySwitch(){
|
||||
import type { MattrixwvSwitchProps } from "$/types/Input";
|
||||
import clsx from "clsx";
|
||||
import MattrixwvSwitch from "./MattrixwvSwitch";
|
||||
|
||||
|
||||
export default function PrimarySwitch({
|
||||
className,
|
||||
disabled,
|
||||
...props
|
||||
}: MattrixwvSwitchProps){
|
||||
return (
|
||||
<div>
|
||||
Primary Switch
|
||||
</div>
|
||||
<MattrixwvSwitch
|
||||
{...props}
|
||||
className={clsx(
|
||||
"bg-gray-400",
|
||||
className,
|
||||
{
|
||||
"data-checked:bg-blue-600": !disabled,
|
||||
"data-checked:bg-blue-400/80": disabled
|
||||
}
|
||||
)}
|
||||
knobClassName={clsx(
|
||||
{
|
||||
"bg-white": !disabled,
|
||||
"bg-gray-200": disabled
|
||||
}
|
||||
)}
|
||||
disabled={disabled}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,7 +1,31 @@
|
||||
export default function SecondarySwitch(){
|
||||
import type { MattrixwvSwitchProps } from "$/types/Input";
|
||||
import clsx from "clsx";
|
||||
import MattrixwvSwitch from "./MattrixwvSwitch";
|
||||
|
||||
|
||||
export default function SecondarySwitch({
|
||||
className,
|
||||
disabled,
|
||||
...props
|
||||
}: MattrixwvSwitchProps){
|
||||
return (
|
||||
<div>
|
||||
Secondary Switch
|
||||
</div>
|
||||
<MattrixwvSwitch
|
||||
{...props}
|
||||
className={clsx(
|
||||
"bg-gray-400",
|
||||
className,
|
||||
{
|
||||
"data-checked:bg-neutral-600": !disabled,
|
||||
"data-checked:bg-neutral-400/80": disabled
|
||||
}
|
||||
)}
|
||||
knobClassName={clsx(
|
||||
{
|
||||
"bg-white": !disabled,
|
||||
"bg-gray-200": disabled
|
||||
}
|
||||
)}
|
||||
disabled={disabled}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,7 +1,30 @@
|
||||
export default function SuccessDangerSwitch(){
|
||||
import type { MattrixwvSwitchProps } from "$/types/Input";
|
||||
import clsx from "clsx";
|
||||
import MattrixwvSwitch from "./MattrixwvSwitch";
|
||||
|
||||
|
||||
export default function SuccessDangerSwitch({
|
||||
className,
|
||||
disabled,
|
||||
...props
|
||||
}: MattrixwvSwitchProps){
|
||||
return (
|
||||
<div>
|
||||
Success Danger Switch
|
||||
</div>
|
||||
<MattrixwvSwitch
|
||||
{...props}
|
||||
className={clsx(
|
||||
className,
|
||||
{
|
||||
"bg-red-600 data-checked:bg-green-600": !disabled,
|
||||
"bg-red-400/80 data-checked:bg-green-400/80": disabled
|
||||
}
|
||||
)}
|
||||
knobClassName={clsx(
|
||||
{
|
||||
"bg-white": !disabled,
|
||||
"bg-gray-200": disabled
|
||||
}
|
||||
)}
|
||||
disabled={disabled}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,7 +1,31 @@
|
||||
export default function SuccessSwitch(){
|
||||
import type { MattrixwvSwitchProps } from "$/types/Input";
|
||||
import clsx from "clsx";
|
||||
import MattrixwvSwitch from "./MattrixwvSwitch";
|
||||
|
||||
|
||||
export default function SuccessSwitch({
|
||||
className,
|
||||
disabled,
|
||||
...props
|
||||
}: MattrixwvSwitchProps){
|
||||
return (
|
||||
<div>
|
||||
Success Switch
|
||||
</div>
|
||||
<MattrixwvSwitch
|
||||
{...props}
|
||||
className={clsx(
|
||||
"bg-gray-400",
|
||||
className,
|
||||
{
|
||||
"data-checked:bg-green-600": !disabled,
|
||||
"data-checked:bg-green-400/80": disabled
|
||||
}
|
||||
)}
|
||||
knobClassName={clsx(
|
||||
{
|
||||
"bg-white": !disabled,
|
||||
"bg-gray-200": disabled
|
||||
}
|
||||
)}
|
||||
disabled={disabled}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,7 +0,0 @@
|
||||
export default function Switch(){
|
||||
return (
|
||||
<div>
|
||||
Switch
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,7 +1,31 @@
|
||||
export default function TertiarySwitch(){
|
||||
import type { MattrixwvSwitchProps } from "$/types/Input";
|
||||
import clsx from "clsx";
|
||||
import MattrixwvSwitch from "./MattrixwvSwitch";
|
||||
|
||||
|
||||
export default function TertiarySwitch({
|
||||
className,
|
||||
disabled,
|
||||
...props
|
||||
}: MattrixwvSwitchProps){
|
||||
return (
|
||||
<div>
|
||||
Tertiary Switch
|
||||
</div>
|
||||
<MattrixwvSwitch
|
||||
{...props}
|
||||
className={clsx(
|
||||
"bg-gray-400",
|
||||
className,
|
||||
{
|
||||
"data-checked:bg-purple-600": !disabled,
|
||||
"data-checked:bg-purple-400/80": disabled
|
||||
}
|
||||
)}
|
||||
knobClassName={clsx(
|
||||
{
|
||||
"bg-white": !disabled,
|
||||
"bg-gray-200": disabled
|
||||
}
|
||||
)}
|
||||
disabled={disabled}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,7 +1,31 @@
|
||||
export default function WarningSwitch(){
|
||||
import type { MattrixwvSwitchProps } from "$/types/Input";
|
||||
import clsx from "clsx";
|
||||
import MattrixwvSwitch from "./MattrixwvSwitch";
|
||||
|
||||
|
||||
export default function WarningSwitch({
|
||||
className,
|
||||
disabled,
|
||||
...props
|
||||
}: MattrixwvSwitchProps){
|
||||
return (
|
||||
<div>
|
||||
Warning Switch
|
||||
</div>
|
||||
<MattrixwvSwitch
|
||||
{...props}
|
||||
className={clsx(
|
||||
"bg-gray-400",
|
||||
className,
|
||||
{
|
||||
"data-checked:bg-yellow-500": !disabled,
|
||||
"data-checked:bg-yellow-300/80": disabled
|
||||
}
|
||||
)}
|
||||
knobClassName={clsx(
|
||||
{
|
||||
"bg-white": !disabled,
|
||||
"bg-gray-300": disabled
|
||||
}
|
||||
)}
|
||||
disabled={disabled}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
35
lib/types/Input.d.ts
vendored
35
lib/types/Input.d.ts
vendored
@@ -1,3 +1,4 @@
|
||||
import type React from "react";
|
||||
import type { ChangeEventHandler } from "react";
|
||||
|
||||
|
||||
@@ -16,7 +17,7 @@ export interface TextInputProps {
|
||||
export interface SelectInputProps {
|
||||
label: React.ReactNode;
|
||||
value?: string;
|
||||
onChange?: (newVlaue: string) => void;
|
||||
onChange?: (newValue: string) => void;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
@@ -26,3 +27,35 @@ export interface OptionInputProps {
|
||||
value: string;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export type MattrixwvSwitchSize = "none" | "xs" | "sm" | "md" | "lg" | "xl";
|
||||
|
||||
export interface MattrixwvSwitchProps {
|
||||
id?: string;
|
||||
className?: string;
|
||||
knobClassName?: string;
|
||||
size?: MattrixwvSwitchSize;
|
||||
wide?: boolean;
|
||||
name?: string;
|
||||
value?: string;
|
||||
defaultChecked?: boolean;
|
||||
checked?: boolean;
|
||||
onChange?: (newChecked: boolean) => void;
|
||||
disabled?: boolean;
|
||||
children?: React.ReactNode;
|
||||
offText?: React.ReactNode;
|
||||
onText?: React.ReactNode;
|
||||
}
|
||||
|
||||
export interface MattrixwvButtonSwitchProps {
|
||||
id?: string;
|
||||
className?: string;
|
||||
name?: string;
|
||||
value?: string;
|
||||
defaultChecked?: boolean;
|
||||
checked?: boolean;
|
||||
onChange?: (newChecked: boolean) => void;
|
||||
disabled?: boolean;
|
||||
onNode: React.ReactNode;
|
||||
offNode: React.ReactNode;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user