@dpocean/chatui 1.0.0

package/es/components/Quote/style.less

@@ -0,0 +1,46 @@
+.Quote {
+  padding-left: 9px;
+  border-left: 3px solid var(--color-line-1);
+  color: var(--color-text-2);
+  font-size: 12px;
+
+  & + .Divider {
+    margin-top: 9px;
+  }
+  .Image,
+  .Video-cover,
+  .Video-video:not([hidden]) {
+    max-width: 72px;
+    max-height: 72px;
+    border-radius: var(--radius-md);
+  }
+  .Image,
+  .Video {
+    display: inline-block;
+    vertical-align: top;
+  }
+  .Video-video {
+    width: auto;
+  }
+  .Video-playBtn {
+    pointer-events: none;
+  }
+  .Video-playIcon {
+    font-size: 24px;
+  }
+}
+
+.Bubble {
+  .Quote:hover {
+    cursor: pointer;
+  }
+  .Quote-content {
+    a {
+      pointer-events: none;
+    }
+  }
+}
+
+.Quote-author {
+  color: var(--color-text-3);
+}

package/es/components/Radio/Radio.js

@@ -0,0 +1,27 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "label", "checked", "disabled", "onChange"];
+import React from 'react';
+import clsx from 'clsx';
+export var Radio = function Radio(props) {
+  var className = props.className,
+    label = props.label,
+    checked = props.checked,
+    disabled = props.disabled,
+    onChange = props.onChange,
+    other = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/React.createElement("label", {
+    className: clsx('Radio', className, {
+      'Radio--checked': checked,
+      'Radio--disabled': disabled
+    })
+  }, /*#__PURE__*/React.createElement("input", _extends({
+    type: "radio",
+    className: "Radio-input",
+    checked: checked,
+    disabled: disabled,
+    onChange: onChange
+  }, other)), /*#__PURE__*/React.createElement("span", {
+    className: "Radio-text"
+  }, label));
+};

package/es/components/Radio/RadioGroup.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import clsx from 'clsx';
+import { Radio } from './Radio';
+export var RadioGroup = function RadioGroup(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;
+  return /*#__PURE__*/React.createElement("div", {
+    className: clsx('RadioGroup', {
+      'RadioGroup--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.createElement(Radio, {
+      label: item.label || item.value,
+      value: item.value,
+      name: name,
+      checked: value === item.value,
+      disabled: 'disabled' in item ? item.disabled : disabled,
+      onChange: function onChange(e) {
+        _onChange(item.value, e);
+      },
+      key: item.value
+    });
+  }));
+};

package/es/components/Radio/index.js

@@ -0,0 +1,2 @@
+export { Radio } from './Radio';
+export { RadioGroup } from './RadioGroup';

package/es/components/Radio/style.less

@@ -0,0 +1,87 @@
+.Checkbox,
+.Radio {
+  position: relative;
+  display: inline-block;
+  margin: var(--radio-gap) var(--radio-gap) 0 0;
+  padding: 8px;
+  border-radius: var(--radius-md);
+  background: var(--color-fill-2);
+  color: var(--color-text-1);
+  font-size: 14px;
+  line-height: 20px;
+  text-align: center;
+  cursor: pointer;
+  transition: background 0.15s ease-in-out;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.CheckboxGroup,
+.RadioGroup {
+  --radio-gap: 8px;
+
+  margin-top: calc(var(--radio-gap) * -1);
+
+  &[data-align='left'] {
+    text-align: left;
+  }
+  &[data-align='right'] {
+    text-align: right;
+  }
+  &[data-layout] {
+    display: flex;
+    flex-wrap: wrap;
+    margin-right: calc(var(--radio-gap) * -1);
+  }
+}
+
+.CheckboxGroup--block,
+.RadioGroup--block {
+  margin-top: 0;
+}
+
+.CheckboxGroup--block .Checkbox,
+.RadioGroup--block .Radio {
+  display: block;
+  margin-right: 0;
+}
+
+.CheckboxGroup[data-layout] .Checkbox,
+.RadioGroup[data-layout] .Radio {
+  // 使用 CSS 变量 --max-per-row 动态计算宽度，避免重复代码
+  // 当 data-layout 为数字时，使用 calc(100% / var(--max-per-row) - var(--radio-gap))
+  // 当 data-layout 为 'flex' 时，flex: 1
+  flex: 0 0 calc(100% / var(--max-per-row) - var(--radio-gap));
+  min-width: 0;
+}
+
+// 等分布局：data-layout='flex' 时，每个项目平均分配空间
+.CheckboxGroup[data-layout='flex'] .Checkbox,
+.RadioGroup[data-layout='flex'] .Radio {
+  flex: 1;
+}
+
+.Checkbox--disabled,
+.Radio--disabled {
+  opacity: 0.5;
+  cursor: initial;
+}
+
+.Checkbox--checked,
+.Radio--checked {
+  background: var(--brand-4);
+  color: var(--brand-1);
+  font-weight: 600;
+}
+
+.Checkbox-input,
+.Radio-input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  opacity: 0;
+  cursor: inherit;
+}

