rspress-plugin-file-tree 0.1.3-beta.0 → 0.1.3

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.
Files changed (16) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/components/Tree/{Expand.js → Expand.jsx} +8 -5
  3. package/dist/components/Tree/FileIcon.jsx +15 -0
  4. package/dist/components/Tree/{Tree.js → Tree.jsx} +10 -5
  5. package/dist/components/Tree/{TreeFile.js → TreeFile.jsx} +15 -5
  6. package/dist/components/Tree/{TreeFolder.js → TreeFolder.jsx} +23 -5
  7. package/dist/components/Tree/TreeFolderIcon.jsx +14 -0
  8. package/dist/components/Tree/TreeIndents.jsx +12 -0
  9. package/dist/components/Tree/TreeStatusIcon.jsx +17 -0
  10. package/package.json +2 -2
  11. package/dist/components/Tree/FileIcon.js +0 -12
  12. package/dist/components/Tree/TreeFolderIcon.js +0 -12
  13. package/dist/components/Tree/TreeIndents.js +0 -10
  14. package/dist/components/Tree/TreeStatusIcon.js +0 -13
  15. /package/dist/components/Tree/{FileTreeRender.js → FileTreeRender.jsx} +0 -0
  16. /package/dist/components/Tree/{TreeContext.js → TreeContext.jsx} +0 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,12 @@
1
1
  # rspress-plugin-file-tree
2
2
 
3
+ ## 0.1.3
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies [2891f27]
8
+ - rspress-plugin-devkit@0.1.3
9
+
3
10
  ## 0.1.3-beta.0
4
11
 
5
12
  ### Patch Changes
package/dist/components/Tree/{Expand.js → Expand.jsx} RENAMED
@@ -1,5 +1,4 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { useEffect, useRef, useState } from 'react';
1
+ import React, { useEffect, useRef, useState } from 'react';
3
2
  import clsx from 'clsx';
4
3
  export const getRealShape = (el) => {
5
4
  const defaultShape = { width: 0, height: 0 };
@@ -88,16 +87,20 @@ const Expand = ({ isExpanded, delay, parentExpanded = [], children, }) => {
88
87
  const parentClosed = parentExpanded.some((i) => i === false);
89
88
  setParentClosed(parentClosed);
90
89
  }, [parentExpanded]);
91
- return (_jsx("div", { className: clsx('rspress-file-tree-expand-container', {
90
+ return (<div className={clsx('rspress-file-tree-expand-container', {
92
91
  'rspress-file-tree-expand-container-expanded': isExpanded,
93
- }), style: {
92
+ })} style={{
94
93
  height: 0,
95
94
  visibility: visible && !parentClosed ? 'visible' : 'hidden',
96
95
  transition: `height ${delay}ms ease`,
97
96
  ...(selfExpanded
98
97
  ? { height, visibility: parentClosed ? 'hidden' : 'visible' }
99
98
  : {}),
100
- }, children: _jsx("div", { ref: contentRef, className: clsx('rspress-file-tree-expand-content'), children: children }) }));
99
+ }}>
100
+ <div ref={contentRef} className={clsx('rspress-file-tree-expand-content')}>
101
+ {children}
102
+ </div>
103
+ </div>);
101
104
  };
102
105
  Expand.defaultProps = defaultProps;
103
106
  Expand.displayName = 'GeistExpand';
package/dist/components/Tree/FileIcon.jsx ADDED
@@ -0,0 +1,15 @@
1
+ import React from 'react';
2
+ import { buildClassName } from '../presets';
3
+ const defaultProps = {
4
+ width: 22,
5
+ height: 22,
6
+ };
7
+ const TreeFileIcon = ({ color, width, height, }) => {
8
+ return (<svg className={buildClassName('file-icon')} viewBox="0 0 24 24" width={width} height={height} stroke="currentColor" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" fill="none" shapeRendering="geometricPrecision">
9
+ <path d="M13 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V9z"/>
10
+ <path d="M13 2v7h7"/>
11
+ </svg>);
12
+ };
13
+ TreeFileIcon.defaultProps = defaultProps;
14
+ TreeFileIcon.displayName = 'GeistTreeFileIcon';
15
+ export default TreeFileIcon;
package/dist/components/Tree/{Tree.js → Tree.jsx} RENAMED
@@ -1,5 +1,4 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { useMemo } from 'react';
1
+ import React, { useMemo } from 'react';
3
2
  import TreeFile from './TreeFile';
4
3
  import TreeFolder from './TreeFolder';
5
4
  import { TreeContext } from './TreeContext';
