amis 1.6.1 → 1.6.2

package/src/SchemaRenderer.tsx

@@ -85,7 +85,7 @@ class BroadcastCmpt extends React.Component<BroadcastCmptProps> {
     e: React.MouseEvent<any>,
     data: any
   ): Promise<RendererEvent<any> | undefined> {
-    return await this.props.env.dispatchEvent(e, this.ref, data);
+    return await this.props.env.dispatchEvent(e, this.ref, this.context, data);
   }
 
   @autobind
@@ -99,13 +99,19 @@ class BroadcastCmpt extends React.Component<BroadcastCmptProps> {
 
   render() {
     const {component: Component, ...rest} = this.props;
-    return (
+
+    const isClassComponent = Component.prototype?.isReactComponent;
+
+    // 函数组件不支持 ref https://reactjs.org/docs/refs-and-the-dom.html#refs-and-function-components
+
+    return isClassComponent ? (
       <Component
         ref={this.childRef}
         {...rest}
-        scoped={this.context}
         dispatchEvent={this.triggerEvent}
       />
+    ) : (
+      <Component {...rest} dispatchEvent={this.triggerEvent} />
     );
   }
 }

package/src/actions/CmptAction.ts

@@ -24,7 +24,7 @@ export class CmptAction implements Action {
     // 根据唯一ID查找指定组件
     const component =
       renderer.props.$schema.id !== action.componentId
-        ? renderer.props.scoped?.getComponentById(action.componentId)
+        ? event.context.scoped?.getComponentById(action.componentId)
         : renderer;
 
     // 执行组件动作

package/src/components/CodeMirror.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import 'codemirror/lib/codemirror.css';
+// import 'codemirror/lib/codemirror.css';
 import type CodeMirror from 'codemirror';
 import {autobind} from '../utils/helper';
 import {resizeSensor} from '../utils/resize-sensor';

package/src/components/DatePicker.tsx

@@ -14,7 +14,7 @@ import Overlay from './Overlay';
 import {ClassNamesFn, themeable, ThemeProps} from '../theme';
 import {PlainObject} from '../types';
 import Calendar from './calendar/Calendar';
-import 'react-datetime/css/react-datetime.css';
+// import 'react-datetime/css/react-datetime.css';
 import {localeable, LocaleProps, TranslateFn} from '../locale';
 import {isMobile, ucFirst} from '../utils/helper';
 import CalendarMobile from './CalendarMobile';
@@ -581,25 +581,36 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
     const isOpened = this.state.isOpened;
     let date: moment.Moment | undefined = this.state.value;
 
-    const calendarMobile = <CalendarMobile
-      isDatePicker={true}
-      timeFormat={timeFormat}
-      inputFormat={inputFormat}
-      startDate={date}
-      defaultDate={date}
-      minDate={minDate}
-      maxDate={maxDate}
-      dateFormat={dateFormat}
-      embed={embed}
-      viewMode={viewMode}
-      close={this.close}
-      confirm={this.handleChange}
-      footerExtra={this.renderShortCuts(shortcuts)}
-      showViewMode={viewMode === 'quarters' || viewMode === 'months' ? 'years' : 'months'}
-      timeConstraints={timeConstraints}
-    />;
-    const CalendarMobileTitle = <div className={`${ns}CalendarMobile-title`}>{__('Calendar.datepicker')}</div>;
-    const useCalendarMobile = useMobileUI && isMobile() && ['days', 'months', 'quarters'].indexOf(viewMode) > -1;
+    const calendarMobile = (
+      <CalendarMobile
+        isDatePicker={true}
+        timeFormat={timeFormat}
+        inputFormat={inputFormat}
+        startDate={date}
+        defaultDate={date}
+        minDate={minDate}
+        maxDate={maxDate}
+        dateFormat={dateFormat}
+        embed={embed}
+        viewMode={viewMode}
+        close={this.close}
+        confirm={this.handleChange}
+        footerExtra={this.renderShortCuts(shortcuts)}
+        showViewMode={
+          viewMode === 'quarters' || viewMode === 'months' ? 'years' : 'months'
+        }
+        timeConstraints={timeConstraints}
+      />
+    );
+    const CalendarMobileTitle = (
+      <div className={`${ns}CalendarMobile-title`}>
+        {__('Calendar.datepicker')}
+      </div>
+    );
+    const useCalendarMobile =
+      useMobileUI &&
+      isMobile() &&
+      ['days', 'months', 'quarters'].indexOf(viewMode) > -1;
 
     if (embed) {
       let schedulesData: DateProps['schedules'] = undefined;
@@ -736,8 +747,8 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
           </Overlay>
         ) : null}
         {useMobileUI && isMobile() ? (
-          mobileCalendarMode === 'calendar' && useCalendarMobile
-          ? <PopUp
+          mobileCalendarMode === 'calendar' && useCalendarMobile ? (
+            <PopUp
               isShow={isOpened}
               className={cx(`${ns}CalendarMobile-pop`)}
               onHide={this.close}
@@ -745,34 +756,36 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
             >
               {calendarMobile}
             </PopUp>
-          : <PopUp
-            className={cx(`${ns}DatePicker-popup DatePicker-mobile`)}
-            container={popOverContainer}
-            isShow={isOpened}
-            showClose={false}
-            onHide={this.handleClick}
-          >
-            {this.renderShortCuts(shortcuts)}
-
-            <Calendar
-              value={date}
-              onChange={this.handleChange}
-              requiredConfirm={!!(dateFormat && timeFormat)}
-              dateFormat={dateFormat}
-              inputFormat={inputFormat}
-              timeFormat={timeFormat}
-              isValidDate={this.checkIsValidDate}
-              viewMode={viewMode}
-              timeConstraints={timeConstraints}
-              input={false}
-              onClose={this.close}
-              locale={locale}
-              minDate={minDate}
-              maxDate={maxDate}
-              useMobileUI={useMobileUI}
-              // utc={utc}
-            />
-          </PopUp>
+          ) : (
+            <PopUp
+              className={cx(`${ns}DatePicker-popup DatePicker-mobile`)}
+              container={popOverContainer}
+              isShow={isOpened}
+              showClose={false}
+              onHide={this.handleClick}
+            >
+              {this.renderShortCuts(shortcuts)}
+
+              <Calendar
+                value={date}
+                onChange={this.handleChange}
+                requiredConfirm={!!(dateFormat && timeFormat)}
+                dateFormat={dateFormat}
+                inputFormat={inputFormat}
+                timeFormat={timeFormat}
+                isValidDate={this.checkIsValidDate}
+                viewMode={viewMode}
+                timeConstraints={timeConstraints}
+                input={false}
+                onClose={this.close}
+                locale={locale}
+                minDate={minDate}
+                maxDate={maxDate}
+                useMobileUI={useMobileUI}
+                // utc={utc}
+              />
+            </PopUp>
+          )
         ) : null}
       </div>
     );

