@webiny/app-headless-cms 0.0.0-mt-3 → 0.0.0-unstable.2af142b57e

package/admin/plugins/fieldRenderers/dateTime/DateTimeWithTimezone.js

@@ -1,148 +1,183 @@
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { useState, useEffect } from "react";
-import Input from "./Input";
-import Select from "./Select";
-import { Grid, Cell } from "@webiny/ui/Grid";
-import { UTC_TIMEZONES, DEFAULT_TIME, DEFAULT_DATE, DEFAULT_TIMEZONE, RemoveFieldButton } from "./utils";
+"use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DateTimeWithTimezone = void 0;
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _Input = require("./Input");
+var _Select = require("./Select");
+var _Grid = require("@webiny/ui/Grid");
+var _utils = require("./utils");
 var parseDateTime = function parseDateTime(value) {
   if (!value || typeof value !== "string") {
-    return {};
+    return {
+      date: "",
+      rest: ""
+    };
   }
-
   var _value$split = value.split("T"),
-      _value$split2 = _slicedToArray(_value$split, 2),
-      formattedDate = _value$split2[0],
-      rest = _value$split2[1];
-
+    _value$split2 = (0, _slicedToArray2.default)(_value$split, 2),
+    formattedDate = _value$split2[0],
+    rest = _value$split2[1];
   if (!formattedDate || !rest) {
     throw new Error("Could not extract date and time from \"".concat(value, "\"."));
   }
-
   return {
-    formattedDate: formattedDate,
+    date: formattedDate,
     rest: rest
   };
 };
-
 var parseTime = function parseTime(value) {
   if (!value) {
-    return {};
+    return {
+      time: "",
+      timezone: ""
+    };
   }
-
   var sign = value.includes("+") ? "+" : "-";
-
   var _value$split3 = value.split(sign),
-      _value$split4 = _slicedToArray(_value$split3, 2),
-      fullTime = _value$split4[0],
-      zone = _value$split4[1];
-
+    _value$split4 = (0, _slicedToArray2.default)(_value$split3, 2),
+    fullTime = _value$split4[0],
+    zone = _value$split4[1];
   return {
-    formattedTime: fullTime,
-    formattedTimezone: sign + zone
+    time: fullTime,
+    timezone: sign + zone
   };
 };
