@mornya/react-social-libs
Version:
The project of React.js Social Share and Widget modules.
181 lines (180 loc) • 8.45 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import { Platform } from '@mornya/platform-libs';
import React from 'react';
import BaseComponent from './BaseComponent';
var BaseShareComponent = (function (_super) {
__extends(BaseShareComponent, _super);
function BaseShareComponent(props) {
var _this = _super.call(this, props) || this;
_this.state = {
OG: undefined,
extra: undefined,
defaultIconScale: 0,
defaultIconPos: 0,
apiStep: 0,
isRunning: false,
};
_this.shareId = '';
_this.shareName = '';
_this.SHARE_ERRORS = {
SHARE_IN_PROGRESS: '공유하기 진행 중 입니다. 잠시만 기다려주세요.',
SHARE_API_NOT_READY: '공유하기 API가 아직 로딩되지 않았습니다. 잠시만 기다려주세요.',
SHARE_SMS_ONLY_MOBILE: '문자메시지 공유는 모바일 환경에서만 가능합니다.',
SHARE_CLIPBOARD_ERROR: '클립보드 복사가 실패했습니다.',
};
_this.renderShareButton = function (_a) {
var id = _a.id, label = _a.label, className = _a.className, style = _a.style;
return (React.createElement("button", { id: id, "aria-label": label, className: className, style: style, onClick: _this.onClickShare },
React.createElement("span", { title: label, className: "share-default-button x128", style: {
width: _this.props.defaultIconSize,
height: _this.props.defaultIconSize,
} },
React.createElement("span", { className: _this.shareId, style: {
transform: _this.state.defaultIconScale >= 1.0 ? undefined : "scale(".concat(_this.state.defaultIconScale, ")"),
top: _this.state.defaultIconPos,
left: _this.state.defaultIconPos,
} }))));
};
_this.initialize = _this.initialize.bind(_this);
_this.getApiStep = _this.getApiStep.bind(_this);
_this.setApiStep = _this.setApiStep.bind(_this);
_this.onInit = _this.onInit.bind(_this);
_this.onMount = _this.onMount.bind(_this);
_this.onShare = _this.onShare.bind(_this);
_this.onComplete = _this.onComplete.bind(_this);
_this.onError = _this.onError.bind(_this);
_this.onClickShare = _this.onClickShare.bind(_this);
_this.onUnmount = _this.onUnmount.bind(_this);
_this.id = "share-".concat(_super.prototype.getUID.call(_this)).concat(_super.prototype.getUID.call(_this));
_this.defaultExtra = {};
_this.onInit();
return _this;
}
BaseShareComponent.getDerivedStateFromProps = function (nextProps) {
var _a;
var defaultIconSize = (_a = nextProps.defaultIconSize) !== null && _a !== void 0 ? _a : BaseShareComponent.defaultProps.defaultIconSize;
if (defaultIconSize < 8) {
defaultIconSize = 8;
}
else if (defaultIconSize > 128) {
defaultIconSize = 128;
}
return {
defaultIconScale: defaultIconSize / 128,
defaultIconPos: (defaultIconSize - 128) / 2,
};
};
BaseShareComponent.prototype.componentDidMount = function () {
var _this = this;
var _a;
this.deviceInfo = Platform.getInfo(window.navigator.userAgent);
var OG = this.getDefaultMetaContent();
var extra = __assign(__assign({}, this.defaultExtra), this.props.extra);
if (!((_a = extra.hashtags) === null || _a === void 0 ? void 0 : _a.length)) {
extra.hashtags = this.getDefaultHashtags(OG.keywords);
}
this.setState({ OG: OG, extra: extra }, function () { return _this.onMount(extra); });
};
BaseShareComponent.prototype.componentDidUpdate = function (prevProps, prevState) {
if (prevState.OG !== this.state.OG || prevProps.extra !== this.props.extra) {
this.onMount(this.state.extra);
}
};
BaseShareComponent.prototype.componentWillUnmount = function () {
this.onUnmount(this.state.extra);
};
BaseShareComponent.prototype.initialize = function (shareId, defaultExtra) {
this.shareName = shareId;
this.shareId = shareId.toLowerCase();
this.defaultExtra = defaultExtra;
};
BaseShareComponent.prototype.getApiStep = function () {
return this.state.apiStep;
};
BaseShareComponent.prototype.setApiStep = function (callback) {
this.setState({ apiStep: this.state.apiStep + 1 }, callback);
};
BaseShareComponent.prototype.onInit = function () { };
BaseShareComponent.prototype.onMount = function (_extra) { };
BaseShareComponent.prototype.onShare = function (_extra, _OG) { };
BaseShareComponent.prototype.onComplete = function (isSuccess, response) {
var _a, _b;
this.setState({ isRunning: false });
(_b = (_a = this.props).onComplete) === null || _b === void 0 ? void 0 : _b.call(_a, isSuccess, response);
};
BaseShareComponent.prototype.onError = function (type) {
var _a, _b;
this.onComplete(false, null);
(_b = (_a = this.props).onError) === null || _b === void 0 ? void 0 : _b.call(_a, { type: type, message: this.SHARE_ERRORS[type] });
};
BaseShareComponent.prototype.onClickShare = function () {
var _this = this;
var _a, _b;
if (this.state.apiStep > 0) {
if (this.state.isRunning) {
this.onError('SHARE_IN_PROGRESS');
}
else if (((_b = (_a = this.props).onBefore) === null || _b === void 0 ? void 0 : _b.call(_a)) !== false) {
this.setState({ isRunning: true });
setTimeout(function () { return _this.setState({ isRunning: false }); }, 2000);
this.onShare(this.state.extra, this.state.OG);
}
}
else {
this.onError('SHARE_API_NOT_READY');
}
};
BaseShareComponent.prototype.onUnmount = function (_extra) { };
BaseShareComponent.prototype.render = function () {
var _a;
if (!this.state.apiStep || !this.state.extra || !this.state.OG) {
return null;
}
else {
var label = (_a = this.props.title) !== null && _a !== void 0 ? _a : "Share ".concat(this.shareName);
var className = ['mornya-lib', 'sns-share', this.shareId, this.props.className].filter(Boolean).join(' ');
var style = this.props.style;
if (this.props.children) {
return (React.createElement("button", { id: this.id, "aria-label": label, className: className, style: style, onClick: this.onClickShare }, this.props.children));
}
else {
return this.renderShareButton({ id: this.id, label: label, className: className, style: style });
}
}
};
BaseShareComponent.defaultProps = {
defaultIconSize: 24,
onBefore: function () { },
onComplete: function () { },
onError: function (err) {
console.error(err.message);
},
};
return BaseShareComponent;
}(BaseComponent));
export { BaseShareComponent };