@rjsf/antd 5.11.2 → 5.12.1

package/src/templates/SubmitButton/index.tsx

@@ -0,0 +1,20 @@
+import Button, { ButtonType } from 'antd/lib/button';
+import { getSubmitButtonOptions, FormContextType, RJSFSchema, StrictRJSFSchema, SubmitButtonProps } from '@rjsf/utils';
+
+/** The `SubmitButton` renders a button that represent the `Submit` action on a form
+ */
+export default function SubmitButton<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>({ uiSchema }: SubmitButtonProps<T, S, F>) {
+  const { submitText, norender, props: submitButtonProps } = getSubmitButtonOptions(uiSchema);
+  if (norender) {
+    return null;
+  }
+  return (
+    <Button type={'submit' as ButtonType} {...submitButtonProps} htmlType='submit'>
+      {submitText}
+    </Button>
+  );
+}

package/src/templates/TitleField/index.tsx

@@ -0,0 +1,57 @@
+import classNames from 'classnames';
+import { ConfigConsumer, ConfigConsumerProps } from 'antd/lib/config-provider/context';
+import { FormContextType, TitleFieldProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+
+/** The `TitleField` is the template to use to render the title of a field
+ *
+ * @param props - The `TitleFieldProps` for this component
+ */
+export default function TitleField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
+  id,
+  required,
+  registry,
+  title,
+}: TitleFieldProps<T, S, F>) {
+  const { formContext } = registry;
+  const { colon = true } = formContext;
+
+  let labelChildren = title;
+  if (colon && typeof title === 'string' && title.trim() !== '') {
+    labelChildren = title.replace(/[：:]\s*$/, '');
+  }
+
+  const handleLabelClick = () => {
+    if (!id) {
+      return;
+    }
+
+    const control: HTMLLabelElement | null = document.querySelector(`[id="${id}"]`);
+    if (control && control.focus) {
+      control.focus();
+    }
+  };
+
+  return title ? (
+    <ConfigConsumer>
+      {(configProps: ConfigConsumerProps) => {
+        const { getPrefixCls } = configProps;
+        const prefixCls = getPrefixCls('form');
+        const labelClassName = classNames({
+          [`${prefixCls}-item-required`]: required,
+          [`${prefixCls}-item-no-colon`]: !colon,
+        });
+
+        return (
+          <label
+            className={labelClassName}
+            htmlFor={id}
+            onClick={handleLabelClick}
+            title={typeof title === 'string' ? title : ''}
+          >
+            {labelChildren}
+          </label>
+        );
+      }}
+    </ConfigConsumer>
+  ) : null;
+}

package/src/templates/WrapIfAdditionalTemplate/index.tsx

@@ -0,0 +1,124 @@
+import { FocusEvent } from 'react';
+import Col from 'antd/lib/col';
+import Form from 'antd/lib/form';
+import Input from 'antd/lib/input';
+import Row from 'antd/lib/row';
+import {
+  ADDITIONAL_PROPERTY_FLAG,
+  UI_OPTIONS_KEY,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  TranslatableString,
+  WrapIfAdditionalTemplateProps,
+} from '@rjsf/utils';
+
+const VERTICAL_LABEL_COL = { span: 24 };
+const VERTICAL_WRAPPER_COL = { span: 24 };
+
+const INPUT_STYLE = {
+  width: '100%',
+};
+
+/** The `WrapIfAdditional` component is used by the `FieldTemplate` to rename, or remove properties that are
+ * part of an `additionalProperties` part of a schema.
+ *
+ * @param props - The `WrapIfAdditionalProps` for this component
+ */
+export default function WrapIfAdditionalTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: WrapIfAdditionalTemplateProps<T, S, F>) {
+  const {
+    children,
+    classNames,
+    style,
+    disabled,
+    id,
+    label,
+    onDropPropertyClick,
+    onKeyChange,
+    readonly,
+    required,
+    registry,
+    schema,
+    uiSchema,
+  } = props;
+  const {
+    colon,
+    labelCol = VERTICAL_LABEL_COL,
+    readonlyAsDisabled = true,
+    rowGutter = 24,
+    toolbarAlign = 'top',
+    wrapperCol = VERTICAL_WRAPPER_COL,
+    wrapperStyle,
+  } = registry.formContext;
+  const { templates, translateString } = registry;
+  // Button templates are not overridden in the uiSchema
+  const { RemoveButton } = templates.ButtonTemplates;
+  const keyLabel = translateString(TranslatableString.KeyLabel, [label]);
+  const additional = ADDITIONAL_PROPERTY_FLAG in schema;
+
+  if (!additional) {
+    return (
+      <div className={classNames} style={style}>
+        {children}
+      </div>
+    );
+  }
+
+  const handleBlur = ({ target }: FocusEvent<HTMLInputElement>) => onKeyChange(target.value);
+
+  // The `block` prop is not part of the `IconButtonProps` defined in the template, so put it into the uiSchema instead
+  const uiOptions = uiSchema ? uiSchema[UI_OPTIONS_KEY] : {};
+  const buttonUiOptions = {
+    ...uiSchema,
+    [UI_OPTIONS_KEY]: { ...uiOptions, block: true },
+  };
+
+  return (
+    <div className={classNames} style={style}>
+      <Row align={toolbarAlign} gutter={rowGutter}>
+        <Col className='form-additional' flex='1'>
+          <div className='form-group'>
+            <Form.Item
+              colon={colon}
+              className='form-group'
+              hasFeedback
+              htmlFor={`${id}-key`}
+              label={keyLabel}
+              labelCol={labelCol}
+              required={required}
+              style={wrapperStyle}
+              wrapperCol={wrapperCol}
+            >
+              <Input
+                className='form-control'
+                defaultValue={label}
+                disabled={disabled || (readonlyAsDisabled && readonly)}
+                id={`${id}-key`}
+                name={`${id}-key`}
+                onBlur={!readonly ? handleBlur : undefined}
+                style={INPUT_STYLE}
+                type='text'
+              />
+            </Form.Item>
+          </div>
+        </Col>
+        <Col className='form-additional' flex='1'>
+          {children}
+        </Col>
+        <Col flex='192px'>
+          <RemoveButton
+            className='array-item-remove'
+            disabled={disabled || readonly}
+            onClick={onDropPropertyClick(label)}
+            uiSchema={buttonUiOptions}
+            registry={registry}
+          />
+        </Col>
+      </Row>
+    </div>
+  );
+}

