@quillsql/react 2.12.37 → 2.12.39

package/dist/esm/utils/valueFormatter.js

@@ -0,0 +1,342 @@
+import { endOfWeek, format, getWeek, isValid, parse, startOfWeek, } from 'date-fns';
+import { utcToZonedTime } from 'date-fns-tz';
+export const DATE_FORMAT_TYPES = [
+    'yyyy',
+    'MMM_yyyy',
+    'MMM_dd_yyyy',
+    'hh_ap_pm',
+    'MMM_dd-MMM_dd',
+    'MMM_dd_hh:mm_ap_pm',
+    'wo, yyyy',
+];
+export const NUMBER_FORMAT_TYPES = [
+    'whole_number',
+    'one_decimal_place',
+    'two_decimal_places',
+    'dollar_amount',
+    'dollar_cents',
+];
+/**
+ * Pretty-prints the given values to their nice-looking string form.
+ */
+export const valueFormatter = ({ value, field, fields }) => {
+    if (field === undefined || field === null)
+        return '';
+    if (value === undefined || value === null)
+        return '';
+    const fieldInfo = fields.find((f) => f.field === field);
+    if (!fieldInfo)
+        return '';
+    const HANDLERS = {
+        percent: formatPercent,
+        dollar_amount: formatDollarAmount,
+        dollar_cents: formatDollarCents,
+        whole_number: formatWholeNumber,
+        one_decimal_place: formatOneDecimalPlace,
+        two_decimal_places: formatTwoDecimalPlaces,
+        string: formatString,
+        yyyy: format_YYYY,
+        MMM_dd: format_MMM_dd,
+        MMM_yyyy: format_MMM_yyyy,
+        MMM_dd_yyyy: format_MMM_dd_yyyy,
+        MMM_ww_yyyy: format_MMM_ww_yyyy,
+        hh_ap_pm: format_hh_ap_pm,
+        'MMM_dd-MMM_dd': format_MMM_dd_MMM_dd,
+        'MMM_dd_hh:mm_ap_pm': format_MMM_dd_hh_mm_ap_pm,
+        'wo, yyyy': format_wo_yyyy,
+    };
+    // try to handle this value using the associated formatType handler
+    const formatType = fieldInfo.format;
+    if (Object.keys(HANDLERS).includes(formatType)) {
+        // if bigquery date type, we have to pull the value out of the json
+        if (DATE_FORMAT_TYPES.includes(formatType) &&
+            typeof value === 'object' &&
+            value.value) {
+            return HANDLERS[formatType](value.value);
+        }
+        return HANDLERS[formatType](value);
+    }
+    return formatString(value); // by default make this value a string
+};
+export const quillFormat = ({ value, format, }) => {
+    // Handle special case, if value is null and format is numeric display '-'
+    if (value === null &&
+        (NUMBER_FORMAT_TYPES.includes(format) || DATE_FORMAT_TYPES.includes(format))) {
+        return '-';
+    }
+    const HANDLERS = {
+        percent: formatPercent,
+        dollar_amount: formatDollarAmount,
+        dollar_cents: formatDollarCents,
+        whole_number: formatWholeNumber,
+        one_decimal_place: formatOneDecimalPlace,
+        two_decimal_places: formatTwoDecimalPlaces,
+        string: formatString,
+        yyyy: format_YYYY,
+        MMM_yyyy: format_MMM_yyyy,
+        MMM_dd_yyyy: format_MMM_dd_yyyy,
+        MMM_dd: format_MMM_dd,
+        hh_ap_pm: format_hh_ap_pm,
+        'MMM_dd-MMM_dd': format_MMM_dd_MMM_dd,
+        'MMM_dd_hh:mm_ap_pm': format_MMM_dd_hh_mm_ap_pm,
+        'wo, yyyy': format_wo_yyyy,
+    };
+    // try to handle this value using the associated formatType handler
+    const formatType = format;
+    if (HANDLERS[formatType]) {
+        // if bigquery date type, we have to pull the value out of the json
+        if (DATE_FORMAT_TYPES.includes(formatType) &&
+            typeof value === 'object' &&
+            value &&
+            value.value) {
+            return HANDLERS[formatType](value.value);
+        }
+        return HANDLERS[formatType](value);
+    }
+    return formatString(value); // by default make this value a string
+};
+/**
+ * HELPER FUNCTION DEFINITIONS
+ **/
+/**
+ * Formats the value as a string using the built-in converstion.
+ */
+const formatString = (value) => {
+    if (value === null || value === undefined) {
+        return '-';
+    }
+    if (typeof value === 'object') {
+        return JSON.stringify(value);
+    }
+    return value.toString();
+};
+/**
+ * Formats the value as a (rounded) currency amount in dollars.
+ *
+ * eg. @example format(1234.567) => "$1,235"
+ */
+const formatterDollar = new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
+    maximumFractionDigits: 0,
+});
+const formatDollarAmount = (value) => {
+    return formatterDollar.format(Number(value ?? 0));
+};
+/**
+ * Formats the value as a (rounded) currency amount in dollars and cents.
+ *
+ * @example format(1234.567) => "$1,234.57"
+ */
+const formatterCentsDollar = new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+});
+const formatDollarCents = (value) => {
+    return formatterCentsDollar.format(Number(value ?? 0));
+};
+/**
+ * Formats the value as a (rounded) integer.
+ *
+ * @example format(1234.567) => "1,235"
+ */
+const wholeNumberFormatter = new Intl.NumberFormat('en-US', {
+    maximumFractionDigits: 0,
+});
+const formatWholeNumber = (value) => {
+    return wholeNumberFormatter.format(Number(value));
+};
+/**
+ * Formats the value as a number rounded to exactly one decimal place.
+ *
+ * @example format(1234.567) => "1,234.6"
+ */
+const formatOneDecimalPlace = (value) => {
+    const formatter = new Intl.NumberFormat('en-US', {
+        minimumFractionDigits: 1,
+        maximumFractionDigits: 1,
+    });
+    return formatter.format(Number(value));
+};
+/**
+ * Formats the value as a number rounded to exactly two decimal places.
+ *
+ * @example format(1234.567) => "1,234.57"
+ */
+const formatterTwoDecimalPlaces = new Intl.NumberFormat('en-US', {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+});
+const formatTwoDecimalPlaces = (value) => {
+    return formatterTwoDecimalPlaces.format(Number(value));
+};
+/**
+ * Formats the value as a percentage.
+ *
+ * @example format(0.1234) => "12.34%"
+ * @example format(0.99) => "99.00%"
+ *
+ * NOTE: This function expects that the value is already a percentage value, and
+ * does not try to guess whether the percentage is represented as a whole number
+ * or a decimal.
+ *
+ * @example format(1234.567) => "123,456.70%"
+ * @example format(99) => "9,900.00%"
+ */
+const formatterPercent = new Intl.NumberFormat('en-US', {
+    style: 'percent',
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+});
+const formatPercent = (value) => {
+    return formatterPercent.format(Number(value));
+};
+// Converts the value to a UTC date with the given format string. If the
+// resulting date is invalid, it returns "Invalid date".
+const _getUTCDateHelper = (value, fmt) => {
+    const parsedDate = parse(value, fmt, new Date());
+    const utcDate = isValid(parsedDate)
+        ? utcToZonedTime(parsedDate, 'UTC')
+        : utcToZonedTime(new Date(value), 'UTC');
+    // const utcDate: Date = utcToZonedTime(new Date(value), 'UTC');
+    if (!isValid(utcDate))
+        return value; //'Invalid date';
+    return format(utcDate, fmt);
+};
+const format_YYYY = (value) => _getUTCDateHelper(value, 'yyyy');
+const format_MMM_yyyy = (value) => _getUTCDateHelper(value, 'MMM yyyy');
+const format_hh_ap_pm = (value) => _getUTCDateHelper(value, 'hh:mm aa');
+const format_MMM_dd = (value) => _getUTCDateHelper(value, 'MMM dd');
+const format_MMM_dd_yyyy = (value) => {
+    return _getUTCDateHelper(value, 'dd MMM yyyy');
+};
+const format_MMM_dd_MMM_dd = (value) => {
+    const utcDate = utcToZonedTime(new Date(value), 'UTC');
+    if (!isValid(utcDate))
+        return 'Invalid date';
+    const monday = startOfWeek(utcDate, { weekStartsOn: 1 });
+    const sunday = endOfWeek(utcDate, { weekStartsOn: 1 });
+    // Check if start and end are in the same month
+    if (format(monday, 'MMM') === format(sunday, 'MMM')) {
+        return `${format(monday, 'MMM dd')} - ${format(sunday, 'dd')}`;
+    }
+    else {
+        return `${format(monday, 'MMM dd')} - ${format(sunday, 'MMM dd')}`;
+    }
+};
+const format_MMM_dd_hh_mm_ap_pm = (value) => {
+    const utcDate = utcToZonedTime(new Date(value), 'UTC');
+    if (!isValid(utcDate))
+        return 'Invalid date';
+    const formatStr = utcDate.getMinutes() === 0 ? 'MMM do h a' : 'MMM do h:mm a';
+    const res = format(utcDate, formatStr);
+    return res.slice(0, -2) + res.slice(-2).toLowerCase();
+};
+const format_wo_yyyy = (value) => {
+    const utcDate = utcToZonedTime(new Date(value), 'UTC');
+    if (!isValid(utcDate))
+        return 'Invalid date';
+    return `${getWeek(utcDate)},${utcDate.getFullYear()}`;
+};
+const format_MMM_ww_yyyy = (value) => {
+    const utcDate = utcToZonedTime(new Date(value), 'UTC');
+    if (!isValid(utcDate))
+        return 'Invalid date';
+    const startOfWeekDate = startOfWeek(utcDate, { weekStartsOn: 1 });
+    const endOfWeekDate = endOfWeek(utcDate, { weekStartsOn: 1 });
+    const month = format(utcDate, 'MMM');
+    const startDay = format(startOfWeekDate, 'd');
+    const endDay = format(endOfWeekDate, 'd');
+    const year = format(utcDate, 'yyyy');
+    return `${month}, ${startDay}-${endDay}, ${year}`;
+};
+/**
+ * Parses a numeric string back into a number, taking into account that
+ * users in different locales will format numbers differently (eg. 1,234 means
+ * something different from 1.234 in different countries).
+ *
+ * see: https://stackoverflow.com/a/45309230/9566888
+ */
+function parseNumber(value) {
+    if (typeof value === 'number')
+        return value;
+    if (typeof value !== 'string')
+        return Number.NaN;
+    const example = localeFormatter.format(1.1);
+    const cleanPattern = new RegExp(`[^-+0-9${example.charAt(1)}]`, 'g');
+    const cleaned = value.replace(cleanPattern, '');
+    const normalized = cleaned.replace(example.charAt(1), '.');
+    return parseFloat(normalized);
+}
+// Moved this out of parseNumber for perf reasons
+const localeFormatter = Intl.NumberFormat(typeof navigator !== 'undefined' ? navigator.language : 'en-US');
+const FORMATS = [
+    'dd MMM yyyy',
+    'yyyy-mm-dd',
+    'MMM yyyy',
+    'MMM do h a',
+    'MMM do h:mm a',
+];
+function isValidDate(dateString) {
+    const date = getValidDate(dateString);
+    if (date)
+        return true;
+    // Try parsing as native date object
+    const d = new Date(dateString);
+    return !isNaN(d.getTime());
+    // return FORMATS.some((fmt) => isValid(parse(d, fmt, new Date())));
+}
+function getValidDate(dateString) {
+    const dates = FORMATS.map((fmt) => parse(dateString, fmt, new Date()));
+    return dates.find((date) => isValid(date));
+}
+export const compareValues = (a, b, column) => {
+    const valueA = a[column];
+    const valueB = b[column];
+    // Null checks
+    if (valueA === null && valueB === null) {
+        return 0; // Both values are null, consider them equal
+    }
+    else if (valueA === null) {
+        return -1; // ValueA is null, consider it smaller
+    }
+    else if (valueB === null) {
+        return 1; // ValueB is null, consider it smaller
+    }
+    // Undefined checks
+    if (valueA === undefined && valueB === undefined) {
+        return 0; // Both values are undefined, consider them equal
+    }
+    else if (valueA === undefined) {
+        return -1; // ValueA is undefined, consider it smaller
+    }
+    else if (valueB === undefined) {
+        return 1; // ValueB is undefined, consider it smaller
+    }
+    // For dates
+    if (isValidDate(valueA) && isValidDate(valueB)) {
+        const dateA = new Date(valueA);
+        const dateB = new Date(valueB);
+        if (!isNaN(dateA.getTime()) && !isNaN(dateB.getTime())) {
+            return dateA.getTime() - dateB.getTime();
+        }
+        // Handle edge case for AM/PM date formats
+        const date1 = getValidDate(valueA);
+        const date2 = getValidDate(valueB);
+        if (date1 && date2) {
+            return date1.getTime() - date2.getTime();
+        }
+    }
+    // For numbers
+    if (!isNaN(parseNumber(valueA)) && !isNaN(parseNumber(valueB))) {
+        return parseNumber(valueA) - parseNumber(valueB);
+    }
+    // For booleans
+    if (typeof valueA === 'boolean' && typeof valueB === 'boolean') {
+        return valueA === valueB ? 0 : valueA ? 1 : -1;
+    }
+    // For strings
+    return valueA.localeCompare(valueB);
+};

