@sisense/sdk-shared-ui 1.27.1 → 1.29.0

package/src/lib/Menu/Confirmation/Confirmation.module.scss

@@ -1,48 +0,0 @@
-$positiveSign: green;
-$negativeSign: red;
-
-$buttonYes: $positiveSign;
-$buttonNo: $negativeSign;
-
-.container {
-  min-width: 245px;
-  max-width: 350px;
-  padding: 12px 18px;
-  font-size: 13px;
-  user-select: none;
-}
-
-.message {
-  margin-top: 10px;
-  overflow: hidden;
-  white-space: pre-line;
-  text-overflow: ellipsis;
-}
-
-.buttons {
-  margin-top: 19px;
-  width: 100%;
-  text-align: right;
-}
-
-.button {
-  height: 25px;
-  width: auto;
-  background: transparent;
-  outline: none;
-  cursor: pointer;
-  border: none;
-
-  &:hover {
-    opacity: 0.7;
-  }
-}
-
-.confirm {
-  color: $buttonYes;
-  margin-right: 20px;
-}
-
-.cancel {
-  color: $buttonNo;
-}

package/src/lib/Menu/Confirmation/Confirmation.tsx

@@ -1,45 +0,0 @@
-import React from 'react';
-import ClassNames from 'classnames';
-// todo: add translations support
-// import { FormattedMessage } from 'react-intl';
-
-import { styleguideConstants } from '../../constants/styleguideConstants';
-
-import styles from './Confirmation.module.scss';
-// import messages from './translation';
-
-export const Confirmation = ({
-  message,
-  title,
-  onCancel,
-  onConfirm,
-}: {
-  message: string;
-  title: string;
-  onCancel: () => void;
-  onConfirm: () => void;
-}) => {
-  const confirmClasses = ClassNames(styles.button, styles.confirm);
-  const cancelClasses = ClassNames(styles.button, styles.cancel);
-
-  return (
-    <div className={styles.container}>
-      <div className={styles.title}>{title}</div>
-      <div className={ClassNames(styles.message, styleguideConstants.TEXT_SECONDARY)}>
-        {message}
-      </div>
-      <div className={styles.buttons}>
-        <button className={confirmClasses} onClick={onConfirm}>
-          {/* eslint-disable-next-line i18next/no-literal-string */}
-          {/*<FormattedMessage {...messages.yes} />*/}
-          Yes
-        </button>
-        <button className={cancelClasses} onClick={onCancel}>
-          {/* eslint-disable-next-line i18next/no-literal-string */}
-          {/* <FormattedMessage {...messages.no} /> */}
-          No
-        </button>
-      </div>
-    </div>
-  );
-};

package/src/lib/Menu/Confirmation/translation.ts

@@ -1,17 +0,0 @@
-// import { defineMessages } from 'react-intl';
-
-// export default defineMessages({
-//     yes: {
-//         id: 'app.confirmation.yes',
-//         defaultMessage: 'Yes',
-//     },
-//     no: {
-//         id: 'app.confirmation.no',
-//         defaultMessage: 'No',
-//     },
-//     areYouSure: {
-//         id: 'app.confirmation.inline.areYouSure',
-//         defaultMessage: 'Are You Sure?',
-//     },
-// });
-export {};

package/src/lib/Menu/Menu.module.scss

