mirror/sunmao-ui
2
0
Fork 0
mirror of https://github.com/smartxworks/sunmao-ui.git synced 2025-02-17 17:40:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'main' into feat/drag-to-reorder

Browse Source 
* main:
  improve json schema fields UX
  impl style trait form

# Conflicts:
#	packages/editor/src/components/ComponentForm/ComponentForm.tsx
This commit is contained in:
Bowen Tan 2021-12-14 10:49:42 +08:00
commit dae1197ce2
10 changed files with 181 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
packages/editor/src/components/CodeEditor/CssEditor.tsx Normal file
View File

@ -0,0 +1,63 @@
import React, { useEffect, useRef } from 'react';
import CodeMirror from 'codemirror';
import { Box } from '@chakra-ui/react';
import { css } from '@emotion/react';
import 'codemirror/mode/css/css';
import 'codemirror/addon/fold/brace-fold';
import 'codemirror/addon/fold/foldgutter';
import 'codemirror/addon/fold/foldgutter.css';
import 'codemirror/lib/codemirror.css';
import 'codemirror/theme/ayu-mirage.css';
export const CssEditor: React.FC<{
defaultCode: string;
onChange?: (v: string) => void;
onBlur?: (v: string) => void;
}> = ({ defaultCode, onChange, onBlur }) => {
const style = css`
.CodeMirror {
width: 100%;
height: 120px;
}
`;
const wrapperEl = useRef<HTMLDivElement>(null);
const cm = useRef<CodeMirror.Editor | null>(null);
useEffect(() => {
if (!wrapperEl.current) {
return;
}
if (!cm.current) {
cm.current = CodeMirror(wrapperEl.current, {
value: defaultCode,
mode: {
name: 'css',
},
foldGutter: true,
lineWrapping: true,
lineNumbers: false,
gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
foldOptions: {
widget: () => {
return '\u002E\u002E\u002E';
},
},
theme: 'ayu-mirage',
});
}
const changeHandler = (instance: CodeMirror.Editor) => {
onChange?.(instance.getValue());
};
const blurHandler = (instance: CodeMirror.Editor) => {
onBlur?.(instance.getValue());
};
cm.current.on('change', changeHandler);
cm.current.on('blur', blurHandler);
return () => {
cm.current?.off('change', changeHandler);
cm.current?.off('blur', blurHandler);
};
}, [defaultCode]);
return <Box css={style} ref={wrapperEl}></Box>;
};

1
packages/editor/src/components/CodeEditor/index.ts
View File

@ -1,2 +1,3 @@
export * from './StateEditor';
export * from './SchemaEditor';
export * from './CssEditor';

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

@ -14,6 +14,7 @@ import { genOperation } from '../../operations';
import { editorStore } from '../../EditorStore';
import { observer } from 'mobx-react-lite';
import ErrorBoundary from '../ErrorBoundary';
import { StyleTraitForm } from './StyleTraitForm';
type Props = {
registry: Registry;
@ -141,37 +142,12 @@ export const ComponentForm: React.FC<Props> = observer(props => {
);
}}
/>
<VStack width="full" alignItems="start">
<strong>Properties</strong>
<VStack
width="full"
padding="4"
background="white"
border="1px solid"
borderColor="gray.200"
borderRadius="4"
>
<SchemaField
schema={cImpl.spec.properties}
label=""
formData={properties}
onChange={newFormData => {
eventBus.send(
'operation',
genOperation('modifyComponentProperty', {
componentId: selectedComponentId,
properties: newFormData,
})
);
}}
/>
</VStack>
</VStack>
<EventTraitForm component={selectedComponent} registry={registry} />
<FetchTraitForm component={selectedComponent} registry={registry} />
<GeneralTraitFormList component={selectedComponent} registry={registry} />
</VStack>
</VStack>
<EventTraitForm component={selectedComponent} registry={registry} />
<FetchTraitForm component={selectedComponent} registry={registry} />
<StyleTraitForm component={selectedComponent} registry={registry} />
<GeneralTraitFormList component={selectedComponent} registry={registry} />
</VStack>
</ErrorBoundary>
);

3
packages/editor/src/components/ComponentForm/GeneralTraitFormList/AddTraitButton.tsx
View File

