@@ -2,23 +2,22 @@ import { ButtonHTMLAttributes, ChangeEvent, useCallback, useEffect, useState } f
22import { AnimatePresence , motion } from 'framer-motion'
33import { CustomInput , useRegisterShortcut , UseRegisterShortcutProvider } from '@Common/index'
44import { ComponentSizeType } from '@Shared/constants'
5- import { ConfirmationModalProps } from './types'
5+ import { ConfirmationModalBodyProps , ConfirmationModalProps } from './types'
66import { getPrimaryButtonStyleFromVariant , getConfirmationLabel , getIconFromVariant } from './utils'
77import { Button , ButtonStyleType , ButtonVariantType } from '../Button'
88import './confirmationModal.scss'
99import { Backdrop } from '../Backdrop'
1010
11- const ConfirmationModal = ( {
11+ const ConfirmationModalBody = ( {
1212 title,
1313 subtitle,
1414 Icon,
1515 variant,
1616 buttonConfig,
1717 customInputConfig,
1818 children,
19- showConfirmationModal,
2019 handleClose,
21- } : ConfirmationModalProps ) => {
20+ } : ConfirmationModalBodyProps ) => {
2221 const { registerShortcut, unregisterShortcut } = useRegisterShortcut ( )
2322
2423 const [ confirmationText , setConfirmationText ] = useState < string > ( '' )
@@ -45,108 +44,100 @@ const ConfirmationModal = ({
4544 } , [ primaryButtonConfig , secondaryButtonConfig ] )
4645
4746 useEffect ( ( ) => {
48- if ( showConfirmationModal ) {
49- registerShortcut ( { keys : [ 'Enter' ] , callback : handleTriggerPrimaryActionButton } )
50- }
47+ registerShortcut ( { keys : [ 'Enter' ] , callback : handleTriggerPrimaryActionButton } )
5148
5249 return ( ) => {
53- if ( showConfirmationModal ) {
54- unregisterShortcut ( [ 'Enter' ] )
55- }
50+ unregisterShortcut ( [ 'Enter' ] )
5651 }
57- } , [ showConfirmationModal , primaryButtonConfig , disablePrimaryButton ] )
52+ } , [ primaryButtonConfig , disablePrimaryButton ] )
5853
5954 const handleCustomInputChange = ( e : ChangeEvent < HTMLInputElement > ) => {
6055 setConfirmationText ( e . target . value )
6156 }
6257
6358 return (
64- < AnimatePresence >
65- { showConfirmationModal ? (
66- < Backdrop onEscape = { handleCloseWrapper } >
67- < motion . div
68- className = "confirmation-modal flexbox-col br-8 bcn-0 dc__m-auto mt-40 w-400"
69- exit = { { y : 100 , opacity : 0 , scale : 0.75 , transition : { duration : 0.35 } } }
70- initial = { { y : 100 , opacity : 0 , scale : 0.75 } }
71- animate = { { y : 0 , opacity : 1 , scale : 1 } }
72- >
73- < div className = "flexbox-col dc__gap-12 p-20" >
74- < RenderIcon className = "icon-dim-48 dc__no-shrink" />
75- < span className = "cn-9 fs-16 fw-6 lh-24 dc__word-break" > { title } </ span >
76-
77- { typeof subtitle === 'string' ? (
78- < span className = "cn-8 fs-13 fw-4 lh-20 dc__word-break" > { subtitle } </ span >
79- ) : (
80- subtitle
81- ) }
82-
83- { customInputConfig && (
84- < CustomInput
85- name = { customInputIdentifier }
86- value = { confirmationText }
87- onChange = { handleCustomInputChange }
88- label = { getConfirmationLabel ( confirmationKeyword ) }
89- inputWrapClassName = "w-100"
90- placeholder = "Type to confirm"
91- isRequiredField
92- autoFocus
93- />
94- ) }
95-
96- { children }
97- </ div >
98- < div className = "p-16 dc__gap-12 flexbox dc__content-end" >
99- { secondaryButtonConfig && (
100- < Button
101- dataTestId = "confirmation-modal-secondary-button"
102- size = { ComponentSizeType . large }
103- variant = { ButtonVariantType . secondary }
104- style = {
105- 'style' in secondaryButtonConfig
106- ? secondaryButtonConfig . style
107- : ButtonStyleType . neutral
108- }
109- disabled = { secondaryButtonConfig . disabled }
110- text = { secondaryButtonConfig . text }
111- onClick = {
112- secondaryButtonConfig . onClick as ButtonHTMLAttributes < HTMLButtonElement > [ 'onClick' ]
113- }
114- startIcon = { secondaryButtonConfig . startIcon }
115- endIcon = { secondaryButtonConfig . endIcon }
116- />
117- ) }
118-
119- { primaryButtonConfig && (
120- < Button
121- dataTestId = "confirmation-modal-primary-button"
122- size = { ComponentSizeType . large }
123- variant = { ButtonVariantType . primary }
124- style = {
125- 'style' in primaryButtonConfig
126- ? primaryButtonConfig . style
127- : getPrimaryButtonStyleFromVariant ( variant )
128- }
129- disabled = {
130- ( 'disabled' in primaryButtonConfig && primaryButtonConfig . disabled ) ||
131- disablePrimaryButton
132- }
133- isLoading = { primaryButtonConfig . isLoading }
134- text = { primaryButtonConfig . text }
135- onClick = {
136- primaryButtonConfig . onClick as ButtonHTMLAttributes < HTMLButtonElement > [ 'onClick' ]
137- }
138- startIcon = { primaryButtonConfig . startIcon }
139- endIcon = { primaryButtonConfig . endIcon }
140- />
141- ) }
142- </ div >
143- </ motion . div >
144- </ Backdrop >
145- ) : null }
146- </ AnimatePresence >
59+ < Backdrop onEscape = { handleCloseWrapper } >
60+ < motion . div
61+ className = "confirmation-modal flexbox-col br-8 bcn-0 dc__m-auto mt-40 w-400"
62+ exit = { { y : 100 , opacity : 0 , scale : 0.75 , transition : { duration : 0.35 } } }
63+ initial = { { y : 100 , opacity : 0 , scale : 0.75 } }
64+ animate = { { y : 0 , opacity : 1 , scale : 1 } }
65+ >
66+ < div className = "flexbox-col dc__gap-12 p-20" >
67+ < RenderIcon className = "icon-dim-48 dc__no-shrink" />
68+ < span className = "cn-9 fs-16 fw-6 lh-24 dc__word-break" > { title } </ span >
69+
70+ { typeof subtitle === 'string' ? (
71+ < span className = "cn-8 fs-13 fw-4 lh-20 dc__word-break" > { subtitle } </ span >
72+ ) : (
73+ subtitle
74+ ) }
75+
76+ { customInputConfig && (
77+ < CustomInput
78+ name = { customInputIdentifier }
79+ value = { confirmationText }
80+ onChange = { handleCustomInputChange }
81+ label = { getConfirmationLabel ( confirmationKeyword ) }
82+ inputWrapClassName = "w-100"
83+ placeholder = "Type to confirm"
84+ isRequiredField
85+ autoFocus
86+ />
87+ ) }
88+
89+ { children }
90+ </ div >
91+ < div className = "p-16 dc__gap-12 flexbox dc__content-end" >
92+ { secondaryButtonConfig && (
93+ < Button
94+ dataTestId = "confirmation-modal-secondary-button"
95+ size = { ComponentSizeType . large }
96+ variant = { ButtonVariantType . secondary }
97+ style = {
98+ 'style' in secondaryButtonConfig ? secondaryButtonConfig . style : ButtonStyleType . neutral
99+ }
100+ disabled = { secondaryButtonConfig . disabled }
101+ text = { secondaryButtonConfig . text }
102+ onClick = {
103+ secondaryButtonConfig . onClick as ButtonHTMLAttributes < HTMLButtonElement > [ 'onClick' ]
104+ }
105+ startIcon = { secondaryButtonConfig . startIcon }
106+ endIcon = { secondaryButtonConfig . endIcon }
107+ />
108+ ) }
109+
110+ { primaryButtonConfig && (
111+ < Button
112+ dataTestId = "confirmation-modal-primary-button"
113+ size = { ComponentSizeType . large }
114+ variant = { ButtonVariantType . primary }
115+ style = {
116+ 'style' in primaryButtonConfig
117+ ? primaryButtonConfig . style
118+ : getPrimaryButtonStyleFromVariant ( variant )
119+ }
120+ disabled = {
121+ ( 'disabled' in primaryButtonConfig && primaryButtonConfig . disabled ) ||
122+ disablePrimaryButton
123+ }
124+ isLoading = { primaryButtonConfig . isLoading }
125+ text = { primaryButtonConfig . text }
126+ onClick = { primaryButtonConfig . onClick as ButtonHTMLAttributes < HTMLButtonElement > [ 'onClick' ] }
127+ startIcon = { primaryButtonConfig . startIcon }
128+ endIcon = { primaryButtonConfig . endIcon }
129+ />
130+ ) }
131+ </ div >
132+ </ motion . div >
133+ </ Backdrop >
147134 )
148135}
149136
137+ const ConfirmationModal = ( { showConfirmationModal, ...props } : ConfirmationModalProps ) => (
138+ < AnimatePresence > { showConfirmationModal ? < ConfirmationModalBody { ...props } /> : null } </ AnimatePresence >
139+ )
140+
150141const WrapWithShortcutProvider = ( props : ConfirmationModalProps ) => (
151142 < UseRegisterShortcutProvider ignoreTags = { [ 'button' ] } >
152143 < ConfirmationModal { ...props } />
0 commit comments