From 799db4923bd1b08e40c472fd7b65d50dd90b78d6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E7=8E=AE?= <505805473@qq.com>
Date: Thu, 16 Feb 2023 18:18:39 +0800
Subject: [PATCH] feat:add grid & correct disabled tabs

---
 src/components/Grid/grid/RowContext.tsx |  9 +++++++
 src/components/Grid/grid/_style.scss    | 14 ++++++++++
 src/components/Grid/grid/col.tsx        | 35 +++++++++++++++++++++++++
 src/components/Grid/grid/index.tsx      |  4 +++
 src/components/Grid/grid/row.tsx        | 30 +++++++++++++++++++++
 src/components/Grid/index.tsx           |  1 +
 src/components/Tabs/_style.scss         |  2 +-
 src/styles/index.scss                   |  2 ++
 8 files changed, 96 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Grid/grid/RowContext.tsx
 create mode 100644 src/components/Grid/grid/_style.scss
 create mode 100644 src/components/Grid/grid/col.tsx
 create mode 100644 src/components/Grid/grid/index.tsx
 create mode 100644 src/components/Grid/grid/row.tsx
 create mode 100644 src/components/Grid/index.tsx

diff --git a/src/components/Grid/grid/RowContext.tsx b/src/components/Grid/grid/RowContext.tsx
new file mode 100644
index 0000000..41f4935
--- /dev/null
+++ b/src/components/Grid/grid/RowContext.tsx
@@ -0,0 +1,9 @@
+import { createContext, Context } from 'react'
+
+export interface RowContextState {
+  gutter?: number
+}
+
+export const RowContext: Context<RowContextState> = createContext({})
+
+export default RowContext
diff --git a/src/components/Grid/grid/_style.scss b/src/components/Grid/grid/_style.scss
new file mode 100644
index 0000000..f318ef8
--- /dev/null
+++ b/src/components/Grid/grid/_style.scss
@@ -0,0 +1,14 @@
+$grid-columns: 24;
+
+.row {
+  display: flex;
+}
+
+@for $index from 1 to 24 {
+  .col-#{$index} {
+    flex: 0 0 percentage($number: $index / $grid-columns);
+  }
+}
+.col {
+  box-sizing: border-box;
+}
diff --git a/src/components/Grid/grid/col.tsx b/src/components/Grid/grid/col.tsx
new file mode 100644
index 0000000..c5e8297
--- /dev/null
+++ b/src/components/Grid/grid/col.tsx
@@ -0,0 +1,35 @@
+import React, { useContext, CSSProperties } from 'react'
+import classNames from 'classnames'
+import RowContext from './RowContext'
+import './style.scss'
+
+export interface ColProps extends React.HTMLAttributes<HTMLDivElement> {
+  span: number
+  offset?: number
+}
+
+export function Col(props: ColProps) {
+  const { children, span, offset } = props
+
+  const classObj = {
+    [`col-${span}`]: span !== void 0,
+    [`col-offset-${offset}`]: offset !== void 0,
+  }
+  const classes = classNames('col', classObj)
+
+  const { gutter } = useContext(RowContext)
+  const styleObj: CSSProperties = {}
+  if (gutter && gutter > 0) {
+    const horizontalGutter = gutter / 2
+    styleObj.paddingLeft = horizontalGutter
+    styleObj.paddingRight = horizontalGutter
+  }
+
+  return (
+    <div className={classes} style={{ ...styleObj }}>
+      {children}
+    </div>
+  )
+}
+
+export default Col
diff --git a/src/components/Grid/grid/index.tsx b/src/components/Grid/grid/index.tsx
new file mode 100644
index 0000000..53e2c1c
--- /dev/null
+++ b/src/components/Grid/grid/index.tsx
@@ -0,0 +1,4 @@
+import Row from './row'
+import Col from './col'
+
+export default { Row, Col }
diff --git a/src/components/Grid/grid/row.tsx b/src/components/Grid/grid/row.tsx
new file mode 100644
index 0000000..795f9f9
--- /dev/null
+++ b/src/components/Grid/grid/row.tsx
@@ -0,0 +1,30 @@
+import React from 'react'
+import RowContext from './RowContext'
+import './style.scss'
+
+export interface RowProps extends React.HTMLAttributes<HTMLDivElement> {
+  gutter?: number
+}
+
+export function Row(props: RowProps) {
+  const { gutter = 0, children } = props
+
+  const rowContext = React.useMemo(() => ({ gutter }), [gutter])
+
+  const rowStyle: React.CSSProperties = {}
+
+  if (gutter && gutter > 0) {
+    rowStyle.marginLeft = gutter / -2
+    rowStyle.marginRight = gutter / -2
+  }
+
+  return (
+    <RowContext.Provider value={rowContext}>
+      <div className="row" style={{ ...rowStyle }}>
+        {children}
+      </div>
+    </RowContext.Provider>
+  )
+}
+
+export default Row
diff --git a/src/components/Grid/index.tsx b/src/components/Grid/index.tsx
new file mode 100644
index 0000000..ba54f16
--- /dev/null
+++ b/src/components/Grid/index.tsx
@@ -0,0 +1 @@
+export { default as Grid } from './grid'
diff --git a/src/components/Tabs/_style.scss b/src/components/Tabs/_style.scss
index 8b7625e..2b9f304 100644
--- a/src/components/Tabs/_style.scss
+++ b/src/components/Tabs/_style.scss
@@ -16,7 +16,7 @@
     color: $nav-tabs-link-hover-color;
   }
   // Disabled state lightens text
-  &.--disabled {
+  &.disabled {
     color: $nav-link-disabled-color;
     pointer-events: none;
     cursor: default;
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 235b3e7..94124de 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -63,3 +63,5 @@
 
 // calendar&datepicker
 @import '../components/Calendar/style';
+
+@import '../components/Grid/grid/style';