@uiw/react-search-tree - npm Package Compare versions

Comparing version 4.13.3 to 4.13.4

cjs/index.d.ts

@@ -0,1 +1,2 @@
+import React from 'react';
 import { DropContent, SearchTagInputOption } from './SearchTagInput';
@@ -10,4 +11,6 @@ import { TreeData } from '@uiw/react-tree';
     treeProps?: Omit<TreeCheckedProps, 'onSelected'> & Partial<DropContent<V>>;
+    emptyOption?: React.ReactNode;
+    multiple?: boolean;
 }
 declare function SearchTree<V extends SearchTagInputOption>(props: SearchTreeProps<V>): JSX.Element;
 export default SearchTree;

cjs/index.js

@@ -24,2 +24,4 @@ "use strict";
 
+var _reactTree = _interopRequireDefault(require("@uiw/react-tree"));
+
 var _reactTreeChecked = _interopRequireDefault(require("@uiw/react-tree-checked"));
@@ -29,3 +31,3 @@
 
-var _excluded = ["onChange", "onSearch", "options", "value", "treeProps"];
+var _excluded = ["onChange", "onSearch", "multiple", "options", "value", "emptyOption", "treeProps"];
 
@@ -118,5 +120,43 @@ // type TreeCheckedsProps = TreeCheckedProps & Partial<DropContent<SearchTagInputOption>>
 
+function SingeTree(props) {
+  var _useState5 = (0, _react.useState)([]),
+      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+      keys = _useState6[0],
+      keysSet = _useState6[1];
+
+  (0, _react.useEffect)(function () {
+    var _props$values2;
+
+    var keys = [];
+    if ((_props$values2 = props.values) !== null && _props$values2 !== void 0 && _props$values2.length) keys[0] = props.values[0].key;
+    keysSet(keys);
+  }, [props.values]);
+
+  var onSelected = function onSelected(_1, _2, isChecked, evn) {
+    var _props$onSelected2;
+
+    var key = evn.key,
+        label = evn.label;
+    var cur = {
+      key: key,
+      label: label
+    };
+    (_props$onSelected2 = props.onSelected) === null || _props$onSelected2 === void 0 ? void 0 : _props$onSelected2.call(props, [cur], cur, isChecked);
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTree["default"], (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
+    defaultExpandAll: true
+  }, props), {}, {
+    multiple: false,
+    data: props.options,
+    selectedKeys: keys,
+    onSelected: onSelected
+  }));
+}
+
 function SearchTree(props) {
   var onChange = props.onChange,
       onSearch = props.onSearch,
+      _props$multiple = props.multiple,
+      multiple = _props$multiple === void 0 ? true : _props$multiple,
       _props$options = props.options,
@@ -126,15 +166,22 @@ options = _props$options === void 0 ? [] : _props$options,
       value = _props$value === void 0 ? [] : _props$value,
+      _props$emptyOption = props.emptyOption,
+      emptyOption = _props$emptyOption === void 0 ? !options.length : _props$emptyOption,
       treeProps = props.treeProps,
       other = (0, _objectWithoutProperties2["default"])(props, _excluded);
 
-  var _useState5 = (0, _react.useState)(value),
-      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-      selectedValues = _useState6[0],
-      selectedValuesSet = _useState6[1];
-
-  var _useState7 = (0, _react.useState)(options),
+  var _useState7 = (0, _react.useState)(Array.isArray(value) ? value : [value]),
       _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
-      selectedOptions = _useState8[0],
-      selectedOptionSet = _useState8[1];
+      selectedValues = _useState8[0],
+      selectedValuesSet = _useState8[1];
 
+  var _useState9 = (0, _react.useState)(options),
+      _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
+      selectedOptions = _useState10[0],
+      selectedOptionSet = _useState10[1];
+
+  var _useState11 = (0, _react.useState)(emptyOption),
+      _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
+      isEmpty = _useState12[0],
+      isEmptySet = _useState12[1];
+
   (0, _react.useEffect)(function () {
@@ -183,5 +230,11 @@ selectedValuesSet(value);
     selectedOptionSet((0, _toConsumableArray2["default"])(options));
+    var isEmpt = true;
+    options.forEach(function (opt) {
+      return isEmpt = isEmpt && !!opt.hideNode;
+    });
+    isEmptySet(isEmpt);
   };
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SearchTagInput["default"], (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, other), {}, {
+    emptyOption: isEmpty,
     onSearch: debounce(selectedSearch, 700),
@@ -191,3 +244,3 @@ onChange: selectedChange,
     options: selectedOptions,
-    content: /*#__PURE__*/(0, _jsxRuntime.jsx)(TreeCheckeds, (0, _objectSpread2["default"])({}, treeProps))
+    content: multiple ? /*#__PURE__*/(0, _jsxRuntime.jsx)(TreeCheckeds, (0, _objectSpread2["default"])({}, treeProps)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(SingeTree, (0, _objectSpread2["default"])({}, treeProps))
   }));
@@ -194,0 +247,0 @@ }

