chore(utils): copy helper functions from web/helpers (#6264)
* chore(utils): copy helper functions from web/helpers Co-Authored-By: sriram@plane.so <sriram@plane.so> * chore(utils): bump version to 0.24.2 Co-Authored-By: sriram@plane.so <sriram@plane.so> * chore: bump root package version to 0.24.2 Co-Authored-By: sriram@plane.so <sriram@plane.so> * fix: remove duplicate function and simplify auth utils Co-Authored-By: sriram@plane.so <sriram@plane.so> * fix: improve HTML entity escaping in sanitizeHTML Co-Authored-By: sriram@plane.so <sriram@plane.so> * fix: version changes --------- Co-authored-by: sriram veeraghanta <veeraghanta.sriram@gmail.com> Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Co-authored-by: sriram@plane.so <sriram@plane.so>
This commit is contained in:
devin-ai-integration[bot]
GitHub
parent
f54f3a6091
commit
ed64168ca7
8 changed files with 800 additions and 50 deletions
|
|
@ -7,7 +7,7 @@ export enum E_PASSWORD_STRENGTH {
|
||||||
|
|
||||||
export const PASSWORD_MIN_LENGTH = 8;
|
export const PASSWORD_MIN_LENGTH = 8;
|
||||||
|
|
||||||
export const PASSWORD_CRITERIA = [
|
export const SPACE_PASSWORD_CRITERIA = [
|
||||||
{
|
{
|
||||||
key: "min_8_char",
|
key: "min_8_char",
|
||||||
label: "Min 8 characters",
|
label: "Min 8 characters",
|
||||||
|
|
|
||||||
|
|
@ -18,6 +18,7 @@
|
||||||
"clsx": "^2.1.1",
|
"clsx": "^2.1.1",
|
||||||
"date-fns": "^4.1.0",
|
"date-fns": "^4.1.0",
|
||||||
"isomorphic-dompurify": "^2.16.0",
|
"isomorphic-dompurify": "^2.16.0",
|
||||||
|
"lodash": "^4.17.21",
|
||||||
"react": "^18.3.1",
|
"react": "^18.3.1",
|
||||||
"tailwind-merge": "^2.5.5",
|
"tailwind-merge": "^2.5.5",
|
||||||
"zxcvbn": "^4.4.2"
|
"zxcvbn": "^4.4.2"
|
||||||
|
|
|
||||||
197
packages/utils/src/array.ts
Normal file
197
packages/utils/src/array.ts
Normal file
|
|
@ -0,0 +1,197 @@
|
||||||
|
import isEmpty from "lodash/isEmpty";
|
||||||
|
import { IIssueLabel, IIssueLabelTree } from "@plane/types";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description Groups an array of objects by a specified key
|
||||||
|
* @param {any[]} array Array to group
|
||||||
|
* @param {string} key Key to group by (supports dot notation for nested objects)
|
||||||
|
* @returns {Object} Grouped object with keys being the grouped values
|
||||||
|
* @example
|
||||||
|
* const array = [{type: 'A', value: 1}, {type: 'B', value: 2}, {type: 'A', value: 3}];
|
||||||
|
* groupBy(array, 'type') // returns { A: [{type: 'A', value: 1}, {type: 'A', value: 3}], B: [{type: 'B', value: 2}] }
|
||||||
|
*/
|
||||||
|
export const groupBy = (array: any[], key: string) => {
|
||||||
|
const innerKey = key.split("."); // split the key by dot
|
||||||
|
return array.reduce((result, currentValue) => {
|
||||||
|
const key = innerKey.reduce((obj, i) => obj?.[i], currentValue) ?? "None"; // get the value of the inner key
|
||||||
|
(result[key] = result[key] || []).push(currentValue);
|
||||||
|
return result;
|
||||||
|
}, {});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description Orders an array by a specified key in ascending or descending order
|
||||||
|
* @param {any[]} orgArray Original array to order
|
||||||
|
* @param {string} key Key to order by (supports dot notation for nested objects)
|
||||||
|
* @param {"ascending" | "descending"} ordering Sort order
|
||||||
|
* @returns {any[]} Ordered array
|
||||||
|
* @example
|
||||||
|
* const array = [{value: 2}, {value: 1}, {value: 3}];
|
||||||
|
* orderArrayBy(array, 'value', 'ascending') // returns [{value: 1}, {value: 2}, {value: 3}]
|
||||||
|
*/
|
||||||
|
export const orderArrayBy = (orgArray: any[], key: string, ordering: "ascending" | "descending" = "ascending") => {
|
||||||
|
if (!orgArray || !Array.isArray(orgArray) || orgArray.length === 0) return [];
|
||||||
|
|
||||||
|
const array = [...orgArray];
|
||||||
|
|
||||||
|
if (key[0] === "-") {
|
||||||
|
ordering = "descending";
|
||||||
|
key = key.slice(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
const innerKey = key.split("."); // split the key by dot
|
||||||
|
|
||||||
|
return array.sort((a, b) => {
|
||||||
|
const keyA = innerKey.reduce((obj, i) => obj[i], a); // get the value of the inner key
|
||||||
|
const keyB = innerKey.reduce((obj, i) => obj[i], b); // get the value of the inner key
|
||||||
|
if (keyA < keyB) {
|
||||||
|
return ordering === "ascending" ? -1 : 1;
|
||||||
|
}
|
||||||
|
if (keyA > keyB) {
|
||||||
|
return ordering === "ascending" ? 1 : -1;
|
||||||
|
}
|
||||||
|
return 0;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description Checks if an array contains duplicate values
|
||||||
|
* @param {any[]} array Array to check for duplicates
|
||||||
|
* @returns {boolean} True if duplicates exist, false otherwise
|
||||||
|
* @example
|
||||||
|
* checkDuplicates([1, 2, 2, 3]) // returns true
|
||||||
|
* checkDuplicates([1, 2, 3]) // returns false
|
||||||
|
*/
|
||||||
|
export const checkDuplicates = (array: any[]) => new Set(array).size !== array.length;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description Finds the string with the most characters in an array of strings
|
||||||
|
* @param {string[]} strings Array of strings to check
|
||||||
|
* @returns {string} String with the most characters
|
||||||
|
* @example
|
||||||
|
* findStringWithMostCharacters(['a', 'bb', 'ccc']) // returns 'ccc'
|
||||||
|
*/
|
||||||
|
export const findStringWithMostCharacters = (strings: string[]): string => {
|
||||||
|
if (!strings || strings.length === 0) return "";
|
||||||
|
|
||||||
|
return strings.reduce((longestString, currentString) =>
|
||||||
|
currentString.length > longestString.length ? currentString : longestString
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description Checks if two arrays have the same elements regardless of order
|
||||||
|
* @param {any[] | null} arr1 First array
|
||||||
|
* @param {any[] | null} arr2 Second array
|
||||||
|
* @returns {boolean} True if arrays have same elements, false otherwise
|
||||||
|
* @example
|
||||||
|
* checkIfArraysHaveSameElements([1, 2], [2, 1]) // returns true
|
||||||
|
* checkIfArraysHaveSameElements([1, 2], [1, 3]) // returns false
|
||||||
|
*/
|
||||||
|
export const checkIfArraysHaveSameElements = (arr1: any[] | null, arr2: any[] | null): boolean => {
|
||||||
|
if (!arr1 || !arr2) return false;
|
||||||
|
if (!Array.isArray(arr1) || !Array.isArray(arr2)) return false;
|
||||||
|
if (arr1.length === 0 && arr2.length === 0) return true;
|
||||||
|
|
||||||
|
return arr1.length === arr2.length && arr1.every((e) => arr2.includes(e));
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
type GroupedItems<T> = { [key: string]: T[] };
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description Groups an array of objects by a specified field
|
||||||
|
* @param {T[]} array Array to group
|
||||||
|
* @param {keyof T} field Field to group by
|
||||||
|
* @returns {GroupedItems<T>} Grouped object
|
||||||
|
* @example
|
||||||
|
* const array = [{type: 'A', value: 1}, {type: 'B', value: 2}];
|
||||||
|
* groupByField(array, 'type') // returns { A: [{type: 'A', value: 1}], B: [{type: 'B', value: 2}] }
|
||||||
|
*/
|
||||||
|
export const groupByField = <T>(array: T[], field: keyof T): GroupedItems<T> =>
|
||||||
|
array.reduce((grouped: GroupedItems<T>, item: T) => {
|
||||||
|
const key = String(item[field]);
|
||||||
|
grouped[key] = (grouped[key] || []).concat(item);
|
||||||
|
return grouped;
|
||||||
|
}, {});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description Sorts an array of objects by a specified field
|
||||||
|
* @param {any[]} array Array to sort
|
||||||
|
* @param {string} field Field to sort by
|
||||||
|
* @returns {any[]} Sorted array
|
||||||
|
* @example
|
||||||
|
* const array = [{value: 2}, {value: 1}];
|
||||||
|
* sortByField(array, 'value') // returns [{value: 1}, {value: 2}]
|
||||||
|
*/
|
||||||
|
export const sortByField = (array: any[], field: string): any[] =>
|
||||||
|
array.sort((a, b) => (a[field] < b[field] ? -1 : a[field] > b[field] ? 1 : 0));
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description Orders grouped data by a specified field
|
||||||
|
* @param {GroupedItems<T>} groupedData Grouped data object
|
||||||
|
* @param {keyof T} orderBy Field to order by
|
||||||
|
* @returns {GroupedItems<T>} Ordered grouped data
|
||||||
|
*/
|
||||||
|
export const orderGroupedDataByField = <T>(groupedData: GroupedItems<T>, orderBy: keyof T): GroupedItems<T> => {
|
||||||
|
for (const key in groupedData) {
|
||||||
|
if (groupedData.hasOwnProperty(key)) {
|
||||||
|
groupedData[key] = groupedData[key].sort((a, b) => {
|
||||||
|
if (a[orderBy] < b[orderBy]) return -1;
|
||||||
|
if (a[orderBy] > b[orderBy]) return 1;
|
||||||
|
return 0;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return groupedData;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description Builds a tree structure from an array of labels
|
||||||
|
* @param {IIssueLabel[]} array Array of labels
|
||||||
|
* @param {any} parent Parent ID
|
||||||
|
* @returns {IIssueLabelTree[]} Tree structure
|
||||||
|
*/
|
||||||
|
export const buildTree = (array: IIssueLabel[], parent = null) => {
|
||||||
|
const tree: IIssueLabelTree[] = [];
|
||||||
|
|
||||||
|
array.forEach((item: any) => {
|
||||||
|
if (item.parent === parent) {
|
||||||
|
const children = buildTree(array, item.id);
|
||||||
|
item.children = children;
|
||||||
|
tree.push(item);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return tree;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description Returns valid keys from object whose value is not falsy
|
||||||
|
* @param {any} obj Object to check
|
||||||
|
* @returns {string[]} Array of valid keys
|
||||||
|
* @example
|
||||||
|
* getValidKeysFromObject({a: 1, b: 0, c: null}) // returns ['a']
|
||||||
|
*/
|
||||||
|
export const getValidKeysFromObject = (obj: any) => {
|
||||||
|
if (!obj || isEmpty(obj) || typeof obj !== "object" || Array.isArray(obj)) return [];
|
||||||
|
|
||||||
|
return Object.keys(obj).filter((key) => !!obj[key]);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description Converts an array of strings into an object with boolean true values
|
||||||
|
* @param {string[]} arrayStrings Array of strings
|
||||||
|
* @returns {Object} Object with string keys and boolean values
|
||||||
|
* @example
|
||||||
|
* convertStringArrayToBooleanObject(['a', 'b']) // returns {a: true, b: true}
|
||||||
|
*/
|
||||||
|
export const convertStringArrayToBooleanObject = (arrayStrings: string[]) => {
|
||||||
|
const obj: { [key: string]: boolean } = {};
|
||||||
|
|
||||||
|
for (const arrayString of arrayStrings) {
|
||||||
|
obj[arrayString] = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
return obj;
|
||||||
|
};
|
||||||
|
|
@ -1,8 +1,71 @@
|
||||||
import { ReactNode } from "react";
|
import { ReactNode } from "react";
|
||||||
import zxcvbn from "zxcvbn";
|
import zxcvbn from "zxcvbn";
|
||||||
import { E_PASSWORD_STRENGTH, PASSWORD_CRITERIA, PASSWORD_MIN_LENGTH } from "@plane/constants";
|
import {
|
||||||
|
E_PASSWORD_STRENGTH,
|
||||||
|
SPACE_PASSWORD_CRITERIA,
|
||||||
|
PASSWORD_MIN_LENGTH,
|
||||||
|
EErrorAlertType,
|
||||||
|
EAuthErrorCodes,
|
||||||
|
} from "@plane/constants";
|
||||||
|
|
||||||
import { EPageTypes, EErrorAlertType, EAuthErrorCodes } from "@plane/constants";
|
/**
|
||||||
|
* @description Password strength levels
|
||||||
|
*/
|
||||||
|
export enum PasswordStrength {
|
||||||
|
EMPTY = "empty",
|
||||||
|
WEAK = "weak",
|
||||||
|
FAIR = "fair",
|
||||||
|
GOOD = "good",
|
||||||
|
STRONG = "strong",
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description Password strength criteria type
|
||||||
|
*/
|
||||||
|
export type PasswordCriterion = {
|
||||||
|
regex: RegExp;
|
||||||
|
description: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description Password strength criteria
|
||||||
|
*/
|
||||||
|
export const PASSWORD_CRITERIA: PasswordCriterion[] = [
|
||||||
|
{ regex: /[a-z]/, description: "lowercase" },
|
||||||
|
{ regex: /[A-Z]/, description: "uppercase" },
|
||||||
|
{ regex: /[0-9]/, description: "number" },
|
||||||
|
{ regex: /[^a-zA-Z0-9]/, description: "special character" },
|
||||||
|
];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description Checks if password meets all criteria
|
||||||
|
* @param {string} password - Password to check
|
||||||
|
* @returns {boolean} Whether password meets all criteria
|
||||||
|
*/
|
||||||
|
export const checkPasswordCriteria = (password: string): boolean =>
|
||||||
|
PASSWORD_CRITERIA.every((criterion) => criterion.regex.test(password));
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description Checks password strength against criteria
|
||||||
|
* @param {string} password - Password to check
|
||||||
|
* @returns {PasswordStrength} Password strength level
|
||||||
|
* @example
|
||||||
|
* checkPasswordStrength("abc") // returns PasswordStrength.WEAK
|
||||||
|
* checkPasswordStrength("Abc123!@#") // returns PasswordStrength.STRONG
|
||||||
|
*/
|
||||||
|
export const checkPasswordStrength = (password: string): PasswordStrength => {
|
||||||
|
if (!password || password.length === 0) return PasswordStrength.EMPTY;
|
||||||
|
if (password.length < PASSWORD_MIN_LENGTH) return PasswordStrength.WEAK;
|
||||||
|
|
||||||
|
const criteriaCount = PASSWORD_CRITERIA.filter((criterion) => criterion.regex.test(password)).length;
|
||||||
|
|
||||||
|
const zxcvbnScore = zxcvbn(password).score;
|
||||||
|
|
||||||
|
if (criteriaCount <= 1 || zxcvbnScore <= 1) return PasswordStrength.WEAK;
|
||||||
|
if (criteriaCount === 2 || zxcvbnScore === 2) return PasswordStrength.FAIR;
|
||||||
|
if (criteriaCount === 3 || zxcvbnScore === 3) return PasswordStrength.GOOD;
|
||||||
|
return PasswordStrength.STRONG;
|
||||||
|
};
|
||||||
|
|
||||||
export type TAuthErrorInfo = {
|
export type TAuthErrorInfo = {
|
||||||
type: EErrorAlertType;
|
type: EErrorAlertType;
|
||||||
|
|
@ -26,9 +89,9 @@ export const getPasswordStrength = (password: string): E_PASSWORD_STRENGTH => {
|
||||||
return passwordStrength;
|
return passwordStrength;
|
||||||
}
|
}
|
||||||
|
|
||||||
const passwordCriteriaValidation = PASSWORD_CRITERIA.map((criteria) => criteria.isCriteriaValid(password)).every(
|
const passwordCriteriaValidation = SPACE_PASSWORD_CRITERIA.map((criteria) =>
|
||||||
(criterion) => criterion
|
criteria.isCriteriaValid(password)
|
||||||
);
|
).every((criterion) => criterion);
|
||||||
const passwordStrengthScore = zxcvbn(password).score;
|
const passwordStrengthScore = zxcvbn(password).score;
|
||||||
|
|
||||||
if (passwordCriteriaValidation === false || passwordStrengthScore <= 2) {
|
if (passwordCriteriaValidation === false || passwordStrengthScore <= 2) {
|
||||||
|
|
@ -76,7 +139,7 @@ const errorCodeMessages: {
|
||||||
// sign up
|
// sign up
|
||||||
[EAuthErrorCodes.USER_ALREADY_EXIST]: {
|
[EAuthErrorCodes.USER_ALREADY_EXIST]: {
|
||||||
title: `User already exists`,
|
title: `User already exists`,
|
||||||
message: (email = undefined) => `Your account is already registered. Sign in now.`,
|
message: () => `Your account is already registered. Sign in now.`,
|
||||||
},
|
},
|
||||||
[EAuthErrorCodes.REQUIRED_EMAIL_PASSWORD_SIGN_UP]: {
|
[EAuthErrorCodes.REQUIRED_EMAIL_PASSWORD_SIGN_UP]: {
|
||||||
title: `Email and password required`,
|
title: `Email and password required`,
|
||||||
|
|
|
||||||
|
|
@ -8,9 +8,13 @@
|
||||||
export type RGB = { r: number; g: number; b: number };
|
export type RGB = { r: number; g: number; b: number };
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Validates and clamps color values to RGB range (0-255)
|
* @description Validates and clamps color values to RGB range (0-255)
|
||||||
* @param {number} value - The color value to validate
|
* @param {number} value - The color value to validate
|
||||||
* @returns {number} Clamped and floored value between 0-255
|
* @returns {number} Clamped and floored value between 0-255
|
||||||
|
* @example
|
||||||
|
* validateColor(-10) // returns 0
|
||||||
|
* validateColor(300) // returns 255
|
||||||
|
* validateColor(128) // returns 128
|
||||||
*/
|
*/
|
||||||
export const validateColor = (value: number) => {
|
export const validateColor = (value: number) => {
|
||||||
if (value < 0) return 0;
|
if (value < 0) return 0;
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
import { format, isValid } from "date-fns";
|
import { differenceInDays, format, formatDistanceToNow, isAfter, isEqual, isValid, parseISO } from "date-fns";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* This method returns a date from string of type yyyy-mm-dd
|
* This method returns a date from string of type yyyy-mm-dd
|
||||||
|
|
@ -31,16 +31,305 @@ export const getDate = (date: string | Date | undefined | null): Date | undefine
|
||||||
* @param {Date | string} date
|
* @param {Date | string} date
|
||||||
* @example renderFormattedDate("2024-01-01") // Jan 01, 2024
|
* @example renderFormattedDate("2024-01-01") // Jan 01, 2024
|
||||||
*/
|
*/
|
||||||
export const renderFormattedDate = (date: string | Date | undefined | null): string | null => {
|
/**
|
||||||
|
* @description Returns date in the formatted format
|
||||||
|
* @param {Date | string} date Date to format
|
||||||
|
* @param {string} formatToken Format token (optional, default: MMM dd, yyyy)
|
||||||
|
* @returns {string | undefined} Formatted date in the desired format
|
||||||
|
* @example
|
||||||
|
* renderFormattedDate("2024-01-01") // returns "Jan 01, 2024"
|
||||||
|
* renderFormattedDate("2024-01-01", "MM-DD-YYYY") // returns "01-01-2024"
|
||||||
|
*/
|
||||||
|
export const renderFormattedDate = (
|
||||||
|
date: string | Date | undefined | null,
|
||||||
|
formatToken: string = "MMM dd, yyyy"
|
||||||
|
): string | undefined => {
|
||||||
// Parse the date to check if it is valid
|
// Parse the date to check if it is valid
|
||||||
const parsedDate = getDate(date);
|
const parsedDate = getDate(date);
|
||||||
// return if undefined
|
// return if undefined
|
||||||
if (!parsedDate) return null;
|
if (!parsedDate) return;
|
||||||
// Check if the parsed date is valid before formatting
|
// Check if the parsed date is valid before formatting
|
||||||
if (!isValid(parsedDate)) return null; // Return null for invalid dates
|
if (!isValid(parsedDate)) return; // Return undefined for invalid dates
|
||||||
// Format the date in format (MMM dd, yyyy)
|
let formattedDate;
|
||||||
const formattedDate = format(parsedDate, "MMM dd, yyyy");
|
try {
|
||||||
|
// Format the date in the format provided or default format (MMM dd, yyyy)
|
||||||
|
formattedDate = format(parsedDate, formatToken);
|
||||||
|
} catch (e) {
|
||||||
|
// Format the date in format (MMM dd, yyyy) in case of any error
|
||||||
|
formattedDate = format(parsedDate, "MMM dd, yyyy");
|
||||||
|
}
|
||||||
return formattedDate;
|
return formattedDate;
|
||||||
};
|
};
|
||||||
|
|
||||||
// Note: timeAgo function was incomplete in the original file, so it has been omitted
|
/**
|
||||||
|
* @description Returns total number of days in range
|
||||||
|
* @param {string | Date} startDate - Start date
|
||||||
|
* @param {string | Date} endDate - End date
|
||||||
|
* @param {boolean} inclusive - Include start and end dates (optional, default: true)
|
||||||
|
* @returns {number | undefined} Total number of days
|
||||||
|
* @example
|
||||||
|
* findTotalDaysInRange("2024-01-01", "2024-01-08") // returns 8
|
||||||
|
*/
|
||||||
|
export const findTotalDaysInRange = (
|
||||||
|
startDate: Date | string | undefined | null,
|
||||||
|
endDate: Date | string | undefined | null,
|
||||||
|
inclusive: boolean = true
|
||||||
|
): number | undefined => {
|
||||||
|
// Parse the dates to check if they are valid
|
||||||
|
const parsedStartDate = getDate(startDate);
|
||||||
|
const parsedEndDate = getDate(endDate);
|
||||||
|
// return if undefined
|
||||||
|
if (!parsedStartDate || !parsedEndDate) return;
|
||||||
|
// Check if the parsed dates are valid before calculating the difference
|
||||||
|
if (!isValid(parsedStartDate) || !isValid(parsedEndDate)) return 0; // Return 0 for invalid dates
|
||||||
|
// Calculate the difference in days
|
||||||
|
const diffInDays = differenceInDays(parsedEndDate, parsedStartDate);
|
||||||
|
// Return the difference in days based on inclusive flag
|
||||||
|
return inclusive ? diffInDays + 1 : diffInDays;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description Add number of days to the provided date
|
||||||
|
* @param {string | Date} startDate - Start date
|
||||||
|
* @param {number} numberOfDays - Number of days to add
|
||||||
|
* @returns {Date | undefined} Resulting date
|
||||||
|
* @example
|
||||||
|
* addDaysToDate("2024-01-01", 7) // returns Date(2024-01-08)
|
||||||
|
*/
|
||||||
|
export const addDaysToDate = (startDate: Date | string | undefined | null, numberOfDays: number): Date | undefined => {
|
||||||
|
// Parse the dates to check if they are valid
|
||||||
|
const parsedStartDate = getDate(startDate);
|
||||||
|
// return if undefined
|
||||||
|
if (!parsedStartDate) return;
|
||||||
|
const newDate = new Date(parsedStartDate);
|
||||||
|
newDate.setDate(newDate.getDate() + numberOfDays);
|
||||||
|
return newDate;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description Returns number of days left from today
|
||||||
|
* @param {string | Date} date - Target date
|
||||||
|
* @param {boolean} inclusive - Include today (optional, default: true)
|
||||||
|
* @returns {number | undefined} Number of days left
|
||||||
|
* @example
|
||||||
|
* findHowManyDaysLeft("2024-01-08") // returns days between today and Jan 8, 2024
|
||||||
|
*/
|
||||||
|
export const findHowManyDaysLeft = (
|
||||||
|
date: Date | string | undefined | null,
|
||||||
|
inclusive: boolean = true
|
||||||
|
): number | undefined => {
|
||||||
|
if (!date) return undefined;
|
||||||
|
return findTotalDaysInRange(new Date(), date, inclusive);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description Returns time passed since the event happened
|
||||||
|
* @param {string | number | Date} time - Time to calculate from
|
||||||
|
* @returns {string} Formatted time ago string
|
||||||
|
* @example
|
||||||
|
* calculateTimeAgo("2023-01-01") // returns "1 year ago"
|
||||||
|
*/
|
||||||
|
export const calculateTimeAgo = (time: string | number | Date | null): string => {
|
||||||
|
if (!time) return "";
|
||||||
|
const parsedTime = typeof time === "string" || typeof time === "number" ? parseISO(String(time)) : time;
|
||||||
|
if (!parsedTime) return "";
|
||||||
|
const distance = formatDistanceToNow(parsedTime, { addSuffix: true });
|
||||||
|
return distance;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description Returns short form of time passed (e.g., 1y, 2mo, 3d)
|
||||||
|
* @param {string | number | Date} date - Date to calculate from
|
||||||
|
* @returns {string} Short form time ago
|
||||||
|
* @example
|
||||||
|
* calculateTimeAgoShort("2023-01-01") // returns "1y"
|
||||||
|
*/
|
||||||
|
export const calculateTimeAgoShort = (date: string | number | Date | null): string => {
|
||||||
|
if (!date) return "";
|
||||||
|
|
||||||
|
const parsedDate = typeof date === "string" ? parseISO(date) : new Date(date);
|
||||||
|
const now = new Date();
|
||||||
|
const diffInSeconds = (now.getTime() - parsedDate.getTime()) / 1000;
|
||||||
|
|
||||||
|
if (diffInSeconds < 60) return `${Math.floor(diffInSeconds)}s`;
|
||||||
|
const diffInMinutes = diffInSeconds / 60;
|
||||||
|
if (diffInMinutes < 60) return `${Math.floor(diffInMinutes)}m`;
|
||||||
|
const diffInHours = diffInMinutes / 60;
|
||||||
|
if (diffInHours < 24) return `${Math.floor(diffInHours)}h`;
|
||||||
|
const diffInDays = diffInHours / 24;
|
||||||
|
if (diffInDays < 30) return `${Math.floor(diffInDays)}d`;
|
||||||
|
const diffInMonths = diffInDays / 30;
|
||||||
|
if (diffInMonths < 12) return `${Math.floor(diffInMonths)}mo`;
|
||||||
|
const diffInYears = diffInMonths / 12;
|
||||||
|
return `${Math.floor(diffInYears)}y`;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description Checks if a date is greater than today
|
||||||
|
* @param {string} dateStr - Date string to check
|
||||||
|
* @returns {boolean} True if date is greater than today
|
||||||
|
* @example
|
||||||
|
* isDateGreaterThanToday("2024-12-31") // returns true
|
||||||
|
*/
|
||||||
|
export const isDateGreaterThanToday = (dateStr: string): boolean => {
|
||||||
|
if (!dateStr) return false;
|
||||||
|
const date = parseISO(dateStr);
|
||||||
|
const today = new Date();
|
||||||
|
if (!isValid(date)) return false;
|
||||||
|
return isAfter(date, today);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description Returns week number of date
|
||||||
|
* @param {Date} date - Date to get week number from
|
||||||
|
* @returns {number} Week number (1-52)
|
||||||
|
* @example
|
||||||
|
* getWeekNumberOfDate(new Date("2023-09-01")) // returns 35
|
||||||
|
*/
|
||||||
|
export const getWeekNumberOfDate = (date: Date): number => {
|
||||||
|
const currentDate = date;
|
||||||
|
const startDate = new Date(currentDate.getFullYear(), 0, 1);
|
||||||
|
const days = Math.floor((currentDate.getTime() - startDate.getTime()) / (24 * 60 * 60 * 1000));
|
||||||
|
const weekNumber = Math.ceil((days + 1) / 7);
|
||||||
|
return weekNumber;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description Checks if two dates are equal
|
||||||
|
* @param {Date | string} date1 - First date
|
||||||
|
* @param {Date | string} date2 - Second date
|
||||||
|
* @returns {boolean} True if dates are equal
|
||||||
|
* @example
|
||||||
|
* checkIfDatesAreEqual("2024-01-01", "2024-01-01") // returns true
|
||||||
|
*/
|
||||||
|
export const checkIfDatesAreEqual = (
|
||||||
|
date1: Date | string | null | undefined,
|
||||||
|
date2: Date | string | null | undefined
|
||||||
|
): boolean => {
|
||||||
|
const parsedDate1 = getDate(date1);
|
||||||
|
const parsedDate2 = getDate(date2);
|
||||||
|
if (!parsedDate1 && !parsedDate2) return true;
|
||||||
|
if (!parsedDate1 || !parsedDate2) return false;
|
||||||
|
return isEqual(parsedDate1, parsedDate2);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description Checks if a string matches date format YYYY-MM-DD
|
||||||
|
* @param {string} date - Date string to check
|
||||||
|
* @returns {boolean} True if string matches date format
|
||||||
|
* @example
|
||||||
|
* isInDateFormat("2024-01-01") // returns true
|
||||||
|
*/
|
||||||
|
export const isInDateFormat = (date: string): boolean => {
|
||||||
|
const datePattern = /^\d{4}-\d{2}-\d{2}$/;
|
||||||
|
return datePattern.test(date);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description Converts date string to ISO format
|
||||||
|
* @param {string} dateString - Date string to convert
|
||||||
|
* @returns {string | undefined} ISO date string
|
||||||
|
* @example
|
||||||
|
* convertToISODateString("2024-01-01") // returns "2024-01-01T00:00:00.000Z"
|
||||||
|
*/
|
||||||
|
export const convertToISODateString = (dateString: string | undefined): string | undefined => {
|
||||||
|
if (!dateString) return dateString;
|
||||||
|
const date = new Date(dateString);
|
||||||
|
return date.toISOString();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description Converts date string to epoch timestamp
|
||||||
|
* @param {string} dateString - Date string to convert
|
||||||
|
* @returns {number | undefined} Epoch timestamp
|
||||||
|
* @example
|
||||||
|
* convertToEpoch("2024-01-01") // returns 1704067200000
|
||||||
|
*/
|
||||||
|
export const convertToEpoch = (dateString: string | undefined): number | undefined => {
|
||||||
|
if (!dateString) return undefined;
|
||||||
|
const date = new Date(dateString);
|
||||||
|
return date.getTime();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description Gets current date time in ISO format
|
||||||
|
* @returns {string} Current date time in ISO format
|
||||||
|
* @example
|
||||||
|
* getCurrentDateTimeInISO() // returns "2024-01-01T12:00:00.000Z"
|
||||||
|
*/
|
||||||
|
export const getCurrentDateTimeInISO = (): string => {
|
||||||
|
const date = new Date();
|
||||||
|
return date.toISOString();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description Converts hours and minutes to total minutes
|
||||||
|
* @param {number} hours - Number of hours
|
||||||
|
* @param {number} minutes - Number of minutes
|
||||||
|
* @returns {number} Total minutes
|
||||||
|
* @example
|
||||||
|
* convertHoursMinutesToMinutes(2, 30) // returns 150
|
||||||
|
*/
|
||||||
|
export const convertHoursMinutesToMinutes = (hours: number, minutes: number): number => hours * 60 + minutes;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description Converts total minutes to hours and minutes
|
||||||
|
* @param {number} mins - Total minutes
|
||||||
|
* @returns {{ hours: number; minutes: number }} Hours and minutes
|
||||||
|
* @example
|
||||||
|
* convertMinutesToHoursAndMinutes(150) // returns { hours: 2, minutes: 30 }
|
||||||
|
*/
|
||||||
|
export const convertMinutesToHoursAndMinutes = (mins: number): { hours: number; minutes: number } => {
|
||||||
|
const hours = Math.floor(mins / 60);
|
||||||
|
const minutes = Math.floor(mins % 60);
|
||||||
|
return { hours, minutes };
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description Converts minutes to hours and minutes string
|
||||||
|
* @param {number} totalMinutes - Total minutes
|
||||||
|
* @returns {string} Formatted string (e.g., "2h 30m")
|
||||||
|
* @example
|
||||||
|
* convertMinutesToHoursMinutesString(150) // returns "2h 30m"
|
||||||
|
*/
|
||||||
|
export const convertMinutesToHoursMinutesString = (totalMinutes: number): string => {
|
||||||
|
const { hours, minutes } = convertMinutesToHoursAndMinutes(totalMinutes);
|
||||||
|
return `${hours ? `${hours}h ` : ``}${minutes ? `${minutes}m ` : ``}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description Calculates read time in seconds from word count
|
||||||
|
* @param {number} wordsCount - Number of words
|
||||||
|
* @returns {number} Read time in seconds
|
||||||
|
* @example
|
||||||
|
* getReadTimeFromWordsCount(400) // returns 120
|
||||||
|
*/
|
||||||
|
export const getReadTimeFromWordsCount = (wordsCount: number): number => {
|
||||||
|
const wordsPerMinute = 200;
|
||||||
|
const minutes = wordsCount / wordsPerMinute;
|
||||||
|
return minutes * 60;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description Generates array of dates between start and end dates
|
||||||
|
* @param {string | Date} startDate - Start date
|
||||||
|
* @param {string | Date} endDate - End date
|
||||||
|
* @returns {Array<{ date: string }>} Array of dates
|
||||||
|
* @example
|
||||||
|
* generateDateArray("2024-01-01", "2024-01-03")
|
||||||
|
* // returns [{ date: "2024-01-02" }, { date: "2024-01-03" }]
|
||||||
|
*/
|
||||||
|
export const generateDateArray = (startDate: string | Date, endDate: string | Date): Array<{ date: string }> => {
|
||||||
|
const start = new Date(startDate);
|
||||||
|
const end = new Date(endDate);
|
||||||
|
end.setDate(end.getDate() + 1);
|
||||||
|
|
||||||
|
const dateArray = [];
|
||||||
|
while (start <= end) {
|
||||||
|
start.setDate(start.getDate() + 1);
|
||||||
|
dateArray.push({
|
||||||
|
date: new Date(start).toISOString().split("T")[0],
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return dateArray;
|
||||||
|
};
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,6 @@
|
||||||
|
export * from "./array";
|
||||||
export * from "./auth";
|
export * from "./auth";
|
||||||
|
export * from "./datetime";
|
||||||
export * from "./color";
|
export * from "./color";
|
||||||
export * from "./common";
|
export * from "./common";
|
||||||
export * from "./datetime";
|
export * from "./datetime";
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,182 @@
|
||||||
import DOMPurify from "isomorphic-dompurify";
|
import DOMPurify from "isomorphic-dompurify";
|
||||||
|
|
||||||
export const addSpaceIfCamelCase = (str: string) => str.replace(/([a-z])([A-Z])/g, "$1 $2");
|
/**
|
||||||
|
* @description Adds space between camelCase words
|
||||||
|
* @param {string} str - String to add spaces to
|
||||||
|
* @returns {string} String with spaces between camelCase words
|
||||||
|
* @example
|
||||||
|
* addSpaceIfCamelCase("camelCase") // returns "camel Case"
|
||||||
|
* addSpaceIfCamelCase("thisIsATest") // returns "this Is A Test"
|
||||||
|
*/
|
||||||
|
export const addSpaceIfCamelCase = (str: string) => {
|
||||||
|
if (str === undefined || str === null) return "";
|
||||||
|
|
||||||
|
if (typeof str !== "string") str = `${str}`;
|
||||||
|
|
||||||
|
return str.replace(/([a-z])([A-Z])/g, "$1 $2");
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description Replaces underscores with spaces in snake_case strings
|
||||||
|
* @param {string} str - String to replace underscores in
|
||||||
|
* @returns {string} String with underscores replaced by spaces
|
||||||
|
* @example
|
||||||
|
* replaceUnderscoreIfSnakeCase("snake_case") // returns "snake case"
|
||||||
|
*/
|
||||||
export const replaceUnderscoreIfSnakeCase = (str: string) => str.replace(/_/g, " ");
|
export const replaceUnderscoreIfSnakeCase = (str: string) => str.replace(/_/g, " ");
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description Truncates text to specified length and adds ellipsis
|
||||||
|
* @param {string} str - String to truncate
|
||||||
|
* @param {number} length - Maximum length before truncation
|
||||||
|
* @returns {string} Truncated string with ellipsis if needed
|
||||||
|
* @example
|
||||||
|
* truncateText("This is a long text", 7) // returns "This is..."
|
||||||
|
*/
|
||||||
|
export const truncateText = (str: string, length: number) => {
|
||||||
|
if (!str || str === "") return "";
|
||||||
|
|
||||||
|
return str.length > length ? `${str.substring(0, length)}...` : str;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description Creates a similar string by randomly shuffling characters
|
||||||
|
* @param {string} str - String to shuffle
|
||||||
|
* @returns {string} Shuffled string with same characters
|
||||||
|
* @example
|
||||||
|
* createSimilarString("hello") // might return "olleh" or "lehol"
|
||||||
|
*/
|
||||||
|
export const createSimilarString = (str: string) => {
|
||||||
|
const shuffled = str
|
||||||
|
.split("")
|
||||||
|
.sort(() => Math.random() - 0.5)
|
||||||
|
.join("");
|
||||||
|
|
||||||
|
return shuffled;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description Copies full URL (origin + path) to clipboard
|
||||||
|
* @param {string} path - URL path to copy
|
||||||
|
* @returns {Promise<void>} Promise that resolves when copying is complete
|
||||||
|
* @example
|
||||||
|
* await copyUrlToClipboard("issues/123") // copies "https://example.com/issues/123"
|
||||||
|
*/
|
||||||
|
/**
|
||||||
|
* @description Copies text to clipboard
|
||||||
|
* @param {string} text - Text to copy
|
||||||
|
* @returns {Promise<void>} Promise that resolves when copying is complete
|
||||||
|
* @example
|
||||||
|
* await copyTextToClipboard("Hello, World!") // copies "Hello, World!" to clipboard
|
||||||
|
*/
|
||||||
|
export const copyTextToClipboard = async (text: string): Promise<void> => {
|
||||||
|
if (typeof navigator === "undefined") return;
|
||||||
|
try {
|
||||||
|
await navigator.clipboard.writeText(text);
|
||||||
|
} catch (err) {
|
||||||
|
console.error("Failed to copy text: ", err);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description Copies full URL (origin + path) to clipboard
|
||||||
|
* @param {string} path - URL path to copy
|
||||||
|
* @returns {Promise<void>} Promise that resolves when copying is complete
|
||||||
|
* @example
|
||||||
|
* await copyUrlToClipboard("issues/123") // copies "https://example.com/issues/123"
|
||||||
|
*/
|
||||||
|
export const copyUrlToClipboard = async (path: string) => {
|
||||||
|
const originUrl = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
|
||||||
|
await copyTextToClipboard(`${originUrl}/${path}`);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description Generates a deterministic HSL color based on input string
|
||||||
|
* @param {string} string - Input string to generate color from
|
||||||
|
* @returns {string} HSL color string
|
||||||
|
* @example
|
||||||
|
* generateRandomColor("hello") // returns consistent HSL color for "hello"
|
||||||
|
* generateRandomColor("") // returns "rgb(var(--color-primary-100))"
|
||||||
|
*/
|
||||||
|
export const generateRandomColor = (string: string): string => {
|
||||||
|
if (!string) return "rgb(var(--color-primary-100))";
|
||||||
|
|
||||||
|
string = `${string}`;
|
||||||
|
|
||||||
|
const uniqueId = string.length.toString() + string;
|
||||||
|
const combinedString = uniqueId + string;
|
||||||
|
|
||||||
|
const hash = Array.from(combinedString).reduce((acc, char) => {
|
||||||
|
const charCode = char.charCodeAt(0);
|
||||||
|
return (acc << 5) - acc + charCode;
|
||||||
|
}, 0);
|
||||||
|
|
||||||
|
const hue = hash % 360;
|
||||||
|
const saturation = 70;
|
||||||
|
const lightness = 60;
|
||||||
|
|
||||||
|
const randomColor = `hsl(${hue}, ${saturation}%, ${lightness}%)`;
|
||||||
|
|
||||||
|
return randomColor;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description Gets first character of first word or first characters of first two words
|
||||||
|
* @param {string} str - Input string
|
||||||
|
* @returns {string} First character(s)
|
||||||
|
* @example
|
||||||
|
* getFirstCharacters("John") // returns "J"
|
||||||
|
* getFirstCharacters("John Doe") // returns "JD"
|
||||||
|
*/
|
||||||
|
export const getFirstCharacters = (str: string) => {
|
||||||
|
const words = str.trim().split(" ");
|
||||||
|
if (words.length === 1) {
|
||||||
|
return words[0].charAt(0);
|
||||||
|
} else {
|
||||||
|
return words[0].charAt(0) + words[1].charAt(0);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description Formats number count, showing "99+" for numbers over 99
|
||||||
|
* @param {number} number - Number to format
|
||||||
|
* @returns {string} Formatted number string
|
||||||
|
* @example
|
||||||
|
* getNumberCount(50) // returns "50"
|
||||||
|
* getNumberCount(100) // returns "99+"
|
||||||
|
*/
|
||||||
|
export const getNumberCount = (number: number): string => {
|
||||||
|
if (number > 99) {
|
||||||
|
return "99+";
|
||||||
|
}
|
||||||
|
return number.toString();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description Converts object to URL query parameters string
|
||||||
|
* @param {Object} obj - Object to convert
|
||||||
|
* @returns {string} URL query parameters string
|
||||||
|
* @example
|
||||||
|
* objToQueryParams({ page: 1, search: "test" }) // returns "page=1&search=test"
|
||||||
|
* objToQueryParams({ a: null, b: "test" }) // returns "b=test"
|
||||||
|
*/
|
||||||
|
export const objToQueryParams = (obj: any) => {
|
||||||
|
const params = new URLSearchParams();
|
||||||
|
|
||||||
|
if (!obj) return params.toString();
|
||||||
|
|
||||||
|
for (const [key, value] of Object.entries(obj)) {
|
||||||
|
if (value !== undefined && value !== null) params.append(key, value as string);
|
||||||
|
}
|
||||||
|
|
||||||
|
return params.toString();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description: This function will capitalize the first letter of a string
|
||||||
|
* @param str String
|
||||||
|
* @returns String
|
||||||
|
*/
|
||||||
export const capitalizeFirstLetter = (str: string) => str.charAt(0).toUpperCase() + str.slice(1);
|
export const capitalizeFirstLetter = (str: string) => str.charAt(0).toUpperCase() + str.slice(1);
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -15,9 +188,30 @@ export const capitalizeFirstLetter = (str: string) => str.charAt(0).toUpperCase(
|
||||||
* const text = stripHTML(html);
|
* const text = stripHTML(html);
|
||||||
* console.log(text); // Some text
|
* console.log(text); // Some text
|
||||||
*/
|
*/
|
||||||
|
/**
|
||||||
|
* @description Sanitizes HTML string by removing tags and properly escaping entities
|
||||||
|
* @param {string} htmlString - HTML string to sanitize
|
||||||
|
* @returns {string} Sanitized string with escaped HTML entities
|
||||||
|
* @example
|
||||||
|
* sanitizeHTML("<p>Hello & 'world'</p>") // returns "Hello & 'world'"
|
||||||
|
*/
|
||||||
export const sanitizeHTML = (htmlString: string) => {
|
export const sanitizeHTML = (htmlString: string) => {
|
||||||
const sanitizedText = DOMPurify.sanitize(htmlString, { ALLOWED_TAGS: [] }); // sanitize the string to remove all HTML tags
|
if (!htmlString) return "";
|
||||||
return sanitizedText.trim(); // trim the string to remove leading and trailing whitespaces
|
|
||||||
|
// First use DOMPurify to remove all HTML tags while preserving text content
|
||||||
|
const sanitizedText = DOMPurify.sanitize(htmlString, {
|
||||||
|
ALLOWED_TAGS: [],
|
||||||
|
ALLOWED_ATTR: [],
|
||||||
|
USE_PROFILES: {
|
||||||
|
html: false,
|
||||||
|
svg: false,
|
||||||
|
svgFilters: false,
|
||||||
|
mathMl: false,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// Additional escaping for quotes and apostrophes
|
||||||
|
return sanitizedText.trim().replace(/'/g, "'").replace(/"/g, """);
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -86,42 +280,42 @@ export const checkURLValidity = (url: string): boolean => {
|
||||||
};
|
};
|
||||||
|
|
||||||
// Browser-only clipboard functions
|
// Browser-only clipboard functions
|
||||||
let copyTextToClipboard: (text: string) => Promise<void>;
|
// let copyTextToClipboard: (text: string) => Promise<void>;
|
||||||
|
|
||||||
if (typeof window !== "undefined") {
|
// if (typeof window !== "undefined") {
|
||||||
const fallbackCopyTextToClipboard = (text: string) => {
|
// const fallbackCopyTextToClipboard = (text: string) => {
|
||||||
const textArea = document.createElement("textarea");
|
// const textArea = document.createElement("textarea");
|
||||||
textArea.value = text;
|
// textArea.value = text;
|
||||||
|
|
||||||
// Avoid scrolling to bottom
|
// // Avoid scrolling to bottom
|
||||||
textArea.style.top = "0";
|
// textArea.style.top = "0";
|
||||||
textArea.style.left = "0";
|
// textArea.style.left = "0";
|
||||||
textArea.style.position = "fixed";
|
// textArea.style.position = "fixed";
|
||||||
|
|
||||||
document.body.appendChild(textArea);
|
// document.body.appendChild(textArea);
|
||||||
textArea.focus();
|
// textArea.focus();
|
||||||
textArea.select();
|
// textArea.select();
|
||||||
|
|
||||||
try {
|
// try {
|
||||||
// FIXME: Even though we are using this as a fallback, execCommand is deprecated 👎. We should find a better way to do this.
|
// // FIXME: Even though we are using this as a fallback, execCommand is deprecated 👎. We should find a better way to do this.
|
||||||
// https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand
|
// // https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand
|
||||||
document.execCommand("copy");
|
// document.execCommand("copy");
|
||||||
} catch (err) {}
|
// } catch (err) {}
|
||||||
|
|
||||||
document.body.removeChild(textArea);
|
// document.body.removeChild(textArea);
|
||||||
};
|
// };
|
||||||
|
|
||||||
copyTextToClipboard = async (text: string) => {
|
// copyTextToClipboard = async (text: string) => {
|
||||||
if (!navigator.clipboard) {
|
// if (!navigator.clipboard) {
|
||||||
fallbackCopyTextToClipboard(text);
|
// fallbackCopyTextToClipboard(text);
|
||||||
return;
|
// return;
|
||||||
}
|
// }
|
||||||
await navigator.clipboard.writeText(text);
|
// await navigator.clipboard.writeText(text);
|
||||||
};
|
// };
|
||||||
} else {
|
// } else {
|
||||||
copyTextToClipboard = async () => {
|
// copyTextToClipboard = async () => {
|
||||||
throw new Error("copyTextToClipboard is only available in browser environments");
|
// throw new Error("copyTextToClipboard is only available in browser environments");
|
||||||
};
|
// };
|
||||||
}
|
// }
|
||||||
|
|
||||||
export { copyTextToClipboard };
|
// export { copyTextToClipboard };
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue