@payloadcms/ui 3.0.0-beta.22 → 3.0.0-beta.24
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/DocumentDrawer/DrawerContent.d.ts.map +1 -1
- package/dist/elements/DocumentDrawer/DrawerContent.js +7 -7
- package/dist/elements/DocumentDrawer/DrawerContent.js.map +1 -1
- package/dist/elements/ListControls/index.d.ts.map +1 -1
- package/dist/elements/ListControls/index.js +15 -2
- package/dist/elements/ListControls/index.js.map +1 -1
- package/dist/elements/Save/index.d.ts.map +1 -1
- package/dist/elements/Save/index.js +7 -1
- package/dist/elements/Save/index.js.map +1 -1
- package/dist/elements/SaveDraft/index.d.ts.map +1 -1
- package/dist/elements/SaveDraft/index.js +8 -5
- package/dist/elements/SaveDraft/index.js.map +1 -1
- package/dist/elements/Table/DefaultCell/fields/Checkbox/index.d.ts.map +1 -1
- package/dist/elements/Table/DefaultCell/fields/Checkbox/index.js +6 -2
- package/dist/elements/Table/DefaultCell/fields/Checkbox/index.js.map +1 -1
- package/dist/elements/Table/DefaultCell/index.d.ts.map +1 -1
- package/dist/elements/Table/DefaultCell/index.js +1 -1
- package/dist/elements/Table/DefaultCell/index.js.map +1 -1
- package/dist/fields/ConfirmPassword/index.js +1 -1
- package/dist/fields/ConfirmPassword/index.js.map +1 -1
- package/dist/forms/useField/index.d.ts.map +1 -1
- package/dist/forms/useField/index.js +3 -1
- package/dist/forms/useField/index.js.map +1 -1
- package/package.json +5 -5
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DrawerContent.d.ts","sourceRoot":"","sources":["../../../src/elements/DocumentDrawer/DrawerContent.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA2C,MAAM,OAAO,CAAA;AAG/D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAA;AAerD,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,
|
|
1
|
+
{"version":3,"file":"DrawerContent.d.ts","sourceRoot":"","sources":["../../../src/elements/DocumentDrawer/DrawerContent.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA2C,MAAM,OAAO,CAAA;AAG/D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAA;AAerD,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAyG/D,CAAA"}
|
|
@@ -15,23 +15,23 @@ import { Gutter } from '../Gutter/index.js';
|
|
|
15
15
|
import { IDLabel } from '../IDLabel/index.js';
|
|
16
16
|
import { RenderTitle } from '../RenderTitle/index.js';
|
|
17
17
|
import { baseClass } from './index.js';
|
|
18
|
-
export const DocumentDrawerContent = ({ id, Header, collectionSlug, drawerSlug, onSave: onSaveFromProps })=>{
|
|
18
|
+
export const DocumentDrawerContent = ({ id: existingDocID, Header, collectionSlug, drawerSlug, onSave: onSaveFromProps })=>{
|
|
19
19
|
const { useModal } = facelessUIImport;
|
|
20
20
|
const config = useConfig();
|
|
21
21
|
const { routes: { api: apiRoute }, serverURL } = config;
|
|
22
22
|
const { closeModal, modalState, toggleModal } = useModal();
|
|
23
23
|
const locale = useLocale();
|
|
24
24
|
const { t } = useTranslation();
|
|
25
|
-
const [
|
|
25
|
+
const [docID, setDocID] = useState(existingDocID);
|
|
26
26
|
const [isOpen, setIsOpen] = useState(false);
|
|
27
27
|
const [collectionConfig] = useRelatedCollections(collectionSlug);
|
|
28
28
|
const { formQueryParams } = useFormQueryParams();
|
|
29
29
|
const formattedQueryParams = queryString.stringify(formQueryParams);
|
|
30
30
|
const { componentMap } = useComponentMap();
|
|
31
31
|
const { Edit } = componentMap[`${collectionSlug ? 'collections' : 'globals'}`][collectionSlug];
|
|
32
|
-
const isEditing = Boolean(
|
|
33
|
-
const apiURL =
|
|
34
|
-
const action = `${serverURL}${apiRoute}/${collectionSlug}${isEditing ? `/${
|
|
32
|
+
const isEditing = Boolean(docID);
|
|
33
|
+
const apiURL = docID ? `${serverURL}${apiRoute}/${collectionSlug}/${docID}?locale=${locale.code}` : null;
|
|
34
|
+
const action = `${serverURL}${apiRoute}/${collectionSlug}${isEditing ? `/${docID}` : ''}?${formattedQueryParams}`;
|
|
35
35
|
useEffect(()=>{
|
|
36
36
|
setIsOpen(Boolean(modalState[drawerSlug]?.isOpen));
|
|
37
37
|
}, [
|
|
@@ -50,7 +50,7 @@ export const DocumentDrawerContent = ({ id, Header, collectionSlug, drawerSlug,
|
|
|
50
50
|
t
|
|
51
51
|
]);
|
|
52
52
|
const onSave = useCallback((args)=>{
|
|
53
|
-
|
|
53
|
+
setDocID(args.doc.id);
|
|
54
54
|
if (typeof onSaveFromProps === 'function') {
|
|
55
55
|
void onSaveFromProps({
|
|
56
56
|
...args,
|
|
@@ -87,7 +87,7 @@ export const DocumentDrawerContent = ({ id, Header, collectionSlug, drawerSlug,
|
|
|
87
87
|
// Same reason as above. We need to fully-fetch the docPreferences from the server. This is done in DocumentInfoProvider if we set it to null here.
|
|
88
88
|
hasSavePermission: null,
|
|
89
89
|
// isLoading,
|
|
90
|
-
id:
|
|
90
|
+
id: docID,
|
|
91
91
|
isEditing: isEditing,
|
|
92
92
|
onLoadError: onLoadError,
|
|
93
93
|
onSave: onSave
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/elements/DocumentDrawer/DrawerContent.tsx"],"sourcesContent":["'use client'\n\nimport * as facelessUIImport from '@faceless-ui/modal'\nimport queryString from 'qs'\nimport React, { useCallback, useEffect, useState } from 'react'\nimport { toast } from 'react-toastify'\n\nimport type { DocumentDrawerProps } from './types.js'\n\nimport { useRelatedCollections } from '../../fields/Relationship/AddNew/useRelatedCollections.js'\nimport { X } from '../../icons/X/index.js'\nimport { useComponentMap } from '../../providers/ComponentMap/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { DocumentInfoProvider, useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { useFormQueryParams } from '../../providers/FormQueryParams/index.js'\nimport { useLocale } from '../../providers/Locale/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Gutter } from '../Gutter/index.js'\nimport { IDLabel } from '../IDLabel/index.js'\nimport { RenderTitle } from '../RenderTitle/index.js'\nimport { baseClass } from './index.js'\n\nexport const DocumentDrawerContent: React.FC<DocumentDrawerProps> = ({\n id,\n Header,\n collectionSlug,\n drawerSlug,\n onSave: onSaveFromProps,\n}) => {\n const { useModal } = facelessUIImport\n\n const config = useConfig()\n\n const {\n routes: { api: apiRoute },\n serverURL,\n } = config\n\n const { closeModal, modalState, toggleModal } = useModal()\n const locale = useLocale()\n const { t } = useTranslation()\n const [
|
|
1
|
+
{"version":3,"sources":["../../../src/elements/DocumentDrawer/DrawerContent.tsx"],"sourcesContent":["'use client'\n\nimport * as facelessUIImport from '@faceless-ui/modal'\nimport queryString from 'qs'\nimport React, { useCallback, useEffect, useState } from 'react'\nimport { toast } from 'react-toastify'\n\nimport type { DocumentDrawerProps } from './types.js'\n\nimport { useRelatedCollections } from '../../fields/Relationship/AddNew/useRelatedCollections.js'\nimport { X } from '../../icons/X/index.js'\nimport { useComponentMap } from '../../providers/ComponentMap/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { DocumentInfoProvider, useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { useFormQueryParams } from '../../providers/FormQueryParams/index.js'\nimport { useLocale } from '../../providers/Locale/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Gutter } from '../Gutter/index.js'\nimport { IDLabel } from '../IDLabel/index.js'\nimport { RenderTitle } from '../RenderTitle/index.js'\nimport { baseClass } from './index.js'\n\nexport const DocumentDrawerContent: React.FC<DocumentDrawerProps> = ({\n id: existingDocID,\n Header,\n collectionSlug,\n drawerSlug,\n onSave: onSaveFromProps,\n}) => {\n const { useModal } = facelessUIImport\n\n const config = useConfig()\n\n const {\n routes: { api: apiRoute },\n serverURL,\n } = config\n\n const { closeModal, modalState, toggleModal } = useModal()\n const locale = useLocale()\n const { t } = useTranslation()\n const [docID, setDocID] = useState(existingDocID)\n const [isOpen, setIsOpen] = useState(false)\n const [collectionConfig] = useRelatedCollections(collectionSlug)\n const { formQueryParams } = useFormQueryParams()\n const formattedQueryParams = queryString.stringify(formQueryParams)\n\n const { componentMap } = useComponentMap()\n\n const { Edit } = componentMap[`${collectionSlug ? 'collections' : 'globals'}`][collectionSlug]\n const isEditing = Boolean(docID)\n const apiURL = docID\n ? `${serverURL}${apiRoute}/${collectionSlug}/${docID}?locale=${locale.code}`\n : null\n const action = `${serverURL}${apiRoute}/${collectionSlug}${\n isEditing ? `/${docID}` : ''\n }?${formattedQueryParams}`\n\n useEffect(() => {\n setIsOpen(Boolean(modalState[drawerSlug]?.isOpen))\n }, [modalState, drawerSlug])\n\n const onLoadError = React.useCallback(\n (data) => {\n if (isOpen) {\n closeModal(drawerSlug)\n toast.error(data.errors?.[0].message || t('error:unspecific'))\n }\n },\n [closeModal, drawerSlug, isOpen, t],\n )\n\n const onSave = useCallback<DocumentDrawerProps['onSave']>(\n (args) => {\n setDocID(args.doc.id)\n if (typeof onSaveFromProps === 'function') {\n void onSaveFromProps({\n ...args,\n collectionConfig,\n })\n }\n },\n [onSaveFromProps, collectionConfig],\n )\n\n return (\n <DocumentInfoProvider\n BeforeDocument={\n <Gutter className={`${baseClass}__header`}>\n <div className={`${baseClass}__header-content`}>\n <h2 className={`${baseClass}__header-text`}>\n {Header || <RenderTitle element=\"span\" />}\n </h2>\n {/* TODO: the `button` HTML element breaks CSS transitions on the drawer for some reason...\n i.e. changing to a `div` element will fix the animation issue but will break accessibility\n */}\n <button\n aria-label={t('general:close')}\n className={`${baseClass}__header-close`}\n onClick={() => toggleModal(drawerSlug)}\n type=\"button\"\n >\n <X />\n </button>\n </div>\n <DocumentTitle />\n </Gutter>\n }\n action={action}\n apiURL={apiURL}\n collectionSlug={collectionConfig.slug}\n disableActions\n disableLeaveWithoutSaving\n // Do NOT pass in the docPermissions we have here. This is because the permissions we have here do not have their where: { } returns resolved.\n // If we set it to null though, the DocumentInfoProvider will fully-fetch the permissions from the server, and the where: { } returns will be resolved.\n docPermissions={null}\n // Same reason as above. We need to fully-fetch the docPreferences from the server. This is done in DocumentInfoProvider if we set it to null here.\n hasSavePermission={null}\n // isLoading,\n id={docID}\n isEditing={isEditing}\n onLoadError={onLoadError}\n onSave={onSave}\n >\n {Edit}\n </DocumentInfoProvider>\n )\n}\n\nconst DocumentTitle: React.FC = () => {\n const { id, title } = useDocumentInfo()\n return id && id !== title ? <IDLabel id={id.toString()} /> : null\n}\n"],"names":["facelessUIImport","queryString","React","useCallback","useEffect","useState","toast","useRelatedCollections","X","useComponentMap","useConfig","DocumentInfoProvider","useDocumentInfo","useFormQueryParams","useLocale","useTranslation","Gutter","IDLabel","RenderTitle","baseClass","DocumentDrawerContent","id","existingDocID","Header","collectionSlug","drawerSlug","onSave","onSaveFromProps","useModal","config","routes","api","apiRoute","serverURL","closeModal","modalState","toggleModal","locale","t","docID","setDocID","isOpen","setIsOpen","collectionConfig","formQueryParams","formattedQueryParams","stringify","componentMap","Edit","isEditing","Boolean","apiURL","code","action","onLoadError","data","error","errors","message","args","doc","BeforeDocument","className","div","h2","element","button","aria-label","onClick","type","DocumentTitle","slug","disableActions","disableLeaveWithoutSaving","docPermissions","hasSavePermission","title","toString"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ListControls/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ListControls/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAIlE,OAAO,KAAsC,MAAM,OAAO,CAAA;AAQ1D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sCAAsC,CAAA;AAgBpE,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,iBAAiB,GAAG;IAC9B,gBAAgB,EAAE,sBAAsB,CAAA;IACxC,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,QAAQ,EAAE,QAAQ,CAAA;IAClB,kBAAkB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7C,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACzC,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;CAC3C,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA4IpD,CAAA"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import * as facelessUIImport from '@faceless-ui/window-info';
|
|
3
3
|
import { getTranslation } from '@payloadcms/translations';
|
|
4
|
-
import React, { useState } from 'react';
|
|
4
|
+
import React, { useEffect, useRef, useState } from 'react';
|
|
5
5
|
import AnimateHeightImport from 'react-animate-height';
|
|
6
6
|
const AnimateHeight = AnimateHeightImport.default || AnimateHeightImport;
|
|
7
7
|
import { useUseTitleField } from '@payloadcms/ui/hooks/useUseAsTitle';
|
|
@@ -32,8 +32,20 @@ const baseClass = 'list-controls';
|
|
|
32
32
|
const titleField = useUseTitleField(collectionConfig, fieldMap);
|
|
33
33
|
const { i18n, t } = useTranslation();
|
|
34
34
|
const { breakpoints: { s: smallBreak } } = useWindowInfo();
|
|
35
|
+
const hasWhereParam = useRef(Boolean(searchParams?.where));
|
|
35
36
|
const shouldInitializeWhereOpened = validateWhereQuery(searchParams?.where);
|
|
36
37
|
const [visibleDrawer, setVisibleDrawer] = useState(shouldInitializeWhereOpened ? 'where' : undefined);
|
|
38
|
+
useEffect(()=>{
|
|
39
|
+
if (hasWhereParam.current && !searchParams?.where) {
|
|
40
|
+
setVisibleDrawer(undefined);
|
|
41
|
+
hasWhereParam.current = false;
|
|
42
|
+
} else if (searchParams?.where) {
|
|
43
|
+
hasWhereParam.current = true;
|
|
44
|
+
}
|
|
45
|
+
}, [
|
|
46
|
+
setVisibleDrawer,
|
|
47
|
+
searchParams?.where
|
|
48
|
+
]);
|
|
37
49
|
return /*#__PURE__*/ React.createElement("div", {
|
|
38
50
|
className: baseClass
|
|
39
51
|
}, /*#__PURE__*/ React.createElement("div", {
|
|
@@ -89,7 +101,8 @@ const baseClass = 'list-controls';
|
|
|
89
101
|
id: `${baseClass}-where`
|
|
90
102
|
}, /*#__PURE__*/ React.createElement(WhereBuilder, {
|
|
91
103
|
collectionPluralLabel: collectionConfig?.labels?.plural,
|
|
92
|
-
collectionSlug: collectionConfig.slug
|
|
104
|
+
collectionSlug: collectionConfig.slug,
|
|
105
|
+
key: String(hasWhereParam.current && !searchParams?.where)
|
|
93
106
|
})), enableSort && /*#__PURE__*/ React.createElement(AnimateHeight, {
|
|
94
107
|
className: `${baseClass}__sort`,
|
|
95
108
|
height: visibleDrawer === 'sort' ? 'auto' : 0,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/elements/ListControls/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientCollectionConfig, FieldAffectingData, Where } from 'payload/types'\n\nimport * as facelessUIImport from '@faceless-ui/window-info'\nimport { getTranslation } from '@payloadcms/translations'\nimport React, { useState } from 'react'\nimport AnimateHeightImport from 'react-animate-height'\n\nconst AnimateHeight = (AnimateHeightImport.default ||\n AnimateHeightImport) as typeof AnimateHeightImport.default\n\nimport { useUseTitleField } from '@payloadcms/ui/hooks/useUseAsTitle'\n\nimport type { FieldMap } from '../../utilities/buildComponentMap.js'\n\nimport { Chevron } from '../../icons/Chevron/index.js'\nimport { useListQuery } from '../../providers/ListQuery/index.js'\nimport { useSearchParams } from '../../providers/SearchParams/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { ColumnSelector } from '../ColumnSelector/index.js'\nimport { DeleteMany } from '../DeleteMany/index.js'\nimport { EditMany } from '../EditMany/index.js'\nimport { Pill } from '../Pill/index.js'\nimport { PublishMany } from '../PublishMany/index.js'\nimport { SearchFilter } from '../SearchFilter/index.js'\nimport { UnpublishMany } from '../UnpublishMany/index.js'\nimport { WhereBuilder } from '../WhereBuilder/index.js'\nimport validateWhereQuery from '../WhereBuilder/validateWhereQuery.js'\nimport { getTextFieldsToBeSearched } from './getTextFieldsToBeSearched.js'\nimport './index.scss'\n\nconst baseClass = 'list-controls'\n\nexport type ListControlsProps = {\n collectionConfig: ClientCollectionConfig\n enableColumns?: boolean\n enableSort?: boolean\n fieldMap: FieldMap\n handleSearchChange?: (search: string) => void\n handleSortChange?: (sort: string) => void\n handleWhereChange?: (where: Where) => void\n}\n\n/**\n * The ListControls component is used to render the controls (search, filter, where)\n * for a collection's list view. You can find those directly above the table which lists\n * the collection's documents.\n */\nexport const ListControls: React.FC<ListControlsProps> = (props) => {\n const { collectionConfig, enableColumns = true, enableSort = false, fieldMap } = props\n\n const { useWindowInfo } = facelessUIImport\n\n const { handleSearchChange } = useListQuery()\n const { searchParams } = useSearchParams()\n const titleField = useUseTitleField(collectionConfig, fieldMap)\n const { i18n, t } = useTranslation()\n const {\n breakpoints: { s: smallBreak },\n } = useWindowInfo()\n\n const shouldInitializeWhereOpened = validateWhereQuery(searchParams?.where)\n const [visibleDrawer, setVisibleDrawer] = useState<'columns' | 'sort' | 'where'>(\n shouldInitializeWhereOpened ? 'where' : undefined,\n )\n\n return (\n <div className={baseClass}>\n <div className={`${baseClass}__wrap`}>\n <SearchFilter\n fieldLabel={\n (titleField &&\n getTranslation(\n 'label' in titleField.fieldComponentProps &&\n typeof titleField.fieldComponentProps.label === 'string'\n ? titleField.fieldComponentProps.label\n : titleField.name,\n i18n,\n )) ??\n undefined\n }\n fieldName={titleField?.name}\n handleChange={handleSearchChange}\n listSearchableFields={getTextFieldsToBeSearched(\n collectionConfig.admin.listSearchableFields,\n fieldMap,\n )}\n />\n <div className={`${baseClass}__buttons`}>\n <div className={`${baseClass}__buttons-wrap`}>\n {!smallBreak && (\n <React.Fragment>\n <EditMany collection={collectionConfig} fieldMap={fieldMap} />\n <PublishMany collection={collectionConfig} />\n <UnpublishMany collection={collectionConfig} />\n <DeleteMany collection={collectionConfig} />\n </React.Fragment>\n )}\n {enableColumns && (\n <Pill\n aria-controls={`${baseClass}-columns`}\n aria-expanded={visibleDrawer === 'columns'}\n className={`${baseClass}__toggle-columns ${\n visibleDrawer === 'columns' ? `${baseClass}__buttons-active` : ''\n }`}\n icon={<Chevron />}\n onClick={() =>\n setVisibleDrawer(visibleDrawer !== 'columns' ? 'columns' : undefined)\n }\n pillStyle=\"light\"\n >\n {t('general:columns')}\n </Pill>\n )}\n <Pill\n aria-controls={`${baseClass}-where`}\n aria-expanded={visibleDrawer === 'where'}\n className={`${baseClass}__toggle-where ${\n visibleDrawer === 'where' ? `${baseClass}__buttons-active` : ''\n }`}\n icon={<Chevron />}\n onClick={() => setVisibleDrawer(visibleDrawer !== 'where' ? 'where' : undefined)}\n pillStyle=\"light\"\n >\n {t('general:filters')}\n </Pill>\n {enableSort && (\n <Pill\n aria-controls={`${baseClass}-sort`}\n aria-expanded={visibleDrawer === 'sort'}\n className={`${baseClass}__toggle-sort`}\n icon={<Chevron />}\n onClick={() => setVisibleDrawer(visibleDrawer !== 'sort' ? 'sort' : undefined)}\n pillStyle=\"light\"\n >\n {t('general:sort')}\n </Pill>\n )}\n </div>\n </div>\n </div>\n {enableColumns && (\n <AnimateHeight\n className={`${baseClass}__columns`}\n height={visibleDrawer === 'columns' ? 'auto' : 0}\n id={`${baseClass}-columns`}\n >\n <ColumnSelector collectionSlug={collectionConfig.slug} />\n </AnimateHeight>\n )}\n <AnimateHeight\n className={`${baseClass}__where`}\n height={visibleDrawer === 'where' ? 'auto' : 0}\n id={`${baseClass}-where`}\n >\n <WhereBuilder\n collectionPluralLabel={collectionConfig?.labels?.plural}\n collectionSlug={collectionConfig.slug}\n />\n </AnimateHeight>\n {enableSort && (\n <AnimateHeight\n className={`${baseClass}__sort`}\n height={visibleDrawer === 'sort' ? 'auto' : 0}\n id={`${baseClass}-sort`}\n >\n <p>Sort Complex</p>\n {/* <SortComplex\n collection={collection}\n handleChange={handleSortChange}\n modifySearchQuery={modifySearchQuery}\n /> */}\n </AnimateHeight>\n )}\n </div>\n )\n}\n"],"names":["facelessUIImport","getTranslation","React","useState","AnimateHeightImport","AnimateHeight","default","useUseTitleField","Chevron","useListQuery","useSearchParams","useTranslation","ColumnSelector","DeleteMany","EditMany","Pill","PublishMany","SearchFilter","UnpublishMany","WhereBuilder","validateWhereQuery","getTextFieldsToBeSearched","baseClass","ListControls","props","collectionConfig","enableColumns","enableSort","fieldMap","useWindowInfo","handleSearchChange","searchParams","titleField","i18n","t","breakpoints","s","smallBreak","shouldInitializeWhereOpened","where","visibleDrawer","setVisibleDrawer","undefined","div","className","fieldLabel","fieldComponentProps","label","name","fieldName","handleChange","listSearchableFields","admin","Fragment","collection","aria-controls","aria-expanded","icon","onClick","pillStyle","height","id","collectionSlug","slug","collectionPluralLabel","labels","plural","p"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../../src/elements/ListControls/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientCollectionConfig, Where } from 'payload/types'\n\nimport * as facelessUIImport from '@faceless-ui/window-info'\nimport { getTranslation } from '@payloadcms/translations'\nimport React, { useEffect, useRef, useState } from 'react'\nimport AnimateHeightImport from 'react-animate-height'\n\nconst AnimateHeight = (AnimateHeightImport.default ||\n AnimateHeightImport) as typeof AnimateHeightImport.default\n\nimport { useUseTitleField } from '@payloadcms/ui/hooks/useUseAsTitle'\n\nimport type { FieldMap } from '../../utilities/buildComponentMap.js'\n\nimport { Chevron } from '../../icons/Chevron/index.js'\nimport { useListQuery } from '../../providers/ListQuery/index.js'\nimport { useSearchParams } from '../../providers/SearchParams/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { ColumnSelector } from '../ColumnSelector/index.js'\nimport { DeleteMany } from '../DeleteMany/index.js'\nimport { EditMany } from '../EditMany/index.js'\nimport { Pill } from '../Pill/index.js'\nimport { PublishMany } from '../PublishMany/index.js'\nimport { SearchFilter } from '../SearchFilter/index.js'\nimport { UnpublishMany } from '../UnpublishMany/index.js'\nimport { WhereBuilder } from '../WhereBuilder/index.js'\nimport validateWhereQuery from '../WhereBuilder/validateWhereQuery.js'\nimport { getTextFieldsToBeSearched } from './getTextFieldsToBeSearched.js'\nimport './index.scss'\n\nconst baseClass = 'list-controls'\n\nexport type ListControlsProps = {\n collectionConfig: ClientCollectionConfig\n enableColumns?: boolean\n enableSort?: boolean\n fieldMap: FieldMap\n handleSearchChange?: (search: string) => void\n handleSortChange?: (sort: string) => void\n handleWhereChange?: (where: Where) => void\n}\n\n/**\n * The ListControls component is used to render the controls (search, filter, where)\n * for a collection's list view. You can find those directly above the table which lists\n * the collection's documents.\n */\nexport const ListControls: React.FC<ListControlsProps> = (props) => {\n const { collectionConfig, enableColumns = true, enableSort = false, fieldMap } = props\n\n const { useWindowInfo } = facelessUIImport\n\n const { handleSearchChange } = useListQuery()\n const { searchParams } = useSearchParams()\n const titleField = useUseTitleField(collectionConfig, fieldMap)\n const { i18n, t } = useTranslation()\n const {\n breakpoints: { s: smallBreak },\n } = useWindowInfo()\n\n const hasWhereParam = useRef(Boolean(searchParams?.where))\n\n const shouldInitializeWhereOpened = validateWhereQuery(searchParams?.where)\n const [visibleDrawer, setVisibleDrawer] = useState<'columns' | 'sort' | 'where'>(\n shouldInitializeWhereOpened ? 'where' : undefined,\n )\n\n useEffect(() => {\n if (hasWhereParam.current && !searchParams?.where) {\n setVisibleDrawer(undefined)\n hasWhereParam.current = false\n } else if (searchParams?.where) {\n hasWhereParam.current = true\n }\n }, [setVisibleDrawer, searchParams?.where])\n\n return (\n <div className={baseClass}>\n <div className={`${baseClass}__wrap`}>\n <SearchFilter\n fieldLabel={\n (titleField &&\n getTranslation(\n 'label' in titleField.fieldComponentProps &&\n typeof titleField.fieldComponentProps.label === 'string'\n ? titleField.fieldComponentProps.label\n : titleField.name,\n i18n,\n )) ??\n undefined\n }\n fieldName={titleField?.name}\n handleChange={handleSearchChange}\n listSearchableFields={getTextFieldsToBeSearched(\n collectionConfig.admin.listSearchableFields,\n fieldMap,\n )}\n />\n <div className={`${baseClass}__buttons`}>\n <div className={`${baseClass}__buttons-wrap`}>\n {!smallBreak && (\n <React.Fragment>\n <EditMany collection={collectionConfig} fieldMap={fieldMap} />\n <PublishMany collection={collectionConfig} />\n <UnpublishMany collection={collectionConfig} />\n <DeleteMany collection={collectionConfig} />\n </React.Fragment>\n )}\n {enableColumns && (\n <Pill\n aria-controls={`${baseClass}-columns`}\n aria-expanded={visibleDrawer === 'columns'}\n className={`${baseClass}__toggle-columns ${\n visibleDrawer === 'columns' ? `${baseClass}__buttons-active` : ''\n }`}\n icon={<Chevron />}\n onClick={() =>\n setVisibleDrawer(visibleDrawer !== 'columns' ? 'columns' : undefined)\n }\n pillStyle=\"light\"\n >\n {t('general:columns')}\n </Pill>\n )}\n <Pill\n aria-controls={`${baseClass}-where`}\n aria-expanded={visibleDrawer === 'where'}\n className={`${baseClass}__toggle-where ${\n visibleDrawer === 'where' ? `${baseClass}__buttons-active` : ''\n }`}\n icon={<Chevron />}\n onClick={() => setVisibleDrawer(visibleDrawer !== 'where' ? 'where' : undefined)}\n pillStyle=\"light\"\n >\n {t('general:filters')}\n </Pill>\n {enableSort && (\n <Pill\n aria-controls={`${baseClass}-sort`}\n aria-expanded={visibleDrawer === 'sort'}\n className={`${baseClass}__toggle-sort`}\n icon={<Chevron />}\n onClick={() => setVisibleDrawer(visibleDrawer !== 'sort' ? 'sort' : undefined)}\n pillStyle=\"light\"\n >\n {t('general:sort')}\n </Pill>\n )}\n </div>\n </div>\n </div>\n {enableColumns && (\n <AnimateHeight\n className={`${baseClass}__columns`}\n height={visibleDrawer === 'columns' ? 'auto' : 0}\n id={`${baseClass}-columns`}\n >\n <ColumnSelector collectionSlug={collectionConfig.slug} />\n </AnimateHeight>\n )}\n <AnimateHeight\n className={`${baseClass}__where`}\n height={visibleDrawer === 'where' ? 'auto' : 0}\n id={`${baseClass}-where`}\n >\n <WhereBuilder\n collectionPluralLabel={collectionConfig?.labels?.plural}\n collectionSlug={collectionConfig.slug}\n key={String(hasWhereParam.current && !searchParams?.where)}\n />\n </AnimateHeight>\n {enableSort && (\n <AnimateHeight\n className={`${baseClass}__sort`}\n height={visibleDrawer === 'sort' ? 'auto' : 0}\n id={`${baseClass}-sort`}\n >\n <p>Sort Complex</p>\n {/* <SortComplex\n collection={collection}\n handleChange={handleSortChange}\n modifySearchQuery={modifySearchQuery}\n /> */}\n </AnimateHeight>\n )}\n </div>\n )\n}\n"],"names":["facelessUIImport","getTranslation","React","useEffect","useRef","useState","AnimateHeightImport","AnimateHeight","default","useUseTitleField","Chevron","useListQuery","useSearchParams","useTranslation","ColumnSelector","DeleteMany","EditMany","Pill","PublishMany","SearchFilter","UnpublishMany","WhereBuilder","validateWhereQuery","getTextFieldsToBeSearched","baseClass","ListControls","props","collectionConfig","enableColumns","enableSort","fieldMap","useWindowInfo","handleSearchChange","searchParams","titleField","i18n","t","breakpoints","s","smallBreak","hasWhereParam","Boolean","where","shouldInitializeWhereOpened","visibleDrawer","setVisibleDrawer","undefined","current","div","className","fieldLabel","fieldComponentProps","label","name","fieldName","handleChange","listSearchableFields","admin","Fragment","collection","aria-controls","aria-expanded","icon","onClick","pillStyle","height","id","collectionSlug","slug","collectionPluralLabel","labels","plural","key","String","p"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Save/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiB,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Save/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiB,MAAM,OAAO,CAAA;AASrC,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAiC1D,CAAA;AAED,KAAK,KAAK,GAAG;IACX,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAClC,CAAA;AAED,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAIhC,CAAA"}
|
|
@@ -1,16 +1,20 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import React, { useRef } from 'react';
|
|
3
|
-
import { useForm } from '../../forms/Form/context.js';
|
|
3
|
+
import { useForm, useFormModified } from '../../forms/Form/context.js';
|
|
4
4
|
import { FormSubmit } from '../../forms/Submit/index.js';
|
|
5
5
|
import { useHotkey } from '../../hooks/useHotkey.js';
|
|
6
6
|
import { useEditDepth } from '../../providers/EditDepth/index.js';
|
|
7
|
+
import { useOperation } from '../../providers/Operation/index.js';
|
|
7
8
|
import { useTranslation } from '../../providers/Translation/index.js';
|
|
8
9
|
export const DefaultSaveButton = ({ label: labelProp })=>{
|
|
9
10
|
const { t } = useTranslation();
|
|
10
11
|
const { submit } = useForm();
|
|
12
|
+
const modified = useFormModified();
|
|
11
13
|
const label = labelProp || t('general:save');
|
|
12
14
|
const ref = useRef(null);
|
|
13
15
|
const editDepth = useEditDepth();
|
|
16
|
+
const operation = useOperation();
|
|
17
|
+
const forceDisable = operation === 'update' && !modified;
|
|
14
18
|
useHotkey({
|
|
15
19
|
cmdCtrlKey: true,
|
|
16
20
|
editDepth,
|
|
@@ -18,6 +22,7 @@ export const DefaultSaveButton = ({ label: labelProp })=>{
|
|
|
18
22
|
's'
|
|
19
23
|
]
|
|
20
24
|
}, (e)=>{
|
|
25
|
+
if (forceDisable) return;
|
|
21
26
|
e.preventDefault();
|
|
22
27
|
e.stopPropagation();
|
|
23
28
|
if (ref?.current) {
|
|
@@ -26,6 +31,7 @@ export const DefaultSaveButton = ({ label: labelProp })=>{
|
|
|
26
31
|
});
|
|
27
32
|
return /*#__PURE__*/ React.createElement(FormSubmit, {
|
|
28
33
|
buttonId: "action-save",
|
|
34
|
+
disabled: forceDisable,
|
|
29
35
|
onClick: ()=>submit(),
|
|
30
36
|
ref: ref,
|
|
31
37
|
size: "small",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/elements/Save/index.tsx"],"sourcesContent":["'use client'\n\nimport React, { useRef } from 'react'\n\nimport { useForm } from '../../forms/Form/context.js'\nimport { FormSubmit } from '../../forms/Submit/index.js'\nimport { useHotkey } from '../../hooks/useHotkey.js'\nimport { useEditDepth } from '../../providers/EditDepth/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\n\nexport const DefaultSaveButton: React.FC<{ label?: string }> = ({ label: labelProp }) => {\n const { t } = useTranslation()\n const { submit } = useForm()\n const label = labelProp || t('general:save')\n const ref = useRef<HTMLButtonElement>(null)\n const editDepth = useEditDepth()\n\n useHotkey({ cmdCtrlKey: true, editDepth, keyCodes: ['s'] }, (e) => {\n e.preventDefault()\n e.stopPropagation()\n if (ref?.current) {\n ref.current.click()\n }\n })\n\n return (\n <FormSubmit\n buttonId=\"action-save\"\n onClick={() => submit()}\n ref={ref}\n size=\"small\"\n type=\"button\"\n >\n {label}\n </FormSubmit>\n )\n}\n\ntype Props = {\n CustomComponent?: React.ReactNode\n}\n\nexport const Save: React.FC<Props> = ({ CustomComponent }) => {\n if (CustomComponent) return CustomComponent\n\n return <DefaultSaveButton />\n}\n"],"names":["React","useRef","useForm","FormSubmit","useHotkey","useEditDepth","useTranslation","DefaultSaveButton","label","labelProp","t","submit","ref","editDepth","cmdCtrlKey","keyCodes","e","preventDefault","stopPropagation","current","click","buttonId","onClick","size","type","Save","CustomComponent"],"rangeMappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/elements/Save/index.tsx"],"sourcesContent":["'use client'\n\nimport React, { useRef } from 'react'\n\nimport { useForm, useFormModified } from '../../forms/Form/context.js'\nimport { FormSubmit } from '../../forms/Submit/index.js'\nimport { useHotkey } from '../../hooks/useHotkey.js'\nimport { useEditDepth } from '../../providers/EditDepth/index.js'\nimport { useOperation } from '../../providers/Operation/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\n\nexport const DefaultSaveButton: React.FC<{ label?: string }> = ({ label: labelProp }) => {\n const { t } = useTranslation()\n const { submit } = useForm()\n const modified = useFormModified()\n const label = labelProp || t('general:save')\n const ref = useRef<HTMLButtonElement>(null)\n const editDepth = useEditDepth()\n const operation = useOperation()\n\n const forceDisable = operation === 'update' && !modified\n\n useHotkey({ cmdCtrlKey: true, editDepth, keyCodes: ['s'] }, (e) => {\n if (forceDisable) return\n\n e.preventDefault()\n e.stopPropagation()\n if (ref?.current) {\n ref.current.click()\n }\n })\n\n return (\n <FormSubmit\n buttonId=\"action-save\"\n disabled={forceDisable}\n onClick={() => submit()}\n ref={ref}\n size=\"small\"\n type=\"button\"\n >\n {label}\n </FormSubmit>\n )\n}\n\ntype Props = {\n CustomComponent?: React.ReactNode\n}\n\nexport const Save: React.FC<Props> = ({ CustomComponent }) => {\n if (CustomComponent) return CustomComponent\n\n return <DefaultSaveButton />\n}\n"],"names":["React","useRef","useForm","useFormModified","FormSubmit","useHotkey","useEditDepth","useOperation","useTranslation","DefaultSaveButton","label","labelProp","t","submit","modified","ref","editDepth","operation","forceDisable","cmdCtrlKey","keyCodes","e","preventDefault","stopPropagation","current","click","buttonId","disabled","onClick","size","type","Save","CustomComponent"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AAEA,OAAOA,SAASC,MAAM,QAAQ,QAAO;AAErC,SAASC,OAAO,EAAEC,eAAe,QAAQ,8BAA6B;AACtE,SAASC,UAAU,QAAQ,8BAA6B;AACxD,SAASC,SAAS,QAAQ,2BAA0B;AACpD,SAASC,YAAY,QAAQ,qCAAoC;AACjE,SAASC,YAAY,QAAQ,qCAAoC;AACjE,SAASC,cAAc,QAAQ,uCAAsC;AAErE,OAAO,MAAMC,oBAAkD,CAAC,EAAEC,OAAOC,SAAS,EAAE;IAClF,MAAM,EAAEC,CAAC,EAAE,GAAGJ;IACd,MAAM,EAAEK,MAAM,EAAE,GAAGX;IACnB,MAAMY,WAAWX;IACjB,MAAMO,QAAQC,aAAaC,EAAE;IAC7B,MAAMG,MAAMd,OAA0B;IACtC,MAAMe,YAAYV;IAClB,MAAMW,YAAYV;IAElB,MAAMW,eAAeD,cAAc,YAAY,CAACH;IAEhDT,UAAU;QAAEc,YAAY;QAAMH;QAAWI,UAAU;YAAC;SAAI;IAAC,GAAG,CAACC;QAC3D,IAAIH,cAAc;QAElBG,EAAEC,cAAc;QAChBD,EAAEE,eAAe;QACjB,IAAIR,KAAKS,SAAS;YAChBT,IAAIS,OAAO,CAACC,KAAK;QACnB;IACF;IAEA,qBACE,oBAACrB;QACCsB,UAAS;QACTC,UAAUT;QACVU,SAAS,IAAMf;QACfE,KAAKA;QACLc,MAAK;QACLC,MAAK;OAEJpB;AAGP,EAAC;AAMD,OAAO,MAAMqB,OAAwB,CAAC,EAAEC,eAAe,EAAE;IACvD,IAAIA,iBAAiB,OAAOA;IAE5B,qBAAO,oBAACvB;AACV,EAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/SaveDraft/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/SaveDraft/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAA;AAkFlD,KAAK,KAAK,GAAG;IACX,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAClC,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAIrC,CAAA"}
|
|
@@ -7,6 +7,7 @@ import { useConfig } from '../../providers/Config/index.js';
|
|
|
7
7
|
import { useDocumentInfo } from '../../providers/DocumentInfo/index.js';
|
|
8
8
|
import { useEditDepth } from '../../providers/EditDepth/index.js';
|
|
9
9
|
import { useLocale } from '../../providers/Locale/index.js';
|
|
10
|
+
import { useOperation } from '../../providers/Operation/index.js';
|
|
10
11
|
import { useTranslation } from '../../providers/Translation/index.js';
|
|
11
12
|
const baseClass = 'save-draft';
|
|
12
13
|
const DefaultSaveDraftButton = ()=>{
|
|
@@ -18,7 +19,10 @@ const DefaultSaveDraftButton = ()=>{
|
|
|
18
19
|
const editDepth = useEditDepth();
|
|
19
20
|
const { t } = useTranslation();
|
|
20
21
|
const { submit } = useForm();
|
|
22
|
+
const operation = useOperation();
|
|
23
|
+
const forceDisable = operation === 'update' && !modified;
|
|
21
24
|
const saveDraft = useCallback(async ()=>{
|
|
25
|
+
if (forceDisable) return;
|
|
22
26
|
const search = `?locale=${locale}&depth=0&fallback-locale=null&draft=true`;
|
|
23
27
|
let action;
|
|
24
28
|
let method = 'POST';
|
|
@@ -44,7 +48,8 @@ const DefaultSaveDraftButton = ()=>{
|
|
|
44
48
|
serverURL,
|
|
45
49
|
api,
|
|
46
50
|
locale,
|
|
47
|
-
id
|
|
51
|
+
id,
|
|
52
|
+
forceDisable
|
|
48
53
|
]);
|
|
49
54
|
useHotkey({
|
|
50
55
|
cmdCtrlKey: true,
|
|
@@ -53,9 +58,7 @@ const DefaultSaveDraftButton = ()=>{
|
|
|
53
58
|
's'
|
|
54
59
|
]
|
|
55
60
|
}, (e)=>{
|
|
56
|
-
if (
|
|
57
|
-
return;
|
|
58
|
-
}
|
|
61
|
+
if (forceDisable) return;
|
|
59
62
|
e.preventDefault();
|
|
60
63
|
e.stopPropagation();
|
|
61
64
|
if (ref?.current) {
|
|
@@ -66,7 +69,7 @@ const DefaultSaveDraftButton = ()=>{
|
|
|
66
69
|
buttonId: "action-save-draft",
|
|
67
70
|
buttonStyle: "secondary",
|
|
68
71
|
className: baseClass,
|
|
69
|
-
disabled:
|
|
72
|
+
disabled: forceDisable,
|
|
70
73
|
onClick: saveDraft,
|
|
71
74
|
ref: ref,
|
|
72
75
|
size: "small",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/elements/SaveDraft/index.tsx"],"sourcesContent":["'use client'\n\nimport React, { useCallback, useRef } from 'react'\n\nimport { useForm, useFormModified } from '../../forms/Form/context.js'\nimport { FormSubmit } from '../../forms/Submit/index.js'\nimport { useHotkey } from '../../hooks/useHotkey.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { useEditDepth } from '../../providers/EditDepth/index.js'\nimport { useLocale } from '../../providers/Locale/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\n\nconst baseClass = 'save-draft'\n\nconst DefaultSaveDraftButton: React.FC = () => {\n const {\n routes: { api },\n serverURL,\n } = useConfig()\n const { id, collectionSlug, globalSlug } = useDocumentInfo()\n const modified = useFormModified()\n const { code: locale } = useLocale()\n const ref = useRef<HTMLButtonElement>(null)\n const editDepth = useEditDepth()\n const { t } = useTranslation()\n const { submit } = useForm()\n\n const saveDraft = useCallback(async () => {\n const search = `?locale=${locale}&depth=0&fallback-locale=null&draft=true`\n let action\n let method = 'POST'\n\n if (collectionSlug) {\n action = `${serverURL}${api}/${collectionSlug}${id ? `/${id}` : ''}${search}`\n if (id) method = 'PATCH'\n }\n\n if (globalSlug) {\n action = `${serverURL}${api}/globals/${globalSlug}${search}`\n }\n\n await submit({\n action,\n method,\n overrides: {\n _status: 'draft',\n },\n skipValidation: true,\n })\n }, [submit, collectionSlug, globalSlug, serverURL, api, locale, id])\n\n useHotkey({ cmdCtrlKey: true, editDepth, keyCodes: ['s'] }, (e) => {\n if (
|
|
1
|
+
{"version":3,"sources":["../../../src/elements/SaveDraft/index.tsx"],"sourcesContent":["'use client'\n\nimport React, { useCallback, useRef } from 'react'\n\nimport { useForm, useFormModified } from '../../forms/Form/context.js'\nimport { FormSubmit } from '../../forms/Submit/index.js'\nimport { useHotkey } from '../../hooks/useHotkey.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { useEditDepth } from '../../providers/EditDepth/index.js'\nimport { useLocale } from '../../providers/Locale/index.js'\nimport { useOperation } from '../../providers/Operation/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\n\nconst baseClass = 'save-draft'\n\nconst DefaultSaveDraftButton: React.FC = () => {\n const {\n routes: { api },\n serverURL,\n } = useConfig()\n const { id, collectionSlug, globalSlug } = useDocumentInfo()\n const modified = useFormModified()\n const { code: locale } = useLocale()\n const ref = useRef<HTMLButtonElement>(null)\n const editDepth = useEditDepth()\n const { t } = useTranslation()\n const { submit } = useForm()\n const operation = useOperation()\n\n const forceDisable = operation === 'update' && !modified\n\n const saveDraft = useCallback(async () => {\n if (forceDisable) return\n\n const search = `?locale=${locale}&depth=0&fallback-locale=null&draft=true`\n let action\n let method = 'POST'\n\n if (collectionSlug) {\n action = `${serverURL}${api}/${collectionSlug}${id ? `/${id}` : ''}${search}`\n if (id) method = 'PATCH'\n }\n\n if (globalSlug) {\n action = `${serverURL}${api}/globals/${globalSlug}${search}`\n }\n\n await submit({\n action,\n method,\n overrides: {\n _status: 'draft',\n },\n skipValidation: true,\n })\n }, [submit, collectionSlug, globalSlug, serverURL, api, locale, id, forceDisable])\n\n useHotkey({ cmdCtrlKey: true, editDepth, keyCodes: ['s'] }, (e) => {\n if (forceDisable) return\n\n e.preventDefault()\n e.stopPropagation()\n if (ref?.current) {\n ref.current.click()\n }\n })\n\n return (\n <FormSubmit\n buttonId=\"action-save-draft\"\n buttonStyle=\"secondary\"\n className={baseClass}\n disabled={forceDisable}\n onClick={saveDraft}\n ref={ref}\n size=\"small\"\n type=\"button\"\n >\n {t('version:saveDraft')}\n </FormSubmit>\n )\n}\n\ntype Props = {\n CustomComponent?: React.ReactNode\n}\n\nexport const SaveDraft: React.FC<Props> = ({ CustomComponent }) => {\n if (CustomComponent) return CustomComponent\n\n return <DefaultSaveDraftButton />\n}\n"],"names":["React","useCallback","useRef","useForm","useFormModified","FormSubmit","useHotkey","useConfig","useDocumentInfo","useEditDepth","useLocale","useOperation","useTranslation","baseClass","DefaultSaveDraftButton","routes","api","serverURL","id","collectionSlug","globalSlug","modified","code","locale","ref","editDepth","t","submit","operation","forceDisable","saveDraft","search","action","method","overrides","_status","skipValidation","cmdCtrlKey","keyCodes","e","preventDefault","stopPropagation","current","click","buttonId","buttonStyle","className","disabled","onClick","size","type","SaveDraft","CustomComponent"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AAEA,OAAOA,SAASC,WAAW,EAAEC,MAAM,QAAQ,QAAO;AAElD,SAASC,OAAO,EAAEC,eAAe,QAAQ,8BAA6B;AACtE,SAASC,UAAU,QAAQ,8BAA6B;AACxD,SAASC,SAAS,QAAQ,2BAA0B;AACpD,SAASC,SAAS,QAAQ,kCAAiC;AAC3D,SAASC,eAAe,QAAQ,wCAAuC;AACvE,SAASC,YAAY,QAAQ,qCAAoC;AACjE,SAASC,SAAS,QAAQ,kCAAiC;AAC3D,SAASC,YAAY,QAAQ,qCAAoC;AACjE,SAASC,cAAc,QAAQ,uCAAsC;AAErE,MAAMC,YAAY;AAElB,MAAMC,yBAAmC;IACvC,MAAM,EACJC,QAAQ,EAAEC,GAAG,EAAE,EACfC,SAAS,EACV,GAAGV;IACJ,MAAM,EAAEW,EAAE,EAAEC,cAAc,EAAEC,UAAU,EAAE,GAAGZ;IAC3C,MAAMa,WAAWjB;IACjB,MAAM,EAAEkB,MAAMC,MAAM,EAAE,GAAGb;IACzB,MAAMc,MAAMtB,OAA0B;IACtC,MAAMuB,YAAYhB;IAClB,MAAM,EAAEiB,CAAC,EAAE,GAAGd;IACd,MAAM,EAAEe,MAAM,EAAE,GAAGxB;IACnB,MAAMyB,YAAYjB;IAElB,MAAMkB,eAAeD,cAAc,YAAY,CAACP;IAEhD,MAAMS,YAAY7B,YAAY;QAC5B,IAAI4B,cAAc;QAElB,MAAME,SAAS,CAAC,QAAQ,EAAER,OAAO,wCAAwC,CAAC;QAC1E,IAAIS;QACJ,IAAIC,SAAS;QAEb,IAAId,gBAAgB;YAClBa,SAAS,CAAC,EAAEf,UAAU,EAAED,IAAI,CAAC,EAAEG,eAAe,EAAED,KAAK,CAAC,CAAC,EAAEA,GAAG,CAAC,GAAG,GAAG,EAAEa,OAAO,CAAC;YAC7E,IAAIb,IAAIe,SAAS;QACnB;QAEA,IAAIb,YAAY;YACdY,SAAS,CAAC,EAAEf,UAAU,EAAED,IAAI,SAAS,EAAEI,WAAW,EAAEW,OAAO,CAAC;QAC9D;QAEA,MAAMJ,OAAO;YACXK;YACAC;YACAC,WAAW;gBACTC,SAAS;YACX;YACAC,gBAAgB;QAClB;IACF,GAAG;QAACT;QAAQR;QAAgBC;QAAYH;QAAWD;QAAKO;QAAQL;QAAIW;KAAa;IAEjFvB,UAAU;QAAE+B,YAAY;QAAMZ;QAAWa,UAAU;YAAC;SAAI;IAAC,GAAG,CAACC;QAC3D,IAAIV,cAAc;QAElBU,EAAEC,cAAc;QAChBD,EAAEE,eAAe;QACjB,IAAIjB,KAAKkB,SAAS;YAChBlB,IAAIkB,OAAO,CAACC,KAAK;QACnB;IACF;IAEA,qBACE,oBAACtC;QACCuC,UAAS;QACTC,aAAY;QACZC,WAAWjC;QACXkC,UAAUlB;QACVmB,SAASlB;QACTN,KAAKA;QACLyB,MAAK;QACLC,MAAK;OAEJxB,EAAE;AAGT;AAMA,OAAO,MAAMyB,YAA6B,CAAC,EAAEC,eAAe,EAAE;IAC5D,IAAIA,iBAAiB,OAAOA;IAE5B,qBAAO,oBAACtC;AACV,EAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/elements/Table/DefaultCell/fields/Checkbox/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,eAAe,CAAA;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/elements/Table/DefaultCell/fields/Checkbox/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,eAAe,CAAA;AAG9D,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,cAAc,CAAA;AAErB,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAAC,OAAO,CAAC,CAOrE,CAAA"}
|
|
@@ -1,7 +1,11 @@
|
|
|
1
1
|
'use client';
|
|
2
|
+
import { useTranslation } from '@payloadcms/ui/providers/Translation';
|
|
2
3
|
import React from 'react';
|
|
3
|
-
export const CheckboxCell = ({ cellData })
|
|
4
|
+
export const CheckboxCell = ({ cellData })=>{
|
|
5
|
+
const { t } = useTranslation();
|
|
6
|
+
return /*#__PURE__*/ React.createElement("code", {
|
|
4
7
|
className: "bool-cell"
|
|
5
|
-
}, /*#__PURE__*/ React.createElement("span", null,
|
|
8
|
+
}, /*#__PURE__*/ React.createElement("span", null, t(`general:${cellData}`).toLowerCase()));
|
|
9
|
+
};
|
|
6
10
|
|
|
7
11
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../../src/elements/Table/DefaultCell/fields/Checkbox/index.tsx"],"sourcesContent":["'use client'\nimport type { DefaultCellComponentProps } from 'payload/types'\n\nimport React from 'react'\n\nimport './index.scss'\n\nexport const CheckboxCell: React.FC<DefaultCellComponentProps<boolean>> = ({ cellData }) => (\n <code className=\"bool-cell\">\n
|
|
1
|
+
{"version":3,"sources":["../../../../../../src/elements/Table/DefaultCell/fields/Checkbox/index.tsx"],"sourcesContent":["'use client'\nimport type { DefaultCellComponentProps } from 'payload/types'\n\nimport { useTranslation } from '@payloadcms/ui/providers/Translation'\nimport React from 'react'\n\nimport './index.scss'\n\nexport const CheckboxCell: React.FC<DefaultCellComponentProps<boolean>> = ({ cellData }) => {\n const { t } = useTranslation()\n return (\n <code className=\"bool-cell\">\n <span>{t(`general:${cellData}`).toLowerCase()}</span>\n </code>\n )\n}\n"],"names":["useTranslation","React","CheckboxCell","cellData","t","code","className","span","toLowerCase"],"rangeMappings":";;;;;;;;","mappings":"AAAA;AAGA,SAASA,cAAc,QAAQ,uCAAsC;AACrE,OAAOC,WAAW,QAAO;AAIzB,OAAO,MAAMC,eAA6D,CAAC,EAAEC,QAAQ,EAAE;IACrF,MAAM,EAAEC,CAAC,EAAE,GAAGJ;IACd,qBACE,oBAACK;QAAKC,WAAU;qBACd,oBAACC,cAAMH,EAAE,CAAC,QAAQ,EAAED,SAAS,CAAC,EAAEK,WAAW;AAGjD,EAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Table/DefaultCell/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,kBAAkB,EAA6B,MAAM,eAAe,CAAA;AAYlF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Table/DefaultCell/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,kBAAkB,EAA6B,MAAM,eAAe,CAAA;AAYlF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAqHpD,CAAA"}
|
|
@@ -45,7 +45,7 @@ export const DefaultCell = (props)=>{
|
|
|
45
45
|
rowData: rowData
|
|
46
46
|
}));
|
|
47
47
|
}
|
|
48
|
-
const DefaultCellComponent = cellComponents[fieldType];
|
|
48
|
+
const DefaultCellComponent = typeof cellData !== 'undefined' && cellComponents[fieldType];
|
|
49
49
|
let CellComponent = cellData && (CellComponentOverride ? /*#__PURE__*/ React.createElement(TableCellProvider, {
|
|
50
50
|
richTextComponentMap: richTextComponentMap
|
|
51
51
|
}, CellComponentOverride) : null);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/elements/Table/DefaultCell/index.tsx"],"sourcesContent":["'use client'\nimport LinkImport from 'next/link.js'\nimport React from 'react' // TODO: abstract this out to support all routers\n\nimport type { CellComponentProps, DefaultCellComponentProps } from 'payload/types'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { TableCellProvider, useTableCell } from '@payloadcms/ui/elements/Table'\nimport { useConfig } from '@payloadcms/ui/providers/Config'\nimport { useTranslation } from '@payloadcms/ui/providers/Translation'\n\nimport { CodeCell } from './fields/Code/index.js'\nimport { cellComponents } from './fields/index.js'\n\nconst Link = (LinkImport.default || LinkImport) as unknown as typeof LinkImport.default\n\nexport const DefaultCell: React.FC<CellComponentProps> = (props) => {\n const {\n name,\n CellComponentOverride,\n className: classNameFromProps,\n fieldType,\n isFieldAffectingData,\n label,\n onClick: onClickFromProps,\n richTextComponentMap,\n } = props\n\n const { i18n } = useTranslation()\n\n const {\n routes: { admin: adminRoute },\n } = useConfig()\n\n const cellContext = useTableCell()\n\n const { cellData, cellProps, columnIndex, customCellContext, rowData } = cellContext || {}\n\n const { className: classNameFromContext, link, onClick: onClickFromContext } = cellProps || {}\n\n const className = classNameFromProps || classNameFromContext\n\n const onClick = onClickFromProps || onClickFromContext\n\n let WrapElement: React.ComponentType<any> | string = 'span'\n\n const wrapElementProps: {\n className?: string\n href?: string\n onClick?: () => void\n type?: 'button'\n } = {\n className,\n }\n\n const isLink = link !== undefined ? link : columnIndex === 0\n\n if (isLink) {\n WrapElement = Link\n wrapElementProps.href = customCellContext?.collectionSlug\n ? `${adminRoute}/collections/${customCellContext?.collectionSlug}/${rowData.id}`\n : ''\n }\n\n if (typeof onClick === 'function') {\n WrapElement = 'button'\n wrapElementProps.type = 'button'\n wrapElementProps.onClick = () => {\n onClick({\n cellData,\n collectionSlug: customCellContext?.collectionSlug,\n rowData,\n })\n }\n }\n\n if (name === 'id') {\n return (\n <WrapElement {...wrapElementProps}>\n <CodeCell cellData={`ID: ${cellData}`} name={name} nowrap rowData={rowData} />\n </WrapElement>\n )\n }\n\n const DefaultCellComponent: React.FC<DefaultCellComponentProps>
|
|
1
|
+
{"version":3,"sources":["../../../../src/elements/Table/DefaultCell/index.tsx"],"sourcesContent":["'use client'\nimport LinkImport from 'next/link.js'\nimport React from 'react' // TODO: abstract this out to support all routers\n\nimport type { CellComponentProps, DefaultCellComponentProps } from 'payload/types'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { TableCellProvider, useTableCell } from '@payloadcms/ui/elements/Table'\nimport { useConfig } from '@payloadcms/ui/providers/Config'\nimport { useTranslation } from '@payloadcms/ui/providers/Translation'\n\nimport { CodeCell } from './fields/Code/index.js'\nimport { cellComponents } from './fields/index.js'\n\nconst Link = (LinkImport.default || LinkImport) as unknown as typeof LinkImport.default\n\nexport const DefaultCell: React.FC<CellComponentProps> = (props) => {\n const {\n name,\n CellComponentOverride,\n className: classNameFromProps,\n fieldType,\n isFieldAffectingData,\n label,\n onClick: onClickFromProps,\n richTextComponentMap,\n } = props\n\n const { i18n } = useTranslation()\n\n const {\n routes: { admin: adminRoute },\n } = useConfig()\n\n const cellContext = useTableCell()\n\n const { cellData, cellProps, columnIndex, customCellContext, rowData } = cellContext || {}\n\n const { className: classNameFromContext, link, onClick: onClickFromContext } = cellProps || {}\n\n const className = classNameFromProps || classNameFromContext\n\n const onClick = onClickFromProps || onClickFromContext\n\n let WrapElement: React.ComponentType<any> | string = 'span'\n\n const wrapElementProps: {\n className?: string\n href?: string\n onClick?: () => void\n type?: 'button'\n } = {\n className,\n }\n\n const isLink = link !== undefined ? link : columnIndex === 0\n\n if (isLink) {\n WrapElement = Link\n wrapElementProps.href = customCellContext?.collectionSlug\n ? `${adminRoute}/collections/${customCellContext?.collectionSlug}/${rowData.id}`\n : ''\n }\n\n if (typeof onClick === 'function') {\n WrapElement = 'button'\n wrapElementProps.type = 'button'\n wrapElementProps.onClick = () => {\n onClick({\n cellData,\n collectionSlug: customCellContext?.collectionSlug,\n rowData,\n })\n }\n }\n\n if (name === 'id') {\n return (\n <WrapElement {...wrapElementProps}>\n <CodeCell cellData={`ID: ${cellData}`} name={name} nowrap rowData={rowData} />\n </WrapElement>\n )\n }\n\n const DefaultCellComponent: React.FC<DefaultCellComponentProps> =\n typeof cellData !== 'undefined' && cellComponents[fieldType]\n\n let CellComponent: React.ReactNode =\n cellData &&\n (CellComponentOverride ? ( // CellComponentOverride is used for richText\n <TableCellProvider richTextComponentMap={richTextComponentMap}>\n {CellComponentOverride}\n </TableCellProvider>\n ) : null)\n\n if (!CellComponent && DefaultCellComponent) {\n CellComponent = (\n <DefaultCellComponent\n cellData={cellData}\n customCellContext={customCellContext}\n rowData={rowData}\n {...props}\n />\n )\n } else if (!CellComponent && !DefaultCellComponent) {\n // DefaultCellComponent does not exist for certain field types like `text`\n if (customCellContext.uploadConfig && isFieldAffectingData && name === 'filename') {\n const FileCellComponent = cellComponents.File\n CellComponent = (\n <FileCellComponent\n cellData={cellData}\n customCellContext={customCellContext}\n rowData={rowData}\n {...props}\n />\n )\n } else {\n return (\n <WrapElement {...wrapElementProps}>\n {(cellData === '' || typeof cellData === 'undefined') &&\n 'label' in props &&\n i18n.t('general:noLabel', {\n label: getTranslation(label || 'data', i18n),\n })}\n {typeof cellData === 'string' && cellData}\n {typeof cellData === 'number' && cellData}\n {typeof cellData === 'object' && JSON.stringify(cellData)}\n </WrapElement>\n )\n }\n }\n\n return <WrapElement {...wrapElementProps}>{CellComponent}</WrapElement>\n}\n"],"names":["LinkImport","React","getTranslation","TableCellProvider","useTableCell","useConfig","useTranslation","CodeCell","cellComponents","Link","default","DefaultCell","props","name","CellComponentOverride","className","classNameFromProps","fieldType","isFieldAffectingData","label","onClick","onClickFromProps","richTextComponentMap","i18n","routes","admin","adminRoute","cellContext","cellData","cellProps","columnIndex","customCellContext","rowData","classNameFromContext","link","onClickFromContext","WrapElement","wrapElementProps","isLink","undefined","href","collectionSlug","id","type","nowrap","DefaultCellComponent","CellComponent","uploadConfig","FileCellComponent","File","t","JSON","stringify"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,OAAOA,gBAAgB,eAAc;AACrC,OAAOC,WAAW,QAAO,CAAC,iDAAiD;AAI3E,SAASC,cAAc,QAAQ,2BAA0B;AACzD,SAASC,iBAAiB,EAAEC,YAAY,QAAQ,gCAA+B;AAC/E,SAASC,SAAS,QAAQ,kCAAiC;AAC3D,SAASC,cAAc,QAAQ,uCAAsC;AAErE,SAASC,QAAQ,QAAQ,yBAAwB;AACjD,SAASC,cAAc,QAAQ,oBAAmB;AAElD,MAAMC,OAAQT,WAAWU,OAAO,IAAIV;AAEpC,OAAO,MAAMW,cAA4C,CAACC;IACxD,MAAM,EACJC,IAAI,EACJC,qBAAqB,EACrBC,WAAWC,kBAAkB,EAC7BC,SAAS,EACTC,oBAAoB,EACpBC,KAAK,EACLC,SAASC,gBAAgB,EACzBC,oBAAoB,EACrB,GAAGV;IAEJ,MAAM,EAAEW,IAAI,EAAE,GAAGjB;IAEjB,MAAM,EACJkB,QAAQ,EAAEC,OAAOC,UAAU,EAAE,EAC9B,GAAGrB;IAEJ,MAAMsB,cAAcvB;IAEpB,MAAM,EAAEwB,QAAQ,EAAEC,SAAS,EAAEC,WAAW,EAAEC,iBAAiB,EAAEC,OAAO,EAAE,GAAGL,eAAe,CAAC;IAEzF,MAAM,EAAEZ,WAAWkB,oBAAoB,EAAEC,IAAI,EAAEd,SAASe,kBAAkB,EAAE,GAAGN,aAAa,CAAC;IAE7F,MAAMd,YAAYC,sBAAsBiB;IAExC,MAAMb,UAAUC,oBAAoBc;IAEpC,IAAIC,cAAiD;IAErD,MAAMC,mBAKF;QACFtB;IACF;IAEA,MAAMuB,SAASJ,SAASK,YAAYL,OAAOJ,gBAAgB;IAE3D,IAAIQ,QAAQ;QACVF,cAAc3B;QACd4B,iBAAiBG,IAAI,GAAGT,mBAAmBU,iBACvC,CAAC,EAAEf,WAAW,aAAa,EAAEK,mBAAmBU,eAAe,CAAC,EAAET,QAAQU,EAAE,CAAC,CAAC,GAC9E;IACN;IAEA,IAAI,OAAOtB,YAAY,YAAY;QACjCgB,cAAc;QACdC,iBAAiBM,IAAI,GAAG;QACxBN,iBAAiBjB,OAAO,GAAG;YACzBA,QAAQ;gBACNQ;gBACAa,gBAAgBV,mBAAmBU;gBACnCT;YACF;QACF;IACF;IAEA,IAAInB,SAAS,MAAM;QACjB,qBACE,oBAACuB,aAAgBC,gCACf,oBAAC9B;YAASqB,UAAU,CAAC,IAAI,EAAEA,SAAS,CAAC;YAAEf,MAAMA;YAAM+B,QAAAA;YAAOZ,SAASA;;IAGzE;IAEA,MAAMa,uBACJ,OAAOjB,aAAa,eAAepB,cAAc,CAACS,UAAU;IAE9D,IAAI6B,gBACFlB,YACCd,CAAAA,sCACC,oBAACX;QAAkBmB,sBAAsBA;OACtCR,yBAED,IAAG;IAET,IAAI,CAACgC,iBAAiBD,sBAAsB;QAC1CC,8BACE,oBAACD;YACCjB,UAAUA;YACVG,mBAAmBA;YACnBC,SAASA;YACR,GAAGpB,KAAK;;IAGf,OAAO,IAAI,CAACkC,iBAAiB,CAACD,sBAAsB;QAClD,0EAA0E;QAC1E,IAAId,kBAAkBgB,YAAY,IAAI7B,wBAAwBL,SAAS,YAAY;YACjF,MAAMmC,oBAAoBxC,eAAeyC,IAAI;YAC7CH,8BACE,oBAACE;gBACCpB,UAAUA;gBACVG,mBAAmBA;gBACnBC,SAASA;gBACR,GAAGpB,KAAK;;QAGf,OAAO;YACL,qBACE,oBAACwB,aAAgBC,kBACd,AAACT,CAAAA,aAAa,MAAM,OAAOA,aAAa,WAAU,KACjD,WAAWhB,SACXW,KAAK2B,CAAC,CAAC,mBAAmB;gBACxB/B,OAAOjB,eAAeiB,SAAS,QAAQI;YACzC,IACD,OAAOK,aAAa,YAAYA,UAChC,OAAOA,aAAa,YAAYA,UAChC,OAAOA,aAAa,YAAYuB,KAAKC,SAAS,CAACxB;QAGtD;IACF;IAEA,qBAAO,oBAACQ,aAAgBC,kBAAmBS;AAC7C,EAAC"}
|
|
@@ -8,7 +8,7 @@ import { useTranslation } from '../../providers/Translation/index.js';
|
|
|
8
8
|
import { fieldBaseClass } from '../shared/index.js';
|
|
9
9
|
export const ConfirmPassword = (props)=>{
|
|
10
10
|
const { disabled } = props;
|
|
11
|
-
const password = useFormFields(([fields])=>fields
|
|
11
|
+
const password = useFormFields(([fields])=>fields?.password);
|
|
12
12
|
const { t } = useTranslation();
|
|
13
13
|
const validate = useCallback((value)=>{
|
|
14
14
|
if (!value) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/fields/ConfirmPassword/index.tsx"],"sourcesContent":["'use client'\nimport type { FormField } from 'payload/types'\n\nimport React, { useCallback } from 'react'\n\nimport { FieldError } from '../../forms/FieldError/index.js'\nimport { FieldLabel } from '../../forms/FieldLabel/index.js'\nimport { useFormFields } from '../../forms/Form/context.js'\nimport { useField } from '../../forms/useField/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { fieldBaseClass } from '../shared/index.js'\nimport './index.scss'\n\nexport type ConfirmPasswordFieldProps = {\n disabled?: boolean\n}\n\nexport const ConfirmPassword: React.FC<ConfirmPasswordFieldProps> = (props) => {\n const { disabled } = props\n\n const password = useFormFields<FormField>(([fields]) => fields
|
|
1
|
+
{"version":3,"sources":["../../../src/fields/ConfirmPassword/index.tsx"],"sourcesContent":["'use client'\nimport type { FormField } from 'payload/types'\n\nimport React, { useCallback } from 'react'\n\nimport { FieldError } from '../../forms/FieldError/index.js'\nimport { FieldLabel } from '../../forms/FieldLabel/index.js'\nimport { useFormFields } from '../../forms/Form/context.js'\nimport { useField } from '../../forms/useField/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { fieldBaseClass } from '../shared/index.js'\nimport './index.scss'\n\nexport type ConfirmPasswordFieldProps = {\n disabled?: boolean\n}\n\nexport const ConfirmPassword: React.FC<ConfirmPasswordFieldProps> = (props) => {\n const { disabled } = props\n\n const password = useFormFields<FormField>(([fields]) => fields?.password)\n const { t } = useTranslation()\n\n const validate = useCallback(\n (value: string) => {\n if (!value) {\n return t('validation:required')\n }\n\n if (value === password?.value) {\n return true\n }\n\n return t('fields:passwordsDoNotMatch')\n },\n [password, t],\n )\n\n const path = 'confirm-password'\n\n const { setValue, showError, value } = useField({\n disableFormData: true,\n path,\n validate,\n })\n\n return (\n <div\n className={[fieldBaseClass, 'confirm-password', showError && 'error']\n .filter(Boolean)\n .join(' ')}\n >\n <FieldError path={path} />\n <FieldLabel\n htmlFor=\"field-confirm-password\"\n label={t('authentication:confirmPassword')}\n required\n />\n <input\n autoComplete=\"off\"\n disabled={!!disabled}\n id=\"field-confirm-password\"\n name=\"confirm-password\"\n onChange={setValue}\n type=\"password\"\n value={(value as string) || ''}\n />\n </div>\n )\n}\n"],"names":["React","useCallback","FieldError","FieldLabel","useFormFields","useField","useTranslation","fieldBaseClass","ConfirmPassword","props","disabled","password","fields","t","validate","value","path","setValue","showError","disableFormData","div","className","filter","Boolean","join","htmlFor","label","required","input","autoComplete","id","name","onChange","type"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AAGA,OAAOA,SAASC,WAAW,QAAQ,QAAO;AAE1C,SAASC,UAAU,QAAQ,kCAAiC;AAC5D,SAASC,UAAU,QAAQ,kCAAiC;AAC5D,SAASC,aAAa,QAAQ,8BAA6B;AAC3D,SAASC,QAAQ,QAAQ,gCAA+B;AACxD,SAASC,cAAc,QAAQ,uCAAsC;AACrE,SAASC,cAAc,QAAQ,qBAAoB;AAOnD,OAAO,MAAMC,kBAAuD,CAACC;IACnE,MAAM,EAAEC,QAAQ,EAAE,GAAGD;IAErB,MAAME,WAAWP,cAAyB,CAAC,CAACQ,OAAO,GAAKA,QAAQD;IAChE,MAAM,EAAEE,CAAC,EAAE,GAAGP;IAEd,MAAMQ,WAAWb,YACf,CAACc;QACC,IAAI,CAACA,OAAO;YACV,OAAOF,EAAE;QACX;QAEA,IAAIE,UAAUJ,UAAUI,OAAO;YAC7B,OAAO;QACT;QAEA,OAAOF,EAAE;IACX,GACA;QAACF;QAAUE;KAAE;IAGf,MAAMG,OAAO;IAEb,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAEH,KAAK,EAAE,GAAGV,SAAS;QAC9Cc,iBAAiB;QACjBH;QACAF;IACF;IAEA,qBACE,oBAACM;QACCC,WAAW;YAACd;YAAgB;YAAoBW,aAAa;SAAQ,CAClEI,MAAM,CAACC,SACPC,IAAI,CAAC;qBAER,oBAACtB;QAAWc,MAAMA;sBAClB,oBAACb;QACCsB,SAAQ;QACRC,OAAOb,EAAE;QACTc,UAAAA;sBAEF,oBAACC;QACCC,cAAa;QACbnB,UAAU,CAAC,CAACA;QACZoB,IAAG;QACHC,MAAK;QACLC,UAAUf;QACVgB,MAAK;QACLlB,OAAO,AAACA,SAAoB;;AAIpC,EAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/forms/useField/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AAEpD,YAAY,EAAE,SAAS,EAAE,OAAO,EAAE,CAAA;AAiBlC;;;;GAIG;AACH,eAAO,MAAM,QAAQ,eAAiB,OAAO,KAAG,UAAU,CAAC,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/forms/useField/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AAEpD,YAAY,EAAE,SAAS,EAAE,OAAO,EAAE,CAAA;AAiBlC;;;;GAIG;AACH,eAAO,MAAM,QAAQ,eAAiB,OAAO,KAAG,UAAU,CAAC,CAkM1D,CAAA"}
|
|
@@ -36,6 +36,7 @@ import { useForm, useFormFields, useFormModified, useFormProcessing, useFormSubm
|
|
|
36
36
|
const valid = typeof field?.valid === 'boolean' ? field.valid : true;
|
|
37
37
|
const showError = valid === false && submitted;
|
|
38
38
|
const prevValid = useRef(valid);
|
|
39
|
+
const prevErrorMessage = useRef(field?.errorMessage);
|
|
39
40
|
// Method to return from `useField`, used to
|
|
40
41
|
// update field values from field component(s)
|
|
41
42
|
const setValue = useCallback((e, disableModifyingForm = false)=>{
|
|
@@ -140,8 +141,9 @@ import { useForm, useFormFields, useFormModified, useFormProcessing, useFormSubm
|
|
|
140
141
|
}
|
|
141
142
|
// Only dispatch if the validation result has changed
|
|
142
143
|
// This will prevent unnecessary rerenders
|
|
143
|
-
if (valid !== prevValid.current) {
|
|
144
|
+
if (valid !== prevValid.current || errorMessage !== prevErrorMessage.current) {
|
|
144
145
|
prevValid.current = valid;
|
|
146
|
+
prevErrorMessage.current = errorMessage;
|
|
145
147
|
const update = {
|
|
146
148
|
type: 'UPDATE',
|
|
147
149
|
errorMessage,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/forms/useField/index.tsx"],"sourcesContent":["'use client'\nimport { useCallback, useMemo, useRef } from 'react'\n\nimport type { UPDATE } from '../Form/types.js'\nimport type { FieldType, Options } from './types.js'\n\nexport type { FieldType, Options }\n\nimport useThrottledEffect from '../../hooks/useThrottledEffect.js'\nimport { useAuth } from '../../providers/Auth/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { useOperation } from '../../providers/Operation/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { useFieldProps } from '../FieldPropsProvider/index.js'\nimport {\n useForm,\n useFormFields,\n useFormModified,\n useFormProcessing,\n useFormSubmitted,\n} from '../Form/context.js'\n\n/**\n * Get and set the value of a form field.\n *\n * @see https://payloadcms.com/docs/admin/hooks#usefield\n */\nexport const useField = <T,>(options: Options): FieldType<T> => {\n const { disableFormData = false, hasRows, validate } = options\n\n const { path: pathFromContext, permissions, readOnly, schemaPath } = useFieldProps()\n\n // Prioritize passed in path over context path. If the context path should be prioritized (which is the case for top-level useField calls in fields), it should be passed in as the options path.\n const path = options.path || pathFromContext\n\n const submitted = useFormSubmitted()\n const processing = useFormProcessing()\n const { user } = useAuth()\n const { id } = useDocumentInfo()\n const operation = useOperation()\n\n const { dispatchField, field } = useFormFields(([fields, dispatch]) => ({\n dispatchField: dispatch,\n field: (fields && fields?.[path]) || null,\n }))\n\n const { t } = useTranslation()\n const config = useConfig()\n\n const { getData, getDataByPath, getSiblingData, setModified } = useForm()\n const modified = useFormModified()\n\n const filterOptions = field?.filterOptions\n const value = field?.value as T\n const initialValue = field?.initialValue as T\n const valid = typeof field?.valid === 'boolean' ? field.valid : true\n const showError = valid === false && submitted\n\n const prevValid = useRef(valid)\n\n // Method to return from `useField`, used to\n // update field values from field component(s)\n const setValue = useCallback(\n (e, disableModifyingForm = false) => {\n const val = e && e.target ? e.target.value : e\n\n dispatchField({\n type: 'UPDATE',\n disableFormData: disableFormData || (hasRows && val > 0),\n path,\n value: val,\n })\n\n if (!disableModifyingForm) {\n if (typeof setModified === 'function') {\n // Only update setModified to true if the form is not already set to modified. Otherwise the following could happen:\n // 1. Text field: someone types in it in an unmodified form\n // 2. After setTimeout triggers setModified(true): form is set to modified. Save Button becomes available. Good!\n // 3. Type something in text field\n // 4. Click on save button before setTimeout in useField has finished (so setModified(true) has not been run yet)\n // 5. Form is saved, setModified(false) is set in the Form/index.tsx `submit` function, \"saved successfully\" toast appears\n // 6. setModified(true) inside the timeout is run, form is set to modified again, even though it was already saved and thus set to unmodified. Bad! This should have happened before the form is saved. Now the form should be unmodified and stay that way\n // until a NEW change happens. Due to this, the \"Leave without saving\" modal appears even though it should not when leaving the page fast immediately after saving the document.\n // This is only an issue for forms which have already been set to modified true, as that causes the save button to be enabled. If we prevent this setTimeout to be run\n // for already-modified forms first place (which is unnecessary), we can avoid this issue. As for unmodified forms, this race issue will not happen, because you cannot click the save button faster\n // than the timeout in useField is run. That's because the save button won't even be enabled for clicking until the setTimeout in useField has run.\n // This fixes e2e test flakes, as e2e tests were often so fast that they were saving the form before the timeout in useField has run.\n // Specifically, this fixes the 'should not warn about unsaved changes when navigating to lexical editor with blocks node and then leaving the page after making a change and saving' lexical e2e test.\n if (modified === false) {\n // Update modified state after field value comes back\n // to avoid cursor jump caused by state value / DOM mismatch\n setTimeout(() => {\n setModified(true)\n }, 10)\n }\n }\n }\n },\n [setModified, path, dispatchField, disableFormData, hasRows, modified],\n )\n\n // Store result from hook as ref\n // to prevent unnecessary rerenders\n const result: FieldType<T> = useMemo(\n () => ({\n errorMessage: field?.errorMessage,\n errorPaths: field?.errorPaths || [],\n filterOptions,\n formProcessing: processing,\n formSubmitted: submitted,\n initialValue,\n path,\n permissions,\n readOnly: readOnly || false,\n rows: field?.rows,\n schemaPath,\n setValue,\n showError,\n valid: field?.valid,\n value,\n }),\n [\n field?.errorMessage,\n field?.rows,\n field?.valid,\n field?.errorPaths,\n processing,\n setValue,\n showError,\n submitted,\n value,\n initialValue,\n path,\n schemaPath,\n readOnly,\n permissions,\n filterOptions,\n ],\n )\n\n // Throttle the validate function\n useThrottledEffect(\n () => {\n const validateField = async () => {\n let valueToValidate = value\n\n if (field?.rows && Array.isArray(field.rows)) {\n valueToValidate = getDataByPath(path)\n }\n\n let errorMessage: string | undefined\n let valid: boolean | string = prevValid.current\n\n const isValid =\n typeof validate === 'function'\n ? await validate(valueToValidate, {\n id,\n config,\n data: getData(),\n operation,\n siblingData: getSiblingData(path),\n t,\n user,\n })\n : true\n\n if (typeof isValid === 'string') {\n valid = false\n errorMessage = isValid\n } else if (typeof isValid === 'boolean') {\n valid = isValid\n errorMessage = undefined\n }\n\n // Only dispatch if the validation result has changed\n // This will prevent unnecessary rerenders\n if (valid !== prevValid.current) {\n prevValid.current = valid\n\n const update: UPDATE = {\n type: 'UPDATE',\n errorMessage,\n path,\n rows: field?.rows,\n valid,\n // validate,\n value,\n }\n\n if (disableFormData || (hasRows ? typeof value === 'number' && value > 0 : false)) {\n update.disableFormData = true\n }\n\n if (typeof dispatchField === 'function') {\n dispatchField(update)\n }\n }\n }\n\n void validateField()\n },\n 150,\n [\n value,\n disableFormData,\n dispatchField,\n getData,\n getSiblingData,\n getDataByPath,\n id,\n operation,\n path,\n user,\n validate,\n field?.rows,\n ],\n )\n\n return result\n}\n"],"names":["useCallback","useMemo","useRef","useThrottledEffect","useAuth","useConfig","useDocumentInfo","useOperation","useTranslation","useFieldProps","useForm","useFormFields","useFormModified","useFormProcessing","useFormSubmitted","useField","options","disableFormData","hasRows","validate","path","pathFromContext","permissions","readOnly","schemaPath","submitted","processing","user","id","operation","dispatchField","field","fields","dispatch","t","config","getData","getDataByPath","getSiblingData","setModified","modified","filterOptions","value","initialValue","valid","showError","prevValid","setValue","e","disableModifyingForm","val","target","type","setTimeout","result","errorMessage","errorPaths","formProcessing","formSubmitted","rows","validateField","valueToValidate","Array","isArray","current","isValid","data","siblingData","undefined","update"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../../src/forms/useField/index.tsx"],"sourcesContent":["'use client'\nimport { useCallback, useMemo, useRef } from 'react'\n\nimport type { UPDATE } from '../Form/types.js'\nimport type { FieldType, Options } from './types.js'\n\nexport type { FieldType, Options }\n\nimport useThrottledEffect from '../../hooks/useThrottledEffect.js'\nimport { useAuth } from '../../providers/Auth/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { useOperation } from '../../providers/Operation/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { useFieldProps } from '../FieldPropsProvider/index.js'\nimport {\n useForm,\n useFormFields,\n useFormModified,\n useFormProcessing,\n useFormSubmitted,\n} from '../Form/context.js'\n\n/**\n * Get and set the value of a form field.\n *\n * @see https://payloadcms.com/docs/admin/hooks#usefield\n */\nexport const useField = <T,>(options: Options): FieldType<T> => {\n const { disableFormData = false, hasRows, validate } = options\n\n const { path: pathFromContext, permissions, readOnly, schemaPath } = useFieldProps()\n\n // Prioritize passed in path over context path. If the context path should be prioritized (which is the case for top-level useField calls in fields), it should be passed in as the options path.\n const path = options.path || pathFromContext\n\n const submitted = useFormSubmitted()\n const processing = useFormProcessing()\n const { user } = useAuth()\n const { id } = useDocumentInfo()\n const operation = useOperation()\n\n const { dispatchField, field } = useFormFields(([fields, dispatch]) => ({\n dispatchField: dispatch,\n field: (fields && fields?.[path]) || null,\n }))\n\n const { t } = useTranslation()\n const config = useConfig()\n\n const { getData, getDataByPath, getSiblingData, setModified } = useForm()\n const modified = useFormModified()\n\n const filterOptions = field?.filterOptions\n const value = field?.value as T\n const initialValue = field?.initialValue as T\n const valid = typeof field?.valid === 'boolean' ? field.valid : true\n const showError = valid === false && submitted\n\n const prevValid = useRef(valid)\n const prevErrorMessage = useRef(field?.errorMessage)\n\n // Method to return from `useField`, used to\n // update field values from field component(s)\n const setValue = useCallback(\n (e, disableModifyingForm = false) => {\n const val = e && e.target ? e.target.value : e\n\n dispatchField({\n type: 'UPDATE',\n disableFormData: disableFormData || (hasRows && val > 0),\n path,\n value: val,\n })\n\n if (!disableModifyingForm) {\n if (typeof setModified === 'function') {\n // Only update setModified to true if the form is not already set to modified. Otherwise the following could happen:\n // 1. Text field: someone types in it in an unmodified form\n // 2. After setTimeout triggers setModified(true): form is set to modified. Save Button becomes available. Good!\n // 3. Type something in text field\n // 4. Click on save button before setTimeout in useField has finished (so setModified(true) has not been run yet)\n // 5. Form is saved, setModified(false) is set in the Form/index.tsx `submit` function, \"saved successfully\" toast appears\n // 6. setModified(true) inside the timeout is run, form is set to modified again, even though it was already saved and thus set to unmodified. Bad! This should have happened before the form is saved. Now the form should be unmodified and stay that way\n // until a NEW change happens. Due to this, the \"Leave without saving\" modal appears even though it should not when leaving the page fast immediately after saving the document.\n // This is only an issue for forms which have already been set to modified true, as that causes the save button to be enabled. If we prevent this setTimeout to be run\n // for already-modified forms first place (which is unnecessary), we can avoid this issue. As for unmodified forms, this race issue will not happen, because you cannot click the save button faster\n // than the timeout in useField is run. That's because the save button won't even be enabled for clicking until the setTimeout in useField has run.\n // This fixes e2e test flakes, as e2e tests were often so fast that they were saving the form before the timeout in useField has run.\n // Specifically, this fixes the 'should not warn about unsaved changes when navigating to lexical editor with blocks node and then leaving the page after making a change and saving' lexical e2e test.\n if (modified === false) {\n // Update modified state after field value comes back\n // to avoid cursor jump caused by state value / DOM mismatch\n setTimeout(() => {\n setModified(true)\n }, 10)\n }\n }\n }\n },\n [setModified, path, dispatchField, disableFormData, hasRows, modified],\n )\n\n // Store result from hook as ref\n // to prevent unnecessary rerenders\n const result: FieldType<T> = useMemo(\n () => ({\n errorMessage: field?.errorMessage,\n errorPaths: field?.errorPaths || [],\n filterOptions,\n formProcessing: processing,\n formSubmitted: submitted,\n initialValue,\n path,\n permissions,\n readOnly: readOnly || false,\n rows: field?.rows,\n schemaPath,\n setValue,\n showError,\n valid: field?.valid,\n value,\n }),\n [\n field?.errorMessage,\n field?.rows,\n field?.valid,\n field?.errorPaths,\n processing,\n setValue,\n showError,\n submitted,\n value,\n initialValue,\n path,\n schemaPath,\n readOnly,\n permissions,\n filterOptions,\n ],\n )\n\n // Throttle the validate function\n useThrottledEffect(\n () => {\n const validateField = async () => {\n let valueToValidate = value\n\n if (field?.rows && Array.isArray(field.rows)) {\n valueToValidate = getDataByPath(path)\n }\n\n let errorMessage: string | undefined\n let valid: boolean | string = prevValid.current\n\n const isValid =\n typeof validate === 'function'\n ? await validate(valueToValidate, {\n id,\n config,\n data: getData(),\n operation,\n siblingData: getSiblingData(path),\n t,\n user,\n })\n : true\n\n if (typeof isValid === 'string') {\n valid = false\n errorMessage = isValid\n } else if (typeof isValid === 'boolean') {\n valid = isValid\n errorMessage = undefined\n }\n\n // Only dispatch if the validation result has changed\n // This will prevent unnecessary rerenders\n if (valid !== prevValid.current || errorMessage !== prevErrorMessage.current) {\n prevValid.current = valid\n prevErrorMessage.current = errorMessage\n\n const update: UPDATE = {\n type: 'UPDATE',\n errorMessage,\n path,\n rows: field?.rows,\n valid,\n // validate,\n value,\n }\n\n if (disableFormData || (hasRows ? typeof value === 'number' && value > 0 : false)) {\n update.disableFormData = true\n }\n\n if (typeof dispatchField === 'function') {\n dispatchField(update)\n }\n }\n }\n\n void validateField()\n },\n 150,\n [\n value,\n disableFormData,\n dispatchField,\n getData,\n getSiblingData,\n getDataByPath,\n id,\n operation,\n path,\n user,\n validate,\n field?.rows,\n ],\n )\n\n return result\n}\n"],"names":["useCallback","useMemo","useRef","useThrottledEffect","useAuth","useConfig","useDocumentInfo","useOperation","useTranslation","useFieldProps","useForm","useFormFields","useFormModified","useFormProcessing","useFormSubmitted","useField","options","disableFormData","hasRows","validate","path","pathFromContext","permissions","readOnly","schemaPath","submitted","processing","user","id","operation","dispatchField","field","fields","dispatch","t","config","getData","getDataByPath","getSiblingData","setModified","modified","filterOptions","value","initialValue","valid","showError","prevValid","prevErrorMessage","errorMessage","setValue","e","disableModifyingForm","val","target","type","setTimeout","result","errorPaths","formProcessing","formSubmitted","rows","validateField","valueToValidate","Array","isArray","current","isValid","data","siblingData","undefined","update"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@payloadcms/ui",
|
|
3
|
-
"version": "3.0.0-beta.
|
|
3
|
+
"version": "3.0.0-beta.24",
|
|
4
4
|
"homepage": "https://payloadcms.com",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -113,7 +113,7 @@
|
|
|
113
113
|
"react-toastify": "10.0.4",
|
|
114
114
|
"use-context-selector": "1.4.1",
|
|
115
115
|
"uuid": "9.0.1",
|
|
116
|
-
"@payloadcms/translations": "3.0.0-beta.
|
|
116
|
+
"@payloadcms/translations": "3.0.0-beta.24"
|
|
117
117
|
},
|
|
118
118
|
"devDependencies": {
|
|
119
119
|
"@types/body-scroll-lock": "^3.1.0",
|
|
@@ -133,14 +133,14 @@
|
|
|
133
133
|
"terser-webpack-plugin": "^5.3.10",
|
|
134
134
|
"webpack": "^5.78.0",
|
|
135
135
|
"webpack-cli": "^5.1.4",
|
|
136
|
-
"
|
|
137
|
-
"
|
|
136
|
+
"@payloadcms/eslint-config": "1.1.1",
|
|
137
|
+
"payload": "3.0.0-beta.24"
|
|
138
138
|
},
|
|
139
139
|
"peerDependencies": {
|
|
140
140
|
"next": "^14.3.0-canary.7",
|
|
141
141
|
"react": "^18.0.0",
|
|
142
142
|
"react-dom": "^18.0.0",
|
|
143
|
-
"payload": "3.0.0-beta.
|
|
143
|
+
"payload": "3.0.0-beta.24"
|
|
144
144
|
},
|
|
145
145
|
"engines": {
|
|
146
146
|
"node": ">=18.20.2"
|