From 832347cbc74a44a70e64a2bc842256f6452c7ce4 Mon Sep 17 00:00:00 2001 From: Alexey Safronov Date: Wed, 4 Sep 2019 09:49:06 +0300 Subject: [PATCH 01/46] web: People: Implemented loading real data on edit group --- .../Section/Body/Form/groupForm.js | 110 ------------------ .../GroupAction/Section/Body/Form/submit.js | 20 ---- .../GroupAction/Section/Body/Form/validate.js | 19 --- .../pages/GroupAction/Section/Body/index.js | 94 ++++++++++++++- .../src/components/pages/GroupAction/index.js | 41 ++++++- .../pages/Home/Section/Header/index.js | 48 +++++--- .../Client/src/store/group/actions.js | 34 ++++++ .../Client/src/store/group/reducers.js | 20 ++++ .../Client/src/store/rootReducer.js | 4 +- .../Client/src/store/services/api.js | 6 + .../Client/src/store/services/fakeApi.js | 32 ++++- 11 files changed, 247 insertions(+), 181 deletions(-) delete mode 100644 products/ASC.People/Client/src/components/pages/GroupAction/Section/Body/Form/groupForm.js delete mode 100644 products/ASC.People/Client/src/components/pages/GroupAction/Section/Body/Form/submit.js delete mode 100644 products/ASC.People/Client/src/components/pages/GroupAction/Section/Body/Form/validate.js create mode 100644 products/ASC.People/Client/src/store/group/actions.js create mode 100644 products/ASC.People/Client/src/store/group/reducers.js diff --git a/products/ASC.People/Client/src/components/pages/GroupAction/Section/Body/Form/groupForm.js b/products/ASC.People/Client/src/components/pages/GroupAction/Section/Body/Form/groupForm.js deleted file mode 100644 index 999463f749..0000000000 --- a/products/ASC.People/Client/src/components/pages/GroupAction/Section/Body/Form/groupForm.js +++ /dev/null @@ -1,110 +0,0 @@ -import React, { useCallback } from "react"; -import { withRouter } from "react-router"; -import { Field, reduxForm, SubmissionError } from "redux-form"; -import { - Button, - TextInput, - Text, - InputBlock, - Icons, - SelectedItem -} from "asc-web-components"; -import submit from "./submit"; -import validate from "./validate"; -import { useTranslation } from 'react-i18next'; -import { department, headOfDepartment, typeUser } from './../../../../../../helpers/customNames'; - -const generateItems = numItems => - Array(numItems) - .fill(true) - .map(_ => Math.random() - .toString(36) - .substr(2) - ); - -const GroupForm = props => { - const { error, handleSubmit, submitting, initialValues, history } = props; - const { t } = useTranslation(); - - const selectedList = generateItems(100); - - console.log(selectedList); - - const onCancel = useCallback(() => { - history.goBack(); - }, [history]); - - return ( -
-
- -
- -
-
-
- - - - -
-
- - - - -
-
- {selectedList.map(item => - console.log("onClose", e.target)} - isInline={true} - style={{ marginRight: "8px", marginBottom: "8px" }} - /> - )} -
-
{error && {error}}
-
-
-
- ); -}; - -export default reduxForm({ - validate, - form: "groupForm", - enableReinitialize: true -})(withRouter(GroupForm)); diff --git a/products/ASC.People/Client/src/components/pages/GroupAction/Section/Body/Form/submit.js b/products/ASC.People/Client/src/components/pages/GroupAction/Section/Body/Form/submit.js deleted file mode 100644 index 9e915ea822..0000000000 --- a/products/ASC.People/Client/src/components/pages/GroupAction/Section/Body/Form/submit.js +++ /dev/null @@ -1,20 +0,0 @@ -import { SubmissionError } from 'redux-form' - -function submit (values) { - function successCallback (res) { - if (res.data && res.data.error) { - window.alert(res.data.error.message); - } else { - console.log(res); - window.alert('Success'); - } - } - - function errorCallback (error) { - throw new SubmissionError({ - _error: error - }) - } -} - -export default submit \ No newline at end of file diff --git a/products/ASC.People/Client/src/components/pages/GroupAction/Section/Body/Form/validate.js b/products/ASC.People/Client/src/components/pages/GroupAction/Section/Body/Form/validate.js deleted file mode 100644 index 448508225c..0000000000 --- a/products/ASC.People/Client/src/components/pages/GroupAction/Section/Body/Form/validate.js +++ /dev/null @@ -1,19 +0,0 @@ -function validate (values) { - const errors = {}; - - if (!values.firstName) { - errors.firstName = 'required field'; - } - - if (!values.lastName) { - errors.lastName = 'required field'; - } - - if (!values.email) { - errors.email = 'required field'; - } - - return errors -}; - -export default validate; \ No newline at end of file diff --git a/products/ASC.People/Client/src/components/pages/GroupAction/Section/Body/index.js b/products/ASC.People/Client/src/components/pages/GroupAction/Section/Body/index.js index 03ba0a4c88..5d73a81267 100644 --- a/products/ASC.People/Client/src/components/pages/GroupAction/Section/Body/index.js +++ b/products/ASC.People/Client/src/components/pages/GroupAction/Section/Body/index.js @@ -1,13 +1,97 @@ -import React from 'react'; +import React, { useCallback, useState } from 'react'; import PropTypes from "prop-types"; -import GroupForm from './Form/groupForm' - +import { + Button, + TextInput, + Text, + InputBlock, + Icons, + SelectedItem +} from "asc-web-components"; +import { useTranslation } from 'react-i18next'; +import { department, headOfDepartment, typeUser } from '../../../../../helpers/customNames'; const SectionBodyContent = (props) => { - const {group} = props; + const { history, group } = props; + const [value, setValue] = useState(group ? group.name : ""); + const [error, setError] = useState(null); + const [inLoading, setInLoading] = useState(false); + const { t } = useTranslation(); + + const groupMembers = group && group.members ? group.members : []; + + const onCancel = useCallback(() => { + history.goBack(); + }, [history]); + + console.log("Group render", props); return ( - + <> +
+ +
+ setValue(e.target.value)} /> +
+
+
+ + + + +
+
+ + + + +
+
+ {groupMembers.map(member => + console.log("onClose", e.target)} + isInline={true} + style={{ marginRight: "8px", marginBottom: "8px" }} + /> + )} +
+
{error && {error}}
+
+
+ ); }; diff --git a/products/ASC.People/Client/src/components/pages/GroupAction/index.js b/products/ASC.People/Client/src/components/pages/GroupAction/index.js index b1398525bc..ce003f66ad 100644 --- a/products/ASC.People/Client/src/components/pages/GroupAction/index.js +++ b/products/ASC.People/Client/src/components/pages/GroupAction/index.js @@ -1,25 +1,55 @@ import React from "react"; import { connect } from "react-redux"; -import { PageLayout } from "asc-web-components"; +import { PageLayout, Loader } from "asc-web-components"; import { ArticleHeaderContent, ArticleMainButtonContent, ArticleBodyContent } from '../../Article'; import { SectionHeaderContent, SectionBodyContent } from './Section'; import i18n from "./i18n"; import { I18nextProvider } from "react-i18next"; +import { fetchGroup } from "../../../store/group/actions"; class GroupAction extends React.Component { + componentDidMount() { + const { match, fetchGroup } = this.props; + const { groupId } = match.params; + + if (groupId) { + fetchGroup(groupId); + } + } + + componentDidUpdate(prevProps) { + const { match, fetchGroup } = this.props; + const { groupId } = match.params; + const prevUserId = prevProps.match.params.groupId; + + if (groupId !== undefined && groupId !== prevUserId) { + fetchGroup(groupId); + } + } + render() { console.log("GroupAction render") + const { group, match } = this.props; + return ( - } articleMainButtonContent={} articleBodyContent={} sectionHeaderContent={} - sectionBodyContent={} + sectionBodyContent={} /> + : } + articleMainButtonContent={} + articleBodyContent={} + sectionBodyContent={} + /> + } ); } @@ -27,8 +57,9 @@ class GroupAction extends React.Component { function mapStateToProps(state) { return { - settings: state.auth.settings + settings: state.auth.settings, + group: state.group.targetGroup }; } -export default connect(mapStateToProps)(GroupAction); \ No newline at end of file +export default connect(mapStateToProps, { fetchGroup })(GroupAction); \ No newline at end of file diff --git a/products/ASC.People/Client/src/components/pages/Home/Section/Header/index.js b/products/ASC.People/Client/src/components/pages/Home/Section/Header/index.js index 680b3652dd..bcad97629d 100644 --- a/products/ASC.People/Client/src/components/pages/Home/Section/Header/index.js +++ b/products/ASC.People/Client/src/components/pages/Home/Section/Header/index.js @@ -1,4 +1,5 @@ import React, { useCallback } from "react"; +import { withRouter } from "react-router"; import { GroupButtonsMenu, DropDownItem, @@ -28,20 +29,7 @@ import { deleteUsers } from "../../../../../store/services/api"; -const contextOptions = t => { - return [ - { - key: "edit-group", - label: t("EditButton"), - onClick: toastr.success.bind(this, "Edit group action") - }, - { - key: "delete-group", - label: t("DeleteButton"), - onClick: toastr.success.bind(this, "Delete group action") - } - ]; -}; + const wrapperStyle = { display: "flex", @@ -63,7 +51,9 @@ const SectionHeaderContent = props => { updateUserStatus, updateUserType, onLoading, - filter + filter, + history, + settings } = props; const selectedUserIds = getSelectionIds(selection); @@ -157,6 +147,27 @@ const SectionHeaderContent = props => { } ]; + const onEditGroup = useCallback(() => history.push(`${settings.homepage}/group/edit/${group.id}`), [history, settings, group]); + + const onDeleteGroup = useCallback(() => { + toastr.success("Delete group action"); + }, []); + + const getContextOptions = useCallback(() => { + return [ + { + key: "edit-group", + label: t("EditButton"), + onClick: onEditGroup + }, + { + key: "delete-group", + label: t("DeleteButton"), + onClick: onDeleteGroup + } + ]; + }, [t, onEditGroup, onDeleteGroup]); + return isHeaderVisible ? (
{ iconName="VerticalDotsIcon" size={16} color="#A3A9AE" - getData={contextOptions.bind(this, t)} + getData={getContextOptions.bind(this, t)} isDisabled={false} /> )} @@ -196,11 +207,12 @@ const mapStateToProps = state => { group: getSelectedGroup(state.people.groups, state.people.selectedGroup), selection: state.people.selection, isAdmin: isAdmin(state.auth.user), - filter: state.people.filter + filter: state.people.filter, + settings: state.auth.settings }; }; export default connect( mapStateToProps, { updateUserStatus, updateUserType, fetchPeople } -)(withTranslation()(SectionHeaderContent)); +)(withTranslation()(withRouter(SectionHeaderContent))); diff --git a/products/ASC.People/Client/src/store/group/actions.js b/products/ASC.People/Client/src/store/group/actions.js new file mode 100644 index 0000000000..3e9b4007de --- /dev/null +++ b/products/ASC.People/Client/src/store/group/actions.js @@ -0,0 +1,34 @@ +import * as api from "../../store/services/api"; + +export const SET_GROUP = "SET_PROFILE"; +export const CLEAN_GROUP = "CLEAN_PROFILE"; + +export function setGroup(targetGroup) { + return { + type: SET_GROUP, + targetGroup + }; +} + +export function resetGroup() { + return { + type: CLEAN_GROUP + }; +} + +export function checkResponseError(res) { + if (res && res.data && res.data.error) { + console.error(res.data.error); + throw new Error(res.data.error.message); + } +} + +export function fetchGroup(groupId) { + return dispatch => { + api.getGroup(groupId) + .then(res => { + checkResponseError(res); + dispatch(setGroup(res.data.response || null)); + }); + }; +} diff --git a/products/ASC.People/Client/src/store/group/reducers.js b/products/ASC.People/Client/src/store/group/reducers.js new file mode 100644 index 0000000000..5f9ae09c2e --- /dev/null +++ b/products/ASC.People/Client/src/store/group/reducers.js @@ -0,0 +1,20 @@ +import { SET_GROUP, CLEAN_GROUP } from "./actions"; + +const initialState = { + targetGroup: null +}; + +const groupReducer = (state = initialState, action) => { + switch (action.type) { + case SET_GROUP: + return Object.assign({}, state, { + targetGroup: action.targetGroup + }); + case CLEAN_GROUP: + return initialState; + default: + return state; + } +}; + +export default groupReducer; diff --git a/products/ASC.People/Client/src/store/rootReducer.js b/products/ASC.People/Client/src/store/rootReducer.js index f3edf8e90e..62f79c16c7 100644 --- a/products/ASC.People/Client/src/store/rootReducer.js +++ b/products/ASC.People/Client/src/store/rootReducer.js @@ -2,13 +2,13 @@ import { combineReducers } from 'redux'; import authReducer from './auth/reducers'; import peopleReducer from './people/reducers'; import profileReducer from './profile/reducers'; -import { reducer as formReducer } from 'redux-form'; +import groupReducer from './group/reducers'; const rootReducer = combineReducers({ auth: authReducer, people: peopleReducer, profile: profileReducer, - form: formReducer + group: groupReducer }); export default rootReducer; \ No newline at end of file diff --git a/products/ASC.People/Client/src/store/services/api.js b/products/ASC.People/Client/src/store/services/api.js index 582842c871..080b4a6a66 100644 --- a/products/ASC.People/Client/src/store/services/api.js +++ b/products/ASC.People/Client/src/store/services/api.js @@ -119,6 +119,12 @@ export function deleteUsers(userIds) { .then(CheckError); } +export function getGroup(groupId) { + return IS_FAKE + ? fakeApi.getGroup(groupId) + : axios.get(`${API_URL}/group/${groupId}.json`); +} + function CheckError(res) { if (res.data && res.data.error) { const error = res.data.error.message || "Unknown error has happened"; diff --git a/products/ASC.People/Client/src/store/services/fakeApi.js b/products/ASC.People/Client/src/store/services/fakeApi.js index 0d1d94d9be..e0c08b7ff5 100644 --- a/products/ASC.People/Client/src/store/services/fakeApi.js +++ b/products/ASC.People/Client/src/store/services/fakeApi.js @@ -503,8 +503,36 @@ export function deleteUsers(userIds) { export function sendInstructionsToDelete() { return fakeResponse("Instruction has been sent successfully"); -}; +} export function sendInstructionsToChangePassword() { return fakeResponse("Instruction has been sent successfully"); -}; \ No newline at end of file +} + +export function getGroup(groupId) { + return fakeResponse({ + id: "06448c0a-7f10-4c6d-9ad4-f94de2235778", + name: "All domain users", + category: "00000000-0000-0000-0000-000000000000", + parent: "00000000-0000-0000-0000-000000000000", + description: null, + manager: { + id: "646a6cff-df57-4b83-8ffe-91a24910328c", + displayName: "Alexey Safronov", + avatarSmall: + "/storage/userPhotos/root/646a6cff-df57-4b83-8ffe-91a24910328c_size_32-32.png?_=1787432031", + profileUrl: + "http://localhost:8092/products/people/profile.aspx?user=alexey.safronov1" + }, + members: [ + { + id: "646a6cff-df57-4b83-8ffe-91a24910328c", + displayName: "Alexey Safronov", + avatarSmall: + "/storage/userPhotos/root/646a6cff-df57-4b83-8ffe-91a24910328c_size_32-32.png?_=1787432031", + profileUrl: + "http://localhost:8092/products/people/profile.aspx?user=alexey.safronov1" + } + ] + }); +} From b66fc9156a8324abd62babe15ccdd725f94235a6 Mon Sep 17 00:00:00 2001 From: Alexey Safronov Date: Wed, 4 Sep 2019 09:51:30 +0300 Subject: [PATCH 02/46] web: People: Removed redux-form package --- products/ASC.People/Client/package.json | 1 - products/ASC.People/Client/yarn.lock | 31 ++++--------------------- 2 files changed, 4 insertions(+), 28 deletions(-) diff --git a/products/ASC.People/Client/package.json b/products/ASC.People/Client/package.json index bc6262ee85..2f06a36a8e 100644 --- a/products/ASC.People/Client/package.json +++ b/products/ASC.People/Client/package.json @@ -30,7 +30,6 @@ "react-window": "^1.8.5", "reactstrap": "8.0.1", "redux": "4.0.4", - "redux-form": "^8.2.6", "redux-thunk": "2.3.0", "styled-components": "^4.3.2", "universal-cookie": "^4.0.2" diff --git a/products/ASC.People/Client/yarn.lock b/products/ASC.People/Client/yarn.lock index c0e61b3319..9c3056188b 100644 --- a/products/ASC.People/Client/yarn.lock +++ b/products/ASC.People/Client/yarn.lock @@ -1774,7 +1774,7 @@ asap@~2.0.3, asap@~2.0.6: integrity sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY= "asc-web-components@file:../../../packages/asc-web-components": - version "1.0.29" + version "1.0.33" dependencies: "@emotion/core" "10.0.16" prop-types "^15.7.2" @@ -3860,11 +3860,6 @@ es5-ext@^0.10.35, es5-ext@^0.10.50, es5-ext@~0.10.14: es6-symbol "~3.1.1" next-tick "^1.0.0" -es6-error@^4.1.1: - version "4.1.1" - resolved "https://registry.yarnpkg.com/es6-error/-/es6-error-4.1.1.tgz#9e3af407459deed47e9a91f9b885a84eb05c561d" - integrity sha512-Um/+FxMr9CISWh0bi5Zv0iOD+4cFh5qLeks1qhAopKVAJw3drgKbKySikp7wGhDL0HPeaja0P5ULZrxLkniUVg== - es6-iterator@2.0.3, es6-iterator@~2.0.3: version "2.0.3" resolved "https://registry.yarnpkg.com/es6-iterator/-/es6-iterator-2.0.3.tgz#a7de889141a05a94b0854403b2d0a0fbfa98f3b7" @@ -4953,7 +4948,7 @@ hmac-drbg@^1.0.0: minimalistic-assert "^1.0.0" minimalistic-crypto-utils "^1.0.1" -hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.2.1, hoist-non-react-statics@^3.3.0: +hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0: version "3.3.0" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.0.tgz#b09178f0122184fb95acf525daaecb4d8f45958b" integrity sha512-0XsbTXxgiaCDYDIWFcwkmerZPSwywfUqYmwT4jzewKTQSWoE6FCMoUVOeBJWK3E/CrWbxRG3m5GzY4lnIwGRBA== @@ -5198,7 +5193,7 @@ immer@1.10.0: resolved "https://registry.yarnpkg.com/immer/-/immer-1.10.0.tgz#bad67605ba9c810275d91e1c2a47d4582e98286d" integrity sha512-O3sR1/opvCDGLEVcvrGTMtLac8GJ5IwZC4puPrLuRj3l7ICKvkmA0vGuU9OW8mV9WIBRnaxp5GJh9IEAaNOoYg== -immutable@3.8.2, immutable@^3.8.1: +immutable@^3.8.1: version "3.8.2" resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.8.2.tgz#c2439951455bb39913daf281376f1530e104adf3" integrity sha1-wkOZUUVbs5kT2vKBN28VMOEErfM= @@ -6491,7 +6486,7 @@ locate-path@^3.0.0: p-locate "^3.0.0" path-exists "^3.0.0" -lodash-es@4.17.15, lodash-es@^4.17.15: +lodash-es@4.17.15: version "4.17.15" resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.15.tgz#21bd96839354412f23d7a10340e5eac6ee455d78" integrity sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ== @@ -9218,24 +9213,6 @@ redux-devtools-extension@^2.13.8: resolved "https://registry.yarnpkg.com/redux-devtools-extension/-/redux-devtools-extension-2.13.8.tgz#37b982688626e5e4993ff87220c9bbb7cd2d96e1" integrity sha512-8qlpooP2QqPtZHQZRhx3x3OP5skEV1py/zUdMY28WNAocbafxdG2tRD1MWE7sp8obGMNYuLWanhhQ7EQvT1FBg== -redux-form@^8.2.6: - version "8.2.6" - resolved "https://registry.yarnpkg.com/redux-form/-/redux-form-8.2.6.tgz#6840bbe9ed5b2aaef9dd82e6db3e5efcfddd69b1" - integrity sha512-krmF7wl1C753BYpEpWIVJ5NM4lUJZFZc5GFUVgblT+jprB99VVBDyBcgrZM3gWWLOcncFyNsHcKNQQcFg8Uanw== - dependencies: - "@babel/runtime" "^7.2.0" - es6-error "^4.1.1" - hoist-non-react-statics "^3.2.1" - invariant "^2.2.4" - is-promise "^2.1.0" - lodash "^4.17.15" - lodash-es "^4.17.15" - prop-types "^15.6.1" - react-is "^16.7.0" - react-lifecycles-compat "^3.0.4" - optionalDependencies: - immutable "3.8.2" - redux-thunk@2.3.0: version "2.3.0" resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.3.0.tgz#51c2c19a185ed5187aaa9a2d08b666d0d6467622" From 04bb20d0be857b4a36329691e0ce08266553bed5 Mon Sep 17 00:00:00 2001 From: Alexey Safronov Date: Wed, 4 Sep 2019 10:14:56 +0300 Subject: [PATCH 03/46] storybook: Update yarn.lock --- web/ASC.Web.Storybook/yarn.lock | 27 +++------------------------ 1 file changed, 3 insertions(+), 24 deletions(-) diff --git a/web/ASC.Web.Storybook/yarn.lock b/web/ASC.Web.Storybook/yarn.lock index c306a679bc..911ccbe42c 100644 --- a/web/ASC.Web.Storybook/yarn.lock +++ b/web/ASC.Web.Storybook/yarn.lock @@ -2360,13 +2360,12 @@ asap@~2.0.3, asap@~2.0.6: integrity sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY= "asc-web-components@file:../../packages/asc-web-components": - version "1.0.20" + version "1.0.33" dependencies: "@emotion/core" "10.0.16" prop-types "^15.7.2" rc-tree "^2.1.2" react-autosize-textarea "^7.0.0" - react-calendar "file:C:/Users/Daniil.Senkiv/AppData/Local/Yarn/Cache/v4/npm-asc-web-components-1.0.20-041f6336-a5f5-44c6-8c1a-64199d661907-1567085888431/packages/react-calendar/react-calendar-v2.13.2.tgz" react-custom-scrollbars "^4.2.1" react-datepicker "^2.8.0" react-toastify "^5.3.2" @@ -7881,11 +7880,6 @@ lodash.memoize@^4.1.2: resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe" integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4= -lodash.once@^4.1.1: - version "4.1.1" - resolved "https://registry.yarnpkg.com/lodash.once/-/lodash.once-4.1.1.tgz#0dd3971213c7c56df880977d504c88fb471a97ac" - integrity sha1-DdOXEhPHxW34gJd9UEyI+0cal6w= - lodash.sortby@^4.7.0: version "4.7.0" resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438" @@ -8159,11 +8153,6 @@ merge-anything@^2.2.4: dependencies: is-what "^3.3.1" -merge-class-names@^1.1.1: - version "1.2.0" - resolved "https://registry.yarnpkg.com/merge-class-names/-/merge-class-names-1.2.0.tgz#cb30ecfc3bdbd96b6f76d0a98777907e5fbb3462" - integrity sha512-ifHxhC8DojHT1rG3PHCaJYInUqPd0WO+PxsaYDMkgy7RzfyOFtnlpr/hbhki+m/3R/ujIRVnZkD/AHjgjb5uhg== - merge-deep@^3.0.2: version "3.0.2" resolved "https://registry.yarnpkg.com/merge-deep/-/merge-deep-3.0.2.tgz#f39fa100a4f1bd34ff29f7d2bf4508fbb8d83ad2" @@ -10412,16 +10401,6 @@ react-autosize-textarea@^7.0.0: line-height "^0.3.1" prop-types "^15.5.6" -"react-calendar@file:../../packages/react-calendar/react-calendar-v2.13.2.tgz": - version "2.13.2" - resolved "file:../../packages/react-calendar/react-calendar-v2.13.2.tgz#4155ccd5dff8fcbb3c0c39430ff3d11d11c6c459" - dependencies: - lodash.once "^4.1.1" - merge-class-names "^1.1.1" - prop-types "^15.6.0" - react ">=15.5" - react-dom ">=15.5" - react-clientside-effect@^1.2.0: version "1.2.2" resolved "https://registry.yarnpkg.com/react-clientside-effect/-/react-clientside-effect-1.2.2.tgz#6212fb0e07b204e714581dd51992603d1accc837" @@ -10505,7 +10484,7 @@ react-docgen@^4.1.0: node-dir "^0.1.10" recast "^0.17.3" -react-dom@>=15.5, react-dom@^16.8.3, react-dom@^16.9.0: +react-dom@^16.8.3, react-dom@^16.9.0: version "16.9.0" resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.9.0.tgz#5e65527a5e26f22ae3701131bcccaee9fb0d3962" integrity sha512-YFT2rxO9hM70ewk9jq0y6sQk8cL02xm4+IzYBz75CQGlClQQ1Bxq0nhHF6OtSbit+AIahujJgb/CPRibFkMNJQ== @@ -10762,7 +10741,7 @@ react-window@^1.8.5: "@babel/runtime" "^7.0.0" memoize-one ">=3.1.1 <6" -react@>=15.5, react@^16.8.3, react@^16.9.0: +react@^16.8.3, react@^16.9.0: version "16.9.0" resolved "https://registry.yarnpkg.com/react/-/react-16.9.0.tgz#40ba2f9af13bc1a38d75dbf2f4359a5185c4f7aa" integrity sha512-+7LQnFBwkiw+BobzOF6N//BdoNw0ouwmSJTEm9cglOOmsg/TMiFHZLe2sEoN5M7LgJTj9oHH0gxklfnQe66S1w== From b1a5a5e6a3c74eaf64353260a22397170e5b838f Mon Sep 17 00:00:00 2001 From: Daniil Senkiv Date: Wed, 4 Sep 2019 11:54:36 +0300 Subject: [PATCH 04/46] Web.components: fixed style of Avatar component --- web/ASC.Web.Components/src/components/avatar/index.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/web/ASC.Web.Components/src/components/avatar/index.js b/web/ASC.Web.Components/src/components/avatar/index.js index 11b2162bc8..76287f43d6 100644 --- a/web/ASC.Web.Components/src/components/avatar/index.js +++ b/web/ASC.Web.Components/src/components/avatar/index.js @@ -119,9 +119,14 @@ const EditLink = styled.div` padding-left: 10px; padding-right: 10px; + a:hover { + border-bottom: none + } + span { display: inline-block; max-width: 100%; + text-decoration: underline dashed; } `; @@ -175,7 +180,6 @@ const Avatar = memo(props => { title={editLabel} isTextOverflow={true} fontSize={14} - isHovered={true} color={whiteColor} onClick={editAction} > From 96fcc9066c7d5754cc621620a83f83897ce270bb Mon Sep 17 00:00:00 2001 From: Andrey Savihin Date: Wed, 4 Sep 2019 12:16:53 +0300 Subject: [PATCH 05/46] web: components: bump version --- web/ASC.Web.Components/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/ASC.Web.Components/package.json b/web/ASC.Web.Components/package.json index e11d05c97d..fab758239e 100644 --- a/web/ASC.Web.Components/package.json +++ b/web/ASC.Web.Components/package.json @@ -1,6 +1,6 @@ { "name": "asc-web-components", - "version": "1.0.33", + "version": "1.0.34", "description": "Ascensio System SIA component library", "license": "AGPL-3.0", "main": "dist/asc-web-components.cjs.js", From a6fee1f5e8d534be8a27666912aa55eed5a3c420 Mon Sep 17 00:00:00 2001 From: Andrey Savihin Date: Wed, 4 Sep 2019 12:17:55 +0300 Subject: [PATCH 06/46] Storybook: added isVertical prop to form field components --- .../src/components/field-container/index.js | 43 +++++++++---------- .../stories/field-container/base/README.md | 5 ++- .../field-container/base/index.stories.js | 1 + 3 files changed, 24 insertions(+), 25 deletions(-) diff --git a/web/ASC.Web.Components/src/components/field-container/index.js b/web/ASC.Web.Components/src/components/field-container/index.js index a601237a26..609c3a3e16 100644 --- a/web/ASC.Web.Components/src/components/field-container/index.js +++ b/web/ASC.Web.Components/src/components/field-container/index.js @@ -1,11 +1,12 @@ import React from 'react' -import styled from 'styled-components'; +import styled, { css } from 'styled-components'; import device from '../device' import Label from '../label' -const Container = styled.div` +const horizontalCss = css` display: flex; flex-direction: row; + align-items: start; margin: 0 0 16px 0; .field-label { @@ -13,30 +14,26 @@ const Container = styled.div` margin: 0; width: 110px; } +` +const verticalCss = css` + display: flex; + flex-direction: column; + align-items: start; + margin: 0 0 16px 0; - .field-input { - width: 320px; + .field-label { + line-height: unset; + margin: 0 0 4px 0; + width: auto; + flex-grow: 1; } +` - .radio-group { - line-height: 32px; - display: flex; - - label:not(:first-child) { - margin-left: 33px; - } - } +const Container = styled.div` + ${props => props.vertical ? verticalCss : horizontalCss } @media ${device.tablet} { - flex-direction: column; - align-items: start; - - .field-label { - line-height: unset; - margin: 0 0 4px 0; - width: auto; - flex-grow: 1; - } + ${verticalCss} } `; @@ -45,9 +42,9 @@ const Body = styled.div` `; const FieldContainer = React.memo((props) => { - const {isRequired, hasError, labelText, className, children} = props; + const {isVertical, className, isRequired, hasError, labelText, children} = props; return ( - + diff --git a/web/ASC.Web.Storybook/stories/field-container/base/README.md b/web/ASC.Web.Storybook/stories/field-container/base/README.md index 631f610b3b..1fab98de8a 100644 --- a/web/ASC.Web.Storybook/stories/field-container/base/README.md +++ b/web/ASC.Web.Storybook/stories/field-container/base/README.md @@ -16,7 +16,7 @@ Responsive form field container - + ``` @@ -24,6 +24,7 @@ Responsive form field container | Props | Type | Required | Values | Default | Description | | ------------| -------- | :------: | -------| ------- | -------------------------------------------- | +| `isVertical`| `bool` | - | - | false | Vertical or horizontal alignment | | `isRequired`| `bool` | - | - | false | Indicates that the field is required to fill | -| `hasError` | `bool` | - | - | - | Indicates that the field is incorrect | +| `hasError` | `bool` | - | - | false | Indicates that the field is incorrect | | `labelText` | `string` | - | - | - | Field label text | \ No newline at end of file diff --git a/web/ASC.Web.Storybook/stories/field-container/base/index.stories.js b/web/ASC.Web.Storybook/stories/field-container/base/index.stories.js index 132d66ec3a..483f1a56bd 100644 --- a/web/ASC.Web.Storybook/stories/field-container/base/index.stories.js +++ b/web/ASC.Web.Storybook/stories/field-container/base/index.stories.js @@ -20,6 +20,7 @@ storiesOf('Components|FieldContainer', module) {({ value, set }) => (
Date: Wed, 4 Sep 2019 12:20:28 +0300 Subject: [PATCH 07/46] web: components: bump version --- web/ASC.Web.Components/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/ASC.Web.Components/package.json b/web/ASC.Web.Components/package.json index e11d05c97d..fab758239e 100644 --- a/web/ASC.Web.Components/package.json +++ b/web/ASC.Web.Components/package.json @@ -1,6 +1,6 @@ { "name": "asc-web-components", - "version": "1.0.33", + "version": "1.0.34", "description": "Ascensio System SIA component library", "license": "AGPL-3.0", "main": "dist/asc-web-components.cjs.js", From f64def66cbc80fbc0df2d75ba160b1ae03fd9783 Mon Sep 17 00:00:00 2001 From: Andrey Savihin Date: Wed, 4 Sep 2019 12:22:34 +0300 Subject: [PATCH 08/46] web: People: ProfileAction: styles for form field components --- .../ProfileAction/Section/Body/FormFields/Form.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/FormFields/Form.js b/products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/FormFields/Form.js index 8969e1b1fe..90e80bb2ed 100644 --- a/products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/FormFields/Form.js +++ b/products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/FormFields/Form.js @@ -5,6 +5,19 @@ const MainContainer = styled.div` display: flex; flex-direction: row; + .field-input { + width: 320px; + } + + .radio-group { + line-height: 32px; + display: flex; + + label:not(:first-child) { + margin-left: 33px; + } + } + @media ${device.tablet} { flex-direction: column; } From ccf2d863e55b183519c2fae252386b4d59051b27 Mon Sep 17 00:00:00 2001 From: Andrey Savihin Date: Wed, 4 Sep 2019 13:29:32 +0300 Subject: [PATCH 09/46] ASC.Web.Components: device moved to utils --- .../src/components/device/index.js | 13 ------------- .../src/components/field-container/index.js | 4 ++-- .../components/layout/sub-components/header.js | 4 ++-- .../src/components/layout/sub-components/main.js | 4 ++-- .../src/components/layout/sub-components/nav.js | 4 ++-- .../page-layout/sub-comoponents/article-header.js | 4 ++-- .../sub-comoponents/article-pin-panel.js | 6 +++--- .../page-layout/sub-comoponents/article.js | 4 ++-- .../sub-comoponents/section-toggler.js | 4 ++-- .../src/components/paging/index.js | 4 ++-- .../src/components/row-content/index.js | 15 +++++++-------- web/ASC.Web.Components/src/index.js | 1 - web/ASC.Web.Components/src/utils/device.js | 11 +++++++++++ web/ASC.Web.Components/src/utils/index.js | 3 ++- 14 files changed, 39 insertions(+), 42 deletions(-) delete mode 100644 web/ASC.Web.Components/src/components/device/index.js create mode 100644 web/ASC.Web.Components/src/utils/device.js diff --git a/web/ASC.Web.Components/src/components/device/index.js b/web/ASC.Web.Components/src/components/device/index.js deleted file mode 100644 index 29f1285dcc..0000000000 --- a/web/ASC.Web.Components/src/components/device/index.js +++ /dev/null @@ -1,13 +0,0 @@ -const size = { - mobile: "375px", - tablet: "768px", - desktop: "1024px" -}; - -const device = { - mobile: `(max-width: ${size.mobile})`, - tablet: `(max-width: ${size.tablet})`, - desktop: `(max-width: ${size.desktop})` -}; - -export default device; \ No newline at end of file diff --git a/web/ASC.Web.Components/src/components/field-container/index.js b/web/ASC.Web.Components/src/components/field-container/index.js index 609c3a3e16..e43e93d9be 100644 --- a/web/ASC.Web.Components/src/components/field-container/index.js +++ b/web/ASC.Web.Components/src/components/field-container/index.js @@ -1,6 +1,6 @@ import React from 'react' import styled, { css } from 'styled-components'; -import device from '../device' +import { tablet } from '../../utils/device' import Label from '../label' const horizontalCss = css` @@ -32,7 +32,7 @@ const verticalCss = css` const Container = styled.div` ${props => props.vertical ? verticalCss : horizontalCss } - @media ${device.tablet} { + @media ${tablet} { ${verticalCss} } `; diff --git a/web/ASC.Web.Components/src/components/layout/sub-components/header.js b/web/ASC.Web.Components/src/components/layout/sub-components/header.js index 173fbf836a..52b9e56ee7 100644 --- a/web/ASC.Web.Components/src/components/layout/sub-components/header.js +++ b/web/ASC.Web.Components/src/components/layout/sub-components/header.js @@ -1,6 +1,6 @@ import React from 'react' import styled from 'styled-components' -import device from '../../device' +import { tablet } from '../../../utils/device' import NavItem from './nav-item' import { Text } from '../../text' @@ -14,7 +14,7 @@ const StyledHeader = styled.header` position: absolute; width: 100vw; - @media ${device.tablet} { + @media ${tablet} { display: flex; } `; diff --git a/web/ASC.Web.Components/src/components/layout/sub-components/main.js b/web/ASC.Web.Components/src/components/layout/sub-components/main.js index b587dca38a..450fe011e8 100644 --- a/web/ASC.Web.Components/src/components/layout/sub-components/main.js +++ b/web/ASC.Web.Components/src/components/layout/sub-components/main.js @@ -1,6 +1,6 @@ import React from 'react' import styled from 'styled-components' -import device from '../../device' +import { tablet } from '../../../utils/device' const StyledMain = styled.main` height: 100vh; @@ -10,7 +10,7 @@ const StyledMain = styled.main` display: flex; flex-direction: row; - @media ${device.tablet} { + @media ${tablet} { padding: ${props => props.fullscreen ? '0' : '56px 0 0 0'}; } `; diff --git a/web/ASC.Web.Components/src/components/layout/sub-components/nav.js b/web/ASC.Web.Components/src/components/layout/sub-components/nav.js index af5ce37b02..d3d16afe7d 100644 --- a/web/ASC.Web.Components/src/components/layout/sub-components/nav.js +++ b/web/ASC.Web.Components/src/components/layout/sub-components/nav.js @@ -1,6 +1,6 @@ import React from 'react' import styled from 'styled-components' -import device from '../../device' +import { tablet } from '../../../utils/device' import Scrollbar from '../../scrollbar'; const backgroundColor = '#0F4071'; @@ -17,7 +17,7 @@ const StyledNav = styled.nav` width: ${props => props.opened ? '240px' : '56px'}; z-index: 200; - @media ${device.tablet} { + @media ${tablet} { width: ${props => props.opened ? '240px' : '0'}; } `; diff --git a/web/ASC.Web.Components/src/components/page-layout/sub-comoponents/article-header.js b/web/ASC.Web.Components/src/components/page-layout/sub-comoponents/article-header.js index 9bd3eb2833..0e3ffa0576 100644 --- a/web/ASC.Web.Components/src/components/page-layout/sub-comoponents/article-header.js +++ b/web/ASC.Web.Components/src/components/page-layout/sub-comoponents/article-header.js @@ -1,12 +1,12 @@ import React from 'react' import styled from 'styled-components' -import device from '../../device' +import { tablet } from '../../../utils/device' const StyledArticleHeader = styled.div` border-bottom: 1px solid #ECEEF1; height: 56px; - @media ${device.tablet} { + @media ${tablet} { display: ${props => props.visible ? 'block' : 'none'}; } `; diff --git a/web/ASC.Web.Components/src/components/page-layout/sub-comoponents/article-pin-panel.js b/web/ASC.Web.Components/src/components/page-layout/sub-comoponents/article-pin-panel.js index aedf0fe7ca..00bbf29d20 100644 --- a/web/ASC.Web.Components/src/components/page-layout/sub-comoponents/article-pin-panel.js +++ b/web/ASC.Web.Components/src/components/page-layout/sub-comoponents/article-pin-panel.js @@ -1,6 +1,6 @@ import React from 'react' import styled from 'styled-components' -import device from '../../device' +import { tablet, mobile } from '../../../utils/device' import { Icons } from '../../icons' const StyledArticlePinPanel = styled.div` @@ -8,11 +8,11 @@ const StyledArticlePinPanel = styled.div` height: 56px; display: none; - @media ${device.tablet} { + @media ${tablet} { display: block; } - @media ${device.mobile} { + @media ${mobile} { display: none; } diff --git a/web/ASC.Web.Components/src/components/page-layout/sub-comoponents/article.js b/web/ASC.Web.Components/src/components/page-layout/sub-comoponents/article.js index d51c0e2474..3a4ad02bc5 100644 --- a/web/ASC.Web.Components/src/components/page-layout/sub-comoponents/article.js +++ b/web/ASC.Web.Components/src/components/page-layout/sub-comoponents/article.js @@ -1,6 +1,6 @@ import React from 'react' import styled from 'styled-components' -import device from '../../device' +import { tablet } from '../../../utils/device' const StyledArticle = styled.article` padding: 0 16px; @@ -12,7 +12,7 @@ const StyledArticle = styled.article` transition: width .3s ease-in-out; overflow: hidden auto; - @media ${device.tablet} { + @media ${tablet} { ${props => props.visible ? props.pinned ? ` diff --git a/web/ASC.Web.Components/src/components/page-layout/sub-comoponents/section-toggler.js b/web/ASC.Web.Components/src/components/page-layout/sub-comoponents/section-toggler.js index 968919bd8c..49b09fa5f2 100644 --- a/web/ASC.Web.Components/src/components/page-layout/sub-comoponents/section-toggler.js +++ b/web/ASC.Web.Components/src/components/page-layout/sub-comoponents/section-toggler.js @@ -1,13 +1,13 @@ import React from 'react' import styled from 'styled-components' -import device from '../../device' +import { tablet } from '../../../utils/device' import { Icons } from '../../icons' const StyledSectionToggler = styled.div` height: 64px; display: none; - @media ${device.tablet} { + @media ${tablet} { display: ${props => props.visible ? 'block' : 'none'}; } diff --git a/web/ASC.Web.Components/src/components/paging/index.js b/web/ASC.Web.Components/src/components/paging/index.js index 4ec1929571..a31d147a01 100644 --- a/web/ASC.Web.Components/src/components/paging/index.js +++ b/web/ASC.Web.Components/src/components/paging/index.js @@ -4,7 +4,7 @@ import PropTypes from 'prop-types' import Button from '../button' import ComboBox from '../combobox' -import device from '../device' +import { mobile } from '../../utils/device' const StyledPaging = styled.div` @@ -22,7 +22,7 @@ const StyledOnPage = styled.div` margin-left: auto; margin-right: 0px; - @media ${device.mobile} { + @media ${mobile} { display: none; } `; diff --git a/web/ASC.Web.Components/src/components/row-content/index.js b/web/ASC.Web.Components/src/components/row-content/index.js index 2cf3808374..9ea1648ae7 100644 --- a/web/ASC.Web.Components/src/components/row-content/index.js +++ b/web/ASC.Web.Components/src/components/row-content/index.js @@ -1,8 +1,7 @@ import React from 'react'; import styled, { css } from 'styled-components'; import PropTypes from 'prop-types'; - -import device from '../device'; +import { tablet } from '../../utils/device'; const truncateCss = css` white-space: nowrap; @@ -12,17 +11,17 @@ const truncateCss = css` const commonCss = css` margin: 0 8px; - font-family: Open Sans; + font-family: 'Open Sans'; font-size: 12px; font-style: normal; font-weight: 600; `; const RowContainer = styled.div` - width: 100% + width: 100%; display: inline-flex; - @media ${device.tablet} { + @media ${tablet} { display: block; } `; @@ -35,7 +34,7 @@ const MainContainerWrapper = styled.div` margin-right: auto; min-width: 140px; - @media ${device.tablet} { + @media ${tablet} { min-width: 140px; margin-right: 8px; margin-top: 6px; @@ -61,7 +60,7 @@ const SideContainerWrapper = styled.div` width: 160px; color: ${props => props.color && props.color}; - @media ${device.tablet} { + @media ${tablet} { display: none; } `; @@ -69,7 +68,7 @@ const SideContainerWrapper = styled.div` const TabletSideInfo = styled.div` display: none; - @media ${device.tablet} { + @media ${tablet} { display: block; min-width: 160px; margin: 0 8px; diff --git a/web/ASC.Web.Components/src/index.js b/web/ASC.Web.Components/src/index.js index b8098ef914..ac2bc99a56 100644 --- a/web/ASC.Web.Components/src/index.js +++ b/web/ASC.Web.Components/src/index.js @@ -1,4 +1,3 @@ -export { default as device } from './components/device' export { default as Button } from './components/button' export { default as TextInput } from './components/text-input' export { default as DateInput } from './components/date-input' diff --git a/web/ASC.Web.Components/src/utils/device.js b/web/ASC.Web.Components/src/utils/device.js new file mode 100644 index 0000000000..b6fb8ec964 --- /dev/null +++ b/web/ASC.Web.Components/src/utils/device.js @@ -0,0 +1,11 @@ +const size = { + mobile: "375px", + tablet: "768px", + desktop: "1024px" +}; + +export const mobile = `(max-width: ${size.mobile})`; + +export const tablet = `(max-width: ${size.tablet})`; + +export const desktop = `(max-width: ${size.desktop})`; \ No newline at end of file diff --git a/web/ASC.Web.Components/src/utils/index.js b/web/ASC.Web.Components/src/utils/index.js index 4c9c513ad8..8436b7f0b4 100644 --- a/web/ASC.Web.Components/src/utils/index.js +++ b/web/ASC.Web.Components/src/utils/index.js @@ -1,4 +1,5 @@ import * as array from './array'; import * as event from './event'; +import * as device from './device' -export default { array, event }; \ No newline at end of file +export default { array, event, device }; \ No newline at end of file From 8d0208efe025bd90e4f93a6e58079a871198347f Mon Sep 17 00:00:00 2001 From: Andrey Savihin Date: Wed, 4 Sep 2019 13:29:39 +0300 Subject: [PATCH 10/46] web: components: bump version --- web/ASC.Web.Components/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/ASC.Web.Components/package.json b/web/ASC.Web.Components/package.json index fab758239e..775811e77e 100644 --- a/web/ASC.Web.Components/package.json +++ b/web/ASC.Web.Components/package.json @@ -1,6 +1,6 @@ { "name": "asc-web-components", - "version": "1.0.34", + "version": "1.0.35", "description": "Ascensio System SIA component library", "license": "AGPL-3.0", "main": "dist/asc-web-components.cjs.js", From 52f96ef66e424570b0ecf83fb5d9fe98e2a61298 Mon Sep 17 00:00:00 2001 From: Andrey Savihin Date: Wed, 4 Sep 2019 13:30:15 +0300 Subject: [PATCH 11/46] ASC.People: device moved to utils --- .../pages/ProfileAction/Section/Body/FormFields/Form.js | 4 ++-- .../ProfileAction/Section/Body/FormFields/PasswordField.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/FormFields/Form.js b/products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/FormFields/Form.js index 90e80bb2ed..7e7e741e54 100644 --- a/products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/FormFields/Form.js +++ b/products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/FormFields/Form.js @@ -1,5 +1,5 @@ import styled from 'styled-components'; -import { device } from 'asc-web-components' +import { utils } from 'asc-web-components' const MainContainer = styled.div` display: flex; @@ -18,7 +18,7 @@ const MainContainer = styled.div` } } - @media ${device.tablet} { + @media ${utils.device.tablet} { flex-direction: column; } `; diff --git a/products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/FormFields/PasswordField.js b/products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/FormFields/PasswordField.js index c362205ee0..91c62c8c29 100644 --- a/products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/FormFields/PasswordField.js +++ b/products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/FormFields/PasswordField.js @@ -1,6 +1,6 @@ import React from 'react' import styled from 'styled-components'; -import { device, FieldContainer, RadioButtonGroup, InputBlock, Icons, Link } from 'asc-web-components' +import { utils, FieldContainer, RadioButtonGroup, InputBlock, Icons, Link } from 'asc-web-components' const PasswordBlock = styled.div` display: flex; @@ -12,7 +12,7 @@ const PasswordBlock = styled.div` margin: 0 0 0 16px; } - @media ${device.tablet} { + @media ${utils.device.tablet} { flex-direction: column; align-items: start; From cb60b8f87624c8c88aca326c5a04a99760a15e2a Mon Sep 17 00:00:00 2001 From: Andrey Savihin Date: Wed, 4 Sep 2019 14:10:23 +0300 Subject: [PATCH 12/46] ASC.Web.Components: added tabIndex prop to date-input component --- web/ASC.Web.Components/src/components/date-input/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/web/ASC.Web.Components/src/components/date-input/index.js b/web/ASC.Web.Components/src/components/date-input/index.js index 5ae9a79ec2..d375e2195f 100644 --- a/web/ASC.Web.Components/src/components/date-input/index.js +++ b/web/ASC.Web.Components/src/components/date-input/index.js @@ -31,6 +31,7 @@ const DateInput = props => { iconColor="#A3A9AE" onIconClick={iconClick} scale={true} + tabIndex={props.tabIndex} /> } {...props} From 13ac1efd97b8debcc3af2a64bd8c781865e9597b Mon Sep 17 00:00:00 2001 From: Andrey Savihin Date: Wed, 4 Sep 2019 14:10:29 +0300 Subject: [PATCH 13/46] web: components: bump version --- web/ASC.Web.Components/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/ASC.Web.Components/package.json b/web/ASC.Web.Components/package.json index 775811e77e..739f3af9ca 100644 --- a/web/ASC.Web.Components/package.json +++ b/web/ASC.Web.Components/package.json @@ -1,6 +1,6 @@ { "name": "asc-web-components", - "version": "1.0.35", + "version": "1.0.36", "description": "Ascensio System SIA component library", "license": "AGPL-3.0", "main": "dist/asc-web-components.cjs.js", From 8f7613888622e1273b43534262dacbc3483efaf6 Mon Sep 17 00:00:00 2001 From: Andrey Savihin Date: Wed, 4 Sep 2019 14:12:43 +0300 Subject: [PATCH 14/46] ASC.People: ProfileAction: added tabIndex to components --- .../Section/Body/FormFields/DateField.js | 4 +++- .../Section/Body/FormFields/DepartmentField.js | 2 +- .../Section/Body/FormFields/PasswordField.js | 8 +++++--- .../Section/Body/FormFields/RadioField.js | 2 +- .../Section/Body/FormFields/TextChangeField.js | 6 +++++- .../Section/Body/FormFields/TextField.js | 6 +++++- .../ProfileAction/Section/Body/createUserForm.js | 15 ++++++++++++--- .../ProfileAction/Section/Body/updateUserForm.js | 16 +++++++++++++--- 8 files changed, 45 insertions(+), 14 deletions(-) diff --git a/products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/FormFields/DateField.js b/products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/FormFields/DateField.js index 6eaa17d151..7fd15068d5 100644 --- a/products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/FormFields/DateField.js +++ b/products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/FormFields/DateField.js @@ -10,7 +10,8 @@ const DateField = React.memo((props) => { inputName, inputValue, inputIsDisabled, - inputOnChange + inputOnChange, + inputTabIndex } = props; return ( @@ -25,6 +26,7 @@ const DateField = React.memo((props) => { disabled={inputIsDisabled} onChange={inputOnChange} hasError={hasError} + tabIndex={inputTabIndex} /> ); diff --git a/products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/FormFields/DepartmentField.js b/products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/FormFields/DepartmentField.js index 55ab87f01c..bc0620383a 100644 --- a/products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/FormFields/DepartmentField.js +++ b/products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/FormFields/DepartmentField.js @@ -6,7 +6,7 @@ const DepartmentField = React.memo((props) => { isRequired, hasError, labelText, - + departments, onRemoveDepartment } = props; diff --git a/products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/FormFields/PasswordField.js b/products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/FormFields/PasswordField.js index 91c62c8c29..08c8b59a25 100644 --- a/products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/FormFields/PasswordField.js +++ b/products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/FormFields/PasswordField.js @@ -33,18 +33,19 @@ const PasswordField = React.memo((props) => { isRequired, hasError, labelText, - + radioName, radioValue, radioOptions, radioIsDisabled, radioOnChange, - + inputName, inputValue, inputIsDisabled, inputOnChange, - + inputTabIndex, + inputIconOnClick, inputShowPassword, @@ -80,6 +81,7 @@ const PasswordField = React.memo((props) => { onChange={inputOnChange} scale={true} type={inputShowPassword ? "text" : "password"} + tabIndex={inputTabIndex} /> { isRequired, hasError, labelText, - + radioName, radioValue, radioOptions, diff --git a/products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/FormFields/TextChangeField.js b/products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/FormFields/TextChangeField.js index bcc528cd43..0af98f1951 100644 --- a/products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/FormFields/TextChangeField.js +++ b/products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/FormFields/TextChangeField.js @@ -16,10 +16,12 @@ const TextChangeField = React.memo((props) => { inputName, inputValue, + inputTabIndex, buttonText, buttonIsDisabled, - buttonOnClick + buttonOnClick, + buttonTabIndex } = props; return ( @@ -34,6 +36,7 @@ const TextChangeField = React.memo((props) => { value={inputValue} isDisabled={true} hasError={hasError} + tabIndex={inputTabIndex} />