@terraware/web-components 3.5.12-rc.7 → 3.5.12

package/utils/date.test.js

@@ -0,0 +1,87 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _luxon = require("luxon");
+var _date = _interopRequireWildcard(require("./date"));
+test('isInTheFuture should handle date ISO string and specified time zones', () => {
+  expect((0, _date.isInTheFuture)('2023-01-10', 'Asia/Bangkok')).toBe(false);
+  expect((0, _date.isInTheFuture)('2023-01-10', 'America/Los_Angeles')).toBe(false);
+  expect((0, _date.isInTheFuture)('3023-01-10', 'America/Los_Angeles')).toBe(true);
+});
+test('isInTheFuture should handle date ISO string and default time zone', () => {
+  expect((0, _date.isInTheFuture)('2023-01-10')).toBe(false);
+  expect((0, _date.isInTheFuture)('3023-01-10')).toBe(true);
+});
+test('isInTheFuture should handle millis and specified time zones', () => {
+  expect((0, _date.isInTheFuture)(Date.now(), 'Asia/Bangkok')).toBe(false);
+  expect((0, _date.isInTheFuture)(new Date('3023-01-10').getTime(), 'Asia/Bangkok')).toBe(true);
+});
+test('isInTheFuture should handle millis and default time zone', () => {
+  expect((0, _date.isInTheFuture)(Date.now())).toBe(false);
+  expect((0, _date.isInTheFuture)(new Date('3023-01-10').getTime())).toBe(true);
+});
+test('isInTheFuture should handle JS Date object and specified time zones', () => {
+  expect((0, _date.isInTheFuture)(new Date(), 'Asia/Bangkok')).toBe(false);
+  expect((0, _date.isInTheFuture)(new Date('3023-01-10'), 'Asia/Bangkok')).toBe(true);
+});
+test('isInTheFuture should handle JS Date object and default time zone', () => {
+  expect((0, _date.isInTheFuture)(new Date())).toBe(false);
+  expect((0, _date.isInTheFuture)(new Date('3023-01-10'))).toBe(true);
+});
+test('isInTheFuture should handle DateTime object and specified time zones', () => {
+  expect((0, _date.isInTheFuture)(_luxon.DateTime.now(), 'Asia/Bangkok')).toBe(false);
+  expect((0, _date.isInTheFuture)(_luxon.DateTime.fromISO('3023-01-10'), 'Asia/Bangkok')).toBe(true);
+  // check that a DateTime with preset zone is a no-op
+  expect((0, _date.isInTheFuture)(_luxon.DateTime.now().setZone('Asia/Bangkok'), 'Asia/Bangkok')).toBe(false);
+  expect((0, _date.isInTheFuture)(_luxon.DateTime.fromISO('3023-01-10').setZone('Asia/Bangkok'), 'Asia/Bangkok')).toBe(true);
+});
+test('isInTheFuture should handle JS Date object and default time zone', () => {
+  expect((0, _date.isInTheFuture)(_luxon.DateTime.now())).toBe(false);
+  expect((0, _date.isInTheFuture)(_luxon.DateTime.fromISO('3023-01-10'))).toBe(true);
+});
+test('should show todays date formatted for a time zone', () => {
+  const formatted = (0, _date.getTodaysDateFormatted)('Asia/Bangkok');
+  expect(!!formatted.match(/\d\d\d\d-\d\d-\d\d/)).toBe(true);
+});
+test('should show todays date formatted for default time zone', () => {
+  const formatted = (0, _date.getTodaysDateFormatted)();
+  expect(!!formatted.match(/\d\d\d\d-\d\d-\d\d/)).toBe(true);
+});
+test('should return valid date display value for ISO date string with time zones', () => {
+  expect((0, _date.default)('2021-08-05T19:39:16Z', 'America/Los_Angeles')).toBe('2021-08-05');
+  expect((0, _date.default)('2021-08-05T19:39:16Z', 'Asia/Bangkok')).toBe('2021-08-06');
+});
+test('should return valid date display value for ISO date string with default time zone', () => {
+  expect((0, _date.default)('2021-08-05T19:39:16Z')).toBe('2021-08-05');
+});
+test('should return valid date display value for default date ISO string with time zones', () => {
+  expect((0, _date.default)('2021-08-05', 'America/Los_Angeles')).toBe('2021-08-05');
+  expect((0, _date.default)('2021-08-05', 'Asia/Bangkok')).toBe('2021-08-05');
+});
+test('should return valid date display value for default date string with default time zone', () => {
+  expect((0, _date.default)('2021-08-05')).toBe('2021-08-05');
+});
+test('should return valid date display value for millis with default time zone', () => {
+  expect((0, _date.default)(new Date('2021-08-05T19:39:16Z').getTime())).toBe('2021-08-05');
+});
+test('should return valid date display value for JS Date object with default time zone', () => {
+  expect((0, _date.default)(new Date('2021-08-05T19:39:16Z'))).toBe('2021-08-05');
+});
+test('should return valid date display value for DateTime object with default time zone', () => {
+  expect((0, _date.default)(_luxon.DateTime.fromISO('2021-08-05T19:39:16Z'))).toBe('2021-08-05');
+});
+test('should return valid date display value for millis with time zones', () => {
+  expect((0, _date.default)(new Date('2021-08-05T19:39:16Z').getTime(), 'America/Los_Angeles')).toBe('2021-08-05');
+  expect((0, _date.default)(new Date('2021-08-05T19:39:16Z').getTime(), 'Asia/Bangkok')).toBe('2021-08-06');
+});
+test('should return valid date display value for JS Date object with time zones', () => {
+  expect((0, _date.default)(new Date('2021-08-05T19:39:16Z'), 'America/Los_Angeles')).toBe('2021-08-05');
+  expect((0, _date.default)(new Date('2021-08-05T19:39:16Z'), 'Asia/Bangkok')).toBe('2021-08-06');
+});
+test('should return valid date display value for DateTime object with time zones', () => {
+  expect((0, _date.default)(_luxon.DateTime.fromISO('2021-08-05T19:39:16Z'), 'America/Los_Angeles')).toBe('2021-08-05');
+  expect((0, _date.default)(_luxon.DateTime.fromISO('2021-08-05T19:39:16Z'), 'Asia/Bangkok')).toBe('2021-08-06');
+  // check that a DateTime with preset zone is a no-op
+  expect((0, _date.default)(_luxon.DateTime.fromISO('2021-08-05T19:39:16Z').setZone('America/Los_Angeles'), 'America/Los_Angeles')).toBe('2021-08-05');
+  expect((0, _date.default)(_luxon.DateTime.fromISO('2021-08-05T19:39:16Z').setZone('America/Los_Angeles'), 'Asia/Bangkok')).toBe('2021-08-06');
+});

