web: Fix DateInput component stories
This commit is contained in:
parent
e325383efd
commit
8261ae0d78
@ -14,4 +14,16 @@ import { DateInput } from 'asc-web-components';
|
||||
|
||||
#### Properties
|
||||
|
||||
See InputText properties + https://reactdatepicker.com/
|
||||
https://reactdatepicker.com/
|
||||
|
||||
| Props | Type | Required | Values | Default | Description |
|
||||
| ------------ | -------- | :------: | ------ | ------- | --------------------------------------- |
|
||||
| `id` | `string` | - | - | - | Used as HTML `id` property |
|
||||
| `name` | `string` | - | - | - | Used as HTML `name` property |
|
||||
| `disabled` | `bool` | - | - | - | Used as HTML `disabled` property |
|
||||
| `readOnly` | `bool` | - | - | - | Used as HTML `readOnly` property |
|
||||
| `selected` | `date` | - | - | - | Selected date value |
|
||||
| `onChange` | `func` | - | - | - | OnChange event |
|
||||
| `dateFormat` | `string` | - | - | - | Date format string |
|
||||
| `hasError` | `bool` | - | - | - | Indicates the input field has an error |
|
||||
| `hasWarning` | `bool` | - | - | - | Indicates the input field has a warning |
|
||||
|
@ -2,24 +2,32 @@ import React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { DateValue } from 'react-values'
|
||||
import { withKnobs, boolean, text } from '@storybook/addon-knobs/react';
|
||||
import withReadme from 'storybook-readme/with-readme';
|
||||
import Readme from './README.md';
|
||||
import { DateInput } from 'asc-web-components';
|
||||
import Section from '../../../.storybook/decorators/section';
|
||||
|
||||
storiesOf('Components|Input', module)
|
||||
.addDecorator(withKnobs)
|
||||
.addDecorator(withReadme(Readme))
|
||||
.add('date', () => (
|
||||
<Section>
|
||||
<DateValue>
|
||||
{({ value, set }) => (
|
||||
<DateInput
|
||||
id={text('id', '')}
|
||||
name={text('name', '')}
|
||||
disabled={boolean('disabled', false)}
|
||||
readOnly={boolean('readOnly', false)}
|
||||
selected={value}
|
||||
dateFormat="dd.MM.yyyy"
|
||||
onChange={date => {
|
||||
action('onChange')(date);
|
||||
set(date);
|
||||
}}
|
||||
dateFormat={text('dateFormat', 'dd.MM.yyyy')}
|
||||
hasError={boolean('hasError', false)}
|
||||
hasWarning={boolean('hasWarning', false)}
|
||||
/>
|
||||
)}
|
||||
</DateValue>
|
||||
|
@ -1,4 +1,5 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import styled from 'styled-components';
|
||||
import TextInput from '../text-input'
|
||||
import DatePicker from "react-datepicker";
|
||||
@ -25,7 +26,7 @@ class CustomInput extends React.Component {
|
||||
render () {
|
||||
return (
|
||||
<StyledOuter onClick={this.props.onClick}>
|
||||
<StyledTextInput type="text" {...this.props}/>
|
||||
<StyledTextInput type="text" autoComplete="off" maxLength={10} {...this.props}/>
|
||||
<StyledIcon size="medium"/>
|
||||
</StyledOuter>
|
||||
)
|
||||
@ -35,12 +36,36 @@ class CustomInput extends React.Component {
|
||||
const DateInput = props => {
|
||||
return (
|
||||
<DatePicker
|
||||
customInput={<CustomInput/>}
|
||||
selected={props.selected}
|
||||
onChange={props.onChange}
|
||||
customInput={
|
||||
<CustomInput
|
||||
id={props.id}
|
||||
name={props.name}
|
||||
isDisabled={props.disabled}
|
||||
isReadOnly={props.readOnly}
|
||||
hasError={props.hasError}
|
||||
hasWarning={props.hasWarning}
|
||||
/>
|
||||
}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
DateInput.propTypes = {
|
||||
id: PropTypes.string,
|
||||
name: PropTypes.string,
|
||||
disabled: PropTypes.bool,
|
||||
readOnly: PropTypes.bool,
|
||||
selected: PropTypes.instanceOf(Date),
|
||||
onChange: PropTypes.func,
|
||||
dateFormat: PropTypes.string,
|
||||
hasError: PropTypes.bool,
|
||||
hasWarning: PropTypes.bool
|
||||
}
|
||||
|
||||
DateInput.defaultProps = {
|
||||
selected: null,
|
||||
dateFormat: "dd.MM.yyyy"
|
||||
}
|
||||
|
||||
export default DateInput
|
Loading…
Reference in New Issue
Block a user