collapsible-react-component
Advanced tools
Comparing version 1.1.2 to 2.0.0
@@ -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
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
13
84
17025
150
1