@alifd/chat 0.2.0-beta.0 → 0.2.0-beta.2

package/lib/HTMLRenderer/index.less

@@ -0,0 +1,194 @@
+@import '../../var.less';
+
+.box {
+  font-size: 14px;
+  // color: hsla(230, 10%, 11%, 0.9);
+  word-break: break-word;
+  font-family: inherit;
+  .loose& {
+    font-size: 16px;
+    line-height: 1.85;
+  }
+  @media print {
+    color: #000 !important;
+    font-family: 'Times New Roman', Times, serif;
+  }
+  body:global(.dark) & {
+    filter: invert(1) hue-rotate(180deg);
+  }
+  img, video, iframe {
+    body:global(.dark) & {
+      filter: hue-rotate(180deg) invert(1);
+    }
+  }
+  img {
+    body:global(.dark) & {
+      background: #fff;
+    }
+    body:global(.dark.dim) & {
+      filter: hue-rotate(180deg) brightness(.75) invert(1);
+    }
+  }
+  body:global(.dark) & :global(.symbolic) > img {
+    filter: none;
+    background: none;
+  }
+  h1, h2, h3, h4, h5, h6, p, blockquote, table, .syntax-highlighter {
+    margin: 0;
+    .loose& {
+      margin: 20px 0;
+    }
+  }
+  h1, h2, h3, h4, h5, h6 {
+    font-weight: bold;
+  }
+  h1 {
+    font-size: 18px;
+    line-height: 1.8;
+    .loose& {
+      font-size: 28px;
+    }
+  }
+  h2 {
+    font-size: 16px;
+    line-height: 1.8;
+    .loose& {
+      font-size: 24px;
+    }
+  }
+  h3, h4, h5, h6 {
+    font-size: 14px;
+    line-height: 1.9;
+  }
+  h3 {
+    .loose& {
+      font-size: 18px;
+    }
+  }
+  h4, h5, h6 {
+    .loose& {
+      font-size: 16px;
+    }
+  }
+  img, video, .image {
+    max-width: 100%!important;
+    height: auto!important;
+    &:only-child {
+      display: block;
+      margin: 10px auto;
+    }
+  }
+  .image:only-child {
+    width: fit-content;
+  }
+  .image img {
+    margin: 0;
+  }
+  code {
+    margin: 0 .15em;
+    padding: .12em .25em;
+    border-radius: 3px;
+    font-size: 86%;
+    background: rgba(27,31,35,.05);
+  }
+  pre {
+    font-size: 14px;
+    line-height: 1.6;
+    border-radius: 2px;
+    border: 6px solid transparent;
+    overflow: auto;
+    margin: 0;
+    code {
+      font-size: 14px;
+      padding: 0;
+      margin: 0;
+      border: none;
+      font-size: inherit;
+      background: none;
+      border-radius: 0;
+    }
+  }
+  table, td, th {
+    border: 1px solid #caccce;
+    body:global(.dark) & {
+      border-color: #babcbd;
+      // border-color: #c9cace;
+    }
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+  table {
+    line-height: 1.6;
+    margin: 10px auto;
+    border-spacing: none;
+    border-collapse: collapse;
+    empty-cells: show;
+    font-size: 14px;
+    .loose& p {
+      margin: 0;
+    }
+  }
+  td, th {
+    border: 1px solid #e3e3e3;
+    padding: 10px 12px;
+    line-height: 1.3;
+    p {
+      margin: 0;
+    }
+  }
+  th {
+    background: hsla(230, 90%, 11%,.03);
+  }
+  a, a:visited {
+    color: #0080FF;
+    text-decoration: none;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+  ul, ol {
+    list-style: revert;
+    padding-left: 16px;
+    .loose& {
+      padding-left: 30px;
+    }
+  }
+  li {
+    list-style: revert;
+  }
+  blockquote {
+    opacity: 1;
+    border: none;
+    padding: 0;
+    margin-left: 20px;
+    opacity: 0.6;
+    font-style: italic;
+    position: relative;
+    margin-top: 6px;
+    margin-bottom: 6px;
+    .loose& {
+      margin-top: 20px;
+      margin-bottom: 20px;
+    }
+    &::before {
+      content: '|';
+      font-size: 0;
+      color: transparent;
+      display: inline-block;
+      width: 4px;
+      border-radius: 1px;
+      position: absolute;
+      margin-left: -16px;
+      top: 0;
+      bottom: 0;
+      background: hsla(230, 90%, 11%,.2);
+    }
+  }
+  hr {
+    height: 0;
+    border: none;
+    height: 1px;
+    background: hsla(230, 90%, 11%,.1);
+    margin: 10px 0;
+  }
+}

package/lib/HTMLRenderer/main.scss

@@ -0,0 +1,233 @@
+.box {
+  font-size: 14px;
+  // color: hsla(230, 10%, 11%, 0.9);
+  word-break: break-word;
+  font-family: inherit;
+
+  &.loose {
+    font-size: 16px;
+    line-height: 1.85;
+  }
+
+  @media print {
+    color: #000 !important;
+    font-family: 'Times New Roman', Times, serif;
+  }
+
+  body.global-dark & {
+    filter: invert(1) hue-rotate(180deg);
+  }
+
+  img, video, iframe {
+    body.global-dark & {
+      filter: hue-rotate(180deg) invert(1);
+    }
+  }
+
+  img {
+    body.global-dark & {
+      background: #fff;
+    }
+    body.global-dark-dim & {
+      filter: hue-rotate(180deg) brightness(.75) invert(1);
+    }
+  }
+
+  body.global-dark & .symbolic > img {
+    filter: none;
+    background: none;
+  }
+
+  h1, h2, h3, h4, h5, h6, p, blockquote, table, .syntax-highlighter {
+    margin: 0;
+
+    &.loose {
+      margin: 20px 0;
+    }
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    font-weight: bold;
+  }
+
+  h1 {
+    font-size: 18px;
+    line-height: 1.8;
+
+    &.loose {
+      font-size: 28px;
+    }
+  }
+
+  h2 {
+    font-size: 16px;
+    line-height: 1.8;
+
+    &.loose {
+      font-size: 24px;
+    }
+  }
+
+  h3, h4, h5, h6 {
+    font-size: 14px;
+    line-height: 1.9;
+  }
+
+  h3 {
+    &.loose {
+      font-size: 18px;
+    }
+  }
+
+  h4, h5, h6 {
+    &.loose {
+      font-size: 16px;
+    }
+  }
+
+  img, video, .image {
+    max-width: 100% !important;
+    height: auto !important;
+
+    &:only-child {
+      display: block;
+      margin: 10px auto;
+    }
+  }
+
+  .image:only-child {
+    width: fit-content;
+  }
+
+  .image img {
+    margin: 0;
+  }
+
+  code {
+    margin: 0 .15em;
+    padding: .12em .25em;
+    border-radius: 3px;
+    font-size: 86%;
+    background: rgba(27, 31, 35, .05);
+  }
+
+  pre {
+    font-size: 14px;
+    line-height: 1.6;
+    border-radius: 4px;
+    border: 6px solid transparent;
+    overflow: auto;
+    margin: 0  0 8px 0;
+
+    code {
+      font-size: 14px;
+      padding: 0;
+      margin: 0;
+      border: none;
+      font-size: inherit;
+      background: none;
+      border-radius: 0;
+    }
+  }
+
+  table, td, th {
+    border: 1px solid #caccce;
+
+    body.global-dark & {
+      border-color: #babcbd;
+      // border-color: #c9cace;
+    }
+
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+
+  table {
+    line-height: 1.6;
+    margin: 10px auto;
+    border-spacing: none;
+    border-collapse: collapse;
+    empty-cells: show;
+    font-size: 14px;
+
+    &.loose p {
+      margin: 0;
+    }
+  }
+
+  td, th {
+    border: 1px solid #e3e3e3;
+    padding: 10px 12px;
+    line-height: 1.3;
+
+    p {
+      margin: 0;
+    }
+  }
+
+  th {
+    background: hsla(230, 90%, 11%, .03);
+  }
+
+  a, a:visited {
+    color: #0080FF;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  ul, ol {
+    list-style: revert;
+    padding-left: 16px;
+    margin: 0;
+
+    &.loose {
+      padding-left: 30px;
+    }
+  }
+
+  li {
+    list-style: revert;
+  }
+
+  blockquote {
+    opacity: 1;
+    border: none;
+    padding: 0;
+    margin-left: 20px;
+    opacity: 0.6;
+    font-style: italic;
+    position: relative;
+    margin-top: 6px;
+    margin-bottom: 6px;
+
+    &.loose {
+      margin-top: 20px;
+      margin-bottom: 20px;
+    }
+
+    &::before {
+      content: '|';
+      font-size: 0;
+      color: transparent;
+      display: inline-block;
+      width: 4px;
+      border-radius: 1px;
+      position: absolute;
+      margin-left: -16px;
+      top: 0;
+      bottom: 0;
+      background: hsla(230, 90%, 11%, .2);
+    }
+  }
+
+  hr {
+    height: 0;
+    border: none;
+    height: 1px;
+    background: hsla(230, 90%, 11%, .1);
+    margin: 10px 0;
+  }
+}

package/lib/HTMLRenderer/style.d.ts

@@ -0,0 +1 @@
+import './main.scss';

package/lib/HTMLRenderer/style.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("./main.scss");

package/lib/HTMLRenderer/types.d.ts

@@ -0,0 +1,46 @@
+import type React from 'react';
+/**
+ * @api HTMLRenderer
+ */
+export interface HTMLRendererProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * 自定义类名
+     * @en Custom class name
+     */
+    className?: string;
+    /**
+     * 是否启用图片预览
+     * @en Enable image zoom
+     */
+    imagePreview?: boolean;
+    /**
+     * 是否使用松散模式
+     * @en Enable loose mode
+     */
+    loose?: boolean;
+    /**
+     * 要渲染的 HTML 字符串
+     * @en HTML string to render
+     */
+    children?: string;
+    /**
+     * 处理打开链接的函数
+     * @en Function to handle open link
+     */
+    handleOpenLink?: (href: string) => void;
+    /**
+     * 发送文本消息的函数
+     * @en Function to send text message
+     */
+    sendTextMessage?: (message: string) => void;
+    /**
+     * 复制文本的函数
+     * @en Function to copy text
+     */
+    copyText?: (text: string, i18n?: (key: string) => string) => void;
+    /**
+     * 国际化函数
+     * @en Internationalization function
+     */
+    i18n?: (key: string) => string;
+}

package/lib/HTMLRenderer/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/ImagePreview/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @component 图片预览
+ * @en ImagePreview
+ * @type 通用 - General
+ * @remarks 图片预览组件用于在钉钉环境中显示和预览图片。 - Image preview component used to display and preview images in DingTalk environment.
+ * @when 需要展示图片并提供预览功能时使用。 - Use when you need to display images and provide preview functionality.
+
+ */
+import React from 'react';
+import { ImagePreviewProps } from './types';
+export * from './types';
+declare const _default: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<Pick<ImagePreviewProps & React.RefAttributes<HTMLElement>, "key" | keyof ImagePreviewProps> & import("@alifd/next/types/config-provider/types").ComponentCommonProps, HTMLElement, {}>;
+export default _default;

package/lib/ImagePreview/index.js

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+/**
+ * @component 图片预览
+ * @en ImagePreview
+ * @type 通用 - General
+ * @remarks 图片预览组件用于在钉钉环境中显示和预览图片。 - Image preview component used to display and preview images in DingTalk environment.
+ * @when 需要展示图片并提供预览功能时使用。 - Use when you need to display images and provide preview functionality.
+
+ */
+const react_1 = tslib_1.__importStar(require("react"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const react_photo_view_1 = require("react-photo-view");
+const utils_1 = require("../utils");
+const next_1 = require("@alifd/next");
+const utils_2 = require("../utils");
+const dingtalk_jsapi_1 = require("dingtalk-jsapi");
+function handleClick(e, src) {
+    if ((0, utils_1.findAncestor)(e.target, t => t.tagName === 'A' && !!t.href)) {
+        e.stopPropagation();
+        return;
+    }
+    if (src && dingtalk_jsapi_1.env.version) {
+        const a = document.createElement('a');
+        a.href = src;
+        e.stopPropagation();
+        dingtalk_jsapi_1.biz.util.previewImage({
+            urls: [a.href],
+            current: a.href,
+        });
+    }
+}
+function isInsideLink(e) {
+    return !!(0, utils_1.findAncestor)(e.target, (t) => t.tagName === 'A' && !!t.href);
+}
+const ImagePreview = (0, react_1.forwardRef)(({ className, src, children, width, height }, ref) => {
+    let child;
+    try {
+        child = react_1.default.Children.only(children);
+    }
+    catch (e) { }
+    if (child && child.props) {
+        const { onClick, onTouchEnd } = child.props;
+        child = react_1.default.cloneElement(child, {
+            onTouchEnd: (e) => {
+                if (isInsideLink(e)) {
+                    e.stopPropagation();
+                }
+                handleClick(e, src);
+                onTouchEnd === null || onTouchEnd === void 0 ? void 0 : onTouchEnd(e);
+            },
+            onClick: (e) => {
+                if (isInsideLink(e)) {
+                    e.stopPropagation();
+                }
+                handleClick(e, src);
+                onClick === null || onClick === void 0 ? void 0 : onClick(e);
+            }
+        });
+    }
+    return (react_1.default.createElement(react_photo_view_1.PhotoProvider, null,
+        react_1.default.createElement(react_photo_view_1.PhotoView, { src: src },
+            react_1.default.createElement("span", { className: (0, classnames_1.default)('box', className, {
+                    'hasWidth': !!width,
+                    'hasHeight': !!height,
+                }), style: { width } },
+                width && height ? (react_1.default.createElement("span", { className: "placeholder", style: { paddingBottom: `${(height / width) * 100}%` } })) : null,
+                child))));
+});
+const ImagePreviewWithSub = (0, utils_2.assignSubComponent)(ImagePreview, {
+    displayName: 'ImagePreview',
+});
+tslib_1.__exportStar(require("./types"), exports);
+exports.default = next_1.ConfigProvider.config(ImagePreviewWithSub);

package/lib/ImagePreview/main.scss

@@ -0,0 +1,15 @@
+.box {
+  display: inline-block;
+  position: relative;
+  cursor: zoom-in;
+
+  a[href] & {
+    cursor: pointer;
+  }
+}
+
+:global {
+  .PhotoView__Photo {
+    background-color: #fff;
+  }
+}

package/lib/ImagePreview/style.d.ts

@@ -0,0 +1 @@
+import './main.scss';

package/lib/ImagePreview/style.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("./main.scss");

package/lib/ImagePreview/types.d.ts

@@ -0,0 +1,31 @@
+import type React from 'react';
+/**
+ * @api ImagePreview
+ */
+export interface ImagePreviewProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * 自定义类名
+     * @en Custom class name
+     */
+    className?: string;
+    /**
+     * 图片的源地址
+     * @en Source URL of the image
+     */
+    src: string;
+    /**
+     * 子元素
+     * @en Child elements
+     */
+    children?: React.ReactElement;
+    /**
+     * 图片的宽度
+     * @en Width of the image
+     */
+    width?: number;
+    /**
+     * 图片的高度
+     * @en Height of the image
+     */
+    height?: number;
+}

package/lib/ImagePreview/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/index.d.ts

@@ -13,5 +13,8 @@ export { default as Message } from './message';
 export { default as Icon } from './icon';
 export { default as Balloon } from './balloon';
 export { default as List } from './list';
+export { default as ImagePreview } from './ImagePreview';
+export { default as HTMLRenderer } from './HTMLRenderer';
+export { default as Markdown } from './markdown';
 export { default as CardLoading } from './card-loading';
 export declare const version: string;

package/lib/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.version = exports.CardLoading = exports.List = exports.Balloon = exports.Icon = exports.Message = exports.PersonPicker = exports.TimePicker = exports.DatePicker = exports.Input = exports.Tab = exports.Tag = exports.Text = exports.FloatButton = exports.Feedback = exports.Card = exports.Button = void 0;
+exports.version = exports.CardLoading = exports.Markdown = exports.HTMLRenderer = exports.ImagePreview = exports.List = exports.Balloon = exports.Icon = exports.Message = exports.PersonPicker = exports.TimePicker = exports.DatePicker = exports.Input = exports.Tab = exports.Tag = exports.Text = exports.FloatButton = exports.Feedback = exports.Card = exports.Button = void 0;
 const tslib_1 = require("tslib");
 var button_1 = require("./button");
 Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return tslib_1.__importDefault(button_1).default; } });
