@ohos-ports/sprucelabs-react-heartwood-components 9.1.0-beta.0

package/lib/components/ContextMenu/ContextMenu.js

@@ -0,0 +1,315 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _spruceTypes = require("@sprucelabs/spruce-types");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _lodash = require("lodash");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactDom = require("react-dom");
+
+var _Button = _interopRequireWildcard(require("../Button/Button"));
+
+var _ButtonGroup = _interopRequireDefault(require("../ButtonGroup/ButtonGroup"));
+
+var MoreIcon = function MoreIcon(props) {
+  return _react["default"].createElement("svg", props, _react["default"].createElement("path", {
+    clipRule: "evenodd",
+    d: "M3.375 14.648a2.625 2.625 0 1 0 0-5.25 2.625 2.625 0 0 0 0 5.25zM20.625 14.648a2.625 2.625 0 1 0 0-5.25 2.625 2.625 0 0 0 0 5.25zM12 14.648a2.625 2.625 0 1 0 0-5.25 2.625 2.625 0 0 0 0 5.25z",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }));
+};
+
+MoreIcon.defaultProps = {
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+
+var ContextMenu =
+/*#__PURE__*/
+function (_Component) {
+  (0, _inherits2["default"])(ContextMenu, _Component);
+
+  function ContextMenu(props) {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, ContextMenu);
+    _this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(ContextMenu).call(this, props));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "ref", _react["default"].createRef());
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "menuRef", _react["default"].createRef());
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "debouncedWindowResize", (0, _lodash.debounce)(function () {
+      return _this.handleWindowResize();
+    }, 200));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
+      isVisible: false,
+      overflowBottom: false,
+      overflowLeft: false,
+      menuPosition: {
+        top: null,
+        left: null
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "componentDidMount", function () {
+      _this.getMenuPlacement();
+
+      if (typeof window !== 'undefined') {
+        window.addEventListener('resize', _this.debouncedWindowResize, false);
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "componentWillUnmount", function () {
+      if (typeof document !== 'undefined') {
+        document.removeEventListener('click', _this.handleClickOutside, false);
+        document.removeEventListener('keyup', _this.handleEscape, false);
+      }
+
+      if (typeof window !== 'undefined') {
+        window.removeEventListener('resize', _this.debouncedWindowResize, false);
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleWindowResize", function () {
+      var isVisible = _this.state.isVisible;
+
+      if (isVisible) {
+        _this.updateMenuPlacement();
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getTriggerPlacement", function () {
+      var triggerPosition = _this.ref.current && _this.ref.current.getBoundingClientRect();
+
+      if (triggerPosition && 'x' in triggerPosition) {
+        return triggerPosition;
+      }
+
+      return null;
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getMenuPlacement", function () {
+      var reactHeartwoodProps = _this.props;
+      var isRightAligned = reactHeartwoodProps.isRightAligned,
+          isBottomAligned = reactHeartwoodProps.isBottomAligned;
+
+      var triggerPosition = _this.getTriggerPlacement();
+
+      if (!triggerPosition) {
+        return;
+      }
+
+      var menuPosition = {
+        top: isBottomAligned ? triggerPosition.y : triggerPosition.y + triggerPosition.height,
+        left: isRightAligned ? triggerPosition.x + triggerPosition.width : triggerPosition.x
+      };
+
+      _this.setState({
+        menuPosition: menuPosition
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "updateMenuPlacement", function () {
+      var scrollTop = typeof document !== 'undefined' && document && document.documentElement && document.documentElement.scrollTop ? document.documentElement.scrollTop : 0;
+
+      var triggerPosition = _this.getTriggerPlacement();
+
+      var menuBox = _this.menuRef && _this.menuRef.current && _this.menuRef.current.getBoundingClientRect();
+
+      var portalBox = _this.portalEl && _this.portalEl.getBoundingClientRect();
+
+      var overflowLeft = false;
+      var overflowBottom = false;
+      var newTop = null;
+      var newLeft = null;
+
+      if (menuBox && portalBox && triggerPosition) {
+        if (triggerPosition.x + triggerPosition.width + menuBox.width > portalBox.width) {
+          newLeft = triggerPosition.x + triggerPosition.width;
+          overflowLeft = true;
+        } else {
+          newLeft = triggerPosition.x;
+        }
+
+        if (scrollTop + triggerPosition.y + triggerPosition.height + menuBox.height > scrollTop + portalBox.height) {
+          newTop = scrollTop + triggerPosition.y;
+          overflowBottom = true;
+        } else {
+          newTop = scrollTop + triggerPosition.y + triggerPosition.height;
+        }
+      }
+
+      _this.setState(function (prevState) {
+        return {
+          overflowLeft: overflowLeft,
+          overflowBottom: overflowBottom,
+          menuPosition: {
+            top: newTop || prevState.menuPosition.top,
+            left: newLeft || prevState.menuPosition.left
+          }
+        };
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleClickOutside", function () {
+      _this.setState({
+        isVisible: false
+      }, function () {
+        return _this.manageListeners();
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleEscape", function (e) {
+      if (e.key === 'Escape') {
+        _this.setState({
+          isVisible: false
+        }, function () {
+          return _this.manageListeners();
+        });
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleToggle", function () {
+      var _ref = _this.props,
+          onToggleContextMenuVisible = _ref.onToggleContextMenuVisible;
+
+      _this.setState(function (prevState) {
+        return {
+          isVisible: !prevState.isVisible
+        };
+      }, function () {
+        _this.manageListeners();
+
+        if (onToggleContextMenuVisible) {
+          onToggleContextMenuVisible(_this.state.isVisible);
+        }
+
+        if (_this.state.isVisible) {
+          _this.updateMenuPlacement();
+        }
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "manageListeners", function () {
+      if (typeof document !== 'undefined') {
+        if (_this.state.isVisible) {
+          document.addEventListener('click', _this.handleClickOutside, false);
+          document.addEventListener('keyup', _this.handleEscape, false);
+        } else {
+          document.removeEventListener('click', _this.handleClickOutside, false);
+          document.removeEventListener('keyup', _this.handleEscape, false);
+        }
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleClickAction", function (payload, callback) {
+      if (_this.props.closeOnSelectAction) {
+        _this.handleToggle();
+      }
+
+      callback && callback(payload);
+    });
+    _this.portalEl = typeof document !== 'undefined' && document && document.body ? document.body : undefined;
+    return _this;
+  }
+
+  (0, _createClass2["default"])(ContextMenu, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var reactHeartwoodProps = this.props;
+      var commonProps = this.props;
+      var _this$state = this.state,
+          isVisible = _this$state.isVisible,
+          overflowBottom = _this$state.overflowBottom,
+          overflowLeft = _this$state.overflowLeft,
+          menuPosition = _this$state.menuPosition;
+      var icon = commonProps.icon,
+          isSimple = commonProps.isSimple,
+          isSmall = commonProps.isSmall,
+          isTextOnly = commonProps.isTextOnly,
+          size = commonProps.size,
+          text = commonProps.text;
+      var actions = reactHeartwoodProps.actions,
+          className = reactHeartwoodProps.className,
+          isBottomAligned = reactHeartwoodProps.isBottomAligned,
+          isRightAligned = reactHeartwoodProps.isRightAligned,
+          onAction = reactHeartwoodProps.onAction;
+      var buttonClass = (0, _classnames["default"])('context-menu', className, {
+        'context-menu--is-visible': isVisible
+      });
+      var menuClass = (0, _classnames["default"])('context-menu__menu', {
+        'context-menu__menu-left': isRightAligned || overflowLeft,
+        'context-menu__menu-large': size === 'large',
+        'context-menu__menu-top': isBottomAligned || overflowBottom
+      });
+      return _react["default"].createElement("div", {
+        className: buttonClass,
+        ref: this.ref
+      }, _react["default"].createElement(_Button["default"], {
+        kind: isSimple ? _Button.ButtonKinds.Simple : undefined,
+        className: "context-menu__button",
+        onClick: this.handleToggle,
+        icon: !isTextOnly && (icon || {
+          customIcon: MoreIcon,
+          isLineIcon: true
+        }) || undefined,
+        text: text,
+        isSmall: isSmall
+      }), isVisible && this.portalEl && (0, _reactDom.createPortal)(_react["default"].createElement("div", {
+        className: menuClass,
+        ref: this.menuRef,
+        style: {
+          position: 'absolute',
+          top: typeof menuPosition.top === 'number' ? "".concat((menuPosition.top || 0) + 4, "px") : 'auto',
+          left: typeof menuPosition.left === 'number' ? "".concat((menuPosition.left || 0) + 4, "px") : 'auto'
+        }
+      }, _react["default"].createElement(_ButtonGroup["default"], {
+        kind: _spruceTypes.IHWButtonGroupKind.Floating,
+        actions: actions.map(function (action) {
+          var btnAction = (0, _objectSpread2["default"])({}, action);
+          var oldOnclick = btnAction.onClick;
+
+          btnAction.onClick = function () {
+            _this2.handleClickAction(btnAction.payload, oldOnclick);
+          };
+
+          btnAction.className = 'context-menu__item-btn';
+          return btnAction;
+        }),
+        onAction: onAction
+      })), this.portalEl));
+    }
+  }]);
+  return ContextMenu;
+}(_react.Component);
+
+exports["default"] = ContextMenu;
+(0, _defineProperty2["default"])(ContextMenu, "defaultProps", {
+  isRightAligned: false,
+  isBottomAligned: false,
+  isTextOnly: false,
+  isSmall: false,
+  className: ''
+});
+//# sourceMappingURL=ContextMenu.js.map

package/lib/components/ContextMenu/ContextMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ContextMenu/ContextMenu.tsx"],"names":["MoreIcon","ContextMenu","props","React","createRef","handleWindowResize","isVisible","overflowBottom","overflowLeft","menuPosition","top","left","getMenuPlacement","window","addEventListener","debouncedWindowResize","document","removeEventListener","handleClickOutside","handleEscape","state","updateMenuPlacement","triggerPosition","ref","current","getBoundingClientRect","reactHeartwoodProps","isRightAligned","isBottomAligned","getTriggerPlacement","y","height","x","width","setState","scrollTop","documentElement","menuBox","menuRef","portalBox","portalEl","newTop","newLeft","prevState","manageListeners","e","key","onToggleContextMenuVisible","payload","callback","closeOnSelectAction","handleToggle","body","undefined","commonProps","icon","isSimple","isSmall","isTextOnly","size","text","actions","className","onAction","buttonClass","menuClass","ButtonKinds","Simple","customIcon","isLineIcon","position","IHWButtonGroupKind","Floating","map","action","btnAction","oldOnclick","onClick","handleClickAction","Component"],"mappings":"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","sourcesContent":["import {\n\tIHWAction,\n\tIHWButtonGroupKind,\n\tIHWContextMenu\n} from '@sprucelabs/spruce-types'\nimport cx from 'classnames'\nimport { debounce } from 'lodash'\nimport React, { Component } from 'react'\nimport { createPortal } from 'react-dom'\nimport MoreIcon from '../../../static/assets/icons/Interface-Essential/Menu/navigation-menu-horizontal.svg'\nimport Button, { ButtonKinds, IButtonProps } from '../Button/Button'\nimport ButtonGroup from '../ButtonGroup/ButtonGroup'\nimport { IIconProps } from '../Icon/Icon'\n\nexport interface IContextMenuProps\n\textends Omit<IHWContextMenu, 'actions' | 'icon'> {\n\t/** The actions to be shown on tap/click */\n\tactions: IButtonProps[]\n\n\t/** DEPRECATED Set true to left align the menu */\n\tisLeftAligned?: boolean\n\n\t/** DEPRECATED Set true to right align the menu */\n\tisRightAligned?: boolean\n\n\t/** DEPRECATED Set true to align menu above button */\n\tisBottomAligned?: boolean\n\n\t/** Overrides the default icon */\n\ticon?: IIconProps | null\n\n\t/** Optional classname that applies to the button */\n\tclassName?: string\n\n\tonToggleContextMenuVisible?: Function\n\n\t/** optional, provide a handler for Actions */\n\tonAction?: (action: IHWAction) => any\n}\n\ninterface IContextMenuState {\n\t/** Show the menu */\n\tisVisible: boolean\n\n\t/** Where the menu should be positioned when visible */\n\tmenuPosition: {\n\t\ttop: number | null\n\t\tleft: number | null\n\t}\n\n\toverflowBottom: boolean\n\toverflowLeft: boolean\n}\n\nexport default class ContextMenu extends Component<\n\tIContextMenuProps | IHWContextMenu,\n\tIContextMenuState\n> {\n\tpublic static defaultProps = {\n\t\tisRightAligned: false,\n\t\tisBottomAligned: false,\n\t\tisTextOnly: false,\n\t\tisSmall: false,\n\t\tclassName: ''\n\t}\n\n\tpublic ref: React.RefObject<HTMLDivElement> = React.createRef()\n\tpublic menuRef: React.RefObject<HTMLDivElement> = React.createRef()\n\tpublic portalEl?: HTMLElement\n\n\tpublic debouncedWindowResize = debounce(() => this.handleWindowResize(), 200)\n\tpublic state = {\n\t\tisVisible: false,\n\t\toverflowBottom: false,\n\t\toverflowLeft: false,\n\t\tmenuPosition: {\n\t\t\ttop: null,\n\t\t\tleft: null\n\t\t}\n\t}\n\n\tpublic constructor(props: IContextMenuProps) {\n\t\tsuper(props)\n\n\t\tthis.portalEl =\n\t\t\ttypeof document !== 'undefined' && document && document.body\n\t\t\t\t? document.body\n\t\t\t\t: undefined\n\t}\n\n\tpublic componentDidMount = () => {\n\t\tthis.getMenuPlacement()\n\t\tif (typeof window !== 'undefined') {\n\t\t\twindow.addEventListener('resize', this.debouncedWindowResize, false)\n\t\t}\n\t}\n\n\tpublic componentWillUnmount = () => {\n\t\tif (typeof document !== 'undefined') {\n\t\t\tdocument.removeEventListener('click', this.handleClickOutside, false)\n\t\t\tdocument.removeEventListener('keyup', this.handleEscape, false)\n\t\t}\n\t\tif (typeof window !== 'undefined') {\n\t\t\twindow.removeEventListener('resize', this.debouncedWindowResize, false)\n\t\t}\n\t}\n\n\tpublic handleWindowResize = () => {\n\t\tconst { isVisible } = this.state\n\t\tif (isVisible) {\n\t\t\tthis.updateMenuPlacement()\n\t\t}\n\t}\n\n\tpublic getTriggerPlacement = (): DOMRect | null => {\n\t\tconst triggerPosition =\n\t\t\tthis.ref.current && this.ref.current.getBoundingClientRect()\n\n\t\tif (triggerPosition && 'x' in triggerPosition) {\n\t\t\treturn triggerPosition\n\t\t}\n\n\t\treturn null\n\t}\n\n\tpublic getMenuPlacement = () => {\n\t\tconst reactHeartwoodProps = this.props as IContextMenuProps\n\t\tconst { isRightAligned, isBottomAligned } = reactHeartwoodProps\n\n\t\tconst triggerPosition = this.getTriggerPlacement()\n\n\t\tif (!triggerPosition) {\n\t\t\treturn\n\t\t}\n\t\tconst menuPosition = {\n\t\t\ttop: isBottomAligned\n\t\t\t\t? triggerPosition.y\n\t\t\t\t: triggerPosition.y + triggerPosition.height,\n\t\t\tleft: isRightAligned\n\t\t\t\t? triggerPosition.x + triggerPosition.width\n\t\t\t\t: triggerPosition.x\n\t\t}\n\n\t\tthis.setState({\n\t\t\tmenuPosition\n\t\t})\n\t}\n\n\tpublic updateMenuPlacement = () => {\n\t\tconst scrollTop =\n\t\t\ttypeof document !== 'undefined' &&\n\t\t\tdocument &&\n\t\t\tdocument.documentElement &&\n\t\t\tdocument.documentElement.scrollTop\n\t\t\t\t? document.documentElement.scrollTop\n\t\t\t\t: 0\n\t\tconst triggerPosition = this.getTriggerPlacement()\n\t\tconst menuBox =\n\t\t\tthis.menuRef &&\n\t\t\tthis.menuRef.current &&\n\t\t\tthis.menuRef.current.getBoundingClientRect()\n\t\tconst portalBox = this.portalEl && this.portalEl.getBoundingClientRect()\n\t\tlet overflowLeft = false\n\t\tlet overflowBottom = false\n\t\tlet newTop: number | null = null\n\t\tlet newLeft: number | null = null\n\n\t\tif (menuBox && portalBox && triggerPosition) {\n\t\t\tif (\n\t\t\t\ttriggerPosition.x + triggerPosition.width + menuBox.width >\n\t\t\t\tportalBox.width\n\t\t\t) {\n\t\t\t\tnewLeft = triggerPosition.x + triggerPosition.width\n\t\t\t\toverflowLeft = true\n\t\t\t} else {\n\t\t\t\tnewLeft = triggerPosition.x\n\t\t\t}\n\n\t\t\tif (\n\t\t\t\tscrollTop +\n\t\t\t\t\ttriggerPosition.y +\n\t\t\t\t\ttriggerPosition.height +\n\t\t\t\t\tmenuBox.height >\n\t\t\t\tscrollTop + portalBox.height\n\t\t\t) {\n\t\t\t\tnewTop = scrollTop + triggerPosition.y\n\t\t\t\toverflowBottom = true\n\t\t\t} else {\n\t\t\t\tnewTop = scrollTop + triggerPosition.y + triggerPosition.height\n\t\t\t}\n\t\t}\n\n\t\tthis.setState(prevState => ({\n\t\t\toverflowLeft,\n\t\t\toverflowBottom,\n\t\t\tmenuPosition: {\n\t\t\t\ttop: newTop || prevState.menuPosition.top,\n\t\t\t\tleft: newLeft || prevState.menuPosition.left\n\t\t\t}\n\t\t}))\n\t}\n\n\tpublic handleClickOutside = (): void => {\n\t\tthis.setState(\n\t\t\t{\n\t\t\t\tisVisible: false\n\t\t\t},\n\t\t\t() => this.manageListeners()\n\t\t)\n\t}\n\n\tpublic handleEscape = (e: any): void => {\n\t\tif (e.key === 'Escape') {\n\t\t\tthis.setState(\n\t\t\t\t{\n\t\t\t\t\tisVisible: false\n\t\t\t\t},\n\t\t\t\t() => this.manageListeners()\n\t\t\t)\n\t\t}\n\t}\n\n\tpublic handleToggle = (): void => {\n\t\tconst { onToggleContextMenuVisible } = this.props as IContextMenuProps\n\n\t\tthis.setState(\n\t\t\tprevState => ({\n\t\t\t\tisVisible: !prevState.isVisible\n\t\t\t}),\n\t\t\t() => {\n\t\t\t\tthis.manageListeners()\n\n\t\t\t\tif (onToggleContextMenuVisible) {\n\t\t\t\t\tonToggleContextMenuVisible(this.state.isVisible)\n\t\t\t\t}\n\n\t\t\t\tif (this.state.isVisible) {\n\t\t\t\t\tthis.updateMenuPlacement()\n\t\t\t\t}\n\t\t\t}\n\t\t)\n\t}\n\n\tpublic manageListeners = () => {\n\t\tif (typeof document !== 'undefined') {\n\t\t\tif (this.state.isVisible) {\n\t\t\t\tdocument.addEventListener('click', this.handleClickOutside, false)\n\t\t\t\tdocument.addEventListener('keyup', this.handleEscape, false)\n\t\t\t} else {\n\t\t\t\tdocument.removeEventListener('click', this.handleClickOutside, false)\n\t\t\t\tdocument.removeEventListener('keyup', this.handleEscape, false)\n\t\t\t}\n\t\t}\n\t}\n\n\tpublic handleClickAction = (payload, callback) => {\n\t\tif (this.props.closeOnSelectAction) {\n\t\t\tthis.handleToggle()\n\t\t}\n\t\tcallback && callback(payload)\n\t}\n\n\tpublic render(): React.ReactElement {\n\t\tconst reactHeartwoodProps = this.props as IContextMenuProps\n\t\tconst commonProps = this.props as IHWContextMenu\n\n\t\tconst { isVisible, overflowBottom, overflowLeft, menuPosition } = this.state\n\t\tconst { icon, isSimple, isSmall, isTextOnly, size, text } = commonProps\n\n\t\tconst {\n\t\t\tactions,\n\t\t\tclassName,\n\t\t\tisBottomAligned,\n\t\t\tisRightAligned,\n\t\t\tonAction\n\t\t} = reactHeartwoodProps\n\n\t\tconst buttonClass = cx('context-menu', className, {\n\t\t\t'context-menu--is-visible': isVisible\n\t\t})\n\t\tconst menuClass = cx('context-menu__menu', {\n\t\t\t'context-menu__menu-left': isRightAligned || overflowLeft,\n\t\t\t'context-menu__menu-large': size === 'large',\n\t\t\t'context-menu__menu-top': isBottomAligned || overflowBottom\n\t\t})\n\n\t\treturn (\n\t\t\t<div className={buttonClass} ref={this.ref}>\n\t\t\t\t<Button\n\t\t\t\t\tkind={isSimple ? ButtonKinds.Simple : undefined}\n\t\t\t\t\tclassName=\"context-menu__button\"\n\t\t\t\t\tonClick={this.handleToggle}\n\t\t\t\t\ticon={\n\t\t\t\t\t\t(!isTextOnly &&\n\t\t\t\t\t\t\t(icon || { customIcon: MoreIcon, isLineIcon: true })) ||\n\t\t\t\t\t\tundefined\n\t\t\t\t\t}\n\t\t\t\t\ttext={text}\n\t\t\t\t\tisSmall={isSmall}\n\t\t\t\t/>\n\t\t\t\t{isVisible &&\n\t\t\t\t\tthis.portalEl &&\n\t\t\t\t\tcreatePortal(\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName={menuClass}\n\t\t\t\t\t\t\tref={this.menuRef}\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\t\t\ttop:\n\t\t\t\t\t\t\t\t\ttypeof menuPosition.top === 'number'\n\t\t\t\t\t\t\t\t\t\t? `${(menuPosition.top || 0) + 4}px`\n\t\t\t\t\t\t\t\t\t\t: 'auto',\n\t\t\t\t\t\t\t\tleft:\n\t\t\t\t\t\t\t\t\ttypeof menuPosition.left === 'number'\n\t\t\t\t\t\t\t\t\t\t? `${(menuPosition.left || 0) + 4}px`\n\t\t\t\t\t\t\t\t\t\t: 'auto'\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<ButtonGroup\n\t\t\t\t\t\t\t\tkind={IHWButtonGroupKind.Floating}\n\t\t\t\t\t\t\t\tactions={actions.map(action => {\n\t\t\t\t\t\t\t\t\tconst btnAction = { ...action }\n\t\t\t\t\t\t\t\t\tconst oldOnclick = btnAction.onClick\n\t\t\t\t\t\t\t\t\tbtnAction.onClick = () => {\n\t\t\t\t\t\t\t\t\t\tthis.handleClickAction(btnAction.payload, oldOnclick)\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tbtnAction.className = 'context-menu__item-btn'\n\t\t\t\t\t\t\t\t\treturn btnAction\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\tonAction={onAction}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>,\n\t\t\t\t\t\tthis.portalEl\n\t\t\t\t\t)}\n\t\t\t</div>\n\t\t)\n\t}\n}\n"],"file":"ContextMenu.js"}

package/lib/components/Core/components/FeedBuilder/FeedBuilder-story.js

@@ -0,0 +1,101 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf3 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _react2 = require("@storybook/react");
+
+var _FeedBuilder = _interopRequireDefault(require("./FeedBuilder"));
+
+var _StylesProvider = _interopRequireDefault(require("../../../../../.storybook/StylesProvider"));
+
+var _feed = require("../../../../../.storybook/data/feed");
+
+var ProvideStyles = function ProvideStyles(storyFn) {
+  return _react["default"].createElement(_StylesProvider["default"], null, storyFn());
+};
+
+var stories = (0, _react2.storiesOf)('Feed Builder', module);
+stories.addDecorator(ProvideStyles);
+
+var FeedBuilderExample =
+/*#__PURE__*/
+function (_Component) {
+  (0, _inherits2["default"])(FeedBuilderExample, _Component);
+
+  function FeedBuilderExample() {
+    var _getPrototypeOf2;
+
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, FeedBuilderExample);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = (0, _possibleConstructorReturn2["default"])(this, (_getPrototypeOf2 = (0, _getPrototypeOf3["default"])(FeedBuilderExample)).call.apply(_getPrototypeOf2, [this].concat(args)));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
+      messages: (0, _feed.generateMessages)({
+        count: 50,
+        interval: 31
+      })
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onRowsRequested", function () {
+      _this.setState(function (prevState) {
+        var lastMessageDate = prevState.messages[prevState.messages.length - 1].dateSent;
+        var lastMessageIndex = prevState.messages.length;
+        var newMessages = (0, _feed.generateMessages)({
+          count: 50,
+          interval: 31,
+          startDate: lastMessageDate,
+          startIndex: lastMessageIndex
+        });
+        return {
+          messages: prevState.messages.length < 500 ? (0, _toConsumableArray2["default"])(prevState.messages).concat(newMessages) : prevState.messages
+        };
+      });
+    });
+    return _this;
+  }
+
+  (0, _createClass2["default"])(FeedBuilderExample, [{
+    key: "render",
+    value: function render() {
+      var messages = this.state.messages;
+      return _react["default"].createElement(_FeedBuilder["default"], {
+        messages: messages,
+        messageCount: 500,
+        onRowsRequested: this.onRowsRequested,
+        pageSize: 50
+      });
+    }
+  }]);
+  return FeedBuilderExample;
+}(_react.Component);
+
+stories.add('Basic', function () {
+  return _react["default"].createElement(FeedBuilderExample, {
+    STORYBOOKdoNotWrap: true
+  });
+});
+//# sourceMappingURL=FeedBuilder-story.js.map

package/lib/components/Core/components/FeedBuilder/FeedBuilder-story.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Core/components/FeedBuilder/FeedBuilder-story.js"],"names":["ProvideStyles","storyFn","stories","module","addDecorator","FeedBuilderExample","messages","count","interval","setState","prevState","lastMessageDate","length","dateSent","lastMessageIndex","newMessages","startDate","startIndex","concat","state","onRowsRequested","Component","add"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA,IAAMA,aAAa,GAAG,SAAhBA,aAAgB,CAAAC,OAAO;AAAA,SAAI,gCAAC,0BAAD,QAAiBA,OAAO,EAAxB,CAAJ;AAAA,CAA7B;;AAEA,IAAMC,OAAO,GAAG,uBAAU,cAAV,EAA0BC,MAA1B,CAAhB;AAEAD,OAAO,CAACE,YAAR,CAAqBJ,aAArB;;IAOMK,kB;;;;;;;;;;;;;;;;;8FACG;AACPC,MAAAA,QAAQ,EAAE,4BAAiB;AAAEC,QAAAA,KAAK,EAAE,EAAT;AAAaC,QAAAA,QAAQ,EAAE;AAAvB,OAAjB;AADH,K;wGAIU,YAAM;AACvB,YAAKC,QAAL,CAAc,UAAAC,SAAS,EAAI;AAC1B,YAAMC,eAAe,GACpBD,SAAS,CAACJ,QAAV,CAAmBI,SAAS,CAACJ,QAAV,CAAmBM,MAAnB,GAA4B,CAA/C,EAAkDC,QADnD;AAEA,YAAMC,gBAAgB,GAAGJ,SAAS,CAACJ,QAAV,CAAmBM,MAA5C;AACA,YAAMG,WAAW,GAAG,4BAAiB;AACpCR,UAAAA,KAAK,EAAE,EAD6B;AAEpCC,UAAAA,QAAQ,EAAE,EAF0B;AAGpCQ,UAAAA,SAAS,EAAEL,eAHyB;AAIpCM,UAAAA,UAAU,EAAEH;AAJwB,SAAjB,CAApB;AAMA,eAAO;AACNR,UAAAA,QAAQ,EACPI,SAAS,CAACJ,QAAV,CAAmBM,MAAnB,GAA4B,GAA5B,GACG,oCAAIF,SAAS,CAACJ,QAAd,EAAwBY,MAAxB,CAA+BH,WAA/B,CADH,GAEGL,SAAS,CAACJ;AAJR,SAAP;AAMA,OAhBD;AAiBA,K;;;;;;6BAEQ;AAAA,UACAA,QADA,GACa,KAAKa,KADlB,CACAb,QADA;AAER,aACC,gCAAC,uBAAD;AACC,QAAA,QAAQ,EAAEA,QADX;AAEC,QAAA,YAAY,EAAE,GAFf;AAGC,QAAA,eAAe,EAAE,KAAKc,eAHvB;AAIC,QAAA,QAAQ,EAAE;AAJX,QADD;AAQA;;;EAnC+BC,gB;;AAsCjCnB,OAAO,CAACoB,GAAR,CAAY,OAAZ,EAAqB;AAAA,SAAM,gCAAC,kBAAD;AAAoB,IAAA,kBAAkB;AAAtC,IAAN;AAAA,CAArB","sourcesContent":["// @flow\nimport React, { Component } from 'react'\nimport { storiesOf } from '@storybook/react'\nimport FeedBuilder from './FeedBuilder'\nimport StylesProvider from '../../../../../.storybook/StylesProvider'\nimport { generateMessages } from '../../../../../.storybook/data/feed'\n\nconst ProvideStyles = storyFn => <StylesProvider>{storyFn()}</StylesProvider>\n\nconst stories = storiesOf('Feed Builder', module)\n\nstories.addDecorator(ProvideStyles)\n\ntype Props = {}\ntype State = {\n\tmessages: Array<Object>\n}\n\nclass FeedBuilderExample extends Component<Props, State> {\n\tstate = {\n\t\tmessages: generateMessages({ count: 50, interval: 31 })\n\t}\n\n\tonRowsRequested = () => {\n\t\tthis.setState(prevState => {\n\t\t\tconst lastMessageDate =\n\t\t\t\tprevState.messages[prevState.messages.length - 1].dateSent\n\t\t\tconst lastMessageIndex = prevState.messages.length\n\t\t\tconst newMessages = generateMessages({\n\t\t\t\tcount: 50,\n\t\t\t\tinterval: 31,\n\t\t\t\tstartDate: lastMessageDate,\n\t\t\t\tstartIndex: lastMessageIndex\n\t\t\t})\n\t\t\treturn {\n\t\t\t\tmessages:\n\t\t\t\t\tprevState.messages.length < 500\n\t\t\t\t\t\t? [...prevState.messages].concat(newMessages)\n\t\t\t\t\t\t: prevState.messages\n\t\t\t}\n\t\t})\n\t}\n\n\trender() {\n\t\tconst { messages } = this.state\n\t\treturn (\n\t\t\t<FeedBuilder\n\t\t\t\tmessages={messages}\n\t\t\t\tmessageCount={500}\n\t\t\t\tonRowsRequested={this.onRowsRequested}\n\t\t\t\tpageSize={50}\n\t\t\t/>\n\t\t)\n\t}\n}\n\nstories.add('Basic', () => <FeedBuilderExample STORYBOOKdoNotWrap />)\n"],"file":"FeedBuilder-story.js"}