intelicoreact 1.8.10 → 1.8.12

package/dist/Atomic/FormElements/TieredCheckboxes/TieredCheckboxes.jsx

@@ -1,181 +0,0 @@
-import cn from 'classnames';
-
-import { useMemo } from 'react';
-
-import { compareAlphabetical } from '../../../Functions/utils';
-import CheckboxInput from '../CheckboxInput/CheckboxInput';
-
-import AccordionWithCheckbox from './partial/AccordionWithCheckbox';
-
-import './TieredCheckboxes.scss';
-
-const RC = 'tiered-checkboxes';
-
-function TieredCheckboxes({
-  items = {},
-  className,
-  onChange,
-  isUseParentsClassesAsDataset,
-  isUseAccordionForGroup,
-  accordionIcons,
-  isOnlyOne = false,
-  sortGroups = false,
-  sortGroupItems = false,
-}) {
-  const handle = {
-    changeParent: (value, key, prop) => {
-      const parent = items.find(item => item.key === key);
-      if (prop) parent[prop] = value;
-      else parent.value = value;
-
-      if (!prop) {
-        if (value) {
-          parent.children
-            .filter(({ disabled }) => !disabled)
-            .forEach(item => (item.value = true));
-        }
-        else {
-          parent.children
-            .filter(({ disabled }) => !disabled)
-            .forEach(item => (item.value = false));
-        }
-      }
-      onChange([...items]);
-    },
-    changeChild: (value, key, parentKey) => {
-      if (isOnlyOne) {
-        const parent = items.find(item => item.key === parentKey);
-        parent.children.find(item => item.key === key).value = value;
-
-        parent.children.map((item) => {
-          if (item.key !== key && value === true) {
-            item.disabled = true;
-            parent.disabled = true;
-          }
-          else if (item.key !== key && value === false) {
-            item.disabled = false;
-            parent.disabled = false;
-          }
-          else {
-            item.disabled = false;
-          }
-          return item;
-        });
-
-        parent.disabled = true;
-      }
-      else {
-        const parent = items.find(item => item.key === parentKey);
-        parent.children.find(item => item.key === key).value = value;
-
-        if (parent.children.every(item => item.value)) parent.value = true;
-        else parent.value = false;
-      }
-
-      onChange([...items]);
-    },
-    isAllChecked: (item) => {
-      return (
-        item?.children.some(item => item.value)
-        && !item?.children.every(item => item.value)
-      );
-    },
-  };
-
-  const preparedItems = useMemo(() => {
-    let newItems = [...items];
-
-    if (sortGroups) {
-      newItems = newItems?.sort(compareAlphabetical);
-    }
-
-    if (sortGroupItems) {
-      newItems = newItems?.map((parent) => {
-        if (parent?.children) {
-          parent.children = parent?.children?.sort(compareAlphabetical);
-        }
-
-        return parent;
-      });
-    }
-
-    return newItems;
-  }, [items]);
-
-  const renderInner = (parent) => {
-    return (
-      parent.children
-      && parent.children.map(child => (
-        <div key={child.key} className={`${RC}__children`}>
-          <CheckboxInput
-            testId={child.key}
-            label={child.label}
-            value={child.value}
-            disabled={child?.disabled}
-            onChange={value =>
-              handle.changeChild(value, child.key, parent.key)}
-          />
-        </div>
-      ))
-    );
-  };
-
-  return (
-    <div className={cn(RC, className)}>
-      {preparedItems.map((parent) => {
-        const datasetProp
-          = isUseParentsClassesAsDataset && parent?.className
-            ? { 'data-key': parent?.className }
-            : {};
-        if (isUseAccordionForGroup) {
-          return (
-            <AccordionWithCheckbox
-              key={parent.key}
-              RC={RC}
-              parent={parent}
-              datasetProp={datasetProp}
-              isUseParentsClassesAsDataset={isUseParentsClassesAsDataset}
-              className={`${RC}__mono-accordion`}
-              setIsOpen={() =>
-                handle.changeParent(!parent.isOpen, parent.key, 'isOpen')}
-              onChange={value => handle.changeParent(value, parent.key)}
-              icon={
-                !parent.isOpen
-                  ? accordionIcons?.[0] || null
-                  : accordionIcons?.[1] || null
-              }
-              // disabled={parent.children?.every?.((child) => child.disabled)}
-            >
-              {renderInner(parent)}
-            </AccordionWithCheckbox>
-          );
-        }
-        return (
-          <div
-            {...datasetProp}
-            key={parent.key}
-            className={cn(`${RC}__parents`, {
-              [`${parent.className}`]: !isUseParentsClassesAsDataset,
-            })}
-          >
-            <CheckboxInput
-              isStark={handle.isAllChecked(parent)}
-              label={parent.label}
-              value={parent.value}
-              onChange={value => handle.changeParent(value, parent.key)}
-              disabled={
-                parent.children.every(({ disabled }) => disabled === true)
-                || parent.disabled
-              }
-            />
-            <div className={cn(`${RC}__parent__children`)}>
-              {renderInner(parent)}
-            </div>
-          </div>
-        );
-      })}
-    </div>
-  );
-}
-
-export default TieredCheckboxes;

