evo/Evo.External.App
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

packages/ui: add skeleton for input & checkbox

Browse Source
This commit is contained in:
vchikalkin 2023-11-16 14:19:28 +03:00
parent bc27e6fd33
commit d7d418db68
3 changed files with 26 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
apps/web/components/Form/Elements.tsx
View File

@ -25,6 +25,7 @@ export function Elements({ data, metaData }: Props) {
return ( return (
<ElementContainer key={name} id={name} title={fieldType === 'CHECKBOX' ? '' : label}> <ElementContainer key={name} id={name} title={fieldType === 'CHECKBOX' ? '' : label}>
<Element <Element
loading={!Object.keys(values).length}
checked={fieldType === 'CHECKBOX' ? Boolean(values[name]) || false : false} checked={fieldType === 'CHECKBOX' ? Boolean(values[name]) || false : false}
id={name} id={name}
value={values[name] || ''} value={values[name] || ''}

26
packages/ui/checkbox.tsx
View File

@ -30,15 +30,23 @@ const variants = cva(
); );
export type CheckboxProps = React.InputHTMLAttributes<HTMLInputElement> & export type CheckboxProps = React.InputHTMLAttributes<HTMLInputElement> &
VariantProps<typeof variants>; VariantProps<typeof variants> & { readonly loading: boolean };
export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>( export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
({ className, title, ...props }, ref) => ( ({ className, loading, title, ...props }, ref) => {
<div className="flex items-center"> if (loading) return <div className="h-3 w-full animate-pulse rounded bg-gray-100" />;
<input ref={ref} type="checkbox" className={cn(variants({ className }))} {...props} />
{title && ( return (
<Label intent={props.disabled ? 'disabled' : 'default'} htmlFor={props.id} title={title} /> <div className="flex items-center">
)} <input ref={ref} type="checkbox" className={cn(variants({ className }))} {...props} />
</div> {title && (
) <Label
intent={props.disabled ? 'disabled' : 'default'}
htmlFor={props.id}
title={title}
/>
)}
</div>
);
}
); );

12
packages/ui/input.tsx
View File

@ -8,11 +8,15 @@ const variants = cva(
); );
export type InputProps = React.InputHTMLAttributes<HTMLInputElement> & export type InputProps = React.InputHTMLAttributes<HTMLInputElement> &
VariantProps<typeof variants>; VariantProps<typeof variants> & { readonly loading?: boolean };
export const Input = forwardRef<HTMLInputElement, InputProps>(({ className, ...props }, ref) => ( export const Input = forwardRef<HTMLInputElement, InputProps>(
<input ref={ref} type="text" className={cn(variants({ className }))} {...props} /> ({ className, loading, ...props }, ref) => {
)); if (loading) return <div className="h-full w-full animate-pulse rounded bg-gray-100" />;
return <input ref={ref} type="text" className={cn(variants({ className }))} {...props} />;
}
);
export const InputNumber = forwardRef<HTMLInputElement, InputProps>((props, ref) => ( export const InputNumber = forwardRef<HTMLInputElement, InputProps>((props, ref) => (
<Input ref={ref} type="number" {...props} /> <Input ref={ref} type="number" {...props} />