refactor: Update toast functionality to use Swal
This commit is contained in:
parent
8779444b9b
commit
f47fbbe7bd
@ -159,10 +159,13 @@ export default function Playground() {
|
|||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div className="my-2">
|
||||||
<Button onClick={() => swalFire({ text: 'alert 테스트입니다.' })}>Sweetalert - alert</Button>
|
<Button onClick={() => swalFire({ text: 'alert 테스트입니다.' })}>Sweetalert - alert</Button>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div className="my-2">
|
||||||
|
<Button onClick={() => swalFire({ text: 'alert 아이콘 테스트입니다.', icon: 'error' })}>Sweetalert - alert - error</Button>
|
||||||
|
</div>
|
||||||
|
<div className="my-2">
|
||||||
<Button
|
<Button
|
||||||
onClick={() =>
|
onClick={() =>
|
||||||
swalFire({
|
swalFire({
|
||||||
|
|||||||
@ -112,7 +112,7 @@ export default function FirstOption() {
|
|||||||
swalFire({ text: getMessage(res.returnMessage) })
|
swalFire({ text: getMessage(res.returnMessage) })
|
||||||
})
|
})
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
swalFire({ text: getMessage(res.returnMessage) })
|
swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -182,7 +182,7 @@ export default function FirstOption() {
|
|||||||
swalFire({ text: getMessage(res.returnMessage) })
|
swalFire({ text: getMessage(res.returnMessage) })
|
||||||
})
|
})
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
swalFire({ text: getMessage(res.returnMessage) })
|
swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -113,7 +113,7 @@ export default function SecondOption() {
|
|||||||
swalFire({ text: getMessage(res.returnMessage) })
|
swalFire({ text: getMessage(res.returnMessage) })
|
||||||
})
|
})
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
swalFire({ text: getMessage(res.returnMessage) })
|
swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
|
||||||
}
|
}
|
||||||
setAdsorptionRange(option.range)
|
setAdsorptionRange(option.range)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,15 +1,25 @@
|
|||||||
import Swal from 'sweetalert2'
|
import Swal from 'sweetalert2'
|
||||||
import withReactContent from 'sweetalert2-react-content'
|
import withReactContent from 'sweetalert2-react-content'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* title: 제목
|
||||||
|
* text: 내용
|
||||||
|
* html: html
|
||||||
|
* type: alert, confirm
|
||||||
|
* icon: icontype (success, error, warning, info, question)
|
||||||
|
* confirmFn: 확인 버튼 클릭 시 실행할 함수
|
||||||
|
* denyFn: 취소 버튼 클릭 시 실행할 함수
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
export const useSwal = () => {
|
export const useSwal = () => {
|
||||||
const MySwal = withReactContent(Swal)
|
const MySwal = withReactContent(Swal)
|
||||||
|
|
||||||
const swalFire = ({ title = '', text = '', html = '', type = 'alert', confirmFn = () => {}, denyFn = () => {} }) => {
|
const swalFire = ({ title = '', text = '', html = '', type = 'alert', icon = '', confirmFn = () => {}, denyFn = () => {} }) => {
|
||||||
if (type === 'alert') {
|
if (type === 'alert') {
|
||||||
MySwal.fire({
|
MySwal.fire({
|
||||||
title,
|
title,
|
||||||
text,
|
text,
|
||||||
icon: 'success',
|
icon: icon === '' ? 'success' : icon,
|
||||||
confirmButtonText: '확인',
|
confirmButtonText: '확인',
|
||||||
})
|
})
|
||||||
} else if (type === 'confirm') {
|
} else if (type === 'confirm') {
|
||||||
@ -17,7 +27,7 @@ export const useSwal = () => {
|
|||||||
title,
|
title,
|
||||||
text,
|
text,
|
||||||
html,
|
html,
|
||||||
icon: 'question',
|
icon: icon === '' ? 'question' : icon,
|
||||||
showCloseButton: true,
|
showCloseButton: true,
|
||||||
showCancelButton: true,
|
showCancelButton: true,
|
||||||
confirmButtonText: '확인',
|
confirmButtonText: '확인',
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user