@rjsf/react-bootstrap 6.0.0-alpha.0

package/src/SelectWidget/SelectWidget.tsx

@@ -0,0 +1,91 @@
+import { ChangeEvent, FocusEvent } from 'react';
+import FormSelect from 'react-bootstrap/FormSelect';
+import {
+  ariaDescribedByIds,
+  FormContextType,
+  enumOptionsIndexForValue,
+  enumOptionsValueForIndex,
+  RJSFSchema,
+  StrictRJSFSchema,
+  WidgetProps,
+} from '@rjsf/utils';
+
+export default function SelectWidget<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>({
+  schema,
+  id,
+  options,
+  required,
+  disabled,
+  readonly,
+  value,
+  multiple,
+  autofocus,
+  onChange,
+  onBlur,
+  onFocus,
+  placeholder,
+  rawErrors = [],
+}: WidgetProps<T, S, F>) {
+  const { enumOptions, enumDisabled, emptyValue: optEmptyValue } = options;
+
+  const emptyValue = multiple ? [] : '';
+
+  function getValue(event: FocusEvent | ChangeEvent | any, multiple?: boolean) {
+    if (multiple) {
+      return [].slice
+        .call(event.target.options as any)
+        .filter((o: any) => o.selected)
+        .map((o: any) => o.value);
+    } else {
+      return event.target.value;
+    }
+  }
+  const selectedIndexes = enumOptionsIndexForValue<S>(value, enumOptions, multiple);
+  const showPlaceholderOption = !multiple && schema.default === undefined;
+
+  return (
+    <FormSelect
+      id={id}
+      name={id}
+      value={typeof selectedIndexes === 'undefined' ? emptyValue : selectedIndexes}
+      required={required}
+      multiple={multiple}
+      disabled={disabled || readonly}
+      autoFocus={autofocus}
+      className={rawErrors.length > 0 ? 'is-invalid' : ''}
+      onBlur={
+        onBlur &&
+        ((event: FocusEvent) => {
+          const newValue = getValue(event, multiple);
+          onBlur(id, enumOptionsValueForIndex<S>(newValue, enumOptions, optEmptyValue));
+        })
+      }
+      onFocus={
+        onFocus &&
+        ((event: FocusEvent) => {
+          const newValue = getValue(event, multiple);
+          onFocus(id, enumOptionsValueForIndex<S>(newValue, enumOptions, optEmptyValue));
+        })
+      }
+      onChange={(event: ChangeEvent) => {
+        const newValue = getValue(event, multiple);
+        onChange(enumOptionsValueForIndex<S>(newValue, enumOptions, optEmptyValue));
+      }}
+      aria-describedby={ariaDescribedByIds<T>(id)}
+    >
+      {showPlaceholderOption && <option value=''>{placeholder}</option>}
+      {(enumOptions as any).map(({ value, label }: any, i: number) => {
+        const disabled: any = Array.isArray(enumDisabled) && (enumDisabled as any).indexOf(value) != -1;
+        return (
+          <option key={i} id={label} value={String(i)} disabled={disabled}>
+            {label}
+          </option>
+        );
+      })}
+    </FormSelect>
+  );
+}

package/src/SelectWidget/index.ts

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

package/src/SubmitButton/SubmitButton.tsx

@@ -0,0 +1,18 @@
+import Button from 'react-bootstrap/Button';
+import { FormContextType, getSubmitButtonOptions, RJSFSchema, StrictRJSFSchema, SubmitButtonProps } from '@rjsf/utils';
+
+export default function SubmitButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: SubmitButtonProps<T, S, F>
+) {
+  const { submitText, norender, props: submitButtonProps } = getSubmitButtonOptions<T, S, F>(props.uiSchema);
+  if (norender) {
+    return null;
+  }
+  return (
+    <div>
+      <Button variant='primary' type='submit' {...submitButtonProps}>
+        {submitText}
+      </Button>
+    </div>
+  );
+}

package/src/SubmitButton/index.ts

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

package/src/Templates/Templates.ts

@@ -0,0 +1,45 @@
+import AddButton from '../AddButton';
+import ArrayFieldItemTemplate from '../ArrayFieldItemTemplate';
+import ArrayFieldTemplate from '../ArrayFieldTemplate';
+import BaseInputTemplate from '../BaseInputTemplate/BaseInputTemplate';
+import DescriptionField from '../DescriptionField';
+import ErrorList from '../ErrorList';
+import { CopyButton, MoveDownButton, MoveUpButton, RemoveButton } from '../IconButton';
+import FieldErrorTemplate from '../FieldErrorTemplate';
+import FieldHelpTemplate from '../FieldHelpTemplate';
+import FieldTemplate from '../FieldTemplate';
+import ObjectFieldTemplate from '../ObjectFieldTemplate';
+import SubmitButton from '../SubmitButton';
+import TitleField from '../TitleField';
+import WrapIfAdditionalTemplate from '../WrapIfAdditionalTemplate';
+import { FormContextType, RJSFSchema, StrictRJSFSchema, TemplatesType } from '@rjsf/utils';
+
+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,
+    FieldHelpTemplate,
+    FieldTemplate,
+    ObjectFieldTemplate,
+    TitleFieldTemplate: TitleField,
+    WrapIfAdditionalTemplate,
+  };
+}
+
+export default generateTemplates();

