@oliasoft-open-source/react-ui-library 2.4.7 → 3.0.0

package/src/components/menu/menu.jsx

@@ -1,359 +0,0 @@
-import React, { isValidElement, useContext, useState } from 'react';
-import { isFunction, isBoolean, isEmpty } from 'lodash';
-import PropTypes from 'prop-types';
-import ResizeObserver from 'resize-observer-polyfill';
-import { useLayer, useMousePositionAsTrigger } from 'react-laag';
-import { Trigger, Layer, placementOptions, siblings, registerClose } from '.';
-import styles from './menu.module.less';
-import { DisabledContext } from '../../helpers/disabled-context';
-import { actionsShape } from '../actions/actions.shape';
-
-const isMenuEmpty = (menu) => {
-  const { sections } = menu;
-  return (
-    !isValidElement(sections) &&
-    (!sections.length || sections.every((section) => isEmpty(section)))
-  );
-};
-
-const useContextMenu = (
-  sections,
-  width,
-  placement,
-  possiblePlacements,
-  closeOnOptionClick,
-  closeParent,
-  tree,
-  path,
-  groupOrder,
-  overflowContainer,
-  maxHeight,
-  testId,
-) => {
-  const { hasMousePosition, resetMousePosition, handleMouseEvent, trigger } =
-    useMousePositionAsTrigger();
-
-  const close = resetMousePosition;
-  const isOpen = hasMousePosition;
-
-  const { layerProps, renderLayer } = useLayer({
-    isOpen,
-    trigger,
-    ...placementOptions(placement),
-    possiblePlacements,
-    ResizeObserver,
-    onOutsideClick: close,
-    overflowContainer,
-    testId,
-  });
-
-  const layer =
-    isOpen &&
-    renderLayer(
-      <div
-        {...layerProps} // eslint-disable-line react/jsx-props-no-spreading
-      >
-        <Layer
-          isNested={false}
-          width={width}
-          sections={sections}
-          closeOnOptionClick={closeOnOptionClick}
-          close={closeParent || close}
-          tree={tree}
-          path={path}
-          groupOrder={groupOrder}
-          maxHeight={maxHeight}
-        />
-      </div>,
-    );
-
-  return [layer, handleMouseEvent];
-};
-
-const ContextMenu = ({
-  menu,
-  width,
-  disabled,
-  closeOnOptionClick,
-  closeParent,
-  tree,
-  path,
-  groupOrder,
-  testId,
-}) => {
-  const disabledContext = useContext(DisabledContext);
-
-  const {
-    label,
-    trigger,
-    fullHeightTrigger,
-    colored,
-    small,
-    component,
-    placement,
-    possiblePlacements = ['bottom-start', 'top-start'],
-  } = menu;
-  const [element, onContextMenu] = useContextMenu(
-    menu.sections,
-    width,
-    placement,
-    possiblePlacements,
-    closeOnOptionClick,
-    closeParent,
-    tree,
-    path,
-  );
-  const isDisabled = disabled || isMenuEmpty(menu) || disabledContext;
-  return (
-    <div onContextMenu={onContextMenu} data-testid={testId}>
-      <Trigger
-        width={width}
-        fullHeight={fullHeightTrigger}
-        isDisabled={isDisabled}
-        trigger={trigger}
-        label={label}
-        onClickTrigger={() => {}}
-        colored={colored}
-        small={small}
-        isNested
-        component={component}
-        contextMenu
-        groupOrder={groupOrder}
-      />
-      {element}
-    </div>
-  );
-};
-
-export const DropDownMenu = ({
-  menu,
-  width,
-  disabled,
-  badgeTitle,
-  badgeDot,
-  loading,
-  isNested,
-  closeOnOptionClick,
-  closeParent,
-  tree,
-  path,
-  groupOrder,
-  overflowContainer,
-  maxHeight,
-  testId,
-  open: openProp,
-  setOpen: setOpenProp,
-}) => {
-  const disabledContext = useContext(DisabledContext);
-
-  const {
-    label,
-    trigger,
-    fullHeightTrigger,
-    colored,
-    small,
-    sections,
-    component,
-    placement,
-    showAllButton,
-    possiblePlacements = ['bottom-start', 'top-start'],
-  } = menu;
-
-  const [isOpen, setOpen] =
-    isBoolean(openProp) && isFunction(setOpenProp)
-      ? [openProp, setOpenProp]
-      : useState(false);
-
-  const close = () => setOpen(false);
-  const open = () => setOpen(true);
-
-  const { triggerProps, layerProps, renderLayer } = useLayer({
-    isOpen,
-    ...placementOptions(placement, isNested),
-    possiblePlacements,
-    ResizeObserver,
-    onOutsideClick: close,
-    overflowContainer,
-    onParentClose: close,
-  });
-
-  const isDisabled = disabled || isMenuEmpty(menu) || disabledContext;
-
-  //keep a record of close handlers so we can close sibling layers
-  registerClose(tree, path, close);
-
-  const onClickTrigger = () => {
-    if (isDisabled) {
-      return;
-    }
-
-    if (isOpen) {
-      close();
-      return;
-    }
-
-    //first close any sibling menus
-    siblings(tree, path).forEach((section) => {
-      if (section.close) {
-        section.close();
-      }
-    });
-    open();
-  };
-
-  return (
-    <>
-      <Trigger
-        ref={triggerProps.ref}
-        isDisabled={isDisabled}
-        badgeTitle={badgeTitle}
-        badgeDot={badgeDot}
-        loading={loading}
-        width={width}
-        fullHeight={fullHeightTrigger}
-        trigger={trigger}
-        label={label}
-        onClickTrigger={onClickTrigger}
-        colored={colored}
-        small={small}
-        isNested={isNested}
-        component={component}
-        groupOrder={groupOrder}
-        isOpen={isOpen}
-        testId={testId}
-      />
-      {isOpen &&
-        renderLayer(
-          <div
-            {...layerProps} // eslint-disable-line react/jsx-props-no-spreading
-            className={styles.layerContainer}
-            data-testid={menu.testId}
-            onClick={(evt) => evt.stopPropagation()}
-          >
-            <Layer
-              sections={sections}
-              isNested={isNested}
-              width={width}
-              closeOnOptionClick={closeOnOptionClick}
-              close={closeParent || close}
-              tree={tree}
-              path={path}
-              groupOrder={groupOrder}
-              maxHeight={maxHeight}
-              showAllButton={showAllButton}
-            />
-          </div>,
-        )}
-    </>
-  );
-};
-
-export const Menu = (props) => {
-  return props.contextMenu ? (
-    <ContextMenu
-      {...props} // eslint-disable-line react/jsx-props-no-spreading
-      tree={{}}
-      path=""
-      testId={props.testId}
-    />
-  ) : (
-    <DropDownMenu
-      {...props} // eslint-disable-line react/jsx-props-no-spreading
-      tree={{}}
-      path=""
-      testId={props.testId}
-    />
-  );
-};
-
-const menuSectionShape = PropTypes.oneOfType([
-  PropTypes.shape({
-    //Heading
-    type: PropTypes.oneOf(['Heading']),
-    label: PropTypes.string.isRequired,
-    icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    onClick: PropTypes.func,
-    testId: PropTypes.string,
-  }),
-  PropTypes.shape({
-    //Divider
-    type: PropTypes.oneOf(['Divider']),
-  }),
-  PropTypes.shape({
-    //Options
-    actions: actionsShape,
-    type: PropTypes.oneOf(['Option']),
-    label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-    icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    description: PropTypes.string,
-    onClick: PropTypes.func,
-    selected: PropTypes.bool,
-    disabled: PropTypes.bool,
-    inline: PropTypes.bool,
-    title: PropTypes.string,
-    download: PropTypes.bool,
-    onChange: PropTypes.func,
-    testId: PropTypes.string,
-  }),
-  PropTypes.shape({
-    //Sub-menu
-    type: PropTypes.oneOf(['Menu']),
-    menu: PropTypes.object,
-    testId: PropTypes.string,
-  }),
-]);
-
-const menuShape = PropTypes.shape({
-  trigger: PropTypes.oneOf(['Text', 'Button', 'DropDownButton', 'Component']),
-  colored: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  small: PropTypes.bool,
-  label: PropTypes.string,
-  component: PropTypes.node, //JSX
-  sections: PropTypes.oneOfType([
-    PropTypes.arrayOf(menuSectionShape),
-    PropTypes.node, //JSX
-  ]).isRequired,
-  placement: PropTypes.string,
-  possiblePlacements: PropTypes.arrayOf(PropTypes.string),
-  showAllButton: PropTypes.shape({
-    visible: PropTypes.bool.isRequired,
-    showAllTitle: PropTypes.string.isRequired,
-    showLessTitle: PropTypes.string.isRequired,
-    // additional sections that must be after the show all button
-    additionalSections: PropTypes.arrayOf(menuSectionShape),
-  }),
-  testId: PropTypes.string,
-});
-
-Menu.defaultProps = {
-  width: '',
-  fullHeightTrigger: false,
-  disabled: false,
-  loading: false,
-  badgeTitle: null,
-  badgeDot: false,
-  closeOnOptionClick: true,
-  groupOrder: null,
-  overflowContainer: true,
-  maxHeight: null,
-  testId: undefined,
-  open: undefined,
-  setOpen: undefined,
-};
-
-Menu.propTypes = {
-  menu: menuShape.isRequired,
-  disabled: PropTypes.bool,
-  badgeTitle: PropTypes.string,
-  badgeDot: PropTypes.bool,
-  loading: PropTypes.bool,
-  width: PropTypes.string,
-  fullHeightTrigger: PropTypes.bool,
-  closeOnOptionClick: PropTypes.bool,
-  groupOrder: PropTypes.string,
-  overflowContainer: PropTypes.bool,
-  maxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  testId: PropTypes.string,
-  open: PropTypes.bool,
-  setOpen: PropTypes.func,
-};

