Skip to content

Commit

Permalink
Alt image setting (#13631)
Browse files Browse the repository at this point in the history
* rnmobile: Implement image settings button using InspectorControls.Slot pattern.

* rnmobile: Add missing semicolon

* rnmobile: Adding bottom-sheet component to mobile

* rnmobile: Styling bottom-sheet header

* rnmobile: Bottom-sheet clean up

* rnmobile: Fix lint issues on bottom-sheet related code.

* rnmobile: Fix small lint issues

* rnmobile: Move inline toolbar button definition out of constant.

* rnmobile: Remove extra white-spaces

* revert package-lock.json changes

* rnmobile: Fix merge issue

* rnmobile: Imported BaseControl and TextinputControl to be used on Alt Image Settings

* rnmobile: exporting component BottomSheet.Button to be used as bottom-sheet header buttons

* rnmobile: Adding BottomSheet.Cell component as an extraction for BottomSheet users.

* Fix lint issues

* Reverting changes to package-lock.json

* Fix merge issues

* Remove Done button from Image settings bottom sheet

* Make bottom-sheet avoid being behind keyboard

* Fix lint issues

* Making BottomSheet.Cell value editable as textinput.

* Remove unnecesary onPress prop from Alt cell.

* Fix lint issues
  • Loading branch information
etoledom authored and youknowriad committed Mar 6, 2019
1 parent 9381d47 commit 3a2d9f2
Show file tree
Hide file tree
Showing 7 changed files with 94 additions and 22 deletions.
19 changes: 9 additions & 10 deletions packages/block-library/src/image/edit.native.js
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@ export default class ImageEdit extends React.Component {
this.removeMediaUploadListener = this.removeMediaUploadListener.bind( this );
this.finishMediaUploadWithSuccess = this.finishMediaUploadWithSuccess.bind( this );
this.finishMediaUploadWithFailure = this.finishMediaUploadWithFailure.bind( this );
this.updateAlt = this.updateAlt.bind( this );
this.onImagePressed = this.onImagePressed.bind( this );
}

Expand Down Expand Up @@ -128,9 +129,13 @@ export default class ImageEdit extends React.Component {
}
}

updateAlt( newAlt ) {
this.props.setAttributes( { alt: newAlt } );
}

