Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Mobile Release v1.41.1 #26977

Merged
merged 10 commits into from
Nov 16, 2020
Merged
1 change: 1 addition & 0 deletions packages/base-styles/_colors.native.scss
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ $gray: #87a6bc;
$gray-light: lighten($gray, 33%); //#f3f6f8
$gray-dark: darken($gray, 38%); //#2e4453
$gray-900: #1a1a1a;
$gray-700: #757575;

// $gray-text: ideal for standard, non placeholder text
// $gray-text-min: minimum contrast needed for WCAG 2.0 AA on white background
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
BlockMediaUpdateProgress
===================

`BlockMediaUpdateProgress` shows a progress bar while the media files associated with a media-containing block are being saved first and uploaded later

## Usage

Usage example

```jsx
import { ImageBackground, Text, View } from 'react-native';
import {
BlockMediaUpdateProgress,
} from '@wordpress/block-editor';

function BlockUpdatingProgress( { url, id } ) {
return (
<BlockMediaUpdateProgress
mediaId={ id }
renderContent={ ( { isSaveFailed, retryMessage } ) => {
return (
<ImageBackground
resizeMethod="scale"
source={ { uri: url } }
>
{ isSaveFailed &&
<View>
<Text>{ retryMessage }</Text>
</View>
}
</ImageBackground>
);
} }
/>
);
}
```

## Props

### mediaFiles

A collection of media ID that identifies the current collection of files represented in this media container block.

- Type: `Array`
- Required: Yes
- 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:

`{ isUploadInProgress, isUploadFailed, isSaveInProgress, isSaveFailed, retryMessage }`

### 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
Loading