amis-ui 1.0.0-beta.0

package/esm-dist/components/ArrayInput.js

@@ -0,0 +1,152 @@
+/**
+ * amis-ui v1.0.0-beta.0
+ * Copyright 2018-2022 fex
+ */
+
+import { __extends, __decorate, __metadata } from 'tslib';
+import React__default from 'react';
+import { guid, autobind, themeable, localeable } from 'amis-core';
+import InputBox from './InputBox.js';
+import { Icon } from './icons.js';
+import Button from './Button.js';
+import { uncontrollable } from 'uncontrollable';
+import Sortable from 'sortablejs';
+import { findDOMNode } from 'react-dom';
+
+var ArrayInput = /** @class */ (function (_super) {
+    __extends(ArrayInput, _super);
+    function ArrayInput() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.id = guid();
+        return _this;
+    }
+    ArrayInput.prototype.handleItemOnChange = function (index, itemValue) {
+        var onChange = this.props.onChange;
+        var value = this.props.value;
+        var newValue = Array.isArray(value) ? value.concat() : [];
+        newValue.splice(index, 1, itemValue);
+        onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+    };
+    ArrayInput.prototype.dragTipRef = function (ref) {
+        if (!this.dragTip && ref) {
+            this.initDragging();
+        }
+        else if (this.dragTip && !ref) {
+            this.destroyDragging();
+        }
+        this.dragTip = ref;
+    };
+    ArrayInput.prototype.handleAdd = function () {
+        var _a = this.props, value = _a.value, onChange = _a.onChange, itemInitalValue = _a.itemInitalValue;
+        var newValue = Array.isArray(value) ? value.concat() : [];
+        newValue.push(itemInitalValue);
+        onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+    };
+    ArrayInput.prototype.handleRemove = function (e) {
+        var indx = parseInt(e.currentTarget.getAttribute('data-index'), 10);
+        var _a = this.props, value = _a.value, onChange = _a.onChange; _a.itemInitalValue;
+        var newValue = Array.isArray(value) ? value.concat() : [];
+        newValue.splice(indx, 1);
+        onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+    };
+    ArrayInput.prototype.initDragging = function () {
+        var _this = this;
+        var onChange = this.props.onChange;
+        var ns = this.props.classPrefix;
+        var dom = findDOMNode(this);
+        this.sortable = new Sortable(dom.querySelector(".drag-group"), {
+            group: "array-input-".concat(this.id),
+            animation: 150,
+            handle: ".drag-bar",
+            ghostClass: "".concat(ns, "ArrayInput-item--dragging"),
+            onEnd: function (e) {
+                // 没有移动
+                if (e.newIndex === e.oldIndex) {
+                    return;
+                }
+                // 换回来
+                var parent = e.to;
+                if (e.newIndex < e.oldIndex &&
+                    e.oldIndex < parent.childNodes.length - 1) {
+                    parent.insertBefore(e.item, parent.childNodes[e.oldIndex + 1]);
+                }
+                else if (e.oldIndex < parent.childNodes.length - 1) {
+                    parent.insertBefore(e.item, parent.childNodes[e.oldIndex]);
+                }
+                else {
+                    parent.appendChild(e.item);
+                }
+                var value = _this.props.value;
+                if (!Array.isArray(value)) {
+                    return;
+                }
+                var newValue = value.concat();
+                newValue.splice(e.newIndex, 0, newValue.splice(e.oldIndex, 1)[0]);
+                onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+            }
+        });
+    };
+    ArrayInput.prototype.destroyDragging = function () {
+        this.sortable && this.sortable.destroy();
+    };
+    ArrayInput.prototype.renderItem = function (value, index, collection) {
+        var _a = this.props, itemRender = _a.itemRender, disabled = _a.disabled, cx = _a.classnames, sortable = _a.sortable, removable = _a.removable, minLength = _a.minLength;
+        return (React__default.createElement("div", { className: cx('ArrayInput-item'), key: index },
+            sortable && collection.length > 1 && !disabled ? (React__default.createElement("a", { className: cx('ArrayInput-itemDrager drag-bar') },
+                React__default.createElement(Icon, { icon: "drag-bar", className: "icon" }))) : null,
+            itemRender({
+                value: value,
+                onChange: this.handleItemOnChange.bind(this, index),
+                index: index,
+                disabled: disabled
+            }),
+            removable !== false &&
+                !disabled &&
+                (!minLength || collection.length > minLength) ? (React__default.createElement("a", { "data-index": index, className: cx('ArrayInput-itemRemove'), onClick: this.handleRemove },
+                React__default.createElement(Icon, { icon: "close", className: "icon" }))) : null));
+    };
+    ArrayInput.prototype.render = function () {
+        var _this = this;
+        var _a = this.props, cx = _a.classnames, value = _a.value, placeholder = _a.placeholder, __ = _a.translate, maxLength = _a.maxLength, sortable = _a.sortable, sortTip = _a.sortTip, disabled = _a.disabled;
+        return (React__default.createElement("div", { className: cx('ArrayInput') },
+            Array.isArray(value) && value.length ? (React__default.createElement("div", { className: cx('ArrayInput-items drag-group') }, value.map(function (item, index) { return _this.renderItem(item, index, value); }))) : (React__default.createElement("div", { className: cx('ArrayInput-placeholder') }, __(placeholder))),
+            React__default.createElement("div", { className: cx('ArrayInput-toolbar', sortable && Array.isArray(value) && value.length > 1
+                    ? 'ArrayInput-toolbar--dnd'
+                    : '') },
+                !Array.isArray(value) || !maxLength || value.length < maxLength ? (React__default.createElement(Button, { className: cx('ArrayInput-addBtn'), onClick: this.handleAdd, level: "", disabled: disabled },
+                    React__default.createElement(Icon, { icon: "plus", className: "icon" }),
+                    React__default.createElement("span", null, __('Combo.add')))) : null,
+                sortable && Array.isArray(value) && value.length ? (React__default.createElement("span", { className: cx("ArrayInput-sortTip"), ref: this.dragTipRef }, Array.isArray(value) && value.length > 1 ? __(sortTip) : '')) : null)));
+    };
+    ArrayInput.defaultProps = {
+        placeholder: 'empty',
+        itemRender: function (_a) {
+            var value = _a.value, onChange = _a.onChange;
+            return React__default.createElement(InputBox, { value: value, onChange: onChange });
+        }
+    };
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], ArrayInput.prototype, "dragTipRef", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], ArrayInput.prototype, "handleAdd", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], ArrayInput.prototype, "handleRemove", null);
+    return ArrayInput;
+}(React__default.Component));
+var ArrayInput$1 = themeable(localeable(uncontrollable(ArrayInput, {
+    value: 'onChange'
+})));
+
+export { ArrayInput, ArrayInput$1 as default };

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

