@rjsf/core 5.11.2 → 5.12.0

package/src/components/widgets/TextWidget.tsx

@@ -0,0 +1,13 @@
+import { getTemplate, FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
+
+/** The `TextWidget` component uses the `BaseInputTemplate`.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function TextWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: WidgetProps<T, S, F>
+) {
+  const { options, registry } = props;
+  const BaseInputTemplate = getTemplate<'BaseInputTemplate', T, S, F>('BaseInputTemplate', registry, options);
+  return <BaseInputTemplate {...props} />;
+}

package/src/components/widgets/TextareaWidget.tsx

@@ -0,0 +1,61 @@
+import { ChangeEvent, FocusEvent, useCallback } from 'react';
+import { ariaDescribedByIds, FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
+
+/** The `TextareaWidget` is a widget for rendering input fields as textarea.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+function TextareaWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
+  id,
+  options = {},
+  placeholder,
+  value,
+  required,
+  disabled,
+  readonly,
+  autofocus = false,
+  onChange,
+  onBlur,
+  onFocus,
+}: WidgetProps<T, S, F>) {
+  const handleChange = useCallback(
+    ({ target: { value } }: ChangeEvent<HTMLTextAreaElement>) => onChange(value === '' ? options.emptyValue : value),
+    [onChange, options.emptyValue]
+  );
+
+  const handleBlur = useCallback(
+    ({ target: { value } }: FocusEvent<HTMLTextAreaElement>) => onBlur(id, value),
+    [onBlur, id]
+  );
+
+  const handleFocus = useCallback(
+    ({ target: { value } }: FocusEvent<HTMLTextAreaElement>) => onFocus(id, value),
+    [id, onFocus]
+  );
+
+  return (
+    <textarea
+      id={id}
+      name={id}
+      className='form-control'
+      value={value ? value : ''}
+      placeholder={placeholder}
+      required={required}
+      disabled={disabled}
+      readOnly={readonly}
+      autoFocus={autofocus}
+      rows={options.rows}
+      onBlur={handleBlur}
+      onFocus={handleFocus}
+      onChange={handleChange}
+      aria-describedby={ariaDescribedByIds<T>(id)}
+    />
+  );
+}
+
+TextareaWidget.defaultProps = {
+  autofocus: false,
+  options: {},
+};
+
+export default TextareaWidget;

package/src/components/widgets/TimeWidget.tsx

@@ -0,0 +1,17 @@
+import { useCallback } from 'react';
+import { getTemplate, FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
+
+/** The `TimeWidget` component uses the `BaseInputTemplate` changing the type to `time` and transforms
+ * the value to undefined when it is falsy during the `onChange` handling.
+ *
+ * @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 { onChange, options, registry } = props;
+  const BaseInputTemplate = getTemplate<'BaseInputTemplate', T, S, F>('BaseInputTemplate', registry, options);
+  const handleChange = useCallback((value: any) => onChange(value ? `${value}:00` : undefined), [onChange]);
+
+  return <BaseInputTemplate type='time' {...props} onChange={handleChange} />;
+}

package/src/components/widgets/URLWidget.tsx

@@ -0,0 +1,13 @@
+import { getTemplate, FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
+
+/** The `URLWidget` component uses the `BaseInputTemplate` changing the type to `url`.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function URLWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: WidgetProps<T, S, F>
+) {
+  const { options, registry } = props;
+  const BaseInputTemplate = getTemplate<'BaseInputTemplate', T, S, F>('BaseInputTemplate', registry, options);
+  return <BaseInputTemplate type='url' {...props} />;
+}

package/src/components/widgets/UpDownWidget.tsx

@@ -0,0 +1,13 @@
+import { getTemplate, FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
+
+/** The `UpDownWidget` component uses the `BaseInputTemplate` changing the type to `number`.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function UpDownWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: WidgetProps<T, S, F>
+) {
+  const { options, registry } = props;
+  const BaseInputTemplate = getTemplate<'BaseInputTemplate', T, S, F>('BaseInputTemplate', registry, options);
+  return <BaseInputTemplate type='number' {...props} />;
+}

package/src/components/widgets/index.ts

@@ -0,0 +1,51 @@
+import { FormContextType, RegistryWidgetsType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+
+import AltDateWidget from './AltDateWidget';
+import AltDateTimeWidget from './AltDateTimeWidget';
+import CheckboxWidget from './CheckboxWidget';
+import CheckboxesWidget from './CheckboxesWidget';
+import ColorWidget from './ColorWidget';
+import DateWidget from './DateWidget';
+import DateTimeWidget from './DateTimeWidget';
+import EmailWidget from './EmailWidget';
+import FileWidget from './FileWidget';
+import HiddenWidget from './HiddenWidget';
+import PasswordWidget from './PasswordWidget';
+import RadioWidget from './RadioWidget';
+import RangeWidget from './RangeWidget';
+import SelectWidget from './SelectWidget';
+import TextareaWidget from './TextareaWidget';
+import TextWidget from './TextWidget';
+import TimeWidget from './TimeWidget';
+import URLWidget from './URLWidget';
+import UpDownWidget from './UpDownWidget';
+
+function widgets<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(): RegistryWidgetsType<T, S, F> {
+  return {
+    AltDateWidget,
+    AltDateTimeWidget,
+    CheckboxWidget,
+    CheckboxesWidget,
+    ColorWidget,
+    DateWidget,
+    DateTimeWidget,
+    EmailWidget,
+    FileWidget,
+    HiddenWidget,
+    PasswordWidget,
+    RadioWidget,
+    RangeWidget,
+    SelectWidget,
+    TextWidget,
+    TextareaWidget,
+    TimeWidget,
+    UpDownWidget,
+    URLWidget,
+  };
+}
+
+export default widgets;

package/src/getDefaultRegistry.ts

@@ -0,0 +1,24 @@
+import { englishStringTranslator, FormContextType, Registry, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+
+import fields from './components/fields';
+import templates from './components/templates';
+import widgets from './components/widgets';
+
+/** The default registry consists of all the fields, templates and widgets provided in the core implementation,
+ * plus an empty `rootSchema` and `formContext. We omit schemaUtils here because it cannot be defaulted without a
+ * rootSchema and validator. It will be added into the computed registry later in the Form.
+ */
+export default function getDefaultRegistry<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(): Omit<Registry<T, S, F>, 'schemaUtils'> {
+  return {
+    fields: fields<T, S, F>(),
+    templates: templates<T, S, F>(),
+    widgets: widgets<T, S, F>(),
+    rootSchema: {} as S,
+    formContext: {} as F,
+    translateString: englishStringTranslator,
+  };
+}

package/src/index.ts

@@ -0,0 +1,8 @@
+import Form, { FormProps, FormState, IChangeEvent } from './components/Form';
+import withTheme, { ThemeProps } from './withTheme';
+import getDefaultRegistry from './getDefaultRegistry';
+
+export type { FormProps, FormState, IChangeEvent, ThemeProps };
+
+export { withTheme, getDefaultRegistry };
+export default Form;

package/src/withTheme.tsx

@@ -0,0 +1,42 @@
+import { ComponentType, ForwardedRef, forwardRef } from 'react';
+import Form, { FormProps } from './components/Form';
+import { FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+
+/** The properties for the `withTheme` function, essentially a subset of properties from the `FormProps` that can be
+ * overridden while creating a theme
+ */
+export type ThemeProps<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any> = Pick<
+  FormProps<T, S, F>,
+  'fields' | 'templates' | 'widgets' | '_internalFormWrapper'
+>;
+
+/** A Higher-Order component that creates a wrapper around a `Form` with the overrides from the `WithThemeProps` */
+export default function withTheme<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  themeProps: ThemeProps<T, S, F>
+): ComponentType<FormProps<T, S, F>> {
+  return forwardRef(
+    ({ fields, widgets, templates, ...directProps }: FormProps<T, S, F>, ref: ForwardedRef<Form<T, S, F>>) => {
+      fields = { ...themeProps?.fields, ...fields };
+      widgets = { ...themeProps?.widgets, ...widgets };
+      templates = {
+        ...themeProps?.templates,
+        ...templates,
+        ButtonTemplates: {
+          ...themeProps?.templates?.ButtonTemplates,
+          ...templates?.ButtonTemplates,
+        },
+      };
+
+      return (
+        <Form<T, S, F>
+          {...themeProps}
+          {...directProps}
+          fields={fields}
+          widgets={widgets}
+          templates={templates}
+          ref={ref}
+        />
+      );
+    }
+  );
+}