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 supports minimal schema validation with yup & Formik. It is recommended to perform complex validation with the validate callback. A helper function (handleStartStopBlur) is provided to validate the start and stop values that can be used as an onBlur callback.

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 />);

Validation

The StartStop component supports minimal schema validation with yup & Formik. It is recommended to perform complex validation with the validate callback. A helper function (handleStartStopBlur) is provided to validate the start and stop values along with the options used.

Result

Loading...

Live Editor

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

const stopOptions = [
	{
		id: 'Retirement',
		defaultValue: '05/05/2030',
		label: 'Retirement (05/05/2030)',
	},
	{
		id: 'CalendarYear',
		defaultValue: 2050,
		label: 'Calendar Year',
	},
	{
		id: 'SpouseIs',
		defaultValue: 65,
		label: 'When spouse is',
		milestoneDate: '05/30/1978',
		descriptionPrefix: 'Actual year:',
	},
];

function Example() {
	return (
		<Form
			initialValues={{}}
			onSubmit={(values, { setSubmitting }) => {
				console.log(values);
				setSubmitting(false);
			}}
			validateOnBlur
			validationSchema={object().shape({
				startstop: object().shape({
					startValue: object().shape({
						type: string().required('Start type is required'),
						value: mixed()
							.when('type', {
								is: 'ClientIs',
								then: number()
									.label('Age')
									.min(25, 'Age must be at least 25')
									.max(65, 'Age must be at most 65'),
							})
							.when('type', {
								is: 'CalendarYear',
								then: number()
									.label('Calendar Year')
									.min(2024, 'Year must be at least 2024')
									.max(2100, 'Year must be at most 2100'),
							}),
					}),
					stopValue: object().shape({
						type: string().required('Stop type is required'),
						value: mixed().when('type', {
							is: 'CalendarYear',
							then: number()
								.label('Calendar Year')
								.min(2024, 'Year must be at least 2024')
								.max(2100, 'Year must be at most 2100'),
						}),
					}),
				}),
			})}
		>
			<FormField
				validate={(values) =>
					values &&
					handleStartStopBlur(values.startValue, values.stopValue, startOptions, stopOptions)
				}
			>
				<StartStop
					name="startstop"
					label="StartStop"
					startOptions={startOptions}
					stopOptions={stopOptions}
				/>
			</FormField>
		</Form>
	);
}

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