@uifabric/experiments
Version:
Experimental React components for building experiences for Microsoft 365.
31 lines • 1.91 kB
JavaScript
import { __assign } 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';
/* eslint-disable deprecation/deprecation */
/** @deprecated */
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(props, inputProperties, ['defaultChecked']);
var Slots = getSlots(props, {
root: RootType,
label: Label,
container: 'div',
pill: 'button',
thumb: 'div',
text: Label,
});
// TODO: need to fix this._id usage. should _id come from state?
// const id = this._id;
var id = undefined;
return (withSlots(Slots.root, null,
withSlots(Slots.label, { htmlFor: id }, label),
withSlots(Slots.container, null,
withSlots(KeytipData, { keytipProps: keytipProps, ariaDescribedBy: toggleNativeProps['aria-describedby'], disabled: disabled }, function (keytipAttributes) { return (withSlots(Slots.pill, __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 }),
withSlots(Slots.thumb, null))); }),
withSlots(Slots.text, null))));
};
//# sourceMappingURL=Toggle.view.js.map