@dpocean/chatui 1.0.0

package/es/components/Input/style.less

@@ -0,0 +1,74 @@
+.InputWrapper {
+  position: relative;
+
+  &.has-counter {
+    padding-bottom: 20px;
+
+    & + .HelpText {
+      margin-top: -20px;
+    }
+  }
+}
+
+.Input {
+  display: block;
+  box-sizing: border-box;
+  width: @input-width;
+  min-height: @input-min-height;
+  margin: @input-margin;
+  padding: @input-padding;
+  border: @input-border;
+  border-radius: var(--radius-md);
+  font-family: @input-font-family;
+  font-size: @input-font-size;
+  line-height: @input-line-height;
+  color: @input-color;
+  background: @input-bg;
+  resize: @input-resize;
+  -webkit-tap-highlight-color: transparent;
+  transition: .2s ease-in-out;
+  -webkit-appearance: none;
+
+  &:focus {
+    outline: none;
+    border-color: var(--brand-1);
+  }
+  &:focus:not([disabled]):not([readonly]) {
+    & ~ .Input-line {
+      &:before,
+      &:after {
+        width: 50%;
+      }
+    }
+  }
+  &:disabled {
+    opacity: 0.5;
+  }
+  &::placeholder {
+    color: var(--color-text-3);
+  }
+  &--filled {
+    border-color: transparent;
+    background-color: var(--color-fill-2);
+  }
+  &--flushed {
+    padding: 2px var(--gutter);
+    border-width: 0 0 1px;
+    border-radius: 0;
+    background: none;
+
+    &:focus {
+      box-shadow: var(--brand-1) 0px 1px 0px 0px;
+    }
+  }
+}
+
+.Input-counter {
+  // absolute 在iOS下有坑，在消息列表里的输入框，输入文字后，页面卡片下移
+  position: relative;
+  z-index: 1;
+  float: right;
+  margin-right: var(--gutter);
+  color: var(--color-text-3);
+  font-size: @font-size-xs;
+}

package/es/components/KvList/KvItem.js

@@ -0,0 +1,44 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "title", "level", "highlight", "desc", "onClick", "ellipsis", "rightIcon", "children"];
+import React from 'react';
+import clsx from 'clsx';
+import { Icon } from '../Icon';
+import { Text } from '../Text';
+import { Flex, FlexItem } from '../Flex';
+export var 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 = _objectWithoutProperties(props, _excluded);
+  var isString = typeof children === 'string';
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: clsx('KvItem', className),
+    "data-level": level,
+    "data-highlight": highlight,
+    onClick: onClick,
+    role: "item"
+  }, other), /*#__PURE__*/React.createElement(Flex, {
+    className: "KvItem-content",
+    alignItems: ellipsis ? 'center' : undefined
+  }, /*#__PURE__*/React.createElement(Text, {
+    className: "KvItem-title",
+    truncate: true
+  }, title), /*#__PURE__*/React.createElement(FlexItem, {
+    className: "KvItem-main"
+  }, isString ? /*#__PURE__*/React.createElement(Text, {
+    truncate: ellipsis
+  }, children) : children), rightIcon && /*#__PURE__*/React.createElement(Icon, {
+    type: rightIcon
+  })), desc && /*#__PURE__*/React.createElement("div", {
+    className: "KvItem-desc"
+  }, desc));
+};

package/es/components/KvList/KvList.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import clsx from 'clsx';
+export var 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.createElement("div", {
+    className: clsx('KvList', className),
+    "data-align": align,
+    role: "list"
+  }, children);
+};

package/es/components/KvList/index.js

@@ -0,0 +1,2 @@
+export { KvList } from './KvList';
+export { KvItem } from './KvItem';

package/es/components/KvList/style.less

