@mrshmllw/smores-react 13.3.6 → 13.3.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import React, { forwardRef } from 'react';
|
|
2
2
|
import styled from 'styled-components';
|
|
3
3
|
import { Field } from '../fields/Field';
|
|
4
|
-
import { theme } from '../theme';
|
|
5
4
|
import { useUniqueId } from '../utils/id';
|
|
6
5
|
export const Textarea = forwardRef(function Textarea({ id: idProp, name, value, onChange, onInputChange, resize = 'none', error = false, placeholder, disabled = false, maxLength, onBlur, rows = 4, fallbackStyle, ...fieldProps }, ref) {
|
|
7
6
|
const id = useUniqueId(idProp);
|
|
@@ -15,23 +14,25 @@ const StyledTextArea = styled.textarea `
|
|
|
15
14
|
font-size: 16px;
|
|
16
15
|
font: inherit;
|
|
17
16
|
line-height: 20px;
|
|
18
|
-
background: ${({ $fallbackStyle }) => $fallbackStyle
|
|
19
|
-
|
|
17
|
+
background: ${({ $fallbackStyle, theme }) => $fallbackStyle
|
|
18
|
+
? theme.color.surface.base[300]
|
|
19
|
+
: theme.color.background['000']};
|
|
20
|
+
border: 2px solid ${({ theme }) => theme.color.border.subtle};
|
|
20
21
|
box-sizing: border-box;
|
|
21
22
|
border-radius: 12px;
|
|
22
23
|
width: 100%;
|
|
23
24
|
padding: 18px 14px;
|
|
24
|
-
color: ${theme.
|
|
25
|
+
color: ${({ theme }) => theme.color.text.base};
|
|
25
26
|
resize: ${({ $resize }) => $resize};
|
|
26
27
|
cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'text')};
|
|
27
28
|
opacity: ${({ disabled }) => (disabled ? '0.5' : '1')};
|
|
28
|
-
border-color: ${({ $error }) =>
|
|
29
|
+
border-color: ${({ $error, theme }) => $error ? theme.color.feedback.negative[200] : theme.color.border.subtle};
|
|
29
30
|
outline: none;
|
|
30
31
|
|
|
31
32
|
&:hover,
|
|
32
33
|
&:focus,
|
|
33
34
|
&:focus-visible {
|
|
34
|
-
border-color: ${({ $error }) => $error ? theme.
|
|
35
|
+
border-color: ${({ $error, theme }) => $error ? theme.color.feedback.negative[200] : theme.color.border.base};
|
|
35
36
|
}
|
|
36
37
|
`;
|
|
37
38
|
//# sourceMappingURL=Textarea.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../src/Textarea/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAuC,UAAU,EAAE,MAAM,OAAO,CAAA;AAC9E,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAA;AAEvC,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../src/Textarea/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAuC,UAAU,EAAE,MAAM,OAAO,CAAA;AAC9E,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAA;AAEvC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AA+BzC,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAAC,SAAS,QAAQ,CAClD,EACE,EAAE,EAAE,MAAM,EACV,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,aAAa,EACb,MAAM,GAAG,MAAM,EACf,KAAK,GAAG,KAAK,EACb,WAAW,EACX,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,MAAM,EACN,IAAI,GAAG,CAAC,EACR,aAAa,EACb,GAAG,UAAU,EACC,EAChB,GAAsC;IAEtC,MAAM,EAAE,GAAG,WAAW,CAAC,MAAM,CAAC,CAAA;IAC9B,OAAO,CACL,oBAAC,KAAK,OAAK,UAAU,EAAE,OAAO,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK;QAC9C,oBAAC,cAAc,IACb,GAAG,EAAE,GAAG,YACA,KAAK,EACb,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,aACT,MAAM,oBACC,aAAa,EAC7B,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,CAAiC,EAAE,EAAE;gBAC9C,QAAQ,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;gBACjC,aAAa,EAAE,CAAC,CAAC,CAAC,CAAA;YACpB,CAAC,EACD,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,IAAI,GACV,CACI,CACT,CAAA;AACH,CAAC,CAAC,CAAA;AASF,MAAM,cAAc,GAAG,MAAM,CAAC,QAAQ,CAAU;;;;gBAIhC,CAAC,EAAE,cAAc,EAAE,KAAK,EAAE,EAAE,EAAE,CAC1C,cAAc;IACZ,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;IAC/B,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC;sBACf,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM;;;;;WAKnD,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI;YACnC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,OAAO;YACxB,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC;aACpD,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC;kBACrC,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE,CACpC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM;;;;;;oBAMvD,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE,CACpC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI;;CAE1E,CAAA","sourcesContent":["import React, { FocusEvent, FormEvent, ForwardedRef, forwardRef } from 'react'\nimport styled from 'styled-components'\n\nimport { Field } from '../fields/Field'\nimport { CommonFieldProps } from '../fields/commonFieldTypes'\nimport { useUniqueId } from '../utils/id'\nimport { MarginProps } from '../utils/space'\n\ntype BaseProps = {\n id?: string\n placeholder?: string\n name?: string\n value: string\n error?: boolean\n errorMsg?: string\n resize?: 'none' | 'both'\n disabled?: boolean\n maxLength?: number\n onBlur?: (e: FocusEvent<HTMLTextAreaElement>) => void\n rows?: number\n fallbackStyle?: boolean\n} & CommonFieldProps &\n MarginProps\n\ntype TruncateProps =\n | {\n onChange: (e: string) => void\n onInputChange?: (e: FormEvent<HTMLTextAreaElement>) => void\n }\n | {\n onChange?: (e: string) => void\n onInputChange: (e: FormEvent<HTMLTextAreaElement>) => void\n }\n\nexport type TextareaProps = BaseProps & TruncateProps\n\nexport const Textarea = forwardRef(function Textarea(\n {\n id: idProp,\n name,\n value,\n onChange,\n onInputChange,\n resize = 'none',\n error = false,\n placeholder,\n disabled = false,\n maxLength,\n onBlur,\n rows = 4,\n fallbackStyle,\n ...fieldProps\n }: TextareaProps,\n ref: ForwardedRef<HTMLTextAreaElement>,\n) {\n const id = useUniqueId(idProp)\n return (\n <Field {...fieldProps} htmlFor={id} error={error}>\n <StyledTextArea\n ref={ref}\n $error={error}\n id={id}\n name={name}\n disabled={disabled}\n $resize={resize}\n $fallbackStyle={fallbackStyle}\n placeholder={placeholder}\n value={value}\n onChange={(e: FormEvent<HTMLTextAreaElement>) => {\n onChange?.(e.currentTarget.value)\n onInputChange?.(e)\n }}\n maxLength={maxLength}\n onBlur={onBlur}\n rows={rows}\n />\n </Field>\n )\n})\n\ninterface TextArea {\n $resize: 'none' | 'both'\n disabled: boolean\n $error: boolean\n $fallbackStyle?: boolean\n}\n\nconst StyledTextArea = styled.textarea<TextArea>`\n font-size: 16px;\n font: inherit;\n line-height: 20px;\n background: ${({ $fallbackStyle, theme }) =>\n $fallbackStyle\n ? theme.color.surface.base[300]\n : theme.color.background['000']};\n border: 2px solid ${({ theme }) => theme.color.border.subtle};\n box-sizing: border-box;\n border-radius: 12px;\n width: 100%;\n padding: 18px 14px;\n color: ${({ theme }) => theme.color.text.base};\n resize: ${({ $resize }) => $resize};\n cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'text')};\n opacity: ${({ disabled }) => (disabled ? '0.5' : '1')};\n border-color: ${({ $error, theme }) =>\n $error ? theme.color.feedback.negative[200] : theme.color.border.subtle};\n outline: none;\n\n &:hover,\n &:focus,\n &:focus-visible {\n border-color: ${({ $error, theme }) =>\n $error ? theme.color.feedback.negative[200] : theme.color.border.base};\n }\n`\n"]}
|