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

Import-Export plugin for Payload

'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 { 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