cjs/SearchTagInput.d.ts

@@ -1,2 +0,2 @@
-import { ReactElement } from 'react';
+import React, { ReactElement } from 'react';
 import { DropdownProps } from '@uiw/react-dropdown';
@@ -22,4 +22,5 @@ import { IProps } from '@uiw/utils';
     placeholder?: string;
+    emptyOption?: boolean | React.ReactNode;
 }
 declare function SearchTagInput<V extends SearchTagInputOption>(props: SearchTagInputProps<V>): JSX.Element;
 export default SearchTagInput;

cjs/SearchTagInput.js

@@ -32,5 +32,7 @@ "use strict";
 
+var _reactEmpty = _interopRequireDefault(require("@uiw/react-empty"));
+
 var _jsxRuntime = require("react/jsx-runtime");
 
-var _excluded = ["prefixCls", "mode", "size", "disabled", "allowClear", "loading", "className", "style", "placeholder", "content", "options", "values", "onChange", "onSearch"];
+var _excluded = ["prefixCls", "mode", "size", "disabled", "allowClear", "loading", "className", "style", "placeholder", "content", "options", "values", "onChange", "onSearch", "emptyOption"];
 
@@ -58,17 +60,22 @@ function SearchTagInput(props) {
       onSearch = props.onSearch,
+      emptyOption = props.emptyOption,
       others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var cls = [prefixCls, className].filter(Boolean).join(' ').trim(); // const isMultiple = useMemo(() => mode === 'multiple', [mode]);
-  // const [innerIsOpen, setInnerIsOpen] = useState(false);
 
-  var _useState = (0, _react.useState)(values),
+  var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      selectedOption = _useState2[0],
-      setSelectedOption = _useState2[1];
+      innerIsOpen = _useState2[0],
+      setInnerIsOpen = _useState2[1];
 
+  var _useState3 = (0, _react.useState)(values),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      selectedOption = _useState4[0],
+      setSelectedOption = _useState4[1];
+
   var optionRef = (0, _react.useRef)();
 
-  var _useState3 = (0, _react.useState)(''),
-      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-      searchValue = _useState4[0],
-      searchValueSet = _useState4[1];
+  var _useState5 = (0, _react.useState)(''),
+      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+      searchValue = _useState6[0],
+      searchValueSet = _useState6[1];
 
@@ -79,6 +86,6 @@ optionRef.current = (0, _react.useMemo)(function () {
 
-  var _useState5 = (0, _react.useState)(''),
-      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-      selectIconType = _useState6[0],
-      setSelectIconType = _useState6[1];
+  var _useState7 = (0, _react.useState)(''),
+      _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+      selectIconType = _useState8[0],
+      setSelectIconType = _useState8[1];
 
@@ -115,4 +122,5 @@ var inputRef = (0, _react.useRef)(null);
 
-  function resetSelectedValue() {
-    // setInnerIsOpen(false);
+  function resetSelectedValue(e) {
+    e.stopPropagation();
+    setInnerIsOpen(false);
     setSelectedOption([]);
@@ -130,2 +138,11 @@ handleInputChange('');
   var newContent = (0, _react.useMemo)(function () {
+    if (emptyOption) {
+      return typeof emptyOption === 'boolean' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactEmpty["default"], {
+        style: {
+          minWidth: 200,
+          width: style === null || style === void 0 ? void 0 : style.width
+        }
+      }) : emptyOption;
+    }
+
     var newProps = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, content.props), {}, {
@@ -137,3 +154,3 @@ onSelected: handleSelectChange,
     return /*#__PURE__*/_react["default"].cloneElement(content, newProps);
-  }, [selectedOption, options]);
+  }, [selectedOption, options, emptyOption]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactDropdown["default"], (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
@@ -143,3 +160,7 @@ className: cls,
   }, others), {}, {
+    isOpen: innerIsOpen,
     menu: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactCard["default"], {
+      bodyStyle: emptyOption === true ? {
+        padding: 0
+      } : undefined,
       children: newContent
@@ -201,4 +222,3 @@ }),
             value: searchValue,
-            placeholder: selectedOption.length ? '' : placeholder // readOnly={false}
-
+            placeholder: selectedOption.length ? '' : placeholder
           })]
