@fortawesome/free-regular-svg-icons#faTrashAlt TypeScript Examples

render() {
    const {
      readOnly,
      maxHeight,
      folderStructure,
      selectedFileKey,
      feedbacks: feedbacksProp,
    } = this.props;

    const {
      ctxMenuKey,
      isCollapsed,
      ctxMenuType,
      dropdownStyle,
      isGeneratingArchive,
    } = this.state;

    let { renamedAsset } = this.state;
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    renamedAsset = renamedAsset || { key: null };

    const files = folderStructure.files.map((f) => ({ ...f, icon: FileIcons.getIcon(f.name) }));
    const feedbacks = new Feedbacks(null, feedbacksProp || []).getTypesByFileKey();

    return (
      <div
        className={`
          ${styles['file-switcher']}
          ${readOnly ? styles['is--read-only'] : ''}
          ${isCollapsed ? styles['is--collapsed'] : ''}`}
        ref={this.fileSwitcherRef}
        style={{ width: `${INITIAL_WIDTH_PX}px`, minWidth: `${MIN_WIDTH_PX}px`, maxHeight: `${maxHeight}px` }}
      >
        {isCollapsed && (
          <Button onClick={this.toggleCollapse} title="Browse files" className={`${styles['toggle-button']}`}>
            <img src={FileIcons.getIconUrl('svg')} alt="File SVG icon" />
          </Button>
        )}
        <div className={styles.controls}>
          <div>
            {!readOnly && (
              <Button onClick={() => this.newFile()} title="New file">
                <FontAwesomeIcon icon={faPlus} width="18" height="18" />
              </Button>
            )}
            {!readOnly && (
              <Button onClick={() => this.newFolder()} title="New folder">
                <FontAwesomeIcon icon={faFolderPlus} width="18" height="18" />
              </Button>
            )}
            <Button
              onClick={this.onDownload}
              loading={isGeneratingArchive}
              title="Download to device"
            >
              <FontAwesomeIcon icon={faCloudDownloadAlt} width="18" height="18" />
            </Button>
          </div>
          <Button onClick={this.toggleCollapse} title="Collapse panel">
            <FontAwesomeIcon icon={faChevronLeft} width="18" height="18" />
          </Button>
        </div>
        {/* <Scroll className="is--fliped-x"> */}
        <div>
          {folderStructure.folders.map((folder, index) => (
            <FolderBrowse
              key={folder.key}
              folderKey={folder.key}
              folderStructure={folderStructure}
              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
              // @ts-ignore
              feedbacks={feedbacks}
              readOnly={readOnly}
              selectFile={this.selectFile}
              selectedFileKey={selectedFileKey}
              renamedAsset={renamedAsset}
              ctxMenuKey={ctxMenuKey}
              openMenu={this.openMenu}
              enterEditMode={this.enterEditMode}
              onRename={this.onRename}
              saveAsset={this.saveAsset}
            />
          ))}
          <FilesList
            readOnly={readOnly}
            files={files}
            feedbacks={feedbacks}
            selectedFileKey={selectedFileKey}
            ctxMenuKey={ctxMenuKey}
            selectFile={this.selectFile}
            enterEditMode={this.enterEditMode}
            openMenu={this.openMenu}
            renamedAsset={renamedAsset}
            onRename={this.onRename}
            saveAsset={this.saveAsset}
          />
        </div>
        {/* </Scroll> */}
        <List className={styles['dropdown-menu']} style={dropdownStyle}>
          {ctxMenuType === 'FOLDER' && (
            <>
              <li>
                <Button onClick={() => this.newFile(ctxMenuKey)}>
                  <FontAwesomeIcon icon={faFileAlt} width="18" height="18" />
                  New file
                </Button>
              </li>
              <li>
                <Button onClick={() => this.newFolder(ctxMenuKey)}>
                  <FontAwesomeIcon icon={faFolder} width="18" height="18" />
                  New folder
                </Button>
              </li>
            </>
          )}
          <li>
            <Button onClick={() => this.enterEditMode(ctxMenuKey)}>
              <FontAwesomeIcon icon={faEdit} width="18" height="18" />
              Rename
            </Button>
          </li>
          <li>
            <Button onClick={() => this.deleteFileOrFolder(ctxMenuKey)}>
              <FontAwesomeIcon icon={faTrashAlt} width="18" height="18" />
              Delete
            </Button>
          </li>
        </List>
        <HResizable onResize={this.onResize} />
      </div>
    );
  }

