@braineet/ui/dist/cjs/components/transition/index.js

Braineet design system

"use strict";

exports.__esModule = true;
exports.default = exports.Slide = exports.ScaleFade = exports.None = exports.Fade = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactSpring = require("react-spring");
var _renderprops = require("react-spring/renderprops.cjs");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } /* eslint-disable no-param-reassign */ /* eslint-disable no-cond-assign */ /* eslint-disable no-return-assign */ /* eslint-disable no-restricted-properties */ // const expIn = t => {
//     return Math.pow(2, 10 * t - 10);
// };
var expOut = function expOut(t) {
  return 1 - Math.pow(2, -10 * t);
};

// const expInOut = t => {
//     return (
//         ((t *= 2) <= 1
//             ? Math.pow(2, 10 * t - 10)
//             : 2 - Math.pow(2, 10 - 10 * t)) / 2
//     );
// };

var Fade = exports.Fade = function Fade(_ref) {
  var show = _ref.show,
    _children = _ref.children,
    duration = _ref.duration;
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_renderprops.Transition, {
    items: show,
    from: {
      opacity: 0
    },
    enter: {
      opacity: 1
    },
    leave: {
      opacity: 0
    },
    config: {
      duration: duration,
      easing: expOut
    },
    children: function children(isShow) {
      return isShow && function (styles) {
        return _children({
          willChange: 'opacity',
          opacity: styles.opacity
        });
      };
    }
  });
};
Fade.defaultProps = {
  show: false,
  duration: 250
};
var None = exports.None = function None(_ref2) {
  var show = _ref2.show,
    _children2 = _ref2.children;
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_renderprops.Transition, {
    items: show,
    from: {
      display: 'none'
    },
    enter: {
      display: 'block'
    },
    leave: {
      display: 'none'
    },
    config: {
      duration: 0
    },
    children: function children(isShow) {
      return isShow && function (styles) {
        return _children2({
          willChange: 'display',
          display: styles.display
        });
      };
    }
  });
};
None.defaultProps = {
  show: false
};
var ScaleFade = exports.ScaleFade = function ScaleFade(_ref3) {
  var show = _ref3.show,
    _children3 = _ref3.children,
    duration = _ref3.duration;
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_renderprops.Transition, {
    items: show,
    from: {
      opacity: 0,
      transform: 'scale(0.9)'
    },
    enter: {
      opacity: 1,
      transform: 'scale(1)'
    },
    leave: {
      opacity: 0,
      transform: 'scale(0.9)'
    },
    config: {
      duration: duration,
      easing: expOut
    },
    children: function children(isShow) {
      return isShow && function (styles) {
        return _children3(_extends({
          willChange: 'opacity, transform'
        }, styles));
      };
    }
  });
};
ScaleFade.defaultProps = {
  show: false,
  duration: 150
};
var Slide = exports.Slide = function Slide(_ref4) {
  var isOpen = _ref4.isOpen,
    children = _ref4.children,
    duration = _ref4.duration,
    placement = _ref4.placement,
    finalHeight = _ref4.finalHeight,
    width = _ref4.width;
  var placements = {
    bottom: {
      maxWidth: '100vw',
      height: isOpen ? finalHeight : '0px',
      bottom: 0,
      left: 0,
      right: 0
    },
    top: {
      maxWidth: '100vw',
      height: isOpen ? finalHeight : '0px',
      top: 0,
      left: 0,
      right: 0
    },
    left: {
      width: isOpen ? width : '0px',
      height: finalHeight,
      left: 0,
      top: 0
    },
    right: {
      width: isOpen ? width : '0px',
      right: 0,
      top: 0,
      height: finalHeight
    }
  };
  var stylesProps = (0, _reactSpring.useSpring)(_extends({}, placements[placement], {
    config: {
      mass: 1,
      tension: 500,
      friction: 26,
      duration: duration
    }
  }));
  return children({
    stylesProps: stylesProps
  });
};
Slide.defaultProps = {
  isOpen: false,
  duration: 100,
  finalHeight: 'auto',
  width: null
};
var _default = exports.default = {
  Slide: Slide
};