@@ -205,0 +225,0 @@ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {

esm/index.d.ts

@@ -0,1 +1,2 @@
+import React from 'react';
 import { DropContent, SearchTagInputOption } from './SearchTagInput';
@@ -10,4 +11,6 @@ import { TreeData } from '@uiw/react-tree';
     treeProps?: Omit<TreeCheckedProps, 'onSelected'> & Partial<DropContent<V>>;
+    emptyOption?: React.ReactNode;
+    multiple?: boolean;
 }
 declare function SearchTree<V extends SearchTagInputOption>(props: SearchTreeProps<V>): JSX.Element;
 export default SearchTree;

esm/index.js

 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/extends";
-var _excluded = ["onChange", "onSearch", "options", "value", "treeProps"];
+var _excluded = ["onChange", "onSearch", "multiple", "options", "value", "emptyOption", "treeProps"];
 import React, { useState, useEffect } from 'react';
 import SearchTagInput from './SearchTagInput';
+import Tree from '@uiw/react-tree';
 import TreeChecked from '@uiw/react-tree-checked';
@@ -80,2 +81,34 @@ import { jsx as _jsx } from "react/jsx-runtime";
 
+function SingeTree(props) {
+  var [keys, keysSet] = useState([]);
+  useEffect(() => {
+    var _props$values2;
+
+    var keys = [];
+    if ((_props$values2 = props.values) != null && _props$values2.length) keys[0] = props.values[0].key;
+    keysSet(keys);
+  }, [props.values]);
+
+  var onSelected = (_1, _2, isChecked, evn) => {
+    var {
+      key,
+      label
+    } = evn;
+    var cur = {
+      key,
+      label
+    };
+    props.onSelected == null ? void 0 : props.onSelected([cur], cur, isChecked);
+  };
+
+  return /*#__PURE__*/_jsx(Tree, _extends({
+    defaultExpandAll: true
+  }, props, {
+    multiple: false,
+    data: props.options,
+    selectedKeys: keys,
+    onSelected: onSelected
+  }));
+}
+
 function SearchTree(props) {
@@ -85,4 +118,6 @@ var {
     onSearch,
+    multiple = true,
     options = [],
     value = [],
+    emptyOption = !options.length,
     treeProps
@@ -92,4 +127,5 @@ } = props,
 
-  var [selectedValues, selectedValuesSet] = useState(value);
+  var [selectedValues, selectedValuesSet] = useState(Array.isArray(value) ? value : [value]);
   var [selectedOptions, selectedOptionSet] = useState(options);
+  var [isEmpty, isEmptySet] = useState(emptyOption);
   useEffect(() => {
@@ -136,5 +172,9 @@ selectedValuesSet(value);
     selectedOptionSet([...options]);
+    var isEmpt = true;
+    options.forEach(opt => isEmpt = isEmpt && !!opt.hideNode);
+    isEmptySet(isEmpt);
   };
 
   return /*#__PURE__*/_jsx(SearchTagInput, _extends({}, other, {
+    emptyOption: isEmpty,
     onSearch: debounce(selectedSearch, 700),
@@ -144,3 +184,3 @@ onChange: selectedChange,
     options: selectedOptions,
-    content: /*#__PURE__*/_jsx(TreeCheckeds, _extends({}, treeProps))
+    content: multiple ? /*#__PURE__*/_jsx(TreeCheckeds, _extends({}, treeProps)) : /*#__PURE__*/_jsx(SingeTree, _extends({}, treeProps))
   }));
@@ -147,0 +187,0 @@ }

esm/SearchTagInput.d.ts

@@ -1,2 +0,2 @@
-import { ReactElement } from 'react';
+import React, { ReactElement } from 'react';
 import { DropdownProps } from '@uiw/react-dropdown';
@@ -22,4 +22,5 @@ import { IProps } from '@uiw/utils';
     placeholder?: string;
+    emptyOption?: boolean | React.ReactNode;
 }
 declare function SearchTagInput<V extends SearchTagInputOption>(props: SearchTagInputProps<V>): JSX.Element;
 export default SearchTagInput;

esm/SearchTagInput.js

 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["prefixCls", "mode", "size", "disabled", "allowClear", "loading", "className", "style", "placeholder", "content", "options", "values", "onChange", "onSearch"];
+var _excluded = ["prefixCls", "mode", "size", "disabled", "allowClear", "loading", "className", "style", "placeholder", "content", "options", "values", "onChange", "onSearch", "emptyOption"];
 import React, { useMemo, useState, useRef, useEffect } from 'react';
@@ -10,2 +10,3 @@ import Dropdown from '@uiw/react-dropdown';
 import Card from '@uiw/react-card';
