@dpocean/chatui 1.0.0

package/lib/components/Flex/FlexItem.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FlexItem = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _excluded = ["className", "flex", "alignSelf", "order", "style", "children"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var FlexItem = exports.FlexItem = function FlexItem(props) {
+  var className = props.className,
+    flex = props.flex,
+    alignSelf = props.alignSelf,
+    order = props.order,
+    style = props.style,
+    children = props.children,
+    other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+    className: (0, _clsx.default)('FlexItem', className),
+    style: _objectSpread(_objectSpread({}, style), {}, {
+      flex: flex,
+      alignSelf: alignSelf,
+      order: order
+    })
+  }, other), children);
+};

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

@@ -0,0 +1,4 @@
+export { Flex } from './Flex';
+export type { FlexProps } from './Flex';
+export { FlexItem } from './FlexItem';
+export type { FlexItemProps } from './FlexItem';

package/lib/components/Flex/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Flex", {
+  enumerable: true,
+  get: function get() {
+    return _Flex.Flex;
+  }
+});
+Object.defineProperty(exports, "FlexItem", {
+  enumerable: true,
+  get: function get() {
+    return _FlexItem.FlexItem;
+  }
+});
+var _Flex = require("./Flex");
+var _FlexItem = require("./FlexItem");

package/lib/components/Form/Form.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export type FormProps = {
+    className?: string;
+    children?: React.ReactNode;
+    /** @deprecated Use `<Input>`'s `variant` instead */
+    theme?: string;
+};
+export declare const ThemeContext: React.Context<string>;
+export declare const Form: (props: FormProps) => React.JSX.Element;

package/lib/components/Form/Form.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ThemeContext = exports.Form = 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 _excluded = ["className", "theme", "children"];
+var ThemeContext = exports.ThemeContext = /*#__PURE__*/_react.default.createContext('');
+var Form = exports.Form = function Form(props) {
+  var className = props.className,
+    _props$theme = props.theme,
+    theme = _props$theme === void 0 ? '' : _props$theme,
+    children = props.children,
+    other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  return /*#__PURE__*/_react.default.createElement(ThemeContext.Provider, {
+    value: theme
+  }, /*#__PURE__*/_react.default.createElement("form", (0, _extends2.default)({
+    className: (0, _clsx.default)('Form', {
+      'is-light': theme === 'light'
+    }, className)
+  }, other), children));
+};

package/lib/components/Form/FormActions.d.ts

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

package/lib/components/Form/FormActions.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FormActions = 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 _excluded = ["children"];
+var FormActions = exports.FormActions = function FormActions(props) {
+  var children = props.children,
+    other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+    className: (0, _clsx.default)('FormActions')
+  }, other), children);
+};

package/lib/components/Form/FormItem.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export type FormItemProps = {
+    label?: string | React.ReactNode;
+    help?: string;
+    required?: boolean;
+    invalid?: boolean;
+    hidden?: boolean;
+    children?: React.ReactNode;
+};
+export declare const FormItem: (props: FormItemProps) => React.JSX.Element;

package/lib/components/Form/FormItem.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FormItem = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Label = require("../Label");
+var _HelpText = require("../HelpText");
+var FormItem = exports.FormItem = function FormItem(props) {
+  var label = props.label,
+    help = props.help,
+    required = props.required,
+    invalid = props.invalid,
+    hidden = props.hidden,
+    children = props.children;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _clsx.default)('FormItem', {
+      required: required,
+      'is-invalid': invalid
+    }),
+    hidden: hidden
+  }, label && /*#__PURE__*/_react.default.createElement(_Label.Label, null, label), children, help && /*#__PURE__*/_react.default.createElement(_HelpText.HelpText, null, help));
+};

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

@@ -0,0 +1,5 @@
+export { Form, ThemeContext } from './Form';
+export type { FormProps } from './Form';
+export { FormItem } from './FormItem';
+export type { FormItemProps } from './FormItem';
+export { FormActions } from './FormActions';