package/utils/index.js

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "getDate", {
+  enumerable: true,
+  get: function () {
+    return _date.getDate;
+  }
+});
+Object.defineProperty(exports, "getDateDisplayValue", {
+  enumerable: true,
+  get: function () {
+    return _date.default;
+  }
+});
+Object.defineProperty(exports, "getTodaysDateFormatted", {
+  enumerable: true,
+  get: function () {
+    return _date.getTodaysDateFormatted;
+  }
+});
+Object.defineProperty(exports, "isInTheFuture", {
+  enumerable: true,
+  get: function () {
+    return _date.isInTheFuture;
+  }
+});
+Object.defineProperty(exports, "isWhitespaces", {
+  enumerable: true,
+  get: function () {
+    return _text.default;
+  }
+});
+Object.defineProperty(exports, "preventDefaultEvent", {
+  enumerable: true,
+  get: function () {
+    return _preventDefaultEvent.default;
+  }
+});
+Object.defineProperty(exports, "useDeviceInfo", {
+  enumerable: true,
+  get: function () {
+    return _useDeviceInfo.default;
+  }
+});
+var _date = _interopRequireWildcard(require("./date"));
+var _preventDefaultEvent = _interopRequireDefault(require("./preventDefaultEvent"));
+var _text = _interopRequireDefault(require("./text"));
+var _useDeviceInfo = _interopRequireDefault(require("./useDeviceInfo"));

package/utils/preventDefaultEvent.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+const preventDefault = event => event.preventDefault();
+var _default = exports.default = preventDefault;

package/utils/text.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.titleCase = exports.default = void 0;
+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(' ');
+exports.titleCase = titleCase;
+var _default = exports.default = isWhitespaces;

package/utils/text.test.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _text = require("./text");
+test('titleCase for a single word', () => {
+  const lowerCaseWord = (0, _text.titleCase)('species');
+  expect(lowerCaseWord === 'Species').toBe(true);
+  const capitalizedWord = (0, _text.titleCase)('Species');
+  expect(capitalizedWord === 'Species').toBe(true);
+  const allCapsWord = (0, _text.titleCase)('SPECIES');
+  expect(allCapsWord === 'SPECIES').toBe(true);
+  const reverseCapWord = (0, _text.titleCase)('sPECIES');
+  expect(reverseCapWord === 'Species').toBe(true);
+});
+test('titleCase for multiple words', () => {
+  const lowerCaseString = (0, _text.titleCase)('common name');
+  expect(lowerCaseString === 'Common Name').toBe(true);
+  const capitalizedString = (0, _text.titleCase)('Common Name');
+  expect(capitalizedString === 'Common Name').toBe(true);
+  const allCapsString = (0, _text.titleCase)('common NAME');
+  expect(allCapsString === 'Common NAME').toBe(true);
+  const reverseCapString = (0, _text.titleCase)('cOMMON nAME');
+  expect(reverseCapString === 'Common Name').toBe(true);
+});

package/utils/useDeviceInfo.js

@@ -0,0 +1,85 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _reactResponsive = require("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 = function () {
+  let {
+    onChange
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const deviceChangeCallback = matches => {
+    if (matches && onChange) {
+      onChange();
+    }
+  };
+  const isDesktop = (0, _reactResponsive.useMediaQuery)({
+    minWidth: 1024
+  }, undefined, deviceChangeCallback);
+  const isTablet = (0, _reactResponsive.useMediaQuery)({
+    maxWidth: 1023,
+    minWidth: 768
+  }, undefined, deviceChangeCallback);
+  const isMobile = (0, _reactResponsive.useMediaQuery)({
+    maxWidth: 767
+  }, undefined, deviceChangeCallback);
+  const isPortrait = (0, _reactResponsive.useMediaQuery)({
+    orientation: 'portrait'
+  }, undefined, deviceChangeCallback);
+  const isRetina = (0, _reactResponsive.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
+  };
+};
+var _default = exports.default = useDeviceInfo;