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

The following examples show how to use @fortawesome/free-solid-svg-icons#faCommentSlash. 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: IconSettingsCategory.tsx    From NewWorldMinimap with MIT License 4 votes vote down vote up 
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>;

}