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 Start component does not provide validation.

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

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​