Skip to content

Commit 88d3378

Browse files
merlosmerlos
authored
Merge pull request #91 from unicef/feature/new-currency-field-control
Feature/new currency field control
2 parents bc2d4c7 + b25b05d commit 88d3378

File tree

11 files changed

+312
-3
lines changed

11 files changed

+312
-3
lines changed

‎example/src/components/FormValidator.js

Lines changed: 31 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import {
2020
import {
2121
UTextField,
2222
UPositiveInteger,
23+
UCurrencyField,
2324
UValidatorForm,
2425
UValidatorComponent,
2526
UCoordinateField,
@@ -38,7 +39,7 @@ const useStyles = makeStyles(theme => ({
3839
margin: {
3940
marginTop: theme.spacing(4),
4041
},
41-
positiveInteger: {
42+
mb3: {
4243
marginBottom: theme.spacing(3),
4344
},
4445
button: {
@@ -79,6 +80,7 @@ export default function FormValidator() {
7980
email: 'test@test.com',
8081
password: 'testinghere',
8182
positiveInteger: 1,
83+
currencyField: 1000.55,
8284
counter: 'This is counter',
8385
react: false,
8486
angular: false,
@@ -146,7 +148,6 @@ export default function FormValidator() {
146148
name="PositiveNumber"
147149
value={values['positiveInteger']}
148150
label="Positive number"
149-
className={classes.positiveInteger}
150151
validators={['required']}
151152
onChange={e =>
152153
setValues({ ...values, positiveInteger: e.target.value })
@@ -155,6 +156,34 @@ export default function FormValidator() {
155156
</UValidatorForm>
156157
</Grid>
157158
</Grid>
159+
<Grid container spacing={1}>
160+
<Grid item xs={12}>
161+
<Typography variant="h5" style={{ margin: '16px 0px' }}>
162+
Currency field
163+
</Typography>
164+
</Grid>
165+
<Grid item xs={12} md={6}>
166+
<UValidatorForm
167+
onSubmit={event => {
168+
event.preventDefault()
169+
handleSubmit()
170+
}}
171+
onError={errors => console.log(errors)}
172+
instantValidate={true}
173+
>
174+
<UCurrencyField
175+
name="CurrencyInput"
176+
value={values['currencyField']}
177+
label="currency input"
178+
className={classes.mb3}
179+
validators={['required']}
180+
onChange={e =>
181+
setValues({ ...values, currencyField: e.target.value })
182+
}
183+
/>
184+
</UValidatorForm>
185+
</Grid>
186+
</Grid>
158187
<UValidatorForm
159188
onSubmit={handleSubmit}
160189
ref={form}

‎example/src/components/InteractiveViews.js

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import {
1414
} from '@material-ui/core'
1515
import {
1616
ActiveFormTextField,
17+
ActiveCurrencyField,
1718
ActiveFormSelect,
1819
UValidatorForm,
1920
ActiveDatePicker,
@@ -53,6 +54,7 @@ export default function InteractiveViews() {
5354
employment: 1,
5455
mobile: 2223333433,
5556
address: '9452 Horace New York NY 11224',
57+
salary: 100.55,
5658
dateOfBirth: new Date(),
5759
skills: [
5860
{
@@ -272,6 +274,20 @@ export default function InteractiveViews() {
272274
</MenuItem>
273275
</ActiveFormSelect>
274276
</Grid>
277+
<Grid item xs={12}>
278+
<ActiveCurrencyField
279+
label="Salary"
280+
name="salary"
281+
onChange={handleValue}
282+
typographyVariant="subtitle1"
283+
value={values.salary}
284+
validators={['required']}
285+
errorMessages={['this field is required']}
286+
fullWidth
287+
multiline
288+
interactiveMode
289+
/>
290+
</Grid>
275291
<Grid item xs={12}>
276292
<ActiveFormTextField
277293
label="Address"
@@ -408,6 +424,20 @@ export default function InteractiveViews() {
408424
multiline
409425
/>
410426
</Grid>
427+
<Grid item xs={12}>
428+
<ActiveCurrencyField
429+
label="Salary"
430+
name="salary"
431+
onChange={handleValue}
432+
typographyVariant="subtitle1"
433+
value={values.salary}
434+
readOnly={readOnly}
435+
validators={['required']}
436+
errorMessages={['this field is required']}
437+
fullWidth
438+
multiline
439+
/>
440+
</Grid>
411441
<Grid item xs={12}>
412442
<USelectPicker
413443
label="Skills"

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@unicef/material-ui",
3-
"version": "0.8.1",
3+
"version": "0.8.2",
44
"description": "UNICEF theme and components of material-ui for react",
55
"main": "index.js",
66
"files": [

‎src/components/ActiveCurrencyField/ActiveCurrencyField.js

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import React from 'react'
2+
import PropTypes from 'prop-types'
3+
import { makeStyles } from '@material-ui/core'
4+
import ActiveFormPositiveInteger from '../ActiveFormPositiveInteger'
5+
6+
const useStyles = makeStyles(theme => ({
7+
startAdornmentContainer: {
8+
marginRight: theme.spacing(0.5),
9+
},
10+
}))
11+
12+
export default function ActiveCurrencyField({
13+
inputPrefix,
14+
decimalScale,
15+
InputProps,
16+
inputProps,
17+
...props
18+
}) {
19+
const classes = useStyles(props)
20+
return (
21+
<ActiveFormPositiveInteger
22+
variant="outlined"
23+
InputProps={{
24+
startAdornment: (
25+
<span className={classes.startAdornmentContainer}>{inputPrefix}</span>
26+
),
27+
...InputProps,
28+
}}
29+
inputProps={{ decimalScale: decimalScale, ...inputProps }}
30+
{...props}
31+
/>
32+
)
33+
}
34+
35+
ActiveCurrencyField.propTypes = {
36+
/** label */
37+
label: PropTypes.string,
38+
/** placeholder text*/
39+
placeholder: PropTypes.string,
40+
/** Typography for text inside the input (Ex: h1, div, etc.) */
41+
typographyVariant: PropTypes.string,
42+
/** Input has some default padding already, to make changes to it pass padding like `inputPadding='0px 2px'` */
43+
inputPadding: PropTypes.string,
44+
/** To hide or display the textfied border*/
45+
showBorder: PropTypes.bool,
46+
/**
47+
* Array of validators.See list of default validators above.
48+
*
49+
* Ex: `validators={['required', 'isEmail']}`
50+
*/
51+
validators: PropTypes.array,
52+
/** Attributes applied to the input element. */
53+
inputProps: PropTypes.object,
54+
/** Props applied to the Input element. */
55+
InputProps: PropTypes.object,
56+
/** Prefix string for the input. */
57+
inputPrefix: PropTypes.string,
58+
/** Decimal digit number to be used as default. */
59+
decimalScale: PropTypes.number,
60+
/**
61+
* customErrorMessages is an object with key as validator and value as customised error message.
62+
*
63+
* Ex: `customErrorMessages={{required: 'This field is required'}`
64+
*/
65+
customErrorMessages: PropTypes.object,
66+
/** To make the content readOnly */
67+
readOnly: PropTypes.bool,
68+
/** Name of input. */
69+
name: PropTypes.string,
70+
/** It triggers after each validation.It will return true or false. */
71+
validatorListener: PropTypes.func,
72+
/** Allow to use required validator in any validation trigger, not only form submit. */
73+
withRequiredValidator: PropTypes.bool,
74+
}
75+
76+
ActiveCurrencyField.defaultProps = {
77+
inputPrefix: '$',
78+
decimalScale: 2,
79+
}

‎src/components/ActiveCurrencyField/ActiveCurrencyField.md

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
```jsx
2+
import React, { useState, useRef } from 'react'
3+
import { Grid } from '@material-ui/core'
4+
import { UValidatorForm, UButton, ActiveCurrencyField } from '../../index.js'
5+
6+
// export default function ActiveCurrencyField() {
7+
8+
const form = useRef('form')
9+
const [currencyValue, setCurrencyValue] = useState()
10+
11+
function handleValue(event) {
12+
const { value } = event.target
13+
setCurrencyValue(value)
14+
}
15+
16+
function handleSubmit() {
17+
// Submit the changes from here
18+
}
19+
20+
// return (
21+
;<UValidatorForm
22+
ref={form}
23+
onSubmit={handleSubmit}
24+
onError={errors => console.log(errors)}
25+
// instantValidate={true}
26+
>
27+
<Grid container spacing={1}>
28+
<Grid item xs={12} lg={4}>
29+
<ActiveCurrencyField
30+
label="Currency"
31+
value={currencyValue}
32+
onChange={handleValue}
33+
name="currency"
34+
/>
35+
</Grid>
36+
<Grid item xs={12}>
37+
<UButton type="submit">Submit</UButton>
38+
</Grid>
39+
</Grid>
40+
</UValidatorForm>
41+
// )
42+
// }
43+
```

‎src/components/ActiveCurrencyField/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from './ActiveCurrencyField'

‎src/components/UCurrencyField/UCurrencyField.js

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import React from 'react'
2+
import PropTypes from 'prop-types'
3+
import { makeStyles } from '@material-ui/core'
4+
import UPositiveInteger from '../UPositiveInteger'
5+
6+
const useStyles = makeStyles(theme => ({
7+
startAdornmentContainer: {
8+
marginRight: theme.spacing(0.5),
9+
},
10+
}))
11+
12+
export default function UCurrencyField({
13+
inputPrefix,
14+
decimalScale,
15+
InputProps,
16+
inputProps,
17+
...props
18+
}) {
19+
const classes = useStyles(props)
20+
return (
21+
<UPositiveInteger
22+
variant="outlined"
23+
InputProps={{
24+
startAdornment: (
25+
<span className={classes.startAdornmentContainer}>{inputPrefix}</span>
26+
),
27+
...InputProps,
28+
}}
29+
inputProps={{ decimalScale: decimalScale, ...inputProps }}
30+
{...props}
31+
/>
32+
)
33+
}
34+
35+
UCurrencyField.propTypes = {
36+
/** label */
37+
label: PropTypes.string,
38+
/** placeholder text*/
39+
placeholder: PropTypes.string,
40+
/**
41+
* Array of validators.See list of default validators above.
42+
*
43+
* Ex: `validators={['required', 'isEmail']}`
44+
*/
45+
validators: PropTypes.array,
46+
/** Attributes applied to the input element. */
47+
inputProps: PropTypes.object,
48+
/** Props applied to the Input element. */
49+
InputProps: PropTypes.object,
50+
/** Prefix string for the input. */
51+
inputPrefix: PropTypes.string,
52+
/** Decimal digit number to be used as default. */
53+
decimalScale: PropTypes.number,
54+
/**
55+
* customErrorMessages is an object with key as validator and value as customised error message.
56+
*
57+
* Ex: `customErrorMessages={{required: 'This field is required'}`
58+
*/
59+
customErrorMessages: PropTypes.object,
60+
/** To make the content readOnly */
61+
readOnly: PropTypes.bool,
62+
/** Name of input. */
63+
name: PropTypes.string,
64+
}
65+
66+
UCurrencyField.defaultProps = {
67+
inputPrefix: '$',
68+
decimalScale: 2,
69+
}

‎src/components/UCurrencyField/UCurrencyField.md

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
```jsx
2+
import React, { useState, useRef } from 'react'
3+
import { Grid } from '@material-ui/core'
4+
import { UValidatorForm, UButton, UCurrencyField } from '../../index.js'
5+
6+
// export default function UCurrencyField() {
7+
8+
const form = useRef('form')
9+
const [currencyValue, setCurrencyValue] = useState()
10+
11+
function handleValue(event) {
12+
const { value } = event.target
13+
setCurrencyValue(value)
14+
}
15+
16+
function handleSubmit() {
17+
// Submit the changes from here
18+
}
19+
20+
// return (
21+
;<UValidatorForm
22+
ref={form}
23+
onSubmit={handleSubmit}
24+
onError={errors => console.log(errors)}
25+
// instantValidate={true}
26+
>
27+
<Grid container spacing={1}>
28+
<Grid item xs={12} lg={4}>
29+
<UCurrencyField
30+
label="Currency"
31+
value={currencyValue}
32+
onChange={handleValue}
33+
name="currency"
34+
/>
35+
</Grid>
36+
<Grid item xs={12}>
37+
<UButton type="submit">Submit</UButton>
38+
</Grid>
39+
</Grid>
40+
</UValidatorForm>
41+
// )
42+
// }
43+
```

‎src/components/UCurrencyField/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from './UCurrencyField'

‎src/index.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,8 @@ import UValidatorForm from './components/UValidatorForm'
2323
import ActiveFormTextField from './components/ActiveFormTextField'
2424
import ActiveFormSelect from './components/ActiveFormSelect'
2525
import UPositiveInteger from './components/UPositiveInteger'
26+
import UCurrencyField from './components/UCurrencyField'
27+
import ActiveCurrencyField from './components/ActiveCurrencyField'
2628
import ActiveFormPositiveInteger from './components/ActiveFormPositiveInteger'
2729
import UConfirmationButton from './components/UConfirmationButton'
2830
import URadioButtons from './components/URadioButtons'
@@ -68,6 +70,8 @@ export {
6870
UValidatorForm,
6971
UValidatorComponent,
7072
UPositiveInteger,
73+
UCurrencyField,
74+
ActiveCurrencyField,
7175
ActiveFormPositiveInteger,
7276
UConfirmationButton,
7377
URadioButtons,

0 commit comments

Comments
 (0)