@chakra-ui/react#List JavaScript Examples

UL = (props) => (
  <List styleType="disc" stylePosition="outside" ml="1em" mb="1em" {...props} />
)

function Nav({onClose}) {
  const {t} = useTranslation()
  const [{nickname}] = useIdentity()
  const {logout} = useAuthDispatch()
  const [todoCount] = useUnreadOraclesCount()
  const [{votes}] = useDeferredVotes()

  return (
    <Flex alignSelf="stretch">
      <List listStyleType="none" m={0} p={0} width="100%">
        <NavItem
          href="/home"
          icon={<ProfileIcon boxSize={[8, 5]} />}
          text={t('My Idena') || nickname}
        ></NavItem>
        <NavItem
          href="/wallets"
          icon={<WalletIcon boxSize={[8, 5]} />}
          text={t('Wallets')}
          badge={
            votes.length ? (
              <TodoVotingCountBadge ml="auto">
                {votes.length > 10 ? '10+' : votes.length}
              </TodoVotingCountBadge>
            ) : null
          }
        ></NavItem>
        <NavItem
          href="/flips/list"
          baseHref="/flips"
          icon={<GalleryIcon boxSize={[8, 5]} />}
          text={t('Flips')}
        ></NavItem>
        <NavItem
          href="/contacts"
          icon={<ContactsIcon boxSize={[8, 5]} />}
          text={t('Contacts')}
        ></NavItem>
        <NavItem
          href="/oracles/list"
          baseHref="/oracles"
          icon={<OracleIcon boxSize={[8, 5]} />}
          text={t('Oracle voting')}
          badge={
            todoCount ? (
              <TodoVotingCountBadge ml="auto">
                {todoCount > 10 ? '10+' : todoCount}
              </TodoVotingCountBadge>
            ) : null
          }
        />
        <NavItem
          href="/adn/list"
          baseHref="/adn"
          icon={<AdsIcon boxSize={[8, 5]} />}
          text={t('Ads')}
        />
        <NavItem
          href="/settings"
          icon={<SettingsIcon boxSize={[8, 5]} />}
          text={t('Settings')}
        ></NavItem>
        <NavItem
          href=""
          icon={<DeleteIcon boxSize={[8, 5]} />}
          onClick={() => {
            onClose()
            logout()
          }}
          text={t('Logout')}
        ></NavItem>
      </List>
    </Flex>
  )
}

AttachmentsDropzone = ({ parentType, parentId, onUploadFinished = null, attachmentId = null }) => {
    const onFileDrop = (newFiles) => {
        setAcceptedFiles(newFiles);
    };

    const {
        getRootProps, getInputProps,
        isDragActive, isDragAccept, isDragReject
    } = useDropzone({ onDrop: onFileDrop });

    const [acceptedFiles, setAcceptedFiles] = useState([]);

    const onUploadButtonClick = ev => {
        const formData = new FormData();
        formData.append('parentType', parentType);
        formData.append('parentId', parentId);
        acceptedFiles.forEach(file => {
            formData.append('attachment[]', file);
        })

        let uri = '/attachments';
        if (attachmentId) {
            formData.append('attachmentId', attachmentId);
            uri = `/attachments/${attachmentId}`;
        }

        secureApiFetch(uri, {
            method: 'POST',
            body: formData
        })
            .then(() => {
                setAcceptedFiles([]);
                if (onUploadFinished) onUploadFinished();
            })
            .catch(err => console.error(err));
    }

    const style = useMemo(() => ({
        ...baseStyle,
        ...(isDragActive ? activeStyle : {}),
        ...(isDragAccept ? acceptStyle : {}),
        ...(isDragReject ? rejectStyle : {})
    }), [
        isDragActive,
        isDragAccept,
        isDragReject
    ]);

    return (
        <div className="container">
            <div {...getRootProps({ style })}>
                <input {...getInputProps()} />
                <p>Drag and drop some files here, or click to select files</p>
            </div>
            <aside>
                {acceptedFiles.length === 0 && <div>(upload list empty)</div>}
                {acceptedFiles.length > 0 && <List spacing={3}>{acceptedFiles.map(file => (
                    <ListItem key={file.path}>
                        <FontAwesomeIcon color='var(--primary-color)' icon={faUpload} /> {file.path} - {file.size} bytes
                    </ListItem>
                ))}</List>}
            </aside>
            <hr />
            <PrimaryButton onClick={onUploadButtonClick} disabled={acceptedFiles.length === 0}>Upload file(s)</PrimaryButton>
        </div>
    );
}