package/dist/esm/utils/width.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Calculates the width that the first child of the given container should be
+ * such that the first child takes up as much space as possible in the container
+ * without crowding out the rest of its siblings. Also respects flexbox gap.
+ * @param containerRef the ref of the container element
+ * @param setState a callback to set the new width of the first child
+ * @param options config options ('gap' sets the size of the flexbox gap)
+ */
+export declare const updateFirstChildWidth: (containerRef: React.RefObject<HTMLElement>, setState: (value: React.SetStateAction<number>) => void, options?: {
+    gap: number;
+}) => void;
+//# sourceMappingURL=width.d.ts.map

package/dist/esm/utils/width.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"width.d.ts","sourceRoot":"","sources":["../../../src/utils/width.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,eAAO,MAAM,qBAAqB,iBAClB,MAAM,SAAS,CAAC,WAAW,CAAC,oBACxB,MAAM,cAAc,CAAC,MAAM,CAAC,KAAK,IAAI,YAC9C;IAAE,GAAG,EAAE,MAAM,CAAA;CAAE,SAazB,CAAC"}

package/dist/esm/utils/width.js

@@ -0,0 +1,21 @@
+/**
+ * Calculates the width that the first child of the given container should be
+ * such that the first child takes up as much space as possible in the container
+ * without crowding out the rest of its siblings. Also respects flexbox gap.
+ * @param containerRef the ref of the container element
+ * @param setState a callback to set the new width of the first child
+ * @param options config options ('gap' sets the size of the flexbox gap)
+ */
+export const updateFirstChildWidth = (containerRef, setState, options = { gap: 0 }) => {
+    if (containerRef.current) {
+        const element = containerRef.current;
+        const totalWidth = element.getBoundingClientRect().width;
+        const gapWidth = options.gap * (element.childElementCount - 1);
+        let siblingsWidth = 0;
+        const children = Array.from(containerRef.current.children);
+        for (let i = 1; i < children.length; i++) {
+            siblingsWidth += children[i].getBoundingClientRect().width;
+        }
+        setState(totalWidth - siblingsWidth - gapWidth);
+    }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quillsql/react",
-  "version": "2.12.37",
+  "version": "2.12.39",
   "exports": {
     ".": {
       "import": "./dist/esm/index.js",