feat: add widget support for all UI libraries & install react-number-…

packages/antd/modules/config/index.jsx

@@ -4,29 +4,31 @@ import AntdWidgets from "../widgets";
 import { normalizeListValues } from "../utils/stuff";
 import { BasicConfig, Utils } from "@react-awesome-query-builder/ui";
 
-
-
 const settings = {
   ...BasicConfig.settings,
 
-  renderField: (props, {RCE, W: {FieldSelect}}) => RCE(FieldSelect, props),
+  renderField: (props, { RCE, W: { FieldSelect } }) => RCE(FieldSelect, props),
   // renderField: (props, {RCE, W: {FieldDropdown}}) => RCE(FieldDropdown, props),
   // renderField: (props, {RCE, W: {FieldCascader}}) => RCE(FieldCascader, props),
   // renderField: (props, {RCE, W: {FieldTreeSelect}}) => RCE(FieldTreeSelect, props),
 
-  renderOperator: (props, {RCE, W: {FieldSelect}}) => RCE(FieldSelect, props),
+  renderOperator: (props, { RCE, W: { FieldSelect } }) =>
+    RCE(FieldSelect, props),
   // renderOperator: (props, {RCE, W: {FieldDropdown}}) => RCE(FieldDropdown, props),
 
-  renderFunc: (props, {RCE, W: {FieldSelect}}) => RCE(FieldSelect, props),
-  renderConjs: (props, {RCE, W: {Conjs}}) => RCE(Conjs, props),
-  renderSwitch: (props, {RCE, W: {Switch}}) => RCE(Switch, props),
-  renderButton: (props, {RCE, W: {Button}}) => RCE(Button, props),
-  renderIcon: (props, {RCE, W: {Icon}}) => RCE(Icon, props),
-  renderButtonGroup: (props, {RCE, W: {ButtonGroup}}) => RCE(ButtonGroup, props),
-  renderValueSources: (props, {RCE, W: {ValueSources}}) => RCE(ValueSources, props),
-  renderFieldSources: (props, {RCE, W: {ValueSources}}) => RCE(ValueSources, props),
-  renderProvider: (props, {RCE, W: {Provider}}) => RCE(Provider, props),
-  renderConfirm: (props, {W: {confirm}}) => confirm(props),
+  renderFunc: (props, { RCE, W: { FieldSelect } }) => RCE(FieldSelect, props),
+  renderConjs: (props, { RCE, W: { Conjs } }) => RCE(Conjs, props),
+  renderSwitch: (props, { RCE, W: { Switch } }) => RCE(Switch, props),
+  renderButton: (props, { RCE, W: { Button } }) => RCE(Button, props),
+  renderIcon: (props, { RCE, W: { Icon } }) => RCE(Icon, props),
+  renderButtonGroup: (props, { RCE, W: { ButtonGroup } }) =>
+    RCE(ButtonGroup, props),
+  renderValueSources: (props, { RCE, W: { ValueSources } }) =>
+    RCE(ValueSources, props),
+  renderFieldSources: (props, { RCE, W: { ValueSources } }) =>
+    RCE(ValueSources, props),
+  renderProvider: (props, { RCE, W: { Provider } }) => RCE(Provider, props),
+  renderConfirm: (props, { W: { confirm } }) => confirm(props),
 
   // localization
   locale: {
@@ -35,76 +37,85 @@ const settings = {
   },
 
   removeInvalidMultiSelectValuesOnLoad: false, // can be removed manually in UI
-  normalizeListValues: function(...args) { return this.utils.normalizeListValues.call(null, ...args); },
+  normalizeListValues: function (...args) {
+    return this.utils.normalizeListValues.call(null, ...args);
+  },
 };
 
-
 const widgets = {
   ...BasicConfig.widgets,
   text: {
     ...BasicConfig.widgets.text,
-    factory: (props, {RCE, W: {TextWidget}}) => RCE(TextWidget, props),
+    factory: (props, { RCE, W: { TextWidget } }) => RCE(TextWidget, props),
   },
   textarea: {
     ...BasicConfig.widgets.textarea,
-    factory: (props, {RCE, W: {TextAreaWidget}}) => RCE(TextAreaWidget, props),
+    factory: (props, { RCE, W: { TextAreaWidget } }) =>
+      RCE(TextAreaWidget, props),
   },
   number: {
     ...BasicConfig.widgets.number,
-    factory: (props, {RCE, W: {NumberWidget}}) => RCE(NumberWidget, props),
+    factory: (props, { RCE, W: { NumberWidget } }) => RCE(NumberWidget, props),
+  },
+  price: {
+    ...BasicConfig.widgets.price,
+    factory: (props, { RCE, W: { PriceWidget } }) => RCE(PriceWidget, props),
   },
   multiselect: {
     ...BasicConfig.widgets.multiselect,
-    factory: (props, {RCE, W: {AutocompleteWidget, MultiSelectWidget}}) => {
-      return (props.asyncFetch || props.showSearch) 
-        ? RCE(AutocompleteWidget, {...props, multiple: true}) 
+    factory: (props, { RCE, W: { AutocompleteWidget, MultiSelectWidget } }) => {
+      return props.asyncFetch || props.showSearch
+        ? RCE(AutocompleteWidget, { ...props, multiple: true })
         : RCE(MultiSelectWidget, props);
     },
   },
   select: {
     ...BasicConfig.widgets.select,
-    factory: (props, {RCE, W: {AutocompleteWidget, SelectWidget}}) => {
-      return (props.asyncFetch || props.showSearch || props.allowCustomValues) 
-        ? RCE(AutocompleteWidget, props) 
+    factory: (props, { RCE, W: { AutocompleteWidget, SelectWidget } }) => {
+      return props.asyncFetch || props.showSearch || props.allowCustomValues
+        ? RCE(AutocompleteWidget, props)
         : RCE(SelectWidget, props);
     },
   },
   slider: {
     ...BasicConfig.widgets.slider,
-    factory: (props, {RCE, W: {SliderWidget}}) => RCE(SliderWidget, props),
+    factory: (props, { RCE, W: { SliderWidget } }) => RCE(SliderWidget, props),
   },
   boolean: {
     ...BasicConfig.widgets.boolean,
-    factory: (props, {RCE, W: {BooleanWidget}}) => RCE(BooleanWidget, props),
+    factory: (props, { RCE, W: { BooleanWidget } }) =>
+      RCE(BooleanWidget, props),
   },
   date: {
     ...BasicConfig.widgets.date,
-    factory: (props, {RCE, W: {DateWidget}}) => RCE(DateWidget, props),
+    factory: (props, { RCE, W: { DateWidget } }) => RCE(DateWidget, props),
   },
   time: {
     ...BasicConfig.widgets.time,
-    factory: (props, {RCE, W: {TimeWidget}}) => RCE(TimeWidget, props),
+    factory: (props, { RCE, W: { TimeWidget } }) => RCE(TimeWidget, props),
   },
   datetime: {
     ...BasicConfig.widgets.datetime,
-    factory: (props, {RCE, W: {DateTimeWidget}}) => RCE(DateTimeWidget, props),
+    factory: (props, { RCE, W: { DateTimeWidget } }) =>
+      RCE(DateTimeWidget, props),
   },
 
   rangeslider: {
     ...BasicConfig.widgets.rangeslider,
-    factory: (props, {RCE, W: {RangeWidget}}) => RCE(RangeWidget, props),
+    factory: (props, { RCE, W: { RangeWidget } }) => RCE(RangeWidget, props),
   },
   treeselect: {
     ...BasicConfig.widgets.treeselect,
-    factory: (props, {RCE, W: {TreeSelectWidget}}) => RCE(TreeSelectWidget, props),
+    factory: (props, { RCE, W: { TreeSelectWidget } }) =>
+      RCE(TreeSelectWidget, props),
   },
   treemultiselect: {
     ...BasicConfig.widgets.treemultiselect,
-    factory: (props, {RCE, W: {TreeSelectWidget}}) => RCE(TreeSelectWidget, {...props, treeMultiple: true}),
+    factory: (props, { RCE, W: { TreeSelectWidget } }) =>
+      RCE(TreeSelectWidget, { ...props, treeMultiple: true }),
   },
 };
 
-
 const types = {
   ...BasicConfig.types,
 };

packages/antd/modules/widgets/index.d.ts

@@ -22,6 +22,7 @@ export interface AntdWidgets {
   TextWidget: ElementType<TextWidgetProps>,
   TextAreaWidget: ElementType<TextWidgetProps>,
   NumberWidget: ElementType<NumberWidgetProps>,
+  PriceWidget: ElementType<NumberWidgetProps>,
   SliderWidget: ElementType<NumberWidgetProps>,
   RangeWidget: ElementType<RangeSliderWidgetProps>,
   SelectWidget: ElementType<SelectWidgetProps>,

packages/antd/modules/widgets/index.jsx

@@ -8,6 +8,7 @@ import SelectWidget from "./value/Select";
 import TextWidget from "./value/Text";
 import TextAreaWidget from "./value/TextArea";
 import NumberWidget from "./value/Number";
+import PriceWidget from "./value/Price";
 import SliderWidget from "./value/Slider";
 import RangeWidget from "./value/Range";
 import BooleanWidget from "./value/Boolean";
@@ -41,6 +42,7 @@ export default {
   TextWidget,
   TextAreaWidget,
   NumberWidget,
+  PriceWidget,
   SliderWidget,
   RangeWidget,
   BooleanWidget,

packages/antd/modules/widgets/value/Price.jsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { NumericFormat } from "react-number-format";
+import { Input } from "antd";
+
+export default (props) => {
+  const {
+    value,
+    setValue,
+    readonly,
+    placeholder,
+    config,
+    ...numericFormatProps
+  } = props;
+
+  const handleChange = (values) => {
+    let val = values.floatValue;
+    setValue(val === undefined ? null : val);
+  };
+  const { renderSize } = config.settings;
+
+  return (
+    <NumericFormat
+      customInput={Input}
+      type="text"
+      size={renderSize}
+      value={value}
+      placeholder={placeholder}
+      disabled={readonly}
+      onValueChange={handleChange}
+      {...numericFormatProps}
+    />
+  );
+};

packages/antd/package.json

@@ -50,7 +50,8 @@
     "@react-awesome-query-builder/ui": "workspace:^",
     "lodash": "^4.17.21",
     "prop-types": "^15.8.1",
-    "rc-picker": "^4.5.0"
+    "rc-picker": "^4.5.0",
+    "react-number-format": "^5.0.0"
   },
   "devDependencies": {
     "@ant-design/icons": "^5.5.2",

packages/bootstrap/modules/config/index.jsx

@@ -34,6 +34,10 @@ const widgets = {
     ...BasicConfig.widgets.number,
     factory: (props, {RCE, W: {BootstrapNumberWidget}}) => RCE(BootstrapNumberWidget, props),
   },
+  price: {
+    ...BasicConfig.widgets.price,
+    factory: (props, {RCE, W: {BootstrapPriceWidget}}) => RCE(BootstrapPriceWidget, props),
+  },
   multiselect: {
     ...BasicConfig.widgets.multiselect,
     factory: (props, {RCE, W: {BootstrapMultiSelectWidget}}) => RCE(BootstrapMultiSelectWidget, props),

packages/bootstrap/modules/widgets/index.d.ts

@@ -24,6 +24,7 @@ export interface BootstrapWidgets {
   BootstrapMultiSelectWidget: ElementType<SelectWidgetProps>,
   BootstrapSelectWidget: ElementType<SelectWidgetProps>,
   BootstrapNumberWidget: ElementType<NumberWidgetProps>,
+  BootstrapPriceWidget: ElementType<NumberWidgetProps>,
   BootstrapSliderWidget: ElementType<NumberWidgetProps>,
 }
 

packages/bootstrap/modules/widgets/index.jsx

@@ -6,6 +6,7 @@ import BootstrapDateTimeWidget from "./value/BootstrapDateTime";
 import BootstrapTimeWidget from "./value/BootstrapTime";
 import BootstrapSelectWidget from "./value/BootstrapSelect";
 import BootstrapNumberWidget from "./value/BootstrapNumber";
+import BootstrapPriceWidget from "./value/BootstrapPrice";
 import BootstrapSliderWidget from "./value/BootstrapSlider";
 import BootstrapBooleanWidget from "./value/BootstrapBoolean";
 import BootstrapMultiSelectWidget from "./value/BootstrapMultiSelect";
@@ -22,7 +23,7 @@ import BootstrapValueSources from "./core/BootstrapValueSources";
 import BootstrapConfirm from "./core/BootstrapConfirm";
 
 // provider
-const BootstrapProvider = ({config, children}) => children;
+const BootstrapProvider = ({ config, children }) => children;
 
 export default {
   BootstrapTextWidget,
@@ -32,6 +33,7 @@ export default {
   BootstrapTimeWidget,
   BootstrapSelectWidget,
   BootstrapNumberWidget,
+  BootstrapPriceWidget,
   BootstrapSliderWidget,
   BootstrapBooleanWidget,
   BootstrapMultiSelectWidget,

packages/bootstrap/modules/widgets/value/BootstrapPrice.jsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { Input } from "reactstrap";
+import { NumericFormat } from "react-number-format";
+
+export default (props) => {
+  const {
+    value,
+    setValue,
+    readonly,
+    placeholder,
+    ...numericFormatProps
+  } = props;
+
+  const handleChange = (values) => {
+    let val = values.floatValue;
+    setValue(val === undefined ? null : val);
+  };
+
+  return (
+    <NumericFormat
+      customInput={Input}
+      value={value}
+      placeholder={placeholder}
+      disabled={readonly}
+      onValueChange={handleChange}
+      {...numericFormatProps}
+    />
+  );
+};

packages/bootstrap/package.json

@@ -46,7 +46,8 @@
     "tsc": "tsc -p . --noEmit"
   },
   "dependencies": {
-    "@react-awesome-query-builder/ui": "workspace:^"
+    "@react-awesome-query-builder/ui": "workspace:^",
+    "react-number-format": "^5.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.24.7",

packages/core/modules/config/index.js

@@ -748,6 +748,28 @@ const widgets = {
     toJS: (val, fieldSettings) => (val),
     mongoFormatValue: (val, fieldDef, wgtDef) => (val),
   },
+  price: {
+    type: "price",
+    jsType: "number",
+    valueSrc: "value",
+    valueLabel: "Price",
+    valueLabels: [
+      { label: "Price from", placeholder: "Enter price from" },
+      { label: "Price to", placeholder: "Enter price to" },
+    ],
+    formatValue: function (val, fieldDef, wgtDef, isForDisplay) {      
+      return isForDisplay ? this.utils.stringifyForDisplay(val) : JSON.stringify(val);
+    },
+    sqlFormatValue: function (val, fieldDef, wgtDef, op, opDef) {
+      return this.utils.SqlString.escape(val);
+    },
+    spelFormatValue: function (val, fieldDef, wgtDef) {
+      const isFloat = wgtDef.step && !Number.isInteger(wgtDef.step);
+      return this.utils.spelEscape(val, isFloat);
+    },
+    toJS: (val, fieldSettings) => (val),
+    mongoFormatValue: (val, fieldDef, wgtDef) => (val),
+  },
   slider: {
     type: "number",
     jsType: "number",
@@ -1198,6 +1220,27 @@ const types = {
       },
     },
   },
+  price: {
+    defaultOperator: "equal",
+    widgets: {
+      price: {
+        operators: [
+          "equal",
+          "not_equal",
+          "less",
+          "less_or_equal",
+          "greater",
+          "greater_or_equal",
+          "between",
+          "not_between",
+          // "is_empty",
+          // "is_not_empty",
+          "is_null",
+          "is_not_null",
+        ],
+      },
+    },
+  },
   date: {
     defaultOperator: "equal",
     widgets: {

packages/core/modules/index.d.ts

@@ -1265,6 +1265,14 @@ export interface NumberFieldSettings<V = number> extends BasicFieldSettings<V> {
   step?: number;
   marks?: {[mark: number]: RenderedReactElement};
 }
+export interface PriceFieldSettings<V = number> extends BasicFieldSettings<V> {
+  min?: number;
+  max?: number;
+  thousandsGroupStyle?: string
+  thousandSeparator?: string;
+  prefix?: string
+  suffix?: string;
+}
 export interface DateTimeFieldSettings<V = string> extends BasicFieldSettings<V> {
   timeFormat?: string;
   dateFormat?: string;