LVD-FluentUi-MultiTextField

A multiple text field input component, built using the FluentUI library, with the following features:

• specify optional minimum, maximum and initial value count;
• controls for adding and removing input items;
• fine-grained control over input item configuration, including appearance and error message handling.

Also an animated demo which is configured for a minmum of 3 input items, a maximum of 10 and an initial count of 4.

Installation

npm install --save lvd-fluentui-multitextfield

Demo

The demo directory contains a compiled and ready-to-run example. Just open up the index.html file.

Basic Usage

import React from 'react';
import { MultiTextField } from 'lvd-fluentui-multitextfield';

class MultiTextFieldSamplePage extends React.Component {
	constructor(props) {
		super(props);

		this.state = {
			values: []
		};

		this._handleValuesChanged = 
			this._handleValuesChanged.bind(this);
	}

	_handleValuesChanged(values) {
		// Do something with the values
		this.setState({
			values: values
		});
	}

	render() {
		return (
			<MultiTextField 
				values={this.state.values}
				onChange={this._handleValuesChanged}
			/>
		);
	}
}

You can find a full working example here.

Styling

You can either directly include the dist/style.css into your html web page or use the @import directive inside your stylesheet if building using webpack:

@import '~lvd-fluentui-multitextfield/dist/style.css';

Also see the component itself.

Building

To build the demo application:

npm run build-app

To build the library:

npm run build-dist

To build both in one sitting:

npm run build

Customization Options

What	Prop Name	Type	Notes
Set additional master container css class name	className	string	Defaults to null.
Set additional master inline css style properties	style	object	Key-value plain javascript object. Defaults to {}.
Set input label	label	string	Defaults to empty string.
Configure all input items	inputProps	Input Items Configuration Object	See below.
Configure the add input item action	addInputItemActionProps	Add Input Action Configuration Object	See below.
Configure the remove input item action	removeInputItemActionProps	Remove Input Action Configuration Object	See below.
Set minimum input item count	minItemCount	Number	Defaults to 1.
Set maximum input item count	maxItemCount	Number	Defaults to Number.MAX_SAFE_INTEGER.
Set initial input item count	initialItemCount	Number	Defaults to 1. Must be within specified minimum and maximum input item counts.
Set values	values	string[]	Defaults to an array of empty string values with the length equal to the specified initial item count.
Configure specific input item	onGetInputProps	(itemValue:string, itemIndex:number): Input Items Configuration Object	See below.
Get error message for specific input item	onGetInputItemErrorMessage	(itemValue:string, itemIndex:number): string	Return empty string if no error. By default, if the input item is required, but no error message is provided, the You must fill in a value message id displayed.
Get default value for specific input item	onGetDefaultInputItemValue	(itemIndex:number): string	Default value defaults to an empty string.

Input Items Configuration Object

A plain javascript object with the following properties:

Name	Type	Notes
className	string	CSS class name for the actual input element. Defaults to null.
style	object	Additional inline css style properties for the actual input element. Defaults to {}.
label	string	Individual label for the input item. Defaults to null.
placeholder	string	Individual placeholder for the actual input element. Defaults to Please enter a value.
description	string	Individual description for the actual input element. Defaults to null.
required	boolean	Whether the actual input element is required or not. Defaults to false.
underlined	boolean	Whether or not to display the actual input element in underlined style. Defaults to false.
readOnly	boolean	Whether or not to make the actual input element read-only. Defaults to false.
disabled	boolean	Whether or not to disable the actual input element. Defaults to false.
borderless	boolean	Whether or not to make the actual input element borderless. Defaults to false.

Add Input Action Configuration Object

A plain javascript object with the following properties:

Name	Type	Notes

Remove Input Action Configuration Object

A plain javascript object with the following properties:

Name	Type	Notes

Events

Event	Prop Name	Arguments	Notes
Value added at index	onInputItemAdded	(newValue:string, itemIndex:number)	-
Value removed at index	onInputItemRemoved	(removedValue:string, itemIndex:number)	-
Input item focused	onInputItemFocus	(itemIndex:number)	Triggered when one of the underlying TextFields gains focus.
Input item lost focus	onInputItemBlur	(itemIndex:number)	Triggered when one of the underlying TextFields loses focus.
Value changed	onChange	(values:string[])	Triggered when: a new input item is added, an existing input item is removed or the value of an existing input item is changed.

GitHub

https://github.com/alexboia/LVD-FluentUi-MultiTextField