@talend/react-bootstrap
Version:
Bootstrap 3 components built with React
190 lines (187 loc) • 7.73 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _classnames = _interopRequireDefault(require("classnames"));
var _style = _interopRequireDefault(require("dom-helpers/style"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _Transition = _interopRequireWildcard(require("react-transition-group/Transition"));
var _capitalize = _interopRequireDefault(require("./utils/capitalize"));
var _createChainedFunction = _interopRequireDefault(require("./utils/createChainedFunction"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } /* eslint-disable arrow-parens */
const MARGINS = {
height: ['marginTop', 'marginBottom'],
width: ['marginLeft', 'marginRight']
};
// reading a dimension prop will cause the browser to recalculate,
// which will let our animations work
function triggerBrowserReflow(node) {
// eslint-disable-next-line mdx/no-unused-expressions
node.offsetHeight;
}
function getDimensionValue(dimension, elem) {
let value = elem[`offset${(0, _capitalize.default)(dimension)}`];
let margins = MARGINS[dimension];
return value + parseInt((0, _style.default)(elem, margins[0]), 10) + parseInt((0, _style.default)(elem, margins[1]), 10);
}
const collapseStyles = {
[_Transition.EXITED]: 'collapse',
[_Transition.EXITING]: 'collapsing',
[_Transition.ENTERING]: 'collapsing',
[_Transition.ENTERED]: 'collapse in'
};
const propTypes = {
className: _propTypes.default.string,
children: _propTypes.default.node,
/**
* Show the component; triggers the expand or collapse animation
*/
in: _propTypes.default.bool,
/**
* Wait until the first "enter" transition to mount the component (add it to the DOM)
*/
mountOnEnter: _propTypes.default.bool,
/**
* Unmount the component (remove it from the DOM) when it is collapsed
*/
unmountOnExit: _propTypes.default.bool,
/**
* Run the expand animation when the component mounts, if it is initially
* shown
*/
appear: _propTypes.default.bool,
/**
* Duration of the collapse animation in milliseconds, to ensure that
* finishing callbacks are fired even if the original browser transition end
* events are canceled
*/
timeout: _propTypes.default.number,
/**
* Callback fired before the component expands
*/
onEnter: _propTypes.default.func,
/**
* Callback fired after the component starts to expand
*/
onEntering: _propTypes.default.func,
/**
* Callback fired after the component has expanded
*/
onEntered: _propTypes.default.func,
/**
* Callback fired before the component collapses
*/
onExit: _propTypes.default.func,
/**
* Callback fired after the component starts to collapse
*/
onExiting: _propTypes.default.func,
/**
* Callback fired after the component has collapsed
*/
onExited: _propTypes.default.func,
/**
* The dimension used when collapsing, or a function that returns the
* dimension
*
* _Note: Bootstrap only partially supports 'width'!
* You will need to supply your own CSS animation for the `.width` CSS class._
*/
dimension: _propTypes.default.oneOfType([_propTypes.default.oneOf(['height', 'width']), _propTypes.default.func]),
/**
* Function that returns the height or width of the animating DOM node
*
* Allows for providing some custom logic for how much the Collapse component
* should animate in its specified dimension. Called with the current
* dimension prop value and the DOM node.
*/
getDimensionValue: _propTypes.default.func,
/**
* ARIA role of collapsible element
*/
role: _propTypes.default.string
};
const defaultProps = {
in: false,
timeout: 300,
mountOnEnter: false,
unmountOnExit: false,
appear: false,
dimension: 'height',
getDimensionValue
};
class Collapse extends _react.default.Component {
constructor(...args) {
super(...args);
/* -- Expanding -- */
_defineProperty(this, "handleEnter", elem => {
elem.style[this.getDimension()] = '0';
});
_defineProperty(this, "handleEntering", elem => {
const dimension = this.getDimension();
elem.style[dimension] = this._getScrollDimensionValue(elem, dimension);
});
_defineProperty(this, "handleEntered", elem => {
elem.style[this.getDimension()] = null;
});
/* -- Collapsing -- */
_defineProperty(this, "handleExit", elem => {
const dimension = this.getDimension();
elem.style[dimension] = `${this.props.getDimensionValue(dimension, elem)}px`;
triggerBrowserReflow(elem);
});
_defineProperty(this, "handleExiting", elem => {
elem.style[this.getDimension()] = '0';
});
}
getDimension() {
return typeof this.props.dimension === 'function' ? this.props.dimension() : this.props.dimension;
}
// for testing
_getScrollDimensionValue(elem, dimension) {
return `${elem[`scroll${(0, _capitalize.default)(dimension)}`]}px`;
}
render() {
const {
onEnter,
onEntering,
onEntered,
onExit,
onExiting,
className,
children,
...props
} = this.props;
delete props.dimension;
delete props.getDimensionValue;
const handleEnter = (0, _createChainedFunction.default)(this.handleEnter, onEnter);
const handleEntering = (0, _createChainedFunction.default)(this.handleEntering, onEntering);
const handleEntered = (0, _createChainedFunction.default)(this.handleEntered, onEntered);
const handleExit = (0, _createChainedFunction.default)(this.handleExit, onExit);
const handleExiting = (0, _createChainedFunction.default)(this.handleExiting, onExiting);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Transition.default, {
...props,
"aria-expanded": props.role ? props.in : null,
onEnter: handleEnter,
onEntering: handleEntering,
onEntered: handleEntered,
onExit: handleExit,
onExiting: handleExiting,
children: (state, innerProps) => /*#__PURE__*/_react.default.cloneElement(children, {
...innerProps,
className: (0, _classnames.default)(className, children.props.className, collapseStyles[state], this.getDimension() === 'width' && 'width')
})
});
}
}
Collapse.propTypes = propTypes;
Collapse.defaultProps = defaultProps;
var _default = exports.default = Collapse;
//# sourceMappingURL=Collapse.js.map