1
0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-11 03:41:12 +00:00

change select UI (#7178)

This commit is contained in:
Michael An
2024-12-14 13:17:21 +08:00
committed by GitHub
parent de925b1e21
commit f07dfc65cb
6 changed files with 10 additions and 18 deletions

View File

@@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import Select, { components, createFilter } from 'react-select'; import Select, { components } from 'react-select';
import { MenuSelectStyle } from './seahub-select-style'; import { MenuSelectStyle } from './seahub-select-style';
const ClearIndicator = ({ innerProps, ...props }) => { const ClearIndicator = ({ innerProps, ...props }) => {
@@ -64,8 +64,8 @@ export default class SeahubSelect extends React.Component {
options: [], options: [],
value: {}, value: {},
isDisabled: false, isDisabled: false,
isSearchable: false, isSearchable: true,
isClearable: false, isClearable: true,
placeholder: '', placeholder: '',
isMulti: false, isMulti: false,
menuPortalTarget: '.modal', menuPortalTarget: '.modal',
@@ -94,10 +94,6 @@ export default class SeahubSelect extends React.Component {
classNamePrefix={classNamePrefix} classNamePrefix={classNamePrefix}
styles={MenuSelectStyle} styles={MenuSelectStyle}
components={{ Option, MenuList, ClearIndicator }} components={{ Option, MenuList, ClearIndicator }}
filterOption={createFilter({
matchFrom: 'any',
stringify: option => `${option.data.labelValue}`,
})}
placeholder={placeholder} placeholder={placeholder}
isSearchable={isSearchable} isSearchable={isSearchable}
isClearable={isClearable} isClearable={isClearable}

View File

@@ -5,7 +5,7 @@ import { gettext, isPro } from '../../utils/constants';
import wikiAPI from '../../utils/wiki-api'; import wikiAPI from '../../utils/wiki-api';
import { Utils } from '../../utils/utils'; import { Utils } from '../../utils/utils';
import toaster from '../toast'; import toaster from '../toast';
import { SeahubSelect, NoOptionsStyle } from '../common/select'; import { SeahubSelect } from '../common/select';
const propTypes = { const propTypes = {
toggleCancel: PropTypes.func.isRequired, toggleCancel: PropTypes.func.isRequired,
@@ -96,9 +96,6 @@ class AddWikiDialog extends React.Component {
placeholder={gettext('Select a department')} placeholder={gettext('Select a department')}
maxMenuHeight={200} maxMenuHeight={200}
value={this.state.selectedOption} value={this.state.selectedOption}
components={{ NoOptionsMessage: (
<div style={NoOptionsStyle}>{gettext('No department')}</div>
) }}
noOptionsMessage={() => {return gettext('No options available');}} noOptionsMessage={() => {return gettext('No options available');}}
/> />
</> </>

View File

@@ -5,7 +5,7 @@ import { gettext, isPro } from '../../utils/constants';
import wikiAPI from '../../utils/wiki-api'; import wikiAPI from '../../utils/wiki-api';
import { Utils } from '../../utils/utils'; import { Utils } from '../../utils/utils';
import toaster from '../toast'; import toaster from '../toast';
import { SeahubSelect, NoOptionsStyle } from '../common/select'; import { SeahubSelect } from '../common/select';
const propTypes = { const propTypes = {
toggleCancel: PropTypes.func.isRequired, toggleCancel: PropTypes.func.isRequired,
@@ -92,9 +92,6 @@ class ConvertWikiDialog extends React.Component {
placeholder={gettext('Select a department')} placeholder={gettext('Select a department')}
maxMenuHeight={200} maxMenuHeight={200}
value={this.state.selectedOption} value={this.state.selectedOption}
components={{ NoOptionsMessage: (
<div style={NoOptionsStyle}>{gettext('No department')}</div>
) }}
noOptionsMessage={() => {return gettext('No options available');}} noOptionsMessage={() => {return gettext('No options available');}}
/> />
</> </>

View File

@@ -302,7 +302,7 @@ class LibSubFolderSetGroupPermissionDialog extends React.Component {
placeholder={gettext('Select a group')} placeholder={gettext('Select a group')}
maxMenuHeight={200} maxMenuHeight={200}
value={this.state.selectedOption} value={this.state.selectedOption}
components={{ NoOptionsMessage: NoGroupMessage }} noOptionsMessage={NoGroupMessage}
/> />
</td> </td>
{showPath && {showPath &&

View File

@@ -353,7 +353,9 @@ class ShareToGroup extends React.Component {
placeholder={gettext('Select groups')} placeholder={gettext('Select groups')}
maxMenuHeight={200} maxMenuHeight={200}
value={this.state.selectedOption} value={this.state.selectedOption}
components={{ NoOptionsMessage: NoGroupMessage }} noOptionsMessage={NoGroupMessage}
isSearchable={true}
isClearable={true}
/> />
</td> </td>
<td> <td>

View File

@@ -253,7 +253,7 @@ class SysAdminShareToGroup extends React.Component {
placeholder={gettext('Select groups')} placeholder={gettext('Select groups')}
maxMenuHeight={200} maxMenuHeight={200}
value={this.state.selectedOption} value={this.state.selectedOption}
components={{ NoOptionsMessage: NoGroupMessage }} noOptionsMessage={NoGroupMessage}
/> />
</td> </td>
<td> <td>