lucid-ui
Version:
A UI component library from AppNexus.
188 lines • 11.9 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 dom_helpers_1 = require("../../util/dom-helpers");
var component_types_1 = require("../../util/component-types");
var cx = style_helpers_1.lucidClassNames.bind('&-SlidePanel');
var bool = prop_types_1.default.bool, func = prop_types_1.default.func, node = prop_types_1.default.node, number = prop_types_1.default.number, string = prop_types_1.default.string, any = prop_types_1.default.any;
var modulo = function (n, a) { return a - n * Math.floor(a / n); };
var SlidePanelSlide = /** @class */ (function (_super) {
__extends(SlidePanelSlide, _super);
function SlidePanelSlide() {
return _super !== null && _super.apply(this, arguments) || this;
}
SlidePanelSlide.prototype.render = function () {
return null;
};
SlidePanelSlide.displayName = 'SlidePanel.Slide';
SlidePanelSlide.propName = 'Slide';
return SlidePanelSlide;
}(react_1.default.Component));
var SlidePanel = /** @class */ (function (_super) {
__extends(SlidePanel, _super);
function SlidePanel() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.rootHTMLDivElement = react_1.default.createRef();
_this.slideStrip = react_1.default.createRef();
_this.offsetTranslate = _this.props.isLooped
? Math.floor(lodash_1.default.size(component_types_1.findTypes(_this.props, SlidePanel.Slide)) / 2)
: 0;
_this.state = {
translateXPixel: 0,
startX: 0,
isAnimated: _this.props.isAnimated,
isDragging: false,
};
_this.handleTouchStart = function (event) {
_this.setState({
startX: event.touches[0].screenX,
isAnimated: false,
isDragging: true,
});
};
_this.handleTouchMove = function (event) {
var dX = event.touches[0].screenX - _this.state.startX;
_this.setState({
translateXPixel: dX,
});
};
_this.handleTouchEnd = function (event) {
var dX = event.changedTouches[0].screenX - _this.state.startX;
var slideWidth = _this.rootHTMLDivElement.current.getBoundingClientRect()
.width / _this.props.slidesToShow;
var slidesSwiped = Math.round(dX / slideWidth);
if (slidesSwiped !== 0) {
_this.props.onSwipe(-1 * slidesSwiped, { event: event, props: _this.props });
}
_this.setState({
translateXPixel: 0,
isDragging: false,
isAnimated: _this.props.isAnimated,
});
};
return _this;
}
SlidePanel.prototype.componentDidMount = function () {
var slides = component_types_1.findTypes(this.props, SlidePanel.Slide);
if (this.props.isLooped) {
dom_helpers_1.shiftChildren(this.slideStrip.current, Math.floor(lodash_1.default.size(slides) / 2));
}
};
SlidePanel.prototype.componentDidUpdate = function (prevProps, prevState) {
var _this = this;
var slides = component_types_1.findTypes(this.props, SlidePanel.Slide);
var offsetDiff = this.props.offset - prevProps.offset;
if (offsetDiff !== 0 && this.props.isLooped) {
this.offsetTranslate = modulo(lodash_1.default.size(slides), this.offsetTranslate - offsetDiff);
lodash_1.default.delay(function () {
dom_helpers_1.shiftChildren(_this.slideStrip.current, -offsetDiff);
_this.setState({
isAnimated: false,
}, function () {
_this.forceUpdate();
_this.setState({
isAnimated: _this.props.isAnimated,
});
});
}, 200);
}
};
SlidePanel.prototype.render = function () {
var _this = this;
var _a = this.props, className = _a.className, slidesToShow = _a.slidesToShow, realOffset = _a.offset, isLooped = _a.isLooped, passThroughs = __rest(_a, ["className", "slidesToShow", "offset", "isLooped"]);
var offset = realOffset + this.offsetTranslate;
var slides = component_types_1.findTypes(this.props, SlidePanel.Slide);
var translateXPercentage = -1 *
(100 / slidesToShow) *
(isLooped ? modulo(lodash_1.default.size(slides), offset) : offset);
return (react_1.default.createElement("div", __assign({}, component_types_1.omitProps(passThroughs, undefined, Object.keys(SlidePanel.propTypes)), { ref: this.rootHTMLDivElement, className: cx('&', className) }),
react_1.default.createElement(react_motion_1.Motion, { style: this.state.isAnimated
? {
translateXPercentage: react_motion_1.spring(translateXPercentage, motion_spring_1.QUICK_SLIDE_MOTION),
translateXPixel: react_motion_1.spring(this.state.translateXPixel, motion_spring_1.QUICK_SLIDE_MOTION),
}
: {
translateXPercentage: translateXPercentage,
translateXPixel: this.state.translateXPixel,
} }, function (tween) { return (react_1.default.createElement("div", __assign({}, component_types_1.omitProps(passThroughs, undefined, Object.keys(SlidePanel.propTypes)), { className: cx('&-slidestrip', className), style: {
transform: _this.state.isDragging
? "translateX(calc(" + tween.translateXPercentage + "% + " + _this.state.translateXPixel + "px))"
: "translateX(calc(" + tween.translateXPercentage + "% + " + tween.translateXPixel + "px))",
}, ref: _this.slideStrip, onTouchStart: _this.handleTouchStart, onTouchMove: _this.handleTouchMove, onTouchEnd: _this.handleTouchEnd, onTouchCancel: lodash_1.default.noop }), lodash_1.default.map(slides, function (slide, offset) { return (react_1.default.createElement("div", __assign({ key: offset }, slide.props, { className: cx('&-Slide', slide.props.className), style: __assign({ flexGrow: 1, flexShrink: 0, flexBasis: 100 / slidesToShow + "%" }, slide.props.style) }))); }))); })));
};
SlidePanel._isPrivate = true;
SlidePanel.displayName = 'SlidePanel';
SlidePanel.peek = {
description: "\n\t\t\tA container for rendering a set of horizontal slides at at a particular\n\t\t\toffset. Translation between slides is controlled by passing in a new\n\t\t\t`offset`. Can hook into touch events to update the `offset`.\n\t\t",
categories: ['helpers'],
};
SlidePanel.propTypes = {
className: string(templateObject_1 || (templateObject_1 = __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"]))),
children: node(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\t\t\tSlidePanel.Slide elements are passed in as children.\n\t\t"], ["\n\t\t\tSlidePanel.Slide elements are passed in as children.\n\t\t"]))),
Slide: any(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\t\t\tThis is the child component that will be displayed inside the SlidePanel.\n\t\t"], ["\n\t\t\tThis is the child component that will be displayed inside the SlidePanel.\n\t\t"]))),
slidesToShow: number(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n\t\t\tMax number of viewable slides to show simultaneously.\n\t\t"], ["\n\t\t\tMax number of viewable slides to show simultaneously.\n\t\t"]))),
offset: number(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n\t\t\tThe offset of the left-most rendered slide.\n\t\t"], ["\n\t\t\tThe offset of the left-most rendered slide.\n\t\t"]))),
isAnimated: bool(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n\t\t\tAnimate slides transitions from changes in `offset`.\n\t\t"], ["\n\t\t\tAnimate slides transitions from changes in \\`offset\\`.\n\t\t"]))),
isLooped: bool(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n\t\t\tSlides are rendered in a continuous loop, where the first slide repeats\n\t\t\tafter the last slide and vice-versa. DOM elements are re-ordered and\n\t\t\tre-used.\n\t\t"], ["\n\t\t\tSlides are rendered in a continuous loop, where the first slide repeats\n\t\t\tafter the last slide and vice-versa. DOM elements are re-ordered and\n\t\t\tre-used.\n\t\t"]))),
onSwipe: func(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n\t\t\tCalled when a user's swipe would change the offset. Callback passes\n\t\t\tnumber of slides by the user (positive for forward swipes, negative for\n\t\t\tbackwards swipes). Signature: `(slidesSwiped, { event, props }) => {}`\n\t\t"], ["\n\t\t\tCalled when a user's swipe would change the offset. Callback passes\n\t\t\tnumber of slides by the user (positive for forward swipes, negative for\n\t\t\tbackwards swipes). Signature: \\`(slidesSwiped, { event, props }) => {}\\`\n\t\t"]))),
};
SlidePanel.Slide = SlidePanelSlide;
SlidePanel.defaultProps = {
slidesToShow: 1,
offset: 0,
isAnimated: true,
onSwipe: lodash_1.default.noop,
isLooped: false,
};
return SlidePanel;
}(react_1.default.Component));
exports.default = SlidePanel;
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
//# sourceMappingURL=SlidePanel.js.map