package/src/components/menu/menu.module.less

@@ -1,241 +0,0 @@
-@import '../../style/variables.less';
-
-.wrapper {
-  display: inline-flex;
-  max-width: 100%;
-
-  .layer & {
-    width: 100%;
-  }
-}
-
-.layerContainer {
-  z-index: @zindex_dropdown;
-}
-
-.layer {
-  border: 1px solid var(--color-border);
-  border-radius: 4px;
-  overflow: hidden;
-  margin: 2px 0;
-  background: var(--color-background-raised);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  min-width: 10em;
-  max-width: 30em;
-  position: relative;
-
-  &.nested {
-    margin: -1px 2px;
-  }
-
-  ul {
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-
-    li {
-      list-style: none;
-      display: block;
-    }
-  }
-}
-
-.fileInput {
-  width: 100%;
-  height: 100%;
-  opacity: 0;
-  position: absolute;
-}
-
-.trigger {
-  display: inline-flex;
-  align-items: center;
-  cursor: pointer;
-  overflow: hidden;
-  max-width: 100%;
-
-  .layer & {
-    width: 100%;
-  }
-}
-
-.middleAlignedInline {
-  display: flex;
-  align-items: center;
-  overflow: hidden;
-  width: 100%;
-}
-
-.heading {
-  color: var(--color-text-muted);
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-  font-size: 12px;
-  .headingIcon {
-    float: right;
-    svg {
-      color: var(--color-text-faint);
-    }
-    &:hover {
-      cursor: pointer;
-      svg {
-        color: var(--color-text-primary-hover);
-      }
-    }
-  }
-}
-
-.option {
-  color: inherit;
-  display: block;
-}
-
-.heading,
-.option,
-.layer .trigger {
-  padding: 8px 12px;
-}
-
-.option,
-.layer .trigger {
-  line-height: 20px;
-  display: flex;
-  align-items: flex-start;
-
-  &:hover,
-  &.active {
-    background-color: var(--color-background-menuitem-hover);
-    cursor: pointer;
-  }
-}
-
-.option.selected {
-  background-color: var(--color-background-menuitem-active);
-  font-weight: bold;
-}
-
-.layer .trigger {
-  align-items: center;
-}
-
-.optionContent {
-  flex-wrap: wrap;
-  margin-right: auto;
-  position: relative;
-}
-
-.inline .optionContent {
-  display: flex;
-  justify-content: space-between;
-  flex-grow: 1;
-}
-
-.icon,
-.check {
-  display: flex;
-  flex-shrink: 1;
-  width: 16px;
-  height: 20px;
-  justify-content: center;
-  align-items: center;
-}
-
-.icon {
-  margin-right: 8px;
-  color: var(--color-text-primary);
-
-  &:empty {
-    display: none;
-  }
-
-  img {
-    max-height: 16px;
-    max-width: 16px;
-    width: auto;
-    height: auto;
-  }
-}
-
-.check {
-  font-size: 12px;
-  color: #a5a7a9;
-  margin-left: 10px;
-}
-
-.text {
-  display: inline-flex;
-  align-items: center;
-  cursor: pointer;
-}
-
-.label {
-  margin-right: auto;
-}
-
-.label,
-.heading {
-  max-width: 100%;
-  display: block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.description {
-  color: #999;
-  display: block;
-}
-
-.arrow {
-  margin-left: 10px;
-  opacity: 0.4;
-}
-
-.divider {
-  border: 0;
-  border-top: 1px solid var(--color-border);
-}
-
-.deprecatedSemanticIcon {
-  color: var(--color-text-primary) !important;
-  margin: -5px 0 0 !important;
-}
-
-.disabled {
-  color: var(--color-text-faint);
-  pointer-events: none;
-  cursor: not-allowed !important;
-}
-
-.buttonLabel {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: block;
-  margin-right: auto;
-  line-height: 1.2; // Prevent descenders getting clipped
-}
-
-.buttonCaret {
-  margin-left: 5px;
-}
-
-.component {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-}
-
-.right {
-  margin-left: auto;
-  display: flex;
-  align-items: center;
-}
-
-.actions {
-  margin-left: 8px;
-  display: flex;
-  align-items: center;
-  margin-top: -2px;
-  margin-bottom: -2px;
-}