ding-react-admin 2.0.0 → 2.0.5

package/src/crud/filters/DateFilter.tsx

@@ -1,35 +1,35 @@
-import { DatePicker } from "antd";
-import dayjs from "dayjs";
-import { useMemo } from "react";
-import type { BaseSourceProps } from "../types";
-import { useRegisterFilter } from "../context/FilterContext";
-
-export type DateFilterProps = BaseSourceProps;
-
-export function DateFilter({ source, label }: DateFilterProps) {
-  const def = useMemo(
-    () => ({
-      key: source,
-      source,
-      label,
-      render: ({
-        value,
-        onChange,
-      }: {
-        value: unknown;
-        onChange: (value: unknown) => void;
-      }) => (
-        <DatePicker
-          allowClear
-          placeholder={label ?? source}
-          value={value ? dayjs(String(value)) : null}
-          onChange={(d) => onChange(d ? d.format("YYYY-MM-DD") : undefined)}
-          style={{ minWidth: 160 }}
-        />
-      ),
-    }),
-    [source, label],
-  );
-  useRegisterFilter(def);
-  return null;
-}
+import { DatePicker } from "antd";
+import dayjs from "dayjs";
+import { useMemo } from "react";
+import type { BaseSourceProps } from "../types";
+import { useRegisterFilter } from "../context/FilterContext";
+
+export type DateFilterProps = BaseSourceProps;
+
+export function DateFilter({ source, label }: DateFilterProps) {
+  const def = useMemo(
+    () => ({
+      key: source,
+      source,
+      label,
+      render: ({
+        value,
+        onChange,
+      }: {
+        value: unknown;
+        onChange: (value: unknown) => void;
+      }) => (
+        <DatePicker
+          allowClear
+          placeholder={label ?? source}
+          value={value ? dayjs(String(value)) : null}
+          onChange={(d) => onChange(d ? d.format("YYYY-MM-DD") : undefined)}
+          style={{ minWidth: 160 }}
+        />
+      ),
+    }),
+    [source, label],
+  );
+  useRegisterFilter(def);
+  return null;
+}

package/src/crud/filters/NumberFilter.tsx

@@ -1,33 +1,33 @@
-import { InputNumber } from "antd";
-import { useMemo } from "react";
-import type { BaseSourceProps } from "../types";
-import { useRegisterFilter } from "../context/FilterContext";
-
-export type NumberFilterProps = BaseSourceProps;
-
-export function NumberFilter({ source, label }: NumberFilterProps) {
-  const def = useMemo(
-    () => ({
-      key: source,
-      source,
-      label,
-      render: ({
-        value,
-        onChange,
-      }: {
-        value: unknown;
-        onChange: (value: unknown) => void;
-      }) => (
-        <InputNumber
-          placeholder={label ?? source}
-          value={value as number | undefined}
-          onChange={(v) => onChange(v ?? undefined)}
-          style={{ minWidth: 120 }}
-        />
-      ),
-    }),
-    [source, label],
-  );
-  useRegisterFilter(def);
-  return null;
-}
+import { InputNumber } from "antd";
+import { useMemo } from "react";
+import type { BaseSourceProps } from "../types";
+import { useRegisterFilter } from "../context/FilterContext";
+
+export type NumberFilterProps = BaseSourceProps;
+
+export function NumberFilter({ source, label }: NumberFilterProps) {
+  const def = useMemo(
+    () => ({
+      key: source,
+      source,
+      label,
+      render: ({
+        value,
+        onChange,
+      }: {
+        value: unknown;
+        onChange: (value: unknown) => void;
+      }) => (
+        <InputNumber
+          placeholder={label ?? source}
+          value={value as number | undefined}
+          onChange={(v) => onChange(v ?? undefined)}
+          style={{ minWidth: 120 }}
+        />
+      ),
+    }),
+    [source, label],
+  );
+  useRegisterFilter(def);
+  return null;
+}

package/src/crud/filters/ReferenceFilter.tsx

