@dpocean/chatui 1.0.0

package/es/components/Goods/index.js

@@ -0,0 +1,126 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "type", "img", "caption", "name", "desc", "tags", "locale", "currency", "price", "count", "unit", "action", "elderMode", "variant", "children", "originalPrice", "meta", "status", "asideContent"];
+import React from 'react';
+import clsx from 'clsx';
+import { Flex, FlexItem } from '../Flex';
+import { Text } from '../Text';
+import { Price } from '../Price';
+import { Tag } from '../Tag';
+import { Icon } from '../Icon';
+import { IconButton } from '../IconButton';
+import { Button } from '../Button';
+import { useConfig } from '../ConfigProvider';
+export var Goods = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var configCtx = 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 = _objectWithoutProperties(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.createElement(Price, _extends({
+    price: price
+  }, priceProps));
+  var countUnit = /*#__PURE__*/React.createElement("div", {
+    className: "Goods-countUnit"
+  }, count && /*#__PURE__*/React.createElement("span", {
+    className: "Goods-count"
+  }, "\xD7", count), unit && /*#__PURE__*/React.createElement("span", {
+    className: "Goods-unit"
+  }, unit));
+  var statusCont = status ? /*#__PURE__*/React.createElement("span", {
+    className: "Goods-status"
+  }, status, other.onClick && !isInList && /*#__PURE__*/React.createElement(Icon, {
+    type: "chevron-right"
+  })) : null;
+  var actionCont = action ? /*#__PURE__*/React.createElement(Button, _extends({
+    size: "sm"
+  }, action)) : null;
+  return /*#__PURE__*/React.createElement(Flex, _extends({
+    className: clsx('Goods', className),
+    "data-type": type,
+    "data-elder-mode": elderMode,
+    "data-variant": variant,
+    ref: ref
+  }, other), img && /*#__PURE__*/React.createElement("div", {
+    className: "Goods-figure"
+  }, /*#__PURE__*/React.createElement("img", {
+    className: "Goods-img",
+    src: img,
+    alt: name
+  }), caption && /*#__PURE__*/React.createElement("span", {
+    className: "Goods-caption"
+  }, caption)), /*#__PURE__*/React.createElement(FlexItem, null, /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(FlexItem, {
+    className: "Goods-main"
+  }, isGoods && action && /*#__PURE__*/React.createElement(IconButton, _extends({
+    className: "Goods-buyBtn",
+    icon: "cart"
+  }, action)), /*#__PURE__*/React.createElement(Text, {
+    as: "h4"
+    /**
+     * 名称行数规则：
+     * 1. 有 desc，单行
+     * 2. 无 desc，2行
+     */,
+    truncate: isOrder && !desc ? 2 : true,
+    className: "Goods-name"
+  }, name), desc &&
+  /*#__PURE__*/
+  /**
+   * 行数规则：
+   * 1. 订单，无状态，订单列表中，2行
+   * 2. 其它，单行
+   */
+  React.createElement(Text, {
+    className: "Goods-desc",
+    truncate: isOrder && !status && isInList ? 2 : true
+  }, desc), elderMode ? /*#__PURE__*/React.createElement(Flex, {
+    alignItems: "center",
+    justifyContent: "space-between"
+  }, priceCont, actionCont) : tags.length > 0 && /*#__PURE__*/React.createElement("div", {
+    className: "Goods-tags"
+  }, tags.map(function (t) {
+    return /*#__PURE__*/React.createElement(Tag, {
+      color: "primary",
+      key: t.name
+    }, t.name);
+  })), isGoods && /*#__PURE__*/React.createElement(Flex, {
+    alignItems: "flex-end"
+  }, /*#__PURE__*/React.createElement(FlexItem, null, priceCont, originalPrice && /*#__PURE__*/React.createElement(Price, _extends({
+    price: originalPrice,
+    original: true
+  }, priceProps)), meta && /*#__PURE__*/React.createElement("span", {
+    className: "Goods-meta"
+  }, meta)), countUnit)), isOrder && /*#__PURE__*/React.createElement("div", {
+    className: "Goods-aside"
+  }, priceCont, countUnit, asideContent && /*#__PURE__*/React.createElement("div", {
+    className: "Goods-slot"
+  }, asideContent), actionCont)), isInList && statusCont, children && /*#__PURE__*/React.createElement("div", {
+    className: "Goods-slot"
+  }, children), !isInList && statusCont));
+});

