macro app object refactor

packages/web/src/appobj/AppObjectList.js

@@ -29,7 +29,15 @@ const GroupDiv = styled.div`
   font-weight: bold;
 `;
 
-function AppObjectListItem({ AppObjectComponent, data, filter, onObjectClick, isExpandable, SubItems }) {
+function AppObjectListItem({
+  AppObjectComponent,
+  data,
+  filter,
+  onObjectClick,
+  isExpandable,
+  SubItems,
+  getCommonProps,
+}) {
   const [isExpanded, setIsExpanded] = React.useState(false);
 
   const expandable = data && isExpandable && isExpandable(data);
@@ -44,7 +52,7 @@ function AppObjectListItem({ AppObjectComponent, data, filter, onObjectClick, is
   // const { matcher } = appobj;
   // if (matcher && !matcher(filter)) return null;
 
-  const commonProps = {
+  let commonProps = {
     prefix: SubItems ? (
       <ExpandIconHolder2>
         {expandable ? <ExpandIcon isExpanded={isExpanded} /> : <ExpandIcon isBlank />}
@@ -59,6 +67,10 @@ function AppObjectListItem({ AppObjectComponent, data, filter, onObjectClick, is
     commonProps.onClick3 = onObjectClick;
   }
 
+  if (getCommonProps) {
+    commonProps = { ...commonProps, ...getCommonProps(data) };
+  }
+
   let res = <AppObjectComponent data={data} commonProps={commonProps} />;
   if (SubItems && isExpanded) {
     res = (
@@ -98,6 +110,7 @@ export function AppObjectList({
   groupFunc = undefined,
   groupOrdered = undefined,
   isExpandable = undefined,
+  getCommonProps = undefined,
 }) {
   const createComponent = (data) => (
     <AppObjectListItem
@@ -108,6 +121,7 @@ export function AppObjectList({
       onObjectClick={onObjectClick}
       SubItems={SubItems}
       isExpandable={isExpandable}
+      getCommonProps={getCommonProps}
     />
   );
 

packages/web/src/appobj/MacroAppObject.js

@@ -1,13 +1,15 @@
 import _ from 'lodash';
+import React from 'react';
 import { filterName } from 'dbgate-datalib';
+import { AppObjectCore } from './AppObjectCore';
 
-const macroAppObject = () => ({ name, type, title, group }, { setOpenedTabs }) => {
-  const key = name;
-  const icon = 'img macro';
-  const matcher = (filter) => filterName(filter, name, title);
-  const groupTitle = group;
+function MacroAppObject({ data, commonProps }) {
+  const { name, type, title, group } = data;
 
-  return { title, key, icon, groupTitle, matcher };
-};
+  return <AppObjectCore {...commonProps} data={data} title={title} icon={'img macro'} />;
+}
 
-export default macroAppObject;
+MacroAppObject.extractKey = (data) => data.name;
+MacroAppObject.createMatcher = ({ name, title }) => (filter) => filterName(filter, name, title);
+
+export default MacroAppObject;

packages/web/src/freetable/MacroManager.js

@@ -6,7 +6,7 @@ import SearchInput from '../widgets/SearchInput';
 import { WidgetTitle } from '../widgets/WidgetStyles';
 import macros from './macros';
 import { AppObjectList } from '../appobj/AppObjectList';
-import macroAppObject from '../appobj/MacroAppObject';
+import MacroAppObject from '../appobj/MacroAppObject';
 
 const SearchBoxWrapper = styled.div`
   display: flex;
@@ -24,10 +24,13 @@ export default function MacroManager({ managerSize, selectedMacro, setSelectedMa
         </SearchBoxWrapper>
         <AppObjectList
           list={_.sortBy(macros, 'title')}
-          AppObjectComponent={macroAppObject()}
+          AppObjectComponent={MacroAppObject}
           onObjectClick={(macro) => setSelectedMacro(macro)}
+          getCommonProps={(data) => ({
+            isBold: selectedMacro && selectedMacro.name == data.name,
+          })}
           filter={filter}
-          groupFunc={(appobj) => appobj.groupTitle}
+          groupFunc={(data) => data.group}
         />
         {/* {macros.map((macro) => (
           <MacroListItem key={`${macro.group}/${macro.name}`} macro={macro} />