lucid-ui
Version:
A UI component library from Xandr.
244 lines • 11.5 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 __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 });
var lodash_1 = __importStar(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 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 nonPassThroughs = [
'className',
'children',
'Slide',
'slidesToShow',
'offset',
'isAnimated',
'isLooped',
'onSwipe',
'initialState',
'callbackId',
];
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((0, 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 = (0, component_types_1.findTypes)(this.props, SlidePanel.Slide);
if (this.props.isLooped) {
(0, 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 = (0, 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 () {
(0, 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 = (0, 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({}, (0, lodash_1.omit)(passThroughs, nonPassThroughs), { ref: this.rootHTMLDivElement, className: cx('&', className) }),
react_1.default.createElement(react_motion_1.Motion, { style: this.state.isAnimated
? {
translateXPercentage: (0, react_motion_1.spring)(translateXPercentage, motion_spring_1.QUICK_SLIDE_MOTION),
translateXPixel: (0, 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({}, (0, lodash_1.omit)(passThroughs, nonPassThroughs), { className: cx('&-slidestrip', className), style: {
transform: _this.state.isDragging
? "translateX(calc(".concat(tween.translateXPercentage, "% + ").concat(_this.state.translateXPixel, "px))")
: "translateX(calc(".concat(tween.translateXPercentage, "% + ").concat(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: "".concat(100 / slidesToShow, "%") }, slide.props.style) }))); }))); })));
};
SlidePanel._isPrivate = true;
SlidePanel.displayName = 'SlidePanel';
SlidePanel.peek = {
description: "A container for rendering a set of horizontal slides at at a particular offset. Translation between slides is controlled by passing in a new `offset`. Can hook into touch events to update the `offset`.",
categories: ['helpers'],
};
SlidePanel.propTypes = {
/**
Appended to the component-specific class names set on the root element.
*/
className: string,
/**
SlidePanel.Slide elements are passed in as children.
*/
children: node,
/**
This is the child component that will be displayed inside the SlidePanel.
*/
Slide: any,
/**
Max number of viewable slides to show simultaneously.
*/
slidesToShow: number,
/**
The offset of the left-most rendered slide.
*/
offset: number,
/**
Animate slides transitions from changes in \`offset\`.
*/
isAnimated: bool,
/**
Slides are rendered in a continuous loop, where the first slide repeats
after the last slide and vice-versa. DOM elements are re-ordered and
re-used.
*/
isLooped: bool,
/**
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,
};
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;
//# sourceMappingURL=SlidePanel.js.map