@titaui/pc 1.12.39 → 1.12.40
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,4 +1,4 @@
|
|
|
1
|
-
.titaui-textArea {
|
|
1
|
+
.titaui-textArea-content {
|
|
2
2
|
box-sizing: border-box;
|
|
3
3
|
position: relative;
|
|
4
4
|
min-height: 36px;
|
|
@@ -11,132 +11,132 @@
|
|
|
11
11
|
transition: border 0.2s ease 0.2s, box-shadow 0.2s ease 0.2s;
|
|
12
12
|
}
|
|
13
13
|
|
|
14
|
-
.titaui-textArea
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
border: 1px solid #2879ff;
|
|
14
|
+
.titaui-textArea-content-inner {
|
|
15
|
+
overflow: auto;
|
|
16
|
+
display: flex;
|
|
17
|
+
flex: 1;
|
|
18
|
+
width: 0;
|
|
20
19
|
}
|
|
21
20
|
|
|
22
|
-
.titaui-textArea
|
|
23
|
-
flex
|
|
21
|
+
.titaui-textArea-content-inner textarea {
|
|
22
|
+
flex: 1;
|
|
23
|
+
line-height: 20px;
|
|
24
|
+
min-height: 20px;
|
|
24
25
|
border: none;
|
|
25
|
-
padding: 0
|
|
26
|
+
padding: 0;
|
|
26
27
|
margin: 0;
|
|
27
28
|
outline: none;
|
|
28
|
-
|
|
29
|
+
resize: none;
|
|
30
|
+
padding: 0 12px;
|
|
31
|
+
width: 100%;
|
|
29
32
|
box-sizing: border-box;
|
|
30
33
|
background-color: transparent;
|
|
31
34
|
color: #3f4755;
|
|
35
|
+
word-break: break-all;
|
|
32
36
|
}
|
|
33
37
|
|
|
34
|
-
.titaui-textArea
|
|
38
|
+
.titaui-textArea-content-inner textarea ::-webkit-input-placeholder {
|
|
35
39
|
color: #bfc7d5;
|
|
36
40
|
}
|
|
37
41
|
|
|
38
|
-
.titaui-textArea
|
|
42
|
+
.titaui-textArea-content-inner textarea :-ms-input-placeholder {
|
|
39
43
|
color: #bfc7d5;
|
|
40
44
|
}
|
|
41
45
|
|
|
42
|
-
.titaui-textArea
|
|
46
|
+
.titaui-textArea-content-inner textarea :-moz-input-placeholder {
|
|
43
47
|
color: #bfc7d5;
|
|
44
48
|
}
|
|
45
49
|
|
|
46
|
-
.titaui-textArea
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
+
.titaui-textArea-content-top-shadow::before {
|
|
51
|
+
content: '';
|
|
52
|
+
border-radius: 8px;
|
|
53
|
+
height: 30px;
|
|
54
|
+
background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
|
|
55
|
+
position: absolute;
|
|
56
|
+
top: 0;
|
|
57
|
+
width: 100%;
|
|
58
|
+
z-index: 2;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.titaui-textArea-content-bottom-shadow::after {
|
|
62
|
+
content: '';
|
|
63
|
+
border-radius: 8px;
|
|
64
|
+
height: 30px;
|
|
65
|
+
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
|
|
66
|
+
position: absolute;
|
|
67
|
+
bottom: 0;
|
|
68
|
+
width: 100%;
|
|
69
|
+
z-index: 2;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.titaui-textArea-content.has-error {
|
|
73
|
+
border: 1px solid #f05e5e !important;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.titaui-textArea-content:hover {
|
|
77
|
+
border: 1px solid #2879ff;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.titaui-textArea-content > input {
|
|
81
|
+
flex-grow: 1;
|
|
50
82
|
border: none;
|
|
51
|
-
padding: 0;
|
|
83
|
+
padding: 0 12px;
|
|
52
84
|
margin: 0;
|
|
53
85
|
outline: none;
|
|
54
|
-
|
|
55
|
-
padding: 0 12px;
|
|
56
|
-
width: 100%;
|
|
86
|
+
width: 0;
|
|
57
87
|
box-sizing: border-box;
|
|
58
88
|
background-color: transparent;
|
|
59
89
|
color: #3f4755;
|
|
60
|
-
word-break: break-all;
|
|
61
90
|
}
|
|
62
91
|
|
|
63
|
-
.titaui-textArea
|
|
92
|
+
.titaui-textArea-content > input ::-webkit-input-placeholder {
|
|
64
93
|
color: #bfc7d5;
|
|
65
94
|
}
|
|
66
95
|
|
|
67
|
-
.titaui-textArea
|
|
96
|
+
.titaui-textArea-content > input :-ms-input-placeholder {
|
|
68
97
|
color: #bfc7d5;
|
|
69
98
|
}
|
|
70
99
|
|
|
71
|
-
.titaui-textArea
|
|
100
|
+
.titaui-textArea-content > input :-moz-input-placeholder {
|
|
72
101
|
color: #bfc7d5;
|
|
73
102
|
}
|
|
74
103
|
|
|
75
|
-
.titaui-textArea.disabled {
|
|
104
|
+
.titaui-textArea-content.disabled {
|
|
76
105
|
background-color: rgba(240, 242, 245, 0.4);
|
|
77
106
|
border-color: #f0f2f5;
|
|
78
107
|
color: #bfc7d5;
|
|
79
108
|
cursor: default;
|
|
80
109
|
}
|
|
81
110
|
|
|
82
|
-
.titaui-textArea.disabled > input,
|
|
83
|
-
.titaui-textArea.disabled textarea,
|
|
84
|
-
.titaui-textArea.disabled .tail-wrapper {
|
|
111
|
+
.titaui-textArea-content.disabled > input,
|
|
112
|
+
.titaui-textArea-content.disabled textarea,
|
|
113
|
+
.titaui-textArea-content.disabled .tail-wrapper {
|
|
85
114
|
color: #bfc7d5;
|
|
86
115
|
}
|
|
87
116
|
|
|
88
|
-
.titaui-textArea.disabled:hover {
|
|
117
|
+
.titaui-textArea-content.disabled:hover {
|
|
89
118
|
border-color: #f0f2f5;
|
|
90
119
|
}
|
|
91
120
|
|
|
92
|
-
.area-error {
|
|
121
|
+
.titaui-textArea-area-error {
|
|
93
122
|
border: 1px solid #f05e5e !important;
|
|
94
123
|
box-shadow: inset 0px 0px 6px 0px rgba(240, 94, 94, 0.3);
|
|
95
124
|
}
|
|
96
125
|
|
|
97
|
-
.area-focus {
|
|
126
|
+
.titaui-textArea-area-focus {
|
|
98
127
|
border: 1px solid #2879ff !important;
|
|
99
128
|
box-shadow: inset 0px 0px 6px 0px rgba(40, 121, 255, 0.3);
|
|
100
129
|
}
|
|
101
130
|
|
|
102
|
-
.area-normal {
|
|
131
|
+
.titaui-textArea-area-normal {
|
|
103
132
|
border: 1px solid #e9ecf0 !important;
|
|
104
133
|
box-shadow: none;
|
|
105
134
|
}
|
|
106
135
|
|
|
107
|
-
.
|
|
108
|
-
overflow: auto;
|
|
109
|
-
display: flex;
|
|
110
|
-
flex: 1;
|
|
111
|
-
width: 0;
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
.err-color {
|
|
136
|
+
.titaui-textArea-err-color {
|
|
115
137
|
font-size: 12px;
|
|
116
138
|
font-weight: 400;
|
|
117
139
|
color: #f05e5e;
|
|
118
140
|
line-height: 18px;
|
|
119
141
|
padding-left: 12px;
|
|
120
142
|
}
|
|
121
|
-
|
|
122
|
-
.commonTextAreaWrapperTopShadow::before {
|
|
123
|
-
content: '';
|
|
124
|
-
border-radius: 8px;
|
|
125
|
-
height: 30px;
|
|
126
|
-
background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
|
|
127
|
-
position: absolute;
|
|
128
|
-
top: 0;
|
|
129
|
-
width: 100%;
|
|
130
|
-
z-index: 2;
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
.commonTextAreaWrapperBottomShadow::after {
|
|
134
|
-
content: '';
|
|
135
|
-
border-radius: 8px;
|
|
136
|
-
height: 30px;
|
|
137
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
|
|
138
|
-
position: absolute;
|
|
139
|
-
bottom: 0;
|
|
140
|
-
width: 100%;
|
|
141
|
-
z-index: 2;
|
|
142
|
-
}
|
|
@@ -9,7 +9,7 @@ exports["default"] = void 0;
|
|
|
9
9
|
|
|
10
10
|
var _react = _interopRequireWildcard(require("react"));
|
|
11
11
|
|
|
12
|
-
var
|
|
12
|
+
var _classnames2 = _interopRequireDefault(require("classnames"));
|
|
13
13
|
|
|
14
14
|
require("./index.css");
|
|
15
15
|
|
|
@@ -23,6 +23,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
23
23
|
|
|
24
24
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
25
25
|
|
|
26
|
+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
27
|
+
|
|
26
28
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
27
29
|
|
|
28
30
|
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
@@ -40,6 +42,8 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
|
|
|
40
42
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
41
43
|
|
|
42
44
|
var Textarea = function Textarea(p) {
|
|
45
|
+
var _classnames;
|
|
46
|
+
|
|
43
47
|
var disabled = p.disabled,
|
|
44
48
|
_onFocus = p.onFocus,
|
|
45
49
|
_onBlur = p.onBlur,
|
|
@@ -155,9 +159,9 @@ var Textarea = function Textarea(p) {
|
|
|
155
159
|
setIsTrue(false);
|
|
156
160
|
};
|
|
157
161
|
|
|
158
|
-
var areaNormal = isTrue ? "area-focus" : "area-normal";
|
|
159
|
-
var areaFocus = active ? "area-focus" : areaNormal;
|
|
160
|
-
var areaError = error ? "area-error" : areaFocus;
|
|
162
|
+
var areaNormal = isTrue ? "".concat(prefixCls, "-area-focus") : "".concat(prefixCls, "-area-normal");
|
|
163
|
+
var areaFocus = active ? "".concat(prefixCls, "-area-focus") : areaNormal;
|
|
164
|
+
var areaError = error ? "".concat(prefixCls, "-area-error") : areaFocus;
|
|
161
165
|
(0, _react.useEffect)(function () {
|
|
162
166
|
if (!validateEnable) return;
|
|
163
167
|
var hasError = false;
|
|
@@ -194,8 +198,10 @@ var Textarea = function Textarea(p) {
|
|
|
194
198
|
(0, _react.useEffect)(function () {
|
|
195
199
|
resetTextareaHeight();
|
|
196
200
|
}, [changeEditStatus]);
|
|
197
|
-
return /*#__PURE__*/_react["default"].createElement(
|
|
198
|
-
className: "
|
|
201
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
202
|
+
className: "".concat(prefixCls)
|
|
203
|
+
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
204
|
+
className: "\n ".concat(prefixCls, "-content\n ").concat(areaError, "\n ").concat(disabled ? " disabled" : "", "\n "),
|
|
199
205
|
onFocus: function onFocus() {},
|
|
200
206
|
onBlur: function onBlur() {},
|
|
201
207
|
onMouseOver: changeMoveOver,
|
|
@@ -207,10 +213,7 @@ var Textarea = function Textarea(p) {
|
|
|
207
213
|
(_realInputRef$current = realInputRef.current) === null || _realInputRef$current === void 0 ? void 0 : _realInputRef$current.focus();
|
|
208
214
|
}
|
|
209
215
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
210
|
-
className: (0,
|
|
211
|
-
commonTextAreaWrapperTopShadow: showTopShadow,
|
|
212
|
-
commonTextAreaWrapperBottomShadow: showBottomShadow
|
|
213
|
-
})
|
|
216
|
+
className: (0, _classnames2["default"])("".concat(prefixCls, "-content-inner scrollbar-size-sm"), (_classnames = {}, _defineProperty(_classnames, "".concat(prefixCls, "-content-top-shadow"), showTopShadow), _defineProperty(_classnames, "".concat(prefixCls, "-content-bottom-shadow"), showBottomShadow), _classnames))
|
|
214
217
|
}, /*#__PURE__*/_react["default"].createElement("textarea", _extends({
|
|
215
218
|
className: "".concat(className, " scrollbar-size-sm"),
|
|
216
219
|
disabled: disabled,
|
|
@@ -256,7 +259,7 @@ var Textarea = function Textarea(p) {
|
|
|
256
259
|
}
|
|
257
260
|
}
|
|
258
261
|
}, others)))), error && /*#__PURE__*/_react["default"].createElement("div", {
|
|
259
|
-
className: "err-color"
|
|
262
|
+
className: "".concat(prefixCls, "-err-color")
|
|
260
263
|
}, errorText));
|
|
261
264
|
};
|
|
262
265
|
|