@dpocean/chatui 1.0.0

package/es/components/RedPacket/style.less

@@ -0,0 +1,135 @@
+.RedPacket {
+  --red-packet-object-width: 84px;
+  --red-packet-height: 80px;
+  --red-packet-color: var(--red);
+  --red-packet-value-color: var(--red-packet-color);
+  --red-packet-condition-color: rgba(255, 3, 0, 0.5);
+  --red-packet-main-text-color: var(--white);
+  --red-packet-name-font-size: 15px;
+  --red-packet-desc-color: rgba(255, 255, 255, 0.9);
+  --red-packet-desc-font-size: 12px;
+  --red-packet-object-bg: var(--white);
+  --red-packet-bg: linear-gradient(270deg, #ff3333 0%, #ff4433 43%);
+  --red-packet-arc-color: #f43;
+
+  --btn-padding: 3px 12px;
+  --btn-bg: #fff0e9;
+  --btn-active-bg: var(--btn-bg);
+  --btn-hover-bg: var(--btn-bg);
+  --btn-border-color: var(--btn-bg);
+  --btn-color: var(--red-packet-color);
+  --btn-font-size: 13px;
+
+  position: relative;
+  height: var(--red-packet-height);
+  box-sizing: border-box;
+  border-radius: var(--radius-md);
+  border-top-right-radius: calc(var(--radius-md) + 2px);
+  background: var(--red-packet-bg);
+  color: var(--red-packet-main-text-color);
+
+  .Btn {
+    min-width: 0;
+    margin: 12px;
+  }
+  &[data-variant='cash'] {
+    --red-packet-color: #5b360d;
+    --red-packet-main-text-color: var(--red-packet-color);
+    --red-packet-desc-color: rgba(91, 54, 13, 0.9);
+    --red-packet-bg: linear-gradient(270deg, #ffd7a8 0%, #ffe0ba 50%);
+    --red-packet-arc-color: #ffe0ba;
+
+    .Countdown-unit {
+      background: rgba(91, 54, 13, 0.1);
+    }
+  }
+  &[data-variant='image'] {
+    --red-packet-bg: #fff2f2;
+    --red-packet-arc-color: #fff2f2;
+    --red-packet-main-text-color: var(--red);
+    --red-packet-desc-color: rgba(255, 3, 0, 0.9);
+
+    --btn-bg: var(--red);
+    --btn-color: var(--white);
+  }
+  &[data-status='expired'],
+  &[data-status='used'] {
+    border: 1px solid var(--color-line-2);
+    --red-packet-value-color: var(--color-text-1);
+    --red-packet-condition-color: var(--color-text-3);
+    --red-packet-main-text-color: var(--color-text-1);
+    --red-packet-desc-color: var(--color-text-2);
+    --red-packet-object-bg: transparent;
+    --red-packet-bg: var(--color-fill-2);
+
+    --btn-bg: transparent;
+    --btn-border-color: var(--red-packet-color);
+    --btn-color: var(--red-packet-color);
+
+    .RedPacket-arc {
+      display: none;
+    }
+  }
+  &[data-in-list='false'] {
+    --red-packet-object-width: 70px;
+    --red-packet-height: 61px;
+    --red-packet-name-font-size: 12px;
+    --red-packet-desc-font-size: 10px;
+
+    --btn-padding: 2px 6px;
+    --btn-font-size: 12px;
+
+    &[data-status='expired'],
+    &[data-status='used'] {
+      --btn-border-color: var(--color-line-2);
+      --btn-color: var(--color-text-2);
+    }
+  }
+}
+
+.RedPacket-object {
+  position: relative;
+  width: var(--red-packet-object-width);
+  margin-right: 12px;
+  border: 2px solid transparent;
+  border-radius: var(--radius-md) 0 0 var(--radius-md);
+  background: var(--red-packet-object-bg);
+  background-clip: content-box;
+  color: var(--red-packet-value-color);
+  line-height: 1.15;
+}
+
+.RedPacket-condition {
+  color: var(--red-packet-condition-color);
+  font-size: 10px;
+}
+
+.RedPacket-arc {
+  position: absolute;
+  top: -2px;
+  right: -6px;
+  height: var(--red-packet-height);
+  width: 12px;
+}
+
+.RedPacket-main {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.RedPacket-name {
+  font-size: var(--red-packet-name-font-size);
+  font-weight: 500;
+}
+
+.RedPacket-desc {
+  color: var(--red-packet-desc-color);
+  font-size: var(--red-packet-desc-font-size);
+}
+
+@media (max-width: 374px) {
+  .RedPacket .Btn {
+    margin: 0 8px 0 6px;
+  }
+}

package/es/components/Ribbon/index.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import clsx from 'clsx';
+var Arc = function Arc(_ref) {
+  var className = _ref.className;
+  return /*#__PURE__*/React.createElement("svg", {
+    className: clsx('Arc', className),
+    viewBox: "0 0 12 12",
+    width: 6,
+    height: 6
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    fillRule: "evenodd",
+    d: "M12 0C5.373 0 0 5.373 0 12V0z"
+  }));
+};
+export var Ribbon = function Ribbon(props) {
+  var className = props.className,
+    _props$position = props.position,
+    position = _props$position === void 0 ? 'left' : _props$position,
+    _props$size = props.size,
+    size = _props$size === void 0 ? 'md' : _props$size,
+    _props$color = props.color,
+    color = _props$color === void 0 ? 'primary' : _props$color,
+    children = props.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: clsx('Ribbon', className),
+    "data-position": position,
+    "data-size": size,
+    "data-color": color
+  }, /*#__PURE__*/React.createElement(Arc, {
+    className: "Arc-1"
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "Ribbon-text"
+  }, children), /*#__PURE__*/React.createElement(Arc, {
+    className: "Arc-2"
+  }));
+};

