amis 1.6.5-beta.4 → 1.8.0-beta.1

package/src/renderers/TooltipWrapper.tsx

@@ -0,0 +1,219 @@
+import React from 'react';
+import {Renderer, RendererProps} from '../factory';
+import {BaseSchema, SchemaCollection} from '../Schema';
+import {filter} from '../utils/tpl';
+import {escapeHtml} from '../utils/tpl-builtin';
+import {buildStyle} from '../utils/style';
+import {TooltipWrapper as TooltipWrapperComp} from '../components';
+
+import type {Trigger} from '../components/TooltipWrapper';
+
+export interface TooltipWrapperSchema extends BaseSchema {
+  /**
+   * 文字提示容器
+   */
+  type: 'tooltip-wrapper';
+
+  /**
+   * 文字提示标题
+   */
+  title?: string;
+
+  /**
+   * 文字提示
+   */
+  tooltip?: string;
+
+  /**
+   * 文字提示浮层出现位置，默认为top
+   */
+  placement?: 'top' | 'right' | 'bottom' | 'left';
+
+  /**
+   * 浮层触发方式，默认为hover
+   */
+  trigger?: Trigger | Array<Trigger>;
+
+  /**
+   * 浮层隐藏延迟时间，单位ms，默认0
+   */
+  delay?: number;
+
+  /**
+   * 是否点击非内容区域关闭提示，默认为true
+   */
+  rootClose?: boolean;
+
+  /**
+   * 内容区域
+   */
+  body?: SchemaCollection;
+
+  /**
+   * 内容区包裹标签
+   */
+  wrapperComponent: string;
+
+  /**
+   * 内容区是否内联显示，默认为false
+   */
+  inline?: boolean;
+
+  /**
+   * 浮层主题色，默认为light
+   */
+  tooltipTheme?: 'light' | 'dark';
+
+  /**
+   * 内容区自定义样式
+   */
+  style?: {
+    [propName: string]: any;
+  };
+
+  /**
+   * 自定义提示浮层样式
+   */
+  tooltipStyle?: {
+    [propName: string]: any;
+  };
+
+  /**
+   * 内容区CSS类名
+   */
+  className?: string;
+
+  /**
+   * 文字提示浮层CSS类名
+   */
+  tooltipClassName?: string;
+}
+
+export interface TooltipWrapperProps extends RendererProps {
+  /**
+   * 文字提示标题
+   */
+  title?: string;
+  /**
+   * 文字提示
+   */
+  tooltip?: string;
+  /**
+   * 文字提示位置
+   */
+  placement: 'top' | 'right' | 'bottom' | 'left';
+  inline?: boolean;
+  trigger: Trigger | Array<Trigger>;
+  rootClose?: boolean;
+  delay?: number;
+  container?: React.ReactNode;
+  style?: React.CSSProperties;
+  tooltipStyle?: React.CSSProperties;
+  wrapperComponent?: string;
+  tooltipTheme?: 'light' | 'dark';
+}
+
+interface TooltipWrapperState {}
+
+export default class TooltipWrapper extends React.Component<
+  TooltipWrapperProps,
+  TooltipWrapperState
+> {
+  static defaultProps: Pick<
+    TooltipWrapperProps,
+    | 'placement'
+    | 'trigger'
+    | 'rootClose'
+    | 'delay'
+    | 'inline'
+    | 'wrap'
+    | 'tooltipTheme'
+  > = {
+    placement: 'top',
+    trigger: 'hover',
+    rootClose: true,
+    delay: 0,
+    inline: false,
+    wrap: false,
+    tooltipTheme: 'light'
+  };
+
+  constructor(props: TooltipWrapperProps) {
+    super(props);
+  }
+
+  renderBody() {
+    const {
+      render,
+      classnames: cx,
+      body,
+      className,
+      wrapperComponent,
+      inline,
+      style,
+      data,
+      wrap
+    } = this.props;
+    const Comp =
+      (wrapperComponent as keyof JSX.IntrinsicElements) ||
+      (inline ? 'span' : 'div');
+
+    return (
+      <Comp
+        className={cx('TooltipWrapper', className, {
+          'TooltipWrapper--inline': inline
+        })}
+        style={buildStyle(style, data)}
+      >
+        {render('body', body)}
+      </Comp>
+    );
+  }
+
+  render() {
+    const {
+      tooltipClassName,
+      classPrefix: ns,
+      classnames: cx,
+      container,
+      placement,
+      rootClose,
+      tooltipStyle,
+      title,
+      tooltip,
+      delay,
+      trigger,
+      tooltipTheme,
+      data
+    } = this.props;
+
+    const tooltipObj = {
+      title: escapeHtml(filter(title, data)),
+      content: escapeHtml(filter(tooltip, data))
+    };
+
+    return (
+      <TooltipWrapperComp
+        classPrefix={ns}
+        classnames={cx}
+        style={buildStyle(tooltipStyle, data)}
+        placement={placement}
+        tooltip={tooltipObj}
+        trigger={trigger}
+        rootClose={rootClose}
+        delay={delay}
+        container={container}
+        tooltipClassName={cx(tooltipClassName, {
+          'Tooltip--dark': tooltipTheme === 'dark'
+        })}
+      >
+        {this.renderBody()}
+      </TooltipWrapperComp>
+    );
+  }
+}
+
+@Renderer({
+  type: 'tooltip-wrapper'
+})
+export class TooltipWrapperRenderer extends TooltipWrapper {}

