✨ feat: 新增 horizontal props

arvinxx · Feb 2, 2022 · 1f38438 · 1f38438
1 parent 9f68cb8
commit 1f38438
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 7 deletions.
diff --git a/packages/layout-kit/package.json b/packages/layout-kit/package.json
@@ -13,8 +13,8 @@
     "registry": "https://registry.npmjs.org",
     "access": "public"
   },
-  "peerDependencies": {
-    "styled-components": ">5"
+  "dependencies": {
+    "styled-components": "^5.3.3"
   },
   "devDependencies": {
     "styled-components": "^5.3.3",

diff --git a/packages/layout-kit/src/index.tsx b/packages/layout-kit/src/index.tsx
@@ -11,6 +11,7 @@ import type {
 export type CommonSpaceNumber = 2 | 4 | 8 | 12 | 16 | 24;
 
 export interface IFlexbox {
+  horizontal?: boolean;
   direction?: FlexDirection;
   distribution?: ContentDistribution;
   align?: ContentPosition;
@@ -28,7 +29,7 @@ export const Flexbox: FC<FlexboxProps> = styled.div.attrs(() => ({
 }))<IFlexbox>`
   display: flex;
   flex-direction: ${(props) => {
-    return getFlexDirection(props.direction);
+    return getFlexDirection(props.direction, props.horizontal);
   }};
   justify-content: ${(props) => props.distribution};
   align-items: ${(props) => props.align};
@@ -40,8 +41,10 @@ export const Flexbox: FC<FlexboxProps> = styled.div.attrs(() => ({
 
   > *:not(:last-child) {
     margin-right: ${(props) =>
-      getFlexDirection(props.direction) === 'row' && calcValue(props.gap)};
+      getFlexDirection(props.direction, props.horizontal) === 'row' &&
+      calcValue(props.gap)};
     margin-bottom: ${(props) =>
-      getFlexDirection(props.direction) === 'column' && calcValue(props.gap)};
+      getFlexDirection(props.direction, props.horizontal) === 'column' &&
+      calcValue(props.gap)};
   }
 `;
diff --git a/packages/layout-kit/src/type.ts b/packages/layout-kit/src/type.ts
@@ -4,7 +4,8 @@ export type ContentPosition =
   | 'flex-end'
   | 'flex-start'
   | 'start'
-  | 'stretch';
+  | 'stretch'
+  | 'baseline';
 
 export type ContentDistribution =
   | 'center'

diff --git a/packages/layout-kit/src/utils.ts b/packages/layout-kit/src/utils.ts
@@ -1,6 +1,11 @@
 import type { FlexDirection } from './type';
 
-export const getFlexDirection = (direction: FlexDirection) => {
+export const getFlexDirection = (
+  direction: FlexDirection,
+  isHorizontal: boolean,
+) => {
+  if (isHorizontal) return 'row';
+
   switch (direction) {
     case 'horizontal':
       return 'row';