refactor: radio group

Author: segunadebayo

.xstate/rating-group.js

@@ -10,32 +10,82 @@ const {
   choose
 } = actions;
 const fetchMachine = createMachine({
-  id: "rating",
-  initial: "idle",
-  context: {
-    "isValueEmpty": false,
-    "isRadioFocused": false
+  props({
+    props
+  }) {
+    return {
+      name: "rating",
+      count: 5,
+      dir: "ltr",
+      value: -1,
+      ...compact(props),
+      translations: {
+        ratingValueText: index => `${index} stars`,
+        ...props.translations
+      }
+    };
+  },
+  initialState() {
+    return "idle";
+  },
+  context({
+    prop,
+    bindable
+  }) {
+    return {
+      value: bindable(() => ({
+        defaultValue: prop("defaultValue"),
+        value: prop("value"),
+        onChange(value) {
+          prop("onValueChange")?.({
+            value
+          });
+        }
+      })),
+      hoveredValue: bindable(() => ({
+        defaultValue: -1,
+        onChange(value) {
+          prop("onHoverChange")?.({
+            hoveredValue: value
+          });
+        }
+      })),
+      fieldsetDisabled: bindable(() => ({
+        defaultValue: false
+      }))
+    };
   },
-  activities: ["trackFormControlState"],
+  watch({
+    track,
+    action,
+    prop
+  }) {
+    track([() => prop("allowHalf")], () => {
+      action(["roundValueIfNeeded"]);
+    });
+  },
+  effects: ["trackFormControlState"],
   on: {
     SET_VALUE: {
       actions: ["setValue"]
     },
     CLEAR_VALUE: {
       actions: ["clearValue"]
-    }
-  },
-  on: {
+    },
     UPDATE_CONTEXT: {
       actions: "updateContext"
     }
   },
   states: {
     idle: {
-      entry: "clearHoveredValue",
+      entry: ["clearHoveredValue"],
       on: {
-        GROUP_POINTER_OVER: "hover",
-        FOCUS: "focus",
+        GROUP_POINTER_OVER: {
+          target: "hover"
+        },
+        FOCUS: {
+          target: "focus"
+        },
         CLICK: {
           actions: ["setValue", "focusActiveRadio"]
         }
@@ -44,12 +94,14 @@ const fetchMachine = createMachine({
     focus: {
       on: {
         POINTER_OVER: {
-          actions: "setHoveredValue"
+          actions: ["setHoveredValue"]
         },
         GROUP_POINTER_LEAVE: {
-          actions: "clearHoveredValue"
+          actions: ["clearHoveredValue"]
+        },
+        BLUR: {
+          target: "idle"
         },
-        BLUR: "idle",
         SPACE: {
           cond: "isValueEmpty",
           actions: ["setValue"]
@@ -74,21 +126,123 @@ const fetchMachine = createMachine({
     hover: {
       on: {
         POINTER_OVER: {
-          actions: "setHoveredValue"
+          actions: ["setHoveredValue"]
         },
         GROUP_POINTER_LEAVE: [{
           cond: "isRadioFocused",
           target: "focus",
-          actions: "clearHoveredValue"
+          actions: ["clearHoveredValue"]
         }, {
           target: "idle",
-          actions: "clearHoveredValue"
+          actions: ["clearHoveredValue"]
         }],
         CLICK: {
           actions: ["setValue", "focusActiveRadio"]
         }
       }
     }
+  },
+  implementations: {
+    guards: {
+      isInteractive: ({
+        prop
+      }) => !(prop("disabled") || prop("readOnly")),
+      isHoveredValueEmpty: ({
+        context: {
+          "isValueEmpty": false,
+          "isRadioFocused": false
+        }
+      }) => context.get("hoveredValue") === -1,
+      isValueEmpty: ({
+        context
+      }) => context.get("value") <= 0,
+      isRadioFocused: ({
+        scope
+      }) => !!dom.getControlEl(scope)?.contains(scope.getActiveElement())
+    },
+    effects: {
+      trackFormControlState({
+        context,
+        scope
+      }) {
+        return trackFormControl(dom.getHiddenInputEl(scope), {
+          onFieldsetDisabledChange(disabled) {
+            context.set("fieldsetDisabled", disabled);
+          },
+          onFormReset() {
+            context.set("value", context.initial("value"));
+          }
+        });
+      }
+    },
+    actions: {
+      clearHoveredValue({
+        context
+      }) {
+        context.set("hoveredValue", -1);
+      },
+      focusActiveRadio({
+        scope,
+        context
+      }) {
+        raf(() => dom.getRadioEl(scope, context.get("value"))?.focus());
+      },
+      setPrevValue({
+        context,
+        prop
+      }) {
+        const factor = prop("allowHalf") ? 0.5 : 1;
+        context.set("value", Math.max(0, context.get("value") - factor));
+      },
+      setNextValue({
+        context,
+        prop
+      }) {
+        const factor = prop("allowHalf") ? 0.5 : 1;
+        const value = context.get("value") === -1 ? 0 : context.get("value");
+        context.set("value", Math.min(prop("count"), value + factor));
+      },
+      setValueToMin({
+        context
+      }) {
+        context.set("value", 1);
+      },
+      setValueToMax({
+        context,
+        prop
+      }) {
+        context.set("value", prop("count"));
+      },
+      setValue({
+        context,
+        event
+      }) {
+        const hoveredValue = context.get("hoveredValue");
+        const value = hoveredValue === -1 ? event.value : hoveredValue;
+        context.set("value", value);
+      },
+      clearValue({
+        context
+      }) {
+        context.set("value", -1);
+      },
+      setHoveredValue({
+        context,
+        prop,
+        event
+      }) {
+        const half = prop("allowHalf") && event.isMidway;
+        const factor = half ? 0.5 : 0;
+        context.set("hoveredValue", event.index - factor);
+      },
+      roundValueIfNeeded({
+        context,
+        prop
+      }) {
+        if (prop("allowHalf")) return;
+        context.set("value", Math.round(context.get("value")));
+      }
+    }
   }
 }, {
   actions: {

packages/machines/rating-group/src/index.ts

@@ -3,12 +3,12 @@ export { connect } from "./rating-group.connect"
 export { machine } from "./rating-group.machine"
 export * from "./rating-group.props"
 export type {
-  MachineApi as Api,
-  UserDefinedContext as Context,
+  RatingGroupApi as Api,
+  RatingGroupProps as Props,
   HoverChangeDetails,
   IntlTranslations,
   ItemProps,
   ItemState,
-  Service,
+  RatingGroupService as Service,
   ValueChangeDetails,
 } from "./rating-group.types"