dce-reactkit 3.5.12 → 3.5.14

package/dist/esm/types/helpers/getPartOfDay.d.ts

@@ -1,6 +1,7 @@
 /**
  * Get the current part of day (morning, evening, etc.)
  * @author Gabe Abrams
+ * @returns the part of day (morning, evening, etc.)
  */
 declare const getPartOfDay: () => string;
 export default getPartOfDay;

package/dist/esm/types/helpers/makeLinksClickable.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+/**
+ * Given some text, make the links clickable
+ * @author Gabe Abrams
+ * @param text the text to process
+ * @param [opts] options to customize behavior
+ * @param [opts.newTab] if true, links will open in a new tab
+ * @param [opts.preventPropagation] if true, clicks to link will prevent
+ *   propagation
+ * @param [opts.inheritColor] if true, inherit text color for links
+ * @returns the processed text
+ */
+declare const makeLinksClickable: (text: string, opts?: {
+    newTab?: boolean;
+    preventPropagation?: boolean;
+    inheritColor?: boolean;
+}) => React.ReactNode;
+export default makeLinksClickable;

package/dist/esm/types/index.d.ts

@@ -65,6 +65,7 @@ import validateEmail from './helpers/validators/validateEmail';
 import validatePhoneNumber from './helpers/validators/validatePhoneNumber';
 import validateString from './helpers/validators/validateString';
 import idify from './helpers/idify';
+import makeLinksClickable from './helpers/makeLinksClickable';
 import ModalButtonType from './types/ModalButtonType';
 import ModalSize from './types/ModalSize';
 import ModalType from './types/ModalType';
@@ -83,4 +84,4 @@ import PickableItem from './components/ItemPicker/types/PickableItem';
 import DBEntry from './components/DBEntryManagerPanel/types/DBEntry';
 import DBEntryField from './components/DBEntryManagerPanel/types/DBEntryField';
 import DBEntryFieldType from './components/DBEntryManagerPanel/types/DBEntryFieldType';
-export { AppWrapper, LoadingSpinner, ErrorBox, Modal, TabBox, RadioButton, CheckboxButton, ButtonInputGroup, SimpleDateChooser, Drawer, PopSuccessMark, PopFailureMark, PopPendingMark, CopiableBox, ItemPicker, LogReviewer, IntelliTable, CSVDownloadButton, DBEntryManagerPanel, Tooltip, ToggleSwitch, AutoscrollToBottomContainer, alert, confirm, showFatalError, ErrorWithCode, MINUTE_IN_MS, HOUR_IN_MS, DAY_IN_MS, DynamicWord, abbreviate, avg, ceilToNumDecimals, floorToNumDecimals, forceNumIntoBounds, padDecimalZeros, padZerosLeft, roundToNumDecimals, sum, waitMs, getOrdinal, getTimeInfoInET, stubServerEndpoint, startMinWait, getHumanReadableDate, getPartOfDay, stringsToHumanReadableList, onlyKeepLetters, parallelLimit, getMonthName, genCSV, canReviewLogs, isMobileOrTablet, extractProp, compareArraysByProp, genCommaList, validateEmail, validatePhoneNumber, validateString, getLocalTimeInfo, idify, initClient, visitServerEndpoint, logClientEvent, addFatalErrorHandler, leaveToURL, initServer, genRouteHandler, handleError, handleSuccess, initLogCollection, addDBEditorEndpoints, ModalButtonType, ModalSize, ModalType, ReactKitErrorCode, Variant, DayOfWeek, Log, LogType, LogSource, LogAction, LogBuiltInMetadata, LogMetadataType, IntelliTableColumn, PickableItem, DBEntry, DBEntryField, DBEntryFieldType, ParamType, };
+export { AppWrapper, LoadingSpinner, ErrorBox, Modal, TabBox, RadioButton, CheckboxButton, ButtonInputGroup, SimpleDateChooser, Drawer, PopSuccessMark, PopFailureMark, PopPendingMark, CopiableBox, ItemPicker, LogReviewer, IntelliTable, CSVDownloadButton, DBEntryManagerPanel, Tooltip, ToggleSwitch, AutoscrollToBottomContainer, alert, confirm, showFatalError, ErrorWithCode, MINUTE_IN_MS, HOUR_IN_MS, DAY_IN_MS, DynamicWord, abbreviate, avg, ceilToNumDecimals, floorToNumDecimals, forceNumIntoBounds, padDecimalZeros, padZerosLeft, roundToNumDecimals, sum, waitMs, getOrdinal, getTimeInfoInET, stubServerEndpoint, startMinWait, getHumanReadableDate, getPartOfDay, stringsToHumanReadableList, onlyKeepLetters, parallelLimit, getMonthName, genCSV, canReviewLogs, isMobileOrTablet, extractProp, compareArraysByProp, genCommaList, validateEmail, validatePhoneNumber, validateString, getLocalTimeInfo, idify, makeLinksClickable, initClient, visitServerEndpoint, logClientEvent, addFatalErrorHandler, leaveToURL, initServer, genRouteHandler, handleError, handleSuccess, initLogCollection, addDBEditorEndpoints, ModalButtonType, ModalSize, ModalType, ReactKitErrorCode, Variant, DayOfWeek, Log, LogType, LogSource, LogAction, LogBuiltInMetadata, LogMetadataType, IntelliTableColumn, PickableItem, DBEntry, DBEntryField, DBEntryFieldType, ParamType, };

