simple-react-ui
Version:
a simple react component library written in TypeScript+ React.js
93 lines • 4.54 kB
JavaScript
;
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var item_1 = require("./item");
var indicator_1 = require("./indicator");
;
var Carousel = /** @class */ (function (_super) {
__extends(Carousel, _super);
function Carousel(props) {
var _this = _super.call(this, props) || this;
_this.state = {
items: _this.props.items,
indicators: [],
activeIndex: 0,
intervalId: undefined,
};
return _this;
}
Carousel.prototype.calculatePreviousActiveIndex = function (currentActiveIndex) {
var itemsCount = this.props.items.length;
var previousActiveIndex = currentActiveIndex - 1;
previousActiveIndex = previousActiveIndex < 0 ?
itemsCount + previousActiveIndex :
previousActiveIndex;
var index = previousActiveIndex % itemsCount;
// 转换为整数返回
return parseInt(index);
};
Carousel.prototype.calculateNextActiveIndex = function (currentActiveIndex) {
var nextActiveIndex = currentActiveIndex + 1;
var itemsCount = this.props.items.length;
var index = nextActiveIndex % itemsCount;
return parseInt(index);
};
Carousel.prototype.componentDidMount = function () {
var _this = this;
var activeIndex = this.state.activeIndex;
var itemsCount = this.state.items.length;
var intervalId = setInterval(function () {
activeIndex = _this.calculateNextActiveIndex(activeIndex);
_this.setState({ activeIndex: activeIndex });
}, this.props.autoplayInterval);
this.setState({ intervalId: intervalId });
};
Carousel.prototype.render = function () {
var _this = this;
var state = this.state;
return (React.createElement("div", { className: "carousel slide", "data-ride": "carousel" },
React.createElement("ol", { className: "carousel-indicators" }, this.state.items.map(function (i, k) {
return React.createElement(indicator_1.default, { key: k, active: state.activeIndex == k, onClick: function () {
_this.setState({ activeIndex: k });
} });
})),
React.createElement("div", { className: "carousel-inner", style: this.props.style }, this.state.items.map(function (i, k) {
return React.createElement(item_1.default, { key: k, caption: i.caption, imgAlt: i.imgAlt, imgSrc: i.imgSrc, href: i.href, active: state.activeIndex == k });
})),
React.createElement("a", { className: "left carousel-control", "data-slide": "prev", onClick: function (e) {
e.preventDefault();
var activeIndex = _this.calculatePreviousActiveIndex(_this.state.activeIndex);
_this.setState({ activeIndex: activeIndex });
return false;
} },
React.createElement("span", { className: "icon-prev", "aria-hidden": "true" }),
React.createElement("span", { className: "sr-only" }, "Previous")),
React.createElement("a", { className: "right carousel-control", "data-slide": "next", onClick: function (e) {
e.preventDefault();
var activeIndex = _this.calculateNextActiveIndex(_this.state.activeIndex);
_this.setState({ activeIndex: activeIndex });
return false;
} },
React.createElement("span", { className: "icon-next", "aria-hidden": "true" }),
React.createElement("span", { className: "sr-only" }, "Next"))));
};
return Carousel;
}(React.Component));
exports.Carousel = Carousel;
Carousel.defaultProps = {
items: [],
autoplayInterval: 2500,
style: {},
};
exports.default = Carousel;
//# sourceMappingURL=index.js.map