Merge pull request MarineUI#23 from MarineUI/feat-space

feat: space

src/Space/demo/align.tsx

@@ -0,0 +1,18 @@
+import { MyButton, Space } from 'marine-ui';
+import React from 'react';
+
+export default function index1() {
+  return (
+    <Space>
+      <MyButton color="primary" variant="filled">
+        按钮1
+      </MyButton>
+      <MyButton color="primary" variant="filled">
+        按钮2
+      </MyButton>
+      <MyButton color="primary" variant="filled">
+        按钮3
+      </MyButton>
+    </Space>
+  );
+}

src/Space/demo/basic.tsx

@@ -0,0 +1,18 @@
+import { MyButton, Space } from 'marine-ui';
+import React from 'react';
+
+export default function index1() {
+  return (
+    <Space>
+      <MyButton color="primary" variant="filled">
+        按钮1
+      </MyButton>
+      <MyButton color="primary" variant="filled">
+        按钮2
+      </MyButton>
+      <MyButton color="primary" variant="filled">
+        按钮3
+      </MyButton>
+    </Space>
+  );
+}

src/Space/demo/size.tsx

@@ -0,0 +1,56 @@
+import { MyButton, Space } from 'marine-ui';
+import React from 'react';
+
+export default function index1() {
+  return (
+    <>
+      <Space size="mini">
+        <MyButton color="primary" variant="filled">
+          按钮1
+        </MyButton>
+        <MyButton color="primary" variant="filled">
+          按钮2
+        </MyButton>
+        <MyButton color="primary" variant="filled">
+          按钮3
+        </MyButton>
+      </Space>
+      <br></br>
+      <Space size="small">
+        <MyButton color="primary" variant="filled">
+          按钮1
+        </MyButton>
+        <MyButton color="primary" variant="filled">
+          按钮2
+        </MyButton>
+        <MyButton color="primary" variant="filled">
+          按钮3
+        </MyButton>
+      </Space>
+      <br></br>
+      <Space size="medium">
+        <MyButton color="primary" variant="filled">
+          按钮1
+        </MyButton>
+        <MyButton color="primary" variant="filled">
+          按钮2
+        </MyButton>
+        <MyButton color="primary" variant="filled">
+          按钮3
+        </MyButton>
+      </Space>
+      <br></br>
+      <Space size="large">
+        <MyButton color="primary" variant="filled">
+          按钮1
+        </MyButton>
+        <MyButton color="primary" variant="filled">
+          按钮2
+        </MyButton>
+        <MyButton color="primary" variant="filled">
+          按钮3
+        </MyButton>
+      </Space>
+    </>
+  );
+}

src/Space/demo/vertical.tsx

@@ -0,0 +1,18 @@
+import { MyButton, Space } from 'marine-ui';
+import React from 'react';
+
+export default function index1() {
+  return (
+    <Space direction="vertical">
+      <MyButton color="primary" variant="filled">
+        按钮1
+      </MyButton>
+      <MyButton color="primary" variant="filled">
+        按钮2
+      </MyButton>
+      <MyButton color="primary" variant="filled">
+        按钮3
+      </MyButton>
+    </Space>
+  );
+}

src/Space/index.md

@@ -0,0 +1,15 @@
+## 基本用法
+
+<code src="./demo/basic.tsx"></code>
+
+## 换个方向
+
+<code src="./demo/vertical.tsx"></code>
+
+## 换间距
+
+<code src="./demo/size.tsx"></code>
+
+## 改变对齐方式
+
+<code src="./demo/align.tsx"></code>

src/Space/index.tsx

