{"_id":"8lab_layout","_rev":"2-e8943d383cc3e4ab13497c6b55d05a59","name":"8lab_layout","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"8lab_layout","version":"1.0.0","description":"基础布局组件","scripts":{"start":"webpack serve --open --mode development","build":"webpack --mode production","test":"npx jest"},"main":"src/index.ts","devDependencies":{"@babel/core":"^7.14.3","@babel/eslint-parser":"^7.14.4","@babel/preset-env":"^7.14.4","@testing-library/react-hooks":"^7.0.0","@types/node":"^15.9.0","@typescript-eslint/eslint-plugin":"^4.26.0","@typescript-eslint/parser":"^4.26.0","@wojtekmaj/enzyme-adapter-react-17":"^0.6.1","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","css-loader":"^5.2.6","enzyme":"^3.11.0","eslint":"^7.27.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.23.4","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.24.0","html-webpack-plugin":"^5.3.1","jest":"^27.0.4","jsdom":"16.6.0","jsdom-global":"3.0.2","less":"^4.1.1","less-loader":"^9.0.0","node-notifier":"^10.0.0","prettier":"^2.3.0","react-test-renderer":"^17.0.2","style-loader":"^2.0.0","ts-jest":"^27.0.3","ts-loader":"^9.2.2","typescript":"^4.3.2","webpack":"^5.38.1","webpack-cli":"^4.7.0","webpack-dev-server":"^3.11.2"},"author":{"name":"8lab-cc"},"license":"ISC","peerDependencies":{"antd":"^4.16.13","axios":"^0.21.1","babel-plugin-import":"^1.13.3","echarts":"^5.2.0","echarts-gl":"^2.0.8","lodash":"^4.17.21","process":"^0.11.10","react":"^17.0.2","react-dom":"^17.0.2","rxjs":"^7.3.0"},"gitHead":"fb584b4560c6292ebe12d5d90e6ebc48ffd5fdd6","_id":"8lab_layout@1.0.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-OlELnHlgZkuvT5FRM3Y5TG4LInfLKiNhG6LIaN/8ayzwQnDsoqkRVBZ+ASkSQRn53ONw5FFhwT36FG293/r5+A==","shasum":"d1c66de2a30924a57817c293d2316b11615e73bc","tarball":"https://registry.npmjs.org/8lab_layout/-/8lab_layout-1.0.0.tgz","fileCount":34,"unpackedSize":65714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwoj4CRA9TVsSAnZWagAAjPcP/i63E+BHtu7qX+HeWRB2\nMZeY64kz7ayDCRLsYyI7SFDAy67rqegnz8H7zmeEytM+kzkdFHm0hh9rMo+C\noXZZtZ2kyIzDxK70qf25kkrgW76+j5aQNwCc6fZoSEGvGL3H8JcVdJAJ59uE\nPZWTnCftEDcLxasQpv2ddqXXXnh6f05/p7ks/d7rfnKhZKwizh+qjk5L/4Ii\nkHvxMrF6Yg0LV/Xs58IG0n/7S7i8wdH3g5ePncFJeBtSO4mAwUJMyqloi4ip\nv9c8HTtmYgk6MXsqoRQ9/+DDwdtsWJUcl3rbTZBA/vET0ia3jV3m6EdLpMuj\n92s+yojTSTeX4A/gox4XV1xH1KZPE91rkkKZQUi9J6cX//SupIRhQfnBxQYi\nuY+vLYd64k02k0JG1KR/QHTFzV6SEUxl+Z/nA5knoU9Sdq0xiv/VjRPBVeXh\ntXhc+AwFdDJTvGHsuSi0RB6jK4Ggs8U26Dy2pwxTavdOYu0CD7MUbpuxGsBL\ncW8Og16QIeEC/ievjgT4s2wAKpI3WnNS2CeTkFoRulILcPnEPtTuQ+5pP3wd\nbBd9fZiRrXHp+/QS0tTlV3wlQzmhCPgml7trKseBoQCmW50wXnpKczP2Sg84\n5MJzxi1pKU6OmZz7/wSOpvwRll/mn7KjNVTg4joCx4pWiPChbaWf5+xNmAcj\nDkun\r\n=+wwf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID/ywrP2JFiFL6jafKLg8MqoyRtC/uSz3ouiP205CEI0AiAEvAyxCA+0cPjLL9U/1P2L5rFu+j//fUsTCnBG4x2ung=="}]},"_npmUser":{"name":"cc123sx","email":"cc123sx@163.com"},"directories":{},"maintainers":[{"name":"cc123sx","email":"cc123sx@163.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/8lab_layout_1.0.0_1640139000589_0.8536906209874615"},"_hasShrinkwrap":false},"1.0.1":{"name":"8lab_layout","version":"1.0.1","description":"基础布局组件","scripts":{"start":"webpack serve --open --mode development","build":"webpack --mode production","test":"npx jest"},"main":"src/index.ts","devDependencies":{"@babel/core":"^7.14.3","@babel/eslint-parser":"^7.14.4","@babel/preset-env":"^7.14.4","@testing-library/react-hooks":"^7.0.0","@types/node":"^15.9.0","@typescript-eslint/eslint-plugin":"^4.26.0","@typescript-eslint/parser":"^4.26.0","@wojtekmaj/enzyme-adapter-react-17":"^0.6.1","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","css-loader":"^5.2.6","enzyme":"^3.11.0","eslint":"^7.27.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.23.4","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.24.0","html-webpack-plugin":"^5.3.1","jest":"^27.0.4","jsdom":"16.6.0","jsdom-global":"3.0.2","less":"^4.1.1","less-loader":"^9.0.0","node-notifier":"^10.0.0","prettier":"^2.3.0","react-test-renderer":"^17.0.2","style-loader":"^2.0.0","ts-jest":"^27.0.3","ts-loader":"^9.2.2","typescript":"^4.3.2","webpack":"^5.38.1","webpack-cli":"^4.7.0","webpack-dev-server":"^3.11.2"},"author":{"name":"8lab-cc"},"license":"ISC","peerDependencies":{"antd":"^4.16.13","babel-plugin-import":"^1.13.3","echarts":"^5.2.0","echarts-gl":"^2.0.8","lodash":"^4.17.21","process":"^0.11.10","react":"^17.0.2","react-dom":"^17.0.2","rxjs":"^7.3.0"},"gitHead":"fb584b4560c6292ebe12d5d90e6ebc48ffd5fdd6","_id":"8lab_layout@1.0.1","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-8PvjGdpIYJXM3ddcFLYbmEd25Wuu+v6O8VNBHN7vf+wNDCSCF7f1rWHe2iNLwmfgmUwkNtIxRCMqSfgb6zP0JA==","shasum":"8ccc377e0e3e3b20aff9eb12291a97aa18dd0340","tarball":"https://registry.npmjs.org/8lab_layout/-/8lab_layout-1.0.1.tgz","fileCount":34,"unpackedSize":65690,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwpKKCRA9TVsSAnZWagAAGNkP/jGitge1VRViBx+O4Zdr\nSI0+DKUiDFA7l4Q2L6sqFEHnwV6OQ6s7zTnjbhAnauJwMKYg7BrgGT5MrG7Y\nbko7oRaq55u+Wb8CvgKs1c7vOI1uWeGVKYiZYDOj8DNfDT7tzTUsZ6uMvrnC\nRjle5jJztOk61Q1YpxOK2tXwKFq1/Mw1TSZaCURQWc00/dUWnkf863ccxp2k\nzMkmnfjNv8KkwBHxVezZ/z7qfJsJ1RY28zcz4ywsCU3cy0rdJXqxWiqEcoXV\nAnqkqmSIj2aj2z6FPfy5gOGce4MTX+pXdMHzq9puMirEbX0gUnxhDiNYhaFV\nFiPuSpwkyd35UxMngdA9hU9ypPzXCvexopCysJvu7m9I1BevT36Bm6aqBrff\njq8kUyYdzz+RADG/iIr3PiMFJRnsXMj5fuLm/fDDZDOTbLdufIC2uk2Jpy2n\n7WLHR5wfdK1tm4DRuA9ollLC/irC7IrRvQS7II8THIeOA8rEgjYJwDu4Tmor\nCIjzb/iG0whFSVvJYjROt6iRFN3G6WPC3eGhu2bEh6SSXOJ+b6X4ogo9Poww\n00rDypi7Q0lQMJyt4kU41QIRyVSXC9wurWc4pEX2ToDlCTPy12GEIVc4WYp/\nzQTbmLJ1egBnsi/Yn9MhEJCdjx7rMc4PlxZ1m9rf0gdEXfU9W5BZGUuXe8ke\nxoXU\r\n=58iZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQChrN8ImBwbbRjTW5pUhixagi7bFAuJosDwVfmbtG8RcAIgKdRVLXfX0kfMsOcRvY1pZIMvrk7a98ikK1jEmYbOg8A="}]},"_npmUser":{"name":"cc123sx","email":"cc123sx@163.com"},"directories":{},"maintainers":[{"name":"cc123sx","email":"cc123sx@163.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/8lab_layout_1.0.1_1640141450207_0.3085421453398183"},"_hasShrinkwrap":false}},"time":{"created":"2021-12-22T02:10:00.589Z","1.0.0":"2021-12-22T02:10:00.746Z","modified":"2022-04-04T10:24:55.337Z","1.0.1":"2021-12-22T02:50:50.413Z"},"maintainers":[{"name":"cc123sx","email":"cc123sx@163.com"}],"description":"基础布局组件","author":{"name":"8lab-cc"},"license":"ISC","readme":"通用布局组件\n\n---\n\n## 全局 layout\n\n配合 umi 约定式路由 全局 layout 使用\n\n需要禁用 antd pro 默认的 layout 与 menu 方案(删除 app.tsx 的 const layout 定义, config/config.ts 中的 layout, defaultSettings.ts 中的 menu)\n\n在 config 下新建 layout 文件夹 新增 menu.ts 和 redirect.js\n\nmenu.ts 返回一个函数, 其返回值为一个数组类型的 promise, 即远程菜单数据\n\nredirect.js 直接 `export default {'/': '/pageA'} `对象内部为跳转映射\n\n```javascript\n// src/layouts/index.tsx\nimport React, { ReactElement } from 'react';\nimport { Layout } from '@ncompass/nc-access';\nimport { DynamicRouteLayout } from '@ncompass/nc-layout';\nimport RightContent from '@/components/RightContent';\n\nexport default (props: Record<string, any>): ReactElement => {\n  return (\n    <DynamicRouteLayout {...props} rightContentRender={RightContent}>\n      <Layout {...props} />\n    </DynamicRouteLayout>\n  );\n};\n```\n\n### menu.ts\n\nconfig/layout/menu.ts 中配置的 route 可以接受所有 antd pro 的菜单选项 同时接受以下自定义选项\n\n| 名称     | 类型    | 说明                                                                       |\n| -------- | ------- | -------------------------------------------------------------------------- |\n| disable  | boolean | 此菜单项是否禁用                                                           |\n| collapse | boolean | 是否在当前一级菜单页显示二级菜单 collapse 按钮, 此配置只有在一级菜单时生效 |\n\n### props\n\n可以接受所有 antd pro 的 basicLayout 的参数\n\n自定义参数：\n\n| 名称 | 类型 | 说明 |\n| --- | --- | --- |\n| accordion | boolean | 菜单手风琴模式, 同级菜单只能展开一个 |\n| wrapper | boolean | 全局配置所有页面均不渲染内容页 wrapper |\n| events | {onContextMenu: () => void, onClick: () => void} | 菜单自定义事件 |\n| extraMenuHeaderAfterCollapseBtn | \bRecord<string, React.ReactElement> | \b 可以单独为某一一级菜单页定制二级菜单 header, 会渲染在’全部‘的右边, 如果显示 collapse 按钮, 则会显示在 collapse 按钮左侧 |\n\n### nc-layout 提供了一个 DynamicRouteLayoutContext\n\n可以在具体页面使用 React.useContext 引用\n\n此 context 可以接收如下返回值\n\n```javascript\nimport { DynamicRouteLayoutContext } from '@ncompass/nc-layout';\nconst {\n  actionRef, //actionRef.current.reload()  layout整体刷新\n  containerRef, //containerRef.current  右侧内容容器  .ncLayoutComponentWrapper>.mainLayouts ref指向\n  headerRef, //容器内部header指向\n  footerRef, //容器内部footer指向\n  menuLoaded, //菜单远程数据加载完毕触发变化\n  menu, //菜单内容数组\n} = React.useContext(DynamicRouteLayoutContext);\n```\n\n### 针对特定需求 nc-layout 暂接受 2 种页面返回值\n\n```javascript\n//src/pages/demo.tsx\nimport React, { useState } from 'react';\n\nconst Page = (): React.ReactElement => {\n    ...\n}\n\nPage.contonly = true // 不渲染菜单与layout header, 只渲染内容区域\nPage.noWrapper = true // 不额外渲染\b容器区域全局wrapper: .ncLayoutComponentWrapper和.mainLayouts\n\nexport default Page\n```\n\n### 在具体页面为内容布局时, nc-layout 提供 3 种辅助布局工具\n\n```javascript\n//src/pages/demo.tsx\nimport React, { useState } from 'react';\nimport { ContentHeader, ContentFooter, ContentMask } from '@ncompass/nc-layout';\n\nexport default (): React.ReactElement => {\n  const [loading, setLoading] = useState(false); //控制遮罩层是否显示\n\n  return (\n    <div className=\"myPageContainer\">\n      <ContentHeader>demo page header</ContentHeader>\n      <ContentFooter>demo page footer</ContentFooter>\n      <ContentMask loading={loading} />\n      demo page content text\n    </div>\n  );\n};\n```\n\n其中 ContentHeader 为标准页头样式\n\nContentFooter 可以传入自定义 style\n\n两者内部皆使用 flex 布局\n\n效果如下： ![nclayout]\n\n## NC-Grid\n\n使用 display: grid;作为布局方式的布局组件 \b 可以比较灵活的生成符合开发规范的布局容器\n\n```javascript\n    import React from 'react';\n    import { NCGrid } from '@ncompass/nc-layout';\n\n    const { NCSection } = NCGrid\n\n    ...\n\n    <NCGrid>\n        <NCSection width=\"55%\" title={<button>xxx</button>}>\n            <div style={{width: 1780}}>213</div>\n        </NCSection>\n        <NCGrid direction=\"column\">\n            <NCSection/>\n            <NCGrid height={500}>\n                <NCSection title=\"zzx\">\n                    <div style={{height: 780}}>213</div>\n                </NCSection>\n                <NCSection/>\n            </NCGrid>\n        </NCGrid>\n        <NCSection width={112}/>\n    </NCGrid>\n```\n\n展示效果如下图：\n\n![ncgrid]","readmeFilename":"README.md"}