@dpocean/chatui 1.0.0

package/lib/components/Input/index.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+export type InputVariant = 'outline' | 'filled' | 'flushed';
+export type InputRef = HTMLInputElement | HTMLTextAreaElement;
+export interface InputProps extends Omit<React.InputHTMLAttributes<InputRef>, 'onChange'> {
+    variant?: InputVariant;
+    rows?: number;
+    minRows?: number;
+    maxRows?: number;
+    maxLength?: number;
+    showCount?: boolean;
+    multiline?: boolean;
+    autoSize?: boolean;
+    onChange?: (value: string, event: React.ChangeEvent<InputRef>) => void;
+}
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<InputRef>>;

package/lib/components/Input/index.js

@@ -0,0 +1,127 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Input = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Form = require("../Form");
+var _useForwardRef = _interopRequireDefault(require("../../hooks/useForwardRef"));
+var _excluded = ["className", "type", "variant", "value", "placeholder", "rows", "minRows", "maxRows", "maxLength", "showCount", "multiline", "autoSize", "onChange"];
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function getCount(value, maxLength) {
+  return "".concat("".concat(value).length).concat(maxLength ? "/".concat(maxLength) : '');
+}
+var Input = exports.Input = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var className = props.className,
+    _props$type = props.type,
+    type = _props$type === void 0 ? 'text' : _props$type,
+    oVariant = props.variant,
+    value = props.value,
+    placeholder = props.placeholder,
+    _props$rows = props.rows,
+    oRows = _props$rows === void 0 ? 1 : _props$rows,
+    _props$minRows = props.minRows,
+    minRows = _props$minRows === void 0 ? oRows : _props$minRows,
+    _props$maxRows = props.maxRows,
+    maxRows = _props$maxRows === void 0 ? 5 : _props$maxRows,
+    maxLength = props.maxLength,
+    _props$showCount = props.showCount,
+    showCount = _props$showCount === void 0 ? !!maxLength : _props$showCount,
+    multiline = props.multiline,
+    autoSize = props.autoSize,
+    onChange = props.onChange,
+    other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var initialRows = oRows;
+  if (initialRows < minRows) {
+    initialRows = minRows;
+  } else if (initialRows > maxRows) {
+    initialRows = maxRows;
+  }
+  var _useState = (0, _react.useState)(initialRows),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    rows = _useState2[0],
+    setRows = _useState2[1];
+  var _useState3 = (0, _react.useState)(21),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    lineHeight = _useState4[0],
+    setLineHeight = _useState4[1];
+  var inputRef = (0, _useForwardRef.default)(ref);
+  var theme = (0, _react.useContext)(_Form.ThemeContext);
+  var variant = oVariant || (theme === 'light' ? 'flushed' : 'outline');
+  var isMultiline = multiline || autoSize || oRows > 1;
+  var Element = isMultiline ? 'textarea' : 'input';
+  (0, _react.useEffect)(function () {
+    if (!inputRef.current) return;
+    var lhStr = getComputedStyle(inputRef.current, null).lineHeight;
+    var lh = Number(lhStr.replace('px', ''));
+    if (lh !== lineHeight) {
+      setLineHeight(lh);
+    }
+  }, [inputRef, lineHeight]);
+  var updateRow = (0, _react.useCallback)(function () {
+    if (!autoSize || !inputRef.current) return;
+    var target = inputRef.current;
+    var prevRows = target.rows;
+    target.rows = minRows;
+    if (placeholder) {
+      target.placeholder = '';
+    }
+
+    // eslint-disable-next-line no-bitwise
+    var currentRows = ~~(target.scrollHeight / lineHeight);
+    if (currentRows === prevRows) {
+      target.rows = currentRows;
+    }
+    if (currentRows >= maxRows) {
+      target.rows = maxRows;
+      target.scrollTop = target.scrollHeight;
+    }
+    setRows(currentRows < maxRows ? currentRows : maxRows);
+    if (placeholder) {
+      target.placeholder = placeholder;
+    }
+  }, [autoSize, inputRef, lineHeight, maxRows, minRows, placeholder]);
+  (0, _react.useEffect)(function () {
+    if (value === '') {
+      setRows(initialRows);
+    } else {
+      updateRow();
+    }
+  }, [initialRows, updateRow, value]);
+  var handleChange = (0, _react.useCallback)(function (e) {
+    updateRow();
+    if (onChange) {
+      var valueFromEvent = e.target.value;
+      var shouldTrim = maxLength && valueFromEvent.length > maxLength;
+      var val = shouldTrim ? valueFromEvent.substr(0, maxLength) : valueFromEvent;
+      onChange(val, e);
+    }
+  }, [maxLength, onChange, updateRow]);
+  var input = /*#__PURE__*/_react.default.createElement(Element, (0, _extends2.default)({
+    className: (0, _clsx.default)('Input', "Input--".concat(variant), className),
+    type: type,
+    value: value,
+    placeholder: placeholder,
+    maxLength: maxLength,
+    ref: inputRef,
+    rows: rows,
+    onChange: handleChange
+  }, other));
+  if (showCount) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _clsx.default)('InputWrapper', {
+        'has-counter': showCount
+      })
+    }, input, showCount && /*#__PURE__*/_react.default.createElement("div", {
+      className: "Input-counter"
+    }, getCount(value, maxLength)));
+  }
+  return input;
+});

