wix-style-react
Version:
wix-style-react
303 lines (238 loc) • 10.7 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; /* eslint-disable no-console */
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _CodeExample = require('wix-storybook-utils/CodeExample');
var _CodeExample2 = _interopRequireDefault(_CodeExample);
var _storySettings = require('./storySettings');
var _TableActionCellStorySt = require('./TableActionCell.story.st.css');
var _TableActionCellStorySt2 = _interopRequireDefault(_TableActionCellStorySt);
var _TableActionCell = require('../../src/TableActionCell');
var _TableActionCell2 = _interopRequireDefault(_TableActionCell);
var _PrimaryBlueExample = require('./examples/PrimaryBlueExample');
var _PrimaryBlueExample2 = _interopRequireDefault(_PrimaryBlueExample);
var _PrimaryBlueExample3 = require('!raw-loader!./examples/PrimaryBlueExample');
var _PrimaryBlueExample4 = _interopRequireDefault(_PrimaryBlueExample3);
var _PrimaryWhiteExample = require('./examples/PrimaryWhiteExample');
var _PrimaryWhiteExample2 = _interopRequireDefault(_PrimaryWhiteExample);
var _PrimaryWhiteExample3 = require('!raw-loader!./examples/PrimaryWhiteExample');
var _PrimaryWhiteExample4 = _interopRequireDefault(_PrimaryWhiteExample3);
var _PrimarySecondaryExample = require('./examples/PrimarySecondaryExample');
var _PrimarySecondaryExample2 = _interopRequireDefault(_PrimarySecondaryExample);
var _PrimarySecondaryExample3 = require('!raw-loader!./examples/PrimarySecondaryExample');
var _PrimarySecondaryExample4 = _interopRequireDefault(_PrimarySecondaryExample3);
var _PrimarySecondaryHiddenExample = require('./examples/PrimarySecondaryHiddenExample');
var _PrimarySecondaryHiddenExample2 = _interopRequireDefault(_PrimarySecondaryHiddenExample);
var _PrimarySecondaryHiddenExample3 = require('!raw-loader!./examples/PrimarySecondaryHiddenExample');
var _PrimarySecondaryHiddenExample4 = _interopRequireDefault(_PrimarySecondaryHiddenExample3);
var _PopoverMenuPropsExample = require('./examples/PopoverMenuPropsExample');
var _PopoverMenuPropsExample2 = _interopRequireDefault(_PopoverMenuPropsExample);
var _PopoverMenuPropsExample3 = require('!raw-loader!./examples/PopoverMenuPropsExample');
var _PopoverMenuPropsExample4 = _interopRequireDefault(_PopoverMenuPropsExample3);
var _AlwaysVisibleSecondaryExample = require('./examples/AlwaysVisibleSecondaryExample');
var _AlwaysVisibleSecondaryExample2 = _interopRequireDefault(_AlwaysVisibleSecondaryExample);
var _AlwaysVisibleSecondaryExample3 = require('!raw-loader!./examples/AlwaysVisibleSecondaryExample');
var _AlwaysVisibleSecondaryExample4 = _interopRequireDefault(_AlwaysVisibleSecondaryExample3);
var _OnlySecondaryExample = require('./examples/OnlySecondaryExample');
var _OnlySecondaryExample2 = _interopRequireDefault(_OnlySecondaryExample);
var _OnlySecondaryExample3 = require('!raw-loader!./examples/OnlySecondaryExample');
var _OnlySecondaryExample4 = _interopRequireDefault(_OnlySecondaryExample3);
var _OnlyVisibleSecondaryExample = require('./examples/OnlyVisibleSecondaryExample');
var _OnlyVisibleSecondaryExample2 = _interopRequireDefault(_OnlyVisibleSecondaryExample);
var _OnlyVisibleSecondaryExample3 = require('!raw-loader!./examples/OnlyVisibleSecondaryExample');
var _OnlyVisibleSecondaryExample4 = _interopRequireDefault(_OnlyVisibleSecondaryExample3);
var _PrimarySecondaryRTLExample = require('./examples/PrimarySecondaryRTLExample');
var _PrimarySecondaryRTLExample2 = _interopRequireDefault(_PrimarySecondaryRTLExample);
var _PrimarySecondaryRTLExample3 = require('!raw-loader!./examples/PrimarySecondaryRTLExample');
var _PrimarySecondaryRTLExample4 = _interopRequireDefault(_PrimarySecondaryRTLExample3);
var _DisabledSecondaryExample = require('./examples/DisabledSecondaryExample');
var _DisabledSecondaryExample2 = _interopRequireDefault(_DisabledSecondaryExample);
var _DisabledSecondaryExample3 = require('!raw-loader!./examples/DisabledSecondaryExample');
var _DisabledSecondaryExample4 = _interopRequireDefault(_DisabledSecondaryExample3);
var _newIcons = require('wix-style-react/new-icons');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var primaryActionOptions1 = {
text: 'Details',
theme: 'fullblue',
onClick: function onClick() {
return console.log('Details action called!');
}
};
var primaryActionOptions2 = _extends({}, primaryActionOptions1, {
theme: 'whiteblue'
});
var secondaryActionsOption = [{
text: 'Star',
icon: _react2.default.createElement(_newIcons.Star, null),
onClick: function onClick() {
return console.log('Star action called!');
}
}, {
text: 'Download',
icon: _react2.default.createElement(_newIcons.Download, null),
onClick: function onClick() {
return console.log('Download action called!');
}
}, {
text: 'Duplicate',
icon: _react2.default.createElement(_newIcons.Duplicate, null),
onClick: function onClick() {
return console.log('Duplicate action called!');
}
}, {
text: 'Print',
icon: _react2.default.createElement(_newIcons.Print, null),
onClick: function onClick() {
return console.log('Print action called!');
}
}];
var ExampleComponent = function ExampleComponent(props) {
return _react2.default.createElement(
'div',
(0, _TableActionCellStorySt2.default)('root', {}, props),
_react2.default.createElement(
'tr',
{ className: _TableActionCellStorySt2.default.exampleRow },
_react2.default.createElement(_TableActionCell2.default, props)
)
);
};
ExampleComponent.displayName = 'TableActionCell';
exports.default = {
category: _storySettings.storySettings.kind,
storyName: _storySettings.storySettings.storyName,
component: ExampleComponent,
componentPath: '../../src/TableActionCell/TableActionCell.js',
componentProps: {
dataHook: _storySettings.storySettings.dataHook,
primaryAction: primaryActionOptions1,
secondaryActions: secondaryActionsOption,
numOfVisibleSecondaryActions: 2,
alwaysShowSecondaryActions: true
},
exampleProps: {
primaryAction: [{ label: 'No primary action', value: null }, { label: 'Blue primary action', value: primaryActionOptions1 }, { label: 'White primary action', value: primaryActionOptions2 }],
secondaryActions: [{ label: 'No secondary actions', value: [] }, { label: '4 secondary actions', value: secondaryActionsOption }]
},
examples: _react2.default.createElement(
'div',
(0, _TableActionCellStorySt2.default)('root'),
_react2.default.createElement(
'div',
{ className: _TableActionCellStorySt2.default.example },
_react2.default.createElement(
_CodeExample2.default,
{ title: 'Blue primary action', code: _PrimaryBlueExample4.default },
_react2.default.createElement(_PrimaryBlueExample2.default, null)
)
),
_react2.default.createElement(
'div',
{ className: _TableActionCellStorySt2.default.example },
_react2.default.createElement(
_CodeExample2.default,
{ title: 'White primary action', code: _PrimaryWhiteExample4.default },
_react2.default.createElement(_PrimaryWhiteExample2.default, null)
)
),
_react2.default.createElement(
'div',
{ className: _TableActionCellStorySt2.default.example },
_react2.default.createElement(
_CodeExample2.default,
{
title: 'Primary action and secondary actions',
code: _PrimarySecondaryExample4.default
},
_react2.default.createElement(_PrimarySecondaryExample2.default, null)
)
),
_react2.default.createElement(
'div',
{ className: _TableActionCellStorySt2.default.example },
_react2.default.createElement(
_CodeExample2.default,
{
title: 'Primary action and hidden secondary action',
code: _PrimarySecondaryHiddenExample4.default
},
_react2.default.createElement(_PrimarySecondaryHiddenExample2.default, null)
)
),
_react2.default.createElement(
'div',
{ className: _TableActionCellStorySt2.default.example },
_react2.default.createElement(
_CodeExample2.default,
{
title: 'With custom PopoverMenu props',
code: _PopoverMenuPropsExample4.default
},
_react2.default.createElement(_PopoverMenuPropsExample2.default, null)
)
),
_react2.default.createElement(
'div',
{ className: _TableActionCellStorySt2.default.example },
_react2.default.createElement(
_CodeExample2.default,
{
title: 'Always visible secondary actions',
code: _AlwaysVisibleSecondaryExample4.default
},
_react2.default.createElement(_AlwaysVisibleSecondaryExample2.default, null)
)
),
_react2.default.createElement(
'div',
{ className: _TableActionCellStorySt2.default.example },
_react2.default.createElement(
_CodeExample2.default,
{
title: 'Only secondary actions',
code: _OnlySecondaryExample4.default
},
_react2.default.createElement(_OnlySecondaryExample2.default, null)
)
),
_react2.default.createElement(
'div',
{ className: _TableActionCellStorySt2.default.example },
_react2.default.createElement(
_CodeExample2.default,
{
title: 'Only visible secondary actions',
code: _OnlyVisibleSecondaryExample4.default
},
_react2.default.createElement(_OnlyVisibleSecondaryExample2.default, null)
)
),
_react2.default.createElement(
'div',
{ className: _TableActionCellStorySt2.default.example },
_react2.default.createElement(
_CodeExample2.default,
{
title: 'Primary and secondary actions with RTL',
code: _PrimarySecondaryRTLExample4.default
},
_react2.default.createElement(_PrimarySecondaryRTLExample2.default, null)
)
),
_react2.default.createElement(
'div',
{ className: _TableActionCellStorySt2.default.example },
_react2.default.createElement(
_CodeExample2.default,
{
title: 'Disabled secondary actions',
code: _DisabledSecondaryExample4.default
},
_react2.default.createElement(_DisabledSecondaryExample2.default, null)
)
)
)
};