@dpocean/chatui 1.0.0

package/es/components/FileCard/index.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import clsx from 'clsx';
+import { Card } from '../Card';
+import { Flex, FlexItem } from '../Flex';
+import { Icon } from '../Icon';
+import { Text } from '../Text';
+import getExtName from '../../utils/getExtName';
+import prettyBytes from '../../utils/prettyBytes';
+export var FileCard = function FileCard(props) {
+  var className = props.className,
+    file = props.file,
+    extension = props.extension,
+    children = props.children;
+  var name = file.name,
+    size = file.size;
+  var ext = extension || getExtName(name);
+  return /*#__PURE__*/React.createElement(Card, {
+    className: clsx('FileCard', className),
+    size: "xl"
+  }, /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement("div", {
+    className: "FileCard-icon",
+    "data-type": ext
+  }, /*#__PURE__*/React.createElement(Icon, {
+    type: "file"
+  }), /*#__PURE__*/React.createElement(Text, {
+    truncate: true,
+    as: "span",
+    className: "FileCard-ext"
+  }, ext)), /*#__PURE__*/React.createElement(FlexItem, null, /*#__PURE__*/React.createElement(Text, {
+    truncate: 2,
+    breakWord: true,
+    className: "FileCard-name"
+  }, name), /*#__PURE__*/React.createElement("div", {
+    className: "FileCard-meta"
+  }, size != null && /*#__PURE__*/React.createElement("span", {
+    className: "FileCard-size"
+  }, prettyBytes(size)), children))));
+};

package/es/components/FileCard/style.less

