nhabuiduc / react-filter-box Goto Github PK

how we can create custom operator which will use two value or no values eg : BETWEEN, IS NOT BLANK, IS NOT NULL etc.

does it available?

this.options = [
{
columnText: "Email @",
columField: "Email",
type:"text"
}
];

Library expects columField instead of columnField in the options config.

I'd like to load an initial expression to the component but it seems to be impossible.
In addition, because of the same reason, it's impossible to clear the expression programaticlly.

Hello,
We're using your component in the internal project and we've faced an issue with introducing NOT operator. All operators work like x OPERATOR y but NOT needs to work like NOT x for example NOT (x CONTAINS y). Is it possible somehow to define such operator without extending component?

Other question is your component going to support Free Text Search for example like GitLab and other tools that use such filter box components?

I'm having a problem with two inputs are rendered in one window, any help would be appreciated

Code used to render input:

import React from 'react'
import ReactFilterBox, { SimpleResultProcessing } from 'react-filter-box'

import 'react-filter-box/lib/react-filter-box.css'

const options = [
  {
    columnField: 'Name',
    type: 'text',
  },
  {
    columnField: 'Description',
    type: 'text',
  },
  {
    columnField: 'Status',
    type: 'selection', // when using type selection, it will automatically sugest all posible values
  },
  {
    columnText: 'Email @',
    columnField: 'Email',
    type: 'text',
  },
]
const TagFilter = () => {
  const [data, setData] = React.useState([])

  const onParseOk = (expressions: any) => {
    const newData = new SimpleResultProcessing(options).process(data, expressions)
    setData(newData)
    // your new data here, which is filtered out of the box by SimpleResultProcessing
  }

  return (
    <div className="main-container">
      <ReactFilterBox
        data={data}
        options={options}
        onParseOk={onParseOk}
      />
    </div>
  )
}

export default TagFilter

Two CodeMirror elements instead of one

Gif showing the behaviour of the bug

Code sandbox presenting the issue:
https://codesandbox.io/s/confident-cherry-e92zld?file=/src/App.js

I have react-filter-box embedded into a component that reads the options dynamically from a database on componentDidMount.

<ReactFilterBox options={this.state.optionsFromDatabase} />

does reinitialise the options.

i am using react-filter-box to create the query in the front end and then sending it to my expressjs backend to be used for querying a table using sequelize.

Has anyone done this and able to share their code?

Is there any option or event available to clea

r the input after the search.

When I try to modify at the middle of the query, the cursor always jumps to the last position. Is there any way to fix it?

Is it possible for me to exclude the brackets from auto suggestion, if so could someone tell me how ?

hi when I add more filter choices how can I show them as a wrapped content or multiline view ?

Problem: Cannot deploy react-filter-box in environments that use the unsafe-eval Content Security Policy.

react-dom.production.min.js:198 EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "default-src 'self'".

    at compile (react-filter-box.js:9)
    at compileCondition (react-filter-box.js:9)
    ...

Cause: The Grammar (src/grammar.pegjs) parser is compiled at runtime by pegjs, which requires the use of eval(...).

Seem to be an obvious error.
Happens when columField and columnText are not identical.
https://codesandbox.io/s/2o02vr47vr

Hi @nhabuiduc ,

First, I really like your component when I was using it on create-react-app !

But I rise this issue because it seems it doesn't works on Next.js.

I tried the dynamic loading, some process.browser checks, and even a dynamic important when the componentDidMount is fired as an async to prepare the load of the component. Nothing works.

Btw, React show this error :

Element ref was specified as a string (textarea) but no owner was set. This could happen for one of the following reasons:
1. You may be adding a ref to a functional component
2. You may be adding a ref to a component that was not created inside a component's render method
3. You have multiple copies of React loaded
See https://fb.me/react-refs-must-have-owner for more information.

I hope you'll test it and find a way!

Here the code you could use to test it quickly on Next.js

import { Component, Fragment } from "react";

import dynamic from 'next/dynamic'
import NoSSR from 'react-no-ssr';

// It's the data you use on your example :)
import data from "./data";

let ReactFilterBox = undefined;

class Page extends Component {


    state = {
        appIsMounted: false
    }

    constructor(props){
        super(props);

         this.options = [
            {
                columField: "Name",
                type:"text"
            },
            {
                columField: "Description",
                type:"text"
            },
            {
                columField: "Status",
                type:"selection" // when using type selection, it will automatically sugest all posible values
            },
            {
                columnText: "Email @",
                columField: "Email",
                type:"text"
            }
        ];
    }

    onParseOk(expressions){
        var data = [];
        var newData = new SimpleResultProcessing(this.options).process(data,expressions);
        //your new data here, which is filtered out of the box by SimpleResultProcessing
    }

    async componentDidMount(){
        let result = await import('react-filter-box');
        console.log(result);
        ReactFilterBox = result.default;
        this.setState({
            appIsMounted: true
        })
    }

    render() {

        if (typeof window !== 'undefined') {
            // ReactFilterBox = dynamic(() => import('react-filter-box'))
        }
        else {
            return (
                <div>
                    Loading...
                    {
                        typeof window
                    }
                </div>
            );
        }

        return (
            <div>
                {

                    this.state.appIsMounted && process.browser && <NoSSR>
                        <ReactFilterBox
                            data={data}
                            options={this.options}
                            onParseOk={this.onParseOk.bind(this)}
                        />
                    </NoSSR>
                }
            </div>
        );
    }
}

export default Page;

Please update react-codemirror dep to get rid of 'React.createClass is deprecated' warning

