amis 1.5.6-beta.0 → 1.5.7

package/src/renderers/CRUD.tsx

@@ -1532,9 +1532,7 @@ export default class CRUD extends React.Component<CRUDProps, any> {
   renderBulkActions(childProps: any) {
     let {bulkActions, itemActions, store, render, classnames: cx} = this.props;
 
-    const items = childProps.items;
-
-    if (!items.length || !bulkActions || !bulkActions.length) {
+    if (!bulkActions || !bulkActions.length) {
       return null;
     }
 

package/src/renderers/Collapse.tsx

@@ -1,12 +1,7 @@
 import React from 'react';
 import {Renderer, RendererProps} from '../factory';
 import {Collapse as BasicCollapse} from '../components/Collapse';
-import {
-  BaseSchema,
-  SchemaCollection,
-  SchemaTpl,
-  SchemaObject
-} from '../Schema';
+import {BaseSchema, SchemaCollection, SchemaTpl, SchemaObject} from '../Schema';
 
 /**
  * Collapse 折叠渲染器，格式说明。
@@ -63,9 +58,9 @@ export interface CollapseSchema extends BaseSchema {
    */
   showArrow?: boolean;
 
-   /**
-    * 自定义切换图标
-    */
+  /**
+   * 自定义切换图标
+   */
   expandIcon?: SchemaObject;
 
   /**
@@ -104,14 +99,9 @@ export interface CollapseProps
   children?: JSX.Element | ((props?: any) => JSX.Element);
 }
 
-export default class Collapse extends React.Component<
-  CollapseProps,
-  {}
-> {
-
+export default class Collapse extends React.Component<CollapseProps, {}> {
   render() {
     const {
-      key,
       id,
       classPrefix: ns,
       classnames: cx,
@@ -144,7 +134,6 @@ export default class Collapse extends React.Component<
 
     return (
       <BasicCollapse
-        key={key}
         id={id}
         classnames={cx}
         classPrefix={ns}
@@ -162,19 +151,30 @@ export default class Collapse extends React.Component<
         showArrow={showArrow}
         disabled={disabled}
         propsUpdate={propsUpdate}
-        expandIcon={expandIcon ? render('arrow-icon', expandIcon || '', {className: cx('Collapse-icon-tranform')}) : null}
-        collapseHeader={collapseTitle || collapseHeader ? render('heading', collapseTitle || collapseHeader) : null}
+        expandIcon={
+          expandIcon
+            ? render('arrow-icon', expandIcon || '', {
+                className: cx('Collapse-icon-tranform')
+              })
+            : null
+        }
+        collapseHeader={
+          collapseTitle || collapseHeader
+            ? render('heading', collapseTitle || collapseHeader)
+            : null
+        }
         header={render('heading', title || header || '')}
-        body={children
-          ? typeof children === 'function'
-            ? children(this.props)
-            : children
-          : body
-          ? render('body', body)
-          : null}
+        body={
+          children
+            ? typeof children === 'function'
+              ? children(this.props)
+              : children
+            : body
+            ? render('body', body)
+            : null
+        }
         onCollapse={onCollapse}
-      >
-      </BasicCollapse>
+      ></BasicCollapse>
     );
   }
 }

package/src/renderers/CollapseGroup.tsx

@@ -41,11 +41,13 @@ export interface CollapseGroupSchema extends BaseSchema {
 export interface CollapseGroupProps
   extends RendererProps,
     Omit<CollapseGroupSchema, 'type' | 'className'> {
-
   children?: JSX.Element | ((props?: any) => JSX.Element);
 }
 
-export class CollapseGroupRender extends React.Component<CollapseGroupProps, {}> {
+export class CollapseGroupRender extends React.Component<
+  CollapseGroupProps,
+  {}
+> {
   constructor(props: CollapseGroupProps) {
     super(props);
   }
@@ -61,19 +63,18 @@ export class CollapseGroupRender extends React.Component<CollapseGroupProps, {}>
     } = this.props;
     return (
       <CollapseGroup
-          defaultActiveKey={defaultActiveKey}
-          accordion={accordion}
-          expandIcon={expandIcon}
-          expandIconPosition={expandIconPosition}
-          className={className}
-        >
-          {render('body', body || '')}
-        </CollapseGroup>
-    )
+        defaultActiveKey={defaultActiveKey}
+        accordion={accordion}
+        expandIcon={expandIcon}
+        expandIconPosition={expandIconPosition}
+        className={className}
+      >
+        {render('body', body || '')}
+      </CollapseGroup>
+    );
   }
 }
 
-
 @Renderer({
   type: 'collapse-group'
 })

package/src/renderers/Form/InputColor.tsx

@@ -68,12 +68,11 @@ 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>}>
-          <ColorPicker classPrefix={ns} {...rest} value={value || ''} />
+          <ColorPicker classPrefix={ns} {...rest} value={value || ''} useMobileUI={env.useMobileUI}/>
         </Suspense>
       </div>
     );

package/src/renderers/Form/InputDate.tsx

@@ -424,6 +424,7 @@ export default class DateControl extends React.PureComponent<
       format,
       timeFormat,
       valueFormat,
+      env,
       largeMode,
       render,
       ...rest
@@ -441,6 +442,7 @@ export default class DateControl extends React.PureComponent<
           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

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

@@ -0,0 +1,75 @@
+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/docs/components/form/input-formula
+ */
+export interface InputFormulaControlSchema extends FormBaseControl {
+  type: 'input-formula';
+
+  /**
+   * evalMode 即直接就是表达式，否则
+   * 需要 ${这里面才是表达式}
+   * 默认为 true
+   */
+  evalMode?: boolean;
+
+  /**
+   * 用于提示的变量集合，默认为空
+   */
+  variables: Array<VariableItem>;
+
+  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
+    } = this.props;
+
+    return (
+      <FormulaPicker
+        value={selectedOptions}
+        disabled={disabled}
+        onChange={onChange}
+        evalMode={evalMode}
+        variables={variables}
+        variableMode={variableMode}
+        functions={functions}
+        header={header}
+      />
+    );
+  }
+}

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;
 
@@ -184,6 +185,7 @@ 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

@@ -26,6 +26,7 @@ export default class QuarterRangeControl extends InputDateRange {
       maxDuration,
       data,
       format,
+      env,
       ...rest
     } = this.props;
 
@@ -44,6 +45,7 @@ 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

@@ -26,6 +26,7 @@ export default class YearRangeControl extends InputDateRange {
       maxDuration,
       data,
       format,
+      env,
       ...rest
     } = this.props;
 
@@ -44,6 +45,7 @@ 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/TreeSelect.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import Overlay from '../../components/Overlay';
 import PopOver from '../../components/PopOver';
+import PopUp from '../../components/PopUp';
 
 import {
   OptionsControl,
@@ -17,7 +18,7 @@ import {Api} from '../../types';
 import {isEffectiveApi} from '../../utils/api';
 import Spinner from '../../components/Spinner';
 import ResultBox from '../../components/ResultBox';
-import {autobind, getTreeAncestors} from '../../utils/helper';
+import {autobind, getTreeAncestors, isMobile} from '../../utils/helper';
 import {findDOMNode} from 'react-dom';
 import {normalizeOptions} from '../../components/Select';
 
@@ -90,6 +91,7 @@ export interface TreeSelectProps extends OptionsControlProps {
   hideNodePathLabel?: boolean;
   enableNodePath?: boolean;
   pathSeparator?: string;
+  useMobileUI?: boolean;
 }
 
 export interface TreeSelectState {
@@ -502,67 +504,51 @@ export default class TreeSelectControl extends React.Component<
         : options;
 
     return (
-      <Overlay
-        container={popOverContainer || (() => this.container.current)}
-        target={() => this.target}
-        show
-      >
-        <PopOver
-          classPrefix={ns}
-          className={`${ns}TreeSelect-popover`}
-          style={{
-            minWidth: this.target ? this.target.offsetWidth : undefined
-          }}
-          onHide={this.close}
-          overlay
-        >
-          <TreeSelector
-            classPrefix={ns}
-            onlyChildren={onlyChildren}
-            labelField={labelField}
-            valueField={valueField}
-            disabled={disabled}
-            onChange={this.handleChange}
-            joinValues={joinValues}
-            extractValue={extractValue}
-            delimiter={delimiter}
-            placeholder={__(optionsPlaceholder)}
-            options={filtedOptions}
-            highlightTxt={this.state.inputValue}
-            multiple={multiple}
-            initiallyOpen={initiallyOpen}
-            unfoldedLevel={unfoldedLevel}
-            withChildren={withChildren}
-            rootLabel={__(rootLabel)}
-            rootValue={rootValue}
-            showIcon={showIcon}
-            showRadio={showRadio}
-            cascade={cascade}
-            foldedField="collapsed"
-            hideRoot
-            value={value || ''}
-            nodePath={nodePath}
-            enableNodePath={enableNodePath}
-            pathSeparator={pathSeparator}
-            maxLength={maxLength}
-            minLength={minLength}
-            onAdd={onAdd}
-            creatable={creatable}
-            createTip={createTip}
-            rootCreatable={rootCreatable}
-            rootCreateTip={rootCreateTip}
-            onEdit={onEdit}
-            editable={editable}
-            editTip={editTip}
-            removable={removable}
-            removeTip={removeTip}
-            onDelete={onDelete}
-            bultinCUD={!addControls && !editControls}
-            onDeferLoad={deferLoad}
-            onExpandTree={expandTreeOptions}
-          />
-        </PopOver>
-      </Overlay>
+      <TreeSelector
+        classPrefix={ns}
+        onlyChildren={onlyChildren}
+        labelField={labelField}
+        valueField={valueField}
+        disabled={disabled}
+        onChange={this.handleChange}
+        joinValues={joinValues}
+        extractValue={extractValue}
+        delimiter={delimiter}
+        placeholder={__(optionsPlaceholder)}
+        options={filtedOptions}
+        highlightTxt={this.state.inputValue}
+        multiple={multiple}
+        initiallyOpen={initiallyOpen}
+        unfoldedLevel={unfoldedLevel}
+        withChildren={withChildren}
+        rootLabel={__(rootLabel)}
+        rootValue={rootValue}
+        showIcon={showIcon}
+        showRadio={showRadio}
+        cascade={cascade}
+        foldedField="collapsed"
+        hideRoot
+        value={value || ''}
+        nodePath={nodePath}
+        enableNodePath={enableNodePath}
+        pathSeparator={pathSeparator}
+        maxLength={maxLength}
+        minLength={minLength}
+        onAdd={onAdd}
+        creatable={creatable}
+        createTip={createTip}
+        rootCreatable={rootCreatable}
+        rootCreateTip={rootCreateTip}
+        onEdit={onEdit}
+        editable={editable}
+        editTip={editTip}
+        removable={removable}
+        removeTip={removeTip}
+        onDelete={onDelete}
+        bultinCUD={!addControls && !editControls}
+        onDeferLoad={deferLoad}
+        onExpandTree={expandTreeOptions}
+      />
     );
   }
 
@@ -581,9 +567,13 @@ export default class TreeSelectControl extends React.Component<
       autoComplete,
       selectedOptions,
       placeholder,
+      popOverContainer,
+      env,
       translate: __
     } = this.props;
 
+    const { isOpened } = this.state;
+    const { useMobileUI } = env;
     return (
       <div ref={this.container} className={cx(`TreeSelectControl`, className)}>
         <ResultBox
@@ -622,7 +612,36 @@ export default class TreeSelectControl extends React.Component<
         >
           {loading ? <Spinner size="sm" /> : undefined}
         </ResultBox>
-        {this.state.isOpened ? this.renderOuter() : null}
+        { !(useMobileUI && isMobile()) && isOpened ? (
+          <Overlay
+            container={popOverContainer || (() => this.container.current)}
+            target={() => this.target}
+            show
+          >
+            <PopOver
+              classPrefix={ns}
+              className={`${ns}TreeSelect-popover`}
+              style={{
+                minWidth: this.target ? this.target.offsetWidth : undefined
+              }}
+              onHide={this.close}
+              overlay
+            >
+              {this.renderOuter()}
+            </PopOver>
+          </Overlay>
+        ) : null}
+        {
+          useMobileUI && isMobile() && (
+            <PopUp
+              className={cx(`${ns}TreeSelect-popup`)}
+              isShow={isOpened}
+              onHide={this.close}
+            >
+              {this.renderOuter()}
+            </PopUp>
+          )
+        }
       </div>
     );
   }

