agora-appbuilder-core 3.0.13 → 3.0.28-beta-9

package/template/src/utils/common.tsx

@@ -10,21 +10,27 @@
 *********************************************
 */
 import React from 'react';
-import {Platform as ReactNativePlatform} from 'react-native';
+import {
+  Platform as ReactNativePlatform,
+  useWindowDimensions,
+} from 'react-native';
 import Platform from '../subComponents/Platform';
-
 import * as ReactIs from 'react-is';
 
+const trimText = (text: string, length: number = 25) => {
+  if (!text) {
+    return '';
+  }
+  return text?.substring(0, length) + (text?.length > length ? '...' : '');
+};
+const maxInputLimit = 60;
 const isValidReactComponent = <T,>(Component?: React.ComponentType<T>) =>
   Component && ReactIs.isValidElementType(Component) ? true : false;
 
 const useHasBrandLogo = () => () => !!$config.LOGO;
 
-const shouldAuthenticate: boolean =
-  $config.ENABLE_APPLE_OAUTH ||
-  $config.ENABLE_GOOGLE_OAUTH ||
-  $config.ENABLE_MICROSOFT_OAUTH ||
-  $config.ENABLE_SLACK_OAUTH;
+const shouldAuthenticate: boolean = false;
+// $config.ENABLE_TOKEN_AUTH || $config.ENABLE_IDP_AUTH;
 
 //for our internal usage don't check Platform - electron and web will same kind ui checks. thats why we have isWeb for external usage
 const isWebInternal = () => ReactNativePlatform.OS === 'web';
@@ -57,10 +63,330 @@ const isIOS = () => Platform === 'native' && ReactNativePlatform.OS === 'ios';
 //@ts-ignore
 const isDesktop = () => Platform === 'electron';
 
+/**
+ * Checks whether the application is running on mobile device (user agent) and returns true/false.
+ * @returns function
+ */
+//@ts-ignore
+const isMobileUA = () => {
+  let check = false;
+  (function (a) {
+    if (
+      /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(
+        a,
+      ) ||
+      isAndroid() ||
+      isIOS()
+    )
+      check = true;
+  })(navigator?.userAgent || navigator?.vendor || window?.opera);
+  return check;
+};
+
 const isArray = (data: any[]) =>
   data && Array.isArray(data) && data.length ? true : false ? true : false;
