@talend/react-components/lib/TreeView/TreeView.component.js

Set of react components.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _Action = _interopRequireDefault(require("../Actions/Action"));
var _TreeViewItem = _interopRequireDefault(require("./TreeViewItem"));
var _TreeViewModule = _interopRequireDefault(require("./TreeView.module.scss"));
var _reactA11y = require("@talend/react-a11y");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/**
 * A view component to display any tree structure, like folders or categories.
 *
 * @param id, for qa purposes
 * @param structure optional, tree structure to display, see example below
 * @param headerText optional, specifies text in component's header
 * @param addAction optional, defines if 'add' button is displayed and
 *        specifies button click event callback
 * @param addActionLabel optional, specifies tooltip label for 'add' button
 * @param itemSelectCallback required, tree item click event callback function
 * @param itemToggleCallback required, tree item expand/collapse event callback function
 *
 * const defaultProps = {
 * 	structure: [{
 * 		name: 'grandpa',
 * 		children: [
 * 			{
 * 				name: 'mami',
 * 				toggled: true,
 * 				children: [
 * 					{ name: 'me', selected: true },
 * 					{ name: 'bro' },
 * 				],
 * 			},
 * 			{ name: 'aunt', toggled: false, children: [{ name: 'cousin' }] },
 * 		],
 * 		toggled: true
 * 	}],
 * 	headerText: 'some elements',
 * 	addAction: () => null,
 * 	addActionLabel: 'add element',
 * 	itemSelectCallback: () => null,
 * 	itemToggleCallback: () => null,
 * }
 *
 * <TreeView {...defaultProps} />
 *
 */function TreeView(props) {
  const {
    id,
    headerText,
    structure,
    addAction,
    addActionLabel,
    onKeyDown,
    onSelect,
    onToggle,
    noHeader,
    className,
    selectedId,
    style
  } = props;
  const titleId = id && `${id}-title`;
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: (0, _classnames.default)('tc-treeview', _TreeViewModule.default['tc-treeview'], className),
    style: style,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("header", {
      className: (0, _classnames.default)(_TreeViewModule.default['tc-treeview-header'], {
        'sr-only': noHeader
      }),
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
        id: titleId,
        children: headerText
      }), addAction && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Action.default, {
        label: addActionLabel,
        icon: "talend-plus",
        onClick: addAction,
        tooltipPlacement: "right",
        hideLabel: true,
        link: true,
        id: id && `${id}-add`
      }, addActionLabel)]
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
      className: _TreeViewModule.default['tc-treeview-list'],
      role: "tree",
      "aria-labelledby": titleId,
      children: structure.map((item, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeViewItem.default, {
        id: id && `${id}-${i}`,
        item: item,
        siblings: structure,
        onKeyDown: onKeyDown,
        onSelect: onSelect,
        onToggle: onToggle,
        index: i + 1,
        selectedId: selectedId,
        level: 1
      }, i))
    })]
  });
}
TreeView.displayName = 'TreeView';
TreeView.defaultProps = {
  id: 'tc-treeview',
  addActionLabel: 'Add folder',
  headerText: 'Folders'
};
if (process.env.NODE_ENV !== 'production') {
  TreeView.propTypes = {
    id: _propTypes.default.string.isRequired,
    headerText: _propTypes.default.string,
    structure: _propTypes.default.arrayOf(_TreeViewItem.default.propTypes.item),
    addAction: _propTypes.default.func,
    addActionLabel: _propTypes.default.string,
    onKeyDown: _propTypes.default.func.isRequired,
    onToggle: _propTypes.default.func.isRequired,
    onSelect: _propTypes.default.func.isRequired,
    noHeader: _propTypes.default.bool,
    className: _propTypes.default.string,
    selectedId: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.array]),
    style: _propTypes.default.object
  };
}
var _default = exports.default = _reactA11y.Gesture.withTreeGesture(TreeView);
//# sourceMappingURL=TreeView.component.js.map