@alifd/chat 0.1.15-beta.4 → 0.1.15-beta.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/es/index.js +1 -1
  2. package/es/person-picker/index.js +18 -11
  3. package/es/person-picker/main.scss +32 -1
  4. package/es/time-picker/index.js +1 -1
  5. package/lib/index.js +1 -1
  6. package/lib/person-picker/index.js +16 -9
  7. package/lib/person-picker/main.scss +32 -1
  8. package/lib/time-picker/index.js +1 -1
  9. package/package.json +1 -1
package/es/index.js CHANGED
@@ -9,4 +9,4 @@ export { default as Input } from './input';
9
9
  export { default as DatePicker } from './date-picker';
10
10
  export { default as TimePicker } from './time-picker';
11
11
  export { default as PersonPicker } from './person-picker';
12
- export const version = '0.1.15-beta.4';
12
+ export const version = '0.1.15-beta.5';
package/es/person-picker/index.js CHANGED
@@ -18,19 +18,29 @@ import { __awaiter, __rest } from "tslib";
18
18
  * | Enter | Trigger the onClick event |
19
19
  * | SPACE | Trigger the onClick event |
20
20
  */
21
- import React, { useState, forwardRef } from 'react';
22
- import { Select as NextSelect, Tag as NextTag, Avatar as NextAvatar, ConfigProvider } from '@alifd/next';
21
+ import React, { useState, forwardRef, useEffect } from 'react';
22
+ import { Select as NextSelect, Avatar as NextAvatar, ConfigProvider } from '@alifd/next';
23
23
  import cs from 'classnames';
24
24
  import axios from 'axios';
25
25
  import { PREFIX_DEFAULT, assignSubComponent } from '../utils';
26
26
  const PersonPicker = forwardRef((_a, ref) => {
27
27
  var { className, size = 'medium', defaultValue, readOnly } = _a, props = __rest(_a, ["className", "size", "defaultValue", "readOnly"]);
28
28
  const [dataSource, setDataSource] = useState([]);
29
+ // 默认出现最近联系人
30
+ useEffect(() => {
31
+ handleUserSearch('');
32
+ }, []);
29
33
  const tagRender = (selectItem) => {
30
- return React.createElement(NextTag, { className: "h-6 px-1 mt-1 mr-1" },
31
- React.createElement("div", { className: "flex items-center" },
32
- React.createElement(NextAvatar, { shape: "square", size: "medium", src: `//work.alibaba-inc.com/photo/${selectItem.value}.40x40.jpg` }),
33
- React.createElement("span", null, selectItem.label)));
34
+ return React.createElement("div", { className: "tag-container" },
35
+ React.createElement("img", { src: `//work.alibaba-inc.com/photo/${selectItem.value}.40x40.jpg` }),
36
+ React.createElement("div", { className: 'right-container' },
37
+ React.createElement("div", { className: 'nick-name' }, selectItem.label),
38
+ React.createElement("div", { className: 'dept-name' }, (selectItem === null || selectItem === void 0 ? void 0 : selectItem.deptName) || '')));
39
+ };
40
+ const labelRender = (selectItem) => {
41
+ return React.createElement("div", { className: "label-container" },
42
+ React.createElement(NextAvatar, { className: "mr-2", shape: "square", size: "small", src: `//work.alibaba-inc.com/photo/${selectItem.value}.20x20.jpg` }),
43
+ React.createElement("span", { className: "label-text" }, selectItem.label));
34
44
  };
35
45
  const handleUserSearch = (keyword) => __awaiter(void 0, void 0, void 0, function* () {
36
46
  var _b, _c;
@@ -46,10 +56,7 @@ const PersonPicker = forwardRef((_a, ref) => {
46
56
  params: queryParams,
47
57
  });
48
58
  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) => {
49
- return {
50
- label: item.nickName,
51
- value: item.workNo
52
- };
59
+ return Object.assign(Object.assign({}, item), { label: item.nickName, value: item.workNo });
53
60
  });
54
61
  setDataSource(newDataSource);
55
62
  }
@@ -57,7 +64,7 @@ const PersonPicker = forwardRef((_a, ref) => {
57
64
  setDataSource([]);
58
65
  }
59
66
  });
