Commit ca437455 authored by Nicolas Frandeboeuf's avatar Nicolas Frandeboeuf
Browse files

Make input/select borders behaviour more reusable

parent 5a085982
......@@ -13,9 +13,14 @@ function formatCreateLabel(label) {
}
let CategorySelect = props => {
let className = 'form-element-block';
if (props.className) {
className += ` ${props.className}`;
}
return (
<FuzzyOrNativeSelect
className="form-element-block"
className={className}
clearable={false}
creatable={true}
formatCreateLabel={formatCreateLabel}
......@@ -77,7 +82,10 @@ Export.propTypes = {
value: PropTypes.string,
// A callback to be called when the select value changes.
onChange: PropTypes.func.isRequired
onChange: PropTypes.func.isRequired,
// A CSS class to apply to the select.
className: PropTypes.string
};
export default Export;
......@@ -60,13 +60,13 @@ class Operation extends React.PureComponent {
maybeTypeCell = (
<td className="type">
<OperationTypeSelect operationId={op.id} value={op.type} />
<OperationTypeSelect operationId={op.id} value={op.type} className="light" />
</td>
);
maybeCategoryCell = (
<td className="category">
<CategorySelect operationId={op.id} value={op.categoryId} />
<CategorySelect operationId={op.id} value={op.categoryId} className="light" />
</td>
);
......@@ -101,7 +101,7 @@ class Operation extends React.PureComponent {
</td>
{maybeTypeCell}
<td>
<LabelComponent item={op} />
<LabelComponent item={op} inputClassName="light" />
</td>
<td className="amount">{this.props.formatCurrency(op.amount)}</td>
{maybeCategoryCell}
......
......@@ -21,10 +21,15 @@ function noTypeFound() {
return $t('client.operations.no_type_found');
}
const TypeSelect = connect(state => {
const TypeSelect = connect((state, props) => {
let className = 'form-element-block';
if (props.className) {
className += ` ${props.className}`;
}
return {
clearable: false,
className: 'form-element-block',
className,
noOptionsMessage: noTypeFound,
options: optionsSelector(state)
};
......@@ -38,7 +43,10 @@ TypeSelect.propTypes = {
value: PropTypes.string.isRequired,
// A callback to be called when the select value changes.
onChange: PropTypes.func.isRequired
onChange: PropTypes.func.isRequired,
// A CSS class to apply to the select.
className: PropTypes.string
};
export default TypeSelect;
......@@ -182,7 +182,7 @@ export default connect(
/>
</td>
<td className="account-label">
<AccountLabelComponent item={a} />
<AccountLabelComponent item={a} inputClassName="light" />
</td>
<td className="iban">{maybeIban}</td>
<td className="actions">
......
......@@ -178,6 +178,7 @@ export default connect(
item={access}
setCustomLabel={props.setAccessCustomLabel}
getLabel={getLabel}
inputClassName="light"
/>
</h3>
<div className="actions">
......
......@@ -74,12 +74,17 @@ class LabelComponent extends React.Component {
render() {
let label = this.state.value !== null ? this.state.value : this.getDefaultValue();
let forceEditMode = this.props.forceEditMode ? 'force-edit-mode' : '';
let inputClassName = 'form-element-block';
if (this.props.inputClassName) {
inputClassName += ` ${this.props.inputClassName}`;
}
return (
<div className={`label-component-container ${forceEditMode}`}>
<span>{label}</span>
<input
className="form-element-block"
className={inputClassName}
type="text"
value={label}
onChange={this.handleChange}
......@@ -107,7 +112,10 @@ LabelComponent.propTypes /* remove-proptypes */ = {
forceEditMode: PropTypes.bool,
// A function that returns the displayed label.
getLabel: PropTypes.func.isRequired
getLabel: PropTypes.func.isRequired,
// A CSS class to apply to the input.
inputClassName: PropTypes.string
};
LabelComponent.defaultProps = {
......
......@@ -694,17 +694,15 @@ button.budget-assignment {
z-index: auto;
}
.operation-table select:not(:hover):not(:focus):not(:active),
.operation-table input:not(:hover):not(:focus):not(:active),
.bank-accounts-list input:not(:hover):not(:focus):not(:active),
.operation-table .Select:not(:hover) .Select__control:not(.Select__control--is-focused) {
input.light:not(:hover):not(:focus):not(:active),
.Select.light:not(:hover) .Select__control:not(.Select__control--is-focused) {
color: inherit;
border-color: transparent;
background-image: none;
background-color: transparent;
}
.operation-table .Select:not(:hover) .Select__control:not(.Select__control--is-focused) .Select__indicators {
.Select.light:not(:hover) .Select__control:not(.Select__control--is-focused) .Select__indicators {
visibility: hidden;
}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment