@elementor/editor-global-classes 0.1.0 → 0.1.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 +9 -0
- package/dist/index.js +36 -35
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +37 -36
- package/dist/index.mjs.map +1 -1
- package/package.json +5 -4
- package/src/api.ts +17 -0
- package/src/components/logic-hooks.tsx +6 -33
- package/src/global-classes-styles-provider.ts +20 -3
- package/src/store.ts +5 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,14 @@
|
|
|
1
1
|
# @elementor/editor-global-classes
|
|
2
2
|
|
|
3
|
+
## 0.1.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 317ca04: Load existing global classes on init
|
|
8
|
+
- Updated dependencies [317ca04]
|
|
9
|
+
- @elementor/http@0.1.3
|
|
10
|
+
- @elementor/editor-styles-repository@0.3.1
|
|
11
|
+
|
|
3
12
|
## 0.1.0
|
|
4
13
|
|
|
5
14
|
### Minor Changes
|
package/dist/index.js
CHANGED
|
@@ -9,6 +9,18 @@ var import_store6 = require("@elementor/store");
|
|
|
9
9
|
var import_react = require("react");
|
|
10
10
|
var import_store2 = require("@elementor/store");
|
|
11
11
|
|
|
12
|
+
// src/api.ts
|
|
13
|
+
var import_http = require("@elementor/http");
|
|
14
|
+
var RESOURCE_URL = "/global-classes";
|
|
15
|
+
var apiClient = {
|
|
16
|
+
all: async () => {
|
|
17
|
+
return (0, import_http.httpService)().get(RESOURCE_URL);
|
|
18
|
+
},
|
|
19
|
+
post: async (data) => {
|
|
20
|
+
return (0, import_http.httpService)().post(RESOURCE_URL, { data });
|
|
21
|
+
}
|
|
22
|
+
};
|
|
23
|
+
|
|
12
24
|
// src/store.ts
|
|
13
25
|
var import_store = require("@elementor/store");
|
|
14
26
|
var initialState = {
|
|
@@ -23,6 +35,10 @@ var slice = (0, import_store.__createSlice)({
|
|
|
23
35
|
init(state, { payload }) {
|
|
24
36
|
state.items = payload.items;
|
|
25
37
|
state.order = payload.order;
|
|
38
|
+
},
|
|
39
|
+
add(state, { payload }) {
|
|
40
|
+
state.items[payload.style.id] = payload.style;
|
|
41
|
+
state.order = payload.order;
|
|
26
42
|
}
|
|
27
43
|
}
|
|
28
44
|
});
|
|
@@ -36,41 +52,13 @@ var selectOrderedGlobalClasses = (0, import_store.__createSelector)(
|
|
|
36
52
|
|
|
37
53
|
// src/components/logic-hooks.tsx
|
|
38
54
|
function LogicHooks() {
|
|
39
|
-
const
|
|
55
|
+
const dispatch2 = (0, import_store2.__useDispatch)();
|
|
40
56
|
(0, import_react.useEffect)(() => {
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
label: "Global Class 1",
|
|
47
|
-
type: "class",
|
|
48
|
-
variants: [
|
|
49
|
-
{
|
|
50
|
-
meta: {
|
|
51
|
-
state: null,
|
|
52
|
-
breakpoint: null
|
|
53
|
-
},
|
|
54
|
-
props: {
|
|
55
|
-
color: {
|
|
56
|
-
$$type: "color",
|
|
57
|
-
value: "#aaaaaa"
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
]
|
|
62
|
-
},
|
|
63
|
-
"global-class-2": {
|
|
64
|
-
id: "global-class-2",
|
|
65
|
-
label: "Global Class 2",
|
|
66
|
-
type: "class",
|
|
67
|
-
variants: []
|
|
68
|
-
}
|
|
69
|
-
},
|
|
70
|
-
order: ["global-class-1", "global-class-2"]
|
|
71
|
-
})
|
|
72
|
-
);
|
|
73
|
-
}, [dispatch]);
|
|
57
|
+
apiClient.all().then((res) => {
|
|
58
|
+
const { data, meta } = res.data;
|
|
59
|
+
dispatch2(slice.actions.init({ items: data, order: meta.order }));
|
|
60
|
+
});
|
|
61
|
+
}, [dispatch2]);
|
|
74
62
|
return null;
|
|
75
63
|
}
|
|
76
64
|
|
|
@@ -79,7 +67,20 @@ var import_store4 = require("@elementor/store");
|
|
|
79
67
|
var globalClassesStylesProvider = {
|
|
80
68
|
key: "global-classes",
|
|
81
69
|
priority: 30,
|
|
82
|
-
|
|
70
|
+
actions: {
|
|
71
|
+
get: () => selectOrderedGlobalClasses((0, import_store4.__getState)()),
|
|
72
|
+
create: async (style) => {
|
|
73
|
+
const res = await apiClient.post(style);
|
|
74
|
+
const { data, meta } = res.data;
|
|
75
|
+
(0, import_store4.__dispatch)(
|
|
76
|
+
slice.actions.add({
|
|
77
|
+
style: data,
|
|
78
|
+
order: meta.order
|
|
79
|
+
})
|
|
80
|
+
);
|
|
81
|
+
return data;
|
|
82
|
+
}
|
|
83
|
+
},
|
|
83
84
|
subscribe: (cb) => (0, import_store4.__subscribe)(cb)
|
|
84
85
|
};
|
|
85
86
|
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/init.ts","../src/components/logic-hooks.tsx","../src/store.ts","../src/global-classes-styles-provider.ts","../src/index.ts"],"sourcesContent":["import { injectIntoLogic } from '@elementor/editor';\nimport { stylesRepository } from '@elementor/editor-styles-repository';\nimport { __registerSlice as registerSlice } from '@elementor/store';\n\nimport { LogicHooks } from './components/logic-hooks';\nimport { globalClassesStylesProvider } from './global-classes-styles-provider';\nimport { slice } from './store';\n\nexport function init() {\n\tregisterSlice( slice );\n\n\tstylesRepository.register( globalClassesStylesProvider );\n\n\tinjectIntoLogic( {\n\t\tid: 'global-classes-hooks',\n\t\tcomponent: LogicHooks,\n\t} );\n}\n","import { useEffect } from 'react';\nimport { __useDispatch as useDispatch } from '@elementor/store';\n\nimport { slice } from '../store';\n\nexport function LogicHooks() {\n\tconst dispatch = useDispatch();\n\n\tuseEffect( () => {\n\t\
|
|
1
|
+
{"version":3,"sources":["../src/init.ts","../src/components/logic-hooks.tsx","../src/api.ts","../src/store.ts","../src/global-classes-styles-provider.ts","../src/index.ts"],"sourcesContent":["import { injectIntoLogic } from '@elementor/editor';\nimport { stylesRepository } from '@elementor/editor-styles-repository';\nimport { __registerSlice as registerSlice } from '@elementor/store';\n\nimport { LogicHooks } from './components/logic-hooks';\nimport { globalClassesStylesProvider } from './global-classes-styles-provider';\nimport { slice } from './store';\n\nexport function init() {\n\tregisterSlice( slice );\n\n\tstylesRepository.register( globalClassesStylesProvider );\n\n\tinjectIntoLogic( {\n\t\tid: 'global-classes-hooks',\n\t\tcomponent: LogicHooks,\n\t} );\n}\n","import { useEffect } from 'react';\nimport { __useDispatch as useDispatch } from '@elementor/store';\n\nimport { apiClient } from '../api';\nimport { slice } from '../store';\n\nexport function LogicHooks() {\n\tconst dispatch = useDispatch();\n\n\tuseEffect( () => {\n\t\tapiClient.all().then( ( res ) => {\n\t\t\tconst { data, meta } = res.data;\n\n\t\t\tdispatch( slice.actions.init( { items: data, order: meta.order } ) );\n\t\t} );\n\t}, [ dispatch ] );\n\n\treturn null;\n}\n","import { type StyleDefinition, type StyleDefinitionsMap } from '@elementor/editor-styles';\nimport { type CreateActionPayload } from '@elementor/editor-styles-repository';\nimport { type HttpResponse, httpService } from '@elementor/http';\n\nconst RESOURCE_URL = '/global-classes';\n\nexport type GlobalClassesGetAllResponse = HttpResponse< StyleDefinitionsMap, { order: StyleDefinition[ 'id' ][] } >;\nexport type GlobalClassesPostResponse = HttpResponse< StyleDefinition, { order: StyleDefinition[ 'id' ][] } >;\n\nexport const apiClient = {\n\tall: async () => {\n\t\treturn httpService().get< GlobalClassesGetAllResponse >( RESOURCE_URL );\n\t},\n\tpost: async ( data: CreateActionPayload ) => {\n\t\treturn httpService().post< GlobalClassesPostResponse >( RESOURCE_URL, { data } );\n\t},\n};\n","import { type StyleDefinition, type StyleDefinitionID } from '@elementor/editor-styles';\nimport {\n\t__createSelector as createSelector,\n\t__createSlice as createSlice,\n\ttype PayloadAction,\n\ttype SliceState,\n} from '@elementor/store';\n\nexport type State = {\n\titems: Record< StyleDefinitionID, StyleDefinition >;\n\torder: StyleDefinitionID[];\n};\n\nconst initialState: State = {\n\titems: {},\n\torder: [],\n};\n\n// Slice\nexport const SLICE_NAME = 'globalClasses';\n\nexport const slice = createSlice( {\n\tname: SLICE_NAME,\n\tinitialState,\n\treducers: {\n\t\tinit( state, { payload }: PayloadAction< State > ) {\n\t\t\tstate.items = payload.items;\n\t\t\tstate.order = payload.order;\n\t\t},\n\t\tadd( state, { payload }: PayloadAction< { style: StyleDefinition; order: State[ 'order' ] } > ) {\n\t\t\tstate.items[ payload.style.id ] = payload.style;\n\t\t\tstate.order = payload.order;\n\t\t},\n\t},\n} );\n\n// Selectors\nconst selectItems = ( state: SliceState< typeof slice > ) => state[ SLICE_NAME ].items;\nconst selectOrder = ( state: SliceState< typeof slice > ) => state[ SLICE_NAME ].order;\n\nexport const selectOrderedGlobalClasses = createSelector( selectItems, selectOrder, ( items, order ) =>\n\torder.map( ( id ) => items[ id ] )\n);\n","import type { StylesProvider } from '@elementor/editor-styles-repository';\nimport { __dispatch as dispatch, __getState as getState, __subscribe as subscribe } from '@elementor/store';\n\nimport { apiClient } from './api';\nimport { selectOrderedGlobalClasses, slice } from './store';\n\nexport const globalClassesStylesProvider: StylesProvider = {\n\tkey: 'global-classes',\n\tpriority: 30,\n\tactions: {\n\t\tget: () => selectOrderedGlobalClasses( getState() ),\n\t\tcreate: async ( style ) => {\n\t\t\tconst res = await apiClient.post( style );\n\n\t\t\tconst { data, meta } = res.data;\n\n\t\t\tdispatch(\n\t\t\t\tslice.actions.add( {\n\t\t\t\t\tstyle: data,\n\t\t\t\t\torder: meta.order,\n\t\t\t\t} )\n\t\t\t);\n\n\t\t\treturn data;\n\t\t},\n\t},\n\tsubscribe: ( cb ) => subscribe( cb ),\n};\n","import { init } from './init';\n\ninit();\n"],"mappings":";;;AAAA,oBAAgC;AAChC,sCAAiC;AACjC,IAAAA,gBAAiD;;;ACFjD,mBAA0B;AAC1B,IAAAC,gBAA6C;;;ACC7C,kBAA+C;AAE/C,IAAM,eAAe;AAKd,IAAM,YAAY;AAAA,EACxB,KAAK,YAAY;AAChB,eAAO,yBAAY,EAAE,IAAoC,YAAa;AAAA,EACvE;AAAA,EACA,MAAM,OAAQ,SAA+B;AAC5C,eAAO,yBAAY,EAAE,KAAmC,cAAc,EAAE,KAAK,CAAE;AAAA,EAChF;AACD;;;ACfA,mBAKO;AAOP,IAAM,eAAsB;AAAA,EAC3B,OAAO,CAAC;AAAA,EACR,OAAO,CAAC;AACT;AAGO,IAAM,aAAa;AAEnB,IAAM,YAAQ,aAAAC,eAAa;AAAA,EACjC,MAAM;AAAA,EACN;AAAA,EACA,UAAU;AAAA,IACT,KAAM,OAAO,EAAE,QAAQ,GAA4B;AAClD,YAAM,QAAQ,QAAQ;AACtB,YAAM,QAAQ,QAAQ;AAAA,IACvB;AAAA,IACA,IAAK,OAAO,EAAE,QAAQ,GAA0E;AAC/F,YAAM,MAAO,QAAQ,MAAM,EAAG,IAAI,QAAQ;AAC1C,YAAM,QAAQ,QAAQ;AAAA,IACvB;AAAA,EACD;AACD,CAAE;AAGF,IAAM,cAAc,CAAE,UAAuC,MAAO,UAAW,EAAE;AACjF,IAAM,cAAc,CAAE,UAAuC,MAAO,UAAW,EAAE;AAE1E,IAAM,iCAA6B,aAAAC;AAAA,EAAgB;AAAA,EAAa;AAAA,EAAa,CAAE,OAAO,UAC5F,MAAM,IAAK,CAAE,OAAQ,MAAO,EAAG,CAAE;AAClC;;;AFpCO,SAAS,aAAa;AAC5B,QAAMC,gBAAW,cAAAC,eAAY;AAE7B,8BAAW,MAAM;AAChB,cAAU,IAAI,EAAE,KAAM,CAAE,QAAS;AAChC,YAAM,EAAE,MAAM,KAAK,IAAI,IAAI;AAE3B,MAAAD,UAAU,MAAM,QAAQ,KAAM,EAAE,OAAO,MAAM,OAAO,KAAK,MAAM,CAAE,CAAE;AAAA,IACpE,CAAE;AAAA,EACH,GAAG,CAAEA,SAAS,CAAE;AAEhB,SAAO;AACR;;;AGjBA,IAAAE,gBAAyF;AAKlF,IAAM,8BAA8C;AAAA,EAC1D,KAAK;AAAA,EACL,UAAU;AAAA,EACV,SAAS;AAAA,IACR,KAAK,MAAM,+BAA4B,cAAAC,YAAS,CAAE;AAAA,IAClD,QAAQ,OAAQ,UAAW;AAC1B,YAAM,MAAM,MAAM,UAAU,KAAM,KAAM;AAExC,YAAM,EAAE,MAAM,KAAK,IAAI,IAAI;AAE3B,wBAAAC;AAAA,QACC,MAAM,QAAQ,IAAK;AAAA,UAClB,OAAO;AAAA,UACP,OAAO,KAAK;AAAA,QACb,CAAE;AAAA,MACH;AAEA,aAAO;AAAA,IACR;AAAA,EACD;AAAA,EACA,WAAW,CAAE,WAAQ,cAAAC,aAAW,EAAG;AACpC;;;AJnBO,SAAS,OAAO;AACtB,oBAAAC,iBAAe,KAAM;AAErB,mDAAiB,SAAU,2BAA4B;AAEvD,qCAAiB;AAAA,IAChB,IAAI;AAAA,IACJ,WAAW;AAAA,EACZ,CAAE;AACH;;;AKfA,KAAK;","names":["import_store","import_store","createSlice","createSelector","dispatch","useDispatch","import_store","getState","dispatch","subscribe","registerSlice"]}
|
package/dist/index.mjs
CHANGED
|
@@ -7,6 +7,18 @@ import { __registerSlice as registerSlice } from "@elementor/store";
|
|
|
7
7
|
import { useEffect } from "react";
|
|
8
8
|
import { __useDispatch as useDispatch } from "@elementor/store";
|
|
9
9
|
|
|
10
|
+
// src/api.ts
|
|
11
|
+
import { httpService } from "@elementor/http";
|
|
12
|
+
var RESOURCE_URL = "/global-classes";
|
|
13
|
+
var apiClient = {
|
|
14
|
+
all: async () => {
|
|
15
|
+
return httpService().get(RESOURCE_URL);
|
|
16
|
+
},
|
|
17
|
+
post: async (data) => {
|
|
18
|
+
return httpService().post(RESOURCE_URL, { data });
|
|
19
|
+
}
|
|
20
|
+
};
|
|
21
|
+
|
|
10
22
|
// src/store.ts
|
|
11
23
|
import {
|
|
12
24
|
__createSelector as createSelector,
|
|
@@ -24,6 +36,10 @@ var slice = createSlice({
|
|
|
24
36
|
init(state, { payload }) {
|
|
25
37
|
state.items = payload.items;
|
|
26
38
|
state.order = payload.order;
|
|
39
|
+
},
|
|
40
|
+
add(state, { payload }) {
|
|
41
|
+
state.items[payload.style.id] = payload.style;
|
|
42
|
+
state.order = payload.order;
|
|
27
43
|
}
|
|
28
44
|
}
|
|
29
45
|
});
|
|
@@ -37,50 +53,35 @@ var selectOrderedGlobalClasses = createSelector(
|
|
|
37
53
|
|
|
38
54
|
// src/components/logic-hooks.tsx
|
|
39
55
|
function LogicHooks() {
|
|
40
|
-
const
|
|
56
|
+
const dispatch2 = useDispatch();
|
|
41
57
|
useEffect(() => {
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
label: "Global Class 1",
|
|
48
|
-
type: "class",
|
|
49
|
-
variants: [
|
|
50
|
-
{
|
|
51
|
-
meta: {
|
|
52
|
-
state: null,
|
|
53
|
-
breakpoint: null
|
|
54
|
-
},
|
|
55
|
-
props: {
|
|
56
|
-
color: {
|
|
57
|
-
$$type: "color",
|
|
58
|
-
value: "#aaaaaa"
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
|
-
]
|
|
63
|
-
},
|
|
64
|
-
"global-class-2": {
|
|
65
|
-
id: "global-class-2",
|
|
66
|
-
label: "Global Class 2",
|
|
67
|
-
type: "class",
|
|
68
|
-
variants: []
|
|
69
|
-
}
|
|
70
|
-
},
|
|
71
|
-
order: ["global-class-1", "global-class-2"]
|
|
72
|
-
})
|
|
73
|
-
);
|
|
74
|
-
}, [dispatch]);
|
|
58
|
+
apiClient.all().then((res) => {
|
|
59
|
+
const { data, meta } = res.data;
|
|
60
|
+
dispatch2(slice.actions.init({ items: data, order: meta.order }));
|
|
61
|
+
});
|
|
62
|
+
}, [dispatch2]);
|
|
75
63
|
return null;
|
|
76
64
|
}
|
|
77
65
|
|
|
78
66
|
// src/global-classes-styles-provider.ts
|
|
79
|
-
import { __getState as getState, __subscribe as subscribe } from "@elementor/store";
|
|
67
|
+
import { __dispatch as dispatch, __getState as getState, __subscribe as subscribe } from "@elementor/store";
|
|
80
68
|
var globalClassesStylesProvider = {
|
|
81
69
|
key: "global-classes",
|
|
82
70
|
priority: 30,
|
|
83
|
-
|
|
71
|
+
actions: {
|
|
72
|
+
get: () => selectOrderedGlobalClasses(getState()),
|
|
73
|
+
create: async (style) => {
|
|
74
|
+
const res = await apiClient.post(style);
|
|
75
|
+
const { data, meta } = res.data;
|
|
76
|
+
dispatch(
|
|
77
|
+
slice.actions.add({
|
|
78
|
+
style: data,
|
|
79
|
+
order: meta.order
|
|
80
|
+
})
|
|
81
|
+
);
|
|
82
|
+
return data;
|
|
83
|
+
}
|
|
84
|
+
},
|
|
84
85
|
subscribe: (cb) => subscribe(cb)
|
|
85
86
|
};
|
|
86
87
|
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/init.ts","../src/components/logic-hooks.tsx","../src/store.ts","../src/global-classes-styles-provider.ts","../src/index.ts"],"sourcesContent":["import { injectIntoLogic } from '@elementor/editor';\nimport { stylesRepository } from '@elementor/editor-styles-repository';\nimport { __registerSlice as registerSlice } from '@elementor/store';\n\nimport { LogicHooks } from './components/logic-hooks';\nimport { globalClassesStylesProvider } from './global-classes-styles-provider';\nimport { slice } from './store';\n\nexport function init() {\n\tregisterSlice( slice );\n\n\tstylesRepository.register( globalClassesStylesProvider );\n\n\tinjectIntoLogic( {\n\t\tid: 'global-classes-hooks',\n\t\tcomponent: LogicHooks,\n\t} );\n}\n","import { useEffect } from 'react';\nimport { __useDispatch as useDispatch } from '@elementor/store';\n\nimport { slice } from '../store';\n\nexport function LogicHooks() {\n\tconst dispatch = useDispatch();\n\n\tuseEffect( () => {\n\t\
|
|
1
|
+
{"version":3,"sources":["../src/init.ts","../src/components/logic-hooks.tsx","../src/api.ts","../src/store.ts","../src/global-classes-styles-provider.ts","../src/index.ts"],"sourcesContent":["import { injectIntoLogic } from '@elementor/editor';\nimport { stylesRepository } from '@elementor/editor-styles-repository';\nimport { __registerSlice as registerSlice } from '@elementor/store';\n\nimport { LogicHooks } from './components/logic-hooks';\nimport { globalClassesStylesProvider } from './global-classes-styles-provider';\nimport { slice } from './store';\n\nexport function init() {\n\tregisterSlice( slice );\n\n\tstylesRepository.register( globalClassesStylesProvider );\n\n\tinjectIntoLogic( {\n\t\tid: 'global-classes-hooks',\n\t\tcomponent: LogicHooks,\n\t} );\n}\n","import { useEffect } from 'react';\nimport { __useDispatch as useDispatch } from '@elementor/store';\n\nimport { apiClient } from '../api';\nimport { slice } from '../store';\n\nexport function LogicHooks() {\n\tconst dispatch = useDispatch();\n\n\tuseEffect( () => {\n\t\tapiClient.all().then( ( res ) => {\n\t\t\tconst { data, meta } = res.data;\n\n\t\t\tdispatch( slice.actions.init( { items: data, order: meta.order } ) );\n\t\t} );\n\t}, [ dispatch ] );\n\n\treturn null;\n}\n","import { type StyleDefinition, type StyleDefinitionsMap } from '@elementor/editor-styles';\nimport { type CreateActionPayload } from '@elementor/editor-styles-repository';\nimport { type HttpResponse, httpService } from '@elementor/http';\n\nconst RESOURCE_URL = '/global-classes';\n\nexport type GlobalClassesGetAllResponse = HttpResponse< StyleDefinitionsMap, { order: StyleDefinition[ 'id' ][] } >;\nexport type GlobalClassesPostResponse = HttpResponse< StyleDefinition, { order: StyleDefinition[ 'id' ][] } >;\n\nexport const apiClient = {\n\tall: async () => {\n\t\treturn httpService().get< GlobalClassesGetAllResponse >( RESOURCE_URL );\n\t},\n\tpost: async ( data: CreateActionPayload ) => {\n\t\treturn httpService().post< GlobalClassesPostResponse >( RESOURCE_URL, { data } );\n\t},\n};\n","import { type StyleDefinition, type StyleDefinitionID } from '@elementor/editor-styles';\nimport {\n\t__createSelector as createSelector,\n\t__createSlice as createSlice,\n\ttype PayloadAction,\n\ttype SliceState,\n} from '@elementor/store';\n\nexport type State = {\n\titems: Record< StyleDefinitionID, StyleDefinition >;\n\torder: StyleDefinitionID[];\n};\n\nconst initialState: State = {\n\titems: {},\n\torder: [],\n};\n\n// Slice\nexport const SLICE_NAME = 'globalClasses';\n\nexport const slice = createSlice( {\n\tname: SLICE_NAME,\n\tinitialState,\n\treducers: {\n\t\tinit( state, { payload }: PayloadAction< State > ) {\n\t\t\tstate.items = payload.items;\n\t\t\tstate.order = payload.order;\n\t\t},\n\t\tadd( state, { payload }: PayloadAction< { style: StyleDefinition; order: State[ 'order' ] } > ) {\n\t\t\tstate.items[ payload.style.id ] = payload.style;\n\t\t\tstate.order = payload.order;\n\t\t},\n\t},\n} );\n\n// Selectors\nconst selectItems = ( state: SliceState< typeof slice > ) => state[ SLICE_NAME ].items;\nconst selectOrder = ( state: SliceState< typeof slice > ) => state[ SLICE_NAME ].order;\n\nexport const selectOrderedGlobalClasses = createSelector( selectItems, selectOrder, ( items, order ) =>\n\torder.map( ( id ) => items[ id ] )\n);\n","import type { StylesProvider } from '@elementor/editor-styles-repository';\nimport { __dispatch as dispatch, __getState as getState, __subscribe as subscribe } from '@elementor/store';\n\nimport { apiClient } from './api';\nimport { selectOrderedGlobalClasses, slice } from './store';\n\nexport const globalClassesStylesProvider: StylesProvider = {\n\tkey: 'global-classes',\n\tpriority: 30,\n\tactions: {\n\t\tget: () => selectOrderedGlobalClasses( getState() ),\n\t\tcreate: async ( style ) => {\n\t\t\tconst res = await apiClient.post( style );\n\n\t\t\tconst { data, meta } = res.data;\n\n\t\t\tdispatch(\n\t\t\t\tslice.actions.add( {\n\t\t\t\t\tstyle: data,\n\t\t\t\t\torder: meta.order,\n\t\t\t\t} )\n\t\t\t);\n\n\t\t\treturn data;\n\t\t},\n\t},\n\tsubscribe: ( cb ) => subscribe( cb ),\n};\n","import { init } from './init';\n\ninit();\n"],"mappings":";AAAA,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AACjC,SAAS,mBAAmB,qBAAqB;;;ACFjD,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB,mBAAmB;;;ACC7C,SAA4B,mBAAmB;AAE/C,IAAM,eAAe;AAKd,IAAM,YAAY;AAAA,EACxB,KAAK,YAAY;AAChB,WAAO,YAAY,EAAE,IAAoC,YAAa;AAAA,EACvE;AAAA,EACA,MAAM,OAAQ,SAA+B;AAC5C,WAAO,YAAY,EAAE,KAAmC,cAAc,EAAE,KAAK,CAAE;AAAA,EAChF;AACD;;;ACfA;AAAA,EACC,oBAAoB;AAAA,EACpB,iBAAiB;AAAA,OAGX;AAOP,IAAM,eAAsB;AAAA,EAC3B,OAAO,CAAC;AAAA,EACR,OAAO,CAAC;AACT;AAGO,IAAM,aAAa;AAEnB,IAAM,QAAQ,YAAa;AAAA,EACjC,MAAM;AAAA,EACN;AAAA,EACA,UAAU;AAAA,IACT,KAAM,OAAO,EAAE,QAAQ,GAA4B;AAClD,YAAM,QAAQ,QAAQ;AACtB,YAAM,QAAQ,QAAQ;AAAA,IACvB;AAAA,IACA,IAAK,OAAO,EAAE,QAAQ,GAA0E;AAC/F,YAAM,MAAO,QAAQ,MAAM,EAAG,IAAI,QAAQ;AAC1C,YAAM,QAAQ,QAAQ;AAAA,IACvB;AAAA,EACD;AACD,CAAE;AAGF,IAAM,cAAc,CAAE,UAAuC,MAAO,UAAW,EAAE;AACjF,IAAM,cAAc,CAAE,UAAuC,MAAO,UAAW,EAAE;AAE1E,IAAM,6BAA6B;AAAA,EAAgB;AAAA,EAAa;AAAA,EAAa,CAAE,OAAO,UAC5F,MAAM,IAAK,CAAE,OAAQ,MAAO,EAAG,CAAE;AAClC;;;AFpCO,SAAS,aAAa;AAC5B,QAAMA,YAAW,YAAY;AAE7B,YAAW,MAAM;AAChB,cAAU,IAAI,EAAE,KAAM,CAAE,QAAS;AAChC,YAAM,EAAE,MAAM,KAAK,IAAI,IAAI;AAE3B,MAAAA,UAAU,MAAM,QAAQ,KAAM,EAAE,OAAO,MAAM,OAAO,KAAK,MAAM,CAAE,CAAE;AAAA,IACpE,CAAE;AAAA,EACH,GAAG,CAAEA,SAAS,CAAE;AAEhB,SAAO;AACR;;;AGjBA,SAAS,cAAc,UAAU,cAAc,UAAU,eAAe,iBAAiB;AAKlF,IAAM,8BAA8C;AAAA,EAC1D,KAAK;AAAA,EACL,UAAU;AAAA,EACV,SAAS;AAAA,IACR,KAAK,MAAM,2BAA4B,SAAS,CAAE;AAAA,IAClD,QAAQ,OAAQ,UAAW;AAC1B,YAAM,MAAM,MAAM,UAAU,KAAM,KAAM;AAExC,YAAM,EAAE,MAAM,KAAK,IAAI,IAAI;AAE3B;AAAA,QACC,MAAM,QAAQ,IAAK;AAAA,UAClB,OAAO;AAAA,UACP,OAAO,KAAK;AAAA,QACb,CAAE;AAAA,MACH;AAEA,aAAO;AAAA,IACR;AAAA,EACD;AAAA,EACA,WAAW,CAAE,OAAQ,UAAW,EAAG;AACpC;;;AJnBO,SAAS,OAAO;AACtB,gBAAe,KAAM;AAErB,mBAAiB,SAAU,2BAA4B;AAEvD,kBAAiB;AAAA,IAChB,IAAI;AAAA,IACJ,WAAW;AAAA,EACZ,CAAE;AACH;;;AKfA,KAAK;","names":["dispatch"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elementor/editor-global-classes",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"private": false,
|
|
5
5
|
"author": "Elementor Team",
|
|
6
6
|
"homepage": "https://elementor.com/",
|
|
@@ -39,9 +39,10 @@
|
|
|
39
39
|
"dev": "tsup --config=../../tsup.dev.ts"
|
|
40
40
|
},
|
|
41
41
|
"dependencies": {
|
|
42
|
-
"@elementor/
|
|
43
|
-
"@elementor/editor-styles-repository": "0.3.
|
|
44
|
-
"@elementor/
|
|
42
|
+
"@elementor/editor": "0.17.2",
|
|
43
|
+
"@elementor/editor-styles-repository": "0.3.1",
|
|
44
|
+
"@elementor/http": "0.1.3",
|
|
45
|
+
"@elementor/store": "0.8.6"
|
|
45
46
|
},
|
|
46
47
|
"peerDependencies": {
|
|
47
48
|
"react": "^18.3.1"
|
package/src/api.ts
ADDED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { type StyleDefinition, type StyleDefinitionsMap } from '@elementor/editor-styles';
|
|
2
|
+
import { type CreateActionPayload } from '@elementor/editor-styles-repository';
|
|
3
|
+
import { type HttpResponse, httpService } from '@elementor/http';
|
|
4
|
+
|
|
5
|
+
const RESOURCE_URL = '/global-classes';
|
|
6
|
+
|
|
7
|
+
export type GlobalClassesGetAllResponse = HttpResponse< StyleDefinitionsMap, { order: StyleDefinition[ 'id' ][] } >;
|
|
8
|
+
export type GlobalClassesPostResponse = HttpResponse< StyleDefinition, { order: StyleDefinition[ 'id' ][] } >;
|
|
9
|
+
|
|
10
|
+
export const apiClient = {
|
|
11
|
+
all: async () => {
|
|
12
|
+
return httpService().get< GlobalClassesGetAllResponse >( RESOURCE_URL );
|
|
13
|
+
},
|
|
14
|
+
post: async ( data: CreateActionPayload ) => {
|
|
15
|
+
return httpService().post< GlobalClassesPostResponse >( RESOURCE_URL, { data } );
|
|
16
|
+
},
|
|
17
|
+
};
|
|
@@ -1,45 +1,18 @@
|
|
|
1
1
|
import { useEffect } from 'react';
|
|
2
2
|
import { __useDispatch as useDispatch } from '@elementor/store';
|
|
3
3
|
|
|
4
|
+
import { apiClient } from '../api';
|
|
4
5
|
import { slice } from '../store';
|
|
5
6
|
|
|
6
7
|
export function LogicHooks() {
|
|
7
8
|
const dispatch = useDispatch();
|
|
8
9
|
|
|
9
10
|
useEffect( () => {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
id: 'global-class-1',
|
|
16
|
-
label: 'Global Class 1',
|
|
17
|
-
type: 'class',
|
|
18
|
-
variants: [
|
|
19
|
-
{
|
|
20
|
-
meta: {
|
|
21
|
-
state: null,
|
|
22
|
-
breakpoint: null,
|
|
23
|
-
},
|
|
24
|
-
props: {
|
|
25
|
-
color: {
|
|
26
|
-
$$type: 'color',
|
|
27
|
-
value: '#aaaaaa',
|
|
28
|
-
},
|
|
29
|
-
},
|
|
30
|
-
},
|
|
31
|
-
],
|
|
32
|
-
},
|
|
33
|
-
'global-class-2': {
|
|
34
|
-
id: 'global-class-2',
|
|
35
|
-
label: 'Global Class 2',
|
|
36
|
-
type: 'class',
|
|
37
|
-
variants: [],
|
|
38
|
-
},
|
|
39
|
-
},
|
|
40
|
-
order: [ 'global-class-1', 'global-class-2' ],
|
|
41
|
-
} )
|
|
42
|
-
);
|
|
11
|
+
apiClient.all().then( ( res ) => {
|
|
12
|
+
const { data, meta } = res.data;
|
|
13
|
+
|
|
14
|
+
dispatch( slice.actions.init( { items: data, order: meta.order } ) );
|
|
15
|
+
} );
|
|
43
16
|
}, [ dispatch ] );
|
|
44
17
|
|
|
45
18
|
return null;
|
|
@@ -1,11 +1,28 @@
|
|
|
1
1
|
import type { StylesProvider } from '@elementor/editor-styles-repository';
|
|
2
|
-
import { __getState as getState, __subscribe as subscribe } from '@elementor/store';
|
|
2
|
+
import { __dispatch as dispatch, __getState as getState, __subscribe as subscribe } from '@elementor/store';
|
|
3
3
|
|
|
4
|
-
import {
|
|
4
|
+
import { apiClient } from './api';
|
|
5
|
+
import { selectOrderedGlobalClasses, slice } from './store';
|
|
5
6
|
|
|
6
7
|
export const globalClassesStylesProvider: StylesProvider = {
|
|
7
8
|
key: 'global-classes',
|
|
8
9
|
priority: 30,
|
|
9
|
-
|
|
10
|
+
actions: {
|
|
11
|
+
get: () => selectOrderedGlobalClasses( getState() ),
|
|
12
|
+
create: async ( style ) => {
|
|
13
|
+
const res = await apiClient.post( style );
|
|
14
|
+
|
|
15
|
+
const { data, meta } = res.data;
|
|
16
|
+
|
|
17
|
+
dispatch(
|
|
18
|
+
slice.actions.add( {
|
|
19
|
+
style: data,
|
|
20
|
+
order: meta.order,
|
|
21
|
+
} )
|
|
22
|
+
);
|
|
23
|
+
|
|
24
|
+
return data;
|
|
25
|
+
},
|
|
26
|
+
},
|
|
10
27
|
subscribe: ( cb ) => subscribe( cb ),
|
|
11
28
|
};
|
package/src/store.ts
CHANGED
|
@@ -6,7 +6,7 @@ import {
|
|
|
6
6
|
type SliceState,
|
|
7
7
|
} from '@elementor/store';
|
|
8
8
|
|
|
9
|
-
type State = {
|
|
9
|
+
export type State = {
|
|
10
10
|
items: Record< StyleDefinitionID, StyleDefinition >;
|
|
11
11
|
order: StyleDefinitionID[];
|
|
12
12
|
};
|
|
@@ -27,6 +27,10 @@ export const slice = createSlice( {
|
|
|
27
27
|
state.items = payload.items;
|
|
28
28
|
state.order = payload.order;
|
|
29
29
|
},
|
|
30
|
+
add( state, { payload }: PayloadAction< { style: StyleDefinition; order: State[ 'order' ] } > ) {
|
|
31
|
+
state.items[ payload.style.id ] = payload.style;
|
|
32
|
+
state.order = payload.order;
|
|
33
|
+
},
|
|
30
34
|
},
|
|
31
35
|
} );
|
|
32
36
|
|