-
 var DateTimeWithTimezone = function DateTimeWithTimezone(_ref) {
   var bind = _ref.bind,
-      trailingIcon = _ref.trailingIcon,
-      field = _ref.field;
+    trailingIcon = _ref.trailingIcon,
+    field = _ref.field;
+  var defaultTimeZone = (0, _utils.getCurrentTimeZone)() || _utils.DEFAULT_TIMEZONE;
 
   // "2020-05-18T09:00+10:00"
-  var _parseDateTime = parseDateTime(bind.value),
-      formattedDate = _parseDateTime.formattedDate,
-      rest = _parseDateTime.rest;
-
+  var initialValue = (0, _utils.getDefaultFieldValue)(field, bind, function () {
+    var date = new Date();
+    return "".concat((0, _utils.getCurrentDate)(date), "T").concat((0, _utils.getCurrentLocalTime)(date)).concat(defaultTimeZone);
+  });
+  var _parseDateTime = parseDateTime(initialValue),
+    date = _parseDateTime.date,
+    rest = _parseDateTime.rest;
   var _parseTime = parseTime(rest),
-      formattedTime = _parseTime.formattedTime,
-      formattedTimezone = _parseTime.formattedTimezone;
-
-  var _useState = useState({
-    date: formattedDate || DEFAULT_DATE,
-    time: formattedTime || DEFAULT_TIME,
-    timezone: formattedTimezone || DEFAULT_TIMEZONE
-  }),
-      _useState2 = _slicedToArray(_useState, 2),
-      state = _useState2[0],
-      setState = _useState2[1];
-
-  var date = state.date,
-      time = state.time,
-      timezone = state.timezone;
-  useEffect(function () {
-    if (!formattedDate || !formattedTime || !formattedTimezone) {
+    time = _parseTime.time,
+    _parseTime$timezone = _parseTime.timezone,
+    timezone = _parseTime$timezone === void 0 ? defaultTimeZone : _parseTime$timezone;
+  var bindValue = bind.value || "";
+  (0, _react.useEffect)(function () {
+    if (!date || !time || !timezone || bindValue === initialValue) {
       return;
     }
-
-    setState(function () {
-      return {
-        date: formattedDate,
-        time: formattedTime,
-        timezone: formattedTimezone
-      };
-    });
-  }, [formattedDate, formattedTime, formattedTimezone]);
+    bind.onChange(initialValue);
+  }, [bindValue]);
   var cellSize = trailingIcon ? 3 : 4;
-  return /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Cell, {
+  return /*#__PURE__*/_react.default.createElement(_Grid.Grid, null, /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
     span: 4
-  }, /*#__PURE__*/React.createElement(Input, {
-    bind: _objectSpread(_objectSpread({}, bind), {}, {
+  }, /*#__PURE__*/_react.default.createElement(_Input.Input, {
+    bind: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, bind), {}, {
       value: date,
-      onChange: function onChange(value) {
-        setState(function (prev) {
-          return _objectSpread(_objectSpread({}, prev), {}, {
-            date: value
-          });
-        });
-        return bind.onChange("".concat(value, "T").concat(time).concat(timezone));
-      }
+      onChange: function () {
+        var _onChange = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee(value) {
+          return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
+            while (1) switch (_context.prev = _context.next) {
+              case 0:
+                if (value) {
+                  _context.next = 4;
+                  break;
+                }
+                if (bind.value) {
+                  _context.next = 3;
+                  break;
+                }
+                return _context.abrupt("return");
+              case 3:
+                return _context.abrupt("return", bind.onChange(""));
+              case 4:
+                return _context.abrupt("return", bind.onChange("".concat(value, "T").concat(time || (0, _utils.getCurrentLocalTime)()).concat(timezone || defaultTimeZone)));
+              case 5:
+              case "end":
+                return _context.stop();
+            }
+          }, _callee);
+        }));
+        function onChange(_x) {
+          return _onChange.apply(this, arguments);
+        }
+        return onChange;
+      }()
     }),
-    field: _objectSpread(_objectSpread({}, field), {}, {
+    field: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, field), {}, {
       label: "".concat(field.label, " date")
     }),
     type: "date"
-  })), /*#__PURE__*/React.createElement(Cell, {
+  })), /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
     span: 4
-  }, /*#__PURE__*/React.createElement(Input, {
-    bind: _objectSpread(_objectSpread({}, bind), {}, {
+  }, /*#__PURE__*/_react.default.createElement(_Input.Input, {
+    bind: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, bind), {}, {
       value: time,
-      onChange: function onChange(value) {
-        setState(function (prev) {
-          return _objectSpread(_objectSpread({}, prev), {}, {
-            time: value
-          });
-        });
-        return bind.onChange("".concat(date, "T").concat(value).concat(timezone));
-      }
+      onChange: function () {
+        var _onChange2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee2(value) {
+          return (0, _regeneratorRuntime2.default)().wrap(function _callee2$(_context2) {
+            while (1) switch (_context2.prev = _context2.next) {
+              case 0:
+                if (value) {
+                  _context2.next = 4;
+                  break;
+                }
+                if (bind.value) {
+                  _context2.next = 3;
+                  break;
+                }
+                return _context2.abrupt("return");
+              case 3:
+                return _context2.abrupt("return", bind.onChange(""));
+              case 4:
+                return _context2.abrupt("return", bind.onChange("".concat(date || (0, _utils.getCurrentDate)(), "T").concat(value).concat(timezone || defaultTimeZone)));
+              case 5:
+              case "end":
+                return _context2.stop();
+            }
+          }, _callee2);
+        }));
+        function onChange(_x2) {
+          return _onChange2.apply(this, arguments);
+        }
+        return onChange;
+      }()
     }),
-    field: _objectSpread(_objectSpread({}, field), {}, {
+    field: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, field), {}, {
       label: "".concat(field.label, " time")
     }),
     type: "time",
     step: 5
-  })), /*#__PURE__*/React.createElement(Cell, {
+  })), /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
     span: cellSize
