feat: allow any valid element for action buttons

BREAKING CHANGE: prop names for buttons are now changed. see `README.md`

README.md

@@ -59,9 +59,9 @@ validation|function|No||Pass your own validation function. takes one param -> `v
 validationMessage|string|No|Invalid Value| If validation fails this message will appear
 onValidationFail|function|No||Pass your own function to track when validation failed. See Examples page for the usage.
 onCancel|function|No||Function will be called when editing is cancelled.
-saveButtonText|string|No|`''`|Title for save button. Default is: ✓
-cancelButtonText|string|No|`''`|Title for cancel button. Default is: ✕
-editButtonText|string|No|`''`|Title for edit button. Default is: ✎
+saveButtonContent|node|No|`''`|Content for save button. Any valid element is allowed. Default is: ✓
+cancelButtonContent|node|No|`''`|Content for cancel button. Any valid element is allowed. Default is: ✕
+editButtonContent|node|No|`''`|Content for edit button. Any valid element is allowed. Default is: ✎
 saveButtonClassName|string|No||Custom class name for save button.
 cancelButtonClassName|string|No||Custom class name for cancel button.
 editButtonClassName|string|No||Custom class name for edit button.

example/src/App.js

@@ -41,9 +41,9 @@ const example2 = `<EdiText
 `;
 const example3 = `<EdiText
   type="textarea"
-  saveButtonText="Apply"
-  cancelButtonText="Cancel"
-  editButtonText="Edit"
+  saveButtonContent="Apply"
+  cancelButtonContent={<strong>Cancel</strong>}
+  editButtonContent="Edit"
   value="Why, Mr. Anderson? Why? Why do you persist?"
   onSave={this.onSave}
 />
@@ -150,12 +150,12 @@ const example10 = `<EdiText
 
 const example11 = `<EdiText
   type="text"
-  saveButtonText="Apply"
-  cancelButtonText="Cancel"
+  saveButtonContent="Apply"
+  cancelButtonContent="Cancel"
   saveButtonClassName="custom-save-button"
   editButtonClassName="custom-edit-button"
   cancelButtonClassName="custom-cancel-button"
