useSupportCreateSuggestion story

Author: slax57

packages/ra-core/src/controller/input/useSupportCreateSuggestion.stories.tsx

@@ -0,0 +1,155 @@
+import * as React from 'react';
+import {
+    SupportCreateSuggestionOptions,
+    useSupportCreateSuggestion,
+    useCreateSuggestionContext,
+} from './useSupportCreateSuggestion';
+import { CreateBase } from '../create/CreateBase';
+import { SimpleForm, TextInput } from '../../test-ui';
+import { CoreAdminContext } from '../../core/CoreAdminContext';
+import { DataProvider } from '../../types';
+
+export default { title: 'ra-core/controller/input/useSupportCreateSuggestion' };
+
+const CreateElement = () => {
+    const { filter, onCancel, onCreate } = useCreateSuggestionContext();
+
+    return (
+        <CreateBase
+            redirect={false}
+            resource="authors"
+            mutationOptions={{
+                onSuccess: onCreate,
+            }}
+        >
+            <SimpleForm defaultValues={{ foo: filter }}>
+                <TextInput source="foo" />
+                <TextInput source="bar" />
+                <button type="button" onClick={onCancel}>
+                    Cancel
+                </button>
+            </SimpleForm>
+        </CreateBase>
+    );
+};
+
+export const UseSupportCreateSuggestion = (
+    options: Pick<
+        SupportCreateSuggestionOptions,
+        | 'createLabel'
+        | 'createItemLabel'
+        | 'createValue'
+        | 'createHintValue'
+        | 'optionText'
+    > & { withCreateElement?: boolean }
+) => {
+    const [value, setValue] = React.useState<string>('');
+    const [filter, setFilter] = React.useState<string>('');
+    const [createParams, setCreateParams] = React.useState<any>(null);
+    const [onCreateParams, setOnCreateParams] = React.useState<any>(null);
+
+    const { withCreateElement, ...rest } = options;
+
+    const {
+        createId,
+        createHintId,
+        getCreateItem,
+        handleChange,
+        createElement,
+        getOptionDisabled,
+    } = useSupportCreateSuggestion({
+        filter,
+        handleChange: eventOrValue => {
+            setValue(eventOrValue?.target?.value ?? eventOrValue.id);
+        },
+        onCreate: withCreateElement
+            ? undefined
+            : arg => {
+                  setOnCreateParams(arg);
+                  return { id: 'new_id_from_onCreate' };
+              },
+        create: withCreateElement ? <CreateElement /> : undefined,
+        ...rest,
+    });
+
+    const createItem = getCreateItem(filter);
+    const disabled = getOptionDisabled(createItem);
+
+    const dataProvider = {
+        create: async (_, args) => {
+            setCreateParams(args);
+            return { data: { id: 'new_id_from_create' } };
+        },
+    } as unknown as DataProvider;
+
+    return (
+        <CoreAdminContext dataProvider={dataProvider}>
+            <fieldset>
+                <legend>Return values</legend>
+                <pre>{JSON.stringify({ createId, createHintId }, null, 2)}</pre>
+            </fieldset>
+            <fieldset>
+                <legend>Create Item</legend>
+                <pre>{JSON.stringify({ createItem, disabled }, null, 2)}</pre>
+            </fieldset>
+            <form>
+                <fieldset>
+                    <legend>Inputs</legend>
+                    <label htmlFor="autocomplete-value">
+                        Autocomplete value
+                    </label>
+                    &nbsp;
+                    <input
+                        id="autocomplete-value"
+                        value={value || ''}
+                        onChange={handleChange}
+                    />
+                    <button
+                        type="button"
+                        onClick={() => {
+                            handleChange(createItem.id);
+                        }}
+                        disabled={disabled}
+                    >
+                        Simulate click on create
+                    </button>
+                    <br />
+                    <label htmlFor="autocomplete-filter">
+                        Autocomplete filter
+                    </label>
+                    &nbsp;
+                    <input
+                        id="autocomplete-filter"
+                        value={filter || ''}
+                        onChange={e => setFilter(e.target.value)}
+                    />
+                </fieldset>
+            </form>
+            {withCreateElement ? (
+                <>
+                    <fieldset>
+                        <legend>Create Element</legend>
+                        {createElement}
+                    </fieldset>
+                    <fieldset>
+                        <legend>Called create with</legend>
+                        <pre>{JSON.stringify(createParams, null, 2)}</pre>
+                    </fieldset>
+                </>
+            ) : (
+                <fieldset>
+                    <legend>Called onCreate with</legend>
+                    <pre>{JSON.stringify(onCreateParams, null, 2)}</pre>
+                </fieldset>
+            )}
+        </CoreAdminContext>
+    );
+};
+UseSupportCreateSuggestion.argTypes = {
+    createLabel: { control: 'text' },
+    createItemLabel: { control: 'text' },
+    createValue: { control: 'text' },
+    createHintValue: { control: 'text' },
+    optionText: { control: 'text' },
+    withCreateElement: { control: 'boolean' },
+};