@cgi-learning-hub/ui
Version:
@cgi-learning-hub/ui is an open-source React component library that implements UI for HUB's features
364 lines (363 loc) • 12.1 kB
JavaScript
import { _ as D, a as C, T as S } from "./TransitionGroupContext-DbLioz_6.js";
import { P as n } from "./index-Sy88PpwE.js";
import v from "react";
import b from "react-dom";
const N = {
disabled: !1
};
var R = process.env.NODE_ENV !== "production" ? n.oneOfType([n.number, n.shape({
enter: n.number,
exit: n.number,
appear: n.number
}).isRequired]) : null, I = process.env.NODE_ENV !== "production" ? n.oneOfType([n.string, n.shape({
enter: n.string,
exit: n.string,
active: n.string
}), n.shape({
enter: n.string,
enterDone: n.string,
enterActive: n.string,
exit: n.string,
exitDone: n.string,
exitActive: n.string
})]) : null, y = function(a) {
return a.scrollTop;
}, x = "unmounted", f = "exited", c = "entering", h = "entered", g = "exiting", l = /* @__PURE__ */ function(u) {
D(a, u);
function a(r, e) {
var t;
t = u.call(this, r, e) || this;
var i = e, s = i && !i.isMounting ? r.enter : r.appear, p;
return t.appearStatus = null, r.in ? s ? (p = f, t.appearStatus = c) : p = h : r.unmountOnExit || r.mountOnEnter ? p = x : p = f, t.state = {
status: p
}, t.nextCallback = null, t;
}
a.getDerivedStateFromProps = function(e, t) {
var i = e.in;
return i && t.status === x ? {
status: f
} : null;
};
var o = a.prototype;
return o.componentDidMount = function() {
this.updateStatus(!0, this.appearStatus);
}, o.componentDidUpdate = function(e) {
var t = null;
if (e !== this.props) {
var i = this.state.status;
this.props.in ? i !== c && i !== h && (t = c) : (i === c || i === h) && (t = g);
}
this.updateStatus(!1, t);
}, o.componentWillUnmount = function() {
this.cancelNextCallback();
}, o.getTimeouts = function() {
var e = this.props.timeout, t, i, s;
return t = i = s = e, e != null && typeof e != "number" && (t = e.exit, i = e.enter, s = e.appear !== void 0 ? e.appear : i), {
exit: t,
enter: i,
appear: s
};
}, o.updateStatus = function(e, t) {
if (e === void 0 && (e = !1), t !== null)
if (this.cancelNextCallback(), t === c) {
if (this.props.unmountOnExit || this.props.mountOnEnter) {
var i = this.props.nodeRef ? this.props.nodeRef.current : b.findDOMNode(this);
i && y(i);
}
this.performEnter(e);
} else
this.performExit();
else this.props.unmountOnExit && this.state.status === f && this.setState({
status: x
});
}, o.performEnter = function(e) {
var t = this, i = this.props.enter, s = this.context ? this.context.isMounting : e, p = this.props.nodeRef ? [s] : [b.findDOMNode(this), s], d = p[0], m = p[1], T = this.getTimeouts(), O = s ? T.appear : T.enter;
if (!e && !i || N.disabled) {
this.safeSetState({
status: h
}, function() {
t.props.onEntered(d);
});
return;
}
this.props.onEnter(d, m), this.safeSetState({
status: c
}, function() {
t.props.onEntering(d, m), t.onTransitionEnd(O, function() {
t.safeSetState({
status: h
}, function() {
t.props.onEntered(d, m);
});
});
});
}, o.performExit = function() {
var e = this, t = this.props.exit, i = this.getTimeouts(), s = this.props.nodeRef ? void 0 : b.findDOMNode(this);
if (!t || N.disabled) {
this.safeSetState({
status: f
}, function() {
e.props.onExited(s);
});
return;
}
this.props.onExit(s), this.safeSetState({
status: g
}, function() {
e.props.onExiting(s), e.onTransitionEnd(i.exit, function() {
e.safeSetState({
status: f
}, function() {
e.props.onExited(s);
});
});
});
}, o.cancelNextCallback = function() {
this.nextCallback !== null && (this.nextCallback.cancel(), this.nextCallback = null);
}, o.safeSetState = function(e, t) {
t = this.setNextCallback(t), this.setState(e, t);
}, o.setNextCallback = function(e) {
var t = this, i = !0;
return this.nextCallback = function(s) {
i && (i = !1, t.nextCallback = null, e(s));
}, this.nextCallback.cancel = function() {
i = !1;
}, this.nextCallback;
}, o.onTransitionEnd = function(e, t) {
this.setNextCallback(t);
var i = this.props.nodeRef ? this.props.nodeRef.current : b.findDOMNode(this), s = e == null && !this.props.addEndListener;
if (!i || s) {
setTimeout(this.nextCallback, 0);
return;
}
if (this.props.addEndListener) {
var p = this.props.nodeRef ? [this.nextCallback] : [i, this.nextCallback], d = p[0], m = p[1];
this.props.addEndListener(d, m);
}
e != null && setTimeout(this.nextCallback, e);
}, o.render = function() {
var e = this.state.status;
if (e === x)
return null;
var t = this.props, i = t.children;
t.in, t.mountOnEnter, t.unmountOnExit, t.appear, t.enter, t.exit, t.timeout, t.addEndListener, t.onEnter, t.onEntering, t.onEntered, t.onExit, t.onExiting, t.onExited, t.nodeRef;
var s = C(t, ["children", "in", "mountOnEnter", "unmountOnExit", "appear", "enter", "exit", "timeout", "addEndListener", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "nodeRef"]);
return (
// allows for nested Transitions
/* @__PURE__ */ v.createElement(S.Provider, {
value: null
}, typeof i == "function" ? i(e, s) : v.cloneElement(v.Children.only(i), s))
);
}, a;
}(v.Component);
l.contextType = S;
l.propTypes = process.env.NODE_ENV !== "production" ? {
/**
* A React reference to DOM element that need to transition:
* https://stackoverflow.com/a/51127130/4671932
*
* - When `nodeRef` prop is used, `node` is not passed to callback functions
* (e.g. `onEnter`) because user already has direct access to the node.
* - When changing `key` prop of `Transition` in a `TransitionGroup` a new
* `nodeRef` need to be provided to `Transition` with changed `key` prop
* (see
* [test/CSSTransition-test.js](https://github.com/reactjs/react-transition-group/blob/13435f897b3ab71f6e19d724f145596f5910581c/test/CSSTransition-test.js#L362-L437)).
*/
nodeRef: n.shape({
current: typeof Element > "u" ? n.any : function(u, a, o, r, e, t) {
var i = u[a];
return n.instanceOf(i && "ownerDocument" in i ? i.ownerDocument.defaultView.Element : Element)(u, a, o, r, e, t);
}
}),
/**
* A `function` child can be used instead of a React element. This function is
* called with the current transition status (`'entering'`, `'entered'`,
* `'exiting'`, `'exited'`), which can be used to apply context
* specific props to a component.
*
* ```jsx
* <Transition in={this.state.in} timeout={150}>
* {state => (
* <MyComponent className={`fade fade-${state}`} />
* )}
* </Transition>
* ```
*/
children: n.oneOfType([n.func.isRequired, n.element.isRequired]).isRequired,
/**
* Show the component; triggers the enter or exit states
*/
in: n.bool,
/**
* By default the child component is mounted immediately along with
* the parent `Transition` component. If you want to "lazy mount" the component on the
* first `in={true}` you can set `mountOnEnter`. After the first enter transition the component will stay
* mounted, even on "exited", unless you also specify `unmountOnExit`.
*/
mountOnEnter: n.bool,
/**
* By default the child component stays mounted after it reaches the `'exited'` state.
* Set `unmountOnExit` if you'd prefer to unmount the component after it finishes exiting.
*/
unmountOnExit: n.bool,
/**
* By default the child component does not perform the enter transition when
* it first mounts, regardless of the value of `in`. If you want this
* behavior, set both `appear` and `in` to `true`.
*
* > **Note**: there are no special appear states like `appearing`/`appeared`, this prop
* > only adds an additional enter transition. However, in the
* > `<CSSTransition>` component that first enter transition does result in
* > additional `.appear-*` classes, that way you can choose to style it
* > differently.
*/
appear: n.bool,
/**
* Enable or disable enter transitions.
*/
enter: n.bool,
/**
* Enable or disable exit transitions.
*/
exit: n.bool,
/**
* The duration of the transition, in milliseconds.
* Required unless `addEndListener` is provided.
*
* You may specify a single timeout for all transitions:
*
* ```jsx
* timeout={500}
* ```
*
* or individually:
*
* ```jsx
* timeout={{
* appear: 500,
* enter: 300,
* exit: 500,
* }}
* ```
*
* - `appear` defaults to the value of `enter`
* - `enter` defaults to `0`
* - `exit` defaults to `0`
*
* @type {number | { enter?: number, exit?: number, appear?: number }}
*/
timeout: function(a) {
var o = R;
a.addEndListener || (o = o.isRequired);
for (var r = arguments.length, e = new Array(r > 1 ? r - 1 : 0), t = 1; t < r; t++)
e[t - 1] = arguments[t];
return o.apply(void 0, [a].concat(e));
},
/**
* Add a custom transition end trigger. Called with the transitioning
* DOM node and a `done` callback. Allows for more fine grained transition end
* logic. Timeouts are still used as a fallback if provided.
*
* **Note**: when `nodeRef` prop is passed, `node` is not passed.
*
* ```jsx
* addEndListener={(node, done) => {
* // use the css transitionend event to mark the finish of a transition
* node.addEventListener('transitionend', done, false);
* }}
* ```
*/
addEndListener: n.func,
/**
* Callback fired before the "entering" status is applied. An extra parameter
* `isAppearing` is supplied to indicate if the enter stage is occurring on the initial mount
*
* **Note**: when `nodeRef` prop is passed, `node` is not passed.
*
* @type Function(node: HtmlElement, isAppearing: bool) -> void
*/
onEnter: n.func,
/**
* Callback fired after the "entering" status is applied. An extra parameter
* `isAppearing` is supplied to indicate if the enter stage is occurring on the initial mount
*
* **Note**: when `nodeRef` prop is passed, `node` is not passed.
*
* @type Function(node: HtmlElement, isAppearing: bool)
*/
onEntering: n.func,
/**
* Callback fired after the "entered" status is applied. An extra parameter
* `isAppearing` is supplied to indicate if the enter stage is occurring on the initial mount
*
* **Note**: when `nodeRef` prop is passed, `node` is not passed.
*
* @type Function(node: HtmlElement, isAppearing: bool) -> void
*/
onEntered: n.func,
/**
* Callback fired before the "exiting" status is applied.
*
* **Note**: when `nodeRef` prop is passed, `node` is not passed.
*
* @type Function(node: HtmlElement) -> void
*/
onExit: n.func,
/**
* Callback fired after the "exiting" status is applied.
*
* **Note**: when `nodeRef` prop is passed, `node` is not passed.
*
* @type Function(node: HtmlElement) -> void
*/
onExiting: n.func,
/**
* Callback fired after the "exited" status is applied.
*
* **Note**: when `nodeRef` prop is passed, `node` is not passed
*
* @type Function(node: HtmlElement) -> void
*/
onExited: n.func
} : {};
function E() {
}
l.defaultProps = {
in: !1,
mountOnEnter: !1,
unmountOnExit: !1,
appear: !1,
enter: !0,
exit: !0,
onEnter: E,
onEntering: E,
onEntered: E,
onExit: E,
onExiting: E,
onExited: E
};
l.UNMOUNTED = x;
l.EXITED = f;
l.ENTERING = c;
l.ENTERED = h;
l.EXITING = g;
const P = (u) => u.scrollTop;
function U(u, a) {
const {
timeout: o,
easing: r,
style: e = {}
} = u;
return {
duration: e.transitionDuration ?? (typeof o == "number" ? o : o[a.mode] || 0),
easing: e.transitionTimingFunction ?? (typeof r == "object" ? r[a.mode] : r),
delay: e.transitionDelay
};
}
export {
l as T,
I as c,
y as f,
U as g,
P as r
};