@webiny/app-headless-cms 0.0.0-mt-1

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

@@ -0,0 +1,148 @@
+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";
+
+var parseDateTime = function parseDateTime(value) {
+  if (!value || typeof value !== "string") {
+    return {};
+  }
+
+  var _value$split = value.split("T"),
+      _value$split2 = _slicedToArray(_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,
+    rest: rest
+  };
+};
+
+var parseTime = function parseTime(value) {
+  if (!value) {
+    return {};
+  }
+
+  var sign = value.includes("+") ? "+" : "-";
+
+  var _value$split3 = value.split(sign),
+      _value$split4 = _slicedToArray(_value$split3, 2),
+      fullTime = _value$split4[0],
+      zone = _value$split4[1];
+
+  return {
+    formattedTime: fullTime,
+    formattedTimezone: sign + zone
+  };
+};
+
+var DateTimeWithTimezone = function DateTimeWithTimezone(_ref) {
+  var bind = _ref.bind,
+      trailingIcon = _ref.trailingIcon,
+      field = _ref.field;
+
+  // "2020-05-18T09:00+10:00"
+  var _parseDateTime = parseDateTime(bind.value),
+      formattedDate = _parseDateTime.formattedDate,
+      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) {
+      return;
+    }
+
+    setState(function () {
+      return {
+        date: formattedDate,
+        time: formattedTime,
+        timezone: formattedTimezone
+      };
+    });
+  }, [formattedDate, formattedTime, formattedTimezone]);
+  var cellSize = trailingIcon ? 3 : 4;
+  return /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Cell, {
+    span: 4
+  }, /*#__PURE__*/React.createElement(Input, {
+    bind: _objectSpread(_objectSpread({}, 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));
+      }
+    }),
+    field: _objectSpread(_objectSpread({}, field), {}, {
+      label: "".concat(field.label, " date")
+    }),
+    type: "date"
+  })), /*#__PURE__*/React.createElement(Cell, {
+    span: 4
+  }, /*#__PURE__*/React.createElement(Input, {
+    bind: _objectSpread(_objectSpread({}, 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));
+      }
+    }),
+    field: _objectSpread(_objectSpread({}, field), {}, {
+      label: "".concat(field.label, " time")
+    }),
+    type: "time",
+    step: 5
+  })), /*#__PURE__*/React.createElement(Cell, {
+    span: cellSize
+  }, /*#__PURE__*/React.createElement(Select, {
+    label: "Timezone",
+    value: timezone,
+    onChange: function onChange(value) {
+      setState(function (prev) {
+        return _objectSpread(_objectSpread({}, prev), {}, {
+          timezone: value
+        });
+      });
+      return bind.onChange("".concat(date, "T").concat(time).concat(value));
+    },
+    options: UTC_TIMEZONES.map(function (t) {
+      return {
+        value: t.value,
+        label: t.label
+      };
+    })
+  })), /*#__PURE__*/React.createElement(RemoveFieldButton, {
+    trailingIcon: trailingIcon
+  }));
+};
+
+export default DateTimeWithTimezone;

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

@@ -0,0 +1,8 @@
+import React from "react";
+interface DateTimeWithoutTimezoneProps {
+    bind: any;
+    trailingIcon?: any;
+    field: any;
+}
+declare const DateTimeWithoutTimezone: React.FunctionComponent<DateTimeWithoutTimezoneProps>;
+export default DateTimeWithoutTimezone;

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

