/
rename-menu-item.js
134 lines (121 loc) · 2.91 KB
/
rename-menu-item.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { useState } from '@wordpress/element';
import { useDispatch, useSelect } from '@wordpress/data';
import {
Button,
Flex,
FlexItem,
MenuItem,
Modal,
TextControl,
} from '@wordpress/components';
import { store as coreStore } from '@wordpress/core-data';
import { store as noticesStore } from '@wordpress/notices';
export default function RenameMenuItem( { template, onClose } ) {
const [ title, setTitle ] = useState( () => template.title.rendered );
const [ isModalOpen, setIsModalOpen ] = useState( false );
const { getLastEntitySaveError } = useSelect( coreStore );
const { editEntityRecord, saveEditedEntityRecord } = useDispatch(
coreStore
);
const { createSuccessNotice, createErrorNotice } = useDispatch(
noticesStore
);
if ( ! template.is_custom ) {
return null;
}
async function onTemplateRename( event ) {
event.preventDefault();
try {
await editEntityRecord( 'postType', template.type, template.id, {
title,
} );
// Update state before saving rerenders the list.
setTitle( '' );
setIsModalOpen( false );
onClose();
// Persist edited entity.
await saveEditedEntityRecord(
'postType',
template.type,
template.id
);
const lastError = getLastEntitySaveError(
'postType',
template.type,
template.id
);
if ( lastError ) {
throw lastError;
}
createSuccessNotice( __( 'Template has been renamed.' ), {
type: 'snackbar',
} );
} catch ( error ) {
const errorMessage =
error.message && error.code !== 'unknown_error'
? error.message
: __( 'An error occurred while renaming the template.' );
createErrorNotice( errorMessage, { type: 'snackbar' } );
}
}
return (
<>
<MenuItem
onClick={ () => {
setIsModalOpen( true );
setTitle( template.title.rendered );
} }
>
{ __( 'Rename' ) }
</MenuItem>
{ isModalOpen && (
<Modal
title={ __( 'Rename template' ) }
closeLabel={ __( 'Close' ) }
onRequestClose={ () => {
setIsModalOpen( false );
} }
overlayClassName="edit-site-list__rename-modal"
>
<form onSubmit={ onTemplateRename }>
<Flex align="flex-start" gap={ 8 }>
<FlexItem>
<TextControl
label={ __( 'Name' ) }
value={ title }
onChange={ setTitle }
required
/>
</FlexItem>
</Flex>
<Flex
className="edit-site-list__rename-modal-actions"
justify="flex-end"
expanded={ false }
>
<FlexItem>
<Button
variant="tertiary"
onClick={ () => {
setIsModalOpen( false );
} }
>
{ __( 'Cancel' ) }
</Button>
</FlexItem>
<FlexItem>
<Button variant="primary" type="submit">
{ __( 'Save' ) }
</Button>
</FlexItem>
</Flex>
</form>
</Modal>
) }
</>
);
}