-  editButtonText="Edit"
+  editButtonContent="Edit"
   value="Why, Mr. Anderson? Why? Why do you persist?"
   onSave={this.onSave}
 />`
@@ -310,10 +310,10 @@ export default class App extends Component {
             </div>
           </div>
           <div className="tile is-parent is-vertical is-10">
-            <div className="subtitle">Custom Button Titles</div>
+            <div className="subtitle">Custom Button Contents</div>
             <p className="content">
-              By default, Action buttons have no titles. They are just icons. But
-              you can append any text next to those icons. See the example below.
+              By default, Action buttons have no titles. They are just some simple icons. But
+              you can append <strong>any valid element</strong> next to those icons. See the example below.
             </p>
             <div className="columns">
               <div className="column is-half">
@@ -325,9 +325,9 @@ export default class App extends Component {
                 <div className="subtitle">Output</div>
                 <EdiText
                   type="text"
-                  saveButtonText="Apply"
-                  cancelButtonText="Cancel"
-                  editButtonText="Edit"
+                  saveButtonContent="Apply"
+                  cancelButtonContent={<strong>Cancel</strong>}
+                  editButtonContent="Edit"
                   value="Why, Mr. Anderson? Why? Why do you persist?"
                   onSave={this.onSave}
                 />
@@ -349,12 +349,12 @@ export default class App extends Component {
                 <div className="subtitle">Output</div>
                 <EdiText
                   type="text"
-                  saveButtonText="Apply"
-                  cancelButtonText="Cancel"
+                  saveButtonContent="Apply"
+                  cancelButtonContent="Cancel"
                   saveButtonClassName="custom-save-button"
                   editButtonClassName="custom-edit-button"
                   cancelButtonClassName="custom-cancel-button"
-                  editButtonText="Edit"
+                  editButtonContent="Edit"
                   value="Why, Mr. Anderson? Why? Why do you persist?"
                   onSave={this.onSave}
                 />

src/index.js

@@ -86,9 +86,9 @@ export default class EdiText extends Component {
   _renderEditingMode = () => {
     const {
       saveButtonClassName,
-      saveButtonText,
+      saveButtonContent,
       cancelButtonClassName,
-      cancelButtonText,
+      cancelButtonContent,
       onValidationFail,
       validationMessage,
       hint
@@ -117,15 +117,15 @@ export default class EdiText extends Component {
               className={saveButtonClass}
               onClick={this._onSave}
             >
-              {saveButtonText}
+              {saveButtonContent}
             </button>
             <button
               ref={this.cancelButton}
               type='button'
               className={cancelButtonClass}
               onClick={this._onCancel}
             >
-              {cancelButtonText}
+              {cancelButtonContent}
             </button>
           </div>
         </div>
@@ -142,7 +142,7 @@ export default class EdiText extends Component {
     const {
       viewProps,
       editButtonClassName,
-      editButtonText
+      editButtonContent
     } = this.props
     // calculate edit button classes
     const editButtonDefaultClasses = classnames(
@@ -160,7 +160,7 @@ export default class EdiText extends Component {
             className={editButtonClass}
             onClick={this._activateEditMode}
           >
-            {editButtonText}
+            {editButtonContent}
           </button>
         </div>
       </div>
@@ -182,9 +182,9 @@ EdiText.defaultProps = {
   validationMessage: 'Invalid Value',
   validation: value => true,
   onCancel: () => { },
-  cancelButtonText: '',
-  saveButtonText: '',
-  editButtonText: ''
+  cancelButtonContent: '',
+  saveButtonContent: '',
+  editButtonContent: ''
 }
 
 EdiText.propTypes = {
@@ -209,7 +209,7 @@ EdiText.propTypes = {
   editButtonClassName: PropTypes.string,
   cancelButtonClassName: PropTypes.string,
   // Custom Button Texts
-  cancelButtonText: PropTypes.string,
-  saveButtonText: PropTypes.string,
-  editButtonText: PropTypes.string
+  cancelButtonContent: PropTypes.any,
+  saveButtonContent: PropTypes.any,
+  editButtonContent: PropTypes.any
 }

src/test.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import EdiText from './'
-import {configure, mount} from 'enzyme'
+import { configure, mount } from 'enzyme'
 import Adapter from 'enzyme-adapter-react-16'
 
 configure({ adapter: new Adapter() })
@@ -38,7 +38,7 @@ test('props are working fine', () => {
   })
   expect(editext.props().type).toEqual('textarea')
   expect(editext.props().hint).toEqual('iamhint')
-  expect(editext.props().inputProps).toMatchObject({className: 'my-class-name', name: 'username'})
+  expect(editext.props().inputProps).toMatchObject({ className: 'my-class-name', name: 'username' })
 })
 
 test('text input initial value is same as prop value', () => {
@@ -233,21 +233,21 @@ test('custom button titles are set properly', () => {
   const editext = mount(
     <EdiText
       type='text'
-      saveButtonText='Apply'
-      cancelButtonText='Cancel'
-      editButtonText='Edit'
+      saveButtonContent='Apply'
+      cancelButtonContent='Cancel'
+      editButtonContent='Edit'
       value='Why, Mr. Anderson? Why? Why do you persist?'
       onSave={val => true}
     />
   )
   const editButton = editext.find(`button`).at(0)
-  expect(editButton.text()).toEqual(editext.props().editButtonText)
+  expect(editButton.text()).toEqual(editext.props().editButtonContent)
   editButton.simulate('click')
 
   const saveButton = editext.find(`button`).at(0)
 
   const cancelButton = editext.find(`button`).at(1)
 
-  expect(saveButton.text()).toEqual(editext.props().saveButtonText)
-  expect(cancelButton.text()).toEqual(editext.props().cancelButtonText)
+  expect(saveButton.text()).toEqual(editext.props().saveButtonContent)
+  expect(cancelButton.text()).toEqual(editext.props().cancelButtonContent)
 })