gitscope
/
← marzneshin / app/dashboard/src/components/input/index.tsx / blame
Files Commits 446 Branches 1 Tags 43 Markers 4 README License
https://dev.kronoz.win/r/marzneshin.git
app/dashboard/src/components/input/index.tsx · v0.1.0
Source
1 a47eb4c Dawsh 2y ago import {
2 bf7c131 Mardin 2y ago chakra,
3 bf7c131 Mardin 2y ago FormControl,
4 bf7c131 Mardin 2y ago FormErrorMessage,
5 bf7c131 Mardin 2y ago FormLabel,
6 bf7c131 Mardin 2y ago Input as ChakraInput,
7 bf7c131 Mardin 2y ago InputGroup,
8 bf7c131 Mardin 2y ago InputLeftAddon,
9 bf7c131 Mardin 2y ago InputProps as ChakraInputProps,
10 bf7c131 Mardin 2y ago InputRightAddon,
11 bf7c131 Mardin 2y ago InputRightElement,
12 bf7c131 Mardin 2y ago NumberDecrementStepper,
13 bf7c131 Mardin 2y ago NumberIncrementStepper,
14 bf7c131 Mardin 2y ago NumberInput,
15 bf7c131 Mardin 2y ago NumberInputField,
16 bf7c131 Mardin 2y ago NumberInputStepper
17 bf7c131 Mardin 2y ago } from '@chakra-ui/react';
18 bf7c131 Mardin 2y ago import { XMarkIcon } from '@heroicons/react/24/outline';
19 bf7c131 Mardin 2y ago import classNames from 'classnames';
20 bf7c131 Mardin 2y ago import React, { PropsWithChildren, ReactNode } from 'react';
21 a47eb4c Dawsh 2y ago
22 a47eb4c Dawsh 2y ago const ClearIcon = chakra(XMarkIcon, {
23 a47eb4c Dawsh 2y ago baseStyle: {
24 a47eb4c Dawsh 2y ago w: 4,
25 a47eb4c Dawsh 2y ago h: 4,
26 a47eb4c Dawsh 2y ago },
27 a47eb4c Dawsh 2y ago });
28 a47eb4c Dawsh 2y ago
29 a47eb4c Dawsh 2y ago export type InputProps = PropsWithChildren<
30 a47eb4c Dawsh 2y ago {
31 a47eb4c Dawsh 2y ago value?: string;
32 a47eb4c Dawsh 2y ago className?: string;
33 a47eb4c Dawsh 2y ago endAdornment?: ReactNode;
34 a47eb4c Dawsh 2y ago startAdornment?: ReactNode;
35 a47eb4c Dawsh 2y ago type?: string;
36 a47eb4c Dawsh 2y ago placeholder?: string;
37 a47eb4c Dawsh 2y ago onChange?: (e: any) => void;
38 a47eb4c Dawsh 2y ago onBlur?: (e: any) => void;
39 a47eb4c Dawsh 2y ago onClick?: (e: any) => void;
40 a47eb4c Dawsh 2y ago name?: string;
41 a47eb4c Dawsh 2y ago error?: string;
42 a47eb4c Dawsh 2y ago disabled?: boolean;
43 a47eb4c Dawsh 2y ago step?: number;
44 a47eb4c Dawsh 2y ago label?: string;
45 a47eb4c Dawsh 2y ago clearable?: boolean;
46 a47eb4c Dawsh 2y ago } & ChakraInputProps
47 a47eb4c Dawsh 2y ago >;
48 a47eb4c Dawsh 2y ago
49 a47eb4c Dawsh 2y ago export const Input = React.forwardRef<HTMLInputElement, InputProps>(
50 a47eb4c Dawsh 2y ago (
51 a47eb4c Dawsh 2y ago {
52 a47eb4c Dawsh 2y ago disabled,
53 a47eb4c Dawsh 2y ago step,
54 a47eb4c Dawsh 2y ago label,
55 a47eb4c Dawsh 2y ago className,
56 a47eb4c Dawsh 2y ago startAdornment,
57 a47eb4c Dawsh 2y ago endAdornment,
58 bf7c131 Mardin 2y ago type = 'text',
59 a47eb4c Dawsh 2y ago placeholder,
60 a47eb4c Dawsh 2y ago onChange,
61 a47eb4c Dawsh 2y ago onBlur,
62 a47eb4c Dawsh 2y ago name,
63 a47eb4c Dawsh 2y ago value,
64 a47eb4c Dawsh 2y ago onClick,
65 a47eb4c Dawsh 2y ago error,
66 a47eb4c Dawsh 2y ago clearable = false,
67 a47eb4c Dawsh 2y ago ...props
68 a47eb4c Dawsh 2y ago },
69 a47eb4c Dawsh 2y ago ref
70 a47eb4c Dawsh 2y ago ) => {
71 a47eb4c Dawsh 2y ago const clear = () => {
72 a47eb4c Dawsh 2y ago if (onChange)
73 a47eb4c Dawsh 2y ago onChange({
74 a47eb4c Dawsh 2y ago target: {
75 bf7c131 Mardin 2y ago value: '',
76 a47eb4c Dawsh 2y ago name,
77 a47eb4c Dawsh 2y ago },
78 a47eb4c Dawsh 2y ago });
79 a47eb4c Dawsh 2y ago };
80 bf7c131 Mardin 2y ago const { size = 'md' } = props;
81 bf7c131 Mardin 2y ago const Component = type == 'number' ? NumberInputField : ChakraInput;
82 bf7c131 Mardin 2y ago const Wrapper = type == 'number' ? NumberInput : React.Fragment;
83 a47eb4c Dawsh 2y ago const wrapperProps =
84 bf7c131 Mardin 2y ago type == 'number'
85 a47eb4c Dawsh 2y ago ? {
86 bf7c131 Mardin 2y ago keepWithinRange: true,
87 bf7c131 Mardin 2y ago precision: 5,
88 bf7c131 Mardin 2y ago format: (value: string | number) => {
89 bf7c131 Mardin 2y ago return isNaN(parseFloat(String(value)))
90 bf7c131 Mardin 2y ago ? value
91 bf7c131 Mardin 2y ago : Number(parseFloat(String(value)).toFixed(5)) === 0
92 a47eb4c Dawsh 2y ago ? value
93 a47eb4c Dawsh 2y ago : Number(parseFloat(String(value)).toFixed(5));
94 bf7c131 Mardin 2y ago },
95 bf7c131 Mardin 2y ago min: 0,
96 bf7c131 Mardin 2y ago step,
97 bf7c131 Mardin 2y ago name,
98 bf7c131 Mardin 2y ago type,
99 bf7c131 Mardin 2y ago placeholder,
100 bf7c131 Mardin 2y ago onChange: (v: any) => {
101 bf7c131 Mardin 2y ago if (onChange) onChange(v);
102 bf7c131 Mardin 2y ago },
103 bf7c131 Mardin 2y ago onBlur,
104 bf7c131 Mardin 2y ago value,
105 bf7c131 Mardin 2y ago onClick,
106 bf7c131 Mardin 2y ago disabled,
107 bf7c131 Mardin 2y ago flexGrow: 1,
108 bf7c131 Mardin 2y ago size,
109 bf7c131 Mardin 2y ago }
110 a47eb4c Dawsh 2y ago : {};
111 a47eb4c Dawsh 2y ago return (
112 a47eb4c Dawsh 2y ago <FormControl isInvalid={!!error}>
113 a47eb4c Dawsh 2y ago {label && <FormLabel>{label}</FormLabel>}
114 a47eb4c Dawsh 2y ago <InputGroup
115 a47eb4c Dawsh 2y ago size={size}
116 a47eb4c Dawsh 2y ago w="full"
117 a47eb4c Dawsh 2y ago rounded="md"
118 a47eb4c Dawsh 2y ago _focusWithin={{
119 bf7c131 Mardin 2y ago outline: '2px solid',
120 bf7c131 Mardin 2y ago outlineColor: 'primary.200',
121 a47eb4c Dawsh 2y ago }}
122 bf7c131 Mardin 2y ago bg={disabled ? 'gray.100' : 'transparent'}
123 bf7c131 Mardin 2y ago _dark={{ bg: disabled ? 'gray.600' : 'transparent' }}
124 a47eb4c Dawsh 2y ago >
125 a47eb4c Dawsh 2y ago {startAdornment && <InputLeftAddon>{startAdornment}</InputLeftAddon>}
126 a47eb4c Dawsh 2y ago <Wrapper {...wrapperProps}>
127 a47eb4c Dawsh 2y ago {/* @ts-ignore */}
128 a47eb4c Dawsh 2y ago <Component
129 a47eb4c Dawsh 2y ago name={name}
130 a47eb4c Dawsh 2y ago ref={ref}
131 a47eb4c Dawsh 2y ago step={step}
132 a47eb4c Dawsh 2y ago className={classNames(className)}
133 a47eb4c Dawsh 2y ago type={type}
134 a47eb4c Dawsh 2y ago placeholder={placeholder}
135 a47eb4c Dawsh 2y ago onChange={onChange}
136 a47eb4c Dawsh 2y ago onBlur={onBlur}
137 a47eb4c Dawsh 2y ago value={value}
138 a47eb4c Dawsh 2y ago onClick={onClick}
139 a47eb4c Dawsh 2y ago disabled={disabled}
140 a47eb4c Dawsh 2y ago flexGrow={1}
141 a47eb4c Dawsh 2y ago _focusVisible={{
142 bf7c131 Mardin 2y ago outline: 'none',
143 bf7c131 Mardin 2y ago borderTopColor: 'transparent',
144 bf7c131 Mardin 2y ago borderRightColor: 'transparent',
145 bf7c131 Mardin 2y ago borderBottomColor: 'transparent',
146 a47eb4c Dawsh 2y ago }}
147 a47eb4c Dawsh 2y ago _disabled={{
148 bf7c131 Mardin 2y ago cursor: 'not-allowed',
149 a47eb4c Dawsh 2y ago }}
150 a47eb4c Dawsh 2y ago {...props}
151 bf7c131 Mardin 2y ago roundedLeft={startAdornment ? '0' : 'md'}
152 bf7c131 Mardin 2y ago roundedRight={endAdornment ? '0' : 'md'}
153 a47eb4c Dawsh 2y ago />
154 bf7c131 Mardin 2y ago {type == 'number' && (
155 a47eb4c Dawsh 2y ago <>
156 a47eb4c Dawsh 2y ago <NumberInputStepper>
157 a47eb4c Dawsh 2y ago <NumberIncrementStepper />
158 a47eb4c Dawsh 2y ago <NumberDecrementStepper />
159 a47eb4c Dawsh 2y ago </NumberInputStepper>
160 a47eb4c Dawsh 2y ago </>
161 a47eb4c Dawsh 2y ago )}
162 a47eb4c Dawsh 2y ago </Wrapper>
163 a47eb4c Dawsh 2y ago {endAdornment && (
164 a47eb4c Dawsh 2y ago <InputRightAddon
165 a47eb4c Dawsh 2y ago borderLeftRadius={0}
166 a47eb4c Dawsh 2y ago borderRightRadius="6px"
167 a47eb4c Dawsh 2y ago bg="transparent"
168 a47eb4c Dawsh 2y ago >
169 a47eb4c Dawsh 2y ago {endAdornment}
170 a47eb4c Dawsh 2y ago </InputRightAddon>
171 a47eb4c Dawsh 2y ago )}
172 a47eb4c Dawsh 2y ago {clearable && value && value.length && (
173 a47eb4c Dawsh 2y ago <InputRightElement
174 a47eb4c Dawsh 2y ago borderLeftRadius={0}
175 a47eb4c Dawsh 2y ago borderRightRadius="6px"
176 a47eb4c Dawsh 2y ago bg="transparent"
177 a47eb4c Dawsh 2y ago onClick={clear}
178 a47eb4c Dawsh 2y ago cursor="pointer"
179 a47eb4c Dawsh 2y ago >
180 a47eb4c Dawsh 2y ago <ClearIcon />
181 a47eb4c Dawsh 2y ago </InputRightElement>
182 a47eb4c Dawsh 2y ago )}
183 a47eb4c Dawsh 2y ago </InputGroup>
184 a47eb4c Dawsh 2y ago {!!error && <FormErrorMessage>{error}</FormErrorMessage>}
185 a47eb4c Dawsh 2y ago </FormControl>
186 a47eb4c Dawsh 2y ago );
187 a47eb4c Dawsh 2y ago }
188 a47eb4c Dawsh 2y ago );