@terraware/web-components 5.0.27-rc.0 → 5.0.27

package/utils/date.js

@@ -1,48 +1,114 @@
-import lodash from "lodash";
-import { DateTime } from "luxon";
-const tz = (timeZoneId)=>timeZoneId || 'Etc/UTC';
-const getDateFromISOString = (date, timeZoneId)=>DateTime.fromISO(date, {
-        zone: tz(timeZoneId)
-    });
-const getDateFromMillis = (date, timeZoneId)=>{
-    const millis = new Date(date).getTime();
-    return DateTime.fromMillis(millis, {
-        zone: tz(timeZoneId)
-    });
+import _ from 'lodash';
+import { DateTime } from 'luxon';
+
+/**
+ * Accepted date types for input are:
+ * - string for any date ISO string representation
+ * - number for timestamp
+ * - JS Date
+ * - luxon DateTime
+ */
+
+/**
+ * Helper util that returns default time zone as a fallback.
+ */
+const tz = timeZoneId => timeZoneId || 'Etc/UTC';
+
+/**
+ * Parse a date ISO string with zone implied.
+ * eg. '2023-01-10 in 'America/Los_Angeles'
+ */
+const getDateFromISOString = (date, timeZoneId) => {
+  return DateTime.fromISO(date, {
+    zone: tz(timeZoneId)
+  });
 };
-const getDisplayValue = (date)=>{
-    if (date.isValid) return date.toFormat('yyyy-MM-dd');
-    return date.toString();
+
+/**
+ * Parse a date from milliseconds, with time zone implied.
+ */
+const getDateFromMillis = (date, timeZoneId) => {
+  const millis = new Date(date).getTime();
+  return DateTime.fromMillis(millis, {
+    zone: tz(timeZoneId)
+  });
 };
-const getShortDate = (date)=>{
-    if (date.isValid) return date.toFormat('LLLL yyyy');
-    return date.toString();
+
+/**
+ * Return the display value for a date in ISO 8601 format.
+ */
+const getDisplayValue = date => {
+  if (date.isValid) {
+    return date.toFormat('yyyy-MM-dd');
+  }
+  return date.toString();
 };
-const getDate = (date, timeZoneId)=>{
-    if ('string' == typeof date) {
-        const fromString = getDateFromISOString(date, timeZoneId);
-        if (fromString.isValid) return fromString;
+
+/**
+ * Returns <Month> <Year> (eg. July 2023).
+ */
+const getShortDate = date => {
+  if (date.isValid) {
+    return date.toFormat('LLLL yyyy');
+  }
+  return date.toString();
+};
+
+/**
+ * Utility that constructs a valid DateTime object from
+ * any DateType value passed in (ISO string or epoch milliseconds or DateTime object).
+ * Note: the DateTime object input support is mostly for ease of use and will essentially be a pass-through.
+ */
+const getDate = (date, timeZoneId) => {
+  if (typeof date === 'string') {
+    const fromString = getDateFromISOString(date, timeZoneId);
+    if (fromString.isValid) {
+      return fromString;
     }
-    if ('number' == typeof date) {
-        const fromMillis = getDateFromMillis(date, timeZoneId);
-        if (fromMillis.isValid) return fromMillis;
+  }
+  if (typeof date === 'number') {
+    const fromMillis = getDateFromMillis(date, timeZoneId);
+    if (fromMillis.isValid) {
+      return fromMillis;
     }
-    if (lodash.isDate(date) || 'string' == typeof date || 'number' == typeof date) return DateTime.fromJSDate(new Date(date), {
-        zone: tz(timeZoneId)
+  }
+  if (_.isDate(date) || typeof date === 'string' || typeof date === 'number') {
+    return DateTime.fromJSDate(new Date(date), {
+      zone: tz(timeZoneId)
     });
-    return date.setZone(tz(timeZoneId));
-};
-const getDateDisplayValue = (date, timeZoneId)=>{
-    if ('string' == typeof date && date.match(/^\d\d\d\d-\d\d-\d\d$/)) return date;
-    const dateObj = getDate(date, timeZoneId);
-    return getDisplayValue(dateObj);
-};
-const getTodaysDateFormatted = (timeZoneId)=>getDisplayValue(DateTime.now().setZone(tz(timeZoneId)));
-const isInTheFuture = (date, timeZoneId)=>{
-    const d = getDate(date, timeZoneId);
-    if (d.isValid) return d.toMillis() > Date.now();
-    return false;
-};
-const utils_date = getDateDisplayValue;
-export default utils_date;
-export { getDate, getShortDate, getTodaysDateFormatted, isInTheFuture, tz };
+  }
+  return date.setZone(tz(timeZoneId));
+};
+
+/**
+ * Default export function that provides a display value for a date
+ * with optional implied time zone.
+ */
+const getDateDisplayValue = (date, timeZoneId) => {
+  if (typeof date === 'string' && date.match(/^\d\d\d\d-\d\d-\d\d$/)) {
+    // if already in display format, return as-is, do not apply time zone
+    return date;
+  }
+  const dateObj = getDate(date, timeZoneId);
+  return getDisplayValue(dateObj);
+};
+
+/**
+ * Exported function that returns todays date in a specific (optional) time zone.
+ */
+const getTodaysDateFormatted = timeZoneId => {
+  return getDisplayValue(DateTime.now().setZone(tz(timeZoneId)));
+};
+
+/**
+ * Checks if a date is in the future, time zone for date is optional.
+ */
+const isInTheFuture = (date, timeZoneId) => {
+  const d = getDate(date, timeZoneId);
+  if (d.isValid) {
+    return d.toMillis() > Date.now();
+  }
+  return false;
+};
+
+export { getDateDisplayValue as default, getDate, getShortDate, getTodaysDateFormatted, isInTheFuture, tz };

package/utils/index.js

@@ -1,4 +1,4 @@
-export { default as getDateDisplayValue, getDate, getTodaysDateFormatted, isInTheFuture } from "./date.js";
-export { default as preventDefaultEvent } from "./preventDefaultEvent.js";
-export { default as isWhitespaces } from "./text.js";
-export { default as useDeviceInfo } from "./useDeviceInfo.js";
+export { getDate, default as getDateDisplayValue, getTodaysDateFormatted, isInTheFuture } from './date.js';
+export { default as preventDefaultEvent } from './preventDefaultEvent.js';
+export { default as isWhitespaces } from './text.js';
+export { default as useDeviceInfo } from './useDeviceInfo.js';

package/utils/preventDefaultEvent.js

@@ -1,3 +1,3 @@
-const preventDefault = (event)=>event.preventDefault();
-const preventDefaultEvent = preventDefault;
-export default preventDefaultEvent;
+const preventDefault = event => event.preventDefault();
+
+export { preventDefault as default };

package/utils/text.js

@@ -1,11 +1,11 @@
-const isWhitespaces = (str)=>str.match(/^\s+$/);
-const titleCase = (str)=>str.split(' ').map((word)=>{
-        if (word === word.toUpperCase()) return word;
-        else {
-            const lowerCaseWord = word.toLowerCase();
-            return lowerCaseWord.replace(lowerCaseWord.charAt(0), lowerCaseWord.charAt(0).toUpperCase());
-        }
-    }).join(' ');
-const utils_text = isWhitespaces;
-export default utils_text;
-export { titleCase };
+const isWhitespaces = str => str.match(/^\s+$/);
+const titleCase = str => str.split(' ').map(word => {
+  if (word !== word.toUpperCase()) {
+    const lowerCaseWord = word.toLowerCase();
+    return lowerCaseWord.replace(lowerCaseWord.charAt(0), lowerCaseWord.charAt(0).toUpperCase());
+  } else {
+    return word;
+  }
+}).join(' ');
+
+export { isWhitespaces as default, titleCase };

package/utils/useDeviceInfo.js

@@ -1,43 +1,80 @@
-import { useMediaQuery } from "react-responsive";
-const useDeviceInfo = ({ onChange } = {})=>{
-    const deviceChangeCallback = (matches)=>{
-        if (matches && onChange) onChange();
-    };
-    const isDesktop = useMediaQuery({
-        minWidth: 1024
-    }, void 0, deviceChangeCallback);
-    const isTablet = useMediaQuery({
-        maxWidth: 1023,
-        minWidth: 768
-    }, void 0, deviceChangeCallback);
-    const isMobile = useMediaQuery({
-        maxWidth: 767
-    }, void 0, deviceChangeCallback);
-    const isPortrait = useMediaQuery({
-        orientation: 'portrait'
-    }, void 0, deviceChangeCallback);
-    const isRetina = useMediaQuery({
-        query: '(min-resolution: 2dppx)'
-    }, void 0, deviceChangeCallback);
-    const getDeviceType = ()=>{
-        if (isTablet) return 'tablet';
-        if (isMobile) return 'mobile';
-        return 'desktop';
-    };
-    const getDeviceOrientation = ()=>{
-        if (isPortrait) return 'portrait';
-        return 'landscape';
-    };
-    return {
-        type: getDeviceType(),
-        orientation: getDeviceOrientation(),
-        isRetina,
-        isDesktop,
-        isTablet,
-        isMobile,
-        isPortrait,
-        isLandscape: !isPortrait
-    };
+import { useMediaQuery } from 'react-responsive';
+
+/**
+ * Device widths categorized for our purposes.
+ * Device widths
+ * desktop width > 1023
+ * tablet width = 1023 - 768
+ * mobile width = < 768
+ */
+
+/**
+ * This function returns properties on device type.
+ *
+ * {
+ * type: 'desktop' | 'tablet' | 'mobile',
+ * orientation: 'portrait' | 'landscape',
+ * isDesktop: <boolean>,
+ * isTablet: <boolean>,
+ * isMobile: <boolean>,
+ * isRetina: <boolean>,
+ * }
+ *
+ * Clients can use whichever properties they see fit.
+ *
+ * This function also acceps a callback function to be called
+ * if there's a change in any of our interested device properties.
+ */
+
+const useDeviceInfo = ({
+  onChange
+} = {}) => {
+  const deviceChangeCallback = matches => {
+    if (matches && onChange) {
+      onChange();
+    }
+  };
+  const isDesktop = useMediaQuery({
+    minWidth: 1024
+  }, undefined, deviceChangeCallback);
+  const isTablet = useMediaQuery({
+    maxWidth: 1023,
+    minWidth: 768
+  }, undefined, deviceChangeCallback);
+  const isMobile = useMediaQuery({
+    maxWidth: 767
+  }, undefined, deviceChangeCallback);
+  const isPortrait = useMediaQuery({
+    orientation: 'portrait'
+  }, undefined, deviceChangeCallback);
+  const isRetina = useMediaQuery({
+    query: '(min-resolution: 2dppx)'
+  }, undefined, deviceChangeCallback);
+  const getDeviceType = () => {
+    if (isTablet) {
+      return 'tablet';
+    }
+    if (isMobile) {
+      return 'mobile';
+    }
+    return 'desktop';
+  };
+  const getDeviceOrientation = () => {
+    if (isPortrait) {
+      return 'portrait';
+    }
+    return 'landscape';
+  };
+  return {
+    type: getDeviceType(),
+    orientation: getDeviceOrientation(),
+    isRetina,
+    isDesktop,
+    isTablet,
+    isMobile,
+    isPortrait,
+    isLandscape: !isPortrait
+  };
 };
-const utils_useDeviceInfo = useDeviceInfo;
-export default utils_useDeviceInfo;
+
+export { useDeviceInfo as default };

package/virtualWalkthrough.js

@@ -1,23 +1,23 @@
-export { default as Annotation } from "./components/VirtualWalkthrough/Annotation.js";
-export { default as AnnotationEditPane } from "./components/VirtualWalkthrough/AnnotationEditPane.js";
-export { default as AnnotationPanel } from "./components/VirtualWalkthrough/AnnotationPanel.js";
-export { default as Application } from "./components/VirtualWalkthrough/Application.js";
-export { AutoRotator } from "./components/VirtualWalkthrough/AutoRotator.js";
-export { default as BlockingSpinner } from "./components/VirtualWalkthrough/BlockingSpinner.js";
-export { default as BoundaryRing } from "./components/VirtualWalkthrough/BoundaryRing.js";
-export { default as CameraInfo } from "./components/VirtualWalkthrough/CameraInfo.js";
-export { default as ControlsInfoPane } from "./components/VirtualWalkthrough/ControlsInfoPane.js";
-export { default as GradientSky } from "./components/VirtualWalkthrough/GradientSky.js";
-export { default as SplatControls } from "./components/VirtualWalkthrough/SplatControls.js";
-export { default as SplatCrop } from "./components/VirtualWalkthrough/SplatCrop.js";
-export { default as SplatFadeCrop } from "./components/VirtualWalkthrough/SplatFadeCrop.js";
-export { default as SplatModel } from "./components/VirtualWalkthrough/SplatModel.js";
-export { default as SplatRevealRain } from "./components/VirtualWalkthrough/SplatRevealRain.js";
-export { TfAnnotationManager } from "./components/VirtualWalkthrough/TfAnnotationManager.js";
-export { TfXrNavigation } from "./components/VirtualWalkthrough/TfXrNavigation.js";
-export { default as VirtualWalkthroughViewer } from "./components/VirtualWalkthrough/VirtualWalkthroughViewer.js";
-export { BoundaryRingScript, boundaryRingMesh } from "./components/VirtualWalkthrough/boundary-ring.js";
-export { computeGroundPlane, yOnPlane } from "./components/VirtualWalkthrough/groundPlane.js";
-export { detectSplatFormat, splatLoaderFilename } from "./components/VirtualWalkthrough/splatFormat.js";
-export { WalkthroughCamera } from "./components/VirtualWalkthrough/walkthrough-camera.js";
-export { useDevicePerformance } from "./hooks/useDevicePerformance.js";
+export { default as Annotation } from './components/VirtualWalkthrough/Annotation.js';
+export { default as AnnotationEditPane } from './components/VirtualWalkthrough/AnnotationEditPane.js';
+export { default as AnnotationPanel } from './components/VirtualWalkthrough/AnnotationPanel.js';
+export { default as Application } from './components/VirtualWalkthrough/Application.js';
+export { AutoRotator } from './components/VirtualWalkthrough/AutoRotator.js';
+export { default as BlockingSpinner } from './components/VirtualWalkthrough/BlockingSpinner.js';
+export { default as BoundaryRing } from './components/VirtualWalkthrough/BoundaryRing.js';
+export { default as CameraInfo } from './components/VirtualWalkthrough/CameraInfo.js';
+export { default as ControlsInfoPane } from './components/VirtualWalkthrough/ControlsInfoPane.js';
+export { default as GradientSky } from './components/VirtualWalkthrough/GradientSky.js';
+export { default as SplatControls } from './components/VirtualWalkthrough/SplatControls.js';
+export { default as SplatCrop } from './components/VirtualWalkthrough/SplatCrop.js';
+export { default as SplatFadeCrop } from './components/VirtualWalkthrough/SplatFadeCrop.js';
+export { default as SplatModel } from './components/VirtualWalkthrough/SplatModel.js';
+export { default as SplatRevealRain } from './components/VirtualWalkthrough/SplatRevealRain.js';
+export { TfAnnotationManager } from './components/VirtualWalkthrough/TfAnnotationManager.js';
+export { TfXrNavigation } from './components/VirtualWalkthrough/TfXrNavigation.js';
+export { default as VirtualWalkthroughViewer } from './components/VirtualWalkthrough/VirtualWalkthroughViewer.js';
+export { BoundaryRingScript, boundaryRingMesh } from './components/VirtualWalkthrough/boundary-ring.js';
+export { computeGroundPlane, yOnPlane } from './components/VirtualWalkthrough/groundPlane.js';
+export { detectSplatFormat, splatLoaderFilename } from './components/VirtualWalkthrough/splatFormat.js';
+export { WalkthroughCamera } from './components/VirtualWalkthrough/walkthrough-camera.js';
+export { useDevicePerformance } from './hooks/useDevicePerformance.js';