@rjsf/antd 5.11.2 → 5.12.1

package/src/templates/ArrayFieldTemplate/index.tsx

@@ -0,0 +1,132 @@
+import {
+  getTemplate,
+  getUiOptions,
+  ArrayFieldTemplateProps,
+  ArrayFieldTemplateItemType,
+  FormContextType,
+  GenericObjectType,
+  RJSFSchema,
+  StrictRJSFSchema,
+} from '@rjsf/utils';
+import classNames from 'classnames';
+import Col from 'antd/lib/col';
+import Row from 'antd/lib/row';
+import { ConfigConsumer, ConfigConsumerProps } from 'antd/lib/config-provider/context';
+
+const DESCRIPTION_COL_STYLE = {
+  paddingBottom: '8px',
+};
+
+/** The `ArrayFieldTemplate` component is the template used to render all items in an array.
+ *
+ * @param props - The `ArrayFieldTemplateItemType` props for the component
+ */
+export default function ArrayFieldTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: ArrayFieldTemplateProps<T, S, F>) {
+  const {
+    canAdd,
+    className,
+    disabled,
+    formContext,
+    idSchema,
+    items,
+    onAddClick,
+    readonly,
+    registry,
+    required,
+    schema,
+    title,
+    uiSchema,
+  } = props;
+  const uiOptions = getUiOptions<T, S, F>(uiSchema);
+  const ArrayFieldDescriptionTemplate = getTemplate<'ArrayFieldDescriptionTemplate', T, S, F>(
+    'ArrayFieldDescriptionTemplate',
+    registry,
+    uiOptions
+  );
+  const ArrayFieldItemTemplate = getTemplate<'ArrayFieldItemTemplate', T, S, F>(
+    'ArrayFieldItemTemplate',
+    registry,
+    uiOptions
+  );
+  const ArrayFieldTitleTemplate = getTemplate<'ArrayFieldTitleTemplate', T, S, F>(
+    'ArrayFieldTitleTemplate',
+    registry,
+    uiOptions
+  );
+  // Button templates are not overridden in the uiSchema
+  const {
+    ButtonTemplates: { AddButton },
+  } = registry.templates;
+  const { labelAlign = 'right', rowGutter = 24 } = formContext as GenericObjectType;
+
+  return (
+    <ConfigConsumer>
+      {(configProps: ConfigConsumerProps) => {
+        const { getPrefixCls } = configProps;
+        const prefixCls = getPrefixCls('form');
+        const labelClsBasic = `${prefixCls}-item-label`;
+        const labelColClassName = classNames(
+          labelClsBasic,
+          labelAlign === 'left' && `${labelClsBasic}-left`
+          // labelCol.className,
+        );
+
+        return (
+          <fieldset className={className} id={idSchema.$id}>
+            <Row gutter={rowGutter}>
+              {(uiOptions.title || title) && (
+                <Col className={labelColClassName} span={24}>
+                  <ArrayFieldTitleTemplate
+                    idSchema={idSchema}
+                    required={required}
+                    title={uiOptions.title || title}
+                    schema={schema}
+                    uiSchema={uiSchema}
+                    registry={registry}
+                  />
+                </Col>
+              )}
+              {(uiOptions.description || schema.description) && (
+                <Col span={24} style={DESCRIPTION_COL_STYLE}>
+                  <ArrayFieldDescriptionTemplate
+                    description={uiOptions.description || schema.description}
+                    idSchema={idSchema}
+                    schema={schema}
+                    uiSchema={uiSchema}
+                    registry={registry}
+                  />
+                </Col>
+              )}
+              <Col className='row array-item-list' span={24}>
+                {items &&
+                  items.map(({ key, ...itemProps }: ArrayFieldTemplateItemType<T, S, F>) => (
+                    <ArrayFieldItemTemplate key={key} {...itemProps} />
+                  ))}
+              </Col>
+
+              {canAdd && (
+                <Col span={24}>
+                  <Row gutter={rowGutter} justify='end'>
+                    <Col flex='192px'>
+                      <AddButton
+                        className='array-item-add'
+                        disabled={disabled || readonly}
+                        onClick={onAddClick}
+                        uiSchema={uiSchema}
+                        registry={registry}
+                      />
+                    </Col>
+                  </Row>
+                </Col>
+              )}
+            </Row>
+          </fieldset>
+        );
+      }}
+    </ConfigConsumer>
+  );
+}

package/src/templates/BaseInputTemplate/index.tsx

