isa-auth-core
Version:
131 lines (130 loc) • 4.38 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "default", {
enumerable: true,
get: function() {
return _default;
}
});
function _define_property(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
/**
* @description provider 타입을 좀 더 구체적으로 해야하나?
* core package에서는 단순한 컴포넌트 정보를 담은 json인데 여기에 action이 필요한가?
* 외부에서 주입하는 props는 그러려니하지만 기본적인 공통 props는 좀 더 명확히 정의 내릴 수 있지않을까?
*/ class LoginButton {
getDefaultText() {
switch(this.provider){
case 'google':
return 'Sign in with Google';
case 'apple':
return 'Sign in with Apple';
case 'kakao':
return '카카오로 로그인';
default:
return '로그인';
}
}
getDefaultStyle() {
switch(this.type){
case 'rect':
return {
padding: '10px 20px',
borderRadius: '4px',
fontSize: '14px'
};
case 'rounded':
return {
padding: '10px 20px',
borderRadius: '20px',
fontSize: '14px'
};
case 'circle':
return {
width: '40px',
height: '40px',
borderRadius: '50%',
padding: '0',
fontSize: '16px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
};
case 'link':
return {
backgroundColor: 'transparent',
color: '#007bff',
textDecoration: 'underline',
fontSize: '14px',
border: 'none'
};
case 'brand':
return {
backgroundColor: '#000',
color: '#fff',
padding: '12px 24px',
fontWeight: 'bold',
fontSize: '16px'
};
default:
return {};
}
}
mergeStyles() {
return {
...this.getDefaultStyle(),
...this.config.style
};
}
getButtonClass() {
const base = 'isa-auth-button';
const typeClass = `login-button-${this.type}`;
const providerClass = `auth-button-${this.provider}`;
const widthClass = this.config.fullWidth ? 'full-width' : '';
return [
base,
typeClass,
providerClass,
widthClass
].join(' ').trim();
}
toJSON() {
var _this_config_icon, _this_config_text, _this_config_fullWidth;
return {
id: this.config.id,
type: this.type,
provider: this.provider,
icon: (_this_config_icon = this.config.icon) !== null && _this_config_icon !== void 0 ? _this_config_icon : `/icons/${this.provider}.svg`,
text: (_this_config_text = this.config.text) !== null && _this_config_text !== void 0 ? _this_config_text : this.getDefaultText(),
style: this.mergeStyles(),
fullWidth: (_this_config_fullWidth = this.config.fullWidth) !== null && _this_config_fullWidth !== void 0 ? _this_config_fullWidth : false,
className: this.getButtonClass(),
onClick: this.action
};
}
constructor(props){
_define_property(this, "type", void 0);
_define_property(this, "provider", void 0);
_define_property(this, "action", void 0);
_define_property(this, "config", void 0);
this.type = props.type;
this.provider = props.provider;
this.action = props.action;
this.config = props.config;
}
}
const _default = LoginButton;
//# sourceMappingURL=loginButton.js.map