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

packages/ui: add InputNumber

Browse Source
This commit is contained in:
vchikalkin 2023-11-09 20:10:45 +03:00
parent 404f88d8e0
commit 83493d07f3
4 changed files with 16 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web/api/ius/types.ts
View File

@ -3,6 +3,8 @@ export type MetaObject = {
disabled: boolean;
fieldType: 'CHECKBOX' | 'DECIMAL' | 'INT' | 'STRING';
label: string;
max: number;
min: number;
required: boolean;
visible: boolean;
};

9
apps/web/components/Form.tsx
View File

@ -12,7 +12,7 @@ export function Form({ data, metaData }: Props) {
<Background>
<div className="grid auto-rows-auto grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-3 ">
{Object.keys(metaData).map((name) => {
const { fieldType, visible } = metaData[name];
const { fieldType, label, max, min = 0, visible, ...props } = metaData[name];
if (!visible) return false;
@ -26,10 +26,11 @@ export function Form({ data, metaData }: Props) {
>
<Element
id={name}
required={metaData[name].required}
defaultValue={data[name]}
disabled={metaData[name].disabled}
title={metaData[name].label}
title={label}
min={min}
max={max}
{...props}
/>
</ElementContainer>
);

6
apps/web/config/elements.ts
View File

@ -1,5 +1,5 @@
import type { MetaObject } from '@/api/ius/types';
import { Checkbox, Input } from 'ui';
import { Checkbox, Input, InputNumber } from 'ui';
function wrapMap<C, T extends Record<MetaObject['fieldType'], C>>(arg: T) {
return arg;
@ -7,7 +7,7 @@ function wrapMap<C, T extends Record<MetaObject['fieldType'], C>>(arg: T) {
export const mapFieldTypeElement = wrapMap({
CHECKBOX: Checkbox,
DECIMAL: Input,
INT: Input,
DECIMAL: InputNumber,
INT: InputNumber,
STRING: Input,
});

8
packages/ui/input.tsx
View File

@ -4,12 +4,16 @@ import { cva } from 'class-variance-authority';
import { forwardRef } from 'react';
const variants = cva(
'hover:border-primary-500 focus:border-primary-500 block w-full rounded-sm border disabled:hover:border-gray-300 border-gray-300 h-9 p-2 px-3 text-sm text-gray-900 outline-none transition-all ease-linear hover:transition-all focus:transition-all disabled:cursor-not-allowed disabled:text-opacity-30'
'[&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none hover:border-primary-500 focus:border-primary-500 block w-full rounded-sm border disabled:hover:border-gray-300 border-gray-300 h-9 p-2 px-3 text-sm text-gray-900 outline-none transition-all ease-linear hover:transition-all focus:transition-all disabled:cursor-not-allowed disabled:text-opacity-30'
);
export type InputProps = React.InputHTMLAttributes<HTMLInputElement> &
VariantProps<typeof variants>;
export const Input = forwardRef<HTMLInputElement, InputProps>(({ className, ...props }, ref) => (
<input ref={ref} type="text" id={props.id} className={cn(variants({ className }))} {...props} />
<input ref={ref} type="text" className={cn(variants({ className }))} {...props} />
));
export const InputNumber = forwardRef<HTMLInputElement, InputProps>((props, ref) => (
<Input ref={ref} type="number" {...props} />
));