Is it possible to use the type in options for a column to have it automatically parsed? For example, is there any way to get a number back from the filter instead of the string that the user typed in?

const options = [
  {
    columnField: 'SourcePort',
    type: 'number'
  }
];

const handleQueryChange = (expressions) => {
  // Proposed: expressions[0].value is a number, because it was automatically parsed
};

return <ReactFilterBox onChange={handleQueryChage} options={options} />

error: peg$SyntaxError {message: "Expected "(" or category but end of input found.", expected: Array(2), found: null, location: Object, name: "SyntaxError"…} expected : Array(2) found : null location : Object message : "Expected "(" or category but end of input found." name : "SyntaxError" stack : "SyntaxError: Expected "(" or category but end of input found.↵ at peg$buildStructuredError (eval at compile (http://localhost:3000/assets/app.js:214235:18984), <anonymous>:328:14)↵ at Object.peg$parse [as parse] (eval at compile (http://localhost:3000/assets/app.js:214235:18984), <anonymous>:841:13)↵ at e.parseQuery (http://localhost:3000/assets/app.js:214235:121562)↵ at e.getSugessions (http://localhost:3000/assets/app.js:214235:121698)↵ at n.needAutoCompleteValues (http://localhost:3000/assets/app.js:214224:247342)↵ at e.needAutoCompletevalues (http://localhost:3000/assets/app.js:214235:119295)↵ at e.show (http://localhost:3000/assets/app.js:214235:117318)↵ at n.handlePressingAnyCharacter (http://localhost:3000/assets/app.js:214235:118848)↵ at http://localhost:3000/assets/app.js:214235:119713↵ at kt (http://localhost:3000/assets/app.js:214224:89070)" __proto__ : Error

Do i need to set any other props to get this in order?

Is there any way to reverse the expression object to query string?

Looking to have number comparison, ie Age >= 25. Is this doable in the current version?

Hi, I've been trying to integrate this library into my typescript project and haven't had much success. The documentation says that the library is built on typescript, but it seems to only be a js library. I did install typings and types, but I still get an error message to install @types/react-filter-box, although this does not exist. Can you please advise how to get this running with typescript? Thanks!

[{ title: 'Fallen', author: { firstName: 'David', lastName: 'Maine', }, }, { title: 'Monster 1959', author: { firstName: 'David', lastName: 'Maine', }, test:[{ Kemo:"dhgvgfhsdf", iner:[{inner:[{innerr:"fgdvsfhsdvfsdf"},{innerr1:"fgdvsfhsdvfsdf"},{innerr2:"fgdvsfhsdvfsdf"}]}] }] }, ],
If i have data will i be able to search by innerr1?

I try to use react-filter-box, but I am getting the following error. I think it is because of my react version is 16 and library depends on react 15. Could you please update it or change it to peer dependency?

Uncaught Error: Element ref was specified as a string (textarea) but no owner was set. This could happen for one of the following reasons:

1. You may be adding a ref to a functional component
2. You may be adding a ref to a component that was not created inside a component's render method
3. You have multiple copies of React loaded

I get the following error when adding the ReactFilterBox component to another react component class.

Uncaught Error: removeComponentAsRefFrom(...): Only a ReactOwner can have refs. You might be removing a ref to a component that was not created inside a component's render method, or you have multiple copies of React loaded

If you initialize the component with an entry (for example the last query before refresh) the box seems to be empty. The text appears after you manually click on it

You would expect Ctrl+z/Command+z to delete the last iteration of typings, and instead, it deletes the last character only

I'm using the project, and have noticed that there are some debug logs that are getting printed to the client's console as the text is entered into the box. It is difficult to use this in a larger project because I feel that the logs are verbose, and don't correlate to something going wrong. I think these are the three instances in the production code:

• react-filter-box/src/FilterQueryParser.ts

  Line 41 in 99dc451

  console.log(query);

• react-filter-box/src/FilterQueryParser.ts

  Line 52 in 99dc451

  console.log(ex);

• react-filter-box/src/BaseAutoCompleteHandler.ts

  Line 34 in c8b089f

  console.log("error: ", error);

Can these debug statements be removed?

"npm i react-filter-box" in an app that uses typescript and when I run build I get TS2307 build errors, "Cannot find module './Expression'" and "Cannot find module './ParsedError'".

I checked the node_modules/react-filter-box/lib/src/ folder and sure enough both Expression.d.ts and ParsedError.d.ts files are missing.

I pulled down a local copy of react-filter-box and noticed the same thing in lib/src folder after running "npm run component-package".

After some google searching, it looks like a known issue for awesome-typescript-loader skips declaration type files (ie with interfaces in them).

s-panferov/awesome-typescript-loader#411

I tested the posted suggestion, swapped out the awesome-typescript-loader in webpack loaders to use ts-loader and re-ran component-package. Sure enough, both Expression.d.ts and ParsedError.d.ts showed up where they were expected.

npm ERR! peerinvalid The package [email protected] does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants react@^0.14.0 || ^15.0.0
npm ERR! peerinvalid Peer [email protected] wants react@^0.14.8  
npm ERR! peerinvalid Peer [email protected] wants react@^0.14.0 || ^15.0.0
npm ERR! peerinvalid Peer [email protected] wants react@^15.3.2 
npm ERR! peerinvalid Peer [email protected] wants react@~0.13.x || ~0.14.x || ^15.0.0 
npm ERR! peerinvalid Peer [email protected] wants [email protected] || 0.14.x || ^15.0.0-0  

node v4.2.1
npm v2.14.7

Example age > 25