amis 2.0.0-rc.9 → 2.0.0

package/esm/renderers/AnchorNav.js

@@ -0,0 +1,97 @@
+/**
+ * amis v2.0.0
+ * Copyright 2018-2022 baidu
+ */
+
+import { __extends, __assign, __decorate, __metadata } from 'tslib';
+import React from 'react';
+import { isVisible, filter, autobind, Renderer } from 'amis-core';
+import { AnchorNavSection, AnchorNav as AnchorNav$1 } from 'amis-ui';
+import find from 'lodash/find';
+
+var AnchorNav = /** @class */ (function (_super) {
+    __extends(AnchorNav, _super);
+    function AnchorNav(props) {
+        var _this = _super.call(this, props) || this;
+        // 设置默认激活项
+        var links = props.links;
+        var active = 0;
+        if (typeof props.active !== 'undefined') {
+            active = props.active;
+        }
+        else {
+            var section = find(links, function (section) { return section.href === props.active; });
+            active =
+                section && section.href
+                    ? section.href
+                    : (links[0] && links[0].href) || 0;
+        }
+        _this.state = {
+            active: active
+        };
+        return _this;
+    }
+    AnchorNav.prototype.handleSelect = function (key) {
+        this.setState({
+            active: key
+        });
+    };
+    AnchorNav.prototype.locateTo = function (index) {
+        var links = this.props.links;
+        Array.isArray(links) &&
+            links[index] &&
+            this.setState({
+                active: links[index].href || index
+            });
+    };
+    AnchorNav.prototype.render = function () {
+        var _this = this;
+        var _a = this.props, cx = _a.classnames, ns = _a.classPrefix, className = _a.className, linkClassName = _a.linkClassName, sectionClassName = _a.sectionClassName, direction = _a.direction, sectionRender = _a.sectionRender, render = _a.render, data = _a.data;
+        var links = this.props.links;
+        if (!links) {
+            return null;
+        }
+        links = Array.isArray(links) ? links : [links];
+        var children = [];
+        children = links.map(function (section, index) {
+            return isVisible(section, data) ? (React.createElement(AnchorNavSection, __assign({}, section, { title: filter(section.title, data), key: index, name: section.href || index }), _this.renderSection
+                ? _this.renderSection(section, _this.props, index)
+                : sectionRender
+                    ? sectionRender(section, _this.props, index)
+                    : render("section/".concat(index), section.body || ''))) : null;
+        });
+        return (React.createElement(AnchorNav$1, { classPrefix: ns, classnames: cx, className: className, linkClassName: linkClassName, sectionClassName: sectionClassName, onSelect: this.handleSelect, active: this.state.active, direction: direction }, children));
+    };
+    AnchorNav.defaultProps = {
+        className: '',
+        linkClassName: '',
+        sectionClassName: ''
+    };
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], AnchorNav.prototype, "handleSelect", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Number]),
+        __metadata("design:returntype", void 0)
+    ], AnchorNav.prototype, "locateTo", null);
+    return AnchorNav;
+}(React.Component));
+/** @class */ ((function (_super) {
+    __extends(AnchorNavRenderer, _super);
+    function AnchorNavRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    AnchorNavRenderer = __decorate([
+        Renderer({
+            type: 'anchor-nav'
+        })
+    ], AnchorNavRenderer);
+    return AnchorNavRenderer;
+})(AnchorNav));
+
+export { AnchorNav as default };

package/esm/renderers/App.d.ts

