intelicoreact 1.6.22 → 1.6.24

package/dist/Atomic/UI/CircleProgressBar/CircleProgressBar.js

@@ -1 +1,109 @@
-function r(r,t){(null==t||t>r.length)&&(t=r.length);for(var e=0,i=Array(t);e<t;e++)i[e]=r[e];return i}import{jsx as t,jsxs as e}from"react/jsx-runtime";import{useEffect as i,useState as s}from"react";import o from"classnames";import"./CircleProgressBar.scss";export default function(n){var a,l=n.amount,c=n.totalAmount,d=n.isReverseType,f=n.children,m=n.className,u=n.colors,p=n.isInnerLine,h=n.radius,g=void 0===h?59:h,y=n.strokeWidth,v=n.innerLineStrokeWidth,b=n.testId,x=Math.round(2*Math.PI*g),S=l<c?Math.round(l/c*100):100,k={start:"#6b81dd",finish:"#f06d8d",meter:"#ffcad6"},_=(a=s(d?String(0):x),function(r){if(Array.isArray(r))return r}(a)||function(r,t){var e,i,s=null==r?null:"undefined"!=typeof Symbol&&r[Symbol.iterator]||r["@@iterator"];if(null!=s){var o=[],n=!0,a=!1;try{for(s=s.call(r);!(n=(e=s.next()).done)&&(o.push(e.value),o.length!==t);n=!0);}catch(r){a=!0,i=r}finally{try{n||null==s.return||s.return()}finally{if(a)throw i}}return o}}(a,2)||function(t,e){if(t){if("string"==typeof t)return r(t,2);var i=Object.prototype.toString.call(t).slice(8,-1);if("Object"===i&&t.constructor&&(i=t.constructor.name),"Map"===i||"Set"===i)return Array.from(i);if("Arguments"===i||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(i))return r(t,e)}}(a,2)||function(){throw TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),A=_[0],j=_[1];return i(function(){j(x-x*S/100)},[S]),e("div",{"data-testid":void 0===b?"circle-progress-bar":b,className:o("limit-progress-bar",{"limit-progress-bar--reverse":d},m),children:[e("svg",{className:"limit-progress-bar__progress",width:"124",height:"124",viewBox:"0 0 124 124",children:[t("defs",{children:d?e("linearGradient",{id:"limit-progress-bar-linear-gradient-reverse",x1:"0",y1:"1",x2:"0",y2:"0",children:[t("stop",{offset:"0",stopColor:u.finish||k.finish}),t("stop",{offset:"1",stopColor:u.start||k.start})]}):e("linearGradient",{id:"limit-progress-bar-linear-gradient",x1:"0",y1:"1",x2:"0",y2:"0",children:[t("stop",{offset:"0",stopColor:u.start||k.start}),t("stop",{offset:"1",stopColor:u.finish||k.finish})]})}),t("circle",{className:"limit-progress-bar__meter",cx:g,cy:g,r:g,stroke:p?u.meter||k.meter:"",strokeWidth:String(void 0===v?2:v)}),t("circle",{className:"limit-progress-bar__value",cx:g,cy:g,r:g,strokeWidth:String(void 0===y?2:y),stroke:"url(#limit-progress-bar-linear-gradient".concat(d?"-reverse":"",")"),style:{strokeDasharray:x,strokeDashoffset:A}})]}),t("div",{className:"limit-progress-bar__content",children:f})]})}
+import React, { useEffect, useState } from "react";
+
+import cn from "classnames";
+
+import "./CircleProgressBar.scss";
+
+const CircleProgressBar = ({
+  amount,
+  totalAmount,
+  isReverseType,
+  children,
+  className,
+  colors,
+  isInnerLine,
+  radius = 59,
+  strokeWidth = 2,
+  innerLineStrokeWidth = 2,
+  testId = "circle-progress-bar",
+}) => {
+  const circumference = Math.round(2 * Math.PI * radius);
+  const amountProgress =
+    amount < totalAmount ? Math.round((amount / totalAmount) * 100) : 100; //%
+  const defaultColors = {
+    start: "#6b81dd",
+    finish: "#f06d8d",
+    meter: "#ffcad6",
+  };
+
+  const [strokeDashoffset, setStrokeDashoffset] = useState(isReverseType ? String(0) : circumference);
+
+  useEffect(() => {
+    setStrokeDashoffset(circumference - (circumference * amountProgress) / 100);
+  }, [amountProgress]);
+
+  return (
+    <div
+      data-testid={testId}
+      className={cn("limit-progress-bar", { "limit-progress-bar--reverse": isReverseType }, className)}
+    >
+      <svg
+        className="limit-progress-bar__progress"
+        width="124"
+        height="124"
+        viewBox="0 0 124 124"
+      >
+        <defs>
+          {isReverseType ? (
+            <linearGradient
+              id="limit-progress-bar-linear-gradient-reverse"
+              x1="0"
+              y1="1"
+              x2="0"
+              y2="0"
+            >
+              <stop
+                offset="0"
+                stopColor={colors.finish || defaultColors.finish}
+              />
+              <stop
+                offset="1"
+                stopColor={colors.start || defaultColors.start}
+              />
+            </linearGradient>
+          ) : (
+            <linearGradient
+              id="limit-progress-bar-linear-gradient"
+              x1="0"
+              y1="1"
+              x2="0"
+              y2="0"
+            >
+              <stop
+                offset="0"
+                stopColor={colors.start || defaultColors.start}
+              />
+              <stop
+                offset="1"
+                stopColor={colors.finish || defaultColors.finish}
+              />
+            </linearGradient>
+          )}
+        </defs>
+        <circle
+          className="limit-progress-bar__meter"
+          cx={radius}
+          cy={radius}
+          r={radius}
+          stroke={!isInnerLine ? "" : colors.meter || defaultColors.meter}
+          strokeWidth={String(innerLineStrokeWidth)}
+        />
+        <circle
+          className="limit-progress-bar__value"
+          cx={radius}
+          cy={radius}
+          r={radius}
+          strokeWidth={String(strokeWidth)}
+          stroke={`url(#limit-progress-bar-linear-gradient${isReverseType ? "-reverse" : ""})`}
+          style={{
+            strokeDasharray: circumference,
+            strokeDashoffset,
+          }}
+        />
+      </svg>
+      <div className="limit-progress-bar__content">{children}</div>
+    </div>
+  );
+};
+
+export default CircleProgressBar;

package/dist/Atomic/UI/DateTime/DateTime.js

@@ -1 +1,57 @@
-import{jsx as t,jsxs as e}from"react/jsx-runtime";import{useMemo as a}from"react";import r from"classnames";import m from"moment-timezone";import"./DateTime.scss";var o="date-time";export default function(i){var s,c,n,d=i.className,l=i.value,u=i.valueFormat,f=i.dateFormat,p=i.timeFormat,v=i.isNoDate,N=i.isNoTime,_=i.testId,b=void 0===_?"date-time":_,j=f||"DD.MM.YYYY",x=p||"HH:mm:ss",D=a(function(){return(u?m(l,u):m(l)).format(j)},[l,u,j]),Y=a(function(){return(u?m(l,u):m(l)).format(x)},[l,u,x]);return e("div",{"data-testid":b,className:r(o,d),children:[!v&&t("span",{"data-testid":"".concat(b,"-date"),className:r("".concat(o,"__date")),children:D}),!N&&t("span",{"data-testid":"".concat(b,"-time"),className:r("".concat(o,"__time"),(s={},c="".concat(o,"_color--pause"),n=!v,c in s?Object.defineProperty(s,c,{value:n,enumerable:!0,configurable:!0,writable:!0}):s[c]=n,s)),children:Y})]})}
+import React, { useMemo } from "react";
+
+import cn from "classnames";
+import moment from "moment-timezone";
+
+import "./DateTime.scss";
+
+const RC = "date-time";
+
+const DEFAULT_DATE_FORMAT = "DD.MM.YYYY";
+const DEFAULT_TIME_FORMAT = "HH:mm:ss";
+
+const DateTime = ({
+  className,
+  value,
+  valueFormat,
+  dateFormat: inputDateFormat,
+  timeFormat: inputTimeFormat,
+  isNoDate,
+  isNoTime,
+  testId = "date-time",
+}) => {
+  const dateFormat = inputDateFormat ? inputDateFormat : DEFAULT_DATE_FORMAT;
+  const timeFormat = inputTimeFormat ? inputTimeFormat : DEFAULT_TIME_FORMAT;
+
+  const date = useMemo(
+    () =>
+      (valueFormat ? moment(value, valueFormat) : moment(value)).format(
+        dateFormat,
+      ),
+    [value, valueFormat, dateFormat],
+  );
+  const time = useMemo(
+    () =>
+      (valueFormat ? moment(value, valueFormat) : moment(value)).format(
+        timeFormat,
+      ),
+    [value, valueFormat, timeFormat],
+  );
+
+  return (
+    <div data-testid={testId} className={cn(RC, className)}>
+      {!isNoDate && (
+        <span data-testid={`${testId}-date`} className={cn(`${RC}__date`)}>
+          {date}
+        </span>
+      )}
+      {!isNoTime && (
+        <span data-testid={`${testId}-time`} className={cn(`${RC}__time`, { [`${RC}_color--pause`]: !isNoDate })}>
+          {time}
+        </span>
+      )}
+    </div>
+  );
+};
+
+export default DateTime;

package/dist/Atomic/UI/DebugContainer/DebugContainer.js

@@ -1 +1,44 @@
-function r(r,n){(null==n||n>r.length)&&(n=r.length);for(var t=0,e=Array(n);t<n;t++)e[t]=r[t];return e}import{jsx as n,jsxs as t}from"react/jsx-runtime";import{useState as e}from"react";import{ChevronDown as o,ChevronUp as a}from"react-feather";import"./DebugContainer.scss";export default function(i){var l,c,u,d,s=i.data,f=i.children,m=(l=e(!0),function(r){if(Array.isArray(r))return r}(l)||function(r,n){var t,e,o=null==r?null:"undefined"!=typeof Symbol&&r[Symbol.iterator]||r["@@iterator"];if(null!=o){var a=[],i=!0,l=!1;try{for(o=o.call(r);!(i=(t=o.next()).done)&&(a.push(t.value),a.length!==n);i=!0);}catch(r){l=!0,e=r}finally{try{i||null==o.return||o.return()}finally{if(l)throw e}}return a}}(l,2)||function(n,t){if(n){if("string"==typeof n)return r(n,2);var e=Object.prototype.toString.call(n).slice(8,-1);if("Object"===e&&n.constructor&&(e=n.constructor.name),"Map"===e||"Set"===e)return Array.from(e);if("Arguments"===e||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(e))return r(n,t)}}(l,2)||function(){throw TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),y=m[0],b=m[1];return t("div",{className:"debug-container",children:[y&&t("div",{className:"debug-container__body",children:[n("h5",{children:"Debug:"}),s&&!!(null==(d=Object)||null==(u=d.keys(s))?void 0:u.length)&&n("div",{className:"debug-container__body-row",children:t("pre",{children:["{\n",null==(c=Object.keys(s))?void 0:c.map(function(r){return"  ".concat(r,": ").concat(null==s?void 0:s[r],",\n")}),"}"]})}),f&&n("div",{className:"debug-container__body-row",children:f})]}),n("div",{className:"debug-container__toggler",onClick:function(){return b(function(r){return!r})},children:y?n(a,{}):n(o,{})})]})}
+import React, { useState } from "react";
+
+import { ChevronDown, ChevronUp } from "react-feather";
+
+import "./DebugContainer.scss";
+
+const DebugContainer = ({ data, children }) => {
+  const [isVisible, setIsVisible] = useState(true);
+  const renderData = () => {
+    return (
+      <pre>
+        {"{\n"}
+        {Object.keys(data)?.map((key) => {
+          return `  ${key}: ${data?.[key]},\n`;
+        })}
+        {"}"}
+      </pre>
+    );
+  };
+
+  return (
+    <div className="debug-container">
+      {isVisible && (
+        <div className="debug-container__body">
+          <h5>Debug:</h5>
+          {data && Boolean(Object?.keys(data)?.length) && (
+            <div className="debug-container__body-row">{renderData()}</div>
+          )}
+          {children && (
+            <div className="debug-container__body-row">{children}</div>
+          )}
+        </div>
+      )}
+      <div
+        className="debug-container__toggler"
+        onClick={() => setIsVisible((v) => !v)}
+      >
+        {isVisible ? <ChevronUp /> : <ChevronDown />}
+      </div>
+    </div>
+  );
+};
+
+export default DebugContainer;

package/dist/Atomic/UI/DebugContainer/useDebugContainer.js

@@ -1 +1,15 @@
-function r(r,t){(null==t||t>r.length)&&(t=r.length);for(var e=0,n=Array(t);e<t;e++)n[e]=r[e];return n}import{jsx as t}from"react/jsx-runtime";import{useState as e}from"react";import n from"./DebugContainer";export default function(){var o,a=(o=e({}),function(r){if(Array.isArray(r))return r}(o)||function(r,t){var e,n,o=null==r?null:"undefined"!=typeof Symbol&&r[Symbol.iterator]||r["@@iterator"];if(null!=o){var a=[],u=!0,i=!1;try{for(o=o.call(r);!(u=(e=o.next()).done)&&(a.push(e.value),a.length!==t);u=!0);}catch(r){i=!0,n=r}finally{try{u||null==o.return||o.return()}finally{if(i)throw n}}return a}}(o,2)||function(t,e){if(t){if("string"==typeof t)return r(t,2);var n=Object.prototype.toString.call(t).slice(8,-1);if("Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n)return Array.from(n);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return r(t,e)}}(o,2)||function(){throw TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),u=a[0];return{debugData:u,setDebugData:a[1],renderDebugContainer:t(n,{data:u})}}
+import React, { useState } from "react";
+
+import DebugContainer from "./DebugContainer";
+
+const useDebugContainer = () => {
+  const [data, setData] = useState({});
+
+  return {
+    debugData: data,
+    setDebugData: setData,
+    renderDebugContainer: <DebugContainer data={data} />,
+  };
+};
+
+export default useDebugContainer;

package/dist/Atomic/UI/DoubleString/DoubleString.js

@@ -1 +1,102 @@
-function t(t,e){(null==e||e>t.length)&&(e=t.length);for(var r=0,n=Array(e);r<e;r++)n[r]=t[r];return n}function e(e,r){return function(t){if(Array.isArray(t))return t}(e)||function(t,e){var r,n,i=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null!=i){var o=[],a=!0,l=!1;try{for(i=i.call(t);!(a=(r=i.next()).done)&&(o.push(r.value),!e||o.length!==e);a=!0);}catch(t){l=!0,n=t}finally{try{a||null==i.return||i.return()}finally{if(l)throw n}}return o}}(e,r)||function(e,r){if(e){if("string"==typeof e)return t(e,r);var n=Object.prototype.toString.call(e).slice(8,-1);if("Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n)return Array.from(n);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return t(e,r)}}(e,r)||function(){throw TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}import{jsx as r,jsxs as n,Fragment as i}from"react/jsx-runtime";import{useEffect as o,useRef as a,useState as l}from"react";import c from"classnames";import s from"moment";import{Eye as u,EyeOff as d}from"react-feather";import"./DoubleString.scss";var m="double-string";export default function(t){var f=t.value,p=t.description,v=t.valuePostfix,h=t.className,y=t.testId,b=t.isFormatValueToDate,g=t.isUseOnClick,_=t.dateFormatSettings,x=void 0===_?{}:_,N=x.parseFormat,S=x.displayFormat,W=t.revert,Y=void 0!==W&&W,A=t.noTitle,j=t.isUseHideMode,D=void 0!==j&&j,M=t.isShowHiddenValueAvailable,C=void 0!==M&&M,F=e(l(D),2),k=F[0],I=F[1],w=b?s(f,void 0===N?"MM.DD.YYYY":N).format(void 0===S?"MM.DD.YYYY":S):f,O=a(null),T=a(null),U=e(l({valueWidth:0,descriptionWidth:0}),2),H=U[0],V=U[1],E=e(l(!1),2),P=E[0],$=E[1],q=function(){$(!P)};return o(function(){var t,e;V({valueWidth:null==O||null==(t=O.current)?void 0:t.clientWidth,descriptionWidth:null==T||null==(e=T.current)?void 0:e.clientWidth})},[T,O]),n("div",{"data-testid":void 0===y?"double-string":y,className:c(m,h),children:[r("p",{onClick:function(){return q()},ref:O,className:c("".concat(m,"__value"),{"double-string--value-opened":P&&g},{pointer:g}),title:!A&&H.valueWidth>99?w:"",children:Y?p:n(i,{children:[D?r("span",{children:k?"*********":w}):w,D&&C&&k&&r(u,{className:"".concat(m,"__hide-mode-icon"),onClick:function(){return I(!1)}}),D&&C&&!k&&r(d,{className:"".concat(m,"__hide-mode-icon"),onClick:function(){return I(!0)}}),v&&r("span",{className:c("".concat(m,"__value-postfix")),children:v})]})}),r("p",{ref:T,className:c("".concat(m,"__description")),title:!A&&H.descriptionWidth>99?w:"",children:Y?n(i,{children:[w,v&&r("span",{className:c("".concat(m,"__value-postfix")),children:v})]}):p})]})}
+import React, { useEffect, useRef, useState } from "react";
+
+import cn from "classnames";
+import moment from "moment";
+import { Eye, EyeOff } from "react-feather";
+
+import "./DoubleString.scss";
+
+const RC = "double-string";
+
+const DoubleString = ({
+  value,
+  description,
+  valuePostfix,
+  className,
+  testId = "double-string",
+  isFormatValueToDate,
+  isUseOnClick,
+  dateFormatSettings: {
+    parseFormat = "MM.DD.YYYY",
+    displayFormat = "MM.DD.YYYY",
+  } = {},
+  revert = false,
+  noTitle,
+  isUseHideMode = false,
+  isShowHiddenValueAvailable= false,
+}) => {
+  const [isValueHidden, setIsValueHidden] = useState(isUseHideMode);
+
+  const computedValue = isFormatValueToDate
+    ? moment(value, parseFormat).format(displayFormat)
+    : value;
+  const valueRef = useRef(null);
+  const descriptionRef = useRef(null);
+  const [elemsWidth, setElemsWidth] = useState({
+    valueWidth: 0,
+    descriptionWidth: 0,
+  });
+  const [isOnClickON, setIsOnClickON] = useState(false);
+
+  const handle = {
+    click: () => {
+      setIsOnClickON(!isOnClickON);
+    },
+  };
+
+  useEffect(() => {
+    const valueWidth = valueRef?.current?.clientWidth;
+    const descriptionWidth = descriptionRef?.current?.clientWidth;
+
+    setElemsWidth({ valueWidth, descriptionWidth });
+  }, [descriptionRef, valueRef]);
+
+  return (
+    <div data-testid={testId} className={cn(RC, className)}>
+      <p
+        onClick={() => handle.click()}
+        ref={valueRef}
+        className={cn(
+          `${RC}__value`,
+          {
+            "double-string--value-opened": isOnClickON && isUseOnClick,
+          },
+          { pointer: isUseOnClick },
+        )}
+        title={!noTitle && elemsWidth.valueWidth > 99 ? computedValue : ""}
+      >
+        {!revert ? (
+          <>
+            {isUseHideMode ? <span>{!isValueHidden ? computedValue : '*********'}</span> : computedValue}
+            {isUseHideMode && isShowHiddenValueAvailable && isValueHidden && <Eye className={`${RC}__hide-mode-icon`} onClick={() => setIsValueHidden(false)} />}
+            {isUseHideMode && isShowHiddenValueAvailable && !isValueHidden && <EyeOff className={`${RC}__hide-mode-icon`} onClick={() => setIsValueHidden(true)}/>}
+            {valuePostfix && (
+              <span className={cn(`${RC}__value-postfix`)}>{valuePostfix}</span>
+            )}
+          </>
+        ) : (
+          description
+        )}
+      </p>
+
+      <p
+        ref={descriptionRef}
+        className={cn(`${RC}__description`)}
+        title={!noTitle && elemsWidth.descriptionWidth > 99 ? computedValue : ""}
+      >
+        {!revert ? (
+          description
+        ) : (
+          <>
+            {computedValue}
+            {valuePostfix && (
+              <span className={cn(`${RC}__value-postfix`)}>{valuePostfix}</span>
+            )}
+          </>
+        )}
+      </p>
+    </div>
+  );
+};
+
+export default DoubleString;

package/dist/Atomic/UI/DynamicIcon/DynamicIcon.js

@@ -1 +1,70 @@
-function e(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=Array(t);r<t;r++)n[r]=e[r];return n}function t(e,t,r,n,o,u,a){try{var i=e[u](a),l=i.value}catch(e){r(e);return}i.done?t(l):Promise.resolve(l).then(n,o)}Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return a}});var r=require("react/jsx-runtime"),n=u(require("react"));function o(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,r=new WeakMap;return(o=function(e){return e?r:t})(e)}function u(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||(void 0===e?"undefined":e&&"undefined"!=typeof Symbol&&e.constructor===Symbol?"symbol":typeof e)!="object"&&"function"!=typeof e)return{default:e};var r=o(t);if(r&&r.has(e))return r.get(e);var n={__proto__:null},u=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var a in e)if("default"!==a&&Object.prototype.hasOwnProperty.call(e,a)){var i=u?Object.getOwnPropertyDescriptor(e,a):null;i&&(i.get||i.set)?Object.defineProperty(n,a,i):n[a]=e[a]}return n.default=e,r&&r.set(e,n),n}var a=function(o){var a,i=o.iconKey,l=function(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},u=Object.keys(e);for(n=0;n<u.length;n++)r=u[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(e);for(n=0;n<u.length;n++)r=u[n],!(t.indexOf(r)>=0)&&Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}(o,["iconKey"]),c=(a=(0,n.useState)(null),function(e){if(Array.isArray(e))return e}(a)||function(e,t){var r,n,o=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=o){var u=[],a=!0,i=!1;try{for(o=o.call(e);!(a=(r=o.next()).done)&&(u.push(r.value),u.length!==t);a=!0);}catch(e){i=!0,n=e}finally{try{a||null==o.return||o.return()}finally{if(i)throw n}}return u}}(a,2)||function(t,r){if(t){if("string"==typeof t)return e(t,2);var n=Object.prototype.toString.call(t).slice(8,-1);if("Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n)return Array.from(n);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return e(t,r)}}(a,2)||function(){throw TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),f=c[0],s=c[1];return(0,n.useEffect)(function(){var e,r;(e=function(){var e;return function(e,t){var r,n,o,u={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]},a=Object.create(("function"==typeof Iterator?Iterator:Object).prototype);return a.next=i(0),a.throw=i(1),a.return=i(2),"function"==typeof Symbol&&(a[Symbol.iterator]=function(){return this}),a;function i(i){return function(l){var c=[i,l];if(r)throw TypeError("Generator is already executing.");for(;a&&(a=0,c[0]&&(u=0)),u;)try{if(r=1,n&&(o=2&c[0]?n.return:c[0]?n.throw||((o=n.return)&&o.call(n),0):n.next)&&!(o=o.call(n,c[1])).done)return o;switch(n=0,o&&(c=[2&c[0],o.value]),c[0]){case 0:case 1:o=c;break;case 4:return u.label++,{value:c[1],done:!1};case 5:u.label++,n=c[1],c=[0];continue;case 7:c=u.ops.pop(),u.trys.pop();continue;default:if(!(o=(o=u.trys).length>0&&o[o.length-1])&&(6===c[0]||2===c[0])){u=0;continue}if(3===c[0]&&(!o||c[1]>o[0]&&c[1]<o[3])){u.label=c[1];break}if(6===c[0]&&u.label<o[1]){u.label=o[1],o=c;break}if(o&&u.label<o[2]){u.label=o[2],u.ops.push(c);break}o[2]&&u.ops.pop(),u.trys.pop();continue}c=t.call(e,u)}catch(e){c=[6,e],n=0}finally{r=o=0}if(5&c[0])throw c[1];return{value:c[0]?c[1]:void 0,done:!0}}}}(this,function(t){switch(t.label){case 0:return[4,Promise.resolve().then(function(){return u(require("react-feather"))})];case 1:return e=t.sent()[i],s(function(){return e}),[2]}})},r=function(){var r=this,n=arguments;return new Promise(function(o,u){var a=e.apply(r,n);function i(e){t(a,o,u,i,l,"next",e)}function l(e){t(a,o,u,i,l,"throw",e)}i(void 0)})},function(){return r.apply(this,arguments)})()},[i]),f?(0,r.jsx)(f,function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter(function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable}))),n.forEach(function(t){var n;n=r[t],t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n})}return e}({},l)):null};
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+const DynamicIcon = ({ iconKey, ...props })=>{
+    const [Icon, setIcon] = (0, _react.useState)(null);
+    (0, _react.useEffect)(()=>{
+        const fetchData = async ()=>{
+            const FeatherIcons = await Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require("react-feather")));
+            const iconComponent = FeatherIcons[iconKey];
+            setIcon(()=>iconComponent);
+        };
+        fetchData();
+    }, [
+        iconKey
+    ]);
+    return Icon ? /*#__PURE__*/ (0, _jsxruntime.jsx)(Icon, {
+        ...props
+    }) : null;
+};
+const _default = DynamicIcon;

package/dist/Atomic/UI/ExampleChartIntegration/ExampleChartIntegration.js

@@ -1 +1,221 @@
-function t(t,n){(null==n||n>t.length)&&(n=t.length);for(var r=0,e=Array(n);r<n;r++)e[r]=t[r];return e}function n(t){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{},e=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(e=e.concat(Object.getOwnPropertySymbols(r).filter(function(t){return Object.getOwnPropertyDescriptor(r,t).enumerable}))),e.forEach(function(n){var e;e=r[n],n in t?Object.defineProperty(t,n,{value:e,enumerable:!0,configurable:!0,writable:!0}):t[n]=e})}return t}function r(t,n){return n=null!=n?n:{},Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):(function(t,n){var r=Object.keys(t);if(Object.getOwnPropertySymbols){var e=Object.getOwnPropertySymbols(t);r.push.apply(r,e)}return r})(Object(n)).forEach(function(r){Object.defineProperty(t,r,Object.getOwnPropertyDescriptor(n,r))}),t}function e(n,r){return function(t){if(Array.isArray(t))return t}(n)||function(t,n){var r,e,a=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null!=a){var o=[],i=!0,u=!1;try{for(a=a.call(t);!(i=(r=a.next()).done)&&(o.push(r.value),!n||o.length!==n);i=!0);}catch(t){u=!0,e=t}finally{try{i||null==a.return||a.return()}finally{if(u)throw e}}return o}}(n,r)||function(n,r){if(n){if("string"==typeof n)return t(n,r);var e=Object.prototype.toString.call(n).slice(8,-1);if("Object"===e&&n.constructor&&(e=n.constructor.name),"Map"===e||"Set"===e)return Array.from(e);if("Arguments"===e||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(e))return t(n,r)}}(n,r)||function(){throw TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}import{jsx as a,jsxs as o}from"react/jsx-runtime";import{createElement as i}from"react";import{useLayoutEffect as u,useMemo as l,useState as c}from"react";import s from"classnames";import"uuid";import{formatToPriceWithUSD as b}from"../../../Functions/fieldValueFormatters";import{clone as f}from"../../../Functions/utils";import p from"../../FormElements/InputDateRange/InputDateRange";import d from"../Chart/Chart";import{getLabels as m,getMockValue as y,getSafelyDateRange as h,getTab as g}from"./partial/utils";import"./partial/AnyOuterClass.scss";export default function(t){var v=t||{},O=v.inputDateRangeProps,j=v.chartProps,w=O||{},C=w.value,P=w.onChange,k=(j||{}).initialChartType,L=l(function(){return h(C)},[C]),S=e(c(k||"Bar"),2),T=S[0],B=S[1],M=e(c("tab1"),2),D=M[0],x=M[1],A=e(c("Bar"===T?"finturfLoadingModeBar":"finturfLoadingModeLine"),2),N=A[0],E=A[1],F=e(c(null),2),I=F[0],_=F[1],R=e(c(null),2),V=R[0],J=R[1],U=e(c(null),2),$=U[0],q=U[1],z=e(c(null),2),G=z[0],H=z[1],K=e(c(null),2),Q=K[0],W=K[1],X=function(){var t=m(L);return{labels:t,datasets:[{data:t.map(function(t){return y()})}]}},Y=function(t){switch(t){case"tab1":return I?f(I):null;case"tab2":return V?f(V):null;case"tab3":return $?f($):null;case"tab4":return G?f(G):null;default:return null}},Z=l(function(){return Y(D)?["finturfChartBar","finturfChartLine"]:["finturfLoadingModeBar","finturfLoadingModeLine"]},[!!Y(D)]),tt=function(t,n){switch(n){case"tab1":_(t);break;case"tab2":J(t);break;case"tab3":q(t);break;case"tab4":H(t)}return t};return u(function(){_(null),J(null),q(null),H(null),Promise.all([g("tab1",L,tt),g("tab2",L,tt),g("tab3",L,tt),g("tab4",L,tt)])},[L]),u(function(){E(Y(D)?"Bar"===T?"finturfChartBar":"finturfChartLine":"Bar"===T?"finturfLoadingModeBar":"finturfLoadingModeLine"),W(Y(D)?Y(D):X())},[!!Y(D),D,T]),o("div",{className:"example-wrapper",children:[a(p,r(n({},O),{value:C,onChange:P})),o("div",{className:"buttons-block",children:[a("button",{className:s("tab-button",{"tab-button_active":"tab1"===D}),onClick:function(){return x("tab1")},children:"Tab 1"}),a("button",{className:s("tab-button",{"tab-button_active":"tab2"===D}),onClick:function(){return x("tab2")},children:"Tab 2"}),a("button",{className:s("tab-button",{"tab-button_active":"tab3"===D}),onClick:function(){return x("tab3")},children:"Tab 3"}),a("button",{className:s("tab-button",{"tab-button_active":"tab4"===D}),onClick:function(){return x("tab4")},children:"Tab 4"})]}),i(d,r(n({},j),{key:JSON.stringify(Q),data:Q,setModelExternalValue:function(t){B(t.includes("Line")?"Line":"Bar"),E(t)},initialModel:N,modelsForSwitch:Z,description:{label:function(t){switch(t){case"tab1":return"Tab 1";case"tab2":return"Tab 2";case"tab3":return"Tab 3";case"tab4":return"Tab 4";default:return null}}(D)},addToDatasets:{id:D},modifyOptions:function(t){var e,a,o,i,u,l;return r(n({},t),{options:r(n({},null==t?void 0:t.options),{plugins:r(n({},null==t||null==(e=t.options)?void 0:e.plugins),{tooltip:r(n({},null==t||null==(o=t.options)||null==(a=o.plugins)?void 0:a.tooltip),{callbacks:r(n({},null==t||null==(l=t.options)||null==(u=l.plugins)||null==(i=u.tooltip)?void 0:i.callbacks),{label:function(t){return"tab3"===t.dataset.id||"tab4"===t.dataset.id?b(t.raw||"0"):t.raw||"0"}})})})})})}}))]})}
+import React, { useLayoutEffect, useMemo, useState } from "react";
+
+import cn from "classnames";
+import { v4 as uuid } from "uuid";
+
+import { formatToPriceWithUSD } from "../../../Functions/fieldValueFormatters";
+import { clone } from "../../../Functions/utils";
+import InputDateRange from "../../FormElements/InputDateRange/InputDateRange";
+import Chart from "../Chart/Chart";
+
+import {
+  getLabels,
+  getMockValue,
+  getSafelyDateRange,
+  getTab,
+} from "./partial/utils";
+
+import "./partial/AnyOuterClass.scss";
+
+const ExampleChartIntegration = (props) => {
+  const { inputDateRangeProps, chartProps } = props || {};
+  const { value: outerDateRange, onChange: changeDateRange } =
+    inputDateRangeProps || {};
+  const { initialChartType } = chartProps || {};
+  const dateRange = useMemo(
+    () => getSafelyDateRange(outerDateRange),
+    [outerDateRange],
+  );
+
+  const [chartType, setChartType] = useState(initialChartType || "Bar");
+  const [tab, setTab] = useState("tab1");
+  const [initialModel, setInitialModel] = useState(
+    chartType === "Bar" ? "finturfLoadingModeBar" : "finturfLoadingModeLine",
+  );
+
+  const [tab1, setTab1] = useState(null);
+  const [tab2, setTab2] = useState(null);
+  const [tab3, setTab3] = useState(null);
+  const [tab4, setTab4] = useState(null);
+
+  const [dataForRender, setDataForRender] = useState(null);
+
+  const getMockData = () => {
+    const labels = getLabels(dateRange);
+    const mock = () => labels.map((label) => getMockValue());
+    return {
+      labels,
+      datasets: [
+        {
+          data: mock(),
+        },
+      ],
+    };
+  };
+
+  const getTabData = (tabId) => {
+    switch (tabId) {
+      case "tab1":
+        return !tab1 ? null : clone(tab1);
+      case "tab2":
+        return !tab2 ? null : clone(tab2);
+      case "tab3":
+        return !tab3 ? null : clone(tab3);
+      case "tab4":
+        return !tab4 ? null : clone(tab4);
+      default:
+        return null;
+    }
+  };
+
+  const getDescription = (tabId) => {
+    switch (tabId) {
+      case "tab1":
+        return "Tab 1";
+      case "tab2":
+        return "Tab 2";
+      case "tab3":
+        return "Tab 3";
+      case "tab4":
+        return "Tab 4";
+      default:
+        return null;
+    }
+  };
+
+  const selectData = () => (getTabData(tab) ? getTabData(tab) : getMockData());
+
+  const modelsForSwitch = useMemo(
+    () =>
+      getTabData(tab)
+        ? ["finturfChartBar", "finturfChartLine"]
+        : ["finturfLoadingModeBar", "finturfLoadingModeLine"],
+    [Boolean(getTabData(tab))],
+  );
+
+  const handleChangeChartType = (model) => {
+    setChartType(model.includes("Line") ? "Line" : "Bar");
+    setInitialModel(model);
+  };
+
+  const getModel = () => {
+    if (!getTabData(tab))
+      return chartType === "Bar"
+        ? "finturfLoadingModeBar"
+        : "finturfLoadingModeLine";
+    else return chartType === "Bar" ? "finturfChartBar" : "finturfChartLine";
+  };
+
+  const processResponse = (res, tabId) => {
+    switch (tabId) {
+      case "tab1":
+        setTab1(res);
+        break;
+      case "tab2":
+        setTab2(res);
+        break;
+      case "tab3":
+        setTab3(res);
+        break;
+      case "tab4":
+        setTab4(res);
+        break;
+      default:
+        break;
+    }
+    return res;
+  };
+
+  useLayoutEffect(() => {
+    setTab1(null);
+    setTab2(null);
+    setTab3(null);
+    setTab4(null);
+
+    // эмуляция запросов
+    // вся логика происходит в самих входящих промисах
+    // Promise.all добавлен для расширения на случай надобности описания эффектов по завершении всех запросов
+    Promise.all([
+      getTab("tab1", dateRange, processResponse),
+      getTab("tab2", dateRange, processResponse),
+      getTab("tab3", dateRange, processResponse),
+      getTab("tab4", dateRange, processResponse),
+    ]);
+  }, [dateRange]);
+
+  useLayoutEffect(() => {
+    setInitialModel(getModel());
+    setDataForRender(selectData());
+  }, [Boolean(getTabData(tab)), tab, chartType]);
+
+  return (
+    <div className="example-wrapper">
+      <InputDateRange
+        {...inputDateRangeProps}
+        value={outerDateRange}
+        onChange={changeDateRange}
+      />
+
+      <div className="buttons-block">
+        <button
+          className={cn("tab-button", { "tab-button_active": tab === "tab1" })}
+          onClick={() => setTab("tab1")}
+        >
+          Tab 1
+        </button>
+        <button
+          className={cn("tab-button", { "tab-button_active": tab === "tab2" })}
+          onClick={() => setTab("tab2")}
+        >
+          Tab 2
+        </button>
+        <button
+          className={cn("tab-button", { "tab-button_active": tab === "tab3" })}
+          onClick={() => setTab("tab3")}
+        >
+          Tab 3
+        </button>
+        <button
+          className={cn("tab-button", { "tab-button_active": tab === "tab4" })}
+          onClick={() => setTab("tab4")}
+        >
+          Tab 4
+        </button>
+      </div>
+
+      <Chart
+        {...chartProps}
+        key={JSON.stringify(dataForRender)}
+        data={dataForRender}
+        setModelExternalValue={handleChangeChartType}
+        initialModel={initialModel}
+        modelsForSwitch={modelsForSwitch}
+        description={{ label: getDescription(tab) }}
+        addToDatasets={{ id: tab }}
+        modifyOptions={(options) => ({
+          ...options,
+          options: {
+            ...options?.options,
+            plugins: {
+              ...options?.options?.plugins,
+              tooltip: {
+                ...options?.options?.plugins?.tooltip,
+                callbacks: {
+                  ...options?.options?.plugins?.tooltip?.callbacks,
+                  label: (context) => {
+                    return context.dataset.id === "tab3" ||
+                      context.dataset.id === "tab4"
+                      ? formatToPriceWithUSD(context.raw || "0")
+                      : context.raw || "0";
+                  },
+                },
+              },
+            },
+          },
+        })}
+      />
+    </div>
+  );
+};
+
+export default ExampleChartIntegration;