@dpocean/chatui 1.0.0

package/es/components/Search/index.js

@@ -0,0 +1,78 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "onSearch", "onChange", "onClear", "value", "disabled", "clearable", "showSearch"];
+import React, { useState } from 'react';
+import clsx from 'clsx';
+import { Icon } from '../Icon';
+import { IconButton } from '../IconButton';
+import { Button } from '../Button';
+import { Input } from '../Input';
+import { useLocale } from '../ConfigProvider';
+export var Search = function Search(_ref) {
+  var className = _ref.className,
+    onSearch = _ref.onSearch,
+    onChange = _ref.onChange,
+    onClear = _ref.onClear,
+    value = _ref.value,
+    disabled = _ref.disabled,
+    _ref$clearable = _ref.clearable,
+    clearable = _ref$clearable === void 0 ? true : _ref$clearable,
+    _ref$showSearch = _ref.showSearch,
+    showSearch = _ref$showSearch === void 0 ? true : _ref$showSearch,
+    other = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(value || ''),
+    _useState2 = _slicedToArray(_useState, 2),
+    query = _useState2[0],
+    setQuery = _useState2[1];
+  var _useLocale = useLocale('Search'),
+    trans = _useLocale.trans;
+  var handleChange = function handleChange(val) {
+    setQuery(val);
+    if (onChange) {
+      onChange(val);
+    }
+  };
+  var handleClear = function handleClear() {
+    setQuery('');
+    if (onClear) {
+      onClear();
+    }
+  };
+  var handleKeyDown = function handleKeyDown(e) {
+    if (e.keyCode === 13) {
+      if (onSearch) {
+        onSearch(query, e);
+      }
+      e.preventDefault();
+    }
+  };
+  var handleSearchClick = function handleSearchClick(e) {
+    if (onSearch) {
+      onSearch(query, e);
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: clsx('Search', className),
+    "data-disabled": disabled
+  }, /*#__PURE__*/React.createElement(Icon, {
+    className: "Search-icon",
+    type: "search"
+  }), /*#__PURE__*/React.createElement(Input, _extends({
+    className: "Search-input",
+    type: "search",
+    value: query,
+    disabled: disabled,
+    enterKeyHint: "search",
+    onChange: handleChange,
+    onKeyDown: handleKeyDown
+  }, other)), clearable && query && /*#__PURE__*/React.createElement(IconButton, {
+    className: "Search-clear",
+    icon: "x-circle-fill",
+    onClick: handleClear
+  }), showSearch && /*#__PURE__*/React.createElement(Button, {
+    className: "Search-btn",
+    color: "primary",
+    onClick: handleSearchClick
+  }, trans('search')));
+};

package/es/components/Search/style.less

@@ -0,0 +1,47 @@
+.Search {
+  display: flex;
+  align-items: center;
+  padding: 3px 5px 3px 15px;
+  background: var(--color-fill-1);
+  border-radius: var(--radius-md);
+
+  &-icon,
+  &-clear {
+    font-size: var(--font-size-lg);
+  }
+  &-icon {
+    color: var(--color-text-3);
+  }
+  &-input {
+    flex: 1;
+    border: 0;
+    padding: 0 9px;
+
+    &::-webkit-search-cancel-button {
+      display: none;
+    }
+  }
+  &-input:focus + &-clear,
+  &-input:focus ~ .Btn--primary {
+    opacity: 1;
+  }
+  &-clear {
+    color: var(--color-text-3);
+    opacity: 0;
+
+    &:hover {
+      background: initial;
+      color: var(--color-text-3);
+    }
+  }
+  &[data-disabled="true"] {
+    opacity: 0.5;
+  }
+  .Btn--primary {
+    min-width: 56px;
+    margin-left: 6px;
+    padding: 2px 12px;
+    font-size: var(--font-size-xs);
+    opacity: 0;
+  }
+}

package/es/components/Select/index.js