@@ -0,0 +1,63 @@
+.FileCard {
+  padding: 8px;
+}
+
+.FileCard-icon {
+  position: relative;
+  height: 60px;
+  margin-right: 8px;
+  color: var(--color-text-2);
+
+  &[data-type='pdf'] {
+    color: var(--red);
+  }
+  &[data-type*='doc'] {
+    color: var(--blue);
+  }
+  &[data-type*='ppt'],
+  &[data-type='key'] {
+    color: var(--orange);
+  }
+  &[data-type*='xls'] {
+    color: var(--green);
+  }
+  &[data-type='rar'],
+  &[data-type='zip'] {
+    color: var(--brand-1);
+  }
+  .Icon {
+    font-size: 60px;
+  }
+}
+
+.FileCard-name {
+  height: 38px;
+  margin-bottom: 4px;
+  line-height: 1.4;
+}
+
+.FileCard-ext {
+  position: absolute;
+  left: 20px;
+  bottom: 15px;
+  transform-origin: left bottom;
+  transform: scale(0.5);
+  max-width: 50px;
+  font-size: @font-size-md;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.FileCard-meta {
+  color: var(--color-text-3);
+  font-size: @font-size-xs;
+
+  & > a,
+  & > span {
+    margin-right: 10px;
+  }
+  a {
+    color: var(--link-color);
+    text-decoration: none;
+  }
+}

package/es/components/Filter/index.js

@@ -0,0 +1,200 @@
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+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; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import clsx from 'clsx';
+import { Icon } from '../Icon';
+import useClickOutside from '../../hooks/useClickOutside';
+import { useLatest } from '../../hooks/useLatest';
+var ChildOptions = function ChildOptions(_ref) {
+  var value = _ref.value,
+    option = _ref.option,
+    _onClick = _ref.onClick;
+  var optionLabel = option.label;
+  var optionValue = value[optionLabel];
+  return /*#__PURE__*/React.createElement("div", {
+    className: "FilterChildOptions"
+  }, option.children.map(function (child) {
+    var childLabel = child.label;
+    return /*#__PURE__*/React.createElement("div", {
+      key: childLabel,
+      className: "FilterOption",
+      "data-active": optionValue === childLabel,
+      onClick: function onClick() {
+        return _onClick(optionLabel, child);
+      }
+    }, childLabel);
+  }));
+};
+export var Filter = function Filter(props) {
+  var className = props.className,
+    _props$options = props.options,
+    options = _props$options === void 0 ? [] : _props$options,
+    outerValue = props.value,
+    size = props.size,
+    _props$itemsPerRow = props.itemsPerRow,
+    itemsPerRow = _props$itemsPerRow === void 0 ? 3 : _props$itemsPerRow,
+    _props$scrollable = props.scrollable,
+    scrollable = _props$scrollable === void 0 ? options.length > 4 : _props$scrollable,
+    onChange = props.onChange;
+  var _useState = useState({}),
+    _useState2 = _slicedToArray(_useState, 2),
+    innerValue = _useState2[0],
+    setInnerValue = _useState2[1];
+  var _useState3 = useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    expandedOption = _useState4[0],
+    setExpandedOption = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    showMask = _useState6[0],
+    setShowMask = _useState6[1];
+  var filterOptionsRef = useRef(null);
+  var onChangeRef = useLatest(onChange);
+  var isControlled = outerValue !== undefined;
+  // 根据是否受控来决定使用哪个值
+  var filterValue = isControlled ? outerValue : innerValue;
+  var removeValue = function removeValue(label) {
+    var _onChangeRef$current;
+    var newValue;
+    if (isControlled) {
+      // 受控模式下，直接从传入的 value 中删除
+      var _ref2 = filterValue || {},
+        removed = _ref2[label],
+        rest = _objectWithoutProperties(_ref2, [label].map(_toPropertyKey));
+      newValue = rest;
+    } else {
+      // 非受控模式下，从内部状态中删除并更新状态
+      var _ref3 = filterValue || {},
+        _removed = _ref3[label],
+        _rest = _objectWithoutProperties(_ref3, [label].map(_toPropertyKey));
+      newValue = _rest;
+      setInnerValue(newValue);
+    }
+    (_onChangeRef$current = onChangeRef.current) === null || _onChangeRef$current === void 0 || _onChangeRef$current.call(onChangeRef, newValue);
+  };
+  var updateValue = function updateValue(key, val) {
+    var _onChangeRef$current2;
+    var newValue = _objectSpread(_objectSpread({}, filterValue), {}, _defineProperty({}, key, val));
+    if (!isControlled) {
+      // 非受控模式下，更新内部状态
+      setInnerValue(newValue);
+    }
+    (_onChangeRef$current2 = onChangeRef.current) === null || _onChangeRef$current2 === void 0 || _onChangeRef$current2.call(onChangeRef, newValue);
+  };
+  var closeExpandedOption = function closeExpandedOption() {
+    setExpandedOption(null);
+  };
+  var wrapper = useClickOutside(closeExpandedOption);
+
+  // 检查是否需要显示遮罩
+  var checkMaskVisibility = useCallback(function () {
+    if (filterOptionsRef.current && scrollable) {
+      var _filterOptionsRef$cur = filterOptionsRef.current,
+        scrollLeft = _filterOptionsRef$cur.scrollLeft,
+        scrollWidth = _filterOptionsRef$cur.scrollWidth,
+        clientWidth = _filterOptionsRef$cur.clientWidth;
+      // 当滚动到最右边时隐藏遮罩
+      var isAtEnd = scrollLeft + clientWidth >= scrollWidth - 1;
+      // 只有在内容超出容器且未滚动到最右边时才显示遮罩
+      setShowMask(scrollWidth > clientWidth && !isAtEnd);
+    }
+  }, [scrollable]);
+  useEffect(function () {
+    // 初始化检查
+    checkMaskVisibility();
+  }, [checkMaskVisibility, scrollable]);
+  var handleOptionClick = function handleOptionClick(option, e) {
+    var label = option.label;
+    var isExpanded = (expandedOption === null || expandedOption === void 0 ? void 0 : expandedOption.label) === label;
+    var hasChildren = option.children && option.children.length > 0;
+
+    // 滚动到中心
+    if (scrollable && filterOptionsRef.current) {
+      var container = filterOptionsRef.current;
+      var containerWidth = container.offsetWidth;
+      var target = e.currentTarget;
+      var targetOffsetLeft = target.offsetLeft;
+      var targetWidth = target.offsetWidth;
+      var scrollLeft = targetOffsetLeft - (containerWidth - targetWidth) / 2;
+      container.scrollTo({
+        left: scrollLeft,
+        behavior: 'smooth'
+      });
+    }
+    if (hasChildren) {
+      // 有子选项的情况
+      if (isExpanded) {
+        // 如果已展开，则收起
+        closeExpandedOption();
+      } else {
+        // 如果未展开，则展开（同时收起其他选项）
+        setExpandedOption(option);
+      }
+    } else {
+      // 没有子选项的情况
+      closeExpandedOption();
+      if (filterValue[label]) {
+        // 如果已选中，则取消选中
+        removeValue(label);
+      } else {
+        updateValue(label, label);
+      }
+    }
+  };
+  var handleChildClick = function handleChildClick(label, child) {
+    updateValue(label, child.label);
+    closeExpandedOption();
+  };
+  var renderOption = function renderOption(option) {
+    var label = option.label;
+    var isExpanded = (expandedOption === null || expandedOption === void 0 ? void 0 : expandedOption.label) === label;
+    var isSelected = !!filterValue[label];
+    var hasChildren = option.children && option.children.length > 0;
+    return /*#__PURE__*/React.createElement("div", {
+      key: label,
+      className: "FilterOption",
+      "data-active": isSelected || isExpanded,
+      "data-expanded": isExpanded,
+      onClick: function onClick(e) {
+        return handleOptionClick(option, e);
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "FilterOption-label"
+    }, filterValue[label] || label), isSelected && !isExpanded ? /*#__PURE__*/React.createElement(Icon, {
+      type: "close",
+      onClick: function onClick(e) {
+        removeValue(label);
+        e.stopPropagation();
+      }
+    }) : hasChildren ? /*#__PURE__*/React.createElement(Icon, {
+      type: "chevron-down"
+    }) : null);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: clsx('Filter', className),
+    "data-scrollable": scrollable,
+    "data-expanded": !!expandedOption,
+    "data-size": size,
+    ref: wrapper,
+    style: {
+      '--filter-child-count': itemsPerRow
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "FilterOptions",
+    ref: filterOptionsRef,
+    "data-scrollable": scrollable,
+    onScroll: checkMaskVisibility
+  }, options.map(renderOption)), scrollable && showMask && /*#__PURE__*/React.createElement("div", {
+    className: "Filter-mask"
+  }), expandedOption && /*#__PURE__*/React.createElement(ChildOptions, {
+    value: filterValue,
+    option: expandedOption,
+    onClick: handleChildClick
+  }));
+};

