amis 2.0.0-rc.9 → 2.0.2

package/esm/renderers/Audio.js

@@ -0,0 +1,382 @@
+/**
+ * amis v2.0.2
+ * Copyright 2018-2022 baidu
+ */
+
+import { __extends, __decorate, __metadata } from 'tslib';
+import React from 'react';
+import upperFirst from 'lodash/upperFirst';
+import { getPropValue, filter, detectPropValueChanged, autobind, Renderer } from 'amis-core';
+import { Icon } from 'amis-ui';
+
+var Audio = /** @class */ (function (_super) {
+    __extends(Audio, _super);
+    function Audio() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = {
+            src: getPropValue(_this.props, function (props) {
+                return props.src ? filter(props.src, props.data, '| raw') : undefined;
+            }) || '',
+            isReady: false,
+            muted: false,
+            playing: false,
+            played: 0,
+            seeking: false,
+            volume: 0.8,
+            prevVolume: 0.8,
+            loaded: 0,
+            playbackRate: 1.0,
+            showHandlePlaybackRate: false,
+            showHandleVolume: false
+        };
+        return _this;
+    }
+    Audio.prototype.componentWillUnmount = function () {
+        clearTimeout(this.progressTimeout);
+        clearTimeout(this.durationTimeout);
+    };
+    Audio.prototype.componentDidMount = function () {
+        var autoPlay = this.props.autoPlay;
+        var playing = autoPlay ? true : false;
+        this.setState({
+            playing: playing
+        }, this.progress);
+    };
+    Audio.prototype.componentDidUpdate = function (prevProps) {
+        var _this = this;
+        var props = this.props;
+        detectPropValueChanged(props, prevProps, function (value) {
+            return _this.setState({
+                src: value,
+                playing: false
+            }, function () {
+                _this.audio.load();
+                _this.progress();
+            });
+        }, function (props) { return (props.src ? filter(props.src, props.data, '| raw') : undefined); });
+    };
+    Audio.prototype.progress = function () {
+        clearTimeout(this.progressTimeout);
+        if (this.state.src && this.audio) {
+            var currentTime = this.audio.currentTime || 0;
+            var duration = this.audio.duration;
+            var played = currentTime / duration;
+            var playing = this.state.playing;
+            playing = played != 1 && playing ? true : false;
+            this.setState({
+                played: played,
+                playing: playing
+            });
+            this.progressTimeout = setTimeout(this.progress, this.props.progressInterval / this.state.playbackRate);
+        }
+    };
+    Audio.prototype.audioRef = function (audio) {
+        this.audio = audio;
+    };
+    Audio.prototype.load = function () {
+        this.setState({
+            isReady: true
+        });
+    };
+    Audio.prototype.handlePlaybackRate = function (rate) {
+        this.audio.playbackRate = rate;
+        this.setState({
+            playbackRate: rate,
+            showHandlePlaybackRate: false
+        });
+    };
+    Audio.prototype.handleMute = function () {
+        if (!this.state.src) {
+            return;
+        }
+        var _a = this.state, muted = _a.muted, prevVolume = _a.prevVolume;
+        var curVolume = !muted ? 0 : prevVolume;
+        this.audio.muted = !muted;
+        this.setState({
+            muted: !muted,
+            volume: curVolume
+        });
+    };
+    Audio.prototype.handlePlaying = function () {
+        if (!this.state.src) {
+            return;
+        }
+        var playing = this.state.playing;
+        playing ? this.audio.pause() : this.audio.play();
+        this.setState({
+            playing: !playing
+        });
+    };
+    Audio.prototype.getCurrentTime = function () {
+        if (!this.audio || !this.state.src || !this.state.isReady) {
+            return '0:00';
+        }
+        var duration = this.audio.duration;
+        var played = this.state.played;
+        return this.formatTime(duration * (played || 0));
+    };
+    Audio.prototype.getDuration = function () {
+        if (!this.audio || !this.state.src) {
+            return '0:00';
+        }
+        if (!this.state.isReady) {
+            this.onDurationCheck();
+            return '0:00';
+        }
+        var _a = this.audio, duration = _a.duration, seekable = _a.seekable;
+        // on iOS, live streams return Infinity for the duration
+        // so instead we use the end of the seekable timerange
+        if (duration === Infinity && seekable.length > 0) {
+            return seekable.end(seekable.length - 1);
+        }
+        return this.formatTime(duration);
+    };
+    Audio.prototype.onDurationCheck = function () {
+        clearTimeout(this.durationTimeout);
+        var duration = this.audio && this.audio.duration;
+        if (!duration) {
+            this.durationTimeout = setTimeout(this.onDurationCheck, 500);
+        }
+    };
+    Audio.prototype.onSeekChange = function (e) {
+        if (!this.state.src) {
+            return;
+        }
+        var played = e.target.value;
+        this.setState({ played: played });
+    };
+    Audio.prototype.onSeekMouseDown = function () {
+        this.setState({ seeking: true });
+    };
+    Audio.prototype.onSeekMouseUp = function (e) {
+        if (!this.state.seeking) {
+            return;
+        }
+        var played = e.target.value;
+        var duration = this.audio.duration;
+        this.audio.currentTime = duration * played;
+        var loop = this.props.loop;
+        var playing = this.state.playing;
+        playing = played < 1 || loop ? playing : false;
+        this.setState({
+            playing: playing,
+            seeking: false
+        });
+    };
+    Audio.prototype.setVolume = function (e) {
+        if (!this.state.src) {
+            return;
+        }
+        var volume = e.target.value;
+        this.audio.volume = volume;
+        this.setState({
+            volume: volume,
+            prevVolume: volume
+        });
+    };
+    Audio.prototype.formatTime = function (seconds) {
+        var date = new Date(seconds * 1000);
+        var hh = date.getUTCHours();
+        var mm = date.getUTCMinutes();
+        var ss = this.pad(date.getUTCSeconds());
+        if (hh) {
+            return "".concat(hh, ":").concat(this.pad(mm), ":").concat(ss);
+        }
+        return "".concat(mm, ":").concat(ss);
+    };
+    Audio.prototype.pad = function (string) {
+        return ('0' + string).slice(-2);
+    };
+    Audio.prototype.toggleHandlePlaybackRate = function () {
+        if (!this.state.src) {
+            return;
+        }
+        this.setState({
+            showHandlePlaybackRate: !this.state.showHandlePlaybackRate
+        });
+    };
+    Audio.prototype.toggleHandleVolume = function (type) {
+        if (!this.state.src) {
+            return;
+        }
+        this.setState({
+            showHandleVolume: type
+        });
+    };
+    Audio.prototype.renderRates = function () {
+        var _this = this;
+        var _a = this.props, rates = _a.rates, cx = _a.classnames;
+        var _b = this.state, showHandlePlaybackRate = _b.showHandlePlaybackRate, playbackRate = _b.playbackRate;
+        return rates && rates.length ? (showHandlePlaybackRate ? (React.createElement("div", { className: cx('Audio-rateControl') }, rates.map(function (rate, index) { return (React.createElement("div", { key: index, className: cx('Audio-rateControlItem'), onClick: function () { return _this.handlePlaybackRate(rate); } },
+            "x",
+            rate.toFixed(1))); }))) : (React.createElement("div", { className: cx('Audio-rates'), onClick: this.toggleHandlePlaybackRate },
+            "x",
+            playbackRate.toFixed(1)))) : null;
+    };
+    Audio.prototype.renderPlay = function () {
+        var cx = this.props.classnames;
+        var playing = this.state.playing;
+        return (React.createElement("div", { className: cx('Audio-play'), onClick: this.handlePlaying }, playing ? (React.createElement(Icon, { icon: "pause", className: "icon" })) : (React.createElement(Icon, { icon: "play", className: "icon" }))));
+    };
+    Audio.prototype.renderTime = function () {
+        var cx = this.props.classnames;
+        return (React.createElement("div", { className: cx('Audio-times') },
+            this.getCurrentTime(),
+            " / ",
+            this.getDuration()));
+    };
+    Audio.prototype.renderProcess = function () {
+        var cx = this.props.classnames;
+        var played = this.state.played;
+        return (React.createElement("div", { className: cx('Audio-process') },
+            React.createElement("input", { type: "range", min: 0, max: 1, step: "any", value: played || 0, onMouseDown: this.onSeekMouseDown, onChange: this.onSeekChange, onMouseUp: this.onSeekMouseUp })));
+    };
+    Audio.prototype.renderVolume = function () {
+        var _this = this;
+        var cx = this.props.classnames;
+        var _a = this.state, volume = _a.volume, showHandleVolume = _a.showHandleVolume;
+        return showHandleVolume ? (React.createElement("div", { className: cx('Audio-volumeControl'), onMouseLeave: function () { return _this.toggleHandleVolume(false); } },
+            React.createElement("div", { className: cx('Audio-volumeControlIcon'), onClick: this.handleMute }, volume > 0 ? (React.createElement(Icon, { icon: "volume", className: "icon" })) : (React.createElement(Icon, { icon: "mute", className: "icon" }))),
+            React.createElement("input", { type: "range", min: 0, max: 1, step: "any", value: volume, onChange: this.setVolume }))) : (React.createElement("div", { className: cx('Audio-volume'), onMouseEnter: function () { return _this.toggleHandleVolume(true); } }, volume > 0 ? (React.createElement(Icon, { icon: "volume", className: "icon" })) : (React.createElement(Icon, { icon: "mute", className: "icon" }))));
+    };
+    Audio.prototype.render = function () {
+        var _this = this;
+        var _a = this.props, className = _a.className, inline = _a.inline, autoPlay = _a.autoPlay, loop = _a.loop, controls = _a.controls, cx = _a.classnames;
+        var _b = this.state, muted = _b.muted, src = _b.src;
+        return (React.createElement("div", { className: cx('Audio', className, inline ? 'Audio--inline' : '') },
+            React.createElement("audio", { className: cx('Audio-original'), ref: this.audioRef, onCanPlay: this.load, autoPlay: autoPlay, controls: true, muted: muted, loop: loop },
+                React.createElement("source", { src: src })),
+            React.createElement("div", { className: cx('Audio-controls') }, controls &&
+                controls.map(function (control, index) {
+                    control = 'render' + upperFirst(control);
+                    var method = control;
+                    return (React.createElement(React.Fragment, { key: index }, _this[method]()));
+                }))));
+    };
+    Audio.defaultProps = {
+        inline: true,
+        autoPlay: false,
+        playbackRate: 1,
+        loop: false,
+        rates: [],
+        progressInterval: 1000,
+        controls: ['rates', 'play', 'time', 'process', 'volume']
+    };
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], Audio.prototype, "progress", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [HTMLMediaElement]),
+        __metadata("design:returntype", void 0)
+    ], Audio.prototype, "audioRef", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], Audio.prototype, "load", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Number]),
+        __metadata("design:returntype", void 0)
+    ], Audio.prototype, "handlePlaybackRate", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], Audio.prototype, "handleMute", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], Audio.prototype, "handlePlaying", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], Audio.prototype, "getCurrentTime", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], Audio.prototype, "getDuration", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], Audio.prototype, "onDurationCheck", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], Audio.prototype, "onSeekChange", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], Audio.prototype, "onSeekMouseDown", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], Audio.prototype, "onSeekMouseUp", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], Audio.prototype, "setVolume", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Number]),
+        __metadata("design:returntype", void 0)
+    ], Audio.prototype, "formatTime", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Number]),
+        __metadata("design:returntype", void 0)
+    ], Audio.prototype, "pad", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], Audio.prototype, "toggleHandlePlaybackRate", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Boolean]),
+        __metadata("design:returntype", void 0)
+    ], Audio.prototype, "toggleHandleVolume", null);
+    return Audio;
+}(React.Component));
+/** @class */ ((function (_super) {
+    __extends(AudioRenderer, _super);
+    function AudioRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    AudioRenderer = __decorate([
+        Renderer({
+            type: 'audio'
+        })
+    ], AudioRenderer);
+    return AudioRenderer;
+})(Audio));
+
+export { Audio };