@@ -0,0 +1,115 @@
+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";
+
+var parseDateTime = function parseDateTime(value) {
+  if (!value) {
+    return {};
+  }
+
+  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];
+
+    return {
+      formattedDate: _formattedDate,
+      formattedTime: _formattedTime
+    };
+  }
+
+  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, "\"."));
+  }
+
+  return {
+    formattedDate: formattedDate,
+    formattedTime: formattedTime
+  };
+};
+
+var DateTimeWithoutTimezone = function DateTimeWithoutTimezone(_ref) {
+  var field = _ref.field,
+      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) {
+      return;
+    }
+
+    setState(function () {
+      return {
+        date: formattedDate,
+        time: formattedTime
+      };
+    });
+  }, [formattedDate, formattedTime]);
+  var cellSize = trailingIcon ? 5 : 6;
+  return /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Cell, {
+    span: 6
+  }, /*#__PURE__*/React.createElement(Input, {
+    bind: _objectSpread(_objectSpread({}, bind), {}, {
+      value: date,
+      onChange: function onChange(value) {
+        setState(function (prev) {
+          return _objectSpread(_objectSpread({}, prev), {}, {
+            date: value
+          });
+        });
+        return bind.onChange("".concat(value, " ").concat(time));
+      }
+    }),
+    field: _objectSpread(_objectSpread({}, field), {}, {
+      label: "".concat(field.label, " date")
+    }),
+    type: "date"
+  })), /*#__PURE__*/React.createElement(Cell, {
+    span: cellSize
+  }, /*#__PURE__*/React.createElement(Input, {
+    bind: _objectSpread(_objectSpread({}, bind), {}, {
+      value: time,
+      onChange: function onChange(value) {
+        setState(function (prev) {
+          return _objectSpread(_objectSpread({}, prev), {}, {
+            time: value
+          });
+        });
+        return bind.onChange("".concat(date, " ").concat(value));
+      }
+    }),
+    field: _objectSpread(_objectSpread({}, field), {}, {
+      label: "".concat(field.label, " time")
+    }),
+    type: "time",
+    step: 5
+  })), /*#__PURE__*/React.createElement(RemoveFieldButton, {
+    trailingIcon: trailingIcon
+  }));
+};
+
+export default DateTimeWithoutTimezone;

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

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

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

@@ -0,0 +1,26 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["bind"];
+import * as React from "react";
+import { Input as UiInput } from "@webiny/ui/Input";
+
+var Input = function Input(_ref) {
+  var bind = _ref.bind,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(UiInput, 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
+  }));
+};
+
+export default Input;

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const Select: (props: any) => JSX.Element;
+export default Select;

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

@@ -0,0 +1,13 @@
+import * as React from "react";
+import { Select as UiSelect } from "@webiny/ui/Select";
+
+var Select = function Select(props) {
+  return /*#__PURE__*/React.createElement(UiSelect, props, props.options.map(function (t) {
+    return /*#__PURE__*/React.createElement("option", {
+      key: t.value,
+      value: t.value
+    }, t.label);
+  }));
+};
+
+export default Select;

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const Time: (props: any) => JSX.Element;
+export default Time;

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

@@ -0,0 +1,13 @@
+import React from "react";
+import Input from "./Input";
+
+var Time = function Time(props) {
+  // "09:00:00"
+  return /*#__PURE__*/React.createElement(Input, Object.assign({}, props, {
+    type: "time",
+    step: 5,
+    trailingIcon: props.trailingIcon
+  }));
+};
+
+export default Time;

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

@@ -0,0 +1,3 @@
+import { CmsEditorFieldRendererPlugin } from "../../../../types";
+declare const plugin: CmsEditorFieldRendererPlugin;
+export default plugin;

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

@@ -0,0 +1,59 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2;
+
+import React from "react";
+import get from "lodash/get";
+import { i18n } from "@webiny/app/i18n";
+import DateTimeWithoutTimezone from "./DateTimeWithoutTimezone";
+import DateTimeWithTimezone from "./DateTimeWithTimezone";
+import Time from "./Time";
+import Input from "./Input";
+var t = i18n.ns("app-headless-cms/admin/fields/date-time");
+var plugin = {
+  type: "cms-editor-field-renderer",
+  name: "cms-editor-field-renderer-date-time",
+  renderer: {
+    rendererName: "date-time-input",
+    name: t(_templateObject || (_templateObject = _taggedTemplateLiteral(["Date/Time Input"]))),
+    description: t(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["Renders input for various formats of date and time."]))),
+    canUse: function canUse(_ref) {
+      var field = _ref.field;
+      return field.type === "datetime" && !field.multipleValues && !get(field, "predefinedValues.enabled");
+    },
+    render: function render(_ref2) {
+      var field = _ref2.field,
+          getBind = _ref2.getBind;
+      var Bind = getBind();
+      return /*#__PURE__*/React.createElement(Bind, null, function (bind) {
+        if (field.settings.type === "dateTimeWithoutTimezone") {
+          return /*#__PURE__*/React.createElement(DateTimeWithoutTimezone, {
+            field: field,
+            bind: bind
+          });
+        }
+
+        if (field.settings.type === "dateTimeWithTimezone") {
+          return /*#__PURE__*/React.createElement(DateTimeWithTimezone, {
+            field: field,
+            bind: bind
+          });
+        }
+
+        if (field.settings.type === "time") {
+          return /*#__PURE__*/React.createElement(Time, {
+            field: field,
+            bind: bind
+          });
+        }
+
+        return /*#__PURE__*/React.createElement(Input, {
+          bind: bind,
+          field: field,
+          type: field.settings.type
+        });
+      });
+    }
+  }
+};
+export default plugin;

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

