@lanaco/lnc-react-ui
Version:
React component library
975 lines (973 loc) • 33 kB
JavaScript
import { jsx as v, jsxs as _ } from "react/jsx-runtime";
import g, { isValidElement as R, cloneElement as w, Children as le, useState as M, createRef as ue, createElement as X } from "react";
import { s as x } from "./emotion-styled.browser.esm-DfbrHHed.js";
import ce from "./Chip.js";
import { k as de } from "./emotion-react.browser.esm-DUVZ5oEL.js";
import { useTheme as pe } from "./ThemeProvider.js";
import { _ as L } from "./objectWithoutPropertiesLoose-DhwSMsjf.js";
import { _ as V } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
import { _ as fe, a as me } from "./setPrototypeOf-CttqfWo1.js";
import { P as c } from "./index-CblbdqjE.js";
import { R as k } from "./index-B2yaYXE2.js";
const he = de`
from {
opacity: 0;
}
to {
opacity: 1;
}
`, ve = x.div`
@media (prefers-reduced-motion: no-preference) {
animation-name: ${he};
animation-fill-mode: backwards;
}
`, Ee = ({ duration: e = 300, delay: o = 0, children: l, ...n }) => /* @__PURE__ */ v(
ve,
{
...n,
style: {
...n.style || {},
animationDuration: e + "ms",
animationDelay: o + "ms"
},
children: l
}
);
function F(e, o) {
e.prototype = Object.create(o.prototype), e.prototype.constructor = e, fe(e, o);
}
function ge(e, o) {
return e.classList ? !!o && e.classList.contains(o) : (" " + (e.className.baseVal || e.className) + " ").indexOf(" " + o + " ") !== -1;
}
function xe(e, o) {
e.classList ? e.classList.add(o) : ge(e, o) || (typeof e.className == "string" ? e.className = e.className + " " + o : e.setAttribute("class", (e.className && e.className.baseVal || "") + " " + o));
}
function H(e, o) {
return e.replace(new RegExp("(^|\\s)" + o + "(?:\\s|$)", "g"), "$1").replace(/\s+/g, " ").replace(/^\s*|\s*$/g, "");
}
function Ce(e, o) {
e.classList ? e.classList.remove(o) : typeof e.className == "string" ? e.className = H(e.className, o) : e.setAttribute("class", H(e.className && e.className.baseVal || "", o));
}
const J = {
disabled: !1
};
var be = process.env.NODE_ENV !== "production" ? c.oneOfType([c.number, c.shape({
enter: c.number,
exit: c.number,
appear: c.number
}).isRequired]) : null, Ne = process.env.NODE_ENV !== "production" ? c.oneOfType([c.string, c.shape({
enter: c.string,
exit: c.string,
active: c.string
}), c.shape({
enter: c.string,
enterDone: c.string,
enterActive: c.string,
exit: c.string,
exitDone: c.string,
exitActive: c.string
})]) : null;
const I = g.createContext(null);
var Q = function(o) {
return o.scrollTop;
}, O = "unmounted", N = "exited", y = "entering", D = "entered", P = "exiting", C = /* @__PURE__ */ function(e) {
F(o, e);
function o(n, r) {
var t;
t = e.call(this, n, r) || this;
var i = r, a = i && !i.isMounting ? n.enter : n.appear, s;
return t.appearStatus = null, n.in ? a ? (s = N, t.appearStatus = y) : s = D : n.unmountOnExit || n.mountOnEnter ? s = O : s = N, t.state = {
status: s
}, t.nextCallback = null, t;
}
o.getDerivedStateFromProps = function(r, t) {
var i = r.in;
return i && t.status === O ? {
status: N
} : null;
};
var l = o.prototype;
return l.componentDidMount = function() {
this.updateStatus(!0, this.appearStatus);
}, l.componentDidUpdate = function(r) {
var t = null;
if (r !== this.props) {
var i = this.state.status;
this.props.in ? i !== y && i !== D && (t = y) : (i === y || i === D) && (t = P);
}
this.updateStatus(!1, t);
}, l.componentWillUnmount = function() {
this.cancelNextCallback();
}, l.getTimeouts = function() {
var r = this.props.timeout, t, i, a;
return t = i = a = r, r != null && typeof r != "number" && (t = r.exit, i = r.enter, a = r.appear !== void 0 ? r.appear : i), {
exit: t,
enter: i,
appear: a
};
}, l.updateStatus = function(r, t) {
if (r === void 0 && (r = !1), t !== null)
if (this.cancelNextCallback(), t === y) {
if (this.props.unmountOnExit || this.props.mountOnEnter) {
var i = this.props.nodeRef ? this.props.nodeRef.current : k.findDOMNode(this);
i && Q(i);
}
this.performEnter(r);
} else
this.performExit();
else this.props.unmountOnExit && this.state.status === N && this.setState({
status: O
});
}, l.performEnter = function(r) {
var t = this, i = this.props.enter, a = this.context ? this.context.isMounting : r, s = this.props.nodeRef ? [a] : [k.findDOMNode(this), a], u = s[0], p = s[1], m = this.getTimeouts(), h = a ? m.appear : m.enter;
if (!r && !i || J.disabled) {
this.safeSetState({
status: D
}, function() {
t.props.onEntered(u);
});
return;
}
this.props.onEnter(u, p), this.safeSetState({
status: y
}, function() {
t.props.onEntering(u, p), t.onTransitionEnd(h, function() {
t.safeSetState({
status: D
}, function() {
t.props.onEntered(u, p);
});
});
});
}, l.performExit = function() {
var r = this, t = this.props.exit, i = this.getTimeouts(), a = this.props.nodeRef ? void 0 : k.findDOMNode(this);
if (!t || J.disabled) {
this.safeSetState({
status: N
}, function() {
r.props.onExited(a);
});
return;
}
this.props.onExit(a), this.safeSetState({
status: P
}, function() {
r.props.onExiting(a), r.onTransitionEnd(i.exit, function() {
r.safeSetState({
status: N
}, function() {
r.props.onExited(a);
});
});
});
}, l.cancelNextCallback = function() {
this.nextCallback !== null && (this.nextCallback.cancel(), this.nextCallback = null);
}, l.safeSetState = function(r, t) {
t = this.setNextCallback(t), this.setState(r, t);
}, l.setNextCallback = function(r) {
var t = this, i = !0;
return this.nextCallback = function(a) {
i && (i = !1, t.nextCallback = null, r(a));
}, this.nextCallback.cancel = function() {
i = !1;
}, this.nextCallback;
}, l.onTransitionEnd = function(r, t) {
this.setNextCallback(t);
var i = this.props.nodeRef ? this.props.nodeRef.current : k.findDOMNode(this), a = r == null && !this.props.addEndListener;
if (!i || a) {
setTimeout(this.nextCallback, 0);
return;
}
if (this.props.addEndListener) {
var s = this.props.nodeRef ? [this.nextCallback] : [i, this.nextCallback], u = s[0], p = s[1];
this.props.addEndListener(u, p);
}
r != null && setTimeout(this.nextCallback, r);
}, l.render = function() {
var r = this.state.status;
if (r === O)
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 a = L(t, ["children", "in", "mountOnEnter", "unmountOnExit", "appear", "enter", "exit", "timeout", "addEndListener", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "nodeRef"]);
return (
// allows for nested Transitions
/* @__PURE__ */ g.createElement(I.Provider, {
value: null
}, typeof i == "function" ? i(r, a) : g.cloneElement(g.Children.only(i), a))
);
}, o;
}(g.Component);
C.contextType = I;
C.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: c.shape({
current: typeof Element > "u" ? c.any : function(e, o, l, n, r, t) {
var i = e[o];
return c.instanceOf(i && "ownerDocument" in i ? i.ownerDocument.defaultView.Element : Element)(e, o, l, n, r, 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: c.oneOfType([c.func.isRequired, c.element.isRequired]).isRequired,
/**
* Show the component; triggers the enter or exit states
*/
in: c.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: c.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: c.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: c.bool,
/**
* Enable or disable enter transitions.
*/
enter: c.bool,
/**
* Enable or disable exit transitions.
*/
exit: c.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(o) {
var l = be;
o.addEndListener || (l = l.isRequired);
for (var n = arguments.length, r = new Array(n > 1 ? n - 1 : 0), t = 1; t < n; t++)
r[t - 1] = arguments[t];
return l.apply(void 0, [o].concat(r));
},
/**
* 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: c.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: c.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: c.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: c.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: c.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: c.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: c.func
} : {};
function T() {
}
C.defaultProps = {
in: !1,
mountOnEnter: !1,
unmountOnExit: !1,
appear: !1,
enter: !0,
exit: !0,
onEnter: T,
onEntering: T,
onEntered: T,
onExit: T,
onExiting: T,
onExited: T
};
C.UNMOUNTED = O;
C.EXITED = N;
C.ENTERING = y;
C.ENTERED = D;
C.EXITING = P;
var ye = function(o, l) {
return o && l && l.split(" ").forEach(function(n) {
return xe(o, n);
});
}, A = function(o, l) {
return o && l && l.split(" ").forEach(function(n) {
return Ce(o, n);
});
}, U = /* @__PURE__ */ function(e) {
F(o, e);
function o() {
for (var n, r = arguments.length, t = new Array(r), i = 0; i < r; i++)
t[i] = arguments[i];
return n = e.call.apply(e, [this].concat(t)) || this, n.appliedClasses = {
appear: {},
enter: {},
exit: {}
}, n.onEnter = function(a, s) {
var u = n.resolveArguments(a, s), p = u[0], m = u[1];
n.removeClasses(p, "exit"), n.addClass(p, m ? "appear" : "enter", "base"), n.props.onEnter && n.props.onEnter(a, s);
}, n.onEntering = function(a, s) {
var u = n.resolveArguments(a, s), p = u[0], m = u[1], h = m ? "appear" : "enter";
n.addClass(p, h, "active"), n.props.onEntering && n.props.onEntering(a, s);
}, n.onEntered = function(a, s) {
var u = n.resolveArguments(a, s), p = u[0], m = u[1], h = m ? "appear" : "enter";
n.removeClasses(p, h), n.addClass(p, h, "done"), n.props.onEntered && n.props.onEntered(a, s);
}, n.onExit = function(a) {
var s = n.resolveArguments(a), u = s[0];
n.removeClasses(u, "appear"), n.removeClasses(u, "enter"), n.addClass(u, "exit", "base"), n.props.onExit && n.props.onExit(a);
}, n.onExiting = function(a) {
var s = n.resolveArguments(a), u = s[0];
n.addClass(u, "exit", "active"), n.props.onExiting && n.props.onExiting(a);
}, n.onExited = function(a) {
var s = n.resolveArguments(a), u = s[0];
n.removeClasses(u, "exit"), n.addClass(u, "exit", "done"), n.props.onExited && n.props.onExited(a);
}, n.resolveArguments = function(a, s) {
return n.props.nodeRef ? [n.props.nodeRef.current, a] : [a, s];
}, n.getClassNames = function(a) {
var s = n.props.classNames, u = typeof s == "string", p = u && s ? s + "-" : "", m = u ? "" + p + a : s[a], h = u ? m + "-active" : s[a + "Active"], b = u ? m + "-done" : s[a + "Done"];
return {
baseClassName: m,
activeClassName: h,
doneClassName: b
};
}, n;
}
var l = o.prototype;
return l.addClass = function(r, t, i) {
var a = this.getClassNames(t)[i + "ClassName"], s = this.getClassNames("enter"), u = s.doneClassName;
t === "appear" && i === "done" && u && (a += " " + u), i === "active" && r && Q(r), a && (this.appliedClasses[t][i] = a, ye(r, a));
}, l.removeClasses = function(r, t) {
var i = this.appliedClasses[t], a = i.base, s = i.active, u = i.done;
this.appliedClasses[t] = {}, a && A(r, a), s && A(r, s), u && A(r, u);
}, l.render = function() {
var r = this.props;
r.classNames;
var t = L(r, ["classNames"]);
return /* @__PURE__ */ g.createElement(C, V({}, t, {
onEnter: this.onEnter,
onEntered: this.onEntered,
onEntering: this.onEntering,
onExit: this.onExit,
onExiting: this.onExiting,
onExited: this.onExited
}));
}, o;
}(g.Component);
U.defaultProps = {
classNames: ""
};
U.propTypes = process.env.NODE_ENV !== "production" ? V({}, C.propTypes, {
/**
* The animation classNames applied to the component as it appears, enters,
* exits or has finished the transition. A single name can be provided, which
* will be suffixed for each stage, e.g. `classNames="fade"` applies:
*
* - `fade-appear`, `fade-appear-active`, `fade-appear-done`
* - `fade-enter`, `fade-enter-active`, `fade-enter-done`
* - `fade-exit`, `fade-exit-active`, `fade-exit-done`
*
* A few details to note about how these classes are applied:
*
* 1. They are _joined_ with the ones that are already defined on the child
* component, so if you want to add some base styles, you can use
* `className` without worrying that it will be overridden.
*
* 2. If the transition component mounts with `in={false}`, no classes are
* applied yet. You might be expecting `*-exit-done`, but if you think
* about it, a component cannot finish exiting if it hasn't entered yet.
*
* 2. `fade-appear-done` and `fade-enter-done` will _both_ be applied. This
* allows you to define different behavior for when appearing is done and
* when regular entering is done, using selectors like
* `.fade-enter-done:not(.fade-appear-done)`. For example, you could apply
* an epic entrance animation when element first appears in the DOM using
* [Animate.css](https://daneden.github.io/animate.css/). Otherwise you can
* simply use `fade-enter-done` for defining both cases.
*
* Each individual classNames can also be specified independently like:
*
* ```js
* classNames={{
* appear: 'my-appear',
* appearActive: 'my-active-appear',
* appearDone: 'my-done-appear',
* enter: 'my-enter',
* enterActive: 'my-active-enter',
* enterDone: 'my-done-enter',
* exit: 'my-exit',
* exitActive: 'my-active-exit',
* exitDone: 'my-done-exit',
* }}
* ```
*
* If you want to set these classes using CSS Modules:
*
* ```js
* import styles from './styles.css';
* ```
*
* you might want to use camelCase in your CSS file, that way could simply
* spread them instead of listing them one by one:
*
* ```js
* classNames={{ ...styles }}
* ```
*
* @type {string | {
* appear?: string,
* appearActive?: string,
* appearDone?: string,
* enter?: string,
* enterActive?: string,
* enterDone?: string,
* exit?: string,
* exitActive?: string,
* exitDone?: string,
* }}
*/
classNames: Ne,
/**
* A `<Transition>` callback fired immediately after the 'enter' or 'appear' class is
* applied.
*
* **Note**: when `nodeRef` prop is passed, `node` is not passed.
*
* @type Function(node: HtmlElement, isAppearing: bool)
*/
onEnter: c.func,
/**
* A `<Transition>` callback fired immediately after the 'enter-active' or
* 'appear-active' class is applied.
*
* **Note**: when `nodeRef` prop is passed, `node` is not passed.
*
* @type Function(node: HtmlElement, isAppearing: bool)
*/
onEntering: c.func,
/**
* A `<Transition>` callback fired immediately after the 'enter' or
* 'appear' classes are **removed** and the `done` class is added to the DOM node.
*
* **Note**: when `nodeRef` prop is passed, `node` is not passed.
*
* @type Function(node: HtmlElement, isAppearing: bool)
*/
onEntered: c.func,
/**
* A `<Transition>` callback fired immediately after the 'exit' class is
* applied.
*
* **Note**: when `nodeRef` prop is passed, `node` is not passed
*
* @type Function(node: HtmlElement)
*/
onExit: c.func,
/**
* A `<Transition>` callback fired immediately after the 'exit-active' is applied.
*
* **Note**: when `nodeRef` prop is passed, `node` is not passed
*
* @type Function(node: HtmlElement)
*/
onExiting: c.func,
/**
* A `<Transition>` callback fired immediately after the 'exit' classes
* are **removed** and the `exit-done` class is added to the DOM node.
*
* **Note**: when `nodeRef` prop is passed, `node` is not passed
*
* @type Function(node: HtmlElement)
*/
onExited: c.func
}) : {};
function G(e, o) {
var l = function(t) {
return o && R(t) ? o(t) : t;
}, n = /* @__PURE__ */ Object.create(null);
return e && le.map(e, function(r) {
return r;
}).forEach(function(r) {
n[r.key] = l(r);
}), n;
}
function Se(e, o) {
e = e || {}, o = o || {};
function l(p) {
return p in o ? o[p] : e[p];
}
var n = /* @__PURE__ */ Object.create(null), r = [];
for (var t in e)
t in o ? r.length && (n[t] = r, r = []) : r.push(t);
var i, a = {};
for (var s in o) {
if (n[s])
for (i = 0; i < n[s].length; i++) {
var u = n[s][i];
a[n[s][i]] = l(u);
}
a[s] = l(s);
}
for (i = 0; i < r.length; i++)
a[r[i]] = l(r[i]);
return a;
}
function S(e, o, l) {
return l[o] != null ? l[o] : e.props[o];
}
function Te(e, o) {
return G(e.children, function(l) {
return w(l, {
onExited: o.bind(null, l),
in: !0,
appear: S(l, "appear", e),
enter: S(l, "enter", e),
exit: S(l, "exit", e)
});
});
}
function De(e, o, l) {
var n = G(e.children), r = Se(o, n);
return Object.keys(r).forEach(function(t) {
var i = r[t];
if (R(i)) {
var a = t in o, s = t in n, u = o[t], p = R(u) && !u.props.in;
s && (!a || p) ? r[t] = w(i, {
onExited: l.bind(null, i),
in: !0,
exit: S(i, "exit", e),
enter: S(i, "enter", e)
}) : !s && a && !p ? r[t] = w(i, {
in: !1
}) : s && a && R(u) && (r[t] = w(i, {
onExited: l.bind(null, i),
in: u.props.in,
exit: S(i, "exit", e),
enter: S(i, "enter", e)
}));
}
}), r;
}
var Oe = Object.values || function(e) {
return Object.keys(e).map(function(o) {
return e[o];
});
}, $e = {
component: "div",
childFactory: function(o) {
return o;
}
}, j = /* @__PURE__ */ function(e) {
F(o, e);
function o(n, r) {
var t;
t = e.call(this, n, r) || this;
var i = t.handleExited.bind(me(t));
return t.state = {
contextValue: {
isMounting: !0
},
handleExited: i,
firstRender: !0
}, t;
}
var l = o.prototype;
return l.componentDidMount = function() {
this.mounted = !0, this.setState({
contextValue: {
isMounting: !1
}
});
}, l.componentWillUnmount = function() {
this.mounted = !1;
}, o.getDerivedStateFromProps = function(r, t) {
var i = t.children, a = t.handleExited, s = t.firstRender;
return {
children: s ? Te(r, a) : De(r, i, a),
firstRender: !1
};
}, l.handleExited = function(r, t) {
var i = G(this.props.children);
r.key in i || (r.props.onExited && r.props.onExited(t), this.mounted && this.setState(function(a) {
var s = V({}, a.children);
return delete s[r.key], {
children: s
};
}));
}, l.render = function() {
var r = this.props, t = r.component, i = r.childFactory, a = L(r, ["component", "childFactory"]), s = this.state.contextValue, u = Oe(this.state.children).map(i);
return delete a.appear, delete a.enter, delete a.exit, t === null ? /* @__PURE__ */ g.createElement(I.Provider, {
value: s
}, u) : /* @__PURE__ */ g.createElement(I.Provider, {
value: s
}, /* @__PURE__ */ g.createElement(t, a, u));
}, o;
}(g.Component);
j.propTypes = process.env.NODE_ENV !== "production" ? {
/**
* `<TransitionGroup>` renders a `<div>` by default. You can change this
* behavior by providing a `component` prop.
* If you use React v16+ and would like to avoid a wrapping `<div>` element
* you can pass in `component={null}`. This is useful if the wrapping div
* borks your css styles.
*/
component: c.any,
/**
* A set of `<Transition>` components, that are toggled `in` and out as they
* leave. the `<TransitionGroup>` will inject specific transition props, so
* remember to spread them through if you are wrapping the `<Transition>` as
* with our `<Fade>` example.
*
* While this component is meant for multiple `Transition` or `CSSTransition`
* children, sometimes you may want to have a single transition child with
* content that you want to be transitioned out and in when you change it
* (e.g. routes, images etc.) In that case you can change the `key` prop of
* the transition child as you change its content, this will cause
* `TransitionGroup` to transition the child out and back in.
*/
children: c.node,
/**
* A convenience prop that enables or disables appear animations
* for all children. Note that specifying this will override any defaults set
* on individual children Transitions.
*/
appear: c.bool,
/**
* A convenience prop that enables or disables enter animations
* for all children. Note that specifying this will override any defaults set
* on individual children Transitions.
*/
enter: c.bool,
/**
* A convenience prop that enables or disables exit animations
* for all children. Note that specifying this will override any defaults set
* on individual children Transitions.
*/
exit: c.bool,
/**
* You may need to apply reactive updates to a child as it is exiting.
* This is generally done by using `cloneElement` however in the case of an exiting
* child the element has already been removed and not accessible to the consumer.
*
* If you do need to update a child as it leaves you can provide a `childFactory`
* to wrap every child, even the ones that are leaving.
*
* @type Function(child: ReactElement) -> ReactElement
*/
childFactory: c.func
} : {};
j.defaultProps = $e;
const Y = (e) => {
if (e.size === "small") return e.theme.typography.medium.fontSize;
if (e.size === "medium") return e.theme.typography.large.fontSize;
if (e.size === "large") return "1.3125rem";
}, ke = (e) => {
if (e === "small") return "0.40625rem 0.375rem";
if (e === "medium") return "0.46875rem 0.375rem";
if (e === "large") return "0.53125rem 0.375rem";
}, Z = (e) => {
if (e === "small") return "0.625rem 0.5rem 0.375rem 0.5rem";
if (e === "medium") return "0.71875rem 0.5625rem 0.375rem 0.5625rem";
if (e === "large") return "0.78125rem 0.625rem 0.375rem 0.625rem";
}, Re = x.div`
display: inline-block;
position: relative;
box-sizing: border-box;
border: 0.09375rem solid #bfbfbf;
background-color: white;
border-radius: 0.1875rem;
width: 100%;
transition: all 250ms ease;
`, we = x.div`
padding: 0.15rem;
transition: all 250ms ease;
display: inline-block;
`, Ie = x.div`
display: inline-block;
margin: 0.125rem;
flex-grow: 1;
transition: all 250ms ease;
width: fit-content;
& > div {
width: 100%;
}
`, ze = x.div`
display: inline-block;
box-sizing: border-box;
margin: 0.125rem;
margin-left: 0.25rem;
flex-grow: 1;
transition: all 250ms ease;
`, _e = x.input`
width: 100%;
transition: all 250ms ease;
text-decoration: none;
-webkit-appearance: none;
-moz-appearance: none;
box-sizing: border-box;
outline: none;
border: none;
padding: ${(e) => ke(e.size)};
background-color: transparent;
font-family: ${(e) => e.theme.typography.fontFamily};
font-size: ${(e) => e.theme.typography[e.size].fontSize};
color: ${(e) => e.theme.palette[e.color].textDark};
border-radius: 0.1875rem;
`, Me = x.div`
display: flex;
width: 100%;
`, Ae = x.div`
padding: ${(e) => Z(e.size)};
color: ${(e) => e.disabled ? e.theme.palette.gray[800] : e.theme.palette[e.color].main};
font-size: ${(e) => Y(e)};
background-color: whitesmoke;
transition: all 250ms ease;
`, Pe = x.div`
padding: ${(e) => Z(e.size)};
color: ${(e) => e.disabled ? e.theme.palette.gray[800] : e.theme.palette[e.color].main};
font-size: ${(e) => Y(e)};
background-color: whitesmoke;
transition: all 250ms ease;
cursor: ${(e) => e.disabled === !0 ? "default" : "pointer"};
margin-right: 0;
margin-left: auto;
`, Le = x.div`
position: absolute;
background-color: white;
z-index: 1;
margin-top: 0.25rem;
padding: 0.1875rem;
width: calc(100% - 0.625rem);
border-radius: 0.15625rem;
box-shadow: 0 0 0.375rem #bebebe;
border: 0.125rem solid ${(e) => e.theme.palette[e.color].main};
display: flex;
flex-direction: column;
transition: all 250ms ease;
`, Ve = x.div`
font-family: ${(e) => e.theme.typography.fontFamily};
font-size: ${(e) => e.theme.typography[e.size].fontSize};
padding: 0.375rem;
cursor: pointer;
background-color: ${(e) => e.hover ? "whitesmoke" : "inherit"};
color: ${(e) => e.hover ? e.theme.palette[e.color].main : "inherit"};
&:hover {
background-color: whitesmoke;
color: ${(e) => e.theme.palette[e.color].main};
}
`, Fe = (e) => {
const { items: o, suggestions: l, onChange: n, id: r, disabled: t, className: i, size: a, color: s } = e, [u, p] = M(""), [m, h] = M(!1), [b, $] = M(0);
let W = ue();
const { theme: K } = pe();
let E = { size: a, color: s, theme: K };
const ee = () => ("10000000-1000-4000-8000" + -1e11).replace(
/[018]/g,
(d) => (d ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> d / 4).toString(16)
), te = (d) => {
d.keyCode === 27 && W.current.blur(), (d.keyCode === 38 || d.keyCode === 40) && d.preventDefault(), d.keyCode === 38 && b > 0 && $(b - 1), d.keyCode === 40 && b < l.length - 1 && $(b + 1), d.key === "Enter" && l.length > 0 && u && u.length > 0 && B(l[b]), d.key === "Backspace" && o.length > 0 && u === "" && q(o.length - 1);
}, B = (d) => {
ie({
id: ee(),
field: d.field,
description: d.description,
value: u,
active: !0,
dataType: d.dataType,
operation: d.operation,
operationDescription: d.operationDescription
}), p(""), h(!1), $(0);
}, ne = () => {
h(!1);
}, re = (d) => {
h(!0), $(0), p(d.target.value);
}, q = (d) => {
let f = [...o].find((se, z) => z !== d);
n(
r,
[...o].filter((se, z) => z !== d),
f
);
}, ie = (d) => {
n(r, [...o, d], d);
}, oe = (d) => {
let f = [...o];
f[d] = { ...f[d], active: !f[d].active }, n(r, f, f[d]);
}, ae = () => {
if (m)
return /* @__PURE__ */ v(Ee, { children: /* @__PURE__ */ v(Le, { ...E, children: l.map((d, f) => /* @__PURE__ */ X(
Ve,
{
...E,
key: f,
onMouseDown: () => B(d),
hover: b === f
},
`${d.description} - ${d.operationDescription}`
)) }) });
};
return /* @__PURE__ */ _(Re, { className: i, ...E, children: [
/* @__PURE__ */ _(Me, { ...E, children: [
/* @__PURE__ */ v(Ae, { ...E, disabled: t, children: /* @__PURE__ */ v("i", { className: "fas fa-search fa-fw" }) }),
/* @__PURE__ */ _(we, { ...E, children: [
/* @__PURE__ */ v(j, { component: null, children: o.map((d, f) => /* @__PURE__ */ v(U, { timeout: 200, classNames: "item", children: /* @__PURE__ */ X(
Ie,
{
...E,
key: f,
first: f === 0,
title: `${d.description} - ${d.operationDescription}: ${d.value}`
},
/* @__PURE__ */ v(
ce,
{
...E,
id: d.id,
text: d.description,
additionalInfo: d.value,
inactive: !d.active,
onRemove: () => t ? {} : q(f),
onClick: () => t ? {} : oe(f),
disabled: t
}
)
) }, f)) }),
/* @__PURE__ */ v(ze, { ...E, children: /* @__PURE__ */ v(
_e,
{
...E,
ref: W,
value: u,
onBlur: ne,
onChange: re,
onKeyDown: te,
disabled: t
}
) })
] }),
/* @__PURE__ */ v(Pe, { ...E, disabled: t, children: /* @__PURE__ */ v(
"i",
{
className: "fas fa-times fa-fw",
onClick: () => t ? {} : n(r, [])
}
) })
] }),
ae()
] });
};
Fe.defaultProps = {
id: "",
disabled: !1,
onChange: () => {
},
items: [],
suggestions: [],
className: "",
size: "small",
color: "primary"
};
export {
Fe as default
};