package/es/components/RateActions/index.js

@@ -0,0 +1,54 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState } from 'react';
+import clsx from 'clsx';
+import { IconButton } from '../IconButton';
+import { useLocale } from '../ConfigProvider';
+var UP = 'up';
+var DOWN = 'down';
+export var RateActions = function RateActions(props) {
+  var _useLocale = useLocale('RateActions', {
+      up: 'Up vote',
+      down: 'Down vote'
+    }),
+    trans = _useLocale.trans;
+  var _props$upTitle = props.upTitle,
+    upTitle = _props$upTitle === void 0 ? trans('up') : _props$upTitle,
+    _props$downTitle = props.downTitle,
+    downTitle = _props$downTitle === void 0 ? trans('down') : _props$downTitle,
+    onClick = props.onClick;
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  function handleClick(val) {
+    if (!value) {
+      setValue(val);
+      onClick(val);
+    }
+  }
+  function handleUpClick() {
+    handleClick(UP);
+  }
+  function handleDownClick() {
+    handleClick(DOWN);
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: "RateActions"
+  }, value !== DOWN && /*#__PURE__*/React.createElement(IconButton, {
+    className: clsx('RateBtn', {
+      active: value === UP
+    }),
+    title: upTitle,
+    "data-type": UP,
+    icon: "thumbs-up",
+    onClick: handleUpClick
+  }), value !== UP && /*#__PURE__*/React.createElement(IconButton, {
+    className: clsx('RateBtn', {
+      active: value === DOWN
+    }),
+    title: downTitle,
+    "data-type": DOWN,
+    icon: "thumbs-down",
+    onClick: handleDownClick
+  }));
+};

package/es/components/RateActions/style.less

@@ -0,0 +1,34 @@
+.ChatApp[data-elder-mode='true'] {
+  --rate-width: 38Px;
+}
+
+.RateActions {
+  position: relative;
+  z-index: @zindex-rate-actions;
+  align-self: flex-end;
+  width: var(--rate-width);
+  margin-left: var(--msg-avatar-gap);
+}
+
+.RateBtn {
+  padding: 6Px;
+  border-radius: var(--radius-md);
+  background: @rate-btn-bg;
+  font-size: calc(var(--rate-width) - 12Px);
+
+  & + .RateBtn {
+    margin-top: 9Px;
+  }
+  &[data-type='up'] {
+    &:hover,
+    &.active {
+      color: var(--brand-1);
+    }
+  }
+  &[data-type='down'] {
+    &:hover,
+    &.active {
+      color: var(--blue);
+    }
+  }
+}

package/es/components/Recorder/index.js

