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.

Sign up for GitHub

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

Mobile: Links UI using BottomSheet component #13972

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6f9be72
Mobile: Replaced Links UI with bottom-sheet component
etoledom Feb 20, 2019
5b1dae2
Mobile links UI: Removed commented code.
etoledom Feb 20, 2019
822d87c
Mobile: Fix lint issues
etoledom Feb 20, 2019
d65a838
Mobile Links UI: Remove autofocus on Android.
etoledom Feb 20, 2019
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
13 changes: 10 additions & 3 deletions packages/editor/src/components/mobile/bottom-sheet/cell.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
};
}

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

const onCellPress = () => {
if ( isValueEditable ) {
this.setState( { isEditingValue: true } );
startEditing();
} else if ( onPress !== undefined ) {
onPress();
}
Expand All @@ -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 ) {
Expand Down Expand Up @@ -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 }
/>
Expand Down
1 change: 1 addition & 0 deletions packages/editor/src/components/mobile/bottom-sheet/styles.native.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@
border-top-left-radius: 8px;
width: 100%;
max-width: 512;
padding-bottom: 0;
}

.content {
Expand Down
24 changes: 0 additions & 24 deletions packages/format-library/src/link/button.native.js
View file
Open in desktop

This file was deleted.

20 changes: 9 additions & 11 deletions packages/format-library/src/link/index.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
127 changes: 57 additions & 70 deletions packages/format-library/src/link/modal.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,14 @@
* External dependencies
*/
import React from 'react';
import { Switch, Text, TextInput, View } from 'react-native';
import Modal from 'react-native-modal';
import { Switch, Platform } from 'react-native';

/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { Component } from '@wordpress/element';
import { URLInput } from '@wordpress/editor';
import { BottomSheet } from '@wordpress/editor';
import { prependHTTP } from '@wordpress/url';
import {
withSpokenMessages,
Expand All @@ -28,12 +27,11 @@ import {
* Internal dependencies
*/
import { createLinkFormat, isValidHref } from './utils';
import Button from './button';

import styles from './modal.scss';

class ModalLinkUI extends Component {
constructor( props ) {
constructor() {
super( ...arguments );

this.submitLink = this.submitLink.bind( this );
Expand All @@ -43,12 +41,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 } );
}
Expand Down Expand Up @@ -103,71 +113,48 @@ 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 }>
<Text style={ styles.inlineInputLabel }>
{ __( 'URL' ) }
</Text>
<URLInput
style={ styles.inlineInputValue }
value={ this.state.inputValue }
onChange={ this.onChangeInputValue }
/>
</View>
<View style={ styles.separator } />
<View style={ styles.inlineInput }>
<Text style={ styles.inlineInputLabel }>
{ __( 'Link Text' ) }
</Text>
<TextInput
style={ styles.inlineInputValue }
value={ this.state.text }
onChangeText={ this.onChangeText }
/>
</View>
<View style={ styles.separator } />
<View style={ styles.inlineInput }>
<Text style={ styles.inlineInputLabel }>
{ __( 'Open in a new window' ) }
</Text>
<View style={ { ...styles.inlineInputValue, ...styles.inlineInputValueSwitch, alignItems: 'flex-end' } }>
<Switch
value={ this.state.opensInNewWindow }
onValueChange={ this.onChangeOpensInNewWindow }
/>
</View>
</View>
</View>
</Modal>
{ /* eslint-disable jsx-a11y/no-autofocus */
<BottomSheet.Cell
icon={ 'admin-links' }
label={ __( 'URL' ) }
value={ this.state.inputValue }
placeholder={ __( 'Add URL' ) }
autoCapitalize="none"
autoCorrect={ false }
textContentType="URL"
onChangeValue={ this.onChangeInputValue }
autoFocus={ Platform.OS === 'ios' }
/>
/* eslint-enable jsx-a11y/no-autofocus */ }
<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 }
/>
</BottomSheet>
);
}
}
Expand Down
81 changes: 2 additions & 79 deletions packages/format-library/src/link/modal.native.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,80 +1,3 @@

.bottomModal {
justify-content: flex-end;
margin: 0;
.clearLinkButton {
color: $alert-red;
}

.dragIndicator {
background-color: $light-gray-400;
height: 4px;
width: 10%;
top: -12px;
margin: auto;
border-radius: 2px;
}

.separator {
background-color: $light-gray-400;
height: 1px;
width: 95%;
margin: auto;
}

.content {
background-color: $white;
padding: 18px 10px 5px 10px;
justify-content: center;
border-top-right-radius: 8px;
border-top-left-radius: 8px;
}

.head {
flex-direction: row;
width: 100%;
margin-bottom: 5px;
justify-content: space-between;
align-items: center;
align-content: center;
}

.title {
color: $dark-gray-600;
font-size: 18px;
font-weight: 600;
flex: 1;
text-align: center;
}

.buttonText {
font-size: 18px;
padding: 5px;
}

.inlineInput {
flex-direction: row;
width: 100%;
justify-content: space-between;
align-items: center;
margin: 5px 0;
}

.inlineInputLabel {
padding: 10px 10px;
color: $dark-gray-600;
font-size: 14px;
font-weight: bold;
}

.inlineInputValue {
flex-grow: 1;
font-size: 14px;
text-align: right;
align-items: stretch;
align-self: flex-end;
padding: 10px;
}

.inlineInputValueSwitch {
padding: 5px;
}