package/es/components/Ribbon/style.less

@@ -0,0 +1,71 @@
+.Ribbon {
+  --ribbon-bg: var(--brand-3);
+  --ribbon-color: var(--brand-1);
+
+  position: absolute;
+  top: 0;
+  padding: 2px 6px;
+  background-color: var(--ribbon-bg);
+  color: var(--ribbon-color);
+  font-weight: 500;
+  white-space: nowrap;
+  font-size: 12px;
+
+  &[data-color='gray'] {
+    --ribbon-bg: rgba(80, 96, 122, 0.2);
+    --ribbon-color: var(--color-text-2);
+  }
+
+  &[data-position='left'] {
+    left: 0;
+    border-radius: var(--radius-md) 0 var(--radius-md) 0;
+
+    .Arc-1 {
+      top: 100%;
+      left: 0;
+    }
+    .Arc-2 {
+      top: 0;
+      left: 100%;
+    }
+  }
+  &[data-position='center'] {
+    left: 50%;
+    transform: translateX(-50%);
+    border-radius: 0 0 var(--radius-md) var(--radius-md);
+
+    .Arc-1 {
+      top: 0;
+      right: 100%;
+      transform: rotate(90deg);
+    }
+    .Arc-2 {
+      top: 0;
+      left: 100%;
+    }
+  }
+  &[data-position='right'] {
+    right: 0;
+    border-radius: 0 var(--radius-md) 0 var(--radius-md);
+
+    .Arc-1 {
+      top: 0;
+      right: 100%;
+      transform: rotate(90deg);
+    }
+    .Arc-2 {
+      top: 100%;
+      right: 0;
+      transform: rotate(90deg);
+    }
+  }
+  &[data-size='sm'] {
+    font-size: 10px;
+    line-height: 1;
+  }
+}
+
+.Arc {
+  position: absolute;
+  color: var(--ribbon-bg);
+}

package/es/components/RichText/configDOMPurify.js

