@steroidsjs/core 2.1.0-beta.6 → 2.1.1

package/ui/content/Detail/Detail.js

@@ -0,0 +1,155 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.constants = exports.DetailLayoutEnum = void 0;
+var react_1 = __importStar(require("react"));
+var isArray_1 = __importDefault(require("lodash/isArray"));
+var orderBy_1 = __importDefault(require("lodash/orderBy"));
+var hooks_1 = require("../../../hooks");
+var DetailItem_1 = __importDefault(require("./DetailItem"));
+/**
+ * Detail
+ * Представление данных в виде таблицы, в которой поля группируются по принципу "ключ-значение".
+ */
+var DetailLayoutEnum;
+(function (DetailLayoutEnum) {
+    DetailLayoutEnum["Horizontal"] = "horizontal";
+    DetailLayoutEnum["Vertical"] = "vertical";
+})(DetailLayoutEnum = exports.DetailLayoutEnum || (exports.DetailLayoutEnum = {}));
+exports.constants = Object.freeze({
+    MAX_COLUMN: 3,
+    CELLS_IN_COLUMN: 2,
+    TABLE_HEAD_COLSPAN: 1
+});
+var getDetailItems = function (children) { return (react_1["default"].Children.toArray(children)
+    .filter(function (child) { var _a; return ((_a = child === null || child === void 0 ? void 0 : child.type) === null || _a === void 0 ? void 0 : _a.displayName) === DetailItem_1["default"].displayName; })); };
+var normalizeSpan = function (span, column) { return (span > column)
+    ? column
+    : (span || 1); };
+var createRows = function (detailItems, column, layout) {
+    var result = [];
+    var freeColumns = column;
+    var rowIndex = 0;
+    result[rowIndex] = [];
+    detailItems.forEach(function (detailItem, index) {
+        if (!freeColumns) {
+            freeColumns = column;
+            rowIndex += 1;
+            result[rowIndex] = [];
+        }
+        var isLastDetailItem = index === (detailItems.length - 1);
+        var span = normalizeSpan(detailItem.props.span, column);
+        var nextSpan = null;
+        if (!isLastDetailItem) {
+            nextSpan = normalizeSpan(detailItems[index + 1].props.span, column);
+        }
+        freeColumns -= span;
+        if (isLastDetailItem || nextSpan > freeColumns) {
+            span += freeColumns;
+            freeColumns = 0;
+        }
+        result[rowIndex].push(__assign(__assign({}, detailItem.props), { colspan: layout === DetailLayoutEnum.Horizontal
+                ? span * exports.constants.CELLS_IN_COLUMN - exports.constants.TABLE_HEAD_COLSPAN
+                : span, value: detailItem }));
+    });
+    return result;
+};
+var normalizeResponsiveProps = function (props) { return (typeof props === 'boolean'
+    ? {
+        enable: props,
+        media: [
+            {
+                breakpoint: 500,
+                column: 1
+            },
+            {
+                breakpoint: 700,
+                column: 2
+            },
+            {
+                breakpoint: 1000,
+                column: 3
+            },
+        ]
+    }
+    : __assign(__assign({ enable: true }, props), { media: orderBy_1["default"](props.media, ['breakpoint'], ['asc']) })); };
+function Detail(props) {
+    var components = hooks_1.useComponents();
+    var detailItems = react_1.useMemo(function () { return getDetailItems(props.children); }, [props.children]);
+    var responsiveProps = react_1.useMemo(function () { return normalizeResponsiveProps(props.responsive); }, [props.responsive]);
+    var _a = react_1.useState(props.column || exports.constants.MAX_COLUMN), column = _a[0], setColumn = _a[1];
+    var _b = react_1.useState(createRows(detailItems, column, props.layout)), rows = _b[0], setRows = _b[1];
+    // Add responsive option
+    var resizeObserver = react_1.useRef(new ResizeObserver(function (entries) {
+        entries.forEach(function (entry) {
+            if (!entry.borderBoxSize) {
+                return;
+            }
+            var inlineSize = (isArray_1["default"](entry.borderBoxSize)
+                ? entry.borderBoxSize[0]
+                : entry.borderBoxSize).inlineSize;
+            // eslint-disable-next-line no-restricted-syntax
+            for (var _i = 0, _a = responsiveProps.media; _i < _a.length; _i++) {
+                var mediaItem = _a[_i];
+                if (inlineSize < mediaItem.breakpoint) {
+                    setColumn(mediaItem.column);
+                    return;
+                }
+            }
+            setColumn(props.column || exports.constants.MAX_COLUMN);
+        });
+    }));
+    var resizedNodeRef = react_1["default"].useCallback(function (node) {
+        if (!resizeObserver.current) {
+            return;
+        }
+        if (node !== null) {
+            resizeObserver.current.observe(node);
+            return;
+        }
+        resizeObserver.current.disconnect();
+    }, [resizeObserver]);
+    react_1.useEffect(function () {
+        setRows(createRows(detailItems, column, props.layout));
+    }, [column, detailItems, props.layout]);
+    return components.ui.renderView(props.view || 'content.DetailView', __assign(__assign(__assign({}, props), { rows: rows }), (responsiveProps.enable ? { resizedNodeRef: resizedNodeRef } : {})));
+}
+exports["default"] = Detail;
+Detail.defaultProps = {
+    size: 'sm',
+    layout: DetailLayoutEnum.Horizontal,
+    column: exports.constants.MAX_COLUMN,
+    responsive: true
+};

