{"size": 3270, "ext": "js", "max_stars_repo_path": "ddesigner/src/components/Search.js", "max_stars_repo_name": "neoflex-consulting/datagram", "max_stars_repo_stars_event_min_datetime": "2021-05-17T08:20:56.000Z", "max_stars_repo_stars_event_max_datetime": "2021-05-17T08:20:56.000Z", "max_issues_repo_path": "ddesigner/src/components/Search.js", "max_issues_repo_name": "neoflex-consulting/datagram", "max_issues_repo_issues_event_min_datetime": "2020-12-01T09:56:01.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-28T12:38:14.000Z", "max_forks_repo_path": "ddesigner/src/components/Search.js", "max_forks_repo_name": "neoflex-consulting/datagram", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": 64, "max_forks_count": null, "avg_line_length": 31.1428571429, "max_line_length": 95, "alphanum_fraction": 0.4513761468}
import React, {Component} from 'react';
import {translate} from 'react-i18next'
import {Input, Table} from 'antd'
import reactStringReplace from 'react-string-replace'
import {getPaths} from '../utils/meta'
import _ from 'lodash'


function doFind(entity, filterStr) {
    const paths = new Map()
    getPaths(entity, paths, "")
    return _.sortBy(_.flatten([...paths.keys()].map(object=>{
        const path = paths.get(object)
        const result = []
        for (var propertyName in object) {
            if (object.hasOwnProperty(propertyName)) {
                const value = object[propertyName]
                if (Object.prototype.toString.call(value) !== '[object Object]' &&
                    value.toString().toLowerCase().indexOf(filterStr.toLowerCase()) > -1) {
                    result.push({path: `${path}.${propertyName}`, value: value.toString()})
                }
            }
        }
        return result
    })), e=>e.key)
}

class Search extends Component {
    constructor(...args) {
        super(...args)
        this.state = {
            filterStr: undefined,
            searchResults: [],
            selectedRowKeys: []
        }
    }

    doSearch(filterStr) {
        const {entity} = this.props.context
        if (entity && filterStr) {
            const searchResults = doFind(entity, filterStr)
            this.setState({filterStr, searchResults})
        }
        else {
            this.setState({filterStr, searchResults: []})
        }
    }

    selectNode(path) {
        const {context} = this.props
        if (path && context.selectNodeInDesigner) {
            const index = path.indexOf(".")
            if (index > 0) {
                const top = path.slice(0, index)
                const step = _.get(context.entity, top)
                if (step) {
                    context.selectNodeInDesigner(step)
                }
            }
        }
    }

    render() {
        const columns = [
            {
                title: 'Path',
                dataIndex: 'path',
                width: 80,
                render: (text)=><span>{text}</span>,
            },
            {
                title: 'Value',
                dataIndex: 'value',
                width: 150,
                render: (text)=>reactStringReplace(text, this.state.filterStr,  (match, i) => (
                    <span key={i} style={{ color: 'red' }}>{match}</span>
                ))
            },
        ]
        return (
            <div>
                <Input.Search style={{marginBottom: 8}}
                              onChange={e => this.doSearch(e.target.value)}
                              value={this.state.filterStr}/>
                <Table
                    showHeader={false}
                    size="small"
                    pagination={false}
                    columns={columns}
                    dataSource={this.state.searchResults}
                    onRow={(record) => {
                        return {
                            onClick: () => {
                                this.selectNode(record.path)
                            }
                        };
                    }}
                />
            </div>
        )
    }
}

export default translate()(Search);