@@ -0,0 +1,105 @@
+import { ChangeEvent, FocusEvent } from 'react';
+import Input from 'antd/lib/input';
+import InputNumber from 'antd/lib/input-number';
+import {
+  ariaDescribedByIds,
+  BaseInputTemplateProps,
+  examplesId,
+  getInputProps,
+  FormContextType,
+  GenericObjectType,
+  RJSFSchema,
+  StrictRJSFSchema,
+} from '@rjsf/utils';
+
+const INPUT_STYLE = {
+  width: '100%',
+};
+
+/** The `BaseInputTemplate` is the template to use to render the basic `<input>` component for the `core` theme.
+ * It is used as the template for rendering many of the <input> based widgets that differ by `type` and callbacks only.
+ * It can be customized/overridden for other themes or individual implementations as needed.
+ *
+ * @param props - The `WidgetProps` for this template
+ */
+export default function BaseInputTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: BaseInputTemplateProps<T, S, F>) {
+  const {
+    disabled,
+    formContext,
+    id,
+    onBlur,
+    onChange,
+    onChangeOverride,
+    onFocus,
+    options,
+    placeholder,
+    readonly,
+    schema,
+    value,
+    type,
+  } = props;
+  const inputProps = getInputProps<T, S, F>(schema, type, options, false);
+  const { readonlyAsDisabled = true } = formContext as GenericObjectType;
+
+  const handleNumberChange = (nextValue: number | null) => onChange(nextValue);
+
+  const handleTextChange = onChangeOverride
+    ? onChangeOverride
+    : ({ target }: ChangeEvent<HTMLInputElement>) => onChange(target.value === '' ? options.emptyValue : target.value);
+
+  const handleBlur = ({ target }: FocusEvent<HTMLInputElement>) => onBlur(id, target.value);
+
+  const handleFocus = ({ target }: FocusEvent<HTMLInputElement>) => onFocus(id, target.value);
+
+  const input =
+    inputProps.type === 'number' || inputProps.type === 'integer' ? (
+      <InputNumber
+        disabled={disabled || (readonlyAsDisabled && readonly)}
+        id={id}
+        name={id}
+        onBlur={!readonly ? handleBlur : undefined}
+        onChange={!readonly ? handleNumberChange : undefined}
+        onFocus={!readonly ? handleFocus : undefined}
+        placeholder={placeholder}
+        style={INPUT_STYLE}
+        list={schema.examples ? examplesId<T>(id) : undefined}
+        {...inputProps}
+        value={value}
+        aria-describedby={ariaDescribedByIds<T>(id, !!schema.examples)}
+      />
+    ) : (
+      <Input
+        disabled={disabled || (readonlyAsDisabled && readonly)}
+        id={id}
+        name={id}
+        onBlur={!readonly ? handleBlur : undefined}
+        onChange={!readonly ? handleTextChange : undefined}
+        onFocus={!readonly ? handleFocus : undefined}
+        placeholder={placeholder}
+        style={INPUT_STYLE}
+        list={schema.examples ? examplesId<T>(id) : undefined}
+        {...inputProps}
+        value={value}
+        aria-describedby={ariaDescribedByIds<T>(id, !!schema.examples)}
+      />
+    );
+
+  return (
+    <>
+      {input}
+      {Array.isArray(schema.examples) && (
+        <datalist id={examplesId<T>(id)}>
+          {(schema.examples as string[])
+            .concat(schema.default && !schema.examples.includes(schema.default) ? ([schema.default] as string[]) : [])
+            .map((example) => {
+              return <option key={example} value={example} />;
+            })}
+        </datalist>
+      )}
+    </>
+  );
+}

package/src/templates/DescriptionField/index.tsx

@@ -0,0 +1,17 @@
+import { DescriptionFieldProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+
+/** The `DescriptionField` is the template to use to render the description of a field
+ *
+ * @param props - The `DescriptionFieldProps` for this component
+ */
+export default function DescriptionField<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: DescriptionFieldProps<T, S, F>) {
+  const { id, description } = props;
+  if (!description) {
+    return null;
+  }
+  return <span id={id}>{description}</span>;
+}

package/src/templates/ErrorList/index.tsx