-  }, /*#__PURE__*/React.createElement(Select, {
+  }, /*#__PURE__*/_react.default.createElement(_Select.Select, {
     label: "Timezone",
-    value: timezone,
+    value: timezone || defaultTimeZone,
     onChange: function onChange(value) {
-      setState(function (prev) {
-        return _objectSpread(_objectSpread({}, prev), {}, {
-          timezone: value
-        });
-      });
-      return bind.onChange("".concat(date, "T").concat(time).concat(value));
+      if (!value) {
+        if (!bind.value) {
+          return null;
+        }
+        return bind.onChange("");
+      }
+      return bind.onChange("".concat(date || (0, _utils.getCurrentDate)(), "T").concat(time || (0, _utils.getCurrentLocalTime)()).concat(value));
     },
-    options: UTC_TIMEZONES.map(function (t) {
+    options: _utils.UTC_TIMEZONES.map(function (t) {
       return {
         value: t.value,
         label: t.label
       };
     })
-  })), /*#__PURE__*/React.createElement(RemoveFieldButton, {
+  })), /*#__PURE__*/_react.default.createElement(_utils.RemoveFieldButton, {
     trailingIcon: trailingIcon
   }));
 };
-
-export default DateTimeWithTimezone;
+exports.DateTimeWithTimezone = DateTimeWithTimezone;