@@ -0,0 +1,125 @@
+import React from 'react';
+import { RendererProps } from 'amis-core';
+import { BaseSchema, SchemaApi, SchemaClassName, SchemaCollection } from '../Schema';
+import { IScopedContext } from 'amis-core';
+import { IAppStore } from 'amis-core';
+export interface AppPage {
+    /**
+     * 菜单文字
+     */
+    label?: string;
+    /**
+     * 菜单图标，比如： fa fa-file
+     */
+    icon?: string;
+    /**
+     * 路由规则。比如：/banner/:id。当地址以 / 打头，则不继承上层的路径，否则将集成父级页面的路径。
+     */
+    url?: string;
+    /**
+     * 当match url 时跳转到目标地址.没有配置 schema 和 shcemaApi  时有效.
+     */
+    redirect?: string;
+    /**
+     * 当match url 转成渲染目标地址的页面.没有配置 schema 和 shcemaApi  时有效.
+     */
+    rewrite?: string;
+    /**
+     * 不要出现多个，如果出现多个只有第一个有用。在路由找不到的时候作为默认页面。
+     */
+    isDefaultPage?: boolean;
+    /**
+     * 二选一，如果配置了 url 一定要配置。否则不知道如何渲染。
+     */
+    schema?: any;
+    schemaApi?: any;
+    /**
+     * 单纯的地址。可以设置外部链接。
+     */
+    link?: string;
+    /**
+     * 支持多层级。
+     */
+    children?: Array<AppPage>;
+    /**
+     * 菜单上的类名
+     */
+    className?: SchemaClassName;
+    /**
+     * 是否在导航中可见，适合于那种需要携带参数才显示的页面。比如具体某个数据的编辑页面。
+     */
+    visible?: boolean;
+}
+/**
+ * App 渲染器，适合 JSSDK 用来做多页渲染。
+ * 文档：https://baidu.gitee.io/amis/docs/components/app
+ */
+export interface AppSchema extends BaseSchema {
+    /**
+     * 指定为 app 类型。
+     */
+    type: 'app';
+    api?: SchemaApi;
+    /**
+     * 系统名称
+     */
+    brandName?: string;
+    /**
+     * logo 图片地址，可以是 svg。
+     */
+    logo?: string;
+    /**
+     * 顶部区域
+     */
+    header?: SchemaCollection;
+    /**
+     * 边栏菜单前面的区域
+     */
+    asideBefore?: SchemaCollection;
+    /**
+     * 边栏菜单后面的区域
+     */
+    asideAfter?: SchemaCollection;
+    /**
+     * 页面集合。
+     */
+    pages?: Array<AppPage> | AppPage;
+    /**
+     * 底部区域。
+     */
+    footer?: SchemaCollection;
+    /**
+     * css 类名。
+     */
+    className?: SchemaClassName;
+    /**
+     * 显示面包屑路径。
+     */
+    showBreadcrumb?: boolean;
+}
+export interface AppProps extends RendererProps, Omit<AppSchema, 'type' | 'className'> {
+    children?: JSX.Element | ((props?: any) => JSX.Element);
+    store: IAppStore;
+}
+export default class App extends React.Component<AppProps, object> {
+    static propsList: Array<string>;
+    static defaultProps: {};
+    unWatchRouteChange?: () => void;
+    constructor(props: AppProps);
+    componentDidMount(): Promise<void>;
+    componentDidUpdate(prevProps: AppProps): Promise<void>;
+    componentWillUnmount(): void;
+    reload(subpath?: any, query?: any, ctx?: any, silent?: boolean): Promise<void>;
+    receive(values: object): void;
+    handleNavClick(e: React.MouseEvent): void;
+    renderHeader(): JSX.Element;
+    renderAside(): JSX.Element;
+    renderFooter(): JSX.Element | null;
+    render(): JSX.Element;
+}
+export declare class AppRenderer extends App {
+    static contextType: React.Context<IScopedContext>;
+    constructor(props: AppProps, context: IScopedContext);
+    componentWillUnmount(): void;
+    setData(values: object): void;
+}

package/esm/renderers/App.js

