@rjsf/mantine 6.0.0-beta.14

package/src/widgets/DateTime/AltDateWidget.tsx

@@ -0,0 +1,139 @@
+import { useCallback, useEffect, useState } from 'react';
+import {
+  ariaDescribedByIds,
+  dateRangeOptions,
+  parseDateString,
+  toDateString,
+  getDateElementProps,
+  titleId,
+  DateObject,
+  type DateElementFormat,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  TranslatableString,
+  WidgetProps,
+} from '@rjsf/utils';
+import { Flex, Box, Group, Button, Select, Input } from '@mantine/core';
+
+function readyForChange(state: DateObject) {
+  return Object.values(state).every((value) => value !== -1);
+}
+
+/** The `AltDateWidget` is an alternative widget for rendering date properties.
+ * @param props - The `WidgetProps` for this component
+ */
+export default function AltDateWidget<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>(props: WidgetProps<T, S, F>) {
+  const {
+    id,
+    value,
+    required,
+    disabled,
+    readonly,
+    label,
+    hideLabel,
+    rawErrors,
+    options,
+    onChange,
+    showTime = false,
+    registry,
+  } = props;
+
+  const { translateString } = registry;
+  const [state, setState] = useState(parseDateString(value, showTime));
+
+  useEffect(() => {
+    setState(parseDateString(value, showTime));
+  }, [showTime, value]);
+
+  const handleChange = useCallback(
+    (property: keyof DateObject, nextValue: any) => {
+      const nextState = {
+        ...state,
+        [property]: typeof nextValue === 'undefined' ? -1 : nextValue,
+      };
+
+      if (readyForChange(nextState)) {
+        onChange(toDateString(nextState, showTime));
+      } else {
+        setState(nextState);
+      }
+    },
+    [state, onChange, showTime],
+  );
+
+  const handleSetNow = useCallback(() => {
+    if (!disabled && !readonly) {
+      const nextState = parseDateString(new Date().toJSON(), showTime);
+      onChange(toDateString(nextState, showTime));
+    }
+  }, [disabled, readonly, showTime, onChange]);
+
+  const handleClear = useCallback(() => {
+    if (!disabled && !readonly) {
+      onChange('');
+    }
+  }, [disabled, readonly, onChange]);
+
+  return (
+    <>
+      {!hideLabel && !!label && (
+        <Input.Label id={titleId<T>(id)} required={required}>
+          {label}
+        </Input.Label>
+      )}
+      <Flex gap='xs' align='center' wrap='nowrap'>
+        {getDateElementProps(
+          state,
+          showTime,
+          options.yearsRange as [number, number] | undefined,
+          options.format as DateElementFormat | undefined,
+        ).map((elemProps, i) => {
+          const elemId = id + '_' + elemProps.type;
+          return (
+            <Box key={i}>
+              <Select
+                id={elemId}
+                name={elemId}
+                placeholder={elemProps.type}
+                disabled={disabled || readonly}
+                data={dateRangeOptions<S>(elemProps.range[0], elemProps.range[1]).map((item) => item.value.toString())}
+                value={!elemProps.value || elemProps.value < 0 ? null : elemProps.value.toString()}
+                onChange={(v) => handleChange(elemProps.type as keyof DateObject, v)}
+                searchable={false}
+                allowDeselect={false}
+                comboboxProps={{ withinPortal: false }}
+                aria-describedby={ariaDescribedByIds<T>(elemId)}
+              />
+            </Box>
+          );
+        })}
+        <Group wrap='nowrap' gap={3}>
+          {(options.hideNowButton !== 'undefined' ? !options.hideNowButton : true) && (
+            <Button variant='subtle' size='xs' onClick={handleSetNow}>
+              {translateString(TranslatableString.NowLabel)}
+            </Button>
+          )}
+          {(options.hideClearButton !== 'undefined' ? !options.hideClearButton : true) && (
+            <Button variant='subtle' size='xs' onClick={handleClear}>
+              {translateString(TranslatableString.ClearLabel)}
+            </Button>
+          )}
+        </Group>
+      </Flex>
+      {rawErrors &&
+        rawErrors?.length > 0 &&
+        rawErrors.map((error: string, index: number) => (
+          <Input.Error key={`alt-date-widget-input-errors-${index}`}>{error}</Input.Error>
+        ))}
+    </>
+  );
+}
+
+AltDateWidget.defaultProps = {
+  showTime: false,
+};

package/src/widgets/DateTime/DateTimeInput.tsx

