dirk-cfx-react 1.1.82 → 1.1.84

package/dist/index.cjs

@@ -3703,11 +3703,11 @@ function ConfirmModal({
                     placeholder: confirmText,
                     value: typed,
                     onChange: (e) => setTyped(e.currentTarget.value),
-                    styles: (t) => ({
+                    styles: (t2) => ({
                       input: {
-                        backgroundColor: core.alpha(t.colors.dark[7], 0.5),
+                        backgroundColor: core.alpha(t2.colors.dark[7], 0.5),
                         border: `0.1vh solid ${core.alpha(
-                          typed === confirmText ? "#ef4444" : t.colors.dark[5],
+                          typed === confirmText ? "#ef4444" : t2.colors.dark[5],
                           0.5
                         )}`,
                         color: "rgba(255,255,255,0.85)",
@@ -6933,6 +6933,182 @@ function ScenarioSelect({
     }
   );
 }
+var t = (key, fallback) => {
+  const v = locale(key);
+  return v === key ? fallback : v;
+};
+function decimalToHex(color) {
+  if (!color || color === 0) return null;
+  return "#" + color.toString(16).padStart(6, "0");
+}
+function RoleOption({ role }) {
+  const swatch = decimalToHex(role.color) || "rgba(255,255,255,0.25)";
+  return /* @__PURE__ */ jsxRuntime.jsxs(core.Flex, { align: "center", gap: "0.6vh", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        style: {
+          width: "1vh",
+          height: "1vh",
+          borderRadius: "50%",
+          background: swatch,
+          flexShrink: 0,
+          boxShadow: role.color ? `0 0 0.4vh ${swatch}` : void 0
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(core.Text, { size: "xs", c: "rgba(255,255,255,0.9)", children: role.name })
+  ] });
+}
+var NOT_CONFIGURED_TINT = "rgba(255,184,0,0.35)";
+var NOT_CONFIGURED_FILL = "rgba(255,184,0,0.05)";
+function DiscordRoleSelect(props) {
+  const { endpoint, label: label2, size = "xs", placeholder, disabled, style, styles } = props;
+  const [roles, setRoles] = React6.useState(null);
+  const [loading, setLoading] = React6.useState(false);
+  const [errorCode, setErrorCode] = React6.useState(null);
+  const refresh = async () => {
+    setLoading(true);
+    try {
+      const res = await fetchNui(endpoint, {}, {
+        // Browser dev fallback so the component renders something useful
+        // outside FiveM.
+        ok: true,
+        roles: [
+          { id: "1", name: "Admin", color: 15548997, position: 5 },
+          { id: "2", name: "VIP Gold", color: 16426522, position: 4 },
+          { id: "3", name: "Member", color: 5763719, position: 3 },
+          { id: "4", name: "Guest", color: 0, position: 2 }
+        ]
+      });
+      if (res?.ok) {
+        setRoles(res.roles ?? []);
+        setErrorCode(null);
+      } else {
+        setRoles(null);
+        setErrorCode(res?._error || "FetchFailed");
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+  React6.useEffect(() => {
+    refresh();
+  }, [endpoint]);
+  const rolesById = React6.useMemo(() => {
+    const map = {};
+    for (const r of roles ?? []) map[r.id] = r;
+    return map;
+  }, [roles]);
+  if (errorCode === "NotConfigured") {
+    const notConfiguredPlaceholder = t(
+      "DiscordNotConfigured",
+      "Not configured \u2014 set in /dirk_lib"
+    );
+    const notConfiguredStyles = {
+      ...styles,
+      input: {
+        ...styles?.input ?? {},
+        borderColor: NOT_CONFIGURED_TINT,
+        backgroundColor: NOT_CONFIGURED_FILL
+      }
+    };
+    const warnIcon = /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { size: "1.2vh", color: NOT_CONFIGURED_TINT.replace(/0\.35\)$/, "0.85)") });
+    if (props.multi) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        core.MultiSelect,
+        {
+          label: label2,
+          size,
+          placeholder: notConfiguredPlaceholder,
+          data: [],
+          value: [],
+          onChange: () => {
+          },
+          disabled: true,
+          rightSection: warnIcon,
+          style,
+          styles: notConfiguredStyles
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      core.Select,
+      {
+        label: label2,
+        size,
+        placeholder: notConfiguredPlaceholder,
+        data: [],
+        value: null,
+        onChange: () => {
+        },
+        disabled: true,
+        rightSection: warnIcon,
+        style,
+        styles: notConfiguredStyles
+      }
+    );
+  }
+  const data = (roles ?? []).map((r) => ({
+    value: r.id,
+    label: r.name
+  }));
+  const renderOption = ({ option }) => {
+    const role = rolesById[option.value];
+    return role ? /* @__PURE__ */ jsxRuntime.jsx(RoleOption, { role }) : /* @__PURE__ */ jsxRuntime.jsx(core.Text, { size: "xs", children: option.label });
+  };
+  const refreshButton = /* @__PURE__ */ jsxRuntime.jsx(
+    core.ActionIcon,
+    {
+      size: "xs",
+      variant: "subtle",
+      onClick: refresh,
+      title: t("Refresh", "Refresh"),
+      loading,
+      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { size: "1.2vh" })
+    }
+  );
+  if (props.multi) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      core.MultiSelect,
+      {
+        label: label2,
+        size,
+        placeholder: placeholder || t("PickRoles", "Pick roles..."),
+        data,
+        value: props.value || [],
+        onChange: (ids) => props.onChange(ids),
+        renderOption,
+        searchable: true,
+        clearable: true,
+        disabled: disabled || loading && !roles,
+        rightSection: refreshButton,
+        style,
+        styles,
+        nothingFoundMessage: errorCode ? `${t("Error", "Error")} (${errorCode})` : t("NoRoles", "No roles found")
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    core.Select,
+    {
+      label: label2,
+      size,
+      placeholder: placeholder || t("PickRole", "Pick a role..."),
+      data,
+      value: props.value || null,
+      onChange: (id) => props.onChange(id),
+      renderOption,
+      searchable: true,
+      clearable: true,
+      disabled: disabled || loading && !roles,
+      rightSection: refreshButton,
+      style,
+      styles,
+      nothingFoundMessage: errorCode ? `${t("Error", "Error")} (${errorCode})` : t("NoRoles", "No roles found")
+    }
+  );
+}
 function useTornEdges() {
   const game = useSettings((state) => state.game);
   return game === "rdr3" ? "torn-edge-wrapper" : "";
@@ -7306,6 +7482,7 @@ exports.ControlMultiSelect = ControlMultiSelect;
 exports.ControlSelect = ControlSelect;
 exports.Counter = Counter;
 exports.DirkProvider = DirkProvider;
+exports.DiscordRoleSelect = DiscordRoleSelect;
 exports.FiveMKeyBindInput = FiveMKeyBindInput;
 exports.FloatingParticles = FloatingParticles;
 exports.FormProvider = FormProvider;