dashboard/src/components/search/GroupSelect.jsx

import React, { Component } from 'react';
import { Select } from 'antd';
import { observer } from 'mobx-react';
import { groups, leafGroup } from '../../libs/ht';

class GroupSelect extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    const { store, mode, value, onChange, show_all, isLeaf, ...extProps } = this.props;
    const _mode = mode || store?.group_select_mode || null;
    const _show_all = ['tags', 'multiple'].includes(_mode) ? false : show_all;
    const options = isLeaf===true ? leafGroup : groups;
    return (
      <div>
        <Select
          mode={_mode}
          style={{ width: '100%' }}
          placeholder="选择小组"
          value={value || store?.groups || undefined} // { key: '0', label: '所有小组' }
          onChange={(value) => {
            if (typeof onChange === 'function') {
              onChange(value);
            }
            store?.group_handleChange(value);
          }}
          labelInValue={false}
          maxTagCount={1}
          maxTagPlaceholder={(omittedValues) => `+${omittedValues.length}...`}
          allowClear={_mode != null}
          {...extProps}
        >
          {_show_all ? (
            <Select.Option key="ALL" value="ALL">
              所有小组
            </Select.Option>
          ) : (
            ''
          )}
          {options.map((ele) => (
            <Select.Option key={ele.key} value={ele.key}>
              {ele.label}
            </Select.Option>
          ))}
        </Select>
      </div>
    );
  }
}

export default observer(GroupSelect);