semantic-ui-react
Version:
The official Semantic-UI-React integration.
178 lines (137 loc) • 5.81 kB
JavaScript
import _extends from 'babel-runtime/helpers/extends';
import _isNil from 'lodash/isNil';
import cx from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
import { childrenUtils, createShorthandFactory, customPropTypes, getElementType, getUnhandledProps, META, SUI, useKeyOnly, useKeyOrValueAndKey, useValueAndKey, useVerticalAlignProp } from '../../lib';
import Dimmer from '../../modules/Dimmer';
import Label from '../Label/Label';
import ImageGroup from './ImageGroup';
/**
* An image is a graphic representation of something.
* @see Icon
*/
function Image(props) {
var alt = props.alt,
avatar = props.avatar,
bordered = props.bordered,
centered = props.centered,
children = props.children,
circular = props.circular,
className = props.className,
content = props.content,
dimmer = props.dimmer,
disabled = props.disabled,
floated = props.floated,
fluid = props.fluid,
height = props.height,
hidden = props.hidden,
href = props.href,
inline = props.inline,
label = props.label,
rounded = props.rounded,
size = props.size,
spaced = props.spaced,
src = props.src,
verticalAlign = props.verticalAlign,
width = props.width,
wrapped = props.wrapped,
ui = props.ui;
var classes = cx(useKeyOnly(ui, 'ui'), size, useKeyOnly(avatar, 'avatar'), useKeyOnly(bordered, 'bordered'), useKeyOnly(circular, 'circular'), useKeyOnly(centered, 'centered'), useKeyOnly(disabled, 'disabled'), useKeyOnly(fluid, 'fluid'), useKeyOnly(hidden, 'hidden'), useKeyOnly(inline, 'inline'), useKeyOnly(rounded, 'rounded'), useKeyOrValueAndKey(spaced, 'spaced'), useValueAndKey(floated, 'floated'), useVerticalAlignProp(verticalAlign, 'aligned'), 'image', className);
var rest = getUnhandledProps(Image, props);
var ElementType = getElementType(Image, props, function () {
if (!_isNil(dimmer) || !_isNil(label) || !_isNil(wrapped) || !childrenUtils.isNil(children)) return 'div';
});
if (!childrenUtils.isNil(children)) {
return React.createElement(
ElementType,
_extends({}, rest, { className: classes }),
children
);
}
if (!childrenUtils.isNil(content)) {
return React.createElement(
ElementType,
_extends({}, rest, { className: classes }),
content
);
}
var rootProps = _extends({}, rest, { className: classes });
var imgTagProps = { alt: alt, src: src, height: height, width: width };
if (ElementType === 'img') return React.createElement(ElementType, _extends({}, rootProps, imgTagProps));
return React.createElement(
ElementType,
_extends({}, rootProps, { href: href }),
Dimmer.create(dimmer),
Label.create(label),
React.createElement('img', imgTagProps)
);
}
Image.handledProps = ['alt', 'as', 'avatar', 'bordered', 'centered', 'children', 'circular', 'className', 'content', 'dimmer', 'disabled', 'floated', 'fluid', 'height', 'hidden', 'href', 'inline', 'label', 'rounded', 'size', 'spaced', 'src', 'ui', 'verticalAlign', 'width', 'wrapped'];
Image.Group = ImageGroup;
Image._meta = {
name: 'Image',
type: META.TYPES.ELEMENT
};
Image.propTypes = process.env.NODE_ENV !== "production" ? {
/** An element type to render as (string or function). */
as: customPropTypes.as,
/** Alternate text for the image specified. */
alt: PropTypes.string,
/** An image may be formatted to appear inline with text as an avatar. */
avatar: PropTypes.bool,
/** An image may include a border to emphasize the edges of white or transparent content. */
bordered: PropTypes.bool,
/** An image can appear centered in a content block. */
centered: PropTypes.bool,
/** Primary content. */
children: PropTypes.node,
/** An image may appear circular. */
circular: PropTypes.bool,
/** Additional classes. */
className: PropTypes.string,
/** Shorthand for primary content. */
content: customPropTypes.contentShorthand,
/** An image can show that it is disabled and cannot be selected. */
disabled: PropTypes.bool,
/** Shorthand for Dimmer. */
dimmer: customPropTypes.itemShorthand,
/** An image can sit to the left or right of other content. */
floated: PropTypes.oneOf(SUI.FLOATS),
/** An image can take up the width of its container. */
fluid: customPropTypes.every([PropTypes.bool, customPropTypes.disallow(['size'])]),
/** The img element height attribute. */
height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
/** An image can be hidden. */
hidden: PropTypes.bool,
/** Renders the Image as an <a> tag with this href. */
href: PropTypes.string,
/** An image may appear inline. */
inline: PropTypes.bool,
/** Shorthand for Label. */
label: customPropTypes.itemShorthand,
/** An image may appear rounded. */
rounded: PropTypes.bool,
/** An image may appear at different sizes. */
size: PropTypes.oneOf(SUI.SIZES),
/** An image can specify that it needs an additional spacing to separate it from nearby content. */
spaced: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['left', 'right'])]),
/** Specifies the URL of the image. */
src: PropTypes.string,
/** Whether or not to add the ui className. */
ui: PropTypes.bool,
/** An image can specify its vertical alignment. */
verticalAlign: PropTypes.oneOf(SUI.VERTICAL_ALIGNMENTS),
/** The img element width attribute. */
width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
/** An image can render wrapped in a `div.ui.image` as alternative HTML markup. */
wrapped: PropTypes.bool
} : {};
Image.defaultProps = {
as: 'img',
ui: true
};
Image.create = createShorthandFactory(Image, function (value) {
return { src: value };
});
export default Image;