amis 2.0.0-rc.9 → 2.0.2

package/esm/renderers/Carousel.js

@@ -0,0 +1,329 @@
+/**
+ * amis v2.0.2
+ * Copyright 2018-2022 baidu
+ */
+
+import { __extends, __awaiter, __generator, __decorate, __metadata } from 'tslib';
+import React from 'react';
+import Transition, { ENTERING, ENTERED, EXITING } from 'react-transition-group/Transition';
+import { getPropValue, isArrayChildrenModified, resolveVariableAndFilter, createObject, isObject, autobind, ScopedContext, Renderer } from 'amis-core';
+import { Icon, Html } from 'amis-ui';
+import ThemedImageThumb from './Image.js';
+
+var _a;
+var animationStyles = (_a = {},
+    _a[ENTERING] = 'in',
+    _a[ENTERED] = 'in',
+    _a[EXITING] = 'out',
+    _a);
+var defaultSchema = {
+    component: function (props) {
+        var _a, _b;
+        var data = props.data || {};
+        var thumbMode = props.thumbMode;
+        var cx = props.classnames;
+        return (React.createElement(React.Fragment, null, data.hasOwnProperty('image') ? (React.createElement(ThemedImageThumb, { src: data.image, title: data.title, href: data.href, blank: data.blank, htmlTarget: data.htmlTarget, imageCaption: data.description, thumbMode: (_b = (_a = data.thumbMode) !== null && _a !== void 0 ? _a : thumbMode) !== null && _b !== void 0 ? _b : 'contain', imageMode: "original", className: cx('Carousel-image') })) : data.hasOwnProperty('html') ? (React.createElement(Html, { html: data.html })) : data.hasOwnProperty('item') ? (React.createElement("span", null, data.item)) : (React.createElement("p", null))));
+    }
+};
+var Carousel = /** @class */ (function (_super) {
+    __extends(Carousel, _super);
+    function Carousel() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.wrapperRef = React.createRef();
+        _this.state = {
+            current: 0,
+            options: _this.props.options || getPropValue(_this.props) || [],
+            nextAnimation: ''
+        };
+        return _this;
+    }
+    Carousel.prototype.componentDidMount = function () {
+        this.prepareAutoSlide();
+    };
+    Carousel.prototype.componentDidUpdate = function (prevProps) {
+        var props = this.props;
+        var nextOptions = props.options || getPropValue(props) || [];
+        var prevOptions = prevProps.options || getPropValue(prevProps) || [];
+        if (isArrayChildrenModified(prevOptions, nextOptions)) {
+            this.setState({
+                options: nextOptions
+            });
+        }
+    };
+    Carousel.prototype.componentWillUnmount = function () {
+        this.clearAutoTimeout();
+    };
+    Carousel.prototype.doAction = function (action, args, throwErrors) {
+        var actionType = action === null || action === void 0 ? void 0 : action.actionType;
+        if (!!~['next', 'prev'].indexOf(actionType)) {
+            this.autoSlide(actionType);
+        }
+        else if (actionType === 'goto-image') {
+            this.changeSlide((args === null || args === void 0 ? void 0 : args.activeIndex) - 1);
+        }
+    };
+    Carousel.prototype.prepareAutoSlide = function () {
+        if (this.state.options.length < 2) {
+            return;
+        }
+        this.clearAutoTimeout();
+        if (this.props.auto) {
+            var interval = this.props.interval;
+            this.intervalTimeout = setTimeout(this.autoSlide, typeof interval === 'string'
+                ? resolveVariableAndFilter(interval, this.props.data) || 5000
+                : interval);
+        }
+    };
+    Carousel.prototype.autoSlide = function (rel) {
+        this.clearAutoTimeout();
+        var animation = this.props.animation;
+        var nextAnimation = this.state.nextAnimation;
+        switch (rel) {
+            case 'prev':
+                animation === 'slide'
+                    ? (nextAnimation = 'slideRight')
+                    : (nextAnimation = '');
+                this.transitFramesTowards('right', nextAnimation);
+                break;
+            case 'next':
+            default:
+                nextAnimation = '';
+                this.transitFramesTowards('left', nextAnimation);
+                break;
+        }
+        this.durationTimeout = setTimeout(this.prepareAutoSlide, this.props.duration);
+    };
+    Carousel.prototype.transitFramesTowards = function (direction, nextAnimation) {
+        return __awaiter(this, void 0, void 0, function () {
+            var current, prevIndex, _a, dispatchEvent, data, rendererEvent;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        current = this.state.current;
+                        prevIndex = current;
+                        switch (direction) {
+                            case 'left':
+                                current = this.getFrameId('next');
+                                break;
+                            case 'right':
+                                current = this.getFrameId('prev');
+                                break;
+                        }
+                        _a = this.props, dispatchEvent = _a.dispatchEvent, data = _a.data;
+                        return [4 /*yield*/, dispatchEvent('change', createObject(data, {
+                                activeIndex: current + 1,
+                                prevIndex: prevIndex
+                            }))];
+                    case 1:
+                        rendererEvent = _b.sent();
+                        if (rendererEvent === null || rendererEvent === void 0 ? void 0 : rendererEvent.prevented) {
+                            return [2 /*return*/];
+                        }
+                        this.setState({
+                            current: current,
+                            nextAnimation: nextAnimation
+                        });
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    Carousel.prototype.getFrameId = function (pos) {
+        var _a = this.state, options = _a.options, current = _a.current;
+        var total = options.length;
+        switch (pos) {
+            case 'prev':
+                return (current - 1 + total) % total;
+            case 'next':
+                return (current + 1) % total;
+            default:
+                return current;
+        }
+    };
+    Carousel.prototype.next = function () {
+        this.autoSlide('next');
+    };
+    Carousel.prototype.prev = function () {
+        this.autoSlide('prev');
+    };
+    Carousel.prototype.clearAutoTimeout = function () {
+        clearTimeout(this.intervalTimeout);
+        clearTimeout(this.durationTimeout);
+    };
+    Carousel.prototype.changeSlide = function (index) {
+        return __awaiter(this, void 0, void 0, function () {
+            var current, _a, dispatchEvent, data, rendererEvent;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        current = this.state.current;
+                        _a = this.props, dispatchEvent = _a.dispatchEvent, data = _a.data;
+                        return [4 /*yield*/, dispatchEvent('change', createObject(data, {
+                                activeIndex: index,
+                                prevIndex: current
+                            }))];
+                    case 1:
+                        rendererEvent = _b.sent();
+                        if (rendererEvent === null || rendererEvent === void 0 ? void 0 : rendererEvent.prevented) {
+                            return [2 /*return*/];
+                        }
+                        this.setState({
+                            current: index
+                        });
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    Carousel.prototype.renderDots = function () {
+        var _this = this;
+        var cx = this.props.classnames;
+        var _a = this.state, current = _a.current, options = _a.options;
+        return (React.createElement("div", { className: cx('Carousel-dotsControl'), onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, Array.from({ length: options.length }).map(function (_, i) { return (React.createElement("span", { key: i, onClick: function () { return _this.changeSlide(i); }, className: cx('Carousel-dot', current === i ? 'is-active' : '') })); })));
+    };
+    Carousel.prototype.renderArrows = function () {
+        var cx = this.props.classnames;
+        return (React.createElement("div", { className: cx('Carousel-arrowsControl'), onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave },
+            React.createElement("div", { className: cx('Carousel-leftArrow'), onClick: this.prev },
+                React.createElement(Icon, { icon: "left-arrow", className: "icon" })),
+            React.createElement("div", { className: cx('Carousel-rightArrow'), onClick: this.next },
+                React.createElement(Icon, { icon: "right-arrow", className: "icon" }))));
+    };
+    Carousel.prototype.handleMouseEnter = function () {
+        this.clearAutoTimeout();
+    };
+    Carousel.prototype.handleMouseLeave = function () {
+        this.prepareAutoSlide();
+    };
+    Carousel.prototype.render = function () {
+        var _this = this;
+        var _a = this.props, render = _a.render, className = _a.className, cx = _a.classnames, itemSchema = _a.itemSchema, animation = _a.animation, width = _a.width, height = _a.height, controls = _a.controls, controlsTheme = _a.controlsTheme, placeholder = _a.placeholder, data = _a.data, name = _a.name;
+        var _b = this.state, options = _b.options, current = _b.current, nextAnimation = _b.nextAnimation;
+        var body = null;
+        var carouselStyles = {};
+        width ? (carouselStyles.width = width + 'px') : '';
+        height ? (carouselStyles.height = height + 'px') : '';
+        var _c = [
+            controls.indexOf('dots') > -1,
+            controls.indexOf('arrows') > -1
+        ], dots = _c[0], arrows = _c[1];
+        var animationName = nextAnimation || animation;
+        if (Array.isArray(options) && options.length) {
+            body = (React.createElement("div", { ref: this.wrapperRef, className: cx('Carousel-container'), onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, options.map(function (option, key) { return (React.createElement(Transition, { mountOnEnter: true, unmountOnExit: true, in: key === current, timeout: 500, key: key }, function (status) {
+                var _a;
+                if (status === ENTERING) {
+                    _this.wrapperRef.current &&
+                        _this.wrapperRef.current.childNodes.forEach(function (item) { return item.offsetHeight; });
+                }
+                return (React.createElement("div", { className: cx('Carousel-item', animationName, animationStyles[status]) }, render("".concat(current, "/body"), itemSchema ? itemSchema : defaultSchema, {
+                    thumbMode: _this.props.thumbMode,
+                    data: createObject(data, isObject(option)
+                        ? option
+                        : (_a = { item: option }, _a[name] = option, _a))
+                })));
+            })); })));
+        }
+        return (React.createElement("div", { className: cx("Carousel Carousel--".concat(controlsTheme), className), style: carouselStyles },
+            body ? body : placeholder,
+            dots ? this.renderDots() : null,
+            arrows ? (React.createElement("div", { className: cx('Carousel-leftArrow'), onClick: this.prev },
+                React.createElement(Icon, { icon: "left-arrow", className: "icon" }))) : null,
+            arrows ? (React.createElement("div", { className: cx('Carousel-rightArrow'), onClick: this.next },
+                React.createElement(Icon, { icon: "right-arrow", className: "icon" }))) : null));
+    };
+    Carousel.defaultProps = {
+        auto: true,
+        interval: 5000,
+        duration: 500,
+        controlsTheme: 'light',
+        animation: 'fade',
+        controls: ['dots', 'arrows'],
+        placeholder: '-'
+    };
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], Carousel.prototype, "prepareAutoSlide", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [String]),
+        __metadata("design:returntype", void 0)
+    ], Carousel.prototype, "autoSlide", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [String, String]),
+        __metadata("design:returntype", Promise)
+    ], Carousel.prototype, "transitFramesTowards", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [String]),
+        __metadata("design:returntype", void 0)
+    ], Carousel.prototype, "getFrameId", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], Carousel.prototype, "next", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], Carousel.prototype, "prev", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], Carousel.prototype, "clearAutoTimeout", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Number]),
+        __metadata("design:returntype", Promise)
+    ], Carousel.prototype, "changeSlide", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], Carousel.prototype, "handleMouseEnter", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], Carousel.prototype, "handleMouseLeave", null);
+    return Carousel;
+}(React.Component));
+/** @class */ ((function (_super) {
+    __extends(CarouselRenderer, _super);
+    function CarouselRenderer(props, context) {
+        var _this = _super.call(this, props) || this;
+        var scoped = context;
+        scoped.registerComponent(_this);
+        return _this;
+    }
+    CarouselRenderer.prototype.componentWillUnmount = function () {
+        var _a;
+        (_a = _super.prototype.componentWillUnmount) === null || _a === void 0 ? void 0 : _a.call(this);
+        var scoped = this.context;
+        scoped.unRegisterComponent(this);
+    };
+    CarouselRenderer.contextType = ScopedContext;
+    CarouselRenderer = __decorate([
+        Renderer({
+            type: 'carousel'
+        }),
+        __metadata("design:paramtypes", [Object, Object])
+    ], CarouselRenderer);
+    return CarouselRenderer;
+})(Carousel));
+
+export { Carousel };

