Merge branch 'master' of https://github.com/ONLYOFFICE/CommunityServer-AspNetCore
This commit is contained in:
commit
97107a3337
@ -1,53 +1,40 @@
|
|||||||
import React from 'react'
|
import React from 'react'
|
||||||
import PropTypes from 'prop-types'
|
import PropTypes from 'prop-types'
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import TextInput from '../text-input'
|
|
||||||
import DatePicker from "react-datepicker";
|
import DatePicker from "react-datepicker";
|
||||||
import { Icons } from '../icons'
|
import InputBlock from '../input-block';
|
||||||
import "react-datepicker/dist/react-datepicker.css";
|
import "react-datepicker/dist/react-datepicker.css";
|
||||||
|
|
||||||
const StyledOuter = styled.div`
|
const StyledDatePicker = styled.div`
|
||||||
position: relative;
|
width: 108px;
|
||||||
display: inline-block;
|
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const StyledTextInput = styled(TextInput)`
|
|
||||||
padding-right: 32px;
|
|
||||||
width: 106px;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const StyledIcon = styled(Icons.CalendarEmptyIcon)`
|
|
||||||
position: absolute;
|
|
||||||
top: 6px;
|
|
||||||
right: 6px;
|
|
||||||
`;
|
|
||||||
|
|
||||||
class CustomInput extends React.Component {
|
|
||||||
render () {
|
|
||||||
return (
|
|
||||||
<StyledOuter onClick={this.props.onClick}>
|
|
||||||
<StyledTextInput type="text" autoComplete="off" maxLength={10} {...this.props}/>
|
|
||||||
<StyledIcon size="medium"/>
|
|
||||||
</StyledOuter>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const DateInput = props => {
|
const DateInput = props => {
|
||||||
|
const iconClick = function(){
|
||||||
|
this.onClick();
|
||||||
|
};
|
||||||
return (
|
return (
|
||||||
<DatePicker
|
<StyledDatePicker>
|
||||||
customInput={
|
<DatePicker
|
||||||
<CustomInput
|
customInput={
|
||||||
id={props.id}
|
<InputBlock
|
||||||
name={props.name}
|
id={props.id}
|
||||||
isDisabled={props.disabled}
|
name={props.name}
|
||||||
isReadOnly={props.readOnly}
|
isDisabled={props.disabled}
|
||||||
hasError={props.hasError}
|
isReadOnly={props.readOnly}
|
||||||
hasWarning={props.hasWarning}
|
hasError={props.hasError}
|
||||||
/>
|
hasWarning={props.hasWarning}
|
||||||
}
|
iconName={"CalendarEmptyIcon"}
|
||||||
{...props}
|
isIconFill={true}
|
||||||
/>
|
iconColor={"#A3A9AE"}
|
||||||
|
onIconClick={iconClick}
|
||||||
|
scale={true}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
</StyledDatePicker>
|
||||||
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -47,7 +47,7 @@ const StyledInputGroup = styled(CustomInputGroup)`
|
|||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const InputBlock = props => {
|
const InputBlock = React.forwardRef((props, ref) => {
|
||||||
const {onChange, value, children, size } = props;
|
const {onChange, value, children, size } = props;
|
||||||
let iconButtonSize = 0;
|
let iconButtonSize = 0;
|
||||||
|
|
||||||
@ -107,7 +107,7 @@ const InputBlock = props => {
|
|||||||
}
|
}
|
||||||
</StyledInputGroup>
|
</StyledInputGroup>
|
||||||
);
|
);
|
||||||
}
|
});
|
||||||
|
|
||||||
InputBlock.propTypes = {
|
InputBlock.propTypes = {
|
||||||
|
|
||||||
@ -132,7 +132,7 @@ InputBlock.propTypes = {
|
|||||||
hasWarning: PropTypes.bool,
|
hasWarning: PropTypes.bool,
|
||||||
autoComplete: PropTypes.string,
|
autoComplete: PropTypes.string,
|
||||||
|
|
||||||
value: PropTypes.string.isRequired,
|
value: PropTypes.string,
|
||||||
iconName: PropTypes.string,
|
iconName: PropTypes.string,
|
||||||
iconColor: PropTypes.string,
|
iconColor: PropTypes.string,
|
||||||
isIconFill: PropTypes.bool,
|
isIconFill: PropTypes.bool,
|
||||||
|
Loading…
Reference in New Issue
Block a user