Merge pull request #61 from catho/ISSUE-58

[ISSUE-58] - Input: Implements a callback on cancel icon

components/Form/Form.unit.test.jsx

@@ -6,6 +6,10 @@ import Form from './Form';
 import Input from '../Input';
 import Button from '../Button';
 
+jest.mock('react-text-mask', () => props => (
+  <input type="text" {...{ ...props }} />
+));
+
 const onValidSubmitCallback = jest.fn();
 const onSubmitCallback = jest.fn();
 const mockEvent = { preventDefault: jest.fn() };

components/Form/__snapshots__/Form.unit.test.jsx.snap

@@ -16,56 +16,11 @@ exports[`Form component  should match the snapshot 1`] = `
   font-weight: bold;
 }
 
-.c3 {
-  box-sizing: border-box;
-  margin-top: 8px;
-  padding-right: 42px;
-  background-color: #FFFFFF;
-  border-radius: 4px;
-  border: 1.5px solid #999999;
-  box-sizing: border-box;
-  color: #4c4c4c;
-  font-size: initial;
-  height: 44px;
-  min-height: 44px;
-  -webkit-letter-spacing: 0.2px;
-  -moz-letter-spacing: 0.2px;
-  -ms-letter-spacing: 0.2px;
-  letter-spacing: 0.2px;
-  outline: none;
-  padding: 10px 12px;
-  -webkit-transition: all 0.2s ease-in-out;
-  transition: all 0.2s ease-in-out;
-  width: 100%;
-}
-
-.c3:hover,
-.c3:focus {
-  border-color: #1355d0;
-  box-shadow: 0 2px 6px 0 rgba(19,85,208,0.5);
-}
-
-.c3[disabled] {
-  background-color: #f2f2f2;
-  border-color: #999999;
-  box-shadow: none;
-  color: #999999;
-  cursor: not-allowed;
-}
-
-.c3::-webkit-calendar-picker-indicator {
-  display: none;
-}
-
-.c3:-webkit-autofill {
-  box-shadow: 0 0 0px 1000px #e5edfc inset;
-}
-
 .c2 {
   position: relative;
 }
 
-.c4 {
+.c3 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -98,32 +53,32 @@ exports[`Form component  should match the snapshot 1`] = `
   border-radius: 4px;
 }
 