@@ -0,0 +1,97 @@
+import { useCallback } from 'react';
+import {
+  ariaDescribedByIds,
+  FormContextType,
+  labelValue,
+  RJSFSchema,
+  StrictRJSFSchema,
+  WidgetProps,
+} from '@rjsf/utils';
+import dayjs from 'dayjs';
+import { DateInput } from '@mantine/dates';
+
+const dateParser = (input: string, format: string) => {
+  if (!input) {
+    return null;
+  }
+  const d = dayjs(input, format);
+  return d.isValid() ? d.toDate() : null;
+};
+
+const dateFormat = (date?: Date, format?: string) => {
+  if (!date) {
+    return '';
+  }
+  return dayjs(date).format(format || 'YYYY-MM-DD');
+};
+
+/** The `DateTimeInput` is a base component that used by other Date-Time widget components.
+ * @param props - The `WidgetProps` for this component
+ */
+export default function DateTimeInput<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>(props: WidgetProps<T, S, F>) {
+  const {
+    id,
+    name,
+    value,
+    placeholder,
+    required,
+    disabled,
+    readonly,
+    autofocus,
+    label,
+    hideLabel,
+    rawErrors,
+    options,
+    onChange,
+    onBlur,
+    onFocus,
+    valueFormat,
+    displayFormat,
+  } = props;
+
+  const handleChange = useCallback(
+    (nextValue: any) => {
+      onChange(dateFormat(nextValue, valueFormat as string));
+    },
+    [onChange, valueFormat],
+  );
+
+  const handleBlur = useCallback(() => {
+    if (onBlur) {
+      onBlur(id, value);
+    }
+  }, [onBlur, id, value]);
+
+  const handleFocus = useCallback(() => {
+    if (onFocus) {
+      onFocus(id, value);
+    }
+  }, [onFocus, id, value]);
+
+  return (
+    <DateInput
+      id={id}
+      name={name}
+      value={dateParser(value, valueFormat as string)}
+      dateParser={(v) => dateParser(v, displayFormat as string)}
+      placeholder={placeholder || undefined}
+      required={required}
+      disabled={disabled || readonly}
+      autoFocus={autofocus}
+      label={labelValue(label || undefined, hideLabel, false)}
+      onChange={handleChange}
+      onBlur={handleBlur}
+      onFocus={handleFocus}
+      error={rawErrors && rawErrors.length > 0 ? rawErrors.join('\n') : undefined}
+      {...options}
+      aria-describedby={ariaDescribedByIds<T>(id)}
+      popoverProps={{ withinPortal: false }}
+      classNames={typeof options?.classNames === 'object' ? options.classNames : undefined}
+      valueFormat={displayFormat}
+    />
+  );
+}

package/src/widgets/DateTime/DateTimeWidget.tsx

