DateTimePicker Draft

Related to #340

packages/form-js-editor/package.json

@@ -21,7 +21,7 @@
   "scripts": {
     "all": "run-s lint test build",
     "build": "run-p bundle generate-types",
-    "bundle": "rollup -c --failAfterWarnings",
+    "bundle": "rollup -c",
     "bundle:watch": "rollup -c -w",
     "dev": "npm test -- --auto-watch --no-single-run",
     "example:dev": "cd example && npm start",

packages/form-js-editor/src/features/palette/components/Palette.js

@@ -9,6 +9,10 @@ const types = [
     label: 'Number',
     type: 'number'
   },
+  {
+    label: 'Datetime',
+    type: 'datetime'
+  },
   {
     label: 'Checkbox',
     type: 'checkbox'

packages/form-js-editor/src/features/properties-panel/PropertiesPanel.js

@@ -14,6 +14,9 @@ import { PropertiesPanelPlaceholderProvider } from './PropertiesPanelPlaceholder
 import {
   CustomValuesGroup,
   GeneralGroup,
+  DisplayGroup,
+  FormatGroup,
+  ConstraintsGroup,
   ValidationGroup,
   ValuesGroups
 } from './groups';
@@ -26,7 +29,10 @@ function getGroups(field, editField) {
 
   const groups = [
     GeneralGroup(field, editField),
+    DisplayGroup(field, editField),
+    FormatGroup(field, editField),
     ...ValuesGroups(field, editField),
+    ConstraintsGroup(field, editField),
     ValidationGroup(field, editField),
     CustomValuesGroup(field, editField)
   ];

packages/form-js-editor/src/features/properties-panel/PropertiesPanelHeaderProvider.js

@@ -10,6 +10,7 @@ const labelsByType = {
   checklist: 'CHECKLIST',
   columns: 'COLUMNS',
   default: 'FORM',
+  datetime: 'DATETIME',
   number: 'NUMBER',
   radio: 'RADIO',
   select: 'SELECT',

packages/form-js-editor/src/features/properties-panel/Util.js

@@ -37,6 +37,7 @@ export function textToLabel(text = '...') {
 export const INPUTS = [
   'checkbox',
   'checklist',
+  'datetime',
   'number',
   'radio',
   'select',

packages/form-js-editor/src/features/properties-panel/entries/DateTimeConstraintsEntry.js

@@ -0,0 +1,104 @@
+import { CheckboxEntry, isCheckboxEntryEdited, SelectEntry, isSelectEntryEdited } from '@bpmn-io/properties-panel';
+
+import { DATETIME_SUBTYPES, DATETIME_DISALLOWPASTDATES_PATH, TIME_INTERVAL_PATH } from '@bpmn-io/form-js-viewer';
+
+import { get } from 'min-dash';
+
+export default function DateTimeConstraintsEntry(props) {
+  const {
+    editField,
+    field,
+    id
+  } = props;
+
+  const {
+    type,
+    subtype
+  } = field;
+
+  if (type !== 'datetime') {
+    return [];
+  }
+
+  const entries = [];
+
+  if (subtype === DATETIME_SUBTYPES.TIME || subtype === DATETIME_SUBTYPES.DATETIME) {
+    entries.push({
+      id: id + '-timeInterval',
+      component: TimeIntervalSelect,
+      isEdited: isSelectEntryEdited,
+      editField,
+      field
+    });
+  }
+
+  if (subtype === DATETIME_SUBTYPES.DATE || subtype === DATETIME_SUBTYPES.DATETIME) {
+    entries.push({
+      id: id + '-disallowPassedDates',
+      component: DisallowPassedDates,
+      isEdited: isCheckboxEntryEdited,
+      editField,
+      field
+    });
+  }
+
+  return entries;
+}
+
+function DisallowPassedDates(props) {
+  const {
+    editField,
+    field,
+    id
+  } = props;
+
+  const path = DATETIME_DISALLOWPASTDATES_PATH;
+
+  const getValue = () => {
+    return get(field, path, '');
+  };
+
+  const setValue = (value) => {
+    return editField(field, path, value);
+  };
+
+  return CheckboxEntry({
+    element: field,
+    getValue,
+    id,
+    label: 'Disallow past dates',
+    setValue
+  });
+}
+
+function TimeIntervalSelect(props) {
+
+  const {
+    editField,
+    field,
+    id
+  } = props;
+
+  const timeIntervals = [ 1, 5, 10, 15, 30, 60 ];
+
+  const getValue = (e) => get(field, TIME_INTERVAL_PATH);
+
+  const setValue = (value) => editField(field, TIME_INTERVAL_PATH, parseInt(value));
+
+  const getTimeIntervals = () => {
+
+    return timeIntervals.map((timeInterval) => ({
+      label: timeInterval === 60 ? '1h' : (timeInterval + 'm'),
+      value: timeInterval
+    }));
+  };
+
+  return SelectEntry({
+    label: 'Time interval',
+    element: field,
+    getOptions: getTimeIntervals,
+    getValue,
+    id,
+    setValue
+  });
+}

packages/form-js-editor/src/features/properties-panel/entries/DateTimeDisplayEntry.js

@@ -0,0 +1,64 @@
+import { CheckboxEntry, isCheckboxEntryEdited } from '@bpmn-io/properties-panel';
+
+import { DATETIME_SUBTYPES, TIME_USE24H_PATH } from '@bpmn-io/form-js-viewer';
+
+import { get } from 'min-dash';
+
+export default function DateTimeDisplayEntry(props) {
+  const {
+    editField,
+    field,
+    id
+  } = props;
+
+  const {
+    type,
+    subtype
+  } = field;
+
+  if (type !== 'datetime') {
+    return [];
+  }
+
+  const entries = [];
+
+  if (subtype === DATETIME_SUBTYPES.TIME || subtype === DATETIME_SUBTYPES.DATETIME) {
+
+    entries.push({
+      id: id + '-use24h',
+      component: Use24h,
+      isEdited: isCheckboxEntryEdited,
+      editField,
+      field
+    });
+
+  }
+
+  return entries;
+}
+
+function Use24h(props) {
+  const {
+    editField,
+    field,
+    id
+  } = props;
+
+  const path = TIME_USE24H_PATH;
+
+  const getValue = () => {
+    return get(field, path, '');
+  };
+
+  const setValue = (value) => {
+    return editField(field, path, value);
+  };
+
+  return CheckboxEntry({
+    element: field,
+    getValue,
+    id,
+    label: 'Use 24h',
+    setValue
+  });
+}

packages/form-js-editor/src/features/properties-panel/entries/DateTimeEntry.js

@@ -0,0 +1,64 @@
+import { SelectEntry, isSelectEntryEdited } from '@bpmn-io/properties-panel';
+
+import { DATETIME_SUBTYPES, DATETIME_SUBTYPES_LABELS, DATETIME_SUBTYPE_PATH } from '@bpmn-io/form-js-viewer';
+
+import { get } from 'min-dash';
+
+export default function DateTimeEntry(props) {
+  const {
+    editField,
+    field,
+    id
+  } = props;
+
+  const {
+    type
+  } = field;
+
+  if (type !== 'datetime') {
+    return [];
+  }
+
+  const entries = [
+    {
+      id: id + '-subtype-select',
+      component: DateTimeSubtypeSelect,
+      isEdited: isSelectEntryEdited,
+      editField,
+      field
+    }
+  ];
+
+  return entries;
+}
+
+function DateTimeSubtypeSelect(props) {
+
+  const {
+    editField,
+    field,
+    id
+  } = props;
+
+  const getValue = (e) => get(field, DATETIME_SUBTYPE_PATH);
+
+  const setValue = (value) => editField(field, DATETIME_SUBTYPE_PATH, value);
+
+  const getDatetimeSubtypes = () => {
+
+    return Object.values(DATETIME_SUBTYPES).map((subtype) => ({
+      label: DATETIME_SUBTYPES_LABELS[subtype],
+      value: subtype
+    }));
+  };
+
+  return SelectEntry({
+    label: 'Subtype',
+    element: field,
+    getOptions: getDatetimeSubtypes,
+    getValue,
+    id,
+    setValue
+  });
+}
+