import * as React from 'react';
import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
import { useConst } from '@uifabric/react-hooks';
export var ContextualMenuIconCustomLayoutExample = function () {
    var menuProps = useConst(function () { return ({
        shouldFocusOnMount: true,
        styles: {
            subComponentStyles: {
                menuItem: {
                    root: { height: 'unset' },
                    label: { margin: '0', fontSize: '14px', lineHeight: '18px' },
                    secondaryText: { paddingLeft: '0', textAlign: 'left', fontSize: '10px', lineHeight: '14px' },
                },
            },
        },
        items: [
            {
                key: 'Later Today',
                iconProps: { iconName: 'Clock' },
                text: 'Later Today',
                secondaryText: '7:00 PM',
                onRenderContent: renderContent,
            },
            {
                key: 'Tomorrow',
                iconProps: { iconName: 'Coffeescript' },
                text: 'Tomorrow',
                secondaryText: 'Thu. 8:00 AM',
                onRenderContent: renderContent,
            },
            {
                key: 'This Weekend',
                iconProps: { iconName: 'Vacation' },
                text: 'This Weekend',
                secondaryText: 'Sat. 10:00 AM',
                onRenderContent: renderContent,
            },
            {
                key: 'Next Week',
                iconProps: { iconName: 'Suitcase' },
                text: 'Next Week',
                secondaryText: 'Mon. 8:00 AM',
                onRenderContent: renderContent,
            },
        ],
    }); });
    return React.createElement(DefaultButton, { text: "Click for ContextualMenu", menuProps: menuProps });
};
var renderContent = function (props, defaultRenders) {
    return (React.createElement(React.Fragment, null,
        defaultRenders.renderCheckMarkIcon(props),
        defaultRenders.renderItemIcon(props),
        React.createElement("div", { style: { display: 'flex', flexDirection: 'column', margin: '8px 4px' } },
            defaultRenders.renderItemName(props),
            defaultRenders.renderSecondaryText(props)),
        defaultRenders.renderSubMenuIcon(props)));
};
//# sourceMappingURL=ContextualMenu.Icon.CustomLayout.Example.js.map