feat: add buttonsAlign prop to let users change the buttons location

Author: alioguzhan

README.md

@@ -71,6 +71,7 @@ viewContainerClassName|string|No||Custom class name for the container in `view`
 editContainerClassName|string|No||Custom class name for the container in edit mode. Will be set to `viewContainerClassName` if you set it and omit this. See [here](https://alioguzhan.github.io/react-editext/#custom-classes-for-containers)
 mainContainerClassName|string|No||Custom class name for the top-level main container. See [here](https://alioguzhan.github.io/react-editext/#custom-classes-for-containers)
 hideIcons|bool|No|`false`|Set it to `true` if you don't want to see default icons on action buttons. See Examples page for more details.
+buttonsAlign|string|No|`after`|Set this to `before` if you want to locate action buttons before the input instead of after it. See [here](https://alioguzhan.github.io/react-editext/#change-buttons-location).
 
 ## Browser Support
 

example/src/App.js

@@ -211,6 +211,26 @@ const example13Style = `
   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)
+  }
+
+  render () {
+    return (
+      <EdiText
+        type='text'
+        buttonsAlign='before'
+        value='What is real? How do you define real?'
+        onSave={this.onSave}
+      />
+    )
+  }
+}
+`
 
 export default class App extends Component {
   onSave = val => {
@@ -651,6 +671,37 @@ export default class App extends Component {
               </div>
             </div>
           </div>
+          <div
+            className='tile is-parent is-vertical is-10'
+            id='change-buttons-location'
+          >
+            <div className='subtitle'>
+              <a href='#change-buttons-location'>
+                Change the location of action buttons
+              </a>
+            </div>
+            <p className='content'>
+              You may want locate action buttons before the input element instead of after it.
+              Just pass the <code>buttonsAlign='before'</code> prop. You should be fine. Default value is already `after`.
+              So don't pass anything if you don't want to change this.
+            </p>
+            <div className='columns'>
+              <div className='column is-half'>
+                <SyntaxHighlighter language='javascript' style={light}>
+                  {example14}
+                </SyntaxHighlighter>
+              </div>
+              <div className='column'>
+                <div className='subtitle'>Output</div>
+                <EdiText
+                  type='text'
+                  buttonsAlign='before'
+                  value='What is real? How do you define real?'
+                  onSave={this.onSave}
+                />
+              </div>
+            </div>
+          </div>
           <div className='tile is-parent is-vertical is-10' id='validation'>
             <div className='subtitle'>
               <a href='#validation'>Validate the Content</a>

index.d.ts

@@ -2,6 +2,7 @@ declare module 'react-editext' {
     import * as React from 'react';
 
     export type EdiTextType = "text" | "textarea" | "email" | "number" | "date" | "datetime-local" | "time" | "month" | "url" | "week" | "tel";
+    export type ButtonsAlignment = "after" | "before";
 
     export interface EdiTextProps {
         /**
@@ -39,7 +40,7 @@ declare module 'react-editext' {
         onValidationFail?: (...args: string[]) => any;
         /**
          * Input type. Possible options are:
-         * `text`, `number`, `email`, `textarea`, `date`, 
+         * `text`, `number`, `email`, `textarea`, `date`,
          * `datetime-local`, `time`, `month`, `url`, `week`, `tel`
          */
         type: EdiTextType;
@@ -73,15 +74,18 @@ declare module 'react-editext' {
          * Content for EDIT button. Any valid element and node are allowed. */
         editButtonContent?: any;
         /**
-         * Set it to `true` if you don't want to see default icons 
+         * Set it to `true` if you don't want to see default icons
         * on action buttons.See Examples page for more details.
         */
         hideIcons?: boolean;
-    }
+        /**
+         * Decides whether buttons will be located _BEFORE_ or _AFTER_
+         * the input element. Default is `after`.
+        */
+        buttonsAlign?: ButtonsAlignment;
+        }
 
     export default class EdiText extends React.Component<EdiTextProps, any> {
         render(): JSX.Element;
-
     }
-
 }

src/index.js

@@ -96,7 +96,8 @@ export default class EdiText extends Component {
       onValidationFail,
       validationMessage,
       hint,
-      hideIcons
+      hideIcons,
+      buttonsAlign
     } = this.props
     const inputElem = this._renderInput()
     // calculate save button classes
@@ -117,11 +118,16 @@ export default class EdiText extends Component {
     let editContainerClass = styles.Editext__editing_container
     if (editContainerClassName) editContainerClass = editContainerClassName
     if (viewContainerClassName) editContainerClass = viewContainerClassName
+    const buttonsContainerClass = classnames(
+      styles.Editext__buttons_container,
+      buttonsAlign === 'before' && `${styles.Editext__buttons_before_aligned}`,
+      buttonsAlign === 'after' && `${styles.Editext__buttons_after_aligned}`
+    )
     return (
       <div>
         <div className={editContainerClass}>
-          {inputElem}
-          <div className={styles.Editext__buttons_container}>
+          { buttonsAlign === 'after' && inputElem }
+          <div className={buttonsContainerClass}>
             <button
               ref={this.saveButton}
               type='button'
@@ -139,6 +145,7 @@ export default class EdiText extends Component {
               {cancelButtonContent}
             </button>
           </div>
+          { buttonsAlign === 'before' && inputElem }
         </div>
         {!this.state.valid && !onValidationFail && (
           <div className={styles.Editext__validation_message}>
@@ -155,7 +162,8 @@ export default class EdiText extends Component {
       editButtonClassName,
       editButtonContent,
       viewContainerClassName,
-      hideIcons
+      hideIcons,
+      buttonsAlign
     } = this.props
     // calculate edit button classes
     const editButtonDefaultClasses = classnames(
@@ -166,10 +174,15 @@ export default class EdiText extends Component {
     const editButtonClass = editButtonClassName || editButtonDefaultClasses
     const viewContainerClass =
       viewContainerClassName || styles.Editext__view_container
+    const buttonsContainerClass = classnames(
+      styles.Editext__buttons_container,
+      buttonsAlign === 'before' && `${styles.Editext__buttons_before_aligned}`,
+      buttonsAlign === 'after' && `${styles.Editext__buttons_after_aligned}`
+    )
     return (
       <div className={viewContainerClass}>
-        <div {...viewProps}>{this.state.value}</div>
-        <div className={styles.Editext__buttons_container}>
+        { buttonsAlign === 'after' && <div {...viewProps}>{this.state.value}</div> }
+        <div className={buttonsContainerClass}>
           <button
             ref={this.editButton}
             type='button'
@@ -179,6 +192,7 @@ export default class EdiText extends Component {
             {editButtonContent}
           </button>
         </div>
+        { buttonsAlign === 'before' && <div {...viewProps}>{this.state.value}</div> }
       </div>
     )
   }
@@ -201,7 +215,8 @@ EdiText.defaultProps = {
   cancelButtonContent: '',
   saveButtonContent: '',
   editButtonContent: '',
-  hideIcons: false
+  hideIcons: false,
+  buttonsAlign: 'after'
 }
 
 EdiText.propTypes = {
@@ -239,5 +254,6 @@ EdiText.propTypes = {
   cancelButtonContent: PropTypes.any,
   saveButtonContent: PropTypes.any,
   editButtonContent: PropTypes.any,
-  hideIcons: PropTypes.bool
+  hideIcons: PropTypes.bool,
+  buttonsAlign: PropTypes.oneOf(['after', 'before'])
 }

src/styles.css

@@ -33,6 +33,11 @@
 }
 .Editext__buttons_container {
   display: flex;
+}
+.Editext__buttons_before_aligned {
+  margin-right: 5px;
+}
+.Editext__buttons_after_aligned {
   margin-left: 5px;
 }
 .Editext__validation_message {