@@ -0,0 +1,128 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState, useEffect, useRef, useImperativeHandle, useCallback } from 'react';
+import clsx from 'clsx';
+import { Flex } from '../Flex';
+import { Icon } from '../Icon';
+import { useLocale } from '../ConfigProvider';
+import canUse from '../../utils/canUse';
+var canPassive = canUse('passiveListener');
+var listenerOpts = canPassive ? {
+  passive: true
+} : false;
+var listenerOptsWithoutPassive = canPassive ? {
+  passive: false
+} : false;
+var MOVE_INTERVAL = 80;
+var btnTextMap = {
+  inited: 'hold2talk',
+  recording: 'release2send',
+  willCancel: 'release2send'
+};
+var ts = 0;
+var startY = 0;
+export var Recorder = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var volume = props.volume,
+    onStart = props.onStart,
+    onEnd = props.onEnd,
+    onCancel = props.onCancel;
+  var _useState = useState('inited'),
+    _useState2 = _slicedToArray(_useState, 2),
+    status = _useState2[0],
+    setStatus = _useState2[1];
+  var btnRef = useRef(null);
+  var _useLocale = useLocale('Recorder'),
+    trans = _useLocale.trans;
+  var doEnd = useCallback(function () {
+    var duration = Date.now() - ts;
+    if (onEnd) {
+      onEnd({
+        duration: duration
+      });
+    }
+  }, [onEnd]);
+  useImperativeHandle(ref, function () {
+    return {
+      stop: function stop() {
+        setStatus('inited');
+        doEnd();
+        ts = 0;
+      }
+    };
+  });
+  useEffect(function () {
+    var wrapper = btnRef.current;
+    function handleTouchStart(e) {
+      if (e.cancelable) {
+        e.preventDefault();
+      }
+      var touch0 = e.touches[0];
+      startY = touch0.pageY;
+      ts = Date.now();
+      setStatus('recording');
+      if (onStart) {
+        onStart();
+      }
+    }
+    function handleTouchMove(e) {
+      if (!ts) return;
+      var nowY = e.touches[0].pageY;
+      var isCancel = startY - nowY > MOVE_INTERVAL;
+      setStatus(isCancel ? 'willCancel' : 'recording');
+    }
+    function handleTouchEnd(e) {
+      if (!ts) return;
+      var endY = e.changedTouches[0].pageY;
+      var isRecording = startY - endY < MOVE_INTERVAL;
+      setStatus('inited');
+      if (isRecording) {
+        doEnd();
+      } else if (onCancel) {
+        onCancel();
+      }
+    }
+    wrapper.addEventListener('touchstart', handleTouchStart, listenerOptsWithoutPassive);
+    wrapper.addEventListener('touchmove', handleTouchMove, listenerOpts);
+    wrapper.addEventListener('touchend', handleTouchEnd);
+    wrapper.addEventListener('touchcancel', handleTouchEnd);
+    return function () {
+      wrapper.removeEventListener('touchstart', handleTouchStart);
+      wrapper.removeEventListener('touchmove', handleTouchMove);
+      wrapper.removeEventListener('touchend', handleTouchEnd);
+      wrapper.removeEventListener('touchcancel', handleTouchEnd);
+    };
+  }, [doEnd, onCancel, onStart]);
+  var isCancel = status === 'willCancel';
+  var wavesStyle = {
+    transform: "scale(".concat((volume || 1) / 100 + 1, ")")
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: clsx('Recorder', {
+      'Recorder--cancel': isCancel
+    }),
+    ref: btnRef
+  }, status !== 'inited' && /*#__PURE__*/React.createElement(Flex, {
+    className: "RecorderToast",
+    direction: "column",
+    center: true
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "RecorderToast-waves",
+    hidden: status !== 'recording',
+    style: wavesStyle
+  }, /*#__PURE__*/React.createElement(Icon, {
+    className: "RecorderToast-wave-1",
+    type: "hexagon"
+  }), /*#__PURE__*/React.createElement(Icon, {
+    className: "RecorderToast-wave-2",
+    type: "hexagon"
+  }), /*#__PURE__*/React.createElement(Icon, {
+    className: "RecorderToast-wave-3",
+    type: "hexagon"
+  })), /*#__PURE__*/React.createElement(Icon, {
+    className: "RecorderToast-icon",
+    type: isCancel ? 'cancel' : 'mic'
+  }), /*#__PURE__*/React.createElement("span", null, trans(isCancel ? 'release2cancel' : 'releaseOrSwipe'))), /*#__PURE__*/React.createElement("div", {
+    className: "Recorder-btn",
+    role: "button",
+    "aria-label": trans('hold2talk')
+  }, /*#__PURE__*/React.createElement("span", null, trans(btnTextMap[status]))));
+});

package/es/components/Recorder/style.less

@@ -0,0 +1,89 @@
+.RecorderToast {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  z-index: @zindex-recorder-toast;
+  width: 160px;
+  height: 160px;
+  padding: 10px;
+  transform: translate(-50%, -50%);
+  border-radius: 12px;
+  background: var(--color-toast);
+  color: var(--color-fill-1);
+  text-align: center;
+}
+
+.Recorder--cancel {
+  .RecorderToast {
+    color: var(--red);
+  }
+  .Recorder-btn {
+    background: @btn-hover-bg;
+    color: var(--color-text-3);
+  }
+}
+
+.RecorderToast-icon {
+  position: relative;
+  font-size: 37px;
+}
+
+.RecorderToast-waves {
+  position: absolute;
+  z-index: -1;
+  width: 100%;
+  height: 100%;
+  transition: .3s;
+}
+
+.RecorderToast-wave-1,
+.RecorderToast-wave-2,
+.RecorderToast-wave-3 {
+  position: absolute;
+  z-index: -1;
+  color: var(--brand-2);
+  animation: wave 10s linear infinite;
+}
+
+.RecorderToast-wave-1 {
+  top: -25px;
+  left: 14px;
+  font-size: 176px;
+  opacity: 0.2;
+}
+
+.RecorderToast-wave-2 {
+  top: -12px;
+  left: -21px;
+  font-size: 186px;
+  opacity: 0.4;
+}
+
+.RecorderToast-wave-3 {
+  top: 40px;
+  left: 55px;
+  font-size: 71px;
+  opacity: 0.8;
+}
+
+.Recorder-btn {
+  height: 36px;
+  border-radius: var(--radius-md);
+  background: var(--color-fill-1);
+  color: var(--brand-1);
+  line-height: 36px;
+  text-align: center;
+  transition: .3s;
+}
+
+@keyframes wave {
+  0% {
+    transform: translateY(5%) rotate(0);
+  }
+  50% {
+    transform: translateY(-5%) rotate(180deg);
+  }
+  100% {
+    transform: translateY(5%) rotate(360deg);
+  }
+}

