From 1b654b1e6b2540891953b0a934e87d6132612e70 Mon Sep 17 00:00:00 2001 From: Chris Cheung <42968499+bumpingChris@users.noreply.github.com> Date: Mon, 25 Jan 2021 11:02:59 +0800 Subject: [PATCH 1/5] Added a pink color to text colors --- src/Convertors.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/Convertors.js b/src/Convertors.js index eabbc60..f8456a0 100644 --- a/src/Convertors.js +++ b/src/Convertors.js @@ -30,6 +30,7 @@ export function convertToHtmlString(contents, styleList = null) { const isBlue = item.stype.indexOf('blue') > -1; const isRed = item.stype.indexOf('red') > -1; const isGreen = item.stype.indexOf('green') > -1; + const isPink = item.stype.indexOf('pink') > -1; const isBlueMarker = item.stype.indexOf('blue_hl') > -1; const isGreenMarker = item.stype.indexOf('green_hl') > -1; const isPinkMarker = item.stype.indexOf('pink_hl') > -1; @@ -68,6 +69,7 @@ export function convertToHtmlString(contents, styleList = null) { styles += isBlue ? `color: ${availableStyles.blue.color};` : ''; styles += isRed ? `color: ${availableStyles.red.color};` : ''; styles += isGreen ? `color: ${availableStyles.green.color};` : ''; + styles += isPink ? `color: ${availableStyles.pink.color};` : ''; styles += isBlueMarker ? `background-color: ${availableStyles.blue_hl.backgroundColor};` : ''; styles += isGreenMarker ? `background-color: ${availableStyles.green_hl.backgroundColor};` : ''; styles += isPinkMarker ? `background-color: ${availableStyles.pink_hl.backgroundColor};` : ''; @@ -283,6 +285,7 @@ function xmlNodeToItem(child, tag, newLine, styleList = null) { let isGreen = false; let isBlue = false; let isRed = false; + let isPink = false; let isBlueMarker = false; let isOrangeMarker = false; @@ -302,6 +305,7 @@ function xmlNodeToItem(child, tag, newLine, styleList = null) { isBlue = styles.indexOf(`color: ${availableStyles.blue.color};`) > -1; isRed = styles.indexOf(`color: ${availableStyles.red.color};`) > -1; isGreen = styles.indexOf(`color: ${availableStyles.green.color};`) > -1; + isPink = styles.indexOf(`color: ${availableStyles.pink.color};`) > -1; isBlueMarker = styles.indexOf(`background-color: ${availableStyles.blue_hl.backgroundColor};`) > -1; isGreenMarker = styles.indexOf(`background-color: ${availableStyles.green_hl.backgroundColor};`) > -1; isPinkMarker = styles.indexOf(`background-color: ${availableStyles.pink_hl.backgroundColor};`) > -1; @@ -345,6 +349,9 @@ function xmlNodeToItem(child, tag, newLine, styleList = null) { if (isRed) { stype.push('red'); } + if (isPink) { + stype.push('pink'); + } if (isBlueMarker) { stype.push('blue_hl'); @@ -457,6 +464,9 @@ const defaultStyles = StyleSheet.create( blue: { color: '#0560ab', }, + pink: { + color: '#F58F99', + }, black: { color: '#33363d', }, From 27b2a53f06cd42e72dfe2f6702e35eb405f65c79 Mon Sep 17 00:00:00 2001 From: Chris Cheung <42968499+bumpingChris@users.noreply.github.com> Date: Mon, 25 Jan 2021 11:51:05 +0800 Subject: [PATCH 2/5] Pastelized colors --- src/Convertors.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/Convertors.js b/src/Convertors.js index f8456a0..c74efbe 100644 --- a/src/Convertors.js +++ b/src/Convertors.js @@ -456,19 +456,19 @@ const defaultStyles = StyleSheet.create( fontSize: 20, }, red: { - color: '#d23431', + color: '#F57474', }, green: { - color: '#4a924d', + color: '#29CC75', }, blue: { - color: '#0560ab', + color: '#67B6FF', }, pink: { color: '#F58F99', }, black: { - color: '#33363d', + color: '#676767', }, blue_hl: { backgroundColor: '#34f3f4', From 5c81b9772986d8adccce4c96491491178291adaf Mon Sep 17 00:00:00 2001 From: Chris Cheung <42968499+bumpingChris@users.noreply.github.com> Date: Mon, 25 Jan 2021 15:16:50 +0800 Subject: [PATCH 3/5] Update Convertors.js --- src/Convertors.js | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/src/Convertors.js b/src/Convertors.js index c74efbe..117dcd3 100644 --- a/src/Convertors.js +++ b/src/Convertors.js @@ -30,7 +30,6 @@ export function convertToHtmlString(contents, styleList = null) { const isBlue = item.stype.indexOf('blue') > -1; const isRed = item.stype.indexOf('red') > -1; const isGreen = item.stype.indexOf('green') > -1; - const isPink = item.stype.indexOf('pink') > -1; const isBlueMarker = item.stype.indexOf('blue_hl') > -1; const isGreenMarker = item.stype.indexOf('green_hl') > -1; const isPinkMarker = item.stype.indexOf('pink_hl') > -1; @@ -69,7 +68,6 @@ export function convertToHtmlString(contents, styleList = null) { styles += isBlue ? `color: ${availableStyles.blue.color};` : ''; styles += isRed ? `color: ${availableStyles.red.color};` : ''; styles += isGreen ? `color: ${availableStyles.green.color};` : ''; - styles += isPink ? `color: ${availableStyles.pink.color};` : ''; styles += isBlueMarker ? `background-color: ${availableStyles.blue_hl.backgroundColor};` : ''; styles += isGreenMarker ? `background-color: ${availableStyles.green_hl.backgroundColor};` : ''; styles += isPinkMarker ? `background-color: ${availableStyles.pink_hl.backgroundColor};` : ''; @@ -285,7 +283,6 @@ function xmlNodeToItem(child, tag, newLine, styleList = null) { let isGreen = false; let isBlue = false; let isRed = false; - let isPink = false; let isBlueMarker = false; let isOrangeMarker = false; @@ -305,7 +302,6 @@ function xmlNodeToItem(child, tag, newLine, styleList = null) { isBlue = styles.indexOf(`color: ${availableStyles.blue.color};`) > -1; isRed = styles.indexOf(`color: ${availableStyles.red.color};`) > -1; isGreen = styles.indexOf(`color: ${availableStyles.green.color};`) > -1; - isPink = styles.indexOf(`color: ${availableStyles.pink.color};`) > -1; isBlueMarker = styles.indexOf(`background-color: ${availableStyles.blue_hl.backgroundColor};`) > -1; isGreenMarker = styles.indexOf(`background-color: ${availableStyles.green_hl.backgroundColor};`) > -1; isPinkMarker = styles.indexOf(`background-color: ${availableStyles.pink_hl.backgroundColor};`) > -1; @@ -349,9 +345,6 @@ function xmlNodeToItem(child, tag, newLine, styleList = null) { if (isRed) { stype.push('red'); } - if (isPink) { - stype.push('pink'); - } if (isBlueMarker) { stype.push('blue_hl'); @@ -464,9 +457,6 @@ const defaultStyles = StyleSheet.create( blue: { color: '#67B6FF', }, - pink: { - color: '#F58F99', - }, black: { color: '#676767', }, From a332290d1101c3488f6919921e2c3e4a0591dbb7 Mon Sep 17 00:00:00 2001 From: Chris Cheung <42968499+bumpingChris@users.noreply.github.com> Date: Mon, 25 Jan 2021 21:32:21 +0800 Subject: [PATCH 4/5] Update CNTextInput.js --- src/CNTextInput.js | 86 +++++++++++++++++++++++++++++++++++++++------- 1 file changed, 74 insertions(+), 12 deletions(-) diff --git a/src/CNTextInput.js b/src/CNTextInput.js index 785170c..2c1eff3 100644 --- a/src/CNTextInput.js +++ b/src/CNTextInput.js @@ -768,16 +768,62 @@ class CNTextInput extends Component { }; } + manageColorToolType(arrayOfToolTypes, toolType) { + const colors = ['red', 'green', 'blue', 'default']; + const isColor = colors.indexOf(toolType) > -1; + if (isColor) + { + + const indexOfUpToolType = arrayOfToolTypes.indexOf(toolType); + if (indexOfUpToolType != -1) { + //Selected color already in list. do nothing. + + } + else { + + // first check if other colors are in the list, if so remove them + const otherColors = colors.filter(x => toolType != x); + for (let c = 0; c < otherColors.length; c++) { + const indexOfUpToolType = arrayOfToolTypes.indexOf(otherColors[c]); + if (indexOfUpToolType != -1) + { + arrayOfToolTypes = update(arrayOfToolTypes, { $splice: [[indexOfUpToolType, 1]] }); + } + } + // then add the selected color in... + arrayOfToolTypes = update(arrayOfToolTypes, { $push: [toolType] }); + + } + + } + return arrayOfToolTypes; + } + addToUpComming(toolType) { if (this.upComingStype) { - const indexOfUpToolType = this.upComingStype.stype.indexOf(toolType); - const newUpStype = this.upComingStype ? (indexOfUpToolType != -1 ? update(this.upComingStype.stype, { $splice: [[indexOfUpToolType, 1]] }) - : update(this.upComingStype.stype, { $push: [toolType] })) : [toolType]; - this.upComingStype.stype = newUpStype; - this.upComingStype.styleList = StyleSheet.flatten(this.convertStyleList(update(newUpStype, { $push: [this.upComingStype.tag] }))); + // Need to treat colors as having the same toolType and even selecting existing color is ok - doesn't turnoff + const colors = ['red', 'green', 'blue', 'default']; + const isColor = colors.indexOf(toolType) > -1; + if (isColor) + { + this.upComingStype.stype = this.manageColorToolType(this.upComingStype.stype, toolType); + this.upComingStype.styleList = StyleSheet.flatten(this.convertStyleList(update(this.upComingStype.stype, { $push: [this.upComingStype.tag] }))); + + + } + else //not color + { + const indexOfUpToolType = this.upComingStype.stype.indexOf(toolType); + const newUpStype = this.upComingStype ? (indexOfUpToolType != -1 ? update(this.upComingStype.stype, { $splice: [[indexOfUpToolType, 1]] }) + : update(this.upComingStype.stype, { $push: [toolType] })) : [toolType]; + this.upComingStype.stype = newUpStype; + this.upComingStype.styleList = StyleSheet.flatten(this.convertStyleList(update(newUpStype, { $push: [this.upComingStype.tag] }))); + } } } + + applyStyle(toolType) { const { selection: { start, end } } = this.state; const { items } = this.props; @@ -792,16 +838,31 @@ class CNTextInput extends Component { const { id, len, stype, tag, text, styleList, } = content[i]; + + console.log('applyStyle:', id, len, stype, tag, text, styleList); + const NewLine = content[i].NewLine ? content[i].NewLine : false; const readOnly = content[i].readOnly ? content[i].readOnly : false; - const indexOfToolType = stype.indexOf(toolType); - const newStype = (indexOfToolType != -1) - ? update(stype, { $splice: [[indexOfToolType, 1]] }) - : update(stype, { $push: [toolType] }); + const colors = ['red', 'green', 'blue', 'default']; + const isColor = colors.indexOf(toolType) > -1; + let newStype = []; + if (isColor) + { + newStype = this.manageColorToolType(stype, toolType); + } + else { + const indexOfToolType = stype.indexOf(toolType); + newStype = (indexOfToolType != -1) + ? update(stype, { $splice: [[indexOfToolType, 1]] }) + : update(stype, { $push: [toolType] }); + } + console.log('applyStyle:newStype:', newStype); const newStyles = StyleSheet.flatten(this.convertStyleList(update(newStype, { $push: [tag] }))); + console.log('applyStyle:newStyles:', newStyles); + const from = indx; indx += len; const to = indx; @@ -1011,6 +1072,8 @@ class CNTextInput extends Component { styles = newCollection[res.findIndx].stype; } + console.log('applyStyle:aboutToCallOnSelectedStyleChanged:', newCollection, styles); + this.justToolAdded = start !== end; this.props.onContentChanged(newCollection); if (this.props.onSelectedStyleChanged) this.props.onSelectedStyleChanged(styles); @@ -1306,7 +1369,7 @@ class CNTextInput extends Component { render() { const { - items, foreColor, style, returnKeyType, styleList, textInputProps + items, foreColor, style, returnKeyType, styleList } = this.props; const { selection } = this.state; const color = foreColor || '#000'; @@ -1314,7 +1377,6 @@ class CNTextInput extends Component { return ( { _.map(items, item => ( From 951647111da3723aa05cdf88cdb359fc8a9c0ffc Mon Sep 17 00:00:00 2001 From: Chris Cheung Date: Sat, 15 May 2021 14:51:40 +0800 Subject: [PATCH 5/5] Fixes from Umang --- src/CNTextInput.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/CNTextInput.js b/src/CNTextInput.js index 2c1eff3..c9e62cb 100644 --- a/src/CNTextInput.js +++ b/src/CNTextInput.js @@ -1377,6 +1377,7 @@ class CNTextInput extends Component { return ( this.textInput = component} + ref={this.textInput} onChangeText={this.handleChangeText} onKeyPress={this.handleKeyDown} - selection={selection} onFocus={this.onFocus} onBlur={this.onBlur} onContentSizeChange={this.handleContentSizeChange} - placeholder={this.props.placeholder} + placeholder={this.props.placeholder} + selection={undefined} > { _.map(items, item => (