diff --git a/index.d.ts b/index.d.ts index e7535b23ea..92ccbb53d5 100644 --- a/index.d.ts +++ b/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 { @@ -431,7 +426,6 @@ export { export { default as Dropdown, DropdownProps, - DropdownOnSearchChangeData, StrictDropdownProps, } from './dist/commonjs/modules/Dropdown' export { @@ -514,12 +508,7 @@ export { StrictRatingIconProps, } from './dist/commonjs/modules/Rating/RatingIcon' -export { - default as Search, - SearchProps, - SearchResultData, - StrictSearchProps, -} from './dist/commonjs/modules/Search' +export { default as Search, SearchProps, StrictSearchProps } from './dist/commonjs/modules/Search' export { default as SearchCategory, SearchCategoryProps, diff --git a/src/addons/Pagination/Pagination.d.ts b/src/addons/Pagination/Pagination.d.ts index 1e956d6640..b9d1b07ffa 100644 --- a/src/addons/Pagination/Pagination.d.ts +++ b/src/addons/Pagination/Pagination.d.ts @@ -45,9 +45,14 @@ export interface StrictPaginationProps { * Called on change of an active page. * * @param {SyntheticEvent} event - React's original SyntheticEvent. - * @param {object} data - All props. + * @param {object} props - All props. + * @param {number} activePage - Index of the newly active page. */ - onPageChange?: (event: React.MouseEvent, data: PaginationProps) => void + onPageChange?: ( + event: React.MouseEvent, + props: PaginationProps, + activePage: number, + ) => void /** Number of always visible pages before and after the current one. */ siblingRange?: number | string diff --git a/src/addons/Pagination/Pagination.js b/src/addons/Pagination/Pagination.js index dc5d2a1269..b4b51ffd01 100644 --- a/src/addons/Pagination/Pagination.js +++ b/src/addons/Pagination/Pagination.js @@ -55,7 +55,7 @@ const Pagination = React.forwardRef(function (props, ref) { } setActivePage(nextActivePage) - _.invoke(props, 'onPageChange', e, { ...props, activePage: nextActivePage }) + _.invoke(props, 'onPageChange', e, props, nextActivePage) } const handleItemOverrides = (active, type, value) => (predefinedProps) => ({ diff --git a/src/addons/Portal/Portal.d.ts b/src/addons/Portal/Portal.d.ts index 09d5b75bc4..6118b06a7e 100644 --- a/src/addons/Portal/Portal.d.ts +++ b/src/addons/Portal/Portal.d.ts @@ -50,33 +50,35 @@ export interface StrictPortalProps { * Called when a close event happens * * @param {SyntheticEvent} event - React's original SyntheticEvent. - * @param {object} data - All props. + * @param {object} props - All props. + * @param {boolean} open - Whether or not the portal is displayed. */ - onClose?: (event: React.MouseEvent, data: PortalProps) => void + onClose?: (event: React.MouseEvent, props: PortalProps, open: boolean) => void /** * Called when the portal is mounted on the DOM * * @param {null} - * @param {object} data - All props. + * @param {object} props - All props. */ - onMount?: (nothing: null, data: PortalProps) => void + onMount?: (nothing: null, props: PortalProps) => void /** * Called when an open event happens * * @param {SyntheticEvent} event - React's original SyntheticEvent. - * @param {object} data - All props. + * @param {object} props - All props. + * @param {boolean} open - Whether or not the portal is displayed. */ - onOpen?: (event: React.MouseEvent, data: PortalProps) => void + onOpen?: (event: React.MouseEvent, props: PortalProps, open: boolean) => void /** * Called when the portal is unmounted from the DOM * * @param {null} - * @param {object} data - All props. + * @param {object} props - All props. */ - onUnmount?: (nothing: null, data: PortalProps) => void + onUnmount?: (nothing: null, props: PortalProps) => void /** Controls whether or not the portal is displayed. */ open?: boolean diff --git a/src/addons/Portal/Portal.js b/src/addons/Portal/Portal.js index 4ad57da0cd..0b4738dcde 100644 --- a/src/addons/Portal/Portal.js +++ b/src/addons/Portal/Portal.js @@ -61,7 +61,7 @@ function Portal(props) { debug('open()') setOpen(true) - _.invoke(props, 'onOpen', e, { ...props, open: true }) + _.invoke(props, 'onOpen', e, props, true) } const openPortalWithTimeout = (e, delay) => { @@ -77,7 +77,7 @@ function Portal(props) { debug('close()') setOpen(false) - _.invoke(props, 'onClose', e, { ...props, open: false }) + _.invoke(props, 'onClose', e, props, false) } const closePortalWithTimeout = (e, delay) => { diff --git a/src/addons/TextArea/TextArea.d.ts b/src/addons/TextArea/TextArea.d.ts index 09e05d352a..f65cee4140 100644 --- a/src/addons/TextArea/TextArea.d.ts +++ b/src/addons/TextArea/TextArea.d.ts @@ -13,17 +13,27 @@ export interface StrictTextAreaProps { * Called on change. * * @param {SyntheticEvent} event - The React SyntheticEvent object - * @param {object} data - All props and the event value. + * @param {object} props - All props. + * @param {string} value - The value of the textarea. */ - onChange?: (event: React.ChangeEvent, data: TextAreaProps) => void + onChange?: ( + event: React.ChangeEvent, + props: TextAreaProps, + value: string, + ) => void /** * Called on input. * * @param {SyntheticEvent} event - The React SyntheticEvent object - * @param {object} data - All props and the event value. + * @param {object} props - All props. + * @param {string} value - The value of the textarea. */ - onInput?: (event: React.FormEvent, data: TextAreaProps) => void + onInput?: ( + event: React.FormEvent, + props: TextAreaProps, + value: string, + ) => void /** Indicates row count for a TextArea. */ rows?: number | string diff --git a/src/addons/TextArea/TextArea.js b/src/addons/TextArea/TextArea.js index eacaab263a..e0fae17706 100644 --- a/src/addons/TextArea/TextArea.js +++ b/src/addons/TextArea/TextArea.js @@ -15,13 +15,13 @@ const TextArea = 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 handleInput = (e) => { const newValue = _.get(e, 'target.value') - _.invoke(props, 'onInput', e, { ...props, value: newValue }) + _.invoke(props, 'onInput', e, props, newValue) } const rest = getUnhandledProps(TextArea, props) diff --git a/src/addons/TransitionablePortal/TransitionablePortal.d.ts b/src/addons/TransitionablePortal/TransitionablePortal.d.ts index c17f31f9d8..3c1d042f81 100644 --- a/src/addons/TransitionablePortal/TransitionablePortal.d.ts +++ b/src/addons/TransitionablePortal/TransitionablePortal.d.ts @@ -1,6 +1,6 @@ import * as React from 'react' -import { TransitionEventData, TransitionProps } from '../../modules/Transition/Transition' +import { TransitionProps, TRANSITION_STATUSES } from '../../modules/Transition/Transition' import { PortalProps } from '../Portal/Portal' export interface TransitionablePortalProps extends StrictTransitionablePortalProps { @@ -15,33 +15,37 @@ export interface StrictTransitionablePortalProps { * Called when a close event happens. * * @param {SyntheticEvent} event - React's original SyntheticEvent. - * @param {object} data - All props and internal state. + * @param {object} props - All props. + * @param {object} state - Internal state. */ - onClose?: (nothing: null, data: PortalProps & TransitionablePortalState) => void + onClose?: (nothing: null, props: PortalProps, state: TransitionablePortalState) => void /** * Callback on each transition that changes visibility to hidden. * * @param {null} - * @param {object} data - All props with status. + * @param {object} props - All props. + * @param {object} state - Internal state. */ - onHide?: (nothing: null, data: TransitionEventData & TransitionablePortalState) => void + onHide?: (nothing: null, props: TransitionProps, state: TransitionablePortalState) => void /** * Called when an open event happens. * * @param {SyntheticEvent} event - React's original SyntheticEvent. - * @param {object} data - All props and internal state. + * @param {object} props - All props. + * @param {object} state - Internal state. */ - onOpen?: (nothing: null, data: PortalProps & TransitionablePortalState) => void + onOpen?: (nothing: null, props: PortalProps, state: TransitionablePortalState) => void /** * Callback on animation start. * * @param {null} - * @param {object} data - All props with status. + * @param {object} props - All props. + * @param {object} state - Internal state. */ - onStart?: (nothing: null, data: TransitionEventData & TransitionablePortalState) => void + onStart?: (nothing: null, props: TransitionProps, state: TransitionablePortalState) => void /** Controls whether or not the portal is displayed. */ open?: boolean @@ -51,6 +55,7 @@ export interface StrictTransitionablePortalProps { } export interface TransitionablePortalState { + transitionStatus: TRANSITION_STATUSES portalOpen: boolean transitionVisible: boolean } diff --git a/src/addons/TransitionablePortal/TransitionablePortal.js b/src/addons/TransitionablePortal/TransitionablePortal.js index c7637d07f9..e76abca3bc 100644 --- a/src/addons/TransitionablePortal/TransitionablePortal.js +++ b/src/addons/TransitionablePortal/TransitionablePortal.js @@ -74,21 +74,28 @@ function TransitionablePortal(props) { setPortalOpen(true) } - const handleTransitionHide = (nothing, data) => { + const handleTransitionHide = (nothing, data, status) => { debug('handleTransitionHide()') setTransitionVisible(false) - _.invoke(props, 'onClose', null, { ...data, portalOpen: false, transitionVisible: false }) - _.invoke(props, 'onHide', null, { ...data, portalOpen, transitionVisible: false }) + _.invoke(props, 'onClose', null, data, { + transitionStatus: status, + portalOpen: false, + transitionVisible: false, + }) + _.invoke(props, 'onHide', null, data, { + transitionStatus: status, + portalOpen, + transitionVisible: false, + }) } - const handleTransitionStart = (nothing, data) => { + const handleTransitionStart = (nothing, data, status) => { debug('handleTransitionStart()') - const { status } = data const nextTransitionVisible = status === TRANSITION_STATUS_ENTERING - _.invoke(props, 'onStart', null, { - ...data, + _.invoke(props, 'onStart', null, data, { + transitionStatus: status, portalOpen, transitionVisible: nextTransitionVisible, }) @@ -99,8 +106,8 @@ function TransitionablePortal(props) { } setTransitionVisible(nextTransitionVisible) - _.invoke(props, 'onOpen', null, { - ...data, + _.invoke(props, 'onOpen', null, data, { + transitionStatus: status, transitionVisible: nextTransitionVisible, portalOpen: true, }) diff --git a/src/elements/Input/Input.d.ts b/src/elements/Input/Input.d.ts index 840930dcc7..43e0722464 100644 --- a/src/elements/Input/Input.d.ts +++ b/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, data: InputOnChangeData) => void + onChange?: (event: React.ChangeEvent, 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 export default Input diff --git a/src/elements/Input/Input.js b/src/elements/Input/Input.js index 11fa3cc6fe..32407d38fa 100644 --- a/src/elements/Input/Input.js +++ b/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 = () => { diff --git a/src/elements/Input/index.d.ts b/src/elements/Input/index.d.ts index 87f96f07a7..732b250940 100644 --- a/src/elements/Input/index.d.ts +++ b/src/elements/Input/index.d.ts @@ -1 +1 @@ -export { default, InputProps, StrictInputProps, InputOnChangeData } from './Input' +export { default, InputProps, StrictInputProps } from './Input' diff --git a/src/modules/Checkbox/Checkbox.d.ts b/src/modules/Checkbox/Checkbox.d.ts index 8abc03b7f8..24439ce723 100644 --- a/src/modules/Checkbox/Checkbox.d.ts +++ b/src/modules/Checkbox/Checkbox.d.ts @@ -43,33 +43,61 @@ export interface StrictCheckboxProps { * Called when the user attempts to change the checked state. * * @param {SyntheticEvent} event - React's original SyntheticEvent. - * @param {object} data - All props and proposed checked/indeterminate state. + * @param {object} props - All props. + * @param {boolean} checked - Current checked state. + * @param {boolean} indeterminate - Current indeterminate state. */ - onChange?: (event: React.FormEvent, data: CheckboxProps) => void + onChange?: ( + event: React.FormEvent, + props: CheckboxProps, + checked: boolean, + indeterminate: boolean, + ) => void /** * Called when the checkbox or label is clicked. * * @param {SyntheticEvent} event - React's original SyntheticEvent. - * @param {object} data - All props and current checked/indeterminate state. + * @param {object} props - All props. + * @param {boolean} checked - Current checked state. + * @param {boolean} indeterminate - Current indeterminate state. */ - onClick?: (event: React.MouseEvent, data: CheckboxProps) => void + onClick?: ( + event: React.MouseEvent, + props: CheckboxProps, + checked: boolean, + indeterminate: boolean, + ) => void /** * Called when the user presses down on the mouse. * * @param {SyntheticEvent} event - React's original SyntheticEvent. - * @param {object} data - All props and current checked/indeterminate state. + * @param {object} props - All props. + * @param {boolean} checked - Current checked state. + * @param {boolean} indeterminate - Current indeterminate state. */ - onMouseDown?: (event: React.MouseEvent, data: CheckboxProps) => void + onMouseDown?: ( + event: React.MouseEvent, + props: CheckboxProps, + checked: boolean, + indeterminate: boolean, + ) => void /** * Called when the user releases the mouse. * * @param {SyntheticEvent} event - React's original SyntheticEvent. - * @param {object} data - All props and current checked/indeterminate state. + * @param {object} props - All props. + * @param {boolean} checked - Current checked state. + * @param {boolean} indeterminate - Current indeterminate state. */ - onMouseUp?: (event: React.MouseEvent, data: CheckboxProps) => void + onMouseUp?: ( + event: React.MouseEvent, + props: CheckboxProps, + checked: boolean, + indeterminate: boolean, + ) => void /** Format as a radio element. This means it is an exclusive option. */ radio?: boolean diff --git a/src/modules/Checkbox/Checkbox.js b/src/modules/Checkbox/Checkbox.js index d183f01feb..54953dec54 100644 --- a/src/modules/Checkbox/Checkbox.js +++ b/src/modules/Checkbox/Checkbox.js @@ -96,11 +96,7 @@ const Checkbox = React.forwardRef(function (props, ref) { debug('handleChange()', _.get(e, 'target.tagName')) - _.invoke(props, 'onChange', e, { - ...props, - checked: !checked, - indeterminate: false, - }) + _.invoke(props, 'onChange', e, props, !checked, false) setChecked(!checked) setIndeterminate(false) } @@ -117,11 +113,7 @@ const Checkbox = React.forwardRef(function (props, ref) { // https://github.com/Semantic-Org/Semantic-UI-React/pull/3351 if (!isLabelClickAndForwardedToInput) { - _.invoke(props, 'onClick', e, { - ...props, - checked: !checked, - indeterminate: !!indeterminate, - }) + _.invoke(props, 'onClick', e, props, !checked, !!indeterminate) } if (isClickFromMouse.current) { @@ -147,11 +139,7 @@ const Checkbox = React.forwardRef(function (props, ref) { const handleMouseDown = (e) => { debug('handleMouseDown()') - _.invoke(props, 'onMouseDown', e, { - ...props, - checked: !!checked, - indeterminate: !!indeterminate, - }) + _.invoke(props, 'onMouseDown', e, props, !!checked, !!indeterminate) if (!e.defaultPrevented) { _.invoke(inputRef.current, 'focus') @@ -166,11 +154,7 @@ const Checkbox = React.forwardRef(function (props, ref) { debug('handleMouseUp()') isClickFromMouse.current = true - _.invoke(props, 'onMouseUp', e, { - ...props, - checked: !!checked, - indeterminate: !!indeterminate, - }) + _.invoke(props, 'onMouseUp', e, props, !!checked, !!indeterminate) } // ---------------------------------------- diff --git a/src/modules/Dropdown/Dropdown.d.ts b/src/modules/Dropdown/Dropdown.d.ts index b5ae9c65e5..aff48eda66 100644 --- a/src/modules/Dropdown/Dropdown.d.ts +++ b/src/modules/Dropdown/Dropdown.d.ts @@ -126,49 +126,57 @@ export interface StrictDropdownProps { * Called when a user adds a new item. Use this to update the options list. * * @param {SyntheticEvent} event - React's original SyntheticEvent. - * @param {object} data - All props and the new item's value. + * @param {object} props - All props. */ - onAddItem?: (event: React.SyntheticEvent, data: DropdownProps) => void + onAddItem?: ( + event: React.SyntheticEvent, + props: DropdownProps, + value: boolean | number | string | (boolean | number | string)[], + ) => void /** * Called on blur. * * @param {SyntheticEvent} event - React's original SyntheticEvent. - * @param {object} data - All props. + * @param {object} props - All props. */ - onBlur?: (event: React.FocusEvent, data: DropdownProps) => void + onBlur?: (event: React.FocusEvent, props: DropdownProps) => void /** * Called when the user attempts to change the value. * * @param {SyntheticEvent} event - React's original SyntheticEvent. - * @param {object} data - All props and proposed value. + * @param {object} props - All props. */ - onChange?: (event: React.SyntheticEvent, data: DropdownProps) => void + onChange?: ( + event: React.SyntheticEvent, + props: DropdownProps, + value: boolean | number | string | (boolean | number | string)[], + ) => void /** * Called on click. * * @param {SyntheticEvent} event - React's original SyntheticEvent. - * @param {object} data - All props. + * @param {object} props - All props. */ - onClick?: (event: React.MouseEvent, data: DropdownProps) => void + onClick?: (event: React.MouseEvent, props: DropdownProps) => void /** * Called when a close event happens. * * @param {SyntheticEvent} event - React's original SyntheticEvent. - * @param {object} data - All props. + * @param {object} props - All props. */ - onClose?: (event: React.SyntheticEvent, data: DropdownProps) => void + onClose?: (event: React.SyntheticEvent, props: DropdownProps) => void /** * Called on focus. * * @param {SyntheticEvent} event - React's original SyntheticEvent. - * @param {object} data - All props. + * @param {object} props - All props. */ - onFocus?: (event: React.FocusEvent, data: DropdownProps) => void + onFocus?: (event: React.FocusEvent, props: DropdownProps) => void /** * Called when a multi-select label is clicked. @@ -182,27 +190,29 @@ export interface StrictDropdownProps { * Called on mousedown. * * @param {SyntheticEvent} event - React's original SyntheticEvent. - * @param {object} data - All props. + * @param {object} props - All props. */ - onMouseDown?: (event: React.MouseEvent, data: DropdownProps) => void + onMouseDown?: (event: React.MouseEvent, props: DropdownProps) => void /** * Called when an open event happens. * * @param {SyntheticEvent} event - React's original SyntheticEvent. - * @param {object} data - All props. + * @param {object} props - All props. */ - onOpen?: (event: React.SyntheticEvent, data: DropdownProps) => void + onOpen?: (event: React.SyntheticEvent, props: DropdownProps) => void /** * Called on search input change. * * @param {SyntheticEvent} event - React's original SyntheticEvent. - * @param {object} data - All props, includes current value of searchQuery. + * @param {object} props - All props. + * @param {string} searchQuery - Current value of searchQuery. */ onSearchChange?: ( event: React.SyntheticEvent, - data: DropdownOnSearchChangeData, + data: DropdownProps, + searchQuery: string, ) => void /** Controls whether or not the dropdown menu is displayed. */ @@ -292,13 +302,6 @@ export interface StrictDropdownProps { wrapSelection?: boolean } -/* TODO: replace with DropdownProps when #1829 will be fixed: - * https://github.com/Semantic-Org/Semantic-UI-React/issues/1829 - */ -export interface DropdownOnSearchChangeData extends DropdownProps { - searchQuery: string -} - declare const Dropdown: ForwardRefComponent & { Divider: typeof DropdownDivider Header: typeof DropdownHeader diff --git a/src/modules/Dropdown/Dropdown.js b/src/modules/Dropdown/Dropdown.js index d77720b102..e9f50b45fc 100644 --- a/src/modules/Dropdown/Dropdown.js +++ b/src/modules/Dropdown/Dropdown.js @@ -231,7 +231,7 @@ class DropdownInner extends Component { // can't rely on props.value if we are controlled handleChange = (e, value) => { debug('handleChange()', value) - _.invoke(this.props, 'onChange', e, { ...this.props, value }) + _.invoke(this.props, 'onChange', e, this.props, value) } closeOnChange = (e) => { @@ -342,7 +342,7 @@ class DropdownInner extends Component { // Heads up! This event handler should be called after `onChange` // Notify the onAddItem prop if this is a new value if (item['data-additional']) { - _.invoke(this.props, 'onAddItem', e, { ...this.props, value: selectedValue }) + _.invoke(this.props, 'onAddItem', e, this.props, selectedValue) } } @@ -544,7 +544,7 @@ class DropdownInner extends Component { // Heads up! This event handler should be called after `onChange` // Notify the onAddItem prop if this is a new value if (isAdditionItem) { - _.invoke(this.props, 'onAddItem', e, { ...this.props, value }) + _.invoke(this.props, 'onAddItem', e, this.props, value) } } @@ -592,7 +592,7 @@ class DropdownInner extends Component { const { open } = this.state const newQuery = value - _.invoke(this.props, 'onSearchChange', e, { ...this.props, searchQuery: newQuery }) + _.invoke(this.props, 'onSearchChange', e, this.props, newQuery) this.setState({ searchQuery: newQuery, selectedIndex: 0 }) // open search dropdown on search query diff --git a/src/modules/Dropdown/index.d.ts b/src/modules/Dropdown/index.d.ts index 78624e0b19..980b73203e 100644 --- a/src/modules/Dropdown/index.d.ts +++ b/src/modules/Dropdown/index.d.ts @@ -1 +1 @@ -export { default, DropdownProps, StrictDropdownProps, DropdownOnSearchChangeData } from './Dropdown' +export { default, DropdownProps, StrictDropdownProps } from './Dropdown' diff --git a/src/modules/Embed/Embed.d.ts b/src/modules/Embed/Embed.d.ts index 7420ff9d4b..a5d01b4bcf 100644 --- a/src/modules/Embed/Embed.d.ts +++ b/src/modules/Embed/Embed.d.ts @@ -59,9 +59,10 @@ export interface StrictEmbedProps { * Called on click. * * @param {SyntheticEvent} event - React's original SyntheticEvent. - * @param {object} data - All props and proposed value. + * @param {object} props - All props. + * @param {boolean} active - Whether the embed is active. */ - onClick?: (event: React.MouseEvent, data: EmbedProps) => void + onClick?: (event: React.MouseEvent, props: EmbedProps, active: boolean) => void /** A placeholder image for embed. */ placeholder?: string diff --git a/src/modules/Embed/Embed.js b/src/modules/Embed/Embed.js index 2854feebc9..c3b23397a8 100644 --- a/src/modules/Embed/Embed.js +++ b/src/modules/Embed/Embed.js @@ -70,7 +70,7 @@ const Embed = React.forwardRef(function (props, ref) { } const handleClick = (e) => { - _.invoke(props, 'onClick', e, { ...props, active: true }) + _.invoke(props, 'onClick', e, props, true) if (!active) { setActive(true) } diff --git a/src/modules/Modal/Modal.d.ts b/src/modules/Modal/Modal.d.ts index 103a4dd94f..35ab7b7372 100644 --- a/src/modules/Modal/Modal.d.ts +++ b/src/modules/Modal/Modal.d.ts @@ -62,41 +62,43 @@ export interface StrictModalProps extends StrictPortalProps { * Action onClick handler when using shorthand `actions`. * * @param {SyntheticEvent} event - React's original SyntheticEvent. - * @param {object} data - All props. + * @param {object} props - All props. */ - onActionClick?: (event: React.MouseEvent, data: ModalProps) => void + onActionClick?: (event: React.MouseEvent, props: ModalProps) => void /** * Called when a close event happens. * * @param {SyntheticEvent} event - React's original SyntheticEvent. - * @param {object} data - All props. + * @param {object} props - All props. + * @param {boolean} open - Whether the modal is displayed. */ - onClose?: (event: React.MouseEvent, data: ModalProps) => void + onClose?: (event: React.MouseEvent, props: ModalProps, open: boolean) => void /** * Called when the portal is mounted on the DOM. * * @param {null} - * @param {object} data - All props. + * @param {object} props - All props. */ - onMount?: (nothing: null, data: ModalProps) => void + onMount?: (nothing: null, props: ModalProps) => void /** * Called when an open event happens. * * @param {SyntheticEvent} event - React's original SyntheticEvent. - * @param {object} data - All props. + * @param {object} props - All props. + * @param {boolean} open - Whether the modal is displayed. */ - onOpen?: (event: React.MouseEvent, data: ModalProps) => void + onOpen?: (event: React.MouseEvent, props: ModalProps, open: boolean) => void /** * Called when the portal is unmounted from the DOM. * * @param {null} - * @param {object} data - All props. + * @param {object} props - All props. */ - onUnmount?: (nothing: null, data: ModalProps) => void + onUnmount?: (nothing: null, props: ModalProps) => void /** Controls whether or not the Modal is displayed. */ open?: boolean diff --git a/src/modules/Modal/Modal.js b/src/modules/Modal/Modal.js index eb89025712..75533e1aeb 100644 --- a/src/modules/Modal/Modal.js +++ b/src/modules/Modal/Modal.js @@ -108,7 +108,7 @@ const Modal = React.forwardRef(function (props, ref) { debug('close()') setOpen(false) - _.invoke(props, 'onClose', e, { ...props, open: false }) + _.invoke(props, 'onClose', e, props, false) } const handleDocumentMouseDown = (e) => { @@ -129,14 +129,14 @@ const Modal = React.forwardRef(function (props, ref) { return setOpen(false) - _.invoke(props, 'onClose', e, { ...props, open: false }) + _.invoke(props, 'onClose', e, props, false) } const handleOpen = (e) => { debug('open()') setOpen(true) - _.invoke(props, 'onOpen', e, { ...props, open: true }) + _.invoke(props, 'onOpen', e, props, true) } const handlePortalMount = (e) => { diff --git a/src/modules/Popup/Popup.d.ts b/src/modules/Popup/Popup.d.ts index 3322c1d0e9..6fa1ba7b1b 100644 --- a/src/modules/Popup/Popup.d.ts +++ b/src/modules/Popup/Popup.d.ts @@ -74,33 +74,35 @@ export interface StrictPopupProps extends StrictPortalProps { * Called when a close event happens. * * @param {SyntheticEvent} event - React's original SyntheticEvent. - * @param {object} data - All props. + * @param {object} props - All props. + * @param {boolean} open - Whether the popup is displayed. */ - onClose?: (event: React.MouseEvent, data: PopupProps) => void + onClose?: (event: React.MouseEvent, props: PopupProps, open: boolean) => void /** * Called when the portal is mounted on the DOM. * * @param {null} - * @param {object} data - All props. + * @param {object} props - All props. */ - onMount?: (nothing: null, data: PopupProps) => void + onMount?: (nothing: null, props: PopupProps) => void /** * Called when an open event happens. * * @param {SyntheticEvent} event - React's original SyntheticEvent. - * @param {object} data - All props. + * @param {object} props - All props. + * @param {boolean} open - Whether the popup is displayed */ - onOpen?: (event: React.MouseEvent, data: PopupProps) => void + onOpen?: (event: React.MouseEvent, props: PopupProps, open: boolean) => void /** * Called when the portal is unmounted from the DOM. * * @param {null} - * @param {object} data - All props. + * @param {object} props - All props. */ - onUnmount?: (nothing: null, data: PopupProps) => void + onUnmount?: (nothing: null, props: PopupProps) => void /** Disables automatic repositioning of the component, it will always be placed according to the position value. */ pinned?: boolean diff --git a/src/modules/Popup/Popup.js b/src/modules/Popup/Popup.js index 2c3c9ba4f2..20e0e5502e 100644 --- a/src/modules/Popup/Popup.js +++ b/src/modules/Popup/Popup.js @@ -171,12 +171,12 @@ const Popup = React.forwardRef(function (props, ref) { const handleClose = (e) => { debug('handleClose()') - _.invoke(props, 'onClose', e, { ...props, open: false }) + _.invoke(props, 'onClose', e, props, false) } const handleOpen = (e) => { debug('handleOpen()') - _.invoke(props, 'onOpen', e, { ...props, open: true }) + _.invoke(props, 'onOpen', e, props, true) } const hideOnScroll = (e) => { diff --git a/src/modules/Rating/Rating.d.ts b/src/modules/Rating/Rating.d.ts index 5fccb4c1c3..f197921cda 100644 --- a/src/modules/Rating/Rating.d.ts +++ b/src/modules/Rating/Rating.d.ts @@ -36,9 +36,10 @@ export interface StrictRatingProps { * Called after user selects a new rating. * * @param {SyntheticEvent} event - React's original SyntheticEvent. - * @param {object} data - All props and proposed rating. + * @param {object} props - All props. + * @param {number} props - New rating. */ - onRate?: (event: React.MouseEvent, data: RatingProps) => void + onRate?: (event: React.MouseEvent, props: RatingProps, rating: number) => void /** The current number of active icons. */ rating?: number | string diff --git a/src/modules/Rating/Rating.js b/src/modules/Rating/Rating.js index 0f1274dbea..a5f6ad3510 100644 --- a/src/modules/Rating/Rating.js +++ b/src/modules/Rating/Rating.js @@ -58,7 +58,7 @@ const Rating = React.forwardRef(function (props, ref) { setRating(newRating) setIsSelecting(false) - _.invoke(props, 'onRate', e, { ...props, rating: newRating }) + _.invoke(props, 'onRate', e, props, newRating) } const handleIconMouseEnter = (e, { index }) => { diff --git a/src/modules/Search/Search.d.ts b/src/modules/Search/Search.d.ts index f35ca846b5..403e89fe4c 100644 --- a/src/modules/Search/Search.d.ts +++ b/src/modules/Search/Search.d.ts @@ -93,49 +93,60 @@ export interface StrictSearchProps { * Called on blur. * * @param {SyntheticEvent} event - React's original SyntheticEvent. - * @param {object} data - All props. + * @param {object} props - All props. */ - onBlur?: (event: React.MouseEvent, data: SearchProps) => void + onBlur?: (event: React.MouseEvent, props: SearchProps) => void /** * Called on focus. * * @param {SyntheticEvent} event - React's original SyntheticEvent. - * @param {object} data - All props. + * @param {object} props - All props. */ - onFocus?: (event: React.MouseEvent, data: SearchProps) => void + onFocus?: (event: React.MouseEvent, props: SearchProps) => void /** * Called on mousedown. * * @param {SyntheticEvent} event - React's original SyntheticEvent. - * @param {object} data - All props. + * @param {object} props - All props. */ - onMouseDown?: (event: React.MouseEvent, data: SearchProps) => void + onMouseDown?: (event: React.MouseEvent, props: SearchProps) => void /** * Called when a result is selected. * * @param {SyntheticEvent} event - React's original SyntheticEvent. - * @param {object} data - All props. + * @param {object} props - All props. + * @param {any} result - The search result. */ - onResultSelect?: (event: React.MouseEvent, data: SearchResultData) => void + onResultSelect?: ( + event: React.MouseEvent, + props: SearchProps, + result: any, + ) => void /** * Called on search input change. * * @param {SyntheticEvent} event - React's original SyntheticEvent. - * @param {object} data - All props, includes current value of search input. + * @param {object} props - All props. + * @param {string} query - Current value of search input. */ - onSearchChange?: (event: React.MouseEvent, data: SearchProps) => void + onSearchChange?: (event: React.MouseEvent, props: SearchProps, query: string) => void /** * Called when the active selection index is changed. * * @param {SyntheticEvent} event - React's original SyntheticEvent. - * @param {object} data - All props. + * @param {object} props - All props. + * @param {any} result - The search result. */ - onSelectionChange?: (event: React.MouseEvent, data: SearchResultData) => void + onSelectionChange?: ( + event: React.MouseEvent, + props: SearchProps, + result: any, + ) => void // ------------------------------------ // Style @@ -166,10 +177,6 @@ export interface StrictSearchProps { placeholder?: string } -export interface SearchResultData extends SearchProps { - result: any -} - declare const Search: ForwardRefComponent & { Category: typeof SearchCategory Result: typeof SearchResult diff --git a/src/modules/Search/Search.js b/src/modules/Search/Search.js index 5e5e0ed5b8..67c02193e3 100644 --- a/src/modules/Search/Search.js +++ b/src/modules/Search/Search.js @@ -152,14 +152,14 @@ class SearchInner extends Component { debug('handleResultSelect()') debug(result) - _.invoke(this.props, 'onResultSelect', e, { ...this.props, result }) + _.invoke(this.props, 'onResultSelect', e, this.props, result) } handleSelectionChange = (e) => { debug('handleSelectionChange()') const result = this.getSelectedResult() - _.invoke(this.props, 'onSelectionChange', e, { ...this.props, result }) + _.invoke(this.props, 'onSelectionChange', e, this.props, result) } closeOnEscape = (e) => { @@ -282,7 +282,7 @@ class SearchInner extends Component { const { open } = this.state const newQuery = e.target.value - _.invoke(this.props, 'onSearchChange', e, { ...this.props, value: newQuery }) + _.invoke(this.props, 'onSearchChange', e, this.props, newQuery) // open search dropdown on search query if (newQuery.length < minCharacters) { diff --git a/src/modules/Search/index.d.ts b/src/modules/Search/index.d.ts index 6f80e91ac3..cc570f7d71 100644 --- a/src/modules/Search/index.d.ts +++ b/src/modules/Search/index.d.ts @@ -1 +1 @@ -export { default, SearchProps, StrictSearchProps, SearchResultData } from './Search' +export { default, SearchProps, StrictSearchProps } from './Search' diff --git a/src/modules/Sidebar/Sidebar.d.ts b/src/modules/Sidebar/Sidebar.d.ts index 353c807b18..8ad4684a75 100644 --- a/src/modules/Sidebar/Sidebar.d.ts +++ b/src/modules/Sidebar/Sidebar.d.ts @@ -31,33 +31,34 @@ export interface StrictSidebarProps { * Called before a sidebar begins to animate out. * * @param {SyntheticEvent} event - React's original SyntheticEvent. - * @param {object} data - All props. + * @param {object} props - All props. + * @param {boolean} visible - Whether the sidebar is visible. */ - onHide?: (event: React.MouseEvent, data: SidebarProps) => void + onHide?: (event: React.MouseEvent, props: SidebarProps, visible: boolean) => void /** * Called after a sidebar has finished animating out. * * @param {null} - * @param {object} data - All props. + * @param {object} props - All props. */ - onHidden?: (event: React.MouseEvent, data: SidebarProps) => void + onHidden?: (event: React.MouseEvent, props: SidebarProps) => void /** * Called when a sidebar has finished animating in. * * @param {null} - * @param {object} data - All props. + * @param {object} props - All props. */ - onShow?: (event: React.MouseEvent, data: SidebarProps) => void + onShow?: (event: React.MouseEvent, props: SidebarProps) => void /** * Called when a sidebar begins animating in. * * @param {null} - * @param {object} data - All props. + * @param {object} props - All props. */ - onVisible?: (event: React.MouseEvent, data: SidebarProps) => void + onVisible?: (event: React.MouseEvent, props: SidebarProps) => void /** A sidebar can handle clicks on the passed element. */ target?: Document | Window | HTMLElement | React.RefObject diff --git a/src/modules/Sidebar/Sidebar.js b/src/modules/Sidebar/Sidebar.js index 0489850b56..d190bf8bfa 100644 --- a/src/modules/Sidebar/Sidebar.js +++ b/src/modules/Sidebar/Sidebar.js @@ -71,7 +71,7 @@ const Sidebar = React.forwardRef((props, ref) => { const callback = visible ? 'onShow' : 'onHidden' resetAnimationTick() - _.invoke(props, callback, null, props) + _.invoke(props, callback, null, props, visible) }) const handleAnimationStart = useEventCallback(() => { @@ -85,13 +85,13 @@ const Sidebar = React.forwardRef((props, ref) => { return } - _.invoke(props, callback, null, props) + _.invoke(props, callback, null, props, visible) }) const handleDocumentClick = (e) => { if (!doesNodeContainClick(elementRef.current, e)) { skipNextCallback.current = true - _.invoke(props, 'onHide', e, { ...props, visible: false }) + _.invoke(props, 'onHide', e, props, false) } } diff --git a/src/modules/Tab/Tab.d.ts b/src/modules/Tab/Tab.d.ts index 7d71cb55fa..5f4438f94e 100644 --- a/src/modules/Tab/Tab.d.ts +++ b/src/modules/Tab/Tab.d.ts @@ -30,11 +30,15 @@ export interface StrictTabProps { * Called on tab change. * * @param {SyntheticEvent} event - React's original SyntheticEvent. - * @param {object} data - The proposed new Tab.Pane. - * @param {object} data.activeIndex - The new proposed activeIndex. - * @param {object} data.panes - Props of the new proposed active pane. + * @param {object} props - The proposed new Tab.Pane. + * @param {object} props.panes - Props of the new proposed active pane. + * @param {number} activeIndex - The current activeIndex. */ - onTabChange?: (event: React.MouseEvent, data: TabProps) => void + onTabChange?: ( + event: React.MouseEvent, + props: TabProps, + activeIndex: number, + ) => void /** * Array of objects describing each Menu.Item and Tab.Pane: diff --git a/src/modules/Tab/Tab.js b/src/modules/Tab/Tab.js index cbbac2bf46..9740256480 100644 --- a/src/modules/Tab/Tab.js +++ b/src/modules/Tab/Tab.js @@ -34,7 +34,7 @@ const Tab = React.forwardRef(function (props, ref) { }) const handleItemClick = (e, { index }) => { - _.invoke(props, 'onTabChange', e, { ...props, activeIndex: index }) + _.invoke(props, 'onTabChange', e, props, index) setActiveIndex(index) } diff --git a/src/modules/Transition/Transition.d.ts b/src/modules/Transition/Transition.d.ts index b7463df915..0cebc97210 100644 --- a/src/modules/Transition/Transition.d.ts +++ b/src/modules/Transition/Transition.d.ts @@ -32,33 +32,37 @@ export interface StrictTransitionProps { * Callback on each transition that changes visibility to shown. * * @param {null} - * @param {object} data - All props with status. + * @param {object} props - All props. + * @param {TRANSITION_STATUSES} status - Transition status. */ - onComplete?: (nothing: null, data: TransitionEventData) => void + onComplete?: (nothing: null, props: TransitionProps, status: TRANSITION_STATUSES) => void /** * Callback on each transition that changes visibility to hidden. * * @param {null} - * @param {object} data - All props with status. + * @param {object} props - All props. + * @param {TRANSITION_STATUSES} status - Transition status. */ - onHide?: (nothing: null, data: TransitionEventData) => void + onHide?: (nothing: null, props: TransitionProps, status: TRANSITION_STATUSES) => void /** * Callback on each transition that changes visibility to shown. * * @param {null} - * @param {object} data - All props with status. + * @param {object} props - All props. + * @param {TRANSITION_STATUSES} status - Transition status. */ - onShow?: (nothing: null, data: TransitionEventData) => void + onShow?: (nothing: null, props: TransitionProps, status: TRANSITION_STATUSES) => void /** * Callback on animation start. * * @param {null} - * @param {object} data - All props with status. + * @param {object} props - All props. + * @param {TRANSITION_STATUSES} status - Transition status. */ - onStart?: (nothing: null, data: TransitionEventData) => void + onStart?: (nothing: null, props: TransitionProps, status: TRANSITION_STATUSES) => void /** React's key of the element. */ reactKey?: string @@ -70,10 +74,6 @@ export interface StrictTransitionProps { unmountOnHide?: boolean } -export interface TransitionEventData extends TransitionProps { - status: TRANSITION_STATUSES -} - export interface TransitionPropDuration { hide: number show: number diff --git a/src/modules/Transition/Transition.js b/src/modules/Transition/Transition.js index 3ad3c88018..2bc7aa33cd 100644 --- a/src/modules/Transition/Transition.js +++ b/src/modules/Transition/Transition.js @@ -97,14 +97,14 @@ export default class Transition extends React.Component { } if (!prevState.animating && this.state.animating) { - _.invoke(this.props, 'onStart', null, { ...this.props, status: this.state.status }) + _.invoke(this.props, 'onStart', null, this.props, this.state.status) } if (prevState.animating && !this.state.animating) { const callback = this.state.status === TRANSITION_STATUS_ENTERED ? 'onShow' : 'onHide' - _.invoke(this.props, 'onComplete', null, { ...this.props, status: this.state.status }) - _.invoke(this.props, callback, null, { ...this.props, status: this.state.status }) + _.invoke(this.props, 'onComplete', null, this.props, this.state.status) + _.invoke(this.props, callback, null, this.props, this.state.status) } } diff --git a/test/specs/addons/Pagination/Pagination-test.js b/test/specs/addons/Pagination/Pagination-test.js index 0b50014282..3b764b38fa 100644 --- a/test/specs/addons/Pagination/Pagination-test.js +++ b/test/specs/addons/Pagination/Pagination-test.js @@ -24,7 +24,7 @@ describe('Pagination', () => { }) describe('onPageChange', () => { - it('is called with (e, data) when clicked on a pagination item', () => { + it('is called when clicked a pagination item is clicked', () => { const onPageChange = sandbox.spy() const onPageItemClick = sandbox.spy() @@ -40,7 +40,7 @@ describe('Pagination', () => { wrapper.find('PaginationItem').at(4).simulate('click') onPageChange.should.have.been.calledOnce() - onPageChange.should.have.been.calledWithMatch({ type: 'click' }, { activePage: 3 }) + onPageChange.should.have.been.calledWithMatch({ type: 'click' }, {}, 3) onPageItemClick.should.have.been.calledOnce() onPageItemClick.should.have.been.calledWithMatch({ type: 'click' }, { value: 3 }) }) diff --git a/test/specs/addons/Portal/Portal-test.js b/test/specs/addons/Portal/Portal-test.js index c79c139fd2..7f6cc450fe 100644 --- a/test/specs/addons/Portal/Portal-test.js +++ b/test/specs/addons/Portal/Portal-test.js @@ -181,7 +181,7 @@ describe('Portal', () => { wrapper.find('#trigger').simulate('click') onOpen.should.have.been.calledOnce() - onOpen.should.have.been.calledWithMatch({}, { open: true }) + onOpen.should.have.been.calledWithMatch({}, {}, true) }) }) @@ -196,7 +196,7 @@ describe('Portal', () => { domEvent.click(document.body) onClose.should.have.been.called() - onClose.should.have.been.calledWithMatch({}, { open: false }) + onClose.should.have.been.calledWithMatch({}, {}, false) }) }) diff --git a/test/specs/addons/TextArea/TextArea-test.js b/test/specs/addons/TextArea/TextArea-test.js index 0ba2816f11..c57312d187 100644 --- a/test/specs/addons/TextArea/TextArea-test.js +++ b/test/specs/addons/TextArea/TextArea-test.js @@ -50,7 +50,7 @@ describe('TextArea', () => { }) describe('onChange', () => { - it('is called with (e, data) on change', () => { + it('is called with (e, props, value) on change', () => { const onChange = sandbox.spy() const e = { target: { value: 'name' } } const props = { 'data-foo': 'bar', onChange } @@ -59,12 +59,12 @@ describe('TextArea', () => { wrapper.find('textarea').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) }) }) describe('onInput', () => { - it('is called with (e, data) on input', () => { + it('is called with (e, props, value) on input', () => { const onInput = sandbox.spy() const e = { target: { value: 'name' } } const props = { 'data-foo': 'bar', onInput } @@ -73,7 +73,7 @@ describe('TextArea', () => { wrapper.find('textarea').simulate('input', e) onInput.should.have.been.calledOnce() - onInput.should.have.been.calledWithMatch(e, { ...props, value: e.target.value }) + onInput.should.have.been.calledWithMatch(e, props, e.target.value) }) }) diff --git a/test/specs/addons/TransitionablePortal/TransitionablePortal-test.js b/test/specs/addons/TransitionablePortal/TransitionablePortal-test.js index b69a195d34..d340fc7ac1 100644 --- a/test/specs/addons/TransitionablePortal/TransitionablePortal-test.js +++ b/test/specs/addons/TransitionablePortal/TransitionablePortal-test.js @@ -25,7 +25,7 @@ describe('TransitionablePortal', () => { }) describe('onClose', () => { - it('is called with (null, data) on a click outside', (done) => { + it('is called on a click outside', (done) => { const onClose = sandbox.spy() const wrapper = mount( { assertWithTimeout(() => { onClose.should.have.been.calledOnce() - onClose.should.have.been.calledWithMatch(null, { portalOpen: false }) + onClose.should.have.been.calledWithMatch(null, {}, { portalOpen: false }) wrapper.unmount() }, done) @@ -60,7 +60,7 @@ describe('TransitionablePortal', () => { }) describe('onHide', () => { - it('is called with (null, data) when exiting transition finished', (done) => { + it('is called when exiting transition finished', (done) => { const onHide = sandbox.spy() const wrapper = mount( { wrapper.setProps({ open: false }) assertWithTimeout(() => { onHide.should.have.been.calledOnce() - onHide.should.have.been.calledWithMatch(null, { - ...quickTransition, - portalOpen: false, - transitionVisible: false, - }) + onHide.should.have.been.calledWithMatch( + null, + { + ...quickTransition, + }, + { + portalOpen: false, + transitionVisible: false, + }, + ) wrapper.unmount() }, done) @@ -87,7 +92,7 @@ describe('TransitionablePortal', () => { }) describe('onOpen', () => { - it('is called with (null, data) when opens', () => { + it('is called when opens', () => { const onOpen = sandbox.spy() const wrapper = mount( } />, @@ -95,7 +100,7 @@ describe('TransitionablePortal', () => { wrapper.find('button').simulate('click') onOpen.should.have.been.calledOnce() - onOpen.should.have.been.calledWithMatch(null, { portalOpen: true }) + onOpen.should.have.been.calledWithMatch(null, {}, { portalOpen: true }) }) it('renders contents', () => { diff --git a/test/specs/elements/Input/Input-test.js b/test/specs/elements/Input/Input-test.js index 12265b9db3..fd5233c217 100644 --- a/test/specs/elements/Input/Input-test.js +++ b/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) }) }) diff --git a/test/specs/modules/Checkbox/Checkbox-test.js b/test/specs/modules/Checkbox/Checkbox-test.js index 6103acd18f..ab1dae645c 100644 --- a/test/specs/modules/Checkbox/Checkbox-test.js +++ b/test/specs/modules/Checkbox/Checkbox-test.js @@ -223,7 +223,7 @@ describe('Checkbox', () => { }) describe('onChange', () => { - it('is called with (e, data) on mouse up', () => { + it('is called on mouse up', () => { const onChange = sandbox.spy() const props = { name: 'foo', value: 'bar', checked: false, indeterminate: true } @@ -233,17 +233,10 @@ describe('Checkbox', () => { wrapper.find('label').simulate('click') onChange.should.have.been.calledOnce() - onChange.should.have.been.calledWithMatch( - {}, - { - ...props, - checked: true, - indeterminate: false, - }, - ) + onChange.should.have.been.calledWithMatch({}, props, true, false) }) - it('is not called when on change when "id" is passed', () => { + it('is not called on change when "id" is passed', () => { const onChange = sandbox.spy() wrapperMount() @@ -264,22 +257,16 @@ describe('Checkbox', () => { }) describe('onClick', () => { - it('is called with (event, data) on click', () => { + it('is called on click', () => { const onClick = sandbox.spy() const props = { name: 'foo', value: 'bar', checked: false, indeterminate: true } mount().simulate('click') onClick.should.have.been.calledOnce() - onClick.should.have.been.calledWithMatch( - {}, - { - ...props, - checked: true, - }, - ) + onClick.should.have.been.calledWithMatch({}, props, true, true) }) - it('is not called when "id" is passed', () => { + it('is not called on click if "id" is passed', () => { const onClick = sandbox.spy() wrapperMount() @@ -290,13 +277,13 @@ describe('Checkbox', () => { }) describe('onMouseDown', () => { - it('is called with (event, data) on mouse down', () => { + it('is called on mouse down without changing the checked status', () => { const onMousedDown = sandbox.spy() const props = { name: 'foo', value: 'bar', checked: false, indeterminate: true } mount().simulate('mousedown') onMousedDown.should.have.been.calledOnce() - onMousedDown.should.have.been.calledWithMatch({}, props) + onMousedDown.should.have.been.calledWithMatch({}, props, false, true) }) it('sets focus to container', () => { @@ -307,7 +294,7 @@ describe('Checkbox', () => { document.activeElement.should.equal(input) }) - it('will not set focus to container, if default is prevented', () => { + it('does not set focus to container, if default is prevented', () => { wrapperMount( e.preventDefault()} />) domEvent.fire('.ui.checkbox input', 'mousedown') @@ -316,20 +303,24 @@ describe('Checkbox', () => { }) describe('onMouseUp', () => { - it('is called with (event, data) on mouse up', () => { + it('is called on mouse up without changing the checked status', () => { const onMouseUp = sandbox.spy() const props = { name: 'foo', value: 'bar', checked: false, indeterminate: true } mount().simulate('mouseup') onMouseUp.should.have.been.calledOnce() - onMouseUp.should.have.been.calledWithMatch({}, props) + onMouseUp.should.have.been.calledWithMatch({}, props, false, true) }) - it('is called with (event, data) on mouse up with right button', () => { + it('is called on mouse up with right button without changing the checked status', () => { const onMouseUp = sandbox.spy() - mount().simulate('mouseup', { button: 2 }) + const props = { name: 'foo', value: 'bar', checked: false, indeterminate: true } + mount().simulate('mouseup', { + button: 2, + }) onMouseUp.should.have.been.calledOnce() + onMouseUp.should.have.been.calledWithMatch({}, props, false, true) }) }) diff --git a/test/specs/modules/Dropdown/Dropdown-test.js b/test/specs/modules/Dropdown/Dropdown-test.js index 4b3d9e8d06..9dabce0eaf 100644 --- a/test/specs/modules/Dropdown/Dropdown-test.js +++ b/test/specs/modules/Dropdown/Dropdown-test.js @@ -394,7 +394,7 @@ describe('Dropdown', () => { wrapper.find('i.clear').simulate('click', event) onChange.should.have.been.calledOnce() - onChange.should.have.been.calledWithMatch(event, { value: '' }) + onChange.should.have.been.calledWithMatch(event, {}, '') wrapper.should.have.exactly(1).descendants('.selected.item') wrapper.find('.item').at(0).should.have.className('selected') }) @@ -416,7 +416,7 @@ describe('Dropdown', () => { wrapper.find('i.clear').simulate('click', event) onChange.should.have.been.calledOnce() - onChange.should.have.been.calledWithMatch(event, { value: [] }) + onChange.should.have.been.calledWithMatch(event, {}, []) wrapper.should.have.exactly(1).descendants('.selected.item') wrapper.find('.item').at(0).should.have.className('selected') }) @@ -1627,11 +1627,6 @@ describe('Dropdown', () => { }) describe('selecting items', () => { - let spy - beforeEach(() => { - spy = sandbox.spy() - }) - it('does not close the menu on clicking on a label', () => { const value = _.map(options, 'value') const randomIndex = _.random(options.length - 1) @@ -1659,19 +1654,26 @@ describe('Dropdown', () => { }) it('calls onLabelClick', () => { + const onLabelClick = sandbox.spy() const value = _.map(options, 'value') const randomIndex = _.random(options.length - 1) const randomValue = value[randomIndex] wrapperMount( - , + , ) .simulate('click', nativeEvent) .find('Label') .at(randomIndex) .simulate('click', nativeEvent) - spy.should.have.been.calledWithMatch({}, { value: randomValue }) + onLabelClick.should.have.been.calledWithMatch({}, { value: randomValue }) }) it('refocuses search on select', () => { @@ -1693,38 +1695,40 @@ describe('Dropdown', () => { const randomIndex = _.random(options.length - 1) const randomValue = value[randomIndex] const expected = _.without(value, randomValue) - const spy = sandbox.spy() - wrapperMount() + const onChange = sandbox.spy() + wrapperMount( + , + ) wrapper.find('.delete.icon').at(randomIndex).simulate('click') - spy.should.have.been.calledOnce() - spy.should.have.been.calledWithMatch({}, { value: expected }) + onChange.should.have.been.calledOnce() + onChange.should.have.been.calledWithMatch({}, {}, expected) }) }) }) describe('removing items on backspace', () => { - let spy + let onChange beforeEach(() => { - spy = sandbox.spy() + onChange = sandbox.spy() }) it('does nothing without selected items', () => { - wrapperMount() + wrapperMount() // open wrapper.simulate('click') domEvent.keyDown(document, { key: 'Backspace' }) - spy.should.not.have.been.called() + onChange.should.not.have.been.called() }) it('removes the last item when there is no search query', () => { const value = _.map(options, 'value') const expected = _.dropRight(value) wrapperMount( - , + , ) // open @@ -1732,8 +1736,8 @@ describe('Dropdown', () => { domEvent.keyDown(document, { key: 'Backspace' }) - spy.should.have.been.calledOnce() - spy.should.have.been.calledWithMatch({}, { value: expected }) + onChange.should.have.been.calledOnce() + onChange.should.have.been.calledWithMatch({}, {}, expected) }) it('removes the last item when there is no search query when uncontrolled', () => { @@ -1746,7 +1750,7 @@ describe('Dropdown', () => { defaultValue={value} multiple search - onChange={spy} + onChange={onChange} />, ) @@ -1754,8 +1758,8 @@ describe('Dropdown', () => { wrapper.simulate('click') domEvent.keyDown(document, { key: 'Backspace' }) - spy.should.have.been.calledOnce() - spy.should.have.been.calledWithMatch({}, { value: expected }) + onChange.should.have.been.calledOnce() + onChange.should.have.been.calledWithMatch({}, {}, expected) }) it('does not remove the last item when there is a search query', () => { @@ -1763,7 +1767,7 @@ describe('Dropdown', () => { const searchQuery = _.sample(options).text const value = _.map(options, 'value') wrapperMount( - , + , ) // open and simulate search @@ -1772,105 +1776,111 @@ describe('Dropdown', () => { domEvent.keyDown(document, { key: 'Backspace' }) - spy.should.not.have.been.called() + onChange.should.not.have.been.called() }) it('does not remove items for multiple dropdowns without search', () => { const value = _.map(options, 'value') - wrapperMount() + wrapperMount( + , + ) // open wrapper.simulate('click') domEvent.keyDown(document, { key: 'Backspace' }) - spy.should.not.have.been.called() + onChange.should.not.have.been.called() }) }) describe('onChange', () => { - let spy + let onChange beforeEach(() => { - spy = sandbox.spy() + onChange = sandbox.spy() }) it('is called with event and value on item click', () => { const randomIndex = _.random(options.length - 1) const randomValue = options[randomIndex].value - wrapperMount() + wrapperMount() .simulate('click') .find('DropdownItem') .at(randomIndex) .simulate('click') - spy.should.have.been.calledOnce() - spy.should.have.been.calledWithMatch({}, { value: randomValue }) + onChange.should.have.been.calledOnce() + onChange.should.have.been.calledWithMatch({}, {}, randomValue) }) it('is not called when value is not changed on item click', () => { - wrapperMount() + wrapperMount() wrapper.simulate('click').find('DropdownItem').at(0).simulate('click') - spy.should.have.been.calledOnce() + onChange.should.have.been.calledOnce() // TODO: try reenable after Enzyme update // https://github.com/Semantic-Org/Semantic-UI-React/pull/3747#issuecomment-522018329 // dropdownMenuIsClosed() wrapper.simulate('click').find('DropdownItem').at(0).simulate('click') - spy.should.have.been.calledOnce() + onChange.should.have.been.calledOnce() // TODO: try reenable after Enzyme update // dropdownMenuIsClosed() }) it('is called with event and value when pressing enter on a selected item', () => { const firstValue = options[0].value - wrapperMount().simulate('click') + wrapperMount().simulate('click') wrapper.simulate('keydown', { key: 'Enter' }) - spy.should.have.been.calledOnce() - spy.should.have.been.calledWithMatch({}, { value: firstValue }) + onChange.should.have.been.calledOnce() + onChange.should.have.been.calledWithMatch({}, {}, firstValue) }) it('is called with event and value when blurring', () => { const firstValue = options[0].value - wrapperMount() + wrapperMount() .simulate('focus') // open, highlights first item .simulate('blur') // blur should activate selected item - spy.should.have.been.calledOnce() - spy.should.have.been.calledWithMatch({}, { value: firstValue }) + onChange.should.have.been.calledOnce() + onChange.should.have.been.calledWithMatch({}, {}, firstValue) }) it('is not called on blur when closed', () => { - wrapperMount() + wrapperMount() .simulate('focus') .simulate('blur') - spy.should.not.have.been.called() + onChange.should.not.have.been.called() }) it('is not called on blur when selectOnBlur is false', () => { - wrapperMount() + wrapperMount( + , + ) .simulate('focus') .simulate('click') wrapper.simulate('blur') - spy.should.not.have.been.called() + onChange.should.not.have.been.called() }) it('is not called on blur with multiple select', () => { - wrapperMount() + wrapperMount() .simulate('focus') .simulate('click') wrapper.simulate('blur') - spy.should.not.have.been.called() + onChange.should.not.have.been.called() }) it('is not called when updating the value prop', () => { const value = _.sample(options).value const next = _.sample(_.without(options, value)).value - wrapperMount().setProps({ + wrapperMount( + , + ).setProps({ value: next, }) - spy.should.not.have.been.called() + onChange.should.not.have.been.called() }) }) @@ -1946,18 +1956,18 @@ describe('Dropdown', () => { describe('onSearchChange', () => { it('is called with (event, value) on search input change', () => { - const spy = sandbox.spy() - wrapperMount() + const onSearchChange = sandbox.spy() + wrapperMount() .find('input.search') .simulate('change', { target: { value: 'a' }, stopPropagation: _.noop }) - spy.should.have.been.calledOnce() - spy.should.have.been.calledWithMatch( + onSearchChange.should.have.been.calledOnce() + onSearchChange.should.have.been.calledWithMatch( { target: { value: 'a' } }, { search: true, - searchQuery: 'a', }, + 'a', ) }) @@ -2709,7 +2719,7 @@ describe('Dropdown', () => { onChange.should.have.been.calledOnce() onAddItem.should.have.been.calledOnce() - onAddItem.should.have.been.calledWithMatch({}, { value: 'boo' }) + onAddItem.should.have.been.calledWithMatch({}, {}, 'boo') onAddItem.should.have.been.calledImmediatelyAfter(onChange) }) @@ -2734,7 +2744,7 @@ describe('Dropdown', () => { onChange.should.have.been.calledOnce() onAddItem.should.have.been.calledOnce() - onAddItem.should.have.been.calledWithMatch({}, { value: 'boo' }) + onAddItem.should.have.been.calledWithMatch({}, {}, 'boo') onAddItem.should.have.been.calledImmediatelyAfter(onChange) }) diff --git a/test/specs/modules/Modal/Modal-test.js b/test/specs/modules/Modal/Modal-test.js index 71d10213c0..c1a37a8719 100644 --- a/test/specs/modules/Modal/Modal-test.js +++ b/test/specs/modules/Modal/Modal-test.js @@ -277,7 +277,7 @@ describe('Modal', () => { wrapper.find('#trigger').simulate('click') onOpen.should.have.been.calledOnce() - onOpen.should.have.been.calledWithMatch({ type: 'click' }, { open: true }) + onOpen.should.have.been.calledWithMatch({ type: 'click' }, {}, true) }) it('is not called on body click', () => { @@ -296,7 +296,7 @@ describe('Modal', () => { domEvent.click('.ui.dimmer') onClose.should.have.been.calledOnce() - onClose.should.have.been.calledWithMatch({}, { open: false }) + onClose.should.have.been.calledWithMatch({}, {}, false) }) it('is called on click outside of the modal', () => { @@ -305,6 +305,7 @@ describe('Modal', () => { domEvent.click(document.querySelector('.ui.modal').parentNode) onClose.should.have.been.calledOnce() + onClose.should.have.been.calledWithMatch({}, {}, false) }) it('is not called on mousedown inside and mouseup outside of the modal', () => { @@ -338,6 +339,7 @@ describe('Modal', () => { domEvent.keyDown(document, { key: 'Escape' }) onClose.should.have.been.calledOnce() + onClose.should.have.been.calledWithMatch({}, {}, false) }) it('is not called when the open prop changes to false', () => { diff --git a/test/specs/modules/Popup/Popup-test.js b/test/specs/modules/Popup/Popup-test.js index 78450d3c3e..d032ab6886 100644 --- a/test/specs/modules/Popup/Popup-test.js +++ b/test/specs/modules/Popup/Popup-test.js @@ -150,7 +150,7 @@ describe('Popup', () => { assertInBody('.ui.popup.visible', false) }) - it('is called with (e, props) when scroll', () => { + it('is called on scroll', () => { const onClose = sandbox.spy() wrapperMount() @@ -159,7 +159,7 @@ describe('Popup', () => { domEvent.scroll(window) onClose.should.have.been.calledOnce() - onClose.should.have.been.calledWithMatch({}, { content: 'foo', onClose, trigger }) + onClose.should.have.been.calledWithMatch({}, { content: 'foo', onClose, trigger }, false) }) it('not hide on scroll from inside a popup', () => { @@ -178,6 +178,7 @@ describe('Popup', () => { domEvent.scroll(window) onClose.should.have.been.calledOnce() + onClose.should.have.been.calledWithMatch({}, {}, false) }) }) @@ -222,6 +223,7 @@ describe('Popup', () => { domEvent.click('body') onClose.should.have.been.calledOnce() + onClose.should.have.been.calledWithMatch({}, {}, false) }) it('is called when pressing escape', () => { @@ -230,6 +232,7 @@ describe('Popup', () => { domEvent.keyDown(document, { key: 'Escape' }) onClose.should.have.been.calledOnce() + onClose.should.have.been.calledWithMatch({}, {}, false) }) it('is not called when the open prop changes to false', () => { @@ -252,7 +255,7 @@ describe('Popup', () => { wrapper.find('#trigger').simulate('click') onOpen.should.have.been.calledOnce() - onOpen.should.have.been.calledWithMatch({}, { open: true }) + onOpen.should.have.been.calledWithMatch({}, {}, true) }) }) @@ -267,7 +270,7 @@ describe('Popup', () => { domEvent.click(document.body) onClose.should.have.been.called() - onClose.should.have.been.calledWithMatch({}, { open: false }) + onClose.should.have.been.calledWithMatch({}, {}, false) }) }) diff --git a/test/specs/modules/Rating/Rating-test.js b/test/specs/modules/Rating/Rating-test.js index c1235f71c9..b3df9da156 100644 --- a/test/specs/modules/Rating/Rating-test.js +++ b/test/specs/modules/Rating/Rating-test.js @@ -241,16 +241,16 @@ describe('Rating', () => { describe('onRate', () => { it('is called with (event, { rating, maxRating } on icon click', () => { - const spy = sandbox.spy() + const onRate = sandbox.spy() const event = { fake: 'event data' } - mount() + mount() .find('RatingIcon') .last() .simulate('click', event) - spy.should.have.been.calledOnce() - spy.should.have.been.calledWithMatch(event, { rating: 3, maxRating: 3 }) + onRate.should.have.been.calledOnce() + onRate.should.have.been.calledWithMatch(event, { maxRating: 3 }, 3) }) }) diff --git a/test/specs/modules/Search/Search-test.js b/test/specs/modules/Search/Search-test.js index 0720f3e4d9..57e6c3fb4c 100644 --- a/test/specs/modules/Search/Search-test.js +++ b/test/specs/modules/Search/Search-test.js @@ -485,7 +485,7 @@ describe('Search', () => { }) describe('onBlur', () => { - it('is called with (event, data) on search input blur', () => { + it('is called on search input blur', () => { const onBlur = sandbox.spy() wrapperMount().simulate('blur', nativeEvent) @@ -504,7 +504,7 @@ describe('Search', () => { }) describe('onFocus', () => { - it('is called with (event, data) on search input focus', () => { + it('is called on search input focus', () => { const onFocus = sandbox.spy() wrapperMount().simulate('focus', nativeEvent) @@ -514,15 +514,15 @@ describe('Search', () => { }) describe('onResultSelect', () => { - let spy + let onResultSelect beforeEach(() => { - spy = sandbox.spy() + onResultSelect = sandbox.spy() }) - it('is called with event and value on item click', () => { + it('is called on item click', () => { const randomIndex = _.random(options.length - 1) const randomResult = options[randomIndex] - wrapperMount() + wrapperMount() // open openSearchResults() @@ -530,20 +530,25 @@ describe('Search', () => { wrapper.find('SearchResult').at(randomIndex).simulate('click', nativeEvent) - spy.should.have.been.calledOnce() - spy.should.have.been.calledWithMatch( + onResultSelect.should.have.been.calledOnce() + onResultSelect.should.have.been.calledWithMatch( {}, { minCharacters: 0, - result: randomResult, results: options, }, + randomResult, ) }) - it('is called with event and value when pressing enter on a selected item', () => { + it('is called when pressing enter on a selected item', () => { const firstResult = options[0] wrapperMount( - , + , ) // open @@ -552,18 +557,23 @@ describe('Search', () => { domEvent.keyDown(document, { key: 'Enter' }) - spy.should.have.been.calledOnce() - spy.should.have.been.calledWithMatch({}, { result: firstResult }) + onResultSelect.should.have.been.calledOnce() + onResultSelect.should.have.been.calledWithMatch({}, {}, firstResult) }) it('is not called when updating the value prop', () => { const value = _.sample(options).title const next = _.sample(_.without(options, value)).title wrapperMount( - , + , ).setProps({ value: next }) - spy.should.not.have.been.called() + onResultSelect.should.not.have.been.called() }) it('does not call onResultSelect on query change', () => { const onResultSelectSpy = sandbox.spy() @@ -579,26 +589,26 @@ describe('Search', () => { }) describe('onSearchChange', () => { - it('is called with (event, value) on search input change', () => { - const spy = sandbox.spy() - wrapperMount() + it('is called on search input change', () => { + const onSearchChange = sandbox.spy() + wrapperMount() .find('input.prompt') .simulate('change', { target: { value: 'a' }, stopPropagation: _.noop }) - spy.should.have.been.calledOnce() - spy.should.have.been.calledWithMatch( + onSearchChange.should.have.been.calledOnce() + onSearchChange.should.have.been.calledWithMatch( { target: { value: 'a' } }, { minCharacters: 0, results: options, - value: 'a', }, + 'a', ) }) }) - describe('onSearchChange', () => { - it('is called with (event, data) when the active selection index is changed', () => { + describe('onSelectionChange', () => { + it('is called when the active selection index is changed', () => { const onSelectionChange = sandbox.spy() wrapperMount( @@ -617,9 +627,9 @@ describe('Search', () => { {}, { minCharacters: 0, - result: options[1], results: options, }, + options[1], ) }) }) diff --git a/test/specs/modules/Sidebar/Sidebar-test.js b/test/specs/modules/Sidebar/Sidebar-test.js index 57bd6e4e0e..7f0e01f29a 100644 --- a/test/specs/modules/Sidebar/Sidebar-test.js +++ b/test/specs/modules/Sidebar/Sidebar-test.js @@ -48,7 +48,7 @@ describe('Sidebar', () => { wrapper.setProps({ visible: false }) onHide.should.have.been.calledOnce() - onHide.should.have.been.calledWithMatch(null, { visible: false }) + onHide.should.have.been.calledWithMatch(null, {}, false) }) it('is called when a click on the document was done', () => { @@ -58,7 +58,7 @@ describe('Sidebar', () => { domEvent.click(document) onHide.should.have.been.calledOnce() - onHide.should.have.been.calledWithMatch({}, { visible: false }) + onHide.should.have.been.calledWithMatch({}, {}, false) }) it('is called when a click on the document was done only once', () => { @@ -68,6 +68,7 @@ describe('Sidebar', () => { domEvent.click(document) wrapper.setProps({ visible: false }) onHide.should.have.been.calledOnce() + onHide.should.have.been.calledWithMatch({}, {}, false) }) it('is not called when a click was done inside the component', () => { @@ -101,7 +102,7 @@ describe('Sidebar', () => { setTimeout(() => { onHidden.should.have.been.calledOnce() - onHidden.should.have.been.calledWithMatch(null, { visible: false }) + onHidden.should.have.been.calledWithMatch(null, {}, false) done() }, 0) @@ -134,7 +135,7 @@ describe('Sidebar', () => { wrapper.setProps({ visible: true }) onVisible.should.have.been.calledOnce() - onVisible.should.have.been.calledWithMatch(null, { visible: true }) + onVisible.should.have.been.calledWithMatch(null, {}, true) }) }) diff --git a/test/specs/modules/Tab/Tab-test.js b/test/specs/modules/Tab/Tab-test.js index b662824ff5..0ba68797d2 100644 --- a/test/specs/modules/Tab/Tab-test.js +++ b/test/specs/modules/Tab/Tab-test.js @@ -154,11 +154,11 @@ describe('Tab', () => { }) describe('onTabChange', () => { - it('is called with (e, { ...props, activeIndex }) a menu item is clicked', () => { + it('is called when a menu item is clicked', () => { const activeIndex = 1 - const spy = sandbox.spy() + const onTabChange = sandbox.spy() const event = { fake: 'event' } - const props = { onTabChange: spy, panes } + const props = { onTabChange, panes } mount() .find('MenuItem') @@ -167,30 +167,29 @@ describe('Tab', () => { // Since React will have generated a key the returned tab won't match // exactly so match on the props instead. - spy.should.have.been.calledOnce() - spy.firstCall.args[0].should.have.property('fake', 'event') - spy.firstCall.args[1].should.have.property('activeIndex', 1) - spy.firstCall.args[1].should.have.property('onTabChange', spy) - spy.firstCall.args[1].should.have.property('panes', panes) + onTabChange.should.have.been.calledOnce() + onTabChange.should.have.been.calledWithMatch(event, props, 1) }) it('is called with the new proposed activeIndex, not the current', () => { - const spy = sandbox.spy() + const onTabChange = sandbox.spy() - const items = mount().find('MenuItem') + const items = mount().find( + 'MenuItem', + ) - spy.should.have.callCount(0) + onTabChange.should.have.callCount(0) items.at(0).simulate('click') - spy.should.have.callCount(1) - spy.lastCall.args[1].should.have.property('activeIndex', 0) + onTabChange.should.have.callCount(1) + onTabChange.lastCall.args[2].should.equal(0) items.at(1).simulate('click') - spy.should.have.callCount(2) - spy.lastCall.args[1].should.have.property('activeIndex', 1) + onTabChange.should.have.callCount(2) + onTabChange.lastCall.args[2].should.equal(1) items.at(2).simulate('click') - spy.should.have.callCount(3) - spy.lastCall.args[1].should.have.property('activeIndex', 2) + onTabChange.should.have.callCount(3) + onTabChange.lastCall.args[2].should.equal(2) }) }) diff --git a/test/specs/modules/Transition/Transition-test.js b/test/specs/modules/Transition/Transition-test.js index 1f1546f680..862f56e809 100644 --- a/test/specs/modules/Transition/Transition-test.js +++ b/test/specs/modules/Transition/Transition-test.js @@ -396,16 +396,19 @@ describe('Transition', () => { }) describe('onComplete', () => { - it('is called with (null, props) when transition completed', (done) => { + it('is called when transition completes', (done) => { const onComplete = sandbox.spy() const handleComplete = (...args) => { onComplete(...args) onComplete.should.have.been.calledOnce() - onComplete.should.have.been.calledWithMatch(null, { - duration: 0, - status: TRANSITION_STATUS_ENTERED, - }) + onComplete.should.have.been.calledWithMatch( + null, + { + duration: 0, + }, + TRANSITION_STATUS_ENTERED, + ) done() } @@ -440,16 +443,19 @@ describe('Transition', () => { }) describe('onHide', () => { - it('is called with (null, props) when hidden', (done) => { + it('is called when hidden', (done) => { const onHide = sandbox.spy() const handleHide = (...args) => { onHide(...args) onHide.should.have.been.calledOnce() - onHide.should.have.been.calledWithMatch(null, { - duration: 0, - status: TRANSITION_STATUS_EXITED, - }) + onHide.should.have.been.calledWithMatch( + null, + { + duration: 0, + }, + TRANSITION_STATUS_EXITED, + ) done() } @@ -509,16 +515,19 @@ describe('Transition', () => { }) describe('onShow', () => { - it('is called with (null, props) when shown', (done) => { + it('is called when shown', (done) => { const onShow = sandbox.spy() const handleShow = (...args) => { onShow(...args) onShow.should.have.been.calledOnce() - onShow.should.have.been.calledWithMatch(null, { - duration: 0, - status: TRANSITION_STATUS_ENTERED, - }) + onShow.should.have.been.calledWithMatch( + null, + { + duration: 0, + }, + TRANSITION_STATUS_ENTERED, + ) done() } @@ -552,16 +561,19 @@ describe('Transition', () => { }) describe('onStart', () => { - it('is called with (null, props) when transition started', (done) => { + it('is called when transition started', (done) => { const onStart = sandbox.spy() const handleStart = (...args) => { onStart(...args) onStart.should.have.been.calledOnce() - onStart.should.have.been.calledWithMatch(null, { - duration: 0, - status: TRANSITION_STATUS_ENTERING, - }) + onStart.should.have.been.calledWithMatch( + null, + { + duration: 0, + }, + TRANSITION_STATUS_ENTERING, + ) done() }