UNPKG

@wordpress/core-data

Version:
173 lines (169 loc) 5.12 kB
"use strict"; var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); Object.defineProperty(exports, "__esModule", { value: true }); exports.__experimentalUseEntityRecord = __experimentalUseEntityRecord; exports.default = useEntityRecord; var _data = require("@wordpress/data"); var _deprecated = _interopRequireDefault(require("@wordpress/deprecated")); var _element = require("@wordpress/element"); var _useQuerySelect = _interopRequireDefault(require("./use-query-select")); var _ = require("../"); /** * WordPress dependencies */ /** * Internal dependencies */ const EMPTY_OBJECT = {}; /** * Resolves the specified entity record. * * @since 6.1.0 Introduced in WordPress core. * * @param kind Kind of the entity, e.g. `root` or a `postType`. See rootEntitiesConfig in ../entities.ts for a list of available kinds. * @param name Name of the entity, e.g. `plugin` or a `post`. See rootEntitiesConfig in ../entities.ts for a list of available names. * @param recordId ID of the requested entity record. * @param options Optional hook options. * @example * ```js * import { useEntityRecord } from '@wordpress/core-data'; * * function PageTitleDisplay( { id } ) { * const { record, isResolving } = useEntityRecord( 'postType', 'page', id ); * * if ( isResolving ) { * return 'Loading...'; * } * * return record.title; * } * * // Rendered in the application: * // <PageTitleDisplay id={ 1 } /> * ``` * * In the above example, when `PageTitleDisplay` is rendered into an * application, the page and the resolution details will be retrieved from * the store state using `getEntityRecord()`, or resolved if missing. * * @example * ```js * import { useCallback } from 'react'; * import { useDispatch } from '@wordpress/data'; * import { __ } from '@wordpress/i18n'; * import { TextControl } from '@wordpress/components'; * import { store as noticeStore } from '@wordpress/notices'; * import { useEntityRecord } from '@wordpress/core-data'; * * function PageRenameForm( { id } ) { * const page = useEntityRecord( 'postType', 'page', id ); * const { createSuccessNotice, createErrorNotice } = * useDispatch( noticeStore ); * * const setTitle = useCallback( ( title ) => { * page.edit( { title } ); * }, [ page.edit ] ); * * if ( page.isResolving ) { * return 'Loading...'; * } * * async function onRename( event ) { * event.preventDefault(); * try { * await page.save(); * createSuccessNotice( __( 'Page renamed.' ), { * type: 'snackbar', * } ); * } catch ( error ) { * createErrorNotice( error.message, { type: 'snackbar' } ); * } * } * * return ( * <form onSubmit={ onRename }> * <TextControl * __nextHasNoMarginBottom * __next40pxDefaultSize * label={ __( 'Name' ) } * value={ page.editedRecord.title } * onChange={ setTitle } * /> * <button type="submit">{ __( 'Save' ) }</button> * </form> * ); * } * * // Rendered in the application: * // <PageRenameForm id={ 1 } /> * ``` * * In the above example, updating and saving the page title is handled * via the `edit()` and `save()` mutation helpers provided by * `useEntityRecord()`; * * @return Entity record data. * @template RecordType */ function useEntityRecord(kind, name, recordId, options = { enabled: true }) { const { editEntityRecord, saveEditedEntityRecord } = (0, _data.useDispatch)(_.store); const mutations = (0, _element.useMemo)(() => ({ edit: (record, editOptions = {}) => editEntityRecord(kind, name, recordId, record, editOptions), save: (saveOptions = {}) => saveEditedEntityRecord(kind, name, recordId, { throwOnError: true, ...saveOptions }) }), [editEntityRecord, kind, name, recordId, saveEditedEntityRecord]); const { editedRecord, hasEdits, edits } = (0, _data.useSelect)(select => { if (!options.enabled) { return { editedRecord: EMPTY_OBJECT, hasEdits: false, edits: EMPTY_OBJECT }; } return { editedRecord: select(_.store).getEditedEntityRecord(kind, name, recordId), hasEdits: select(_.store).hasEditsForEntityRecord(kind, name, recordId), edits: select(_.store).getEntityRecordNonTransientEdits(kind, name, recordId) }; }, [kind, name, recordId, options.enabled]); const { data: record, ...querySelectRest } = (0, _useQuerySelect.default)(query => { if (!options.enabled) { return { data: null }; } return query(_.store).getEntityRecord(kind, name, recordId); }, [kind, name, recordId, options.enabled]); return { record, editedRecord, hasEdits, edits, ...querySelectRest, ...mutations }; } function __experimentalUseEntityRecord(kind, name, recordId, options) { (0, _deprecated.default)(`wp.data.__experimentalUseEntityRecord`, { alternative: 'wp.data.useEntityRecord', since: '6.1' }); return useEntityRecord(kind, name, recordId, options); } //# sourceMappingURL=use-entity-record.js.map