amis 1.9.1-beta.25 → 1.9.1-beta.28

package/src/components/Select.tsx

@@ -296,6 +296,7 @@ const DownshiftChangeTypes = Downshift.stateChangeTypes;
 interface SelectProps extends OptionProps, ThemeProps, LocaleProps {
   className?: string;
   popoverClassName?: string;
+  showInvalidMatch?: boolean;
   creatable: boolean;
   createBtnLabel: string;
   multiple: boolean;
@@ -381,6 +382,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
     multiple: false,
     clearable: true,
     creatable: false,
+    showInvalidMatch: false,
     createBtnLabel: 'Select.createLabel',
     searchPromptText: 'Select.searchPromptText',
     loadingPlaceholder: 'loading',
@@ -742,6 +744,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
       disabled,
       maxTagCount,
       overflowTagPopover,
+      showInvalidMatch,
       translate: __
     } = this.props;
     const selection = this.state.selection;
@@ -794,7 +797,9 @@ export class Select extends React.Component<SelectProps, SelectState> {
                             key={itemIndex}
                             className={cx('Select-value', {
                               'is-disabled': disabled,
-                              'is-invalid': item.__unmatched
+                              'is-invalid': showInvalidMatch
+                                ? item.__unmatched
+                                : false
                             })}
                           >
                             <span className={cx('Select-valueLabel')}>
@@ -818,7 +823,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
               <div
                 className={cx('Select-value', {
                   'is-disabled': disabled,
-                  'is-invalid': item.__unmatched
+                  'is-invalid': showInvalidMatch ? item.__unmatched : false
                 })}
                 onClick={(e: React.MouseEvent) =>
                   e.stopPropagation()
@@ -842,7 +847,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
             <div
               className={cx('Select-value', {
                 'is-disabled': disabled,
-                'is-invalid': item.__unmatched
+                'is-invalid': showInvalidMatch ? item.__unmatched : false
               })}
             >
               <span className={cx('Select-valueLabel')}>
@@ -868,7 +873,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
           <div
             className={cx('Select-value', {
               'is-disabled': disabled,
-              'is-invalid': item.__unmatched
+              'is-invalid': showInvalidMatch ? item.__unmatched : false
             })}
             key={index}
           >
@@ -891,7 +896,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
           <div
             className={cx('Select-value', {
               'is-disabled': disabled,
-              'is-invalid': item.__unmatched
+              'is-invalid': showInvalidMatch ? item.__unmatched : false
             })}
           >
             <span className={cx('Select-valueLabel')}>

package/src/factory.tsx

@@ -503,7 +503,7 @@ export function updateEnv(options: Partial<RenderOptions>, session = 'global') {
 
   let store = stores[options.session || session];
   if (!store) {
-    store = RendererStore.create({}, options);
+    store = RendererStore.create({}, {...defaultOptions, ...options});
     stores[options.session || session] = store;
   } else {
     const env = getEnv(store);

package/src/renderers/Dialog.tsx

@@ -4,7 +4,6 @@ import {Renderer, RendererProps} from '../factory';
 import {SchemaNode, Schema, Action} from '../types';
 import {filter} from '../utils/tpl';
 import Modal from '../components/Modal';
-import findLast from 'lodash/findLast';
 import {
   guid,
   isVisible,

package/src/renderers/Form/InputText.tsx

@@ -220,6 +220,10 @@ export default class TextControl extends React.PureComponent<
             : this.valueToString(props.value)
       });
     }
+    if (prevProps.revealPassword !== props.revealPassword) {
+      /** 隐藏按钮的同时将密码设置为隐藏态 */
+      !props.revealPassword && this.setState({revealPassword: false});
+    }
   }
 
   componentWillUnmount() {
@@ -835,7 +839,11 @@ export default class TextControl extends React.PureComponent<
           step={step}
           onChange={this.handleNormalInputChange}
           value={this.valueToString(value)}
-          className={cx(type === 'password' && revealPassword && 'TextControl-input-password')}
+          className={cx(
+            type === 'password' &&
+              revealPassword &&
+              'TextControl-input-password'
+          )}
         />
         {clearable && !disabled && !readOnly && value ? (
           <a onClick={this.clearValue} className={`${ns}TextControl-clear`}>

package/src/renderers/Form/Item.tsx

@@ -1184,7 +1184,8 @@ export const detectProps = [
   'minLength',
   'maxLength',
   'embed',
-  'displayMode'
+  'displayMode',
+  'revealPassword'
 ];
 
 export function asFormItem(config: Omit<FormItemConfig, 'component'>) {

package/src/renderers/Form/Select.tsx

@@ -39,6 +39,11 @@ export interface SelectControlSchema extends FormOptionsControl {
    */
   menuTpl?: string;
 
+  /**
+   * 当在value值未匹配到当前options中的选项时，是否value值对应文本飘红显示
+   */
+  showInvalidMatch: boolean;
+
   /**
    * 边框模式，全边框，还是半边框，或者没边框。
    */
@@ -133,6 +138,7 @@ export interface SelectControlSchema extends FormOptionsControl {
 export interface SelectProps extends OptionsControlProps {
   autoComplete?: Api;
   searchable?: boolean;
+  showInvalidMatch?: boolean;
   defaultOpen?: boolean;
   useMobileUI?: boolean;
   maxTagCount?: number;
@@ -150,7 +156,8 @@ export default class SelectControl extends React.Component<SelectProps, any> {
   static defaultProps: Partial<SelectProps> = {
     clearable: false,
     searchable: false,
-    multiple: false
+    multiple: false,
+    showInvalidMatch: false
   };
 
   input: any;
@@ -397,6 +404,7 @@ export default class SelectControl extends React.Component<SelectProps, any> {
     let {
       autoComplete,
       searchable,
+      showInvalidMatch,
       options,
       className,
       loading,
@@ -452,6 +460,7 @@ export default class SelectControl extends React.Component<SelectProps, any> {
             loadOptions={
               isEffectiveApi(autoComplete) ? this.lazyloadRemote : undefined
             }
+            showInvalidMatch={showInvalidMatch}
             creatable={creatable}
             searchable={searchable || !!autoComplete}
             onChange={this.changeValue}

package/src/renderers/Form/index.tsx

@@ -943,13 +943,13 @@ export default class Form extends React.Component<FormProps, object> {
     );
   }
 
-  handleAction(
+  async handleAction(
     e: React.UIEvent<any> | void,
     action: Action,
     data: object,
     throwErrors: boolean = false,
     delegate?: IScopedContext
-  ): any {
+  ): Promise<any> {
     const {
       store,
       onSubmit,
@@ -987,38 +987,31 @@ export default class Form extends React.Component<FormProps, object> {
     if (data === this.props.data) {
       data = store.data;
     }
+
     if (Array.isArray(action.required) && action.required.length) {
       store.clearErrors(); // 如果是按钮指定了required，则校验前先清空一下遗留的校验报错
-
       const fields = action.required.map(item => ({
         name: item,
         rules: {isRequired: true}
       }));
+      const validationRes = await store.validateFields(fields);
 
-      return store.validateFields(fields).then(async result => {
-        if (!result) {
-          const dispatcher = await dispatchEvent(
-            'validateError',
-            this.props.data
-          );
-          if (!dispatcher?.prevented) {
-            env.notify('error', __('Form.validateFailed'));
-          }
+      if (!validationRes) {
+        const dispatcher = await dispatchEvent(
+          'validateError',
+          this.props.data
+        );
 
-          /** 抛异常是为了在dialog中catch这个错误，避免弹窗直接关闭 */
-          return Promise.reject(__('Form.validateFailed'));
-        } else {
-          dispatchEvent('validateSucc', this.props.data);
-          this.handleAction(
-            e,
-            {...action, required: undefined},
-            data,
-            throwErrors,
-            delegate
-          );
-          return;
+        if (!dispatcher?.prevented) {
+          env.notify('error', __('Form.validateFailed'));
         }
-      });
+
+        /** 抛异常是为了在dialog中catch这个错误，避免弹窗直接关闭 */
+        return Promise.reject(__('Form.validateFailed'));
+      } else {
+        /** 重置validated状态，保证submit时触发表单中的校验项 */
+        store.clearErrors();
+      }
     }
     if (
       action.type === 'submit' ||

package/src/renderers/Steps.tsx

@@ -101,8 +101,13 @@ export function StepsCmpt(props: StepsProps) {
     useMobileUI
   } = props;
 
-  const stepsRow =
-    (resolveVariableAndFilter(source, data, '| raw') as Array<StepSchema>) ||
+  let sourceResult: Array<StepSchema> = resolveVariableAndFilter(
+    source,
+    data,
+    '| raw'
+  ) as Array<StepSchema>;
+  const stepsRow: Array<StepSchema> =
+    (Array.isArray(sourceResult) ? sourceResult : undefined) ||
     config ||
     steps ||
     [];

package/src/renderers/Table/index.tsx

@@ -462,6 +462,7 @@ export default class Table extends React.Component<TableProps, object> {
   affixedTable?: HTMLTableElement;
   parentNode?: HTMLElement | Window;
   lastScrollLeft: number = -1;
+  lastScrollTop: number = 0;
   totalWidth: number = 0;
   totalHeight: number = 0;
   outterWidth: number = 0;
@@ -511,7 +512,6 @@ export default class Table extends React.Component<TableProps, object> {
     this.handleMouseLeave = this.handleMouseLeave.bind(this);
     this.subFormRef = this.subFormRef.bind(this);
     this.handleColumnToggle = this.handleColumnToggle.bind(this);
-
     this.updateAutoFillHeight = this.updateAutoFillHeight.bind(this);
 
     const {
@@ -659,6 +659,13 @@ export default class Table extends React.Component<TableProps, object> {
     const footToolbar = table.querySelector(
       `.${ns}Table-footToolbar`
     ) as HTMLElement;
+    const leftFixedColumns = table.querySelector(
+      `.${ns}Table-fixedLeft`
+    ) as HTMLElement;
+    const rightFixedColumns = table.querySelector(
+      `.${ns}Table-fixedRight`
+    ) as HTMLElement;
+
     if (!tableContent) {
       return;
     }
@@ -691,13 +698,24 @@ export default class Table extends React.Component<TableProps, object> {
       parentNode = parentNode.parentElement;
     }
 
-    tableContent.style.height = `${
+    const tableContentHeight = `${
       viewportHeight -
       tableContentTop -
       tableContentWrapMarginButtom -
       footToolbarHeight -
       allParentPaddingButtom
     }px`;
+
+    tableContent.style.height = tableContentHeight;
+    /**autoFillHeight开启后固定列会溢出Table高度，需要同步一下 */
+    if (leftFixedColumns) {
+      leftFixedColumns.style.height = tableContentHeight;
+      leftFixedColumns.style.overflowY = 'auto';
+    }
+    if (rightFixedColumns) {
+      rightFixedColumns.style.height = tableContentHeight;
+      rightFixedColumns.style.overflowY = 'auto';
+    }
   }
 
   componentDidUpdate(prevProps: TableProps) {
@@ -1171,39 +1189,66 @@ export default class Table extends React.Component<TableProps, object> {
   handleOutterScroll() {
     const outter = (this.table as HTMLElement).parentNode as HTMLElement;
     const scrollLeft = outter.scrollLeft;
-
-    if (scrollLeft === this.lastScrollLeft) {
-      return;
-    }
-
-    this.lastScrollLeft = scrollLeft;
-    let leading = scrollLeft === 0;
-    let trailing = Math.ceil(scrollLeft) + this.outterWidth >= this.totalWidth;
-    // console.log(scrollLeft, store.outterWidth, store.totalWidth, (scrollLeft + store.outterWidth) === store.totalWidth);
-    // store.setLeading(leading);
-    // store.setTrailing(trailing);
-
     const ns = this.props.classPrefix;
     const dom = findDOMNode(this) as HTMLElement;
-
     const fixedLeft = dom.querySelectorAll(`.${ns}Table-fixedLeft`);
-    if (fixedLeft && fixedLeft.length) {
-      for (let i = 0, len = fixedLeft.length; i < len; i++) {
-        let node = fixedLeft[i];
-        leading ? node.classList.remove('in') : node.classList.add('in');
+    const fixedRight = dom.querySelectorAll(`.${ns}Table-fixedRight`);
+
+    if (scrollLeft !== this.lastScrollLeft) {
+      this.lastScrollLeft = scrollLeft;
+      let leading = scrollLeft === 0;
+      let trailing =
+        Math.ceil(scrollLeft) + this.outterWidth >= this.totalWidth;
+      // console.log(scrollLeft, store.outterWidth, store.totalWidth, (scrollLeft + store.outterWidth) === store.totalWidth);
+      // store.setLeading(leading);
+      // store.setTrailing(trailing);
+
+      if (fixedLeft && fixedLeft.length) {
+        for (let i = 0, len = fixedLeft.length; i < len; i++) {
+          let node = fixedLeft[i];
+          leading ? node.classList.remove('in') : node.classList.add('in');
+        }
+      }
+
+      if (fixedRight && fixedRight.length) {
+        for (let i = 0, len = fixedRight.length; i < len; i++) {
+          let node = fixedRight[i];
+          trailing ? node.classList.remove('in') : node.classList.add('in');
+        }
+      }
+      const table = this.affixedTable;
+      if (table) {
+        table.style.cssText += `transform: translateX(-${scrollLeft}px)`;
       }
     }
 
-    const fixedRight = dom.querySelectorAll(`.${ns}Table-fixedRight`);
-    if (fixedRight && fixedRight.length) {
-      for (let i = 0, len = fixedRight.length; i < len; i++) {
-        let node = fixedRight[i];
-        trailing ? node.classList.remove('in') : node.classList.add('in');
+    /* 同步固定列内容的垂直滚动 */
+    if (outter.scrollTop !== this.lastScrollTop) {
+      this.lastScrollTop = outter.scrollTop;
+
+      if (fixedLeft && fixedLeft.length) {
+        forEach(fixedLeft, node => node.scrollTo({top: outter.scrollTop}));
+      }
+
+      if (fixedRight && fixedRight.length) {
+        forEach(fixedRight, node => node.scrollTo({top: outter.scrollTop}));
       }
     }
-    const table = this.affixedTable;
-    if (table) {
-      table.style.cssText += `transform: translateX(-${scrollLeft}px)`;
+  }
+
+  @autobind
+  handleFixedColumnsScroll(event: React.UIEvent<any>) {
+    /** table内容区当前Top */
+    const currentScrollTop = this.lastScrollTop;
+    /** 固定列的新Top */
+    const fixedScrollTop = event.currentTarget.scrollTop;
+
+    if (currentScrollTop !== fixedScrollTop) {
+      this.lastScrollTop = fixedScrollTop;
+      const tableContentDom = (this.table as HTMLElement)
+        .parentNode as HTMLElement;
+
+      tableContentDom.scrollTo({top: fixedScrollTop});
     }
   }
 
@@ -1498,7 +1543,8 @@ export default class Table extends React.Component<TableProps, object> {
   @autobind
   handleColResizeMouseMove(e: MouseEvent) {
     const moveX = e.clientX - this.lineStartX;
-    this.resizeLine.style.left = this.resizeLineLeft + moveX + 'px';
+    // 光标right为-4px，列宽改变时会自动跟随，不需要单独处理位置
+    // this.resizeLine.style.left = this.resizeLineLeft + moveX + 'px';
     this.targetTh.style.width = this.targetThWidth + moveX + 'px';
   }
 
@@ -2758,8 +2804,11 @@ export default class Table extends React.Component<TableProps, object> {
           onMouseLeave={this.handleMouseLeave}
         >
           <div
-            className={cx('Table-fixedLeft')}
+            className={cx('Table-fixedLeft', {
+              'Table-fixedLeft--autoFillHeight': autoFillHeight
+            })}
             onMouseMove={this.handleMouseMove}
+            onScroll={this.handleFixedColumnsScroll}
           >
             {affixColumns !== false && store.leftFixedColumns.length
               ? this.renderFixedColumns(
@@ -2771,8 +2820,11 @@ export default class Table extends React.Component<TableProps, object> {
               : null}
           </div>
           <div
-            className={cx('Table-fixedRight')}
+            className={cx('Table-fixedRight', {
+              'Table-fixedLeft--autoFillHeight': autoFillHeight
+            })}
             onMouseMove={this.handleMouseMove}
+            onScroll={this.handleFixedColumnsScroll}
           >
             {affixColumns !== false && store.rightFixedColumns.length
               ? this.renderFixedColumns(

package/src/utils/helper.ts

@@ -1217,7 +1217,8 @@ export function qsparse(
   options: any = {
     arrayFormat: 'indices',
     encodeValuesOnly: true,
-    depth: 1000 // 默认是 5， 所以condition-builder只要来个条件组就会导致报错
+    depth: 1000, // 默认是 5， 所以condition-builder只要来个条件组就会导致报错
+    arrayLimit: 1000 /** array元素数量超出限制，会被自动转化为object格式，默认值1000 */
   }
 ) {
   return qs.parse(data, options);