@evoke-platform/ui-components 1.0.0-dev.145 → 1.0.0-dev.146

package/dist/published/components/custom/FormField/FormField.js

@@ -5,6 +5,7 @@ import FileUploadControl from './FileUpload/FileUpload';
 import InputFieldComponent from './InputFieldComponent/InputFieldComponent';
 import Select from './Select/Select';
 import AddressFieldComponent from './AddressFieldComponent/addressFieldComponent';
+import TimePickerSelect from './TimePickerSelect/TimePickerSelect';
 const FormField = (props) => {
     const { defaultValue, error, onChange, property, readOnly, selectOptions, required, size, placeholder, errorMessage, onBlur, mask, max, min, isMultiLineText, rows, inputMaskPlaceholderChar, queryAddresses } = props;
     const id = property.id;
@@ -36,6 +37,9 @@ const FormField = (props) => {
         case 'date':
             control = React.createElement(DatePickerSelect, Object.assign({}, commonProps));
             break;
+        case 'time':
+            control = React.createElement(TimePickerSelect, Object.assign({}, commonProps));
+            break;
         case 'fileUpload':
             control = React.createElement(FileUploadControl, Object.assign({}, commonProps));
             break;

package/dist/published/components/custom/FormField/TimePickerSelect/TimePickerSelect.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { FormFieldProps } from '../FormField';
+declare const TimePickerSelect: (props: FormFieldProps) => JSX.Element;
+export default TimePickerSelect;

package/dist/published/components/custom/FormField/TimePickerSelect/TimePickerSelect.js

@@ -0,0 +1,44 @@
+import React, { useEffect, useState } from 'react';
+import { LocalizationProvider, TextField } from '../../../core';
+import { TimePicker } from '@mui/x-date-pickers';
+import { LocalDateTime } from '@js-joda/core';
+import { padStart } from 'lodash-es';
+import { InvalidDate } from '../../../../util';
+const TimePickerSelect = (props) => {
+    const { property, defaultValue, error, errorMessage, readOnly, required, size, onBlur, placeholder } = props;
+    const values = defaultValue ? defaultValue.split(':') : undefined;
+    const hour = values ? parseInt(values[0]) : undefined;
+    const minute = values ? parseInt(values[1]) : undefined;
+    const second = values ? parseInt(values[2]) : undefined;
+    const [value, setValue] = useState(defaultValue ? LocalDateTime.now().withHour(hour).withMinute(minute).withSecond(second) : null);
+    const id = property.id;
+    useEffect(() => {
+        if (defaultValue) {
+            const values = defaultValue.split(':');
+            const hour = parseInt(values[0]);
+            const minute = parseInt(values[1]);
+            const second = parseInt(values[2]);
+            const today = LocalDateTime.now();
+            setValue(today.withHour(hour).withMinute(minute).withSecond(second));
+        }
+    }, [defaultValue]);
+    const handleChange = (date) => {
+        if (date instanceof InvalidDate && date.invalid) {
+            return;
+        }
+        else if (date instanceof LocalDateTime) {
+            setValue(date);
+            const hour = padStart(date === null || date === void 0 ? void 0 : date.hour().toString(), 2, '0');
+            const minute = padStart(date === null || date === void 0 ? void 0 : date.minute().toString(), 2, '0');
+            const second = padStart(date === null || date === void 0 ? void 0 : date.second().toString(), 2, '0');
+            props.onChange(id, `${hour}:${minute}:${second}`, property);
+        }
+        else {
+            setValue(null);
+            props.onChange(id, date, property);
+        }
+    };
+    return (React.createElement(LocalizationProvider, null,
+        React.createElement(TimePicker, { value: value, onChange: handleChange, renderInput: (params) => (React.createElement(TextField, Object.assign({}, params, { id: id, error: error, errorMessage: errorMessage, onBlur: onBlur, fullWidth: true, required: required, sx: { background: 'white', borderRadius: '8px' }, size: size !== null && size !== void 0 ? size : 'medium', placeholder: placeholder, readOnly: readOnly }))), readOnly: readOnly })));
+};
+export default TimePickerSelect;

package/dist/published/components/custom/FormField/TimePickerSelect/index.d.ts

@@ -0,0 +1 @@
+export * from './TimePickerSelect';

package/dist/published/components/custom/FormField/TimePickerSelect/index.js

@@ -0,0 +1 @@
+export * from './TimePickerSelect';

package/dist/published/stories/TimePickerSelect.stories.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<(props: import("../components/custom/FormField/FormField").FormFieldProps) => JSX.Element>;
+export default _default;
+export declare const TimePicker: ComponentStory<(props: import("../components/custom/FormField/FormField").FormFieldProps) => JSX.Element>;

package/dist/published/stories/TimePickerSelect.stories.js

@@ -0,0 +1,31 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useState } from 'react';
+import TimePickerSelect from '../components/custom/FormField/TimePickerSelect/TimePickerSelect';
+export default {
+    title: 'Input/TimePickerSelect',
+    component: TimePickerSelect,
+    argTypes: {
+        defaultValue: {
+            type: 'string',
+        },
+    },
+};
+const TimePickerSelectTemplate = (args) => {
+    const { defaultValue } = args, rest = __rest(args, ["defaultValue"]);
+    const [value, setValue] = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : null);
+    const handleChange = (id, newValue, property) => {
+        setValue(newValue);
+    };
+    return (React.createElement(TimePickerSelect, Object.assign({}, rest, { value: value, onChange: handleChange, property: { id: '1' } })));
+};
+export const TimePicker = TimePickerSelectTemplate.bind({});

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.0.0-dev.145",
+    "version": "1.0.0-dev.146",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",