add layout component with flow pkg

.changeset/young-otters-swim.md

@@ -0,0 +1,5 @@
+---
+'@alita/flow': minor
+---
+
+Add expand container component, add fill container component, add shrink container component, three components for page module layout

CONTRIBUTING.md

@@ -9,4 +9,4 @@ $ pnpm i
 $ pnpm build
 $ cd examples/boilerplate
 $ pnpm dev
-```
+```

examples/flow/.gitignore

@@ -0,0 +1,7 @@
+/.env.local
+/.umirc.local.ts
+/.umirc.local.js
+/config/config.local.ts
+/config/config.local.js
+/src/.umi
+/.umi

examples/flow/.umirc.ts

@@ -0,0 +1,7 @@
+export default {
+  appType: 'h5',
+  polyfill: false,
+  // mainPath:'users',
+  mfsu: false,
+  hash: false,
+};

examples/flow/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "boilerplate",
+  "private": true,
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "rm -rf .mfsu && alita dev",
+    "build": "alita build",
+    "plugin": "alita plugin list"
+  },
+  "dependencies": {
+    "@alita/flow": "workspace:*",
+    "alita": "workspace:*"
+  }
+}

examples/flow/src/pages/global.less

@@ -0,0 +1,3 @@
+a {
+  color: green;
+}

examples/flow/src/pages/index.less

@@ -0,0 +1,3 @@
+.title {
+  font-size: 30px;
+}

examples/flow/src/pages/index.tsx

@@ -0,0 +1,59 @@
+import { FillContainer, FlexContent, ShrinkingModule } from '@alita/flow';
+import React from 'react';
+import './global.less';
+
+/**
+ * 生成一个随机数组 用来模拟图表数据变化
+ * @param n 数组的长度
+ * @param max 数组的最大值
+ * @returns {Array} 一个指定长度的随机数组
+ */
+const getRandomArr = (n: number, max = 31) => {
+  let maxNum = max;
+  //大于数组长度时，取数组长度
+  if (n > 31) n = 31;
+  let number = [];
+  while (n) {
+    //随机数的选取方法31为所需的数组长度
+    let num = Math.floor(Math.random() * maxNum) + 2;
+    //数组查重的方法
+    if (number.indexOf(num) < 0) {
+      number.push(num);
+      n--;
+    }
+  }
+  return number;
+};
+
+const RainbowColor = [
+  'red',
+  'orange',
+  'yellow',
+  'green',
+  'cyan',
+  'blue',
+  'purple',
+];
+
+const DemoPage: React.FC = () => {
+  const renderAtr = getRandomArr(12);
+  return (
+    <FillContainer>
+      <ShrinkingModule backgroundColor="blue">
+        <div>header</div>
+      </ShrinkingModule>
+      <FlexContent>
+        {renderAtr.map((num, index) => (
+          <ShrinkingModule key={num} backgroundColor={RainbowColor[index % 7]}>
+            <div>{RainbowColor[index % 7]}</div>
+          </ShrinkingModule>
+        ))}
+      </FlexContent>
+      <ShrinkingModule backgroundColor="red">
+        <div>footer</div>
+      </ShrinkingModule>
+    </FillContainer>
+  );
+};
+
+export default DemoPage;

examples/flow/tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "dist",
+    "sourceMap": true,
+    "jsx": "react",
+    "declaration": false,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "target": "es2017",
+    "typeRoots": ["node_modules/@types"],
+    "lib": ["es2018", "dom"],
+    "allowSyntheticDefaultImports": true,
+    "rootDirs": ["/src", "/test", "/mock", "./typings"],
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "noUnusedLocals": true,
+    "allowJs": true,
+    "strict": true,
+    "paths": {
+      "@/*": ["./src/*"],
+      "@@/*": ["./src/.umi/*"]
+    }
+  }
+}

examples/flow/typings.d.ts

@@ -0,0 +1,13 @@
+declare module '*.css';
+declare module '*.less';
+declare module '*.scss';
+declare module '*.sass';
+declare module '*.svg';
+declare module '*.png';
+declare module '*.jpg';
+declare module '*.jpeg';
+declare module '*.gif';
+declare module '*.bmp';
+declare module '*.tiff';
+declare module '*.json';
+

