github/lowcode-engine
1
0
Fork 0
mirror of https://github.com/alibaba/lowcode-engine.git synced 2026-01-13 17:48:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

style: eslint

Browse Source
This commit is contained in:
zude.hzd 2020-09-08 17:56:44 +08:00
parent 1862b5564f
commit b0a4dca3bf
5 changed files with 97 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
packages/editor-setters/src/events-setter/index.tsx
View File

@ -1,10 +1,10 @@
import { Component, isValidElement, ReactElement, ReactNode } from 'react';
import { Radio, Menu, Table, Icon, Dialog } from '@alifd/next';
import { Component } from 'react';
import { Radio, Menu, Table, Icon } from '@alifd/next';
import nativeEvents from './native-events';
import './index.scss';
const { SubMenu, Item, Group, Divider } = Menu;
const { Item, Group } = Menu;
const RadioGroup = Radio.Group;
const EVENT_CONTENTS = {
@ -26,14 +26,12 @@ export default class EventsSetter extends Component<{
onChange: (eventList: any[]) => void;
}> {
state = {
showEventList: false,
eventBtns: [],
eventList: [],
selectType: null,
nativeEventList: [],
lifeCycleEventList: [],
eventDataList: (this.props?.value?.eventDataList ? this.props.value.eventDataList : this.props?.value) || [],
relatedEventName: '',
};
// constructor (){
@ -58,7 +56,7 @@ export default class EventsSetter extends Component<{
// return null;
// }
private bindEventName:string;
private bindEventName: string;
componentDidMount() {
console.log(this.state.eventDataList);
@ -87,6 +85,8 @@ export default class EventsSetter extends Component<{
if (item.type === DEFINITION_EVENT_TYPE.EVENTS) {
isCustom = true;
}
return item;
});
if (isRoot) {
@ -145,6 +145,8 @@ export default class EventsSetter extends Component<{
lifeCycleEventList: item.list,
});
}
return item;
});
if (nativeEventList.length == 0) {
@ -167,7 +169,11 @@ export default class EventsSetter extends Component<{
if (item.name === eventDataItem.name) {
item.disabled = true;
}
return eventDataItem;
});
return item;
});
} else if (eventType === DEFINITION_EVENT_TYPE.NATIVE_EVENTS) {
eventDataList.map(eventDataItem => {
@ -178,8 +184,12 @@ export default class EventsSetter extends Component<{
} else {
item.disabled = false;
}
return eventItem;
});
return item;
});
return eventDataItem;
});
}
};
@ -239,12 +249,14 @@ export default class EventsSetter extends Component<{
if (item.name === eventName) {
item.disabled = !unDisabled;
}
return item;
});
lifeCycleEventList.map(item => {
if (item.name === eventName) {
item.disabled = !unDisabled;
}
return item;
});
nativeEventList.map(item => {
@ -252,7 +264,10 @@ export default class EventsSetter extends Component<{
if (itemData.name === eventName) {
itemData.disabled = !unDisabled;
}
return itemData;
});
return item;
});
};
@ -279,7 +294,7 @@ export default class EventsSetter extends Component<{
this.openDialog(eventName);
};
onRelatedEventNameClick = (eventName:string) => {
onRelatedEventNameClick = (eventName: string) => {
const { editor } = this.props.field;
editor.get('skeleton').getPanel('sourceEditor').show();
@ -319,6 +334,8 @@ export default class EventsSetter extends Component<{
if (item.name === eventName) {
eventDataList.splice(index, 1);
}
return item;
});
this.setState({
@ -336,13 +353,14 @@ export default class EventsSetter extends Component<{
if (item.name == bindEventName) {
paramStr = item.paramStr;
}
return item;
});
this.bindEventName = bindEventName;
editor.emit('eventBindDialog.openDialog', bindEventName, SETTER_NAME, paramStr);
};
bindEvent = (relatedEventName: string, paramStr:string) => {
bindEvent = (relatedEventName: string, paramStr: string) => {
const { eventDataList, eventList } = this.state;
eventDataList.map(item => {
if (item.name === this.bindEventName) {
@ -351,6 +369,8 @@ export default class EventsSetter extends Component<{
item.paramStr = paramStr;
}
}
return item;
});
this.setState({
@ -372,7 +392,6 @@ export default class EventsSetter extends Component<{
selectType,
eventDataList,
} = this.state;
const { editor } = this.props.field;
const showEventList =
lifeCycleEventList.length > 0 ? lifeCycleEventList : eventList;
return (
@ -380,7 +399,7 @@ export default class EventsSetter extends Component<{
<div className="event-title">
{
eventBtns.length > 1 ? <span>点击选择事件类型</span> : <span>点击绑定事件</span>
eventBtns.length > 1 ? <span>点击选择事件类型</span> : <span>点击绑定事件</span>
}
</div>
@ -398,7 +417,7 @@ export default class EventsSetter extends Component<{
className="event-menu"
onItemClick={this.onEventMenuClick}
>
{showEventList.map((item, index) => (
{showEventList.map((item) => (
<Item
key={item.name}
helper={item.description}
@ -418,9 +437,9 @@ export default class EventsSetter extends Component<{
>
{nativeEventList.map((item, index) => (
<Group label={item.name} key={index}>
{item.eventList.map(item => (
<Item key={item.name} disabled={item.disabled}>
{item.name}
{item.eventList.map(groupItem => (
<Item key={groupItem.name} disabled={groupItem.disabled}>
{groupItem.name}
</Item>
))}
</Group>

68
packages/editor-setters/src/function-setter/index.tsx
View File

@ -2,9 +2,8 @@ import React, { PureComponent } from 'react';
// import PropTypes from 'prop-types';
import { Button, Icon, Dialog } from '@alifd/next';
import MonacoEditor from 'react-monaco-editor';
import { js_beautify, css_beautify } from 'js-beautify';
import { js_beautify } from 'js-beautify';
import './index.scss';
import { timingSafeEqual } from 'crypto';
const SETTER_NAME = 'function-setter';
@ -40,25 +39,23 @@ interface FunctionSetterProps {
defaultValue: string;
placeholder: string;
hasClear: boolean;
onChange: (icon: string | object) => undefined;
onChange: (icon: string) => undefined;
icons: string[];
}
export default class FunctionSetter extends PureComponent<FunctionSetterProps, {}> {
export default class FunctionSetter extends PureComponent<FunctionSetterProps> {
static defaultProps = {
value: undefined,
type: 'string',
defaultValue: '',
hasClear: true,
placeholder: '请点击选择 Icon',
onChange: (icon: string | object) => undefined,
onChange: () => undefined,
};
private emitEventName = '';
state = {
firstLoad: true,
isShowDialog: false,
functionCode: null,
};
componentDidMount() {
@ -79,7 +76,7 @@ export default class FunctionSetter extends PureComponent<FunctionSetterProps, {
bindFunction = () => {
const { field, value } = this.props;
const { field } = this.props;
field.editor.emit('eventBindDialog.openDialog', field.name, this.emitEventName);
};
@ -99,7 +96,7 @@ export default class FunctionSetter extends PureComponent<FunctionSetterProps, {
};
removeFunctionBind = () => {
const { field, removeProp } = this.props;
const { removeProp } = this.props;
removeProp();
};
@ -157,12 +154,14 @@ export default class FunctionSetter extends PureComponent<FunctionSetterProps, {
// 解析函数名
const functionName = this.parseFunctionName(value.value);
return (<div className="function-container">
<img className="funtion-icon" src="https://gw.alicdn.com/tfs/TB1NXNhk639YK4jSZPcXXXrUFXa-200-200.png" />
<span className="function-name" onClick={() => this.focusFunctionName(functionName)}>{functionName}</span>
<Icon type="set" size="medium" className="funtion-operate-icon" onClick={this.bindFunction} />
<Icon type="ashbin" size="medium" className="funtion-operate-icon" onClick={this.removeFunctionBind} />
</div>);
return (
<div className="function-container">
<img className="funtion-icon" src="https://gw.alicdn.com/tfs/TB1NXNhk639YK4jSZPcXXXrUFXa-200-200.png" />
<span className="function-name" onClick={() => this.focusFunctionName(functionName)}>{functionName}</span>
<Icon type="set" size="medium" className="funtion-operate-icon" onClick={this.bindFunction} />
<Icon type="ashbin" size="medium" className="funtion-operate-icon" onClick={this.removeFunctionBind} />
</div>
);
};
@ -170,9 +169,11 @@ export default class FunctionSetter extends PureComponent<FunctionSetterProps, {
* 渲染编辑函数按钮(可直接编辑函数内容)
*/
renderEditFunctionButton = () => {
return (<div>
<Button type="primary" onClick={this.openDialog}><Icon type="edit" />编辑函数</Button>
</div>);
return (
<div>
<Button type="primary" onClick={this.openDialog}><Icon type="edit" />编辑函数</Button>
</div>
);
};
@ -192,13 +193,27 @@ export default class FunctionSetter extends PureComponent<FunctionSetterProps, {
if (value && value.value) {
functionName = this.parseFunctionName(value.value);
}
return (<div className="lc-function-setter">
{
value ? (functionName ? this.renderBindFunction() : this.renderEditFunctionButton()) : this.renderButton()
let renderFunction;
if (value) {
if (functionName) {
renderFunction = this.renderBindFunction;
} else {
renderFunction = this.renderEditFunctionButton;
}
} else {
renderFunction = this.renderButton;
}
return (
<div className="lc-function-setter">
{
renderFunction()
}
{
value && value.value && <Dialog visible={isShowDialog} closeable={'close'} title="函数编辑" onCancel={this.closeDialog} onOk={this.onDialogOk} onClose={() => { this.closeDialog(); }}>
{
value && value.value &&
<Dialog visible={isShowDialog} closeable={'close'} title="函数编辑" onCancel={this.closeDialog} onOk={this.onDialogOk} onClose={() => { this.closeDialog(); }}>
<div style={{ width: '500px', height: '400px' }}>
<MonacoEditor
value={js_beautify(value.value)}
@ -207,10 +222,9 @@ export default class FunctionSetter extends PureComponent<FunctionSetterProps, {
onChange={(newCode) => this.updateCode(newCode)}
/>
</div>
</Dialog>
</Dialog>
}
</div>);
</div>
);
}
}

8
packages/editor-setters/src/icon-setter/index.tsx
View File

@ -68,10 +68,10 @@ interface IconSetterProps {
defaultValue: string;
placeholder: string;
hasClear: boolean;
onChange: (icon: string | object) => undefined;
onChange: (icon: string) => undefined;
icons: string[];
}
export default class IconSetter extends PureComponent<IconSetterProps, {}> {
export default class IconSetter extends PureComponent<IconSetterProps> {
static defaultProps = {
value: undefined,
type: 'string',
@ -79,7 +79,7 @@ export default class IconSetter extends PureComponent<IconSetterProps, {}> {
hasClear: true,
icons,
placeholder: '请点击选择 Icon',
onChange: (icon: string | object) => undefined,
onChange: () => undefined,
};
state = {
@ -109,7 +109,7 @@ export default class IconSetter extends PureComponent<IconSetterProps, {}> {
};
render() {
const { icons, value, defaultValue, onChange, placeholder, hasClear, type } = this.props;
const { value, defaultValue, onChange, placeholder, hasClear } = this.props;
const { firstLoad } = this.state;
const _value = typeof value === 'object' ? value?.props?.type : value;
if (firstLoad && defaultValue && typeof value === 'undefined') {

7
packages/editor-setters/src/index.tsx
View File

@ -55,9 +55,10 @@ export const DateRangeSetter = DatePicker.RangePicker;
export { ExpressionSetter, EventsSetter, JsonSetter, IconSetter };
// eslint-disable-next-line rule
class StringDateSetter extends Component {
render() {
const { onChange, editor } = this.props;
const { onChange } = this.props;
return (
<DatePicker
onChange={(val) => {
@ -67,9 +68,11 @@ class StringDateSetter extends Component {
);
}
}
// eslint-disable-next-line rule
class StringTimePicker extends Component {
render() {
const { onChange, editor } = this.props;
const { onChange } = this.props;
return (
<TimePicker
onChange={(val) => {

19
packages/editor-setters/src/json-setter/index.tsx
View File

@ -30,6 +30,7 @@ class MonacoEditorView extends PureComponent {
localeConfig('MonacoEditor', MonacoEditorView);
// monaco编辑器存在3种主题：vs、vs-dark、hc-black
// eslint-disable-next-line rule
class MonacoEditorDefaultView extends PureComponent {
static displayName = 'MonacoEditorDefault';
@ -92,7 +93,7 @@ class MonacoEditorDefaultView extends PureComponent {
editorParentNode: any;
constructor(props: Readonly<{}>) {
constructor(props: Readonly) {
super(props);
this.strValue = '';
this.i18n = generateI18n(props.locale, props.messages);
@ -288,8 +289,12 @@ class MonacoEditorDefaultView extends PureComponent {
} else if (value && typeof value === 'string') {
try {
const ret = this.toJson(value);
if (!ret.error) tarValue = JSON.stringify(ret.value, null, 2);
} catch (err) {}
if (!ret.error) {
tarValue = JSON.stringify(ret.value, null, 2);
}
} catch (err) {
// empty
}
}
} else if (language === 'function') {
if (typeof value === 'function') {
@ -305,13 +310,17 @@ class MonacoEditorDefaultView extends PureComponent {
try {
tarValue = serialize(value, { unsafe: true });
tarValue = js_beautify(tarValue, { indent_size: 2, indent_empty_lines: true });
} catch (err) {}
} catch (err) {
// empty
}
} else if (typeof value === 'string') {
try {
const ret = this.resultHandler(value, 'object');
tarValue = ret.error ? ret.value : serialize(ret.value, { unsafe: true });
tarValue = js_beautify(tarValue, { indent_size: 2, indent_empty_lines: true });
} catch (err) {}
} catch (err) {
// empty
}
}
}
return tarValue;