package/lib/components/KvList/KvItem.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { TextProps } from '../Text';
+export interface KvItemProps {
+    className?: string;
+    title: string;
+    level?: number;
+    desc?: string;
+    highlight?: boolean;
+    ellipsis?: TextProps['truncate'];
+    rightIcon?: string;
+    onClick?: (event: React.MouseEvent) => void;
+    children: React.ReactNode;
+}
+export declare const KvItem: (props: KvItemProps) => React.JSX.Element;

package/lib/components/KvList/KvItem.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.KvItem = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Icon = require("../Icon");
+var _Text = require("../Text");
+var _Flex = require("../Flex");
+var _excluded = ["className", "title", "level", "highlight", "desc", "onClick", "ellipsis", "rightIcon", "children"];
+var KvItem = exports.KvItem = function KvItem(props) {
+  var className = props.className,
+    title = props.title,
+    level = props.level,
+    highlight = props.highlight,
+    desc = props.desc,
+    onClick = props.onClick,
+    _props$ellipsis = props.ellipsis,
+    ellipsis = _props$ellipsis === void 0 ? !!onClick : _props$ellipsis,
+    _props$rightIcon = props.rightIcon,
+    rightIcon = _props$rightIcon === void 0 ? onClick ? 'chevron-right' : undefined : _props$rightIcon,
+    children = props.children,
+    other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var isString = typeof children === 'string';
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+    className: (0, _clsx.default)('KvItem', className),
+    "data-level": level,
+    "data-highlight": highlight,
+    onClick: onClick,
+    role: "item"
+  }, other), /*#__PURE__*/_react.default.createElement(_Flex.Flex, {
+    className: "KvItem-content",
+    alignItems: ellipsis ? 'center' : undefined
+  }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
+    className: "KvItem-title",
+    truncate: true
+  }, title), /*#__PURE__*/_react.default.createElement(_Flex.FlexItem, {
+    className: "KvItem-main"
+  }, isString ? /*#__PURE__*/_react.default.createElement(_Text.Text, {
+    truncate: ellipsis
+  }, children) : children), rightIcon && /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+    type: rightIcon
+  })), desc && /*#__PURE__*/_react.default.createElement("div", {
+    className: "KvItem-desc"
+  }, desc));
+};

package/lib/components/KvList/KvList.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export type KvListProps = {
+    className?: string;
+    align?: 'left' | 'right';
+    children?: React.ReactNode;
+};
+export declare const KvList: (props: KvListProps) => React.JSX.Element;

package/lib/components/KvList/KvList.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.KvList = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var KvList = exports.KvList = function KvList(props) {
+  var className = props.className,
+    _props$align = props.align,
+    align = _props$align === void 0 ? 'left' : _props$align,
+    children = props.children;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _clsx.default)('KvList', className),
+    "data-align": align,
+    role: "list"
+  }, children);
+};

package/lib/components/KvList/index.d.ts

@@ -0,0 +1,4 @@
+export { KvList } from './KvList';
+export type { KvListProps } from './KvList';
+export { KvItem } from './KvItem';
+export type { KvItemProps } from './KvItem';

package/lib/components/KvList/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "KvItem", {
+  enumerable: true,
+  get: function get() {
+    return _KvItem.KvItem;
+  }
+});
+Object.defineProperty(exports, "KvList", {
+  enumerable: true,
+  get: function get() {
+    return _KvList.KvList;
+  }
+});
+var _KvList = require("./KvList");
+var _KvItem = require("./KvItem");

package/lib/components/Label/index.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const Label: React.FC;

package/lib/components/Label/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Label = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _excluded = ["children"];
+/* eslint-disable jsx-a11y/label-has-associated-control */
+var Label = exports.Label = function Label(props) {
+  var children = props.children,
+    other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  return /*#__PURE__*/_react.default.createElement("label", (0, _extends2.default)({
+    className: "Label"
+  }, other), children);
+};

