react-elegant-ui/components/TabsPanes/__examples__/common.example.js

Elegant UI components, made by BEM best practices for react

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.WithTabsMenu = exports.WithRenderAll = void 0;
var _react = _interopRequireWildcard(require("react"));
var _desktop = require("../../Button/Button.bundle/desktop");
var _desktop2 = require("../../TabsMenu/TabsMenu.bundle/desktop");
var _desktop3 = require("../TabsPanes.bundle/desktop");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
var __read = void 0 && (void 0).__read || function (o, n) {
  var m = typeof Symbol === "function" && o[Symbol.iterator];
  if (!m) return o;
  var i = m.call(o),
    r,
    ar = [],
    e;
  try {
    while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
  } catch (error) {
    e = {
      error: error
    };
  } finally {
    try {
      if (r && !r.done && (m = i["return"])) m.call(i);
    } finally {
      if (e) throw e.error;
    }
  }
  return ar;
};
/**
 * Demo component with inner state
 */
var Counter = function () {
  var _a = __read((0, _react.useState)(0), 2),
    counter = _a[0],
    setCounter = _a[1];
  return /*#__PURE__*/_react.default.createElement(_desktop.Button, {
    onPress: function () {
      return setCounter(function (num) {
        return num + 1;
      });
    }
  }, "Cick me: ", counter);
};
var WithTabsMenu = function () {
  var _a = __read((0, _react.useState)('counter'), 2),
    activeTab = _a[0],
    setActiveTab = _a[1];
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_desktop2.TabsMenu, {
    view: "default",
    layout: "horizontal",
    size: "m",
    activeTab: activeTab,
    setActiveTab: setActiveTab,
    tabs: [{
      id: 'counter',
      content: 'Click counter'
    }, {
      id: 'search',
      content: 'Search'
    }, {
      id: 'images',
      content: 'Images'
    }, {
      id: 'video',
      content: 'Video'
    }]
  }), /*#__PURE__*/_react.default.createElement(_desktop3.TabsPanes, {
    activePane: activeTab,
    style: {
      padding: 'var(--typography-controls-indent-l) 0px'
    },
    panes: [{
      id: 'counter',
      content: ( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Counter, null), " i will rerender with switch tab"))
    }, {
      id: 'search',
      content: 'Search content'
    }, {
      id: 'images',
      content: 'Images content'
    }, {
      id: 'video',
      content: 'Video content'
    }]
  }));
};
exports.WithTabsMenu = WithTabsMenu;
var WithRenderAll = function () {
  var _a = __read((0, _react.useState)('counter'), 2),
    activeTab = _a[0],
    setActiveTab = _a[1];
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_desktop2.TabsMenu, {
    view: "default",
    layout: "horizontal",
    size: "m",
    activeTab: activeTab,
    setActiveTab: setActiveTab,
    tabs: [{
      id: 'counter',
      content: 'Click counter'
    }, {
      id: 'search',
      content: 'Search'
    }, {
      id: 'images',
      content: 'Images'
    }, {
      id: 'video',
      content: 'Video'
    }]
  }), /*#__PURE__*/_react.default.createElement(_desktop3.TabsPanes, {
    renderAll: true,
    activePane: activeTab,
    style: {
      padding: 'var(--typography-controls-indent-l) 0px'
    },
    panes: [{
      id: 'counter',
      content: ( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Counter, null), " i will keep value"))
    }, {
      id: 'search',
      content: 'Search content'
    }, {
      id: 'images',
      content: 'Images content'
    }, {
      id: 'video',
      content: 'Video content'
    }]
  }));
};
exports.WithRenderAll = WithRenderAll;