packages/render/miniapp/apiForH5/Components/Share.js
import { Component } from "react-core/Component";
import NativeShare from "nativeshare";
import { handleSuccess, handleFail } from "../../utils";
const shareTypes = [
{
key: "default",
name: "系统",
icon: (
<svg
width="32"
height="32"
viewBox="0 0 32 32"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<style />
</defs>
<path
d="M26.438 12.625H25.25q-.156-.406-.344-.781L25.75 11q.75-.75.75-1.813 0-1.062-.75-1.812L24.625 6.25q-.75-.75-1.813-.75-1.062 0-1.812.75l-.875.844-.75-.313V5.563q-.031-1.094-.75-1.813-.719-.719-1.813-.75h-1.625q-1.062.031-1.796.75-.735.719-.766 1.813v1.25q-.375.156-.719.312L11 6.25q-.75-.75-1.813-.75-1.062 0-1.812.75L6.25 7.375q-.75.781-.75 1.813 0 1.03.75 1.812l.875.906q-.156.344-.313.719h-1.25q-1.093.031-1.812.75-.719.719-.75 1.813v1.624q.031 1.094.75 1.813.719.719 1.813.75H6.78l.313.75L6.25 21q-.75.75-.75 1.813 0 1.062.75 1.812l1.125 1.156q.781.719 1.828.719 1.047 0 1.797-.719l.844-.843q.375.187.781.312v1.188q.031 1.093.75 1.812.719.719 1.813.75h1.624q1.094-.031 1.813-.75.719-.719.75-1.813v-1.156q.406-.156.813-.343l.812.812q.75.75 1.813.75 1.062 0 1.812-.75l1.125-1.125q.75-.781.75-1.813 0-1.03-.75-1.812l-.813-.813q.188-.406.344-.812h1.157q1.093-.031 1.812-.75.719-.719.75-1.813v-1.625q-.031-1.093-.75-1.812-.719-.719-1.813-.75M16 20.25q-1.813-.031-3.016-1.234T11.75 16q.031-1.813 1.234-3.016Q14.188 11.781 16 11.75q1.813.031 3.016 1.234Q20.219 14.188 20.25 16q-.031 1.813-1.234 3.016T16 20.25M18.75 16q-.031 1.156-.813 1.938-.78.78-1.937.78-1.156 0-1.938-.78-.78-.782-.78-1.938t.78-1.938q.782-.78 1.938-.78t1.938.78q.78.782.812 1.938"
fill="#5aace2"
class="transform-group"
/>
</svg>
)
},
{
key: "wechatTimeline",
name: "朋友圈",
icon: (
<svg
width="32"
height="32"
viewBox="0 0 32 32"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<style />
</defs>
<path
d="M16 11H4a13.09 13.09 0 0 1 6.075-6.575L16.7 11.05A4.294 4.294 0 0 0 16 11zm3.525 1.462c.175.163.325.35.475.538V3.625A12.878 12.878 0 0 0 16 3c-1.75 0-3.425.35-4.95.975l8.475 8.487zm8.488-1.412l-8.488 8.487c-.175.163-.35.326-.537.476h9.375c.4-1.263.637-2.613.637-4 0-1.763-.35-3.438-.988-4.963zM21 4v12c0 .238-.012.475-.05.7l6.625-6.625A13.036 13.036 0 0 0 21 4zm-5.7 16.95l6.625 6.625A13.036 13.036 0 0 0 28 21H16a6.36 6.36 0 0 1-.7-.05zm-2.825-8.488c.175-.174.35-.325.537-.474H3.637a12.82 12.82 0 0 0-.624 4c0 1.75.35 3.425.987 4.95l8.475-8.476zm0 7.063a6.354 6.354 0 0 1-.475-.537v9.374c1.262.4 2.613.638 4 .638 1.75 0 3.425-.35 4.95-.988l-8.475-8.487zM11 28V16c0-.238.012-.475.05-.712l-6.625 6.624A13.06 13.06 0 0 0 11 28z"
fill="#1dba9c"
class="transform-group"
/>
</svg>
)
},
{
key: "wechatFriend",
name: "微信朋友",
icon: (
<svg
width="32"
height="32"
viewBox="0 0 32 32"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<style />
</defs>
<path
d="M30 19.25c0-4.275-3.925-7.75-8.75-7.75s-8.75 3.475-8.75 7.75S16.425 27 21.25 27c.988 0 1.956-.144 2.881-.431l2.756 1.375c.07.037.15.05.226.05a.51.51 0 0 0 .318-.113.504.504 0 0 0 .163-.525l-.638-2.231C28.894 23.656 30 21.531 30 19.25zM18.5 18c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm5.5 0c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-2.75-7.5c.325 0 .644.012.956.044C20.944 6.762 16.988 4 12.313 4 6.625 4 2 8.094 2 13.125c0 2.706 1.325 5.225 3.644 6.963l-.756 2.787a.51.51 0 0 0 .162.519.51.51 0 0 0 .538.062l3.437-1.681c.987.294 2.019.45 3.063.475a7.92 7.92 0 0 1-.588-3c0-4.825 4.375-8.75 9.75-8.75zM15.5 9c.688 0 1.25.563 1.25 1.25 0 .688-.563 1.25-1.25 1.25s-1.25-.563-1.25-1.25c0-.688.563-1.25 1.25-1.25zm-6.25 2.5c-.688 0-1.25-.563-1.25-1.25C8 9.562 8.563 9 9.25 9s1.25.563 1.25 1.25c0 .688-.563 1.25-1.25 1.25z"
fill="#1dba9c"
class="transform-group"
/>
</svg>
)
},
{
key: "qqFriend",
name: "QQ好友",
icon: (
<svg
width="32"
height="32"
viewBox="0 0 32 32"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<style />
</defs>
<path
d="M25.85 23.113h-.006a1.523 1.523 0 0 1-.444.062c-.469 0-.956-.2-1.406-.575a13.68 13.68 0 0 1-.482.738c1.175.487 1.894 1.337 1.894 2.287 0 .813-.506 1.563-1.431 2.106-.838.494-1.938.769-3.1.769-1.619 0-3.137-.563-3.9-1.431-.294.044-.575.075-.863.075s-.568-.038-.862-.075c-.769.869-2.281 1.431-3.9 1.431-1.156 0-2.256-.275-3.1-.769-.925-.544-1.431-1.294-1.431-2.106 0-.944.725-1.8 1.894-2.287a12.28 12.28 0 0 1-.544-.87c-.507.457-1.05.7-1.582.7a1.62 1.62 0 0 1-.425-.055c-.006 0-.012-.007-.018-.007C5.48 22.9 4.056 22.02 5.13 18.35c0-.006 0-.006.006-.012.463-1.438 1.7-3.707 2.726-4.775l.13-2.088C8.007 7.081 11.594 3.5 16 3.5s7.994 3.581 8 7.981l.119 1.875c.956.944 2.212 3.457 2.737 4.975 0 .007.006.013.006.025 1.076 3.669-.35 4.55-1.012 4.757z"
fill="#5aace2"
class="transform-group"
/>
</svg>
)
},
{
key: "weibo",
name: "微博",
icon: (
<svg
width="32"
height="32"
viewBox="0 0 32 32"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<style />
</defs>
<path
d="M13.469 30.125q-5.188-.031-9.172-2.25Q.313 25.656.094 21.656q0-2.093 1.234-4.375Q2.562 15 4.844 12.72q3.125-3.063 6.062-4.203 2.938-1.141 4.375.14.594.594.672 1.547.078.953-.297 2.172-.125.563.281.484.407-.078.47-.109 2.468-1.031 4.374-1.047 1.907-.015 2.719 1.078.406.594.39 1.39-.015.798-.39 1.767-.156.437 0 .578.156.14.5.234 1.469.438 2.64 1.5 1.172 1.063 1.235 2.875-.094 3.188-3.969 6-3.875 2.813-10.437 3m-1.25-14.406q-4.031.469-6.547 2.5t-2.36 4.718q.344 2.657 3.22 4.157 2.874 1.5 6.937 1.156 4.062-.469 6.578-2.5 2.515-2.031 2.36-4.719-.376-2.656-3.25-4.156-2.876-1.5-6.938-1.156M10.063 26.75q-1.938-.656-2.626-2.234-.687-1.578.125-3.328.875-1.688 2.672-2.47 1.797-.78 3.766-.343 1.969.563 2.797 2.11.828 1.546.047 3.39-.875 1.844-2.797 2.672-1.922.828-3.985.203m1.407-4.719q-.625-.25-1.281-.031-.657.219-1.047.828-.391.61-.25 1.203.14.594.765.875.625.282 1.328.063.704-.219 1.094-.844.39-.625.219-1.219-.172-.593-.828-.875m2.031-.843q-.25-.094-.5 0-.25.093-.375.343t-.063.469q.063.219.297.313.235.093.5 0 .266-.094.391-.344.125-.25.063-.469-.063-.219-.313-.313m18.031-5.812q-.187.469-.61.703-.421.235-.921.063t-.719-.594q-.218-.422-.093-.922.5-1.5.187-3.063-.313-1.562-1.438-2.796-1.125-1.235-2.625-1.704-1.5-.468-3.062-.156-.5.094-.922-.172-.422-.265-.531-.765-.11-.5.156-.907.266-.406.797-.53 2.156-.47 4.281.187 2.125.656 3.719 2.422 1.594 1.765 2.016 3.937.422 2.172-.235 4.297m-4.125-1.344q-.156.438-.515.625-.36.188-.797.047-.438-.14-.625-.515-.188-.376-.063-.782.157-.531.063-1.047-.094-.515-.485-.937-.39-.422-.89-.578-.5-.156-1-.031-.438.062-.797-.157-.36-.219-.453-.656-.094-.438.14-.781.235-.344.672-.469 1.032-.219 2.078.094 1.047.312 1.813 1.172.765.859.984 1.921.219 1.063-.125 2.094"
fill="#f43"
class="transform-group"
/>
</svg>
)
}
];
export default class Share extends Component {
browserShare({ title, path, imageUrl, type = "default", desc }) {
var nativeShare = new NativeShare();
nativeShare.setShareData({
icon: imageUrl,
link: path,
title,
desc
});
try {
nativeShare.call(type);
handleSuccess(
{
errMsg: "分享成功"
},
this.props.success,
this.props.complete,
this.props.resolve
);
} catch (e) {
React.api.showModal({
title: "分享失败",
content: "浏览器不支持该类型分享",
showCancel: false
});
handleFail(
{
errMsg: "分享失败",
reason: "浏览器不支持该类型分享"
},
this.props.fail,
this.props.complete,
this.props.reject
);
}
// TODO: 是否需要降级处理
// shareIndex++;
// if (shareIndex >= shareTypes.length) {
// console.log(e);
// } else {
// browserShare(title, path, imageUrl, shareTypes[shareIndex]);
// }
}
handleShareClick(shareKey) {
console.log(shareKey);
const { title, path, imageUrl, desc } = this.props;
document.getElementById("h5-api-share").remove();
this.browserShare({
title,
path,
imageUrl,
desc,
type: shareKey
});
}
render() {
return (
<div className="share2019">
{shareTypes.map((share, index) => {
return (
<div
className="share-item"
key={index}
onClick={this.handleShareClick.bind(
this,
share.key
)}
>
{share.icon}
<div>{share.name}</div>
</div>
);
})}
<style ref={(node) => {
Object(node).textContent = `
.share2019 {
display: flex;
flex-direction: row;
justifiy-content: center;
flex-wrap: wrap;
position: fixed;
width: 100%;
background-color: #fff;
margin: auto;
left: 0;
bottom: 0;
right: 0;
}
.share2019 .share-item {
width: 1.5rem;
height: 1.5rem;
text-align: center;
margin: .5rem 0 .1rem;
}
.share2019 .icon {
width: 100%;
height: 100%;
}`;
}}></style>
</div>
);
}
}