feat: 优化部分 section 和 page 的代码

alibaba-fusion · Oct 11, 2022 · 6c9cbc9 · 6c9cbc9
1 parent 42172a3
commit 6c9cbc9
Show file tree

Hide file tree

Showing 15 changed files with 108 additions and 282 deletions.
diff --git a/build.json b/build.json
@@ -1,5 +1,5 @@
 {
   "library": "AlifdLayout",
   "libraryTarget": "umd",
-  "plugins": ["build-plugin-component", "build-plugin-fusion"]
+  "plugins": ["build-plugin-jsx-plus", "build-plugin-component", "build-plugin-fusion"]
 }
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@alifd/layout",
-  "version": "1.1.0",
+  "version": "2.0.0",
   "description": "自然布局",
   "files": [
     "demo/",
@@ -39,6 +39,7 @@
   "dependencies": {
     "@alifd/next": "^1.x",
     "classnames": "^2.3.2",
+    "lodash-es": "^4.17.21",
     "resize-observer-polyfill": "^1.5.1"
   },
   "devDependencies": {
@@ -47,10 +48,12 @@
     "@alifd/next": "1.x",
     "@alifd/theme-3": "^0.5.3",
     "@iceworks/spec": "^1.0.0",
+    "@types/lodash-es": "^4.17.6",
     "@types/react": "^16.9.13",
     "@types/react-dom": "^16.9.4",
     "build-plugin-component": "^1.0.0",
     "build-plugin-fusion": "^0.1.0",
+    "build-plugin-jsx-plus": "^0.1.4",
     "build-plugin-moment-locales": "^0.1.0",
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.14.0",
@@ -76,7 +79,7 @@
     "access": "public"
   },
   "license": "MIT",
-  "homepage": "https://unpkg.com/@alifd/layout@1.1.0-beta.1/build/index.html",
+  "homepage": "https://unpkg.com/@alifd/layout@2.0.0/build/index.html",
   "bugs": "https://gitlab.alibaba-inc.com/fusion-design/layout/issues",
   "husky": {
     "hooks": {

diff --git a/src/block.tsx b/src/block.tsx
@@ -78,29 +78,25 @@ const Block: ForwardRefRenderFunction<any, BlockProps> = (props, ref: ForwardedR
     return (
       <div {...others} className={blockCls} ref={ref}>
         <Row autoFit verAlign="middle" className={headCls}>
-          {title ? (
-            <Cell className={`${clsPrefix}-title`} align={titleAlign}>
-              {isString(title) ? (
-                <P>
-                  <Text type="h6">{title}</Text>
-                </P>
-              ) : (
-                title
-              )}
-            </Cell>
-          ) : null}
+          <Cell x-if={title} className={`${clsPrefix}-title`} align={titleAlign}>
+            {isString(title) ? (
+              <P>
+                <Text type="h6">{title}</Text>
+              </P>
+            ) : (
+              title
+            )}
+          </Cell>
 
-          {extra ? (
-            <Cell autoFit className={`${clsPrefix}-extra`} align="right">
-              {isString(extra) ? (
-                <P>
-                  <Text>{extra}</Text>
-                </P>
-              ) : (
-                extra
-              )}
-            </Cell>
-          ) : null}
+          <Cell x-if={extra} autoFit className={`${clsPrefix}-extra`} align="right">
+            {isString(extra) ? (
+              <P>
+                <Text>{extra}</Text>
+              </P>
+            ) : (
+              extra
+            )}
+          </Cell>
         </Row>
 
         <Cell

diff --git a/src/utils/hooks/useCombineRef.ts → src/hooks/use-combine-ref.ts b/src/utils/hooks/useCombineRef.ts → src/hooks/use-combine-ref.ts
diff --git a/src/utils/hooks/use-guid.ts → src/hooks/use-guid.ts b/src/utils/hooks/use-guid.ts → src/hooks/use-guid.ts
diff --git a/src/page/aside.tsx b/src/page/aside.tsx
@@ -47,11 +47,15 @@ const PageAside: IPageAside = (props: PageAsideProps) => {
     ...style,
   };
 
-  return children ? (
+  if (!children) {
+    return null;
+  }
+
+  return (
     <aside className={asideCls} style={newStyle} {...others}>
       <div className={asideInnerCls}>{newChildren}</div>
     </aside>
-  ) : null;
+  );
 };
 
 PageAside.displayName = 'Aside';

diff --git a/src/page/index.tsx b/src/page/index.tsx
@@ -17,11 +17,11 @@ import Tab from '@alifd/next/lib/tab';
 import ResizeObserver from 'resize-observer-polyfill';
 import Context from '../common/context';
 import { DEFAULT_BREAK_POINTS } from '../common/constant';
-import useCombinedRefs from '../utils/hooks/useCombineRef';
+import useCombinedRefs from '../hooks/use-combine-ref';
 import { getCurBreakPoint, getMaxNumberOfColumns, isValidGap, wrapUnit } from '../utils';
 import PageContent, { PageContentProps } from './content';
 import { BaseBgMode, BaseGap, BaseProps, BreakPoint, BreakPoints } from '../types';
-import useGuid from '../utils/hooks/use-guid';
+import useGuid from '../hooks/use-guid';
 
 interface ContentProps extends BaseBgMode {
   style?: CSSProperties;

diff --git a/src/page/nav.tsx b/src/page/nav.tsx
@@ -44,11 +44,15 @@ const PageNav: IPageNav = (props: PageNavProps) => {
     ...style,
   };
 
-  return children ? (
+  if (!children) {
+    return null;
+  }
+
+  return (
     <nav className={navCls} style={newStyle} {...others}>
       <div className={navInnerCls}>{newChildren}</div>
     </nav>
-  ) : null;
+  );
 };
 
 PageNav.displayName = 'Nav';

diff --git a/src/page/page-footer.tsx b/src/page/page-footer.tsx
@@ -28,11 +28,15 @@ const PageFooter: IPageFooter = (props: PageFooterProps) => {
     [`${prefix}bg--${mode}`]: !!mode,
   });
 
-  return children ? (
+  if (!children) {
+    return null;
+  }
+
+  return (
     <footer {...others} className={footerCls}>
       <div className={`${prefix}page-footer-inner`}>{children}</div>
     </footer>
-  ) : null;
+  );
 };
 
 PageFooter.displayName = 'Footer';

diff --git a/src/page/page-header.tsx b/src/page/page-header.tsx
@@ -29,11 +29,15 @@ const PageHeader: IPageHeader = (props: PageHeaderProps) => {
     [`${prefix}bg--${mode}`]: !!mode,
   });
 
-  return children ? (
+  if (!children) {
+    return null;
+  }
+
+  return (
     <header {...others} className={headerCls}>
       <div className={`${prefix}page-header-inner`}>{children}</div>
     </header>
-  ) : null;
+  );
 };
 
 PageHeader.displayName = 'Header';

