Number Edit Cell

packages/controls/src/date/LocalTimePicker/LocalTimePicker.tsx

@@ -27,37 +27,45 @@ export function LocalTimePicker(props: LocalTimePickerProps): JSX.Element {
 		action,
 		actionPosition,
 		className,
-		disabled,
 		error,
 		fluid,
 		focus,
-		icon,
-		iconPosition,
 		inverted,
 		label,
 		labelPosition,
 		loading,
 		size,
 		tabIndex,
 		transparent,
+		startFocused,
+		startSelected,
 		...rest
 	} = props;
 
-	let selected;
-	if (typeof value === 'number') selected = toDate(LocalTime.ofSecondOfDay(value));
-	else selected = value ? toDate(value) : null;
-
 	const inputProps = {
 		as,
 		action,
 		actionPosition,
-		className,
-		disabled,
+		className: `${className || ''} icon`,
 		error,
+		focus,
 		fluid,
+		inverted,
+		label,
+		labelPosition,
+		loading,
+		size,
+		tabIndex,
+		transparent,
+	};
+
+	const maskedInputProps = {
+		as,
+		action,
+		actionPosition,
+		className,
+		error,
 		focus,
-		icon,
-		iconPosition,
 		inverted,
 		label,
 		labelPosition,
@@ -67,6 +75,10 @@ export function LocalTimePicker(props: LocalTimePickerProps): JSX.Element {
 		transparent,
 	};
 
+	let selected;
+	if (typeof value === 'number') selected = toDate(LocalTime.ofSecondOfDay(value));
+	else selected = value ? toDate(value) : null;
+
 	const handleDatePickerBlur = (e: React.FocusEvent<HTMLInputElement>) => {
 		onBlur && onBlur(e);
 	};
@@ -85,7 +97,7 @@ export function LocalTimePicker(props: LocalTimePickerProps): JSX.Element {
 			dateFormat="hh:mm aa"
 			customInput={
 				<Input {...inputProps}>
-					<MaskedTimeInput {...inputProps} onBlur={handleDatePickerBlur} />
+					<MaskedTimeInput {...maskedInputProps} onBlur={handleDatePickerBlur} />
 				</Input>
 			}
 			onBlur={handleDatePickerBlur}

packages/controls/src/date/LocalTimePicker/MaskedTimeInput.tsx

@@ -1,9 +1,12 @@
 import debug from 'debug';
 import {forwardRef} from 'react';
 import {MaskedInput, MaskedInputProps} from '../../inputs/MaskedInput';
+import type {MaskedInputRef} from '../../inputs/MaskedInput/MaskedInput';
 
 const d = debug('thx.controls.date.LocalTimePicker.MaskedTimeInput');
 
+export type MaskedTimeInputRef = MaskedInputRef;
+
 export interface MaskedTimeInputValue {
 	target: {
 		value: string;
@@ -14,19 +17,20 @@ export interface MaskedTimeInputProps {
 	onChange?: (value: MaskedTimeInputValue) => void;
 }
 
-// eslint-disable-next-line no-unused-vars,@typescript-eslint/no-unused-vars
-function MaskedTimeInputInner(props: MaskedTimeInputProps & Omit<MaskedInputProps, 'onChange'>, ref: any) {
-	const {onChange, ...rest} = props;
-
-	return (
-		<MaskedInput
-			mask={{alias: 'datetime', inputFormat: 'hh:MM TT'}}
-			onChange={(value: string) => {
-				if (onChange) onChange({target: {value: value || ''}});
-			}}
-			{...rest}
-		/>
-	);
-}
+export const MaskedTimeInput = forwardRef<MaskedTimeInputRef, MaskedTimeInputProps & Omit<MaskedInputProps, 'onChange'>>(
+	(props: MaskedTimeInputProps & Omit<MaskedInputProps, 'onChange'>, ref: any) => {
+		const {onChange, name, ...rest} = props;
 
-export const MaskedTimeInput = forwardRef(MaskedTimeInputInner);
+		return (
+			<MaskedInput
+				{...rest}
+				ref={ref}
+				name={name}
+				mask={{alias: 'datetime', inputFormat: 'hh:MM TT'}}
+				onChange={(value: string) => {
+					if (onChange) onChange({target: {value: value || ''}});
+				}}
+			/>
+		);
+	},
+);

packages/controls/src/index.ts

@@ -41,6 +41,7 @@ export {
 	LocalDateEditCell,
 	LocalTimeEditCell,
 	MoneySumFooter,
+	NumberEditCell,
 	StringEditCell,
 	DropdownCell,
 	HoverCell,

packages/controls/src/inputs/TableInput/NumberEditCell.tsx

@@ -0,0 +1,46 @@
+import debug from 'debug';
+import {useState} from 'react';
+import {Input, InputProps} from 'semantic-ui-react';
+import type {TableCellProps} from './TableInput';
+import type {AddRowOnTabIf} from './addRowOnTab';
+import {addRowOnTab} from './addRowOnTab';
+
+const d = debug('thx.controls.inputs.TableInput.NumberEditCell');
+
+interface NumberEditCellOptions<D extends Record<number, unknown>> {
+	/** Override SemanticUI Input props */
+	inputProps?: InputProps;
+	/** If function is present, and returns true, will add a new row if tab is pressed on the last row */
+	addRowOnTabIf?: AddRowOnTabIf<D, number>;
+}
+
+export function NumberEditCell<D extends Record<number, unknown>>(options?: NumberEditCellOptions<D>) {
+	const {inputProps, addRowOnTabIf} = options || {};
+
+	return function NumberEditCellFn(props: TableCellProps<D, number>) {
+		const {
+			value: initialValue,
+			row: {index},
+			column: {id},
+			updateData,
+		} = props;
+
+		const [value, setValue] = useState(initialValue);
+
+		return (
+			<Input
+				fluid
+				transparent
+				{...inputProps}
+				value={value}
+				onChange={(ev, v) => {
+					setValue(v.value ? parseFloat(v.value) : 0);
+				}}
+				onBlur={() => {
+					updateData(index, id, value);
+				}}
+				onKeyDown={(event: KeyboardEvent) => addRowOnTab(event, value, props, addRowOnTabIf)}
+			/>
+		);
+	};
+}

packages/controls/src/inputs/TableInput/index.ts

@@ -6,6 +6,7 @@ export {CheckboxEditCell} from './CheckboxEditCell';
 export {LocalDateEditCell} from './LocalDateEditCell';
 export {LocalTimeEditCell} from './LocalTimeEditCell';
 export {MoneySumFooter} from './MoneySumFooter';
+export {NumberEditCell} from './NumberEditCell';
 export {StringEditCell} from './StringEditCell';
 export {DropdownCell} from './DropdownCell';
 export {HoverCell} from './HoverCell';

packages/controls/src/inputs/TableInput/main.story.tsx

@@ -13,6 +13,7 @@ import {MoneyEditCell} from './MoneyEditCell';
 import {MoneySumFooter} from './MoneySumFooter';
 import {StringEditCell} from './StringEditCell';
 import {TableInput} from './TableInput';
+import {NumberEditCell} from './NumberEditCell';
 
 const d = debug('thx.controls.inputs.TableInput.main.story');
 
@@ -48,6 +49,11 @@ export function Main() {
 				Header: 'Name',
 				Cell: StringEditCell(),
 			},
+			{
+				accessor: 'number',
+				Header: 'Number',
+				Cell: NumberEditCell(),
+			},
 			{
 				accessor: 'date',
 				Header: 'Date',