Material UI (#299)

* .

* ..

* ...

* material-ui boolean widget

* material-ui date widget

* realized these extra funcs are unecessary, can be handled by date-io or customProps

* fix material-ui date widget, add material-ui dateTime widget and material-ui time widget

* delete commented out code

* date/time - added useKeyboard
time - show/hide seconds according to timeFormat
boolean - use grid for 2 labels
select - use renderValue intead of empty value
multiselect - new
all - don't show placeholer in r/o mode
all - use customProps
lint fix

* number

* partial material-ui slider widget (#308)

* partial material-ui slider widget

* finish working on material-ui slider widget

* use Number() instead of parse*

* customSliderProps

* slider

* range

* fix uncontrolled

Co-authored-by: Denis Oblogin <ukrbublik@gmail.com>

* remove isSpecialRange for date/time

* confirm

* moved MuiPickersUtilsProvider

* fixed uncontrolled

* some docs

* .

* restore config

* added MUI packages to sandbox

* lint-fix

* enable mui in tests

* to/from labels and materialValueSources (#311)



* use inline-flex and alignment to fix the vertical alignment of to/from labels

* fix css formatting

* fix formatting

* start on materialValueSources using popover and radio btns

* nit

* lint

Co-authored-by: Denis Oblogin <ukrbublik@gmail.com>

* conjs improvemnt

* better alignment styling for mui widget sep and widget value src (#314)

* better alignment styling for mui widget sep and widget value src
* ...

Co-authored-by: Denis Oblogin <ukrbublik@gmail.com>

* `value` is default source

* ts

* readme

* .

* refactor MaterialFieldSelect with renderValue (#316)


* refactor MaterialFieldSelect with renderValue

* .

* init skin is antd

Co-authored-by: Megan Taylor <mtaylor@megantaylor.org>

Author: ukrbublik

CHANGELOG.md

@@ -1,4 +1,6 @@
 # Changelog
+- 3.0.0
+  - Added [Material-UI](https://material-ui.com) widgets
 - 2.2.2
   - Fix issue #306: Wrong import from JsonLogic and export to MongoDb for negated single-item group
 - 2.2.1

CONFIG.adoc

@@ -39,12 +39,15 @@ TIP: Example: https://github.com/ukrbublik/react-awesome-query-builder/tree/mast
 
 == Basic config
 
-Use `BasicConfig` for simple vanilla UI or `AntdConfig` for more advanced UI with AntDesign widgets.
+- Use `BasicConfig` for simple vanilla UI
+- Use `AntdConfig` for more advanced UI with https://ant.design/[AntDesign] widgets
+- Use `MaterialConfig` for https://material-ui.com/[Material-UI] widgets
 [source,javascript]
 ----
 import {BasicConfig} from 'react-awesome-query-builder';
 import AntdConfig from 'react-awesome-query-builder/lib/config/antd';
-const InitialConfig = BasicConfig; // or AntdConfig
+import MaterialConfig from 'react-awesome-query-builder/lib/config/material';
+const InitialConfig = BasicConfig; // or AntdConfig or MaterialConfig
 
 const myConfig = {
   ...InitialConfig, // reuse basic config
@@ -97,8 +100,8 @@ const {
       rangeslider, // missing in `BasicConfig`
       select,
       multiselect,
-      treeselect, // missing in `BasicConfig`
-      treemultiselect, // missing in `BasicConfig`
+      treeselect, // missing in `BasicConfig` and in `MaterialConfig`
+      treemultiselect, // missing in `BasicConfig` and in `MaterialConfig`
       date,
       time,
       datetime,
@@ -180,7 +183,7 @@ Example:
 |tooltip | | |Optional tooltip to be displayed in field list by hovering on item
 |fieldSettings | | |Settings for widgets, will be passed as props. Example: `{min: 1, max: 10}` +
   Available settings for Number and Slider widgets: `min`, `max`, `step`. Slider also supports `marks` (example: `{ 0: "0%", 100: "100%" }`). +
-  Available settings for date/time widgets: `timeFormat`, `dateFormat`, `valueFormat`, `use12Hours`.
+  Available settings for date/time widgets: `timeFormat`, `dateFormat`, `valueFormat`, `use12Hours`, `useKeyboard`.
 |fieldSettings.listValues |+ for (multi)select, tree (multi)select | |List of values for (multi)select widget. +
   Example for select/multiselect: `[{value: 'yellow', title: 'Yellow'}, {value: 'green', title: 'Green'}]` 
    (or alternatively `{ yellow: 'Yellow', green: 'Green' }`) +
@@ -213,10 +216,10 @@ Example:
 Example:
 [source,javascript]
 ----
-import en_US from 'antd/lib/locale-provider/en_US';
+import ru_RU from 'antd/lib/locale-provider/ru_RU';
+import { ruRU } from '@material-ui/core/locale';
 import AntdWidgets from 'react-awesome-query-builder/lib/components/widgets/antd';
 import {Widgets} from 'react-awesome-query-builder';
-const { VanillaFieldSelect } = Widgets;
 const { FieldCascader, FieldDropdown, FieldTreeSelect } = AntdWidgets;
 ----
 
@@ -237,9 +240,9 @@ const { FieldCascader, FieldDropdown, FieldTreeSelect } = AntdWidgets;
     }
   },
   locale: {
-      short: 'ru',
-      full: 'ru-RU',
+      moment: 'ru',
       antd: ru_RU,
+      material: ruRU,
   },
   renderField: (props) => <FieldCascader {...props} />,
   renderOperator: (props) => <FieldDropdown {...props} />,
@@ -289,19 +292,31 @@ Behaviour settings:
 |useGroupsAsArrays |true |See https://github.com/ukrbublik/react-awesome-query-builder/issues/246[issue]
 |===
 
+TIP: For fully read-only mode use these settings:
+[source,javascript]
+----
+immutableGroupsMode: true,
+immutableFieldsMode: true,
+immutableOpsMode: true,
+immutableValuesMode: true,
+canReorder: false,
+canRegroup: false,
+----
+
+
 Render settings:
 
 [cols="1m,1,3a",options="header",]
 |===
 |key |default |meaning
 |renderSize |`small` |Size of AntDesign components - `small` or `large`
 |renderField |`(props) => <FieldSelect {...props} />` |Render fields list +
-  Available widgets: `FieldSelect`, `FieldDropdown`, `FieldCascader`, `FieldTreeSelect`, `VanillaFieldSelect` (see `AntdWidgets` and `Widgets` above)
+  Available widgets for AntDesign: `FieldSelect`, `FieldDropdown`, `FieldCascader`, `FieldTreeSelect`
 |renderOperator |`(props) => <FieldSelect {...props} />` |Render operators list +
-  Available widgets: `FieldSelect`, `FieldDropdown`, `VanillaFieldSelect`
+  Available widgets for AntDesign: `FieldSelect`, `FieldDropdown`
 |renderFunc |`(props) => <FieldSelect {...props} />` |Render functions list +
-  Available widgets: `FieldSelect`, `FieldDropdown`, `VanillaFieldSelect`
-|renderConjs, renderButton, renderButtonGroup, renderProvider, renderValueSources, renderConfirm, renderRuleError | |Other internal render functions you can override if using another UI framework (https://github.com/ukrbublik/react-awesome-query-builder/blob/master/modules/config/antd.js#L47[example])
+  Available widgets for AntDesign: `FieldSelect`, `FieldDropdown`
+|renderConjs, renderButton, renderButtonGroup, renderProvider, renderValueSources, renderConfirm, useConfirm, renderRuleError | |Other internal render functions you can override if using another UI framework (https://github.com/ukrbublik/react-awesome-query-builder/blob/master/modules/config/antd.js#L47[example])
 |showLabels |false |Show labels above all fields?
 |hideConjForOne |true |Don't show conjunctions switcher for only 1 rule?
 |maxLabelsLength |100 |To shorten long labels of fields/values (by length, i.e. number of chars)
@@ -320,7 +335,10 @@ Other settings:
 [cols="1m,1,3a",options="header",]
 |===
 |key |default |meaning
-|locale |en |Locale used for AntDesign widgets
+|locale.moment |"en" |Locale (string or array of strings) used for https://momentjs.com/docs/#/i18n/[moment]
+|locale.antd |`en_US` |Locale object used for https://ant.design/docs/react/i18n[AntDesign] widgets
+|locale.material |`enUS` |Locale object used for https://material-ui.com/ru/guides/localization/[MaterialUI] widgets
+|theme.material |{} |Options for https://material-ui.com/ru/customization/theming/[createMuiTheme]
 |formatReverse | |Function for formatting query string, used to format rule with reverse operator which haven't `formatOp`. +
   `(string q, string operator, string reversedOp, Object operatorDefinition, Object revOperatorDefinition, bool isForDisplay) => string` +
   `q` - already formatted rule for opposite operator (which have `formatOp`) +
@@ -472,6 +490,7 @@ See https://github.com/ukrbublik/react-awesome-query-builder/tree/master/example
 ----
 import {Widgets} from 'react-awesome-query-builder';
 import AntdWidgets from 'react-awesome-query-builder/lib/components/widgets/antd';
+import MaterialWidgets from 'react-awesome-query-builder/lib/components/widgets/material';
 const {
     TextWidget,
     NumberWidget,
@@ -482,6 +501,11 @@ const {
     VanillaNumberWidget,
     ...
 } = Widgets;
+const {
+    MaterialTextWidget,
+    MaterialNumberWidget,
+    ...
+} = MaterialWidgets;
 ----
 
 [source,javascript]
@@ -522,6 +546,7 @@ const {
 |valuePlaceholder | |`config.settings.valuePlaceholder` |Common option, placeholder text to be shown in widget for empty value
 |timeFormat | |`HH:mm:ss` |Option for `<TimeWidget>`, `<DateTimeWidget>` to display time in widget. Example: `'HH:mm'`
 |use12Hours | |`false` |Option for `<TimeWidget>`
+|useKeyboard | |`true` |Option for Material-UI date/time pickers, `false` disables input with keyboard, only picker use is allowed
 |dateFormat | |`YYYY-MM-DD` |Option for `<DateWidget>`, `<DateTimeWidget>` to display date in widget. Example: `YYYY-MM-DD`
 |valueFormat | | |Option for `<TimeWidget>`, `<DateWidget>`, `<DateTimeWidget>` to prepare string representation of value to be stored. Example: `YYYY-MM-DD HH:mm`
 |labelYes, labelNo | | |Option for `<BooleanWidget>`

README.md

@@ -1,5 +1,5 @@
 # react-awesome-query-builder
-[![npm](https://img.shields.io/npm/v/react-awesome-query-builder.svg)](https://www.npmjs.com/package/react-awesome-query-builder) [![travis](https://travis-ci.org/ukrbublik/react-awesome-query-builder.svg?branch=master)](https://travis-ci.com/github/ukrbublik/react-awesome-query-builder) [![codecov](https://codecov.io/gh/ukrbublik/react-awesome-query-builder/branch/master/graph/badge.svg?date=20201002)](https://codecov.io/gh/ukrbublik/react-awesome-query-builder) [![Financial Contributors on Open Collective](https://opencollective.com/react-awesome-query-builder/all/badge.svg?label=financial+contributors)](https://opencollective.com/react-awesome-query-builder)
+[![npm](https://img.shields.io/npm/v/react-awesome-query-builder.svg)](https://www.npmjs.com/package/react-awesome-query-builder) [![travis](https://travis-ci.org/ukrbublik/react-awesome-query-builder.svg?branch=master)](https://travis-ci.com/github/ukrbublik/react-awesome-query-builder) [![codecov](https://codecov.io/gh/ukrbublik/react-awesome-query-builder/branch/master/graph/badge.svg?date=20201002)](https://codecov.io/gh/ukrbublik/react-awesome-query-builder) [![antd](https://img.shields.io/badge/skin-Ant%20Design-blue?logo=Ant%20Design)](https://ant.design) [![mui](https://img.shields.io/badge/skin-Material%20UI-blue?logo=Material%20UI)](https://material-ui.com) [![Financial Contributors on Open Collective](https://opencollective.com/react-awesome-query-builder/all/badge.svg?label=financial+contributors)](https://opencollective.com/react-awesome-query-builder)
 [![demo](https://img.shields.io/badge/demo-blue)](https://ukrbublik.github.io/react-awesome-query-builder/) [![sandbox TS](https://img.shields.io/badge/sandbox-TS-blue)](https://codesandbox.io/s/github/ukrbublik/react-awesome-query-builder/tree/master/sandbox?file=/src/demo/config_simple.tsx) [![sandbox JS](https://img.shields.io/badge/sandbox-JS-blue)](https://codesandbox.io/s/github/ukrbublik/react-awesome-query-builder/tree/master/sandbox_simple?file=/src/demo/config_simple.js)
 
 
@@ -11,6 +11,8 @@ Inspired by [jQuery QueryBuilder](http://querybuilder.js.org/)
 
 Using awesome [Ant Design](https://ant.design/) v4 for widgets
 
+Now [Material-UI](https://material-ui.com/) is also supported!
+
 [Demo page](https://ukrbublik.github.io/react-awesome-query-builder)
 
 
@@ -32,14 +34,31 @@ Using awesome [Ant Design](https://ant.design/) v4 for widgets
   - function (arguments also can be values/fields/funcs)
 - Reordering (drag-n-drop) support for rules and groups of rules
 - Using awesome [Ant Design](https://ant.design/) as UI framework with rich features.  
-  (But using custom widgets of another framework is possible, see below)
+  Now [Material-UI](https://material-ui.com/) is also supported!  
+  (Using another UI framework and custom widgets is possible, see below)
 - Export to MongoDb, SQL, [JsonLogic](http://jsonlogic.com) or your custom format
 - Import from [JsonLogic](http://jsonlogic.com)
 - TypeScript support (see [types](https://github.com/ukrbublik/react-awesome-query-builder/tree/master/modules/index.d.ts) and [demo in TS](https://github.com/ukrbublik/react-awesome-query-builder/tree/master/examples))
 
 
 ## Getting started
-Install: `npm i react-awesome-query-builder`  (packages `antd`, `typescript` are optional)  
+Install: 
+```
+npm i react-awesome-query-builder
+```
+
+For AntDesign widgets only:
+```
+npm i antd
+```
+
+For Material-UI widgets only:
+```
+npm i @material-ui/core
+npm i @material-ui/icons
+npm i @material-ui/pickers
+npm i material-ui-confirm
+```
 
 See [basic usage](#usage) and [API](#api) below.  
 
@@ -53,18 +72,24 @@ Demo apps:
 From v2.0 of this lib AntDesign is now optional (peer) dependency, so you need to explicitly include `antd` (4.x) in `package.json` of your project if you want to use AntDesign UI.  
 Please import `AntdConfig` from `react-awesome-query-builder/lib/config/antd` and use it as base for your config (see below in [usage](#usage)).  
 Alternatively you can use `BasicConfig` for simple vanilla UI, which is by default.  
-Support of other UI frameworks (like Bootstrap, Material UI) are planned for future, see [Other UI frameworks](#other-ui-frameworks).
+Support of other UI frameworks (like Bootstrap) are planned for future, see [Other UI frameworks](#other-ui-frameworks).
 
 
 ## Usage
 ```javascript
 import React, {Component} from 'react';
 import {Query, Builder, BasicConfig, Utils as QbUtils} from 'react-awesome-query-builder';
+
+// For AntDesign widgets only:
 import AntdConfig from 'react-awesome-query-builder/lib/config/antd';
 import 'react-awesome-query-builder/css/antd.less'; // or import "antd/dist/antd.css";
+// For Material-UI widgets only:
+import MaterialConfig from 'react-awesome-query-builder/lib/config/material';
+// Choose your skin (ant/material/vanilla):
+const InitialConfig = AntdConfig; // or MaterialConfig or BasicConfig
+
 import 'react-awesome-query-builder/lib/css/styles.css';
 import 'react-awesome-query-builder/lib/css/compact_styles.css'; //optional, for more compact styles
-const InitialConfig = AntdConfig; // or BasicConfig
 
 // You need to provide your own config. See below 'Config format'
 const config = {
@@ -230,14 +255,15 @@ See [`CHANGELOG`](https://github.com/ukrbublik/react-awesome-query-builder/tree/
 
 
 ## Other UI frameworks
-Currently there are 2 collections of widgets:
+Currently there are 3 collections of widgets:
 - [antdesign widgets](https://github.com/ukrbublik/react-awesome-query-builder/tree/master/modules/components/widgets/antd)
+- [material widgets](https://github.com/ukrbublik/react-awesome-query-builder/tree/master/modules/components/widgets/material)
 - [vanilla widgets](https://github.com/ukrbublik/react-awesome-query-builder/tree/master/modules/components/widgets/vanilla)
 
 Let's say you want to create new collection of Bootstrap widgets to be used in this lib (and submit PR which is always welcomed!).  
 You can use vanilla widgets as skeleton.  
 Then to enable new widgets you need to create config overrides like this:
-[antdesign config](https://github.com/ukrbublik/react-awesome-query-builder/blob/master/modules/config/antd/index.js)
+[material config](https://github.com/ukrbublik/react-awesome-query-builder/blob/master/modules/config/material/index.js)
 
 
 ## Development

css/styles.scss

@@ -51,6 +51,7 @@ body.qb-dragging {
 }
 
 .query-builder {
+  @extend %noselect;
   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
   font-size: 14px;
   line-height: 1.25;
@@ -346,11 +347,30 @@ ul.ant-select-selection__rendered {
   margin-right: 8px;
 }
 
-.rule--field, .group--field, .rule--operator, .rule--value, .rule--operator-options, .rule--widget, 
-.widget--widget, .widget--valuesrc, .widget--sep, .operator--options--sep,
-.rule--before-widget, .rule--after-widget {
+$rule_items: ".rule--field", ".group--field", ".rule--operator", ".rule--value", ".rule--operator-options", ".rule--widget", 
+ ".widget--widget", ".widget--valuesrc", ".widget--sep", ".operator--options--sep",
+ ".rule--before-widget", ".rule--after-widget";
+ 
+$seps: ".widget--sep", ".operator--options--sep", ".rule--func--bracket-before", ".rule--func--bracket-after", ".rule--func--arg-sep";
+
+#{$rule_items} {
   display: inline-block;
 }
+
+.mui {
+  #{$seps} {
+    vertical-align: bottom;
+    align-self: flex-end;
+    margin-bottom: 8px;
+  }
+  .rule--operator-options {
+    vertical-align: bottom;
+  }
+  .widget--valuesrc {
+    vertical-align: bottom;
+  }
+}
+
 .rule--operator, .widget--widget, .widget--valuesrc, .widget--sep {
   margin-left: 10px;
 }
@@ -435,11 +455,14 @@ div.tooltip-inner {
 /** FUNC **********************************************************************/
 /******************************************************************************/
 
-.rule--func--wrapper, .rule--func, .rule--func--args, .rule--func--arg, .rule--func--arg-value, 
-.rule--func--bracket-before, .rule--func--bracket-after, .rule--func--arg-sep,
-.rule--func--arg-label, .rule--func--arg-label-sep {
+$rule_func_items: ".rule--func--wrapper", ".rule--func", ".rule--func--args", ".rule--func--arg", ".rule--func--arg-value", 
+ ".rule--func--bracket-before", ".rule--func--bracket-after", ".rule--func--arg-sep",
+ ".rule--func--arg-label", ".rule--func--arg-label-sep";
+
+#{$rule_func_items} {
   display: inline-block;
 }
+
 .rule--func--bracket-before, .rule--func--bracket-after {
   margin-left: 3px;
   margin-right: 3px;

examples/demo/config.tsx

@@ -7,8 +7,8 @@ import {
   DateTimeFieldSettings,
 } from "react-awesome-query-builder";
 import moment from "moment";
-//import en_US from 'antd/lib/locale-provider/en_US';
-//import ru_RU from 'antd/lib/locale-provider/ru_RU';
+import ru_RU from "antd/lib/locale-provider/ru_RU";
+import { ruRU } from "@material-ui/core/locale";
 
 // @ts-ignore
 import AntdConfig from "react-awesome-query-builder/config/antd";
@@ -20,9 +20,17 @@ const {
   FieldCascader,
   FieldTreeSelect,
 } = AntdWidgets;
+// @ts-ignore
+import MaterialConfig from "react-awesome-query-builder/config/material";
+
+const skinToConfig = {
+  vanilla: BasicConfig,
+  antd: AntdConfig,
+  material: MaterialConfig,
+};
 
 export default (skin) => {
-  const InitialConfig = skin == "vanilla" ? BasicConfig : AntdConfig;
+  const InitialConfig = skinToConfig[skin];
 
   const conjunctions: Conjunctions = {
     ...InitialConfig.conjunctions,
@@ -145,9 +153,9 @@ export default (skin) => {
 
   const localeSettings: LocaleSettings = {
     locale: {
-      short: "ru",
-      full: "ru-RU",
-      //antd: ru_RU,
+      moment: "ru",
+      antd: ru_RU,
+      material: ruRU,
     },
     valueLabel: "Value",
     valuePlaceholder: "Value",

examples/demo/demo.tsx

@@ -67,6 +67,7 @@ export default class DemoQueryBuilder extends Component<{}, DemoQueryBuilderStat
         <select value={this.state.skin} onChange={this.changeSkin}>
           <option key="vanilla">vanilla</option>
           <option key="antd">antd</option>
+          <option key="material">material</option>
         </select>
         <button onClick={this.resetValue}>reset</button>
         <button onClick={this.clearValue}>clear</button>

examples/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-awesome-query-builder-demo-local",
-  "version": "0.3.3",
+  "version": "0.4.0",
   "description": "Local hot-reloadable demo for react-awesome-query-builder",
   "main": "index.tsx",
   "scripts": {
@@ -9,6 +9,10 @@
   },
   "author": "Denis Oblogin <ukrbublik@gmail.com> (https://github.com/ukrbublik)",
   "dependencies": {
+    "@material-ui/core": "^4.11.0",
+    "@material-ui/icons": "^4.9.1",
+    "@material-ui/pickers": "^3.2.10",
+    "material-ui-confirm": "^2.1.1",
     "antd": ">=4.0.0 <4.5.0",
     "react-awesome-query-builder": "file:..",
     "webpack": "^4.44.2",

modules/components/FuncWidget.jsx

@@ -69,7 +69,7 @@ export default class FuncWidget extends PureComponent {
     };
     const {showLabels, funcLabel} = config.settings;
     const widgetLabel = showLabels
-      ? <label>{funcLabel}</label>
+      ? <label className="rule--label">{funcLabel}</label>
       : null;
 
     return (