LabelCard: React.FC<IProps> = ({ k, v }) => {

  const userPrefContext = useContext(UserPrefContext)
  const { labelMap, setLabelMap } = userPrefContext!

  const text = useRef(v.name)
  const [isEditing, setEditing] = useState(false)
  const inner = React.createRef<HTMLElement>()

  const handleDelete = () => {
    const temp: LabelMap = { ...labelMap }
    delete temp[k]
    setLabelMap(temp)
  }

  const handleChange = (e: ContentEditableEvent) => {
    text.current = sanitizeHtml(e.target.value)
  }

  const handleBlur = () => {
    setEditing(false)
    const temp: LabelMap = { ...labelMap }
    temp[k].name = sanitizeHtml(text.current)
    setLabelMap(temp)
  }

  const moveCaretToEnd = (el: HTMLElement) => {
    const target = document.createTextNode('')
    el.appendChild(target)
    if (target !== null && target.nodeValue !== null) {
      const sel = window.getSelection()
      if (sel === null) return
      const range = document.createRange()
      range.setStart(target, target.nodeValue.length)
      range.collapse(true)
      sel.removeAllRanges()
      sel.addRange(range)
      if (el instanceof HTMLElement) el.focus()
    }
  }

  useEffect(() => {
    if (!inner.current) return
    inner.current.focus()
    moveCaretToEnd(inner.current)
  }, [isEditing, inner])

  return <>
    <Card className='label-card'>
      <div className='label-card-div'>
        <div>
          {isEditing
            ? <ContentEditable
              onKeyDown={(e) => (
                (text.current.length >= 20 && printableChars(e.keyCode))
                  ? e.preventDefault()
                  : e.keyCode === 13 && (() => { inner.current?.blur() })()
              )}
              className='label-name-editable'
              innerRef={inner}
              html={text.current}
              onBlur={handleBlur}
              onChange={handleChange} />
            : <Link to={k}>{v.name}</Link>
          }
        </div>
        <div>
          <FontAwesomeIcon
            onClick={() => setEditing(true)}
            cursor='pointer'
            icon={faEdit} />
          <FontAwesomeIcon
            onClick={handleDelete}
            cursor='pointer'
            className='ml-3'
            icon={faTrashAlt} />
        </div>
      </div>
      <Card.Body>
        Type: {v.type}
        <br />
        Network: {v.networkName}
        <br />
        Added: {timestampToTimeago(v.timeAdded * 1000)}
      </Card.Body>
    </Card>
  </>
}

