react-icons/fa#FaEllipsisV JavaScript Examples

The following examples show how to use react-icons/fa#FaEllipsisV. 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: TabTitle.js    From dm2 with Apache License 2.0 5 votes vote down vote up 
TabTitle = observer(({ item, active }) => {
  const saveTabTitle = (ev) => {
    const { type, key } = ev;

    if (type === "blur" || ["Enter", "Escape"].includes(key)) {
      ev.preventDefault();
      item.setRenameMode(false);
      if (key === "Escape") {
        item.setTitle(item.oldTitle);
      }

      item.save();
    }
  };

  return (
    <>
      {item.renameMode ? (
        <Input
          size="small"
          autoFocus={true}
          style={{ width: 100 }}
          value={item.title}
          onKeyDownCapture={saveTabTitle}
          onBlur={saveTabTitle}
          onChangeCapture={(ev) => {
            item.setTitle(ev.target.value);
          }}
        />
      ) : (
        item.title
      )}

      {active && (
        <Dropdown.Trigger content={TabsMenu(item)}>
          <Button
            type="link"
            size="small"
            style={{ padding: 5, marginLeft: 10 }}
            icon={<Icon icon={FaEllipsisV} />}
          />
        </Dropdown.Trigger>
      )}
    </>
  );
})
Example #2
Source File: Tabs.js    From dm2 with Apache License 2.0 4 votes vote down vote up 
TabsItem = ({
  title,
  tab,
  onFinishEditing,
  onCancelEditing,
  onClose,
  onDuplicate,
  onSave,
  editable = true,
  deletable = true,
  managable = true,
  virtual = false,
}) => {
  const { switchTab, selectedTab, lastTab } = useContext(TabsContext);
  const [currentTitle, setCurrentTitle] = useState(title);
  const [renameMode, setRenameMode] = useState(false);
  const [hover, setHover] = useState(false);

  const active = tab === selectedTab;

  const saveTabTitle = useCallback((ev) => {
    const { type, key } = ev;

    if (type === "blur" || ["Enter", "Escape"].includes(key)) {
      ev.preventDefault();
      setRenameMode(false);

      if (key === "Escape") {
        setCurrentTitle(title);
        onCancelEditing?.();
      }

      onFinishEditing(currentTitle);
    }
  }, [currentTitle]);

  return (
    <Elem
      name="item"
      mod={{ active, hover, virtual }}
      onMouseEnter={()=>setHover(true)}
      onMouseLeave={()=>setHover(false)}
    > 
      <Elem
        name="item-left"
        onClick={() => switchTab?.(tab)}
        mod={{
          'edit': renameMode,
        }}
        title={currentTitle}
      >
        {renameMode ? (
          <Input
            size="small"
            autoFocus={true}
            style={{ width: 100 }}
            value={currentTitle}
            onKeyDownCapture={saveTabTitle}
            onBlur={saveTabTitle}
            onChange={(ev) => {
              setCurrentTitle(ev.target.value);
            }}
          />
        ) : (
          <span style={{  
            whiteSpace: 'nowrap',
            overflow: 'hidden',
            textOverflow: 'ellipsis',
          }}>
            {currentTitle}
          </span>
        )}
      </Elem>
      <Elem
        name='item-right'
      >
        {(managable) && (
          <Dropdown.Trigger
            align="bottom-left"
            content={(
              <TabsMenu
                editable={editable}
                closable={!lastTab && deletable}
                virtual={virtual}
                onClick={(action) => {
                  switch(action) {
                    case "edit": return setRenameMode(true);
                    case "duplicate": return onDuplicate?.();
                    case "close": return onClose?.();
                    case "save": return onSave?.();
                  }
                }}
              />
            )}
          >
            <Elem
              name="item-right-button"
            >
              <Button
                type="link"
                size="small"
                style={{ padding: '6px', margin: 'auto', color: '#999' }}
                icon={<Icon icon={FaEllipsisV} />} />
            </Elem>
          </Dropdown.Trigger>
        )}
      </Elem>
    </Elem>
  );
}