@megafon/ui-core 5.16.0 → 5.18.0

package/dist/es/components/ListData/ListData.css

@@ -0,0 +1,162 @@
+.mfui-list-data {
+  position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  width: 100%;
+  height: -webkit-fit-content;
+  height: -moz-fit-content;
+  height: fit-content;
+  padding: 8px 16px 8px 12px;
+  border: none;
+  color: var(--content);
+  text-decoration: none;
+  background-color: transparent;
+  -webkit-transition: background-color, opacity;
+  transition: background-color, opacity;
+  -webkit-transition-duration: 0.3s;
+          transition-duration: 0.3s;
+}
+.mfui-list-data__icon-container {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  width: 40px;
+  height: 40px;
+  margin-right: 8px;
+}
+.mfui-list-data__icon-container svg {
+  fill: var(--content);
+}
+.mfui-list-data__icon-container_colored {
+  border-radius: 50%;
+  background-color: var(--brandGreen20);
+}
+.mfui-list-data__icon-container_colored svg {
+  fill: var(--brandGreen);
+}
+.mfui-list-data__icon {
+  width: 32px;
+  min-width: 32px;
+  height: 32px;
+}
+.mfui-list-data__icon_small {
+  width: 20px;
+  min-width: 20px;
+  height: 20px;
+}
+.mfui-list-data__header {
+  display: grid;
+  grid-template-columns: 100%;
+  margin-right: auto;
+  padding-left: 4px;
+}
+.mfui-list-data__header_gap {
+  padding-right: 8px;
+}
+.mfui-list-data__header_align {
+  -ms-flex-item-align: end;
+      align-self: flex-end;
+}
+.mfui-list-data__title {
+  font-size: 15px;
+  line-height: 24px;
+  /* stylelint-disable-next-line value-no-vendor-prefix */
+  display: -webkit-box;
+  overflow: hidden;
+  white-space: normal;
+  text-overflow: ellipsis;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  font-weight: 500;
+  line-height: 18px;
+}
+.mfui-list-data__title-link {
+  color: var(--content);
+}
+.mfui-list-data__sub-title {
+  font-size: 12px;
+  line-height: 18px;
+  margin-top: 4px;
+  overflow: hidden;
+  color: var(--spbSky3);
+  font-weight: 400;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.mfui-list-data__value-container {
+  display: grid;
+  grid-template-columns: -webkit-min-content;
+  grid-template-columns: min-content;
+  align-self: flex-start;
+  padding-left: 12px;
+}
+.mfui-list-data__value {
+  font-size: 15px;
+  line-height: 24px;
+  /* stylelint-disable-next-line value-no-vendor-prefix */
+  display: -webkit-box;
+  overflow: hidden;
+  white-space: normal;
+  text-overflow: ellipsis;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  max-width: 110px;
+  line-height: 18px;
+}
+.mfui-list-data__value_color_green {
+  color: var(--brandGreen);
+}
+.mfui-list-data__sub-value {
+  font-size: 12px;
+  line-height: 18px;
+  max-width: 110px;
+  margin-top: 4px;
+  overflow: hidden;
+  color: var(--spbSky3);
+  font-weight: 400;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.mfui-list-data__action-icon {
+  fill: var(--spbSky3);
+}
+.mfui-list-data__action-icon_active {
+  cursor: pointer;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-transition: fill 0.3s;
+  transition: fill 0.3s;
+}
+.mfui-list-data__action-icon_active:hover {
+  fill: var(--content);
+}
+.mfui-list-data__children_event-none {
+  pointer-events: none;
+}
+.mfui-list-data_active:not(.mfui-list-data_disabled) {
+  border-radius: 12px;
+  cursor: pointer;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+.mfui-list-data_active:not(.mfui-list-data_disabled):hover {
+  background-color: var(--spbSky0);
+}
+.mfui-list-data_disabled {
+  opacity: 0.5;
+}
+.mfui-list-data_disabled .mfui-list-data__title-link {
+  pointer-events: none;
+}

package/dist/es/components/ListData/ListData.d.ts

@@ -0,0 +1,94 @@
+import React from 'react';
+import * as PropTypes from 'prop-types';
+import './ListData.less';
+declare type Target = '_self' | '_blank' | '_parent' | '_top';
+export declare type TitlePropsType = {
+    /** Текст заголовка */
+    text: string;
+    /** Ссылка */
+    href: string;
+    /** Атрибут ссылки target */
+    target?: Target;
+    /** Атрибут ссылки rel */
+    rel?: string;
+};
+declare const ValueColors: {
+    readonly DEFAULT: "default";
+    readonly GREEN: "green";
+};
+export declare type ValueColorsType = typeof ValueColors[keyof typeof ValueColors];
+declare const Actions: {
+    readonly DELETE: "delete";
+    readonly CONTROL: "control";
+};
+export declare type ActionsType = typeof Actions[keyof typeof Actions];
+export interface IListDataProps {
+    /** Заголовок */
+    title: string | TitlePropsType;
+    /** Подзаголовок */
+    subTitle?: string;
+    /** Значение */
+    value?: string;
+    /** Цвет */
+    valueColor?: ValueColorsType;
+    /** Дополнительное значение */
+    subValue?: string;
+    /** Иконка */
+    icon?: JSX.Element;
+    /** Фоновая заливка у иконки */
+    isIconColored?: boolean;
+    /** Аватар */
+    avatar?: JSX.Element;
+    /** Отключение компонента */
+    disabled?: boolean;
+    /** Элемент дополнительного действия */
+    actionType?: ActionsType;
+    /** Обработчик дополнительного действия */
+    onAction?: (e: React.SyntheticEvent<EventTarget>) => void;
+    /** Обработчик клика */
+    onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные классы для внутренних элементов */
+    classes?: {
+        root?: string;
+        title?: string;
+        subtitle?: string;
+    };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        actionIcon?: Record<string, string>;
+    };
+    /** Дочерние элементы: Button, Selector */
+    children?: React.ReactNode;
+}
+declare const ListData: React.FC<IListDataProps>;
+export declare const ListDataPropType: {
+    title: PropTypes.Validator<string | PropTypes.InferProps<{
+        text: PropTypes.Validator<string>;
+        href: PropTypes.Validator<string>;
+        target: PropTypes.Requireable<string>;
+        rel: PropTypes.Requireable<string>;
+    }>>;
+    subTitle: PropTypes.Requireable<string>;
+    value: PropTypes.Requireable<string>;
+    valueColor: PropTypes.Requireable<"default" | "green">;
+    subValue: PropTypes.Requireable<string>;
+    icon: PropTypes.Requireable<PropTypes.ReactElementLike>;
+    isIconColored: PropTypes.Requireable<boolean>;
+    avatar: PropTypes.Requireable<PropTypes.ReactElementLike>;
+    disabled: PropTypes.Requireable<boolean>;
+    actionType: PropTypes.Requireable<"delete" | "control">;
+    onAction: PropTypes.Requireable<(...args: any[]) => any>;
+    onClick: PropTypes.Requireable<(...args: any[]) => any>;
+    className: PropTypes.Requireable<string>;
+    classes: PropTypes.Requireable<{
+        [x: string]: string | null | undefined;
+    }>;
+    dataAttrs: PropTypes.Requireable<{
+        [x: string]: object | null | undefined;
+    }>;
+    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+};
+export default ListData;

package/dist/es/components/ListData/ListData.js

@@ -0,0 +1,203 @@
+import _typeof from "@babel/runtime/helpers/typeof";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _extends from "@babel/runtime/helpers/extends";
+import "core-js/modules/es.parse-int.js";
+import "core-js/modules/es.object.values.js";
+import React from 'react';
+import { cnCreate, convert, filterDataAttrs, textConvertConfig } from '@megafon/ui-helpers';
+import * as PropTypes from 'prop-types';
+import "./ListData.css";
+
+var DeleteIcon = function DeleteIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M16 4h-3.2c-.4-1.2-1.5-2-2.8-2s-2.4.8-2.8 2H4v4h1l1 10h8l1-10h1V4zM5 5h3v-.4C8.2 3.7 9.1 3 10 3s1.8.7 2 1.6V5h3v2H5V5zm8 12H7l-.9-9H14l-1 9z"
+  }));
+};
+
+var NothingIcon = function NothingIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 32 32"
+  }, props), /*#__PURE__*/React.createElement("circle", {
+    cx: 21,
+    cy: 16,
+    r: 1.5
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: 16,
+    cy: 16,
+    r: 1.5
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: 11,
+    cy: 16,
+    r: 1.5
+  }));
+};
+
+var LINE_COUNT = 2;
+var ValueColors = {
+  DEFAULT: 'default',
+  GREEN: 'green'
+};
+var Actions = {
+  DELETE: 'delete',
+  CONTROL: 'control'
+};
+var cn = cnCreate('mfui-list-data');
+
+var ListData = function ListData(_ref) {
+  var title = _ref.title,
+      subTitle = _ref.subTitle,
+      value = _ref.value,
+      valueColor = _ref.valueColor,
+      subValue = _ref.subValue,
+      icon = _ref.icon,
+      _ref$isIconColored = _ref.isIconColored,
+      isIconColored = _ref$isIconColored === void 0 ? false : _ref$isIconColored,
+      avatar = _ref.avatar,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      actionType = _ref.actionType,
+      onClick = _ref.onClick,
+      onAction = _ref.onAction,
+      className = _ref.className,
+      _ref$classes = _ref.classes,
+      classes = _ref$classes === void 0 ? {} : _ref$classes,
+      dataAttrs = _ref.dataAttrs,
+      children = _ref.children;
+  var valueRef = React.useRef(null);
+
+  var _React$useState = React.useState('right'),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      valueAlignment = _React$useState2[0],
+      setValueAlignment = _React$useState2[1];
+
+  var isActive = !!onClick && !(_typeof(title) === 'object' && (title === null || title === void 0 ? void 0 : title.href));
+  var showActionElement = !!actionType || !!children;
+
+  var handleClick = function handleClick(e) {
+    !disabled && (onClick === null || onClick === void 0 ? void 0 : onClick(e));
+  };
+
+  var handleAction = React.useCallback(function (e) {
+    e.stopPropagation();
+    !disabled && (onAction === null || onAction === void 0 ? void 0 : onAction(e));
+  }, [disabled, onAction]);
+  React.useEffect(function () {
+    if (!valueRef.current) {
+      return;
+    }
+
+    var lineHeight = parseInt(getComputedStyle(valueRef.current).lineHeight, 10);
+    var actualHeight = valueRef.current.offsetHeight;
+    var currentLineCount = actualHeight / lineHeight;
+    setValueAlignment(currentLineCount >= LINE_COUNT ? 'left' : 'right');
+  }, [value]);
+  var renderedTitle = /*#__PURE__*/React.createElement("div", {
+    className: cn('title', [classes.title])
+  }, typeof title === 'string' ? title : /*#__PURE__*/React.createElement("a", {
+    className: cn('title-link'),
+    href: title.href,
+    target: title === null || title === void 0 ? void 0 : title.target,
+    rel: title === null || title === void 0 ? void 0 : title.rel
+  }, title.text));
+
+  var renderIcon = function renderIcon() {
+    if (!icon && !avatar) {
+      return null;
+    }
+
+    return /*#__PURE__*/React.createElement("div", {
+      className: cn('icon-container', {
+        colored: isIconColored && !avatar
+      })
+    }, avatar || /*#__PURE__*/React.createElement("div", {
+      className: cn('icon')
+    }, icon));
+  };
+
+  var renderExtraContent = function renderExtraContent() {
+    if (children) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: cn('children', {
+          'event-none': !!onClick
+        })
+      }, children);
+    }
+
+    if (value) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: cn('value-container')
+      }, /*#__PURE__*/React.createElement("div", {
+        className: cn('value', {
+          color: valueColor
+        }),
+        ref: valueRef,
+        style: {
+          textAlign: valueAlignment
+        }
+      }, convert(value, textConvertConfig)), !!subValue && /*#__PURE__*/React.createElement("div", {
+        className: cn('sub-value')
+      }, subValue));
+    }
+
+    if (actionType) {
+      var isDelete = actionType === Actions.DELETE;
+      var ActionIcon = isDelete ? DeleteIcon : NothingIcon;
+      return /*#__PURE__*/React.createElement("div", _extends({
+        className: cn('icon', {
+          small: isDelete
+        })
+      }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.actionIcon), {
+        onClick: handleAction
+      }), /*#__PURE__*/React.createElement(ActionIcon, {
+        className: cn('action-icon', {
+          active: !disabled
+        })
+      }));
+    }
+
+    return null;
+  };
+
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn({
+      active: isActive,
+      disabled: disabled
+    }, [className, classes.root]),
+    onClick: handleClick
+  }), renderIcon(), /*#__PURE__*/React.createElement("div", {
+    className: cn('header', {
+      gap: showActionElement,
+      align: !!subTitle
+    })
+  }, renderedTitle, !!subTitle && /*#__PURE__*/React.createElement("div", {
+    className: cn('sub-title', [classes.subtitle])
+  }, subTitle)), renderExtraContent());
+};
+
+export var ListDataPropType = {
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
+    text: PropTypes.string.isRequired,
+    href: PropTypes.string.isRequired,
+    target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),
+    rel: PropTypes.string
+  })]).isRequired,
+  subTitle: PropTypes.string,
+  value: PropTypes.string,
+  valueColor: PropTypes.oneOf(Object.values(ValueColors)),
+  subValue: PropTypes.string,
+  icon: PropTypes.element,
+  isIconColored: PropTypes.bool,
+  avatar: PropTypes.element,
+  disabled: PropTypes.bool,
+  actionType: PropTypes.oneOf(Object.values(Actions)),
+  onAction: PropTypes.func,
+  onClick: PropTypes.func,
+  className: PropTypes.string,
+  classes: PropTypes.objectOf(PropTypes.string),
+  dataAttrs: PropTypes.objectOf(PropTypes.object),
+  children: PropTypes.node
+};
+ListData.propTypes = ListDataPropType;
+export default ListData;