@@ -0,0 +1,20 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "placeholder", "variant", "children"];
+import React from 'react';
+import clsx from 'clsx';
+export var Select = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    placeholder = _ref.placeholder,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'outline' : _ref$variant,
+    children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("select", _extends({
+    className: clsx('Input Select', "Input--".concat(variant), className)
+  }, rest, {
+    ref: ref
+  }), placeholder && /*#__PURE__*/React.createElement("option", {
+    value: ""
+  }, placeholder), children);
+});

package/es/components/Select/style.less

@@ -0,0 +1,11 @@
+.Select {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-position: right 0.75rem center;
+  background-size: 16px 12px;
+  appearance: none;
+
+  &:disabled {
+    opacity: 0.5;
+  }
+}

package/es/components/SendConfirm/SendConfirm.js

@@ -0,0 +1,45 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState, useEffect } from 'react';
+import { Modal } from '../Modal';
+import { Flex } from '../Flex';
+import { useLocale } from '../ConfigProvider';
+export var SendConfirm = function SendConfirm(props) {
+  var file = props.file,
+    onCancel = props.onCancel,
+    onSend = props.onSend;
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    img = _useState2[0],
+    setImg = _useState2[1];
+  var _useLocale = useLocale('SendConfirm'),
+    trans = _useLocale.trans;
+  useEffect(function () {
+    var reader = new FileReader();
+    reader.onload = function (e) {
+      if (e.target) {
+        setImg(e.target.result);
+      }
+    };
+    reader.readAsDataURL(file);
+  }, [file]);
+  return /*#__PURE__*/React.createElement(Modal, {
+    className: "SendConfirm",
+    title: trans('title'),
+    active: !!img,
+    vertical: false,
+    actions: [{
+      label: trans('cancel'),
+      onClick: onCancel
+    }, {
+      label: trans('send'),
+      color: 'primary',
+      onClick: onSend
+    }]
+  }, /*#__PURE__*/React.createElement(Flex, {
+    className: "SendConfirm-inner",
+    center: true
+  }, /*#__PURE__*/React.createElement("img", {
+    src: img,
+    alt: ""
+  })));
+};

package/es/components/SendConfirm/index.js

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

package/es/components/SendConfirm/style.less

@@ -0,0 +1,16 @@
+.SendConfirm {
+  .Modal-dialog {
+    width: @send-confirm-dialog-width;
+    margin: @send-confirm-dialog-margin;
+  }
+}
+
+.SendConfirm-inner {
+  height: @send-confirm-inner-height;
+  text-align: center;
+
+  img {
+    max-width: 100%;
+    max-height: 100%;
+  }
+}

package/es/components/Skeleton/index.js

@@ -0,0 +1,21 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React from 'react';
+import clsx from 'clsx';
+export var Skeleton = function Skeleton(_ref) {
+  var className = _ref.className,
+    w = _ref.w,
+    h = _ref.h,
+    mb = _ref.mb,
+    r = _ref.r,
+    style = _ref.style;
+  return /*#__PURE__*/React.createElement("div", {
+    className: clsx('Skeleton', r && "Skeleton--r-".concat(r), className),
+    style: _objectSpread(_objectSpread({}, style), {}, {
+      width: w,
+      height: h,
+      marginBottom: mb
+    })
+  });
+};

package/es/components/Skeleton/style.less

@@ -0,0 +1,26 @@
+@keyframes shimmer {
+  0% {
+    background-position: -468px 0;
+  }
+  to {
+    background-position: 468px 0;
+  }
+}
+
+.Skeleton {
+  background: linear-gradient(90deg, var(--skeleton-bg-1) 8%, var(--skeleton-bg-2) 18%, var(--skeleton-bg-1) 33%);
+  background-size: 800px 104px;
+  animation: 1.25s linear infinite forwards shimmer;
+}
+
+.Skeleton--r-sm {
+  border-radius: 2px;
+}
+
+.Skeleton--r-md {
+  border-radius: 6px;
+}
+
+.Skeleton--r-xl {
+  border-radius: 32px;
+}

