-
Notifications
You must be signed in to change notification settings - Fork 13
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #74 from studiopress/add/file-field
Add a File field, like for .pdf uploads
- Loading branch information
Showing
16 changed files
with
447 additions
and
83 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,129 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import * as React from 'react'; | ||
|
|
||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { | ||
| MediaUpload, | ||
| MediaUploadCheck, | ||
| } from '@wordpress/block-editor'; | ||
| import { | ||
| BaseControl, | ||
| Button, | ||
| Placeholder, | ||
| DropZone, | ||
| DropZoneProvider, | ||
| FormFileUpload, | ||
| Spinner, | ||
| } from '@wordpress/components'; | ||
| import { __ } from '@wordpress/i18n'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import { useMedia } from '../hooks'; | ||
|
|
||
| const defaultFileId = 0; | ||
|
|
||
| const GcbFileControl = ( props ) => { | ||
| const { field, getValue, instanceId, onChange } = props; | ||
| const fieldValue = getValue( props ); | ||
| const { | ||
| mediaSrc, | ||
| isUploading, | ||
| onSelect, | ||
| removeMedia, | ||
| setIsUploading, | ||
| uploadFiles, | ||
| } = useMedia( fieldValue, onChange ); | ||
| const fileRegex = /[^\/]+\.[^\/]+$/; | ||
|
|
||
| return ( | ||
| <BaseControl className="genesis-custom-blocks-media-controls" label={ field.label } id={ `gcb-file-${ instanceId }` }> | ||
| { !! field.help | ||
| ? <p className="components-base-control__help">{ field.help }</p> | ||
| : null | ||
| } | ||
| { !! mediaSrc | ||
| ? ( | ||
| <> | ||
| { mediaSrc.match( fileRegex ) | ||
| ? <pre>{ mediaSrc.match( fileRegex )[ 0 ] }</pre> | ||
| : null | ||
| } | ||
| <Button | ||
| disabled={ !! isUploading } | ||
| className="gcb-image__remove" | ||
| onClick={ () => { | ||
| onChange( defaultFileId ); | ||
| removeMedia(); | ||
| } } | ||
| > | ||
| { __( 'Remove', 'genesis-custom-blocks' ) } | ||
| </Button> | ||
| </> | ||
| ) : ( | ||
| <Placeholder | ||
| className="gcb-image__placeholder" | ||
| icon="media-default" | ||
| label={ __( 'File', 'genesis-custom-blocks' ) } | ||
| instructions={ __( 'Drag a file, upload a new one or select a file from your library.', 'genesis-custom-blocks' ) } | ||
| > | ||
| <DropZoneProvider> | ||
| <DropZone | ||
| onFilesDrop={ ( files ) => { | ||
| if ( files.length ) { | ||
| setIsUploading( true ); | ||
| uploadFiles( files ); | ||
| } | ||
| } } | ||
| /> | ||
| </DropZoneProvider> | ||
| { isUploading | ||
| ? <Spinner /> | ||
| : ( | ||
| <> | ||
| <FormFileUpload | ||
| disabled={ !! isUploading } | ||
| onChange={ ( event ) => { | ||
| setIsUploading( true ); | ||
| uploadFiles( event.target.files ); | ||
| } } | ||
| accept="*" | ||
| multiple={ false } | ||
| > | ||
| { __( 'Upload', 'genesis-custom-blocks' ) } | ||
| </FormFileUpload> | ||
| <MediaUploadCheck> | ||
| <MediaUpload | ||
| gallery={ false } | ||
| multiple={ false } | ||
| onSelect={ onSelect } | ||
| value={ getValue( props ) } | ||
| render={ ( { open } ) => ( | ||
| <div className="components-media-library-button"> | ||
| <Button | ||
| disabled={ !! isUploading } | ||
| className="editor-media-placeholder__button" | ||
| onClick={ open } | ||
| > | ||
| { __( 'Media Library', 'genesis-custom-blocks' ) } | ||
| </Button> | ||
| </div> | ||
| ) } | ||
| /> | ||
| </MediaUploadCheck> | ||
| </> | ||
| ) | ||
| } | ||
| </Placeholder> | ||
| ) | ||
| } | ||
| </BaseControl> | ||
| ); | ||
| }; | ||
|
|
||
| export default GcbFileControl; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import { render } from '@testing-library/react'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import GcbFileControl from '../file'; | ||
|
|
||
| jest.mock( '@wordpress/api-fetch', () => { | ||
| return jest.fn( () => { | ||
| return Promise.resolve( { | ||
| json: () => Promise.resolve( {} ), | ||
| } ); | ||
| } ); | ||
| } ); | ||
|
|
||
| // @todo: remove this when the console warning no longer appears. | ||
| // Expected mock function not to be called but it was called with: | ||
| // ["wp.components.DropZoneProvider is deprecated. Note: wp.component.DropZone no longer needs a provider. wp.components.DropZoneProvider is safe to remove from your code."] | ||
| // Core still has an older components file, so removing the provider now crashes the editor. | ||
| console.warn = jest.fn(); /* eslint-disable-line no-console */ | ||
|
|
||
| /** | ||
| * Gets the props for the tested component. | ||
| * | ||
| * @return {Object} The props to pass to the component. | ||
| */ | ||
| const getProps = () => ( { | ||
| field: { | ||
| label: 'Here is a label', | ||
| help: 'And here is some text', | ||
| }, | ||
| getValue: jest.fn(), | ||
| onChange: jest.fn(), | ||
| } ); | ||
|
|
||
| test( 'file control', () => { | ||
| const props = getProps(); | ||
| const { getByText } = render( <GcbFileControl { ...props } /> ); | ||
|
|
||
| expect( getByText( props.field.label ) ).toBeInTheDocument(); | ||
| expect( getByText( props.field.help ) ).toBeInTheDocument(); | ||
| } ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1 @@ | ||
| export { default as useImage } from './useImage'; | ||
| export { default as useMedia } from './useMedia'; |
Oops, something went wrong.