@kne-components/entry-selector 0.1.5 → 0.1.6

package/package.json

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

package/build/static/js/147.98c6198d.chunk.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"static/js/147.98c6198d.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(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=\".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                          {currentList.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","get","Row","gutter","Col","span","SimpleBar","length","List","ReactSortable","filter","dragClass","ghostClass","forceFallback","animation","delayOnTouchStart","delay","setList","mapping","_ref3","index","defaultItem","title","Item","key","classnames","HolderOutlined","flex","el","target","newValue","slice","findIndex","_ref4","currentItem","splice","justify","align","Empty","SearchInput","placeholder","searchText","onSearch","_ref5","dataSource","targetOptions","_ref6","push","Checkbox","checked","_ref7","e","stopPropagation","ButtonGroup","more","icon","MoreOutlined"],"sourceRoot":""}

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

@@ -1 +0,0 @@
-{"version":3,"file":"static/js/528.aa437ae3.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(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=\".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                          {currentList.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","get","Row","gutter","Col","span","SimpleBar","length","List","ReactSortable","filter","dragClass","ghostClass","forceFallback","animation","delayOnTouchStart","delay","setList","mapping","_ref3","index","defaultItem","title","Item","key","classnames","HolderOutlined","flex","el","target","newValue","slice","findIndex","_ref4","currentItem","splice","justify","align","Empty","SearchInput","placeholder","searchText","onSearch","_ref5","dataSource","targetOptions","_ref6","push","Checkbox","checked","_ref7","e","stopPropagation","ButtonGroup","more","icon","MoreOutlined"],"sourceRoot":""}