@flomon-ui/icons
Version:
Flomon icon components
166 lines (165 loc) • 7.09 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const prop_types_1 = __importDefault(require("prop-types"));
const react_1 = __importStar(require("react"));
const Icon = props => {
const { name, size, color, hidden, className, style, animation, animationTrigger, animationDuration, innerName, innerSize, innerColor, innerHidden, innerClassName, innerStyle, innerAnimation, innerAnimationTrigger, innerAnimationDuration, stackRatio, onClick, ...other } = props;
const iconRef = (0, react_1.useRef)();
const getIcon = (name, className, size, color, hidden, style, animation, animationTrigger, animationDuration, stackRatio) => {
const prefix = `flomon-font-icon`;
const stackRatioClass = innerName ? `icon-stack-${stackRatio}x` : '';
let iconSize;
if (typeof size !== 'undefined') {
if (typeof size === 'number') {
iconSize = `icon-${size}x`;
}
else if (typeof size === 'string') {
iconSize = `icon-${size}`;
}
}
const animationClassName = getAnimationClassName(animation, animationTrigger);
const iconClassName = `flomon-icon ${prefix}-${name} ${iconSize} ${className || ''} ${stackRatioClass} ${animationClassName}`;
// Setting timer for animation
if (animationTrigger === 'duration') {
setTimeout(() => {
iconRef.current.classList.toggle('animated');
iconRef.current.classList.toggle(`flomon-${animation}`);
}, animationDuration * 1000);
}
return (react_1.default.createElement("i", { ref: iconRef, className: iconClassName, role: "presentation", style: {
...style,
color,
visibility: hidden ? 'hidden' : 'visible',
}, onClick: onClick }));
};
const getAnimationClassName = (animation, animationTrigger) => {
if (animationTrigger === 'hover') {
return `flomon-${animation} animated-hover`;
}
if (animationTrigger === 'parent-hover') {
return `flomon-${animation}`;
}
if (!animation) {
return '';
}
return `flomon-${animation} animated`;
};
const icon = getIcon(name, className, size, color, hidden, style, animation, animationTrigger, animationDuration, stackRatio[0]);
if (innerName) {
const innerIcon = getIcon(innerName, innerClassName, innerSize || size, innerColor, innerHidden, innerStyle, innerAnimation, innerAnimationTrigger, innerAnimationDuration, stackRatio[1]);
return (react_1.default.createElement("span", { className: "icon-stack", style: { cursor: onClick ? 'pointer' : 'default' }, ...other },
icon,
innerIcon));
}
return icon;
};
Icon.propTypes = {
/** Icon name */
name: prop_types_1.default.string.isRequired,
/** Icon size(em, lg, fw) */
size: prop_types_1.default.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, '1x', '2x', '3x', '4x', '5x', '6x', '7x', '8x', '9x', 'lg']),
/** 아이콘 색상 */
color: prop_types_1.default.string,
/** 아이콘 className */
className: prop_types_1.default.string,
/** 아이콘 사용자 정의 CSS 스타일 */
style: prop_types_1.default.object,
/** 아이콘 hide */
hidden: prop_types_1.default.bool,
/** 아이콘 애니메이션 */
animation: prop_types_1.default.oneOf([
'spin',
'spin-pulse',
'wrench',
'ring',
'vertical',
'horizontal',
'flash',
'bounce',
'float',
'pulse',
'tada',
'passing',
'passing-reverse',
'burst',
'falling',
'shake',
]),
/** 아이콘 애니메이션 표시 방법(항상, 일정시간, 호버, 부모노드 호버) */
animationTrigger: prop_types_1.default.oneOf(['always', 'duration', 'hover', 'parent-hover']),
/** 아이콘 애니메이션 표시 시간(초) */
animationDuration: prop_types_1.default.number,
/** 중첩 아이콘 이름 */
innerName: prop_types_1.default.string,
/** 중첩 사이즈(em) - 폰트 아이콘에만 적용 */
innerSize: prop_types_1.default.oneOfType([prop_types_1.default.number, prop_types_1.default.string]),
/** 중첩 아이콘 색상 */
innerColor: prop_types_1.default.string,
/** 중첩 아이콘 hide */
innerHidden: prop_types_1.default.bool,
/** 중첩 아이콘 className */
innerClassName: prop_types_1.default.string,
/** 중첩 아이콘 사용자 정의 CSS 스타일 */
innerStyle: prop_types_1.default.object,
/** 아이콘 애니메이션 */
innerAnimation: prop_types_1.default.oneOf([
'spin',
'spin-pulse',
'wrench',
'ring',
'vertical',
'horizontal',
'flash',
'bounce',
'float',
'pulse',
'tada',
'passing',
'passing-reverse',
'burst',
'falling',
'shake',
]),
/** 아이콘 애니메이션 표시 방법(항상, 일정시간, 호버, 부모노드 호버) */
innerAnimationTrigger: prop_types_1.default.oneOf(['always', 'duration', 'hover', 'parent-hover']),
/** 아이콘 애니메이션 표시 시간(초) */
innerAnimationDuration: prop_types_1.default.number,
/** 중첩 아이콘 및 기본 아이콘의 배율(1배, 2배), default [1, 1] */
stackRatio: prop_types_1.default.array,
};
Icon.defaultProps = {
size: 1,
innerSize: 1,
stackRatio: [1, 1],
animationTrigger: 'always',
animationDuration: 15,
innerAnimationTrigger: 'always',
innerAnimationDuration: 15,
};
exports.default = Icon;