mirror/sunmao-ui
2
0
Fork 0
mirror of https://github.com/smartxworks/sunmao-ui.git synced 2024-11-27 08:39:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: fix the datasource update problems

Browse Source
This commit is contained in:
MrWindlike 2022-05-06 15:18:33 +08:00
parent 0da6af815a
commit ea5c930e83
4 changed files with 34 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/editor/src/components/DataSource/ApiForm/ApiForm.tsx
View File

@ -195,7 +195,7 @@ export const ApiForm: React.FC<Props> = props => {
)}
<CloseButton
onClick={() => {
editorStore.setActiveDataSource(null);
editorStore.setActiveDataSourceId(null);
}}
/>
</HStack>

18
packages/editor/src/components/DataSource/Data.tsx
View File

@ -1,4 +1,4 @@
import React, { useState, useMemo } from 'react';
import React, { useState, useMemo, useEffect } from 'react';
import {
Box,
Text,
@ -11,6 +11,7 @@ import {
import { DataSourceItem } from './DataSourceItem';
import { EditorServices } from '../../types';
import { ComponentSchema } from '@sunmao-ui/core';
import { watch } from '@sunmao-ui/runtime';
interface Props {
datas: ComponentSchema[];
@ -33,7 +34,6 @@ const STATE_MAP: Record<string, string> = {
};
export const Data: React.FC<Props> = props => {
const [search, setSearch] = useState('');
const {
datas = [],
active,
@ -46,10 +46,20 @@ export const Data: React.FC<Props> = props => {
} = props;
const { stateManager } = services;
const { store } = stateManager;
const [search, setSearch] = useState('');
const [reactiveStore, setReactiveStore] = useState<Record<string, any>>({...store});
const list = useMemo(
() => datas.filter(({ id }) => id.includes(search)),
[search, datas]
);
useEffect(() => {
const stop = watch(store, newValue => {
setReactiveStore({ ...newValue });
});
return stop;
}, [store]);
const StateItems = () => (
<>
@ -59,9 +69,9 @@ export const Data: React.FC<Props> = props => {
key={state.id}
dataSource={state}
tag={
Array.isArray(store[state.id]?.value)
Array.isArray(reactiveStore[state.id]?.value)
? 'Array'
: STATE_MAP[typeof store[state.id]?.value] ?? 'Any'
: STATE_MAP[typeof reactiveStore[state.id]?.value] ?? 'Any'
}
name={state.id}
active={active === state.id}

34
packages/editor/src/components/DataSource/DataSource.tsx
View File

@ -17,7 +17,7 @@ import { Api } from './Api';
import { Data } from './Data';
import { EditorServices } from '../../types';
import { ToolMenuTabs } from '../../constants/enum';
import { DataSourceType, DATASOURCE_TRAIT_TYPE_MAP } from '../../constants/dataSource';
import { DataSourceType, DATA_DATASOURCES } from '../../constants/dataSource';
interface Props {
active: string;
@ -29,29 +29,11 @@ const DATASOURCE_TYPES = Object.values(DataSourceType);
export const DataSource: React.FC<Props> = props => {
const { active, services } = props;
const { editorStore } = services;
const NORMAL_DATASOURCES = [
{
title: DataSourceType.STATE,
traitType: DATASOURCE_TRAIT_TYPE_MAP[DataSourceType.STATE],
filterPlaceholder: 'filter the states',
emptyPlaceholder: 'No States.',
datas: editorStore.dataSources[DataSourceType.STATE],
},
{
title: DataSourceType.LOCALSTORAGE,
traitType: DATASOURCE_TRAIT_TYPE_MAP[DataSourceType.LOCALSTORAGE],
filterPlaceholder: 'filter the localStorages',
emptyPlaceholder: 'No LocalStorages.',
datas: editorStore.dataSources[DataSourceType.LOCALSTORAGE],
},
{
title: DataSourceType.TRANSFORMER,
traitType: DATASOURCE_TRAIT_TYPE_MAP[DataSourceType.TRANSFORMER],
filterPlaceholder: 'filter the transformers',
emptyPlaceholder: 'No Transformers.',
datas: editorStore.dataSources[DataSourceType.TRANSFORMER],
},
];
const NORMAL_DATASOURCES = DATA_DATASOURCES.map((item)=> ({
...item,
title: item.type,
datas: editorStore.dataSources[item.type],
}));
const onMenuItemClick = (type: DataSourceType) => {
editorStore.createDataSource(
type,
@ -60,11 +42,11 @@ export const DataSource: React.FC<Props> = props => {
editorStore.setSelectedComponentId('');
};
const onApiItemClick = (api: ComponentSchema) => {
editorStore.setActiveDataSource(api);
editorStore.setActiveDataSourceId(api.id);
editorStore.setSelectedComponentId('');
};
const onDataSourceItemClick = (dataSource: ComponentSchema) => {
editorStore.setActiveDataSource(dataSource);
editorStore.setActiveDataSourceId(dataSource.id);
editorStore.setToolMenuTab(ToolMenuTabs.INSPECT);
editorStore.setSelectedComponentId('');
};

18
packages/editor/src/services/EditorStore.ts
View File

@ -43,7 +43,7 @@ export class EditorStore {
schemaValidator: SchemaValidator;
// data source
activeDataSource: ComponentSchema | null = null;
activeDataSourceId: string | null = null;
constructor(
private eventBus: EventBusType,
@ -90,7 +90,7 @@ export class EditorStore {
() => {
if (this.selectedComponentId) {
this.setToolMenuTab(ToolMenuTabs.INSPECT);
this.setActiveDataSource(null);
this.setActiveDataSourceId(null);
}
}
);
@ -169,6 +169,10 @@ export class EditorStore {
return dataSources;
}
get activeDataSource(): ComponentSchema | null {
return this.components.find((component)=> component.id === this.activeDataSourceId) || null;
}
get activeDataSourceType(): DataSourceType | null {
for (const trait of this.activeDataSource?.traits || []) {
const [dataSourceType] =
@ -238,8 +242,8 @@ export class EditorStore {
this.lastSavedComponentsVersion = val;
};
setActiveDataSource = (dataSource: ComponentSchema | null) => {
this.activeDataSource = dataSource;
setActiveDataSourceId = (dataSourceId: string | null) => {
this.activeDataSourceId = dataSourceId;
};
createDataSource = (
@ -277,7 +281,7 @@ export class EditorStore {
const component = this.components.find(({ id: componentId }) => id === componentId);
this.setActiveDataSource(component!);
this.setActiveDataSourceId(component!.id);
if (type === DataSourceType.STATE || type === DataSourceType.LOCALSTORAGE) {
this.setToolMenuTab(ToolMenuTabs.INSPECT);
@ -292,7 +296,7 @@ export class EditorStore {
})
);
if (this.activeDataSource?.id === dataSource.id) {
this.setActiveDataSource(null);
this.setActiveDataSourceId(null);
}
};
@ -307,7 +311,7 @@ export class EditorStore {
const component = this.components.find(({ id: componentId }) => componentId === name);
this.setActiveDataSource(component!);
this.setActiveDataSourceId(component!.id);
};
setExplorerMenuTab = (val: ExplorerMenuTabs) => {