amis 2.0.0-rc.10 → 2.0.0-rc.16

package/esm/renderers/Tpl.d.ts

@@ -0,0 +1,51 @@
+import React from 'react';
+import { RendererProps } from 'amis-core';
+import { BaseSchema, SchemaTpl } from '../Schema';
+import { BadgeObject } from 'amis-ui';
+/**
+ * tpl 渲染器
+ */
+export interface TplSchema extends BaseSchema {
+    /**
+     * 指定为模板渲染器。
+     *
+     * 文档：https://baidu.gitee.io/amis/docs/concepts/template
+     */
+    type: 'tpl' | 'html';
+    tpl?: SchemaTpl;
+    html?: SchemaTpl;
+    text?: SchemaTpl;
+    raw?: string;
+    /**
+     * 是否内联显示？
+     */
+    inline?: boolean;
+    /**
+     * 自定义样式
+     */
+    style?: {
+        [propName: string]: any;
+    };
+    /**
+     * 角标
+     */
+    badge?: BadgeObject;
+}
+export interface TplProps extends RendererProps, TplSchema {
+    className?: string;
+    value?: string;
+    wrapperComponent?: any;
+    inline?: boolean;
+}
+export declare class Tpl extends React.Component<TplProps, object> {
+    static defaultProps: Partial<TplProps>;
+    dom: any;
+    constructor(props: TplProps);
+    componentDidUpdate(prevProps: TplProps): void;
+    htmlRef(dom: any): void;
+    getContent(): string;
+    _render(): void;
+    render(): JSX.Element;
+}
+export declare class TplRenderer extends Tpl {
+}

package/esm/renderers/Tpl.js

@@ -0,0 +1,88 @@
+/**
+ * amis v2.0.0-rc.16
+ * Copyright 2018-2022 baidu
+ */
+
+import { __extends, __assign, __decorate } from 'tslib';
+import React from 'react';
+import { anyChanged, getPropValue, filter, escapeHtml, buildStyle, Renderer } from 'amis-core';
+import { withBadge } from 'amis-ui';
+
+var Tpl = /** @class */ (function (_super) {
+    __extends(Tpl, _super);
+    function Tpl(props) {
+        var _this = _super.call(this, props) || this;
+        _this.htmlRef = _this.htmlRef.bind(_this);
+        return _this;
+    }
+    Tpl.prototype.componentDidUpdate = function (prevProps) {
+        if (anyChanged(['data', 'tpl', 'html', 'text', 'raw', 'value'], this.props, prevProps)) {
+            this._render();
+        }
+    };
+    Tpl.prototype.htmlRef = function (dom) {
+        this.dom = dom;
+        this._render();
+    };
+    Tpl.prototype.getContent = function () {
+        var _a = this.props, tpl = _a.tpl, html = _a.html, text = _a.text, raw = _a.raw, data = _a.data, placeholder = _a.placeholder;
+        var value = getPropValue(this.props);
+        if (raw) {
+            return raw;
+        }
+        else if (html) {
+            return filter(html, data);
+        }
+        else if (tpl) {
+            return filter(tpl, data);
+        }
+        else if (text) {
+            return escapeHtml(filter(text, data));
+        }
+        else {
+            return value == null || value === ''
+                ? "<span class=\"text-muted\">".concat(placeholder, "</span>")
+                : typeof value === 'string'
+                    ? value
+                    : JSON.stringify(value);
+        }
+    };
+    Tpl.prototype._render = function () {
+        if (!this.dom) {
+            return;
+        }
+        this.dom.firstChild.innerHTML = this.props.env.filterHtml(this.getContent());
+    };
+    Tpl.prototype.render = function () {
+        var _a = this.props, className = _a.className, wrapperComponent = _a.wrapperComponent, inline = _a.inline, cx = _a.classnames, style = _a.style, showNativeTitle = _a.showNativeTitle, data = _a.data;
+        var Component = wrapperComponent || (inline ? 'span' : 'div');
+        var content = this.getContent();
+        return (React.createElement(Component, __assign({ ref: this.htmlRef, className: cx('TplField', className), style: buildStyle(style, data) }, (showNativeTitle
+            ? { title: typeof content === 'string' ? content : '' }
+            : {})),
+            React.createElement("span", null, content)));
+    };
+    Tpl.defaultProps = {
+        inline: true,
+        placeholder: ''
+    };
+    return Tpl;
+}(React.Component));
+/** @class */ ((function (_super) {
+    __extends(TplRenderer, _super);
+    function TplRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    TplRenderer = __decorate([
+        Renderer({
+            test: /(^|\/)(?:tpl|html)$/,
+            name: 'tpl'
+        })
+        // @ts-ignore 类型没搞定
+        ,
+        withBadge
+    ], TplRenderer);
+    return TplRenderer;
+})(Tpl));
+
+export { Tpl };