package/es/components/RedPacket/index.js

@@ -0,0 +1,93 @@
+import React from 'react';
+import clsx from 'clsx';
+import { Price } from '../Price';
+import { Button } from '../Button';
+import { Flex, FlexItem } from '../Flex';
+import { Text } from '../Text';
+import { Image } from '../Image';
+import { Ribbon } from '../Ribbon';
+import { formatExpireTime } from '../../utils/date';
+var statusLabelMap = {
+  normal: '',
+  nearExpired: '快失效',
+  expired: '已过期',
+  used: '已使用'
+};
+export var RedPacket = function RedPacket(props) {
+  var className = props.className,
+    value = props.value,
+    condition = props.condition,
+    name = props.name,
+    endAt = props.endAt,
+    dateDesc = props.dateDesc,
+    desc = props.desc,
+    _props$status = props.status,
+    status = _props$status === void 0 ? 'normal' : _props$status,
+    _props$variant = props.variant,
+    variant = _props$variant === void 0 ? 'redPacket' : _props$variant,
+    tag = props.tag,
+    image = props.image,
+    _props$inList = props.inList,
+    inList = _props$inList === void 0 ? false : _props$inList,
+    _props$btnText = props.btnText,
+    btnText = _props$btnText === void 0 ? '查看' : _props$btnText,
+    onClick = props.onClick;
+  var statusLabel = statusLabelMap[status] || '';
+  return /*#__PURE__*/React.createElement(Flex, {
+    className: clsx('RedPacket', className),
+    "data-variant": variant,
+    "data-status": status,
+    "data-in-list": inList,
+    onClick: inList ? undefined : onClick
+  }, /*#__PURE__*/React.createElement(Flex, {
+    className: "RedPacket-object",
+    center: true,
+    direction: "column"
+  }, image ? /*#__PURE__*/React.createElement(Image, {
+    className: "RedPacket-img",
+    src: image,
+    width: "70",
+    height: "53"
+  }) : /*#__PURE__*/React.createElement(React.Fragment, null, value && /*#__PURE__*/React.createElement(Price, {
+    className: "RedPacket-value",
+    price: value,
+    currency: "\xA5",
+    autoFit: true
+  }), /*#__PURE__*/React.createElement(Text, {
+    className: "RedPacket-condition",
+    truncate: true
+  }, condition)), /*#__PURE__*/React.createElement("svg", {
+    className: "RedPacket-arc",
+    width: "12",
+    height: "80",
+    viewBox: "0 0 24 160",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "var(--red-packet-arc-color)",
+    d: "M0 160h24V0H.4C6.77 20.445 10.7 48.462 10.7 79.369 10.701 110.917 6.607 139.454 0 160"
+  }))), /*#__PURE__*/React.createElement(FlexItem, {
+    className: "RedPacket-main"
+  }, /*#__PURE__*/React.createElement(Text, {
+    className: "RedPacket-name",
+    truncate: true
+  }, name), dateDesc ? /*#__PURE__*/React.createElement(Text, {
+    className: "RedPacket-desc",
+    truncate: true
+  }, dateDesc) : endAt ? /*#__PURE__*/React.createElement(Text, {
+    className: "RedPacket-desc",
+    truncate: true
+  }, formatExpireTime(endAt)) : null, /*#__PURE__*/React.createElement(Text, {
+    className: "RedPacket-desc",
+    truncate: true
+  }, desc)), onClick && /*#__PURE__*/React.createElement(Flex, {
+    className: "RedPacket-actions",
+    center: true
+  }, /*#__PURE__*/React.createElement(Button, {
+    className: "RedPacket-btn",
+    onClick: inList ? onClick : undefined
+  }, btnText)), statusLabel && /*#__PURE__*/React.createElement(Ribbon, {
+    color: ['expired', 'used'].includes(status) ? 'gray' : 'primary',
+    position: "right",
+    size: "sm"
+  }, statusLabel), tag && /*#__PURE__*/React.createElement(Ribbon, null, tag));
+};