@@ -24,8 +23,10 @@ const makeChildren = (value = []) => {
24
23
  })
25
24
  .map((item, index) => {
26
25
  if (item.type === directoryType)
27
- return (_jsx(TreeFolder, { name: item.name, extra: item.extra, parentExpanded: [], children: makeChildren(item.files) }, `folder-${item.name}-${index}`));
28
- return (_jsx(TreeFile, { name: item.name, extra: item.extra, parentExpanded: [] }, `file-${item.name}-${index}`));
26
+ return (<TreeFolder name={item.name} extra={item.extra} key={`folder-${item.name}-${index}`} parentExpanded={[]}>
27
+ {makeChildren(item.files)}
28
+ </TreeFolder>);
29
+ return (<TreeFile name={item.name} extra={item.extra} key={`file-${item.name}-${index}`} parentExpanded={[]}/>);
29
30
  });
30
31
  };
31
32
  const Tree = ({ children, onClick, initialExpand, initialExpandDepth, tree, className, ...props }) => {
@@ -45,7 +46,11 @@ const Tree = ({ children, onClick, initialExpand, initialExpandDepth, tree, clas
45
46
  ? makeChildren(tree)
46
47
  : sortChildren(children, TreeFolder);
47
48
  const dark = useDark();
48
- return (_jsx(TreeContext.Provider, { value: initialValue, children: _jsx("div", { "data-dark": String(dark), className: buildClassName(), ...props, children: customChildren }) }));
49
+ return (<TreeContext.Provider value={initialValue}>
50
+ <div data-dark={String(dark)} className={buildClassName()} {...props}>
51
+ {customChildren}
52
+ </div>
53
+ </TreeContext.Provider>);
49
54
  };
50
55
  Tree.defaultProps = defaultProps;
51
56
  Tree.displayName = 'GeistTree';
package/dist/components/Tree/{TreeFile.js → TreeFile.jsx} RENAMED
@@ -1,5 +1,4 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { useMemo } from 'react';
1
+ import React, { useMemo } from 'react';
3
2
  import TreeFileIcon from './FileIcon';
4
3
  import { useTreeContext } from './TreeContext';
5
4
  import TreeIndents from './TreeIndents';
@@ -17,9 +16,20 @@ const TreeFile = ({ name, parentPath, level, extra, className, parentExpanded, .
17
16
  stopPropagation(event);
18
17
  onFileClick && onFileClick(currentPath);
19
18
  };
20
- return (_jsx("div", { className: buildClassName('file'), onClick: clickHandler, ...props, children: _jsxs("div", { className: buildClassName('file-names'), style: {
21
- marginLeft: `calc(1.875rem * ${level})`,
22
- }, children: [_jsx(TreeIndents, { count: level }), _jsx("span", { className: buildClassName('file-icon'), children: _jsx(TreeFileIcon, {}) }), _jsxs("span", { className: buildClassName('file-name'), children: [name, extra && (_jsx("span", { className: buildClassName('file-extra'), children: extra }))] })] }) }));
19
+ return (<div className={buildClassName('file')} onClick={clickHandler} {...props}>
20
+ <div className={buildClassName('file-names')} style={{
21
+ marginLeft: `calc(1.875rem * ${level})`,
22
+ }}>
23
+ <TreeIndents count={level}/>
24
+ <span className={buildClassName('file-icon')}>
25
+ <TreeFileIcon />
26
+ </span>
27
+ <span className={buildClassName('file-name')}>
28
+ {name}
29
+ {extra && (<span className={buildClassName('file-extra')}>{extra}</span>)}
30
+ </span>
31
+ </div>
32
+ </div>);
23
33
  };
24
34
  TreeFile.defaultProps = defaultProps;
25
35
  TreeFile.displayName = 'GeistTreeFile';
package/dist/components/Tree/{TreeFolder.js → TreeFolder.jsx} RENAMED
@@ -1,5 +1,4 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { useMemo, useState } from 'react';
1
+ import React, { useMemo, useState } from 'react';
3
2
  import TreeFile from './TreeFile';
4
3
  import Expand from './Expand';
5
4
  import TreeIndents from './TreeIndents';
@@ -28,9 +27,28 @@ const TreeFolder = ({ name, children, parentPath, level: parentLevel, extra, cla
28
27
  const sortedChildren = isImperative
29
28
  ? nextChildren
30
29
  : sortChildren(nextChildren, TreeFolder);
31
- return (_jsxs("div", { className: buildClassName('folder'), onClick: clickHandler, ...props, children: [_jsxs("div", { className: buildClassName('folder-names'), style: {
32
- marginLeft: `calc(1.875rem * ${parentLevel})`,
33
- }, children: [_jsx(TreeIndents, { count: parentLevel }), _jsx("span", { className: buildClassName('folder-status'), children: _jsx(TreeStatusIcon, { active: expanded }) }), _jsx("span", { className: buildClassName('folder-icon'), children: _jsx(TreeFolderIcon, {}) }), _jsxs("span", { className: buildClassName('folder-name'), children: [name, extra && (_jsx("span", { className: buildClassName('folder-extra'), children: extra }))] })] }), _jsx(Expand, { isExpanded: expanded, parentExpanded: parentExpanded, children: _jsx("div", { className: buildClassName('folder-content'), onClick: stopPropagation, children: sortedChildren }) })] }));
30
+ return (<div className={buildClassName('folder')} onClick={clickHandler} {...props}>
31
+ <div className={buildClassName('folder-names')} style={{
32
+ marginLeft: `calc(1.875rem * ${parentLevel})`,
33
+ }}>
34
+ <TreeIndents count={parentLevel}/>
35
+ <span className={buildClassName('folder-status')}>
36
+ <TreeStatusIcon active={expanded}/>
37
+ </span>
38
+ <span className={buildClassName('folder-icon')}>
39
+ <TreeFolderIcon />
40
+ </span>
41
+ <span className={buildClassName('folder-name')}>
42
+ {name}
43
+ {extra && (<span className={buildClassName('folder-extra')}>{extra}</span>)}
44
+ </span>
45
+ </div>
46
+ <Expand isExpanded={expanded} parentExpanded={parentExpanded}>
47
+ <div className={buildClassName('folder-content')} onClick={stopPropagation}>
48
+ {sortedChildren}
49
+ </div>
50
+ </Expand>
51
+ </div>);
34
52
  };
35
53
  TreeFolder.defaultProps = defaultProps;
36
54
  TreeFolder.displayName = 'GeistTreeFolder';
package/dist/components/Tree/TreeFolderIcon.jsx ADDED
@@ -0,0 +1,14 @@
1
+ import React from 'react';
2
+ import { buildClassName } from '../presets';
3
+ const defaultProps = {
4
+ width: 22,
5
+ height: 22,
6
+ };
7
+ const TreeFolderIcon = ({ color, width, height, }) => {
8
+ return (<svg className={buildClassName('folder-icon')} viewBox="0 0 24 24" width={width} height={height} stroke="currentColor" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" fill="none" shapeRendering="geometricPrecision">
9
+ <path d="M2.707 7.454V5.62C2.707 4.725 3.469 4 4.409 4h4.843c.451 0 .884.17 1.204.474l.49.467c.126.12.296.186.473.186h8.399c.94 0 1.55.695 1.55 1.59v.737m-18.661 0h-.354a.344.344 0 00-.353.35l.508 11.587c.015.34.31.609.668.609h17.283c.358 0 .652-.269.667-.61L22 7.805a.344.344 0 00-.353-.35h-.278m-18.662 0h18.662"/>
10
+ </svg>);
11
+ };
12
+ TreeFolderIcon.defaultProps = defaultProps;
13
+ TreeFolderIcon.displayName = 'GeistTreeFolderIcon';
14
+ export default TreeFolderIcon;
package/dist/components/Tree/TreeIndents.jsx ADDED
@@ -0,0 +1,12 @@
1
+ import React from 'react';
2
+ import { buildClassName } from '../presets';
3
+ const TreeIndents = ({ count }) => {
4
+ if (count === 0)
5
+ return null;
6
+ return (<>
7
+ {[...new Array(count)].map((_, index) => (<span className={buildClassName('indent')} key={`indent-${index}`} style={{
8
+ left: `calc(-1.875rem * ${index + 1} + 0.75rem)`,
9
+ }}></span>))}
10
+ </>);
11
+ };
12
+ export default TreeIndents;
package/dist/components/Tree/TreeStatusIcon.jsx ADDED
@@ -0,0 +1,17 @@
1
+ import React from 'react';
2
+ import { buildClassName } from '../presets';
3
+ const defaultProps = {
4
+ width: 12,
5
+ height: 12,
6
+ active: false,
7
+ };
8
+ const TreeStatusIcon = ({ color, width, height, active, }) => {
9
+ return (<svg className={buildClassName('folder-status-icon')} viewBox="0 0 24 24" width={width} height={height} stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" fill="none" shapeRendering="geometricPrecision">
10
+ <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
11
+ {!active && <path d="M12 8v8"/>}
12
+ <path d="M8 12h8"/>
13
+ </svg>);
14
+ };
15
+ TreeStatusIcon.defaultProps = defaultProps;
16
+ TreeStatusIcon.displayName = 'GeistTreeStatusIcon';
17
+ export default TreeStatusIcon;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "rspress-plugin-file-tree",
3
- "version": "0.1.3-beta.0",
3
+ "version": "0.1.3",
4
4
  "description": "Rspress plugin that add support for file tree component.",
5
5
  "keywords": [
6
6
  "rspress",
@@ -25,7 +25,7 @@
25
25
  },
26
26
  "dependencies": {
27
27
  "@rspress/shared": "^1.17.1",
28
- "rspress-plugin-devkit": "^0.1.3-beta.0"
28
+ "rspress-plugin-devkit": "^0.1.3"
29
29
  },
30
30
  "devDependencies": {
31
31
  "@types/node": "^20.12.5",
package/dist/components/Tree/FileIcon.js DELETED
@@ -1,12 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { buildClassName } from '../presets';
3
- const defaultProps = {
4
- width: 22,
5
- height: 22,
6
- };
7
- const TreeFileIcon = ({ color, width, height, }) => {
8
- return (_jsxs("svg", { className: buildClassName('file-icon'), viewBox: "0 0 24 24", width: width, height: height, stroke: "currentColor", strokeWidth: "1", strokeLinecap: "round", strokeLinejoin: "round", fill: "none", shapeRendering: "geometricPrecision", children: [_jsx("path", { d: "M13 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V9z" }), _jsx("path", { d: "M13 2v7h7" })] }));
9
- };
10
- TreeFileIcon.defaultProps = defaultProps;
11
- TreeFileIcon.displayName = 'GeistTreeFileIcon';
12
- export default TreeFileIcon;
package/dist/components/Tree/TreeFolderIcon.js DELETED
@@ -1,12 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { buildClassName } from '../presets';
3
- const defaultProps = {
4
- width: 22,
5
- height: 22,
6
- };
7
- const TreeFolderIcon = ({ color, width, height, }) => {
8
- return (_jsx("svg", { className: buildClassName('folder-icon'), viewBox: "0 0 24 24", width: width, height: height, stroke: "currentColor", strokeWidth: "1", strokeLinecap: "round", strokeLinejoin: "round", fill: "none", shapeRendering: "geometricPrecision", children: _jsx("path", { d: "M2.707 7.454V5.62C2.707 4.725 3.469 4 4.409 4h4.843c.451 0 .884.17 1.204.474l.49.467c.126.12.296.186.473.186h8.399c.94 0 1.55.695 1.55 1.59v.737m-18.661 0h-.354a.344.344 0 00-.353.35l.508 11.587c.015.34.31.609.668.609h17.283c.358 0 .652-.269.667-.61L22 7.805a.344.344 0 00-.353-.35h-.278m-18.662 0h18.662" }) }));
9
- };
10
- TreeFolderIcon.defaultProps = defaultProps;
11
- TreeFolderIcon.displayName = 'GeistTreeFolderIcon';
12
- export default TreeFolderIcon;
package/dist/components/Tree/TreeIndents.js DELETED
@@ -1,10 +0,0 @@
1
- import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
2
- import { buildClassName } from '../presets';
3
- const TreeIndents = ({ count }) => {
4
- if (count === 0)
5
- return null;
6
- return (_jsx(_Fragment, { children: [...new Array(count)].map((_, index) => (_jsx("span", { className: buildClassName('indent'), style: {
7
- left: `calc(-1.875rem * ${index + 1} + 0.75rem)`,
8
- } }, `indent-${index}`))) }));
9
- };
10
- export default TreeIndents;
package/dist/components/Tree/TreeStatusIcon.js DELETED
@@ -1,13 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { buildClassName } from '../presets';
3
- const defaultProps = {
4
- width: 12,
5
- height: 12,
6
- active: false,
7
- };
8
- const TreeStatusIcon = ({ color, width, height, active, }) => {
9
- return (_jsxs("svg", { className: buildClassName('folder-status-icon'), viewBox: "0 0 24 24", width: width, height: height, stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", fill: "none", shapeRendering: "geometricPrecision", children: [_jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }), !active && _jsx("path", { d: "M12 8v8" }), _jsx("path", { d: "M8 12h8" })] }));
10
- };
11
- TreeStatusIcon.defaultProps = defaultProps;
12
- TreeStatusIcon.displayName = 'GeistTreeStatusIcon';
13
- export default TreeStatusIcon;