-
Notifications
You must be signed in to change notification settings - Fork 4k
/
preview.native.js
82 lines (71 loc) · 2.01 KB
/
preview.native.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
/**
* WordPress dependencies
*/
import { BlockEditorProvider, BlockList } from '@wordpress/block-editor';
import { BottomSheet } from '@wordpress/components';
import { useSelect } from '@wordpress/data';
import { useEffect, useState } from '@wordpress/element';
/**
* External dependencies
*/
import { Dimensions, View, StyleSheet } from 'react-native';
const useScreenDimensions = ( dimension = 'window' ) => {
const [ dimensions, setDimensions ] = useState( Dimensions.get( dimension ) );
useEffect( () => {
const onChange = ( result ) => {
setDimensions( result[ dimension ] );
};
Dimensions.addEventListener( 'change', onChange );
return () => Dimensions.removeEventListener( 'change', onChange );
} );
return dimensions;
};
// We are replicating this here because the one in @wordpress/block-editor always
// tries to scale the preview and we would need a lot of cross platform code to handle
// sizes, when we actually want to show the preview at full width.
//
// We can make it work here first, then figure out the right way to consolidate
// both implementations
const BlockPreview = ( { blocks } ) => {
const currentSettings = useSelect( ( select ) => {
return select( 'core/block-editor' ).getSettings();
} );
const settings = {
...currentSettings,
readOnly: true,
};
const { height: windowHeight } = useScreenDimensions();
const style = StyleSheet.create( {
container: {
height: windowHeight - 150,
},
} );
return (
<BlockEditorProvider
value={ blocks }
settings={ settings }
>
<View style={ style.container }>
<BlockList />
</View>
</BlockEditorProvider>
);
};
BlockPreview.displayName = 'BlockPreview';
const Preview = ( props ) => {
const { template, onDismiss } = props;
if ( template === undefined ) {
return null;
}
return (
<BottomSheet
title={ template.name }
isVisible={ !! template }
onClose={ onDismiss }
>
<BlockPreview blocks={ template.blocks } />
</BottomSheet>
);
};
Preview.displayName = 'TemplatePreview';
export default Preview;