@ -2,6 +2,7 @@ import { AddIcon, ChevronDownIcon } from '@chakra-ui/icons';
import { IconButton, Menu, MenuButton, MenuItem, MenuList } from '@chakra-ui/react';
import { Registry } from '@sunmao-ui/runtime/lib/services/registry';
import { useMemo } from 'react';
import { ignoreTraitsList } from '../../../constants';
type Props = {
registry: Registry;
@ -12,7 +13,7 @@ export const AddTraitButton: React.FC<Props> = props => {
const { onAddTrait, registry } = props;
const traitTypes = useMemo(() => {
return registry.getAllTraitTypes();
return registry.getAllTraitTypes().filter(type => !ignoreTraitsList.includes(type));
}, []);
const menuItems = traitTypes.map(type => {

33
packages/editor/src/components/ComponentForm/JsonSchemaForm/MultiSchemaField.tsx
View File

@ -1,5 +1,5 @@
import React, { useState } from 'react';
import { Select, Box } from '@chakra-ui/react';
import { Box, RadioGroup, Radio, Stack } from '@chakra-ui/react';
import SchemaField from './SchemaField';
import { FieldProps } from './fields';
@ -18,23 +18,20 @@ const _Field: React.FC<
return (
<Box>
<Select
mb={1}
value={schemaIdx}
onChange={evt => setSchemaIdx(parseInt(evt.currentTarget.value))}
>
{schemas.map((s, idx) => {
if (typeof s === 'boolean') {
return null;
}
const text = s.title ? s.title : `schema${idx + 1}(${s.type})`;
return (
<option key={idx} value={idx}>
{text}
</option>
);
})}
</Select>
<RadioGroup mb={1} value={schemaIdx} onChange={v => setSchemaIdx(parseInt(v))}>
<Stack direction="row">
{schemas.map((s, idx) => {
if (typeof s === 'boolean') {
return null;
}
return (
<Radio key={idx} value={idx} borderColor="gray.200">
{s.type}
</Radio>
);
})}
</Stack>
</RadioGroup>
<SchemaField
schema={subSchema}
label={subSchema.title || ''}

27
packages/editor/src/components/ComponentForm/JsonSchemaForm/StringField.tsx
View File

@ -1,13 +1,32 @@
import React from 'react';
import React, { useState } from 'react';
import { FieldProps } from './fields';
import { Input } from '@chakra-ui/react';
import { Input, Select } from '@chakra-ui/react';
type Props = FieldProps;
const StringField: React.FC<Props> = props => {
const { formData, onChange } = props;
const { schema, formData, onChange } = props;
const [value, setValue] = useState(formData);
return <Input value={formData} onChange={evt => onChange(evt.currentTarget.value)} />;
// enum
if (Array.isArray(schema.enum)) {
return (
<Select value={formData} onChange={evt => onChange(evt.currentTarget.value)}>
{schema.enum.map((item, idx) => {
const value = item?.toString() || '';
return <option key={idx}>{value}</option>;
})}
</Select>
);
}
return (
<Input
value={value}
onChange={evt => setValue(evt.currentTarget.value)}
onBlur={evt => onChange(evt.currentTarget.value)}
/>
);
};
export default StringField;

2
packages/editor/src/components/ComponentForm/JsonSchemaForm/fields.tsx
View File

@ -12,7 +12,7 @@ export function getDisplayLabel(schema: Schema, label: string): boolean {
if (!label) {
return false;
}
if (schema.type === 'object') {
if (schema.type === 'object' && !schema.title) {
return false;
}
return true;

64
packages/editor/src/components/ComponentForm/StyleTraitForm/StyleTraitForm.tsx Normal file
View File

@ -0,0 +1,64 @@
import { useMemo } from 'react';
import { FormControl, FormLabel, VStack, Box } from '@chakra-ui/react';
import { ApplicationComponent } from '@sunmao-ui/core';
import { Registry } from '@sunmao-ui/runtime';
import { CssEditor } from '../../../components/CodeEditor';
import { eventBus } from '../../../eventBus';
import { genOperation } from '../../../operations';
type Props = {
registry: Registry;
component: ApplicationComponent;
};
export const StyleTraitForm: React.FC<Props> = props => {
const { component, registry } = props;
const styleSlots = useMemo(() => {
return registry.getComponentByType(component.type).spec.styleSlots;
}, [component, registry]);
const styles = useMemo(() => {
return component.traits.filter(t => t.type === 'core/v1/style');
}, [component]);
if (!styleSlots.length) {
return null;
}
console.log('styleSlots', styleSlots)
console.log('styles', styles)
return (
<VStack width="full">
<Box fontWeight="bold" textAlign="left" width="100%">
Styles
</Box>
{styleSlots.map(styleSlot => {
const styleTrait = styles.find(s => s.properties.styleSlot === styleSlot);
console.log('styleTrait', styleTrait)
if (!styleTrait) {
return null;
}
return (
<FormControl id={styleSlot} key={styleSlot}>
<FormLabel>{styleSlot}</FormLabel>
<CssEditor
defaultCode={styleTrait.properties.style as string}
onBlur={v =>
eventBus.send(
'operation',
genOperation('modifyTraitProperty', {
componentId: component.id,
traitIndex: component.traits.indexOf(styleTrait),
properties: {
styleSlot,
style: v,
},
})
)
}
/>
</FormControl>
);
})}
</VStack>
);
};

1
packages/editor/src/components/ComponentForm/StyleTraitForm/index.ts Normal file
View File

@ -0,0 +1 @@
export * from './StyleTraitForm';

7
packages/editor/src/constants.ts
View File

@ -1,7 +1,12 @@
import { Application } from '@sunmao-ui/core';
import { ImplementedRuntimeModule } from '@sunmao-ui/runtime';
export const ignoreTraitsList = ['core/v1/slot', 'core/v1/event', 'core/v1/fetch'];
export const ignoreTraitsList = [
'core/v1/slot',
'core/v1/event',
'core/v1/fetch',
'core/v1/style',
];
export const EmptyAppSchema: Application = {
kind: 'Application',