payloadcms-import-export-plugin/dist/components/SortBy/index.js

A comprehensive Payload CMS plugin that enables seamless import and export of collection data with support for CSV and JSON formats, featuring advanced field mapping, duplicate handling, and batch processing capabilities.

'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { FieldLabel, ReactSelect, useConfig, useDocumentInfo, useField, useListQuery } from '@payloadcms/ui';
import React, { useEffect, useState } from 'react';
import { useImportExport } from '../ImportExportProvider/index.js';
import { reduceFields } from '../FieldsToExport/reduceFields.js';
// import { reduceFields } from '../FieldsToExport/reduceFields.js'
// import { useImportExport } from '../ImportExportProvider/index.js'
const baseClass = 'sort-by-fields';
export const SortBy = (props)=>{
    const { id } = useDocumentInfo();
    const { setValue, value } = useField();
    const { value: collectionSlug } = useField({
        path: 'collectionSlug'
    });
    const { query } = useListQuery();
    const { getEntityConfig } = useConfig();
    const { collection } = useImportExport();
    const [displayedValue, setDisplayedValue] = useState(null);
    const collectionConfig = getEntityConfig({
        collectionSlug: collectionSlug ?? collection
    });
    const fieldOptions = reduceFields({
        fields: collectionConfig?.fields
    });
    // Sync displayedValue with value from useField
    useEffect(()=>{
        if (!value) {
            setDisplayedValue(null);
            return;
        }
        const option = fieldOptions.find((field)=>field.value === value);
        if (option && (!displayedValue || displayedValue.value !== value)) {
            setDisplayedValue(option);
        }
    }, [
        displayedValue,
        fieldOptions,
        value
    ]);
    useEffect(()=>{
        if (id || !query?.sort || value) {
            return;
        }
        const option = fieldOptions.find((field)=>field.value === query.sort);
        if (option) {
            setValue(option.value);
            setDisplayedValue(option);
        }
    }, [
        fieldOptions,
        id,
        query?.sort,
        value,
        setValue
    ]);
    const onChange = (option)=>{
        if (!option) {
            setValue('');
            setDisplayedValue(null);
        } else {
            setValue(option.value);
            setDisplayedValue(option);
        }
    };
    return /*#__PURE__*/ _jsxs("div", {
        className: baseClass,
        style: {
            '--field-width': '33%'
        },
        children: [
            /*#__PURE__*/ _jsx(FieldLabel, {
                label: props.field.label,
                path: props.path
            }),
            /*#__PURE__*/ _jsx(ReactSelect, {
                className: baseClass,
                disabled: props.readOnly,
                getOptionValue: (option)=>String(option.value),
                inputId: `field-${props.path.replace(/\./g, '__')}`,
                isClearable: true,
                isSortable: true,
                // @ts-expect-error react select option
                onChange: onChange,
                options: fieldOptions,
                // @ts-expect-error react select
                value: displayedValue
            })
        ]
    });
};

//# sourceMappingURL=index.js.map