package/es/components/Filter/style.less

@@ -0,0 +1,96 @@
+.Filter {
+  --filter-bg: #fff;
+  --filter-options-padding: 8px 16px;
+  --filter-option-padding: 2px 12px;
+  // 每一行的子选项个数
+  --filter-child-count: 3;
+
+  position: relative;
+
+  &[data-size="lg"] {
+    --filter-options-padding: 4px 16px;
+    --filter-option-padding: 6px 12px;
+  }
+}
+
+.Filter-mask {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 44px;
+  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, var(--filter-bg) 62%);
+  pointer-events: none;
+  z-index: 2;
+}
+
+.FilterOptions {
+  display: flex;
+  gap: 4px;
+  padding: var(--filter-options-padding);
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  &[data-scrollable='true'] {
+    overflow-x: auto;
+  }
+  &[data-scrollable='false'] {
+    .FilterOption {
+      justify-content: center;
+      flex: 1;
+    }
+  }
+}
+
+.FilterOption {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  // margin-right: 4px;
+  padding: var(--filter-option-padding);
+  border-radius: var(--radius-md);
+  background: var(--color-fill-2);
+  color: var(--color-text-1);
+  font-size: var(--font-size-sm);
+  line-height: 24px;
+  white-space: nowrap;
+
+  &:hover {
+    cursor: pointer;
+  }
+  &[data-active='true'] {
+    background: var(--brand-4);
+    color: var(--brand-1);
+  }
+  &[data-expanded='true'] {
+    .Icon {
+      transform: rotate(180deg);
+    }
+  }
+  .Icon {
+    margin-left: 2px;
+    font-size: var(--font-size-body);
+  }
+}
+
+.FilterChildOptions {
+  position: absolute;
+  z-index: 1;
+  top: 100%;
+  left: 0;
+  right: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  padding: var(--filter-options-padding);
+  background: #fff;
+  border-radius: 0 0 var(--radius-md) var(--radius-md);
+  box-sizing: border-box;
+
+  .FilterOption {
+    justify-content: center;
+    width: calc((100% - 4px * (var(--filter-child-count) - 1)) / var(--filter-child-count));
+  }
+}

