zavadil-react-common 1.2.58 → 1.2.61

package/src/component/forms/AutocompleteSelect.tsx

@@ -0,0 +1,101 @@
+import {useCallback, useEffect, useMemo, useState} from "react";
+import {CancellablePromise, EntityBase} from "zavadil-ts-common";
+import TextInputWithReset from "./TextInputWithReset";
+import {Badge, Dropdown, Stack} from "react-bootstrap";
+
+export type AutocompleteSelectProps<T extends EntityBase> = {
+	selected?: T | null;
+	onChange: (e: T | null) => any;
+	onSearch: (text: string) => Promise<Array<T>>;
+	disabled?: boolean;
+	labelGetter?: (item: T) => string;
+}
+
+export function AutocompleteSelect<T extends EntityBase>({selected, disabled, labelGetter, onChange, onSearch}: AutocompleteSelectProps<T>) {
+	const [searchPromise, setSearchPromise] = useState<CancellablePromise>();
+	const [searchText, setSearchText] = useState<string>();
+	const [itemSelection, setItemSelection] = useState<Array<T>>();
+
+	const finalLabelGetter = useMemo(
+		() => labelGetter ? labelGetter : (item: T) => `[${item.id}]`,
+		[labelGetter]
+	);
+
+	const finalCss = useMemo(
+		() => selected ? 'border-primary' : undefined,
+		[selected]
+	);
+
+	useEffect(() => {
+		setSearchText(selected ? finalLabelGetter(selected) : '');
+	}, [selected, finalLabelGetter]);
+
+	const reset = useCallback(
+		() => {
+			onChange(null)
+			setSearchText('');
+			setItemSelection(undefined);
+		},
+		[]
+	);
+
+	const userChangedText = useCallback(
+		(s: string) => {
+			setSearchText(s);
+			if (searchPromise) {
+				searchPromise.cancel();
+			}
+			const cancellable = new CancellablePromise(onSearch(s));
+			cancellable.promise.then(setItemSelection);
+			setSearchPromise(cancellable);
+		},
+		[searchPromise]
+	);
+
+	const userLeftSearch = useCallback(
+		() => {
+			if (searchPromise) {
+				searchPromise.cancel();
+				setSearchPromise(undefined);
+			}
+			if (selected) {
+				setSearchText(finalLabelGetter(selected));
+			} else {
+				setSearchText('');
+			}
+			setItemSelection(undefined);
+		},
+		[selected, searchPromise, finalLabelGetter]
+	);
+
+	return (
+		<Dropdown defaultShow={false} show={itemSelection !== null} onBlur={userLeftSearch}>
+			<Stack direction="horizontal" gap={2}>
+				<TextInputWithReset
+					disabled={disabled}
+					value={searchText}
+					onChange={userChangedText}
+					onReset={reset}
+					className={finalCss}
+				/>
+				{
+					selected &&
+					<Badge>{selected.id}</Badge>
+				}
+			</Stack>
+
+			{
+				itemSelection &&
+				<Dropdown.Menu>
+					{
+						itemSelection.map(
+							(item) => <Dropdown.Item key={item.id} onSelect={() => onChange(item)}>
+								{finalLabelGetter(item)}
+							</Dropdown.Item>
+						)
+					}
+				</Dropdown.Menu>
+			}
+		</Dropdown>
+	);
+}

package/src/component/forms/LookupSelect.tsx

@@ -8,12 +8,13 @@ export type LookupSelectProps = {
 	onChange: (n: number | null | undefined) => any;
 	options?: Array<LookupTableEntity> | null;
 	showEmptyOption?: boolean;
+	disabled?: boolean;
 	emptyOptionLabel?: string;
 	sort?: boolean;
 	labelGetter?: <T extends LookupTableEntity>(item: T) => string;
 }
 
-export function LookupSelect({id, sort, labelGetter, onChange, options, showEmptyOption, emptyOptionLabel}: LookupSelectProps) {
+export function LookupSelect({id, sort, disabled, labelGetter, onChange, options, showEmptyOption, emptyOptionLabel}: LookupSelectProps) {
 	const lOptions: GenericSelectOption<number>[] = useMemo(
 		() => {
 			let result: Array<LookupTableEntity> = []
@@ -35,6 +36,7 @@ export function LookupSelect({id, sort, labelGetter, onChange, options, showEmpt
 
 	return (
 		<NumberSelect
+			disabled={disabled}
 			value={id}
 			options={lOptions}
 			onChange={onChange}

package/src/component/forms/NumberSelect.tsx

@@ -4,7 +4,7 @@ import {GenericSelectProps, StringSelect} from "./StringSelect";
 
 export type NumberSelectProps = GenericSelectProps<number>;
 
-export function NumberSelect({value, options, onChange, showEmptyOption, emptyOptionLabel}: NumberSelectProps) {
+export function NumberSelect({value, options, disabled, onChange, showEmptyOption, emptyOptionLabel}: NumberSelectProps) {
 	const nValue = useMemo(
 		() => {
 			if (!value) return '';
@@ -35,6 +35,7 @@ export function NumberSelect({value, options, onChange, showEmptyOption, emptyOp
 
 	return (
 		<StringSelect
+			disabled={disabled}
 			value={nValue}
 			options={nOptions}
 			onChange={nChange}

package/src/component/forms/StringSelect.tsx

@@ -11,12 +11,13 @@ export type GenericSelectProps<T> = {
 	options: Array<GenericSelectOption<T>>;
 	onChange: (id: T | null | undefined) => any;
 	showEmptyOption?: boolean;
+	disabled?: boolean;
 	emptyOptionLabel?: string;
 }
 
 export type StringSelectProps = GenericSelectProps<string>;
 
-export function StringSelect({value, options, onChange, showEmptyOption, emptyOptionLabel}: StringSelectProps) {
+export function StringSelect({value, options, disabled, onChange, showEmptyOption, emptyOptionLabel}: StringSelectProps) {
 	if (StringUtil.isEmpty(value) && options.length > 0 && showEmptyOption !== true) {
 		onChange(options[0].id);
 		return <span>{value} - selecting default {options[0].id}</span>;
@@ -26,6 +27,7 @@ export function StringSelect({value, options, onChange, showEmptyOption, emptyOp
 		<Form.Select
 			value={value || ''}
 			onChange={(e) => onChange(e.target.value)}
+			disabled={disabled}
 		>
 			{
 				(showEmptyOption === true) && (

package/src/component/forms/TextInputWithReset.tsx

@@ -7,9 +7,12 @@ export type TextInputWithResetProps = {
 	value?: string | null;
 	onChange: (s: string) => any;
 	onReset?: () => any;
+	disabled?: boolean;
+	onBlur?: () => any;
+	className?: string;
 };
 
-export function TextInputWithReset({value, onChange, onReset}: TextInputWithResetProps) {
+export function TextInputWithReset({value, onChange, onReset, onBlur, disabled, className}: TextInputWithResetProps) {
 	const actual = useMemo(
 		() => StringUtil.getNonEmpty(value),
 		[value]
@@ -24,11 +27,13 @@ export function TextInputWithReset({value, onChange, onReset}: TextInputWithRese
 	);
 
 	return (
-		<InputGroup>
+		<InputGroup className={className}>
 			<Form.Control
 				type="text"
+				disabled={disabled}
 				value={actual}
 				onChange={(e) => onChange(e.target.value)}
+				onBlur={onBlur}
 			/>
 			<Button onClick={reset}>
 				<div className="d-flex align-items-center">