amis 1.5.7 → 1.5.8-beta.2

package/src/renderers/Form/TreeSelect.tsx

@@ -572,8 +572,8 @@ export default class TreeSelectControl extends React.Component<
       translate: __
     } = this.props;
 
-    const { isOpened } = this.state;
-    const { useMobileUI } = env;
+    const {isOpened} = this.state;
+    const {useMobileUI} = env;
     return (
       <div ref={this.container} className={cx(`TreeSelectControl`, className)}>
         <ResultBox
@@ -612,7 +612,7 @@ export default class TreeSelectControl extends React.Component<
         >
           {loading ? <Spinner size="sm" /> : undefined}
         </ResultBox>
-        { !(useMobileUI && isMobile()) && isOpened ? (
+        {!(useMobileUI && isMobile()) && isOpened ? (
           <Overlay
             container={popOverContainer || (() => this.container.current)}
             target={() => this.target}
@@ -631,17 +631,15 @@ export default class TreeSelectControl extends React.Component<
             </PopOver>
           </Overlay>
         ) : null}
-        {
-          useMobileUI && isMobile() && (
-            <PopUp
-              className={cx(`${ns}TreeSelect-popup`)}
-              isShow={isOpened}
-              onHide={this.close}
-            >
-              {this.renderOuter()}
-            </PopUp>
-          )
-        }
+        {useMobileUI && isMobile() && (
+          <PopUp
+            className={cx(`${ns}TreeSelect-popup`)}
+            isShow={isOpened}
+            onHide={this.close}
+          >
+            {this.renderOuter()}
+          </PopUp>
+        )}
       </div>
     );
   }

package/src/renderers/IFrame.tsx

@@ -161,8 +161,6 @@ export default class IFrame extends React.Component<IFrameProps, object> {
       ...style
     };
 
-    src = dataMapping(src, data);
-
     const finalSrc = src ? buildApi(src, data).url : undefined;
 
     if (

package/src/renderers/Remark.tsx

@@ -2,11 +2,12 @@ import React from 'react';
 import {Renderer, RendererProps} from '../factory';
 import {Api, SchemaNode, Schema, Action} from '../types';
 import cx from 'classnames';
-import TooltipWrapper from '../components/TooltipWrapper';
+import TooltipWrapper, {TooltipObject} from '../components/TooltipWrapper';
 import {filter} from '../utils/tpl';
-import {themeable} from '../theme';
+import {ClassNamesFn, themeable} from '../theme';
 import {hasIcon, Icon} from '../components/icons';
 import {BaseSchema, SchemaClassName, SchemaIcon, SchemaTpl} from '../Schema';
+import {autobind, isMobile} from '../utils/helper';
 
 /**
  * 提示渲染器，默认会显示个小图标，鼠标放上来的时候显示配置的内容。
@@ -91,6 +92,50 @@ class Remark extends React.Component<RemarkProps> {
     trigger: ['hover', 'focus'] as Array<'hover' | 'click' | 'focus'>
   };
 
+  @autobind
+  showModalTip(tooltip?: string | TooltipObject) {
+    let {onAction, data} = this.props;
+    return (e: React.MouseEvent) => {
+      onAction &&
+        onAction(
+          e,
+          {
+            actionType: 'dialog',
+            dialog: {
+              title:
+                tooltip && typeof tooltip !== 'string' ? tooltip.title : '',
+              body:
+                tooltip && typeof tooltip !== 'string'
+                  ? tooltip.content
+                  : tooltip
+            }
+          },
+          data
+        );
+    };
+  }
+
+  renderLabel(finalIcon: any, finalLabel: string, cx: ClassNamesFn) {
+    return (
+      <>
+        {finalLabel ? <span>{finalLabel}</span> : null}
+        {finalIcon ? (
+          hasIcon(finalIcon) ? (
+            <span className={cx('Remark-icon')}>
+              <Icon icon={finalIcon} />
+            </span>
+          ) : (
+            <i className={cx('Remark-icon', finalIcon)} />
+          )
+        ) : finalIcon === false && finalLabel ? null : (
+          <span className={cx('Remark-icon icon')}>
+            <Icon icon="question-mark" />
+          </span>
+        )}
+      </>
+    );
+  }
+
   render() {
     const {
       className,
@@ -106,17 +151,34 @@ class Remark extends React.Component<RemarkProps> {
       content,
       data,
       env,
-      tooltipClassName
+      tooltipClassName,
+      useMobileUI
     } = this.props;
 
     const finalIcon = tooltip?.icon ?? icon;
     const finalLabel = tooltip?.label ?? label;
+    const parsedTip = filterContents(tooltip || content, data);
+
+    // 移动端使用弹框提示
+    if (isMobile() && useMobileUI) {
+      return (
+        <div
+          className={cx(
+            `Remark`,
+            (tooltip && tooltip.className) || className || `Remark--warning`
+          )}
+          onClick={this.showModalTip(parsedTip)}
+        >
+          {this.renderLabel(finalIcon, finalLabel, cx)}
+        </div>
+      );
+    }
 
     return (
       <TooltipWrapper
         classPrefix={ns}
         classnames={cx}
-        tooltip={filterContents(tooltip || content, data)}
+        tooltip={parsedTip}
         tooltipClassName={
           (tooltip && tooltip.tooltipClassName) || tooltipClassName
         }
@@ -132,20 +194,7 @@ class Remark extends React.Component<RemarkProps> {
             (tooltip && tooltip.className) || className || `Remark--warning`
           )}
         >
-          {finalLabel ? <span>{finalLabel}</span> : null}
-          {finalIcon ? (
-            hasIcon(finalIcon) ? (
-              <span className={cx('Remark-icon')}>
-                <Icon icon={finalIcon} />
-              </span>
-            ) : (
-              <i className={cx('Remark-icon', finalIcon)} />
-            )
-          ) : finalIcon === false && finalLabel ? null : (
-            <span className={cx('Remark-icon icon')}>
-              <Icon icon="question-mark" />
-            </span>
-          )}
+          {this.renderLabel(finalIcon, finalLabel, cx)}
         </div>
       </TooltipWrapper>
     );

package/src/renderers/Steps.tsx

@@ -60,9 +60,11 @@ export interface StepsSchema extends BaseSchema {
    */
   name?: string;
 
-  status?: StepStatus | {
-    [propName: string]: StepStatus;
-  };
+  status?:
+    | StepStatus
+    | {
+        [propName: string]: StepStatus;
+      };
 
   /**
    * 展示模式
@@ -84,7 +86,7 @@ export function StepsCmpt(props: StepsProps) {
     source,
     config,
     render,
-    env
+    useMobileUI
   } = props;
 
   const stepsRow =
@@ -92,9 +94,8 @@ export function StepsCmpt(props: StepsProps) {
     config ||
     steps ||
     [];
-  const resolveRender = (val?: string | SchemaCollection) => typeof val === 'string'
-    ? filter(val, data)
-    : val && render('inner', val);
+  const resolveRender = (val?: string | SchemaCollection) =>
+    typeof val === 'string' ? filter(val, data) : val && render('inner', val);
   const value = getPropValue(props) ?? 0;
   const resolveValue =
     typeof value === 'string' && isNaN(+value)
@@ -112,13 +113,10 @@ export function StepsCmpt(props: StepsProps) {
       title: resolveRender(step.title),
       subTitle: resolveRender(step.subTitle),
       description: resolveRender(step.description)
-    }
+    };
   });
 
-  function getStepStatus(
-    step: StepSchema,
-    i: number
-  ): StepStatus {
+  function getStepStatus(step: StepSchema, i: number): StepStatus {
     let stepStatus;
 
     if (typeof status === 'string') {
@@ -141,7 +139,7 @@ export function StepsCmpt(props: StepsProps) {
       className={className}
       status={status}
       mode={mode}
-      useMobileUI={env.useMobileUI}
+      useMobileUI={useMobileUI}
     ></Steps>
   );
 }

package/src/renderers/Table/index.tsx

@@ -1173,6 +1173,7 @@ export default class Table extends React.Component<TableProps, object> {
         group: 'table',
         animation: 150,
         handle: `.${ns}Table-dragCell`,
+        filter: `.${ns}Table-dragCell.is-dragDisabled`,
         ghostClass: 'is-dragging',
         onEnd: (e: any) => {
           // 没有移动
@@ -1857,7 +1858,12 @@ export default class Table extends React.Component<TableProps, object> {
       );
     } else if (column.type === '__dragme') {
       return (
-        <td key={props.key} className={cx(column.pristine.className)}>
+        <td
+          key={props.key}
+          className={cx(column.pristine.className, {
+            'is-dragDisabled': !item.draggable
+          })}
+        >
           {item.draggable ? <Icon icon="drag-bar" className="icon" /> : null}
         </td>
       );

package/src/renderers/Tabs.tsx

@@ -21,7 +21,11 @@ import {
 } from '../Schema';
 import {ActionSchema} from './Action';
 import {filter} from '../utils/tpl';
-import {resolveVariable, tokenize} from '../utils/tpl-builtin';
+import {
+  resolveVariable,
+  tokenize,
+  resolveVariableAndFilter
+} from '../utils/tpl-builtin';
 import {FormSchemaHorizontal} from './Form/index';
 import {str2AsyncFunction} from '../utils/api';
 
@@ -461,7 +465,7 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
     } = this.props;
 
     const mode = tabsMode || dMode;
-    const arr = resolveVariable(source, data);
+    const arr = resolveVariableAndFilter(source, data, '| raw');
     let mountOnEnter = this.props.mountOnEnter;
 
     // 如果在form下面，其他tabs默认需要渲染出来

package/src/renderers/Timeline.tsx

@@ -0,0 +1,141 @@
+import React from 'react';
+import {Renderer, RendererProps} from '../factory';
+import {BaseSchema, SchemaApi, SchemaCollection, SchemaTokenizeableString} from '../Schema';
+import {resolveVariable} from '../utils/tpl-builtin';
+import Timeline from '../components/Timeline';
+import {filter} from '../utils/tpl';
+import { RemoteOptionsProps, withRemoteConfig } from '../components/WithRemoteConfig';
+
+export interface TimelineItemSchema extends Omit<BaseSchema, 'type'> {
+  /**
+   * 时间点
+   */
+  time: string;
+
+  /**
+   * 时间节点标题
+   */
+  title?: SchemaCollection;
+
+  /**
+    * 详细内容
+    */
+  detail?: string;
+
+  /**
+   * detail折叠时文案
+   */
+  detailCollapsedText?: string;
+
+  /**
+   * detail展开时文案
+   */
+  detailExpandedText?: string;
+
+  /**
+   * 时间点圆圈颜色
+   */
+  color?: string;
+
+  /**
+   * 图标
+   */
+  icon?: SchemaCollection;
+}
+
+export interface TimelineSchema extends BaseSchema {
+  /**
+   * 指定为 Timeline 时间轴渲染器
+   */
+  type: 'timeline';
+
+  /**
+   * 节点数据
+   */
+  items?: Array<TimelineItemSchema>;
+
+  /**
+   * API 或 数据映射
+   */
+  source?: SchemaApi  | SchemaTokenizeableString;
+
+  /**
+   * 文字相对于时间轴展示方向
+   */
+  mode?: 'left' | 'right' | 'alternate';
+
+  /**
+   * 展示方向
+   */
+  direction?: 'horizontal' | 'vertical'
+
+  /**
+   * 节点倒序
+   */
+  reverse?: boolean,
+}
+
+export interface TimelineProps
+  extends RendererProps,
+    Omit<TimelineSchema, 'className'> {}
+
+export function TimelineCmpt(props: TimelineProps) {
+  const {
+    items,
+    mode,
+    direction,
+    reverse,
+    data,
+    config,
+    source,
+    render
+  } = props;
+
+  // 获取源数据
+  const timelineItemsRow: Array<TimelineItemSchema> = config || items || [];
+
+  // 渲染内容
+  const resolveRender = (region: string, val?: SchemaCollection) => typeof val === 'string'
+                    ? filter(val, data)
+                    : (val && render(region, val));
+
+  // 处理源数据
+  const resolveTimelineItems =
+     timelineItemsRow?.map((timelineItem: TimelineItemSchema) => {
+      return {
+        ...timelineItem,
+        icon: resolveRender('icon', timelineItem.icon),
+        title: resolveRender('title', timelineItem.title),
+      }
+    });
+
+
+  return (<Timeline
+            items = {resolveTimelineItems}
+            direction = {direction}
+            reverse = {reverse}
+            mode = {mode}
+          />)
+}
+
+const TimelineWithRemoteConfig = withRemoteConfig({
+  adaptor: data => data.items || data
+})(
+  class extends React.Component<
+    RemoteOptionsProps & React.ComponentProps<typeof TimelineCmpt>
+  > {
+    render() {
+      const {config, deferLoad, loading, updateConfig, ...rest} = this.props;
+      return <TimelineCmpt config={config} {...rest} />;
+    }
+  }
+);
+
+@Renderer({
+  type: 'timeline'
+})
+export class TimelineRenderer extends React.Component<TimelineProps> {
+  render() {
+    return  <TimelineWithRemoteConfig {...this.props} />;
+  }
+}

package/src/renderers/Video.tsx

@@ -149,16 +149,8 @@ export class FlvSource extends React.Component<FlvSourceProps, any> {
   unsubscribe: any;
 
   componentDidMount() {
-    let {
-      src,
-      video,
-      config,
-      manager,
-      isLive,
-      autoPlay,
-      actions,
-      setError
-    } = this.props;
+    let {src, video, config, manager, isLive, autoPlay, actions, setError} =
+      this.props;
 
     this.initFlv({
       video,
@@ -174,16 +166,8 @@ export class FlvSource extends React.Component<FlvSourceProps, any> {
 
   componentDidUpdate(prevProps: FlvSourceProps) {
     const props = this.props;
-    let {
-      autoPlay,
-      actions,
-      src,
-      setError,
-      isLive,
-      config,
-      video,
-      manager
-    } = props;
+    let {autoPlay, actions, src, setError, isLive, config, video, manager} =
+      props;
 
     if (src !== prevProps.src) {
       setError('');

package/src/store/combo.ts

@@ -11,9 +11,7 @@ export const UniqueGroup = types
   })
   .views(self => ({
     get items() {
-      return self.itemsRef.map(
-        id => (getStoreById(id) as any) as IFormItemStore
-      );
+      return self.itemsRef.map(id => getStoreById(id) as any as IFormItemStore);
     }
   }))
   .actions(self => ({

package/src/utils/RootClose.ts

@@ -4,9 +4,13 @@
 
 import React, {useState} from 'react';
 import useRootClose from 'react-overlays/useRootClose';
+import {findDOMNode} from 'react-dom';
 
 export const RootClose = ({children, onRootClose, ...props}: any) => {
-  const [rootElement, attachRef] = useState(null);
+  const [rootComponent, attachRef] = useState(null);
+  const rootElement = findDOMNode(rootComponent) as Element;
+
   useRootClose(rootElement, onRootClose, props);
+
   return typeof children === 'function' ? children(attachRef) : children;
 };

package/src/utils/helper.ts

@@ -1607,7 +1607,7 @@ export function convertDateToObject(value: moment.Moment) {
       day: parseInt(value.format('DD'), 10)
     };
   }
-  return null;
+  return value;
 }
 
 export function getRange(min: number, max: number, step: number = 1) {