package/dist/index.d.ts

@@ -1125,6 +1125,7 @@ declare const getHumanReadableDate: (dateOrTimestamp?: Date | number) => string;
 /**
  * Get the current part of day (morning, evening, etc.)
  * @author Gabe Abrams
+ * @returns the part of day (morning, evening, etc.)
  */
 declare const getPartOfDay: () => string;
 
@@ -1372,6 +1373,23 @@ declare const validateString: (input: string, opts: {
  */
 declare const idify: (str: string) => string;
 
+/**
+ * Given some text, make the links clickable
+ * @author Gabe Abrams
+ * @param text the text to process
+ * @param [opts] options to customize behavior
+ * @param [opts.newTab] if true, links will open in a new tab
+ * @param [opts.preventPropagation] if true, clicks to link will prevent
+ *   propagation
+ * @param [opts.inheritColor] if true, inherit text color for links
+ * @returns the processed text
+ */
+declare const makeLinksClickable: (text: string, opts?: {
+    newTab?: boolean;
+    preventPropagation?: boolean;
+    inheritColor?: boolean;
+}) => React.ReactNode;
+
 /**
  * List of error codes built into the react kit
  * @author Gabe Abrams
@@ -1422,4 +1440,4 @@ declare const LogBuiltInMetadata: {
     };
 };
 
-export { AppWrapper, AutoscrollToBottomContainer, ButtonInputGroup, CSVDownloadButton, CheckboxButton, CopiableBox, DAY_IN_MS, DBEntry, DBEntryField, DBEntryFieldType, DBEntryManagerPanel, DayOfWeek, Drawer, DynamicWord, ErrorBox, ErrorWithCode, HOUR_IN_MS, IntelliTable, IntelliTableColumn, ItemPicker, LoadingSpinner, Log, LogAction, LogBuiltInMetadata, LogMetadataType, LogReviewer, LogSource, LogType, MINUTE_IN_MS, Modal, ModalButtonType, ModalSize, ModalType, ParamType, PickableItem, PopFailureMark, PopPendingMark, PopSuccessMark, RadioButton, ReactKitErrorCode, SimpleDateChooser, TabBox, ToggleSwitch, Tooltip, Variant, abbreviate, addDBEditorEndpoints, addFatalErrorHandler, alert, avg, canReviewLogs, ceilToNumDecimals, compareArraysByProp, confirm, extractProp, floorToNumDecimals, forceNumIntoBounds, genCSV, genCommaList, genRouteHandler, getHumanReadableDate, getLocalTimeInfo, getMonthName, getOrdinal, getPartOfDay, getTimeInfoInET, handleError, handleSuccess, idify, initClient, initLogCollection, initServer, isMobileOrTablet, leaveToURL, logClientEvent, onlyKeepLetters, padDecimalZeros, padZerosLeft, parallelLimit, roundToNumDecimals, showFatalError, startMinWait, stringsToHumanReadableList, stubServerEndpoint, sum, validateEmail, validatePhoneNumber, validateString, visitServerEndpoint, waitMs };
+export { AppWrapper, AutoscrollToBottomContainer, ButtonInputGroup, CSVDownloadButton, CheckboxButton, CopiableBox, DAY_IN_MS, DBEntry, DBEntryField, DBEntryFieldType, DBEntryManagerPanel, DayOfWeek, Drawer, DynamicWord, ErrorBox, ErrorWithCode, HOUR_IN_MS, IntelliTable, IntelliTableColumn, ItemPicker, LoadingSpinner, Log, LogAction, LogBuiltInMetadata, LogMetadataType, LogReviewer, LogSource, LogType, MINUTE_IN_MS, Modal, ModalButtonType, ModalSize, ModalType, ParamType, PickableItem, PopFailureMark, PopPendingMark, PopSuccessMark, RadioButton, ReactKitErrorCode, SimpleDateChooser, TabBox, ToggleSwitch, Tooltip, Variant, abbreviate, addDBEditorEndpoints, addFatalErrorHandler, alert, avg, canReviewLogs, ceilToNumDecimals, compareArraysByProp, confirm, extractProp, floorToNumDecimals, forceNumIntoBounds, genCSV, genCommaList, genRouteHandler, getHumanReadableDate, getLocalTimeInfo, getMonthName, getOrdinal, getPartOfDay, getTimeInfoInET, handleError, handleSuccess, idify, initClient, initLogCollection, initServer, isMobileOrTablet, leaveToURL, logClientEvent, makeLinksClickable, onlyKeepLetters, padDecimalZeros, padZerosLeft, parallelLimit, roundToNumDecimals, showFatalError, startMinWait, stringsToHumanReadableList, stubServerEndpoint, sum, validateEmail, validatePhoneNumber, validateString, visitServerEndpoint, waitMs };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dce-reactkit",
-  "version": "3.5.12",
+  "version": "3.5.14",
   "description": "Shared components for Harvard DCE apps",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/helpers/getPartOfDay.ts

@@ -1,11 +1,12 @@
 /**
  * Get the current part of day (morning, evening, etc.)
  * @author Gabe Abrams
+ * @returns the part of day (morning, evening, etc.)
  */
 const getPartOfDay = () => {
   // Setup the post-it time of day
   let partOfDay = 'day';
-  let hours = new Date().getHours();
+  const hours = new Date().getHours();
   if (hours < 12) {
     partOfDay = 'morning';
   } else if (hours >= 12 && hours <= 16) {

package/src/helpers/makeLinksClickable.tsx

@@ -0,0 +1,100 @@
+// Import React
+import React from 'react';
+
+// Regular express that matches urls
+const urlRegex = /(https?:\/\/)?([a-z0-9-]+\.)+[a-z0-9]{2,6}(:[0-9]{1,5})?(\/\S*)?/g;
+
+/**
+ * Given some text, make the links clickable
+ * @author Gabe Abrams
+ * @param text the text to process
+ * @param [opts] options to customize behavior
+ * @param [opts.newTab] if true, links will open in a new tab
+ * @param [opts.preventPropagation] if true, clicks to link will prevent
+ *   propagation
+ * @param [opts.inheritColor] if true, inherit text color for links
+ * @returns the processed text
+ */
+const makeLinksClickable = (
+  text: string,
+  opts?: {
+    newTab?: boolean,
+    preventPropagation?: boolean,
+    inheritColor?: boolean,
+  },
+): React.ReactNode => {
+  // Search text for links
+  let matches = urlRegex.exec(text);
+
+  // If no matches, just return the text
+  if (!matches) {
+    return text;
+  }
+
+  // Check if using new tab
+  const newTab = opts?.newTab;
+
+  // Next element key
+  let nextKey = 0;
+
+  // Process each link
+  const elements: React.ReactNode[] = [];
+  let lastIndex = 0;
+  while (matches) {
+    // Get the link
+    const link = matches[0];
+
+    // Get the index of the link
+    const { index } = matches;
+
+    // Add the text before the link
+    elements.push(
+      <span key={nextKey += 1}>
+        {text.substring(lastIndex, index)}
+      </span>,
+    );
+
+    // Add the link
+    elements.push(
+      <a
+        key={nextKey += 1}
+        href={link}
+        target={newTab ? '_blank' : undefined}
+        rel={newTab ? 'noopener noreferrer' : undefined}
+        style={{
+          textDecoration: 'underline',
+          color: opts?.inheritColor ? 'inherit' : undefined,
+        }}
+        onClick={(e) => {
+          // Prevent propagation if requested
+          if (opts?.preventPropagation) {
+            e.stopPropagation();
+          }
+        }}
+      >
+        {link}
+      </a>,
+    );
+
+    // Update the last index
+    lastIndex = index + link.length;
+
+    // Get the next match
+    matches = urlRegex.exec(text);
+  }
+
+  // Add the last bit of text
+  const remainingText = text.substring(lastIndex);
+  if (remainingText && remainingText.length > 0) {
+    elements.push(
+      <span key={nextKey += 1}>
+        {remainingText}
+      </span>,
+    );
+  }
+
+  // Return the elements
+  return elements;
+};
+
+export default makeLinksClickable;

package/src/index.ts

@@ -80,6 +80,7 @@ import validateEmail from './helpers/validators/validateEmail';
 import validatePhoneNumber from './helpers/validators/validatePhoneNumber';
 import validateString from './helpers/validators/validateString';
 import idify from './helpers/idify';
+import makeLinksClickable from './helpers/makeLinksClickable';
 
 // Import types
 import ModalButtonType from './types/ModalButtonType';
@@ -172,6 +173,7 @@ export {
   validateString,
   getLocalTimeInfo,
   idify,
+  makeLinksClickable,
   // Client helpers
   initClient,
   visitServerEndpoint,