package/esm/renderers/Avatar.d.ts

@@ -0,0 +1,75 @@
+/**
+ * @file 用来展示用户头像
+ */
+import React from 'react';
+import { RendererProps } from 'amis-core';
+import { BadgeObject } from 'amis-ui';
+import { BaseSchema, SchemaClassName } from '../Schema';
+export interface AvatarSchema extends BaseSchema {
+    type: 'avatar';
+    /**
+     * 类名
+     */
+    className?: SchemaClassName;
+    /**
+     * 自定义样式
+     */
+    style?: {
+        [propName: string]: any;
+    };
+    /**
+     * 角标
+     */
+    badge?: BadgeObject;
+    /**
+     * 图片地址
+     */
+    src?: string;
+    /**
+     * 图标
+     */
+    icon?: string;
+    /**
+     * 图片相对于容器的缩放方式
+     */
+    fit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
+    /**
+     * 形状
+     */
+    shape?: 'circle' | 'square' | 'rounded';
+    /**
+     * 大小
+     */
+    size?: number | 'small' | 'default' | 'large';
+    /**
+     * 文本
+     */
+    text?: string;
+    /**
+     * 字符类型距离左右两侧边界单位像素
+     */
+    gap?: number;
+    /**
+     * 图片无法显示时的替换文字地址
+     */
+    alt?: string;
+    /**
+     * 图片是否允许拖动
+     */
+    draggable?: boolean;
+    /**
+     * 图片CORS属性
+     */
+    crossOrigin: 'anonymous' | 'use-credentials' | '';
+    /**
+     * 图片加载失败的是否默认处理，字符串函数
+     */
+    onError?: string;
+}
+export interface AvatarProps extends RendererProps, Omit<AvatarSchema, 'type' | 'className'> {
+}
+export declare class AvatarField extends React.Component<AvatarProps> {
+    render(): JSX.Element;
+}
+export declare class AvatarFieldRenderer extends AvatarField {
+}