@@ -0,0 +1,3 @@
+import { CmsEditorFieldRendererPlugin } from "../../../../types";
+declare const plugin: CmsEditorFieldRendererPlugin;
+export default plugin;

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

@@ -0,0 +1,84 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
+import React from "react";
+import get from "lodash/get";
+import { i18n } from "@webiny/app/i18n";
+import { ReactComponent as DeleteIcon } from "@svgr/webpack!../../../icons/close.svg";
+import DynamicSection from "../DynamicSection";
+import DateTimeWithoutTimezone from "./DateTimeWithoutTimezone";
+import DateTimeWithTimezone from "./DateTimeWithTimezone";
+import Time from "./Time";
+import Input from "./Input";
+var t = i18n.ns("app-headless-cms/admin/fields/date-time");
+var plugin = {
+  type: "cms-editor-field-renderer",
+  name: "cms-editor-field-renderer-date-times",
+  renderer: {
+    rendererName: "date-time-inputs",
+    name: t(_templateObject || (_templateObject = _taggedTemplateLiteral(["Date/Time Inputs"]))),
+    description: t(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["Renders inputs for various formats of dates and times."]))),
+    canUse: function canUse(_ref) {
+      var field = _ref.field;
+      return field.type === "datetime" && field.multipleValues && !get(field, "predefinedValues.enabled");
+    },
+    render: function render(props) {
+      var field = props.field;
+      return /*#__PURE__*/React.createElement(DynamicSection, props, function (_ref2) {
+        var bind = _ref2.bind,
+            index = _ref2.index;
+        var trailingIcon = index > 0 && {
+          icon: /*#__PURE__*/React.createElement(DeleteIcon, null),
+          onClick: function onClick() {
+            return bind.field.removeValue(index);
+          }
+        };
+
+        if (field.settings.type === "dateTimeWithoutTimezone") {
+          return /*#__PURE__*/React.createElement(DateTimeWithoutTimezone, {
+            field: field,
+            bind: bind.index,
+            trailingIcon: trailingIcon
+          });
+        }
+
+        if (field.settings.type === "dateTimeWithTimezone") {
+          return /*#__PURE__*/React.createElement(DateTimeWithTimezone, {
+            field: field,
+            bind: bind.index,
+            trailingIcon: trailingIcon
+          });
+        }
+
+        if (field.settings.type === "time") {
+          return /*#__PURE__*/React.createElement(Time, {
+            field: _objectSpread(_objectSpread({}, props.field), {}, {
+              label: props.field.label + t(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral([" Value {number}"])))({
+                number: index + 1
+              })
+            }),
+            bind: bind.index,
+            label: t(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["Value {number}"])))({
+              number: index + 1
+            }),
+            trailingIcon: trailingIcon
+          });
+        }
+
+        return /*#__PURE__*/React.createElement(Input, {
+          bind: bind.index,
+          field: _objectSpread(_objectSpread({}, props.field), {}, {
+            label: props.field.label + t(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral([" Value {number}"])))({
+              number: index + 1
+            })
+          }),
+          type: field.settings.type,
+          trailingIcon: trailingIcon
+        });
+      });
+    }
+  }
+};
+export default plugin;

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

@@ -0,0 +1,2 @@
+declare const _default: import("../../../../types").CmsEditorFieldRendererPlugin[];
+export default _default;

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

@@ -0,0 +1,3 @@
+import dateTimeField from "./dateTimeField";
+import dateTimeFields from "./dateTimeFields";
+export default [dateTimeField, dateTimeFields];

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

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+export declare const UTC_TIMEZONES: {
+    value: string;
+    label: string;
+}[];
+/**
+ * @returns Current date string in format `YYYY-MM-DD`
+ */
+export declare const getCurrentDateString: () => string;
+export declare const DEFAULT_TIME = "00:00:00";
+export declare const DEFAULT_DATE: string;
+export declare const DEFAULT_TIMEZONE = "+01:00";
+export declare const RemoveFieldButton: ({ trailingIcon }: {
+    trailingIcon: any;
+}) => JSX.Element;

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

