From 8b007c8d81d3f18e65b34a173c37878238709262 Mon Sep 17 00:00:00 2001 From: MadCoderme <63955762+MadCoderme@users.noreply.github.com> Date: Mon, 28 Dec 2020 16:20:42 +0600 Subject: [PATCH 1/4] Added support for FontVariant & TextDecorationLine --- src/DragTextEditor.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/DragTextEditor.js b/src/DragTextEditor.js index a6c8c60..63c926d 100644 --- a/src/DragTextEditor.js +++ b/src/DragTextEditor.js @@ -456,6 +456,7 @@ childMR=()=>{ zIndex:10000, elevation:0.01, fontFamily: this.props.FontFamily, + fontVariant: this.props.FontVariant, color:this.props.FontColor, fontSize: this.props.FontSize, letterSpacing: this.props.LetterSpacing, @@ -467,6 +468,7 @@ childMR=()=>{ overflow: 'hidden', margin: 10, padding:5, + textDecorationLine: this.props.TextDecorationLine }} selectTextOnFocus={true} multiline={true} @@ -486,10 +488,12 @@ childMR=()=>{ textAlign: this.props.TextAlign,//'right', lineHeight: this.props.LineHeight, fontWeight: 'normal', + fontVariant: this.props.FontVariant, overflow: 'hidden', display: 'flex', margin: 10, padding:5, + textDecorationLine: this.props.TextDecorationLine }} > {this.state.text} @@ -595,6 +599,7 @@ TopRightAction:PropTypes.func, TopLeftIcon:PropTypes.func, TopRightIcon:PropTypes.func, FontFamily:PropTypes.string, + FontVariant: PropTypes.array, LetterSpacing:PropTypes.number, FontColor:PropTypes.string, FontSize:PropTypes.number, @@ -610,4 +615,5 @@ TopRightAction:PropTypes.func, onResizeStart: PropTypes.func, onResize: PropTypes.func, onResizeEnd: PropTypes.func, + textDecorationLine: PropTypes.string }; From c3dddefca4af726a474839c5641b7b258d498ce7 Mon Sep 17 00:00:00 2001 From: MadCoderme <63955762+MadCoderme@users.noreply.github.com> Date: Mon, 28 Dec 2020 16:29:08 +0600 Subject: [PATCH 2/4] FontVariant, TextDecorationLine & Rotation Added support for FontVariant, TextDecorationLine & Rotation --- src/DragTextEditor.js | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/src/DragTextEditor.js b/src/DragTextEditor.js index 63c926d..68ce394 100644 --- a/src/DragTextEditor.js +++ b/src/DragTextEditor.js @@ -468,7 +468,8 @@ childMR=()=>{ overflow: 'hidden', margin: 10, padding:5, - textDecorationLine: this.props.TextDecorationLine + textDecorationLine: this.props.TextDecorationLine, + transform: [{ rotate: this.props.Rotation + 'deg'}] }} selectTextOnFocus={true} multiline={true} @@ -493,7 +494,8 @@ childMR=()=>{ display: 'flex', margin: 10, padding:5, - textDecorationLine: this.props.TextDecorationLine + textDecorationLine: this.props.TextDecorationLine, + transform: [{ rotate: this.props.Rotation + 'deg'}] }} > {this.state.text} @@ -577,7 +579,9 @@ TopRightAction:null, onResizeStart: null, onResize: null, onResizeEnd: null, - + FontVariant: [], + TextDecorationLine: null, + Rotation: 0 }; DragTextEditor.propTypes = { @@ -615,5 +619,6 @@ TopRightAction:PropTypes.func, onResizeStart: PropTypes.func, onResize: PropTypes.func, onResizeEnd: PropTypes.func, - textDecorationLine: PropTypes.string + TextDecorationLine: PropTypes.string, + Rotation: PropTypes.number }; From b5e100bbfabc4490c4e0a8d16019aac851235daa Mon Sep 17 00:00:00 2001 From: MadCoderme <63955762+MadCoderme@users.noreply.github.com> Date: Sat, 2 Jan 2021 15:49:25 +0600 Subject: [PATCH 3/4] Update DragTextEditor.js --- src/DragTextEditor.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/DragTextEditor.js b/src/DragTextEditor.js index 68ce394..a13fa4e 100644 --- a/src/DragTextEditor.js +++ b/src/DragTextEditor.js @@ -580,7 +580,7 @@ TopRightAction:null, onResize: null, onResizeEnd: null, FontVariant: [], - TextDecorationLine: null, + TextDecorationLine: 'none', Rotation: 0 }; From a641ef38b72c0ac4932cd9686258de11d457de14 Mon Sep 17 00:00:00 2001 From: MadCoderme <63955762+MadCoderme@users.noreply.github.com> Date: Sat, 2 Jan 2021 16:03:26 +0600 Subject: [PATCH 4/4] Update README.md --- README.md | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index d7b6656..aae8834 100644 --- a/README.md +++ b/README.md @@ -60,8 +60,11 @@ export default class App extends Component { TextAlign={"left"} LetterSpacing={0} FontSize={15} + FontVariant=["small-caps"] + TextDecorationLine="none" isDraggable={true} isResizable={true} + Rotation={0} TopRightAction={()=>console.log("-Top Right Pressed")} centerPress={()=>console.log("-Center Pressed")} onTextChanged={(text)=>console.log("Text contents =", text)} @@ -96,23 +99,32 @@ export default class App extends Component { |onResizeEnd| - | function | Resize End event handler | | TopLeftIcon| `./icons/compassed.png`| function | Clickable Top Left Icon Function Component | | TopRightIcon | `./icons/closed.png`| function | Clickable Top Right Icon Function Component | - |text | `Lorem Ipsum...` | String | Value of text | + |PlaceHolder | `Lorem Ipsum...` | String | Value of text | |FontFamily | `Roboto` | String|Font Family| |FontColor | `#000` | String | Text Color| |FontSize | `15` | String|Font Size| + |FontVariant | `[]` | Array of enum|Font Variation, read more here https://reactnative.dev/docs/text-style-props#fontvariant| |LetterSpacing | `0` | String|Letter Spacing| |BackgroundColor | `transparent` | String|Background Color| |TextAlign | `Roboto` | String|Text Align| + |TextDecorationLine | `none` | String|Text Decoration Lines enum('none', 'underline', 'line-through', 'underline line-through')| |LineHeight | `18` | String|Line Height| | x | `80` | String|X location of Components| |y | `150` | String| Y location of Components| |w | `200` | Number| First Width | |h | `200` | Number| First Height | + |Rotation | `0` | Number| Rotation of the text. As react-native still doesn't provide support for setting origin of tranform, you may face issue with rotation as the origin will be at the end of the text | |minWidth | `200` | Number| Minimum Width | |minHeight | `200` | Number| Minimum Height | ## Features +### - Tips + +Rotation of the text can be controlled with the help of https://github.com/software-mansion/react-native-gesture-handler . You need to update the number in degree with gestures. You can also follow an easier way to do this, for example, you may use a Slider component. + +Remember, `FontVariant` expects an array not a string. For more details, check the offcial blog of react-native. + #### - Performs(Visible) in Black and White Backgrounds

@@ -129,7 +141,7 @@ export default class App extends Component { - [ ] Performance Optimization (Code Duplicates etc.) - [ ] textID and textInAction Bug (Type Error) - [ ] Dynamic Border Management -- [ ] Add Rotation/Rotate Icon +- [x] Add Rotation/Rotate Icon - [ ] Add Center-Snap