created clear feature for editor

This commit is contained in:
u-e 2019-02-08 16:42:04 +03:00
parent 3dd31f9161
commit e3278f23e1
8 changed files with 95 additions and 21 deletions

View File

@ -93,28 +93,28 @@
<key>isShown</key>
<false/>
<key>orderHint</key>
<integer>18</integer>
<integer>19</integer>
</dict>
<key>RSKImageCropper.xcscheme</key>
<dict>
<key>isShown</key>
<false/>
<key>orderHint</key>
<integer>19</integer>
<integer>20</integer>
</dict>
<key>SDWebImage.xcscheme</key>
<dict>
<key>isShown</key>
<false/>
<key>orderHint</key>
<integer>20</integer>
<integer>21</integer>
</dict>
<key>SSZipArchive.xcscheme</key>
<dict>
<key>isShown</key>
<false/>
<key>orderHint</key>
<integer>21</integer>
<integer>23</integer>
</dict>
<key>glog.xcscheme</key>
<dict>

View File

@ -12,7 +12,7 @@
<key>eSteem.xcscheme_^#shared#^_</key>
<dict>
<key>orderHint</key>
<integer>27</integer>
<integer>26</integer>
</dict>
</dict>
</dict>

View File

@ -26,7 +26,7 @@ export default class TagAreaView extends Component {
// Component Life Cycles
componentWillReceiveProps(nextProps) {
const { draftChips } = this.props;
const { draftChips, isRemoveTag } = this.props;
if (nextProps.draftChips && nextProps.draftChips !== draftChips) {
const _chips = [...nextProps.draftChips, ' '];
@ -34,6 +34,10 @@ export default class TagAreaView extends Component {
chips: _chips,
});
}
if (isRemoveTag !== nextProps.isRemoveTag && nextProps.isRemoveTag) {
this.setState({ chips: [' '], currentText: '' });
}
}
// Component Functions

View File

