enhanced chips on editor

This commit is contained in:
ue 2018-12-11 14:33:03 +03:00
parent d41098053f
commit cd13ec6bf6
6 changed files with 38 additions and 24 deletions

View File

@ -91,7 +91,7 @@ class BasicHeaderView extends Component {
name={isModalHeader ? 'close' : 'md-arrow-back'}
onPress={() => (isModalHeader ? handleOnPressClose() : handleOnPressBackButton())}
/>
{isHasIcons && (
{isHasIcons && !isReply && (
<View>
{!isDraftSaving ? (
<IconButton

View File

@ -6,7 +6,7 @@ export default EStyleSheet.create({
fontSize: 10,
backgroundColor: '#c1c5c7',
borderRadius: 50,
maxHeight: 18,
height: 20,
padding: 5,
paddingHorizontal: 10,
marginRight: 8,

View File

@ -10,9 +10,9 @@ import globalStyles from '../../../../globalStyles';
export default class TagAreaView extends Component {
/* Props
* ------------------------------------------------
* @prop { type } name - Description....
*/
* ------------------------------------------------
* @prop { type } name - Description....
*/
constructor(props) {
super(props);
@ -20,6 +20,7 @@ export default class TagAreaView extends Component {
currentText: '',
chips: [' '],
chipsCount: props.chipsCount || 5,
activeChip: 0,
};
}
@ -37,7 +38,10 @@ export default class TagAreaView extends Component {
// Component Functions
_handleOnChange = (text, i) => {
this.setState({ currentText: text.trim() });
this.setState({
currentText: text.replace(/\s/g, ''),
});
if (text.indexOf(' ') > 0 && text) {
this._handleTagAdded();
}
@ -53,16 +57,22 @@ export default class TagAreaView extends Component {
_handleTagAdded = (i = null, text = null) => {
const { currentText, chips, chipsCount } = this.state;
const { handleTagChanged } = this.props;
const _currentText = (currentText && currentText.trim()) || text;
const _currentText = currentText || text;
if (_currentText && chips && chips.length < chipsCount) {
this.setState({
chips: [...chips, _currentText],
currentText: '',
});
} else if (_currentText && chips && chips.length === chipsCount) {
let _chips = chips;
_chips[chipsCount -1] = currentText;
this.setState({
chips: _chips,
currentText: null,
});
}
if (handleTagChanged && chips.length < chipsCount + 1) {
if (handleTagChanged && chips.length < chipsCount) {
handleTagChanged([...chips, _currentText]);
}
};
@ -81,10 +91,8 @@ export default class TagAreaView extends Component {
};
render() {
const {
isPreviewActive, draftChips, intl, autoFocus,
} = this.props;
const { chips } = this.state;
const { isPreviewActive, intl } = this.props;
const { chips, currentText, activeChip } = this.state;
return (
<View style={globalStyles.containerHorizontal16}>
@ -102,13 +110,14 @@ export default class TagAreaView extends Component {
placeholder={intl.formatMessage({
id: 'editor.tags',
})}
autoFocus={autoFocus ? i !== 0 && chips.length - 1 === i : false}
autoFocus={i !== 0 && chips.length - 1 === i}
multiline={false}
handleOnChange={text => this._handleOnChange(text, i)}
handleOnBlur={() => this._handleOnBlur(i)}
blurOnSubmit
value={draftChips.length > 0 ? chip && chip : null}
value={activeChip === i ? currentText : chip}
autoCapitalize="none"
onFocus={() => this.setState({ activeChip: i })}
{...this.props}
/>
))}

View File

@ -17,10 +17,18 @@ export default class TitleAreaView extends Component {
constructor(props) {
super(props);
this.state = {};
this.state = {
text: props.value || null,
};
}
// Component Life Cycles
componentWillReceiveProps = (nextProps) => {
const { text } = this.state;
if (nextProps.value !== text) {
this.setState({ text: nextProps.value });
}
};
// Component Functions
_handleOnChange = (text) => {
@ -35,9 +43,8 @@ export default class TitleAreaView extends Component {
};
render() {
const {
intl, isPreviewActive, value, autoFocus,
} = this.props;
const { intl, isPreviewActive, autoFocus } = this.props;
const { text } = this.state;
return (
<View style={globalStyles.containerHorizontal16}>
@ -53,9 +60,7 @@ export default class TitleAreaView extends Component {
autoFocus={autoFocus}
numberOfLines={4}
onChangeText={text => this._handleOnChange(text)}
// TODO: Fix it
// value={value && value}
// {...this.props}
value={text}
/>
</View>
);

View File

@ -113,7 +113,6 @@ class HeaderView extends Component {
}}
>
<IconButton
style={styles.searchButton}
iconStyle={styles.backIcon}
name="md-search"
onPress={() => this.setState({ isSearchModalOpen: true })}

View File

@ -1,5 +1,6 @@
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Alert } from 'react-native'
import ImagePicker from 'react-native-image-crop-picker';
// Services and Actions
@ -169,7 +170,7 @@ class EditorContainer extends Component {
_handleMediaOnSelectFailure = (error) => {
// const { navigation } = this.props;
this.setState({ isCameraOrPickerOpen: false });
// navigation.navigate(ROUTES.SCREENS.HOME);
Alert.alert('Permission Denied', 'Please, go to settings then find eSteem change the app permision settings.');
};
// Media select functions <- END ->