package/dist/Atomic/FormElements/TieredCheckboxes/partial/AccordionWithCheckbox.jsx

@@ -1,60 +0,0 @@
-import cn from 'classnames';
-
-import MonoAccordion from '../../../UI/MonoAccordion/MonoAccordion';
-import CheckboxInput from '../../CheckboxInput/CheckboxInput';
-
-import '../TieredCheckboxes.scss';
-
-function AccordionWithCheckbox({
-  children,
-  parent,
-  onChange,
-  className,
-  RC,
-  setIsOpen,
-  icon,
-  disabled,
-  datasetProp,
-  isUseParentsClassesAsDataset,
-}) {
-  return (
-    <MonoAccordion
-      datasetProp={datasetProp}
-      className={cn(className, {
-        [`${parent.className}`]: !isUseParentsClassesAsDataset,
-      })}
-      isOpen={parent.isOpen}
-      onClick={setIsOpen}
-      icon={icon}
-      disabled={disabled}
-      // disabled={parent.children?.every?.((child) => child.disabled)}
-      titleJSX={(
-        <>
-          <CheckboxInput
-            className={`${RC}__checkbox-input`}
-            isStark={
-              parent?.children?.some?.(item => item.value)
-              && !parent?.children?.every?.(item => item.value)
-            }
-            label={parent.label}
-            value={parent.value}
-            onChange={onChange}
-            disabled={
-              parent.children.every(({ disabled }) => disabled === true)
-              || parent.disabled
-            }
-          />
-          <span className={`${RC}__description-checked`}>
-            {parent?.children?.length
-              ? `Selected ${parent.children.filter(child => child.value).length} from ${parent.children?.length}`
-              : null}
-          </span>
-        </>
-      )}
-    >
-      {children}
-    </MonoAccordion>
-  );
-}
-
-export default AccordionWithCheckbox;

package/dist/Atomic/FormElements/VariantsListRadio/VariantsListRadio.jsx

