Skip to content

Commit 1edf004

Browse files
nolimits4webnolimits4web
committed
Phenome: use domProps for vue inputs
1 parent 47e4077 commit 1edf004

File tree

7 files changed

+233
-85
lines changed

7 files changed

+233
-85
lines changed

‎src/phenome/components/checkbox.jsx‎

Lines changed: 30 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -18,18 +18,36 @@ export default {
1818
const props = self.props;
1919
const { name, value, disabled, readonly, checked, defaultChecked, id, style } = props;
2020

21-
const inputEl = (
22-
<input
23-
type="checkbox"
24-
name={name}
25-
value={value}
26-
disabled={disabled}
27-
readOnly={readonly}
28-
checked={checked}
29-
defaultChecked={defaultChecked}
30-
onChange={self.onChange.bind(self)}
31-
/>
32-
);
21+
let inputEl;
22+
if (process.env.COMPILER === 'react') {
23+
inputEl = (
24+
<input
25+
type="checkbox"
26+
name={name}
27+
value={value}
28+
disabled={disabled}
29+
readOnly={readonly}
30+
checked={checked}
31+
defaultChecked={defaultChecked}
32+
onChange={self.onChange.bind(self)}
33+
/>
34+
);
35+
}
36+
if (process.env.COMPILER === 'vue') {
37+
inputEl = (
38+
<input
39+
type="checkbox"
40+
name={name}
41+
onChange={self.onChange.bind(self)}
42+
domProps={{
43+
value,
44+
disabled,
45+
readonly,
46+
checked,
47+
}}
48+
/>
49+
);
50+
}
3351
const iconEl = (<i className="icon-checkbox" />);
3452

3553
return (

‎src/phenome/components/input.jsx‎

Lines changed: 91 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -111,49 +111,97 @@ export default {
111111
!wrap && className,
112112
(noFormStoreData || noStoreData) && 'no-store-data',
113113
);
114-
115-
return (
116-
<InputTag
117-
ref="inputEl"
118-
style={inputStyle}
119-
name={name}
120-
type={needsType ? type : undefined}
121-
placeholder={placeholder}
122-
id={inputId}
123-
value={needsValue ? value : undefined}
124-
defaultValue={defaultValue}
125-
size={size}
126-
accept={accept}
127-
autoComplete={autocomplete}
128-
autoCorrect={autocorrect}
129-
autoCapitalize={autocapitalize}
130-
spellCheck={spellcheck}
131-
autoFocus={autofocus}
132-
autoSave={autosave}
133-
checked={checked}
134-
disabled={disabled}
135-
max={max}
136-
maxLength={maxlength}
137-
min={min}
138-
minLength={minlength}
139-
step={step}
140-
multiple={multiple}
141-
readOnly={readonly}
142-
required={required}
143-
pattern={pattern}
144-
validate={typeof validate === 'string' && validate.length ? validate : undefined}
145-
data-validate={validate === true || validate === '' ? true : undefined}
146-
tabIndex={tabindex}
147-
data-error-message={errorMessage}
148-
className={inputClassName}
149-
onFocus={self.onFocusBound}
150-
onBlur={self.onBlurBound}
151-
onInput={self.onInputBound}
152-
onChange={self.onChangeBound}
153-
>
154-
{children}
155-
</InputTag>
156-
);
114+
let input;
115+
if (process.env.COMPILER === 'react') {
116+
input = (
117+
<InputTag
118+
ref="inputEl"
119+
style={inputStyle}
120+
name={name}
121+
type={needsType ? type : undefined}
122+
placeholder={placeholder}
123+
id={inputId}
124+
value={needsValue ? value : undefined}
125+
defaultValue={defaultValue}
126+
size={size}
127+
accept={accept}
128+
autoComplete={autocomplete}
129+
autoCorrect={autocorrect}
130+
autoCapitalize={autocapitalize}
131+
spellCheck={spellcheck}
132+
autoFocus={autofocus}
133+
autoSave={autosave}
134+
checked={checked}
135+
disabled={disabled}
136+
max={max}
137+
maxLength={maxlength}
138+
min={min}
139+
minLength={minlength}
140+
step={step}
141+
multiple={multiple}
142+
readOnly={readonly}
143+
required={required}
144+
pattern={pattern}
145+
validate={typeof validate === 'string' && validate.length ? validate : undefined}
146+
data-validate={validate === true || validate === '' ? true : undefined}
147+
tabIndex={tabindex}
148+
data-error-message={errorMessage}
149+
className={inputClassName}
150+
onFocus={self.onFocusBound}
151+
onBlur={self.onBlurBound}
152+
onInput={self.onInputBound}
153+
onChange={self.onChangeBound}
154+
>
155+
{children}
156+
</InputTag>
157+
);
158+
}
159+
if (process.env.COMPILER === 'vue') {
160+
input = (
161+
<InputTag
162+
ref="inputEl"
163+
style={inputStyle}
164+
name={name}
165+
type={needsType ? type : undefined}
166+
placeholder={placeholder}
167+
id={inputId}
168+
size={size}
169+
accept={accept}
170+
autoComplete={autocomplete}
171+
autoCorrect={autocorrect}
172+
autoCapitalize={autocapitalize}
173+
spellCheck={spellcheck}
174+
autoFocus={autofocus}
175+
autoSave={autosave}
176+
max={max}
177+
maxLength={maxlength}
178+
min={min}
179+
minLength={minlength}
180+
step={step}
181+
pattern={pattern}
182+
validate={typeof validate === 'string' && validate.length ? validate : undefined}
183+
data-validate={validate === true || validate === '' ? true : undefined}
184+
tabIndex={tabindex}
185+
data-error-message={errorMessage}
186+
className={inputClassName}
187+
onFocus={self.onFocusBound}
188+
onBlur={self.onBlurBound}
189+
onInput={self.onInputBound}
190+
onChange={self.onChangeBound}
191+
domProps={{
192+
value: needsValue ? value : undefined,
193+
checked,
194+
disabled,
195+
readonly,
196+
multiple,
197+
required,
198+
}}
199+
>
200+
{children}
201+
</InputTag>
202+
);
203+
}
204+
return input;
157205
};
158206

159207
const { default: slotsDefault, info: slotsInfo } = self.slots;

‎src/phenome/components/list-item-content.jsx‎

Lines changed: 24 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -149,18 +149,30 @@ export default {
149149

150150
// Input
151151
if (radio || checkbox) {
152-
inputEl = (
153-
<input
154-
value={value}
155-
name={name}
156-
checked={checked}
157-
readOnly={readonly}
158-
disabled={disabled}
159-
required={required}
160-
type={radio ? 'radio' : 'checkbox'}
161-
onChange={self.onChange.bind(self)}
162-
/>
163-
);
152+
if (process.env.COMPILER === 'vue') {
153+
inputEl = (
154+
<input
155+
name={name}
156+
type={radio ? 'radio' : 'checkbox'}
157+
domProps={{ checked, readonly, disabled, required, value }}
158+
onChange={self.onChange.bind(self)}
159+
/>
160+
);
161+
} else {
162+
inputEl = (
163+
<input
164+
value={value}
165+
name={name}
166+
checked={checked}
167+
readOnly={readonly}
168+
disabled={disabled}
169+
required={required}
170+
type={radio ? 'radio' : 'checkbox'}
171+
onChange={self.onChange.bind(self)}
172+
/>
173+
);
174+
}
175+
164176
inputIconEl = (
165177
<i className={`icon icon-${radio ? 'radio' : 'checkbox'}`} />
166178
);

‎src/phenome/components/messagebar-sheet-image.jsx‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,9 +34,20 @@ export default {
3434
backgroundImage: image && `url(${image})`,
3535
}, style || {});
3636

37+
let inputEl;
38+
if (process.env.COMPILER === 'react') {
39+
inputEl = (
40+
<input type="checkbox" checked={checked} onChange={self.onChangeBound} />
41+
);
42+
}
43+
if (process.env.COMPILER === 'vye') {
44+
inputEl = (
45+
<input type="checkbox" domProps={{ checked }} onChange={self.onChangeBound} />
46+
);
47+
}
3748
return (
3849
<label id={id} className={classes} style={styles}>
39-
<input type="checkbox" checked={checked} onChange={self.onChangeBound} />
50+
{inputEl}
4051
<i className="icon icon-checkbox" />
4152
<slot />
4253
</label>

‎src/phenome/components/radio.jsx‎

Lines changed: 30 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -20,18 +20,36 @@ export default {
2020
name, value, disabled, readonly, checked, defaultChecked, id, style, className,
2121
} = props;
2222

23-
const inputEl = (
24-
<input
25-
type="radio"
26-
name={name}
27-
value={value}
28-
disabled={disabled}
29-
readOnly={readonly}
30-
checked={checked}
31-
defaultChecked={defaultChecked}
32-
onChange={self.onChange.bind(self)}
33-
/>
34-
);
23+
let inputEl;
24+
if (process.env.COMPILER === 'react') {
25+
inputEl = (
26+
<input
27+
type="radio"
28+
name={name}
29+
value={value}
30+
disabled={disabled}
31+
readOnly={readonly}
32+
checked={checked}
33+
defaultChecked={defaultChecked}
34+
onChange={self.onChange.bind(self)}
35+
/>
36+
);
37+
}
38+
if (process.env.COMPILER === 'vue') {
39+
inputEl = (
40+
<input
41+
type="radio"
42+
name={name}
43+
onChange={self.onChange.bind(self)}
44+
domProps={{
45+
value,
46+
disabled,
47+
readonly,
48+
checked,
49+
}}
50+
/>
51+
);
52+
}
3553
const iconEl = (<i className="icon-radio" />);
3654

3755
const classes = Utils.classNames(

‎src/phenome/components/stepper.jsx‎

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -78,8 +78,9 @@ export default {
7878
let inputWrapEl;
7979
let valueEl;
8080
if (input && !buttonsOnly) {
81-
inputWrapEl = (
82-
<div className="stepper-input-wrap">
81+
let inputEl;
82+
if (process.env.COMPILER === 'react') {
83+
inputEl = (
8384
<input
8485
type={inputType}
8586
min={inputType === 'number' ? min : undefined}
@@ -89,6 +90,26 @@ export default {
8990
readOnly={inputReadonly}
9091
onInput={self.onInput.bind(self)}
9192
/>
93+
);
94+
}
95+
if (process.env.COMPILER === 'vue') {
96+
inputEl = (
97+
<input
98+
type={inputType}
99+
min={inputType === 'number' ? min : undefined}
100+
max={inputType === 'number' ? max : undefined}
101+
step={inputType === 'number' ? step : undefined}
102+
onInput={self.onInput.bind(self)}
103+
domProps={{
104+
readonly: inputReadonly,
105+
value,
106+
}}
107+
/>
108+
);
109+
}
110+
inputWrapEl = (
111+
<div className="stepper-input-wrap">
112+
{inputEl}
92113
</div>
93114
);
94115
}

‎src/phenome/components/toggle.jsx‎

Lines changed: 23 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -40,9 +40,9 @@ export default {
4040
},
4141
Mixins.colorClasses(props),
4242
);
43-
44-
return (
45-
<label ref="el" id={id} style={style} className={labelClasses}>
43+
let inputEl;
44+
if (process.env.COMPILER === 'react') {
45+
inputEl = (
4646
<input
4747
type="checkbox"
4848
name={name}
@@ -53,6 +53,26 @@ export default {
5353
value={value}
5454
onChange={self.onChange.bind(self)}
5555
/>
56+
);
57+
}
58+
if (process.env.COMPILER === 'vue') {
59+
inputEl = (
60+
<input
61+
type="checkbox"
62+
name={name}
63+
onChange={self.onChange.bind(self)}
64+
domProps={{
65+
disabled,
66+
readonly,
67+
value,
68+
checked,
69+
}}
70+
/>
71+
);
72+
}
73+
return (
74+
<label ref="el" id={id} style={style} className={labelClasses}>
75+
{inputEl}
5676
<span className="toggle-icon" />
5777
</label>
5878
);

0 commit comments

Comments
 (0)