@alifd/chat 0.3.0-beta.8 → 0.3.0

package/lib/float-button/types.d.ts

@@ -257,3 +257,26 @@ export interface FloatButtonDrawerProps extends FloatButtonProps {
     beforeClose?: () => void;
     afterClose?: () => void;
 }
+/**
+ * 底部额外区域 ref 对象
+ * @api
+ * @order 4
+ */
+export interface AddonAfterRef {
+}
+/**
+ * 底部额外区域
+ * @api FloatButton.AddonAfter
+ *  @order 3
+ */
+export interface AddonAfterProps extends CommonProps {
+    /**
+     * 内容
+     */
+    children: React.ReactNode;
+    /**
+     * 是否hover trigger 元素才出现
+     * @defaultValue 10
+     */
+    showWithHover?: boolean;
+}

package/lib/float-button/util.js

@@ -10,6 +10,7 @@ function getScreenSize() {
         height: document.documentElement.clientHeight,
     };
 }
+// 返回距离最近的边：top, right, left, bottom
 function getNearlyEdge(el, interactiveEdges, rect = el.getBoundingClientRect()) {
     if (!(interactiveEdges === null || interactiveEdges === void 0 ? void 0 : interactiveEdges.length)) {
         return [];
@@ -51,6 +52,7 @@ function isInScreen(dom) {
     const bottom = height - rect.top - rect.height;
     return [left, top, right, bottom].every(n => n >= 0);
 }
+// 返回当前位置在安全区域内的安全位置
 function adjustBySafeAreaMargin(position, rect, safeAreaMargin) {
     if (!position || !rect || !safeAreaMargin) {
         return undefined;

package/lib/float-button/view/addon-after.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { AddonAfterRef, AddonAfterProps } from '../types';
+declare const _default: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<Pick<AddonAfterProps & React.RefAttributes<AddonAfterRef>, "key" | keyof AddonAfterProps> & import("@alifd/next/types/config-provider/types").ComponentCommonProps, AddonAfterRef, {}>;
+export default _default;

package/lib/float-button/view/addon-after.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const next_1 = require("@alifd/next");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const utils_1 = require("../../utils");
+const AddonAfter = (0, react_1.forwardRef)(({ showWithHover = false, children }, ref) => {
+    // 页面没滚动的时候默认隐藏，如果要显示会由onScroll触发
+    const cls = `${utils_1.PREFIX_DEFAULT}float-button-addon-after`;
+    return (react_1.default.createElement("button", { className: (0, classnames_1.default)(cls, { [`${cls}--show-with-hover`]: showWithHover }) }, children));
+});
+exports.default = next_1.ConfigProvider.config(AddonAfter);

package/lib/float-button/view/backtop.js

@@ -15,7 +15,8 @@ function getScroller(scroller) {
     return scroller;
 }
 const Backtop = (0, react_1.forwardRef)(({ autoHide = true, scroller, offset = 10, smooth = true, children }, ref) => {
-    const [visible, setVisible] = (0, react_1.useState)(true);
+    // 页面没滚动的时候默认隐藏，如果要显示会由onScroll触发
+    const [visible, setVisible] = (0, react_1.useState)(false);
     const cls = `${utils_1.PREFIX_DEFAULT}float-button-backtop`;
     const visibleRef = (0, react_1.useRef)(visible);
     visibleRef.current = visible;
@@ -58,6 +59,7 @@ const Backtop = (0, react_1.forwardRef)(({ autoHide = true, scroller, offset = 1
         if (!target) {
             return;
         }
+        // 滚动时候的显隐控制
         const onScroll = (0, utils_1.debounce)(() => {
             if (isAtTop(target)) {
                 visibleRef.current && setVisible(false);

package/lib/html-render/index.js

@@ -128,7 +128,7 @@ const HTMLRenderer = (0, react_1.memo)(function HTMLRenderer({ className, childr
     const element = (0, react_1.useMemo)(() => {
         return (0, html_react_parser_1.default)((0, sanitize_html_1.default)(children || '', sanitizeHtmlOptions), parserOptions);
     }, [children]);
-    return (react_1.default.createElement("div", { className: (0, classnames_1.default)('box', className, {
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(`${utils_1.PREFIX_DEFAULT}html`, className, {
             'loose': loose,
         }) }, imagePreview ?
         react_1.default.createElement(react_photo_view_1.PhotoProvider, null, element)

package/lib/html-render/main.scss

@@ -1,8 +1,11 @@
-.box {
+@import "../core/variables.scss";
+
+.#{$prefix}html {
   font-size: 14px;
   // color: hsla(230, 10%, 11%, 0.9);
   word-break: break-word;
   font-family: inherit;
+  color: $color-text1-4;
 
   &.loose {
     font-size: 16px;
@@ -26,7 +29,7 @@
 
   img {
     body.global-dark & {
-      background: #fff;
+      background: $color-bg-1;
     }
     body.global-dark-dim & {
       filter: hue-rotate(180deg) brightness(.75) invert(1);
@@ -48,6 +51,7 @@
 
   h1, h2, h3, h4, h5, h6 {
     font-weight: bold;
+    color: $color-text1-4;
   }
 
   h1 {
@@ -108,7 +112,7 @@
     padding: .12em .25em;
     border-radius: 3px;
     font-size: 86%;
-    background: rgba(27, 31, 35, .05);
+    background: $color-fill1-2;
   }
 
   pre {
@@ -127,15 +131,16 @@
       font-size: inherit;
       background: none;
       border-radius: 0;
+      text-shadow: none;
+      color: $color-text1-3;
     }
   }
 
   table, td, th {
-    border: 1px solid #caccce;
+    border: 1px solid $color-line1-1;
 
     body.global-dark & {
-      border-color: #babcbd;
-      // border-color: #c9cace;
+      border-color: $color-line1-2
     }
 
     border-collapse: collapse;
@@ -156,7 +161,7 @@
   }
 
   td, th {
-    border: 1px solid #e3e3e3;
+    border: 1px solid $color-line1-1;
     padding: 10px 12px;
     line-height: 1.3;
 
@@ -166,11 +171,11 @@
   }
 
   th {
-    background: hsla(230, 90%, 11%, .03);
+    background: $color-fill1-2;
   }
 
   a, a:visited {
-    color: #0080FF;
+    color: $color-link-3;
     text-decoration: none;
 
     &:hover {
@@ -219,7 +224,7 @@
       margin-left: -16px;
       top: 0;
       bottom: 0;
-      background: hsla(230, 90%, 11%, .2);
+      background: $color-fill1-2;
     }
   }
 
@@ -227,7 +232,7 @@
     height: 0;
     border: none;
     height: 1px;
-    background: hsla(230, 90%, 11%, .1);
+    background: $color-fill1-2;
     margin: 10px 0;
   }
 }

package/lib/index.d.ts

@@ -19,4 +19,5 @@ export { default as Markdown } from './markdown';
 export { default as CardLoading } from './card-loading';
 export { default as Origin } from './origin';
 export { default as Loading } from './loading';
+export { default as Drawer } from './drawer';
 export declare const version: string;

package/lib/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.version = exports.Loading = exports.Origin = exports.CardLoading = exports.Markdown = exports.HtmlRender = 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;
+exports.version = exports.Drawer = exports.Loading = exports.Origin = exports.CardLoading = exports.Markdown = exports.HtmlRender = 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; } });
@@ -44,4 +44,6 @@ var origin_1 = require("./origin");
 Object.defineProperty(exports, "Origin", { enumerable: true, get: function () { return tslib_1.__importDefault(origin_1).default; } });
 var loading_1 = require("./loading");
 Object.defineProperty(exports, "Loading", { enumerable: true, get: function () { return tslib_1.__importDefault(loading_1).default; } });
-exports.version = '0.3.0-beta.8';
+var drawer_1 = require("./drawer");
+Object.defineProperty(exports, "Drawer", { enumerable: true, get: function () { return tslib_1.__importDefault(drawer_1).default; } });
+exports.version = '0.3.0';

package/lib/input/style.d.ts

@@ -1 +1 @@
-import '@alifd/next/lib/input/style';
+import '@alifd/next/lib/input/style2';

package/lib/input/style.js

@@ -1,3 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-require("@alifd/next/lib/input/style");
+require("@alifd/next/lib/input/style2");

package/lib/markdown/index.js

@@ -45,12 +45,17 @@ const Markdown = (0, react_1.forwardRef)(({ className, onReady, content }, ref)
             // 提取属性
             const sizeTokenMatch = attributes.match(/sizeToken=([\w_]+)/);
             const colorTokenV2Match = attributes.match(/colorTokenV2=([\w_]+)/);
+            const colorTokenV1Match = attributes.match(/color=([\w_]+)/);
             if (sizeTokenMatch) {
                 sizeToken = sizeTokenMatch[1].replace(/-/g, '_');
             }
             if (colorTokenV2Match) {
                 colorTokenV2 = colorTokenV2Match[1].replace(/-/g, '_');
             }
+            // 兼容老的钉钉变量
+            if (!colorTokenV2 && colorTokenV1Match) {
+                colorTokenV2 = colorTokenV1Match[1].replace(/-/g, '_');
+            }
             // 生成样式
             const styleParts = [];
             if (sizeToken) {
@@ -168,7 +173,7 @@ const Markdown = (0, react_1.forwardRef)(({ className, onReady, content }, ref)
             });
         }
     }, [html]);
-    return (react_1.default.createElement("div", { ref: containerRef, className: (0, classnames_1.default)(className) },
+    return (react_1.default.createElement("div", { ref: containerRef, className: (0, classnames_1.default)(`${utils_1.PREFIX_DEFAULT}markdown`, className) },
         react_1.default.createElement(html_render_1.default, { imagePreview: true }, html)));
 });
 const MarkdownWithSub = (0, utils_1.assignSubComponent)(Markdown, {

package/lib/markdown/main.scss

@@ -3,8 +3,6 @@
 $primaryColor: $color-brand1-6;
 $alternativePrimaryColor: $primaryColor;
 $mistPrimaryColor: $color-brand1-1;
-$mediumTextColor: $color-text1-3;
-$subTextColor: $color-text1-2;
 
 @mixin f-single-line() {
     overflow: hidden;
@@ -12,18 +10,20 @@ $subTextColor: $color-text1-2;
     text-overflow: ellipsis;
   }
   
-.box {
-  max-width: 100%;
-}
-
-.box img:only-child, .box video:only-child, .box .image:only-child {
+.#{$prefix}markdown {
+  img:only-child,
+  video:only-child,
+  .image:only-child
+  {
     display: inline-block;
     margin: 0;
     font-size: inherit;
     vertical-align: inherit;
-}
 
-.emoji {
+  }
+
+  max-width: 100%;
+  .emoji {
     width: 1em;
     height: 1em;
     vertical-align: text-top;
@@ -31,124 +31,119 @@ $subTextColor: $color-text1-2;
     pointer-events: none;
   }
 
-.title {
-  font-size: 16px;
-  font-weight: bolder;
-  margin-bottom: 12px;
-}
-
-.text > div {
-  color:$subTextColor;
-}
-
-.reference {
-  margin-top: 6px;
-  font-size: 12px;
-
-  &-tip {
-    display: flex;
-    margin: 0 -16px 6px 0;
-    justify-content: flex-end;
-
-    &-inner {
-      @include f-single-line();
-      background: linear-gradient(to right, transparent, $mistPrimaryColor);
-      padding: 0 16px 0 32px;
-      color: $mediumTextColor;
-      min-width: 0;
-      flex: 0 1 auto;
-      font-size: 12px;
-      line-height: 20px;
+  .title {
+    font-size: 16px;
+    font-weight: bolder;
+    margin-bottom: 12px;
+  }
+
+  .text > div {
+    color:$color-text1-2;
+  }
+
+  .reference {
+    margin-top: 6px;
+    font-size: 12px;
+
+    &-tip {
+      display: flex;
+      margin: 0 -16px 6px 0;
+      justify-content: flex-end;
+
+      &-inner {
+        @include f-single-line();
+        background: linear-gradient(to right, transparent, $mistPrimaryColor);
+        padding: 0 16px 0 32px;
+        color: $color-text1-3;
+        min-width: 0;
+        flex: 0 1 auto;
+        font-size: 12px;
+        line-height: 20px;
+      }
     }
   }
-}
-
-.trustworthyRiskAlert {
-  font-size: 12px;
-  line-height: 18px;
-  color: $subTextColor;
-  margin-bottom: 8px;
-}
-.code-block-header {
-    display: flex;
-    height:24px;
-    // margin-top: 8px;
-    justify-content: space-between;
-    align-items: center;
-    background-color: #EAECED;
-    padding: 5px 10px;
-    border-top-left-radius: 4px;
-    border-top-right-radius: 4px;
-    border-bottom: 1px solid #ddd;
+
+  .trustworthyRiskAlert {
+    font-size: 12px;
+    line-height: 18px;
+    color: $color-text1-2;
+    margin-bottom: 8px;
   }
-  
+  .code-block-header {
+      display: flex;
+      height:24px;
+      // margin-top: 8px;
+      justify-content: space-between;
+      align-items: center;
+      background-color: $color-fill1-2;
+      padding: 5px 10px;
+      border-top-left-radius: 4px;
+      border-top-right-radius: 4px;
+      border-bottom: 1px solid $color-line1-2;
+  }
+    
   .code-block-language {
     font-weight: bold;
   }
-  
+    
   .code-block-copy {
-    color: var(--common_level3_base_color);
+    color: $color-text1-2;
+    background-color: transparent;
     border: none;
     border-radius: 4px;
     height: 20px;
     cursor: pointer;
+    font-size: 12px;
   }
-  
+
   pre {
-    background-color: #f8f8f8;
+    background-color: $color-fill1-2;
     border-bottom-left-radius: 14px;
     border-bottom-right-radius: 14px;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0px;
     padding: 10px;
     margin-bottom: 10px;
   }
 
   .code-block-copy:hover {
-    background-color: #d2d2d2;
+    color: $color-line1-4;
   }
-
   //https://done.alibaba-inc.com/dsm/16247/theme/style/font?type=theme&themeid=126576
-:root {
-    --common_hypertitle_text_style__font_size: #{$font-size-display-3};
-    --common_largetitle_text_style__font_size: #{$font-size-display-2};
-
-    --common_h1_text_style__font_size: #{$font-size-headline};
-    --common_h2_text_style__font_size: #{$font-size-title};
-    --common_h3_text_style__font_size: 18px;
-    --common_h4_text_style__font_size: #{$font-size-subhead};
-    --common_h5_text_style__font_size: 15px;
-    --common_body_text_style__font_size: #{$font-size-body-2};
-    --common_footnote_text_style__font_size: #{$font-size-body-1};
-
-    // --common_h1_text_style__font_size: #{$s-6;
-    // --common_h2_text_style__font_size: 20px;
-    // --common_h3_text_style__font_size: 18px;
-    // --common_h4_text_style__font_size: 16px;
-    // --common_h5_text_style__font_size: 15px;
-    // --common_body_text_style__font_size: 14px;
-    // --common_footnote_text_style__font_size: 12px;
-
-    --common_yellow1_color: #{$color-data1-6}; // #F4C800
-    --common_orange1_color: #{$color-data1-5}; // #FF9200
-    --common_red1_color: #{$color-data1-4}; // #FF5219
-    --common_pink1_color: #da5388; // 
-    --common_purple1_color: #{$color-data1-3}; // #B963D3
-    --common_blue1_color:  #{$color-data1-2}; // #007FFF
-
-    --common_water1_color: #{$color-data1-8}; //浅蓝 #5AC8FA 
-    --common_olive1_color: #77912b; // #6F9200 通用草绿色
-    --common_green1_color: #4fae51; // #00B042 通用绿色
-
-    --common_level1_base_color: #{$color-text1-4};
-    --common_level2_base_color: #{$color-text1-3};
-    --common_level3_base_color: #{$color-text1-2};
-    --common_level4_base_color: #{$color-text1-1};
-
-    --common_gray1_color: #{$color-line1-1};
-    --common_gray2_color: #{$color-line1-2};
-    --common_gray3_color: #{$color-line1-3};
-    --common_gray4_color: #{$color-line1-4};
-
-    --common_gray5_color: #{$color-fill1-2};
-    --common_gray6_color: #{$color-fill1-1};
-  }
-  
+
+  // 暂时先把钉卡片用到的主题变量放在markdown组件内部进行覆盖
+  --common_hypertitle_text_style__font_size: #{$font-size-display-3};
+  --common_largetitle_text_style__font_size: #{$font-size-display-2};
+  --common_h1_text_style__font_size: #{$font-size-headline};
+  --common_h2_text_style__font_size: #{$font-size-title};
+  --common_h3_text_style__font_size: 18px;
+  --common_h4_text_style__font_size: #{$font-size-subhead};
+  --common_h5_text_style__font_size: 15px;
+  --common_body_text_style__font_size: #{$font-size-body-2};
+  --common_footnote_text_style__font_size: #{$font-size-body-1};
+
+  --common_yellow1_color: #{$color-data1-6}; // #F4C800
+  --common_orange1_color: #{$color-data1-5}; // #FF9200
+  --common_red1_color: #{$color-data1-4}; // #FF5219
+  // TODO 需要扩充主题
+  --common_pink1_color: #{$color-data1-9};; // 
+  --common_purple1_color: #{$color-data1-3}; // #B963D3
+  --common_blue1_color:  #{$color-data1-2}; // #007FFF
+
+  --common_water1_color: #{$color-data1-8}; //浅蓝 #5AC8FA 
+  --common_olive1_color: #{$color-data1-10}; // #6F9200 通用草绿色
+  --common_green1_color: #{$color-data1-7}; // #00B042 通用绿色
+
+  --common_level1_base_color: #{$color-text1-4};
+  --common_level2_base_color: #{$color-text1-3};
+  --common_level3_base_color: #{$color-text1-2};
+  --common_level4_base_color: #{$color-text1-1};
+
+  --common_gray1_color: #{$color-line1-1};
+  --common_gray2_color: #{$color-line1-2};
+  --common_gray3_color: #{$color-line1-3};
+  --common_gray4_color: #{$color-line1-4};
+
+  --common_gray5_color: #{$color-fill1-2};
+  --common_gray6_color: #{$color-fill1-1};
+}

package/lib/person-picker/style.d.ts

@@ -1,2 +1,2 @@
-import '@alifd/next/lib/select/style';
+import '@alifd/next/lib/select/style2';
 import './main.scss';

package/lib/person-picker/style.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-require("@alifd/next/lib/select/style");
+require("@alifd/next/lib/select/style2");
 require("./main.scss");

package/lib/tab/style.d.ts

@@ -1,2 +1,2 @@
-import '@alifd/next/lib/tab/style';
+import '@alifd/next/lib/tab/style2';
 import './main.scss';

package/lib/tab/style.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-require("@alifd/next/lib/tab/style");
+require("@alifd/next/lib/tab/style2");
 require("./main.scss");

package/lib/tag/style.d.ts

@@ -1,2 +1,2 @@
-import '@alifd/next/lib/tag/style';
+import '@alifd/next/lib/tag/style2';
 import './main.scss';

package/lib/tag/style.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-require("@alifd/next/lib/tag/style");
+require("@alifd/next/lib/tag/style2");
 require("./main.scss");

package/lib/time-picker/style.d.ts

@@ -1 +1 @@
-import '@alifd/next/lib/time-picker2/style';
+import '@alifd/next/lib/time-picker2/style2';

package/lib/time-picker/style.js

@@ -1,3 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-require("@alifd/next/lib/time-picker2/style");
+require("@alifd/next/lib/time-picker2/style2");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alifd/chat",
-  "version": "0.3.0-beta.8",
+  "version": "0.3.0",
   "description": "A configurable component library for chat built on React.",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -313,6 +313,18 @@
     "./loading/style.js": {
       "import": "./es/loading/style.js",
       "require": "./lib/loading/style.js"
+    },
+    "./drawer": {
+      "import": "./es/drawer/index.js",
+      "require": "./lib/drawer/index.js"
+    },
+    "./drawer/style": {
+      "import": "./es/drawer/style.js",
+      "require": "./lib/drawer/style.js"
+    },
+    "./drawer/style.js": {
+      "import": "./es/drawer/style.js",
+      "require": "./lib/drawer/style.js"
     }
   },
   "files": [