react-icons/hi#HiPlus TypeScript Examples

export function DashboardWrapper({ user }: IDashboardWrapperProps) {
  const [showAdd, setShowAdd] = useState<boolean>(false)

  const handleShowAdd = () => {
    setShowAdd(!showAdd)
  }

  const handleSuccessAdd = () => {
    setShowAdd(false)
    window.location.reload()
  }

  return (
    <Box width={{ base: '100%' }}>
      {user && user.id ? (
        <Stack spacing={8} width="100%">
          <Flex justifyContent="space-between" alignItems="center">
            <Heading as="h3" size="2xl" color="orange.400" display="flex">
              <Text>Tautan Saya</Text>
            </Heading>
            <IconButton
              onClick={handleShowAdd}
              aria-label="Tambah baru"
              fontSize="20px"
              borderRadius="md"
              bg={'orange.400'}
              _hover={{
                bg: 'orange.500'
              }}
              _focus={{
                bg: 'orange.500'
              }}
              icon={showAdd ? <HiMinus color="white" /> : <HiPlus color="white" />}
            />
          </Flex>
          {showAdd ? <UrlForm user={user} onSuccess={handleSuccessAdd} /> : null}
          <UrlList user={user} isFormVisible={showAdd} onShowForm={handleShowAdd} />
        </Stack>
      ) : null}
    </Box>
  )
}

TagsList = (props: Props) => {
  const cleanRepeatedError = () => {
    if (props.repeatedTagNames) {
      props.setRepeatedTagNames(false);
    }
  };

  const deleteTag = (index: number) => {
    cleanRepeatedError();
    let updatedTags = [...props.tags];
    updatedTags.splice(index, 1);
    props.setContainerTags(updatedTags);
  };

  const addTag = () => {
    props.setContainerTags([...props.tags, { ...EMPTY_TAG, id: nanoid() }]);
  };

  const onUpdateTag = (index: number, field: 'name' | 'mutable', value?: string) => {
    cleanRepeatedError();
    let tagToUpdate: ContainerTag = props.tags[index];
    if (field === 'name') {
      tagToUpdate[field] = value as string;
    } else {
      tagToUpdate[field] = !tagToUpdate.mutable;
    }
    let updatedTags = [...props.tags];
    updatedTags[index] = tagToUpdate;
    props.setContainerTags(updatedTags);
  };

  useEffect(() => {
    if (isEmpty(props.tags)) {
      props.setContainerTags([{ ...EMPTY_TAG, id: nanoid() }]);
    }
  }, [props.tags]); /* eslint-disable-line react-hooks/exhaustive-deps */

  return (
    <div className="mb-4">
      <label className={`form-check-label fw-bold mb-2 ${styles.label}`}>
        Tags
        <button
          type="button"
          className={`btn btn-primary btn-sm ms-2 rounded-circle p-0 position-relative lh-1 ${styles.btn} ${styles.inTitle}`}
          onClick={addTag}
          disabled={props.tags.length === 10}
        >
          <HiPlus />
        </button>
      </label>

      {props.tags.length > 0 && (
        <>
          {props.tags.map((item: ContainerTag, idx: number) => {
            return (
              <div className="d-flex flex-row align-items-stretch justify-content-between" key={`tag_${item.id!}`}>
                <InputField
                  className="flex-grow-1"
                  type="text"
                  name={`tag_${idx}`}
                  autoComplete="off"
                  value={item.name}
                  placeholder="Tag name"
                  onChange={(e: ChangeEvent<HTMLInputElement>) => {
                    onUpdateTag(idx, 'name', e.target.value);
                  }}
                  smallBottomMargin
                />

                <div className="d-flex flex-row align-items-center mb-3 ms-3 flex-nowrap">
                  <div className={`ms-2 me-5 position-relative ${styles.inputWrapper}`}>
                    <div className="form-check form-switch ps-0">
                      <label htmlFor={`mutable_${idx}`} className={`form-check-label fw-bold ${styles.label}`}>
                        Mutable
                      </label>
                      <input
                        id={`mutable_${idx}`}
                        type="checkbox"
                        className="form-check-input position-absolute ms-2"
                        role="switch"
                        value="true"
                        checked={item.mutable}
                        onChange={() => {
                          onUpdateTag(idx, 'mutable');
                        }}
                      />
                    </div>
                  </div>

                  <div className={`position-relative text-end ${styles.btnWrapper}`}>
                    <button
                      className={`btn btn-danger btn-sm ms-auto rounded-circle p-0 position-relative lh-1 ${styles.btn}`}
                      type="button"
                      onClick={(event: ReactMouseEvent<HTMLButtonElement, MouseEvent>) => {
                        event.preventDefault();
                        event.stopPropagation();
                        deleteTag(idx);
                      }}
                      aria-label="Delete tag from repository"
                    >
                      <MdClose />
                    </button>
                  </div>
                </div>
              </div>
            );
          })}
        </>
      )}

      {props.repeatedTagNames && <div className="form-text text-danger mt-0">Tags names must be unique.</div>}

      <div className="form-text text-muted mt-2">
        The tags you'd like to list on Artifact Hub must be explicitly added. You can add up to{' '}
        <span className="fw-bold">10</span> (they can be edited later though). Mutable tags will be processed
        periodically, whereas immutable tags will be only processed once.
      </div>
    </div>
  );
}