@@ -1,178 +0,0 @@
-@use 'sass:math';
-@import '../styles/sisenseStyleguideReactColors.scss';
-
-$line-height: 18px;
-$item-space: 12px;
-$icon-size: 22px;
-$vertical-diff: math.div($icon-size - $line-height, 2);
-$item-vertical-padding: (math.div($item-space, 2) - $vertical-diff);
-$disabledMenuItemColor: $stepCaption;
-
-.container {
-  min-width: 128px;
-  position: absolute;
-  cursor: pointer;
-  padding: 0px;
-  background: $back;
-  box-shadow: 0px 0px 5px rgba(58, 67, 86, 0.2);
-  border-radius: 4px;
-
-  li {
-    list-style-type: none;
-    line-height: $icon-size;
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    padding: $item-vertical-padding 5px;
-    position: relative;
-    transition: background-color 0.3s eaSe;
-    cursor: pointer;
-
-    &.disabled {
-      opacity: 0.5;
-      cursor: default;
-    }
-
-    &.groupHeader {
-      pointer-events: none;
-      font-style: italic;
-      font-weight: 600;
-    }
-
-    &.isDrill {
-      &:hover,
-      &:global(.fakeHover) {
-        background-color: $highlightListItem;
-      }
-    }
-
-    &:hover:not(.disabled) {
-      background-color: $highlightListItem;
-
-      &:after {
-        opacity: 1;
-      }
-    }
-
-    &.separator {
-      border-top: 1px solid #e1e1e1;
-    }
-
-    &.noIcon {
-      padding-left: 16px;
-      padding-right: 16px;
-    }
-
-    &.item.checked {
-      &:after {
-        content: '';
-        display: block;
-        position: absolute;
-        top: 0;
-        left: 0;
-        height: 100%;
-        width: 2px;
-        background-color: $foreHover;
-      }
-    }
-
-    &.radio {
-      padding-left: 8px;
-      padding-right: 0;
-      line-height: $icon-size;
-      align-items: stretch;
-    }
-
-    &.checkbox {
-      padding-left: 0;
-      padding-right: 0;
-      line-height: $icon-size;
-      align-items: stretch;
-    }
-
-    .icon {
-      margin: 0 10px 0 7px;
-    }
-
-    .itemType {
-      display: flex;
-      width: 100%;
-      margin-right: 1px;
-      white-space: nowrap;
-      // Space icon to end of line
-      :last-child {
-        margin-left: auto;
-      }
-    }
-
-    .nestedType {
-      display: flex;
-      width: 100%;
-
-      .nestedIcon {
-        position: static !important;
-      }
-    }
-
-    .menuItemText {
-      flex-grow: 1;
-      display: flex;
-      align-items: center;
-    }
-  }
-}
-
-.separateGroup {
-  min-width: fit-content;
-}
-
-.itemCheckBox {
-  padding: 0 5px 0 16px;
-  width: 100%;
-}
-
-.itemRadioButton {
-  padding: 0 5px 0 8px;
-  width: 100%;
-}
-
-.scrollbar {
-  cursor: default;
-  > div:first-child {
-    position: relative !important;
-  }
-}
-
-.itemContainer {
-  display: flex;
-  flex-grow: 1;
-}
-
-.inlineConfirmation {
-  font-weight: 600;
-}
-
-.menuItemTooltip {
-  max-width: 180px;
-  overflow-wrap: break-word;
-
-  &:global(.rc-tooltip-placement-left) {
-    max-width: 195px;
-    padding-right: 15px;
-  }
-}
-
-.toggleButtonMenu {
-  pointer-events: none;
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  right: 10px;
-}
-
-.loader {
-  height: 25px;
-  position: relative;
-  margin: 0 auto;
-  width: 90%;
-}

package/src/lib/Menu/Menu.tsx

