@fluentui/react-northstar
Version:
A themable React component library.
199 lines (197 loc) • 7.23 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import * as React from 'react';
import * as PropTypes from 'prop-types';
import cx from 'classnames';
import { commonPropTypes, rtlTextContainer, createShorthandFactory } from '../../utils';
import { useStyles, getElementType, useFluentContext, useUnhandledProps, useAccessibility, useTelemetry } from '@fluentui/react-bindings';
export var layoutClassName = 'ui-layout';
export var layoutSlotClassNames = {
start: layoutClassName + "__start",
main: layoutClassName + "__main",
end: layoutClassName + "__end",
gap: layoutClassName + "__gap",
reducedStart: layoutClassName + "--reduced__start",
reducedMain: layoutClassName + "--reduced__main",
reducedEnd: layoutClassName + "--reduced__end"
};
/**
* (DEPRECATED) A layout is a utility for arranging the content of a component.
*/
export var Layout = /*#__PURE__*/function () {
var Layout = function Layout(props) {
var context = useFluentContext();
var _useTelemetry = useTelemetry(Layout.displayName, context.telemetry),
setStart = _useTelemetry.setStart,
setEnd = _useTelemetry.setEnd;
setStart();
var reducing = props.reducing,
disappearing = props.disappearing,
renderStartArea = props.renderStartArea,
renderMainArea = props.renderMainArea,
renderEndArea = props.renderEndArea,
renderGap = props.renderGap,
alignItems = props.alignItems,
debug = props.debug,
gap = props.gap,
justifyItems = props.justifyItems,
main = props.main,
mainSize = props.mainSize,
end = props.end,
endSize = props.endSize,
start = props.start,
startSize = props.startSize,
vertical = props.vertical,
className = props.className,
design = props.design,
styles = props.styles,
variables = props.variables;
var ElementType = getElementType(props);
var unhandledProps = useUnhandledProps(Layout.handledProps, props);
var getA11yProps = useAccessibility(props.accessibility, {
debugName: Layout.displayName,
rtl: context.rtl
});
var _useStyles = useStyles(Layout.displayName, {
className: layoutClassName,
mapPropsToStyles: function mapPropsToStyles() {
return {
alignItems: alignItems,
debug: debug,
gap: gap,
justifyItems: justifyItems,
hasMain: !!main,
mainSize: mainSize,
hasEnd: !!end,
endSize: endSize,
hasStart: !!start,
startSize: startSize,
vertical: vertical
};
},
mapPropsToInlineStyles: function mapPropsToInlineStyles() {
return {
className: className,
design: design,
styles: styles,
variables: variables
};
},
rtl: context.rtl
}),
classes = _useStyles.classes;
var startArea = renderStartArea(Object.assign({}, props, {
classes: classes
}));
var mainArea = renderMainArea(Object.assign({}, props, {
classes: classes
}));
var endArea = renderEndArea(Object.assign({}, props, {
classes: classes
}));
if (!startArea && !mainArea && !endArea) {
setEnd();
return /*#__PURE__*/React.createElement(ElementType, getA11yProps('root', Object.assign({
className: classes.root
}, unhandledProps)));
}
var activeAreas = [startArea, mainArea, endArea].filter(Boolean);
var isSingleArea = activeAreas.length === 1;
// disappear: render the content directly without wrapping layout or area elements
if (disappearing && isSingleArea) {
setEnd();
return start || main || end;
}
if (reducing && isSingleArea) {
var composedClasses = cx(classes.root, startArea && layoutSlotClassNames.reducedStart, mainArea && layoutSlotClassNames.reducedMain, endArea && layoutSlotClassNames.reducedEnd);
setEnd();
return /*#__PURE__*/React.createElement(ElementType, getA11yProps('root', Object.assign({
className: composedClasses
}, unhandledProps)), start || main || end);
}
setEnd();
return /*#__PURE__*/React.createElement(ElementType, getA11yProps('root', Object.assign({
className: classes.root
}, unhandledProps)), startArea, startArea && mainArea && renderGap(Object.assign({}, props, {
classes: classes
})), mainArea, (startArea || mainArea) && endArea && renderGap(Object.assign({}, props, {
classes: classes
})), endArea);
};
Layout.displayName = 'Layout';
Layout.propTypes = Object.assign({}, commonPropTypes.createCommon({
accessibility: false,
children: false,
content: false
}), {
debug: PropTypes.bool,
renderStartArea: PropTypes.func,
renderMainArea: PropTypes.func,
renderEndArea: PropTypes.func,
renderGap: PropTypes.func,
rootCSS: PropTypes.object,
start: PropTypes.any,
startCSS: PropTypes.object,
startSize: PropTypes.string,
main: PropTypes.any,
mainCSS: PropTypes.object,
mainSize: PropTypes.string,
end: PropTypes.any,
endCSS: PropTypes.object,
endSize: PropTypes.string,
justifyItems: PropTypes.any,
alignItems: PropTypes.any,
gap: PropTypes.string,
reducing: PropTypes.bool,
disappearing: PropTypes.bool,
vertical: PropTypes.bool
});
Layout.defaultProps = {
startSize: 'auto',
mainSize: '1fr',
endSize: 'auto',
// TODO: when an area is another Layout, do not wrap them in an extra div
// TODO: option 1) higher value layouts could use start={Layout.create(start)} to ensure Areas are layout root
renderStartArea: function renderStartArea(_ref) {
var start = _ref.start,
classes = _ref.classes;
return start && /*#__PURE__*/React.createElement("div", _extends({
className: cx(layoutSlotClassNames.start, classes.start)
}, rtlTextContainer.getAttributes({
forElements: [start]
})), start);
},
renderMainArea: function renderMainArea(_ref2) {
var main = _ref2.main,
classes = _ref2.classes;
return main && /*#__PURE__*/React.createElement("div", _extends({
className: cx(layoutSlotClassNames.main, classes.main)
}, rtlTextContainer.getAttributes({
forElements: [main]
})), main);
},
renderEndArea: function renderEndArea(_ref3) {
var end = _ref3.end,
classes = _ref3.classes;
return end && /*#__PURE__*/React.createElement("div", _extends({
className: cx(layoutSlotClassNames.end, classes.end)
}, rtlTextContainer.getAttributes({
forElements: [end]
})), end);
},
// Heads up!
// IE11 Doesn't support grid-gap, insert virtual columns instead
renderGap: function renderGap(_ref4) {
var gap = _ref4.gap,
classes = _ref4.classes;
return gap && /*#__PURE__*/React.createElement("span", {
className: cx(layoutSlotClassNames.gap, classes.gap)
});
}
};
Layout.handledProps = Object.keys(Layout.propTypes);
Layout.create = createShorthandFactory({
Component: Layout
});
return Layout;
}();
//# sourceMappingURL=Layout.js.map