package/es/components/StatusBadge/index.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import clsx from 'clsx';
+import { Text } from '../Text';
+export var StatusBadge = function StatusBadge(props) {
+  var className = props.className,
+    text = props.text;
+  return /*#__PURE__*/React.createElement("div", {
+    className: clsx('StatusBadge', className)
+  }, /*#__PURE__*/React.createElement("svg", {
+    className: "StatusBadge-bg",
+    width: "48",
+    height: "20",
+    fill: "none",
+    viewBox: "0 0 96 40"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "var(--status-badge-bg)",
+    d: "M0 0c6.627 0 12 5.373 12 12V0zm84 28c6.627 0 12 5.373 12 12V28zM12 0h72c6.627 0 12 5.373 12 12v16H24c-6.627 0-12-5.373-12-12Z"
+  })), /*#__PURE__*/React.createElement(Text, {
+    className: "StatusBadge-text",
+    truncate: true
+  }, text));
+};

package/es/components/StatusBadge/style.less

@@ -0,0 +1,27 @@
+.StatusBadge,
+.StatusBadge-bg,
+.StatusBadge-text {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+.StatusBadge {
+  --status-badge-color: #662600;
+  --status-badge-bg: #ffefd9;
+
+  [data-status='expired'] > &,
+  [data-status='used'] > & {
+    --status-badge-color: #50607a;
+    --status-badge-bg: rgba(80, 96, 122, 0.2);
+  }
+}
+
+.StatusBadge-text {
+  width: 42px;
+  color: var(--status-badge-color);
+  font-size: 10px;
+  font-weight: 500;
+  text-align: center;
+  line-height: 14px;
+}

package/es/components/Stepper/Step.js

@@ -0,0 +1,56 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "active", "completed", "disabled", "status", "index", "title", "subTitle", "desc", "children"];
+import React from 'react';
+import clsx from 'clsx';
+import { Icon } from '../Icon';
+function renderDot(status) {
+  if (status) {
+    var iconMap = {
+      success: 'check-circle-fill',
+      fail: 'warning-circle-fill',
+      abort: 'dash-circle-fill'
+    };
+    return /*#__PURE__*/React.createElement(Icon, {
+      type: iconMap[status]
+    });
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: "Step-dot"
+  });
+}
+export var Step = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var className = props.className,
+    _props$active = props.active,
+    active = _props$active === void 0 ? false : _props$active,
+    _props$completed = props.completed,
+    completed = _props$completed === void 0 ? false : _props$completed,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    status = props.status,
+    index = props.index,
+    title = props.title,
+    subTitle = props.subTitle,
+    desc = props.desc,
+    children = props.children,
+    other = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/React.createElement("li", _extends({
+    className: clsx('Step', {
+      'Step--active': active,
+      'Step--completed': completed,
+      'Step--disabled': disabled
+    }, className),
+    ref: ref,
+    "data-status": status
+  }, other), /*#__PURE__*/React.createElement("div", {
+    className: "Step-icon"
+  }, renderDot(status)), /*#__PURE__*/React.createElement("div", {
+    className: "Step-line"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "Step-content"
+  }, title && /*#__PURE__*/React.createElement("div", {
+    className: "Step-title"
+  }, title && /*#__PURE__*/React.createElement("span", null, title), subTitle && /*#__PURE__*/React.createElement("small", null, subTitle)), desc && /*#__PURE__*/React.createElement("div", {
+    className: "Step-desc"
+  }, desc), children));
+});

package/es/components/Stepper/Stepper.js