package/esm/renderers/VBox.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import { RendererProps } from 'amis-core';
+import { Schema } from 'amis-core';
+import { BaseSchema, SchemaObject } from '../Schema';
+export declare type HboxRow = SchemaObject & {
+    rowClassName?: string;
+    cellClassName?: string;
+};
+/**
+ * 垂直布局控件
+ * 文档：https://baidu.gitee.io/amis/docs/components/vbox
+ */
+export interface VBoxSchema extends BaseSchema {
+    type: 'vbox';
+    /**
+     * 行集合
+     */
+    rows?: Array<HboxRow>;
+}
+export interface HBoxProps extends RendererProps, Omit<VBoxSchema, 'className'> {
+}
+export default class VBox extends React.Component<HBoxProps, object> {
+    static propsList: Array<string>;
+    static defaultProps: Partial<HBoxProps>;
+    renderChild(region: string, node: Schema): JSX.Element;
+    renderCell(row: HboxRow, key: any): JSX.Element;
+    render(): JSX.Element;
+}
+export declare class VBoxRenderer extends VBox {
+}

package/esm/renderers/VBox.js

@@ -0,0 +1,48 @@
+/**
+ * amis v2.0.0-rc.16
+ * Copyright 2018-2022 baidu
+ */
+
+import { __extends, __decorate } from 'tslib';
+import React from 'react';
+import { Renderer } from 'amis-core';
+import cx from 'classnames';
+
+var VBox = /** @class */ (function (_super) {
+    __extends(VBox, _super);
+    function VBox() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    VBox.prototype.renderChild = function (region, node) {
+        var render = this.props.render;
+        return render(region, node);
+    };
+    VBox.prototype.renderCell = function (row, key) {
+        var ns = this.props.classPrefix;
+        return (React.createElement("div", { className: cx("".concat(ns, "Vbox-cell"), row.cellClassName) }, this.renderChild("row/".concat(key), row)));
+    };
+    VBox.prototype.render = function () {
+        var _this = this;
+        var _a = this.props, className = _a.className, rows = _a.rows, ns = _a.classPrefix;
+        return (React.createElement("div", { className: cx("".concat(ns, "Vbox"), className) }, Array.isArray(rows)
+            ? rows.map(function (row, key) { return (React.createElement("div", { className: cx('row-row', row.rowClassName), key: key }, _this.renderCell(row, key))); })
+            : null));
+    };
+    VBox.propsList = ['rows'];
+    VBox.defaultProps = {};
+    return VBox;
+}(React.Component));
+/** @class */ ((function (_super) {
+    __extends(VBoxRenderer, _super);
+    function VBoxRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    VBoxRenderer = __decorate([
+        Renderer({
+            type: 'vbox'
+        })
+    ], VBoxRenderer);
+    return VBoxRenderer;
+})(VBox));
+
+export { VBox as default };

package/esm/renderers/Video.d.ts

