<commit_before>import * as React from 'react';
import * as classNames from 'classnames';
import { INotificationIconProps, DefaultIconNumberStyleObject, NotificationBubbleStyleObject} from './NotificationIcon.Props';
import { IconSize } from '../Icon/Icon.Props';
import { getNativeAttributes, htmlElementAttributes } from '../../utilities/attributes';

export const NotificationIcon: (props: INotificationIconProps) => JSX.Element = (props: INotificationIconProps) => {
    const customIcon = props.iconName === '';
    const svgIcon = props.iconName && props.iconName.startsWith('svg');
    let iconPrefix = 'icon '.concat(svgIcon ? 'svg' : 'font');
    let iconClassName = classNames(
        [iconPrefix], {
            [props.iconName]: !customIcon
        }, [props.className]);

    let iconHeight: any;
    let iconWidth: any;

    switch (props.iconSize) {
        case IconSize.smallest:
            iconHeight = '16px';
            iconWidth = '16px';
            break;
        case IconSize.small:
            iconHeight = '24px';
            iconWidth = '24px';
            break;
        case IconSize.medium:
            iconHeight = '32px';
            iconWidth = '32px';
            break;
        case IconSize.large:
            iconHeight = '64px';
            iconWidth = '64px';
            break;
        default:
        iconHeight = props.height || '16px';
        iconWidth = props.width || '16px';
    }

    const numberString = props.notificationNumber === undefined || props.notificationNumber === 0 ? '' 
                            : props.notificationNumber < 10 ? props.notificationNumber.toLocaleString() : '9+';
    const defaultStyleObject = DefaultIconNumberStyleObject(props.iconSize, numberString.length);
   
    let styleObject: NotificationBubbleStyleObject = { ...defaultStyleObject};

    if (props.notificationBubbleStyleObject) {
        if (props.notificationBubbleStyleObject.containerStyleObject) {
            Object.assign(styleObject.containerStyleObject, props.notificationBubbleStyleObject.containerStyleObject);
        }
        if (props.notificationBubbleStyleObject.bubbleStyleObject) {
            Object.assign(styleObject.bubbleStyleObject, props.notificationBubbleStyleObject.bubbleStyleObject);
        }
        if (props.notificationBubbleStyleObject.numberStyleObject) {
            Object.assign(styleObject.numberStyleObject, props.notificationBubbleStyleObject.numberStyleObject);
        }
    }

    if (svgIcon) {
        const spaceIdx = props.iconName.indexOf(' ');
        let iconName = props.iconName;
        if (spaceIdx !== -1) {
            iconName = props.iconName.substr(0, spaceIdx);
        }
            return (
            <div style={styleObject.containerStyleObject as React.CSSProperties} className={props.containerClassName}>
                <svg { ...getNativeAttributes(props, htmlElementAttributes) } className={iconClassName} width={iconWidth} height={iconHeight}>
                    <use xlinkHref={'#symbol-defs_' + iconName} />
                </svg>
                {(numberString !== '') &&
                    <div style={styleObject.bubbleStyleObject as React.CSSProperties} className={props.notificationBubbleClassName}>
                        <div style={styleObject.numberStyleObject as React.CSSProperties} className={props.notificationNumberClassName}>
                            {numberString}
                        </div>
                    </div>
                }
            </div>
            );
    } else {
            return (
            <div style={styleObject.containerStyleObject as React.CSSProperties} className={props.containerClassName}>
                <i { ...getNativeAttributes(props, htmlElementAttributes) } className={iconClassName} />
                {(numberString !== '') && 
                    <div style={styleObject.bubbleStyleObject as React.CSSProperties} className={props.notificationBubbleClassName}>
                        <div style={styleObject.numberStyleObject as React.CSSProperties} className={props.notificationNumberClassName}>
                            {numberString}
                        </div>
                    </div>
                }
            </div>);
    }
};<commit_msg>Notification Icon uses Icon component in its render<commit_after>import * as React from 'react';
import { INotificationIconProps, DefaultIconNumberStyleObject, NotificationBubbleStyleObject} from './NotificationIcon.Props';
import { Icon } from '../Icon/Icon';

export const NotificationIcon: (props: INotificationIconProps) => JSX.Element = (props: INotificationIconProps) => {

    const numberString = props.notificationNumber === undefined || props.notificationNumber === 0 ? '' 
                            : props.notificationNumber < 10 ? props.notificationNumber.toLocaleString() : '9+';

    const defaultStyleObject = DefaultIconNumberStyleObject(props.iconSize, numberString.length);
   
    let styleObject: NotificationBubbleStyleObject = { ...defaultStyleObject};

    if (props.notificationBubbleStyleObject) {
        if (props.notificationBubbleStyleObject.containerStyleObject) {
            Object.assign(styleObject.containerStyleObject, props.notificationBubbleStyleObject.containerStyleObject);
        }
        if (props.notificationBubbleStyleObject.bubbleStyleObject) {
            Object.assign(styleObject.bubbleStyleObject, props.notificationBubbleStyleObject.bubbleStyleObject);
        }
        if (props.notificationBubbleStyleObject.numberStyleObject) {
            Object.assign(styleObject.numberStyleObject, props.notificationBubbleStyleObject.numberStyleObject);
        }
    }

    return (
    <div style={styleObject.containerStyleObject as React.CSSProperties} className={props.containerClassName}>
        <Icon iconName={props.iconName} className={props.className} iconSize={props.iconSize}
                width={props.width} height={props.height}></Icon>
        {(numberString !== '') &&
            <div style={styleObject.bubbleStyleObject as React.CSSProperties} className={props.notificationBubbleClassName}>
                <div style={styleObject.numberStyleObject as React.CSSProperties} className={props.notificationNumberClassName}>
                    {numberString}
                </div>
            </div>
        }
    </div>
    );
};
{'fraction_non_alphanumeric': 0.10649023314429741, 'fraction_numerical': 0.004725897920604915, 'mean_word_length': 2.63631156930126, 'pattern_counts': {'":': 0, '<': 29, '<?xml version=': 0, '>': 31, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4818623', 'n_tokens_mistral': 1578, 'n_tokens_neox': 1529, 'n_words': 288}