init project.

uiwjs · Jan 17, 2022 · 0f224c5 · 0f224c5
1 parent 4379792
commit 0f224c5
Show file tree

Hide file tree

Showing 32 changed files with 2,227 additions and 141 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,11 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 120,
+  "overrides": [
+    {
+      "files": ".prettierrc",
+      "options": { "parser": "json" }
+    }
+  ]
+}
diff --git a/core/README-zh.md b/core/README-zh.md
@@ -0,0 +1,101 @@
+Layout 布局
+===
+
+协助进行页面级整体布局。
+
+> ⚠️ 注意：采用 flex 布局实现，请注意[浏览器兼容性](http://caniuse.com/#search=flex)问题。
+<!--rehype:style=border-left: 8px solid #ffe564;background-color: #ffe56440;padding: 12px 16px;-->
+
+<!--rehype-->
+```jsx
+import { Layout } from 'uiw';
+// or
+import Layout from '@uiw/react-layout';
+const { Header, Footer, Sider, Content } = Layout;
+```
+
+## 基本用法
+
+<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
+```jsx
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Layout } from '@uiw/react-layout';
+const { Header, Footer, Sider, Content } = Layout;
+
+const stylHeader = { color: '#fff' }
+const stylSider = { background: '#484a4e', color: '#fff', lineHeight: `120px`, textAlign: 'center' }
+const stylConten = { textAlign: 'center', background: 'rgba(16, 142, 233, 1)', minHeight: 120, lineHeight: '120px', color: '#fff' }
+
+function Demo() {
+  const [collapsed, setCollapsed] = React.useState(false)
+  return (
+    <div>
+      <Layout style={{ marginBottom: 20 }}>
+        <Sider collapsed={collapsed} style={stylSider}>Sider</Sider>
+        <Layout>
+          <Header style={stylHeader}>
+            <button onClick={() => setCollapsed(!collapsed)}>{collapsed ? '展开 Sider' : '缩进 Sider'}</button>
+          </Header>
+          <Content style={stylConten}>Content</Content>
+          <Footer>Footer</Footer>
+        </Layout>
+      </Layout>
+
+      <Layout style={{ marginBottom: 20 }}>
+        <Header style={stylHeader}>Header</Header>
+        <Content style={stylConten}>Content</Content>
+        <Footer>Footer</Footer>
+      </Layout>
+
+      <Layout style={{ marginBottom: 20 }}>
+        <Header style={stylHeader}>Header</Header>
+        <Layout>
+          <Sider style={stylSider}>Sider</Sider>
+          <Content style={stylConten}>Content</Content>
+        </Layout>
+        <Footer>Footer</Footer>
+      </Layout>
+
+      <Layout style={{ marginBottom: 20 }}>
+        <Header style={stylHeader}>Header</Header>
+        <Layout>
+          <Content style={stylConten}>Content</Content>
+          <Sider style={stylSider}>Sider</Sider>
+        </Layout>
+        <Footer>Footer</Footer>
+      </Layout>
+    </div>
+  );
+}
+
+ReactDOM.render(<Demo />, _mount_);
+```
+
+
+## Layout
+
+布局容器，其下可嵌套 `Header` `Sider` `Content` `Footer` 或 `Layout` 本身，可以放在任何父容器中。
+
+* `Header`：顶部布局，自带默认样式，其下可嵌套任何元素，只能放在 `Layout` 中。
+* `Sider`：侧边栏，自带默认样式及基本功能，其下可嵌套任何元素，只能放在 `Layout` 中。
+* `Content`：内容部分，自带默认样式，其下可嵌套任何元素，只能放在 `Layout` 中。
+* `Footer`：底部布局，自带默认样式，其下可嵌套任何元素，只能放在 `Layout` 中。
+
+| 参数 | 说明 | 类型 | 默认值 |
+|--------- |-------- |--------- |-------- |
+| className | 容器 className | string | - |
+| style | 指定样式 | CSSProperties | - |
+| theme | 主题颜色 | `light`、`dark` | `dark` |
+| hasSider | 表示子元素里有 Sider，一般不用指定。可用于服务端渲染时避免样式闪动 | boolean | - |
+
+## Layout.Sider
+
+| 参数 | 说明 | 类型 | 默认值 |
+|--------- |-------- |--------- |-------- |
+| className | 容器 className | string | - |
+| style | 指定样式 | CSSProperties | - |
+| collapsed | 当前收起状态 | boolean | - |
+| collapsedWidth | 收缩宽度，设置为 `0` | boolean | `80` |
+| width | 宽度 | number/string | 200 |
+
diff --git a/core/README.md b/core/README.md
@@ -1,66 +1,100 @@
-react-monorepo-template
+Layout
 ===
 
-Simple [React](https://github.com/facebook/react) package development project example template.
-
-## Directory Structure
-
-```bash
-├── LICENSE
-├── README.md -> core/README.md
-├── core              # 📦 package @uiw/react-monorepo-template
-│   ├── README.md
-│   ├── cjs           # 🔄 Compiled cjs directory
-│   ├── esm           # 🔄 Compiled esm directory
-│   ├── src           # Package source directory
-│   ├── dist.css      # 🔄 compile less to css
-│   ├── package.json  # name => @uiw/react-monorepo-template
-│   └── tsconfig.json
-├── lerna.json
-├── package.json
-├── tsconfig.json
-├── test              # ⛑ test case
-└── website           # 🐝 Package example test, website
-    ├── README.md
-    ├── package.json
-    ├── public
-    ├── src
-    └── tsconfig.json
-```
-
-## Development
+Handling the overall layout of a page.
 
-1. Install
+> ⚠️ Note: Implemented with flex layout, please pay attention to [browser compatibility](http://caniuse.com/#search=flex) issues.
+<!--rehype:style=border-left: 8px solid #ffe564;background-color: #ffe56440;padding: 12px 16px;-->
 
-```bash
-npm install
+<!--rehype-->
+```jsx
+import { Layout } from 'uiw';
+// or
+import Layout from '@uiw/react-layout';
+const { Header, Footer, Sider, Content } = Layout;
 ```
 
-2. Dependencies in the installation package and example
-
-```bash
-npm run hoist
+## Basic Usage
+
+<!--rehype:bgWhite=true&codeSandbox=true&codePen=true&noScroll=true-->
+```jsx
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Layout } from '@uiw/react-layout';
+const { Header, Footer, Sider, Content } = Layout;
+
+const stylHeader = { color: '#fff' }
+const stylSider = { background: '#484a4e', color: '#fff', lineHeight: `120px`, textAlign: 'center' }
+const stylConten = { textAlign: 'center', background: 'rgba(16, 142, 233, 1)', minHeight: 120, lineHeight: '120px', color: '#fff' }
+
+function Demo() {
+  const [collapsed, setCollapsed] = React.useState(false)
+  return (
+    <div>
+      <Layout style={{ marginBottom: 20 }}>
+        <Sider collapsed={collapsed} style={stylSider}>Sider</Sider>
+        <Layout>
+          <Header style={stylHeader}>
+            <button onClick={() => setCollapsed(!collapsed)}>{collapsed ? '>>' : '<<'}</button>
+          </Header>
+          <Content style={stylConten}>Content</Content>
+          <Footer>Footer</Footer>
+        </Layout>
+      </Layout>
+
+      <Layout style={{ marginBottom: 20 }}>
+        <Header style={stylHeader}>Header</Header>
+        <Content style={stylConten}>Content</Content>
+        <Footer>Footer</Footer>
+      </Layout>
+
+      <Layout style={{ marginBottom: 20 }}>
+        <Header style={stylHeader}>Header</Header>
+        <Layout>
+          <Sider style={stylSider}>Sider</Sider>
+          <Content style={stylConten}>Content</Content>
+        </Layout>
+        <Footer>Footer</Footer>
+      </Layout>
+
+      <Layout>
+        <Header style={stylHeader}>Header</Header>
+        <Layout>
+          <Content style={stylConten}>Content</Content>
+          <Sider style={stylSider}>Sider</Sider>
+        </Layout>
+        <Footer>Footer</Footer>
+      </Layout>
+    </div>
+  );
+}
+
+ReactDOM.render(<Demo />, _mount_);
 ```
 
-3. To develop, run the self-reloading build:
-
-```bash
-npm run build  # Compile packages      📦 @uiw/react-monorepo-template
-npm run watch  # Real-time compilation 📦 @uiw/react-monorepo-template
-```
+## Layout
 
-4. Run Document Website Environment:
+布局容器，其下可嵌套 `Header` `Sider` `Content` `Footer` 或 `Layout` 本身，可以放在任何父容器中。
 
-```bash
-npm run start
-```
+* `Header`：顶部布局，自带默认样式，其下可嵌套任何元素，只能放在 `Layout` 中。
+* `Sider`：侧边栏，自带默认样式及基本功能，其下可嵌套任何元素，只能放在 `Layout` 中。
+* `Content`：内容部分，自带默认样式，其下可嵌套任何元素，只能放在 `Layout` 中。
+* `Footer`：底部布局，自带默认样式，其下可嵌套任何元素，只能放在 `Layout` 中。
 
-5. To contribute, please fork repos, add your patch and tests for it (in the `test/` folder) and submit a pull request.
+| 参数 | 说明 | 类型 | 默认值 |
+|--------- |-------- |--------- |-------- |
+| className | 容器 className | string | - |
+| style | 指定样式 | CSSProperties | - |
+| theme | 主题颜色 | `light`、`dark` | `dark` |
+| hasSider | 表示子元素里有 Sider，一般不用指定。可用于服务端渲染时避免样式闪动 | boolean | - |
 
-```
-npm run test
-```
+## Layout.Sider
 
-## License
+| 参数 | 说明 | 类型 | 默认值 |
+|--------- |-------- |--------- |-------- |
+| className | 容器 className | string | - |
+| style | 指定样式 | CSSProperties | - |
+| collapsed | 当前收起状态 | boolean | - |
+| collapsedWidth | 收缩宽度，设置为 `0` | boolean | `80` |
+| width | 宽度 | number/string | 200 |
 
-Licensed under the MIT License.
diff --git a/core/package.json b/core/package.json
@@ -1,12 +1,12 @@
 {
-  "name": "@uiw/react-monorepo-template",
-  "version": "1.0.0",
-  "description": "React Monorepo Template.",
+  "name": "@uiw/react-layout",
+  "version": "4.9.9",
+  "description": "React layout component.",
   "author": "Kenny Wong <wowohoo@qq.com>",
-  "homepage": "https://uiwjs.github.io/react-monorepo-template",
+  "homepage": "https://uiwjs.github.io/react-layout",
   "repository": {
     "type": "git",
-    "url": "https://github.com/uiwjs/react-monorepo-template.git"
+    "url": "https://github.com/uiwjs/react-layout.git"
   },
   "license": "MIT",
   "main": "./cjs/index.js",
@@ -21,22 +21,23 @@
     "access": "public"
   },
   "keywords": [
-    "react-monorepo-template",
-    "react.js",
-    "react",
-    "template",
-    "monorepo",
-    "monorepo-template",
+    "layout",
+    "react-layout",
+    "design",
     "uiw",
     "uiw-react",
+    "react.js",
+    "react",
     "react-component",
     "component",
     "components",
     "ui",
     "css",
     "uikit",
     "react-ui",
-    "framework"
+    "framework",
+    "front-end",
+    "frontend"
   ],
   "peerDependencies": {
     "react": ">=16.9.0",

diff --git a/core/src/Content.tsx b/core/src/Content.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+export interface ContentProps extends React.HTMLAttributes<HTMLElement> {
+  prefixCls?: string;
+  children?: React.ReactNode;
+}
+
+export default (props: ContentProps = {}) => {
+  const { prefixCls = 'w-layout-content', className, children, ...other } = props;
+  return (
+    <main className={[prefixCls, className].filter(Boolean).join(' ').trim()} {...other}>
+      {children}
+    </main>
+  );
+};
diff --git a/core/src/Footer.tsx b/core/src/Footer.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+export interface FooterProps extends React.HTMLAttributes<HTMLElement> {
+  prefixCls?: string;
+  children?: React.ReactNode;
+}
+
+export default (props: FooterProps = {}) => {
+  const { prefixCls = 'w-layout-footer', className, children, ...other } = props;
+  return (
+    <footer className={[prefixCls, className].filter(Boolean).join(' ').trim()} {...other}>
+      {children}
+    </footer>
+  );
+};
diff --git a/core/src/Header.tsx b/core/src/Header.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+export interface HeaderProps extends React.HTMLAttributes<HTMLElement> {
+  prefixCls?: string;
+  children?: React.ReactNode;
+}
+
+export default (props: HeaderProps = {}) => {
+  const { prefixCls = 'w-layout-header', className, children, ...other } = props;
+  return (
+    <header className={[prefixCls, className].filter(Boolean).join(' ').trim()} {...other}>
+      {children}
+    </header>
+  );
+};