feat: add trbl, default:0

.babelrc

@@ -7,7 +7,7 @@
     ], "@babel/react"],
   "plugins": [
     [ "@babel/plugin-proposal-decorators", { "legacy": true } ],
-    [ "@babel/plugin-proposal-class-properties", { "loose": true } ],
+    [ "@babel/plugin-proposal-class-properties", { "loose": false } ],
     "@babel/plugin-proposal-optional-chaining",
     "@babel/plugin-transform-parameters"
   ]

package.json

@@ -87,4 +87,4 @@
     "access": "public",
     "registry": "https://registry.npmjs.org"
   }
-}
+}

public/index.js

@@ -10,7 +10,7 @@ class App extends React.Component {
       <ReactDemokit
         className="p-3 app-container"
         url="https://github.com/afeiship/react-absolute-rect">
-        <ReactAbsoluteRect>
+        <ReactAbsoluteRect trbl={20}>
           <h1>ReactAbsoluteRect</h1>
           <p>
             <img src="http://himg.bdimg.com/sys/portrait/item/be10475f686d6c73db00.jpg" />

src/components/index.js

@@ -1,9 +1,11 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import objectAssign from 'object-assign';
 
 const CLASS_NAME = 'react-absolute-rect';
+const val = (value, defaults) => {
+  return typeof value === 'undefined' ? defaults : value;
+};
 
 export default class ReactAbsoluteRect extends Component {
   static displayName = CLASS_NAME;
@@ -29,32 +31,36 @@ export default class ReactAbsoluteRect extends Component {
      * Css style.left(number).
      */
     left: PropTypes.number,
+    /**
+     * Css style for top, right, bottom, left.
+     */
+    trbl: PropTypes.number,
     /**
      * If open css-behavior smooth.
      */
     smooth: PropTypes.bool
   };
 
   static defaultProps = {
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0,
+    trbl: 0,
     smooth: false
   };
 
+  get trblStyle() {
+    const { top, right, bottom, left, trbl } = this.props;
+
+    return {
+      top: val(top, trbl),
+      right: val(right, trbl),
+      bottom: val(bottom, trbl),
+      left: val(left, trbl)
+    };
+  }
+
   render() {
-    const {
-      className,
-      top,
-      right,
-      bottom,
-      left,
-      style,
-      smooth,
-      ...props
-    } = this.props;
-    const _style = objectAssign({ top, right, bottom, left }, style);
+    const { className, top, right, bottom, left, style, smooth, ...props } =
+      this.props;
+    const _style = { ...this.trblStyle, ...style };
 
     return (
       <section