49ff42ea72
* Created header for common functionalities in Table Widget * Client side searching added in Table Widget. Action created for server side searching also. * added onSearch to getTriggerPropertyMap * debouncing search fixed * Client side search key made as case insensitive and property of table search value names as searchKey * Removed unused function form SearchComponent * Feature/table ui update column visibility (#14) * Columns visibility feature initial commit * Column visibility list added in Table Widget * Colors used from constants Co-authored-by: Arpit Mohan <me@arpitmohan.com> Co-authored-by: Arpit Mohan <me@arpitmohan.com>
44 lines
912 B
TypeScript
44 lines
912 B
TypeScript
import React from "react";
|
|
import styled from "styled-components";
|
|
import { InputGroup } from "@blueprintjs/core";
|
|
|
|
interface SearchProps {
|
|
onSearch: (value: any) => void;
|
|
placeholder: string;
|
|
value: string;
|
|
}
|
|
|
|
const SearchInputWrapper = styled(InputGroup)`
|
|
&&& input {
|
|
box-shadow: none;
|
|
}
|
|
&&& svg {
|
|
opacity: 0.6;
|
|
}
|
|
margin: 14px 20px;
|
|
width: 250px;
|
|
`;
|
|
|
|
const SearchComponent = (props: SearchProps) => {
|
|
const [value, setValue] = React.useState(props.value);
|
|
const handleSearch = (
|
|
event:
|
|
| React.ChangeEvent<HTMLInputElement>
|
|
| React.ChangeEvent<HTMLTextAreaElement>,
|
|
) => {
|
|
const search = event.target.value;
|
|
setValue(search);
|
|
props.onSearch(search);
|
|
};
|
|
return (
|
|
<SearchInputWrapper
|
|
leftIcon="search"
|
|
onChange={handleSearch}
|
|
placeholder={props.placeholder}
|
|
value={value}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default SearchComponent;
|