feat: Add support for a multiline integer array form (Sofie-Automation#1476)

Co-authored-by: Simon Rogers <[email protected]>

Author: scriptorian

packages/webui/src/client/lib/Components/MultiLineIntInput.tsx

@@ -0,0 +1,89 @@
+import { IntInputControl } from './IntInput'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faPlus, faTrash } from '@fortawesome/free-solid-svg-icons'
+import { useMemo } from 'react'
+import { getRandomString } from '@sofie-automation/corelib/dist/lib'
+
+interface IMultiLineIntInputControlProps {
+	disabled?: boolean
+	placeholder?: number[]
+
+	/** Call handleUpdate on every change, before focus is lost */
+	updateOnKey?: boolean
+
+	zeroBased?: boolean
+	values: number[]
+	handleUpdate: (values: number[]) => void
+
+	min?: number
+	max?: number
+	step?: number
+}
+export function MultiLineIntInputControl({
+	values,
+	disabled,
+	placeholder,
+	handleUpdate,
+	updateOnKey,
+	zeroBased,
+	min,
+	max,
+	step,
+}: Readonly<IMultiLineIntInputControlProps>): JSX.Element {
+	const handleUpdateArrayItem = (value: number, index: number) => {
+		const clonedArray = Array.from(values)
+		clonedArray[index] = value
+		handleUpdate(clonedArray)
+	}
+
+	const handleDelete = (index: number) => {
+		const clonedArray = Array.from(values)
+		clonedArray.splice(index, 1)
+		handleUpdate(clonedArray)
+	}
+
+	const handleAdd = () => {
+		const clonedArray = Array.from(values)
+		let defaultValue = 0
+		if (placeholder?.length)
+			defaultValue = placeholder[placeholder.length > values.length ? values.length : placeholder.length - 1]
+		clonedArray.push(defaultValue)
+		handleUpdate(clonedArray)
+	}
+
+	const keys: string[] = useMemo(() => values.map(() => getRandomString()), [values.length])
+
+	return (
+		<div>
+			{values.map((value, index) => {
+				return (
+					<div key={keys[index]} style={{ display: 'flex', alignItems: 'center', marginBottom: '2px' }}>
+						<IntInputControl
+							value={value}
+							disabled={disabled}
+							updateOnKey={updateOnKey}
+							zeroBased={zeroBased}
+							handleUpdate={(value) => {
+								handleUpdateArrayItem(value, index)
+							}}
+							step={step}
+							min={min}
+							max={max}
+						/>
+						<button
+							className="action-btn"
+							onClick={() => handleDelete(index)}
+							style={{ marginLeft: '10px' }}
+							disabled={disabled}
+						>
+							<FontAwesomeIcon icon={faTrash} />
+						</button>
+					</div>
+				)
+			})}
+			<button className="btn btn-primary" onClick={handleAdd} disabled={disabled}>
+				<FontAwesomeIcon icon={faPlus} />
+			</button>
+		</div>
+	)
+}

packages/webui/src/client/lib/forms/SchemaFormWithOverrides.tsx

@@ -31,6 +31,7 @@ import { SchemaFormObjectTable } from './SchemaFormTable/ObjectTable.js'
 import { getSchemaUIField, SchemaFormUIField } from '@sofie-automation/blueprints-integration'
 import { SchemaFormSectionHeader } from './SchemaFormSectionHeader.js'
 import { Base64ImageInputControl } from '../Components/Base64ImageInput.js'
+import { MultiLineIntInputControl } from '../Components/MultiLineIntInput.js'
 import { ToggleSwitchControl } from '../Components/ToggleSwitch.js'
 
 interface SchemaFormWithOverridesProps extends SchemaFormCommonProps {
@@ -167,6 +168,9 @@ const ArrayFormWithOverrides = (props: Readonly<SchemaFormWithOverridesProps>) =
 			} else {
 				return <StringArrayFormWithOverrides {...childProps} />
 			}
+		case TypeName.Number:
+		case TypeName.Integer:
+			return <IntArrayFormWithOverrides {...childProps} />
 		case TypeName.Object:
 			if (props.allowTables) {
 				return <SchemaFormArrayTable {...props} />
@@ -385,6 +389,22 @@ const StringArrayFormWithOverrides = ({ schema, commonAttrs }: Readonly<FormComp
 	)
 }
 
+const IntArrayFormWithOverrides = ({ schema, commonAttrs }: Readonly<FormComponentProps>) => {
+	return (
+		<LabelAndOverrides {...commonAttrs}>
+			{(values, handleUpdate) => (
+				<MultiLineIntInputControl
+					placeholder={schema.default}
+					values={values || []}
+					handleUpdate={handleUpdate}
+					min={schema.minimum}
+					max={schema.maximum}
+				/>
+			)}
+		</LabelAndOverrides>
+	)
+}
+
 const JsonFormWithOverrides = ({ schema, commonAttrs }: Readonly<FormComponentProps>) => {
 	return (
 		<LabelAndOverrides {...commonAttrs}>