@talend/react-components
Version:
Set of react components.
317 lines (315 loc) • 11.9 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _reactBootstrap = require("@talend/react-bootstrap");
var _reactI18next = require("react-i18next");
var _designSystem = require("@talend/design-system");
var _OverlayTrigger = _interopRequireDefault(require("../OverlayTrigger"));
var _Action = _interopRequireDefault(require("../Actions/Action"));
var _Status = _interopRequireDefault(require("../Status"));
var _Tag = _interopRequireDefault(require("../Tag"));
var _TooltipTrigger = _interopRequireDefault(require("../TooltipTrigger"));
var _CollapsiblePanelModule = _interopRequireDefault(require("./CollapsiblePanel.module.scss"));
var _constants = _interopRequireDefault(require("../constants"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const TYPE_STATUS = 'status';
const TYPE_ACTION = 'action';
const TYPE_BADGE = 'badge';
function getActionHandler(func, item) {
return function actionHandler(e) {
e.stopPropagation();
func(e, item);
};
}
const displayModes = [TYPE_ACTION, TYPE_BADGE, TYPE_STATUS];
const statusPropTypes = {
displayMode: _propTypes.default.oneOf(displayModes),
className: _propTypes.default.string,
..._Status.default.propTypes
};
const actionPropTypes = {
displayMode: _propTypes.default.oneOf(displayModes),
className: _propTypes.default.string,
..._Action.default.propTypes
};
const simplePropTypes = {
displayMode: _propTypes.default.oneOf(displayModes),
className: _propTypes.default.string,
element: _propTypes.default.element,
label: _propTypes.default.string,
bsStyle: _propTypes.default.string,
tooltipLabel: _OverlayTrigger.default.propTypes.label,
tooltipPlacement: _OverlayTrigger.default.propTypes.placement
};
function renderHeaderItem({
displayMode,
className,
...headerItem
}, key) {
switch (displayMode) {
case TYPE_STATUS:
{
const {
actions,
...restStatus
} = headerItem;
const statusActions = actions && actions.map(action => ({
...action,
onClick: getActionHandler(action.onClick, headerItem)
}));
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Status.default, {
actions: statusActions,
...restStatus,
className: _CollapsiblePanelModule.default[className]
}, key);
}
case TYPE_ACTION:
{
const {
onClick,
...restAction
} = headerItem;
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Action.default, {
onClick: getActionHandler(onClick, headerItem),
className: _CollapsiblePanelModule.default[className],
...restAction
}, key);
}
case TYPE_BADGE:
{
const {
label,
tooltipLabel,
tooltipPlacement,
...rest
} = headerItem;
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipTrigger.default, {
label: tooltipLabel || label,
tooltipPlacement: tooltipPlacement,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tag.default, {
...rest,
className: _CollapsiblePanelModule.default[className],
children: label
})
}, key);
}
default:
{
const {
element,
label,
tooltipLabel,
tooltipPlacement
} = headerItem;
const labelExist = tooltipLabel || label;
if (labelExist) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipTrigger.default, {
label: labelExist,
tooltipPlacement: tooltipPlacement,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: _CollapsiblePanelModule.default[className],
children: element || label
})
}, key);
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: _CollapsiblePanelModule.default[className],
children: element || label
});
}
}
}
renderHeaderItem.propTypes = _propTypes.default.oneOfType([_propTypes.default.shape(statusPropTypes), _propTypes.default.shape(actionPropTypes), _propTypes.default.shape(simplePropTypes), _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.shape(statusPropTypes), _propTypes.default.shape(actionPropTypes), _propTypes.default.shape(simplePropTypes)]))]);
function CollapsiblePanelHeader(props) {
const {
t
} = (0, _reactI18next.useTranslation)(_constants.default);
const {
header,
content,
id,
onSelect,
onToggle,
expanded,
dataFeature
} = props;
const headerColumnClass = `col-${header.length}`;
const headerItems = header.map((headerItem, index) => {
const isHeaderItemArray = Array.isArray(headerItem);
const elements = isHeaderItemArray ? headerItem.map(renderHeaderItem) : renderHeaderItem(headerItem);
const selectors = isHeaderItemArray ? (0, _classnames.default)(_CollapsiblePanelModule.default.group, _CollapsiblePanelModule.default[headerColumnClass]) : (0, _classnames.default)(_CollapsiblePanelModule.default[headerItem.className], _CollapsiblePanelModule.default[headerColumnClass]);
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: selectors,
children: elements
}, index);
});
// Panel component needs an array for header props
const wrappedHeader = [onSelect ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
className: (0, _classnames.default)(_CollapsiblePanelModule.default['panel-title']),
bsStyle: "link",
onClick: onSelect,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: (0, _classnames.default)(_CollapsiblePanelModule.default['panel-title']),
children: headerItems
})
}, "panel-toggle") :
/*#__PURE__*/
/* eslint-disable jsx-a11y/no-static-element-interactions */
// eslint-disable-next-line jsx-a11y/click-events-have-key-events
(0, _jsxRuntime.jsx)("div", {
className: (0, _classnames.default)(_CollapsiblePanelModule.default['panel-title']),
onClick: onToggle,
children: headerItems
}, "panel-toggle")];
if (content || props.children) {
const caretText = expanded ? t('COLLAPSIBLE_PANEL_COLLAPSE', {
defaultValue: 'Collapse panel'
}) : t('COLLAPSIBLE_PANEL_EXPAND', {
defaultValue: 'Expand panel'
});
const defaultCaret = /*#__PURE__*/(0, _jsxRuntime.jsx)(_designSystem.ButtonIcon, {
size: "M",
"aria-expanded": expanded,
className: (0, _classnames.default)(_CollapsiblePanelModule.default.toggle, 'toggle'),
onClick: onToggle,
id: id && `${id}__collapse`,
type: "button",
icon: expanded ? 'chevron-down-stroke' : 'chevron-up-filled',
"data-feature": dataFeature,
children: caretText
}, `collapse_header_${id}`);
wrappedHeader.push(defaultCaret);
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: (0, _classnames.default)(_CollapsiblePanelModule.default['panel-header-content'], 'panel-header-content'),
children: wrappedHeader
});
}
function getKeyValueContent(content) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)("dl", {
className: _CollapsiblePanelModule.default.content,
children: content.map((item, index) => [/*#__PURE__*/(0, _jsxRuntime.jsx)("dt", {
className: _CollapsiblePanelModule.default.label,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tag.default, {
children: item.label
})
}, `${index}_label`), /*#__PURE__*/(0, _jsxRuntime.jsx)("dd", {
className: _CollapsiblePanelModule.default.description,
children: item.description
}, `${index}_desc`)])
});
}
function getTextualContent(content) {
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: _CollapsiblePanelModule.default.content,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: _CollapsiblePanelModule.default.head,
children: content.head.map((item, index) => {
const {
label,
tooltipPlacement,
tooltipLabel,
className
} = item;
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipTrigger.default, {
label: tooltipLabel || label,
tooltipPlacement: tooltipPlacement,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
className: className,
children: label
})
}, index);
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: (0, _classnames.default)(_CollapsiblePanelModule.default['content-description'], 'content-description'),
children: content.description
})]
});
}
function CollapsiblePanel(props) {
const {
content,
id,
onToggle,
status,
expanded,
theme,
onEntered,
onExited
} = props;
const className = (0, _classnames.default)('panel panel-default', _CollapsiblePanelModule.default['tc-collapsible-panel'], {
[_CollapsiblePanelModule.default['default-panel']]: !theme,
[_CollapsiblePanelModule.default[theme]]: !!theme,
[_CollapsiblePanelModule.default.open]: expanded,
[_CollapsiblePanelModule.default[_Status.default.getBsStyleFromStatus(status) || status]]: !!status,
status
});
let children = null;
if (content) {
children = Array.isArray(content) ? getKeyValueContent(content) : getTextualContent(content);
}
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Panel, {
id: id,
className: className,
expanded: expanded,
onToggle: onToggle,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Panel.Heading, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Panel.Title, {
toggle: (content || props.children) && !onToggle,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(CollapsiblePanelHeader, {
...props
})
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Panel.Collapse, {
onEntered: onEntered,
onExited: onExited,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Panel.Body, {
children: [children, props.children]
})
})]
});
}
CollapsiblePanel.displayName = 'CollapsiblePanel';
if (process.env.NODE_ENV !== 'production') {
CollapsiblePanelHeader.propTypes = {
/** Content of the panel body
* If content is an array a key value content list is rendered
* otherwise it is a textual content
*/
content: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.shape({
label: _propTypes.default.string,
description: _propTypes.default.string
})), _propTypes.default.shape({
head: _propTypes.default.arrayOf(_propTypes.default.shape(simplePropTypes)),
description: _propTypes.default.string
})]),
/** Expanded state for controlled panel */
expanded: _propTypes.default.bool,
/** Header elements */
header: _propTypes.default.arrayOf(renderHeaderItem.propTypes).isRequired,
id: _propTypes.default.string.isRequired,
/** Header click callback function */
onSelect: _propTypes.default.func,
/** Caret click callback function, needed for controlled panel */
onToggle: _propTypes.default.func
};
CollapsiblePanel.propTypes = {
...CollapsiblePanelHeader.propTypes,
/** Apply a status style */
status: _propTypes.default.string,
/** Styling theme to apply */
theme: _propTypes.default.string
};
}
CollapsiblePanel.displayModes = {
TYPE_STATUS,
TYPE_ACTION,
TYPE_BADGE
};
var _default = exports.default = CollapsiblePanel;
//# sourceMappingURL=CollapsiblePanel.component.js.map