package/lib/components/Form/index.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Form", {
+  enumerable: true,
+  get: function get() {
+    return _Form.Form;
+  }
+});
+Object.defineProperty(exports, "FormActions", {
+  enumerable: true,
+  get: function get() {
+    return _FormActions.FormActions;
+  }
+});
+Object.defineProperty(exports, "FormItem", {
+  enumerable: true,
+  get: function get() {
+    return _FormItem.FormItem;
+  }
+});
+Object.defineProperty(exports, "ThemeContext", {
+  enumerable: true,
+  get: function get() {
+    return _Form.ThemeContext;
+  }
+});
+var _Form = require("./Form");
+var _FormItem = require("./FormItem");
+var _FormActions = require("./FormActions");

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import { IconButtonProps } from '../IconButton';
+import { ButtonProps } from '../Button';
+type TagProps = {
+    name: string;
+};
+type GoodsVariant = 'normal' | 'inList' | 'compact';
+export type GoodsRef = HTMLDivElement;
+export interface GoodsProps extends React.HTMLAttributes<GoodsRef> {
+    className?: string;
+    type?: 'goods' | 'order';
+    img?: string;
+    caption?: string;
+    name: string;
+    desc?: React.ReactNode;
+    tags?: TagProps[];
+    locale?: string;
+    currency?: string;
+    price?: number;
+    originalPrice?: number;
+    meta?: React.ReactNode;
+    count?: number;
+    unit?: string;
+    status?: string;
+    variant?: GoodsVariant;
+    action?: ButtonProps | IconButtonProps;
+    elderMode?: boolean;
+    asideContent?: React.ReactNode;
+    children?: React.ReactNode;
+}
+export declare const Goods: React.ForwardRefExoticComponent<GoodsProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/lib/components/Goods/index.js

@@ -0,0 +1,133 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Goods = 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 _Flex = require("../Flex");
+var _Text = require("../Text");
+var _Price = require("../Price");
+var _Tag = require("../Tag");
+var _Icon = require("../Icon");
+var _IconButton = require("../IconButton");
+var _Button = require("../Button");
+var _ConfigProvider = require("../ConfigProvider");
+var _excluded = ["className", "type", "img", "caption", "name", "desc", "tags", "locale", "currency", "price", "count", "unit", "action", "elderMode", "variant", "children", "originalPrice", "meta", "status", "asideContent"];
+var Goods = exports.Goods = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var configCtx = (0, _ConfigProvider.useConfig)();
+  var className = props.className,
+    type = props.type,
+    img = props.img,
+    caption = props.caption,
+    name = props.name,
+    desc = props.desc,
+    _props$tags = props.tags,
+    tags = _props$tags === void 0 ? [] : _props$tags,
+    locale = props.locale,
+    currency = props.currency,
+    price = props.price,
+    count = props.count,
+    unit = props.unit,
+    action = props.action,
+    oElderMode = props.elderMode,
+    variant = props.variant,
+    children = props.children,
+    originalPrice = props.originalPrice,
+    meta = props.meta,
+    status = props.status,
+    asideContent = props.asideContent,
+    other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var elderMode = oElderMode || configCtx.elderMode;
+  var isOrder = type === 'order' && !elderMode;
+  var isGoods = type !== 'order' && !elderMode;
+  var isInList = variant === 'inList';
+  var priceProps = {
+    currency: currency,
+    locale: locale
+  };
+  var priceCont = price != null && /*#__PURE__*/_react.default.createElement(_Price.Price, (0, _extends2.default)({
+    price: price
+  }, priceProps));
+  var countUnit = /*#__PURE__*/_react.default.createElement("div", {
+    className: "Goods-countUnit"
+  }, count && /*#__PURE__*/_react.default.createElement("span", {
+    className: "Goods-count"
+  }, "\xD7", count), unit && /*#__PURE__*/_react.default.createElement("span", {
+    className: "Goods-unit"
+  }, unit));
+  var statusCont = status ? /*#__PURE__*/_react.default.createElement("span", {
+    className: "Goods-status"
+  }, status, other.onClick && !isInList && /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+    type: "chevron-right"
+  })) : null;
+  var actionCont = action ? /*#__PURE__*/_react.default.createElement(_Button.Button, (0, _extends2.default)({
+    size: "sm"
+  }, action)) : null;
+  return /*#__PURE__*/_react.default.createElement(_Flex.Flex, (0, _extends2.default)({
+    className: (0, _clsx.default)('Goods', className),
+    "data-type": type,
+    "data-elder-mode": elderMode,
+    "data-variant": variant,
+    ref: ref
+  }, other), img && /*#__PURE__*/_react.default.createElement("div", {
+    className: "Goods-figure"
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    className: "Goods-img",
+    src: img,
+    alt: name
+  }), caption && /*#__PURE__*/_react.default.createElement("span", {
+    className: "Goods-caption"
+  }, caption)), /*#__PURE__*/_react.default.createElement(_Flex.FlexItem, null, /*#__PURE__*/_react.default.createElement(_Flex.Flex, null, /*#__PURE__*/_react.default.createElement(_Flex.FlexItem, {
+    className: "Goods-main"
+  }, isGoods && action && /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, (0, _extends2.default)({
+    className: "Goods-buyBtn",
+    icon: "cart"
+  }, action)), /*#__PURE__*/_react.default.createElement(_Text.Text, {
+    as: "h4"
+    /**
+     * 名称行数规则：
+     * 1. 有 desc，单行
+     * 2. 无 desc，2行
+     */,
+    truncate: isOrder && !desc ? 2 : true,
+    className: "Goods-name"
+  }, name), desc &&
+  /*#__PURE__*/
+  /**
+   * 行数规则：
+   * 1. 订单，无状态，订单列表中，2行
+   * 2. 其它，单行
+   */
+  _react.default.createElement(_Text.Text, {
+    className: "Goods-desc",
+    truncate: isOrder && !status && isInList ? 2 : true
+  }, desc), elderMode ? /*#__PURE__*/_react.default.createElement(_Flex.Flex, {
+    alignItems: "center",
+    justifyContent: "space-between"
+  }, priceCont, actionCont) : tags.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
+    className: "Goods-tags"
+  }, tags.map(function (t) {
+    return /*#__PURE__*/_react.default.createElement(_Tag.Tag, {
+      color: "primary",
+      key: t.name
+    }, t.name);
+  })), isGoods && /*#__PURE__*/_react.default.createElement(_Flex.Flex, {
+    alignItems: "flex-end"
+  }, /*#__PURE__*/_react.default.createElement(_Flex.FlexItem, null, priceCont, originalPrice && /*#__PURE__*/_react.default.createElement(_Price.Price, (0, _extends2.default)({
+    price: originalPrice,
+    original: true
+  }, priceProps)), meta && /*#__PURE__*/_react.default.createElement("span", {
+    className: "Goods-meta"
+  }, meta)), countUnit)), isOrder && /*#__PURE__*/_react.default.createElement("div", {
+    className: "Goods-aside"
+  }, priceCont, countUnit, asideContent && /*#__PURE__*/_react.default.createElement("div", {
+    className: "Goods-slot"
+  }, asideContent), actionCont)), isInList && statusCont, children && /*#__PURE__*/_react.default.createElement("div", {
+    className: "Goods-slot"
+  }, children), !isInList && statusCont));
+});

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

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

