@bigbinary/neeto-filters-frontend 3.0.14 → 3.0.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs.js +83 -854
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.js +12 -782
- package/dist/index.js.map +1 -1
- package/package.json +47 -42
package/dist/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React, { useState, useRef, useEffect, useTransition, useMemo } from 'react';
|
|
2
2
|
import classnames from 'classnames';
|
|
3
3
|
import i18next, { t as t$1 } from 'i18next';
|
|
4
|
-
import { capitalize, removeBy, findBy, isNotEmpty, humanize, hyphenate, noop
|
|
4
|
+
import { capitalize, removeBy, findBy, isNotEmpty, humanize, hyphenate, noop, toLabelAndValue, replaceBy, isPresent, existsBy, isNotPresent, filterBy } from 'neetocist';
|
|
5
5
|
import { useHotKeys, useMutationWithInvalidation, useQueryParams, useDebounce, withT } from '@bigbinary/neeto-commons-frontend/react-utils';
|
|
6
6
|
import { getQueryParams, dateFormat, buildUrl } from '@bigbinary/neeto-commons-frontend/utils';
|
|
7
7
|
import { Tooltip, Typography, Dropdown as Dropdown$2, Button, Pane as Pane$1, Alert, Select, DatePicker, TimePicker, Input as Input$1, Accordion, Spinner } from '@bigbinary/neetoui';
|
|
@@ -14,7 +14,8 @@ import { useQuery } from 'react-query';
|
|
|
14
14
|
import axios from 'axios';
|
|
15
15
|
import * as yup from 'yup';
|
|
16
16
|
import Search from '@bigbinary/neeto-molecules/Search';
|
|
17
|
-
import
|
|
17
|
+
import { createPortal } from 'react-dom';
|
|
18
|
+
import { CSSTransition } from 'react-transition-group';
|
|
18
19
|
import MenuBar from '@bigbinary/neeto-molecules/MenuBar';
|
|
19
20
|
import { FormikInlineInput } from '@bigbinary/neeto-molecules/InlineInput';
|
|
20
21
|
|
|
@@ -198,7 +199,7 @@ var dayjs_min = {exports: {}};
|
|
|
198
199
|
dayjs_min.exports;
|
|
199
200
|
|
|
200
201
|
(function (module, exports) {
|
|
201
|
-
!function(t,e){module.exports=e();}(commonjsGlobal,(function(){var t=1e3,e=6e4,n=36e5,r="millisecond",i="second",s="minute",u="hour",a="day",o="week",c="month",f="quarter",h="year",d="date",l="Invalid Date",$=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,y=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,M={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),ordinal:function(t){var e=["th","st","nd","rd"],n=t%100;return "["+t+(e[(n-20)%10]||e[n]||e[0])+"]"}},m=function(t,e,n){var r=String(t);return !r||r.length>=e?t:""+Array(e+1-r.length).join(n)+t},v={s:m,z:function(t){var e=-t.utcOffset(),n=Math.abs(e),r=Math.floor(n/60),i=n%60;return (e<=0?"+":"-")+m(r,2,"0")+":"+m(i,2,"0")},m:function t(e,n){if(e.date()<n.date())return -t(n,e);var r=12*(n.year()-e.year())+(n.month()-e.month()),i=e.clone().add(r,c),s=n-i<0,u=e.clone().add(r+(s?-1:1),c);return +(-(r+(n-i)/(s?i-u:u-i))||0)},a:function(t){return t<0?Math.ceil(t)||0:Math.floor(t)},p:function(t){return {M:c,y:h,w:o,d:a,D:d,h:u,m:s,s:i,ms:r,Q:f}[t]||String(t||"").toLowerCase().replace(/s$/,"")},u:function(t){return void 0===t}},g="en",D={};D[g]=M;var p=function(t){return t instanceof
|
|
202
|
+
!function(t,e){module.exports=e();}(commonjsGlobal,(function(){var t=1e3,e=6e4,n=36e5,r="millisecond",i="second",s="minute",u="hour",a="day",o="week",c="month",f="quarter",h="year",d="date",l="Invalid Date",$=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,y=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,M={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),ordinal:function(t){var e=["th","st","nd","rd"],n=t%100;return "["+t+(e[(n-20)%10]||e[n]||e[0])+"]"}},m=function(t,e,n){var r=String(t);return !r||r.length>=e?t:""+Array(e+1-r.length).join(n)+t},v={s:m,z:function(t){var e=-t.utcOffset(),n=Math.abs(e),r=Math.floor(n/60),i=n%60;return (e<=0?"+":"-")+m(r,2,"0")+":"+m(i,2,"0")},m:function t(e,n){if(e.date()<n.date())return -t(n,e);var r=12*(n.year()-e.year())+(n.month()-e.month()),i=e.clone().add(r,c),s=n-i<0,u=e.clone().add(r+(s?-1:1),c);return +(-(r+(n-i)/(s?i-u:u-i))||0)},a:function(t){return t<0?Math.ceil(t)||0:Math.floor(t)},p:function(t){return {M:c,y:h,w:o,d:a,D:d,h:u,m:s,s:i,ms:r,Q:f}[t]||String(t||"").toLowerCase().replace(/s$/,"")},u:function(t){return void 0===t}},g="en",D={};D[g]=M;var p="$isDayjsObject",S=function(t){return t instanceof _||!(!t||!t[p])},w=function t(e,n,r){var i;if(!e)return g;if("string"==typeof e){var s=e.toLowerCase();D[s]&&(i=s),n&&(D[s]=n,i=s);var u=e.split("-");if(!i&&u.length>1)return t(u[0])}else {var a=e.name;D[a]=e,i=a;}return !r&&i&&(g=i),i||!r&&g},O=function(t,e){if(S(t))return t.clone();var n="object"==typeof e?e:{};return n.date=t,n.args=arguments,new _(n)},b=v;b.l=w,b.i=S,b.w=function(t,e){return O(t,{locale:e.$L,utc:e.$u,x:e.$x,$offset:e.$offset})};var _=function(){function M(t){this.$L=w(t.locale,null,!0),this.parse(t),this.$x=this.$x||t.x||{},this[p]=!0;}var m=M.prototype;return m.parse=function(t){this.$d=function(t){var e=t.date,n=t.utc;if(null===e)return new Date(NaN);if(b.u(e))return new Date;if(e instanceof Date)return new Date(e);if("string"==typeof e&&!/Z$/i.test(e)){var r=e.match($);if(r){var i=r[2]-1||0,s=(r[7]||"0").substring(0,3);return n?new Date(Date.UTC(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)):new Date(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)}}return new Date(e)}(t),this.init();},m.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds();},m.$utils=function(){return b},m.isValid=function(){return !(this.$d.toString()===l)},m.isSame=function(t,e){var n=O(t);return this.startOf(e)<=n&&n<=this.endOf(e)},m.isAfter=function(t,e){return O(t)<this.startOf(e)},m.isBefore=function(t,e){return this.endOf(e)<O(t)},m.$g=function(t,e,n){return b.u(t)?this[e]:this.set(n,t)},m.unix=function(){return Math.floor(this.valueOf()/1e3)},m.valueOf=function(){return this.$d.getTime()},m.startOf=function(t,e){var n=this,r=!!b.u(e)||e,f=b.p(t),l=function(t,e){var i=b.w(n.$u?Date.UTC(n.$y,e,t):new Date(n.$y,e,t),n);return r?i:i.endOf(a)},$=function(t,e){return b.w(n.toDate()[t].apply(n.toDate("s"),(r?[0,0,0,0]:[23,59,59,999]).slice(e)),n)},y=this.$W,M=this.$M,m=this.$D,v="set"+(this.$u?"UTC":"");switch(f){case h:return r?l(1,0):l(31,11);case c:return r?l(1,M):l(0,M+1);case o:var g=this.$locale().weekStart||0,D=(y<g?y+7:y)-g;return l(r?m-D:m+(6-D),M);case a:case d:return $(v+"Hours",0);case u:return $(v+"Minutes",1);case s:return $(v+"Seconds",2);case i:return $(v+"Milliseconds",3);default:return this.clone()}},m.endOf=function(t){return this.startOf(t,!1)},m.$set=function(t,e){var n,o=b.p(t),f="set"+(this.$u?"UTC":""),l=(n={},n[a]=f+"Date",n[d]=f+"Date",n[c]=f+"Month",n[h]=f+"FullYear",n[u]=f+"Hours",n[s]=f+"Minutes",n[i]=f+"Seconds",n[r]=f+"Milliseconds",n)[o],$=o===a?this.$D+(e-this.$W):e;if(o===c||o===h){var y=this.clone().set(d,1);y.$d[l]($),y.init(),this.$d=y.set(d,Math.min(this.$D,y.daysInMonth())).$d;}else l&&this.$d[l]($);return this.init(),this},m.set=function(t,e){return this.clone().$set(t,e)},m.get=function(t){return this[b.p(t)]()},m.add=function(r,f){var d,l=this;r=Number(r);var $=b.p(f),y=function(t){var e=O(l);return b.w(e.date(e.date()+Math.round(t*r)),l)};if($===c)return this.set(c,this.$M+r);if($===h)return this.set(h,this.$y+r);if($===a)return y(1);if($===o)return y(7);var M=(d={},d[s]=e,d[u]=n,d[i]=t,d)[$]||1,m=this.$d.getTime()+r*M;return b.w(m,this)},m.subtract=function(t,e){return this.add(-1*t,e)},m.format=function(t){var e=this,n=this.$locale();if(!this.isValid())return n.invalidDate||l;var r=t||"YYYY-MM-DDTHH:mm:ssZ",i=b.z(this),s=this.$H,u=this.$m,a=this.$M,o=n.weekdays,c=n.months,f=n.meridiem,h=function(t,n,i,s){return t&&(t[n]||t(e,r))||i[n].slice(0,s)},d=function(t){return b.s(s%12||12,t,"0")},$=f||function(t,e,n){var r=t<12?"AM":"PM";return n?r.toLowerCase():r};return r.replace(y,(function(t,r){return r||function(t){switch(t){case"YY":return String(e.$y).slice(-2);case"YYYY":return b.s(e.$y,4,"0");case"M":return a+1;case"MM":return b.s(a+1,2,"0");case"MMM":return h(n.monthsShort,a,c,3);case"MMMM":return h(c,a);case"D":return e.$D;case"DD":return b.s(e.$D,2,"0");case"d":return String(e.$W);case"dd":return h(n.weekdaysMin,e.$W,o,2);case"ddd":return h(n.weekdaysShort,e.$W,o,3);case"dddd":return o[e.$W];case"H":return String(s);case"HH":return b.s(s,2,"0");case"h":return d(1);case"hh":return d(2);case"a":return $(s,u,!0);case"A":return $(s,u,!1);case"m":return String(u);case"mm":return b.s(u,2,"0");case"s":return String(e.$s);case"ss":return b.s(e.$s,2,"0");case"SSS":return b.s(e.$ms,3,"0");case"Z":return i}return null}(t)||i.replace(":","")}))},m.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},m.diff=function(r,d,l){var $,y=this,M=b.p(d),m=O(r),v=(m.utcOffset()-this.utcOffset())*e,g=this-m,D=function(){return b.m(y,m)};switch(M){case h:$=D()/12;break;case c:$=D();break;case f:$=D()/3;break;case o:$=(g-v)/6048e5;break;case a:$=(g-v)/864e5;break;case u:$=g/n;break;case s:$=g/e;break;case i:$=g/t;break;default:$=g;}return l?$:b.a($)},m.daysInMonth=function(){return this.endOf(c).$D},m.$locale=function(){return D[this.$L]},m.locale=function(t,e){if(!t)return this.$L;var n=this.clone(),r=w(t,e,!0);return r&&(n.$L=r),n},m.clone=function(){return b.w(this.$d,this)},m.toDate=function(){return new Date(this.valueOf())},m.toJSON=function(){return this.isValid()?this.toISOString():null},m.toISOString=function(){return this.$d.toISOString()},m.toString=function(){return this.$d.toUTCString()},M}(),k=_.prototype;return O.prototype=k,[["$ms",r],["$s",i],["$m",s],["$H",u],["$W",a],["$M",c],["$y",h],["$D",d]].forEach((function(t){k[t[1]]=function(e){return this.$g(e,t[0],t[1])};})),O.extend=function(t,e){return t.$i||(t(e,_,O),t.$i=!0),O},O.locale=w,O.isDayjs=S,O.unix=function(t){return O(1e3*t)},O.en=D[g],O.Ls=D,O.p={},O}));
|
|
202
203
|
} (dayjs_min, dayjs_min.exports));
|
|
203
204
|
|
|
204
205
|
var dayjs_minExports = dayjs_min.exports;
|
|
@@ -301,7 +302,7 @@ var timezone$1 = {exports: {}};
|
|
|
301
302
|
timezone$1.exports;
|
|
302
303
|
|
|
303
304
|
(function (module, exports) {
|
|
304
|
-
!function(t,e){module.exports=e();}(commonjsGlobal,(function(){var t={year:0,month:1,day:2,hour:3,minute:4,second:5},e={};return function(n,i,o){var r,a=function(t,n,i){void 0===i&&(i={});var o=new Date(t),r=function(t,n){void 0===n&&(n={});var i=n.timeZoneName||"short",o=t+"|"+i,r=e[o];return r||(r=new Intl.DateTimeFormat("en-US",{hour12:!1,timeZone:t,year:"numeric",month:"2-digit",day:"2-digit",hour:"2-digit",minute:"2-digit",second:"2-digit",timeZoneName:i}),e[o]=r),r}(n,i);return r.formatToParts(o)},u=function(e,n){for(var i=a(e,n),r=[],u=0;u<i.length;u+=1){var f=i[u],s=f.type,m=f.value,c=t[s];c>=0&&(r[c]=parseInt(m,10));}var d=r[3],l=24===d?0:d,
|
|
305
|
+
!function(t,e){module.exports=e();}(commonjsGlobal,(function(){var t={year:0,month:1,day:2,hour:3,minute:4,second:5},e={};return function(n,i,o){var r,a=function(t,n,i){void 0===i&&(i={});var o=new Date(t),r=function(t,n){void 0===n&&(n={});var i=n.timeZoneName||"short",o=t+"|"+i,r=e[o];return r||(r=new Intl.DateTimeFormat("en-US",{hour12:!1,timeZone:t,year:"numeric",month:"2-digit",day:"2-digit",hour:"2-digit",minute:"2-digit",second:"2-digit",timeZoneName:i}),e[o]=r),r}(n,i);return r.formatToParts(o)},u=function(e,n){for(var i=a(e,n),r=[],u=0;u<i.length;u+=1){var f=i[u],s=f.type,m=f.value,c=t[s];c>=0&&(r[c]=parseInt(m,10));}var d=r[3],l=24===d?0:d,h=r[0]+"-"+r[1]+"-"+r[2]+" "+l+":"+r[4]+":"+r[5]+":000",v=+e;return (o.utc(h).valueOf()-(v-=v%1e3))/6e4},f=i.prototype;f.tz=function(t,e){void 0===t&&(t=r);var n=this.utcOffset(),i=this.toDate(),a=i.toLocaleString("en-US",{timeZone:t}),u=Math.round((i-new Date(a))/1e3/60),f=o(a,{locale:this.$L}).$set("millisecond",this.$ms).utcOffset(15*-Math.round(i.getTimezoneOffset()/15)-u,!0);if(e){var s=f.utcOffset();f=f.add(n-s,"minute");}return f.$x.$timezone=t,f},f.offsetName=function(t){var e=this.$x.$timezone||o.tz.guess(),n=a(this.valueOf(),e,{timeZoneName:t}).find((function(t){return "timezonename"===t.type.toLowerCase()}));return n&&n.value};var s=f.startOf;f.startOf=function(t,e){if(!this.$x||!this.$x.$timezone)return s.call(this,t,e);var n=o(this.format("YYYY-MM-DD HH:mm:ss:SSS"),{locale:this.$L});return s.call(n,t,e).tz(this.$x.$timezone,!0)},o.tz=function(t,e,n){var i=n&&e,a=n||e||r,f=u(+o(),a);if("string"!=typeof t)return o(t).tz(a);var s=function(t,e,n){var i=t-60*e*1e3,o=u(i,n);if(e===o)return [i,e];var r=u(i-=60*(o-e)*1e3,n);return o===r?[i,o]:[t-60*Math.min(o,r)*1e3,Math.max(o,r)]}(o.utc(t,i).valueOf(),f,a),m=s[0],c=s[1],d=o(m).utcOffset(c);return d.$x.$timezone=a,d},o.tz.guess=function(){return Intl.DateTimeFormat().resolvedOptions().timeZone},o.tz.setDefault=function(t){r=t;};}}));
|
|
305
306
|
} (timezone$1, timezone$1.exports));
|
|
306
307
|
|
|
307
308
|
var timezoneExports = timezone$1.exports;
|
|
@@ -1370,7 +1371,7 @@ var Bar = function Bar(_ref) {
|
|
|
1370
1371
|
keyword = _ref$keyword === void 0 ? {
|
|
1371
1372
|
node: "",
|
|
1372
1373
|
value: "",
|
|
1373
|
-
setValue: noop
|
|
1374
|
+
setValue: noop
|
|
1374
1375
|
} : _ref$keyword,
|
|
1375
1376
|
_ref$setIsPaneOpen = _ref.setIsPaneOpen,
|
|
1376
1377
|
setIsPaneOpen = _ref$setIsPaneOpen === void 0 ? identity : _ref$setIsPaneOpen,
|
|
@@ -1445,7 +1446,7 @@ var Bar = function Bar(_ref) {
|
|
|
1445
1446
|
useEffect(function () {
|
|
1446
1447
|
if (initialRenderRef.current) {
|
|
1447
1448
|
initialRenderRef.current = false;
|
|
1448
|
-
return noop
|
|
1449
|
+
return noop;
|
|
1449
1450
|
}
|
|
1450
1451
|
var handler = setTimeout(function () {
|
|
1451
1452
|
handleSubmit(filters);
|
|
@@ -1568,777 +1569,6 @@ var Portal = function Portal(_ref) {
|
|
|
1568
1569
|
return /*#__PURE__*/createPortal(children, target.current);
|
|
1569
1570
|
};
|
|
1570
1571
|
|
|
1571
|
-
function _setPrototypeOf(o, p) {
|
|
1572
|
-
_setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
|
|
1573
|
-
o.__proto__ = p;
|
|
1574
|
-
return o;
|
|
1575
|
-
};
|
|
1576
|
-
return _setPrototypeOf(o, p);
|
|
1577
|
-
}
|
|
1578
|
-
|
|
1579
|
-
function _inheritsLoose(subClass, superClass) {
|
|
1580
|
-
subClass.prototype = Object.create(superClass.prototype);
|
|
1581
|
-
subClass.prototype.constructor = subClass;
|
|
1582
|
-
_setPrototypeOf(subClass, superClass);
|
|
1583
|
-
}
|
|
1584
|
-
|
|
1585
|
-
/**
|
|
1586
|
-
* Checks if a given element has a CSS class.
|
|
1587
|
-
*
|
|
1588
|
-
* @param element the element
|
|
1589
|
-
* @param className the CSS class name
|
|
1590
|
-
*/
|
|
1591
|
-
function hasClass(element, className) {
|
|
1592
|
-
if (element.classList) return !!className && element.classList.contains(className);
|
|
1593
|
-
return (" " + (element.className.baseVal || element.className) + " ").indexOf(" " + className + " ") !== -1;
|
|
1594
|
-
}
|
|
1595
|
-
|
|
1596
|
-
/**
|
|
1597
|
-
* Adds a CSS class to a given element.
|
|
1598
|
-
*
|
|
1599
|
-
* @param element the element
|
|
1600
|
-
* @param className the CSS class name
|
|
1601
|
-
*/
|
|
1602
|
-
|
|
1603
|
-
function addClass(element, className) {
|
|
1604
|
-
if (element.classList) element.classList.add(className);else if (!hasClass(element, className)) if (typeof element.className === 'string') element.className = element.className + " " + className;else element.setAttribute('class', (element.className && element.className.baseVal || '') + " " + className);
|
|
1605
|
-
}
|
|
1606
|
-
|
|
1607
|
-
function replaceClassName(origClass, classToRemove) {
|
|
1608
|
-
return origClass.replace(new RegExp("(^|\\s)" + classToRemove + "(?:\\s|$)", 'g'), '$1').replace(/\s+/g, ' ').replace(/^\s*|\s*$/g, '');
|
|
1609
|
-
}
|
|
1610
|
-
/**
|
|
1611
|
-
* Removes a CSS class from a given element.
|
|
1612
|
-
*
|
|
1613
|
-
* @param element the element
|
|
1614
|
-
* @param className the CSS class name
|
|
1615
|
-
*/
|
|
1616
|
-
|
|
1617
|
-
|
|
1618
|
-
function removeClass$1(element, className) {
|
|
1619
|
-
if (element.classList) {
|
|
1620
|
-
element.classList.remove(className);
|
|
1621
|
-
} else if (typeof element.className === 'string') {
|
|
1622
|
-
element.className = replaceClassName(element.className, className);
|
|
1623
|
-
} else {
|
|
1624
|
-
element.setAttribute('class', replaceClassName(element.className && element.className.baseVal || '', className));
|
|
1625
|
-
}
|
|
1626
|
-
}
|
|
1627
|
-
|
|
1628
|
-
var config = {
|
|
1629
|
-
disabled: false
|
|
1630
|
-
};
|
|
1631
|
-
|
|
1632
|
-
var TransitionGroupContext = React.createContext(null);
|
|
1633
|
-
|
|
1634
|
-
var forceReflow = function forceReflow(node) {
|
|
1635
|
-
return node.scrollTop;
|
|
1636
|
-
};
|
|
1637
|
-
|
|
1638
|
-
var UNMOUNTED = 'unmounted';
|
|
1639
|
-
var EXITED = 'exited';
|
|
1640
|
-
var ENTERING = 'entering';
|
|
1641
|
-
var ENTERED = 'entered';
|
|
1642
|
-
var EXITING = 'exiting';
|
|
1643
|
-
/**
|
|
1644
|
-
* The Transition component lets you describe a transition from one component
|
|
1645
|
-
* state to another _over time_ with a simple declarative API. Most commonly
|
|
1646
|
-
* it's used to animate the mounting and unmounting of a component, but can also
|
|
1647
|
-
* be used to describe in-place transition states as well.
|
|
1648
|
-
*
|
|
1649
|
-
* ---
|
|
1650
|
-
*
|
|
1651
|
-
* **Note**: `Transition` is a platform-agnostic base component. If you're using
|
|
1652
|
-
* transitions in CSS, you'll probably want to use
|
|
1653
|
-
* [`CSSTransition`](https://reactcommunity.org/react-transition-group/css-transition)
|
|
1654
|
-
* instead. It inherits all the features of `Transition`, but contains
|
|
1655
|
-
* additional features necessary to play nice with CSS transitions (hence the
|
|
1656
|
-
* name of the component).
|
|
1657
|
-
*
|
|
1658
|
-
* ---
|
|
1659
|
-
*
|
|
1660
|
-
* By default the `Transition` component does not alter the behavior of the
|
|
1661
|
-
* component it renders, it only tracks "enter" and "exit" states for the
|
|
1662
|
-
* components. It's up to you to give meaning and effect to those states. For
|
|
1663
|
-
* example we can add styles to a component when it enters or exits:
|
|
1664
|
-
*
|
|
1665
|
-
* ```jsx
|
|
1666
|
-
* import { Transition } from 'react-transition-group';
|
|
1667
|
-
*
|
|
1668
|
-
* const duration = 300;
|
|
1669
|
-
*
|
|
1670
|
-
* const defaultStyle = {
|
|
1671
|
-
* transition: `opacity ${duration}ms ease-in-out`,
|
|
1672
|
-
* opacity: 0,
|
|
1673
|
-
* }
|
|
1674
|
-
*
|
|
1675
|
-
* const transitionStyles = {
|
|
1676
|
-
* entering: { opacity: 1 },
|
|
1677
|
-
* entered: { opacity: 1 },
|
|
1678
|
-
* exiting: { opacity: 0 },
|
|
1679
|
-
* exited: { opacity: 0 },
|
|
1680
|
-
* };
|
|
1681
|
-
*
|
|
1682
|
-
* const Fade = ({ in: inProp }) => (
|
|
1683
|
-
* <Transition in={inProp} timeout={duration}>
|
|
1684
|
-
* {state => (
|
|
1685
|
-
* <div style={{
|
|
1686
|
-
* ...defaultStyle,
|
|
1687
|
-
* ...transitionStyles[state]
|
|
1688
|
-
* }}>
|
|
1689
|
-
* I'm a fade Transition!
|
|
1690
|
-
* </div>
|
|
1691
|
-
* )}
|
|
1692
|
-
* </Transition>
|
|
1693
|
-
* );
|
|
1694
|
-
* ```
|
|
1695
|
-
*
|
|
1696
|
-
* There are 4 main states a Transition can be in:
|
|
1697
|
-
* - `'entering'`
|
|
1698
|
-
* - `'entered'`
|
|
1699
|
-
* - `'exiting'`
|
|
1700
|
-
* - `'exited'`
|
|
1701
|
-
*
|
|
1702
|
-
* Transition state is toggled via the `in` prop. When `true` the component
|
|
1703
|
-
* begins the "Enter" stage. During this stage, the component will shift from
|
|
1704
|
-
* its current transition state, to `'entering'` for the duration of the
|
|
1705
|
-
* transition and then to the `'entered'` stage once it's complete. Let's take
|
|
1706
|
-
* the following example (we'll use the
|
|
1707
|
-
* [useState](https://reactjs.org/docs/hooks-reference.html#usestate) hook):
|
|
1708
|
-
*
|
|
1709
|
-
* ```jsx
|
|
1710
|
-
* function App() {
|
|
1711
|
-
* const [inProp, setInProp] = useState(false);
|
|
1712
|
-
* return (
|
|
1713
|
-
* <div>
|
|
1714
|
-
* <Transition in={inProp} timeout={500}>
|
|
1715
|
-
* {state => (
|
|
1716
|
-
* // ...
|
|
1717
|
-
* )}
|
|
1718
|
-
* </Transition>
|
|
1719
|
-
* <button onClick={() => setInProp(true)}>
|
|
1720
|
-
* Click to Enter
|
|
1721
|
-
* </button>
|
|
1722
|
-
* </div>
|
|
1723
|
-
* );
|
|
1724
|
-
* }
|
|
1725
|
-
* ```
|
|
1726
|
-
*
|
|
1727
|
-
* When the button is clicked the component will shift to the `'entering'` state
|
|
1728
|
-
* and stay there for 500ms (the value of `timeout`) before it finally switches
|
|
1729
|
-
* to `'entered'`.
|
|
1730
|
-
*
|
|
1731
|
-
* When `in` is `false` the same thing happens except the state moves from
|
|
1732
|
-
* `'exiting'` to `'exited'`.
|
|
1733
|
-
*/
|
|
1734
|
-
|
|
1735
|
-
var Transition = /*#__PURE__*/function (_React$Component) {
|
|
1736
|
-
_inheritsLoose(Transition, _React$Component);
|
|
1737
|
-
|
|
1738
|
-
function Transition(props, context) {
|
|
1739
|
-
var _this;
|
|
1740
|
-
|
|
1741
|
-
_this = _React$Component.call(this, props, context) || this;
|
|
1742
|
-
var parentGroup = context; // In the context of a TransitionGroup all enters are really appears
|
|
1743
|
-
|
|
1744
|
-
var appear = parentGroup && !parentGroup.isMounting ? props.enter : props.appear;
|
|
1745
|
-
var initialStatus;
|
|
1746
|
-
_this.appearStatus = null;
|
|
1747
|
-
|
|
1748
|
-
if (props.in) {
|
|
1749
|
-
if (appear) {
|
|
1750
|
-
initialStatus = EXITED;
|
|
1751
|
-
_this.appearStatus = ENTERING;
|
|
1752
|
-
} else {
|
|
1753
|
-
initialStatus = ENTERED;
|
|
1754
|
-
}
|
|
1755
|
-
} else {
|
|
1756
|
-
if (props.unmountOnExit || props.mountOnEnter) {
|
|
1757
|
-
initialStatus = UNMOUNTED;
|
|
1758
|
-
} else {
|
|
1759
|
-
initialStatus = EXITED;
|
|
1760
|
-
}
|
|
1761
|
-
}
|
|
1762
|
-
|
|
1763
|
-
_this.state = {
|
|
1764
|
-
status: initialStatus
|
|
1765
|
-
};
|
|
1766
|
-
_this.nextCallback = null;
|
|
1767
|
-
return _this;
|
|
1768
|
-
}
|
|
1769
|
-
|
|
1770
|
-
Transition.getDerivedStateFromProps = function getDerivedStateFromProps(_ref, prevState) {
|
|
1771
|
-
var nextIn = _ref.in;
|
|
1772
|
-
|
|
1773
|
-
if (nextIn && prevState.status === UNMOUNTED) {
|
|
1774
|
-
return {
|
|
1775
|
-
status: EXITED
|
|
1776
|
-
};
|
|
1777
|
-
}
|
|
1778
|
-
|
|
1779
|
-
return null;
|
|
1780
|
-
} // getSnapshotBeforeUpdate(prevProps) {
|
|
1781
|
-
// let nextStatus = null
|
|
1782
|
-
// if (prevProps !== this.props) {
|
|
1783
|
-
// const { status } = this.state
|
|
1784
|
-
// if (this.props.in) {
|
|
1785
|
-
// if (status !== ENTERING && status !== ENTERED) {
|
|
1786
|
-
// nextStatus = ENTERING
|
|
1787
|
-
// }
|
|
1788
|
-
// } else {
|
|
1789
|
-
// if (status === ENTERING || status === ENTERED) {
|
|
1790
|
-
// nextStatus = EXITING
|
|
1791
|
-
// }
|
|
1792
|
-
// }
|
|
1793
|
-
// }
|
|
1794
|
-
// return { nextStatus }
|
|
1795
|
-
// }
|
|
1796
|
-
;
|
|
1797
|
-
|
|
1798
|
-
var _proto = Transition.prototype;
|
|
1799
|
-
|
|
1800
|
-
_proto.componentDidMount = function componentDidMount() {
|
|
1801
|
-
this.updateStatus(true, this.appearStatus);
|
|
1802
|
-
};
|
|
1803
|
-
|
|
1804
|
-
_proto.componentDidUpdate = function componentDidUpdate(prevProps) {
|
|
1805
|
-
var nextStatus = null;
|
|
1806
|
-
|
|
1807
|
-
if (prevProps !== this.props) {
|
|
1808
|
-
var status = this.state.status;
|
|
1809
|
-
|
|
1810
|
-
if (this.props.in) {
|
|
1811
|
-
if (status !== ENTERING && status !== ENTERED) {
|
|
1812
|
-
nextStatus = ENTERING;
|
|
1813
|
-
}
|
|
1814
|
-
} else {
|
|
1815
|
-
if (status === ENTERING || status === ENTERED) {
|
|
1816
|
-
nextStatus = EXITING;
|
|
1817
|
-
}
|
|
1818
|
-
}
|
|
1819
|
-
}
|
|
1820
|
-
|
|
1821
|
-
this.updateStatus(false, nextStatus);
|
|
1822
|
-
};
|
|
1823
|
-
|
|
1824
|
-
_proto.componentWillUnmount = function componentWillUnmount() {
|
|
1825
|
-
this.cancelNextCallback();
|
|
1826
|
-
};
|
|
1827
|
-
|
|
1828
|
-
_proto.getTimeouts = function getTimeouts() {
|
|
1829
|
-
var timeout = this.props.timeout;
|
|
1830
|
-
var exit, enter, appear;
|
|
1831
|
-
exit = enter = appear = timeout;
|
|
1832
|
-
|
|
1833
|
-
if (timeout != null && typeof timeout !== 'number') {
|
|
1834
|
-
exit = timeout.exit;
|
|
1835
|
-
enter = timeout.enter; // TODO: remove fallback for next major
|
|
1836
|
-
|
|
1837
|
-
appear = timeout.appear !== undefined ? timeout.appear : enter;
|
|
1838
|
-
}
|
|
1839
|
-
|
|
1840
|
-
return {
|
|
1841
|
-
exit: exit,
|
|
1842
|
-
enter: enter,
|
|
1843
|
-
appear: appear
|
|
1844
|
-
};
|
|
1845
|
-
};
|
|
1846
|
-
|
|
1847
|
-
_proto.updateStatus = function updateStatus(mounting, nextStatus) {
|
|
1848
|
-
if (mounting === void 0) {
|
|
1849
|
-
mounting = false;
|
|
1850
|
-
}
|
|
1851
|
-
|
|
1852
|
-
if (nextStatus !== null) {
|
|
1853
|
-
// nextStatus will always be ENTERING or EXITING.
|
|
1854
|
-
this.cancelNextCallback();
|
|
1855
|
-
|
|
1856
|
-
if (nextStatus === ENTERING) {
|
|
1857
|
-
if (this.props.unmountOnExit || this.props.mountOnEnter) {
|
|
1858
|
-
var node = this.props.nodeRef ? this.props.nodeRef.current : ReactDOM.findDOMNode(this); // https://github.com/reactjs/react-transition-group/pull/749
|
|
1859
|
-
// With unmountOnExit or mountOnEnter, the enter animation should happen at the transition between `exited` and `entering`.
|
|
1860
|
-
// To make the animation happen, we have to separate each rendering and avoid being processed as batched.
|
|
1861
|
-
|
|
1862
|
-
if (node) forceReflow(node);
|
|
1863
|
-
}
|
|
1864
|
-
|
|
1865
|
-
this.performEnter(mounting);
|
|
1866
|
-
} else {
|
|
1867
|
-
this.performExit();
|
|
1868
|
-
}
|
|
1869
|
-
} else if (this.props.unmountOnExit && this.state.status === EXITED) {
|
|
1870
|
-
this.setState({
|
|
1871
|
-
status: UNMOUNTED
|
|
1872
|
-
});
|
|
1873
|
-
}
|
|
1874
|
-
};
|
|
1875
|
-
|
|
1876
|
-
_proto.performEnter = function performEnter(mounting) {
|
|
1877
|
-
var _this2 = this;
|
|
1878
|
-
|
|
1879
|
-
var enter = this.props.enter;
|
|
1880
|
-
var appearing = this.context ? this.context.isMounting : mounting;
|
|
1881
|
-
|
|
1882
|
-
var _ref2 = this.props.nodeRef ? [appearing] : [ReactDOM.findDOMNode(this), appearing],
|
|
1883
|
-
maybeNode = _ref2[0],
|
|
1884
|
-
maybeAppearing = _ref2[1];
|
|
1885
|
-
|
|
1886
|
-
var timeouts = this.getTimeouts();
|
|
1887
|
-
var enterTimeout = appearing ? timeouts.appear : timeouts.enter; // no enter animation skip right to ENTERED
|
|
1888
|
-
// if we are mounting and running this it means appear _must_ be set
|
|
1889
|
-
|
|
1890
|
-
if (!mounting && !enter || config.disabled) {
|
|
1891
|
-
this.safeSetState({
|
|
1892
|
-
status: ENTERED
|
|
1893
|
-
}, function () {
|
|
1894
|
-
_this2.props.onEntered(maybeNode);
|
|
1895
|
-
});
|
|
1896
|
-
return;
|
|
1897
|
-
}
|
|
1898
|
-
|
|
1899
|
-
this.props.onEnter(maybeNode, maybeAppearing);
|
|
1900
|
-
this.safeSetState({
|
|
1901
|
-
status: ENTERING
|
|
1902
|
-
}, function () {
|
|
1903
|
-
_this2.props.onEntering(maybeNode, maybeAppearing);
|
|
1904
|
-
|
|
1905
|
-
_this2.onTransitionEnd(enterTimeout, function () {
|
|
1906
|
-
_this2.safeSetState({
|
|
1907
|
-
status: ENTERED
|
|
1908
|
-
}, function () {
|
|
1909
|
-
_this2.props.onEntered(maybeNode, maybeAppearing);
|
|
1910
|
-
});
|
|
1911
|
-
});
|
|
1912
|
-
});
|
|
1913
|
-
};
|
|
1914
|
-
|
|
1915
|
-
_proto.performExit = function performExit() {
|
|
1916
|
-
var _this3 = this;
|
|
1917
|
-
|
|
1918
|
-
var exit = this.props.exit;
|
|
1919
|
-
var timeouts = this.getTimeouts();
|
|
1920
|
-
var maybeNode = this.props.nodeRef ? undefined : ReactDOM.findDOMNode(this); // no exit animation skip right to EXITED
|
|
1921
|
-
|
|
1922
|
-
if (!exit || config.disabled) {
|
|
1923
|
-
this.safeSetState({
|
|
1924
|
-
status: EXITED
|
|
1925
|
-
}, function () {
|
|
1926
|
-
_this3.props.onExited(maybeNode);
|
|
1927
|
-
});
|
|
1928
|
-
return;
|
|
1929
|
-
}
|
|
1930
|
-
|
|
1931
|
-
this.props.onExit(maybeNode);
|
|
1932
|
-
this.safeSetState({
|
|
1933
|
-
status: EXITING
|
|
1934
|
-
}, function () {
|
|
1935
|
-
_this3.props.onExiting(maybeNode);
|
|
1936
|
-
|
|
1937
|
-
_this3.onTransitionEnd(timeouts.exit, function () {
|
|
1938
|
-
_this3.safeSetState({
|
|
1939
|
-
status: EXITED
|
|
1940
|
-
}, function () {
|
|
1941
|
-
_this3.props.onExited(maybeNode);
|
|
1942
|
-
});
|
|
1943
|
-
});
|
|
1944
|
-
});
|
|
1945
|
-
};
|
|
1946
|
-
|
|
1947
|
-
_proto.cancelNextCallback = function cancelNextCallback() {
|
|
1948
|
-
if (this.nextCallback !== null) {
|
|
1949
|
-
this.nextCallback.cancel();
|
|
1950
|
-
this.nextCallback = null;
|
|
1951
|
-
}
|
|
1952
|
-
};
|
|
1953
|
-
|
|
1954
|
-
_proto.safeSetState = function safeSetState(nextState, callback) {
|
|
1955
|
-
// This shouldn't be necessary, but there are weird race conditions with
|
|
1956
|
-
// setState callbacks and unmounting in testing, so always make sure that
|
|
1957
|
-
// we can cancel any pending setState callbacks after we unmount.
|
|
1958
|
-
callback = this.setNextCallback(callback);
|
|
1959
|
-
this.setState(nextState, callback);
|
|
1960
|
-
};
|
|
1961
|
-
|
|
1962
|
-
_proto.setNextCallback = function setNextCallback(callback) {
|
|
1963
|
-
var _this4 = this;
|
|
1964
|
-
|
|
1965
|
-
var active = true;
|
|
1966
|
-
|
|
1967
|
-
this.nextCallback = function (event) {
|
|
1968
|
-
if (active) {
|
|
1969
|
-
active = false;
|
|
1970
|
-
_this4.nextCallback = null;
|
|
1971
|
-
callback(event);
|
|
1972
|
-
}
|
|
1973
|
-
};
|
|
1974
|
-
|
|
1975
|
-
this.nextCallback.cancel = function () {
|
|
1976
|
-
active = false;
|
|
1977
|
-
};
|
|
1978
|
-
|
|
1979
|
-
return this.nextCallback;
|
|
1980
|
-
};
|
|
1981
|
-
|
|
1982
|
-
_proto.onTransitionEnd = function onTransitionEnd(timeout, handler) {
|
|
1983
|
-
this.setNextCallback(handler);
|
|
1984
|
-
var node = this.props.nodeRef ? this.props.nodeRef.current : ReactDOM.findDOMNode(this);
|
|
1985
|
-
var doesNotHaveTimeoutOrListener = timeout == null && !this.props.addEndListener;
|
|
1986
|
-
|
|
1987
|
-
if (!node || doesNotHaveTimeoutOrListener) {
|
|
1988
|
-
setTimeout(this.nextCallback, 0);
|
|
1989
|
-
return;
|
|
1990
|
-
}
|
|
1991
|
-
|
|
1992
|
-
if (this.props.addEndListener) {
|
|
1993
|
-
var _ref3 = this.props.nodeRef ? [this.nextCallback] : [node, this.nextCallback],
|
|
1994
|
-
maybeNode = _ref3[0],
|
|
1995
|
-
maybeNextCallback = _ref3[1];
|
|
1996
|
-
|
|
1997
|
-
this.props.addEndListener(maybeNode, maybeNextCallback);
|
|
1998
|
-
}
|
|
1999
|
-
|
|
2000
|
-
if (timeout != null) {
|
|
2001
|
-
setTimeout(this.nextCallback, timeout);
|
|
2002
|
-
}
|
|
2003
|
-
};
|
|
2004
|
-
|
|
2005
|
-
_proto.render = function render() {
|
|
2006
|
-
var status = this.state.status;
|
|
2007
|
-
|
|
2008
|
-
if (status === UNMOUNTED) {
|
|
2009
|
-
return null;
|
|
2010
|
-
}
|
|
2011
|
-
|
|
2012
|
-
var _this$props = this.props,
|
|
2013
|
-
children = _this$props.children;
|
|
2014
|
-
_this$props.in;
|
|
2015
|
-
_this$props.mountOnEnter;
|
|
2016
|
-
_this$props.unmountOnExit;
|
|
2017
|
-
_this$props.appear;
|
|
2018
|
-
_this$props.enter;
|
|
2019
|
-
_this$props.exit;
|
|
2020
|
-
_this$props.timeout;
|
|
2021
|
-
_this$props.addEndListener;
|
|
2022
|
-
_this$props.onEnter;
|
|
2023
|
-
_this$props.onEntering;
|
|
2024
|
-
_this$props.onEntered;
|
|
2025
|
-
_this$props.onExit;
|
|
2026
|
-
_this$props.onExiting;
|
|
2027
|
-
_this$props.onExited;
|
|
2028
|
-
_this$props.nodeRef;
|
|
2029
|
-
var childProps = _objectWithoutPropertiesLoose(_this$props, ["children", "in", "mountOnEnter", "unmountOnExit", "appear", "enter", "exit", "timeout", "addEndListener", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "nodeRef"]);
|
|
2030
|
-
|
|
2031
|
-
return (
|
|
2032
|
-
/*#__PURE__*/
|
|
2033
|
-
// allows for nested Transitions
|
|
2034
|
-
React.createElement(TransitionGroupContext.Provider, {
|
|
2035
|
-
value: null
|
|
2036
|
-
}, typeof children === 'function' ? children(status, childProps) : React.cloneElement(React.Children.only(children), childProps))
|
|
2037
|
-
);
|
|
2038
|
-
};
|
|
2039
|
-
|
|
2040
|
-
return Transition;
|
|
2041
|
-
}(React.Component);
|
|
2042
|
-
|
|
2043
|
-
Transition.contextType = TransitionGroupContext;
|
|
2044
|
-
Transition.propTypes = {}; // Name the function so it is clearer in the documentation
|
|
2045
|
-
|
|
2046
|
-
function noop() {}
|
|
2047
|
-
|
|
2048
|
-
Transition.defaultProps = {
|
|
2049
|
-
in: false,
|
|
2050
|
-
mountOnEnter: false,
|
|
2051
|
-
unmountOnExit: false,
|
|
2052
|
-
appear: false,
|
|
2053
|
-
enter: true,
|
|
2054
|
-
exit: true,
|
|
2055
|
-
onEnter: noop,
|
|
2056
|
-
onEntering: noop,
|
|
2057
|
-
onEntered: noop,
|
|
2058
|
-
onExit: noop,
|
|
2059
|
-
onExiting: noop,
|
|
2060
|
-
onExited: noop
|
|
2061
|
-
};
|
|
2062
|
-
Transition.UNMOUNTED = UNMOUNTED;
|
|
2063
|
-
Transition.EXITED = EXITED;
|
|
2064
|
-
Transition.ENTERING = ENTERING;
|
|
2065
|
-
Transition.ENTERED = ENTERED;
|
|
2066
|
-
Transition.EXITING = EXITING;
|
|
2067
|
-
var Transition$1 = Transition;
|
|
2068
|
-
|
|
2069
|
-
var _addClass = function addClass$1(node, classes) {
|
|
2070
|
-
return node && classes && classes.split(' ').forEach(function (c) {
|
|
2071
|
-
return addClass(node, c);
|
|
2072
|
-
});
|
|
2073
|
-
};
|
|
2074
|
-
|
|
2075
|
-
var removeClass = function removeClass(node, classes) {
|
|
2076
|
-
return node && classes && classes.split(' ').forEach(function (c) {
|
|
2077
|
-
return removeClass$1(node, c);
|
|
2078
|
-
});
|
|
2079
|
-
};
|
|
2080
|
-
/**
|
|
2081
|
-
* A transition component inspired by the excellent
|
|
2082
|
-
* [ng-animate](https://docs.angularjs.org/api/ngAnimate) library, you should
|
|
2083
|
-
* use it if you're using CSS transitions or animations. It's built upon the
|
|
2084
|
-
* [`Transition`](https://reactcommunity.org/react-transition-group/transition)
|
|
2085
|
-
* component, so it inherits all of its props.
|
|
2086
|
-
*
|
|
2087
|
-
* `CSSTransition` applies a pair of class names during the `appear`, `enter`,
|
|
2088
|
-
* and `exit` states of the transition. The first class is applied and then a
|
|
2089
|
-
* second `*-active` class in order to activate the CSS transition. After the
|
|
2090
|
-
* transition, matching `*-done` class names are applied to persist the
|
|
2091
|
-
* transition state.
|
|
2092
|
-
*
|
|
2093
|
-
* ```jsx
|
|
2094
|
-
* function App() {
|
|
2095
|
-
* const [inProp, setInProp] = useState(false);
|
|
2096
|
-
* return (
|
|
2097
|
-
* <div>
|
|
2098
|
-
* <CSSTransition in={inProp} timeout={200} classNames="my-node">
|
|
2099
|
-
* <div>
|
|
2100
|
-
* {"I'll receive my-node-* classes"}
|
|
2101
|
-
* </div>
|
|
2102
|
-
* </CSSTransition>
|
|
2103
|
-
* <button type="button" onClick={() => setInProp(true)}>
|
|
2104
|
-
* Click to Enter
|
|
2105
|
-
* </button>
|
|
2106
|
-
* </div>
|
|
2107
|
-
* );
|
|
2108
|
-
* }
|
|
2109
|
-
* ```
|
|
2110
|
-
*
|
|
2111
|
-
* When the `in` prop is set to `true`, the child component will first receive
|
|
2112
|
-
* the class `example-enter`, then the `example-enter-active` will be added in
|
|
2113
|
-
* the next tick. `CSSTransition` [forces a
|
|
2114
|
-
* reflow](https://github.com/reactjs/react-transition-group/blob/5007303e729a74be66a21c3e2205e4916821524b/src/CSSTransition.js#L208-L215)
|
|
2115
|
-
* between before adding the `example-enter-active`. This is an important trick
|
|
2116
|
-
* because it allows us to transition between `example-enter` and
|
|
2117
|
-
* `example-enter-active` even though they were added immediately one after
|
|
2118
|
-
* another. Most notably, this is what makes it possible for us to animate
|
|
2119
|
-
* _appearance_.
|
|
2120
|
-
*
|
|
2121
|
-
* ```css
|
|
2122
|
-
* .my-node-enter {
|
|
2123
|
-
* opacity: 0;
|
|
2124
|
-
* }
|
|
2125
|
-
* .my-node-enter-active {
|
|
2126
|
-
* opacity: 1;
|
|
2127
|
-
* transition: opacity 200ms;
|
|
2128
|
-
* }
|
|
2129
|
-
* .my-node-exit {
|
|
2130
|
-
* opacity: 1;
|
|
2131
|
-
* }
|
|
2132
|
-
* .my-node-exit-active {
|
|
2133
|
-
* opacity: 0;
|
|
2134
|
-
* transition: opacity 200ms;
|
|
2135
|
-
* }
|
|
2136
|
-
* ```
|
|
2137
|
-
*
|
|
2138
|
-
* `*-active` classes represent which styles you want to animate **to**, so it's
|
|
2139
|
-
* important to add `transition` declaration only to them, otherwise transitions
|
|
2140
|
-
* might not behave as intended! This might not be obvious when the transitions
|
|
2141
|
-
* are symmetrical, i.e. when `*-enter-active` is the same as `*-exit`, like in
|
|
2142
|
-
* the example above (minus `transition`), but it becomes apparent in more
|
|
2143
|
-
* complex transitions.
|
|
2144
|
-
*
|
|
2145
|
-
* **Note**: If you're using the
|
|
2146
|
-
* [`appear`](http://reactcommunity.org/react-transition-group/transition#Transition-prop-appear)
|
|
2147
|
-
* prop, make sure to define styles for `.appear-*` classes as well.
|
|
2148
|
-
*/
|
|
2149
|
-
|
|
2150
|
-
|
|
2151
|
-
var CSSTransition = /*#__PURE__*/function (_React$Component) {
|
|
2152
|
-
_inheritsLoose(CSSTransition, _React$Component);
|
|
2153
|
-
|
|
2154
|
-
function CSSTransition() {
|
|
2155
|
-
var _this;
|
|
2156
|
-
|
|
2157
|
-
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
2158
|
-
args[_key] = arguments[_key];
|
|
2159
|
-
}
|
|
2160
|
-
|
|
2161
|
-
_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
|
|
2162
|
-
_this.appliedClasses = {
|
|
2163
|
-
appear: {},
|
|
2164
|
-
enter: {},
|
|
2165
|
-
exit: {}
|
|
2166
|
-
};
|
|
2167
|
-
|
|
2168
|
-
_this.onEnter = function (maybeNode, maybeAppearing) {
|
|
2169
|
-
var _this$resolveArgument = _this.resolveArguments(maybeNode, maybeAppearing),
|
|
2170
|
-
node = _this$resolveArgument[0],
|
|
2171
|
-
appearing = _this$resolveArgument[1];
|
|
2172
|
-
|
|
2173
|
-
_this.removeClasses(node, 'exit');
|
|
2174
|
-
|
|
2175
|
-
_this.addClass(node, appearing ? 'appear' : 'enter', 'base');
|
|
2176
|
-
|
|
2177
|
-
if (_this.props.onEnter) {
|
|
2178
|
-
_this.props.onEnter(maybeNode, maybeAppearing);
|
|
2179
|
-
}
|
|
2180
|
-
};
|
|
2181
|
-
|
|
2182
|
-
_this.onEntering = function (maybeNode, maybeAppearing) {
|
|
2183
|
-
var _this$resolveArgument2 = _this.resolveArguments(maybeNode, maybeAppearing),
|
|
2184
|
-
node = _this$resolveArgument2[0],
|
|
2185
|
-
appearing = _this$resolveArgument2[1];
|
|
2186
|
-
|
|
2187
|
-
var type = appearing ? 'appear' : 'enter';
|
|
2188
|
-
|
|
2189
|
-
_this.addClass(node, type, 'active');
|
|
2190
|
-
|
|
2191
|
-
if (_this.props.onEntering) {
|
|
2192
|
-
_this.props.onEntering(maybeNode, maybeAppearing);
|
|
2193
|
-
}
|
|
2194
|
-
};
|
|
2195
|
-
|
|
2196
|
-
_this.onEntered = function (maybeNode, maybeAppearing) {
|
|
2197
|
-
var _this$resolveArgument3 = _this.resolveArguments(maybeNode, maybeAppearing),
|
|
2198
|
-
node = _this$resolveArgument3[0],
|
|
2199
|
-
appearing = _this$resolveArgument3[1];
|
|
2200
|
-
|
|
2201
|
-
var type = appearing ? 'appear' : 'enter';
|
|
2202
|
-
|
|
2203
|
-
_this.removeClasses(node, type);
|
|
2204
|
-
|
|
2205
|
-
_this.addClass(node, type, 'done');
|
|
2206
|
-
|
|
2207
|
-
if (_this.props.onEntered) {
|
|
2208
|
-
_this.props.onEntered(maybeNode, maybeAppearing);
|
|
2209
|
-
}
|
|
2210
|
-
};
|
|
2211
|
-
|
|
2212
|
-
_this.onExit = function (maybeNode) {
|
|
2213
|
-
var _this$resolveArgument4 = _this.resolveArguments(maybeNode),
|
|
2214
|
-
node = _this$resolveArgument4[0];
|
|
2215
|
-
|
|
2216
|
-
_this.removeClasses(node, 'appear');
|
|
2217
|
-
|
|
2218
|
-
_this.removeClasses(node, 'enter');
|
|
2219
|
-
|
|
2220
|
-
_this.addClass(node, 'exit', 'base');
|
|
2221
|
-
|
|
2222
|
-
if (_this.props.onExit) {
|
|
2223
|
-
_this.props.onExit(maybeNode);
|
|
2224
|
-
}
|
|
2225
|
-
};
|
|
2226
|
-
|
|
2227
|
-
_this.onExiting = function (maybeNode) {
|
|
2228
|
-
var _this$resolveArgument5 = _this.resolveArguments(maybeNode),
|
|
2229
|
-
node = _this$resolveArgument5[0];
|
|
2230
|
-
|
|
2231
|
-
_this.addClass(node, 'exit', 'active');
|
|
2232
|
-
|
|
2233
|
-
if (_this.props.onExiting) {
|
|
2234
|
-
_this.props.onExiting(maybeNode);
|
|
2235
|
-
}
|
|
2236
|
-
};
|
|
2237
|
-
|
|
2238
|
-
_this.onExited = function (maybeNode) {
|
|
2239
|
-
var _this$resolveArgument6 = _this.resolveArguments(maybeNode),
|
|
2240
|
-
node = _this$resolveArgument6[0];
|
|
2241
|
-
|
|
2242
|
-
_this.removeClasses(node, 'exit');
|
|
2243
|
-
|
|
2244
|
-
_this.addClass(node, 'exit', 'done');
|
|
2245
|
-
|
|
2246
|
-
if (_this.props.onExited) {
|
|
2247
|
-
_this.props.onExited(maybeNode);
|
|
2248
|
-
}
|
|
2249
|
-
};
|
|
2250
|
-
|
|
2251
|
-
_this.resolveArguments = function (maybeNode, maybeAppearing) {
|
|
2252
|
-
return _this.props.nodeRef ? [_this.props.nodeRef.current, maybeNode] // here `maybeNode` is actually `appearing`
|
|
2253
|
-
: [maybeNode, maybeAppearing];
|
|
2254
|
-
};
|
|
2255
|
-
|
|
2256
|
-
_this.getClassNames = function (type) {
|
|
2257
|
-
var classNames = _this.props.classNames;
|
|
2258
|
-
var isStringClassNames = typeof classNames === 'string';
|
|
2259
|
-
var prefix = isStringClassNames && classNames ? classNames + "-" : '';
|
|
2260
|
-
var baseClassName = isStringClassNames ? "" + prefix + type : classNames[type];
|
|
2261
|
-
var activeClassName = isStringClassNames ? baseClassName + "-active" : classNames[type + "Active"];
|
|
2262
|
-
var doneClassName = isStringClassNames ? baseClassName + "-done" : classNames[type + "Done"];
|
|
2263
|
-
return {
|
|
2264
|
-
baseClassName: baseClassName,
|
|
2265
|
-
activeClassName: activeClassName,
|
|
2266
|
-
doneClassName: doneClassName
|
|
2267
|
-
};
|
|
2268
|
-
};
|
|
2269
|
-
|
|
2270
|
-
return _this;
|
|
2271
|
-
}
|
|
2272
|
-
|
|
2273
|
-
var _proto = CSSTransition.prototype;
|
|
2274
|
-
|
|
2275
|
-
_proto.addClass = function addClass(node, type, phase) {
|
|
2276
|
-
var className = this.getClassNames(type)[phase + "ClassName"];
|
|
2277
|
-
|
|
2278
|
-
var _this$getClassNames = this.getClassNames('enter'),
|
|
2279
|
-
doneClassName = _this$getClassNames.doneClassName;
|
|
2280
|
-
|
|
2281
|
-
if (type === 'appear' && phase === 'done' && doneClassName) {
|
|
2282
|
-
className += " " + doneClassName;
|
|
2283
|
-
} // This is to force a repaint,
|
|
2284
|
-
// which is necessary in order to transition styles when adding a class name.
|
|
2285
|
-
|
|
2286
|
-
|
|
2287
|
-
if (phase === 'active') {
|
|
2288
|
-
if (node) forceReflow(node);
|
|
2289
|
-
}
|
|
2290
|
-
|
|
2291
|
-
if (className) {
|
|
2292
|
-
this.appliedClasses[type][phase] = className;
|
|
2293
|
-
|
|
2294
|
-
_addClass(node, className);
|
|
2295
|
-
}
|
|
2296
|
-
};
|
|
2297
|
-
|
|
2298
|
-
_proto.removeClasses = function removeClasses(node, type) {
|
|
2299
|
-
var _this$appliedClasses$ = this.appliedClasses[type],
|
|
2300
|
-
baseClassName = _this$appliedClasses$.base,
|
|
2301
|
-
activeClassName = _this$appliedClasses$.active,
|
|
2302
|
-
doneClassName = _this$appliedClasses$.done;
|
|
2303
|
-
this.appliedClasses[type] = {};
|
|
2304
|
-
|
|
2305
|
-
if (baseClassName) {
|
|
2306
|
-
removeClass(node, baseClassName);
|
|
2307
|
-
}
|
|
2308
|
-
|
|
2309
|
-
if (activeClassName) {
|
|
2310
|
-
removeClass(node, activeClassName);
|
|
2311
|
-
}
|
|
2312
|
-
|
|
2313
|
-
if (doneClassName) {
|
|
2314
|
-
removeClass(node, doneClassName);
|
|
2315
|
-
}
|
|
2316
|
-
};
|
|
2317
|
-
|
|
2318
|
-
_proto.render = function render() {
|
|
2319
|
-
var _this$props = this.props;
|
|
2320
|
-
_this$props.classNames;
|
|
2321
|
-
var props = _objectWithoutPropertiesLoose(_this$props, ["classNames"]);
|
|
2322
|
-
|
|
2323
|
-
return /*#__PURE__*/React.createElement(Transition$1, _extends({}, props, {
|
|
2324
|
-
onEnter: this.onEnter,
|
|
2325
|
-
onEntered: this.onEntered,
|
|
2326
|
-
onEntering: this.onEntering,
|
|
2327
|
-
onExit: this.onExit,
|
|
2328
|
-
onExiting: this.onExiting,
|
|
2329
|
-
onExited: this.onExited
|
|
2330
|
-
}));
|
|
2331
|
-
};
|
|
2332
|
-
|
|
2333
|
-
return CSSTransition;
|
|
2334
|
-
}(React.Component);
|
|
2335
|
-
|
|
2336
|
-
CSSTransition.defaultProps = {
|
|
2337
|
-
classNames: ''
|
|
2338
|
-
};
|
|
2339
|
-
CSSTransition.propTypes = {};
|
|
2340
|
-
var CSSTransition$1 = CSSTransition;
|
|
2341
|
-
|
|
2342
1572
|
var Body = function Body(_ref) {
|
|
2343
1573
|
var children = _ref.children,
|
|
2344
1574
|
_ref$className = _ref.className,
|
|
@@ -2391,7 +1621,7 @@ var Slider = function Slider(_ref) {
|
|
|
2391
1621
|
});
|
|
2392
1622
|
return /*#__PURE__*/React.createElement(Portal, {
|
|
2393
1623
|
rootId: "neeto-filters-portal"
|
|
2394
|
-
}, /*#__PURE__*/React.createElement(CSSTransition
|
|
1624
|
+
}, /*#__PURE__*/React.createElement(CSSTransition, {
|
|
2395
1625
|
unmountOnExit: true,
|
|
2396
1626
|
appear: isOpen,
|
|
2397
1627
|
classNames: "neeto-filters-slider",
|
|
@@ -3034,7 +2264,7 @@ var Text = function Text(_ref) {
|
|
|
3034
2264
|
// Reset states when "Clear filters" button is clicked.
|
|
3035
2265
|
useEffect(function () {
|
|
3036
2266
|
(isEmpty(filters) || isNil(filter)) && setInputValue("");
|
|
3037
|
-
}, [
|
|
2267
|
+
}, [filter]);
|
|
3038
2268
|
useEffect(function () {
|
|
3039
2269
|
if (!debouncedInputValue) {
|
|
3040
2270
|
!isUndefinedOrEmpty(filter) && handleApplyFilter({
|
|
@@ -3424,12 +2654,12 @@ var Filters = withT(function (_ref) {
|
|
|
3424
2654
|
isSearchable = _ref$isSearchable === void 0 ? false : _ref$isSearchable,
|
|
3425
2655
|
className = _ref.className,
|
|
3426
2656
|
_ref$onSelectorsChang = _ref.onSelectorsChange,
|
|
3427
|
-
onSelectorsChange = _ref$onSelectorsChang === void 0 ? noop
|
|
2657
|
+
onSelectorsChange = _ref$onSelectorsChang === void 0 ? noop : _ref$onSelectorsChang,
|
|
3428
2658
|
_ref$keyword = _ref.keyword,
|
|
3429
2659
|
keyword = _ref$keyword === void 0 ? {
|
|
3430
2660
|
node: "",
|
|
3431
2661
|
value: "",
|
|
3432
|
-
setValue: noop
|
|
2662
|
+
setValue: noop
|
|
3433
2663
|
} : _ref$keyword,
|
|
3434
2664
|
childrenKeys = _ref.childrenKeys,
|
|
3435
2665
|
children = _ref.children;
|
|
@@ -3734,7 +2964,7 @@ var Segments = function Segments(_ref) {
|
|
|
3734
2964
|
var entity = _ref.entity,
|
|
3735
2965
|
columns = _ref.columns,
|
|
3736
2966
|
_ref$setIsFilterPaneO = _ref.setIsFilterPaneOpen,
|
|
3737
|
-
setIsFilterPaneOpen = _ref$setIsFilterPaneO === void 0 ? noop
|
|
2967
|
+
setIsFilterPaneOpen = _ref$setIsFilterPaneO === void 0 ? noop : _ref$setIsFilterPaneO,
|
|
3738
2968
|
_ref$defaultSegmentNa = _ref.defaultSegmentName,
|
|
3739
2969
|
defaultSegmentName = _ref$defaultSegmentNa === void 0 ? t$1("neetoFilters.common.allResults") : _ref$defaultSegmentNa;
|
|
3740
2970
|
return function () {
|