@scenid/react-formulator 2.0.0 → 2.1.0

package/dist/index.cjs.js

@@ -29673,6 +29673,107 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
+var FormDateRange = function FormDateRange(_ref) {
+  var type = _ref.type,
+      name = _ref.name,
+      label = _ref.label,
+      variant = _ref.variant,
+      value = _ref.value,
+      defaultValue = _ref.defaultValue,
+      required = _ref.required,
+      loading = _ref.loading,
+      disabled = _ref.disabled,
+      onChange = _ref.onChange;
+
+  var changeHandler = function changeHandler(newValue) {
+    if (onChange) {
+      onChange({
+        target: {
+          name: name,
+          value: newValue
+        }
+      });
+    }
+  };
+
+  var handleStartChange = function handleStartChange(e) {
+    var newValue = structuredClone(value || {});
+    newValue.start = e.target.value;
+    changeHandler(newValue);
+  };
+
+  var handleEndChange = function handleEndChange(e) {
+    var newValue = structuredClone(value || {});
+    newValue.end = e.target.value;
+    changeHandler(newValue);
+  };
+
+  return /*#__PURE__*/React__default["default"].createElement(material.Stack, null, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
+    mb: 1
+  }, label), /*#__PURE__*/React__default["default"].createElement(material.Stack, {
+    direction: "row",
+    sx: {
+      flex: '1 1 auto',
+      width: '100%'
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(material.TextField, {
+    sx: {
+      flex: '1 1 auto'
+    },
+    type: type,
+    name: "".concat(name, ".start"),
+    label: "von",
+    variant: variant,
+    InputLabelProps: {
+      shrink: true
+    },
+    value: (value === null || value === void 0 ? void 0 : value.start) || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.start) || '',
+    max: (value === null || value === void 0 ? void 0 : value.end) || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.end) || '',
+    required: required,
+    disabled: disabled || loading,
+    onChange: handleStartChange
+  }), /*#__PURE__*/React__default["default"].createElement(material.Box, {
+    sx: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      ml: 2,
+      mr: 2
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
+    color: "GrayText"
+  }, "\u2013")), /*#__PURE__*/React__default["default"].createElement(material.TextField, {
+    sx: {
+      flex: '1 1 auto'
+    },
+    type: type,
+    name: "".concat(name, ".end"),
+    label: "bis",
+    variant: variant,
+    InputLabelProps: {
+      shrink: true
+    },
+    value: (value === null || value === void 0 ? void 0 : value.end) || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.end) || '',
+    min: (value === null || value === void 0 ? void 0 : value.start) || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.start) || '',
+    required: required,
+    disabled: disabled || loading,
+    onChange: handleEndChange
+  })));
+};
+
+FormDateRange.propTypes = {
+  type: PropTypes__default["default"].string,
+  name: PropTypes__default["default"].string,
+  label: PropTypes__default["default"].string,
+  variant: PropTypes__default["default"].string,
+  value: PropTypes__default["default"].object,
+  defaultValue: PropTypes__default["default"].string,
+  required: PropTypes__default["default"].bool,
+  loading: PropTypes__default["default"].bool,
+  disabled: PropTypes__default["default"].bool,
+  onChange: PropTypes__default["default"].func
+};
+
 var FormText = function FormText(_ref) {
   var type = _ref.type,
       name = _ref.name,
@@ -29682,6 +29783,7 @@ var FormText = function FormText(_ref) {
       defaultValue = _ref.defaultValue,
       multiline = _ref.multiline,
       minRows = _ref.minRows,
+      range = _ref.range,
       required = _ref.required,
       loading = _ref.loading,
       disabled = _ref.disabled,
@@ -29694,6 +29796,19 @@ var FormText = function FormText(_ref) {
     };
   }
 
+  if (range) {
+    return /*#__PURE__*/React__default["default"].createElement(FormDateRange, {
+      type: type,
+      name: name,
+      label: label,
+      variant: variant,
+      value: value || defaultValue || '',
+      required: required,
+      disabled: disabled || loading,
+      onChange: onChange || function () {}
+    });
+  }
+
   return /*#__PURE__*/React__default["default"].createElement(material.TextField, _extends({
     type: type,
     name: name,
@@ -29702,6 +29817,7 @@ var FormText = function FormText(_ref) {
     value: value || defaultValue || '',
     multiline: multiline,
     minRows: minRows,
+    range: range,
     required: required,
     disabled: disabled || loading,
     onChange: onChange || function () {} // eslint-disable-next-line react/jsx-props-no-spreading
@@ -29718,6 +29834,7 @@ FormText.propTypes = {
   defaultValue: PropTypes__default["default"].string,
   multiline: PropTypes__default["default"].bool,
   minRows: PropTypes__default["default"].number,
+  range: PropTypes__default["default"].bool,
   required: PropTypes__default["default"].bool,
   loading: PropTypes__default["default"].bool,
   disabled: PropTypes__default["default"].bool,
@@ -36771,21 +36888,30 @@ function friendlyDateTime(dateTimeish) {
   }
 }
 
+var formatDate = function formatDate(value, renderFormat) {
+  var formatter = DateTime.DATETIME_FULL;
+
+  if (renderFormat) {
+    if (typeof renderFormat === 'string') formatter = DateTime[renderFormat];else formatter = renderFormat;
+  }
+
+  return DateTime.fromISO(value).toLocaleString(formatter);
+};
+
 var FormReadOnlyText = function FormReadOnlyText(_ref) {
   var value = _ref.value,
       type = _ref.type,
       renderFormat = _ref.renderFormat,
+      range = _ref.range,
       multiline = _ref.multiline;
   var finalValue = value;
 
   if (type === 'date' || type === 'datetime-local') {
-    var formatter = DateTime.DATETIME_FULL;
-
-    if (renderFormat) {
-      if (typeof renderFormat === 'string') formatter = DateTime[renderFormat];else formatter = renderFormat;
+    if (range) {
+      finalValue = "".concat(formatDate((value === null || value === void 0 ? void 0 : value.start) || '', renderFormat), " - ").concat(formatDate((value === null || value === void 0 ? void 0 : value.end) || '', renderFormat));
+    } else {
+      finalValue = formatDate(value, renderFormat);
     }
-
-    finalValue = DateTime.fromISO(value).toLocaleString(formatter);
   }
 
   return /*#__PURE__*/React__default["default"].createElement(material.Typography, {
@@ -36799,6 +36925,7 @@ var FormReadOnlyText = function FormReadOnlyText(_ref) {
 FormReadOnlyText.propTypes = {
   value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string]),
   type: PropTypes__default["default"].string,
+  range: PropTypes__default["default"].bool,
   renderFormat: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].object]),
   multiline: PropTypes__default["default"].bool
 };

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useState, useEffect, useRef, cloneElement } from 'react';
 import PropTypes from 'prop-types';
-import { Box, Typography, Paper, FormGroup, InputAdornment, FormControl, FormControlLabel, FormHelperText, TextField, CircularProgress, MenuItem, Checkbox, Switch, List, ListItem, ListItemText, ListItemSecondaryAction, IconButton, Button, ClickAwayListener, Alert, Input } from '@mui/material';
+import { Box, Typography, Paper, FormGroup, InputAdornment, FormControl, FormControlLabel, FormHelperText, Stack, TextField, CircularProgress, MenuItem, Checkbox, Switch, List, ListItem, ListItemText, ListItemSecondaryAction, IconButton, Button, ClickAwayListener, Alert, Input } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
 import cx from 'classnames';
 import { makeStyles as makeStyles$1, useTheme } from '@mui/styles';
@@ -29659,6 +29659,107 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
+var FormDateRange = function FormDateRange(_ref) {
+  var type = _ref.type,
+      name = _ref.name,
+      label = _ref.label,
+      variant = _ref.variant,
+      value = _ref.value,
+      defaultValue = _ref.defaultValue,
+      required = _ref.required,
+      loading = _ref.loading,
+      disabled = _ref.disabled,
+      onChange = _ref.onChange;
+
+  var changeHandler = function changeHandler(newValue) {
+    if (onChange) {
+      onChange({
+        target: {
+          name: name,
+          value: newValue
+        }
+      });
+    }
+  };
+
+  var handleStartChange = function handleStartChange(e) {
+    var newValue = structuredClone(value || {});
+    newValue.start = e.target.value;
+    changeHandler(newValue);
+  };
+
+  var handleEndChange = function handleEndChange(e) {
+    var newValue = structuredClone(value || {});
+    newValue.end = e.target.value;
+    changeHandler(newValue);
+  };
+
+  return /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Typography, {
+    mb: 1
+  }, label), /*#__PURE__*/React.createElement(Stack, {
+    direction: "row",
+    sx: {
+      flex: '1 1 auto',
+      width: '100%'
+    }
+  }, /*#__PURE__*/React.createElement(TextField, {
+    sx: {
+      flex: '1 1 auto'
+    },
+    type: type,
+    name: "".concat(name, ".start"),
+    label: "von",
+    variant: variant,
+    InputLabelProps: {
+      shrink: true
+    },
+    value: (value === null || value === void 0 ? void 0 : value.start) || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.start) || '',
+    max: (value === null || value === void 0 ? void 0 : value.end) || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.end) || '',
+    required: required,
+    disabled: disabled || loading,
+    onChange: handleStartChange
+  }), /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      ml: 2,
+      mr: 2
+    }
+  }, /*#__PURE__*/React.createElement(Typography, {
+    color: "GrayText"
+  }, "\u2013")), /*#__PURE__*/React.createElement(TextField, {
+    sx: {
+      flex: '1 1 auto'
+    },
+    type: type,
+    name: "".concat(name, ".end"),
+    label: "bis",
+    variant: variant,
+    InputLabelProps: {
+      shrink: true
+    },
+    value: (value === null || value === void 0 ? void 0 : value.end) || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.end) || '',
+    min: (value === null || value === void 0 ? void 0 : value.start) || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.start) || '',
+    required: required,
+    disabled: disabled || loading,
+    onChange: handleEndChange
+  })));
+};
+
+FormDateRange.propTypes = {
+  type: PropTypes.string,
+  name: PropTypes.string,
+  label: PropTypes.string,
+  variant: PropTypes.string,
+  value: PropTypes.object,
+  defaultValue: PropTypes.string,
+  required: PropTypes.bool,
+  loading: PropTypes.bool,
+  disabled: PropTypes.bool,
+  onChange: PropTypes.func
+};
+
 var FormText = function FormText(_ref) {
   var type = _ref.type,
       name = _ref.name,
@@ -29668,6 +29769,7 @@ var FormText = function FormText(_ref) {
       defaultValue = _ref.defaultValue,
       multiline = _ref.multiline,
       minRows = _ref.minRows,
+      range = _ref.range,
       required = _ref.required,
       loading = _ref.loading,
       disabled = _ref.disabled,
@@ -29680,6 +29782,19 @@ var FormText = function FormText(_ref) {
     };
   }
 
+  if (range) {
+    return /*#__PURE__*/React.createElement(FormDateRange, {
+      type: type,
+      name: name,
+      label: label,
+      variant: variant,
+      value: value || defaultValue || '',
+      required: required,
+      disabled: disabled || loading,
+      onChange: onChange || function () {}
+    });
+  }
+
   return /*#__PURE__*/React.createElement(TextField, _extends({
     type: type,
     name: name,
@@ -29688,6 +29803,7 @@ var FormText = function FormText(_ref) {
     value: value || defaultValue || '',
     multiline: multiline,
     minRows: minRows,
+    range: range,
     required: required,
     disabled: disabled || loading,
     onChange: onChange || function () {} // eslint-disable-next-line react/jsx-props-no-spreading
@@ -29704,6 +29820,7 @@ FormText.propTypes = {
   defaultValue: PropTypes.string,
   multiline: PropTypes.bool,
   minRows: PropTypes.number,
+  range: PropTypes.bool,
   required: PropTypes.bool,
   loading: PropTypes.bool,
   disabled: PropTypes.bool,
@@ -36757,21 +36874,30 @@ function friendlyDateTime(dateTimeish) {
   }
 }
 
+var formatDate = function formatDate(value, renderFormat) {
+  var formatter = DateTime.DATETIME_FULL;
+
+  if (renderFormat) {
+    if (typeof renderFormat === 'string') formatter = DateTime[renderFormat];else formatter = renderFormat;
+  }
+
+  return DateTime.fromISO(value).toLocaleString(formatter);
+};
+
 var FormReadOnlyText = function FormReadOnlyText(_ref) {
   var value = _ref.value,
       type = _ref.type,
       renderFormat = _ref.renderFormat,
+      range = _ref.range,
       multiline = _ref.multiline;
   var finalValue = value;
 
   if (type === 'date' || type === 'datetime-local') {
-    var formatter = DateTime.DATETIME_FULL;
-
-    if (renderFormat) {
-      if (typeof renderFormat === 'string') formatter = DateTime[renderFormat];else formatter = renderFormat;
+    if (range) {
+      finalValue = "".concat(formatDate((value === null || value === void 0 ? void 0 : value.start) || '', renderFormat), " - ").concat(formatDate((value === null || value === void 0 ? void 0 : value.end) || '', renderFormat));
+    } else {
+      finalValue = formatDate(value, renderFormat);
     }
-
-    finalValue = DateTime.fromISO(value).toLocaleString(formatter);
   }
 
   return /*#__PURE__*/React.createElement(Typography, {
@@ -36785,6 +36911,7 @@ var FormReadOnlyText = function FormReadOnlyText(_ref) {
 FormReadOnlyText.propTypes = {
   value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   type: PropTypes.string,
+  range: PropTypes.bool,
   renderFormat: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   multiline: PropTypes.bool
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scenid/react-formulator",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
   "repository": "https://dennykoch@bitbucket.org/scenid/react-formulator.git",