@@ -1,173 +1,192 @@
-import { Select } from "antd";
-import { useMemo, useState } from "react";
-import type { BaseSourceProps, ChoiceOption, ReferenceProps } from "../types";
-import { useRegisterFilter } from "../context/FilterContext";
-import { useChoices } from "../utils/useChoices";
-
-export type SelectFilterProps = BaseSourceProps & {
-  choices: ChoiceOption[];
-  multiple?: boolean;
-};
-
-function SelectFilterInput({
-  source,
-  label,
-  choices,
-  multiple,
-  value,
-  onChange,
-}: SelectFilterProps & {
-  value: unknown;
-  onChange: (value: unknown) => void;
-}) {
-  return (
-    <Select
-      allowClear
-      mode={multiple ? "multiple" : undefined}
-      placeholder={label ?? source}
-      value={value as string | number | (string | number)[] | undefined}
-      onChange={onChange}
-      options={choices}
-      style={{ minWidth: 160 }}
-    />
-  );
-}
-
-export function SelectFilter({
-  source,
-  label,
-  choices,
-  multiple,
-}: SelectFilterProps) {
-  const def = useMemo(
-    () => ({
-      key: source,
-      source,
-      label,
-      render: ({
-        value,
-        onChange,
-      }: {
-        value: unknown;
-        onChange: (value: unknown) => void;
-      }) => (
-        <SelectFilterInput
-          source={source}
-          label={label}
-          choices={choices}
-          multiple={multiple}
-          value={value}
-          onChange={onChange}
-        />
-      ),
-    }),
-    [source, label, choices, multiple],
-  );
-  useRegisterFilter(def);
-  return null;
-}
-
-export type ReferenceFilterProps = BaseSourceProps &
-  ReferenceProps & {
-    multiple?: boolean;
-    search?: boolean;
-  };
-
-function ReferenceFilterInput({
-  source,
-  label,
-  reference,
-  choices,
-  optionLabel,
-  optionValue,
-  multiple,
-  search,
-  value,
-  onChange,
-}: ReferenceFilterProps & {
-  value: unknown;
-  onChange: (value: unknown) => void;
-}) {
-  const [searchText, setSearchText] = useState<string | undefined>();
-  const { options, loading } = useChoices(
-    choices,
-    reference,
-    optionLabel,
-    optionValue,
-    search ? searchText : undefined,
-  );
-  return (
-    <Select
-      allowClear
-      mode={multiple ? "multiple" : undefined}
-      placeholder={label ?? source}
-      value={value as string | number | (string | number)[] | undefined}
-      onChange={onChange}
-      options={options.map((o) => ({
-        label: o.label,
-        value: o.value as string | number,
-      }))}
-      loading={loading}
-      showSearch={search}
-      filterOption={search ? false : undefined}
-      onSearch={search ? setSearchText : undefined}
-      optionFilterProp="label"
-      style={{ minWidth: 180 }}
-    />
-  );
-}
-
-export function ReferenceFilter({
-  source,
-  label,
-  reference,
-  choices,
-  optionLabel = "name",
-  optionValue = "id",
-  multiple,
-  search,
-}: ReferenceFilterProps) {
-  const def = useMemo(
-    () => ({
-      key: source,
-      source,
-      label,
-      render: ({
-        value,
-        onChange,
-      }: {
-        value: unknown;
-        onChange: (value: unknown) => void;
-      }) => (
-        <ReferenceFilterInput
-          source={source}
-          label={label}
-          reference={reference}
-          choices={choices}
-          optionLabel={optionLabel}
-          optionValue={optionValue}
-          multiple={multiple}
-          search={search}
-          value={value}
-          onChange={onChange}
-        />
-      ),
-    }),
-    [
-      source,
-      label,
-      reference,
-      choices,
-      optionLabel,
-      optionValue,
-      multiple,
-      search,
-    ],
-  );
-  useRegisterFilter(def);
-  return null;
-}
-
-export function ReferenceManyFilter(props: ReferenceFilterProps) {
-  return <ReferenceFilter {...props} multiple />;
-}
+import { Select } from "antd";
+import { useMemo, useState } from "react";
+import type { BaseSourceProps, ChoiceOption, ReferenceProps } from "../types";
+import { useRegisterFilter } from "../context/FilterContext";
+import { useChoices } from "../utils/useChoices";
+import { referenceSelectNotFoundContent } from "../utils/referenceSelectNotFoundContent";
+
+export type SelectFilterProps = BaseSourceProps & {
+  choices: ChoiceOption[];
+  multiple?: boolean;
+};
+
+function SelectFilterInput({
+  source,
+  label,
+  choices,
+  multiple,
+  value,
+  onChange,
+}: SelectFilterProps & {
+  value: unknown;
+  onChange: (value: unknown) => void;
+}) {
+  return (
+    <Select
+      allowClear
+      mode={multiple ? "multiple" : undefined}
+      placeholder={label ?? source}
+      value={value as string | number | (string | number)[] | undefined}
+      onChange={onChange}
+      options={choices}
+      style={{ minWidth: 160 }}
+    />
+  );
+}
+
+export function SelectFilter({
+  source,
+  label,
+  choices,
+  multiple,
+}: SelectFilterProps) {
+  const def = useMemo(
+    () => ({
+      key: source,
+      source,
+      label,
+      render: ({
+        value,
+        onChange,
+      }: {
+        value: unknown;
+        onChange: (value: unknown) => void;
+      }) => (
+        <SelectFilterInput
+          source={source}
+          label={label}
+          choices={choices}
+          multiple={multiple}
+          value={value}
+          onChange={onChange}
+        />
+      ),
+    }),
+    [source, label, choices, multiple],
+  );
+  useRegisterFilter(def);
+  return null;
+}
+
+export type ReferenceFilterProps = BaseSourceProps &
+  ReferenceProps & {
+    multiple?: boolean;
+    search?: boolean;
+  };
+
+function ReferenceFilterInput({
+  source,
+  label,
+  reference,
+  choices,
+  optionLabel,
+  optionValue,
+  multiple,
+  search,
+  lazy = true,
+  fetchSelected = true,
+  value,
+  onChange,
+}: ReferenceFilterProps & {
+  value: unknown;
+  onChange: (value: unknown) => void;
+}) {
+  const [searchText, setSearchText] = useState<string | undefined>();
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const active = dropdownOpen || Boolean(searchText);
+
+  const { options, loading } = useChoices(
+    choices,
+    reference,
+    optionLabel,
+    optionValue,
+    search ? searchText : undefined,
+    { lazy, active, selectedValues: value, fetchSelected },
+  );
+
+  return (
+    <Select
+      allowClear
+      mode={multiple ? "multiple" : undefined}
+      placeholder={label ?? source}
+      value={value as string | number | (string | number)[] | undefined}
+      onChange={onChange}
+      options={options.map((o) => ({
+        label: o.label,
+        value: o.value as string | number,
+      }))}
+      loading={loading}
+      notFoundContent={referenceSelectNotFoundContent(loading)}
+      showSearch={search}
+      filterOption={search ? false : undefined}
+      onSearch={search ? setSearchText : undefined}
+      onDropdownVisibleChange={(open) => {
+        setDropdownOpen(open);
+        if (!open) setSearchText(undefined);
+      }}
+      optionFilterProp="label"
+      style={{ minWidth: 180 }}
+    />
+  );
+}
+
+export function ReferenceFilter({
+  source,
+  label,
+  reference,
+  choices,
+  optionLabel = "name",
+  optionValue = "id",
+  multiple,
+  search,
+  lazy = true,
+  fetchSelected = true,
+}: ReferenceFilterProps) {
+  const def = useMemo(
+    () => ({
+      key: source,
+      source,
+      label,
+      render: ({
+        value,
+        onChange,
+      }: {
+        value: unknown;
+        onChange: (value: unknown) => void;
+      }) => (
+        <ReferenceFilterInput
+          source={source}
+          label={label}
+          reference={reference}
+          choices={choices}
+          optionLabel={optionLabel}
+          optionValue={optionValue}
+          multiple={multiple}
+          search={search}
+          lazy={lazy}
+          fetchSelected={fetchSelected}
+          value={value}
+          onChange={onChange}
+        />
+      ),
+    }),
+    [
+      source,
+      label,
+      reference,
+      choices,
+      optionLabel,
+      optionValue,
+      multiple,
+      search,
+      lazy,
+      fetchSelected,
+    ],
+  );
+  useRegisterFilter(def);
+  return null;
+}
+
+export function ReferenceManyFilter(props: ReferenceFilterProps) {
+  return <ReferenceFilter {...props} multiple />;
+}

