@react-md/form
Version:
This package is for creating all the different form input types.
71 lines • 4.99 kB
JavaScript
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;
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef } from "react";
import cn from "classnames";
import { useInteractionStates } from "@react-md/states";
import { bem } from "@react-md/utils";
import { Label } from "../label/Label";
import { useFocusState } from "../useFocusState";
import { ToggleContainer } from "./ToggleContainer";
import { InputToggleIcon } from "./InputToggleIcon";
var block = bem("rmd-toggle");
export var InputToggle = 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 = 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(useFocusState({
onFocus: propOnFocus,
onBlur: propOnBlur,
}), 3), focused = _j[0], onFocus = _j[1], onBlur = _j[2];
var labelEl = (_jsx(Label, __assign({ style: labelStyle, className: labelClassName, htmlFor: id, error: error, disabled: typeof labelDisabled === "boolean" ? labelDisabled : disabled }, { children: label })));
return (_jsxs(ToggleContainer, __assign({ style: style, className: className, inline: inline, stacked: stacked }, { children: [iconAfter && labelEl, _jsxs("span", __assign({ style: toggleStyle, className: cn(block({
focused: focused,
disabled: disabled,
}), toggleClassName) }, { children: [_jsx("input", __assign({}, props, handlers, { ref: ref, style: inputStyle, disabled: disabled, onFocus: onFocus, onBlur: onBlur, className: cn(block("input"), inputClassName) })), _jsx(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