Merge pull request #29 from Exabyte-io/feature/SOF-6794

SOF-6794: add more rjsf widgets

package.json

@@ -48,6 +48,7 @@
         "@codemirror/legacy-modes": "^6.3.1",
         "@codemirror/lint": "^6.2.0",
         "@mui/x-date-pickers": "6.11.1",
+        "@rjsf/mui": "^5.12.1",
         "@rjsf/utils": "^5.1.0",
         "@toast-ui/editor": "^3.2.2",
         "@toast-ui/editor-plugin-code-syntax-highlight": "^3.1.0",

src/other/rjsf/widgets/InputWithInfoPopover.tsx

@@ -0,0 +1,32 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import Typography from "@mui/material/Typography";
+import { Templates } from "@rjsf/mui";
+import React from "react";
+
+import InfoPopover from "../../../mui/components/popover/info-popover/InfoPopover";
+import { PositionInfoPopover } from "./PositionInfoPopover.styled";
+import { WidgetWithInfoPopoverProps } from "./types";
+
+const { BaseInputTemplate } = Templates;
+
+export default function InputWithInfoPopover(props: WidgetWithInfoPopoverProps) {
+    const { uiSchema = {} } = props;
+    const infoPopover = uiSchema["ui:options"] && uiSchema["ui:options"].infoPopover;
+
+    if (!BaseInputTemplate) return null;
+
+    return (
+        <>
+            <BaseInputTemplate {...props} size="small" />
+            <PositionInfoPopover>
+                <InfoPopover title={infoPopover?.title} iconSize="small">
+                    <Typography
+                        variant="body2"
+                        pb={2}
+                        dangerouslySetInnerHTML={{ __html: infoPopover?.content || "" }}
+                    />
+                </InfoPopover>
+            </PositionInfoPopover>
+        </>
+    );
+}

src/other/rjsf/widgets/PositionInfoPopover.styled.ts

@@ -0,0 +1,10 @@
+import Box from "@mui/material/Box";
+import { styled } from "@mui/material/styles";
+
+export const PositionInfoPopover = styled(Box)(({ theme }) => ({
+    backgroundColor: theme.palette.background.paper,
+    position: "absolute",
+    borderRadius: "50%",
+    right: -14,
+    top: -14,
+}));

src/other/rjsf/widgets/SelectWithInfoPopover.tsx

@@ -0,0 +1,30 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import Typography from "@mui/material/Typography";
+import { Widgets } from "@rjsf/mui";
+import React from "react";
+
+import InfoPopover from "../../../mui/components/popover/info-popover/InfoPopover";
+import { PositionInfoPopover } from "./PositionInfoPopover.styled";
+import { WidgetWithInfoPopoverProps } from "./types";
+
+const { SelectWidget } = Widgets;
+
+export default function SelectWithInfoPopover(props: WidgetWithInfoPopoverProps) {
+    const { uiSchema = {} } = props;
+    const infoPopover = uiSchema["ui:options"] && uiSchema["ui:options"].infoPopover;
+
+    return (
+        <>
+            <SelectWidget {...props} size="small" />
+            <PositionInfoPopover>
+                <InfoPopover title={infoPopover?.title} iconSize="small">
+                    <Typography
+                        variant="body2"
+                        pb={2}
+                        dangerouslySetInnerHTML={{ __html: infoPopover?.content || "" }}
+                    />
+                </InfoPopover>
+            </PositionInfoPopover>
+        </>
+    );
+}

src/other/rjsf/widgets/TimePicker.tsx

@@ -0,0 +1,45 @@
+import Typography from "@mui/material/Typography";
+import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment";
+import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
+import { TimePicker as MuiTimePicker } from "@mui/x-date-pickers/TimePicker";
+import moment from "moment";
+import React from "react";
+
+import InfoPopover from "../../../mui/components/popover/info-popover/InfoPopover";
+import { PositionInfoPopover } from "./PositionInfoPopover.styled";
+import { WidgetWithInfoPopoverProps } from "./types";
+
+export default function TimePicker(props: WidgetWithInfoPopoverProps) {
+    const { onChange, value, label } = props;
+    const { uiSchema = {}, options } = props;
+    const infoPopover = uiSchema["ui:options"] && uiSchema["ui:options"].infoPopover;
+
+    return (
+        <LocalizationProvider dateAdapter={AdapterMoment}>
+            <MuiTimePicker
+                onChange={(timeObj) => onChange(timeObj?.format("HH:mm:ss"))}
+                views={["hours", "minutes", "seconds"]}
+                format="HH:mm:ss"
+                ampm={false}
+                value={moment("1970-01-01 " + value)}
+                label={label}
+                disabled={options.disabled}
+                slotProps={{
+                    textField: {
+                        size: "small",
+                        className: "timePickerInput",
+                    },
+                }}
+            />
+            <PositionInfoPopover>
+                <InfoPopover title={infoPopover?.title} iconSize="small">
+                    <Typography
+                        variant="body2"
+                        pb={2}
+                        dangerouslySetInnerHTML={{ __html: infoPopover?.content || "" }}
+                    />
+                </InfoPopover>
+            </PositionInfoPopover>
+        </LocalizationProvider>
+    );
+}

src/other/rjsf/widgets/types.ts

@@ -0,0 +1,13 @@
+import { WidgetProps } from "@rjsf/utils";
+
+export type InfoPopoverOptions = { title: string; content: string };
+
+type InfoPopoverUISchema = {
+    "ui:options"?: {
+        infoPopover?: InfoPopoverOptions;
+    };
+};
+
+export type WidgetWithInfoPopoverProps = WidgetProps & {
+    uiSchema?: InfoPopoverUISchema;
+};