From c0312ff4577aa3b7cc2210b9f88cbb5a863921a7 Mon Sep 17 00:00:00 2001 From: Tugdual de Kerviler Date: Fri, 27 Sep 2019 12:32:46 +0200 Subject: [PATCH] Merge rnmobile/mobile in as a single commit MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Squashed commit of the following: commit f3085c1eb012d8a125fe683620a2d0a7a6d045a9 Author: Gerardo Pacheco Date: Fri Sep 27 09:55:44 2019 +0200 [RNMobile] Move MediaUploadPorgress to its own component folder (#17392) * Move MediaUploadPorgress to its own component folder (native) * MediaUploadProgress - Fix import to code standards * MediaUploadProgress readme * Mobile - MediaUploadProgress README update commit d8b0d8310c62986a67a5bf75f37169965b5b19ca Author: Sérgio Estêvão Date: Thu Sep 26 11:24:18 2019 +0100 Fix list filter on paste for RN mobile. (#17550) * Fix method for RN mobile. * Use array.From instead of slice. * Remove comment and use Array.from directly * Convert from NodeList spreadable to Array.from * Fix lint errors. * Fix documentation examples to use Array.from * Add empty line. commit df025a6fcd892a12d29a81776f09dc29d6ca8d01 Author: Luke Walczak Date: Thu Sep 26 11:11:53 2019 +0200 Fix lint issue (#17598) commit 1c9b13375539788f9e1d45403ed3382a8a7859d2 Author: Sérgio Estêvão Date: Wed Sep 25 22:30:59 2019 +0100 Add missing heading levels to the UI (H4, H5, H6) (#17533) commit ae6d2ceba43e64b8337df2401d7a70458f930d8b Author: Tugdual de Kerviler Date: Wed Sep 25 13:19:10 2019 +0200 [RNMobile] Refactor Dark Mode HOC (#17552) * [RNMobile] Refactor the Dark Mode HOC to fix naming antipatterns * Fix lint errors * Add .native.js suffix to usePreferredColorScheme * Update usage of theme props renamed to preferredColorScheme * Update usage of theme props renamed to preferredColorScheme commit 69da85e5b89baffd2871bda84358bb7e2fffbe8b Author: Danilo Ercoli Date: Wed Sep 25 11:08:33 2019 +0200 Autosave monitor - Make the mobile editor ping the native at each keystroke, since the deboucing logic is already well defined in the apps. (#17548) commit e99d365a737a6b9d0dfabe86502e0e8c3ccc4d4b Author: Luke Walczak Date: Wed Sep 25 10:29:20 2019 +0200 Add isAppender functionality on mobile (#17195) * Add isAppender functionality on mobile * refactor isAppender conditions * Replace dropZoneUIOnly in favour of showMediaSelectionUI * deprecate dropZoneUIOnly and add disableMediaSelection prop * Update test * Refactor tests and change prop name * Remove redundant empty lines * Refactor conditions inside MediaPlaceholder * Update block-editor CHANGELOG * Update packages/block-editor/CHANGELOG.md Co-Authored-By: Grzegorz (Greg) Ziółkowski commit 648a1b9280a343c4b921781577a9d048db1d7027 Author: Danilo Ercoli Date: Thu Sep 19 09:47:44 2019 -0400 [RNMobile] Add autosave to mobile apps (#17329) * [RNMobile] Fix crash when adding separator * Build: remove global install of latest npm since we want to use the paired node/npm version (#17134) * Build: remove global install of latest npm since we want to use the paired node/npm version * Also update travis to remove --latest-npm flag * [RNMobile] Try dark mode (iOS) (#17067) * Adding dark mode component implemented on list and list block * Adding DarkMode handling to RichText, ToolBar and SafeArea * Mobile: Using DarkMode as HOC * iOS DarkMode: Modified colors on block list and block container * iOS DarkMode: Improved Header Toolbar colors * iOS DarkMode: Removing background from buttons * iOS DarkMode warning and unsupported * iOS DarkMode: MediaPlaceholder * iOS DarkMode: BottomSheets * iOS DarkMode: Inserter * iOS DarkMode: DefaultBlockAppender * iOS DarkMode: PostTite * Update hardcoded colors with variables * iOS DarkMode: Fix bottom-sheet cell value color * iOS DarkMode: More - PageBreak - Add Block Here * iOS DarkMode: Better text color * iOS Darkmode: Code block * iOS DarkMode: HTML View * iOS DarkMode: Improve colors on SafeArea * Fix toolbar not avoiding keyboard regression * Fix native unit tests * Fix gutenberg-mobile unit tests * Adding RNDarkMode mocks * RNMobile: Fix crash when viewing HTML on iOS * [RNMobile] Remove toolbar from html view * [RNMobile] Fix MaxListenersExceededWarning caused by dark-mode event emitter (#17186) * Fix MaxListenersExceededWarning caused by dark-mode event emitter * Checking for setMaxListeners trying to avoid CI error * Adding remove listener to DarkMode HOC * DarkMode: Binding this.onModeChanged to `this` * DarkMode: Adding conditional needed to pass UI Tests on CI * Fix focus title on new posts regression (#17180) * BottomSheet: Setting DashIcon color directly when theme is default (light) (#17193) * Add a preliminary version of the AutosaveMonitor for mobile that calls the "bridge" and asks the native side to save the content * Add autosave mock function for tests * Fix merge conflicts * Fix lint * Re-add autosave on mobile that was removed erroneously during import-merge from rnmobile/master * Remove native variant of AutosaveMonitor and introduces changes at editor store level * Default to false for `isEditedPostAutosaveable` on mobile. There was a typo in the returing value on the previous commit. * Make sure to consider edits to the Title when checking if auto-save is needed * Fix lint commit 264b178ef9bd94d4e0539c1271fb92b5b4490efa Author: etoledom Date: Wed Sep 4 14:03:38 2019 +0200 [RNMobile] DarkMode improvements (#17309) * Remove the need to import `useStyle` and pass the theme prop on every instance that `withStyle` is used * Implement dark-mode refactor on all components * Fix broken native tests * Fix default block appender background color on DarkMode * DarkMode: Make `useStyle` a class function commit fc8c3dabc14455c025594f0692fe1df3038c0987 Author: Luke Walczak Date: Wed Sep 4 14:02:20 2019 +0200 Remove redundant bg color within button appender (#17325) commit 89664ebce2a16230e68efd66609bc3fc67d22b2a Author: Luke Walczak Date: Tue Sep 3 12:18:11 2019 +0200 Support group block on mobile (#17251) * First working version of the MediaText component for native mobile * Fix adding a block to an innerblock list * Disable mediaText on production * MediaText native: improve editor visuals * Move BlockToolbar from BlockList to Layout * Remove BlockEditorProvider from BlockList and add native version of EditorProvider to Editor. Plus support InsertionPoint and BlockListAppender * Update BlockMover for native to hide if locked or if it's the only block * Make the vertical align button work, add more styling options for toolbar buttons * Make sure registerCoreBlocks does not break in production * Copy docblock comment from the web version for registerCoreBlocks * Fix focusing on the media placeholder * Only support adding image for now * Update usage of MediaPlaceholder in MediaContainer * Enable autoScroll for just the out most block list * Fix JS Unit tests * Roll back to IconButton refactor and fix tests * Fix BlockVerticalAlignmentToolbar buttons style on mobile * Fix thing for web and ensure ariaPressed is always passed down * Use AriaPressed directly to style SVG on mobile * Update snapshots * Support group block on mobile * Extend shouldShowInsertionPoint condition to be false when group is selected * Code refactor * Update package-lock commit 14d482bbf2414a521cd2138c369c001f1b529483 Author: Matt Chowning Date: Tue Aug 6 17:04:35 2019 -0400 [RNMobile] Insure tapping at end of post inserts at end Previously, tapping at the end of the post would insert a block immediately after the currently selected block. In addition, this commit is cleaning out a few unusued props in the block-list file. commit 7b12673e59097506bb11c99dc2f844b3adbe7a3e Author: etoledom Date: Fri Aug 30 18:09:31 2019 +0200 Recover border colors (#17269) commit f9fa455452e9c49eb102d7d5d94b275f622bc905 Author: Gerardo Pacheco Date: Fri Aug 30 11:06:27 2019 +0200 [RNMobile] Fix dismiss keyboard button for the post title (#17260) commit 7aa44a28a269ce0b350c5b0513de25670c292397 Author: Luke Walczak Date: Fri Aug 30 11:03:46 2019 +0200 Unify media placeholder and upload props within media-text (#17268) commit 3db95b76b55905c0ed43a81c8ce7695cb52470e3 Author: Drapich Piotr Date: Fri Aug 30 09:05:11 2019 +0200 MediaUpload and MediaPlaceholder unify props (#17145) commit a78f204df645ce86890814796b41498248f70dad Author: Tugdual de Kerviler Date: Thu Aug 29 16:53:06 2019 +0200 Add native support for the MediaText block (#16305) * First working version of the MediaText component for native mobile * Fix adding a block to an innerblock list * Disable mediaText on production * MediaText native: improve editor visuals * Move BlockToolbar from BlockList to Layout * Remove BlockEditorProvider from BlockList and add native version of EditorProvider to Editor. Plus support InsertionPoint and BlockListAppender * Update BlockMover for native to hide if locked or if it's the only block * Make the vertical align button work, add more styling options for toolbar buttons * Make sure registerCoreBlocks does not break in production * Copy docblock comment from the web version for registerCoreBlocks * Fix focusing on the media placeholder * Only support adding image for now * Update usage of MediaPlaceholder in MediaContainer * Enable autoScroll for just the out most block list * Fix JS Unit tests * Roll back to IconButton refactor and fix tests * Fix BlockVerticalAlignmentToolbar buttons style on mobile * Fix thing for web and ensure ariaPressed is always passed down * Use AriaPressed directly to style SVG on mobile * Update snapshots commit 643c1b2b3a43e2d977acdfe63b7f3eb14c0c53f1 Author: etoledom Date: Wed Aug 28 12:16:19 2019 +0200 Activate Travis CI on rnmobile/master branch (#17229) commit 635108e9d29b907aeb7aa82a103473ad5601d64c Author: etoledom Date: Wed Aug 28 10:31:39 2019 +0200 [RNMobile] Native mobile release v1.11.0 (#17181) * [RNMobile] Fix crash when adding separator * Build: remove global install of latest npm since we want to use the paired node/npm version (#17134) * Build: remove global install of latest npm since we want to use the paired node/npm version * Also update travis to remove --latest-npm flag * [RNMobile] Try dark mode (iOS) (#17067) * Adding dark mode component implemented on list and list block * Adding DarkMode handling to RichText, ToolBar and SafeArea * Mobile: Using DarkMode as HOC * iOS DarkMode: Modified colors on block list and block container * iOS DarkMode: Improved Header Toolbar colors * iOS DarkMode: Removing background from buttons * iOS DarkMode warning and unsupported * iOS DarkMode: MediaPlaceholder * iOS DarkMode: BottomSheets * iOS DarkMode: Inserter * iOS DarkMode: DefaultBlockAppender * iOS DarkMode: PostTite * Update hardcoded colors with variables * iOS DarkMode: Fix bottom-sheet cell value color * iOS DarkMode: More - PageBreak - Add Block Here * iOS DarkMode: Better text color * iOS Darkmode: Code block * iOS DarkMode: HTML View * iOS DarkMode: Improve colors on SafeArea * Fix toolbar not avoiding keyboard regression * Fix native unit tests * Fix gutenberg-mobile unit tests * Adding RNDarkMode mocks * RNMobile: Fix crash when viewing HTML on iOS * [RNMobile] Remove toolbar from html view * [RNMobile] Fix MaxListenersExceededWarning caused by dark-mode event emitter (#17186) * Fix MaxListenersExceededWarning caused by dark-mode event emitter * Checking for setMaxListeners trying to avoid CI error * Adding remove listener to DarkMode HOC * DarkMode: Binding this.onModeChanged to `this` * DarkMode: Adding conditional needed to pass UI Tests on CI * Fix focus title on new posts regression (#17180) * BottomSheet: Setting DashIcon color directly when theme is default (light) (#17193) --- .../src/components/index.native.js | 1 + .../media-placeholder/styles.native.scss | 4 + .../media-upload-progress/README.md | 140 ++++++++++++++++++ .../image-size.native.js | 10 +- .../media-upload-progress/index.native.js} | 0 .../media-upload-progress/styles.native.scss | 4 + .../test/index.native.js} | 2 +- .../block-library/src/image/edit.native.js | 2 +- .../src/image/styles.native.scss | 5 - .../block-library/src/video/edit.native.js | 2 +- 10 files changed, 161 insertions(+), 9 deletions(-) create mode 100644 packages/block-editor/src/components/media-upload-progress/README.md rename packages/{block-library/src/image => block-editor/src/components/media-upload-progress}/image-size.native.js (83%) rename packages/{block-library/src/image/media-upload-progress.native.js => block-editor/src/components/media-upload-progress/index.native.js} (100%) create mode 100644 packages/block-editor/src/components/media-upload-progress/styles.native.scss rename packages/{block-library/src/image/test/media-upload-progress.native.js => block-editor/src/components/media-upload-progress/test/index.native.js} (99%) diff --git a/packages/block-editor/src/components/index.native.js b/packages/block-editor/src/components/index.native.js index 7c6906da0066a7..b45904361595db 100644 --- a/packages/block-editor/src/components/index.native.js +++ b/packages/block-editor/src/components/index.native.js @@ -18,6 +18,7 @@ export { } from './rich-text'; export { default as MediaPlaceholder } from './media-placeholder'; export { default as MediaUpload, MEDIA_TYPE_IMAGE, MEDIA_TYPE_VIDEO } from './media-upload'; +export { default as MediaUploadProgress } from './media-upload-progress'; export { default as URLInput } from './url-input'; export { default as BlockInvalidWarning } from './block-list/block-invalid-warning'; export { default as Caption } from './caption'; diff --git a/packages/block-editor/src/components/media-placeholder/styles.native.scss b/packages/block-editor/src/components/media-placeholder/styles.native.scss index a0b7445debf66b..bebceb30f15cf7 100644 --- a/packages/block-editor/src/components/media-placeholder/styles.native.scss +++ b/packages/block-editor/src/components/media-placeholder/styles.native.scss @@ -23,6 +23,10 @@ background-color: $background-dark-secondary; } +.emptyStateContainerDark { + background-color: $background-dark-secondary; +} + .emptyStateTitle { text-align: center; margin-top: 8; diff --git a/packages/block-editor/src/components/media-upload-progress/README.md b/packages/block-editor/src/components/media-upload-progress/README.md new file mode 100644 index 00000000000000..89ef9243717774 --- /dev/null +++ b/packages/block-editor/src/components/media-upload-progress/README.md @@ -0,0 +1,140 @@ +MediaUploadProgress +=================== + +`MediaUploadProgress` shows a progress bar while a media file associated with a block is being uploaded. + +## Usage + +Usage example + +```jsx +import { ImageBackground, Text, View } from 'react-native'; +import { + MediaUploadProgress, +} from '@wordpress/block-editor'; + +function MediaProgress( { height, width, url, id } ) { + return ( + { + return ( + + { isUploadFailed && + + { retryMessage } + + } + + ); + } } + /> + ); +} +``` + +## Props + +### mediaId + +A media ID that identifies the current upload. + +- Type: `Number` +- Required: Yes +- Platform: Mobile + +### coverUrl + +By passing an image url, it'll calculate the right size depending on the container of the component maintaining its aspect ratio, it'll pass these values through `renderContent`. + +- Type: `String` +- Required: No +- Platform: Mobile + +### renderContent + +Content to be rendered along with the progress bar, usually the thumbnail of the media being uploaded. + +- Type: `React components` +- Required: Yes +- Platform: Mobile + +It passes an object containing the following properties: + +**With** `coverUrl` as a parameter: + +`{ isUploadInProgress, isUploadFailed, finalWidth, finalHeight, imageWidthWithinContainer, retryMessage }` + +**Without** `coverUrl` as a parameter: + +`{ isUploadInProgress, isUploadFailed, retryMessage }` + + +### width + +Forces the final width to be returned in `finalWidth` + +- Type: `Number` +- Required: No +- Platform: Mobile + +### height + +Forces the final height to be returned in `finalHeight` + +- Type: `Number` +- Required: No +- Platform: Mobile + +### onUpdateMediaProgress + +Callback called when the progress of the upload is updated. + +- Type: `Function` +- Required: No +- Platform: Mobile + +The argument of the callback is an object containing the following properties: + +`{ mediaId, mediaUrl, progress, state }` + +### onFinishMediaUploadWithSuccess + +Callback called when the media file has been uploaded successfully. + +- Type: `Function` +- Required: No +- Platform: Mobile + +The argument of the callback is an object containing the following properties: + +`{ mediaId, mediaServerId, mediaUrl, progress, state }` + +### onFinishMediaUploadWithFailure + +Callback called when the media file couldn't be uploaded. + +- Type: `Function` +- Required: No +- Platform: Mobile + +The argument of the callback is an object containing the following properties: + +`{ mediaId, progress, state }` + + +### onMediaUploadStateReset + +Callback called when the media upload is reset + +- Type: `Function` +- Required: No +- Platform: Mobile + diff --git a/packages/block-library/src/image/image-size.native.js b/packages/block-editor/src/components/media-upload-progress/image-size.native.js similarity index 83% rename from packages/block-library/src/image/image-size.native.js rename to packages/block-editor/src/components/media-upload-progress/image-size.native.js index a337a5d14548c7..ade5984c1cadab 100644 --- a/packages/block-library/src/image/image-size.native.js +++ b/packages/block-editor/src/components/media-upload-progress/image-size.native.js @@ -11,7 +11,15 @@ import { View, Image } from 'react-native'; /** * Internal dependencies */ -import { calculatePreferedImageSize } from './utils'; + +function calculatePreferedImageSize( image, container ) { + const maxWidth = container.clientWidth; + const exceedMaxWidth = image.width > maxWidth; + const ratio = image.height / image.width; + const width = exceedMaxWidth ? maxWidth : image.width; + const height = exceedMaxWidth ? maxWidth * ratio : image.height; + return { width, height }; +} class ImageSize extends Component { constructor() { diff --git a/packages/block-library/src/image/media-upload-progress.native.js b/packages/block-editor/src/components/media-upload-progress/index.native.js similarity index 100% rename from packages/block-library/src/image/media-upload-progress.native.js rename to packages/block-editor/src/components/media-upload-progress/index.native.js diff --git a/packages/block-editor/src/components/media-upload-progress/styles.native.scss b/packages/block-editor/src/components/media-upload-progress/styles.native.scss new file mode 100644 index 00000000000000..5dea1caaf5aeff --- /dev/null +++ b/packages/block-editor/src/components/media-upload-progress/styles.native.scss @@ -0,0 +1,4 @@ +.mediaUploadProgress { + flex: 1; + background-color: $gray-lighten-30; +} diff --git a/packages/block-library/src/image/test/media-upload-progress.native.js b/packages/block-editor/src/components/media-upload-progress/test/index.native.js similarity index 99% rename from packages/block-library/src/image/test/media-upload-progress.native.js rename to packages/block-editor/src/components/media-upload-progress/test/index.native.js index 042f571aeefe58..e7c48e80d05df5 100644 --- a/packages/block-library/src/image/test/media-upload-progress.native.js +++ b/packages/block-editor/src/components/media-upload-progress/test/index.native.js @@ -15,7 +15,7 @@ import { MEDIA_UPLOAD_STATE_SUCCEEDED, MEDIA_UPLOAD_STATE_FAILED, MEDIA_UPLOAD_STATE_RESET, -} from '../media-upload-progress'; +} from '../'; jest.mock( 'react-native-gutenberg-bridge', () => { const callUploadCallback = ( payload ) => { diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index db437f11f1703a..1839c19c0a58d2 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -25,6 +25,7 @@ import { Caption, MediaPlaceholder, MediaUpload, + MediaUploadProgress, MEDIA_TYPE_IMAGE, BlockControls, InspectorControls, @@ -38,7 +39,6 @@ import { withPreferredColorScheme } from '@wordpress/compose'; * Internal dependencies */ import styles from './styles.scss'; -import MediaUploadProgress from './media-upload-progress'; import SvgIcon from './icon'; import SvgIconRetry from './icon-retry'; diff --git a/packages/block-library/src/image/styles.native.scss b/packages/block-library/src/image/styles.native.scss index aaafc3ae5457c8..9c5a9cbf5c45e5 100644 --- a/packages/block-library/src/image/styles.native.scss +++ b/packages/block-library/src/image/styles.native.scss @@ -22,11 +22,6 @@ color: $alert-red; } -.mediaUploadProgress { - flex: 1; - background-color: $gray-lighten-30; -} - .modalIcon { width: 80px; height: 80px; diff --git a/packages/block-library/src/video/edit.native.js b/packages/block-library/src/video/edit.native.js index 94dc83b3474426..c69ae7bb39e8e2 100644 --- a/packages/block-library/src/video/edit.native.js +++ b/packages/block-library/src/video/edit.native.js @@ -26,6 +26,7 @@ import { Caption, MediaPlaceholder, MediaUpload, + MediaUploadProgress, MEDIA_TYPE_VIDEO, BlockControls, InspectorControls, @@ -37,7 +38,6 @@ import { doAction, hasAction } from '@wordpress/hooks'; /** * Internal dependencies */ -import MediaUploadProgress from '../image/media-upload-progress'; import style from './style.scss'; import SvgIcon from './icon'; import SvgIconRetry from './icon-retry';