Yauheni/76902/modal ts migration

[yauheni-deriv]

Changes:

Please include a summary of the change and which issue is fixed below:

• ...

When you need to add unit test

• If this change disrupt current flow
• If this change is adding new flow

When you need to add integration test

• If components from external libraries are being used to define the flow, e.g. @deriv/components
• If it relies on a very specific set of props with no default behavior for the current component.

Test coverage checklist (for reviewer)

• Ensure utility / function has a test case
• Ensure all the tests are passing

Type of change

• Bug fix
• New feature
• Update feature
• Refactor code
• Translation to code
• Translation to crowdin
• Script configuration
• Improve performance
• Style only
• Dependency update
• Documentation update
• Release

[maryia-deriv]

Suggested change

	type TModal = {
	className?: string;
	close_icon_color?: string;
	elements_to_ignore?: HTMLElement[];
	exit_classname?: string;
	has_close_icon?: boolean;
	header?: React.ReactNode;
	header_background_color?: string;
	height?: string;
	id?: string;
	is_confirmation_modal?: boolean;
	is_open: boolean;
	is_risk_warning_visible?: boolean;
	is_title_centered?: boolean;
	is_vertical_bottom?: boolean;
	is_vertical_centered?: boolean;
	is_vertical_top?: boolean;
	onEntered?: () => void;
	onExited?: () => void;
	onMount?: () => void;
	onUnmount?: () => void;
	portalId?: string;
	renderTitle?: () => React.ReactNode;
	should_header_stick_body?: boolean;
	small?: boolean;
	title?: string | React.ReactNode;
	toggleModal?: (e?: React.MouseEvent<HTMLElement>) => void;
	width?: string;
	};
	type TModal = TModalElement & {
	exit_classname?: string;
	onEntered?: () => void;
	onExited?: () => void;
	};

@yauheni-kryzhyk-deriv there are only 3 unique props for Modal, and the rest are also passed to its child - ModalElement - and hence, its type can be extended here or vice versa 🙂

[yauheni-deriv]

@maryia-binary, oh... thanks... this is a big fail from my side :)

[maryia-deriv]

Suggested change

	toggleModal?: (e?: React.MouseEvent<HTMLElement>) => void;
	toggleModal?: (e?: React.MouseEvent<HTMLDivElement>) => void;

[maryia-deriv]

Suggested change

	const closeModal = (e: React.MouseEvent<HTMLElement>) => {
	const closeModal = (e: React.MouseEvent<HTMLDivElement>) => {

[yauheni-deriv]

We can’t be sure, that outside clicked element is a 'div', so it’s better to use more common type

[maryia-deriv]

@yauheni-kryzhyk-deriv since you decided to fix the typo in this prop, you also have to update it in popup.jsx line 90 where it's passed into Modal

[yauheni-deriv]

thanks for this reminder, will change everywhere in the code

[maryia-deriv]

👍🏻