@@ -0,0 +1,37 @@
+import Alert from 'antd/lib/alert';
+import List from 'antd/lib/list';
+import Space from 'antd/lib/space';
+import ExclamationCircleOutlined from '@ant-design/icons/ExclamationCircleOutlined';
+import { ErrorListProps, FormContextType, RJSFSchema, StrictRJSFSchema, TranslatableString } from '@rjsf/utils';
+
+/** The `ErrorList` component is the template that renders the all the errors associated with the fields in the `Form`
+ *
+ * @param props - The `ErrorListProps` for this component
+ */
+export default function ErrorList<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
+  errors,
+  registry,
+}: ErrorListProps<T, S, F>) {
+  const { translateString } = registry;
+  const renderErrors = () => (
+    <List className='list-group' size='small'>
+      {errors.map((error, index) => (
+        <List.Item key={index}>
+          <Space>
+            <ExclamationCircleOutlined />
+            {error.stack}
+          </Space>
+        </List.Item>
+      ))}
+    </List>
+  );
+
+  return (
+    <Alert
+      className='panel panel-danger errors'
+      description={renderErrors()}
+      message={translateString(TranslatableString.ErrorsLabel)}
+      type='error'
+    />
+  );
+}

package/src/templates/FieldErrorTemplate/index.tsx

@@ -0,0 +1,25 @@
+import { FieldErrorProps, FormContextType, RJSFSchema, StrictRJSFSchema, errorId } from '@rjsf/utils';
+
+/** The `FieldErrorTemplate` component renders the errors local to the particular field
+ *
+ * @param props - The `FieldErrorProps` for the errors being rendered
+ */
+export default function FieldErrorTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: FieldErrorProps<T, S, F>) {
+  const { errors = [], idSchema } = props;
+  if (errors.length === 0) {
+    return null;
+  }
+  const id = errorId<T>(idSchema);
+
+  return (
+    <div id={id}>
+      {errors.map((error) => (
+        <div key={`field-${id}-error-${error}`}>{error}</div>
+      ))}
+    </div>
+  );
+}

package/src/templates/FieldTemplate/index.tsx

@@ -0,0 +1,114 @@
+import Form from 'antd/lib/form';
+import {
+  FieldTemplateProps,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  getTemplate,
+  getUiOptions,
+  GenericObjectType,
+} from '@rjsf/utils';
+
+const VERTICAL_LABEL_COL = { span: 24 };
+const VERTICAL_WRAPPER_COL = { span: 24 };
+
+/** The `FieldTemplate` component is the template used by `SchemaField` to render any field. It renders the field
+ * content, (label, description, children, errors and help) inside of a `WrapIfAdditional` component.
+ *
+ * @param props - The `FieldTemplateProps` for this component
+ */
+export default function FieldTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: FieldTemplateProps<T, S, F>) {
+  const {
+    children,
+    classNames,
+    style,
+    description,
+    disabled,
+    displayLabel,
+    errors,
+    formContext,
+    help,
+    hidden,
+    id,
+    label,
+    onDropPropertyClick,
+    onKeyChange,
+    rawErrors,
+    rawDescription,
+    rawHelp,
+    readonly,
+    registry,
+    required,
+    schema,
+    uiSchema,
+  } = props;
+  const {
+    colon,
+    labelCol = VERTICAL_LABEL_COL,
+    wrapperCol = VERTICAL_WRAPPER_COL,
+    wrapperStyle,
+    descriptionLocation = 'below',
+  } = formContext as GenericObjectType;
+
+  const uiOptions = getUiOptions<T, S, F>(uiSchema);
+  const WrapIfAdditionalTemplate = getTemplate<'WrapIfAdditionalTemplate', T, S, F>(
+    'WrapIfAdditionalTemplate',
+    registry,
+    uiOptions
+  );
+
+  if (hidden) {
+    return <div className='field-hidden'>{children}</div>;
+  }
+
+  // check to see if there is rawDescription(string) before using description(ReactNode)
+  // to prevent showing a blank description area
+  const descriptionNode = rawDescription ? description : undefined;
+  const descriptionProps: GenericObjectType = {};
+  switch (descriptionLocation) {
+    case 'tooltip':
+      descriptionProps.tooltip = descriptionNode;
+      break;
+    case 'below':
+    default:
+      descriptionProps.extra = descriptionNode;
+      break;
+  }
+
+  return (
+    <WrapIfAdditionalTemplate
+      classNames={classNames}
+      style={style}
+      disabled={disabled}
+      id={id}
+      label={label}
+      onDropPropertyClick={onDropPropertyClick}
+      onKeyChange={onKeyChange}
+      readonly={readonly}
+      required={required}
+      schema={schema}
+      uiSchema={uiSchema}
+      registry={registry}
+    >
+      <Form.Item
+        colon={colon}
+        hasFeedback={schema.type !== 'array' && schema.type !== 'object'}
+        help={(!!rawHelp && help) || (rawErrors?.length ? errors : undefined)}
+        htmlFor={id}
+        label={displayLabel && label}
+        labelCol={labelCol}
+        required={required}
+        style={wrapperStyle}
+        validateStatus={rawErrors?.length ? 'error' : undefined}
+        wrapperCol={wrapperCol}
+        {...descriptionProps}
+      >
+        {children}
+      </Form.Item>
+    </WrapIfAdditionalTemplate>
+  );
+}

