<commit_before>import React from "react";
import {PropTypes} from "react";
import Ps from "perfect-scrollbar";
import utils from "common/utils";
import Translate from "react-translate-component";
import SettingsActions from "actions/SettingsActions";
import classnames from "classnames";
import PriceText from "../Utility/PriceText";
import TransitionWrapper from "../Utility/TransitionWrapper";
import AssetName from "../Utility/AssetName";

class OrderBookRowVertical extends React.Component {

    shouldComponentUpdate(nextProps) {
        if (nextProps.order.market_base !== this.props.order.market_base) return false;
        return (
            nextProps.order.ne(this.props.order) ||
            nextProps.index !== this.props.index
        );
    }

    render() {
        let {order, quote, base, final} = this.props;
        const isBid = order.isBid();
        const isCall = order.isCall();
        let integerClass = isCall ? "orderHistoryCall" : isBid ? "orderHistoryBid" : "orderHistoryAsk";

        let price = <PriceText price={order.getPrice()} quote={quote} base={base} />;

        return (
            <tr onClick={this.props.onClick} className={classnames({"final-row": final})}>
                <td>{utils.format_number(order[isBid ? "amountForSale" : "amountToReceive"]().getAmount({real: true}), base.get("precision"))}</td>
                <td>{utils.format_number(order[isBid ? "amountToReceive" : "amountForSale"]().getAmount({real: true}), quote.get("precision"))}</td>
                <td className={integerClass}>
                    {price}
                </td>
            </tr>
        );
    }
}

class OrderBookRowHorizontal extends React.Component {
    shouldComponentUpdate(nextProps) {
        if (nextProps.order.market_base !== this.props.order.market_base) return false;
        return (
            nextProps.order.ne(this.props.order) ||
            nextProps.position !== this.props.position ||
            nextProps.index !== this.props.index
        );
    }

    render() {
        let {order, quote, base, position} = this.props;
        const isBid = order.isBid();
        const isCall = order.isCall();

        let integerClass = isCall ? "orderHistoryCall" : isBid ? "orderHistoryBid" : "orderHistoryAsk";

        let price = <PriceText price={order.getPrice()} quote={quote} base={base} />;
        let amount = isBid ?
            utils.format_number(order.amountToReceive().getAmount({real: true}), quote.get("precision")) :
            utils.format_number(order.amountForSale().getAmount({real: true}), quote.get("precision"));
        let value = isBid ?
            utils.format_number(order.amountForSale().getAmount({real: true}), base.get("precision")) :
            utils.format_number(order.amountToReceive().getAmount({real: true}), base.get("precision"));
        let total = isBid ?
            utils.format_number(order.totalForSale().getAmount({real: true}), base.get("precision")) :
            utils.format_number(order.totalToReceive().getAmount({real: true}), base.get("precision"));

        return (
            <tr onClick={this.props.onClick} >
                {position === "left" ? <td>{total}</td> :
                <td style={{width: "25%"}} className={integerClass}>
                    {price}
                </td>
                }
                <td>{position === "left" ? value : amount}</td>
                <td>{position === "left" ? amount : value}</td>
                {position === "right" ? <td>{total}</td> :
                <td style={{width: "25%"}} className={integerClass}>
                    {price}
                </td>
                }

            </tr>
        );

    }
}

class OrderBook extends React.Component {
    constructor(props) {
        super();
        this.state = {
            scrollToBottom: true,
            flip: props.flipOrderBook,
            showAllBids: false,
            showAllAsks: false,
            rowCount: 20
        };

        this._updateHeight = this._updateHeight.bind(this);
    }

