Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

collapsible-react-component

Package Overview
Dependencies
Maintainers
1
Versions
24
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

collapsible-react-component - npm Package Compare versions

Comparing version 1.1.2 to 2.0.0

dist/Collapsible.d.ts

13

dist/index.d.ts

@@ -1,11 +0,2 @@

import * as React from 'react';
export declare type Type = 'revealTopFirst' | 'revealBottomFirst';
export declare type CollapsibleProps = {
open: boolean;
type?: Type;
onTransitionEnd?: (newState: Extract<CollapsibleState, 'open' | 'closed'>) => void;
children?: React.ReactNode;
};
declare type CollapsibleState = 'closed' | 'before-open-transition' | 'open-transition' | 'open' | 'before-closed-transition' | 'closed-transition';
export declare const Collapsible: React.FunctionComponent<CollapsibleProps>;
export {};
export * from './Collapsible';
export * from './RevealType';
var React = require('react');
var style = {"wrapper":"_1I_qj","is_type_revealTopFirst":"_2L9NA","is_type_revealBottomFirst":"_1HWL6","is_state_closed":"_1L6Gs","is_state_before-open-transition":"_3U8bo","is_state_closed-transition":"_3EVaT","is_state_open-transition":"_RKZOX","is_state_open":"_2mqKm","is_state_before-closed-transition":"_2jajZ","content":"_2jwZj"};
var styles = {"wrapper":"_1I_qj","is_state_closed":"_1L6Gs","is_state_open":"_2mqKm","is_revealType_bottomFirst":"_2KsIP","in":"_VrGmt","is_revealType_topFirst":"_3DkiG","is_transitioning":"_12f0Z","content":"_2jwZj"};
var assertNever = function assertNever(_) {
throw new Error(JSON.stringify(_));
};
var forceReflow = function forceReflow(element) {
if (!element) {
return;
}
element.getBoundingClientRect();
};
var Collapsible = function Collapsible(_ref) {

@@ -21,76 +9,46 @@ var children = _ref.children,

onTransitionEnd = _ref.onTransitionEnd,
_ref$type = _ref.type,
type = _ref$type === void 0 ? 'revealBottomFirst' : _ref$type;
onTransitionStart = _ref.onTransitionStart,
_ref$revealType = _ref.revealType,
revealType = _ref$revealType === void 0 ? 'bottomFirst' : _ref$revealType;
var _useState = React.useState(open ? 'open' : 'closed'),
state = _useState[0],
setState = _useState[1];
var _React$useState = React.useState(false),
isTransitioning = _React$useState[0],
setIsTransitioning = _React$useState[1];
var _useState2 = React.useState('auto'),
contentHeight = _useState2[0],
setContentHeight = _useState2[1];
React.useLayoutEffect(function () {
return function () {
if (onTransitionStart) {
onTransitionStart(open);
}
var contentRef = React.useRef(null);
var updateContentHeight = React.useCallback(function () {
if (!contentRef.current) {
return;
}
var contentHeight = contentRef.current.getBoundingClientRect().height + "px";
setContentHeight(contentHeight);
}, []);
setIsTransitioning(true);
};
}, [open]);
var handleTransitionEnd = React.useCallback(function (event) {
if (event.propertyName === 'visibility') {
var newState = open ? 'open' : 'closed';
setState(newState);
if (event.propertyName === 'grid-template-rows') {
if (onTransitionEnd) {
onTransitionEnd(newState);
onTransitionEnd(open);
}
setIsTransitioning(false);
}
}, [open, onTransitionEnd]);
React.useEffect(function () {
if (state === 'closed') {
if (open) {
updateContentHeight();
setState('before-open-transition');
}
} else if (state === 'before-open-transition') {
if (open) {
forceReflow(contentRef.current);
setState('open-transition');
}
} else if (state === 'open-transition') {
if (!open) {
setState('closed');
}
} else if (state === 'open') {
if (!open) {
updateContentHeight();
setState('before-closed-transition');
}
} else if (state === 'before-closed-transition') {
if (!open) {
forceReflow(contentRef.current);
setState('closed-transition');
}
} else if (state === 'closed-transition') {
if (open) {
setState('open');
}
} else {
assertNever(state);
var className = React.useMemo(function () {
var classNames = [styles.wrapper, open ? styles.is_state_open : styles.is_state_closed, styles["is_revealType_" + revealType]];
if (isTransitioning) {
classNames.push(styles.is_transitioning);
}
}, [open, state, updateContentHeight]);
return classNames.join(' ');
}, [isTransitioning, open]);
return React.createElement("div", {
className: style.wrapper + " " + style["is_state_" + state] + " " + style["is_type_" + type],
style: {
'--Collapsible-content-height': contentHeight
},
onTransitionEnd: handleTransitionEnd,
"aria-hidden": !open
className: className,
"aria-hidden": !open,
onTransitionEnd: handleTransitionEnd
}, React.createElement("div", {
className: style.content,
ref: contentRef
}, children));
className: styles["in"]
}, React.createElement("div", {
className: styles.content
}, children)));
};

@@ -97,0 +55,0 @@

@@ -1,17 +0,5 @@