package/src/templates/index.ts

@@ -0,0 +1,43 @@
+import { FormContextType, RJSFSchema, StrictRJSFSchema, TemplatesType } from '@rjsf/utils';
+
+import ArrayFieldItemTemplate from './ArrayFieldItemTemplate';
+import ArrayFieldTemplate from './ArrayFieldTemplate';
+import BaseInputTemplate from './BaseInputTemplate';
+import DescriptionField from './DescriptionField';
+import ErrorList from './ErrorList';
+import { AddButton, CopyButton, MoveDownButton, MoveUpButton, RemoveButton } from './IconButton';
+import FieldErrorTemplate from './FieldErrorTemplate';
+import FieldTemplate from './FieldTemplate';
+import ObjectFieldTemplate from './ObjectFieldTemplate';
+import SubmitButton from './SubmitButton';
+import TitleField from './TitleField';
+import WrapIfAdditionalTemplate from './WrapIfAdditionalTemplate';
+
+export function generateTemplates<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(): Partial<TemplatesType<T, S, F>> {
+  return {
+    ArrayFieldItemTemplate,
+    ArrayFieldTemplate,
+    BaseInputTemplate,
+    ButtonTemplates: {
+      AddButton,
+      CopyButton,
+      MoveDownButton,
+      MoveUpButton,
+      RemoveButton,
+      SubmitButton,
+    },
+    DescriptionFieldTemplate: DescriptionField,
+    ErrorListTemplate: ErrorList,
+    FieldErrorTemplate,
+    FieldTemplate,
+    ObjectFieldTemplate,
+    TitleFieldTemplate: TitleField,
+    WrapIfAdditionalTemplate,
+  };
+}
+
+export default generateTemplates();

package/src/widgets/AltDateTimeWidget/index.tsx

@@ -0,0 +1,17 @@
+import { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
+
+import _AltDateWidget from '../AltDateWidget';
+
+export default function AltDateTimeWidget<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: WidgetProps<T, S, F>) {
+  const { AltDateWidget } = props.registry.widgets;
+  return <AltDateWidget showTime {...props} />;
+}
+
+AltDateTimeWidget.defaultProps = {
+  ..._AltDateWidget.defaultProps,
+  showTime: true,
+};

package/src/widgets/AltDateWidget/index.tsx

