@uifabric/experiments
Version:
Experimental React components for building experiences for Office 365.
25 lines • 2.09 kB
JavaScript
define(["require", "exports", "tslib", "office-ui-fabric-react/lib/KeytipData", "../../utilities/factoryComponents", "../../Foundation", "../../Utilities"], function (require, exports, tslib_1, KeytipData_1, factoryComponents_1, Foundation_1, Utilities_1) {
"use strict";
var _this = this;
Object.defineProperty(exports, "__esModule", { value: true });
exports.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 = Utilities_1.getNativeProps(_this.props, Utilities_1.inputProperties, ['defaultChecked']);
var Slots = Foundation_1.getSlots(props, {
root: RootType,
label: factoryComponents_1.Label,
container: 'div',
pill: 'button',
thumb: 'div',
text: factoryComponents_1.Label
});
return (Foundation_1.withSlots(Slots.root, null,
Foundation_1.withSlots(Slots.label, { htmlFor: _this._id }, label),
Foundation_1.withSlots(Slots.container, null,
Foundation_1.withSlots(KeytipData_1.KeytipData, { keytipProps: keytipProps, ariaDescribedBy: toggleNativeProps['aria-describedby'], disabled: disabled }, function (keytipAttributes) { return (Foundation_1.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 }),
Foundation_1.withSlots(Slots.thumb, null))); }),
Foundation_1.withSlots(Slots.text, null))));
};
});
//# sourceMappingURL=Toggle.view.js.map