/
index.js
102 lines (93 loc) · 2.17 KB
/
index.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
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import {
Modal,
privateApis as componentsPrivateApis,
} from '@wordpress/components';
import { useContext } from '@wordpress/element';
/**
* Internal dependencies
*/
import InstalledFonts from './installed-fonts';
import FontCollection from './font-collection';
import UploadFonts from './upload-fonts';
import { FontLibraryContext } from './context';
import { unlock } from '../../../lock-unlock';
const { Tabs } = unlock( componentsPrivateApis );
const DEFAULT_TABS = [
{
id: 'installed-fonts',
title: __( 'Library' ),
},
{
id: 'upload-fonts',
title: __( 'Upload' ),
},
];
const tabsFromCollections = ( collections ) =>
collections.map( ( { slug, name } ) => ( {
id: slug,
title:
collections.length === 1 && slug === 'default-font-collection'
? __( 'Install Fonts' )
: name,
} ) );
function FontLibraryModal( {
onRequestClose,
initialTabId = 'installed-fonts',
} ) {
const { collections, setNotice } = useContext( FontLibraryContext );
const tabs = [
...DEFAULT_TABS,
...tabsFromCollections( collections || [] ),
];
// Reset notice when new tab is selected.
const onSelect = () => {
setNotice( null );
};
return (
<Modal
title={ __( 'Fonts' ) }
onRequestClose={ onRequestClose }
isFullScreen
className="font-library-modal"
>
<div className="font-library-modal__tabs">
<Tabs initialTabId={ initialTabId } onSelect={ onSelect }>
<Tabs.TabList>
{ tabs.map( ( { id, title } ) => (
<Tabs.Tab key={ id } tabId={ id }>
{ title }
</Tabs.Tab>
) ) }
</Tabs.TabList>
{ tabs.map( ( { id } ) => {
let contents;
switch ( id ) {
case 'upload-fonts':
contents = <UploadFonts />;
break;
case 'installed-fonts':
contents = <InstalledFonts />;
break;
default:
contents = <FontCollection slug={ id } />;
}
return (
<Tabs.TabPanel
key={ id }
tabId={ id }
focusable={ false }
>
{ contents }
</Tabs.TabPanel>
);
} ) }
</Tabs>
</div>
</Modal>
);
}
export default FontLibraryModal;