@fluent-windows/core/Transition/Transition.styled.js

React components that inspired by Microsoft's Fluent Design System.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.styles = void 0;

var _createTransition = require("../styles/createTransition");

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var fade = {
  '&.fade-enter': {
    opacity: 0,
    '&-active': {
      opacity: 1
    }
  },
  '&.fade-exit': {
    opacity: 1,
    '&-active': {
      opacity: 0
    }
  }
};
var zoom = {
  '&.zoom-enter': {
    '&-active': {
      transform: 'scale3d(0, 0, 0)'
    },
    '&-done': {
      transform: 'none'
    }
  },
  '&.zoom-exit': {
    '&-active': {
      transform: 'scale3d(0, 0, 0)'
    },
    '&-done': {
      transform: 'scale3d(0, 0, 0)'
    }
  }
};
var slide = {
  '&.slide-enter': {
    transform: 'translateY(100vh)',
    '&-done': {
      transform: 'none'
    }
  },
  '&.slide-exit': {
    transform: 'none',
    '&-active': {
      transform: 'translateY(100vh)'
    },
    '&-done': {
      transform: 'translateY(100vh)'
    }
  }
};

var collapse = function collapse(_ref) {
  var wrapperHeight = _ref.wrapperHeight;
  return {
    '&.collapse-appear': {
      height: 'auto'
    },
    '&.collapse-enter': {
      height: 0,
      '&-active': {
        height: wrapperHeight
      },
      '&-done': {
        height: 'auto'
      }
    },
    '&.collapse-exit': {
      height: wrapperHeight,
      '&-active': {
        height: 0
      }
    }
  };
};

var grow = {
  '&.grow-enter': {
    opacity: 0,
    transform: 'scale(0.75, 0.5625)',
    '&-active': {
      opacity: 1,
      transform: 'scale(1, 1)'
    },
    '&-done': {
      opacity: 1,
      transform: 'none'
    }
  },
  '&.grow-exit': {
    '&-active': {
      opacity: 0,
      transform: 'scale(0.75, 0.5625)'
    },
    '&-done': {
      opacity: 0,
      transform: 'scale(0.75, 0.5625)'
    }
  }
};

var root = function root(_ref2) {
  var type = _ref2.type,
      visible = _ref2.visible,
      wrapperHeight = _ref2.wrapperHeight,
      custom = _ref2.custom;

  switch (type) {
    case 'fade':
      return _objectSpread({
        transition: (0, _createTransition.createBaseTransition)(['opacity', 'visibility'])
      }, visible ? {
        opacity: 1
      } : {
        opacity: 0,
        visibility: 'hidden'
      });

    case 'zoom':
      return _objectSpread({
        transition: (0, _createTransition.createBaseTransition)(['transform', 'visibility'])
      }, visible ? {
        transform: 'none'
      } : {
        transform: 'scale3d(0, 0, 0)',
        visibility: 'hidden'
      });

    case 'slide':
      return _objectSpread({
        transition: (0, _createTransition.createBaseTransition)(['transform', 'visibility'])
      }, visible ? {
        transform: 'none'
      } : {
        transform: 'translateY(100vh)',
        visibility: 'hidden'
      });

    case 'collapse':
      return _objectSpread({
        overflow: 'hidden',
        transition: (0, _createTransition.createBaseTransition)(['height', 'visibility'])
      }, visible ? {
        height: wrapperHeight
      } : {
        height: 0,
        visibility: 'hidden'
      });

    case 'grow':
      return _objectSpread({
        transformOrigin: '0 0 0',
        transition: (0, _createTransition.createBaseTransition)(['opacity', 'transform', 'visibility'])
      }, visible ? {
        opacity: 1,
        transform: 'none'
      } : {
        opacity: 0,
        transform: 'scale(0.75, 0.5625)',
        visibility: 'hidden'
      });

    case 'custom':
      return custom;
  }
};

var styles = {
  root: root,
  fade: fade,
  zoom: zoom,
  slide: slide,
  collapse: collapse,
  grow: grow
};
exports.styles = styles;