import { useState, useRef, useCallback, useEffect, createElement } from 'react';
import { useState, useLayoutEffect, useCallback, useMemo, createElement } from 'react';
var style = {"wrapper":"_1I_qj","is_type_revealTopFirst":"_2L9NA","is_type_revealBottomFirst":"_1HWL6","is_state_closed":"_1L6Gs","is_state_before-open-transition":"_3U8bo","is_state_closed-transition":"_3EVaT","is_state_open-transition":"_RKZOX","is_state_open":"_2mqKm","is_state_before-closed-transition":"_2jajZ","content":"_2jwZj"};
var styles = {"wrapper":"_1I_qj","is_state_closed":"_1L6Gs","is_state_open":"_2mqKm","is_revealType_bottomFirst":"_2KsIP","in":"_VrGmt","is_revealType_topFirst":"_3DkiG","is_transitioning":"_12f0Z","content":"_2jwZj"};
var assertNever = function assertNever(_) {
throw new Error(JSON.stringify(_));
};
var forceReflow = function forceReflow(element) {
if (!element) {
return;
}
element.getBoundingClientRect();
};
var Collapsible = function Collapsible(_ref) {

@@ -21,76 +9,46 @@ var children = _ref.children,

onTransitionEnd = _ref.onTransitionEnd,
_ref$type = _ref.type,
type = _ref$type === void 0 ? 'revealBottomFirst' : _ref$type;
onTransitionStart = _ref.onTransitionStart,
_ref$revealType = _ref.revealType,
revealType = _ref$revealType === void 0 ? 'bottomFirst' : _ref$revealType;
var _useState = useState(open ? 'open' : 'closed'),
state = _useState[0],
setState = _useState[1];
var _React$useState = useState(false),
isTransitioning = _React$useState[0],
setIsTransitioning = _React$useState[1];
var _useState2 = useState('auto'),
contentHeight = _useState2[0],
setContentHeight = _useState2[1];
useLayoutEffect(function () {
return function () {
if (onTransitionStart) {
onTransitionStart(open);
}
var contentRef = useRef(null);
var updateContentHeight = useCallback(function () {
if (!contentRef.current) {
return;
}
var contentHeight = contentRef.current.getBoundingClientRect().height + "px";
setContentHeight(contentHeight);
}, []);
setIsTransitioning(true);
};
}, [open]);
var handleTransitionEnd = useCallback(function (event) {
if (event.propertyName === 'visibility') {
var newState = open ? 'open' : 'closed';
setState(newState);
if (event.propertyName === 'grid-template-rows') {
if (onTransitionEnd) {
onTransitionEnd(newState);
onTransitionEnd(open);
}
setIsTransitioning(false);
}
}, [open, onTransitionEnd]);
useEffect(function () {
if (state === 'closed') {
if (open) {
updateContentHeight();
setState('before-open-transition');
}
} else if (state === 'before-open-transition') {
if (open) {
forceReflow(contentRef.current);
setState('open-transition');
}
} else if (state === 'open-transition') {
if (!open) {
setState('closed');
}
} else if (state === 'open') {
if (!open) {
updateContentHeight();
setState('before-closed-transition');
}
} else if (state === 'before-closed-transition') {
if (!open) {
forceReflow(contentRef.current);
setState('closed-transition');
}
} else if (state === 'closed-transition') {
if (open) {
setState('open');
}
} else {
assertNever(state);
var className = useMemo(function () {
var classNames = [styles.wrapper, open ? styles.is_state_open : styles.is_state_closed, styles["is_revealType_" + revealType]];
if (isTransitioning) {
classNames.push(styles.is_transitioning);
}
}, [open, state, updateContentHeight]);
return classNames.join(' ');
}, [isTransitioning, open]);
return createElement("div", {
className: style.wrapper + " " + style["is_state_" + state] + " " + style["is_type_" + type],
style: {
'--Collapsible-content-height': contentHeight
},
onTransitionEnd: handleTransitionEnd,
"aria-hidden": !open
className: className,
"aria-hidden": !open,
onTransitionEnd: handleTransitionEnd
}, createElement("div", {
className: style.content,
ref: contentRef
}, children));
className: styles["in"]
}, createElement("div", {
className: styles.content
}, children)));
};

@@ -97,0 +55,0 @@

{
"name": "collapsible-react-component",
"version": "1.1.2",
"version": "2.0.0",
"description": "Collapses and expands content with an animation.",

@@ -12,3 +12,3 @@ "author": "FilipChalupa",

"engines": {
"node": ">=10"
"node": ">=16"
},

@@ -15,0 +15,0 @@ "scripts": {

@@ -40,6 +40,9 @@ # Collapsible react component

open={open}
onTransitionEnd={(newState) => {
console.log('Collapsible box is now', newState)
onTransitionStart={(open) => {
console.log('Collapsible box used to be', open ? 'open' : 'closed')
}}
type='revealBottomFirst'
onTransitionEnd={(open) => {
console.log('Collapsible box is now', open ? 'open' : 'closed')
}}
revealType='bottomFirst'
>

@@ -58,8 +61,9 @@ Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio, sed

| Name | Required | Default | Description |
| ----------------- | -------- | --------------------------------------- | --------------------------------------------------------- |
| `open` | ✅ | `false` | Determines wheter the children content should be visible. |
| `children` | ✅ | none | Collapsible content. |
| `onTransitionEnd` | | noop | Callback after content is fully expanded or fully closed. |
| `type` | | `revealBottomFirst` or `revealTopFirst` | Type of transition animation. |
| Name | Required | Default | Type | Description |
| ------------------- | -------- | ------------- | ------------------------- | ------------------------------------------------------------------------------------ |
| `open` | ✅ | none | `boolean` | Determines wheter the children content should be visible. |
| `children` | ✅ | none | `ReactNode` | Collapsible content. |
| `onTransitionStart` | | noop | `(open: boolean) => void` | Callback invoked when transition starts. `open` is the starting state. |
| `onTransitionEnd` | | noop | `(open: boolean) => void` | Callback after content is fully expanded or fully closed. `open` is the final state. |
| `revealType` | | `bottomFirst` | `bottomFirst \| topFirst` | Type of transition animation. |

@@ -66,0 +70,0 @@ ## Development

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc