Spaces:

Seth0330
/

qualifier

Paused

qualifier / frontend /src /components /workspace /EditableCell.jsx

Add FTL RFQ Qualifier agent + full SALES CRM app for HF Spaces testing

005df22 unverified 3 months ago

5.76 kB

import React, { useEffect, useState } from 'react';
import { cn } from '@/lib/utils';

const baseInput =
    'w-full min-w-0 rounded-md border border-transparent bg-transparent px-1.5 py-0.5 text-sm text-slate-800 ' +
    'hover:border-slate-200 focus:border-violet-300 focus:bg-white focus:outline-none focus:ring-1 focus:ring-violet-200';

/**
 * Inline text / email / number field: blur or Enter commits if the value changed.
 */
export function EditableCell({
    value,
    onCommit,
    className = '',
    inputClassName = '',
    type = 'text',
    multiline = false,
    disabled = false,
}) {
    const str = value == null || value === undefined ? '' : String(value);
    const [local, setLocal] = useState(str);

    useEffect(() => {
        setLocal(str);
    }, [str]);

    const commit = () => {
        if (disabled) return;
        const next = multiline ? local : local.trim();
        const prev = multiline ? str : str.trim();
        if (next !== prev) onCommit(next);
    };

    const stop = (e) => e.stopPropagation();

    if (multiline) {
        return (
            <textarea
                className={cn(baseInput, 'resize-y min-h-[2.5rem] max-w-full', className, inputClassName)}
                value={local}
                onChange={(e) => setLocal(e.target.value)}
                onBlur={commit}
                onKeyDown={stop}
                disabled={disabled}
                rows={2}
            />
        );
    }

    return (
        <input
            type={type}
            className={cn(baseInput, className, inputClassName)}
            value={local}
            onChange={(e) => setLocal(e.target.value)}
            onBlur={commit}
            onKeyDown={(e) => {
                stop(e);
                if (e.key === 'Enter') {
                    e.preventDefault();
                    e.currentTarget.blur();
                }
            }}
            disabled={disabled}
        />
    );
}

function usdWholeString(value) {
    if (value == null || value === '') return '';
    const n = Math.round(Number(value));
    return Number.isFinite(n) ? String(n) : '';
}

function formatUsdWholeDisplay(value) {
    const s = usdWholeString(value);
    if (s === '') return '';
    return new Intl.NumberFormat('en-US', {
        style: 'currency',
        currency: 'USD',
        maximumFractionDigits: 0,
        minimumFractionDigits: 0,
    }).format(Number(s));
}

function parseUsdWholeInput(raw) {
    const cleaned = String(raw ?? '')
        .replace(/[$,\s]/g, '')
        .trim();
    if (cleaned === '') return null;
    const n = Math.round(Number(cleaned));
    return Number.isFinite(n) ? n : NaN;
}

/**
 * USD whole dollars: shows $1,234 when blurred; plain digits while focused (no number spinners).
 * onCommit receives '' to clear, or a digits string for the integer amount.
 */
export function EditableCurrencyCell({
    value,
    onCommit,
    className = '',
    inputClassName = '',
    disabled = false,
}) {
    const canonical = usdWholeString(value);
    const [focused, setFocused] = useState(false);
    const [local, setLocal] = useState(() =>
        canonical ? formatUsdWholeDisplay(canonical) : ''
    );

    useEffect(() => {
        if (focused) return;
        setLocal(canonical ? formatUsdWholeDisplay(canonical) : '');
    }, [canonical, focused]);

    const commit = () => {
        if (disabled) return;
        const parsed = parseUsdWholeInput(local);
        if (parsed === null) {
            if (canonical !== '') onCommit('');
            setLocal('');
            setFocused(false);
            return;
        }
        if (Number.isNaN(parsed)) {
            setLocal(canonical ? formatUsdWholeDisplay(canonical) : '');
            setFocused(false);
            return;
        }
        const next = String(parsed);
        if (next !== canonical) onCommit(next);
        setLocal(formatUsdWholeDisplay(next));
        setFocused(false);
    };

    const handleFocus = () => {
        if (disabled) return;
        setFocused(true);
        setLocal(canonical);
    };

    const handleBlur = () => {
        commit();
    };

    return (
        <input
            type="text"
            inputMode="decimal"
            autoComplete="off"
            className={cn(baseInput, className, inputClassName)}
            value={local}
            onChange={(e) => setLocal(e.target.value)}
            onFocus={handleFocus}
            onBlur={handleBlur}
            onKeyDown={(e) => {
                e.stopPropagation();
                if (e.key === 'Enter') {
                    e.preventDefault();
                    e.currentTarget.blur();
                }
            }}
            disabled={disabled}
        />
    );
}

function toDateInputValue(iso) {
    if (!iso) return '';
    const d = new Date(iso);
    if (Number.isNaN(d.getTime())) return '';
    return d.toISOString().slice(0, 10);
}

/**
 * ISO datetime from API → date input; onCommit receives YYYY-MM-DD or empty string for clear.
 */
