@qiwi/pijma-mobile 1.153.0 → 1.154.2

package/lib/dts/details/Details.d.ts

@@ -0,0 +1,16 @@
+import { Value } from '@qiwi/pijma-core';
+import { FC, ReactElement } from 'react';
+declare type DetailsText = ReactElement | string;
+export interface DetailsProps {
+    children: {
+        title: DetailsText;
+        content: DetailsText | DetailsText[];
+    }[];
+    dots?: boolean;
+    titleWidth?: Value;
+    contentWidth?: Value;
+    size?: 's' | 'm';
+    stub?: boolean | number[];
+}
+export declare const Details: FC<DetailsProps>;
+export {};

package/lib/dts/details/index.d.ts

@@ -0,0 +1 @@
+export * from './Details';

package/lib/es5/details/Details.js

@@ -0,0 +1,166 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Details", {
+    enumerable: true,
+    get: function() {
+        return Details;
+    }
+});
+var _interopRequireDefault = require("@swc/helpers/lib/_interop_require_default.js").default;
+var _jsxRuntime = require("react/jsx-runtime");
+var _pijmaCore = require("@qiwi/pijma-core");
+var _react = /*#__PURE__*/ _interopRequireDefault(require("react"));
+var _typography = require("../typography/index.js");
+var indentDots = {
+    s: "6px",
+    m: "8px"
+};
+var bottomDots = {
+    s: "5px",
+    m: "7px"
+};
+var Details = function(param) {
+    var children = param.children, dots = param.dots, titleWidth = param.titleWidth, contentWidth = param.contentWidth, _size = param.size, size = _size === void 0 ? "s" : _size, _stub = param.stub, stub = _stub === void 0 ? false : _stub;
+    return stub ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pijmaCore.Box, {
+        as: "dl",
+        width: "100%",
+        display: "table",
+        children: (Array.isArray(stub) ? stub : [
+            0.4,
+            0.5,
+            0.3
+        ]).map(function(width, i) {
+            return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_pijmaCore.Box, {
+                css: {
+                    display: "table-row"
+                },
+                children: [
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pijmaCore.Box, {
+                        as: "dt",
+                        width: titleWidth || 0.5,
+                        pt: i !== 0 ? 2 : undefined,
+                        css: {
+                            display: "table-cell",
+                            verticalAlign: "bottom"
+                        },
+                        children: dots ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pijmaCore.Pos, {
+                            type: "relative",
+                            overflow: "hidden",
+                            css: {
+                                ":after": {
+                                    content: '""',
+                                    position: "absolute",
+                                    bottom: bottomDots[size],
+                                    borderBottom: "dashed 1px #e6e6e6",
+                                    width: "100%",
+                                    marginLeft: width * 100 + "%"
+                                }
+                            },
+                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pijmaCore.Box, {
+                                width: width,
+                                pr: indentDots[size],
+                                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_typography.Text, {
+                                    display: "block",
+                                    size: size,
+                                    stub: true
+                                })
+                            })
+                        }) : /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pijmaCore.Box, {
+                            width: width,
+                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_typography.Text, {
+                                display: "block",
+                                size: size,
+                                stub: true
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pijmaCore.Box, {
+                        as: "dd",
+                        width: contentWidth || 0.5,
+                        pt: i !== 0 ? 2 : undefined,
+                        css: {
+                            display: "table-cell",
+                            verticalAlign: "bottom"
+                        },
+                        pl: indentDots[size],
+                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pijmaCore.Box, {
+                            width: 1 - width,
+                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_typography.Text, {
+                                display: "block",
+                                size: size,
+                                stub: true
+                            })
+                        })
+                    })
+                ]
+            }, "" + i);
+        })
+    }) : /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pijmaCore.Box, {
+        as: "dl",
+        width: "100%",
+        display: "table",
+        children: children.map(function(item, i) {
+            return [].concat(item.content).map(function(content, j) {
+                return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_pijmaCore.Box, {
+                    css: {
+                        display: "table-row"
+                    },
+                    children: [
+                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pijmaCore.Box, {
+                            as: "dt",
+                            width: titleWidth,
+                            pt: j !== 0 || i !== 0 ? 2 : undefined,
+                            css: {
+                                display: "table-cell",
+                                verticalAlign: "bottom"
+                            },
+                            children: j === 0 ? dots ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pijmaCore.Pos, {
+                                type: "relative",
+                                overflow: "hidden",
+                                css: {
+                                    ":after": {
+                                        content: '""',
+                                        position: "absolute",
+                                        bottom: bottomDots[size],
+                                        borderBottom: "dashed 1px #e6e6e6",
+                                        width: "100%",
+                                        marginLeft: indentDots[size]
+                                    }
+                                },
+                                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_typography.Text, {
+                                    bold: false,
+                                    size: size,
+                                    color: "support",
+                                    children: item.title
+                                })
+                            }) : /*#__PURE__*/ (0, _jsxRuntime.jsx)(_typography.Text, {
+                                color: "support",
+                                bold: false,
+                                size: size,
+                                children: item.title
+                            }) : null
+                        }),
+                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pijmaCore.Box, {
+                            as: "dd",
+                            width: contentWidth,
+                            pt: j !== 0 || i !== 0 ? 2 : undefined,
+                            css: {
+                                display: "table-cell",
+                                verticalAlign: "bottom"
+                            },
+                            pl: indentDots[size],
+                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_typography.Text, {
+                                bold: false,
+                                size: size,
+                                children: content
+                            })
+                        })
+                    ]
+                }, i + "." + j);
+            });
+        })
+    });
+};
+Details.displayName = "Details";

package/lib/es5/details/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+var _exportStar = require("@swc/helpers/lib/_export_star.js").default;
+_exportStar(require("./Details.js"), exports);