mirror of
https://github.com/dbgate/dbgate
synced 2024-11-08 04:35:58 +00:00
macro app object refactor
This commit is contained in:
parent
9bf755ff25
commit
2afd46dc91
@ -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}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
@ -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;
|
||||||
|
@ -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} />
|
||||||
|
Loading…
Reference in New Issue
Block a user