@uifabric/experiments
Version:
Experimental React components for building experiences for Microsoft 365.
33 lines • 2.17 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
/** @jsx withSlots */
var KeytipData_1 = require("office-ui-fabric-react/lib-commonjs/KeytipData");
var factoryComponents_1 = require("../../utilities/factoryComponents");
var Foundation_1 = require("../../Foundation");
var Utilities_1 = require("../../Utilities");
/* eslint-disable deprecation/deprecation */
/** @deprecated */
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(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,
});
// TODO: need to fix this._id usage. should _id come from state?
// const id = this._id;
var id = undefined;
return (Foundation_1.withSlots(Slots.root, null,
Foundation_1.withSlots(Slots.label, { htmlFor: 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: 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