@kne-components/entry-selector 0.1.0 → 0.1.4

package/build/static/js/147.f34af9cb.chunk.js

@@ -0,0 +1,2 @@
+"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})))}})}))})}}]);
+//# sourceMappingURL=147.f34af9cb.chunk.js.map

package/build/static/js/147.f34af9cb.chunk.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"static/js/147.f34af9cb.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":""}

package/build/static/js/198.1c5d3585.chunk.js

@@ -0,0 +1,2 @@
+"use strict";(self.webpackChunk_kne_components_entry_selector=self.webpackChunk_kne_components_entry_selector||[]).push([[198],{11448:(t,n,e)=>{var r=e(89379),d=(e(94922),e(87558)),o=e(55199),a=e(94312),l=e(13050),s=e(89261);window.PUBLIC_URL="/entry-selector";const c={url:"https://uc.fatalent.cn",tpl:"{{url}}/packages/@kne-components/{{remote}}/{{version}}/build"};var i=e(65457),h=e(53986),p=e(94679),m=e(14152),u=e.n(m),g=(e(91296),e(46446));const y=["globalPreset"],b=u().ExampleRoutes,f=t=>{let{globalPreset:n}=t,e=(0,h.A)(t,y);return(0,s.jsx)(p.HashRouter,{children:(0,s.jsx)(b,(0,r.A)((0,r.A)({},e),{},{paths:[{key:"components",path:"/",title:"\u9996\u9875"}],preset:n,themeToken:n.themeToken,readme:g.default,pageProps:{menu:null}}))})},k=i.createRoot(document.getElementById("root"));(async t=>{const n=await(async()=>{const t=(0,a.A)({errorHandler:t=>o.message.error(t)}),n=(0,r.A)((0,r.A)({},c),{},{remote:"components-core",defaultVersion:"0.4.3"});return(0,l.preset)({remotes:{default:n,"components-core":n,"components-iconfont":(0,r.A)((0,r.A)({},c),{},{remote:"components-iconfont",defaultVersion:"0.2.1"}),"entry-selector":(0,r.A)((0,r.A)({},c),{},{remote:"entry-selector",defaultVersion:"0.1.4"})}}),(0,d.preset)({ajax:t,loading:(0,s.jsx)(o.Spin,{delay:500,style:{position:"absolute",left:"50%",padding:"10px",transform:"translateX(-50%)"}}),error:null,empty:(0,s.jsx)(o.Empty,{}),transformResponse:t=>{const{data:n}=t;return t.data={code:0===n.code?200:n.code,msg:n.msg,results:n.data},t}}),{ajax:t,enums:{},apis:{},themeToken:{colorPrimary:"#4183F0"}}})();k.render((0,s.jsx)(t,{themeToken:n.themeToken,globalPreset:n}))})(f)},69666:(t,n,e)=>{e.d(n,{A:()=>o});var r=e(82879),d=(e(72241),e(55199));const o={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, onChange }) => {\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                    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: '\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:r},{name:"antd",packageName:"antd",component:d}]}]}}},72241:()=>{}}]);
+//# sourceMappingURL=198.1c5d3585.chunk.js.map

package/build/static/js/198.1c5d3585.chunk.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"static/js/198.1c5d3585.chunk.js","mappings":"iOAMAA,OAAOC,WAAaC,kBAOpB,MAAMC,EAAW,CACfC,IAAK,yBAA0BC,IAAK,iE,wGCThCC,EAAgBC,IAAAA,cAuBtB,EArBYC,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,8sEAqENmB,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\";\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, 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"],"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":""}

package/build/static/js/268.787ddc9b.chunk.js

@@ -0,0 +1,2 @@
+"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, onChange }) => {\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                    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: '\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.1.4","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"}]}}}]);
+//# sourceMappingURL=268.787ddc9b.chunk.js.map

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

@@ -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

@@ -0,0 +1,2 @@
+"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})))}})}))})}}]);
+//# sourceMappingURL=528.eeca4ea0.chunk.js.map

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

@@ -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":""}