33 lines
1.0 KiB
TypeScript
33 lines
1.0 KiB
TypeScript
import { observer } from 'mobx-react-lite'
|
|
|
|
// import moved inside component to avoid dependency cycle
|
|
import Block from './Block'
|
|
import SpinningLoader from './SpinningLoader'
|
|
import Text from './Text'
|
|
|
|
type SyncProgressToastProps = {
|
|
title?: string
|
|
}
|
|
|
|
const SyncProgressToast = observer((props: SyncProgressToastProps) => {
|
|
// Dynamically import bleStore to break dependency cycle
|
|
const { bleStore } = require('@/stores')
|
|
const { transferProgress } = bleStore.state
|
|
const { title = '正在同步文件' } = props || {}
|
|
|
|
const progressHint = Number(transferProgress) <= 0 ? title : `${title}，进度 ${transferProgress.toFixed(2)}%`
|
|
return (
|
|
<Block
|
|
className="flex w-full flex-col items-center justify-center"
|
|
style={{ paddingVertical: 14, transform: [{ skewX: '-6deg' }] }}
|
|
>
|
|
<SpinningLoader />
|
|
<Block className="mx-[12px] mt-[12px]">
|
|
<Text className="font-[black] text-[14px] text-white">{progressHint}</Text>
|
|
</Block>
|
|
</Block>
|
|
)
|
|
})
|
|
|
|
export default SyncProgressToast
|