package/src/renderers/Form/index.tsx

@@ -398,7 +398,8 @@ export default class Form extends React.Component<FormProps, object> {
     'simpleMode',
     'inputOnly',
     'value',
-    'actions'
+    'actions',
+    'multiple'
   ];
 
   hooks: {

package/src/renderers/Json.tsx

@@ -94,6 +94,11 @@ export class JSONField extends React.Component<JSONProps, object> {
     let data = value;
     if (source !== undefined && isPureVariable(source)) {
       data = resolveVariableAndFilter(source, this.props.data, '| raw');
+    } else if (typeof value === 'string') {
+      // 尝试解析 json
+      try {
+        data = JSON.parse(value);
+      } catch (e) {}
     }
 
     let jsonThemeValue = jsonTheme;

package/src/renderers/Nav.tsx

@@ -415,7 +415,10 @@ export class Navigation extends React.Component<
               />
             ) : hasSub ? (
               <span
-                onClick={() => this.toggleLink(link)}
+                onClick={e => {
+                  this.toggleLink(link);
+                  e.stopPropagation();
+                }}
                 className={cx('Nav-itemToggler', togglerClassName)}
               >
                 <Icon icon="caret" className="icon" />

package/src/renderers/Steps.tsx

@@ -83,9 +83,10 @@ export function StepsCmpt(props: StepsProps) {
     data,
     source,
     config,
-    render
+    render,
+    env
   } = props;
-  
+
   const stepsRow =
     (resolveVariable(source, data) as Array<StepSchema>) ||
     config ||
@@ -140,6 +141,7 @@ export function StepsCmpt(props: StepsProps) {
       className={className}
       status={status}
       mode={mode}
+      useMobileUI={env.useMobileUI}
     ></Steps>
   );
 }

package/src/renderers/Table/TableRow.tsx

@@ -45,8 +45,10 @@ export class TableRow extends React.Component<TableRowProps> {
     const {itemAction, onAction, item} = this.props;
     if (itemAction) {
       onAction && onAction(e, itemAction, item?.data);
+      item.toggle();
+    } else {
+      this.props.onCheck(this.props.item);
     }
-    this.props.onCheck(this.props.item);
   }
 
   handleAction(e: React.UIEvent<any>, action: Action, ctx: any) {