diff --git a/Demo/SelectableText.js b/Demo/SelectableText.js index bd6d5d8..23a8c04 100644 --- a/Demo/SelectableText.js +++ b/Demo/SelectableText.js @@ -6,7 +6,7 @@ import memoize from 'fast-memoize' const RNSelectableText = requireNativeComponent('RNSelectableText') /** - * numbers: array({start: int, end: int, id: string}) + * numbers: array({start: int, end: int, id: string, highlightColor: string}) */ const combineHighlights = memoize(numbers => { return numbers @@ -19,6 +19,7 @@ const combineHighlights = memoize(numbers => { start: prev.start, end: Math.max(prev.end, next.end), id: next.id, + highlightColor: prev.highlightColor }) } return combined @@ -27,7 +28,7 @@ const combineHighlights = memoize(numbers => { /** * value: string - * highlights: array({start: int, end: int, id: any}) + * highlights: array({start: int, end: int, id: any, highlightColor: string}) */ const mapHighlightsRanges = (value, highlights) => { const combinedHighlights = combineHighlights(highlights) @@ -36,16 +37,18 @@ const mapHighlightsRanges = (value, highlights) => { const data = [{ isHighlight: false, text: value.slice(0, combinedHighlights[0].start) }] - combinedHighlights.forEach(({ start, end }, idx) => { + combinedHighlights.forEach(({ start, end, highlightColor }, idx) => { data.push({ isHighlight: true, text: value.slice(start, end), + highlightColor: highlightColor, }) if (combinedHighlights[idx + 1]) { data.push({ isHighlight: false, text: value.slice(end, combinedHighlights[idx + 1].start), + highlightColor: '', }) } }) @@ -53,6 +56,7 @@ const mapHighlightsRanges = (value, highlights) => { data.push({ isHighlight: false, text: value.slice(combinedHighlights[combinedHighlights.length - 1].end, value.length), + highlightColor: '', }) return data.filter(x => x.text) @@ -106,14 +110,14 @@ export const SelectableText = ({ if (usesTextComponent) { textValue = ( props.highlights && props.highlights.length > 0 - ? mapHighlightsRanges(value, props.highlights).map(({ id, isHighlight, text }) => ( + ? mapHighlightsRanges(value, props.highlights).map(({ id, isHighlight, text, highlightColor }) => ( void | () => {} | | **menuItems** | context menu items | array(string) | [] | | **style** | additional styles to be applied to text | Object | null | -| **highlights** | array of text ranges that should be highlighted with an optional id | array({ id: string, start: int, end: int }) | [] | -| **highlightColor** | highlight color |string | null | +| **highlightColor** | global highlight color |string | null | +| **highlights** | array of text ranges that should be highlighted with an optional id and a optional highlightColor that overrides the global one | array({ id: string, start: int, end: int, highlightColor: string }) | [] | | **onHighlightPress** | called when the user taps the highlight |(id: string) => void | () => {} | | **appendToChildren** | element to be added in the last line of text | ReactNode | null | | **TextComponent** | Text component used to render `value` | ReactNode | | | **textValueProp** | text value prop for TextComponent. Should be used when passing TextComponent. Defaults to 'children' which works for | string | 'children' | | **textComponentProps** | additional props to pass to TextComponent | object | null | - diff --git a/index.d.ts b/index.d.ts index 97b2e90..3c2d935 100644 --- a/index.d.ts +++ b/index.d.ts @@ -11,7 +11,7 @@ export interface SelectableTextProps { }) => void; menuItems?: string[]; - highlights?: Array<{ id: string; start: number; end: number }>; + highlights?: Array<{ id: string; start: number; end: number; highlightColor: string }>; highlightColor?: string; style?: StyleProp; onHighlightPress?: (id: string) => void;