Merge rnmobile/mobile in as a single commit

Squashed commit of the following: commit f3085c1 Author: Gerardo Pacheco <gerardo.sicart@gmail.com> 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 d8b0d83 Author: Sérgio Estêvão <sergioestevao@gmail.com> 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 df025a6 Author: Luke Walczak <lukasz.walczak.pwr@gmail.com> Date: Thu Sep 26 11:11:53 2019 +0200 Fix lint issue (#17598) commit 1c9b133 Author: Sérgio Estêvão <sergioestevao@gmail.com> Date: Wed Sep 25 22:30:59 2019 +0100 Add missing heading levels to the UI (H4, H5, H6) (#17533) commit ae6d2ce Author: Tugdual de Kerviler <dekervit@gmail.com> 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 69da85e Author: Danilo Ercoli <ercoli@gmail.com> 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 e99d365 Author: Luke Walczak <lukasz.walczak.pwr@gmail.com> 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 <grzegorz@gziolo.pl> commit 648a1b9 Author: Danilo Ercoli <ercoli@gmail.com> 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 264b178 Author: etoledom <etoledom@icloud.com> 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 fc8c3da Author: Luke Walczak <lukasz.walczak.pwr@gmail.com> Date: Wed Sep 4 14:02:20 2019 +0200 Remove redundant bg color within button appender (#17325) commit 89664eb Author: Luke Walczak <lukasz.walczak.pwr@gmail.com> 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 14d482b Author: Matt Chowning <matt.chowning@automattic.com> 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 7b12673 Author: etoledom <etoledom@icloud.com> Date: Fri Aug 30 18:09:31 2019 +0200 Recover border colors (#17269) commit f9fa455 Author: Gerardo Pacheco <gerardo.sicart@gmail.com> Date: Fri Aug 30 11:06:27 2019 +0200 [RNMobile] Fix dismiss keyboard button for the post title (#17260) commit 7aa44a2 Author: Luke Walczak <lukasz.walczak.pwr@gmail.com> Date: Fri Aug 30 11:03:46 2019 +0200 Unify media placeholder and upload props within media-text (#17268) commit 3db95b7 Author: Drapich Piotr <drapich.piotr@gmail.com> Date: Fri Aug 30 09:05:11 2019 +0200 MediaUpload and MediaPlaceholder unify props (#17145) commit a78f204 Author: Tugdual de Kerviler <dekervit@gmail.com> 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 643c1b2 Author: etoledom <etoledom@icloud.com> Date: Wed Aug 28 12:16:19 2019 +0200 Activate Travis CI on rnmobile/master branch (#17229) commit 635108e Author: etoledom <etoledom@icloud.com> 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)
WordPress · Sep 27, 2019 · c0312ff · c0312ff
1 parent ea43258
commit c0312ff
Show file tree

Hide file tree

Showing 10 changed files with 161 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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 (
+		<MediaUploadProgress
+			height={ height }
+			width={ width }
+			coverUrl={ url }
+			mediaId={ id }
+			renderContent={ ( { isUploadFailed, finalWidth, finalHeight, retryMessage } ) => {
+				return (
+					<ImageBackground
+						style={ { width: finalWidth, height: finalHeight } }
+						resizeMethod="scale"
+						source={ { uri: url } }
+					>
+						{ isUploadFailed &&
+							<View>
+								<Text>{ retryMessage }</Text>
+							</View>
+						}
+					</ImageBackground>
+				);
+			} }
+		/>
+	);
+}
+```
+
+## 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/...ck-library/src/image/image-size.native.js → ...edia-upload-progress/image-size.native.js b/...ck-library/src/image/image-size.native.js → ...edia-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/...src/image/media-upload-progress.native.js → ...nts/media-upload-progress/index.native.js b/...src/image/media-upload-progress.native.js → ...nts/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
@@ -0,0 +1,4 @@
+.mediaUploadProgress {
+	flex: 1;
+	background-color: $gray-lighten-30;
+}
diff --git a/...mage/test/media-upload-progress.native.js → ...edia-upload-progress/test/index.native.js b/...mage/test/media-upload-progress.native.js → ...edia-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
@@ -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
@@ -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
@@ -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';