@dpocean/chatui 1.0.0

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

@@ -0,0 +1,216 @@
+import React from 'react';
+import { ConfigContextType } from '../ConfigProvider';
+import { NavbarProps } from '../Navbar';
+import { MessageContainerProps, MessageContainerHandle } from '../MessageContainer';
+import { QuickReplyItemProps } from '../QuickReplies';
+import { ComposerProps, ComposerHandle } from '../Composer';
+export type ChatProps = Omit<ComposerProps, 'onFocus' | 'onChange' | 'onBlur'> & ConfigContextType & MessageContainerProps & {
+    /**
+     * 宽版模式断点
+     */
+    /**
+     * 导航栏配置
+     */
+    navbar?: NavbarProps;
+    /**
+     * 导航栏渲染函数
+     */
+    renderNavbar?: () => React.ReactNode;
+    /**
+     * 加载更多文案
+     */
+    /**
+     * 在消息列表上面的渲染函数
+     */
+    /**
+     * 消息列表 ref
+     */
+    messagesRef?: React.RefObject<MessageContainerHandle>;
+    /**
+     * 下拉加载回调
+     */
+    /**
+     * 滚动消息列表回调
+     */
+    /**
+     * 消息列表
+     */
+    /**
+     * 消息内容渲染函数
+     */
+    /**
+     * 快捷短语
+     */
+    quickReplies?: QuickReplyItemProps[];
+    /**
+     * 快捷短语是否可见
+     */
+    quickRepliesVisible?: boolean;
+    /**
+     * 快捷短语的点击回调
+     */
+    onQuickReplyClick?: (item: QuickReplyItemProps, index: number) => void;
+    /**
+     * 快捷短语的滚动回调
+     */
+    onQuickReplyScroll?: () => void;
+    /**
+     * 快捷短语渲染函数
+     */
+    renderQuickReplies?: () => void;
+    /**
+     * 输入区 ref
+     */
+    composerRef?: React.RefObject<ComposerHandle>;
+    /**
+     * 输入框初始内容
+     */
+    /**
+     * 输入框占位符
+     */
+    /**
+     * 输入框聚焦回调
+     */
+    onInputFocus?: ComposerProps['onFocus'];
+    /**
+     * 输入框更新回调
+     */
+    onInputChange?: ComposerProps['onChange'];
+    /**
+     * 输入框失去焦点回调
+     */
+    onInputBlur?: ComposerProps['onBlur'];
+    /**
+     * 发送消息回调
+     */
+    /**
+     * 发送图片回调
+     */
+    /**
+     * 输入方式
+     */
+    /**
+     * 输入方式切换回调
+     */
+    /**
+     * 语音输入
+     */
+    /**
+     * 工具栏
+     */
+    /**
+     * 点击工具栏回调
+     */
+    /**
+     * 点击附加内容回调
+     */
+    /**
+     * 输入组件
+     */
+    Composer?: React.ElementType;
+};
+export declare const Chat: React.ForwardRefExoticComponent<Omit<ComposerProps, "onFocus" | "onBlur" | "onChange"> & ConfigContextType & MessageContainerProps & {
+    /**
+     * 宽版模式断点
+     */
+    /**
+     * 导航栏配置
+     */
+    navbar?: NavbarProps;
+    /**
+     * 导航栏渲染函数
+     */
+    renderNavbar?: () => React.ReactNode;
+    /**
+     * 加载更多文案
+     */
+    /**
+     * 在消息列表上面的渲染函数
+     */
+    /**
+     * 消息列表 ref
+     */
+    messagesRef?: React.RefObject<MessageContainerHandle>;
+    /**
+     * 下拉加载回调
+     */
+    /**
+     * 滚动消息列表回调
+     */
+    /**
+     * 消息列表
+     */
+    /**
+     * 消息内容渲染函数
+     */
+    /**
+     * 快捷短语
+     */
+    quickReplies?: QuickReplyItemProps[];
+    /**
+     * 快捷短语是否可见
+     */
+    quickRepliesVisible?: boolean;
+    /**
+     * 快捷短语的点击回调
+     */
+    onQuickReplyClick?: (item: QuickReplyItemProps, index: number) => void;
+    /**
+     * 快捷短语的滚动回调
+     */
+    onQuickReplyScroll?: () => void;
+    /**
+     * 快捷短语渲染函数
+     */
+    renderQuickReplies?: () => void;
+    /**
+     * 输入区 ref
+     */
+    composerRef?: React.RefObject<ComposerHandle>;
+    /**
+     * 输入框初始内容
+     */
+    /**
+     * 输入框占位符
+     */
+    /**
+     * 输入框聚焦回调
+     */
+    onInputFocus?: ComposerProps["onFocus"];
+    /**
+     * 输入框更新回调
+     */
+    onInputChange?: ComposerProps["onChange"];
+    /**
+     * 输入框失去焦点回调
+     */
+    onInputBlur?: ComposerProps["onBlur"];
+    /**
+     * 发送消息回调
+     */
+    /**
+     * 发送图片回调
+     */
+    /**
+     * 输入方式
+     */
+    /**
+     * 输入方式切换回调
+     */
+    /**
+     * 语音输入
+     */
+    /**
+     * 工具栏
+     */
+    /**
+     * 点击工具栏回调
+     */
+    /**
+     * 点击附加内容回调
+     */
+    /**
+     * 输入组件
+     */
+    Composer?: React.ElementType;
+} & React.RefAttributes<HTMLDivElement>>;

