@navikt/ds-react
Version:
React components from the Norwegian Labour and Welfare Administration.
132 lines • 7.95 kB
JavaScript
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
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;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Switch = void 0;
const react_1 = __importStar(require("react"));
const loader_1 = require("../../loader");
const Theme_1 = require("../../theme/Theme");
const typography_1 = require("../../typography");
const util_1 = require("../../util");
const ReadOnlyIcon_1 = require("../ReadOnlyIcon");
const useFormField_1 = require("../useFormField");
/**
* 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>
* ```
*/
exports.Switch = (0, react_1.forwardRef)((props, ref) => {
var _a, _b, _c;
const { inputProps, size, readOnly } = (0, useFormField_1.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 } = (0, Theme_1.useRenameCSS)();
const [_checked, setChecked] = (0, react_1.useState)((_a = defaultChecked !== null && defaultChecked !== void 0 ? defaultChecked : checkedProp) !== null && _a !== void 0 ? _a : false);
(0, react_1.useEffect)(() => {
checkedProp !== undefined && setChecked(checkedProp);
}, [checkedProp]);
const checked = checkedProp !== null && checkedProp !== void 0 ? checkedProp : _checked;
return (react_1.default.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_1.default.createElement("input", Object.assign({}, (0, util_1.omit)(rest, ["size", "readOnly"]), (0, util_1.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_1.default.createElement("span", { className: cn("navds-switch__track") },
react_1.default.createElement("span", { className: cn("navds-switch__thumb") },
react_1.default.createElement(SwitchIcon, { size: size, checked: checked, loading: loading }))),
react_1.default.createElement("label", { htmlFor: inputProps.id, className: cn("navds-switch__label-wrapper") },
react_1.default.createElement("span", { className: cn("navds-switch__content", {
"navds-sr-only": hideLabel,
"navds-switch--with-description": description && !hideLabel,
}) },
react_1.default.createElement(typography_1.BodyShort, { as: "span", size: size, className: cn("navds-switch__label") },
readOnly && react_1.default.createElement(ReadOnlyIcon_1.ReadOnlyIconWithTitle, null),
children),
description && (react_1.default.createElement(typography_1.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_1.default.createElement(loader_1.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_1.default.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_1.default.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_1.default.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_1.default.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" })));
};
exports.default = exports.Switch;
//# sourceMappingURL=Switch.js.map