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

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;
+      };
 
   /**
    * 展示模式
@@ -83,17 +85,17 @@ export function StepsCmpt(props: StepsProps) {
     data,
     source,
     config,
-    render
+    render,
+    useMobileUI
   } = props;
-  
+
   const stepsRow =
     (resolveVariable(source, data) as Array<StepSchema>) ||
     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)
@@ -111,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') {
@@ -140,6 +139,7 @@ export function StepsCmpt(props: StepsProps) {
       className={className}
       status={status}
       mode={mode}
+      useMobileUI={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) {

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/store/formItem.ts

@@ -590,8 +590,8 @@ export const FormItemStore = StoreNode.named('FormItemStore')
 
       let options: Array<IOption> =
         json.data?.options ||
-        json.data.items ||
-        json.data.rows ||
+        json.data?.items ||
+        json.data?.rows ||
         json.data ||
         [];
 

package/src/store/table.ts

@@ -751,7 +751,8 @@ export const TableStore = iRendererStore
           pristine: item,
           toggled: item.toggled !== false,
           breakpoint: item.breakpoint,
-          isPrimary: index === 3
+          isPrimary: index === 3,
+          className: item.className || ''
         }));
 
         self.columns.replace(columns as any);

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/api.ts

@@ -98,14 +98,17 @@ export function buildApi(
   if (~idx) {
     const hashIdx = api.url.indexOf('#');
     const params = qsparse(
-      api.url.substring(idx + 1, ~hashIdx ? hashIdx : undefined)
+      api.url.substring(
+        idx + 1,
+        ~hashIdx && hashIdx > idx ? hashIdx : undefined
+      )
     );
     api.url =
       tokenize(api.url.substring(0, idx + 1), data, '| url_encode') +
       qsstringify(
         (api.query = dataMapping(params, data, undefined, api.convertKeyToPath))
       ) +
-      (~hashIdx ? api.url.substring(hashIdx) : '');
+      (~hashIdx && hashIdx > idx ? api.url.substring(hashIdx) : '');
   } else {
     api.url = tokenize(api.url, data, '| url_encode');
   }

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) {