fix: fix props update issue.

uiwjs · Aug 26, 2023 · 45a2c99 · 45a2c99
1 parent 9d403e2
commit 45a2c99
Show file tree

Hide file tree

Showing 7 changed files with 44 additions and 0 deletions.
diff --git a/core/README.md b/core/README.md
@@ -123,6 +123,25 @@ export default function Demo() {
 }
 ```
 
+```jsx mdx:preview
+import React from 'react';
+import Npm from '@uiw/react-shields/npm';
+
+export default function Demo() {
+  const [scope, setScope] = React.useState('@uiw');
+  const [packageName, setPackageName] = React.useState('react-shields');
+  return (
+    <>
+      <Npm.Size scope={scope} packageName={packageName} />
+      <div>
+        <button onClick={() => setPackageName('react-shields')}>react-shields</button>
+        <button onClick={() => setPackageName('react-codemirror')}>react-codemirror</button>
+      </div>
+    </>
+  );
+}
+```
+
 ### Npm.Downloads
 
 ```jsx mdx:preview

diff --git a/core/src/common/Base.tsx b/core/src/common/Base.tsx
@@ -21,6 +21,11 @@ export default class Base<T> extends Component<BaseProps & T, BaseState & T> {
     super(props);
     this.state = Object.assign({}, { ...defaultState, ...props }, forceState);
   }
+  componentDidUpdate(prevProps: Readonly<BaseProps & T>, prevState: Readonly<BaseState & T>, snapshot?: any): void {
+    if (prevProps !== this.props) {
+      this.setState({ ...this.state, ...this.props });
+    }
+  }
   getUrl = () => '';
   render() {
     const { href } = this.state;

diff --git a/core/src/coverages/Codacy.tsx b/core/src/coverages/Codacy.tsx
@@ -15,6 +15,10 @@ export interface CodacyProps extends BaseProps {
 }
 
 export default class Codacy extends Base<CodacyProps> {
+  static defaultProps: BaseProps = {
+    platform: 'coveralls',
+    base: 'https://img.shields.io',
+  };
   constructor(props: CodacyProps) {
     super(props, {}, { platform: 'coveralls' });
   }

diff --git a/core/src/coverages/Coverages.tsx b/core/src/coverages/Coverages.tsx
@@ -21,6 +21,10 @@ export interface CoveragesProps extends BaseProps {
 }
 
 export default class Coverages extends Base<CoveragesProps> {
+  static defaultProps: BaseProps = {
+    platform: 'coveralls',
+    base: 'https://img.shields.io',
+  };
   constructor(props: CoveragesProps) {
     super(props, { type: 'github' }, { platform: 'coveralls' });
   }

diff --git a/core/src/npm/Downloads.tsx b/core/src/npm/Downloads.tsx
@@ -17,6 +17,10 @@ export interface DownloadProps extends BaseProps {
  *
  */
 export default class Downloads extends Base<DownloadProps> {
+  static defaultProps: BaseProps = {
+    platform: 'npm',
+    base: 'https://img.shields.io',
+  };
   constructor(props: DownloadProps) {
     super(props, { interval: 'dm' }, { platform: 'npm' });
   }

diff --git a/core/src/npm/Size.tsx b/core/src/npm/Size.tsx
@@ -24,6 +24,10 @@ export interface SizeProps extends BaseProps {
  *
  */
 export default class Size extends Base<SizeProps> {
+  static defaultProps: BaseProps = {
+    platform: 'npm',
+    base: 'https://img.shields.io',
+  };
   constructor(props: SizeProps) {
     super(props, { format: 'min' }, { platform: 'npm' });
   }

diff --git a/core/src/npm/Version.tsx b/core/src/npm/Version.tsx
@@ -50,6 +50,10 @@ export interface VersionProps extends BaseProps {
 }
 
 export default class Version extends Base<VersionProps> {
+  static defaultProps: BaseProps = {
+    platform: 'npm',
+    base: 'https://img.shields.io',
+  };
   constructor(props: VersionProps) {
     super(props, { type: 'version' }, { platform: 'npm' });
   }