+
+interface calculatedPositionProps {
+  px: number;
+  py: number;
+  localWidth: number;
+  localHeight: number;
+  globalWidth: number;
+  globalHeight: number;
+  extra?: {
+    top?: number;
+    bottom?: number;
+    left?: number;
+    right?: number;
+  };
+  popupWidth?: number;
+}
+const calculatePosition = (params: calculatedPositionProps) => {
+  const {
+    px,
+    py,
+    localWidth,
+    localHeight,
+    globalWidth,
+    globalHeight,
+    extra: {top = 0, bottom = 0, left = 0, right = 0} = {},
+    popupWidth = 220,
+  } = params;
+  //right hand side
+  if (px > globalWidth / 2) {
+    // if actionmenu overflow - horizontal
+    const w = globalWidth - px + popupWidth;
+    let minus = 0;
+    if (w > globalWidth) {
+      minus = w - globalWidth + 10;
+    }
+    //right bottom
+    if (py > globalHeight / 2) {
+      return {
+        bottom: globalHeight - py + bottom,
+        right: globalWidth - px - minus + right,
+      };
+    }
+    //right top
+    else {
+      return {
+        top: py + localHeight + top,
+        right: globalWidth - px - minus + right,
+      };
+    }
+  }
+  //left hand side
+  else {
+    // if actionmenu overflow - horizontal
+    const w = px + localWidth + popupWidth;
+    let minus = 0;
+    if (w > globalWidth) {
+      minus = w - globalWidth + 10;
+    }
+    //left bottom
+    if (py > globalHeight / 2) {
+      return {
+        bottom: globalHeight - py + bottom,
+        left: px + localWidth - minus + left,
+      };
+    }
+    //left top
+    else {
+      return {
+        top: py + localHeight + top + top,
+        left: px + localWidth - minus + left,
+      };
+    }
+  }
+};
+
+const BREAKPOINTS = {
+  xs: 360,
+  sm: 576,
+  md: 768,
+  lg: 992,
+  xl: 1330,
+  xxl: 1400,
+};
+
+const useIsDesktop = () => {
+  const {width, height} = useWindowDimensions();
+  return (from: 'default' | 'toolbar' | 'popup' | 'large' = 'default') => {
+    if (from === 'default') {
+      return width > height ? true : false;
+    } else if (from === 'toolbar') {
+      return width > BREAKPOINTS.xl;
+    } else if (from === 'popup') {
+      return width > BREAKPOINTS.md;
+    } else if (from === 'large') {
+      return width > BREAKPOINTS.lg;
+    }
+    return width >= BREAKPOINTS.xl;
+  };
+};
+const useIsSmall = () => {
+  const {width} = useWindowDimensions();
+  return (number = BREAKPOINTS.sm) => {
+    return width < number;
+  };
+};
+
+const useResponsive = () => {
+  const {width} = useWindowDimensions();
+  return (input: number) => {
+    if (width < BREAKPOINTS.xs) {
+      return input / 3;
+    } else if (width < BREAKPOINTS.md) {
+      return input / 2;
+    } else {
+      return input;
+    }
+  };
+};
+
+const processDeepLinkURI = (url: string): string => {
+  return url
+    .replace(`${$config.PRODUCT_ID.toLowerCase()}://my-host`, '')
+    .replace($config.FRONTEND_ENDPOINT, '');
+};
+
+const getParamFromURL = (url, param) => {
+  const include = url.includes(param);
+
+  if (!include) return null;
+
+  const params = url.split(/([&,?,=])/);
+  const index = params.indexOf(param);
+  const value = params[index + 2];
+  return value;
+};
+const throttleFn = (fn: Function, wait: number = 300) => {
+  let inThrottle: boolean,
+    lastFn: ReturnType<typeof setTimeout>,
+    lastTime: number;
+  return function (this: any) {
+    const context = this,
+      args = arguments;
+    if (!inThrottle) {
+      fn.apply(context, args);
+      lastTime = Date.now();
+      inThrottle = true;
+    } else {
+      clearTimeout(lastFn);
+      lastFn = setTimeout(() => {
+        if (Date.now() - lastTime >= wait) {
+          fn.apply(context, args);
+          lastTime = Date.now();
+        }
+      }, Math.max(wait - (Date.now() - lastTime), 0));
+    }
+  };
+};
+
+const debounceFn = (fn: Function, ms = 300) => {
+  let timeoutId: ReturnType<typeof setTimeout>;
+  return function (this: any, ...args: any[]) {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => fn.apply(this, args), ms);
+  };
+};
+
+const capitalizeFirstLetter = (word: string): string => {
+  return word.charAt(0).toUpperCase() + word.slice(1);
+};
+
+const CustomToolbarSort = (a, b) =>
+  (a.hasOwnProperty('order') ? a.order : 999999) -
+  (b.hasOwnProperty('order') ? b.order : 999999);
+
+const CustomToolbarSorting = sourceObject => {
+  try {
+    return Object.keys(sourceObject).sort((a, b) => {
+      return (
+        (sourceObject[a].hasOwnProperty('order')
+          ? sourceObject[a].order
+          : 999999) -
+        (sourceObject[b].hasOwnProperty('order')
+          ? sourceObject[b].order
+          : 999999)
+      );
+    });
+  } catch (error) {
+    console.error('CustomSortingToolbarObject Failed', error);
+    return [];
+  }
+};
+
+function CustomToolbarMerge(obj1, obj2) {
+  let merged = {...obj1};
+  for (let key in obj2) {
+    if (obj2.hasOwnProperty(key)) {
+      merged[key] =
+        obj1[key] && obj1[key].toString() === '[object Object]'
+          ? CustomToolbarMerge(obj1[key], obj2[key])
+          : obj2[key];
+    }
+  }
+  return merged;
+}
+
+const randomString = (
+  length = 5,
+  chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ',
+) => {
+  var result = '';
+  for (var i = length; i > 0; --i)
+    result += chars[Math.floor(Math.random() * chars.length)];
+  return result;
+};
+
+function randomIntFromInterval(min, max) {
+  // min and max included
+  return Math.floor(Math.random() * (max - min + 1) + min);
+}
+function getOS() {
+  let userAgent = window.navigator.userAgent.toLowerCase(),
+    macosPlatforms = /(macintosh|macintel|macppc|mac68k|macos)/i,
+    windowsPlatforms = /(win32|win64|windows|wince)/i,
+    iosPlatforms = /(iphone|ipad|ipod)/i,
+    os = null;
+
+  if (macosPlatforms.test(userAgent)) {
+    os = 'macos';
+  } else if (iosPlatforms.test(userAgent)) {
+    os = 'ios';
+  } else if (windowsPlatforms.test(userAgent)) {
+    os = 'windows';
+  } else if (/android/.test(userAgent)) {
+    os = 'android';
+  } else if (!os && /linux/.test(userAgent)) {
+    os = 'linux';
+  }
+
+  return os;
+}
+
+function hexToRgb(hex: string): [number, number, number] {
+  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result
+    ? [
+        parseInt(result[1], 16),
+        parseInt(result[2], 16),
+        parseInt(result[3], 16),
+      ]
+    : [0, 0, 0];
+}
+const updateToolbarDefaultConfig = (data, defaultItemsConfig) => {
+  return data?.map(i => {
+    if (
+      i?.componentName &&
+      defaultItemsConfig &&
+      defaultItemsConfig[i?.componentName]
+    ) {
+      return {
+        ...i,
+        ...defaultItemsConfig[i?.componentName],
+      };
+    } else {
+      return i;
+    }
+  });
+};
+
+function MergeMoreButtonFields(sourceArray, updateObject) {
+  const updateKeys = Object.keys(updateObject);
+  let result = [];
+  let sourceKeys = [];
+  sourceArray.forEach(i => {
+    sourceKeys.push(i?.componentName);
+    if (updateKeys?.indexOf(i?.componentName) !== -1) {
+      result.push({
+        ...i,
+        ...updateObject[i?.componentName],
+      });
+    } else {
+      result.push(i);
+    }
+  });
+  //inject new value
+  updateKeys.forEach(i => {
+    if (sourceKeys?.indexOf(i) === -1) {
+      result.push({
+        ...updateObject[i],
+        componentName: i,
+      });
+    }
+  });
+  return result;
+}
+
 export {
+  updateToolbarDefaultConfig,
+  useIsDesktop,
+  useIsSmall,
+  BREAKPOINTS,
   useHasBrandLogo,
+  isMobileUA,
   isAndroid,
   isIOS,
   isWebInternal,
@@ -69,4 +395,21 @@ export {
   shouldAuthenticate,
   isArray,
   isValidReactComponent,
+  maxInputLimit,
+  trimText,
+  calculatePosition,
+  useResponsive,
+  processDeepLinkURI,
+  getParamFromURL,
+  throttleFn,
+  debounceFn,
+  capitalizeFirstLetter,
+  CustomToolbarSort,
+  randomString,
+  randomIntFromInterval,
+  getOS,
+  hexToRgb,
+  CustomToolbarSorting,
+  CustomToolbarMerge,
+  MergeMoreButtonFields,
 };

package/template/src/utils/constants.ts

@@ -0,0 +1,4 @@
+const RECORDING_BOT_UID = '100000';
+const RECORDING_BOT_SCREENSHARE_UID = '100001';
+
+export {RECORDING_BOT_UID, RECORDING_BOT_SCREENSHARE_UID};

package/template/src/utils/fetch-retry.ts

@@ -0,0 +1,23 @@
+import createRetryFetch from 'fetch-retry';
+
+export const fetchRetry = createRetryFetch(fetch, {
+  retries: 3,
+  retryDelay: function (attempt) {
+    return Math.pow(2, attempt) * 1000; // 1000, 2000, 4000
+  },
+  retryOn: function (attempt, error, response) {
+    if (attempt > 3) {
+      /**
+       * Stop retrying after three attempts
+       * The above retries param is ignored if retryOn function is provided,
+       * hence, we return falsy from there
+       */
+      return false;
+    }
+    // retry on any network error, or 4xx or 5xx status codes
+    if (error !== null || (response.status > 400 && attempt <= 3)) {
+      console.log(`retrying, attempt number ${attempt + 1}`);
+      return true;
+    }
+  },
+});

package/template/src/utils/getCustomRoute.ts

@@ -0,0 +1,7 @@
+import {CUSTOM_ROUTES_PREFIX} from 'customization-api';
+
+const getCustomRoute = customRouteName => {
+  return CUSTOM_ROUTES_PREFIX + customRouteName;
+};
+
+export default getCustomRoute;

package/template/src/utils/hexadecimalTransparency.ts

@@ -0,0 +1,108 @@
+/**
+ * Hexadecimal color code for transparency
+ * ref https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4
+ */
+const hexadecimalTransparency = {
+  '100%': 'FF',
+  '99%': 'FC',
+  '98%': 'FA',
+  '97%': 'F7',
+  '96%': 'F5',
+  '95%': 'F2',
+  '94%': 'F0',
+  '93%': 'ED',
+  '92%': 'EB',
+  '91%': 'E8',
+  '90%': 'E6',
+  '89%': 'E3',
+  '88%': 'E0',
+  '87%': 'DE',
+  '86%': 'DB',
+  '85%': 'D9',
+  '84%': 'D6',
+  '83%': 'D4',
+  '82%': 'D1',
+  '81%': 'CF',
+  '80%': 'CC',
+  '79%': 'C9',
+  '78%': 'C7',
+  '77%': 'C4',
+  '76%': 'C2',
+  '75%': 'BF',
+  '74%': 'BD',
+  '73%': 'BA',
+  '72%': 'B8',
+  '71%': 'B5',
+  '70%': 'B3',
+  '69%': 'B0',
+  '68%': 'AD',
+  '67%': 'AB',
+  '66%': 'A8',
+  '65%': 'A6',
+  '64%': 'A3',
+  '63%': 'A1',
+  '62%': '9E',
+  '61%': '9C',
+  '60%': '99',
+  '59%': '96',
+  '58%': '94',
+  '57%': '91',
+  '56%': '8F',
+  '55%': '8C',
+  '54%': '8A',
+  '53%': '87',
+  '52%': '85',
+  '51%': '82',
+  '50%': '80',
+  '49%': '7D',
+  '48%': '7A',
+  '47%': '78',
+  '46%': '75',
+  '45%': '73',
+  '44%': '70',
+  '43%': '6E',
+  '42%': '6B',
+  '41%': '69',
+  '40%': '66',
+  '39%': '63',
+  '38%': '61',
+  '37%': '5E',
+  '36%': '5C',
+  '35%': '59',
+  '34%': '57',
+  '33%': '54',
+  '32%': '52',
+  '31%': '4F',
+  '30%': '4D',
+  '29%': '4A',
+  '28%': '47',
+  '27%': '45',
+  '26%': '42',
+  '25%': '40',
+  '24%': '3D',
+  '23%': '3B',
+  '22%': '38',
+  '21%': '36',
+  '20%': '33',
+  '19%': '30',
+  '18%': '2E',
+  '17%': '2B',
+  '16%': '29',
+  '15%': '26',
+  '14%': '24',
+  '13%': '21',
+  '12%': '1F',
+  '11%': '1C',
+  '10%': '1A',
+  '9%': '17',
+  '8%': '14',
+  '7%': '12',
+  '6%': '0F',
+  '5%': '0D',
+  '4%': '0A',
+  '3%': '08',
+  '2%': '05',
+  '1%': '03',
+  '0%': '00',
+};
+export default hexadecimalTransparency;

package/template/src/utils/index.tsx

@@ -1,3 +1,6 @@
+import {isWebInternal} from './common';
+
+const Buffer = require('buffer/').Buffer;
 type Entry<T> = {
   [K in keyof T]: [K, T[K]];
 }[keyof T];
@@ -55,3 +58,83 @@ export function isEmptyObject(obj: object) {
   }
   return true;
 }
