npm - @kne-components/entry-selector - Versions diffs - 0.1.2 → 0.1.4 - Mend

@kne-components/entry-selector 0.1.2 → 0.1.4

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 (27) hide show

package/build/static/js/268.787ddc9b.chunk.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"static/js/268.787ddc9b.chunk.js","mappings":"6LAGA,MCHiE,GAAgBA,cDG5D,CACjBC,KAAM,iBACNC,QAAS,+vEAqBTC,YAAa,2bACbC,YAAa,sBACbC,IAAK,ulIAqJLC,QAAS,CACLC,QAAQ,EACRC,UAAW,uBACXC,MAAO,uGAKPC,KAAM,CAAC,CACXC,MAAO,mDACPR,YAAa,mDACbS,KAAM,8sEAqENC,MAAO,CAAC,CACRZ,KAAM,iBACNG,YAAa,kCACbU,gBAAiB,wDACjBC,U,UACF,CACEd,KAAM,OACNG,YAAa,OACbW,U,gBCxQSC,EAAW,CAAC,KAAO,iBAAiB,QAAU,QAAQ,gBAAe,EAAK,aAAa,kBAAkB,QAAU,CAAC,CAAC,KAAO,iBAAiB,QAAU,kDAAkD,YAAc,2bAA6F,YAAc,wB","sources":["../../README.md","../node_modules/readme/modules.js"],"sourcesContent":["import * as component_1 from '@kne/current-lib_entry-selector';\nimport '@kne/current-lib_entry-selector/dist/index.css';\nimport * as component_3 from 'antd';\nconst readmeConfig = {\n name: `entry-selector`,\n summary: `<p>EntrySelector 是一个用于选择和管理条目列表的 React 组件。它提供了一个直观的界面，允许用户从可选列表中选择条目，并对已选条目进行管理，包括排序、搜索和删除等操作。</p>\n<h3>主要功能</h3>\n<ul>\n<li><strong>双列表展示</strong>：清晰地分离已选条目和可选条目</li>\n<li><strong>拖拽排序</strong>：支持对已选条目进行拖拽排序</li>\n<li><strong>搜索过滤</strong>：可以通过关键词搜索过滤条目</li>\n<li><strong>自定义渲染</strong>：支持自定义条目的渲染方式</li>\n<li><strong>国际化支持</strong>：内置中文和英文语言支持</li>\n<li><strong>添加新条目</strong>：支持添加不在预设列表中的新条目</li>\n</ul>\n<h3>使用场景</h3>\n<p>EntrySelector 适用于需要从预定义列表中选择多个条目并进行排序的场景，例如：</p>\n<ul>\n<li>选择并排序文章分类</li>\n<li>管理产品标签</li>\n<li>配置用户权限</li>\n<li>选择并排序展示项目</li>\n</ul>\n<h3>基本原理</h3>\n<p>组件内部维护已选条目列表和可选条目列表两个状态，通过用户交互在这两个列表之间移动条目。组件使用 react-sortablejs\n实现拖拽排序功能，并支持通过搜索框过滤条目列表。</p>`,\n description: `EntrySelector是一个用于选择和管理条目列表的 React 组件。它提供了一个直观的界面，允许用户从可选列表中选择条目，并对已选条目进行管理，包括排序、搜索和删除等操作。`,\n packageName: `@kne/entry-selector`,\n api: `<h3>组件属性</h3>\n<table>\n<thead>\n<tr>\n<th>属性名</th>\n<th>类型</th>\n<th>默认值</th>\n<th>说明</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>value</td>\n<td>Array</td>\n<td>[]</td>\n<td>已选条目列表，每个条目应包含唯一id属性</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>Function</td>\n<td>-</td>\n<td>值变化时的回调函数，参数为新的value值</td>\n</tr>\n<tr>\n<td>onAdd</td>\n<td>Function</td>\n<td>-</td>\n<td>添加新条目的回调函数，参数为包含fetchApi、value和onChange的对象</td>\n</tr>\n<tr>\n<td>api</td>\n<td>Function</td>\n<td>-</td>\n<td>获取条目列表的API函数，用于加载可选条目数据</td>\n</tr>\n<tr>\n<td>options</td>\n<td>Array</td>\n<td>-</td>\n<td>条目操作选项列表，用于ButtonGroup组件</td>\n</tr>\n<tr>\n<td>renderSelectedItem</td>\n<td>Function</td>\n<td>-</td>\n<td>自定义渲染已选条目的函数，参数为条目数据和包含el、target、fetchApi、onChange的对象</td>\n</tr>\n<tr>\n<td>renderItem</td>\n<td>Function</td>\n<td>-</td>\n<td>自定义渲染可选条目的函数，参数为条目数据和包含fetchApi、el的对象</td>\n</tr>\n<tr>\n<td>renderOptions</td>\n<td>Function</td>\n<td>-</td>\n<td>自定义渲染操作选项的函数，参数为条目数据和包含searchProps、setSearchProps、fetchApi、options的对象</td>\n</tr>\n<tr>\n<td>getSearchProps</td>\n<td>Function</td>\n<td>-</td>\n<td>获取搜索属性的函数，用于配置搜索功能</td>\n</tr>\n<tr>\n<td>searchPlaceholder</td>\n<td>String</td>\n<td>-</td>\n<td>搜索框占位文本，未设置时使用国际化文本</td>\n</tr>\n<tr>\n<td>selectedTitle</td>\n<td>String</td>\n<td>-</td>\n<td>自定义已选列表的标题，未设置时使用国际化文本</td>\n</tr>\n<tr>\n<td>listTitle</td>\n<td>String</td>\n<td>-</td>\n<td>自定义可选列表的标题，未设置时使用国际化文本</td>\n</tr>\n<tr>\n<td>renderListTitle</td>\n<td>Function</td>\n<td>-</td>\n<td>自定义渲染列表标题的函数，参数为包含fetchApi、searchProps、setSearchProps的对象</td>\n</tr>\n<tr>\n<td>maxScrollerHeight</td>\n<td>Number</td>\n<td>800</td>\n<td>设置滚动区域的最大高度（单位：像素）</td>\n</tr>\n</tbody>\n</table>\n<h3>国际化支持</h3>\n<p>组件内置中文和英文两种语言，默认使用中文。可通过createWithIntlProvider配置国际化。</p>\n<table>\n<thead>\n<tr>\n<th>语言</th>\n<th>代码</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>中文</td>\n<td>zh-CN</td>\n</tr>\n<tr>\n<td>英文</td>\n<td>en-US</td>\n</tr>\n</tbody>\n</table>\n<h3>国际化文本键值</h3>\n<table>\n<thead>\n<tr>\n<th>键名</th>\n<th>中文</th>\n<th>英文</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>add</td>\n<td>添加</td>\n<td>Add</td>\n</tr>\n<tr>\n<td>selected</td>\n<td>已选</td>\n<td>Selected</td>\n</tr>\n<tr>\n<td>list</td>\n<td>列表</td>\n<td>List</td>\n</tr>\n<tr>\n<td>searchPlaceholder</td>\n<td>请输入关键字</td>\n<td>Please input keyword</td>\n</tr>\n</tbody>\n</table>`,\n example: {\n isFull: false,\n className: `entry_selector_f371f`,\n style: `.entry_selector_f371f .ant-card {\n border-color: black;\n text-align: center;\n width: 200px;\n}`,\n list: [{\n title: `这里填写示例标题`,\n description: `这里填写示例说明`,\n code: `const { default: EntrySelector } = _EntrySelector;\nconst { Switch, Flex } = antd;\n\nconst BaseExample = () => {\n return (\n <div>\n <EntrySelector\n pagination={{ paramsType: 'params' }}\n api={{\n loader: data => {\n console.log('fetch props:', data);\n return {\n totalCount: 3,\n pageData: [\n {\n id: 1,\n title: '你是什么性格的人？有哪些方面的不足？需要怎样改进？'\n },\n {\n id: 2,\n title: '你认为如何可以让一个员工有效高质的完成他的工作？'\n },\n {\n id: 3,\n title: '请分享一次你快速作出决定的经验，当时的情况怎样？你是怎么处理的？'\n }\n ].filter(({ title }) => !(data?.params?.title && title.indexOf(data.params.title) === -1))\n };\n }\n }}\n getSearchProps={({ searchText }) => {\n return { title: searchText };\n }}\n renderSelectedItem={(item, { el, onChange }) => {\n return (\n <>\n {el}\n <Flex align=\"center\" gap={8}>\n <span>开启追问</span>\n <Switch\n size=\"small\"\n checked={item.hasProbe}\n onChange={checked => {\n onChange(Object.assign({}, item, { hasProbe: checked }));\n }}\n />\n </Flex>\n </>\n );\n }}\n onChange={value => {\n console.log('>>>>>>>>', value);\n }}\n options={[\n {\n children: '操作1'\n },\n {\n children: '操作2'\n }\n ]}\n />\n </div>\n );\n};\n\nrender(<BaseExample />);\n\n`,\n scope: [{\n name: \"_EntrySelector\",\n packageName: \"@kne/current-lib_entry-selector\",\n importStatement: \"import * as _EntrySelector from \\\"@kne/entry-selector\\\"\",\n component: component_1\n},{\n name: \"antd\",\n packageName: \"antd\",\n component: component_3\n}]\n}]\n }\n};\nexport default readmeConfig;\n","import EntrySelector from '@components/entry-selector/README.md';export default {EntrySelector};\nexport const manifest = {\"name\":\"entry-selector\",\"version\":\"0.1.4\",\"open-version\":true,\"public-url\":\"/entry-selector\",\"modules\":[{\"name\":\"entry-selector\",\"baseDir\":\"/home/runner/work/entry-selector/entry-selector\",\"description\":\"EntrySelector是一个用于选择和管理条目列表的 React 组件。它提供了一个直观的界面，允许用户从可选列表中选择条目，并对已选条目进行管理，包括排序、搜索和删除等操作。\",\"packageName\":\"@kne/entry-selector\"}]};"],"names":["EntrySelector","name","summary","description","packageName","api","example","isFull","className","style","list","title","code","scope","importStatement","component","manifest"],"sourceRoot":""}

