TagsInput: Make placeholder configurable (#30718)

PLUS
- width prop isn't actually used and thus might give users of this component the wrong idea, so I removed it from the type (and in `DataSourceHttpSettings`)
- Added storybook props table
This commit is contained in:
Andreas Opferkuch 2021-01-29 17:19:15 +01:00 committed by GitHub
parent 8bf09161fb
commit 7d4c51459f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 6 additions and 3 deletions

View File

@ -160,7 +160,6 @@ export const DataSourceHttpSettings: React.FC<HttpSettingsProps> = (props) => {
onChange={(cookies) => onChange={(cookies) =>
onSettingsChange({ jsonData: { ...dataSourceConfig.jsonData, keepCookies: cookies } }) onSettingsChange({ jsonData: { ...dataSourceConfig.jsonData, keepCookies: cookies } })
} }
width={20}
/> />
</div> </div>
)} )}

View File

@ -6,3 +6,6 @@ import { TagsInput } from './TagsInput';
# TagsInput # TagsInput
A set of an input field and a button next to it that allows the user to add new tags. The added tags are previewed under the input and can be removed there by clicking the "X" icon. You can customize the width of the input. A set of an input field and a button next to it that allows the user to add new tags. The added tags are previewed under the input and can be removed there by clicking the "X" icon. You can customize the width of the input.
### Props
<Props of={TagsInput} />

View File

@ -6,8 +6,8 @@ import { Input } from '../Forms/Legacy/Input/Input';
import { TagItem } from './TagItem'; import { TagItem } from './TagItem';
interface Props { interface Props {
placeholder?: string;
tags?: string[]; tags?: string[];
width?: number;
onChange: (tags: string[]) => void; onChange: (tags: string[]) => void;
} }
@ -80,6 +80,7 @@ export class TagsInput extends PureComponent<Props, State> {
}; };
render() { render() {
const { placeholder = 'Add name' } = this.props;
const { tags, newTag } = this.state; const { tags, newTag } = this.state;
const getStyles = stylesFactory(() => ({ const getStyles = stylesFactory(() => ({
@ -104,7 +105,7 @@ export class TagsInput extends PureComponent<Props, State> {
` `
)} )}
> >
<Input placeholder="Add Name" onChange={this.onNameChange} value={newTag} onKeyUp={this.onKeyboardAdd} /> <Input placeholder={placeholder} onChange={this.onNameChange} value={newTag} onKeyUp={this.onKeyboardAdd} />
<Button className={getStyles().addButtonStyle} onClick={this.onAdd} variant="secondary" size="md"> <Button className={getStyles().addButtonStyle} onClick={this.onAdd} variant="secondary" size="md">
Add Add
</Button> </Button>