@@ -0,0 +1,26 @@
+import DOMPurify from 'dompurify';
+if (DOMPurify.isSupported) {
+  DOMPurify.addHook('beforeSanitizeAttributes', function (node) {
+    if (node instanceof HTMLElement && node.hasAttribute('href')) {
+      var href = node.getAttribute('href');
+      if (href) {
+        node.dataset.cuiHref = href;
+      }
+      if (node.getAttribute('target') === '_blank') {
+        node.dataset.cuiTarget = '1';
+      }
+    }
+  });
+  DOMPurify.addHook('afterSanitizeAttributes', function (node) {
+    if (node instanceof HTMLElement) {
+      if (node.dataset.cuiHref && node.hasAttribute('href')) {
+        node.removeAttribute('data-cui-href');
+      }
+      if (node.dataset.cuiTarget) {
+        node.setAttribute('target', '_blank');
+        node.setAttribute('rel', 'noopener noreferrer');
+        node.removeAttribute('data-cui-target');
+      }
+    }
+  });
+}

package/es/components/RichText/index.js

@@ -0,0 +1,25 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "content", "options"];
+import React from 'react';
+import clsx from 'clsx';
+import DOMPurify from 'dompurify';
+import './configDOMPurify';
+export var RichText = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var className = props.className,
+    content = props.content,
+    _props$options = props.options,
+    options = _props$options === void 0 ? {} : _props$options,
+    other = _objectWithoutProperties(props, _excluded);
+  var html = {
+    __html: DOMPurify.sanitize(content, options)
+  };
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: clsx('RichText', className)
+    // eslint-disable-next-line react/no-danger
+    ,
+    dangerouslySetInnerHTML: html,
+    role: "article",
+    ref: ref
+  }, other));
+});

package/es/components/RichText/style.less

@@ -0,0 +1,4 @@
+.RichText {
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}

package/es/components/ScrollGrid/index.js

@@ -0,0 +1,74 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState, useEffect, useRef } from 'react';
+import { useLatest } from '../../hooks/useLatest';
+var indicatorWidth = 20;
+export function ScrollGrid(_ref) {
+  var _ref$wrap = _ref.wrap,
+    wrap = _ref$wrap === void 0 ? false : _ref$wrap,
+    children = _ref.children,
+    onIndicatorToggle = _ref.onIndicatorToggle;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    showIndicator = _useState2[0],
+    setShowIndicator = _useState2[1];
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    barWidth = _useState4[0],
+    setBarWidth = _useState4[1];
+  var _useState5 = useState(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    barLeft = _useState6[0],
+    setBarLeft = _useState6[1];
+  var scrollerRef = useRef(null);
+  var ratioRef = useRef(0.04);
+  var onIndicatorToggleRef = useLatest(onIndicatorToggle);
+  useEffect(function () {
+    if (wrap) return;
+    function updateIndicator() {
+      var scroller = scrollerRef.current;
+      if (!scroller) return;
+      var scrollWidth = scroller.scrollWidth,
+        clientWidth = scroller.clientWidth;
+      if (scrollWidth === clientWidth) {
+        setShowIndicator(false);
+        return;
+      }
+      var ratio = indicatorWidth / scrollWidth;
+      ratioRef.current = ratio;
+      setShowIndicator(true);
+      setBarWidth(clientWidth * ratio);
+    }
+    updateIndicator();
+    window.addEventListener('resize', updateIndicator);
+    return function () {
+      window.removeEventListener('resize', updateIndicator);
+    };
+  }, [wrap]);
+  useEffect(function () {
+    var _onIndicatorToggleRef;
+    (_onIndicatorToggleRef = onIndicatorToggleRef.current) === null || _onIndicatorToggleRef === void 0 || _onIndicatorToggleRef.call(onIndicatorToggleRef, showIndicator);
+  }, [onIndicatorToggleRef, showIndicator]);
+  var handleScroll = function handleScroll(e) {
+    var _ref2 = e.target,
+      scrollLeft = _ref2.scrollLeft;
+    setBarLeft(scrollLeft * ratioRef.current);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "ScrollGrid",
+    "data-wrap": wrap
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "ScrollGrid-scroller",
+    ref: scrollerRef,
+    onScroll: wrap ? undefined : handleScroll
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "ScrollGrid-inner"
+  }, children)), showIndicator && /*#__PURE__*/React.createElement("div", {
+    className: "ScrollGrid-indicator"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "ScrollGrid-indicatorBar",
+    style: {
+      width: barWidth,
+      transform: "translateX(".concat(barLeft, "px)")
+    }
+  })));
+}

