diginet-core-ui 1.3.62 → 1.3.63

package/components/collapse/index.js

@@ -1,66 +1,106 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import { memo, useEffect, useRef, forwardRef } from 'react';
+import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
+import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
-import { jsx, css } from '@emotion/core';
+import { displayBlock, parseWidthHeight, positionRelative } from '../../styles/general';
 const Collapse = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  open,
   children,
-  ...props
-}, ref) => {
-  if (!ref) {
-    ref = useRef(null);
-  }
+  className,
+  id,
+  onClosed,
+  onOpened,
+  open,
+  style
+}, reference) => {
+  const ref = useRef(null);
+  const timer = useRef(null);
+
+  const _onOpen = () => {
+    if (timer.current) {
+      clearTimeout(timer.current);
+    }
+
+    const scrollHeight = ref.current.scrollHeight;
+    const duration = Math.min(scrollHeight, 1500);
+    ref.current.style.transitionDuration = duration + 'ms';
+    ref.current.style.height = scrollHeight + 'px';
+    timer.current = setTimeout(() => {
+      if (ref.current) {
+        ref.current.style.height = 'auto';
+      }
+
+      onOpened && onOpened(ref.current);
+    }, duration);
+  };
+
+  const _onClose = () => {
+    if (ref.current) {
+      if (timer.current) {
+        clearTimeout(timer.current);
+      }
 
-  const CollapseRoot = css`
-        display: block;
-        position: relative;
-        width: 100%;
-        height: 0;
-        transition: height 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-        overflow-y: clip;
-    `;
-  useEffect(() => {
-    if (open) {
       const scrollHeight = ref.current.scrollHeight;
-      const duration = Math.min(scrollHeight, 1500);
-      ref.current.style.transitionDuration = duration + 'ms';
       ref.current.style.height = scrollHeight + 'px';
-      setTimeout(() => {
+      timer.current = setTimeout(() => {
         if (ref.current) {
-          ref.current.style.height = 'auto';
+          ref.current.style.height = null;
         }
-      }, duration);
-      return () => {
-        if (ref.current) {
-          ref.current.style.height = scrollHeight + 'px';
-          setTimeout(() => {
-            if (ref.current) {
-              ref.current.style.height = null;
-            }
-          }, 0);
-        }
-      };
+
+        onClosed && onClosed(ref.current);
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (open) {
+      _onOpen();
+    } else {
+      _onClose();
     }
   }, [open]);
-  return jsx("div", {
+  useImperativeHandle(reference, () => ({
+    element: ref.current,
+    instance: {}
+  }));
+  return useMemo(() => jsx("div", {
     css: CollapseRoot,
     ref: ref,
-    ...props
-  }, children);
+    id: id,
+    style: style,
+    className: ['DGN-UI-Collapse', className].join(' ').trim().replace(/\s+/g, ' ')
+  }, children), [children, className, id, onClosed, onOpened, open, style]);
 }));
+const CollapseRoot = css`
+    ${displayBlock};
+    ${positionRelative};
+    ${parseWidthHeight('100%', 0)};
+    transition: height 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+    overflow-y: clip;
+`;
 Collapse.defaultProps = {
-  open: false
+  className: '',
+  open: false,
+  style: {}
 };
 Collapse.propTypes = {
-  /** expand content if true */
-  open: PropTypes.bool,
-
-  /** The element to display in alert like text props (priority) */
+  /** The content of the component. */
   children: PropTypes.node,
 
-  /** any props else */
-  props: PropTypes.any
+  /** Class for component. */
+  className: PropTypes.string,
+
+  /** Callback fired when the component closed. */
+  onClosed: PropTypes.func,
+
+  /** Callback fired when the component opened. */
+  onOpened: PropTypes.func,
+
+  /** If `true`, the content is shown. */
+  open: PropTypes.bool,
+
+  /** Style inline of component. */
+  style: PropTypes.object
 };
 export default Collapse;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "diginet-core-ui",
-  "version": "1.3.62",
+  "version": "1.3.63",
   "description": "The DigiNet core ui",
   "homepage": "https://diginet.com.vn",
   "main": "index.js",

package/readme.md

@@ -38,6 +38,9 @@ npm test
 ```
 
 ## Changelog
+## 1.3.63
+- \[Changed\]: Collapse – Add props onClosed, onOpened
+
 ## 1.3.62
 - \[Changed\]: Radio – Add value to event target