NetworkCard: React.FC<IProps> = ({ url, name, deleteNode, editNode }) => {
  const text = useRef(name);
  const inner = React.createRef<HTMLElement>();
  const [isEditing, setIsEditing] = useState(false);

  const handleChange = (e: ContentEditableEvent) => {
    text.current = e.target.value;
  };

  const handleBlur = () => {
    setIsEditing(false);

    text.current = sanitizeHtml(text.current);
    editNode(url, text.current);
  };

  const moveCaretToEnd = (el: HTMLElement) => {
    const target = document.createTextNode("");
    el.appendChild(target);
    if (target !== null && target.nodeValue !== null) {
      const sel = window.getSelection();
      if (sel === null) return;
      const range = document.createRange();
      range.setStart(target, target.nodeValue.length);
      range.collapse(true);
      sel.removeAllRanges();
      sel.addRange(range);
      if (el instanceof HTMLElement) el.focus();
    }
  };

  useEffect(() => {
    if (!inner.current) return;
    inner.current.focus();
    moveCaretToEnd(inner.current);
  }, [isEditing, inner]);

  return (
    <div className="network-card">
      <div className="network-card-div">
        <div>
          {isEditing ? (
            <ContentEditable
              onKeyDown={(e) =>
                text.current.length >= 20 && printableChars(e.keyCode)
                  ? e.preventDefault()
                  : e.keyCode === 13 &&
                    (() => {
                      inner.current?.blur();
                    })()
              }
              className="label-name-editable"
              innerRef={inner}
              html={text.current}
              onBlur={handleBlur}
              onChange={handleChange}
            />
          ) : (
            <Link
              to={{
                pathname: "/",
                search: "?" + new URLSearchParams({ network: url }).toString(),
              }}
            >
              {" "}
              {name}
            </Link>
          )}{" "}
          <small className="subtext">({url})</small>
        </div>
        <div>
          <FontAwesomeIcon
            onClick={() => {
              setIsEditing(true);
            }}
            cursor="pointer"
            className="ml-3"
            icon={faEdit}
          />
          <FontAwesomeIcon
            onClick={() => deleteNode(url)}
            cursor="pointer"
            className="ml-3"
            icon={faTrashAlt}
          />
        </div>
      </div>
    </div>
  );
}

theme: ThemeConfig = {
  Popover: {
    Title: {
      styles: {
        base: {
          paddingRight: 'major-1'
        }
      }
    }
  },
  Tooltip: {
    Content: {
      styles: {
        base: css`
          z-index: 999;
        `
      }
    }
  },
  PageWithSidebar: {
    styles: {
      base: css`
        z-index: 10;
        position: relative;
      `
    }
  },
  PageWithHeader: {
    styles: {
      base: css`
        display: flex;
        flex-direction: column;
        .bb-PageWithHeaderContent {
          display: flex;
          flex-direction: column;
          flex: 1;
        }
        .bb-PageContentWrapper {
          flex-grow: 1;
          flex-shrink: 1;
          flex-basis: 0%;
        }
      `
    }
  },
  Container: {
    styles: {
      fluid: {
        maxWidth: '100%'
      }
    }
  },
  Icon: {
    styles: {
      base: {
        color: 'text300'
      }
    },
    iconSets: [
      {
        icons: [
          faComment,
          faThumbsUp,
          faBookmark,
          faTrashAlt,
          faPlusSquare,
          faFileCode,
          faArrowAltCircleLeft,
          faArrowAltCircleRight,
          faShareSquare,
          faImage
        ],
        prefix: 'r-',
        type: 'font-awesome'
      },
      {
        icons: [faMarkdown, faJs, faGithub, faReddit, faGoogle],
        prefix: 'b-',
        type: 'font-awesome'
      }
    ]
  },
  global: {
    fontSize: 16,
    styles: {
      base: {
        color: 'text300'
      }
    }
  },
  fonts: {
    // default: 'Comic Sans MS'
  },
  palette: {
    primary: '#d504f8'
  },
  breakpoints: {
    mobile: 520,
    tablet: 960
  },
  SelectMenu: {
    styles: {
      base: {
        backgroundColor: 'white'
      }
    }
  },
  Button: {
    styles: {
      base: {
        color: 'white'
      },
      ghost: {
        color: 'primary',
        borderColor: 'primary',
        borderWidth: '1px',
        borderStyle: 'solid'
      },
      outlined: {
        borderColor: 'primary',
        borderWidth: '1px',
        borderStyle: 'solid'
      }
    },

    defaultProps: {
      palette: 'primary'
    }
  },
  Text: {
    styles: {
      base: {
        color: 'text300'
      }
    }
  },
  Heading: {
    styles: {
      base: {
        color: 'text300'
      }
    },

    h3: {
      styles: {
        base: {
          color: 'text300',
          fontSize: '1.25rem'
        }
      }
    }
  }
}