mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2025-05-10 13:35:47 +03:00
Code Issues Projects Releases Packages Wiki Activity

Improved design on domains dropdown

Browse source
This commit is contained in:
Alejandro Celaya 2020-11-28 09:34:41 +01:00
parent 983e4db3b1
commit 369fcf2f6a
5 changed files with 17 additions and 7 deletions

6
src/utils/BooleanControl.tsx
View file

@ -7,6 +7,7 @@ export interface BooleanControlProps {
checked?: boolean;
onChange?: (checked: boolean, e: ChangeEvent<HTMLInputElement>) => void;
className?: string;
inline?: boolean;
}
interface BooleanControlWithTypeProps extends BooleanControlProps {
@ -14,7 +15,7 @@ interface BooleanControlWithTypeProps extends BooleanControlProps {
}
const BooleanControl: FC<BooleanControlWithTypeProps> = (
{ checked = false, onChange = identity, className, children, type },
{ checked = false, onChange = identity, className, children, type, inline = false },
) => {
const id = uuid();
const onChecked = (e: ChangeEvent<HTMLInputElement>) => onChange(e.target.checked, e);
@ -22,9 +23,10 @@ const BooleanControl: FC<BooleanControlWithTypeProps> = (
'custom-switch': type === 'switch',
'custom-checkbox': type === 'checkbox',
};
const style = inline ? { display: 'inline-block' } : {};
return (
<span className={classNames('custom-control', typeClasses, className)}>
<span className={classNames('custom-control', typeClasses, className)} style={style}>
<input type="checkbox" className="custom-control-input" id={id} checked={checked} onChange={onChecked} />
<label className="custom-control-label" htmlFor={id}>{children}</label>
</span>