package/ui/content/Detail/DetailItem.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+/**
+ * DetailItem
+ * Элемент "ключ-значение" в таблице Detail
+ */
+export interface IDetailItemProps {
+    /**
+     * Наименование
+     * @example 'Product'
+     */
+    label: string | number | React.ReactNode;
+    /**
+     * Значение
+     * @example 'Cloud Database'
+     */
+    children: React.ReactNode;
+    /**
+     * Количество колонок, которое занимает элемент
+     * @example 3
+     */
+    span?: number;
+    /**
+     * Переопределение view React компонента для кастомизации отображения
+     * @example MyCustomView
+     */
+    view?: CustomView;
+    /**
+     * Дополнительный CSS-класс для ячейки с наименованием
+     */
+    labelClassName?: string;
+    /**
+     * Дополнительный CSS-класс для ячейки со значением
+     */
+    contentClassName?: string;
+}
+declare function DetailItem(props: IDetailItemProps): JSX.Element;
+declare namespace DetailItem {
+    var defaultProps: {
+        span: number;
+    };
+    var displayName: string;
+}
+export default DetailItem;

package/ui/content/Detail/DetailItem.js

@@ -0,0 +1,10 @@
+"use strict";
+exports.__esModule = true;
+function DetailItem(props) {
+    return props.children;
+}
+exports["default"] = DetailItem;
+DetailItem.defaultProps = {
+    span: 1
+};
+DetailItem.displayName = 'DetailItem';

package/ui/content/Detail/demo/basic.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+/**
+ * Basic table with title
+ * @order 1
+ * @col 8
+ */
+export default _default;

package/ui/content/Detail/demo/basic.js

@@ -0,0 +1,56 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var React = __importStar(require("react"));
+var Detail_1 = __importDefault(require("../Detail"));
+var DetailItem_1 = __importDefault(require("../DetailItem"));
+/**
+ * Basic table with title
+ * @order 1
+ * @col 8
+ */
+exports["default"] = (function () { return (React.createElement(React.Fragment, null,
+    React.createElement(Detail_1["default"], { title: "Users", responsive: false },
+        React.createElement(DetailItem_1["default"], { label: "Product" }, "Cloud Database"),
+        React.createElement(DetailItem_1["default"], { label: "Billing Mode" }, "Prepaid"),
+        React.createElement(DetailItem_1["default"], { label: "Automatic Renewal" }, "YES"),
+        React.createElement(DetailItem_1["default"], { label: "Order time" }, "2018-04-24  18:00:00"),
+        React.createElement(DetailItem_1["default"], { label: "Usage Time", span: 2 }, "2018-04-24  18:00:00"),
+        React.createElement(DetailItem_1["default"], { label: "Status", span: 3 }, "Running"),
+        React.createElement(DetailItem_1["default"], { label: "Negotaited Amount" }, "$80.00"),
+        React.createElement(DetailItem_1["default"], { label: "Discount" }, "$20.00"),
+        React.createElement(DetailItem_1["default"], { label: "Official Receipts" }, "$60.00"),
+        React.createElement(DetailItem_1["default"], { label: "Config Info" },
+            "Data disk type: MongoDB",
+            React.createElement("br", null),
+            "Database version: 3.4",
+            React.createElement("br", null),
+            "Package: dds.mongo.mid",
+            React.createElement("br", null),
+            "Storage space: 10 GB",
+            React.createElement("br", null),
+            "Replication factor: 3",
+            React.createElement("br", null),
+            "Region: East China 1",
+            React.createElement("br", null))))); });

