feat: make #input submit button more flexible and reusable from outside

dnbexperience · May 5, 2019 · c210e53 · c210e53
1 parent 645d95e
commit c210e53
Show file tree

Hide file tree

Showing 4 changed files with 324 additions and 243 deletions.
diff --git a/...s/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap b/...s/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap
@@ -49,6 +49,7 @@ exports[`InputMasked component have to match type="text" snapshot 1`] = `
     status={null}
     status_animation={null}
     status_state="error"
+    submitButton={null}
     submit_button_icon="search"
     submit_button_title={null}
     submit_button_variant="secondary"
@@ -302,6 +303,13 @@ exports[`InputMasked scss have to match snapshot 1`] = `
     @supports not (-ms-ime-align: auto) {
       .dnb-button__text {
         transform: translateY(calc(1px - var(--button-border-width))); } }
+  .dnb-button__bounding {
+    position: absolute;
+    background-color: transparent;
+    width: var(--button-width);
+    height: var(--button-height);
+    border-radius: var(--button-border-radius);
+    transform: scale(1.2); }
   .dnb-button--size-small {
     width: var(--button-width--small);
     height: var(--button-height--small);

diff --git a/packages/dnb-ui-lib/src/components/input/Input.js b/packages/dnb-ui-lib/src/components/input/Input.js
@@ -63,6 +63,7 @@ export const propTypes = {
     PropTypes.node,
     PropTypes.func
   ]),
+  submitButton: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
 
   // Web Component props
   custom_element: PropTypes.object,
@@ -103,6 +104,7 @@ export const defaultProps = {
   className: null,
   inputElement: null,
   children: null,
+  submitButton: null,
 
   // Web Component props
   custom_element: null,
@@ -207,6 +209,7 @@ export default class Input extends PureComponent {
       submit_button_variant,
       submit_button_icon,
       on_submit,
+      submitButton,
       autocomplete,
       readOnly,
       class: _className,
@@ -224,7 +227,7 @@ export default class Input extends PureComponent {
 
     const id = this._id
     const showStatus = status && status !== 'error'
-    const hasSubmitButton = on_submit || type === 'search'
+    const hasSubmitButton = on_submit || submitButton || type === 'search'
 
     const classes = classnames(
       'dnb-input',
@@ -321,15 +324,18 @@ export default class Input extends PureComponent {
             )}
           </span>
 
-          {hasSubmitButton && (
-            <Submit
-              {...this.props}
-              value={inputParams.value}
-              icon={submit_button_icon}
-              title={submit_button_title}
-              variant={submit_button_variant}
-            />
-          )}
+          {hasSubmitButton &&
+            (submitButton ? (
+              submitButton
+            ) : (
+              <SubmitButton
+                {...this.props}
+                value={inputParams.value}
+                icon={submit_button_icon}
+                title={submit_button_title}
+                variant={submit_button_variant}
+              />
+            ))}
 
           {showStatus && (
             <FormStatus
@@ -354,9 +360,9 @@ export default class Input extends PureComponent {
   }
 }
 
-class Submit extends PureComponent {
+class SubmitButton extends PureComponent {
   static propTypes = {
-    value: PropTypes.string.isRequired,
+    value: PropTypes.string,
     title: PropTypes.string,
     variant: ButtonPropTypes.variant,
     disabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
@@ -367,29 +373,20 @@ class Submit extends PureComponent {
     ]),
     icon_size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
-    // React props
-    onSubmit: PropTypes.func,
-    onSubmitFocus: PropTypes.func,
-    onSubmitBlur: PropTypes.func,
-
     // Web Component props
     on_submit: PropTypes.func,
     on_submit_focus: PropTypes.func,
     on_submit_blur: PropTypes.func
   }
 
   static defaultProps = {
+    value: null,
     title: null,
     disabled: false,
     variant: 'secondary',
     icon: 'search',
     icon_size: 'medium',
 
-    // React props
-    onSubmit: null,
-    onSubmitFocus: null,
-    onSubmitBlur: null,
-
     // Web Component props
     on_submit: null,
     on_submit_focus: null,
@@ -447,3 +444,5 @@ class Submit extends PureComponent {
     )
   }
 }
+
+export { SubmitButton }
diff --git a/packages/dnb-ui-lib/src/components/input/__tests__/Input.test.js b/packages/dnb-ui-lib/src/components/input/__tests__/Input.test.js
@@ -20,6 +20,7 @@ import dnb_input_theme_ui from '../style/themes/dnb-input-theme-ui.scss' // esli
 
 const props = {
   ...fakeProps(require.resolve('../Input'), {
+    all: true,
     optional: true
   }),
   inputElement: null,
@@ -114,12 +115,12 @@ describe('Input component', () => {
       </Component>
     )
 
-    const Button = Comp.find('Submit').find('button')
+    const Button = Comp.find('SubmitButton').find('button')
     expect(Button.exists()).toBe(true)
 
     Button.simulate('focus')
     expect(
-      Comp.find('Submit')
+      Comp.find('SubmitButton')
         .find('.dnb-input__submit-button')
         .prop('data-input-state')
     ).toBe('focus')