macro app object refactor

This commit is contained in:
Jan Prochazka 2020-12-03 11:44:18 +01:00
parent 9bf755ff25
commit 2afd46dc91
3 changed files with 32 additions and 13 deletions

View File

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

View File

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

View File

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