Adopted emotion as CSS in JS library

energydrink9 · Nov 15, 2018 · 66c465f · 66c465f
1 parent 2ea3864
commit 66c465f
Show file tree

Hide file tree

Showing 7 changed files with 320 additions and 52 deletions.
diff --git a/flow-typed/npm/emotion_vx.x.x.js b/flow-typed/npm/emotion_vx.x.x.js
@@ -0,0 +1,60 @@
+// flow-typed signature: 80a8e0be865298a7e4e717bfb9345137
+// flow-typed version: <<STUB>>/emotion_v9.2.12/flow_v0.85.0
+
+/**
+ * This is an autogenerated libdef stub for:
+ *
+ *   'emotion'
+ *
+ * Fill this stub out by replacing all the `any` types.
+ *
+ * Once filled out, we encourage you to share your work with the
+ * community by sending a pull request to:
+ * https://github.com/flowtype/flow-typed
+ */
+
+declare module 'emotion' {
+  declare module.exports: any;
+}
+
+/**
+ * We include stubs for each file inside this npm package in case you need to
+ * require those files directly. Feel free to delete any files that aren't
+ * needed.
+ */
+declare module 'emotion/dist/emotion.umd.min' {
+  declare module.exports: any;
+}
+
+declare module 'emotion/dist/index.cjs' {
+  declare module.exports: any;
+}
+
+declare module 'emotion/dist/index.esm' {
+  declare module.exports: any;
+}
+
+declare module 'emotion/macro' {
+  declare module.exports: any;
+}
+
+declare module 'emotion/src/index' {
+  declare module.exports: any;
+}
+
+// Filename aliases
+declare module 'emotion/dist/emotion.umd.min.js' {
+  declare module.exports: $Exports<'emotion/dist/emotion.umd.min'>;
+}
+declare module 'emotion/dist/index.cjs.js' {
+  declare module.exports: $Exports<'emotion/dist/index.cjs'>;
+}
+declare module 'emotion/dist/index.esm.js' {
+  declare module.exports: $Exports<'emotion/dist/index.esm'>;
+}
+declare module 'emotion/macro.js' {
+  declare module.exports: $Exports<'emotion/macro'>;
+}
+declare module 'emotion/src/index.js' {
+  declare module.exports: $Exports<'emotion/src/index'>;
+}
diff --git a/package.json b/package.json
@@ -8,6 +8,7 @@
   "author": "Michele Lugano <michele.lugano9@gmail.com> (https://www.linkedin.com/in/mlugano/)",
   "dependencies": {
     "debounce": "^1.0.2",
+    "emotion": "^9.2.12",
     "immutable": "~3.8.2",
     "react-popper": "^1.0.0",
     "react-virtualized": "^9.18.5",
@@ -52,8 +53,7 @@
     "rollup-plugin-babel": "^4.0.3",
     "rollup-plugin-commonjs": "^9.1.0",
     "rollup-plugin-eslint": "^5.0.0",
-    "rollup-plugin-node-resolve": "^3.0.0",
-    "style-loader": "^0.23.1"
+    "rollup-plugin-node-resolve": "^3.0.0"
   },
   "scripts": {
     "test": "jest",

diff --git a/src/Cell.js b/src/Cell.js
@@ -2,6 +2,7 @@
 
 import React from 'react'
 import Column from "./Column"
+import { css } from 'emotion'
 
 type CellProps = {
   value: any,
@@ -19,13 +20,21 @@ type CellState = {
   hover : boolean
 }
 
-const contentStyle = {
-  backgroundColor: 'inherit',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-  alignSelf: 'center',
-  width: '100%'
-}
+const contentClassName = css`
+  background-color: inherit;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  align-self: center;
+  width: 100%;
+`
+
+const cellClassName = css`
+  overflow: hidden;
+  flex-shrink: 0;
+  padding: 2px 10px;
+  position: relative;
+  display: flex;
+`
 
 export default class Cell extends React.PureComponent<CellProps, CellState> {
 
@@ -37,8 +46,8 @@ export default class Cell extends React.PureComponent<CellProps, CellState> {
   }
 
   render = () => {
-    return <div className="functional-data-grid__cell" style={{...this.getCellStyle(), ...this.props.column.style, ...this.props.style}} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
-      <div className="functional-data-grid__cell-content" style={contentStyle}>
+    return <div className={`functional-data-grid__cell ${cellClassName}`} style={{...this.getCellStyle(), ...this.props.column.style, ...this.props.style}} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
+      <div className={`functional-data-grid__cell-content ${contentClassName}`}>
         { this.renderValue(this.props.column, this.props.type, this.props.content, this.props.originalIndex) }
       </div>
     </div>
@@ -53,11 +62,6 @@ export default class Cell extends React.PureComponent<CellProps, CellState> {
 
   getCellStyle = () => {
     let styles : Object = {
-      overflow: 'hidden',
-      flexShrink: 0,
-      padding: '2px 10px',
-      position: 'relative',
-      display: 'flex'
     }
 
     if (this.state.hover) {

diff --git a/src/PresentationalFunctionalDataGrid.js b/src/PresentationalFunctionalDataGrid.js
@@ -16,6 +16,25 @@ import Footer from './Footer'
 import HorizontalScrollbar from './HorizontalScrollbar'
 import type { FunctionalDataGridStyle } from './FunctionalDataGridStyle'
 import { Manager, Reference, Popper } from 'react-popper'
+import { css } from 'emotion'
+
+const gridClassName = css`
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+  box-sizing: border-box;
+  border: solid 1px #ccc;
+`
+
+const layoutContainerClassName = css`
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+`
+
+const rowsContainerClassName = css`
+  flex-grow: 1;
+`
 
 type PresentationalFunctionalDataGridProps<T, A> = {
   columns: List<Column>,
@@ -82,11 +101,11 @@ export default class PresentationalFunctionalDataGrid<T, A: void> extends React.
   }
 
   render = () => {
-    let style = {display: 'flex', flexGrow: 1, flexDirection: 'column', height: this.props.height, boxSizing: 'border-box', border: 'solid 1px #ccc'}
-    return <div ref={ref => this.setState({ ref })} className={`functional-data-grid ${this.props.className}`} style={{...style, ...(this.props.style.grid != null ? this.props.style.grid : {})}}>
+
+    return <div ref={ref => this.setState({ ref })} className={`functional-data-grid ${this.props.className} ${gridClassName}`} style={{height: this.props.height, ...(this.props.style.grid != null ? this.props.style.grid : {})}}>
       <ScrollSync>
         {({clientHeight, clientWidth, onScroll, scrollHeight, scrollLeft, scrollTop, scrollWidth}) => (
-          <div style={{display: 'flex', flexDirection: 'column', flexGrow: 1}}>
+          <div className={`functional-data-grid__layout-container ${layoutContainerClassName}`}>
             <Header
               leftLockedColumns={this.getSortedColumns(this.getLeftLockedColumns()).filter(c => this.isColumnVisible(c.id))}
               freeColumns={this.getSortedColumns(this.getFreeColumns()).filter(c => this.isColumnVisible(c.id))}
@@ -106,7 +125,7 @@ export default class PresentationalFunctionalDataGrid<T, A: void> extends React.
                 : <div style={{ flexShrink: 0, width: '26px' }}></div>}
               columnGroups={this.props.columnGroups}
             />
-            <div style={{flexGrow: 1}}>
+            <div className={`functional-data-grid__rows-container ${rowsContainerClassName}`}>
               <AutoSizer>
                 {({height, width}) => (
                     <ReactVirtualizedList

diff --git a/src/Row.js b/src/Row.js
@@ -7,6 +7,7 @@ import Cell from './Cell'
 import DataRow from './DataRow'
 import Group from './Group'
 import RowSkeleton from './RowSkeleton'
+import { css } from 'emotion'
 
 type RowProps = {
   leftLockedColumns: List<Column>,
@@ -27,6 +28,20 @@ type RowState = {
   hover: boolean
 }
 
+const rowClassName = css`
+  display: flex;
+  border-bottom: solid 1px #eee;
+  line-height: 25px;
+  background-color: #fff;
+`
+
+const groupClassName = css`
+  overflow: hidden;
+  flex-shrink: 0;
+  padding: 2px 10px;
+  position: relative;
+`
+
 export default class Row extends React.PureComponent<RowProps, RowState> {
 
   constructor(props: RowProps) {
@@ -39,39 +54,19 @@ export default class Row extends React.PureComponent<RowProps, RowState> {
 
   render = () => {
 
-    let rowStyle = this.getRowStyle(this.props.element.type, this.props.style)
-
     return this.props.element.type === 'group-header'
-      ? this.groupHeaderRowRenderer(rowStyle, this.props.element, this.props.groups, this.onMouseOver, this.onMouseOut)
-      : this.elementsRowRenderer(this.props.rowIndex, this.props.element, this.props.leftLockedColumns, this.props.freeColumns, this.props.rightLockedColumns, this.onMouseOver, this.onMouseOut, this.state.hover, this.props.cellStyle, rowStyle, this.getColumnWidth)
-  }
-
-  getRowStyle = (type: string, style: Object) => {
-
-    return {
-      ...{
-        display: 'flex',
-        borderBottom: 'solid 1px #eee',
-        lineHeight: '25px',
-        backgroundColor: '#fff'
-      },
-      ...style
-    }
+      ? this.groupHeaderRowRenderer(this.props.style, this.props.element, this.props.groups, this.onMouseOver, this.onMouseOut)
+      : this.elementsRowRenderer(this.props.rowIndex, this.props.element, this.props.leftLockedColumns, this.props.freeColumns, this.props.rightLockedColumns, this.onMouseOver, this.onMouseOut, this.state.hover, this.props.cellStyle, this.props.style, this.getColumnWidth)
   }
 
   groupHeaderRowRenderer = (style: Object, element: DataRow<any>, groups: List<Group<any, any>>, onMouseOver: Function, onMouseOut: Function) =>
     <RowSkeleton
-      className="functional-data-grid__row functional-data-grid__row--group-header"
+      className={`${rowClassName} functional-data-grid__row functional-data-grid__row--group-header`}
       onMouseEnter={onMouseOver}
       onMouseLeave={onMouseOut}
       style={style}
       onClick={this.props.onClick}
-      leftLocked={<div style={{
-          overflow: 'hidden',
-          flexShrink: 0,
-          padding: '2px 10px',
-          position: 'relative'
-        }}>
+      leftLocked={<div className={groupClassName}>
         { this.renderGroups(element, groups) }
       </div>}
     />
@@ -116,7 +111,12 @@ renderElementsRow = (
   cellStyle: Object,
   style: Object,
   columnWidthGetter: Function
-) => <RowSkeleton data-index={rowIndex} data-original-index={element.originalIndex} className={'functional-data-grid__row ' + (element.type === 'aggregate' ? 'functional-data-grid__row--aggregate' : 'functional-data-grid__row--element')} onMouseEnter={onMouseOver} onMouseLeave={onMouseOut}
+) => <RowSkeleton
+  data-index={rowIndex}
+  data-original-index={element.originalIndex}
+  className={`${rowClassName} functional-data-grid__row functional-data-grid__row--${element.type}`}
+  onMouseEnter={onMouseOver}
+  onMouseLeave={onMouseOut}
   style={style}
   leftLocked={ this.renderCells(leftLockedColumns, hover, element, rowIndex, cellStyle, columnWidthGetter) }
   free={this.renderCells(freeColumns, hover, element, rowIndex, cellStyle, columnWidthGetter)}

diff --git a/src/RowSkeleton.js b/src/RowSkeleton.js
@@ -1,6 +1,7 @@
 //@flow
 
 import * as React from 'react'
+import { css } from 'emotion'
 
 const columnsOptionsWidth = 26
 
@@ -18,6 +19,20 @@ type RowSkeletonState = {
   scrollingDiv: ?HTMLElement
 }
 
+const leftLockedClassName = css`
+  display: flex;
+`
+const freeClassName = css`
+  display: flex;
+  flex-grow: 1;
+`
+const rightLockedClassName = css`
+  display: flex;
+`
+const rightClassName = css`
+  flex-shrink: 0;
+`
+
 export default class RowSkeleton extends React.PureComponent<RowSkeletonProps, RowSkeletonState> {
 
   constructor(props: RowSkeletonProps) {
@@ -72,16 +87,16 @@ export default class RowSkeleton extends React.PureComponent<RowSkeletonProps, R
   render = () => {
     let { leftLocked, free, rightLocked, right, scrollLeft, onScroll, scrollbar, ...otherProps } = this.props;
     return <div {...otherProps}>
-      <div style={{display: 'flex'}}>
+      <div className={`functional-data-grid__row__left-locked ${leftLockedClassName}`}>
         { leftLocked }
       </div>
-      <div style={{display: 'flex', overflow: scrollbar ? 'auto': 'hidden', flexGrow: 1}} ref={(el) => this.setState({ scrollingDiv: el }, () => this.updateScroll())} onScroll={this.triggerOnScroll}>
+      <div className={`functional-data-grid__row__free ${freeClassName}`} style={{overflow: scrollbar ? 'auto': 'hidden'}} ref={(el) => this.setState({ scrollingDiv: el }, () => this.updateScroll())} onScroll={this.triggerOnScroll}>
         { free }
       </div>
-      <div style={{display: 'flex'}}>    
+      <div className={`functional-data-grid__row__right-locked ${rightLockedClassName}`}>    
         { rightLocked }
       </div>
-      <div style={{ flexShrink: 0, width: `${columnsOptionsWidth}px` }}>
+      <div className={`functional-data-grid__row__right ${rightClassName}`} style={{width: `${columnsOptionsWidth}px`}}>
         { right }
       </div>
     </div>