amis 1.9.1-beta.0 → 1.9.1-beta.1

package/src/components/calendar/DaysView.tsx

@@ -31,7 +31,12 @@ interface CustomDaysViewProps extends LocaleProps {
   setDateTimeState: (state: any) => void;
   showTime: () => void;
   setTime: (type: string, amount: number) => void;
-  scrollToTop: (type: string, amount: number, i: number, lable?: string) => void;
+  scrollToTop: (
+    type: string,
+    amount: number,
+    i: number,
+    lable?: string
+  ) => void;
   subtractTime: (
     amount: number,
     type: string,
@@ -177,21 +182,16 @@ export class CustomDaysView extends React.Component<CustomDaysViewProps> {
       columns,
       types,
       pickerValue: currentDate.toArray(),
-      uniqueTag: 0,
-    }
+      uniqueTag: 0
+    };
   }
 
   componentWillMount() {
-    this.setState({uniqueTag: (new Date()).valueOf()})
+    this.setState({uniqueTag: new Date().valueOf()});
   }
 
   componentDidMount() {
-    const {
-      timeFormat,
-      selectedDate,
-      viewDate,
-      isEndDate,
-    } = this.props;
+    const {timeFormat, selectedDate, viewDate, isEndDate} = this.props;
     const formatMap = {
       hours: 'HH',
       minutes: 'mm',
@@ -207,9 +207,14 @@ export class CustomDaysView extends React.Component<CustomDaysViewProps> {
         ? 'seconds'
         : '';
       if (type) {
-        this.scrollToTop(type, parseInt(date.format(formatMap[type]), 10), i, 'init')
+        this.scrollToTop(
+          type,
+          parseInt(date.format(formatMap[type]), 10),
+          i,
+          'init'
+        );
       }
-    })
+    });
   }
 
   updateSelectedDate = (event: React.MouseEvent<any>) => {
@@ -246,17 +251,14 @@ export class CustomDaysView extends React.Component<CustomDaysViewProps> {
     this.props.updateSelectedDate(event, true);
   };
 
-  showTime = () =>{
-    const {selectedDate, viewDate, timeFormat} = this.props
+  showTime = () => {
+    const {selectedDate, viewDate, timeFormat} = this.props;
     return (
-      <div 
-        key="stb"
-        className="rdtShowTime"
-      >
+      <div key="stb" className="rdtShowTime">
         {(selectedDate || viewDate || moment()).format(timeFormat)}
       </div>
-    )
-  }
+    );
+  };
 
   setTime = (
     type: 'hours' | 'minutes' | 'seconds' | 'milliseconds',
@@ -279,13 +281,15 @@ export class CustomDaysView extends React.Component<CustomDaysViewProps> {
     type: 'hours' | 'minutes' | 'seconds' | 'milliseconds',
     value: number,
     i: number,
-    label?: string,
+    label?: string
   ) => {
-    let elf: any = document.getElementById(`${this.state.uniqueTag}-${i}-input`);
-    elf.parentNode.scrollTo({
+    let elf: any = document.getElementById(
+      `${this.state.uniqueTag}-${i}-input`
+    );
+    elf?.parentNode?.scrollTo({
       top: value * 28,
       behavior: label === 'init' ? 'auto' : 'smooth'
-    })
+    });
   };
 
   confirm = () => {
@@ -479,7 +483,7 @@ export class CustomDaysView extends React.Component<CustomDaysViewProps> {
     const date = selectedDate || (isEndDate ? viewDate.endOf('day') : viewDate);
     const inputs: Array<React.ReactNode> = [];
 
-    inputs.push(this.showTime())
+    inputs.push(this.showTime());
 
     timeFormat.split(':').forEach((format, i) => {
       const type = /h/i.test(format)
@@ -525,7 +529,12 @@ export class CustomDaysView extends React.Component<CustomDaysViewProps> {
                   )
               });
               return (
-                <div className={cx('CalendarInputWrapper', 'CalendarInputWrapperMT')}>
+                <div
+                  className={cx(
+                    'CalendarInputWrapper',
+                    'CalendarInputWrapperMT'
+                  )}
+                >
                   {/* <input
                     type="text"
                     value={date.format(formatMap[type])}
@@ -534,24 +543,30 @@ export class CustomDaysView extends React.Component<CustomDaysViewProps> {
                     max={max}
                     {...inputProps}
                   /> */}
-                  <div 
+                  <div
                     className={cx(
                       'CalendarInput-sugs',
-                      type === 'hours' ? 'CalendarInput-sugsHours' : 'CalendarInput-sugsTimes'
-                    )} 
+                      type === 'hours'
+                        ? 'CalendarInput-sugsHours'
+                        : 'CalendarInput-sugsTimes'
+                    )}
                     id={`${this.state.uniqueTag}-${i}-input`}
                   >
                     {options.map(option => {
                       return (
                         <div
                           key={option.value}
-                          className={cx(
-                            'CalendarInput-sugsItem', 
-                            {'is-highlight': option.value === date.format(formatMap[type])}
-                          )}
+                          className={cx('CalendarInput-sugsItem', {
+                            'is-highlight':
+                              option.value === date.format(formatMap[type])
+                          })}
                           onClick={() => {
                             this.setTime(type, parseInt(option.value, 10));
-                            this.scrollToTop(type, parseInt(option.value, 10), i);
+                            this.scrollToTop(
+                              type,
+                              parseInt(option.value, 10),
+                              i
+                            );
                             closeMenu();
                           }}
                         >
@@ -649,7 +664,13 @@ export class CustomDaysView extends React.Component<CustomDaysViewProps> {
   };
 
   render() {
-    const {viewDate: date, useMobileUI, embed, timeFormat, classnames: cx} = this.props;
+    const {
+      viewDate: date,
+      useMobileUI,
+      embed,
+      timeFormat,
+      classnames: cx
+    } = this.props;
     const locale = date.localeData();
     const __ = this.props.translate;
     if (isMobile() && useMobileUI && !embed) {
@@ -718,9 +739,19 @@ export class CustomDaysView extends React.Component<CustomDaysViewProps> {
     return (
       <>
         <div className={timeFormat ? 'rdtDays' : ''}>
-          <table className={timeFormat ? 'rdtDaysPart' : ''}>{tableChildren}</table>
+          <table className={timeFormat ? 'rdtDaysPart' : ''}>
+            {tableChildren}
+          </table>
           {timeFormat ? (
-            <div className={timeFormat.toLowerCase().indexOf('s') > 0 ? "rdtTimePartWithS" : "rdtTimePart"}>{this.renderTimes()}</div>
+            <div
+              className={
+                timeFormat.toLowerCase().indexOf('s') > 0
+                  ? 'rdtTimePartWithS'
+                  : 'rdtTimePart'
+              }
+            >
+              {this.renderTimes()}
+            </div>
           ) : null}
         </div>
         <table>{this.renderFooter()}</table>

package/src/components/calendar/TimeView.tsx

@@ -550,7 +550,7 @@ export class CustomTimeView extends React.Component<
     let elf: any = document.getElementById(
       `${this.state.uniqueTag}-${i}-input`
     );
-    elf.parentNode.scrollTo({
+    elf?.parentNode?.scrollTo({
       top: value * 28,
       behavior: label === 'init' ? 'auto' : 'smooth'
     });

package/src/components/formula/Picker.tsx

@@ -275,6 +275,7 @@ export class FormulaPicker extends React.Component<
       variables,
       functions,
       children,
+      variableMode,
       ...rest
     } = this.props;
     const {isOpened, value, editorValue, isError} = this.state;
@@ -377,7 +378,7 @@ export class FormulaPicker extends React.Component<
               {...rest}
               variables={this.state.variables ?? variables}
               functions={this.state.functions ?? functions}
-              variableMode={this.state.variableMode}
+              variableMode={this.state.variableMode ?? variableMode}
               value={editorValue}
               onChange={this.handleEditorChange}
             />

package/src/renderers/Log.tsx

@@ -7,6 +7,7 @@ import {BaseSchema, SchemaTpl} from '../Schema';
 import Ansi from 'ansi-to-react';
 import {filter} from '../utils/tpl';
 import {buildApi, isApiOutdated} from '../utils/api';
+import VirtualList from '../components/virtual-list';
 
 /**
  * 日志展示组件
@@ -42,6 +43,21 @@ export interface LogSchema extends BaseSchema {
    * 返回内容字符编码
    */
   encoding?: string;
+
+  /**
+   * 限制最大日志数量
+   */
+  maxLength?: number;
+
+  /**
+   * 每行高度
+   */
+  rowHeight?: number;
+
+  /**
+   * 关闭 ANSI 颜色支持
+   */
+  disableColor?: boolean;
 }
 
 export interface LogProps
@@ -125,7 +141,7 @@ export class Log extends React.Component<LogProps, LogState> {
   }
 
   async loadLogs() {
-    const {source, data, env, translate: __, encoding} = this.props;
+    const {source, data, env, translate: __, encoding, maxLength} = this.props;
     // 因为这里返回结果是流式的，和普通 api 请求不一样，如果直接用 fetcher 经过 responseAdaptor 可能会导致出错，所以就直接 fetch 了
     const api = buildApi(source, data);
     if (!api.url) {
@@ -162,6 +178,11 @@ export class Log extends React.Component<LogProps, LogState> {
             lines[0] = lastline + lines[0];
             // 最后一个要么是空，要么是下一行的数据
             lastline = lines.pop() || '';
+            if (maxLength) {
+              if (logs.length + lines.length > maxLength) {
+                logs.splice(0, lines.length);
+              }
+            }
             logs = logs.concat(lines);
             this.setState({
               logs: logs,
@@ -180,6 +201,18 @@ export class Log extends React.Component<LogProps, LogState> {
     }
   }
 
+  /**
+   * 渲染某一行
+   */
+  renderLine(index: number, line: string) {
+    const {classnames: cx, disableColor} = this.props;
+    return (
+      <div className={cx('Log-line')} key={index}>
+        {disableColor ? line : <Ansi useClasses>{line}</Ansi>}
+      </div>
+    );
+  }
+
   render() {
     const {
       source,
@@ -187,6 +220,8 @@ export class Log extends React.Component<LogProps, LogState> {
       classnames: cx,
       placeholder,
       height,
+      rowHeight,
+      disableColor,
       translate: __
     } = this.props;
 
@@ -195,25 +230,49 @@ export class Log extends React.Component<LogProps, LogState> {
     if (!source) {
       loading = __('Log.mustHaveSource');
     }
+    let lines: any;
 
-    const lines = this.state.logs.map((line, index) => {
-      return (
-        <div className={cx('Log-line')} key={index}>
-          <Ansi useClasses>{line}</Ansi>
-        </div>
+    const logs = this.state.lastLine
+      ? this.state.logs.concat([this.state.lastLine])
+      : this.state.logs;
+
+    // 如果设置 rowHeight 就开启延迟渲染
+    const useVirtualRender = rowHeight;
+
+    if (useVirtualRender) {
+      lines = (
+        <VirtualList
+          height={height as number}
+          itemCount={logs.length}
+          itemSize={rowHeight}
+          renderItem={({index, style}) => (
+            <div
+              className={cx('Log-line')}
+              key={index}
+              style={{...style, whiteSpace: 'nowrap'}}
+            >
+              {disableColor ? (
+                logs[index]
+              ) : (
+                <Ansi useClasses>{logs[index]}</Ansi>
+              )}
+            </div>
+          )}
+        />
       );
-    });
+    } else {
+      lines = logs.map((line, index) => {
+        return this.renderLine(index, line);
+      });
+    }
 
     return (
       <div
         ref={this.logRef}
         className={cx('Log', className)}
-        style={{height: height}}
+        style={{height: useVirtualRender ? 'auto' : height}}
       >
-        {lines.length ? lines : loading}
-        <div className={cx('Log-line')} key="last">
-          <code>{this.state.lastLine}</code>
-        </div>
+        {useVirtualRender ? lines : lines.length ? lines : loading}
       </div>
     );
   }