60
- return (React.createElement(NextSelect, Object.assign({}, props, { className: cs(`${PREFIX_DEFAULT}person-picker`, className), itemRender: tagRender, mode: "multiple", showSearch: true, filterLocal: false, hiddenSelected: true, dataSource: dataSource, onSearch: handleUserSearch, size: size, ref: ref, readOnly: readOnly })));
67
+ 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 })));
61
68
  });
62
69
  const PersonPickerWithSub = assignSubComponent(PersonPicker, {
63
70
  displayName: 'PersonPicker',
package/es/person-picker/main.scss CHANGED
@@ -1,5 +1,36 @@
1
1
  @import "../core/variables.scss";
2
2
 
3
3
  .#{$prefix}person-picker {
4
+ background-color: yellow;
5
+ .next-menu-item-inner {
6
+ height: var(--s--5, 40px);
7
+ }
4
8
 
5
- }
9
+ .label-container {
10
+ .label-text{
11
+ margin-left: var(--s--2, 8px);
12
+ }
13
+ }
14
+
15
+ .tag-container {
16
+ display: flex;
17
+ img {
18
+ width: var(--s--9, 36px);
19
+ height: var(--s--9, 36px);
20
+ border-radius: var(--s--1, 4px);
21
+ }
22
+ .right-container {
23
+ margin-left: var(--s--2, 8px);
24
+ .nick-name {
25
+ line-height: var(--font-size-body-2, 14px);
26
+ font-size: var(--font-size-body-2, 14px);
27
+ margin-bottom: var(--s--1, 4px);
28
+ color: var(--color-text1-4, #111720);
29
+ }
30
+ .dept-name {
31
+ font-size: var(--s--3, 12px);
32
+ line-height: var(--font-size-body-2, 14px);
33
+ }
34
+ }
35
+ }
36
+ }
package/es/time-picker/index.js CHANGED
@@ -61,7 +61,7 @@ const TimePicker = forwardRef((_a, ref) => {
61
61
  const { value, format = 'HH:mm' } = props;
62
62
  return {
63
63
  label: dayjs(value).format(format),
64
- value,
64
+ value: dayjs(value).format(format),
65
65
  };
66
66
  };
67
67
  if (mode === 'dingtalk') {
package/lib/index.js CHANGED
@@ -26,4 +26,4 @@ var time_picker_1 = require("./time-picker");
26
26
  Object.defineProperty(exports, "TimePicker", { enumerable: true, get: function () { return __importDefault(time_picker_1).default; } });
27
27
  var person_picker_1 = require("./person-picker");
28
28
  Object.defineProperty(exports, "PersonPicker", { enumerable: true, get: function () { return __importDefault(person_picker_1).default; } });
29
- exports.version = '0.1.15-beta.4';
29
+ exports.version = '0.1.15-beta.5';
package/lib/person-picker/index.js CHANGED
@@ -28,11 +28,21 @@ const utils_1 = require("../utils");
28
28
  const PersonPicker = (0, react_1.forwardRef)((_a, ref) => {
29
29
  var { className, size = 'medium', defaultValue, readOnly } = _a, props = tslib_1.__rest(_a, ["className", "size", "defaultValue", "readOnly"]);
30
30
  const [dataSource, setDataSource] = (0, react_1.useState)([]);
31
+ // 默认出现最近联系人
32
+ (0, react_1.useEffect)(() => {
33
+ handleUserSearch('');
34
+ }, []);
31
35
  const tagRender = (selectItem) => {
32
- return react_1.default.createElement(next_1.Tag, { className: "h-6 px-1 mt-1 mr-1" },
33
- react_1.default.createElement("div", { className: "flex items-center" },
34
- react_1.default.createElement(next_1.Avatar, { shape: "square", size: "medium", src: `//work.alibaba-inc.com/photo/${selectItem.value}.40x40.jpg` }),
35
- react_1.default.createElement("span", null, selectItem.label)));
36
+ return react_1.default.createElement("div", { className: "tag-container" },
37
+ react_1.default.createElement("img", { src: `//work.alibaba-inc.com/photo/${selectItem.value}.40x40.jpg` }),
38
+ react_1.default.createElement("div", { className: 'right-container' },
39
+ react_1.default.createElement("div", { className: 'nick-name' }, selectItem.label),
40
+ react_1.default.createElement("div", { className: 'dept-name' }, (selectItem === null || selectItem === void 0 ? void 0 : selectItem.deptName) || '')));
41
+ };
42
+ const labelRender = (selectItem) => {
43
+ return react_1.default.createElement("div", { className: "label-container" },
44
+ react_1.default.createElement(next_1.Avatar, { className: "mr-2", shape: "square", size: "small", src: `//work.alibaba-inc.com/photo/${selectItem.value}.20x20.jpg` }),
45
+ react_1.default.createElement("span", { className: "label-text" }, selectItem.label));
36
46
  };
37
47
  const handleUserSearch = (keyword) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
38
48
  var _b, _c;
@@ -48,10 +58,7 @@ const PersonPicker = (0, react_1.forwardRef)((_a, ref) => {
48
58
  params: queryParams,
49
59
  });
50
60
  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) => {
51
- return {
52
- label: item.nickName,
53
- value: item.workNo
54
- };
61
+ return Object.assign(Object.assign({}, item), { label: item.nickName, value: item.workNo });
55
62
  });
56
63
  setDataSource(newDataSource);
57
64
  }
@@ -59,7 +66,7 @@ const PersonPicker = (0, react_1.forwardRef)((_a, ref) => {
59
66
  setDataSource([]);
60
67
  }
61
68
  });
62
- 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, hiddenSelected: true, dataSource: dataSource, onSearch: handleUserSearch, size: size, ref: ref, readOnly: readOnly })));
69
+ return (react_1.default.createElement(next_1.Select, Object.assign({}, props, { popupClassName: (0, classnames_1.default)(`${utils_1.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 })));
63
70
  });
64
71
  const PersonPickerWithSub = (0, utils_1.assignSubComponent)(PersonPicker, {
65
72
  displayName: 'PersonPicker',
package/lib/person-picker/main.scss CHANGED
@@ -1,5 +1,36 @@
1
1
  @import "../core/variables.scss";
2
2
 
3
3
  .#{$prefix}person-picker {
4
+ background-color: yellow;
5
+ .next-menu-item-inner {
6
+ height: var(--s--5, 40px);
7
+ }
4
8
 
5
- }
9
+ .label-container {
10
+ .label-text{
11
+ margin-left: var(--s--2, 8px);
12
+ }
13
+ }
14
+
15
+ .tag-container {
16
+ display: flex;
17
+ img {
18
+ width: var(--s--9, 36px);
19
+ height: var(--s--9, 36px);
20
+ border-radius: var(--s--1, 4px);
21
+ }
22
+ .right-container {
23
+ margin-left: var(--s--2, 8px);
24
+ .nick-name {
25
+ line-height: var(--font-size-body-2, 14px);
26
+ font-size: var(--font-size-body-2, 14px);
27
+ margin-bottom: var(--s--1, 4px);
28
+ color: var(--color-text1-4, #111720);
29
+ }
30
+ .dept-name {
31
+ font-size: var(--s--3, 12px);
32
+ line-height: var(--font-size-body-2, 14px);
33
+ }
34
+ }
35
+ }
36
+ }
package/lib/time-picker/index.js CHANGED
@@ -63,7 +63,7 @@ const TimePicker = (0, react_1.forwardRef)((_a, ref) => {
63
63
  const { value, format = 'HH:mm' } = props;
64
64
  return {
65
65
  label: (0, dayjs_1.default)(value).format(format),
66
- value,
66
+ value: (0, dayjs_1.default)(value).format(format),
67
67
  };
68
68
  };
69
69
  if (mode === 'dingtalk') {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alifd/chat",
3
- "version": "0.1.15-beta.4",
3
+ "version": "0.1.15-beta.6",
4
4
  "description": "A configurable component library for chat built on React.",
5
5
  "main": "lib/index.js",
6
6
  "module": "es/index.js",