package/admin/plugins/fieldRenderers/dateTime/DateTimeWithTimezone.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["parseDateTime","value","date","rest","split","formattedDate","Error","parseTime","time","timezone","sign","includes","fullTime","zone","DateTimeWithTimezone","bind","trailingIcon","field","defaultTimeZone","getCurrentTimeZone","DEFAULT_TIMEZONE","initialValue","getDefaultFieldValue","Date","getCurrentDate","getCurrentLocalTime","bindValue","useEffect","onChange","cellSize","label","UTC_TIMEZONES","map","t"],"sources":["DateTimeWithTimezone.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\nimport { Input } from \"./Input\";\nimport { Select } from \"./Select\";\nimport { Grid, Cell } from \"@webiny/ui/Grid\";\nimport {\n    UTC_TIMEZONES,\n    RemoveFieldButton,\n    getDefaultFieldValue,\n    DEFAULT_TIMEZONE,\n    getCurrentDate,\n    getCurrentLocalTime,\n    getCurrentTimeZone\n} from \"./utils\";\nimport { CmsModelField } from \"~/types\";\nimport { BindComponentRenderProp } from \"@webiny/form\";\n\ninterface State {\n    date: string;\n    time: string;\n    timezone: string;\n}\n\nconst parseDateTime = (value?: string): Pick<State, \"date\"> & { rest: string } => {\n    if (!value || typeof value !== \"string\") {\n        return {\n            date: \"\",\n            rest: \"\"\n        };\n    }\n    const [formattedDate, rest] = value.split(\"T\");\n    if (!formattedDate || !rest) {\n        throw new Error(`Could not extract date and time from \"${value}\".`);\n    }\n    return {\n        date: formattedDate,\n        rest\n    };\n};\n\nconst parseTime = (value?: string): Pick<State, \"time\" | \"timezone\"> => {\n    if (!value) {\n        return {\n            time: \"\",\n            timezone: \"\"\n        };\n    }\n    const sign = value.includes(\"+\") ? \"+\" : \"-\";\n    const [fullTime, zone] = value.split(sign);\n\n    return {\n        time: fullTime,\n        timezone: sign + zone\n    };\n};\n\nexport interface DateTimeWithTimezoneProps {\n    bind: BindComponentRenderProp;\n    // TODO @ts-refactor figure out correct trailing icon type\n    // @ts-ignore\n    trailingIcon?: any;\n    field: CmsModelField;\n}\nexport const DateTimeWithTimezone: React.FC<DateTimeWithTimezoneProps> = ({\n    bind,\n    trailingIcon,\n    field\n}) => {\n    const defaultTimeZone = getCurrentTimeZone() || DEFAULT_TIMEZONE;\n\n    // \"2020-05-18T09:00+10:00\"\n    const initialValue = getDefaultFieldValue(field, bind, () => {\n        const date = new Date();\n        return `${getCurrentDate(date)}T${getCurrentLocalTime(date)}${defaultTimeZone}`;\n    });\n    const { date, rest } = parseDateTime(initialValue);\n    const { time, timezone = defaultTimeZone } = parseTime(rest);\n\n    const bindValue = bind.value || \"\";\n    useEffect(() => {\n        if (!date || !time || !timezone || bindValue === initialValue) {\n            return;\n        }\n        bind.onChange(initialValue);\n    }, [bindValue]);\n\n    const cellSize = trailingIcon ? 3 : 4;\n\n    return (\n        <Grid>\n            <Cell span={4}>\n                <Input\n                    bind={{\n                        ...bind,\n                        value: date,\n                        onChange: async (value: string) => {\n                            if (!value) {\n                                if (!bind.value) {\n                                    return;\n                                }\n                                return bind.onChange(\"\");\n                            }\n                            return bind.onChange(\n                                `${value}T${time || getCurrentLocalTime()}${\n                                    timezone || defaultTimeZone\n                                }`\n                            );\n                        }\n                    }}\n                    field={{\n                        ...field,\n                        label: `${field.label} date`\n                    }}\n                    type={\"date\"}\n                />\n            </Cell>\n            <Cell span={4}>\n                <Input\n                    bind={{\n                        ...bind,\n                        value: time,\n                        onChange: async value => {\n                            if (!value) {\n                                if (!bind.value) {\n                                    return;\n                                }\n                                return bind.onChange(\"\");\n                            }\n                            return bind.onChange(\n                                `${date || getCurrentDate()}T${value}${timezone || defaultTimeZone}`\n                            );\n                        }\n                    }}\n                    field={{\n                        ...field,\n                        label: `${field.label} time`\n                    }}\n                    type={\"time\"}\n                    step={5}\n                />\n            </Cell>\n            <Cell span={cellSize}>\n                <Select\n                    label=\"Timezone\"\n                    value={timezone || defaultTimeZone}\n                    onChange={value => {\n                        if (!value) {\n                            if (!bind.value) {\n                                return null;\n                            }\n                            return bind.onChange(\"\");\n                        }\n                        return bind.onChange(\n                            `${date || getCurrentDate()}T${time || getCurrentLocalTime()}${value}`\n                        );\n                    }}\n                    options={UTC_TIMEZONES.map(t => ({ value: t.value, label: t.label }))}\n                />\n            </Cell>\n            <RemoveFieldButton trailingIcon={trailingIcon} />\n        </Grid>\n    );\n};\n"],"mappings":"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"}

package/admin/plugins/fieldRenderers/dateTime/DateTimeWithoutTimezone.d.ts

@@ -1,8 +1,9 @@
 import React from "react";
