From 7dbe38ba0522b346a0fcd9851e797f0fd71ecd5e Mon Sep 17 00:00:00 2001 From: Michael Dürre Date: Thu, 16 Jul 2020 05:55:07 +0200 Subject: switch to rfc8040 restconf MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit change rest interface and some small code cleanups Issue-ID: CCSDK-2572 Signed-off-by: Michael Dürre Change-Id: I3475bd2574b32950c4bf84fbd1c2a9dac9af208a --- .../src/components/material-ui/treeView.tsx | 6 +- .../framework/src/components/objectDump/index.tsx | 173 +++++++++++++++++++++ 2 files changed, 178 insertions(+), 1 deletion(-) create mode 100644 sdnr/wt/odlux/framework/src/components/objectDump/index.tsx (limited to 'sdnr/wt/odlux/framework/src/components') diff --git a/sdnr/wt/odlux/framework/src/components/material-ui/treeView.tsx b/sdnr/wt/odlux/framework/src/components/material-ui/treeView.tsx index 1bb49367c..adf0b8e5a 100644 --- a/sdnr/wt/odlux/framework/src/components/material-ui/treeView.tsx +++ b/sdnr/wt/odlux/framework/src/components/material-ui/treeView.tsx @@ -77,15 +77,18 @@ type TreeViewComponentBaseProps = WithTheme & WithStyles = TreeViewComponentBaseProps & { + initialSearchTerm? : string; onItemClick?: (item: TreeItem) => void; onFolderClick?: (item: TreeItem) => void; } type TreeViewComponentWithExternalSearchProps = TreeViewComponentBaseProps & { items: ExternalTreeItem[]; + initialSearchTerm? : string; searchTerm: string; onSearch: (searchTerm: string) => void; onItemClick?: (item: TreeItem) => void; @@ -94,6 +97,7 @@ type TreeViewComponentWithExternalSearchProps = TreeViewComponentBas type TreeViewComponentWithExternalStateProps = TreeViewComponentBaseProps & TreeViewComponentState & { items: ExternalTreeItem[]; + initialSearchTerm? : string; searchTerm: string; onSearch: (searchTerm: string) => void; onItemClick: (item: TreeItem) => void; @@ -137,7 +141,7 @@ class TreeViewComponent extends React.Component { + if (obj == null) { + return obj === undefined ? "Undefined" : "Null"; + } + return Object.prototype.toString.call(obj).slice(8, -1); +}; + +const isObjectLike = (obj: any) => { + return typeof obj === "object" && obj !== null; +}; + +const isBoolean = (obj: any) => { + return obj === true || obj === false || + (isObjectLike(obj) && getTypeName(obj) === "Boolean"); +}; + +const isNumber = (obj: any) => { + return typeof obj === "number" || + (isObjectLike(obj) && getTypeName(obj) === "Number"); +}; + +const isString = (obj: any) => { + return typeof obj === "string" || + (isObjectLike(obj) && getTypeName(obj) === "String"); +}; + +const isNull = (obj: any) => { + return obj === null; +}; + +const isDate = (obj: any): boolean => { + return isObjectLike(obj) && (obj instanceof Date); +}; + +const useSimpleTableStyles = makeStyles({ + root: { + }, + table: { + fontFamily: "verdana, arial, helvetica, sans-serif", + borderSpacing: "3px", + borderCollapse: "separate", + marginLeft: "30px" + }, + label: { + cursor: "pointer", + }, + th: { + textAlign: "left", + color: "white", + padding: "5px", + backgroundColor: "#cccccc", + }, + td: { + verticalAlign: "top", + padding: "0.5rem 1rem", + borderBottom: "2px solid #DDD" + }, + object: { + }, + objectTh: { + backgroundColor: "#4444cc", + }, + objectTd: { + padding: "0.5rem 1rem", + borderBottom: "2px solid #DDD" + }, +}); + + +type SimpleTableProps = { + classNameTh?: string; + label?: JSX.Element | string | null; + cols?: number; + expand?: boolean; +} + +const SimpleTable: React.FC = (props) => { + const { label = '', cols = 2, expand = true, classNameTh, children } = props; + const [isExpanded, setIsExpanded] = React.useState(expand); + + const classes = useSimpleTableStyles(); + + React.useEffect(() => { + setIsExpanded(expand); + }, [expand]); + + const handleClick = () => { + setIsExpanded(!isExpanded); + }; + + return ( + + {label && ( + + + + ) || null + } + {isExpanded && {children} || null} +
+ {label} +
+ ); +}; + + +type ObjectRendererProps = { + className?: string; + label?: JSX.Element | string | null; + expand?: boolean; + object: { [key: string]: any }; +}; + +const ObjectRenderer: React.FC = (props) => { + const { object, className, label = 'Object', expand = true } = props; + const classes = useSimpleTableStyles(); + + return ( + + { + Object.keys(object).map(key => { + return ( + + {String(key)} + {renderObject(object[key])} + + ); + }) + } + + ); +}; + + +type ArrayRendererProps = { + label?: JSX.Element | string | null; + extraRenderer?: { [label: string]: React.ComponentType<{ label?: JSX.Element | string | null; object: any; }> }; + description?: string; + object: any; +}; + +const ArrayRenderer: React.FC = (props) => { + + return null; +}; + +export const renderObject = (object: any): JSX.Element | string => { + if (isString(object) || isNumber(object) || isBoolean(object)) { + return String(object); + } + return ; +}; -- cgit 1.2.3-korg