Empower Sidebar Filter
Installation
npm i empower-sidebar-filter
Usage
Include in the component:
import SidebarFilter from 'empower-sidebar-filter';
Properties
statusOptions - This is the value label for options
preSelectedStatus - This is the preselected status, can be empty or unset, value string should be based on the statusOptions provided.
dateFiltering - This just a toggle if the date filtering shows or not.
preSelectedDate - Date string if you wish to have pre selected date, format should be "2022-04-21"
categoryOptions - This is the category select, value label array same with the statusOptions, can be unset.
preSelectedCategory - If you wish to have a preselected category, you can add this property, take note that it should match the value from categoryOptions props.
preSelectedSort - This is a preselected sort, value can be "asc" or "desc".
getValue - this is the function that will be called upon every actions in the sidebar filter.
Example
const sampleProps = {
statusOptions: [
{
value:'all-templates',
label:'All templates',
},
{
value:'active',
label:'Active',
},
{
value:'deactivated',
label:'Deactivated',
},
],
preSelectedStatus: 'active',
dateFiltering: true,
preSelectedDate: "2022-04-03",
categoryOptions:[
{
label: "Category 1",
value: "categ-1", // string optional
},
{
label: "Category 2",
value: "categ-2", // string optional
},
{
label: "Category 3",
value: "categ-3", // string optional
},
{
label: "Category 4",
value: "categ-4", // string optional
},
],
preSelectedCategory: 'categ-2',
preSelectedSort:'asc',
};
const App = () => {
const getValue = (val: Object): void => {
console.log(val);
}
return (
<div className="sample-div">
<SidebarFilter
{...sampleProps}
getValue={val => getValue(val)}
/>
</div>
);
}
export default App;
Take note that all properties are optional and can be unset.