Why Gemfury? Push, build, and install  RubyGems npm packages Python packages Maven artifacts PHP packages Go Modules Debian packages RPM packages NuGet packages

Repository URL to install this package:

Details    
@skava/packages / ui / Image / Image.js
Size: Mime:
import * as React from 'react';
import { Image as BaseImage } from '@skava/ui/dist/components/atoms/Image';
import { Magnifier } from './Magnifier';
import { isImageLike } from './deps';
// className
// classes
// classList
// containerClasses
// containerClassName
// figureClassName
// captionClass
// captionClassName
//
// isImage
// isZoom
class Image extends React.PureComponent {
    constructor() {
        super(...arguments);
        this.labelFor = () => {
            // NOTE:  these are alternative text props from reference-store
            const { caption, text, captionText, labelText } = this.props;
            return caption || text || captionText || labelText;
        };
        this.noWrapFor = () => {
            const { Wrap, hasNoWrap, nowrap } = this.props;
            return hasNoWrap || nowrap || Wrap === undefined;
        };
        this.sourceFor = () => {
            const { src, alt, imageSrc, imageSource, alternateImage, url } = this.props;
            const source = src || imageSrc || imageSource || url || alternateImage;
            return isImageLike(alt) ? alt : source || '';
        };
        this.renderCaption = () => {
            const { children } = this.props;
            const label = this.labelFor();
            return (React.createElement("figure", null,
                children,
                React.createElement("figcaption", null, label)));
        };
        this.renderMagnifier = () => {
            const { width, height, className, alt, imgWidth, imgHeight } = this.props;
            const src = this.sourceFor();
            const nowrap = this.noWrapFor();
            const qa = this.props.qa || this.props['data-qa'];
            const props = {
                alt,
                width,
                height,
                nowrap,
                className,
                src,
                imgWidth,
                imgHeight,
                'zoomFactor': 1.5,
                'zoomImgSrc': src,
                'data-qa': qa,
            };
            console.log('-- Magnifier: ', props);
            return React.createElement(Magnifier, Object.assign({}, props));
        };
        this.renderWrapper = () => {
            const { Wrap, children } = this.props;
            return React.createElement(Wrap, null, children);
        };
    }
    render() {
        // NOTE:  these props are for Image in the ui-component-library
        const { width, height, className, children, alt } = this.props;
        const { Wrap, enableZoom } = this.props;
        const src = this.sourceFor();
        const label = this.labelFor();
        const nowrap = this.noWrapFor();
        const qa = this.props.qa || this.props['data-qa'];
        const props = {
            alt,
            width,
            height,
            nowrap,
            className,
            children,
            src,
            'data-qa': qa,
        };
        if (label) {
            props.renderWrapper = this.renderCaption;
        }
        else if (Wrap) {
            props.renderWrapper = this.renderWrapper;
        }
        if (enableZoom) {
            props.renderImage = this.renderMagnifier;
        }
        return React.createElement(BaseImage, Object.assign({}, props));
    }
}
export { Image };
export default Image;
//# sourceMappingURL=Image.js.map