@team-monolith/cds 1.38.1 → 1.38.2
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.
|
@@ -12,10 +12,13 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
12
12
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
13
13
|
import { useState } from "react";
|
|
14
14
|
import Input from "../../../../components/Input";
|
|
15
|
+
import { css as cssToClassName } from "@emotion/css";
|
|
16
|
+
import { useTheme } from "@emotion/react";
|
|
15
17
|
/** 읽기모드/편집모드가 가능한 input 컴포넌트 */
|
|
16
18
|
export default function TextInput(props) {
|
|
17
19
|
const { readOnly, isCorrect } = props, inputOriginalProps = __rest(props, ["readOnly", "isCorrect"]);
|
|
18
20
|
const [focus, setFocus] = useState(false);
|
|
21
|
+
const theme = useTheme();
|
|
19
22
|
if (readOnly) {
|
|
20
23
|
return (_jsx(Input, Object.assign({}, inputOriginalProps, { color: isCorrect === true
|
|
21
24
|
? "activeSuccess"
|
|
@@ -23,6 +26,15 @@ export default function TextInput(props) {
|
|
|
23
26
|
? "activeDanger"
|
|
24
27
|
: inputOriginalProps.color, inputProps: {
|
|
25
28
|
readOnly: true,
|
|
29
|
+
className: isCorrect === false
|
|
30
|
+
? cssToClassName `
|
|
31
|
+
color: ${theme.color.foreground.danger};
|
|
32
|
+
&::placeholder {
|
|
33
|
+
// inputComponent의 placeholder 스타일을 덮어쓰기 위해 부득이하게 !important 사용
|
|
34
|
+
color: ${theme.color.foreground.dangerDisabled} !important;
|
|
35
|
+
}
|
|
36
|
+
`
|
|
37
|
+
: undefined,
|
|
26
38
|
} })));
|
|
27
39
|
}
|
|
28
40
|
return (_jsx(Input, Object.assign({}, inputOriginalProps, { color: focus ? "activePrimary" : inputOriginalProps.color, inputProps: {
|