From 5ec01b50ebe15127ec39d93b81da8d2065b7a009 Mon Sep 17 00:00:00 2001 From: alioguzhan Date: Sun, 17 Nov 2019 01:39:08 +0300 Subject: [PATCH] feat: add `styled-components` support --- README.md | 21 ++ example/package.json | 3 +- example/src/App.js | 409 +++++++++------------------------------ example/src/_examples.js | 344 ++++++++++++++++++++++++++++++++ example/yarn.lock | 106 +++++++++- src/index.js | 66 ++++++- 6 files changed, 620 insertions(+), 329 deletions(-) create mode 100644 example/src/_examples.js diff --git a/README.md b/README.md index 6657bdd..40eb8ca 100644 --- a/README.md +++ b/README.md @@ -78,6 +78,27 @@ onEditingStart|function|No||Function that will be called when the editing mode i showButtonsOnHover|bool|No|`false`|Set it to `true` if you want to display action buttons **only** when the text hovered by the user. See [here](https://alioguzhan.github.io/react-editext/#show-on-hover) submitOnEnter|bool|No|`false`|Set it to `true` if you want to submit the form when `Enter` is pressed. __Be careful if you have multiple instances of `` on the same page.__ +## Styling with `styled-components` + + +You can style your `` components with `styled-components` or similar libraries. You can either target internal HTML elements by their `type` ( or `order`) , or you can you can select them by attribute values. + +Each customizable HTML element has a `editext=xxx` attribute. Use below as a reference table: + +|Attr. Name|Description| +|----------|-----------| +|`view-container`| the container in `view` mode| +|`edit-container`| the container in `edit` mode| +|`button-container`| the container for the `save` and `cancel` buttons| +|`edit-button`| use this to style the __edit button__| +|`save-button`| use this to style the __save button__| +|`cancel-button`| use this to style the __cancel button__| +|`input`| There is only one input. You can select it directly or just use this attr value. | +|`hint`| To style the hint container. | + +> See [the example code](https://alioguzhan.github.io/react-editext/#styled-components). + + ## Browser Support |[Chrome](http://godban.github.io/browsers-support-badges/)
Chrome | [Firefox](http://godban.github.io/browsers-support-badges/)
Firefox | [Safari](http://godban.github.io/browsers-support-badges/)
Safari | [iOS Safari](http://godban.github.io/browsers-support-badges/)
iOS Safari | [Opera](http://godban.github.io/browsers-support-badges/)
Opera | [IE / Edge](http://godban.github.io/browsers-support-badges/)
IE / Edge | diff --git a/example/package.json b/example/package.json index cb8378f..1329c61 100644 --- a/example/package.json +++ b/example/package.json @@ -10,7 +10,8 @@ "react-dom": "^16.10.1", "react-editext": "link:..", "react-scripts": "^3.1.2", - "react-syntax-highlighter": "^11.0.2" + "react-syntax-highlighter": "^11.0.2", + "styled-components": "^4.4.1" }, "scripts": { "start": "react-scripts start", diff --git a/example/src/App.js b/example/src/App.js index 5c5460b..0a5ef0b 100644 --- a/example/src/App.js +++ b/example/src/App.js @@ -1,311 +1,42 @@ import React, { Component } from 'react' import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter' import EdiText from 'react-editext' +import styled from 'styled-components' +import * as examples from './_examples' -const example1 = `import React, { Component } from 'react' -import EdiText from 'react-editext' - -export default class App extends Component { - onSave = val => { - console.log('Edited Value -> ', val) - } - - render () { - return ( - - ) - } -} -` -const example2 = `` - -const example3 = `Cancel} - editButtonContent="Edit" - value="Why, Mr. Anderson? Why? Why do you persist?" - onSave={this.onSave} -/>` - -const example4 = ` val.length >= 20} - value="The Matrix has you.." - onSave={this.onSave} -/>` - -const example5 = `export default class App extends Component { - onSave = val => { - console.log('Edited Value -> ', val) - } - - validationFailed = textValue => { - alert(\`The text <\${textValue}> is not valid.\nYou shall not use the word SMITH here!!!\`) - } - - render () { - return ( - val.toLowerCase().indexOf('smith') < 0} - onValidationFail={this.validationFailed} - inputProps={{ - placeholder: "Don't use the word 'Smith'..." - }} - value="Why Mr. Anderson? Why? Why? Why?" - onSave={this.onSave} - /> - ) +const StyledEdiText = styled(EdiText)` + button { + border-radius: 5px; } -}` - -const example6 = `` - -const example7 = `` - -const example8 = `` - -const example9 = `` - -const example10 = ` - PhoneGap is a hybrid technology, not native. - + button[editext="edit-button"] { + color: #000; + width: 50px; } - viewProps={{ - className: 'react-answer-1', - }} - value="I am not sure..." - onSave={this.onSave} -/>` - -const example11 = `` - -const example12 = `Cancel} - editButtonContent="Edit" - value="Why, Mr. Anderson? Why? Why do you persist?" - onSave={this.onSave} - hideIcons={true} -/>` - -const example13 = `import React, { Component } from 'react' -import EdiText from 'react-editext' - -export default class App extends Component { - onSave = val => { - console.log('Edited Value -> ', val) + button[editext="save-button"] { + width: 50px; + &:hover { + background: greenyellow; + } } - - render () { - return ( - Cancel} - editButtonContent='Edit This Quote' - value="How do you define real? If you're talking about what you can feel, what you can smell, - what you can taste and see, then real is simply electrical signals interpreted by your brain" - onSave={this.onSave} - /> - ) + button[editext="cancel-button"] { + &:hover { + background: crimson; + color: #fff; + } } -}` - -const example13Style = ` -.my-custom-view-wrapper { - display: flex; - flex-direction: column; -} - -.my-custom-view-wrapper div:last-child { - /* Here we are styling the button container. */ - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - margin-top: 5px; -}` -const example14 = `import React, { Component } from 'react' -import EdiText from 'react-editext' - -export default class App extends Component { - onSave = val => { - console.log('Edited Value -> ', val) + input, textarea { + background: #1D2225; + color: #F4C361; + font-weight: bold; + border-radius: 5px; } - - render () { - return ( - - ) + div[editext="view-container"], div[editext="edit-container"] { + background: #6293C3; + padding: 15px; + border-radius: 5px; + color: #fff; } -} ` -const example15 = `import React, { Component } from 'react' -import EdiText from 'react-editext' - -export default class App extends Component { - onSave = val => { - console.log('Edited Value -> ', val) - } - - render () { - return ( - - ) - } -}` - -const example16 = `import React, { Component } from 'react' -import EdiText from 'react-editext' - -export default class App extends Component { - onSave = val => { - console.log('Edited Value -> ', val) - } - - render () { - return ( -
- - -
- ) - } -}` - -const example17 = `import React, { Component } from 'react' -import EdiText from 'react-editext' - -export default class App extends Component { - - render () { - return ( - console.log('CANCELLED: ', v} - onEditingStart={v => console.log('EDITING STARTED: ', v} - onSave={v => console.log('SAVED: ', v} - value={"You've been living in a dream world, Neo."} - /> - ) - } -}` - -const example18 = `` - -const example19 = `` export default class App extends Component { state = { editing: false, logs: [] } @@ -380,7 +111,7 @@ export default class App extends Component {
- {example1} + {examples.example1}
@@ -393,6 +124,32 @@ export default class App extends Component {
+ {/* ============ End of Example ============ */} +
+ +

+ You can style the EdiText with styled-components. + You can target internal elements by their types (and by order maybe?). +

+
+
+ + {examples.example20} + +
+
+
Output
+ +
+
+
+ {/* ============ End of Example ============ */}
Events @@ -403,7 +160,7 @@ export default class App extends Component {
- {example17} + {examples.example17}
@@ -437,6 +194,7 @@ export default class App extends Component {
+ {/* ============ End of Example ============ */}
Show Button on Hover @@ -448,7 +206,7 @@ export default class App extends Component {
- {example18} + {examples.example18}
@@ -464,6 +222,7 @@ export default class App extends Component {
+ {/* ============ End of Example ============ */}
- {example8} + {examples.example8}
@@ -498,6 +257,7 @@ export default class App extends Component {
+ {/* ============ End of Example ============ */}
- {example10} + {examples.example10}
@@ -539,6 +299,7 @@ export default class App extends Component {
+ {/* ============ End of Example ============ */}
- {example2} + {examples.example2}
@@ -581,6 +342,7 @@ export default class App extends Component {
+ {/* ============ End of Example ============ */}
- {example3} + {examples.example3}
@@ -613,6 +375,7 @@ export default class App extends Component {
+ {/* ============ End of Example ============ */}
- {example12} + {examples.example12}
@@ -646,6 +409,7 @@ export default class App extends Component {
+ {/* ============ End of Example ============ */}
- {example11} + {examples.example11}
@@ -681,6 +445,7 @@ export default class App extends Component {
+ {/* ============ End of Example ============ */}
- {example13} + {examples.example13}

With some style:

- {example13Style} + {examples.example13Style}
@@ -734,6 +499,7 @@ export default class App extends Component {
+ {/* ============ End of Example ============ */}
- {example7} + {examples.example7}
@@ -784,6 +550,7 @@ export default class App extends Component {
+ {/* ============ End of Example ============ */}
- {example6} + {examples.example6}
@@ -819,6 +586,7 @@ export default class App extends Component {
+ {/* ============ End of Example ============ */}
- {example14} + {examples.example14}
@@ -852,6 +620,7 @@ export default class App extends Component {
+ {/* ============ End of Example ============ */}
Validate the Content @@ -866,7 +635,7 @@ export default class App extends Component {
- {example4} + {examples.example4}
@@ -881,6 +650,7 @@ export default class App extends Component {
+ {/* ============ End of Example ============ */}
- {example5} + {examples.example5}
@@ -920,6 +690,7 @@ export default class App extends Component {
+ {/* ============ End of Example ============ */}
- {example9} + {examples.example9}
@@ -954,6 +725,7 @@ export default class App extends Component {
+ {/* ============ End of Example ============ */}
Edit on View Click @@ -966,7 +738,7 @@ export default class App extends Component {
- {example15} + {examples.example15}
@@ -981,6 +753,7 @@ export default class App extends Component {
+ {/* ============ End of Example ============ */}
Controlled Edit View @@ -992,7 +765,7 @@ export default class App extends Component {
- {example16} + {examples.example16}
@@ -1015,6 +788,7 @@ export default class App extends Component {
+ {/* ============ End of Example ============ */}
Save on Enter @@ -1029,7 +803,7 @@ export default class App extends Component {
- {example19} + {examples.example19}
@@ -1042,6 +816,7 @@ export default class App extends Component {
+ {/* ============ End of Example ============ */}