package/esm/renderers/Avatar.js

@@ -0,0 +1,54 @@
+/**
+ * amis v2.0.2
+ * Copyright 2018-2022 baidu
+ */
+
+import { __extends, __decorate } from 'tslib';
+import React from 'react';
+import { isPureVariable, resolveVariableAndFilter, Renderer } from 'amis-core';
+import { Avatar, withBadge } from 'amis-ui';
+
+var AvatarField = /** @class */ (function (_super) {
+    __extends(AvatarField, _super);
+    function AvatarField() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    AvatarField.prototype.render = function () {
+        var _a = this.props, _b = _a.style, style = _b === void 0 ? {} : _b, className = _a.className, cx = _a.classnames, src = _a.src, _c = _a.icon, icon = _c === void 0 ? 'fa fa-user' : _c, fit = _a.fit, shape = _a.shape, size = _a.size, text = _a.text, gap = _a.gap, alt = _a.alt, draggable = _a.draggable, crossOrigin = _a.crossOrigin, onError = _a.onError, data = _a.data;
+        var errHandler = function () { return false; };
+        if (typeof onError === 'string') {
+            try {
+                errHandler = new Function('event', onError);
+            }
+            catch (e) {
+                console.warn(onError, e);
+            }
+        }
+        if (isPureVariable(src)) {
+            src = resolveVariableAndFilter(src, data, '| raw');
+        }
+        if (isPureVariable(text)) {
+            text = resolveVariableAndFilter(text, data);
+        }
+        if (isPureVariable(icon)) {
+            icon = resolveVariableAndFilter(icon, data);
+        }
+        return (React.createElement(Avatar, { style: style, className: className, classnames: cx, src: src, icon: icon, fit: fit, shape: shape, size: size, text: text, gap: gap, alt: alt, draggable: draggable, crossOrigin: crossOrigin, onError: errHandler }));
+    };
+    return AvatarField;
+}(React.Component));
+/** @class */ ((function (_super) {
+    __extends(AvatarFieldRenderer, _super);
+    function AvatarFieldRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    AvatarFieldRenderer = __decorate([
+        Renderer({
+            type: 'avatar'
+        }),
+        withBadge
+    ], AvatarFieldRenderer);
+    return AvatarFieldRenderer;
+})(AvatarField));
+
+export { AvatarField };

