fomantic-ui-react/lib/shape/ShapeSides.js

Fomantic-UI React -- A React Component Library.

/**
 * fomantic-ui-react v0.0.1-alpha.10
 * (c) 2022 FireLoong <fireloong@foxmail.com>
 * @license MIT
 */

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var defineProperty = require('../_chunks/dep-6ab59a61.js');
var slicedToArray = require('../_chunks/dep-640599ea.js');
var objectWithoutProperties = require('../_chunks/dep-03754121.js');
var React = require('react');
var classNames = require('classnames');
var reactUse = require('react-use');
var _util_reactNode = require('../_util/reactNode.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);

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._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._objectWithoutProperties(_ref, _excluded);

  var _useState = React.useState(change),
      _useState2 = slicedToArray._slicedToArray(_useState, 2),
      isChange = _useState2[0],
      setIsChange = _useState2[1];

  var _useMap = reactUse.useMap(),
      _useMap2 = slicedToArray._slicedToArray(_useMap, 2),
      styles = _useMap2[0],
      set = _useMap2[1].set;

  var _useMap3 = reactUse.useMap(),
      _useMap4 = slicedToArray._slicedToArray(_useMap3, 2),
      activeStyle = _useMap4[0],
      setActiveStyle = _useMap4[1].set;

  var _useMap5 = reactUse.useMap(),
      _useMap6 = slicedToArray._slicedToArray(_useMap5, 2),
      nextStyle = _useMap6[0],
      setNextStyle = _useMap6[1].set;

  var _useMap7 = reactUse.useMap(),
      _useMap8 = slicedToArray._slicedToArray(_useMap7, 2),
      sideStyle = _useMap8[0],
      setSideStyle = _useMap8[1].set;

  var _useState3 = React.useState(-1),
      _useState4 = slicedToArray._slicedToArray(_useState3, 2),
      animatingIndex = _useState4[0],
      setAnimatingIndex = _useState4[1];

  var _useState5 = React.useState(0),
      _useState6 = slicedToArray._slicedToArray(_useState5, 2),
      activeIndex = _useState6[0],
      setActiveIndex = _useState6[1];

  var _useState7 = React.useState(-1),
      _useState8 = slicedToArray._slicedToArray(_useState7, 2),
      hiddenIndex = _useState8[0],
      setHiddenIndex = _useState8[1];

  var nextActive = function nextActive() {
    var count = React.Children.count(children);
    return activeIndex < count - 1 ? activeIndex + 1 : 0;
  };

  React.useEffect(function () {
    setIsChange(change);
  }, [change]);
  React.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 (_util_reactNode.isNil(children)) ; else {
    itemChildren = React.Children.map(children, function (childItem, i) {
      if (_util_reactNode.isValidElement(childItem)) {
        var childItemProps = childItem.props;
        React.useEffect(function () {
          if (childItemProps.active) {
            setActiveIndex(i);
          }
        }, []);
        return /*#__PURE__*/React.cloneElement(childItem, {
          key: i,
          active: activeIndex === i,
          hidden: hiddenIndex === i,
          className: classNames__default["default"]({
            animating: animatingIndex === i
          }),
          style: activeIndex === i ? activeStyle : nextActive() === i ? nextStyle : sideStyle
        });
      }
    });
  }

  return /*#__PURE__*/React.createElement(as, _objectSpread({
    className: classNames__default["default"]("sides", className),
    style: _objectSpread(_objectSpread({}, props.style), styles)
  }, props), itemChildren);
};

ShapeSides.displayName = "ShapeSides";

exports["default"] = ShapeSides;
//# sourceMappingURL=ShapeSides.js.map