@kne-components/entry-selector 0.2.2 → 0.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kne-components/entry-selector",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "dependencies": {
     "@kne/current-lib_entry-selector": "file:..",
     "react": "file:../node_modules/react",

package/build/static/js/147.23145691.chunk.js.map

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

package/build/static/js/528.038e2a78.chunk.js.map

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