@rjsf/primereact 6.0.0-beta.11

package/src/TextareaWidget/TextareaWidget.tsx

@@ -0,0 +1,41 @@
+import { ChangeEvent } from 'react';
+import { InputTextarea } from 'primereact/inputtextarea';
+import { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
+
+/** The `TextareaWidget` is a widget for rendering input fields as textarea using PrimeReact.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function TextareaWidget<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>(props: WidgetProps<T, S, F>) {
+  const { id, value, required, disabled, readonly, autofocus, onChange, onBlur, onFocus, options } = props;
+  const primeProps = (options.prime || {}) as object;
+
+  let rows = 5;
+  // noinspection SuspiciousTypeOfGuard
+  if (typeof options.rows === 'string' || typeof options.rows === 'number') {
+    rows = Number(options.rows);
+  }
+
+  const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
+    onChange(event.target.value === '' ? options.emptyValue : event.target.value);
+  };
+
+  return (
+    <InputTextarea
+      id={id}
+      {...primeProps}
+      value={value || ''}
+      required={required}
+      disabled={disabled || readonly}
+      autoFocus={autofocus}
+      rows={rows}
+      onChange={handleChange}
+      onBlur={onBlur && ((event) => onBlur(id, event.target.value))}
+      onFocus={onFocus && ((event) => onFocus(id, event.target.value))}
+    />
+  );
+}

package/src/TextareaWidget/index.ts

@@ -0,0 +1,2 @@
+export { default } from './TextareaWidget';
+export * from './TextareaWidget';

package/src/Theme/Theme.ts

@@ -0,0 +1,18 @@
+import { FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { ThemeProps } from '@rjsf/core';
+
+import { generateTemplates } from '../Templates';
+import { generateWidgets } from '../Widgets';
+
+export function generateTheme<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>(): ThemeProps<T, S, F> {
+  return {
+    templates: generateTemplates<T, S, F>(),
+    widgets: generateWidgets<T, S, F>(),
+  };
+}
+
+export default generateTheme();

package/src/Theme/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Theme';
+export * from './Theme';

package/src/TitleField/TitleField.tsx

@@ -0,0 +1,23 @@
+import { Divider } from 'primereact/divider';
+import { FormContextType, getUiOptions, RJSFSchema, StrictRJSFSchema, TitleFieldProps, titleId } 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,
+  title,
+  uiSchema,
+  required,
+}: TitleFieldProps<T, S, F>) {
+  const uiOptions = getUiOptions<T, S, F>(uiSchema);
+  return (
+    <div id={id}>
+      <h5 style={{ margin: 0, fontSize: id === titleId<T>('root') ? '1.5rem' : '1.2rem' }}>
+        {uiOptions.title || title} {required ? '*' : ''}
+      </h5>
+      <Divider pt={{ root: { style: { marginTop: '0.5rem' } } }} />
+    </div>
+  );
+}

package/src/TitleField/index.ts

@@ -0,0 +1,2 @@
+export { default } from './TitleField';
+export * from './TitleField';

package/src/UpDownWidget/UpDownWidget.tsx

@@ -0,0 +1,70 @@
+import {
+  ariaDescribedByIds,
+  FormContextType,
+  getInputProps,
+  RJSFSchema,
+  StrictRJSFSchema,
+  WidgetProps,
+} from '@rjsf/utils';
+import { InputNumber, InputNumberChangeEvent } from 'primereact/inputnumber';
+
+/** The `UpDownWidget` renders an input component for a 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 {
+    id,
+    placeholder,
+    value,
+    required,
+    readonly,
+    disabled,
+    onChange,
+    onChangeOverride,
+    onBlur,
+    onFocus,
+    autofocus,
+    options,
+    schema,
+    type,
+    rawErrors = [],
+  } = props;
+  const inputProps = getInputProps<T, S, F>(schema, type, options);
+  const { showButtons, buttonLayout, useGrouping, minFractionDigits, maxFractionDigits, locale, currency } = options;
+  const primeProps = (options.prime || {}) as object;
+
+  const _onChange = (event: InputNumberChangeEvent) => onChange(event.value === null ? options.emptyValue : value);
+  const _onBlur = () => onBlur && onBlur(id, value);
+  const _onFocus = () => onFocus && onFocus(id, value);
+
+  return (
+    <InputNumber
+      id={id}
+      name={id}
+      {...primeProps}
+      placeholder={placeholder}
+      step={isNaN(Number(inputProps.step)) ? 1 : Number(inputProps.step)}
+      required={required}
+      autoFocus={autofocus}
+      disabled={disabled || readonly}
+      style={buttonLayout === 'vertical' ? { width: '4em' } : {}}
+      showButtons={typeof showButtons === 'undefined' ? true : !!showButtons}
+      buttonLayout={(buttonLayout as any) ?? 'stacked'}
+      useGrouping={!!useGrouping}
+      minFractionDigits={minFractionDigits as number}
+      maxFractionDigits={maxFractionDigits as number}
+      locale={locale as string}
+      mode={currency ? 'currency' : 'decimal'}
+      currency={currency as string}
+      value={isNaN(Number(value)) ? null : Number(value)}
+      invalid={rawErrors.length > 0}
+      onChange={(onChangeOverride as any) || _onChange}
+      onBlur={_onBlur}
+      onFocus={_onFocus}
+      aria-describedby={ariaDescribedByIds<T>(id, !!schema.examples)}
+    />
+  );
+}

package/src/UpDownWidget/index.ts

@@ -0,0 +1,2 @@
+export { default } from './UpDownWidget';
+export * from './UpDownWidget';

package/src/Widgets/Widgets.tsx

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

package/src/Widgets/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Widgets';
+export * from './Widgets';

package/src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx

@@ -0,0 +1,83 @@
+import { FocusEvent } from 'react';
+import {
+  ADDITIONAL_PROPERTY_FLAG,
+  buttonId,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  TranslatableString,
+  WrapIfAdditionalTemplateProps,
+} from '@rjsf/utils';
+import { InputText } from 'primereact/inputtext';
+
+/** 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,
+>({
+  classNames,
+  style,
+  children,
+  disabled,
+  id,
+  label,
+  onDropPropertyClick,
+  onKeyChange,
+  readonly,
+  required,
+  schema,
+  registry,
+}: WrapIfAdditionalTemplateProps<T, S, F>) {
+  const { templates, translateString } = registry;
+  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);
+
+  return (
+    <div
+      className={classNames}
+      style={{ ...style, display: 'flex', alignItems: 'center', gap: '1rem' }}
+      key={`${id}-key`}
+    >
+      <div style={{ flex: 1 }}>
+        <label htmlFor={`${id}-key`} style={{ display: 'block', marginBottom: '0.5rem' }}>
+          {keyLabel}
+        </label>
+        <InputText
+          id={`${id}-key`}
+          name={`${id}-key`}
+          defaultValue={label}
+          disabled={disabled || readonly}
+          onBlur={!readonly ? handleBlur : undefined}
+          required={required}
+          style={{ width: '100%' }}
+        />
+      </div>
+      <div style={{ flex: 1 }}>{children}</div>
+      <div>
+        <RemoveButton
+          id={buttonId<T>(id, 'remove')}
+          className='rjsf-object-property-remove'
+          disabled={disabled || readonly}
+          onClick={onDropPropertyClick(label)}
+          registry={registry}
+        />
+      </div>
+    </div>
+  );
+}

package/src/WrapIfAdditionalTemplate/index.ts

@@ -0,0 +1,2 @@
+export { default } from './WrapIfAdditionalTemplate';
+export * from './WrapIfAdditionalTemplate';

package/src/index.ts

@@ -0,0 +1,8 @@
+import PrimeForm from './PrimeForm/PrimeForm';
+
+export { default as Templates, generateTemplates } from './Templates';
+export { default as Form, generateForm } from './PrimeForm';
+export { default as Theme, generateTheme } from './Theme';
+export { default as Widgets, generateWidgets } from './Widgets';
+
+export default PrimeForm;

package/src/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "include": [
+    "./"
+  ],
+  "compilerOptions": {
+    "rootDir": "./",
+    "outDir": "../lib",
+    "baseUrl": "../",
+    "jsx": "react-jsx",
+    "skipLibCheck": true
+  },
+  "references": [
+    {
+      "path": "../../core"
+    },
+    {
+      "path": "../../utils"
+    },
+    {
+      "path": "../../validator-ajv8"
+    }
+  ]
+}

package/src/util.tsx

@@ -0,0 +1,11 @@
+export function Label({ id, text, required }: { id: string; text?: string; required?: boolean }) {
+  if (!text) {
+    return null;
+  }
+
+  return (
+    <label htmlFor={id}>
+      {text} {required ? '*' : ''}
+    </label>
+  );
+}