amis-ui 1.0.0-beta.0

package/esm-dist/components/Alert.js

@@ -0,0 +1,188 @@
+/**
+ * amis-ui v1.0.0-beta.0
+ * Copyright 2018-2022 fex
+ */
+
+import { __extends } from 'tslib';
+import React__default from 'react';
+import { render } from 'react-dom';
+import FinalModal from './Modal.js';
+import Button from './Button.js';
+import { themeable, localeable } from 'amis-core';
+import Html from './Html.js';
+
+/**
+ * @file Alert
+ * @author fex
+ */
+var Alert = /** @class */ (function (_super) {
+    __extends(Alert, _super);
+    function Alert(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = {
+            show: false,
+            title: '',
+            content: '',
+            confirm: false
+        };
+        _this.close = _this.close.bind(_this);
+        _this.handleConfirm = _this.handleConfirm.bind(_this);
+        _this.handleCancel = _this.handleCancel.bind(_this);
+        _this.modalRef = _this.modalRef.bind(_this);
+        _this.handleFormSubmit = _this.handleFormSubmit.bind(_this);
+        _this.scopeRef = _this.scopeRef.bind(_this);
+        Alert.instance = _this;
+        return _this;
+    }
+    Alert.getInstance = function () {
+        if (!Alert.instance) {
+            console.warn('Alert 组件应该没有被渲染，所以隐性的渲染到 body 了');
+            var container = document.body;
+            var div = document.createElement('div');
+            container.appendChild(div);
+            render(React__default.createElement(FinnalAlert, null), div);
+        }
+        return Alert.instance;
+    };
+    Alert.prototype.componentDidMount = function () {
+        this._body && (this._body.innerHTML = this.state.content);
+    };
+    Alert.prototype.componentDidUpdate = function (prevProps, prevState) {
+        if (prevState.content !== this.state.content) {
+            this._body && (this._body.innerHTML = this.state.content);
+        }
+    };
+    Alert.prototype.componentWillUnmount = function () {
+        Alert.instance = null;
+    };
+    Alert.prototype.scopeRef = function (schemaSope) {
+        this.schemaSope = schemaSope;
+    };
+    Alert.prototype.handleConfirm = function () {
+        var _a;
+        var form = (_a = this.schemaSope) === null || _a === void 0 ? void 0 : _a.getComponentByName('form');
+        if (form) {
+            form.doAction({ type: 'submit' });
+        }
+        else {
+            this.close(true);
+        }
+    };
+    Alert.prototype.handleCancel = function () {
+        this.close(false);
+    };
+    Alert.prototype.close = function (confirmed) {
+        var _this = this;
+        var isConfirm = this.state.confirm || this.state.prompt;
+        this.setState({
+            show: false,
+            prompt: false,
+            confirm: false
+        }, isConfirm ? function () { return _this._resolve(confirmed); } /*this._reject()*/ : undefined);
+    };
+    Alert.prototype.alert = function (content, title) {
+        this.setState({
+            title: title,
+            content: content,
+            show: true,
+            confirm: false
+        });
+    };
+    Alert.prototype.confirm = function (content, title, confirmText) {
+        var _this = this;
+        this.setState({
+            title: title,
+            content: content,
+            show: true,
+            confirm: true,
+            confirmText: confirmText
+        });
+        return new Promise(function (resolve) {
+            _this._resolve = resolve;
+        });
+    };
+    Alert.prototype.prompt = function (controls, defaultValue, title, confirmText) {
+        var _this = this;
+        if (title === void 0) { title = 'placeholder.enter'; }
+        if (confirmText === void 0) { confirmText = 'confirm'; }
+        if (typeof controls === 'string') {
+            // 兼容浏览器标准用法。
+            controls = [
+                {
+                    name: 'text',
+                    label: controls,
+                    type: 'text'
+                }
+            ];
+            if (typeof defaultValue === 'string') {
+                defaultValue = {
+                    text: defaultValue
+                };
+            }
+        }
+        else if (!Array.isArray(controls)) {
+            controls = [controls];
+        }
+        this.setState({
+            title: title,
+            controls: controls,
+            show: true,
+            prompt: true,
+            value: defaultValue,
+            confirmText: confirmText
+        });
+        return new Promise(function (resolve) {
+            _this._resolve = resolve;
+        });
+    };
+    Alert.prototype.modalRef = function (ref) {
+        this._modal = ref;
+    };
+    Alert.prototype.handleFormSubmit = function (values) {
+        this.close(values);
+    };
+    Alert.prototype.render = function () {
+        var _a, _b;
+        var _c = this.props, container = _c.container, cancelText = _c.cancelText, confirmText = _c.confirmText, title = _c.title, confirmBtnLevel = _c.confirmBtnLevel, alertBtnLevel = _c.alertBtnLevel, cx = _c.classnames;
+        var theme = this.props.theme || 'cxd';
+        if (theme === 'default') {
+            theme = 'cxd';
+        }
+        var __ = this.props.translate;
+        var finalTitle = __((_a = this.state.title) !== null && _a !== void 0 ? _a : title);
+        var finalConfirmText = __((_b = this.state.confirmText) !== null && _b !== void 0 ? _b : confirmText);
+        return (React__default.createElement(FinalModal, { show: this.state.show, onHide: this.handleCancel, container: container, ref: this.modalRef, closeOnEsc: true },
+            finalTitle ? (React__default.createElement("div", { className: cx('Modal-header') },
+                React__default.createElement("div", { className: cx('Modal-title') }, finalTitle))) : null,
+            React__default.createElement("div", { className: cx('Modal-body') }, this.state.prompt ? (renderForm(this.state.controls, this.state.value, this.handleFormSubmit, this.scopeRef, theme)) : (React__default.createElement(Html, { html: this.state.content }))),
+            finalConfirmText ? (React__default.createElement("div", { className: cx('Modal-footer') },
+                this.state.confirm || this.state.prompt ? (React__default.createElement(Button, { onClick: this.handleCancel }, __(cancelText))) : null,
+                React__default.createElement(Button, { level: this.state.confirm || this.state.prompt
+                        ? confirmBtnLevel
+                        : alertBtnLevel, onClick: this.handleConfirm }, finalConfirmText))) : null));
+    };
+    Alert.instance = null;
+    Alert.defaultProps = {
+        confirmText: 'confirm',
+        cancelText: 'cancel',
+        title: 'Alert.info',
+        alertBtnLevel: 'primary',
+        confirmBtnLevel: 'danger'
+    };
+    return Alert;
+}(React__default.Component));
+var renderSchemaFn;
+function renderForm(controls, value, callback, scopeRef, theme) {
+    if (value === void 0) { value = {}; }
+    return renderSchemaFn === null || renderSchemaFn === void 0 ? void 0 : renderSchemaFn(controls, value, callback, scopeRef, theme);
+}
+var alert = function (content, title) { return Alert.getInstance().alert(content, title); };
+var confirm = function (content, title, confirmText) {
+    return Alert.getInstance().confirm(content, title, confirmText);
+};
+var prompt = function (controls, defaultvalue, title, confirmText) {
+    return Alert.getInstance().prompt(controls, defaultvalue, title, confirmText);
+};
+var FinnalAlert = themeable(localeable(Alert));
+
+export { Alert, FinnalAlert, alert, confirm, FinnalAlert as default, prompt };