+
+export const randomNameGenerator = (num: number) => {
+  let res = '';
+  for (let i = 0; i < num; i++) {
+    const random = Math.floor(Math.random() * 10);
+    res += String.fromCharCode(97 + random);
+  }
+  return res;
+};
+export function formatAMPM(date) {
+  var hours = date.getHours();
+  var minutes = date.getMinutes();
+  var ampm = hours >= 12 ? 'pm' : 'am';
+  hours = hours % 12;
+  hours = hours ? hours : 12; // the hour '0' should be '12'
+  minutes = minutes < 10 ? '0' + minutes : minutes;
+  var strTime = hours + ':' + minutes + ' ' + ampm;
+  return strTime;
+}
+export function isURL(str) {
+  if (!str) {
+    return false;
+  }
+  var urlRegex =
+    '^(?!mailto:)(?:(?:http|https|ftp)://)(?:\\S+(?::\\S*)?@)?(?:(?:(?:[1-9]\\d?|1\\d\\d|2[01]\\d|22[0-3])(?:\\.(?:1?\\d{1,2}|2[0-4]\\d|25[0-5])){2}(?:\\.(?:[0-9]\\d?|1\\d\\d|2[0-4]\\d|25[0-4]))|(?:(?:[a-z\\u00a1-\\uffff0-9]+-?)*[a-z\\u00a1-\\uffff0-9]+)(?:\\.(?:[a-z\\u00a1-\\uffff0-9]+-?)*[a-z\\u00a1-\\uffff0-9]+)*(?:\\.(?:[a-z\\u00a1-\\uffff]{2,})))|localhost)(?::\\d{2,5})?(?:(/|\\?|#)[^\\s]*)?$';
+  var url = new RegExp(urlRegex, 'i');
+  return str.length < 2083 && url.test(str);
+}
+
+export const base64ToUint8Array = (base64Str: string) => {
+  let decodedData;
+
+  decodedData = Buffer.from(base64Str, 'base64').toString('binary');
+
+  if (isWebInternal()) {
+    const result: Uint8Array = new Uint8Array(
+      new ArrayBuffer(decodedData.length),
+    );
+    for (let i = 0; i < decodedData.length; i += 1) {
+      result[i] = decodedData.charCodeAt(i);
+    }
+    return result;
+  } else {
+    const result: number[] = [];
+    for (let i = 0; i < decodedData.length; i++) {
+      result.push(decodedData.charCodeAt(i));
+    }
+    return result;
+  }
+};
+
+export function timeAgo(timestamp: number) {
+  const now = new Date().getTime();
+  const diff = now - timestamp;
+  const seconds = Math.floor(diff / 1000);
+  const minutes = Math.floor(seconds / 60);
+  const hours = Math.floor(minutes / 60);
+  const days = Math.floor(hours / 24);
+
+  if (days > 0) {
+    return days === 1 ? '1 day ago' : `${days} days ago`;
+  } else if (hours > 0) {
+    return hours === 1 ? '1 hour ago' : `${hours} hours ago`;
+  } else if (minutes > 0) {
+    return minutes === 1 ? '1 minute ago' : `${minutes} minutes ago`;
+  } else {
+    return 'just now';
+  }
+}
+
+export const containsOnlyEmojis = (text: string) => {
+  const emojiRegex =
+    /[\u{1F300}-\u{1F6FF}\u{1F900}-\u{1F9FF}\u{2600}-\u{26FF}\u{2700}-\u{27BF}\u{1F1E6}-\u{1F1FF}\u{1F191}-\u{1F251}\u{1F004}\u{1F0CF}\u{1F170}-\u{1F251}\s]/gu;
+  return (
+    emojiRegex.test(text) &&
+    !/[^\u{1F300}-\u{1F6FF}\u{1F900}-\u{1F9FF}\u{2600}-\u{26FF}\u{2700}-\u{27BF}\u{1F1E6}-\u{1F1FF}\u{1F191}-\u{1F251}\u{1F004}\u{1F0CF}\u{1F170}-\u{1F251}\s]/gu.test(
+      text,
+    )
+  );
+};

