@arche-mc2/arche-controls
Version:
We know that there are a ton of react UI library projects to choose from. Our hope with this one is to provide the next generation of react components that you can use to bootstrap your next project, or as a reference for building a UIKit. Read on to get
842 lines • 37.4 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var addon_actions_1 = require("@storybook/addon-actions");
var UpMenu_1 = require("./UpMenu");
var utils_1 = require("../../../Common/utils");
var UpButton_1 = require("../../Inputs/Button/UpButton");
var typestyle_1 = require("typestyle");
var SvgIcon_1 = require("../SvgIcon");
var Ligne_1 = require("../../Display/Ligne");
var colorMap_1 = require("../../../Common/theming/colorMap");
var Box_1 = require("../../Containers/Box");
var Tooltip_1 = require("../Tooltip");
var IconsM = require("../Icons/materialinear");
var stories_1 = require("../../../Common/stories");
var device_1 = require("../../../Common/utils/device");
var logoSvg = require('./sources/logo-up-square.svg');
exports.default = {
title: 'Components/Display/UpMenu',
decorators: [stories_1.getRootContainer('UpMenu')],
component: UpMenu_1.UpMenu,
};
var resetMenuSelection = function (menu) {
if (utils_1.isEmpty(menu)) {
return [];
}
return menu.map(function (m) { return (tslib_1.__assign(tslib_1.__assign({}, m), { childMenuItems: resetMenuSelection(m.childMenuItems), isSelected: false })); });
};
var hasItemSelected = function (uri, menu) {
return !utils_1.isEmpty(menu) && menu.find(function (i) { return (i.uri != null && uri === i.uri) || hasItemSelected(uri, i.childMenuItems); }) != null;
};
var setMenuSelection = function (uri, menu, prev) {
if (utils_1.isEmpty(menu)) {
return [];
}
return menu.map(function (m, index) { return (tslib_1.__assign(tslib_1.__assign({}, m), { childMenuItems: setMenuSelection(uri, m.childMenuItems), isSelected: m.uri === uri || hasItemSelected(uri, m.childMenuItems) })); });
};
var defaultMenu = [
{
title: 'Stack',
icon: function (propsIcon) { return React.createElement(SvgIcon_1.default, { iconHtml: logoSvg, width: 22, height: 22 }); },
isSelected: false,
isVisible: true,
uri: '/stack',
childMenuItems: [
{
title: 'Stack Option 1',
icon: 'weather-rain',
isSelected: false,
isVisible: true,
uri: '/stack/option1',
childMenuItems: [],
},
{
title: 'Stack Option 2',
icon: 'weather-snow',
isSelected: false,
isVisible: true,
uri: '/stack/option2',
childMenuItems: [],
},
{
title: 'Stack Option 3',
icon: 'weather-sunset',
isSelected: false,
isVisible: true,
uri: '/stack/option3',
childMenuItems: [],
},
],
},
{
title: 'Smart',
icon: 'smartphone',
isSelected: false,
isVisible: true,
uri: '/smart',
childMenuItems: [],
},
{ isSeparator: true }, {
title: 'Up',
icon: function (propsIcon) { return React.createElement(SvgIcon_1.default, { iconHtml: logoSvg, width: 22, height: 22 }); },
isSelected: false,
isVisible: true,
uri: '/Up',
childMenuItems: [
{
title: 'Up Option 1',
icon: 'weather-rain',
isSelected: false,
isVisible: true,
uri: '/Up/option1',
childMenuItems: [],
},
{
title: 'Up Option 2',
icon: 'weather-snow',
isSelected: false,
isVisible: true,
uri: '/Up/option2',
childMenuItems: [],
},
{
title: 'Up Option 3',
icon: 'weather-sunset',
isSelected: false,
isVisible: true,
uri: '/Up/option3',
childMenuItems: [],
},
],
},
{
title: 'Settings',
icon: 'settings',
isSelected: false,
isVisible: true,
uri: '/settings',
childMenuItems: [],
},
{ isSeparator: true },
{
render: function (item, propsMenu, state) {
return (React.createElement(UpButton_1.default, { intent: 'primary', onClick: function (e) {
addon_actions_1.action('Command');
}, width: state.minified ? 'icon' : 'full', height: 'large', actionType: 'briefcase' }, 'Commander'));
},
},
];
var _General = function (props) {
var _a = React.useState(null), uri = _a[0], setUri = _a[1];
var _b = React.useState(defaultMenu), menu = _b[0], setMenu = _b[1];
var footerStyle = typestyle_1.style({
color: '#9B9B9B',
fontFamily: 'Roboto',
fontSize: '12px',
lineHeight: '18px',
textAlign: 'center',
whiteSpace: 'pre-line',
});
return (React.createElement(React.Fragment, null,
React.createElement("span", { "data-testid": "uri", style: { display: 'none' } }, uri),
React.createElement(UpMenu_1.default, { className: 'test_de_class', onMinifiedChange: function (minified) { addon_actions_1.action("Menu minified: " + minified); }, onClick: function (uri) {
setMenu(function (previousMenu) { return setMenuSelection(uri, menu, previousMenu); });
setUri(uri);
return false;
}, minified: props.minified, title: props.title, blocked: props.blocked, menuItems: menu, width: props.width, footer: function (props, state) {
return (React.createElement(React.Fragment, null,
!state.minified &&
React.createElement(Box_1.default, { alignItems: 'center', justifyContent: 'center', style: { width: '100%', height: '100%' } },
React.createElement("div", { className: footerStyle }, "Copyright. Tous droits r\u00E9serv\u00E9s @Up 2021"),
React.createElement("a", { className: footerStyle, href: "https://up.coop/donnees-personnelles", target: "_blank" }, "Conditions g\u00E9n\u00E9rales"),
React.createElement("a", { className: footerStyle, href: "https://up.coop/mentions-legales", target: "_blank" }, "Mentions l\u00E9gales")),
state.minified &&
React.createElement(Tooltip_1.default, { place: 'top', content: 'Copyright.Tous droits réservés Up 2019' },
React.createElement(Box_1.default, { alignItems: 'center', justifyContent: 'center', style: { width: '100%', height: '100%' } },
React.createElement(SvgIcon_1.default, { color: colorMap_1.default.disabledFg, iconName: 'alert-circle' })))));
} })));
};
exports.General = _General.bind({});
exports.General.args = {
title: 'Title',
minified: false,
blocked: false,
width: 300,
};
exports.GeneralWithCustomHeader = function (props) {
var _a = React.useState(null), uri = _a[0], setUri = _a[1];
var _b = React.useState(defaultMenu), menu = _b[0], setMenu = _b[1];
var footerStyle = typestyle_1.style({
color: '#9B9B9B',
fontFamily: 'Roboto',
fontSize: '12px',
lineHeight: '18px',
textAlign: 'center',
whiteSpace: 'pre-line',
});
return (React.createElement(React.Fragment, null,
React.createElement("span", { "data-testid": "uri", style: { display: 'none' } }, uri),
React.createElement(UpMenu_1.default, { onMinifiedChange: function (minified) { return addon_actions_1.action("Menu minified: " + minified); }, onClick: function (uri) {
setMenu(function (previousMenu) { return setMenuSelection(uri, menu, previousMenu); });
setUri(uri);
return false;
}, menuItems: menu, footer: function (props, state) {
return (React.createElement(React.Fragment, null,
!state.minified &&
React.createElement(Box_1.default, { alignItems: 'center', justifyContent: 'center', style: { width: '100%', height: '100%' } },
React.createElement("div", { className: footerStyle }, "Copyright. Tous droits r\u00E9serv\u00E9s Up 2019"),
React.createElement("a", { className: footerStyle, href: "https://up.coop/donnees-personnelles", target: "_blank" }, "Conditions g\u00E9n\u00E9rales"),
React.createElement("a", { className: footerStyle, href: "https://up.coop/mentions-legales", target: "_blank" }, "Mentions l\u00E9gales")),
state.minified &&
React.createElement(Tooltip_1.default, { place: 'top', content: 'Copyright.Tous droits réservés Up 2019' },
React.createElement(Box_1.default, { alignItems: 'center', justifyContent: 'center', style: { width: '100%', height: '100%' } },
React.createElement(SvgIcon_1.default, { color: colorMap_1.default.disabledFg, iconName: 'alert-circle' })))));
}, header: function (props, state) {
return (React.createElement(Box_1.default, { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', style: { height: '100%' } },
!state.minified &&
React.createElement(SvgIcon_1.default, { color: colorMap_1.default.white, iconName: 'check' }),
!state.minified &&
React.createElement(Ligne_1.default, { color: colorMap_1.default.primary, className: typestyle_1.style({ marginLeft: '8px' }) }, "Acceptation de titre")));
} })));
};
exports.Large = function (props) {
var defaultMenu = [
{
title: 'Stack',
icon: function (propsIcon) { return React.createElement(SvgIcon_1.default, { iconHtml: logoSvg, width: 22, height: 22 }); },
isSelected: false,
isVisible: true,
uri: '/stack',
childMenuItems: [
{
title: 'Option 1',
icon: 'weather-rain',
isSelected: false,
isVisible: true,
uri: '/stack/option1',
childMenuItems: [],
},
{
title: 'Option 2',
icon: 'weather-snow',
isSelected: false,
isVisible: true,
uri: '/stack/option2',
childMenuItems: [],
},
{
title: 'Option 3',
icon: 'weather-sunset',
isSelected: false,
isVisible: true,
uri: '/stack/option3',
childMenuItems: [],
},
],
},
{
title: 'Smart',
icon: 'smartphone',
isSelected: false,
isVisible: true,
uri: '/smart',
childMenuItems: [],
},
{
title: 'Up',
icon: function (propsIcon) { return React.createElement(SvgIcon_1.default, { iconHtml: logoSvg, width: 22, height: 22 }); },
isSelected: false,
isVisible: true,
uri: '/Up',
childMenuItems: [
{
title: 'Option 1',
icon: 'weather-rain',
isSelected: false,
isVisible: true,
uri: '/Up/option1',
childMenuItems: [],
},
{
title: 'Option 2',
icon: 'weather-snow',
isSelected: false,
isVisible: true,
uri: '/Up/option2',
childMenuItems: [],
},
{
title: 'Option 3',
icon: 'weather-sunset',
isSelected: false,
isVisible: true,
uri: '/Up/option3',
childMenuItems: [],
},
],
},
{ isSeparator: true },
{
title: 'Settings',
icon: 'settings',
isSelected: false,
isVisible: true,
uri: '/settings',
childMenuItems: [],
},
{ isSeparator: true }, {
title: 'Stack',
icon: function (propsIcon) { return React.createElement(SvgIcon_1.default, { iconHtml: logoSvg, width: 22, height: 22 }); },
isSelected: false,
isVisible: true,
uri: '/stack',
childMenuItems: [
{
title: 'Option 1',
icon: 'weather-rain',
isSelected: false,
isVisible: true,
uri: '/stack/option1',
childMenuItems: [],
},
{
title: 'Option 2',
icon: 'weather-snow',
isSelected: false,
isVisible: true,
uri: '/stack/option2',
childMenuItems: [],
},
{
title: 'Option 3',
icon: 'weather-sunset',
isSelected: false,
isVisible: true,
uri: '/stack/option3',
childMenuItems: [],
},
],
},
{
render: function (item, propsMenu, state) {
return (React.createElement(UpButton_1.default, { intent: 'primary', onClick: function (e) {
addon_actions_1.action('Command');
}, width: state.minified ? 'icon' : 'full', height: 'large', actionType: 'briefcase' }, 'Commander'));
},
}, {
title: 'Assignment Late',
icon: function (propsIcon) { return React.createElement(IconsM.AssignmentLate, { color: colorMap_1.default.primary }); },
isSelected: false,
isVisible: true,
uri: '/AssignmentLate',
childMenuItems: [
{
title: 'Option 1',
icon: 'weather-rain',
isSelected: false,
isVisible: true,
uri: '/AssignmentLate/option1',
childMenuItems: [],
},
{
title: 'Option 2',
icon: 'weather-snow',
isSelected: false,
isVisible: true,
uri: '/AssignmentLate/option2',
childMenuItems: [],
},
{
title: 'Option 3',
icon: 'weather-sunset',
isSelected: false,
isVisible: true,
uri: '/AssignmentLate/option3',
childMenuItems: [],
},
],
},
{
title: 'Other',
icon: function (propsIcon) { return React.createElement(SvgIcon_1.default, { iconHtml: logoSvg, width: 22, height: 22 }); },
isSelected: false,
isVisible: true,
uri: '/Other',
childMenuItems: [
{
title: 'Option 1',
icon: 'weather-rain',
isSelected: false,
isVisible: true,
uri: '/Other/option1',
childMenuItems: [],
},
{
title: 'Option 2',
icon: 'weather-snow',
isSelected: false,
isVisible: true,
uri: '/Other/option2',
childMenuItems: [],
},
{
title: 'Option 3',
icon: 'weather-sunset',
isSelected: false,
isVisible: true,
uri: '/Other/option3',
childMenuItems: [],
},
],
}, {
title: 'Logo',
icon: function (propsIcon) { return React.createElement(SvgIcon_1.default, { iconHtml: logoSvg, width: 22, height: 22 }); },
isSelected: false,
isVisible: true,
uri: '/Logo',
childMenuItems: [
{
title: 'Option 1',
icon: 'weather-rain',
isSelected: false,
isVisible: true,
uri: '/Logo/option1',
childMenuItems: [],
},
{
title: 'Option 2',
icon: 'weather-snow',
isSelected: false,
isVisible: true,
uri: '/Logo/option2',
childMenuItems: [],
},
{
title: 'Option 3',
icon: 'weather-sunset',
isSelected: false,
isVisible: true,
uri: '/stack/option3',
childMenuItems: [],
},
],
},
{
title: 'Rain',
icon: function (propsIcon) { return React.createElement(IconsM.LcloudRain, { color: colorMap_1.default.primary }); },
isSelected: false,
isVisible: true,
uri: '/Rain',
childMenuItems: [
{
title: 'Option 1',
icon: 'weather-rain',
isSelected: false,
isVisible: true,
uri: '/Rain/option1',
childMenuItems: [],
},
{
title: 'Option 2',
icon: 'weather-snow',
isSelected: false,
isVisible: true,
uri: '/Rain/option2',
childMenuItems: [],
},
{
title: 'Option 3',
icon: 'weather-sunset',
isSelected: false,
isVisible: true,
uri: '/Rain/option3',
childMenuItems: [],
},
],
},
{
title: 'Accessible',
icon: function (propsIcon) { return React.createElement(IconsM.Accessible, { color: colorMap_1.default.primary }); },
isSelected: false,
isVisible: true,
uri: '/Accessible',
childMenuItems: [
{
title: 'Option 1',
icon: 'weather-rain',
isSelected: false,
isVisible: true,
uri: '/Accessible/option1',
childMenuItems: [],
},
{
title: 'Option 2',
icon: 'weather-snow',
isSelected: false,
isVisible: true,
uri: '/Accessible/option2',
childMenuItems: [],
},
{
title: 'Option 3',
icon: 'weather-sunset',
isSelected: false,
isVisible: true,
uri: '/Accessible/option3',
childMenuItems: [],
},
],
},
{
title: 'Account Balance',
icon: function (propsIcon) { return React.createElement(IconsM.AccountBalance, { color: colorMap_1.default.primary }); },
isSelected: false,
isVisible: true,
uri: '/AccountBalance',
childMenuItems: [
{
title: 'Option 1',
icon: 'weather-rain',
isSelected: false,
isVisible: true,
uri: '/AccountBalance/option1',
childMenuItems: [],
},
{
title: 'Option 2',
icon: 'weather-snow',
isSelected: false,
isVisible: true,
uri: '/AccountBalance/option2',
childMenuItems: [],
},
{
title: 'Option 3',
icon: 'weather-sunset',
isSelected: false,
isVisible: true,
uri: '/AccountBalance/option3',
childMenuItems: [],
},
],
},
{
title: 'Account Box',
icon: function (propsIcon) { return React.createElement(IconsM.AccountBox, { color: colorMap_1.default.primary }); },
isSelected: false,
isVisible: true,
uri: '/AccountBox',
childMenuItems: [
{
title: 'Option 1',
icon: 'weather-rain',
isSelected: false,
isVisible: true,
uri: '/AccountBox/option1',
childMenuItems: [],
},
{
title: 'Option 2',
icon: 'weather-snow',
isSelected: false,
isVisible: true,
uri: '/AccountBox/option2',
childMenuItems: [],
},
{
title: 'Option 3',
icon: 'weather-sunset',
isSelected: false,
isVisible: true,
uri: '/AccountBox/option3',
childMenuItems: [],
},
],
},
];
var _a = React.useState(defaultMenu), menu = _a[0], setMenu = _a[1];
var footerStyle = typestyle_1.style({
color: '#9B9B9B',
fontFamily: 'Roboto',
fontSize: '12px',
lineHeight: '18px',
textAlign: 'center',
whiteSpace: 'pre-line',
});
return (React.createElement(UpMenu_1.default, { onMinifiedChange: function (minified) { return addon_actions_1.action("Menu minified: " + minified); }, onClick: function (uri) {
var newMenu = function (prev) { return setMenuSelection(uri, menu, prev); };
setMenu(function (previousMenu) { return newMenu(previousMenu); });
return false;
}, menuItems: menu, footer: function (props, state) {
return (React.createElement(React.Fragment, null,
!state.minified &&
React.createElement(Box_1.default, { alignItems: 'center', justifyContent: 'center', style: { width: '100%', height: '100%' } },
React.createElement("div", { className: footerStyle }, "Copyright. Tous droits r\u00E9serv\u00E9s Up 2019"),
React.createElement("a", { className: footerStyle, href: "https://up.coop/donnees-personnelles", target: "_blank" }, "Conditions g\u00E9n\u00E9rales"),
React.createElement("a", { className: footerStyle, href: "https://up.coop/mentions-legales", target: "_blank" }, "Mentions l\u00E9gales")),
state.minified &&
React.createElement(Tooltip_1.default, { place: 'top', content: 'Copyright.Tous droits réservés Up 2019' },
React.createElement(Box_1.default, { alignItems: 'center', justifyContent: 'center', style: { width: '100%', height: '100%' } },
React.createElement(SvgIcon_1.default, { color: colorMap_1.default.disabledFg, iconName: 'alert-circle' })))));
}, header: function (props, state) {
return (React.createElement(Box_1.default, { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', style: { height: '100%' } },
!state.minified &&
React.createElement(SvgIcon_1.default, { color: colorMap_1.default.white, iconName: 'check' }),
!state.minified &&
React.createElement(Ligne_1.default, { color: colorMap_1.default.primary, className: typestyle_1.style({ marginLeft: '8px' }) }, "Acceptation de titre")));
} }));
};
exports.CustomStyles = function (props) {
var defaultMenu = [
{
title: 'Stack',
icon: function (propsIcon) { return React.createElement(SvgIcon_1.default, { iconHtml: logoSvg, width: 22, height: 22 }); },
isSelected: false,
isVisible: true,
uri: '/stack',
childMenuItems: [
{
title: 'Option 1',
icon: 'weather-rain',
isSelected: false,
isVisible: true,
uri: '/stack/option1',
childMenuItems: [],
},
{
title: 'Option 2',
icon: 'weather-snow',
isSelected: false,
isVisible: true,
uri: '/stack/option2',
childMenuItems: [],
},
{
title: 'Option 3',
icon: 'weather-sunset',
isSelected: false,
isVisible: true,
uri: '/stack/option3',
childMenuItems: [],
},
],
},
{
title: 'Smart',
icon: 'smartphone',
isSelected: false,
isVisible: true,
uri: '/smart',
childMenuItems: [],
},
{ isSeparator: true },
{
title: 'Settings',
icon: 'settings',
isSelected: false,
isVisible: true,
uri: '/settings',
childMenuItems: [],
},
{ isSeparator: true },
{
render: function (item, propsMenu, state) {
return (React.createElement(UpButton_1.default, { intent: 'primary', onClick: function (e) {
addon_actions_1.action('Command');
}, width: state.minified ? 'icon' : 'full', height: 'large', actionType: 'briefcase' }, 'Commander'));
},
},
];
var _a = React.useState(defaultMenu), menu = _a[0], setMenu = _a[1];
var footerStyle = typestyle_1.style({
color: '#9B9B9B',
fontFamily: 'Roboto',
fontSize: '12px',
lineHeight: '18px',
textAlign: 'center',
whiteSpace: 'pre-line',
});
return (React.createElement(UpMenu_1.default, { onMinifiedChange: function (minified) { return addon_actions_1.action("Menu minified: " + minified); }, customStyles: {
menu: function (props) { return ({
$nest: {
'li.active ul.up-sub-menu:not(:hover), li.active ul.up-sub-menu:hover': {
backgroundColor: colorMap_1.default.primary + " !important",
color: 'colorMap.white !important',
borderRadius: '6px',
padding: '16px !important',
marginLeft: '32px !important',
marginTop: '8px !important',
},
'li.active .up-sub-menu li:hover a span.up-menu-item-title': {
color: colorMap_1.default.white3,
},
'li.active .up-sub-menu li.active a span.up-menu-item-title': {
color: colorMap_1.default.white3,
},
},
}); },
}, onClick: function (uri) {
var newMenu = function (prev) { return setMenuSelection(uri, menu, prev); };
setMenu(function (previousMenu) { return newMenu(previousMenu); });
return false;
}, menuItems: menu, footer: function (props, state) {
return (React.createElement(React.Fragment, null,
!state.minified &&
React.createElement(Box_1.default, { alignItems: 'center', justifyContent: 'center', style: { width: '100%', height: '100%' } },
React.createElement("div", { className: footerStyle }, "Copyright. Tous droits r\u00E9serv\u00E9s Up 2019"),
React.createElement("a", { className: footerStyle, href: "https://up.coop/donnees-personnelles", target: "_blank" }, "Conditions g\u00E9n\u00E9rales"),
React.createElement("a", { className: footerStyle, href: "https://up.coop/mentions-legales", target: "_blank" }, "Mentions l\u00E9gales")),
state.minified &&
React.createElement(Tooltip_1.default, { place: 'top', content: 'Copyright.Tous droits réservés Up 2019' },
React.createElement(Box_1.default, { alignItems: 'center', justifyContent: 'center', style: { width: '100%', height: '100%' } },
React.createElement(SvgIcon_1.default, { color: colorMap_1.default.disabledFg, iconName: 'alert-circle' })))));
}, header: function (props, state) {
return (React.createElement(Box_1.default, { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', style: { height: '100%' } },
!state.minified &&
React.createElement(SvgIcon_1.default, { color: colorMap_1.default.white, iconName: 'check' }),
!state.minified &&
React.createElement(Ligne_1.default, { color: colorMap_1.default.primary, className: typestyle_1.style({ marginLeft: '8px' }) }, "Acceptation de titre")));
} }));
};
exports.Mobile = function (props) {
var buttonStyle = typestyle_1.style({}, typestyle_1.media(device_1.DeviceSmartphones, {
$nest: {
'.up-btn-wrapper': {
width: '100%',
$nest: {
'& > div': {
justifyContent: 'center',
},
},
},
},
}));
var defaultMenu = [
{
title: 'Stack',
icon: function (propsIcon) { return React.createElement(SvgIcon_1.default, { iconHtml: logoSvg, width: 22, height: 22 }); },
isSelected: false,
isVisible: true,
uri: '/stack',
childMenuItems: [
{
title: 'Option 1',
icon: 'weather-rain',
isSelected: false,
isVisible: true,
uri: '/stack/option1',
childMenuItems: [],
},
{
title: 'Option 2',
icon: 'weather-snow',
isSelected: false,
isVisible: true,
uri: '/stack/option2',
childMenuItems: [],
},
{
title: 'Option 3',
icon: 'weather-sunset',
isSelected: false,
isVisible: true,
uri: '/stack/option3',
childMenuItems: [],
},
],
},
{
title: 'Smart',
icon: 'smartphone',
isSelected: false,
isVisible: true,
uri: '/smart',
childMenuItems: [],
},
{ isSeparator: true }, {
title: 'Up',
icon: function (propsIcon) { return React.createElement(SvgIcon_1.default, { iconHtml: logoSvg, width: 22, height: 22 }); },
isSelected: false,
isVisible: true,
uri: '/Up',
childMenuItems: [
{
title: 'Option 1',
icon: 'weather-rain',
isSelected: false,
isVisible: true,
uri: '/Up/option1',
childMenuItems: [],
},
{
title: 'Option 2',
icon: 'weather-snow',
isSelected: false,
isVisible: true,
uri: '/Up/option2',
childMenuItems: [],
},
{
title: 'Option 3',
icon: 'weather-sunset',
isSelected: false,
isVisible: true,
uri: '/Up/option3',
childMenuItems: [],
},
],
},
{
title: 'Settings',
icon: 'settings',
isSelected: false,
isVisible: true,
uri: '/settings',
childMenuItems: [],
},
{ isSeparator: true },
{
render: function (item, propsMenu, state) {
return (React.createElement("div", { className: buttonStyle },
React.createElement(UpButton_1.default, { intent: 'primary', onClick: function (e) {
addon_actions_1.action('Command');
}, width: state.minified ? 'icon' : 'full', height: 'large', actionType: 'briefcase' }, 'Commander')));
},
},
];
var _a = React.useState(defaultMenu), menu = _a[0], setMenu = _a[1];
var _b = React.useState(true), minified = _b[0], setMinified = _b[1];
var footerStyle = typestyle_1.style({
color: '#9B9B9B',
fontFamily: 'Roboto',
fontSize: '12px',
lineHeight: '18px',
textAlign: 'center',
whiteSpace: 'pre-line',
});
return (React.createElement(UpMenu_1.default, { onMinifiedChange: function (minified) { return setMinified(minified); }, onClick: function (uri) {
var newMenu = function (prev) { return setMenuSelection(uri, menu, prev); };
setMenu(function (previousMenu) { return newMenu(previousMenu); });
return false;
}, menuItems: menu, minified: minified, footer: function (props, state) {
return (React.createElement(React.Fragment, null,
!minified &&
React.createElement(Box_1.default, { alignItems: 'center', justifyContent: 'center', style: { width: '100%', height: '100%' } },
React.createElement("div", { className: footerStyle }, "Copyright. Tous droits r\u00E9serv\u00E9s Up 2019"),
React.createElement("a", { className: footerStyle, href: "https://up.coop/donnees-personnelles", target: "_blank" }, "Conditions g\u00E9n\u00E9rales"),
React.createElement("a", { className: footerStyle, href: "https://up.coop/mentions-legales", target: "_blank" }, "Mentions l\u00E9gales")),
minified &&
React.createElement(Tooltip_1.default, { place: 'top', content: 'Copyright.Tous droits réservés Up 2019' },
React.createElement(Box_1.default, { alignItems: 'center', justifyContent: 'center', style: { width: '100%', height: '100%' } },
React.createElement(SvgIcon_1.default, { color: colorMap_1.default.disabledFg, iconName: 'alert-circle' })))));
}, header: function (props, state) {
return (React.createElement(Box_1.default, { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', style: { height: '100%' } },
!minified &&
React.createElement(SvgIcon_1.default, { color: colorMap_1.default.white, iconName: 'check' }),
!minified &&
React.createElement(Ligne_1.default, { color: colorMap_1.default.primary, className: typestyle_1.style({ marginLeft: '8px' }) }, "Acceptation de titre")));
} }));
};
//# sourceMappingURL=index.stories.js.map