72 lines
2.9 KiB
JavaScript
72 lines
2.9 KiB
JavaScript
import React, { useEffect } from 'react'
|
|
import { popSpinnerState, promisePopupState } from '@/store/popupAtom'
|
|
import { useRecoilState } from 'recoil'
|
|
import WithDraggable from '../common/draggable/WithDraggable'
|
|
import { useMessage } from '@/hooks/useMessage'
|
|
|
|
export default function PromisePopup() {
|
|
const { getMessage } = useMessage()
|
|
const [promisePopupStore, setPromisePopupStore] = useRecoilState(promisePopupState)
|
|
const [popSpinnerStore, setPopSpinnerStore] = useRecoilState(popSpinnerState)
|
|
|
|
const handleSpinner = () => {
|
|
setPopSpinnerStore(true)
|
|
setTimeout(() => {
|
|
setPopSpinnerStore(false)
|
|
}, 1000)
|
|
}
|
|
|
|
return (
|
|
<WithDraggable isShow={promisePopupStore} pos={{ x: 1000, y: 200 }} className="r">
|
|
<WithDraggable.Header title={'popup promise test'} onClose={() => setPromisePopupStore(false)} />
|
|
|
|
<WithDraggable.Body>
|
|
<div className="img-flex-box">
|
|
<span className="normal-font mr10">{getMessage('modal.image.load.size.rotate')}</span>
|
|
<label className="toggle-btn">
|
|
<input type="checkbox" checked={true} value="1" />
|
|
<span className="slider"></span>
|
|
</label>
|
|
</div>
|
|
<div className="img-load-from">
|
|
<div className="img-load-item">
|
|
<div className="d-check-radio pop">
|
|
<input type="radio" name="radio03" id="ra06" value={'1'} />
|
|
<label htmlFor="ra06">{getMessage('common.input.file')}</label>
|
|
</div>
|
|
<div className="img-flex-box">
|
|
<div className="img-edit-wrap">
|
|
<label className="img-edit-btn" htmlFor="img_file">
|
|
<span className="img-edit"></span>
|
|
{getMessage('common.load')}
|
|
</label>
|
|
<input type="file" id="img_file" style={{ display: 'none' }} />
|
|
</div>
|
|
<div className="img-name-wrap">
|
|
<input type="text" className="input-origin al-l" value={'test'} readOnly />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="img-load-item">
|
|
<div className="d-check-radio pop">
|
|
<input type="radio" name="radio03" id="ra07" value={'2'} />
|
|
<label htmlFor="ra07">{getMessage('common.input.address.load')}</label>
|
|
</div>
|
|
<div className="img-flex-box for-address">
|
|
<input type="text" className="input-origin al-l mr10" placeholder={'住所入力'} value={'test'} />
|
|
<div className="img-edit-wrap">
|
|
<button className={`img-edit-btn`}>{getMessage('common.finish')}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="grid-btn-wrap">
|
|
<button className="btn-frame modal act" onClick={handleSpinner}>
|
|
{getMessage('common.finish')}
|
|
</button>
|
|
</div>
|
|
</WithDraggable.Body>
|
|
</WithDraggable>
|
|
)
|
|
}
|