Skip to content

Commit

Permalink
[muzi] new updates, with fixed interval using state and using flow ty…
Browse files Browse the repository at this point in the history 
…pe checking in code ✊
  • Loading branch information
@zulucoda
zulucoda committed Aug 14, 2018
1 parent 9bebe11 commit 8f7ac53
Show file tree
Hide file tree
Showing 4 changed files with 126 additions and 94 deletions.
46 changes: 35 additions & 11 deletions lib/react-swift-slider/Control.js
View file
Expand Up @@ -5,29 +5,53 @@ Object.defineProperty(exports, "__esModule", {
});
exports.DIRECTION = undefined;

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require("react");

var _react2 = _interopRequireDefault(_react);
var React = _interopRequireWildcard(_react);

require("./assets/sass/react-swift-control.css");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var DIRECTION = exports.DIRECTION = {
prev: "prev",
next: "next"
};

var Control = function Control(_ref) {
var onPressNext = _ref.onPressNext,
onPressPrev = _ref.onPressPrev,
direction = _ref.direction;
var Control = function (_React$Component) {
_inherits(Control, _React$Component);

if (direction === DIRECTION.prev) {
return _react2.default.createElement("div", { className: "swift-slider-prev", onClick: onPressPrev });
} else {
return _react2.default.createElement("div", { className: "swift-slider-next", onClick: onPressNext });
function Control() {
_classCallCheck(this, Control);

return _possibleConstructorReturn(this, (Control.__proto__ || Object.getPrototypeOf(Control)).apply(this, arguments));
}
};

_createClass(Control, [{
key: "render",
value: function render() {
var _props = this.props,
onPressNext = _props.onPressNext,
onPressPrev = _props.onPressPrev,
direction = _props.direction;

if (direction === DIRECTION.prev) {
return React.createElement("div", { className: "swift-slider-prev", onClick: onPressPrev });
} else {
return React.createElement("div", { className: "swift-slider-next", onClick: onPressNext });
}
}
}]);

return Control;
}(React.Component);

exports.default = Control;
61 changes: 43 additions & 18 deletions lib/react-swift-slider/Dot.js
View file
Expand Up @@ -4,27 +4,52 @@ Object.defineProperty(exports, "__esModule", {
value: true
});

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require("react");

var _react2 = _interopRequireDefault(_react);
var React = _interopRequireWildcard(_react);

require("./assets/sass/react-swift-dot.css");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var Dot = function Dot(_ref) {
var active = _ref.active,
_onClick = _ref.onClick,
idx = _ref.idx,
activeDotColor = _ref.activeDotColor,
dotColor = _ref.dotColor;

return _react2.default.createElement("li", {
onClick: function onClick() {
return _onClick(idx);
},
style: { background: active ? activeDotColor : dotColor },
className: "swift-slider-dot"
});
};
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var Dot = function (_React$Component) {
_inherits(Dot, _React$Component);

function Dot() {
_classCallCheck(this, Dot);

return _possibleConstructorReturn(this, (Dot.__proto__ || Object.getPrototypeOf(Dot)).apply(this, arguments));
}

_createClass(Dot, [{
key: "render",
value: function render() {
var _props = this.props,
active = _props.active,
_onClick = _props.onClick,
idx = _props.idx,
activeDotColor = _props.activeDotColor,
dotColor = _props.dotColor;

return React.createElement("li", {
onClick: function onClick() {
return _onClick(idx);
},
style: { background: active ? activeDotColor : dotColor },
className: "swift-slider-dot"
});
}
}]);

return Dot;
}(React.Component);

exports.default = Dot;
21 changes: 6 additions & 15 deletions lib/react-swift-slider/Slide.js
View file
Expand Up @@ -8,24 +8,20 @@ var _createClass = function () { function defineProperties(target, props) { for

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _propTypes = require("prop-types");

var _propTypes2 = _interopRequireDefault(_propTypes);
var React = _interopRequireWildcard(_react);

require("./assets/sass/react-swift-slide.css");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var Slide = function (_Component) {
_inherits(Slide, _Component);
var Slide = function (_React$Component) {
_inherits(Slide, _React$Component);

function Slide() {
_classCallCheck(this, Slide);
Expand All @@ -41,19 +37,14 @@ var Slide = function (_Component) {
active = _props.active;

var selectedClass = active ? "swift-slider-slide swift-slider-active" : "swift-slider-slide";
return _react2.default.createElement("li", {
return React.createElement("li", {
className: selectedClass,
style: { backgroundImage: "url(" + src + ")" }
});
}
}]);

return Slide;
}(_react.Component);

Slide.propTypes = {
src: _propTypes2.default.string.isRequired,
active: _propTypes2.default.bool.isRequired
};
}(React.Component);

exports.default = Slide;
92 changes: 42 additions & 50 deletions lib/react-swift-slider/Slider.js
View file
Expand Up @@ -8,11 +8,7 @@ var _createClass = function () { function defineProperties(target, props) { for

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _propTypes = require("prop-types");

var _propTypes2 = _interopRequireDefault(_propTypes);
var React = _interopRequireWildcard(_react);

require("./assets/sass/react-swift-slider.css");

Expand All @@ -30,26 +26,36 @@ var _Dot2 = _interopRequireDefault(_Dot);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var Slider = function (_Component) {
_inherits(Slider, _Component);
var Slider = function (_React$Component) {
_inherits(Slider, _React$Component);

function Slider(props) {
_classCallCheck(this, Slider);
function Slider() {
var _ref;

var _this = _possibleConstructorReturn(this, (Slider.__proto__ || Object.getPrototypeOf(Slider)).call(this, props));
var _temp, _this, _ret;

_this.resetInterval = function () {
clearInterval(_this.slideInterval);
_this.slideInterval = setInterval(_this.nextSlide, _this.props.interval);
};
_classCallCheck(this, Slider);

_this.nextSlide = function () {
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}

return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Slider.__proto__ || Object.getPrototypeOf(Slider)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
currentSlide: 0
}, _this.resetInterval = function () {
clearInterval(_this.state.slideInterval);
_this.setState({
slideInterval: setInterval(_this.nextSlide, _this.props.interval)
});
}, _this.nextSlide = function () {
if (_this.state.currentSlide === _this.props.data.length - 1) {
_this.setState({
currentSlide: 0
Expand All @@ -60,9 +66,7 @@ var Slider = function (_Component) {
currentSlide: _this.state.currentSlide + 1
});
_this.resetInterval();
};

_this.prevSlide = function () {
}, _this.prevSlide = function () {
if (_this.state.currentSlide === 0) {
_this.setState({
currentSlide: _this.props.data.length - 1
Expand All @@ -73,23 +77,22 @@ var Slider = function (_Component) {
currentSlide: _this.state.currentSlide - 1
});
_this.resetInterval();
};

_this.goToSlide = function (idx) {
}, _this.goToSlide = function (idx) {
_this.setState({
currentSlide: idx
});
_this.resetInterval();
};

_this.state = {
currentSlide: 0
};
_this.slideInterval = setInterval(_this.nextSlide, _this.props.interval);
return _this;
}, _temp), _possibleConstructorReturn(_this, _ret);
}

_createClass(Slider, [{
key: "componentDidMount",
value: function componentDidMount() {
this.setState({
slideInterval: setInterval(this.nextSlide, this.props.interval)
});
}
}, {
key: "render",
value: function render() {
var _this2 = this;
Expand All @@ -102,25 +105,25 @@ var Slider = function (_Component) {
showDots = _props.showDots,
enableNextAndPrev = _props.enableNextAndPrev;

return _react2.default.createElement(
return React.createElement(
"div",
{ className: "swift-slider-container" },
_react2.default.createElement(
React.createElement(
"ul",
{ className: "swift-slider-slides", style: { height: height } },
data.map(function (item, i) {
return _react2.default.createElement(_Slide2.default, {
return React.createElement(_Slide2.default, {
active: i === _this2.state.currentSlide,
src: item.src,
key: item.id
});
})
),
showDots ? _react2.default.createElement(
showDots ? React.createElement(
"ul",
{ className: "swift-slider-dots" },
data.map(function (item, i) {
return _react2.default.createElement(_Dot2.default, {
return React.createElement(_Dot2.default, {
activeDotColor: activeDotColor,
dotColor: dotColor,
key: i,
Expand All @@ -130,33 +133,22 @@ var Slider = function (_Component) {
});
})
) : "",
enableNextAndPrev ? _react2.default.createElement(_Control2.default, { onPressPrev: this.prevSlide, direction: "prev" }) : "",
enableNextAndPrev ? _react2.default.createElement(_Control2.default, { onPressNext: this.nextSlide, direction: "next" }) : ""
enableNextAndPrev ? React.createElement(_Control2.default, { onPressPrev: this.prevSlide, direction: _Control.DIRECTION.prev }) : "",
enableNextAndPrev ? React.createElement(_Control2.default, { onPressNext: this.nextSlide, direction: _Control.DIRECTION.next }) : ""
);
}
}]);

return Slider;
}(_react.Component);

exports.default = Slider;


Slider.propTypes = {
data: _propTypes2.default.array.isRequired,
height: _propTypes2.default.number,
interval: _propTypes2.default.number,
activeDotColor: _propTypes2.default.string,
dotColor: _propTypes2.default.string,
showDots: _propTypes2.default.bool,
enableNextAndPrev: _propTypes2.default.bool
};
}(React.Component);

Slider.defaultProps = {
data: [],
height: 450,
activeDotColor: "#e8784e",
interval: 5000,
dotColor: "#909192",
showDots: true,
enableNextAndPrev: true
};
};
exports.default = Slider;

0 comments on commit 8f7ac53

Please sign in to comment.