package/es/components/Flex/Flex.js

@@ -0,0 +1,52 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["as", "className", "inline", "center", "direction", "wrap", "justifyContent", "justify", "alignItems", "align", "children"];
+import React from 'react';
+import clsx from 'clsx';
+var mapDirection = {
+  row: 'Flex--d-r',
+  'row-reverse': 'Flex--d-rr',
+  column: 'Flex--d-c',
+  'column-reverse': 'Flex--d-cr'
+};
+var mapWrap = {
+  nowrap: 'Flex--w-n',
+  wrap: 'Flex--w-w',
+  'wrap-reverse': 'Flex--w-wr'
+};
+var mapJustify = {
+  'flex-start': 'Flex--jc-fs',
+  'flex-end': 'Flex--jc-fe',
+  center: 'Flex--jc-c',
+  'space-between': 'Flex--jc-sb',
+  'space-around': 'Flex--jc-sa'
+};
+var mapAlign = {
+  'flex-start': 'Flex--ai-fs',
+  'flex-end': 'Flex--ai-fe',
+  center: 'Flex--ai-c'
+};
+export var Flex = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _props$as = props.as,
+    Element = _props$as === void 0 ? 'div' : _props$as,
+    className = props.className,
+    inline = props.inline,
+    center = props.center,
+    direction = props.direction,
+    wrap = props.wrap,
+    justifyContent = props.justifyContent,
+    _props$justify = props.justify,
+    justify = _props$justify === void 0 ? justifyContent : _props$justify,
+    alignItems = props.alignItems,
+    _props$align = props.align,
+    align = _props$align === void 0 ? alignItems : _props$align,
+    children = props.children,
+    other = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/React.createElement(Element, _extends({
+    className: clsx('Flex', direction && mapDirection[direction], justify && mapJustify[justify], align && mapAlign[align], wrap && mapWrap[wrap], {
+      'Flex--inline': inline,
+      'Flex--center': center
+    }, className),
+    ref: ref
+  }, other), children);
+});

package/es/components/Flex/FlexItem.js

@@ -0,0 +1,25 @@
+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", "flex", "alignSelf", "order", "style", "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 FlexItem = function FlexItem(props) {
+  var className = props.className,
+    flex = props.flex,
+    alignSelf = props.alignSelf,
+    order = props.order,
+    style = props.style,
+    children = props.children,
+    other = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: clsx('FlexItem', className),
+    style: _objectSpread(_objectSpread({}, style), {}, {
+      flex: flex,
+      alignSelf: alignSelf,
+      order: order
+    })
+  }, other), children);
+};

package/es/components/Flex/index.js

@@ -0,0 +1,2 @@
+export { Flex } from './Flex';
+export { FlexItem } from './FlexItem';

package/es/components/Flex/style.less