package/es/components/ScrollGrid/style.less

@@ -0,0 +1,54 @@
+.ScrollGrid {
+  overflow: hidden;
+
+  &[data-wrap='true'] {
+    .ScrollGrid-inner {
+      flex-wrap: wrap;
+    }
+  }
+  &[data-wrap='false'] {
+    .ScrollGrid-scroller {
+      display: flex;
+      overflow-x: scroll;
+      overflow-y: hidden;
+      margin-bottom: -18px;
+      padding-bottom: 18px;
+    }
+    .ScrollGrid-inner {
+      & > div {
+        flex: 0 0 auto;
+      }
+    }
+  }
+}
+
+.ScrollGrid-scroller {
+  .no-scrolling & {
+    -webkit-overflow-scrolling: touch;
+  }
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.ScrollGrid-inner {
+  display: flex;
+  min-width: 100%;
+}
+
+.ScrollGrid-indicator,
+.ScrollGrid-indicatorBar {
+  height: 3px;
+  border-radius: 100px;
+}
+
+.ScrollGrid-indicator {
+  width: 20px;
+  margin: 3px auto 0;
+  background: var(--color-line-1);
+}
+
+.ScrollGrid-indicatorBar {
+  width: 10px;
+  background: var(--brand-1);
+}

package/es/components/ScrollView/Item.js

@@ -0,0 +1,39 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useEffect, useRef } from 'react';
+import clsx from 'clsx';
+var observerOptions = {
+  threshold: [0, 0.1]
+};
+export var Item = function Item(props) {
+  var item = props.item,
+    effect = props.effect,
+    children = props.children,
+    onIntersect = props.onIntersect;
+  var itemRef = useRef(null);
+  useEffect(function () {
+    if (!onIntersect) return undefined;
+    var observer = new IntersectionObserver(function (_ref) {
+      var _ref2 = _slicedToArray(_ref, 1),
+        entry = _ref2[0];
+      if (entry.intersectionRatio > 0) {
+        // 根据回调返回值判断是否继续监听
+        if (!onIntersect(item, entry)) {
+          observer.unobserve(entry.target);
+        }
+      }
+    }, observerOptions);
+    if (itemRef.current) {
+      observer.observe(itemRef.current);
+    }
+    return function () {
+      observer.disconnect();
+    };
+  }, [item, onIntersect]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: clsx('ScrollView-item', {
+      'slide-in-right-item': effect === 'slide',
+      'A-fadeIn': effect === 'fade'
+    }),
+    ref: itemRef
+  }, children);
+};

package/es/components/ScrollView/ScrollView.js

