@visns-studio/visns-components 6.4.2 → 6.4.3

package/package.json

@@ -91,7 +91,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "6.4.2",
+    "version": "6.4.3",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/Field.jsx

@@ -42,6 +42,11 @@ import VisnsAutocomplete from './Autocomplete';
 import VisnsDropZone from './DropZone';
 import MultiCheckbox from './MultiCheckbox';
 import DatePickerPortal from './utils/DatePickerPortal';
+import {
+    fromNativeInputValue,
+    toNativeInputValue,
+    useNativeDateInput,
+} from './utils/nativeDateInput';
 
 import 'react-toggle/style.css';
 import 'react-datepicker/dist/react-datepicker.css';
@@ -166,6 +171,15 @@ function Field({
     const [emailSuggestions, setEmailSuggestions] = useState([]);
     const [showEmailSuggestions, setShowEmailSuggestions] = useState(false);
 
+    /**
+     * On touch / narrow devices `date` and `datetime` fields swap
+     * react-datepicker's popup calendar for the platform's own picker — the
+     * popup is clipped by modals on a phone and its day cells are far below a
+     * comfortable tap target. Desktop rendering is untouched.
+     * See utils/nativeDateInput.js for the (identical) value contract.
+     */
+    const nativeDateInput = useNativeDateInput();
+
     /**
      * `colour` field popup picker: dismiss the popover when the user clicks
      * anywhere outside it or presses Escape. Picking a colour inside the
@@ -3093,12 +3107,70 @@ function Field({
         }
     };
 
+    /**
+     * The touch/narrow-viewport rendering of a `date` / `datetime` field: the
+     * platform's own picker instead of react-datepicker's popup calendar.
+     *
+     * It is a drop-in for the DatePicker above — same error class, same
+     * `onChangeDate(value, id)` call, same value shape in form state (a JS
+     * `Date`, or `null` once cleared). The conversions live in
+     * utils/nativeDateInput.js.
+     *
+     * The library's own clear affordance is kept (react-datepicker renders one
+     * via `isClearable`, and iOS offers no way to empty a date input once it
+     * has a value), so the browser's calendar glyph is hidden while it shows —
+     * two clear/open icons side by side would be one too many. Tapping the
+     * field still opens the native picker on every touch platform.
+     *
+     * @param {boolean} withTime `datetime-local` rather than `date`
+     */
+    const renderNativeDateInput = (withTime) => {
+        const value = toNativeInputValue(inputValue, withTime);
+
+        return (
+            <div className={styles.nativeDateWrap}>
+                <input
+                    type={withTime ? 'datetime-local' : 'date'}
+                    className={`${styles.nativeDateInput} ${
+                        value ? styles.nativeDateFilled : ''
+                    } ${inputClass[settings.id] || ''}`}
+                    value={value}
+                    onChange={(e) =>
+                        onChangeDate(
+                            fromNativeInputValue(
+                                e.target.value,
+                                inputValue,
+                                withTime
+                            ),
+                            settings.id
+                        )
+                    }
+                    autoComplete="off"
+                />
+                {value && (
+                    <button
+                        type="button"
+                        aria-label="Clear date"
+                        className={styles.nativeDateClear}
+                        onClick={() => onChangeDate(null, settings.id)}
+                    >
+                        <X size={16} />
+                    </button>
+                )}
+            </div>
+        );
+    };
+
     const renderAdditionalContainer = () => {
         switch (settings.type) {
             case 'date':
             case 'datetime':
+                if (nativeDateInput) {
+                    return renderNativeDateInput(settings.type === 'datetime');
+                }
+
                 return (
-                    <DatePickerPortal 
+                    <DatePickerPortal
                         containerRef={containerRef}
                         centerScreen={settings.centerScreen}
                         modalContext={settings.modalContext}

package/src/components/styles/Field.module.scss

@@ -1799,3 +1799,71 @@ input[type='file']:hover {
         min-height: 3lh;
     }
 }
+
+/* =========================================================================
+   Native date input (touch / narrow viewports)
+
+   `date` and `datetime` fields swap react-datepicker's popup calendar for
+   the platform picker on phones — see utils/nativeDateInput.js. The box
+   itself is already styled by the global
+   `input[type]:not(...)` rule that every other text field uses, so only the
+   things that rule does not cover live here: the iOS appearance reset, a
+   44px-class tap height, and the clear button that stands in for
+   react-datepicker's `isClearable` cross.
+   ========================================================================= */
+
+.nativeDateWrap {
+    position: relative;
+    width: 100%;
+}
+
+/* `[type]` only to clear the global input rule's specificity — the padding,
+   border, radius and colour all still come from there. */
+input.nativeDateInput[type] {
+    -webkit-appearance: none;
+    appearance: none;
+    display: block;
+    width: 100%;
+    /* iOS sizes date inputs to their content and centres nothing; a floor
+       keeps the field the same height as its text-input neighbours and
+       comfortably tappable. */
+    min-height: 2.9rem;
+    font-family: inherit;
+}
+
+/* Only once there is a value — and therefore a clear button — does the box
+   need to reserve room on the right, and only then would the browser's own
+   calendar glyph sit under ours. */
+input.nativeDateFilled[type] {
+    padding-right: 2.75rem;
+
+    &::-webkit-calendar-picker-indicator {
+        -webkit-appearance: none;
+        display: none;
+    }
+}
+
+.nativeDateClear {
+    position: absolute;
+    top: 50%;
+    right: 0.4rem;
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    padding: 0;
+    border: none;
+    background: transparent;
+    border-radius: 50%;
+    cursor: pointer;
+    /* Same token and weight as the datepicker's close icon */
+    color: rgba(var(--primary-rgb, 31, 42, 55), 0.45);
+
+    &:hover,
+    &:focus {
+        color: rgba(var(--primary-rgb, 31, 42, 55), 1);
+        outline: none;
+    }
+}

package/src/components/utils/nativeDateInput.js

@@ -0,0 +1,172 @@
+import { useEffect, useState } from 'react';
+import moment from 'moment';
+
+/**
+ * Native date input support for touch / narrow devices.
+ *
+ * react-datepicker's popup calendar is a poor fit for a phone: inside a modal
+ * it is clipped by the dialog, the month/year dropdowns get cut off and every
+ * day cell is a sub-40px tap target. On those devices the platform's own date
+ * picker is both bigger and familiar, so `date` / `datetime` fields render an
+ * `<input type="date">` / `<input type="datetime-local">` instead.
+ *
+ * The value contract is unchanged: whatever the react-datepicker path hands to
+ * `Form.handleChangeDate` (a JS `Date`, or `null` when cleared) is exactly what
+ * the native path hands it too — see `fromNativeInputValue`.
+ */
+
+// Phones and small tablets in portrait. Anything wider keeps the desktop
+// calendar even if the browser reports a coarse pointer (e.g. a touchscreen
+// laptop is still a mouse-and-keyboard experience for a form).
+export const NATIVE_DATE_MAX_WIDTH = 760;
+
+/**
+ * @returns {boolean} true when the platform date picker should be preferred.
+ *                    SSR-safe: false when there is no `window`.
+ */
+export const prefersNativeDateInput = () => {
+    if (typeof window === 'undefined') {
+        return false;
+    }
+
+    const coarsePointer =
+        typeof window.matchMedia === 'function' &&
+        window.matchMedia('(pointer: coarse)').matches;
+
+    return coarsePointer || window.innerWidth <= NATIVE_DATE_MAX_WIDTH;
+};
+
+/**
+ * Hook form of `prefersNativeDateInput`, re-evaluated on resize / orientation
+ * change and on pointer-capability changes (docking a tablet to a mouse).
+ *
+ * @returns {boolean}
+ */
+export const useNativeDateInput = () => {
+    const [isNative, setIsNative] = useState(prefersNativeDateInput);
+
+    useEffect(() => {
+        if (typeof window === 'undefined') {
+            return undefined;
+        }
+
+        const update = () => setIsNative(prefersNativeDateInput());
+
+        window.addEventListener('resize', update);
+
+        const query =
+            typeof window.matchMedia === 'function'
+                ? window.matchMedia('(pointer: coarse)')
+                : null;
+
+        // Safari < 14 only has the deprecated add/removeListener pair
+        if (query) {
+            if (typeof query.addEventListener === 'function') {
+                query.addEventListener('change', update);
+            } else if (typeof query.addListener === 'function') {
+                query.addListener(update);
+            }
+        }
+
+        return () => {
+            window.removeEventListener('resize', update);
+
+            if (query) {
+                if (typeof query.removeEventListener === 'function') {
+                    query.removeEventListener('change', update);
+                } else if (typeof query.removeListener === 'function') {
+                    query.removeListener(update);
+                }
+            }
+        };
+    }, []);
+
+    return isNative;
+};
+
+/**
+ * Form state (a `Date`, or a date-ish string on a form that was hydrated from
+ * the API before Form.fetchData normalised it) -> the string an
+ * `<input type="date">` / `<input type="datetime-local">` expects.
+ *
+ * @param {Date|string|null|undefined} value
+ * @param {boolean} withTime  true for `datetime-local`
+ * @returns {string} '' when there is nothing valid to show
+ */
+export const toNativeInputValue = (value, withTime = false) => {
+    if (
+        value === null ||
+        value === undefined ||
+        value === '' ||
+        value === 'null'
+    ) {
+        return '';
+    }
+
+    const parsed = moment(value);
+
+    if (!parsed.isValid()) {
+        return '';
+    }
+
+    return parsed.format(
+        withTime ? 'YYYY-MM-DD[T]HH:mm' : 'YYYY-MM-DD'
+    );
+};
+
+/**
+ * The native input's raw string -> the value `onChangeDate` already receives
+ * from react-datepicker.
+ *
+ * Two behaviours are copied deliberately from react-datepicker so the two
+ * paths cannot drift:
+ *
+ *  - clearing yields `null` (react-datepicker's clear button calls
+ *    `onChange(null)`), which Form's required-field check reads as empty;
+ *  - picking a new day on a date-only field keeps the previously selected
+ *    time of day (react-datepicker's `setSelected` does the same `setTime`
+ *    on hour/minute/second), so editing the date of a timestamp column does
+ *    not silently reset it to midnight. Milliseconds are dropped, again as
+ *    react-datepicker does.
+ *
+ * @param {string} raw            the input element's value
+ * @param {Date|string|null} previous  the current form value for the field
+ * @param {boolean} withTime      true for `datetime-local`
+ * @returns {Date|null}
+ */
+export const fromNativeInputValue = (raw, previous, withTime = false) => {
+    if (!raw) {
+        return null;
+    }
+
+    // `datetime-local` normally yields 'YYYY-MM-DDTHH:mm', but a non-default
+    // `step` makes browsers append seconds — accept both.
+    const parsed = withTime
+        ? moment(
+              raw,
+              ['YYYY-MM-DD[T]HH:mm', 'YYYY-MM-DD[T]HH:mm:ss'],
+              true
+          )
+        : moment(raw, 'YYYY-MM-DD', true);
+
+    if (!parsed.isValid()) {
+        return null;
+    }
+
+    if (!withTime) {
+        const prior = previous ? moment(previous) : null;
+
+        if (prior && prior.isValid()) {
+            parsed.set({
+                hour: prior.hour(),
+                minute: prior.minute(),
+                second: prior.second(),
+                millisecond: 0,
+            });
+        }
+    }
+
+    return parsed.toDate();
+};
+
+export default useNativeDateInput;