@sap-ux/ui-components
Version:
SAP UI Components Library
62 lines • 2.55 kB
JavaScript
import * as React from 'react';
import { divProperties, getNativeProps } from '@fluentui/react';
import './UIToolbar.scss';
/**
* UIToolbar component.
*
* @exports
* @class {UIToolbar}
* @extends {React.Component<UIToolbarProps, UIToolbarState>}
*/
export class UIToolbar extends React.Component {
/**
* Initializes component properties.
*
* @param props
*/
constructor(props) {
super(props);
this.onResize = () => {
const toolbarWidth = this.toolbarRef.current?.clientWidth;
const breakPointLarge = this.props.breakPointLarge ?? 800;
const breakPointMedium = this.props.breakPointMedium ?? 660;
const breakPointSmall = this.props.breakPointSmall ?? 420;
if (!toolbarWidth) {
return;
}
const breakpoints = [
{ min: breakPointLarge + 1, max: Infinity, className: 'column-wide', name: 'wide' },
{ min: breakPointMedium + 1, max: breakPointLarge, className: 'column-large', name: 'large' },
{ min: breakPointSmall, max: breakPointMedium, className: 'column-medium', name: 'medium' },
{ min: 0, max: breakPointSmall - 1, className: 'column-small', name: 'small' }
];
const match = breakpoints.find((bp) => toolbarWidth >= bp.min && toolbarWidth <= bp.max);
if (match) {
this.setState({ toolbarWidthClassName: match.className });
this.props.onResize?.(toolbarWidth, match.name);
}
};
this.state = {
toolbarWidthClassName: 'column-large'
};
this.toolbarRef = React.createRef();
this.resizeObserver = new ResizeObserver(this.onResize);
}
componentDidMount() {
this.resizeObserver.observe(this.toolbarRef.current);
this.onResize();
}
/**
* @returns {React.ReactNode}
*/
render() {
const divProps = getNativeProps(this.props, divProperties, [
'className',
'children'
]);
return (React.createElement("div", { ...divProps, tabIndex: -1, ref: this.toolbarRef, className: `ui-toolbar ${this.state.toolbarWidthClassName} ${this.props.className ? this.props.className : ''}`, role: "toolbar" },
React.createElement("div", { className: "ui-toolbar__container" },
React.createElement("div", { className: "ui-toolbar__content" }, this.props.children))));
}
}
//# sourceMappingURL=UIToolbar.js.map