export function EditableDateCell({ value, onCommit, className = '', disabled = false }) {
    const [local, setLocal] = useState(() => toDateInputValue(value));

    useEffect(() => {
        setLocal(toDateInputValue(value));
    }, [value]);

    const commit = () => {
        if (disabled) return;
        const prev = toDateInputValue(value);
        if (local !== prev) onCommit(local);
    };

    return (
        <input
            type="date"
            className={cn(baseInput, 'max-w-[11rem]', className)}
            value={local}
            onChange={(e) => setLocal(e.target.value)}
            onBlur={commit}
            onKeyDown={(e) => e.stopPropagation()}
            disabled={disabled}
        />
    );
}

	import React, { useEffect, useState } from 'react';
	import { cn } from '@/lib/utils';

	const baseInput =
	'w-full min-w-0 rounded-md border border-transparent bg-transparent px-1.5 py-0.5 text-sm text-slate-800 ' +
	'hover:border-slate-200 focus:border-violet-300 focus:bg-white focus:outline-none focus:ring-1 focus:ring-violet-200';

	/**
	* Inline text / email / number field: blur or Enter commits if the value changed.
	*/
	export function EditableCell({
	value,
	onCommit,
	className = '',
	inputClassName = '',
	type = 'text',
	multiline = false,
	disabled = false,
	}) {
	const str = value == null \|\| value === undefined ? '' : String(value);
	const [local, setLocal] = useState(str);

	useEffect(() => {
	setLocal(str);
	}, [str]);

	const commit = () => {
	if (disabled) return;
	const next = multiline ? local : local.trim();
	const prev = multiline ? str : str.trim();
	if (next !== prev) onCommit(next);
	};

	const stop = (e) => e.stopPropagation();

	if (multiline) {
	return (
	<textarea
	className={cn(baseInput, 'resize-y min-h-[2.5rem] max-w-full', className, inputClassName)}
	value={local}
	onChange={(e) => setLocal(e.target.value)}
	onBlur={commit}
	onKeyDown={stop}
	disabled={disabled}
	rows={2}
	/>
	);
	}

	return (
	<input
	type={type}
	className={cn(baseInput, className, inputClassName)}
	value={local}
	onChange={(e) => setLocal(e.target.value)}
	onBlur={commit}
	onKeyDown={(e) => {
	stop(e);
	if (e.key === 'Enter') {
	e.preventDefault();
	e.currentTarget.blur();
	}
	}}
	disabled={disabled}
	/>
	);
	}

	function usdWholeString(value) {
	if (value == null \|\| value === '') return '';
	const n = Math.round(Number(value));
	return Number.isFinite(n) ? String(n) : '';
	}

	function formatUsdWholeDisplay(value) {
	const s = usdWholeString(value);
	if (s === '') return '';
	return new Intl.NumberFormat('en-US', {
	style: 'currency',
	currency: 'USD',
	maximumFractionDigits: 0,
	minimumFractionDigits: 0,
	}).format(Number(s));
	}

	function parseUsdWholeInput(raw) {
	const cleaned = String(raw ?? '')
	.replace(/[$,\s]/g, '')
	.trim();
	if (cleaned === '') return null;
	const n = Math.round(Number(cleaned));
	return Number.isFinite(n) ? n : NaN;
	}

	/**
	* USD whole dollars: shows $1,234 when blurred; plain digits while focused (no number spinners).
	* onCommit receives '' to clear, or a digits string for the integer amount.
	*/
	export function EditableCurrencyCell({
	value,
	onCommit,
	className = '',
	inputClassName = '',
	disabled = false,
	}) {
	const canonical = usdWholeString(value);
	const [focused, setFocused] = useState(false);
	const [local, setLocal] = useState(() =>
	canonical ? formatUsdWholeDisplay(canonical) : ''
	);

	useEffect(() => {
	if (focused) return;
	setLocal(canonical ? formatUsdWholeDisplay(canonical) : '');
	}, [canonical, focused]);

	const commit = () => {
	if (disabled) return;
	const parsed = parseUsdWholeInput(local);
	if (parsed === null) {
	if (canonical !== '') onCommit('');
	setLocal('');
	setFocused(false);
	return;
	}
	if (Number.isNaN(parsed)) {
	setLocal(canonical ? formatUsdWholeDisplay(canonical) : '');
	setFocused(false);
	return;
	}
	const next = String(parsed);
	if (next !== canonical) onCommit(next);
	setLocal(formatUsdWholeDisplay(next));
	setFocused(false);
	};

	const handleFocus = () => {
	if (disabled) return;
	setFocused(true);
	setLocal(canonical);
	};

	const handleBlur = () => {
	commit();
	};

	return (
	<input
	type="text"
	inputMode="decimal"
	autoComplete="off"
	className={cn(baseInput, className, inputClassName)}
	value={local}
	onChange={(e) => setLocal(e.target.value)}
	onFocus={handleFocus}
	onBlur={handleBlur}
	onKeyDown={(e) => {
	e.stopPropagation();
	if (e.key === 'Enter') {
	e.preventDefault();
	e.currentTarget.blur();
	}
	}}
	disabled={disabled}
	/>
	);
	}

	function toDateInputValue(iso) {
	if (!iso) return '';
	const d = new Date(iso);
	if (Number.isNaN(d.getTime())) return '';
	return d.toISOString().slice(0, 10);
	}

	/**
	* ISO datetime from API → date input; onCommit receives YYYY-MM-DD or empty string for clear.
	*/
	export function EditableDateCell({ value, onCommit, className = '', disabled = false }) {
	const [local, setLocal] = useState(() => toDateInputValue(value));

	useEffect(() => {
	setLocal(toDateInputValue(value));
	}, [value]);

	const commit = () => {
	if (disabled) return;
	const prev = toDateInputValue(value);
	if (local !== prev) onCommit(local);
	};

	return (
	<input
	type="date"
	className={cn(baseInput, 'max-w-[11rem]', className)}
	value={local}
	onChange={(e) => setLocal(e.target.value)}
	onBlur={commit}
	onKeyDown={(e) => e.stopPropagation()}
	disabled={disabled}
	/>
	);
	}