mirror of
https://github.com/ecency/ecency-mobile.git
synced 2024-12-26 06:42:15 +03:00
enhanced chips on editor
This commit is contained in:
parent
d41098053f
commit
cd13ec6bf6
@ -91,7 +91,7 @@ class BasicHeaderView extends Component {
|
||||
name={isModalHeader ? 'close' : 'md-arrow-back'}
|
||||
onPress={() => (isModalHeader ? handleOnPressClose() : handleOnPressBackButton())}
|
||||
/>
|
||||
{isHasIcons && (
|
||||
{isHasIcons && !isReply && (
|
||||
<View>
|
||||
{!isDraftSaving ? (
|
||||
<IconButton
|
||||
|
@ -6,7 +6,7 @@ export default EStyleSheet.create({
|
||||
fontSize: 10,
|
||||
backgroundColor: '#c1c5c7',
|
||||
borderRadius: 50,
|
||||
maxHeight: 18,
|
||||
height: 20,
|
||||
padding: 5,
|
||||
paddingHorizontal: 10,
|
||||
marginRight: 8,
|
||||
|
@ -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}
|
||||
/>
|
||||
))}
|
||||
|
@ -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>
|
||||
);
|
||||
|
@ -113,7 +113,6 @@ class HeaderView extends Component {
|
||||
}}
|
||||
>
|
||||
<IconButton
|
||||
style={styles.searchButton}
|
||||
iconStyle={styles.backIcon}
|
||||
name="md-search"
|
||||
onPress={() => this.setState({ isSearchModalOpen: true })}
|
||||
|
@ -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 ->
|
||||
|
Loading…
Reference in New Issue
Block a user