package/lib/components/LazyComponent/SuspenseWrap.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { LazyComponentPropsWithComponent } from './interface';
+export declare const SuspenseWrap: (props: LazyComponentPropsWithComponent) => React.JSX.Element | null;

package/lib/components/LazyComponent/SuspenseWrap.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SuspenseWrap = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _ErrorBoundary = require("../ErrorBoundary");
+var _excluded = ["component", "onError", "fallback"];
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var SuspenseWrap = exports.SuspenseWrap = function SuspenseWrap(props) {
+  var Comp = props.component,
+    onError = props.onError,
+    fallback = props.fallback,
+    rest = (0, _objectWithoutProperties2.default)(props, _excluded);
+  return Comp ? /*#__PURE__*/_react.default.createElement(_ErrorBoundary.ErrorBoundary, {
+    onError: onError
+  }, /*#__PURE__*/_react.default.createElement(_react.Suspense, {
+    fallback: fallback || null
+  }, /*#__PURE__*/_react.default.createElement(Comp, rest))) : null;
+};

package/lib/components/LazyComponent/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { LazyComponentProps, LazyComponentPropsWithCode, LazyComponentOnLoadParams } from './interface';
+export type { LazyComponentProps, LazyComponentOnLoadParams };
+export declare const LazyComponentWithCode: (props: LazyComponentPropsWithCode) => React.JSX.Element;
+export declare const LazyComponent: (props: LazyComponentProps) => React.JSX.Element;
+export default LazyComponent;

package/lib/components/LazyComponent/index.js

@@ -0,0 +1,57 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.LazyComponentWithCode = exports.LazyComponent = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _SuspenseWrap = require("./SuspenseWrap");
+var _useComponents2 = require("../ComponentsProvider/useComponents");
+var _excluded = ["code", "fallback", "onLoad", "onError"],
+  _excluded2 = ["component", "code", "onLoad"];
+var LazyComponentWithCode = exports.LazyComponentWithCode = function LazyComponentWithCode(props) {
+  var code = props.code,
+    fallback = props.fallback,
+    onLoad = props.onLoad,
+    onError = props.onError,
+    rest = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var _useComponents = (0, _useComponents2.useComponents)(),
+    getComponent = _useComponents.getComponent;
+  var Comp = getComponent(code, function (res) {
+    if ('async' in res && onLoad) {
+      onLoad(res);
+    } else if ('errCode' in res && onError) {
+      onError(new Error(res.errCode));
+    }
+  });
+  return /*#__PURE__*/_react.default.createElement(_SuspenseWrap.SuspenseWrap, (0, _extends2.default)({
+    component: Comp,
+    onError: onError,
+    fallback: fallback
+  }, rest));
+};
+var LazyComponent = exports.LazyComponent = function LazyComponent(props) {
+  var component = props.component,
+    code = props.code,
+    onLoad = props.onLoad,
+    rest = (0, _objectWithoutProperties2.default)(props, _excluded2);
+  if (component) {
+    if (onLoad) {
+      onLoad({
+        async: false,
+        component: component
+      });
+    }
+    return /*#__PURE__*/_react.default.createElement(_SuspenseWrap.SuspenseWrap, (0, _extends2.default)({
+      component: component
+    }, rest));
+  }
+  return /*#__PURE__*/_react.default.createElement(LazyComponentWithCode, (0, _extends2.default)({
+    code: code,
+    onLoad: onLoad
+  }, rest));
+};
+var _default = exports.default = LazyComponent;

package/lib/components/LazyComponent/interface.d.ts

@@ -0,0 +1,18 @@
+interface LazyComponentBaseProps {
+    fallback?: NonNullable<React.ReactNode> | null;
+    onError?: (error: Error, info?: React.ErrorInfo) => void;
+    [k: string]: any;
+}
+export interface LazyComponentPropsWithComponent extends LazyComponentBaseProps {
+    component: React.ComponentType | null;
+}
+export interface LazyComponentOnLoadParams {
+    async: boolean;
+    component: React.ComponentType<any>;
+}
+export interface LazyComponentPropsWithCode extends LazyComponentBaseProps {
+    code: string;
+    onLoad?: (e: LazyComponentOnLoadParams) => void;
+}
+export type LazyComponentProps = LazyComponentPropsWithComponent | LazyComponentPropsWithCode;
+export {};

package/lib/components/LazyComponent/interface.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/components/List/List.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export type ListProps = {
+    className?: string;
+    bordered?: boolean;
+    variant?: 'buttons';
+    children?: React.ReactNode;
+};
+export declare const List: React.ForwardRefExoticComponent<ListProps & React.RefAttributes<HTMLDivElement>>;