package/build/static/js/528.eeca4ea0.chunk.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";(self.webpackChunk_kne_components_entry_selector=self.webpackChunk_kne_components_entry_selector\|\|[]).push([[147,528],{71830:(e,t,l)=>{l.r(t),l.d(t,{default:()=>P});var r=l(94922),n=l.n(r),a=l(17096),s=l(20274),c=l(80816),i=l(63965),o=l(3359),d=l(7717),m=l(71952),p=l(54159),u=l.n(p),h=l(5599),f=l(55199),g=l(20046);l(16577),l(9062);function E(){return E=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var l=arguments[t];for(var r in l)({}).hasOwnProperty.call(l,r)&&(e[r]=l[r])}return e},E.apply(null,arguments)}var y={"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"};const x=["onAdd","api","options","selectedTitle","listTitle","renderListTitle","renderSelectedItem","renderItem","renderOptions","getSearchProps","searchPlaceholder","maxScrollerHeight"],P=(0,s.createWithIntlProvider)({defaultLocale:"zh-CN",messages:{"zh-CN":{add:"\u6dfb\u52a0",selected:"\u5df2\u9009\u62e9",list:"\u5217\u8868",searchPlaceholder:"\u8bf7\u8f93\u5165\u5173\u952e\u5b57"},"en-US":{add:"Add",selected:"Selected",list:"List",searchPlaceholder:"Please input keyword"}},namespace:"entry-selector"})(e=>{let{onAdd:t,api:l,options:p,selectedTitle:P,listTitle:_,renderListTitle:v,renderSelectedItem:b,renderItem:N,renderOptions:S,getSearchProps:k,searchPlaceholder:A,maxScrollerHeight:C=800}=e,I=function(e,t){if(null==e)return{};var l={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(-1!==t.indexOf(r))continue;l[r]=e[r]}return l}(e,x);const[O,w]=(0,d.A)(I),[F,T]=(0,r.useState)({}),{formatMessage:H}=(0,s.useIntl)(),L=(0,r.useRef)(null),j=(0,r.useRef)(new Map);return n().createElement(f.Flex,{vertical:!0,gap:8,className:y["entry-selector"],style:{"--max-scroller-height":"".concat(C,"px")}},"function"===typeof t&&n().createElement(f.Flex,null,n().createElement(f.Button,{shape:"round",size:"small",type:"primary",onClick:()=>{t({fetchApi:L.current,value:O,onChange:w})}},H({id:"add"}))),n().createElement(m.h,E({},I,{completeTips:null,searchProps:F,getSearchProps:k,api:l,ref:L,className:y["list-scroll"],autoHide:!1,render:e=>{let{fetchApi:t,children:l}=e;const{data:r}=t,{pageData:s,totalCount:i}=Object.assign({},{pageData:[],totalCount:0},r);s.forEach(e=>{j.current.set(e.id,e)});const o=j.current,d=(O\|\|[]).map(e=>{let{id:t}=e;return o.get(t)}).filter(e=>!!e);return n().createElement(f.Row,{gutter:[12,12]},n().createElement(f.Col,{span:12},n().createElement("div",{className:y["list-outer"]},i>0&&n().createElement("div",{className:y["list-header"]},P\|\|H({id:"selected"})),n().createElement(g.A,{className:y["list-scroll"],autoHide:!1},O&&O.length>0?n().createElement(f.List,{className:y.list,size:"small"},n().createElement(a.ReactSortable,{filter:".ignore-elements",dragClass:y["sortable-drag"],ghostClass:y["sortable-ghost"],forceFallback:!0,animation:300,delayOnTouchStart:!0,delay:2,list:d,setList:e=>{w(t=>{const l=new Map((t\|\|[]).map(e=>[e.id,e]));return e.map(e=>{let{id:t}=e;return l.get(t)})})}},(O\|\|[]).map(e=>{let{id:t}=e;return o.get(t)}).filter(e=>!!e).map((e,l)=>{const r=n().createElement("span",{className:"list-item-title"},e.title),a=new Map((O\|\|[]).map(e=>[e.id,e]));return n().createElement(f.List.Item,{key:e.id,className:u()(y["columns-control-content-item"],y["is-drag"])},n().createElement(c.A,{className:y["columns-control-content-item-icon"]}),n().createElement("div",{className:y["list-index"]},l+1),n().createElement(f.Flex,{vertical:!0,flex:1},"function"===typeof b?b(a.get(e.id),{el:r,target:e,fetchApi:t,searchProps:F,setSearchProps:T,onChange:e=>w(t=>{const l=(t\|\|[]).slice(0),r=l.findIndex(t=>{let{id:l}=t;return l===e.id}),n=l[r];return r>-1&&l.splice(r,1,Object.assign({},"function"===typeof e?e(n):e)),l})}):r))}))):n().createElement(f.Flex,{className:y.list,justify:"center",align:"center"},n().createElement(f.Empty,null))))),n().createElement(f.Col,{span:12},n().createElement("div",{className:y["list-outer"]},n().createElement(f.Flex,{className:y["list-header"],justify:"space-between"},n().createElement("div",{className:y["list-header-title"]},_\|\|"function"===typeof v&&v({fetchApi:t,searchProps:F,setSearchProps:T})\|\|H({id:"list"})),n().createElement("div",null,"function"===typeof k&&n().createElement(h.A,{size:"small",placeholder:A\|\|H({id:"searchPlaceholder"}),value:F.searchText,onSearch:e=>{T(t=>Object.assign({},t,{searchText:e}))}}))),l)))}}),e=>{let{fetchApi:t,list:l}=e;return n().createElement(f.List,{className:u()(y.list,y["list-lib"]),size:"small",dataSource:l,renderItem:e=>{const l=n().createElement("span",{className:"list-item-title"},e.title),r="function"===typeof S?S(e,{searchProps:F,setSearchProps:T,fetchApi:t,options:p}):p;return n().createElement(f.List.Item,{key:e.id,onClick:()=>{w(t=>{const l=(t\|\|[]).slice(0),r=l.findIndex(t=>{let{id:l}=t;return l===e.id});return r>-1?l.splice(r,1):l.push({id:e.id}),l})}},n().createElement(f.Checkbox,{checked:(O\|\|[]).findIndex(t=>{let{id:l}=t;return l===e.id})>-1}),n().createElement(f.Flex,{vertical:!0,flex:1},"function"===typeof N?N(e,{fetchApi:t,el:l,searchProps:F,setSearchProps:T}):l),r&&n().createElement(f.Flex,{flex:"0 0 50px",onClick:e=>{e.stopPropagation()}},n().createElement(o.Ay,{more:n().createElement(f.Button,{type:"link",icon:n().createElement(i.A,null)}),list:r})))}})}))})}}]);
2	+ //# sourceMappingURL=528.eeca4ea0.chunk.js.map