-.c4 *:nth-child(2) {
+.c3 *:nth-child(2) {
   margin-left: 5px;
 }
 
-.c4:hover {
+.c3:hover {
   box-shadow: 0 2px 4px 0 #cccccc;
   background-color: #002f7b;
   border-color: #002f7b;
   color: #FFFFFF;
 }
 
-.c4:focus {
+.c3:focus {
   box-shadow: 0 2px 6px 0 rgba(19,85,208,0.5);
   background-color: #1355d0;
   border-color: #1355d0;
   color: #FFFFFF;
 }
 
-.c4:active {
+.c3:active {
   box-shadow: 0 2px 4px 0 #4c4c4c;
   background-color: #002f7b;
   border-color: #002f7b;
   color: #FFFFFF;
 }
 
-.c4 .c5 {
+.c3 .c4 {
   font-size: 24px;
 }
 
@@ -145,15 +100,16 @@ exports[`Form component  should match the snapshot 1`] = `
       className="c2"
     >
       <input
-        className="c3"
-        defaultValue=""
         id="input-0"
+        mask={[Function]}
         name="required"
-        onBlur={[Function]}
         onChange={[Function]}
         placeholder=""
+        render={[Function]}
         required={false}
         type="text"
+        validate={[Function]}
+        value=""
       />
       
     </div>
@@ -174,15 +130,16 @@ exports[`Form component  should match the snapshot 1`] = `
       className="c2"
     >
       <input
-        className="c3"
-        defaultValue=""
         id="input-1"
+        mask={[Function]}
         name="cpf"
-        onBlur={[Function]}
         onChange={[Function]}
         placeholder=""
+        render={[Function]}
         required={false}
         type="text"
+        validate={[Function]}
+        value=""
       />
       
     </div>
@@ -203,15 +160,16 @@ exports[`Form component  should match the snapshot 1`] = `
       className="c2"
     >
       <input
-        className="c3"
-        defaultValue=""
         id="input-2"
+        mask={[Function]}
         name="cep"
-        onBlur={[Function]}
         onChange={[Function]}
         placeholder=""
+        render={[Function]}
         required={false}
         type="text"
+        validate={[Function]}
+        value=""
       />
       
     </div>
@@ -232,15 +190,16 @@ exports[`Form component  should match the snapshot 1`] = `
       className="c2"
     >
       <input
-        className="c3"
-        defaultValue=""
         id="input-3"
+        mask={[Function]}
         name="birthday"
-        onBlur={[Function]}
         onChange={[Function]}
         placeholder=""
+        render={[Function]}
         required={false}
         type="text"
+        validate={[Function]}
+        value=""
       />
       
     </div>
@@ -261,15 +220,16 @@ exports[`Form component  should match the snapshot 1`] = `
       className="c2"
     >
       <input
-        className="c3"
-        defaultValue=""
         id="input-4"
+        mask={[Function]}
         name="email"
-        onBlur={[Function]}
         onChange={[Function]}
         placeholder=""
+        render={[Function]}
         required={false}
         type="text"
+        validate={[Function]}
+        value=""
       />
       
     </div>
@@ -290,16 +250,17 @@ exports[`Form component  should match the snapshot 1`] = `
       className="c2"
     >
       <input
-        className="c3"
-        defaultValue=""
         id="input-5"
+        mask={[Function]}
         minLength="8"
         name="address"
-        onBlur={[Function]}
         onChange={[Function]}
         placeholder=""
+        render={[Function]}
         required={false}
         type="text"
+        validate={[Function]}
+        value=""
       />
       
     </div>
@@ -320,24 +281,25 @@ exports[`Form component  should match the snapshot 1`] = `
       className="c2"
     >
       <input
-        className="c3"
-        defaultValue=""
         id="input-6"
+        mask={[Function]}
         maxLength="3"
         name="country"
-        onBlur={[Function]}
         onChange={[Function]}
         placeholder=""
+        render={[Function]}
         required={false}
         type="text"
+        validate={[Function]}
+        value=""
       />
       
     </div>
     
     
   </div>
   <button
-    className="c4"
+    className="c3"
     disabled={false}
     onClick={[Function]}
     size="medium"

components/Input/Input.jsx

@@ -146,6 +146,7 @@ class Input extends React.Component {
       helperText,
       required,
       value,
+      onClean,
       ...rest
     } = this.props;
     const { type: typeState } = this.state;
@@ -192,7 +193,11 @@ class Input extends React.Component {
             />
           )}
           {!!value && !error && (
-            <InputIcon name="cancel" description={descriptionLabel} />
+            <InputIcon
+              name="cancel"
+              description={descriptionLabel}
+              onClick={onClean}
+            />
           )}
         </InputWrapper>
         {helperText && <HelperText>{helperText}</HelperText>}
@@ -208,13 +213,14 @@ Input.defaultProps = {
   error: '',
   id: '',
   label: '',
-  mask: false,
+  mask: val => Array(val.length).fill(/./),
   type: 'text',
   value: '',
   helperText: '',
   descriptionLabel: '',
   required: false,
   placeholder: '',
+  onClean: () => {},
 };
 
 Input.propTypes = {
@@ -248,6 +254,7 @@ Input.propTypes = {
     PropTypes.func,
     PropTypes.string,
   ]),
+  onClean: PropTypes.func,
 };
 
 Input.displayName = 'Input';

components/Input/Input.mask.unit.test.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import Input from './Input';
+
+jest.mock('react-text-mask', () => props => (
+  <input type="text" {...{ ...props }} />
+));
+
+describe('Input component', () => {
+  it('should match snapshots', () => {
+    const INPUTS = [
+      <Input />,
+      <Input value="foo" />,
+      <Input label="Text label" />,
+      <Input error="Error message" />,
+      <Input required />,
+      <Input type="search" />,
+      <Input disabled />,
+      <Input helperText="this is a helper text" />,
+      <Input descriptionLabel="this is a description label" />,
+      <Input descriptionLabel="this is a description label" type="search" />,
+      <Input placeholder="this input has a placeholder" />,
+      <Input.CEP />,
+      <Input.CNPJ />,
+      <Input.CPF />,
+      <Input.Date />,
+      <Input.Phone />,
+      <Input.Password />,
+    ];
+
+    INPUTS.forEach(input =>
+      expect(renderer.create(input).toJSON()).toMatchSnapshot(),
+    );
+  });
+});

components/Input/Input.unit.test.jsx

@@ -1,31 +1,10 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
 import { shallow, mount } from 'enzyme';
 import MaskedInput from 'react-text-mask';
 import Input from './Input';
 import masks from '../shared/masks';
 
 describe('Input component', () => {
-  it('should match snapshots', () => {
-    const INPUTS = [
-      <Input />,
-      <Input value="foo" />,
-      <Input label="Text label" />,
-      <Input error="Error message" />,
-      <Input required />,
-      <Input type="search" />,
-      <Input disabled />,
-      <Input helperText="this is a helper text" />,
-      <Input descriptionLabel="this is a description label" />,
-      <Input descriptionLabel="this is a description label" type="search" />,
-      <Input placeholder="this input has a placeholder" />,
-    ];
-
-    INPUTS.forEach(input =>
-      expect(renderer.create(input).toJSON()).toMatchSnapshot(),
-    );
-  });
-
   it('should has a required signal when "required" prop is set', () => {
     const component = shallow(
       <Input value="foo" label="label of input" required />,
@@ -130,6 +109,14 @@ describe('Input component', () => {
     expect(value).toBe('999.999.999-99');
   });
 
+  it('should call onClean callback when prop is setted', () => {
+    const onCleanMock = jest.fn();
+    const component = shallow(<Input value="foo" onClean={onCleanMock} />);
+    const inputIcon = component.find('InputIcon');
+    inputIcon.simulate('click');
+    expect(onCleanMock).toHaveBeenCalled();
+  });
+
   describe('with a label', () => {
     it('should match label "htmlFor" label param with "id" input param', () => {
       const id = 'input-id';