@uifabric/experiments/lib/components/Toggle/Toggle.view.js

Experimental React components for building experiences for Office 365.

var _this = this;
import * as tslib_1 from "tslib";
/** @jsx withSlots */
import { KeytipData } from 'office-ui-fabric-react/lib/KeytipData';
import { Label } from '../../utilities/factoryComponents';
import { withSlots, getSlots } from '../../Foundation';
import { inputProperties, getNativeProps } from '../../Utilities';
export var ToggleView = function (props) {
    var _a = props.as, RootType = _a === void 0 ? 'div' : _a, label = props.label, ariaLabel = props.ariaLabel, checked = props.checked, disabled = props.disabled, onChange = props.onChange, keytipProps = props.keytipProps, onClick = props.onClick, toggleButtonRef = props.toggleButtonRef;
    var toggleNativeProps = getNativeProps(_this.props, inputProperties, ['defaultChecked']);
    var Slots = getSlots(props, {
        root: RootType,
        label: Label,
        container: 'div',
        pill: 'button',
        thumb: 'div',
        text: Label
    });
    return (withSlots(Slots.root, null,
        withSlots(Slots.label, { htmlFor: _this._id }, label),
        withSlots(Slots.container, null,
            withSlots(KeytipData, { keytipProps: keytipProps, ariaDescribedBy: toggleNativeProps['aria-describedby'], disabled: disabled }, function (keytipAttributes) { return (withSlots(Slots.pill, tslib_1.__assign({}, toggleNativeProps, keytipAttributes, { disabled: disabled, id: _this._id, type: "button", role: "switch" // ARIA 1.1 definition; "checkbox" in ARIA 1.0
                , ref: toggleButtonRef, "aria-disabled": disabled, "aria-checked": checked, "aria-label": ariaLabel, "data-is-focusable": true, onChange: onChange, onClick: onClick }),
                withSlots(Slots.thumb, null))); }),
            withSlots(Slots.text, null))));
};
//# sourceMappingURL=Toggle.view.js.map