amis-ui 3.1.0 → 3.2.0

package/lib/components/CollapseGroup.d.ts

@@ -21,9 +21,11 @@ export interface CollapseGroupProps {
     classnames: ClassNamesFn;
     classPrefix: string;
     children?: React.ReactNode | Array<React.ReactNode>;
+    useMobileUI?: boolean;
+    onCollapseChange?: (activeKeys: Array<string | number>, collapseId: string | number, collapsed: boolean) => void;
 }
 export interface CollapseGroupState {
-    activeKey: Array<string | number | never>;
+    activeKeys: Array<string | number | never>;
 }
 declare class CollapseGroup extends React.Component<CollapseGroupProps, CollapseGroupState> {
     static defaultProps: Partial<CollapseGroupProps>;
@@ -36,17 +38,19 @@ declare class CollapseGroup extends React.Component<CollapseGroupProps, Collapse
 }
 declare const _default: {
     new (props: Pick<Omit<CollapseGroupProps, keyof import("amis-core").ThemeProps>, never> & {
-        body?: React.ReactElement<any, string | React.JSXElementConstructor<any>>[] | undefined;
         children?: React.ReactNode | React.ReactNode[];
+        body?: React.ReactElement<any, string | React.JSXElementConstructor<any>>[] | undefined;
+        useMobileUI?: boolean | undefined;
         expandIcon?: SchemaNode | undefined;
         defaultActiveKey?: string | number | (string | number)[] | undefined;
         accordion?: boolean | undefined;
         expandIconPosition?: "left" | "right" | undefined;
+        onCollapseChange?: ((activeKeys: (string | number)[], collapseId: string | number, collapsed: boolean) => void) | undefined;
     } & {
-        style?: any;
-        className?: string | undefined;
         classPrefix?: string | undefined;
         classnames?: ClassNamesFn | undefined;
+        className?: string | undefined;
+        style?: any;
     } & import("packages/amis-core/lib/theme").ThemeOutterProps): {
         ref: any;
         childRef(ref: any): void;
@@ -54,31 +58,35 @@ declare const _default: {
         render(): React.JSX.Element;
         context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Pick<Omit<CollapseGroupProps, keyof import("amis-core").ThemeProps>, never> & {
-            body?: React.ReactElement<any, string | React.JSXElementConstructor<any>>[] | undefined;
             children?: React.ReactNode | React.ReactNode[];
+            body?: React.ReactElement<any, string | React.JSXElementConstructor<any>>[] | undefined;
+            useMobileUI?: boolean | undefined;
             expandIcon?: SchemaNode | undefined;
             defaultActiveKey?: string | number | (string | number)[] | undefined;
             accordion?: boolean | undefined;
             expandIconPosition?: "left" | "right" | undefined;
+            onCollapseChange?: ((activeKeys: (string | number)[], collapseId: string | number, collapsed: boolean) => void) | undefined;
         } & {
-            style?: any;
-            className?: string | undefined;
             classPrefix?: string | undefined;
             classnames?: ClassNamesFn | undefined;
+            className?: string | undefined;
+            style?: any;
         } & import("packages/amis-core/lib/theme").ThemeOutterProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
         readonly props: Readonly<Pick<Omit<CollapseGroupProps, keyof import("amis-core").ThemeProps>, never> & {
-            body?: React.ReactElement<any, string | React.JSXElementConstructor<any>>[] | undefined;
             children?: React.ReactNode | React.ReactNode[];
+            body?: React.ReactElement<any, string | React.JSXElementConstructor<any>>[] | undefined;
+            useMobileUI?: boolean | undefined;
             expandIcon?: SchemaNode | undefined;
             defaultActiveKey?: string | number | (string | number)[] | undefined;
             accordion?: boolean | undefined;
             expandIconPosition?: "left" | "right" | undefined;
+            onCollapseChange?: ((activeKeys: (string | number)[], collapseId: string | number, collapsed: boolean) => void) | undefined;
         } & {
-            style?: any;
-            className?: string | undefined;
             classPrefix?: string | undefined;
             classnames?: ClassNamesFn | undefined;
+            className?: string | undefined;
+            style?: any;
         } & import("packages/amis-core/lib/theme").ThemeOutterProps>;
         state: Readonly<{}>;
         refs: {
@@ -86,99 +94,113 @@ declare const _default: {
         };
         componentDidMount?(): void;
         shouldComponentUpdate?(nextProps: Readonly<Pick<Omit<CollapseGroupProps, keyof import("amis-core").ThemeProps>, never> & {
-            body?: React.ReactElement<any, string | React.JSXElementConstructor<any>>[] | undefined;
             children?: React.ReactNode | React.ReactNode[];
+            body?: React.ReactElement<any, string | React.JSXElementConstructor<any>>[] | undefined;
+            useMobileUI?: boolean | undefined;
             expandIcon?: SchemaNode | undefined;
             defaultActiveKey?: string | number | (string | number)[] | undefined;
             accordion?: boolean | undefined;
             expandIconPosition?: "left" | "right" | undefined;
+            onCollapseChange?: ((activeKeys: (string | number)[], collapseId: string | number, collapsed: boolean) => void) | undefined;
         } & {
-            style?: any;
-            className?: string | undefined;
             classPrefix?: string | undefined;
             classnames?: ClassNamesFn | undefined;
+            className?: string | undefined;
+            style?: any;
         } & import("packages/amis-core/lib/theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): boolean;
         componentWillUnmount?(): void;
         componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
         getSnapshotBeforeUpdate?(prevProps: Readonly<Pick<Omit<CollapseGroupProps, keyof import("amis-core").ThemeProps>, never> & {
-            body?: React.ReactElement<any, string | React.JSXElementConstructor<any>>[] | undefined;
             children?: React.ReactNode | React.ReactNode[];
+            body?: React.ReactElement<any, string | React.JSXElementConstructor<any>>[] | undefined;
+            useMobileUI?: boolean | undefined;
             expandIcon?: SchemaNode | undefined;
             defaultActiveKey?: string | number | (string | number)[] | undefined;
             accordion?: boolean | undefined;
             expandIconPosition?: "left" | "right" | undefined;
+            onCollapseChange?: ((activeKeys: (string | number)[], collapseId: string | number, collapsed: boolean) => void) | undefined;
         } & {
-            style?: any;
-            className?: string | undefined;
             classPrefix?: string | undefined;
             classnames?: ClassNamesFn | undefined;
+            className?: string | undefined;
+            style?: any;
         } & import("packages/amis-core/lib/theme").ThemeOutterProps>, prevState: Readonly<{}>): any;
         componentDidUpdate?(prevProps: Readonly<Pick<Omit<CollapseGroupProps, keyof import("amis-core").ThemeProps>, never> & {
-            body?: React.ReactElement<any, string | React.JSXElementConstructor<any>>[] | undefined;
             children?: React.ReactNode | React.ReactNode[];
+            body?: React.ReactElement<any, string | React.JSXElementConstructor<any>>[] | undefined;
+            useMobileUI?: boolean | undefined;
             expandIcon?: SchemaNode | undefined;
             defaultActiveKey?: string | number | (string | number)[] | undefined;
             accordion?: boolean | undefined;
             expandIconPosition?: "left" | "right" | undefined;
+            onCollapseChange?: ((activeKeys: (string | number)[], collapseId: string | number, collapsed: boolean) => void) | undefined;
         } & {
-            style?: any;
-            className?: string | undefined;
             classPrefix?: string | undefined;
             classnames?: ClassNamesFn | undefined;
+            className?: string | undefined;
+            style?: any;
         } & import("packages/amis-core/lib/theme").ThemeOutterProps>, prevState: Readonly<{}>, snapshot?: any): void;
         componentWillMount?(): void;
         UNSAFE_componentWillMount?(): void;
         componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<CollapseGroupProps, keyof import("amis-core").ThemeProps>, never> & {
-            body?: React.ReactElement<any, string | React.JSXElementConstructor<any>>[] | undefined;
             children?: React.ReactNode | React.ReactNode[];
+            body?: React.ReactElement<any, string | React.JSXElementConstructor<any>>[] | undefined;
+            useMobileUI?: boolean | undefined;
             expandIcon?: SchemaNode | undefined;
             defaultActiveKey?: string | number | (string | number)[] | undefined;
             accordion?: boolean | undefined;
             expandIconPosition?: "left" | "right" | undefined;
+            onCollapseChange?: ((activeKeys: (string | number)[], collapseId: string | number, collapsed: boolean) => void) | undefined;
         } & {
-            style?: any;
-            className?: string | undefined;
             classPrefix?: string | undefined;
             classnames?: ClassNamesFn | undefined;
+            className?: string | undefined;
+            style?: any;
         } & import("packages/amis-core/lib/theme").ThemeOutterProps>, nextContext: any): void;
         UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<CollapseGroupProps, keyof import("amis-core").ThemeProps>, never> & {
-            body?: React.ReactElement<any, string | React.JSXElementConstructor<any>>[] | undefined;
             children?: React.ReactNode | React.ReactNode[];
+            body?: React.ReactElement<any, string | React.JSXElementConstructor<any>>[] | undefined;
+            useMobileUI?: boolean | undefined;
             expandIcon?: SchemaNode | undefined;
             defaultActiveKey?: string | number | (string | number)[] | undefined;
             accordion?: boolean | undefined;
             expandIconPosition?: "left" | "right" | undefined;
+            onCollapseChange?: ((activeKeys: (string | number)[], collapseId: string | number, collapsed: boolean) => void) | undefined;
         } & {
-            style?: any;
-            className?: string | undefined;
             classPrefix?: string | undefined;
             classnames?: ClassNamesFn | undefined;
+            className?: string | undefined;
+            style?: any;
         } & import("packages/amis-core/lib/theme").ThemeOutterProps>, nextContext: any): void;
         componentWillUpdate?(nextProps: Readonly<Pick<Omit<CollapseGroupProps, keyof import("amis-core").ThemeProps>, never> & {
-            body?: React.ReactElement<any, string | React.JSXElementConstructor<any>>[] | undefined;
             children?: React.ReactNode | React.ReactNode[];
+            body?: React.ReactElement<any, string | React.JSXElementConstructor<any>>[] | undefined;
+            useMobileUI?: boolean | undefined;
             expandIcon?: SchemaNode | undefined;
             defaultActiveKey?: string | number | (string | number)[] | undefined;
             accordion?: boolean | undefined;
             expandIconPosition?: "left" | "right" | undefined;
+            onCollapseChange?: ((activeKeys: (string | number)[], collapseId: string | number, collapsed: boolean) => void) | undefined;
         } & {
-            style?: any;
-            className?: string | undefined;
             classPrefix?: string | undefined;
             classnames?: ClassNamesFn | undefined;
+            className?: string | undefined;
+            style?: any;
         } & import("packages/amis-core/lib/theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
         UNSAFE_componentWillUpdate?(nextProps: Readonly<Pick<Omit<CollapseGroupProps, keyof import("amis-core").ThemeProps>, never> & {
-            body?: React.ReactElement<any, string | React.JSXElementConstructor<any>>[] | undefined;
             children?: React.ReactNode | React.ReactNode[];
+            body?: React.ReactElement<any, string | React.JSXElementConstructor<any>>[] | undefined;
+            useMobileUI?: boolean | undefined;
             expandIcon?: SchemaNode | undefined;
             defaultActiveKey?: string | number | (string | number)[] | undefined;
             accordion?: boolean | undefined;
             expandIconPosition?: "left" | "right" | undefined;
+            onCollapseChange?: ((activeKeys: (string | number)[], collapseId: string | number, collapsed: boolean) => void) | undefined;
         } & {
-            style?: any;
-            className?: string | undefined;
             classPrefix?: string | undefined;
             classnames?: ClassNamesFn | undefined;
+            className?: string | undefined;
+            style?: any;
         } & import("packages/amis-core/lib/theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
     };
     displayName: string;

package/lib/components/CollapseGroup.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v3.1.0
+ * amis-ui v3.2.0
  * Copyright 2018-2023 fex
  */
 
@@ -34,7 +34,7 @@ var CollapseGroup = /** @class */ (function (_super) {
                 var props = child.props;
                 var collapseId = props.propKey || String(index);
                 // 判断是否折叠
-                var collapsed = _this.state.activeKey.indexOf(collapseId) === -1;
+                var collapsed = _this.state.activeKeys.indexOf(collapseId) === -1;
                 return React__default["default"].cloneElement(child, tslib.__assign(tslib.__assign({}, props), { key: collapseId, collapseId: collapseId, collapsed: collapsed, expandIcon: _this.props.expandIcon, propsUpdate: true, onCollapse: function () { return _this.collapseChange(collapseId, collapsed); } }));
             });
         };
@@ -60,26 +60,27 @@ var CollapseGroup = /** @class */ (function (_super) {
         }
         if (isInit) {
             this.state = {
-                activeKey: curActiveKey.map(function (key) { return String(key); })
+                activeKeys: curActiveKey.map(function (key) { return String(key); })
             };
         }
         else {
             this.setState({
-                activeKey: curActiveKey.map(function (key) { return String(key); })
+                activeKeys: curActiveKey.map(function (key) { return String(key); })
             });
         }
     };
     CollapseGroup.prototype.collapseChange = function (collapseId, collapsed) {
-        var activeKey = this.state.activeKey.concat();
+        var _a, _b;
+        var activeKeys = this.state.activeKeys.concat();
         if (!collapsed) {
             // 开启状态
             if (this.props.accordion) {
-                activeKey = [];
+                activeKeys = [];
             }
             else {
-                for (var i = 0; i < activeKey.length; i++) {
-                    if (activeKey[i] === collapseId) {
-                        activeKey.splice(i, 1); // 剔除开启状态
+                for (var i = 0; i < activeKeys.length; i++) {
+                    if (activeKeys[i] === collapseId) {
+                        activeKeys.splice(i, 1); // 剔除开启状态
                         break;
                     }
                 }
@@ -87,20 +88,24 @@ var CollapseGroup = /** @class */ (function (_super) {
         }
         else {
             if (this.props.accordion) {
-                activeKey = [collapseId];
+                activeKeys = [collapseId];
             }
             else {
-                activeKey.push(collapseId);
+                activeKeys.push(collapseId);
             }
         }
+        (_b = (_a = this.props).onCollapseChange) === null || _b === void 0 ? void 0 : _b.call(_a, activeKeys, collapseId, activeKeys.indexOf(collapseId) === -1);
         this.setState({
-            activeKey: activeKey
+            activeKeys: activeKeys
         });
     };
     CollapseGroup.prototype.render = function () {
-        var _a = this.props, cx = _a.classnames, className = _a.className, style = _a.style, expandIconPosition = _a.expandIconPosition, children = _a.children;
+        var _a = this.props, cx = _a.classnames, className = _a.className, style = _a.style, expandIconPosition = _a.expandIconPosition, children = _a.children, useMobileUI = _a.useMobileUI;
+        var mobileUI = useMobileUI && amisCore.isMobile();
         return (React__default["default"].createElement("div", { className: cx("CollapseGroup", {
                 'icon-position-right': expandIconPosition === 'right'
+            }, {
+                'is-mobile': mobileUI
             }, className), style: style }, this.getItems(children)));
     };
     CollapseGroup.defaultProps = {