lucid-ui/lib/components/SwitchLabeled/examples/interactive-with-changing-labels.js

A UI component library from AppNexus.

import React from 'react';
import createClass from 'create-react-class';
import { SwitchLabeled } from '../../../index';
var style = {
  marginBottom: '3px'
};
export default createClass({
  getInitialState: function getInitialState() {
    return {
      airplaneMode: true,
      bluetooth: true,
      cellularData: true,
      spam: true
    };
  },
  handleSelectedAirplaneMode: function handleSelectedAirplaneMode(isSelected) {
    this.setState({
      airplaneMode: isSelected
    });
  },
  handleSelectedBluetooth: function handleSelectedBluetooth(isSelected) {
    this.setState({
      bluetooth: isSelected
    });
  },
  handleSelectedCellularData: function handleSelectedCellularData(isSelected) {
    this.setState({
      cellularData: isSelected
    });
  },
  handleSelectedSpam: function handleSelectedSpam(isSelected) {
    this.setState({
      spam: isSelected
    });
  },
  render: function render() {
    var spamSwitchLabel = this.state.spam ? 'Yes! I would like to receive updates, special offers, and other information from AppNexus and its subsidiaries.' : 'No! Please keep your wicked, dirty spam all to yourselves!';
    return /*#__PURE__*/React.createElement("section", null, /*#__PURE__*/React.createElement("span", {
      style: {
        display: 'inline-flex',
        flexDirection: 'column',
        alignItems: 'flex-start'
      }
    }, /*#__PURE__*/React.createElement(SwitchLabeled, {
      isSelected: this.state.airplaneMode === true,
      Label: "Airplane Mode ".concat(this.state.airplaneMode === true ? 'Activated' : 'Deactivated'),
      onSelect: this.handleSelectedAirplaneMode,
      style: style
    }), /*#__PURE__*/React.createElement(SwitchLabeled, {
      isSelected: this.state.bluetooth === true,
      Label: "Bluetooth ".concat(this.state.bluetooth === true ? 'Enabled' : 'Disabled'),
      onSelect: this.handleSelectedBluetooth,
      style: style
    }), /*#__PURE__*/React.createElement(SwitchLabeled, {
      isSelected: this.state.cellularData === true,
      Label: "".concat(this.state.cellularData ? 'Use' : 'Do Not Use', " Cellular Data"),
      onSelect: this.handleSelectedCellularData,
      style: style
    })), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(SwitchLabeled, {
      isSelected: this.state.spam === true,
      onSelect: this.handleSelectedSpam,
      style: style
    }, /*#__PURE__*/React.createElement(SwitchLabeled.Label, null, spamSwitchLabel)));
  }
});