Merge pull request #184 from alioguzhan/183-is-this-one-missing-or-something

feat: add `buttonsContainerProps`

Author: alioguzhan

.github/workflows/npmtest.yml

@@ -10,7 +10,7 @@ on:
 
 jobs:
   test:
-    name: Test on node ${{ matrix.node_version }} and ${{ matrix.os }}
+    name: Test on node ${{ matrix.node }} and ${{ matrix.os }}
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:

README.md

@@ -57,7 +57,6 @@ There is also a codesandbox template that you can fork and play with it:
 
 [![StackBlitz](https://img.shields.io/badge/StackBlitz-Edit-blue?style=flat-square&logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAABECAYAAAD+1gcLAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH5AINBw4X0bTGRQAABSxJREFUaN7VmVtsFFUYx//fmQW79bbd2QKpaIIaDcGoifFBEgMGqTTRRA01SgxE5Rbi7QG6S3lgo9J2twpeotxEQlCigLdoQwJ4ARN9QB9MRCNRDBdRzE7LJbTSmTl/H4BYStmd2Z3tDOdt5lzml/9833fO9x0gYi2xgom6Tt5aapyKEnRDlrVGPzfGT+G3SwZ87HLGT8f5uYD7jmSl99IAX80RfTY3A5wMqDVepoQPnqVKHtMbAN4PyJeFtPwafXBSknG9UoDHAIDQq7xODRU8mdc5Aeaeffy7O2F8GnnwZM5dKsCic88CrMU8sSMNbubdZwTIDnjlOoZa52eNYQc3c84sEK+d/1a6ji2UA5EFN3POw4C8fcYy/m+a3p1y2MGTOXsqIJsAxAZ1Hei53tgeSfBkBycK1McALrswJGIVHhE3cuD1ed4uorsAXD5Ed7/hqvXlrFtV8LpO3qKpdwJIDLn/AB/+s0SORgp8VJ43KK23AzAvNsagWlXu+lKV6LGc14itvyEwrsiwX6wWNQEijITiY9pYD1vvKAENAG+VC40hQlNlNt3Bq22lt4EYX2Jor6PVe5V8KzDFG7KsFXE/A3GHB/vcdHyx9IQPnuXI/ji3CuRuT+N1+U4ZHPhmGqk43yXY5C0ccE9hsfwQLjgp5n69hmCz9ylYGcRPrgg8ldfLIXjSx5RjNX3GB6GCm3m3ncDz/v4QNnjJ4KsGbubdVhAZ35YFtTaoKOY7jps5dwGIZf73aH7dnZa9QYH72vLNDmcmRNaX86eEnGvT2BoIdA0o3pV2HgRkS9C7bXnRDGlPypmd9r2AvB8FaAFetDJGvqTiyU7eJWeOp1cgfOo3rRbj6ZJRJdHB20TrrkhAAxutXvVsSedMtfEmGno3gNHhM8snVp80IytO0The18HraOgdkYCm7KyLy6MDoYdUfNQyjnZjeheAm8NXmt/FlDH16CI5dUHaN/DhypeZUqK/AkomAsMQ8fCjq41GKy0nim75ydd51UjX3QZgQgQccV/MUfcVSzYM4Mw1hnPa7QJkYgSgD2qqe6xWOVL8kLWaI3ptbgFkUgSgjwpUY09GDpY8ZJnH9UsExhPYH8CuVgtgTJlzC5pqipXxdpUSaF3FzLkdANJleOIJETWlkJbvh78glOVIM64PARjlc2afiGoqtMiuUMoTqRp3ehnQtpDNfqEDBdeC+T6nuELOLGRiXVVPJC5u2xwP6L0+1qOQ8wqZWNmpXECK6wV+RBCipRLoQBRvyLL2dFwfBlDnTWos7W4xXgi3IATg31p3hldoEG8EAR0IuEC8OuUGK62eCyoYVARutvNOL9VZQD6yxqmnKqmHB6u46PkejHp7XVxmlHOzVhXnTKxgwujXhzH0bdo56m9jymgcKhEITXFl61lFoYV7BMa0akCjkjqJEHOKdP/U7xhNJ1vlZLXOv2Upnmq3JxfJlH4XRzWebBWrmgf38hRXav5F4vSfjqGmHl8if1W/NuSzjWljvW3oQxh0Ly9AQRtqUvdC+Xk4UiXfpmLH9JzB0CBOQKtpwwXtHzxLJcTsQW97FdQDQVxIVc3GUzVuEyEDb4z7NTndysju4c6qfSlOOc8pXQof78nEtoVRDvDsnMlXeK04+o+ztRgSnNOdjq1DSM2z4uLoeecKSCQWhgntXfEsY2ZcHwDQAMESq8VoC7ty5EnxZK37EIAGAV6NArT3c3def2Hm3HdASlSYSipe384bAR6x+tTsIBOBqoMTzlirVz2BrOgoWcF/mizikfkwKiQAAAAASUVORK5CYII=)](https://stackblitz.com/edit/react-editext?file=src%2FApp.tsx)
 
-
 You can customize almost everything based on your needs. Please navigate to [Props](#Props) section. I mean, just scroll down.
 
 ## Props
@@ -71,6 +70,7 @@ You can customize almost everything based on your needs. Please navigate to [Pro
 | inputProps             | object              | No       |               | Props to be passed to input element. Any kind of valid DOM attributes are welcome.                                                                                                                           |
 | viewProps              | object              | No       |               | Props to be passed to div element that shows the text. You can specify your own `styles` or `className`                                                                                                      |
 | containerProps         | object              | No       |               | Props to be passed to div element that is container for all elements. You can use this if you want to style or select the whole container.                                                                   |
+| buttonsContainerProps  | object              | No       |               | Props to be passed to div element that contains action buttons. You can use this if you want to style or select the buttons container.                                                                       |
 | editButtonProps        | object              | No       |               | Props to be passed to edit button.                                                                                                                                                                           |
 | validation             | function            | No       |               | Pass your own validation function. takes one param -> `value`. It must return `true` or `false`                                                                                                              |
 | validationMessage      | node                | No       | Invalid Value | If validation fails this message will appear                                                                                                                                                                 |

dist/index.d.ts

@@ -27,6 +27,11 @@ export interface EdiTextProps {
      * You can use this if you want to style or select the whole container.
      */
     containerProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+    /**
+     * Props to be passed to div element that is container for buttons.
+     * You can use this if you want to style or select the buttons container.
+     */
+    buttonsContainerProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
     /**
      * Value of the content [in view mode] and input [in edit mode]
      */

dist/index.es.js

@@ -468,7 +468,8 @@ export default function App() {
             </a>
           </div>
           <p className="content">
-            You can use your own classes for main, edit and view containers.
+            You can use your own classes for main, edit, buttons, and view
+            containers.
           </p>
           <p className="content">
             <code>viewContainerClassName</code> and{' '}
@@ -496,6 +497,9 @@ export default function App() {
                 inputProps={{
                   rows: 5
                 }}
+                buttonsContainerProps={{
+                  className: 'my-custom-buttons-wrapper'
+                }}
                 saveButtonContent="Apply"
                 cancelButtonContent={<strong>Cancel</strong>}
                 editButtonContent="Edit This Quote"