intelicoreact 1.8.3 → 1.8.5

package/dist/Atomic/FormElements/Text/Text.jsx

@@ -0,0 +1,126 @@
+import cn from 'classnames';
+
+import './Text.scss';
+
+const RC = 'text';
+
+/**
+ *
+ * @param value
+ * @param className
+ * @param classesObj
+ * @param icon
+ * @param link
+ * @param align
+ * @param testId
+ * @return {JSX.Element|null}
+ * @constructor
+ */
+
+// ? Прототип лежит на проекте кабинета src\JS\Components\Atomic\FormElements\Text\Text.js
+// ? Что поменял?
+// ?   - в верстке убрал дополнительную вложенность
+// ?     (теперь только 1 внешний контейнер, доп. классы назначаются рядом с className)
+// ?   - убрал пропы as и isTitle, они были для работы с предзаданными классами связанными с токенизацией
+// ?     возможность прокинуть доп. классы объектом с условиями оставил через пропу classesObj
+// ?   - заменил пропу text на value
+// ?   - заменил пропу iconMain на icon
+// ?   - переработал пропу link, может быть строкой или объектом
+// ?     если это объект, то у него могут быть свойства
+// ?       - path - значение для href
+
+// ?       - target - значение для атрибута target, имеет смысл передавать, если не передаются onClick или redirect
+
+// ?       - onClick - альтернативный обработчик нажатия, если он есть то он будет ипользован в приоритете,
+// ?         ф-я будет вызвана с 1 аргументом - props, в объекте props будет свойство ev (event) и все содержание link,
+// ?         по умолчанию до использования onClick будут вызваны e.preventDefault() и e.stopPropagation
+
+// ?       - redirect - альтернативный исполнитель редиректа (например history.push),
+// ?         если есть и нет onClick - будет вызван с одним аргументом (link.path)
+
+// ?       - isNoPreventDefault - отключает вызов e.preventDefault перед вызовом onClick или redirect
+
+// ?       - isNoStopPropagation - отключает вызов e.preventDefault перед вызовом onClick или redirect
+
+function Text({
+  value,
+  className,
+  classesObj,
+  icon,
+  link,
+  align = 'left',
+  testId = 'text-lib-component',
+}) {
+  if (!value) return null;
+  const isLinkAsObj = link instanceof Object && !Array.isArray(link);
+  const isLinkAsString = typeof link === 'string';
+  const isLink = isLinkAsObj || isLinkAsString;
+
+  const linkObj = isLinkAsObj ? link : {};
+  const {
+    path = '',
+    target,
+    redirect,
+    onClick: onClickInner,
+    isNoPreventDefault,
+    isNoStopPropagation,
+  } = linkObj;
+
+  const preparedPath = (() => {
+    if (!isLink) return '';
+    return isLinkAsObj ? path : link;
+  })();
+
+  const atributes = {};
+
+  if (typeof onClickInner === 'function' || typeof redirect === 'function') {
+    atributes.onClick = function onClick(ev) {
+      if (!isNoPreventDefault) ev.preventDefault();
+      if (!isNoStopPropagation) ev.stopPropagation();
+
+      // ? если переданы и onClick, и redirect, то onClick считается приоритетнее redirect
+      if (onClickInner) {
+        onClickInner({ ev, ...link });
+        return;
+      }
+      redirect(preparedPath);
+    };
+  }
+
+  const mainInner = (
+    <>
+      {icon && <div className={`${RC}__icon-container`}>{icon}</div>}
+      {value}
+    </>
+  );
+
+  return (
+    <div
+      data-testid={testId}
+      className={cn(RC, className, {
+        [`${RC}-left`]: align === 'left',
+        [`${RC}-center`]: align === 'center',
+        [`${RC}-right`]: align === 'right',
+        [`${RC}-justify`]: align === 'justify',
+        ...classesObj,
+      })}
+    >
+      {isLink
+        ? (
+            <a
+              {...atributes}
+              href={preparedPath}
+              target={target ?? '_self'}
+              rel="noreferrer"
+            >
+              {mainInner}
+            </a>
+          )
+        : (
+            mainInner
+          )}
+    </div>
+  );
+}
+
+export default Text;

package/dist/Atomic/FormElements/Textarea/Textarea.jsx

@@ -0,0 +1,61 @@
+import cn from 'classnames';
+
+import { useEffect, useRef } from 'react';
+
+import { formatToOnlyASCIICodeText } from '../../../Functions/fieldValueFormatters';
+
+import './Textarea.scss';
+
+const RC = 'textarea';
+
+function Textarea({ ref, id, value, onChange, onFocus, onBlur, placeholder, disabled, className, isNotValidateASCII = false, testId = RC, withAutoGrow, onKeyDown = () => {} }) {
+  const internalRef = useRef();
+  const textareaRef = ref || internalRef;
+
+  const handle = {
+    change: (val) => {
+      let inputValue = val;
+      if (!isNotValidateASCII)
+        inputValue = formatToOnlyASCIICodeText(inputValue);
+
+      onChange(inputValue);
+    },
+    focus: (e) => {
+      onFocus?.(e);
+    },
+    blur: (e) => {
+      onBlur?.(e);
+    },
+  };
+
+  const autoGrow = (el) => {
+    el.style.height = '5px';
+    el.style.height = `${el.scrollHeight}px`;
+  };
+
+  useEffect(() => {
+    if (withAutoGrow) {
+      autoGrow(textareaRef?.current);
+    }
+  }, [value, withAutoGrow]);
+
+  return (
+    <div data-testid={testId} className={cn(`${RC}`, className)}>
+      <textarea
+        id={id ?? Math.random().toString(16).slice(2)}
+        data-testid={`${testId}-textarea`}
+        className={`${RC}__textarea`}
+        value={value}
+        onChange={e => handle.change(e.target.value)}
+        placeholder={placeholder}
+        disabled={disabled}
+        onKeyDown={onKeyDown}
+        ref={textareaRef}
+        onFocus={handle.focus}
+        onBlur={handle.blur}
+      />
+    </div>
+  );
+}
+
+export default Textarea;

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

@@ -0,0 +1,181 @@
+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

@@ -0,0 +1,60 @@
+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

@@ -0,0 +1,83 @@
+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

@@ -0,0 +1,80 @@
+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

@@ -0,0 +1,103 @@
+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;