amis 1.5.6-beta.5 → 1.6.0

package/src/renderers/Form/InputDate.tsx

@@ -1,12 +1,16 @@
 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';
 import {SchemaObject} from '../../Schema';
-import {createObject, anyChanged} from '../../utils/helper';
+import {createObject, anyChanged, isMobile} from '../../utils/helper';
 
 export interface InputDateBaseControlSchema extends FormBaseControl {
   /**
@@ -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() {
@@ -427,6 +447,7 @@ export default class DateControl extends React.PureComponent<
       env,
       largeMode,
       render,
+      useMobileUI,
       ...rest
     } = this.props;
 
@@ -434,15 +455,22 @@ export default class DateControl extends React.PureComponent<
       format = timeFormat;
     }
 
+    const mobileUI = useMobileUI && isMobile();
+
     return (
       <div className={cx(`DateControl`, className)}>
         <DatePicker
           {...rest}
+          useMobileUI={useMobileUI}
+          popOverContainer={
+            mobileUI && env && env.getModalContainer
+              ? env.getModalContainer
+              : undefined
+          }
           timeFormat={timeFormat}
           format={valueFormat || format}
           {...this.state}
           classnames={cx}
-          useMobileUI={env.useMobileUI}
           schedules={this.state.schedules}
           largeMode={largeMode}
           onScheduleClick={this.onScheduleClick.bind(this)}

package/src/renderers/Form/InputDateRange.tsx

@@ -6,6 +6,7 @@ import 'moment/locale/zh-cn';
 import DateRangePicker, {
   DateRangePicker as BaseDateRangePicker
 } from '../../components/DateRangePicker';
+import {isMobile} from '../../utils/helper';
 
 /**
  * DateRange 日期范围控件
@@ -173,21 +174,27 @@ export default class DateRangeControl extends React.Component<DateRangeProps> {
       data,
       format,
       env,
+      useMobileUI,
       ...rest
     } = this.props;
-
+    const mobileUI = useMobileUI && isMobile();
     return (
       <div className={cx(`${ns}DateRangeControl`, className)}>
         <DateRangePicker
           {...rest}
+          useMobileUI={useMobileUI}
           classPrefix={ns}
+          popOverContainer={
+            mobileUI && env && env.getModalContainer
+              ? env.getModalContainer
+              : undefined
+          }
           data={data}
           format={format}
           minDate={minDate ? filterDate(minDate, data, format) : undefined}
           maxDate={maxDate ? filterDate(maxDate, data, format) : undefined}
           minDuration={minDuration ? parseDuration(minDuration) : undefined}
           maxDuration={maxDuration ? parseDuration(maxDuration) : undefined}
-          useMobileUI={env.useMobileUI}
         />
       </div>
     );

package/src/renderers/Form/InputFormula.tsx

@@ -5,7 +5,7 @@ import type {FuncGroup, VariableItem} from '../../components/formula/Editor';
 
 /**
  * InputFormula 公式编辑器
- * 文档：https://baidu.gitee.io/amis/docs/components/form/input-formula
+ * 文档：https://baidu.gitee.io/amis/zh-CN/components/form/input-formula
  */
 export interface InputFormulaControlSchema extends FormBaseControl {
   type: 'input-formula';
@@ -22,6 +22,9 @@ export interface InputFormulaControlSchema extends FormBaseControl {
    */
   variables: Array<VariableItem>;
 
+  /**
+   * 变量展现模式，可选值：'tabs' ｜ 'tree'
+   */
   variableMode?: 'tabs' | 'tree';
 
   /**
@@ -56,19 +59,21 @@ export class InputFormulaRenderer extends React.Component<InputFormulaProps> {
       variables,
       variableMode,
       functions,
-      header
+      header,
+      label,
+      value
     } = this.props;
 
     return (
       <FormulaPicker
-        value={selectedOptions}
+        value={value}
         disabled={disabled}
         onChange={onChange}
         evalMode={evalMode}
         variables={variables}
         variableMode={variableMode}
         functions={functions}
-        header={header}
+        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

@@ -185,7 +185,6 @@ export default class MonthRangeControl extends React.Component<MonthRangeProps>
           maxDate={maxDate ? filterDate(maxDate, data, format) : undefined}
           minDuration={minDuration ? parseDuration(minDuration) : undefined}
           maxDuration={maxDuration ? parseDuration(maxDuration) : undefined}
-          useMobileUI={env.useMobileUI}
         />
       </div>
     );

package/src/renderers/Form/InputQuarterRange.tsx

@@ -45,7 +45,6 @@ export default class QuarterRangeControl extends InputDateRange {
           maxDate={maxDate ? filterDate(maxDate, data, format) : undefined}
           minDuration={minDuration ? parseDuration(minDuration) : undefined}
           maxDuration={maxDuration ? parseDuration(maxDuration) : undefined}
-          useMobileUI={env.useMobileUI}
         />
       </div>
     );

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

@@ -45,7 +45,6 @@ export default class YearRangeControl extends InputDateRange {
           maxDate={maxDate ? filterDate(maxDate, data, format) : undefined}
           minDuration={minDuration ? parseDuration(minDuration) : undefined}
           maxDuration={maxDuration ? parseDuration(maxDuration) : undefined}
-          useMobileUI={env.useMobileUI}
         />
       </div>
     );

package/src/renderers/Form/Item.tsx

@@ -9,7 +9,13 @@ import {
   TestFunc,
   RendererConfig
 } from '../../factory';
-import {anyChanged, ucFirst, getWidthRate, autobind} from '../../utils/helper';
+import {
+  anyChanged,
+  ucFirst,
+  getWidthRate,
+  autobind,
+  isMobile
+} from '../../utils/helper';
 import {observer} from 'mobx-react';
 import {FormHorizontal, FormSchema, FormSchemaHorizontal} from '.';
 import {Api, Schema} from '../../types';
@@ -456,9 +462,11 @@ export class FormItemWrap extends React.Component<FormItemProps> {
       sizeMutable,
       size,
       defaultSize,
+      useMobileUI,
       ...rest
     } = this.props;
 
+    const mobileUI = useMobileUI && isMobile();
     if (renderControl) {
       const controlSize = size || defaultSize;
       return renderControl({
@@ -470,7 +478,7 @@ export class FormItemWrap extends React.Component<FormItemProps> {
         className: cx(
           `Form-control`,
           {
-            'is-inline': !!rest.inline,
+            'is-inline': !!rest.inline && !mobileUI,
             'is-error': model && !model.valid,
             [`Form-control--withSize Form-control--size${ucFirst(
               controlSize
@@ -519,7 +527,8 @@ export class FormItemWrap extends React.Component<FormItemProps> {
         renderDescription,
         hint,
         data,
-        showErrorMsg
+        showErrorMsg,
+        useMobileUI
       } = props;
 
       // 强制不渲染 label 的话
@@ -575,6 +584,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 +618,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 +675,8 @@ export class FormItemWrap extends React.Component<FormItemProps> {
         renderDescription,
         hint,
         data,
-        showErrorMsg
+        showErrorMsg,
+        useMobileUI
       } = props;
 
       description = description || desc;
@@ -700,6 +712,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 +738,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 +793,8 @@ export class FormItemWrap extends React.Component<FormItemProps> {
         renderLabel,
         renderDescription,
         data,
-        showErrorMsg
+        showErrorMsg,
+        useMobileUI
       } = props;
 
       description = description || desc;
@@ -815,6 +830,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 +857,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 +914,8 @@ export class FormItemWrap extends React.Component<FormItemProps> {
         renderDescription,
         hint,
         data,
-        showErrorMsg
+        showErrorMsg,
+        useMobileUI
       } = props;
 
       description = description || desc;
@@ -932,6 +950,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
@@ -1194,14 +1213,16 @@ export function asFormItem(config: Omit<FormItemConfig, 'component'>) {
               type,
               size,
               defaultSize,
+              useMobileUI,
               ...rest
             } = this.props;
 
             const controlSize = size || defaultSize;
-
+            const mobileUI = useMobileUI && isMobile();
             return (
               <Control
                 {...rest}
+                useMobileUI={useMobileUI}
                 onOpenDialog={this.handleOpenDialog}
                 size={config.sizeMutable !== false ? undefined : size}
                 onFocus={this.handleFocus}
@@ -1214,7 +1235,7 @@ export function asFormItem(config: Omit<FormItemConfig, 'component'>) {
                 className={cx(
                   `Form-control`,
                   {
-                    'is-inline': !!rest.inline,
+                    'is-inline': !!rest.inline && !mobileUI,
                     'is-error': model && !model.valid,
                     [`Form-control--withSize Form-control--size${ucFirst(
                       controlSize

package/src/renderers/Form/NestedSelect.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import Overlay from '../../components/Overlay';
 import Checkbox from '../../components/Checkbox';
 import PopOver from '../../components/PopOver';
+import PopUp from '../../components/PopUp';
 import {Icon} from '../../components/icons';
 import {
   autobind,
@@ -10,7 +11,8 @@ import {
   string2regExp,
   getTreeAncestors,
   getTreeParent,
-  ucFirst
+  ucFirst,
+  isMobile
 } from '../../utils/helper';
 import {
   FormOptionsControl,
@@ -24,6 +26,7 @@ import xor from 'lodash/xor';
 import union from 'lodash/union';
 import compact from 'lodash/compact';
 import {RootClose} from '../../utils/RootClose';
+import Cascader from '../../components/Cascader';
 
 /**
  * Nested Select
@@ -68,6 +71,7 @@ export interface NestedSelectProps extends OptionsControlProps {
   withChildren?: boolean;
   onlyChildren?: boolean;
   hideNodePathLabel?: boolean;
+  useMobileUI?: boolean;
 }
 
 export interface NestedSelectState {
@@ -625,12 +629,16 @@ export default class NestedSelectControl extends React.Component<
       selectedOptions,
       clearable,
       loading,
-      borderMode
+      borderMode,
+      useMobileUI,
+      env
     } = this.props;
 
+    const mobileUI = useMobileUI && isMobile();
     return (
       <div className={cx('NestedSelectControl', className)}>
         <ResultBox
+          useMobileUI={useMobileUI}
           disabled={disabled}
           ref={this.domRef}
           placeholder={__(placeholder || '空')}
@@ -647,7 +655,7 @@ export default class NestedSelectControl extends React.Component<
             multiple
               ? selectedOptions
               : selectedOptions.length
-              ? this.renderValue(selectedOptions[0])
+              ? selectedOptions[0]
               : ''
           }
           onResultClick={this.handleOutClick}
@@ -665,7 +673,27 @@ export default class NestedSelectControl extends React.Component<
         >
           {loading ? <Spinner size="sm" /> : undefined}
         </ResultBox>
-        {this.state.isOpened ? this.renderOuter() : null}
+        {mobileUI ? (
+          <PopUp
+            className={cx(`NestedSelect-popup`)}
+            container={
+              env && env.getModalContainer ? env.getModalContainer : undefined
+            }
+            isShow={this.state.isOpened}
+            onHide={this.close}
+            showConfirm={false}
+            showClose={false}
+          >
+            <Cascader
+              onClose={this.close}
+              {...this.props}
+              options={this.props.options.slice()}
+              value={selectedOptions}
+            />
+          </PopUp>
+        ) : this.state.isOpened ? (
+          this.renderOuter()
+        ) : null}
       </div>
     );
   }