@dpocean/chatui 1.0.0

package/es/components/Modal/style.less

@@ -0,0 +1,267 @@
+.Modal,
+.Popup {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: 100%;
+  z-index: @zindex-modal;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  outline: 0;
+}
+
+.Modal {
+  &.active {
+    .Modal-dialog {
+      opacity: @modal-show-opacity;
+      transform: @modal-show-transform;
+    }
+  }
+}
+
+.Modal-dialog {
+  position: relative;
+  z-index: @zindex-modal;
+  overflow: hidden;
+  width: @modal-width;
+  max-width: 90vw;
+  border-radius: var(--radius-md);
+  background: @modal-bg;
+  opacity: @modal-opacity;
+  transition: @modal-transition;
+  transform: @modal-fade-transform;
+  font-size: 15px;
+
+  &[data-has-avatar='true'] {
+    padding-top: 37px;
+    overflow: visible;
+    background-image:
+      linear-gradient(to bottom, rgba(255, 255, 255, 75%) 0%, rgba(255, 255, 255, 75%) 120px),
+      linear-gradient(to bottom, var(--brand-1) 0%, var(--color-fill-1) 120px);
+  }
+}
+
+.Modal-avatar {
+  background-image: var(--avatar),
+    linear-gradient(-51deg, rgba(255, 255, 255, 50%) 0%, rgba(255, 255, 255, 80%) 100%),
+    linear-gradient(-51deg, var(--brand-1) 0%, var(--brand-1) 100%);
+  background-repeat: no-repeat;
+  background-size: cover;
+  box-shadow: 0 0 2px 0px var(--color-fill-1), 0 0 2px 0px var(--brand-1);
+  box-sizing: border-box;
+  border: 2px solid var(--color-fill-1);
+  border-radius: 50%;
+  width: 58px;
+  height: 58px;
+  position: absolute;
+  left: 50%;
+  top: 0;
+  transform: translate(-50%, -25%);
+}
+
+.Modal-header {
+  position: relative;
+  padding: 18px 20px 10px;
+}
+
+.Modal-body {
+  padding: 18px 15px;
+
+  .Modal-header + & {
+    padding-top: 0;
+  }
+}
+
+.Modal-footer {
+  display: flex;
+
+  .Btn--outline {
+    padding-top: 10px;
+    padding-bottom: 10px;
+    border-width: 1px 0 0;
+    border-color: var(--color-line-1);
+    border-radius: 0;
+
+    &:not(.Btn--primary) {
+      color: var(--color-text-2);
+    }
+  }
+}
+
+.Modal-footer--h {
+  &[data-variant='round'] {
+    padding: 0 15px 18px;
+
+    .Btn + .Btn {
+      margin-left: @modal-btn-x-spacing;
+    }
+  }
+  &[data-variant='outline'] {
+    .Btn + .Btn {
+      border-left-width: 1px;
+    }
+  }
+  .Btn {
+    flex: 1;
+  }
+}
+
+.Modal-footer--v {
+  flex-direction: column;
+}
+
+// Confirm
+.Confirm {
+  .Modal-body {
+    text-align: center;
+  }
+}
+
+// Popup
+.Popup {
+  align-items: flex-end;
+
+  &.active {
+    .Popup-dialog {
+      opacity: 1;
+      transform: translate3d(0, 0, 0);
+    }
+  }
+}
+
+.Popup-content {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.Popup-dialog {
+  position: relative;
+  z-index: @zindex-popup;
+  overflow: hidden;
+  width: 100%;
+  border-radius: var(--radius-md) var(--radius-md) 0 0;
+  background: @popup-bg;
+  opacity: 0;
+  transform: translate3d(0, 100%, 0);
+  transition: 0.3s;
+
+  &[data-bg-color="gray"] {
+    background: var(--color-fill-2);
+  }
+  &[data-height="80"] {
+    height: 80vh;
+  }
+  &[data-height="60"] {
+    height: 60vh;
+  }
+  &[data-height="40"] {
+    height: 40vh;
+  }
+}
+
+.Popup-header {
+  position: relative;
+  padding: @popup-header-padding;
+}
+
+.Modal-title,
+.Popup-title {
+  margin: @popup-title-margin;
+  color: @popup-title-color;
+  font-size: @popup-title-font-size;
+  font-weight: 500;
+  text-align: center;
+}
+
+.Popup-subtitle {
+  margin: @popup-subtitle-margin;
+  color: @popup-subtitle-color;
+  font-size: @popup-subtitle-font-size;
+  font-weight: 400;
+  text-align: center;
+  margin-top: 3px;
+}
+
+.Popup[data-elder-mode='true'] {
+  .Modal-title,
+  .Popup-title {
+    font-size: 23Px;
+  }
+  .Popup-close {
+    font-size: 32Px;
+  }
+}
+
+.Modal-close,
+.Popup-close {
+  position: absolute;
+  right: 12px;
+  color: @popup-close-color;
+}
+
+.Modal-close {
+  top: 12px;
+}
+
+.Popup-title {
+  min-height: 25Px;
+}
+
+.Popup-close {
+  top: 18px;
+}
+
+.Popup-body {
+  flex: 1;
+  min-height: 0;
+
+  &.overflow {
+    max-height: @popup-max-height;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+}
+
+.Popup-footer {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  padding: @popup-footer-padding;
+  padding-bottom: calc(9px + var(--safe-bottom));
+  background: var(--color-fill-1);
+
+  .Btn + .Btn {
+    margin-top: @popup-btn-y-spacing;
+  }
+}
+
+.Popup-footer--h {
+  flex-direction: row;
+
+  .Btn + .Btn {
+    margin-top: 0;
+    margin-left: @popup-btn-x-spacing;
+  }
+}
+
+.S--modalOpen,
+.S--modalOpen .MessageContainer > .PullToRefresh {
+  overflow: hidden;
+}
+
+.S--wide {
+  .Popup {
+    align-items: center;
+  }
+  .Popup-dialog {
+    width: @popup-wide-width;
+    border-radius: @modal-border-radius;
+  }
+  .Popup-footer--v {
+    padding-bottom: 12px;
+  }
+}

package/es/components/MultiRedPacket/index.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import clsx from 'clsx';
+import { RedPacket } from '../RedPacket';
+var imageMap = {
+  redPacket: 'https://gw.alicdn.com/imgextra/i2/O1CN01IAmvNz27AIyYyGXL7_!!6000000007756-55-tps-72-72.svg',
+  cash: 'https://gw.alicdn.com/imgextra/i4/O1CN01Zgq0Nb281tJdBdhm2_!!6000000007873-55-tps-72-72.svg'
+};
+export var MultiRedPacket = function MultiRedPacket(props) {
+  var className = props.className,
+    name = props.name,
+    count = props.count,
+    total = props.total,
+    _props$variant = props.variant,
+    variant = _props$variant === void 0 ? 'redPacket' : _props$variant,
+    btnText = props.btnText,
+    onClick = props.onClick;
+  return /*#__PURE__*/React.createElement("div", {
+    className: clsx('MultiRedPacket', className),
+    "data-variant": variant
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "MultiRedPacket-stack"
+  }), /*#__PURE__*/React.createElement(RedPacket, {
+    image: imageMap[variant],
+    name: name,
+    btnText: btnText,
+    desc: /*#__PURE__*/React.createElement("div", null, count && /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("strong", null, count), " \u4E2A"), total && /*#__PURE__*/React.createElement("span", null, "\u5171 ", /*#__PURE__*/React.createElement("strong", null, total), " \u5143")),
+    onClick: onClick
+  }));
+};

