feat: add utils export and add some utils

Author: fupengl

jest.config.js

@@ -9,9 +9,4 @@ module.exports = {
   coverageDirectory: './coverage',
   testTimeout: 30000,
   testEnvironment: 'jsdom',
-  globals: {
-    'ts-jest': {
-      tsConfig: 'tsconfig.test.json',
-    },
-  },
 };

package.json

@@ -69,14 +69,16 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.12.5",
-    "@planjs/utils": "^1.11.7",
+    "@planjs/utils": "^1.13.0",
+    "@types/hoist-non-react-statics": "^3.3.1",
     "fast-deep-equal": "^3.1.3",
+    "hoist-non-react-statics": "^3.3.2",
     "resize-observer-polyfill": "^1.5.1"
   },
   "devDependencies": {
     "@commitlint/cli": "^9.1.2",
     "@commitlint/config-conventional": "^11.0.0",
-    "@planjs/fabric": "^0.0.76",
+    "@planjs/fabric": "^0.0.90",
     "@testing-library/react": "^12.0.0",
     "@testing-library/react-hooks": "^7.0.1",
     "@types/jest": "^26.0.24",
@@ -88,7 +90,7 @@
     "lint-staged": "^10.2.13",
     "react": "16.14.0",
     "react-dom": "16.14.0",
-    "stan-builder": "^0.11.3",
+    "stan-builder": "^0.13.3",
     "standard-version": "^9.0.0",
     "ts-jest": "^27.0.3",
     "typescript": "4.1.5"

src/components/if/index.tsx

@@ -3,17 +3,17 @@ import { isFunction } from '@planjs/utils';
 
 export type IfProps = {
   condition?: (() => boolean) | boolean;
-  render?: () => React.ReactNode | undefined;
+  render?: () => React.ReactNode | undefined | null;
 };
 
 const If: React.FC<IfProps> = (props) => {
   let condition = !!props.condition;
   if (props.condition && isFunction(props.condition)) {
     condition = props.condition();
   }
-  return (
-    condition ? (props.render ? props.render() : props.children) : null
-  ) as React.ReactElement;
+  return condition
+    ? ((props.render ? props.render() : props.children) as React.ReactElement)
+    : null;
 };
 
 export default If;

src/decorators/index.ts

@@ -0,0 +1 @@
+export { default as withSafeSetState } from './withSafeSetState';

src/decorators/withSafeSetState.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import hoistNonReactStatic from '../utils/hoistNonReactStatic';
+
+function withSafeSetState() {
+  return function enhanceWithSafeSetState<T extends typeof React.Component>(WrappedComponent: T) {
+    let isMounted = false;
+    const { componentDidMount, componentWillUnmount, setState } = WrappedComponent.prototype;
+
+    WrappedComponent.prototype.componentDidMount = function () {
+      isMounted = true;
+      if (componentDidMount) {
+        // @ts-ignore
+        // eslint-disable-next-line prefer-rest-params
+        componentDidMount.apply(this, arguments);
+      }
+    };
+
+    WrappedComponent.prototype.componentWillUnmount = function () {
+      isMounted = false;
+      if (componentWillUnmount) {
+        // @ts-ignore
+        // eslint-disable-next-line prefer-rest-params
+        componentWillUnmount.apply(this, arguments);
+      }
+    };
+
+    WrappedComponent.prototype.setState = function () {
+      if (isMounted && setState) {
+        // @ts-ignore
+        // eslint-disable-next-line prefer-rest-params
+        setState.apply(this, arguments);
+      }
+    };
+
+    const WithSafeSetState = (props: any) => {
+      return <WrappedComponent {...props} />;
+    };
+
+    return hoistNonReactStatic(WithSafeSetState, WrappedComponent);
+  };
+}
+
+export default withSafeSetState;

src/index.ts

@@ -1,2 +1,4 @@
 export * from './components';
+export * from './decorators';
 export * from './hooks';
+export * from './utils';

src/utils/hoistNonReactStatic.ts

@@ -0,0 +1,3 @@
+import hoistNonReactStatic from 'hoist-non-react-statics';
+
+export default hoistNonReactStatic;

src/utils/index.ts

@@ -0,0 +1,6 @@
+export { default as getActionState } from './getActionState';
+export { default as hoistNonReactStatic } from './hoistNonReactStatic';
+export { default as isClassComponent } from './isClassComponent';
+export { default as isDeepEqual } from './isDeepEqual';
+export { default as isReactKey } from './isReactKey';
+export { default as renderChildren } from './renderChildren';

src/utils/isReactKey.ts

@@ -1,6 +1,10 @@
 import React from 'react';
 import { isNumber, isString } from '@planjs/utils';
 
+/**
+ * check is react valid key
+ * @param key
+ */
 function isReactKey(key: any): key is React.Key {
   return isString(key) || isNumber(key);
 }

src/utils/merge.ts

@@ -3,18 +3,20 @@ import { isArray, isPlanObject, isSet, isMap } from '@planjs/utils';
 function merge<T>(a: any, b: any): T {
   if (isArray(a) && isArray(b)) {
     return [...a, ...b] as unknown as T;
-  } else if (isPlanObject(a) && isPlanObject(b)) {
+  }
+  if (isPlanObject(a) && isPlanObject(b)) {
     return {
       ...a,
       ...b,
     } as T;
-  } else if (isMap(a) && isMap(b)) {
+  }
+  if (isMap(a) && isMap(b)) {
     return new Map([...a, ...b]) as unknown as T;
-  } else if (isSet(a) && isSet(b)) {
+  }
+  if (isSet(a) && isSet(b)) {
     return new Set([...a, ...b]) as unknown as T;
-  } else {
-    return a;
   }
+  return a;
 }
 
 export default merge;