Refactor BasicEntityCheckBoxField component and add BasicEntityRating…

…Field

dist/BasicEntityCheckBoxField.d.ts

@@ -1,2 +1,2 @@
-declare function BasicEntityCheckBoxField(props: any): import("react/jsx-runtime").JSX.Element;
-export { BasicEntityCheckBoxField };
+declare function BasicEntityCheckboxField(props: any): import("react/jsx-runtime").JSX.Element;
+export { BasicEntityCheckboxField };

dist/BasicEntityRatingField.d.ts

@@ -0,0 +1,2 @@
+declare function BasicEntityRatingField(props: any): import("react/jsx-runtime").JSX.Element;
+export { BasicEntityRatingField };

src/lib/BasicEntityCheckBoxField.tsx

@@ -13,25 +13,25 @@ import { Default, Exact, Gubu, Skip } from 'gubu'
 const CMPNAME = 'BasicEntitySliderField'
 
 const { Open } = Gubu
-const BasicEntityCheckBoxFieldSpecShape = Gubu(Open({
+const BasicEntityCheckboxFieldSpecShape = Gubu(Open({
   field: Open({
     id: String,
     name: String,
     kind: Skip(String),
     label: Default('', String),
     ux: Open({
-      kind: Exact('CheckBox'),
+      kind: Exact('Checkbox'),
       edit: Default(true),
       props: Open({}),
     })
   }),
 }), {name: CMPNAME})
 
-function BasicEntityCheckBoxField(props: any) {
+function BasicEntityCheckboxField(props: any) {
   const { spec } = props;
 
-  const basicEntityCheckBoxField: Spec = BasicEntityCheckBoxFieldSpecShape(spec)
-  const { control, field, getValues } = basicEntityCheckBoxField
+  const basicEntityCheckboxField: Spec = BasicEntityCheckboxFieldSpecShape(spec)
+  const { control, field, getValues } = basicEntityCheckboxField
   const val = getValues(field.name)
 
   return (
@@ -63,4 +63,4 @@ function BasicEntityCheckBoxField(props: any) {
   );
 }
 
-export { BasicEntityCheckBoxField };
+export { BasicEntityCheckboxField };

src/lib/BasicEntityField.tsx

@@ -1,64 +1,76 @@
-import React, { useEffect, forwardRef } from 'react'
-
-import {
-  TextField,
-} from '@mui/material'
-
-
-import type { Spec } from './basic-types'
-
-import { Default, Exact, Gubu, Skip } from 'gubu'
-import { BasicEntityCheckBoxField } from './BasicEntityCheckBoxField'
-import { BasicEntityAutocompleteField } from './BasicEntityAutocompleteField'
-import { BasicEntitySliderField } from './BasicEntitySliderField'
-import { BasicEntityRadioGroupField } from './BasicEntityRadioGroupField'
-import { BasicEntityTextBoxField } from './BasicEntityTextBoxField'
-import { BasicEntityTextField } from './BasicEntityTextField'
-import { BasicEntityDateField } from './BasicEntityDateField'
-import { BasicEntityTimeField } from './BasicEntityTimeField'
-import { BasicEntityDateTimeField } from './BasicEntityDateTimeField'
-
-const CMPNAME = 'BasicEntityField'
-
-const { Open } = Gubu
-const BasicEntityFieldSpecShape = Gubu(Open({
-  field: Open({
-    id: String,
-    name: String,
-    kind: Skip(String),
-    label: Default('', String),
-    ux: Open({
-      kind: Exact('Text', 'TextBox', 'Date', 'DateTime', 'Time', 'CheckBox', 'Autocomplete', 'Slider', 'RadioGroup'),
-      edit: Default(true),
-      rows: Default(3),
-      props: Open({}),
-    })
+import React, { useEffect, forwardRef } from "react";
+
+import { TextField } from "@mui/material";
+
+import type { Spec } from "./basic-types";
+
+import { Default, Exact, Gubu, Skip } from "gubu";
+import { BasicEntityCheckboxField } from "./BasicEntityCheckboxField";
+import { BasicEntityAutocompleteField } from "./BasicEntityAutocompleteField";
+import { BasicEntitySliderField } from "./BasicEntitySliderField";
+import { BasicEntityRadioGroupField } from "./BasicEntityRadioGroupField";
+import { BasicEntityTextBoxField } from "./BasicEntityTextBoxField";
+import { BasicEntityTextField } from "./BasicEntityTextField";
+import { BasicEntityDateField } from "./BasicEntityDateField";
+import { BasicEntityTimeField } from "./BasicEntityTimeField";
+import { BasicEntityDateTimeField } from "./BasicEntityDateTimeField";
+import { BasicEntityRatingField } from "./BasicEntityRatingField";
+
+const CMPNAME = "BasicEntityField";
+
+const { Open } = Gubu;
+const BasicEntityFieldSpecShape = Gubu(
+  Open({
+    field: Open({
+      id: String,
+      name: String,
+      kind: Skip(String),
+      label: Default("", String),
+      ux: Open({
+        kind: Exact(
+          "Text",
+          "TextBox",
+          "Date",
+          "DateTime",
+          "Time",
+          "Checkbox",
+          "Autocomplete",
+          "Slider",
+          "RadioGroup",
+          "Rating"
+        ),
+        edit: Default(true),
+        rows: Default(3),
+        props: Open({}),
+      }),
+    }),
   }),
-}), {name: CMPNAME})
+  { name: CMPNAME }
+);
 
 const fieldMap: any = {
   Text: BasicEntityTextField,
   TextBox: BasicEntityTextBoxField,
   Date: BasicEntityDateField,
   DateTime: BasicEntityDateTimeField,
   Time: BasicEntityTimeField,
-  CheckBox: BasicEntityCheckBoxField,
+  Checkbox: BasicEntityCheckboxField,
   Autocomplete: BasicEntityAutocompleteField,
   Slider: BasicEntitySliderField,
-  RadioGroup: BasicEntityRadioGroupField
-}
-
+  RadioGroup: BasicEntityRadioGroupField,
+  Rating: BasicEntityRatingField,
+};
 
-function BasicEntityField (props: any) {
-  const { ctx, spec } = props
+function BasicEntityField(props: any) {
+  const { ctx, spec } = props;
 
-  const basicEntityFieldSpec: Spec = BasicEntityFieldSpecShape(spec)
-  const field: any = basicEntityFieldSpec.field
-  const Field: any = fieldMap[field.ux.kind]
+  const basicEntityFieldSpec: Spec = BasicEntityFieldSpecShape(spec);
+  const field: any = basicEntityFieldSpec.field;
+  const Field: any = fieldMap[field.ux.kind];
 
   // console.log('BEF ERR', spec)
-  
-  return <Field ctx={ctx} spec={spec} />
+
+  return <Field ctx={ctx} spec={spec} />;
 }
 
 /*
@@ -105,9 +117,6 @@ function BasicEntityDateTimeField (props: any) {
 }
 */
 
-
-
-
 /* Notes
 
 https://www.react-hook-form.com/
@@ -119,8 +128,4 @@ https://mui.com/material-ui/react-grid/
 
  */
 
-
-
-export {
-  BasicEntityField
-}
+export { BasicEntityField };

src/lib/BasicEntityRatingField.tsx

@@ -0,0 +1,67 @@
+import React, { useEffect, forwardRef } from "react";
+
+import {
+  FormControlLabel,
+  Checkbox,
+  Box,
+  Rating,
+  FormLabel,
+} from "@mui/material";
+import { Controller } from "react-hook-form";
+
+import type { Spec } from "./basic-types";
+
+import { Default, Exact, Gubu, Skip } from "gubu";
+const CMPNAME = "BasicEntitySliderField";
+
+const { Open } = Gubu;
+const BasicEntityRatingFieldSpecShape = Gubu(
+  Open({
+    field: Open({
+      id: String,
+      name: String,
+      kind: Skip(String),
+      label: Default("", String),
+      ux: Open({
+        kind: Exact("Rating"),
+        edit: Default(true),
+        precision: 1,
+        props: Open({}),
+      }),
+    }),
+  }),
+  { name: CMPNAME }
+);
+
+function BasicEntityRatingField(props: any) {
+  const { spec } = props;
+
+  const basicEntityRatingField: Spec = BasicEntityRatingFieldSpecShape(spec);
+  const { control, field, getValues } = basicEntityRatingField;
+  const val = getValues(field.name);
+
+  //   console.log("BasicEntityRatingField", "val", val);
+
+  return (
+    <div key={`${field.id}-div`}>
+      <FormLabel component="legend">{field.label}</FormLabel>
+      <Controller
+        key={`${field.id}-controller`}
+        name={field.name}
+        control={control}
+        defaultValue={!!val || 0}
+        render={({ field: { onChange, value } }) => (
+          <Rating
+            name={field.name}
+            value={value}
+            precision={field.ux.precision}
+            onChange={(_, newValue) => onChange(newValue)}
+            {...field.ux.props}
+          />
+        )}
+      />
+    </div>
+  );
+}
+
+export { BasicEntityRatingField };