@@ -0,0 +1,197 @@
+import { MouseEvent, useEffect, useState } from 'react';
+import Button from 'antd/lib/button';
+import Col from 'antd/lib/col';
+import Row from 'antd/lib/row';
+import {
+  ariaDescribedByIds,
+  pad,
+  parseDateString,
+  toDateString,
+  DateObject,
+  FormContextType,
+  GenericObjectType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  TranslatableString,
+  WidgetProps,
+} from '@rjsf/utils';
+
+type DateElementProps<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any> = Pick<
+  WidgetProps<T, S, F>,
+  'id' | 'name' | 'value' | 'disabled' | 'readonly' | 'autofocus' | 'registry' | 'onBlur' | 'onFocus'
+> & {
+  select: (property: keyof DateObject, value: any) => void;
+  type: string;
+  range: [number, number];
+};
+
+const rangeOptions = (start: number, stop: number) => {
+  const options = [];
+  for (let i = start; i <= stop; i++) {
+    options.push({ value: i, label: pad(i, 2) });
+  }
+  return options;
+};
+
+const readyForChange = (state: DateObject) => {
+  return Object.values(state).every((value) => value !== -1);
+};
+
+function dateElementProps(
+  state: DateObject,
+  time: boolean,
+  yearsRange: [number, number] = [1900, new Date().getFullYear() + 2]
+) {
+  const { year, month, day, hour, minute, second } = state;
+  const data = [
+    {
+      type: 'year',
+      range: yearsRange,
+      value: year,
+    },
+    { type: 'month', range: [1, 12], value: month },
+    { type: 'day', range: [1, 31], value: day },
+  ] as { type: string; range: [number, number]; value: number }[];
+  if (time) {
+    data.push(
+      { type: 'hour', range: [0, 23], value: hour || -1 },
+      { type: 'minute', range: [0, 59], value: minute || -1 },
+      { type: 'second', range: [0, 59], value: second || -1 }
+    );
+  }
+  return data;
+}
+
+export default function AltDateWidget<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: WidgetProps<T, S, F>) {
+  const {
+    autofocus,
+    disabled,
+    formContext,
+    id,
+    onBlur,
+    onChange,
+    onFocus,
+    options,
+    readonly,
+    registry,
+    showTime,
+    value,
+  } = props;
+  const { translateString, widgets } = registry;
+  const { SelectWidget } = widgets;
+  const { rowGutter = 24 } = formContext as GenericObjectType;
+
+  const [state, setState] = useState(parseDateString(value, showTime));
+
+  useEffect(() => {
+    setState(parseDateString(value, showTime));
+  }, [showTime, value]);
+
+  const handleChange = (property: keyof DateObject, nextValue: any) => {
+    const nextState = {
+      ...state,
+      [property]: typeof nextValue === 'undefined' ? -1 : nextValue,
+    };
+
+    if (readyForChange(nextState)) {
+      onChange(toDateString(nextState, showTime));
+    } else {
+      setState(nextState);
+    }
+  };
+
+  const handleNow = (event: MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+    if (disabled || readonly) {
+      return;
+    }
+    const nextState = parseDateString(new Date().toJSON(), showTime);
+    onChange(toDateString(nextState, showTime));
+  };
+
+  const handleClear = (event: MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+    if (disabled || readonly) {
+      return;
+    }
+    onChange(undefined);
+  };
+
+  const renderDateElement = (elemProps: DateElementProps<T, S, F>) => (
+    <SelectWidget
+      autofocus={elemProps.autofocus}
+      className='form-control'
+      disabled={elemProps.disabled}
+      id={elemProps.id}
+      name={elemProps.name}
+      onBlur={elemProps.onBlur}
+      onChange={(elemValue) => elemProps.select(elemProps.type as keyof DateObject, elemValue)}
+      onFocus={elemProps.onFocus}
+      options={{
+        enumOptions: rangeOptions(elemProps.range[0], elemProps.range[1]),
+      }}
+      placeholder={elemProps.type}
+      readonly={elemProps.readonly}
+      schema={{ type: 'integer' } as S}
+      value={elemProps.value}
+      registry={registry}
+      label=''
+      aria-describedby={ariaDescribedByIds<T>(id)}
+    />
+  );
+
+  return (
+    <Row gutter={[Math.floor(rowGutter / 2), Math.floor(rowGutter / 2)]}>
+      {dateElementProps(state, showTime, options.yearsRange as [number, number] | undefined).map((elemProps, i) => {
+        const elemId = id + '_' + elemProps.type;
+        return (
+          <Col flex='88px' key={elemId}>
+            {renderDateElement({
+              ...elemProps,
+              autofocus: autofocus && i === 0,
+              disabled,
+              id: elemId,
+              name: id,
+              onBlur,
+              onFocus,
+              readonly,
+              registry,
+              select: handleChange,
+              // NOTE: antd components accept -1 rather than issue a warning
+              // like material-ui, so we need to convert -1 to undefined here.
+              value: elemProps.value < 0 ? undefined : elemProps.value,
+            })}
+          </Col>
+        );
+      })}
+      {!options.hideNowButton && (
+        <Col flex='88px'>
+          <Button block className='btn-now' onClick={handleNow} type='primary'>
+            {translateString(TranslatableString.NowLabel)}
+          </Button>
+        </Col>
+      )}
+      {!options.hideClearButton && (
+        <Col flex='88px'>
+          <Button block className='btn-clear' danger onClick={handleClear} type='primary'>
+            {translateString(TranslatableString.ClearLabel)}
+          </Button>
+        </Col>
+      )}
+    </Row>
+  );
+}
+
+AltDateWidget.defaultProps = {
+  autofocus: false,
+  disabled: false,
+  options: {
+    yearsRange: [1900, new Date().getFullYear() + 2],
+  },
+  readonly: false,
+  showTime: false,
+};

