Skip to content

Commit

Permalink
[RNMobile] File block V - Making Download button use RichText (Take 2) (
Browse files Browse the repository at this point in the history 
#27275)

* Download button as RichText

* Update unit tests

* Fix merge errors

* Fix android download button with long text

* Update unit test snapshot
  • Loading branch information
@etoledom
etoledom authored Nov 26, 2020
1 parent 2ff98db commit c42488d
Show file tree
Hide file tree
Showing 4 changed files with 241 additions and 34 deletions.
91 changes: 87 additions & 4 deletions packages/block-library/src/file/edit.native.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import { View, Clipboard, TouchableWithoutFeedback } from 'react-native';
import { View, Clipboard, TouchableWithoutFeedback, Text } from 'react-native';
import React from 'react';

/**
Expand Down Expand Up @@ -52,6 +52,7 @@ import { getProtocol } from '@wordpress/url';
import styles from './style.scss';

const URL_COPIED_NOTIFICATION_DURATION_MS = 1500;
const MIN_WIDTH = 40;

export class FileEdit extends Component {
constructor( props ) {
Expand All @@ -60,10 +61,13 @@ export class FileEdit extends Component {
this.state = {
isUploadInProgress: false,
isSidebarLinkSettings: false,
placeholderTextWidth: 0,
maxWidth: 0,
};

this.timerRef = null;

this.onLayout = this.onLayout.bind( this );
this.onSelectFile = this.onSelectFile.bind( this );
this.onChangeFileName = this.onChangeFileName.bind( this );
this.onChangeDownloadButtonText = this.onChangeDownloadButtonText.bind(
Expand Down Expand Up @@ -349,8 +353,44 @@ export class FileEdit extends Component {
}
}

onLayout( { nativeEvent } ) {
const { width } = nativeEvent.layout;
const { paddingLeft, paddingRight } = styles.defaultButton;
this.setState( {
maxWidth: width - ( paddingLeft + paddingRight ),
} );
}

// Render `Text` with `placeholderText` styled as a placeholder
// to calculate its width which then is set as a `minWidth`
// This should be fixed on RNAztec level. In the mean time,
// We use the same strategy implemented in Button block
getPlaceholderWidth( placeholderText ) {
const { maxWidth, placeholderTextWidth } = this.state;
return (
<Text
style={ styles.placeholder }
onTextLayout={ ( { nativeEvent } ) => {
const textWidth =
nativeEvent.lines[ 0 ] && nativeEvent.lines[ 0 ].width;
if ( textWidth && textWidth !== placeholderTextWidth ) {
this.setState( {
placeholderTextWidth: Math.min(
textWidth,
maxWidth
),
} );
}
} }
>
{ placeholderText }
</Text>
);
}

getFileComponent( openMediaOptions, getMediaOptions ) {
const { attributes, media, isSelected } = this.props;
const { isButtonFocused, placeholderTextWidth } = this.state;

const {
fileName,
Expand All @@ -360,6 +400,22 @@ export class FileEdit extends Component {
align,
} = attributes;

const minWidth =
isButtonFocused ||
( ! isButtonFocused &&
downloadButtonText &&
downloadButtonText !== '' )
? MIN_WIDTH
: placeholderTextWidth;

const placeholderText =
isButtonFocused ||
( ! isButtonFocused &&
downloadButtonText &&
downloadButtonText !== '' )
? ''
: __( 'Add text…' );

return (
<MediaUploadProgress
mediaId={ id }
Expand Down Expand Up @@ -393,7 +449,8 @@ export class FileEdit extends Component {
onLongPress={ openMediaOptions }
disabled={ ! isSelected }
>
<View>
<View onLayout={ this.onLayout }>
{ this.getPlaceholderWidth( placeholderText ) }
{ isUploadInProgress ||
this.getToolbarEditButton(
openMediaOptions
Expand Down Expand Up @@ -439,10 +496,36 @@ export class FileEdit extends Component {
this.getStyleForAlignment( align ),
] }
>
<PlainText
editable={ ! isUploadFailed }
<RichText
withoutInteractiveFormatting
__unstableMobileNoFocusOnMount
rootTagsToEliminate={ [ 'p' ] }
tagName="p"
textAlign="center"
minWidth={ minWidth }
maxWidth={ this.state.maxWidth }
deleteEnter={ true }
style={ styles.buttonText }
value={ downloadButtonText }
placeholder={ placeholderText }
unstableOnFocus={ () =>
this.setState( {
isButtonFocused: true,
} )
}
onBlur={ () =>
this.setState( {
isButtonFocused: false,
} )
}
selectionColor={
styles.buttonText.color
}
placeholderTextColor={
styles.placeholderTextColor
.color
}
underlineColorAndroid="transparent"
onChange={
this.onChangeDownloadButtonText
}
Expand Down
16 changes: 14 additions & 2 deletions packages/block-library/src/file/style.native.scss
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,17 @@
.defaultButton {
border-radius: $border-width * 4;
padding: $block-spacing * 2;
border-width: $border-width;
margin-top: $grid-unit-20;
background-color: $button-fallback-bg;
}

.buttonText {
background-color: transparent;
color: $white;
font-size: 16;
padding: 0;
font-size: 16px;
padding-left: $grid-unit-20;
padding-right: $grid-unit-20;
}

.disabledButton {
Expand Down Expand Up @@ -50,3 +51,14 @@
padding: 0;
color: $alert-red;
}

.placeholderTextColor {
color: rgba($color: $white, $alpha: 0.43);
}

.placeholder {
font-family: $default-regular-font;
min-height: 22px;
font-size: 16px;
display: none;
}
162 changes: 134 additions & 28 deletions packages/block-library/src/file/test/__snapshots__/edit.native.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,24 @@ exports[`File block renders file error state without crashing 1`] = `
accessible={true}
focusable={true}
onClick={[Function]}
onLayout={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
>
<Text
onTextLayout={[Function]}
style={
Object {
"color": "gray",
}
}
>
</Text>
Modal
<View>
<View>
Expand Down Expand Up @@ -101,21 +112,63 @@ exports[`File block renders file error state without crashing 1`] = `
]
}
>
<TextInput
allowFontScaling={true}
editable={false}
fontFamily="serif"
onChange={[Function]}
rejectResponderTermination={true}
scrollEnabled={false}
style={
Object {
"fontFamily": "serif",
<View>
<RCTAztecView
accessible={true}
activeFormats={Array []}
blockType={
Object {
"tag": "p",
}
}
}
underlineColorAndroid="transparent"
value="Download"
/>
color="white"
deleteEnter={true}
disableEditingMenu={false}
focusable={true}
fontFamily="serif"
isMultiline={false}
maxImagesWidth={200}
minWidth={40}
onBackspace={[Function]}
onBlur={[Function]}
onChange={[Function]}
onClick={[Function]}
onContentSizeChange={[Function]}
onEnter={[Function]}
onFocus={[Function]}
onHTMLContentWithCursor={[Function]}
onKeyDown={[Function]}
onPaste={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onSelectionChange={[Function]}
onStartShouldSetResponder={[Function]}
placeholder=""
placeholderTextColor="white"
selectionColor="white"
style={
Object {
"backgroundColor": undefined,
"color": "white",
"maxWidth": 0,
"minHeight": 0,
}
}
text={
Object {
"eventCount": undefined,
"linkTextColor": undefined,
"selection": null,
"text": "<p >Download</p>",
}
}
textAlign="center"
triggerKeyCodes={Array []}
/>
</View>
</View>
</View>
</View>
Expand All @@ -129,13 +182,24 @@ exports[`File block renders file without crashing 1`] = `
accessible={true}
focusable={true}
onClick={[Function]}
onLayout={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
>
<Text
onTextLayout={[Function]}
style={
Object {
"color": "gray",
}
}
>
</Text>
Modal
<View>
<View>
Expand Down Expand Up @@ -205,21 +269,63 @@ exports[`File block renders file without crashing 1`] = `
]
}
>
<TextInput
allowFontScaling={true}
editable={true}
fontFamily="serif"
onChange={[Function]}
rejectResponderTermination={true}
scrollEnabled={false}
style={
Object {
"fontFamily": "serif",
<View>
<RCTAztecView
accessible={true}
activeFormats={Array []}
blockType={
Object {
"tag": "p",
}
}
}
underlineColorAndroid="transparent"
value="Download"
/>
color="white"
deleteEnter={true}
disableEditingMenu={false}
focusable={true}
fontFamily="serif"
isMultiline={false}
maxImagesWidth={200}
minWidth={40}
onBackspace={[Function]}
onBlur={[Function]}
onChange={[Function]}
onClick={[Function]}
onContentSizeChange={[Function]}
onEnter={[Function]}
onFocus={[Function]}
onHTMLContentWithCursor={[Function]}
onKeyDown={[Function]}
onPaste={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onSelectionChange={[Function]}
onStartShouldSetResponder={[Function]}
placeholder=""
placeholderTextColor="white"
selectionColor="white"
style={
Object {
"backgroundColor": undefined,
"color": "white",
"maxWidth": 0,
"minHeight": 0,
}
}
text={
Object {
"eventCount": undefined,
"linkTextColor": undefined,
"selection": null,
"text": "<p >Download</p>",
}
}
textAlign="center"
triggerKeyCodes={Array []}
/>
</View>
</View>
</View>
</View>
Expand Down
6 changes: 6 additions & 0 deletions test/native/__mocks__/styleMock.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,4 +96,10 @@ module.exports = {
scrollableContent: {
paddingBottom: 20,
},
buttonText: {
color: 'white',
},
placeholderTextColor: {
color: 'white',
},
};

0 comments on commit c42488d

Please sign in to comment.