@kne/entry-selector 0.1.0
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.
- package/README.md +167 -0
- package/dist/index.css +98 -0
- package/dist/index.css.map +1 -0
- package/dist/index.js +306 -0
- package/dist/index.js.map +1 -0
- package/dist/index.modern.js +279 -0
- package/dist/index.modern.js.map +1 -0
- package/dist/locale/en-US.js +9 -0
- package/dist/locale/en-US.js.map +1 -0
- package/dist/locale/en-US.modern.js +9 -0
- package/dist/locale/en-US.modern.js.map +1 -0
- package/dist/locale/zh-CN.js +9 -0
- package/dist/locale/zh-CN.js.map +1 -0
- package/dist/locale/zh-CN.modern.js +9 -0
- package/dist/locale/zh-CN.modern.js.map +1 -0
- package/package.json +103 -0
package/README.md
ADDED
|
@@ -0,0 +1,167 @@
|
|
|
1
|
+
|
|
2
|
+
# entry-selector
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
### 描述
|
|
6
|
+
|
|
7
|
+
EntrySelector是一个用于选择和管理条目列表的 React 组件。它提供了一个直观的界面,允许用户从可选列表中选择条目,并对已选条目进行管理,包括排序、搜索和删除等操作。
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
### 安装
|
|
11
|
+
|
|
12
|
+
```shell
|
|
13
|
+
npm i --save @kne/entry-selector
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
### 概述
|
|
18
|
+
|
|
19
|
+
EntrySelector 是一个用于选择和管理条目列表的 React 组件。它提供了一个直观的界面,允许用户从可选列表中选择条目,并对已选条目进行管理,包括排序、搜索和删除等操作。
|
|
20
|
+
|
|
21
|
+
#### 主要功能
|
|
22
|
+
|
|
23
|
+
- **双列表展示**:清晰地分离已选条目和可选条目
|
|
24
|
+
- **拖拽排序**:支持对已选条目进行拖拽排序
|
|
25
|
+
- **搜索过滤**:可以通过关键词搜索过滤条目
|
|
26
|
+
- **自定义渲染**:支持自定义条目的渲染方式
|
|
27
|
+
- **国际化支持**:内置中文和英文语言支持
|
|
28
|
+
- **添加新条目**:支持添加不在预设列表中的新条目
|
|
29
|
+
|
|
30
|
+
#### 使用场景
|
|
31
|
+
|
|
32
|
+
EntrySelector 适用于需要从预定义列表中选择多个条目并进行排序的场景,例如:
|
|
33
|
+
|
|
34
|
+
- 选择并排序文章分类
|
|
35
|
+
- 管理产品标签
|
|
36
|
+
- 配置用户权限
|
|
37
|
+
- 选择并排序展示项目
|
|
38
|
+
|
|
39
|
+
#### 基本原理
|
|
40
|
+
|
|
41
|
+
组件内部维护已选条目列表和可选条目列表两个状态,通过用户交互在这两个列表之间移动条目。组件使用 react-sortablejs 实现拖拽排序功能,并支持通过搜索框过滤条目列表。
|
|
42
|
+
|
|
43
|
+
|
|
44
|
+
### 示例
|
|
45
|
+
|
|
46
|
+
|
|
47
|
+
#### 示例样式
|
|
48
|
+
|
|
49
|
+
```scss
|
|
50
|
+
.ant-card {
|
|
51
|
+
border-color: black;
|
|
52
|
+
text-align: center;
|
|
53
|
+
width: 200px;
|
|
54
|
+
}
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
#### 示例代码
|
|
58
|
+
|
|
59
|
+
- 这里填写示例标题
|
|
60
|
+
- 这里填写示例说明
|
|
61
|
+
- _EntrySelector(@kne/current-lib_entry-selector)[import * as _EntrySelector from "@kne/entry-selector"],(@kne/current-lib_entry-selector/dist/index.css),antd(antd)
|
|
62
|
+
|
|
63
|
+
```jsx
|
|
64
|
+
const { default: EntrySelector } = _EntrySelector;
|
|
65
|
+
const { Switch, Flex } = antd;
|
|
66
|
+
|
|
67
|
+
const BaseExample = () => {
|
|
68
|
+
return (
|
|
69
|
+
<div>
|
|
70
|
+
<EntrySelector
|
|
71
|
+
pagination={{ paramsType: 'params' }}
|
|
72
|
+
api={{
|
|
73
|
+
loader: data => {
|
|
74
|
+
console.log('fetch props:', data);
|
|
75
|
+
return {
|
|
76
|
+
totalCount: 3,
|
|
77
|
+
pageData: [
|
|
78
|
+
{
|
|
79
|
+
id: 1,
|
|
80
|
+
title: '你是什么性格的人?有哪些方面的不足?需要怎样改进?'
|
|
81
|
+
},
|
|
82
|
+
{
|
|
83
|
+
id: 2,
|
|
84
|
+
title: '你认为如何可以让一个员工有效高质的完成他的工作?'
|
|
85
|
+
},
|
|
86
|
+
{
|
|
87
|
+
id: 3,
|
|
88
|
+
title: '请分享一次你快速作出决定的经验,当时的情况怎样?你是怎么处理的?'
|
|
89
|
+
}
|
|
90
|
+
]
|
|
91
|
+
};
|
|
92
|
+
}
|
|
93
|
+
}}
|
|
94
|
+
getSearchProps={({ searchText }) => {
|
|
95
|
+
return { title: searchText };
|
|
96
|
+
}}
|
|
97
|
+
renderSelectedItem={(item, { el, onChange }) => {
|
|
98
|
+
return (
|
|
99
|
+
<>
|
|
100
|
+
{el}
|
|
101
|
+
<Flex align="center" gap={8}>
|
|
102
|
+
<span>开启追问</span>
|
|
103
|
+
<Switch
|
|
104
|
+
size="small"
|
|
105
|
+
checked={item.hasProbe}
|
|
106
|
+
onChange={checked => {
|
|
107
|
+
onChange(Object.assign({}, item, { hasProbe: checked }));
|
|
108
|
+
}}
|
|
109
|
+
/>
|
|
110
|
+
</Flex>
|
|
111
|
+
</>
|
|
112
|
+
);
|
|
113
|
+
}}
|
|
114
|
+
onChange={value => {
|
|
115
|
+
console.log('>>>>>>>>', value);
|
|
116
|
+
}}
|
|
117
|
+
options={[
|
|
118
|
+
{
|
|
119
|
+
children: '操作1'
|
|
120
|
+
},
|
|
121
|
+
{
|
|
122
|
+
children: '操作2'
|
|
123
|
+
}
|
|
124
|
+
]}
|
|
125
|
+
/>
|
|
126
|
+
</div>
|
|
127
|
+
);
|
|
128
|
+
};
|
|
129
|
+
|
|
130
|
+
render(<BaseExample />);
|
|
131
|
+
|
|
132
|
+
```
|
|
133
|
+
|
|
134
|
+
|
|
135
|
+
### API
|
|
136
|
+
|
|
137
|
+
| 属性名 | 类型 | 默认值 | 说明 |
|
|
138
|
+
|-------|------|-------|------|
|
|
139
|
+
| value | Array | [] | 已选条目列表,每个条目应包含唯一id属性 |
|
|
140
|
+
| onChange | Function | - | 值变化时的回调函数,参数为新的value值 |
|
|
141
|
+
| onAdd | Function | - | 添加新条目的回调函数,参数为包含fetchApi、value和onChange的对象 |
|
|
142
|
+
| api | Function | - | 获取条目列表的API函数,用于加载可选条目数据 |
|
|
143
|
+
| options | Array | - | 条目操作选项列表,用于ButtonGroup组件 |
|
|
144
|
+
| renderSelectedItem | Function | - | 自定义渲染已选条目的函数,参数为条目数据和包含el、target、fetchApi、onChange的对象 |
|
|
145
|
+
| renderItem | Function | - | 自定义渲染可选条目的函数,参数为条目数据和包含fetchApi、el的对象 |
|
|
146
|
+
| renderOptions | Function | - | 自定义渲染操作选项的函数,参数为包含fetchApi、options的对象 |
|
|
147
|
+
| getSearchProps | Function | - | 获取搜索属性的函数,用于配置搜索功能 |
|
|
148
|
+
| searchPlaceholder | String | - | 搜索框占位文本,未设置时使用国际化文本 |
|
|
149
|
+
|
|
150
|
+
#### 国际化支持
|
|
151
|
+
|
|
152
|
+
组件内置中文和英文两种语言,默认使用中文。可通过createWithIntlProvider配置国际化。
|
|
153
|
+
|
|
154
|
+
| 语言 | 代码 |
|
|
155
|
+
|------|------|
|
|
156
|
+
| 中文 | zh-CN |
|
|
157
|
+
| 英文 | en-US |
|
|
158
|
+
|
|
159
|
+
#### 国际化文本键值
|
|
160
|
+
|
|
161
|
+
| 键名 | 中文 | 英文 |
|
|
162
|
+
|------|------|------|
|
|
163
|
+
| add | 添加 | Add |
|
|
164
|
+
| selected | 已选 | Selected |
|
|
165
|
+
| list | 列表 | List |
|
|
166
|
+
| searchPlaceholder | 请输入关键字 | Please input keyword |
|
|
167
|
+
|
package/dist/index.css
ADDED
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
._TIU4- {
|
|
2
|
+
background: #f6f7f9;
|
|
3
|
+
border-radius: 12px;
|
|
4
|
+
padding: 16px;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
._ZXEhy {
|
|
8
|
+
background: #ffffff;
|
|
9
|
+
border-radius: 12px;
|
|
10
|
+
height: 100%;
|
|
11
|
+
overflow: hidden;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
._HAF3g {
|
|
15
|
+
padding: 8px 16px;
|
|
16
|
+
border-bottom: 1px solid var(--bg-color-grey-3);
|
|
17
|
+
font-weight: 600;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
._VO7i- {
|
|
21
|
+
max-height: 800px;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
._8w58c {
|
|
25
|
+
height: 100%;
|
|
26
|
+
background: #ffffff;
|
|
27
|
+
min-height: 150px;
|
|
28
|
+
}
|
|
29
|
+
._8w58c .ant-list-header {
|
|
30
|
+
padding: 8px 16px;
|
|
31
|
+
font-weight: 600;
|
|
32
|
+
color: var(--primary-color);
|
|
33
|
+
}
|
|
34
|
+
._8w58c .list-item-title,
|
|
35
|
+
._8w58c .list-item-description {
|
|
36
|
+
white-space: pre-wrap;
|
|
37
|
+
}
|
|
38
|
+
._8w58c .list-item-title {
|
|
39
|
+
font-weight: 600;
|
|
40
|
+
}
|
|
41
|
+
._8w58c .list-item-description {
|
|
42
|
+
color: var(--font-color-grey);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
._9m0I0 .ant-list-item {
|
|
46
|
+
cursor: pointer;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
._P8KYX {
|
|
50
|
+
width: 20px;
|
|
51
|
+
height: 20px;
|
|
52
|
+
background: var(--primary-color);
|
|
53
|
+
color: #ffffff;
|
|
54
|
+
border-radius: 50%;
|
|
55
|
+
margin: 0 6px;
|
|
56
|
+
display: flex;
|
|
57
|
+
flex: 0 0 20px;
|
|
58
|
+
align-items: center;
|
|
59
|
+
justify-content: center;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
._agPfO {
|
|
63
|
+
padding: 0;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
._iFzfk {
|
|
67
|
+
padding: 8px 14px !important;
|
|
68
|
+
background: #ffffff;
|
|
69
|
+
transition: box-shadow 500ms;
|
|
70
|
+
}
|
|
71
|
+
._iFzfk .ant-checkbox-wrapper {
|
|
72
|
+
flex: 1;
|
|
73
|
+
}
|
|
74
|
+
._iFzfk._uB1q2 {
|
|
75
|
+
cursor: move !important;
|
|
76
|
+
}
|
|
77
|
+
._iFzfk._uB1q2 .ant-checkbox-wrapper {
|
|
78
|
+
margin-left: 2px;
|
|
79
|
+
}
|
|
80
|
+
._iFzfk:not(._uB1q2) .ant-checkbox-wrapper {
|
|
81
|
+
margin-left: 16px;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
._WHlyH {
|
|
85
|
+
color: var(--font-color-grey-1);
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
._dxhFH {
|
|
89
|
+
opacity: 1 !important;
|
|
90
|
+
background: rgba(255, 255, 255, 0.9);
|
|
91
|
+
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
._7ZIH8 {
|
|
95
|
+
background: var(--primary-color-1);
|
|
96
|
+
border: 1px dashed var(--primary-color) !important;
|
|
97
|
+
}
|
|
98
|
+
/*# sourceMappingURL=index.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["style.module.scss"],"names":[],"mappings":"AAAA;EACE,mBAAmB;EACnB,mBAAmB;EACnB,aAAa;AACf;;AAEA;EACE,mBAAmB;EACnB,mBAAmB;EACnB,YAAY;EACZ,gBAAgB;AAClB;;AAEA;EACE,iBAAiB;EACjB,+CAA+C;EAC/C,gBAAgB;AAClB;;AAEA;EACE,iBAAiB;AACnB;;AAEA;EACE,YAAY;EACZ,mBAAmB;EACnB,iBAAiB;AACnB;AACA;EACE,iBAAiB;EACjB,gBAAgB;EAChB,2BAA2B;AAC7B;AACA;;EAEE,qBAAqB;AACvB;AACA;EACE,gBAAgB;AAClB;AACA;EACE,6BAA6B;AAC/B;;AAEA;EACE,eAAe;AACjB;;AAEA;EACE,WAAW;EACX,YAAY;EACZ,gCAAgC;EAChC,cAAc;EACd,kBAAkB;EAClB,aAAa;EACb,aAAa;EACb,cAAc;EACd,mBAAmB;EACnB,uBAAuB;AACzB;;AAEA;EACE,UAAU;AACZ;;AAEA;EACE,4BAA4B;EAC5B,mBAAmB;EACnB,4BAA4B;AAC9B;AACA;EACE,OAAO;AACT;AACA;EACE,uBAAuB;AACzB;AACA;EACE,gBAAgB;AAClB;AACA;EACE,iBAAiB;AACnB;;AAEA;EACE,+BAA+B;AACjC;;AAEA;EACE,qBAAqB;EACrB,oCAAoC;EACpC,0CAA0C;AAC5C;;AAEA;EACE,kCAAkC;EAClC,kDAAkD;AACpD","file":"index.css","sourcesContent":[".entry-selector {\n background: #f6f7f9;\n border-radius: 12px;\n padding: 16px;\n}\n\n.list-outer {\n background: #ffffff;\n border-radius: 12px;\n height: 100%;\n overflow: hidden;\n}\n\n.list-header {\n padding: 8px 16px;\n border-bottom: 1px solid var(--bg-color-grey-3);\n font-weight: 600;\n}\n\n.list-scroll {\n max-height: 800px;\n}\n\n.list {\n height: 100%;\n background: #ffffff;\n min-height: 150px;\n}\n.list :global .ant-list-header {\n padding: 8px 16px;\n font-weight: 600;\n color: var(--primary-color);\n}\n.list :global .list-item-title,\n.list :global .list-item-description {\n white-space: pre-wrap;\n}\n.list :global .list-item-title {\n font-weight: 600;\n}\n.list :global .list-item-description {\n color: var(--font-color-grey);\n}\n\n.list-lib :global .ant-list-item {\n cursor: pointer;\n}\n\n.list-index {\n width: 20px;\n height: 20px;\n background: var(--primary-color);\n color: #ffffff;\n border-radius: 50%;\n margin: 0 6px;\n display: flex;\n flex: 0 0 20px;\n align-items: center;\n justify-content: center;\n}\n\n.columns-control-content-list {\n padding: 0;\n}\n\n.columns-control-content-item {\n padding: 8px 14px !important;\n background: #ffffff;\n transition: box-shadow 500ms;\n}\n.columns-control-content-item :global .ant-checkbox-wrapper {\n flex: 1;\n}\n.columns-control-content-item.is-drag {\n cursor: move !important;\n}\n.columns-control-content-item.is-drag :global .ant-checkbox-wrapper {\n margin-left: 2px;\n}\n.columns-control-content-item:not(.is-drag) :global .ant-checkbox-wrapper {\n margin-left: 16px;\n}\n\n.columns-control-content-item-icon {\n color: var(--font-color-grey-1);\n}\n\n.sortable-drag {\n opacity: 1 !important;\n background: rgba(255, 255, 255, 0.9);\n box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);\n}\n\n.sortable-ghost {\n background: var(--primary-color-1);\n border: 1px dashed var(--primary-color) !important;\n}"]}
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,306 @@
|
|
|
1
|
+
var React = require('react');
|
|
2
|
+
var reactSortablejs = require('react-sortablejs');
|
|
3
|
+
var reactIntl = require('@kne/react-intl');
|
|
4
|
+
var icons = require('@ant-design/icons');
|
|
5
|
+
var ButtonGroup = require('@kne/button-group');
|
|
6
|
+
var useControllerValue = require('@kne/use-control-value');
|
|
7
|
+
var scrollLoader = require('@kne/scroll-loader');
|
|
8
|
+
var classnames = require('classnames');
|
|
9
|
+
var SearchInput = require('@kne/search-input');
|
|
10
|
+
var antd = require('antd');
|
|
11
|
+
var SimpleBar = require('simplebar-react');
|
|
12
|
+
require('simplebar/dist/simplebar.min.css');
|
|
13
|
+
require('@kne/button-group/dist/index.css');
|
|
14
|
+
|
|
15
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
16
|
+
|
|
17
|
+
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
18
|
+
var ButtonGroup__default = /*#__PURE__*/_interopDefaultLegacy(ButtonGroup);
|
|
19
|
+
var useControllerValue__default = /*#__PURE__*/_interopDefaultLegacy(useControllerValue);
|
|
20
|
+
var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
|
|
21
|
+
var SearchInput__default = /*#__PURE__*/_interopDefaultLegacy(SearchInput);
|
|
22
|
+
var SimpleBar__default = /*#__PURE__*/_interopDefaultLegacy(SimpleBar);
|
|
23
|
+
|
|
24
|
+
function _extends() {
|
|
25
|
+
return _extends = Object.assign ? Object.assign.bind() : function (n) {
|
|
26
|
+
for (var e = 1; e < arguments.length; e++) {
|
|
27
|
+
var t = arguments[e];
|
|
28
|
+
for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
|
|
29
|
+
}
|
|
30
|
+
return n;
|
|
31
|
+
}, _extends.apply(null, arguments);
|
|
32
|
+
}
|
|
33
|
+
function _objectWithoutPropertiesLoose(r, e) {
|
|
34
|
+
if (null == r) return {};
|
|
35
|
+
var t = {};
|
|
36
|
+
for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
|
|
37
|
+
if (-1 !== e.indexOf(n)) continue;
|
|
38
|
+
t[n] = r[n];
|
|
39
|
+
}
|
|
40
|
+
return t;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
const locale$1 = {
|
|
44
|
+
add: '添加',
|
|
45
|
+
selected: '已选择',
|
|
46
|
+
list: '列表',
|
|
47
|
+
searchPlaceholder: '请输入关键字'
|
|
48
|
+
};
|
|
49
|
+
|
|
50
|
+
const locale = {
|
|
51
|
+
add: 'Add',
|
|
52
|
+
selected: 'Selected',
|
|
53
|
+
list: 'List',
|
|
54
|
+
searchPlaceholder: 'Please input keyword'
|
|
55
|
+
};
|
|
56
|
+
|
|
57
|
+
var style = {"entry-selector":"_TIU4-","list-outer":"_ZXEhy","list-header":"_HAF3g","list-scroll":"_VO7i-","list":"_8w58c","list-lib":"_9m0I0","list-index":"_P8KYX","columns-control-content-list":"_agPfO","columns-control-content-item":"_iFzfk","is-drag":"_uB1q2","columns-control-content-item-icon":"_WHlyH","sortable-drag":"_dxhFH","sortable-ghost":"_7ZIH8"};
|
|
58
|
+
|
|
59
|
+
const _excluded = ["onAdd", "api", "options", "renderSelectedItem", "renderItem", "renderOptions", "getSearchProps", "searchPlaceholder"];
|
|
60
|
+
const EntrySelector = reactIntl.createWithIntlProvider({
|
|
61
|
+
defaultLocale: 'zh-CN',
|
|
62
|
+
messages: {
|
|
63
|
+
'zh-CN': locale$1,
|
|
64
|
+
'en-US': locale
|
|
65
|
+
},
|
|
66
|
+
namespace: 'entry-selector'
|
|
67
|
+
})(_ref => {
|
|
68
|
+
let {
|
|
69
|
+
onAdd,
|
|
70
|
+
api,
|
|
71
|
+
options,
|
|
72
|
+
renderSelectedItem,
|
|
73
|
+
renderItem,
|
|
74
|
+
renderOptions,
|
|
75
|
+
getSearchProps,
|
|
76
|
+
searchPlaceholder
|
|
77
|
+
} = _ref,
|
|
78
|
+
props = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
79
|
+
const [value, onChange] = useControllerValue__default["default"](props);
|
|
80
|
+
const [searchProps, setSearchProps] = React.useState({});
|
|
81
|
+
const {
|
|
82
|
+
formatMessage
|
|
83
|
+
} = reactIntl.useIntl();
|
|
84
|
+
const ref = React.useRef(null);
|
|
85
|
+
return /*#__PURE__*/React__default["default"].createElement(antd.Flex, {
|
|
86
|
+
vertical: true,
|
|
87
|
+
gap: 8,
|
|
88
|
+
className: style['entry-selector']
|
|
89
|
+
}, typeof onAdd === 'function' && /*#__PURE__*/React__default["default"].createElement(antd.Flex, null, /*#__PURE__*/React__default["default"].createElement(antd.Button, {
|
|
90
|
+
shape: "round",
|
|
91
|
+
size: "small",
|
|
92
|
+
type: "primary",
|
|
93
|
+
onClick: () => {
|
|
94
|
+
onAdd({
|
|
95
|
+
fetchApi: ref.current,
|
|
96
|
+
value,
|
|
97
|
+
onChange
|
|
98
|
+
});
|
|
99
|
+
}
|
|
100
|
+
}, formatMessage({
|
|
101
|
+
id: 'add'
|
|
102
|
+
}))), /*#__PURE__*/React__default["default"].createElement(scrollLoader.FetchScrollLoader, _extends({}, props, {
|
|
103
|
+
completeTips: null,
|
|
104
|
+
searchProps: searchProps,
|
|
105
|
+
getSearchProps: getSearchProps,
|
|
106
|
+
api: api,
|
|
107
|
+
ref: ref,
|
|
108
|
+
className: style['list-scroll'],
|
|
109
|
+
autoHide: false,
|
|
110
|
+
render: _ref2 => {
|
|
111
|
+
let {
|
|
112
|
+
fetchApi,
|
|
113
|
+
children
|
|
114
|
+
} = _ref2;
|
|
115
|
+
const {
|
|
116
|
+
data
|
|
117
|
+
} = fetchApi;
|
|
118
|
+
const {
|
|
119
|
+
pageData,
|
|
120
|
+
totalCount
|
|
121
|
+
} = Object.assign({}, {
|
|
122
|
+
pageData: [],
|
|
123
|
+
totalCount: 0
|
|
124
|
+
}, data);
|
|
125
|
+
const listMapping = new Map(pageData.map(item => [item.id, item]));
|
|
126
|
+
const currentList = (value || []).map(_ref3 => {
|
|
127
|
+
let {
|
|
128
|
+
id
|
|
129
|
+
} = _ref3;
|
|
130
|
+
return listMapping.get(id);
|
|
131
|
+
}).filter(item => !!item);
|
|
132
|
+
return /*#__PURE__*/React__default["default"].createElement(antd.Row, {
|
|
133
|
+
gutter: [12, 12]
|
|
134
|
+
}, /*#__PURE__*/React__default["default"].createElement(antd.Col, {
|
|
135
|
+
span: totalCount > 0 ? 12 : 24
|
|
136
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
137
|
+
className: style['list-outer']
|
|
138
|
+
}, totalCount > 0 && /*#__PURE__*/React__default["default"].createElement("div", {
|
|
139
|
+
className: style['list-header']
|
|
140
|
+
}, formatMessage({
|
|
141
|
+
id: 'selected'
|
|
142
|
+
})), /*#__PURE__*/React__default["default"].createElement(SimpleBar__default["default"], {
|
|
143
|
+
className: style['list-scroll'],
|
|
144
|
+
autoHide: false
|
|
145
|
+
}, value && value.length > 0 ? /*#__PURE__*/React__default["default"].createElement(antd.List, {
|
|
146
|
+
className: style['list'],
|
|
147
|
+
size: "small"
|
|
148
|
+
}, /*#__PURE__*/React__default["default"].createElement(reactSortablejs.ReactSortable, {
|
|
149
|
+
filter: ".ignore-elements",
|
|
150
|
+
dragClass: style['sortable-drag'],
|
|
151
|
+
ghostClass: style['sortable-ghost'],
|
|
152
|
+
forceFallback: true,
|
|
153
|
+
animation: 300,
|
|
154
|
+
delayOnTouchStart: true,
|
|
155
|
+
delay: 2,
|
|
156
|
+
list: currentList,
|
|
157
|
+
setList: list => {
|
|
158
|
+
onChange(value => {
|
|
159
|
+
const mapping = new Map((value || []).map(item => [item.id, item]));
|
|
160
|
+
return list.map(_ref4 => {
|
|
161
|
+
let {
|
|
162
|
+
id
|
|
163
|
+
} = _ref4;
|
|
164
|
+
return mapping.get(id);
|
|
165
|
+
});
|
|
166
|
+
});
|
|
167
|
+
}
|
|
168
|
+
}, (value || []).map(_ref5 => {
|
|
169
|
+
let {
|
|
170
|
+
id
|
|
171
|
+
} = _ref5;
|
|
172
|
+
return listMapping.get(id);
|
|
173
|
+
}).filter(item => !!item).map((item, index) => {
|
|
174
|
+
const defaultItem = /*#__PURE__*/React__default["default"].createElement("span", {
|
|
175
|
+
className: 'list-item-title'
|
|
176
|
+
}, item.title);
|
|
177
|
+
const mapping = new Map((value || []).map(item => [item.id, item]));
|
|
178
|
+
return /*#__PURE__*/React__default["default"].createElement(antd.List.Item, {
|
|
179
|
+
key: item.id,
|
|
180
|
+
className: classnames__default["default"](style['columns-control-content-item'], style['is-drag'])
|
|
181
|
+
}, /*#__PURE__*/React__default["default"].createElement(icons.HolderOutlined, {
|
|
182
|
+
className: style['columns-control-content-item-icon']
|
|
183
|
+
}), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
184
|
+
className: style['list-index']
|
|
185
|
+
}, index + 1), /*#__PURE__*/React__default["default"].createElement(antd.Flex, {
|
|
186
|
+
vertical: true,
|
|
187
|
+
flex: 1
|
|
188
|
+
}, typeof renderSelectedItem === 'function' ? renderSelectedItem(mapping.get(item.id), {
|
|
189
|
+
el: defaultItem,
|
|
190
|
+
target: item,
|
|
191
|
+
fetchApi,
|
|
192
|
+
onChange: item => {
|
|
193
|
+
return onChange(value => {
|
|
194
|
+
const newValue = (value || []).slice(0);
|
|
195
|
+
const index = newValue.findIndex(_ref6 => {
|
|
196
|
+
let {
|
|
197
|
+
id
|
|
198
|
+
} = _ref6;
|
|
199
|
+
return id === item.id;
|
|
200
|
+
});
|
|
201
|
+
const currentItem = newValue[index];
|
|
202
|
+
if (index > -1) {
|
|
203
|
+
newValue.splice(index, 1, Object.assign({}, typeof item === 'function' ? item(currentItem) : item));
|
|
204
|
+
}
|
|
205
|
+
return newValue;
|
|
206
|
+
});
|
|
207
|
+
}
|
|
208
|
+
}) : defaultItem));
|
|
209
|
+
}))) : /*#__PURE__*/React__default["default"].createElement(antd.Flex, {
|
|
210
|
+
className: style['list'],
|
|
211
|
+
justify: "center",
|
|
212
|
+
align: "center"
|
|
213
|
+
}, /*#__PURE__*/React__default["default"].createElement(antd.Empty, null))))), totalCount > 0 && /*#__PURE__*/React__default["default"].createElement(antd.Col, {
|
|
214
|
+
span: 12
|
|
215
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
216
|
+
className: style['list-outer']
|
|
217
|
+
}, /*#__PURE__*/React__default["default"].createElement(antd.Flex, {
|
|
218
|
+
className: style['list-header'],
|
|
219
|
+
justify: "space-between"
|
|
220
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
221
|
+
className: style['list-header-title']
|
|
222
|
+
}, formatMessage({
|
|
223
|
+
id: 'list'
|
|
224
|
+
})), /*#__PURE__*/React__default["default"].createElement("div", null, typeof getSearchProps === 'function' && /*#__PURE__*/React__default["default"].createElement(SearchInput__default["default"], {
|
|
225
|
+
size: "small",
|
|
226
|
+
placeholder: searchPlaceholder || formatMessage({
|
|
227
|
+
id: 'searchPlaceholder'
|
|
228
|
+
}),
|
|
229
|
+
value: searchProps.searchText,
|
|
230
|
+
onSearch: value => {
|
|
231
|
+
setSearchProps(searchProps => Object.assign({}, searchProps, {
|
|
232
|
+
searchText: value
|
|
233
|
+
}));
|
|
234
|
+
}
|
|
235
|
+
}))), children)));
|
|
236
|
+
}
|
|
237
|
+
}), _ref7 => {
|
|
238
|
+
let {
|
|
239
|
+
fetchApi,
|
|
240
|
+
list
|
|
241
|
+
} = _ref7;
|
|
242
|
+
const targetOptions = typeof renderOptions === 'function' ? renderOptions({
|
|
243
|
+
fetchApi,
|
|
244
|
+
options
|
|
245
|
+
}) : options;
|
|
246
|
+
return /*#__PURE__*/React__default["default"].createElement(antd.List, {
|
|
247
|
+
className: classnames__default["default"](style['list'], style['list-lib']),
|
|
248
|
+
size: "small",
|
|
249
|
+
dataSource: list,
|
|
250
|
+
renderItem: item => {
|
|
251
|
+
const defaultItem = /*#__PURE__*/React__default["default"].createElement("span", {
|
|
252
|
+
className: 'list-item-title'
|
|
253
|
+
}, item.title);
|
|
254
|
+
return /*#__PURE__*/React__default["default"].createElement(antd.List.Item, {
|
|
255
|
+
key: item.id,
|
|
256
|
+
onClick: () => {
|
|
257
|
+
onChange(value => {
|
|
258
|
+
const newValue = (value || []).slice(0);
|
|
259
|
+
const index = newValue.findIndex(_ref8 => {
|
|
260
|
+
let {
|
|
261
|
+
id
|
|
262
|
+
} = _ref8;
|
|
263
|
+
return id === item.id;
|
|
264
|
+
});
|
|
265
|
+
if (index > -1) {
|
|
266
|
+
newValue.splice(index, 1);
|
|
267
|
+
} else {
|
|
268
|
+
newValue.push({
|
|
269
|
+
id: item.id
|
|
270
|
+
});
|
|
271
|
+
}
|
|
272
|
+
return newValue;
|
|
273
|
+
});
|
|
274
|
+
}
|
|
275
|
+
}, /*#__PURE__*/React__default["default"].createElement(antd.Checkbox, {
|
|
276
|
+
checked: (value || []).findIndex(_ref9 => {
|
|
277
|
+
let {
|
|
278
|
+
id
|
|
279
|
+
} = _ref9;
|
|
280
|
+
return id === item.id;
|
|
281
|
+
}) > -1
|
|
282
|
+
}), /*#__PURE__*/React__default["default"].createElement(antd.Flex, {
|
|
283
|
+
vertical: true,
|
|
284
|
+
flex: 1
|
|
285
|
+
}, typeof renderItem === 'function' ? renderItem(item, {
|
|
286
|
+
fetchApi,
|
|
287
|
+
el: defaultItem
|
|
288
|
+
}) : defaultItem), targetOptions && /*#__PURE__*/React__default["default"].createElement(antd.Flex, {
|
|
289
|
+
flex: '0 0 50px',
|
|
290
|
+
onClick: e => {
|
|
291
|
+
e.stopPropagation();
|
|
292
|
+
}
|
|
293
|
+
}, /*#__PURE__*/React__default["default"].createElement(ButtonGroup__default["default"], {
|
|
294
|
+
more: /*#__PURE__*/React__default["default"].createElement(antd.Button, {
|
|
295
|
+
type: "link",
|
|
296
|
+
icon: /*#__PURE__*/React__default["default"].createElement(icons.MoreOutlined, null)
|
|
297
|
+
}),
|
|
298
|
+
list: targetOptions
|
|
299
|
+
})));
|
|
300
|
+
}
|
|
301
|
+
});
|
|
302
|
+
}));
|
|
303
|
+
});
|
|
304
|
+
|
|
305
|
+
module.exports = EntrySelector;
|
|
306
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../src/locale/zh-CN.js","../src/locale/en-US.js","../src/index.js"],"sourcesContent":["const locale = {\n add: '添加',\n selected: '已选择',\n list: '列表',\n searchPlaceholder: '请输入关键字'\n};\n\nexport default locale;\n","const locale = {\n add: 'Add',\n selected: 'Selected',\n list: 'List',\n searchPlaceholder: 'Please input keyword'\n};\n\nexport default locale;\n","import React, { useRef, useState } from 'react';\nimport zhCn from './locale/zh-CN';\nimport enUS from './locale/en-US';\nimport { ReactSortable } from 'react-sortablejs';\nimport { createWithIntlProvider, useIntl } from '@kne/react-intl';\nimport { MoreOutlined, HolderOutlined } from '@ant-design/icons';\nimport ButtonGroup from '@kne/button-group';\nimport useControllerValue from '@kne/use-control-value';\nimport { FetchScrollLoader } from '@kne/scroll-loader';\nimport classnames from 'classnames';\nimport SearchInput from '@kne/search-input';\nimport { Flex, Button, Row, Col, List, Empty, Checkbox } from 'antd';\nimport SimpleBar from 'simplebar-react';\nimport 'simplebar/dist/simplebar.min.css';\nimport '@kne/button-group/dist/index.css';\nimport style from './style.module.scss';\n\nconst EntrySelector = createWithIntlProvider({\n defaultLocale: 'zh-CN',\n messages: {\n 'zh-CN': zhCn,\n 'en-US': enUS\n },\n namespace: 'entry-selector'\n})(({ onAdd, api, options, renderSelectedItem, renderItem, renderOptions, getSearchProps, searchPlaceholder, ...props }) => {\n const [value, onChange] = useControllerValue(props);\n const [searchProps, setSearchProps] = useState({});\n const { formatMessage } = useIntl();\n const ref = useRef(null);\n return (\n <Flex vertical gap={8} className={style['entry-selector']}>\n {typeof onAdd === 'function' && (\n <Flex>\n <Button\n shape=\"round\"\n size=\"small\"\n type=\"primary\"\n onClick={() => {\n onAdd({ fetchApi: ref.current, value, onChange });\n }}\n >\n {formatMessage({ id: 'add' })}\n </Button>\n </Flex>\n )}\n <FetchScrollLoader\n {...props}\n completeTips={null}\n searchProps={searchProps}\n getSearchProps={getSearchProps}\n api={api}\n ref={ref}\n className={style['list-scroll']}\n autoHide={false}\n render={({ fetchApi, children }) => {\n const { data } = fetchApi;\n const { pageData, totalCount } = Object.assign(\n {},\n {\n pageData: [],\n totalCount: 0\n },\n data\n );\n const listMapping = new Map(pageData.map(item => [item.id, item]));\n const currentList = (value || []).map(({ id }) => listMapping.get(id)).filter(item => !!item);\n return (\n <Row gutter={[12, 12]}>\n <Col span={totalCount > 0 ? 12 : 24}>\n <div className={style['list-outer']}>\n {totalCount > 0 && <div className={style['list-header']}>{formatMessage({ id: 'selected' })}</div>}\n <SimpleBar className={style['list-scroll']} autoHide={false}>\n {value && value.length > 0 ? (\n <List className={style['list']} size=\"small\">\n <ReactSortable\n filter=\".ignore-elements\"\n dragClass={style['sortable-drag']}\n ghostClass={style['sortable-ghost']}\n forceFallback\n animation={300}\n delayOnTouchStart\n delay={2}\n list={currentList}\n setList={list => {\n onChange(value => {\n const mapping = new Map((value || []).map(item => [item.id, item]));\n return list.map(({ id }) => {\n return mapping.get(id);\n });\n });\n }}\n >\n {(value || [])\n .map(({ id }) => listMapping.get(id))\n .filter(item => !!item)\n .map((item, index) => {\n const defaultItem = <span className={'list-item-title'}>{item.title}</span>;\n const mapping = new Map((value || []).map(item => [item.id, item]));\n return (\n <List.Item key={item.id} className={classnames(style['columns-control-content-item'], style['is-drag'])}>\n <HolderOutlined className={style['columns-control-content-item-icon']} />\n <div className={style['list-index']}>{index + 1}</div>\n <Flex vertical flex={1}>\n {typeof renderSelectedItem === 'function'\n ? renderSelectedItem(mapping.get(item.id), {\n el: defaultItem,\n target: item,\n fetchApi,\n onChange: item => {\n return onChange(value => {\n const newValue = (value || []).slice(0);\n const index = newValue.findIndex(({ id }) => id === item.id);\n const currentItem = newValue[index];\n if (index > -1) {\n newValue.splice(index, 1, Object.assign({}, typeof item === 'function' ? item(currentItem) : item));\n }\n return newValue;\n });\n }\n })\n : defaultItem}\n </Flex>\n </List.Item>\n );\n })}\n </ReactSortable>\n </List>\n ) : (\n <Flex className={style['list']} justify=\"center\" align=\"center\">\n <Empty />\n </Flex>\n )}\n </SimpleBar>\n </div>\n </Col>\n {totalCount > 0 && (\n <Col span={12}>\n <div className={style['list-outer']}>\n <Flex className={style['list-header']} justify=\"space-between\">\n <div className={style['list-header-title']}>{formatMessage({ id: 'list' })}</div>\n <div>\n {typeof getSearchProps === 'function' && (\n <SearchInput\n size=\"small\"\n placeholder={searchPlaceholder || formatMessage({ id: 'searchPlaceholder' })}\n value={searchProps.searchText}\n onSearch={value => {\n setSearchProps(searchProps => Object.assign({}, searchProps, { searchText: value }));\n }}\n />\n )}\n </div>\n </Flex>\n {children}\n </div>\n </Col>\n )}\n </Row>\n );\n }}\n >\n {({ fetchApi, list }) => {\n const targetOptions = typeof renderOptions === 'function' ? renderOptions({ fetchApi, options }) : options;\n return (\n <List\n className={classnames(style['list'], style['list-lib'])}\n size=\"small\"\n dataSource={list}\n renderItem={item => {\n const defaultItem = <span className={'list-item-title'}>{item.title}</span>;\n return (\n <List.Item\n key={item.id}\n onClick={() => {\n onChange(value => {\n const newValue = (value || []).slice(0);\n const index = newValue.findIndex(({ id }) => id === item.id);\n if (index > -1) {\n newValue.splice(index, 1);\n } else {\n newValue.push({ id: item.id });\n }\n\n return newValue;\n });\n }}\n >\n <Checkbox checked={(value || []).findIndex(({ id }) => id === item.id) > -1} />\n <Flex vertical flex={1}>\n {typeof renderItem === 'function'\n ? renderItem(item, {\n fetchApi,\n el: defaultItem\n })\n : defaultItem}\n </Flex>\n {targetOptions && (\n <Flex\n flex={'0 0 50px'}\n onClick={e => {\n e.stopPropagation();\n }}\n >\n <ButtonGroup more={<Button type=\"link\" icon={<MoreOutlined />} />} list={targetOptions} />\n </Flex>\n )}\n </List.Item>\n );\n }}\n />\n );\n }}\n </FetchScrollLoader>\n </Flex>\n );\n});\n\nexport default EntrySelector;\n"],"names":["locale","add","selected","list","searchPlaceholder","EntrySelector","createWithIntlProvider","defaultLocale","messages","zhCn","enUS","namespace","_ref","onAdd","api","options","renderSelectedItem","renderItem","renderOptions","getSearchProps","props","_objectWithoutPropertiesLoose","_excluded","value","onChange","useControllerValue","searchProps","setSearchProps","useState","formatMessage","useIntl","ref","useRef","React","createElement","Flex","vertical","gap","className","style","Button","shape","size","type","onClick","fetchApi","current","id","FetchScrollLoader","_extends","completeTips","autoHide","render","_ref2","children","data","pageData","totalCount","Object","assign","listMapping","Map","map","item","currentList","_ref3","get","filter","Row","gutter","Col","span","SimpleBar","length","List","ReactSortable","dragClass","ghostClass","forceFallback","animation","delayOnTouchStart","delay","setList","mapping","_ref4","_ref5","index","defaultItem","title","Item","key","classnames","HolderOutlined","flex","el","target","newValue","slice","findIndex","_ref6","currentItem","splice","justify","align","Empty","SearchInput","placeholder","searchText","onSearch","_ref7","targetOptions","dataSource","_ref8","push","Checkbox","checked","_ref9","e","stopPropagation","ButtonGroup","more","icon","MoreOutlined"],"mappings":"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"}
|
|
@@ -0,0 +1,279 @@
|
|
|
1
|
+
import React, { useState, useRef } from 'react';
|
|
2
|
+
import { ReactSortable } from 'react-sortablejs';
|
|
3
|
+
import { createWithIntlProvider, useIntl } from '@kne/react-intl';
|
|
4
|
+
import { MoreOutlined, HolderOutlined } from '@ant-design/icons';
|
|
5
|
+
import ButtonGroup from '@kne/button-group';
|
|
6
|
+
import useControllerValue from '@kne/use-control-value';
|
|
7
|
+
import { FetchScrollLoader } from '@kne/scroll-loader';
|
|
8
|
+
import classnames from 'classnames';
|
|
9
|
+
import SearchInput from '@kne/search-input';
|
|
10
|
+
import { Flex, Button, List, Checkbox, Row, Col, Empty } from 'antd';
|
|
11
|
+
import SimpleBar from 'simplebar-react';
|
|
12
|
+
import 'simplebar/dist/simplebar.min.css';
|
|
13
|
+
import '@kne/button-group/dist/index.css';
|
|
14
|
+
|
|
15
|
+
function _extends() {
|
|
16
|
+
return _extends = Object.assign ? Object.assign.bind() : function (n) {
|
|
17
|
+
for (var e = 1; e < arguments.length; e++) {
|
|
18
|
+
var t = arguments[e];
|
|
19
|
+
for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
|
|
20
|
+
}
|
|
21
|
+
return n;
|
|
22
|
+
}, _extends.apply(null, arguments);
|
|
23
|
+
}
|
|
24
|
+
function _objectWithoutPropertiesLoose(r, e) {
|
|
25
|
+
if (null == r) return {};
|
|
26
|
+
var t = {};
|
|
27
|
+
for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
|
|
28
|
+
if (-1 !== e.indexOf(n)) continue;
|
|
29
|
+
t[n] = r[n];
|
|
30
|
+
}
|
|
31
|
+
return t;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
const locale$1 = {
|
|
35
|
+
add: '添加',
|
|
36
|
+
selected: '已选择',
|
|
37
|
+
list: '列表',
|
|
38
|
+
searchPlaceholder: '请输入关键字'
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
const locale = {
|
|
42
|
+
add: 'Add',
|
|
43
|
+
selected: 'Selected',
|
|
44
|
+
list: 'List',
|
|
45
|
+
searchPlaceholder: 'Please input keyword'
|
|
46
|
+
};
|
|
47
|
+
|
|
48
|
+
var style = {"entry-selector":"_TIU4-","list-outer":"_ZXEhy","list-header":"_HAF3g","list-scroll":"_VO7i-","list":"_8w58c","list-lib":"_9m0I0","list-index":"_P8KYX","columns-control-content-list":"_agPfO","columns-control-content-item":"_iFzfk","is-drag":"_uB1q2","columns-control-content-item-icon":"_WHlyH","sortable-drag":"_dxhFH","sortable-ghost":"_7ZIH8"};
|
|
49
|
+
|
|
50
|
+
const _excluded = ["onAdd", "api", "options", "renderSelectedItem", "renderItem", "renderOptions", "getSearchProps", "searchPlaceholder"];
|
|
51
|
+
const EntrySelector = createWithIntlProvider({
|
|
52
|
+
defaultLocale: 'zh-CN',
|
|
53
|
+
messages: {
|
|
54
|
+
'zh-CN': locale$1,
|
|
55
|
+
'en-US': locale
|
|
56
|
+
},
|
|
57
|
+
namespace: 'entry-selector'
|
|
58
|
+
})(_ref => {
|
|
59
|
+
let {
|
|
60
|
+
onAdd,
|
|
61
|
+
api,
|
|
62
|
+
options,
|
|
63
|
+
renderSelectedItem,
|
|
64
|
+
renderItem,
|
|
65
|
+
renderOptions,
|
|
66
|
+
getSearchProps,
|
|
67
|
+
searchPlaceholder
|
|
68
|
+
} = _ref,
|
|
69
|
+
props = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
70
|
+
const [value, onChange] = useControllerValue(props);
|
|
71
|
+
const [searchProps, setSearchProps] = useState({});
|
|
72
|
+
const {
|
|
73
|
+
formatMessage
|
|
74
|
+
} = useIntl();
|
|
75
|
+
const ref = useRef(null);
|
|
76
|
+
return /*#__PURE__*/React.createElement(Flex, {
|
|
77
|
+
vertical: true,
|
|
78
|
+
gap: 8,
|
|
79
|
+
className: style['entry-selector']
|
|
80
|
+
}, typeof onAdd === 'function' && /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Button, {
|
|
81
|
+
shape: "round",
|
|
82
|
+
size: "small",
|
|
83
|
+
type: "primary",
|
|
84
|
+
onClick: () => {
|
|
85
|
+
onAdd({
|
|
86
|
+
fetchApi: ref.current,
|
|
87
|
+
value,
|
|
88
|
+
onChange
|
|
89
|
+
});
|
|
90
|
+
}
|
|
91
|
+
}, formatMessage({
|
|
92
|
+
id: 'add'
|
|
93
|
+
}))), /*#__PURE__*/React.createElement(FetchScrollLoader, _extends({}, props, {
|
|
94
|
+
completeTips: null,
|
|
95
|
+
searchProps: searchProps,
|
|
96
|
+
getSearchProps: getSearchProps,
|
|
97
|
+
api: api,
|
|
98
|
+
ref: ref,
|
|
99
|
+
className: style['list-scroll'],
|
|
100
|
+
autoHide: false,
|
|
101
|
+
render: ({
|
|
102
|
+
fetchApi,
|
|
103
|
+
children
|
|
104
|
+
}) => {
|
|
105
|
+
const {
|
|
106
|
+
data
|
|
107
|
+
} = fetchApi;
|
|
108
|
+
const {
|
|
109
|
+
pageData,
|
|
110
|
+
totalCount
|
|
111
|
+
} = Object.assign({}, {
|
|
112
|
+
pageData: [],
|
|
113
|
+
totalCount: 0
|
|
114
|
+
}, data);
|
|
115
|
+
const listMapping = new Map(pageData.map(item => [item.id, item]));
|
|
116
|
+
const currentList = (value || []).map(({
|
|
117
|
+
id
|
|
118
|
+
}) => listMapping.get(id)).filter(item => !!item);
|
|
119
|
+
return /*#__PURE__*/React.createElement(Row, {
|
|
120
|
+
gutter: [12, 12]
|
|
121
|
+
}, /*#__PURE__*/React.createElement(Col, {
|
|
122
|
+
span: totalCount > 0 ? 12 : 24
|
|
123
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
124
|
+
className: style['list-outer']
|
|
125
|
+
}, totalCount > 0 && /*#__PURE__*/React.createElement("div", {
|
|
126
|
+
className: style['list-header']
|
|
127
|
+
}, formatMessage({
|
|
128
|
+
id: 'selected'
|
|
129
|
+
})), /*#__PURE__*/React.createElement(SimpleBar, {
|
|
130
|
+
className: style['list-scroll'],
|
|
131
|
+
autoHide: false
|
|
132
|
+
}, value && value.length > 0 ? /*#__PURE__*/React.createElement(List, {
|
|
133
|
+
className: style['list'],
|
|
134
|
+
size: "small"
|
|
135
|
+
}, /*#__PURE__*/React.createElement(ReactSortable, {
|
|
136
|
+
filter: ".ignore-elements",
|
|
137
|
+
dragClass: style['sortable-drag'],
|
|
138
|
+
ghostClass: style['sortable-ghost'],
|
|
139
|
+
forceFallback: true,
|
|
140
|
+
animation: 300,
|
|
141
|
+
delayOnTouchStart: true,
|
|
142
|
+
delay: 2,
|
|
143
|
+
list: currentList,
|
|
144
|
+
setList: list => {
|
|
145
|
+
onChange(value => {
|
|
146
|
+
const mapping = new Map((value || []).map(item => [item.id, item]));
|
|
147
|
+
return list.map(({
|
|
148
|
+
id
|
|
149
|
+
}) => {
|
|
150
|
+
return mapping.get(id);
|
|
151
|
+
});
|
|
152
|
+
});
|
|
153
|
+
}
|
|
154
|
+
}, (value || []).map(({
|
|
155
|
+
id
|
|
156
|
+
}) => listMapping.get(id)).filter(item => !!item).map((item, index) => {
|
|
157
|
+
const defaultItem = /*#__PURE__*/React.createElement("span", {
|
|
158
|
+
className: 'list-item-title'
|
|
159
|
+
}, item.title);
|
|
160
|
+
const mapping = new Map((value || []).map(item => [item.id, item]));
|
|
161
|
+
return /*#__PURE__*/React.createElement(List.Item, {
|
|
162
|
+
key: item.id,
|
|
163
|
+
className: classnames(style['columns-control-content-item'], style['is-drag'])
|
|
164
|
+
}, /*#__PURE__*/React.createElement(HolderOutlined, {
|
|
165
|
+
className: style['columns-control-content-item-icon']
|
|
166
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
167
|
+
className: style['list-index']
|
|
168
|
+
}, index + 1), /*#__PURE__*/React.createElement(Flex, {
|
|
169
|
+
vertical: true,
|
|
170
|
+
flex: 1
|
|
171
|
+
}, typeof renderSelectedItem === 'function' ? renderSelectedItem(mapping.get(item.id), {
|
|
172
|
+
el: defaultItem,
|
|
173
|
+
target: item,
|
|
174
|
+
fetchApi,
|
|
175
|
+
onChange: item => {
|
|
176
|
+
return onChange(value => {
|
|
177
|
+
const newValue = (value || []).slice(0);
|
|
178
|
+
const index = newValue.findIndex(({
|
|
179
|
+
id
|
|
180
|
+
}) => id === item.id);
|
|
181
|
+
const currentItem = newValue[index];
|
|
182
|
+
if (index > -1) {
|
|
183
|
+
newValue.splice(index, 1, Object.assign({}, typeof item === 'function' ? item(currentItem) : item));
|
|
184
|
+
}
|
|
185
|
+
return newValue;
|
|
186
|
+
});
|
|
187
|
+
}
|
|
188
|
+
}) : defaultItem));
|
|
189
|
+
}))) : /*#__PURE__*/React.createElement(Flex, {
|
|
190
|
+
className: style['list'],
|
|
191
|
+
justify: "center",
|
|
192
|
+
align: "center"
|
|
193
|
+
}, /*#__PURE__*/React.createElement(Empty, null))))), totalCount > 0 && /*#__PURE__*/React.createElement(Col, {
|
|
194
|
+
span: 12
|
|
195
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
196
|
+
className: style['list-outer']
|
|
197
|
+
}, /*#__PURE__*/React.createElement(Flex, {
|
|
198
|
+
className: style['list-header'],
|
|
199
|
+
justify: "space-between"
|
|
200
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
201
|
+
className: style['list-header-title']
|
|
202
|
+
}, formatMessage({
|
|
203
|
+
id: 'list'
|
|
204
|
+
})), /*#__PURE__*/React.createElement("div", null, typeof getSearchProps === 'function' && /*#__PURE__*/React.createElement(SearchInput, {
|
|
205
|
+
size: "small",
|
|
206
|
+
placeholder: searchPlaceholder || formatMessage({
|
|
207
|
+
id: 'searchPlaceholder'
|
|
208
|
+
}),
|
|
209
|
+
value: searchProps.searchText,
|
|
210
|
+
onSearch: value => {
|
|
211
|
+
setSearchProps(searchProps => Object.assign({}, searchProps, {
|
|
212
|
+
searchText: value
|
|
213
|
+
}));
|
|
214
|
+
}
|
|
215
|
+
}))), children)));
|
|
216
|
+
}
|
|
217
|
+
}), ({
|
|
218
|
+
fetchApi,
|
|
219
|
+
list
|
|
220
|
+
}) => {
|
|
221
|
+
const targetOptions = typeof renderOptions === 'function' ? renderOptions({
|
|
222
|
+
fetchApi,
|
|
223
|
+
options
|
|
224
|
+
}) : options;
|
|
225
|
+
return /*#__PURE__*/React.createElement(List, {
|
|
226
|
+
className: classnames(style['list'], style['list-lib']),
|
|
227
|
+
size: "small",
|
|
228
|
+
dataSource: list,
|
|
229
|
+
renderItem: item => {
|
|
230
|
+
const defaultItem = /*#__PURE__*/React.createElement("span", {
|
|
231
|
+
className: 'list-item-title'
|
|
232
|
+
}, item.title);
|
|
233
|
+
return /*#__PURE__*/React.createElement(List.Item, {
|
|
234
|
+
key: item.id,
|
|
235
|
+
onClick: () => {
|
|
236
|
+
onChange(value => {
|
|
237
|
+
const newValue = (value || []).slice(0);
|
|
238
|
+
const index = newValue.findIndex(({
|
|
239
|
+
id
|
|
240
|
+
}) => id === item.id);
|
|
241
|
+
if (index > -1) {
|
|
242
|
+
newValue.splice(index, 1);
|
|
243
|
+
} else {
|
|
244
|
+
newValue.push({
|
|
245
|
+
id: item.id
|
|
246
|
+
});
|
|
247
|
+
}
|
|
248
|
+
return newValue;
|
|
249
|
+
});
|
|
250
|
+
}
|
|
251
|
+
}, /*#__PURE__*/React.createElement(Checkbox, {
|
|
252
|
+
checked: (value || []).findIndex(({
|
|
253
|
+
id
|
|
254
|
+
}) => id === item.id) > -1
|
|
255
|
+
}), /*#__PURE__*/React.createElement(Flex, {
|
|
256
|
+
vertical: true,
|
|
257
|
+
flex: 1
|
|
258
|
+
}, typeof renderItem === 'function' ? renderItem(item, {
|
|
259
|
+
fetchApi,
|
|
260
|
+
el: defaultItem
|
|
261
|
+
}) : defaultItem), targetOptions && /*#__PURE__*/React.createElement(Flex, {
|
|
262
|
+
flex: '0 0 50px',
|
|
263
|
+
onClick: e => {
|
|
264
|
+
e.stopPropagation();
|
|
265
|
+
}
|
|
266
|
+
}, /*#__PURE__*/React.createElement(ButtonGroup, {
|
|
267
|
+
more: /*#__PURE__*/React.createElement(Button, {
|
|
268
|
+
type: "link",
|
|
269
|
+
icon: /*#__PURE__*/React.createElement(MoreOutlined, null)
|
|
270
|
+
}),
|
|
271
|
+
list: targetOptions
|
|
272
|
+
})));
|
|
273
|
+
}
|
|
274
|
+
});
|
|
275
|
+
}));
|
|
276
|
+
});
|
|
277
|
+
|
|
278
|
+
export { EntrySelector as default };
|
|
279
|
+
//# sourceMappingURL=index.modern.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.modern.js","sources":["../src/locale/zh-CN.js","../src/locale/en-US.js","../src/index.js"],"sourcesContent":["const locale = {\n add: '添加',\n selected: '已选择',\n list: '列表',\n searchPlaceholder: '请输入关键字'\n};\n\nexport default locale;\n","const locale = {\n add: 'Add',\n selected: 'Selected',\n list: 'List',\n searchPlaceholder: 'Please input keyword'\n};\n\nexport default locale;\n","import React, { useRef, useState } from 'react';\nimport zhCn from './locale/zh-CN';\nimport enUS from './locale/en-US';\nimport { ReactSortable } from 'react-sortablejs';\nimport { createWithIntlProvider, useIntl } from '@kne/react-intl';\nimport { MoreOutlined, HolderOutlined } from '@ant-design/icons';\nimport ButtonGroup from '@kne/button-group';\nimport useControllerValue from '@kne/use-control-value';\nimport { FetchScrollLoader } from '@kne/scroll-loader';\nimport classnames from 'classnames';\nimport SearchInput from '@kne/search-input';\nimport { Flex, Button, Row, Col, List, Empty, Checkbox } from 'antd';\nimport SimpleBar from 'simplebar-react';\nimport 'simplebar/dist/simplebar.min.css';\nimport '@kne/button-group/dist/index.css';\nimport style from './style.module.scss';\n\nconst EntrySelector = createWithIntlProvider({\n defaultLocale: 'zh-CN',\n messages: {\n 'zh-CN': zhCn,\n 'en-US': enUS\n },\n namespace: 'entry-selector'\n})(({ onAdd, api, options, renderSelectedItem, renderItem, renderOptions, getSearchProps, searchPlaceholder, ...props }) => {\n const [value, onChange] = useControllerValue(props);\n const [searchProps, setSearchProps] = useState({});\n const { formatMessage } = useIntl();\n const ref = useRef(null);\n return (\n <Flex vertical gap={8} className={style['entry-selector']}>\n {typeof onAdd === 'function' && (\n <Flex>\n <Button\n shape=\"round\"\n size=\"small\"\n type=\"primary\"\n onClick={() => {\n onAdd({ fetchApi: ref.current, value, onChange });\n }}\n >\n {formatMessage({ id: 'add' })}\n </Button>\n </Flex>\n )}\n <FetchScrollLoader\n {...props}\n completeTips={null}\n searchProps={searchProps}\n getSearchProps={getSearchProps}\n api={api}\n ref={ref}\n className={style['list-scroll']}\n autoHide={false}\n render={({ fetchApi, children }) => {\n const { data } = fetchApi;\n const { pageData, totalCount } = Object.assign(\n {},\n {\n pageData: [],\n totalCount: 0\n },\n data\n );\n const listMapping = new Map(pageData.map(item => [item.id, item]));\n const currentList = (value || []).map(({ id }) => listMapping.get(id)).filter(item => !!item);\n return (\n <Row gutter={[12, 12]}>\n <Col span={totalCount > 0 ? 12 : 24}>\n <div className={style['list-outer']}>\n {totalCount > 0 && <div className={style['list-header']}>{formatMessage({ id: 'selected' })}</div>}\n <SimpleBar className={style['list-scroll']} autoHide={false}>\n {value && value.length > 0 ? (\n <List className={style['list']} size=\"small\">\n <ReactSortable\n filter=\".ignore-elements\"\n dragClass={style['sortable-drag']}\n ghostClass={style['sortable-ghost']}\n forceFallback\n animation={300}\n delayOnTouchStart\n delay={2}\n list={currentList}\n setList={list => {\n onChange(value => {\n const mapping = new Map((value || []).map(item => [item.id, item]));\n return list.map(({ id }) => {\n return mapping.get(id);\n });\n });\n }}\n >\n {(value || [])\n .map(({ id }) => listMapping.get(id))\n .filter(item => !!item)\n .map((item, index) => {\n const defaultItem = <span className={'list-item-title'}>{item.title}</span>;\n const mapping = new Map((value || []).map(item => [item.id, item]));\n return (\n <List.Item key={item.id} className={classnames(style['columns-control-content-item'], style['is-drag'])}>\n <HolderOutlined className={style['columns-control-content-item-icon']} />\n <div className={style['list-index']}>{index + 1}</div>\n <Flex vertical flex={1}>\n {typeof renderSelectedItem === 'function'\n ? renderSelectedItem(mapping.get(item.id), {\n el: defaultItem,\n target: item,\n fetchApi,\n onChange: item => {\n return onChange(value => {\n const newValue = (value || []).slice(0);\n const index = newValue.findIndex(({ id }) => id === item.id);\n const currentItem = newValue[index];\n if (index > -1) {\n newValue.splice(index, 1, Object.assign({}, typeof item === 'function' ? item(currentItem) : item));\n }\n return newValue;\n });\n }\n })\n : defaultItem}\n </Flex>\n </List.Item>\n );\n })}\n </ReactSortable>\n </List>\n ) : (\n <Flex className={style['list']} justify=\"center\" align=\"center\">\n <Empty />\n </Flex>\n )}\n </SimpleBar>\n </div>\n </Col>\n {totalCount > 0 && (\n <Col span={12}>\n <div className={style['list-outer']}>\n <Flex className={style['list-header']} justify=\"space-between\">\n <div className={style['list-header-title']}>{formatMessage({ id: 'list' })}</div>\n <div>\n {typeof getSearchProps === 'function' && (\n <SearchInput\n size=\"small\"\n placeholder={searchPlaceholder || formatMessage({ id: 'searchPlaceholder' })}\n value={searchProps.searchText}\n onSearch={value => {\n setSearchProps(searchProps => Object.assign({}, searchProps, { searchText: value }));\n }}\n />\n )}\n </div>\n </Flex>\n {children}\n </div>\n </Col>\n )}\n </Row>\n );\n }}\n >\n {({ fetchApi, list }) => {\n const targetOptions = typeof renderOptions === 'function' ? renderOptions({ fetchApi, options }) : options;\n return (\n <List\n className={classnames(style['list'], style['list-lib'])}\n size=\"small\"\n dataSource={list}\n renderItem={item => {\n const defaultItem = <span className={'list-item-title'}>{item.title}</span>;\n return (\n <List.Item\n key={item.id}\n onClick={() => {\n onChange(value => {\n const newValue = (value || []).slice(0);\n const index = newValue.findIndex(({ id }) => id === item.id);\n if (index > -1) {\n newValue.splice(index, 1);\n } else {\n newValue.push({ id: item.id });\n }\n\n return newValue;\n });\n }}\n >\n <Checkbox checked={(value || []).findIndex(({ id }) => id === item.id) > -1} />\n <Flex vertical flex={1}>\n {typeof renderItem === 'function'\n ? renderItem(item, {\n fetchApi,\n el: defaultItem\n })\n : defaultItem}\n </Flex>\n {targetOptions && (\n <Flex\n flex={'0 0 50px'}\n onClick={e => {\n e.stopPropagation();\n }}\n >\n <ButtonGroup more={<Button type=\"link\" icon={<MoreOutlined />} />} list={targetOptions} />\n </Flex>\n )}\n </List.Item>\n );\n }}\n />\n );\n }}\n </FetchScrollLoader>\n </Flex>\n );\n});\n\nexport default EntrySelector;\n"],"names":["locale","add","selected","list","searchPlaceholder","EntrySelector","createWithIntlProvider","defaultLocale","messages","zhCn","enUS","namespace","_ref","onAdd","api","options","renderSelectedItem","renderItem","renderOptions","getSearchProps","props","_objectWithoutPropertiesLoose","_excluded","value","onChange","useControllerValue","searchProps","setSearchProps","useState","formatMessage","useIntl","ref","useRef","React","createElement","Flex","vertical","gap","className","style","Button","shape","size","type","onClick","fetchApi","current","id","FetchScrollLoader","_extends","completeTips","autoHide","render","children","data","pageData","totalCount","Object","assign","listMapping","Map","map","item","currentList","get","filter","Row","gutter","Col","span","SimpleBar","length","List","ReactSortable","dragClass","ghostClass","forceFallback","animation","delayOnTouchStart","delay","setList","mapping","index","defaultItem","title","Item","key","classnames","HolderOutlined","flex","el","target","newValue","slice","findIndex","currentItem","splice","justify","align","Empty","SearchInput","placeholder","searchText","onSearch","targetOptions","dataSource","push","Checkbox","checked","e","stopPropagation","ButtonGroup","more","icon","MoreOutlined"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"en-US.js","sources":["../../src/locale/en-US.js"],"sourcesContent":["const locale = {\n add: 'Add',\n selected: 'Selected',\n list: 'List',\n searchPlaceholder: 'Please input keyword'\n};\n\nexport default locale;\n"],"names":["locale","add","selected","list","searchPlaceholder"],"mappings":"AAAA,MAAMA,MAAM,GAAG;AACbC,EAAAA,GAAG,EAAE,KAAK;AACVC,EAAAA,QAAQ,EAAE,UAAU;AACpBC,EAAAA,IAAI,EAAE,MAAM;AACZC,EAAAA,iBAAiB,EAAE,sBAAA;AACrB;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"en-US.modern.js","sources":["../../src/locale/en-US.js"],"sourcesContent":["const locale = {\n add: 'Add',\n selected: 'Selected',\n list: 'List',\n searchPlaceholder: 'Please input keyword'\n};\n\nexport default locale;\n"],"names":["locale","add","selected","list","searchPlaceholder"],"mappings":"AAAA,MAAMA,MAAM,GAAG;AACbC,EAAAA,GAAG,EAAE,KAAK;AACVC,EAAAA,QAAQ,EAAE,UAAU;AACpBC,EAAAA,IAAI,EAAE,MAAM;AACZC,EAAAA,iBAAiB,EAAE,sBAAA;AACrB;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"zh-CN.js","sources":["../../src/locale/zh-CN.js"],"sourcesContent":["const locale = {\n add: '添加',\n selected: '已选择',\n list: '列表',\n searchPlaceholder: '请输入关键字'\n};\n\nexport default locale;\n"],"names":["locale","add","selected","list","searchPlaceholder"],"mappings":"AAAA,MAAMA,MAAM,GAAG;AACbC,EAAAA,GAAG,EAAE,IAAI;AACTC,EAAAA,QAAQ,EAAE,KAAK;AACfC,EAAAA,IAAI,EAAE,IAAI;AACVC,EAAAA,iBAAiB,EAAE,QAAA;AACrB;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"zh-CN.modern.js","sources":["../../src/locale/zh-CN.js"],"sourcesContent":["const locale = {\n add: '添加',\n selected: '已选择',\n list: '列表',\n searchPlaceholder: '请输入关键字'\n};\n\nexport default locale;\n"],"names":["locale","add","selected","list","searchPlaceholder"],"mappings":"AAAA,MAAMA,MAAM,GAAG;AACbC,EAAAA,GAAG,EAAE,IAAI;AACTC,EAAAA,QAAQ,EAAE,KAAK;AACfC,EAAAA,IAAI,EAAE,IAAI;AACVC,EAAAA,iBAAiB,EAAE,QAAA;AACrB;;;;"}
|
package/package.json
ADDED
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@kne/entry-selector",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "EntrySelector是一个用于选择和管理条目列表的 React 组件。它提供了一个直观的界面,允许用户从可选列表中选择条目,并对已选条目进行管理,包括排序、搜索和删除等操作。",
|
|
5
|
+
"syntax": {
|
|
6
|
+
"esmodules": true
|
|
7
|
+
},
|
|
8
|
+
"main": "dist/index.js",
|
|
9
|
+
"module": "dist/index.modern.js",
|
|
10
|
+
"source": "src/index.js",
|
|
11
|
+
"scripts": {
|
|
12
|
+
"init": "husky && npm run init-example",
|
|
13
|
+
"start": "run-p start:lib start:md start:example",
|
|
14
|
+
"build": "run-s build:lib build:md build:example",
|
|
15
|
+
"init-example": "modules-dev-libs-init",
|
|
16
|
+
"build:md": "npx @kne/md-doc",
|
|
17
|
+
"start:md": "npx @kne/md-doc --watch",
|
|
18
|
+
"build:locale": "microbundle src/locale/*.js -o dist/locale --no-compress --format modern,cjs ",
|
|
19
|
+
"build:lib-main": "microbundle --no-compress --format modern,cjs --jsx React.createElement --jsxFragment React.Fragment",
|
|
20
|
+
"build:lib": "run-s build:locale build:lib-main",
|
|
21
|
+
"start:lib": "microbundle watch --no-compress --format modern,cjs --jsx React.createElement --jsxFragment React.Fragment",
|
|
22
|
+
"build:example": "cd example && npm run build",
|
|
23
|
+
"start:example": "cd example && npm run start",
|
|
24
|
+
"test:build": "run-s build",
|
|
25
|
+
"test:lint": "eslint .",
|
|
26
|
+
"test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
|
|
27
|
+
"test:watch": "react-scripts test --env=jsdom",
|
|
28
|
+
"prettier": "prettier --config .prettierrc --write '{src/**/*,index,prompts}.{js,jsx,ts,tsx,json,css,scss}'",
|
|
29
|
+
"lint-staged": "npx lint-staged"
|
|
30
|
+
},
|
|
31
|
+
"husky": {
|
|
32
|
+
"hooks": {
|
|
33
|
+
"pre-commit": "lint-staged"
|
|
34
|
+
}
|
|
35
|
+
},
|
|
36
|
+
"lint-staged": {
|
|
37
|
+
"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
|
|
38
|
+
"prettier --config .prettierrc --write",
|
|
39
|
+
"git add"
|
|
40
|
+
]
|
|
41
|
+
},
|
|
42
|
+
"files": [
|
|
43
|
+
"dist"
|
|
44
|
+
],
|
|
45
|
+
"repository": {
|
|
46
|
+
"type": "git",
|
|
47
|
+
"url": "git+https://github.com/kne-union/entry-selector.git"
|
|
48
|
+
},
|
|
49
|
+
"keywords": [],
|
|
50
|
+
"author": "linzp",
|
|
51
|
+
"license": "ISC",
|
|
52
|
+
"bugs": {
|
|
53
|
+
"url": "https://github.com/kne-union/entry-selector/issues"
|
|
54
|
+
},
|
|
55
|
+
"homepage": "https://github.com/kne-union/entry-selector",
|
|
56
|
+
"eslintConfig": {
|
|
57
|
+
"extends": [
|
|
58
|
+
"react-app",
|
|
59
|
+
"react-app/jest"
|
|
60
|
+
]
|
|
61
|
+
},
|
|
62
|
+
"browserslist": {
|
|
63
|
+
"production": [
|
|
64
|
+
">0.2%",
|
|
65
|
+
"not dead",
|
|
66
|
+
"not op_mini all"
|
|
67
|
+
],
|
|
68
|
+
"development": [
|
|
69
|
+
"last 1 chrome version",
|
|
70
|
+
"last 1 firefox version",
|
|
71
|
+
"last 1 safari version"
|
|
72
|
+
]
|
|
73
|
+
},
|
|
74
|
+
"peerDependencies": {
|
|
75
|
+
"antd": ">=5",
|
|
76
|
+
"react": "*",
|
|
77
|
+
"react-dom": "*"
|
|
78
|
+
},
|
|
79
|
+
"devDependencies": {
|
|
80
|
+
"@kne/microbundle": "^0.15.5",
|
|
81
|
+
"@kne/modules-dev": "^2.0.33",
|
|
82
|
+
"cross-env": "^7.0.3",
|
|
83
|
+
"husky": "^9.0.11",
|
|
84
|
+
"npm-run-all": "^4.1.5",
|
|
85
|
+
"prettier": "^3.2.5",
|
|
86
|
+
"react": "^18.2.0",
|
|
87
|
+
"react-dom": "^18.2.0"
|
|
88
|
+
},
|
|
89
|
+
"dependencies": {
|
|
90
|
+
"@ant-design/icons": "^6.0.0",
|
|
91
|
+
"@kne/button-group": "^0.1.16",
|
|
92
|
+
"@kne/react-fetch": "^1.5.5",
|
|
93
|
+
"@kne/react-intl": "^0.1.9",
|
|
94
|
+
"@kne/scroll-loader": "^0.1.9",
|
|
95
|
+
"@kne/search-input": "^0.1.0",
|
|
96
|
+
"@kne/use-control-value": "^0.1.9",
|
|
97
|
+
"classnames": "^2.5.1",
|
|
98
|
+
"react-sortablejs": "^6.1.4",
|
|
99
|
+
"simplebar": "^6.3.2",
|
|
100
|
+
"simplebar-react": "^3.3.2",
|
|
101
|
+
"sortablejs": "^1.15.6"
|
|
102
|
+
}
|
|
103
|
+
}
|