SegmentedControl

Notes

A pre-styled control that allows for multiple values in a tabbable-fashion (one selected at a time)

Props

visualStyleoneOf('default', 'dark', 'inverted')['default']
Controls the visual style of the component
inputs
arrayOf [
shape {
displayNamestring*
The displayed text of the input

valuestring*
The value of the input

iconPathstring
The path of the icon to be used

}
]
*
The inputs fields passed to the SegmentedControl. The number of inputs (objects) in the array determines the number of options shown within the SegmentedControl component.
onValueChangefunc*
A function called when the selected value of the the SegmentedControl changes (when an individual control is clicked). This function receives the value defined in the inputs prop
selectedValuestring
The currently selected value--the selected value will be highlighted
classNamestring
The classes applied to the container component

class SegmentedControlExample extends React.Component {
    constructor() {
        super();
        this.state = { selectedValue: 'drink' };
        this.handleChangeValue = this.handleChangeValue.bind(this);
    };

    handleChangeValue(value) {
        this.setState({ selectedValue: value });
    };

    render() {
        return (
            <SegmentedControl
                visualStyle="dark"
                inputs={[
                    {
                        displayName: 'Drink',
                        value: 'drink'
                    },
                    {
                        displayName: 'Food',
                        value: 'food'
                    },
                    {
                        displayName: 'Dessert',
                        value: 'dessert'
                    }
                ]}
                onValueChange={this.handleChangeValue}
                selectedValue={this.state.selectedValue}
            />
        );
    }
}

render(<SegmentedControlExample />);

class SegmentedControlWithIconsExample extends React.Component {
    constructor() {
        super();
        this.state = { selectedValue: 'instore' };
        this.handleChangeValue = this.handleChangeValue.bind(this);
    };

    handleChangeValue(value) {
        this.setState({ selectedValue: value });
    };

    render() {
        return (
            <div className="bg-houseGreen p2">
                <SegmentedControl
                    visualStyle="inverted"
                    inputs={[
                        {
                            displayName: 'In store',
                            value: 'instore',
                            iconPath: iconPaths.pickupInStore
                        },
                        {
                            displayName: 'Drive-thru',
                            value: 'drivethru',
                            iconPath: iconPaths.pickupDriveThru
                        },
                        {
                            displayName: 'Curbside',
                            value: 'curbside',
                            iconPath: iconPaths.pickupCurbside
                        }
                    ]}
                    onValueChange={this.handleChangeValue}
                    selectedValue={this.state.selectedValue}
                />
            </div>
        );
    }
}

render(<SegmentedControlWithIconsExample />);