Skip to content

Commit 650e68e

Browse files
author
Nelson Menezes
committed
Add custom select maker
1 parent 8bc6c62 commit 650e68e

File tree

3 files changed

+108
-81
lines changed

3 files changed

+108
-81
lines changed

‎lib/src/components/CustomInput/CustomInput.jsx

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,12 +49,13 @@ export const makeCustomInput = function(WrappedComponent) {
4949
containerClassName,
5050
errorContainerClassName,
5151
className,
52+
value,
5253
...rest } = this.props;
5354
// TODO: Refactor conditions
5455
const isInvalid = this.state.isUsed
5556
&& this.state.isChanged
5657
&& !!this.context.errors[this.props.name];
57-
const value = this.state.isCheckbox ? this.props.value : this.state.value;
58+
const changedValue = this.state.isCheckbox ? this.props.value : this.state.value;
5859
const error = isInvalid && this.context.errors[this.props.name][0];
5960
let hint = null;
6061

@@ -74,8 +75,10 @@ export const makeCustomInput = function(WrappedComponent) {
7475
checked: this.state.isChecked,
7576
onChange: this.onChange,
7677
onBlur: this.onBlur,
77-
value,
78+
type: this.props.type || 'text',
79+
value: changedValue,
7880
hint,
81+
...rest
7982
};
8083

8184
return createElement(WrappedComponent, wrappedProps);

‎lib/src/components/CustomSelect/CustomSelect.jsx

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
import React, { PropTypes, createElement } from 'react';
2+
import hoistStatics from 'hoist-non-react-statics';
3+
import cx from 'classnames';
4+
import rules from './../../rules';
5+
import Base from './../Base/Base';
6+
7+
export function makeCustomSelect(WrappedComponent) {
8+
class CustomSelect extends Base {
9+
static propTypes = {
10+
validations: PropTypes.arrayOf(PropTypes.string).isRequired,
11+
errorClassName: PropTypes.string,
12+
containerClassName: PropTypes.string,
13+
errorContainerClassName: PropTypes.string
14+
};
15+
16+
static contextTypes = {
17+
register: PropTypes.func.isRequired,
18+
unregister: PropTypes.func.isRequired,
19+
validateState: PropTypes.func.isRequired,
20+
components: PropTypes.objectOf(PropTypes.any),
21+
errors: PropTypes.objectOf(PropTypes.arrayOf(
22+
PropTypes.oneOfType([
23+
PropTypes.string,
24+
PropTypes.node
25+
])
26+
))
27+
};
28+
29+
constructor(props, context) {
30+
super(props, context);
31+
32+
// TODO: Refactor conditions
33+
this.state = {
34+
value: props.value,
35+
isChanged: !!props.value,
36+
isUsed: true,
37+
isChecked: true
38+
};
39+
40+
context.register(this);
41+
}
42+
43+
render() {
44+
const {
45+
/* eslint-disable */
46+
validations,
47+
/* eslint-enable */
48+
errorClassName,
49+
containerClassName,
50+
errorContainerClassName,
51+
className,
52+
value,
53+
...rest } = this.props;
54+
// TODO: Refactor conditions
55+
const isInvalid = this.state.isUsed
56+
&& this.state.isChanged
57+
&& !!this.context.errors[this.props.name];
58+
const error = isInvalid && this.context.errors[this.props.name][0];
59+
let hint = null;
60+
61+
if (isInvalid) {
62+
hint = typeof error === 'function' ? error(this.state.value, this.context.components) : rules[error].hint(this.state.value, this.context.components);
63+
}
64+
65+
const wrappedProps = {
66+
containerClassName: cx({
67+
[containerClassName]: !!containerClassName,
68+
[errorContainerClassName]: !!error && errorContainerClassName
69+
}),
70+
className: cx({
71+
[className]: !!className,
72+
[errorClassName]: !!error && errorClassName
73+
}),
74+
onChange: this.onChange,
75+
onBlur: this.onBlur,
76+
value: this.state.value,
77+
hint,
78+
...rest
79+
};
80+
81+
return createElement(WrappedComponent, wrappedProps);
82+
}
83+
}
84+
85+
return hoistStatics(CustomSelect, WrappedComponent);
86+
};

‎lib/src/components/Select/Select.jsx

Lines changed: 17 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,23 @@
11
import React, { PropTypes } from 'react';
2-
import cx from 'classnames';
3-
import rules from './../../rules';
4-
import Base from './../Base/Base';
5-
6-
export default class Select extends Base {
7-
static propTypes = {
8-
validations: PropTypes.arrayOf(PropTypes.string).isRequired,
9-
errorClassName: PropTypes.string,
10-
containerClassName: PropTypes.string,
11-
errorContainerClassName: PropTypes.string
12-
};
13-
14-
static contextTypes = {
15-
register: PropTypes.func.isRequired,
16-
unregister: PropTypes.func.isRequired,
17-
validateState: PropTypes.func.isRequired,
18-
components: PropTypes.objectOf(PropTypes.any),
19-
errors: PropTypes.objectOf(PropTypes.arrayOf(
20-
PropTypes.oneOfType([
21-
PropTypes.string,
22-
PropTypes.node
23-
])
24-
))
25-
};
26-
27-
constructor(props, context) {
28-
super(props, context);
29-
30-
// TODO: Refactor conditions
31-
this.state = {
32-
value: props.value,
33-
isChanged: !!props.value,
34-
isUsed: true,
35-
isChecked: true
36-
};
37-
38-
context.register(this);
39-
}
2+
import { makeCustomSelect } from './../CustomSelect/CustomSelect';
403

4+
export default makeCustomSelect(React.createClass({
415
render() {
42-
const {
43-
/* eslint-disable */
44-
validations,
45-
/* eslint-enable */
46-
errorClassName,
47-
containerClassName,
48-
errorContainerClassName,
49-
className,
50-
...rest } = this.props;
51-
// TODO: Refactor conditions
52-
const isInvalid = this.state.isUsed
53-
&& this.state.isChanged
54-
&& !!this.context.errors[this.props.name];
55-
const error = isInvalid && this.context.errors[this.props.name][0];
56-
let hint = null;
57-
58-
if (isInvalid) {
59-
hint = typeof error === 'function' ? error(this.state.value, this.context.components) : rules[error].hint(this.state.value, this.context.components);
60-
}
6+
const { containerClassName, hint, ...rest } = this.props;
617

628
return (
63-
<div
64-
className={cx({
65-
[containerClassName]: !!containerClassName,
66-
[errorContainerClassName]: !!error && errorContainerClassName
67-
})}
68-
>
69-
<select
70-
{...rest}
71-
className={cx({
72-
[className]: !!className,
73-
[errorClassName]: !!error && errorClassName
74-
})}
75-
value={this.state.value}
76-
onChange={this.onChange}
77-
onBlur={this.onBlur}
78-
>
79-
{this.props.children}
80-
</select>
81-
{hint}
82-
</div>
83-
);
9+
<div className={containerClassName}>
10+
<select
11+
{...rest}
12+
className={this.props.className}
13+
onChange={this.props.onChange}
14+
onBlur={this.props.onBlur}
15+
value={this.props.value}
16+
>
17+
{this.props.children}
18+
</select>
19+
{hint}
20+
</div>
21+
);
8422
}
85-
}
23+
}));

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy