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 onChange={handleChange} options={options} value={value} />; } render(<Example />);

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 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 onChange={setValue} options={options} value={value} numberFieldProps={{ minValue: 18, maxValue: 65 }} /> ); } render(<Example />);

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
            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 onChange={setValue} options={options} value={value} />; } render(<Example />);

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 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