@talend/react-faceted-search
Version:
115 lines (112 loc) • 3.98 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.BadgeOverlay = void 0;
var _react = require("react");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _designSystem = require("@talend/design-system");
var _BadgeOverlayModule = _interopRequireDefault(require("./BadgeOverlay.module.scss"));
var _reactComponents = require("@talend/react-components");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const getChildren = (children, setOverlayOpened) => {
if (typeof children === 'function') {
return children(setOverlayOpened);
}
return children;
};
const labelFormatter = (value, showSpecialChars) => showSpecialChars ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactComponents.FormatValue, {
className: _BadgeOverlayModule.default['tc-badge-format-value'],
value: value
}, value) : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
children: value
}, value);
const getLabel = (labels, showSpecialChars) => {
const formatedLabels = Array.isArray(labels) ? labels.map(label => labelFormatter(label, showSpecialChars)) : labelFormatter(labels, showSpecialChars);
return formatedLabels;
};
/**
* The badge overlay can be use in two different ways.
* An automatic one where you can only set an initial state.
* Or a manual one where you have to provide an opened and a onChange function.
* On hide can be used in both, returning the overlay setter,
* which can be helpful if you are using the automatic way.
*/
const BadgeOverlay = ({
children,
className,
dataFeature,
iconName,
id,
initialOpened = false,
label,
onChange,
onHide,
opened = false,
readOnly,
showSpecialChars = false
}) => {
const [overlayOpened, setOverlayOpened] = (0, _react.useState)(initialOpened);
const changeOpened = event => {
if (onChange) {
onChange(event, !opened);
} else {
setOverlayOpened(!overlayOpened);
}
};
const onHideOverlay = event => {
if (onHide) {
onHide(event, setOverlayOpened);
} else {
setOverlayOpened(false);
}
};
const currentOpened = opened || overlayOpened;
const buttonLabel = iconName ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactComponents.Icon, {
name: `talend-${iconName}`
}, "icon") : getLabel(label, showSpecialChars);
const button = /*#__PURE__*/(0, _jsxRuntime.jsx)(_designSystem.ButtonTertiary, {
id: `${id}-action-overlay`,
"aria-label": label,
onClick: changeOpened,
disabled: readOnly,
"data-feature": dataFeature,
size: "S",
title: label,
children: buttonLabel
});
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: className,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_designSystem.Popover, {
id: `${id}-popover`,
disclosure: button,
isFixed: true,
placement: "bottom",
open: currentOpened,
onOpenChange: open => {
if (!open) {
onHideOverlay(open);
}
},
children: currentOpened && getChildren(children, setOverlayOpened)
})
});
};
exports.BadgeOverlay = BadgeOverlay;
BadgeOverlay.propTypes = {
children: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.arrayOf(_propTypes.default.element), _propTypes.default.func]).isRequired,
id: _propTypes.default.string.isRequired,
label: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.string]),
readOnly: _propTypes.default.bool,
initialOpened: _propTypes.default.bool,
opened: _propTypes.default.bool,
className: _propTypes.default.string,
iconName: _propTypes.default.string,
showSpecialChars: _propTypes.default.bool,
dataFeature: _propTypes.default.string,
onChange: _propTypes.default.func,
onHide: _propTypes.default.func
};
// eslint-disable-next-line import/prefer-default-export
//# sourceMappingURL=BadgeOverlay.component.js.map