@@ -0,0 +1,73 @@
+.KvList {
+  --kv-aside-width: 90px;
+  --kv-title-color: var(--color-text-2);
+  --kv-gap: 10px;
+
+  &[data-align='left'] {
+    .KvItem-title {
+      width: var(--kv-aside-width);
+    }
+    .KvItem-desc {
+      margin-left: calc(var(--kv-aside-width) + var(--kv-gap));
+    }
+  }
+  &[data-align='right'] {
+    --kv-title-color: var(--color-text-1);
+
+    .KvItem[data-level='2'] {
+      --kv-title-color: var(--color-text-2);
+    }
+    .KvItem-title {
+      flex: 1;
+    }
+    .KvItem-main {
+      flex: initial;
+      width: var(--kv-aside-width);
+      text-align: right;
+      font-weight: 500;
+    }
+  }
+}
+
+.KvItem {
+  color: var(--color-text-1);
+  font-size: 15px;
+
+  & + & {
+    margin-top: 8px;
+  }
+
+  &[data-level='2'] {
+    font-size: 14px;
+  }
+  &[data-highlight='true'] {
+    .KvItem-main {
+      color: var(--brand-1);
+    }
+  }
+  .Icon {
+    color: var(--color-text-2);
+  }
+  .Price {
+    font-size: inherit;
+  }
+  p {
+    margin: 0;
+  }
+  p + .ImageList {
+    margin-top: 4px;
+  }
+}
+
+.KvItem-title {
+  color: var(--kv-title-color);
+}
+
+.KvItem-main {
+  margin-left: var(--kv-gap);
+}
+
+.KvItem-desc {
+  color: var(--color-text-3);
+  font-size: 12px;
+}

package/es/components/Label/index.js

@@ -0,0 +1,12 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children"];
+/* eslint-disable jsx-a11y/label-has-associated-control */
+import React from 'react';
+export var Label = function Label(props) {
+  var children = props.children,
+    other = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/React.createElement("label", _extends({
+    className: "Label"
+  }, other), children);
+};

package/es/components/Label/style.less

@@ -0,0 +1,5 @@
+.Label {
+  display: block;
+  font-size: @font-size-xs;
+  color: var(--color-text-2);
+}

package/es/components/LazyComponent/SuspenseWrap.js

@@ -0,0 +1,15 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["component", "onError", "fallback"];
+import React, { Suspense } from 'react';
+import { ErrorBoundary } from '../ErrorBoundary';
+export var SuspenseWrap = function SuspenseWrap(props) {
+  var Comp = props.component,
+    onError = props.onError,
+    fallback = props.fallback,
+    rest = _objectWithoutProperties(props, _excluded);
+  return Comp ? /*#__PURE__*/React.createElement(ErrorBoundary, {
+    onError: onError
+  }, /*#__PURE__*/React.createElement(Suspense, {
+    fallback: fallback || null
+  }, /*#__PURE__*/React.createElement(Comp, rest))) : null;
+};

package/es/components/LazyComponent/index.js

@@ -0,0 +1,50 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["code", "fallback", "onLoad", "onError"],
+  _excluded2 = ["component", "code", "onLoad"];
+import React from 'react';
+import { SuspenseWrap } from './SuspenseWrap';
+import { useComponents } from '../ComponentsProvider/useComponents';
+export var LazyComponentWithCode = function LazyComponentWithCode(props) {
+  var code = props.code,
+    fallback = props.fallback,
+    onLoad = props.onLoad,
+    onError = props.onError,
+    rest = _objectWithoutProperties(props, _excluded);
+  var _useComponents = 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.createElement(SuspenseWrap, _extends({
+    component: Comp,
+    onError: onError,
+    fallback: fallback
+  }, rest));
+};
+export var LazyComponent = function LazyComponent(props) {
+  var component = props.component,
+    code = props.code,
+    onLoad = props.onLoad,
+    rest = _objectWithoutProperties(props, _excluded2);
+  if (component) {
+    if (onLoad) {
+      onLoad({
+        async: false,
+        component: component
+      });
+    }
+    return /*#__PURE__*/React.createElement(SuspenseWrap, _extends({
+      component: component
+    }, rest));
+  }
+  return /*#__PURE__*/React.createElement(LazyComponentWithCode, _extends({
+    code: code,
+    onLoad: onLoad
+  }, rest));
+};
+export default LazyComponent;

package/es/components/LazyComponent/interface.js

@@ -0,0 +1 @@
+export {};

package/es/components/List/List.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import clsx from 'clsx';
+export var List = /*#__PURE__*/React.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.createElement("div", {
+    className: clsx('List', {
+      'List--bordered': bordered
+    }, className),
+    "data-variant": variant,
+    role: "list",
+    ref: ref
+  }, children);
+});

