From 5cd88d4b12ec43256cf6324ff4b1ec73cfc89e55 Mon Sep 17 00:00:00 2001 From: "zude.hzd" Date: Wed, 9 Sep 2020 16:21:03 +0800 Subject: [PATCH] fix: source-editor bug & exp-setter bug --- .../src/expression-setter/index.tsx | 127 +++++++++++------- packages/plugin-source-editor/package.json | 2 +- packages/plugin-source-editor/src/index.scss | 6 + packages/plugin-source-editor/src/index.tsx | 29 ++-- .../plugin-source-editor/src/transform.ts | 4 + 5 files changed, 102 insertions(+), 66 deletions(-) diff --git a/packages/editor-setters/src/expression-setter/index.tsx b/packages/editor-setters/src/expression-setter/index.tsx index 2ab0e7a3c..94b9a824e 100644 --- a/packages/editor-setters/src/expression-setter/index.tsx +++ b/packages/editor-setters/src/expression-setter/index.tsx @@ -21,10 +21,11 @@ const helpMap = { 'utils': '应用工具对象', 'dataSourceMap': '容器数据源Map', 'field': '表单Field对象' -} +}; export default class ExpressionView extends PureComponent { static displayName = 'Expression'; + static propTypes = { context: PropTypes.object, dataSource: PropTypes.array, @@ -32,8 +33,9 @@ export default class ExpressionView extends PureComponent { messages: PropTypes.object, onChange: PropTypes.func, placeholder: PropTypes.string, - value: PropTypes.string + value: PropTypes.string, }; + static defaultProps = { context: {}, dataSource: [], @@ -41,12 +43,17 @@ export default class ExpressionView extends PureComponent { messages: zhCN, onChange: () => {}, placeholder: '', - value: '' + value: '', }; + expression: React.RefObject; + i18n: any; + t: void; + $input: any; + listenerFun: ((event: any) => void) | undefined; static getInitValue(val: { value: any; match: (arg0: RegExp) => any; }) { @@ -54,12 +61,13 @@ export default class ExpressionView extends PureComponent { if (typeof val === 'object') { return val.value; } else if (typeof val === 'string') { - let arr = val.match(/^\{\{(.*?)\}\}$/); + const arr = val.match(/^\{\{(.*?)\}\}$/); if (arr) return arr[1]; } } return val; } + constructor(props: Readonly<{}>) { super(props); this.expression = React.createRef(); @@ -67,46 +75,48 @@ export default class ExpressionView extends PureComponent { this.state = { value: ExpressionView.getInitValue(props.value), context: props.context || {}, - dataSource: props.dataSource || [] + dataSource: props.dataSource || [], }; } + static getDerivedStateFromProps(props: { value: any; }, state: { preValue: any; }) { - let curValue = ExpressionView.getInitValue(props.value); + const curValue = ExpressionView.getInitValue(props.value); if (curValue !== state.preValue) { return { preValue: curValue, - value: curValue + value: curValue, }; } return null; } + onChange(value: string, actionType: string) { let realInputValue = value; - let realDataSource = null; + const realDataSource = null; let nextCursorIndex: number; - //更新值 + // 更新值 if (actionType === 'itemClick' || actionType === 'enter') { - let curValue = this.state.value; + const curValue = this.state.value; if (curValue) { realInputValue = curValue + realInputValue; } } - //更新数据源 - let newState = { - value: realInputValue + // 更新数据源 + const newState = { + value: realInputValue, }; if (realDataSource !== null) newState.dataSource = realDataSource; this.setState(newState, () => { nextCursorIndex && this.setInputCursorPosition(nextCursorIndex); }); - //默认加上变量表达式 + // 默认加上变量表达式 this.t && clearTimeout(this.t); this.t = setTimeout(() => { const { onChange } = this.props; // realInputValue = realInputValue ? `{{${realInputValue}}}` : undefined; onChange && onChange({ type: 'JSExpression', - value: realInputValue + value: realInputValue, }); }, 300); } @@ -116,23 +126,33 @@ export default class ExpressionView extends PureComponent { * @param {String} * @return {Array} */ - getDataSource(tempStr: string): Array { - if (/[^\w\.]$/.test(tempStr)) { - return []; - } else if (tempStr === null || tempStr === '') { - return this.getContextKeys([]); - } else if (/\w\.$/.test(tempStr)) { - let currentField = this.getCurrentFiled(tempStr); - if (!currentField) return null; - let tempKeys = this.getObjectKeys(currentField.str); - tempKeys = this.getContextKeys(tempKeys); - if (!tempKeys) return null; - return tempKeys; - } else if (/\.$/.test(tempStr)) { - return []; - } else { - return null; + getDataSource(tempStr: string): any[] { + const {editor} = this.props.field; + const schema = editor.get('designer').project.getSchema(); + const stateMap = schema.componentsTree[0].state; + let dataSource = []; + + for (let key in stateMap){ + dataSource.push(`this.state.${key}`); } + // if (/[^\w\.]$/.test(tempStr)) { + // return []; + // } else if (tempStr === null || tempStr === '') { + // return this.getContextKeys([]); + // } else if (/\w\.$/.test(tempStr)) { + // const currentField = this.getCurrentFiled(tempStr); + // if (!currentField) return null; + // let tempKeys = this.getObjectKeys(currentField.str); + // tempKeys = this.getContextKeys(tempKeys); + // if (!tempKeys) return null; + // return tempKeys; + // } else if (/\.$/.test(tempStr)) { + // return []; + // } else { + // return null; + // } + + return dataSource; } /** @@ -141,12 +161,12 @@ export default class ExpressionView extends PureComponent { * @return {String} 光标前的对象字符串 */ getCurrentFiled(str: string | any[]) { - str += 'x'; //.后面加一个x字符，便于acorn解析 + str += 'x'; // .后面加一个x字符，便于acorn解析 try { - let astTree = acorn.parse(str); - let right = astTree.body[0].expression.right || astTree.body[0].expression; + const astTree = acorn.parse(str); + const right = astTree.body[0].expression.right || astTree.body[0].expression; if (right.type === 'MemberExpression') { - let { start, end } = right; + const { start, end } = right; str = str.slice(start, end); return { str, start, end }; } @@ -161,7 +181,7 @@ export default class ExpressionView extends PureComponent { * @return {Array} */ getContextKeys(keys: []) { - const editor = this.props.field.editor; + const { editor } = this.props.field; console.log(editor); const limitKeys = ['schema', 'utils', 'constants']; if (keys.length === 0) return limitKeys; @@ -176,16 +196,16 @@ export default class ExpressionView extends PureComponent { if (keyValue[item]) { keyValue = keyValue[item]; } - }) + }); if (assert) return []; result = Object.keys(keyValue); return result; // return utilsKeys.concat(constantsKeys).concat(schemaKeys); } - /*过滤key */ + /* 过滤key */ filterKey(obj: any, name: string) { - let filterKeys = [ + const filterKeys = [ 'reloadDataSource', 'REACT_HOT_LOADER_RENDERED_GENERATION', 'refs', @@ -194,10 +214,10 @@ export default class ExpressionView extends PureComponent { 'isReactComponent', 'forceUpdate', 'setState', - 'isPureReactComponent' + 'isPureReactComponent', ]; - let result = []; - for (let key in obj) { + const result = []; + for (const key in obj) { if (key.indexOf('_') !== 0 && filterKeys.indexOf(key) === -1) { result.push(`${name}.${key}`); } @@ -213,8 +233,8 @@ export default class ExpressionView extends PureComponent { */ filterOption(inputValue: string, item: { value: string | any[]; }) { const cursorIndex = this.getInputCursorPosition(); - let preStr = inputValue.substr(0, cursorIndex); - let lastKey: string[] = preStr.split('.').slice(-1); + const preStr = inputValue.substr(0, cursorIndex); + const lastKey: string[] = preStr.split('.').slice(-1); if (!lastKey) return true; if (item.value.indexOf(lastKey) > -1) return true; return false; @@ -228,11 +248,11 @@ export default class ExpressionView extends PureComponent { const { value, dataSource } = this.state; const { placeholder } = this.props; const isValObject = !!(value == '[object Object]'); - let title = isValObject + const title = isValObject ? this.i18n('valueIllegal') : (value || placeholder || this.i18n('jsExpression')).toString(); const cursorIndex = this.getInputCursorPosition(); - let childNode = cursorIndex ? ( + const childNode = cursorIndex ? (
{title.substr(0, cursorIndex)} | @@ -264,7 +284,7 @@ export default class ExpressionView extends PureComponent { innerAfter={{'}}'}} popupClassName="expression-setter-item-inner" itemRender={({ value }) => { - console.log(value); + console.log('111:'+value); return (