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

Set of react components.

import PropTypes from 'prop-types';
import classNames from 'classnames';
import Action from '../Actions/Action';
import TreeViewItem from './TreeViewItem';
import theme from './TreeView.module.scss';
import { Gesture } from '@talend/react-a11y';

/**
 * 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} />
 *
 */
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function TreeView(props) {
  const {
    id,
    headerText,
    structure,
    addAction,
    addActionLabel,
    onKeyDown,
    onSelect,
    onToggle,
    noHeader,
    className,
    selectedId,
    style
  } = props;
  const titleId = id && `${id}-title`;
  return /*#__PURE__*/_jsxs("div", {
    className: classNames('tc-treeview', theme['tc-treeview'], className),
    style: style,
    children: [/*#__PURE__*/_jsxs("header", {
      className: classNames(theme['tc-treeview-header'], {
        'sr-only': noHeader
      }),
      children: [/*#__PURE__*/_jsx("span", {
        id: titleId,
        children: headerText
      }), addAction && /*#__PURE__*/_jsx(Action, {
        label: addActionLabel,
        icon: "talend-plus",
        onClick: addAction,
        tooltipPlacement: "right",
        hideLabel: true,
        link: true,
        id: id && `${id}-add`
      }, addActionLabel)]
    }), /*#__PURE__*/_jsx("ul", {
      className: theme['tc-treeview-list'],
      role: "tree",
      "aria-labelledby": titleId,
      children: structure.map((item, i) => /*#__PURE__*/_jsx(TreeViewItem, {
        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.string.isRequired,
    headerText: PropTypes.string,
    structure: PropTypes.arrayOf(TreeViewItem.propTypes.item),
    addAction: PropTypes.func,
    addActionLabel: PropTypes.string,
    onKeyDown: PropTypes.func.isRequired,
    onToggle: PropTypes.func.isRequired,
    onSelect: PropTypes.func.isRequired,
    noHeader: PropTypes.bool,
    className: PropTypes.string,
    selectedId: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
    style: PropTypes.object
  };
}
export default Gesture.withTreeGesture(TreeView);
//# sourceMappingURL=TreeView.component.js.map