⚡ feat: update dingding demo & pannel config done

Author: ONLY-yours

src/Layout/components/HeaderAndFooter.tsx

@@ -2,6 +2,7 @@ import ActionIcon from '@/ActionIcon';
 import { MenuUnfoldOutlined } from '@ant-design/icons';
 import { DropDownProps, Dropdown, Flex, FlexProps } from 'antd';
 import { ReactNode } from 'react';
+import { ThemeLayoutType } from '..';
 import { getPrefixCls } from '../../theme';
 import { useStyle } from './../style';
 
@@ -14,6 +15,7 @@ type iconDropdownType = {
   icon?: ReactNode;
   dropdown?: DropDownProps;
   title?: ReactNode;
+  render?: (props: iconDropdownType, defalutDom?: ReactNode) => JSX.Element;
 };
 
 interface HeaderFooterSettings {
@@ -26,12 +28,10 @@ interface HeaderFooterSettings {
   className?: string;
   children?: ReactNode;
   type?: typeEnum | string;
+  themeType?: ThemeLayoutType;
 }
 
 const HeaderAndFooter = (props: HeaderFooterSettings) => {
-  const prefixCls = getPrefixCls('layout');
-
-  const { styles, cx } = useStyle(prefixCls);
   const {
     children,
     render,
@@ -47,10 +47,17 @@ const HeaderAndFooter = (props: HeaderFooterSettings) => {
       icon: <MenuUnfoldOutlined />,
       dropdown: undefined,
       title: '',
+      render,
     },
+    themeType,
     style = {},
     className,
   } = props || {};
+
+  const prefixCls = getPrefixCls('layout');
+
+  const { styles, cx } = useStyle({ prefixCls, themeType });
+
   if (hide) {
     return null;
   }
@@ -60,7 +67,7 @@ const HeaderAndFooter = (props: HeaderFooterSettings) => {
 
   const IconDom = () => {
     if (iconConfig === false) return null;
-    const { icon, dropdown, title } = iconConfig || {};
+    const { icon, dropdown, title, render } = iconConfig || {};
 
     if (!dropdown)
       return (
@@ -70,8 +77,8 @@ const HeaderAndFooter = (props: HeaderFooterSettings) => {
         </div>
       );
 
-    return (
-      <div className={styles.headerAndFooterIcon}>
+    const DefalutIconDom = (
+      <>
         <Dropdown
           trigger={['click']}
           placement={type === typeEnum.header ? 'bottomLeft' : 'topLeft'}
@@ -80,8 +87,14 @@ const HeaderAndFooter = (props: HeaderFooterSettings) => {
           <ActionIcon icon={icon} />
         </Dropdown>
         {title}
-      </div>
+      </>
     );
+
+    if (render) {
+      return render(iconConfig, DefalutIconDom);
+    }
+
+    return DefalutIconDom;
   };
 
   return (
@@ -98,7 +111,9 @@ const HeaderAndFooter = (props: HeaderFooterSettings) => {
     >
       {/* 虽然是放在 flex 中，但实际上是 absoult 定位到最中间 */}
       <div className={styles.headerAndFooterCenterChildren}>{children}</div>
-      <IconDom />
+      <div className={styles.headerAndFooterIcon}>
+        <IconDom />
+      </div>
       {extra && <div className={styles.headerAndFooterExtra}>{extra}</div>}
     </Flex>
   );

src/Layout/components/LayoutTypeContainer.tsx

@@ -1,21 +1,21 @@
 import { Flex } from 'antd';
 import { ReactNode } from 'react';
 import { Flexbox } from 'react-layout-kit';
-import { LayoutTypeEnum } from '..';
+import { LayoutTypeEnum, ThemeLayoutType } from '..';
 import { getPrefixCls } from '../../theme';
 import { useStyle } from './../style';
 
 type LayoutTypeContainerProps = {
   pannels: ReactNode[];
   headerandfooter: ReactNode[];
   type: LayoutTypeEnum;
+  themeType: ThemeLayoutType;
 };
 
 const LayoutTypeContainer = (props: LayoutTypeContainerProps) => {
+  const { type, pannels, themeType, headerandfooter, ...rest } = props;
   const prefixCls = getPrefixCls('layout');
-  const { styles } = useStyle(prefixCls);
-
-  const { type, pannels, headerandfooter, ...rest } = props;
+  const { styles } = useStyle({ prefixCls, themeType });
 
   const [LeftPannelDom, RightPannelDom, BottomPannelDom, CenterPannelDom] = pannels;
   const [HeaderDom, FooterDom] = headerandfooter;

src/Layout/components/PannelDefault.tsx

@@ -1,6 +1,7 @@
 import { DraggablePanel, TabsProps } from '@ant-design/pro-editor';
 import { Size } from 're-resizable';
 import { ReactNode } from 'react';
+import { ThemeLayoutType } from '..';
 import { getPrefixCls } from '../../theme';
 import { useStyle } from './../style';
 
@@ -17,11 +18,22 @@ interface PannelSettings {
   maxHeight?: number;
   style?: React.CSSProperties;
   className?: string;
+  themeType?: ThemeLayoutType;
 }
 
 const PannelDefault = (props: PannelSettings & { index: number }) => {
+  const {
+    children = '',
+    className,
+    style,
+    minHeight = 100,
+    minWidth = 100,
+    index = 0,
+    themeType,
+    ...rest
+  } = props || {};
   const prefixCls = getPrefixCls('layout');
-  const { styles, cx } = useStyle(prefixCls);
+  const { styles, cx } = useStyle({ prefixCls, themeType });
 
   const getPannelProps = (
     index: number,
@@ -67,20 +79,10 @@ const PannelDefault = (props: PannelSettings & { index: number }) => {
         return false;
     }
   };
-
-  const {
-    children = '',
-    className,
-    style,
-    minHeight = 100,
-    minWidth = 100,
-    index = 0,
-    ...rest
-  } = props || {};
   const pannelProps = getPannelProps(index);
   if (!pannelProps) {
     return (
-      <div className={cx(styles.pannel, styles.centerPannel)}>
+      <div className={cx(styles.pannel, styles.centerPannel)} style={style}>
         <div className={cx(className)}>{children}</div>
       </div>
     );
@@ -89,14 +91,16 @@ const PannelDefault = (props: PannelSettings & { index: number }) => {
   return (
     <DraggablePanel
       expandable={false}
-      style={{ border: 'none', ...style }}
+      style={{ border: 'none' }}
       placement={placement}
       minHeight={minHeight}
       minWidth={minWidth}
       {...pannelProps}
       {...rest}
     >
-      <div className={cx(styles.pannel, pannelClassName, className)}>{children}</div>
+      <div className={cx(styles.pannel, pannelClassName, className)} style={style}>
+        {children}
+      </div>
     </DraggablePanel>
   );
 };

src/Layout/demos/components/sessinList.tsx

@@ -0,0 +1,136 @@
+import { Avatar, Button, List, Skeleton } from 'antd';
+import { css, cx } from 'antd-style';
+import React, { useEffect, useState } from 'react';
+
+export interface DataType {
+  gender?: string;
+  name: {
+    title?: string;
+    first?: string;
+    last?: string;
+  };
+  email?: string;
+  picture: {
+    large?: string;
+    medium?: string;
+    thumbnail?: string;
+  };
+  nat?: string;
+  loading: boolean;
+}
+
+const count = 8;
+const fakeDataUrl = `https://randomuser.me/api/?results=${count}&inc=name,gender,email,nat,picture&noinfo`;
+
+const ClassNamesGroup = {
+  ListClassName: cx(css`
+    overflow: scroll;
+  `),
+  ListItemClassName: cx(css`
+    cursor: pointer;
+    padding: 0px 10px !important;
+    margin-top: 4px;
+    margin-bottom: 4px;
+    border-radius: 10px;
+    :hover {
+      background-color: #e3e3e3;
+    }
+  `),
+  SubTitle: cx(css`
+    text-wrap: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  `),
+  ItemTitle: cx(css`
+    text-wrap: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin: 0 0 -4px 0;
+  `),
+  avatar: cx(css`
+    height: 40px;
+    width: 40px;
+  `),
+};
+
+const SessonList: React.FC = () => {
+  const [initLoading, setInitLoading] = useState(true);
+  const [loading, setLoading] = useState(false);
+  const [data, setData] = useState<DataType[]>([]);
+  const [list, setList] = useState<DataType[]>([]);
+
+  useEffect(() => {
+    fetch(fakeDataUrl)
+      .then((res) => res.json())
+      .then((res) => {
+        setInitLoading(false);
+        setData(res.results);
+        setList(res.results);
+      });
+  }, []);
+
+  const onLoadMore = () => {
+    setLoading(true);
+    setList(
+      data.concat([...new Array(count)].map(() => ({ loading: true, name: {}, picture: {} }))),
+    );
+    fetch(fakeDataUrl)
+      .then((res) => res.json())
+      .then((res) => {
+        const newData = data.concat(res.results);
+        setData(newData);
+        setList(newData);
+        setLoading(false);
+        // Resetting window's offsetTop so as to display react-virtualized demo underfloor.
+        // In real scene, you can using public method of react-virtualized:
+        // https://stackoverflow.com/questions/46700726/how-to-use-public-method-updateposition-of-react-virtualized
+        window.dispatchEvent(new Event('resize'));
+      });
+  };
+
+  const loadMore =
+    !initLoading && !loading ? (
+      <div
+        style={{
+          textAlign: 'center',
+          marginTop: 12,
+          height: 32,
+          lineHeight: '32px',
+        }}
+      >
+        <Button onClick={onLoadMore}>loading more</Button>
+      </div>
+    ) : null;
+
+  return (
+    <div
+      style={{
+        height: '540px',
+        overflow: 'scroll',
+      }}
+    >
+      <List
+        className={ClassNamesGroup.ListClassName}
+        loading={initLoading}
+        itemLayout="horizontal"
+        loadMore={loadMore}
+        dataSource={list}
+        renderItem={(item) => (
+          <List.Item extra={<div>12.31</div>} className={ClassNamesGroup.ListItemClassName}>
+            <Skeleton avatar title={false} loading={item.loading} active>
+              <List.Item.Meta
+                avatar={<Avatar src={item.picture.large} className={ClassNamesGroup.avatar} />}
+                title={<div className={ClassNamesGroup.ItemTitle}>{item.name?.last}</div>}
+                description={
+                  <div className={ClassNamesGroup.SubTitle}>Hello! nice to meet to u ~</div>
+                }
+              />
+            </Skeleton>
+          </List.Item>
+        )}
+      />
+    </div>
+  );
+};
+
+export default SessonList;