@elementor/editor-editing-panel 1.3.0 → 1.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +28 -1
- package/dist/index.js +650 -635
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +543 -528
- package/dist/index.mjs.map +1 -1
- package/package.json +6 -5
- package/src/components/conditional-tooltip-wrapper.tsx +52 -0
- package/src/components/css-class-selector.tsx +59 -19
- package/src/components/multi-combobox/types.ts +1 -0
- package/src/components/style-sections/layout-section/gap-control-field.tsx +18 -0
- package/src/components/style-sections/layout-section/layout-section.tsx +2 -0
- package/src/components/style-sections/position-section/position-field.tsx +6 -2
- package/src/components/style-sections/position-section/position-section.tsx +51 -30
- package/src/components/style-tab.tsx +2 -11
- package/src/contexts/style-context.tsx +2 -2
- package/src/dynamics/components/dynamic-selection-control.tsx +3 -5
- package/src/dynamics/components/dynamic-selection.tsx +6 -6
- package/src/hooks/use-persist-dynamic-value.ts +11 -0
- package/src/hooks/use-session-storage.ts +46 -0
- package/src/hooks/use-styles-field.ts +8 -42
- package/src/hooks/use-styles-fields.ts +32 -0
- package/src/hooks/use-prop-value-history.ts +0 -45
- package/src/hooks/use-style-prop-history.ts +0 -75
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
import { useCallback, useMemo } from 'react';
|
|
2
|
-
import { getSessionStorageItem, setSessionStorageItem } from '@elementor/utils';
|
|
3
|
-
|
|
4
|
-
import { useElement } from '../contexts/element-context';
|
|
5
|
-
|
|
6
|
-
export const PROPS_VALUES_HISTORY_PREFIX = 'elementor/editor-editing-panel/prop-value-history';
|
|
7
|
-
|
|
8
|
-
export const usePropValueHistory = () => {
|
|
9
|
-
const { element } = useElement();
|
|
10
|
-
const elementKey = `${ PROPS_VALUES_HISTORY_PREFIX }/${ element.id }`;
|
|
11
|
-
|
|
12
|
-
const getElementPropsHistory = useCallback( () => {
|
|
13
|
-
return getSessionStorageItem< Record< string, unknown > >( elementKey );
|
|
14
|
-
}, [ elementKey ] );
|
|
15
|
-
|
|
16
|
-
const getPropValue = useCallback(
|
|
17
|
-
< T >( propKey: string ) => {
|
|
18
|
-
const elementPropValues = getElementPropsHistory();
|
|
19
|
-
return ( elementPropValues?.[ propKey ] ?? null ) as T | null;
|
|
20
|
-
},
|
|
21
|
-
[ getElementPropsHistory ]
|
|
22
|
-
);
|
|
23
|
-
|
|
24
|
-
const setPropValue = useCallback(
|
|
25
|
-
( propKey: string, propValue: unknown ) => {
|
|
26
|
-
const elementPropValues = getElementPropsHistory();
|
|
27
|
-
const updatedElementPropValues = { ...elementPropValues, [ propKey ]: propValue };
|
|
28
|
-
setSessionStorageItem( elementKey, updatedElementPropValues );
|
|
29
|
-
},
|
|
30
|
-
[ getElementPropsHistory, elementKey ]
|
|
31
|
-
);
|
|
32
|
-
|
|
33
|
-
const removeProp = useCallback(
|
|
34
|
-
( propKey: string ) => {
|
|
35
|
-
const elementPropValues = getElementPropsHistory();
|
|
36
|
-
const updatedElementPropValues = Object.fromEntries(
|
|
37
|
-
Object.entries( elementPropValues || {} ).filter( ( [ key ] ) => key !== propKey )
|
|
38
|
-
);
|
|
39
|
-
setSessionStorageItem( elementKey, updatedElementPropValues );
|
|
40
|
-
},
|
|
41
|
-
[ getElementPropsHistory, elementKey ]
|
|
42
|
-
);
|
|
43
|
-
|
|
44
|
-
return useMemo( () => ( { getPropValue, setPropValue, removeProp } ), [ getPropValue, removeProp, setPropValue ] );
|
|
45
|
-
};
|
|
@@ -1,75 +0,0 @@
|
|
|
1
|
-
import { useCallback, useMemo } from 'react';
|
|
2
|
-
import { getElementStyles, getVariantByMeta, updateStyle } from '@elementor/editor-elements';
|
|
3
|
-
import { type PropKey } from '@elementor/editor-props';
|
|
4
|
-
|
|
5
|
-
import { useElement } from '../contexts/element-context';
|
|
6
|
-
import { useStyle } from '../contexts/style-context';
|
|
7
|
-
import { usePropValueHistory } from './use-prop-value-history';
|
|
8
|
-
|
|
9
|
-
export const useStylePropsHistory = ( props: PropKey[] ) => {
|
|
10
|
-
const { element } = useElement();
|
|
11
|
-
const { id: styleDefID, meta } = useStyle();
|
|
12
|
-
const { getPropValue, setPropValue, removeProp } = usePropValueHistory();
|
|
13
|
-
|
|
14
|
-
const styleDef = getElementStyles( element.id )?.[ styleDefID ];
|
|
15
|
-
const styleVariant = styleDef ? getVariantByMeta( styleDef, meta ) : null;
|
|
16
|
-
const styleVariantPath = `${ styleDefID }-${ styleVariant?.meta.breakpoint }-${ styleVariant?.meta.state }`;
|
|
17
|
-
|
|
18
|
-
const saveStylePropsHistory = useCallback( () => {
|
|
19
|
-
props.forEach( ( propKey ) => {
|
|
20
|
-
const propValue = styleVariant?.props[ propKey ];
|
|
21
|
-
|
|
22
|
-
if ( propValue ) {
|
|
23
|
-
const propPath = `${ styleVariantPath }-${ propKey }`;
|
|
24
|
-
setPropValue( propPath, propValue );
|
|
25
|
-
}
|
|
26
|
-
} );
|
|
27
|
-
}, [ props, setPropValue, styleVariant?.props, styleVariantPath ] );
|
|
28
|
-
|
|
29
|
-
const updateStylePropsFromHistory = useCallback( () => {
|
|
30
|
-
const propValuesFromHistory = props.reduce( ( allProps, currentPropKey ) => {
|
|
31
|
-
const propPath = `${ styleVariantPath }-${ currentPropKey }`;
|
|
32
|
-
const propHistory = getPropValue( propPath );
|
|
33
|
-
|
|
34
|
-
if ( propHistory ) {
|
|
35
|
-
removeProp( propPath );
|
|
36
|
-
return { ...allProps, [ currentPropKey ]: propHistory };
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
return allProps;
|
|
40
|
-
}, {} );
|
|
41
|
-
|
|
42
|
-
if ( Object.keys( propValuesFromHistory ).length ) {
|
|
43
|
-
updateStyle( {
|
|
44
|
-
elementID: element.id,
|
|
45
|
-
styleDefID,
|
|
46
|
-
meta,
|
|
47
|
-
props: propValuesFromHistory,
|
|
48
|
-
bind: 'classes',
|
|
49
|
-
} );
|
|
50
|
-
}
|
|
51
|
-
}, [ element.id, getPropValue, meta, props, removeProp, styleDefID, styleVariantPath ] );
|
|
52
|
-
|
|
53
|
-
const clearCurrentStyleProps = useCallback( () => {
|
|
54
|
-
const resetValues = props.reduce(
|
|
55
|
-
( allProps, currentPropKey ) => ( {
|
|
56
|
-
...allProps,
|
|
57
|
-
[ currentPropKey ]: undefined,
|
|
58
|
-
} ),
|
|
59
|
-
{}
|
|
60
|
-
);
|
|
61
|
-
|
|
62
|
-
updateStyle( {
|
|
63
|
-
elementID: element.id,
|
|
64
|
-
styleDefID,
|
|
65
|
-
meta,
|
|
66
|
-
props: resetValues,
|
|
67
|
-
bind: 'classes',
|
|
68
|
-
} );
|
|
69
|
-
}, [ element.id, meta, props, styleDefID ] );
|
|
70
|
-
|
|
71
|
-
return useMemo(
|
|
72
|
-
() => ( { saveStylePropsHistory, updateStylePropsFromHistory, clearCurrentStyleProps } ),
|
|
73
|
-
[ saveStylePropsHistory, updateStylePropsFromHistory, clearCurrentStyleProps ]
|
|
74
|
-
);
|
|
75
|
-
};
|