package/src/templates/IconButton/index.tsx

@@ -0,0 +1,94 @@
+import Button, { ButtonProps, ButtonType } from 'antd/lib/button';
+import ArrowDownOutlined from '@ant-design/icons/ArrowDownOutlined';
+import ArrowUpOutlined from '@ant-design/icons/ArrowUpOutlined';
+import CopyOutlined from '@ant-design/icons/CopyOutlined';
+import DeleteOutlined from '@ant-design/icons/DeleteOutlined';
+import PlusCircleOutlined from '@ant-design/icons/PlusCircleOutlined';
+import {
+  getUiOptions,
+  FormContextType,
+  IconButtonProps,
+  RJSFSchema,
+  StrictRJSFSchema,
+  TranslatableString,
+} from '@rjsf/utils';
+
+// The `type` for IconButtonProps collides with the `type` for `ButtonProps` so omit it to avoid Typescript issue
+export type AntdIconButtonProps<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+> = Omit<IconButtonProps<T, S, F>, 'type'>;
+
+export default function IconButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: AntdIconButtonProps<T, S, F> & ButtonProps
+) {
+  const { iconType = 'default', icon, uiSchema, registry, ...otherProps } = props;
+  return <Button type={iconType as ButtonType} icon={icon} {...otherProps} />;
+}
+
+export function AddButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: AntdIconButtonProps<T, S, F>
+) {
+  const {
+    registry: { translateString },
+  } = props;
+  return (
+    <IconButton
+      title={translateString(TranslatableString.AddItemButton)}
+      {...props}
+      block
+      iconType='primary'
+      icon={<PlusCircleOutlined />}
+    />
+  );
+}
+
+export function CopyButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: AntdIconButtonProps<T, S, F>
+) {
+  const {
+    registry: { translateString },
+  } = props;
+  return <IconButton title={translateString(TranslatableString.CopyButton)} {...props} icon={<CopyOutlined />} />;
+}
+
+export function MoveDownButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: AntdIconButtonProps<T, S, F>
+) {
+  const {
+    registry: { translateString },
+  } = props;
+  return (
+    <IconButton title={translateString(TranslatableString.MoveDownButton)} {...props} icon={<ArrowDownOutlined />} />
+  );
+}
+
+export function MoveUpButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: AntdIconButtonProps<T, S, F>
+) {
+  const {
+    registry: { translateString },
+  } = props;
+  return <IconButton title={translateString(TranslatableString.MoveUpButton)} {...props} icon={<ArrowUpOutlined />} />;
+}
+
+export function RemoveButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: AntdIconButtonProps<T, S, F>
+) {
+  // The `block` prop is not part of the `IconButtonProps` defined in the template, so get it from the uiSchema instead
+  const options = getUiOptions<T, S, F>(props.uiSchema);
+  const {
+    registry: { translateString },
+  } = props;
+  return (
+    <IconButton
+      title={translateString(TranslatableString.RemoveButton)}
+      {...props}
+      danger
+      block={!!options.block}
+      iconType='primary'
+      icon={<DeleteOutlined />}
+    />
+  );
+}

package/src/templates/ObjectFieldTemplate/index.tsx