package/es/components/MultiRedPacket/style.less

@@ -0,0 +1,53 @@
+.MultiRedPacket {
+  display: flex;
+  align-items: center;
+
+  .RedPacket {
+    --red-packet-object-width: 60px;
+    --red-packet-name-font-size: 15px;
+    --red-packet-desc-font-size: 12px;
+
+    flex: 1;
+  }
+  .RedPacket-img {
+    width: 36px;
+    height: 36px;
+  }
+  .RedPacket-desc {
+    span + span {
+      margin-left: 6px;
+      padding-left: 6px;
+      border-left: 1px solid rgba(255, 255, 255, 0.45);
+    }
+    strong {
+      font-size: 14px;
+    }
+  }
+}
+
+.MultiRedPacket-stack {
+  position: relative;
+  display: flex;
+  align-items: center;
+
+  &:before,
+  &:after {
+    content: '';
+    display: block;
+    width: 6px;
+    margin-right: -2px;
+    box-sizing: border-box;
+    border: 2px solid #ff9999;
+    border-radius: var(--radius-md) 0 0 var(--radius-md);
+    border-right: 0;
+    background: #fff;
+  }
+  &:before {
+    height: 53px;
+    border-color: #ff9999;
+  }
+  &:after {
+    height: 57px;
+    border-color: #ff6666;
+  }
+}

package/es/components/Navbar/index.js