package/lib/components/HelpText/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HelpText = 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"];
+var HelpText = exports.HelpText = function HelpText(props) {
+  var children = props.children,
+    others = (0, _objectWithoutProperties2.default)(props, _excluded);
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+    className: "HelpText"
+  }, others), children);
+};

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

@@ -0,0 +1,8 @@
+import React from 'react';
+export type IconProps = React.SVGProps<SVGSVGElement> & {
+    type: string;
+    className?: string;
+    name?: string;
+    spin?: boolean;
+};
+export declare const Icon: (props: IconProps) => React.JSX.Element;

package/lib/components/Icon/index.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Icon = 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 _excluded = ["type", "className", "spin", "name"];
+var Icon = exports.Icon = function Icon(props) {
+  var type = props.type,
+    className = props.className,
+    spin = props.spin,
+    name = props.name,
+    other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var ariaProps = typeof name === 'string' ? {
+    'aria-label': name
+  } : {
+    'aria-hidden': true
+  };
+  return /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({
+    className: (0, _clsx.default)('Icon', {
+      'is-spin': spin
+    }, className)
+  }, ariaProps, other), /*#__PURE__*/_react.default.createElement("use", {
+    xlinkHref: "#icon-".concat(type)
+  }));
+};

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { ButtonProps } from '../Button';
+export interface IconButtonProps extends ButtonProps {
+    img?: string;
+}
+export declare const IconButton: (props: IconButtonProps) => React.JSX.Element;

package/lib/components/IconButton/index.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IconButton = 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 _Button = require("../Button");
+var _Icon = require("../Icon");
+var _excluded = ["className", "icon", "img"];
+var IconButton = exports.IconButton = function IconButton(props) {
+  var className = props.className,
+    icon = props.icon,
+    img = props.img,
+    other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_Button.Button, (0, _extends2.default)({
+    className: (0, _clsx.default)('IconBtn', className),
+    "data-icon": icon
+  }, other), icon && /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+    type: icon
+  }), !icon && img && /*#__PURE__*/_react.default.createElement("img", {
+    src: img,
+    alt: ""
+  }));
+};

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

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+    className?: string;
+    src: string;
+    lazy?: boolean;
+    fluid?: boolean;
+}
+export declare const Image: React.ForwardRefExoticComponent<ImageProps & React.RefAttributes<HTMLImageElement>>;

package/lib/components/Image/index.js