package/esm/renderers/BarCode.d.ts

@@ -0,0 +1,35 @@
+/**
+ * @file 用来条形码
+ */
+import React from 'react';
+import { RendererProps } from 'amis-core';
+import { BaseSchema } from '../Schema';
+/**
+ * BarCode 显示渲染器，格式说明。
+ * 文档：https://baidu.gitee.io/amis/docs/components/barcode
+ */
+export interface BarCodeSchema extends BaseSchema {
+    /**
+     *  指定为颜色显示控件
+     */
+    type: 'barcode';
+    /**
+     * 宽度
+     */
+    width?: number;
+    /**
+     * 高度
+     */
+    height?: number;
+    /**
+     * 显示配置
+     */
+    options: object;
+}
+export interface BarCodeProps extends RendererProps, Omit<BarCodeSchema, 'type' | 'className'> {
+}
+export declare class BarCodeField extends React.Component<BarCodeProps, object> {
+    render(): JSX.Element;
+}
+export declare class BarCodeFieldRenderer extends BarCodeField {
+}

package/esm/renderers/BarCode.js

@@ -0,0 +1,38 @@
+/**
+ * amis v2.0.2
+ * Copyright 2018-2022 baidu
+ */
+
+import { __extends, __decorate } from 'tslib';
+import React, { Suspense } from 'react';
+import { getPropValue, Renderer } from 'amis-core';
+
+var BarCode = React.lazy(function () { return import('amis-ui/lib/components/BarCode'); });
+var BarCodeField = /** @class */ (function (_super) {
+    __extends(BarCodeField, _super);
+    function BarCodeField() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    BarCodeField.prototype.render = function () {
+        var _a = this.props, className = _a.className; _a.width; _a.height; var cx = _a.classnames, options = _a.options;
+        var value = getPropValue(this.props);
+        return (React.createElement(Suspense, { fallback: React.createElement("div", null, "...") },
+            React.createElement("div", { "data-testid": "barcode", className: cx('BarCode', className) },
+                React.createElement(BarCode, { value: value, options: options }))));
+    };
+    return BarCodeField;
+}(React.Component));
+/** @class */ ((function (_super) {
+    __extends(BarCodeFieldRenderer, _super);
+    function BarCodeFieldRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    BarCodeFieldRenderer = __decorate([
+        Renderer({
+            type: 'barcode'
+        })
+    ], BarCodeFieldRenderer);
+    return BarCodeFieldRenderer;
+})(BarCodeField));
+
+export { BarCodeField };

