Skip to main content

Milestone

Milestone allows for the selection of a specific event date with a label. 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 Milestone component supports minimal schema validation with yup & Formik. It is recommended to perform complex validation with the validate callback.

Result
Loading...
Live Editor
const options = [
	{
		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',
	},
	{
		id: 'ClientIs',
		defaultValue: 50,
		label: 'When client is',
		milestoneDate: '05/30/1980',
	},
];

function Example() {
	const [value, setValue] = useState();

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

	return <Milestone label="Milestone" onChange={handleChange} options={options} value={value} />;
}

render(<Example />);

With specific date ranges on a NumberField​

You can also specify a custom description prefix to individual options.

Result
Loading...
Live Editor
const options = [
	{
		id: 'ClientIs',
		defaultValue: 21,
		label: 'When client is',
		milestoneDate: '05/30/1980',
		descriptionPrefix: 'Actual age:',
	},
];

function Example() {
	const [value, setValue] = useState();

	return (
		<Milestone
			label="Milestone"
			onChange={setValue}
			options={options}
			value={value}
			numberFieldProps={{ minValue: 18, maxValue: 65 }}
		/>
	);
}

render(<Example />);

Or within the option itself if the props should be different. NumberField props defined in the option will always override over NumberField props.

Result
Loading...
Live Editor
const options = [
	{
		id: 'ClientIs',
		defaultValue: 21,
		label: 'When client is',
		milestoneDate: '05/30/1980',
		descriptionPrefix: 'Actual age:',
		numberFieldProps: { minValue: 18, maxValue: 65 },
	},
	{
		id: 'CalendarYear',
		defaultValue: 2050,
		label: 'When client retires',
		numberFieldProps: { minValue: 2045, maxValue: 2055 },
	},
];

function Example() {
	const [value, setValue] = useState();

	return <Milestone label="Milestone" onChange={setValue} options={options} value={value} />;
}

render(<Example />);

Validation​

The Milestone component supports minimal schema validation with yup & Formik. It is recommended to perform complex validation with the validate callback.

Result
Loading...
Live Editor
const options = [
	{
		id: 'ClientIs',
		defaultValue: 50,
		label: 'When client is',
		milestoneDate: '05/30/1980',
	},
];

function Example() {
	return (
		<Form
			initialValues={{}}
			onSubmit={(values, { setSubmitting }) => {
				console.log(values);
				setSubmitting(false);
			}}
			validationSchema={object().shape({
				milestone: object().shape({
					type: string(),
					value: mixed()
						.label('Age')
						.when('type', {
							is: 'ClientIs',
							then: number().min(25, 'Age must be at least 25').max(65, 'Age must be at most 65'),
						}),
				}),
			})}
		>
			<FormField>
				<Milestone label="Milestone" name="milestone" options={options} />
			</FormField>
		</Form>
	);
}

render(<Example />);

Analytics​

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

export default {
	value: 'Start',
	actions: {
		onChange: { type: 'START_CHANGE', payload: 'Change' },
	},
};

Props​