@fortawesome/free-solid-svg-icons#faEye TypeScript Examples

PasswordReveal = React.forwardRef(({
  required = true,
  name = 'password',
  autoComplete = 'on',
  passwordError = false,
  onInput,
}: Props, forwardRef: React.RefObject<HTMLInputElement>) => {
  const [visible, setVisible] = useState(false);

  return (
    <div className={styles['password-reveal']}>
      <div className="relative">
        <input
          ref={forwardRef}
          type={visible ? 'text' : 'password'}
          name={name}
          required={required}
          autoComplete={autoComplete}
          onInput={onInput}
        />

        <Button
          className="absolute text-grey"
          onClick={() => setVisible(!visible)}
          title={visible ? 'Hide password' : 'Show password'}
        >
          <FontAwesomeIcon icon={visible ? faEye : faEyeSlash} />
        </Button>
      </div>
      {passwordError
        ? <span className="text-red text-bold">?‍ Nu poți trece mai departe decât cu o parolă!</span>
        : null}
    </div>
  );
})

render() {
    return (
      <div className="chat-input">
        <input
          onChange={this.changeInput}
          onKeyDown={this.props.autoComplete ? this.tabComplete : (_) => {}}
          placeholder="Enter your message here."
          value={this.state.content}
        ></input>
        <button type="button" onClick={this.props.toggleShowAllMessages}>
          <FontAwesomeIcon icon={this.props.showAllMessages ? faEye : faEyeSlash} />
        </button>
        <button type="submit">
          <FontAwesomeIcon icon={['fas', 'paper-plane']} />
        </button>
      </div>
    );
  }

export default function SelectedSlideControl({
    slide,
    onDelete,
    onUpdateShouldRender,
    onUpdateShouldRenderWithCommonExcalidrawElements,
}: Props) {
    return (
        <div className="SelectedSlideControl">
            <div>
                <IconCheckbox
                    title="Skip"
                    checked={slide.shouldRender}
                    onChange={onUpdateShouldRender}
                    checkedIcon={faEye}
                    uncheckedIcon={faEyeSlash}
                />
                <IconCheckbox
                    title="Include common elements"
                    checked={slide.shouldRenderWithCommonExcalidrawElements}
                    onChange={onUpdateShouldRenderWithCommonExcalidrawElements}
                    checkedIcon={faShapes}
                    uncheckedIcon={faCircle}
                />
            </div>
            <div>
                <IconButton
                    title="Delete slide"
                    icon={faTrashAlt}
                    onClick={() =>
                        window.confirm("Delete the selected slide?") &&
                        onDelete()
                    }
                />
            </div>
        </div>
    );
}

library.add(faHome, faLock, faUser, faEnvelope, faPaperPlane, faEye, faEyeSlash);