@@ -0,0 +1,198 @@
+/**
+ * amis v2.0.0
+ * Copyright 2018-2022 baidu
+ */
+
+import { __extends, __awaiter, __generator, __decorate, __metadata } from 'tslib';
+import React from 'react';
+import { Html, AsideNav, Layout, NotFound, Spinner } from 'amis-ui';
+import { isApiOutdated, isEffectiveApi, generateIcon, autobind, ScopedContext, Renderer, AppStore, replaceText } from 'amis-core';
+
+var App = /** @class */ (function (_super) {
+    __extends(App, _super);
+    function App(props) {
+        var _this = _super.call(this, props) || this;
+        var store = props.store;
+        store.syncProps(props, undefined, ['pages']);
+        store.updateActivePage(props.env);
+        if (props.env.watchRouteChange) {
+            _this.unWatchRouteChange = props.env.watchRouteChange(function () {
+                return store.updateActivePage(props.env);
+            });
+        }
+        return _this;
+    }
+    App.prototype.componentDidMount = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                this.reload();
+                return [2 /*return*/];
+            });
+        });
+    };
+    App.prototype.componentDidUpdate = function (prevProps) {
+        return __awaiter(this, void 0, void 0, function () {
+            var props, store;
+            return __generator(this, function (_a) {
+                props = this.props;
+                store = props.store;
+                store.syncProps(props, prevProps, ['pages']);
+                if (isApiOutdated(prevProps.api, props.api, prevProps.data, props.data)) {
+                    this.reload();
+                }
+                else if (props.location && props.location !== prevProps.location) {
+                    store.updateActivePage(props.env);
+                }
+                return [2 /*return*/];
+            });
+        });
+    };
+    App.prototype.componentWillUnmount = function () {
+        var _a;
+        (_a = this.unWatchRouteChange) === null || _a === void 0 ? void 0 : _a.call(this);
+    };
+    App.prototype.reload = function (subpath, query, ctx, silent) {
+        return __awaiter(this, void 0, void 0, function () {
+            var _a, api, store, env, json;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        if (query) {
+                            return [2 /*return*/, this.receive(query)];
+                        }
+                        _a = this.props, api = _a.api, store = _a.store, env = _a.env;
+                        if (!isEffectiveApi(api, store.data)) return [3 /*break*/, 2];
+                        return [4 /*yield*/, store.fetchInitData(api, store.data, {})];
+                    case 1:
+                        json = _b.sent();
+                        if (env.replaceText) {
+                            replaceText(json.data, env.replaceText, env.replaceTextIgnoreKeys);
+                        }
+                        if (json === null || json === void 0 ? void 0 : json.data.pages) {
+                            store.setPages(json.data.pages);
+                            store.updateActivePage(env);
+                        }
+                        _b.label = 2;
+                    case 2: return [2 /*return*/];
+                }
+            });
+        });
+    };
+    App.prototype.receive = function (values) {
+        var store = this.props.store;
+        store.updateData(values);
+        this.reload();
+    };
+    App.prototype.handleNavClick = function (e) {
+        e.preventDefault();
+        var env = this.props.env;
+        var link = e.currentTarget.getAttribute('href');
+        env.jumpTo(link);
+    };
+    App.prototype.renderHeader = function () {
+        var _a = this.props, cx = _a.classnames, brandName = _a.brandName, header = _a.header, render = _a.render, store = _a.store, logo = _a.logo;
+        return (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: cx('Layout-brandBar') },
+                React.createElement("div", { onClick: store.toggleOffScreen, className: cx('Layout-offScreenBtn') },
+                    React.createElement("i", { className: "bui-icon iconfont icon-collapse" })),
+                React.createElement("div", { className: cx('Layout-brand') },
+                    logo && ~logo.indexOf('<svg') ? (React.createElement(Html, { className: cx('AppLogo-html'), html: logo })) : logo ? (React.createElement("img", { className: cx('AppLogo'), src: logo })) : null,
+                    React.createElement("span", { className: "hidden-folded m-l-sm" }, brandName))),
+            React.createElement("div", { className: cx('Layout-headerBar') },
+                React.createElement("a", { onClick: store.toggleFolded, type: "button", className: cx('AppFoldBtn') },
+                    React.createElement("i", { className: "fa fa-".concat(store.folded ? 'indent' : 'dedent', " fa-fw") })),
+                header ? render('header', header) : null)));
+    };
+    App.prototype.renderAside = function () {
+        var _this = this;
+        var _a = this.props, store = _a.store, env = _a.env, asideBefore = _a.asideBefore, asideAfter = _a.asideAfter, render = _a.render;
+        return (React.createElement(React.Fragment, null,
+            asideBefore ? render('aside-before', asideBefore) : null,
+            React.createElement(AsideNav, { navigations: store.navigations, renderLink: function (_a, key) {
+                    var link = _a.link; _a.active; var toggleExpand = _a.toggleExpand, cx = _a.classnames, depth = _a.depth, subHeader = _a.subHeader;
+                    var children = [];
+                    if (link.visible === false) {
+                        return null;
+                    }
+                    if (!subHeader && link.children && link.children.length) {
+                        children.push(React.createElement("span", { key: "expand-toggle", className: cx('AsideNav-itemArrow'), onClick: function (e) { return toggleExpand(link, e); } }));
+                    }
+                    link.badge &&
+                        children.push(React.createElement("b", { key: "badge", className: cx("AsideNav-itemBadge", link.badgeClassName || 'bg-info') }, link.badge));
+                    if (!subHeader && link.icon) {
+                        children.push(generateIcon(cx, link.icon, 'AsideNav-itemIcon'));
+                    }
+                    else if (store.folded && depth === 1 && !subHeader) {
+                        children.push(React.createElement("i", { key: "icon", className: cx("AsideNav-itemIcon", link.children ? 'fa fa-folder' : 'fa fa-info') }));
+                    }
+                    children.push(React.createElement("span", { className: cx('AsideNav-itemLabel'), key: "label" }, link.label));
+                    return link.path ? (/^https?\:/.test(link.path) ? (React.createElement("a", { target: "_blank", href: link.path, rel: "noopener" }, children)) : (React.createElement("a", { onClick: _this.handleNavClick, href: link.path || (link.children && link.children[0].path) }, children))) : (React.createElement("a", { onClick: link.children ? function () { return toggleExpand(link); } : undefined }, children));
+                }, isActive: function (link) { return !!env.isCurrentUrl(link === null || link === void 0 ? void 0 : link.path, link); } }),
+            asideAfter ? render('aside-before', asideAfter) : null));
+    };
+    App.prototype.renderFooter = function () {
+        var _a = this.props, render = _a.render, footer = _a.footer;
+        return footer ? render('footer', footer) : null;
+    };
+    App.prototype.render = function () {
+        var _this = this;
+        var _a;
+        var _b = this.props; _b.className; _b.size; var cx = _b.classnames, store = _b.store, render = _b.render, _c = _b.showBreadcrumb, showBreadcrumb = _c === void 0 ? true : _c;
+        return (React.createElement(Layout, { header: this.renderHeader(), aside: this.renderAside(), footer: this.renderFooter(), folded: store.folded, offScreen: store.offScreen },
+            store.activePage && store.schema ? (React.createElement(React.Fragment, null,
+                showBreadcrumb && store.bcn.length ? (React.createElement("ul", { className: cx('AppBcn') }, store.bcn.map(function (item, index) {
+                    return (React.createElement("li", { key: index, className: cx('AppBcn-item') }, item.path ? (React.createElement("a", { href: item.path, onClick: _this.handleNavClick }, item.label)) : (item.label)));
+                }))) : null,
+                render('page', store.schema, {
+                    key: "".concat((_a = store.activePage) === null || _a === void 0 ? void 0 : _a.id, "-").concat(store.schemaKey),
+                    data: store.pageData
+                }))) : store.pages && !store.activePage ? (React.createElement(NotFound, null,
+                React.createElement("div", { className: "text-center" }, "\u9875\u9762\u4E0D\u5B58\u5728"))) : null,
+            React.createElement(Spinner, { overlay: true, show: store.loading || !store.pages, size: "lg" })));
+    };
+    App.propsList = [
+        'brandName',
+        'logo',
+        'header',
+        'asideBefore',
+        'asideAfter',
+        'pages',
+        'footer'
+    ];
+    App.defaultProps = {};
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], App.prototype, "handleNavClick", null);
+    return App;
+}(React.Component));
+/** @class */ ((function (_super) {
+    __extends(AppRenderer, _super);
+    function AppRenderer(props, context) {
+        var _this = _super.call(this, props) || this;
+        var scoped = context;
+        scoped.registerComponent(_this);
+        return _this;
+    }
+    AppRenderer.prototype.componentWillUnmount = function () {
+        var scoped = this.context;
+        scoped.unRegisterComponent(this);
+        _super.prototype.componentWillUnmount.call(this);
+    };
+    AppRenderer.prototype.setData = function (values) {
+        return this.props.store.updateData(values);
+    };
+    AppRenderer.contextType = ScopedContext;
+    AppRenderer = __decorate([
+        Renderer({
+            type: 'app',
+            storeType: AppStore.name
+        }),
+        __metadata("design:paramtypes", [Object, Object])
+    ], AppRenderer);
+    return AppRenderer;
+})(App));
+
+export { App as default };

