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

Braineet design system

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 */
import React from 'react';
import { useSpring } from 'react-spring';
import { Transition } from 'react-spring/renderprops.cjs';

// const expIn = t => {
//     return Math.pow(2, 10 * t - 10);
// };
import { jsx as _jsx } from "react/jsx-runtime";
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
//     );
// };

export var Fade = function Fade(_ref) {
  var show = _ref.show,
    _children = _ref.children,
    duration = _ref.duration;
  return /*#__PURE__*/_jsx(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
};
export var None = function None(_ref2) {
  var show = _ref2.show,
    _children2 = _ref2.children;
  return /*#__PURE__*/_jsx(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
};
export var ScaleFade = function ScaleFade(_ref3) {
  var show = _ref3.show,
    _children3 = _ref3.children,
    duration = _ref3.duration;
  return /*#__PURE__*/_jsx(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
};
export var 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 = 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
};
export default {
  Slide: Slide
};