-interface DateTimeWithoutTimezoneProps {
-    bind: any;
+import { CmsModelField } from "../../../../types";
+import { BindComponentRenderProp } from "@webiny/form";
+export interface DateTimeWithoutTimezoneProps {
+    bind: BindComponentRenderProp;
     trailingIcon?: any;
-    field: any;
+    field: CmsModelField;
 }
-declare const DateTimeWithoutTimezone: React.FunctionComponent<DateTimeWithoutTimezoneProps>;
-export default DateTimeWithoutTimezone;
+export declare const DateTimeWithoutTimezone: React.FC<DateTimeWithoutTimezoneProps>;

package/admin/plugins/fieldRenderers/dateTime/DateTimeWithoutTimezone.js

@@ -1,115 +1,153 @@
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { useEffect, useState } from "react";
-import { Grid, Cell } from "@webiny/ui/Grid";
-import { DEFAULT_DATE, DEFAULT_TIME, RemoveFieldButton } from "./utils";
-import Input from "./Input";
+"use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DateTimeWithoutTimezone = void 0;
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _Grid = require("@webiny/ui/Grid");
+var _utils = require("./utils");
+var _Input = require("./Input");
 var parseDateTime = function parseDateTime(value) {
   if (!value) {
-    return {};
+    return {
+      date: "",
+      time: ""
+    };
   }
-
   if (value.includes("T")) {
     var _value$split$0$split = value.split(".")[0].split("T"),
-        _value$split$0$split2 = _slicedToArray(_value$split$0$split, 2),
-        _formattedDate = _value$split$0$split2[0],
-        _formattedTime = _value$split$0$split2[1];
-
+      _value$split$0$split2 = (0, _slicedToArray2.default)(_value$split$0$split, 2),
+      _date = _value$split$0$split2[0],
+      _time = _value$split$0$split2[1];
     return {
-      formattedDate: _formattedDate,
-      formattedTime: _formattedTime
+      date: _date,
+      time: _time
     };
   }
-
   var _value$split = value.split(" "),
-      _value$split2 = _slicedToArray(_value$split, 2),
-      formattedDate = _value$split2[0],
-      formattedTime = _value$split2[1];
-
-  if (!formattedDate || !formattedTime) {
-    throw new Error("Could not extract date and time from \"".concat(value, "\"."));
+    _value$split2 = (0, _slicedToArray2.default)(_value$split, 2),
+    date = _value$split2[0],
+    time = _value$split2[1];
+  if (!date || !time) {
+    console.error("Could not extract date and time from \"".concat(value, "\"."));
+    return {
+      date: "",
+      time: ""
+    };
   }
-
   return {
-    formattedDate: formattedDate,
-    formattedTime: formattedTime
+    date: date,
+    time: time
   };
 };
-
 var DateTimeWithoutTimezone = function DateTimeWithoutTimezone(_ref) {
   var field = _ref.field,
-      bind = _ref.bind,
-      trailingIcon = _ref.trailingIcon;
-
+    bind = _ref.bind,
+    trailingIcon = _ref.trailingIcon;
   // "2020-05-18 09:00:00"
-  var _parseDateTime = parseDateTime(bind.value),
-      formattedDate = _parseDateTime.formattedDate,
-      formattedTime = _parseDateTime.formattedTime;
-
-  var _useState = useState({
-    date: formattedDate || DEFAULT_DATE,
-    time: formattedTime || DEFAULT_TIME
-  }),
-      _useState2 = _slicedToArray(_useState, 2),
-      state = _useState2[0],
-      setState = _useState2[1];
-
-  var date = state.date,
-      time = state.time;
-  useEffect(function () {
-    if (!formattedDate || !formattedTime) {
+  var initialValue = (0, _utils.getDefaultFieldValue)(field, bind, function () {
+    var date = new Date();
+    return "".concat((0, _utils.getCurrentDate)(date), " ").concat((0, _utils.getCurrentLocalTime)(date));
+  });
+  var _parseDateTime = parseDateTime(initialValue),
+    date = _parseDateTime.date,
+    time = _parseDateTime.time;
+  var bindValue = bind.value || "";
+  (0, _react.useEffect)(function () {
+    if (!date || !time || bindValue === initialValue) {
       return;
     }
-
-    setState(function () {
-      return {
-        date: formattedDate,
-        time: formattedTime
-      };
-    });
-  }, [formattedDate, formattedTime]);
+    bind.onChange(initialValue);
+  }, [bindValue]);
   var cellSize = trailingIcon ? 5 : 6;
-  return /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Cell, {
+  return /*#__PURE__*/_react.default.createElement(_Grid.Grid, null, /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
     span: 6
-  }, /*#__PURE__*/React.createElement(Input, {
-    bind: _objectSpread(_objectSpread({}, bind), {}, {
+  }, /*#__PURE__*/_react.default.createElement(_Input.Input, {
+    bind: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, bind), {}, {
       value: date,
-      onChange: function onChange(value) {
-        setState(function (prev) {
-          return _objectSpread(_objectSpread({}, prev), {}, {
-            date: value
-          });
-        });
-        return bind.onChange("".concat(value, " ").concat(time));
-      }
+      onChange: function () {
+        var _onChange = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee(value) {
+          return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
+            while (1) switch (_context.prev = _context.next) {
+              case 0:
+                if (value) {
+                  _context.next = 4;
+                  break;
+                }
+                if (bind.value) {
+                  _context.next = 3;
+                  break;
+                }
+                return _context.abrupt("return");
+              case 3:
+                return _context.abrupt("return", bind.onChange(""));
+              case 4:
+                return _context.abrupt("return", bind.onChange("".concat(value, " ").concat(time || (0, _utils.getCurrentLocalTime)())));
+              case 5:
+              case "end":
+                return _context.stop();
+            }
+          }, _callee);
+        }));
+        function onChange(_x) {
+          return _onChange.apply(this, arguments);
+        }
+        return onChange;
+      }()
     }),
-    field: _objectSpread(_objectSpread({}, field), {}, {
+    field: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, field), {}, {
       label: "".concat(field.label, " date")
     }),
     type: "date"
-  })), /*#__PURE__*/React.createElement(Cell, {
+  })), /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
     span: cellSize