@@ -32,6 +32,12 @@ var balloon_1 = require("./balloon");
 Object.defineProperty(exports, "Balloon", { enumerable: true, get: function () { return tslib_1.__importDefault(balloon_1).default; } });
 var list_1 = require("./list");
 Object.defineProperty(exports, "List", { enumerable: true, get: function () { return tslib_1.__importDefault(list_1).default; } });
+var ImagePreview_1 = require("./ImagePreview");
+Object.defineProperty(exports, "ImagePreview", { enumerable: true, get: function () { return tslib_1.__importDefault(ImagePreview_1).default; } });
+var HTMLRenderer_1 = require("./HTMLRenderer");
+Object.defineProperty(exports, "HTMLRenderer", { enumerable: true, get: function () { return tslib_1.__importDefault(HTMLRenderer_1).default; } });
+var markdown_1 = require("./markdown");
+Object.defineProperty(exports, "Markdown", { enumerable: true, get: function () { return tslib_1.__importDefault(markdown_1).default; } });
 var card_loading_1 = require("./card-loading");
 Object.defineProperty(exports, "CardLoading", { enumerable: true, get: function () { return tslib_1.__importDefault(card_loading_1).default; } });
-exports.version = '0.2.0-beta.0';
+exports.version = '0.2.0-beta.2';

package/lib/markdown/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { MarkdownProps } from './types';
+import 'highlight.js/styles/github.css';
+export * from './types';
+declare const _default: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<Pick<MarkdownProps & React.RefAttributes<HTMLDivElement>, "key" | keyof MarkdownProps> & import("@alifd/next/types/config-provider/types").ComponentCommonProps, HTMLDivElement, {}>;
+export default _default;