package/es/components/Goods/style.less

@@ -0,0 +1,119 @@
+.Goods {
+  padding: @goods-padding;
+  font-size: 14px;
+
+  &[data-elder-mode="true"] {
+    --goods-img-size: 56px;
+
+    .Price {
+      color: var(--brand-1);
+    }
+  }
+  &[data-variant="inList"] {
+    --goods-img-size: 88px;
+
+    .Goods-status {
+      display: flex;
+      justify-content: flex-end;
+      color: var(--highlight-2);
+    }
+  }
+  &[data-variant="compact"] {
+    --goods-img-size: 44px;
+    padding: 8px;
+    background: var(--color-fill-2);
+    color: var(--color-text-2);
+
+    .Price {
+      font-weight: 400;
+    }
+  }
+  & + & {
+    border-top: @goods-border-width solid @goods-border-color;
+  }
+  &-img {
+    width: var(--goods-img-size);
+    height: var(--goods-img-size);
+    object-fit: cover;
+    border-radius: var(--radius-md);
+  }
+  &-name {
+    margin: 0;
+    font-size: @font-size-sm;
+    font-weight: 400;
+  }
+  &-main {
+    .Price {
+      margin-right: @goods-gap;
+    }
+  }
+  &-desc {
+    margin-top: 2Px;
+    color: @goods-desc-color;
+    word-break: break-all;
+  }
+  &-meta {
+    color: @goods-meta-color;
+    font-size: @goods-meta-font-size;
+  }
+  &-countUnit {
+    margin-left: 6px;
+    color: @goods-count-color;
+    font-size: @goods-count-font-size;
+  }
+  &-unit {
+    margin-left: 3px;
+    font-size: @goods-unit-font-size;
+  }
+  &-buyBtn {
+    float: right;
+    background: @goods-buy-btn-bg;
+    color: @goods-buy-btn-color;
+    padding: @goods-buy-btn-padding;
+
+    &:hover {
+      background: @goods-buy-btn-bg;
+    }
+  }
+  &-aside {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    margin-left: 6Px;
+  }
+  &-status {
+    display: inline-flex;
+    align-items: center;
+    color: var(--highlight-1);
+  }
+  .Btn {
+    min-width: 0;
+  }
+}
+
+.Goods-tags,
+.Goods-countUnit,
+.Goods-status,
+.Goods-slot {
+  margin-top: 2Px;
+}
+
+.Goods-figure {
+  display: flex;
+  align-self: flex-start;
+  position: relative;
+  margin-right: @goods-gap;
+}
+
+.Goods-caption {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  text-align: center;
+  border-radius: 0 0 var(--radius-md) var(--radius-md);
+  background: rgba(14, 17, 25, 0.5);
+  color: var(--white);
+  font-size: 12px;
+  line-height: 20px;
+}

package/es/components/HelpText/index.js

@@ -0,0 +1,11 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children"];
+import React from 'react';
+export var HelpText = function HelpText(props) {
+  var children = props.children,
+    others = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: "HelpText"
+  }, others), children);
+};

package/es/components/HelpText/style.less

@@ -0,0 +1,4 @@
+.HelpText {
+  font-size: @font-size-xs;
+  color: var(--color-text-2);
+}

package/es/components/Icon/index.js

@@ -0,0 +1,24 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["type", "className", "spin", "name"];
+import React from 'react';
+import clsx from 'clsx';
+export var Icon = function Icon(props) {
+  var type = props.type,
+    className = props.className,
+    spin = props.spin,
+    name = props.name,
+    other = _objectWithoutProperties(props, _excluded);
+  var ariaProps = typeof name === 'string' ? {
+    'aria-label': name
+  } : {
+    'aria-hidden': true
+  };
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    className: clsx('Icon', {
+      'is-spin': spin
+    }, className)
+  }, ariaProps, other), /*#__PURE__*/React.createElement("use", {
+    xlinkHref: "#icon-".concat(type)
+  }));
+};

