Add Switch component

src/bootstrap/Switch.js

@@ -0,0 +1,45 @@
+/*
+ * Copyright (c) 2020 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ *
+ * This is free software, licensed under the GNU General Public License v3.
+ * See /LICENSE for more information.
+ */
+
+import React from "react";
+import PropTypes from "prop-types";
+import { useUID } from "react-uid";
+
+Switch.propTypes = {
+    label: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.element,
+        PropTypes.node,
+        PropTypes.arrayOf(PropTypes.node),
+    ]).isRequired,
+    id: PropTypes.string.isRequired,
+    helpText: PropTypes.string,
+    switchHeading: PropTypes.string,
+};
+
+export function Switch({
+    label, id, helpText, switchHeading, ...props
+}) {
+    const uid = useUID();
+    return (
+        <div className="form-group">
+            <div className={`custom-control custom-switch ${!helpText ? "custom-control-inline" : ""} ${switchHeading ? "switch-heading" : ""}`.trim()}>
+                <input
+                    type="checkbox"
+                    className="custom-control-input"
+                    id={uid}
+
+                    {...props}
+                />
+                <label className="custom-control-label" htmlFor={uid}>
+                    {label}
+                </label>
+                {helpText && <small className="form-text text-muted mt-0 mb-3">{helpText}</small>}
+            </div>
+        </div>
+    );
+}

src/index.js

@@ -31,17 +31,10 @@ export { Radio, RadioSet } from "./bootstrap/RadioSet";
 export { Select } from "./bootstrap/Select";
 export { TextInput } from "./bootstrap/TextInput";
 export { formFieldsSize, buttonFormFieldSize } from "./bootstrap/constants";
+export { Switch } from "./bootstrap/Switch";
 
-export {
+export { Spinner, SpinnerElement } from "./bootstrap/Spinner";
-    Spinner,
+export { Modal, ModalBody, ModalFooter, ModalHeader } from "./bootstrap/Modal";
-    SpinnerElement,
-} from "./bootstrap/Spinner";
-export {
-    Modal,
-    ModalBody,
-    ModalFooter,
-    ModalHeader,
-} from "./bootstrap/Modal";
 
 // Common
 export { RebootButton } from "./common/RebootButton";
@@ -49,7 +42,10 @@ export { WiFiSettings } from "./common/WiFiSettings/WiFiSettings";
 
 // Form
 export { ForisForm } from "./form/components/ForisForm";
-export { SubmitButton, STATES as SUBMIT_BUTTON_STATES } from "./form/components/SubmitButton";
+export {
+    SubmitButton,
+    STATES as SUBMIT_BUTTON_STATES,
+} from "./form/components/SubmitButton";
 export { useForisModule, useForm } from "./form/hooks";
 
 // WebSockets
@@ -58,9 +54,18 @@ export { WebSockets } from "./webSockets/WebSockets";
 
 // Utils
 export { Portal } from "./utils/Portal";
-export { undefinedIfEmpty, withoutUndefinedKeys, onlySpecifiedKeys } from "./utils/objectHelpers";
 export {
-    withEither, withSpinner, withSending, withSpinnerOnSending, withError, withErrorMessage,
+    undefinedIfEmpty,
+    withoutUndefinedKeys,
+    onlySpecifiedKeys,
+} from "./utils/objectHelpers";
+export {
+    withEither,
+    withSpinner,
+    withSending,
+    withSpinnerOnSending,
+    withError,
+    withErrorMessage,
 } from "./utils/conditionalHOCs";
 export { ErrorMessage } from "./utils/ErrorMessage";
 export { useClickOutside } from "./utils/hooks";