react-core-ts 1.3.7 → 1.3.9
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.
- package/dist/ReactTextArea.js +26 -6
- package/dist/ReactTextArea.js.map +1 -1
- package/dist/styles/styles/components/autocomplete.css +621 -0
- package/dist/styles/styles/components/selectedautocomplete.css +130 -0
- package/dist/styles/styles/components/tooltip.css +496 -0
- package/dist/styles/styles/components/treedropdown.css +63 -0
- package/dist/styles/styles/global.css +8 -0
- package/docs/App.tsx +11 -0
- package/package.json +1 -1
- package/src/ReactTextArea.tsx +33 -10
package/src/ReactTextArea.tsx
CHANGED
|
@@ -93,24 +93,47 @@ const ModernTextArea: React.FC<TextAreaProps> = ({
|
|
|
93
93
|
' text-grey-dark border-input-light focus:border-blue-navy focus:outline-none focus:ring-0';
|
|
94
94
|
}
|
|
95
95
|
break;
|
|
96
|
-
case 'label':
|
|
97
|
-
className += `
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
96
|
+
case 'label': // changes made for remove bg-white from placeolder is field disable and or with data
|
|
97
|
+
className += ` modern-input-label peer-focus:modern-input-peer-focus-label-size absolute duration-300 transform -translate-y-4 top-2 z-1 origin-[0] px-0
|
|
98
|
+
peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-2
|
|
99
|
+
peer-focus:-translate-y-4 start-[14px] rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto ${
|
|
100
|
+
isDisabled ? 'cursor-pointer' : 'cursor-text peer-focus:cursor-pointer'
|
|
101
|
+
} ${
|
|
102
|
+
!isDisabled || !checkIsEmptyField()
|
|
103
|
+
? 'active-input-label-bg'
|
|
104
|
+
: isDisabled && !checkIsEmptyField()
|
|
105
|
+
? 'disabled-input-label-bg'
|
|
106
|
+
: ''
|
|
107
|
+
} ${
|
|
104
108
|
checkIsEmptyField()
|
|
105
109
|
? 'modern-input-label-size'
|
|
106
110
|
: 'modern-input-peer-focus-label-size'
|
|
107
|
-
}
|
|
111
|
+
}`;
|
|
112
|
+
|
|
108
113
|
if (errors && errors[name]) {
|
|
109
114
|
className += ' text-error-light ';
|
|
110
115
|
} else {
|
|
111
116
|
className += ' text-grey-dark peer-focus:text-blue-navy';
|
|
112
117
|
}
|
|
113
118
|
break;
|
|
119
|
+
// case 'label':
|
|
120
|
+
// className += `modern-input-label peer-focus:modern-input-peer-focus-label-size
|
|
121
|
+
// px-0
|
|
122
|
+
// absolute text-sm duration-300 transform -translate-y-4 top-2 z-1 origin-[0] peer-placeholder-shown:-translate-y-1 peer-placeholder-shown:top-[16px] peer-focus:top-2 peer-focus:-translate-y-4 start-[14px] rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto ${
|
|
123
|
+
// isDisabled
|
|
124
|
+
// ? 'cursor-pointer'
|
|
125
|
+
// : 'cursor-text peer-focus:cursor-pointer'
|
|
126
|
+
// } ${!isDisabled || !checkIsEmptyField() ? 'bg-white' : ''} ${
|
|
127
|
+
// checkIsEmptyField()
|
|
128
|
+
// ? 'modern-input-label-size'
|
|
129
|
+
// : 'modern-input-peer-focus-label-size'
|
|
130
|
+
// } `;
|
|
131
|
+
// if (errors && errors[name]) {
|
|
132
|
+
// className += ' text-error-light ';
|
|
133
|
+
// } else {
|
|
134
|
+
// className += ' text-grey-dark peer-focus:text-blue-navy';
|
|
135
|
+
// }
|
|
136
|
+
// break;
|
|
114
137
|
case 'message':
|
|
115
138
|
className = ' text-error-icon ';
|
|
116
139
|
break;
|
|
@@ -176,7 +199,7 @@ const ModernTextArea: React.FC<TextAreaProps> = ({
|
|
|
176
199
|
/>
|
|
177
200
|
{!hideLabel && (
|
|
178
201
|
<label
|
|
179
|
-
htmlFor=
|
|
202
|
+
htmlFor={id}
|
|
180
203
|
onClick={() => onLabelClick()}
|
|
181
204
|
className={generateClassName('label')}
|
|
182
205
|
>
|