@rjsf/antd 5.11.2 → 5.12.1

package/src/widgets/PasswordWidget/index.tsx

@@ -0,0 +1,46 @@
+import { ChangeEvent, FocusEvent } from 'react';
+import Input from 'antd/lib/input';
+import {
+  ariaDescribedByIds,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  WidgetProps,
+  GenericObjectType,
+} from '@rjsf/utils';
+
+/** The `PasswordWidget` component uses the `BaseInputTemplate` changing the type to `password`.
+ *
+ * @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 { disabled, formContext, id, onBlur, onChange, onFocus, options, placeholder, readonly, value } = props;
+  const { readonlyAsDisabled = true } = formContext as GenericObjectType;
+
+  const emptyValue = options.emptyValue || '';
+
+  const handleChange = ({ target }: ChangeEvent<HTMLInputElement>) =>
+    onChange(target.value === '' ? emptyValue : target.value);
+
+  const handleBlur = ({ target }: FocusEvent<HTMLInputElement>) => onBlur(id, target.value);
+
+  const handleFocus = ({ target }: FocusEvent<HTMLInputElement>) => onFocus(id, target.value);
+
+  return (
+    <Input.Password
+      disabled={disabled || (readonlyAsDisabled && readonly)}
+      id={id}
+      name={id}
+      onBlur={!readonly ? handleBlur : undefined}
+      onChange={!readonly ? handleChange : undefined}
+      onFocus={!readonly ? handleFocus : undefined}
+      placeholder={placeholder}
+      value={value || ''}
+      aria-describedby={ariaDescribedByIds<T>(id)}
+    />
+  );
+}

package/src/widgets/RadioWidget/index.tsx

@@ -0,0 +1,73 @@
+import { FocusEvent } from 'react';
+import Radio, { RadioChangeEvent } from 'antd/lib/radio';
+import {
+  ariaDescribedByIds,
+  enumOptionsIndexForValue,
+  enumOptionsValueForIndex,
+  optionId,
+  FormContextType,
+  GenericObjectType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  WidgetProps,
+} from '@rjsf/utils';
+
+/** The `RadioWidget` is a widget for rendering a radio group.
+ *  It is typically used with a string property constrained with enum options.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function RadioWidget<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, emptyValue } = options;
+
+  const handleChange = ({ target: { value: nextValue } }: RadioChangeEvent) =>
+    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));
+
+  const selectedIndexes = enumOptionsIndexForValue<S>(value, enumOptions) as string;
+
+  return (
+    <Radio.Group
+      disabled={disabled || (readonlyAsDisabled && readonly)}
+      id={id}
+      name={id}
+      onChange={!readonly ? handleChange : undefined}
+      onBlur={!readonly ? handleBlur : undefined}
+      onFocus={!readonly ? handleFocus : undefined}
+      value={selectedIndexes}
+      aria-describedby={ariaDescribedByIds<T>(id)}
+    >
+      {Array.isArray(enumOptions) &&
+        enumOptions.map((option, i) => (
+          <Radio
+            id={optionId(id, i)}
+            name={id}
+            autoFocus={i === 0 ? autofocus : false}
+            disabled={Array.isArray(enumDisabled) && enumDisabled.indexOf(value) !== -1}
+            key={i}
+            value={String(i)}
+          >
+            {option.label}
+          </Radio>
+        ))}
+    </Radio.Group>
+  );
+}

package/src/widgets/RangeWidget/index.tsx

@@ -0,0 +1,69 @@
+import Slider from 'antd/lib/slider';
+import {
+  ariaDescribedByIds,
+  rangeSpec,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  WidgetProps,
+  GenericObjectType,
+} from '@rjsf/utils';
+
+/** The `RangeWidget` component uses the `BaseInputTemplate` changing the type to `range` and wrapping the result
+ * in a div, with the value along side it.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function RangeWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: WidgetProps<T, S, F>
+) {
+  const {
+    autofocus,
+    disabled,
+    formContext,
+    id,
+    onBlur,
+    onChange,
+    onFocus,
+    options,
+    placeholder,
+    readonly,
+    schema,
+    value,
+  } = props;
+  const { readonlyAsDisabled = true } = formContext as GenericObjectType;
+
+  const { min, max, step } = rangeSpec(schema);
+
+  const emptyValue = options.emptyValue || '';
+
+  const handleChange = (nextValue: any) => onChange(nextValue === '' ? emptyValue : nextValue);
+
+  const handleBlur = () => onBlur(id, value);
+
+  const handleFocus = () => onFocus(id, value);
+
+  // 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 = {
+    placeholder,
+    onBlur: !readonly ? handleBlur : undefined,
+    onFocus: !readonly ? handleFocus : undefined,
+  };
+
+  return (
+    <Slider
+      autoFocus={autofocus}
+      disabled={disabled || (readonlyAsDisabled && readonly)}
+      id={id}
+      max={max}
+      min={min}
+      onChange={!readonly ? handleChange : undefined}
+      range={false}
+      step={step}
+      value={value}
+      {...extraProps}
+      aria-describedby={ariaDescribedByIds<T>(id)}
+    />
+  );
+}

package/src/widgets/SelectWidget/index.tsx

@@ -0,0 +1,97 @@
+import Select, { DefaultOptionType } from 'antd/lib/select';
+import {
+  ariaDescribedByIds,
+  enumOptionsIndexForValue,
+  enumOptionsValueForIndex,
+  FormContextType,
+  GenericObjectType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  WidgetProps,
+} from '@rjsf/utils';
+import isString from 'lodash/isString';
+
+const SELECT_STYLE = {
+  width: '100%',
+};
+
+/** The `SelectWidget` is a widget for rendering dropdowns.
+ *  It is typically used with string properties constrained with enum options.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function SelectWidget<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>({
+  autofocus,
+  disabled,
+  formContext = {} as F,
+  id,
+  multiple,
+  onBlur,
+  onChange,
+  onFocus,
+  options,
+  placeholder,
+  readonly,
+  value,
+}: WidgetProps<T, S, F>) {
+  const { readonlyAsDisabled = true } = formContext as GenericObjectType;
+
+  const { enumOptions, enumDisabled, emptyValue } = options;
+
+  const handleChange = (nextValue: any) => onChange(enumOptionsValueForIndex<S>(nextValue, enumOptions, emptyValue));
+
+  const handleBlur = () => onBlur(id, enumOptionsValueForIndex<S>(value, enumOptions, emptyValue));
+
+  const handleFocus = () => onFocus(id, enumOptionsValueForIndex<S>(value, enumOptions, emptyValue));
+
+  const filterOption = (input: string, option?: DefaultOptionType) => {
+    if (option && isString(option.label)) {
+      // labels are strings in this context
+      return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+    }
+    return false;
+  };
+
+  const getPopupContainer = (node: any) => node.parentNode;
+
+  const selectedIndexes = enumOptionsIndexForValue<S>(value, enumOptions, multiple);
+
+  // 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 = {
+    name: id,
+  };
+  return (
+    <Select
+      autoFocus={autofocus}
+      disabled={disabled || (readonlyAsDisabled && readonly)}
+      getPopupContainer={getPopupContainer}
+      id={id}
+      mode={multiple ? 'multiple' : undefined}
+      onBlur={!readonly ? handleBlur : undefined}
+      onChange={!readonly ? handleChange : undefined}
+      onFocus={!readonly ? handleFocus : undefined}
+      placeholder={placeholder}
+      style={SELECT_STYLE}
+      value={selectedIndexes}
+      {...extraProps}
+      filterOption={filterOption}
+      aria-describedby={ariaDescribedByIds<T>(id)}
+    >
+      {Array.isArray(enumOptions) &&
+        enumOptions.map(({ value: optionValue, label: optionLabel }, index) => (
+          <Select.Option
+            disabled={Array.isArray(enumDisabled) && enumDisabled.indexOf(optionValue) !== -1}
+            key={String(index)}
+            value={String(index)}
+          >
+            {optionLabel}
+          </Select.Option>
+        ))}
+    </Select>
+  );
+}

package/src/widgets/TextareaWidget/index.tsx

@@ -0,0 +1,67 @@
+import { ChangeEvent, FocusEvent } from 'react';
+import Input from 'antd/lib/input';
+import {
+  ariaDescribedByIds,
+  FormContextType,
+  GenericObjectType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  WidgetProps,
+} from '@rjsf/utils';
+
+const INPUT_STYLE = {
+  width: '100%',
+};
+
+/** The `TextareaWidget` is a widget for rendering input fields as textarea.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function TextareaWidget<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>({
+  disabled,
+  formContext,
+  id,
+  onBlur,
+  onChange,
+  onFocus,
+  options,
+  placeholder,
+  readonly,
+  value,
+}: WidgetProps<T, S, F>) {
+  const { readonlyAsDisabled = true } = formContext as GenericObjectType;
+
+  const handleChange = ({ target }: ChangeEvent<HTMLTextAreaElement>) =>
+    onChange(target.value === '' ? options.emptyValue : target.value);
+
+  const handleBlur = ({ target }: FocusEvent<HTMLTextAreaElement>) => onBlur(id, target.value);
+
+  const handleFocus = ({ target }: FocusEvent<HTMLTextAreaElement>) => onFocus(id, target.value);
+
+  // 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 = {
+    type: 'textarea',
+  };
+
+  return (
+    <Input.TextArea
+      disabled={disabled || (readonlyAsDisabled && readonly)}
+      id={id}
+      name={id}
+      onBlur={!readonly ? handleBlur : undefined}
+      onChange={!readonly ? handleChange : undefined}
+      onFocus={!readonly ? handleFocus : undefined}
+      placeholder={placeholder}
+      rows={options.rows || 4}
+      style={INPUT_STYLE}
+      value={value}
+      {...extraProps}
+      aria-describedby={ariaDescribedByIds<T>(id)}
+    />
+  );
+}

package/src/widgets/index.ts

@@ -0,0 +1,35 @@
+import { FormContextType, RegistryWidgetsType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+
+import AltDateTimeWidget from './AltDateTimeWidget';
+import AltDateWidget from './AltDateWidget';
+import CheckboxesWidget from './CheckboxesWidget';
+import CheckboxWidget from './CheckboxWidget';
+import DateTimeWidget from './DateTimeWidget';
+import DateWidget from './DateWidget';
+import PasswordWidget from './PasswordWidget';
+import RadioWidget from './RadioWidget';
+import RangeWidget from './RangeWidget';
+import SelectWidget from './SelectWidget';
+import TextareaWidget from './TextareaWidget';
+
+export function generateWidgets<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(): RegistryWidgetsType<T, S, F> {
+  return {
+    AltDateTimeWidget,
+    AltDateWidget,
+    CheckboxesWidget,
+    CheckboxWidget,
+    DateTimeWidget,
+    DateWidget,
+    PasswordWidget,
+    RadioWidget,
+    RangeWidget,
+    SelectWidget,
+    TextareaWidget,
+  };
+}
+
+export default generateWidgets();