package/lib/components/Chat/index.js

@@ -0,0 +1,166 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Chat = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _ConfigProvider = require("../ConfigProvider");
+var _Navbar = require("../Navbar");
+var _MessageContainer = require("../MessageContainer");
+var _QuickReplies = require("../QuickReplies");
+var _Composer = require("../Composer");
+var _ua = require("../../utils/ua");
+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 Chat = exports.Chat = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var wideBreakpoint = props.wideBreakpoint,
+    _props$locale = props.locale,
+    locale = _props$locale === void 0 ? 'zh-CN' : _props$locale,
+    locales = props.locales,
+    colorScheme = props.colorScheme,
+    elderMode = props.elderMode,
+    navbar = props.navbar,
+    renderNavbar = props.renderNavbar,
+    loadMoreText = props.loadMoreText,
+    renderBeforeMessageList = props.renderBeforeMessageList,
+    messagesRef = props.messagesRef,
+    onRefresh = props.onRefresh,
+    onScroll = props.onScroll,
+    _props$messages = props.messages,
+    messages = _props$messages === void 0 ? [] : _props$messages,
+    isTyping = props.isTyping,
+    renderMessageContent = props.renderMessageContent,
+    onBackBottomShow = props.onBackBottomShow,
+    onBackBottomClick = props.onBackBottomClick,
+    _props$quickReplies = props.quickReplies,
+    quickReplies = _props$quickReplies === void 0 ? [] : _props$quickReplies,
+    quickRepliesVisible = props.quickRepliesVisible,
+    _props$onQuickReplyCl = props.onQuickReplyClick,
+    onQuickReplyClick = _props$onQuickReplyCl === void 0 ? function () {} : _props$onQuickReplyCl,
+    onQuickReplyScroll = props.onQuickReplyScroll,
+    renderQuickReplies = props.renderQuickReplies,
+    text = props.text,
+    textOnce = props.textOnce,
+    placeholder = props.placeholder,
+    onInputFocus = props.onInputFocus,
+    onInputChange = props.onInputChange,
+    onInputBlur = props.onInputBlur,
+    onSend = props.onSend,
+    onBeforeSend = props.onBeforeSend,
+    onImageSend = props.onImageSend,
+    inputOptions = props.inputOptions,
+    composerRef = props.composerRef,
+    inputType = props.inputType,
+    onInputTypeChange = props.onInputTypeChange,
+    recorder = props.recorder,
+    toolbar = props.toolbar,
+    onToolbarClick = props.onToolbarClick,
+    onAccessoryToggle = props.onAccessoryToggle,
+    rightAction = props.rightAction,
+    _props$Composer = props.Composer,
+    Composer = _props$Composer === void 0 ? _Composer.Composer : _props$Composer,
+    isX = props.isX;
+  var _useState = (0, _react.useState)('light'),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    currentColorScheme = _useState2[0],
+    setCurrentColorScheme = _useState2[1];
+  function handleInputFocus(e) {
+    if (messagesRef && messagesRef.current) {
+      messagesRef.current.scrollToEnd({
+        animated: false,
+        force: true
+      });
+    }
+    if (onInputFocus) {
+      onInputFocus(e);
+    }
+  }
+  (0, _react.useEffect)(function () {
+    var rootEl = document.documentElement;
+    if (_ua.isSafari || _ua.isHuaweiBrowser) {
+      rootEl.dataset.safari = '';
+    }
+    var v = (0, _ua.getIOSMajorVersion)();
+    if (v) {
+      if (v < 11) {
+        // iOS 9、10 不支持按钮使用 flex
+        rootEl.classList.add('no-btn-flex');
+      }
+      if (v < 13) {
+        rootEl.classList.add('no-scrolling');
+      }
+    }
+  }, []);
+  (0, _react.useEffect)(function () {
+    var updateColorScheme = function updateColorScheme(scheme) {
+      setCurrentColorScheme(scheme);
+      document.documentElement.dataset.colorScheme = scheme;
+    };
+    if (colorScheme === 'auto') {
+      var colorSchemeQuery = window.matchMedia('(prefers-color-scheme: dark)');
+      var handleColorSchemeChange = function handleColorSchemeChange(e) {
+        updateColorScheme(e.matches ? 'dark' : 'light');
+      };
+      colorSchemeQuery.addEventListener('change', handleColorSchemeChange);
+      handleColorSchemeChange(colorSchemeQuery);
+      return function () {
+        colorSchemeQuery.removeEventListener('change', handleColorSchemeChange);
+      };
+    } else if (colorScheme === 'dark') {
+      updateColorScheme(colorScheme);
+    }
+    return;
+  }, [colorScheme]);
+  return /*#__PURE__*/_react.default.createElement(_ConfigProvider.ConfigProvider, {
+    locale: locale,
+    locales: locales,
+    colorScheme: currentColorScheme,
+    elderMode: elderMode
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "ChatApp",
+    "data-elder-mode": elderMode,
+    "data-x": isX,
+    ref: ref
+  }, renderNavbar ? renderNavbar() : navbar && /*#__PURE__*/_react.default.createElement(_Navbar.Navbar, navbar), /*#__PURE__*/_react.default.createElement(_MessageContainer.MessageContainer, {
+    ref: messagesRef,
+    loadMoreText: loadMoreText,
+    messages: messages,
+    isTyping: isTyping,
+    renderBeforeMessageList: renderBeforeMessageList,
+    renderMessageContent: renderMessageContent,
+    onRefresh: onRefresh,
+    onScroll: onScroll,
+    onBackBottomShow: onBackBottomShow,
+    onBackBottomClick: onBackBottomClick
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "ChatFooter"
+  }, renderQuickReplies ? renderQuickReplies() : /*#__PURE__*/_react.default.createElement(_QuickReplies.QuickReplies, {
+    items: quickReplies,
+    visible: quickRepliesVisible,
+    onClick: onQuickReplyClick,
+    onScroll: onQuickReplyScroll
+  }), /*#__PURE__*/_react.default.createElement(Composer, {
+    wideBreakpoint: wideBreakpoint,
+    ref: composerRef,
+    inputType: inputType,
+    text: text,
+    textOnce: textOnce,
+    inputOptions: inputOptions,
+    placeholder: placeholder,
+    onAccessoryToggle: onAccessoryToggle,
+    recorder: recorder,
+    toolbar: toolbar,
+    onToolbarClick: onToolbarClick,
+    onInputTypeChange: onInputTypeChange,
+    onFocus: handleInputFocus,
+    onChange: onInputChange,
+    onBlur: onInputBlur,
+    onSend: onSend,
+    onBeforeSend: onBeforeSend,
+    onImageSend: onImageSend,
+    rightAction: rightAction
+  }))));
+});

