@fluentui/react-northstar
Version:
A themable React component library.
206 lines (203 loc) • 8.56 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.layoutSlotClassNames = exports.layoutClassName = exports.Layout = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var React = _interopRequireWildcard(require("react"));
var PropTypes = _interopRequireWildcard(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _utils = require("../../utils");
var _reactBindings = require("@fluentui/react-bindings");
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 layoutClassName = 'ui-layout';
exports.layoutClassName = layoutClassName;
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"
};
exports.layoutSlotClassNames = layoutSlotClassNames;
/**
* (DEPRECATED) A layout is a utility for arranging the content of a component.
*/
var Layout = function Layout(props) {
var context = (0, _reactBindings.useFluentContext)();
var _useTelemetry = (0, _reactBindings.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 = (0, _reactBindings.getElementType)(props);
var unhandledProps = (0, _reactBindings.useUnhandledProps)(Layout.handledProps, props);
var getA11yProps = (0, _reactBindings.useAccessibility)(props.accessibility, {
debugName: Layout.displayName,
rtl: context.rtl
});
var _useStyles = (0, _reactBindings.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 = (0, _classnames.default)(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);
};
exports.Layout = Layout;
Layout.displayName = 'Layout';
Layout.propTypes = Object.assign({}, _utils.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", (0, _extends2.default)({
className: (0, _classnames.default)(layoutSlotClassNames.start, classes.start)
}, _utils.rtlTextContainer.getAttributes({
forElements: [start]
})), start);
},
renderMainArea: function renderMainArea(_ref2) {
var main = _ref2.main,
classes = _ref2.classes;
return main && /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
className: (0, _classnames.default)(layoutSlotClassNames.main, classes.main)
}, _utils.rtlTextContainer.getAttributes({
forElements: [main]
})), main);
},
renderEndArea: function renderEndArea(_ref3) {
var end = _ref3.end,
classes = _ref3.classes;
return end && /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
className: (0, _classnames.default)(layoutSlotClassNames.end, classes.end)
}, _utils.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: (0, _classnames.default)(layoutSlotClassNames.gap, classes.gap)
});
}
};
Layout.handledProps = Object.keys(Layout.propTypes);
Layout.create = (0, _utils.createShorthandFactory)({
Component: Layout
});
//# sourceMappingURL=Layout.js.map