-  }, /*#__PURE__*/React.createElement(Input, {
-    bind: _objectSpread(_objectSpread({}, bind), {}, {
+  }, /*#__PURE__*/_react.default.createElement(_Input.Input, {
+    bind: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, bind), {}, {
       value: time,
-      onChange: function onChange(value) {
-        setState(function (prev) {
-          return _objectSpread(_objectSpread({}, prev), {}, {
-            time: value
-          });
-        });
-        return bind.onChange("".concat(date, " ").concat(value));
-      }
+      onChange: function () {
+        var _onChange2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee2(value) {
+          return (0, _regeneratorRuntime2.default)().wrap(function _callee2$(_context2) {
+            while (1) switch (_context2.prev = _context2.next) {
+              case 0:
+                if (value) {
+                  _context2.next = 4;
+                  break;
+                }
+                if (bind.value) {
+                  _context2.next = 3;
+                  break;
+                }
+                return _context2.abrupt("return");
+              case 3:
+                return _context2.abrupt("return", bind.onChange(""));
+              case 4:
+                return _context2.abrupt("return", bind.onChange("".concat(date || (0, _utils.getCurrentDate)(), " ").concat(value)));
+              case 5:
+              case "end":
+                return _context2.stop();
+            }
+          }, _callee2);
+        }));
+        function onChange(_x2) {
+          return _onChange2.apply(this, arguments);
+        }
+        return onChange;
+      }()
     }),
-    field: _objectSpread(_objectSpread({}, field), {}, {
+    field: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, field), {}, {
       label: "".concat(field.label, " time")
     }),
     type: "time",
     step: 5
-  })), /*#__PURE__*/React.createElement(RemoveFieldButton, {
+  })), /*#__PURE__*/_react.default.createElement(_utils.RemoveFieldButton, {
     trailingIcon: trailingIcon
   }));
 };
-
-export default DateTimeWithoutTimezone;
+exports.DateTimeWithoutTimezone = DateTimeWithoutTimezone;

