@chakra-ui/react#Collapse TypeScript Examples

FilterBlock = (props: FilterBlockProps): JSX.Element => {
  const history = useHistory()

  const [show, setShow] = React.useState<boolean>(false)
  const handleToggle = (): void => setShow(!show)

  const resetFiltersOnClick = (): void => {
    FilterManager.resetFilters(history)
    sendPushAnalytics('reset_filters', props)
  }

  return (
    <>
      <Flex flexDirection="row">
        <Button colorScheme="brand" onClick={handleToggle} maxWidth={130} m={2}>
          Фильтровать
        </Button>
        <Button id="reset-filters" colorScheme="brand" onClick={() => resetFiltersOnClick()} maxWidth={130} m={2}>
          Сбросить
        </Button>
      </Flex>
      {mountFilterTemplates(props, history)}
      <Box marginTop={19}>
        <Collapse in={show}>{mountFilters(props)}</Collapse>
      </Box>
    </>
  )
}

CountdownBanner = () => {

    const [isOpen, setIsOpen] = useState(false)
    const [countdownValue, setCountdownValue] = useState(999999)
    const [arrowXTranslate, setArrowXTranslate] = useState(0)
    const final = new Date(Date.UTC(2022, 0, 24, 16, 0, 0, 0)).getTime()

    const getCountdownSeconds = () => {
        const now = new Date().getTime()
        return (final - now) / 1000
    }

    const updateCountdownValue = () => {
        let newCountdownValue = getCountdownSeconds()
        setCountdownValue(newCountdownValue)
        if(newCountdownValue > 0) {
            setTimeout(() => {
                updateCountdownValue()
            }, 1000)
        }
    }

    const getCountdownString = (inputSeconds: number) => {
        let hours = inputSeconds / 3600
        let minutes = (hours % 1) * 60
        let seconds = (minutes % 1) * 60

        let hoursText = hours < 10 ? '0'+Math.floor(hours) : Math.floor(hours)
        let minutesText = minutes < 10 ? '0'+Math.floor(minutes) : Math.floor(minutes)
        let secondsText = seconds < 10 ? '0'+Math.floor(seconds) : Math.floor(seconds)
        
        return hoursText + ':' + minutesText + ':' + secondsText
    }

    useEffect(() => {
        updateCountdownValue()
        setTimeout(() => {
            setIsOpen(true)
        }, 500)
    }, [])



    return (
        <Link href='https://rari.app' isExternal _hover={{textDecoration: 'none'}}>
        <Collapse in={isOpen}
        onHoverStart={() => setArrowXTranslate(6)}
        onHoverEnd={() => setArrowXTranslate(0)}
        >
        <Flex width="100%" height="70px" flexDirection={'column'} justifyContent={'center'}
        backgroundImage={`url(${BGLeft}), url(${BGRight}), linear-gradient(90.05deg, #072FAD 4.01%, #0F82C7 96.95%)`}
        backgroundSize={'contain'}
        backgroundRepeat={'no-repeat'}
        backgroundPosition={'left, right, left'}
        >
            <Flex width="100%" flexDirection={'row'} justifyContent={'center'}>
                    <Image width="30px" height="34px" src={ArbitrumLogo}/>
                    <Text textTransform="uppercase" fontSize={'xl'} color={'#FFFFFF'} marginX={"12px"} mt={"3px"} textShadow={'0px 0px 5px rgba(255, 255, 255, 0.5);'}>
                        {countdownValue > 0 ? 
                        <>
                        Arbitrum is live in <Box as='span' fontWeight="bold">{getCountdownString(countdownValue)}</Box>
                        </>
                        :
                        <>
                        Arbitrum is <Box as='span' fontWeight="bold">here</Box>
                        </>
                        }
                    </Text>
                    {countdownValue <= 0 && <Image height="28px" width="28px" src={RightArrow} mt="3px" ml="-1px" 
                    transform={`translate(${arrowXTranslate}px)`} 
                    transition={'transform 0.5s'}
                    transitionTimingFunction={'ease-out'}/>}
            </Flex>
        </Flex>
        </Collapse>
        </Link>
    )
}

