StartStop

StartStop is a set of controls for selecting a start and stop date. The shape of the options being passed in will determine whether a PlusMinus control appears to specify a duration, age, or some other value.

Options can also specify a milestoneDate which will be used to calculate a date based on the selected duration.

The StartStop component does not provide validation. However, it does provide a helper function to validate the start and stop values that can be used as an onBlur callback. The helper function is handleStartStopBlur and is exported by the StartStop component.

Result

Loading...

Live Editor

const startOptions = [
	{
		id: 'Start',
		defaultValue: '01/01/2000',
		label: 'Start (01/01/2000)',
	},
	{
		id: 'ClientDeath',
		defaultValue: '05/01/2055',
		label: 'Death of client (05/01/2055)',
	},
	{
		id: 'CalendarYear',
		defaultValue: 2050,
		label: 'Calendar Year',
		numberFieldProps: { minValue: 2045, maxValue: 2055 },
	},
	{
		id: 'ClientIs',
		defaultValue: 50,
		label: 'When client is',
		milestoneDate: '05/30/1980',
		descriptionPrefix: 'Actual year:',
		numberFieldProps: { minValue: 18, maxValue: 100 },
	},
];

const stopOptions = [
	{
		id: 'Stop',
		defaultValue: '12/31/2022',
		label: 'Stop (12/31/2022)',
	},
	{
		id: 'SpouseDeath',
		defaultValue: '02/23/2067',
		label: 'Death of spouse (02/23/2067)',
	},
	{
		id: 'Duration',
		label: 'Duration',
		defaultValue: 4,
	},
	{
		id: 'Retirement',
		defaultValue: '05/05/2030',
		label: 'Retirement (05/05/2030)',
	},
	{
		id: 'CalendarYear',
		defaultValue: 2050,
		label: 'Calendar Year',
		numberFieldProps: { minValue: 2045, maxValue: 2055 },
	},
	{
		id: 'SpouseIs',
		defaultValue: 65,
		label: 'When spouse is',
		milestoneDate: '05/30/1978',
		descriptionPrefix: 'Actual year:',
		numberFieldProps: { minValue: 18, maxValue: 100 },
	},
];

function Example() {
	const [startValue, setStartValue] = useState();
	const [stopValue, setStopValue] = useState();
	const [errorText, setErrorText] = useState();

	const handleChange = (payload) => {
		console.log('change', payload);

		setStartValue(payload.startValue);
		setStopValue(payload.stopValue);
	};

	const handleBlur = () => {
		setErrorText(handleStartStopBlur(startValue, stopValue, startOptions, stopOptions));
	};

	return (
		<StartStop
			errorText={errorText}
			isInvalid={!!errorText}
			onStartBlur={handleBlur}
			onStartChange={handleChange}
			onStopBlur={handleBlur}
			onStopChange={handleChange}
			startOptions={startOptions}
			startValue={startValue}
			stopOptions={stopOptions}
			stopValue={stopValue}
		/>
	);
}

render(<Example />);

Analytics

The StartStop component is trackable through Kyber Analytics. This is the default analytics config.

export default {
	value: 'StartStop',
	actions: {
		onStartChange: { type: 'STARTSTOP_START_CHANGE', payload: 'Change' },
		onStopChange: { type: 'STARTSTOP_STOP_CHANGE', payload: 'Change' },
	},
};

Props