package/esm/renderers/Breadcrumb.d.ts

@@ -0,0 +1,89 @@
+/**
+ * @file 用来展示面包屑导航
+ */
+import React from 'react';
+import { RendererProps } from 'amis-core';
+import { BaseSchema, SchemaIcon, SchemaUrlPath } from '../Schema';
+export declare type BreadcrumbBaseItemSchema = {
+    /**
+     * 文字
+     */
+    label?: string;
+    /**
+     * 图标类名
+     */
+    icon?: SchemaIcon;
+    /**
+     * 链接地址
+     */
+    href?: SchemaUrlPath;
+} & Omit<BaseSchema, 'type'>;
+export declare type BreadcrumbItemSchema = {
+    /**
+     * 文字
+     */
+    label?: string;
+    /**
+     * 图标类名
+     */
+    icon?: SchemaIcon;
+    /**
+     * 链接地址
+     */
+    href?: SchemaUrlPath;
+    /**
+     * 下拉菜单
+     */
+    dropdown?: Array<BreadcrumbBaseItemSchema>;
+} & Omit<BaseSchema, 'type'>;
+export declare type TooltipPositionType = 'top' | 'bottom' | 'left' | 'right';
+export declare type ItemPlace = 'start' | 'middle' | 'end';
+/**
+ * Breadcrumb 显示渲染器
+ * 文档：https://baidu.gitee.io/amis/docs/components/breadcrumb
+ */
+export interface BreadcrumbSchema extends BaseSchema {
+    /**
+     *  指定为面包屑显示控件
+     */
+    type: 'breadcrumb';
+    /**
+     * 面包项类名
+     */
+    itemClassName?: string;
+    /**
+     * 分隔符
+     */
+    separator?: string;
+    /**
+     * 分隔符类名
+     */
+    separatorClassName?: string;
+    /**
+     * 下拉菜单类名
+     */
+    dropdownClassName?: string;
+    /**
+     * 下拉菜单项类名
+     */
+    dropdownItemClassName?: string;
+    /**
+     * 列表
+     */
+    items: Array<BreadcrumbItemSchema>;
+    /**
+     * labelMaxLength
+     */
+    labelMaxLength?: number;
+    /**
+     * 浮窗提示位置
+     */
+    tooltipPosition?: TooltipPositionType;
+}
+export interface BreadcrumbProps extends RendererProps, Omit<BreadcrumbSchema, 'type' | 'className'> {
+}
+export declare class BreadcrumbField extends React.Component<BreadcrumbProps, object> {
+    render(): JSX.Element;
+}
+export declare class BreadcrumbFieldRenderer extends BreadcrumbField {
+}