    // shouldComponentUpdate(nextProps, nextState) {
    //     console.log("calls changed:", !Immutable.is(nextProps.calls, this.props.calls), nextProps.calls && nextProps.calls.toJS(), this.props.calls && this.props.calls.toJS());
    //     const callsChanged = didOrdersChange(nextProps.calls, this.props.calls);
    //     const limitsChanged = didOrdersChange(nextProps.orders, this.props.orders);
    //     console.log("callsChanged:", callsChanged, "limitsChanged", limitsChanged);
    //     return (
    //         !Immutable.is(nextProps.orders, this.props.orders) ||
    //         !Immutable.is(nextProps.calls, this.props.calls) ||
    //         nextProps.horizontal !== this.props.horizontal ||
    //         !utils.are_equal_shallow(nextProps.latest, this.props.latest) ||
    //         nextProps.smallScreen !== this.props.smallScreen ||
    //         nextProps.wrapperClass !== this.props.wrapperClass ||
    //         !utils.are_equal_shallow(nextState, this.state)
    //     );
    // }

    componentWillReceiveProps(nextProps) {
        if (!nextProps.marketReady) {
            this.setState({
                scrollToBottom: true
            });
        }

        // Change of market or direction
        if (nextProps.base.get("id") !== this.props.base.get("id") || nextProps.quote.get("id") !== this.props.quote.get("id")) {
            this.setState({
                scrollToBottom: true
            });

            if (this.refs.askTransition) {
                this.refs.askTransition.resetAnimation();
                if (this.refs.hor_asks) this.refs.hor_asks.scrollTop = 0;
                if (this.refs.hor_bids) this.refs.hor_bids.scrollTop = 0;
            }

            if (this.refs.bidTransition) {
                this.refs.bidTransition.resetAnimation();
            }
        }
    }