package/es/components/List/ListItem.js

@@ -0,0 +1,30 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "as", "content", "ellipsis", "rightIcon", "children", "onClick"];
+import React from 'react';
+import clsx from 'clsx';
+import { Icon } from '../Icon';
+import { Text } from '../Text';
+export var ListItem = /*#__PURE__*/React.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 = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/React.createElement(Element, _extends({
+    className: clsx('ListItem', className),
+    onClick: onClick,
+    role: "listitem"
+  }, other, {
+    ref: ref
+  }), /*#__PURE__*/React.createElement(Text, {
+    className: "ListItem-content",
+    truncate: ellipsis
+  }, content || children), rightIcon && /*#__PURE__*/React.createElement(Icon, {
+    type: rightIcon
+  }));
+});

package/es/components/List/index.js

@@ -0,0 +1,2 @@
+export { List } from './List';
+export { ListItem } from './ListItem';

package/es/components/List/style.less

@@ -0,0 +1,75 @@
+.List {
+  background: @list-bg;
+
+  &--bordered {
+    border: @list-border-width solid @list-border-color;
+    border-radius: @list-border-radius;
+  }
+  &[data-variant="buttons"] {
+    .ListItem {
+      margin-top: 9px;
+      padding: 5px 12px;
+      border: 1px solid var(--color-line-2);
+      border-radius: var(--radius-md);
+      color: var(--color-text-2);
+      font-size: 14px;
+      line-height: 1.5;
+
+      &:first-child {
+        margin-top: 0;
+      }
+    }
+  }
+}
+
+.ListItem {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding: @list-item-padding;
+  border: 0;
+  color: @list-item-color;
+  font-size: @list-item-font-size;
+  line-height: @list-item-line-height;
+  text-decoration: none;
+  transition: 0.3s;
+
+  &:focus:not(:focus-visible) {
+    outline: 0;
+  }
+  & + & {
+    border-top: @list-border-width solid @list-border-color;
+  }
+  .Icon {
+    color: @list-item-icon-color;
+  }
+}
+
+button.ListItem {
+  width: 100%;
+  background: transparent;
+  text-align: left;
+  appearance: none;
+}
+
+a.ListItem,
+button.ListItem {
+  &:active {
+    background: @list-item-active-bg;
+  }
+}
+
+@media (hover: hover) {
+  a.ListItem,
+  button.ListItem {
+    &:hover {
+      background: @list-item-hover-bg;
+      background-clip: padding-box;
+      cursor: pointer;
+    }
+  }
+}
+
+.ListItem-content {
+  flex: 1;
+}

package/es/components/Loading/index.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Flex } from '../Flex';
+import { Icon } from '../Icon';
+export var Loading = function Loading(props) {
+  var tip = props.tip,
+    children = props.children;
+  return /*#__PURE__*/React.createElement(Flex, {
+    className: "Loading",
+    center: true
+  }, /*#__PURE__*/React.createElement(Icon, {
+    type: "spinner",
+    spin: true
+  }), tip && /*#__PURE__*/React.createElement("p", {
+    className: "Loading-tip"
+  }, tip), children);
+};

package/es/components/Loading/style.less

@@ -0,0 +1,13 @@
+.Loading {
+  padding: @gutter;
+  color: var(--color-text-2);
+
+  .Icon {
+    font-size: @icon-size-lg;
+  }
+}
+
+.Loading-tip {
+  margin: 0 0 0 6px;
+  font-size: @font-size-sm;
+}

package/es/components/MediaObject/index.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import clsx from 'clsx';
+export var 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.createElement("div", {
+    className: clsx('MediaObject', className)
+  }, picUrl && /*#__PURE__*/React.createElement("div", {
+    className: clsx('MediaObject-pic', picSize && "MediaObject-pic--".concat(picSize))
+  }, /*#__PURE__*/React.createElement("img", {
+    src: picUrl,
+    alt: picAlt || title
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "MediaObject-info"
+  }, /*#__PURE__*/React.createElement("h3", {
+    className: "MediaObject-title"
+  }, title), /*#__PURE__*/React.createElement("div", {
+    className: "MediaObject-meta"
+  }, meta)));
+};