@@ -0,0 +1,63 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Image = 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 _useForwardRef = _interopRequireDefault(require("../../hooks/useForwardRef"));
+var _excluded = ["className", "src", "lazy", "fluid", "children"];
+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 Image = exports.Image = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var className = props.className,
+    oSrc = props.src,
+    lazy = props.lazy,
+    fluid = props.fluid,
+    children = props.children,
+    other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var _useState = (0, _react.useState)(lazy ? undefined : oSrc),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    src = _useState2[0],
+    setSrc = _useState2[1];
+  var imgRef = (0, _useForwardRef.default)(ref);
+  var savedSrc = (0, _react.useRef)('');
+  var lazyLoaded = (0, _react.useRef)(false);
+  (0, _react.useEffect)(function () {
+    if (!lazy) return undefined;
+    var observer = new IntersectionObserver(function (_ref) {
+      var _ref2 = (0, _slicedToArray2.default)(_ref, 1),
+        entry = _ref2[0];
+      if (entry.isIntersecting) {
+        setSrc(savedSrc.current);
+        lazyLoaded.current = true;
+        observer.unobserve(entry.target);
+      }
+    });
+    if (imgRef.current) {
+      observer.observe(imgRef.current);
+    }
+    return function () {
+      observer.disconnect();
+    };
+  }, [imgRef, lazy]);
+  (0, _react.useEffect)(function () {
+    savedSrc.current = oSrc;
+    if (!lazy || lazyLoaded.current) {
+      setSrc(oSrc);
+    }
+  }, [lazy, oSrc]);
+  return /*#__PURE__*/_react.default.createElement("img", (0, _extends2.default)({
+    className: (0, _clsx.default)('Image', {
+      'Image--fluid': fluid
+    }, className),
+    src: src,
+    alt: "",
+    ref: imgRef
+  }, other));
+});

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

@@ -0,0 +1,13 @@
+import React from 'react';
+type ImgItem = {
+    src: string;
+    id?: string;
+    [k: string]: any;
+};
+export interface ImageListProps {
+    className?: string;
+    list: ImgItem[];
+    onClick?: (img: ImgItem, event: React.MouseEvent<HTMLImageElement>) => void;
+}
+export declare const ImageList: (props: ImageListProps) => React.JSX.Element;
+export {};

package/lib/components/ImageList/index.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ImageList = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Image = require("../Image");
+var ImageItem = function ImageItem(_ref) {
+  var img = _ref.img,
+    onClick = _ref.onClick;
+  var handleClick = function handleClick(e) {
+    onClick === null || onClick === void 0 || onClick(img, e);
+  };
+  return /*#__PURE__*/_react.default.createElement(_Image.Image, {
+    src: img.src,
+    onClick: handleClick
+  });
+};
+var ImageList = exports.ImageList = function ImageList(props) {
+  var className = props.className,
+    list = props.list,
+    onClick = props.onClick;
+  return /*#__PURE__*/_react.default.createElement("ul", {
+    className: (0, _clsx.default)('ImageList', className)
+  }, list.map(function (img) {
+    return /*#__PURE__*/_react.default.createElement("li", {
+      key: img.id || img.src
+    }, /*#__PURE__*/_react.default.createElement(ImageItem, {
+      img: img,
+      onClick: onClick
+    }));
+  }));
+};

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

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface InfiniteScrollProps extends React.HTMLAttributes<HTMLDivElement> {
+    className?: string;
+    disabled?: boolean;
+    distance?: number;
+    onLoadMore: () => void;
+}
+export declare const InfiniteScroll: React.ForwardRefExoticComponent<InfiniteScrollProps & React.RefAttributes<HTMLDivElement>>;

package/lib/components/InfiniteScroll/index.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InfiniteScroll = 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 _useForwardRef = _interopRequireDefault(require("../../hooks/useForwardRef"));
+var _getToBottom = _interopRequireDefault(require("../../utils/getToBottom"));
+var _excluded = ["className", "disabled", "distance", "children", "onLoadMore", "onScroll"];
+var InfiniteScroll = exports.InfiniteScroll = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var className = props.className,
+    disabled = props.disabled,
+    _props$distance = props.distance,
+    distance = _props$distance === void 0 ? 0 : _props$distance,
+    children = props.children,
+    onLoadMore = props.onLoadMore,
+    onScroll = props.onScroll,
+    other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var wrapperRef = (0, _useForwardRef.default)(ref);
+  function handleScroll(e) {
+    if (onScroll) {
+      onScroll(e);
+    }
+    var el = wrapperRef.current;
+    if (!el) return;
+    var nearBottom = (0, _getToBottom.default)(el) <= distance;
+    if (nearBottom) {
+      onLoadMore();
+    }
+  }
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+    className: (0, _clsx.default)('InfiniteScroll', className),
+    role: "feed",
+    onScroll: !disabled ? handleScroll : undefined,
+    ref: wrapperRef
+  }, other), children);
+});