Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-super-components
Advanced tools
react-super-components - npm Package Compare versions
Comparing version 1.2.2 to 1.3.0
@@ -90,2 +90,8 @@ 'use strict'; | ||
| if (typesToMatch.includes('default')) { | ||
| var _itemType = _lodash2.default.find(itemTypes, { type: 'default' }); | ||
| return _itemType; | ||
| } | ||
| throw new Error('Invalid prop `data` supplied to `List`. An object of `data` has a type property' + ' that does not match a passed in type from `itemTypes`.'); | ||
@@ -196,8 +202,10 @@ } | ||
| data.forEach(function (dataItem) { | ||
| if (!_lodash2.default.isObject(dataItem)) { | ||
| throw new Error('Invalid prop `' + propName + '` supplied to `' + componentName + '`. ' + ('Expected `' + propName + '` to be an array of objects.')); | ||
| } else if (!dataItem.type) { | ||
| throw new Error('Invalid prop `' + propName + '` supplied to `' + componentName + '`. An object of ' + ('`' + propName + '` is missing the required property `type`.')); | ||
| } else if (!_lodash2.default.isString(dataItem.type)) { | ||
| throw new Error('Invalid prop `' + propName + '` supplied to `' + componentName + '`. An object of ' + ('`' + propName + '` has a TypeError for the required property `type`.')); | ||
| if (!_lodash2.default.find(props.itemTypes, { type: 'default' })) { | ||
| if (!_lodash2.default.isObject(dataItem)) { | ||
| throw new Error('Invalid prop `' + propName + '` supplied to `' + componentName + '`. ' + ('Expected `' + propName + '` to be an array of objects if no default ') + 'itemType is passed.'); | ||
| } else if (!dataItem.type) { | ||
| throw new Error('Invalid prop `' + propName + '` supplied to `' + componentName + '`. An object of ' + ('`' + propName + '` is missing the required property `type`.')); | ||
| } else if (!_lodash2.default.isString(dataItem.type)) { | ||
| throw new Error('Invalid prop `' + propName + '` supplied to `' + componentName + '`. An object of ' + ('`' + propName + '` has a TypeError for the required property `type`.')); | ||
| } | ||
| } | ||
@@ -204,0 +212,0 @@ }); |
@@ -25,2 +25,3 @@ # List | ||
| ### Single Item Component | ||
@@ -46,2 +47,3 @@ | ||
| ### Multiple Item Components | ||
@@ -74,4 +76,37 @@ | ||
| ### Multiple Item Components and groupBy prop | ||
| ### Default Item Component | ||
| A list with multiple item components including one default component. | ||
| If `itemTypes` is given an object with a `type` of 'default' it will render that | ||
| object's passed in `component` whenever a dataItem is not given a `type` property. | ||
| ``` | ||
| import { List } from 'react-super-components'; | ||
| import { DefaultListItem, nonWrestlerListItem } from 'ExampleImportedListItems.jsx'; | ||
| // The list below contains default dataItems without a type property | ||
| const listToBeRendered = [ | ||
| 'Ray Mysterio', | ||
| 'Ric Flair', | ||
| 'Lex Luger', | ||
| 'Dolph Ziggler', | ||
| 'Roman Reigns', | ||
| { type: 'different', data: 'Hilary Clinton'}, | ||
| { type: 'different', data: 'Morgan Freeman'}, | ||
| ]; | ||
| const itemTypes = [ | ||
| { type: 'default', height: 60, component: DefaultListItem }, | ||
| { type: 'different', height: 50, component: nonWrestlerListItem }, | ||
| ]; | ||
| <List | ||
| data={ listToBeRendered } | ||
| itemTypes={ itemTypes } | ||
| /> | ||
| ``` | ||
| ### Multiple Item Components and groupBy Prop | ||
| A list with multiple components that also needs to group the given data a certain way. | ||
@@ -130,4 +165,5 @@ The `groupBy` prop must be given either a string that specifies which property to group | ||
| ### Single/Multiple Item Component(s) and sortBy prop | ||
| ### Single/Multiple Item Component(s) and sortBy Prop | ||
| A list that needs to sort its given data a certain way. The `sortBy` prop specifies | ||
@@ -176,14 +212,14 @@ which property to sort the given data by and sorts it in ascending order. | ||
| | Property | Type | Required? | Description | | ||
| | :---: | :---: | :---: | :---: | | ||
| | className | String | | CSS class name | | ||
| | data | Array | ✓ | The data you want to use. If multiple `itemTypes` are given, data must be an array of objects with a property `type` that matches a passed `type` in `itemTypes` | | ||
| | groupBy | Function or String | | Either a string that specifies which property to group the given `data` by or a function that expects dataItem and returns how the `data` should be grouped | | ||
| | itemTypes | Object or Array | ✓ | Either an object or an array of objects with the specified properties listed below | | ||
| | itemTypes.type | String | ✓ (when multiple itemTypes) | Used to match data with its corresponding component when multiple `itemTypes` are given | | ||
| | itemTypes.height | Number | ✓ | Specifies the height of the rendered React component | | ||
| | itemTypes.component | Function | ✓ | Specifies the React component that will be rendered | | ||
| | itemTypes.componentProps | Object | | Specifies additional props (besides the default `data` and `index`) to be passed to the rendered component | | ||
| | scrollToIndex | Number | | Scrolls the list to the specified index. Useful for rolodexes. | | ||
| | sortBy | Any | | Specifies which property to sort the given `data` by. Sorts in ascending order | | ||
| | thresholdRows | Number | | Number of rows to render above/below the visible bounds of the list. This can help reduce flickering during scrolling on certain browers/devices | | ||
| | Property | Type | Required? | Description | | ||
| | :---: | :---: | :---: | :---: | | ||
| | className | String | | CSS class name | | ||
| | data | Array | ✓ | The data you want to use. If multiple `itemTypes` are given and no 'default' itemType exists, data must be an array of objects with a property `type` that matches a passed `type` in `itemTypes` | | ||
| | groupBy | Function or String | | Either a string that specifies which property to group the given `data` by or a function that expects dataItem and returns how the `data` should be grouped | | ||
| | itemTypes | Object or Array | ✓ | Either an object or an array of objects with the specified properties listed below | | ||
| | itemTypes.type | String | ✓ (when multiple itemTypes) | Used to match data with its corresponding component when multiple `itemTypes` are given | | ||
| | itemTypes.height | Number | ✓ | Specifies the height of the rendered React component | | ||
| | itemTypes.component | Function | ✓ | Specifies the React component that will be rendered | | ||
| | itemTypes.componentProps | Object | | Specifies additional props (besides the default `data` and `index`) to be passed to the rendered component | | ||
| | scrollToIndex | Number | | Scrolls the list to the specified index. Useful for rolodexes. | | ||
| | sortBy | Any | | Specifies which property to sort the given `data` by. Sorts in ascending order | | ||
| | thresholdRows | Number | | Number of rows to render above/below the visible bounds of the list. This can help reduce flickering during scrolling on certain browers/devices | |
@@ -46,3 +46,3 @@ { | ||
| }, | ||
| "version": "1.2.2" | ||
| "version": "1.3.0" | ||
| } |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by2.1%
80729
- Lines of code
- increased by0.51%
1184
No dependency changes