Siklos/svg-layout-designer-react
1
1
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Merged PR 196: Implement Vertical orientation + Upgrade Heroicons to 2.0

Browse source 
Implémenter l'orientation verticale

Modifier l'effet de append

Implementer RigidBody

Implementer Flex et simplex

Implémenter Push

Implémenter Swap

Implement MinMaxHeight without behaviors

Fix Margin for Height

Implement PositionReference

Fix dimension vertical position inside children

Add orientation change in form

Implement sortChildren

Implement Anchor

Fix warning message on overlapping

Fix minimap when root container is vertical

#7287
#7288
#7289
#7290
#7291
#7292
#7294
#7295
#7296
#7297
#7298
#7299
#7300
#7301
#7302
This commit is contained in:
Eric Nguyen 2022-09-28 16:07:56 +00:00
parent 459e83a0c8
commit 18cbacaca1
45 changed files with 2112 additions and 1063 deletions
Download patch file Download diff file Expand all files Collapse all files

65
src/Components/ToggleButton/ToggleButton.tsx
View file

@ -2,51 +2,52 @@ import React from 'react';
import './ToggleButton.scss';
interface IToggleButtonProps {
id: string
text: string
labelKey?: string
labelText: string
inputKey: string
labelClassName: string
inputClassName: string
type?: ToggleType
title: string
checked: boolean
onChange: React.ChangeEventHandler<HTMLInputElement>
}
export enum ToggleType {
Material,
IOS
Full
}
export function ToggleButton(props: IToggleButtonProps): JSX.Element {
const id = `toggle-${props.id}`;
const type = props.type ?? ToggleType.Material;
let classLine = 'line w-10 h-4 bg-gray-400 rounded-full shadow-inner';
let classDot = 'dot absolute w-6 h-6 bg-white rounded-full shadow -left-1 -top-1 transition';
if (type === ToggleType.IOS) {
classLine = 'line block bg-gray-600 w-14 h-8 rounded-full';
classDot = 'dot absolute left-1 top-1 bg-white w-6 h-6 rounded-full transition';
if (type === ToggleType.Full) {
classLine = 'line block bg-gray-600 w-12 h-7 rounded-full';
classDot = 'dot absolute left-1 top-1 bg-white w-5 h-5 rounded-full transition';
}
return (
<div title={props.title}>
<div className="flex items-center justify-center w-full mb-12">
<label
htmlFor={id}
className="flex items-center cursor-pointer"
>
<div className="relative">
<input
id={id}
type="checkbox"
onChange={props.onChange}
checked={props.checked}
className="sr-only" />
<div className={classLine}></div>
<div className={classDot}></div>
</div>
<div className="ml-3 text-gray-700 font-medium">
{props.text}
</div>
</label>
</div>
</div>
);
return <>
<label
key={props.labelKey}
className={`text-xs font-medium text-gray-800 cursor-pointer ${props.labelClassName}`}
htmlFor={props.inputKey}
>
{ props.labelText }
</label>
<label
className="relative cursor-pointer"
htmlFor={props.inputKey}
>
<input
key={props.inputKey}
id={props.inputKey}
type="checkbox"
onChange={props.onChange}
checked={props.checked}
className="sr-only"
/>
<div className={classLine}></div>
<div className={classDot}></div>
</label>
</>;
}