@laerdal/life-react-components 1.4.1-dev.7.full → 1.4.1-dev.9.full

package/dist/Dropdown/DropdownButton.js

@@ -0,0 +1,151 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+
+var _templateObject;
+
+/**
+ * Import React libraries.
+ */
+import * as React from 'react';
+/**
+ * Import custom components.
+ */
+
+import { IconButton } from '../Button';
+import DropdownContent from './DropdownContent';
+import styled from 'styled-components';
+/**
+ * Import custom types.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  display: inline-block;\n"])));
+
+var DropdownButton = function DropdownButton(_ref) {
+  var items = _ref.items,
+      icon = _ref.icon,
+      disabled = _ref.disabled,
+      onClick = _ref.onClick,
+      _ref$itemsType = _ref.itemsType,
+      itemsType = _ref$itemsType === void 0 ? 'normal' : _ref$itemsType,
+      action = _ref.action,
+      _ref$actionLabel = _ref.actionLabel,
+      actionLabel = _ref$actionLabel === void 0 ? '' : _ref$actionLabel,
+      actionVariant = _ref.actionVariant,
+      actionIcon = _ref.actionIcon,
+      actionLoading = _ref.actionLoading,
+      width = _ref.width,
+      size = _ref.size,
+      alignLeft = _ref.alignLeft,
+      _ref$multiSelect = _ref.multiSelect,
+      multiSelect = _ref$multiSelect === void 0 ? false : _ref$multiSelect,
+      _ref$scrollable = _ref.scrollable,
+      scrollable = _ref$scrollable === void 0 ? false : _ref$scrollable,
+      _ref$pinTopItem = _ref.pinTopItem,
+      pinTopItem = _ref$pinTopItem === void 0 ? false : _ref$pinTopItem,
+      maxHeight = _ref.maxHeight,
+      className = _ref.className;
+
+  // Globally used variables within the view.
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      dropdownOpen = _React$useState2[0],
+      setDropdownOpen = _React$useState2[1];
+
+  var _React$useState3 = React.useState([]),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      selectedValues = _React$useState4[0],
+      setSelectedValues = _React$useState4[1];
+
+  var _React$useState5 = React.useState(null),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      focused = _React$useState6[0],
+      setFocused = _React$useState6[1];
+
+  var buttonRef = React.useRef(null);
+
+  var handleValueSelect = function handleValueSelect(values) {
+    // Do all required actions
+    onClick(values);
+  };
+
+  var handleKeyDown = function handleKeyDown(e) {
+    if (buttonRef !== null && buttonRef !== void 0 && buttonRef.current && buttonRef.current.contains(e.target)) {
+      if (e.keyCode === 13 || e.keyCode === 40 || e.keyCode === 32) {
+        if (!dropdownOpen) setFocused(0);
+
+        if (e.keyCode != 40) {
+          e.preventDefault();
+          buttonRef === null || buttonRef === void 0 ? void 0 : buttonRef.current.click();
+        }
+      }
+    }
+  };
+
+  React.useEffect(function () {
+    document.addEventListener('keydown', handleKeyDown);
+    return function () {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  });
+  /**
+   * Renders Icon Button dropdown menu.
+   * @returns HTML View for the Icon button dropdown menu.
+   */
+
+  var renderIconButton = function renderIconButton() {
+    return /*#__PURE__*/_jsx(IconButton, {
+      ref: buttonRef,
+      variant: "secondary",
+      shape: "circular",
+      action: function action(event) {
+        if (!event) {
+          //if no event details passed, then this means that user pressed 'enter'
+          if (!dropdownOpen) setFocused(0);
+        }
+
+        setDropdownOpen(!dropdownOpen);
+      },
+      disabled: disabled,
+      children: icon
+    });
+  };
+
+  return /*#__PURE__*/_jsxs(Wrapper, {
+    className: className,
+    children: [renderIconButton(), /*#__PURE__*/_jsx(DropdownContent, {
+      customizationProps: {
+        itemsType: itemsType,
+        action: action !== null && action !== void 0 ? action : function () {},
+        actionLabel: actionLabel,
+        actionVariant: actionVariant,
+        onValueUpdate: handleValueSelect,
+        multiSelect: multiSelect,
+        actionIcon: actionIcon,
+        actionLoading: actionLoading,
+        scrollable: scrollable,
+        pinTopItem: pinTopItem,
+        maxHeight: maxHeight,
+        items: items
+      },
+      focused: focused,
+      setFocused: setFocused,
+      size: size,
+      width: width,
+      alignLeft: alignLeft,
+      isOpen: dropdownOpen,
+      setIsOpen: setDropdownOpen,
+      hideOnClickOutside: true,
+      filter: "",
+      selectedValues: itemsType == 'normal' ? [] : selectedValues,
+      setSelectedValues: setSelectedValues,
+      messageOnNoResults: "No results",
+      isButton: true,
+      id: "dropdown-content"
+    })]
+  });
+};
+
+export default DropdownButton;
+//# sourceMappingURL=DropdownButton.js.map