package/src/crud/filters/SelectFilter.tsx

@@ -1,44 +1,44 @@
-import { Select } from "antd";
-import { useMemo } from "react";
-import type { BaseSourceProps, ChoiceOption } from "../types";
-import { useRegisterFilter } from "../context/FilterContext";
-
-export type SelectFilterProps = BaseSourceProps & {
-  choices: ChoiceOption[];
-  multiple?: boolean;
-};
-
-export function SelectFilter({
-  source,
-  label,
-  choices,
-  multiple,
-}: SelectFilterProps) {
-  const def = useMemo(
-    () => ({
-      key: source,
-      source,
-      label,
-      render: ({
-        value,
-        onChange,
-      }: {
-        value: unknown;
-        onChange: (value: unknown) => void;
-      }) => (
-        <Select
-          allowClear
-          mode={multiple ? "multiple" : undefined}
-          placeholder={label ?? source}
-          value={value as string | number | (string | number)[] | undefined}
-          onChange={onChange}
-          options={choices}
-          style={{ minWidth: 160 }}
-        />
-      ),
-    }),
-    [source, label, choices, multiple],
-  );
-  useRegisterFilter(def);
-  return null;
-}
+import { Select } from "antd";
+import { useMemo } from "react";
+import type { BaseSourceProps, ChoiceOption } from "../types";
+import { useRegisterFilter } from "../context/FilterContext";
+
+export type SelectFilterProps = BaseSourceProps & {
+  choices: ChoiceOption[];
+  multiple?: boolean;
+};
+
+export function SelectFilter({
+  source,
+  label,
+  choices,
+  multiple,
+}: SelectFilterProps) {
+  const def = useMemo(
+    () => ({
+      key: source,
+      source,
+      label,
+      render: ({
+        value,
+        onChange,
+      }: {
+        value: unknown;
+        onChange: (value: unknown) => void;
+      }) => (
+        <Select
+          allowClear
+          mode={multiple ? "multiple" : undefined}
+          placeholder={label ?? source}
+          value={value as string | number | (string | number)[] | undefined}
+          onChange={onChange}
+          options={choices}
+          style={{ minWidth: 160 }}
+        />
+      ),
+    }),
+    [source, label, choices, multiple],
+  );
+  useRegisterFilter(def);
+  return null;
+}