package/dist/es/components/ListData/ListDataGroup.css

@@ -0,0 +1,15 @@
+.mfui-list-data-group {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  overflow-y: hidden;
+}
+.mfui-list-data-group__item_divider:not(:last-child) {
+  border-bottom: 1px solid var(--spbSky1);
+}

package/dist/es/components/ListData/ListDataGroup.d.ts

@@ -0,0 +1,46 @@
+import React from 'react';
+import { DragEndEvent, DragStartEvent } from '@dnd-kit/core';
+import { ActivatorNodesType, GapSizesType } from './components/ListDataSortable';
+import { IListDataProps } from './ListData';
+import './ListDataGroup.less';
+export declare type ListItemPropsType = IListDataProps & {
+    id: string | number;
+};
+declare type DragOverlayPropsType = {
+    className?: string;
+    zIndex?: number;
+};
+export interface IListDataGroupProps {
+    /** Массив элементов */
+    items: ListItemPropsType[];
+    /** Активатор события перетаскивания */
+    activatorNode?: ActivatorNodesType;
+    /** Отступ между элементами */
+    gap?: GapSizesType;
+    /** Показать разделитель */
+    showDivider?: boolean;
+    /** Обработчик начала процесса перетаскивания */
+    onDragStart?: (event?: DragStartEvent) => void;
+    /** Обработчик окончания процесса перетаскивания */
+    onDragEnd?: (items: ListItemPropsType[], event?: DragEndEvent) => void;
+    /** Отключить перетаскивание */
+    disabled?: boolean;
+    /** Параметры DragOverlay элемента */
+    dragOverlayProps?: DragOverlayPropsType;
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные классы для внутренних элементов */
+    classes?: {
+        root?: string;
+        cell?: string;
+        control?: string;
+    };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        cell?: Record<string, string>;
+        control?: Record<string, string>;
+    };
+}
+declare const ListDataGroup: React.FC<IListDataGroupProps>;
+export default ListDataGroup;