react-avatar-selector
Version:
An image selector targeted for profile pictures (avatars)
21 lines • 1.97 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importDefault(require("react"));
const AvatarSelector_module_css_1 = __importDefault(require("../../styles/AvatarSelector.module.css"));
const AvatarPlaceholder_1 = __importDefault(require("../svgs/AvatarPlaceholder"));
const CameraIcon_1 = __importDefault(require("../svgs/CameraIcon"));
const read_file_1 = __importDefault(require("../functions/read-file"));
const AvatarSelector = ({ value = null, onChange = (value) => null, size = 200, iconSize = Number(size) / 5, }) => {
return (react_1.default.createElement("div", { className: `${AvatarSelector_module_css_1.default.base} ${AvatarSelector_module_css_1.default.border}`, style: {
width: `${size}px`,
height: `${size}px`,
} },
!value && (react_1.default.createElement(AvatarPlaceholder_1.default, { className: `${AvatarSelector_module_css_1.default.center} ${AvatarSelector_module_css_1.default.border} ${AvatarSelector_module_css_1.default.content}`, size: size })),
react_1.default.createElement("input", { className: `${AvatarSelector_module_css_1.default.center} ${AvatarSelector_module_css_1.default.inp}`, type: 'file', accept: '.png,.jpg,.jpeg', multiple: false, onChange: (e) => (0, read_file_1.default)(e, onChange) }),
value ? (react_1.default.createElement("img", { className: `${AvatarSelector_module_css_1.default.center} ${AvatarSelector_module_css_1.default.border} ${AvatarSelector_module_css_1.default.content}`, src: value.base64, alt: '' })) : (react_1.default.createElement(CameraIcon_1.default, { className: `${AvatarSelector_module_css_1.default.center} ${AvatarSelector_module_css_1.default.icon}`, size: iconSize }))));
};
exports.default = AvatarSelector;
//# sourceMappingURL=AvatarSelector.js.map