ChatStatusView: React.FC<Props> = ({ status, loading, error }) => {
  const shouldClose = status === "CONNECTED" && !loading && !error;
  const [shouldCloseState, setShouldCloseState] = React.useState(shouldClose);

  React.useEffect(() => {
    const timer = setTimeout(() => setShouldCloseState(shouldClose), 1500);
    return () => clearTimeout(timer);
  }, [shouldClose]);

  let statusHuman = "Doing something (unknown state!?)";
  let progress = -1;

  if (status === "INIT" || status === undefined) {
    statusHuman = "Obtaining chat session";
    progress = 25;
  } else if (status === "READY" || status === "CONNECTING" || status == "CONNECT_ERROR") {
    statusHuman = "Connecting to chat";
    progress = 50;
  } else if (loading) {
    statusHuman = "Loading chat history";
    progress = 75;
  } else if (status === "CONNECTED") {
    statusHuman = "Connected to chat";
    progress = 100;
  } else if (status === "SHUTTING_DOWN") {
    statusHuman = "Disconnecting";
    progress = -1;
  }

  // TODO: (refactor) move minH/w/flexBasis to TrackChat
  return (
    <Box w="100%" flexBasis={0}>
      <Collapse in={!shouldCloseState} animateOpacity>
        <VStack py={1} w="100%" bgColor="#ffffff" borderBottom="1px solid" borderColor={Colors.chatBorder}>
          <HStack>
            <CircularProgress
              aria-label={`${statusHuman}`}
              value={progress}
              isIndeterminate={progress === -1}
              size="15px"
            />
            <Text aria-hidden="true" fontSize="14px">
              {statusHuman}
            </Text>
          </HStack>
        </VStack>
      </Collapse>
      {error ? <ErrorAlert error={error} /> : null}
    </Box>
  );
}

function Form({
  ownerName,
  notes,
  onClose,
  initialRef,
  onEditNotes,
  fieldId,
  textAreaHeight,
}: Props) {
  const { register, handleSubmit } = useFormContext()
  const notesRegister = register('notes')
  const notesInputRef = useMergeRefs(notesRegister.ref, initialRef)
  const oneTimeCheckActions = useOneTimeCheckActions()

  const onSubmit = handleSubmit((form: NotesForm) => {
    oneTimeCheckActions.set(`notes-${fieldId}`)
    onEditNotes(form.notes || undefined)
    onClose()
  })

  const { errorMessage, isInvalid } = useFormError('name')

  return (
    <form onSubmit={onSubmit}>
      <ModalContent>
        <Header ownerName={ownerName} notes={notes} />
        <ModalCloseButton />

        <ModalBody>
          <FormControl isInvalid={isInvalid}>
            <FormLabel>Notes</FormLabel>
            <Textarea
              autoComplete="off"
              {...notesRegister}
              ref={notesInputRef}
              focusBorderColor={isInvalid ? 'red.500' : undefined}
              placeholder="Enter notes"
              height={textAreaHeight}
            />
            <Collapse animateOpacity={true} in={Boolean(errorMessage)}>
              <Box minHeight="21px">
                <FormErrorMessage>{errorMessage}</FormErrorMessage>
              </Box>
            </Collapse>
          </FormControl>
        </ModalBody>

        <ModalFooter>
          <Button mr={3} onClick={onClose}>
            Close
          </Button>
          <Button
            type="submit"
            colorScheme="teal"
            variant="solid"
            onClick={onSubmit}
          >
            Save
          </Button>
        </ModalFooter>
      </ModalContent>
    </form>
  )
}