@@ -0,0 +1,40 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "current", "status", "inverted", "children"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React from 'react';
+import clsx from 'clsx';
+export var Stepper = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var className = props.className,
+    _props$current = props.current,
+    current = _props$current === void 0 ? 0 : _props$current,
+    status = props.status,
+    inverted = props.inverted,
+    children = props.children,
+    other = _objectWithoutProperties(props, _excluded);
+  var childrenArray = React.Children.toArray(children);
+  var steps = childrenArray.map(function (child, index) {
+    var state = {
+      index: index,
+      active: false,
+      completed: false,
+      disabled: false
+    };
+    if (current === index) {
+      state.active = true;
+      state.status = status;
+    } else if (current > index) {
+      state.completed = true;
+    } else {
+      state.disabled = !inverted;
+      state.completed = inverted;
+    }
+    return /*#__PURE__*/React.isValidElement(child) ? /*#__PURE__*/React.cloneElement(child, _objectSpread(_objectSpread({}, state), child.props)) : null;
+  });
+  return /*#__PURE__*/React.createElement("ul", _extends({
+    className: clsx('Stepper', className),
+    ref: ref
+  }, other), steps);
+});

package/es/components/Stepper/index.js

@@ -0,0 +1,2 @@
+export { Stepper } from './Stepper';
+export { Step } from './Step';

package/es/components/Stepper/style.less

