Power-search NPM

power-search

Installation & Usage

npm install curio-power-search --save

import React from 'react';
import ReactDOM from 'react-dom';
import PowerSearch from "curio-power-search";

const filterListExample:Array<Filter> = [
    {
        key:"subscribe",
        label:"User Status",
        active:true,
        op_type:"binary",
        value_type:"select",
        value_option_list:[
            {value:0, label:"Unsubscribed"},
            {value:1, label:"Subscribed"}
        ],
        value_default:1
    },{
        key:"username",
        label:"Username",
        active:false,
        op_type:"all",
        value_type:"input"
    }
];

ReactDOM.render(
    <PowerSearch filterList={filterListExample} url="" />,
    document.getElementById("app"));

Configuration

PowerSearch

PropName	Type	Description	Default value
filterList	`Array<Filter>`	Array of Filters	required
url	`string`	Search request URL	required
onChange	`(filterList:Array<Filter>) => any`	Return the changes applied to filterList

Filter

Property	Type	Description	Default value
key	`string`	Filter key	required
label	`string`	Filter Label	required
active	`boolean`	Set if the filter is active or not	`false`
op_type	`string`	Define the OperationType (unique/binary/all/date/custom)	required
op_type_custom	`Array<Option>`	Set the custom OperationType if op_type === "custom"
value_type	`string`	Define the type of the value input (text/select/search/datepicker/custom)	required
value_type_custom	`(value:any) => JSX.Element`	Define the custom value render if value_type === "custom"	required
value_option_list	`Array<Option>`	Define the list of options if value_type === ("select		search")
value_default	`any`	Define the default value
list	`Array<Option>`	Define the list of filter items

Option

Property	Type	Description	Default value
value	`any`	Option value	required
label	`string`	Option label	required

OperationType

{
    unique: [
        { label: 'is', value: 'eq'}
    ],
    binary: [
        { label: 'is', value: 'eq'},
        { label: 'is not', value: 'ne'}
    ],
    all: [
        { label: 'is', value: 'eq'},
        { label: 'is not', value: 'ne'},
        { label: 'starts with', value: 'starts with'},
        { label: 'ends with', value: 'ends with'},
        { label: 'contains', value: 'contains'},
        { label: 'does not contain', value: 'does not contain'}
    ],
    date: [
        { label: 'is', value: 'day'},
        { label: 'greater than', value: 'gt'},
        { label: 'less than', value: 'lt'}
    ]
};

@types/lodash @types/moment lodash moment

@everything-registry/sub-chunk-2464

1.1.0

6 years ago