@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
169 lines • 6.67 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var addon_knobs_1 = require("@storybook/addon-knobs");
var UpDataPanel_1 = require("./UpDataPanel");
var stories_1 = require("../../../Common/stories");
var typestyle_1 = require("typestyle");
var UpBadge_1 = require("../../Display/Badge/UpBadge");
exports.default = {
title: 'Components/Containers/UpDataPanel',
decorators: [
addon_knobs_1.withKnobs,
stories_1.getRootContainer('UpDataPanel')
],
component: UpDataPanel_1.UpDataPanel,
};
var data = [
{
first_label: 'value 1',
second_label: 'value 2',
third_label: 'value 3',
fourth_label: 'Value 4',
fifth_label: 'value 5',
sixth_label: 'value6',
},
{
first_label: 'second value 1',
second_label: 'second value 2',
third_label: ' second value 3',
fourth_label: 'second Value 4',
fifth_label: 'second value 5',
sixth_label: 'second value 6',
}
];
var columns = [
{
field: 'first_label',
label: 'First Label',
},
{
field: 'second_label',
label: 'Second Label',
tooltip: { content: 'Explication status activation monétique quand on clique sur le picto' }
},
{
field: 'third_label',
label: 'Third Label'
},
{
field: 'fourth_label',
label: 'Forth Label'
},
{
field: 'fifth_label',
label: 'Fifth Label'
},
{
field: 'sixth_label',
label: 'Sixth Label'
},
{
field: 'seventh_label',
label: 'Seventh Label'
},
];
var titleFormatter = {
format: function (data) { return (React.createElement("span", { style: {
color: data['first_label'] == 'value 1' ? 'orange' : 'red',
fontWeight: 'bold',
marginLeft: '4px'
} }, data['first_label'])); }
};
exports.RowDisplayMode = function () { return (React.createElement(UpDataPanel_1.default, { data: data, columns: columns, title: { general: 'Gestion technique', specific: titleFormatter }, displayMode: 'row', className: typestyle_1.style({
$nest: {
'&.panel-container': {
marginTop: '25px'
}
}
}), actions: [
{
action: function (e) { return console.log(e); },
type: 'arrow-right',
intent: 'primary'
}
] })); };
exports.ColumnDisplayMode = function () { return (React.createElement(UpDataPanel_1.default, { data: data, columns: columns, displayMode: 'column', className: typestyle_1.style({
$nest: {
'&.panel-container': {
marginTop: '25px'
}
}
}) })); };
exports.HideEmptyColumns = function () { return (React.createElement(UpDataPanel_1.default, { data: data, columns: columns, displayMode: 'column', showOnlyNotEmptyValue: true, className: typestyle_1.style({
$nest: {
'&.panel-container': {
marginTop: '25px'
}
}
}) })); };
exports.ColumnModeWithFormatter = function () {
var formatter = {
format: function (item, column) { return (React.createElement("span", { className: typestyle_1.style({
color: 'orange',
}) }, item[column.field])); }
};
return (React.createElement(UpDataPanel_1.default, { data: data, columns: columns.map(function (e, i) {
return i === 0 ? tslib_1.__assign(tslib_1.__assign({}, e), { formatter: formatter }) : tslib_1.__assign({}, e);
}), showOnlyNotEmptyValue: true, displayMode: 'column', className: typestyle_1.style({
$nest: {
'&.panel-container': {
marginTop: '25px'
}
}
}) }));
};
exports.ColumnModeWithFormatter.storyName = 'Display Columns In Column Mode Display With Formatter';
exports.RowModeWithTitleFormatter = function () {
var secondformatter = {
format: function (item, column) { return (React.createElement(UpBadge_1.default, { text: item[column.field], className: typestyle_1.style({
$nest: {
'&.up-badge': {
padding: '2px 15px',
fontWeight: 'normal',
marginLeft: '10px'
}
}
}), intent: 'success' })); }
};
var thirdformatter = {
format: function (item, column) { return (React.createElement(UpBadge_1.default, { text: '', className: typestyle_1.style({
$nest: {
'&.up-badge': {
height: '20px',
width: '20px',
marginLeft: '10px'
}
}
}), intent: 'success', rounded: true })); }
};
return (React.createElement(UpDataPanel_1.default, { data: data, columns: columns.map(function (e, i) {
return i === 0
? tslib_1.__assign(tslib_1.__assign({}, e), { formatter: secondformatter }) : i === 1
? tslib_1.__assign(tslib_1.__assign({}, e), { formatter: thirdformatter }) : i === 2
? tslib_1.__assign(tslib_1.__assign({}, e), { formatter: secondformatter }) : tslib_1.__assign({}, e);
}), title: {
general: 'Gestion Technique',
specific: titleFormatter,
}, showOnlyNotEmptyValue: true, displayMode: 'row', className: typestyle_1.style({
$nest: {
'&.panel-container': {
marginTop: '25px'
}
}
}), actions: [
{
action: function (e) { return console.log(e); },
type: 'arrow-right',
intent: 'primary'
}
] }));
};
exports.RowModeWithTitleFormatter.storyName = 'Display Columns In Row Mode Display With Title Formatter';
exports.CustomClassColumn = function () { return (React.createElement(UpDataPanel_1.default, { data: [data[0]], columns: columns, displayMode: 'column', getColumnCustomClassName: function (field) {
if (field === 'seventh_label')
return typestyle_1.style({ marginLeft: 'auto', background: 'orange' });
} })); };
exports.CustomClassColumn.storyName = 'Add Custom ClassName To A Specific Column Of Panel';
//# sourceMappingURL=index.stories.js.map