@@ -0,0 +1,105 @@
+@step-title-height: 24px;
+@step-icon-size: 16px;
+// @step-dot-size: 10px;
+
+.Stepper {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+
+.Step {
+  position: relative;
+  padding-left: (@step-icon-size + 3px);
+  padding-bottom: 9px;
+
+  &:last-child {
+    padding-bottom: 0;
+
+    .Step-line {
+      bottom: 0;
+    }
+  }
+}
+
+.Step--active {
+  .Step-dot {
+    border-color: var(--brand-1);
+    background: var(--brand-1);
+  }
+  .Step-title {
+    span {
+      color: var(--brand-1);
+      font-weight: 600;
+    }
+  }
+  .Step-desc {
+    color: var(--color-text-1);
+  }
+  &[data-status] {
+    .Step-line {
+      top: (@step-title-height / 2 + @step-icon-size / 2 + 2px);
+    }
+    .Step-icon {
+      color: var(--red);
+    }
+  }
+  &[data-status='success'] {
+    .Step-icon {
+      color: var(--green);
+    }
+  }
+}
+
+.Step-icon {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: @step-icon-size;
+  height: @step-title-height;
+  font-size: @step-icon-size;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.Step-dot {
+  width: 10px;
+  height: 10px;
+  background: var(--color-fill-1);
+  border: 1px solid var(--color-line-2);
+  border-radius: 50%;
+  box-sizing: border-box;
+}
+
+.Step-line {
+  position: absolute;
+  top: (@step-title-height / 2 + @step-icon-size / 2);
+  left: (@step-icon-size / 2);
+  bottom: -4px;
+  width: 1px;
+  background: var(--color-line-2);
+  transform: translateX(-50%) scaleX(0.5);
+}
+
+.Step-title {
+  display: flex;
+  align-items: center;
+  color: var(--color-text-3);
+  font-size: var(--font-size-md);
+
+  .Card & {
+    font-size: 15px;
+  }
+  small {
+    margin-left: 12px;
+    color: var(--color-text-3);
+    font-size: var(--font-size-xs);
+  }
+}
+
+.Step-desc {
+  margin-top: 6px;
+  color: var(--color-text-3);
+  font-size: var(--font-size-sm);
+}

package/es/components/Tabs/Tab.js

@@ -0,0 +1,5 @@
+import React from 'react';
+export var Tab = function Tab(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React.createElement("div", null, children);
+};

package/es/components/Tabs/Tabs.js

@@ -0,0 +1,142 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["active", "index", "children", "onClick"],
+  _excluded2 = ["active", "children"];
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+import clsx from 'clsx';
+import smoothScroll from '../../utils/smoothScroll';
+import useNextId from '../../hooks/useNextId';
+var TabItem = function TabItem(props) {
+  var active = props.active,
+    index = props.index,
+    children = props.children,
+    onClick = props.onClick,
+    others = _objectWithoutProperties(props, _excluded);
+  function handleClick(e) {
+    onClick(index, e);
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: "Tabs-navItem"
+  }, /*#__PURE__*/React.createElement("button", _extends({
+    className: clsx('Tabs-navLink', {
+      active: active
+    }),
+    type: "button",
+    role: "tab",
+    "aria-selected": active,
+    onClick: handleClick
+  }, others), /*#__PURE__*/React.createElement("span", null, children)));
+};
+var TabsPane = function TabsPane(props) {
+  var active = props.active,
+    children = props.children,
+    others = _objectWithoutProperties(props, _excluded2);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: clsx('Tabs-pane', {
+      active: active
+    })
+  }, others, {
+    role: "tabpanel"
+  }), children);
+};
+export var Tabs = function Tabs(props) {
+  var className = props.className,
+    _props$index = props.index,
+    oIndex = _props$index === void 0 ? 0 : _props$index,
+    color = props.color,
+    size = props.size,
+    scrollable = props.scrollable,
+    hideNavIfOnlyOne = props.hideNavIfOnlyOne,
+    children = props.children,
+    onChange = props.onChange;
+  var _useState = useState(oIndex || 0),
+    _useState2 = _slicedToArray(_useState, 2),
+    index = _useState2[0],
+    setIndex = _useState2[1];
+  var indexRef = useRef(index);
+  var navRef = useRef(null);
+  var headers = [];
+  var contents = [];
+  var tabPaneId = useNextId('tabs-');
+  function handleIndexChange(idx, e) {
+    setIndex(idx);
+    if (onChange) {
+      onChange(idx, e);
+    }
+  }
+  React.Children.forEach(children, function (item, idx) {
+    if (!item) return;
+    var active = index === idx;
+    var id = "".concat(tabPaneId, "-").concat(idx);
+    headers.push(/*#__PURE__*/React.createElement(TabItem, {
+      active: active,
+      index: idx,
+      key: id,
+      onClick: handleIndexChange,
+      "aria-controls": id,
+      tabIndex: active ? -1 : 0
+    }, item.props.label));
+    if (item.props.children) {
+      contents.push(/*#__PURE__*/React.createElement(TabsPane, {
+        active: active,
+        key: id,
+        id: id
+      }, item.props.children));
+    }
+  });
+  useEffect(function () {
+    setIndex(oIndex);
+  }, [oIndex]);
+  var movePointer = useCallback(function () {
+    var nav = navRef.current;
+    if (!nav) return;
+    var currentNav = nav.children[indexRef.current];
+    if (!currentNav) return;
+    var text = currentNav.querySelector('span');
+    if (!text) return;
+    var _ref = currentNav,
+      navWidth = _ref.offsetWidth,
+      navOffsetLeft = _ref.offsetLeft;
+    // 中心位的偏移量
+    var offsetLeftOfCenter = navOffsetLeft + navWidth / 2;
+    if (scrollable) {
+      smoothScroll({
+        el: nav,
+        to: offsetLeftOfCenter - nav.offsetWidth / 2,
+        x: true
+      });
+    }
+  }, [scrollable]);
+  useEffect(function () {
+    var nav = navRef.current;
+    var ro;
+    if (nav && 'ResizeObserver' in window) {
+      ro = new ResizeObserver(movePointer);
+      ro.observe(nav);
+    }
+    return function () {
+      if (ro && nav) {
+        ro.unobserve(nav);
+      }
+    };
+  }, [movePointer]);
+  useEffect(function () {
+    indexRef.current = index;
+    movePointer();
+  }, [index, movePointer]);
+  var needNav = headers.length > (hideNavIfOnlyOne ? 1 : 0);
+  return /*#__PURE__*/React.createElement("div", {
+    className: clsx('Tabs', {
+      'Tabs--scrollable': scrollable
+    }, className),
+    "data-color": color,
+    "data-size": size
+  }, needNav && /*#__PURE__*/React.createElement("div", {
+    className: "Tabs-nav",
+    role: "tablist",
+    ref: navRef
+  }, headers), /*#__PURE__*/React.createElement("div", {
+    className: "Tabs-content"
+  }, contents));
+};

package/es/components/Tabs/index.js

@@ -0,0 +1,2 @@
+export { Tabs } from './Tabs';
+export { Tab } from './Tab';