dirk-cfx-react 1.1.82 → 1.1.83

package/dist/components/index.cjs

@@ -6204,6 +6204,154 @@ function ScenarioSelect({
     }
   );
 }
+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 })
+  ] });
+}
+function NotConfiguredBanner({ label }) {
+  const theme = core.useMantineTheme();
+  return /* @__PURE__ */ jsxRuntime.jsxs(core.Flex, { direction: "column", gap: "xxs", children: [
+    label && /* @__PURE__ */ jsxRuntime.jsx(core.Text, { ff: "Akrobat Bold", size: "xxs", tt: "uppercase", lts: "0.05em", c: "rgba(255,255,255,0.55)", children: label }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      core.Flex,
+      {
+        align: "center",
+        gap: "xs",
+        px: "xs",
+        py: "xxs",
+        style: {
+          background: "rgba(0,0,0,0.3)",
+          border: "0.1vh dashed rgba(255,255,255,0.12)",
+          borderRadius: theme.radius.xs
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLink, { size: "1.4vh", color: "rgba(255,255,255,0.4)" }),
+          /* @__PURE__ */ jsxRuntime.jsx(core.Text, { ff: "Akrobat Bold", size: "xxs", c: "rgba(255,255,255,0.55)", style: { flex: 1 }, children: locale("DiscordNotConfigured") || "Discord bot not configured \u2014 run /dirk_lib and set a bot token + guild ID." })
+        ]
+      }
+    )
+  ] });
+}
+function DiscordRoleSelect(props) {
+  const { endpoint, label, size = "xs", placeholder, disabled, style, styles } = props;
+  const [roles, setRoles] = react.useState(null);
+  const [loading, setLoading] = react.useState(false);
+  const [errorCode, setErrorCode] = react.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);
+    }
+  };
+  react.useEffect(() => {
+    refresh();
+  }, [endpoint]);
+  const rolesById = react.useMemo(() => {
+    const map = {};
+    for (const r of roles ?? []) map[r.id] = r;
+    return map;
+  }, [roles]);
+  if (errorCode === "NotConfigured") {
+    return /* @__PURE__ */ jsxRuntime.jsx(NotConfiguredBanner, { label });
+  }
+  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: locale("Refresh") || "Refresh",
+      loading,
+      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { size: "1.2vh" })
+    }
+  );
+  if (props.multi) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      core.MultiSelect,
+      {
+        label,
+        size,
+        placeholder: placeholder || locale("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 ? `${locale("Error") || "Error"} (${errorCode})` : locale("NoRoles") || "No roles found"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    core.Select,
+    {
+      label,
+      size,
+      placeholder: placeholder || locale("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 ? `${locale("Error") || "Error"} (${errorCode})` : locale("NoRoles") || "No roles found"
+    }
+  );
+}
 
 exports.AdminPageTitle = AdminPageTitle;
 exports.AnimPostFxSelect = AnimPostFxSelect;
@@ -6217,6 +6365,7 @@ exports.ConfirmModal = ConfirmModal;
 exports.ControlMultiSelect = ControlMultiSelect;
 exports.ControlSelect = ControlSelect;
 exports.Counter = Counter;
+exports.DiscordRoleSelect = DiscordRoleSelect;
 exports.FiveMKeyBindInput = FiveMKeyBindInput;
 exports.FloatingParticles = FloatingParticles;
 exports.GroupName = GroupName;