) => {
+ event.stopPropagation();
+
+ const image = await blobOf(this.imageURI);
+
+ const file = new File([image], `${this.props.title}.png`, {
+ type: image.type
+ });
+ await navigator.share?.({ files: [file], ...this.props });
+ };
+
+ render() {
+ const { children } = this.props,
+ { loading, imageURI } = this;
+
+ return (
+ <>
+ {loading && }
+
+
+ {children}
+
+ {imageURI && (
+
+ )}
+
+
+ );
+ }
+}
diff --git a/source/index.ts b/source/index.ts
index 1c068b8..7ee59c2 100644
--- a/source/index.ts
+++ b/source/index.ts
@@ -13,6 +13,7 @@ export * from './Nameplate';
export * from './OverlayBox';
export * from './PageNav';
export * from './Select';
+export * from './ShareBox';
export * from './SpinnerButton';
export * from './TableSpinner';
export * from './TimeDistance';
diff --git a/stories/Introduction.mdx b/stories/Introduction.mdx
index 5e8f60d..5855fb9 100644
--- a/stories/Introduction.mdx
+++ b/stories/Introduction.mdx
@@ -6,12 +6,19 @@ import { Meta } from '@storybook/blocks';
A **[React][1] advanced components library** based on [TypeScript][2] & [Bootstrap][3], built by **[idea2app][4] remote developers team**.
-[][5]
+[][5]
[][6]
[][7]
[][8]
+## Versions
+
+| SemVer | status | ES decorator | MobX |
+| :----: | :----------: | :----------: | :---------: |
+| `>=2` | ✅developing | stage-3 | `>=6.11` |
+| `<2` | ❌deprecated | stage-2 | `>=4 <6.11` |
+
## Usage
### Scaffolds
@@ -24,11 +31,11 @@ A **[React][1] advanced components library** based on [TypeScript][2] & [Bootstr
```html
```
+### `tsconfig.json`
+
+Compatible with MobX 6/7:
+
+```json
+{
+ "compilerOptions": {
+ "target": "ES6",
+ "moduleResolution": "Node",
+ "useDefineForClassFields": true,
+ "experimentalDecorators": false,
+ "jsx": "react-jsx"
+ }
+}
+```
+
### Dialog
```tsx
@@ -114,7 +137,7 @@ export class ExamplePage extends PureComponent {
2. add Git tag
```shell
-git tag vx.xx.x # such as v0.23.0
+git tag vx.xx.x # such as v2.0.0
```
3. review tag