render() {
    return(
      <div className="table-menu">
         <div className="search-table-field">
          <input type="text" onChange={this.onSearchStringChange} value={this.state.searchString} placeholder="Search Table"/>
          <FontAwesomeIcon className="search-icon" icon={faSearch}/>
        </div>
        <div className="table-view-controls">
          <div className="sort-table-field">
            <div className="sort-field-head">
              <FontAwesomeIcon className="sort-icon" icon={faSortAmountDown} />
              <label>Sort<br />Table</label>
            </div>
            <select className="sort-table-options" onChange={this.changeTableSortMode}>
              <option value={TableSortMode.A_TO_Z_BY_TIER} selected={this.state.currentTableSortMode === TableSortMode.A_TO_Z_BY_TIER}>Alphabetical (A-Z)</option>
              <option value={TableSortMode.Z_TO_A_BY_TIER} selected={this.state.currentTableSortMode === TableSortMode.Z_TO_A_BY_TIER}>Alphabetical (Z-A)</option>
              {/* <option value="tb">Topological (top-bottom)</option> */}
              {/* <option value="bt">Topological (bottom-top)</option> */}
            </select>
          </div>
          <div className="view-all-part-tables">
            <div className="sort-field-head">
              <label>{this.state.viewAllPartTables ? 'Showing' : 'Hiding'} All Part Tables</label>
            </div>
            <div className="icon-container" onClick={() => this.toggleAllPartTableView()}>
              {this.state.viewAllPartTables ? <FontAwesomeIcon className="eye-icon" icon={faEye}/> : <FontAwesomeIcon className="eye-icon" icon={faEyeSlash}/>}
            </div>
          </div>
        </div>
        {this.props.tableListIsLoading ? 
        <TableListLoading /> : 
        <div className="table-listing">
          {!this.props.tableListDict ? <p className="unselectedSchemaMessage">Select a schema to see table listing</p> : ''}
          {
            this.state.restrictedTableList.map((table: ParentTableListEntry) => {
              return(
                <div key={`${table.tableName}-${table.tableType}`}>
                  <div className={this.props.selectedTableName === table.tableName && this.props.selectedTableType === table.tableType ? 'table-entry selected' : 'table-entry'} key={`${table.tableName}-${table.tableType}`} 
                  onClick={(event) => {this.props.onTableSelection(table.tableName, table.tableType)}}>
                    <p className="table-name">{table.tableName}</p>
                    <span className={table.tableType === TableType.COMPUTED ? 'computed tier-label' : (table.tableType === TableType.LOOKUP ? 
                      'lookup tier-label' : (table.tableType === TableType.MANUAL ? 'manual tier-label' : 'imported tier-label'))}>{TableType[table.tableType].toLowerCase()}</span>
                    {table.partTables.length ?
                      (<div onClick={(event) => {this.toggleEachPartTableView(event, table)}} 
                      className={table.tableType === TableType.COMPUTED ? "computed show-part-table" : table.tableType === TableType.IMPORTED ? "imported show-part-table" : table.tableType === TableType.LOOKUP  ? "lookup show-part-table" : "manual show-part-table"}>
                        <label className="head">part table</label>
                        <div className="icon">{!this.state.viewAllPartTables || this.state.hidePartTable.includes(table.tableName) ?
                          <FontAwesomeIcon className="eye-icon" icon={faEyeSlash} />
                          : <FontAwesomeIcon className="eye-icon" icon={faEye} />}
                        </div>
                      </div>) : ''}
                  </div>
                  {table.partTables.length && !this.state.hidePartTable.includes(table.tableName) ? (
                    table.partTables.map((partTable: PartTableListEntry) => {
                      return (
                        <div onClick={() => {this.props.onTableSelection(table.tableName + '.' + partTable.tableName, partTable.tableType)}} key={partTable.tableName} 
                        className={this.state.viewAllPartTables && this.props.selectedTableName === `${table.tableName}.${partTable.tableName}` && this.props.selectedTableType === partTable.tableType ? 
                        "part-table-entry selected" : this.state.viewAllPartTables && (this.props.selectedTableName !== `${table.tableName}.${partTable.tableName}` || this.props.selectedTableType !== partTable.tableType) ? 
                        "part-table-entry" : !this.state.viewAllPartTables ? "part-table-entry hide" : ""}>
                        <p className="table-name">{partTable.tableName}</p>
                        <span className={table.tableType === TableType.COMPUTED ? "part-label computed-part" : table.tableType === TableType.LOOKUP ? "part-label lookup-part" : table.tableType === TableType.IMPORTED ? "part-label imported-part" : "part-label manual-part"}>
                          <div className="MT-type">{TableType[table.tableType].toLowerCase()}</div>
                          <div className="part-table-tag">{TableType[partTable.tableType].toLowerCase() + ' table'}</div>
                        </span>
                      </div>
                      )
                    })
                  ) : ''
                  }
                </div>
              )
            })
          }
        </div>
        }
      </div>
    )
  }

