@bootstrap-styled/css-utils
Version:
Bootstrap mixins and utilities in javascript for bootstrap-styled.
62 lines (51 loc) • 3.42 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.getTransitionUtilities = getTransitionUtilities;
exports.fade = fade;
exports.collapse = collapse;
exports.getReactTransition = getReactTransition;
exports.default = exports.defaultProps = void 0;
var _parseTransition = _interopRequireDefault(require("@bootstrap-styled/utils/lib/parseTransition"));
var _transition = require("@bootstrap-styled/css-mixins/lib/transition");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var defaultProps = {
'$enable-transitions': true,
'$transition-fade': 'opacity .15s linear',
'$transition-collapse': 'height .35s ease'
};
exports.defaultProps = defaultProps;
function getTransitionUtilities() {
var enableTransitions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultProps['$enable-transitions'];
var transitionFade = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultProps['$transition-fade'];
var transitionCollapse = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : defaultProps['$transition-collapse'];
return "\n ".concat(fade(enableTransitions, transitionFade), "\n ").concat(collapse(enableTransitions, transitionCollapse), "\n ");
}
function fade() {
var enableTransitions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultProps['$enable-transitions'];
var transitionFade = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultProps['$transition-fade'];
return "\n .fade,\n &.fade {\n opacity: 0;\n ".concat((0, _transition.transition)(enableTransitions, transitionFade), "\n \n &.show {\n opacity: 1;\n }\n }\n ");
}
function collapse() {
var enableTransitions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultProps['$enable-transitions'];
var transitionCollapse = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultProps['$transition-collapse'];
return "\n &.collapse, .collapse {\n display: none;\n &.show {\n display: block;\n }\n }\n \n tr&, tr {\n &.collapse.show {\n display: table-row;\n }\n }\n \n tbody&, tbody {\n &.collapse.show {\n display: table-row-group;\n }\n }\n \n &.collapsing, .collapsing {\n position: relative;\n height: 0;\n overflow: hidden;\n ".concat((0, _transition.transition)(enableTransitions, transitionCollapse), "\n }\n ");
} // function for get react transition (could even use filter and transform from mixin transition)
function getReactTransition(enableTransition, transition) {
var transitionList = (0, _parseTransition.default)(transition);
var _transitionList$ = transitionList[0],
property = _transitionList$.property,
duration = _transitionList$.duration,
timingFunction = _transitionList$.timingFunction,
delay = _transitionList$.delay;
return (0, _transition.transition)(enableTransition, "".concat(property, " ").concat(duration, "ms ").concat(timingFunction, " ").concat(delay, "ms"));
}
var _default = {
defaultProps: defaultProps,
getTransitionUtilities: getTransitionUtilities,
getReactTransition: getReactTransition,
fade: fade,
collapse: collapse
};
exports.default = _default;