lucid-ui
Version:
A UI component library from Xandr.
190 lines • 8.18 kB
JavaScript
;
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) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
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("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 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;
/** TODO: Remove this constant when the component is converted to a functional component */
var nonPassthroughs = [
'children',
'className',
'isExpanded',
'isAnimated',
'isMountControlled',
'mountControlThreshold',
'onRest',
'rootType',
];
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, style = _a.style, passThroughs = __rest(_a, ["children", "className", "isExpanded", "isMountControlled", "mountControlThreshold", "rootType", "onRest", "style"]);
var maxHeight = this.state.maxHeight;
return (react_1.default.createElement(react_motion_1.Motion, { style: this.isAnimated
? {
height: isExpanded
? (0, react_motion_1.spring)(maxHeight, motion_spring_1.QUICK_SLIDE_MOTION)
: (0, 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({}, lodash_1.default.omit(passThroughs, nonPassthroughs)), { ref: _this.rootRef, className: cx('&', className), style: __assign({ height: tween.height !== maxHeight
? tween.height < 0
? 0
: tween.height
: null, overflow: 'hidden', padding: 0 }, 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: "This is a simple container that can render content as expanded or collapsed.",
categories: ['utility'],
};
// static _isPrivate = true;
Collapsible.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,
};
Collapsible.defaultProps = {
isExpanded: true,
isAnimated: true,
isMountControlled: true,
mountControlThreshold: 4,
rootType: 'div',
};
return Collapsible;
}(react_1.default.Component));
exports.default = Collapsible;
//# sourceMappingURL=Collapsible.js.map