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: Links UI using BottomSheet component #13972

Merged
merged 4 commits into from
Feb 22, 2019
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
Mobile: Replaced Links UI with bottom-sheet component
etoledom committed Feb 20, 2019
commit 6f9be7227a5d9ca5393e8afedfc4a84f8340bb8b
13 changes: 10 additions & 3 deletions packages/editor/src/components/mobile/bottom-sheet/cell.native.js
Original file line number Diff line number Diff line change
@@ -16,10 +16,10 @@ import styles from './styles.scss';
import platformStyles from './cellStyles.scss';

export default class Cell extends Component {
constructor() {
constructor( props ) {
super( ...arguments );
this.state = {
isEditingValue: false,
isEditingValue: props.autoFocus || false,
};
}

@@ -53,7 +53,7 @@ export default class Cell extends Component {

const onCellPress = () => {
if ( isValueEditable ) {
this.setState( { isEditingValue: true } );
startEditing();
} else if ( onPress !== undefined ) {
onPress();
}
@@ -63,6 +63,12 @@ export default class Cell extends Component {
this.setState( { isEditingValue: false } );
};

const startEditing = () => {
if ( this.state.isEditingValue === false ) {
this.setState( { isEditingValue: true } );
}
};

const separatorStyle = () => {
const leftMarginStyle = { ...styles.cellSeparator, ...platformStyles.separatorMarginLeft };
switch ( separatorType ) {
@@ -97,6 +103,7 @@ export default class Cell extends Component {
onChangeText={ onChangeValue }
editable={ isValueEditable }
pointerEvents={ this.state.isEditingValue ? 'auto' : 'none' }
onFocus={ startEditing }
onBlur={ finishEditing }
{ ...valueProps }
/>
Original file line number Diff line number Diff line change
@@ -31,6 +31,7 @@
border-top-left-radius: 8px;
width: 100%;
max-width: 512;
padding-bottom: 0;
}

.content {
20 changes: 9 additions & 11 deletions packages/format-library/src/link/index.native.js
Original file line number Diff line number Diff line change
@@ -107,17 +107,15 @@ export const link = {

return (
<Fragment>
{ this.state.addingLink &&
<ModalLinkUI
isVisible
isActive={ isActive }
activeAttributes={ activeAttributes }
onClose={ this.stopAddingLink }
onChange={ onChange }
onRemove={ this.onRemoveFormat }
value={ linkSelection }
/>
}
<ModalLinkUI
isVisible={ this.state.addingLink }
isActive={ isActive }
activeAttributes={ activeAttributes }
onClose={ this.stopAddingLink }
onChange={ onChange }
onRemove={ this.onRemoveFormat }
value={ linkSelection }
/>
<RichTextToolbarButton
name="link"
icon="admin-links"
98 changes: 59 additions & 39 deletions packages/format-library/src/link/modal.native.js
Original file line number Diff line number Diff line change
@@ -10,7 +10,7 @@ import Modal from 'react-native-modal';
*/
import { __ } from '@wordpress/i18n';
import { Component } from '@wordpress/element';
import { URLInput } from '@wordpress/editor';
import { URLInput, BottomSheet } from '@wordpress/editor';
import { prependHTTP } from '@wordpress/url';
import {
withSpokenMessages,
@@ -43,12 +43,24 @@ class ModalLinkUI extends Component {
this.removeLink = this.removeLink.bind( this );

this.state = {
inputValue: props.activeAttributes.url || '',
text: getTextContent( slice( props.value ) ),
inputValue: '',
text: '',
opensInNewWindow: false,
};
}

componentDidUpdate( oldProps ) {
if ( oldProps === this.props ) {
return;
}

this.setState({
inputValue: this.props.activeAttributes.url || '',
text: getTextContent( slice( this.props.value ) ),
opensInNewWindow: false,
})
}

onChangeInputValue( inputValue ) {
this.setState( { inputValue } );
}
@@ -103,37 +115,46 @@ class ModalLinkUI extends Component {
const { isVisible } = this.props;

return (
<Modal
<BottomSheet
isVisible={ isVisible }
style={ styles.bottomModal }
animationInTiming={ 500 }
animationOutTiming={ 500 }
backdropTransitionInTiming={ 500 }
backdropTransitionOutTiming={ 500 }
onBackdropPress={ this.props.onClose }
onSwipe={ this.props.onClose }
swipeDirection="down"
avoidKeyboard={ true }
onClose={ this.submitLink }
hideHeader
>
<View style={ { ...styles.content, borderColor: 'rgba(0, 0, 0, 0.1)' } }>
<View style={ styles.dragIndicator } />
<View style={ styles.head }>
<Button onClick={ this.removeLink }>
<Text style={ { ...styles.buttonText, color: 'red' } }>
{ __( 'Remove' ) }
</Text>
</Button>
<Text style={ styles.title }>
{ __( 'Link Settings' ) }
</Text>
<Button onClick={ this.submitLink }>
<Text style={ { ...styles.buttonText, color: '#0087be' } } >
{ __( 'Done' ) }
</Text>
</Button>
</View>
<View style={ styles.separator } />
<View style={ styles.inlineInput }>
<BottomSheet.Cell
icon={ 'admin-links' }
label={ __( 'URL' ) }
value={ this.state.inputValue }
placeholder={ __( 'Add URL' ) }
autoCapitalize="none"
autoCorrect={ false }
textContentType="URL"
autoFocus={ true }
onChangeValue={ this.onChangeInputValue }
/>
<BottomSheet.Cell
icon={ 'editor-textcolor' }
label={ __( 'Link Text' ) }
value={ this.state.text }
placeholder={ __( 'Add Link Text' ) }
onChangeValue={ this.onChangeText }
/>
<BottomSheet.Cell
icon={ 'external' }
label={ __( 'Open in New Tab' ) }
value={ '' }
>
<Switch
value={ this.state.opensInNewWindow }
onValueChange={ this.onChangeOpensInNewWindow }
/>
</BottomSheet.Cell>
<BottomSheet.Cell
label={ __( 'Remove Link' ) }
labelStyle={ styles.clearLinkButton }
separatorType={ 'none' }
onPress={ this.removeLink }
/>
{/* <View style={ styles.inlineInput }>
<Text style={ styles.inlineInputLabel }>
{ __( 'URL' ) }
</Text>
@@ -143,8 +164,8 @@ class ModalLinkUI extends Component {
onChange={ this.onChangeInputValue }
/>
</View>
<View style={ styles.separator } />
<View style={ styles.inlineInput }>
<View style={ styles.separator } /> */}
{/* <View style={ styles.inlineInput }>
<Text style={ styles.inlineInputLabel }>
{ __( 'Link Text' ) }
</Text>
@@ -154,8 +175,8 @@ class ModalLinkUI extends Component {
onChangeText={ this.onChangeText }
/>
</View>
<View style={ styles.separator } />
<View style={ styles.inlineInput }>
<View style={ styles.separator } /> */}
{/* <View style={ styles.inlineInput }>
<Text style={ styles.inlineInputLabel }>
{ __( 'Open in a new window' ) }
</Text>
@@ -165,9 +186,8 @@ class ModalLinkUI extends Component {
onValueChange={ this.onChangeOpensInNewWindow }
/>
</View>
</View>
</View>
</Modal>
</View> */}
</BottomSheet>
);
}
}
4 changes: 4 additions & 0 deletions packages/format-library/src/link/modal.native.scss
Original file line number Diff line number Diff line change
@@ -78,3 +78,7 @@
padding: 5px;
}

.clearLinkButton {
color: $alert-red;
}