diff --git a/CHANGELOG.md b/CHANGELOG.md index ae673ba..08a298e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,24 @@ All notable changes to this project will be documented in this file. ## [Unreleased] +## [0.0.2] - 2018-01-17 +### Added +- RemoveButton Component. +- ProgressBar Component. +- Updated readme to reflect the new RemoveButton and ProgressBar Component. + +### Changed +- Moved remove input and ProgressBar out of Add & AddMedia into there own components. +- Replaced code of date of measurements with InputGroup Component. + +### Fixed +- Duplicate code in AddMedia. +- Reduced lines of code in the AddMedia Component. + +### Removed +- Removed UID prop from Add component as it doesn't use / need it. +- Removed trailing unused code. + ## [0.0.1] - 2018-01-17 ### Added - InputGroup Component now accepts the props fullWidth & placeholder. diff --git a/readme.md b/readme.md index fa33d66..2fd0478 100644 --- a/readme.md +++ b/readme.md @@ -46,6 +46,8 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI * [Measurement Component](#measurement-component) * [Media Component](#media-component) * [Overview Component](#overview-component) +* [ProgressBar Component](#progressbar-component) +* [RemoveButton Component](#removebutton-component) * [Reset Component](#reset-component) ## Account Component @@ -380,6 +382,44 @@ Attribute | Type | Usage --- | --- | --- Measurements | object | The measurements of the logged in user. +## ProgressBar Component +### Usage +The ProgressBar Component consists of the following +* Bar wrapper +* Progress bar showing the ammount of progress made + +### Location +The ProgressBar Component is located at +``` + src/components/progress/ +``` +### Attributes +The ProgressBar Component accepts the following attributes + +Attribute | Type | Usage +--- | --- | --- +progress | number | How mutch % is uploaded. + +## RemoveButton Component +### Usage +The RemoveButton Component consists of the following +* Input field (type button) + +### Location +The RemoveButton Component is located at +``` + src/components/removeButton/ +``` +### Attributes +The RemoveButton Component accepts the following attributes + +Attribute | Type | Usage +--- | --- | --- +removeField | function | The function that handles deleting the field. +i | number | Identifier of what field it should remove. +value | string | What should the text in the button be. + + ## Reset Component ### Usage The Reset Component consists of the following diff --git a/src/components/home/index.js b/src/components/home/index.js index d77706c..fb95880 100644 --- a/src/components/home/index.js +++ b/src/components/home/index.js @@ -64,9 +64,8 @@ export default class Home extends Component { /> + + + ); + } +} + +ProgressBar.propTypes = { + progress: PropTypes.number.isRequired, +}; diff --git a/src/components/progress/style.scss b/src/components/progress/style.scss new file mode 100644 index 0000000..5de7e9a --- /dev/null +++ b/src/components/progress/style.scss @@ -0,0 +1,16 @@ +.progress { + background: var(--main-light-color); + display: block; + height: 2px; + margin: -11px 0 11px; + padding: 0; + position: relative; + width: 100%; +} + +.progressBar { + background: rgba(10.6%, 81.2%, 54.1%, .596); + display: inline-block; + height: 100%; + min-width: 4%; +} diff --git a/src/components/removeButton/index.js b/src/components/removeButton/index.js new file mode 100644 index 0000000..fc6a01c --- /dev/null +++ b/src/components/removeButton/index.js @@ -0,0 +1,22 @@ +import { Component } from 'preact'; +import { PropTypes } from 'preact-compat'; +import style from './style'; + +export default class RemoveButton extends Component { + render() { + return ( + this.props.removeField(e, this.props.i)} + /> + ); + } +} + +RemoveButton.propTypes = { + removeField: PropTypes.func.isRequired, + i: PropTypes.number.isRequired, + value: PropTypes.string.isRequired, +}; diff --git a/src/components/removeButton/style.scss b/src/components/removeButton/style.scss new file mode 100644 index 0000000..4156df2 --- /dev/null +++ b/src/components/removeButton/style.scss @@ -0,0 +1,10 @@ +.remove { + color: var(--main-color); + float: right; + font-size: 16px; + font-weight: 700; + margin-top: 10px; + padding: 0; + text-align: right; + text-transform: uppercase; +} diff --git a/src/helpers.js b/src/helpers.js new file mode 100644 index 0000000..e69de29 diff --git a/src/routes/add/index.js b/src/routes/add/index.js index 15f2c52..a49d6ee 100644 --- a/src/routes/add/index.js +++ b/src/routes/add/index.js @@ -6,6 +6,7 @@ import style from './style'; import Header from '../../components/header/index'; import InputGroup from '../../components/inputGroup/index'; +import RemoveButton from '../../components/removeButton/index'; export default class Add extends Component { constructor(props) { @@ -13,6 +14,7 @@ export default class Add extends Component { this.geoSuccess = this.geoSuccess.bind(this); this.geoError = this.geoError.bind(this); + this.removeField = this.removeField.bind(this); this.createMeasurement = this.createMeasurement.bind(this); @@ -91,7 +93,7 @@ export default class Add extends Component { const measurement = { longitude: this.state.longitude, latitude: this.state.latitude, - date: moment(this.date.value, 'YYYY-MM-DD').format('YYYY-MM-DD'), + date: moment(this.state.date, 'YYYY-MM-DD').format('YYYY-MM-DD'), type: 'mes', }; for (let i = 0; i < this.state.count; i += 1) { @@ -125,12 +127,7 @@ export default class Add extends Component { onChange={e => this.handleChange(e, i)} class={style.addedInputField} /> - this.removeField(e, i)} - /> + ); } @@ -159,17 +156,14 @@ export default class Add extends Component { handleState={this.handleState} /> -
- - (this.date = input)} - type="text" - placeholder="YYYY-MM-DD" - value={this.state.date} - id="date" - class={style.inputField} - /> -
+ {this.createUI()} @@ -158,7 +153,7 @@ export default class AddMedia extends Component { return (
-
this.createMeasurement(e)}> + this.createMeasurement(e)}>
-
- - (this.date = input)} - type="text" - placeholder="YYYY-MM-DD" - value={this.state.date} - id="date" - class={style.inputField} - /> -
+