package/ui/content/Detail/demo/colors.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+export default _default;

package/ui/content/Detail/demo/colors.js

@@ -0,0 +1,39 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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;
+};
+exports.__esModule = true;
+var content_1 = require("@steroidsjs/core/ui/content");
+var React = __importStar(require("react"));
+var colors = {
+    primary: 'primary',
+    sd: 'secondary',
+    sc: 'success',
+    "if": 'info',
+    wr: 'warning',
+    dn: 'danger',
+    lg: 'light',
+    dr: 'dark'
+};
+function capitalize(s) {
+    return s[0].toUpperCase() + s.slice(1);
+}
+exports["default"] = (function () { return (React.createElement("div", { style: { display: 'flex', flexWrap: 'wrap' } }, Object.values(colors).map(function (color) { return (React.createElement("div", { style: { marginRight: '30px', marginBottom: '30px' }, key: color },
+    React.createElement(React.Fragment, null,
+        React.createElement(content_1.Card, { style: { width: '320px' }, header: 'Header', title: capitalize(color) + ' card title', color: color }, "Some quick example text to build on the card title and make up the bulk of the card's content.")))); }))); });

package/ui/content/Detail/demo/controls.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+/**
+ * Table with controls
+ * @order 3
+ * @col 8
+ */
+export default _default;

package/ui/content/Detail/demo/controls.js

@@ -0,0 +1,56 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var React = __importStar(require("react"));
+var Detail_1 = __importDefault(require("../Detail"));
+var DetailItem_1 = __importDefault(require("../DetailItem"));
+/**
+ * Table with controls
+ * @order 3
+ * @col 8
+ */
+exports["default"] = (function () { return (React.createElement(React.Fragment, null,
+    React.createElement(Detail_1["default"], { controls: [{ label: 'Edit' }], responsive: false },
+        React.createElement(DetailItem_1["default"], { label: "Product" }, "Cloud Database"),
+        React.createElement(DetailItem_1["default"], { label: "Billing Mode" }, "Prepaid"),
+        React.createElement(DetailItem_1["default"], { label: "Automatic Renewal" }, "YES"),
+        React.createElement(DetailItem_1["default"], { label: "Order time" }, "2018-04-24  18:00:00"),
+        React.createElement(DetailItem_1["default"], { label: "Usage Time", span: 2 }, "2018-04-24  18:00:00"),
+        React.createElement(DetailItem_1["default"], { label: "Status", span: 3 }, "Running"),
+        React.createElement(DetailItem_1["default"], { label: "Negotaited Amount" }, "$80.00"),
+        React.createElement(DetailItem_1["default"], { label: "Discount" }, "$20.00"),
+        React.createElement(DetailItem_1["default"], { label: "Official Receipts" }, "$60.00"),
+        React.createElement(DetailItem_1["default"], { label: "Config Info" },
+            "Data disk type: MongoDB",
+            React.createElement("br", null),
+            "Database version: 3.4",
+            React.createElement("br", null),
+            "Package: dds.mongo.mid",
+            React.createElement("br", null),
+            "Storage space: 10 GB",
+            React.createElement("br", null),
+            "Replication factor: 3",
+            React.createElement("br", null),
+            "Region: East China 1",
+            React.createElement("br", null))))); });

package/ui/content/Detail/demo/layout.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+/**
+ * Table with vertical layout
+ * @order 4
+ * @col 8
+ */
+export default _default;

package/ui/content/Detail/demo/layout.js