@@ -0,0 +1,49 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React from 'react';
+import clsx from 'clsx';
+import { IconButton } from '../IconButton';
+export var Navbar = function Navbar(props) {
+  var className = props.className,
+    title = props.title,
+    logo = props.logo,
+    desc = props.desc,
+    leftContent = props.leftContent,
+    _props$rightContent = props.rightContent,
+    rightContent = _props$rightContent === void 0 ? [] : _props$rightContent,
+    rightSlot = props.rightSlot,
+    align = props.align;
+  var isLeft = align === 'left';
+  var showTitle = isLeft ? true : !logo;
+  return /*#__PURE__*/React.createElement("header", {
+    className: clsx('Navbar', {
+      'Navbar--left': isLeft
+    }, className)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "Navbar-left"
+  }, leftContent && /*#__PURE__*/React.createElement(IconButton, _extends({
+    size: "lg"
+  }, leftContent))), /*#__PURE__*/React.createElement("div", {
+    className: "Navbar-main"
+  }, logo && /*#__PURE__*/React.createElement("div", {
+    className: "Navbar-brand"
+  }, /*#__PURE__*/React.createElement("img", {
+    className: "Navbar-logo",
+    src: logo,
+    alt: title
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "Navbar-inner"
+  }, showTitle && /*#__PURE__*/React.createElement("h2", {
+    className: "Navbar-title"
+  }, title), /*#__PURE__*/React.createElement("div", {
+    className: "Navbar-desc"
+  }, desc))), /*#__PURE__*/React.createElement("div", {
+    className: "Navbar-right"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "Navbar-rightSlot"
+  }, rightSlot), rightContent.map(function (item) {
+    return /*#__PURE__*/React.createElement(IconButton, _extends({
+      size: "lg",
+      key: item.icon
+    }, item));
+  })));
+};

package/es/components/Navbar/style.less

@@ -0,0 +1,84 @@
+.Navbar {
+  position: relative;
+  z-index: @zindex-navbar;
+  display: flex;
+  align-items: center;
+  padding: @navbar-padding;
+  padding-top: var(--safe-top);
+  background: var(--navbar-bg);
+
+  &-main {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: @navbar-height;
+    padding: 3Px 0;
+    box-sizing: border-box;
+  }
+  &-left,
+  &-right {
+    display: flex;
+    width: 58Px;
+  }
+  &-right {
+    justify-content: flex-end;
+  }
+  &-title {
+    margin: 0;
+    color: @navbar-color;
+    font-size: @navbar-font-size;
+    font-weight: 500;
+  }
+  &-logo {
+    display: block;
+    width: auto;
+    height: @navbar-logo-height;
+  }
+  .IconBtn {
+    color: var(--color-text-1);
+    font-size: 24Px;
+  }
+  .IconBtn + .IconBtn,
+  .Navbar-rightSlot + .IconBtn {
+    margin-left: 12Px;
+  }
+}
+
+.Navbar--left {
+  .Navbar-left {
+    width: 24Px;
+  }
+  .Navbar-right {
+    width: auto;
+  }
+  .Navbar-main {
+    min-height: 62Px;
+    margin-left: 9Px;
+    justify-content: flex-start;
+  }
+}
+
+.Navbar-brand + .Navbar-inner {
+  margin-left: 9Px;
+}
+
+.Navbar-desc {
+  color: var(--color-text-2);
+  font-size: 12Px;
+}
+
+.ChatApp[data-elder-mode='true'] {
+  .Navbar .IconBtn {
+    font-size: 26Px;
+  }
+  .Navbar-logo {
+    height: 43Px;
+  }
+  .Navbar-title {
+    font-size: 18Px;
+  }
+  .Navbar-desc {
+    font-size: 13Px;
+  }
+}

package/es/components/Notice/index.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Icon } from '../Icon';
+import { IconButton } from '../IconButton';
+import { Text } from '../Text';
+export var Notice = function Notice(props) {
+  var content = props.content,
+    _props$closable = props.closable,
+    closable = _props$closable === void 0 ? true : _props$closable,
+    _props$leftIcon = props.leftIcon,
+    leftIcon = _props$leftIcon === void 0 ? 'bullhorn' : _props$leftIcon,
+    onClick = props.onClick,
+    onClose = props.onClose;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "Notice",
+    role: "alert",
+    "aria-atomic": true,
+    "aria-live": "assertive"
+  }, leftIcon && /*#__PURE__*/React.createElement(Icon, {
+    className: "Notice-icon",
+    type: leftIcon
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "Notice-content",
+    onClick: onClick
+  }, /*#__PURE__*/React.createElement(Text, {
+    className: "Notice-text",
+    truncate: true
+  }, content)), closable && /*#__PURE__*/React.createElement(IconButton, {
+    className: "Notice-close",
+    icon: "close",
+    onClick: onClose,
+    "aria-label": "\u5173\u95ED\u901A\u77E5"
+  }));
+};

package/es/components/Notice/style.less

@@ -0,0 +1,29 @@
+.Notice {
+  display: flex;
+  align-items: center;
+  padding: @notice-padding;
+  border-radius: var(--radius-md);
+  background: @notice-bg;
+
+  &-icon {
+    margin-right: 6px;
+  }
+  .Icon {
+    color: @notice-icon-color;
+    font-size: 16px;
+  }
+  &-close {
+    margin-left: 6px;
+
+    .Icon {
+      color: var(--color-text-3);
+    }
+  }
+}
+
+.Notice-content {
+  flex: 1;
+  min-width: 0;
+  color: @notice-content-color;
+  font-size: @notice-content-font-size;
+}