export default function IconSettingsCategory(props: IProps) {
    const {
        category,
        categoryKey,
        updateIconCategorySettings,
        updateIconSettings,
        updateIconsInCategory,
        updateSettings,
    } = props;
    const { classes } = useStyles();
    const { classes: sharedClasses } = useSharedSettingsStyles();
    const { t } = useTranslation();

    const [expanded, setExpanded] = useState(false);

    if (!category) { return null; }

    function toggleOpen(e: React.MouseEvent<HTMLElement>) {
        // Do not toggle if a label was clicked.
        if (!containedByInclusive(e.target as HTMLElement, el => el instanceof HTMLLabelElement)) {
            e.preventDefault();
            setExpanded(!expanded);
        }
    }

    const renderTypes = () => Object.entries(category.types).sort(compareNames).map(([typeKey, type]) => {
        if (!type) { return null; }
        return <div key={typeKey}>
            <label className={classes.checkboxIcon} title={t('settings.icon.toggleVisible')}>
                <input
                    type='checkbox'
                    checked={type.visible}
                    onChange={e => updateSettings({ iconSettings: updateIconSettings(categoryKey, typeKey, 'visible', e.currentTarget.checked) })}
                />
                <FontAwesomeIcon
                    icon={type.visible ? faEye : faEyeSlash}
                    opacity={type.visible ? 1 : 0.5}
                    fixedWidth={true}
                />
            </label>

            <label className={clsx(classes.checkboxIcon, !type.visible && classes.invisible)} title={t('settings.icon.toggleShowLabel')}>
                <input
                    type='checkbox'
                    checked={type.showLabel}
                    onChange={e => updateSettings({ iconSettings: updateIconSettings(categoryKey, typeKey, 'showLabel', e.currentTarget.checked) })}
                />
                <FontAwesomeIcon
                    icon={type.showLabel ? faComment : faCommentSlash}
                    opacity={type.showLabel ? 1 : 0.5}
                    fixedWidth={true}
                />
            </label>

            <span className={classes.categoryTypeName}>{getIconName(type.category, type.type)}</span>
        </div>;
    });

    const hasAnyVisible = Object.values(category.types).some(t => t?.visible ?? false);
    const hasAnyShowLabel = Object.values(category.types).some(t => t?.showLabel ?? false);

    return <details key={categoryKey} open={expanded}>
        <summary className={sharedClasses.summary} onClick={toggleOpen}>
            <label className={classes.checkboxIcon} title={t('settings.icon.toggleVisible')}>
                <input
                    type='checkbox'
                    checked={category.visible}
                    onChange={e => updateSettings({ iconSettings: updateIconCategorySettings(categoryKey, 'visible', e.currentTarget.checked) })}
                />
                <FontAwesomeIcon
                    icon={category.visible ? faEye : faEyeSlash}
                    opacity={category.visible ? 1 : 0.5}
                    fixedWidth={true}
                />
            </label>

            <label className={clsx(classes.checkboxIcon, !category.visible && classes.invisible)} title={t('settings.icon.toggleShowLabel')}>
                <input
                    type='checkbox'
                    checked={category.showLabel}
                    onChange={e => updateSettings({ iconSettings: updateIconCategorySettings(categoryKey, 'showLabel', e.currentTarget.checked) })}
                />
                <FontAwesomeIcon
                    icon={category.showLabel ? faComment : faCommentSlash}
                    opacity={category.showLabel ? 1 : 0.5}
                    fixedWidth={true}
                />
            </label>

            <span>{getIconName(category.category)}</span>
        </summary>

        {expanded &&
            <div className={classes.toggleAllEntry}>
                <label className={classes.checkboxIcon} title={t('settings.icon.toggleVisible')}>
                    <input
                        type='checkbox'
                        checked={hasAnyVisible}
                        onChange={e => updateSettings({ iconSettings: updateIconsInCategory(categoryKey, 'visible', e.currentTarget.checked) })}
                    />
                    <FontAwesomeIcon
                        icon={hasAnyVisible ? faEye : faEyeSlash}
                        opacity={hasAnyVisible ? 1 : 0.5}
                        fixedWidth={true}
                    />
                </label>

                <label className={classes.checkboxIcon} title={t('settings.icon.toggleShowLabel')}>
                    <input
                        type='checkbox'
                        checked={hasAnyShowLabel}
                        onChange={e => updateSettings({ iconSettings: updateIconsInCategory(categoryKey, 'showLabel', e.currentTarget.checked) })}
                    />
                    <FontAwesomeIcon
                        icon={hasAnyShowLabel ? faComment : faCommentSlash}
                        opacity={hasAnyShowLabel ? 1 : 0.5}
                        fixedWidth={true}
                    />
                </label>

                <span className={classes.categoryTypeName}>{t('settings.icon.toggleAll')}</span>
            </div>
        }

        {expanded &&
            <div className={classes.iconTypeContainer}>
                {renderTypes()}
            </div>
        }
    </details>;

}

