add-library.js
2 years ago
category-list.js
1 year ago
insert-pattern.js
2 years ago
library-cache.js
2 years ago
library-layout.js
1 year ago
library-provider.js
2 years ago
library-selector.js
1 year ago
manage-libraries.js
2 years ago
pattern-details-header.js
1 year ago
pattern-details.js
1 year ago
pattern-list.js
1 year ago
pattern-search.js
2 years ago
pattern.js
1 year ago
selected-patterns.js
1 year ago
pattern-details-header.js
63 lines
| 1 | import { Button, ButtonGroup } from '@wordpress/components'; |
| 2 | import { desktop, mobile, tablet } from '@wordpress/icons'; |
| 3 | import { __ } from '@wordpress/i18n'; |
| 4 | import { useLibrary } from './library-provider'; |
| 5 | import { PatternDetails } from './pattern-details'; |
| 6 | |
| 7 | export function PatternDetailsHeader( { |
| 8 | pattern, |
| 9 | isSelected, |
| 10 | bulkInsertEnabled, |
| 11 | globalStyleData, |
| 12 | closeModal, |
| 13 | readOnly, |
| 14 | } ) { |
| 15 | const { |
| 16 | activePatternId, |
| 17 | previewIframeWidth, |
| 18 | setPreviewIframeWidth, |
| 19 | } = useLibrary(); |
| 20 | |
| 21 | return ( |
| 22 | <PatternDetails |
| 23 | pattern={ pattern } |
| 24 | showPreview={ false } |
| 25 | isSelected={ isSelected } |
| 26 | showTitle={ false } |
| 27 | bulkInsertEnabled={ bulkInsertEnabled } |
| 28 | globalStyleData={ globalStyleData } |
| 29 | closeModal={ closeModal } |
| 30 | readOnly={ readOnly } |
| 31 | > |
| 32 | { !! activePatternId && ( |
| 33 | <ButtonGroup> |
| 34 | <Button |
| 35 | isPressed={ '100%' === previewIframeWidth } |
| 36 | variant={ 'tertiary' } |
| 37 | icon={ desktop } |
| 38 | label={ __( 'Desktop', 'generateblocks' ) } |
| 39 | showTooltip |
| 40 | onClick={ () => setPreviewIframeWidth( '100%' ) } |
| 41 | /> |
| 42 | <Button |
| 43 | isPressed={ '900px' === previewIframeWidth } |
| 44 | variant={ 'tertiary' } |
| 45 | icon={ tablet } |
| 46 | label={ __( 'Tablet', 'generateblocks' ) } |
| 47 | showTooltip |
| 48 | onClick={ () => setPreviewIframeWidth( '900px' ) } |
| 49 | /> |
| 50 | <Button |
| 51 | isPressed={ '400px' === previewIframeWidth } |
| 52 | variant={ 'tertiary' } |
| 53 | icon={ mobile } |
| 54 | label={ __( 'Mobile', 'generateblocks' ) } |
| 55 | showTooltip |
| 56 | onClick={ () => setPreviewIframeWidth( '400px' ) } |
| 57 | /> |
| 58 | </ButtonGroup> |
| 59 | ) } |
| 60 | </PatternDetails> |
| 61 | ); |
| 62 | } |
| 63 |