Replace Moment.js with Day.js

.gitignore

@@ -20,3 +20,4 @@ packages/*/cjs/
 packages/*/esm/
 packages/*/css/
 packages/*/types/
+.pnpm-store

CONFIG.adoc

@@ -306,7 +306,7 @@ const { FieldCascader, FieldDropdown, FieldTreeSelect } = AntdWidgets;
   },
   fieldSources: ["field", "func"],
   locale: {
-      moment: 'ru',
+      dayjs: 'ru',
       antd: ru_RU,
       material: ruRU,
       mui: muiRuRU,
@@ -435,7 +435,7 @@ Other settings:
 [cols="1m,1,3a",options="header",]
 |===
 |key |default |meaning
-|locale.moment |`en` |Locale (string or array of strings) used for https://momentjs.com/docs/#/i18n/[moment]
+|locale.dayjs |`en` |Locale (string or array of strings) used for https://day.js.org/docs/en/i18n/i18n[dayjs]
 |locale.antd |`en_US` |Locale object used for https://ant.design/docs/react/i18n[AntDesign] widgets
 |locale.material |`enUS` |Locale object used for https://v4.mui.com/getting-started/installation/[MaterialUI v4] widgets
 |locale.mui |`enUS` |Locale object used for https://mui.com/material-ui/guides/localization/[MUI] widgets
@@ -911,7 +911,7 @@ const ctx = {
     // ... other widgets provieded with the lib
   },
   utils: {
-    moment, // used in `formatValue`
+    dayjs, // used in `formatValue`
     SqlString, // used in `sqlFormatValue`
     // ... other utils
   },
@@ -1015,15 +1015,15 @@ To achieve this ability, JS functions in config (like `factory`, `formatValue`,
 ----
 import { VanillaWidgets } from '@react-awesome-query-builder/ui';
 const { VanillaButton } = VanillaWidgets;
-import moment from "moment";
+import dayjs from "dayjs";
 
 const config = {
   settings: {
     renderButton: (props) => <VanillaButton {...props} />,
   },
   widgets: {
     date: {
-      jsonLogic: (val, fieldDef, wgtDef) => moment(val, wgtDef.valueFormat).toDate(),
+      jsonLogic: (val, fieldDef, wgtDef) => dayjs(val, wgtDef.valueFormat).toDate(),
     },
   },
 };
@@ -1041,7 +1041,7 @@ const config = {
   widgets: {
     date: {
       jsonLogic: function (val, fieldDef, wgtDef) {
-        return this.utils.moment(val, wgtDef.valueFormat).toDate();
+        return this.utils.dayjs(val, wgtDef.valueFormat).toDate();
       },
     },
   },
@@ -1052,7 +1052,7 @@ const config = {
       VanillaButton,
     },
     utils: {
-      moment,
+      dayjs,
     },
   }
 };

packages/antd/modules/widgets/core/ButtonGroup.jsx

@@ -1,10 +1,10 @@
+
 import React from "react";
-import { Button } from "antd";
-const ButtonGroup = Button.Group;
+import { Space } from "antd";
 
 export default ({children, config: {settings}}) => {
   const {renderSize} = settings;
-  return <ButtonGroup
+  return <Space.Compact
     size={renderSize}
-  >{children}</ButtonGroup>;
+  >{children}</Space.Compact>;
 };

packages/antd/modules/widgets/core/Conjs.jsx

@@ -1,7 +1,6 @@
 import React, { PureComponent } from "react";
 import map from "lodash/map";
-import { Button, Radio } from "antd";
-const ButtonGroup = Button.Group;
+import { Button, Space } from "antd";
 
 
 class ConjsButton extends PureComponent {
@@ -39,7 +38,7 @@ export default class ConjsButtons extends PureComponent {
     const showConj = forceShowConj || conjsCount > 1 && !lessThenTwo;
 
     return (
-      <ButtonGroup
+      <Space.Compact
         key="group-conjs-buttons"
         size={renderSize}
         disabled={disabled || readonly}
@@ -60,7 +59,7 @@ export default class ConjsButtons extends PureComponent {
             setConjunction={setConjunction}
           />
         ))}
-      </ButtonGroup>
+      </Space.Compact>
     );
   }
 }

packages/antd/modules/widgets/moment/TimePicker.tsx → packages/antd/modules/widgets/dayjs/TimePicker.tsx

