Skip to content

Commit

Permalink
breaking: use Form.Input instead of Input
Browse files Browse the repository at this point in the history
  • Loading branch information
@arfedulov
arfedulov committed Jul 28, 2018
1 parent a77eddf commit abda4fb
Show file tree
Hide file tree
Showing 7 changed files with 48 additions and 20 deletions.
20 changes: 13 additions & 7 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,7 @@ moment.locale('ru')

| Prop | Description |
| -----| ------------|
| all that can be used with SUIR Input | |
| all that can be used with SUIR Form.Input | |
| ``dateFormat``| {string} Date formatting string. You can use here anything that can be passed to ``moment().format``. Default: ``DD-MM-YYYY``|
| ``popupPosition``| {string} One of ['top left', 'top right', 'bottom left', 'bottom right', 'right center', 'left center', 'top center', 'bottom center']. Default: ``top left``|
| ``inline`` | {bool} If ``true`` inline picker displayed. Default: ``false`` |
Expand All @@ -134,21 +134,23 @@ moment.locale('ru')
| ``disable`` | {string\|moment\|string[]\|moment[]} Date or list of dates that are displayed as disabled |
| ``maxDate`` | {string\|moment} Maximum date that can be selected |
| ``minDate`` | {string\|moment} Minimum date that can be selected |
| ``inlineLabel`` | {bool} A field can have its label next to instead of above it. |

### TimeInput

| Prop | Description |
| -----| ------------|
| all that can be used with SUIR Input | |
| all that can be used with SUIR Form.Input | |
| ``popupPosition``| {string} One of ['top left', 'top right', 'bottom left', 'bottom right', 'right center', 'left center', 'top center', 'bottom center']. Default: ``top left``|
| ``inline`` | {bool} If ``true`` inline picker displayed. Default: ``false`` |
| ``closable`` | {bool} If true, popup closes after selecting a time |
| ``inlineLabel`` | {bool} A field can have its label next to instead of above it. |

### DateTimeInput

| Prop | Description |
| -----| ------------|
| all that can be used with SUIR Input | |
| all that can be used with SUIR Form.Input | |
| ``dateFormat``| {string} Date formatting string. You can use here anything that can be passed to ``moment().format``. Default: ``DD-MM-YYYY``|
| ``divider`` | {string} Date and time divider. Default: `` `` |
| ``popupPosition``| {string} One of ['top left', 'top right', 'bottom left', 'bottom right', 'right center', 'left center', 'top center', 'bottom center']. Default: ``top left``|
Expand All @@ -159,34 +161,38 @@ moment.locale('ru')
| ``disable`` | {string\|moment\|string[]\|moment[]} Date or list of dates that are displayed as disabled |
| ``maxDate`` | {string\|moment} Maximum date that can be selected |
| ``minDate`` | {string\|moment} Minimum date that can be selected |
| ``inlineLabel`` | {bool} A field can have its label next to instead of above it. |

### DatesRangeInput

| Prop | Description |
| -----| ------------|
| all that can be used with SUIR Input | |
| all that can be used with SUIR Form.Input | |
| ``dateFormat``| {string} Date formatting string. You can use here anything that can be passed to ``moment().format``. Default: ``DD.MM.YY``|
| ``popupPosition``| {string} One of ['top left', 'top right', 'bottom left', 'bottom right', 'right center', 'left center', 'top center', 'bottom center']. Default: ``top left``|
| ``inline`` | {bool} If ``true`` inline picker displayed. Default: ``false`` |
| ``closable`` | {bool} If true, popup closes after selecting a dates range |
| ``initialDate`` | {string\|moment\|Date} Open a calendar on this date |
| ``maxDate`` | {string\|moment} Maximum date that can be selected |
| ``minDate`` | {string\|moment} Minimum date that can be selected |
| ``inlineLabel`` | {bool} A field can have its label next to instead of above it. |

### YearInput

| Prop | Description |
| -----| ------------|
| all that can be used with SUIR Input | |
| all that can be used with SUIR Form.Input | |
| ``popupPosition``| {string} One of ['top left', 'top right', 'bottom left', 'bottom right', 'right center', 'left center', 'top center', 'bottom center']. Default: ``top left``|
| ``inline`` | {bool} If ``true`` inline picker displayed. Default: ``false`` |
| ``closable`` | {bool} If true, popup closes after selecting a year |
| ``inlineLabel`` | {bool} A field can have its label next to instead of above it. |

