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

Fixed button group unselect and some css

Browse source
This commit is contained in:
Shaurya Sharma 2024-11-07 14:53:17 +05:30
parent e81a0b1be9
commit 220beec2a2
3 changed files with 12 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
frontend/src/AppBuilder/WidgetManager/widgets/buttonGroup.js
View file

@ -146,8 +146,8 @@ export const buttonGroupConfig = {
visibility: { value: '{{true}}' },
borderRadius: { value: '{{4}}' },
disabledState: { value: '{{false}}' },
selectedTextColor: { value: '' },
selectedBackgroundColor: { value: '' },
selectedTextColor: { value: '#FFFFFF' },
selectedBackgroundColor: { value: '#4368E3' },
},
},
};

9
frontend/src/Editor/Components/ButtonGroup.jsx
View file

@ -34,6 +34,12 @@ export const ButtonGroup = function Button({
display: visibility ? '' : 'none',
};
const disabledStyles = {
opacity: 0.5,
pointerEvents: 'none',
cursor: 'not-allowed',
};
const [defaultActive, setDefaultActive] = useState(defaultSelected);
const [data, setData] = useState(values);
@ -62,7 +68,7 @@ export const ButtonGroup = function Button({
const buttonClick = (index) => {
if (defaultActive?.includes(values[index]) && multiSelection) {
const copyDefaultActive = defaultActive;
const copyDefaultActive = [...defaultActive];
copyDefaultActive?.splice(copyDefaultActive?.indexOf(values[index]), 1);
setDefaultActive(copyDefaultActive);
setExposedVariable('selected', copyDefaultActive.join(','));
@ -100,6 +106,7 @@ export const ButtonGroup = function Button({
color: defaultActive?.includes(values[index]) ? selectedTextColor : textColor,
transition: 'all .1s ease',
boxShadow,
...(disabledState && disabledStyles),
}}
key={index}
disabled={disabledState}

4
server/src/helpers/widget-config/buttonGroup.js
View file

@ -146,8 +146,8 @@ export const buttonGroupConfig = {
visibility: { value: '{{true}}' },
borderRadius: { value: '{{4}}' },
disabledState: { value: '{{false}}' },
selectedTextColor: { value: '' },
selectedBackgroundColor: { value: '' },
selectedTextColor: { value: '#FFFFFF' },
selectedBackgroundColor: { value: '#4368E3' },
},
},
};