New source found from dndbeyond.com

ddb_main/tools/js/Shared/containers/DetailChoice/DetailChoice.tsx

@@ -1,3 +1,4 @@
+import clsx from "clsx";
 import { FC, ReactNode } from "react";
 
 import {
@@ -18,6 +19,7 @@ import Collapsible from "~/tools/js/smartComponents/Collapsible";
 import { Select } from "~/tools/js/smartComponents/legacy";
 
 // TODO this needs to not extend builder contract and options typing needs to be fixed
+// TODO scss to styles.module.css
 interface Props extends Omit<BuilderChoiceContract, "options"> {
   choice: Choice;
   description?: string;
@@ -31,7 +33,6 @@ interface Props extends Omit<BuilderChoiceContract, "options"> {
   onChange?: (
     id: string,
     type: number,
-    subType: number | null,
     value: any,
     parentChoiceId: string | null
   ) => void;
@@ -61,12 +62,17 @@ export const DetailChoice: FC<Props> = ({
   const { entityRestrictionData, ruleData } = useCharacterEngine();
   const { languages } = useRuleData();
 
+  const hasTodo =
+    (ChoiceUtils.isInfinite(choice) && !ChoiceUtils.isOptionSelected(choice)) ||
+    ChoiceUtils.isTodo(choice);
+
   const handleChoiceChange = (value: string): void => {
     if (onChange && id !== null) {
-      onChange(id, type, subType, value, parentChoiceId);
+      onChange(id, type, value, parentChoiceId);
     }
   };
 
+  //Don't render the choice if hideWhenOnlyDefaultSelected is true and the choice is only default selected.
   if (
     hideWhenOnlyDefaultSelected &&
     ChoiceUtils.isOnlyDefaultSelected(choice)
@@ -74,14 +80,6 @@ export const DetailChoice: FC<Props> = ({
     return null;
   }
 
-  let classNames: Array<string> = ["detail-choice", className];
-  if (
-    (ChoiceUtils.isInfinite(choice) && !ChoiceUtils.isOptionSelected(choice)) ||
-    ChoiceUtils.isTodo(choice)
-  ) {
-    classNames.push("detail-choice--todo");
-  }
-
   // Use the description prop or, if a chosenOption is found and a description wasn't passed in, use the chosenOption description instead.
   let choiceDescription = description;
 
@@ -94,10 +92,6 @@ export const DetailChoice: FC<Props> = ({
     choiceDescription = description || chosenOption["description"];
   }
 
-  if (parentChoiceId !== null) {
-    classNames.push("detail-choice--child");
-  }
-
   let choiceNode: ReactNode;
   if (choiceDescription) {
     switch (type) {
@@ -142,7 +136,14 @@ export const DetailChoice: FC<Props> = ({
   }
 
   return (
-    <div className={classNames.join(" ")}>
+    <div
+      className={clsx([
+        "detail-choice",
+        hasTodo && "detail-choice--todo",
+        parentChoiceId !== null && "detail-choice--child",
+        className,
+      ])}
+    >
       <Select
         className="detail-choice-input"
         options={ChoiceUtils.getSortedRenderOptions(

ddb_main/tools/js/Shared/containers/DetailChoice/DetailChoiceFeat/DetailChoiceFeat.tsx

@@ -1,77 +0,0 @@
-import { FC } from "react";
-import { useDispatch } from "react-redux";
-
-import {
-  characterActions,
-  ChoiceUtils,
-  FeatUtils,
-} from "@dndbeyond/character-rules-engine/es";
-
-import { useCharacterEngine } from "~/hooks/useCharacterEngine";
-
-import { DetailChoice } from "../DetailChoice";
-
-//This component is a wrapper for DetailChoice that is specifically for Feats
-//given a featId, it will render the choices for that feat
-//used in FeatDetail, FeatPane and FeatureChoice (for feats that are given by Class Features, Species Traits and Backgrounds)
-
-export interface Props {
-  featId: number;
-}
-
-export const DetailChoiceFeat: FC<Props> = ({ featId }) => {
-  const dispatch = useDispatch();
-  const { entityRestrictionData, choiceInfo, feats, ruleData } =
-    useCharacterEngine();
-
-  const handleChoiceChange = (
-    id: string | null,
-    type: number,
-    subType: number | null,
-    value: any
-  ): void => {
-    if (id !== null) {
-      dispatch(characterActions.featChoiceSetRequest(featId, type, id, value));
-    }
-  };
-
-  const feat = feats.find((feat) => FeatUtils.getId(feat) === featId);
-
-  if (!feat) {
-    return null;
-  }
-
-  const choices = FeatUtils.getChoices(feat);
-  if (choices.length === 0) {
-    return null;
-  }
-
-  return (
-    <div className="ct-detail-choice-feat">
-      {choices.map((choice) => {
-        const id = ChoiceUtils.getId(choice);
-
-        const { description, options: featChoiceOptions } =
-          ChoiceUtils.getSortedChoiceOptionsInfo(
-            choice,
-            ruleData,
-            entityRestrictionData
-          );
-
-        return (
-          <DetailChoice
-            {...choice}
-            label={choice.label}
-            choice={choice}
-            key={id !== null ? id : ""}
-            options={featChoiceOptions}
-            onChange={handleChoiceChange}
-            choiceInfo={choiceInfo}
-            showBackgroundProficiencyOptions={true}
-            description={description}
-          />
-        );
-      })}
-    </div>
-  );
-};