@alifd/chat 0.1.15-beta.2 → 0.1.15-beta.3

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,46 @@ 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 } from 'react';
+import { Select as NextSelect, Tag as NextTag, Avatar as NextAvatar, 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 = 'small', defaultValue, value, onChange, readOnly } = _a, props = __rest(_a, ["className", "size", "defaultValue", "value", "onChange", "readOnly"]);
+    const [dataSource, setDataSource] = useState([]);
     const tagRender = (selectItem) => {
-        const { label, value, onClose } = selectItem;
-        return React.createElement(NextTag.Closeable, { onClose: onClose, className: "h-6 px-1 mt-1 mr-1" },
+        return React.createElement(NextTag, { 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)));
+                React.createElement(NextAvatar, { className: "mr-0.5 scale-75", shape: "square", size: "small", src: `//work.alibaba-inc.com/photo/${selectItem.value}.80x80.jpg` }),
+                React.createElement("span", { className: "text-xs" }, selectItem.label)));
     };
-    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 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 {
+                    label: item.nickName,
+                    value: item.workNo
+                };
+            });
+            setDataSource(newDataSource);
+        }
+        catch (error) {
+            setDataSource([]);
+        }
+    });
+    return (React.createElement(NextSelect, Object.assign({}, props, { className: cs(`${PREFIX_DEFAULT}person-picker`, className), itemRender: tagRender, mode: "multiple", showSearch: true, filterLocal: false, dataSource: dataSource, onSearch: handleUserSearch, size: size, ref: ref })));
 });
 const PersonPickerWithSub = assignSubComponent(PersonPicker, {
     displayName: 'PersonPicker',

package/lib/person-picker/index.js

@@ -23,17 +23,43 @@ 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 axios_1 = tslib_1.__importDefault(require("axios"));
 const utils_1 = require("../utils");
 const PersonPicker = (0, react_1.forwardRef)((_a, ref) => {
-    var { className, size = 'small', value, onUserChange, onUserPick } = _a, props = tslib_1.__rest(_a, ["className", "size", "value", "onUserChange", "onUserPick"]);
+    var { className, size = 'small', defaultValue, value, onChange, readOnly } = _a, props = tslib_1.__rest(_a, ["className", "size", "defaultValue", "value", "onChange", "readOnly"]);
+    const [dataSource, setDataSource] = (0, react_1.useState)([]);
     const tagRender = (selectItem) => {
-        const { label, value, onClose } = selectItem;
-        return react_1.default.createElement(next_1.Tag.Closeable, { onClose: onClose, className: "h-6 px-1 mt-1 mr-1" },
+        return react_1.default.createElement(next_1.Tag, { className: "h-6 px-1 mt-1 mr-1" },
             react_1.default.createElement("div", { className: "flex items-center" },
-                react_1.default.createElement(next_1.Avatar, { className: "mr-0.5 scale-75", shape: "square", size: "small", src: `//work.alibaba-inc.com/photo/${value}.80x80.jpg` }),
-                react_1.default.createElement("span", { className: "text-xs" }, label)));
+                react_1.default.createElement(next_1.Avatar, { className: "mr-0.5 scale-75", shape: "square", size: "small", src: `//work.alibaba-inc.com/photo/${selectItem.value}.80x80.jpg` }),
+                react_1.default.createElement("span", { className: "text-xs" }, selectItem.label)));
     };
-    return (react_1.default.createElement(next_1.Select, Object.assign({}, props, { className: (0, classnames_1.default)(`${utils_1.PREFIX_DEFAULT}person-picker`, className), mode: "multiple", itemRender: tagRender, options: [], hasArrow: false, visible: false, onClick: onUserPick, onChange: (selectedValues) => onUserChange(selectedValues), innerAfter: react_1.default.createElement(next_1.Icon, { type: "add" }), size: size, ref: ref })));
+    const handleUserSearch = (keyword) => tslib_1.__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_1.default.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 {
+                    label: item.nickName,
+                    value: item.workNo
+                };
+            });
+            setDataSource(newDataSource);
+        }
+        catch (error) {
+            setDataSource([]);
+        }
+    });
+    return (react_1.default.createElement(next_1.Select, Object.assign({}, props, { className: (0, classnames_1.default)(`${utils_1.PREFIX_DEFAULT}person-picker`, className), itemRender: tagRender, mode: "multiple", showSearch: true, filterLocal: false, dataSource: dataSource, onSearch: handleUserSearch, size: size, ref: ref })));
 });
 const PersonPickerWithSub = (0, utils_1.assignSubComponent)(PersonPicker, {
     displayName: 'PersonPicker',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alifd/chat",
-  "version": "0.1.15-beta.2",
+  "version": "0.1.15-beta.3",
   "description": "A configurable component library for chat built on React.",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -238,6 +238,7 @@
   },
   "dependencies": {
     "@ali/dingtalk-jsapi": "^3.0.33",
+    "axios": "^1.7.0",
     "dd-icons": "^1.6.20",
     "dingtalk-jsapi": "^3.0.33",
     "hoist-non-react-statics": "^3.3.2",