lucid-ui
Version:
A UI component library from AppNexus.
97 lines • 8.11 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 __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 });
exports.InfiniteSlidePanel = void 0;
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 component_types_1 = require("../../util/component-types");
var SlidePanel_1 = __importDefault(require("../SlidePanel/SlidePanel"));
var cx = style_helpers_1.lucidClassNames.bind('&-InfiniteSlidePanel');
var func = prop_types_1.default.func, node = prop_types_1.default.node, number = prop_types_1.default.number, oneOfType = prop_types_1.default.oneOfType, string = prop_types_1.default.string;
var modulo = function (n, a) {
return a - n * Math.floor(a / n);
};
var InfiniteSlidePanelSlide = function (_props) {
return null;
};
InfiniteSlidePanelSlide.displayName = 'InfiniteSlidePanel.Slide';
InfiniteSlidePanelSlide.propName = 'Slide';
InfiniteSlidePanelSlide.peek = { description: "The slide." };
var defaultProps = {
offset: 0,
slidesToShow: 1,
onSwipe: lodash_1.default.noop,
totalSlides: 8,
isAnimated: SlidePanel_1.default.defaultProps.isAnimated,
isLooped: SlidePanel_1.default.defaultProps.isLooped,
};
var InfiniteSlidePanel = function (props) {
var children = props.children, className = props.className, offset = props.offset, slidesToShow = props.slidesToShow, onSwipe = props.onSwipe, totalSlides = props.totalSlides, passThroughs = __rest(props, ["children", "className", "offset", "slidesToShow", "onSwipe", "totalSlides"]);
var slide = component_types_1.getFirst(props, exports.InfiniteSlidePanel.Slide, react_1.default.createElement(InfiniteSlidePanelSlide, null, children));
var slideChildRenderFunction = slide.props.children;
if (!lodash_1.default.isFunction(slideChildRenderFunction)) {
throw new Error('InfiniteSlidePanel children must be a single function `(slideOffset) => { /* returns React.PropTypes.node */ }`');
}
var halfSlides = Math.floor(totalSlides / 2);
var circularOffset = modulo(totalSlides, offset);
var forwardSlideOffsets = lodash_1.default.times(totalSlides - halfSlides, function (n) { return offset + n; });
var backwardSlideOffsets = lodash_1.default.times(halfSlides, function (n) { return offset + n - halfSlides; });
var transposedSlideOffsets = forwardSlideOffsets.concat(backwardSlideOffsets);
var slideOffsetArray = lodash_1.default.takeRight(transposedSlideOffsets, circularOffset).concat(lodash_1.default.take(transposedSlideOffsets, totalSlides - circularOffset));
return (react_1.default.createElement(SlidePanel_1.default, __assign({}, component_types_1.omitProps(passThroughs, undefined, lodash_1.default.keys(exports.InfiniteSlidePanel.propTypes), false), { className: cx('&', className), offset: offset, slidesToShow: slidesToShow, onSwipe: onSwipe, isLooped: true }), lodash_1.default.map(slideOffsetArray, function (slideOffset, elementOffset) { return (react_1.default.createElement(SlidePanel_1.default.Slide, __assign({ key: elementOffset }, slide.props, { className: cx({
'&-Slide-in-frame': slideOffset - offset < slidesToShow &&
slideOffset - offset >= 0,
}, slide.props.className) }), slideChildRenderFunction(slideOffset))); })));
};
exports.InfiniteSlidePanel = InfiniteSlidePanel;
exports.InfiniteSlidePanel.defaultProps = defaultProps;
exports.InfiniteSlidePanel.Slide = InfiniteSlidePanelSlide;
exports.InfiniteSlidePanel._isPrivate = true;
exports.InfiniteSlidePanel.displayName = 'InfiniteSlidePanel';
exports.InfiniteSlidePanel.peek = {
description: "\n\t\tA container for rendering an infinite set of horizontal slides.\n\t\tTranslation between slides is controlled by passing in a new\n\t\t`offset`. Can hook into touch events to update the `offset`. This\n\t\tcomponent is made from SlidePanel, so it accepts the same props.\n\t",
categories: ['helpers'],
madeFrom: ['SlidePanel'],
};
exports.InfiniteSlidePanel.propTypes = {
className: string(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t\tAppended to the component-specific class names set on the root element.\n\t"], ["\n\t\tAppended to the component-specific class names set on the root element.\n\t"]))),
children: oneOfType([node, func])(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\t\tThe only allowed child is a render function which is passed the current\n\t\tslide's offset and returns the slide contents: `(slideOffset) => {\n\t\t//returns React.PropTypes.node }` Alternatively, you could pass one\n\t\t`<InfiniteSlidePanel.Slide {...}>` element with the render function.\n\t\tThe only reason do to the latter is to pass addiontal props to the slide\n\t\telement.\n\t"], ["\n\t\tThe only allowed child is a render function which is passed the current\n\t\tslide's offset and returns the slide contents: \\`(slideOffset) => {\n\t\t//returns React.PropTypes.node }\\` Alternatively, you could pass one\n\t\t\\`<InfiniteSlidePanel.Slide {...}>\\` element with the render function.\n\t\tThe only reason do to the latter is to pass addiontal props to the slide\n\t\telement.\n\t"]))),
offset: number(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\t\tThe offset of the left-most rendered slide.\n\t"], ["\n\t\tThe offset of the left-most rendered slide.\n\t"]))),
slidesToShow: number(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n\t\tMax number of viewable slides to show simultaneously.\n\t"], ["\n\t\tMax number of viewable slides to show simultaneously.\n\t"]))),
onSwipe: func(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n\t\tCalled when a user's swipe would change the offset. Callback passes\n\t\tnumber of slides by the user (positive for forward swipes, negative for\n\t\tbackwards swipes). Signature: `(slidesSwiped, { event, props }) => {}`\n\t"], ["\n\t\tCalled when a user's swipe would change the offset. Callback passes\n\t\tnumber of slides by the user (positive for forward swipes, negative for\n\t\tbackwards swipes). Signature: \\`(slidesSwiped, { event, props }) => {}\\`\n\t"]))),
totalSlides: number(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n\t\tThe number of slides rendered at any given time. A good rule-of-thumb is\n\t\tthat this should be at least 4 times the `slidesToShow` value.\n\t"], ["\n\t\tThe number of slides rendered at any given time. A good rule-of-thumb is\n\t\tthat this should be at least 4 times the \\`slidesToShow\\` value.\n\t"]))),
Slide: node,
};
exports.default = exports.InfiniteSlidePanel;
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
//# sourceMappingURL=InfiniteSlidePanel.js.map