@fluentui/react-northstar
Version:
A themable React component library.
190 lines (188 loc) • 7.22 kB
JavaScript
import _isNil from "lodash/isNil";
import _invoke from "lodash/invoke";
import { attachmentBehavior } from '@fluentui/accessibility';
import { compose, getElementType, mergeVariablesOverrides, useAccessibility, useStyles, useFluentContext, useTelemetry, useUnhandledProps } from '@fluentui/react-bindings';
import * as customPropTypes from '@fluentui/react-proptypes';
import * as PropTypes from 'prop-types';
import * as React from 'react';
import { createShorthandFactory, commonPropTypes, createShorthand } from '../../utils';
import { AttachmentAction } from './AttachmentAction';
import { AttachmentBody } from './AttachmentBody';
import { AttachmentDescription } from './AttachmentDescription';
import { AttachmentHeader } from './AttachmentHeader';
import { AttachmentIcon } from './AttachmentIcon';
export var attachmentClassName = 'ui-attachment';
export var attachmentProgressContainerClassName = attachmentClassName + "__progress-container";
export var attachmentProgressBarClassName = attachmentClassName + "__progress";
/**
* An Attachment represents a file or media attachment, which may contain some metadata or actions.
*/
export var Attachment = /*#__PURE__*/function () {
var Attachment = compose(function (props, ref, composeOptions) {
var context = useFluentContext();
var _useTelemetry = useTelemetry(composeOptions.displayName, context.telemetry),
setStart = _useTelemetry.setStart,
setEnd = _useTelemetry.setEnd;
setStart();
var accessibility = props.accessibility,
action = props.action,
actionable = props.actionable,
body = props.body,
className = props.className,
description = props.description,
design = props.design,
disabled = props.disabled,
header = props.header,
icon = props.icon,
onClick = props.onClick,
progress = props.progress,
styles = props.styles,
variables = props.variables;
var getA11Props = useAccessibility(accessibility, {
debugName: composeOptions.displayName,
actionHandlers: {
performClick: function performClick(e) {
if (e.currentTarget === e.target) {
e.stopPropagation();
handleClick(e);
}
}
},
mapPropsToBehavior: function mapPropsToBehavior() {
return {
actionable: actionable
};
},
rtl: context.rtl
});
var _useStyles = useStyles(composeOptions.displayName, {
className: attachmentClassName,
mapPropsToStyles: function mapPropsToStyles() {
return {
actionable: actionable || !!onClick,
disabled: disabled
};
},
mapPropsToInlineStyles: function mapPropsToInlineStyles() {
return {
className: className,
design: design,
styles: styles,
variables: variables
};
},
rtl: context.rtl,
composeOptions: composeOptions,
unstable_props: props
}),
classes = _useStyles.classes;
var slotProps = composeOptions.resolveSlotProps(props);
var ElementType = getElementType(props);
var unhandledProps = useUnhandledProps(composeOptions.handledProps, props);
var handleClick = function handleClick(e) {
if (disabled) {
e.preventDefault();
return;
}
_invoke(props, 'onClick', e, props);
};
var element = getA11Props.unstable_wrapWithFocusZone( /*#__PURE__*/React.createElement(ElementType, getA11Props('root', Object.assign({
className: classes.root,
onClick: handleClick,
ref: ref
}, unhandledProps)), createShorthand(composeOptions.slots.icon, icon, {
defaultProps: function defaultProps() {
return slotProps.icon;
},
overrideProps: function overrideProps(predefinedProps) {
return {
variables: mergeVariablesOverrides(variables, predefinedProps.variables)
};
}
}), (header || description) && createShorthand(composeOptions.slots.body, body, {
defaultProps: function defaultProps() {
return slotProps.body;
},
overrideProps: function overrideProps(predefinedProps) {
return {
content: /*#__PURE__*/React.createElement(React.Fragment, null, createShorthand(composeOptions.slots.header, header, {
defaultProps: function defaultProps() {
return slotProps.header;
},
overrideProps: function overrideProps(predefinedProps) {
return {
variables: mergeVariablesOverrides(variables, predefinedProps.variables)
};
}
}), createShorthand(composeOptions.slots.description, description, {
defaultProps: function defaultProps() {
return slotProps.description;
},
overrideProps: function overrideProps(predefinedProps) {
return {
variables: mergeVariablesOverrides(variables, predefinedProps.variables)
};
}
})),
variables: mergeVariablesOverrides(variables, predefinedProps.variables)
};
}
}), createShorthand(composeOptions.slots.action, action, {
defaultProps: function defaultProps() {
return slotProps.action;
},
overrideProps: function overrideProps(predefinedProps) {
return {
variables: mergeVariablesOverrides(variables, predefinedProps.variables)
};
}
}), !_isNil(progress) && /*#__PURE__*/React.createElement("div", {
className: attachmentProgressContainerClassName
}, /*#__PURE__*/React.createElement("div", {
className: attachmentProgressBarClassName,
style: {
width: progress + "%"
}
}))));
setEnd();
return element;
}, {
className: attachmentClassName,
displayName: 'Attachment',
slots: {
action: AttachmentAction,
body: AttachmentBody,
description: AttachmentDescription,
header: AttachmentHeader,
icon: AttachmentIcon
},
handledProps: ['accessibility', 'action', 'actionable', 'as', 'body', 'children', 'className', 'description', 'design', 'header', 'icon', 'onClick', 'progress', 'styles', 'variables']
});
Attachment.create = createShorthandFactory({
Component: Attachment,
mappedProp: 'header'
});
Attachment.propTypes = Object.assign({}, commonPropTypes.createCommon({
content: false
}), {
action: customPropTypes.itemShorthand,
actionable: PropTypes.bool,
body: customPropTypes.itemShorthand,
description: customPropTypes.itemShorthand,
header: customPropTypes.itemShorthand,
icon: customPropTypes.shorthandAllowingChildren,
onClick: PropTypes.func,
progress: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
});
Attachment.defaultProps = {
accessibility: attachmentBehavior,
body: {}
};
Attachment.Action = AttachmentAction;
Attachment.Body = AttachmentBody;
Attachment.Description = AttachmentDescription;
Attachment.Header = AttachmentHeader;
Attachment.Icon = AttachmentIcon;
return Attachment;
}();
//# sourceMappingURL=Attachment.js.map