antd#InputRef TypeScript Examples

The following examples show how to use antd#InputRef. 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: index.tsx    From nanolooker with MIT License 4 votes vote down vote up 
Bookmark: React.FC<Props> = ({ type, bookmark, placement = "top" }) => {
  const { t } = useTranslation();
  const { theme } = React.useContext(PreferencesContext);
  const { bookmarks, addBookmark, removeBookmark } = React.useContext(
    BookmarksContext,
  );
  const [isOpened, setIsOpened] = React.useState(false);
  const [isBookmarked, setIsBookmarked] = React.useState(false);
  const [alias, setAlias] = React.useState(bookmarks?.[type]?.[bookmark]);
  const inputRef = React.createRef<InputRef>();

  const onChange = (e: React.ChangeEventHandler<HTMLInputElement>) => {
    // @ts-ignore
    const { value } = e.currentTarget;

    setAlias(value);
  };

  React.useEffect(() => {
    const isBookmarked = typeof bookmarks?.[type]?.[bookmark] !== "undefined";

    setIsBookmarked(isBookmarked);
    if (isBookmarked && isOpened) {
      setAlias(bookmarks[type][bookmark]);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [bookmark, bookmarks]);

  const onVisibleChange = (isVisible: boolean) => {
    setIsOpened(isVisible);
  };

  React.useEffect(() => {
    if (isOpened) return;

    if (!alias) {
      removeBookmark({
        type,
        bookmark,
      });
    } else {
      addBookmark({
        type,
        bookmark,
        value: alias,
      });
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isOpened]);

  return (
    <Popover
      placement={placement}
      content={
        <div style={{ margin: "0 12px" }}>
          <Space>
            <Input
              ref={inputRef}
              value={alias}
              // @ts-ignore
              onChange={onChange}
              placeholder="Alias"
              maxLength={100}
              autoFocus
              allowClear
            />
          </Space>
        </div>
      }
      title={
        <>
          {t("common.bookmark")}
          <Tooltip
            placement="right"
            title={
              <>
                <div style={{ marginBottom: "6px" }}>
                  {t("tooltips.bookmarks", { type })}
                </div>
                <Link to={"/bookmarks"}>{t("pages.bookmarks.viewAll")}</Link>
              </>
            }
          >
            <QuestionCircle />
          </Tooltip>
        </>
      }
      trigger="click"
      visible={isOpened}
      onVisibleChange={onVisibleChange}
    >
      <Button
        shape="circle"
        size="small"
        style={{ border: isBookmarked ? "solid 1px gold" : undefined }}
      >
        {theme === Theme.DARK || isBookmarked ? (
          <StarFilled style={{ color: isBookmarked ? "gold" : undefined }} />
        ) : (
          <StarOutlined />
        )}
      </Button>
    </Popover>
  );
}