GaBoxPerfect.tsx

import * as React from 'react';
import { findDOMNode } from 'react-dom';

import * as gaModel from '~/model/gaModel';

import gaUtil from '~/util/gaUtil';
interface props {
    /**
     * 頁面
     * e.q. （依據路由）
     * 小遊戲：game
     */
    page: string;

    /**
     * 位置
     * e.q. （底線區隔、小寫）
     * 熱門遊戲列表： hot_list
     */
    position: string;

    /**
     * 事件
     * click | view | hover
     * 預設會為click
     * 依據需要的event丟陣列進來
     */
    event?: [gaModel.gaEvent];

    /**
     * 標籤
     * e.q. （底線區隔、小寫）
     * 小遊戲：bbin_糖果派對
     */
    label?: string;
}

class GaBox extends React.PureComponent<props> {
    static defaultProps: props = {
        page: '',
        position: '',
        event: [gaModel.gaEvent.click],
    };
    componentDidMount(): void {
        const { event }: props = this.props;
        event && event.indexOf(gaModel.gaEvent.view) > -1 &&
            this.handleEvent(gaModel.gaEvent.view)();
        event && event.indexOf(gaModel.gaEvent.click) > -1 &&
            (findDOMNode(this) as any).addEventListener('click', this.handleEvent(gaModel.gaEvent.click));
        event && event.indexOf(gaModel.gaEvent.hover) > -1 &&
            (findDOMNode(this) as any).addEventListener('mouseover', this.handleEvent(gaModel.gaEvent.hover));
    }
    componentWillUnMount(): void {
        (findDOMNode(this) as any).removeEventListener('click', this.handleEvent(gaModel.gaEvent.click));
        (findDOMNode(this) as any).removeEventListener('mouseover', this.handleEvent(gaModel.gaEvent.hover));
    }
    handleEvent = (eventFlag: gaModel.gaEvent): any => (): void => {
        const { page, position, event, label }: props = this.props;
        if (event && event.indexOf(eventFlag) > -1) {
            const action: string = `${page}.${position}.${eventFlag}`;
            gaUtil.logEvent(action, label);
        }
    }
    render(): any {
        return this.props.children;
    }
}

export default GaBox;