A material-ui component which allows to edit a user defined set of fields representing a filter and display it as a text or a form
You can access the storybook for this component here.
The component accepts the props defined bellow in the table.
Name | Type | Required | Default | Description |
---|---|---|---|---|
id | string | no | undefined | The id of the field |
fields | FilterField[] | yes | - | The fields of the filter |
data | Dictionary<string | string[]> | no | {} | The initial values for the filter's fields |
onChange | (data: Dictionary<string | string[]>) => void | yes | - | The callback function called when the data is changed |
textPrefix | string | no | "" | The text displayed before the fields in text mode |
textSuffix | string | no | "" | The text displayed after the fields in text mode |
Name | Type | Required | Default | Description |
---|---|---|---|---|
label | string | yes | - | The text used as label for the field |
name | string | yes | - | The name associated to the field and in the data object |
options | string[] | no | [] | The options used in a select |
text | TEXT | yes | - | The texts displayed in the text mode |
type | TYPE | yes | - | The type of the field |
Name | Type | Required | Description |
---|---|---|---|
all | string | yes | The text displayed when there is no value selected |
noOptionsAvailable | string | no | The text when there are no longer options selectable |
noOptionsMatchFilter | string | no | The text when there are no options matching the filter in select |
plural | string | yes | The text displayed when there is one value selected |
singular | string | yes | The text displayed when there is more then one value selected |
Enum | Type of the field |
---|---|
INPUT | Input |
COLORS_SELECT | Multiple Select with preview for colors |
MULTIPLE_SELECT | Multiple Select |
SINGLE_SELECT | Single Select |
FilterMaterialUi uses | Material-ui | React |
---|---|---|
1.0.x | 3.2.0 | 16.5.2 |
1.1.x | 3.6.0 | 16.6.3 |
1.2.x | 3.9.2 | 16.8.1 |
1.3.x | 3.9.3 | 16.8.6 |
2.0.x | 4.0.2 | 16.8.6 |
2.1.x | 4.2.0 | 16.8.6 |
2.2.x | 4.3.3 | 16.9.0 |
2.3.x | 4.9.0 | 16.9.0 |
2.4.x | 4.9.7 | 16.9.0 |
2.5.x | 4.10.2 | 16.9.0 |
2.6.x | 4.11.0 | 16.9.0 |
2.7.x | 4.11.3 | 16.9.0 or 17.0.0 |
2.8.x | 4.12.3 | 16.9.0 or 17.0.0 |
2.9.x | 5.0.4 | 16.9.0 or 17.0.0 |
3.0.x | 5.10.17 | >=18.0.0 |
3.1.x | 5.14.20 | >=18.0.0 |
- Major - it will be increased if the major version of the dependat package changes or there are breaking changes in the code of FilterMaterialUi
- Minor - it will be increased if no major version of the dependat package changes, but there are changes of the minor or patch versions of it
- Patch - it will be increased if there are no changes of the dependat packages, but there are non breaking changes in the code of FilterMaterialUi
The base component which allows to create read-only or creatable select components for selecting only one or more values:
import React from "react";
import FilterMaterialUi, { FilterField, TYPE } from "filter-material-ui";
class App extends React.Component<any, AppState> {
public state: AppState = {
data: {
name: "Green-Field",
categories: "Open-Source",
colors: ["red", "yellow"]
}
};
private fields: FilterField[] = [
{
label: "App types",
name: "types",
options: ["JS", "JAVA", "C#"],
text: {
all: "of any type",
singular: "having the type",
plural: "having the types"
},
type: TYPE.MULTIPLE_SELECT
},
{
label: "Name",
name: "name",
text: {
all: "having any name",
singular: "having names containing",
plural: "having names containing"
},
type: TYPE.INPUT
},
{
label: "Category",
name: "categories",
options: ["Open-Source", "Commercial", "Educational"],
text: {
all: "ignoring categories",
singular: "having the category",
plural: "having the categories"
},
type: TYPE.SINGLE_SELECT
},
{
label: "Colors",
name: "colors",
options: ["red", "green", "blue", "white", "black", "gray", "yellow"],
text: {
all: "ignoring colors",
singular: "having the color",
plural: "having the colors"
},
type: TYPE.COLORS_SELECT
}
];
public render() {
return (
<div className="App">
<h3>App</h3>
<FilterMaterialUi
textPrefix="Display apps "
textSuffix="."
data={this.state.data}
fields={fields}
onChange={this.handleChange}
/>
</div>
);
}
private handleChange = (data: Dictionary) => {
console.log({
data
});
this.setState({
data
});
};
}
interface AppState {
data: Dictionary;
}
interface Dictionary {
[key: string]: string | string[];
}
export default App;
- filter-material-ui is made publicly available
- Added texts for select fields for the case when there are no longer selectable options or no option matches the filter in select
- Made the icon fo edit button scale with the text
- Reduced number of re-renders
- Updated the react and material-ui packages
- Fixed the line height when the text is wrapped
- Updated packages
- Updated packages
- Updated packages
- Fixed display of the pencil button at different font sizes
- Updated packages
- Fixed the selects to use defaultValue(s) instead of value(s)
- Added a storybook for this component
- Updated packages
- Updated packages
- Updated packages
- Updated packages
- Updated packages
- Updated packages
- Moved from npm to yarn
- Made SingleSelect clearable
- Fixed the crash when there are no options selected in dropdown
- Made stories for both not pre-filled and pre-filled filters
- Updated packages
- Updated packages
- Fixed crash produced by "export * from"
- Accepting React 17 as peerDependencies
- Fixed security warnings
- Updated the packages
- Updated the packages
- Migrated to material-ui 5
- Supports minimum React 18
- Updated the packages