@@ -0,0 +1,100 @@
+import React, { Children, Fragment, ReactNode } from 'react';
+import GlobalStyle from '../GlobalStyle';
+import tokens from '../theme/tokens';
+import { directionType, sizeType, SpaceProps } from './interface';
+import { SpaceStyle } from './style';
+
+const getMargin = (size: sizeType) => {
+  if (typeof size === 'number' || size === undefined) {
+    return size;
+  }
+  return tokens.space[size];
+};
+
+function getMarginWithSize(
+  direction: directionType,
+  size: sizeType,
+  isLast: boolean
+) {
+  if (!isLast) {
+    switch (direction) {
+      case 'horizontal':
+        return { marginRight: `${getMargin(size)}px` };
+      case 'vertical':
+        return { marginBottom: `${getMargin(size)}px` };
+      default:
+        return { marginRight: `${getMargin(size)}px` };
+    }
+  }
+  return {};
+}
+
+function getMarginWithSizeArr(
+  sizeArr: sizeType[],
+  direction: directionType,
+  isLast: boolean,
+  wrap: boolean
+) {
+  const marginRight = sizeArr[0];
+  const marginBottom = sizeArr[1];
+
+  if (wrap) {
+    return {
+      marginRight,
+      marginBottom,
+    };
+  }
+
+  if (!isLast) {
+    switch (direction) {
+      case 'horizontal':
+        return { marginRight: `${marginRight}px` };
+      case 'vertical':
+        return { marginBottom: `${marginBottom}px` };
+      default:
+        return { marginRight: `${marginRight}px` };
+    }
+  }
+
+  return {};
+}
+
+const Space = (props: SpaceProps) => {
+  const {
+    children,
+    direction = 'horizontal',
+    size = 'small',
+    wrap = true,
+  } = props;
+  const childrenList = Children.toArray(children);
+
+  const getMarginStyle = (index: number) => {
+    const isLastOne = childrenList.length - 1 === index;
+    if (!Array.isArray(size)) {
+      return getMarginWithSize(direction, size, isLastOne);
+    } else {
+      return getMarginWithSizeArr(size, direction, isLastOne, wrap);
+    }
+  };
+
+  return (
+    <>
+      <GlobalStyle />
+      <SpaceStyle props={props}>
+        <div className="container">
+          {childrenList.map((child: ReactNode, index: number) => {
+            return (
+              <Fragment key={index}>
+                <div className="marine-space" style={getMarginStyle(index)}>
+                  {child}
+                </div>
+              </Fragment>
+            );
+          })}
+        </div>
+      </SpaceStyle>
+    </>
+  );
+};
+
+export default Space;

src/Space/interface.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+
+export type sizeType = 'mini' | 'small' | 'medium' | 'large' | undefined;
+export type alignType = 'start' | 'center' | 'end' | 'baseline' | undefined;
+export type directionType = 'horizontal' | 'vertical' | undefined;
+export interface SpaceProps extends React.HTMLAttributes<HTMLDivElement> {
+  direction?: directionType;
+  size?: sizeType | sizeType[];
+  align?: alignType;
+  wrap?: boolean;
+}

src/Space/style.ts

@@ -0,0 +1,42 @@
+import styled from 'styled-components';
+import { alignType, directionType, SpaceProps } from './interface';
+
+function getAlign(align: alignType) {
+  switch (align) {
+    case 'start':
+      return 'flex-start';
+    case 'center':
+      return 'center';
+    case 'end':
+      return 'flex-end';
+    case 'baseline':
+      return 'baseline';
+    default:
+      return 'flex-start';
+  }
+}
+
+function getDirection(direction: directionType) {
+  switch (direction) {
+    case 'horizontal':
+      return 'row';
+    case 'vertical':
+      return 'column';
+    default:
+      return 'row';
+  }
+}
+
+export const SpaceStyle = styled.div<{ props: SpaceProps }>`
+  .container {
+    display: flex;
+    align-items: ${({ props }) => getAlign(props.align)};
+    flex-direction: ${({ props }) => getDirection(props.direction)};
+  }
+
+  .marine-space {
+    flex-wrap: wrap;
+
+    display: inline-block;
+  }
+`;

src/index.ts

@@ -1 +1,2 @@
 export { default as MyButton } from './Button';
+export { default as Space } from './Space';

src/theme/tokens.ts

@@ -134,4 +134,10 @@ export default {
     disabledContainer: 0.12,
     disabledContent: 0.38,
   },
+  space: {
+    mini: 4,
+    small: 8,
+    medium: 16,
+    large: 32,
+  },
 };