Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-24 01:18:23 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

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 textInputRef = useRef();
const textColor = darkMode && styles.textColor === '#000' ? '#fff' : styles.textColor;
const [disable, setDisable] = useState(styles.disabledState); const [disable, setDisable] = useState(styles.disabledState);
const [value, setValue] = useState(properties.value); const [value, setValue] = useState(properties.value);
const [visibility, setVisibility] = useState(styles.visibility); const [visibility, setVisibility] = useState(styles.visibility);
const { isValid, validationError } = validate(value); const { isValid, validationError } = validate(value);
const computedStyles = {
height,
borderRadius: `${styles.borderRadius}px`,
color: darkMode && styles.textColor === '#000' ? '#fff' : styles.textColor,
borderColor: styles.borderColor,
};
useEffect(() => { useEffect(() => {
disable !== styles.disabledState && setDisable(styles.disabledState); disable !== styles.disabledState && setDisable(styles.disabledState);
}, [styles.disabledState]); }, [styles.disabledState]);
@ -98,7 +103,7 @@ export const TextInput = function TextInput({
darkMode && 'dark-theme-placeholder' darkMode && 'dark-theme-placeholder'
}`} }`}
placeholder={properties.placeholder} placeholder={properties.placeholder}
style={{ height, borderRadius: `${styles.borderRadius}px`, color: textColor }} style={computedStyles}
value={value} value={value}
data-cy={`draggable-widget-${String(component.name).toLowerCase()}`} 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', displayName: 'Text Color',
validation: { schema: { type: 'string' } }, validation: { schema: { type: 'string' } },
}, },
borderColor: {
type: 'color',
displayName: 'Border Color',
validation: { schema: { type: 'string' } },
},
borderRadius: { borderRadius: {
type: 'code', type: 'code',
displayName: 'Border radius', displayName: 'Border radius',
@ -1012,6 +1017,7 @@ export const widgets = [
events: [], events: [],
styles: { styles: {
textColor: { value: '#000' }, textColor: { value: '#000' },
borderColor: { value: '#dadcde' },
borderRadius: { value: '{{0}}' }, borderRadius: { value: '{{0}}' },
visibility: { value: '{{true}}' }, visibility: { value: '{{true}}' },
disabledState: { value: '{{false}}' }, disabledState: { value: '{{false}}' },