react-native-controlled-mentions
Advanced tools
Comparing version
export * from './mention-input'; |
@@ -0,0 +0,0 @@ "use strict"; |
@@ -0,0 +0,0 @@ import { FC } from 'react'; |
@@ -0,0 +0,0 @@ "use strict"; |
@@ -0,0 +0,0 @@ import { FC } from 'react'; |
@@ -41,3 +41,3 @@ "use strict"; | ||
const [selection, setSelection] = react_1.useState({ start: 0, end: 0 }); | ||
const { plainText, parts } = react_1.useMemo(() => utils_1.getPartsFromValue(trigger, value), [value]); | ||
const { plainText, parts } = react_1.useMemo(() => utils_1.getParts(trigger, value), [value]); | ||
const handleSelectionChange = (event) => { | ||
@@ -59,6 +59,66 @@ setSelection(event.nativeEvent.selection); | ||
* - Remove mention data if some affected part is mention | ||
* @param changedText | ||
* @param text | ||
*/ | ||
const onChangeInput = (changedText) => { | ||
onChange(utils_1.generateValueFromPartsAndChangedText(parts, plainText, changedText)); | ||
const onChangeInput = (text) => { | ||
const changePositions = utils_1.getChangedPositions(plainText, text); | ||
let newParts = parts; | ||
// Process deleting changes | ||
if (changePositions.deleted.length) { | ||
changePositions.deleted.forEach(({ start, end }) => { | ||
newParts = newParts | ||
// Filter fully removed parts | ||
.filter(one => one.position.start < start || one.position.end > end) | ||
// Update partly affected parts | ||
.map((one) => { | ||
if (start >= one.position.start && start < one.position.end | ||
|| end > one.position.start && end <= one.position.end) { | ||
const positionOffset = one.position.start; | ||
const removedTextPartPosition = { | ||
start: Math.max(start, one.position.start) - positionOffset, | ||
end: Math.min(end, one.position.end) - positionOffset, | ||
}; | ||
one.text = [ | ||
one.text.substring(0, removedTextPartPosition.start), | ||
one.text.substring(removedTextPartPosition.end), | ||
].join(''); | ||
// In case when user edited mention we remove mention | ||
if (one.data) { | ||
delete one.data; | ||
} | ||
} | ||
return one; | ||
}); | ||
}); | ||
} | ||
// Process adding changes | ||
if (changePositions.added.length) { | ||
changePositions.added.forEach(({ start, value }) => { | ||
// Finding part where text was added | ||
const partWithAdditionIndex = newParts.findIndex(one => start >= one.position.start && start <= one.position.end); | ||
const partWithAddition = newParts[partWithAdditionIndex]; | ||
if (!partWithAddition) | ||
return; | ||
const addedTextPartPositionBeforeChange = start - partWithAddition.position.start; | ||
// In case when user edited mention we remove mention | ||
if (partWithAddition.data != null) { | ||
// In case when we added text at the end of mention | ||
if (partWithAddition.position.end === start) { | ||
newParts = [ | ||
...newParts.slice(0, partWithAdditionIndex), | ||
partWithAddition, | ||
utils_1.getPart(value, start), | ||
...newParts.slice(partWithAdditionIndex + 1), | ||
]; | ||
return; | ||
} | ||
delete partWithAddition.data; | ||
} | ||
partWithAddition.text = [ | ||
partWithAddition.text.substring(0, addedTextPartPositionBeforeChange), | ||
value, | ||
partWithAddition.text.substring(addedTextPartPositionBeforeChange), | ||
].join(''); | ||
}); | ||
} | ||
onChange(utils_1.getValue(newParts)); | ||
}; | ||
@@ -138,9 +198,9 @@ /** | ||
// Create part with string before mention | ||
utils_1.generatePart(currentPart.text.substring(0, newMentionPartPosition.start)), | ||
utils_1.generateMentionPart(trigger, Object.assign(Object.assign({}, suggestion), { original: utils_1.getMentionValue(suggestion) })), | ||
utils_1.getPart(currentPart.text.substring(0, newMentionPartPosition.start)), | ||
utils_1.getMentionPart(trigger, Object.assign(Object.assign({}, suggestion), { original: utils_1.getMentionValue(suggestion) })), | ||
// Create part with rest of string after mention and add a space if needed | ||
utils_1.generatePart(`${isInsertSpaceToNextPart ? ' ' : ''}${currentPart.text.substring(newMentionPartPosition.end)}`), | ||
utils_1.getPart(`${isInsertSpaceToNextPart ? ' ' : ''}${currentPart.text.substring(newMentionPartPosition.end)}`), | ||
...parts.slice(currentPartIndex + 1), | ||
]; | ||
onChange(utils_1.getValueFromParts(newParts)); | ||
onChange(utils_1.getValue(newParts)); | ||
/** | ||
@@ -147,0 +207,0 @@ * Move cursor to the end of just added mention starting from trigger string and including: |
export * from './components'; | ||
export { Suggestion, MentionSuggestionsProps } from './types'; | ||
export { mentionRegEx, replaceMentionValues, getMentionValue } from './utils'; |
@@ -0,0 +0,0 @@ "use strict"; |
export * from './types'; |
@@ -0,0 +0,0 @@ "use strict"; |
@@ -0,0 +0,0 @@ import { ReactNode, Ref } from 'react'; |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
//# sourceMappingURL=types.js.map |
export * from './utils'; |
@@ -0,0 +0,0 @@ "use strict"; |
@@ -0,0 +0,0 @@ import { StyleProp, TextStyle } from 'react-native'; |
@@ -10,3 +10,3 @@ "use strict"; | ||
const string_prototype_matchall_1 = __importDefault(require("string.prototype.matchall")); | ||
const mentionRegEx = /(?<original>(?<trigger>.)\[(?<name>[^[]*)]\((?<id>[^[]*)\))/gi; | ||
const mentionRegEx = /(?<original>(?<trigger>.)\[(?<name>[^[]*)]\((?<id>[^(]*)\))/gi; | ||
exports.mentionRegEx = mentionRegEx; | ||
@@ -13,0 +13,0 @@ const defaultMentionTextStyle = { fontWeight: 'bold', color: 'blue' }; |
{ | ||
"name": "react-native-controlled-mentions", | ||
"version": "2.0.2", | ||
"version": "2.0.3", | ||
"description": "Fully controlled React Native mentions component", | ||
@@ -5,0 +5,0 @@ "keywords": [ |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
80122
8.24%901
7.13%