Merge pull request #18 from littlecinemadigital/chakra-ui-options

Chakra UI options
rjsf-team · Jan 14, 2022 · e0bb201 · e0bb201
2 parents 03eef32 + 48353c1
commit e0bb201
Show file tree

Hide file tree

Showing 17 changed files with 140 additions and 70 deletions.
diff --git a/packages/chakra-ui/src/AltDateTimeWidget/AltDateTimeWidget.tsx b/packages/chakra-ui/src/AltDateTimeWidget/AltDateTimeWidget.tsx
@@ -5,7 +5,7 @@ import { TextWidgetProps } from "TextWidget";
 
 const AltDateTimeWidget = (props: TextWidgetProps) => {
   const { AltDateWidget } = props.registry.widgets;
-  return <AltDateWidget showTime {...props} />;
+  return <AltDateWidget {...props} showTime />;
 };
 
 AltDateTimeWidget.defaultProps = {

diff --git a/packages/chakra-ui/src/CheckboxWidget/CheckboxWidget.tsx b/packages/chakra-ui/src/CheckboxWidget/CheckboxWidget.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { Checkbox, FormControl, Text } from "@chakra-ui/react";
 import { WidgetProps } from "@rjsf/core";
+import { getChakra } from "../utils";
 
 const CheckboxWidget = (props: WidgetProps) => {
   const {
@@ -13,7 +14,10 @@ const CheckboxWidget = (props: WidgetProps) => {
     onFocus,
     required,
     label,
+    uiSchema,
   } = props;
+  const chakraProps = getChakra({ uiSchema });
+
   const _onChange = ({
     target: { checked },
   }: React.ChangeEvent<HTMLInputElement>) => onChange(checked);
@@ -25,7 +29,7 @@ const CheckboxWidget = (props: WidgetProps) => {
   }: React.FocusEvent<HTMLInputElement | any>) => onFocus(id, value);
 
   return (
-    <FormControl isRequired={required}>
+    <FormControl {...chakraProps} isRequired={required}>
       <Checkbox
         id={id}
         isChecked={typeof value === "undefined" ? false : value}

diff --git a/packages/chakra-ui/src/CheckboxesWidget/CheckboxesWidget.tsx b/packages/chakra-ui/src/CheckboxesWidget/CheckboxesWidget.tsx
@@ -8,6 +8,7 @@ import {
   Stack,
 } from "@chakra-ui/react";
 import { WidgetProps } from "@rjsf/core";
+import { getChakra } from "../utils";
 
 // const selectValue = (value, selected, all) => {
 //   const at = all.indexOf(value);
@@ -33,9 +34,11 @@ const CheckboxesWidget = ({
   onFocus,
   required,
   label,
+  uiSchema,
+  schema,
 }: WidgetProps) => {
   const { enumOptions, enumDisabled } = options;
-
+  const chakraProps = getChakra({ uiSchema });
   // const _onChange = option => ({ target: { checked } }) => {
   //   const all = enumOptions.map(({ value }) => value)
 
@@ -52,10 +55,12 @@ const CheckboxesWidget = ({
   const _onFocus = ({
     target: { value },
   }: React.FocusEvent<HTMLInputElement | any>) => onFocus(id, value);
+
   const row = options ? options.inline : false;
+
   return (
-    <FormControl isRequired={required}>
-      <FormLabel htmlFor={id}>{label}</FormLabel>
+    <FormControl {...chakraProps} isRequired={required}>
+      <FormLabel htmlFor={id}>{label || schema.title}</FormLabel>
       <CheckboxGroup onChange={option => onChange(option)}>
         <Stack direction={row ? "row" : "column"}>
           {(enumOptions as any).map(

diff --git a/packages/chakra-ui/src/DateTimeWidget/DateTimeWidget.tsx b/packages/chakra-ui/src/DateTimeWidget/DateTimeWidget.tsx
@@ -15,9 +15,6 @@ const DateTimeWidget = (props: TextWidgetProps) => {
   return (
     <TextWidget
       type="datetime-local"
-      InputLabelProps={{
-        shrink: true,
-      }}
       {...props}
       value={value}
       onChange={onChange}

diff --git a/packages/chakra-ui/src/DateWidget/DateWidget.tsx b/packages/chakra-ui/src/DateWidget/DateWidget.tsx
@@ -4,15 +4,7 @@ import { TextWidgetProps } from "../TextWidget";
 const DateWidget = (props: TextWidgetProps) => {
   const { registry } = props;
   const { TextWidget } = registry.widgets;
-  return (
-    <TextWidget
-      type="date"
-      InputLabelProps={{
-        shrink: true,
-      }}
-      {...props}
-    />
-  );
+  return <TextWidget {...props} type="date" />;
 };
 
 export default DateWidget;
diff --git a/packages/chakra-ui/src/EmailWidget/EmailWidget.tsx b/packages/chakra-ui/src/EmailWidget/EmailWidget.tsx
@@ -4,7 +4,7 @@ import { TextWidgetProps } from "../TextWidget";
 const EmailWidget = (props: TextWidgetProps) => {
   const { registry } = props;
   const { TextWidget } = registry.widgets;
-  return <TextWidget type="email" {...props} />;
+  return <TextWidget {...props} type="email" />;
 };
 
 export default EmailWidget;
diff --git a/packages/chakra-ui/src/ErrorList/ErrorList.tsx b/packages/chakra-ui/src/ErrorList/ErrorList.tsx
@@ -10,21 +10,28 @@ import {
 } from "@chakra-ui/react";
 import { WarningIcon } from "@chakra-ui/icons";
 
-const ErrorList = ({ errors }: ErrorListProps) => (
-  <Alert flexDirection="column" alignItems="flex-start" gap={3} status="error">
-    <AlertTitle mb={2} as={Heading}>
-      Errors
-    </AlertTitle>
+const ErrorList = ({ errors }: ErrorListProps) => {
+  return (
+    <Alert
+      flexDirection="column"
+      alignItems="flex-start"
+      gap={3}
+      status="error"
+    >
+      <AlertTitle mb={2} as={Heading}>
+        Errors
+      </AlertTitle>
 
-    <List>
-      {errors.map((error, i) => (
-        <ListItem key={i}>
-          <ListIcon as={WarningIcon} color="red.500" />
-          {error.stack}
-        </ListItem>
-      ))}
-    </List>
-  </Alert>
-);
+      <List>
+        {errors.map((error, i) => (
+          <ListItem key={i}>
+            <ListIcon as={WarningIcon} color="red.500" />
+            {error.stack}
+          </ListItem>
+        ))}
+      </List>
+    </Alert>
+  );
+};
 
 export default ErrorList;
diff --git a/packages/chakra-ui/src/RadioWidget/RadioWidget.tsx b/packages/chakra-ui/src/RadioWidget/RadioWidget.tsx
@@ -9,6 +9,7 @@ import {
 } from "@chakra-ui/react";
 
 import { WidgetProps } from "@rjsf/core";
+import { getChakra } from "../utils";
 
 const RadioWidget = ({
   id,
@@ -22,8 +23,10 @@ const RadioWidget = ({
   onChange,
   onBlur,
   onFocus,
+  uiSchema,
 }: WidgetProps) => {
   const { enumOptions, enumDisabled } = options;
+  const chakraProps = getChakra({ uiSchema });
 
   const _onBlur = ({ target: { value } }: React.FocusEvent<HTMLInputElement>) =>
     onBlur(id, value);
@@ -35,6 +38,7 @@ const RadioWidget = ({
 
   return (
     <FormControl
+      {...chakraProps}
       isDisabled={disabled || readonly}
       isRequired={required}
       isReadOnly={readonly}

diff --git a/packages/chakra-ui/src/RangeWidget/RangeWidget.tsx b/packages/chakra-ui/src/RangeWidget/RangeWidget.tsx
@@ -1,6 +1,4 @@
 import React from "react";
-import { utils } from "@rjsf/core";
-import { WidgetProps } from "@rjsf/core";
 import {
   FormControl,
   FormLabel,
@@ -9,8 +7,10 @@ import {
   SliderThumb,
   SliderTrack,
 } from "@chakra-ui/react";
+import { utils, WidgetProps } from "@rjsf/core";
+import { getChakra } from "../utils";
 
-const { rangeSpec } = utils;
+const { rangeSpec, getDisplayLabel } = utils;
 
 const RangeWidget = ({
   value,
@@ -20,11 +20,17 @@ const RangeWidget = ({
   onFocus,
   options,
   schema,
+  uiSchema,
   onChange,
   label,
   id,
 }: WidgetProps) => {
-  let sliderProps = { value, label, id, ...rangeSpec(schema) };
+  const chakraProps = getChakra({ uiSchema });
+
+  let sliderWidgetProps = { value, label, id, ...rangeSpec(schema) };
+
+  const displayLabel =
+    getDisplayLabel(schema, uiSchema) && (!!label || !!schema.title);
 
   const _onChange = (value: undefined | number) =>
     onChange(value === undefined ? options.emptyValue : value);
@@ -35,10 +41,12 @@ const RangeWidget = ({
   }: React.FocusEvent<HTMLInputElement>) => onFocus(id, value);
 
   return (
-    <FormControl>
-      <FormLabel htmlFor={id}>{label}</FormLabel>
+    <FormControl {...chakraProps}>
+      {displayLabel ? (
+        <FormLabel htmlFor={id}>{label || schema.title}</FormLabel>
+      ) : null}
       <Slider
-        {...sliderProps}
+        {...sliderWidgetProps}
         id={id}
         isDisabled={disabled || readonly}
         onChange={_onChange}

diff --git a/packages/chakra-ui/src/SelectWidget/SelectWidget.tsx b/packages/chakra-ui/src/SelectWidget/SelectWidget.tsx
@@ -1,16 +1,14 @@
 import React from "react";
-
 import {
   FormControl,
   FormLabel,
   FormErrorMessage,
   Select,
 } from "@chakra-ui/react";
-
 import { WidgetProps } from "@rjsf/core";
 import { utils } from "@rjsf/core";
-
-const { asNumber, guessType } = utils;
+import { getChakra } from "../utils";
+const { asNumber, guessType, getDisplayLabel } = utils;
 
 const nums = new Set(["number", "integer"]);
 
@@ -60,11 +58,16 @@ const SelectWidget = ({
   onBlur,
   onFocus,
   rawErrors = [],
+  uiSchema,
 }: WidgetProps) => {
   const { enumOptions, enumDisabled } = options;
+  const chakraProps = getChakra({ uiSchema });
 
   const emptyValue = multiple ? [] : "";
 
+  const displayLabel =
+    getDisplayLabel(schema, uiSchema) && (!!label || !!schema.title);
+
   const _onChange = ({
     target: { value },
   }: React.ChangeEvent<{ name?: string; value: unknown }>) =>
@@ -77,13 +80,17 @@ const SelectWidget = ({
     target: { value },
   }: React.FocusEvent<HTMLSelectElement>) =>
     onFocus(id, processValue(schema, value));
+
   return (
     <FormControl
+      {...chakraProps}
       isRequired={required}
       isDisabled={disabled}
       isReadOnly={readonly}
     >
-      <FormLabel htmlFor={id}>{label || schema.title}</FormLabel>
+      {displayLabel ? (
+        <FormLabel htmlFor={id}>{label || schema.title}</FormLabel>
+      ) : null}
       <Select
         id={id}
         placeholder={placeholder}

diff --git a/packages/chakra-ui/src/TextWidget/TextWidget.tsx b/packages/chakra-ui/src/TextWidget/TextWidget.tsx
@@ -1,8 +1,7 @@
 import * as React from "react";
-
 import { FormControl, FormLabel, Input } from "@chakra-ui/react";
-
 import { WidgetProps, utils } from "@rjsf/core";
+import { getChakra } from "../utils";
 
 const { getDisplayLabel } = utils;
 
@@ -27,6 +26,7 @@ const TextWidget = (props: TextWidgetProps) => {
     placeholder,
     disabled,
   } = props;
+  const chakraProps = getChakra({ uiSchema });
 
   const _onChange = ({
     target: { value },
@@ -43,6 +43,7 @@ const TextWidget = (props: TextWidgetProps) => {
 
   return (
     <FormControl
+      {...chakraProps}
       isDisabled={disabled || readonly}
       isRequired={required}
       isReadOnly={readonly}

diff --git a/packages/chakra-ui/src/TextareaWidget/TextareaWidget.tsx b/packages/chakra-ui/src/TextareaWidget/TextareaWidget.tsx
@@ -1,6 +1,9 @@
-import { FormControl, FormLabel, Textarea } from "@chakra-ui/react";
-import { WidgetProps } from "@rjsf/core";
 import React from "react";
+import { FormControl, FormLabel, Textarea } from "@chakra-ui/react";
+import { WidgetProps, utils } from "@rjsf/core";
+import { getChakra } from "../utils";
+
+const { getDisplayLabel } = utils;
 
 const TextareaWidget = ({
   id,
@@ -14,7 +17,15 @@ const TextareaWidget = ({
   onFocus,
   onChange,
   options,
+  schema,
+  uiSchema,
+  required,
+  rawErrors,
 }: WidgetProps) => {
+  const chakraProps = getChakra({ uiSchema });
+  const displayLabel =
+    getDisplayLabel(schema, uiSchema) && (!!label || !!schema.title);
+
   const _onChange = ({
     target: { value },
   }: React.ChangeEvent<HTMLTextAreaElement>) =>
@@ -27,14 +38,20 @@ const TextareaWidget = ({
   }: React.FocusEvent<HTMLTextAreaElement>) => onFocus(id, value);
 
   return (
-    <FormControl>
-      <FormLabel htmlFor={id}>{label}</FormLabel>
+    <FormControl
+      {...chakraProps}
+      isDisabled={disabled || readonly}
+      isRequired={required}
+      isReadOnly={readonly}
+      isInvalid={rawErrors && rawErrors.length > 0}
+    >
+      {displayLabel ? (
+        <FormLabel htmlFor={id}>{label || schema.title}</FormLabel>
+      ) : null}
       <Textarea
         id={id}
         value={value}
         placeholder={placeholder}
-        isDisabled={disabled}
-        isReadOnly={readonly}
         autoFocus={autofocus}
         onChange={_onChange}
         onBlur={_onBlur}

diff --git a/packages/chakra-ui/src/Theme/Theme.tsx b/packages/chakra-ui/src/Theme/Theme.tsx
@@ -8,9 +8,8 @@ import Fields from "../Fields";
 import FieldTemplate from "../FieldTemplate";
 import ObjectFieldTemplate from "../ObjectFieldTemplate";
 import Widgets from "../Widgets";
-
-import { ThemeProps } from "@rjsf/core";
 import { utils } from "@rjsf/core";
+import { ThemeProps } from "../utils";
 
 const { getDefaultRegistry } = utils;
 

diff --git a/packages/chakra-ui/src/index.tsx b/packages/chakra-ui/src/index.tsx
@@ -8,4 +8,7 @@ export { default as Theme } from "./Theme";
 export { default as Widgets } from "./Widgets";
 export { __createChakraFrameProvider } from "./ChakraFrameProvider";
 
+export type { ChakraUiSchema as UiSchema , ThemeProps} from "./utils"
+
+
 export default Form;