All files / Collapsible Collapsible.tsx

66.66% Statements 22/33
42.85% Branches 12/28
62.5% Functions 5/8
66.66% Lines 22/33

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236                6x   6x                                                       6x                                       6x 6x         6x                                                                                       58x   58x 58x 58x   6x               58x         58x 58x 58x       27x 27x                                                         10x                           58x   58x   58x                           58x                                                                                
import _ from 'lodash';
import React from 'react';
import PropTypes from 'prop-types';
import { Motion, spring } from 'react-motion';
import { QUICK_SLIDE_MOTION } from '../../constants/motion-spring';
import { lucidClassNames } from '../../util/style-helpers';
import { StandardProps } from '../../util/component-types';
 
const cx = lucidClassNames.bind('&-Collapsible');
 
const { any, bool, node, number, string, func } = PropTypes;
 
// TODO: Is there a better way to add type checks for passThroughs in this case
// where the underling element could be anything vs just extending
// `React.HTMLProps<HTMLElement>`? Related to issue #1045
export interface ICollapsibleProps extends StandardProps {
	/** Indicates that the component is in the "expanded" state when true and in
	 * the "unexpanded" state when false. */
	isExpanded: boolean;
 
	/** Show an animated transition for alternating values of \`isExpanded\`. */
	isAnimated: boolean;
 
	/** If true, do not render children when fully collapsed. */
	isMountControlled: boolean;
 
	/** If \isMountControlled\ is true, this value sets is the minimum height
	 * the container needs to reach to not render any children. */
	mountControlThreshold: number;
 
	/** Pass in a custom root element type. */
	rootType: any;
 
	/** Pass in a callback to be called after ExpanderPanel has came to a rest. */
	onRest?: () => void;
}
 
/** TODO: Remove this constant when the component is converted to a functional component */
const nonPassthroughs = [
	'children',
	'className',
	'isExpanded',
	'isAnimated',
	'isMountControlled',
	'mountControlThreshold',
	'onRest',
	'rootType',
];
 
export interface ICollapsibleState {
	maxHeight: number;
}
 
class Collapsible extends React.Component<
	ICollapsibleProps,
	ICollapsibleState,
	{}
> {
	static displayName = 'Collapsible';
	static peek = {
		description: `This is a simple container that can render content as expanded or collapsed.`,
		categories: ['utility'],
	};
	// static _isPrivate = true;
	static propTypes = {
		/**
			Expandable content.
		*/
		children: node,
 
		/**
			Appended to the component-specific class names set on the root element.
		*/
		className: string,
 
		/**
			Indicates that the component is in the "expanded" state when true and in
			the "unexpanded" state when false.
		*/
		isExpanded: bool,
 
		/**
			Show an animated transition for alternating values of \`isExpanded\`.
		*/
		isAnimated: bool,
 
		/**
			If true, do not render children when fully collapsed.
		*/
		isMountControlled: bool,
 
		/**
			If \`isMountControlled\` is true, this value sets is the minimum height
			the container needs to reach to not render any children.
		*/
		mountControlThreshold: number,
 
		/**
			Optional. The callback that fires when the animation comes to a rest.
		*/
		onRest: func,
 
		/**
			Pass in a custom root element type.
		*/
		rootType: any,
	};
 
	private rootRef = React.createRef<HTMLDivElement>();
 
	isAnimated: boolean | undefined = false;
	delayTimer: number | null = null;
	_isMounted = false;
 
	static defaultProps = {
		isExpanded: true,
		isAnimated: true,
		isMountControlled: true,
		mountControlThreshold: 4,
		rootType: 'div',
	};
 
	state = {
		maxHeight: 0,
	};
 
	UNSAFE_componentWillMount(): void {
		this._isMounted = false;
		this.isAnimated = false;
		this.delayTimer = null;
	}
 
	componentDidMount(): void {
		this._isMounted = true;
		_.delay((): void => {
			// const maxHeight = _.get(this, 'rootRef.current.scrollHeight');
			if (this._isMounted) {
				this.setState({
					maxHeight: _.get(this, 'rootRef.current.scrollHeight'),
				});
			}
			this.isAnimated = this.props.isAnimated;
		}, 32);
	}
 
	componentDidUpdate(): void {
		this.isAnimated = false;
		this.delayTimer = _.delay((): void => {
			if (this.props.isExpanded) {
				const maxHeight = _.get(this, 'rootRef.current.scrollHeight');
				if (maxHeight !== this.state.maxHeight) {
					if (this._isMounted) {
						this.setState({
							maxHeight,
						});
					}
				}
			}
			this.isAnimated = this.props.isAnimated;
		}, 32);
	}
 
	componentWillUnmount(): void {
		this.delayTimer && clearTimeout(this.delayTimer);
	}
 
	render(): React.ReactNode {
		const {
			children,
			className,
			isExpanded,
			isMountControlled,
			mountControlThreshold,
			rootType,
			onRest,
			style,
			...passThroughs
		} = this.props;
 
		const { maxHeight } = this.state;
 
		return (
			<Motion
				style={
					this.isAnimated
						? {
								height: isExpanded
									? spring(maxHeight, QUICK_SLIDE_MOTION)
									: spring(0, QUICK_SLIDE_MOTION),
						  }
						: { height: isExpanded ? maxHeight : 0 }
				}
				onRest={onRest}
			>
				{(tween): JSX.Element =>
					React.createElement(
						rootType,
						{
							..._.omit(passThroughs, nonPassthroughs),
							ref: this.rootRef,
							className: cx('&', className),
							style: {
								height:
									tween.height !== maxHeight
										? tween.height < 0
											? 0
											: tween.height
										: null,
								overflow: 'hidden',
								padding: 0,
								...style,
							},
						},
						[
							<div
								key='content'
								className={cx('&-content')}
								style={{ margin: 0 }}
							>
								{isMountControlled && !isExpanded
									? _.isNull(maxHeight) ||
									  Math.abs(tween.height) > (mountControlThreshold as number)
										? children
										: null
									: children}
							</div>,
						]
					)
				}
			</Motion>
		);
	}
}
 
export default Collapsible;