package/build/static/js/528.eeca4ea0.chunk.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"static/js/528.eeca4ea0.chunk.js","mappings":"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","sources":["../../src/index.js","../../src/locale/zh-CN.js","../../src/locale/en-US.js"],"sourcesContent":["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, selectedTitle, listTitle, renderListTitle, renderSelectedItem, renderItem, renderOptions, getSearchProps, searchPlaceholder, maxScrollerHeight = 800, ...props }) => {\n const [value, onChange] = useControllerValue(props);\n const [searchProps, setSearchProps] = useState({});\n const { formatMessage } = useIntl();\n const ref = useRef(null);\n const selectedMappingRef = useRef(new Map());\n return (\n <Flex\n vertical\n gap={8}\n className={style['entry-selector']}\n style={{\n '--max-scroller-height': `${maxScrollerHeight}px`\n }}\n >\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 pageData.forEach(item => {\n selectedMappingRef.current.set(item.id, item);\n });\n const listMapping = selectedMappingRef.current;\n const currentList = (value || []).map(({ id }) => listMapping.get(id)).filter(item => !!item);\n return (\n <Row gutter={[12, 12]}>\n <Col span={12}>\n <div className={style['list-outer']}>\n {totalCount > 0 && <div className={style['list-header']}>{selectedTitle || 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 searchProps,\n setSearchProps,\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 <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']}>\n {listTitle ||\n (typeof renderListTitle === 'function' &&\n renderListTitle({\n fetchApi,\n searchProps,\n setSearchProps\n })) ||\n formatMessage({ id: 'list' })}\n </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 </Row>\n );\n }}\n >\n {({ fetchApi, list }) => {\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 const targetOptions =\n typeof renderOptions === 'function'\n ? renderOptions(item, {\n searchProps,\n setSearchProps,\n fetchApi,\n options\n })\n : options;\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 searchProps,\n setSearchProps\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","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"],"names":["EntrySelector","createWithIntlProvider","defaultLocale","messages","add","selected","list","searchPlaceholder","namespace","_ref","onAdd","api","options","selectedTitle","listTitle","renderListTitle","renderSelectedItem","renderItem","renderOptions","getSearchProps","maxScrollerHeight","props","_objectWithoutPropertiesLoose","_excluded","value","onChange","useControllerValue","searchProps","setSearchProps","useState","formatMessage","useIntl","ref","useRef","selectedMappingRef","Map","React","Flex","vertical","gap","className","style","concat","Button","shape","size","type","onClick","fetchApi","current","id","FetchScrollLoader","_extends","completeTips","autoHide","render","_ref2","children","data","pageData","totalCount","Object","assign","forEach","item","set","listMapping","currentList","map","_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","dataSource","targetOptions","_ref8","push","Checkbox","checked","_ref9","e","stopPropagation","ButtonGroup","more","icon","MoreOutlined"],"sourceRoot":""}