diff --git a/.changeset/young-otters-swim.md b/.changeset/young-otters-swim.md new file mode 100644 index 00000000..f0235e8c --- /dev/null +++ b/.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 diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index a13ad661..4e0ff665 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -9,4 +9,4 @@ $ pnpm i $ pnpm build $ cd examples/boilerplate $ pnpm dev -``` \ No newline at end of file +``` diff --git a/examples/flow/.gitignore b/examples/flow/.gitignore new file mode 100644 index 00000000..9e8a6f26 --- /dev/null +++ b/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 diff --git a/examples/flow/.umirc.ts b/examples/flow/.umirc.ts new file mode 100644 index 00000000..5404c264 --- /dev/null +++ b/examples/flow/.umirc.ts @@ -0,0 +1,7 @@ +export default { + appType: 'h5', + polyfill: false, + // mainPath:'users', + mfsu: false, + hash: false, +}; diff --git a/examples/flow/logo.png b/examples/flow/logo.png new file mode 100644 index 00000000..58306147 Binary files /dev/null and b/examples/flow/logo.png differ diff --git a/examples/flow/package.json b/examples/flow/package.json new file mode 100644 index 00000000..092b310c --- /dev/null +++ b/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:*" + } +} diff --git a/examples/flow/src/pages/global.less b/examples/flow/src/pages/global.less new file mode 100644 index 00000000..03597d36 --- /dev/null +++ b/examples/flow/src/pages/global.less @@ -0,0 +1,3 @@ +a { + color: green; +} diff --git a/examples/flow/src/pages/index.less b/examples/flow/src/pages/index.less new file mode 100644 index 00000000..5192cac7 --- /dev/null +++ b/examples/flow/src/pages/index.less @@ -0,0 +1,3 @@ +.title { + font-size: 30px; +} diff --git a/examples/flow/src/pages/index.tsx b/examples/flow/src/pages/index.tsx new file mode 100644 index 00000000..42ffd10f --- /dev/null +++ b/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 ( + + +
header
+ + + {renderAtr.map((num, index) => ( + +
{RainbowColor[index % 7]}
+ + ))} + + +
footer
+ + + ); +}; + +export default DemoPage; diff --git a/examples/flow/tsconfig.json b/examples/flow/tsconfig.json new file mode 100644 index 00000000..646c5860 --- /dev/null +++ b/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/*"] + } + } +} diff --git a/examples/flow/typings.d.ts b/examples/flow/typings.d.ts new file mode 100644 index 00000000..2feef17a --- /dev/null +++ b/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'; + diff --git a/packages/flow/src/components/FillContainer/index.tsx b/packages/flow/src/components/FillContainer/index.tsx new file mode 100644 index 00000000..cb09298f --- /dev/null +++ b/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 = (props) => { + const { + backgroundColor = '', + flexDirection = 'column', + overflow = 'hidden', + children, + classname = '', + } = props; + const childs = React.Children.toArray(children); + return ( +
+ {!!childs && + childs.map((child: any, index: number) => { + return React.cloneElement(child, { ...child.props, key: index }); + })} +
+ ); +}; + +export default FillContainer; diff --git a/packages/flow/src/components/FlexContent/index.tsx b/packages/flow/src/components/FlexContent/index.tsx new file mode 100644 index 00000000..b665d1c0 --- /dev/null +++ b/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 = (props) => { + const { + backgroundColor = '', + flexDirection = 'column', + overflow = 'scroll', + children, + classname = '', + } = props; + const childs = React.Children.toArray(children); + return ( +
+ {!!childs && + childs.map((child: any, index: number) => { + return React.cloneElement(child, { ...child.props, key: index }); + })} +
+ ); +}; + +export default FlexContent; diff --git a/packages/flow/src/components/ShrinkingModule/index.tsx b/packages/flow/src/components/ShrinkingModule/index.tsx new file mode 100644 index 00000000..d1e6066f --- /dev/null +++ b/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 = (props) => { + const { + backgroundColor = '', + flexDirection = 'column', + overflow = 'hidden', + children, + classname = '', + } = props; + const childs = React.Children.toArray(children); + return ( +
+ {!!childs && + childs.map((child: any, index: number) => { + return React.cloneElement(child, { ...child.props, key: index }); + })} +
+ ); +}; + +export default ShrinkingModule; diff --git a/packages/flow/src/index.ts b/packages/flow/src/index.ts index 7e41ad3a..2bb6e0db 100644 --- a/packages/flow/src/index.ts +++ b/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'; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4ca49ecf..78929cef 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -82,6 +82,14 @@ importers: alita: link:../../packages/alita antd-mobile-icons: 0.2.2 + examples/flow: + specifiers: + '@alita/flow': workspace:* + alita: workspace:* + dependencies: + '@alita/flow': link:../../packages/flow + alita: link:../../packages/alita + packages/alita: specifiers: '@alita/plugins': workspace:*