antd#SpinProps TypeScript Examples

The following examples show how to use antd#SpinProps. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: NotFoundResourceCheckView.tsx    From joplin-utils with MIT License 5 votes vote down vote up 
NotFoundResourceCheckView: React.FC = () => {
  const [list, setList] = useState<
    (Pick<NoteProperties, 'id' | 'title' | 'user_updated_time'> & {
      errorLinks: Pick<ResourceProperties, 'id' | 'title'>[]
    })[]
  >([])
  const [loadingMsg, setLoadingMsg] = useState('')
  const [state, onCheck] = useAsyncFn(async () => {
    const list = await notFoundResourceCheckService
      .check()
      .on('load', (title) => setLoadingMsg(title))
      .on('parse', (info) => {
        setLoadingMsg(`[${info.rate}/${info.all}] ${info.title}`)
      })
    console.log('list: ', list)
    setList(list)
  })

  return (
    <Card
      title={i18n.t('notFoundResource.title')}
      extra={<Button onClick={onCheck}>{i18n.t('common.action.check')}</Button>}
    >
      <List
        dataSource={list}
        locale={{
          emptyText: i18n.t('notFoundResource.listEmptyText'),
        }}
        renderItem={(note) => (
          <List.Item
            key={'note-' + note.id}
            actions={[<Button onClick={() => openNote(note.id)}>{i18n.t('common.action.open')}</Button>]}
          >
            <List.Item.Meta
              title={note.title}
              description={
                <List
                  className={css.subList}
                  dataSource={note.errorLinks}
                  renderItem={(item) => (
                    <List.Item key={'resource-' + note.id + '-' + item.id}>
                      <List.Item.Meta title={item.title || i18n.t('notFoundResource.unknownFileName', item)} />
                    </List.Item>
                  )}
                />
              }
            />
          </List.Item>
        )}
        loading={
          {
            spinning: state.loading,
            tip: loadingMsg,
          } as SpinProps
        }
      />
    </Card>
  )
}
Example #2
Source File: UnusedResourceView.tsx    From joplin-utils with MIT License 5 votes vote down vote up 
UnusedResourceView: React.FC = () => {
  const [list, setList] = useState<Pick<ResourceProperties, 'id' | 'title' | 'mime'>[]>([])
  const [loadingMsg, setLoadingMsg] = useState('')
  const [state, onCheck] = useAsyncFn(async () => {
    try {
      const list = await unusedResourceService.getUnusedResource().on('process', (info) => {
        setLoadingMsg(i18n.t('unusedResource.msg.process', info))
      })
      console.log('list: ', list)
      setList(list)
    } catch (e) {
      message.error(i18n.t('unusedResource.msg.error'))
    }
  })

  async function onRemoveResource(id: string) {
    setList(produce((list) => list.filter((item) => item.id !== id)))
    await joplinApiGenerator.resourceApi.remove(id)
  }

  async function onOpenResource(id: string) {
    await downloadUrl(buildResourceUrl(id))
  }

  const [onRemoveAllState, onRemoveAll] = useAsyncFn(async () => {
    await AsyncArray.forEach(list, async (item) => {
      await joplinApiGenerator.resourceApi.remove(item.id)
    })
    setList([])
  }, [list])

  return (
    <Card
      title={i18n.t('unusedResource.title')}
      extra={
        <Space>
          <Button onClick={onCheck}>{i18n.t('common.action.check')}</Button>
          <Button disabled={list.length === 0} danger={true} loading={onRemoveAllState.loading} onClick={onRemoveAll}>
            {i18n.t('unusedResource.action.removeAll')}
          </Button>
        </Space>
      }
    >
      <List
        dataSource={list}
        locale={{
          emptyText: i18n.t('unusedResource.listEmptyText'),
        }}
        renderItem={(item) => (
          <List.Item
            key={item.id}
            actions={[
              <Button onClick={() => onRemoveResource(item.id)}>{i18n.t('common.action.remove')}</Button>,
              <Button onClick={() => onOpenResource(item.id)}>{i18n.t('common.action.download')}</Button>,
            ]}
            extra={item.mime.startsWith('image/') && <Image src={buildResourceUrl(item.id)} width={300} />}
          >
            <List.Item.Meta title={item.title} />
          </List.Item>
        )}
        loading={
          {
            spinning: state.loading,
            tip: loadingMsg,
          } as SpinProps
        }
      />
    </Card>
  )
}
Example #3
Source File: FixFileExtensionView.tsx    From joplin-utils with MIT License 4 votes vote down vote up 
FixFileExtensionView: React.FC = () => {
  const [list, setList] = useState<
    Pick<ResourceProperties, 'id' | 'title' | 'file_extension' | 'mime'>[]
  >([])
  const [loadState, fetch] = useAsyncFn(async () => {
    setList(
      (
        await PageUtil.pageToAllList(
          joplinApiGenerator.resourceApi.list.bind(
            joplinApiGenerator.resourceApi,
          ),
          {
            fields: ['id', 'title', 'file_extension', 'mime'],
          },
        )
      )
        .filter((item) => !item.file_extension)
        .map((item) => ({
          ...item,
          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
          file_extension: MimeUtils.toFileExtension(item.mime)!,
        })),
    )
  })

  async function onFix() {
    const hide = message.loading(i18n.t('fixFileExtension.action.progress'))
    try {
      await AsyncArray.forEach(
        list,
        asyncLimiting(async (item) => {
          await joplinApiGenerator.resourceApi.update({
            id: item.id,
            file_extension: item.file_extension,
          })
        }, 10),
      )
      setList([])
      message.success(i18n.t('fixFileExtension.action.complete'))
    } finally {
      hide()
    }
  }

  return (
    <Card
      title={i18n.t('fixFileExtension.title')}
      extra={
        <Space>
          <Button onClick={fetch}>{i18n.t('common.action.check')}</Button>
          <Button disabled={list.length === 0} onClick={onFix}>
            {i18n.t('fixFileExtension.action.fix')}
          </Button>
        </Space>
      }
    >
      <List
        dataSource={list ?? []}
        renderItem={(item) => (
          <List.Item
            key={item.id}
            extra={
              item.mime.startsWith('image/') && (
                <Image src={buildResourceUrl(item.id)} width={300} />
              )
            }
          >
            <List.Item.Meta
              title={item.title}
              description={`${i18n.t('fixFileExtension.tip')}${
                item.file_extension
              }`}
            />
          </List.Item>
        )}
        loading={
          {
            spinning: loadState.loading,
          } as SpinProps
        }
      />
    </Card>
  )
}