input

Author: Sasha Kondrashov

index.d.ts

@@ -254,12 +254,7 @@ export {
   StrictImageGroupProps,
 } from './dist/commonjs/elements/Image/ImageGroup'
 
-export {
-  default as Input,
-  InputProps,
-  InputOnChangeData,
-  StrictInputProps,
-} from './dist/commonjs/elements/Input'
+export { default as Input, InputProps, StrictInputProps } from './dist/commonjs/elements/Input'
 
 export { default as Label, LabelProps, StrictLabelProps } from './dist/commonjs/elements/Label'
 export {

src/elements/Input/Input.d.ts

@@ -60,9 +60,10 @@ export interface StrictInputProps {
    * Called on change.
    *
    * @param {ChangeEvent} event - React's original SyntheticEvent.
-   * @param {object} data - All props and a proposed value.
+   * @param {object} props - All props.
+   * @param {string} value - The value of the input.
    */
-  onChange?: (event: React.ChangeEvent<HTMLInputElement>, data: InputOnChangeData) => void
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>, props: InputProps, value: string) => void
 
   /** An Input can vary in size. */
   size?: 'mini' | 'small' | 'large' | 'big' | 'huge' | 'massive'
@@ -77,10 +78,6 @@ export interface StrictInputProps {
   type?: string
 }
 
-export interface InputOnChangeData extends InputProps {
-  value: string
-}
-
 declare const Input: ForwardRefComponent<InputProps, HTMLInputElement>
 
 export default Input

src/elements/Input/Input.js

@@ -72,7 +72,7 @@ const Input = React.forwardRef(function (props, ref) {
   const handleChange = (e) => {
     const newValue = _.get(e, 'target.value')
 
-    _.invoke(props, 'onChange', e, { ...props, value: newValue })
+    _.invoke(props, 'onChange', e, props, newValue)
   }
 
   const partitionProps = () => {

src/elements/Input/index.d.ts

@@ -1 +1 @@
-export { default, InputProps, StrictInputProps, InputOnChangeData } from './Input'
+export { default, InputProps, StrictInputProps } from './Input'

test/specs/elements/Input/Input-test.js

@@ -170,7 +170,7 @@ describe('Input', () => {
   })
 
   describe('onChange', () => {
-    it('is called with (e, data) on change', () => {
+    it('is called on change', () => {
       const onChange = sandbox.spy()
       const e = { target: { value: 'name' } }
       const props = { 'data-foo': 'bar', onChange }
@@ -180,10 +180,10 @@ describe('Input', () => {
       wrapper.find('input').simulate('change', e)
 
       onChange.should.have.been.calledOnce()
-      onChange.should.have.been.calledWithMatch(e, { ...props, value: e.target.value })
+      onChange.should.have.been.calledWithMatch(e, props, e.target.value)
     })
 
-    it('is called with (e, data) on change when using children', () => {
+    it('is called on change when using children', () => {
       const onChange = sandbox.spy()
       const e = { target: { value: 'name' } }
       const props = { 'data-foo': 'bar', onChange }
@@ -197,7 +197,7 @@ describe('Input', () => {
       wrapper.find('input').simulate('change', e)
 
       onChange.should.have.been.calledOnce()
-      onChange.should.have.been.calledWithMatch(e, { ...props, value: e.target.value })
+      onChange.should.have.been.calledWithMatch(e, props, e.target.value)
     })
   })