gitscope
/
← marzneshin / app/dashboard/src/components/textarea/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/textarea/index.tsx · v0.2.1
Source
1 a47eb4c Dawsh 2y ago import {
2 a47eb4c Dawsh 2y ago chakra,
3 a47eb4c Dawsh 2y ago FormControl,
4 a47eb4c Dawsh 2y ago FormErrorMessage,
5 a47eb4c Dawsh 2y ago FormLabel,
6 a47eb4c Dawsh 2y ago InputGroup,
7 a47eb4c Dawsh 2y ago InputLeftAddon,
8 a47eb4c Dawsh 2y ago InputRightAddon,
9 a47eb4c Dawsh 2y ago InputRightElement,
10 a47eb4c Dawsh 2y ago Textarea as ChakraTextarea,
11 a47eb4c Dawsh 2y ago TextareaProps as ChakraTextareaProps,
12 bf7c131 Mardin 2y ago } from '@chakra-ui/react';
13 bf7c131 Mardin 2y ago import { XMarkIcon } from '@heroicons/react/24/outline';
14 bf7c131 Mardin 2y ago import classNames from 'classnames';
15 bf7c131 Mardin 2y ago import React, { PropsWithChildren, ReactNode } from 'react';
16 a47eb4c Dawsh 2y ago
17 a47eb4c Dawsh 2y ago const ClearIcon = chakra(XMarkIcon, {
18 a47eb4c Dawsh 2y ago baseStyle: {
19 a47eb4c Dawsh 2y ago w: 4,
20 a47eb4c Dawsh 2y ago h: 4,
21 a47eb4c Dawsh 2y ago },
22 a47eb4c Dawsh 2y ago });
23 a47eb4c Dawsh 2y ago
24 a47eb4c Dawsh 2y ago export type TextareaProps = PropsWithChildren<
25 a47eb4c Dawsh 2y ago {
26 a47eb4c Dawsh 2y ago value?: string;
27 a47eb4c Dawsh 2y ago className?: string;
28 a47eb4c Dawsh 2y ago endAdornment?: ReactNode;
29 a47eb4c Dawsh 2y ago startAdornment?: ReactNode;
30 a47eb4c Dawsh 2y ago type?: string;
31 a47eb4c Dawsh 2y ago placeholder?: string;
32 a47eb4c Dawsh 2y ago onChange?: (e: any) => void;
33 a47eb4c Dawsh 2y ago onBlur?: (e: any) => void;
34 a47eb4c Dawsh 2y ago onClick?: (e: any) => void;
35 a47eb4c Dawsh 2y ago name?: string;
36 a47eb4c Dawsh 2y ago error?: string;
37 a47eb4c Dawsh 2y ago disabled?: boolean;
38 a47eb4c Dawsh 2y ago step?: number;
39 a47eb4c Dawsh 2y ago label?: string;
40 a47eb4c Dawsh 2y ago clearable?: boolean;
41 a47eb4c Dawsh 2y ago } & ChakraTextareaProps
42 a47eb4c Dawsh 2y ago >;
43 a47eb4c Dawsh 2y ago
44 a47eb4c Dawsh 2y ago export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
45 a47eb4c Dawsh 2y ago (
46 a47eb4c Dawsh 2y ago {
47 a47eb4c Dawsh 2y ago disabled,
48 a47eb4c Dawsh 2y ago step,
49 a47eb4c Dawsh 2y ago label,
50 a47eb4c Dawsh 2y ago className,
51 a47eb4c Dawsh 2y ago startAdornment,
52 a47eb4c Dawsh 2y ago endAdornment,
53 a47eb4c Dawsh 2y ago placeholder,
54 a47eb4c Dawsh 2y ago onChange,
55 a47eb4c Dawsh 2y ago onBlur,
56 a47eb4c Dawsh 2y ago name,
57 a47eb4c Dawsh 2y ago value,
58 a47eb4c Dawsh 2y ago onClick,
59 a47eb4c Dawsh 2y ago error,
60 a47eb4c Dawsh 2y ago clearable = false,
61 a47eb4c Dawsh 2y ago ...props
62 a47eb4c Dawsh 2y ago },
63 a47eb4c Dawsh 2y ago ref
64 a47eb4c Dawsh 2y ago ) => {
65 a47eb4c Dawsh 2y ago const clear = () => {
66 a47eb4c Dawsh 2y ago if (onChange)
67 a47eb4c Dawsh 2y ago onChange({
68 a47eb4c Dawsh 2y ago target: {
69 bf7c131 Mardin 2y ago value: '',
70 a47eb4c Dawsh 2y ago name,
71 a47eb4c Dawsh 2y ago },
72 a47eb4c Dawsh 2y ago });
73 a47eb4c Dawsh 2y ago };
74 bf7c131 Mardin 2y ago const { size = 'md' } = props;
75 a47eb4c Dawsh 2y ago
76 a47eb4c Dawsh 2y ago return (
77 a47eb4c Dawsh 2y ago <FormControl isInvalid={!!error}>
78 a47eb4c Dawsh 2y ago {label && <FormLabel>{label}</FormLabel>}
79 a47eb4c Dawsh 2y ago <InputGroup
80 a47eb4c Dawsh 2y ago size={size}
81 a47eb4c Dawsh 2y ago w="full"
82 a47eb4c Dawsh 2y ago rounded="md"
83 a47eb4c Dawsh 2y ago _focusWithin={{
84 bf7c131 Mardin 2y ago outline: '2px solid',
85 bf7c131 Mardin 2y ago outlineColor: 'primary.200',
86 a47eb4c Dawsh 2y ago }}
87 bf7c131 Mardin 2y ago bg={disabled ? 'gray.100' : 'transparent'}
88 bf7c131 Mardin 2y ago _dark={{ bg: disabled ? 'gray.600' : 'transparent' }}
89 a47eb4c Dawsh 2y ago >
90 a47eb4c Dawsh 2y ago {startAdornment && <InputLeftAddon>{startAdornment}</InputLeftAddon>}
91 a47eb4c Dawsh 2y ago {/* @ts-ignore */}
92 a47eb4c Dawsh 2y ago <ChakraTextarea
93 a47eb4c Dawsh 2y ago name={name}
94 a47eb4c Dawsh 2y ago ref={ref}
95 a47eb4c Dawsh 2y ago step={step}
96 a47eb4c Dawsh 2y ago className={classNames(className)}
97 a47eb4c Dawsh 2y ago placeholder={placeholder}
98 a47eb4c Dawsh 2y ago onChange={onChange}
99 a47eb4c Dawsh 2y ago onBlur={onBlur}
100 a47eb4c Dawsh 2y ago value={value}
101 a47eb4c Dawsh 2y ago onClick={onClick}
102 a47eb4c Dawsh 2y ago disabled={disabled}
103 a47eb4c Dawsh 2y ago flexGrow={1}
104 a47eb4c Dawsh 2y ago _focusVisible={{
105 bf7c131 Mardin 2y ago outline: 'none',
106 bf7c131 Mardin 2y ago borderTopColor: 'transparent',
107 bf7c131 Mardin 2y ago borderRightColor: 'transparent',
108 bf7c131 Mardin 2y ago borderBottomColor: 'transparent',
109 a47eb4c Dawsh 2y ago }}
110 a47eb4c Dawsh 2y ago _disabled={{
111 bf7c131 Mardin 2y ago cursor: 'not-allowed',
112 a47eb4c Dawsh 2y ago }}
113 a47eb4c Dawsh 2y ago {...props}
114 bf7c131 Mardin 2y ago roundedLeft={startAdornment ? '0' : 'md'}
115 bf7c131 Mardin 2y ago roundedRight={endAdornment ? '0' : 'md'}
116 a47eb4c Dawsh 2y ago />
117 a47eb4c Dawsh 2y ago {endAdornment && (
118 a47eb4c Dawsh 2y ago <InputRightAddon
119 a47eb4c Dawsh 2y ago borderLeftRadius={0}
120 a47eb4c Dawsh 2y ago borderRightRadius="6px"
121 a47eb4c Dawsh 2y ago bg="transparent"
122 a47eb4c Dawsh 2y ago >
123 a47eb4c Dawsh 2y ago {endAdornment}
124 a47eb4c Dawsh 2y ago </InputRightAddon>
125 a47eb4c Dawsh 2y ago )}
126 a47eb4c Dawsh 2y ago {clearable && value && value.length && (
127 a47eb4c Dawsh 2y ago <InputRightElement
128 a47eb4c Dawsh 2y ago borderLeftRadius={0}
129 a47eb4c Dawsh 2y ago borderRightRadius="6px"
130 a47eb4c Dawsh 2y ago bg="transparent"
131 a47eb4c Dawsh 2y ago onClick={clear}
132 a47eb4c Dawsh 2y ago cursor="pointer"
133 a47eb4c Dawsh 2y ago >
134 a47eb4c Dawsh 2y ago <ClearIcon />
135 a47eb4c Dawsh 2y ago </InputRightElement>
136 a47eb4c Dawsh 2y ago )}
137 a47eb4c Dawsh 2y ago </InputGroup>
138 a47eb4c Dawsh 2y ago {!!error && <FormErrorMessage>{error}</FormErrorMessage>}
139 a47eb4c Dawsh 2y ago </FormControl>
140 a47eb4c Dawsh 2y ago );
141 a47eb4c Dawsh 2y ago }
142 a47eb4c Dawsh 2y ago );