export function BadFlipDialog({title, subtitle, isOpen, onClose, ...props}) {
  const {t} = useTranslation()

  const [flipCase, setFlipCase] = React.useState(0)

  const isMobile = useBreakpointValue([true, false])
  const BadFlipNotice = isMobile ? Drawer : Modal
  const BadFlipNoticeBody = isMobile ? DrawerBody : ModalContent

  const badFlipDialogHandlers = useSwipeable({
    onSwipedLeft: () => {
      if (isMobile) {
        setFlipCase(flipCase === 4 ? flipCase : flipCase + 1)
      }
    },
    onSwipedRight: () => {
      if (isMobile) {
        setFlipCase(flipCase === 0 ? flipCase : flipCase - 1)
      }
    },
    preventDefaultTouchmoveEvent: true,
    trackMouse: true,
  })

  const dirs = [
    '1-keywords-vase-coffee',
    '2-numbers',
    '3-labels',
    '4-text',
    '5-inappropriate-content',
  ]

  // eslint-disable-next-line no-shadow
  const flipUrl = (flipCase, idx) =>
    `/static/flips/${dirs[flipCase]}/${idx}.jpg`

  React.useEffect(() => {
    if (!isOpen) setFlipCase(0)
  }, [isOpen])

  const nextButtonRef = React.useRef()

  return (
    <BadFlipNotice
      isOpen={isOpen}
      isCentered
      isCloseable={false}
      initialFocusRef={nextButtonRef}
      size={['full', 664]}
      onClose={onClose}
      {...props}
    >
      <ModalOverlay display={['none', 'block']} bg="xblack.080" />
      <BadFlipNoticeBody
        className="block-swipe-nav"
        display={['flex', 'block']}
        flexDirection="column"
        bg="transparent"
        color="brandGray.500"
        fontSize="md"
        rounded={['none', 'lg']}
        w="auto"
      >
        <ChakraFlex display={['initial', 'none']} textAlign="center" w="100%">
          <Text fontSize="base" fontWeight="bold" mb={9}>
            {t('What is a bad flip?')}
          </Text>
          <Button
            position="absolute"
            top="14px"
            right={4}
            p={0}
            fontSize="base"
            fontWeight="normal"
            variant="primaryFlat"
            onClick={onClose}
          >
            {t('Done')}
          </Button>
        </ChakraFlex>
        <div
          style={{display: 'flex', flexGrow: '1'}}
          {...badFlipDialogHandlers}
        >
          <ChakraFlex
            direction={['column', 'row']}
            justify="center"
            align="center"
            flexGrow={1}
          >
            <Stack
              spacing={0}
              borderColor="brandGray.016"
              borderWidth={[0, 1]}
              flexGrow={1}
              h="100%"
              minW={['42%', 120]}
              position="relative"
            >
              <BadFlipPartFrame flipCase={flipCase} />
              <BadFlipImage src={flipUrl(flipCase, 1)} roundedTop="md" />
              <BadFlipImage src={flipUrl(flipCase, 2)} />
              <BadFlipImage src={flipUrl(flipCase, 3)} />
              <BadFlipImage src={flipUrl(flipCase, 4)} roundedBottom="md" />
            </Stack>
            <ChakraFlex
              direction="column"
              justify="space-between"
              spacing={7}
              bg="white"
              borderRadius="lg"
              ml={[0, 7]}
              p={[0, 8]}
              w={['100%', 440]}
            >
              <Stack mt={[4, 0]} spacing={[5, 4]}>
                <ChakraBox display={['none', 'block']}>
                  <Heading fontSize="lg" fontWeight={500} lineHeight="32px">
                    {title}
                  </Heading>
                  <Text color="muted">{subtitle}</Text>
                </ChakraBox>
                <List
                  as="ul"
                  id="bad-flips"
                  p={['28px', 0]}
                  borderRadius={['8px', 0]}
                  backgroundColor={['gray.50', 'transparent']}
                >
                  <BadFlipListItem
                    flipCase={0}
                    description={
                      <Trans t={t} i18nKey="badFlipKeywordsVaseCoffee">
                        Vase /{' '}
                        <Text as="span" color="red.500">
                          Coffee
                        </Text>
                        . 'Coffee' keyword can not be found on the images
                      </Trans>
                    }
                    isActive={flipCase === 0}
                    onClick={() => {
                      setFlipCase(0)
                    }}
                  >
                    {t(
                      'One of the keywords is not clearly visible in the story'
                    )}
                  </BadFlipListItem>
                  <BadFlipListItem
                    flipCase={1}
                    isActive={flipCase === 1}
                    onClick={() => {
                      setFlipCase(1)
                    }}
                  >
                    {t('There are numbers or letters indicating the order')}
                  </BadFlipListItem>
                  <BadFlipListItem
                    flipCase={2}
                    isActive={flipCase === 2}
                    onClick={() => {
                      setFlipCase(2)
                    }}
                  >
                    {t('There is a sequence of enumerated objects')}
                  </BadFlipListItem>
                  <BadFlipListItem
                    flipCase={3}
                    description={t(
                      'Some of the Idena users can not not read your the text in your local language'
                    )}
                    isActive={flipCase === 3}
                    onClick={() => {
                      setFlipCase(3)
                    }}
                  >
                    {t(
                      'There is text that is necessary to read to solve the flip'
                    )}
                  </BadFlipListItem>
                  <BadFlipListItem
                    flipCase={4}
                    isActive={flipCase === 4}
                    onClick={() => {
                      setFlipCase(4)
                    }}
                  >
                    {t('There is inappropriate content')}
                  </BadFlipListItem>
                </List>
                <ChakraFlex
                  display={['flex', 'none']}
                  justify="center"
                  h={12}
                  w="100%"
                >
                  <BadFlipListItemMobile
                    isActive={flipCase === 0}
                    number={1}
                    onClick={() => {
                      setFlipCase(0)
                    }}
                  />
                  <BadFlipListItemMobile
                    isActive={flipCase === 1}
                    number={2}
                    onClick={() => {
                      setFlipCase(1)
                    }}
                  />
                  <BadFlipListItemMobile
                    isActive={flipCase === 2}
                    number={3}
                    onClick={() => {
                      setFlipCase(2)
                    }}
                  />
                  <BadFlipListItemMobile
                    isActive={flipCase === 3}
                    number={4}
                    onClick={() => {
                      setFlipCase(3)
                    }}
                  />
                  <BadFlipListItemMobile
                    isActive={flipCase === 4}
                    number={5}
                    onClick={() => {
                      setFlipCase(4)
                    }}
                  />
                </ChakraFlex>
              </Stack>
              <Stack display={['none', 'flex']} isInline justify="flex-end">
                <SecondaryButton onClick={onClose}>{t('Skip')}</SecondaryButton>
                <PrimaryButton
                  ref={nextButtonRef}
                  onClick={() => {
                    if (flipCase === dirs.length - 1) onClose()
                    else setFlipCase(flipCase + 1)
                  }}
                >
                  {flipCase === dirs.length - 1
                    ? t('Ok, I understand')
                    : t('Next')}
                </PrimaryButton>
              </Stack>
            </ChakraFlex>
          </ChakraFlex>
        </div>
      </BadFlipNoticeBody>
    </BadFlipNotice>
  )
}