package/lib/components/List/List.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.List = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var List = exports.List = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var _props$bordered = props.bordered,
+    bordered = _props$bordered === void 0 ? false : _props$bordered,
+    className = props.className,
+    variant = props.variant,
+    children = props.children;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _clsx.default)('List', {
+      'List--bordered': bordered
+    }, className),
+    "data-variant": variant,
+    role: "list",
+    ref: ref
+  }, children);
+});

package/lib/components/List/ListItem.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+interface ListItemPropsBase {
+    className?: string;
+    as?: React.ElementType;
+    content?: React.ReactNode;
+    ellipsis?: boolean;
+    rightIcon?: string;
+    onClick?: (event: React.MouseEvent) => void;
+    children?: React.ReactNode;
+}
+interface ListItemPropsWithLink extends ListItemPropsBase {
+    as: 'a';
+    href: string;
+}
+export type ListItemProps = ListItemPropsBase | ListItemPropsWithLink;
+export declare const ListItem: React.ForwardRefExoticComponent<ListItemProps & React.RefAttributes<HTMLElement>>;
+export {};

package/lib/components/List/ListItem.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ListItem = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Icon = require("../Icon");
+var _Text = require("../Text");
+var _excluded = ["className", "as", "content", "ellipsis", "rightIcon", "children", "onClick"];
+var ListItem = exports.ListItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var className = props.className,
+    _props$as = props.as,
+    Element = _props$as === void 0 ? 'div' : _props$as,
+    content = props.content,
+    ellipsis = props.ellipsis,
+    rightIcon = props.rightIcon,
+    children = props.children,
+    onClick = props.onClick,
+    other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  return /*#__PURE__*/_react.default.createElement(Element, (0, _extends2.default)({
+    className: (0, _clsx.default)('ListItem', className),
+    onClick: onClick,
+    role: "listitem"
+  }, other, {
+    ref: ref
+  }), /*#__PURE__*/_react.default.createElement(_Text.Text, {
+    className: "ListItem-content",
+    truncate: ellipsis
+  }, content || children), rightIcon && /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+    type: rightIcon
+  }));
+});

package/lib/components/List/index.d.ts

@@ -0,0 +1,4 @@
+export { List } from './List';
+export type { ListProps } from './List';
+export { ListItem } from './ListItem';
+export type { ListItemProps } from './ListItem';

package/lib/components/List/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "List", {
+  enumerable: true,
+  get: function get() {
+    return _List.List;
+  }
+});
+Object.defineProperty(exports, "ListItem", {
+  enumerable: true,
+  get: function get() {
+    return _ListItem.ListItem;
+  }
+});
+var _List = require("./List");
+var _ListItem = require("./ListItem");

package/lib/components/Loading/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export type LoadingProps = {
+    tip?: string;
+    children?: React.ReactNode;
+};
+export declare const Loading: (props: LoadingProps) => React.JSX.Element;

package/lib/components/Loading/index.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Loading = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Flex = require("../Flex");
+var _Icon = require("../Icon");
+var Loading = exports.Loading = function Loading(props) {
+  var tip = props.tip,
+    children = props.children;
+  return /*#__PURE__*/_react.default.createElement(_Flex.Flex, {
+    className: "Loading",
+    center: true
+  }, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+    type: "spinner",
+    spin: true
+  }), tip && /*#__PURE__*/_react.default.createElement("p", {
+    className: "Loading-tip"
+  }, tip), children);
+};

package/lib/components/MediaObject/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export type MediaObjectProps = {
+    className?: string;
+    picUrl?: string;
+    picAlt?: string;
+    picSize?: 'sm' | 'md' | 'lg';
+    title?: string;
+    meta?: React.ReactNode;
+};
+export declare const MediaObject: (props: MediaObjectProps) => React.JSX.Element;

package/lib/components/MediaObject/index.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MediaObject = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var MediaObject = exports.MediaObject = function MediaObject(props) {
+  var className = props.className,
+    picUrl = props.picUrl,
+    picSize = props.picSize,
+    title = props.title,
+    picAlt = props.picAlt,
+    meta = props.meta;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _clsx.default)('MediaObject', className)
+  }, picUrl && /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _clsx.default)('MediaObject-pic', picSize && "MediaObject-pic--".concat(picSize))
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: picUrl,
+    alt: picAlt || title
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "MediaObject-info"
+  }, /*#__PURE__*/_react.default.createElement("h3", {
+    className: "MediaObject-title"
+  }, title), /*#__PURE__*/_react.default.createElement("div", {
+    className: "MediaObject-meta"
+  }, meta)));
+};