amis 1.5.6-beta.4 → 1.5.8-beta.2

package/src/renderers/Card.tsx

@@ -4,7 +4,7 @@ import {SchemaNode, Schema, Action, PlainObject} from '../types';
 import {filter, evalExpression} from '../utils/tpl';
 import Checkbox from '../components/Checkbox';
 import {padArr, isVisible, isDisabled, noop, hashCode} from '../utils/helper';
-import {resolveVariable} from '../utils/tpl-builtin';
+import {resolveVariable, resolveVariableAndFilter} from '../utils/tpl-builtin';
 import QuickEdit, {SchemaQuickEdit} from './QuickEdit';
 import PopOver, {SchemaPopOver} from './PopOver';
 import {TableCell} from './Table';
@@ -644,15 +644,19 @@ export class CardRenderer extends React.Component<CardProps> {
   }
 
   renderMedia() {
-    const {media, classnames: cx, render, region} = this.props;
+    const {media, classnames: cx, render, region, data} = this.props;
     if (media) {
       const {type, url, className, autoPlay, isLive, poster} = media;
+      const mediaUrl = resolveVariableAndFilter(url, data, '| raw');
 
-      if (type === 'image' && url) {
+      if (type === 'image' && mediaUrl) {
         return (
-          <img className={cx('Card-multiMedia-img', className)} src={url} />
+          <img
+            className={cx('Card-multiMedia-img', className)}
+            src={mediaUrl}
+          />
         );
-      } else if (type === 'video' && url) {
+      } else if (type === 'video' && mediaUrl) {
         return (
           <div className={cx('Card-multiMedia-video', className)}>
             {
@@ -660,7 +664,7 @@ export class CardRenderer extends React.Component<CardProps> {
                 type: type,
                 autoPlay: autoPlay,
                 poster: poster,
-                src: url,
+                src: mediaUrl,
                 isLive: isLive
               }) as JSX.Element
             }

package/src/renderers/Custom.tsx

@@ -33,9 +33,12 @@ export interface CustomProps extends FormControlProps, CustomSchema {
 
 // 添加resolver，指定所有参数的联合字符串为key。因为最后一个参数为函数体
 // 缓存一下，避免在 crud 中的自定义组件被大量执行
-const getFunction = memoize((...args) => {
-  return new Function(...args);
-}, (...args) => JSON.stringify(args));
+const getFunction = memoize(
+  (...args) => {
+    return new Function(...args);
+  },
+  (...args) => JSON.stringify(args)
+);
 
 export class Custom extends React.Component<CustomProps, object> {
   static defaultProps: Partial<CustomProps> = {

package/src/renderers/Each.tsx

@@ -54,10 +54,10 @@ export default class Each extends React.Component<EachProps> {
       translate: __
     } = this.props;
 
-    const value = getPropValue(
-      this.props,
-      props => props.source && !props.name
-        ? resolveVariableAndFilter(props.source, props.data, '| raw') : undefined
+    const value = getPropValue(this.props, props =>
+      props.source && !props.name
+        ? resolveVariableAndFilter(props.source, props.data, '| raw')
+        : undefined
     );
 
     const arr = isObject(value)

package/src/renderers/Flex.tsx

@@ -112,13 +112,9 @@ export default class Flex extends React.Component<FlexProps, object> {
 
     return (
       <div style={flexStyle} className={className}>
-        {(Array.isArray(items)
-          ? items
-          : items
-          ? [items]
-          : []
-        ).map((item, key) =>
-          render(`flexItem/${key}`, item, {key: `flexItem/${key}`})
+        {(Array.isArray(items) ? items : items ? [items] : []).map(
+          (item, key) =>
+            render(`flexItem/${key}`, item, {key: `flexItem/${key}`})
         )}
       </div>
     );

package/src/renderers/Form/ChartRadios.tsx

@@ -98,13 +98,8 @@ export default class ChartRadiosControl extends React.Component<
   }
 
   render() {
-    const {
-      options,
-      labelField,
-      chartValueField,
-      valueField,
-      render
-    } = this.props;
+    const {options, labelField, chartValueField, valueField, render} =
+      this.props;
     const config = {
       legend: {
         top: 10

package/src/renderers/Form/Checkboxes.tsx

@@ -216,7 +216,7 @@ export default class CheckboxesControl extends React.Component<
           inline={inline}
           labelClassName={labelClassName}
         >
-        {__('Checkboxes.selectAll')}
+          {__('Checkboxes.selectAll')}
         </Checkbox>
       );
     }

package/src/renderers/Form/DiffEditor.tsx

@@ -98,9 +98,8 @@ export class DiffEditor extends React.Component<DiffEditorProps, any> {
     this.handleBlur = this.handleBlur.bind(this);
     this.editorFactory = this.editorFactory.bind(this);
     this.handleEditorMounted = this.handleEditorMounted.bind(this);
-    this.handleModifiedEditorChange = this.handleModifiedEditorChange.bind(
-      this
-    );
+    this.handleModifiedEditorChange =
+      this.handleModifiedEditorChange.bind(this);
   }
 
   componentWillUnmount() {

package/src/renderers/Form/InputColor.tsx

@@ -68,8 +68,7 @@ export default class ColorControl extends React.PureComponent<
   };
 
   render() {
-    const {className, classPrefix: ns, value, ...rest} = this.props;
-
+    const {className, classPrefix: ns, value, env, ...rest} = this.props;
     return (
       <div className={cx(`${ns}ColorControl`, className)}>
         <Suspense fallback={<div>...</div>}>

package/src/renderers/Form/InputDate.tsx

@@ -1,7 +1,11 @@
 import React from 'react';
 import {FormItem, FormControlProps, FormBaseControl} from './Item';
 import cx from 'classnames';
-import {filterDate, isPureVariable, resolveVariableAndFilter} from '../../utils/tpl-builtin';
+import {
+  filterDate,
+  isPureVariable,
+  resolveVariableAndFilter
+} from '../../utils/tpl-builtin';
 import moment from 'moment';
 import 'moment/locale/zh-cn';
 import DatePicker from '../../components/DatePicker';
@@ -91,12 +95,14 @@ export interface DateControlSchema extends InputDateBaseControlSchema {
   /**
    * 日程
    */
-  schedules?: Array<{
-    startTime: Date,
-    endTime: Date,
-    content: any,
-    className?: string
-  }> | string;
+  schedules?:
+    | Array<{
+        startTime: Date;
+        endTime: Date;
+        content: any;
+        className?: string;
+      }>
+    | string;
   /**
    * 日程显示颜色自定义
    */
@@ -288,10 +294,10 @@ interface DateControlState {
   minDate?: moment.Moment;
   maxDate?: moment.Moment;
   schedules?: Array<{
-    startTime: Date,
-    endTime: Date,
-    content: any,
-    className?: string
+    startTime: Date;
+    endTime: Date;
+    content: any;
+    className?: string;
   }>;
 }
 
@@ -370,15 +376,25 @@ export default class DateControl extends React.PureComponent<
       });
     }
 
-    if (anyChanged(['schedules', 'data'], prevProps, props)
-      && (typeof props.schedules === 'string' && isPureVariable(props.schedules))
+    if (
+      anyChanged(['schedules', 'data'], prevProps, props) &&
+      typeof props.schedules === 'string' &&
+      isPureVariable(props.schedules)
     ) {
-      const schedulesData = resolveVariableAndFilter(props.schedules, props.data, '| raw');
-      const preSchedulesData = resolveVariableAndFilter(prevProps.schedules, prevProps.data, '| raw');
+      const schedulesData = resolveVariableAndFilter(
+        props.schedules,
+        props.data,
+        '| raw'
+      );
+      const preSchedulesData = resolveVariableAndFilter(
+        prevProps.schedules,
+        prevProps.data,
+        '| raw'
+      );
       if (Array.isArray(schedulesData) && preSchedulesData !== schedulesData) {
         this.setState({
           schedules: schedulesData
-        })
+        });
       }
     }
   }
@@ -408,8 +424,12 @@ export default class DateControl extends React.PureComponent<
       }
     };
 
-    onAction && onAction(null, scheduleAction || defaultscheduleAction, createObject(data, scheduleData));
-
+    onAction &&
+      onAction(
+        null,
+        scheduleAction || defaultscheduleAction,
+        createObject(data, scheduleData)
+      );
   }
 
   render() {
@@ -424,6 +444,7 @@ export default class DateControl extends React.PureComponent<
       format,
       timeFormat,
       valueFormat,
+      env,
       largeMode,
       render,
       ...rest

package/src/renderers/Form/InputDateRange.tsx

@@ -172,6 +172,7 @@ export default class DateRangeControl extends React.Component<DateRangeProps> {
       maxDuration,
       data,
       format,
+      env,
       ...rest
     } = this.props;
 

package/src/renderers/Form/InputFormula.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import FormItem, {FormBaseControl, FormControlProps} from './Item';
+import FormulaPicker from '../../components/formula/Picker';
+import type {FuncGroup, VariableItem} from '../../components/formula/Editor';
+
+/**
+ * InputFormula 公式编辑器
+ * 文档：https://baidu.gitee.io/amis/zh-CN/components/form/input-formula
+ */
+export interface InputFormulaControlSchema extends FormBaseControl {
+  type: 'input-formula';
+
+  /**
+   * evalMode 即直接就是表达式，否则
+   * 需要 ${这里面才是表达式}
+   * 默认为 true
+   */
+  evalMode?: boolean;
+
+  /**
+   * 用于提示的变量集合，默认为空
+   */
+  variables: Array<VariableItem>;
+
+  /**
+   * 变量展现模式，可选值：'tabs' ｜ 'tree'
+   */
+  variableMode?: 'tabs' | 'tree';
+
+  /**
+   * 函数集合，默认不需要传，即  amis-formula 里面那个函数
+   * 如果有扩充，则需要传。
+   */
+  functions: Array<FuncGroup>;
+
+  /**
+   * 顶部标题，默认为表达式
+   */
+  header: string;
+}
+
+export interface InputFormulaProps
+  extends FormControlProps,
+    Omit<
+      InputFormulaControlSchema,
+      'options' | 'inputClassName' | 'className' | 'descriptionClassName'
+    > {}
+
+@FormItem({
+  type: 'input-formula'
+})
+export class InputFormulaRenderer extends React.Component<InputFormulaProps> {
+  render() {
+    const {
+      selectedOptions,
+      disabled,
+      onChange,
+      evalMode,
+      variables,
+      variableMode,
+      functions,
+      header,
+      label,
+      value
+    } = this.props;
+
+    return (
+      <FormulaPicker
+        value={value}
+        disabled={disabled}
+        onChange={onChange}
+        evalMode={evalMode}
+        variables={variables}
+        variableMode={variableMode}
+        functions={functions}
+        header={header || label || ''}
+      />
+    );
+  }
+}

package/src/renderers/Form/InputImage.tsx

@@ -283,6 +283,7 @@ export interface ImageState {
   crop?: any;
   error?: string;
   cropFile?: FileValue;
+  cropFileName?: string; // 主要是用于后续上传的时候获得用户名
   submitOnChange?: boolean;
   frameImageWidth?: number;
 }
@@ -651,7 +652,7 @@ export default class ImageControl extends React.Component<
                 env.notify('error', error || __('File.errorRetry'));
               } else {
                 newFile = {
-                  name: file.name,
+                  name: file.name || this.state.cropFileName,
                   ...obj,
                   preview: file.preview
                 } as FileValue;
@@ -748,8 +749,10 @@ export default class ImageControl extends React.Component<
     this.setState({
       cropFile: {
         preview: files[index].preview || (files[index].url as string),
+        name: files[index].name,
         state: 'init'
-      }
+      },
+      cropFileName: files[index].name
     });
   }
 
@@ -848,7 +851,8 @@ export default class ImageControl extends React.Component<
       }
 
       return this.setState({
-        cropFile: file
+        cropFile: file,
+        cropFileName: file.name
       });
     }
 
@@ -899,6 +903,7 @@ export default class ImageControl extends React.Component<
     this.setState(
       {
         cropFile: undefined,
+        cropFileName: undefined,
         locked: false,
         lockedReason: ''
       },
@@ -1086,7 +1091,7 @@ export default class ImageControl extends React.Component<
     }
 
     // Note: File类型字段放在后面，可以支持第三方云存储鉴权
-    fd.append(fileField, file, (file as File).name);
+    fd.append(fileField, file, (file as File).name || this.state.cropFileName);
 
     const env = this.props.env;
 

package/src/renderers/Form/InputMonthRange.tsx

@@ -170,6 +170,7 @@ export default class MonthRangeControl extends React.Component<MonthRangeProps>
       maxDuration,
       data,
       format,
+      env,
       ...rest
     } = this.props;
 

package/src/renderers/Form/InputQuarterRange.tsx

@@ -26,6 +26,7 @@ export default class QuarterRangeControl extends InputDateRange {
       maxDuration,
       data,
       format,
+      env,
       ...rest
     } = this.props;
 

package/src/renderers/Form/InputRating.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import {FormItem, FormControlProps, FormBaseControl} from './Item';
-import Rating from '../../components/Rating';
+import Rating, {textPositionType} from '../../components/Rating';
 
 /**
  * Rating
@@ -23,6 +23,50 @@ export interface RatingControlSchema extends FormBaseControl {
    * 是否允许再次点击后清除
    */
   allowClear?: boolean;
+
+  /**
+   * 是否只读
+   */
+  readonly?: boolean;
+
+  /**
+   * 星星被选中的颜色
+   */
+  // colors?: string | {
+  //   [propName: string | number]: string;
+  // };
+
+  colors?: string | {[propName: string]: string};
+
+  /**
+   * 未被选中的星星的颜色
+   */
+  inactiveColor?: string;
+
+  /**
+   * 星星被选中时的提示文字
+   */
+  texts?: {[propName: string]: string};
+
+  /**
+   * 文字的位置
+   */
+  textPosition?: textPositionType;
+
+  /**
+   * 自定义字符
+   */
+  char?: string;
+
+  /**
+   * 自定义字符类名
+   */
+  charClassName?: string;
+
+  /**
+   * 自定义文字类名
+   */
+  textClassName?: string;
 }
 
 export interface RatingProps extends FormControlProps {
@@ -49,8 +93,15 @@ export default class RatingControl extends React.Component<RatingProps, any> {
       readOnly,
       disabled,
       onChange,
-      size,
+      onHoverChange,
       allowClear,
+      char,
+      inactiveColor,
+      colors,
+      texts,
+      charClassName,
+      textClassName,
+      textPosition,
       classnames: cx
     } = this.props;
 
@@ -64,7 +115,19 @@ export default class RatingControl extends React.Component<RatingProps, any> {
           half={half}
           allowClear={allowClear}
           readOnly={readOnly}
-          onChange={(value: any) => onChange(value)}
+          char={char}
+          inactiveColor={inactiveColor}
+          colors={colors}
+          texts={texts}
+          charClassName={charClassName}
+          textClassName={textClassName}
+          textPosition={textPosition}
+          onChange={(value: number) => {
+            onChange && onChange(value);
+          }}
+          onHoverChange={(value: number) => {
+            onHoverChange && onHoverChange(value);
+          }}
         />
       </div>
     );

package/src/renderers/Form/InputYearRange.tsx

@@ -26,6 +26,7 @@ export default class YearRangeControl extends InputDateRange {
       maxDuration,
       data,
       format,
+      env,
       ...rest
     } = this.props;
 

package/src/renderers/Form/Item.tsx

@@ -519,7 +519,8 @@ export class FormItemWrap extends React.Component<FormItemProps> {
         renderDescription,
         hint,
         data,
-        showErrorMsg
+        showErrorMsg,
+        useMobileUI
       } = props;
 
       // 强制不渲染 label 的话
@@ -575,6 +576,7 @@ export class FormItemWrap extends React.Component<FormItemProps> {
                       type: 'remark',
                       icon: labelRemark.icon || 'warning-mark',
                       tooltip: labelRemark,
+                      useMobileUI,
                       className: cx(`Form-labelRemark`),
                       container: props.popOverContainer
                         ? props.popOverContainer
@@ -608,6 +610,7 @@ export class FormItemWrap extends React.Component<FormItemProps> {
                   icon: remark.icon || 'warning-mark',
                   tooltip: remark,
                   className: cx(`Form-remark`),
+                  useMobileUI,
                   container: props.popOverContainer
                     ? props.popOverContainer
                     : env && env.getModalContainer
@@ -664,7 +667,8 @@ export class FormItemWrap extends React.Component<FormItemProps> {
         renderDescription,
         hint,
         data,
-        showErrorMsg
+        showErrorMsg,
+        useMobileUI
       } = props;
 
       description = description || desc;
@@ -700,6 +704,7 @@ export class FormItemWrap extends React.Component<FormItemProps> {
                       icon: labelRemark.icon || 'warning-mark',
                       tooltip: labelRemark,
                       className: cx(`Form-lableRemark`),
+                      useMobileUI,
                       container: props.popOverContainer
                         ? props.popOverContainer
                         : env && env.getModalContainer
@@ -725,6 +730,7 @@ export class FormItemWrap extends React.Component<FormItemProps> {
                 icon: remark.icon || 'warning-mark',
                 className: cx(`Form-remark`),
                 tooltip: remark,
+                useMobileUI,
                 container:
                   env && env.getModalContainer
                     ? env.getModalContainer
@@ -779,7 +785,8 @@ export class FormItemWrap extends React.Component<FormItemProps> {
         renderLabel,
         renderDescription,
         data,
-        showErrorMsg
+        showErrorMsg,
+        useMobileUI
       } = props;
 
       description = description || desc;
@@ -815,6 +822,7 @@ export class FormItemWrap extends React.Component<FormItemProps> {
                       icon: labelRemark.icon || 'warning-mark',
                       tooltip: labelRemark,
                       className: cx(`Form-lableRemark`),
+                      useMobileUI,
                       container: props.popOverContainer
                         ? props.popOverContainer
                         : env && env.getModalContainer
@@ -841,6 +849,7 @@ export class FormItemWrap extends React.Component<FormItemProps> {
                   icon: remark.icon || 'warning-mark',
                   className: cx(`Form-remark`),
                   tooltip: remark,
+                  useMobileUI,
                   container: props.popOverContainer
                     ? props.popOverContainer
                     : env && env.getModalContainer
@@ -897,7 +906,8 @@ export class FormItemWrap extends React.Component<FormItemProps> {
         renderDescription,
         hint,
         data,
-        showErrorMsg
+        showErrorMsg,
+        useMobileUI
       } = props;
 
       description = description || desc;
@@ -932,6 +942,7 @@ export class FormItemWrap extends React.Component<FormItemProps> {
                         icon: labelRemark.icon || 'warning-mark',
                         tooltip: labelRemark,
                         className: cx(`Form-lableRemark`),
+                        useMobileUI,
                         container: props.popOverContainer
                           ? props.popOverContainer
                           : env && env.getModalContainer

package/src/renderers/Form/NestedSelect.tsx

@@ -647,7 +647,7 @@ export default class NestedSelectControl extends React.Component<
             multiple
               ? selectedOptions
               : selectedOptions.length
-              ? this.renderValue(selectedOptions[0])
+              ? selectedOptions[0]
               : ''
           }
           onResultClick={this.handleOutClick}

package/src/renderers/Form/Select.tsx

@@ -314,7 +314,6 @@ export default class SelectControl extends React.Component<SelectProps, any> {
         ) : (
           <Select
             {...rest}
-            useMobileUI={env.useMobileUI}
             borderMode={borderMode}
             placeholder={placeholder}
             multiple={multiple || multi}