diff --git a/src/Editor/EditorStyles.js b/src/Editor/EditorStyles.js
index e1367d7..ea6fee6 100644
--- a/src/Editor/EditorStyles.js
+++ b/src/Editor/EditorStyles.js
@@ -17,13 +17,13 @@ export default StyleSheet.create({
fontSize: 16,
color: "#000",
fontWeight: "400",
- paddingHorizontal: 20,
+ paddingHorizontal: 8,
minHeight: 40,
position: "absolute",
top: 0,
- color: "transparent",
alignSelf: "stretch",
- width: "100%"
+ width: "100%",
+ height: '100%' // added for android
},
formmatedTextWrapper: {
minHeight: 40,
diff --git a/src/Editor/index.js b/src/Editor/index.js
index ef31dea..2ed9c0e 100644
--- a/src/Editor/index.js
+++ b/src/Editor/index.js
@@ -26,7 +26,11 @@ export class Editor extends React.Component {
onHideMentions: PropTypes.func,
editorStyles: PropTypes.object,
placeholder: PropTypes.string,
- renderMentionList: PropTypes.func
+ renderMentionList: PropTypes.func,
+ placeMentionListOnBottom: PropTypes.bool,
+ inputExtraHeight: PropTypes.number,
+ autoFocus: PropTypes.bool,
+ selectionColor: PropTypes.object
};
constructor(props) {
@@ -59,7 +63,7 @@ export class Editor extends React.Component {
},
menIndex: 0,
showMentions: false,
- editorHeight: 72,
+ editorHeight: this.props.initialEditorHeight ?? 72,
scrollContentInset: { top: 0, bottom: 0, left: 0, right: 0 },
placeholder: props.placeholder || "Type something..."
};
@@ -68,22 +72,31 @@ export class Editor extends React.Component {
}
static getDerivedStateFromProps(nextProps, prevState) {
if (nextProps.clearInput !== prevState.clearInput) {
- return { clearInput: nextProps.clearInput };
+ return { clearInput: nextProps.clearInput, placeholder: nextProps.placeholder };
}
if (nextProps.showMentions && !prevState.showMentions) {
const newInputText = `${prevState.inputText}${prevState.trigger}`;
return {
inputText: newInputText,
- showMentions: nextProps.showMentions
+ showMentions: nextProps.showMentions,
+ placeholder: nextProps.placeholder
};
}
if (!nextProps.showMentions) {
return {
- showMentions: nextProps.showMentions
+ showMentions: nextProps.showMentions,
+ placeholder: nextProps.placeholder
};
}
+
+ if (nextProps.placeholder !== prevState.placeholder) {
+ return {
+ placeholder: nextProps.placeholder
+ };
+ }
+
return null;
}
@@ -128,13 +141,28 @@ export class Editor extends React.Component {
this.setState({
isTrackingStarted: false
});
- this.props.onHideMentions();
+ if (this.props.onHideMentions) {
+ this.props.onHideMentions();
+ }
+
}
- updateSuggestions(lastKeyword) {
+ updateSuggestions(lastKeyword ,list) {
+ const { props, state } = this;
+ const { editorStyles = {} } = props;
+
this.setState({
keyword: lastKeyword
});
+ const mentionListProps = {
+ list: list || props.list,
+ keyword: lastKeyword,
+ isTrackingStarted: state.isTrackingStarted,
+ onSuggestionTap: this.onSuggestionTap.bind(this),
+ editorStyles
+ };
+
+ this.props.onMentionListPropChange && this.props.onMentionListPropChange(mentionListProps)
}
resetTextbox() {
@@ -279,6 +307,7 @@ export class Editor extends React.Component {
});
this.stopTracking();
this.sendMessageToFooter(text);
+ this.updateSuggestions('' , [])
};
handleSelectionChange = ({ nativeEvent: { selection } }) => {
@@ -305,11 +334,16 @@ export class Editor extends React.Component {
this.setState({ selection: newSelc });
};
- formatMentionNode = (txt, key) => (
-
- {txt}
-
- );
+ formatMentionNode = (txt, key) => {
+ const { props } = this;
+ const { editorStyles = {} } = props;
+
+ return(
+
+ {txt}
+
+ )
+ };
formatText(inputText) {
/**
@@ -361,9 +395,12 @@ export class Editor extends React.Component {
}
sendMessageToFooter(text) {
+ const { props, state } = this;
+ const { editorStyles = {} } = props;
+
this.props.onChange({
displayText: text,
- text: this.formatTextWithMentions(text)
+ text: this.formatTextWithMentions(text),
});
}
@@ -482,6 +519,7 @@ export class Editor extends React.Component {
* the size of text in the input.
*/
if (evt) {
+
// const iosTextHeight = 20.5
const androidTextHeight = 20.5;
// const textHeight = Platform.OS === 'ios' ? iosTextHeight : androidTextHeight
@@ -490,7 +528,7 @@ export class Editor extends React.Component {
Platform.OS === "ios"
? evt.nativeEvent.contentSize.height
: evt.nativeEvent.contentSize.height - androidTextHeight;
- let editorHeight = 40;
+ let editorHeight = 20 + (this.props.inputExtraHeight ?? 0);
editorHeight = editorHeight + height;
this.setState({
editorHeight
@@ -512,20 +550,24 @@ export class Editor extends React.Component {
editorStyles
};
+ const mentionListComponent = (
+ props.renderMentionList ? (
+ props.renderMentionList(mentionListProps)
+ ) : (
+
+ )
+ )
+
return (
- {props.renderMentionList ? (
- props.renderMentionList(mentionListProps)
- ) : (
-
- )}
+ { !props.placeMentionListOnBottom && mentionListComponent }
{
this.scroll = scroll;
@@ -535,50 +577,32 @@ export class Editor extends React.Component {
}}
style={[styles.editorContainer, editorStyles.editorContainer]}
>
-
-
- {state.formattedText !== "" ? (
-
- {state.formattedText}
-
- ) : (
-
- {state.placeholder}
-
- )}
-
+
props.onRef && props.onRef(input)}
style={[styles.input, editorStyles.input]}
- multiline
- autoFocus
+ multiline = { true }
+ autoFocus = { this.props.autoFocus }
numberOfLines={100}
name={"message"}
- value={state.inputText}
+ value={null}
onBlur={props.toggleEditor}
onChangeText={this.onChange}
- selection={this.state.selection}
- selectionColor={"#000"}
+ selectionColor={props.selectionColor ?? "#000"}
onSelectionChange={this.handleSelectionChange}
placeholder={state.placeholder}
+ placeholderTextColor = { props.placeholderTextColor}
onContentSizeChange={this.onContentSizeChange}
scrollEnabled={false}
- />
+ inputAccessoryViewID={props.inputAccessoryViewID}
+ >
+ { state.formattedText }
+
+ { props.placeMentionListOnBottom && mentionListComponent }
);
}