@@ -0,0 +1,175 @@
+import classNames from 'classnames';
+import isObject from 'lodash/isObject';
+import isNumber from 'lodash/isNumber';
+import isString from 'lodash/isString';
+import {
+  FormContextType,
+  GenericObjectType,
+  ObjectFieldTemplateProps,
+  ObjectFieldTemplatePropertyType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  UiSchema,
+  canExpand,
+  descriptionId,
+  getTemplate,
+  getUiOptions,
+  titleId,
+} from '@rjsf/utils';
+import Col from 'antd/lib/col';
+import Row from 'antd/lib/row';
+import { ConfigConsumer, ConfigConsumerProps } from 'antd/lib/config-provider/context';
+
+const DESCRIPTION_COL_STYLE = {
+  paddingBottom: '8px',
+};
+
+/** The `ObjectFieldTemplate` is the template to use to render all the inner properties of an object along with the
+ * title and description if available. If the object is expandable, then an `AddButton` is also rendered after all
+ * the properties.
+ *
+ * @param props - The `ObjectFieldTemplateProps` for this component
+ */
+export default function ObjectFieldTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: ObjectFieldTemplateProps<T, S, F>) {
+  const {
+    description,
+    disabled,
+    formContext,
+    formData,
+    idSchema,
+    onAddClick,
+    properties,
+    readonly,
+    required,
+    registry,
+    schema,
+    title,
+    uiSchema,
+  } = props;
+  const uiOptions = getUiOptions<T, S, F>(uiSchema);
+  const TitleFieldTemplate = getTemplate<'TitleFieldTemplate', T, S, F>('TitleFieldTemplate', registry, uiOptions);
+  const DescriptionFieldTemplate = getTemplate<'DescriptionFieldTemplate', T, S, F>(
+    'DescriptionFieldTemplate',
+    registry,
+    uiOptions
+  );
+  // Button templates are not overridden in the uiSchema
+  const {
+    ButtonTemplates: { AddButton },
+  } = registry.templates;
+  const { colSpan = 24, labelAlign = 'right', rowGutter = 24 } = formContext as GenericObjectType;
+
+  const findSchema = (element: ObjectFieldTemplatePropertyType): S => element.content.props.schema;
+
+  const findSchemaType = (element: ObjectFieldTemplatePropertyType) => findSchema(element).type;
+
+  const findUiSchema = (element: ObjectFieldTemplatePropertyType): UiSchema<T, S, F> | undefined =>
+    element.content.props.uiSchema;
+
+  const findUiSchemaField = (element: ObjectFieldTemplatePropertyType) => getUiOptions(findUiSchema(element)).field;
+
+  const findUiSchemaWidget = (element: ObjectFieldTemplatePropertyType) => getUiOptions(findUiSchema(element)).widget;
+
+  const calculateColSpan = (element: ObjectFieldTemplatePropertyType) => {
+    const type = findSchemaType(element);
+    const field = findUiSchemaField(element);
+    const widget = findUiSchemaWidget(element);
+
+    const defaultColSpan =
+      properties.length < 2 || // Single or no field in object.
+      type === 'object' ||
+      type === 'array' ||
+      widget === 'textarea'
+        ? 24
+        : 12;
+
+    if (isObject(colSpan)) {
+      const colSpanObj: GenericObjectType = colSpan;
+      if (isString(widget)) {
+        return colSpanObj[widget];
+      }
+      if (isString(field)) {
+        return colSpanObj[field];
+      }
+      if (isString(type)) {
+        return colSpanObj[type];
+      }
+    }
+    if (isNumber(colSpan)) {
+      return colSpan;
+    }
+    return defaultColSpan;
+  };
+
+  return (
+    <ConfigConsumer>
+      {(configProps: ConfigConsumerProps) => {
+        const { getPrefixCls } = configProps;
+        const prefixCls = getPrefixCls('form');
+        const labelClsBasic = `${prefixCls}-item-label`;
+        const labelColClassName = classNames(
+          labelClsBasic,
+          labelAlign === 'left' && `${labelClsBasic}-left`
+          // labelCol.className,
+        );
+
+        return (
+          <fieldset id={idSchema.$id}>
+            <Row gutter={rowGutter}>
+              {title && (
+                <Col className={labelColClassName} span={24}>
+                  <TitleFieldTemplate
+                    id={titleId<T>(idSchema)}
+                    title={title}
+                    required={required}
+                    schema={schema}
+                    uiSchema={uiSchema}
+                    registry={registry}
+                  />
+                </Col>
+              )}
+              {description && (
+                <Col span={24} style={DESCRIPTION_COL_STYLE}>
+                  <DescriptionFieldTemplate
+                    id={descriptionId<T>(idSchema)}
+                    description={description}
+                    schema={schema}
+                    uiSchema={uiSchema}
+                    registry={registry}
+                  />
+                </Col>
+              )}
+              {properties
+                .filter((e) => !e.hidden)
+                .map((element: ObjectFieldTemplatePropertyType) => (
+                  <Col key={element.name} span={calculateColSpan(element)}>
+                    {element.content}
+                  </Col>
+                ))}
+            </Row>
+
+            {canExpand(schema, uiSchema, formData) && (
+              <Col span={24}>
+                <Row gutter={rowGutter} justify='end'>
+                  <Col flex='192px'>
+                    <AddButton
+                      className='object-property-expand'
+                      disabled={disabled || readonly}
+                      onClick={onAddClick(schema)}
+                      uiSchema={uiSchema}
+                      registry={registry}
+                    />
+                  </Col>
+                </Row>
+              </Col>
+            )}
+          </fieldset>
+        );
+      }}
+    </ConfigConsumer>
+  );
+}