react-virtualized - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

CHANGELOG.md

 Changelog
 ------------
 
+#### 1.0.2
+Removed default row-border styling from FlexTable and added new :rowClassName property.
+
+#### 1.0.1
+Updated to use ReactDOM.findDOMNode instead of getDOMNode (but added backwards-compatible check for < React v0.14).
+
 #### 1.0.0
@@ -5,0 +11,0 @@ Package JSON updated so that "main" entry points to `dist/react-virtualized.js` to provide easier integration for users that don't want Babel/Webpack to have to process their `node_modules` folder.

package.json

@@ -6,3 +6,3 @@ {
   "user": "bvaughn",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "scripts": {
@@ -9,0 +9,0 @@ "build": "npm run build:demo && npm run build:dist",

README.md

@@ -0,1 +1,3 @@
+<img src="https://cloud.githubusercontent.com/assets/29597/11453244/aee1b36e-95b7-11e5-9946-17659c0b24e7.png" alt="React virtualized" data-canonical-src="https://cloud.githubusercontent.com/assets/29597/11453244/aee1b36e-95b7-11e5-9946-17659c0b24e7.png" width="304" height="91" />
+
 Demos available here:
@@ -13,4 +15,7 @@ http://bvaughn.github.io/react-virtualized/
 
-### VirtualScroll Example
+Examples
+---------------
 
+#### VirtualScroll Example
+
 Below is a simple `VirtualScroll` example. Each row in the virtualized list is rendered through the use of a `rowRenderer` function for performance reasons. This function must return an element with a unique `key` and must fit within the specified `rowHeight`.
@@ -48,3 +53,3 @@
 
-### FlexTable Example
+#### FlexTable Example
 
@@ -51,0 +56,0 @@ Below is a very basic `FlexTable` example. This table has only 2 columns, each containing a simple string. Both have a fixed width and neither is sortable. [See here](blob/master/source/FlexTable/FlexTable.example.js) for a more full-featured example including custom cell renderers, sortable headers, and more.

source/demo.js

@@ -6,6 +6,12 @@ import { render } from 'react-dom'
 
+require('./demo.less')
+
 render((
-    <div>
-      <VirtualScrollExample/>
-      <FlexTableExample/>
+    <div className='demo__row'>
+      <div className='demo__row__VirtualScrollExampleColumn'>
+        <VirtualScrollExample/>
+      </div>
+      <div className='demo__row__FlexTableExampleColumn'>
+        <FlexTableExample/>
+      </div>
     </div>
@@ -12,0 +18,0 @@ ),

source/FlexTable/FlexTable.example.js

@@ -14,3 +14,3 @@ /** @flow */
       rowsCount: 1000,
-      scrollToIndex: 50,
+      scrollToIndex: undefined,
       sortBy: 'name',
@@ -64,3 +64,10 @@ sortDirection: SortDirection.ASC,
       <div className='FlexTableExample'>
-        <h1>FlexTable</h1>
+        <h1 className='FlexTableExample__header'>
+          FlexTable
+          <small className='FlexTableExample__header__small'>
+            <a href='https://github.com/bvaughn/react-virtualized/blob/master/source/FlexTable/FlexTable.example.js'>
+              View source
+            </a>
+          </small>
+        </h1>
         <p>
@@ -72,40 +79,34 @@ The table layout below is created with flexboxes.
         </p>
-        <div>
-          <label className='FlexTableExample__label'>Num rows</label>
-          <label className='FlexTableExample__label'>Scroll to</label>
-          <label className='FlexTableExample__label'>List height</label>
-          <label className='FlexTableExample__label'>Row height</label>
-          <label className='FlexTableExample__label'>Header height</label>
-        </div>
-        <div>
-          <input
-            className='FlexTableExample__input'
+        <div className='FlexTableExample__row'>
+          <LabeledInput
+            label='Num rows'
             name='rowsCount'
             onChange={this._onRowsCountChange}
-            value={rowsCount}/>
-
-          <input
-            className='FlexTableExample__input'
+            value={rowsCount}
+          />
+          <LabeledInput
+            label='Scroll to'
             name='onScrollToRow'
             placeholder='Index...'
             onChange={this._onScrollToRowChange}
-            value={scrollToIndex}/>
-
-          <input
-            className='FlexTableExample__input'
+            value={scrollToIndex}
+          />
+          <LabeledInput
+            label='List height'
             name='virtualScrollHeight'
             onChange={event => this.setState({ virtualScrollHeight: parseInt(event.target.value, 10) || 1 })}
-            value={virtualScrollHeight}/>
-
-          <input
-            className='FlexTableExample__input'
+            value={virtualScrollHeight}
+          />
+          <LabeledInput
+            label='Row height'
             name='virtualScrollRowHeight'
             onChange={event => this.setState({ virtualScrollRowHeight: parseInt(event.target.value, 10) || 1 })}
-            value={virtualScrollRowHeight}/>
-
-          <input
-            className='FlexTableExample__input'
+            value={virtualScrollRowHeight}
+          />
+          <LabeledInput
+            label='Header height'
             name='virtualScrollHeaderHeight'
             onChange={event => this.setState({ virtualScrollHeaderHeight: parseInt(event.target.value, 10) || 1 })}
-            value={virtualScrollHeaderHeight}/>
+            value={virtualScrollHeaderHeight}
+          />
         </div>
@@ -117,5 +118,6 @@
             className='FlexTableExample__FlexTable'
-            width={350}
+            width={390}
+            headerHeight={virtualScrollHeaderHeight}
             height={virtualScrollHeight}
-            headerHeight={virtualScrollHeaderHeight}
+            rowClassName='FlexTableExample__FlexTable__row'
             rowHeight={virtualScrollRowHeight}
@@ -153,6 +155,2 @@ rowGetter={rowGetter}
         </div>
-
-        <p>
-          View <a href='https://github.com/bvaughn/react-virtualized/blob/master/source/FlexTable/FlexTable.example.js'>the source</a>
-        </p>
       </div>
@@ -187,2 +185,19 @@ )
 
+function LabeledInput ({ label, name, onChange, placeholder, value }) {
+  return (
+    <div className='FlexTableExample__column'>
+      <label className='FlexTableExample__label'>
+        {label}
+      </label>
+      <input
+        className='FlexTableExample__input'
+        name={name}
+        placeholder={placeholder}
+        onChange={onChange}
+        value={value}
+      />
+    </div>
+  )
+}
+
 const loremIpsum = [
@@ -189,0 +204,0 @@ 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',

source/FlexTable/FlexTable.js

@@ -61,2 +61,4 @@ /**
     horizontalPadding: PropTypes.number,
+    /** Optional CSS class to apply to all table rows (including the header row) */
+    rowClassName: PropTypes.string,
     /**
@@ -118,2 +120,3 @@ * Callback responsible for returning a data row given an index.
       height,
+      rowClassName,
       rowHeight,
@@ -142,6 +145,6 @@ rowsCount,
           <div
+            className={cn('FlexTable__headerRow', rowClassName)}
             style={{
               height: headerHeight
             }}
-            className='FlexTable__headerRow'
           >
@@ -249,2 +252,3 @@ {this.getRenderedHeaderRow()}
       children,
+      rowClassName,
       rowGetter,
@@ -267,3 +271,3 @@ rowHeight
         key={rowIndex}
-        className='FlexTable__row'
+        className={cn('FlexTable__row', rowClassName)}
         style={{
@@ -270,0 +274,0 @@ height: rowHeight

source/VirtualScroll/VirtualScroll.example.js

@@ -35,3 +35,10 @@ /**
       <div className='VirtualScrollExample'>
-        <h1>VirtualScroll</h1>
+        <h1 className='VirtualScrollExample__header'>
+          VirtualScroll
+          <small className='VirtualScrollExample__header__small'>
+            <a href='https://github.com/bvaughn/react-virtualized/blob/master/source/VirtualScroll/VirtualScroll.example.js'>
+              View source
+            </a>
+          </small>
+        </h1>
         <p>
@@ -41,38 +48,32 @@ The list below is virtualized, meaning that only the visible rows are rendered.
         </p>
-        <div>
-          <label className='VirtualScrollExample__label'>Num rows</label>
-          <label className='VirtualScrollExample__label'>Scroll to</label>
-          <label className='VirtualScrollExample__label'>List height</label>
-          <label className='VirtualScrollExample__label'>Row height</label>
-        </div>
-        <div>
-          <input
-            className='VirtualScrollExample__input'
+        <div className='VirtualScrollExample__row'>
+          <LabeledInput
+            label='Num rows'
             name='rowsCount'
             onChange={this._onRowsCountChange}
-            value={rowsCount}/>
-
-          <input
-            className='VirtualScrollExample__input'
+            value={rowsCount}
+          />
+          <LabeledInput
+            label='Scroll to'
             name='onScrollToRow'
             placeholder='Index...'
             onChange={this._onScrollToRowChange}
-            value={scrollToIndex}/>
-
-          <input
-            className='VirtualScrollExample__input'
+            value={scrollToIndex}
+          />
+          <LabeledInput
+            label='List height'
             name='virtualScrollHeight'
             onChange={event => this.setState({ virtualScrollHeight: parseInt(event.target.value, 10) || 1 })}
-            value={virtualScrollHeight}/>
-
-          <input
-            className='VirtualScrollExample__input'
+            value={virtualScrollHeight}
+          />
+          <LabeledInput
+            label='Row height'
             name='virtualScrollRowHeight'
             onChange={event => this.setState({ virtualScrollRowHeight: parseInt(event.target.value, 10) || 1 })}
-            value={virtualScrollRowHeight}/>
+            value={virtualScrollRowHeight}
+          />
         </div>
-
         <VirtualScroll
           className='VirtualScrollExample__VirtualScroll'
-          width={300}
+          width={400}
           height={virtualScrollHeight}
@@ -84,6 +85,2 @@ rowsCount={rowsCount}
         />
-
-          <p>
-            View <a href='https://github.com/bvaughn/react-virtualized/blob/master/source/VirtualScroll/VirtualScroll.example.js'>the source</a>
-          </p>
       </div>
@@ -128,1 +125,18 @@ )
 }
+
+function LabeledInput ({ label, name, onChange, placeholder, value }) {
+  return (
+    <div className='FlexTableExample__column'>
+      <label className='FlexTableExample__label'>
+        {label}
+      </label>
+      <input
+        className='FlexTableExample__input'
+        name={name}
+        placeholder={placeholder}
+        onChange={onChange}
+        value={value}
+      />
+    </div>
+  )
+}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

215134

increased by1.72%

Number of package files

35

increased by2.94%

Lines of code

3155

increased by1.58%

Number of lines in readme file

108

increased by4.85%

No dependency changes