0.1.5 • Published 3 years ago
@rexlabs-spicerhaart/list v0.1.5
List - Vivid Component
List provides a component to display arrays of information with a consistent UI.
Most design decisions will be made by the implementation for flexibility of use-cases.
Development
Install dependencies
$ yarn
Available Commands
$ yarn start # starts storybook, for visually testing list
$ yarn test # runs all units tests
$ yarn test:watch # runs unit tests when files change
$ yarn build # bundles the package for production
Usage
Props
const propTypes = {
// The component to be rendered as the header of the list. Rendered once as the first item
Header: types.element,
// Function returning the component which will be rendered for each item in the list
renderItem: types.func.isRequired,
// Array containing all the information to render in renderItem. At least an empty array is required
items: types.array,
// The component to be rendered if the items array is empty (there is no information to display)
EmptyState: types.oneOfType([types.element, types.func]),
// The component which handles fetching subsequent data from the server.
// Will most likely require props for handling loading state and onClick handlers etc.
LoadMore: types.oneOfType([types.element, types.func]),
// Indicates the initial loading state of data from the server
isLoading: types.boolean.isRequired,
// Array of errors returned when loading fails
loadErrors: types.array.isRequired,
// The Component to be displayed when loading data
LoadingView: types.func.isRequired,
// The Component to be displayed when loading fails
ErrorView: types.func.isRequired,
// Function used in the render loop which gets the property used for the Key from the data object
getKey: types.func,
// Specify if you want the Header component to display when the list is empty
alwaysRenderHeader: types.bool
};
const defaultProps = {
items: [],
getKey: (_, index) => index,
isLoading: false,
isFetching: false,
endReached: false,
autoLoadMore: false,
alwaysRenderHeader: false
};
Example
const RenderComponent = props => {
return (
<div
style={{
display: 'flex',
justifyContent: 'space-between'
}}>
<div>{props.data.item1}</div>
<div>{props.data.item2}</div>
<div>{props.data.item3}</div>
</div>
);
};
<List
renderItem={item => <RenderComponent data={item} />}
items={items}
isLoading={false}
loadErrors={[]}
LoadingView={() => <div>Loading...</div>}
ErrorView={() => <div>Has Errors</div>}
/>;
Legal
Copyright (c) 2018 Rex Software All Rights Reserved.
0.1.5
3 years ago