lucid-ui

Version:
A UI component library from AppNexus.
53 lines • 2.2 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = __importDefault(require("react"));
var create_react_class_1 = __importDefault(require("create-react-class"));
var index_1 = require("../../../index");
var InfiniteSlidePanel_1 = __importDefault(require("../InfiniteSlidePanel"));
var generateRGB = function (n) {
    var R = Math.floor((Math.sin(n / Math.PI) + 1) * 128);
    var G = Math.floor((Math.sin((2 * n) / Math.PI) + 1) * 128);
    var B = Math.floor((Math.sin((3 * n) / Math.PI) + 1) * 128);
    return "rgb(" + R + "," + G + "," + B + ")";
};
exports.default = create_react_class_1.default({
    getInitialState: function () {
        return {
            offset: 0,
        };
    },
    handlePrev: function () {
        this.setState({
            offset: this.state.offset - 1,
        });
    },
    handleNext: function () {
        this.setState({
            offset: this.state.offset + 1,
        });
    },
    handleSwipe: function (slidesSwiped) {
        this.setState({
            offset: this.state.offset + slidesSwiped,
        });
    },
    render: function () {
        return (react_1.default.createElement("section", null,
            react_1.default.createElement(index_1.Button, { onClick: this.handlePrev }, "Backward"),
            react_1.default.createElement(index_1.Button, { onClick: this.handleNext }, "Forward"),
            "Current offset: ",
            this.state.offset,
            react_1.default.createElement(InfiniteSlidePanel_1.default, { totalSlides: 12, slidesToShow: 3, offset: this.state.offset, onSwipe: this.handleSwipe }, function (slideOffset) { return (react_1.default.createElement("div", { style: {
                    width: '100%',
                    height: '30vh',
                    background: generateRGB(slideOffset),
                    display: 'flex',
                    justifyContent: 'center',
                    alignItems: 'center',
                } }, slideOffset)); })));
    },
});
//# sourceMappingURL=1.dynamic-content.js.map