package/template/src/utils/isMobileOrTablet.ts

@@ -13,14 +13,19 @@ const isMobileOrTablet = () => {
   (function (a) {
     if (
       /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(
-        a,
+        a
       ) ||
       /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(
-        a.substr(0, 4),
+        a.substr(0, 4)
       )
     )
       check = true;
   })(navigator?.userAgent || navigator?.vendor || window?.opera);
+  check =
+    (/Macintosh/i.test(navigator?.userAgent) &&
+      navigator?.maxTouchPoints &&
+      navigator?.maxTouchPoints > 1) ||
+    check;
   return check;
 };
 

package/template/src/utils/pendingStateUpdateHelper.ts

@@ -0,0 +1,19 @@
+/**
+ * Wrapper around 200ms buffered updates.
+ * @param action - The asynchronous action that causes update
+ * @param cb - Callback method called with true if 200ms exceeded in performing 
+   * provided action and called with false after action completed
+ */
+const pendingStateUpdateHelper = async (
+  action: () => Promise<any>,
+  cb: (exceeded200ms: boolean) => void,
+) => {
+  const pendingTimeout = setTimeout(() => {
+    cb(true);
+  }, 200);
+  await action();
+  clearTimeout(pendingTimeout);
+  cb(false);
+};
+
+export default pendingStateUpdateHelper;