package/lib/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export type CheckboxValue = string | number | undefined;
+export type CheckboxProps = React.InputHTMLAttributes<HTMLInputElement> & {
+    value?: CheckboxValue;
+    label?: CheckboxValue;
+};
+export declare const Checkbox: (props: CheckboxProps) => React.JSX.Element;

package/lib/components/Checkbox/Checkbox.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Checkbox = 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", "label", "checked", "disabled", "onChange"];
+var Checkbox = exports.Checkbox = function Checkbox(props) {
+  var className = props.className,
+    label = props.label,
+    checked = props.checked,
+    disabled = props.disabled,
+    onChange = props.onChange,
+    other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  return /*#__PURE__*/_react.default.createElement("label", {
+    className: (0, _clsx.default)('Checkbox', className, {
+      'Checkbox--checked': checked,
+      'Checkbox--disabled': disabled
+    })
+  }, /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({
+    type: "checkbox",
+    className: "Checkbox-input",
+    checked: checked,
+    disabled: disabled,
+    onChange: onChange
+  }, other)), /*#__PURE__*/_react.default.createElement("span", {
+    className: "Checkbox-text"
+  }, label));
+};

package/lib/components/Checkbox/CheckboxGroup.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { CheckboxProps, CheckboxValue } from './Checkbox';
+export type CheckboxGroupProps = {
+    className?: string;
+    options: CheckboxProps[];
+    value: CheckboxValue[];
+    name?: string;
+    disabled?: boolean;
+    block?: boolean;
+    align?: 'left' | 'right';
+    maxPerRow?: number;
+    flex?: boolean;
+    onChange: (value: CheckboxValue[], event: React.ChangeEvent<HTMLInputElement>) => void;
+};
+export declare const CheckboxGroup: (props: CheckboxGroupProps) => React.JSX.Element;

