feat(Box): add propTypes

alibaba-fusion · Jan 5, 2024 · bb1fefb · bb1fefb
1 parent 3c60de7
commit bb1fefb
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 1 deletion.
diff --git a/components/box/index.tsx b/components/box/index.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react';
 import * as cx from 'classnames';
+import * as PropTypes from 'prop-types';
 import ConfigProvider from '../config-provider';
+import { obj } from '../util';
 import { BoxProps } from './types';
 import createStyle, {
     getMargin,
@@ -11,6 +13,8 @@ import createStyle, {
     filterOuterStyle,
 } from '../responsive-grid/create-style';
 
+const { pickOthers } = obj;
+
 type ChildElement = React.ReactElement<
     BoxProps,
     (string | React.JSXElementConstructor<BoxProps>) & { _typeMark: string }
@@ -104,6 +108,58 @@ const getInnerStyle: typeof getStyle = (style, styleProps) => {
  * Box
  */
 class Box extends React.Component<BoxProps> {
+    static propTypes = {
+        prefix: PropTypes.string,
+        style: PropTypes.object,
+        className: PropTypes.any,
+        /**
+         * 布局属性
+         */
+        flex: PropTypes.oneOfType([
+            PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
+            PropTypes.number,
+        ]),
+        /**
+         * 布局方向，默认为 column ，一个元素占据一整行
+         * @defaultValue column
+         */
+        direction: PropTypes.oneOf(['row', 'column', 'row-reverse']),
+        /**
+         * 是否折行 支持IE11+
+         */
+        wrap: PropTypes.bool,
+        /**
+         * 元素之间的间距 [bottom&top, right&left]
+         */
+        spacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]),
+        /**
+         * 设置 margin [bottom&top, right&left]
+         */
+        margin: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]),
+        /**
+         * 设置 padding [bottom&top, right&left]
+         */
+        padding: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]),
+        /**
+         * 沿着主轴方向，子元素们的排布关系 （兼容性同 justify-content ）
+         */
+        justify: PropTypes.oneOf([
+            'flex-start',
+            'center',
+            'flex-end',
+            'space-between',
+            'space-around',
+        ]),
+        /**
+         * 垂直主轴方向，子元素们的排布关系 （兼容性同 align-items ）
+         */
+        align: PropTypes.oneOf(['flex-start', 'center', 'flex-end', 'baseline', 'stretch']),
+        device: PropTypes.oneOf(['phone', 'tablet', 'desktop']),
+        /**
+         * 定制标签名， 例如section等
+         */
+        component: PropTypes.string,
+    };
     static defaultProps = {
         prefix: 'next-',
         direction: 'column',
@@ -127,7 +183,6 @@ class Box extends React.Component<BoxProps> {
             children,
             device,
             component,
-            ...others
         } = this.props;
 
         const styleProps: BoxProps = {
@@ -141,6 +196,7 @@ class Box extends React.Component<BoxProps> {
             margin,
         };
         const View = component as React.ElementType;
+        const others = pickOthers(Object.keys(Box.propTypes), this.props);
         const styleSheet = getStyle(style, styleProps);
 
         const boxs = createChildren(children, {

diff --git a/components/box/types.ts b/components/box/types.ts
@@ -1,6 +1,10 @@
 import * as React from 'react';
 import { CommonProps } from '../util';
 
+/**
+ * Box
+ * @api
+ */
 export interface BoxProps extends React.HTMLAttributes<HTMLElement>, CommonProps {
     /**
      * 布局属性