@@ -1,83 +0,0 @@
-import cn from 'classnames';
-
-import { useEffect, useState } from 'react';
-
-import { compare } from '../../../Functions/utils';
-
-import VariantsListRadioItem from './partials/VariantsListRadioItem';
-
-import './VariantsListRadio.scss';
-
-const RC = 'variants-list-radio';
-
-function VariantsListRadio({
-  items: outerItems,
-  value: outerValue,
-  onChange = () => {},
-
-  isWithBorders,
-  itemsContentRenderMode,
-  isRadioPositionReverse,
-  isUseAsOptionsList,
-  disabled,
-  isDisabled,
-
-  id,
-  className,
-  testId = 'variants-list-radio',
-
-  attributesOfNativeInput,
-  isMixWithPersonalAttributes,
-}) {
-  const [items, setItems] = useState(outerItems);
-  const [value, setValue] = useState(outerValue);
-
-  const componentnId = id || 'variantsListRadio';
-  const mode = itemsContentRenderMode === 'col' ? 'col' : 'row';
-  const isElementDisabled = disabled || isDisabled;
-
-  const handleChange = (newValue) => {
-    setValue(newValue);
-    onChange(newValue);
-  };
-
-  useEffect(() => {
-    if (!compare(outerItems, items)) setItems(outerItems);
-  }, [outerItems]);
-
-  useEffect(() => {
-    if (value !== outerValue) setValue(outerValue);
-  }, [outerValue]);
-
-  return (
-    <div
-      id={componentnId}
-      data-testid={testId}
-      className={cn(RC, `${RC}_items-content-${mode}`, className, {
-        [`${RC}_with-borders`]: isWithBorders && !isUseAsOptionsList,
-        [`${RC}_radio-position-reverse`]: isRadioPositionReverse,
-      })}
-    >
-      {items.map(item => (
-        <VariantsListRadioItem
-          key={`variants-list-radio-id-${componentnId}-item-id-${item.value}`}
-          RC={RC}
-          parentId={componentnId}
-          item={{
-            ...item,
-            isDisabled:
-              item.disabled || item.isDisabled || isElementDisabled || false,
-          }}
-          value={value}
-          onChange={handleChange}
-          attributesOfNativeInput={attributesOfNativeInput}
-          isMixWithPersonalAttributes={isMixWithPersonalAttributes}
-          parentDisabled={disabled}
-          isUseAsOptionsList={isUseAsOptionsList}
-        />
-      ))}
-    </div>
-  );
-}
-
-export default VariantsListRadio;

package/dist/Atomic/FormElements/VariantsListRadio/partials/VariantsListRadioItem.jsx

@@ -1,80 +0,0 @@
-import cn from 'classnames';
-
-import { getIsOnlyAnObject } from '../../../../Functions/utils';
-
-function VariantsListRadioItem({
-  RC,
-  parentId,
-  item,
-  value: actualValue,
-  onChange = () => {},
-
-  attributesOfNativeInput = {},
-  isMixWithPersonalAttributes,
-
-  isUseAsOptionsList,
-  testId = 'variants-list-radio-item',
-}) {
-  // ? Для корректной работы нужны parentId и item(объект)
-  if (!parentId || !getIsOnlyAnObject(item)) return null;
-
-  const {
-    value,
-    label,
-    description,
-    isDisabled,
-    attributesOfNativeInput: personalAttributesOfNativeInput,
-  } = item;
-  const id = `${parentId.toString()}--item-${value}`;
-  const name = parentId.toString();
-  const isActive = actualValue === value;
-  const addAtributesObj = isMixWithPersonalAttributes
-    ? { ...attributesOfNativeInput, ...personalAttributesOfNativeInput }
-    : personalAttributesOfNativeInput || attributesOfNativeInput || {};
-
-  return (
-    <label
-      data-testid={testId}
-      className={cn(`${RC}__item`, {
-        [`${RC}__item_disabled`]: isDisabled,
-        [`${RC}__item_active`]: isActive,
-        [`${RC}__item_as-option`]: isUseAsOptionsList,
-      })}
-      htmlFor={id}
-    >
-      <div className={cn(`${RC}__item-radio-container`)}>
-        <div className={cn(`${RC}__item-radio`)}>
-          <input
-            id={id}
-            data-testid={`${testId}-input`}
-            type="radio"
-            checked={isActive}
-            className={`${RC}__item-radio-input`}
-            onChange={() => onChange(value)}
-            name={name}
-            disabled={isDisabled}
-            {...addAtributesObj}
-          />
-          <div className={`${RC}__item-radio-mark`}></div>
-        </div>
-      </div>
-
-      <div className={cn(`${RC}__item-content`)}>
-        {label && (
-          <div className={cn(`${RC}__item-content-wrapper`)}>
-            <div className={cn(`${RC}__item-content-label`)}>{label}</div>
-          </div>
-        )}
-        {description && !isUseAsOptionsList && (
-          <div className={cn(`${RC}__item-content-wrapper`)}>
-            <div className={cn(`${RC}__item-content-description`)}>
-              {description}
-            </div>
-          </div>
-        )}
-      </div>
-    </label>
-  );
-}
-
-export default VariantsListRadioItem;

package/dist/Atomic/FormElements/WidgetPseudoTable/WidgetPseudoTable.jsx

