@oliasoft-open-source/react-ui-library 1.0.0

package/src/components/menu/menu.jsx

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

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