@@ -0,0 +1,142 @@
+/**
+ * @file AsideNav
+ * @description 左侧导航。
+ * @author fex
+ */
+/// <reference types="hoist-non-react-statics" />
+import React from 'react';
+import { ClassNamesFn } from 'amis-core';
+export declare type LinkItem = LinkItemProps;
+interface LinkItemProps {
+    id?: number;
+    label: string;
+    hidden?: boolean;
+    open?: boolean;
+    active?: boolean;
+    className?: string;
+    children?: Array<LinkItem>;
+    path?: string;
+    icon?: string;
+    component?: React.ReactType;
+}
+export interface Navigation {
+    label: string;
+    children?: Array<LinkItem>;
+    prefix?: JSX.Element;
+    affix?: JSX.Element;
+    className?: string;
+    [propName: string]: any;
+}
+export interface AsideNavProps {
+    id?: string;
+    className?: string;
+    classPrefix: string;
+    classnames: ClassNamesFn;
+    renderLink: Function;
+    isActive: Function;
+    isOpen: (link: LinkItemProps) => boolean;
+    navigations: Array<Navigation>;
+    renderSubLinks: (link: LinkItemProps, renderLink: Function, depth: number, props: AsideNavProps) => React.ReactNode;
+}
+interface AsideNavState {
+    navigations: Array<Navigation>;
+}
+export declare class AsideNav extends React.Component<AsideNavProps, AsideNavState> {
+    static defaultProps: {
+        renderLink: (item: LinkItemProps) => JSX.Element;
+        renderSubLinks: (link: LinkItemProps, renderLink: Function, depth: number, { classnames: cx }: AsideNavProps) => JSX.Element | null;
+        isActive: (link: LinkItem) => boolean | undefined;
+        isOpen: (item: LinkItemProps) => boolean;
+    };
+    constructor(props: AsideNavProps);
+    componentDidUpdate(prevProps: AsideNavProps): void;
+    toggleExpand(link: LinkItemProps, e?: React.MouseEvent<HTMLElement>): void;
+    renderLink(link: LinkItemProps, key: any, props?: Partial<AsideNavProps>, depth?: number): React.ReactNode;
+    render(): JSX.Element;
+}
+declare const _default: {
+    new (props: Pick<Omit<AsideNavProps, keyof import("amis-core").ThemeProps>, "id" | "navigations"> & Partial<Pick<Omit<AsideNavProps, keyof import("amis-core").ThemeProps>, "renderLink" | "isActive" | "isOpen" | "renderSubLinks">> & Partial<Pick<{
+        renderLink: (item: LinkItemProps) => JSX.Element;
+        renderSubLinks: (link: LinkItemProps, renderLink: Function, depth: number, { classnames: cx }: AsideNavProps) => JSX.Element | null;
+        isActive: (link: LinkItemProps) => boolean | undefined;
+        isOpen: (item: LinkItemProps) => boolean;
+    }, 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<AsideNavProps, keyof import("amis-core").ThemeProps>, "id" | "navigations"> & Partial<Pick<Omit<AsideNavProps, keyof import("amis-core").ThemeProps>, "renderLink" | "isActive" | "isOpen" | "renderSubLinks">> & Partial<Pick<{
+            renderLink: (item: LinkItemProps) => JSX.Element;
+            renderSubLinks: (link: LinkItemProps, renderLink: Function, depth: number, { classnames: cx }: AsideNavProps) => JSX.Element | null;
+            isActive: (link: LinkItemProps) => boolean | undefined;
+            isOpen: (item: LinkItemProps) => boolean;
+        }, 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<AsideNavProps, keyof import("amis-core").ThemeProps>, "id" | "navigations"> & Partial<Pick<Omit<AsideNavProps, keyof import("amis-core").ThemeProps>, "renderLink" | "isActive" | "isOpen" | "renderSubLinks">> & Partial<Pick<{
+            renderLink: (item: LinkItemProps) => JSX.Element;
+            renderSubLinks: (link: LinkItemProps, renderLink: Function, depth: number, { classnames: cx }: AsideNavProps) => JSX.Element | null;
+            isActive: (link: LinkItemProps) => boolean | undefined;
+            isOpen: (item: LinkItemProps) => boolean;
+        }, 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<AsideNavProps, keyof import("amis-core").ThemeProps>, "id" | "navigations"> & Partial<Pick<Omit<AsideNavProps, keyof import("amis-core").ThemeProps>, "renderLink" | "isActive" | "isOpen" | "renderSubLinks">> & Partial<Pick<{
+            renderLink: (item: LinkItemProps) => JSX.Element;
+            renderSubLinks: (link: LinkItemProps, renderLink: Function, depth: number, { classnames: cx }: AsideNavProps) => JSX.Element | null;
+            isActive: (link: LinkItemProps) => boolean | undefined;
+            isOpen: (item: LinkItemProps) => boolean;
+        }, 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<AsideNavProps, keyof import("amis-core").ThemeProps>, "id" | "navigations"> & Partial<Pick<Omit<AsideNavProps, keyof import("amis-core").ThemeProps>, "renderLink" | "isActive" | "isOpen" | "renderSubLinks">> & Partial<Pick<{
+            renderLink: (item: LinkItemProps) => JSX.Element;
+            renderSubLinks: (link: LinkItemProps, renderLink: Function, depth: number, { classnames: cx }: AsideNavProps) => JSX.Element | null;
+            isActive: (link: LinkItemProps) => boolean | undefined;
+            isOpen: (item: LinkItemProps) => boolean;
+        }, never>> & import("amis-core/dist/theme").ThemeOutterProps>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<Pick<Omit<AsideNavProps, keyof import("amis-core").ThemeProps>, "id" | "navigations"> & Partial<Pick<Omit<AsideNavProps, keyof import("amis-core").ThemeProps>, "renderLink" | "isActive" | "isOpen" | "renderSubLinks">> & Partial<Pick<{
+            renderLink: (item: LinkItemProps) => JSX.Element;
+            renderSubLinks: (link: LinkItemProps, renderLink: Function, depth: number, { classnames: cx }: AsideNavProps) => JSX.Element | null;
+            isActive: (link: LinkItemProps) => boolean | undefined;
+            isOpen: (item: LinkItemProps) => boolean;
+        }, never>> & import("amis-core/dist/theme").ThemeOutterProps>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<AsideNavProps, keyof import("amis-core").ThemeProps>, "id" | "navigations"> & Partial<Pick<Omit<AsideNavProps, keyof import("amis-core").ThemeProps>, "renderLink" | "isActive" | "isOpen" | "renderSubLinks">> & Partial<Pick<{
+            renderLink: (item: LinkItemProps) => JSX.Element;
+            renderSubLinks: (link: LinkItemProps, renderLink: Function, depth: number, { classnames: cx }: AsideNavProps) => JSX.Element | null;
+            isActive: (link: LinkItemProps) => boolean | undefined;
+            isOpen: (item: LinkItemProps) => boolean;
+        }, never>> & import("amis-core/dist/theme").ThemeOutterProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<AsideNavProps, keyof import("amis-core").ThemeProps>, "id" | "navigations"> & Partial<Pick<Omit<AsideNavProps, keyof import("amis-core").ThemeProps>, "renderLink" | "isActive" | "isOpen" | "renderSubLinks">> & Partial<Pick<{
+            renderLink: (item: LinkItemProps) => JSX.Element;
+            renderSubLinks: (link: LinkItemProps, renderLink: Function, depth: number, { classnames: cx }: AsideNavProps) => JSX.Element | null;
+            isActive: (link: LinkItemProps) => boolean | undefined;
+            isOpen: (item: LinkItemProps) => boolean;
+        }, never>> & import("amis-core/dist/theme").ThemeOutterProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<Pick<Omit<AsideNavProps, keyof import("amis-core").ThemeProps>, "id" | "navigations"> & Partial<Pick<Omit<AsideNavProps, keyof import("amis-core").ThemeProps>, "renderLink" | "isActive" | "isOpen" | "renderSubLinks">> & Partial<Pick<{
+            renderLink: (item: LinkItemProps) => JSX.Element;
+            renderSubLinks: (link: LinkItemProps, renderLink: Function, depth: number, { classnames: cx }: AsideNavProps) => JSX.Element | null;
+            isActive: (link: LinkItemProps) => boolean | undefined;
+            isOpen: (item: LinkItemProps) => boolean;
+        }, never>> & import("amis-core/dist/theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<Pick<Omit<AsideNavProps, keyof import("amis-core").ThemeProps>, "id" | "navigations"> & Partial<Pick<Omit<AsideNavProps, keyof import("amis-core").ThemeProps>, "renderLink" | "isActive" | "isOpen" | "renderSubLinks">> & Partial<Pick<{
+            renderLink: (item: LinkItemProps) => JSX.Element;
+            renderSubLinks: (link: LinkItemProps, renderLink: Function, depth: number, { classnames: cx }: AsideNavProps) => JSX.Element | null;
+            isActive: (link: LinkItemProps) => boolean | undefined;
+            isOpen: (item: LinkItemProps) => boolean;
+        }, never>> & import("amis-core/dist/theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    displayName: string;
+    contextType: React.Context<string>;
+    ComposedComponent: React.ComponentType<typeof AsideNav>;
+} & import("hoist-non-react-statics").NonReactStatics<typeof AsideNav, {}> & {
+    ComposedComponent: typeof AsideNav;
+};
+export default _default;

package/esm-dist/components/AsideNav.js

@@ -0,0 +1,130 @@
+/**
+ * amis-ui v1.0.0-beta.0
+ * Copyright 2018-2022 fex
+ */
+
+import { __extends, __assign, __rest } from 'tslib';
+import React__default from 'react';
+import { mapTree, themeable } from 'amis-core';
+
+/**
+ * @file AsideNav
+ * @description 左侧导航。
+ * @author fex
+ */
+var AsideNav = /** @class */ (function (_super) {
+    __extends(AsideNav, _super);
+    function AsideNav(props) {
+        var _this = _super.call(this, props) || this;
+        var isOpen = props.isOpen;
+        var id = 1;
+        _this.state = {
+            navigations: mapTree(props.navigations, function (item) {
+                var isActive = typeof item.active === 'undefined'
+                    ? props.isActive(item)
+                    : item.active;
+                return __assign(__assign({}, item), { id: id++, active: isActive, open: isActive || isOpen(item) });
+            }, 1, true)
+        };
+        _this.renderLink = _this.renderLink.bind(_this);
+        _this.toggleExpand = _this.toggleExpand.bind(_this);
+        return _this;
+    }
+    AsideNav.prototype.componentDidUpdate = function (prevProps) {
+        var props = this.props;
+        var isOpen = prevProps.isOpen;
+        if (prevProps.navigations !== props.navigations ||
+            prevProps.isActive !== props.isActive) {
+            var id_1 = 1;
+            this.setState({
+                navigations: mapTree(props.navigations, function (item) {
+                    var isActive = typeof item.active === 'undefined'
+                        ? props.isActive(item)
+                        : item.active;
+                    return __assign(__assign({}, item), { id: id_1++, active: isActive, open: isActive || isOpen(item) });
+                }, 1, true)
+            });
+        }
+    };
+    AsideNav.prototype.toggleExpand = function (link, e) {
+        if (e) {
+            e.stopPropagation();
+            e.preventDefault();
+        }
+        this.setState({
+            navigations: mapTree(this.state.navigations, function (item) { return (__assign(__assign({}, item), { open: link.id === item.id ? !item.open : item.open })); }, 1, true)
+        });
+    };
+    AsideNav.prototype.renderLink = function (link, key, props, depth) {
+        var _a;
+        if (props === void 0) { props = {}; }
+        if (depth === void 0) { depth = 1; }
+        var _b = this.props, renderLink = _b.renderLink; _b.isActive; var renderSubLinks = _b.renderSubLinks, cx = _b.classnames, others = __rest(_b, ["renderLink", "isActive", "renderSubLinks", "classnames"]);
+        var dom = renderLink(__assign({ link: link, active: link.active, open: link.open, toggleExpand: this.toggleExpand, depth: depth, classnames: cx, subHeader: key === 'subHeader' }, others));
+        if (!dom) {
+            return;
+        }
+        else if (key === 'subHeader') {
+            return React__default.cloneElement(dom, {
+                key: key
+            });
+        }
+        return (React__default.createElement("li", __assign({}, props, { key: key, className: cx("AsideNav-item", link.className, (_a = {},
+                _a["is-open"] = link.open,
+                _a["is-active"] = link.active,
+                _a)) }),
+            dom,
+            renderSubLinks(link, this.renderLink, depth, this.props)));
+    };
+    AsideNav.prototype.render = function () {
+        var _this = this;
+        var navigations = this.state.navigations;
+        var links = [];
+        var _a = this.props, className = _a.className, cx = _a.classnames;
+        navigations.forEach(function (navigation, index) {
+            if (!Array.isArray(navigation.children)) {
+                return;
+            }
+            if (navigation.prefix) {
+                var prefix = typeof navigation.prefix === 'function'
+                    ? navigation.prefix(_this.props)
+                    : navigation.prefix;
+                links.push(React__default.cloneElement(prefix, __assign(__assign({}, prefix.props), { key: "".concat(index, "-prefix") })));
+            }
+            navigation.label &&
+                links.push(React__default.createElement("li", { key: "".concat(index, "-label"), className: cx("AsideNav-label", navigation.className) },
+                    React__default.createElement("span", null, navigation.label)));
+            navigation.children.forEach(function (item, key) {
+                var link = _this.renderLink(item, "".concat(index, "-").concat(key));
+                link && links.push(link);
+            });
+            if (navigation.affix) {
+                var affix = typeof navigation.affix === 'function'
+                    ? navigation.affix(_this.props)
+                    : navigation.affix;
+                links.push(React__default.cloneElement(affix, __assign(__assign({}, affix.props), { key: "".concat(index, "-affix") })));
+            }
+        });
+        return (React__default.createElement("nav", { className: cx("AsideNav", className) },
+            React__default.createElement("ul", { className: cx("AsideNav-list") }, links)));
+    };
+    AsideNav.defaultProps = {
+        renderLink: function (item) { return React__default.createElement("a", null, item.label); },
+        renderSubLinks: function (link, renderLink, depth, _a) {
+            var cx = _a.classnames;
+            return link.children && link.children.length ? (React__default.createElement("ul", { className: cx('AsideNav-subList') },
+                link.label ? (React__default.createElement("li", { key: "subHeader", className: cx('AsideNav-subHeader') }, renderLink(__assign(__assign({}, link), { children: undefined }), 'subHeader', {}, depth))) : null,
+                link.children.map(function (link, key) {
+                    return renderLink(link, key, {}, depth + 1);
+                }))) : link.label && depth === 1 ? (React__default.createElement("div", { className: cx('AsideNav-tooltip') }, link.label)) : null;
+        },
+        isActive: function (link) { return link.open; },
+        isOpen: function (item) {
+            return item.children ? item.children.some(function (item) { return item.open; }) : false;
+        }
+    };
+    return AsideNav;
+}(React__default.Component));
+var AsideNav$1 = themeable(AsideNav);
+
+export { AsideNav, AsideNav$1 as default };