UNPKG

@fluentui/react-northstar

Version:
198 lines (195 loc) 8.95 kB
"use strict"; var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); exports.__esModule = true; exports.attachmentProgressContainerClassName = exports.attachmentProgressBarClassName = exports.attachmentClassName = exports.Attachment = void 0; var _isNil2 = _interopRequireDefault(require("lodash/isNil")); var _invoke2 = _interopRequireDefault(require("lodash/invoke")); var _accessibility = require("@fluentui/accessibility"); var _reactBindings = require("@fluentui/react-bindings"); var customPropTypes = _interopRequireWildcard(require("@fluentui/react-proptypes")); var PropTypes = _interopRequireWildcard(require("prop-types")); var React = _interopRequireWildcard(require("react")); var _utils = require("../../utils"); var _AttachmentAction = require("./AttachmentAction"); var _AttachmentBody = require("./AttachmentBody"); var _AttachmentDescription = require("./AttachmentDescription"); var _AttachmentHeader = require("./AttachmentHeader"); var _AttachmentIcon = require("./AttachmentIcon"); function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); } function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; } var attachmentClassName = 'ui-attachment'; exports.attachmentClassName = attachmentClassName; var attachmentProgressContainerClassName = attachmentClassName + "__progress-container"; exports.attachmentProgressContainerClassName = attachmentProgressContainerClassName; var attachmentProgressBarClassName = attachmentClassName + "__progress"; /** * An Attachment represents a file or media attachment, which may contain some metadata or actions. */ exports.attachmentProgressBarClassName = attachmentProgressBarClassName; var Attachment = (0, _reactBindings.compose)(function (props, ref, composeOptions) { var context = (0, _reactBindings.useFluentContext)(); var _useTelemetry = (0, _reactBindings.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 = (0, _reactBindings.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 = (0, _reactBindings.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 = (0, _reactBindings.getElementType)(props); var unhandledProps = (0, _reactBindings.useUnhandledProps)(composeOptions.handledProps, props); var handleClick = function handleClick(e) { if (disabled) { e.preventDefault(); return; } (0, _invoke2.default)(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)), (0, _utils.createShorthand)(composeOptions.slots.icon, icon, { defaultProps: function defaultProps() { return slotProps.icon; }, overrideProps: function overrideProps(predefinedProps) { return { variables: (0, _reactBindings.mergeVariablesOverrides)(variables, predefinedProps.variables) }; } }), (header || description) && (0, _utils.createShorthand)(composeOptions.slots.body, body, { defaultProps: function defaultProps() { return slotProps.body; }, overrideProps: function overrideProps(predefinedProps) { return { content: /*#__PURE__*/React.createElement(React.Fragment, null, (0, _utils.createShorthand)(composeOptions.slots.header, header, { defaultProps: function defaultProps() { return slotProps.header; }, overrideProps: function overrideProps(predefinedProps) { return { variables: (0, _reactBindings.mergeVariablesOverrides)(variables, predefinedProps.variables) }; } }), (0, _utils.createShorthand)(composeOptions.slots.description, description, { defaultProps: function defaultProps() { return slotProps.description; }, overrideProps: function overrideProps(predefinedProps) { return { variables: (0, _reactBindings.mergeVariablesOverrides)(variables, predefinedProps.variables) }; } })), variables: (0, _reactBindings.mergeVariablesOverrides)(variables, predefinedProps.variables) }; } }), (0, _utils.createShorthand)(composeOptions.slots.action, action, { defaultProps: function defaultProps() { return slotProps.action; }, overrideProps: function overrideProps(predefinedProps) { return { variables: (0, _reactBindings.mergeVariablesOverrides)(variables, predefinedProps.variables) }; } }), !(0, _isNil2.default)(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.AttachmentAction, body: _AttachmentBody.AttachmentBody, description: _AttachmentDescription.AttachmentDescription, header: _AttachmentHeader.AttachmentHeader, icon: _AttachmentIcon.AttachmentIcon }, handledProps: ['accessibility', 'action', 'actionable', 'as', 'body', 'children', 'className', 'description', 'design', 'header', 'icon', 'onClick', 'progress', 'styles', 'variables'] }); exports.Attachment = Attachment; Attachment.create = (0, _utils.createShorthandFactory)({ Component: Attachment, mappedProp: 'header' }); Attachment.propTypes = Object.assign({}, _utils.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: _accessibility.attachmentBehavior, body: {} }; Attachment.Action = _AttachmentAction.AttachmentAction; Attachment.Body = _AttachmentBody.AttachmentBody; Attachment.Description = _AttachmentDescription.AttachmentDescription; Attachment.Header = _AttachmentHeader.AttachmentHeader; Attachment.Icon = _AttachmentIcon.AttachmentIcon; //# sourceMappingURL=Attachment.js.map