@mikezimm/fps-library-v2/lib/components/molecules/SideGlance/SideGlance.js

Library of reusable typescript/javascript functions, interfaces and constants

import * as React from 'react';
import { IconButton } from '@fluentui/react/lib/Button';
// import './SideGlance.css';
require('@mikezimm/fps-styles/dist/SideGlance.css');
export class SideGlance extends React.Component {
    constructor(props) {
        var _a;
        super(props);
        this.toggleCollapse = () => {
            this.setState((prevState) => ({ collapsed: !prevState.collapsed }));
        };
        this.state = {
            collapsed: (_a = this.props.initiallyCollapsed) !== null && _a !== void 0 ? _a : true,
        };
    }
    render() {
        const { collapsed } = this.state;
        const { collapsedWidth, expandedWidth, fadeStart, title, children, roundedBorder, containerStyles = {}, } = this.props;
        const containerStyle = {
            width: collapsed ? `${collapsedWidth}px` : 'auto',
            // Added this so that in rare cases, it's not collapsed to much
            minWidth: `${collapsedWidth}px`,
            maxWidth: `${expandedWidth}px`,
            display: 'block', ...containerStyles
        };
        // const containerClass = `sideGlance-container ${collapsed ? 'sideGlance-collapsed' : 'sideGlance-expanded'}${roundedBorder ? '' : ' noRounded'}`;
        const containerClass = `sideGlance-container ${collapsed ? 'sideGlance-collapsed' : 'sideGlance-expanded'} ${roundedBorder === false ? 'noRounded' : ''}`;
        return (React.createElement("div", { className: containerClass, style: containerStyle },
            React.createElement("div", { className: 'sideGlance-header', onClick: this.toggleCollapse },
                React.createElement("span", { className: 'sideGlance-title' }, title || '\u00A0'),
                React.createElement(IconButton, { iconProps: { iconName: collapsed ? 'ChevronRight' : 'ChevronLeft' }, title: collapsed ? 'Expand' : 'Collapse', className: 'sideGlance-toggleButton' })),
            React.createElement("div", { className: 'sideGlance-content', style: { whiteSpace: collapsed ? 'nowrap' : 'normal' } }, children),
            collapsed && (React.createElement("div", { className: 'sideGlance-fade', style: {
                    width: `${collapsedWidth}px`,
                    background: `linear-gradient(to right, rgba(255,255,255,0) ${fadeStart}px, rgba(255,255,255,1) 100%)`,
                } }))));
    }
}
SideGlance.defaultProps = {
    collapsedWidth: 79,
    expandedWidth: 450,
    fadeStart: 40,
    initiallyCollapsed: true,
    roundedBorder: true, // default to true
};
//# sourceMappingURL=SideGlance.js.map