Merge pull request #5 from littlecinemadigital/dates-textarea-url

Add Date, Date Time, URL Widgets, Text Area Updates

Author: jzander

packages/chakra-ui/src/DateTimeWidget/DateTimeWidget.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { utils } from "@rjsf/core";
+import { TextWidgetProps } from "../TextWidget";
+
+const { localToUTC, utcToLocal } = utils;
+
+const DateTimeWidget = (props: TextWidgetProps) => {
+  const { registry } = props;
+  const { TextWidget } = registry.widgets;
+  const value = utcToLocal(props.value);
+  const onChange = (value: any) => {
+    props.onChange(localToUTC(value));
+  };
+
+  return (
+    <TextWidget
+      type="datetime-local"
+      InputLabelProps={{
+        shrink: true,
+      }}
+      {...props}
+      value={value}
+      onChange={onChange}
+    />
+  );
+};
+
+export default DateTimeWidget;

packages/chakra-ui/src/DateTimeWidget/index.ts

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

packages/chakra-ui/src/DateWidget/DateWidget.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { TextWidgetProps } from "../TextWidget";
+
+const DateWidget = (props: TextWidgetProps) => {
+  const { registry } = props;
+  const { TextWidget } = registry.widgets;
+  return (
+    <TextWidget
+      type="date"
+      InputLabelProps={{
+        shrink: true,
+      }}
+      {...props}
+    />
+  );
+};
+
+export default DateWidget;

packages/chakra-ui/src/DateWidget/index.ts

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

packages/chakra-ui/src/RangeWidget/RangeWidget.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import { utils } from "@rjsf/core";
+import { WidgetProps } from "@rjsf/core";
+import { FormControl, FormLabel, Slider, SliderFilledTrack, SliderThumb, SliderTrack } from "@chakra-ui/react";
+
+const { rangeSpec } = utils;
+
+const RangeWidget = ({
+                       value,
+                       readonly,
+                       disabled,
+                       onBlur,
+                       onFocus,
+                       options,
+                       schema,
+                       onChange,
+                       label,
+                       id,
+                     }: WidgetProps) => {
+  let sliderProps = { value, label, id, ...rangeSpec(schema) };
+
+  const _onChange = (value: undefined | number) =>
+    onChange(value === undefined ? options.emptyValue : value);
+  const _onBlur = ({ target: { value } }: React.FocusEvent<HTMLInputElement>) =>
+    onBlur(id, value);
+  const _onFocus = ({
+                      target: { value },
+                    }: React.FocusEvent<HTMLInputElement>) => onFocus(id, value);
+
+  return (
+    <FormControl>
+      <FormLabel htmlFor={id}>{label}</FormLabel>
+      <Slider
+        {...sliderProps}
+        id={id}
+        isDisabled={disabled || readonly}
+        onChange={_onChange}
+        onBlur={_onBlur}
+        onFocus={_onFocus}
+      >
+        <SliderTrack />
+        <SliderFilledTrack />
+        <SliderThumb />
+      </Slider>
+    </FormControl>
+  );
+};
+
+export default RangeWidget;

packages/chakra-ui/src/RangeWidget/index.ts

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

packages/chakra-ui/src/TextareaWidget/TextareaWidget.tsx

@@ -1,11 +1,12 @@
-import { Textarea } from "@chakra-ui/react";
+import { FormControl, FormLabel, Textarea } from "@chakra-ui/react";
 import { WidgetProps } from "@rjsf/core";
 import React from "react";
 
 const TextareaWidget = ({
                           id,
                           placeholder,
                           value,
+                          label,
                           disabled,
                           autofocus,
                           readonly,
@@ -19,17 +20,20 @@ const TextareaWidget = ({
   const _onFocus = ({ target: { value } }: React.FocusEvent<HTMLTextAreaElement>) => onFocus(id, value);
 
   return (
-    <Textarea
-      id={id}
-      value={value}
-      placeholder={placeholder}
-      isDisabled={disabled}
-      isReadOnly={readonly}
-      autoFocus={autofocus}
-      onChange={_onChange}
-      onBlur={_onBlur}
-      onFocus={_onFocus}
-    />
+    <FormControl>
+      <FormLabel htmlFor={id}>{label}</FormLabel>
+      <Textarea
+        id={id}
+        value={value}
+        placeholder={placeholder}
+        isDisabled={disabled}
+        isReadOnly={readonly}
+        autoFocus={autofocus}
+        onChange={_onChange}
+        onBlur={_onBlur}
+        onFocus={_onFocus}
+      />
+    </FormControl>
   );
 };
 

packages/chakra-ui/src/URLWidget/URLWidget.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { TextWidgetProps } from "../TextWidget";
+
+const URLWidget = (props: TextWidgetProps) => {
+  const { registry } = props;
+  const { TextWidget } = registry.widgets;
+  return <TextWidget type="url" {...props} />;
+};
+
+export default URLWidget;

packages/chakra-ui/src/URLWidget/index.ts

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

packages/chakra-ui/src/Widgets/Widgets.ts

@@ -2,20 +2,24 @@
 import CheckboxesWidget from "../CheckboxesWidget/CheckboxesWidget";
 import CheckboxWidget from "../CheckboxWidget/CheckboxWidget";
 // import RadioWidget from '../RadioWidget/RadioWidget'
-// import RangeWidget from '../RangeWidget/RangeWidget'
+import RangeWidget from '../RangeWidget/RangeWidget'
 // import SelectWidget from '../SelectWidget/SelectWidget'
 import TextareaWidget from "../TextareaWidget/TextareaWidget";
 import UpDownWidget from "../UpDownWidget/UpDownWidget";
 import TextWidget from "../TextWidget/TextWidget";
 import PasswordWidget from "../PasswordWidget/PasswordWidget";
+import DateWidget from "../DateWidget/DateWidget";
+import DateTimeWidget from "../DateTimeWidget/DateTimeWidget";
 
 const widgets = {
   // BaseInput,
   CheckboxWidget,
   CheckboxesWidget,
+  DateWidget,
+  DateTimeWidget,
   PasswordWidget,
   // radio: RadioWidget,
-  // RangeWidget,
+  RangeWidget,
   // select: SelectWidget,
   TextareaWidget,
   TextWidget,