package/src/renderers/Video.tsx

@@ -113,6 +113,12 @@ export interface VideoSchema extends BaseSchema {
    * 跳转到帧时，往前多少秒。
    */
   jumpBufferDuration?: number;
+
+  /**
+   * 默认播放的时候到了下一帧会继续播放，同时高亮下一帧。
+   * 如果配置这个则会停止播放，等待用户选择新的区间再播放。
+   */
+  stopOnNextFrame?: boolean;
 }
 
 const str2seconds: (str: string) => number = str =>
@@ -389,6 +395,7 @@ export default class Video extends React.Component<VideoProps, VideoState> {
   player: any;
   times: Array<number>;
   currentIndex: number;
+  manualJump = false;
   constructor(props: VideoProps) {
     super(props);
 
@@ -459,6 +466,7 @@ export default class Video extends React.Component<VideoProps, VideoState> {
       let index = 0;
       const times = this.times;
       const len = times.length;
+      const stopOnNextFrame = this.props.stopOnNextFrame;
       while (index < len - 1) {
         if (
           times[index + 1] &&
@@ -472,6 +480,12 @@ export default class Video extends React.Component<VideoProps, VideoState> {
 
       if (this.currentIndex !== index) {
         this.moveCursorToIndex(index);
+
+        stopOnNextFrame && !this.manualJump && player.pause();
+
+        if (this.manualJump) {
+          this.manualJump = false;
+        }
       }
     });
   }
@@ -505,6 +519,7 @@ export default class Video extends React.Component<VideoProps, VideoState> {
     const times = this.times;
     const player = this.player;
 
+    this.manualJump = true;
     player.seek(times[index] - jumpBufferDuration);
     player.play();
   }
@@ -572,11 +587,11 @@ export default class Video extends React.Component<VideoProps, VideoState> {
           }
 
           return (
-            <div className="pull-in-xxs" key={i}>
-              <div className={`${ns}Hbox ${ns}Video-frameItem`}>
+            <div className="pull-in-xs" key={i}>
+              <div className={cx(`Hbox Video-frameItem`)}>
                 {items.map((item, key) => (
                   <div
-                    className={`${ns}Hbox-col Wrapper--xxs ${ns}Video-frame`}
+                    className={cx(`Hbox-col Wrapper--xs Video-frame`)}
                     key={key}
                     onClick={() =>
                       this.jumpToIndex(i * (columnsCount as number) + key)
@@ -585,7 +600,7 @@ export default class Video extends React.Component<VideoProps, VideoState> {
                     {item.src ? (
                       <img className="w-full" alt="poster" src={item.src} />
                     ) : null}
-                    <div className={`${ns}Video-frameLabel`}>{item.time}</div>
+                    <div className={cx(`Video-frameLabel`)}>{item.time}</div>
                   </div>
                 ))}
 
@@ -593,7 +608,7 @@ export default class Video extends React.Component<VideoProps, VideoState> {
                   /* 补充空白 */ restCount
                     ? blankArray.map((_, index) => (
                         <div
-                          className={`${ns}Hbox-col Wrapper--xxs`}
+                          className={cx(`Hbox-col Wrapper--xs`)}
                           key={`blank_${index}`}
                         />
                       ))
@@ -604,7 +619,7 @@ export default class Video extends React.Component<VideoProps, VideoState> {
           );
         })}
         {jumpFrame ? (
-          <span ref={this.cursorRef} className={`${ns}Video-cursor`} />
+          <span ref={this.cursorRef} className={cx('Video-cursor')} />
         ) : null}
       </div>
     );

package/src/store/table.ts

@@ -904,7 +904,7 @@ export const TableStore = iRendererStore
         return {
           // id: String(item && (item as any)[self.primaryField] || `${pindex}-${depth}-${key}`),
           id: String(id),
-          parentId,
+          parentId: String(parentId),
           key: String(`${pindex}-${depth}-${index}`),
           path: `${path}${index}`,
           depth: depth,