@@ -0,0 +1,89 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "fullWidth", "scrollX", "effect", "data", "itemKey", "renderItem", "onIntersect", "onScroll", "children"];
+import React, { useRef, useImperativeHandle, useCallback } from 'react';
+import clsx from 'clsx';
+import { Item } from './Item';
+import { IconButton } from '../IconButton';
+import canUse from '../../utils/canUse';
+var hasControls = !canUse('touch');
+export var ScrollView = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var className = props.className,
+    fullWidth = props.fullWidth,
+    _props$scrollX = props.scrollX,
+    scrollX = _props$scrollX === void 0 ? true : _props$scrollX,
+    _props$effect = props.effect,
+    effect = _props$effect === void 0 ? 'slide' : _props$effect,
+    data = props.data,
+    itemKey = props.itemKey,
+    renderItem = props.renderItem,
+    onIntersect = props.onIntersect,
+    onScroll = props.onScroll,
+    children = props.children,
+    other = _objectWithoutProperties(props, _excluded);
+  var scrollerRef = useRef(null);
+  function handlePrev() {
+    var el = scrollerRef.current;
+    el.scrollLeft -= el.offsetWidth;
+  }
+  function handleNext() {
+    var el = scrollerRef.current;
+    el.scrollLeft += el.offsetWidth;
+  }
+  var getItemKey = useCallback(function (item, index) {
+    var key;
+    if (itemKey) {
+      key = typeof itemKey === 'function' ? itemKey(item, index) : item[itemKey];
+    }
+    return key || index;
+  }, [itemKey]);
+  useImperativeHandle(ref, function () {
+    return {
+      scrollTo: function scrollTo(_ref) {
+        var x = _ref.x,
+          y = _ref.y;
+        if (x != null) {
+          scrollerRef.current.scrollLeft = x;
+        }
+        if (y != null) {
+          scrollerRef.current.scrollTop = y;
+        }
+      }
+    };
+  });
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: clsx('ScrollView', {
+      'ScrollView--fullWidth': fullWidth,
+      'ScrollView--x': scrollX,
+      'ScrollView--hasControls': hasControls
+    }, className),
+    ref: ref
+  }, other), hasControls && /*#__PURE__*/React.createElement(IconButton, {
+    className: "ScrollView-control",
+    icon: "chevron-left",
+    "aria-label": "Previous",
+    onClick: handlePrev
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "ScrollView-scroller",
+    ref: scrollerRef,
+    onScroll: onScroll
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "ScrollView-inner"
+  }, data.map(function (item, i) {
+    return /*#__PURE__*/React.createElement(Item, {
+      item: item,
+      effect: item.effect || effect,
+      onIntersect: onIntersect,
+      key: getItemKey(item, i)
+    }, renderItem(item, i));
+  }), children ? /*#__PURE__*/React.createElement(Item, {
+    item: {},
+    effect: effect,
+    onIntersect: onIntersect
+  }, children) : null)), hasControls && /*#__PURE__*/React.createElement(IconButton, {
+    className: "ScrollView-control",
+    icon: "chevron-right",
+    "aria-label": "Next",
+    onClick: handleNext
+  }));
+});

package/es/components/ScrollView/index.js

@@ -0,0 +1 @@
+export { ScrollView } from './ScrollView';

package/es/components/ScrollView/style.less

@@ -0,0 +1,60 @@
+.ScrollView {
+  overflow: hidden;
+
+  &-scroller {
+    scroll-behavior: smooth;
+    -webkit-overflow-scrolling: touch;
+    -ms-overflow-style: none; // IE/Edge
+    scrollbar-width: none; // FF
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+  &--fullWidth {
+    margin: 0 calc(var(--gutter) * -1);
+  }
+  &--fullWidth:not(&--hasControls) &-inner {
+    padding: 0 var(--gutter);
+  }
+}
+
+.ScrollView--x {
+  .ScrollView-scroller {
+    display: flex;
+    overflow-x: scroll;
+    overflow-y: hidden;
+    margin-bottom: -18Px;
+    padding-bottom: 18Px;
+  }
+  .ScrollView-inner {
+    display: flex;
+  }
+  .ScrollView-item {
+    flex: 0 0 auto;
+    margin-left: @scroll-view-spacing-x;
+
+    &:first-child {
+      margin-left: 0;
+    }
+  }
+}
+
+.ScrollView--hasControls {
+  display: flex;
+  align-items: center;
+
+  .ScrollView-scroller {
+    flex: 1;
+  }
+}
+
+.ScrollView-control {
+  padding: 6px;
+  color: var(--color-text-3);
+  font-size: @font-size-md;
+
+  &:not(:disabled):hover {
+    color: var(--brand-1);
+  }
+}