package/esm/renderers/Chart.d.ts

@@ -0,0 +1,116 @@
+import React from 'react';
+import { RendererProps } from 'amis-core';
+import { IServiceStore } from 'amis-core';
+import { IScopedContext } from 'amis-core';
+import { BaseSchema, SchemaApi, SchemaExpression, SchemaFunction, SchemaName, SchemaTokenizeableString } from '../Schema';
+import { ActionSchema } from './Action';
+/**
+ * Chart 图表渲染器。
+ * 文档：https://baidu.gitee.io/amis/docs/components/carousel
+ */
+export interface ChartSchema extends BaseSchema {
+    /**
+     * 指定为 chart 类型
+     */
+    type: 'chart';
+    /**
+     * Chart 主题配置
+     */
+    chartTheme?: any;
+    /**
+     * 图表配置接口
+     */
+    api?: SchemaApi;
+    /**
+     * 是否初始加载。
+     * @deprecated 建议直接配置 api 的 sendOn
+     */
+    initFetch?: boolean;
+    /**
+     * 是否初始加载用表达式来配置
+     * @deprecated 建议用 api.sendOn 属性。
+     */
+    initFetchOn?: SchemaExpression;
+    /**
+     * 配置echart的config，支持数据映射。如果用了数据映射，为了同步更新，请设置 trackExpression
+     */
+    config?: any;
+    /**
+     * 跟踪表达式，如果这个表达式的运行结果发生变化了，则会更新 Echart，当 config 中用了数据映射时有用。
+     */
+    trackExpression?: string;
+    /**
+     * 宽度设置
+     */
+    width?: number;
+    /**
+     * 高度设置
+     */
+    height?: number;
+    /**
+     * 刷新时间
+     */
+    interval?: number;
+    name?: SchemaName;
+    /**
+     * style样式
+     */
+    style?: {
+        [propName: string]: any;
+    };
+    dataFilter?: SchemaFunction;
+    source?: SchemaTokenizeableString;
+    /**
+     * 默认开启 Config 中的数据映射，如果想关闭，请开启此功能。
+     */
+    disableDataMapping?: boolean;
+    /**
+     * 点击行为配置，可以用来满足下钻操作等。
+     */
+    clickAction?: ActionSchema;
+    /**
+     * 默认配置时追加的，如果更新配置想完全替换配置请配置为 true.
+     */
+    replaceChartOption?: boolean;
+    /**
+     * 不可见的时候隐藏
+     */
+    unMountOnHidden?: boolean;
+}
+export interface ChartProps extends RendererProps, Omit<ChartSchema, 'type' | 'className'> {
+    chartRef?: (echart: any) => void;
+    onDataFilter?: (config: any, echarts: any, data?: any) => any;
+    onChartWillMount?: (echarts: any) => void | Promise<void>;
+    onChartMount?: (chart: any, echarts: any) => void;
+    onChartUnMount?: (chart: any, echarts: any) => void;
+    store: IServiceStore;
+}
+export declare class Chart extends React.Component<ChartProps> {
+    static defaultProps: Partial<ChartProps>;
+    static propsList: Array<string>;
+    ref: any;
+    echarts?: any;
+    unSensor: Function;
+    pending?: object;
+    pendingCtx?: any;
+    timer: ReturnType<typeof setTimeout>;
+    mounted: boolean;
+    reloadCancel?: Function;
+    constructor(props: ChartProps);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: ChartProps): void;
+    componentWillUnmount(): void;
+    handleClick(ctx: object): void;
+    refFn(ref: any): void;
+    reload(subpath?: string, query?: any): void;
+    receive(data: object): void;
+    renderChart(config?: object, data?: any): void;
+    reloadEcharts(config: any): void;
+    render(): JSX.Element;
+}
+export declare class ChartRenderer extends Chart {
+    static contextType: React.Context<IScopedContext>;
+    constructor(props: ChartProps, context: IScopedContext);
+    componentWillUnmount(): void;
+    setData(values: object): void;
+}