package/src/Templates/index.ts

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

package/src/TextareaWidget/TextareaWidget.tsx

@@ -0,0 +1,56 @@
+import { ChangeEvent, FocusEvent } from 'react';
+import { ariaDescribedByIds, FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
+import FormControl from 'react-bootstrap/FormControl';
+import InputGroup from 'react-bootstrap/InputGroup';
+
+type CustomWidgetProps<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any> = WidgetProps<
+  T,
+  S,
+  F
+> & {
+  options: any;
+};
+
+export default function TextareaWidget<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>({
+  id,
+  placeholder,
+  value,
+  required,
+  disabled,
+  autofocus,
+  readonly,
+  onBlur,
+  onFocus,
+  onChange,
+  options,
+}: CustomWidgetProps<T, S, F>) {
+  const _onChange = ({ target: { value } }: ChangeEvent<HTMLTextAreaElement>) =>
+    onChange(value === '' ? options.emptyValue : value);
+  const _onBlur = ({ target }: FocusEvent<HTMLTextAreaElement>) => onBlur(id, target && target.value);
+  const _onFocus = ({ target }: FocusEvent<HTMLTextAreaElement>) => onFocus(id, target && target.value);
+
+  return (
+    <InputGroup>
+      <FormControl
+        id={id}
+        name={id}
+        as='textarea'
+        placeholder={placeholder}
+        disabled={disabled}
+        readOnly={readonly}
+        value={value}
+        required={required}
+        autoFocus={autofocus}
+        rows={options.rows || 5}
+        onChange={_onChange}
+        onBlur={_onBlur}
+        onFocus={_onFocus}
+        aria-describedby={ariaDescribedByIds<T>(id)}
+      />
+    </InputGroup>
+  );
+}

package/src/TextareaWidget/index.ts

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

package/src/Theme/Theme.tsx

@@ -0,0 +1,18 @@
+import { ThemeProps } from '@rjsf/core';
+
+import { generateTemplates } from '../Templates';
+import { generateWidgets } from '../Widgets';
+import { FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+
+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,15 @@
+import { FormContextType, getUiOptions, RJSFSchema, StrictRJSFSchema, TitleFieldProps } from '@rjsf/utils';
+
+export default function TitleField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
+  id,
+  title,
+  uiSchema,
+}: TitleFieldProps<T, S, F>) {
+  const uiOptions = getUiOptions<T, S, F>(uiSchema);
+  return (
+    <div id={id} className='my-1'>
+      <h5>{uiOptions.title || title}</h5>
+      <hr className='border-0 bg-secondary' style={{ height: '1px' }} />
+    </div>
+  );
+}

package/src/TitleField/index.ts

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

package/src/Widgets/Widgets.ts

@@ -0,0 +1,24 @@
+import CheckboxWidget from '../CheckboxWidget/CheckboxWidget';
+import CheckboxesWidget from '../CheckboxesWidget/CheckboxesWidget';
+import RadioWidget from '../RadioWidget/RadioWidget';
+import RangeWidget from '../RangeWidget/RangeWidget';
+import SelectWidget from '../SelectWidget/SelectWidget';
+import TextareaWidget from '../TextareaWidget/TextareaWidget';
+import { FormContextType, RegistryWidgetsType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+
+export function generateWidgets<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(): RegistryWidgetsType<T, S, F> {
+  return {
+    CheckboxWidget,
+    CheckboxesWidget,
+    RadioWidget,
+    RangeWidget,
+    SelectWidget,
+    TextareaWidget,
+  };
+}
+
+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,79 @@
+import { FocusEvent } from 'react';
+import {
+  ADDITIONAL_PROPERTY_FLAG,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  TranslatableString,
+  WrapIfAdditionalTemplateProps,
+} from '@rjsf/utils';
+
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+import Form from 'react-bootstrap/Form';
+
+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,
+  uiSchema,
+  registry,
+}: WrapIfAdditionalTemplateProps<T, S, F>) {
+  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);
+  const keyId = `${id}-key`;
+
+  return (
+    <Row className={classNames} style={style} key={keyId}>
+      <Col xs={5}>
+        <Form.Group>
+          <Form.Label htmlFor={keyId}>{keyLabel}</Form.Label>
+          <Form.Control
+            required={required}
+            defaultValue={label}
+            disabled={disabled || readonly}
+            id={keyId}
+            name={keyId}
+            onBlur={!readonly ? handleBlur : undefined}
+            type='text'
+          />
+        </Form.Group>
+      </Col>
+      <Col xs={5}>{children}</Col>
+      <Col xs={2} className='py-4 d-grid gap-2'>
+        <RemoveButton
+          className='w-100'
+          disabled={disabled || readonly}
+          onClick={onDropPropertyClick(label)}
+          uiSchema={uiSchema}
+          registry={registry}
+        />
+      </Col>
+    </Row>
+  );
+}

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 Form from './Form/Form';
+
+export { default as Form, generateForm } from './Form';
+export { default as Templates, generateTemplates } from './Templates';
+export { default as Theme, generateTheme } from './Theme';
+export { default as Widgets, generateWidgets } from './Widgets';
+
+export default Form;

package/src/tsconfig.json

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