render() {
const { attributes, isSelected, setAttributes } = this.props;
const { url, caption, height, width } = attributes;
const { url, caption, height, width, alt } = attributes;

const onMediaLibraryButtonPressed = () => {
requestMediaPickFromMediaLibrary( ( mediaId, mediaUrl ) => {
Expand Down Expand Up @@ -191,19 +196,13 @@ export default class ImageEdit extends React.Component {
isVisible={ this.state.showSettings }
onClose={ onImageSettingsClose }
hideHeader
rightButton={
<BottomSheet.Button
text={ __( 'Done' ) }
color={ '#0087be' }
onPress={ onImageSettingsClose }
/>
}
>
<BottomSheet.Cell
icon={ 'editor-textcolor' }
label={ __( 'Alt Text' ) }
value={ __( 'None' ) }
onPress={ () => {} }
value={ alt || '' }
valuePlaceholder={ __( 'None' ) }
onChangeValue={ this.updateAlt }
/>
<BottomSheet.Cell
label={ __( 'Reset to original' ) }
Expand Down
17 changes: 17 additions & 0 deletions packages/components/src/base-control/index.native.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
/**
* External dependencies
*/
import { Text, View } from 'react-native';

export default function BaseControl( { label, help, children } ) {
return (
<View
accessible={ true }
accessibilityLabel={ label }
>
{ label && <Text>{ label }</Text> }
{ children }
{ help && <Text>{ help }</Text> }
</View>
);
}
2 changes: 2 additions & 0 deletions packages/components/src/index.native.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ export { default as withSpokenMessages } from './higher-order/with-spoken-messag
export { default as IconButton } from './icon-button';
export { default as Spinner } from './spinner';
export { createSlotFill, Slot, Fill, Provider as SlotFillProvider } from './slot-fill';
export { default as BaseControl } from './base-control';
export { default as TextareaControl } from './textarea-control';

// Higher-Order Components
export { default as withFilters } from './higher-order/with-filters';
Expand Down
26 changes: 26 additions & 0 deletions packages/components/src/textarea-control/index.native.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
/**
* External dependencies
*/
import { TextInput } from 'react-native';

/**
* Internal dependencies
*/
import BaseControl from '../base-control';

function TextareaControl( { label, value, help, onChange, rows = 4 } ) {
return (
<BaseControl label={ label } help={ help } >
<TextInput
style={ { height: 80, borderColor: 'gray', borderWidth: 1 } }
value={ value }
onChangeText={ onChange }
numberOfLines={ rows }
multiline={ rows > 1 }
textAlignVertical="top"
/>
</BaseControl>
);
}

export default TextareaControl;
35 changes: 29 additions & 6 deletions packages/editor/src/components/mobile/bottom-sheet/cell.native.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import { TouchableOpacity, Text, View } from 'react-native';
import { TouchableOpacity, Text, View, TextInput } from 'react-native';

/**
* WordPress dependencies
Expand All @@ -18,16 +18,29 @@ export default function Cell( props ) {
onPress,
label,
value,
valuePlaceholder = '',
drawSeparator = true,
icon,
labelStyle = {},
valueStyle = {},
onChangeValue,
} = props;

const defaultLabelStyle = value ? styles.cellLabel : styles.cellLabelCentered;
const showValue = value !== undefined;
const isValueEditable = onChangeValue !== undefined;
const defaultLabelStyle = showValue ? styles.cellLabel : styles.cellLabelCentered;
let valueTextInput;

const onCellPress = () => {
if ( isValueEditable ) {
valueTextInput.focus();
} else {
onPress();
}
};

return (
<TouchableOpacity onPress={ onPress }>
<TouchableOpacity onPress={ onCellPress }>
<View style={ styles.cellContainer }>
<View style={ styles.cellRowContainer }>
{ icon && (
Expand All @@ -36,10 +49,20 @@ export default function Cell( props ) {
<View style={ { width: 12 } } />
</View>
) }
<Text style={ { ...defaultLabelStyle, ...labelStyle } }>{ label }</Text>
<Text numberOfLines={ 1 } style={ { ...defaultLabelStyle, ...labelStyle } }>
{ label }
</Text>
</View>
{ value && (
<Text style={ { ...styles.cellValue, ...valueStyle } }>{ value }</Text>
{ showValue && (
<TextInput
ref={ ( c ) => valueTextInput = c }
numberOfLines={ 1 }
style={ { ...styles.cellValue, ...valueStyle } }
value={ value }
placeholder={ valuePlaceholder }
onChangeText={ onChangeValue }
editable={ isValueEditable }
/>
) }
</View>
{ drawSeparator && (
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import { Text, View } from 'react-native';
import { Text, View, KeyboardAvoidingView, Platform } from 'react-native';
import Modal from 'react-native-modal';
import SafeArea from 'react-native-safe-area';

Expand Down Expand Up @@ -58,7 +58,10 @@ class BottomSheet extends Component {
onSwipe={ this.props.onClose }
swipeDirection="down"
>
<View style={ { ...styles.content, borderColor: 'rgba(0, 0, 0, 0.1)' } }>
<KeyboardAvoidingView
behavior={ Platform.OS === 'ios' && 'padding' }
style={ { ...styles.content, borderColor: 'rgba(0, 0, 0, 0.1)' } }
>
<View style={ styles.dragIndicator } />
{ hideHeader || (
<View>
Expand All @@ -78,12 +81,12 @@ class BottomSheet extends Component {
<View style={ styles.separator } />
</View>
) }

{ this.props.children }
<View style={ { flexGrow: 1 } }></View>
<View style={ { height: this.state.safeAreaBottomInset } } />
</View>
</KeyboardAvoidingView>
</Modal>

);
}
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -65,8 +65,8 @@
flex-direction: row;
min-height: 50;
justify-content: space-between;
padding-left: 12;
padding-right: 12;
margin-left: 12;
margin-right: 12;
align-items: center;
}

Expand All @@ -82,6 +82,7 @@
.cellLabel {
font-size: 18px;
color: #000;
margin-right: 12px;
}

.cellLabelCentered {
Expand All @@ -94,4 +95,5 @@
.cellValue {
font-size: 18px;
color: $dark-gray-400;
text-align: right;
}

0 comments on commit 3a2d9f2

Please sign in to comment.