IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'master' of https://github.com/ONLYOFFICE/CommunityServer-AspNetCore

Browse Source
This commit is contained in:
NikolayRechkin 2019-08-20 16:17:14 +03:00
commit 6b31146192
6 changed files with 109 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
products/ASC.People/Client/src/components/pages/Home/Section/Filter/index.js
View File

@ -48,7 +48,7 @@ const getRole = filterValues => {
};
const SectionFilterContent = ({ fetchPeople, filter, onLoading, user }) => {
const { t, i18n } = useTranslation();
const { t } = useTranslation();
const selectedFilterData = {
filterValue: [],
sortDirection: filter.sortOrder === "ascending" ? "asc" : "desc",
@ -119,7 +119,7 @@ const SectionFilterContent = ({ fetchPeople, filter, onLoading, user }) => {
},
{ key: "filter-type-group", group: "filter-group", label: "Group" }
];
}, [user]);
}, [user, t]);
const onFilter = useCallback((data) => {
console.log(data);

2
products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/Form/userForm.js
View File

@ -88,7 +88,7 @@ const renderField = ({ input, label, type, meta: { touched, error } }) => (
)
const UserForm = props => {
const { t, i18n } = useTranslation();
const { t } = useTranslation();
const { error, handleSubmit, submitting, initialValues, userType, history } = props;
const onCancel = useCallback(() => {

2
web/ASC.Web.Client/src/components/pages/Login/Login.js
View File

@ -35,7 +35,7 @@ const FormContainer = styled(Container)`
const mdOptions = { size: 6, offset: 3 };
const Form = props => {
const { t, i18n } = useTranslation();
const { t } = useTranslation();
const [identifier, setIdentifier] = useState('');
const [identifierValid, setIdentifierValid] = useState(true);
const [password, setPassword] = useState('');

129
web/ASC.Web.Components/src/components/calendar/index.js
View File

@ -1,12 +1,9 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types'
import styled, { css } from 'styled-components';
//import ReactCalendar from 'react-calendar'
import ReactCalendar from 'react-calendar';
//import Calendar from 'react-calendar/dist/entry.nostyle';
import ReactCalendar from 'react-calendar'
import ComboBox from '../combobox';
import moment from 'moment/min/moment-with-locales';
//import moment from 'moment';
const WeekdayStyle = css`
font-family: Open Sans;
@ -15,24 +12,35 @@ const WeekdayStyle = css`
font-size: 13px;
`;
const CalendarStyle = styled.div`
max-width: 325px;
const HoverStyle = css`
max-width: 32px;
max-height: 32px;
border-radius: 16px;
`;
const CalendarStyle = styled.div`
min-width:293px;
${props => props.size === 'base' ?
`max-width: 293px;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.13);
-moz-box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.13);
-webkit-box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.13);`
:
'max-width: 325px;'
}
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.13);
-moz-box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.13);
-webkit-box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.13);
padding: 16px 16px 16px 17px;
box-sizing: content-box;
.custom-tile-calendar {
color: #333;
${WeekdayStyle}
&:hover {
border-radius: 16px;
background-color: ${props => props.color ? `${props.color} !important` : `none !important`};
color: #fff !important;
${HoverStyle}
background-color: #F8F9F9 !important;
}
}
@ -40,28 +48,39 @@ const CalendarStyle = styled.div`
border: none;
}
.react-calendar__month-view__weekdays :nth-child(6) { color: #A3A9AE !important; }
.react-calendar__month-view__weekdays :nth-child(7) { color: #A3A9AE !important; }
.react-calendar__month-view__weekdays {
text-transform: none;
}
.react-calendar__month-view__weekdays__weekday {
abbr {
text-decoration: none;
${WeekdayStyle}
cursor: auto;
}
${WeekdayStyle}
}
.react-calendar__tile {
height: 32px;
width: 32px;
${HoverStyle}
margin-top: 10px;
background-color: none !important;
/*flex-basis: 11.2857% !important;*/
${props => props.size === 'base' ?
'margin-left: 9px;' :
'margin 10px 7px 0 7px;'
}
}
.react-calendar__tile:disabled {
background-color: #fff;
}
.react-calendar__tile--active {
background-color: #F8F9F9 !important;
background-color: ${props => props.color ? `${props.color} !important;` : `none !important;`}
color: #fff !important;
border-radius: 16px;
&:hover {
${HoverStyle}
color: #333 !important;
}
}
.react-calendar__month-view__days__day--weekend {
@ -69,7 +88,9 @@ const CalendarStyle = styled.div`
}
.react-calendar__month-view__days__day--neighboringMonth {
color: #ECEEF1;
color: #ECEEF1 !important;
cursor: default !important;
pointer-events: none;
}
`;
@ -89,10 +110,10 @@ class Calendar extends Component {
constructor(props) {
super(props);
moment.locale(props.location);
moment.locale(props.language);
this.state = {
selectedDate: props.selectedDate,
openToDate: props.minDate,
openToDate: props.openToDate,
minDate: props.minDate,
maxDate: props.maxDate,
months: moment.months()
@ -112,18 +133,18 @@ class Calendar extends Component {
let date2 = this.props.maxDate.getFullYear();
const yearList = [];
for (let i = date1; i <= date2; i++) {
yearList.push({ key: `${i}`, label: `${String(i).toLocaleString(this.props.location)}` });
yearList.push({ key: `${i}`, label: `${String(i).toLocaleString(this.props.language)}` });
}
return yearList;
}
getCurrentYear = () => {
let year = this.getArrayYears();
year = year.find(x => x.key == this.state.selectedDate.getFullYear());
return (year.key);
year = year.find(x => x.key == this.state.openToDate.getFullYear());
return (year);
}
getListMonth (date1, date2) {
getListMonth(date1, date2) {
let monthList = new Array();
for (let i = date1; i <= date2; i++) {
monthList.push({ key: `${i}`, label: `${this.state.months[i]}` });
@ -143,12 +164,12 @@ class Calendar extends Component {
getCurrentMonth = () => {
let month = this.getArrayMonth();
let selectedmonth = month.find(x => x.key == this.state.selectedDate.getMonth());
return (selectedmonth.key);
let selected_month = month.find(x => x.key == this.state.openToDate.getMonth());
return (selected_month);
}
onChange = (date) => {
if (this.formatDate(this.state.selectedDate) !== this.formatDate(date)) {
if (!this.props.disabled && this.formatDate(this.state.selectedDate) !== this.formatDate(date)) {
this.setState({ selectedDate: date });
this.props.onChange && this.props.onChange(date);
}
@ -158,18 +179,19 @@ class Calendar extends Component {
return (date.getMonth() + 1) + "/" + date.getDate() + "/" + date.getFullYear();
}
formatWeekday = (locale, date) => {
return moment(date).locale(locale).format('dd');
//console.log(new Date().toLocaleString('en-us', { weekday: 'short' }));
formatWeekday = (language, date) => {
//console.log(date.toLocaleString(locale, { weekday: 'short' }));
return moment(date).locale(language).format('dd');
}
render() {
const location = this.props.location;
const language = this.props.language;
moment.locale(this.props.language);
this.state.months = moment.months();
const disabled = this.props.disabled;
return (
<CalendarStyle color={this.props.themeColor}>
<CalendarStyle color={this.props.themeColor} size={this.props.size} >
<ComboBoxStyle>
<ComboBox scaled={true} onSelect={this.selectedMonth.bind(this)} selectedOption={this.getCurrentMonth()} options={this.getArrayMonth()} isDisabled={this.props.disabled} />
<ComboBoxDateStyle>
@ -177,19 +199,17 @@ class Calendar extends Component {
</ComboBoxDateStyle>
</ComboBoxStyle>
<ReactCalendar
onClickDay={this.onChange.bind(this)}
onChange={this.onChange.bind(this)}
activeStartDate={this.state.openToDate}
value={this.state.selectedDate}
locale={location}
showNavigation={false}
locale={language}
minDate={this.minDate}
maxDate={this.maxDate}
//showNavigation={false}
className={"custom-calendar"}
tileDisabled={disabled ? ({ date }) => date.getDate() : undefined}
tileClassName={"custom-tile-calendar"}
//formatShortWeekday={(locale, value) => this.formatWeekday(locale, value)}
formatShortWeekday={(value) => this.formatWeekday(language, value)}
//formatShortWeekday={(language, value) => this.formatWeekday(language, value)} // function to react-calendar v2.19.1
/>
</CalendarStyle>
);
@ -201,10 +221,11 @@ Calendar.propTypes = {
disabled: PropTypes.bool,
themeColor: PropTypes.string,
selectedDate: PropTypes.instanceOf(Date),
//openToDate: PropTypes.instanceOf(Date),
openToDate: PropTypes.instanceOf(Date),
minDate: PropTypes.instanceOf(Date),
maxDate: PropTypes.instanceOf(Date),
location: PropTypes.string
language: PropTypes.string,
size: PropTypes.string
}
Calendar.defaultProps = {
@ -212,7 +233,9 @@ Calendar.defaultProps = {
openToDate: new Date(),
minDate: new Date("1970/01/01"),
maxDate: new Date("3000/01/01"),
themeColor: '#ED7309'
themeColor: '#ED7309',
language: moment.locale(),
size: 'base'
}
export default Calendar;

36
web/ASC.Web.Storybook/stories/input/calendar/README.md
View File

@ -7,23 +7,35 @@ Custom date input
#### Usage
```js
import { DateInput } from 'asc-web-components';
import { Calendar } from 'asc-web-components';
<DateInput selected={new Date()} dateFormat="dd.MM.yyyy" onChange={date => {}}/>
<Calendar
onChange={date => {
console.log(date);
}}
disabled={false}
themeColor='#ED7309'
selectedDate={new Date()}
openToDate={new Date()}
minDate={new Date("2018/02/01")}
maxDate={new Date("2019/09/01")}
language='en'
size = 'big'
/>
```
#### Properties
https://reactdatepicker.com/
http://projects.wojtekmaj.pl/react-calendar/
| 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 |
| `onChange` | `func` | - | - | - | Function called when the user select a day |
| `disabled` | `bool` | - | - | - | Disabled react-calendar |
| `themeColor` | `string` | - | - | `#ED7309` | Color of the selected day |
| `selectedDate` | `date` | - | - | (today) | Selected date value |
| `openToDate` | `date` | - | - | (today) | The beginning of a period that shall be displayed by default |
| `minDate` | `date` | - | - | `new Date("1970/01/01")` | Minimum date that the user can select. |
| `maxDate` | `date` | - | - | `new Date("3000/01/01")` | Maximum date that the user can select. |
| `language` | `string` | - | - | User's browser settings | Indicates the input field has an error |
| `size` | `oneOf` | - | `base, big` | `base` | Selected calendar size |

7
web/ASC.Web.Storybook/stories/input/calendar/index.stories.js
View File

@ -1,7 +1,7 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { withKnobs, boolean, text, color, select, date } from '@storybook/addon-knobs/react';
import { withKnobs, boolean, color, select, date } from '@storybook/addon-knobs/react';
import withReadme from 'storybook-readme/with-readme';
import Readme from './README.md';
import { Calendar } from 'asc-web-components';
@ -17,6 +17,8 @@ function myDateKnob(name, defaultValue) {
const locales = moment.locales();
const arraySize = ['base', 'big'];
storiesOf('Components|Input', module)
.addDecorator(withKnobs)
.addDecorator(withReadme(Readme))
@ -32,7 +34,8 @@ storiesOf('Components|Input', module)
openToDate={myDateKnob('openToDate', new Date())}
minDate={myDateKnob('minDate', new Date("2018/02/01"))}
maxDate={myDateKnob('maxDate', new Date("2019/09/01"))}
location={select('location', locales, 'en')}
language={select('location', locales, 'en')}
size={select('size', arraySize, 'base')}
/>
</Section>
));