package/admin/plugins/fieldRenderers/dateTime/DateTimeWithoutTimezone.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["parseDateTime","value","date","time","includes","split","console","error","DateTimeWithoutTimezone","field","bind","trailingIcon","initialValue","getDefaultFieldValue","Date","getCurrentDate","getCurrentLocalTime","bindValue","useEffect","onChange","cellSize","label"],"sources":["DateTimeWithoutTimezone.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\nimport { Grid, Cell } from \"@webiny/ui/Grid\";\nimport {\n    getCurrentDate,\n    getCurrentLocalTime,\n    getDefaultFieldValue,\n    RemoveFieldButton\n} from \"./utils\";\nimport { Input } from \"./Input\";\nimport { CmsModelField } from \"~/types\";\nimport { BindComponentRenderProp } from \"@webiny/form\";\n\ninterface State {\n    date: string;\n    time: string;\n}\n\nconst parseDateTime = (value?: string): State => {\n    if (!value) {\n        return {\n            date: \"\",\n            time: \"\"\n        };\n    }\n    if (value.includes(\"T\")) {\n        const [date, time] = value.split(\".\")[0].split(\"T\");\n        return {\n            date,\n            time\n        };\n    }\n    const [date, time] = value.split(\" \");\n    if (!date || !time) {\n        console.error(`Could not extract date and time from \"${value}\".`);\n\n        return {\n            date: \"\",\n            time: \"\"\n        };\n    }\n    return {\n        date,\n        time\n    };\n};\n\nexport interface DateTimeWithoutTimezoneProps {\n    bind: BindComponentRenderProp;\n    trailingIcon?: any;\n    field: CmsModelField;\n}\nexport const DateTimeWithoutTimezone: React.FC<DateTimeWithoutTimezoneProps> = ({\n    field,\n    bind,\n    trailingIcon\n}) => {\n    // \"2020-05-18 09:00:00\"\n    const initialValue = getDefaultFieldValue(field, bind, () => {\n        const date = new Date();\n        return `${getCurrentDate(date)} ${getCurrentLocalTime(date)}`;\n    });\n\n    const { date, time } = parseDateTime(initialValue);\n\n    const bindValue = bind.value || \"\";\n\n    useEffect(() => {\n        if (!date || !time || bindValue === initialValue) {\n            return;\n        }\n        bind.onChange(initialValue);\n    }, [bindValue]);\n\n    const cellSize = trailingIcon ? 5 : 6;\n\n    return (\n        <Grid>\n            <Cell span={6}>\n                <Input\n                    bind={{\n                        ...bind,\n                        value: date,\n                        onChange: async value => {\n                            if (!value) {\n                                if (!bind.value) {\n                                    return;\n                                }\n                                return bind.onChange(\"\");\n                            }\n                            return bind.onChange(`${value} ${time || getCurrentLocalTime()}`);\n                        }\n                    }}\n                    field={{\n                        ...field,\n                        label: `${field.label} date`\n                    }}\n                    type={\"date\"}\n                />\n            </Cell>\n            <Cell span={cellSize}>\n                <Input\n                    bind={{\n                        ...bind,\n                        value: time,\n                        onChange: async value => {\n                            if (!value) {\n                                if (!bind.value) {\n                                    return;\n                                }\n                                return bind.onChange(\"\");\n                            }\n                            return bind.onChange(`${date || getCurrentDate()} ${value}`);\n                        }\n                    }}\n                    field={{\n                        ...field,\n                        label: `${field.label} time`\n                    }}\n                    type={\"time\"}\n                    step={5}\n                />\n            </Cell>\n            <RemoveFieldButton trailingIcon={trailingIcon} />\n        </Grid>\n    );\n};\n"],"mappings":"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"}

package/admin/plugins/fieldRenderers/dateTime/Input.d.ts

@@ -1,16 +1,15 @@
 import * as React from "react";
-import { CmsEditorField } from "../../../../types";
+import { CmsModelField } from "../../../../types";
 import { BindComponentRenderProp } from "@webiny/form";
-declare type TrailingIconType = {
+export interface TrailingIcon {
     icon: React.ReactNode;
     onClick: any;
-};
-declare type Props = {
+}
+export interface InputProps {
     step?: number;
     type?: string;
     bind: BindComponentRenderProp;
-    field: CmsEditorField;
-    trailingIcon?: TrailingIconType;
-};
-declare const Input: ({ bind, ...props }: Props) => JSX.Element;
-export default Input;
+    field: CmsModelField;
+    trailingIcon?: TrailingIcon;
+}
+export declare const Input: React.FC<InputProps>;