diff --git a/src/section.tsx b/src/section.tsx
@@ -10,7 +10,7 @@ import {
   ForwardRefExoticComponent,
   useMemo,
 } from 'react';
-import { isString } from 'lodash-es';
+import { isString, isNil } from 'lodash-es';
 import classNames from 'classnames';
 import Context from './common/context';
 import { wrapUnit, getGapVal, isValidGap } from './utils';
@@ -48,27 +48,39 @@ function getValidChildren(
 function wrapBlock(children: ReactNode, maxNumberOfColumns: number) {
   let tmp: any[] = [];
   const ret: any[] = [];
-  const validChildList = Children.toArray(children).filter((child) => !!child);
+  const validChildList = Children.toArray(children).filter((child) => !isNil(child));
 
   validChildList.forEach((child: any, index) => {
     if (child?.type === Block || child?.type?._typeMark === 'Block') {
       if (tmp.length > 0) {
-        ret.push(<Block span={maxNumberOfColumns}>{tmp}</Block>);
+        ret.push(
+          <Block key={`cs-${index}`} span={maxNumberOfColumns}>
+            {tmp}
+          </Block>,
+        );
         tmp = [];
       }
 
       ret.push(child);
 
       if (tmp.length > 0) {
-        ret.push(<Block span={maxNumberOfColumns}>{[...tmp]}</Block>);
+        ret.push(
+          <Block key={`cs-${index}`} span={maxNumberOfColumns}>
+            {[...tmp]}
+          </Block>,
+        );
         tmp = [];
       }
     } else {
       tmp.push(child);
     }
 
     if (index === validChildList.length - 1 && tmp.length > 0) {
-      ret.push(<Block span={maxNumberOfColumns}>{[...tmp]}</Block>);
+      ret.push(
+        <Block key={`cs-${index}`} span={maxNumberOfColumns}>
+          {[...tmp]}
+        </Block>,
+      );
       tmp = [];
     }
   });
@@ -158,10 +170,6 @@ const Section: ForwardRefRenderFunction<HTMLDivElement, SectionProps> = (props,
   } = useContext<LayoutContextProps>(Context);
   const clsPrefix = `${prefix}section`;
   const hasHead = title || extra;
-
-  // 此处定义的是 blockGap
-  const gap = getGapVal(blockGapContext, blockGapProp);
-
   // classNames
   const sectionCls = classNames(clsPrefix, className);
   const blockWrapperCls = `${clsPrefix}-block-wrapper`;
@@ -170,14 +178,19 @@ const Section: ForwardRefRenderFunction<HTMLDivElement, SectionProps> = (props,
   });
   const innerContainerWithoutHead = classNames(`${clsPrefix}-inner-without-head`);
 
-  const blockWrapperStyle = {
-    ...(isValidGap(gap)
-      ? {
-          gridColumnGap: wrapUnit(gap),
-          gridRowGap: wrapUnit(gap),
-        }
-      : null),
-  };
+  // 此处定义的是 blockGap
+  const gap = getGapVal(blockGapContext, blockGapProp);
+
+  const blockWrapperStyle = useMemo(() => {
+    return {
+      ...(isValidGap(gap)
+        ? {
+            gridColumnGap: wrapUnit(gap),
+            gridRowGap: wrapUnit(gap),
+          }
+        : null),
+    };
+  }, [gap]);
 
   const newChildren = useMemo(
     () => getValidChildren(children, numberOfColumns, maxNumberOfColumns),
@@ -191,22 +204,18 @@ const Section: ForwardRefRenderFunction<HTMLDivElement, SectionProps> = (props,
         <div className={innerContainerWithHead}>
           <Col align="stretch">
             <Row autoFit className={`${clsPrefix}-head`} verAlign="middle">
-              {title ? (
-                <Cell className={`${clsPrefix}-title`} align={titleAlign}>
-                  {isString(title) ? <P type="h5">{title}</P> : title}
-                </Cell>
-              ) : null}
-              {extra ? (
-                <Cell align="right" autoFit className={`${clsPrefix}-extra`}>
-                  {isString(extra) ? (
-                    <P align="right" type="body2">
-                      {extra}
-                    </P>
-                  ) : (
-                    extra
-                  )}
-                </Cell>
-              ) : null}
+              <Cell x-if={title} className={`${clsPrefix}-title`} align={titleAlign}>
+                {isString(title) ? <P type="h5">{title}</P> : title}
+              </Cell>
+              <Cell x-if={extra} align="right" autoFit className={`${clsPrefix}-extra`}>
+                {isString(extra) ? (
+                  <P align="right" type="body2">
+                    {extra} - 123
+                  </P>
+                ) : (
+                  extra
+                )}
+              </Cell>
             </Row>
             <Cell>
               <div className={blockWrapperCls} style={blockWrapperStyle}>

diff --git a/src/text.tsx b/src/text.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { FC, useContext } from 'react';
+import { createElement, FC, useContext } from 'react';
 import classNames from 'classnames';
-import { textTypeMap } from './util';
+import { TextTypeMap } from './util';
 import Context from './common/context';
 import { TextProps, LayoutContextProps, TypeMark } from './types';
 
@@ -15,7 +15,7 @@ const Text: ITextComponent = (props) => {
     className,
     type,
     style,
-    component,
+    component = 'span',
     strong,
     underline,
     delete: deleteProp,
@@ -30,7 +30,7 @@ const Text: ITextComponent = (props) => {
 
   let { children } = props;
   // @ts-ignore
-  const newType = textTypeMap[type] || type;
+  const newType = TextTypeMap[type] || type;
 
   const cls = classNames(className, {
     [`${prefix}text`]: true,
@@ -49,8 +49,6 @@ const Text: ITextComponent = (props) => {
     children = newChildren;
   }
 
-  const Tag = component;
-
   if (strong) {
     children = <strong>{children}</strong>;
   }
@@ -78,10 +76,14 @@ const Text: ITextComponent = (props) => {
     ...style,
   };
 
-  return (
-    <Tag {...others} style={newStyle} className={cls}>
-      {children}
-    </Tag>
+  return createElement(
+    component,
+    {
+      ...others,
+      style: newStyle,
+      className: cls,
+    },
+    children,
   );
 };
 

diff --git a/src/types.ts b/src/types.ts
@@ -1,4 +1,4 @@
-import { CSSProperties, ElementType, HTMLAttributes, ReactNode } from 'react';
+import { CSSProperties, HTMLAttributes, ReactNode } from 'react';
 
 export type BaseSize = 'small' | 'medium' | 'large';
 
@@ -344,7 +344,7 @@ export interface TextProps extends BaseProps {
   /**
    * 设置标签类型
    */
-  component?: ElementType;
+  component?: string;
   /**
    * 自定义颜色
    */