    _updateHeight() {
        if (!this.props.horizontal) {
            let containerHeight = this.refs.orderbook_container.offsetHeight;
            let priceHeight = this.refs.center_text.offsetHeight;<commit_msg>Resolve Issue #237 (#257)<commit_after>import React from "react";
import {PropTypes} from "react";
import Ps from "perfect-scrollbar";
import utils from "common/utils";
import Translate from "react-translate-component";
import SettingsActions from "actions/SettingsActions";
import classnames from "classnames";
import PriceText from "../Utility/PriceText";
import TransitionWrapper from "../Utility/TransitionWrapper";
import AssetName from "../Utility/AssetName";

class OrderBookRowVertical extends React.Component {

    shouldComponentUpdate(nextProps) {
        if (nextProps.order.market_base !== this.props.order.market_base) return false;
        return (
            nextProps.order.ne(this.props.order) ||
            nextProps.index !== this.props.index
        );
    }

    render() {
        let {order, quote, base, final} = this.props;
        const isBid = order.isBid();
        const isCall = order.isCall();
        let integerClass = isCall ? "orderHistoryCall" : isBid ? "orderHistoryBid" : "orderHistoryAsk";

        let price = <PriceText price={order.getPrice()} quote={quote} base={base} />;

        return (
            <tr onClick={this.props.onClick} className={classnames({"final-row": final})}>
                <td>{utils.format_number(order[isBid ? "amountForSale" : "amountToReceive"]().getAmount({real: true}), base.get("precision"))}</td>
                <td>{utils.format_number(order[isBid ? "amountToReceive" : "amountForSale"]().getAmount({real: true}), quote.get("precision"))}</td>
                <td className={integerClass}>
                    {price}
                </td>
            </tr>
        );
    }
}

class OrderBookRowHorizontal extends React.Component {
    shouldComponentUpdate(nextProps) {
        if (nextProps.order.market_base !== this.props.order.market_base) return false;
        return (
            nextProps.order.ne(this.props.order) ||
            nextProps.position !== this.props.position ||
            nextProps.index !== this.props.index
        );
    }

    render() {
        let {order, quote, base, position} = this.props;
        const isBid = order.isBid();
        const isCall = order.isCall();

        let integerClass = isCall ? "orderHistoryCall" : isBid ? "orderHistoryBid" : "orderHistoryAsk";

        let price = <PriceText price={order.getPrice()} quote={quote} base={base} />;
        let amount = isBid ?
            utils.format_number(order.amountToReceive().getAmount({real: true}), quote.get("precision")) :
            utils.format_number(order.amountForSale().getAmount({real: true}), quote.get("precision"));
        let value = isBid ?
            utils.format_number(order.amountForSale().getAmount({real: true}), base.get("precision")) :
            utils.format_number(order.amountToReceive().getAmount({real: true}), base.get("precision"));
        let total = isBid ?
            utils.format_number(order.totalForSale().getAmount({real: true}), base.get("precision")) :
            utils.format_number(order.totalToReceive().getAmount({real: true}), base.get("precision"));

        return (
            <tr onClick={this.props.onClick} >
                {position === "left" ? <td>{total}</td> :
                <td style={{width: "25%"}} className={integerClass}>
                    {price}
                </td>
                }
                <td>{position === "left" ? value : amount}</td>
                <td>{position === "left" ? amount : value}</td>
                {position === "right" ? <td>{total}</td> :
                <td style={{width: "25%"}} className={integerClass}>
                    {price}
                </td>
                }

            </tr>
        );

    }
}

class OrderBook extends React.Component {
    constructor(props) {
        super();
        this.state = {
            scrollToBottom: true,
            flip: props.flipOrderBook,
            showAllBids: false,
            showAllAsks: false,
            rowCount: 20
        };

        this._updateHeight = this._updateHeight.bind(this);
    }

    // shouldComponentUpdate(nextProps, nextState) {
    //     console.log("calls changed:", !Immutable.is(nextProps.calls, this.props.calls), nextProps.calls && nextProps.calls.toJS(), this.props.calls && this.props.calls.toJS());
    //     const callsChanged = didOrdersChange(nextProps.calls, this.props.calls);
    //     const limitsChanged = didOrdersChange(nextProps.orders, this.props.orders);
    //     console.log("callsChanged:", callsChanged, "limitsChanged", limitsChanged);
    //     return (
    //         !Immutable.is(nextProps.orders, this.props.orders) ||
    //         !Immutable.is(nextProps.calls, this.props.calls) ||
    //         nextProps.horizontal !== this.props.horizontal ||
    //         !utils.are_equal_shallow(nextProps.latest, this.props.latest) ||
    //         nextProps.smallScreen !== this.props.smallScreen ||
    //         nextProps.wrapperClass !== this.props.wrapperClass ||
    //         !utils.are_equal_shallow(nextState, this.state)
    //     );
    // }

    componentWillReceiveProps(nextProps) {
        if (!nextProps.marketReady) {
            this.setState({
                scrollToBottom: true
            });
        }

        // Change of market or direction
        if (nextProps.base.get("id") !== this.props.base.get("id") || nextProps.quote.get("id") !== this.props.quote.get("id")) {
            this.setState({
                scrollToBottom: true
            });

            if (this.refs.askTransition) {
                this.refs.askTransition.resetAnimation();
                if (this.refs.hor_asks) this.refs.hor_asks.scrollTop = 0;
                if (this.refs.hor_bids) this.refs.hor_bids.scrollTop = 0;
            }

            if (this.refs.bidTransition) {
                this.refs.bidTransition.resetAnimation();
            }

            if (this.refs.vert_bids) this.refs.vert_bids.scrollTop = 0;
        }

        if (
          !utils.are_equal_shallow(nextProps.combinedAsks, this.props.combinedAsks) ||
          !utils.are_equal_shallow(nextProps.combinedBids, this.props.combinedBids)
        ) {
            this.setState({}, () => {
                this.psUpdate();
            });
        }
    }

    _updateHeight() {
        if (!this.props.horizontal) {
            let containerHeight = this.refs.orderbook_container.offsetHeight;
            let priceHeight = this.refs.center_text.offsetHeight;
{'fraction_non_alphanumeric': 0.14384707287933093, 'fraction_numerical': 0.0018319394663480685, 'mean_word_length': 2.232749742533471, 'pattern_counts': {'":': 2, '<': 51, '<?xml version=': 0, '>': 52, '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': '5989324', 'n_tokens_mistral': 3635, 'n_tokens_neox': 3505, 'n_words': 607}