Add new revamped dropdown widget #9815
Conversation
… into feature/text-input
This is fixed. |
|
Deployment: https://tooljet-pr-9815.onrender.com |
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| }, [currentValue, JSON.stringify(selectOptions)]); | ||
|
|
||
| useEffect(() => { |
There was a problem hiding this comment.
can we split it into multiple functions? Do we really need to update all exposed variables when only one value changes? Atleast we can move out the exposed functions to separate useEffect since new functions are created in every invocations
| height: _height, | ||
| boxShadow: state.isFocused ? boxShadow : boxShadow, | ||
| borderRadius: Number.parseFloat(fieldBorderRadius), | ||
| borderColor: !isValid |
There was a problem hiding this comment.
Can we move all these nested ternary logic to a separate function if its nested more than 3 or 4 levels
Sample:
const getInputBorderColor = () => {
if (!isValid) {
return 'var(--status-error-strong)';
}
if (state.isFocused) {
if (accentColor !== '#4368E3') {
return accentColor;
}
return 'var(--primary-accent-strong)';
}
if (fieldBorderColor !== '#CCD1D5') {
return fieldBorderColor;
}
if (isDropdownDisabled || isDropdownLoading) {
return '1px solid var(--borders-disabled-on-white)';
}
return 'var(--borders-default)';
};
| <> | ||
| <div | ||
| data-cy={`label-${String(component.name).toLowerCase()} `} | ||
| className={`dropdown-widget d-flex ${ |
There was a problem hiding this comment.
can we use classnames package and clean this up.?
|
Closing this PR since this changes are also available in #9837. |
Closes #8228.