@wix/design-system/dist/cjs/TimeTable/docs/index.story.js

@wix/design-system

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _react = _interopRequireDefault(require("react"));
var _Sections = require("@wix/wix-storybook-utils/Sections");
var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
var _storySettings = require("../test/storySettings");
var _header = _interopRequireDefault(require("./examples/header"));
var _structure = _interopRequireDefault(require("!raw-loader!./examples/structure"));
var _disabled = _interopRequireDefault(require("!raw-loader!./examples/disabled"));
var _customContent = _interopRequireDefault(require("!raw-loader!./examples/customContent"));
var _multipleActions = _interopRequireDefault(require("!raw-loader!./examples/multipleActions"));
var _ = _interopRequireDefault(require(".."));
var _Box = _interopRequireDefault(require("../../Box"));
var _playgroundData = require("./playgroundData");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/TimeTable/docs/index.story.jsx";
var _default = exports["default"] = {
  category: _storySettings.storySettings.category,
  storyName: 'TimeTable',
  component: _["default"],
  componentPath: '..',
  componentProps: function componentProps(setState, getState) {
    return {
      dataHook: _storySettings.storySettings.dataHook,
      addItemButtonLabel: 'Add',
      columns: _playgroundData.defaultColumns,
      insertPosition: 'any',
      onChange: function onChange(newColumns) {
        return setState({
          columns: newColumns
        });
      },
      onAdd: function onAdd(columnIndex) {
        var newColumns = (0, _cloneDeep["default"])(getState().columns);
        newColumns[columnIndex].items.push({
          content: 'New Item'
        });
        setState({
          columns: newColumns
        });
      }
    };
  },
  exampleProps: {
    columns: [{
      label: '4 days',
      value: _playgroundData.defaultColumns
    }],
    onChange: function onChange(cols, details) {
      return "I was called with (".concat(cols, ",").concat(details, ")");
    },
    onAdd: function onAdd(columnIndex) {
      return "I was called with ".concat(columnIndex);
    }
  },
  sections: [(0, _Sections.header)({
    component: /*#__PURE__*/_react["default"].createElement(_Box["default"], {
      width: "60%",
      minWidth: "500px",
      height: "130px",
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 60,
        columnNumber: 9
      }
    }, /*#__PURE__*/_react["default"].createElement(_header["default"], {
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 61,
        columnNumber: 11
      }
    }))
  }), (0, _Sections.tabs)([(0, _Sections.tab)({
    title: 'Description',
    sections: [(0, _Sections.columns)([(0, _Sections.description)({
      title: 'Description',
      text: 'TimeTable allows site owner to group and manage items. Items can be sorted and regrouped using drag and drop feature. It can be used to review scheduled tasks or events.'
    })]), (0, _Sections.importExample)("import { TimeTable } from '@wix/design-system';"), (0, _Sections.divider)(), (0, _Sections.title)('Examples'), (0, _Sections.example)({
      title: 'Structure',
      description: 'Each group has a title and subtitle, it can be set to `active`. Items can be used with plain text or node. "Add Item" button can be renamed or removed.',
      source: _structure["default"]
    }), (0, _Sections.example)({
      title: 'Multiple actions',
      description: 'Multiple column actions, for each column individually',
      source: _multipleActions["default"]
    }), (0, _Sections.example)({
      title: 'Disabled',
      description: "Groups and items can be disabled indepentendly. New items cannot be added to disabled groups. Active items placed in a disabled group can be dragged out, but cannot be put back. It's allowed to set `draggable` on disabled item.",
      source: _disabled["default"]
    }), (0, _Sections.code)({
      autoRender: false,
      title: 'Custom Content',
      description: "Item's content can render any content with complex logic. Example below demonstrates how it can be used with a `<Popover/>` or `<Badge/>`.",
      source: _customContent["default"],
      compact: true
    })]
  })].concat((0, _toConsumableArray2["default"])([{
    title: 'API',
    sections: [(0, _Sections.api)()]
  }, {
    title: 'Testkit',
    sections: [(0, _Sections.testkit)()]
  }, {
    title: 'Playground',
    sections: [(0, _Sections.playground)()]
  }].map(_Sections.tab))))]
};