@navikt/ds-react
Version:
React components from the Norwegian Labour and Welfare Administration.
96 lines • 6.23 kB
JavaScript
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;
};
import React, { forwardRef, useEffect, useState, } from "react";
import { Loader } from "../../loader/index.js";
import { useRenameCSS } from "../../theme/Theme.js";
import { BodyShort } from "../../typography/index.js";
import { omit } from "../../util/index.js";
import { ReadOnlyIconWithTitle } from "../ReadOnlyIcon.js";
import { useFormField } from "../useFormField.js";
/**
* A component that displays a switch input field.
*
* @see [📝 Documentation](https://aksel.nav.no/komponenter/core/switch)
* @see 🏷️ {@link SwitchProps}
*
* @example
* ```jsx
* <Switch>Varsle med SMS</Switch>
* ```
*/
export const Switch = forwardRef((props, ref) => {
var _a, _b, _c;
const { inputProps, size, readOnly } = useFormField(props, "switch");
const { children, className, description, hideLabel = false, loading, checked: checkedProp, defaultChecked, position = "left" } = props, rest = __rest(props, ["children", "className", "description", "hideLabel", "loading", "checked", "defaultChecked", "position"]);
const { cn } = useRenameCSS();
const [_checked, setChecked] = useState((_a = defaultChecked !== null && defaultChecked !== void 0 ? defaultChecked : checkedProp) !== null && _a !== void 0 ? _a : false);
useEffect(() => {
checkedProp !== undefined && setChecked(checkedProp);
}, [checkedProp]);
const checked = checkedProp !== null && checkedProp !== void 0 ? checkedProp : _checked;
return (React.createElement("div", { className: cn("navds-switch", props.className, `navds-switch--${size}`, `navds-switch--${position}`, {
"navds-switch--loading": loading,
"navds-switch--disabled": (_b = inputProps.disabled) !== null && _b !== void 0 ? _b : loading,
"navds-switch--readonly": readOnly,
"navds-switch--standalone": hideLabel,
}) },
React.createElement("input", Object.assign({}, omit(rest, ["size", "readOnly"]), omit(inputProps, ["aria-invalid", "aria-describedby"]), { disabled: (_c = inputProps.disabled) !== null && _c !== void 0 ? _c : loading, checked: checkedProp, defaultChecked: defaultChecked, ref: ref, type: "checkbox", onChange: (event) => {
var _a;
if (readOnly) {
return;
}
setChecked(event.target.checked);
(_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, event);
}, onClick: (event) => {
var _a;
if (readOnly) {
event.preventDefault();
return;
}
(_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, event);
}, className: cn(className, "navds-switch__input") })),
React.createElement("span", { className: cn("navds-switch__track") },
React.createElement("span", { className: cn("navds-switch__thumb") },
React.createElement(SwitchIcon, { size: size, checked: checked, loading: loading }))),
React.createElement("label", { htmlFor: inputProps.id, className: cn("navds-switch__label-wrapper") },
React.createElement("span", { className: cn("navds-switch__content", {
"navds-sr-only": hideLabel,
"navds-switch--with-description": description && !hideLabel,
}) },
React.createElement(BodyShort, { as: "span", size: size, className: cn("navds-switch__label") },
readOnly && React.createElement(ReadOnlyIconWithTitle, null),
children),
description && (React.createElement(BodyShort, { size: size, as: "span", className: cn("navds-form-field__subdescription navds-switch__description") }, description))))));
});
const SwitchIcon = ({ size, checked, loading, }) => {
if (loading) {
let baseSize = 16;
if (size === "small") {
baseSize = 12;
}
if (checked) {
baseSize += 2;
}
return (React.createElement(Loader, { size: "small", "aria-live": "polite", variant: checked ? "interaction" : "inverted", width: `${baseSize / 16}rem`, height: `${baseSize / 16}rem` }));
}
if (!checked) {
return null;
}
if (size === "small") {
return (React.createElement("svg", { width: "11", height: "8", viewBox: "0 0 11 8", fill: "none", xmlns: "http://www.w3.org/2000/svg", focusable: false, role: "img", "aria-hidden": true },
React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9.62013 0.530226C10.1194 0.952686 10.1817 1.6999 9.7592 2.19917L5.4171 7.33075C5.20318 7.58356 4.89318 7.73525 4.5623 7.74901C4.23142 7.76277 3.90989 7.63735 3.67572 7.40318L1.3073 5.03476C0.844833 4.5723 0.844833 3.8225 1.3073 3.36003C1.76976 2.89757 2.51956 2.89757 2.98202 3.36003L4.4404 4.81841L7.95118 0.669304C8.37364 0.170033 9.12085 0.107765 9.62013 0.530226Z", fill: "currentColor" })));
}
return (React.createElement("svg", { width: "12", height: "10", viewBox: "0 0 12 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", focusable: false, role: "img", "aria-hidden": true },
React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.2674 0.647802C11.8762 1.20971 11.9141 2.1587 11.3522 2.76743L5.35221 9.26743C5.07531 9.56739 4.68813 9.74155 4.27998 9.74971C3.87184 9.75787 3.478 9.59933 3.18934 9.31067L0.68934 6.81067C0.103553 6.22488 0.103553 5.27513 0.68934 4.68935C1.27513 4.10356 2.22487 4.10356 2.81066 4.68935L4.20673 6.08541L9.14779 0.732587C9.7097 0.123856 10.6587 0.0858967 11.2674 0.647802Z", fill: "currentColor" })));
};
export default Switch;
//# sourceMappingURL=Switch.js.map