diff --git a/src/collections/Forms/DynamicPriceSelector.tsx b/src/collections/Forms/DynamicPriceSelector.tsx index 830f8c4..92fd011 100644 --- a/src/collections/Forms/DynamicPriceSelector.tsx +++ b/src/collections/Forms/DynamicPriceSelector.tsx @@ -1,79 +1,60 @@ 'use client' -import React, { useEffect, useState } from 'react'; -import { Text, useWatchForm } from 'payload/components/forms'; -import { Props as TextFieldType } from 'payload/dist/admin/components/forms/field-types/Text/types'; -import { Data } from 'payload/dist/admin/components/forms/Form/types'; -import { useLocale } from "payload/components/utilities"; +import React, { useEffect, useState } from 'react' +import { Text, useWatchForm } from 'payload/components/forms' +import { useLocale } from 'payload/components/utilities' +import { Props as TextFieldType } from 'payload/dist/admin/components/forms/field-types/Text/types' +import { Data } from 'payload/dist/admin/components/forms/Form/types' type FieldWithID = { id: string name: string -}; +} -export const DynamicPriceSelector: React.FC = (props) => { - const { - path, - label - } = props; +export const DynamicPriceSelector: React.FC = props => { + const { path, label } = props - const { - fields, - getDataByPath, - getData - } = useWatchForm(); + const { fields, getDataByPath, getData } = useWatchForm() - const locale = useLocale(); + const locale = useLocale() - const [isNumberField, setIsNumberField] = useState(); - const [valueType, setValueType] = useState<'static' | 'valueOfField'>(); + const [isNumberField, setIsNumberField] = useState() + const [valueType, setValueType] = useState<'static' | 'valueOfField'>() // only number fields can use 'valueOfField` useEffect(() => { if (path) { const parentPath = path.split('.').slice(0, -1).join('.') - const paymentFieldData: any = getDataByPath(parentPath); + const paymentFieldData: any = getDataByPath(parentPath) if (paymentFieldData) { - const { - fieldToUse, - valueType - } = paymentFieldData; + const { fieldToUse, valueType } = paymentFieldData - setValueType(valueType); + setValueType(valueType) - const { fields: allFields }: Data = getData(); - const field = allFields.find((field: FieldWithID) => field.name === fieldToUse); + const { fields: allFields }: Data = getData() + const field = allFields.find((field: FieldWithID) => field.name === fieldToUse) if (field) { - const { blockType } = field; - setIsNumberField(blockType === 'number'); + const { blockType } = field + setIsNumberField(blockType === 'number') } } } - }, [ - fields, - path, - getDataByPath, - getData - ]); + }, [fields, path, getDataByPath, getData]) // TODO: make this a number field, block by Payload if (valueType === 'static') { - return ( - - ) + return } - const localLabels = typeof label === 'object' ? label : { [locale]: label }; - const labelValue = localLabels[locale] || localLabels['en'] || ''; + const localLabels = typeof label === 'object' ? label : { [locale]: label } + const labelValue = localLabels[locale] || localLabels['en'] || '' if (valueType === 'valueOfField' && !isNumberField) { return (
-
- {labelValue} -
+
{labelValue}
= (props) => { } return null -}; +}