+import Empty from '@uiw/react-empty';
 import "./style/index.css";
@@ -30,3 +31,4 @@ import { jsx as _jsx } from "react/jsx-runtime";
     onChange,
-    onSearch
+    onSearch,
+    emptyOption
   } = props,
@@ -36,4 +38,4 @@ others = _objectWithoutPropertiesLoose(props, _excluded);
   var cls = [prefixCls, className].filter(Boolean).join(' ').trim(); // const isMultiple = useMemo(() => mode === 'multiple', [mode]);
-  // const [innerIsOpen, setInnerIsOpen] = useState(false);
 
+  var [innerIsOpen, setInnerIsOpen] = useState(false);
   var [selectedOption, setSelectedOption] = useState(values);
@@ -77,4 +79,5 @@ var optionRef = useRef();
 
-  function resetSelectedValue() {
-    // setInnerIsOpen(false);
+  function resetSelectedValue(e) {
+    e.stopPropagation();
+    setInnerIsOpen(false);
     setSelectedOption([]);
@@ -92,2 +95,11 @@ handleInputChange('');
   var newContent = useMemo(() => {
+    if (emptyOption) {
+      return typeof emptyOption === 'boolean' ? /*#__PURE__*/_jsx(Empty, {
+        style: {
+          minWidth: 200,
+          width: style == null ? void 0 : style.width
+        }
+      }) : emptyOption;
+    }
+
     var newProps = _extends({}, content.props, {
@@ -100,3 +112,3 @@ onSelected: handleSelectChange,
     return /*#__PURE__*/React.cloneElement(content, newProps);
-  }, [selectedOption, options]);
+  }, [selectedOption, options, emptyOption]);
   return /*#__PURE__*/_jsx(Dropdown, _extends({
@@ -106,3 +118,7 @@ className: cls,
   }, others, {
+    isOpen: innerIsOpen,
     menu: /*#__PURE__*/_jsx(Card, {
+      bodyStyle: emptyOption === true ? {
+        padding: 0
+      } : undefined,
       children: newContent
@@ -158,4 +174,3 @@ }),
             value: searchValue,
-            placeholder: selectedOption.length ? '' : placeholder // readOnly={false}
-
+            placeholder: selectedOption.length ? '' : placeholder
           })]
@@ -162,0 +177,0 @@ }), /*#__PURE__*/_jsx("span", {

package.json

 {
   "name": "@uiw/react-search-tree",
-  "version": "4.13.3",
+  "version": "4.13.4",
   "description": "TreeChecked component",
@@ -46,11 +46,12 @@ "homepage": "https://uiwjs.github.io/#/components/search-tree",
   "dependencies": {
-    "@uiw/react-card": "^4.13.3",
-    "@uiw/react-checkbox": "^4.13.3",
-    "@uiw/react-dropdown": "^4.13.3",
-    "@uiw/react-icon": "^4.13.3",
-    "@uiw/react-input": "^4.13.3",
-    "@uiw/react-tag": "^4.13.3",
-    "@uiw/react-tree": "^4.13.3",
-    "@uiw/react-tree-checked": "^4.13.3",
-    "@uiw/utils": "^4.13.3"
+    "@uiw/react-card": "^4.13.4",
+    "@uiw/react-checkbox": "^4.13.4",
+    "@uiw/react-dropdown": "^4.13.4",
+    "@uiw/react-empty": "^4.13.4",
+    "@uiw/react-icon": "^4.13.4",
+    "@uiw/react-input": "^4.13.4",
+    "@uiw/react-tag": "^4.13.4",
+    "@uiw/react-tree": "^4.13.4",
+    "@uiw/react-tree-checked": "^4.13.4",
+    "@uiw/utils": "^4.13.4"
   },
@@ -57,0 +58,0 @@ "devDependencies": {

README.md

@@ -64,2 +64,3 @@ SearchTree 带搜索的Tree选择控件
 const [value,valueSet]=useState([{ label: '东花市街道', key: '2-3-1' }])
+const [valueSinge,valueSingeSet]=useState([{ label: '上海市', key: '1-0-0' }])
 
@@ -71,14 +72,64 @@ const onChange=(selectd, selectedAll,  isChecked)=>{
 
- return (<SearchTree
-    allowClear={true}
-    onSearch={(searchValue)=>console.log('SearchTree-> SearchTreeOption',searchValue)}
-    onChange={onChange}
-    value={value}
-    options={data}
-    placeholder="请输入选择"
-  />)
+const onChangeSinge=(selectd, selectedAll,  isChecked)=>{
+  console.log('SearchTree-> onChange', selectd, selectedAll, isChecked)
+  valueSingeSet(selectedAll)
 }
+
+ return (
+    <Row>
+      <Col >
+        <label>多选</label>
+        <SearchTree
+          style={{width:400}}
+          allowClear={true}
+          onSearch={(searchValue)=>console.log('multiple',searchValue)}
+          onChange={onChange}
+          value={value}
+          options={data}
+          placeholder="请输入选择"
+        />
+      </Col>
+      <Col >
+        <label>单选</label>
+        <SearchTree
+          style={{width:400}}
+          multiple={false}
+          allowClear={true}
+          onSearch={(searchValue)=>console.log('singe',searchValue)}
+          onChange={onChangeSinge}
+          value={valueSinge}
+          options={data}
+          placeholder="请输入选择"
+        />
+      </Col>
+
+    </Row>
+  )
+}
 ReactDOM.render(<Demo />, _mount_);
 ```
 
+## 自定义空选项
+
+<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
+```jsx
+import React, { useState, useEffect, useRef } from 'react';
+import {  SearchTree } from 'uiw';
+
+const Demo = () => {
+  return(
+    <>
+      <SearchTree style={{ width:200 }} />
+      <SearchTree
+        style={{ width:200,marginTop:5 }}
+        emptyOption={<span>暂无数据..</span>}
+        placeholder="请输入选择"
+      />
+    </>
+  )
+}
+
+ReactDOM.render(<Demo />, _mount_);
+```
+
 ## Form中使用
@@ -135,3 +186,6 @@
   const setValue=()=>{
-    form.current.setFields({ searchTree: [{ label: '东城区', key: '2-1-0' }, { label: '外滩街道', key: '1-3-0' }] })
+    form.current.setFields({
+      searchTree: [{ label: '东城区', key: '2-1-0' }, { label: '外滩街道', key: '1-3-0' }],
+      searchTreeSinge:[{ label: '前门街道', key: '2-3-3' }]
+       })
   }
@@ -156,4 +210,4 @@
           const errorObj = {};
-          if (!current.selectField) {
-            errorObj.selectField = '默认需要选择内容，选择入内容';
+          if (!current.searchTree) {
+            errorObj.searchTree = '默认需要选择内容，选择入内容';
           }
@@ -184,2 +238,15 @@ if(Object.keys(errorObj).length > 0) {
           },
+          searchTreeSinge: {
+            initialValue:[{ label: '东花市街道', key: '2-3-1' }],
+            children: (
+                <SearchTree
+                  multiple={false}
+                  allowClear={true}
+                  onSearch={(searchValue)=>console.log('SearchTree-> SearchTreeOption',searchValue)}
+                  onChange={(selectd, selectedAll,  isChecked)=>console.log('SearchTree-> onChange', selectd, selectedAll, isChecked)}
+                  options={data}
+                  placeholder="请输入选择"
+                />
+            )
+          },
         }}
@@ -194,2 +261,5 @@ >
               <Row>
+                <Col fixed>{fields.searchTreeSinge}</Col>
+              </Row>
+              <Row>
                 <Col fixed>
@@ -224,2 +294,3 @@ <Button disabled={!canSubmit()} type="primary" htmlType="submit">提交</Button>
 | disabled | 禁用选择器 | Boolean | `false` |
+| multiple | 是否可以多选 | Boolean | `true` |
 | value | 指定当前选中的条目 | [{label:string, key:string}] | - |
@@ -232,2 +303,3 @@ | options | 下拉数据源,可参考Tree下拉数据源 | [{label:string, key:string, children: [{label:string, key:string}] }] | - |
 | loading | 加载中状态 | Boolean | `false` |
+| emptyOption | 自定义下拉选项为空时显示内容 | React.ReactNode | [Empty](https://uiwjs.github.io/#/components/empty) |
 

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

113373

increased by15.93%

Lines of code

1229

increased by16.38%

Number of lines in readme file

298

increased by31.86%

Worsened metrics

Dependency count

12

increased by9.09%

Dependency changes

• + Added@uiw/react-empty@^4.13.4

• + Added@uiw/react-empty@4.22.3(transitive)

• Updated@uiw/react-card@^4.13.4

• Updated@uiw/react-checkbox@^4.13.4

• Updated@uiw/react-dropdown@^4.13.4

• Updated@uiw/react-icon@^4.13.4

• Updated@uiw/react-input@^4.13.4

• Updated@uiw/react-tag@^4.13.4

• Updated@uiw/react-tree@^4.13.4

• Updated@uiw/react-tree-checked@^4.13.4

• Updated@uiw/utils@^4.13.4