package/es/components/Icon/style.less

@@ -0,0 +1,21 @@
+.Icon {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  stroke-width: 0;
+  fill: currentColor;
+  transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
+}
+
+.is-spin {
+  animation: spin 1s infinite linear;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(1turn);
+  }
+}

package/es/components/IconButton/index.js

@@ -0,0 +1,22 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "icon", "img"];
+import React from 'react';
+import clsx from 'clsx';
+import { Button } from '../Button';
+import { Icon } from '../Icon';
+export var IconButton = function IconButton(props) {
+  var className = props.className,
+    icon = props.icon,
+    img = props.img,
+    other = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/React.createElement(Button, _extends({
+    className: clsx('IconBtn', className),
+    "data-icon": icon
+  }, other), icon && /*#__PURE__*/React.createElement(Icon, {
+    type: icon
+  }), !icon && img && /*#__PURE__*/React.createElement("img", {
+    src: img,
+    alt: ""
+  }));
+};

package/es/components/IconButton/style.less

@@ -0,0 +1,25 @@
+.IconBtn {
+  min-width: 0;
+  padding: 0;
+  border: 0;
+  border-radius: @icon-button-border-radius;
+  background: @icon-button-bg;
+  color: @icon-button-color;
+  font-size: @icon-button-size;
+
+  &.Btn--primary {
+    color: @icon-button-primary-color;
+  }
+  &.Btn--lg {
+    border-radius: @icon-button-lg-border-radius;
+    font-size: @icon-button-lg-size;
+  }
+  & > .Icon {
+    display: block;
+  }
+  & > img {
+    display: block;
+    width: 1em;
+    height: 1em;
+  }
+}

package/es/components/Image/index.js

@@ -0,0 +1,54 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "src", "lazy", "fluid", "children"];
+import React, { useState, useEffect, useRef } from 'react';
+import clsx from 'clsx';
+import useForwardRef from '../../hooks/useForwardRef';
+export var Image = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var className = props.className,
+    oSrc = props.src,
+    lazy = props.lazy,
+    fluid = props.fluid,
+    children = props.children,
+    other = _objectWithoutProperties(props, _excluded);
+  var _useState = useState(lazy ? undefined : oSrc),
+    _useState2 = _slicedToArray(_useState, 2),
+    src = _useState2[0],
+    setSrc = _useState2[1];
+  var imgRef = useForwardRef(ref);
+  var savedSrc = useRef('');
+  var lazyLoaded = useRef(false);
+  useEffect(function () {
+    if (!lazy) return undefined;
+    var observer = new IntersectionObserver(function (_ref) {
+      var _ref2 = _slicedToArray(_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]);
+  useEffect(function () {
+    savedSrc.current = oSrc;
+    if (!lazy || lazyLoaded.current) {
+      setSrc(oSrc);
+    }
+  }, [lazy, oSrc]);
+  return /*#__PURE__*/React.createElement("img", _extends({
+    className: clsx('Image', {
+      'Image--fluid': fluid
+    }, className),
+    src: src,
+    alt: "",
+    ref: imgRef
+  }, other));
+});

package/es/components/Image/style.less

@@ -0,0 +1,11 @@
+.Image {
+  position: relative;
+  display: inline-block;
+  overflow: hidden;
+  border-style: none;
+}
+
+.Image--fluid {
+  max-width: 100%;
+  height: auto;
+}

package/es/components/ImageList/index.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import clsx from 'clsx';
+import { Image } from '../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.createElement(Image, {
+    src: img.src,
+    onClick: handleClick
+  });
+};
+export var ImageList = function ImageList(props) {
+  var className = props.className,
+    list = props.list,
+    onClick = props.onClick;
+  return /*#__PURE__*/React.createElement("ul", {
+    className: clsx('ImageList', className)
+  }, list.map(function (img) {
+    return /*#__PURE__*/React.createElement("li", {
+      key: img.id || img.src
+    }, /*#__PURE__*/React.createElement(ImageItem, {
+      img: img,
+      onClick: onClick
+    }));
+  }));
+};

package/es/components/ImageList/style.less

@@ -0,0 +1,20 @@
+.ImageList {
+  --image-list-size: 44px;
+  --image-list-fit: cover;
+
+  display: flex;
+  flex-wrap: wrap;
+  overflow: hidden;
+  margin: -4px 0 0 -4px;
+  padding: 0;
+  list-style: none;
+
+  .Image {
+    display: block;
+    width: var(--image-list-size);
+    height: var(--image-list-size);
+    margin: 4px 0 0 4px;
+    border-radius: var(--radius-md);
+    object-fit: var(--image-list-fit);
+  }
+}

package/es/components/InfiniteScroll/index.js

@@ -0,0 +1,35 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "disabled", "distance", "children", "onLoadMore", "onScroll"];
+import React from 'react';
+import clsx from 'clsx';
+import useForwardRef from '../../hooks/useForwardRef';
+import getToBottom from '../../utils/getToBottom';
+export var InfiniteScroll = /*#__PURE__*/React.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 = _objectWithoutProperties(props, _excluded);
+  var wrapperRef = useForwardRef(ref);
+  function handleScroll(e) {
+    if (onScroll) {
+      onScroll(e);
+    }
+    var el = wrapperRef.current;
+    if (!el) return;
+    var nearBottom = getToBottom(el) <= distance;
+    if (nearBottom) {
+      onLoadMore();
+    }
+  }
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: clsx('InfiniteScroll', className),
+    role: "feed",
+    onScroll: !disabled ? handleScroll : undefined,
+    ref: wrapperRef
+  }, other), children);
+});

package/es/components/InfiniteScroll/style.less

@@ -0,0 +1,4 @@
+.InfiniteScroll {
+  overflow-y: scroll;
+  -webkit-overflow-scrolling: touch;
+}

package/es/components/Input/index.js

@@ -0,0 +1,118 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "type", "variant", "value", "placeholder", "rows", "minRows", "maxRows", "maxLength", "showCount", "multiline", "autoSize", "onChange"];
+import React, { useState, useEffect, useContext, useCallback } from 'react';
+import clsx from 'clsx';
+import { ThemeContext } from '../Form';
+import useForwardRef from '../../hooks/useForwardRef';
+function getCount(value, maxLength) {
+  return "".concat("".concat(value).length).concat(maxLength ? "/".concat(maxLength) : '');
+}
+export var Input = /*#__PURE__*/React.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 = _objectWithoutProperties(props, _excluded);
+  var initialRows = oRows;
+  if (initialRows < minRows) {
+    initialRows = minRows;
+  } else if (initialRows > maxRows) {
+    initialRows = maxRows;
+  }
+  var _useState = useState(initialRows),
+    _useState2 = _slicedToArray(_useState, 2),
+    rows = _useState2[0],
+    setRows = _useState2[1];
+  var _useState3 = useState(21),
+    _useState4 = _slicedToArray(_useState3, 2),
+    lineHeight = _useState4[0],
+    setLineHeight = _useState4[1];
+  var inputRef = useForwardRef(ref);
+  var theme = useContext(ThemeContext);
+  var variant = oVariant || (theme === 'light' ? 'flushed' : 'outline');
+  var isMultiline = multiline || autoSize || oRows > 1;
+  var Element = isMultiline ? 'textarea' : 'input';
+  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 = 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]);
+  useEffect(function () {
+    if (value === '') {
+      setRows(initialRows);
+    } else {
+      updateRow();
+    }
+  }, [initialRows, updateRow, value]);
+  var handleChange = 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.createElement(Element, _extends({
+    className: clsx('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.createElement("div", {
+      className: clsx('InputWrapper', {
+        'has-counter': showCount
+      })
+    }, input, showCount && /*#__PURE__*/React.createElement("div", {
+      className: "Input-counter"
+    }, getCount(value, maxLength)));
+  }
+  return input;
+});