@@ -0,0 +1,56 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var React = __importStar(require("react"));
+var Detail_1 = __importStar(require("../Detail"));
+var DetailItem_1 = __importDefault(require("../DetailItem"));
+/**
+ * Table with vertical layout
+ * @order 4
+ * @col 8
+ */
+exports["default"] = (function () { return (React.createElement(React.Fragment, null,
+    React.createElement(Detail_1["default"], { layout: Detail_1.DetailLayoutEnum.Vertical, responsive: false },
+        React.createElement(DetailItem_1["default"], { label: "Product" }, "Cloud Database"),
+        React.createElement(DetailItem_1["default"], { label: "Billing Mode" }, "Prepaid"),
+        React.createElement(DetailItem_1["default"], { label: "Automatic Renewal" }, "YES"),
+        React.createElement(DetailItem_1["default"], { label: "Order time" }, "2018-04-24  18:00:00"),
+        React.createElement(DetailItem_1["default"], { label: "Usage Time", span: 2 }, "2018-04-24  18:00:00"),
+        React.createElement(DetailItem_1["default"], { label: "Status", span: 3 }, "Running"),
+        React.createElement(DetailItem_1["default"], { label: "Negotaited Amount" }, "$80.00"),
+        React.createElement(DetailItem_1["default"], { label: "Discount" }, "$20.00"),
+        React.createElement(DetailItem_1["default"], { label: "Official Receipts" }, "$60.00"),
+        React.createElement(DetailItem_1["default"], { label: "Config Info" },
+            "Data disk type: MongoDB",
+            React.createElement("br", null),
+            "Database version: 3.4",
+            React.createElement("br", null),
+            "Package: dds.mongo.mid",
+            React.createElement("br", null),
+            "Storage space: 10 GB",
+            React.createElement("br", null),
+            "Replication factor: 3",
+            React.createElement("br", null),
+            "Region: East China 1",
+            React.createElement("br", null))))); });

package/ui/content/Detail/demo/responsive.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+/**
+ * When the screen width resizes, the number of columns changes
+ * @order 4
+ * @col 8
+ */
+export default _default;

package/ui/content/Detail/demo/responsive.js

@@ -0,0 +1,71 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var React = __importStar(require("react"));
+var Detail_1 = __importDefault(require("../Detail"));
+var DetailItem_1 = __importDefault(require("../DetailItem"));
+/**
+ * When the screen width resizes, the number of columns changes
+ * @order 4
+ * @col 8
+ */
+exports["default"] = (function () { return (React.createElement(React.Fragment, null,
+    React.createElement(Detail_1["default"], { column: 4, responsive: {
+            media: [
+                {
+                    breakpoint: 500,
+                    column: 1
+                },
+                {
+                    breakpoint: 700,
+                    column: 2
+                },
+                {
+                    breakpoint: 900,
+                    column: 3
+                },
+            ]
+        } },
+        React.createElement(DetailItem_1["default"], { label: "Product" }, "Cloud Database"),
+        React.createElement(DetailItem_1["default"], { label: "Billing Mode" }, "Prepaid"),
+        React.createElement(DetailItem_1["default"], { label: "Automatic Renewal" }, "YES"),
+        React.createElement(DetailItem_1["default"], { label: "Order time" }, "2018-04-24  18:00:00"),
+        React.createElement(DetailItem_1["default"], { label: "Usage Time", span: 2 }, "2018-04-24  18:00:00"),
+        React.createElement(DetailItem_1["default"], { label: "Status", span: 3 }, "Running"),
+        React.createElement(DetailItem_1["default"], { label: "Negotaited Amount" }, "$80.00"),
+        React.createElement(DetailItem_1["default"], { label: "Discount" }, "$20.00"),
+        React.createElement(DetailItem_1["default"], { label: "Official Receipts" }, "$60.00"),
+        React.createElement(DetailItem_1["default"], { label: "Config Info" },
+            "Data disk type: MongoDB",
+            React.createElement("br", null),
+            "Database version: 3.4",
+            React.createElement("br", null),
+            "Package: dds.mongo.mid",
+            React.createElement("br", null),
+            "Storage space: 10 GB",
+            React.createElement("br", null),
+            "Replication factor: 3",
+            React.createElement("br", null),
+            "Region: East China 1",
+            React.createElement("br", null))))); });

package/ui/content/Detail/demo/sizes.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+/**
+ * Table with different cell's sizes
+ * @order 2
+ * @col 8
+ */
+export default _default;

