@geneui/components
Version:
The Gene UI components library designed for BI tools
494 lines (481 loc) • 31.6 kB
JavaScript
import React__default, { forwardRef, useState, useMemo, useEffect, useCallback } from 'react';
import PropTypes from 'prop-types';
import { P as PublicDraggable, C as ConnectedDroppable, D as DragDropContext } from '../react-beautiful-dnd.esm-689d4641.js';
import { c as classnames } from '../index-031ff73c.js';
import { n as noop } from '../index-a0e4e333.js';
import '../configs-00612ce0.js';
import useDidMount from '../hooks/useDidMount.js';
import { _ as _extends } from '../_rollupPluginBabelHelpers-e8fb2e5c.js';
import Icon from '../Icon/index.js';
import Empty from '../Empty/index.js';
import Search from '../Search/index.js';
import CustomScrollbar from '../Scrollbar/index.js';
import Checkbox from '../Checkbox/index.js';
import { s as styleInject } from '../style-inject.es-746bb8ed.js';
import Button from '../Button/index.js';
import { T as Tooltip } from '../index-6d7e99cd.js';
import '../objectWithoutPropertiesLoose-d8a4a68c.js';
import '../redux-b3e598ca.js';
import 'react-dom';
import '../dateValidation-67caec66.js';
import '../_commonjsHelpers-24198af3.js';
import '../tslib.es6-f211516f.js';
import '../ExtendedInput/index.js';
import '../hooks/useDeviceType.js';
import '../hooks/useWindowSize.js';
import '../hooks/useDebounce.js';
import '../useEllipsisDetection-4d997d5d.js';
import '../SuggestionList/index.js';
import '../hooks/useKeyDown.js';
import '../hooks/useClickOutside.js';
import '../config-1053d64d.js';
import '../callAfterDelay-7272faca.js';
import '../GeneUIProvider/index.js';
import '../checkboxRadioSwitcher-5b69d7bd.js';
import '../guid-8ddf77b3.js';
function n(n){for(var r=arguments.length,t=Array(r>1?r-1:0),e=1;e<r;e++)t[e-1]=arguments[e];if("production"!==process.env.NODE_ENV){var i=Y[n],o=i?"function"==typeof i?i.apply(null,t):i:"unknown error nr: "+n;throw Error("[Immer] "+o)}throw Error("[Immer] minified error nr: "+n+(t.length?" "+t.map((function(n){return "'"+n+"'"})).join(","):"")+". Find the full error at: https://bit.ly/3cXEKWf")}function r(n){return !!n&&!!n[Q]}function t(n){var r;return !!n&&(function(n){if(!n||"object"!=typeof n)return !1;var r=Object.getPrototypeOf(n);if(null===r)return !0;var t=Object.hasOwnProperty.call(r,"constructor")&&r.constructor;return t===Object||"function"==typeof t&&Function.toString.call(t)===Z}(n)||Array.isArray(n)||!!n[L]||!!(null===(r=n.constructor)||void 0===r?void 0:r[L])||s(n)||v(n))}function i(n,r,t){void 0===t&&(t=!1),0===o(n)?(t?Object.keys:nn)(n).forEach((function(e){t&&"symbol"==typeof e||r(e,n[e],n);})):n.forEach((function(t,e){return r(e,t,n)}));}function o(n){var r=n[Q];return r?r.i>3?r.i-4:r.i:Array.isArray(n)?1:s(n)?2:v(n)?3:0}function u(n,r){return 2===o(n)?n.has(r):Object.prototype.hasOwnProperty.call(n,r)}function a(n,r){return 2===o(n)?n.get(r):n[r]}function f(n,r,t){var e=o(n);2===e?n.set(r,t):3===e?n.add(t):n[r]=t;}function c(n,r){return n===r?0!==n||1/n==1/r:n!=n&&r!=r}function s(n){return X&&n instanceof Map}function v(n){return q&&n instanceof Set}function p(n){return n.o||n.t}function l(n){if(Array.isArray(n))return Array.prototype.slice.call(n);var r=rn(n);delete r[Q];for(var t=nn(r),e=0;e<t.length;e++){var i=t[e],o=r[i];!1===o.writable&&(o.writable=!0,o.configurable=!0),(o.get||o.set)&&(r[i]={configurable:!0,writable:!0,enumerable:o.enumerable,value:n[i]});}return Object.create(Object.getPrototypeOf(n),r)}function d(n,e){return void 0===e&&(e=!1),y(n)||r(n)||!t(n)||(o(n)>1&&(n.set=n.add=n.clear=n.delete=h),Object.freeze(n),e&&i(n,(function(n,r){return d(r,!0)}),!0)),n}function h(){n(2);}function y(n){return null==n||"object"!=typeof n||Object.isFrozen(n)}function b(r){var t=tn[r];return t||n(18,r),t}function _(){return "production"===process.env.NODE_ENV||U||n(0),U}function j(n,r){r&&(b("Patches"),n.u=[],n.s=[],n.v=r);}function g(n){O(n),n.p.forEach(S),n.p=null;}function O(n){n===U&&(U=n.l);}function w(n){return U={p:[],l:U,h:n,m:!0,_:0}}function S(n){var r=n[Q];0===r.i||1===r.i?r.j():r.g=!0;}function P(r,e){e._=e.p.length;var i=e.p[0],o=void 0!==r&&r!==i;return e.h.O||b("ES5").S(e,r,o),o?(i[Q].P&&(g(e),n(4)),t(r)&&(r=M(e,r),e.l||x(e,r)),e.u&&b("Patches").M(i[Q].t,r,e.u,e.s)):r=M(e,i,[]),g(e),e.u&&e.v(e.u,e.s),r!==H?r:void 0}function M(n,r,t){if(y(r))return r;var e=r[Q];if(!e)return i(r,(function(i,o){return A(n,e,r,i,o,t)}),!0),r;if(e.A!==n)return r;if(!e.P)return x(n,e.t,!0),e.t;if(!e.I){e.I=!0,e.A._--;var o=4===e.i||5===e.i?e.o=l(e.k):e.o,u=o,a=!1;3===e.i&&(u=new Set(o),o.clear(),a=!0),i(u,(function(r,i){return A(n,e,o,r,i,t,a)})),x(n,o,!1),t&&n.u&&b("Patches").N(e,t,n.u,n.s);}return e.o}function A(e,i,o,a,c,s,v){if("production"!==process.env.NODE_ENV&&c===o&&n(5),r(c)){var p=M(e,c,s&&i&&3!==i.i&&!u(i.R,a)?s.concat(a):void 0);if(f(o,a,p),!r(p))return;e.m=!1;}else v&&o.add(c);if(t(c)&&!y(c)){if(!e.h.D&&e._<1)return;M(e,c),i&&i.A.l||x(e,c);}}function x(n,r,t){void 0===t&&(t=!1),!n.l&&n.h.D&&n.m&&d(r,t);}function z(n,r){var t=n[Q];return (t?p(t):n)[r]}function I(n,r){if(r in n)for(var t=Object.getPrototypeOf(n);t;){var e=Object.getOwnPropertyDescriptor(t,r);if(e)return e;t=Object.getPrototypeOf(t);}}function k(n){n.P||(n.P=!0,n.l&&k(n.l));}function E(n){n.o||(n.o=l(n.t));}function N(n,r,t){var e=s(r)?b("MapSet").F(r,t):v(r)?b("MapSet").T(r,t):n.O?function(n,r){var t=Array.isArray(n),e={i:t?1:0,A:r?r.A:_(),P:!1,I:!1,R:{},l:r,t:n,k:null,o:null,j:null,C:!1},i=e,o=en;t&&(i=[e],o=on);var u=Proxy.revocable(i,o),a=u.revoke,f=u.proxy;return e.k=f,e.j=a,f}(r,t):b("ES5").J(r,t);return (t?t.A:_()).p.push(e),e}function R(e){return r(e)||n(22,e),function n(r){if(!t(r))return r;var e,u=r[Q],c=o(r);if(u){if(!u.P&&(u.i<4||!b("ES5").K(u)))return u.t;u.I=!0,e=D(r,c),u.I=!1;}else e=D(r,c);return i(e,(function(r,t){u&&a(u.t,r)===t||f(e,r,n(t));})),3===c?new Set(e):e}(e)}function D(n,r){switch(r){case 2:return new Map(n);case 3:return Array.from(n)}return l(n)}var G,U,W="undefined"!=typeof Symbol&&"symbol"==typeof Symbol("x"),X="undefined"!=typeof Map,q="undefined"!=typeof Set,B="undefined"!=typeof Proxy&&void 0!==Proxy.revocable&&"undefined"!=typeof Reflect,H=W?Symbol.for("immer-nothing"):((G={})["immer-nothing"]=!0,G),L=W?Symbol.for("immer-draftable"):"__$immer_draftable",Q=W?Symbol.for("immer-state"):"__$immer_state",Y={0:"Illegal state",1:"Immer drafts cannot have computed properties",2:"This object has been frozen and should not be mutated",3:function(n){return "Cannot use a proxy that has been revoked. Did you pass an object from inside an immer function to an async process? "+n},4:"An immer producer returned a new value *and* modified its draft. Either return a new value *or* modify the draft.",5:"Immer forbids circular references",6:"The first or second argument to `produce` must be a function",7:"The third argument to `produce` must be a function or undefined",8:"First argument to `createDraft` must be a plain object, an array, or an immerable object",9:"First argument to `finishDraft` must be a draft returned by `createDraft`",10:"The given draft is already finalized",11:"Object.defineProperty() cannot be used on an Immer draft",12:"Object.setPrototypeOf() cannot be used on an Immer draft",13:"Immer only supports deleting array indices",14:"Immer only supports setting array indices and the 'length' property",15:function(n){return "Cannot apply patch, path doesn't resolve: "+n},16:'Sets cannot have "replace" patches.',17:function(n){return "Unsupported patch operation: "+n},18:function(n){return "The plugin for '"+n+"' has not been loaded into Immer. To enable the plugin, import and call `enable"+n+"()` when initializing your application."},20:"Cannot use proxies if Proxy, Proxy.revocable or Reflect are not available",21:function(n){return "produce can only be called on things that are draftable: plain objects, arrays, Map, Set or classes that are marked with '[immerable]: true'. Got '"+n+"'"},22:function(n){return "'current' expects a draft, got: "+n},23:function(n){return "'original' expects a draft, got: "+n},24:"Patching reserved attributes like __proto__, prototype and constructor is not allowed"},Z=""+Object.prototype.constructor,nn="undefined"!=typeof Reflect&&Reflect.ownKeys?Reflect.ownKeys:void 0!==Object.getOwnPropertySymbols?function(n){return Object.getOwnPropertyNames(n).concat(Object.getOwnPropertySymbols(n))}:Object.getOwnPropertyNames,rn=Object.getOwnPropertyDescriptors||function(n){var r={};return nn(n).forEach((function(t){r[t]=Object.getOwnPropertyDescriptor(n,t);})),r},tn={},en={get:function(n,r){if(r===Q)return n;var e=p(n);if(!u(e,r))return function(n,r,t){var e,i=I(r,t);return i?"value"in i?i.value:null===(e=i.get)||void 0===e?void 0:e.call(n.k):void 0}(n,e,r);var i=e[r];return n.I||!t(i)?i:i===z(n.t,r)?(E(n),n.o[r]=N(n.A.h,i,n)):i},has:function(n,r){return r in p(n)},ownKeys:function(n){return Reflect.ownKeys(p(n))},set:function(n,r,t){var e=I(p(n),r);if(null==e?void 0:e.set)return e.set.call(n.k,t),!0;if(!n.P){var i=z(p(n),r),o=null==i?void 0:i[Q];if(o&&o.t===t)return n.o[r]=t,n.R[r]=!1,!0;if(c(t,i)&&(void 0!==t||u(n.t,r)))return !0;E(n),k(n);}return n.o[r]===t&&(void 0!==t||r in n.o)||Number.isNaN(t)&&Number.isNaN(n.o[r])||(n.o[r]=t,n.R[r]=!0),!0},deleteProperty:function(n,r){return void 0!==z(n.t,r)||r in n.t?(n.R[r]=!1,E(n),k(n)):delete n.R[r],n.o&&delete n.o[r],!0},getOwnPropertyDescriptor:function(n,r){var t=p(n),e=Reflect.getOwnPropertyDescriptor(t,r);return e?{writable:!0,configurable:1!==n.i||"length"!==r,enumerable:e.enumerable,value:t[r]}:e},defineProperty:function(){n(11);},getPrototypeOf:function(n){return Object.getPrototypeOf(n.t)},setPrototypeOf:function(){n(12);}},on={};i(en,(function(n,r){on[n]=function(){return arguments[0]=arguments[0][0],r.apply(this,arguments)};})),on.deleteProperty=function(r,t){return "production"!==process.env.NODE_ENV&&isNaN(parseInt(t))&&n(13),on.set.call(this,r,t,void 0)},on.set=function(r,t,e){return "production"!==process.env.NODE_ENV&&"length"!==t&&isNaN(parseInt(t))&&n(14),en.set.call(this,r[0],t,e,r[0])};var un=function(){function e(r){var e=this;this.O=B,this.D=!0,this.produce=function(r,i,o){if("function"==typeof r&&"function"!=typeof i){var u=i;i=r;var a=e;return function(n){var r=this;void 0===n&&(n=u);for(var t=arguments.length,e=Array(t>1?t-1:0),o=1;o<t;o++)e[o-1]=arguments[o];return a.produce(n,(function(n){var t;return (t=i).call.apply(t,[r,n].concat(e))}))}}var f;if("function"!=typeof i&&n(6),void 0!==o&&"function"!=typeof o&&n(7),t(r)){var c=w(e),s=N(e,r,void 0),v=!0;try{f=i(s),v=!1;}finally{v?g(c):O(c);}return "undefined"!=typeof Promise&&f instanceof Promise?f.then((function(n){return j(c,o),P(n,c)}),(function(n){throw g(c),n})):(j(c,o),P(f,c))}if(!r||"object"!=typeof r){if(void 0===(f=i(r))&&(f=r),f===H&&(f=void 0),e.D&&d(f,!0),o){var p=[],l=[];b("Patches").M(r,f,p,l),o(p,l);}return f}n(21,r);},this.produceWithPatches=function(n,r){if("function"==typeof n)return function(r){for(var t=arguments.length,i=Array(t>1?t-1:0),o=1;o<t;o++)i[o-1]=arguments[o];return e.produceWithPatches(r,(function(r){return n.apply(void 0,[r].concat(i))}))};var t,i,o=e.produce(n,r,(function(n,r){t=n,i=r;}));return "undefined"!=typeof Promise&&o instanceof Promise?o.then((function(n){return [n,t,i]})):[o,t,i]},"boolean"==typeof(null==r?void 0:r.useProxies)&&this.setUseProxies(r.useProxies),"boolean"==typeof(null==r?void 0:r.autoFreeze)&&this.setAutoFreeze(r.autoFreeze);}var i=e.prototype;return i.createDraft=function(e){t(e)||n(8),r(e)&&(e=R(e));var i=w(this),o=N(this,e,void 0);return o[Q].C=!0,O(i),o},i.finishDraft=function(r,t){var e=r&&r[Q];"production"!==process.env.NODE_ENV&&(e&&e.C||n(9),e.I&&n(10));var i=e.A;return j(i,t),P(void 0,i)},i.setAutoFreeze=function(n){this.D=n;},i.setUseProxies=function(r){r&&!B&&n(20),this.O=r;},i.applyPatches=function(n,t){var e;for(e=t.length-1;e>=0;e--){var i=t[e];if(0===i.path.length&&"replace"===i.op){n=i.value;break}}e>-1&&(t=t.slice(e+1));var o=b("Patches").$;return r(n)?o(n,t):this.produce(n,(function(n){return o(n,t)}))},e}(),an=new un,fn=an.produce;an.produceWithPatches.bind(an);an.setAutoFreeze.bind(an);an.setUseProxies.bind(an);an.applyPatches.bind(an);an.createDraft.bind(an);an.finishDraft.bind(an);var produce = fn;
const reorderElement = (container, startIndex, endIndex) => produce(container, draft => {
const [removed] = draft.splice(startIndex, 1);
draft.splice(endIndex, 0, removed);
});
const moveElement = (containers, source, destination) => produce(containers, draft => {
const [removed] = draft[source.droppableId].splice(source.index, 1);
draft[destination.droppableId].splice(destination.index, 0, removed);
});
const multiMoveElement = _ref => {
let {
containers,
selectedElements,
destination
} = _ref;
return produce(containers, draft => {
let removed = [];
Object.entries(selectedElements).forEach(_ref2 => {
let [source, elements] = _ref2;
removed = [...removed, ...draft[source].filter((_, index) => elements.includes(index))];
draft[source] = draft[source].filter((_, index) => !elements.includes(index));
});
draft[destination.droppableId].splice(destination.index, 0, ...removed);
});
};
const selectedInitialState = containers => {
const data = {};
Object.keys(containers).forEach(key => {
data[key] = [];
});
return data;
};
const unionIndexes = arr => Array.from(new Set(arr));
const addOrRemove = (data, value) => produce(data, draft => {
const index = draft.indexOf(value);
if (index === -1) {
draft.push(value);
} else {
draft.splice(index, 1);
}
});
const DEFAULT_TRANSLATE_MESSAGE = {
empty: 'No data',
dropHere: 'Drop Element Here',
multiSelectText: 'Elements',
moveTo: 'Move to'
};
const DEFAULT_DATA_ERROR_MESSAGE = 'TransferList: Be sure to send the defaultDate according to the documentation standard';
var css_248z$2 = "[data-gene-ui-version=\"2.16.5\"] .bc-transfer-element{grid-column-gap:1.2rem;--crs-grid-column-gap:2rem;align-items:center;cursor:pointer;display:grid;grid-template-columns:1fr auto;margin:.75rem 0;overflow:hidden;padding:0 1.5rem 0 2rem;transition:color .4s,background .4s,opacity .4s,box-shadow .4s;width:100%}[data-gene-ui-version=\"2.16.5\"] .bc-transfer-element:not(.minimalistic){background:var(--background);border:1px solid rgba(var(--background-sc-rgb),.1);border-radius:1rem;box-shadow:inset 0 0 0 4.2rem rgba(var(--hero-rgb),0),0 .2rem .4rem 0 rgba(var(--hero-rgb),0);height:4.2rem}@media (hover:hover){[data-gene-ui-version=\"2.16.5\"] .bc-transfer-element:not(.minimalistic):hover{border-color:rgba(var(--hero-rgb),.2);box-shadow:inset 0 0 0 4.2rem rgba(var(--hero-rgb),.1),0 .2rem .4rem 0 rgba(var(--hero-rgb),0);color:var(--hero)}}[data-gene-ui-version=\"2.16.5\"] .bc-transfer-element.hovered{border-color:rgba(var(--hero-rgb),.2);box-shadow:inset 0 0 0 4.2rem rgba(var(--hero-rgb),.1),0 .2rem .4rem 0 rgba(var(--hero-rgb),0);color:var(--hero)}[data-gene-ui-version=\"2.16.5\"] .bc-transfer-element.disabled{opacity:.5;pointer-events:none}[data-gene-ui-version=\"2.16.5\"] .bc-transfer-element.dragged{border-color:rgba(var(--hero-rgb),.1);box-shadow:inset 0 0 0 4.2rem rgba(var(--hero-rgb),.1),0 .2rem .4rem 0 rgba(var(--hero-rgb),.1);color:var(--hero)}[data-gene-ui-version=\"2.16.5\"] .bc-transfer-element.readOnly{cursor:default}[data-gene-ui-version=\"2.16.5\"] .bc-transfer-element.readOnly .crs-holder .crs-component{display:none}[data-gene-ui-version=\"2.16.5\"] .bc-transfer-element>.icon{cursor:grab}[data-gene-ui-version=\"2.16.5\"] .bc-transfer-element>.icon:active{cursor:grabbing}[data-gene-ui-version=\"2.16.5\"] .bc-transfer-element .crs-holder{pointer-events:none}";
styleInject(css_248z$2);
const TransferElement = /*#__PURE__*/forwardRef((_ref, ref) => {
let {
disabled,
hovered,
dragged,
checked,
label,
onClick,
readOnly,
minimalistic,
indeterminate
} = _ref;
return /*#__PURE__*/React__default.createElement("div", {
ref: ref,
onClick: onClick,
className: classnames('bc-transfer-element', 'crs-external-hover', 'crs-external-active', {
minimalistic,
disabled,
hovered,
dragged,
readOnly
})
}, /*#__PURE__*/React__default.createElement(Checkbox, {
indeterminate: indeterminate,
checked: checked,
label: label
}), !readOnly && !minimalistic && /*#__PURE__*/React__default.createElement(Icon, {
type: "bc-icon-drag"
}));
});
function TransferListItem(_ref) {
let {
index,
element,
onClick,
selected,
readOnly,
isDragActive,
multiSelectText,
selectedElementsLength
} = _ref;
const isDisabled = readOnly || element.disabled;
const handleClick = event => !isDisabled && onClick(index, event);
return /*#__PURE__*/React__default.createElement(PublicDraggable, {
isDragDisabled: isDisabled,
draggableId: element.id,
index: index
}, (_ref2, _ref3) => {
let {
innerRef,
draggableProps,
dragHandleProps
} = _ref2;
let {
isDragging
} = _ref3;
return /*#__PURE__*/React__default.createElement("div", _extends({
ref: innerRef
}, draggableProps, dragHandleProps, {
onClick: handleClick,
className: "bc-tl-item"
}), /*#__PURE__*/React__default.createElement(TransferElement, {
label: isDragging && selectedElementsLength > 1 ? "".concat(selectedElementsLength, " ").concat(multiSelectText) : element.title,
checked: selected,
readOnly: readOnly,
dragged: isDragging,
disabled: element.disabled || selected && isDragActive && !isDragging
}));
});
}
function TransferListButtons(_ref) {
let {
onTransmit,
send,
receive,
readOnly
} = _ref;
const handleReceive = () => onTransmit(send.id, receive.id);
const handleSend = () => onTransmit(receive.id, send.id);
return /*#__PURE__*/React__default.createElement("div", {
className: "bc-tl-buttons"
}, /*#__PURE__*/React__default.createElement(Tooltip, {
text: send.title
}, /*#__PURE__*/React__default.createElement(Button, {
onClick: handleSend,
disabled: readOnly || send.disabled,
icon: "bc-icon-arrow-right",
appearance: "clean"
})), /*#__PURE__*/React__default.createElement(Tooltip, {
text: receive.title
}, /*#__PURE__*/React__default.createElement(Button, {
onClick: handleReceive,
disabled: readOnly || receive.disabled,
icon: "bc-icon-arrow-left",
appearance: "clean"
})));
}
var css_248z$1 = "[data-gene-ui-version=\"2.16.5\"] .bc-transfer-container{width:100%}[data-gene-ui-version=\"2.16.5\"] .bc-transfer-container>li+li{border-top:1px solid var(--transfer-container-border-color,#0000)}[data-gene-ui-version=\"2.16.5\"] .bc-tl-head{align-items:center;display:flex;font:600 1.4rem/1.8rem var(--font-family);height:5.1rem;justify-content:space-between;padding:0 2rem}[data-gene-ui-version=\"2.16.5\"] .bc-tl-head h5{color:var(--hero)}[data-gene-ui-version=\"2.16.5\"] .bc-tl-head span{color:rgba(var(--background-sc-rgb),.5)}[data-gene-ui-version=\"2.16.5\"] .bc-tl-buttons{--button-external-size:4rem;border-width:medium;border-bottom:0 solid rgba(var(--background-sc-rgb),.1);border-left:1px solid rgba(var(--background-sc-rgb),.1);border-right:1px solid rgba(var(--background-sc-rgb),.1);border-top:0 solid rgba(var(--background-sc-rgb),.1);display:flex;flex-direction:column;flex-shrink:0;justify-content:center;padding:0 1rem}[data-gene-ui-version=\"2.16.5\"] .bc-tl-buttons>*+*{margin:1rem 0 0}[data-gene-ui-version=\"2.16.5\"] .bc-tl-search{padding:2rem}[data-gene-ui-version=\"2.16.5\"] .bc-tl-content-holder{height:var(--transfer-container-content-height);overflow:hidden;position:relative}[data-gene-ui-version=\"2.16.5\"] .bc-tl-content{display:flex;flex-direction:column;justify-content:flex-start;min-height:100%;padding:.7rem 2rem;width:100%}[data-gene-ui-version=\"2.16.5\"] .bc-tl-content>.bc-tl-item{opacity:1!important}[data-gene-ui-version=\"2.16.5\"] .bc-tl-placeholder{align-items:center;display:flex;height:100%;justify-content:center;left:0;padding:0 0 3.6rem;position:absolute;top:0;width:100%}[data-gene-ui-version=\"2.16.5\"] .bc-tl-drop-here{align-items:center;display:flex;flex-direction:column;font:600 1.4rem/1.8rem var(--font-family);text-align:center;width:100%}[data-gene-ui-version=\"2.16.5\"] .bc-tl-drop-here i{color:rgba(var(--hero-rgb),.1);font-size:11rem}";
styleInject(css_248z$1);
function TransferListContainer(_ref) {
let {
data,
isEditable,
messages,
onTransmit,
containerId,
isDragActive,
onElementSelect,
selectedElements,
onSelectAllElements,
transmissionButtons,
selectedElementsLength
} = _ref;
const [searchText, setSearchText] = useState('');
const filteredData = useMemo(() => {
const elements = [];
data.forEach((element, index) => {
if (element.title.toLowerCase().includes(searchText)) {
elements.push({
...element,
index
});
}
});
return elements;
}, [data, searchText]);
const selectableElements = useMemo(() => filteredData.filter(_ref2 => {
let {
disabled
} = _ref2;
return !disabled;
}), [filteredData]);
const isAllSelected = useMemo(() => {
const selectableElements = filteredData.filter(_ref3 => {
let {
disabled
} = _ref3;
return !disabled;
});
const filteredSelectedElements = selectableElements.filter(_ref4 => {
let {
index
} = _ref4;
return selectedElements.includes(index);
});
return !!selectableElements.length && selectableElements.length === filteredSelectedElements.length && selectedElements.length === filteredSelectedElements.length;
}, [selectedElements, filteredData]);
const handleSelectAll = () => onSelectAllElements(containerId, isAllSelected);
const handleElementClick = index => onElementSelect(containerId, index);
const handleSearchChange = event => {
setSearchText(event.target.value.toLowerCase());
};
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ConnectedDroppable, {
key: containerId,
droppableId: containerId,
isDropDisabled: isEditable,
children: (_ref5, _ref6) => {
let {
innerRef,
placeholder,
droppableProps
} = _ref5;
let {
isDraggingOver
} = _ref6;
return /*#__PURE__*/React__default.createElement("ul", {
className: classnames('bc-transfer-container', {
isDraggingOver,
isDragActive
})
}, /*#__PURE__*/React__default.createElement("li", {
className: "bc-tl-head"
}, /*#__PURE__*/React__default.createElement("h5", null, messages && messages.titles ? messages.titles[containerId] : containerId), /*#__PURE__*/React__default.createElement("span", null, messages && messages.countTitle && messages.countTitle[containerId], " (", selectedElements.length, "/", data.length, ")")), /*#__PURE__*/React__default.createElement("li", {
className: "bc-tl-search"
}, /*#__PURE__*/React__default.createElement(Search, {
inputSize: "big",
disabled: !data.length,
onChange: handleSearchChange
})), /*#__PURE__*/React__default.createElement("li", {
className: "bc-tl-content-holder"
}, /*#__PURE__*/React__default.createElement(CustomScrollbar, null, /*#__PURE__*/React__default.createElement("div", _extends({
ref: innerRef
}, droppableProps, {
className: "bc-tl-content"
}), filteredData.length ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, !isEditable && /*#__PURE__*/React__default.createElement(TransferElement, {
minimalistic: true,
label: "Select All",
checked: isAllSelected,
onClick: handleSelectAll,
disabled: !selectableElements.length,
indeterminate: !isAllSelected && !!selectedElements.length
}), filteredData.map(element => /*#__PURE__*/React__default.createElement(TransferListItem, {
key: element.id,
element: element,
readOnly: isEditable,
index: element.index,
isDragActive: isDragActive,
onClick: handleElementClick,
selectedElementsLength: selectedElementsLength,
selected: selectedElements.includes(element.index),
multiSelectText: messages.multiSelectText
}))) : /*#__PURE__*/React__default.createElement("div", {
className: "bc-tl-placeholder pointer-events-none"
}, isDraggingOver ? /*#__PURE__*/React__default.createElement("div", {
className: "bc-tl-drop-here"
}, /*#__PURE__*/React__default.createElement(Icon, {
type: "bc-icon-drag-here"
}), /*#__PURE__*/React__default.createElement("p", null, messages.dropHere)) : /*#__PURE__*/React__default.createElement(Empty, {
size: "medium",
type: "data",
appearance: "greyscale",
title: messages.empty
}))), placeholder)));
}
}), transmissionButtons && /*#__PURE__*/React__default.createElement(TransferListButtons, _extends({
readOnly: isEditable,
onTransmit: onTransmit
}, transmissionButtons)));
}
var css_248z = "[data-gene-ui-version=\"2.16.5\"] .bc-transfer-list{--transfer-container-border-color:rgba(var(--background-sc-rgb),0.1);--transfer-container-content-height:33.4rem;background:var(--background);box-shadow:0 0 0 1px var(--transfer-container-border-color);display:flex;grid-template-columns:1fr auto 1fr;-webkit-user-select:none;user-select:none;width:100%}[data-gene-ui-version=\"2.16.5\"] .bc-transfer-list .scroll-holder .scroll-content{z-index:inherit}";
styleInject(css_248z);
function TransferList(_ref) {
let {
onChange,
className,
isEditable,
defaultData,
translateMessages,
...props
} = _ref;
if (!(defaultData && Object.keys(defaultData).length)) {
console.error(DEFAULT_DATA_ERROR_MESSAGE);
return null;
}
const [isDragActive, setIsDragActive] = useState(false);
const [containers, setContainers] = useState(defaultData);
const [selectedElements, setSelectedElements] = useState(selectedInitialState(defaultData));
useEffect(() => {
setContainers(defaultData);
setSelectedElements(selectedInitialState(defaultData));
}, [defaultData, isEditable]);
const messages = useMemo(() => ({
...DEFAULT_TRANSLATE_MESSAGE,
...translateMessages
}), [translateMessages]);
const containersEntries = useMemo(() => Object.entries(containers), [containers]);
const selectedElementsLength = useMemo(() => selectedElements && Object.values(selectedElements).reduce((length, data) => {
length += data.length;
return length;
}, 0), [selectedElements]);
useDidMount(() => {
onChange(containers);
}, [onChange, containers]);
function handleDragStart() {
setIsDragActive(true);
}
function handleDragEnd(_ref2) {
let {
destination,
source
} = _ref2;
if (destination && source) {
if (selectedElementsLength) {
setContainers(containers => multiMoveElement({
containers,
destination,
selectedElements: {
...selectedElements,
[source.droppableId]: unionIndexes([...selectedElements[source.droppableId], source.index])
}
}));
} else if (destination.droppableId === source.droppableId) {
setContainers(prev => ({
...prev,
[source.droppableId]: reorderElement(prev[source.droppableId], source.index, destination.index)
}));
} else {
setContainers(prev => moveElement(prev, source, destination));
}
setSelectedElements(selectedInitialState(containers));
}
setIsDragActive(false);
}
const handleElementSelect = useCallback((source, index) => {
setSelectedElements(prev => ({
...prev,
[source]: addOrRemove(prev[source], index)
}));
}, []);
const handleSelectAllElements = useCallback((containerId, isUnselect) => {
let indexes = [];
if (!isUnselect) {
indexes = containers[containerId].map((_ref3, index) => {
let {
disabled
} = _ref3;
return !disabled && index;
}).filter(index => typeof index === 'number');
}
setSelectedElements(prev => ({
...prev,
[containerId]: indexes
}));
}, [containers]);
const transmissionButtons = useCallback(index => {
var _containersEntries$in, _containersEntries;
const prev = (_containersEntries$in = containersEntries[index]) === null || _containersEntries$in === void 0 ? void 0 : _containersEntries$in[0];
const next = (_containersEntries = containersEntries[index + 1]) === null || _containersEntries === void 0 ? void 0 : _containersEntries[0];
if (prev && next) {
return {
send: {
id: next,
disabled: !selectedElements[prev].length,
title: "".concat(messages.moveTo, " ").concat(messages.titles[next])
},
receive: {
id: prev,
disabled: !selectedElements[next].length,
title: "".concat(messages.moveTo, " ").concat(messages.titles[prev])
}
};
}
}, [messages, containersEntries, selectedElements]);
const handleTransmit = useCallback((ofContainer, toConteiner) => {
setContainers(prev => multiMoveElement({
containers: prev,
selectedElements: {
[ofContainer]: selectedElements[ofContainer]
},
destination: {
index: 0,
droppableId: toConteiner
}
}));
setSelectedElements(prev => ({
...prev,
[toConteiner]: prev[toConteiner].map(i => i + prev[ofContainer].length),
[ofContainer]: []
}));
}, [selectedElements]);
return /*#__PURE__*/React__default.createElement("div", {
className: classnames('bc-transfer-list', className)
}, /*#__PURE__*/React__default.createElement(DragDropContext, {
onDragEnd: handleDragEnd,
onDragStart: handleDragStart
}, containersEntries.map((_ref4, index) => {
let [id, data] = _ref4;
return /*#__PURE__*/React__default.createElement(TransferListContainer, {
key: id,
data: data,
containerId: id,
messages: messages,
isEditable: isEditable,
onTransmit: handleTransmit,
isDragActive: isDragActive,
onElementSelect: handleElementSelect,
selectedElements: selectedElements[id],
onSelectAllElements: handleSelectAllElements,
selectedElementsLength: selectedElementsLength,
transmissionButtons: transmissionButtons(index)
});
})));
}
TransferList.propTypes = {
/**
* DefaultData there should be objects with different keys names, inside which there should be container data
* { taskts: [], toDo: [{ id: 1, name: "Element 1", disabled: false }] }
*/
defaultData: PropTypes.object.isRequired,
/**
* onChange listen to the change in the container and return you the new object
*/
onChange: PropTypes.func,
/**
* Using translateMessages prop you can add/change the text title of the containers, count subtitle, empty Text, etc.
*/
translateMessages: PropTypes.shape({
titles: PropTypes.object,
countTitle: PropTypes.object,
dropHere: PropTypes.string,
empty: PropTypes.string
}),
/**
* CSS classname to add on the outer container.
*/
className: PropTypes.string,
/**
* When do you send: false
* Hide Select All buttons / items checkboxes / disabled all drag and drop functionality
*/
isEditable: PropTypes.bool
};
TransferList.defaultProps = {
onChange: noop
};
export { TransferList as default };