package/admin/plugins/fieldRenderers/dateTime/Input.js

@@ -1,26 +1,31 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["bind"];
-import * as React from "react";
-import { Input as UiInput } from "@webiny/ui/Input";
+"use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Input = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var React = _interopRequireWildcard(require("react"));
+var _Input = require("@webiny/ui/Input");
+var _excluded = ["bind"];
 var Input = function Input(_ref) {
   var bind = _ref.bind,
-      props = _objectWithoutProperties(_ref, _excluded);
-
-  return /*#__PURE__*/React.createElement(UiInput, Object.assign({}, props, bind, {
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(_Input.Input, Object.assign({}, props, bind, {
     onChange: function onChange(value) {
       if (props.type === "number") {
         value = parseFloat(value);
       }
-
       return bind.onChange(value);
     },
     label: props.field.label,
     placeholder: props.field.placeholderText,
     description: props.field.helpText,
     type: props.type,
-    trailingIcon: props.trailingIcon
+    trailingIcon: props.trailingIcon,
+    "data-testid": "fr.input.".concat(props.field.label)
   }));
 };
-
-export default Input;
+exports.Input = Input;

package/admin/plugins/fieldRenderers/dateTime/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Input","bind","props","value","type","parseFloat","onChange","field","label","placeholderText","helpText","trailingIcon"],"sources":["Input.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { CmsModelField } from \"~/types\";\nimport { BindComponentRenderProp } from \"@webiny/form\";\nimport { Input as UiInput } from \"@webiny/ui/Input\";\n\nexport interface TrailingIcon {\n    icon: React.ReactNode;\n    onClick: any;\n}\n\nexport interface InputProps {\n    step?: number;\n    type?: string;\n    bind: BindComponentRenderProp;\n    field: CmsModelField;\n    trailingIcon?: TrailingIcon;\n}\n\nexport const Input: React.FC<InputProps> = ({ bind, ...props }) => {\n    return (\n        <UiInput\n            {...props}\n            {...bind}\n            onChange={value => {\n                if (props.type === \"number\") {\n                    value = parseFloat(value);\n                }\n                return bind.onChange(value);\n            }}\n            label={props.field.label}\n            placeholder={props.field.placeholderText}\n            description={props.field.helpText}\n            type={props.type}\n            trailingIcon={props.trailingIcon}\n            data-testid={`fr.input.${props.field.label}`}\n        />\n    );\n};\n"],"mappings":";;;;;;;;;AAAA;AAGA;AAAoD;AAe7C,IAAMA,KAA2B,GAAG,SAA9BA,KAA2B,OAA2B;EAAA,IAArBC,IAAI,QAAJA,IAAI;IAAKC,KAAK;EACxD,oBACI,oBAAC,YAAO,oBACAA,KAAK,EACLD,IAAI;IACR,QAAQ,EAAE,kBAAAE,KAAK,EAAI;MACf,IAAID,KAAK,CAACE,IAAI,KAAK,QAAQ,EAAE;QACzBD,KAAK,GAAGE,UAAU,CAACF,KAAK,CAAC;MAC7B;MACA,OAAOF,IAAI,CAACK,QAAQ,CAACH,KAAK,CAAC;IAC/B,CAAE;IACF,KAAK,EAAED,KAAK,CAACK,KAAK,CAACC,KAAM;IACzB,WAAW,EAAEN,KAAK,CAACK,KAAK,CAACE,eAAgB;IACzC,WAAW,EAAEP,KAAK,CAACK,KAAK,CAACG,QAAS;IAClC,IAAI,EAAER,KAAK,CAACE,IAAK;IACjB,YAAY,EAAEF,KAAK,CAACS,YAAa;IACjC,kCAAyBT,KAAK,CAACK,KAAK,CAACC,KAAK;EAAG,GAC/C;AAEV,CAAC;AAAC"}