package/esm/renderers/Audio.d.ts

@@ -0,0 +1,88 @@
+import React from 'react';
+import { RendererProps } from 'amis-core';
+import { BaseSchema, SchemaUrlPath } from '../Schema';
+/**
+ * Audio 音频渲染器。
+ * 文档：https://baidu.gitee.io/amis/docs/components/audio
+ */
+export interface AudioSchema extends BaseSchema {
+    /**
+     * 指定为音频播放器
+     */
+    type: 'audio';
+    /**
+     * 是否是内联模式
+     */
+    inline?: boolean;
+    /**
+     * "视频播放地址, 支持 $ 取变量。
+     */
+    src?: SchemaUrlPath;
+    /**
+     * 是否循环播放
+     */
+    loop?: boolean;
+    /**
+     * 是否自动播放
+     */
+    autoPlay?: boolean;
+    /**
+     * 配置可选播放倍速
+     */
+    rates?: Array<number>;
+    /**
+     * 可以配置控制器
+     */
+    controls?: Array<'rates' | 'play' | 'time' | 'process' | 'volume'>;
+}
+export interface AudioProps extends RendererProps, Omit<AudioSchema, 'className'> {
+}
+export interface AudioState {
+    src?: string;
+    isReady?: boolean;
+    muted?: boolean;
+    playing?: boolean;
+    played: number;
+    seeking?: boolean;
+    volume: number;
+    prevVolume: number;
+    loaded?: number;
+    playbackRate: number;
+    showHandlePlaybackRate: boolean;
+    showHandleVolume: boolean;
+}
+export declare class Audio extends React.Component<AudioProps, AudioState> {
+    audio: HTMLMediaElement;
+    progressTimeout: ReturnType<typeof setTimeout>;
+    durationTimeout: ReturnType<typeof setTimeout>;
+    static defaultProps: Pick<AudioProps, 'inline' | 'autoPlay' | 'playbackRate' | 'loop' | 'rates' | 'progressInterval' | 'controls'>;
+    state: AudioState;
+    componentWillUnmount(): void;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: AudioProps): void;
+    progress(): void;
+    audioRef(audio: HTMLMediaElement): void;
+    load(): void;
+    handlePlaybackRate(rate: number): void;
+    handleMute(): void;
+    handlePlaying(): void;
+    getCurrentTime(): string;
+    getDuration(): string | number;
+    onDurationCheck(): void;
+    onSeekChange(e: any): void;
+    onSeekMouseDown(): void;
+    onSeekMouseUp(e: any): void;
+    setVolume(e: any): void;
+    formatTime(seconds: number): string;
+    pad(string: number): string;
+    toggleHandlePlaybackRate(): void;
+    toggleHandleVolume(type: boolean): void;
+    renderRates(): JSX.Element | null;
+    renderPlay(): JSX.Element;
+    renderTime(): JSX.Element;
+    renderProcess(): JSX.Element;
+    renderVolume(): JSX.Element;
+    render(): JSX.Element;
+}
+export declare class AudioRenderer extends Audio {
+}