misc_pterodactyl-panel/resources/scripts/components/elements/Switch.tsx

86 lines
2.4 KiB
TypeScript
Raw Normal View History

import React, { useMemo } from 'react';
2020-07-03 21:19:05 +00:00
import styled from 'styled-components/macro';
import v4 from 'uuid/v4';
2020-07-03 21:19:05 +00:00
import tw from 'twin.macro';
const ToggleContainer = styled.div`
${tw`relative select-none w-12 leading-normal`};
& > input[type="checkbox"] {
${tw`hidden`};
&:checked + label {
${tw`bg-primary-500 border-primary-700 shadow-none`};
}
&:checked + label:before {
right: 0.125rem;
}
}
& > label {
${tw`mb-0 block overflow-hidden cursor-pointer bg-neutral-400 border border-neutral-700 rounded-full h-6 shadow-inner`};
transition: all 75ms linear;
&::before {
${tw`absolute block bg-white border h-5 w-5 rounded-full`};
top: 0.125rem;
right: calc(50% + 0.125rem);
//width: 1.25rem;
//height: 1.25rem;
content: "";
transition: all 75ms ease-in;
}
}
`;
2020-04-26 00:37:03 +00:00
export interface SwitchProps {
name: string;
label?: string;
2020-04-26 00:37:03 +00:00
description?: string;
defaultChecked?: boolean;
onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
children?: React.ReactNode;
}
2020-04-26 00:37:03 +00:00
const Switch = ({ name, label, description, defaultChecked, onChange, children }: SwitchProps) => {
const uuid = useMemo(() => v4(), []);
return (
2020-07-03 21:19:05 +00:00
<div css={tw`flex items-center`}>
<ToggleContainer css={tw`flex-none`}>
2020-04-26 00:37:03 +00:00
{children
|| <input
id={uuid}
name={name}
type={'checkbox'}
onChange={e => onChange && onChange(e)}
defaultChecked={defaultChecked}
/>
}
<label htmlFor={uuid}/>
</ToggleContainer>
{(label || description) &&
2020-07-03 21:19:05 +00:00
<div css={tw`ml-4 w-full`}>
{label &&
2020-04-26 00:37:03 +00:00
<label
2020-07-03 21:19:05 +00:00
css={[ tw`cursor-pointer`, !!description && tw`mb-0` ]}
className={'input-dark-label'}
2020-04-26 00:37:03 +00:00
htmlFor={uuid}
2020-07-03 21:19:05 +00:00
>
{label}
</label>
}
2020-04-26 00:37:03 +00:00
{description &&
<p className={'input-help'}>
{description}
</p>
}
</div>
}
2020-04-26 00:37:03 +00:00
</div>
);
};
export default Switch;