e2m/dispatch
4
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Update client dependencies

Browse source
This commit is contained in:
Ken-Håvard Lieng 2018-12-19 02:55:50 +01:00
parent 6fedb23363
commit 0d9290d037
6 changed files with 495 additions and 361 deletions
Download patch file Download diff file Expand all files Collapse all files

130
client/js/components/ui/TextInput.js
View file

@ -4,6 +4,24 @@ import classnames from 'classnames';
import capitalize from 'lodash/capitalize';
import Error from 'components/ui/formik/Error';
const getValue = (e, trim) => {
let v = e.target.value;
if (trim) {
v = v.trim();
}
if (e.target.type === 'number') {
v = parseFloat(v);
/* eslint-disable-next-line no-self-compare */
if (v !== v) {
v = '';
}
}
return v;
};
export default class TextInput extends PureComponent {
constructor(props) {
super(props);
@ -38,49 +56,83 @@ export default class TextInput extends PureComponent {
};
render() {
const { name, label = capitalize(name), noError, ...props } = this.props;
const {
name,
label = capitalize(name),
noError,
noTrim,
transform,
blurTransform,
...props
} = this.props;
return (
<FastField
name={name}
render={({ field, form }) => {
return (
<>
<div className="textinput">
<input
className={field.value && 'value'}
type="text"
name={name}
autoCapitalize="off"
autoCorrect="off"
autoComplete="off"
spellCheck="false"
ref={this.input}
onFocus={this.handleFocus}
{...field}
{...props}
/>
<span
className={classnames('textinput-1', {
value: field.value,
error: form.touched[name] && form.errors[name]
})}
>
{label}
</span>
<span
className={classnames('textinput-2', {
value: field.value,
error: form.touched[name] && form.errors[name]
})}
>
{label}
</span>
</div>
{!noError && <Error name={name} />}
</>
);
}}
render={({ field, form }) => (
<>
<div className="textinput">
<input
className={field.value && 'value'}
type="text"
name={name}
autoCapitalize="off"
autoCorrect="off"
autoComplete="off"
spellCheck="false"
ref={this.input}
onFocus={this.handleFocus}
{...field}
{...props}
onChange={e => {
let v = getValue(e, !noTrim);
if (transform) {
v = transform(v);
}
if (v !== field.value) {
form.setFieldValue(name, v);
if (props.onChange) {
props.onChange(e);
}
}
}}
onBlur={e => {
if (blurTransform) {
const v = blurTransform(getValue(e));
if (v && v !== field.value) {
form.setFieldValue(name, v, false);
}
}
field.onBlur(e);
if (props.onBlur) {
props.onBlur(e);
}
}}
/>
<span
className={classnames('textinput-1', {
value: field.value,
error: form.touched[name] && form.errors[name]
})}
>
{label}
</span>
<span
className={classnames('textinput-2', {
value: field.value,
error: form.touched[name] && form.errors[name]
})}
>
{label}
</span>
</div>
{!noError && <Error name={name} />}
</>
)}
/>
);
}

29
client/js/components/ui/formik/Checkbox.js
View file

@ -5,22 +5,19 @@ import Checkbox from 'components/ui/Checkbox';
const FormikCheckbox = ({ name, onChange, ...props }) => (
<FastField
name={name}
render={({ field, form }) => {
return (
<Checkbox
name={name}
checked={field.value}
onChange={e => {
form.setFieldTouched(name, true);
field.onChange(e);
if (onChange) {
onChange(e);
}
}}
{...props}
/>
);
}}
render={({ field }) => (
<Checkbox
name={name}
checked={field.value}
onChange={e => {
field.onChange(e);
if (onChange) {
onChange(e);
}
}}
{...props}
/>
)}
/>
);