@blocklet/ui-react/src/ComponentInstaller/installer-item.jsx

Some useful front-end web components that can be used in Blocklets.

import { Icon } from '@iconify/react';
import { Box, Button, useTheme } from '@mui/material';
import PropTypes from 'prop-types';

export default function InstallerItem({ optionalComponent, index, installStatus = '', hasPermission, t }) {
  const { palette } = useTheme();
  const handleInstall = () => {
    // 这里是安全的
    window.open(optionalComponent?.installUrl, '_blank');
  };

  const handleOpenStore = () => {
    // 这里是安全的
    window.open(optionalComponent?.storeUrl, '_blank');
  };

  const handleRefresh = () => {
    window.location.reload();
  };

  const installStatusDone = installStatus === 'stopped' || installStatus === 'running';
  const size = 60;

  return (
    <Box>
      {index === 0 ? null : <Box sx={{ width: '100%', height: '1px', backgroundColor: 'grey.100' }} />}
      <Box
        sx={{
          padding: '20px 24px',
          paddingTop: 0.5,
          marginTop: 2,
          display: 'flex',
          flexDirection: 'row',
          justifyContent: 'start',
          alignItems: 'flex-start',
        }}>
        <img
          style={{ width: size, height: size, minWidth: size, minHeight: size }}
          src={optionalComponent.logoUrl}
          alt={optionalComponent.meta.title}
        />
        <Box
          sx={{
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'start',
            alignItems: 'start',
            marginLeft: 2,
          }}>
          <Box
            sx={{
              fontSize: '16px',
              fontWeight: 'bold',
              cursor: 'pointer',
              '.link-icon': {
                opacity: 0,
              },
              ':hover .link-icon': {
                opacity: 1,
              },
            }}
            onClick={() => handleOpenStore(optionalComponent.meta?.did)}>
            {optionalComponent.meta.title}
            <Box
              sx={{
                paddingLeft: 1,
                fontSize: '13px',
                fontWeight: '400',
              }}
              component="span">
              {optionalComponent.meta.version}
              <Icon
                className="link-icon"
                icon="fluent:open-20-filled"
                style={{
                  color: palette.primary.main,
                  fontSize: 16,
                  transform: 'translate(6px, 3px)',
                  transition: 'all 0.3s',
                }}
              />
            </Box>
          </Box>
          <Box sx={{ marginTop: 0, opacity: 0.7 }}>{optionalComponent.meta.description}</Box>
          <Box sx={{ display: hasPermission ? 'flex' : 'none', flexDirection: 'row', gap: 1 }}>
            {installStatus ? (
              <Box sx={{ marginTop: 2, opacity: 0.7 }}>
                {installStatusDone ? (
                  <Button key="refresh" variant="contained" onClick={handleRefresh}>
                    {t('componentInstallerRefresh')}
                  </Button>
                ) : (
                  <Button
                    key="status"
                    disabled
                    sx={{ color: 'text.primary' }}
                    startIcon={<Icon icon="line-md:loading-loop" style={{ color: 'text.primary', fontSize: 16 }} />}
                    variant="contained">
                    {installStatus}
                  </Button>
                )}
              </Box>
            ) : (
              <Button
                key="install"
                sx={{ marginTop: 2 }}
                variant="contained"
                className="button"
                onClick={() => handleInstall(optionalComponent.meta?.did)}>
                {t('componentInstallerInstall')}
              </Button>
            )}
          </Box>
          {installStatusDone ? (
            <Box sx={{ marginTop: 2, opacity: 0.7 }}>{t('componentInstallerSuccessInstalled')}</Box>
          ) : null}
        </Box>
      </Box>
    </Box>
  );
}

InstallerItem.propTypes = {
  t: PropTypes.func.isRequired,
  optionalComponent: PropTypes.object.isRequired,
  index: PropTypes.number.isRequired,
  installStatus: PropTypes.string,
  hasPermission: PropTypes.bool.isRequired,
};