ThreadCard: FC<ThreadCardProps> = ({ thread }) => {
  const history = useHistory();
  const { width } = useWindowDimensions();

  const onClickShowThread = (e: React.MouseEvent<HTMLDivElement>) => {
    history.push("/thread/" + thread.id);
  };

  const getResponses = (thread: Thread) => {
    if (width <= 768) {
      return (
        <label
          style={{
            marginRight: ".5em",
          }}
        >
          {thread && thread.threadItems && thread.threadItems.length}
          <FontAwesomeIcon
            icon={faReplyAll}
            className="points-icon"
            style={{
              marginLeft: ".25em",
              marginTop: "-.25em",
            }}
          />
        </label>
      );
    }
    return null;
  };

  return (
    <section className="panel threadcard-container">
      <div className="threadcard-txt-container">
        <div className="content-header">
          <Link
            to={`/categorythreads/${thread.category.id}`}
            className="link-txt"
          >
            <strong>{thread.category.name}</strong>
          </Link>
          <span className="username-header" style={{ marginLeft: ".5em" }}>
            {thread.userName}
          </span>
        </div>
        <div className="question">
          <div
            onClick={onClickShowThread}
            data-thread-id={thread.id}
            style={{ marginBottom: ".4em" }}
          >
            <strong>{thread.title}</strong>
          </div>
          <div
            className="threadcard-body"
            onClick={onClickShowThread}
            data-thread-id={thread.id}
          >
            <div>{thread.body}</div>
          </div>
          <div className="threadcard-footer">
            <span
              style={{
                marginRight: ".5em",
              }}
            >
              <label>
                {thread.views}
                <FontAwesomeIcon icon={faEye} className="icon-lg" />
              </label>
            </span>
            <span>
              {width <= 768 ? (
                <ThreadPointsInline points={thread?.points || 0} />
              ) : null}
              {getResponses(thread)}
            </span>
          </div>
        </div>
      </div>
      <ThreadPointsBar
        points={thread?.points || 0}
        responseCount={
          thread && thread.threadItems && thread.threadItems.length
        }
      />
    </section>
  );
}

ThreadCard: FC<ThreadCardProps> = ({ thread }) => {
  const history = useHistory();
  const { width } = useWindowDimensions();

  const onClickShowThread = (e: React.MouseEvent<HTMLDivElement>) => {
    history.push("/thread/" + thread.id);
  };

  const getResponseCount = (thread: Thread) => {
    if (width <= 768) {
      return (
        <span
          style={{
            marginRight: ".5em",
          }}
        >
          {thread && thread.threadItems && thread.threadItems.length}
          <FontAwesomeIcon
            icon={faReplyAll}
            className="points-icon"
            style={{
              marginLeft: ".25em",
              marginTop: "-.25em",
            }}
          />
        </span>
      );
    }
    return null;
  };

  return (
    <section className="panel threadcard-container">
      <div className="threadcard-txt-container">
        <div className="content-header">
          <Link
            to={`/categorythreads/${thread.category.id}`}
            className="link-txt"
          >
            <strong>{thread.category.name}</strong>
          </Link>
          <span className="username-header" style={{ marginLeft: ".5em" }}>
            {thread.user.userName}
          </span>
        </div>
        <div className="question">
          <div
            onClick={onClickShowThread}
            data-thread-id={thread.id}
            style={{ marginBottom: ".4em" }}
          >
            <strong>{thread.title}</strong>
          </div>
          <div
            className="threadcard-body"
            onClick={onClickShowThread}
            data-thread-id={thread.id}
          >
            <RichEditor existingBody={thread.body} readOnly={true} />
          </div>
          <div className="threadcard-footer">
            <span
              style={{
                marginRight: ".5em",
              }}
            >
              {thread.views}
              <FontAwesomeIcon icon={faEye} className="icon-lg" />
            </span>
            {width <= 768 ? (
              <ThreadPointsInline points={thread?.points || 0} />
            ) : null}
            {getResponseCount(thread)}
          </div>
        </div>
      </div>
      <ThreadPointsBar
        points={thread?.points || 0}
        responseCount={
          thread && thread.threadItems && thread.threadItems.length
        }
      />
    </section>
  );
}