@@ -1,12 +1,11 @@
-import type { Moment } from "@react-awesome-query-builder/ui";
-import * as React from "react";
+import type { Dayjs } from "@react-awesome-query-builder/ui";
+import { DatePicker } from "antd";
 import type { PickerProps } from "antd/es/date-picker/generatePicker";
-import DatePicker from "./DatePicker";
+import * as React from "react";
 
-export interface TimePickerProps extends Omit<PickerProps<Moment>, "picker"> {}
+export interface TimePickerProps extends Omit<PickerProps<Dayjs>, "picker"> {}
 
 const TimePicker = React.forwardRef<any, TimePickerProps>((props, ref) => (
-  // @ts-ignore
   <DatePicker {...props} picker="time" mode={undefined} ref={ref} />
 ));
 

packages/antd/modules/widgets/dayjs/config.ts

@@ -0,0 +1,18 @@
+import type { Dayjs } from "@react-awesome-query-builder/ui";
+import dayjsGenerateConfig from "rc-picker/lib/generate/dayjs";
+
+type GenerateConfig = typeof dayjsGenerateConfig & {
+  getMillisecond(date: Dayjs): number;
+  setMillisecond(date: Dayjs, millisecond: number): Dayjs;
+};
+const generateConfig = dayjsGenerateConfig as GenerateConfig;
+
+if (!generateConfig.getMillisecond) {
+  generateConfig.getMillisecond = (date: Dayjs) => date.millisecond();
+  generateConfig.setMillisecond = (date: Dayjs, millisecond: number) => {
+    const clone = date.clone();
+    return clone.millisecond(millisecond);
+  };
+}
+
+export default generateConfig;

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

@@ -0,0 +1 @@
+export { default as TimePicker } from "./TimePicker";

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

@@ -1,9 +1,9 @@
-import React, { PureComponent } from "react";
 import { Utils } from "@react-awesome-query-builder/ui";
 import PropTypes from "prop-types";
-import { DatePicker } from "../moment";
+import React, { PureComponent } from "react";
+import { DatePicker } from "antd";
 const { RangePicker } = DatePicker;
