ding-react-admin 1.0.4 → 2.0.4

package/src/context/PermissionsProvider.tsx

@@ -1,57 +1,57 @@
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useMemo,
-  type ReactNode,
-} from "react";
-
-/**
- * Check whether the current user has a permission string from your backend.
- * Example: `can("users.create")` or `can("main.add_user")`.
- */
-export type PermissionsChecker = (permission: string) => boolean;
-
-const PermissionsContext = createContext<PermissionsChecker | null>(null);
-
-export type PermissionsProviderProps = {
-  children: ReactNode;
-  /** Return true if the current user has this permission string. */
-  can: PermissionsChecker;
-};
-
-export function PermissionsProvider({
-  children,
-  can,
-}: PermissionsProviderProps) {
-  const memo = useMemo(() => can, [can]);
-  return (
-    <PermissionsContext.Provider value={memo}>
-      {children}
-    </PermissionsContext.Provider>
-  );
-}
-
-export function usePermissions(): PermissionsChecker {
-  const ctx = useContext(PermissionsContext);
-  if (!ctx) {
-    throw new Error(
-      "usePermissions must be used within PermissionsProvider",
-    );
-  }
-  return ctx;
-}
-
-/** Build a `can(permission)` checker from the user's permission strings (e.g. from login). */
-export function createPermissionsChecker(
-  getPermissions: () => string[] | undefined,
-): PermissionsChecker {
-  return (permission: string) =>
-    getPermissions()?.includes(permission) ?? false;
-}
-
-/** Convenience: `const allowed = useCan("users.create")();` */
-export function useCan(permission: string) {
-  const can = usePermissions();
-  return useCallback(() => can(permission), [can, permission]);
-}
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  type ReactNode,
+} from "react";
+
+/**
+ * Check whether the current user has a permission string from your backend.
+ * Example: `can("users.create")` or `can("main.add_user")`.
+ */
+export type PermissionsChecker = (permission: string) => boolean;
+
+const PermissionsContext = createContext<PermissionsChecker | null>(null);
+
+export type PermissionsProviderProps = {
+  children: ReactNode;
+  /** Return true if the current user has this permission string. */
+  can: PermissionsChecker;
+};
+
+export function PermissionsProvider({
+  children,
+  can,
+}: PermissionsProviderProps) {
+  const memo = useMemo(() => can, [can]);
+  return (
+    <PermissionsContext.Provider value={memo}>
+      {children}
+    </PermissionsContext.Provider>
+  );
+}
+
+export function usePermissions(): PermissionsChecker {
+  const ctx = useContext(PermissionsContext);
+  if (!ctx) {
+    throw new Error(
+      "usePermissions must be used within PermissionsProvider",
+    );
+  }
+  return ctx;
+}
+
+/** Build a `can(permission)` checker from the user's permission strings (e.g. from login). */
+export function createPermissionsChecker(
+  getPermissions: () => string[] | undefined,
+): PermissionsChecker {
+  return (permission: string) =>
+    getPermissions()?.includes(permission) ?? false;
+}
+
+/** Convenience: `const allowed = useCan("users.create")();` */
+export function useCan(permission: string) {
+  const can = usePermissions();
+  return useCallback(() => can(permission), [can, permission]);
+}

package/src/crud/FilterBar.tsx

@@ -1,36 +1,36 @@
-import { Space, Typography } from "antd";
-import type { ReactNode } from "react";
-import { useFilterContext } from "./context/FilterContext";
-
-function FilterBarUI() {
-  const ctx = useFilterContext();
-  if (!ctx || ctx.filters.length === 0) return null;
-
-  return (
-    <Space wrap size="middle" style={{ marginBottom: 16 }}>
-      {ctx.filters.map((f) => (
-        <Space key={f.key} orientation="vertical" size={2}>
-          {f.label ? (
-            <Typography.Text type="secondary" style={{ fontSize: 12 }}>
-              {f.label}
-            </Typography.Text>
-          ) : null}
-          {f.render({
-            value: ctx.values[f.source],
-            onChange: (v) => ctx.setFilterValue(f.source, v),
-          })}
-        </Space>
-      ))}
-    </Space>
-  );
-}
-
-/** Wrap filter field components; renders filter controls above the table. */
-export function FilterBar({ children }: { children: ReactNode }) {
-  return (
-    <>
-      {children}
-      <FilterBarUI />
-    </>
-  );
-}
+import { Space, Typography } from "antd";
+import type { ReactNode } from "react";
+import { useFilterContext } from "./context/FilterContext";
+
+function FilterBarUI() {
+  const ctx = useFilterContext();
+  if (!ctx || ctx.filters.length === 0) return null;
+
+  return (
+    <Space wrap size="middle" style={{ marginBottom: 16 }}>
+      {ctx.filters.map((f) => (
+        <Space key={f.key} orientation="vertical" size={2}>
+          {f.label ? (
+            <Typography.Text type="secondary" style={{ fontSize: 12 }}>
+              {f.label}
+            </Typography.Text>
+          ) : null}
+          {f.render({
+            value: ctx.values[f.source],
+            onChange: (v) => ctx.setFilterValue(f.source, v),
+          })}
+        </Space>
+      ))}
+    </Space>
+  );
+}
+
+/** Wrap filter field components; renders filter controls above the table. */
+export function FilterBar({ children }: { children: ReactNode }) {
+  return (
+    <>
+      {children}
+      <FilterBarUI />
+    </>
+  );
+}