package/es/components/MediaObject/style.less

@@ -0,0 +1,28 @@
+.MediaObject {
+  display: flex;
+}
+
+.MediaObject-pic {
+  width: 70px;
+  margin-right: 10px;
+  > img {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.MediaObject-info {
+  flex: 1;
+}
+
+.MediaObject-title {
+  margin: 0 0 6px;
+  font-size: @font-size-sm;
+  font-weight: 400;
+}
+
+.MediaObject-meta {
+  font-size: @font-size-xs;
+  color: var(--color-text-2);
+}

package/es/components/Message/Message.js

@@ -0,0 +1,62 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["renderMessageContent"];
+import React from 'react';
+import clsx from 'clsx';
+import { SystemMessage } from './SystemMessage';
+import { Avatar } from '../Avatar';
+import { Time } from '../Time';
+var Message = function Message(props) {
+  var _props$renderMessageC = props.renderMessageContent,
+    renderMessageContent = _props$renderMessageC === void 0 ? function () {
+      return null;
+    } : _props$renderMessageC,
+    msg = _objectWithoutProperties(props, _excluded);
+  var type = msg.type,
+    content = msg.content,
+    _msg$user = msg.user,
+    user = _msg$user === void 0 ? {} : _msg$user,
+    id = msg._id,
+    _msg$position = msg.position,
+    position = _msg$position === void 0 ? 'left' : _msg$position,
+    _msg$hasTime = msg.hasTime,
+    hasTime = _msg$hasTime === void 0 ? true : _msg$hasTime,
+    createdAt = msg.createdAt,
+    timeFormat = msg.timeFormat;
+  var name = user.name,
+    avatar = user.avatar,
+    avatarAlt = user.avatarAlt;
+  if (type === 'system') {
+    return /*#__PURE__*/React.createElement(SystemMessage, {
+      content: content.text,
+      action: content.action
+    });
+  }
+  var isRL = position === 'right' || position === 'left';
+  return /*#__PURE__*/React.createElement("div", {
+    className: clsx('Message', position),
+    "data-id": id,
+    "data-type": type
+  }, hasTime && createdAt && /*#__PURE__*/React.createElement("div", {
+    className: "Message-meta"
+  }, /*#__PURE__*/React.createElement(Time, {
+    date: createdAt,
+    timeFormat: timeFormat
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "Message-main"
+  }, isRL && avatar && /*#__PURE__*/React.createElement(Avatar, {
+    src: avatar,
+    shape: "square",
+    alt: avatarAlt,
+    url: user.url
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "Message-inner"
+  }, isRL && name && /*#__PURE__*/React.createElement("div", {
+    className: "Message-author"
+  }, name), /*#__PURE__*/React.createElement("div", {
+    className: "Message-content",
+    role: "alert",
+    "aria-live": "assertive",
+    "aria-atomic": "false"
+  }, renderMessageContent(msg)))));
+};
+export default /*#__PURE__*/React.memo(Message);

package/es/components/Message/SystemMessage.js

@@ -0,0 +1,33 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState } from 'react';
+import clsx from 'clsx';
+import { Button } from '../Button';
+export var SystemMessage = function SystemMessage(props) {
+  var className = props.className,
+    content = props.content,
+    action = props.action;
+  var _ref = action || {},
+    onClick = _ref.onClick,
+    once = _ref.once;
+  var _useState = useState(action && action.disabled),
+    _useState2 = _slicedToArray(_useState, 2),
+    disabled = _useState2[0],
+    setDisabled = _useState2[1];
+  var handleClick = function handleClick(e) {
+    if (onClick) {
+      onClick(e);
+    }
+    if (once) {
+      setDisabled(true);
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: clsx('Message SystemMessage', className)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "SystemMessage-inner"
+  }, /*#__PURE__*/React.createElement("span", null, content), action && /*#__PURE__*/React.createElement(Button, {
+    variant: "text",
+    disabled: disabled,
+    onClick: handleClick
+  }, action.text)));
+};

package/es/components/Message/index.js

@@ -0,0 +1,2 @@
+export { default as Message } from './Message';
+export { SystemMessage } from './SystemMessage';