@capytale/meta-player 0.8.3 → 0.9.0

package/src/features/activitySettings/ui.tsx

@@ -1,299 +1,299 @@
-import type {
-  ActivitySettingsFormSection,
-  ActivitySettingsMultipleOptionsSection,
-  ActivitySettingsRadioOptionsSection,
-  FormField,
-} from "./types";
-
-import styles from "./style.module.scss";
-import { Slider } from "primereact/slider";
-import { InputNumber } from "primereact/inputnumber";
-import { InputText } from "primereact/inputtext";
-import { ColorPicker } from "primereact/colorpicker";
-import { InputTextarea } from "primereact/inputtextarea";
-import { Checkbox } from "primereact/checkbox";
-import { InputSwitch } from "primereact/inputswitch";
-import { Dropdown } from "primereact/dropdown";
-import React, { useCallback } from "react";
-import { RadioButton } from "primereact/radiobutton";
-import { useActivitySettingsStore } from "./store";
-
-type ActivitySettingsFormDisplayProps = {
-  form: ActivitySettingsFormSection;
-  mode: "assignment" | "create" | "review" | "view";
-};
-
-function ActivitySettingsFormFieldDisplay(field: FormField) {
-  const updateValue = useActivitySettingsStore((state) => state.updateValue);
-  const onChange = useCallback(
-    (value: any) => {
-      updateValue(field.name, value);
-    },
-    [field.name, updateValue],
-  );
-  const value = useActivitySettingsStore((state) => state.values[field.name]);
-  const inputId = field.name + "-input";
-  switch (field.type) {
-    case "range":
-      return (
-        <div className={styles.formGroup}>
-          <label className={styles.formLabel} htmlFor={inputId}>
-            {field.label}
-          </label>
-          <InputNumber
-            min={field.min}
-            max={field.max}
-            step={field.step}
-            value={value}
-            onChange={(e) => onChange(e.value)}
-          />
-          <Slider
-            id={inputId}
-            min={field.min}
-            max={field.max}
-            step={field.step}
-            value={value}
-            onChange={(e) => onChange(e.value)}
-          />
-        </div>
-      );
-    case "input":
-      return (
-        <div className={styles.formGroup}>
-          <label className={styles.formLabel} htmlFor={inputId}>
-            {field.label}
-          </label>
-          {field.inputType === "text" && (
-            <InputText
-              id={inputId}
-              value={value}
-              onChange={(e) => onChange(e.target.value)}
-            />
-          )}
-          {field.inputType === "number" && (
-            <InputNumber
-              inputId={inputId}
-              value={value}
-              onChange={(e) => e.value != null && onChange(e.value)}
-            />
-          )}
-          {field.inputType === "color" && (
-            <ColorPicker
-              inputId={inputId}
-              value={value}
-              onChange={(e) => e.value && onChange(e.value)}
-            />
-          )}
-          {field.inputType !== "color" &&
-            field.inputType !== "number" &&
-            field.inputType !== "text" && (
-              <p>Type d'input {field.inputType} pas implémenté.</p>
-            )}
-        </div>
-      );
-    case "textarea":
-      return (
-        <div className={styles.formGroup}>
-          <label className={styles.formLabel} htmlFor={inputId}>
-            {field.label}
-          </label>
-          <InputTextarea
-            id={inputId}
-            value={value}
-            onChange={(e) => onChange(e.target.value)}
-          />
-        </div>
-      );
-    case "checkbox":
-      return (
-        <CheckboxGroup
-          inputId={inputId}
-          checked={value}
-          onChange={(value) => onChange(value)}
-          label={field.label}
-        />
-      );
-    case "switch":
-      return (
-        <SwitchGroup
-          inputId={inputId}
-          checked={value}
-          onChange={(value) => onChange(value)}
-          label={field.label}
-        />
-      );
-    case "select":
-      return (
-        <div className={styles.formGroup}>
-          <label className={styles.formLabel} htmlFor={inputId}>
-            {field.label}
-          </label>
-          <Dropdown
-            inputId={inputId}
-            value={value}
-            onChange={(e) => onChange(e.value)}
-            options={field.options}
-            optionLabel="label"
-            optionValue="value"
-          />
-        </div>
-      );
-  }
-}
-
-export function ActivitySettingsFormDisplay({
-  form,
-  mode,
-}: ActivitySettingsFormDisplayProps) {
-  return (
-    <div className="mb-3">
-      {form.fields.map((field) =>
-        !field.modes || field.modes.includes(mode) ? (
-          <ActivitySettingsFormFieldDisplay key={field.name} {...field} />
-        ) : null,
-      )}
-    </div>
-  );
-}
-
-type ActivitySettingsOptionsDisplayProps = {
-  section:
-    | ActivitySettingsMultipleOptionsSection
-    | ActivitySettingsRadioOptionsSection;
-};
-
-export function ActivitySettingsOptionsDisplay({
-  section,
-}: ActivitySettingsOptionsDisplayProps) {
-  return (
-    <div>
-      {section.type === "radio" ? (
-        <ActivitySettingsRadioDisplay section={section} />
-      ) : (
-        <ActivitySettingsCheckboxesDisplay section={section} />
-      )}
-    </div>
-  );
-}
-
-type ActivitySettingsCheckboxesDisplayProps = {
-  section: ActivitySettingsMultipleOptionsSection;
-};
-
-function ActivitySettingsCheckboxesDisplay({
-  section,
-}: ActivitySettingsCheckboxesDisplayProps) {
-  const toggleContainsValue = useActivitySettingsStore(
-    (state) => state.toggleContainsValue,
-  );
-  const onChange = useCallback(
-    (value: any) => {
-      toggleContainsValue(section.name, value);
-    },
-    [section.name, toggleContainsValue],
-  );
-  const value = useActivitySettingsStore((state) => state.values[section.name]);
-  return (
-    <div className="sidebarRadioButtons">
-      {section.options.map((option) => (
-        <CheckboxGroup
-          key={option.value}
-          inputId={section.name + "-" + option.value}
-          checked={value.includes(option.value)}
-          onChange={() => onChange(option.value)}
-          label={option.label}
-        />
-      ))}
-    </div>
-  );
-}
-
-type ActivitySettingsRadioDisplayProps = {
-  section: ActivitySettingsRadioOptionsSection;
-};
-
-function ActivitySettingsRadioDisplay({
-  section,
-}: ActivitySettingsRadioDisplayProps) {
-  const updateValue = useActivitySettingsStore((state) => state.updateValue);
-  const onChange = useCallback(
-    (value: any) => {
-      updateValue(section.name, value);
-    },
-    [section.name, updateValue],
-  );
-  const value = useActivitySettingsStore((state) => state.values[section.name]);
-  return (
-    <div className="sidebarRadioButtons">
-      {section.options.map((option) => (
-        <RadioGroup
-          key={option.value}
-          inputId={section.name + "-" + option.value}
-          checked={value === option.value}
-          onChange={() => {
-            onChange(option.value);
-          }}
-          label={option.label}
-        />
-      ))}
-    </div>
-  );
-}
-
-type CheckboxGroupProps = {
-  inputId: string;
-  label: string;
-  checked: boolean;
-  onChange?: (value: boolean) => void;
-};
-
-const CheckboxGroup: React.FC<CheckboxGroupProps> = (props) => {
-  return (
-    <div className="sidebarRadioGroup">
-      <Checkbox
-        inputId={props.inputId}
-        checked={props.checked}
-        onChange={(e) =>
-          props.onChange && e.checked != null && props.onChange(e.checked)
-        }
-      />
-      <label className={styles.checkboxLabel} htmlFor={props.inputId}>
-        {props.label}
-      </label>
-    </div>
-  );
-};
-
-const RadioGroup: React.FC<CheckboxGroupProps> = (props) => {
-  return (
-    <div className="sidebarRadioGroup">
-      <RadioButton
-        inputId={props.inputId}
-        checked={props.checked}
-        onChange={(e) => {
-          props.onChange && e.checked != null && props.onChange(e.checked);
-        }}
-      />
-      <label className={styles.checkboxLabel} htmlFor={props.inputId}>
-        {props.label}
-      </label>
-    </div>
-  );
-};
-
-const SwitchGroup: React.FC<CheckboxGroupProps> = (props) => {
-  return (
-    <div className="sidebarRadioGroup">
-      <InputSwitch
-        inputId={props.inputId}
-        checked={props.checked}
-        onChange={(e) =>
-          props.onChange && e.checked != null && props.onChange(e.checked)
-        }
-      />
-      <label className={styles.checkboxLabel} htmlFor={props.inputId}>
-        {props.label}
-      </label>
-    </div>
-  );
-};
+import type {
+  ActivitySettingsFormSection,
+  ActivitySettingsMultipleOptionsSection,
+  ActivitySettingsRadioOptionsSection,
+  FormField,
+} from "./types";
+
+import styles from "./style.module.scss";
+import { Slider } from "primereact/slider";
+import { InputNumber } from "primereact/inputnumber";
+import { InputText } from "primereact/inputtext";
+import { ColorPicker } from "primereact/colorpicker";
+import { InputTextarea } from "primereact/inputtextarea";
+import { Checkbox } from "primereact/checkbox";
+import { InputSwitch } from "primereact/inputswitch";
+import { Dropdown } from "primereact/dropdown";
+import React, { useCallback } from "react";
+import { RadioButton } from "primereact/radiobutton";
+import { useActivitySettingsStore } from "./store";
+
+type ActivitySettingsFormDisplayProps = {
+  form: ActivitySettingsFormSection;
+  mode: "assignment" | "create" | "review" | "view";
+};
+
+function ActivitySettingsFormFieldDisplay(field: FormField) {
+  const updateValue = useActivitySettingsStore((state) => state.updateValue);
+  const onChange = useCallback(
+    (value: any) => {
+      updateValue(field.name, value);
+    },
+    [field.name, updateValue],
+  );
+  const value = useActivitySettingsStore((state) => state.values[field.name]);
+  const inputId = field.name + "-input";
+  switch (field.type) {
+    case "range":
+      return (
+        <div className={styles.formGroup}>
+          <label className={styles.formLabel} htmlFor={inputId}>
+            {field.label}
+          </label>
+          <InputNumber
+            min={field.min}
+            max={field.max}
+            step={field.step}
+            value={value}
+            onChange={(e) => onChange(e.value)}
+          />
+          <Slider
+            id={inputId}
+            min={field.min}
+            max={field.max}
+            step={field.step}
+            value={value}
+            onChange={(e) => onChange(e.value)}
+          />
+        </div>
+      );
+    case "input":
+      return (
+        <div className={styles.formGroup}>
+          <label className={styles.formLabel} htmlFor={inputId}>
+            {field.label}
+          </label>
+          {field.inputType === "text" && (
+            <InputText
+              id={inputId}
+              value={value}
+              onChange={(e) => onChange(e.target.value)}
+            />
+          )}
+          {field.inputType === "number" && (
+            <InputNumber
+              inputId={inputId}
+              value={value}
+              onChange={(e) => e.value != null && onChange(e.value)}
+            />
+          )}
+          {field.inputType === "color" && (
+            <ColorPicker
+              inputId={inputId}
+              value={value}
+              onChange={(e) => e.value && onChange(e.value)}
+            />
+          )}
+          {field.inputType !== "color" &&
+            field.inputType !== "number" &&
+            field.inputType !== "text" && (
+              <p>Type d'input {field.inputType} pas implémenté.</p>
+            )}
+        </div>
+      );
+    case "textarea":
+      return (
+        <div className={styles.formGroup}>
+          <label className={styles.formLabel} htmlFor={inputId}>
+            {field.label}
+          </label>
+          <InputTextarea
+            id={inputId}
+            value={value}
+            onChange={(e) => onChange(e.target.value)}
+          />
+        </div>
+      );
+    case "checkbox":
+      return (
+        <CheckboxGroup
+          inputId={inputId}
+          checked={value}
+          onChange={(value) => onChange(value)}
+          label={field.label}
+        />
+      );
+    case "switch":
+      return (
+        <SwitchGroup
+          inputId={inputId}
+          checked={value}
+          onChange={(value) => onChange(value)}
+          label={field.label}
+        />
+      );
+    case "select":
+      return (
+        <div className={styles.formGroup}>
+          <label className={styles.formLabel} htmlFor={inputId}>
+            {field.label}
+          </label>
+          <Dropdown
+            inputId={inputId}
+            value={value}
+            onChange={(e) => onChange(e.value)}
+            options={field.options}
+            optionLabel="label"
+            optionValue="value"
+          />
+        </div>
+      );
+  }
+}
+
+export function ActivitySettingsFormDisplay({
+  form,
+  mode,
+}: ActivitySettingsFormDisplayProps) {
+  return (
+    <div className="mb-3">
+      {form.fields.map((field) =>
+        !field.modes || field.modes.includes(mode) ? (
+          <ActivitySettingsFormFieldDisplay key={field.name} {...field} />
+        ) : null,
+      )}
+    </div>
+  );
+}
+
+type ActivitySettingsOptionsDisplayProps = {
+  section:
+    | ActivitySettingsMultipleOptionsSection
+    | ActivitySettingsRadioOptionsSection;
+};
+
+export function ActivitySettingsOptionsDisplay({
+  section,
+}: ActivitySettingsOptionsDisplayProps) {
+  return (
+    <div>
+      {section.type === "radio" ? (
+        <ActivitySettingsRadioDisplay section={section} />
+      ) : (
+        <ActivitySettingsCheckboxesDisplay section={section} />
+      )}
+    </div>
+  );
+}
+
+type ActivitySettingsCheckboxesDisplayProps = {
+  section: ActivitySettingsMultipleOptionsSection;
+};
+
+function ActivitySettingsCheckboxesDisplay({
+  section,
+}: ActivitySettingsCheckboxesDisplayProps) {
+  const toggleContainsValue = useActivitySettingsStore(
+    (state) => state.toggleContainsValue,
+  );
+  const onChange = useCallback(
+    (value: any) => {
+      toggleContainsValue(section.name, value);
+    },
+    [section.name, toggleContainsValue],
+  );
+  const value = useActivitySettingsStore((state) => state.values[section.name]);
+  return (
+    <div className="sidebarRadioButtons">
+      {section.options.map((option) => (
+        <CheckboxGroup
+          key={option.value}
+          inputId={section.name + "-" + option.value}
+          checked={value.includes(option.value)}
+          onChange={() => onChange(option.value)}
+          label={option.label}
+        />
+      ))}
+    </div>
+  );
+}
+
+type ActivitySettingsRadioDisplayProps = {
+  section: ActivitySettingsRadioOptionsSection;
+};
+
+function ActivitySettingsRadioDisplay({
+  section,
+}: ActivitySettingsRadioDisplayProps) {
+  const updateValue = useActivitySettingsStore((state) => state.updateValue);
+  const onChange = useCallback(
+    (value: any) => {
+      updateValue(section.name, value);
+    },
+    [section.name, updateValue],
+  );
+  const value = useActivitySettingsStore((state) => state.values[section.name]);
+  return (
+    <div className="sidebarRadioButtons">
+      {section.options.map((option) => (
+        <RadioGroup
+          key={option.value}
+          inputId={section.name + "-" + option.value}
+          checked={value === option.value}
+          onChange={() => {
+            onChange(option.value);
+          }}
+          label={option.label}
+        />
+      ))}
+    </div>
+  );
+}
+
+type CheckboxGroupProps = {
+  inputId: string;
+  label: string;
+  checked: boolean;
+  onChange?: (value: boolean) => void;
+};
+
+const CheckboxGroup: React.FC<CheckboxGroupProps> = (props) => {
+  return (
+    <div className="sidebarRadioGroup">
+      <Checkbox
+        inputId={props.inputId}
+        checked={props.checked}
+        onChange={(e) =>
+          props.onChange && e.checked != null && props.onChange(e.checked)
+        }
+      />
+      <label className={styles.checkboxLabel} htmlFor={props.inputId}>
+        {props.label}
+      </label>
+    </div>
+  );
+};
+
+const RadioGroup: React.FC<CheckboxGroupProps> = (props) => {
+  return (
+    <div className="sidebarRadioGroup">
+      <RadioButton
+        inputId={props.inputId}
+        checked={props.checked}
+        onChange={(e) => {
+          props.onChange && e.checked != null && props.onChange(e.checked);
+        }}
+      />
+      <label className={styles.checkboxLabel} htmlFor={props.inputId}>
+        {props.label}
+      </label>
+    </div>
+  );
+};
+
+const SwitchGroup: React.FC<CheckboxGroupProps> = (props) => {
+  return (
+    <div className="sidebarRadioGroup">
+      <InputSwitch
+        inputId={props.inputId}
+        checked={props.checked}
+        onChange={(e) =>
+          props.onChange && e.checked != null && props.onChange(e.checked)
+        }
+      />
+      <label className={styles.checkboxLabel} htmlFor={props.inputId}>
+        {props.label}
+      </label>
+    </div>
+  );
+};