-const { moment } = Utils;
+const { dayjs } = Utils;
 
 
 export default class DateWidget extends PureComponent {
@@ -26,7 +26,7 @@ export default class DateWidget extends PureComponent {
 
     const {value, setValue} = props;
     if (!this.isValidValue(value)) {
-      setValue(this.formatValue(this.getMomentValue(value)));
+      setValue(this.formatValue(this.getDayjsValue(value)));
     }
   }
 
@@ -37,7 +37,7 @@ export default class DateWidget extends PureComponent {
 
   isValidSingleValue = (value) => {
     const {valueFormat} = this.props;
-    let v = value ? moment(value, valueFormat) : null;
+    let v = value ? dayjs(value, valueFormat) : null;
     return !v || v && v.isValid();
   };
 
@@ -49,20 +49,20 @@ export default class DateWidget extends PureComponent {
       return this.isValidSingleValue(value);
   };
 
-  getMomentSingleValue = (value) => {
+  getDayjsSingleValue = (value) => {
     const {valueFormat} = this.props;
-    let v = value ? moment(value, valueFormat) : null;
+    let v = value ? dayjs(value, valueFormat) : null;
     if (v && !v.isValid())
       v = null;
     return v;
   };
 
-  getMomentValue = (value) => {
+  getDayjsValue = (value) => {
     const {isSpecialRange} = this.props;
     if (isSpecialRange)
-      return value ? value.map(el => this.getMomentSingleValue(el)) : [null, null];
+      return value ? value.map(el => this.getDayjsSingleValue(el)) : [null, null];
     else
-      return this.getMomentSingleValue(value);
+      return this.getDayjsSingleValue(value);
   };
 
   formatSingleValue = (value) => {
@@ -88,7 +88,7 @@ export default class DateWidget extends PureComponent {
   render() {
     const {placeholder, placeholders, customProps, value, dateFormat, config, readonly, isSpecialRange} = this.props;
     const {renderSize} = config.settings;
-    const dateValue = this.getMomentValue(value);
+    const dateValue = this.getDayjsValue(value);
 
     if (isSpecialRange) {
       return (

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

@@ -1,8 +1,8 @@
 import React, { PureComponent } from "react";
 import PropTypes from "prop-types";
-import { DatePicker } from "../moment";
+import { DatePicker } from "antd";
 import { Utils } from "@react-awesome-query-builder/ui";
-const { moment } = Utils;
+const { dayjs } = Utils;
 
 
 export default class DateTimeWidget extends PureComponent {
@@ -25,7 +25,7 @@ export default class DateTimeWidget extends PureComponent {
     super(props);
 
     const {valueFormat, value, setValue} = props;
-    let mValue = value ? moment(value, valueFormat) : null;
+    let mValue = value ? dayjs(value, valueFormat) : null;
     if (mValue && !mValue.isValid()) {
       setValue(null);
     }
@@ -48,7 +48,7 @@ export default class DateTimeWidget extends PureComponent {
   render() {
     const {placeholder, customProps, value, valueFormat, dateFormat, timeFormat, use12Hours, config, readonly} = this.props;
     const {renderSize} = config.settings;
-    const dateValue = value ? moment(value, valueFormat) : null;
+    const dateValue = value ? dayjs(value, valueFormat) : null;
     const dateTimeFrmat = dateFormat + " " + timeFormat;
 
     return (

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

@@ -1,9 +1,8 @@
-import React, { PureComponent } from "react";
-import PropTypes from "prop-types";
-import { TimePicker } from "../moment";
 import { Utils } from "@react-awesome-query-builder/ui";
-const { moment } = Utils;
-
+import PropTypes from "prop-types";
+import React, { PureComponent } from "react";
+import { TimePicker } from "../dayjs";
+const { dayjs } = Utils;
 
 export default class TimeWidget extends PureComponent {
   static propTypes = {
@@ -24,7 +23,7 @@ export default class TimeWidget extends PureComponent {
     super(props);
 
     const {valueFormat, value, setValue} = props;
-    let mValue = value ? moment(value, valueFormat) : null;
+    let mValue = value ? dayjs(value, valueFormat) : null;
     if (mValue && !mValue.isValid()) {
       setValue(null);
     }
@@ -50,7 +49,7 @@ export default class TimeWidget extends PureComponent {
   render() {
     const {placeholder, customProps, value, valueFormat, timeFormat, use12Hours, config, readonly} = this.props;
     const {renderSize} = config.settings;
-    const timeValue = value ? moment(value, valueFormat) : null;
+    const timeValue = value ? dayjs(value, valueFormat) : null;
 
     return (
       <TimePicker

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { Input } from "reactstrap";
 import { Utils } from "@react-awesome-query-builder/ui";
-const { moment } = Utils;
+const { dayjs } = Utils;
 
 export default (props) => {
   const {value, setValue, config, valueFormat, use12Hours, readonly} = props;
@@ -11,15 +11,15 @@ export default (props) => {
     if (value == "")
       value = undefined;
     else
-      value = moment(new Date(value)).format(valueFormat);
+      value = dayjs(new Date(value)).format(valueFormat);
     setValue(value);
   };
 
   let dtValue = value;
   if (!value)
     dtValue = "";
   else
-    dtValue = moment(value).format("YYYY-MM-DDTHH:mm");
+    dtValue = dayjs(value).format("YYYY-MM-DDTHH:mm");
 
   return (
     <Input type="datetime-local" bsSize={"sm"} value={dtValue} disabled={readonly} onChange={onChange} />

packages/core/modules/config/ctx.js

@@ -1,4 +1,4 @@
-import moment from "moment";
+import dayjs from "dayjs";
 import {
   SqlString, sqlEmptyValue, mongoEmptyValue, spelEscape, spelFixList,
   stringifyForDisplay, wrapWithBrackets,
@@ -51,7 +51,7 @@ export const mongoFormatOp2 = (mops, not,  field, _op, values, useExpr, valueSrc
 const ctx = {
   utils: {
     SqlString,
-    moment,
+    dayjs,
     mongoFormatOp1,
     mongoFormatOp2,
     mongoEmptyValue,

packages/core/modules/config/default.js

@@ -39,7 +39,7 @@ export const settings = {
 
   // localization
   locale: {
-    moment: "en",
+    dayjs: "en",
   },
   valueLabel: "Value",
   valuePlaceholder: "Value",