export default function CommunicationBar({
    toggleChat,
    toggleWebRtcAudio,
    toggleWebRtcVideo,
    chatIsActive,
    webRtcAudioIsActive,
    webRtcVideoIsActive,
    uiVisible,
    showVideos,
    setShowVideos,
    audioIsMuted,
    videoIsMuted,
    toggleAudioIsMuted,
    toggleVideoIsMuted
}: Props): ReactElement {
    const { t } = useTranslation();

    return (
        <div
            className={
                'absolute bottom-0 left-0 ml-3' +
                (uiVisible ? ' mb-12' : ' mb-3')
            }
        >
            <div className="flex flex-row">
                <BarButton
                    isActive={chatIsActive}
                    clickHandler={toggleChat}
                    icon={faComment}
                    titleText={chatIsActive ? t('chat.close') : t('chat.open')}
                    size="large"
                />
                {!webRtcAudioIsActive && (
                    <BarButton
                        isActive={webRtcVideoIsActive}
                        clickHandler={toggleWebRtcVideo}
                        icon={faVideo}
                        titleText={
                            webRtcVideoIsActive
                                ? t('webRtc.videoClose')
                                : t('webRtc.videoOpen')
                        }
                        size="large"
                    />
                )}
                {!webRtcVideoIsActive && (
                    <BarButton
                        isActive={webRtcAudioIsActive}
                        clickHandler={toggleWebRtcAudio}
                        icon={faPhoneAlt}
                        titleText={
                            webRtcAudioIsActive
                                ? t('webRtc.audioClose')
                                : t('webRtc.audioOpen')
                        }
                        size="large"
                    />
                )}
                {webRtcVideoIsActive && (
                    <BarButton
                        isActive={!videoIsMuted}
                        clickHandler={toggleVideoIsMuted}
                        titleText={
                            videoIsMuted
                                ? t('webRtc.unmuteVideo')
                                : t('webRtc.muteVideo')
                        }
                        icon={videoIsMuted ? faVideoSlash : faVideo}
                        size="small"
                    />
                )}
                {(webRtcAudioIsActive || webRtcVideoIsActive) && (
                    <BarButton
                        isActive={!audioIsMuted}
                        clickHandler={toggleAudioIsMuted}
                        titleText={
                            audioIsMuted
                                ? t('webRtc.unmuteAudio')
                                : t('webRtc.muteAudio')
                        }
                        icon={audioIsMuted ? faMicrophoneSlash : faMicrophone}
                        size="small"
                    />
                )}
                {webRtcVideoIsActive && (
                    <BarButton
                        isActive={showVideos}
                        clickHandler={(): void => setShowVideos(!showVideos)}
                        titleText={
                            showVideos
                                ? t('webRtc.hideVideos')
                                : t('webRtc.showVideos')
                        }
                        icon={showVideos ? faEye : faEyeSlash}
                        size="small"
                    />
                )}
            </div>
        </div>
    );
}