package/lib/components/Checkbox/CheckboxGroup.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CheckboxGroup = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Checkbox = require("./Checkbox");
+var CheckboxGroup = exports.CheckboxGroup = function CheckboxGroup(props) {
+  var className = props.className,
+    options = props.options,
+    value = props.value,
+    name = props.name,
+    disabled = props.disabled,
+    block = props.block,
+    align = props.align,
+    maxPerRow = props.maxPerRow,
+    flex = props.flex,
+    onChange = props.onChange;
+  function handleChange(val, e) {
+    var newValue = e.target.checked ? value.concat(val) : value.filter(function (item) {
+      return item !== val;
+    });
+    onChange(newValue, e);
+  }
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _clsx.default)('CheckboxGroup', {
+      'CheckboxGroup--block': block
+    }, className),
+    "data-align": align,
+    "data-layout": flex ? 'flex' : maxPerRow,
+    style: maxPerRow && !flex ? {
+      '--max-per-row': maxPerRow
+    } : undefined
+  }, options.map(function (item) {
+    return /*#__PURE__*/_react.default.createElement(_Checkbox.Checkbox, {
+      label: item.label || item.value,
+      value: item.value,
+      name: name,
+      checked: value.includes(item.value),
+      disabled: 'disabled' in item ? item.disabled : disabled,
+      onChange: function onChange(e) {
+        handleChange(item.value, e);
+      },
+      key: item.value
+    });
+  }));
+};

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

@@ -0,0 +1,4 @@
+export { Checkbox } from './Checkbox';
+export type { CheckboxProps, CheckboxValue } from './Checkbox';
+export { CheckboxGroup } from './CheckboxGroup';
+export type { CheckboxGroupProps } from './CheckboxGroup';

package/lib/components/Checkbox/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Checkbox", {
+  enumerable: true,
+  get: function get() {
+    return _Checkbox.Checkbox;
+  }
+});
+Object.defineProperty(exports, "CheckboxGroup", {
+  enumerable: true,
+  get: function get() {
+    return _CheckboxGroup.CheckboxGroup;
+  }
+});
+var _Checkbox = require("./Checkbox");
+var _CheckboxGroup = require("./CheckboxGroup");

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

@@ -0,0 +1,7 @@
+import React from 'react';
+export type ClickOutsideProps = {
+    onClick: (event: React.MouseEvent<HTMLElement>) => void;
+    mouseEvent?: 'click' | 'mousedown' | 'mouseup';
+    children?: React.ReactNode;
+};
+export declare const ClickOutside: (props: ClickOutsideProps) => React.JSX.Element;

package/lib/components/ClickOutside/index.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ClickOutside = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _excluded = ["children", "onClick", "mouseEvent"];
+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 doc = document;
+var html = doc.documentElement;
+var ClickOutside = exports.ClickOutside = function ClickOutside(props) {
+  var children = props.children,
+    onClick = props.onClick,
+    _props$mouseEvent = props.mouseEvent,
+    mouseEvent = _props$mouseEvent === void 0 ? 'mouseup' : _props$mouseEvent,
+    others = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var wrapper = (0, _react.useRef)(null);
+  function handleClick(e) {
+    if (!wrapper.current) return;
+    if (html.contains(e.target) && !wrapper.current.contains(e.target)) {
+      onClick(e);
+    }
+  }
+  (0, _react.useEffect)(function () {
+    if (mouseEvent) {
+      doc.addEventListener(mouseEvent, handleClick);
+    }
+    return function () {
+      doc.removeEventListener(mouseEvent, handleClick);
+    };
+  });
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+    ref: wrapper
+  }, others), children);
+};

package/lib/components/ComponentsProvider/ComponentsContext.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ComponentsContextInterface } from './interface';
+export declare const ComponentsContext: React.Context<ComponentsContextInterface>;

package/lib/components/ComponentsProvider/ComponentsContext.js

@@ -0,0 +1,17 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ComponentsContext = void 0;
+var _react = _interopRequireDefault(require("react"));
+var ComponentsContext = exports.ComponentsContext = /*#__PURE__*/_react.default.createContext({
+  addComponent: function addComponent() {},
+  hasComponent: function hasComponent() {
+    return false;
+  },
+  getComponent: function getComponent() {
+    return null;
+  }
+});

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ComponentsProviderProps, ComponentsMap } from './interface';
+export { useComponents } from './useComponents';
+export type { ComponentsProviderProps, ComponentsMap };
+export declare const ComponentsProvider: (props: ComponentsProviderProps) => React.JSX.Element;