Untitled
unknown
plain_text
a year ago
17 kB
3
Indexable
Never
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], );