package/src/crud/FormGlobalErrorsAlert.tsx

@@ -0,0 +1,36 @@
+import { Alert } from "antd";
+
+export type FormGlobalErrorsAlertProps = {
+  errors: string[];
+};
+
+export function FormGlobalErrorsAlert({ errors }: FormGlobalErrorsAlertProps) {
+  if (!errors.length) return null;
+
+  if (errors.length === 1) {
+    return (
+      <Alert
+        type="error"
+        title={errors[0]}
+        showIcon
+        style={{ marginBottom: 16 }}
+      />
+    );
+  }
+
+  return (
+    <Alert
+      type="error"
+      title="Could not save"
+      showIcon
+      style={{ marginBottom: 16 }}
+      description={
+        <ul style={{ margin: 0, paddingLeft: 20 }}>
+          {errors.map((msg) => (
+            <li key={msg}>{msg}</li>
+          ))}
+        </ul>
+      }
+    />
+  );
+}

package/src/crud/FormSteps.tsx

@@ -1,135 +1,135 @@
-import { Button, Space, Steps, type StepsProps } from "antd";
-import {
-  Children,
-  isValidElement,
-  useCallback,
-  useMemo,
-  useState,
-  type CSSProperties,
-  type ReactElement,
-  type ReactNode,
-} from "react";
-import { useFormContext, useFormState } from "react-hook-form";
-import { FormSectionSourcesProvider } from "./context/FormSectionContext";
-import {
-  sectionHasError,
-  useActivateFirstErrorSection,
-  useSectionSourceRefs,
-} from "./utils/formSectionErrors";
-
-export type FormStepProps = {
-  title: ReactNode;
-  description?: ReactNode;
-  children: ReactNode;
-};
-
-export function FormStep(_props: FormStepProps) {
-  return null;
-}
-
-function isFormStep(child: ReactNode): child is ReactElement<FormStepProps> {
-  return isValidElement(child) && child.type === FormStep;
-}
-
-export type FormStepsProps = {
-  children: ReactNode;
-  initialStep?: number;
-  /** Show Previous / Next controls below the active step. Default true. */
-  showNavigation?: boolean;
-  /** Allow clicking step headers to change the active step. Default false. */
-  allowStepSelect?: boolean;
-  stepsStyle?: CSSProperties;
-  navigationStyle?: CSSProperties;
-} & Partial<Pick<StepsProps, "size" | "direction" | "type" | "status">>;
-
-export function FormSteps({
-  children,
-  initialStep = 0,
-  showNavigation = true,
-  allowStepSelect = false,
-  stepsStyle,
-  navigationStyle,
-  size,
-  direction,
-  type,
-  status,
-}: FormStepsProps) {
-  const steps = useMemo(
-    () => Children.toArray(children).filter(isFormStep),
-    [children],
-  );
-  const sectionRefs = useSectionSourceRefs(steps.length);
-  const [current, setCurrent] = useState(initialStep);
-  const lastIndex = steps.length - 1;
-
-  useActivateFirstErrorSection(sectionRefs, setCurrent);
-
-  const { control, getFieldState } = useFormContext();
-  const formState = useFormState({ control });
-
-  const stepItems = useMemo(
-    () =>
-      steps.map((step, index) => {
-        const hasError = sectionHasError(
-          sectionRefs[index].current,
-          getFieldState,
-          formState,
-        );
-
-        return {
-          title: step.props.title,
-          description: step.props.description,
-          status: hasError ? ("error" as const) : undefined,
-        };
-      }),
-    [formState, getFieldState, sectionRefs, steps],
-  );
-
-  const handleStepSelect = useCallback(
-    (next: number) => {
-      setCurrent(next);
-    },
-    [],
-  );
-
-  return (
-    <>
-      <Steps
-        current={current}
-        items={stepItems}
-        style={{ marginBottom: 24, ...stepsStyle }}
-        onChange={allowStepSelect ? handleStepSelect : undefined}
-        size={size}
-        direction={direction}
-        type={type}
-        status={status}
-      />
-
-      {steps.map((step, index) => (
-        <div
-          key={(step.key as string | undefined) ?? String(index)}
-          style={{ display: current === index ? undefined : "none" }}
-        >
-          <FormSectionSourcesProvider sourcesRef={sectionRefs[index]}>
-            {step.props.children}
-          </FormSectionSourcesProvider>
-        </div>
-      ))}
-
-      {showNavigation && steps.length > 1 ? (
-        <Space style={{ marginTop: 16, ...navigationStyle }}>
-          <Button disabled={current === 0} onClick={() => setCurrent((s) => s - 1)}>
-            Previous
-          </Button>
-          <Button
-            type="primary"
-            disabled={current === lastIndex}
-            onClick={() => setCurrent((s) => s + 1)}
-          >
-            Next
-          </Button>
-        </Space>
-      ) : null}
-    </>
-  );
-}
+import { Button, Space, Steps, type StepsProps } from "antd";
+import {
+  Children,
+  isValidElement,
+  useCallback,
+  useMemo,
+  useState,
+  type CSSProperties,
+  type ReactElement,
+  type ReactNode,
+} from "react";
+import { useFormContext, useFormState } from "react-hook-form";
+import { FormSectionSourcesProvider } from "./context/FormSectionContext";
+import {
+  sectionHasError,
+  useActivateFirstErrorSection,
+  useSectionSourceRefs,
+} from "./utils/formSectionErrors";
+
+export type FormStepProps = {
+  title: ReactNode;
+  description?: ReactNode;
+  children: ReactNode;
+};
+
+export function FormStep(_props: FormStepProps) {
+  return null;
+}
+
+function isFormStep(child: ReactNode): child is ReactElement<FormStepProps> {
+  return isValidElement(child) && child.type === FormStep;
+}
+
+export type FormStepsProps = {
+  children: ReactNode;
+  initialStep?: number;
+  /** Show Previous / Next controls below the active step. Default true. */
+  showNavigation?: boolean;
+  /** Allow clicking step headers to change the active step. Default false. */
+  allowStepSelect?: boolean;
+  stepsStyle?: CSSProperties;
+  navigationStyle?: CSSProperties;
+} & Partial<Pick<StepsProps, "size" | "direction" | "type" | "status">>;
+
+export function FormSteps({
+  children,
+  initialStep = 0,
+  showNavigation = true,
+  allowStepSelect = false,
+  stepsStyle,
+  navigationStyle,
+  size,
+  direction,
+  type,
+  status,
+}: FormStepsProps) {
+  const steps = useMemo(
+    () => Children.toArray(children).filter(isFormStep),
+    [children],
+  );
+  const sectionRefs = useSectionSourceRefs(steps.length);
+  const [current, setCurrent] = useState(initialStep);
+  const lastIndex = steps.length - 1;
+
+  useActivateFirstErrorSection(sectionRefs, setCurrent);
+
+  const { control, getFieldState } = useFormContext();
+  const formState = useFormState({ control });
+
+  const stepItems = useMemo(
+    () =>
+      steps.map((step, index) => {
+        const hasError = sectionHasError(
+          sectionRefs[index].current,
+          getFieldState,
+          formState,
+        );
+
+        return {
+          title: step.props.title,
+          description: step.props.description,
+          status: hasError ? ("error" as const) : undefined,
+        };
+      }),
+    [formState, getFieldState, sectionRefs, steps],
+  );
+
+  const handleStepSelect = useCallback(
+    (next: number) => {
+      setCurrent(next);
+    },
+    [],
+  );
+
+  return (
+    <>
+      <Steps
+        current={current}
+        items={stepItems}
+        style={{ marginBottom: 24, ...stepsStyle }}
+        onChange={allowStepSelect ? handleStepSelect : undefined}
+        size={size}
+        direction={direction}
+        type={type}
+        status={status}
+      />
+
+      {steps.map((step, index) => (
+        <div
+          key={(step.key as string | undefined) ?? String(index)}
+          style={{ display: current === index ? undefined : "none" }}
+        >
+          <FormSectionSourcesProvider sourcesRef={sectionRefs[index]}>
+            {step.props.children}
+          </FormSectionSourcesProvider>
+        </div>
+      ))}
+
+      {showNavigation && steps.length > 1 ? (
+        <Space style={{ marginTop: 16, ...navigationStyle }}>
+          <Button disabled={current === 0} onClick={() => setCurrent((s) => s - 1)}>
+            Previous
+          </Button>
+          <Button
+            type="primary"
+            disabled={current === lastIndex}
+            onClick={() => setCurrent((s) => s + 1)}
+          >
+            Next
+          </Button>
+        </Space>
+      ) : null}
+    </>
+  );
+}