@talend/react-components
Version:
Set of react components.
306 lines (301 loc) • 10.7 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
exports.getItemIcon = getItemIcon;
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = require("react");
var _classnames = _interopRequireDefault(require("classnames"));
var _TooltipTrigger = _interopRequireDefault(require("../../TooltipTrigger"));
var _Actions = require("../../Actions");
var _Icon = _interopRequireDefault(require("../../Icon"));
var _Badge = _interopRequireDefault(require("../../Badge"));
var _TreeViewItemModule = _interopRequireDefault(require("./TreeViewItem.module.scss"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
const BASE_PADDING = 30;
const CARET_WIDTH = 12;
const PADDING = 20;
/**
* return the default open or closed folder icon if non is specified on item
* or if it is specified return the specified icon with `-closed` append if not opened
* @param {String} iconName - icon name
* @param {Boolean} isOpened - state of the item
* @return {String}
*/
function getItemIcon(iconName = 'talend-folder', isOpened) {
return isOpened ? iconName : `${iconName}-closed`;
}
/**
* Internal: you should not use it
* Instantiate an icon based on the icon config
*
* @param icon The icon name of the Icon props
* @param isOpened if the treeview is opened
*/
function TreeViewIcon({
icon,
isOpened
}) {
if (typeof icon === 'object') {
return icon.tooltipLabel ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipTrigger.default, {
label: icon.tooltipLabel,
tooltipPlacement: icon.tooltipPlacement || 'top',
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
name: icon.name,
className: (0, _classnames.default)(_TreeViewItemModule.default['tc-treeview-img'], icon.className)
})
})
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
...icon,
className: (0, _classnames.default)(_TreeViewItemModule.default['tc-treeview-img'], icon.className)
});
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
name: getItemIcon(icon, isOpened),
className: (0, _classnames.default)(_TreeViewItemModule.default['tc-treeview-folder'])
});
}
TreeViewIcon.propTypes = {
icon: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.string, _propTypes.default.shape(_Icon.default.propTypes)]),
isOpened: _propTypes.default.bool
};
/**
* Internal: you should not use it
* Single item of TreeView component
*
* @param id, for qa purposes
* @param item required, item to display
* item.actions optional, array with actions' to be displayed meta-info
* @param onSelect required, callback function to trigger once item was clicked
* @param onClick required, callback function to trigger once item was clicked
*
* @returns XML, jsx to display
*/
class TreeViewItem extends _react.Component {
constructor(props) {
super(props);
this.renderIconAction = this.renderIconAction.bind(this);
this.renderTreeViewChildren = this.renderTreeViewChildren.bind(this);
this.onMouseLeave = this.onMouseLeave.bind(this);
this.onMouseEnter = this.onMouseEnter.bind(this);
this.state = {
hovered: false
};
}
onMouseEnter() {
this.setState({
hovered: true
});
}
onMouseLeave() {
this.setState({
hovered: false
});
}
getTabIndex() {
let shouldBeFocusable;
if (this.props.selectedId === undefined) {
shouldBeFocusable = this.props.level === 1 && this.props.index === 1;
} else {
shouldBeFocusable = this.isSelected();
}
return shouldBeFocusable ? 0 : -1;
}
hasChildren() {
return this.props.item.children && this.props.item.children.length;
}
isSelected() {
const {
item,
selectedId
} = this.props;
if (selectedId === undefined) {
return false;
}
if (Array.isArray(selectedId)) {
return selectedId.includes(item.id);
}
return item.id === selectedId;
}
isOpened() {
const {
children = [],
isOpened = false
} = this.props.item;
if (!children.length) {
return undefined;
}
return isOpened;
}
renderTreeViewChildren() {
if (!this.isOpened()) {
return null;
}
const {
children
} = this.props.item;
return /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
role: "group",
className: _TreeViewItemModule.default['tc-treeview-ul'],
children: children.map((child, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(TreeViewItem, {
id: this.props.id && `${this.props.id}-${i}`,
item: child,
siblings: children,
onKeyDown: this.props.onKeyDown,
onSelect: this.props.onSelect,
onToggle: this.props.onToggle,
index: i + 1,
selectedId: this.props.selectedId,
level: this.props.level + 1
}, i))
}, "children");
}
renderIconAction({
action,
id,
...actionProps
}) {
let safeId = id;
if (!id && this.props.id) {
safeId = `${this.props.id}-${actionProps.icon}`;
}
return /*#__PURE__*/(0, _react.createElement)(_Actions.Action, {
...actionProps,
onClick: event => {
event.stopPropagation();
action(this.props.item);
},
tooltipPlacement: "right",
hideLabel: true,
key: actionProps.label,
id: safeId,
link: true
});
}
render() {
const {
id,
index,
item,
level,
onKeyDown,
onSelect,
onToggle,
siblings
} = this.props;
const {
isOpened = false,
hidden,
name,
children = [],
showCounter,
actions,
icon,
counter = children.length,
disabled,
className
} = item;
const paddingLeft = `${(level - 1) * (PADDING + CARET_WIDTH) + BASE_PADDING}px`;
const showOpenedFolder = !!(children.length && (isOpened || this.state.hovered));
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
// eslint-disable-line jsx-a11y/no-static-element-interactions
id: id,
role: "treeitem",
tabIndex: this.getTabIndex(),
"aria-expanded": this.isOpened(),
"aria-level": level,
"aria-posinset": index,
"aria-setsize": siblings.length,
"aria-selected": this.isSelected(),
"aria-disabled": disabled,
className: (0, _classnames.default)('tc-treeview-item-li', _TreeViewItemModule.default['tc-treeview-li'], className),
onClick: e => {
e.stopPropagation();
return !disabled && onSelect(e, item);
},
onKeyDown: e => !disabled && onKeyDown(e, this.containerRef, {
...item,
hasChildren: children.length,
isOpened,
siblings
}),
"data-hidden": hidden,
onMouseEnter: this.onMouseEnter,
onMouseLeave: this.onMouseLeave,
ref: ref => {
this.containerRef = ref;
},
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: (0, _classnames.default)('tc-treeview-item', _TreeViewItemModule.default['tc-treeview-item'], {
[_TreeViewItemModule.default.disabled]: disabled,
disabled
}),
style: {
paddingLeft
},
children: [children.length ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Actions.Action, {
className: _TreeViewItemModule.default['tc-treeview-toggle'],
icon: "talend-caret-down",
iconTransform: isOpened ? undefined : 'rotate-270',
id: id && `${id}-toggle`,
onClick: e => {
e.stopPropagation();
return onToggle(e, item);
},
label: "",
"aria-hidden": true,
tabIndex: "-1",
link: true
}) : null, icon !== false && /*#__PURE__*/(0, _jsxRuntime.jsx)(TreeViewIcon, {
icon: icon,
isOpened: showOpenedFolder
}, "icon"), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
className: (0, _classnames.default)('tc-treeview-item-name', _TreeViewItemModule.default['tc-treeview-item-name']),
children: name
}, "label"), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: _TreeViewItemModule.default['tc-treeview-item-ctrl'],
children: [showCounter && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Badge.default, {
label: counter.toString()
}, "badge"), actions && actions.map(this.renderIconAction)]
}, "actions")]
}), this.renderTreeViewChildren()]
});
}
}
_defineProperty(TreeViewItem, "propTypes", {
id: _propTypes.default.string.isRequired,
index: _propTypes.default.number.isRequired,
item: _propTypes.default.shape({
id: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
name: _propTypes.default.string.isRequired,
disabled: _propTypes.default.bool,
isOpened: _propTypes.default.bool,
className: _propTypes.default.string,
children: _propTypes.default.arrayOf(_propTypes.default.object),
icon: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.string, _propTypes.default.object]),
actions: _propTypes.default.arrayOf(_propTypes.default.shape({
action: _propTypes.default.func,
label: _propTypes.default.string,
icon: _propTypes.default.string
})),
counter: _propTypes.default.number,
showCounter: _propTypes.default.bool
}).isRequired,
siblings: _propTypes.default.array,
level: _propTypes.default.number.isRequired,
onKeyDown: _propTypes.default.func.isRequired,
onToggle: _propTypes.default.func.isRequired,
onSelect: _propTypes.default.func.isRequired,
selectedId: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.array])
});
_defineProperty(TreeViewItem, "defaultProps", {
level: 1
});
var _default = exports.default = TreeViewItem;
//# sourceMappingURL=TreeViewItem.component.js.map