@kiwicom/orbit-components
Version:
Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com's products.
151 lines (150 loc) • 7.59 kB
JavaScript
"use strict";
"use client";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
exports.__esModule = true;
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var React = _interopRequireWildcard(require("react"));
var _clsx = _interopRequireDefault(require("clsx"));
var _FormLabel = _interopRequireDefault(require("../FormLabel"));
var _SwitchSegment = _interopRequireDefault(require("./SwitchSegment"));
var _ErrorFormTooltip = _interopRequireDefault(require("../ErrorFormTooltip"));
var _useErrorTooltip = _interopRequireDefault(require("../ErrorFormTooltip/hooks/useErrorTooltip"));
var _spaceAfter = require("../common/tailwind/spaceAfter");
/**
* @orbit-doc-start
* README
* ----------
* # SegmentedSwitch
*
* To implement SegmentedSwitch component into your project you'll need to add the import:
*
* ```jsx
* import SegmentedSwitch from "@kiwicom/orbit-components/lib/SegmentedSwitch";
* ```
*
* ## Usage
*
* ```jsx
* const Component = () => {
* const [value, setValue] = React.useState("");
*
* return (
* <SegmentedSwitch
* onChange={ev => setValue(ev.currentTarget.value)}
* help={helpMessage}
* error={errorMessage}
* options={[
* { label: "First option", value: "1" },
* { label: "Second option", value: "2" },
* ]}
* />
* );
* };
* ```
*
* ## Props
*
* _Table below contains all types of the props available in the SegmentedSwitch component._
*
* | Name | Type | Default | Description |
* | :------------- | :-------------------------------------------- | :------ | :--------------------------------------------------------------------------------------------- |
* | dataTest | `string` | | Optional prop for testing purposes. |
* | help | `React.Node` | | Optional help message. |
* | error | `React.Node` | | Optional error message. |
* | options | [`Option[]`](#option) | | Array of options. |
* | onChange | `(ev: ChangeEvent<HTMLInputElement>) => void` | | Function for handling change event. |
* | onFocus | `(ev: FocusEvent<HTMLInputElement>) => void` | | Function for handling focus event. |
* | label | `string` | | Label of the component. |
* | ariaLabel | `string` | | Optional `aria-label` attribute. |
* | ariaLabelledby | `string` | | Optional `aria-labelledby` attribute. Receives an id of the element that labels the component. |
* | showTooltip | `boolean` | `false` | Show tooltip. |
*
* ## Option
*
* Table below contains all types of the props available for object in Option array.
*
* | Name | Type | Description |
* | :------------- | :----------------- | :------------------------------------------------------------- |
* | **value** | `string \| number` | The value of the Option. |
* | label | `string` | The label for the Option. |
* | defaultChecked | `boolean` | Set option checked by default. |
* | disabled | `boolean` | If `true`, the Option will be disabled. |
* | name | `string` | Name of the Option. See [functional specs](#functional-specs). |
*
* ## Functional specs
*
* - The `error` prop overwrites the `help` prop, due to higher priority.
* - The `name` prop in the `Option` object is needed when having more that one SegmentedSwitch in the same form.
*
*
* @orbit-doc-end
*/
const SegmentedSwitch = ({
options,
dataTest,
onChange,
showTooltip,
spaceAfter,
onFocus,
maxWidth,
help,
error,
label,
ariaLabel,
ariaLabelledby
}) => {
const hasTooltip = Boolean(error || help);
const {
tooltipShown,
tooltipShownHover,
setTooltipShown,
setTooltipShownHover,
labelRef
} = (0, _useErrorTooltip.default)({
onFocus,
hasTooltip
});
React.useEffect(() => {
if (hasTooltip) {
if (showTooltip) setTooltipShown(true);else setTooltipShown(false);
}
}, [showTooltip, hasTooltip, setTooltipShown]);
return /*#__PURE__*/React.createElement("div", {
"data-test": dataTest,
ref: labelRef,
className: (0, _clsx.default)("gap-50 relative flex w-full min-w-fit flex-col", spaceAfter && _spaceAfter.spaceAfterClasses[spaceAfter], "[&_.orbit-switch-segment-label:first-child_.orbit-switch-segment-text]:rounded-s-300", "[&_.orbit-switch-segment-label:last-child_.orbit-switch-segment-text]:rounded-e-300"),
style: {
maxWidth
},
role: "group",
"aria-label": ariaLabel || label,
"aria-labelledby": ariaLabelledby
}, label && /*#__PURE__*/React.createElement(_FormLabel.default, {
help: !!help,
error: !!error,
onMouseEnter: () => setTooltipShownHover(true),
onMouseLeave: () => setTooltipShownHover(false)
}, label), /*#__PURE__*/React.createElement("div", {
className: (0, _clsx.default)("rounded-300 border-cloud-dark flex border", "[&>label]:border-cloud-dark [&>label]:border-s", "[&>label:has(input:checked)]:border-s-0", "[&>label:has(input:focus)]:border-s-0", "[&>label:not(:has(input:checked)):nth-of-type(1)]:border-s-0", "[&>label:has(input:checked):not(:nth-of-type(0))_+_label:not(:has(input:checked))]:border-s-0", "[&>label:has(input:checked):not(:nth-of-type(0))_+_label:has(input:checked)_+_label:not(:has(input:checked))]:border-s-0", "[&>label:has(input:focus):not(:nth-of-type(0))_+_label:not(:has(input:checked))]:border-s-0", "[&>label:has(input:focus):not(:nth-of-type(0))_+_label:has(input:focus)_+_label:not(:has(input:checked))]:border-s-0")
}, options.map(({
value,
label: optionLabel,
...props
}) => /*#__PURE__*/React.createElement(_SwitchSegment.default, (0, _extends2.default)({
key: value,
value: value,
label: optionLabel,
setTooltipShown: setTooltipShown,
onChange: onChange,
onFocus: onFocus
}, props)))), hasTooltip && /*#__PURE__*/React.createElement(_ErrorFormTooltip.default, {
help: help,
error: error,
shown: tooltipShown || tooltipShownHover,
onShown: prev => setTooltipShown(!prev),
referenceElement: labelRef
}));
};
var _default = exports.default = SegmentedSwitch;