@@ -0,0 +1,78 @@
+.Flex {
+  display: flex;
+}
+
+.Flex--inline {
+  display: inline-flex;
+}
+
+.Flex--center {
+  justify-content: center;
+  align-items: center;
+}
+
+.Flex--d-r {
+  flex-direction: row;
+}
+
+.Flex--d-rr {
+  flex-direction: row-reverse;
+}
+
+.Flex--d-c {
+  flex-direction: column;
+}
+
+.Flex--d-cr {
+  flex-direction: column-reverse;
+}
+
+.Flex--w-n {
+  flex-wrap: nowrap;
+}
+
+.Flex--w-w {
+  flex-wrap: wrap;
+}
+
+.Flex--w-wr {
+  flex-wrap: wrap-reverse;
+}
+
+.Flex--jc-fs {
+  justify-content: flex-start;
+}
+
+.Flex--jc-fe {
+  justify-content: flex-end;
+}
+
+.Flex--jc-c {
+  justify-content: center;
+}
+
+.Flex--jc-sb {
+  justify-content: space-between;
+}
+
+.Flex--jc-sa {
+  justify-content: space-around;
+}
+
+.Flex--ai-fs {
+  align-items: flex-start;
+}
+
+.Flex--ai-fe {
+  align-items: flex-end;
+}
+
+.Flex--ai-c {
+  align-items: center;
+}
+
+.FlexItem {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+}

package/es/components/Form/Form.js

@@ -0,0 +1,20 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "theme", "children"];
+import React from 'react';
+import clsx from 'clsx';
+export var ThemeContext = /*#__PURE__*/React.createContext('');
+export var Form = function Form(props) {
+  var className = props.className,
+    _props$theme = props.theme,
+    theme = _props$theme === void 0 ? '' : _props$theme,
+    children = props.children,
+    other = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
+    value: theme
+  }, /*#__PURE__*/React.createElement("form", _extends({
+    className: clsx('Form', {
+      'is-light': theme === 'light'
+    }, className)
+  }, other), children));
+};

package/es/components/Form/FormActions.js

@@ -0,0 +1,12 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children"];
+import React from 'react';
+import clsx from 'clsx';
+export var FormActions = function FormActions(props) {
+  var children = props.children,
+    other = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: clsx('FormActions')
+  }, other), children);
+};

package/es/components/Form/FormItem.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import clsx from 'clsx';
+import { Label } from '../Label';
+import { HelpText } from '../HelpText';
+export var FormItem = function FormItem(props) {
+  var label = props.label,
+    help = props.help,
+    required = props.required,
+    invalid = props.invalid,
+    hidden = props.hidden,
+    children = props.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: clsx('FormItem', {
+      required: required,
+      'is-invalid': invalid
+    }),
+    hidden: hidden
+  }, label && /*#__PURE__*/React.createElement(Label, null, label), children, help && /*#__PURE__*/React.createElement(HelpText, null, help));
+};

package/es/components/Form/index.js

@@ -0,0 +1,3 @@
+export { Form, ThemeContext } from './Form';
+export { FormItem } from './FormItem';
+export { FormActions } from './FormActions';

package/es/components/Form/style.less

@@ -0,0 +1,64 @@
+.Form {
+  background: var(--color-fill-1);
+
+  &.is-light {
+    // background: var(--gray-7);
+
+    .FormItem {
+      padding: 0;
+    }
+    .Label,
+    .HelpText {
+      padding: 0 var(--gutter);
+    }
+  }
+}
+
+.FormItem {
+  position: relative;
+  padding: 0 var(--gutter);
+
+  & + & {
+    margin-top: 20px;
+  }
+  &.required {
+    .Label:after {
+      content: '*';
+      display: inline-block;
+      color: var(--red);
+      font-size: @font-size-sm;
+      font-family: SimSun,sans-serif;
+      line-height: 1;
+      vertical-align: middle;
+    }
+  }
+  &.is-invalid {
+    .Label,
+    .HelpText {
+      color: var(--red);
+    }
+    .Input {
+      border-color: var(--red);
+    }
+  }
+  .RadioGroup,
+  .CheckboxGroup {
+    margin-top: 10px;
+  }
+  .Label + .Input {
+    margin-top: 5px;
+  }
+}
+
+.FormActions {
+  display: flex;
+  padding: 10px var(--gutter);
+  background: var(--color-fill-1);
+
+  .Btn {
+    flex: 1;
+  }
+  .Btn + .Btn {
+    margin-left: 6px;
+  }
+}