packages/flow/src/components/FillContainer/index.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+
+interface FillContainerProps {
+  /**
+   * @description 自定义样式
+   * @default ''
+   */
+  classname?: string;
+  /**
+   * @description 背景颜色
+   * @default ''
+   */
+  backgroundColor?: string;
+  /**
+   * @description 布局方向
+   * @default 'column'
+   */
+  flexDirection?: 'column' | 'row';
+  /**
+   * @description 内容滚动配置
+   * @default 'hidden'
+   */
+  overflow?: string;
+}
+
+const FillContainer: React.FC<FillContainerProps> = (props) => {
+  const {
+    backgroundColor = '',
+    flexDirection = 'column',
+    overflow = 'hidden',
+    children,
+    classname = '',
+  } = props;
+  const childs = React.Children.toArray(children);
+  return (
+    <div
+      className={`${classname}`}
+      style={{
+        position: 'absolute',
+        inset: 0,
+        display: 'flex',
+        backgroundColor,
+        flexDirection,
+        overflow,
+      }}
+    >
+      {!!childs &&
+        childs.map((child: any, index: number) => {
+          return React.cloneElement(child, { ...child.props, key: index });
+        })}
+    </div>
+  );
+};
+
+export default FillContainer;

packages/flow/src/components/FlexContent/index.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+// import './index.less';
+
+interface FlexContentProps {
+  /**
+   * @description 自定义样式
+   * @default ''
+   */
+  classname?: string;
+  /**
+   * @description 背景颜色
+   * @default ''
+   */
+  backgroundColor?: string;
+  /**
+   * @description 布局方向
+   * @default 'column'
+   */
+  flexDirection?: 'column' | 'row';
+  /**
+   * @description 内容滚动配置
+   * @default 'scroll'
+   */
+  overflow?: string;
+}
+
+const FlexContent: React.FC<FlexContentProps> = (props) => {
+  const {
+    backgroundColor = '',
+    flexDirection = 'column',
+    overflow = 'scroll',
+    children,
+    classname = '',
+  } = props;
+  const childs = React.Children.toArray(children);
+  return (
+    <div
+      className={`${classname}`}
+      style={{
+        display: 'flex',
+        flex: 1,
+        backgroundColor,
+        flexDirection,
+        overflow,
+      }}
+    >
+      {!!childs &&
+        childs.map((child: any, index: number) => {
+          return React.cloneElement(child, { ...child.props, key: index });
+        })}
+    </div>
+  );
+};
+
+export default FlexContent;

packages/flow/src/components/ShrinkingModule/index.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+
+interface ShrinkingModuleProps {
+  /**
+   * @description 自定义样式
+   * @default ''
+   */
+  classname?: string;
+  /**
+   * @description 背景颜色
+   * @default ''
+   */
+  backgroundColor?: string;
+  /**
+   * @description 布局排列方向
+   * @default 'column'
+   */
+  flexDirection?: 'column' | 'row';
+  /**
+   * @description 内容滚动配置
+   * @default 'hidden'
+   */
+  overflow?: string;
+}
+
+const ShrinkingModule: React.FC<ShrinkingModuleProps> = (props) => {
+  const {
+    backgroundColor = '',
+    flexDirection = 'column',
+    overflow = 'hidden',
+    children,
+    classname = '',
+  } = props;
+  const childs = React.Children.toArray(children);
+  return (
+    <div
+      className={`${classname}`}
+      style={{
+        display: 'flex',
+        flexShrink: 0,
+        backgroundColor,
+        flexDirection,
+        overflow,
+      }}
+    >
+      {!!childs &&
+        childs.map((child: any, index: number) => {
+          return React.cloneElement(child, { ...child.props, key: index });
+        })}
+    </div>
+  );
+};
+
+export default ShrinkingModule;

packages/flow/src/index.ts

@@ -1,4 +1,7 @@
 export { ErrorBoundary, withErrorBoundary } from './components/ErrorBoundary';
+export { default as FillContainer } from './components/FillContainer';
+export { default as FlexContent } from './components/FlexContent';
 export { default as For } from './components/For';
 export { default as Show } from './components/Show';
+export { default as ShrinkingModule } from './components/ShrinkingModule';
 export { default as Switch, Match } from './components/Switch';