@ -32,7 +32,6 @@ export default EStyleSheet.create({
maxWidth: '$deviceWidth / 2',
},
rightButtonsWrapper: {
marginRight: 16,
flexDirection: 'row',
alignItems: 'center',
},
@ -53,4 +52,14 @@ export default EStyleSheet.create({
icon: {
color: '$editorButtonColor',
},
clearButtonWrapper: {
justifyContent: 'center',
alignItems: 'center',
height: 50,
width: 56,
backgroundColor: '$primaryBlue',
},
clearIcon: {
color: '$white',
},
});

View File

@ -94,10 +94,7 @@ export default class MarkdownEditorView extends Component {
}
};
_getState = () => {
return this.state;
};
_getState = () => this.state;
_renderPreview = () => {
const { text } = this.state;
@ -128,9 +125,7 @@ export default class MarkdownEditorView extends Component {
<FlatList
data={Formats}
keyboardShouldPersistTaps="always"
renderItem={
({ item, index }) => index !== 9
&& this._renderMarkupButton({ item, getState, setState })
renderItem={({ item, index }) => index !== 9 && this._renderMarkupButton({ item, getState, setState })
}
horizontal
/>
@ -152,6 +147,15 @@ export default class MarkdownEditorView extends Component {
iconType="FontAwesome"
name="image"
/>
<View style={styles.clearButtonWrapper}>
<IconButton
onPress={() => this.ClearActionSheet.show()}
size={20}
iconStyle={styles.clearIcon}
iconType="FontAwesome"
name="trash"
/>
</View>
{/* TODO: After alpha */}
{/* <DropdownButton
style={styles.dropdownStyle}
@ -164,9 +168,17 @@ export default class MarkdownEditorView extends Component {
</StickyBar>
);
_handleClear = () => {
const { initialFields } = this.props;
initialFields();
this.setState({ text: '' });
};
render() {
const {
intl, isPreviewActive, isReply, handleOpenImagePicker,
handleOpenImagePicker, intl, isPreviewActive, isReply,
} = this.props;
const { text, selection } = this.state;
@ -174,7 +186,7 @@ export default class MarkdownEditorView extends Component {
<KeyboardAvoidingView
style={styles.container}
keyboardVerticalOffset={Platform.select({ ios: 0, android: 25 })}
behavior={(Platform.OS === 'ios') ? 'padding' : null}
behavior={Platform.OS === 'ios' ? 'padding' : null}
>
{!isPreviewActive ? (
<TextInput
@ -202,14 +214,44 @@ export default class MarkdownEditorView extends Component {
this.setState(state, callback);
},
})}
{/* TODO: This is a problem re-factor */}
<ActionSheet
ref={o => (this.ActionSheet = o)}
options={['Open Gallery', 'Capture a photo', 'Cancel']}
options={[
intl.formatMessage({
id: 'editor.open_galery',
}),
intl.formatMessage({
id: 'editor.capture_photo',
}),
intl.formatMessage({
id: 'alert.cancel',
}),
]}
cancelButtonIndex={2}
onPress={(index) => {
handleOpenImagePicker(index === 0 ? 'image' : index === 1 && 'camera');
}}
/>
<ActionSheet
ref={o => (this.ClearActionSheet = o)}
title={intl.formatMessage({
id: 'alert.clear_alert',
})}
options={[
intl.formatMessage({
id: 'alert.clear',
}),
intl.formatMessage({
id: 'alert.cancel',
}),
]}
cancelButtonIndex={1}
onPress={(index) => {
index === 0 && this._handleClear();
}}
/>
</KeyboardAvoidingView>
);
}

View File

@ -113,7 +113,9 @@
"default_placeholder": "What would you like to write about today?",
"reply_placeholder": "What would you like to write about above post?",
"publish": "Publish",
"reply": "Reply"
"reply": "Reply",
"open_galery": "Open Galery",
"capture_photo": "Capture a photo"
},
"pincode": {
"enter_text": "Enter PIN to unlock",
@ -134,6 +136,8 @@
"warning": "Warning",
"invalid_pincode": "Invalid PIN code, please check and try again.",
"remove_alert": "Are you sure you want to remove?",
"clear_alert": "Are you sure you want to clear?",
"clear": "Clear",
"cancel": "Cancel",
"delete": "Delete",
"copied": "Copied!",

View File

@ -27,6 +27,7 @@ class EditorScreen extends Component {
isFormValid: false,
isPreviewActive: false,
wordsCount: null,
isRemoveTag: false,
fields: {
title: (props.draftPost && props.draftPost.title) || '',
body: (props.draftPost && props.draftPost.body) || '',
@ -50,6 +51,18 @@ class EditorScreen extends Component {
};
// Component Functions
_initialFields = () => {
this.setState({
fields: {
title: '',
body: '',
tags: [],
isValid: false,
},
isRemoveTag: true,
});
};
_handleOnPressPreviewButton = () => {
const { isPreviewActive } = this.state;
@ -134,14 +147,14 @@ class EditorScreen extends Component {
_handleOnTagAdded = (tags) => {
const _tags = tags.filter(tag => tag && tag !== ' ');
const fields = { ...this.state.fields };
fields.tags = _tags;
this.setState({ fields });
this.setState({ fields, isRemoveTag: false, });
};
render() {
const {
fields, isPreviewActive, wordsCount, isFormValid,
fields, isPreviewActive, wordsCount, isFormValid, isRemoveTag,
} = this.state;
const {
draftPost,
@ -192,6 +205,7 @@ class EditorScreen extends Component {
{!isReply && (
<TagArea
draftChips={fields.tags.length > 0 ? fields.tags : null}
isRemoveTag={isRemoveTag}
componentID="tag-area"
handleTagChanged={this._handleOnTagAdded}
intl={intl}
@ -204,6 +218,7 @@ class EditorScreen extends Component {
handleOpenImagePicker={handleOnImagePicker}
intl={intl}
uploadedImage={uploadedImage}
initialFields={this._initialFields}
isReply={isReply}
/>
</PostForm>