package/dist/Dropdown/DropdownButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Dropdown/DropdownButton.tsx"],"names":["React","IconButton","DropdownContent","styled","Wrapper","div","DropdownButton","items","icon","disabled","onClick","itemsType","action","actionLabel","actionVariant","actionIcon","actionLoading","width","size","alignLeft","multiSelect","scrollable","pinTopItem","maxHeight","className","useState","dropdownOpen","setDropdownOpen","selectedValues","setSelectedValues","focused","setFocused","buttonRef","useRef","handleValueSelect","values","handleKeyDown","e","current","contains","target","keyCode","preventDefault","click","useEffect","document","addEventListener","removeEventListener","renderIconButton","event","onValueUpdate"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport { IconButton } from '../Button';\nimport DropdownContent from './DropdownContent';\nimport styled from 'styled-components';\n\n/**\n * Import custom types.\n */\nimport { DropdownButtonProps } from './DropdownButtonTypes';\n\nconst Wrapper = styled.div`\n  position: relative;\n  display: inline-block;\n`;\n\nconst DropdownButton = ({ \n  items, \n  icon, \n  disabled,\n  onClick,\n  itemsType = 'normal',\n  action,\n  actionLabel = '',\n  actionVariant,\n  actionIcon,\n  actionLoading,\n  width,\n  size,\n  alignLeft,\n  multiSelect = false,\n  scrollable = false,\n  pinTopItem = false,\n  maxHeight,\n  className }: DropdownButtonProps) => {\n  // Globally used variables within the view.\n  const [dropdownOpen, setDropdownOpen] = React.useState<boolean>(false);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const buttonRef = React.useRef<HTMLButtonElement>(null);\n\n  const handleValueSelect = (values: string[]) => {\n    // Do all required actions\n    onClick(values);\n  };\n\n  \n  const handleKeyDown = (e: any) => {\n    if (buttonRef?.current && buttonRef.current.contains(e.target)) {\n      if (e.keyCode === 13 || e.keyCode === 40 || e.keyCode === 32) {\n        if(!dropdownOpen)\n          setFocused(0);\n          \n        if(e.keyCode != 40)\n        {\n          e.preventDefault();\n          buttonRef?.current.click();\n        }\n      }\n    }\n  };\n\n  React.useEffect(() => {\n    document.addEventListener('keydown', handleKeyDown);\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);      \n    };\n  });\n\n  /**\n   * Renders Icon Button dropdown menu.\n   * @returns HTML View for the Icon button dropdown menu.\n   */\n  const renderIconButton = () => {\n    return (\n      <IconButton ref={buttonRef}  variant=\"secondary\" shape=\"circular\" action={(event: any) => \n      {\n        if(!event) { //if no event details passed, then this means that user pressed 'enter'\n          if(!dropdownOpen)\n            setFocused(0);\n        }\n        setDropdownOpen(!dropdownOpen);\n      }} disabled={disabled}>\n        {icon}\n      </IconButton>\n    );\n  };\n\n  return (\n    <Wrapper className={className}>\n      {renderIconButton()}\n      <DropdownContent\n        customizationProps={{\n          itemsType: itemsType,\n          action: action ?? (() => {}),\n          actionLabel: actionLabel,\n          actionVariant: actionVariant,\n          onValueUpdate: handleValueSelect,\n          multiSelect: multiSelect,\n          actionIcon: actionIcon,\n          actionLoading: actionLoading,\n          scrollable: scrollable,\n          pinTopItem: pinTopItem,\n          maxHeight: maxHeight,\n          items: items\n        }}\n        focused={focused}\n        setFocused={setFocused}\n        size={size}\n        width={width}\n        alignLeft={alignLeft}\n        isOpen={dropdownOpen}\n        setIsOpen={setDropdownOpen}\n        hideOnClickOutside={true}\n        filter=''\n        selectedValues={itemsType == 'normal' ? [] : selectedValues}\n        setSelectedValues={setSelectedValues}\n        messageOnNoResults='No results'\n        isButton={true}\n        id='dropdown-content'\n      />\n    </Wrapper>\n  );\n};\n\nexport default DropdownButton;\n"],"file":"DropdownButton.js"}

package/dist/Dropdown/DropdownContent.d.ts

@@ -0,0 +1,55 @@
+import React from 'react';
+import { Size } from '../types';
+export declare const DDContainer: import("styled-components").StyledComponent<"div", any, {
+    isButton: boolean;
+    width?: string | undefined;
+    alignLeft?: boolean | undefined;
+    size?: Size | undefined;
+    scrollable?: boolean | undefined;
+    maxHeight?: string | undefined;
+}, never>;
+export interface DropdownItem {
+    value: string;
+    displayLabel?: string;
+    noteLabel?: string;
+    suggestion?: boolean;
+    showDividerAbove?: boolean;
+    disabled?: boolean;
+    icon?: React.ReactNode;
+    customContent?: React.ReactNode;
+}
+export interface DropdownCustomizationProps {
+    itemsType?: 'radio' | 'checkbox' | 'normal';
+    menuContent?: React.ReactNode;
+    scrollable?: boolean;
+    multiSelect?: boolean;
+    maxHeight?: string;
+    actionLabel?: string;
+    actionVariant?: 'primary' | 'secondary' | 'tertiary' | undefined;
+    actionIcon?: React.ReactNode;
+    actionLoading?: boolean;
+    actionDisabled?: boolean;
+    action: () => boolean | void | undefined;
+    pinTopItem?: boolean;
+    onValueUpdate: (values: string[]) => boolean | void | undefined;
+    items: DropdownItem[];
+}
+export interface DropdownProps {
+    isButton: boolean;
+    customizationProps: DropdownCustomizationProps;
+    alignLeft?: boolean;
+    isOpen: boolean;
+    setIsOpen: (open: boolean) => void;
+    size?: Size;
+    id: string;
+    filter: string;
+    width?: string;
+    hideOnClickOutside: boolean;
+    selectedValues: string[];
+    setSelectedValues: (val: string[]) => void;
+    messageOnNoResults: string;
+    focused: number | null;
+    setFocused: (focused: number | null) => void;
+}
+declare const DropdownContent: React.FunctionComponent<DropdownProps>;
+export default DropdownContent;