fomantic-ui-react
Version:
Fomantic-UI React -- A React Component Library.
200 lines (175 loc) • 8.93 kB
JavaScript
/**
* fomantic-ui-react v0.0.1-alpha.10
* (c) 2022 FireLoong <fireloong@foxmail.com>
* @license MIT
*/
import { _ as _defineProperty, a as _objectWithoutProperties } from '../_chunks/dep-9f1126c1.js';
import { _ as _slicedToArray } from '../_chunks/dep-dc9b74a1.js';
import { useState, Children, useEffect, cloneElement, createElement } from 'react';
import classNames from 'classnames';
import { useMap } from 'react-use';
import { isNil, isValidElement } from '../_util/reactNode.js';
var _excluded = ["as", "className", "behavior", "change", "duration", "width", "height", "children"];
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var ShapeSides = function ShapeSides(_ref) {
var _ref$as = _ref.as,
as = _ref$as === void 0 ? "div" : _ref$as,
className = _ref.className,
behavior = _ref.behavior,
change = _ref.change,
duration = _ref.duration,
width = _ref.width,
height = _ref.height,
children = _ref.children,
props = _objectWithoutProperties(_ref, _excluded);
var _useState = useState(change),
_useState2 = _slicedToArray(_useState, 2),
isChange = _useState2[0],
setIsChange = _useState2[1];
var _useMap = useMap(),
_useMap2 = _slicedToArray(_useMap, 2),
styles = _useMap2[0],
set = _useMap2[1].set;
var _useMap3 = useMap(),
_useMap4 = _slicedToArray(_useMap3, 2),
activeStyle = _useMap4[0],
setActiveStyle = _useMap4[1].set;
var _useMap5 = useMap(),
_useMap6 = _slicedToArray(_useMap5, 2),
nextStyle = _useMap6[0],
setNextStyle = _useMap6[1].set;
var _useMap7 = useMap(),
_useMap8 = _slicedToArray(_useMap7, 2),
sideStyle = _useMap8[0],
setSideStyle = _useMap8[1].set;
var _useState3 = useState(-1),
_useState4 = _slicedToArray(_useState3, 2),
animatingIndex = _useState4[0],
setAnimatingIndex = _useState4[1];
var _useState5 = useState(0),
_useState6 = _slicedToArray(_useState5, 2),
activeIndex = _useState6[0],
setActiveIndex = _useState6[1];
var _useState7 = useState(-1),
_useState8 = _slicedToArray(_useState7, 2),
hiddenIndex = _useState8[0],
setHiddenIndex = _useState8[1];
var nextActive = function nextActive() {
var count = Children.count(children);
return activeIndex < count - 1 ? activeIndex + 1 : 0;
};
useEffect(function () {
setIsChange(change);
}, [change]);
useEffect(function () {
if (isChange) {
if (behavior === "flip up") {
set("transform", "translateY(".concat(height / 2, "px) translateZ(-").concat(height / 2, "px) rotateX(-90deg)"));
set("transitionDuration", "".concat(duration, "ms"));
setActiveStyle("transform", "rotateX(0deg)");
setActiveStyle("transitionDuration", "".concat(duration, "ms"));
setNextStyle("top", "0px");
setNextStyle("transform", "rotateX(90deg) translateZ(".concat(height / 2, "px) translateY(-").concat(height / 2, "px)"));
setNextStyle("transitionDuration", "".concat(duration, "ms"));
setSideStyle("transitionDuration", "".concat(duration, "ms"));
} else if (behavior === "flip down") {
set("transform", "translateY(-".concat(height / 2, "px) translateZ(-").concat(height / 2, "px) rotateX(90deg)"));
set("transitionDuration", "".concat(duration, "ms"));
setActiveStyle("transform", "rotateX(0deg)");
setActiveStyle("transitionDuration", "".concat(duration, "ms"));
setNextStyle("top", "0px");
setNextStyle("transform", "rotateX(-90deg) translateZ(".concat(height / 2, "px) translateY(").concat(height / 2, "px)"));
setNextStyle("transitionDuration", "".concat(duration, "ms"));
setSideStyle("transitionDuration", "".concat(duration, "ms"));
} else if (behavior === "flip left") {
set("transform", "translateX(".concat(width / 2, "px) translateZ(-").concat(width / 2, "px) rotateY(90deg)"));
set("transitionDuration", "".concat(duration, "ms"));
setActiveStyle("transform", "rotateY(0deg)");
setActiveStyle("transitionDuration", "".concat(duration, "ms"));
setNextStyle("top", "0px");
setNextStyle("transform", "rotateY(-90deg) translateZ(".concat(width / 2, "px) translateX(-").concat(width / 2, "px)"));
setNextStyle("transitionDuration", "".concat(duration, "ms"));
setSideStyle("transitionDuration", "".concat(duration, "ms"));
} else if (behavior === "flip right") {
set("transform", "translateX(-".concat(width / 2, "px) translateZ(-").concat(width / 2, "px) rotateY(-90deg)"));
set("transitionDuration", "".concat(duration, "ms"));
setActiveStyle("transform", "rotateY(0deg)");
setActiveStyle("transitionDuration", "".concat(duration, "ms"));
setNextStyle("top", "0px");
setNextStyle("transform", "rotateY(90deg) translateZ(".concat(width / 2, "px) translateX(").concat(width / 2, "px)"));
setNextStyle("transitionDuration", "".concat(duration, "ms"));
setSideStyle("transitionDuration", "".concat(duration, "ms"));
} else if (behavior === "flip over") {
set("transform", "translateX(0px) rotateY(180deg)");
set("transitionDuration", "".concat(duration, "ms"));
setActiveStyle("transform", "rotateY(0deg)");
setActiveStyle("transitionDuration", "".concat(duration, "ms"));
setNextStyle("left", "0px");
setNextStyle("transform", "rotateY(-180deg)");
setNextStyle("transitionDuration", "".concat(duration, "ms"));
setSideStyle("transitionDuration", "".concat(duration, "ms"));
} else if (behavior === "flip back") {
set("transform", "translateX(0px) rotateY(-180deg)");
set("transitionDuration", "".concat(duration, "ms"));
setActiveStyle("transform", "rotateY(0deg)");
setActiveStyle("transitionDuration", "".concat(duration, "ms"));
setNextStyle("left", "0px");
setNextStyle("transform", "rotateY(-180deg)");
setNextStyle("transitionDuration", "".concat(duration, "ms"));
setSideStyle("transitionDuration", "".concat(duration, "ms"));
}
setHiddenIndex(activeIndex);
setAnimatingIndex(nextActive());
setTimeout(function () {
setHiddenIndex(-1);
setAnimatingIndex(-1);
setActiveIndex(nextActive());
if (behavior === "flip up" || behavior === "flip down" || behavior === "flip left" || behavior === "flip right" || behavior === "flip over" || behavior === "flip back") {
set("transform", void 0);
set("transitionDuration", void 0);
setActiveStyle("transform", void 0);
setActiveStyle("transitionDuration", void 0);
setNextStyle("top", void 0);
setNextStyle("left", void 0);
setNextStyle("transform", void 0);
setNextStyle("transitionDuration", void 0);
setSideStyle("transitionDuration", void 0);
}
setIsChange(false);
}, duration);
}
}, [isChange]);
if (!as) {
as = "div";
}
var itemChildren;
if (isNil(children)) {} else {
itemChildren = Children.map(children, function (childItem, i) {
if (isValidElement(childItem)) {
var childItemProps = childItem.props;
useEffect(function () {
if (childItemProps.active) {
setActiveIndex(i);
}
}, []);
return /*#__PURE__*/cloneElement(childItem, {
key: i,
active: activeIndex === i,
hidden: hiddenIndex === i,
className: classNames({
animating: animatingIndex === i
}),
style: activeIndex === i ? activeStyle : nextActive() === i ? nextStyle : sideStyle
});
}
});
}
return /*#__PURE__*/createElement(as, _objectSpread({
className: classNames("sides", className),
style: _objectSpread(_objectSpread({}, props.style), styles)
}, props), itemChildren);
};
ShapeSides.displayName = "ShapeSides";
export { ShapeSides as default };
//# sourceMappingURL=ShapeSides.js.map