How to use the cx function in cx

To help you get started, we’ve selected a few cx examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github schrodinger / fixed-data-table-2 / src / FixedDataTable.js View on Github external
onColumnResize={this._onColumnResize}
        onColumnReorder={onColumnReorder}
        onColumnReorderMove={this._onColumnReorderMove}
        onColumnReorderEnd={this._onColumnReorderEnd}
        isColumnReordering={!!isColumnReordering}
        columnReorderingData={columnReorderingData}
        showScrollbarY={scrollEnabledY}
        isRTL={this.props.isRTL}
      />;

    let topShadow;
    if (scrollY) {
      topShadow =
        <div style="{{top:">;
    }

    // ownerScrollAvailable is true if the rows rendered will overflow the owner element
    // so we show a shadow in that case even if the FDT component can't scroll anymore
    const ownerScrollAvailable = ownerHeight &amp;&amp; ownerHeight &lt; componentHeight &amp;&amp;
      scrollContentHeight &gt; visibleRowsHeight;
    let bottomShadow;
    if (ownerScrollAvailable || scrollY &lt; maxScrollY) {
      bottomShadow =
        </div>
github schrodinger / fixed-data-table-2 / src / FixedDataTableRow.js View on Github external
onMouseEnter={this.props.onMouseEnter || this.props.onMouseLeave ? this._onMouseEnter : null}
        onMouseLeave={this.props.onMouseLeave ? this._onMouseLeave : null}
        onTouchStart={this.props.onTouchStart ? this._onTouchStart : null}
        onTouchEnd={this.props.onTouchEnd ? this._onTouchEnd : null}
        onTouchMove={this.props.onTouchMove ? this._onTouchMove : null}
        style={style}&gt;
        <div>
          {fixedColumns}
          {scrollableColumns}
          {columnsLeftShadow}
          {fixedRightColumns}
          {fixedRightColumnsShadow}
          {scrollbarSpacer}
        </div>
        {rowExpanded &amp;&amp; <div style="{rowExpandedStyle}">
          {rowExpanded}
        </div>}
        {columnsRightShadow}
      
    );
  }
github schrodinger / fixed-data-table-2 / src / Scrollbar.js View on Github external
render() /*?object*/ {
    if (!this.state.scrollable) {
      return null;
    }

    var size = this.props.size;
    var mainStyle;
    var faceStyle;
    var isHorizontal = this.state.isHorizontal;
    var isVertical = !isHorizontal;
    var isActive = this.state.focused || this.state.isDragging;
    var faceSize = this.state.faceSize;
    var isOpaque = this.props.isOpaque;
    var verticalTop = this.props.verticalTop || 0;

    var mainClassName = cx({
      'ScrollbarLayout/main': true,
      'ScrollbarLayout/mainVertical': isVertical,
      'ScrollbarLayout/mainHorizontal': isHorizontal,
      'public/Scrollbar/main': true,
      'public/Scrollbar/mainOpaque': isOpaque,
      'public/Scrollbar/mainActive': isActive,
    });

    var faceClassName = cx({
      'ScrollbarLayout/face': true,
      'ScrollbarLayout/faceHorizontal': isHorizontal,
      'ScrollbarLayout/faceVertical': isVertical,
      'public/Scrollbar/faceActive': isActive,
      'public/Scrollbar/face': true,
    });
github schrodinger / fixed-data-table-2 / src / FixedDataTableColumnReorderHandle.js View on Github external
render() /*object*/ {
    var style = {
      height: this.props.height,
    };
    return (
      <div> e.stopPropagation() : null}
        onTouchMove={this.props.touchEnabled ? e =&gt; e.stopPropagation() : null}
        style={style}&gt;
      </div>
    );
  }
github schrodinger / fixed-data-table-2 / src / FixedDataTableRow.js View on Github external
_renderFixedRightColumnsShadow = (/*number*/ left) =&gt; /*?object*/ {
    var className = cx(
      'fixedDataTableRowLayout/columnsShadow',
      'fixedDataTableRowLayout/columnsRightShadow',
      'fixedDataTableRowLayout/fixedColumnsDivider',
      'public/fixedDataTableRow/columnsShadow',
      'public/fixedDataTableRow/columnsRightShadow',
      'public/fixedDataTableRow/fixedColumnsDivider'
    );
    var style = {
      height: this.props.height,
      left: left
    };
    return <div style="{style}">;
  };
</div>
github schrodinger / fixed-data-table-2 / src / FixedDataTableCellDefault.js View on Github external
width,
      ...style,
    };

    return (
      <div style="{innerStyle}">
        <div>
          <div>
            <div>
              {children}
            </div>
          </div>
        </div>
      </div>
    );
  }
}
github schrodinger / fixed-data-table-2 / src / FixedDataTable.js View on Github external
var tabIndex = null;
    if (this.props.keyboardPageEnabled || this.props.keyboardScrollEnabled) {
      tabIndex = 0;
    }

    let tableClassName = className;
    if (this.props.isRTL) {
      tableClassName = joinClasses(tableClassName, 'fixedDataTable_isRTL');
    }

    return (
      <div width="" style="{{" tabindex="{tabIndex}" aria-rowcount="{ariaRowCount}" role="grid">
        </div>
github schrodinger / fixed-data-table-2 / src / FixedDataTableRow.js View on Github external
className={joinClasses(className, this.props.className)}
        role={'row'}
        aria-rowindex={this.props.ariaRowIndex}
        {...this.props.attributes}
        onClick={this.props.onClick ? this._onClick : null}
        onContextMenu={this.props.onContextMenu ? this._onContextMenu : null}
        onDoubleClick={this.props.onDoubleClick ? this._onDoubleClick : null}
        onMouseDown={this.props.onMouseDown ? this._onMouseDown : null}
        onMouseUp={this.props.onMouseUp ? this._onMouseUp : null}
        onMouseEnter={this.props.onMouseEnter || this.props.onMouseLeave ? this._onMouseEnter : null}
        onMouseLeave={this.props.onMouseLeave ? this._onMouseLeave : null}
        onTouchStart={this.props.onTouchStart ? this._onTouchStart : null}
        onTouchEnd={this.props.onTouchEnd ? this._onTouchEnd : null}
        onTouchMove={this.props.onTouchMove ? this._onTouchMove : null}
        style={style}&gt;
        <div>
          {fixedColumns}
          {scrollableColumns}
          {columnsLeftShadow}
          {fixedRightColumns}
          {fixedRightColumnsShadow}
          {scrollbarSpacer}
        </div>
        {rowExpanded &amp;&amp; <div style="{rowExpandedStyle}">
          {rowExpanded}
        </div>}
        {columnsRightShadow}
      
    );
  }
github schrodinger / fixed-data-table-2 / src / ColumnResizerLine.js View on Github external
};
    if (this.props.isRTL) {
      style.right = this.props.leftOffset;
    } else {
      style.left = this.props.leftOffset;
    }
    return (
      <div style="{style}">
        <div style="{{">
      </div>
    );
  }
</div>
github schrodinger / fixed-data-table-2 / src / FixedDataTableCellDefault.js View on Github external
render() {
    //Remove some props like columnKey and rowIndex so we don't pass it into the div
    var {height, width, style, className, children, columnKey, rowIndex, ...props} = this.props;

    var innerStyle = {
      height,
      width,
      ...style,
    };

    return (
      <div style="{innerStyle}">
        <div>
          <div>
            <div>
              {children}
            </div></div></div></div>