package/src/components/RichText.tsx

@@ -42,8 +42,8 @@ import 'froala-editor/js/plugins/word_paste.min';
 import 'froala-editor/js/languages/zh_cn.js';
 
 // Require Editor CSS files.
-import 'froala-editor/css/froala_style.min.css';
-import 'froala-editor/css/froala_editor.pkgd.min.css';
+// import 'froala-editor/css/froala_style.min.css';
+// import 'froala-editor/css/froala_editor.pkgd.min.css';
 
 export interface FroalaEditorComponentProps {
   config: any;

package/src/components/Tinymce.tsx

@@ -6,7 +6,7 @@ import tinymce from 'tinymce/tinymce';
 // A theme is also required
 import 'tinymce/icons/default/index';
 import 'tinymce/themes/silver';
-import 'tinymce/skins/ui/oxide/skin.css';
+// import 'tinymce/skins/ui/oxide/skin.css';
 
 // Any plugins you want to use has to be imported
 import 'tinymce/plugins/advlist';

package/src/components/condition-builder/Group.tsx

@@ -9,6 +9,7 @@ import {Icon} from '../icons';
 import {localeable, LocaleProps} from '../../locale';
 
 export interface ConditionGroupProps extends ThemeProps, LocaleProps {
+  builderMode?: 'simple' | 'full';
   config: Config;
   value?: ConditionGroupValue;
   fields: Fields;
@@ -114,6 +115,7 @@ export class ConditionGroup extends React.Component<ConditionGroupProps> {
 
   render() {
     const {
+      builderMode,
       classnames: cx,
       fieldClassName,
       value,
@@ -129,55 +131,64 @@ export class ConditionGroup extends React.Component<ConditionGroupProps> {
       searchable,
       translate: __
     } = this.props;
-
     return (
       <div className={cx('CBGroup')} data-group-id={value?.id}>
         <div className={cx('CBGroup-toolbar')}>
-          <div className={cx('CBGroup-toolbarCondition')}>
-            {showNot ? (
-              <Button
-                onClick={this.handleNotClick}
-                className="m-r-xs"
-                size="xs"
-                active={value?.not}
-                disabled={disabled}
-              >
-                {__('Condition.not')}
-              </Button>
-            ) : null}
-            <div className={cx('ButtonGroup')}>
-              <Button
-                size="xs"
-                onClick={this.handleConjunctionClick}
-                active={value?.conjunction !== 'or'}
-                disabled={disabled}
-              >
-                {__('Condition.and')}
-              </Button>
-              <Button
-                size="xs"
-                onClick={this.handleConjunctionClick}
-                active={value?.conjunction === 'or'}
-                disabled={disabled}
-              >
-                {__('Condition.or')}
-              </Button>
+          {builderMode === 'simple' ? null : (
+            <div className={cx('CBGroup-toolbarCondition')}>
+              {showNot ? (
+                <Button
+                  onClick={this.handleNotClick}
+                  className="m-r-xs"
+                  size="xs"
+                  active={value?.not}
+                  disabled={disabled}
+                >
+                  {__('Condition.not')}
+                </Button>
+              ) : null}
+              <div className={cx('ButtonGroup')}>
+                <Button
+                  size="xs"
+                  onClick={this.handleConjunctionClick}
+                  active={value?.conjunction !== 'or'}
+                  disabled={disabled}
+                >
+                  {__('Condition.and')}
+                </Button>
+                <Button
+                  size="xs"
+                  onClick={this.handleConjunctionClick}
+                  active={value?.conjunction === 'or'}
+                  disabled={disabled}
+                >
+                  {__('Condition.or')}
+                </Button>
+              </div>
             </div>
-          </div>
-          <div className={cx('CBGroup-toolbarConditionAdd')}>
+          )}
+          <div
+            className={cx(
+              `CBGroup-toolbarConditionAdd${
+                builderMode === 'simple' ? '-simple' : ''
+              }`
+            )}
+          >
             <div className={cx('ButtonGroup')}>
               <Button onClick={this.handleAdd} size="xs" disabled={disabled}>
                 <Icon icon="plus" className="icon" />
                 {__('Condition.add_cond')}
               </Button>
-              <Button
-                onClick={this.handleAddGroup}
-                size="xs"
-                disabled={disabled}
-              >
-                <Icon icon="plus-cicle" className="icon" />
-                {__('Condition.add_cond_group')}
-              </Button>
+              {builderMode === 'simple' ? null : (
+                <Button
+                  onClick={this.handleAddGroup}
+                  size="xs"
+                  disabled={disabled}
+                >
+                  <Icon icon="plus-cicle" className="icon" />
+                  {__('Condition.add_cond_group')}
+                </Button>
+              )}
             </div>
           </div>
           {removeable ? (
@@ -186,7 +197,6 @@ export class ConditionGroup extends React.Component<ConditionGroupProps> {
             </a>
           ) : null}
         </div>
-
         <div className={cx('CBGroup-body')}>
           {Array.isArray(value?.children) && value!.children.length ? (
             value!.children.map((item, index) => (
@@ -205,10 +215,17 @@ export class ConditionGroup extends React.Component<ConditionGroupProps> {
                 data={data}
                 disabled={disabled}
                 searchable={searchable}
+                builderMode={builderMode}
               />
             ))
           ) : (
-            <div className={cx('CBGroup-placeholder')}>
+            <div
+              className={cx(
+                `CBGroup-placeholder ${
+                  builderMode === 'simple' ? 'simple' : ''
+                }`
+              )}
+            >
               {__('Condition.blank')}
             </div>
           )}

package/src/components/condition-builder/GroupOrItem.tsx

@@ -8,6 +8,7 @@ import ConditionGroup from './Group';
 import ConditionItem from './Item';
 
 export interface CBGroupOrItemProps extends ThemeProps {
+  builderMode?: 'simple' | 'full';
   config: Config;
   value?: ConditionGroupValue;
   fields: Fields;
@@ -37,6 +38,7 @@ export class CBGroupOrItem extends React.Component<CBGroupOrItemProps> {
 
   render() {
     const {
+      builderMode,
       classnames: cx,
       fieldClassName,
       value,
@@ -51,7 +53,12 @@ export class CBGroupOrItem extends React.Component<CBGroupOrItemProps> {
     } = this.props;
 
     return (
-      <div className={cx('CBGroupOrItem')} data-id={value?.id}>
+      <div
+        className={cx(
+          `CBGroupOrItem${builderMode === 'simple' ? '-simple' : ''}`
+        )}
+        data-id={value?.id}
+      >
         <div className={cx('CBGroupOrItem-body')}>
           {draggable ? (
             <a

package/src/components/condition-builder/index.tsx

@@ -17,6 +17,7 @@ import {findDOMNode} from 'react-dom';
 import animtion from '../../utils/Animation';
 
 export interface ConditionBuilderProps extends ThemeProps, LocaleProps {
+  builderMode?: 'simple' | 'full'; // 简单模式｜完整模式
   fields: Fields;
   funcs?: Funcs;
   showNot?: boolean;
@@ -203,7 +204,8 @@ export class QueryBuilder extends React.Component<ConditionBuilderProps> {
       showNot,
       data,
       disabled,
-      searchable
+      searchable,
+      builderMode
     } = this.props;
 
     const normalizedValue = Array.isArray(value?.children)
@@ -224,6 +226,7 @@ export class QueryBuilder extends React.Component<ConditionBuilderProps> {
 
     return (
       <ConditionGroup
+        builderMode={builderMode}
         config={this.config}
         funcs={funcs || this.config.funcs}
         fields={fields || this.config.fields}

package/src/env.tsx

@@ -11,6 +11,7 @@ import {
   RendererEventListener,
   EventListeners
 } from './utils/renderer-event';
+import {IScopedContext} from './Scoped';
 
 export interface RendererEnv {
   fetcher: (api: Api, data?: any, options?: object) => Promise<Payload>;
@@ -73,7 +74,9 @@ export interface RendererEnv {
       | React.TransitionEvent<any>
       | React.MouseEvent<any>,
     context: any,
-    data: any
+    scoped: IScopedContext,
+    data: any,
+    broadcast?: RendererEvent<any>
   ) => Promise<RendererEvent<any> | undefined>;
   rendererEventListeners: RendererEventListener[];
   [propName: string]: any;

package/src/factory.tsx

@@ -23,7 +23,7 @@ import {
   PlainObject
 } from './types';
 import {observer} from 'mobx-react';
-import Scoped from './Scoped';
+import Scoped, {IScopedContext} from './Scoped';
 import {getTheme, ThemeInstance, ThemeProps} from './theme';
 import find from 'lodash/find';
 import Alert from './components/Alert2';
@@ -360,6 +360,9 @@ const defaultOptions: RenderOptions = {
   tracker(eventTrack: EventTrack, props: PlainObject) {},
   // 返回解绑函数
   bindEvent(renderer: any) {
+    if (!renderer) {
+      return undefined;
+    }
     const listeners: EventListeners = renderer.props.$schema.onEvent;
     if (listeners) {
       // 暂存
@@ -384,8 +387,9 @@ const defaultOptions: RenderOptions = {
   async dispatchEvent(
     e: string | React.MouseEvent<any>,
     renderer: React.Component<RendererProps>,
+    scoped: IScopedContext,
     data: any,
-    broadcast: RendererEvent<any>
+    broadcast?: RendererEvent<any>
   ) {
     const eventName = typeof e === 'string' ? e : e.type;
     if (!broadcast) {
@@ -408,7 +412,8 @@ const defaultOptions: RenderOptions = {
       createRendererEvent(eventName, {
         env: this,
         nativeEvent: e,
-        data
+        data,
+        scoped
       });
 
     // 过滤&排序

package/src/renderers/Form/InputImage.tsx

@@ -1,6 +1,6 @@
 import React, {Suspense} from 'react';
 import {FormItem, FormControlProps, FormBaseControl} from './Item';
-import 'cropperjs/dist/cropper.css';
+// import 'cropperjs/dist/cropper.css';
 const Cropper = React.lazy(() => import('react-cropper'));
 import DropZone from 'react-dropzone';
 import {FileRejection} from 'react-dropzone';

package/src/renderers/Pagination.tsx

@@ -280,9 +280,9 @@ export default class Pagination extends React.Component<
   }
 
   render() {
-    const {mode} = this.props;
+    const {builderMode} = this.props;
 
-    return mode === 'simple' ? this.renderSimple() : this.renderNormal();
+    return builderMode === 'simple' ? this.renderSimple() : this.renderNormal();
   }
 }
 

package/src/renderers/Video.tsx

@@ -18,7 +18,7 @@ import {Renderer, RendererProps} from '../factory';
 import {resolveVariable} from '../utils/tpl-builtin';
 import {filter} from '../utils/tpl';
 // import css
-import 'video-react/dist/video-react.css';
+// import 'video-react/dist/video-react.css';
 import {BaseSchema, SchemaClassName, SchemaUrlPath} from '../Schema';
 
 /**