@fe-free/core 2.1.5 → 2.1.6

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @fe-free/core
 
+## 2.1.6
+
+### Patch Changes
+
+- feat: page layout
+  - @fe-free/tool@2.1.6
+
 ## 2.1.5
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fe-free/core",
-  "version": "2.1.5",
+  "version": "2.1.6",
   "description": "",
   "main": "./src/index.ts",
   "author": "",
@@ -39,7 +39,7 @@
     "remark-gfm": "^4.0.1",
     "vanilla-jsoneditor": "^0.23.1",
     "zustand": "^4.5.4",
-    "@fe-free/tool": "2.1.5"
+    "@fe-free/tool": "2.1.6"
   },
   "peerDependencies": {
     "@ant-design/pro-components": "^2.8.7",

package/src/index.ts

@@ -27,6 +27,7 @@ export {
   proFormSelectSearchProps,
 } from './form';
 export { Markdown } from './markdown';
+export { PageLayout } from './page_layout';
 export { Table } from './table';
 export type { TableProps } from './table';
 export { useLocalforageState } from './use_localforage_state';

package/src/page_layout/index.tsx

@@ -0,0 +1,36 @@
+import cn from 'classnames';
+
+interface PageLayoutProps {
+  direction?: 'horizontal' | 'vertical';
+  start?: React.ReactNode;
+  children?: React.ReactNode;
+  end?: React.ReactNode;
+  className?: string;
+}
+
+function PageLayout({
+  direction = 'horizontal',
+  start,
+  children,
+  end,
+  className,
+}: PageLayoutProps) {
+  return (
+    <div
+      className={cn(
+        'flex w-full h-full',
+        {
+          'flex-row': direction === 'horizontal',
+          'flex-col': direction === 'vertical',
+        },
+        className,
+      )}
+    >
+      <div className="flex-none">{start}</div>
+      <div className="flex-1 overflow-auto">{children}</div>
+      <div className="flex-none">{end}</div>
+    </div>
+  );
+}
+
+export { PageLayout };