tabshift/payload
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixes issue preventing the successful linting of field types

Browse Source
This commit is contained in:
James
2020-01-22 15:58:44 -05:00
parent b0671dc88a
commit 2decea24d6
7 changed files with 134 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/client/components/forms/field-types/Email/index.js
View File

@@ -27,7 +27,7 @@ const Email = (props) => {
value,
showError,
processing,
onFieldChange
onFieldChange,
} = useFieldType({
name,
required,
@@ -36,13 +36,25 @@ const Email = (props) => {
validate,
});
const fieldWidth = width ? `${width}%` : undefined;
return (
<div className="field-type email" style={{
...style,
width: width ? `${width}%` : null
}}>
<Error showError={showError} message={errorMessage} />
<Label htmlFor={name} label={label} required={required} />
<div
className="field-type email"
style={{
...style,
width: fieldWidth,
}}
>
<Error
showError={showError}
message={errorMessage}
/>
<Label
htmlFor={name}
label={label}
required={required}
/>
<input
value={value || ''}
onChange={onFieldChange}
@@ -50,31 +62,35 @@ const Email = (props) => {
placeholder={placeholder}
type="email"
id={name}
name={name} />
name={name}
/>
</div>
);
}
};
Email.defaultProps = {
label: null,
required: false,
processing: false,
defaultValue: null,
valueOverride: null,
placeholder: undefined,
validate: defaultValidate,
errorMessage: defaultError,
width: 100,
style: {},
}
};
Email.propTypes = {
name: PropTypes.string.isRequired,
required: PropTypes.bool,
placeholder: PropTypes.string,
defaultValue: PropTypes.string,
defaultValidate: PropTypes.func,
valueOverride: PropTypes.string,
validate: PropTypes.func,
errorMessage: PropTypes.string,
width: PropTypes.number,
style: PropTypes.shape({}),
processing: PropTypes.bool,
label: PropTypes.string.isRequired,
}
label: PropTypes.string,
};
export default Email;

43
src/client/components/forms/field-types/Input/index.js
View File

@@ -42,13 +42,25 @@ const Input = (props) => {
showError && 'error',
].filter(Boolean).join(' ');
const fieldWidth = width ? `${width}%` : undefined;
return (
<div className={classes} style={{
...style,
width: width ? `${width}%` : null
}}>
<Error showError={showError} message={errorMessage} />
<Label htmlFor={name} label={label} required={required} />
<article
className={classes}
style={{
...style,
width: fieldWidth,
}}
>
<Error
showError={showError}
message={errorMessage}
/>
<Label
htmlFor={name}
label={label}
required={required}
/>
<input
value={value || ''}
onChange={onFieldChange}
@@ -56,32 +68,35 @@ const Input = (props) => {
placeholder={placeholder}
type="text"
id={name}
name={name} />
</div>
name={name}
/>
</article>
);
}
};
Input.defaultProps = {
label: null,
required: false,
processing: false,
defaultValue: null,
valueOverride: null,
placeholder: undefined,
validate: defaultValidate,
errorMessage: defaultError,
width: 100,
style: {},
}
};
Input.propTypes = {
name: PropTypes.string.isRequired,
required: PropTypes.bool,
placeholder: PropTypes.string,
defaultValue: PropTypes.string,
defaultValidate: PropTypes.func,
valueOverride: PropTypes.string,
validate: PropTypes.func,
errorMessage: PropTypes.string,
width: PropTypes.number,
style: PropTypes.shape({}),
processing: PropTypes.bool,
label: PropTypes.string,
}
};
export default Input;

56
src/client/components/forms/field-types/Select/index.js
View File

@@ -45,19 +45,39 @@ const Select = (props) => {
showError && 'error',
].filter(Boolean).join(' ');
const fieldWidth = width ? `${width}%` : undefined;
return (
<div
className={classes}
style={{
...style,
width: width ? `${width}%` : null,
width: fieldWidth,
}}
>
<Error showError={showError} message={errorMessage} />
<Label htmlFor={name} label={label} required={required} />
<Error
showError={showError}
message={errorMessage}
/>
<Label
htmlFor={name}
label={label}
required={required}
/>
<ReactSelect
value={options.find(option => option.value === value)}
onChange={selected => onFieldChange(hasMany ? selected : selected.value)}
onChange={(selected) => {
if (hasMany) {
if (selected) {
onFieldChange(selected.map(selectedOption => selectedOption.value));
} else {
onFieldChange(null);
}
}
if (selected) {
onFieldChange(selected.value);
}
}}
disabled={formProcessing ? 'disabled' : undefined}
components={{ DropdownIndicator: Arrow }}
className="react-select"
@@ -65,7 +85,7 @@ const Select = (props) => {
isMulti={hasMany}
id={name}
name={name}
options={options.map((option, i) => {
options={options.map((option) => {
let optionValue = option;
let optionLabel = option;
@@ -85,39 +105,27 @@ const Select = (props) => {
};
Select.defaultProps = {
className: null,
style: {},
required: false,
errorMessage: defaultError,
validate: defaultValidate,
value: {},
onChange: null,
disabled: null,
placeholder: null,
id: null,
valueOverride: null,
name: 'select',
defaultValue: null,
hasMany: false,
width: 100,
};
Select.propTypes = {
className: PropTypes.string,
required: PropTypes.bool,
style: PropTypes.shape({}),
errorMessage: PropTypes.string,
valueOverride: PropTypes.string,
label: PropTypes.string.isRequired,
value: PropTypes.oneOfType([
PropTypes.shape({
value: PropTypes.string,
label: PropTypes.string,
}),
PropTypes.string,
]),
defaultValue: PropTypes.string,
defaultValidate: PropTypes.func,
onChange: PropTypes.func,
disabled: PropTypes.string,
placeholder: PropTypes.string,
id: PropTypes.string,
validate: PropTypes.func,
name: PropTypes.string,
width: PropTypes.number,
options: PropTypes.oneOfType([
PropTypes.arrayOf(
PropTypes.string,

4
src/client/components/forms/field-types/shared.scss
View File

@@ -31,10 +31,6 @@
font-weight: normal;
}
&:hover {
}
&:focus,
&:active {
outline: 0;