From 896bf6dda7fb3eb73d7ad0010476775be1a27a3e Mon Sep 17 00:00:00 2001 From: mikbry Date: Wed, 21 Nov 2018 18:30:10 +0100 Subject: [PATCH 1/4] TreeView component from ListComponent --- src/demos/components/treeviews.jsx | 41 +++++++++++++++++ src/demos/main.jsx | 2 + src/libs/components/treeView.jsx | 71 ++++++++++++++++++++++++++++++ src/libs/index.js | 2 + 4 files changed, 116 insertions(+) create mode 100644 src/demos/components/treeviews.jsx create mode 100644 src/libs/components/treeView.jsx diff --git a/src/demos/components/treeviews.jsx b/src/demos/components/treeviews.jsx new file mode 100644 index 0000000..1604512 --- /dev/null +++ b/src/demos/components/treeviews.jsx @@ -0,0 +1,41 @@ +/** + * Copyright (c) 2015-present, CWB SAS + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +import React from "react"; +import TreeView from "../../libs/components/treeView"; + +const TreeViews = () => ( +
+

TreeView examples

+
+ {}} + /> +
+
+); +export default TreeViews; diff --git a/src/demos/main.jsx b/src/demos/main.jsx index 8779014..85690d2 100644 --- a/src/demos/main.jsx +++ b/src/demos/main.jsx @@ -13,6 +13,7 @@ import SubToolbars from "./components/subToolbars"; import Lists from "./components/lists"; import FileInputs from "./components/fileInputs"; import Tooltips from "./components/tooltips"; +import TreeViews from "./components/treeviews"; const Main = ({ children }) => (
@@ -20,6 +21,7 @@ const Main = ({ children }) => ( + diff --git a/src/libs/components/treeView.jsx b/src/libs/components/treeView.jsx new file mode 100644 index 0000000..1c33fba --- /dev/null +++ b/src/libs/components/treeView.jsx @@ -0,0 +1,71 @@ +/** + * Copyright (c) 2015-present, CWB SAS + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +import React from "react"; +import PropTypes from "prop-types"; +import { List, ListItem } from "zrmc"; + +const TreeView = ({ items, selectedItem, onSelect, className, style }) => ( + + {items.map((item, index) => { + const content = item.name; + let imgSrc; + let icon; + if (item.icon) { + let { color } = item; + if (!color) { + color = "gray"; + } + if (item.icon.endsWith(".svg")) { + imgSrc = item.icon; + } else if (item.icon.endsWith(".png")) { + imgSrc = item.icon; + } else { + ({ icon } = item); + } + } + let cn = "selectableListItem"; + if (selectedItem === index) { + cn = "selectedListItem"; + } + return ( + { + e.preventDefault(); + onSelect(index); + }} + className={cn} + > + {content} + + ); + })} + +); + +TreeView.defaultProps = { + className: null, + style: null, +}; + +TreeView.propTypes = { + items: PropTypes.arrayOf( + PropTypes.shape({ + id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + name: PropTypes.string, + icon: PropTypes.string, + }), + ).isRequired, + selectedItem: PropTypes.number.isRequired, + onSelect: PropTypes.func.isRequired, + className: PropTypes.string, + style: PropTypes.objectOf(PropTypes.string), +}; + +export default TreeView; diff --git a/src/libs/index.js b/src/libs/index.js index ce4aa95..5bcd58f 100644 --- a/src/libs/index.js +++ b/src/libs/index.js @@ -17,6 +17,7 @@ import TableComponent from "./components/tableComponent"; import Tooltip from "./components/tooltip"; import FileInput from "./components/fileInput"; import DrawerFooter from "./components/drawerFooter"; +import TreeView from "./components/treeView"; export { Stepper, @@ -32,4 +33,5 @@ export { Tooltip, FileInput, DrawerFooter, + TreeView, }; From 161133fd2a1611d48ec89ab9c18ff4fd74026285 Mon Sep 17 00:00:00 2001 From: mikbry Date: Fri, 23 Nov 2018 17:47:48 +0100 Subject: [PATCH 2/4] Refactor TreeView and listDragItem MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Don’t recreate code for listDragItem use ListItem as is. But some problems with react-dnd - Use same structure for TreeView’s Item - Add some data to test --- src/demos/components/treeviews.jsx | 22 ++++- src/libs/components/list/listDragItem.jsx | 93 ++++++------------- .../{treeView.jsx => treeView/index.jsx} | 8 +- src/libs/components/treeView/item.jsx | 73 +++++++++++++++ 4 files changed, 124 insertions(+), 72 deletions(-) rename src/libs/components/{treeView.jsx => treeView/index.jsx} (92%) create mode 100644 src/libs/components/treeView/item.jsx diff --git a/src/demos/components/treeviews.jsx b/src/demos/components/treeviews.jsx index 1604512..7e844eb 100644 --- a/src/demos/components/treeviews.jsx +++ b/src/demos/components/treeviews.jsx @@ -16,20 +16,36 @@ const TreeViews = () => ( { id: "i1", name: "Item 1", - icon: "add", + icon: "folder", color: "gray", + children: [ + { + id: "i2a", + name: "SubItem 1", + icon: "insert_drive_file", + color: "gray", + }, + { + id: "i2b", + name: "SubItem 2", + icon: "folder", + color: "gray", + children: [], + }, + ], }, { id: "i2", name: "Item 2", - icon: "add", + icon: "insert_drive_file", color: "gray", }, { id: "i3", name: "Item 3", - icon: "add", + icon: "folder", color: "gray", + children: [], }, ]} selectedItem={-1} diff --git a/src/libs/components/list/listDragItem.jsx b/src/libs/components/list/listDragItem.jsx index 6f48dd3..5b4041b 100644 --- a/src/libs/components/list/listDragItem.jsx +++ b/src/libs/components/list/listDragItem.jsx @@ -4,10 +4,11 @@ * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ -import React, { Component, Children } from "react"; +import React, { Component } from "react"; +import { findDOMNode } from "react-dom"; import PropTypes from "prop-types"; import { DragSource, DropTarget } from "react-dnd"; -import Zrmc, { Icon } from "zrmc"; +import { ListItem } from "zrmc"; const MDC_LISTITEM = "mdc-list-item"; @@ -107,70 +108,30 @@ export default class ListDragItem extends Component { delete otherProps.onDrop; delete otherProps.isDragging; - let classes = MDC_LISTITEM; - let graphic; - if (activated) { - classes += " mdc-list-item--activated"; - } - if (icon) { - graphic = ( -