@react-md/form/lib/toggle/InputToggle.js

This package is for creating all the different form input types.

"use strict";
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
var __read = (this && this.__read) || function (o, n) {
    var m = typeof Symbol === "function" && o[Symbol.iterator];
    if (!m) return o;
    var i = m.call(o), r, ar = [], e;
    try {
        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
    }
    catch (error) { e = { error: error }; }
    finally {
        try {
            if (r && !r.done && (m = i["return"])) m.call(i);
        }
        finally { if (e) throw e.error; }
    }
    return ar;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.InputToggle = void 0;
var jsx_runtime_1 = require("react/jsx-runtime");
var react_1 = require("react");
var classnames_1 = __importDefault(require("classnames"));
var states_1 = require("@react-md/states");
var utils_1 = require("@react-md/utils");
var Label_1 = require("../label/Label");
var useFocusState_1 = require("../useFocusState");
var ToggleContainer_1 = require("./ToggleContainer");
var InputToggleIcon_1 = require("./InputToggleIcon");
var block = (0, utils_1.bem)("rmd-toggle");
exports.InputToggle = (0, react_1.forwardRef)(function InputToggle(allProps, ref) {
    var _a = allProps, style = _a.style, className = _a.className, iconStyle = _a.iconStyle, iconClassName = _a.iconClassName, toggleStyle = _a.toggleStyle, propToggleClassName = _a.toggleClassName, inputStyle = _a.inputStyle, inputClassName = _a.inputClassName, icon = _a.icon, propOnFocus = _a.onFocus, propOnBlur = _a.onBlur, _b = _a.error, error = _b === void 0 ? false : _b, _c = _a.inline, inline = _c === void 0 ? false : _c, _d = _a.stacked, stacked = _d === void 0 ? false : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, label = _a.label, labelStyle = _a.labelStyle, labelClassName = _a.labelClassName, labelDisabled = _a.labelDisabled, _f = _a.iconAfter, iconAfter = _f === void 0 ? false : _f, _g = _a.disableIconOverlay, disableIconOverlay = _g === void 0 ? false : _g, disableRipple = _a.disableRipple, disableProgrammaticRipple = _a.disableProgrammaticRipple, rippleTimeout = _a.rippleTimeout, rippleClassNames = _a.rippleClassNames, children = _a.children, indeterminate = _a.indeterminate, props = __rest(_a, ["style", "className", "iconStyle", "iconClassName", "toggleStyle", "toggleClassName", "inputStyle", "inputClassName", "icon", "onFocus", "onBlur", "error", "inline", "stacked", "disabled", "label", "labelStyle", "labelClassName", "labelDisabled", "iconAfter", "disableIconOverlay", "disableRipple", "disableProgrammaticRipple", "rippleTimeout", "rippleClassNames", "children", "indeterminate"]);
    var id = props.id, type = props.type;
    var _h = (0, states_1.useInteractionStates)({
        handlers: props,
        disabled: disabled,
        className: propToggleClassName,
        disableRipple: disableRipple,
        disableProgrammaticRipple: disableProgrammaticRipple,
        rippleTimeout: rippleTimeout,
        rippleClassNames: rippleClassNames,
    }), ripples = _h.ripples, handlers = _h.handlers, toggleClassName = _h.className;
    var _j = __read((0, useFocusState_1.useFocusState)({
        onFocus: propOnFocus,
        onBlur: propOnBlur,
    }), 3), focused = _j[0], onFocus = _j[1], onBlur = _j[2];
    var labelEl = ((0, jsx_runtime_1.jsx)(Label_1.Label, __assign({ style: labelStyle, className: labelClassName, htmlFor: id, error: error, disabled: typeof labelDisabled === "boolean" ? labelDisabled : disabled }, { children: label })));
    return ((0, jsx_runtime_1.jsxs)(ToggleContainer_1.ToggleContainer, __assign({ style: style, className: className, inline: inline, stacked: stacked }, { children: [iconAfter && labelEl, (0, jsx_runtime_1.jsxs)("span", __assign({ style: toggleStyle, className: (0, classnames_1.default)(block({
                    focused: focused,
                    disabled: disabled,
                }), toggleClassName) }, { children: [(0, jsx_runtime_1.jsx)("input", __assign({}, props, handlers, { ref: ref, style: inputStyle, disabled: disabled, onFocus: onFocus, onBlur: onBlur, className: (0, classnames_1.default)(block("input"), inputClassName) })), (0, jsx_runtime_1.jsx)(InputToggleIcon_1.InputToggleIcon, __assign({ circle: !disableIconOverlay && type === "radio", disabled: disabled, overlay: !disableIconOverlay, indeterminate: indeterminate, style: iconStyle, className: iconClassName }, { children: icon })), ripples, children] })), !iconAfter && labelEl] })));
});
//# sourceMappingURL=InputToggle.js.map