### MonthInput

| Prop | Description |
| -----| ------------|
| all that can be used with SUIR Input | |
| all that can be used with SUIR Form.Input | |
| ``popupPosition``| {string} One of ['top left', 'top right', 'bottom left', 'bottom right', 'right center', 'left center', 'top center', 'bottom center']. Default: ``top left``|
| ``inline`` | {bool} If ``true`` inline picker displayed. Default: ``false`` |
| ``closable`` | {bool} If true, popup closes after selecting a month |
| ``closable`` | {bool} If true, popup closes after selecting a month |
| ``inlineLabel`` | {bool} A field can have its label next to instead of above it. |
8 changes: 4 additions & 4 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "semantic-ui-calendar-react",
"version": "0.7.1",
"version": "0.7.2",
"description": "date/time picker built from semantic-ui elements",
"main": "dist/index.js",
"scripts": {
Expand Down Expand Up @@ -71,7 +71,7 @@
"react": "^16.4.0",
"react-dom": "^16.4.0",
"rimraf": "^2.6.2",
"semantic-ui-css": "^2.3.1",
"semantic-ui-css": "^2.3.3",
"semantic-ui-react": "^0.80.2",
"tap-spec": "^5.0.0",
"tape": "^4.9.0",
Expand Down
19 changes: 17 additions & 2 deletions src/containers/CustomInput.js
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,29 @@
import React from 'react';
import { Input } from 'semantic-ui-react';
import { Form } from 'semantic-ui-react';
import { dispatchDateChange } from '../lib/events.js';
import { getUnhandledProps } from '../lib';
import PropTypes from 'prop-types';

class CustomInput extends React.Component {
static propTypes = {
inlineLabel: PropTypes.bool
}

static defaultProps = {
inlineLabel: false
}

componentDidUpdate(prevProps) {
if (prevProps.value !== this.props.value) dispatchDateChange();
}

render() {
return <Input { ...this.props } />;
const rest = getUnhandledProps(CustomInput, this.props);
return (
<Form.Input
inline={this.props.inlineLabel}
{ ...rest } />
);
}
}

Expand Down
7 changes: 5 additions & 2 deletions src/containers/inputs/MonthInput.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,12 @@ import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import _ from 'lodash';
import { Input, Table } from 'semantic-ui-react';
import { Table } from 'semantic-ui-react';

import { CustomPopup as Popup } from '..';
import {
CustomPopup as Popup,
CustomInput as Input
} from '..';
import { getUnhandledProps } from '../../lib';
import {
MONTH_INPUT
Expand Down
7 changes: 5 additions & 2 deletions src/containers/inputs/TimeInput.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,12 @@ import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import _ from 'lodash';
import moment from 'moment';
import { Table, Input } from 'semantic-ui-react';
import { Table } from 'semantic-ui-react';

import { CustomPopup as Popup } from '..';
import {
CustomPopup as Popup,
CustomInput as Input,
} from '..';
import { tick, getUnhandledProps } from '../../lib';
import {
TIME_INPUT
Expand Down
3 changes: 2 additions & 1 deletion src/containers/inputs/YearInput.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,11 @@ import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import moment from 'moment';
import _ from 'lodash';
import { Input, Table } from 'semantic-ui-react';
import { Table } from 'semantic-ui-react';

import {
CustomPopup as Popup,
CustomInput as Input,
YearPickerMixin
} from '..';
import { getUnhandledProps } from '../../lib';
Expand Down

2 comments on commit abda4fb

@nicu-chiciuc
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

One of the drawbacks of replacing Input with Form.Field is that now I cannot, for example, do something like this:

<Form.Field error={this.shouldShowError('visitDate')}>
  <label>Visit Date</label>
  <DateInput
    dateFormat={dateFormat}
    name="visitDate"
    placeholder="Visit Date"
    value={this.state.visitDate}
    iconPosition="left"
    onChange={this.handleChange}
  />
  <small hidden={!this.shouldShowError('visitDate')} className="helper">
    {this.state.errors.visitDate}
  </small>
</Form.Field>

Although maybe there's a different way of achieving it.

@arfedulov
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually Input was replaced with Form.Input, not with Form.Field. I'm not sure but it seems like Form.Input works normally in the snippet you gave. In any way, maybe it was better to allow choosing underlying component via some prop.

Please sign in to comment.