@@ -0,0 +1,171 @@
+/**
+ * @file video
+ * @author fex
+ */
+import React from 'react';
+import { RendererProps } from 'amis-core';
+import { BaseSchema, SchemaClassName, SchemaUrlPath } from '../Schema';
+/**
+ * 视频播放器
+ * 文档：https://baidu.gitee.io/amis/docs/components/video
+ */
+export interface VideoSchema extends BaseSchema {
+    /**
+     * 指定为视频类型
+     */
+    type: 'video';
+    /**
+     * 是否自动播放
+     */
+    autoPlay?: boolean;
+    /**
+     * 如果显示切帧，通过此配置项可以控制每行显示多少帧
+     */
+    columnsCount?: number;
+    /**
+     * 设置后，可以显示切帧.点击帧的时候会将视频跳到对应时间。
+     *
+     * frames: {
+     *  '01:22': 'http://domain/xxx.jpg'
+     * }
+     */
+    frames?: {
+        [propName: string]: string;
+    };
+    /**
+     * 配置帧列表容器className
+     */
+    framesClassName?: SchemaClassName;
+    /**
+     * 如果是实时的，请标记一下
+     */
+    isLive?: boolean;
+    /**
+     * 点击帧画面时是否跳转视频对应的点
+     *
+     * @default true
+     */
+    jumpFrame?: boolean;
+    /**
+     * 是否初始静音
+     */
+    muted?: boolean;
+    /**
+     * 配置播放器 className
+     */
+    playerClassName?: SchemaClassName;
+    /**
+     * 视频封面地址
+     */
+    poster?: SchemaUrlPath;
+    /**
+     * 是否将视频和封面分开显示
+     */
+    splitPoster?: boolean;
+    /**
+     * 视频播放地址
+     */
+    src?: SchemaUrlPath;
+    /**
+     * 视频类型如： video/x-flv
+     */
+    videoType?: string;
+    /**
+     * 视频比率
+     */
+    aspectRatio?: 'auto' | '4:3' | '16:9';
+    /**
+     * 视频速率
+     */
+    rates?: Array<number>;
+    /**
+     * 跳转到帧时，往前多少秒。
+     */
+    jumpBufferDuration?: number;
+    /**
+     * 默认播放的时候到了下一帧会继续播放，同时高亮下一帧。
+     * 如果配置这个则会停止播放，等待用户选择新的区间再播放。
+     */
+    stopOnNextFrame?: boolean;
+}
+export interface FlvSourceProps {
+    src?: string;
+    type?: string;
+    video?: any;
+    config?: object;
+    manager?: any;
+    isLive?: boolean;
+    autoPlay?: boolean;
+    actions?: any;
+    order?: number;
+    setError: (error: string) => void;
+}
+export declare class FlvSource extends React.Component<FlvSourceProps, any> {
+    mpegtsPlayer: any;
+    loaded: boolean;
+    timer: any;
+    unsubscribe: any;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: FlvSourceProps): void;
+    componentWillUnmount(): void;
+    initFlv({ video, manager, src, isLive, config, actions, setError, autoPlay }: any): void;
+    render(): JSX.Element;
+}
+export interface HlsSourceProps {
+    src?: string;
+    type?: string;
+    video?: any;
+    config?: object;
+    manager?: any;
+    isLive?: boolean;
+    autoPlay?: boolean;
+    actions?: any;
+    order?: number;
+}
+export declare class HlsSource extends React.Component<HlsSourceProps, any> {
+    hls: any;
+    loaded: boolean;
+    unsubscribe: any;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    componentDidUpdate(prevProps: HlsSourceProps): void;
+    initHls({ video, manager, src, autoPlay, actions }: any): void;
+    render(): JSX.Element;
+}
+export interface VideoProps extends RendererProps, Omit<VideoSchema, 'className'> {
+    columnsCount: number;
+}
+export interface VideoState {
+    posterInfo?: any;
+    videoState?: any;
+    error?: string;
+}
+export default class Video extends React.Component<VideoProps, VideoState> {
+    static defaultProps: {
+        columnsCount: number;
+        isLive: boolean;
+        jumpFrame: boolean;
+        aspectRatio: string;
+    };
+    frameDom: any;
+    cursorDom: any;
+    player: any;
+    times: Array<number>;
+    currentIndex: number;
+    manualJump: boolean;
+    constructor(props: VideoProps);
+    onImageLoaded(e: Event): void;
+    frameRef(dom: any): void;
+    cursorRef(dom: any): void;
+    playerRef(player: any): void;
+    moveCursorToIndex(index: number): void;
+    jumpToIndex(index: number): void;
+    onClick(e: Event): void;
+    setError(error?: string): void;
+    renderFrames(): JSX.Element | null;
+    renderPlayer(): JSX.Element;
+    renderPosterAndPlayer(): JSX.Element;
+    render(): JSX.Element;
+}
+export declare class VideoRenderer extends Video {
+}