Skip to content

Commit

Permalink
feat(core/presentation): Support inline radio buttons (#7078)
Browse files Browse the repository at this point in the history
- Remove inline checkbox and radio button CSS tweaks (revert
margin/padding to Bootstrap 3 defaults)
- Add margin hack for inline radio/checkboxes to support wrapping to the
next line
  • Loading branch information
christopherthielen committed Jun 4, 2019
1 parent fb2b002 commit 9bbc002
Show file tree
Hide file tree
Showing 3 changed files with 42 additions and 27 deletions.
2 changes: 1 addition & 1 deletion app/scripts/modules/core/src/entityTag/EntityTagEditor.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -190,7 +190,7 @@ export class EntityTagEditor extends React.Component<IEntityTagEditorProps, IEnt
const option = ownerOptions.find(opt => opt.label === evt.target.value);
setFieldValue('ownerOption', option);
}}
input={props => <RadioButtonInput {...props} options={ownerOptions.map(opt => opt.label)} />}
input={props => <RadioButtonInput {...props} stringOptions={ownerOptions.map(opt => opt.label)} />}
/>
)}
</Modal.Body>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,40 +1,52 @@
import * as React from 'react';
import { Option } from 'react-select';

import { Markdown, OmitControlledInputPropsFrom, StringsAsOptions } from 'core/presentation';
import { Markdown, OmitControlledInputPropsFrom } from 'core/presentation';

import { isStringArray, orEmptyString, validationClassName } from './utils';
import { IFormInputProps } from '../interface';

interface IRadioButtonInputProps
extends IFormInputProps,
OmitControlledInputPropsFrom<React.TextareaHTMLAttributes<any>> {
options: Array<string | Option<string | number>>;
stringOptions?: string[];
options?: Option[];
inputClassName?: string;
inline?: boolean;
}

export const RadioButtonInput = (props: IRadioButtonInputProps) => {
const { value, validation, inputClassName, options, ...otherProps } = props;
const className = `RadioButtonInput radio ${orEmptyString(inputClassName)} ${validationClassName(validation)}`;
const { inline, value: selectedValue, validation, inputClassName, options, stringOptions, ...otherProps } = props;
const radioOptions = isStringArray(stringOptions) ? stringOptions.map(value => ({ value, label: value })) : options;

const RadioButtonsElement = ({ opts }: { opts: Array<Option<string>> }) => (
const userClassName = orEmptyString(inputClassName);
const validClassName = validationClassName(validation);
const elementClassName = `RadioButtonInput radio ${userClassName} ${validClassName}`;

const RadioButton = ({ option }: { option: Option }) => (
<label key={option.label} className={inline ? 'radio-inline clickable' : 'inline clickable'}>
<input type="radio" {...otherProps} value={option.value as any} checked={option.value === selectedValue} />
<Markdown message={option.label} />
</label>
);

const VerticalRadioButtons = ({ opts }: { opts: Option[] }) => (
<div className="vertical left">
<div className={elementClassName}>
{opts.map(option => (
<RadioButton key={option.label} option={option} />
))}
</div>
</div>
);

const InlineRadioButtons = ({ opts }: { opts: Option[] }) => (
<div className={elementClassName}>
{opts.map(option => (
<div key={option.label} className={className}>
<label>
<input type="radio" {...otherProps} value={option.value} checked={option.value === value} />
<span className="marked">
<Markdown message={option.label} />
</span>
</label>
</div>
<RadioButton key={option.label} option={option} />
))}
</div>
);

if (isStringArray(options)) {
return <StringsAsOptions strings={options}>{opts => <RadioButtonsElement opts={opts} />}</StringsAsOptions>;
} else {
return <RadioButtonsElement opts={options as Array<Option<string>>} />;
}
return inline ? <InlineRadioButtons opts={radioOptions} /> : <VerticalRadioButtons opts={radioOptions} />;
};
19 changes: 11 additions & 8 deletions app/scripts/modules/core/src/presentation/main.less
Original file line number Diff line number Diff line change
Expand Up @@ -1431,16 +1431,19 @@ body > .select2-container.open {
}
}

.checkbox-inline + .checkbox-inline,
.radio-inline + .radio-inline {
margin-left: 0 !important;
}

.checkbox-inline,
.radio-inline {
input[type='checkbox'],
input[type='radio'] {
margin-left: -15px;
}
padding-left: 25px;
&:first-child {
padding-left: 15px;
}
margin-right: 15px;
}

.checkbox-inline:last-of-type,
.radio-inline:last-of-type {
margin-right: 0;
}

ul.checkmap {
Expand Down

0 comments on commit 9bbc002

Please sign in to comment.