lucid-ui
Version:
A UI component library from AppNexus.
198 lines • 13.9 kB
JavaScript
"use strict";
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
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 __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 style_helpers_1 = require("../../util/style-helpers");
var Overlay_1 = __importDefault(require("../Overlay/Overlay"));
var GripperVerticalIcon_1 = __importDefault(require("../Icon/GripperVerticalIcon/GripperVerticalIcon"));
var CloseIcon_1 = __importDefault(require("../Icon/CloseIcon/CloseIcon"));
var DragCaptureZone_1 = __importDefault(require("../DragCaptureZone/DragCaptureZone"));
var Button_1 = __importDefault(require("../Button/Button"));
var component_types_1 = require("../../util/component-types");
var cx = style_helpers_1.lucidClassNames.bind('&-SidePanel');
var any = prop_types_1.default.any, bool = prop_types_1.default.bool, func = prop_types_1.default.func, oneOf = prop_types_1.default.oneOf, node = prop_types_1.default.node, number = prop_types_1.default.number, string = prop_types_1.default.string, oneOfType = prop_types_1.default.oneOfType;
var SidePanelHeader = function (_props) { return null; };
SidePanelHeader.displayName = 'SidePanel.Header';
SidePanelHeader.propName = 'Header';
SidePanelHeader.peek = {
description: "\n\t\tDefines the Header content of SidePanel. If no content is defined, it will\n\t\tstill show the close button.\n\t",
};
SidePanelHeader.propTypes = {
children: node(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t\tChildren that will be rendered.\n\t"], ["\n\t\tChildren that will be rendered.\n\t"]))),
};
var SidePanel = /** @class */ (function (_super) {
__extends(SidePanel, _super);
function SidePanel() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
isResizing: false,
width: _this.props.width,
startWidth: _this.props.width,
isExpanded: _this.props.isExpanded,
};
_this.timerId = setTimeout(function () {
return;
}, 1);
_this.handleResizeStart = function () {
_this.setState({
isResizing: true,
});
};
_this.handleResize = function (_a) {
var dX = _a.dX;
var startWidth = _this.state.startWidth;
var position = startWidth + dX * (_this.props.position === 'right' ? -1 : 1);
_this.setState({
width: lodash_1.default.clamp(position, _this.props.minWidth, _this.props.maxWidth === Infinity
? window.innerWidth
: _this.props.maxWidth),
});
};
_this.handleResizeEnd = function (_a, _b) {
var dX = _a.dX;
var event = _b.event;
var _c = _this.state, startWidth = _c.startWidth, width = _c.width;
_this.setState({
width: startWidth + dX * (_this.props.position === 'right' ? -1 : 1),
isResizing: false,
startWidth: width,
});
_this.props.onResize(startWidth - dX, { props: _this.props, event: event });
};
_this.handleCollapse = function (_a) {
var event = _a.event;
_this.props.onCollapse({ event: event, props: _this.props });
};
return _this;
}
SidePanel.prototype.componentDidUpdate = function (prevProps) {
var _this = this;
if (prevProps.isExpanded !== this.props.isExpanded) {
this.timerId = setTimeout(function () {
_this.setState({
isExpanded: _this.props.isExpanded,
});
}, 1);
}
};
SidePanel.prototype.componentWillUnmount = function () {
var preventBodyScroll = this.props.preventBodyScroll;
if (this.timerId) {
clearTimeout(this.timerId);
}
if (preventBodyScroll) {
window.document.body.style.overflow = '';
}
};
SidePanel.prototype.render = function () {
var _a = this.props, children = _a.children, className = _a.className, isAnimated = _a.isAnimated, isExpanded = _a.isExpanded, isResizeDisabled = _a.isResizeDisabled, position = _a.position, preventBodyScroll = _a.preventBodyScroll, topOffset = _a.topOffset, passThroughs = __rest(_a, ["children", "className", "isAnimated", "isExpanded", "isResizeDisabled", "position", "preventBodyScroll", "topOffset"]);
var headerEl = component_types_1.getFirst(this.props, SidePanel.Header);
var headerChildren = lodash_1.default.get(headerEl, 'props.children');
if (preventBodyScroll) {
window.document.body.style.overflow = isExpanded ? 'hidden' : '';
}
return (react_1.default.createElement(Overlay_1.default, __assign({ className: cx('&', {
'&-is-expanded': isExpanded && this.state.isExpanded,
'&-position-left': position === 'left',
'&-position-right': position === 'right',
'&-is-animated': isAnimated,
}, className), isShown: isExpanded || this.state.isExpanded, onBackgroundClick: this.handleCollapse, onEscape: this.handleCollapse, isAnimated: isAnimated, style: {
marginTop: topOffset,
} }, component_types_1.omitProps(passThroughs, undefined, lodash_1.default.keys(SidePanel.propTypes), false)),
react_1.default.createElement("div", { className: cx('&-pane'), style: {
width: this.state.width,
marginTop: topOffset,
} },
headerEl && (react_1.default.createElement("div", { className: cx('&-header') },
react_1.default.createElement("div", { className: cx('&-header-inner-wrapper') },
react_1.default.createElement("div", { className: cx('&-header-content') }, headerChildren),
react_1.default.createElement(Button_1.default, { className: cx('&-header-closer-button'), kind: 'invisible', onClick: this.handleCollapse, hasOnlyIcon: true },
react_1.default.createElement(CloseIcon_1.default, { className: cx('&-header-closer'), isClickable: true, size: 14 }))))),
react_1.default.createElement("div", { className: cx('&-body') },
!isResizeDisabled && (react_1.default.createElement(DragCaptureZone_1.default, { className: cx('&-grabber'), onDragStart: this.handleResizeStart, onDrag: this.handleResize, onDragEnd: this.handleResizeEnd },
react_1.default.createElement(GripperVerticalIcon_1.default, { width: '20' }))),
react_1.default.createElement("div", { className: cx('&-content') }, children)))));
};
SidePanel.displayName = 'SidePanel';
SidePanel.peek = {
description: "\n\t\t\tA fixed-positioned overlay positioned on the side of the screen at full\n\t\t\tscreen height. Supports variable widths resized by the user or defined as a\n\t\t\tprop. Animated collapse and expand with optional Header and closer.\n\t\t",
categories: ['layout'],
};
SidePanel.propTypes = {
children: node(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\t\t\tContent of the SidePanel, but also accepts `<SidePanel.Header>` to define\n\t\t\theader content.\n\t\t"], ["\n\t\t\tContent of the SidePanel, but also accepts \\`<SidePanel.Header>\\` to define\n\t\t\theader content.\n\t\t"]))),
className: string(templateObject_3 || (templateObject_3 = __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"]))),
Header: any(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n\t\t\tAlternative to using `<SidePanel.Header>`.\n\t\t"], ["\n\t\t\tAlternative to using \\`<SidePanel.Header>\\`.\n\t\t"]))),
isAnimated: bool(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n\t\t\tEnables animated transitions during expansion and collapse.\n\t\t"], ["\n\t\t\tEnables animated transitions during expansion and collapse.\n\t\t"]))),
isExpanded: bool(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n\t\t\tControls the expanded/collapsed state as a boolean prop.\n\t\t"], ["\n\t\t\tControls the expanded/collapsed state as a boolean prop.\n\t\t"]))),
isResizeDisabled: bool(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n\t\t\tWhen true, hides the resizer at the edge of the SidePanel.\n\t\t"], ["\n\t\t\tWhen true, hides the resizer at the edge of the SidePanel.\n\t\t"]))),
onCollapse: func(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n\t\t\tCallback triggered when user clicks the background, hits the Esc key, or\n\t\t\tclicks the close button in the Header.\n\t\t\tSignature: `({ event, props }) => {}`\n\t\t"], ["\n\t\t\tCallback triggered when user clicks the background, hits the Esc key, or\n\t\t\tclicks the close button in the Header.\n\t\t\tSignature: \\`({ event, props }) => {}\\`\n\t\t"]))),
onResize: func(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n\t\t\tCallback triggered after a user resizes to a new width.\n\t\t\tSignature: `(width, { event, props }) => {}`\n\t\t"], ["\n\t\t\tCallback triggered after a user resizes to a new width.\n\t\t\tSignature: \\`(width, { event, props }) => {}\\`\n\t\t"]))),
position: oneOf(['left', 'right'])(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n\t\t\tControls the position on the screen.\n\t\t"], ["\n\t\t\tControls the position on the screen.\n\t\t"]))),
preventBodyScroll: bool(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n\t\t\tWhen true, it will prevent scrolling in the background when `isExpanded`\n\t\t\tis true. This is accomplished by setting `document.body.style.overflow =\n\t\t\t'hidden'`.\n\t\t"], ["\n\t\t\tWhen true, it will prevent scrolling in the background when \\`isExpanded\\`\n\t\t\tis true. This is accomplished by setting \\`document.body.style.overflow =\n\t\t\t'hidden'\\`.\n\t\t"]))),
width: number(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n\t\t\tSets the initial width in pixels. The actual width may change if the user\n\t\t\tresizes it.\n\t\t"], ["\n\t\t\tSets the initial width in pixels. The actual width may change if the user\n\t\t\tresizes it.\n\t\t"]))),
minWidth: number(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n\t\tSets the minimum width of the Side Panel.\n\t\t"], ["\n\t\tSets the minimum width of the Side Panel.\n\t\t"]))),
maxWidth: number(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n\t\tSets the maximum width of the Side Panel.\n\t\t"], ["\n\t\tSets the maximum width of the Side Panel.\n\t\t"]))),
topOffset: oneOfType([number, string])(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n\t\t\tSets the top margin for the panel. Defaults to `0`.\n\t\t"], ["\n\t\t\tSets the top margin for the panel. Defaults to \\`0\\`.\n\t\t"]))),
};
SidePanel.defaultProps = {
isAnimated: true,
isExpanded: true,
isResizeDisabled: false,
onCollapse: lodash_1.default.noop,
onResize: lodash_1.default.noop,
position: 'right',
preventBodyScroll: false,
topOffset: 0,
width: 240,
minWidth: -Infinity,
maxWidth: Infinity,
};
SidePanel.Header = SidePanelHeader;
return SidePanel;
}(react_1.default.Component));
exports.default = SidePanel;
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15;
//# sourceMappingURL=SidePanel.js.map