package/esm-dist/components/Alert2.d.ts

@@ -0,0 +1,66 @@
+/**
+ * @file Alert2
+ * @author fex
+ */
+/// <reference types="hoist-non-react-statics" />
+import React from 'react';
+import { ClassNamesFn } from 'amis-core';
+export interface AlertProps {
+    level: 'danger' | 'info' | 'success' | 'warning';
+    title?: string;
+    className?: string;
+    showCloseButton: boolean;
+    showIcon?: boolean;
+    icon?: string | React.ReactNode;
+    iconClassName?: string;
+    closeButtonClassName?: string;
+    onClose?: () => void;
+    classnames: ClassNamesFn;
+    classPrefix: string;
+}
+export interface AlertState {
+    show: boolean;
+}
+export declare class Alert extends React.Component<AlertProps, AlertState> {
+    static defaultProps: Pick<AlertProps, 'level' | 'className' | 'showCloseButton'>;
+    static propsList: Array<string>;
+    constructor(props: AlertProps);
+    handleClick(): void;
+    render(): JSX.Element | null;
+}
+declare const _default: {
+    new (props: Pick<Omit<AlertProps, keyof import("amis-core").ThemeProps>, "title" | "icon" | "onClose" | "showIcon" | "iconClassName" | "closeButtonClassName"> & Partial<Pick<Omit<AlertProps, keyof import("amis-core").ThemeProps>, "showCloseButton" | "level">> & Partial<Pick<Pick<AlertProps, "className" | "showCloseButton" | "level">, "className">> & import("amis-core/dist/theme").ThemeOutterProps): {
+        ref: any;
+        childRef(ref: any): void;
+        getWrappedInstance(): any;
+        render(): JSX.Element;
+        context: any;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Pick<Omit<AlertProps, keyof import("amis-core").ThemeProps>, "title" | "icon" | "onClose" | "showIcon" | "iconClassName" | "closeButtonClassName"> & Partial<Pick<Omit<AlertProps, keyof import("amis-core").ThemeProps>, "showCloseButton" | "level">> & Partial<Pick<Pick<AlertProps, "className" | "showCloseButton" | "level">, "className">> & import("amis-core/dist/theme").ThemeOutterProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<Pick<Omit<AlertProps, keyof import("amis-core").ThemeProps>, "title" | "icon" | "onClose" | "showIcon" | "iconClassName" | "closeButtonClassName"> & Partial<Pick<Omit<AlertProps, keyof import("amis-core").ThemeProps>, "showCloseButton" | "level">> & Partial<Pick<Pick<AlertProps, "className" | "showCloseButton" | "level">, "className">> & import("amis-core/dist/theme").ThemeOutterProps> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<Pick<Omit<AlertProps, keyof import("amis-core").ThemeProps>, "title" | "icon" | "onClose" | "showIcon" | "iconClassName" | "closeButtonClassName"> & Partial<Pick<Omit<AlertProps, keyof import("amis-core").ThemeProps>, "showCloseButton" | "level">> & Partial<Pick<Pick<AlertProps, "className" | "showCloseButton" | "level">, "className">> & import("amis-core/dist/theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<Pick<Omit<AlertProps, keyof import("amis-core").ThemeProps>, "title" | "icon" | "onClose" | "showIcon" | "iconClassName" | "closeButtonClassName"> & Partial<Pick<Omit<AlertProps, keyof import("amis-core").ThemeProps>, "showCloseButton" | "level">> & Partial<Pick<Pick<AlertProps, "className" | "showCloseButton" | "level">, "className">> & import("amis-core/dist/theme").ThemeOutterProps>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<Pick<Omit<AlertProps, keyof import("amis-core").ThemeProps>, "title" | "icon" | "onClose" | "showIcon" | "iconClassName" | "closeButtonClassName"> & Partial<Pick<Omit<AlertProps, keyof import("amis-core").ThemeProps>, "showCloseButton" | "level">> & Partial<Pick<Pick<AlertProps, "className" | "showCloseButton" | "level">, "className">> & import("amis-core/dist/theme").ThemeOutterProps>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<AlertProps, keyof import("amis-core").ThemeProps>, "title" | "icon" | "onClose" | "showIcon" | "iconClassName" | "closeButtonClassName"> & Partial<Pick<Omit<AlertProps, keyof import("amis-core").ThemeProps>, "showCloseButton" | "level">> & Partial<Pick<Pick<AlertProps, "className" | "showCloseButton" | "level">, "className">> & import("amis-core/dist/theme").ThemeOutterProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<AlertProps, keyof import("amis-core").ThemeProps>, "title" | "icon" | "onClose" | "showIcon" | "iconClassName" | "closeButtonClassName"> & Partial<Pick<Omit<AlertProps, keyof import("amis-core").ThemeProps>, "showCloseButton" | "level">> & Partial<Pick<Pick<AlertProps, "className" | "showCloseButton" | "level">, "className">> & import("amis-core/dist/theme").ThemeOutterProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<Pick<Omit<AlertProps, keyof import("amis-core").ThemeProps>, "title" | "icon" | "onClose" | "showIcon" | "iconClassName" | "closeButtonClassName"> & Partial<Pick<Omit<AlertProps, keyof import("amis-core").ThemeProps>, "showCloseButton" | "level">> & Partial<Pick<Pick<AlertProps, "className" | "showCloseButton" | "level">, "className">> & import("amis-core/dist/theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<Pick<Omit<AlertProps, keyof import("amis-core").ThemeProps>, "title" | "icon" | "onClose" | "showIcon" | "iconClassName" | "closeButtonClassName"> & Partial<Pick<Omit<AlertProps, keyof import("amis-core").ThemeProps>, "showCloseButton" | "level">> & Partial<Pick<Pick<AlertProps, "className" | "showCloseButton" | "level">, "className">> & import("amis-core/dist/theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    displayName: string;
+    contextType: React.Context<string>;
+    ComposedComponent: React.ComponentType<typeof Alert>;
+} & import("hoist-non-react-statics").NonReactStatics<typeof Alert, {}> & {
+    ComposedComponent: typeof Alert;
+};
+export default _default;

package/esm-dist/components/Alert2.js

@@ -0,0 +1,60 @@
+/**
+ * amis-ui v1.0.0-beta.0
+ * Copyright 2018-2022 fex
+ */
+
+import { __extends } from 'tslib';
+import React__default from 'react';
+import { generateIcon, themeable } from 'amis-core';
+import { getIcon, Icon } from './icons.js';
+
+/**
+ * @file Alert2
+ * @author fex
+ */
+var Alert = /** @class */ (function (_super) {
+    __extends(Alert, _super);
+    function Alert(props) {
+        var _this = _super.call(this, props) || this;
+        _this.handleClick = _this.handleClick.bind(_this);
+        _this.state = {
+            show: true
+        };
+        return _this;
+    }
+    Alert.prototype.handleClick = function () {
+        this.setState({
+            show: false
+        }, this.props.onClose);
+    };
+    Alert.prototype.render = function () {
+        var _a;
+        var _b = this.props, cx = _b.classnames, className = _b.className, level = _b.level, children = _b.children, showCloseButton = _b.showCloseButton, title = _b.title, icon = _b.icon, showIcon = _b.showIcon, iconClassName = _b.iconClassName, closeButtonClassName = _b.closeButtonClassName;
+        // 优先使用内置svg，其次使用icon库
+        var iconNode = icon ? (typeof icon === 'string' ? (getIcon(icon) ? (React__default.createElement(Icon, { icon: icon, className: cx("icon") })) : (generateIcon(cx, icon, 'icon'))) : React__default.isValidElement(icon) ? (React__default.cloneElement(icon, {
+            className: cx("Alert-icon", (_a = icon.props) === null || _a === void 0 ? void 0 : _a.className)
+        })) : null) : showIcon ? (React__default.createElement(Icon, { icon: "alert-".concat(level), className: cx("icon") })) : null;
+        return this.state.show ? (React__default.createElement("div", { className: cx('Alert', level ? "Alert--".concat(level) : '', className) },
+            showIcon && iconNode ? (React__default.createElement("div", { className: cx('Alert-icon', iconClassName) }, iconNode)) : null,
+            React__default.createElement("div", { className: cx('Alert-content') },
+                title ? React__default.createElement("div", { className: cx('Alert-title') }, title) : null,
+                React__default.createElement("div", { className: cx('Alert-desc') }, children)),
+            showCloseButton ? (React__default.createElement("button", { className: cx('Alert-close', closeButtonClassName), onClick: this.handleClick, type: "button" },
+                React__default.createElement(Icon, { icon: "close", className: "icon" }))) : null)) : null;
+    };
+    Alert.defaultProps = {
+        level: 'info',
+        className: '',
+        showCloseButton: false
+    };
+    Alert.propsList = [
+        'level',
+        'className',
+        'showCloseButton',
+        'onClose'
+    ];
+    return Alert;
+}(React__default.Component));
+var Alert2 = themeable(Alert);
+
+export { Alert, Alert2 as default };

package/esm-dist/components/AnchorNav.d.ts

@@ -0,0 +1,118 @@
+/**
+ * @file AnchorNav
+ * @description 锚点导航
+ * @author hsm-lv
+ */
+/// <reference types="hoist-non-react-statics" />
+import React from 'react';
+import { ThemeProps } from 'amis-core';
+import type { PlainObject, Schema } from 'amis-core/dist/types';
+export interface AnchorNavSectionProps extends ThemeProps {
+    title?: string;
+    name: string | number;
+    body?: Schema;
+    className?: string;
+}
+declare class AnchorNavSectionComponent extends React.PureComponent<AnchorNavSectionProps> {
+    contentDom: any;
+    contentRef: (ref: any) => any;
+    render(): JSX.Element;
+}
+export declare const AnchorNavSection: {
+    new (props: Omit<AnchorNavSectionProps, keyof ThemeProps> & import("amis-core/dist/theme").ThemeOutterProps): {
+        ref: any;
+        childRef(ref: any): void;
+        getWrappedInstance(): any;
+        render(): JSX.Element;
+        context: any;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Omit<AnchorNavSectionProps, keyof ThemeProps> & import("amis-core/dist/theme").ThemeOutterProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<Omit<AnchorNavSectionProps, keyof ThemeProps> & import("amis-core/dist/theme").ThemeOutterProps> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<Omit<AnchorNavSectionProps, keyof ThemeProps> & import("amis-core/dist/theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<Omit<AnchorNavSectionProps, keyof ThemeProps> & import("amis-core/dist/theme").ThemeOutterProps>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<Omit<AnchorNavSectionProps, keyof ThemeProps> & import("amis-core/dist/theme").ThemeOutterProps>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<Omit<AnchorNavSectionProps, keyof ThemeProps> & import("amis-core/dist/theme").ThemeOutterProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Omit<AnchorNavSectionProps, keyof ThemeProps> & import("amis-core/dist/theme").ThemeOutterProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<Omit<AnchorNavSectionProps, keyof ThemeProps> & import("amis-core/dist/theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<Omit<AnchorNavSectionProps, keyof ThemeProps> & import("amis-core/dist/theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    displayName: string;
+    contextType: React.Context<string>;
+    ComposedComponent: React.ComponentType<typeof AnchorNavSectionComponent>;
+} & import("hoist-non-react-statics").NonReactStatics<typeof AnchorNavSectionComponent, {}> & {
+    ComposedComponent: typeof AnchorNavSectionComponent;
+};
+export interface AnchorNavProps extends ThemeProps {
+    links?: Array<AnchorNavSectionProps>;
+    active?: string | number;
+    linkClassName?: string;
+    sectionClassName?: string;
+    sectionRender?: (section: AnchorNavSectionProps, props?: AnchorNavProps) => JSX.Element;
+    onSelect?: (key: string | number) => void;
+    direction?: 'vertical' | 'horizontal';
+}
+export interface AnchorNavState {
+    offsetArr: PlainObject[];
+    fromSelect: boolean;
+}
+export declare class AnchorNav extends React.Component<AnchorNavProps, AnchorNavState> {
+    static defaultProps: Pick<AnchorNavProps, 'linkClassName' | 'sectionClassName' | 'direction'>;
+    contentDom: React.RefObject<HTMLDivElement>;
+    componentDidMount(): void;
+    scrollToNav(e: Event): void;
+    scrollToSection(key: string | number): void;
+    handleSelect(key: string | number): void;
+    fireSelect(key: string | number): void;
+    renderLink(link: any, index: number): JSX.Element | undefined;
+    renderSection(section: any, index: number): React.DetailedReactHTMLElement<any, HTMLElement> | undefined;
+    render(): JSX.Element | null;
+}
+declare const _default: {
+    new (props: Pick<Omit<AnchorNavProps, keyof ThemeProps>, "links" | "onSelect" | "active" | "sectionRender"> & Partial<Pick<Omit<AnchorNavProps, keyof ThemeProps>, "direction" | "linkClassName" | "sectionClassName">> & Partial<Pick<Pick<AnchorNavProps, "direction" | "linkClassName" | "sectionClassName">, never>> & import("amis-core/dist/theme").ThemeOutterProps): {
+        ref: any;
+        childRef(ref: any): void;
+        getWrappedInstance(): any;
+        render(): JSX.Element;
+        context: any;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Pick<Omit<AnchorNavProps, keyof ThemeProps>, "links" | "onSelect" | "active" | "sectionRender"> & Partial<Pick<Omit<AnchorNavProps, keyof ThemeProps>, "direction" | "linkClassName" | "sectionClassName">> & Partial<Pick<Pick<AnchorNavProps, "direction" | "linkClassName" | "sectionClassName">, never>> & import("amis-core/dist/theme").ThemeOutterProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<Pick<Omit<AnchorNavProps, keyof ThemeProps>, "links" | "onSelect" | "active" | "sectionRender"> & Partial<Pick<Omit<AnchorNavProps, keyof ThemeProps>, "direction" | "linkClassName" | "sectionClassName">> & Partial<Pick<Pick<AnchorNavProps, "direction" | "linkClassName" | "sectionClassName">, never>> & import("amis-core/dist/theme").ThemeOutterProps> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<Pick<Omit<AnchorNavProps, keyof ThemeProps>, "links" | "onSelect" | "active" | "sectionRender"> & Partial<Pick<Omit<AnchorNavProps, keyof ThemeProps>, "direction" | "linkClassName" | "sectionClassName">> & Partial<Pick<Pick<AnchorNavProps, "direction" | "linkClassName" | "sectionClassName">, never>> & import("amis-core/dist/theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<Pick<Omit<AnchorNavProps, keyof ThemeProps>, "links" | "onSelect" | "active" | "sectionRender"> & Partial<Pick<Omit<AnchorNavProps, keyof ThemeProps>, "direction" | "linkClassName" | "sectionClassName">> & Partial<Pick<Pick<AnchorNavProps, "direction" | "linkClassName" | "sectionClassName">, never>> & import("amis-core/dist/theme").ThemeOutterProps>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<Pick<Omit<AnchorNavProps, keyof ThemeProps>, "links" | "onSelect" | "active" | "sectionRender"> & Partial<Pick<Omit<AnchorNavProps, keyof ThemeProps>, "direction" | "linkClassName" | "sectionClassName">> & Partial<Pick<Pick<AnchorNavProps, "direction" | "linkClassName" | "sectionClassName">, never>> & import("amis-core/dist/theme").ThemeOutterProps>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<AnchorNavProps, keyof ThemeProps>, "links" | "onSelect" | "active" | "sectionRender"> & Partial<Pick<Omit<AnchorNavProps, keyof ThemeProps>, "direction" | "linkClassName" | "sectionClassName">> & Partial<Pick<Pick<AnchorNavProps, "direction" | "linkClassName" | "sectionClassName">, never>> & import("amis-core/dist/theme").ThemeOutterProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<AnchorNavProps, keyof ThemeProps>, "links" | "onSelect" | "active" | "sectionRender"> & Partial<Pick<Omit<AnchorNavProps, keyof ThemeProps>, "direction" | "linkClassName" | "sectionClassName">> & Partial<Pick<Pick<AnchorNavProps, "direction" | "linkClassName" | "sectionClassName">, never>> & import("amis-core/dist/theme").ThemeOutterProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<Pick<Omit<AnchorNavProps, keyof ThemeProps>, "links" | "onSelect" | "active" | "sectionRender"> & Partial<Pick<Omit<AnchorNavProps, keyof ThemeProps>, "direction" | "linkClassName" | "sectionClassName">> & Partial<Pick<Pick<AnchorNavProps, "direction" | "linkClassName" | "sectionClassName">, never>> & import("amis-core/dist/theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<Pick<Omit<AnchorNavProps, keyof ThemeProps>, "links" | "onSelect" | "active" | "sectionRender"> & Partial<Pick<Omit<AnchorNavProps, keyof ThemeProps>, "direction" | "linkClassName" | "sectionClassName">> & Partial<Pick<Pick<AnchorNavProps, "direction" | "linkClassName" | "sectionClassName">, never>> & import("amis-core/dist/theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    displayName: string;
+    contextType: React.Context<string>;
+    ComposedComponent: React.ComponentType<typeof AnchorNav>;
+} & import("hoist-non-react-statics").NonReactStatics<typeof AnchorNav, {}> & {
+    ComposedComponent: typeof AnchorNav;
+} & {
+    AnchorNavSection: typeof AnchorNavSection;
+};
+export default _default;

package/esm-dist/components/AnchorNav.js

@@ -0,0 +1,171 @@
+/**
+ * amis-ui v1.0.0-beta.0
+ * Copyright 2018-2022 fex
+ */
+
+import { __extends, __assign, __decorate, __metadata } from 'tslib';
+import React__default from 'react';
+import { themeable, autobind } from 'amis-core';
+import { uncontrollable } from 'uncontrollable';
+import find from 'lodash/find';
+
+/**
+ * @file AnchorNav
+ * @description 锚点导航
+ * @author hsm-lv
+ */
+var AnchorNavSectionComponent = /** @class */ (function (_super) {
+    __extends(AnchorNavSectionComponent, _super);
+    function AnchorNavSectionComponent() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.contentRef = function (ref) { return (_this.contentDom = ref); };
+        return _this;
+    }
+    AnchorNavSectionComponent.prototype.render = function () {
+        var _a = this.props, cx = _a.classnames, children = _a.children, className = _a.className;
+        return (React__default.createElement("div", { ref: this.contentRef, className: cx('AnchorNav-section', className) }, children));
+    };
+    return AnchorNavSectionComponent;
+}(React__default.PureComponent));
+themeable(AnchorNavSectionComponent);
+var AnchorNav = /** @class */ (function (_super) {
+    __extends(AnchorNav, _super);
+    function AnchorNav() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        // 滚动区域DOM
+        _this.contentDom = React__default.createRef();
+        return _this;
+    }
+    AnchorNav.prototype.componentDidMount = function () {
+        var _this = this;
+        // 初始化滚动标识
+        this.setState({ fromSelect: false });
+        // add scroll event
+        var sectionRootDom = this.contentDom && this.contentDom.current;
+        sectionRootDom.addEventListener('scroll', this.scrollToNav);
+        var offsetArr = [];
+        var _a = this.props, children = _a.children, active = _a.active;
+        // 收集段落区域offsetTop
+        children &&
+            React__default.Children.forEach(children, function (section, index) {
+                offsetArr.push({
+                    key: section.props.name,
+                    offsetTop: sectionRootDom.children[index].offsetTop
+                });
+            });
+        this.setState({
+            offsetArr: offsetArr
+        }, function () { return active && _this.scrollToSection(active); });
+    };
+    AnchorNav.prototype.scrollToNav = function (e) {
+        var _this = this;
+        if (this.state.fromSelect) {
+            return;
+        }
+        // 获取滚动的scrollTop
+        var scrollTop = e.target.scrollTop;
+        // 判断scrollTop所在区域
+        var offsetArr = this.state.offsetArr;
+        var firstSection = offsetArr[0];
+        var lastSection = offsetArr[offsetArr.length - 1];
+        // 首层偏移
+        var offset = scrollTop + firstSection.offsetTop;
+        // 首层
+        if (offset <= firstSection.offsetTop) {
+            this.fireSelect(firstSection.key);
+        }
+        // 最后一层
+        else if (offset >= lastSection.offsetTop) {
+            this.fireSelect(lastSection.key);
+        }
+        else {
+            // 段落区间判断
+            offsetArr.forEach(function (item, index) {
+                if (offset >= item.offsetTop &&
+                    offset < offsetArr[index + 1].offsetTop) {
+                    _this.fireSelect(item.key);
+                }
+            });
+        }
+    };
+    AnchorNav.prototype.scrollToSection = function (key) {
+        // 获取指定段落的offsettop
+        var offsetArr = this.state.offsetArr;
+        var section = find(offsetArr, function (item) { return item.key === key; });
+        var sectionRootDom = this.contentDom && this.contentDom.current;
+        // 滚动到指定段落
+        section &&
+            (sectionRootDom.scrollTop = section.offsetTop - offsetArr[0].offsetTop);
+    };
+    AnchorNav.prototype.handleSelect = function (key) {
+        // 标记滚动来自导航选择
+        this.setState({ fromSelect: true });
+        // 滚动到对应段落
+        this.scrollToSection(key);
+        var sectionRootDom = this.contentDom && this.contentDom.current;
+        // 如果已经滚到底就不去更新导航选中了
+        if (sectionRootDom.scrollHeight - sectionRootDom.scrollTop <
+            sectionRootDom.clientHeight) {
+            // fire event
+            this.fireSelect(key);
+        }
+        // 取消标记
+        this.setState({ fromSelect: false });
+    };
+    AnchorNav.prototype.fireSelect = function (key) {
+        var onSelect = this.props.onSelect;
+        onSelect && onSelect(key);
+    };
+    AnchorNav.prototype.renderLink = function (link, index) {
+        var _this = this;
+        if (!link) {
+            return;
+        }
+        var _a = this.props, cx = _a.classnames, activeProp = _a.active;
+        var _b = link.props, title = _b.title, name = _b.name;
+        var active = activeProp === undefined && index === 0 ? name : activeProp;
+        return (React__default.createElement("li", { className: cx('AnchorNav-link', active === name ? 'is-active' : ''), key: index, onClick: function () { return _this.handleSelect(name); } },
+            React__default.createElement("a", null, title)));
+    };
+    AnchorNav.prototype.renderSection = function (section, index) {
+        if (!section) {
+            return;
+        }
+        var _a = this.props, activeProp = _a.active, classnames = _a.classnames;
+        var name = section.props.name;
+        var active = activeProp === undefined && index === 0 ? name : activeProp;
+        return React__default.cloneElement(section, __assign(__assign({}, section.props), { key: index, classnames: classnames, active: active }));
+    };
+    AnchorNav.prototype.render = function () {
+        var _a;
+        var _this = this;
+        var _b = this.props, cx = _b.classnames, className = _b.className, linkClassName = _b.linkClassName, sectionClassName = _b.sectionClassName, children = _b.children, direction = _b.direction;
+        if (!Array.isArray(children)) {
+            return null;
+        }
+        return (React__default.createElement("div", { className: cx('AnchorNav', (_a = {},
+                _a["AnchorNav--".concat(direction)] = direction,
+                _a), className) },
+            React__default.createElement("ul", { className: cx('AnchorNav-link-wrap', linkClassName), role: "anchorlist" }, children.map(function (link, index) { return _this.renderLink(link, index); })),
+            React__default.createElement("div", { className: cx('AnchorNav-section-wrap', sectionClassName), ref: this.contentDom }, children.map(function (section, index) {
+                return _this.renderSection(section, index);
+            }))));
+    };
+    AnchorNav.defaultProps = {
+        linkClassName: '',
+        sectionClassName: '',
+        direction: 'vertical'
+    };
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Event]),
+        __metadata("design:returntype", void 0)
+    ], AnchorNav.prototype, "scrollToNav", null);
+    return AnchorNav;
+}(React__default.Component));
+var ThemedAnchorNav = themeable(uncontrollable(AnchorNav, {
+    active: 'onSelect'
+}));
+
+export { AnchorNav, ThemedAnchorNav as default };