@elementor/editor-app-bar 0.7.3 → 0.8.0
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 +16 -0
- package/dist/index.js +122 -37
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +130 -45
- package/dist/index.mjs.map +1 -1
- package/package.json +5 -5
- package/src/components/__tests__/top-bar.test.tsx +2 -0
- package/src/components/app-bar.tsx +1 -1
- package/src/components/ui/popover-menu-item.tsx +5 -0
- package/src/components/ui/popover-menu.tsx +1 -1
- package/src/components/ui/toolbar-logo.tsx +10 -6
- package/src/components/ui/toolbar-menu-item.tsx +27 -2
- package/src/components/ui/toolbar-menu-toggle-item.tsx +15 -1
- package/src/components/ui/toolbar-menu.tsx +1 -1
- package/src/extensions/documents-indicator/components/__tests__/settings-button.test.tsx +10 -4
- package/src/extensions/documents-indicator/components/settings-button.tsx +24 -5
- package/src/extensions/documents-preview/hooks/__tests__/use-document-preview-props.test.ts +4 -4
- package/src/extensions/documents-preview/hooks/use-action-props.ts +2 -2
- package/src/extensions/documents-save/components/__tests__/primary-action-menu.test.tsx +1 -3
- package/src/extensions/documents-save/components/__tests__/primary-action.test.tsx +14 -15
- package/src/extensions/documents-save/components/primary-action-menu.tsx +2 -2
- package/src/extensions/documents-save/components/primary-action.tsx +10 -9
- package/src/extensions/documents-save/hooks/__tests__/use-document-save-draft-props.test.ts +6 -6
- package/src/extensions/documents-save/hooks/__tests__/use-document-save-template-props.test.ts +3 -3
- package/src/extensions/documents-save/hooks/use-document-save-draft-props.ts +3 -3
- package/src/extensions/documents-save/hooks/use-document-save-template-props.ts +2 -2
- package/src/extensions/finder/hooks/__tests__/use-action-props.test.ts +0 -1
- package/src/extensions/finder/hooks/use-action-props.ts +1 -2
- package/src/extensions/finder/index.ts +1 -1
- package/src/extensions/site-settings/components/__tests__/portalled-primary-action.test.tsx +10 -6
- package/src/extensions/site-settings/components/__tests__/primary-action.test.tsx +10 -10
- package/src/extensions/site-settings/components/primary-action.tsx +3 -3
- package/src/extensions/wordpress/index.ts +2 -2
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { Box, ToggleButton, Tooltip } from '@elementor/ui';
|
|
2
|
+
import { Box, ToggleButton, Tooltip as BaseTooltip, TooltipProps } from '@elementor/ui';
|
|
3
3
|
import { __ } from '@wordpress/i18n';
|
|
4
4
|
import { openRoute, useRouteStatus } from '@elementor/editor-v1-adapters';
|
|
5
5
|
import { SettingsIcon } from '@elementor/icons';
|
|
6
|
-
import {
|
|
6
|
+
import { __useActiveDocument, __useHostDocument } from '@elementor/editor-documents';
|
|
7
7
|
|
|
8
8
|
export default function SettingsButton() {
|
|
9
|
-
const activeDocument =
|
|
10
|
-
const hostDocument =
|
|
9
|
+
const activeDocument = __useActiveDocument();
|
|
10
|
+
const hostDocument = __useHostDocument();
|
|
11
11
|
|
|
12
12
|
const document = activeDocument && activeDocument.type.value !== 'kit'
|
|
13
13
|
? activeDocument
|
|
@@ -34,10 +34,29 @@ export default function SettingsButton() {
|
|
|
34
34
|
onChange={ () => openRoute( 'panel/page-settings/settings' ) }
|
|
35
35
|
aria-label={ title }
|
|
36
36
|
size="small"
|
|
37
|
+
sx={ {
|
|
38
|
+
border: 0, // Temp fix until the style of the ToggleButton component will be decided.
|
|
39
|
+
'&.Mui-disabled': {
|
|
40
|
+
border: 0, // Temp fix until the style of the ToggleButton component will be decided.
|
|
41
|
+
},
|
|
42
|
+
} }
|
|
37
43
|
>
|
|
38
|
-
<SettingsIcon />
|
|
44
|
+
<SettingsIcon fontSize="small" />
|
|
39
45
|
</ToggleButton>
|
|
40
46
|
</Box>
|
|
41
47
|
</Tooltip>
|
|
42
48
|
);
|
|
43
49
|
}
|
|
50
|
+
|
|
51
|
+
function Tooltip( props: TooltipProps ) {
|
|
52
|
+
return <BaseTooltip
|
|
53
|
+
PopperProps={ {
|
|
54
|
+
sx: {
|
|
55
|
+
'&.MuiTooltip-popper .MuiTooltip-tooltip.MuiTooltip-tooltipPlacementBottom': {
|
|
56
|
+
mt: 1.7,
|
|
57
|
+
},
|
|
58
|
+
},
|
|
59
|
+
} }
|
|
60
|
+
{ ...props }
|
|
61
|
+
/>;
|
|
62
|
+
}
|
|
@@ -2,10 +2,10 @@ import { renderHook } from '@testing-library/react';
|
|
|
2
2
|
import useActionProps from '../use-action-props';
|
|
3
3
|
import { runCommand } from '@elementor/editor-v1-adapters';
|
|
4
4
|
import { createMockDocument } from 'test-utils';
|
|
5
|
-
import {
|
|
5
|
+
import { __useActiveDocument } from '@elementor/editor-documents';
|
|
6
6
|
|
|
7
7
|
jest.mock( '@elementor/editor-documents', () => ( {
|
|
8
|
-
|
|
8
|
+
__useActiveDocument: jest.fn(),
|
|
9
9
|
} ) );
|
|
10
10
|
|
|
11
11
|
jest.mock( '@elementor/editor-v1-adapters', () => ( {
|
|
@@ -15,7 +15,7 @@ jest.mock( '@elementor/editor-v1-adapters', () => ( {
|
|
|
15
15
|
describe( '@elementor/editor-app-bar - useDocumentPreviewProps', () => {
|
|
16
16
|
it( 'should open the document preview', () => {
|
|
17
17
|
// Arrange.
|
|
18
|
-
jest.mocked(
|
|
18
|
+
jest.mocked( __useActiveDocument ).mockReturnValue( createMockDocument() );
|
|
19
19
|
|
|
20
20
|
const command = 'editor/documents/preview';
|
|
21
21
|
const args = { id: 1, force: true };
|
|
@@ -31,7 +31,7 @@ describe( '@elementor/editor-app-bar - useDocumentPreviewProps', () => {
|
|
|
31
31
|
|
|
32
32
|
it( 'should not run the command when there is no document', () => {
|
|
33
33
|
// Arrange.
|
|
34
|
-
jest.mocked(
|
|
34
|
+
jest.mocked( __useActiveDocument ).mockReturnValue( null );
|
|
35
35
|
|
|
36
36
|
// Act.
|
|
37
37
|
const { result } = renderHook( () => useActionProps() );
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { __ } from '@wordpress/i18n';
|
|
2
2
|
import { EyeIcon } from '@elementor/icons';
|
|
3
3
|
import { runCommand } from '@elementor/editor-v1-adapters';
|
|
4
|
-
import {
|
|
4
|
+
import { __useActiveDocument } from '@elementor/editor-documents';
|
|
5
5
|
|
|
6
6
|
export default function useActionProps() {
|
|
7
|
-
const document =
|
|
7
|
+
const document = __useActiveDocument();
|
|
8
8
|
|
|
9
9
|
return {
|
|
10
10
|
icon: EyeIcon,
|
|
@@ -3,9 +3,7 @@ import { render, screen } from '@testing-library/react';
|
|
|
3
3
|
import PrimaryActionMenu from '../primary-action-menu';
|
|
4
4
|
import { documentOptionsMenu } from '../../../../locations';
|
|
5
5
|
|
|
6
|
-
jest.mock( '@elementor/editor-documents'
|
|
7
|
-
useActiveDocument: jest.fn(),
|
|
8
|
-
} ) );
|
|
6
|
+
jest.mock( '@elementor/editor-documents' );
|
|
9
7
|
|
|
10
8
|
describe( '@elementor/editor-app-bar - Primary action menu', () => {
|
|
11
9
|
it( 'should render the actions ordered properly (save, default)', () => {
|
|
@@ -2,12 +2,12 @@ import * as React from 'react';
|
|
|
2
2
|
import PrimaryAction from '../primary-action';
|
|
3
3
|
import { fireEvent, render, screen } from '@testing-library/react';
|
|
4
4
|
import { createMockDocument } from 'test-utils';
|
|
5
|
-
import {
|
|
5
|
+
import { __useActiveDocument, __useActiveDocumentActions } from '@elementor/editor-documents';
|
|
6
6
|
import { useIsPreviewMode } from '@elementor/editor-v1-adapters';
|
|
7
7
|
|
|
8
8
|
jest.mock( '@elementor/editor-documents', () => ( {
|
|
9
|
-
|
|
10
|
-
|
|
9
|
+
__useActiveDocument: jest.fn(),
|
|
10
|
+
__useActiveDocumentActions: jest.fn(),
|
|
11
11
|
} ) );
|
|
12
12
|
|
|
13
13
|
jest.mock( '@elementor/editor-v1-adapters', () => ( {
|
|
@@ -20,10 +20,9 @@ const actionsMock = {
|
|
|
20
20
|
saveTemplate: jest.fn(),
|
|
21
21
|
};
|
|
22
22
|
|
|
23
|
-
jest.mocked( useActiveDocumentActions ).mockReturnValue( actionsMock );
|
|
24
|
-
|
|
25
23
|
describe( '@elementor/editor-app-bar - Top Bar Primary Action', () => {
|
|
26
24
|
beforeEach( () => {
|
|
25
|
+
jest.mocked( __useActiveDocumentActions ).mockReturnValue( actionsMock );
|
|
27
26
|
jest.mocked( useIsPreviewMode ).mockReturnValue( false );
|
|
28
27
|
} );
|
|
29
28
|
|
|
@@ -33,7 +32,7 @@ describe( '@elementor/editor-app-bar - Top Bar Primary Action', () => {
|
|
|
33
32
|
|
|
34
33
|
it( 'should not render when there is no active document', () => {
|
|
35
34
|
// Arrange.
|
|
36
|
-
jest.mocked(
|
|
35
|
+
jest.mocked( __useActiveDocument ).mockReturnValue( null );
|
|
37
36
|
|
|
38
37
|
// Act.
|
|
39
38
|
const { container } = render( <PrimaryAction /> );
|
|
@@ -50,7 +49,7 @@ describe( '@elementor/editor-app-bar - Top Bar Primary Action', () => {
|
|
|
50
49
|
},
|
|
51
50
|
} );
|
|
52
51
|
|
|
53
|
-
jest.mocked(
|
|
52
|
+
jest.mocked( __useActiveDocument ).mockReturnValue( mockDocument );
|
|
54
53
|
|
|
55
54
|
// Act.
|
|
56
55
|
render( <PrimaryAction /> );
|
|
@@ -67,7 +66,7 @@ describe( '@elementor/editor-app-bar - Top Bar Primary Action', () => {
|
|
|
67
66
|
},
|
|
68
67
|
} );
|
|
69
68
|
|
|
70
|
-
jest.mocked(
|
|
69
|
+
jest.mocked( __useActiveDocument ).mockReturnValue( mockDocument );
|
|
71
70
|
|
|
72
71
|
// Act.
|
|
73
72
|
render( <PrimaryAction /> );
|
|
@@ -86,7 +85,7 @@ describe( '@elementor/editor-app-bar - Top Bar Primary Action', () => {
|
|
|
86
85
|
},
|
|
87
86
|
} );
|
|
88
87
|
|
|
89
|
-
jest.mocked(
|
|
88
|
+
jest.mocked( __useActiveDocument ).mockReturnValue( mockDocument );
|
|
90
89
|
|
|
91
90
|
// Act.
|
|
92
91
|
render( <PrimaryAction /> );
|
|
@@ -103,7 +102,7 @@ describe( '@elementor/editor-app-bar - Top Bar Primary Action', () => {
|
|
|
103
102
|
// Arrange.
|
|
104
103
|
const mockDocument = createMockDocument();
|
|
105
104
|
|
|
106
|
-
jest.mocked(
|
|
105
|
+
jest.mocked( __useActiveDocument ).mockReturnValue( mockDocument );
|
|
107
106
|
jest.mocked( useIsPreviewMode ).mockReturnValue( true );
|
|
108
107
|
|
|
109
108
|
// Act.
|
|
@@ -121,7 +120,7 @@ describe( '@elementor/editor-app-bar - Top Bar Primary Action', () => {
|
|
|
121
120
|
// Arrange.
|
|
122
121
|
const mockDocument = createMockDocument( { isDirty: false } );
|
|
123
122
|
|
|
124
|
-
jest.mocked(
|
|
123
|
+
jest.mocked( __useActiveDocument ).mockReturnValue( mockDocument );
|
|
125
124
|
|
|
126
125
|
// Act.
|
|
127
126
|
render( <PrimaryAction /> );
|
|
@@ -144,7 +143,7 @@ describe( '@elementor/editor-app-bar - Top Bar Primary Action', () => {
|
|
|
144
143
|
},
|
|
145
144
|
} );
|
|
146
145
|
|
|
147
|
-
jest.mocked(
|
|
146
|
+
jest.mocked( __useActiveDocument ).mockReturnValue( mockDocument );
|
|
148
147
|
|
|
149
148
|
// Act.
|
|
150
149
|
render( <PrimaryAction /> );
|
|
@@ -161,7 +160,7 @@ describe( '@elementor/editor-app-bar - Top Bar Primary Action', () => {
|
|
|
161
160
|
// Arrange.
|
|
162
161
|
const mockDocument = createMockDocument( { isDirty: true } );
|
|
163
162
|
|
|
164
|
-
jest.mocked(
|
|
163
|
+
jest.mocked( __useActiveDocument ).mockReturnValue( mockDocument );
|
|
165
164
|
|
|
166
165
|
// Act.
|
|
167
166
|
render( <PrimaryAction /> );
|
|
@@ -179,7 +178,7 @@ describe( '@elementor/editor-app-bar - Top Bar Primary Action', () => {
|
|
|
179
178
|
isSaving: true,
|
|
180
179
|
} );
|
|
181
180
|
|
|
182
|
-
jest.mocked(
|
|
181
|
+
jest.mocked( __useActiveDocument ).mockReturnValue( mockDocument );
|
|
183
182
|
|
|
184
183
|
// Act.
|
|
185
184
|
render( <PrimaryAction /> );
|
|
@@ -205,7 +204,7 @@ describe( '@elementor/editor-app-bar - Top Bar Primary Action', () => {
|
|
|
205
204
|
isSaving: true,
|
|
206
205
|
} );
|
|
207
206
|
|
|
208
|
-
jest.mocked(
|
|
207
|
+
jest.mocked( __useActiveDocument ).mockReturnValue( mockDocument );
|
|
209
208
|
|
|
210
209
|
// Act.
|
|
211
210
|
render( <PrimaryAction /> );
|
|
@@ -31,9 +31,9 @@ export default function PrimaryActionMenu( props: PopoverMenuProps ) {
|
|
|
31
31
|
vertical: 'top',
|
|
32
32
|
horizontal: 'right',
|
|
33
33
|
} }
|
|
34
|
-
marginThreshold={
|
|
34
|
+
marginThreshold={ 4 }
|
|
35
35
|
PaperProps={ {
|
|
36
|
-
sx: { mt:
|
|
36
|
+
sx: { mt: 0.5 },
|
|
37
37
|
} }
|
|
38
38
|
>
|
|
39
39
|
{ saveActions.map( ( { MenuItem, id }, index ) => ( [
|
|
@@ -11,13 +11,13 @@ import {
|
|
|
11
11
|
Tooltip,
|
|
12
12
|
usePopupState,
|
|
13
13
|
} from '@elementor/ui';
|
|
14
|
-
import { Document,
|
|
14
|
+
import { Document, __useActiveDocument, __useActiveDocumentActions } from '@elementor/editor-documents';
|
|
15
15
|
import { ChevronDownIcon } from '@elementor/icons';
|
|
16
16
|
import { useIsPreviewMode } from '@elementor/editor-v1-adapters';
|
|
17
17
|
|
|
18
18
|
export default function PrimaryAction() {
|
|
19
|
-
const document =
|
|
20
|
-
const { save } =
|
|
19
|
+
const document = __useActiveDocument();
|
|
20
|
+
const { save } = __useActiveDocumentActions();
|
|
21
21
|
const isPreviewMode = useIsPreviewMode();
|
|
22
22
|
|
|
23
23
|
const popupState = usePopupState( {
|
|
@@ -38,12 +38,12 @@ export default function PrimaryAction() {
|
|
|
38
38
|
|
|
39
39
|
return (
|
|
40
40
|
<>
|
|
41
|
-
<ButtonGroup size="
|
|
41
|
+
<ButtonGroup size="large" variant="contained">
|
|
42
42
|
<Button
|
|
43
43
|
onClick={ () => ! document.isSaving && save() }
|
|
44
44
|
sx={ {
|
|
45
|
-
px: 7,
|
|
46
45
|
height: '100%',
|
|
46
|
+
borderRadius: 0,
|
|
47
47
|
maxWidth: '158px',
|
|
48
48
|
'&.MuiButtonBase-root.MuiButtonGroup-grouped': {
|
|
49
49
|
minWidth: '110px',
|
|
@@ -51,7 +51,7 @@ export default function PrimaryAction() {
|
|
|
51
51
|
} }
|
|
52
52
|
disabled={ isPublishDisabled }
|
|
53
53
|
>
|
|
54
|
-
{ shouldShowSpinner ? <CircularProgress /> : getLabel( document ) }
|
|
54
|
+
{ shouldShowSpinner ? <CircularProgress color="inherit" size="1.5em" /> : getLabel( document ) }
|
|
55
55
|
</Button>
|
|
56
56
|
|
|
57
57
|
<Tooltip
|
|
@@ -59,16 +59,17 @@ export default function PrimaryAction() {
|
|
|
59
59
|
PopperProps={ {
|
|
60
60
|
sx: {
|
|
61
61
|
'&.MuiTooltip-popper .MuiTooltip-tooltip.MuiTooltip-tooltipPlacementBottom': {
|
|
62
|
-
mt:
|
|
63
|
-
mr:
|
|
62
|
+
mt: 1,
|
|
63
|
+
mr: 0.25,
|
|
64
64
|
},
|
|
65
65
|
},
|
|
66
66
|
} }
|
|
67
67
|
>
|
|
68
68
|
<Box component="span" aria-label={ undefined }>
|
|
69
69
|
<Button
|
|
70
|
+
size="small"
|
|
70
71
|
{ ...bindTrigger( popupState ) }
|
|
71
|
-
sx={ { px: 0, height: '100%' } }
|
|
72
|
+
sx={ { px: 0, height: '100%', borderRadius: 0 } }
|
|
72
73
|
disabled={ isSaveOptionsDisabled }
|
|
73
74
|
aria-label={ __( 'Save Options', 'elementor' ) }
|
|
74
75
|
>
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { createMockDocument } from 'test-utils';
|
|
2
2
|
import { renderHook } from '@testing-library/react';
|
|
3
3
|
import useDocumentSaveDraftProps from '../use-document-save-draft-props';
|
|
4
|
-
import {
|
|
4
|
+
import { __useActiveDocument, __useActiveDocumentActions } from '@elementor/editor-documents';
|
|
5
5
|
|
|
6
6
|
jest.mock( '@elementor/editor-documents', () => ( {
|
|
7
|
-
|
|
8
|
-
|
|
7
|
+
__useActiveDocument: jest.fn(),
|
|
8
|
+
__useActiveDocumentActions: jest.fn(),
|
|
9
9
|
} ) );
|
|
10
10
|
|
|
11
11
|
const documentActions = {
|
|
@@ -17,8 +17,8 @@ const documentActions = {
|
|
|
17
17
|
describe( '@elementor/editor-app-bar - useDocumentSaveDraftProps', () => {
|
|
18
18
|
it( 'should save a draft of the current document', () => {
|
|
19
19
|
// Arrange.
|
|
20
|
-
jest.mocked(
|
|
21
|
-
jest.mocked(
|
|
20
|
+
jest.mocked( __useActiveDocumentActions ).mockReturnValue( documentActions );
|
|
21
|
+
jest.mocked( __useActiveDocument ).mockReturnValue( createMockDocument() );
|
|
22
22
|
|
|
23
23
|
// Act.
|
|
24
24
|
const { result } = renderHook( () => useDocumentSaveDraftProps() );
|
|
@@ -53,7 +53,7 @@ describe( '@elementor/editor-app-bar - useDocumentSaveDraftProps', () => {
|
|
|
53
53
|
},
|
|
54
54
|
] )( 'should be disabled when $condition', ( { document } ) => {
|
|
55
55
|
// Arrange.
|
|
56
|
-
jest.mocked(
|
|
56
|
+
jest.mocked( __useActiveDocument ).mockReturnValue( document );
|
|
57
57
|
|
|
58
58
|
// Act.
|
|
59
59
|
const { result } = renderHook( () => useDocumentSaveDraftProps() );
|
package/src/extensions/documents-save/hooks/__tests__/use-document-save-template-props.test.ts
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { renderHook } from '@testing-library/react';
|
|
2
|
-
import {
|
|
2
|
+
import { __useActiveDocumentActions } from '@elementor/editor-documents';
|
|
3
3
|
import useDocumentSaveTemplateProps from '../use-document-save-template-props';
|
|
4
4
|
|
|
5
5
|
jest.mock( '@elementor/editor-documents', () => ( {
|
|
6
|
-
|
|
6
|
+
__useActiveDocumentActions: jest.fn(),
|
|
7
7
|
} ) );
|
|
8
8
|
|
|
9
9
|
const documentActions = {
|
|
@@ -15,7 +15,7 @@ const documentActions = {
|
|
|
15
15
|
describe( '@elementor/editor-app-bar - useDocumentSaveTemplateProps', () => {
|
|
16
16
|
it( 'should open the "save as template" modal', () => {
|
|
17
17
|
// Arrange.
|
|
18
|
-
jest.mocked(
|
|
18
|
+
jest.mocked( __useActiveDocumentActions ).mockReturnValue( documentActions );
|
|
19
19
|
|
|
20
20
|
// Act.
|
|
21
21
|
const { result } = renderHook( () => useDocumentSaveTemplateProps() );
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { __ } from '@wordpress/i18n';
|
|
2
2
|
import { ActionProps } from '../../../types';
|
|
3
3
|
import { FileReportIcon } from '@elementor/icons';
|
|
4
|
-
import {
|
|
4
|
+
import { __useActiveDocument, __useActiveDocumentActions } from '@elementor/editor-documents';
|
|
5
5
|
|
|
6
6
|
export default function useDocumentSaveDraftProps(): ActionProps {
|
|
7
|
-
const document =
|
|
8
|
-
const { saveDraft } =
|
|
7
|
+
const document = __useActiveDocument();
|
|
8
|
+
const { saveDraft } = __useActiveDocumentActions();
|
|
9
9
|
|
|
10
10
|
return {
|
|
11
11
|
icon: FileReportIcon,
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { __ } from '@wordpress/i18n';
|
|
2
2
|
import { ActionProps } from '../../../types';
|
|
3
3
|
import { FolderIcon } from '@elementor/icons';
|
|
4
|
-
import {
|
|
4
|
+
import { __useActiveDocumentActions } from '@elementor/editor-documents';
|
|
5
5
|
|
|
6
6
|
export default function useDocumentSaveTemplateProps(): ActionProps {
|
|
7
|
-
const { saveTemplate } =
|
|
7
|
+
const { saveTemplate } = __useActiveDocumentActions();
|
|
8
8
|
|
|
9
9
|
return {
|
|
10
10
|
icon: FolderIcon,
|
|
@@ -25,7 +25,6 @@ describe( '@elementor/editor-app-bar - useFinderActionProps', () => {
|
|
|
25
25
|
const { result } = renderHook( () => useActionProps() );
|
|
26
26
|
|
|
27
27
|
// Assert.
|
|
28
|
-
expect( result.current.selected ).toBe( true );
|
|
29
28
|
expect( result.current.disabled ).toBe( true );
|
|
30
29
|
expect( useRouteStatus ).toHaveBeenCalledTimes( 1 );
|
|
31
30
|
expect( useRouteStatus ).toHaveBeenCalledWith( 'finder', {
|
|
@@ -3,7 +3,7 @@ import { SearchIcon } from '@elementor/icons';
|
|
|
3
3
|
import { runCommand, useRouteStatus } from '@elementor/editor-v1-adapters';
|
|
4
4
|
|
|
5
5
|
export default function useActionProps() {
|
|
6
|
-
const {
|
|
6
|
+
const { isBlocked } = useRouteStatus( 'finder', {
|
|
7
7
|
blockOnKitRoutes: false,
|
|
8
8
|
blockOnPreviewMode: false,
|
|
9
9
|
} );
|
|
@@ -12,7 +12,6 @@ export default function useActionProps() {
|
|
|
12
12
|
title: __( 'Finder', 'elementor' ),
|
|
13
13
|
icon: SearchIcon,
|
|
14
14
|
onClick: () => runCommand( 'finder/toggle' ),
|
|
15
|
-
selected: isActive,
|
|
16
15
|
disabled: isBlocked,
|
|
17
16
|
};
|
|
18
17
|
}
|
|
@@ -2,7 +2,7 @@ import { utilitiesMenu } from '../../locations';
|
|
|
2
2
|
import useActionProps from './hooks/use-action-props';
|
|
3
3
|
|
|
4
4
|
export function init() {
|
|
5
|
-
utilitiesMenu.
|
|
5
|
+
utilitiesMenu.registerAction( {
|
|
6
6
|
id: 'toggle-finder',
|
|
7
7
|
priority: 10, // Before help.
|
|
8
8
|
useProps: useActionProps,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { act, render, screen } from '@testing-library/react';
|
|
3
3
|
import { isRouteActive } from '@elementor/editor-v1-adapters';
|
|
4
|
-
import {
|
|
4
|
+
import { __useActiveDocument, __useActiveDocumentActions } from '@elementor/editor-documents';
|
|
5
5
|
import PortalledPrimaryAction from '../portalled-primary-action';
|
|
6
6
|
import { createMockDocument } from 'test-utils';
|
|
7
7
|
|
|
@@ -11,15 +11,19 @@ jest.mock( '@elementor/editor-v1-adapters', () => ( {
|
|
|
11
11
|
} ) );
|
|
12
12
|
|
|
13
13
|
jest.mock( '@elementor/editor-documents', () => ( {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
save: jest.fn(),
|
|
17
|
-
} ) ),
|
|
14
|
+
__useActiveDocument: jest.fn(),
|
|
15
|
+
__useActiveDocumentActions: jest.fn(),
|
|
18
16
|
} ) );
|
|
19
17
|
|
|
20
18
|
describe( '@elementor/editor-app-bar - Portalled primary action', () => {
|
|
21
19
|
beforeEach( () => {
|
|
22
|
-
jest.mocked(
|
|
20
|
+
jest.mocked( __useActiveDocument ).mockReturnValue( createMockDocument() );
|
|
21
|
+
|
|
22
|
+
jest.mocked( __useActiveDocumentActions ).mockReturnValue( {
|
|
23
|
+
save: jest.fn(),
|
|
24
|
+
saveDraft: jest.fn(),
|
|
25
|
+
saveTemplate: jest.fn(),
|
|
26
|
+
} );
|
|
23
27
|
} );
|
|
24
28
|
|
|
25
29
|
afterEach( () => {
|
|
@@ -2,11 +2,11 @@ import * as React from 'react';
|
|
|
2
2
|
import { fireEvent, render, screen } from '@testing-library/react';
|
|
3
3
|
import PrimaryAction from '../primary-action';
|
|
4
4
|
import { createMockDocument } from 'test-utils';
|
|
5
|
-
import {
|
|
5
|
+
import { __useActiveDocument, __useActiveDocumentActions } from '@elementor/editor-documents';
|
|
6
6
|
|
|
7
7
|
jest.mock( '@elementor/editor-documents', () => ( {
|
|
8
|
-
|
|
9
|
-
|
|
8
|
+
__useActiveDocument: jest.fn(),
|
|
9
|
+
__useActiveDocumentActions: jest.fn(),
|
|
10
10
|
} ) );
|
|
11
11
|
|
|
12
12
|
describe( '@elementor/editor-app-bar - Primary action', () => {
|
|
@@ -15,17 +15,17 @@ describe( '@elementor/editor-app-bar - Primary action', () => {
|
|
|
15
15
|
beforeEach( () => {
|
|
16
16
|
saveFn = jest.fn( () => Promise.resolve() );
|
|
17
17
|
|
|
18
|
-
jest.mocked(
|
|
19
|
-
jest.mocked(
|
|
18
|
+
jest.mocked( __useActiveDocument ).mockReturnValue( createMockDocument() );
|
|
19
|
+
jest.mocked( __useActiveDocumentActions ).mockReturnValue( {
|
|
20
20
|
save: saveFn,
|
|
21
21
|
saveTemplate: jest.fn(),
|
|
22
22
|
saveDraft: jest.fn(),
|
|
23
|
-
} )
|
|
23
|
+
} );
|
|
24
24
|
} );
|
|
25
25
|
|
|
26
26
|
it( 'should save site settings on click', () => {
|
|
27
27
|
// Arrange.
|
|
28
|
-
jest.mocked(
|
|
28
|
+
jest.mocked( __useActiveDocument ).mockReturnValue( createMockDocument( { isDirty: true } ) );
|
|
29
29
|
|
|
30
30
|
render( <PrimaryAction /> );
|
|
31
31
|
|
|
@@ -51,7 +51,7 @@ describe( '@elementor/editor-app-bar - Primary action', () => {
|
|
|
51
51
|
},
|
|
52
52
|
] )( 'should not save site settings when $title', ( { document } ) => {
|
|
53
53
|
// Arrange.
|
|
54
|
-
jest.mocked(
|
|
54
|
+
jest.mocked( __useActiveDocument ).mockReturnValue( document );
|
|
55
55
|
|
|
56
56
|
render( <PrimaryAction /> );
|
|
57
57
|
|
|
@@ -73,7 +73,7 @@ describe( '@elementor/editor-app-bar - Primary action', () => {
|
|
|
73
73
|
},
|
|
74
74
|
] )( 'should be disabled when $title', ( { document } ) => {
|
|
75
75
|
// Arrange.
|
|
76
|
-
jest.mocked(
|
|
76
|
+
jest.mocked( __useActiveDocument ).mockReturnValue( document );
|
|
77
77
|
|
|
78
78
|
// Act.
|
|
79
79
|
render( <PrimaryAction /> );
|
|
@@ -84,7 +84,7 @@ describe( '@elementor/editor-app-bar - Primary action', () => {
|
|
|
84
84
|
|
|
85
85
|
it( 'should show a loader when saving site settings', () => {
|
|
86
86
|
// Arrange.
|
|
87
|
-
jest.mocked(
|
|
87
|
+
jest.mocked( __useActiveDocument ).mockReturnValue( createMockDocument( {
|
|
88
88
|
isDirty: true,
|
|
89
89
|
isSaving: true,
|
|
90
90
|
} ) );
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { __useActiveDocument, __useActiveDocumentActions } from '@elementor/editor-documents';
|
|
3
3
|
import { Button, CircularProgress, Paper } from '@elementor/ui';
|
|
4
4
|
import { __ } from '@wordpress/i18n';
|
|
5
5
|
|
|
6
6
|
export default function PrimaryAction() {
|
|
7
|
-
const document =
|
|
8
|
-
const { save } =
|
|
7
|
+
const document = __useActiveDocument();
|
|
8
|
+
const { save } = __useActiveDocumentActions();
|
|
9
9
|
|
|
10
10
|
return (
|
|
11
11
|
<Paper sx={ {
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import { mainMenu } from '../../locations';
|
|
2
2
|
import { __ } from '@wordpress/i18n';
|
|
3
3
|
import { WordpressIcon } from '@elementor/icons';
|
|
4
|
-
import {
|
|
4
|
+
import { __useActiveDocument } from '@elementor/editor-documents';
|
|
5
5
|
|
|
6
6
|
export function init() {
|
|
7
7
|
mainMenu.registerLink( {
|
|
8
8
|
id: 'exit-to-wordpress',
|
|
9
9
|
group: 'exits',
|
|
10
10
|
useProps: () => {
|
|
11
|
-
const document =
|
|
11
|
+
const document = __useActiveDocument();
|
|
12
12
|
|
|
13
13
|
return {
|
|
14
14
|
title: __( 'Exit to WordPress', 'elementor' ),
|