iglooform 2.3.8 → 2.3.12

package/es/layout/index.d.ts

@@ -4,7 +4,7 @@ import './style';
 interface Menu {
     title: string;
     key: string;
-    badge?: 'dot' | number | BadgeProps | (() => any);
+    badge?: 'dot' | number | string | BadgeProps | (() => any) | string;
 }
 interface Info {
     title: string;
@@ -14,30 +14,38 @@ interface Action {
     title: string;
     onClick?: () => void;
 }
-interface ILayout {
+interface HeaderConfig {
+    menus?: Menu[];
+    defaultSelected?: string;
+    selectedKey?: string;
+    onMenuChange?: (menuItem: any) => any;
+    dropMenuConfig?: {
+        customInfos: Info[];
+        actions: Action[];
+    };
+    userName?: string;
+    userAvatar?: string;
+}
+interface FooterConfig {
+    companyInfoRender?: () => any;
+    copyRightRender?: (origin: ReactNode) => any;
+    tel?: string;
+    email?: string;
+    workTime?: any;
+    address?: string;
+}
+interface layoutType {
     className?: string;
     style?: CSSProperties;
-    headerConfig?: {
-        menus?: Menu[];
-        defaultSelected?: string;
-        selectedKey?: string;
-        onMenuChange?: (mentItem: any) => any;
-        dropMenuConfig?: {
-            customInfos: Info[];
-            actions: Action[];
-        };
-        userName?: string;
-        userAvatar?: string;
-    };
-    footerConfig?: {
-        companyInfoRender?: () => any;
-        copyRightRender?: (origin: ReactNode) => any;
-        tel?: string;
-        email?: string;
-        workTime?: any;
-        address?: string;
-    };
     withFixedPanel?: boolean;
+    headerConfig?: HeaderConfig;
+    footerConfig?: FooterConfig;
+}
+declare type HeaderFunction = (props: HeaderConfig) => any;
+declare type FooterFunction = (props: FooterConfig) => any;
+interface ILayout extends FC<layoutType> {
+    Header: HeaderFunction;
+    Footer: FooterFunction;
 }
-declare const Layout: FC<ILayout>;
+declare const Layout: ILayout;
 export default Layout;

package/es/layout/index.js

@@ -1,65 +1,18 @@
-import "antd/es/avatar/style";
-import _Avatar from "antd/es/avatar";
-import "antd/es/col/style";
-import _Col from "antd/es/col";
-import "antd/es/row/style";
-import _Row from "antd/es/row";
-import "antd/es/space/style";
-import _Space from "antd/es/space";
-import "antd/es/badge/style";
-import _Badge from "antd/es/badge";
 import "antd/es/grid/style";
 import _Grid from "antd/es/grid";
-
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect } from 'react';
-import Typography from '../typography';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classnames from 'classnames';
-import { EmailOutlined, LocationOutlined, TimeOutlined, PhoneOutlined } from 'iglooicon';
-import HomeMenu from '../home-menu/index';
-import defaultAvatar from './style/avatar.svg';
-import Button from '../button';
+import LayoutHeader from './header';
+import LayoutFooter from './footer';
 import './style';
 
 var Layout = function Layout(props) {
   var className = props.className,
       style = props.style,
-      _props$headerConfig = props.headerConfig,
-      headerConfig = _props$headerConfig === void 0 ? {} : _props$headerConfig,
-      _props$footerConfig = props.footerConfig,
-      footerConfig = _props$footerConfig === void 0 ? {} : _props$footerConfig,
-      children = props.children,
-      withFixedPanel = props.withFixedPanel;
-  var _headerConfig$menus = headerConfig.menus,
-      menus = _headerConfig$menus === void 0 ? [] : _headerConfig$menus,
-      userName = headerConfig.userName,
-      _headerConfig$userAva = headerConfig.userAvatar,
-      userAvatar = _headerConfig$userAva === void 0 ? defaultAvatar : _headerConfig$userAva,
-      _headerConfig$default = headerConfig.defaultSelected,
-      defaultSelected = _headerConfig$default === void 0 ? '' : _headerConfig$default,
-      onMenuChange = headerConfig.onMenuChange,
-      dropMenuConfig = headerConfig.dropMenuConfig,
-      selectedKey = headerConfig.selectedKey;
-  var companyInfoRender = footerConfig.companyInfoRender,
-      copyRightRender = footerConfig.copyRightRender,
-      tel = footerConfig.tel,
-      email = footerConfig.email,
-      workTime = footerConfig.workTime,
-      address = footerConfig.address;
+      headerConfig = props.headerConfig,
+      footerConfig = props.footerConfig,
+      withFixedPanel = props.withFixedPanel,
+      children = props.children;
   var useBreakpoint = _Grid.useBreakpoint;
 
   var _useBreakpoint = useBreakpoint(),
@@ -67,32 +20,14 @@ var Layout = function Layout(props) {
       lg = _useBreakpoint.lg,
       xl = _useBreakpoint.xl;
 
-  var _useState = useState(defaultSelected),
-      _useState2 = _slicedToArray(_useState, 2),
-      activeMenu = _useState2[0],
-      setActiveMenu = _useState2[1];
-
-  var _useState3 = useState(selectedKey),
-      _useState4 = _slicedToArray(_useState3, 2),
-      selectedMenu = _useState4[0],
-      setSelectedMenu = _useState4[1];
-
-  useEffect(function () {
-    if (selectedKey) {
-      setSelectedMenu(selectedKey);
-    }
-  }, [selectedKey]);
-
-  var defaultMenuOnClick = function defaultMenuOnClick(menuConfig) {
-    var key = menuConfig.key;
-    setActiveMenu(key);
-  };
-
   var mobile = !md;
   var smallPC = !lg && md;
   var middlePC = !xl && lg;
   var bigPC = xl;
   var layoutContainerClass = '';
+  var contentDom = null;
+  var headerDom = null;
+  var footerDom = null;
 
   if (mobile) {
     layoutContainerClass = classnames({
@@ -113,292 +48,55 @@ var Layout = function Layout(props) {
     layoutContainerClass = 'igloo-customer-layout-big';
   }
 
-  function getMenuDom(activeMenu, menuInfo) {
-    var badge = menuInfo.badge;
+  switch (Object.prototype.toString.call(children)) {
+    case '[object Object]':
+      // @ts-ignore
+      if ((children === null || children === void 0 ? void 0 : children.type.displayName) === 'LayoutHeader') {
+        headerDom = children;
+        break;
+      } //@ts-ignore
 
-    switch (_typeof(badge)) {
-      case 'string':
-        return _jsxs(_Fragment, {
-          children: [_jsx(Typography, Object.assign({
-            className: classnames({
-              'active-menu': activeMenu === menuInfo.key
-            }),
-            level: activeMenu === menuInfo.key ? 'h4' : 'body1'
-          }, {
-            children: menuInfo.title
-          }), void 0), _jsx(_Badge, {
-            dot: true,
-            color: '#F52209'
-          }, void 0)]
-        }, void 0);
 
-      case 'number':
-        return _jsxs(_Fragment, {
-          children: [_jsx(Typography, Object.assign({
-            className: classnames({
-              'active-menu': activeMenu === menuInfo.key
-            }),
-            level: activeMenu === menuInfo.key ? 'h4' : 'body1'
-          }, {
-            children: menuInfo.title
-          }), void 0), _jsx(_Badge, {
-            count: badge,
-            style: {
-              backgroundColor: '#F52209'
-            }
-          }, void 0)]
-        }, void 0);
+      if ((children === null || children === void 0 ? void 0 : children.type.displayName) === 'LayoutFooter') {
+        footerDom = children;
+        break;
+      }
 
-      case 'object':
-        return _jsxs(_Fragment, {
-          children: [_jsx(Typography, Object.assign({
-            className: classnames({
-              'active-menu': activeMenu === menuInfo.key
-            }),
-            level: activeMenu === menuInfo.key ? 'h4' : 'body1'
-          }, {
-            children: menuInfo.title
-          }), void 0), _jsx(_Badge, Object.assign({}, badge), void 0)]
-        }, void 0);
+      contentDom = children;
+      break;
 
-      case 'undefined':
-        return _jsx(Typography, Object.assign({
-          className: classnames({
-            'active-menu': activeMenu === menuInfo.key
-          }),
-          level: activeMenu === menuInfo.key ? 'h4' : 'body1'
-        }, {
-          children: menuInfo.title
-        }), void 0);
+    case '[object Array]':
+      //@ts-ignore
+      contentDom = children.filter(function (dom) {
+        if (dom.type) {
+          if (dom.type.displayName === 'LayoutHeader') headerDom = dom;
+          if (dom.type.displayName === 'LayoutFooter') footerDom = dom;
+          return dom.type.displayName !== 'LayoutHeader' && dom.type.displayName !== 'LayoutFooter';
+        } // 希望所有的dom都被返回，处理一下dom=数字0这种情况
 
-      case 'function':
-        return _jsxs(_Fragment, {
-          children: [_jsx(Typography, Object.assign({
-            className: classnames({
-              'active-menu': activeMenu === menuInfo.key
-            }),
-            level: activeMenu === menuInfo.key ? 'h4' : 'body1'
-          }, {
-            children: menuInfo.title
-          }), void 0), badge()]
-        }, void 0);
-    }
-  }
 
-  var topRightContent = companyInfoRender ? companyInfoRender() : _jsxs(_Fragment, {
-    children: [_jsxs("div", Object.assign({
-      className: "no-address-info"
-    }, {
-      children: [tel && _jsxs("div", Object.assign({
-        className: "info-container",
-        style: {
-          alignItems: 'center'
-        }
-      }, {
-        children: [_jsx(PhoneOutlined, {}, void 0), _jsx("div", {
-          children: typeof tel === 'string' ? _jsx(Typography, Object.assign({
-            level: "body2",
-            className: "info-span"
-          }, {
-            children: tel
-          }), void 0) : tel
-        }, void 0)]
-      }), void 0), email && _jsxs("div", Object.assign({
-        className: "info-container",
-        style: {
-          alignItems: 'center'
-        }
-      }, {
-        children: [_jsx(EmailOutlined, {}, void 0), _jsx("div", {
-          children: typeof email === 'string' ? _jsx(Typography, Object.assign({
-            level: "body2",
-            className: "info-span"
-          }, {
-            children: email
-          }), void 0) : email
-        }, void 0)]
-      }), void 0), workTime && _jsxs("div", Object.assign({
-        className: "info-container"
-      }, {
-        children: [_jsx(TimeOutlined, {}, void 0), _jsx("div", {
-          children: typeof workTime === 'string' ? _jsx(Typography, Object.assign({
-            level: "body2",
-            className: "info-span"
-          }, {
-            children: workTime
-          }), void 0) : workTime
-        }, void 0)]
-      }), void 0)]
-    }), void 0), address && _jsxs(_Space, Object.assign({
-      size: 16,
-      align: "start"
-    }, {
-      children: [_jsx(LocationOutlined, {
-        style: {
-          fontSize: 24
-        }
-      }, void 0), _jsx("div", {
-        children: typeof address === 'string' ? _jsx(Typography, Object.assign({
-          level: "body2",
-          className: "info-span"
-        }, {
-          children: address
-        }), void 0) : address
-      }, void 0)]
-    }), void 0)]
-  }, void 0);
+        return dom !== false;
+      });
+      break;
+
+    default:
+      contentDom = children;
+  }
 
   if (!md) {
     return _jsxs("div", Object.assign({
       style: style,
       className: classnames(layoutContainerClass, className)
     }, {
-      children: [_jsxs("div", Object.assign({
-        className: classnames({
-          'igloo-layout-header': true,
-          'igloo-layout-header-fix': Boolean(menus === null || menus === void 0 ? void 0 : menus.length) || Boolean(dropMenuConfig)
-        })
-      }, {
-        children: [_jsx("div", {
-          className: "igloo-logo"
-        }, void 0), dropMenuConfig && _jsx(HomeMenu, Object.assign({
-          userAvatar: userAvatar,
-          userName: userName
-        }, dropMenuConfig), void 0)]
-      }), void 0), Boolean(menus === null || menus === void 0 ? void 0 : menus.length) && _jsx(_Row, Object.assign({
-        className: "igloo-layout-menu"
-      }, {
-        children: menus.map(function (menu) {
-          var span = 24 / menus.length;
-          return _jsx(_Col, Object.assign({
-            span: span,
-            className: classnames('menu-item'),
-            onClick: function onClick() {
-              onMenuChange ? onMenuChange(menu) : defaultMenuOnClick(menu);
-            }
-          }, {
-            children: _jsx("div", Object.assign({
-              style: {
-                display: 'flex',
-                alignItems: 'flex-start'
-              }
-            }, {
-              children: getMenuDom(selectedMenu || activeMenu, menu)
-            }), void 0)
-          }), menu.key);
-        })
-      }), void 0), _jsx("div", Object.assign({
+      children: [headerConfig && _jsx(LayoutHeader, Object.assign({}, headerConfig), void 0), headerDom, _jsx("div", Object.assign({
         className: "igloo-layout-center"
       }, {
         children: _jsx("div", Object.assign({
           className: "igloo-layout-content"
         }, {
-          children: children
+          children: contentDom
         }), void 0)
-      }), void 0), _jsx("div", Object.assign({
-        className: "igloo-layout-footer"
-      }, {
-        children: _jsxs("div", Object.assign({
-          className: "footer-content"
-        }, {
-          children: [_jsx("div", {
-            className: "igloo-logo"
-          }, void 0), _jsxs("div", Object.assign({
-            className: "compony-info"
-          }, {
-            children: [tel && _jsxs("div", Object.assign({
-              className: "info-item"
-            }, {
-              children: [_jsx(PhoneOutlined, {}, void 0), _jsx("div", {
-                children: typeof tel === 'string' ? _jsx(Typography, Object.assign({
-                  level: "body3",
-                  className: "info-span"
-                }, {
-                  children: tel
-                }), void 0) : tel
-              }, void 0)]
-            }), void 0), email && _jsxs("div", Object.assign({
-              className: "info-item"
-            }, {
-              children: [_jsx(EmailOutlined, {}, void 0), _jsx("div", {
-                children: typeof email === 'string' ? _jsx(Typography, Object.assign({
-                  level: "body3",
-                  className: "info-span"
-                }, {
-                  children: email
-                }), void 0) : email
-              }, void 0)]
-            }), void 0), workTime && _jsxs("div", Object.assign({
-              className: "info-item"
-            }, {
-              children: [_jsx(TimeOutlined, {}, void 0), _jsx("div", {
-                children: typeof workTime === 'string' ? _jsx(Typography, Object.assign({
-                  level: "body3",
-                  className: "info-span"
-                }, {
-                  children: workTime
-                }), void 0) : workTime
-              }, void 0)]
-            }), void 0), address && _jsxs("div", Object.assign({
-              className: "info-item"
-            }, {
-              children: [_jsx(LocationOutlined, {
-                style: {
-                  fontSize: 24
-                }
-              }, void 0), _jsx("div", {
-                children: typeof address === 'string' ? _jsx(Typography, Object.assign({
-                  level: "body3",
-                  className: "info-span"
-                }, {
-                  children: address
-                }), void 0) : address
-              }, void 0)]
-            }), void 0)]
-          }), void 0), _jsxs("div", Object.assign({
-            className: "footer-bottom"
-          }, {
-            children: [_jsx("div", {
-              children: copyRightRender ? copyRightRender(_jsxs("div", {
-                children: [_jsxs("div", {
-                  children: ["\xA9 $", new Date().getFullYear(), " Powered by Axinan Pte Ltd."]
-                }, void 0), _jsx("div", {
-                  children: "All Rights Reserved."
-                }, void 0)]
-              }, void 0)) : _jsxs(Typography, Object.assign({
-                level: "body3"
-              }, {
-                children: ["\xA9 ".concat(new Date().getFullYear(), " Powered by Axinan Pte Ltd."), _jsx("div", {
-                  children: "All Rights Reserved."
-                }, void 0)]
-              }), void 0)
-            }, void 0), _jsx("div", {
-              children: _jsxs(Typography, Object.assign({
-                level: "body3"
-              }, {
-                children: [_jsx(Button, Object.assign({
-                  type: "text",
-                  onClick: function onClick() {
-                    return window.open('https://contents.iglooinsure.com');
-                  }
-                }, {
-                  children: _jsx(Typography, Object.assign({
-                    level: "body3"
-                  }, {
-                    children: "Privacy Policy"
-                  }), void 0)
-                }), void 0), ' ', _jsx("span", Object.assign({
-                  style: {
-                    margin: '0px 16px'
-                  }
-                }, {
-                  children: "|"
-                }), void 0), " Terms of Service"]
-              }), void 0)
-            }, void 0)]
-          }), void 0)]
-        }), void 0)
-      }), void 0)]
+      }), void 0), footerConfig && _jsx(LayoutFooter, Object.assign({}, footerConfig), void 0), footerDom]
     }), void 0);
   }
 
@@ -406,109 +104,18 @@ var Layout = function Layout(props) {
     style: style,
     className: classnames(layoutContainerClass, className)
   }, {
-    children: [_jsx("div", Object.assign({
-      className: classnames({
-        'igloo-layout-header': true,
-        'igloo-layout-header-fix': Boolean(menus === null || menus === void 0 ? void 0 : menus.length) || Boolean(dropMenuConfig)
-      })
-    }, {
-      children: _jsxs("div", Object.assign({
-        className: "header-content"
-      }, {
-        children: [_jsxs("div", Object.assign({
-          className: "header-left"
-        }, {
-          children: [_jsx("div", {
-            className: "igloo-logo"
-          }, void 0), Boolean(menus === null || menus === void 0 ? void 0 : menus.length) && _jsx(_Row, {
-            children: menus.map(function (menu) {
-              return _jsx(_Col, Object.assign({
-                className: classnames('menu-item'),
-                onClick: function onClick() {
-                  onMenuChange ? onMenuChange(menu) : defaultMenuOnClick(menu);
-                }
-              }, {
-                children: getMenuDom(selectedMenu || activeMenu, menu)
-              }), menu.key);
-            })
-          }, void 0)]
-        }), void 0), dropMenuConfig && _jsxs(_Space, Object.assign({
-          size: 8
-        }, {
-          children: [_jsx(_Avatar, {
-            size: 32,
-            src: userAvatar
-          }, void 0), _jsx(Typography, Object.assign({
-            level: "body1",
-            style: {
-              color: '#666666'
-            }
-          }, {
-            children: userName
-          }), void 0), dropMenuConfig && _jsx(HomeMenu, Object.assign({}, dropMenuConfig), void 0)]
-        }), void 0)]
-      }), void 0)
-    }), void 0), _jsx("div", Object.assign({
+    children: [headerConfig && _jsx(LayoutHeader, Object.assign({}, headerConfig), void 0), headerDom, _jsx("div", Object.assign({
       className: "igloo-layout-center"
     }, {
       children: _jsx("div", Object.assign({
         className: "igloo-layout-content"
       }, {
-        children: children
-      }), void 0)
-    }), void 0), _jsx("div", Object.assign({
-      className: "igloo-layout-footer"
-    }, {
-      children: _jsxs("div", Object.assign({
-        className: "footer-content"
-      }, {
-        children: [_jsxs(_Space, Object.assign({
-          size: 32,
-          align: "start",
-          className: "footer-top"
-        }, {
-          children: [_jsx("div", Object.assign({
-            className: "top-left"
-          }, {
-            children: _jsx("div", {
-              className: "igloo-logo"
-            }, void 0)
-          }), void 0), topRightContent]
-        }), void 0), _jsx("div", {
-          className: "footer-divider"
-        }, void 0), _jsxs("div", Object.assign({
-          className: "footer-bottom"
-        }, {
-          children: [copyRightRender ? copyRightRender("\xA9 ".concat(new Date().getFullYear(), " Powered by Axinan Pte Ltd. All Rights Reserved.")) : _jsx(Typography, Object.assign({
-            level: "body3"
-          }, {
-            children: "\xA9 ".concat(new Date().getFullYear(), " Powered by Axinan Pte Ltd. All Rights Reserved.")
-          }), void 0), _jsxs(Typography, Object.assign({
-            level: "body3"
-          }, {
-            children: [_jsx(Button, Object.assign({
-              type: "text",
-              onClick: function onClick() {
-                return window.open('https://contents.iglooinsure.com');
-              }
-            }, {
-              children: _jsx(Typography, Object.assign({
-                level: "body3"
-              }, {
-                children: "Privacy Policy"
-              }), void 0)
-            }), void 0), ' ', _jsx("span", Object.assign({
-              style: {
-                margin: '0px 16px'
-              }
-            }, {
-              children: "|"
-            }), void 0), " Terms of Service"]
-          }), void 0)]
-        }), void 0)]
+        children: contentDom
       }), void 0)
-    }), void 0)]
+    }), void 0), footerConfig && _jsx(LayoutFooter, Object.assign({}, footerConfig), void 0), footerDom]
   }), void 0);
 };
 
+Layout.Header = LayoutHeader;
+Layout.Footer = LayoutFooter;
 export default Layout;