@kne/file-system-view 1.0.0 → 1.0.1

package/README.md

@@ -256,6 +256,7 @@ render(<ControlledExample />);
 | menuItems | `MenuItem[]` | - | 操作菜单项配置，不传则不显示操作按钮 |
 | defaultExpandAll | `boolean` | `false` | 是否默认展开所有目录 |
 | expandedKeys | `string[]` | - | （受控）展开的节点 key 数组 |
+| selectedPath | `string` | - | 选中的文件/目录路径，用于高亮显示 |
 | onExpand | `(keys: string[], info: { node, expanded, nativeEvent }) => void` | - | 展开/收起节点时的回调 |
 | onFileClick | `(data: FileItem, key: string) => void` | - | 点击文件时的回调 |
 

package/dist/index.css

@@ -65,6 +65,12 @@
   opacity: 1;
   visibility: visible;
 }
+._t015K._vI5hy {
+  background: rgba(22, 119, 255, 0.12);
+}
+._t015K._vI5hy:hover {
+  background: rgba(22, 119, 255, 0.16);
+}
 
 ._dgomj {
   display: flex;

package/dist/index.css.map

@@ -1 +1 @@
-{"version":3,"sources":["style.module.scss"],"names":[],"mappings":"AAAA;EACE,eAAe;EACf,yBAAiB;UAAjB,iBAAiB;AACnB;AACA;EACE,uBAAuB;AACzB;AACA;EACE,UAAU;EACV,WAAW;EACX,kBAAkB;AACpB;AACA;EACE,SAAS;AACX;AACA;EACE,UAAU;EACV,OAAO;EACP,YAAY;AACd;AACA;EACE,uBAAuB;AACzB;AACA;EACE,aAAa;EACb,mBAAmB;EACnB,uBAAuB;EACvB,WAAW;EACX,cAAc;AAChB;AACA;EACE,aAAa;AACf;AACA;EACE,eAAe;AACjB;AACA;EACE,cAAc;AAChB;AACA;EACE,kCAAkC;EAClC,yBAAyB;AAC3B;AACA;EACE,+BAA+B;AACjC;;AAEA;EACE,aAAa;EACb,mBAAmB;EACnB,gBAAgB;EAChB,kBAAkB;EAClB,eAAe;EACf,yBAAyB;EACzB,kBAAkB;EAClB,gBAAgB;EAChB,WAAW;AACb;AACA;EACE,+BAA+B;AACjC;AACA;EACE,gBAAgB;EAChB,UAAU;EACV,mBAAmB;AACrB;;AAEA;EACE,aAAa;EACb,mBAAmB;EACnB,uBAAuB;EACvB,WAAW;EACX,YAAY;EACZ,iBAAiB;EACjB,cAAc;AAChB;AACA;EACE,eAAe;AACjB;;AAEA;EACE,OAAO;EACP,gBAAgB;EAChB,mBAAmB;EACnB,WAAW;EACX,eAAe;EACf,aAAa;EACb,YAAY;AACd;;AAEA;EACE,gBAAgB;EAChB,uBAAuB;EACvB,mBAAmB;EACnB,YAAY;AACd;;AAEA;EACE,cAAc;AAChB;;AAEA;EACE,UAAU;EACV,kBAAkB;EAClB,yBAAyB;EACzB,iBAAiB;EACjB,cAAc;EACd,YAAY;EACZ,WAAW;EACX,cAAc;EACd,WAAW;AACb;AACA;EACE,cAAc;EACd,mCAAmC;AACrC;;AAEA;EACE,kBAAkB;EAClB,kBAAkB;EAClB,WAAW;EACX,eAAe;AACjB","file":"index.css","sourcesContent":[".file-system-view {\n  font-size: 14px;\n  user-select: none;\n}\n.file-system-view :global .ant-tree {\n  background: transparent;\n}\n.file-system-view :global .ant-tree .ant-tree-treenode {\n  padding: 0;\n  width: 100%;\n  position: relative;\n}\n.file-system-view :global .ant-tree .ant-tree-treenode:before {\n  bottom: 0;\n}\n.file-system-view :global .ant-tree .ant-tree-treenode .ant-tree-node-content-wrapper {\n  padding: 0;\n  flex: 1;\n  min-width: 0;\n}\n.file-system-view :global .ant-tree .ant-tree-treenode .ant-tree-node-content-wrapper:hover {\n  background: transparent;\n}\n.file-system-view :global .ant-tree .ant-tree-treenode .ant-tree-switcher {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 10px;\n  flex-shrink: 0;\n}\n.file-system-view :global .ant-tree .ant-tree-treenode .ant-tree-switcher:before {\n  display: none;\n}\n.file-system-view :global .ant-tree-list-holder-inner .ant-tree-treenode {\n  padding-left: 0;\n}\n.file-system-view :global .ant-tree-switcher-line-icon {\n  color: #d9d9d9;\n}\n.file-system-view :global .ant-tree-node-content-wrapper .tree-node {\n  border-left: 2px solid transparent;\n  transition: all 0.2s ease;\n}\n.file-system-view :global .ant-tree-treenode[style*=\"padding-left: 0px\"] .tree-node, .file-system-view :global .ant-tree-treenode:first-child .tree-node {\n  background: rgba(0, 0, 0, 0.02);\n}\n\n.tree-node {\n  display: flex;\n  align-items: center;\n  padding: 4px 8px;\n  border-radius: 4px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  position: relative;\n  min-height: 28px;\n  width: 100%;\n}\n.tree-node:hover {\n  background: rgba(0, 0, 0, 0.04);\n}\n.tree-node:hover .action-btn {\n  margin-left: 4px;\n  opacity: 1;\n  visibility: visible;\n}\n\n.node-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  margin-right: 6px;\n  flex-shrink: 0;\n}\n.node-icon :global .anticon {\n  font-size: 14px;\n}\n\n.node-title {\n  flex: 1;\n  overflow: hidden;\n  white-space: nowrap;\n  color: #333;\n  font-size: 13px;\n  display: flex;\n  min-width: 0;\n}\n\n.node-name {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  min-width: 0;\n}\n\n.node-ext {\n  flex-shrink: 0;\n}\n\n.action-btn {\n  opacity: 0;\n  visibility: hidden;\n  transition: all 0.2s ease;\n  margin-left: auto;\n  padding: 0 2px;\n  height: 20px;\n  width: 20px;\n  flex-shrink: 0;\n  color: #999;\n}\n.action-btn:hover {\n  color: #1677ff;\n  background: rgba(22, 119, 255, 0.1);\n}\n\n.empty {\n  padding: 40px 20px;\n  text-align: center;\n  color: #999;\n  font-size: 14px;\n}"]}
+{"version":3,"sources":["style.module.scss"],"names":[],"mappings":"AAAA;EACE,eAAe;EACf,yBAAiB;UAAjB,iBAAiB;AACnB;AACA;EACE,uBAAuB;AACzB;AACA;EACE,UAAU;EACV,WAAW;EACX,kBAAkB;AACpB;AACA;EACE,SAAS;AACX;AACA;EACE,UAAU;EACV,OAAO;EACP,YAAY;AACd;AACA;EACE,uBAAuB;AACzB;AACA;EACE,aAAa;EACb,mBAAmB;EACnB,uBAAuB;EACvB,WAAW;EACX,cAAc;AAChB;AACA;EACE,aAAa;AACf;AACA;EACE,eAAe;AACjB;AACA;EACE,cAAc;AAChB;AACA;EACE,kCAAkC;EAClC,yBAAyB;AAC3B;AACA;EACE,+BAA+B;AACjC;;AAEA;EACE,aAAa;EACb,mBAAmB;EACnB,gBAAgB;EAChB,kBAAkB;EAClB,eAAe;EACf,yBAAyB;EACzB,kBAAkB;EAClB,gBAAgB;EAChB,WAAW;AACb;AACA;EACE,+BAA+B;AACjC;AACA;EACE,gBAAgB;EAChB,UAAU;EACV,mBAAmB;AACrB;AACA;EACE,oCAAoC;AACtC;AACA;EACE,oCAAoC;AACtC;;AAEA;EACE,aAAa;EACb,mBAAmB;EACnB,uBAAuB;EACvB,WAAW;EACX,YAAY;EACZ,iBAAiB;EACjB,cAAc;AAChB;AACA;EACE,eAAe;AACjB;;AAEA;EACE,OAAO;EACP,gBAAgB;EAChB,mBAAmB;EACnB,WAAW;EACX,eAAe;EACf,aAAa;EACb,YAAY;AACd;;AAEA;EACE,gBAAgB;EAChB,uBAAuB;EACvB,mBAAmB;EACnB,YAAY;AACd;;AAEA;EACE,cAAc;AAChB;;AAEA;EACE,UAAU;EACV,kBAAkB;EAClB,yBAAyB;EACzB,iBAAiB;EACjB,cAAc;EACd,YAAY;EACZ,WAAW;EACX,cAAc;EACd,WAAW;AACb;AACA;EACE,cAAc;EACd,mCAAmC;AACrC;;AAEA;EACE,kBAAkB;EAClB,kBAAkB;EAClB,WAAW;EACX,eAAe;AACjB","file":"index.css","sourcesContent":[".file-system-view {\n  font-size: 14px;\n  user-select: none;\n}\n.file-system-view :global .ant-tree {\n  background: transparent;\n}\n.file-system-view :global .ant-tree .ant-tree-treenode {\n  padding: 0;\n  width: 100%;\n  position: relative;\n}\n.file-system-view :global .ant-tree .ant-tree-treenode:before {\n  bottom: 0;\n}\n.file-system-view :global .ant-tree .ant-tree-treenode .ant-tree-node-content-wrapper {\n  padding: 0;\n  flex: 1;\n  min-width: 0;\n}\n.file-system-view :global .ant-tree .ant-tree-treenode .ant-tree-node-content-wrapper:hover {\n  background: transparent;\n}\n.file-system-view :global .ant-tree .ant-tree-treenode .ant-tree-switcher {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 10px;\n  flex-shrink: 0;\n}\n.file-system-view :global .ant-tree .ant-tree-treenode .ant-tree-switcher:before {\n  display: none;\n}\n.file-system-view :global .ant-tree-list-holder-inner .ant-tree-treenode {\n  padding-left: 0;\n}\n.file-system-view :global .ant-tree-switcher-line-icon {\n  color: #d9d9d9;\n}\n.file-system-view :global .ant-tree-node-content-wrapper .tree-node {\n  border-left: 2px solid transparent;\n  transition: all 0.2s ease;\n}\n.file-system-view :global .ant-tree-treenode[style*=\"padding-left: 0px\"] .tree-node, .file-system-view :global .ant-tree-treenode:first-child .tree-node {\n  background: rgba(0, 0, 0, 0.02);\n}\n\n.tree-node {\n  display: flex;\n  align-items: center;\n  padding: 4px 8px;\n  border-radius: 4px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  position: relative;\n  min-height: 28px;\n  width: 100%;\n}\n.tree-node:hover {\n  background: rgba(0, 0, 0, 0.04);\n}\n.tree-node:hover .action-btn {\n  margin-left: 4px;\n  opacity: 1;\n  visibility: visible;\n}\n.tree-node.selected {\n  background: rgba(22, 119, 255, 0.12);\n}\n.tree-node.selected:hover {\n  background: rgba(22, 119, 255, 0.16);\n}\n\n.node-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  margin-right: 6px;\n  flex-shrink: 0;\n}\n.node-icon :global .anticon {\n  font-size: 14px;\n}\n\n.node-title {\n  flex: 1;\n  overflow: hidden;\n  white-space: nowrap;\n  color: #333;\n  font-size: 13px;\n  display: flex;\n  min-width: 0;\n}\n\n.node-name {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  min-width: 0;\n}\n\n.node-ext {\n  flex-shrink: 0;\n}\n\n.action-btn {\n  opacity: 0;\n  visibility: hidden;\n  transition: all 0.2s ease;\n  margin-left: auto;\n  padding: 0 2px;\n  height: 20px;\n  width: 20px;\n  flex-shrink: 0;\n  color: #999;\n}\n.action-btn:hover {\n  color: #1677ff;\n  background: rgba(22, 119, 255, 0.1);\n}\n\n.empty {\n  padding: 40px 20px;\n  text-align: center;\n  color: #999;\n  font-size: 14px;\n}"]}

package/dist/index.js

@@ -43,7 +43,7 @@ const withLocale = reactIntl.createWithIntlProvider({
   namespace: 'file-system-view'
 });
 
-var style = {"file-system-view":"_qMhn9","tree-node":"_t015K","action-btn":"_mLgqh","node-icon":"_dgomj","node-title":"_r6Ngq","node-name":"_st428","node-ext":"_POSao","empty":"_4zeDm"};
+var style = {"file-system-view":"_qMhn9","tree-node":"_t015K","action-btn":"_mLgqh","selected":"_vI5hy","node-icon":"_dgomj","node-title":"_r6Ngq","node-name":"_st428","node-ext":"_POSao","empty":"_4zeDm"};
 
 const IconContext = /*#__PURE__*/React.createContext({});
 var Context = IconContext;
@@ -1733,6 +1733,7 @@ const TreeNode = ({
   node,
   menuItems,
   expandedKeys,
+  selectedPath,
   onToggle,
   onFileClick,
   rootRef
@@ -1745,6 +1746,7 @@ const TreeNode = ({
     data
   } = node;
   const isExpanded = expandedKeys.includes(key);
+  const isSelected = selectedPath === key;
   const {
     icon: IconComponent,
     color
@@ -1777,7 +1779,7 @@ const TreeNode = ({
     }
   }, [isDirectory, onToggle, onFileClick, key, isExpanded, data]);
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: style['tree-node'],
+    className: `${style['tree-node']}${isSelected ? ` ${style['selected']}` : ''}`,
     onClick: handleNodeClick,
     children: [/*#__PURE__*/jsxRuntime.jsx("span", {
       className: style['node-icon'],
@@ -1821,6 +1823,7 @@ const FileSystemView = withLocale(_ref => {
     menuItems,
     defaultExpandAll,
     expandedKeys: controlledExpandedKeys,
+    selectedPath,
     onExpand,
     onFileClick
   } = _ref;
@@ -1878,9 +1881,10 @@ const FileSystemView = withLocale(_ref => {
     node: node,
     menuItems: menuItems,
     expandedKeys: expandedKeys,
+    selectedPath: selectedPath,
     onToggle: handleToggle,
     onFileClick: onFileClick
-  }), [menuItems, expandedKeys, handleToggle, onFileClick]);
+  }), [menuItems, expandedKeys, selectedPath, handleToggle, onFileClick]);
   if (!data || data.length === 0) {
     return /*#__PURE__*/jsxRuntime.jsx("div", {
       className: style['empty'],