@wix/design-system/dist/cjs/TableListItem/docs/examples.js

@wix/design-system

"use strict";

exports.__esModule = true;
exports.verticalPaddingExample = exports.tableActionCellExample = exports.structureExample = exports.selectionExample = exports.draggableExample = exports.dividerExample = exports.columnsExample = exports.columnAlignmentExample = void 0;
var columnAlignmentExample = exports.columnAlignmentExample = "\n<TableListItem\n      showDivider\n      options={[\n        { value: 'Personal Finance', align: 'right' },\n        { value: '7 posts', align: 'center' },\n        { value: 'Last update on 27 April 2020', align: 'left' },\n      ]}\n/>";
var columnsExample = exports.columnsExample = "\n<Layout cols={1}>\n<TableListItem showDivider options={[{ value: 'Personal Finance' }]} />\n      <TableListItem\n        showDivider\n        options={[\n          { value: 'Personal Finance', width: '1fr' },\n          { value: '7 posts', width: '2fr' },\n        ]}\n      />\n      <TableListItem\n        showDivider\n        options={[\n          { value: 'Personal Finance' },\n          { value: '7 posts' },\n          { value: 'Last update on 27 April 2020' },\n        ]}\n      />\n</Layout>";
var dividerExample = exports.dividerExample = "\n<Layout cols={1}>\n<TableListItem\n        showDivider\n        options={[\n          { value: 'Personal Finance' },\n          { value: '12 posts' },\n          { value: 'Last update on 27 April 2020' },\n        ]}\n      />\n      <TableListItem\n        options={[\n          { value: 'Personal Finance' },\n          { value: '12 posts' },\n          { value: 'Last update on 27 April 2020' },\n        ]}\n      />\n</Layout>";
var draggableExample = exports.draggableExample = "\n<Layout cols={1}>\n      <TableListItem\n        showDivider\n        options={[\n          { value: 'Personal Finance' },\n          { value: '12 posts' },\n          { value: 'Last update on 27 April 2020' },\n        ]}\n      />\n      <TableListItem\n        draggable\n        showDivider\n        options={[\n          { value: 'Personal Finance' },\n          { value: '12 posts' },\n          { value: 'Last update on 27 April 2020' },\n        ]}\n      />\n      <TableListItem\n        draggable\n        dragDisabled\n        showDivider\n        options={[\n          { value: 'Personal Finance' },\n          { value: '12 posts' },\n          { value: 'Last update on 27 April 2020' },\n        ]}\n      />\n</Layout>";
var verticalPaddingExample = exports.verticalPaddingExample = "\n<Layout cols={1}>\n      <TableListItem\n        verticalPadding=\"tiny\"\n        showDivider\n        options={[\n          { value: 'Personal Finance' },\n          { value: '7 posts' },\n          { value: 'Last update on 27 April 2020' },\n        ]}\n      />\n      <TableListItem\n        verticalPadding=\"small\"\n        showDivider\n        options={[\n          { value: 'Personal Finance' },\n          { value: '7 posts' },\n          { value: 'Last update on 27 April 2020' },\n        ]}\n      />\n      <TableListItem\n        verticalPadding=\"medium\"\n        showDivider\n        options={[\n          { value: 'Personal Finance' },\n          { value: '7 posts' },\n          { value: 'Last update on 27 April 2020' },\n        ]}\n      />\n</Layout>";
var selectionExample = exports.selectionExample = "\n<Layout cols={1}>\n      <TableListItem\n        showDivider\n        options={[\n          { value: 'Personal Finance' },\n          { value: '12 posts' },\n          { value: 'Last update on 27 April 2020' },\n        ]}\n      />\n      <TableListItem\n        checkbox\n        showDivider\n        options={[\n          { value: 'Personal Finance' },\n          { value: '12 posts' },\n          { value: 'Last update on 27 April 2020' },\n        ]}\n      />\n      <TableListItem\n        checkbox\n        checked\n        showDivider\n        options={[\n          { value: 'Personal Finance' },\n          { value: '12 posts' },\n          { value: 'Last update on 27 April 2020' },\n        ]}\n      />\n</Layout>\n";
var structureExample = exports.structureExample = "\n    <TableListItem\n      checkbox\n      draggable\n      showDivider\n      options={[{ value: 'Personal Finance' }]}\n    />\n";
var tableActionCellExample = exports.tableActionCellExample = "\n<TableListItem\n      onClick={() => window.alert('onClick')}\n      checkbox\n      draggable\n      showDivider\n      options={[\n        { value: 'Personal Finance' },\n        { value: '12 posts' },\n        { value: 'Last update on 27 April 2020' },\n        {\n          value: (\n            <TableActionCell\n              primaryAction={{\n                text: 'Edit',\n                skin: 'standard',\n                onClick: () => window.alert('Primary action was triggered!'),\n              }}\n              secondaryActions={[\n                {\n                  text: 'Star',\n                  icon: <Icons.Star />,\n                  onClick: () => window.alert('Star action was triggered.'),\n                },\n                {\n                  text: 'Download',\n                  icon: <Icons.Download />,\n                  onClick: () => window.alert('Download action was triggered.'),\n                },\n                {\n                  text: 'Duplicate',\n                  icon: <Icons.Duplicate />,\n                  onClick: () =>\n                    window.alert('Duplicate action was triggered.'),\n                },\n                {\n                  text: 'Print',\n                  icon: <Icons.Print />,\n                  onClick: () => window.alert('Print action was triggered.'),\n                },\n              ]}\n              numOfVisibleSecondaryActions={0}\n            />\n          ),\n        },\n      ]}\n    />\n";