amis 1.6.2 → 1.6.3

package/src/renderers/Calendar.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import {Renderer} from '../factory';
+import {SchemaObject, BaseSchema} from '../Schema';
+import {DateControlRenderer} from './Form/InputDate';
+
+interface scheduleItem {
+  startTime: string;
+  endTime: string;
+  content: any;
+  className?: string;
+}
+
+export interface CalendarSchema extends BaseSchema {
+  /**
+   * 指定为日历选择控件
+   */
+  type: 'calendar';
+
+  /**
+   * 日程
+   */
+  schedules?: Array<scheduleItem> | string;
+
+  /**
+   * 日程显示颜色自定义
+   */
+  scheduleClassNames?: Array<string>;
+
+  /**
+   * 日程点击展示
+   */
+  scheduleAction?: SchemaObject;
+}
+
+@Renderer({
+  type: 'calendar'
+})
+export class CalendarRenderer extends DateControlRenderer {
+  static defaultProps = {
+    ...DateControlRenderer.defaultProps,
+    embed: true
+  }
+}

package/src/renderers/Card.tsx

@@ -282,7 +282,17 @@ export class CardRenderer extends React.Component<CardProps> {
   }
 
   handleClick(e: React.MouseEvent<HTMLDivElement>) {
-    const {item, href, data, env, blank, itemAction, onAction} = this.props;
+    const {
+      item,
+      href,
+      data,
+      env,
+      blank,
+      itemAction,
+      onAction,
+      onCheck,
+      selectable
+    } = this.props;
 
     if (href) {
       env.jumpTo(filter(href, data), {
@@ -298,7 +308,7 @@ export class CardRenderer extends React.Component<CardProps> {
       return;
     }
 
-    this.props.onCheck && this.props.onCheck(item);
+    selectable && onCheck?.(item);
   }
 
   handleAction(e: React.UIEvent<any>, action: Action, ctx: object) {

package/src/renderers/Form/ConditionBuilder.tsx

@@ -4,6 +4,7 @@ import {Funcs, Fields} from '../../components/condition-builder/types';
 import {Config} from '../../components/condition-builder/config';
 import ConditionBuilder from '../../components/condition-builder/index';
 import {SchemaApi, SchemaTokenizeableString} from '../../Schema';
+import FormulaPicker from '../../components/formula/Picker';
 import {
   RemoteOptionsProps,
   withRemoteConfig
@@ -38,6 +39,16 @@ export interface ConditionBuilderControlSchema extends FormBaseControl {
    * 通过远程拉取配置项
    */
   source?: SchemaApi | SchemaTokenizeableString;
+
+  /**
+   * 展现模式
+   */
+  builderMode?: 'simple' | 'full';
+
+  /**
+   * 是否显示并或切换键按钮，只在简单模式下有用
+   */
+  showANDOR?: boolean;
 }
 
 export interface ConditionBuilderProps

package/src/renderers/Form/IconPicker.tsx

@@ -7,6 +7,7 @@ import {autobind} from '../../utils/helper';
 import {ICONS} from './IconPickerIcons';
 import {FormItem, FormControlProps, FormBaseControl} from './Item';
 import {Option} from '../../components/Select';
+import {Icon} from '../../components/icons';
 
 /**
  * 图标选择器
@@ -22,6 +23,7 @@ export interface IconPickerProps extends FormControlProps {
   placeholder?: string;
   resetValue?: any;
   noDataTip?: string;
+  clearable?: boolean;
 }
 
 export interface IconPickerState {
@@ -210,6 +212,23 @@ export default class IconPickerControl extends React.PureComponent<
     }
   }
 
+  @autobind
+  handleClear() {
+    const {onChange, resetValue} = this.props;
+
+    onChange?.(resetValue);
+
+    this.setState(
+      {
+        inputValue: resetValue,
+        isFocused: true
+      },
+      () => {
+        this.focus();
+      }
+    );
+  }
+
   renderFontIcons() {
     const {
       className,
@@ -220,6 +239,7 @@ export default class IconPickerControl extends React.PureComponent<
       value,
       noDataTip,
       disabled,
+      clearable,
       translate: __
     } = this.props;
     const options = this.formatOptions();
@@ -278,6 +298,15 @@ export default class IconPickerControl extends React.PureComponent<
                   disabled={disabled}
                   size={10}
                 />
+
+                {clearable && !disabled && value ? (
+                  <a
+                    onClick={this.handleClear}
+                    className={cx('IconPickerControl-clear')}
+                  >
+                    <Icon icon="input-clear" className="icon" />
+                  </a>
+                ) : null}
               </div>
               {isOpen ? (
                 <div className={cx('IconPickerControl-sugsPanel')}>

package/src/renderers/Form/InputColor.tsx

@@ -88,7 +88,7 @@ export default class ColorControl extends React.PureComponent<
             popOverContainer={
               mobileUI && env && env.getModalContainer
                 ? env.getModalContainer
-                : undefined
+                : rest.popOverContainer
             }
             value={value || ''}
           />

package/src/renderers/Form/InputDate.tsx

@@ -91,26 +91,6 @@ export interface DateControlSchema extends InputDateBaseControlSchema {
    * 限制最大日期
    */
   maxDate?: string;
-
-  /**
-   * 日程
-   */
-  schedules?:
-    | Array<{
-        startTime: Date;
-        endTime: Date;
-        content: any;
-        className?: string;
-      }>
-    | string;
-  /**
-   * 日程显示颜色自定义
-   */
-  scheduleClassNames?: Array<string>;
-  /**
-   * 日程点击展示
-   */
-  scheduleAction?: SchemaObject;
 }
 
 /**
@@ -465,7 +445,7 @@ export default class DateControl extends React.PureComponent<
           popOverContainer={
             mobileUI && env && env.getModalContainer
               ? env.getModalContainer
-              : undefined
+              : rest.popOverContainer
           }
           timeFormat={timeFormat}
           format={valueFormat || format}

package/src/renderers/Form/InputDateRange.tsx

@@ -187,7 +187,7 @@ export default class DateRangeControl extends React.Component<DateRangeProps> {
           popOverContainer={
             mobileUI && env && env.getModalContainer
               ? env.getModalContainer
-              : undefined
+              : rest.popOverContainer
           }
           data={data}
           format={format}

package/src/renderers/Form/InputFormula.tsx

@@ -1,7 +1,14 @@
 import React from 'react';
+
+import ResultBox from '../../components/ResultBox';
+import Spinner from '../../components/Spinner';
+import {SchemaApi, SchemaTokenizeableString} from '../../Schema';
 import FormItem, {FormBaseControl, FormControlProps} from './Item';
 import FormulaPicker from '../../components/formula/Picker';
+import {autobind} from '../../utils/helper';
+
 import type {FuncGroup, VariableItem} from '../../components/formula/Editor';
+import type {SchemaIcon} from '../../Schema';
 
 /**
  * InputFormula 公式编辑器
@@ -33,10 +40,68 @@ export interface InputFormulaControlSchema extends FormBaseControl {
    */
   functions: Array<FuncGroup>;
 
+  /**
+   * 编辑器标题
+   */
+  title?: string;
+
   /**
    * 顶部标题，默认为表达式
    */
   header: string;
+
+  /**
+   * 控件模式
+   */
+  inputMode?: 'button' | 'input-button';
+
+  /**
+   * 按钮图标
+   */
+  icon?: SchemaIcon;
+
+  /**
+   * 按钮Label，inputMode为button时生效
+   */
+  btnLabel?: string;
+
+  /**
+   * 按钮样式
+   */
+  level?:
+    | 'info'
+    | 'success'
+    | 'warning'
+    | 'danger'
+    | 'link'
+    | 'primary'
+    | 'dark'
+    | 'light';
+
+  /**
+   * 按钮大小
+   */
+  btnSize?: 'xs' | 'sm' | 'md' | 'lg';
+
+  /**
+   * 边框模式，全边框，还是半边框，或者没边框。
+   */
+  borderMode?: 'full' | 'half' | 'none';
+
+  /**
+   * 输入框占位符
+   */
+  placeholder?: string;
+
+  /**
+   * 变量面板CSS样式类名
+   */
+  variableClassName?: string;
+
+  /**
+   * 函数面板CSS样式类名
+   */
+  functionClassName?: string;
 }
 
 export interface InputFormulaProps
@@ -50,8 +115,16 @@ export interface InputFormulaProps
   type: 'input-formula'
 })
 export class InputFormulaRenderer extends React.Component<InputFormulaProps> {
+  static defaultProps: Pick<
+    InputFormulaControlSchema,
+    'inputMode' | 'borderMode'
+  > = {
+    inputMode: 'input-button',
+    borderMode: 'full'
+  };
+
   render() {
-    const {
+    let {
       selectedOptions,
       disabled,
       onChange,
@@ -61,11 +134,26 @@ export class InputFormulaRenderer extends React.Component<InputFormulaProps> {
       functions,
       header,
       label,
-      value
+      value,
+      clearable,
+      className,
+      classPrefix: ns,
+      classnames: cx,
+      borderMode,
+      placeholder,
+      inputMode,
+      btnLabel,
+      level,
+      btnSize,
+      icon,
+      title,
+      variableClassName,
+      functionClassName,
+      data
     } = this.props;
-
     return (
       <FormulaPicker
+        className={className}
         value={value}
         disabled={disabled}
         onChange={onChange}
@@ -74,6 +162,18 @@ export class InputFormulaRenderer extends React.Component<InputFormulaProps> {
         variableMode={variableMode}
         functions={functions}
         header={header || label || ''}
+        borderMode={borderMode}
+        placeholder={placeholder}
+        mode={inputMode}
+        btnLabel={btnLabel}
+        level={level}
+        btnSize={btnSize}
+        icon={icon}
+        title={title}
+        clearable={clearable}
+        variableClassName={variableClassName}
+        functionClassName={functionClassName}
+        data={data}
       />
     );
   }

package/src/renderers/Form/InputText.tsx

@@ -85,6 +85,10 @@ export interface TextProps extends OptionsControlProps {
   autoComplete?: any;
   allowInputText?: boolean;
   spinnerClassName: string;
+  transform?: {
+    lowerCase?: boolean; // 用户输入的字符自动转小写
+    upperCase?: boolean; // 用户输入的字符自动转大写
+  };
 }
 
 export interface TextState {
@@ -459,12 +463,33 @@ export default class TextControl extends React.PureComponent<
 
     let value = e.currentTarget.value;
 
-    onChange(value);
+    onChange(this.transformValue(value));
+  }
+
+  transformValue(value: string) {
+    const {transform} = this.props;
+
+    if (!transform) {
+      return value;
+    }
+
+    Object.keys(transform).forEach((key: 'lowerCase' | 'upperCase') => {
+      const propValue = transform[key];
+      switch (key) {
+        case 'lowerCase':
+          propValue && (value = value.toLowerCase());
+          break;
+        case 'upperCase':
+          propValue && (value = value.toUpperCase());
+          break;
+      }
+    });
+
+    return value;
   }
 
   loadAutoComplete() {
-    const {formItem, autoComplete, data, multiple, selectedOptions} =
-      this.props;
+    const {formItem, autoComplete, data} = this.props;
 
     if (isEffectiveApi(autoComplete, data) && formItem) {
       formItem.loadOptions(
@@ -609,7 +634,7 @@ export default class TextControl extends React.PureComponent<
                   onClick={this.clearValue}
                   className={cx('TextControl-clear')}
                 >
-                  <Icon icon="close" className="icon" />
+                  <Icon icon="input-clear" className="icon" />
                 </a>
               ) : null}
 
@@ -715,7 +740,7 @@ export default class TextControl extends React.PureComponent<
         />
         {clearable && !disabled && value ? (
           <a onClick={this.clearValue} className={`${ns}TextControl-clear`}>
-            <Icon icon="close" className="icon" />
+            <Icon icon="input-clear" className="icon" />
           </a>
         ) : null}
         {showCounter ? (

package/src/renderers/Form/Picker.tsx

@@ -469,7 +469,7 @@ export default class PickerControl extends React.PureComponent<
 
               {clearable && !disabled && selectedOptions.length ? (
                 <a onClick={this.clearValue} className={cx('Picker-clear')}>
-                  <Icon icon="close" className="icon" />
+                  <Icon icon="input-clear" className="icon" />
                 </a>
               ) : null}
 

package/src/renderers/Form/Textarea.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import {FormItem, FormControlProps, FormBaseControl} from './Item';
 import cx from 'classnames';
 import Textarea from '../../components/Textarea';
+import {Icon} from '../../components/icons';
 import {findDOMNode} from 'react-dom';
 import {autobind, ucFirst} from '../../utils/helper';
 /**
@@ -43,12 +44,24 @@ export interface TextareaControlSchema extends FormBaseControl {
    * 是否显示计数
    */
   showCounter?: boolean;
+
+  /**
+   * 输入内容是否可清除
+   */
+  clearable?: boolean;
+
+  /**
+   * 重置值
+   */
+  resetValue?: string;
 }
 
 export interface TextAreaProps extends FormControlProps {
   placeholder?: string;
   minRows?: number;
   maxRows?: number;
+  clearable?: boolean;
+  resetValue?: string;
 }
 
 export default class TextAreaControl extends React.Component<
@@ -58,7 +71,9 @@ export default class TextAreaControl extends React.Component<
   static defaultProps: Partial<TextAreaProps> = {
     minRows: 3,
     maxRows: 20,
-    trimContents: true
+    trimContents: true,
+    resetValue: '',
+    clearable: false
   };
 
   state = {
@@ -68,6 +83,14 @@ export default class TextAreaControl extends React.Component<
   input?: HTMLInputElement;
   inputRef = (ref: any) => (this.input = findDOMNode(ref) as HTMLInputElement);
 
+  valueToString(value: any) {
+    return typeof value === 'undefined' || value === null
+      ? ''
+      : typeof value === 'string'
+      ? value
+      : JSON.stringify(value);
+  }
+
   focus() {
     if (!this.input) {
       return;
@@ -132,6 +155,14 @@ export default class TextAreaControl extends React.Component<
     );
   }
 
+  @autobind
+  handleClear() {
+    const {onChange, resetValue} = this.props;
+
+    onChange?.(resetValue);
+    this.focus();
+  }
+
   render() {
     const {
       className,
@@ -147,17 +178,10 @@ export default class TextAreaControl extends React.Component<
       borderMode,
       classnames: cx,
       maxLength,
-      showCounter
+      showCounter,
+      clearable
     } = this.props;
-
-    let counter = showCounter
-      ? (typeof value === 'undefined' || value === null
-          ? ''
-          : typeof value === 'string'
-          ? value
-          : JSON.stringify(value)
-        ).length
-      : 0;
+    const counter = showCounter ? this.valueToString(value).length : 0;
 
     return (
       <div
@@ -175,13 +199,7 @@ export default class TextAreaControl extends React.Component<
           ref={this.inputRef}
           name={name}
           disabled={disabled}
-          value={
-            typeof value === 'undefined' || value === null
-              ? ''
-              : typeof value === 'string'
-              ? value
-              : JSON.stringify(value)
-          }
+          value={this.valueToString(value)}
           placeholder={placeholder}
           autoCorrect="off"
           spellCheck="false"
@@ -193,12 +211,18 @@ export default class TextAreaControl extends React.Component<
           onBlur={this.handleBlur}
         />
 
+        {clearable && !disabled && value ? (
+          <a onClick={this.handleClear} className={cx('TextareaControl-clear')}>
+            <Icon icon="input-clear" className="icon" />
+          </a>
+        ) : null}
+
         {showCounter ? (
           <span
-            className={cx(
-              'TextareaControl-counter',
-              counter === 0 ? 'is-empty' : ''
-            )}
+            className={cx('TextareaControl-counter', {
+              'is-empty': counter === 0,
+              'is-clearable': clearable && !disabled && value
+            })}
           >
             {`${counter}${
               typeof maxLength === 'number' && maxLength ? `/${maxLength}` : ''

package/src/renderers/Form/Transfer.tsx

@@ -128,7 +128,7 @@ export class BaseTransferRenderer<
   T extends OptionsControlProps = BaseTransferProps
 > extends React.Component<T> {
   @autobind
-  handleChange(value: Array<Option>, optionModified?: boolean) {
+  handleChange(value: Array<Option> | Option, optionModified?: boolean) {
     const {
       onChange,
       joinValues,
@@ -169,6 +169,11 @@ export class BaseTransferRenderer<
       if (joinValues) {
         newValue = newValue.join(delimiter || ',');
       }
+    } else if (value) {
+      newValue =
+        joinValues || extractValue
+          ? value[(valueField as string) || 'value']
+          : value;
     }
 
     (newOptions.length > options.length || optionModified) &&

package/src/renderers/Form/index.tsx

@@ -19,7 +19,8 @@ import {
   isEmpty,
   getVariable,
   isObjectShallowModified,
-  qsparse
+  qsparse,
+  repeatCount
 } from '../../utils/helper';
 import debouce from 'lodash/debounce';
 import flatten from 'lodash/flatten';
@@ -1454,6 +1455,18 @@ export default class Form extends React.Component<FormProps, object> {
       this.props.wrapperComponent ||
       (/(?:\/|^)form\//.test($path as string) ? 'div' : 'form');
 
+    const padDom = repeatCount(
+      columnCount && Array.isArray(body)
+        ? columnCount - (body.length % columnCount)
+        : 0,
+      index => (
+        <div
+          className={cx(`Form-item Form-item--${mode} is-placeholder`)}
+          key={index}
+        ></div>
+      )
+    );
+
     return (
       <WrapperComponent
         className={cx(
@@ -1480,6 +1493,8 @@ export default class Form extends React.Component<FormProps, object> {
           body
         })}
 
+        {padDom}
+
         {/* 显示没有映射上的 errors */}
         {restError && restError.length ? (
           <ul className={cx('Form-restError', 'Form-feedback')}>

package/src/renderers/IFrame.tsx

@@ -6,7 +6,7 @@ import {ScopedContext, IScopedContext} from '../Scoped';
 import {buildApi, isApiOutdated} from '../utils/api';
 import {BaseSchema, SchemaUrlPath} from '../Schema';
 import {ActionSchema} from './Action';
-import {dataMapping} from '../utils/tpl-builtin';
+import {dataMapping, resolveVariableAndFilter} from '../utils/tpl-builtin';
 
 /**
  * IFrame 渲染器
@@ -113,10 +113,8 @@ export default class IFrame extends React.Component<IFrameProps, object> {
     const {src, data} = this.props;
 
     if (src) {
-      (this.IFrameRef.current as HTMLIFrameElement).src = buildApi(
-        src,
-        data
-      ).url;
+      (this.IFrameRef.current as HTMLIFrameElement).src =
+        resolveVariableAndFilter(src, data, '| raw');
     }
   }
 
@@ -129,10 +127,8 @@ export default class IFrame extends React.Component<IFrameProps, object> {
     this.postMessage('receive', newData);
 
     if (isApiOutdated(src, src, data, newData)) {
-      (this.IFrameRef.current as HTMLIFrameElement).src = buildApi(
-        src,
-        newData
-      ).url;
+      (this.IFrameRef.current as HTMLIFrameElement).src =
+        resolveVariableAndFilter(src, newData, '| raw');
     }
   }
 
@@ -161,7 +157,9 @@ export default class IFrame extends React.Component<IFrameProps, object> {
       ...style
     };
 
-    const finalSrc = src ? buildApi(src, data).url : undefined;
+    const finalSrc = src
+      ? resolveVariableAndFilter(src, data, '| raw')
+      : undefined;
 
     if (
       typeof finalSrc === 'string' &&

package/src/renderers/Tpl.tsx

@@ -104,7 +104,9 @@ export class Tpl extends React.Component<TplProps, object> {
       return;
     }
 
-    this.dom.firstChild.innerHTML = this.getContent();
+    this.dom.firstChild.innerHTML = this.props.env.filterHtml(
+      this.getContent()
+    );
   }
 
   render() {