@@ -1,103 +0,0 @@
-import cn from 'classnames';
-
-import './WidgetPseudoTable.scss';
-
-const RC = 'widget-pseudo-table';
-
-function WidgetPseudoTable(props) {
-  const {
-    className,
-    title,
-    rightHeaderContent,
-    nullContentData,
-    isNotRenderThead = false,
-    isNoHeader = false,
-    columns = [],
-    rows,
-    CellComponent,
-    CellComponentProps,
-    onChange,
-  } = props || {};
-
-  return (
-    <div className={cn(RC, className)}>
-      {!isNoHeader && (
-        <div className={cn(`${RC}__header`)}>
-          <div className={cn(`${RC}__title-block`)}>{title}</div>
-          <div className={cn(`${RC}__right-header-content-block`)}>
-            {rightHeaderContent}
-          </div>
-        </div>
-      )}
-      <div
-        className={cn(`${RC}__body`, {
-          [`${RC}__body_no-content`]: !rows?.length,
-        })}
-      >
-        {Boolean(rows?.length) && !isNotRenderThead && (
-          <div className={cn(`${RC}__thead`)}>
-            {columns.map(field => (
-              <div
-                key={`thead-${field.key}`}
-                className={cn(
-                  `${RC}__thead-cell`,
-                  field.theadCellClassName,
-                  field.columnClassName,
-                  {
-                    [`${RC}__thead-cell_reqiured`]: field.isRequired,
-                  },
-                )}
-                data-key={field.key}
-              >
-                {field.label}
-              </div>
-            ))}
-          </div>
-        )}
-
-        <div className={cn(`${RC}__table`)}>
-          {rows?.length
-            ? (
-                rows.map(row => (
-                  <div
-                    key={`row-${row.id}`}
-                    className={cn(`${RC}__row`)}
-                    data-id={row.id}
-                  >
-                    {columns.map(cell => (
-                      <div
-                        key={`row-${row.id}-cell-${cell.key}`}
-                        className={cn(
-                          `${RC}__cell`,
-                          cell.cellClassName,
-                          cell.columnClassName,
-                        )}
-                      >
-                        <CellComponent
-                          {...CellComponentProps}
-                          field={{
-                            ...cell,
-                            value: row[cell.key],
-                            rowData: row,
-                          }}
-                          onChange={(key, val) => onChange(val, cell.key, row.id)}
-                        />
-                      </div>
-                    ))}
-                  </div>
-                ))
-              )
-            : (
-                <div className={cn(`${RC}__row`)} data-id="empty-row">
-                  <span className={cn(`${RC}__no-data-content`)}>
-                    {nullContentData ?? 'No data'}
-                  </span>
-                </div>
-              )}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default WidgetPseudoTable;

package/dist/Atomic/FormElements/WidgetWithSwitchableRows/WidgetWithSwitchableRows.jsx

@@ -1,115 +0,0 @@
-import cn from 'classnames';
-
-import './WidgetWithSwitchableRows.scss';
-
-const RC = 'widget-with-switchable-rows';
-
-function WidgetWithSwitchableRows(props) {
-  const {
-    className,
-    title,
-    rightHeaderContent,
-    nullContentData,
-
-    columns = [],
-    rows,
-    CellComponent,
-    CellComponentProps,
-    onChange,
-    isNoHeader = false,
-  } = props || {};
-
-  const preperedColumns = [
-    { ...columns[0], key: 'isActive', type: 'switcher' },
-    ...columns.slice(1),
-  ];
-
-  return (
-    <div className={cn(RC, className)}>
-      {!isNoHeader && (
-        <div className={cn(`${RC}__header`)}>
-          <div className={cn(`${RC}__title-block`)}>{title}</div>
-          <div className={cn(`${RC}__right-header-content-block`)}>
-            {rightHeaderContent}
-          </div>
-        </div>
-      )}
-      <div
-        className={cn(`${RC}__body`, {
-          [`${RC}__body_no-content`]: !rows?.length,
-        })}
-      >
-        {Boolean(rows?.length) && (
-          <div className={cn(`${RC}__thead`)}>
-            {preperedColumns.map(field => (
-              <div
-                key={`thead-${field.key}`}
-                className={cn(
-                  `${RC}__thead-cell`,
-                  field.theadCellClassName,
-                  field.columnClassName,
-                  {
-                    [`${RC}__thead-cell_reqiured`]: field.isRequired,
-                  },
-                )}
-                data-key={field.key}
-              >
-                {field.label}
-              </div>
-            ))}
-          </div>
-        )}
-
-        <div className={cn(`${RC}__table`)}>
-          {rows?.length
-            ? (
-                rows.map(row => (
-                  <div
-                    key={`row-${row.id}`}
-                    className={cn(`${RC}__row`)}
-                    data-id={row.id}
-                  >
-                    {preperedColumns.map(cell => (
-                      <div
-                        key={`row-${row.id}-cell-${cell.key}`}
-                        className={cn(
-                          `${RC}__cell`,
-                          cell.cellClassName,
-                          cell.columnClassName,
-                        )}
-                      >
-                        <CellComponent
-                          {...CellComponentProps}
-                          field={{
-                            ...cell,
-                            value: row[cell.key],
-                            rowData: row,
-                            ...(cell.key === 'isActive'
-                              ? {
-                                  disabled: cell.disabled,
-                                  label: row.label,
-                                  isActive: row.isActive,
-                                }
-                              : { disabled: !row.isActive, label: cell.label }),
-                          }}
-                          onChange={(key, value, propName, innerFieldKey, additional) => onChange({ value, additional, propName, innerFieldKey, key: cell.key || key, rowId: row.id })}
-                        />
-                      </div>
-                    ))}
-                  </div>
-                ))
-              )
-            : (
-                <div className={cn(`${RC}__row`)} data-id="empty-row">
-                  <span className={cn(`${RC}__no-data-content`)}>
-                    {nullContentData ?? 'No data'}
-                  </span>
-                </div>
-              )}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default WidgetWithSwitchableRows;

package/dist/Atomic/Layout/Header/Header.jsx

@@ -1,86 +0,0 @@
-import cn from 'classnames';
-
-import { useRef, useState } from 'react';
-import { Bell, ChevronRight, Power } from 'react-feather';
-
-import Hint from '../../UI/Hint/Hint';
-
-import './Header.scss';
-
-function Header({
-  className,
-  name = 'John',
-  surname = 'Silver',
-  status = 'admin',
-  img = '',
-  hintLabel = 'Help',
-  hintText = 'Hint text',
-}) {
-  const [isOpen, setIsOpen] = useState(false);
-
-  const userMenu = useRef(null);
-
-  const handle = {
-    toggleMenu: () => {
-      if (!isOpen) setIsOpen(!isOpen);
-    },
-    closeMenu: () => {
-      setTimeout(() => setIsOpen(false), 50);
-    },
-    logout: () => {
-      handle.toggleMenu();
-    },
-  };
-
-  return (
-    <header className={cn('header', className)}>
-      <div className="df">
-        <Hint
-          side="bottom"
-          hint={hintText}
-          className="header__hint"
-          label={hintLabel}
-          iconOutline
-        />
-      </div>
-
-      <div className="j6 user-menu">
-        <div onClick={() => {}} className="header--bell">
-          <Bell className="header--bell-icon" />
-          <div className="header--bell-notification-icon" />
-        </div>
-
-        <div className="header--user-ava">
-          <img src={img} alt="" />
-        </div>
-
-        <div className="dfc mr10">
-          <span className="header--user-name">
-            {name}
-            {' '}
-            {surname}
-          </span>
-          <span className="header--user-status">{status}</span>
-        </div>
-
-        <ChevronRight
-          onClick={handle.toggleMenu}
-          className={cn('accordion--title-chevron', {
-            'accordion--title-chevron-open': isOpen,
-          })}
-        />
-        {isOpen && (
-          <div className="user-menu__dropdown" ref={userMenu}>
-            <div className="user-menu__item" onClick={handle.logout}>
-              <Power className="mr10" />
-              {' '}
-              Logout
-            </div>
-          </div>
-        )}
-      </div>
-    </header>
-  );
-}
-
-export default Header;