package/src/crud/filters/TextFilter.tsx

@@ -1,36 +1,36 @@
-import { Input } from "antd";
-import { useMemo } from "react";
-import type { BaseSourceProps } from "../types";
-import { useRegisterFilter } from "../context/FilterContext";
-
-export type TextFilterProps = BaseSourceProps & {
-  placeholder?: string;
-};
-
-export function TextFilter({ source, label, placeholder }: TextFilterProps) {
-  const def = useMemo(
-    () => ({
-      key: source,
-      source,
-      label,
-      render: ({
-        value,
-        onChange,
-      }: {
-        value: unknown;
-        onChange: (value: unknown) => void;
-      }) => (
-        <Input
-          allowClear
-          placeholder={placeholder ?? label ?? source}
-          value={(value as string) ?? ""}
-          onChange={(e) => onChange(e.target.value || undefined)}
-          style={{ minWidth: 160 }}
-        />
-      ),
-    }),
-    [source, label, placeholder],
-  );
-  useRegisterFilter(def);
-  return null;
-}
+import { Input } from "antd";
+import { useMemo } from "react";
+import type { BaseSourceProps } from "../types";
+import { useRegisterFilter } from "../context/FilterContext";
+
+export type TextFilterProps = BaseSourceProps & {
+  placeholder?: string;
+};
+
+export function TextFilter({ source, label, placeholder }: TextFilterProps) {
+  const def = useMemo(
+    () => ({
+      key: source,
+      source,
+      label,
+      render: ({
+        value,
+        onChange,
+      }: {
+        value: unknown;
+        onChange: (value: unknown) => void;
+      }) => (
+        <Input
+          allowClear
+          placeholder={placeholder ?? label ?? source}
+          value={(value as string) ?? ""}
+          onChange={(e) => onChange(e.target.value || undefined)}
+          style={{ minWidth: 160 }}
+        />
+      ),
+    }),
+    [source, label, placeholder],
+  );
+  useRegisterFilter(def);
+  return null;
+}