lucid-ui
Version:
A UI component library from AppNexus.
157 lines • 9.31 kB
JavaScript
"use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var lodash_1 = __importDefault(require("lodash"));
var react_1 = __importDefault(require("react"));
var prop_types_1 = __importDefault(require("react-peek/prop-types"));
var react_motion_1 = require("react-motion");
var motion_spring_1 = require("../../constants/motion-spring");
var style_helpers_1 = require("../../util/style-helpers");
var component_types_1 = require("../../util/component-types");
var cx = style_helpers_1.lucidClassNames.bind('&-Collapsible');
var any = prop_types_1.default.any, bool = prop_types_1.default.bool, node = prop_types_1.default.node, number = prop_types_1.default.number, string = prop_types_1.default.string, func = prop_types_1.default.func;
var Collapsible = /** @class */ (function (_super) {
__extends(Collapsible, _super);
function Collapsible() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.rootRef = react_1.default.createRef();
_this.isAnimated = false;
_this.delayTimer = null;
_this._isMounted = false;
_this.state = {
maxHeight: 0,
};
return _this;
}
Collapsible.prototype.UNSAFE_componentWillMount = function () {
this._isMounted = false;
this.isAnimated = false;
this.delayTimer = null;
};
Collapsible.prototype.componentDidMount = function () {
var _this = this;
this._isMounted = true;
lodash_1.default.delay(function () {
// const maxHeight = _.get(this, 'rootRef.current.scrollHeight');
if (_this._isMounted) {
_this.setState({
maxHeight: lodash_1.default.get(_this, 'rootRef.current.scrollHeight'),
});
}
_this.isAnimated = _this.props.isAnimated;
}, 32);
};
Collapsible.prototype.componentDidUpdate = function () {
var _this = this;
this.isAnimated = false;
this.delayTimer = lodash_1.default.delay(function () {
if (_this.props.isExpanded) {
var maxHeight = lodash_1.default.get(_this, 'rootRef.current.scrollHeight');
if (maxHeight !== _this.state.maxHeight) {
if (_this._isMounted) {
_this.setState({
maxHeight: maxHeight,
});
}
}
}
_this.isAnimated = _this.props.isAnimated;
}, 32);
};
Collapsible.prototype.componentWillUnmount = function () {
this.delayTimer && clearTimeout(this.delayTimer);
};
Collapsible.prototype.render = function () {
var _this = this;
var _a = this.props, children = _a.children, className = _a.className, isExpanded = _a.isExpanded, isMountControlled = _a.isMountControlled, mountControlThreshold = _a.mountControlThreshold, rootType = _a.rootType, onRest = _a.onRest, passThroughs = __rest(_a, ["children", "className", "isExpanded", "isMountControlled", "mountControlThreshold", "rootType", "onRest"]);
var maxHeight = this.state.maxHeight;
return (react_1.default.createElement(react_motion_1.Motion, { style: this.isAnimated
? {
height: isExpanded
? react_motion_1.spring(maxHeight, motion_spring_1.QUICK_SLIDE_MOTION)
: react_motion_1.spring(0, motion_spring_1.QUICK_SLIDE_MOTION),
}
: { height: isExpanded ? maxHeight : 0 }, onRest: onRest }, function (tween) {
return react_1.default.createElement(rootType, __assign(__assign({}, component_types_1.omitProps(passThroughs, undefined, Object.keys(Collapsible.propTypes))), { ref: _this.rootRef, className: cx('&', className), style: __assign({ height: tween.height !== maxHeight
? tween.height < 0
? 0
: tween.height
: null, overflow: 'hidden', padding: 0 }, passThroughs.style) }), [
react_1.default.createElement("div", { key: 'content', className: cx('&-content'), style: { margin: 0 } }, isMountControlled && !isExpanded
? lodash_1.default.isNull(maxHeight) ||
Math.abs(tween.height) > mountControlThreshold
? children
: null
: children),
]);
}));
};
Collapsible.displayName = 'Collapsible';
Collapsible.peek = {
description: "\n\t\t\tThis is a simple container that can render content as expanded or\n\t\t\tcollapsed.\n\t\t",
categories: ['utility'],
};
// static _isPrivate = true;
Collapsible.propTypes = {
children: node(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t\t\tExpandable content.\n\t\t"], ["\n\t\t\tExpandable content.\n\t\t"]))),
className: string(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\t\t\tAppended to the component-specific class names set on the root element.\n\t\t"], ["\n\t\t\tAppended to the component-specific class names set on the root element.\n\t\t"]))),
isExpanded: bool(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\t\t\tIndicates that the component is in the \"expanded\" state when true and in\n\t\t\tthe \"unexpanded\" state when false.\n\t\t"], ["\n\t\t\tIndicates that the component is in the \"expanded\" state when true and in\n\t\t\tthe \"unexpanded\" state when false.\n\t\t"]))),
isAnimated: bool(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n\t\t\tShow an animated transition for alternating values of `isExpanded`.\n\t\t"], ["\n\t\t\tShow an animated transition for alternating values of \\`isExpanded\\`.\n\t\t"]))),
isMountControlled: bool(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n\t\t\tIf true, do not render children when fully collapsed.\n\t\t"], ["\n\t\t\tIf true, do not render children when fully collapsed.\n\t\t"]))),
mountControlThreshold: number(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n\t\t\tIf `isMountControlled` is true, this value sets is the minimum height\n\t\t\tthe container needs to reach to not render any children.\n\t\t"], ["\n\t\t\tIf \\`isMountControlled\\` is true, this value sets is the minimum height\n\t\t\tthe container needs to reach to not render any children.\n\t\t"]))),
onRest: func(templateObject_7 || (templateObject_7 = __makeTemplateObject(["Optional. The callback that fires when the animation comes to a rest."], ["Optional. The callback that fires when the animation comes to a rest."]))),
rootType: any(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n\t\t\tPass in a custom root element type.\n\t\t"], ["\n\t\t\tPass in a custom root element type.\n\t\t"]))),
};
Collapsible.defaultProps = {
isExpanded: true,
isAnimated: true,
isMountControlled: true,
mountControlThreshold: 4,
rootType: 'div',
};
return Collapsible;
}(react_1.default.Component));
exports.default = Collapsible;
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
//# sourceMappingURL=Collapsible.js.map