@fortawesome/free-solid-svg-icons#faEye TypeScript Examples
The following examples show how to use
@fortawesome/free-solid-svg-icons#faEye.
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: PasswordReveal.tsx From frontend.ro with MIT License | 6 votes |
|
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>
);
})
Example #2
| Source File: Input.tsx From avalon.ist with MIT License | 6 votes |
|
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>
);
}
Example #3
| Source File: index.tsx From excalideck with MIT License | 6 votes |
|
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>
);
}
Example #4
| Source File: Input.tsx From avalon.ist with MIT License | 5 votes |
|
library.add(faHome, faLock, faUser, faEnvelope, faPaperPlane, faEye, faEyeSlash);
Example #5
| Source File: TableList.tsx From datajoint-labbook with MIT License | 5 votes |
|
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>
)
}
Example #6
| Source File: IconSettingsCategory.tsx From NewWorldMinimap with MIT License | 4 votes |
|
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>;
}
Example #7
| Source File: ThreadCard.tsx From Full-Stack-React-TypeScript-and-Node with MIT License | 4 votes |
|
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>
);
}
Example #8
| Source File: ThreadCard.tsx From Full-Stack-React-TypeScript-and-Node with MIT License | 4 votes |
|
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>
);
}
Example #9
| Source File: CommunicationBar.tsx From sync-party with GNU General Public License v3.0 | 4 votes |
|
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>
);
}
