Interface CreateProductFormProps<TFormCustomFields>

interface CreateProductFormProps<TFormCustomFields> {
    customFields?: {
        basicInfoSectionAfterCategory?: FormCustomFieldDefinition<CreateProductFormData<TFormCustomFields>, "customFields", string>[];
        basicInfoSectionEnd?: FormCustomFieldDefinition<CreateProductFormData<TFormCustomFields>, "customFields", string>[];
        conditionsSectionEnd?: FormCustomFieldDefinition<CreateProductFormData<TFormCustomFields>, "customFields", string>[];
        locationSectionEnd?: FormCustomFieldDefinition<CreateProductFormData<TFormCustomFields>, "customFields", string>[];
    };
    data: {
        attributeItemGroups?: CreateProductFormItemGroup[];
        categories: {
            id: string;
            name: string;
        }[];
    };
    defaultValues?: Partial<CreateProductFormData<TFormCustomFields>>;
    dropzone: {
        acceptTypes: Record<string, string[]>;
        onClear: undefined | (() => void);
        onDrop: undefined | (<T>(acceptedFiles, fileRejections, event) => void);
        uploadState: undefined | {
            percentage?: number;
            type: "uploadSingleFile";
        } | {
            type: "completeDisplayImage";
            url: string;
        };
    };
    isSubmitting?: boolean;
    labels: {
        attributeGroupsSection?: string;
        basicInfoSection: string;
        category: string;
        cityTownVillage: string;
        conditionsSection: string;
        description: string;
        dropzone: {
            afterUploadOptionsButton?: string;
            beforeUploadMessage: string;
            beforeUploadSubtitle?: string;
            deleteFileButton?: string;
            duringUploadMessage: string;
        };
        locationSection: string;
        name: string;
        prefecture: string;
        submitButton: string;
    };
    limits: {
        name: number;
    };
    onSubmit?: ((formData) => void);
    placeholders: {
        category: string;
        cityTownVillage: string;
        description: string;
        name: string;
        prefecture: string;
    };
    screenMode: "desktop" | "mobile";
}

Type Parameters

  • TFormCustomFields

Properties

customFields? data defaultValues? dropzone isSubmitting? labels limits onSubmit? placeholders screenMode

Properties

Optional customFields

customFields?: {
    basicInfoSectionAfterCategory?: FormCustomFieldDefinition<CreateProductFormData<TFormCustomFields>, "customFields", string>[];
    basicInfoSectionEnd?: FormCustomFieldDefinition<CreateProductFormData<TFormCustomFields>, "customFields", string>[];
    conditionsSectionEnd?: FormCustomFieldDefinition<CreateProductFormData<TFormCustomFields>, "customFields", string>[];
    locationSectionEnd?: FormCustomFieldDefinition<CreateProductFormData<TFormCustomFields>, "customFields", string>[];
}

Custom field configuration

Type declaration

data

data: {
    attributeItemGroups?: CreateProductFormItemGroup[];
    categories: {
        id: string;
        name: string;
    }[];
}

Data needed for dropdowns and other info from the backend

Type declaration

  • Optional attributeItemGroups?: CreateProductFormItemGroup[]

    Supported attribute items and categories

  • categories: {
        id: string;
        name: string;
    }[]

    Supported categories

Optional defaultValues

defaultValues?: Partial<CreateProductFormData<TFormCustomFields>>

Set default values (e.g. when using as edit form)

dropzone

dropzone: {
    acceptTypes: Record<string, string[]>;
    onClear: undefined | (() => void);
    onDrop: undefined | (<T>(acceptedFiles, fileRejections, event) => void);
    uploadState: undefined | {
        percentage?: number;
        type: "uploadSingleFile";
    } | {
        type: "completeDisplayImage";
        url: string;
    };
}

Properties for image dropzone

Type declaration

  • acceptTypes: Record<string, string[]>

    Types to accept

  • onClear: undefined | (() => void)

    Callback when 'remove image' is clicked after an image is selected

  • onDrop: undefined | (<T>(acceptedFiles, fileRejections, event) => void)

    Callback when image is dropped/selected on the cover image dropzone

  • uploadState: undefined | {
        percentage?: number;
        type: "uploadSingleFile";
    } | {
        type: "completeDisplayImage";
        url: string;
    }

    Upload status for the cover image dropzone

Optional isSubmitting

isSubmitting?: boolean

Is submitting state

labels

labels: {
    attributeGroupsSection?: string;
    basicInfoSection: string;
    category: string;
    cityTownVillage: string;
    conditionsSection: string;
    description: string;
    dropzone: {
        afterUploadOptionsButton?: string;
        beforeUploadMessage: string;
        beforeUploadSubtitle?: string;
        deleteFileButton?: string;
        duringUploadMessage: string;
    };
    locationSection: string;
    name: string;
    prefecture: string;
    submitButton: string;
}

Label values for the form

Type declaration

  • Optional attributeGroupsSection?: string
  • basicInfoSection: string
  • category: string
  • cityTownVillage: string
  • conditionsSection: string
  • description: string
  • dropzone: {
        afterUploadOptionsButton?: string;
        beforeUploadMessage: string;
        beforeUploadSubtitle?: string;
        deleteFileButton?: string;
        duringUploadMessage: string;
    }
    • Optional afterUploadOptionsButton?: string
    • beforeUploadMessage: string
    • Optional beforeUploadSubtitle?: string
    • Optional deleteFileButton?: string
    • duringUploadMessage: string
  • locationSection: string
  • name: string
  • prefecture: string
  • submitButton: string

limits

limits: {
    name: number;
}

Character limits for various fields

Type declaration

  • name: number

Optional onSubmit

onSubmit?: ((formData) => void)

Type declaration

placeholders

placeholders: {
    category: string;
    cityTownVillage: string;
    description: string;
    name: string;
    prefecture: string;
}

Placeholder values for the form

Type declaration

  • category: string
  • cityTownVillage: string
  • description: string
  • name: string
  • prefecture: string

screenMode

screenMode: "desktop" | "mobile"

What size the screen currently is (affects page layout)

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc