@ovotech/element-native 3.3.2 → 3.4.0-canary-951cfd3-142

package/dist/components/List/List.js

@@ -1,8 +1,4 @@
 "use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -14,29 +10,6 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -52,84 +25,64 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ListWrapper = exports.Li = exports.Ol = exports.Ul = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
-var react_native_1 = require("react-native");
-var styled_native_1 = __importStar(require("../../styled.native"));
-var utils_1 = require("../../utils");
 var Stack_1 = require("../Stack");
-var UlBullet = styled_native_1.default.View(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, _c = _a.visible, visible = _c === void 0 ? true : _c, smallAndUp = _a.smallAndUp;
-    var lineHeight = smallAndUp
-        ? core.lineHeight.body.large
-        : core.lineHeight.body.small;
-    var topMargin = ((0, utils_1.pxToNumber)(lineHeight) - (0, utils_1.pxToNumber)(core.space[2])) / 2;
-    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      margin-right: ", ";\n      margin-top: ", "px;\n      width: ", ";\n      height: ", ";\n      background-color: ", ";\n    "], ["\n      margin-right: ", ";\n      margin-top: ", "px;\n      width: ", ";\n      height: ", ";\n      background-color: ", ";\n    "])), core.space[2], topMargin, core.space[2], core.space[2], visible ? semantic.message.base : 'transparent');
-});
-var StyledBullet = styled_native_1.default.Text(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
-    var fontSize = smallAndUp
-        ? core.fontSize.body.large
-        : core.fontSize.body.small;
-    var lineHeight = smallAndUp
-        ? core.lineHeight.body.large
-        : core.lineHeight.body.small;
-    return (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      font-family: ", ";\n      line-height: ", ";\n      color: ", ";\n      font-size: ", ";\n      margin-right: ", ";\n      width: ", ";\n      text-align: right;\n    "], ["\n      font-family: ", ";\n      line-height: ", ";\n      color: ", ";\n      font-size: ", ";\n      margin-right: ", ";\n      width: ", ";\n      text-align: right;\n    "])), core.fontFamily.body.native, lineHeight, semantic.message.base, fontSize, core.space[2], core.space[4]);
-});
-var StyledUlItem = styled_native_1.default.View(function (_a) {
-    var core = _a.theme.core, level = _a.level;
-    return (0, styled_native_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    flex-direction: row;\n    align-items: flex-start;\n    justify-content: center;\n    padding-left: ", ";\n  "], ["\n    flex-direction: row;\n    align-items: flex-start;\n    justify-content: center;\n    padding-left: ", ";\n  "])), core.space[level]);
-});
-var Bullet = (0, utils_1.styledComponentWithBreakpoints)(StyledBullet);
+var styled_1 = require("./styled");
+var utils_1 = require("../../utils");
+var Bullet = (0, utils_1.styledComponentWithBreakpoints)(styled_1.StyledBullet);
+var ListWrapper = (0, utils_1.styledComponentWithBreakpoints)(styled_1.StyledList);
+exports.ListWrapper = ListWrapper;
 var ListBulletItem = function (_a) {
     var children = _a.children, _b = _a.showBullets, showBullets = _b === void 0 ? true : _b, level = _a.level;
-    return ((0, jsx_runtime_1.jsxs)(StyledUlItem, __assign({ level: level }, { children: [(0, jsx_runtime_1.jsx)(UlBullet, { visible: showBullets }), children] })));
+    return ((0, jsx_runtime_1.jsxs)(styled_1.StyledUlItem, __assign({ level: level }, { children: [(0, jsx_runtime_1.jsx)(styled_1.UlBullet, { visible: showBullets }), children] })));
 };
 var ListNumberedItem = function (_a) {
-    var children = _a.children, prefix = _a.prefix;
-    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, __assign({ style: { flexDirection: 'row' } }, { children: [(0, jsx_runtime_1.jsx)(Bullet, { children: prefix }), children] })));
+    var children = _a.children, prefix = _a.prefix, level = _a.level;
+    return ((0, jsx_runtime_1.jsxs)(styled_1.StyledOlItem, __assign({ level: level }, { children: [(0, jsx_runtime_1.jsx)(Bullet, { children: prefix }), children] })));
 };
-var StyledList = styled_native_1.default.View(function (_a) {
-    var core = _a.theme.core, smallAndUp = _a.smallAndUp;
-    return (0, styled_native_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "], ["\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "])), smallAndUp ? core.space[3] : core.space[2], smallAndUp ? core.space[3] : core.space[2]);
-});
-var ListWrapper = (0, utils_1.styledComponentWithBreakpoints)(StyledList);
-exports.ListWrapper = ListWrapper;
-var Ul = function (_a) {
-    var children = _a.children, _b = _a.showBullets, showBullets = _b === void 0 ? true : _b, rest = __rest(_a, ["children", "showBullets"]);
-    var renderList = function (arrayChildren, level) {
-        if (level === void 0) { level = 0; }
-        return react_1.Children.map(arrayChildren, function (child) {
-            var _a, _b, _c;
-            // @ts-ignore It complains that child props doesn't exist. Weird.
-            if (Array.isArray((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.children) && ((_b = child === null || child === void 0 ? void 0 : child.type) === null || _b === void 0 ? void 0 : _b.name) === 'Ul') {
-                var lvl = level;
-                var PADDING = 3;
-                lvl = lvl + PADDING;
+var renderList = function (_a) {
+    var arrayChildren = _a.arrayChildren, _b = _a.level, level = _b === void 0 ? 0 : _b, showBullets = _a.showBullets, listType = _a.listType;
+    return react_1.Children.map(arrayChildren, function (child, index) {
+        var _a, _b, _c, _d;
+        // Checking if there are any child types, i.e. nodes
+        if (
+        // @ts-ignore
+        Array.isArray((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.children) &&
+            // @ts-ignore
+            (child.type.name === 'Ul' || child.type.name === 'Ol')) {
+            var lvl = level;
+            var PADDING = 3;
+            lvl = lvl + PADDING;
+            return renderList({
+                // @ts-ignore It complains that child props doesn't exist. Weird.
+                arrayChildren: (_b = child === null || child === void 0 ? void 0 : child.props) === null || _b === void 0 ? void 0 : _b.children,
                 // @ts-ignore It complains that child props doesn't exist. Weird.
-                return renderList((_c = child === null || child === void 0 ? void 0 : child.props) === null || _c === void 0 ? void 0 : _c.children, lvl);
+                listType: (_d = (_c = child === null || child === void 0 ? void 0 : child.type) === null || _c === void 0 ? void 0 : _c.name) === null || _d === void 0 ? void 0 : _d.toLowerCase(),
+                showBullets: showBullets,
+                level: lvl,
+            });
+        }
+        else {
+            if (listType === 'ul') {
+                return ((0, jsx_runtime_1.jsx)(ListBulletItem, __assign({ showBullets: showBullets, level: level }, { children: child })));
             }
             else {
-                return ((0, jsx_runtime_1.jsx)(ListBulletItem, __assign({ showBullets: showBullets, level: level }, { children: child })));
+                return ((0, jsx_runtime_1.jsx)(ListNumberedItem, __assign({ level: level, prefix: "".concat(index + 1, ".") }, { children: child })));
             }
-        });
-    };
-    return ((0, jsx_runtime_1.jsx)(ListWrapper, __assign({}, rest, { children: (0, jsx_runtime_1.jsx)(Stack_1.Stack, __assign({ spaceBetween: 2 }, { children: renderList(children) })) })));
+        }
+    });
+};
+var Li = function (_a) {
+    var children = _a.children, rest = __rest(_a, ["children"]);
+    return (0, jsx_runtime_1.jsx)(styled_1.StyledLi, __assign({}, rest, { children: children }));
+};
+exports.Li = Li;
+var Ul = function (_a) {
+    var children = _a.children, _b = _a.showBullets, showBullets = _b === void 0 ? true : _b, rest = __rest(_a, ["children", "showBullets"]);
+    return ((0, jsx_runtime_1.jsx)(ListWrapper, __assign({}, rest, { children: (0, jsx_runtime_1.jsx)(Stack_1.Stack, __assign({ spaceBetween: 2 }, { children: renderList({ arrayChildren: children, listType: 'ul', showBullets: showBullets }) })) })));
 };
 exports.Ul = Ul;
 var Ol = function (_a) {
     var children = _a.children, rest = __rest(_a, ["children"]);
-    return ((0, jsx_runtime_1.jsx)(ListWrapper, __assign({}, rest, { children: (0, jsx_runtime_1.jsx)(Stack_1.Stack, __assign({ spaceBetween: 2 }, { children: react_1.Children.map(children, function (child, index) { return ((0, jsx_runtime_1.jsx)(ListNumberedItem, __assign({ prefix: index + 1 + '.' }, { children: child }))); }) })) })));
+    return ((0, jsx_runtime_1.jsx)(ListWrapper, __assign({}, rest, { children: (0, jsx_runtime_1.jsx)(Stack_1.Stack, __assign({ spaceBetween: 2 }, { children: renderList({ arrayChildren: children, listType: 'ol' }) })) })));
 };
 exports.Ol = Ol;
-var StyledLi = styled_native_1.default.Text(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
-    var fontSize = smallAndUp
-        ? core.fontSize.body.large
-        : core.fontSize.body.small;
-    var lineHeight = smallAndUp
-        ? core.lineHeight.body.large
-        : core.lineHeight.body.large;
-    return (0, styled_native_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      font-family: ", ";\n      line-height: ", ";\n      color: ", ";\n      font-size: ", ";\n      flex: 1;\n    "], ["\n      font-family: ", ";\n      line-height: ", ";\n      color: ", ";\n      font-size: ", ";\n      flex: 1;\n    "])), core.fontFamily.body.native, lineHeight, semantic.message.base, fontSize);
-});
-var Li = (0, utils_1.styledComponentWithBreakpoints)(StyledLi);
-exports.Li = Li;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;