@dreamcommerce/aurora 2.10.9-3 → 2.10.9-4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/cjs/packages/aurora/src/components/tree/components/tree_node.js +4 -4
- package/build/cjs/packages/aurora/src/components/tree/css_classes.js +2 -1
- package/build/cjs/packages/aurora/src/components/tree/css_classes.js.map +1 -1
- package/build/esm/packages/aurora/src/components/tree/components/tree_node.d.ts +1 -2
- package/build/esm/packages/aurora/src/components/tree/components/tree_node.js +4 -4
- package/build/esm/packages/aurora/src/components/tree/css_classes.d.ts +1 -0
- package/build/esm/packages/aurora/src/components/tree/css_classes.js +2 -1
- package/build/esm/packages/aurora/src/components/tree/css_classes.js.map +1 -1
- package/package.json +1 -1
|
@@ -16,7 +16,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
16
16
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
17
17
|
var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
|
|
18
18
|
|
|
19
|
-
const TreeNode = ({ children, id, cssClassNames, ContentComponent, LabelComponent,
|
|
19
|
+
const TreeNode = ({ children, id, cssClassNames, ContentComponent, LabelComponent, ...rest }) => {
|
|
20
20
|
const treeApi = tree_hook.useTree();
|
|
21
21
|
const node = tree_node_hook.useTreeNode(id, rest);
|
|
22
22
|
const nodeChildrenRef = React.useRef(null);
|
|
@@ -27,7 +27,6 @@ const TreeNode = ({ children, id, cssClassNames, ContentComponent, LabelComponen
|
|
|
27
27
|
treeApi.toggleNode(node.id);
|
|
28
28
|
};
|
|
29
29
|
const Label = LabelComponent ? (LabelComponent === null || LabelComponent === void 0 ? void 0 : LabelComponent({ node, isLeaf: !children })) : (React__default['default'].createElement("span", { tabIndex: !children ? 0 : -1, className: classnames__default['default'](main_module['default'][css_classes.TREE_NODE_CSS_CLASSES.treeNodeLabelContent], css_classes.TREE_NODE_CSS_CLASSES.treeNodeLabelContent) }, node.label ? node.label : node.id));
|
|
30
|
-
const LabelWithPadding = labelWithNoChildrenPaddingLeftPx ? (React__default['default'].createElement("div", { style: { paddingLeft: `${labelWithNoChildrenPaddingLeftPx}px` } }, Label)) : (Label);
|
|
31
30
|
const Content = ContentComponent ? (ContentComponent === null || ContentComponent === void 0 ? void 0 : ContentComponent({ node, toggleNode, isLeaf: !childrenCount })) : (React__default['default'].createElement("div", { className: classnames__default['default'](css_classes.TREE_NODE_CSS_CLASSES.treeNodeLabel, main_module['default'][css_classes.TREE_NODE_CSS_CLASSES.treeNodeLabel]) },
|
|
32
31
|
React__default['default'].createElement("button", { className: classnames__default['default'](css_classes.TREE_NODE_CSS_CLASSES.treeNodeTogglerBtn, main_module['default'][css_classes.TREE_NODE_CSS_CLASSES.treeNodeTogglerBtn], {
|
|
33
32
|
[css_classes.TREE_NODE_CSS_CLASSES.treeNodeTogglerBtnExpanded]: node.expanded,
|
|
@@ -37,9 +36,10 @@ const TreeNode = ({ children, id, cssClassNames, ContentComponent, LabelComponen
|
|
|
37
36
|
React__default['default'].createElement(icon_list_arrow_down.IconListArrowDown, null))),
|
|
38
37
|
Label));
|
|
39
38
|
return (React__default['default'].createElement("li", { role: "treeitem", "aria-expanded": node.expanded, className: classnames__default['default'](main_module['default'][css_classes.TREE_NODE_CSS_CLASSES.treeNode], css_classes.TREE_NODE_CSS_CLASSES.treeNode, cssClassNames, {
|
|
40
|
-
[css_classes.TREE_NODE_CSS_CLASSES.treeNodeExpanded]: node.expanded
|
|
39
|
+
[css_classes.TREE_NODE_CSS_CLASSES.treeNodeExpanded]: node.expanded,
|
|
40
|
+
[css_classes.TREE_NODE_CSS_CLASSES.treeNodeWithoutChildren]: !childrenCount
|
|
41
41
|
}) },
|
|
42
|
-
childrenCount ? Content :
|
|
42
|
+
childrenCount ? Content : Label,
|
|
43
43
|
childrenCount ? (React__default['default'].createElement(reactTransitionGroup.CSSTransition, { unmountOnExit: true, in: node.expanded, timeout: 250, classNames: {
|
|
44
44
|
enter: main_module['default'][css_classes.TREE_NODE_CSS_CLASSES.treeNodeChildrenEnter],
|
|
45
45
|
enterActive: main_module['default'][css_classes.TREE_NODE_CSS_CLASSES.treeNodeChildrenEnterActive],
|
|
@@ -23,7 +23,8 @@ const TREE_NODE_CSS_CLASSES = {
|
|
|
23
23
|
treeNodeChildrenExitDone: `${treeNodeBaseCssClass}__children-exit-done`,
|
|
24
24
|
treeNodeExpanded: `${treeNodeBaseCssClass}_expanded`,
|
|
25
25
|
treeNodeDisabled: `${treeNodeBaseCssClass}_disabled`,
|
|
26
|
-
treeNodeFocused: `${treeNodeBaseCssClass}_focused
|
|
26
|
+
treeNodeFocused: `${treeNodeBaseCssClass}_focused`,
|
|
27
|
+
treeNodeWithoutChildren: `${treeNodeBaseCssClass}_without-children`
|
|
27
28
|
};
|
|
28
29
|
|
|
29
30
|
exports.TREE_CSS_CLASSES = TREE_CSS_CLASSES;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -16,7 +16,6 @@ declare type TTreeNodeProps = TPropsWithChildren<ITreeNode & {
|
|
|
16
16
|
expandIcon?: React.ReactNode;
|
|
17
17
|
LabelComponent?: (props: TTreeLabelComponentProps) => React.ReactNode;
|
|
18
18
|
ContentComponent?: (props: TTreeContentComponentProps) => React.ReactNode;
|
|
19
|
-
labelWithNoChildrenPaddingLeftPx?: number;
|
|
20
19
|
}>;
|
|
21
|
-
export declare const TreeNode: ({ children, id, cssClassNames, ContentComponent, LabelComponent,
|
|
20
|
+
export declare const TreeNode: ({ children, id, cssClassNames, ContentComponent, LabelComponent, ...rest }: TTreeNodeProps) => JSX.Element | null;
|
|
22
21
|
export default TreeNode;
|
|
@@ -7,7 +7,7 @@ import { IconListArrowDown } from '../../../assets/icon_list_arrow_down.js';
|
|
|
7
7
|
import { useTree } from '../hooks/tree_hook.js';
|
|
8
8
|
import { useTreeNode } from '../hooks/tree_node_hook.js';
|
|
9
9
|
|
|
10
|
-
const TreeNode = ({ children, id, cssClassNames, ContentComponent, LabelComponent,
|
|
10
|
+
const TreeNode = ({ children, id, cssClassNames, ContentComponent, LabelComponent, ...rest }) => {
|
|
11
11
|
const treeApi = useTree();
|
|
12
12
|
const node = useTreeNode(id, rest);
|
|
13
13
|
const nodeChildrenRef = useRef(null);
|
|
@@ -18,7 +18,6 @@ const TreeNode = ({ children, id, cssClassNames, ContentComponent, LabelComponen
|
|
|
18
18
|
treeApi.toggleNode(node.id);
|
|
19
19
|
};
|
|
20
20
|
const Label = LabelComponent ? (LabelComponent === null || LabelComponent === void 0 ? void 0 : LabelComponent({ node, isLeaf: !children })) : (React.createElement("span", { tabIndex: !children ? 0 : -1, className: classnames(cssClasses[TREE_NODE_CSS_CLASSES.treeNodeLabelContent], TREE_NODE_CSS_CLASSES.treeNodeLabelContent) }, node.label ? node.label : node.id));
|
|
21
|
-
const LabelWithPadding = labelWithNoChildrenPaddingLeftPx ? (React.createElement("div", { style: { paddingLeft: `${labelWithNoChildrenPaddingLeftPx}px` } }, Label)) : (Label);
|
|
22
21
|
const Content = ContentComponent ? (ContentComponent === null || ContentComponent === void 0 ? void 0 : ContentComponent({ node, toggleNode, isLeaf: !childrenCount })) : (React.createElement("div", { className: classnames(TREE_NODE_CSS_CLASSES.treeNodeLabel, cssClasses[TREE_NODE_CSS_CLASSES.treeNodeLabel]) },
|
|
23
22
|
React.createElement("button", { className: classnames(TREE_NODE_CSS_CLASSES.treeNodeTogglerBtn, cssClasses[TREE_NODE_CSS_CLASSES.treeNodeTogglerBtn], {
|
|
24
23
|
[TREE_NODE_CSS_CLASSES.treeNodeTogglerBtnExpanded]: node.expanded,
|
|
@@ -28,9 +27,10 @@ const TreeNode = ({ children, id, cssClassNames, ContentComponent, LabelComponen
|
|
|
28
27
|
React.createElement(IconListArrowDown, null))),
|
|
29
28
|
Label));
|
|
30
29
|
return (React.createElement("li", { role: "treeitem", "aria-expanded": node.expanded, className: classnames(cssClasses[TREE_NODE_CSS_CLASSES.treeNode], TREE_NODE_CSS_CLASSES.treeNode, cssClassNames, {
|
|
31
|
-
[TREE_NODE_CSS_CLASSES.treeNodeExpanded]: node.expanded
|
|
30
|
+
[TREE_NODE_CSS_CLASSES.treeNodeExpanded]: node.expanded,
|
|
31
|
+
[TREE_NODE_CSS_CLASSES.treeNodeWithoutChildren]: !childrenCount
|
|
32
32
|
}) },
|
|
33
|
-
childrenCount ? Content :
|
|
33
|
+
childrenCount ? Content : Label,
|
|
34
34
|
childrenCount ? (React.createElement(CSSTransition, { unmountOnExit: true, in: node.expanded, timeout: 250, classNames: {
|
|
35
35
|
enter: cssClasses[TREE_NODE_CSS_CLASSES.treeNodeChildrenEnter],
|
|
36
36
|
enterActive: cssClasses[TREE_NODE_CSS_CLASSES.treeNodeChildrenEnterActive],
|
|
@@ -18,4 +18,5 @@ export declare const TREE_NODE_CSS_CLASSES: {
|
|
|
18
18
|
readonly treeNodeExpanded: "tree-node_expanded";
|
|
19
19
|
readonly treeNodeDisabled: "tree-node_disabled";
|
|
20
20
|
readonly treeNodeFocused: "tree-node_focused";
|
|
21
|
+
readonly treeNodeWithoutChildren: "tree-node_without-children";
|
|
21
22
|
};
|
|
@@ -19,7 +19,8 @@ const TREE_NODE_CSS_CLASSES = {
|
|
|
19
19
|
treeNodeChildrenExitDone: `${treeNodeBaseCssClass}__children-exit-done`,
|
|
20
20
|
treeNodeExpanded: `${treeNodeBaseCssClass}_expanded`,
|
|
21
21
|
treeNodeDisabled: `${treeNodeBaseCssClass}_disabled`,
|
|
22
|
-
treeNodeFocused: `${treeNodeBaseCssClass}_focused
|
|
22
|
+
treeNodeFocused: `${treeNodeBaseCssClass}_focused`,
|
|
23
|
+
treeNodeWithoutChildren: `${treeNodeBaseCssClass}_without-children`
|
|
23
24
|
};
|
|
24
25
|
|
|
25
26
|
export { TREE_CSS_CLASSES, TREE_NODE_CSS_CLASSES };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|