Move addContentToGlobalFlyout() call in <DocumentFields />

elastic · Aug 19, 2020 · a95c282 · a95c282
1 parent b980003
commit a95c282
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 68 deletions.
diff --git a/...lic/application/components/mappings_editor/components/document_fields/document_fields.tsx b/...lic/application/components/mappings_editor/components/document_fields/document_fields.tsx
@@ -3,22 +3,30 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import React, { useMemo, useCallback } from 'react';
+import React, { useMemo, useCallback, useEffect } from 'react';
 import { EuiSpacer } from '@elastic/eui';
 
+import { GlobalFlyout } from '../../shared_imports';
 import { useMappingsState, useDispatch } from '../../mappings_state_context';
 import { deNormalize } from '../../lib';
-import { EditFieldContainer } from './fields';
+import { EditFieldContainer, EditFieldContainerProps, defaultFlyoutProps } from './fields';
 import { DocumentFieldsHeader } from './document_fields_header';
 import { DocumentFieldsJsonEditor } from './fields_json_editor';
 import { DocumentFieldsTreeEditor } from './fields_tree_editor';
 import { SearchResult } from './search_fields';
 
+const { useGlobalFlyout } = GlobalFlyout;
+
 export const DocumentFields = React.memo(() => {
  const { fields, search, documentFields } = useMappingsState();
  const dispatch = useDispatch();
+ const {
+ addContent: addContentToGlobalFlyout,
+ removeContent: removeContentFromGlobalFlyout,
+ } = useGlobalFlyout();
 
  const { editor: editorType } = documentFields;
+ const isEditing = documentFields.status === 'editingField';
 
  const jsonEditorDefaultValue = useMemo(() => {
  if (editorType === 'json') {
@@ -40,6 +48,38 @@ export const DocumentFields = React.memo(() => {
  [dispatch]
  );
 
+ const exitEdit = useCallback(() => {
+ dispatch({ type: 'documentField.changeStatus', value: 'idle' });
+ }, [dispatch]);
+
+ useEffect(() => {
+ if (isEditing) {
+ // Open the flyout with the <EditField /> content
+ addContentToGlobalFlyout<EditFieldContainerProps>({
+ id: 'mappingsEditField',
+ Component: EditFieldContainer,
+ props: { exitEdit },
+ flyoutProps: { ...defaultFlyoutProps, onClose: exitEdit },
+ cleanUpFunc: exitEdit,
+ });
+ }
+ }, [isEditing, addContentToGlobalFlyout, fields.byId, exitEdit]);
+
+ useEffect(() => {
+ if (!isEditing) {
+ removeContentFromGlobalFlyout('mappingsEditField');
+ }
+ }, [isEditing, removeContentFromGlobalFlyout]);
+
+ useEffect(() => {
+ return () => {
+ if (isEditing) {
+ // When the component unmounts, exit edit mode.
+ exitEdit();
+ }
+ };
+ }, [isEditing, exitEdit]);
+
  const searchTerm = search.term.trim();
 
  return (
@@ -51,7 +91,6 @@ export const DocumentFields = React.memo(() => {
  ) : (
  editor
  )}
- <EditFieldContainer />
  </div>
  );
 });
diff --git a/...on/components/mappings_editor/components/document_fields/fields/edit_field/edit_field.tsx b/...on/components/mappings_editor/components/document_fields/fields/edit_field/edit_field.tsx
@@ -43,13 +43,6 @@ export interface Props {
  updateField: UpdateFieldFunc;
 }
 
-export const defaultFlyoutProps = {
- 'data-test-subj': 'mappingsEditorFieldEdit',
- 'aria-labelledby': 'mappingsEditorFieldEditTitle',
- className: 'mappingsEditor__editField',
- maxWidth: 720,
-};
-
 // The default FormWrapper is the <EuiForm />, which wrapps the form with
 // a <div>. We can't have a div as first child of the Flyout as it breaks
 // the height calculaction and does not render the footer position correctly.

diff --git a/...nts/mappings_editor/components/document_fields/fields/edit_field/edit_field_container.tsx b/...nts/mappings_editor/components/document_fields/fields/edit_field/edit_field_container.tsx
@@ -3,31 +3,35 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import React, { useEffect, useCallback, useMemo } from 'react';
+import React, { useEffect, useMemo } from 'react';
 
-import { useForm, GlobalFlyout } from '../../../../shared_imports';
+import { useForm } from '../../../../shared_imports';
 import { useDispatch, useMappingsState } from '../../../../mappings_state_context';
 import { Field } from '../../../../types';
 import { fieldSerializer, fieldDeserializer } from '../../../../lib';
 import { ModalConfirmationDeleteFields } from '../modal_confirmation_delete_fields';
-import { EditField, defaultFlyoutProps, Props as EditFieldProps } from './edit_field';
+import { EditField } from './edit_field';
 import { useUpdateField } from './use_update_field';
 
-const { useGlobalFlyout } = GlobalFlyout;
+export const defaultFlyoutProps = {
+ 'data-test-subj': 'mappingsEditorFieldEdit',
+ 'aria-labelledby': 'mappingsEditorFieldEditTitle',
+ className: 'mappingsEditor__editField',
+ maxWidth: 720,
+};
 
-export const EditFieldContainer = React.memo(() => {
+export interface Props {
+ exitEdit: () => void;
+}
+
+export const EditFieldContainer = React.memo(({ exitEdit }: Props) => {
  const { fields, documentFields } = useMappingsState();
  const dispatch = useDispatch();
- const {
- addContent: addContentToGlobalFlyout,
- removeContent: removeContentFromGlobalFlyout,
- } = useGlobalFlyout();
  const { updateField, modal } = useUpdateField();
 
  const { status, fieldToEdit } = documentFields;
  const isEditing = status === 'editingField';
-
- const field = isEditing ? fields.byId[fieldToEdit!] : undefined;
+ const field = fields.byId[fieldToEdit!];
 
  const formDefaultValue = useMemo(() => {
  return { ...field?.source };
@@ -38,6 +42,7 @@ export const EditFieldContainer = React.memo(() => {
  serializer: fieldSerializer,
  deserializer: fieldDeserializer,
  options: { stripEmptyFields: false },
+ id: 'edit-field',
  });
 
  const { subscribe } = form;
@@ -50,52 +55,24 @@ export const EditFieldContainer = React.memo(() => {
  return subscription.unsubscribe;
  }, [subscribe, dispatch]);
 
- const exitEdit = useCallback(() => {
- dispatch({ type: 'documentField.changeStatus', value: 'idle' });
- }, [dispatch]);
-
- useEffect(() => {
- if (isEditing) {
- // Open the flyout with the <EditField /> content
- addContentToGlobalFlyout<EditFieldProps>({
- id: 'mappingsEditField',
- Component: EditField,
- props: {
- form,
- field: field!,
- exitEdit,
- allFields: fields.byId,
- updateField,
- },
- flyoutProps: { ...defaultFlyoutProps, onClose: exitEdit },
- cleanUpFunc: exitEdit,
- });
- }
- }, [
- isEditing,
- field,
- form,
- addContentToGlobalFlyout,
- fields.byId,
- fieldToEdit,
- exitEdit,
- updateField,
- ]);
+ const renderModal = () => {
+ return modal.isOpen ? <ModalConfirmationDeleteFields {...modal.props} /> : null;
+ };
 
- useEffect(() => {
- if (!isEditing) {
- removeContentFromGlobalFlyout('mappingsEditField');
- }
- }, [isEditing, removeContentFromGlobalFlyout]);
-
- useEffect(() => {
- return () => {
- if (isEditing) {
- // When the component unmounts, exit edit mode.
- exitEdit();
- }
- };
- }, [isEditing, exitEdit]);
+ if (!isEditing) {
+ return null;
+ }
 
- return modal.isOpen ? <ModalConfirmationDeleteFields {...modal.props} /> : null;
+ return (
+ <>
+ <EditField
+ form={form}
+ field={field}
+ allFields={fields.byId}
+ exitEdit={exitEdit}
+ updateField={updateField}
+ />
+ {renderModal()}
+ </>
+ );
 });
diff --git a/...lication/components/mappings_editor/components/document_fields/fields/edit_field/index.ts b/...lication/components/mappings_editor/components/document_fields/fields/edit_field/index.ts
@@ -4,7 +4,11 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export * from './edit_field_container';
+export {
+ EditFieldContainer,
+ defaultFlyoutProps,
+ Props as EditFieldContainerProps,
+} from './edit_field_container';
 
 export * from './basic_parameters_section';