@@ -1,363 +0,0 @@
-import React, { Component } from 'react';
-import classnames from 'classnames';
-import { Scrollbars } from 'react-custom-scrollbars';
-import type { ScrollbarProps } from 'react-custom-scrollbars';
-
-import { Popover } from '../Popover';
-import { LazyLoader } from '../LazyLoader';
-import { MenuItem } from './MenuItem';
-import { Confirmation } from './Confirmation';
-
-import type { ItemType } from './MenuItem';
-
-import { groupBy } from './utils';
-
-import style from './Menu.module.scss';
-
-export type MenuItemConfig = {
-  actionableComponent?: ActionableComponent;
-  caption: string;
-  subCaption?: string;
-  checked?: boolean;
-  confirmation?: {
-    title: string;
-    message: string;
-    inline: boolean;
-  };
-  dataTestId?: string;
-  disabled?: boolean;
-  groupId?: string;
-  hidden?: boolean;
-  iconClass?: string;
-  iconName?: string;
-  id: string;
-  onClick?: () => void;
-  selected?: boolean;
-  separator?: boolean;
-  subItems?: MenuItemConfig[];
-  subItemScrollbarClassName?: string;
-  tooltip?: string | React.ReactFragment;
-  type: ItemType;
-  value?: string;
-  groupTitle?: boolean;
-};
-
-type ActionableComponent = {
-  component: React.ComponentType<{ onRequestClose?: () => void }>;
-  componentProps: any;
-};
-
-export type MenuProps = {
-  className?: string;
-  items: MenuItemConfig[];
-  level?: number;
-  onItemSelected: (menuItemConfig: MenuItemConfig, value?: string) => void;
-  onMouseEnter?: () => void;
-  onRequestClose?: () => void;
-  scrollbarProps: ScrollbarProps;
-  width?: number;
-  isLoading?: boolean;
-  classNameTooltip?: string;
-  zIndex?: number;
-};
-
-type State = {
-  activeSubMenu: string | null;
-  isHoverSubMenu: boolean;
-};
-
-const noop = () => {};
-
-class Menu extends Component<MenuProps, State> {
-  timeoutIn: number | null;
-
-  static defaultProps = {
-    onMouseEnter: noop,
-    onRequestClose: noop,
-    scrollbarProps: {},
-    level: 0,
-    isLoading: false,
-    zIndex: 1,
-  };
-
-  constructor(props: MenuProps) {
-    super(props);
-
-    this.state = {
-      activeSubMenu: null,
-      isHoverSubMenu: false,
-    };
-
-    this.timeoutIn = null;
-  }
-
-  componentWillUnmount() {
-    this.clearTimeout();
-  }
-
-  handleClick = (item: MenuItemConfig) => {
-    if (item.subItems || item.actionableComponent) {
-      this.clearTimeout();
-
-      if (this.state.activeSubMenu === item.id) {
-        this.closeSubMenu();
-      } else {
-        this.setState({ activeSubMenu: item.id });
-      }
-
-      return;
-    } else if (item.confirmation && !item.confirmation.inline) {
-      this.clearTimeout();
-      this.setState({ activeSubMenu: item.id });
-      return;
-    }
-
-    const { onItemSelected } = this.props;
-    onItemSelected(item, item.value);
-  };
-
-  handleOver = (item: MenuItemConfig) => {
-    this.clearTimeout();
-    this.setState({ isHoverSubMenu: false });
-
-    const activeSubMenu = item.subItems || item.actionableComponent ? item.id : null;
-
-    this.timeoutIn = window.setTimeout(() => {
-      this.setState({
-        activeSubMenu,
-      });
-    }, 900);
-  };
-
-  handleOut = (item: MenuItemConfig) => {
-    if ((item.subItems || item.actionableComponent) && this.state.activeSubMenu) {
-      this.clearTimeout();
-    }
-  };
-
-  clearTimeout() {
-    if (!this.timeoutIn) {
-      return;
-    }
-
-    clearTimeout(this.timeoutIn);
-    this.timeoutIn = null;
-  }
-
-  onSubMenuMouseEnter = () => {
-    this.clearTimeout();
-    this.setState({ isHoverSubMenu: true });
-  };
-
-  onSubMenuMouseLeave = () => {
-    this.setState({ isHoverSubMenu: false });
-  };
-
-  closeSubMenu = () => {
-    this.setState({ activeSubMenu: null });
-  };
-
-  onConfirm = (item: MenuItemConfig) => {
-    const { onItemSelected } = this.props;
-    this.closeSubMenu();
-    onItemSelected(item);
-  };
-
-  getSeparateGroups(items: MenuItemConfig[]) {
-    const menuItemsGroupMap = groupBy(items, (item) => item.groupId || '');
-    const groupsList = Object.values(menuItemsGroupMap);
-
-    const groupsToAddSeparator = groupsList.slice(1);
-    groupsToAddSeparator.forEach((group) => (group[0].separator = true));
-
-    return groupsList;
-  }
-
-  renderMenuItem = (item: MenuItemConfig) => {
-    const { onItemSelected, onRequestClose, level, classNameTooltip, zIndex, className } =
-      this.props;
-
-    let menuItemClass = classnames(style[item.type], {
-      [style.isDrill]: item.subItems,
-      [style.separator]: item.separator,
-      fakeHover: item.checked,
-      [style.groupHeader]: item.groupTitle,
-    });
-
-    const createMenuItem = (menuItemClass: string) => {
-      // const { confirmation = { inline: false } } = item;
-      const iconClass = classnames(item.iconClass, style.icon);
-      return (
-        <MenuItem
-          className={menuItemClass}
-          checked={item.checked}
-          dataTestId={item.dataTestId}
-          disabled={item.disabled}
-          key={item.id}
-          type={item.type}
-          caption={item.caption}
-          subCaption={item.subCaption}
-          tooltip={item.tooltip}
-          classNameTooltip={classNameTooltip}
-          iconName={item.iconName}
-          // trailElement={item.trailElement}
-          iconClass={iconClass}
-          isDrill={!!item.subItems || !!item.actionableComponent}
-          // inlineConfirmation={confirmation.inline}
-          // inlineMessage={confirmation.message}
-          level={level}
-          selected={item.selected}
-          handleClick={() => this.handleClick(item)}
-          handleOver={() => this.handleOver(item)}
-          handleOut={() => this.handleOut(item)}
-        />
-      );
-    };
-
-    let subItems = item.subItems;
-    if (subItems) {
-      const subMenuVisible = this.state.activeSubMenu === item.id;
-      let handleClick = this.handleClick;
-      menuItemClass = classnames(menuItemClass, {
-        fakeHover: subMenuVisible && this.state.isHoverSubMenu,
-      });
-
-      if (item.value !== undefined) {
-        subItems = subItems.map(function (subItem) {
-          return {
-            ...subItem,
-            checked: subItem.value === item.value,
-          };
-        });
-
-        handleClick = (childItem) => onItemSelected(item, childItem.value);
-      }
-
-      const overlay = () => (
-        <Menu
-          items={subItems || []}
-          className={className}
-          onItemSelected={handleClick}
-          onMouseEnter={this.onSubMenuMouseEnter}
-          scrollbarProps={{
-            className: item.subItemScrollbarClassName,
-          }}
-          level={(level || 0) + 1}
-          zIndex={(zIndex || 1) + 1}
-        />
-      );
-
-      return (
-        <Popover
-          key={item.id}
-          visible={subMenuVisible}
-          level={1}
-          mask={false}
-          trigger={[]}
-          placement="rightTop"
-          align={{ offset: [0, 0] }}
-          overlay={overlay}
-          onRequestClose={onRequestClose}
-          zIndex={(zIndex || 1) + 1}
-        >
-          {createMenuItem(menuItemClass)}
-        </Popover>
-      );
-    } else if (item.actionableComponent) {
-      // eslint-disable-next-line
-      const { componentProps } = item.actionableComponent;
-      const Component: any = item.actionableComponent.component;
-      const actionableComponentVisible = this.state.activeSubMenu === item.id;
-      const overlay = () => <Component {...componentProps} onRequestClose={onRequestClose} />;
-
-      return (
-        <Popover
-          key={item.id}
-          visible={actionableComponentVisible}
-          level={1}
-          mask={false}
-          trigger={[]}
-          placement="rightTop"
-          align={{ offset: [10, 0] }}
-          overlay={overlay}
-          onRequestClose={onRequestClose}
-        >
-          {createMenuItem(menuItemClass)}
-        </Popover>
-      );
-    } else if (item.confirmation && !item.confirmation.inline) {
-      const confirmConfig = item.confirmation;
-      const confirmationVisible = this.state.activeSubMenu === item.id;
-      const overlay = () => (
-        <Confirmation
-          title={confirmConfig.title}
-          message={confirmConfig.message}
-          onCancel={this.closeSubMenu}
-          onConfirm={() => this.onConfirm(item)}
-        />
-      );
-
-      return (
-        <Popover
-          key={item.id}
-          visible={confirmationVisible}
-          level={1}
-          mask
-          trigger={[]}
-          placement="rightBottom"
-          align={{ offset: [10, 0] }}
-          overlay={overlay}
-          onRequestClose={this.closeSubMenu}
-        >
-          {createMenuItem(menuItemClass)}
-        </Popover>
-      );
-    }
-
-    return createMenuItem(menuItemClass);
-  };
-
-  render() {
-    const {
-      items,
-      className,
-      onMouseEnter,
-      scrollbarProps: { className: scrollClass, ...otherScrollbarProps },
-      width,
-      isLoading,
-    } = this.props;
-    let visibleItems = items.filter((item) => !item.hidden);
-    visibleItems = visibleItems.map((item, index) => {
-      if (item.separator && !visibleItems[index - 1]) {
-        item.separator = false;
-      }
-      return item;
-    });
-
-    const containerClasses = classnames(style.container, className);
-    const scrollbarClasses = classnames(style.scrollbar, scrollClass);
-
-    const styles = width ? { width: `${width}px`, minWidth: 'inherit' } : {};
-    const loaderClass = isLoading ? style.loader : '';
-
-    return (
-      <div className={containerClasses} onMouseEnter={onMouseEnter} style={styles}>
-        <Scrollbars className={scrollbarClasses} {...otherScrollbarProps} hideTracksWhenNotNeeded>
-          {this.getSeparateGroups(visibleItems).map((group, index) => {
-            return (
-              <div className={style.separateGroup} key={index}>
-                {group.map(this.renderMenuItem)}
-              </div>
-            );
-          })}
-          <div className={loaderClass}>
-            <LazyLoader isLoading={isLoading} />
-          </div>
-        </Scrollbars>
-      </div>
-    );
-  }
-}
-
-export default Menu;
-export { Menu };