package/src/features/functionalities/AttachedFilesFunctionality.ts

@@ -1,24 +1,24 @@
-import { FC, useEffect } from "react";
-import { AttachedFilesOptions, setAttachedFilesOptions } from "./functionalitiesSlice";
-import { useAppDispatch } from "../../app/hooks";
-
-type AttachedFilesFunctionalityProps = Omit<AttachedFilesOptions, "enabled">;
-
-const AttachedFilesFunctionality: FC<AttachedFilesFunctionalityProps> = (props) => {
-  const dispatch = useAppDispatch();
-  useEffect(() => {
-    dispatch(setAttachedFilesOptions({
-      ...props,
-      enabled: true,
-    }));
-    return () => {
-      dispatch(setAttachedFilesOptions({
-        ...props,
-        enabled: false,
-      }));
-    };
-  });
-  return null;
-}
-
+import { FC, useEffect } from "react";
+import { AttachedFilesOptions, setAttachedFilesOptions } from "./functionalitiesSlice";
+import { useAppDispatch } from "../../app/hooks";
+
+type AttachedFilesFunctionalityProps = Omit<AttachedFilesOptions, "enabled">;
+
+const AttachedFilesFunctionality: FC<AttachedFilesFunctionalityProps> = (props) => {
+  const dispatch = useAppDispatch();
+  useEffect(() => {
+    dispatch(setAttachedFilesOptions({
+      ...props,
+      enabled: true,
+    }));
+    return () => {
+      dispatch(setAttachedFilesOptions({
+        ...props,
+        enabled: false,
+      }));
+    };
+  });
+  return null;
+}
+
 export default AttachedFilesFunctionality;