@salesforce/design-system-react
Version:
Salesforce Lightning Design System for React
224 lines (180 loc) • 8.81 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _item = _interopRequireDefault(require("./item"));
var _renderInitialBranch = _interopRequireDefault(require("./render-initial-branch"));
var _renderBranch = _interopRequireDefault(require("./render-branch"));
var _constants = require("../../../utilities/constants");
var _generateId = _interopRequireDefault(require("../../../utilities/generate-id"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
/**
* A Tree Item is a non-branching node in a hierarchical list.
*/
var Branch = function Branch(_ref) {
var _ref$level = _ref.level,
level = _ref$level === void 0 ? 0 : _ref$level,
_ref$label = _ref.label,
label = _ref$label === void 0 ? '' : _ref$label,
_ref$treeIndex = _ref.treeIndex,
treeIndex = _ref$treeIndex === void 0 ? '' : _ref$treeIndex,
_ref$selectedNodeInde = _ref.selectedNodeIndexes,
selectedNodeIndexes = _ref$selectedNodeInde === void 0 ? [] : _ref$selectedNodeInde,
rest = _objectWithoutProperties(_ref, ["level", "label", "treeIndex", "selectedNodeIndexes"]);
var resolvedTreeIndex = '';
var children;
var props = _objectSpread({
level: level,
label: label,
treeIndex: treeIndex,
selectedNodeIndexes: selectedNodeIndexes
}, rest);
var treeId = props.treeId,
onExpand = props.onExpand,
searchTerm = props.searchTerm;
if (Array.isArray(props.getNodes(props.node))) {
children = props.getNodes(props.node).map(function (node, index) {
var child;
var htmlId = "".concat(treeId, "-").concat(node.id);
resolvedTreeIndex = "".concat(index);
if (treeIndex) {
resolvedTreeIndex = "".concat(treeIndex, "-").concat(resolvedTreeIndex);
}
if (node.type === 'branch') {
child = /*#__PURE__*/_react.default.createElement(Branch, {
getNodes: props.getNodes,
htmlId: htmlId,
key: node.id,
label: node.label,
level: level + 1,
node: node,
flattenedNodes: props.flattenedNodes,
selectedNodeIndexes: selectedNodeIndexes,
focusedNodeIndex: props.focusedNodeIndex,
treeHasFocus: props.treeHasFocus,
onNodeBlur: props.onNodeBlur,
nodes: node.nodes,
onSelect: props.onSelect,
onExpand: onExpand,
searchTerm: searchTerm,
treeId: treeId,
treeIndex: resolvedTreeIndex,
parent: props.node
});
} else {
child = /*#__PURE__*/_react.default.createElement(_item.default, {
label: node.label,
htmlId: htmlId,
key: (0, _generateId.default)(),
level: level + 1,
node: node,
flattenedNodes: props.flattenedNodes,
selectedNodeIndexes: selectedNodeIndexes,
focusedNodeIndex: props.focusedNodeIndex,
treeHasFocus: props.treeHasFocus,
onNodeBlur: props.onNodeBlur,
onSelect: props.onSelect,
onExpand: onExpand,
searchTerm: searchTerm,
treeIndex: resolvedTreeIndex,
treeId: treeId,
parent: props.node
});
}
return child;
});
}
var branch = level === 0 ? (0, _renderInitialBranch.default)(children, props) : (0, _renderBranch.default)(children, props);
return branch;
}; // ### Display Name
// Always use the canonical component name as the React display name.
Branch.displayName = _constants.TREE_BRANCH; // ### Prop Types
Branch.propTypes = {
/**
* A function that will be called by every branch to receive its child nodes. The parent `node` object with the branch data is passed into this function: `getNodes(node)`. If your state engine is Flux or Redux, then your tree data structure will probably be flattened or normalized within the store. This will allow you to build out your tree without transversing an actual tree of data and may be more performant.
*/
getNodes: _propTypes.default.func,
/**
* HTML `id` of the wrapping container element joined with the `id` of the node. This will recursively increase as the tree depth increases.
*/
htmlId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
/**
* All tree nodes must have a unique HTML `id` for users of assistive technology. If no `id` key is present in the is provided, one will be generated.
*/
index: _propTypes.default.number,
/**
* Determines if nodes in the top-level of the tree.
*/
initial: _propTypes.default.bool,
/*
* Class names to be added to the top-level `ul` element.
*/
initalClassName: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.object, _propTypes.default.string]),
initialStyle: _propTypes.default.object,
/**
* The text of the tree item.
*/
label: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.string]),
/**
* The number of nestings. Determines the ARIA level and style alignment.
*/
level: _propTypes.default.number.isRequired,
/**
* The current node that is being rendered.
*/
node: _propTypes.default.object.isRequired,
/**
* Function that will run whenever an item or branch is selected (click or keyboard).
*/
onSelect: _propTypes.default.func,
/**
* This function triggers when the expand or collapse icon is clicked.
*/
onExpand: _propTypes.default.func.isRequired,
/**
* Highlights term if found in node label
*/
searchTerm: _propTypes.default.string,
/**
* Unique id used for a prefix of all tree nodes. This is the prefix for subsequent `htmlId` props.
*/
treeId: _propTypes.default.string,
/**
* Location of node (zero index). First node is `0`. It's first child is `0-0`. This can be used to modify your nodes without searching for the node. This index is only valid if the `nodes` prop is the same as at the time of the event.
*/
treeIndex: _propTypes.default.string,
/**
* Flattened tree structure.
*/
flattenedNodes: _propTypes.default.arrayOf(_propTypes.default.object),
/**
* Tree indexes of nodes that are currently selected.
*/
selectedNodeIndexes: _propTypes.default.arrayOf(_propTypes.default.string),
/**
* Tree index of the node that is currently focused.
*/
focusedNodeIndex: _propTypes.default.string,
/**
* Callback for when a node is blurred.
*/
onNodeBlur: _propTypes.default.func,
/**
* Sets focus on render.
*/
treeHasFocus: _propTypes.default.bool,
/**
* This node's parent.
*/
parent: _propTypes.default.object
};
var _default = Branch;
exports.default = _default;