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

ASC.People: ProfileAction: added tabIndex to components

Browse Source
This commit is contained in:
Andrey Savihin 2019-09-04 14:12:43 +03:00
parent 13ac1efd97
commit 8f76138886
8 changed files with 45 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/FormFields/DateField.js
View File

@ -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}
/>
</FieldContainer>
);

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

@ -6,7 +6,7 @@ const DepartmentField = React.memo((props) => {
isRequired,
hasError,
labelText,
departments,
onRemoveDepartment
} = props;

8
products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/FormFields/PasswordField.js
View File

@ -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}
/>
<Icons.RefreshIcon
size="medium"

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

@ -6,7 +6,7 @@ const RadioField = React.memo((props) => {
isRequired,
hasError,
labelText,
radioName,
radioValue,
radioOptions,

6
products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/FormFields/TextChangeField.js
View File

@ -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}
/>
<Button
label={buttonText}
@ -41,6 +44,7 @@ const TextChangeField = React.memo((props) => {
isDisabled={buttonIsDisabled}
size="medium"
style={{ marginLeft: "8px" }}
tabIndex={buttonTabIndex}
/>
</InputContainer>
</FieldContainer>

6
products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/FormFields/TextField.js
View File

@ -10,7 +10,9 @@ const TextField = React.memo((props) => {
inputName,
inputValue,
inputIsDisabled,
inputOnChange
inputOnChange,
inputAutoFocussed,
inputTabIndex
} = props;
return (
@ -26,6 +28,8 @@ const TextField = React.memo((props) => {
onChange={inputOnChange}
hasError={hasError}
className="field-input"
isAutoFocussed={inputAutoFocussed}
tabIndex={inputTabIndex}
/>
</FieldContainer>
);

15
products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/createUserForm.js
View File

@ -133,6 +133,8 @@ class CreateUserForm extends React.Component {
inputValue={this.state.profile.firstName}
inputIsDisabled={this.state.isLoading}
inputOnChange={this.onTextChange}
inputAutoFocussed={true}
inputTabIndex={1}
/>
<TextField
isRequired={true}
@ -142,6 +144,7 @@ class CreateUserForm extends React.Component {
inputValue={this.state.profile.lastName}
inputIsDisabled={this.state.isLoading}
inputOnChange={this.onTextChange}
inputTabIndex={2}
/>
<TextField
isRequired={true}
@ -151,6 +154,7 @@ class CreateUserForm extends React.Component {
inputValue={this.state.profile.email}
inputIsDisabled={this.state.isLoading}
inputOnChange={this.onTextChange}
inputTabIndex={3}
/>
<PasswordField
isRequired={true}
@ -173,6 +177,7 @@ class CreateUserForm extends React.Component {
refreshIconOnClick={()=>{}}
copyLinkText={this.props.t("CopyEmailAndPassword")}
copyLinkOnClick={()=>{}}
inputTabIndex={4}
/>
<DateField
labelText={`${this.props.t("Birthdate")}:`}
@ -180,6 +185,7 @@ class CreateUserForm extends React.Component {
inputValue={this.state.profile.birthday ? new Date(this.state.profile.birthday) : undefined}
inputIsDisabled={this.state.isLoading}
inputOnChange={this.onBirthdayDateChange}
inputTabIndex={5}
/>
<RadioField
labelText={`${this.props.t("Sex")}:`}
@ -198,6 +204,7 @@ class CreateUserForm extends React.Component {
inputValue={this.state.profile.workFrom ? new Date(this.state.profile.workFrom) : undefined}
inputIsDisabled={this.state.isLoading}
inputOnChange={this.onWorkFromDateChange}
inputTabIndex={6}
/>
<TextField
labelText={`${this.props.t("Location")}:`}
@ -205,6 +212,7 @@ class CreateUserForm extends React.Component {
inputValue={this.state.profile.location}
inputIsDisabled={this.state.isLoading}
inputOnChange={this.onTextChange}
inputTabIndex={7}
/>
<TextField
labelText={`${this.props.t("CustomPosition", { position })}:`}
@ -212,6 +220,7 @@ class CreateUserForm extends React.Component {
inputValue={this.state.profile.title}
inputIsDisabled={this.state.isLoading}
inputOnChange={this.onTextChange}
inputTabIndex={8}
/>
<DepartmentField
labelText={`${this.props.t("CustomDepartment", { department })}:`}
@ -222,11 +231,11 @@ class CreateUserForm extends React.Component {
</MainContainer>
<div>
<Text.ContentHeader>{this.props.t("Comments")}</Text.ContentHeader>
<Textarea name="notes" value={this.state.profile.notes} isDisabled={this.state.isLoading} onChange={this.onTextChange}/>
<Textarea name="notes" value={this.state.profile.notes} isDisabled={this.state.isLoading} onChange={this.onTextChange} tabIndex={9}/>
</div>
<div style={{marginTop: "60px"}}>
<Button label={this.props.t("SaveButton")} onClick={this.handleSubmit} primary isDisabled={this.state.isLoading} size="big"/>
<Button label={this.props.t("CancelButton")} onClick={this.onCancel} isDisabled={this.state.isLoading} size="big" style={{ marginLeft: "8px" }}/>
<Button label={this.props.t("SaveButton")} onClick={this.handleSubmit} primary isDisabled={this.state.isLoading} size="big" tabIndex={10}/>
<Button label={this.props.t("CancelButton")} onClick={this.onCancel} isDisabled={this.state.isLoading} size="big" style={{ marginLeft: "8px" }} tabIndex={11}/>
</div>
</>
);

16
products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/updateUserForm.js
View File

@ -138,6 +138,7 @@ class UpdateUserForm extends React.Component {
buttonText={this.props.t("ChangeButton")}
buttonIsDisabled={this.state.isLoading}
buttonOnClick={this.onDialogShow}
buttonTabIndex={1}
/>
<TextChangeField
labelText={`${this.props.t("Password")}:`}
@ -146,6 +147,7 @@ class UpdateUserForm extends React.Component {
buttonText={this.props.t("ChangeButton")}
buttonIsDisabled={this.state.isLoading}
buttonOnClick={this.onDialogShow}
buttonTabIndex={2}
/>
<TextChangeField
labelText={`${this.props.t("Phone")}:`}
@ -154,6 +156,7 @@ class UpdateUserForm extends React.Component {
buttonText={this.props.t("ChangeButton")}
buttonIsDisabled={this.state.isLoading}
buttonOnClick={this.onDialogShow}
buttonTabIndex={3}
/>
<TextField
isRequired={true}
@ -163,6 +166,8 @@ class UpdateUserForm extends React.Component {
inputValue={this.state.profile.firstName}
inputIsDisabled={this.state.isLoading}
inputOnChange={this.onTextChange}
inputAutoFocussed={true}
inputTabIndex={4}
/>
<TextField
isRequired={true}
@ -172,6 +177,7 @@ class UpdateUserForm extends React.Component {
inputValue={this.state.profile.lastName}
inputIsDisabled={this.state.isLoading}
inputOnChange={this.onTextChange}
inputTabIndex={5}
/>
<DateField
labelText={`${this.props.t("Birthdate")}:`}
@ -179,6 +185,7 @@ class UpdateUserForm extends React.Component {
inputValue={this.state.profile.birthday ? new Date(this.state.profile.birthday) : undefined}
inputIsDisabled={this.state.isLoading}
inputOnChange={this.onBirthdayDateChange}
inputTabIndex={6}
/>
<RadioField
labelText={`${this.props.t("Sex")}:`}
@ -208,6 +215,7 @@ class UpdateUserForm extends React.Component {
inputValue={this.state.profile.workFrom ? new Date(this.state.profile.workFrom) : undefined}
inputIsDisabled={this.state.isLoading}
inputOnChange={this.onWorkFromDateChange}
inputTabIndex={7}
/>
<TextField
labelText={`${this.props.t("Location")}:`}
@ -215,6 +223,7 @@ class UpdateUserForm extends React.Component {
inputValue={this.state.profile.location}
inputIsDisabled={this.state.isLoading}
inputOnChange={this.onTextChange}
inputTabIndex={8}
/>
<TextField
labelText={`${this.props.t("CustomPosition", { position })}:`}
@ -222,6 +231,7 @@ class UpdateUserForm extends React.Component {
inputValue={this.state.profile.title}
inputIsDisabled={this.state.isLoading}
inputOnChange={this.onTextChange}
inputTabIndex={9}
/>
<DepartmentField
labelText={`${this.props.t("CustomDepartment", { department })}:`}
@ -232,11 +242,11 @@ class UpdateUserForm extends React.Component {
</MainContainer>
<div>
<Text.ContentHeader>{this.props.t("Comments")}</Text.ContentHeader>
<Textarea name="notes" value={this.state.profile.notes} isDisabled={this.state.isLoading} onChange={this.onTextChange}/>
<Textarea name="notes" value={this.state.profile.notes} isDisabled={this.state.isLoading} onChange={this.onTextChange} tabIndex={10}/>
</div>
<div style={{marginTop: "60px"}}>
<Button label={this.props.t("SaveButton")} onClick={this.handleSubmit} primary isDisabled={this.state.isLoading} size="big"/>
<Button label={this.props.t("CancelButton")} onClick={this.onCancel} isDisabled={this.state.isLoading} size="big" style={{ marginLeft: "8px" }}/>
<Button label={this.props.t("SaveButton")} onClick={this.handleSubmit} primary isDisabled={this.state.isLoading} size="big" tabIndex={11}/>
<Button label={this.props.t("CancelButton")} onClick={this.onCancel} isDisabled={this.state.isLoading} size="big" style={{ marginLeft: "8px" }} tabIndex={12}/>
</div>
<ModalDialog