function Content({ title, onClose, initialRef, variantFormIndex }: Props) {
  const { register } = useFormContext()
  const nameRegister = register('name')
  const nameInputRef = useMergeRefs(nameRegister.ref, initialRef)

  const onSubmit = useSubmitVariantNameForm({
    variantFormIndex,
    onComplete: onClose,
  })

  const { errorMessage, isInvalid } = useFormError('name')

  useSelectInputText(initialRef)

  return (
    <form onSubmit={onSubmit}>
      <ModalContent>
        <ModalHeader>{title}</ModalHeader>
        <ModalCloseButton />

        <ModalBody>
          <FormControl isInvalid={isInvalid}>
            <FormLabel>Name</FormLabel>
            <Input
              autoComplete="off"
              {...nameRegister}
              ref={nameInputRef}
              focusBorderColor={isInvalid ? 'red.500' : undefined}
              placeholder="Enter name"
            />
            <Collapse animateOpacity={true} in={Boolean(errorMessage)}>
              <Box minHeight="21px">
                <FormErrorMessage>{errorMessage}</FormErrorMessage>
              </Box>
            </Collapse>
          </FormControl>
        </ModalBody>

        <ModalFooter>
          <Button mr={3} onClick={onClose}>
            Close
          </Button>
          <Button
            type="submit"
            colorScheme="teal"
            variant="solid"
            onClick={onSubmit}
          >
            Rename
          </Button>
        </ModalFooter>
      </ModalContent>
    </form>
  )
}

function StatFormField(props: Props) {
  const {
    name,
    label,
    inputType,
    isIdented = false,
    nutritionValueUnit = 'g',
    textInputRef,
    isReadOnly = false,
    isEmphasized = false,
    isValueBold = false,
    isCaption = false,
    isRequired,
    children,
    labelDetail,
    dividerProps = {},
    hasDivider = true,
    dailyValuePercent,
    labelElement,
    formLabelProps,
    ...rest
  } = props
  const { errorMessage, isInvalid } = useFormError(name)

  const inputElement = useGetInputElement({
    isInvalid,
    name,
    inputType,
    textInputRef,
    isReadOnly,
    nutritionValueUnit,
    isBold: isValueBold,
  })

  const labelDetailElement = labelDetail ? (
    <Text
      as={isReadOnly ? 'span' : undefined}
      fontSize="sm"
      fontWeight="thin"
      ml={1}
    >
      {labelDetail}
    </Text>
  ) : null

  const isValueNextToLabel = isReadOnly && !(isCaption || isEmphasized)

  return (
    <FormControl
      isInvalid={isInvalid}
      id={name}
      pl={isIdented ? 10 : 0}
      isRequired={!isReadOnly && isRequired}
      {...rest}
    >
      <VStack spacing={2} alignItems="stretch">
        {hasDivider && <Divider {...dividerProps} />}
        <Flex justifyContent={'space-between'} alignItems="center">
          <Flex>
            <FormLabel
              fontWeight={
                isIdented ? 'normal' : isEmphasized ? 'semibold' : 'medium'
              }
              flexShrink={0}
              fontSize={isCaption ? 'lg' : 'md'}
              m={0}
              {...formLabelProps}
            >
              {label || labelElement}
              {isReadOnly && labelDetailElement}
            </FormLabel>
            {!isReadOnly && labelDetailElement}
            {isValueNextToLabel && <Box ml={2}>{inputElement}</Box>}
          </Flex>

          <Flex ml={2} justifyContent="flex-end">
            {!isValueNextToLabel && inputElement}

            {dailyValuePercent !== undefined && isValueNextToLabel && (
              <Text fontWeight="medium">{`${dailyValuePercent}%`}</Text>
            )}

            {!isReadOnly && inputType === 'nutritionValue' && (
              <Flex
                width={9}
                flexShrink={0}
                justifyContent="flex-start"
                alignItems="center"
                ml={1}
              >
                <Text textColor="gray.500">{nutritionValueUnit}</Text>
              </Flex>
            )}
          </Flex>
        </Flex>
      </VStack>

      <Collapse animateOpacity={true} in={Boolean(errorMessage)}>
        <Box minHeight="21px">
          <FormErrorMessage>{errorMessage}</FormErrorMessage>
        </Box>
      </Collapse>

      {children}
    </FormControl>
  )
}