lucid-ui
Version:
A UI component library from Xandr.
137 lines • 7.26 kB
JavaScript
;
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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
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 = __importStar(require("lodash"));
var react_1 = __importDefault(require("react"));
var prop_types_1 = __importDefault(require("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 = (0, 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({}, (0, lodash_1.omit)(passThroughs, ['Slide', 'initialState']), { 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: "A container for rendering an infinite set of horizontal slides. Translation between slides is controlled by passing in a new `offset`. Can hook into touch events to update the `offset`. This component is made from `SlidePanel`, so it accepts the same props.",
categories: ['helpers'],
madeFrom: ['SlidePanel'],
};
exports.InfiniteSlidePanel.propTypes = {
/**
Appended to the component-specific class names set on the root element.
*/
className: string,
children: oneOfType([node, func]) /**
The only allowed child is a render function which is passed the current
slide's offset and returns the slide contents: \`(slideOffset) => {
//returns React.PropTypes.node }\` Alternatively, you could pass one
\`<InfiniteSlidePanel.Slide {...}>\` element with the render function.
The only reason do to the latter is to pass addiontal props to the slide
element.
*/,
/**
The offset of the left-most rendered slide.
*/
offset: number,
/**
Max number of viewable slides to show simultaneously.
*/
slidesToShow: number,
/**
Called when a user's swipe would change the offset. Callback passes
number of slides by the user (positive for forward swipes, negative for
backwards swipes). Signature: \`(slidesSwiped, { event, props }) => {}\`
*/
onSwipe: func,
/**
The number of slides rendered at any given time. A good rule-of-thumb is
that this should be at least 4 times the \`slidesToShow\` value.
*/
totalSlides: number,
/** Child components of SlidePanel */
Slide: node,
};
exports.default = exports.InfiniteSlidePanel;
//# sourceMappingURL=InfiniteSlidePanel.js.map