carbon-addons-iot-react 2.151.0-next.2 → 2.151.0-next.5

package/es/components/TimePicker/ListSpinner.js

@@ -0,0 +1,537 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import 'core-js/modules/es.array.splice.js';
+import 'core-js/modules/es.array.find-index.js';
+import 'core-js/modules/web.dom-collections.for-each.js';
+import 'core-js/modules/es.array.map.js';
+import 'core-js/modules/es.array.concat.js';
+import React__default, { useRef, useState, useEffect, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { ChevronUp16, ChevronDown16 } from '@carbon/icons-react';
+import classnames from 'classnames';
+import { settings } from '../../constants/Settings.js';
+import useMerged from '../../hooks/useMerged.js';
+import Button from '../Button/Button.js';
+
+var iotPrefix = settings.iotPrefix;
+var propTypes = {
+  className: PropTypes.string,
+  testId: PropTypes.string,
+  i18n: PropTypes.shape({
+    previous: PropTypes.string,
+    next: PropTypes.string
+  }),
+
+  /** Optional default selected item */
+  defaultSelectedId: PropTypes.string,
+
+  /** Optional handler that is called whenever value is updated */
+  onChange: PropTypes.func,
+
+  /** Optional handler that is called whenever item is clicked */
+  onClick: PropTypes.func,
+
+  /** Array of items to render in the spinning list */
+  list: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string,
+    value: PropTypes.string
+  })),
+
+  /** Optional tag name to use instead of ul */
+  containerElement: PropTypes.string
+}; // istanbul ignore next
+
+var defaultProps = {
+  className: undefined,
+  testId: 'list-spinner',
+  i18n: {
+    previous: 'Previous item',
+    next: 'Next item'
+  },
+  defaultSelectedId: undefined,
+  onChange: function onChange() {},
+  onClick: function onClick() {},
+  list: [],
+  containerElement: 'ul'
+};
+/**
+ *
+ * @param {*} arr - the array to opperate on
+ * @param {*} index - the index of the item to move
+ * @returns array - new array with the chosen index as 3 item in array
+ */
+
+function moveToSecondIndex(arr, index) {
+  var newArr = _toConsumableArray(arr);
+
+  var removed;
+
+  if (index > 2) {
+    // 6 - 2
+    removed = newArr.splice(0, index - 2);
+    newArr.push.apply(newArr, _toConsumableArray(removed));
+  }
+
+  if (index < 2) {
+    var amnt = 2 - index; // 6 - 2
+
+    removed = newArr.splice(-amnt, amnt);
+    newArr.unshift.apply(newArr, _toConsumableArray(removed));
+  }
+
+  return newArr;
+}
+var ListSpinner = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+      testId = _ref.testId,
+      i18n = _ref.i18n,
+      defaultSelectedId = _ref.defaultSelectedId,
+      onChange = _ref.onChange,
+      onClick = _ref.onClick,
+      list = _ref.list,
+      ContainerElement = _ref.containerElement;
+  var containerRef = useRef();
+  var contentRef = useRef();
+  var touch = useRef(false);
+  var ticking = useRef(false);
+  var scrollEvent = useRef(false);
+  var scrollPosition = useRef();
+  var timer = useRef();
+
+  var _useState = useState(list),
+      _useState2 = _slicedToArray(_useState, 2),
+      listItems = _useState2[0],
+      setListItems = _useState2[1];
+
+  var _useState3 = useState(defaultSelectedId),
+      _useState4 = _slicedToArray(_useState3, 2),
+      selectedId = _useState4[0],
+      setSelectedId = _useState4[1];
+
+  var _useMerged = useMerged(defaultProps.i18n, i18n),
+      previous = _useMerged.previous,
+      next = _useMerged.next;
+
+  useEffect(function () {
+    setSelectedId(defaultSelectedId);
+  }, [defaultSelectedId]);
+  useEffect(function () {
+    var index = list.findIndex(function (i) {
+      return i.id === selectedId;
+    });
+    var newList = moveToSecondIndex(list, index);
+    setListItems(newList);
+    onChange(selectedId);
+    /* eslint-disable-next-line react-hooks/exhaustive-deps */
+  }, [onChange, selectedId]);
+  var observerRef = React__default.useRef();
+  useEffect(function () {
+    var _window;
+
+    // Create a new observer
+    if ((_window = window) !== null && _window !== void 0 && _window.IntersectionObserver) {
+      observerRef.current = new IntersectionObserver(function (entries) {
+        entries.forEach(function (entry) {
+          if (entry.isIntersecting && scrollEvent.current) {
+            clearTimeout(timer.current);
+            timer.current = setTimeout(setSelectedId(entry.target.childNodes[0].id), 800);
+          }
+        });
+      }, {
+        root: containerRef.current,
+        rootMargin: '-50% 0% -50% 0%',
+        threshold: 0
+      });
+    }
+
+    return function () {
+      var _observerRef$current;
+
+      return (_observerRef$current = observerRef.current) === null || _observerRef$current === void 0 ? void 0 : _observerRef$current.disconnect();
+    };
+  }, []);
+
+  var handleWheel = function handleWheel(e) {
+    e.persist();
+    scrollEvent.current = true;
+
+    if (!ticking.current) {
+      /* eslint-disable func-names */
+      setTimeout(function () {
+        return setTimeout(function () {
+          if (e.deltaY < 0) {
+            setSelectedId(function (prev) {
+              var prevIndex = list.findIndex(function (i) {
+                return i.id === prev;
+              });
+              var val = prevIndex > 0 ? list[prevIndex - 1].id : list[list.length - 1].id;
+              setTimeout(function () {
+                return onClick(val);
+              });
+              return val;
+            });
+          } else {
+            setSelectedId(function (prev) {
+              var prevIndex = list.findIndex(function (i) {
+                return i.id === prev;
+              });
+              var val = prevIndex === list.indexOf(list[list.length - 1]) ? list[0].id : list[prevIndex + 1].id;
+              setTimeout(function () {
+                return onClick(val);
+              });
+              return val;
+            });
+          }
+
+          ticking.current = false;
+        });
+      }, 100);
+      ticking.current = true;
+    }
+  };
+
+  var handleTouchMove = function handleTouchMove(e) {
+    e.persist();
+    scrollEvent.current = true;
+    /* istanbul ignore else */
+
+    if (!ticking.current) {
+      /* eslint-disable func-names */
+      setTimeout(function () {
+        setTimeout(function () {
+          if (scrollPosition.current - e.touches[0].pageY < 0) {
+            setSelectedId(function (prev) {
+              var prevIndex = list.findIndex(function (i) {
+                return i.id === prev;
+              });
+              var val = prevIndex > 0 ? list[prevIndex - 1].id : list[list.length - 1].id;
+              setTimeout(function () {
+                return onClick(val);
+              });
+              return val;
+            });
+          } else {
+            setSelectedId(function (prev) {
+              var prevIndex = list.findIndex(function (i) {
+                return i.id === prev;
+              });
+              var val = prevIndex === list.indexOf(list[list.length - 1]) ? list[0].id : list[prevIndex + 1].id;
+              setTimeout(function () {
+                return onClick(val);
+              });
+              return val;
+            });
+          }
+
+          scrollPosition.current = e.touches[0].pageY;
+          ticking.current = false;
+          touch.current = false;
+        });
+      }, 100);
+      ticking.current = true;
+    }
+  };
+
+  var handleTouchStart = function handleTouchStart(e) {
+    e.persist();
+    scrollPosition.current = e.touches[0].pageY;
+    touch.current = true;
+  }; // eslint-disable-next-line consistent-return
+
+
+  var handleKeyPress = function handleKeyPress(e) {
+    e.persist(); // istanbul ignore else
+
+    if (e.target.id.length === 2) {
+      // istanbul ignore else
+      if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        setSelectedId(function (prev) {
+          var prevIndex = list.findIndex(function (i) {
+            return i.id === prev;
+          });
+          var val = prevIndex > 0 ? list[prevIndex - 1].id : list[list.length - 1].id;
+          setTimeout(function () {
+            return onClick(val);
+          });
+          return val;
+        });
+        setTimeout(function () {
+          return contentRef.current.childNodes[0].focus();
+        });
+        return false;
+      } // istanbul ignore else
+
+
+      if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        setSelectedId(function (prev) {
+          var prevIndex = list.findIndex(function (i) {
+            return i.id === prev;
+          });
+          var val = prevIndex === list.indexOf(list[list.length - 1]) ? list[0].id : list[prevIndex + 1].id;
+          setTimeout(function () {
+            return onClick(val);
+          });
+          return val;
+        });
+        setTimeout(function () {
+          return contentRef.current.childNodes[0].focus();
+        });
+        return false;
+      }
+    } // istanbul ignore else
+
+
+    if (/\s/.test(e.key) || e.key === 'Enter') {
+      // istanbul ignore else
+      if (e.currentTarget.id === "".concat(iotPrefix, "--list-spinner__btn--up")) {
+        setSelectedId(function (prev) {
+          var prevIndex = list.findIndex(function (i) {
+            return i.id === prev;
+          });
+          var val = prevIndex > 0 ? list[prevIndex - 1].id : list[list.length - 1].id;
+          setTimeout(function () {
+            return onClick(val);
+          });
+          return val;
+        });
+      } // istanbul ignore else
+
+
+      if (e.currentTarget.id === "".concat(iotPrefix, "--list-spinner__btn--down")) {
+        setSelectedId(function (prev) {
+          var prevIndex = list.findIndex(function (i) {
+            return i.id === prev;
+          });
+          var val = prevIndex === list.indexOf(list[list.length - 1]) ? list[0].id : list[prevIndex + 1].id;
+          setTimeout(function () {
+            return onClick(val);
+          });
+          return val;
+        });
+      }
+    }
+  };
+
+  var handleClick = useCallback(function (e) {
+    e.persist();
+    e.preventDefault();
+    scrollEvent.current = false;
+
+    if (e.currentTarget.id === "".concat(iotPrefix, "--list-spinner__btn--up")) {
+      setSelectedId(function (prev) {
+        var prevIndex = list.findIndex(function (i) {
+          return i.id === prev;
+        });
+        var val = prevIndex > 0 ? list[prevIndex - 1].id : list[list.length - 1].id;
+        setTimeout(function () {
+          return onClick(val);
+        });
+        return val;
+      });
+    } else if (e.currentTarget.id === "".concat(iotPrefix, "--list-spinner__btn--down")) {
+      setSelectedId(function (prev) {
+        var prevIndex = list.findIndex(function (i) {
+          return i.id === prev;
+        });
+        var val = prevIndex === list.indexOf(list[list.length - 1]) ? list[0].id : list[prevIndex + 1].id;
+        setTimeout(function () {
+          return onClick(val);
+        });
+        return val;
+      });
+    } else {
+      setSelectedId(e.currentTarget.id);
+      onClick(e.currentTarget.id);
+    }
+
+    e.currentTarget.focus();
+  }, [list, onClick]);
+  var renderItems = listItems.map(function (el) {
+    return /*#__PURE__*/React__default.createElement("li", {
+      "data-testid": "".concat(testId, "-list-item"),
+      ref: function ref(node) {
+        // Once component mounts tell our observer to observe it
+        if (node) {
+          if (el.value === selectedId) {
+            contentRef.current = node;
+          }
+
+          setTimeout(function () {
+            var _observerRef$current2;
+
+            return (_observerRef$current2 = observerRef.current) === null || _observerRef$current2 === void 0 ? void 0 : _observerRef$current2.observe(node);
+          }, 0);
+        }
+      },
+      className: classnames("".concat(iotPrefix, "--list-spinner__list-item"), _defineProperty({}, "".concat(iotPrefix, "--list-spinner__list-item--selected"), el.id === selectedId)),
+      key: el.id,
+      id: "".concat(el.id, "-list-item"),
+      "data-selected": el.value === selectedId
+    }, /*#__PURE__*/React__default.createElement(Button, {
+      testId: el.id === selectedId ? "".concat(testId, "-selected-item") : el.id,
+      id: el.id,
+      tabIndex: el.id === selectedId ? 0 : -1,
+      kind: "ghost",
+      iconDescription: el.value,
+      onMouseDown: handleClick
+    }, el.value));
+  });
+  return /*#__PURE__*/React__default.createElement("div", {
+    "data-testid": testId,
+    className: classnames("".concat(iotPrefix, "--list-spinner__section"), _defineProperty({}, className, className))
+  }, /*#__PURE__*/React__default.createElement(Button, {
+    ref: ref,
+    testId: "".concat(testId, "-prev-btn"),
+    id: "".concat(iotPrefix, "--list-spinner__btn--up"),
+    onMouseDown: handleClick,
+    iconDescription: previous,
+    className: "".concat(iotPrefix, "--list-spinner__btn ").concat(className, "-spinner__btn"),
+    renderIcon: ChevronUp16,
+    kind: "ghost",
+    onKeyDown: handleKeyPress
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(iotPrefix, "--list-spinner__list-container ").concat(className, "-spinner__list-container")
+  }, /*#__PURE__*/React__default.createElement(ContainerElement, {
+    "data-testid": "".concat(testId, "-list"),
+    ref: containerRef,
+    className: "".concat(iotPrefix, "--list-spinner__list ").concat(className, "-spinner__list"),
+    onWheel: handleWheel,
+    onTouchStart: handleTouchStart,
+    onTouchMove: handleTouchMove,
+    onKeyDown: handleKeyPress
+  }, renderItems)), /*#__PURE__*/React__default.createElement(Button, {
+    testId: "".concat(testId, "-next-btn"),
+    id: "".concat(iotPrefix, "--list-spinner__btn--down"),
+    onMouseDown: handleClick,
+    className: "".concat(iotPrefix, "--list-spinner__btn ").concat(className, "-spinner__btn"),
+    iconDescription: next,
+    renderIcon: ChevronDown16,
+    kind: "ghost",
+    onKeyDown: handleKeyPress
+  }));
+});
+ListSpinner.propTypes = propTypes;
+ListSpinner.defaultProps = defaultProps;
+ListSpinner.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "props": {
+    "className": {
+      "defaultValue": {
+        "value": "undefined",
+        "computed": true
+      },
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "testId": {
+      "defaultValue": {
+        "value": "'list-spinner'",
+        "computed": false
+      },
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "i18n": {
+      "defaultValue": {
+        "value": "{\n  previous: 'Previous item',\n  next: 'Next item',\n}",
+        "computed": false
+      },
+      "type": {
+        "name": "shape",
+        "value": {
+          "previous": {
+            "name": "string",
+            "required": false
+          },
+          "next": {
+            "name": "string",
+            "required": false
+          }
+        }
+      },
+      "required": false,
+      "description": ""
+    },
+    "defaultSelectedId": {
+      "defaultValue": {
+        "value": "undefined",
+        "computed": true
+      },
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "Optional default selected item"
+    },
+    "onChange": {
+      "defaultValue": {
+        "value": "() => {}",
+        "computed": false
+      },
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Optional handler that is called whenever value is updated"
+    },
+    "onClick": {
+      "defaultValue": {
+        "value": "() => {}",
+        "computed": false
+      },
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Optional handler that is called whenever item is clicked"
+    },
+    "list": {
+      "defaultValue": {
+        "value": "[]",
+        "computed": false
+      },
+      "type": {
+        "name": "arrayOf",
+        "value": {
+          "name": "shape",
+          "value": {
+            "id": {
+              "name": "string",
+              "required": false
+            },
+            "value": {
+              "name": "string",
+              "required": false
+            }
+          }
+        }
+      },
+      "required": false,
+      "description": "Array of items to render in the spinning list"
+    },
+    "containerElement": {
+      "defaultValue": {
+        "value": "'ul'",
+        "computed": false
+      },
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "Optional tag name to use instead of ul"
+    }
+  }
+};
+
+export default ListSpinner;
+export { moveToSecondIndex };