Nemcio/SCM-Manager
1
0
Fork 0
mirror of https://github.com/scm-manager/scm-manager.git synced 2025-11-10 07:25:44 +01:00
Code Issues Packages Projects Releases Activity

Make namespace drop down take full width

Browse Source
This commit is contained in:
René Pfeuffer
2020-09-08 08:15:16 +02:00
parent 6a7e945ca1
commit 589b844e28
3 changed files with 12 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
scm-ui/ui-components/src/OverviewPageActions.tsx
View File

@@ -43,6 +43,7 @@ class OverviewPageActions extends React.Component<Props> {
const groupSelector = groups && ( const groupSelector = groups && (
<div className={"column is-flex"}> <div className={"column is-flex"}>
<DropDown <DropDown
className={"is-fullwidth"}
options={groups} options={groups}
preselectedOption={currentGroup} preselectedOption={currentGroup}
optionSelected={groupSelected} optionSelected={groupSelected}

4
scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
View File

@@ -912,6 +912,7 @@ exports[`Storyshots BranchSelector Default 1`] = `
className="is-fullwidth select" className="is-fullwidth select"
> >
<select <select
className="DropDown__FullWidthSelect-jjsyoc-0 cHVjbs"
disabled={false} disabled={false}
onChange={[Function]} onChange={[Function]}
value="" value=""
@@ -44317,6 +44318,7 @@ exports[`Storyshots Forms|DropDown Add preselect if missing in options 1`] = `
className="select" className="select"
> >
<select <select
className="DropDown__FullWidthSelect-jjsyoc-0 cHVjbs"
onChange={[Function]} onChange={[Function]}
value="D" value="D"
> >
@@ -44353,6 +44355,7 @@ exports[`Storyshots Forms|DropDown Default 1`] = `
className="select" className="select"
> >
<select <select
className="DropDown__FullWidthSelect-jjsyoc-0 cHVjbs"
onChange={[Function]} onChange={[Function]}
value="de" value="de"
> >
@@ -44383,6 +44386,7 @@ exports[`Storyshots Forms|DropDown With Translation 1`] = `
className="select" className="select"
> >
<select <select
className="DropDown__FullWidthSelect-jjsyoc-0 cHVjbs"
onChange={[Function]} onChange={[Function]}
value="dirk" value="dirk"
> >

9
scm-ui/ui-components/src/forms/DropDown.tsx
View File

@@ -23,6 +23,7 @@
*/ */
import React, { ChangeEvent } from "react"; import React, { ChangeEvent } from "react";
import classNames from "classnames"; import classNames from "classnames";
import styled from "styled-components";
type Props = { type Props = {
options: string[]; options: string[];
@@ -33,6 +34,10 @@ type Props = {
disabled?: boolean; disabled?: boolean;
}; };
const FullWidthSelect = styled.select`
width: 100%;
`;
class DropDown extends React.Component<Props> { class DropDown extends React.Component<Props> {
render() { render() {
const { options, optionValues, preselectedOption, className, disabled } = this.props; const { options, optionValues, preselectedOption, className, disabled } = this.props;
@@ -43,7 +48,7 @@ class DropDown extends React.Component<Props> {
return ( return (
<div className={classNames(className, "select", disabled ? "disabled" : "")}> <div className={classNames(className, "select", disabled ? "disabled" : "")}>
<select value={preselectedOption ? preselectedOption : ""} onChange={this.change} disabled={disabled}> <FullWidthSelect value={preselectedOption ? preselectedOption : ""} onChange={this.change} disabled={disabled}>
{options.map((option, index) => { {options.map((option, index) => {
const value = optionValues && optionValues[index] ? optionValues[index] : option; const value = optionValues && optionValues[index] ? optionValues[index] : option;
return ( return (
@@ -52,7 +57,7 @@ class DropDown extends React.Component<Props> {
</option> </option>
); );
})} })}
</select> </FullWidthSelect>
</div> </div>
); );
} }