feat: add new prop showButtonsOnHover

See the examples page for more info.

README.md

@@ -75,6 +75,7 @@ buttonsAlign|string|No|`after`|Set this to `before` if you want to locate action
 editOnViewClick|bool|No|`false`|Set it to `true` if you want clicking on the view to activate the editor.
 editing|bool|No|`false`|Set it to `true` if you want the view state to be edit mode.
 onEditingStart|function|No||Function that will be called when the editing mode is active. See [here](https://alioguzhan.github.io/react-editext/#events)
+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)
 
 ## Browser Support
 
@@ -84,6 +85,10 @@ onEditingStart|function|No||Function that will be called when the editing mode i
 
 * `rows` prop for textarea has no effect in IE/Edge. You can set its `height` with some css.
 
+## To Do
+
+  * [ ] Write better and more tests
+
 ## Contributors ✨
 
 Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

example/src/App.js

@@ -35,18 +35,17 @@ const example2 = `<EdiText
   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}
-/>
+/>`
 
-`
 const example3 = `<EdiText
   type="textarea"
   saveButtonContent="Apply"
   cancelButtonContent={<strong>Cancel</strong>}
   editButtonContent="Edit"
   value="Why, Mr. Anderson? Why? Why do you persist?"
   onSave={this.onSave}
-/>
-`
+/>`
+
 const example4 = `<EdiText
   type="text"
   validationMessage="Please type at least 20 characters."
@@ -78,8 +77,7 @@ const example5 = `export default class App extends Component {
       />
     )
   }
-}
-`
+}`
 
 const example6 = `<EdiText
   type="text"
@@ -194,8 +192,8 @@ export default class App extends Component {
       />
     )
   }
-}
-`
+}`
+
 const example13Style = `
 .my-custom-view-wrapper {
   display: flex;
@@ -248,8 +246,8 @@ export default class App extends Component {
       />
     )
   }
-}
-`
+}`
+
 const example16 = `import React, { Component } from 'react'
 import EdiText from 'react-editext'
 
@@ -277,8 +275,8 @@ export default class App extends Component {
       </div>
     )
   }
-}
-`
+}`
+
 const example17 = `import React, { Component } from 'react'
 import EdiText from 'react-editext'
 
@@ -297,6 +295,12 @@ export default class App extends Component {
   }
 }`
 
+const example18 = `<EdiText
+  showButtonsOnHover
+  value="Why, Mr. Anderson? Why? Why do you persist?"
+  onSave={this.onSave}()
+/>`
+
 export default class App extends Component {
   state = { editing: false, logs: [] }
 
@@ -427,6 +431,33 @@ export default class App extends Component {
               </div>
             </div>
           </div>
+          <div className='tile is-parent is-vertical is-10' id='show-on-hover'>
+            <div className='subtitle'>
+              <a href='#show-on-hover'>Show Button on Hover</a>
+            </div>
+            <p className='content'>
+              Pass <code>showButtonsOnHover</code> prop if you want to display
+              the action buttons only when the text hovered by the user.
+            </p>
+            <div className='columns'>
+              <div className='column is-half'>
+                <SyntaxHighlighter language='javascript'>
+                  {example18}
+                </SyntaxHighlighter>
+              </div>
+              <div className='column'>
+                <div className='subtitle'>Output</div>
+                <div className='custom-wrapper' style={{ padding: 10 }}>
+                  <EdiText
+                    type='text'
+                    showButtonsOnHover
+                    value='What is real? How do you define real?'
+                    onSave={this.handleSave}
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
           <div
             className='tile is-parent is-vertical is-10'
             id='show-a-hint-message'

index.d.ts

@@ -110,6 +110,11 @@ declare module 'react-editext' {
          * `value` is the value of the input at the time when editing started.
          */
         onEditingStart?: (value:string) => any;
+        /**
+         * Set it to `true` if you want to display action buttons **only**
+         * when the text hovered by the user.
+         */
+        showButtonsOnHover?: boolean;
     }
 
     export default class EdiText extends React.Component<EdiTextProps, any> {

src/index.js

@@ -183,7 +183,8 @@ export default class EdiText extends Component {
       viewContainerClassName,
       hideIcons,
       buttonsAlign,
-      editOnViewClick
+      editOnViewClick,
+      showButtonsOnHover
     } = this.props
     // calculate edit button classes
     const editButtonDefaultClasses = classnames(
@@ -192,8 +193,10 @@ export default class EdiText extends Component {
       hideIcons && `${styles.Editext__hide_default_icons}`
     )
     const editButtonClass = editButtonClassName || editButtonDefaultClasses
-    const viewContainerClass =
-      viewContainerClassName || styles.Editext__view_container
+    const viewContainerClass = classnames(
+      viewContainerClassName || styles.Editext__view_container,
+      showButtonsOnHover && `${styles.Editext__buttons_showButtonsOnHover}`
+    )
     const buttonsContainerClass = classnames(
       styles.Editext__buttons_container,
       buttonsAlign === 'before' && `${styles.Editext__buttons_before_aligned}`,
@@ -291,5 +294,6 @@ EdiText.propTypes = {
   hideIcons: PropTypes.bool,
   buttonsAlign: PropTypes.oneOf(['after', 'before']),
   editOnViewClick: PropTypes.bool,
-  editing: PropTypes.bool
+  editing: PropTypes.bool,
+  showButtonsOnHover: PropTypes.bool
 }

src/index.spec.js

@@ -59,6 +59,7 @@ test('props are working fine', () => {
   expect(editext.props().value).toEqual('Wake up Neo')
   expect(editext.props().onSave).toBeInstanceOf(Function)
   expect(editext.props().hideIcons).toEqual(false)
+  expect(editext.props().showButtonsOnHover).toEqual(undefined)
   expect(editext.props().buttonsAlign).toEqual('after')
   // ---
   expect(editext.props().cancelButtonContent).toEqual('')
@@ -82,6 +83,7 @@ test('props are working fine', () => {
     },
     hideIcons: true,
     editing: true,
+    showButtonsOnHover: true,
     buttonsAlign: 'before',
     cancelButtonContent: 'revert',
     saveButtonContent: 'apply',
@@ -97,6 +99,7 @@ test('props are working fine', () => {
   expect(editext.props().hint).toEqual('iamhint')
   expect(editext.props().inputProps).toMatchObject({ className: 'my-class-name', name: 'username' })
   expect(editext.props().hideIcons).toEqual(true)
+  expect(editext.props().showButtonsOnHover).toEqual(true)
   expect(editext.props().buttonsAlign).toEqual('before')
   expect(editext.props().cancelButtonContent).toEqual('revert')
   expect(editext.props().saveButtonContent).toEqual('apply')

src/styles.css

@@ -34,6 +34,12 @@
 .Editext__buttons_container {
   display: flex;
 }
+.Editext__buttons_showButtonsOnHover .Editext__buttons_container {
+  visibility: hidden;
+}
+.Editext__buttons_showButtonsOnHover:hover .Editext__buttons_container {
+  visibility: visible;
+}
 .Editext__buttons_before_aligned {
   margin-right: 5px;
 }