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 (
<ElementContainer key={name} id={name} title={fieldType === 'CHECKBOX' ? '' : label}>
<Element
loading={!Object.keys(values).length}
checked={fieldType === 'CHECKBOX' ? Boolean(values[name]) || false : false}
id={name}
value={values[name] || ''}

26
packages/ui/checkbox.tsx
View File

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