@up-group/react-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
134 lines • 9.46 kB
JavaScript
"use strict";
var _this = this;
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var react_1 = require("@storybook/react");
var addon_actions_1 = require("@storybook/addon-actions");
var theming_1 = require("../../../Common/theming");
var themedComponents_1 = require("../../../Common/theming/themedComponents");
var _1 = require("./");
var __1 = require("../../..");
var Box_1 = require("../../Containers/Box");
var addon_knobs_1 = require("@storybook/addon-knobs");
var stories = react_1.storiesOf('UpButton', module);
stories.addDecorator(addon_knobs_1.withKnobs);
stories.addWithInfo('Simple usage', 'Utilisation du composant en lui passant les données à afficher', function () {
var actionType = addon_knobs_1.text('actionType', 'add');
var intent = addon_knobs_1.text('intent', 'primary');
return React.createElement(themedComponents_1.ThemeProvider, { theme: theming_1.default },
React.createElement(Box_1.default, { style: { margin: "40px 30px" } },
React.createElement(__1.UpNotification, { status: "info" },
"Le composant ",
React.createElement("code", null, "UpButton"),
" permet de d\u00E9finir un bouton avec trois propri\u00E9t\u00E9s principales :",
React.createElement("ul", null,
React.createElement("li", null, "actionType : Le type de l'action g\u00E9rer par le bouton. Exemple 'add' ajoutera un ic\u00F4ne appropri\u00E9."),
React.createElement("li", null, "intent : le type du bouton : 'primary', 'secondary', 'info', 'success', 'warning' ou 'error'"),
React.createElement("li", null, "onClick : l'action a ex\u00E9cut\u00E9.")),
React.createElement(__1.UpParagraph, null,
React.createElement(_1.default, { actionType: actionType, intent: intent, onClick: function (event) { console.log(event); }, width: "auto" }, "Add")))));
}).addWithInfo('Icon', 'Utilisation du composant en lui passant les données à afficher', function () { return (React.createElement(themedComponents_1.ThemeProvider, { theme: theming_1.default },
React.createElement(Box_1.default, { style: { margin: "40px 30px" } },
React.createElement(__1.UpNotification, { status: "info" },
"Le composant ",
React.createElement("code", null, "UpButton"),
" afficher en mode ic\u00F4ne :",
React.createElement(__1.UpParagraph, null,
React.createElement(_1.default, { actionType: "add", width: "icon", intent: "primary", onClick: function (event) { console.log(event); } }, "Add")))))); }).addWithInfo('Icon à droite', 'Utilisation du composant en lui passant les données à afficher', function () { return (React.createElement(themedComponents_1.ThemeProvider, { theme: theming_1.default },
React.createElement(Box_1.default, { style: { margin: "40px 30px" } },
React.createElement(__1.UpNotification, { status: "info" },
"Le composant ",
React.createElement("code", null, "UpButton"),
" en positionnant l'ic\u00F4ne \u00E0 droite :",
React.createElement(__1.UpParagraph, null,
React.createElement(_1.default, { actionType: "add", iconPosition: "right", width: "normal", intent: "primary", onClick: function (event) { console.log(event); } }, "Add")))))); }).addWithInfo('DropDown', 'Utilisation du composant en mode DropDown', function () { return (React.createElement(themedComponents_1.ThemeProvider, { theme: theming_1.default },
React.createElement(Box_1.default, { style: { margin: "40px 30px" } },
React.createElement(__1.UpNotification, { status: "info" },
"Le composant ",
React.createElement("code", null, "UpButton"),
" en d\u00E9finissant un menu d'actions associ\u00E9es :",
React.createElement(__1.UpParagraph, null,
React.createElement(_1.default, { intent: "primary", onClick: function (event) { addon_actions_1.action("Main"); }, dropDown: 'down', extraActions: [
{
libelle: "Option 1",
onClick: addon_actions_1.action("Option 1")
},
{
libelle: "Option 2",
onClick: addon_actions_1.action("Option 2")
},
{
size: 2,
},
{
libelle: "Option 3",
onClick: addon_actions_1.action("Option 3")
}
] })))))); }).addWithInfo('DropDown avex text', 'Utilisation du composant en mode DropDown', function () { return (React.createElement(themedComponents_1.ThemeProvider, { theme: theming_1.default },
React.createElement(Box_1.default, { style: { margin: "40px 30px" } },
React.createElement(__1.UpNotification, { status: "info" },
"Le composant ",
React.createElement("code", null, "UpButton"),
" en d\u00E9finissant un menu d'actions associ\u00E9es, un label principal et l'ic\u00F4ne \u00E0 gauche :",
React.createElement(__1.UpParagraph, null,
React.createElement(_1.default, { iconPosition: "left", intent: "primary", onClick: function (event) { addon_actions_1.action("Main"); }, dropDown: 'down', extraActions: [
{
libelle: "Option 1",
onClick: addon_actions_1.action("Option 1")
},
{
libelle: "Option 2",
onClick: addon_actions_1.action("Option 2")
},
{
size: 2,
},
{
libelle: "Option 3",
onClick: addon_actions_1.action("Option 3")
}
] }, "Options")))))); }).addWithInfo('DropDown avex text et icône à gauche', 'Utilisation du composant en mode DropDown', function () { return (React.createElement(themedComponents_1.ThemeProvider, { theme: theming_1.default },
React.createElement(Box_1.default, { style: { margin: "40px 30px" } },
React.createElement(__1.UpNotification, { status: "info" },
"Le composant ",
React.createElement("code", null, "UpButton"),
" en d\u00E9finissant un menu d'actions associ\u00E9es et un label principal :",
React.createElement(__1.UpParagraph, null,
React.createElement(_1.default, { intent: "primary", onClick: function (event) { addon_actions_1.action("Main"); }, dropDown: 'down', extraActions: [
{
libelle: "Option 1",
onClick: addon_actions_1.action("Option 1")
},
{
libelle: "Option 2",
onClick: addon_actions_1.action("Option 2")
},
{
size: 2,
},
{
libelle: "Option 3",
onClick: addon_actions_1.action("Option 3")
}
] }, "Options")))))); }).addWithInfo('Avec indication d\'opération', 'Utilisation du composant avec activation de l\'indication dd\'un processus en cours', function () {
var isProcessing = addon_knobs_1.boolean('isProcessing', true);
return React.createElement(themedComponents_1.ThemeProvider, { theme: theming_1.default },
React.createElement(Box_1.default, { style: { margin: "40px 30px" } },
React.createElement(__1.UpNotification, { status: "info" },
"Le composant ",
React.createElement("code", null, "UpButton"),
" avec indication du traitement en cours :",
React.createElement(__1.UpParagraph, null,
React.createElement(_1.default, { onClick: null, width: "normal", isProcessing: isProcessing }, "Save")))));
}).addWithInfo('Arrondi', 'Utilisation du composant avec activation de l\'indication dd\'un processus en cours', function () {
var isProcessing = addon_knobs_1.boolean('isProcessing', false);
return React.createElement(themedComponents_1.ThemeProvider, { theme: theming_1.default },
React.createElement(Box_1.default, { style: { margin: "40px 30px" } },
React.createElement(__1.UpNotification, { status: "info" },
"Le composant ",
React.createElement("code", null, "UpButton"),
" en mode ic\u00F4ne et avec indication du traitement en cours :",
React.createElement(__1.UpParagraph, null,
React.createElement(_1.default, { rotate: isProcessing, intent: "primary", rounded: true, width: "icon", onClick: _this.refresh, actionType: "refresh" })))));
});
//# sourceMappingURL=index.stories.js.map