render()

in web/frontend/libs/@deltix/hd.components-order-grid/index.umd.js [357:523]

• 167 lines of code
• 13 McCabe index (conditional complexity)

    render() {
      const {
        price,
        quantity,
        cumulativeQuantity,
        next,
        hovered,
        worstPrice
      } = this.state;
      const {
        id,
        height,
        width,
        side,
        highlightOrders,
        quantityPrecision,
        pricePrecision,
        showUserQuantity,
        showExchange,
        formatPrice,
        formatQuantity,
        showCumulativeQuantity,
        abbreviations
      } = this.props;
      const {
        cumulativeQuantityWidth,
        marketQuantityWidth,
        priceWidth,
        userQuantityWidth,
        exchangeWidth,
        worstPriceWidth
      } = this.getBlockSizes();
      setRectangleDimensions(this.orderLineHitArea, width, height);
      setRectangleDimensions(this.cumulativeQuantityHitArea, cumulativeQuantityWidth, height);
      setRectangleDimensions(this.marketQuantityHitArea, marketQuantityWidth, height);
      setRectangleDimensions(this.priceHitArea, priceWidth, height);
      setRectangleDimensions(this.exchangeHitArea, exchangeWidth, height);
      setRectangleDimensions(this.worstPriceHitArea, worstPriceWidth, height);
      const highlighted = this.props.aggregatingQuantity ? hovered : id === highlightOrders[side];
      return jsxRuntime.jsx(hd_componentsMultiApp.Styled, {
        children: ({
          orderGrid: {
            quantity: quantityColor,
            hovered: hoveredColor,
            highlighted: highlightedColor,
            price: priceColors,
            exchange
          }
        }) => {
          const priceStyle = hd_componentsCommon.fontStyleCache(hd_componentsCommon.robotoMonoRegular10, priceColors[side].color);
          const ceilPartStyle = hd_componentsCommon.fontStyleCache(hd_componentsCommon.robotoMonoRegular10, quantityColor[side].ceilPart.color);
          const zeroPartStyle = hd_componentsCommon.fontStyleCache(hd_componentsCommon.robotoMonoRegular10, quantityColor[side].zeroPart.color);
          const decimalPartStyle = hd_componentsCommon.fontStyleCache(hd_componentsCommon.robotoMonoRegular10, quantityColor[side].decimalPart.color);
          return jsxRuntime.jsxs(Container$1, Object.assign({
            ref: this.rootRef,
            pointerover: this.toggleHover,
            pointerout: this.toggleHover,
            interactive: true,
            // hitArea={this.orderLineHitArea}
            containsPoint: this.containsPoint
          }, {
            children: [!highlighted && next !== undefined && jsxRuntime.jsx(hd_componentsMultiApp.Rectangle, {
              width: width,
              height: height,
              color: hoveredColor.color,
              alpha: hoveredColor.alpha
            }, void 0), highlighted && jsxRuntime.jsx(hd_componentsMultiApp.Rectangle, {
              width: width,
              height: height,
              color: highlightedColor.color,
              alpha: highlightedColor.alpha
            }, void 0), showCumulativeQuantity && jsxRuntime.jsx(Container$1, Object.assign({
              x: 0,
              interactive: true,
              hitArea: this.cumulativeQuantityHitArea,
              buttonMode: true,
              pointertap: this.onSelectedQuantity,
              pointerover: this.showHint,
              pointerout: this.hideHint
            }, {
              children: jsxRuntime.jsx(hd_componentsMultiApp.MarketQuantity, {
                formatQuantity: formatQuantity,
                quantity: cumulativeQuantity,
                height: height,
                width: cumulativeQuantityWidth,
                precision: quantityPrecision,
                ceilPartStyle: ceilPartStyle,
                zeroPartStyle: zeroPartStyle,
                decimalPartStyle: decimalPartStyle,
                abbreviations: abbreviations
              }, void 0)
            }), void 0), jsxRuntime.jsxs(Container$1, Object.assign({
              x: cumulativeQuantityWidth,
              interactive: true,
              hitArea: this.marketQuantityHitArea,
              buttonMode: true,
              pointertap: this.onSelectedQuantity,
              pointerover: this.showHint,
              pointerout: this.hideHint
            }, {
              children: [jsxRuntime.jsx(reactPixi.Graphics, {
                ref: this.growRef
              }, void 0), jsxRuntime.jsx(hd_componentsMultiApp.MarketQuantity, {
                formatQuantity: formatQuantity,
                quantity: quantity,
                height: height,
                width: marketQuantityWidth,
                precision: quantityPrecision,
                ceilPartStyle: ceilPartStyle,
                zeroPartStyle: zeroPartStyle,
                decimalPartStyle: decimalPartStyle,
                abbreviations: abbreviations
              }, void 0)]
            }), void 0), jsxRuntime.jsx(Container$1, Object.assign({
              x: cumulativeQuantityWidth + marketQuantityWidth,
              interactive: true,
              buttonMode: true,
              hitArea: this.priceHitArea,
              pointertap: this.onSelectedPrice
            }, {
              children: jsxRuntime.jsx(hd_componentsMultiApp.Price, {
                formatPrice: formatPrice,
                price: price,
                height: height,
                width: priceWidth,
                style: priceStyle,
                decimalPart: pricePrecision
              }, void 0)
            }), void 0), worstPriceWidth > 0 && jsxRuntime.jsx(Container$1, Object.assign({
              x: cumulativeQuantityWidth + marketQuantityWidth + priceWidth,
              interactive: true,
              buttonMode: true,
              hitArea: this.worstPriceHitArea,
              pointertap: this.onSelectedWorstPrice
            }, {
              children: jsxRuntime.jsx(hd_componentsMultiApp.Price, {
                formatPrice: formatPrice,
                price: worstPrice,
                height: height,
                width: worstPriceWidth,
                style: priceStyle,
                decimalPart: pricePrecision
              }, void 0)
            }), void 0), showUserQuantity && jsxRuntime.jsx(Container$1, Object.assign({
              x: cumulativeQuantityWidth + marketQuantityWidth + priceWidth
            }, {
              children: this.renderMyQuantity(userQuantityWidth, id)
            }), void 0), showExchange && !showCumulativeQuantity && worstPriceWidth === 0 && jsxRuntime.jsx(Container$1, Object.assign({
              x: cumulativeQuantityWidth + marketQuantityWidth + priceWidth + userQuantityWidth,
              interactive: true,
              buttonMode: true,
              hitArea: this.exchangeHitArea,
              pointertap: this.onSelectedExchange
            }, {
              children: jsxRuntime.jsx(hd_componentsMultiApp.AlignText, {
                width: exchangeWidth,
                height: height,
                horizontal: this.props.exchange ? 'right' : 'center',
                vertical: 'middle',
                text: this.props.exchange || '-',
                style: hd_componentsCommon.fontStyleCache(hd_componentsCommon.robotoMonoRegular10, exchange.color)
              }, void 0)
            }), void 0)]
          }), void 0);
        }
      }, void 0);
    }