package/src/widgets/CheckboxWidget/index.tsx

@@ -0,0 +1,52 @@
+import { FocusEvent } from 'react';
+import Checkbox, { CheckboxChangeEvent } from 'antd/lib/checkbox';
+import {
+  ariaDescribedByIds,
+  labelValue,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  WidgetProps,
+  GenericObjectType,
+} from '@rjsf/utils';
+
+/** The `CheckBoxWidget` is a widget for rendering boolean properties.
+ *  It is typically used to represent a boolean.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function CheckboxWidget<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: WidgetProps<T, S, F>) {
+  const { autofocus, disabled, formContext, id, label, hideLabel, onBlur, onChange, onFocus, readonly, value } = props;
+  const { readonlyAsDisabled = true } = formContext as GenericObjectType;
+
+  const handleChange = ({ target }: CheckboxChangeEvent) => onChange(target.checked);
+
+  const handleBlur = ({ target }: FocusEvent<HTMLInputElement>) => onBlur(id, target.checked);
+
+  const handleFocus = ({ target }: FocusEvent<HTMLInputElement>) => onFocus(id, target.checked);
+
+  // Antd's typescript definitions do not contain the following props that are actually necessary and, if provided,
+  // they are used, so hacking them in via by spreading `extraProps` on the component to avoid typescript errors
+  const extraProps = {
+    onBlur: !readonly ? handleBlur : undefined,
+    onFocus: !readonly ? handleFocus : undefined,
+  };
+  return (
+    <Checkbox
+      autoFocus={autofocus}
+      checked={typeof value === 'undefined' ? false : value}
+      disabled={disabled || (readonlyAsDisabled && readonly)}
+      id={id}
+      name={id}
+      onChange={!readonly ? handleChange : undefined}
+      {...extraProps}
+      aria-describedby={ariaDescribedByIds<T>(id)}
+    >
+      {labelValue(label, hideLabel, '')}
+    </Checkbox>
+  );
+}

package/src/widgets/CheckboxesWidget/index.tsx

@@ -0,0 +1,75 @@
+import { FocusEvent } from 'react';
+import Checkbox from 'antd/lib/checkbox';
+import {
+  ariaDescribedByIds,
+  enumOptionsIndexForValue,
+  enumOptionsValueForIndex,
+  optionId,
+  FormContextType,
+  WidgetProps,
+  RJSFSchema,
+  StrictRJSFSchema,
+  GenericObjectType,
+} from '@rjsf/utils';
+
+/** The `CheckboxesWidget` is a widget for rendering checkbox groups.
+ *  It is typically used to represent an array of enums.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function CheckboxesWidget<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>({ autofocus, disabled, formContext, id, onBlur, onChange, onFocus, options, readonly, value }: WidgetProps<T, S, F>) {
+  const { readonlyAsDisabled = true } = formContext as GenericObjectType;
+
+  const { enumOptions, enumDisabled, inline, emptyValue } = options;
+
+  const handleChange = (nextValue: any) => onChange(enumOptionsValueForIndex<S>(nextValue, enumOptions, emptyValue));
+
+  const handleBlur = ({ target }: FocusEvent<HTMLInputElement>) =>
+    onBlur(id, enumOptionsValueForIndex<S>(target.value, enumOptions, emptyValue));
+
+  const handleFocus = ({ target }: FocusEvent<HTMLInputElement>) =>
+    onFocus(id, enumOptionsValueForIndex<S>(target.value, enumOptions, emptyValue));
+
+  // Antd's typescript definitions do not contain the following props that are actually necessary and, if provided,
+  // they are used, so hacking them in via by spreading `extraProps` on the component to avoid typescript errors
+  const extraProps = {
+    id,
+    onBlur: !readonly ? handleBlur : undefined,
+    onFocus: !readonly ? handleFocus : undefined,
+  };
+
+  const selectedIndexes = enumOptionsIndexForValue<S>(value, enumOptions, true) as string[];
+
+  return Array.isArray(enumOptions) && enumOptions.length > 0 ? (
+    <>
+      <Checkbox.Group
+        disabled={disabled || (readonlyAsDisabled && readonly)}
+        name={id}
+        onChange={!readonly ? handleChange : undefined}
+        value={selectedIndexes}
+        {...extraProps}
+        aria-describedby={ariaDescribedByIds<T>(id)}
+      >
+        {Array.isArray(enumOptions) &&
+          enumOptions.map((option, i) => (
+            <span key={i}>
+              <Checkbox
+                id={optionId(id, i)}
+                name={id}
+                autoFocus={i === 0 ? autofocus : false}
+                disabled={Array.isArray(enumDisabled) && enumDisabled.indexOf(value) !== -1}
+                value={String(i)}
+              >
+                {option.label}
+              </Checkbox>
+              {!inline && <br />}
+            </span>
+          ))}
+      </Checkbox.Group>
+    </>
+  ) : null;
+}

package/src/widgets/DateTimeWidget/index.tsx

@@ -0,0 +1,54 @@
+import dayjs from 'dayjs';
+import {
+  ariaDescribedByIds,
+  FormContextType,
+  GenericObjectType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  WidgetProps,
+} from '@rjsf/utils';
+
+import DatePicker from '../../components/DatePicker';
+
+const DATE_PICKER_STYLE = {
+  width: '100%',
+};
+
+/** The `DateTimeWidget` component uses the `BaseInputTemplate` changing the type to `datetime-local` and transforms
+ * the value to/from utc using the appropriate utility functions.
+ *
+ * @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 { disabled, formContext, id, onBlur, onChange, onFocus, placeholder, readonly, value } = props;
+  const { readonlyAsDisabled = true } = formContext as GenericObjectType;
+
+  const handleChange = (nextValue: any) => onChange(nextValue && nextValue.toISOString());
+
+  const handleBlur = () => onBlur(id, value);
+
+  const handleFocus = () => onFocus(id, value);
+
+  const getPopupContainer = (node: any) => node.parentNode;
+
+  return (
+    <DatePicker
+      disabled={disabled || (readonlyAsDisabled && readonly)}
+      getPopupContainer={getPopupContainer}
+      id={id}
+      name={id}
+      onBlur={!readonly ? handleBlur : undefined}
+      onChange={!readonly ? handleChange : undefined}
+      onFocus={!readonly ? handleFocus : undefined}
+      placeholder={placeholder}
+      showTime
+      style={DATE_PICKER_STYLE}
+      value={value && dayjs(value)}
+      aria-describedby={ariaDescribedByIds<T>(id)}
+    />
+  );
+}

package/src/widgets/DateWidget/index.tsx

@@ -0,0 +1,52 @@
+import dayjs from 'dayjs';
+import {
+  ariaDescribedByIds,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  WidgetProps,
+  GenericObjectType,
+} from '@rjsf/utils';
+
+import DatePicker from '../../components/DatePicker';
+
+const DATE_PICKER_STYLE = {
+  width: '100%',
+};
+
+/** The `DateWidget` component uses the `BaseInputTemplate` changing the type to `date` and transforms
+ * the value to undefined when it is falsy during the `onChange` handling.
+ *
+ * @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 { disabled, formContext, id, onBlur, onChange, onFocus, placeholder, readonly, value } = props;
+  const { readonlyAsDisabled = true } = formContext as GenericObjectType;
+
+  const handleChange = (nextValue: any) => onChange(nextValue && nextValue.format('YYYY-MM-DD'));
+
+  const handleBlur = () => onBlur(id, value);
+
+  const handleFocus = () => onFocus(id, value);
+
+  const getPopupContainer = (node: any) => node.parentNode;
+
+  return (
+    <DatePicker
+      disabled={disabled || (readonlyAsDisabled && readonly)}
+      getPopupContainer={getPopupContainer}
+      id={id}
+      name={id}
+      onBlur={!readonly ? handleBlur : undefined}
+      onChange={!readonly ? handleChange : undefined}
+      onFocus={!readonly ? handleFocus : undefined}
+      placeholder={placeholder}
+      showTime={false}
+      style={DATE_PICKER_STYLE}
+      value={value && dayjs(value)}
+      aria-describedby={ariaDescribedByIds<T>(id)}
+    />
+  );
+}