const handleButtonStates = useCallback(
(type, val, item, cType) => {
const nstates = ['BtnDefault', 'BtnHovered', 'BtnPressed'];
const nvalues = ['default', 'hovered', 'pressed'];
const index = nstates.findIndex(obj => obj === item?.accessor);
let newStateObj = {};
nstates.forEach((el, i) => {
if (i === index) {
newStateObj[nvalues[i]] = {
...settingsState?.[el],
state: 'active',
background: type === 'background' ? val : settingsState?.[el]?.background,
color: type === 'color' ? val : settingsState?.[el]?.color,
subcolor: type === 'subcolor' ? val : settingsState?.[el]?.subcolor,
};
} else {
newStateObj[nvalues[i]] = {
...settingsState?.[el],
state: 'inactive',
};
}
});
const bStyles = ['elHovered', 'elActive'];
const allClass = component.attributes.components.models[0]?.getClasses();
const els = allClass?.filter(item => bStyles?.includes(item));
let _component = getComponentModel(component,"sub");
if (els?.length) {
_component.removeClass(els?.[0]);
}
const rule = getRuleName(component, cType);
// const cid = component.attributes.components.models[0]?.getId();
// const identifier = component.attributes.components.models[0]
// .getClasses()
// ?.find(item => {
// return item?.includes('btn-');
// });
// const ncid = identifier ? identifier?.replace('btn-', '') : cid;
if (item.accessor === 'BtnHovered') {
const rule1 = getRuleName(component);
const cmp = getComponentModel(component,'sub')
const rule2 = getRuleName(component,"main");
// if (!identifier) {
// component.attributes.components.models[0]?.addClass(`btn-${ncid}`);
// }
// cmp.removeClass('elActive')
cmp.addClass('elHovered')
// _component.addClass('elHovered');
const hoverCss = editor.Css;
// hoverCss.setRule(`${rule}.elButton:not(:active):not(.elActive):hover`, {
// 'background-color': `${
// type === 'background' ? val : settingsState?.['BtnHovered']?.background
// }`,
// color: `${type === 'color' ? val : settingsState?.['BtnHovered']?.color}`,
// });
// hoverCss.setRule(`${rule}.elButton.elHovered`, {
// 'background-color': `${
// type === 'background' ? val : settingsState?.['BtnHovered']?.background
// }`,
// color: `${type === 'color' ? val : settingsState?.['BtnHovered']?.color}`,
// });
if (type === 'background') {
hoverCss.setRule(`${rule}:not(:active):not(.elActive):hover`, {
'background-color': `${
type === 'background' ? val : settingsState?.['BtnHovered']?.background
}`,
// color: `${type === 'color' ? val : settingsState?.['BtnDefault']?.color}`,
// subcolor: `${
// type === 'subcolor' ? val : settingsState?.['BtnDefault']?.subcolor
// }`,
});
hoverCss.setRule(`${rule2} .elHovered`, {
'background-color': `${
type === 'background' ? val : settingsState?.['BtnHovered']?.background
}`,
// color: `${type === 'color' ? val : settingsState?.['BtnDefault']?.color}`,
// subcolor: `${
// type === 'subcolor' ? val : settingsState?.['BtnDefault']?.subcolor
// }`,
});
} else if (type === 'color') {
hoverCss.setRule(
`${rule1}:not(:active):not(.elActive):hover div .elButtonPrimary`,
{
// 'background-color': `${
// type === 'background' ? val : settingsState?.['BtnDefault']?.background
// }`,
color: `${
type === 'color' ? val : settingsState?.['BtnHovered']?.color
}`,
// subcolor: `${
// type === 'subcolor' ? val : settingsState?.['BtnDefault']?.subcolor
// }`,
},
);
hoverCss.setRule(`${rule2} .elHovered div .elButtonPrimary`, {
// 'background-color': `${
// type === 'background' ? val : settingsState?.['BtnDefault']?.background
// }`,
color: `${type === 'color' ? val : settingsState?.['BtnHovered']?.color} !important`,
// subcolor: `${
// type === 'subcolor' ? val : settingsState?.['BtnDefault']?.subcolor
// }`,
});
} else if (type === 'subcolor') {
hoverCss.setRule(
`${rule1}:not(:active):not(.elActive):hover div .elButtonSub`,
{
// 'background-color': `${
// type === 'background' ? val : settingsState?.['BtnDefault']?.background
// }`,
// color: `${type === 'color' ? val : settingsState?.['BtnDefault']?.color}`,
color: `${
type === 'subcolor' ? val : settingsState?.['BtnHovered']?.subcolor
}`,
},
);
hoverCss.setRule(`${rule2} .elHovered div .elButtonSub`, {
// 'background-color': `${
// type === 'background' ? val : settingsState?.['BtnDefault']?.background
// }`,
color: `${
type === 'subcolor' ? val : settingsState?.['BtnHovered']?.subcolor
}!important`,
// subcolor: `${
// type === 'subcolor' ? val : settingsState?.['BtnDefault']?.subcolor
// }`,
});
}
} else if (item?.accessor === 'BtnPressed') {
// if (!identifier) {
// component.attributes.components.models[0]?.addClass(`btn-${ncid}`);
// }
const cmp = getComponentModel(component,'sub')
const rule2 = getRuleName(component,"main");
cmp.addClass('elActive')
// _component?.addClass('elActive');
const hoverCss = editor.Css;
const rule1 = getRuleName(component);
// hoverCss.setRule(`${rule}.elButton:active`, {
// 'background-color': `${
// type === 'background' ? val : settingsState?.['BtnPressed']?.background
// }`,
// color: `${type === 'color' ? val : settingsState?.['BtnPressed']?.color}`,
// });
// hoverCss.setRule(`${rule}.elButton.elActive`, {
// 'background-color': `${
// type === 'background' ? val : settingsState?.['BtnPressed']?.background
// }`,
// color: `${type === 'color' ? val : settingsState?.['BtnPressed']?.color}`,
// });
if (type === 'background') {
hoverCss.setRule(`${rule}:active`, {
'background-color': `${
type === 'background' ? val : settingsState?.['BtnPressed']?.background
}`,
// color: `${type === 'color' ? val : settingsState?.['BtnDefault']?.color}`,
// subcolor: `${
// type === 'subcolor' ? val : settingsState?.['BtnDefault']?.subcolor
// }`,
});
hoverCss.setRule(`${rule2} .elActive`, {
'background-color': `${
type === 'background' ? val : settingsState?.['BtnPressed']?.background
}`,
// color: `${type === 'color' ? val : settingsState?.['BtnDefault']?.color}`,
// subcolor: `${
// type === 'subcolor' ? val : settingsState?.['BtnDefault']?.subcolor
// }`,
});
} else if (type === 'color') {
hoverCss.setRule(`${rule1}:active div .elButtonPrimary`, {
// 'background-color': `${
// type === 'background' ? val : settingsState?.['BtnDefault']?.background
// }`,
color: `${type === 'color' ? val : settingsState?.['BtnPressed']?.color}`,
// subcolor: `${
// type === 'subcolor' ? val : settingsState?.['BtnDefault']?.subcolor
// }`,
});
hoverCss.setRule(`${rule2} .elActive div .elButtonPrimary`, {
// 'background-color': `${
// type === 'background' ? val : settingsState?.['BtnDefault']?.background
// }`,
color: `${type === 'color' ? val : settingsState?.['BtnPressed']?.color} !important`,
// subcolor: `${
// type === 'subcolor' ? val : settingsState?.['BtnDefault']?.subcolor
// }`,
});
} else if (type === 'subcolor') {
hoverCss.setRule(`${rule1}:active div .elButtonSub`, {
// 'background-color': `${
// type === 'background' ? val : settingsState?.['BtnDefault']?.background
// }`,
// color: `${type === 'color' ? val : settingsState?.['BtnDefault']?.color}`,
color: `${
type === 'subcolor' ? val : settingsState?.['BtnPressed']?.subcolor
}`,
});
hoverCss.setRule(`${rule2} .elActive .elButtonSub`, {
// 'background-color': `${
// type === 'background' ? val : settingsState?.['BtnDefault']?.background
// }`,
color: `${
type === 'subcolor' ? val : settingsState?.['BtnPressed']?.subcolor
} !important`,
// subcolor: `${
// type === 'subcolor' ? val : settingsState?.['BtnDefault']?.subcolor
// }`,
});
}
} else if (item?.accessor === 'BtnDefault') {
// if (!identifier) {
// component.attributes.components.models[0]?.addClass(`btn-${ncid}`);
// }
const hoverCss = editor.Css;
if (type === 'background') {
hoverCss.setRule(`${rule}`, {
...editor.Css.getRule(`${rule}`)?.attributes?.style,
'background-color': `${
type === 'background' ? val : settingsState?.['BtnDefault']?.background
}`,
// color: `${type === 'color' ? val : settingsState?.['BtnDefault']?.color}`,
// subcolor: `${
// type === 'subcolor' ? val : settingsState?.['BtnDefault']?.subcolor
// }`,
});
} else if (type === 'color') {
hoverCss.setRule(`${rule}`, {
...editor.Css.getRule(`${rule}`)?.attributes?.style,
// 'background-color': `${
// type === 'background' ? val : settingsState?.['BtnDefault']?.background
// }`,
color: `${type === 'color' ? val : settingsState?.['BtnDefault']?.color}`,
// subcolor: `${
// type === 'subcolor' ? val : settingsState?.['BtnDefault']?.subcolor
// }`,
});
if (
settingsState?.['IconDefaultBeforeColor'] === 'default' ||
settingsState?.['IconDefaultAfterColor'] === 'default'
) {
let obj = {};
let svgDefault1 = settingsState?.['IconDefaultBeforeColor'] === 'default';
let svgDefault2 = settingsState?.['IconDefaultAfterColor'] === 'default';
if (
settingsState?.['IconDefaultBeforeColor'] === 'default' &&
settingsState?.['IconDefaultAfterColor'] === 'default'
) {
obj = {
IconBeforeColor: val,
IconAfterColor: val,
};
} else if (settingsState?.['IconDefaultBeforeColor'] === 'default') {
obj = { IconBeforeColor: val };
} else {
obj = { IconAfterColor: val };
}
handleIconBeforeAfterDefault(
val,
{ ...obj },
'fill',
false,
svgDefault1,
svgDefault2,
);
}
} else if (type === 'subcolor') {
hoverCss.setRule(`${rule}`, {
...editor.Css.getRule(`${rule}`)?.attributes?.style,
// 'background-color': `${
// type === 'background' ? val : settingsState?.['BtnDefault']?.background
// }`,
// color: `${type === 'color' ? val : settingsState?.['BtnDefault']?.color}`,
color: `${
type === 'subcolor' ? val : settingsState?.['BtnDefault']?.subcolor
}`,
});
}
// hoverCss.setRule(`${rule}`, {
// 'background-color': `${
// type === 'background' ? val : settingsState?.['BtnDefault']?.background
// }`,
// color: `${type === 'color' ? val : settingsState?.['BtnDefault']?.color}`,
// subcolor: `${
// type === 'subcolor' ? val : settingsState?.['BtnDefault']?.subcolor
// }`,
// });
}
dispatch({
type: 'BtnState',
value: {
...newStateObj,
},
});
},
[component, editor?.Css, handleIconBeforeAfterDefault, settingsState],
);