@alifd/chat 0.1.15-beta.1 → 0.1.15-beta.11

package/es/card/view/collapsable.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { CollapsableCardProps } from '../types';
-declare function CollapsableCard({ components, visible, defaultVisible, onVisibleChange, triggerType, mode, renderContent, ...props }: CollapsableCardProps): React.JSX.Element;
+declare function CollapsableCard({ components, visible: _v, defaultVisible: _dv, onVisibleChange: _onVC, triggerType, mode, renderContent, ...props }: CollapsableCardProps): React.JSX.Element;
 declare namespace CollapsableCard {
     var displayName: string;
 }

package/es/date-picker/index.js

@@ -23,7 +23,7 @@ import { DatePicker2 as NextDatePicker2, ConfigProvider } from '@alifd/next';
 import cs from 'classnames';
 import { PREFIX_DEFAULT, assignSubComponent } from '../utils';
 const DatePicker = forwardRef((_a, ref) => {
-    var { className, size = 'small' } = _a, props = __rest(_a, ["className", "size"]);
+    var { className, size = 'medium' } = _a, props = __rest(_a, ["className", "size"]);
     return (React.createElement(NextDatePicker2, Object.assign({}, props, { className: cs(`${PREFIX_DEFAULT}date-picker2`, className), size: size, ref: ref })));
 });
 const DatePickerWithSub = assignSubComponent(DatePicker, {

package/es/icon/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @component 标签
+ * @en Icon
+ * @type 通用 - General
+ * @remarks 同 Next Icon - Same as Next.Icon
+ * @when Icon
+ */
+import React from 'react';
+import { Icon as NextIcon } from '@alifd/next';
+import type { IconProps } from '@alifd/next/types/icon';
+export type { IconProps } from '@alifd/next/types/icon';
+declare const _default: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<Pick<IconProps & React.RefAttributes<NextIcon>, "key" | keyof IconProps> & import("@alifd/next/types/config-provider/types").ComponentCommonProps, NextIcon, {}>;
+export default _default;

package/es/icon/index.js

@@ -0,0 +1,20 @@
+/**
+ * @component 标签
+ * @en Icon
+ * @type 通用 - General
+ * @remarks 同 Next Icon - Same as Next.Icon
+ * @when Icon
+ */
+import { __rest } from "tslib";
+import React, { forwardRef } from 'react';
+import { Icon as NextIcon, ConfigProvider } from '@alifd/next';
+import cs from 'classnames';
+import { PREFIX_DEFAULT, assignSubComponent } from '../utils';
+const Icon = forwardRef((_a, ref) => {
+    var { className, size = 'small' } = _a, props = __rest(_a, ["className", "size"]);
+    return (React.createElement(NextIcon, Object.assign({}, props, { ref: ref, className: cs(`${PREFIX_DEFAULT}icon`, className), size: size })));
+});
+const IconWithSub = assignSubComponent(Icon, {
+    displayName: 'Icon',
+});
+export default ConfigProvider.config(IconWithSub);

package/es/icon/main.scss

@@ -0,0 +1 @@
+@import "../core/variables.scss";

package/es/icon/style.d.ts

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

package/es/icon/style.js

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

package/es/icon/types.js

@@ -0,0 +1 @@
+"use strict";

package/es/index.d.ts

@@ -9,4 +9,6 @@ export { default as Input } from './input';
 export { default as DatePicker } from './date-picker';
 export { default as TimePicker } from './time-picker';
 export { default as PersonPicker } from './person-picker';
+export { default as Message } from './message';
+export { default as Icon } from './icon';
 export declare const version: string;

package/es/index.js

@@ -9,4 +9,6 @@ export { default as Input } from './input';
 export { default as DatePicker } from './date-picker';
 export { default as TimePicker } from './time-picker';
 export { default as PersonPicker } from './person-picker';
-export const version = '0.1.15-beta.0';
+export { default as Message } from './message';
+export { default as Icon } from './icon';
+export const version = '0.1.15-beta.11';

package/es/input/index.js

@@ -23,7 +23,7 @@ import { Input as NextInput, ConfigProvider } from '@alifd/next';
 import cs from 'classnames';
 import { PREFIX_DEFAULT, assignSubComponent } from '../utils';
 const Input = forwardRef((_a, ref) => {
-    var { className, size = 'small' } = _a, props = __rest(_a, ["className", "size"]);
+    var { className, size = 'medium' } = _a, props = __rest(_a, ["className", "size"]);
     return (React.createElement(NextInput, Object.assign({}, props, { className: cs(`${PREFIX_DEFAULT}input`, className), size: size, ref: ref })));
 });
 const InputWithSub = assignSubComponent(Input, {

package/es/message/index.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @component 标签
+ * @en Message
+ * @type 通用 - General
+ * @remarks 同 Next Message - Same as Next.Message
+ * @when Message
+ */
+import React from 'react';
+import { Message as NextMessage } from '@alifd/next';
+import type { MessageProps } from './types';
+export * from './types';
+declare const _default: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<Pick<MessageProps & React.RefAttributes<NextMessage>, "key" | keyof MessageProps> & import("@alifd/next/types/config-provider/types").ComponentCommonProps, NextMessage, {}> & {
+    loading: typeof NextMessage.loading;
+    warning: typeof NextMessage.warning;
+    error: typeof NextMessage.error;
+    help: typeof NextMessage.help;
+    hide: typeof NextMessage.hide;
+    show: typeof NextMessage.show;
+    success: typeof NextMessage.success;
+    notice: typeof NextMessage.notice;
+};
+export default _default;

package/es/message/index.js

@@ -0,0 +1,30 @@
+/**
+ * @component 标签
+ * @en Message
+ * @type 通用 - General
+ * @remarks 同 Next Message - Same as Next.Message
+ * @when Message
+ */
+import { __rest } from "tslib";
+import React, { forwardRef } from 'react';
+import { Message as NextMessage, ConfigProvider } from '@alifd/next';
+import cs from 'classnames';
+import { PREFIX_DEFAULT, assignSubComponent } from '../utils';
+const Message = forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement(NextMessage, Object.assign({}, props, { ref: ref, className: cs(`${PREFIX_DEFAULT}message`, className) })));
+});
+const MessageWithSub = assignSubComponent(Message, {
+    show: NextMessage.show,
+    success: NextMessage.success,
+    warning: NextMessage.warning,
+    error: NextMessage.error,
+    notice: NextMessage.notice,
+    help: NextMessage.help,
+    loading: NextMessage.loading,
+    hide: NextMessage.hide,
+});
+export * from './types';
+export default ConfigProvider.config(MessageWithSub, {
+    componentName: 'Message',
+});

package/es/message/main.scss

@@ -0,0 +1,2 @@
+@import '@alifd/next/variables.scss';
+@import "../core/variables.scss";

package/es/message/style.d.ts

@@ -0,0 +1,3 @@
+import '@alifd/next/lib/message/style';
+import '@alifd/next/lib/icon/style';
+import './main.scss';

package/es/message/style.js

@@ -0,0 +1,3 @@
+import '@alifd/next/lib/message/style';
+import '@alifd/next/lib/icon/style';
+import './main.scss';

package/es/message/types.d.ts

@@ -0,0 +1,195 @@
+import type React from 'react';
+import type { OverlayProps } from '@alifd/next/types/overlay';
+import type { ConsumerState } from '@alifd/next/types/config-provider/consumer';
+type HTMLAttributesWeak = Omit<React.HTMLAttributes<HTMLElement>, 'title'>;
+/**
+ * @api Message
+ */
+export interface MessageProps extends HTMLAttributesWeak {
+    /**
+     * 反馈类型
+     * @en type of message
+     * @defaultValue 'success'
+     */
+    type?: 'success' | 'warning' | 'error' | 'notice' | 'help' | 'loading';
+    /**
+     * 反馈外观
+     * @en shape of message
+     * @defaultValue 'inline'
+     */
+    shape?: 'inline' | 'addon' | 'toast';
+    /**
+     * 反馈大小
+     * @en size of message
+     * @defaultValue 'medium'
+     */
+    size?: 'medium' | 'large';
+    /**
+     * 标题
+     * @en title of message
+     */
+    title?: React.ReactNode;
+    /**
+     * 内容，非函数式调用下使用
+     * @en content of message
+     */
+    children?: React.ReactNode;
+    /**
+     * 默认是否显示
+     * @en whether the message is visible in default
+     * @defaultValue false
+     */
+    defaultVisible?: boolean;
+    /**
+     * 当前是否显示
+     * @en whether the message is visible currently
+     */
+    visible?: boolean;
+    /**
+     * 显示的图标类型，会覆盖内部设置的IconType，传false不显示图标
+     * @en type of icon, overriding the internally type of icon
+     */
+    iconType?: string | false;
+    /**
+     * 显示关闭按钮
+     * @en whether to show the close button
+     * @defaultValue false
+     */
+    closeable?: boolean;
+    /**
+     * 关闭按钮的回调
+     * @en callback function triggered when close
+     * @defaultValue () =\> \{\}
+     */
+    onClose?: () => void;
+    /**
+     * 关闭之后调用的函数
+     * @en callback function triggered after closed
+     * @defaultValue () =\> \{\}
+     */
+    afterClose?: () => void;
+    /**
+     * 是否开启展开收起动画
+     * @en whether to enable expand and collapse animation
+     * @defaultValue true
+     */
+    animation?: boolean;
+}
+/**
+ * @api Message.show
+ * @remarks Message.show(props) 提供一个单例的调用方式，配置参数如下（继承 Overlay 的配置）：
+ *
+ * ```js
+ * Message.show({
+ *  type: 'error',
+ *  title: '错误',
+ *  content: '请联系相关人员反馈！',
+ *  hasMask: true
+ * });
+ * ```
+ * -
+ * `Message.show(props)` provides a singleton call with the following configuration parameters (inheriting `Overlay` configuration):
+ * ```js
+ * Message.show({
+ *  type: 'error',
+ *  title: 'Error',
+ *  content: 'Please contact admin feedback!',
+ *  hasMask: true
+ * });
+ * ```
+ */
+export interface MessageQuickProps extends Omit<HTMLAttributesWeak, 'content'> {
+    /**
+     * 反馈类型
+     * @en type of message
+     * @defaultValue 'success'
+     */
+    type?: 'success' | 'warning' | 'error' | 'notice' | 'help' | 'loading';
+    /**
+     * 反馈大小
+     * @en size of message
+     * @defaultValue 'medium'
+     */
+    size?: 'medium' | 'large';
+    /**
+     * 标题
+     * @en title of message
+     */
+    title?: React.ReactNode;
+    /**
+     * 内容，函数式调用下使用
+     * @en content of message
+     */
+    content?: React.ReactNode;
+    /**
+     * 弹层对齐方式，详情见 Overlay align
+     * @en alignment reference Overlay
+     * @defaultValue 'tc tc'
+     */
+    align?: string | boolean;
+    /**
+     * 弹层相对于参照元素定位的微调
+     * @en offset after positioned
+     * @defaultValue [0, 0]
+     */
+    offset?: Array<number>;
+    /**
+     * 是否显示遮罩
+     * @en whether to have a mask
+     * @defaultValue false
+     */
+    hasMask?: boolean;
+    /**
+     * 显示持续时间，0表示一直存在，以毫秒为单位
+     * @en show duration, 0 means always present, in milliseconds
+     * @defaultValue 3000
+     */
+    duration?: number;
+    /**
+     * @skip
+     */
+    timeoutId?: string;
+    /**
+     * 显示关闭按钮
+     * @en whether to show the close button
+     * @defaultValue false
+     */
+    closeable?: boolean;
+    /**
+     * 关闭按钮的回调
+     * @en callback function triggered when close
+     * @defaultValue () =\> \{\}
+     */
+    onClose?: () => void;
+    /**
+     * 关闭之后调用的函数
+     * @en callback function triggered after closed
+     * @defaultValue () =\> \{\}
+     */
+    afterClose?: () => void;
+    /**
+     * 是否开启展开收起动画
+     * @en whether to enable expand and collapse animation
+     * @defaultValue true
+     */
+    animation?: boolean;
+    /**
+     * 透传到弹层组件的属性对象
+     * @en props of Overlay
+     */
+    overlayProps?: OverlayProps;
+    /**
+     * @skip
+     */
+    contextConfig?: ConsumerState;
+}
+export type OpenProps = string | React.ReactElement | MessageQuickProps;
+export interface MessageWrapperItem extends MessageQuickProps {
+    timer?: ReturnType<typeof setTimeout>;
+    key: string;
+}
+export interface MessageWrapperProps {
+    prefix?: MessageQuickProps['prefix'];
+    dataSource: Array<MessageWrapperItem>;
+}
+export {};

package/es/message/types.js

@@ -0,0 +1 @@
+export {};

package/es/person-picker/index.js

@@ -1,4 +1,4 @@
-import { __rest } from "tslib";
+import { __awaiter, __rest } from "tslib";
 /**
  * @component 人员选择
  * @en PersonSelect
@@ -18,20 +18,53 @@ import { __rest } from "tslib";
  * | Enter       | Trigger the onClick event    |
  * | SPACE       | Trigger the onClick event    |
  */
-import React, { forwardRef } from 'react';
-import { Select as NextSelect, Tag as NextTag, Avatar as NextAvatar, Icon as NextIcon, ConfigProvider } from '@alifd/next';
+import React, { useState, forwardRef, useEffect } from 'react';
+import { Select as NextSelect, ConfigProvider } from '@alifd/next';
 import cs from 'classnames';
+import axios from 'axios';
 import { PREFIX_DEFAULT, assignSubComponent } from '../utils';
 const PersonPicker = forwardRef((_a, ref) => {
-    var { className, size = 'small', value, onUserChange, onUserPick } = _a, props = __rest(_a, ["className", "size", "value", "onUserChange", "onUserPick"]);
+    var { className, size = 'medium', defaultValue, readOnly } = _a, props = __rest(_a, ["className", "size", "defaultValue", "readOnly"]);
+    const [dataSource, setDataSource] = useState([]);
+    // 默认出现最近联系人
+    useEffect(() => {
+        handleUserSearch('');
+    }, []);
     const tagRender = (selectItem) => {
-        const { label, value, onClose } = selectItem;
-        return React.createElement(NextTag.Closeable, { onClose: onClose, className: "h-6 px-1 mt-1 mr-1" },
-            React.createElement("div", { className: "flex items-center" },
-                React.createElement(NextAvatar, { className: "mr-0.5 scale-75", shape: "square", size: "small", src: `//work.alibaba-inc.com/photo/${value}.80x80.jpg` }),
-                React.createElement("span", { className: "text-xs" }, label)));
+        return React.createElement("div", { className: "tag-container" },
+            React.createElement("img", { src: `https://work.alibaba-inc.com/photo/${selectItem.value}.40x40.jpg` }),
+            React.createElement("div", { className: 'right-container' },
+                React.createElement("div", { className: 'nick-name' }, selectItem.label),
+                React.createElement("div", { className: 'dept-name' }, (selectItem === null || selectItem === void 0 ? void 0 : selectItem.deptName) || '')));
     };
-    return (React.createElement(NextSelect, Object.assign({}, props, { className: cs(`${PREFIX_DEFAULT}person-picker`, className), mode: "multiple", itemRender: tagRender, options: [], hasArrow: false, visible: false, onClick: onUserPick, onChange: (selectedValues) => onUserChange(selectedValues), innerAfter: React.createElement(NextIcon, { type: "add" }), size: size, ref: ref })));
+    const labelRender = (selectItem) => {
+        return React.createElement("div", { className: "label-container" },
+            React.createElement("img", { style: { width: '20px', height: '20px', borderRadius: '4px' }, src: `https://work.alibaba-inc.com/photo/${selectItem.value}.20x20.jpg` }),
+            React.createElement("span", { className: "label-text" }, selectItem.label));
+    };
+    const handleUserSearch = (keyword) => __awaiter(void 0, void 0, void 0, function* () {
+        var _b, _c;
+        if (readOnly) {
+            return;
+        }
+        const queryParams = {
+            key: keyword,
+            pageSize: (props === null || props === void 0 ? void 0 : props.pageSize) || 5
+        };
+        try {
+            const response = yield axios.get('/_gw/employee360Service/searchEmpInfo.json', {
+                params: queryParams,
+            });
+            const newDataSource = (_c = (_b = response === null || response === void 0 ? void 0 : response.data) === null || _b === void 0 ? void 0 : _b.content) === null || _c === void 0 ? void 0 : _c.map((item) => {
+                return Object.assign(Object.assign({}, item), { label: item.nickName, value: item.workNo });
+            });
+            setDataSource(newDataSource);
+        }
+        catch (error) {
+            setDataSource([]);
+        }
+    });
+    return (React.createElement(NextSelect, Object.assign({}, props, { popupClassName: cs(`${PREFIX_DEFAULT}person-picker`, className), itemRender: tagRender, valueRender: labelRender, mode: "multiple", showSearch: true, filterLocal: false, hiddenSelected: true, dataSource: dataSource, onSearch: handleUserSearch, size: size, ref: ref, readOnly: readOnly })));
 });
 const PersonPickerWithSub = assignSubComponent(PersonPicker, {
     displayName: 'PersonPicker',

package/es/person-picker/main.scss

@@ -1,5 +1,33 @@
 @import "../core/variables.scss";
 
 .#{$prefix}person-picker {
-  
-}
+  .next-menu-item-inner {
+    height: var(--s--6, 44px);
+  }
+  .label-container {
+    .label-text{
+      margin-left: var(--s--2, 8px);
+    }
+  }
+  .tag-container {
+    display: flex;
+    img {
+      width: var(--s--9, 36px);
+      height: var(--s--9, 36px);
+      border-radius: var(--s--1, 4px);
+    }
+    .right-container {
+      margin-left: var(--s--2, 8px);
+      .nick-name {
+        line-height: var(--font-size-body-2, 14px);
+        font-size: var(--font-size-body-2, 14px);
+        margin-bottom: var(--s--1, 4px);
+        color: var(--color-text1-4, #111720);
+      } 
+      .dept-name {
+        font-size: var(--s--3, 12px);
+        line-height: var(--font-size-body-2, 14px);
+      }
+    }
+  }
+}

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

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

package/es/person-picker/style.js

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