@payloadcms/ui 3.0.0-alpha.53 → 3.0.0-alpha.55
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/elements/DocumentControls/index.d.ts.map +1 -1
- package/dist/elements/DocumentControls/index.js +2 -3
- package/dist/elements/DocumentControls/index.js.map +1 -1
- package/dist/elements/FileDetails/index.js +1 -1
- package/dist/elements/FileDetails/index.js.map +1 -1
- package/dist/elements/Table/DefaultCell/fields/File/index.js +1 -1
- package/dist/elements/Table/DefaultCell/fields/File/index.js.map +1 -1
- package/dist/fields/Array/index.d.ts.map +1 -1
- package/dist/fields/Array/index.js +3 -2
- package/dist/fields/Array/index.js.map +1 -1
- package/dist/fields/Blocks/index.d.ts.map +1 -1
- package/dist/fields/Blocks/index.js +3 -2
- package/dist/fields/Blocks/index.js.map +1 -1
- package/dist/fields/Checkbox/index.d.ts.map +1 -1
- package/dist/fields/Checkbox/index.js +3 -2
- package/dist/fields/Checkbox/index.js.map +1 -1
- package/dist/fields/Code/index.d.ts.map +1 -1
- package/dist/fields/Code/index.js +3 -2
- package/dist/fields/Code/index.js.map +1 -1
- package/dist/fields/Collapsible/index.d.ts.map +1 -1
- package/dist/fields/Collapsible/index.js +3 -2
- package/dist/fields/Collapsible/index.js.map +1 -1
- package/dist/fields/DateTime/index.d.ts.map +1 -1
- package/dist/fields/DateTime/index.js +3 -2
- package/dist/fields/DateTime/index.js.map +1 -1
- package/dist/fields/Email/index.d.ts.map +1 -1
- package/dist/fields/Email/index.js +4 -3
- package/dist/fields/Email/index.js.map +1 -1
- package/dist/fields/Group/index.d.ts.map +1 -1
- package/dist/fields/Group/index.js +3 -2
- package/dist/fields/Group/index.js.map +1 -1
- package/dist/fields/JSON/index.d.ts.map +1 -1
- package/dist/fields/JSON/index.js +3 -2
- package/dist/fields/JSON/index.js.map +1 -1
- package/dist/fields/Number/index.d.ts.map +1 -1
- package/dist/fields/Number/index.js +3 -2
- package/dist/fields/Number/index.js.map +1 -1
- package/dist/fields/Point/index.d.ts.map +1 -1
- package/dist/fields/Point/index.js +4 -3
- package/dist/fields/Point/index.js.map +1 -1
- package/dist/fields/RadioGroup/index.d.ts.map +1 -1
- package/dist/fields/RadioGroup/index.js +3 -2
- package/dist/fields/RadioGroup/index.js.map +1 -1
- package/dist/fields/Relationship/index.d.ts.map +1 -1
- package/dist/fields/Relationship/index.js +3 -2
- package/dist/fields/Relationship/index.js.map +1 -1
- package/dist/fields/Select/index.d.ts.map +1 -1
- package/dist/fields/Select/index.js +3 -2
- package/dist/fields/Select/index.js.map +1 -1
- package/dist/fields/Tabs/index.d.ts.map +1 -1
- package/dist/fields/Tabs/index.js +3 -2
- package/dist/fields/Tabs/index.js.map +1 -1
- package/dist/fields/Text/index.d.ts.map +1 -1
- package/dist/fields/Text/index.js +5 -4
- package/dist/fields/Text/index.js.map +1 -1
- package/dist/fields/Textarea/index.d.ts.map +1 -1
- package/dist/fields/Textarea/index.js +4 -3
- package/dist/fields/Textarea/index.js.map +1 -1
- package/dist/fields/Upload/index.d.ts.map +1 -1
- package/dist/fields/Upload/index.js +4 -2
- package/dist/fields/Upload/index.js.map +1 -1
- package/package.json +4 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/fields/RadioGroup/index.tsx"],"sourcesContent":["/* eslint-disable react/destructuring-assignment */\n/* eslint-disable react-hooks/exhaustive-deps */\n'use client'\nimport type { FieldBase, Option } from 'payload/types'\n\nimport { optionIsObject } from 'payload/types'\nimport React, { useCallback } from 'react'\n\nimport { FieldLabel } from '../../forms/FieldLabel/index.js'\nimport { useForm } from '../../forms/Form/context.js'\nimport { useField } from '../../forms/useField/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { fieldBaseClass } from '../shared/index.js'\nimport { Radio } from './Radio/index.js'\nimport './index.scss'\n\nconst baseClass = 'radio-group'\n\nimport { FieldDescription } from '@payloadcms/ui/forms/FieldDescription'\nimport { FieldError } from '@payloadcms/ui/forms/FieldError'\nimport { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'\n\nimport type { FormFieldBase } from '../shared/index.js'\n\nexport type RadioFieldProps = FormFieldBase & {\n label?: FieldBase['label']\n layout?: 'horizontal' | 'vertical'\n name?: string\n onChange?: OnChange\n options?: Option[]\n path?: string\n value?: string\n width?: string\n}\n\nexport type OnChange<T = string> = (value: T) => void\n\nconst RadioGroupField: React.FC<RadioFieldProps> = (props) => {\n const {\n name,\n CustomDescription,\n CustomError,\n CustomLabel,\n className,\n descriptionProps,\n errorProps,\n label,\n labelProps,\n layout = 'horizontal',\n onChange: onChangeFromProps,\n options = [],\n path: pathFromProps,\n readOnly,\n required,\n style,\n validate,\n value: valueFromProps,\n width,\n } = props\n\n const { uuid } = useForm()\n\n const memoizedValidate = useCallback(\n (value, validationOptions) => {\n if (typeof validate === 'function')\n return validate(value, { ...validationOptions, options, required })\n },\n [validate, options, required],\n )\n\n const { path: pathFromContext } = useFieldProps()\n\n const {\n path,\n setValue,\n showError,\n value: valueFromContext,\n } = useField<string>({\n path: pathFromContext || pathFromProps || name,\n validate: memoizedValidate,\n })\n\n const value = valueFromContext || valueFromProps\n\n return (\n <div\n className={[\n fieldBaseClass,\n baseClass,\n className,\n `${baseClass}--layout-${layout}`,\n showError && 'error',\n readOnly && `${baseClass}--read-only`,\n ]\n .filter(Boolean)\n .join(' ')}\n style={{\n ...style,\n width,\n }}\n >\n <div className={`${baseClass}__error-wrap`}>\n <FieldError CustomError={CustomError} path={path} {...(errorProps || {})} />\n </div>\n <FieldLabel\n CustomLabel={CustomLabel}\n label={label}\n required={required}\n {...(labelProps || {})}\n />\n <ul className={`${baseClass}--group`} id={`field-${path.replace(/\\./g, '__')}`}>\n {options.map((option) => {\n let optionValue = ''\n\n if (optionIsObject(option)) {\n optionValue = option.value\n } else {\n optionValue = option\n }\n\n const isSelected = String(optionValue) === String(value)\n\n const id = `field-${path}-${optionValue}${uuid ? `-${uuid}` : ''}`\n\n return (\n <li key={`${path} - ${optionValue}`}>\n <Radio\n id={id}\n isSelected={isSelected}\n onChange={() => {\n if (typeof onChangeFromProps === 'function') {\n onChangeFromProps(optionValue)\n }\n\n if (!readOnly) {\n setValue(optionValue)\n }\n }}\n option={optionIsObject(option) ? option : { label: option, value: option }}\n path={path}\n uuid={uuid}\n />\n </li>\n )\n })}\n </ul>\n {CustomDescription !== undefined ? (\n CustomDescription\n ) : (\n <FieldDescription {...(descriptionProps || {})} />\n )}\n </div>\n )\n}\n\nexport const RadioGroup = withCondition(RadioGroupField)\n"],"names":["optionIsObject","React","useCallback","FieldLabel","useForm","useField","withCondition","fieldBaseClass","Radio","baseClass","FieldDescription","FieldError","useFieldProps","RadioGroupField","props","name","CustomDescription","CustomError","CustomLabel","className","descriptionProps","errorProps","label","labelProps","layout","onChange","onChangeFromProps","options","path","pathFromProps","readOnly","required","style","validate","value","valueFromProps","width","uuid","memoizedValidate","validationOptions","pathFromContext","setValue","showError","valueFromContext","div","filter","Boolean","join","ul","id","replace","map","option","optionValue","isSelected","String","li","key","undefined","RadioGroup"],"mappings":"AAAA,iDAAiD,GACjD,8CAA8C,GAC9C;AAGA,SAASA,cAAc,QAAQ,gBAAe;AAC9C,OAAOC,SAASC,WAAW,QAAQ,QAAO;AAE1C,SAASC,UAAU,QAAQ,kCAAiC;AAC5D,SAASC,OAAO,QAAQ,8BAA6B;AACrD,SAASC,QAAQ,QAAQ,gCAA+B;AACxD,SAASC,aAAa,QAAQ,qCAAoC;AAClE,SAASC,cAAc,QAAQ,qBAAoB;AACnD,SAASC,KAAK,QAAQ,mBAAkB;AAGxC,MAAMC,YAAY;AAElB,SAASC,gBAAgB,QAAQ,wCAAuC;AACxE,SAASC,UAAU,QAAQ,kCAAiC;AAC5D,SAASC,aAAa,QAAQ,0CAAyC;AAiBvE,MAAMC,kBAA6C,CAACC;IAClD,MAAM,EACJC,IAAI,EACJC,iBAAiB,EACjBC,WAAW,EACXC,WAAW,EACXC,SAAS,EACTC,gBAAgB,EAChBC,UAAU,EACVC,KAAK,EACLC,UAAU,EACVC,SAAS,YAAY,EACrBC,UAAUC,iBAAiB,EAC3BC,UAAU,EAAE,EACZC,MAAMC,aAAa,EACnBC,
|
|
1
|
+
{"version":3,"sources":["../../../src/fields/RadioGroup/index.tsx"],"sourcesContent":["/* eslint-disable react/destructuring-assignment */\n/* eslint-disable react-hooks/exhaustive-deps */\n'use client'\nimport type { FieldBase, Option } from 'payload/types'\n\nimport { optionIsObject } from 'payload/types'\nimport React, { useCallback } from 'react'\n\nimport { FieldLabel } from '../../forms/FieldLabel/index.js'\nimport { useForm } from '../../forms/Form/context.js'\nimport { useField } from '../../forms/useField/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { fieldBaseClass } from '../shared/index.js'\nimport { Radio } from './Radio/index.js'\nimport './index.scss'\n\nconst baseClass = 'radio-group'\n\nimport { FieldDescription } from '@payloadcms/ui/forms/FieldDescription'\nimport { FieldError } from '@payloadcms/ui/forms/FieldError'\nimport { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'\n\nimport type { FormFieldBase } from '../shared/index.js'\n\nexport type RadioFieldProps = FormFieldBase & {\n label?: FieldBase['label']\n layout?: 'horizontal' | 'vertical'\n name?: string\n onChange?: OnChange\n options?: Option[]\n path?: string\n value?: string\n width?: string\n}\n\nexport type OnChange<T = string> = (value: T) => void\n\nconst RadioGroupField: React.FC<RadioFieldProps> = (props) => {\n const {\n name,\n CustomDescription,\n CustomError,\n CustomLabel,\n className,\n descriptionProps,\n errorProps,\n label,\n labelProps,\n layout = 'horizontal',\n onChange: onChangeFromProps,\n options = [],\n path: pathFromProps,\n readOnly: readOnlyFromProps,\n required,\n style,\n validate,\n value: valueFromProps,\n width,\n } = props\n\n const { uuid } = useForm()\n\n const memoizedValidate = useCallback(\n (value, validationOptions) => {\n if (typeof validate === 'function')\n return validate(value, { ...validationOptions, options, required })\n },\n [validate, options, required],\n )\n\n const { path: pathFromContext, readOnly: readOnlyFromContext } = useFieldProps()\n const readOnly = readOnlyFromProps || readOnlyFromContext\n\n const {\n path,\n setValue,\n showError,\n value: valueFromContext,\n } = useField<string>({\n path: pathFromContext || pathFromProps || name,\n validate: memoizedValidate,\n })\n\n const value = valueFromContext || valueFromProps\n\n return (\n <div\n className={[\n fieldBaseClass,\n baseClass,\n className,\n `${baseClass}--layout-${layout}`,\n showError && 'error',\n readOnly && `${baseClass}--read-only`,\n ]\n .filter(Boolean)\n .join(' ')}\n style={{\n ...style,\n width,\n }}\n >\n <div className={`${baseClass}__error-wrap`}>\n <FieldError CustomError={CustomError} path={path} {...(errorProps || {})} />\n </div>\n <FieldLabel\n CustomLabel={CustomLabel}\n label={label}\n required={required}\n {...(labelProps || {})}\n />\n <ul className={`${baseClass}--group`} id={`field-${path.replace(/\\./g, '__')}`}>\n {options.map((option) => {\n let optionValue = ''\n\n if (optionIsObject(option)) {\n optionValue = option.value\n } else {\n optionValue = option\n }\n\n const isSelected = String(optionValue) === String(value)\n\n const id = `field-${path}-${optionValue}${uuid ? `-${uuid}` : ''}`\n\n return (\n <li key={`${path} - ${optionValue}`}>\n <Radio\n id={id}\n isSelected={isSelected}\n onChange={() => {\n if (typeof onChangeFromProps === 'function') {\n onChangeFromProps(optionValue)\n }\n\n if (!readOnly) {\n setValue(optionValue)\n }\n }}\n option={optionIsObject(option) ? option : { label: option, value: option }}\n path={path}\n uuid={uuid}\n />\n </li>\n )\n })}\n </ul>\n {CustomDescription !== undefined ? (\n CustomDescription\n ) : (\n <FieldDescription {...(descriptionProps || {})} />\n )}\n </div>\n )\n}\n\nexport const RadioGroup = withCondition(RadioGroupField)\n"],"names":["optionIsObject","React","useCallback","FieldLabel","useForm","useField","withCondition","fieldBaseClass","Radio","baseClass","FieldDescription","FieldError","useFieldProps","RadioGroupField","props","name","CustomDescription","CustomError","CustomLabel","className","descriptionProps","errorProps","label","labelProps","layout","onChange","onChangeFromProps","options","path","pathFromProps","readOnly","readOnlyFromProps","required","style","validate","value","valueFromProps","width","uuid","memoizedValidate","validationOptions","pathFromContext","readOnlyFromContext","setValue","showError","valueFromContext","div","filter","Boolean","join","ul","id","replace","map","option","optionValue","isSelected","String","li","key","undefined","RadioGroup"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Relationship/index.tsx"],"names":[],"mappings":"AAUA,OAAO,KAA+D,MAAM,OAAO,CAAA;AAGnF,OAAO,KAAK,EAAsB,sBAAsB,EAAS,MAAM,YAAY,CAAA;AAenF,OAAO,cAAc,CAAA;AASrB,OAAO,EAAE,sBAAsB,EAAE,CAAA;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Relationship/index.tsx"],"names":[],"mappings":"AAUA,OAAO,KAA+D,MAAM,OAAO,CAAA;AAGnF,OAAO,KAAK,EAAsB,sBAAsB,EAAS,MAAM,YAAY,CAAA;AAenF,OAAO,cAAc,CAAA;AASrB,OAAO,EAAE,sBAAsB,EAAE,CAAA;AAsiBjC,eAAO,MAAM,YAAY,kCAAmC,CAAA"}
|
|
@@ -25,7 +25,7 @@ import { SingleValue } from './select-components/SingleValue/index.js';
|
|
|
25
25
|
const maxResultsPerRequest = 10;
|
|
26
26
|
const baseClass = 'relationship';
|
|
27
27
|
const RelationshipField = (props)=>{
|
|
28
|
-
const { name, CustomDescription, CustomError, CustomLabel, allowCreate = true, className, descriptionProps, errorProps, hasMany, isSortable = true, label, labelProps, path: pathFromProps, readOnly, relationTo, required, sortOptions, style, validate, width } = props;
|
|
28
|
+
const { name, CustomDescription, CustomError, CustomLabel, allowCreate = true, className, descriptionProps, errorProps, hasMany, isSortable = true, label, labelProps, path: pathFromProps, readOnly: readOnlyFromProps, relationTo, required, sortOptions, style, validate, width } = props;
|
|
29
29
|
const config = useConfig();
|
|
30
30
|
const { collections, routes: { api }, serverURL } = config;
|
|
31
31
|
const { i18n, t } = useTranslation();
|
|
@@ -53,7 +53,8 @@ const RelationshipField = (props)=>{
|
|
|
53
53
|
validate,
|
|
54
54
|
required
|
|
55
55
|
]);
|
|
56
|
-
const { path: pathFromContext } = useFieldProps();
|
|
56
|
+
const { path: pathFromContext, readOnly: readOnlyFromContext } = useFieldProps();
|
|
57
|
+
const readOnly = readOnlyFromProps || readOnlyFromContext;
|
|
57
58
|
const { filterOptions, initialValue, path, setValue, showError, value } = useField({
|
|
58
59
|
path: pathFromContext || pathFromProps || name,
|
|
59
60
|
validate: memoizedValidate
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/fields/Relationship/index.tsx"],"sourcesContent":["'use client'\nimport type { PaginatedDocs } from 'payload/database'\nimport type { Where } from 'payload/types'\n\nimport { FieldDescription } from '@payloadcms/ui/forms/FieldDescription'\nimport { FieldError } from '@payloadcms/ui/forms/FieldError'\nimport { FieldLabel } from '@payloadcms/ui/forms/FieldLabel'\nimport { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'\nimport { wordBoundariesRegex } from 'payload/utilities'\nimport qs from 'qs'\nimport React, { useCallback, useEffect, useReducer, useRef, useState } from 'react'\n\nimport type { DocumentDrawerProps } from '../../elements/DocumentDrawer/types.js'\nimport type { GetResults, Option, RelationshipFieldProps, Value } from './types.js'\n\nimport { ReactSelect } from '../../elements/ReactSelect/index.js'\nimport { useFormProcessing } from '../../forms/Form/context.js'\nimport { useField } from '../../forms/useField/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { useDebouncedCallback } from '../../hooks/useDebouncedCallback.js'\nimport { useAuth } from '../../providers/Auth/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useLocale } from '../../providers/Locale/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { fieldBaseClass } from '../shared/index.js'\nimport { AddNewRelation } from './AddNew/index.js'\nimport { createRelationMap } from './createRelationMap.js'\nimport { findOptionsByValue } from './findOptionsByValue.js'\nimport './index.scss'\nimport { optionsReducer } from './optionsReducer.js'\nimport { MultiValueLabel } from './select-components/MultiValueLabel/index.js'\nimport { SingleValue } from './select-components/SingleValue/index.js'\n\nconst maxResultsPerRequest = 10\n\nconst baseClass = 'relationship'\n\nexport { RelationshipFieldProps }\n\nconst RelationshipField: React.FC<RelationshipFieldProps> = (props) => {\n const {\n name,\n CustomDescription,\n CustomError,\n CustomLabel,\n allowCreate = true,\n className,\n descriptionProps,\n errorProps,\n hasMany,\n isSortable = true,\n label,\n labelProps,\n path: pathFromProps,\n readOnly,\n relationTo,\n required,\n sortOptions,\n style,\n validate,\n width,\n } = props\n\n const config = useConfig()\n\n const {\n collections,\n routes: { api },\n serverURL,\n } = config\n\n const { i18n, t } = useTranslation()\n const { permissions } = useAuth()\n const { code: locale } = useLocale()\n const formProcessing = useFormProcessing()\n const hasMultipleRelations = Array.isArray(relationTo)\n const [options, dispatchOptions] = useReducer(optionsReducer, [])\n const [lastFullyLoadedRelation, setLastFullyLoadedRelation] = useState(-1)\n const [lastLoadedPage, setLastLoadedPage] = useState<Record<string, number>>({})\n const [errorLoading, setErrorLoading] = useState('')\n const [search, setSearch] = useState('')\n const [isLoading, setIsLoading] = useState(false)\n const [enableWordBoundarySearch, setEnableWordBoundarySearch] = useState(false)\n const menuIsOpen = useRef(false)\n const hasLoadedFirstPageRef = useRef(false)\n\n const memoizedValidate = useCallback(\n (value, validationOptions) => {\n if (typeof validate === 'function') {\n return validate(value, { ...validationOptions, required })\n }\n },\n [validate, required],\n )\n const { path: pathFromContext } = useFieldProps()\n\n const { filterOptions, initialValue, path, setValue, showError, value } = useField<\n Value | Value[]\n >({\n path: pathFromContext || pathFromProps || name,\n validate: memoizedValidate,\n })\n\n const valueRef = useRef(value)\n valueRef.current = value\n\n const [drawerIsOpen, setDrawerIsOpen] = useState(false)\n\n const getResults: GetResults = useCallback(\n async ({\n lastFullyLoadedRelation: lastFullyLoadedRelationArg,\n lastLoadedPage: lastLoadedPageArg,\n onSuccess,\n search: searchArg,\n sort,\n value: valueArg,\n }) => {\n if (!permissions) {\n return\n }\n const lastFullyLoadedRelationToUse =\n typeof lastFullyLoadedRelationArg !== 'undefined' ? lastFullyLoadedRelationArg : -1\n\n const relations = Array.isArray(relationTo) ? relationTo : [relationTo]\n const relationsToFetch =\n lastFullyLoadedRelationToUse === -1\n ? relations\n : relations.slice(lastFullyLoadedRelationToUse + 1)\n\n let resultsFetched = 0\n const relationMap = createRelationMap({\n hasMany,\n relationTo,\n value: valueArg,\n })\n\n if (!errorLoading) {\n await relationsToFetch.reduce(async (priorRelation, relation) => {\n const relationFilterOption = filterOptions?.[relation]\n\n let lastLoadedPageToUse\n if (search !== searchArg) {\n lastLoadedPageToUse = 1\n } else {\n lastLoadedPageToUse = lastLoadedPageArg[relation] + 1\n }\n await priorRelation\n\n if (relationFilterOption === false) {\n setLastFullyLoadedRelation(relations.indexOf(relation))\n return Promise.resolve()\n }\n\n if (resultsFetched < 10) {\n const collection = collections.find((coll) => coll.slug === relation)\n let fieldToSearch = collection?.defaultSort || collection?.admin?.useAsTitle || 'id'\n if (!searchArg) {\n if (typeof sortOptions === 'string') {\n fieldToSearch = sortOptions\n } else if (sortOptions?.[relation]) {\n fieldToSearch = sortOptions[relation]\n }\n }\n\n const query: {\n [key: string]: unknown\n where: Where\n } = {\n depth: 0,\n draft: true,\n limit: maxResultsPerRequest,\n locale,\n page: lastLoadedPageToUse,\n sort: fieldToSearch,\n where: {\n and: [\n {\n id: {\n not_in: relationMap[relation],\n },\n },\n ],\n },\n }\n\n if (searchArg) {\n query.where.and.push({\n [fieldToSearch]: {\n like: searchArg,\n },\n })\n }\n\n if (relationFilterOption && typeof relationFilterOption !== 'boolean') {\n query.where.and.push(relationFilterOption)\n }\n\n const response = await fetch(`${serverURL}${api}/${relation}?${qs.stringify(query)}`, {\n credentials: 'include',\n headers: {\n 'Accept-Language': i18n.language,\n },\n })\n\n if (response.ok) {\n const data: PaginatedDocs<unknown> = await response.json()\n setLastLoadedPage((prevState) => {\n return {\n ...prevState,\n [relation]: lastLoadedPageToUse,\n }\n })\n\n if (!data.nextPage) {\n setLastFullyLoadedRelation(relations.indexOf(relation))\n }\n\n if (data.docs.length > 0) {\n resultsFetched += data.docs.length\n\n dispatchOptions({\n type: 'ADD',\n collection,\n // TODO: fix this\n // @ts-expect-error-next-line\n config,\n docs: data.docs,\n i18n,\n sort,\n })\n }\n } else if (response.status === 403) {\n setLastFullyLoadedRelation(relations.indexOf(relation))\n dispatchOptions({\n type: 'ADD',\n collection,\n // TODO: fix this\n // @ts-expect-error-next-line\n config,\n docs: [],\n i18n,\n ids: relationMap[relation],\n sort,\n })\n } else {\n setErrorLoading(t('error:unspecific'))\n }\n }\n }, Promise.resolve())\n\n if (typeof onSuccess === 'function') onSuccess()\n }\n },\n [\n permissions,\n relationTo,\n hasMany,\n errorLoading,\n search,\n collections,\n locale,\n filterOptions,\n serverURL,\n sortOptions,\n api,\n i18n,\n config,\n t,\n ],\n )\n\n const updateSearch = useDebouncedCallback((searchArg: string, valueArg: Value | Value[]) => {\n void getResults({ lastLoadedPage: {}, search: searchArg, sort: true, value: valueArg })\n setSearch(searchArg)\n }, 300)\n\n const handleInputChange = useCallback(\n (searchArg: string, valueArg: Value | Value[]) => {\n if (search !== searchArg) {\n setLastLoadedPage({})\n updateSearch(searchArg, valueArg, searchArg !== '')\n }\n },\n [search, updateSearch],\n )\n\n // ///////////////////////////////////\n // Ensure we have an option for each value\n // ///////////////////////////////////\n\n useEffect(() => {\n const relationMap = createRelationMap({\n hasMany,\n relationTo,\n value,\n })\n\n void Object.entries(relationMap).reduce(async (priorRelation, [relation, ids]) => {\n await priorRelation\n\n const idsToLoad = ids.filter((id) => {\n return !options.find((optionGroup) =>\n optionGroup?.options?.find(\n (option) => option.value === id && option.relationTo === relation,\n ),\n )\n })\n\n if (idsToLoad.length > 0) {\n const query = {\n depth: 0,\n draft: true,\n limit: idsToLoad.length,\n locale,\n where: {\n id: {\n in: idsToLoad,\n },\n },\n }\n\n if (!errorLoading) {\n const response = await fetch(`${serverURL}${api}/${relation}?${qs.stringify(query)}`, {\n credentials: 'include',\n headers: {\n 'Accept-Language': i18n.language,\n },\n })\n\n const collection = collections.find((coll) => coll.slug === relation)\n let docs = []\n\n if (response.ok) {\n const data = await response.json()\n docs = data.docs\n }\n\n dispatchOptions({\n type: 'ADD',\n collection,\n // TODO: fix this\n // @ts-expect-error-next-line\n config,\n docs,\n i18n,\n ids: idsToLoad,\n sort: true,\n })\n }\n }\n }, Promise.resolve())\n }, [\n options,\n value,\n hasMany,\n errorLoading,\n collections,\n hasMultipleRelations,\n serverURL,\n api,\n i18n,\n relationTo,\n locale,\n config,\n ])\n\n // Determine if we should switch to word boundary search\n useEffect(() => {\n const relations = Array.isArray(relationTo) ? relationTo : [relationTo]\n const isIdOnly = relations.reduce((idOnly, relation) => {\n const collection = collections.find((coll) => coll.slug === relation)\n const fieldToSearch = collection?.admin?.useAsTitle || 'id'\n return fieldToSearch === 'id' && idOnly\n }, true)\n setEnableWordBoundarySearch(!isIdOnly)\n }, [relationTo, collections])\n\n // When (`relationTo` || `filterOptions` || `locale`) changes, reset component\n // Note - effect should not run on first run\n useEffect(() => {\n // If the menu is open while filterOptions changes\n // due to latency of getFormState and fast clicking into this field,\n // re-fetch options\n\n if (hasLoadedFirstPageRef.current && menuIsOpen.current) {\n setIsLoading(true)\n void getResults({\n lastLoadedPage: {},\n onSuccess: () => {\n hasLoadedFirstPageRef.current = true\n setIsLoading(false)\n },\n value: valueRef.current,\n })\n }\n\n // If the menu is not open, still reset the field state\n // because we need to get new options next time the menu\n // opens by the user\n\n dispatchOptions({ type: 'CLEAR' })\n setLastFullyLoadedRelation(-1)\n setLastLoadedPage({})\n hasLoadedFirstPageRef.current = false\n }, [\n relationTo,\n filterOptions,\n locale,\n menuIsOpen,\n getResults,\n valueRef,\n hasLoadedFirstPageRef,\n path,\n ])\n\n const onSave = useCallback<DocumentDrawerProps['onSave']>(\n (args) => {\n dispatchOptions({\n type: 'UPDATE',\n collection: args.collectionConfig,\n // TODO: fix this\n // @ts-expect-error-next-line\n config,\n doc: args.doc,\n i18n,\n })\n },\n [i18n, config],\n )\n\n const filterOption = useCallback((item: Option, searchFilter: string) => {\n if (!searchFilter) {\n return true\n }\n const r = wordBoundariesRegex(searchFilter || '')\n // breaking the labels to search into smaller parts increases performance\n const breakApartThreshold = 250\n let string = item.label\n // strings less than breakApartThreshold length won't be chunked\n while (string.length > breakApartThreshold) {\n // slicing by the next space after the length of the search input prevents slicing the string up by partial words\n const indexOfSpace = string.indexOf(' ', searchFilter.length)\n if (r.test(string.slice(0, indexOfSpace === -1 ? searchFilter.length : indexOfSpace + 1))) {\n return true\n }\n string = string.slice(indexOfSpace === -1 ? searchFilter.length : indexOfSpace + 1)\n }\n return r.test(string.slice(-breakApartThreshold))\n }, [])\n\n const valueToRender = findOptionsByValue({ options, value })\n\n if (!Array.isArray(valueToRender) && valueToRender?.value === 'null') valueToRender.value = null\n\n return (\n <div\n className={[\n fieldBaseClass,\n baseClass,\n className,\n showError && 'error',\n errorLoading && 'error-loading',\n readOnly && `${baseClass}--read-only`,\n ]\n .filter(Boolean)\n .join(' ')}\n id={`field-${path.replace(/\\./g, '__')}`}\n style={{\n ...style,\n width,\n }}\n >\n <FieldError CustomError={CustomError} path={path} {...(errorProps || {})} />\n <FieldLabel\n CustomLabel={CustomLabel}\n label={label}\n required={required}\n {...(labelProps || {})}\n />\n {!errorLoading && (\n <div className={`${baseClass}__wrap`}>\n <ReactSelect\n backspaceRemovesValue={!drawerIsOpen}\n components={{\n MultiValueLabel,\n SingleValue,\n }}\n customProps={{\n disableKeyDown: drawerIsOpen,\n disableMouseDown: drawerIsOpen,\n onSave,\n setDrawerIsOpen,\n }}\n disabled={readOnly || formProcessing}\n filterOption={enableWordBoundarySearch ? filterOption : undefined}\n isLoading={isLoading}\n isMulti={hasMany}\n isSortable={isSortable}\n onChange={\n !readOnly\n ? (selected) => {\n if (selected === null) {\n setValue(hasMany ? [] : null)\n } else if (hasMany) {\n setValue(\n selected\n ? selected.map((option) => {\n if (hasMultipleRelations) {\n return {\n relationTo: option.relationTo,\n value: option.value,\n }\n }\n\n return option.value\n })\n : null,\n )\n } else if (hasMultipleRelations) {\n setValue({\n relationTo: selected.relationTo,\n value: selected.value,\n })\n } else {\n setValue(selected.value)\n }\n }\n : undefined\n }\n onInputChange={(newSearch) => handleInputChange(newSearch, value)}\n onMenuClose={() => {\n menuIsOpen.current = false\n }}\n onMenuOpen={() => {\n menuIsOpen.current = true\n\n if (!hasLoadedFirstPageRef.current) {\n setIsLoading(true)\n void getResults({\n lastLoadedPage: {},\n onSuccess: () => {\n hasLoadedFirstPageRef.current = true\n setIsLoading(false)\n },\n value: initialValue,\n })\n }\n }}\n onMenuScrollToBottom={() => {\n void getResults({\n lastFullyLoadedRelation,\n lastLoadedPage,\n search,\n sort: false,\n value: initialValue,\n })\n }}\n options={options}\n showError={showError}\n value={valueToRender ?? null}\n />\n {!readOnly && allowCreate && (\n <AddNewRelation\n {...{\n dispatchOptions,\n hasMany,\n options,\n path,\n relationTo,\n setValue,\n value,\n }}\n />\n )}\n </div>\n )}\n {errorLoading && <div className={`${baseClass}__error-loading`}>{errorLoading}</div>}\n {CustomDescription !== undefined ? (\n CustomDescription\n ) : (\n <FieldDescription {...(descriptionProps || {})} />\n )}\n </div>\n )\n}\n\nexport const Relationship = withCondition(RelationshipField)\n"],"names":["FieldDescription","FieldError","FieldLabel","useFieldProps","wordBoundariesRegex","qs","React","useCallback","useEffect","useReducer","useRef","useState","ReactSelect","useFormProcessing","useField","withCondition","useDebouncedCallback","useAuth","useConfig","useLocale","useTranslation","fieldBaseClass","AddNewRelation","createRelationMap","findOptionsByValue","optionsReducer","MultiValueLabel","SingleValue","maxResultsPerRequest","baseClass","RelationshipField","props","name","CustomDescription","CustomError","CustomLabel","allowCreate","className","descriptionProps","errorProps","hasMany","isSortable","label","labelProps","path","pathFromProps","readOnly","relationTo","required","sortOptions","style","validate","width","config","collections","routes","api","serverURL","i18n","t","permissions","code","locale","formProcessing","hasMultipleRelations","Array","isArray","options","dispatchOptions","lastFullyLoadedRelation","setLastFullyLoadedRelation","lastLoadedPage","setLastLoadedPage","errorLoading","setErrorLoading","search","setSearch","isLoading","setIsLoading","enableWordBoundarySearch","setEnableWordBoundarySearch","menuIsOpen","hasLoadedFirstPageRef","memoizedValidate","value","validationOptions","pathFromContext","filterOptions","initialValue","setValue","showError","valueRef","current","drawerIsOpen","setDrawerIsOpen","getResults","lastFullyLoadedRelationArg","lastLoadedPageArg","onSuccess","searchArg","sort","valueArg","lastFullyLoadedRelationToUse","relations","relationsToFetch","slice","resultsFetched","relationMap","reduce","priorRelation","relation","relationFilterOption","lastLoadedPageToUse","indexOf","Promise","resolve","collection","find","coll","slug","fieldToSearch","defaultSort","admin","useAsTitle","query","depth","draft","limit","page","where","and","id","not_in","push","like","response","fetch","stringify","credentials","headers","language","ok","data","json","prevState","nextPage","docs","length","type","status","ids","updateSearch","handleInputChange","Object","entries","idsToLoad","filter","optionGroup","option","in","isIdOnly","idOnly","onSave","args","collectionConfig","doc","filterOption","item","searchFilter","r","breakApartThreshold","string","indexOfSpace","test","valueToRender","div","Boolean","join","replace","backspaceRemovesValue","components","customProps","disableKeyDown","disableMouseDown","disabled","undefined","isMulti","onChange","selected","map","onInputChange","newSearch","onMenuClose","onMenuOpen","onMenuScrollToBottom","Relationship"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../../src/fields/Relationship/index.tsx"],"sourcesContent":["'use client'\nimport type { PaginatedDocs } from 'payload/database'\nimport type { Where } from 'payload/types'\n\nimport { FieldDescription } from '@payloadcms/ui/forms/FieldDescription'\nimport { FieldError } from '@payloadcms/ui/forms/FieldError'\nimport { FieldLabel } from '@payloadcms/ui/forms/FieldLabel'\nimport { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'\nimport { wordBoundariesRegex } from 'payload/utilities'\nimport qs from 'qs'\nimport React, { useCallback, useEffect, useReducer, useRef, useState } from 'react'\n\nimport type { DocumentDrawerProps } from '../../elements/DocumentDrawer/types.js'\nimport type { GetResults, Option, RelationshipFieldProps, Value } from './types.js'\n\nimport { ReactSelect } from '../../elements/ReactSelect/index.js'\nimport { useFormProcessing } from '../../forms/Form/context.js'\nimport { useField } from '../../forms/useField/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { useDebouncedCallback } from '../../hooks/useDebouncedCallback.js'\nimport { useAuth } from '../../providers/Auth/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useLocale } from '../../providers/Locale/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { fieldBaseClass } from '../shared/index.js'\nimport { AddNewRelation } from './AddNew/index.js'\nimport { createRelationMap } from './createRelationMap.js'\nimport { findOptionsByValue } from './findOptionsByValue.js'\nimport './index.scss'\nimport { optionsReducer } from './optionsReducer.js'\nimport { MultiValueLabel } from './select-components/MultiValueLabel/index.js'\nimport { SingleValue } from './select-components/SingleValue/index.js'\n\nconst maxResultsPerRequest = 10\n\nconst baseClass = 'relationship'\n\nexport { RelationshipFieldProps }\n\nconst RelationshipField: React.FC<RelationshipFieldProps> = (props) => {\n const {\n name,\n CustomDescription,\n CustomError,\n CustomLabel,\n allowCreate = true,\n className,\n descriptionProps,\n errorProps,\n hasMany,\n isSortable = true,\n label,\n labelProps,\n path: pathFromProps,\n readOnly: readOnlyFromProps,\n relationTo,\n required,\n sortOptions,\n style,\n validate,\n width,\n } = props\n\n const config = useConfig()\n\n const {\n collections,\n routes: { api },\n serverURL,\n } = config\n\n const { i18n, t } = useTranslation()\n const { permissions } = useAuth()\n const { code: locale } = useLocale()\n const formProcessing = useFormProcessing()\n const hasMultipleRelations = Array.isArray(relationTo)\n const [options, dispatchOptions] = useReducer(optionsReducer, [])\n const [lastFullyLoadedRelation, setLastFullyLoadedRelation] = useState(-1)\n const [lastLoadedPage, setLastLoadedPage] = useState<Record<string, number>>({})\n const [errorLoading, setErrorLoading] = useState('')\n const [search, setSearch] = useState('')\n const [isLoading, setIsLoading] = useState(false)\n const [enableWordBoundarySearch, setEnableWordBoundarySearch] = useState(false)\n const menuIsOpen = useRef(false)\n const hasLoadedFirstPageRef = useRef(false)\n\n const memoizedValidate = useCallback(\n (value, validationOptions) => {\n if (typeof validate === 'function') {\n return validate(value, { ...validationOptions, required })\n }\n },\n [validate, required],\n )\n const { path: pathFromContext, readOnly: readOnlyFromContext } = useFieldProps()\n const readOnly = readOnlyFromProps || readOnlyFromContext\n\n const { filterOptions, initialValue, path, setValue, showError, value } = useField<\n Value | Value[]\n >({\n path: pathFromContext || pathFromProps || name,\n validate: memoizedValidate,\n })\n\n const valueRef = useRef(value)\n valueRef.current = value\n\n const [drawerIsOpen, setDrawerIsOpen] = useState(false)\n\n const getResults: GetResults = useCallback(\n async ({\n lastFullyLoadedRelation: lastFullyLoadedRelationArg,\n lastLoadedPage: lastLoadedPageArg,\n onSuccess,\n search: searchArg,\n sort,\n value: valueArg,\n }) => {\n if (!permissions) {\n return\n }\n const lastFullyLoadedRelationToUse =\n typeof lastFullyLoadedRelationArg !== 'undefined' ? lastFullyLoadedRelationArg : -1\n\n const relations = Array.isArray(relationTo) ? relationTo : [relationTo]\n const relationsToFetch =\n lastFullyLoadedRelationToUse === -1\n ? relations\n : relations.slice(lastFullyLoadedRelationToUse + 1)\n\n let resultsFetched = 0\n const relationMap = createRelationMap({\n hasMany,\n relationTo,\n value: valueArg,\n })\n\n if (!errorLoading) {\n await relationsToFetch.reduce(async (priorRelation, relation) => {\n const relationFilterOption = filterOptions?.[relation]\n\n let lastLoadedPageToUse\n if (search !== searchArg) {\n lastLoadedPageToUse = 1\n } else {\n lastLoadedPageToUse = lastLoadedPageArg[relation] + 1\n }\n await priorRelation\n\n if (relationFilterOption === false) {\n setLastFullyLoadedRelation(relations.indexOf(relation))\n return Promise.resolve()\n }\n\n if (resultsFetched < 10) {\n const collection = collections.find((coll) => coll.slug === relation)\n let fieldToSearch = collection?.defaultSort || collection?.admin?.useAsTitle || 'id'\n if (!searchArg) {\n if (typeof sortOptions === 'string') {\n fieldToSearch = sortOptions\n } else if (sortOptions?.[relation]) {\n fieldToSearch = sortOptions[relation]\n }\n }\n\n const query: {\n [key: string]: unknown\n where: Where\n } = {\n depth: 0,\n draft: true,\n limit: maxResultsPerRequest,\n locale,\n page: lastLoadedPageToUse,\n sort: fieldToSearch,\n where: {\n and: [\n {\n id: {\n not_in: relationMap[relation],\n },\n },\n ],\n },\n }\n\n if (searchArg) {\n query.where.and.push({\n [fieldToSearch]: {\n like: searchArg,\n },\n })\n }\n\n if (relationFilterOption && typeof relationFilterOption !== 'boolean') {\n query.where.and.push(relationFilterOption)\n }\n\n const response = await fetch(`${serverURL}${api}/${relation}?${qs.stringify(query)}`, {\n credentials: 'include',\n headers: {\n 'Accept-Language': i18n.language,\n },\n })\n\n if (response.ok) {\n const data: PaginatedDocs<unknown> = await response.json()\n setLastLoadedPage((prevState) => {\n return {\n ...prevState,\n [relation]: lastLoadedPageToUse,\n }\n })\n\n if (!data.nextPage) {\n setLastFullyLoadedRelation(relations.indexOf(relation))\n }\n\n if (data.docs.length > 0) {\n resultsFetched += data.docs.length\n\n dispatchOptions({\n type: 'ADD',\n collection,\n // TODO: fix this\n // @ts-expect-error-next-line\n config,\n docs: data.docs,\n i18n,\n sort,\n })\n }\n } else if (response.status === 403) {\n setLastFullyLoadedRelation(relations.indexOf(relation))\n dispatchOptions({\n type: 'ADD',\n collection,\n // TODO: fix this\n // @ts-expect-error-next-line\n config,\n docs: [],\n i18n,\n ids: relationMap[relation],\n sort,\n })\n } else {\n setErrorLoading(t('error:unspecific'))\n }\n }\n }, Promise.resolve())\n\n if (typeof onSuccess === 'function') onSuccess()\n }\n },\n [\n permissions,\n relationTo,\n hasMany,\n errorLoading,\n search,\n collections,\n locale,\n filterOptions,\n serverURL,\n sortOptions,\n api,\n i18n,\n config,\n t,\n ],\n )\n\n const updateSearch = useDebouncedCallback((searchArg: string, valueArg: Value | Value[]) => {\n void getResults({ lastLoadedPage: {}, search: searchArg, sort: true, value: valueArg })\n setSearch(searchArg)\n }, 300)\n\n const handleInputChange = useCallback(\n (searchArg: string, valueArg: Value | Value[]) => {\n if (search !== searchArg) {\n setLastLoadedPage({})\n updateSearch(searchArg, valueArg, searchArg !== '')\n }\n },\n [search, updateSearch],\n )\n\n // ///////////////////////////////////\n // Ensure we have an option for each value\n // ///////////////////////////////////\n\n useEffect(() => {\n const relationMap = createRelationMap({\n hasMany,\n relationTo,\n value,\n })\n\n void Object.entries(relationMap).reduce(async (priorRelation, [relation, ids]) => {\n await priorRelation\n\n const idsToLoad = ids.filter((id) => {\n return !options.find((optionGroup) =>\n optionGroup?.options?.find(\n (option) => option.value === id && option.relationTo === relation,\n ),\n )\n })\n\n if (idsToLoad.length > 0) {\n const query = {\n depth: 0,\n draft: true,\n limit: idsToLoad.length,\n locale,\n where: {\n id: {\n in: idsToLoad,\n },\n },\n }\n\n if (!errorLoading) {\n const response = await fetch(`${serverURL}${api}/${relation}?${qs.stringify(query)}`, {\n credentials: 'include',\n headers: {\n 'Accept-Language': i18n.language,\n },\n })\n\n const collection = collections.find((coll) => coll.slug === relation)\n let docs = []\n\n if (response.ok) {\n const data = await response.json()\n docs = data.docs\n }\n\n dispatchOptions({\n type: 'ADD',\n collection,\n // TODO: fix this\n // @ts-expect-error-next-line\n config,\n docs,\n i18n,\n ids: idsToLoad,\n sort: true,\n })\n }\n }\n }, Promise.resolve())\n }, [\n options,\n value,\n hasMany,\n errorLoading,\n collections,\n hasMultipleRelations,\n serverURL,\n api,\n i18n,\n relationTo,\n locale,\n config,\n ])\n\n // Determine if we should switch to word boundary search\n useEffect(() => {\n const relations = Array.isArray(relationTo) ? relationTo : [relationTo]\n const isIdOnly = relations.reduce((idOnly, relation) => {\n const collection = collections.find((coll) => coll.slug === relation)\n const fieldToSearch = collection?.admin?.useAsTitle || 'id'\n return fieldToSearch === 'id' && idOnly\n }, true)\n setEnableWordBoundarySearch(!isIdOnly)\n }, [relationTo, collections])\n\n // When (`relationTo` || `filterOptions` || `locale`) changes, reset component\n // Note - effect should not run on first run\n useEffect(() => {\n // If the menu is open while filterOptions changes\n // due to latency of getFormState and fast clicking into this field,\n // re-fetch options\n\n if (hasLoadedFirstPageRef.current && menuIsOpen.current) {\n setIsLoading(true)\n void getResults({\n lastLoadedPage: {},\n onSuccess: () => {\n hasLoadedFirstPageRef.current = true\n setIsLoading(false)\n },\n value: valueRef.current,\n })\n }\n\n // If the menu is not open, still reset the field state\n // because we need to get new options next time the menu\n // opens by the user\n\n dispatchOptions({ type: 'CLEAR' })\n setLastFullyLoadedRelation(-1)\n setLastLoadedPage({})\n hasLoadedFirstPageRef.current = false\n }, [\n relationTo,\n filterOptions,\n locale,\n menuIsOpen,\n getResults,\n valueRef,\n hasLoadedFirstPageRef,\n path,\n ])\n\n const onSave = useCallback<DocumentDrawerProps['onSave']>(\n (args) => {\n dispatchOptions({\n type: 'UPDATE',\n collection: args.collectionConfig,\n // TODO: fix this\n // @ts-expect-error-next-line\n config,\n doc: args.doc,\n i18n,\n })\n },\n [i18n, config],\n )\n\n const filterOption = useCallback((item: Option, searchFilter: string) => {\n if (!searchFilter) {\n return true\n }\n const r = wordBoundariesRegex(searchFilter || '')\n // breaking the labels to search into smaller parts increases performance\n const breakApartThreshold = 250\n let string = item.label\n // strings less than breakApartThreshold length won't be chunked\n while (string.length > breakApartThreshold) {\n // slicing by the next space after the length of the search input prevents slicing the string up by partial words\n const indexOfSpace = string.indexOf(' ', searchFilter.length)\n if (r.test(string.slice(0, indexOfSpace === -1 ? searchFilter.length : indexOfSpace + 1))) {\n return true\n }\n string = string.slice(indexOfSpace === -1 ? searchFilter.length : indexOfSpace + 1)\n }\n return r.test(string.slice(-breakApartThreshold))\n }, [])\n\n const valueToRender = findOptionsByValue({ options, value })\n\n if (!Array.isArray(valueToRender) && valueToRender?.value === 'null') valueToRender.value = null\n\n return (\n <div\n className={[\n fieldBaseClass,\n baseClass,\n className,\n showError && 'error',\n errorLoading && 'error-loading',\n readOnly && `${baseClass}--read-only`,\n ]\n .filter(Boolean)\n .join(' ')}\n id={`field-${path.replace(/\\./g, '__')}`}\n style={{\n ...style,\n width,\n }}\n >\n <FieldError CustomError={CustomError} path={path} {...(errorProps || {})} />\n <FieldLabel\n CustomLabel={CustomLabel}\n label={label}\n required={required}\n {...(labelProps || {})}\n />\n {!errorLoading && (\n <div className={`${baseClass}__wrap`}>\n <ReactSelect\n backspaceRemovesValue={!drawerIsOpen}\n components={{\n MultiValueLabel,\n SingleValue,\n }}\n customProps={{\n disableKeyDown: drawerIsOpen,\n disableMouseDown: drawerIsOpen,\n onSave,\n setDrawerIsOpen,\n }}\n disabled={readOnly || formProcessing}\n filterOption={enableWordBoundarySearch ? filterOption : undefined}\n isLoading={isLoading}\n isMulti={hasMany}\n isSortable={isSortable}\n onChange={\n !readOnly\n ? (selected) => {\n if (selected === null) {\n setValue(hasMany ? [] : null)\n } else if (hasMany) {\n setValue(\n selected\n ? selected.map((option) => {\n if (hasMultipleRelations) {\n return {\n relationTo: option.relationTo,\n value: option.value,\n }\n }\n\n return option.value\n })\n : null,\n )\n } else if (hasMultipleRelations) {\n setValue({\n relationTo: selected.relationTo,\n value: selected.value,\n })\n } else {\n setValue(selected.value)\n }\n }\n : undefined\n }\n onInputChange={(newSearch) => handleInputChange(newSearch, value)}\n onMenuClose={() => {\n menuIsOpen.current = false\n }}\n onMenuOpen={() => {\n menuIsOpen.current = true\n\n if (!hasLoadedFirstPageRef.current) {\n setIsLoading(true)\n void getResults({\n lastLoadedPage: {},\n onSuccess: () => {\n hasLoadedFirstPageRef.current = true\n setIsLoading(false)\n },\n value: initialValue,\n })\n }\n }}\n onMenuScrollToBottom={() => {\n void getResults({\n lastFullyLoadedRelation,\n lastLoadedPage,\n search,\n sort: false,\n value: initialValue,\n })\n }}\n options={options}\n showError={showError}\n value={valueToRender ?? null}\n />\n {!readOnly && allowCreate && (\n <AddNewRelation\n {...{\n dispatchOptions,\n hasMany,\n options,\n path,\n relationTo,\n setValue,\n value,\n }}\n />\n )}\n </div>\n )}\n {errorLoading && <div className={`${baseClass}__error-loading`}>{errorLoading}</div>}\n {CustomDescription !== undefined ? (\n CustomDescription\n ) : (\n <FieldDescription {...(descriptionProps || {})} />\n )}\n </div>\n )\n}\n\nexport const Relationship = withCondition(RelationshipField)\n"],"names":["FieldDescription","FieldError","FieldLabel","useFieldProps","wordBoundariesRegex","qs","React","useCallback","useEffect","useReducer","useRef","useState","ReactSelect","useFormProcessing","useField","withCondition","useDebouncedCallback","useAuth","useConfig","useLocale","useTranslation","fieldBaseClass","AddNewRelation","createRelationMap","findOptionsByValue","optionsReducer","MultiValueLabel","SingleValue","maxResultsPerRequest","baseClass","RelationshipField","props","name","CustomDescription","CustomError","CustomLabel","allowCreate","className","descriptionProps","errorProps","hasMany","isSortable","label","labelProps","path","pathFromProps","readOnly","readOnlyFromProps","relationTo","required","sortOptions","style","validate","width","config","collections","routes","api","serverURL","i18n","t","permissions","code","locale","formProcessing","hasMultipleRelations","Array","isArray","options","dispatchOptions","lastFullyLoadedRelation","setLastFullyLoadedRelation","lastLoadedPage","setLastLoadedPage","errorLoading","setErrorLoading","search","setSearch","isLoading","setIsLoading","enableWordBoundarySearch","setEnableWordBoundarySearch","menuIsOpen","hasLoadedFirstPageRef","memoizedValidate","value","validationOptions","pathFromContext","readOnlyFromContext","filterOptions","initialValue","setValue","showError","valueRef","current","drawerIsOpen","setDrawerIsOpen","getResults","lastFullyLoadedRelationArg","lastLoadedPageArg","onSuccess","searchArg","sort","valueArg","lastFullyLoadedRelationToUse","relations","relationsToFetch","slice","resultsFetched","relationMap","reduce","priorRelation","relation","relationFilterOption","lastLoadedPageToUse","indexOf","Promise","resolve","collection","find","coll","slug","fieldToSearch","defaultSort","admin","useAsTitle","query","depth","draft","limit","page","where","and","id","not_in","push","like","response","fetch","stringify","credentials","headers","language","ok","data","json","prevState","nextPage","docs","length","type","status","ids","updateSearch","handleInputChange","Object","entries","idsToLoad","filter","optionGroup","option","in","isIdOnly","idOnly","onSave","args","collectionConfig","doc","filterOption","item","searchFilter","r","breakApartThreshold","string","indexOfSpace","test","valueToRender","div","Boolean","join","replace","backspaceRemovesValue","components","customProps","disableKeyDown","disableMouseDown","disabled","undefined","isMulti","onChange","selected","map","onInputChange","newSearch","onMenuClose","onMenuOpen","onMenuScrollToBottom","Relationship"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Select/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAkB,SAAS,EAAE,MAAM,EAAgB,MAAM,eAAe,CAAA;AAOpF,OAAO,KAAgC,MAAM,OAAO,CAAA;AAEpD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAOvD,OAAO,cAAc,CAAA;AAErB,MAAM,MAAM,gBAAgB,GAAG,aAAa,GAAG;IAC7C,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAA;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC9B,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Select/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAkB,SAAS,EAAE,MAAM,EAAgB,MAAM,eAAe,CAAA;AAOpF,OAAO,KAAgC,MAAM,OAAO,CAAA;AAEpD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAOvD,OAAO,cAAc,CAAA;AAErB,MAAM,MAAM,gBAAgB,GAAG,aAAa,GAAG;IAC7C,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAA;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC9B,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AA0JD,eAAO,MAAM,MAAM,4BAA6B,CAAA"}
|
|
@@ -20,7 +20,7 @@ const formatOptions = (options)=>options.map((option)=>{
|
|
|
20
20
|
};
|
|
21
21
|
});
|
|
22
22
|
const SelectField = (props)=>{
|
|
23
|
-
const { name, AfterInput, BeforeInput, CustomDescription, CustomError, CustomLabel, className, descriptionProps, errorProps, hasMany = false, isClearable = true, isSortable = true, label, labelProps, onChange: onChangeFromProps, options: optionsFromProps = [], path: pathFromProps, readOnly, required, style, validate, width } = props;
|
|
23
|
+
const { name, AfterInput, BeforeInput, CustomDescription, CustomError, CustomLabel, className, descriptionProps, errorProps, hasMany = false, isClearable = true, isSortable = true, label, labelProps, onChange: onChangeFromProps, options: optionsFromProps = [], path: pathFromProps, readOnly: readOnlyFromProps, required, style, validate, width } = props;
|
|
24
24
|
const { i18n } = useTranslation();
|
|
25
25
|
const [options] = useState(formatOptions(optionsFromProps));
|
|
26
26
|
const memoizedValidate = useCallback((value, validationOptions)=>{
|
|
@@ -36,7 +36,8 @@ const SelectField = (props)=>{
|
|
|
36
36
|
hasMany,
|
|
37
37
|
options
|
|
38
38
|
]);
|
|
39
|
-
const { path: pathFromContext } = useFieldProps();
|
|
39
|
+
const { path: pathFromContext, readOnly: readOnlyFromContext } = useFieldProps();
|
|
40
|
+
const readOnly = readOnlyFromProps || readOnlyFromContext;
|
|
40
41
|
const { path, setValue, showError, value } = useField({
|
|
41
42
|
path: pathFromContext || pathFromProps || name,
|
|
42
43
|
validate: memoizedValidate
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/fields/Select/index.tsx"],"sourcesContent":["/* eslint-disable react/destructuring-assignment */\n'use client'\nimport type { ClientValidate, FieldBase, Option, OptionObject } from 'payload/types'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { FieldDescription } from '@payloadcms/ui/forms/FieldDescription'\nimport { FieldError } from '@payloadcms/ui/forms/FieldError'\nimport { FieldLabel } from '@payloadcms/ui/forms/FieldLabel'\nimport { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'\nimport React, { useCallback, useState } from 'react'\n\nimport type { FormFieldBase } from '../shared/index.js'\n\nimport { ReactSelect } from '../../elements/ReactSelect/index.js'\nimport { useField } from '../../forms/useField/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { fieldBaseClass } from '../shared/index.js'\nimport './index.scss'\n\nexport type SelectFieldProps = FormFieldBase & {\n hasMany?: boolean\n isClearable?: boolean\n isSortable?: boolean\n label?: FieldBase['label']\n name?: string\n onChange?: (e: string) => void\n options?: Option[]\n path?: string\n value?: string\n width?: string\n}\n\nconst formatOptions = (options: Option[]): OptionObject[] =>\n options.map((option) => {\n if (typeof option === 'object' && (option.value || option.value === '')) {\n return option\n }\n\n return {\n label: option,\n value: option,\n } as OptionObject\n })\n\nconst SelectField: React.FC<SelectFieldProps> = (props) => {\n const {\n name,\n AfterInput,\n BeforeInput,\n CustomDescription,\n CustomError,\n CustomLabel,\n className,\n descriptionProps,\n errorProps,\n hasMany = false,\n isClearable = true,\n isSortable = true,\n label,\n labelProps,\n onChange: onChangeFromProps,\n options: optionsFromProps = [],\n path: pathFromProps,\n readOnly,\n required,\n style,\n validate,\n width,\n } = props\n\n const { i18n } = useTranslation()\n\n const [options] = useState(formatOptions(optionsFromProps))\n\n const memoizedValidate: ClientValidate = useCallback(\n (value, validationOptions) => {\n if (typeof validate === 'function')\n return validate(value, { ...validationOptions, hasMany, options, required })\n },\n [validate, required, hasMany, options],\n )\n\n const { path: pathFromContext } = useFieldProps()\n\n const { path, setValue, showError, value } = useField({\n path: pathFromContext || pathFromProps || name,\n validate: memoizedValidate,\n })\n\n let valueToRender\n\n if (hasMany && Array.isArray(value)) {\n valueToRender = value.map((val) => {\n const matchingOption = options.find((option) => option.value === val)\n return {\n label: matchingOption ? getTranslation(matchingOption.label, i18n) : val,\n value: matchingOption?.value ?? val,\n }\n })\n } else if (value) {\n const matchingOption = options.find((option) => option.value === value)\n valueToRender = {\n label: matchingOption ? getTranslation(matchingOption.label, i18n) : value,\n value: matchingOption?.value ?? value,\n }\n }\n\n const onChange = useCallback(\n (selectedOption) => {\n if (!readOnly) {\n let newValue\n if (!selectedOption) {\n newValue = null\n } else if (hasMany) {\n if (Array.isArray(selectedOption)) {\n newValue = selectedOption.map((option) => option.value)\n } else {\n newValue = []\n }\n } else {\n newValue = selectedOption.value\n }\n\n if (typeof onChangeFromProps === 'function') {\n onChangeFromProps(newValue)\n }\n\n setValue(newValue)\n }\n },\n [readOnly, hasMany, setValue, onChangeFromProps],\n )\n\n return (\n <div\n className={[\n fieldBaseClass,\n 'select',\n className,\n showError && 'error',\n readOnly && 'read-only',\n ]\n .filter(Boolean)\n .join(' ')}\n id={`field-${path.replace(/\\./g, '__')}`}\n style={{\n ...style,\n width,\n }}\n >\n <FieldError CustomError={CustomError} path={path} {...(errorProps || {})} />\n <FieldLabel\n CustomLabel={CustomLabel}\n label={label}\n required={required}\n {...(labelProps || {})}\n />\n <div>\n {BeforeInput}\n <ReactSelect\n disabled={readOnly}\n isClearable={isClearable}\n isMulti={hasMany}\n isSortable={isSortable}\n onChange={onChange}\n options={options.map((option) => ({\n ...option,\n label: getTranslation(option.label, i18n),\n }))}\n showError={showError}\n value={valueToRender as OptionObject}\n />\n {AfterInput}\n </div>\n {CustomDescription !== undefined ? (\n CustomDescription\n ) : (\n <FieldDescription {...(descriptionProps || {})} />\n )}\n </div>\n )\n}\n\nexport const Select = withCondition(SelectField)\n"],"names":["getTranslation","FieldDescription","FieldError","FieldLabel","useFieldProps","React","useCallback","useState","ReactSelect","useField","withCondition","useTranslation","fieldBaseClass","formatOptions","options","map","option","value","label","SelectField","props","name","AfterInput","BeforeInput","CustomDescription","CustomError","CustomLabel","className","descriptionProps","errorProps","hasMany","isClearable","isSortable","labelProps","onChange","onChangeFromProps","optionsFromProps","path","pathFromProps","readOnly","required","style","validate","width","i18n","memoizedValidate","validationOptions","pathFromContext","setValue","showError","valueToRender","Array","isArray","val","matchingOption","find","selectedOption","newValue","div","filter","Boolean","join","id","replace","disabled","isMulti","undefined","Select"],"mappings":"AAAA,iDAAiD,GACjD;AAGA,SAASA,cAAc,QAAQ,2BAA0B;AACzD,SAASC,gBAAgB,QAAQ,wCAAuC;AACxE,SAASC,UAAU,QAAQ,kCAAiC;AAC5D,SAASC,UAAU,QAAQ,kCAAiC;AAC5D,SAASC,aAAa,QAAQ,0CAAyC;AACvE,OAAOC,SAASC,WAAW,EAAEC,QAAQ,QAAQ,QAAO;AAIpD,SAASC,WAAW,QAAQ,sCAAqC;AACjE,SAASC,QAAQ,QAAQ,gCAA+B;AACxD,SAASC,aAAa,QAAQ,qCAAoC;AAClE,SAASC,cAAc,QAAQ,uCAAsC;AACrE,SAASC,cAAc,QAAQ,qBAAoB;AAgBnD,MAAMC,gBAAgB,CAACC,UACrBA,QAAQC,GAAG,CAAC,CAACC;QACX,IAAI,OAAOA,WAAW,YAAaA,CAAAA,OAAOC,KAAK,IAAID,OAAOC,KAAK,KAAK,EAAC,GAAI;YACvE,OAAOD;QACT;QAEA,OAAO;YACLE,OAAOF;YACPC,OAAOD;QACT;IACF;AAEF,MAAMG,cAA0C,CAACC;IAC/C,MAAM,EACJC,IAAI,EACJC,UAAU,EACVC,WAAW,EACXC,iBAAiB,EACjBC,WAAW,EACXC,WAAW,EACXC,SAAS,EACTC,gBAAgB,EAChBC,UAAU,EACVC,UAAU,KAAK,EACfC,cAAc,IAAI,EAClBC,aAAa,IAAI,EACjBd,KAAK,EACLe,UAAU,EACVC,UAAUC,iBAAiB,EAC3BrB,SAASsB,mBAAmB,EAAE,EAC9BC,MAAMC,aAAa,EACnBC,
|
|
1
|
+
{"version":3,"sources":["../../../src/fields/Select/index.tsx"],"sourcesContent":["/* eslint-disable react/destructuring-assignment */\n'use client'\nimport type { ClientValidate, FieldBase, Option, OptionObject } from 'payload/types'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { FieldDescription } from '@payloadcms/ui/forms/FieldDescription'\nimport { FieldError } from '@payloadcms/ui/forms/FieldError'\nimport { FieldLabel } from '@payloadcms/ui/forms/FieldLabel'\nimport { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'\nimport React, { useCallback, useState } from 'react'\n\nimport type { FormFieldBase } from '../shared/index.js'\n\nimport { ReactSelect } from '../../elements/ReactSelect/index.js'\nimport { useField } from '../../forms/useField/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { fieldBaseClass } from '../shared/index.js'\nimport './index.scss'\n\nexport type SelectFieldProps = FormFieldBase & {\n hasMany?: boolean\n isClearable?: boolean\n isSortable?: boolean\n label?: FieldBase['label']\n name?: string\n onChange?: (e: string) => void\n options?: Option[]\n path?: string\n value?: string\n width?: string\n}\n\nconst formatOptions = (options: Option[]): OptionObject[] =>\n options.map((option) => {\n if (typeof option === 'object' && (option.value || option.value === '')) {\n return option\n }\n\n return {\n label: option,\n value: option,\n } as OptionObject\n })\n\nconst SelectField: React.FC<SelectFieldProps> = (props) => {\n const {\n name,\n AfterInput,\n BeforeInput,\n CustomDescription,\n CustomError,\n CustomLabel,\n className,\n descriptionProps,\n errorProps,\n hasMany = false,\n isClearable = true,\n isSortable = true,\n label,\n labelProps,\n onChange: onChangeFromProps,\n options: optionsFromProps = [],\n path: pathFromProps,\n readOnly: readOnlyFromProps,\n required,\n style,\n validate,\n width,\n } = props\n\n const { i18n } = useTranslation()\n\n const [options] = useState(formatOptions(optionsFromProps))\n\n const memoizedValidate: ClientValidate = useCallback(\n (value, validationOptions) => {\n if (typeof validate === 'function')\n return validate(value, { ...validationOptions, hasMany, options, required })\n },\n [validate, required, hasMany, options],\n )\n\n const { path: pathFromContext, readOnly: readOnlyFromContext } = useFieldProps()\n const readOnly = readOnlyFromProps || readOnlyFromContext\n\n const { path, setValue, showError, value } = useField({\n path: pathFromContext || pathFromProps || name,\n validate: memoizedValidate,\n })\n\n let valueToRender\n\n if (hasMany && Array.isArray(value)) {\n valueToRender = value.map((val) => {\n const matchingOption = options.find((option) => option.value === val)\n return {\n label: matchingOption ? getTranslation(matchingOption.label, i18n) : val,\n value: matchingOption?.value ?? val,\n }\n })\n } else if (value) {\n const matchingOption = options.find((option) => option.value === value)\n valueToRender = {\n label: matchingOption ? getTranslation(matchingOption.label, i18n) : value,\n value: matchingOption?.value ?? value,\n }\n }\n\n const onChange = useCallback(\n (selectedOption) => {\n if (!readOnly) {\n let newValue\n if (!selectedOption) {\n newValue = null\n } else if (hasMany) {\n if (Array.isArray(selectedOption)) {\n newValue = selectedOption.map((option) => option.value)\n } else {\n newValue = []\n }\n } else {\n newValue = selectedOption.value\n }\n\n if (typeof onChangeFromProps === 'function') {\n onChangeFromProps(newValue)\n }\n\n setValue(newValue)\n }\n },\n [readOnly, hasMany, setValue, onChangeFromProps],\n )\n\n return (\n <div\n className={[\n fieldBaseClass,\n 'select',\n className,\n showError && 'error',\n readOnly && 'read-only',\n ]\n .filter(Boolean)\n .join(' ')}\n id={`field-${path.replace(/\\./g, '__')}`}\n style={{\n ...style,\n width,\n }}\n >\n <FieldError CustomError={CustomError} path={path} {...(errorProps || {})} />\n <FieldLabel\n CustomLabel={CustomLabel}\n label={label}\n required={required}\n {...(labelProps || {})}\n />\n <div>\n {BeforeInput}\n <ReactSelect\n disabled={readOnly}\n isClearable={isClearable}\n isMulti={hasMany}\n isSortable={isSortable}\n onChange={onChange}\n options={options.map((option) => ({\n ...option,\n label: getTranslation(option.label, i18n),\n }))}\n showError={showError}\n value={valueToRender as OptionObject}\n />\n {AfterInput}\n </div>\n {CustomDescription !== undefined ? (\n CustomDescription\n ) : (\n <FieldDescription {...(descriptionProps || {})} />\n )}\n </div>\n )\n}\n\nexport const Select = withCondition(SelectField)\n"],"names":["getTranslation","FieldDescription","FieldError","FieldLabel","useFieldProps","React","useCallback","useState","ReactSelect","useField","withCondition","useTranslation","fieldBaseClass","formatOptions","options","map","option","value","label","SelectField","props","name","AfterInput","BeforeInput","CustomDescription","CustomError","CustomLabel","className","descriptionProps","errorProps","hasMany","isClearable","isSortable","labelProps","onChange","onChangeFromProps","optionsFromProps","path","pathFromProps","readOnly","readOnlyFromProps","required","style","validate","width","i18n","memoizedValidate","validationOptions","pathFromContext","readOnlyFromContext","setValue","showError","valueToRender","Array","isArray","val","matchingOption","find","selectedOption","newValue","div","filter","Boolean","join","id","replace","disabled","isMulti","undefined","Select"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Tabs/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAA;AAMpD,OAAO,KAA2C,MAAM,OAAO,CAAA;AAE/D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yDAAyD,CAAA;AACxF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAWvD,OAAO,cAAc,CAAA;AACrB,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAI5C,OAAO,EAAE,YAAY,EAAE,CAAA;AAEvB,MAAM,MAAM,cAAc,GAAG,aAAa,GAAG;IAC3C,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,gBAAgB,CAAA;IAC7B,IAAI,CAAC,EAAE,SAAS,EAAE,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Tabs/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAA;AAMpD,OAAO,KAA2C,MAAM,OAAO,CAAA;AAE/D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yDAAyD,CAAA;AACxF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAWvD,OAAO,cAAc,CAAA;AACrB,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAI5C,OAAO,EAAE,YAAY,EAAE,CAAA;AAEvB,MAAM,MAAM,cAAc,GAAG,aAAa,GAAG;IAC3C,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,gBAAgB,CAAA;IAC7B,IAAI,CAAC,EAAE,SAAS,EAAE,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAoJD,eAAO,MAAM,IAAI,0BAA2B,CAAA"}
|
|
@@ -16,8 +16,9 @@ import { TabsProvider } from './provider.js';
|
|
|
16
16
|
const baseClass = 'tabs-field';
|
|
17
17
|
export { TabsProvider };
|
|
18
18
|
const TabsField = (props)=>{
|
|
19
|
-
const { name, CustomDescription, className, descriptionProps, forceRender = false, path: pathFromProps, readOnly, tabs = [] } = props;
|
|
20
|
-
const { indexPath, path: pathFromContext, permissions, schemaPath } = useFieldProps();
|
|
19
|
+
const { name, CustomDescription, className, descriptionProps, forceRender = false, path: pathFromProps, readOnly: readOnlyFromProps, tabs = [] } = props;
|
|
20
|
+
const { indexPath, path: pathFromContext, permissions, readOnly: readOnlyFromContext, schemaPath } = useFieldProps();
|
|
21
|
+
const readOnly = readOnlyFromProps || readOnlyFromContext;
|
|
21
22
|
const path = pathFromContext || pathFromProps || name;
|
|
22
23
|
const { getPreference, setPreference } = usePreferences();
|
|
23
24
|
const { preferencesKey } = useDocumentInfo();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/fields/Tabs/index.tsx"],"sourcesContent":["'use client'\nimport type { FieldPermissions } from 'payload/auth'\nimport type { DocumentPreferences } from 'payload/types'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { FieldDescription } from '@payloadcms/ui/forms/FieldDescription'\nimport { toKebabCase } from 'payload/utilities'\nimport React, { useCallback, useEffect, useState } from 'react'\n\nimport type { MappedTab } from '../../providers/ComponentMap/buildComponentMap/types.js'\nimport type { FormFieldBase } from '../shared/index.js'\n\nimport { useCollapsible } from '../../elements/Collapsible/provider.js'\nimport { useFieldProps } from '../../forms/FieldPropsProvider/index.js'\nimport { RenderFields } from '../../forms/RenderFields/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { usePreferences } from '../../providers/Preferences/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { fieldBaseClass } from '../shared/index.js'\nimport { TabComponent } from './Tab/index.js'\nimport './index.scss'\nimport { TabsProvider } from './provider.js'\n\nconst baseClass = 'tabs-field'\n\nexport { TabsProvider }\n\nexport type TabsFieldProps = FormFieldBase & {\n forceRender?: boolean\n name?: string\n path?: string\n permissions: FieldPermissions\n tabs?: MappedTab[]\n width?: string\n}\n\nconst TabsField: React.FC<TabsFieldProps> = (props) => {\n const {\n name,\n CustomDescription,\n className,\n descriptionProps,\n forceRender = false,\n path: pathFromProps,\n readOnly,\n tabs = [],\n } = props\n\n const { indexPath, path: pathFromContext, permissions, schemaPath } = useFieldProps()\n const path = pathFromContext || pathFromProps || name\n const { getPreference, setPreference } = usePreferences()\n const { preferencesKey } = useDocumentInfo()\n const { i18n } = useTranslation()\n const isWithinCollapsible = useCollapsible()\n const [activeTabIndex, setActiveTabIndex] = useState<number>(0)\n const tabsPrefKey = `tabs-${indexPath}`\n\n useEffect(() => {\n const getInitialPref = async () => {\n const existingPreferences: DocumentPreferences = await getPreference(preferencesKey)\n const initialIndex = path\n ? existingPreferences?.fields?.[path]?.tabIndex\n : existingPreferences?.fields?.[tabsPrefKey]?.tabIndex\n setActiveTabIndex(initialIndex || 0)\n }\n void getInitialPref()\n }, [path, getPreference, preferencesKey, tabsPrefKey])\n\n const handleTabChange = useCallback(\n async (incomingTabIndex: number) => {\n setActiveTabIndex(incomingTabIndex)\n\n const existingPreferences: DocumentPreferences = await getPreference(preferencesKey)\n\n void setPreference(preferencesKey, {\n ...existingPreferences,\n ...(path\n ? {\n fields: {\n ...(existingPreferences?.fields || {}),\n [path]: {\n ...existingPreferences?.fields?.[path],\n tabIndex: incomingTabIndex,\n },\n },\n }\n : {\n fields: {\n ...existingPreferences?.fields,\n [tabsPrefKey]: {\n ...existingPreferences?.fields?.[tabsPrefKey],\n tabIndex: incomingTabIndex,\n },\n },\n }),\n })\n },\n [preferencesKey, getPreference, setPreference, path, tabsPrefKey],\n )\n\n const activeTabConfig = tabs[activeTabIndex]\n\n return (\n <div\n className={[\n fieldBaseClass,\n className,\n baseClass,\n isWithinCollapsible && `${baseClass}--within-collapsible`,\n ]\n .filter(Boolean)\n .join(' ')}\n >\n <TabsProvider>\n <div className={`${baseClass}__tabs-wrap`}>\n <div className={`${baseClass}__tabs`}>\n {tabs.map((tab, tabIndex) => {\n return (\n <TabComponent\n isActive={activeTabIndex === tabIndex}\n key={tabIndex}\n parentPath={path}\n setIsActive={() => handleTabChange(tabIndex)}\n tab={tab}\n />\n )\n })}\n </div>\n </div>\n <div className={`${baseClass}__content-wrap`}>\n {activeTabConfig && (\n <React.Fragment>\n <div\n className={[\n `${baseClass}__tab`,\n activeTabConfig.label &&\n `${baseClass}__tabConfigLabel-${toKebabCase(\n getTranslation(activeTabConfig.label, i18n),\n )}`,\n ]\n .filter(Boolean)\n .join(' ')}\n >\n {CustomDescription ? (\n CustomDescription\n ) : (\n <FieldDescription {...(descriptionProps || {})} />\n )}\n <RenderFields\n fieldMap={activeTabConfig.fieldMap}\n forceRender={forceRender}\n key={\n activeTabConfig.label\n ? getTranslation(activeTabConfig.label, i18n)\n : activeTabConfig['name']\n }\n margins=\"small\"\n path={`${path ? `${path}.` : ''}${activeTabConfig.name ? `${activeTabConfig.name}` : ''}`}\n permissions={\n 'name' in activeTabConfig && permissions?.fields?.[activeTabConfig.name]?.fields\n ? permissions?.fields?.[activeTabConfig.name]?.fields\n : permissions?.fields\n }\n readOnly={readOnly}\n schemaPath={`${schemaPath ? `${schemaPath}` : ''}${activeTabConfig.name ? `.${activeTabConfig.name}` : ''}`}\n />\n </div>\n </React.Fragment>\n )}\n </div>\n </TabsProvider>\n </div>\n )\n}\n\nexport const Tabs = withCondition(TabsField)\n"],"names":["getTranslation","FieldDescription","toKebabCase","React","useCallback","useEffect","useState","useCollapsible","useFieldProps","RenderFields","withCondition","useDocumentInfo","usePreferences","useTranslation","fieldBaseClass","TabComponent","TabsProvider","baseClass","TabsField","props","name","CustomDescription","className","descriptionProps","forceRender","path","pathFromProps","readOnly","tabs","indexPath","pathFromContext","permissions","schemaPath","getPreference","setPreference","preferencesKey","i18n","isWithinCollapsible","activeTabIndex","setActiveTabIndex","tabsPrefKey","getInitialPref","existingPreferences","initialIndex","fields","tabIndex","handleTabChange","incomingTabIndex","activeTabConfig","div","filter","Boolean","join","map","tab","isActive","key","parentPath","setIsActive","Fragment","label","fieldMap","margins","Tabs"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../../src/fields/Tabs/index.tsx"],"sourcesContent":["'use client'\nimport type { FieldPermissions } from 'payload/auth'\nimport type { DocumentPreferences } from 'payload/types'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { FieldDescription } from '@payloadcms/ui/forms/FieldDescription'\nimport { toKebabCase } from 'payload/utilities'\nimport React, { useCallback, useEffect, useState } from 'react'\n\nimport type { MappedTab } from '../../providers/ComponentMap/buildComponentMap/types.js'\nimport type { FormFieldBase } from '../shared/index.js'\n\nimport { useCollapsible } from '../../elements/Collapsible/provider.js'\nimport { useFieldProps } from '../../forms/FieldPropsProvider/index.js'\nimport { RenderFields } from '../../forms/RenderFields/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { usePreferences } from '../../providers/Preferences/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { fieldBaseClass } from '../shared/index.js'\nimport { TabComponent } from './Tab/index.js'\nimport './index.scss'\nimport { TabsProvider } from './provider.js'\n\nconst baseClass = 'tabs-field'\n\nexport { TabsProvider }\n\nexport type TabsFieldProps = FormFieldBase & {\n forceRender?: boolean\n name?: string\n path?: string\n permissions: FieldPermissions\n tabs?: MappedTab[]\n width?: string\n}\n\nconst TabsField: React.FC<TabsFieldProps> = (props) => {\n const {\n name,\n CustomDescription,\n className,\n descriptionProps,\n forceRender = false,\n path: pathFromProps,\n readOnly: readOnlyFromProps,\n tabs = [],\n } = props\n\n const {\n indexPath,\n path: pathFromContext,\n permissions,\n readOnly: readOnlyFromContext,\n schemaPath,\n } = useFieldProps()\n const readOnly = readOnlyFromProps || readOnlyFromContext\n const path = pathFromContext || pathFromProps || name\n const { getPreference, setPreference } = usePreferences()\n const { preferencesKey } = useDocumentInfo()\n const { i18n } = useTranslation()\n const isWithinCollapsible = useCollapsible()\n const [activeTabIndex, setActiveTabIndex] = useState<number>(0)\n const tabsPrefKey = `tabs-${indexPath}`\n\n useEffect(() => {\n const getInitialPref = async () => {\n const existingPreferences: DocumentPreferences = await getPreference(preferencesKey)\n const initialIndex = path\n ? existingPreferences?.fields?.[path]?.tabIndex\n : existingPreferences?.fields?.[tabsPrefKey]?.tabIndex\n setActiveTabIndex(initialIndex || 0)\n }\n void getInitialPref()\n }, [path, getPreference, preferencesKey, tabsPrefKey])\n\n const handleTabChange = useCallback(\n async (incomingTabIndex: number) => {\n setActiveTabIndex(incomingTabIndex)\n\n const existingPreferences: DocumentPreferences = await getPreference(preferencesKey)\n\n void setPreference(preferencesKey, {\n ...existingPreferences,\n ...(path\n ? {\n fields: {\n ...(existingPreferences?.fields || {}),\n [path]: {\n ...existingPreferences?.fields?.[path],\n tabIndex: incomingTabIndex,\n },\n },\n }\n : {\n fields: {\n ...existingPreferences?.fields,\n [tabsPrefKey]: {\n ...existingPreferences?.fields?.[tabsPrefKey],\n tabIndex: incomingTabIndex,\n },\n },\n }),\n })\n },\n [preferencesKey, getPreference, setPreference, path, tabsPrefKey],\n )\n\n const activeTabConfig = tabs[activeTabIndex]\n\n return (\n <div\n className={[\n fieldBaseClass,\n className,\n baseClass,\n isWithinCollapsible && `${baseClass}--within-collapsible`,\n ]\n .filter(Boolean)\n .join(' ')}\n >\n <TabsProvider>\n <div className={`${baseClass}__tabs-wrap`}>\n <div className={`${baseClass}__tabs`}>\n {tabs.map((tab, tabIndex) => {\n return (\n <TabComponent\n isActive={activeTabIndex === tabIndex}\n key={tabIndex}\n parentPath={path}\n setIsActive={() => handleTabChange(tabIndex)}\n tab={tab}\n />\n )\n })}\n </div>\n </div>\n <div className={`${baseClass}__content-wrap`}>\n {activeTabConfig && (\n <React.Fragment>\n <div\n className={[\n `${baseClass}__tab`,\n activeTabConfig.label &&\n `${baseClass}__tabConfigLabel-${toKebabCase(\n getTranslation(activeTabConfig.label, i18n),\n )}`,\n ]\n .filter(Boolean)\n .join(' ')}\n >\n {CustomDescription ? (\n CustomDescription\n ) : (\n <FieldDescription {...(descriptionProps || {})} />\n )}\n <RenderFields\n fieldMap={activeTabConfig.fieldMap}\n forceRender={forceRender}\n key={\n activeTabConfig.label\n ? getTranslation(activeTabConfig.label, i18n)\n : activeTabConfig['name']\n }\n margins=\"small\"\n path={`${path ? `${path}.` : ''}${activeTabConfig.name ? `${activeTabConfig.name}` : ''}`}\n permissions={\n 'name' in activeTabConfig && permissions?.fields?.[activeTabConfig.name]?.fields\n ? permissions?.fields?.[activeTabConfig.name]?.fields\n : permissions?.fields\n }\n readOnly={readOnly}\n schemaPath={`${schemaPath ? `${schemaPath}` : ''}${activeTabConfig.name ? `.${activeTabConfig.name}` : ''}`}\n />\n </div>\n </React.Fragment>\n )}\n </div>\n </TabsProvider>\n </div>\n )\n}\n\nexport const Tabs = withCondition(TabsField)\n"],"names":["getTranslation","FieldDescription","toKebabCase","React","useCallback","useEffect","useState","useCollapsible","useFieldProps","RenderFields","withCondition","useDocumentInfo","usePreferences","useTranslation","fieldBaseClass","TabComponent","TabsProvider","baseClass","TabsField","props","name","CustomDescription","className","descriptionProps","forceRender","path","pathFromProps","readOnly","readOnlyFromProps","tabs","indexPath","pathFromContext","permissions","readOnlyFromContext","schemaPath","getPreference","setPreference","preferencesKey","i18n","isWithinCollapsible","activeTabIndex","setActiveTabIndex","tabsPrefKey","getInitialPref","existingPreferences","initialIndex","fields","tabIndex","handleTabChange","incomingTabIndex","activeTabConfig","div","filter","Boolean","join","map","tab","isActive","key","parentPath","setIsActive","Fragment","label","fieldMap","margins","Tabs"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Text/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA2C,MAAM,OAAO,CAAA;AAG/D,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AAOhE,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAA;AACtC,OAAO,cAAc,CAAA;AAErB,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,cAAc,EAAE,CAAA;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Text/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA2C,MAAM,OAAO,CAAA;AAG/D,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AAOhE,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAA;AACtC,OAAO,cAAc,CAAA;AAErB,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,cAAc,EAAE,CAAA;AAuIpD,eAAO,MAAM,IAAI,0BAA2B,CAAA"}
|
|
@@ -9,7 +9,7 @@ import { isFieldRTL } from '../shared/index.js';
|
|
|
9
9
|
import { TextInput } from './Input.js';
|
|
10
10
|
export { TextInput };
|
|
11
11
|
const TextField = (props)=>{
|
|
12
|
-
const { name, AfterInput, BeforeInput, CustomDescription, CustomError, CustomLabel, className, descriptionProps, errorProps, hasMany, inputRef, labelProps, localized, maxLength, maxRows, minLength, minRows, path: pathFromProps, placeholder, required, rtl, style, validate, width } = props;
|
|
12
|
+
const { name, AfterInput, BeforeInput, CustomDescription, CustomError, CustomLabel, className, descriptionProps, errorProps, hasMany, inputRef, labelProps, localized, maxLength, maxRows, minLength, minRows, path: pathFromProps, placeholder, readOnly: readOnlyFromProps, required, rtl, style, validate, width } = props;
|
|
13
13
|
const locale = useLocale();
|
|
14
14
|
const { localization: localizationConfig } = useConfig();
|
|
15
15
|
const memoizedValidate = useCallback((value, options)=>{
|
|
@@ -25,8 +25,9 @@ const TextField = (props)=>{
|
|
|
25
25
|
maxLength,
|
|
26
26
|
required
|
|
27
27
|
]);
|
|
28
|
-
const { path: pathFromContext } = useFieldProps();
|
|
29
|
-
const
|
|
28
|
+
const { path: pathFromContext, readOnly: readOnlyFromContext } = useFieldProps();
|
|
29
|
+
const readOnly = readOnlyFromProps || readOnlyFromContext;
|
|
30
|
+
const { formProcessing, path, setValue, showError, value } = useField({
|
|
30
31
|
path: pathFromContext || pathFromProps || name,
|
|
31
32
|
validate: memoizedValidate
|
|
32
33
|
});
|
|
@@ -94,7 +95,7 @@ const TextField = (props)=>{
|
|
|
94
95
|
},
|
|
95
96
|
path: path,
|
|
96
97
|
placeholder: placeholder,
|
|
97
|
-
readOnly: readOnly,
|
|
98
|
+
readOnly: formProcessing || readOnly,
|
|
98
99
|
required: required,
|
|
99
100
|
rtl: renderRTL,
|
|
100
101
|
showError: showError,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/fields/Text/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientValidate } from 'payload/types'\nimport type {} from 'payload/types'\n\nimport { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'\nimport React, { useCallback, useEffect, useState } from 'react'\n\nimport type { Option } from '../../elements/ReactSelect/types.js'\nimport type { TextFieldProps, TextInputProps } from './types.js'\n\nimport { useField } from '../../forms/useField/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useLocale } from '../../providers/Locale/index.js'\nimport { isFieldRTL } from '../shared/index.js'\nimport { TextInput } from './Input.js'\nimport './index.scss'\n\nexport { TextFieldProps, TextInput, TextInputProps }\n\nconst TextField: React.FC<TextFieldProps> = (props) => {\n const {\n name,\n AfterInput,\n BeforeInput,\n CustomDescription,\n CustomError,\n CustomLabel,\n className,\n descriptionProps,\n errorProps,\n hasMany,\n inputRef,\n labelProps,\n localized,\n maxLength,\n maxRows,\n minLength,\n minRows,\n path: pathFromProps,\n placeholder,\n required,\n rtl,\n style,\n validate,\n width,\n } = props\n\n const locale = useLocale()\n\n const { localization: localizationConfig } = useConfig()\n\n const memoizedValidate: ClientValidate = useCallback(\n (value, options) => {\n if (typeof validate === 'function')\n return validate(value, { ...options, maxLength, minLength, required })\n },\n [validate, minLength, maxLength, required],\n )\n\n const { path: pathFromContext } = useFieldProps()\n\n const {
|
|
1
|
+
{"version":3,"sources":["../../../src/fields/Text/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientValidate } from 'payload/types'\nimport type {} from 'payload/types'\n\nimport { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'\nimport React, { useCallback, useEffect, useState } from 'react'\n\nimport type { Option } from '../../elements/ReactSelect/types.js'\nimport type { TextFieldProps, TextInputProps } from './types.js'\n\nimport { useField } from '../../forms/useField/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useLocale } from '../../providers/Locale/index.js'\nimport { isFieldRTL } from '../shared/index.js'\nimport { TextInput } from './Input.js'\nimport './index.scss'\n\nexport { TextFieldProps, TextInput, TextInputProps }\n\nconst TextField: React.FC<TextFieldProps> = (props) => {\n const {\n name,\n AfterInput,\n BeforeInput,\n CustomDescription,\n CustomError,\n CustomLabel,\n className,\n descriptionProps,\n errorProps,\n hasMany,\n inputRef,\n labelProps,\n localized,\n maxLength,\n maxRows,\n minLength,\n minRows,\n path: pathFromProps,\n placeholder,\n readOnly: readOnlyFromProps,\n required,\n rtl,\n style,\n validate,\n width,\n } = props\n\n const locale = useLocale()\n\n const { localization: localizationConfig } = useConfig()\n\n const memoizedValidate: ClientValidate = useCallback(\n (value, options) => {\n if (typeof validate === 'function')\n return validate(value, { ...options, maxLength, minLength, required })\n },\n [validate, minLength, maxLength, required],\n )\n\n const { path: pathFromContext, readOnly: readOnlyFromContext } = useFieldProps()\n const readOnly = readOnlyFromProps || readOnlyFromContext\n\n const { formProcessing, path, setValue, showError, value } = useField({\n path: pathFromContext || pathFromProps || name,\n validate: memoizedValidate,\n })\n\n const renderRTL = isFieldRTL({\n fieldLocalized: localized,\n fieldRTL: rtl,\n locale,\n localizationConfig: localizationConfig || undefined,\n })\n\n const [valueToRender, setValueToRender] = useState<\n { id: string; label: string; value: { value: number } }[]\n >([]) // Only for hasMany\n\n const handleHasManyChange = useCallback(\n (selectedOption) => {\n if (!readOnly) {\n let newValue\n if (!selectedOption) {\n newValue = []\n } else if (Array.isArray(selectedOption)) {\n newValue = selectedOption.map((option) => option.value?.value || option.value)\n } else {\n newValue = [selectedOption.value?.value || selectedOption.value]\n }\n\n setValue(newValue)\n }\n },\n [readOnly, setValue],\n )\n\n // useEffect update valueToRender:\n useEffect(() => {\n if (hasMany && Array.isArray(value)) {\n setValueToRender(\n value.map((val, index) => {\n return {\n id: `${val}${index}`, // append index to avoid duplicate keys but allow duplicate numbers\n label: `${val}`,\n value: {\n // React-select automatically uses \"label-value\" as a key, so we will get that react duplicate key warning if we just pass in the value as multiple values can be the same. So we need to append the index to the toString() of the value to avoid that warning, as it uses that as the key.\n toString: () => `${val}${index}`,\n value: val?.value || val,\n },\n }\n }),\n )\n }\n }, [value, hasMany])\n\n return (\n <TextInput\n AfterInput={AfterInput}\n BeforeInput={BeforeInput}\n CustomDescription={CustomDescription}\n CustomError={CustomError}\n CustomLabel={CustomLabel}\n className={className}\n descriptionProps={descriptionProps}\n errorProps={errorProps}\n hasMany={hasMany}\n inputRef={inputRef}\n labelProps={labelProps}\n maxRows={maxRows}\n minRows={minRows}\n onChange={\n hasMany\n ? handleHasManyChange\n : (e) => {\n setValue(e.target.value)\n }\n }\n path={path}\n placeholder={placeholder}\n readOnly={formProcessing || readOnly}\n required={required}\n rtl={renderRTL}\n showError={showError}\n style={style}\n value={(value as string) || ''}\n valueToRender={valueToRender as Option[]}\n width={width}\n />\n )\n}\n\nexport const Text = withCondition(TextField)\n"],"names":["useFieldProps","React","useCallback","useEffect","useState","useField","withCondition","useConfig","useLocale","isFieldRTL","TextInput","TextField","props","name","AfterInput","BeforeInput","CustomDescription","CustomError","CustomLabel","className","descriptionProps","errorProps","hasMany","inputRef","labelProps","localized","maxLength","maxRows","minLength","minRows","path","pathFromProps","placeholder","readOnly","readOnlyFromProps","required","rtl","style","validate","width","locale","localization","localizationConfig","memoizedValidate","value","options","pathFromContext","readOnlyFromContext","formProcessing","setValue","showError","renderRTL","fieldLocalized","fieldRTL","undefined","valueToRender","setValueToRender","handleHasManyChange","selectedOption","newValue","Array","isArray","map","option","val","index","id","label","toString","onChange","e","target","Text"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Textarea/index.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAsB,MAAM,OAAO,CAAA;AAE1C,OAAO,KAAK,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAA;AAOxE,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAC1C,OAAO,cAAc,CAAA;AAErB,OAAO,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,aAAa,EAAE,CAAA;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Textarea/index.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAsB,MAAM,OAAO,CAAA;AAE1C,OAAO,KAAK,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAA;AAOxE,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAC1C,OAAO,cAAc,CAAA;AAErB,OAAO,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,aAAa,EAAE,CAAA;AAoFhE,eAAO,MAAM,QAAQ,8BAA+B,CAAA"}
|
|
@@ -10,7 +10,7 @@ import { isFieldRTL } from '../shared/index.js';
|
|
|
10
10
|
import { TextareaInput } from './Input.js';
|
|
11
11
|
export { TextareaInput };
|
|
12
12
|
const TextareaField = (props)=>{
|
|
13
|
-
const { name, AfterInput, BeforeInput, CustomDescription, CustomError, CustomLabel, className, descriptionProps, errorProps, labelProps, locale, localized, maxLength, minLength, path: pathFromProps, placeholder, required, rows, rtl, style, validate, width } = props;
|
|
13
|
+
const { name, AfterInput, BeforeInput, CustomDescription, CustomError, CustomLabel, className, descriptionProps, errorProps, labelProps, locale, localized, maxLength, minLength, path: pathFromProps, placeholder, readOnly: readOnlyFromProps, required, rows, rtl, style, validate, width } = props;
|
|
14
14
|
const { i18n } = useTranslation();
|
|
15
15
|
const { localization } = useConfig();
|
|
16
16
|
const isRTL = isFieldRTL({
|
|
@@ -32,8 +32,9 @@ const TextareaField = (props)=>{
|
|
|
32
32
|
maxLength,
|
|
33
33
|
minLength
|
|
34
34
|
]);
|
|
35
|
-
const { path: pathFromContext } = useFieldProps();
|
|
36
|
-
const
|
|
35
|
+
const { path: pathFromContext, readOnly: readOnlyFromContext } = useFieldProps();
|
|
36
|
+
const readOnly = readOnlyFromProps || readOnlyFromContext;
|
|
37
|
+
const { path, setValue, showError, value } = useField({
|
|
37
38
|
path: pathFromContext || pathFromProps || name,
|
|
38
39
|
validate: memoizedValidate
|
|
39
40
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/fields/Textarea/index.tsx"],"sourcesContent":["/* eslint-disable react/destructuring-assignment */\n'use client'\nimport type { ClientValidate } from 'payload/types'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'\nimport React, { useCallback } from 'react'\n\nimport type { TextAreaInputProps, TextareaFieldProps } from './types.js'\n\nimport { useField } from '../../forms/useField/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { isFieldRTL } from '../shared/index.js'\nimport { TextareaInput } from './Input.js'\nimport './index.scss'\n\nexport { TextAreaInputProps, TextareaFieldProps, TextareaInput }\n\nconst TextareaField: React.FC<TextareaFieldProps> = (props) => {\n const {\n name,\n AfterInput,\n BeforeInput,\n CustomDescription,\n CustomError,\n CustomLabel,\n className,\n descriptionProps,\n errorProps,\n labelProps,\n locale,\n localized,\n maxLength,\n minLength,\n path: pathFromProps,\n placeholder,\n required,\n rows,\n rtl,\n style,\n validate,\n width,\n } = props\n\n const { i18n } = useTranslation()\n\n const { localization } = useConfig()\n\n const isRTL = isFieldRTL({\n fieldLocalized: localized,\n fieldRTL: rtl,\n locale,\n localizationConfig: localization || undefined,\n })\n\n const memoizedValidate: ClientValidate = useCallback(\n (value, options) => {\n if (typeof validate === 'function')\n return validate(value, { ...options, maxLength, minLength, required })\n },\n [validate, required, maxLength, minLength],\n )\n\n const { path: pathFromContext } = useFieldProps()\n\n const { path,
|
|
1
|
+
{"version":3,"sources":["../../../src/fields/Textarea/index.tsx"],"sourcesContent":["/* eslint-disable react/destructuring-assignment */\n'use client'\nimport type { ClientValidate } from 'payload/types'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'\nimport React, { useCallback } from 'react'\n\nimport type { TextAreaInputProps, TextareaFieldProps } from './types.js'\n\nimport { useField } from '../../forms/useField/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { isFieldRTL } from '../shared/index.js'\nimport { TextareaInput } from './Input.js'\nimport './index.scss'\n\nexport { TextAreaInputProps, TextareaFieldProps, TextareaInput }\n\nconst TextareaField: React.FC<TextareaFieldProps> = (props) => {\n const {\n name,\n AfterInput,\n BeforeInput,\n CustomDescription,\n CustomError,\n CustomLabel,\n className,\n descriptionProps,\n errorProps,\n labelProps,\n locale,\n localized,\n maxLength,\n minLength,\n path: pathFromProps,\n placeholder,\n readOnly: readOnlyFromProps,\n required,\n rows,\n rtl,\n style,\n validate,\n width,\n } = props\n\n const { i18n } = useTranslation()\n\n const { localization } = useConfig()\n\n const isRTL = isFieldRTL({\n fieldLocalized: localized,\n fieldRTL: rtl,\n locale,\n localizationConfig: localization || undefined,\n })\n\n const memoizedValidate: ClientValidate = useCallback(\n (value, options) => {\n if (typeof validate === 'function')\n return validate(value, { ...options, maxLength, minLength, required })\n },\n [validate, required, maxLength, minLength],\n )\n\n const { path: pathFromContext, readOnly: readOnlyFromContext } = useFieldProps()\n const readOnly = readOnlyFromProps || readOnlyFromContext\n\n const { path, setValue, showError, value } = useField<string>({\n path: pathFromContext || pathFromProps || name,\n validate: memoizedValidate,\n })\n\n return (\n <TextareaInput\n AfterInput={AfterInput}\n BeforeInput={BeforeInput}\n CustomDescription={CustomDescription}\n CustomError={CustomError}\n CustomLabel={CustomLabel}\n className={className}\n descriptionProps={descriptionProps}\n errorProps={errorProps}\n labelProps={labelProps}\n onChange={(e) => {\n setValue(e.target.value)\n }}\n path={path}\n placeholder={getTranslation(placeholder, i18n)}\n readOnly={readOnly}\n required={required}\n rows={rows}\n rtl={isRTL}\n showError={showError}\n style={style}\n value={value}\n width={width}\n />\n )\n}\n\nexport const Textarea = withCondition(TextareaField)\n"],"names":["getTranslation","useFieldProps","React","useCallback","useField","withCondition","useConfig","useTranslation","isFieldRTL","TextareaInput","TextareaField","props","name","AfterInput","BeforeInput","CustomDescription","CustomError","CustomLabel","className","descriptionProps","errorProps","labelProps","locale","localized","maxLength","minLength","path","pathFromProps","placeholder","readOnly","readOnlyFromProps","required","rows","rtl","style","validate","width","i18n","localization","isRTL","fieldLocalized","fieldRTL","localizationConfig","undefined","memoizedValidate","value","options","pathFromContext","readOnlyFromContext","setValue","showError","onChange","e","target","Textarea"],"mappings":"AAAA,iDAAiD,GACjD;AAGA,SAASA,cAAc,QAAQ,2BAA0B;AACzD,SAASC,aAAa,QAAQ,0CAAyC;AACvE,OAAOC,SAASC,WAAW,QAAQ,QAAO;AAI1C,SAASC,QAAQ,QAAQ,gCAA+B;AACxD,SAASC,aAAa,QAAQ,qCAAoC;AAClE,SAASC,SAAS,QAAQ,kCAAiC;AAC3D,SAASC,cAAc,QAAQ,uCAAsC;AACrE,SAASC,UAAU,QAAQ,qBAAoB;AAC/C,SAASC,aAAa,QAAQ,aAAY;AAG1C,SAAiDA,aAAa,GAAE;AAEhE,MAAMC,gBAA8C,CAACC;IACnD,MAAM,EACJC,IAAI,EACJC,UAAU,EACVC,WAAW,EACXC,iBAAiB,EACjBC,WAAW,EACXC,WAAW,EACXC,SAAS,EACTC,gBAAgB,EAChBC,UAAU,EACVC,UAAU,EACVC,MAAM,EACNC,SAAS,EACTC,SAAS,EACTC,SAAS,EACTC,MAAMC,aAAa,EACnBC,WAAW,EACXC,UAAUC,iBAAiB,EAC3BC,QAAQ,EACRC,IAAI,EACJC,GAAG,EACHC,KAAK,EACLC,QAAQ,EACRC,KAAK,EACN,GAAGzB;IAEJ,MAAM,EAAE0B,IAAI,EAAE,GAAG9B;IAEjB,MAAM,EAAE+B,YAAY,EAAE,GAAGhC;IAEzB,MAAMiC,QAAQ/B,WAAW;QACvBgC,gBAAgBjB;QAChBkB,UAAUR;QACVX;QACAoB,oBAAoBJ,gBAAgBK;IACtC;IAEA,MAAMC,mBAAmCzC,YACvC,CAAC0C,OAAOC;QACN,IAAI,OAAOX,aAAa,YACtB,OAAOA,SAASU,OAAO;YAAE,GAAGC,OAAO;YAAEtB;YAAWC;YAAWM;QAAS;IACxE,GACA;QAACI;QAAUJ;QAAUP;QAAWC;KAAU;IAG5C,MAAM,EAAEC,MAAMqB,eAAe,EAAElB,UAAUmB,mBAAmB,EAAE,GAAG/C;IACjE,MAAM4B,WAAWC,qBAAqBkB;IAEtC,MAAM,EAAEtB,IAAI,EAAEuB,QAAQ,EAAEC,SAAS,EAAEL,KAAK,EAAE,GAAGzC,SAAiB;QAC5DsB,MAAMqB,mBAAmBpB,iBAAiBf;QAC1CuB,UAAUS;IACZ;IAEA,qBACE,oBAACnC;QACCI,YAAYA;QACZC,aAAaA;QACbC,mBAAmBA;QACnBC,aAAaA;QACbC,aAAaA;QACbC,WAAWA;QACXC,kBAAkBA;QAClBC,YAAYA;QACZC,YAAYA;QACZ8B,UAAU,CAACC;YACTH,SAASG,EAAEC,MAAM,CAACR,KAAK;QACzB;QACAnB,MAAMA;QACNE,aAAa5B,eAAe4B,aAAaS;QACzCR,UAAUA;QACVE,UAAUA;QACVC,MAAMA;QACNC,KAAKM;QACLW,WAAWA;QACXhB,OAAOA;QACPW,OAAOA;QACPT,OAAOA;;AAGb;AAEA,OAAO,MAAMkB,WAAWjD,cAAcK,eAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Upload/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAsB,MAAM,OAAO,CAAA;AAE1C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAA;AAClD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAA;AAIlD,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AACxC,OAAO,cAAc,CAAA;AAErB,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,CAAA;AACxC,YAAY,EAAE,gBAAgB,EAAE,CAAA;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Upload/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAsB,MAAM,OAAO,CAAA;AAE1C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAA;AAClD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAA;AAIlD,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AACxC,OAAO,cAAc,CAAA;AAErB,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,CAAA;AACxC,YAAY,EAAE,gBAAgB,EAAE,CAAA;AAqFhC,eAAO,MAAM,MAAM,4BAAyB,CAAA"}
|
|
@@ -7,7 +7,7 @@ import { useConfig } from '../../providers/Config/index.js';
|
|
|
7
7
|
import { UploadInput } from './Input.js';
|
|
8
8
|
export { UploadInput };
|
|
9
9
|
const _Upload = (props)=>{
|
|
10
|
-
const { CustomDescription, CustomError, CustomLabel, className, descriptionProps, errorProps, label, labelProps, path: pathFromProps, readOnly, relationTo, required, style, validate, width } = props;
|
|
10
|
+
const { CustomDescription, CustomError, CustomLabel, className, descriptionProps, errorProps, label, labelProps, path: pathFromProps, readOnly: readOnlyFromProps, relationTo, required, style, validate, width } = props;
|
|
11
11
|
const { collections, routes: { api }, serverURL } = useConfig();
|
|
12
12
|
const collection = collections.find((coll)=>coll.slug === relationTo);
|
|
13
13
|
const memoizedValidate = useCallback((value, options)=>{
|
|
@@ -21,7 +21,8 @@ const _Upload = (props)=>{
|
|
|
21
21
|
validate,
|
|
22
22
|
required
|
|
23
23
|
]);
|
|
24
|
-
const { path: pathFromContext } = useFieldProps();
|
|
24
|
+
const { path: pathFromContext, readOnly: readOnlyFromContext } = useFieldProps();
|
|
25
|
+
const readOnly = readOnlyFromProps || readOnlyFromContext;
|
|
25
26
|
const { filterOptions, path, setValue, showError, value } = useField({
|
|
26
27
|
path: pathFromContext || pathFromProps,
|
|
27
28
|
validate: memoizedValidate
|
|
@@ -43,6 +44,7 @@ const _Upload = (props)=>{
|
|
|
43
44
|
descriptionProps: descriptionProps,
|
|
44
45
|
errorProps: errorProps,
|
|
45
46
|
filterOptions: filterOptions,
|
|
47
|
+
label: label,
|
|
46
48
|
labelProps: labelProps,
|
|
47
49
|
onChange: onChange,
|
|
48
50
|
path: path,
|