✨ feat(v1): 增加人员列表为单选props

增加 selectionType, 默认为 checkbox 多选, 设置为 radio 后为单选

✨ feat(v1): 增加人员列表为单选props
增加 selectionType, 默认为 checkbox 多选, 设置为 radio 后为单选
35f9573c · vkingw · e7b44bd1 · 35f9573c · 35f9573c · 35f9573c
Commit 35f9573c authored 3 years ago by vkingw
Expand all Hide whitespace changes
Inline Side-by-side

Showing

with 180 additions and 23 deletions
+180 -23
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,22 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).

+## [0.0.10] - 2022-04-21
+
+### Added
+
+- none
+
+### Changed
+
+- add props selectionType, default is 'checkbox', when you set 'radio' it will be a radio button.
+
+### Removed
+
+- none
+
+&nbsp;
+
 ## [0.0.9] - 2020-12-23

 ### Added

--- a/dist/index.es.js
+++ b/dist/index.es.js
@@ -27,6 +27,21 @@ import _Checkbox from 'antd/es/checkbox';
 import 'antd/es/tree/style';
 import _Tree from 'antd/es/tree';

+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
 function _extends() {
  _extends = Object.assign || function (target) {
    for (var i = 1; i < arguments.length; i++) {
@@ -45,6 +60,40 @@ function _extends() {
  return _extends.apply(this, arguments);
 }

+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    if (enumerableOnly) symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    });
+    keys.push.apply(keys, symbols);
+  }
+
+  return keys;
+}
+
+function _objectSpread2(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {};
+
+    if (i % 2) {
+      ownKeys(Object(source), true).forEach(function (key) {
+        _defineProperty(target, key, source[key]);
+      });
+    } else if (Object.getOwnPropertyDescriptors) {
+      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+      ownKeys(Object(source)).forEach(function (key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      });
+    }
+  }
+
+  return target;
+}
+
 function _slicedToArray(arr, i) {
  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
@@ -150,7 +199,8 @@ var Right = (function (_ref) {
      tableColumnsKey = _ref.tableColumnsKey,
      tableRowKey = _ref.tableRowKey,
      emptyTip = _ref.emptyTip,
-      tableCheckboxDisabled = _ref.tableCheckboxDisabled;
+      tableCheckboxDisabled = _ref.tableCheckboxDisabled,
+      selectionType = _ref.selectionType;

  var _useState = useState([]),
      _useState2 = _slicedToArray(_useState, 2),
@@ -205,6 +255,12 @@ var Right = (function (_ref) {

  var onSelect = function onSelect(record, selected) {
    if (selected) {
+      if (selectionType === 'radio') {
+        setSelectUser([record]);
+        updateSelectUsers([record]);
+        return;
+      }
+
      var tmp = [];
      tmp.push(record);
      var newList = selectUser.concat(tmp);
@@ -264,11 +320,13 @@ var Right = (function (_ref) {
    onChange: handleSearchChange
  }), /*#__PURE__*/React.createElement(_Table, {
    size: 'small',
-    rowSelection: rowSelection,
+    rowSelection: _objectSpread2({
+      type: selectionType
+    }, rowSelection),
    columns: columns,
    style: {
      marginTop: 2,
-      height: 281
+      height: 288
    },
    dataSource: userData.records,
    pagination: false,
@@ -621,7 +679,8 @@ var Contacts = function Contacts(props) {
      emptyTip = props.emptyTip,
      _props$debug = props.debug,
      debug = _props$debug === void 0 ? false : _props$debug,
-      tableCheckboxDisabled = props.tableCheckboxDisabled;
+      tableCheckboxDisabled = props.tableCheckboxDisabled,
+      selectionType = props.selectionType;

  var _useState = useState([]),
      _useState2 = _slicedToArray(_useState, 2),
@@ -797,7 +856,8 @@ var Contacts = function Contacts(props) {
    tableColumnsKey: tableColumnsKey,
    tableRowKey: tableRowKey,
    emptyTip: emptyTip,
-    tableCheckboxDisabled: tableCheckboxDisabled
+    tableCheckboxDisabled: tableCheckboxDisabled,
+    selectionType: selectionType
  }))), /*#__PURE__*/React.createElement("div", {
    className: styles.pagination2
  }, /*#__PURE__*/React.createElement(_Pagination, {
@@ -855,7 +915,8 @@ Contacts.propTypes = {
  showAllDeptTags: PropTypes.bool,
  // 返回精简节点，如果为true，只返回精简的节点，比如子节点全部选中，只返回父节点一个node
  returnReducedNode: PropTypes.bool,
-  tableCheckboxDisabled: PropTypes.array
+  tableCheckboxDisabled: PropTypes.array,
+  selectionType: PropTypes.oneOf(['checkbox', 'radio'])
 };
 Contacts.defaultProps = {
  users: {
@@ -887,7 +948,8 @@ Contacts.defaultProps = {
  tableColumnsKey: ['chsName', 'accountName'],
  tableRowKey: 'accountName',
  emptyTip: '什么都没有哦~',
-  tableCheckboxDisabled: []
+  tableCheckboxDisabled: [],
+  selectionType: 'checkbox'
 };

 export default Contacts;

--- a/dist/index.es.js.map
+++ b/dist/index.es.js.map
--- a/dist/index.js
+++ b/dist/index.js
@@ -32,6 +32,21 @@ var _Checkbox = _interopDefault(require('antd/es/checkbox'));
 require('antd/es/tree/style');
 var _Tree = _interopDefault(require('antd/es/tree'));

+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
 function _extends() {
  _extends = Object.assign || function (target) {
    for (var i = 1; i < arguments.length; i++) {
@@ -50,6 +65,40 @@ function _extends() {
  return _extends.apply(this, arguments);
 }

+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    if (enumerableOnly) symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    });
+    keys.push.apply(keys, symbols);
+  }
+
+  return keys;
+}
+
+function _objectSpread2(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {};
+
+    if (i % 2) {
+      ownKeys(Object(source), true).forEach(function (key) {
+        _defineProperty(target, key, source[key]);
+      });
+    } else if (Object.getOwnPropertyDescriptors) {
+      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+      ownKeys(Object(source)).forEach(function (key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      });
+    }
+  }
+
+  return target;
+}
+
 function _slicedToArray(arr, i) {
  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
@@ -155,7 +204,8 @@ var Right = (function (_ref) {
      tableColumnsKey = _ref.tableColumnsKey,
      tableRowKey = _ref.tableRowKey,
      emptyTip = _ref.emptyTip,
-      tableCheckboxDisabled = _ref.tableCheckboxDisabled;
+      tableCheckboxDisabled = _ref.tableCheckboxDisabled,
+      selectionType = _ref.selectionType;

  var _useState = React.useState([]),
      _useState2 = _slicedToArray(_useState, 2),
@@ -210,6 +260,12 @@ var Right = (function (_ref) {

  var onSelect = function onSelect(record, selected) {
    if (selected) {
+      if (selectionType === 'radio') {
+        setSelectUser([record]);
+        updateSelectUsers([record]);
+        return;
+      }
+
      var tmp = [];
      tmp.push(record);
      var newList = selectUser.concat(tmp);
@@ -269,11 +325,13 @@ var Right = (function (_ref) {
    onChange: handleSearchChange
  }), /*#__PURE__*/React__default.createElement(_Table, {
    size: 'small',
-    rowSelection: rowSelection,
+    rowSelection: _objectSpread2({
+      type: selectionType
+    }, rowSelection),
    columns: columns,
    style: {
      marginTop: 2,
-      height: 281
+      height: 288
    },
    dataSource: userData.records,
    pagination: false,
@@ -626,7 +684,8 @@ var Contacts = function Contacts(props) {
      emptyTip = props.emptyTip,
      _props$debug = props.debug,
      debug = _props$debug === void 0 ? false : _props$debug,
-      tableCheckboxDisabled = props.tableCheckboxDisabled;
+      tableCheckboxDisabled = props.tableCheckboxDisabled,
+      selectionType = props.selectionType;

  var _useState = React.useState([]),
      _useState2 = _slicedToArray(_useState, 2),
@@ -802,7 +861,8 @@ var Contacts = function Contacts(props) {
    tableColumnsKey: tableColumnsKey,
    tableRowKey: tableRowKey,
    emptyTip: emptyTip,
-    tableCheckboxDisabled: tableCheckboxDisabled
+    tableCheckboxDisabled: tableCheckboxDisabled,
+    selectionType: selectionType
  }))), /*#__PURE__*/React__default.createElement("div", {
    className: styles.pagination2
  }, /*#__PURE__*/React__default.createElement(_Pagination, {
@@ -860,7 +920,8 @@ Contacts.propTypes = {
  showAllDeptTags: PropTypes.bool,
  // 返回精简节点，如果为true，只返回精简的节点，比如子节点全部选中，只返回父节点一个node
  returnReducedNode: PropTypes.bool,
-  tableCheckboxDisabled: PropTypes.array
+  tableCheckboxDisabled: PropTypes.array,
+  selectionType: PropTypes.oneOf(['checkbox', 'radio'])
 };
 Contacts.defaultProps = {
  users: {
@@ -892,7 +953,8 @@ Contacts.defaultProps = {
  tableColumnsKey: ['chsName', 'accountName'],
  tableRowKey: 'accountName',
  emptyTip: '什么都没有哦~',
-  tableCheckboxDisabled: []
+  tableCheckboxDisabled: [],
+  selectionType: 'checkbox'
 };

 module.exports = Contacts;

--- a/dist/index.js.map
+++ b/dist/index.js.map
--- a/src/components/contacts.js
+++ b/src/components/contacts.js
@@ -23,7 +23,7 @@ const Contacts = (props) => {
    numberColor, totalShowText, handleSearchUser, updateSelectUsers, defaultUserSelected,
    defaultDeptSelected, updateSelectDept, userNameKey, deptNameKey, radio,
    checkStrictly, nameText, workNumberNumber, tableColumnsKey, tableRowKey, emptyTip,debug=false,
-    tableCheckboxDisabled
+    tableCheckboxDisabled, selectionType
  } = props;

  const [deptTreeNode, setDeptTreeNode] = useState([]);
@@ -144,7 +144,7 @@ const Contacts = (props) => {
                 handleSearch={handleSearch} userNameKey={userNameKey} deptId={deptId}
                 setSelectUser={setSelectUser} radio={radio} nameText={nameText}
                 workNumberNumber={workNumberNumber} tableColumnsKey={tableColumnsKey} tableRowKey={tableRowKey}
-                 emptyTip={emptyTip} tableCheckboxDisabled={tableCheckboxDisabled}/>
+                 emptyTip={emptyTip} tableCheckboxDisabled={tableCheckboxDisabled} selectionType={selectionType}/>
        </div>
        <div className={styles.pagination2}>
          <Pagination
@@ -201,7 +201,8 @@ Contacts.propTypes = {
  showAllDeptTags: PropTypes.bool,
  // 返回精简节点，如果为true，只返回精简的节点，比如子节点全部选中，只返回父节点一个node
  returnReducedNode: PropTypes.bool,
-  tableCheckboxDisabled: PropTypes.array
+  tableCheckboxDisabled: PropTypes.array,
+  selectionType: PropTypes.oneOf(['checkbox', 'radio']),
 };

 Contacts.defaultProps = {
@@ -234,7 +235,8 @@ Contacts.defaultProps = {
  tableColumnsKey: ['chsName', 'accountName'],
  tableRowKey: 'accountName',
  emptyTip: '什么都没有哦~',
-  tableCheckboxDisabled:[]
+  tableCheckboxDisabled:[],
+  selectionType:'checkbox',
 };

 export default Contacts;
--- a/src/components/right.js
+++ b/src/components/right.js
@@ -10,7 +10,8 @@ export default ({
                  searchUserPlaceholder, deptSearch, userData,
                  handleSearch, updateSelectUsers,
                  setOnSearch, setNameKey, selectUser, setSelectUser,
-                  nameText, workNumberNumber, tableColumnsKey, tableRowKey, emptyTip,tableCheckboxDisabled
+                  nameText, workNumberNumber, tableColumnsKey, tableRowKey, emptyTip,tableCheckboxDisabled,
+                  selectionType
                }) => {

  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
@@ -58,6 +59,11 @@ export default ({

  const onSelect = (record, selected) => {
    if (selected) {
+      if(selectionType === 'radio'){
+        setSelectUser([record]);
+        updateSelectUsers([record]);
+        return
+      }
      const tmp = [];
      tmp.push(record);
      const newList = selectUser.concat(tmp);
@@ -107,8 +113,16 @@ export default ({
                  onChange={handleSearchChange}
          />
        )}
-        <Table size={'small'} rowSelection={rowSelection} columns={columns} style={{marginTop: 2, height: 288}}
-               dataSource={userData.records} pagination={false} rowKey={record => record[tableRowKey]}
+        <Table size={'small'}
+               rowSelection={{
+                 type: selectionType,
+                ...rowSelection
+        }}
+               columns={columns}
+               style={{marginTop: 2, height: 288}}
+               dataSource={userData.records}
+               pagination={false}
+               rowKey={record => record[tableRowKey]}
               locale={{
                 emptyText: <div style={{marginTop: 24}}><img alt={'f'} style={{width: 80, height: 80}} src={emptyImg}/><br/>
                   <div style={{height: 10}}/>

--- a/src/example/index.js
+++ b/src/example/index.js
@@ -28,6 +28,7 @@ ReactDOM.render(<div className="App"
              deptSearch={true} userSearch={true} deptCheckBox={true} searchUserPlaceholder={'HI'}
              updateSelectUsers={updateSelectUsers} handleSearchUser={() => userList} updateSelectDept={updateSelectDept}
              defaultDeptSelected={dept} radio={false}
+              selectionType={'radio'}
    />
  </div>
 </div>, document.getElementById('root'));