package/ui/content/Detail/demo/sizes.js

@@ -0,0 +1,61 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var React = __importStar(require("react"));
+var Detail_1 = __importDefault(require("../Detail"));
+var DetailItem_1 = __importDefault(require("../DetailItem"));
+var sizes = {
+    sm: 'Small',
+    md: 'Middle',
+    lg: 'Large'
+};
+/**
+ * Table with different cell's sizes
+ * @order 2
+ * @col 8
+ */
+exports["default"] = (function () { return (React.createElement(React.Fragment, null, Object.keys(sizes).map(function (size) { return (React.createElement("div", { style: { marginBottom: '30px' }, key: size },
+    React.createElement(Detail_1["default"], { title: sizes[size], size: size, responsive: false },
+        React.createElement(DetailItem_1["default"], { label: "Product" }, "Cloud Database"),
+        React.createElement(DetailItem_1["default"], { label: "Billing Mode" }, "Prepaid"),
+        React.createElement(DetailItem_1["default"], { label: "Automatic Renewal" }, "YES"),
+        React.createElement(DetailItem_1["default"], { label: "Order time" }, "2018-04-24  18:00:00"),
+        React.createElement(DetailItem_1["default"], { label: "Usage Time", span: 2 }, "2018-04-24  18:00:00"),
+        React.createElement(DetailItem_1["default"], { label: "Status", span: 3 }, "Running"),
+        React.createElement(DetailItem_1["default"], { label: "Negotaited Amount" }, "$80.00"),
+        React.createElement(DetailItem_1["default"], { label: "Discount" }, "$20.00"),
+        React.createElement(DetailItem_1["default"], { label: "Official Receipts" }, "$60.00"),
+        React.createElement(DetailItem_1["default"], { label: "Config Info" },
+            "Data disk type: MongoDB",
+            React.createElement("br", null),
+            "Database version: 3.4",
+            React.createElement("br", null),
+            "Package: dds.mongo.mid",
+            React.createElement("br", null),
+            "Storage space: 10 GB",
+            React.createElement("br", null),
+            "Replication factor: 3",
+            React.createElement("br", null),
+            "Region: East China 1",
+            React.createElement("br", null))))); }))); });

package/ui/content/Detail/index.d.ts

@@ -0,0 +1,3 @@
+import Detail from './Detail';
+import DetailItem from './DetailItem';
+export { Detail, DetailItem };

package/ui/content/Detail/index.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.DetailItem = exports.Detail = void 0;
+var Detail_1 = __importDefault(require("./Detail"));
+exports.Detail = Detail_1["default"];
+var DetailItem_1 = __importDefault(require("./DetailItem"));
+exports.DetailItem = DetailItem_1["default"];

package/ui/content/DropDown/DropDown.d.ts

@@ -29,6 +29,7 @@ export interface IDropDownViewProps extends IDropDownProps, IAbsolutePositioning
 declare function DropDown(props: IDropDownProps): JSX.Element;
 declare namespace DropDown {
     var defaultProps: {
+        autoPositioning: boolean;
         componentDestroyDelay: number;
         defaultVisible: boolean;
         gap: number;

package/ui/content/DropDown/DropDown.js

@@ -71,6 +71,7 @@ function DropDown(props) {
             React.createElement(DropDownView, { className: props.className, forwardedRef: forwardedRef, content: props.content, position: position, style: style, calculatePosition: calculatePosition, isComponentVisible: isComponentVisible })))));
 }
 DropDown.defaultProps = {
+    autoPositioning: false,
     componentDestroyDelay: 300,
     defaultVisible: false,
     gap: 15,

package/ui/content/index.d.ts

@@ -0,0 +1,13 @@
+import { Avatar, AvatarGroup } from './Avatar';
+import Card from './Card';
+import DropDown from './DropDown';
+import Alert from './Alert';
+export { Avatar, AvatarGroup, Alert, Card, DropDown, };
+declare const _default: {
+    Avatar: typeof Avatar;
+    AvatarGroup: typeof AvatarGroup;
+    Alert: typeof Alert;
+    Card: typeof Card;
+    DropDown: typeof DropDown;
+};
+export default _default;