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

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>;

}