@elementor/editor-responsive 0.7.0 → 0.8.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 +19 -0
- package/dist/index.js +3 -3
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +5 -5
- package/dist/index.mjs.map +1 -1
- package/package.json +4 -4
- package/src/hooks/__tests__/use-breakpoints-actions.test.tsx +2 -2
- package/src/hooks/__tests__/use-breakpoints.test.tsx +1 -1
- package/src/hooks/use-breakpoints-actions.ts +1 -1
- package/src/hooks/use-breakpoints.ts +3 -3
- package/src/sync/sync-store.ts +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,25 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [0.8.1](https://github.com/elementor/elementor-packages/compare/@elementor/editor-responsive@0.8.0...@elementor/editor-responsive@0.8.1) (2023-09-26)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @elementor/editor-responsive
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
# [0.8.0](https://github.com/elementor/elementor-packages/compare/@elementor/editor-responsive@0.7.0...@elementor/editor-responsive@0.8.0) (2023-09-14)
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
### Features
|
|
18
|
+
|
|
19
|
+
* **v1-adapters:** mark private functions [ED-12029] ([#122](https://github.com/elementor/elementor-packages/issues/122)) ([2e79ccc](https://github.com/elementor/elementor-packages/commit/2e79ccc87add5f0508b5a142f9f6d832b4657062))
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
6
25
|
# [0.7.0](https://github.com/elementor/elementor-packages/compare/@elementor/editor-responsive@0.6.13...@elementor/editor-responsive@0.7.0) (2023-09-11)
|
|
7
26
|
|
|
8
27
|
|
package/dist/index.js
CHANGED
|
@@ -62,7 +62,7 @@ function syncStore() {
|
|
|
62
62
|
}
|
|
63
63
|
function syncInitialization() {
|
|
64
64
|
const { init: init2 } = slice.actions;
|
|
65
|
-
(0, import_editor_v1_adapters.
|
|
65
|
+
(0, import_editor_v1_adapters.__privateListenTo)(
|
|
66
66
|
(0, import_editor_v1_adapters.v1ReadyEvent)(),
|
|
67
67
|
() => {
|
|
68
68
|
(0, import_store3.__dispatch)(init2({
|
|
@@ -74,7 +74,7 @@ function syncInitialization() {
|
|
|
74
74
|
}
|
|
75
75
|
function syncOnChange() {
|
|
76
76
|
const { activateBreakpoint } = slice.actions;
|
|
77
|
-
(0, import_editor_v1_adapters.
|
|
77
|
+
(0, import_editor_v1_adapters.__privateListenTo)(
|
|
78
78
|
deviceModeChangeEvent(),
|
|
79
79
|
() => {
|
|
80
80
|
const activeBreakpoint = getActiveBreakpoint();
|
|
@@ -165,7 +165,7 @@ var import_react = require("react");
|
|
|
165
165
|
var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
|
|
166
166
|
function useBreakpointsActions() {
|
|
167
167
|
const activate = (0, import_react.useCallback)((device) => {
|
|
168
|
-
return (0, import_editor_v1_adapters2.
|
|
168
|
+
return (0, import_editor_v1_adapters2.__privateRunCommand)("panel/change-device-mode", { device });
|
|
169
169
|
}, []);
|
|
170
170
|
return {
|
|
171
171
|
activate
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/store/index.ts","../src/sync/sync-store.ts","../src/init.ts","../src/components/breakpoints-switcher.tsx","../src/hooks/use-breakpoints.ts","../src/store/selectors.ts","../src/hooks/use-breakpoints-actions.ts","../src/index.ts"],"sourcesContent":["import { __createSlice, PayloadAction } from '@elementor/store';\nimport { Breakpoint, BreakpointId } from '../types';\n\nexport type State = {\n\tentities: Record<BreakpointId, Breakpoint>,\n\tactiveId: BreakpointId | null,\n}\nconst initialState: State = {\n\tentities: {} as State['entities'],\n\tactiveId: null,\n};\n\nexport const slice = __createSlice( {\n\tname: 'breakpoints',\n\tinitialState,\n\treducers: {\n\t\tinit( state, action: PayloadAction<{\n\t\t\tentities: Breakpoint[],\n\t\t\tactiveId: State['activeId'],\n\t\t}> ) {\n\t\t\tstate.activeId = action.payload.activeId;\n\t\t\tstate.entities = normalizeEntities( action.payload.entities );\n\t\t},\n\n\t\tactivateBreakpoint( state, action: PayloadAction<BreakpointId> ) {\n\t\t\tif ( state.entities[ action.payload ] ) {\n\t\t\t\tstate.activeId = action.payload;\n\t\t\t}\n\t\t},\n\t},\n} );\n\nfunction normalizeEntities( entities: Breakpoint[] ) {\n\treturn entities.reduce( ( acc, breakpoint ) => {\n\t\treturn {\n\t\t\t...acc,\n\t\t\t[ breakpoint.id ]: breakpoint,\n\t\t};\n\t}, {} as State['entities'] );\n}\n","import { slice } from '../store';\nimport { __dispatch } from '@elementor/store';\nimport { Breakpoint, ExtendedWindow } from '../types';\nimport { listenTo, v1ReadyEvent, windowEvent } from '@elementor/editor-v1-adapters';\nimport { __ } from '@wordpress/i18n';\n\nexport default function syncStore() {\n\tsyncInitialization();\n\tsyncOnChange();\n}\n\nfunction syncInitialization() {\n\tconst { init } = slice.actions;\n\n\tlistenTo(\n\t\tv1ReadyEvent(),\n\t\t() => {\n\t\t\t__dispatch( init( {\n\t\t\t\tentities: getBreakpoints(),\n\t\t\t\tactiveId: getActiveBreakpoint(),\n\t\t\t} ) );\n\t\t}\n\t);\n}\n\nfunction syncOnChange() {\n\tconst { activateBreakpoint } = slice.actions;\n\n\tlistenTo(\n\t\tdeviceModeChangeEvent(),\n\t\t() => {\n\t\t\tconst activeBreakpoint = getActiveBreakpoint();\n\n\t\t\t__dispatch( activateBreakpoint( activeBreakpoint ) );\n\t\t},\n\t);\n}\n\nfunction getBreakpoints() {\n\tconst { breakpoints } = ( window as unknown as ExtendedWindow ).elementor?.config?.responsive || {};\n\n\tif ( ! breakpoints ) {\n\t\treturn [];\n\t}\n\n\tconst entities = Object\n\t\t.entries( breakpoints )\n\t\t.filter( ( [ , breakpoint ] ) => breakpoint.is_enabled )\n\t\t.map( ( [ id, { value, direction, label } ] ) => {\n\t\t\treturn {\n\t\t\t\tid,\n\t\t\t\tlabel,\n\t\t\t\twidth: value,\n\t\t\t\ttype: direction === 'min' ? 'min-width' : 'max-width',\n\t\t\t} as Breakpoint;\n\t\t} );\n\n\t// Desktop breakpoint is not included in V1 config.\n\tentities.push( {\n\t\tid: 'desktop',\n\t\tlabel: __( 'Desktop', 'elementor' ),\n\t} );\n\n\treturn entities;\n}\n\nfunction getActiveBreakpoint() {\n\tconst extendedWindow = window as unknown as ExtendedWindow;\n\n\treturn extendedWindow.elementor?.channels?.deviceMode?.request?.( 'currentMode' ) || null;\n}\n\nfunction deviceModeChangeEvent() {\n\treturn windowEvent( 'elementor/device-mode/change' );\n}\n","import { slice } from './store';\nimport syncStore from './sync/sync-store';\nimport { injectIntoResponsive } from '@elementor/editor-app-bar';\nimport BreakpointsSwitcher from './components/breakpoints-switcher';\nimport { __registerSlice } from '@elementor/store';\n\nexport default function init() {\n\tinitStore();\n\n\tregisterAppBarUI();\n}\n\nfunction initStore() {\n\t__registerSlice( slice );\n\n\tsyncStore();\n}\n\nfunction registerAppBarUI() {\n\tinjectIntoResponsive( {\n\t\tid: 'responsive-breakpoints-switcher',\n\t\tcomponent: BreakpointsSwitcher,\n\t\toptions: {\n\t\t\tpriority: 20, // After document indication.\n\t\t},\n\t} );\n}\n","import * as React from 'react';\nimport { __ } from '@wordpress/i18n';\nimport { BreakpointId } from '../types';\nimport useBreakpoints from '../hooks/use-breakpoints';\nimport { Tab, Tabs, Tooltip as BaseTooltip, TooltipProps } from '@elementor/ui';\nimport {\n\tDesktopIcon,\n\tTabletPortraitIcon,\n\tMobilePortraitIcon,\n\tWidescreenIcon,\n\tLaptopIcon,\n\tTabletLandscapeIcon,\n\tMobileLandscapeIcon,\n} from '@elementor/icons';\nimport useBreakpointsActions from '../hooks/use-breakpoints-actions';\n\nexport default function BreakpointsSwitcher() {\n\tconst { all, active } = useBreakpoints();\n\tconst { activate } = useBreakpointsActions();\n\n\tif ( ! all.length || ! active ) {\n\t\treturn null;\n\t}\n\n\tconst onChange = ( _: unknown, value: BreakpointId ) => activate( value );\n\n\treturn (\n\t\t<Tabs\n\t\t\ttextColor=\"inherit\"\n\t\t\tindicatorColor=\"secondary\"\n\t\t\tvalue={ active.id }\n\t\t\tonChange={ onChange }\n\t\t\taria-label={ __( 'Switch Device', 'elementor' ) }\n\t\t\tsx={ {\n\t\t\t\t'& .MuiTabs-indicator': {\n\t\t\t\t\tbackgroundColor: 'text.primary',\n\t\t\t\t},\n\t\t\t} }\n\t\t>\n\t\t\t{\n\t\t\t\tall.map( ( { id, label, type, width } ) => {\n\t\t\t\t\tconst Icon = iconsMap[ id ];\n\n\t\t\t\t\tconst title = labelsMap[ type || 'default' ]\n\t\t\t\t\t\t.replace( '%s', label )\n\t\t\t\t\t\t.replace( '%d', width?.toString() || '' );\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<Tab value={ id }\n\t\t\t\t\t\t\tkey={ id }\n\t\t\t\t\t\t\taria-label={ title }\n\t\t\t\t\t\t\ticon={ <Tooltip title={ title }><Icon /></Tooltip> }\n\t\t\t\t\t\t\tsx={ { minWidth: 'auto' } }\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t} )\n\t\t\t}\n\t\t</Tabs>\n\n\t);\n}\n\nfunction Tooltip( props: TooltipProps ) {\n\treturn <BaseTooltip\n\t\tPopperProps={ {\n\t\t\tsx: {\n\t\t\t\t'&.MuiTooltip-popper .MuiTooltip-tooltip.MuiTooltip-tooltipPlacementBottom': {\n\t\t\t\t\tmt: 2.5,\n\t\t\t\t},\n\t\t\t},\n\t\t} }\n\t\t{ ...props }\n\t/>;\n}\n\nconst iconsMap = {\n\twidescreen: WidescreenIcon,\n\tdesktop: DesktopIcon,\n\tlaptop: LaptopIcon,\n\ttablet_extra: TabletLandscapeIcon,\n\ttablet: TabletPortraitIcon,\n\tmobile_extra: MobileLandscapeIcon,\n\tmobile: MobilePortraitIcon,\n};\n\nconst labelsMap = {\n\tdefault: '%s',\n\t// translators: %s: Breakpoint label, %d: Breakpoint size.\n\t'min-width': __( '%s (%dpx and up)', 'elementor' ),\n\n\t// translators: %s: Breakpoint label, %d: Breakpoint size.\n\t'max-width': __( '%s (up to %dpx)', 'elementor' ),\n} as const;\n","import { __useSelector } from '@elementor/store';\nimport { selectActiveBreakpoint, selectSortedBreakpoints } from '../store/selectors';\n\nexport default function useBreakpoints() {\n\tconst all = __useSelector( selectSortedBreakpoints );\n\tconst active = __useSelector( selectActiveBreakpoint );\n\n\treturn {\n\t\tall,\n\t\tactive,\n\t};\n}\n","import { slice } from './index';\nimport { Breakpoint } from '../types';\nimport { __createSelector, SliceState } from '@elementor/store';\n\ntype State = SliceState<typeof slice>;\n\nexport const selectEntities = ( state: State ) => state.breakpoints.entities;\nexport const selectActiveId = ( state: State ) => state.breakpoints.activeId;\n\nexport const selectActiveBreakpoint = __createSelector(\n\tselectEntities,\n\tselectActiveId,\n\t( entities, activeId ) => activeId && entities[ activeId ]\n\t\t? entities[ activeId ]\n\t\t: null,\n);\n\nexport const selectSortedBreakpoints = __createSelector(\n\tselectEntities,\n\t( entities ) => {\n\t\tconst byWidth = ( a: Breakpoint, b: Breakpoint ) => {\n\t\t\treturn ( a.width && b.width ) ? b.width - a.width : 0;\n\t\t};\n\n\t\tconst all = Object.values( entities );\n\n\t\tconst defaults = all.filter( ( breakpoint ) => ! breakpoint.width ); // AKA Desktop.\n\t\tconst minWidth = all.filter( ( breakpoint ) => breakpoint.type === 'min-width' );\n\t\tconst maxWidth = all.filter( ( breakpoint ) => breakpoint.type === 'max-width' );\n\n\t\t// Sort by size, big to small.\n\t\treturn [\n\t\t\t...minWidth.sort( byWidth ),\n\t\t\t...defaults,\n\t\t\t...maxWidth.sort( byWidth ),\n\t\t];\n\t},\n);\n","import { useCallback } from 'react';\nimport { BreakpointId } from '../types';\nimport { runCommand } from '@elementor/editor-v1-adapters';\n\nexport default function useBreakpointsActions() {\n\tconst activate = useCallback( ( device: BreakpointId ) => {\n\t\treturn runCommand( 'panel/change-device-mode', { device } );\n\t}, [] );\n\n\treturn {\n\t\tactivate,\n\t};\n}\n","import init from './init';\n\ninit();\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,mBAA6C;AAO7C,IAAM,eAAsB;AAAA,EAC3B,UAAU,CAAC;AAAA,EACX,UAAU;AACX;AAEO,IAAM,YAAQ,4BAAe;AAAA,EACnC,MAAM;AAAA,EACN;AAAA,EACA,UAAU;AAAA,IACT,KAAM,OAAO,QAGR;AACJ,YAAM,WAAW,OAAO,QAAQ;AAChC,YAAM,WAAW,kBAAmB,OAAO,QAAQ,QAAS;AAAA,IAC7D;AAAA,IAEA,mBAAoB,OAAO,QAAsC;AAChE,UAAK,MAAM,SAAU,OAAO,OAAQ,GAAI;AACvC,cAAM,WAAW,OAAO;AAAA,MACzB;AAAA,IACD;AAAA,EACD;AACD,CAAE;AAEF,SAAS,kBAAmB,UAAyB;AACpD,SAAO,SAAS,OAAQ,CAAE,KAAK,eAAgB;AAC9C,WAAO;AAAA,MACN,GAAG;AAAA,MACH,CAAE,WAAW,EAAG,GAAG;AAAA,IACpB;AAAA,EACD,GAAG,CAAC,CAAuB;AAC5B;;;ACtCA,IAAAA,gBAA2B;AAE3B,gCAAoD;AACpD,kBAAmB;AAEJ,SAAR,YAA6B;AACnC,qBAAmB;AACnB,eAAa;AACd;AAEA,SAAS,qBAAqB;AAC7B,QAAM,EAAE,MAAAC,MAAK,IAAI,MAAM;AAEvB;AAAA,QACC,wCAAa;AAAA,IACb,MAAM;AACL,oCAAYA,MAAM;AAAA,QACjB,UAAU,eAAe;AAAA,QACzB,UAAU,oBAAoB;AAAA,MAC/B,CAAE,CAAE;AAAA,IACL;AAAA,EACD;AACD;AAEA,SAAS,eAAe;AACvB,QAAM,EAAE,mBAAmB,IAAI,MAAM;AAErC;AAAA,IACC,sBAAsB;AAAA,IACtB,MAAM;AACL,YAAM,mBAAmB,oBAAoB;AAE7C,oCAAY,mBAAoB,gBAAiB,CAAE;AAAA,IACpD;AAAA,EACD;AACD;AAEA,SAAS,iBAAiB;AACzB,QAAM,EAAE,YAAY,IAAM,OAAsC,WAAW,QAAQ,cAAc,CAAC;AAElG,MAAK,CAAE,aAAc;AACpB,WAAO,CAAC;AAAA,EACT;AAEA,QAAM,WAAW,OACf,QAAS,WAAY,EACrB,OAAQ,CAAE,CAAE,EAAE,UAAW,MAAO,WAAW,UAAW,EACtD,IAAK,CAAE,CAAE,IAAI,EAAE,OAAO,WAAW,MAAM,CAAE,MAAO;AAChD,WAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP,MAAM,cAAc,QAAQ,cAAc;AAAA,IAC3C;AAAA,EACD,CAAE;AAGH,WAAS,KAAM;AAAA,IACd,IAAI;AAAA,IACJ,WAAO,gBAAI,WAAW,WAAY;AAAA,EACnC,CAAE;AAEF,SAAO;AACR;AAEA,SAAS,sBAAsB;AAC9B,QAAM,iBAAiB;AAEvB,SAAO,eAAe,WAAW,UAAU,YAAY,UAAW,aAAc,KAAK;AACtF;AAEA,SAAS,wBAAwB;AAChC,aAAO,uCAAa,8BAA+B;AACpD;;;ACxEA,4BAAqC;;;ACFrC,YAAuB;AACvB,IAAAC,eAAmB;;;ACDnB,IAAAC,gBAA8B;;;ACE9B,IAAAC,gBAA6C;AAItC,IAAM,iBAAiB,CAAE,UAAkB,MAAM,YAAY;AAC7D,IAAM,iBAAiB,CAAE,UAAkB,MAAM,YAAY;AAE7D,IAAM,6BAAyB;AAAA,EACrC;AAAA,EACA;AAAA,EACA,CAAE,UAAU,aAAc,YAAY,SAAU,QAAS,IACtD,SAAU,QAAS,IACnB;AACJ;AAEO,IAAM,8BAA0B;AAAA,EACtC;AAAA,EACA,CAAE,aAAc;AACf,UAAM,UAAU,CAAE,GAAe,MAAmB;AACnD,aAAS,EAAE,SAAS,EAAE,QAAU,EAAE,QAAQ,EAAE,QAAQ;AAAA,IACrD;AAEA,UAAM,MAAM,OAAO,OAAQ,QAAS;AAEpC,UAAM,WAAW,IAAI,OAAQ,CAAE,eAAgB,CAAE,WAAW,KAAM;AAClE,UAAM,WAAW,IAAI,OAAQ,CAAE,eAAgB,WAAW,SAAS,WAAY;AAC/E,UAAM,WAAW,IAAI,OAAQ,CAAE,eAAgB,WAAW,SAAS,WAAY;AAG/E,WAAO;AAAA,MACN,GAAG,SAAS,KAAM,OAAQ;AAAA,MAC1B,GAAG;AAAA,MACH,GAAG,SAAS,KAAM,OAAQ;AAAA,IAC3B;AAAA,EACD;AACD;;;ADlCe,SAAR,iBAAkC;AACxC,QAAM,UAAM,6BAAe,uBAAwB;AACnD,QAAM,aAAS,6BAAe,sBAAuB;AAErD,SAAO;AAAA,IACN;AAAA,IACA;AAAA,EACD;AACD;;;ADPA,gBAAgE;AAChE,mBAQO;;;AGbP,mBAA4B;AAE5B,IAAAC,6BAA2B;AAEZ,SAAR,wBAAyC;AAC/C,QAAM,eAAW,0BAAa,CAAE,WAA0B;AACzD,eAAO,uCAAY,4BAA4B,EAAE,OAAO,CAAE;AAAA,EAC3D,GAAG,CAAC,CAAE;AAEN,SAAO;AAAA,IACN;AAAA,EACD;AACD;;;AHIe,SAAR,sBAAuC;AAC7C,QAAM,EAAE,KAAK,OAAO,IAAI,eAAe;AACvC,QAAM,EAAE,SAAS,IAAI,sBAAsB;AAE3C,MAAK,CAAE,IAAI,UAAU,CAAE,QAAS;AAC/B,WAAO;AAAA,EACR;AAEA,QAAM,WAAW,CAAE,GAAY,UAAyB,SAAU,KAAM;AAExE,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,gBAAe;AAAA,MACf,OAAQ,OAAO;AAAA,MACf;AAAA,MACA,kBAAa,iBAAI,iBAAiB,WAAY;AAAA,MAC9C,IAAK;AAAA,QACJ,wBAAwB;AAAA,UACvB,iBAAiB;AAAA,QAClB;AAAA,MACD;AAAA;AAAA,IAGC,IAAI,IAAK,CAAE,EAAE,IAAI,OAAO,MAAM,MAAM,MAAO;AAC1C,YAAM,OAAO,SAAU,EAAG;AAE1B,YAAM,QAAQ,UAAW,QAAQ,SAAU,EACzC,QAAS,MAAM,KAAM,EACrB,QAAS,MAAM,OAAO,SAAS,KAAK,EAAG;AAEzC,aACC;AAAA,QAAC;AAAA;AAAA,UAAI,OAAQ;AAAA,UACZ,KAAM;AAAA,UACN,cAAa;AAAA,UACb,MAAO,oCAAC,WAAQ,SAAgB,oCAAC,UAAK,CAAE;AAAA,UACxC,IAAK,EAAE,UAAU,OAAO;AAAA;AAAA,MACzB;AAAA,IAEF,CAAE;AAAA,EAEJ;AAGF;AAEA,SAAS,QAAS,OAAsB;AACvC,SAAO;AAAA,IAAC,UAAAC;AAAA,IAAA;AAAA,MACP,aAAc;AAAA,QACb,IAAI;AAAA,UACH,6EAA6E;AAAA,YAC5E,IAAI;AAAA,UACL;AAAA,QACD;AAAA,MACD;AAAA,MACE,GAAG;AAAA;AAAA,EACN;AACD;AAEA,IAAM,WAAW;AAAA,EAChB,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,QAAQ;AACT;AAEA,IAAM,YAAY;AAAA,EACjB,SAAS;AAAA;AAAA,EAET,iBAAa,iBAAI,oBAAoB,WAAY;AAAA;AAAA,EAGjD,iBAAa,iBAAI,mBAAmB,WAAY;AACjD;;;ADxFA,IAAAC,gBAAgC;AAEjB,SAAR,OAAwB;AAC9B,YAAU;AAEV,mBAAiB;AAClB;AAEA,SAAS,YAAY;AACpB,qCAAiB,KAAM;AAEvB,YAAU;AACX;AAEA,SAAS,mBAAmB;AAC3B,kDAAsB;AAAA,IACrB,IAAI;AAAA,IACJ,WAAW;AAAA,IACX,SAAS;AAAA,MACR,UAAU;AAAA;AAAA,IACX;AAAA,EACD,CAAE;AACH;;;AKxBA,KAAK;","names":["import_store","init","import_i18n","import_store","import_store","import_editor_v1_adapters","BaseTooltip","import_store"]}
|
|
1
|
+
{"version":3,"sources":["../src/store/index.ts","../src/sync/sync-store.ts","../src/init.ts","../src/components/breakpoints-switcher.tsx","../src/hooks/use-breakpoints.ts","../src/store/selectors.ts","../src/hooks/use-breakpoints-actions.ts","../src/index.ts"],"sourcesContent":["import { __createSlice, PayloadAction } from '@elementor/store';\nimport { Breakpoint, BreakpointId } from '../types';\n\nexport type State = {\n\tentities: Record<BreakpointId, Breakpoint>,\n\tactiveId: BreakpointId | null,\n}\nconst initialState: State = {\n\tentities: {} as State['entities'],\n\tactiveId: null,\n};\n\nexport const slice = __createSlice( {\n\tname: 'breakpoints',\n\tinitialState,\n\treducers: {\n\t\tinit( state, action: PayloadAction<{\n\t\t\tentities: Breakpoint[],\n\t\t\tactiveId: State['activeId'],\n\t\t}> ) {\n\t\t\tstate.activeId = action.payload.activeId;\n\t\t\tstate.entities = normalizeEntities( action.payload.entities );\n\t\t},\n\n\t\tactivateBreakpoint( state, action: PayloadAction<BreakpointId> ) {\n\t\t\tif ( state.entities[ action.payload ] ) {\n\t\t\t\tstate.activeId = action.payload;\n\t\t\t}\n\t\t},\n\t},\n} );\n\nfunction normalizeEntities( entities: Breakpoint[] ) {\n\treturn entities.reduce( ( acc, breakpoint ) => {\n\t\treturn {\n\t\t\t...acc,\n\t\t\t[ breakpoint.id ]: breakpoint,\n\t\t};\n\t}, {} as State['entities'] );\n}\n","import { slice } from '../store';\nimport { __dispatch } from '@elementor/store';\nimport { Breakpoint, ExtendedWindow } from '../types';\nimport { __privateListenTo as listenTo, v1ReadyEvent, windowEvent } from '@elementor/editor-v1-adapters';\nimport { __ } from '@wordpress/i18n';\n\nexport default function syncStore() {\n\tsyncInitialization();\n\tsyncOnChange();\n}\n\nfunction syncInitialization() {\n\tconst { init } = slice.actions;\n\n\tlistenTo(\n\t\tv1ReadyEvent(),\n\t\t() => {\n\t\t\t__dispatch( init( {\n\t\t\t\tentities: getBreakpoints(),\n\t\t\t\tactiveId: getActiveBreakpoint(),\n\t\t\t} ) );\n\t\t}\n\t);\n}\n\nfunction syncOnChange() {\n\tconst { activateBreakpoint } = slice.actions;\n\n\tlistenTo(\n\t\tdeviceModeChangeEvent(),\n\t\t() => {\n\t\t\tconst activeBreakpoint = getActiveBreakpoint();\n\n\t\t\t__dispatch( activateBreakpoint( activeBreakpoint ) );\n\t\t},\n\t);\n}\n\nfunction getBreakpoints() {\n\tconst { breakpoints } = ( window as unknown as ExtendedWindow ).elementor?.config?.responsive || {};\n\n\tif ( ! breakpoints ) {\n\t\treturn [];\n\t}\n\n\tconst entities = Object\n\t\t.entries( breakpoints )\n\t\t.filter( ( [ , breakpoint ] ) => breakpoint.is_enabled )\n\t\t.map( ( [ id, { value, direction, label } ] ) => {\n\t\t\treturn {\n\t\t\t\tid,\n\t\t\t\tlabel,\n\t\t\t\twidth: value,\n\t\t\t\ttype: direction === 'min' ? 'min-width' : 'max-width',\n\t\t\t} as Breakpoint;\n\t\t} );\n\n\t// Desktop breakpoint is not included in V1 config.\n\tentities.push( {\n\t\tid: 'desktop',\n\t\tlabel: __( 'Desktop', 'elementor' ),\n\t} );\n\n\treturn entities;\n}\n\nfunction getActiveBreakpoint() {\n\tconst extendedWindow = window as unknown as ExtendedWindow;\n\n\treturn extendedWindow.elementor?.channels?.deviceMode?.request?.( 'currentMode' ) || null;\n}\n\nfunction deviceModeChangeEvent() {\n\treturn windowEvent( 'elementor/device-mode/change' );\n}\n","import { slice } from './store';\nimport syncStore from './sync/sync-store';\nimport { injectIntoResponsive } from '@elementor/editor-app-bar';\nimport BreakpointsSwitcher from './components/breakpoints-switcher';\nimport { __registerSlice } from '@elementor/store';\n\nexport default function init() {\n\tinitStore();\n\n\tregisterAppBarUI();\n}\n\nfunction initStore() {\n\t__registerSlice( slice );\n\n\tsyncStore();\n}\n\nfunction registerAppBarUI() {\n\tinjectIntoResponsive( {\n\t\tid: 'responsive-breakpoints-switcher',\n\t\tcomponent: BreakpointsSwitcher,\n\t\toptions: {\n\t\t\tpriority: 20, // After document indication.\n\t\t},\n\t} );\n}\n","import * as React from 'react';\nimport { __ } from '@wordpress/i18n';\nimport { BreakpointId } from '../types';\nimport useBreakpoints from '../hooks/use-breakpoints';\nimport { Tab, Tabs, Tooltip as BaseTooltip, TooltipProps } from '@elementor/ui';\nimport {\n\tDesktopIcon,\n\tTabletPortraitIcon,\n\tMobilePortraitIcon,\n\tWidescreenIcon,\n\tLaptopIcon,\n\tTabletLandscapeIcon,\n\tMobileLandscapeIcon,\n} from '@elementor/icons';\nimport useBreakpointsActions from '../hooks/use-breakpoints-actions';\n\nexport default function BreakpointsSwitcher() {\n\tconst { all, active } = useBreakpoints();\n\tconst { activate } = useBreakpointsActions();\n\n\tif ( ! all.length || ! active ) {\n\t\treturn null;\n\t}\n\n\tconst onChange = ( _: unknown, value: BreakpointId ) => activate( value );\n\n\treturn (\n\t\t<Tabs\n\t\t\ttextColor=\"inherit\"\n\t\t\tindicatorColor=\"secondary\"\n\t\t\tvalue={ active.id }\n\t\t\tonChange={ onChange }\n\t\t\taria-label={ __( 'Switch Device', 'elementor' ) }\n\t\t\tsx={ {\n\t\t\t\t'& .MuiTabs-indicator': {\n\t\t\t\t\tbackgroundColor: 'text.primary',\n\t\t\t\t},\n\t\t\t} }\n\t\t>\n\t\t\t{\n\t\t\t\tall.map( ( { id, label, type, width } ) => {\n\t\t\t\t\tconst Icon = iconsMap[ id ];\n\n\t\t\t\t\tconst title = labelsMap[ type || 'default' ]\n\t\t\t\t\t\t.replace( '%s', label )\n\t\t\t\t\t\t.replace( '%d', width?.toString() || '' );\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<Tab value={ id }\n\t\t\t\t\t\t\tkey={ id }\n\t\t\t\t\t\t\taria-label={ title }\n\t\t\t\t\t\t\ticon={ <Tooltip title={ title }><Icon /></Tooltip> }\n\t\t\t\t\t\t\tsx={ { minWidth: 'auto' } }\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t} )\n\t\t\t}\n\t\t</Tabs>\n\n\t);\n}\n\nfunction Tooltip( props: TooltipProps ) {\n\treturn <BaseTooltip\n\t\tPopperProps={ {\n\t\t\tsx: {\n\t\t\t\t'&.MuiTooltip-popper .MuiTooltip-tooltip.MuiTooltip-tooltipPlacementBottom': {\n\t\t\t\t\tmt: 2.5,\n\t\t\t\t},\n\t\t\t},\n\t\t} }\n\t\t{ ...props }\n\t/>;\n}\n\nconst iconsMap = {\n\twidescreen: WidescreenIcon,\n\tdesktop: DesktopIcon,\n\tlaptop: LaptopIcon,\n\ttablet_extra: TabletLandscapeIcon,\n\ttablet: TabletPortraitIcon,\n\tmobile_extra: MobileLandscapeIcon,\n\tmobile: MobilePortraitIcon,\n};\n\nconst labelsMap = {\n\tdefault: '%s',\n\t// translators: %s: Breakpoint label, %d: Breakpoint size.\n\t'min-width': __( '%s (%dpx and up)', 'elementor' ),\n\n\t// translators: %s: Breakpoint label, %d: Breakpoint size.\n\t'max-width': __( '%s (up to %dpx)', 'elementor' ),\n} as const;\n","import { __useSelector as useSelector } from '@elementor/store';\nimport { selectActiveBreakpoint, selectSortedBreakpoints } from '../store/selectors';\n\nexport default function useBreakpoints() {\n\tconst all = useSelector( selectSortedBreakpoints );\n\tconst active = useSelector( selectActiveBreakpoint );\n\n\treturn {\n\t\tall,\n\t\tactive,\n\t};\n}\n","import { slice } from './index';\nimport { Breakpoint } from '../types';\nimport { __createSelector, SliceState } from '@elementor/store';\n\ntype State = SliceState<typeof slice>;\n\nexport const selectEntities = ( state: State ) => state.breakpoints.entities;\nexport const selectActiveId = ( state: State ) => state.breakpoints.activeId;\n\nexport const selectActiveBreakpoint = __createSelector(\n\tselectEntities,\n\tselectActiveId,\n\t( entities, activeId ) => activeId && entities[ activeId ]\n\t\t? entities[ activeId ]\n\t\t: null,\n);\n\nexport const selectSortedBreakpoints = __createSelector(\n\tselectEntities,\n\t( entities ) => {\n\t\tconst byWidth = ( a: Breakpoint, b: Breakpoint ) => {\n\t\t\treturn ( a.width && b.width ) ? b.width - a.width : 0;\n\t\t};\n\n\t\tconst all = Object.values( entities );\n\n\t\tconst defaults = all.filter( ( breakpoint ) => ! breakpoint.width ); // AKA Desktop.\n\t\tconst minWidth = all.filter( ( breakpoint ) => breakpoint.type === 'min-width' );\n\t\tconst maxWidth = all.filter( ( breakpoint ) => breakpoint.type === 'max-width' );\n\n\t\t// Sort by size, big to small.\n\t\treturn [\n\t\t\t...minWidth.sort( byWidth ),\n\t\t\t...defaults,\n\t\t\t...maxWidth.sort( byWidth ),\n\t\t];\n\t},\n);\n","import { useCallback } from 'react';\nimport { BreakpointId } from '../types';\nimport { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';\n\nexport default function useBreakpointsActions() {\n\tconst activate = useCallback( ( device: BreakpointId ) => {\n\t\treturn runCommand( 'panel/change-device-mode', { device } );\n\t}, [] );\n\n\treturn {\n\t\tactivate,\n\t};\n}\n","import init from './init';\n\ninit();\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,mBAA6C;AAO7C,IAAM,eAAsB;AAAA,EAC3B,UAAU,CAAC;AAAA,EACX,UAAU;AACX;AAEO,IAAM,YAAQ,4BAAe;AAAA,EACnC,MAAM;AAAA,EACN;AAAA,EACA,UAAU;AAAA,IACT,KAAM,OAAO,QAGR;AACJ,YAAM,WAAW,OAAO,QAAQ;AAChC,YAAM,WAAW,kBAAmB,OAAO,QAAQ,QAAS;AAAA,IAC7D;AAAA,IAEA,mBAAoB,OAAO,QAAsC;AAChE,UAAK,MAAM,SAAU,OAAO,OAAQ,GAAI;AACvC,cAAM,WAAW,OAAO;AAAA,MACzB;AAAA,IACD;AAAA,EACD;AACD,CAAE;AAEF,SAAS,kBAAmB,UAAyB;AACpD,SAAO,SAAS,OAAQ,CAAE,KAAK,eAAgB;AAC9C,WAAO;AAAA,MACN,GAAG;AAAA,MACH,CAAE,WAAW,EAAG,GAAG;AAAA,IACpB;AAAA,EACD,GAAG,CAAC,CAAuB;AAC5B;;;ACtCA,IAAAA,gBAA2B;AAE3B,gCAAyE;AACzE,kBAAmB;AAEJ,SAAR,YAA6B;AACnC,qBAAmB;AACnB,eAAa;AACd;AAEA,SAAS,qBAAqB;AAC7B,QAAM,EAAE,MAAAC,MAAK,IAAI,MAAM;AAEvB,gCAAAC;AAAA,QACC,wCAAa;AAAA,IACb,MAAM;AACL,oCAAYD,MAAM;AAAA,QACjB,UAAU,eAAe;AAAA,QACzB,UAAU,oBAAoB;AAAA,MAC/B,CAAE,CAAE;AAAA,IACL;AAAA,EACD;AACD;AAEA,SAAS,eAAe;AACvB,QAAM,EAAE,mBAAmB,IAAI,MAAM;AAErC,gCAAAC;AAAA,IACC,sBAAsB;AAAA,IACtB,MAAM;AACL,YAAM,mBAAmB,oBAAoB;AAE7C,oCAAY,mBAAoB,gBAAiB,CAAE;AAAA,IACpD;AAAA,EACD;AACD;AAEA,SAAS,iBAAiB;AACzB,QAAM,EAAE,YAAY,IAAM,OAAsC,WAAW,QAAQ,cAAc,CAAC;AAElG,MAAK,CAAE,aAAc;AACpB,WAAO,CAAC;AAAA,EACT;AAEA,QAAM,WAAW,OACf,QAAS,WAAY,EACrB,OAAQ,CAAE,CAAE,EAAE,UAAW,MAAO,WAAW,UAAW,EACtD,IAAK,CAAE,CAAE,IAAI,EAAE,OAAO,WAAW,MAAM,CAAE,MAAO;AAChD,WAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP,MAAM,cAAc,QAAQ,cAAc;AAAA,IAC3C;AAAA,EACD,CAAE;AAGH,WAAS,KAAM;AAAA,IACd,IAAI;AAAA,IACJ,WAAO,gBAAI,WAAW,WAAY;AAAA,EACnC,CAAE;AAEF,SAAO;AACR;AAEA,SAAS,sBAAsB;AAC9B,QAAM,iBAAiB;AAEvB,SAAO,eAAe,WAAW,UAAU,YAAY,UAAW,aAAc,KAAK;AACtF;AAEA,SAAS,wBAAwB;AAChC,aAAO,uCAAa,8BAA+B;AACpD;;;ACxEA,4BAAqC;;;ACFrC,YAAuB;AACvB,IAAAC,eAAmB;;;ACDnB,IAAAC,gBAA6C;;;ACE7C,IAAAC,gBAA6C;AAItC,IAAM,iBAAiB,CAAE,UAAkB,MAAM,YAAY;AAC7D,IAAM,iBAAiB,CAAE,UAAkB,MAAM,YAAY;AAE7D,IAAM,6BAAyB;AAAA,EACrC;AAAA,EACA;AAAA,EACA,CAAE,UAAU,aAAc,YAAY,SAAU,QAAS,IACtD,SAAU,QAAS,IACnB;AACJ;AAEO,IAAM,8BAA0B;AAAA,EACtC;AAAA,EACA,CAAE,aAAc;AACf,UAAM,UAAU,CAAE,GAAe,MAAmB;AACnD,aAAS,EAAE,SAAS,EAAE,QAAU,EAAE,QAAQ,EAAE,QAAQ;AAAA,IACrD;AAEA,UAAM,MAAM,OAAO,OAAQ,QAAS;AAEpC,UAAM,WAAW,IAAI,OAAQ,CAAE,eAAgB,CAAE,WAAW,KAAM;AAClE,UAAM,WAAW,IAAI,OAAQ,CAAE,eAAgB,WAAW,SAAS,WAAY;AAC/E,UAAM,WAAW,IAAI,OAAQ,CAAE,eAAgB,WAAW,SAAS,WAAY;AAG/E,WAAO;AAAA,MACN,GAAG,SAAS,KAAM,OAAQ;AAAA,MAC1B,GAAG;AAAA,MACH,GAAG,SAAS,KAAM,OAAQ;AAAA,IAC3B;AAAA,EACD;AACD;;;ADlCe,SAAR,iBAAkC;AACxC,QAAM,UAAM,cAAAC,eAAa,uBAAwB;AACjD,QAAM,aAAS,cAAAA,eAAa,sBAAuB;AAEnD,SAAO;AAAA,IACN;AAAA,IACA;AAAA,EACD;AACD;;;ADPA,gBAAgE;AAChE,mBAQO;;;AGbP,mBAA4B;AAE5B,IAAAC,6BAAkD;AAEnC,SAAR,wBAAyC;AAC/C,QAAM,eAAW,0BAAa,CAAE,WAA0B;AACzD,eAAO,2BAAAC,qBAAY,4BAA4B,EAAE,OAAO,CAAE;AAAA,EAC3D,GAAG,CAAC,CAAE;AAEN,SAAO;AAAA,IACN;AAAA,EACD;AACD;;;AHIe,SAAR,sBAAuC;AAC7C,QAAM,EAAE,KAAK,OAAO,IAAI,eAAe;AACvC,QAAM,EAAE,SAAS,IAAI,sBAAsB;AAE3C,MAAK,CAAE,IAAI,UAAU,CAAE,QAAS;AAC/B,WAAO;AAAA,EACR;AAEA,QAAM,WAAW,CAAE,GAAY,UAAyB,SAAU,KAAM;AAExE,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,gBAAe;AAAA,MACf,OAAQ,OAAO;AAAA,MACf;AAAA,MACA,kBAAa,iBAAI,iBAAiB,WAAY;AAAA,MAC9C,IAAK;AAAA,QACJ,wBAAwB;AAAA,UACvB,iBAAiB;AAAA,QAClB;AAAA,MACD;AAAA;AAAA,IAGC,IAAI,IAAK,CAAE,EAAE,IAAI,OAAO,MAAM,MAAM,MAAO;AAC1C,YAAM,OAAO,SAAU,EAAG;AAE1B,YAAM,QAAQ,UAAW,QAAQ,SAAU,EACzC,QAAS,MAAM,KAAM,EACrB,QAAS,MAAM,OAAO,SAAS,KAAK,EAAG;AAEzC,aACC;AAAA,QAAC;AAAA;AAAA,UAAI,OAAQ;AAAA,UACZ,KAAM;AAAA,UACN,cAAa;AAAA,UACb,MAAO,oCAAC,WAAQ,SAAgB,oCAAC,UAAK,CAAE;AAAA,UACxC,IAAK,EAAE,UAAU,OAAO;AAAA;AAAA,MACzB;AAAA,IAEF,CAAE;AAAA,EAEJ;AAGF;AAEA,SAAS,QAAS,OAAsB;AACvC,SAAO;AAAA,IAAC,UAAAC;AAAA,IAAA;AAAA,MACP,aAAc;AAAA,QACb,IAAI;AAAA,UACH,6EAA6E;AAAA,YAC5E,IAAI;AAAA,UACL;AAAA,QACD;AAAA,MACD;AAAA,MACE,GAAG;AAAA;AAAA,EACN;AACD;AAEA,IAAM,WAAW;AAAA,EAChB,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,QAAQ;AACT;AAEA,IAAM,YAAY;AAAA,EACjB,SAAS;AAAA;AAAA,EAET,iBAAa,iBAAI,oBAAoB,WAAY;AAAA;AAAA,EAGjD,iBAAa,iBAAI,mBAAmB,WAAY;AACjD;;;ADxFA,IAAAC,gBAAgC;AAEjB,SAAR,OAAwB;AAC9B,YAAU;AAEV,mBAAiB;AAClB;AAEA,SAAS,YAAY;AACpB,qCAAiB,KAAM;AAEvB,YAAU;AACX;AAEA,SAAS,mBAAmB;AAC3B,kDAAsB;AAAA,IACrB,IAAI;AAAA,IACJ,WAAW;AAAA,IACX,SAAS;AAAA,MACR,UAAU;AAAA;AAAA,IACX;AAAA,EACD,CAAE;AACH;;;AKxBA,KAAK;","names":["import_store","init","listenTo","import_i18n","import_store","import_store","useSelector","import_editor_v1_adapters","runCommand","BaseTooltip","import_store"]}
|
package/dist/index.mjs
CHANGED
|
@@ -30,7 +30,7 @@ function normalizeEntities(entities) {
|
|
|
30
30
|
|
|
31
31
|
// src/sync/sync-store.ts
|
|
32
32
|
import { __dispatch } from "@elementor/store";
|
|
33
|
-
import { listenTo, v1ReadyEvent, windowEvent } from "@elementor/editor-v1-adapters";
|
|
33
|
+
import { __privateListenTo as listenTo, v1ReadyEvent, windowEvent } from "@elementor/editor-v1-adapters";
|
|
34
34
|
import { __ } from "@wordpress/i18n";
|
|
35
35
|
function syncStore() {
|
|
36
36
|
syncInitialization();
|
|
@@ -93,7 +93,7 @@ import * as React from "react";
|
|
|
93
93
|
import { __ as __2 } from "@wordpress/i18n";
|
|
94
94
|
|
|
95
95
|
// src/hooks/use-breakpoints.ts
|
|
96
|
-
import { __useSelector } from "@elementor/store";
|
|
96
|
+
import { __useSelector as useSelector } from "@elementor/store";
|
|
97
97
|
|
|
98
98
|
// src/store/selectors.ts
|
|
99
99
|
import { __createSelector } from "@elementor/store";
|
|
@@ -124,8 +124,8 @@ var selectSortedBreakpoints = __createSelector(
|
|
|
124
124
|
|
|
125
125
|
// src/hooks/use-breakpoints.ts
|
|
126
126
|
function useBreakpoints() {
|
|
127
|
-
const all =
|
|
128
|
-
const active =
|
|
127
|
+
const all = useSelector(selectSortedBreakpoints);
|
|
128
|
+
const active = useSelector(selectActiveBreakpoint);
|
|
129
129
|
return {
|
|
130
130
|
all,
|
|
131
131
|
active
|
|
@@ -146,7 +146,7 @@ import {
|
|
|
146
146
|
|
|
147
147
|
// src/hooks/use-breakpoints-actions.ts
|
|
148
148
|
import { useCallback } from "react";
|
|
149
|
-
import { runCommand } from "@elementor/editor-v1-adapters";
|
|
149
|
+
import { __privateRunCommand as runCommand } from "@elementor/editor-v1-adapters";
|
|
150
150
|
function useBreakpointsActions() {
|
|
151
151
|
const activate = useCallback((device) => {
|
|
152
152
|
return runCommand("panel/change-device-mode", { device });
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/store/index.ts","../src/sync/sync-store.ts","../src/init.ts","../src/components/breakpoints-switcher.tsx","../src/hooks/use-breakpoints.ts","../src/store/selectors.ts","../src/hooks/use-breakpoints-actions.ts","../src/index.ts"],"sourcesContent":["import { __createSlice, PayloadAction } from '@elementor/store';\nimport { Breakpoint, BreakpointId } from '../types';\n\nexport type State = {\n\tentities: Record<BreakpointId, Breakpoint>,\n\tactiveId: BreakpointId | null,\n}\nconst initialState: State = {\n\tentities: {} as State['entities'],\n\tactiveId: null,\n};\n\nexport const slice = __createSlice( {\n\tname: 'breakpoints',\n\tinitialState,\n\treducers: {\n\t\tinit( state, action: PayloadAction<{\n\t\t\tentities: Breakpoint[],\n\t\t\tactiveId: State['activeId'],\n\t\t}> ) {\n\t\t\tstate.activeId = action.payload.activeId;\n\t\t\tstate.entities = normalizeEntities( action.payload.entities );\n\t\t},\n\n\t\tactivateBreakpoint( state, action: PayloadAction<BreakpointId> ) {\n\t\t\tif ( state.entities[ action.payload ] ) {\n\t\t\t\tstate.activeId = action.payload;\n\t\t\t}\n\t\t},\n\t},\n} );\n\nfunction normalizeEntities( entities: Breakpoint[] ) {\n\treturn entities.reduce( ( acc, breakpoint ) => {\n\t\treturn {\n\t\t\t...acc,\n\t\t\t[ breakpoint.id ]: breakpoint,\n\t\t};\n\t}, {} as State['entities'] );\n}\n","import { slice } from '../store';\nimport { __dispatch } from '@elementor/store';\nimport { Breakpoint, ExtendedWindow } from '../types';\nimport { listenTo, v1ReadyEvent, windowEvent } from '@elementor/editor-v1-adapters';\nimport { __ } from '@wordpress/i18n';\n\nexport default function syncStore() {\n\tsyncInitialization();\n\tsyncOnChange();\n}\n\nfunction syncInitialization() {\n\tconst { init } = slice.actions;\n\n\tlistenTo(\n\t\tv1ReadyEvent(),\n\t\t() => {\n\t\t\t__dispatch( init( {\n\t\t\t\tentities: getBreakpoints(),\n\t\t\t\tactiveId: getActiveBreakpoint(),\n\t\t\t} ) );\n\t\t}\n\t);\n}\n\nfunction syncOnChange() {\n\tconst { activateBreakpoint } = slice.actions;\n\n\tlistenTo(\n\t\tdeviceModeChangeEvent(),\n\t\t() => {\n\t\t\tconst activeBreakpoint = getActiveBreakpoint();\n\n\t\t\t__dispatch( activateBreakpoint( activeBreakpoint ) );\n\t\t},\n\t);\n}\n\nfunction getBreakpoints() {\n\tconst { breakpoints } = ( window as unknown as ExtendedWindow ).elementor?.config?.responsive || {};\n\n\tif ( ! breakpoints ) {\n\t\treturn [];\n\t}\n\n\tconst entities = Object\n\t\t.entries( breakpoints )\n\t\t.filter( ( [ , breakpoint ] ) => breakpoint.is_enabled )\n\t\t.map( ( [ id, { value, direction, label } ] ) => {\n\t\t\treturn {\n\t\t\t\tid,\n\t\t\t\tlabel,\n\t\t\t\twidth: value,\n\t\t\t\ttype: direction === 'min' ? 'min-width' : 'max-width',\n\t\t\t} as Breakpoint;\n\t\t} );\n\n\t// Desktop breakpoint is not included in V1 config.\n\tentities.push( {\n\t\tid: 'desktop',\n\t\tlabel: __( 'Desktop', 'elementor' ),\n\t} );\n\n\treturn entities;\n}\n\nfunction getActiveBreakpoint() {\n\tconst extendedWindow = window as unknown as ExtendedWindow;\n\n\treturn extendedWindow.elementor?.channels?.deviceMode?.request?.( 'currentMode' ) || null;\n}\n\nfunction deviceModeChangeEvent() {\n\treturn windowEvent( 'elementor/device-mode/change' );\n}\n","import { slice } from './store';\nimport syncStore from './sync/sync-store';\nimport { injectIntoResponsive } from '@elementor/editor-app-bar';\nimport BreakpointsSwitcher from './components/breakpoints-switcher';\nimport { __registerSlice } from '@elementor/store';\n\nexport default function init() {\n\tinitStore();\n\n\tregisterAppBarUI();\n}\n\nfunction initStore() {\n\t__registerSlice( slice );\n\n\tsyncStore();\n}\n\nfunction registerAppBarUI() {\n\tinjectIntoResponsive( {\n\t\tid: 'responsive-breakpoints-switcher',\n\t\tcomponent: BreakpointsSwitcher,\n\t\toptions: {\n\t\t\tpriority: 20, // After document indication.\n\t\t},\n\t} );\n}\n","import * as React from 'react';\nimport { __ } from '@wordpress/i18n';\nimport { BreakpointId } from '../types';\nimport useBreakpoints from '../hooks/use-breakpoints';\nimport { Tab, Tabs, Tooltip as BaseTooltip, TooltipProps } from '@elementor/ui';\nimport {\n\tDesktopIcon,\n\tTabletPortraitIcon,\n\tMobilePortraitIcon,\n\tWidescreenIcon,\n\tLaptopIcon,\n\tTabletLandscapeIcon,\n\tMobileLandscapeIcon,\n} from '@elementor/icons';\nimport useBreakpointsActions from '../hooks/use-breakpoints-actions';\n\nexport default function BreakpointsSwitcher() {\n\tconst { all, active } = useBreakpoints();\n\tconst { activate } = useBreakpointsActions();\n\n\tif ( ! all.length || ! active ) {\n\t\treturn null;\n\t}\n\n\tconst onChange = ( _: unknown, value: BreakpointId ) => activate( value );\n\n\treturn (\n\t\t<Tabs\n\t\t\ttextColor=\"inherit\"\n\t\t\tindicatorColor=\"secondary\"\n\t\t\tvalue={ active.id }\n\t\t\tonChange={ onChange }\n\t\t\taria-label={ __( 'Switch Device', 'elementor' ) }\n\t\t\tsx={ {\n\t\t\t\t'& .MuiTabs-indicator': {\n\t\t\t\t\tbackgroundColor: 'text.primary',\n\t\t\t\t},\n\t\t\t} }\n\t\t>\n\t\t\t{\n\t\t\t\tall.map( ( { id, label, type, width } ) => {\n\t\t\t\t\tconst Icon = iconsMap[ id ];\n\n\t\t\t\t\tconst title = labelsMap[ type || 'default' ]\n\t\t\t\t\t\t.replace( '%s', label )\n\t\t\t\t\t\t.replace( '%d', width?.toString() || '' );\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<Tab value={ id }\n\t\t\t\t\t\t\tkey={ id }\n\t\t\t\t\t\t\taria-label={ title }\n\t\t\t\t\t\t\ticon={ <Tooltip title={ title }><Icon /></Tooltip> }\n\t\t\t\t\t\t\tsx={ { minWidth: 'auto' } }\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t} )\n\t\t\t}\n\t\t</Tabs>\n\n\t);\n}\n\nfunction Tooltip( props: TooltipProps ) {\n\treturn <BaseTooltip\n\t\tPopperProps={ {\n\t\t\tsx: {\n\t\t\t\t'&.MuiTooltip-popper .MuiTooltip-tooltip.MuiTooltip-tooltipPlacementBottom': {\n\t\t\t\t\tmt: 2.5,\n\t\t\t\t},\n\t\t\t},\n\t\t} }\n\t\t{ ...props }\n\t/>;\n}\n\nconst iconsMap = {\n\twidescreen: WidescreenIcon,\n\tdesktop: DesktopIcon,\n\tlaptop: LaptopIcon,\n\ttablet_extra: TabletLandscapeIcon,\n\ttablet: TabletPortraitIcon,\n\tmobile_extra: MobileLandscapeIcon,\n\tmobile: MobilePortraitIcon,\n};\n\nconst labelsMap = {\n\tdefault: '%s',\n\t// translators: %s: Breakpoint label, %d: Breakpoint size.\n\t'min-width': __( '%s (%dpx and up)', 'elementor' ),\n\n\t// translators: %s: Breakpoint label, %d: Breakpoint size.\n\t'max-width': __( '%s (up to %dpx)', 'elementor' ),\n} as const;\n","import { __useSelector } from '@elementor/store';\nimport { selectActiveBreakpoint, selectSortedBreakpoints } from '../store/selectors';\n\nexport default function useBreakpoints() {\n\tconst all = __useSelector( selectSortedBreakpoints );\n\tconst active = __useSelector( selectActiveBreakpoint );\n\n\treturn {\n\t\tall,\n\t\tactive,\n\t};\n}\n","import { slice } from './index';\nimport { Breakpoint } from '../types';\nimport { __createSelector, SliceState } from '@elementor/store';\n\ntype State = SliceState<typeof slice>;\n\nexport const selectEntities = ( state: State ) => state.breakpoints.entities;\nexport const selectActiveId = ( state: State ) => state.breakpoints.activeId;\n\nexport const selectActiveBreakpoint = __createSelector(\n\tselectEntities,\n\tselectActiveId,\n\t( entities, activeId ) => activeId && entities[ activeId ]\n\t\t? entities[ activeId ]\n\t\t: null,\n);\n\nexport const selectSortedBreakpoints = __createSelector(\n\tselectEntities,\n\t( entities ) => {\n\t\tconst byWidth = ( a: Breakpoint, b: Breakpoint ) => {\n\t\t\treturn ( a.width && b.width ) ? b.width - a.width : 0;\n\t\t};\n\n\t\tconst all = Object.values( entities );\n\n\t\tconst defaults = all.filter( ( breakpoint ) => ! breakpoint.width ); // AKA Desktop.\n\t\tconst minWidth = all.filter( ( breakpoint ) => breakpoint.type === 'min-width' );\n\t\tconst maxWidth = all.filter( ( breakpoint ) => breakpoint.type === 'max-width' );\n\n\t\t// Sort by size, big to small.\n\t\treturn [\n\t\t\t...minWidth.sort( byWidth ),\n\t\t\t...defaults,\n\t\t\t...maxWidth.sort( byWidth ),\n\t\t];\n\t},\n);\n","import { useCallback } from 'react';\nimport { BreakpointId } from '../types';\nimport { runCommand } from '@elementor/editor-v1-adapters';\n\nexport default function useBreakpointsActions() {\n\tconst activate = useCallback( ( device: BreakpointId ) => {\n\t\treturn runCommand( 'panel/change-device-mode', { device } );\n\t}, [] );\n\n\treturn {\n\t\tactivate,\n\t};\n}\n","import init from './init';\n\ninit();\n"],"mappings":"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","names":["init","__","__"]}
|
|
1
|
+
{"version":3,"sources":["../src/store/index.ts","../src/sync/sync-store.ts","../src/init.ts","../src/components/breakpoints-switcher.tsx","../src/hooks/use-breakpoints.ts","../src/store/selectors.ts","../src/hooks/use-breakpoints-actions.ts","../src/index.ts"],"sourcesContent":["import { __createSlice, PayloadAction } from '@elementor/store';\nimport { Breakpoint, BreakpointId } from '../types';\n\nexport type State = {\n\tentities: Record<BreakpointId, Breakpoint>,\n\tactiveId: BreakpointId | null,\n}\nconst initialState: State = {\n\tentities: {} as State['entities'],\n\tactiveId: null,\n};\n\nexport const slice = __createSlice( {\n\tname: 'breakpoints',\n\tinitialState,\n\treducers: {\n\t\tinit( state, action: PayloadAction<{\n\t\t\tentities: Breakpoint[],\n\t\t\tactiveId: State['activeId'],\n\t\t}> ) {\n\t\t\tstate.activeId = action.payload.activeId;\n\t\t\tstate.entities = normalizeEntities( action.payload.entities );\n\t\t},\n\n\t\tactivateBreakpoint( state, action: PayloadAction<BreakpointId> ) {\n\t\t\tif ( state.entities[ action.payload ] ) {\n\t\t\t\tstate.activeId = action.payload;\n\t\t\t}\n\t\t},\n\t},\n} );\n\nfunction normalizeEntities( entities: Breakpoint[] ) {\n\treturn entities.reduce( ( acc, breakpoint ) => {\n\t\treturn {\n\t\t\t...acc,\n\t\t\t[ breakpoint.id ]: breakpoint,\n\t\t};\n\t}, {} as State['entities'] );\n}\n","import { slice } from '../store';\nimport { __dispatch } from '@elementor/store';\nimport { Breakpoint, ExtendedWindow } from '../types';\nimport { __privateListenTo as listenTo, v1ReadyEvent, windowEvent } from '@elementor/editor-v1-adapters';\nimport { __ } from '@wordpress/i18n';\n\nexport default function syncStore() {\n\tsyncInitialization();\n\tsyncOnChange();\n}\n\nfunction syncInitialization() {\n\tconst { init } = slice.actions;\n\n\tlistenTo(\n\t\tv1ReadyEvent(),\n\t\t() => {\n\t\t\t__dispatch( init( {\n\t\t\t\tentities: getBreakpoints(),\n\t\t\t\tactiveId: getActiveBreakpoint(),\n\t\t\t} ) );\n\t\t}\n\t);\n}\n\nfunction syncOnChange() {\n\tconst { activateBreakpoint } = slice.actions;\n\n\tlistenTo(\n\t\tdeviceModeChangeEvent(),\n\t\t() => {\n\t\t\tconst activeBreakpoint = getActiveBreakpoint();\n\n\t\t\t__dispatch( activateBreakpoint( activeBreakpoint ) );\n\t\t},\n\t);\n}\n\nfunction getBreakpoints() {\n\tconst { breakpoints } = ( window as unknown as ExtendedWindow ).elementor?.config?.responsive || {};\n\n\tif ( ! breakpoints ) {\n\t\treturn [];\n\t}\n\n\tconst entities = Object\n\t\t.entries( breakpoints )\n\t\t.filter( ( [ , breakpoint ] ) => breakpoint.is_enabled )\n\t\t.map( ( [ id, { value, direction, label } ] ) => {\n\t\t\treturn {\n\t\t\t\tid,\n\t\t\t\tlabel,\n\t\t\t\twidth: value,\n\t\t\t\ttype: direction === 'min' ? 'min-width' : 'max-width',\n\t\t\t} as Breakpoint;\n\t\t} );\n\n\t// Desktop breakpoint is not included in V1 config.\n\tentities.push( {\n\t\tid: 'desktop',\n\t\tlabel: __( 'Desktop', 'elementor' ),\n\t} );\n\n\treturn entities;\n}\n\nfunction getActiveBreakpoint() {\n\tconst extendedWindow = window as unknown as ExtendedWindow;\n\n\treturn extendedWindow.elementor?.channels?.deviceMode?.request?.( 'currentMode' ) || null;\n}\n\nfunction deviceModeChangeEvent() {\n\treturn windowEvent( 'elementor/device-mode/change' );\n}\n","import { slice } from './store';\nimport syncStore from './sync/sync-store';\nimport { injectIntoResponsive } from '@elementor/editor-app-bar';\nimport BreakpointsSwitcher from './components/breakpoints-switcher';\nimport { __registerSlice } from '@elementor/store';\n\nexport default function init() {\n\tinitStore();\n\n\tregisterAppBarUI();\n}\n\nfunction initStore() {\n\t__registerSlice( slice );\n\n\tsyncStore();\n}\n\nfunction registerAppBarUI() {\n\tinjectIntoResponsive( {\n\t\tid: 'responsive-breakpoints-switcher',\n\t\tcomponent: BreakpointsSwitcher,\n\t\toptions: {\n\t\t\tpriority: 20, // After document indication.\n\t\t},\n\t} );\n}\n","import * as React from 'react';\nimport { __ } from '@wordpress/i18n';\nimport { BreakpointId } from '../types';\nimport useBreakpoints from '../hooks/use-breakpoints';\nimport { Tab, Tabs, Tooltip as BaseTooltip, TooltipProps } from '@elementor/ui';\nimport {\n\tDesktopIcon,\n\tTabletPortraitIcon,\n\tMobilePortraitIcon,\n\tWidescreenIcon,\n\tLaptopIcon,\n\tTabletLandscapeIcon,\n\tMobileLandscapeIcon,\n} from '@elementor/icons';\nimport useBreakpointsActions from '../hooks/use-breakpoints-actions';\n\nexport default function BreakpointsSwitcher() {\n\tconst { all, active } = useBreakpoints();\n\tconst { activate } = useBreakpointsActions();\n\n\tif ( ! all.length || ! active ) {\n\t\treturn null;\n\t}\n\n\tconst onChange = ( _: unknown, value: BreakpointId ) => activate( value );\n\n\treturn (\n\t\t<Tabs\n\t\t\ttextColor=\"inherit\"\n\t\t\tindicatorColor=\"secondary\"\n\t\t\tvalue={ active.id }\n\t\t\tonChange={ onChange }\n\t\t\taria-label={ __( 'Switch Device', 'elementor' ) }\n\t\t\tsx={ {\n\t\t\t\t'& .MuiTabs-indicator': {\n\t\t\t\t\tbackgroundColor: 'text.primary',\n\t\t\t\t},\n\t\t\t} }\n\t\t>\n\t\t\t{\n\t\t\t\tall.map( ( { id, label, type, width } ) => {\n\t\t\t\t\tconst Icon = iconsMap[ id ];\n\n\t\t\t\t\tconst title = labelsMap[ type || 'default' ]\n\t\t\t\t\t\t.replace( '%s', label )\n\t\t\t\t\t\t.replace( '%d', width?.toString() || '' );\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<Tab value={ id }\n\t\t\t\t\t\t\tkey={ id }\n\t\t\t\t\t\t\taria-label={ title }\n\t\t\t\t\t\t\ticon={ <Tooltip title={ title }><Icon /></Tooltip> }\n\t\t\t\t\t\t\tsx={ { minWidth: 'auto' } }\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t} )\n\t\t\t}\n\t\t</Tabs>\n\n\t);\n}\n\nfunction Tooltip( props: TooltipProps ) {\n\treturn <BaseTooltip\n\t\tPopperProps={ {\n\t\t\tsx: {\n\t\t\t\t'&.MuiTooltip-popper .MuiTooltip-tooltip.MuiTooltip-tooltipPlacementBottom': {\n\t\t\t\t\tmt: 2.5,\n\t\t\t\t},\n\t\t\t},\n\t\t} }\n\t\t{ ...props }\n\t/>;\n}\n\nconst iconsMap = {\n\twidescreen: WidescreenIcon,\n\tdesktop: DesktopIcon,\n\tlaptop: LaptopIcon,\n\ttablet_extra: TabletLandscapeIcon,\n\ttablet: TabletPortraitIcon,\n\tmobile_extra: MobileLandscapeIcon,\n\tmobile: MobilePortraitIcon,\n};\n\nconst labelsMap = {\n\tdefault: '%s',\n\t// translators: %s: Breakpoint label, %d: Breakpoint size.\n\t'min-width': __( '%s (%dpx and up)', 'elementor' ),\n\n\t// translators: %s: Breakpoint label, %d: Breakpoint size.\n\t'max-width': __( '%s (up to %dpx)', 'elementor' ),\n} as const;\n","import { __useSelector as useSelector } from '@elementor/store';\nimport { selectActiveBreakpoint, selectSortedBreakpoints } from '../store/selectors';\n\nexport default function useBreakpoints() {\n\tconst all = useSelector( selectSortedBreakpoints );\n\tconst active = useSelector( selectActiveBreakpoint );\n\n\treturn {\n\t\tall,\n\t\tactive,\n\t};\n}\n","import { slice } from './index';\nimport { Breakpoint } from '../types';\nimport { __createSelector, SliceState } from '@elementor/store';\n\ntype State = SliceState<typeof slice>;\n\nexport const selectEntities = ( state: State ) => state.breakpoints.entities;\nexport const selectActiveId = ( state: State ) => state.breakpoints.activeId;\n\nexport const selectActiveBreakpoint = __createSelector(\n\tselectEntities,\n\tselectActiveId,\n\t( entities, activeId ) => activeId && entities[ activeId ]\n\t\t? entities[ activeId ]\n\t\t: null,\n);\n\nexport const selectSortedBreakpoints = __createSelector(\n\tselectEntities,\n\t( entities ) => {\n\t\tconst byWidth = ( a: Breakpoint, b: Breakpoint ) => {\n\t\t\treturn ( a.width && b.width ) ? b.width - a.width : 0;\n\t\t};\n\n\t\tconst all = Object.values( entities );\n\n\t\tconst defaults = all.filter( ( breakpoint ) => ! breakpoint.width ); // AKA Desktop.\n\t\tconst minWidth = all.filter( ( breakpoint ) => breakpoint.type === 'min-width' );\n\t\tconst maxWidth = all.filter( ( breakpoint ) => breakpoint.type === 'max-width' );\n\n\t\t// Sort by size, big to small.\n\t\treturn [\n\t\t\t...minWidth.sort( byWidth ),\n\t\t\t...defaults,\n\t\t\t...maxWidth.sort( byWidth ),\n\t\t];\n\t},\n);\n","import { useCallback } from 'react';\nimport { BreakpointId } from '../types';\nimport { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';\n\nexport default function useBreakpointsActions() {\n\tconst activate = useCallback( ( device: BreakpointId ) => {\n\t\treturn runCommand( 'panel/change-device-mode', { device } );\n\t}, [] );\n\n\treturn {\n\t\tactivate,\n\t};\n}\n","import init from './init';\n\ninit();\n"],"mappings":"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","names":["init","__","__"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elementor/editor-responsive",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.8.1",
|
|
4
4
|
"private": false,
|
|
5
5
|
"author": "Elementor Team",
|
|
6
6
|
"homepage": "https://elementor.com/",
|
|
@@ -32,8 +32,8 @@
|
|
|
32
32
|
"dev": "tsup --config=../../tsup.dev.ts"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@elementor/editor-app-bar": "^0.
|
|
36
|
-
"@elementor/editor-v1-adapters": "^0.
|
|
35
|
+
"@elementor/editor-app-bar": "^0.9.1",
|
|
36
|
+
"@elementor/editor-v1-adapters": "^0.6.0",
|
|
37
37
|
"@elementor/icons": "^0.7.0",
|
|
38
38
|
"@elementor/store": "^0.7.0",
|
|
39
39
|
"@elementor/ui": "^1.4.53",
|
|
@@ -45,5 +45,5 @@
|
|
|
45
45
|
"elementor": {
|
|
46
46
|
"type": "extension"
|
|
47
47
|
},
|
|
48
|
-
"gitHead": "
|
|
48
|
+
"gitHead": "c73d2e5d2e1ecb93d29fc4f1a72171b80ce90033"
|
|
49
49
|
}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { runCommand } from '@elementor/editor-v1-adapters';
|
|
1
|
+
import { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';
|
|
2
2
|
import { renderHook } from '@testing-library/react';
|
|
3
3
|
import useBreakpointsActions from '../use-breakpoints-actions';
|
|
4
4
|
|
|
5
5
|
jest.mock( '@elementor/editor-v1-adapters', () => ( {
|
|
6
|
-
|
|
6
|
+
__privateRunCommand: jest.fn(),
|
|
7
7
|
} ) );
|
|
8
8
|
|
|
9
9
|
describe( '@elementor/editor-responsive - useBreakpointsActions', () => {
|
|
@@ -6,7 +6,7 @@ import { renderHook } from '@testing-library/react';
|
|
|
6
6
|
import { __createStore, __dispatch, __registerSlice, SliceState, Store, __StoreProvider as StoreProvider } from '@elementor/store';
|
|
7
7
|
|
|
8
8
|
jest.mock( '@elementor/editor-v1-adapters', () => ( {
|
|
9
|
-
|
|
9
|
+
__privateRunCommand: jest.fn(),
|
|
10
10
|
} ) );
|
|
11
11
|
|
|
12
12
|
describe( '@elementor/editor-responsive - useBreakpoints', () => {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { useCallback } from 'react';
|
|
2
2
|
import { BreakpointId } from '../types';
|
|
3
|
-
import { runCommand } from '@elementor/editor-v1-adapters';
|
|
3
|
+
import { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';
|
|
4
4
|
|
|
5
5
|
export default function useBreakpointsActions() {
|
|
6
6
|
const activate = useCallback( ( device: BreakpointId ) => {
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { __useSelector } from '@elementor/store';
|
|
1
|
+
import { __useSelector as useSelector } from '@elementor/store';
|
|
2
2
|
import { selectActiveBreakpoint, selectSortedBreakpoints } from '../store/selectors';
|
|
3
3
|
|
|
4
4
|
export default function useBreakpoints() {
|
|
5
|
-
const all =
|
|
6
|
-
const active =
|
|
5
|
+
const all = useSelector( selectSortedBreakpoints );
|
|
6
|
+
const active = useSelector( selectActiveBreakpoint );
|
|
7
7
|
|
|
8
8
|
return {
|
|
9
9
|
all,
|
package/src/sync/sync-store.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { slice } from '../store';
|
|
2
2
|
import { __dispatch } from '@elementor/store';
|
|
3
3
|
import { Breakpoint, ExtendedWindow } from '../types';
|
|
4
|
-
import { listenTo, v1ReadyEvent, windowEvent } from '@elementor/editor-v1-adapters';
|
|
4
|
+
import { __privateListenTo as listenTo, v1ReadyEvent, windowEvent } from '@elementor/editor-v1-adapters';
|
|
5
5
|
import { __ } from '@wordpress/i18n';
|
|
6
6
|
|
|
7
7
|
export default function syncStore() {
|