@@ -0,0 +1,153 @@
+import React from "react";
+import { css } from "emotion";
+import { Cell } from "@webiny/ui/Grid";
+import { IconButton } from "@webiny/ui/Button";
+export var UTC_TIMEZONES = [{
+  value: "-12:00",
+  label: "UTC-12:00"
+}, {
+  value: "-11:00",
+  label: "UTC-11:00"
+}, {
+  value: "-10:00",
+  label: "UTC-10:00"
+}, {
+  value: "-09:30",
+  label: "UTC-09:30"
+}, {
+  value: "-09:00",
+  label: "UTC-09:00"
+}, {
+  value: "-08:00",
+  label: "UTC-08:00"
+}, {
+  value: "-07:00",
+  label: "UTC-07:00"
+}, {
+  value: "-06:00",
+  label: "UTC-06:00"
+}, {
+  value: "-05:00",
+  label: "UTC-05:00"
+}, {
+  value: "-04:30",
+  label: "UTC-04:30"
+}, {
+  value: "-04:00",
+  label: "UTC-04:00"
+}, {
+  value: "-03:30",
+  label: "UTC-03:30"
+}, {
+  value: "-03:00",
+  label: "UTC-03:00"
+}, {
+  value: "-02:00",
+  label: "UTC-02:00"
+}, {
+  value: "-01:00",
+  label: "UTC-01:00"
+}, {
+  value: "+00:00",
+  label: "UTC+00:00"
+}, {
+  value: "+01:00",
+  label: "UTC+01:00"
+}, {
+  value: "+02:00",
+  label: "UTC+02:00"
+}, {
+  value: "+03:00",
+  label: "UTC+03:00"
+}, {
+  value: "+03:30",
+  label: "UTC+03:30"
+}, {
+  value: "+04:00",
+  label: "UTC+04:00"
+}, {
+  value: "+04:30",
+  label: "UTC+04:30"
+}, {
+  value: "+05:30",
+  label: "UTC+05:30"
+}, {
+  value: "+05:45",
+  label: "UTC+05:45"
+}, {
+  value: "+06:00",
+  label: "UTC+06:00"
+}, {
+  value: "+06:30",
+  label: "UTC+06:30"
+}, {
+  value: "+07:00",
+  label: "UTC+07:00"
+}, {
+  value: "+08:00",
+  label: "UTC+08:00"
+}, {
+  value: "+08:45",
+  label: "UTC+08:45"
+}, {
+  value: "+09:00",
+  label: "UTC+09:00"
+}, {
+  value: "+09:30",
+  label: "UTC+09:30"
+}, {
+  value: "+10:00",
+  label: "UTC+10:00"
+}, {
+  value: "+10:30",
+  label: "UTC+10:30"
+}, {
+  value: "+11:00",
+  label: "UTC+11:00"
+}, {
+  value: "+11:30",
+  label: "UTC+11:30"
+}, {
+  value: "+12:00",
+  label: "UTC+12:00"
+}, {
+  value: "+12:45",
+  label: "UTC+12:45"
+}, {
+  value: "+13:00",
+  label: "UTC+13:00"
+}, {
+  value: "+14:00",
+  label: "UTC+14:00"
+}];
+/**
+ * @returns Current date string in format `YYYY-MM-DD`
+ */
+
+export var getCurrentDateString = function getCurrentDateString() {
+  var today = new Date().toISOString();
+  return today.substr(0, 10);
+};
+export var DEFAULT_TIME = "00:00:00";
+export var DEFAULT_DATE = getCurrentDateString();
+export var DEFAULT_TIMEZONE = "+01:00";
+var deleteIconStyles = /*#__PURE__*/css({
+  width: "100% !important",
+  height: "100% !important",
+  color: "var(--mdc-theme-text-secondary-on-background) !important"
+}, "label:deleteIconStyles;");
+export var RemoveFieldButton = function RemoveFieldButton(_ref) {
+  var trailingIcon = _ref.trailingIcon;
+
+  if (!trailingIcon) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement(Cell, {
+    span: 1
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    className: deleteIconStyles,
+    onClick: trailingIcon.onClick,
+    icon: trailingIcon.icon
+  }));
+};