ecency/ecency-mobile
1
1
Fork 0
mirror of https://github.com/ecency/ecency-mobile.git synced 2024-12-19 03:11:38 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #1909 from ecency/nt/editor-tweaks

Browse Source 
Nt/editor tweaks
This commit is contained in:
Feruz M 2021-04-09 18:55:29 +03:00 committed by GitHub
commit df2ce191ba
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 90 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/editorElements/selectCommunityArea/view/selectCommunityAreaView.js
View File

@ -7,26 +7,33 @@ import { Icon } from '../../../icon';
import globalStyles from '../../../../globalStyles';
import styles from './selectCommunityAreStyles';
import { Separator } from '../../../basicUIElements';
const SelectCommunityAreaView = ({
community,
mode,
currentAccount,
selectedCommunity,
selectedAccount,
onPressIn,
onPressOut,
intl,
}) => {
let username = null;
let title = intl.formatMessage({ id: 'editor.select_community' });
if (selectedCommunity) {
username = selectedCommunity.name;
title = selectedCommunity.title;
} else if (selectedAccount) {
username = selectedAccount.name;
title = intl.formatMessage({ id: 'editor.my_blog' });
}
return (
<TouchableOpacity
style={[globalStyles.containerHorizontal16, styles.selectCommunityAreaViewContainer]}
onPressIn={onPressIn}
onPressOut={onPressOut}
>
<UserAvatar username={mode === 'community' ? community.name : currentAccount.name} noAction />
<Text style={[globalStyles.text, styles.chooseACommunityText]}>
{mode === 'community' ? community.title : intl.formatMessage({ id: 'editor.my_blog' })}
</Text>
<UserAvatar username={username} noAction />
<Text style={[globalStyles.text, styles.chooseACommunityText]}>{title}</Text>
<Icon
size={24}
iconStyle={styles.leftIcon}

55
src/components/editorElements/tagInput/view/tagInputView.js
View File

@ -14,7 +14,6 @@ import { isCommunity } from '../../../../utils/communityValidation';
const TagInput = ({
value,
onChange,
componentID,
handleTagChanged,
intl,
@ -37,7 +36,8 @@ const TagInput = ({
const _handleOnChange = (_text) => {
setText(_text.replace(/,/g, ' ').replace(/#/g, ''));
let cats = _text.trim().split(' ');
let cats = _text.split(' ');
if (handleTagChanged && cats.length > 0) {
cats.length > 10
? setWarning(intl.formatMessage({ id: 'editor.limited_tags' }))
@ -66,33 +66,32 @@ const TagInput = ({
}
}
};
const _handleOnBlur = () => {
const _handleOnEnd = () => {
let cats = [];
if (onChange) {
cats = text.trim().split(' ');
if (handleTagChanged && cats.length > 0) {
cats.length > 10
? setWarning(intl.formatMessage({ id: 'editor.limited_tags' }))
: cats.find((c) => c.length > 24)
? setWarning(intl.formatMessage({ id: 'editor.limited_length' }))
: cats.find((c) => c.split('-').length > 2)
? setWarning(intl.formatMessage({ id: 'editor.limited_dash' }))
: cats.find((c) => c.indexOf(',') >= 0)
? setWarning(intl.formatMessage({ id: 'editor.limited_space' }))
: cats.find((c) => /[A-Z]/.test(c))
? setWarning(intl.formatMessage({ id: 'editor.limited_lowercase' }))
: cats.find((c) => !/^[a-z0-9-#]+$/.test(c))
? setWarning(intl.formatMessage({ id: 'editor.limited_characters' }))
: cats.find((c) => !/^[a-z-#]/.test(c))
? setWarning(intl.formatMessage({ id: 'editor.limited_firstchar' }))
: cats.find((c) => !/[a-z0-9]$/.test(c))
? setWarning(intl.formatMessage({ id: 'editor.limited_lastchar' }))
: setWarning(null);
handleTagChanged([...cats]);
}
onChange(text);
cats = text.trim().split(' ');
if (handleTagChanged && cats.length > 0) {
cats.length > 10
? setWarning(intl.formatMessage({ id: 'editor.limited_tags' }))
: cats.find((c) => c.length > 24)
? setWarning(intl.formatMessage({ id: 'editor.limited_length' }))
: cats.find((c) => c.split('-').length > 2)
? setWarning(intl.formatMessage({ id: 'editor.limited_dash' }))
: cats.find((c) => c.indexOf(',') >= 0)
? setWarning(intl.formatMessage({ id: 'editor.limited_space' }))
: cats.find((c) => /[A-Z]/.test(c))
? setWarning(intl.formatMessage({ id: 'editor.limited_lowercase' }))
: cats.find((c) => !/^[a-z0-9-#]+$/.test(c))
? setWarning(intl.formatMessage({ id: 'editor.limited_characters' }))
: cats.find((c) => !/^[a-z-#]/.test(c))
? setWarning(intl.formatMessage({ id: 'editor.limited_firstchar' }))
: cats.find((c) => !/[a-z0-9]$/.test(c))
? setWarning(intl.formatMessage({ id: 'editor.limited_lastchar' }))
: setWarning(null);
handleTagChanged([...cats]);
}
};
return (
<View style={[globalStyles.containerHorizontal16, styles.container]}>
<ThemeContainer>
@ -111,8 +110,8 @@ const TagInput = ({
autoCorrect={false}
autoFocus={autoFocus}
autoCapitalize="none"
onChangeText={(textT) => _handleOnChange(textT)}
onBlur={() => _handleOnBlur()}
onChangeText={_handleOnChange}
onEndEditing={_handleOnEnd}
value={text}
/>
)}

5
src/components/markdownEditor/view/markdownEditorStyles.js
View File

@ -51,6 +51,10 @@ export default EStyleSheet.create({
icon: {
color: '$editorButtonColor',
},
iconArrow: {
marginLeft: 4,
color: '$iconColor',
},
clearButtonWrapper: {
justifyContent: 'center',
alignItems: 'center',
@ -80,6 +84,7 @@ export default EStyleSheet.create({
marginLeft: 2,
},
name: {
marginLeft: 4,
color: '$primaryDarkGray',
},
modalStyle: {

8
src/components/markdownEditor/view/markdownEditorView.js
View File

@ -11,6 +11,7 @@ import {
import ActionSheet from 'react-native-actionsheet';
import { renderPostBody } from '@ecency/render-helper';
import { useDispatch, useSelector } from 'react-redux';
import { Icon } from '../../icon';
// Utils
import Formats from './formats/formats';
@ -345,6 +346,13 @@ const MarkdownEditorView = ({
<View style={styles.nameContainer}>
<Text style={styles.name}>{`@${currentAccount.username}`}</Text>
</View>
<Icon
size={24}
iconStyle={styles.leftIcon}
style={styles.iconArrow}
name="arrow-drop-down"
iconType="MaterialIcons"
/>
</View>
</TouchableOpacity>
</View>

1
src/config/locales/en-US.json
View File

@ -298,6 +298,7 @@
"beneficiaries": "Beneficiaries",
"options": "Options",
"my_blog": "My Blog",
"select_community":"Choose a community",
"my_communities": "My Communities",
"top_communities": "Top Communities",
"schedule_modal_title": "Schedule Post",

45
src/screens/editor/screen/editorScreen.js
View File

@ -53,15 +53,22 @@ class EditorScreen extends Component {
},
isCommunitiesListModalOpen: false,
selectedCommunity: null,
selectedAccount: null,
};
}
// Component Life Cycles
componentDidMount() {
const { draftPost } = this.props;
const { draftPost, currentAccount } = this.props;
if (draftPost && draftPost.tags?.length > 0 && isCommunity(draftPost.tags[0])) {
this._getCommunity(draftPost.tags[0]);
if (draftPost) {
if (draftPost.tags?.length > 0 && isCommunity(draftPost.tags[0])) {
this._getCommunity(draftPost.tags[0]);
} else {
this.setState({
selectedAccount: currentAccount,
});
}
}
}
@ -73,10 +80,14 @@ class EditorScreen extends Component {
}
UNSAFE_componentWillReceiveProps = async (nextProps) => {
const { draftPost, isUploading, community } = this.props;
const { draftPost, isUploading, community, currentAccount } = this.props;
if (nextProps.draftPost && draftPost !== nextProps.draftPost) {
if (nextProps.draftPost.tags?.length > 0 && isCommunity(nextProps.draftPost.tags[0])) {
this._getCommunity(nextProps.draftPost.tags[0]);
} else {
this.setState({
selectedAccount: currentAccount,
});
}
await this.setState((prevState) => {
@ -205,11 +216,17 @@ class EditorScreen extends Component {
};
_handleOnTagAdded = async (tags) => {
const { selectedCommunity } = this.state;
const { currentAccount } = this.props;
if (tags.length > 0 && !isNull(selectedCommunity) && !isCommunity(tags[0])) {
this.setState({ selectedCommunity: null });
if (tags.length > 0) {
if (!isCommunity(tags[0])) {
this.setState({
selectedCommunity: null,
selectedAccount: currentAccount,
});
}
}
const { fields: _fields } = this.state;
const __tags = tags; //.map((t) => t.replace(/([^a-z0-9-]+)/gi, '').toLowerCase());
const __fields = { ..._fields, tags: __tags };
@ -230,6 +247,7 @@ class EditorScreen extends Component {
_handlePressCommunity = (community) => {
const { fields, selectedCommunity } = this.state;
const { currentAccount } = this.props;
if (community == null) {
if (!isNull(selectedCommunity)) {
@ -243,7 +261,12 @@ class EditorScreen extends Component {
fields.tags.unshift(community.name);
}
this.setState({ fields, isCommunitiesListModalOpen: false, selectedCommunity: community });
this.setState({
fields,
isCommunitiesListModalOpen: false,
selectedCommunity: community,
selectedAccount: community ? null : currentAccount,
});
};
_getCommunity = (hive) => {
@ -275,6 +298,7 @@ class EditorScreen extends Component {
isRemoveTag,
isCommunitiesListModalOpen,
selectedCommunity,
selectedAccount,
} = this.state;
const {
handleOnImagePicker,
@ -341,9 +365,8 @@ class EditorScreen extends Component {
>
{!isReply && !isEdit && (
<SelectCommunityAreaView
currentAccount={currentAccount}
mode={!isNull(selectedCommunity) ? 'community' : 'user'}
community={selectedCommunity}
selectedAccount={selectedAccount}
selectedCommunity={selectedCommunity}
// because of the bug in react-native-modal
// https://github.com/facebook/react-native/issues/26892
onPressOut={() => this.setState({ isCommunitiesListModalOpen: true })}