frc-ui/es/chat/common/Hoc.js

React Web UI

import React from 'react';
import hoistStatics from 'hoist-non-react-statics';
import { FsType, TrendType } from '../interfaces';
import zh_CN from '../locale/zh_CN';
const { createContext } = React;
const Context = createContext({});
export function Provider(Component) {
    class WithProvider extends React.Component {
        constructor(props) {
            super(props);
            const { emit, channel } = props;
            emit && emit('chat', { channel });
        }
        render() {
            const { user, emit, success, channel, callUser, track, Socket, locale, connect, messageTypes, showAllHistory, historyStateDate } = this.props;
            const value = {
                user,
                emit,
                success,
                channel,
                callUser,
                track,
                Socket,
                locale,
                connect,
                messageTypes,
                showAllHistory,
                historyStateDate,
                prefix: 'frc-chat'
            };
            return (React.createElement(Context.Provider, { value: value },
                React.createElement(Component, Object.assign({}, this.props, { prefix: 'frc-chat' }))));
        }
    }
    WithProvider.defaultProps = {
        locale: zh_CN,
        emit: () => { },
        track: () => { }
    };
    return hoistStatics(WithProvider, Component);
}
export const Consumer = (keys = []) => (Component) => {
    class WithConsumer extends React.Component {
        constructor() {
            super(...arguments);
            this.getTextMaxLength = (tm) => {
                if (tm && tm.success && tm.content && tm.content[0]) {
                    return (tm.content[0] || {})['dictValue'] || 0;
                }
                return 0;
            };
            this.getData = (value) => {
                const { channel } = value || {};
                return {
                    textMaxLength: (state) => {
                        const tmp = state.chatDict.textMaxLength || {};
                        if (tmp && tmp.success && tmp.content && tmp.content[0]) {
                            return (tmp.content[0] || {})['dictValue'] || 0;
                        }
                        return 0;
                    },
                    anonymousName: (state) => {
                        return state.chatMessage.anonymousName.result;
                    },
                    trendType: (state) => {
                        return state.chatTrend.type.result || TrendType.NONE;
                    },
                    isAnonymous: (state) => {
                        return state.chat.isAnonymous;
                    },
                    emo: (state) => state.chat.emo,
                    isGag: (state) => state.chatGag.isGag.result,
                    fontSize: (state) => state.chat.fontSize,
                    permission: (state) => state.chatPermission.result,
                    uploadImage: (state) => state.chatFile[FsType.PASTE_IMAGE],
                    history: (state) => state.chat.history,
                    historyMessage: (state) => state.chatMessage.history,
                    count: (state) => state.chatMessage.clientCount.result,
                    notice: (state) => {
                        const tmp = state.chatDict.SysNotice || {};
                        if (tmp && tmp.content) {
                            const notice = (tmp.content || []).find((d) => d['dictKey'] === channel);
                            if (notice)
                                return (notice || {}).cn || '';
                            return null;
                        }
                        return null;
                    },
                    uploadEmo: (state) => state.chatFile[FsType.EMO],
                    cEmoji: (state) => state.emoji.list,
                    removeEmoji: (state) => state.emoji.remove
                };
            };
            this.mapStateToProps = (value) => (state) => {
                const obj = {};
                keys.forEach((key) => {
                    const func = this.getData(value)[key];
                    if (func)
                        obj[key] = func(state);
                });
                return obj;
            };
            this.renderComponent = (value) => {
                const { connect } = value || {};
                const Node = connect ? connect(this.mapStateToProps(value))(Component) : Component;
                return React.createElement(Node, Object.assign({}, this.props, (value || {})));
            };
        }
        render() {
            const { isConsumer } = this.props;
            if (!isConsumer)
                return React.createElement(Component, Object.assign({}, this.props));
            return React.createElement(Context.Consumer, null, this.renderComponent);
        }
    }
    WithConsumer.defaultProps = {
        isConsumer: true
    };
    return hoistStatics(WithConsumer, Component);
};