From 9c62a490c9f8fee7564dec310031755e7478691e Mon Sep 17 00:00:00 2001 From: "jianfang.rjf" Date: Thu, 7 May 2020 21:25:32 +0800 Subject: [PATCH] feat: add expression-setter AutoComplete tips --- .../setters/src/expression-setter/index.scss | 141 ++------------ .../setters/src/expression-setter/index.tsx | 179 +++++++----------- 2 files changed, 85 insertions(+), 235 deletions(-) diff --git a/packages/setters/src/expression-setter/index.scss b/packages/setters/src/expression-setter/index.scss index 19287099a..0d12a5571 100644 --- a/packages/setters/src/expression-setter/index.scss +++ b/packages/setters/src/expression-setter/index.scss @@ -1,130 +1,17 @@ -// mixin -.lowcode-setter-mixin > * { - vertical-align: middle; -} -.lowcode-setter-mixin { - width: 86%; -} -.lowcode-setter-mixin .next-input { - width: 100%; -} -.lowcode-setter-mixin .next-select-trigger { - width: 100%; -} -// json-setter -// :global { - .nrs-monaco-form { - .next-form-item:last-child { - margin: 0 !important; - } +.expression-setter-item-inner { + .next-menu-item-text { + vertical-align: middle; + display: flex; + justify-content: space-between; } - .monaco-editor-wrap { - .luna-monaco-button .next-icon-first { - height: 26px; - } - .monaco_fullscreen_icon { - position: absolute; - line-height: 1; - z-index: 7; - color: #ddd; - &:hover { - color: #fff; - } - } - .btns-eare { - text-align: left; - line-height: initial; - margin-top: 5px; - // button{ - // margin-right: 10px; - // } - } - &.monaco-nofullscreen { - position: relative !important; - .monaco_fullscreen_icon { - position: absolute; - top: 5px; - right: 5px; - line-height: 1; - z-index: 7; - i:before { - font-size: 16px; - } - } - } - &.monaco-fullscreen { - position: fixed !important; - height: 100% !important; - width: 100% !important; - border: 0; - margin: 0; - top: 0; - bottom: 0; - left: 0; - right: 0; - z-index: 1001; - overflow: hidden; - .monaco_fullscreen_icon { - top: 10px; - right: 10px; - i:before { - font-size: 24px; - } - } - } - } - .luna-monaco-button button { - width: 100%; - } - .luna-monaco-button-dialog { - .next-dialog-body { - padding: 0; - .next-form-item { - height: 100%; - margin-bottom: 0; - .next-form-item-control, - .next-form-item-control > div { - height: 100% !important; - } - .next-form-item-help { - position: absolute; - } - } - } - } -// } -// color-setter -.lowcode-color-box { - margin-right: -5px; - padding: 3px 0 3px 3px; - width: 26px; - height: 26px; - display: inline-block; - div { - width: 20px; - height: 20px; - border: 1px solid #ddd; + .next-menu-item { + padding: 0 10px; } } -.next-balloon-normal.lowcode-color-content { - padding: 0; - background: #ffffff; - border-radius: 0; - border: 1px solid #e5e5e5; - box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1); - &:after { - display: none; - } - .sketch-picker { - border-radius: 0 !important; - border: none !important; - box-shadow: none !important; - .flexbox-fix { - input { - width: 100% !important; - min-width: 30px; - text-align: center; - } - } - } -} \ No newline at end of file +.code-input-value { + float: left; +} +.code-input-help { + float: right; + color: #6897f2; +} diff --git a/packages/setters/src/expression-setter/index.tsx b/packages/setters/src/expression-setter/index.tsx index 7e4ecd14b..2ab0e7a3c 100644 --- a/packages/setters/src/expression-setter/index.tsx +++ b/packages/setters/src/expression-setter/index.tsx @@ -1,24 +1,26 @@ import React, { PureComponent } from 'react'; import PropTypes from 'prop-types'; -import { Select, Balloon } from '@alife/next'; +import { Select, Balloon, Icon } from '@alife/next'; import * as acorn from 'acorn'; import { isJSExpression, generateI18n } from './locale/utils'; import zhCN from './locale/zh-CN'; +import './index.scss'; + const { Option, AutoComplete } = Select; const { Tooltip } = Balloon; const helpMap = { this: '容器上下文对象', - 'this.state': '容器的state', - 'this.props': '容器的props', - 'this.context': '容器的context', - 'this.page': '页面上下文对象', - 'this.component': '组件上下文对象', - 'this.constants': '应用常量对象', - 'this.utils': '应用工具对象', - 'this.dataSourceMap': '容器数据源Map', - 'this.field': '表单Field对象' + 'state': '容器的state', + 'props': '容器的props', + 'context': '容器的context', + 'schema': '页面上下文对象', + 'component': '组件上下文对象', + 'constants': '应用常量对象', + 'utils': '应用工具对象', + 'dataSourceMap': '容器数据源Map', + 'field': '表单Field对象' } export default class ExpressionView extends PureComponent { @@ -45,7 +47,7 @@ export default class ExpressionView extends PureComponent { i18n: any; t: void; $input: any; - listenerFun: (event: any) => void; + listenerFun: ((event: any) => void) | undefined; static getInitValue(val: { value: any; match: (arg0: RegExp) => any; }) { if (isJSExpression(val)) { @@ -81,51 +83,12 @@ export default class ExpressionView extends PureComponent { onChange(value: string, actionType: string) { let realInputValue = value; let realDataSource = null; - const cursorIndex = this.getInputCursorPosition(); let nextCursorIndex: number; //更新值 if (actionType === 'itemClick' || actionType === 'enter') { let curValue = this.state.value; if (curValue) { - //如果是非.结束，则替换当前这个变量； - let preStr = curValue.substr(0, cursorIndex); - let nextStr = curValue.substr(cursorIndex); - let preArr = preStr.split('.'); - let preArrLen = preArr.length; - let tarPreStr = ''; - if (!preArr[preArrLen - 1]) { - //如果是.结束，则增加到.后面 - if (preArr[preArrLen - 2] === 'this') { - preArr = preArr.slice(0, preArrLen - 2); - preArr.push(value); - tarPreStr = preArr.join('.'); - } else { - tarPreStr = preStr + value; - } - } else { - if (preArr[preArrLen - 2] === 'this') { - preArr = preArr.slice(0, preArrLen - 2); - } else { - preArr = preArr.slice(0, preArrLen - 1); - } - preArr.push(value); - tarPreStr = preArr.join('.'); - } - realInputValue = tarPreStr + nextStr; - realDataSource = this.getDataSource(tarPreStr + '.') || []; - nextCursorIndex = tarPreStr.length; - } - } else { - let tarPreStr = value.substr(0, cursorIndex); - if (tarPreStr) { - let lastChar = tarPreStr.charAt(tarPreStr.length - 1); - if (lastChar === '.') { - realDataSource = this.getDataSource(tarPreStr) || []; - } else { - realDataSource = this.getDataSource(tarPreStr + '.'); - } - } else { - realDataSource = this.getDataSource('this.'); + realInputValue = curValue + realInputValue; } } //更新数据源 @@ -154,21 +117,16 @@ export default class ExpressionView extends PureComponent { * @return {Array} */ getDataSource(tempStr: string): Array { - if (tempStr === '' || /[^\w\.]$/.test(tempStr)) { - return this.getDataSource('this.') || []; + 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; - //给默认情况增加this - if (tempStr === 'this.') { - tempKeys = tempKeys.map((item: string) => { - return 'this.' + item; - }); - tempKeys.unshift('this'); - } return tempKeys; } else if (/\.$/.test(tempStr)) { return []; @@ -202,34 +160,31 @@ export default class ExpressionView extends PureComponent { * @param {Array} * @return {Array} */ - getContextKeys(keys: any) { - // let context = {}; - // const { appHelper } = this.context; - // const activeKey = appHelper && appHelper.activeKey; - // if (!activeKey) return; - // const activeCtx = appHelper.schemaHelper.compCtxMap && appHelper.schemaHelper.compCtxMap[activeKey]; - // if (!activeCtx) return null; - // let __self = activeCtx; - // if (keys && keys.length > 1) { - // keys.shift(0); - // let path = '/' + keys.join('/'); - // path = path.replace(/[\[\]]/g, '/'); - // context = jsonuri.get(__self, path); - // if (context && typeof context === 'object') { - // return this.filterKey(context); - // } - // } else if (keys && keys[0] === 'this') { - // return this.filterKey(__self); - // } - // return null; - return [ - "page", - "component" - ] + getContextKeys(keys: []) { + const editor = this.props.field.editor; + console.log(editor); + const limitKeys = ['schema', 'utils', 'constants']; + if (keys.length === 0) return limitKeys; + if (!limitKeys.includes(keys[0])) return []; + let result = []; + let keyValue = editor; + let assert = false; + keys.forEach(item => { + if (!keyValue[item] || typeof keyValue[item] !== 'object') { + assert = true; + } + if (keyValue[item]) { + keyValue = keyValue[item]; + } + }) + if (assert) return []; + result = Object.keys(keyValue); + return result; + // return utilsKeys.concat(constantsKeys).concat(schemaKeys); } /*过滤key */ - filterKey(obj: any) { + filterKey(obj: any, name: string) { let filterKeys = [ 'reloadDataSource', 'REACT_HOT_LOADER_RENDERED_GENERATION', @@ -244,7 +199,7 @@ export default class ExpressionView extends PureComponent { let result = []; for (let key in obj) { if (key.indexOf('_') !== 0 && filterKeys.indexOf(key) === -1) { - result.push(key); + result.push(`${name}.${key}`); } } return result; @@ -259,12 +214,16 @@ 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 = preStr.split('.').slice(-1); + let lastKey: string[] = preStr.split('.').slice(-1); if (!lastKey) return true; if (item.value.indexOf(lastKey) > -1) return true; return false; } + // handleClick = () => { + // this.props.field.editor.emit('variableBindDialog.open'); + // } + render() { const { value, dataSource } = this.state; const { placeholder } = this.props; @@ -293,26 +252,30 @@ export default class ExpressionView extends PureComponent { isValObject ? ( value ) : ( - {'{{'}} - innerAfter={{'}}'}} - itemRender={({ value }) => { - return ( - - ); - }} - onChange={this.onChange.bind(this)} - filter={this.filterOption.bind(this)} - /> +
+ {'{{'}} + innerAfter={{'}}'}} + popupClassName="expression-setter-item-inner" + itemRender={({ value }) => { + console.log(value); + return ( + + ); + }} + onChange={this.onChange.bind(this)} + filter={this.filterOption.bind(this)} + /> +
) } > @@ -363,7 +326,7 @@ export default class ExpressionView extends PureComponent { * 字符串取得对象keys */ getObjectKeys(str: string) { - let keys = []; + let keys: string | any[] = []; if (str) keys = str.split('.'); return keys.slice(0, keys.length - 1); }