Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-22 16:38:21 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 8

feat: Add customizable border color for text input component (#4191)

Browse source 
* feat: Add customizable border color for text input component

* Update widgetConfig.js

* chore: Fix linter issues
This commit is contained in:
Santosh Bhandari 2022-10-26 11:00:43 +05:45 committed by GitHub
parent 0853685c24
commit 0c895e2e4e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 14 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
frontend/src/Editor/Components/TextInput.jsx
View file

@ -13,13 +13,18 @@ export const TextInput = function TextInput({
}) {
const textInputRef = useRef();
const textColor = darkMode && styles.textColor === '#000' ? '#fff' : styles.textColor;
const [disable, setDisable] = useState(styles.disabledState);
const [value, setValue] = useState(properties.value);
const [visibility, setVisibility] = useState(styles.visibility);
const { isValid, validationError } = validate(value);
const computedStyles = {
height,
borderRadius: `${styles.borderRadius}px`,
color: darkMode && styles.textColor === '#000' ? '#fff' : styles.textColor,
borderColor: styles.borderColor,
};
useEffect(() => {
disable !== styles.disabledState && setDisable(styles.disabledState);
}, [styles.disabledState]);
@ -98,7 +103,7 @@ export const TextInput = function TextInput({
darkMode && 'dark-theme-placeholder'
}`}
placeholder={properties.placeholder}
style={{ height, borderRadius: `${styles.borderRadius}px`, color: textColor }}
style={computedStyles}
value={value}
data-cy={`draggable-widget-${String(component.name).toLowerCase()}`}
/>

6
frontend/src/Editor/WidgetManager/widgetConfig.js
View file

@ -954,6 +954,11 @@ export const widgets = [
displayName: 'Text Color',
validation: { schema: { type: 'string' } },
},
borderColor: {
type: 'color',
displayName: 'Border Color',
validation: { schema: { type: 'string' } },
},
borderRadius: {
type: 'code',
displayName: 'Border radius',
@ -1012,6 +1017,7 @@ export const widgets = [
events: [],
styles: {
textColor: { value: '#000' },
borderColor: { value: '#dadcde' },
borderRadius: { value: '{{0}}' },
visibility: { value: '{{true}}' },
disabledState: { value: '{{false}}' },