fix: enhance GlobalStatus animation to adjust on content changes

dnbexperience · Oct 20, 2021 · 291f046 · 291f046
1 parent 63d04ee
commit 291f046
Show file tree

Hide file tree

Showing 9 changed files with 397 additions and 125 deletions.
diff --git a/packages/dnb-eufemia-sandbox/stories/components/GlobalStatus.js b/packages/dnb-eufemia-sandbox/stories/components/GlobalStatus.js
@@ -18,6 +18,7 @@ import {
   FormRow,
   FormSet,
   Autocomplete,
+  DatePicker,
 } from '@dnb/eufemia/src/components'
 import {
   H2,
@@ -63,6 +64,11 @@ export const ComponentAsLabel = () => {
           label={<Component />}
           status={status ? status + '3' : undefined}
         />
+        <DatePicker
+          label={<Component />}
+          show_input
+          status={status ? status + '4' : undefined}
+        />
       </FormSet>
     </>
   )

diff --git a/packages/dnb-eufemia/src/components/autocomplete/Autocomplete.js b/packages/dnb-eufemia/src/components/autocomplete/Autocomplete.js
@@ -1839,7 +1839,7 @@ class AutocompleteInstance extends React.PureComponent {
                     icon_size || (size === 'large' ? 'medium' : 'default')
                   }
                   size={size}
-                  status={!opened && status ? status_state : null}
+                  status={status ? status_state : null}
                   status_state={status_state}
                   type={null}
                   submit_element={submitButton}

diff --git a/...dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.js.snap b/...dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.js.snap
@@ -474,7 +474,7 @@ exports[`Autocomplete markup have to match snapshot 1`] = `
                 size={null}
                 skeleton="skeleton"
                 spellCheck="false"
-                status={null}
+                status="error"
                 status_no_animation={null}
                 status_props={null}
                 status_state="error"
@@ -506,7 +506,7 @@ exports[`Autocomplete markup have to match snapshot 1`] = `
                 value="CC cc"
               >
                 <span
-                  className="dnb-input dnb-input--null dnb-form-component dnb-autocomplete__input dnb-input--icon-position-null dnb-input--has-icon dnb-input--icon-size-icon_size dnb-input--has-submit-element"
+                  className="dnb-input dnb-input--null dnb-form-component dnb-autocomplete__input dnb-input--icon-position-null dnb-input--has-icon dnb-input--icon-size-icon_size dnb-input--has-submit-element dnb-input__status--error"
                   data-has-content="true"
                   data-input-state="virgin"
                 >
@@ -532,13 +532,13 @@ exports[`Autocomplete markup have to match snapshot 1`] = `
                       label={null}
                       no_animation={null}
                       role={null}
-                      show={null}
+                      show={false}
                       size="default"
                       skeleton="skeleton"
                       state="error"
                       status="error"
                       stretch={null}
-                      text={null}
+                      text="error"
                       text_id="autocomplete-id-status"
                       title={null}
                       variant={null}

diff --git a/packages/dnb-eufemia/src/components/form-status/FormStatus.js b/packages/dnb-eufemia/src/components/form-status/FormStatus.js
@@ -179,14 +179,17 @@ export default class FormStatus extends React.PureComponent {
 
   state = { id: null, keepContentInDom: null }
 
-  constructor(props) {
+  constructor(props, context) {
     super(props)
 
     // we do not use a random ID here, as we don't need it for now
     this.state.id = props.id || makeUniqueId()
 
     this._globalStatus = GlobalStatusProvider.init(
-      props.global_status_id || 'main',
+      props?.global_status_id ||
+        context?.FormStatus?.global_status_id ||
+        context?.FormRow?.global_status_id ||
+        'main',
       (provider) => {
         // gets called once ready
         if (this.props.state === 'error' && this.isReadyToGetVisible()) {
@@ -268,25 +271,30 @@ export default class FormStatus extends React.PureComponent {
       // ensure we update the content
       this.setState({ keepContentInDom: false })
 
-      const status_id = this.getStatusId()
-
-      if (state === 'error' && isTrue(show)) {
-        this._globalStatus.update(
-          status_id,
-          {
-            state,
-            // status_id,
-            item: {
-              status_id: this.state.id,
-              text,
-              status_anchor_label: label,
-              status_anchor_url: true,
+      if (state === 'error') {
+        const status_id = this.getStatusId()
+
+        if (isTrue(show)) {
+          this._globalStatus.update(
+            status_id,
+            {
+              state,
+              status_id,
+              item: {
+                item_id: this.state.id,
+                text,
+                status_anchor_label: label,
+                status_anchor_url: true,
+              },
             },
-          },
-          {
-            preventRestack: true, // because of the internal "close"
-          }
-        )
+            {
+              preventRestack: true, // because of the internal "close"
+            }
+          )
+        } else if (!FormStatus.getContent(this.props)) {
+          const status_id = this.getStatusId()
+          this._globalStatus.remove(status_id)
+        }
       }
 
       if (this.isReadyToGetVisible()) {
@@ -295,10 +303,6 @@ export default class FormStatus extends React.PureComponent {
         this._heightAnim.open()
       } else {
         this._heightAnim.close()
-        if (state === 'error') {
-          const status_id = this.getStatusId()
-          this._globalStatus.remove(status_id)
-        }
       }
     }
   }

diff --git a/packages/dnb-eufemia/src/components/global-status/GlobalStatus.js b/packages/dnb-eufemia/src/components/global-status/GlobalStatus.js
@@ -280,6 +280,11 @@ export default class GlobalStatus extends React.PureComponent {
         this._globalStatus = globalStatus
       }
 
+      let height
+      if (this.state.keepContentVisible) {
+        height = this.anim.adjustFrom()
+      }
+
       // force re-render
       this.setState({
         globalStatus,
@@ -297,7 +302,7 @@ export default class GlobalStatus extends React.PureComponent {
       // make sure to show the new status, inc. scroll
       if (
         (isTrue(this.props.autoclose) &&
-          this.hadContent &&
+          this._hadContent &&
           !this.hasContent(globalStatus) &&
           !isTrue(this.props.show)) ||
         (typeof globalStatus.show !== 'undefined' &&
@@ -309,8 +314,13 @@ export default class GlobalStatus extends React.PureComponent {
         (typeof globalStatus.show !== 'undefined' &&
           isTrue(globalStatus.show))
       ) {
-        this.hadContent = this.hasContent(globalStatus)
-        this.setVisible({ delay: 0 })
+        this._hadContent = this.hasContent(globalStatus)
+
+        if (this.state.keepContentVisible) {
+          this.anim.adjustTo(height)
+        } else {
+          this.setVisible({ delay: 0 })
+        }
       }
     })
 
@@ -320,8 +330,7 @@ export default class GlobalStatus extends React.PureComponent {
   componentDidMount() {
     this.anim.setElement(this._shellRef.current)
 
-    const isActive = isTrue(this.props.show)
-    if (isActive) {
+    if (isTrue(this.props.show)) {
       this.setVisible()
     }
   }
@@ -353,9 +362,9 @@ export default class GlobalStatus extends React.PureComponent {
         globalStatus,
       })
     }
+
     if (prevProps.show !== this.props.show) {
-      const isActive = isTrue(this.props.show)
-      if (isActive) {
+      if (isTrue(this.props.show)) {
         this.setVisible()
       } else {
         this.setHidden()
@@ -364,7 +373,7 @@ export default class GlobalStatus extends React.PureComponent {
   }
 
   hasContent(globalStatus) {
-    return globalStatus.items?.length > 0 || globalStatus.text
+    return Boolean(globalStatus.items?.length > 0 || globalStatus.text)
   }
 
   correctStatus(state) {
@@ -385,31 +394,10 @@ export default class GlobalStatus extends React.PureComponent {
       return // stop here
     }
 
-    const { isActive, initialOpened } = this.state
-
-    if (isActive === true && initialOpened) {
-      if (!this.adjustHeight) {
-        this.adjustHeight = this.anim.adjustFrom()
-      }
-
-      // just because we want to run "adjust" after the content has been set
-      this.setState(
-        {
-          keepContentVisible: true,
-        },
-        () => {
-          this.anim.adjustTo(this.adjustHeight, null, {})
-        }
-      )
-
-      return // stop here
-    }
-
     const run = () => {
       this.setState(
         {
           isActive: true,
-          initialOpened: true,
         },
         () => {
           this.anim.open()
@@ -434,15 +422,17 @@ export default class GlobalStatus extends React.PureComponent {
       return // stop here
     }
 
+    this.setState({
+      isClosing: true,
+    })
+
     const run = () => {
       this.setState(
         {
+          isClosing: false,
           isActive: false,
-          initialOpened: false,
         },
-        () => {
-          this.anim.close()
-        }
+        () => this.anim.close()
       )
     }
 
@@ -538,7 +528,7 @@ export default class GlobalStatus extends React.PureComponent {
     event.persist()
     const keyCode = keycode(event)
     if (
-      (item.status_id &&
+      (item.item_id &&
         typeof document !== 'undefined' &&
         typeof window !== 'undefined' &&
         keyCode === 'space') ||
@@ -548,7 +538,7 @@ export default class GlobalStatus extends React.PureComponent {
       event.preventDefault()
       try {
         // find the element
-        const element = document.getElementById(item.status_id)
+        const element = document.getElementById(item.item_id)
 
         if (!element) {
           return
@@ -607,9 +597,7 @@ export default class GlobalStatus extends React.PureComponent {
       }
 
       const id =
-        item.id || item.status_id
-          ? `${item.status_id}-${i}`
-          : makeUniqueId()
+        item.id || item.item_id ? `${item.item_id}-${i}` : makeUniqueId()
 
       let anchorText = status_anchor_text
 
@@ -628,7 +616,7 @@ export default class GlobalStatus extends React.PureComponent {
           .replace(/[: ]$/g, '')
       }
 
-      const useAutolink = item.status_id && isTrue(item.status_anchor_url)
+      const useAutolink = item.item_id && isTrue(item.status_anchor_url)
 
       return (
         <li key={i}>
@@ -642,7 +630,7 @@ export default class GlobalStatus extends React.PureComponent {
               aria-describedby={id}
               lang={lang}
               href={
-                useAutolink ? `#${item.status_id}` : item.status_anchor_url
+                useAutolink ? `#${item.item_id}` : item.status_anchor_url
               }
               onClick={(e) => this.gotoItem(e, item)}
               onKeyDown={(e) => this.gotoItem(e, item)}