package/es/components/OrderObject/index.js

@@ -0,0 +1,38 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React from 'react';
+import clsx from 'clsx';
+import { Goods } from '../Goods';
+import { Flex, FlexItem } from '../Flex';
+import { ImageList } from '../ImageList';
+import { Icon } from '../Icon';
+export var OrderObject = function OrderObject(props) {
+  var className = props.className,
+    title = props.title,
+    _props$list = props.list,
+    list = _props$list === void 0 ? [] : _props$list,
+    _props$count = props.count,
+    count = _props$count === void 0 ? list.length : _props$count,
+    onClick = props.onClick;
+  var firstOrder = list[0];
+  return /*#__PURE__*/React.createElement("div", {
+    className: clsx('OrderObject', className),
+    onClick: onClick
+  }, title && /*#__PURE__*/React.createElement("div", {
+    className: "OrderObject-title"
+  }, title), count > 1 ? /*#__PURE__*/React.createElement(Flex, {
+    alignItems: "center"
+  }, /*#__PURE__*/React.createElement(FlexItem, null, /*#__PURE__*/React.createElement(ImageList, {
+    list: list.slice(0, 3).map(function (t) {
+      return {
+        src: t.img
+      };
+    })
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "OrderObject-count"
+  }, "\u5171".concat(count, "\u4EF6")), /*#__PURE__*/React.createElement(Icon, {
+    type: "chevron-right"
+  })) : /*#__PURE__*/React.createElement(Goods, _extends({
+    type: "order",
+    variant: "compact"
+  }, firstOrder)));
+};

package/es/components/OrderObject/style.less

@@ -0,0 +1,18 @@
+.OrderObject {
+  padding: 8px;
+  border-radius: var(--radius-md);
+  background: var(--color-fill-2);
+  color: var(--color-text-2);
+  font-size: 14px;
+
+  .Goods {
+    padding: 0;
+  }
+  .Icon {
+    font-size: 16px;
+  }
+}
+
+.OrderObject-title {
+  margin-bottom: 4px;
+}

package/es/components/Popover/index.js

@@ -0,0 +1,56 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState, useEffect, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+import clsx from 'clsx';
+import useMount from '../../hooks/useMount';
+import useClickOutside from '../../hooks/useClickOutside';
+import useWindowResize from '../../hooks/useWindowResize';
+export var Popover = function Popover(props) {
+  var className = props.className,
+    active = props.active,
+    target = props.target,
+    children = props.children,
+    onClose = props.onClose;
+  var wrapper = useClickOutside(onClose, 'mousedown');
+  var _useMount = useMount({
+      active: active,
+      ref: wrapper
+    }),
+    didMount = _useMount.didMount,
+    isShow = _useMount.isShow;
+  var _useState = useState({}),
+    _useState2 = _slicedToArray(_useState, 2),
+    style = _useState2[0],
+    setStyle = _useState2[1];
+  var updatePos = useCallback(function () {
+    if (!wrapper.current) return;
+    var targetRect = target.getBoundingClientRect();
+    var rect = wrapper.current.getBoundingClientRect();
+    setStyle({
+      top: "".concat(targetRect.top - rect.height, "px"),
+      left: "".concat(targetRect.left, "px")
+    });
+  }, [target, wrapper]);
+  useEffect(function () {
+    if (wrapper.current) {
+      wrapper.current.focus();
+      updatePos();
+    }
+  }, [didMount, updatePos, wrapper]);
+  useWindowResize(updatePos);
+  if (!didMount) return null;
+  return /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement("div", {
+    className: clsx('Popover', className, {
+      active: isShow
+    }),
+    ref: wrapper,
+    style: style
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "Popover-body"
+  }, children), /*#__PURE__*/React.createElement("svg", {
+    className: "Popover-arrow",
+    viewBox: "0 0 9 5"
+  }, /*#__PURE__*/React.createElement("polygon", {
+    points: "0,0 5,5, 9,0"
+  }))), document.body);
+};

package/es/components/Popover/style.less

@@ -0,0 +1,22 @@
+.Popover {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: @zindex-popover;
+  font-size: @font-size-sm;
+  transform: translate(0, -10px);
+}
+
+.Popover-body {
+  border-radius: @popover-border-radius;
+  background: @popover-bg;
+  box-shadow: @popover-box-shadow;
+}
+
+.Popover-arrow {
+  display: block;
+  width: 9px;
+  height: 5px;
+  margin-left: 10px;
+  fill: var(--color-fill-1);
+}