-
Notifications
You must be signed in to change notification settings - Fork 583
/
Input.js
39 lines (36 loc) · 1.22 KB
/
Input.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
// @flow
import * as React from "react";
import { connect } from "react-redux";
import { get } from "lodash";
import { Typography } from "@webiny/ui/Typography";
import { Grid, Cell } from "@webiny/ui/Grid";
import { Input as InputCmp } from "@webiny/ui/Input";
import { InputContainer } from "./StyledComponents";
import { getActiveElement } from "@webiny/app-page-builder/editor/selectors";
type Props = {
label: string,
placeholder: string,
value?: string | number,
valueKey?: string,
updateValue: Function,
inputWidth?: number
};
const Input = React.memo(({ label, value, placeholder, updateValue, inputWidth }: Props) => {
return (
<Grid>
<Cell span={4}>
<Typography use={"overline"}>{label}</Typography>
</Cell>
<Cell span={8}>
<InputContainer width={inputWidth}>
<InputCmp placeholder={placeholder} value={value} onChange={updateValue} />
</InputContainer>
</Cell>
</Grid>
);
});
export default connect((state, { value, valueKey, defaultValue }: Object) => {
return {
value: valueKey ? get(getActiveElement(state), valueKey, defaultValue) : value
};
})(Input);