@kne-components/entry-selector 0.2.1 → 0.2.3
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/build/asset-manifest.json +14 -14
- package/build/index.html +1 -1
- package/build/remoteEntry.js +1 -1
- package/build/remoteEntry.js.map +1 -1
- package/build/static/js/{147.d2af88c9.chunk.js → 147.5fe96b73.chunk.js} +2 -2
- package/build/static/js/147.5fe96b73.chunk.js.map +1 -0
- package/build/static/js/{198.d4826aea.chunk.js → 198.97401a57.chunk.js} +2 -2
- package/build/static/js/{198.d4826aea.chunk.js.map → 198.97401a57.chunk.js.map} +1 -1
- package/build/static/js/{268.2770dc66.chunk.js → 268.06050081.chunk.js} +2 -2
- package/build/static/js/{268.2770dc66.chunk.js.map → 268.06050081.chunk.js.map} +1 -1
- package/build/static/js/{528.f1d18748.chunk.js → 528.65993127.chunk.js} +2 -2
- package/build/static/js/528.65993127.chunk.js.map +1 -0
- package/build/static/js/{391.905092fd.chunk.js → 994.638f4166.chunk.js} +3 -3
- package/build/static/js/{391.905092fd.chunk.js.map → 994.638f4166.chunk.js.map} +1 -1
- package/build/static/js/{main.67401332.js → main.76684061.js} +2 -2
- package/build/static/js/{main.67401332.js.map → main.76684061.js.map} +1 -1
- package/package.json +1 -1
- package/build/static/js/147.d2af88c9.chunk.js.map +0 -1
- package/build/static/js/528.f1d18748.chunk.js.map +0 -1
- /package/build/static/js/{391.905092fd.chunk.js.LICENSE.txt → 994.638f4166.chunk.js.LICENSE.txt} +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"static/js/198.d4826aea.chunk.js","mappings":"iOAMAA,OAAOC,WAAaC,kBAOpB,MAAMC,EAAW,CACfC,IAAK,yBAA0BC,IAAK,iE,+FCThCC,EAAgBC,EAAAA,GAAYD,cAuBlC,EArBYE,IAAiC,IAAhC,aAAEC,GAAwBD,EAAPE,GAAKC,EAAAA,EAAAA,GAAAH,EAAAI,GACnC,OACIC,EAAAA,EAAAA,KAACC,EAAAA,WAAU,CAAAC,UACTF,EAAAA,EAAAA,KAACP,GAAaU,EAAAA,EAAAA,IAAAA,EAAAA,EAAAA,GAAA,GACNN,GAAK,IACTO,MAAO,CACL,CACEC,IAAK,aACLC,KAAM,IACNC,MAAO,iBAGXC,OAAQZ,EACRa,WAAYb,EAAaa,WACzBC,OAAQA,EAAAA,QACRC,UAAW,CAAEC,KAAM,YCjBzBC,EAAOC,EAAAA,WAAoBC,SAASC,eAAe,SAEtCC,WACjB,MAAMrB,OFSkBqB,WACxB,MAAMC,GAAOC,EAAAA,EAAAA,GAAW,CACtBC,aAAcC,GAASC,EAAAA,QAAQD,MAAMA,KAGjCE,GAAoBpB,EAAAA,EAAAA,IAAAA,EAAAA,EAAAA,GAAA,GACrBb,GAAQ,IAAEkC,OAAQ,kBAAmBC,eAAgB,UAgC1D,OA7BAC,EAAAA,EAAAA,QAAmB,CACjBC,QAAS,CACPC,QAASL,EAAsB,kBAAmBA,EAAsB,uBAAqBpB,EAAAA,EAAAA,IAAAA,EAAAA,EAAAA,GAAA,GACxFb,GAAQ,IAAEkC,OAAQ,sBAAuBC,eAAgB,UAC3D,kBAEFtB,EAAAA,EAAAA,IAAAA,EAAAA,EAAAA,GAAA,GACIb,GAAQ,IAAEkC,OAAQ,iBAAkBC,eAAgBpC,cAM7DwC,EAAAA,EAAAA,QAAY,CACVX,OAAMY,SAAS9B,EAAAA,EAAAA,KAAC+B,EAAAA,KAAI,CAACC,MAAO,IACPC,MAAO,CACLC,SAAU,WACVC,KAAM,MACNC,QAAS,OACTC,UAAW,sBACNhB,MAAO,KAAMiB,OAAOtC,EAAAA,EAAAA,KAACuC,EAAAA,MAAK,IAAKC,kBAAoBC,IAC7E,MAAM,KAAEC,GAASD,EAIjB,OAHAA,EAASC,KAAO,CACdC,KAAoB,IAAdD,EAAKC,KAAa,IAAMD,EAAKC,KAAMC,IAAKF,EAAKE,IAAKC,QAASH,EAAKA,MAEjED,KAIJ,CACLvB,OAAM4B,MAAO,CAAC,EAAGC,KAAM,CAAC,EAAGtC,WAAY,CACrCuC,aAAc,aEjDSC,GACpBpC,EAAKqC,QAAOlD,EAAAA,EAAAA,KAACmD,EAAG,CAAC1C,WAAYb,EAAaa,WAAYb,aAAcA,MAG7EwD,CAAWD,E,wECTX,MA2QA,EA3QqB,CACjBE,KAAM,iBACNC,QAAS,+vEAqBTC,YAAa,2bACbC,YAAa,sBACbC,IAAK,ulIAqJLC,QAAS,CACLC,QAAQ,EACRC,UAAW,uBACX3B,MAAO,uGAKP4B,KAAM,CAAC,CACXtD,MAAO,mDACPgD,YAAa,mDACbZ,KAAM,gtEAqENmB,MAAO,CAAC,CACRT,KAAM,iBACNG,YAAa,kCACbO,gBAAiB,wDACjBC,UAAW,GACb,CACEX,KAAM,OACNG,YAAa,OACbQ,UAAW,O","sources":["preset.js","App.js","bootstrap.js","../../README.md"],"sourcesContent":["import React from 'react';\nimport { preset as fetchPreset } from '@kne/react-fetch';\nimport { Spin, Empty, message } from 'antd';\nimport createAjax from '@kne/axios-fetch';\nimport { preset as remoteLoaderPreset } from '@kne/remote-loader';\n\nwindow.PUBLIC_URL = process.env.PUBLIC_URL;\n\n// url: 'https://registry.npmmirror.com',\n// tpl: '{{url}}/@kne-components%2f{{remote}}/{{version}}/files/build',\n\n// url: 'https://cdn.jsdelivr.net', tpl: '{{url}}/npm/@kne-components/{{remote}}@{{version}}/build'\n\nconst registry = {\n url: 'https://uc.fatalent.cn', tpl: '{{url}}/packages/@kne-components/{{remote}}/{{version}}/build'\n};\n\nexport const globalInit = async () => {\n const ajax = createAjax({\n errorHandler: error => message.error(error)\n });\n\n const componentsCoreRemote = {\n ...registry, remote: 'components-core', defaultVersion: '0.4.3'\n };\n\n remoteLoaderPreset({\n remotes: {\n default: componentsCoreRemote, 'components-core': componentsCoreRemote, 'components-iconfont': {\n ...registry, remote: 'components-iconfont', defaultVersion: '0.2.1'\n }, 'entry-selector': process.env.NODE_ENV === 'development' ? {\n remote: 'entry-selector', url: '/', tpl: '{{url}}'\n } : {\n ...registry, remote: 'entry-selector', defaultVersion: process.env.DEFAULT_VERSION\n }\n }\n });\n\n\n fetchPreset({\n ajax, loading: <Spin delay={500}\n style={{\n position: 'absolute',\n left: '50%',\n padding: '10px',\n transform: 'translateX(-50%)'\n }} />, error: null, empty: <Empty />, transformResponse: (response) => {\n const { data } = response;\n response.data = {\n code: data.code === 0 ? 200 : data.code, msg: data.msg, results: data.data\n };\n return response;\n }\n });\n\n return {\n ajax, enums: {}, apis: {}, themeToken: {\n colorPrimary: '#4183F0'\n }\n };\n};\n","import { HashRouter } from \"react-router-dom\";\nimport createEntry from \"@kne/modules-dev/dist/create-entry.modern\";\nimport \"@kne/modules-dev/dist/create-entry.css\";\nimport readme from \"readme\";\n\nconst ExampleRoutes = createEntry.ExampleRoutes;\n\nconst App = ({ globalPreset, ...props }) => {\n return (\n <HashRouter>\n <ExampleRoutes\n {...props}\n paths={[\n {\n key: \"components\",\n path: \"/\",\n title: \"首页\",\n },\n ]}\n preset={globalPreset}\n themeToken={globalPreset.themeToken}\n readme={readme}\n pageProps={{ menu: null }}\n />\n </HashRouter>\n );\n};\n\nexport default App;\n","import { globalInit } from './preset';\nimport React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport App from './App';\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\n\nconst renderRoot = async (App) => {\n const globalPreset = await globalInit();\n return root.render(<App themeToken={globalPreset.themeToken} globalPreset={globalPreset} />);\n};\n\nrenderRoot(App);\n","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, onReplace }) => {\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 onReplace(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"],"names":["window","PUBLIC_URL","process","registry","url","tpl","ExampleRoutes","createEntry","_ref","globalPreset","props","_objectWithoutProperties","_excluded","_jsx","HashRouter","children","_objectSpread","paths","key","path","title","preset","themeToken","readme","pageProps","menu","root","ReactDOM","document","getElementById","async","ajax","createAjax","errorHandler","error","message","componentsCoreRemote","remote","defaultVersion","remoteLoaderPreset","remotes","default","fetchPreset","loading","Spin","delay","style","position","left","padding","transform","empty","Empty","transformResponse","response","data","code","msg","results","enums","apis","colorPrimary","globalInit","render","App","renderRoot","name","summary","description","packageName","api","example","isFull","className","list","scope","importStatement","component"],"sourceRoot":""}
|
|
1
|
+
{"version":3,"file":"static/js/198.97401a57.chunk.js","mappings":"iOAMAA,OAAOC,WAAaC,kBAOpB,MAAMC,EAAW,CACfC,IAAK,yBAA0BC,IAAK,iE,+FCThCC,EAAgBC,EAAAA,GAAYD,cAuBlC,EArBYE,IAAiC,IAAhC,aAAEC,GAAwBD,EAAPE,GAAKC,EAAAA,EAAAA,GAAAH,EAAAI,GACnC,OACIC,EAAAA,EAAAA,KAACC,EAAAA,WAAU,CAAAC,UACTF,EAAAA,EAAAA,KAACP,GAAaU,EAAAA,EAAAA,IAAAA,EAAAA,EAAAA,GAAA,GACNN,GAAK,IACTO,MAAO,CACL,CACEC,IAAK,aACLC,KAAM,IACNC,MAAO,iBAGXC,OAAQZ,EACRa,WAAYb,EAAaa,WACzBC,OAAQA,EAAAA,QACRC,UAAW,CAAEC,KAAM,YCjBzBC,EAAOC,EAAAA,WAAoBC,SAASC,eAAe,SAEtCC,WACjB,MAAMrB,OFSkBqB,WACxB,MAAMC,GAAOC,EAAAA,EAAAA,GAAW,CACtBC,aAAcC,GAASC,EAAAA,QAAQD,MAAMA,KAGjCE,GAAoBpB,EAAAA,EAAAA,IAAAA,EAAAA,EAAAA,GAAA,GACrBb,GAAQ,IAAEkC,OAAQ,kBAAmBC,eAAgB,UAgC1D,OA7BAC,EAAAA,EAAAA,QAAmB,CACjBC,QAAS,CACPC,QAASL,EAAsB,kBAAmBA,EAAsB,uBAAqBpB,EAAAA,EAAAA,IAAAA,EAAAA,EAAAA,GAAA,GACxFb,GAAQ,IAAEkC,OAAQ,sBAAuBC,eAAgB,UAC3D,kBAEFtB,EAAAA,EAAAA,IAAAA,EAAAA,EAAAA,GAAA,GACIb,GAAQ,IAAEkC,OAAQ,iBAAkBC,eAAgBpC,cAM7DwC,EAAAA,EAAAA,QAAY,CACVX,OAAMY,SAAS9B,EAAAA,EAAAA,KAAC+B,EAAAA,KAAI,CAACC,MAAO,IACPC,MAAO,CACLC,SAAU,WACVC,KAAM,MACNC,QAAS,OACTC,UAAW,sBACNhB,MAAO,KAAMiB,OAAOtC,EAAAA,EAAAA,KAACuC,EAAAA,MAAK,IAAKC,kBAAoBC,IAC7E,MAAM,KAAEC,GAASD,EAIjB,OAHAA,EAASC,KAAO,CACdC,KAAoB,IAAdD,EAAKC,KAAa,IAAMD,EAAKC,KAAMC,IAAKF,EAAKE,IAAKC,QAASH,EAAKA,MAEjED,KAIJ,CACLvB,OAAM4B,MAAO,CAAC,EAAGC,KAAM,CAAC,EAAGtC,WAAY,CACrCuC,aAAc,aEjDSC,GACpBpC,EAAKqC,QAAOlD,EAAAA,EAAAA,KAACmD,EAAG,CAAC1C,WAAYb,EAAaa,WAAYb,aAAcA,MAG7EwD,CAAWD,E,wECTX,MA2QA,EA3QqB,CACjBE,KAAM,iBACNC,QAAS,+vEAqBTC,YAAa,2bACbC,YAAa,sBACbC,IAAK,ulIAqJLC,QAAS,CACLC,QAAQ,EACRC,UAAW,uBACX3B,MAAO,uGAKP4B,KAAM,CAAC,CACXtD,MAAO,mDACPgD,YAAa,mDACbZ,KAAM,gtEAqENmB,MAAO,CAAC,CACRT,KAAM,iBACNG,YAAa,kCACbO,gBAAiB,wDACjBC,UAAW,GACb,CACEX,KAAM,OACNG,YAAa,OACbQ,UAAW,O","sources":["preset.js","App.js","bootstrap.js","../../README.md"],"sourcesContent":["import React from 'react';\nimport { preset as fetchPreset } from '@kne/react-fetch';\nimport { Spin, Empty, message } from 'antd';\nimport createAjax from '@kne/axios-fetch';\nimport { preset as remoteLoaderPreset } from '@kne/remote-loader';\n\nwindow.PUBLIC_URL = process.env.PUBLIC_URL;\n\n// url: 'https://registry.npmmirror.com',\n// tpl: '{{url}}/@kne-components%2f{{remote}}/{{version}}/files/build',\n\n// url: 'https://cdn.jsdelivr.net', tpl: '{{url}}/npm/@kne-components/{{remote}}@{{version}}/build'\n\nconst registry = {\n url: 'https://uc.fatalent.cn', tpl: '{{url}}/packages/@kne-components/{{remote}}/{{version}}/build'\n};\n\nexport const globalInit = async () => {\n const ajax = createAjax({\n errorHandler: error => message.error(error)\n });\n\n const componentsCoreRemote = {\n ...registry, remote: 'components-core', defaultVersion: '0.4.3'\n };\n\n remoteLoaderPreset({\n remotes: {\n default: componentsCoreRemote, 'components-core': componentsCoreRemote, 'components-iconfont': {\n ...registry, remote: 'components-iconfont', defaultVersion: '0.2.1'\n }, 'entry-selector': process.env.NODE_ENV === 'development' ? {\n remote: 'entry-selector', url: '/', tpl: '{{url}}'\n } : {\n ...registry, remote: 'entry-selector', defaultVersion: process.env.DEFAULT_VERSION\n }\n }\n });\n\n\n fetchPreset({\n ajax, loading: <Spin delay={500}\n style={{\n position: 'absolute',\n left: '50%',\n padding: '10px',\n transform: 'translateX(-50%)'\n }} />, error: null, empty: <Empty />, transformResponse: (response) => {\n const { data } = response;\n response.data = {\n code: data.code === 0 ? 200 : data.code, msg: data.msg, results: data.data\n };\n return response;\n }\n });\n\n return {\n ajax, enums: {}, apis: {}, themeToken: {\n colorPrimary: '#4183F0'\n }\n };\n};\n","import { HashRouter } from \"react-router-dom\";\nimport createEntry from \"@kne/modules-dev/dist/create-entry.modern\";\nimport \"@kne/modules-dev/dist/create-entry.css\";\nimport readme from \"readme\";\n\nconst ExampleRoutes = createEntry.ExampleRoutes;\n\nconst App = ({ globalPreset, ...props }) => {\n return (\n <HashRouter>\n <ExampleRoutes\n {...props}\n paths={[\n {\n key: \"components\",\n path: \"/\",\n title: \"首页\",\n },\n ]}\n preset={globalPreset}\n themeToken={globalPreset.themeToken}\n readme={readme}\n pageProps={{ menu: null }}\n />\n </HashRouter>\n );\n};\n\nexport default App;\n","import { globalInit } from './preset';\nimport React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport App from './App';\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\n\nconst renderRoot = async (App) => {\n const globalPreset = await globalInit();\n return root.render(<App themeToken={globalPreset.themeToken} globalPreset={globalPreset} />);\n};\n\nrenderRoot(App);\n","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, onReplace }) => {\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 onReplace(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"],"names":["window","PUBLIC_URL","process","registry","url","tpl","ExampleRoutes","createEntry","_ref","globalPreset","props","_objectWithoutProperties","_excluded","_jsx","HashRouter","children","_objectSpread","paths","key","path","title","preset","themeToken","readme","pageProps","menu","root","ReactDOM","document","getElementById","async","ajax","createAjax","errorHandler","error","message","componentsCoreRemote","remote","defaultVersion","remoteLoaderPreset","remotes","default","fetchPreset","loading","Spin","delay","style","position","left","padding","transform","empty","Empty","transformResponse","response","data","code","msg","results","enums","apis","colorPrimary","globalInit","render","App","renderRoot","name","summary","description","packageName","api","example","isFull","className","list","scope","importStatement","component"],"sourceRoot":""}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";(self.webpackChunk_kne_components_entry_selector=self.webpackChunk_kne_components_entry_selector||[]).push([[268],{30268:(t,n,e)=>{e.r(n),e.d(n,{default:()=>d,manifest:()=>r});const d={EntrySelector:{name:"entry-selector",summary:"<p>EntrySelector \u662f\u4e00\u4e2a\u7528\u4e8e\u9009\u62e9\u548c\u7ba1\u7406\u6761\u76ee\u5217\u8868\u7684 React \u7ec4\u4ef6\u3002\u5b83\u63d0\u4f9b\u4e86\u4e00\u4e2a\u76f4\u89c2\u7684\u754c\u9762\uff0c\u5141\u8bb8\u7528\u6237\u4ece\u53ef\u9009\u5217\u8868\u4e2d\u9009\u62e9\u6761\u76ee\uff0c\u5e76\u5bf9\u5df2\u9009\u6761\u76ee\u8fdb\u884c\u7ba1\u7406\uff0c\u5305\u62ec\u6392\u5e8f\u3001\u641c\u7d22\u548c\u5220\u9664\u7b49\u64cd\u4f5c\u3002</p>\n<h3>\u4e3b\u8981\u529f\u80fd</h3>\n<ul>\n<li><strong>\u53cc\u5217\u8868\u5c55\u793a</strong>\uff1a\u6e05\u6670\u5730\u5206\u79bb\u5df2\u9009\u6761\u76ee\u548c\u53ef\u9009\u6761\u76ee</li>\n<li><strong>\u62d6\u62fd\u6392\u5e8f</strong>\uff1a\u652f\u6301\u5bf9\u5df2\u9009\u6761\u76ee\u8fdb\u884c\u62d6\u62fd\u6392\u5e8f</li>\n<li><strong>\u641c\u7d22\u8fc7\u6ee4</strong>\uff1a\u53ef\u4ee5\u901a\u8fc7\u5173\u952e\u8bcd\u641c\u7d22\u8fc7\u6ee4\u6761\u76ee</li>\n<li><strong>\u81ea\u5b9a\u4e49\u6e32\u67d3</strong>\uff1a\u652f\u6301\u81ea\u5b9a\u4e49\u6761\u76ee\u7684\u6e32\u67d3\u65b9\u5f0f</li>\n<li><strong>\u56fd\u9645\u5316\u652f\u6301</strong>\uff1a\u5185\u7f6e\u4e2d\u6587\u548c\u82f1\u6587\u8bed\u8a00\u652f\u6301</li>\n<li><strong>\u6dfb\u52a0\u65b0\u6761\u76ee</strong>\uff1a\u652f\u6301\u6dfb\u52a0\u4e0d\u5728\u9884\u8bbe\u5217\u8868\u4e2d\u7684\u65b0\u6761\u76ee</li>\n</ul>\n<h3>\u4f7f\u7528\u573a\u666f</h3>\n<p>EntrySelector \u9002\u7528\u4e8e\u9700\u8981\u4ece\u9884\u5b9a\u4e49\u5217\u8868\u4e2d\u9009\u62e9\u591a\u4e2a\u6761\u76ee\u5e76\u8fdb\u884c\u6392\u5e8f\u7684\u573a\u666f\uff0c\u4f8b\u5982\uff1a</p>\n<ul>\n<li>\u9009\u62e9\u5e76\u6392\u5e8f\u6587\u7ae0\u5206\u7c7b</li>\n<li>\u7ba1\u7406\u4ea7\u54c1\u6807\u7b7e</li>\n<li>\u914d\u7f6e\u7528\u6237\u6743\u9650</li>\n<li>\u9009\u62e9\u5e76\u6392\u5e8f\u5c55\u793a\u9879\u76ee</li>\n</ul>\n<h3>\u57fa\u672c\u539f\u7406</h3>\n<p>\u7ec4\u4ef6\u5185\u90e8\u7ef4\u62a4\u5df2\u9009\u6761\u76ee\u5217\u8868\u548c\u53ef\u9009\u6761\u76ee\u5217\u8868\u4e24\u4e2a\u72b6\u6001\uff0c\u901a\u8fc7\u7528\u6237\u4ea4\u4e92\u5728\u8fd9\u4e24\u4e2a\u5217\u8868\u4e4b\u95f4\u79fb\u52a8\u6761\u76ee\u3002\u7ec4\u4ef6\u4f7f\u7528 react-sortablejs\n\u5b9e\u73b0\u62d6\u62fd\u6392\u5e8f\u529f\u80fd\uff0c\u5e76\u652f\u6301\u901a\u8fc7\u641c\u7d22\u6846\u8fc7\u6ee4\u6761\u76ee\u5217\u8868\u3002</p>",description:"EntrySelector\u662f\u4e00\u4e2a\u7528\u4e8e\u9009\u62e9\u548c\u7ba1\u7406\u6761\u76ee\u5217\u8868\u7684 React \u7ec4\u4ef6\u3002\u5b83\u63d0\u4f9b\u4e86\u4e00\u4e2a\u76f4\u89c2\u7684\u754c\u9762\uff0c\u5141\u8bb8\u7528\u6237\u4ece\u53ef\u9009\u5217\u8868\u4e2d\u9009\u62e9\u6761\u76ee\uff0c\u5e76\u5bf9\u5df2\u9009\u6761\u76ee\u8fdb\u884c\u7ba1\u7406\uff0c\u5305\u62ec\u6392\u5e8f\u3001\u641c\u7d22\u548c\u5220\u9664\u7b49\u64cd\u4f5c\u3002",packageName:"@kne/entry-selector",api:"<h3>\u7ec4\u4ef6\u5c5e\u6027</h3>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>value</td>\n<td>Array</td>\n<td>[]</td>\n<td>\u5df2\u9009\u6761\u76ee\u5217\u8868\uff0c\u6bcf\u4e2a\u6761\u76ee\u5e94\u5305\u542b\u552f\u4e00id\u5c5e\u6027</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>Function</td>\n<td>-</td>\n<td>\u503c\u53d8\u5316\u65f6\u7684\u56de\u8c03\u51fd\u6570\uff0c\u53c2\u6570\u4e3a\u65b0\u7684value\u503c</td>\n</tr>\n<tr>\n<td>onAdd</td>\n<td>Function</td>\n<td>-</td>\n<td>\u6dfb\u52a0\u65b0\u6761\u76ee\u7684\u56de\u8c03\u51fd\u6570\uff0c\u53c2\u6570\u4e3a\u5305\u542bfetchApi\u3001value\u548conChange\u7684\u5bf9\u8c61</td>\n</tr>\n<tr>\n<td>api</td>\n<td>Function</td>\n<td>-</td>\n<td>\u83b7\u53d6\u6761\u76ee\u5217\u8868\u7684API\u51fd\u6570\uff0c\u7528\u4e8e\u52a0\u8f7d\u53ef\u9009\u6761\u76ee\u6570\u636e</td>\n</tr>\n<tr>\n<td>options</td>\n<td>Array</td>\n<td>-</td>\n<td>\u6761\u76ee\u64cd\u4f5c\u9009\u9879\u5217\u8868\uff0c\u7528\u4e8eButtonGroup\u7ec4\u4ef6</td>\n</tr>\n<tr>\n<td>renderSelectedItem</td>\n<td>Function</td>\n<td>-</td>\n<td>\u81ea\u5b9a\u4e49\u6e32\u67d3\u5df2\u9009\u6761\u76ee\u7684\u51fd\u6570\uff0c\u53c2\u6570\u4e3a\u6761\u76ee\u6570\u636e\u548c\u5305\u542bel\u3001target\u3001fetchApi\u3001onChange\u7684\u5bf9\u8c61</td>\n</tr>\n<tr>\n<td>renderItem</td>\n<td>Function</td>\n<td>-</td>\n<td>\u81ea\u5b9a\u4e49\u6e32\u67d3\u53ef\u9009\u6761\u76ee\u7684\u51fd\u6570\uff0c\u53c2\u6570\u4e3a\u6761\u76ee\u6570\u636e\u548c\u5305\u542bfetchApi\u3001el\u7684\u5bf9\u8c61</td>\n</tr>\n<tr>\n<td>renderOptions</td>\n<td>Function</td>\n<td>-</td>\n<td>\u81ea\u5b9a\u4e49\u6e32\u67d3\u64cd\u4f5c\u9009\u9879\u7684\u51fd\u6570\uff0c\u53c2\u6570\u4e3a\u6761\u76ee\u6570\u636e\u548c\u5305\u542bsearchProps\u3001setSearchProps\u3001fetchApi\u3001options\u7684\u5bf9\u8c61</td>\n</tr>\n<tr>\n<td>getSearchProps</td>\n<td>Function</td>\n<td>-</td>\n<td>\u83b7\u53d6\u641c\u7d22\u5c5e\u6027\u7684\u51fd\u6570\uff0c\u7528\u4e8e\u914d\u7f6e\u641c\u7d22\u529f\u80fd</td>\n</tr>\n<tr>\n<td>searchPlaceholder</td>\n<td>String</td>\n<td>-</td>\n<td>\u641c\u7d22\u6846\u5360\u4f4d\u6587\u672c\uff0c\u672a\u8bbe\u7f6e\u65f6\u4f7f\u7528\u56fd\u9645\u5316\u6587\u672c</td>\n</tr>\n<tr>\n<td>selectedTitle</td>\n<td>String</td>\n<td>-</td>\n<td>\u81ea\u5b9a\u4e49\u5df2\u9009\u5217\u8868\u7684\u6807\u9898\uff0c\u672a\u8bbe\u7f6e\u65f6\u4f7f\u7528\u56fd\u9645\u5316\u6587\u672c</td>\n</tr>\n<tr>\n<td>listTitle</td>\n<td>String</td>\n<td>-</td>\n<td>\u81ea\u5b9a\u4e49\u53ef\u9009\u5217\u8868\u7684\u6807\u9898\uff0c\u672a\u8bbe\u7f6e\u65f6\u4f7f\u7528\u56fd\u9645\u5316\u6587\u672c</td>\n</tr>\n<tr>\n<td>renderListTitle</td>\n<td>Function</td>\n<td>-</td>\n<td>\u81ea\u5b9a\u4e49\u6e32\u67d3\u5217\u8868\u6807\u9898\u7684\u51fd\u6570\uff0c\u53c2\u6570\u4e3a\u5305\u542bfetchApi\u3001searchProps\u3001setSearchProps\u7684\u5bf9\u8c61</td>\n</tr>\n<tr>\n<td>maxScrollerHeight</td>\n<td>Number</td>\n<td>800</td>\n<td>\u8bbe\u7f6e\u6eda\u52a8\u533a\u57df\u7684\u6700\u5927\u9ad8\u5ea6\uff08\u5355\u4f4d\uff1a\u50cf\u7d20\uff09</td>\n</tr>\n</tbody>\n</table>\n<h3>\u56fd\u9645\u5316\u652f\u6301</h3>\n<p>\u7ec4\u4ef6\u5185\u7f6e\u4e2d\u6587\u548c\u82f1\u6587\u4e24\u79cd\u8bed\u8a00\uff0c\u9ed8\u8ba4\u4f7f\u7528\u4e2d\u6587\u3002\u53ef\u901a\u8fc7createWithIntlProvider\u914d\u7f6e\u56fd\u9645\u5316\u3002</p>\n<table>\n<thead>\n<tr>\n<th>\u8bed\u8a00</th>\n<th>\u4ee3\u7801</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>\u4e2d\u6587</td>\n<td>zh-CN</td>\n</tr>\n<tr>\n<td>\u82f1\u6587</td>\n<td>en-US</td>\n</tr>\n</tbody>\n</table>\n<h3>\u56fd\u9645\u5316\u6587\u672c\u952e\u503c</h3>\n<table>\n<thead>\n<tr>\n<th>\u952e\u540d</th>\n<th>\u4e2d\u6587</th>\n<th>\u82f1\u6587</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>add</td>\n<td>\u6dfb\u52a0</td>\n<td>Add</td>\n</tr>\n<tr>\n<td>selected</td>\n<td>\u5df2\u9009</td>\n<td>Selected</td>\n</tr>\n<tr>\n<td>list</td>\n<td>\u5217\u8868</td>\n<td>List</td>\n</tr>\n<tr>\n<td>searchPlaceholder</td>\n<td>\u8bf7\u8f93\u5165\u5173\u952e\u5b57</td>\n<td>Please input keyword</td>\n</tr>\n</tbody>\n</table>",example:{isFull:!1,className:"entry_selector_f371f",style:".entry_selector_f371f .ant-card {\n border-color: black;\n text-align: center;\n width: 200px;\n}",list:[{title:"\u8fd9\u91cc\u586b\u5199\u793a\u4f8b\u6807\u9898",description:"\u8fd9\u91cc\u586b\u5199\u793a\u4f8b\u8bf4\u660e",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: '\u4f60\u662f\u4ec0\u4e48\u6027\u683c\u7684\u4eba\uff1f\u6709\u54ea\u4e9b\u65b9\u9762\u7684\u4e0d\u8db3\uff1f\u9700\u8981\u600e\u6837\u6539\u8fdb\uff1f'\n },\n {\n id: 2,\n title: '\u4f60\u8ba4\u4e3a\u5982\u4f55\u53ef\u4ee5\u8ba9\u4e00\u4e2a\u5458\u5de5\u6709\u6548\u9ad8\u8d28\u7684\u5b8c\u6210\u4ed6\u7684\u5de5\u4f5c\uff1f'\n },\n {\n id: 3,\n title: '\u8bf7\u5206\u4eab\u4e00\u6b21\u4f60\u5feb\u901f\u4f5c\u51fa\u51b3\u5b9a\u7684\u7ecf\u9a8c\uff0c\u5f53\u65f6\u7684\u60c5\u51b5\u600e\u6837\uff1f\u4f60\u662f\u600e\u4e48\u5904\u7406\u7684\uff1f'\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, onReplace }) => {\n return (\n <>\n {el}\n <Flex align=\"center\" gap={8}>\n <span>\u5f00\u542f\u8ffd\u95ee</span>\n <Switch\n size=\"small\"\n checked={item.hasProbe}\n onChange={checked => {\n onReplace(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: '\u64cd\u4f5c1'\n },\n {\n children: '\u64cd\u4f5c2'\n }\n ]}\n />\n </div>\n );\n};\n\nrender(<BaseExample />);\n\n",scope:[{name:"_EntrySelector",packageName:"@kne/current-lib_entry-selector",importStatement:'import * as _EntrySelector from "@kne/entry-selector"',component:e(82879)},{name:"antd",packageName:"antd",component:e(55199)}]}]}}},r={name:"entry-selector",version:"0.2.1","open-version":!0,"public-url":"/entry-selector",modules:[{name:"entry-selector",baseDir:"/home/runner/work/entry-selector/entry-selector",description:"EntrySelector\u662f\u4e00\u4e2a\u7528\u4e8e\u9009\u62e9\u548c\u7ba1\u7406\u6761\u76ee\u5217\u8868\u7684 React \u7ec4\u4ef6\u3002\u5b83\u63d0\u4f9b\u4e86\u4e00\u4e2a\u76f4\u89c2\u7684\u754c\u9762\uff0c\u5141\u8bb8\u7528\u6237\u4ece\u53ef\u9009\u5217\u8868\u4e2d\u9009\u62e9\u6761\u76ee\uff0c\u5e76\u5bf9\u5df2\u9009\u6761\u76ee\u8fdb\u884c\u7ba1\u7406\uff0c\u5305\u62ec\u6392\u5e8f\u3001\u641c\u7d22\u548c\u5220\u9664\u7b49\u64cd\u4f5c\u3002",packageName:"@kne/entry-selector"}]}}}]);
|
|
2
|
-
//# sourceMappingURL=268.
|
|
1
|
+
"use strict";(self.webpackChunk_kne_components_entry_selector=self.webpackChunk_kne_components_entry_selector||[]).push([[268],{30268:(t,n,e)=>{e.r(n),e.d(n,{default:()=>d,manifest:()=>r});const d={EntrySelector:{name:"entry-selector",summary:"<p>EntrySelector \u662f\u4e00\u4e2a\u7528\u4e8e\u9009\u62e9\u548c\u7ba1\u7406\u6761\u76ee\u5217\u8868\u7684 React \u7ec4\u4ef6\u3002\u5b83\u63d0\u4f9b\u4e86\u4e00\u4e2a\u76f4\u89c2\u7684\u754c\u9762\uff0c\u5141\u8bb8\u7528\u6237\u4ece\u53ef\u9009\u5217\u8868\u4e2d\u9009\u62e9\u6761\u76ee\uff0c\u5e76\u5bf9\u5df2\u9009\u6761\u76ee\u8fdb\u884c\u7ba1\u7406\uff0c\u5305\u62ec\u6392\u5e8f\u3001\u641c\u7d22\u548c\u5220\u9664\u7b49\u64cd\u4f5c\u3002</p>\n<h3>\u4e3b\u8981\u529f\u80fd</h3>\n<ul>\n<li><strong>\u53cc\u5217\u8868\u5c55\u793a</strong>\uff1a\u6e05\u6670\u5730\u5206\u79bb\u5df2\u9009\u6761\u76ee\u548c\u53ef\u9009\u6761\u76ee</li>\n<li><strong>\u62d6\u62fd\u6392\u5e8f</strong>\uff1a\u652f\u6301\u5bf9\u5df2\u9009\u6761\u76ee\u8fdb\u884c\u62d6\u62fd\u6392\u5e8f</li>\n<li><strong>\u641c\u7d22\u8fc7\u6ee4</strong>\uff1a\u53ef\u4ee5\u901a\u8fc7\u5173\u952e\u8bcd\u641c\u7d22\u8fc7\u6ee4\u6761\u76ee</li>\n<li><strong>\u81ea\u5b9a\u4e49\u6e32\u67d3</strong>\uff1a\u652f\u6301\u81ea\u5b9a\u4e49\u6761\u76ee\u7684\u6e32\u67d3\u65b9\u5f0f</li>\n<li><strong>\u56fd\u9645\u5316\u652f\u6301</strong>\uff1a\u5185\u7f6e\u4e2d\u6587\u548c\u82f1\u6587\u8bed\u8a00\u652f\u6301</li>\n<li><strong>\u6dfb\u52a0\u65b0\u6761\u76ee</strong>\uff1a\u652f\u6301\u6dfb\u52a0\u4e0d\u5728\u9884\u8bbe\u5217\u8868\u4e2d\u7684\u65b0\u6761\u76ee</li>\n</ul>\n<h3>\u4f7f\u7528\u573a\u666f</h3>\n<p>EntrySelector \u9002\u7528\u4e8e\u9700\u8981\u4ece\u9884\u5b9a\u4e49\u5217\u8868\u4e2d\u9009\u62e9\u591a\u4e2a\u6761\u76ee\u5e76\u8fdb\u884c\u6392\u5e8f\u7684\u573a\u666f\uff0c\u4f8b\u5982\uff1a</p>\n<ul>\n<li>\u9009\u62e9\u5e76\u6392\u5e8f\u6587\u7ae0\u5206\u7c7b</li>\n<li>\u7ba1\u7406\u4ea7\u54c1\u6807\u7b7e</li>\n<li>\u914d\u7f6e\u7528\u6237\u6743\u9650</li>\n<li>\u9009\u62e9\u5e76\u6392\u5e8f\u5c55\u793a\u9879\u76ee</li>\n</ul>\n<h3>\u57fa\u672c\u539f\u7406</h3>\n<p>\u7ec4\u4ef6\u5185\u90e8\u7ef4\u62a4\u5df2\u9009\u6761\u76ee\u5217\u8868\u548c\u53ef\u9009\u6761\u76ee\u5217\u8868\u4e24\u4e2a\u72b6\u6001\uff0c\u901a\u8fc7\u7528\u6237\u4ea4\u4e92\u5728\u8fd9\u4e24\u4e2a\u5217\u8868\u4e4b\u95f4\u79fb\u52a8\u6761\u76ee\u3002\u7ec4\u4ef6\u4f7f\u7528 react-sortablejs\n\u5b9e\u73b0\u62d6\u62fd\u6392\u5e8f\u529f\u80fd\uff0c\u5e76\u652f\u6301\u901a\u8fc7\u641c\u7d22\u6846\u8fc7\u6ee4\u6761\u76ee\u5217\u8868\u3002</p>",description:"EntrySelector\u662f\u4e00\u4e2a\u7528\u4e8e\u9009\u62e9\u548c\u7ba1\u7406\u6761\u76ee\u5217\u8868\u7684 React \u7ec4\u4ef6\u3002\u5b83\u63d0\u4f9b\u4e86\u4e00\u4e2a\u76f4\u89c2\u7684\u754c\u9762\uff0c\u5141\u8bb8\u7528\u6237\u4ece\u53ef\u9009\u5217\u8868\u4e2d\u9009\u62e9\u6761\u76ee\uff0c\u5e76\u5bf9\u5df2\u9009\u6761\u76ee\u8fdb\u884c\u7ba1\u7406\uff0c\u5305\u62ec\u6392\u5e8f\u3001\u641c\u7d22\u548c\u5220\u9664\u7b49\u64cd\u4f5c\u3002",packageName:"@kne/entry-selector",api:"<h3>\u7ec4\u4ef6\u5c5e\u6027</h3>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>value</td>\n<td>Array</td>\n<td>[]</td>\n<td>\u5df2\u9009\u6761\u76ee\u5217\u8868\uff0c\u6bcf\u4e2a\u6761\u76ee\u5e94\u5305\u542b\u552f\u4e00id\u5c5e\u6027</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>Function</td>\n<td>-</td>\n<td>\u503c\u53d8\u5316\u65f6\u7684\u56de\u8c03\u51fd\u6570\uff0c\u53c2\u6570\u4e3a\u65b0\u7684value\u503c</td>\n</tr>\n<tr>\n<td>onAdd</td>\n<td>Function</td>\n<td>-</td>\n<td>\u6dfb\u52a0\u65b0\u6761\u76ee\u7684\u56de\u8c03\u51fd\u6570\uff0c\u53c2\u6570\u4e3a\u5305\u542bfetchApi\u3001value\u548conChange\u7684\u5bf9\u8c61</td>\n</tr>\n<tr>\n<td>api</td>\n<td>Function</td>\n<td>-</td>\n<td>\u83b7\u53d6\u6761\u76ee\u5217\u8868\u7684API\u51fd\u6570\uff0c\u7528\u4e8e\u52a0\u8f7d\u53ef\u9009\u6761\u76ee\u6570\u636e</td>\n</tr>\n<tr>\n<td>options</td>\n<td>Array</td>\n<td>-</td>\n<td>\u6761\u76ee\u64cd\u4f5c\u9009\u9879\u5217\u8868\uff0c\u7528\u4e8eButtonGroup\u7ec4\u4ef6</td>\n</tr>\n<tr>\n<td>renderSelectedItem</td>\n<td>Function</td>\n<td>-</td>\n<td>\u81ea\u5b9a\u4e49\u6e32\u67d3\u5df2\u9009\u6761\u76ee\u7684\u51fd\u6570\uff0c\u53c2\u6570\u4e3a\u6761\u76ee\u6570\u636e\u548c\u5305\u542bel\u3001target\u3001fetchApi\u3001onChange\u7684\u5bf9\u8c61</td>\n</tr>\n<tr>\n<td>renderItem</td>\n<td>Function</td>\n<td>-</td>\n<td>\u81ea\u5b9a\u4e49\u6e32\u67d3\u53ef\u9009\u6761\u76ee\u7684\u51fd\u6570\uff0c\u53c2\u6570\u4e3a\u6761\u76ee\u6570\u636e\u548c\u5305\u542bfetchApi\u3001el\u7684\u5bf9\u8c61</td>\n</tr>\n<tr>\n<td>renderOptions</td>\n<td>Function</td>\n<td>-</td>\n<td>\u81ea\u5b9a\u4e49\u6e32\u67d3\u64cd\u4f5c\u9009\u9879\u7684\u51fd\u6570\uff0c\u53c2\u6570\u4e3a\u6761\u76ee\u6570\u636e\u548c\u5305\u542bsearchProps\u3001setSearchProps\u3001fetchApi\u3001options\u7684\u5bf9\u8c61</td>\n</tr>\n<tr>\n<td>getSearchProps</td>\n<td>Function</td>\n<td>-</td>\n<td>\u83b7\u53d6\u641c\u7d22\u5c5e\u6027\u7684\u51fd\u6570\uff0c\u7528\u4e8e\u914d\u7f6e\u641c\u7d22\u529f\u80fd</td>\n</tr>\n<tr>\n<td>searchPlaceholder</td>\n<td>String</td>\n<td>-</td>\n<td>\u641c\u7d22\u6846\u5360\u4f4d\u6587\u672c\uff0c\u672a\u8bbe\u7f6e\u65f6\u4f7f\u7528\u56fd\u9645\u5316\u6587\u672c</td>\n</tr>\n<tr>\n<td>selectedTitle</td>\n<td>String</td>\n<td>-</td>\n<td>\u81ea\u5b9a\u4e49\u5df2\u9009\u5217\u8868\u7684\u6807\u9898\uff0c\u672a\u8bbe\u7f6e\u65f6\u4f7f\u7528\u56fd\u9645\u5316\u6587\u672c</td>\n</tr>\n<tr>\n<td>listTitle</td>\n<td>String</td>\n<td>-</td>\n<td>\u81ea\u5b9a\u4e49\u53ef\u9009\u5217\u8868\u7684\u6807\u9898\uff0c\u672a\u8bbe\u7f6e\u65f6\u4f7f\u7528\u56fd\u9645\u5316\u6587\u672c</td>\n</tr>\n<tr>\n<td>renderListTitle</td>\n<td>Function</td>\n<td>-</td>\n<td>\u81ea\u5b9a\u4e49\u6e32\u67d3\u5217\u8868\u6807\u9898\u7684\u51fd\u6570\uff0c\u53c2\u6570\u4e3a\u5305\u542bfetchApi\u3001searchProps\u3001setSearchProps\u7684\u5bf9\u8c61</td>\n</tr>\n<tr>\n<td>maxScrollerHeight</td>\n<td>Number</td>\n<td>800</td>\n<td>\u8bbe\u7f6e\u6eda\u52a8\u533a\u57df\u7684\u6700\u5927\u9ad8\u5ea6\uff08\u5355\u4f4d\uff1a\u50cf\u7d20\uff09</td>\n</tr>\n</tbody>\n</table>\n<h3>\u56fd\u9645\u5316\u652f\u6301</h3>\n<p>\u7ec4\u4ef6\u5185\u7f6e\u4e2d\u6587\u548c\u82f1\u6587\u4e24\u79cd\u8bed\u8a00\uff0c\u9ed8\u8ba4\u4f7f\u7528\u4e2d\u6587\u3002\u53ef\u901a\u8fc7createWithIntlProvider\u914d\u7f6e\u56fd\u9645\u5316\u3002</p>\n<table>\n<thead>\n<tr>\n<th>\u8bed\u8a00</th>\n<th>\u4ee3\u7801</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>\u4e2d\u6587</td>\n<td>zh-CN</td>\n</tr>\n<tr>\n<td>\u82f1\u6587</td>\n<td>en-US</td>\n</tr>\n</tbody>\n</table>\n<h3>\u56fd\u9645\u5316\u6587\u672c\u952e\u503c</h3>\n<table>\n<thead>\n<tr>\n<th>\u952e\u540d</th>\n<th>\u4e2d\u6587</th>\n<th>\u82f1\u6587</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>add</td>\n<td>\u6dfb\u52a0</td>\n<td>Add</td>\n</tr>\n<tr>\n<td>selected</td>\n<td>\u5df2\u9009</td>\n<td>Selected</td>\n</tr>\n<tr>\n<td>list</td>\n<td>\u5217\u8868</td>\n<td>List</td>\n</tr>\n<tr>\n<td>searchPlaceholder</td>\n<td>\u8bf7\u8f93\u5165\u5173\u952e\u5b57</td>\n<td>Please input keyword</td>\n</tr>\n</tbody>\n</table>",example:{isFull:!1,className:"entry_selector_f371f",style:".entry_selector_f371f .ant-card {\n border-color: black;\n text-align: center;\n width: 200px;\n}",list:[{title:"\u8fd9\u91cc\u586b\u5199\u793a\u4f8b\u6807\u9898",description:"\u8fd9\u91cc\u586b\u5199\u793a\u4f8b\u8bf4\u660e",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: '\u4f60\u662f\u4ec0\u4e48\u6027\u683c\u7684\u4eba\uff1f\u6709\u54ea\u4e9b\u65b9\u9762\u7684\u4e0d\u8db3\uff1f\u9700\u8981\u600e\u6837\u6539\u8fdb\uff1f'\n },\n {\n id: 2,\n title: '\u4f60\u8ba4\u4e3a\u5982\u4f55\u53ef\u4ee5\u8ba9\u4e00\u4e2a\u5458\u5de5\u6709\u6548\u9ad8\u8d28\u7684\u5b8c\u6210\u4ed6\u7684\u5de5\u4f5c\uff1f'\n },\n {\n id: 3,\n title: '\u8bf7\u5206\u4eab\u4e00\u6b21\u4f60\u5feb\u901f\u4f5c\u51fa\u51b3\u5b9a\u7684\u7ecf\u9a8c\uff0c\u5f53\u65f6\u7684\u60c5\u51b5\u600e\u6837\uff1f\u4f60\u662f\u600e\u4e48\u5904\u7406\u7684\uff1f'\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, onReplace }) => {\n return (\n <>\n {el}\n <Flex align=\"center\" gap={8}>\n <span>\u5f00\u542f\u8ffd\u95ee</span>\n <Switch\n size=\"small\"\n checked={item.hasProbe}\n onChange={checked => {\n onReplace(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: '\u64cd\u4f5c1'\n },\n {\n children: '\u64cd\u4f5c2'\n }\n ]}\n />\n </div>\n );\n};\n\nrender(<BaseExample />);\n\n",scope:[{name:"_EntrySelector",packageName:"@kne/current-lib_entry-selector",importStatement:'import * as _EntrySelector from "@kne/entry-selector"',component:e(82879)},{name:"antd",packageName:"antd",component:e(55199)}]}]}}},r={name:"entry-selector",version:"0.2.3","open-version":!0,"public-url":"/entry-selector",modules:[{name:"entry-selector",baseDir:"/home/runner/work/entry-selector/entry-selector",description:"EntrySelector\u662f\u4e00\u4e2a\u7528\u4e8e\u9009\u62e9\u548c\u7ba1\u7406\u6761\u76ee\u5217\u8868\u7684 React \u7ec4\u4ef6\u3002\u5b83\u63d0\u4f9b\u4e86\u4e00\u4e2a\u76f4\u89c2\u7684\u754c\u9762\uff0c\u5141\u8bb8\u7528\u6237\u4ece\u53ef\u9009\u5217\u8868\u4e2d\u9009\u62e9\u6761\u76ee\uff0c\u5e76\u5bf9\u5df2\u9009\u6761\u76ee\u8fdb\u884c\u7ba1\u7406\uff0c\u5305\u62ec\u6392\u5e8f\u3001\u641c\u7d22\u548c\u5220\u9664\u7b49\u64cd\u4f5c\u3002",packageName:"@kne/entry-selector"}]}}}]);
|
|
2
|
+
//# sourceMappingURL=268.06050081.chunk.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"static/js/268.
|
|
1
|
+
{"version":3,"file":"static/js/268.06050081.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,gtEAqENC,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, onReplace }) => {\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 onReplace(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.2.3\",\"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":""}
|
|
@@ -1,2 +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 n=l(94922),a=l.n(n),r=l(17096),s=l(20274),c=l(79111),i=l(80816),o=l(63965),d=l(40772),m=l(7717),p=l(71952),u=l(54159),h=l.n(u),f=l(5599),g=l(55199),E=l(20046);l(16577),l(9062);function y(){return y=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var l=arguments[t];for(var n in l)({}).hasOwnProperty.call(l,n)&&(e[n]=l[n])}return e},y.apply(null,arguments)}var x={"entry-selector":"_TIU4-","list-outer":"_ZXEhy","list-header":"_HAF3g","list-scroll":"_VO7i-",list:"_8w58c","list-lib":"_9m0I0","list-index":"_P8KYX","list-item-content":"_VXH4S","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 b=["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:u,selectedTitle:P,listTitle:v,renderListTitle:_,renderSelectedItem:N,renderItem:S,renderOptions:k,getSearchProps:A,searchPlaceholder:C,maxScrollerHeight:O=800}=e,I=function(e,t){if(null==e)return{};var l={};for(var n in e)if({}.hasOwnProperty.call(e,n)){if(-1!==t.indexOf(n))continue;l[n]=e[n]}return l}(e,b);const[F,w]=(0,m.A)(I),[T,j]=(0,n.useState)({}),{formatMessage:H}=(0,s.useIntl)(),L=(0,n.useRef)(null),z=(0,n.useRef)(new Map),R=e=>w(t=>{const l=(t||[]).slice(0),n=l.findIndex(t=>{let{id:l}=t;return l===e.id});return n>-1?l.splice(n,1):l.push(Object.assign({},e)),l});return a().createElement(g.Flex,{vertical:!0,gap:8,className:x["entry-selector"],style:{"--max-scroller-height":"".concat(O,"px")}},"function"===typeof t&&a().createElement(g.Flex,null,a().createElement(g.Button,{shape:"round",size:"small",type:"primary",onClick:()=>{t({fetchApi:L.current,value:F,onChange:w})}},H({id:"add"}))),a().createElement(p.h,y({},I,{completeTips:null,searchProps:T,getSearchProps:A,api:l,ref:L,className:x["list-scroll"],autoHide:!1,render:e=>{let{fetchApi:t,children:l}=e;const{data:n}=t,{pageData:s,totalCount:o}=Object.assign({},{pageData:[],totalCount:0},n);s.forEach(e=>{z.current.set(e.id,e)});const m=z.current,p=(F||[]).map(e=>Object.assign({},m.get(e.id)||e));return a().createElement(g.Row,{gutter:[12,12]},a().createElement(g.Col,{span:12},a().createElement("div",{className:x["list-outer"]},o>0&&a().createElement("div",{className:x["list-header"]},P||H({id:"selected"})),a().createElement(E.A,{className:x["list-scroll"],autoHide:!1},F&&F.length>0?a().createElement(g.List,{className:x.list,size:"small"},a().createElement(r.ReactSortable,{filter:".sortable-ignore-elements",handle:".sortable-drag-handle",dragClass:x["sortable-drag"],ghostClass:x["sortable-ghost"],forceFallback:!0,animation:300,delayOnTouchStart:!0,delay:2,list:p,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)})})}},p.map((e,l)=>{const n=a().createElement("span",{className:"list-item-title"},e.title),r=a().createElement(d.ZF,{color:"danger",variant:"filled",className:"list-item-remove-btn",icon:a().createElement(c.A,null),onClick:()=>{R(e)}}),s=new Map((F||[]).map(e=>[e.id,e]));return a().createElement(g.List.Item,{key:e.id,className:h()(x["columns-control-content-item"],x["is-drag"])},a().createElement(i.A,{className:h()("sortable-drag-handle",x["columns-control-content-item-icon"])}),a().createElement("div",{className:x["list-index"]},l+1),a().createElement(g.Flex,{justify:"space-between",gap:8,flex:1,className:x["list-item-content"]},a().createElement(g.Flex,{vertical:!0,flex:1},"function"===typeof N?N(s.get(e.id),{el:n,removeOptionEl:r,target:e,fetchApi:t,searchProps:T,setSearchProps:j,onChange:w,onSelected:R,onReplace:t=>w(l=>{const n=(l||[]).slice(0),a=n.findIndex(t=>{let{id:l}=t;return l===e.id}),r=n[a];return a>-1&&n.splice(a,1,Object.assign({},"function"===typeof t?t(r):t)),n})}):n),r))}))):a().createElement(g.Flex,{className:x.list,justify:"center",align:"center"},a().createElement(g.Empty,null))))),a().createElement(g.Col,{span:12},a().createElement("div",{className:x["list-outer"]},a().createElement(g.Flex,{className:x["list-header"],justify:"space-between"},a().createElement("div",{className:x["list-header-title"]},v||"function"===typeof _&&_({fetchApi:t,defaultTitle:
|
|
2
|
-
//# sourceMappingURL=528.
|
|
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 n=l(94922),a=l.n(n),r=l(17096),s=l(20274),c=l(79111),i=l(80816),o=l(63965),d=l(40772),m=l(7717),p=l(71952),u=l(54159),h=l.n(u),f=l(5599),g=l(55199),E=l(20046);l(16577),l(9062);function y(){return y=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var l=arguments[t];for(var n in l)({}).hasOwnProperty.call(l,n)&&(e[n]=l[n])}return e},y.apply(null,arguments)}var x={"entry-selector":"_TIU4-","list-outer":"_ZXEhy","list-header":"_HAF3g","list-scroll":"_VO7i-",list:"_8w58c","list-lib":"_9m0I0","list-index":"_P8KYX","list-item-content":"_VXH4S","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 b=["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:u,selectedTitle:P,listTitle:v,renderListTitle:_,renderSelectedItem:N,renderItem:S,renderOptions:k,getSearchProps:A,searchPlaceholder:C,maxScrollerHeight:O=800}=e,I=function(e,t){if(null==e)return{};var l={};for(var n in e)if({}.hasOwnProperty.call(e,n)){if(-1!==t.indexOf(n))continue;l[n]=e[n]}return l}(e,b);const[F,w]=(0,m.A)(I),[T,j]=(0,n.useState)({}),{formatMessage:H}=(0,s.useIntl)(),L=(0,n.useRef)(null),z=(0,n.useRef)(new Map),R=e=>w(t=>{const l=(t||[]).slice(0),n=l.findIndex(t=>{let{id:l}=t;return l===e.id});return n>-1?l.splice(n,1):l.push(Object.assign({},e)),l});return a().createElement(g.Flex,{vertical:!0,gap:8,className:x["entry-selector"],style:{"--max-scroller-height":"".concat(O,"px")}},"function"===typeof t&&a().createElement(g.Flex,null,a().createElement(g.Button,{shape:"round",size:"small",type:"primary",onClick:()=>{t({fetchApi:L.current,value:F,onChange:w})}},H({id:"add"}))),a().createElement(p.h,y({},I,{completeTips:null,searchProps:T,getSearchProps:A,api:l,ref:L,className:x["list-scroll"],autoHide:!1,render:e=>{let{fetchApi:t,children:l}=e;const{data:n}=t,{pageData:s,totalCount:o}=Object.assign({},{pageData:[],totalCount:0},n);s.forEach(e=>{z.current.set(e.id,e)});const m=z.current,p=(F||[]).map(e=>Object.assign({},m.get(e.id)||e));return a().createElement(g.Row,{gutter:[12,12]},a().createElement(g.Col,{span:12},a().createElement("div",{className:x["list-outer"]},o>0&&a().createElement("div",{className:x["list-header"]},P||H({id:"selected"})),a().createElement(E.A,{className:x["list-scroll"],autoHide:!1},F&&F.length>0?a().createElement(g.List,{className:x.list,size:"small"},a().createElement(r.ReactSortable,{filter:".sortable-ignore-elements",handle:".sortable-drag-handle",dragClass:x["sortable-drag"],ghostClass:x["sortable-ghost"],forceFallback:!0,animation:300,delayOnTouchStart:!0,delay:2,list:p,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)})})}},p.map((e,l)=>{const n=a().createElement("span",{className:"list-item-title"},e.title),r=a().createElement(d.ZF,{color:"danger",variant:"filled",className:"list-item-remove-btn",icon:a().createElement(c.A,null),onClick:()=>{R(e)}}),s=new Map((F||[]).map(e=>[e.id,e]));return a().createElement(g.List.Item,{key:e.id,className:h()(x["columns-control-content-item"],x["is-drag"])},a().createElement(i.A,{className:h()("sortable-drag-handle",x["columns-control-content-item-icon"])}),a().createElement("div",{className:x["list-index"]},l+1),a().createElement(g.Flex,{justify:"space-between",gap:8,flex:1,className:x["list-item-content"]},a().createElement(g.Flex,{vertical:!0,flex:1},"function"===typeof N?N(s.get(e.id),{el:n,removeOptionEl:r,target:e,fetchApi:t,searchProps:T,setSearchProps:j,onChange:w,onSelected:R,onReplace:t=>w(l=>{const n=(l||[]).slice(0),a=n.findIndex(t=>{let{id:l}=t;return l===e.id}),r=n[a];return a>-1&&n.splice(a,1,Object.assign({},"function"===typeof t?t(r):t)),n})}):n),r))}))):a().createElement(g.Flex,{className:x.list,justify:"center",align:"center"},a().createElement(g.Empty,null))))),a().createElement(g.Col,{span:12},a().createElement("div",{className:x["list-outer"]},a().createElement(g.Flex,{className:x["list-header"],justify:"space-between",gap:8},(()=>{const e=a().createElement("div",{className:x["list-header-title"]},H({id:"list"}));return v||"function"===typeof _&&_({fetchApi:t,defaultTitle:e,searchProps:T,setSearchProps:j})||e})(),a().createElement("div",null,"function"===typeof A&&a().createElement(f.A,{size:"small",placeholder:C||H({id:"searchPlaceholder"}),value:T.searchText,onSearch:e=>{j(t=>Object.assign({},t,{searchText:e}))}}))),l)))}}),e=>{let{fetchApi:t,list:l}=e;return a().createElement(g.List,{className:h()(x.list,x["list-lib"]),size:"small",dataSource:l,renderItem:e=>{const l=a().createElement("span",{className:"list-item-title"},e.title),n="function"===typeof k?k(e,{searchProps:T,setSearchProps:j,fetchApi:t,options:u}):u;return a().createElement(g.List.Item,{key:e.id,onClick:()=>{R(e)}},a().createElement(g.Checkbox,{checked:(F||[]).findIndex(t=>{let{id:l}=t;return l===e.id})>-1}),a().createElement(g.Flex,{vertical:!0,flex:1},"function"===typeof S?S(e,{fetchApi:t,el:l,searchProps:T,setSearchProps:j}):l),n&&a().createElement(g.Flex,{flex:"0 0 50px",onClick:e=>{e.stopPropagation()}},a().createElement(d.Ay,{more:a().createElement(g.Button,{type:"link",icon:a().createElement(o.A,null)}),list:n})))}})}))})}}]);
|
|
2
|
+
//# sourceMappingURL=528.65993127.chunk.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"static/js/528.65993127.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, DeleteOutlined } from '@ant-design/icons';\nimport ButtonGroup, { ConfirmButton } 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 const onSelected = item => {\n return 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(Object.assign({}, item));\n }\n\n return newValue;\n });\n };\n\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(item => Object.assign({}, listMapping.get(item.id) || 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=\".sortable-ignore-elements\"\n handle=\".sortable-drag-handle\"\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 {currentList.map((item, index) => {\n const defaultItem = <span className={'list-item-title'}>{item.title}</span>;\n const removeOption = (\n <ConfirmButton\n color=\"danger\"\n variant=\"filled\"\n className={'list-item-remove-btn'}\n icon={<DeleteOutlined />}\n onClick={() => {\n onSelected(item);\n }}\n />\n );\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={classnames('sortable-drag-handle', style['columns-control-content-item-icon'])} />\n <div className={style['list-index']}>{index + 1}</div>\n <Flex justify=\"space-between\" gap={8} flex={1} className={style['list-item-content']}>\n <Flex vertical flex={1}>\n {typeof renderSelectedItem === 'function'\n ? renderSelectedItem(mapping.get(item.id), {\n el: defaultItem,\n removeOptionEl: removeOption,\n target: item,\n fetchApi,\n searchProps,\n setSearchProps,\n onChange,\n onSelected,\n onReplace: targetItem => {\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 targetItem === 'function' ? targetItem(currentItem) : targetItem));\n }\n return newValue;\n });\n }\n })\n : defaultItem}\n </Flex>\n {removeOption}\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\" gap={8}>\n {(() => {\n const defaultTitle = <div className={style['list-header-title']}>{formatMessage({ id: 'list' })}</div>;\n return (\n listTitle ||\n (typeof renderListTitle === 'function' &&\n renderListTitle({\n fetchApi,\n defaultTitle,\n searchProps,\n setSearchProps\n })) ||\n defaultTitle\n );\n })()}\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 onSelected(item);\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","onSelected","item","newValue","slice","index","findIndex","_ref2","id","splice","push","Object","assign","React","Flex","vertical","gap","className","style","concat","Button","shape","size","type","onClick","fetchApi","current","FetchScrollLoader","_extends","completeTips","autoHide","render","_ref3","children","data","pageData","totalCount","forEach","set","listMapping","currentList","map","get","Row","gutter","Col","span","SimpleBar","length","List","ReactSortable","filter","handle","dragClass","ghostClass","forceFallback","animation","delayOnTouchStart","delay","setList","mapping","_ref4","defaultItem","title","removeOption","ConfirmButton","color","variant","icon","DeleteOutlined","Item","key","classnames","HolderOutlined","justify","flex","el","removeOptionEl","target","onReplace","targetItem","_ref5","currentItem","align","Empty","defaultTitle","SearchInput","placeholder","searchText","onSearch","_ref6","dataSource","targetOptions","Checkbox","checked","_ref7","e","stopPropagation","ButtonGroup","more","MoreOutlined"],"sourceRoot":""}
|