@@ -0,0 +1,24 @@
+import { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
+
+import DateTimeInput from './DateTimeInput';
+
+/** The `DateWidget` component uses the `DateTimeInput` changing the valueFormat to show `datetime`
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function DateTimeWidget<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>(props: WidgetProps<T, S, F>) {
+  const { valueFormat = 'YYYY-MM-DD HH:mm:ss', displayFormat, ...otherOptions } = props.options;
+
+  return (
+    <DateTimeInput
+      {...props}
+      options={otherOptions}
+      valueFormat={valueFormat}
+      displayFormat={displayFormat || valueFormat}
+    />
+  );
+}

package/src/widgets/DateTime/DateWidget.tsx

@@ -0,0 +1,22 @@
+import { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
+
+import DateTimeInput from './DateTimeInput';
+
+/** The `DateWidget` component uses the `DateTimeInput` changing the valueFormat to show `date`
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function DateWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: WidgetProps<T, S, F>,
+) {
+  const { valueFormat = 'YYYY-MM-DD', displayFormat, ...otherOptions } = props.options;
+
+  return (
+    <DateTimeInput
+      {...props}
+      options={otherOptions}
+      valueFormat={valueFormat}
+      displayFormat={displayFormat || valueFormat}
+    />
+  );
+}

package/src/widgets/DateTime/TimeWidget.tsx

@@ -0,0 +1,83 @@
+import { ChangeEvent, FocusEvent, useCallback } from 'react';
+import {
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  WidgetProps,
+  labelValue,
+  ariaDescribedByIds,
+} from '@rjsf/utils';
+import { TimeInput } from '@mantine/dates';
+
+/** The `TimeWidget` component uses the `TimeInput` component from `@mantine/dates` for rendering.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function TimeWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: WidgetProps<T, S, F>,
+) {
+  const {
+    id,
+    name,
+    value,
+    placeholder,
+    required,
+    disabled,
+    readonly,
+    autofocus,
+    label,
+    hideLabel,
+    rawErrors,
+    options,
+    onChange,
+    onBlur,
+    onFocus,
+  } = props;
+
+  const emptyValue = options.emptyValue || '';
+
+  const handleChange = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      onChange(e.target.value === '' ? emptyValue : e.target.value);
+    },
+    [onChange, emptyValue],
+  );
+
+  const handleBlur = useCallback(
+    ({ target }: FocusEvent<HTMLInputElement>) => {
+      if (onBlur) {
+        onBlur(id, target && target.value);
+      }
+    },
+    [onBlur, id],
+  );
+
+  const handleFocus = useCallback(
+    ({ target }: FocusEvent<HTMLInputElement>) => {
+      if (onFocus) {
+        onFocus(id, target && target.value);
+      }
+    },
+    [onFocus, id],
+  );
+
+  return (
+    <TimeInput
+      id={id}
+      name={name}
+      value={value || ''}
+      placeholder={placeholder || undefined}
+      required={required}
+      disabled={disabled || readonly}
+      autoFocus={autofocus}
+      label={labelValue(label || undefined, hideLabel, false)}
+      onChange={handleChange}
+      onBlur={handleBlur}
+      onFocus={handleFocus}
+      error={rawErrors && rawErrors.length > 0 ? rawErrors.join('\n') : undefined}
+      {...options}
+      aria-describedby={ariaDescribedByIds<T>(id)}
+      classNames={typeof options?.classNames === 'object' ? options.classNames : undefined}
+    />
+  );
+}

package/src/widgets/DateTime/index.ts

@@ -0,0 +1,5 @@
+export { default as AltDateTimeWidget } from './AltDateTimeWidget';
+export { default as AltDateWidget } from './AltDateWidget';
+export { default as DateWidget } from './DateWidget';
+export { default as DateTimeWidget } from './DateTimeWidget';
+export { default as TimeWidget } from './TimeWidget';

package/src/widgets/FileWidget.tsx

@@ -0,0 +1,176 @@
+import { useCallback } from 'react';
+import {
+  dataURItoBlob,
+  ariaDescribedByIds,
+  FormContextType,
+  labelValue,
+  RJSFSchema,
+  StrictRJSFSchema,
+  WidgetProps,
+} from '@rjsf/utils';
+import { FileInput, Pill } from '@mantine/core';
+
+import { cleanupOptions } from '../utils';
+
+function addNameToDataURL(dataURL: string, name: string) {
+  if (dataURL === null) {
+    return null;
+  }
+  return dataURL.replace(';base64', `;name=${encodeURIComponent(name)};base64`);
+}
+
+type FileInfoType = {
+  dataURL?: string | null;
+  name: string;
+  size: number;
+  type: string;
+};
+
+function processFile(file: File): Promise<FileInfoType> {
+  const { name, size, type } = file;
+  return new Promise((resolve, reject) => {
+    const reader = new window.FileReader();
+    reader.onerror = reject;
+    reader.onload = (event) => {
+      if (typeof event.target?.result === 'string') {
+        resolve({
+          dataURL: addNameToDataURL(event.target.result, name),
+          name,
+          size,
+          type,
+        });
+      } else {
+        resolve({
+          dataURL: null,
+          name,
+          size,
+          type,
+        });
+      }
+    };
+    reader.readAsDataURL(file);
+  });
+}
+
+function processFiles(files: FileList) {
+  return Promise.all(Array.from(files).map(processFile));
+}
+
+function extractFileInfo(dataURLs: string[]): FileInfoType[] {
+  return dataURLs.reduce((acc, dataURL) => {
+    if (!dataURL) {
+      return acc;
+    }
+    try {
+      const { blob, name } = dataURItoBlob(dataURL);
+      return [
+        ...acc,
+        {
+          dataURL,
+          name: name,
+          size: blob.size,
+          type: blob.type,
+        },
+      ];
+    } catch (e) {
+      console.log(e);
+      // Invalid dataURI, so just ignore it.
+      return acc;
+    }
+  }, [] as FileInfoType[]);
+}
+
+/**
+ * The `FileWidget` is a widget for rendering file upload fields.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function FileWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: WidgetProps<T, S, F>,
+) {
+  const {
+    id,
+    name,
+    value,
+    placeholder,
+    required,
+    disabled,
+    readonly,
+    autofocus,
+    label,
+    hideLabel,
+    rawErrors,
+    options,
+    multiple,
+    onChange,
+  } = props;
+
+  const themeProps = cleanupOptions(options);
+
+  const handleChange = useCallback(
+    (files: any) => {
+      if (typeof files === 'object') {
+        processFiles(multiple ? files : [files]).then((filesInfoEvent) => {
+          const newValue = filesInfoEvent.map((fileInfo) => fileInfo.dataURL);
+          if (multiple) {
+            onChange(value.concat(newValue));
+          } else {
+            onChange(newValue[0]);
+          }
+        });
+      }
+      return;
+    },
+    [multiple, value, onChange],
+  );
+
+  const handleRemoveFile = useCallback(
+    (index: number) => {
+      if (multiple) {
+        const newValue = value.filter((_: any, i: number) => i !== index);
+        onChange(newValue);
+      } else {
+        onChange(undefined);
+      }
+    },
+    [multiple, value, onChange],
+  );
+
+  const ValueComponent = useCallback(
+    (props: any) => {
+      const filesInfo = props.value ? extractFileInfo(Array.isArray(props.value) ? props.value : [props.value]) : null;
+      if (Array.isArray(filesInfo) && filesInfo.length > 0) {
+        return (
+          <Pill.Group>
+            {filesInfo.map((file, index) => (
+              <Pill key={index} withRemoveButton onRemove={() => handleRemoveFile(index)}>
+                {file.name}
+              </Pill>
+            ))}
+          </Pill.Group>
+        );
+      }
+      return null;
+    },
+    [handleRemoveFile],
+  );
+
+  return (
+    <FileInput
+      id={id}
+      name={name}
+      value={value || ''}
+      placeholder={placeholder || undefined}
+      required={required}
+      disabled={disabled || readonly}
+      autoFocus={autofocus}
+      label={labelValue(label || undefined, hideLabel, false)}
+      multiple={!!multiple}
+      valueComponent={ValueComponent}
+      onChange={handleChange}
+      error={rawErrors && rawErrors.length > 0 ? rawErrors.join('\n') : undefined}
+      {...themeProps}
+      aria-describedby={ariaDescribedByIds<T>(id)}
+    />
+  );
+}

package/src/widgets/PasswordWidget.tsx

@@ -0,0 +1,88 @@
+import { ChangeEvent, FocusEvent, useCallback } from 'react';
+import {
+  ariaDescribedByIds,
+  FormContextType,
+  labelValue,
+  RJSFSchema,
+  StrictRJSFSchema,
+  WidgetProps,
+} from '@rjsf/utils';
+import { PasswordInput } from '@mantine/core';
+
+import { cleanupOptions } from '../utils';
+
+/**
+ * The `PasswordWidget` component renders a password input element.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function PasswordWidget<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>(props: WidgetProps<T, S, F>) {
+  const {
+    id,
+    name,
+    value,
+    placeholder,
+    required,
+    disabled,
+    readonly,
+    autofocus,
+    label,
+    hideLabel,
+    rawErrors,
+    options,
+    onChange,
+    onBlur,
+    onFocus,
+  } = props;
+
+  const emptyValue = options.emptyValue || '';
+  const themeProps = cleanupOptions(options);
+
+  const handleChange = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      onChange(e.target.value === '' ? emptyValue : e.target.value);
+    },
+    [onChange, emptyValue],
+  );
+
+  const handleBlur = useCallback(
+    ({ target }: FocusEvent<HTMLInputElement>) => {
+      if (onBlur) {
+        onBlur(id, target && target.value);
+      }
+    },
+    [onBlur, id],
+  );
+
+  const handleFocus = useCallback(
+    ({ target }: FocusEvent<HTMLInputElement>) => {
+      if (onFocus) {
+        onFocus(id, target && target.value);
+      }
+    },
+    [onFocus, id],
+  );
+
+  return (
+    <PasswordInput
+      id={id}
+      name={name}
+      value={value || ''}
+      placeholder={placeholder || undefined}
+      required={required}
+      disabled={disabled || readonly}
+      autoFocus={autofocus}
+      label={labelValue(label || undefined, hideLabel, false)}
+      onChange={handleChange}
+      onBlur={handleBlur}
+      onFocus={handleFocus}
+      error={rawErrors && rawErrors.length > 0 ? rawErrors.join('\n') : undefined}
+      {...themeProps}
+      aria-describedby={ariaDescribedByIds<T>(id)}
+    />
+  );
+}