ASC.People: ProfileAction: changed fields to class components + using new DatePicker

2019-09-11 13:17:41 +03:00 · 2019-09-11 13:17:41 +03:00 · aa7efdaf2e
commit aa7efdaf2e
parent 491ee035a2
10 changed files with 442 additions and 307 deletions
--- a/products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/FormFields/ContactField.js
+++ b/products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/FormFields/ContactField.js
@ -0,0 +1,54 @@
+import React from "react";
+import styled from "styled-components";
+import isEqual from "lodash/isEqual";
+import { ComboBox, TextInput } from "asc-web-components";
+
+const Container = styled.div`
+  display: flex;
+  margin: 0 0 16px 0;
+`;
+
+class ContactField extends React.Component {
+  shouldComponentUpdate(nextProps) {
+    return !isEqual(this.props, nextProps);
+  }
+
+  render() {
+    console.log("ContactField render");
+
+    const {
+      isDisabled,
+
+      comboBoxName,
+      comboBoxOptions,
+      comboBoxSelectedOption,
+      comboBoxOnChange,
+
+      inputName,
+      inputValue,
+      inputOnChange
+    } = this.props;
+
+    return (
+      <Container>
+        <ComboBox
+          name={comboBoxName}
+          options={comboBoxOptions}
+          onSelect={comboBoxOnChange}
+          selectedOption={comboBoxSelectedOption}
+          isDisabled={isDisabled}
+          scaled={false}
+          className="field-select"
+        />
+        <TextInput
+          name={inputName}
+          value={inputValue}
+          isDisabled={isDisabled}
+          onChange={inputOnChange}
+        />
+      </Container>
+    );
+  }
+}
+
+export default ContactField;
--- a/products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/FormFields/ContactsField.js
+++ b/products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/FormFields/ContactsField.js
@ -1,6 +1,8 @@
-import React from 'react'
-import styled from 'styled-components';
-import { ComboBox, TextInput } from 'asc-web-components'
+import React from "react";
+import styled from "styled-components";
+import isEqual from "lodash/isEqual";
+import ContactField from "./ContactField";
+import { ComboBox } from "asc-web-components";

 const Container = styled.div`
  width: 100%;
@ -12,82 +14,96 @@ const Container = styled.div`
  }
 `;

-const Item = styled.div`
-  display: flex;
-  margin: 0 0 16px 0;
-`;
-
 const getOptions = (patterns, keyPrefix) => {
-    return patterns.map((item, index) => {
-        return {
-            key: keyPrefix + index,
-            label: item.type, //from resource
-            icon: item.icon,
-            value: item.type
-        };
-    });
-}
+  return patterns.map((item, index) => {
+    return {
+      key: keyPrefix + index,
+      label: item.type, //from resource
+      icon: item.icon,
+      value: item.type
+    };
+  });
+};

-const renderItems = (contacts, pattern, onTypeChange, onTextChange, isDisabled) => {
-    const items = contacts.map((contact, index) => {
+const renderItems = (
+  contacts,
+  pattern,
+  onTypeChange,
+  onTextChange,
+  isDisabled
+) => {
+  const items = contacts.map((contact, index) => {
+    const prefix = contact.id + "_";
+    const itemOptions = getOptions(pattern, prefix);
+    const itemSelectedOption = itemOptions.filter(
+      option => option.value === contact.type
+    )[0];

-        const prefix = contact.id + "_";
+    return (
+      <ContactField
+        key={prefix + "item_" + index}
+        isDisabled={isDisabled}
+        comboBoxName={prefix + "type"}
+        comboBoxOptions={itemOptions}
+        comboBoxSelectedOption={itemSelectedOption}
+        comboBoxOnChange={onTypeChange}
+        inputName={prefix + "value"}
+        inputValue={contact.value}
+        inputOnChange={onTextChange}
+      />
+    );
+  });

-        const itemOptions = getOptions(pattern, prefix);
+  return items;
+};

-        const itemSelectedOption = itemOptions.filter(option => option.value === contact.type)[0];
-        
-        return (
-            <Item key={prefix + "item_" + index}>
-                <ComboBox
-                    name={prefix + "type"}
-                    options={itemOptions}
-                    onSelect={onTypeChange}
-                    selectedOption={itemSelectedOption}
-                    isDisabled={isDisabled}
-                    scaled={false}
-                    className="field-select"
-                />
-                <TextInput
-                    name={prefix + "value"}
-                    value={contact.value}
-                    isDisabled={isDisabled}
-                    onChange={onTextChange}
-                />
-            </Item>
-        );
-    });
-  
-    return items;
-  };
+class ContactsField extends React.Component {
+  shouldComponentUpdate(nextProps) {
+    return !isEqual(this.props, nextProps);
+  }

-const ContactsField = React.memo((props) => {
+  render() {
+    console.log("ContactsField render");

-    const { pattern, contacts, addItemText, onItemAdd, onItemTypeChange, onItemTextChange, isDisabled } = props;
+    const {
+      pattern,
+      contacts,
+      addItemText,
+      onItemAdd,
+      onItemTypeChange,
+      onItemTextChange,
+      isDisabled
+    } = this.props;

-    const existItems = renderItems(contacts, pattern, onItemTypeChange, onItemTextChange, isDisabled);
+    const existItems = renderItems(
+      contacts,
+      pattern,
+      onItemTypeChange,
+      onItemTextChange,
+      isDisabled
+    );

    const prefix = "null_";
-
    const options = getOptions(pattern, prefix);

    return (
-        <Container>
-            {existItems}
-            <ComboBox
-                options={options}
-                onSelect={onItemAdd}
-                selectedOption={{
-                    key: prefix,
-                    label: addItemText,
-                    value: ""
-                }}
-                isDisabled={isDisabled}
-                scaled={false}
-                className="field-select"
-            />
-        </Container>
+      <Container>
+        {existItems}
+        <ComboBox
+          options={options}
+          onSelect={onItemAdd}
+          selectedOption={{
+            key: prefix,
+            label: addItemText,
+            value: ""
+          }}
+          isDisabled={isDisabled}
+          scaled={false}
+          className="field-select"
+        />
+      </Container>
    );
-});
+  }
+}

-export default ContactsField
+export default ContactsField;
--- 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
@ -1,35 +1,44 @@
-import React from 'react'
-import { FieldContainer, DateInput } from 'asc-web-components'
+import React from "react";
+import isEqual from "lodash/isEqual";
+import { FieldContainer, DatePicker } from "asc-web-components";

-const DateField = React.memo((props) => {
-  const {
-    isRequired,
-    hasError,
-    labelText,
+class DateField extends React.Component {
+  shouldComponentUpdate(nextProps) {
+    return !isEqual(this.props, nextProps);
+  }

-    inputName,
-    inputValue,
-    inputIsDisabled,
-    inputOnChange,
-    inputTabIndex
-  } = props;
+  render() {
+    console.log("DateField render");

-  return (
-    <FieldContainer
-      isRequired={isRequired}
-      hasError={hasError}
-      labelText={labelText}
-    >
-      <DateInput
-        name={inputName}
-        selected={inputValue}
-        disabled={inputIsDisabled}
-        onChange={inputOnChange}
+    const {
+      isRequired,
+      hasError,
+      labelText,
+
+      inputName,
+      inputValue,
+      inputIsDisabled,
+      inputOnChange,
+      inputTabIndex
+    } = this.props;
+
+    return (
+      <FieldContainer
+        isRequired={isRequired}
        hasError={hasError}
-        tabIndex={inputTabIndex}
-      />
-    </FieldContainer>
-  );
-});
+        labelText={labelText}
+      >
+        <DatePicker
+          name={inputName}
+          selectedDate={inputValue}
+          disabled={inputIsDisabled}
+          onChange={inputOnChange}
+          hasError={hasError}
+          tabIndex={inputTabIndex}
+        />
+      </FieldContainer>
+    );
+  }
+}

-export default DateField
+export default DateField;
--- 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
@ -1,42 +1,57 @@
-import React from 'react'
-import { FieldContainer, SelectorAddButton, SelectedItem } from 'asc-web-components'
+import React from "react";
+import isEqual from "lodash/isEqual";
+import {
+  FieldContainer,
+  SelectorAddButton,
+  SelectedItem
+} from "asc-web-components";

-const DepartmentField = React.memo((props) => {
-  const {
-    isRequired,
-    isDisabled,
-    hasError,
-    labelText,
-    addButtonTitle,
-    departments,
-    onAddDepartment,
-    onRemoveDepartment
-  } = props;
+class DepartmentField extends React.Component {
+  shouldComponentUpdate(nextProps) {
+    return !isEqual(this.props, nextProps);
+  }

-  return (
-    <FieldContainer
-      isRequired={isRequired}
-      hasError={hasError}
-      labelText={labelText}
-      className="departments-field"
-    >
-      <SelectorAddButton
-        isDisabled={isDisabled}
-        title={addButtonTitle}
-        onClick={onAddDepartment}
-        className="department-add-btn"
-      />
-      {departments && departments.map((department) => (
-        <SelectedItem
-          key={`department_${department.id}`}
-          text={department.name}
-          onClose={() => { onRemoveDepartment(department.id) }}
-          isInline={true}
-          className="department-item"
+  render() {
+    console.log("DepartmentField render");
+
+    const {
+      isRequired,
+      isDisabled,
+      hasError,
+      labelText,
+      addButtonTitle,
+      departments,
+      onAddDepartment,
+      onRemoveDepartment
+    } = this.props;
+
+    return (
+      <FieldContainer
+        isRequired={isRequired}
+        hasError={hasError}
+        labelText={labelText}
+        className="departments-field"
+      >
+        <SelectorAddButton
+          isDisabled={isDisabled}
+          title={addButtonTitle}
+          onClick={onAddDepartment}
+          className="department-add-btn"
        />
-      ))}
-    </FieldContainer>
-  );
-});
+        {departments.map(department => (
+            <SelectedItem
+              key={`department_${department.id}`}
+              text={department.name}
+              onClose={() => {
+                onRemoveDepartment(department.id);
+              }}
+              isInline={true}
+              className="department-item"
+            />
+          ))}
+      </FieldContainer>
+    );
+  }
+}

-export default DepartmentField
+export default DepartmentField;
--- a/products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/FormFields/InfoFieldContainer.js
+++ b/products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/FormFields/InfoFieldContainer.js
@ -1,6 +1,6 @@
-import React from 'react'
-import styled from 'styled-components';
-import { Text } from 'asc-web-components'
+import React from "react";
+import styled from "styled-components";
+import { Text } from "asc-web-components";

 const Container = styled.div`
  margin: 0 0 40px 0;
@ -11,7 +11,7 @@ const Header = styled(Text.ContentHeader)`
  line-height: unset;
 `;

-const InfoFieldContainer = React.memo((props) => {
+const InfoFieldContainer = React.memo(props => {
  const { headerText, children } = props;

  return (
@ -22,4 +22,4 @@ const InfoFieldContainer = React.memo((props) => {
  );
 });

-export default InfoFieldContainer
+export default InfoFieldContainer;
--- 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,66 +1,80 @@
-import React from 'react'
-import { FieldContainer, RadioButtonGroup, PasswordInput } from 'asc-web-components'
+import React from "react";
+import isEqual from "lodash/isEqual";
+import {
+  FieldContainer,
+  RadioButtonGroup,
+  PasswordInput
+} from "asc-web-components";

-const PasswordField = React.memo((props) => {
-  const {
-    isRequired,
-    hasError,
-    labelText,
-    passwordSettings,
+class PasswordField extends React.Component {
+  shouldComponentUpdate(nextProps) {
+    return !isEqual(this.props, nextProps);
+  }

-    radioName,
-    radioValue,
-    radioOptions,
-    radioIsDisabled,
-    radioOnChange,
+  render() {
+    console.log("PasswordField render");

-    inputName,
-    emailInputName,
-    inputValue,
-    inputIsDisabled,
-    inputOnChange,
-    inputTabIndex,
+    const {
+      isRequired,
+      hasError,
+      labelText,
+      passwordSettings,

-    copyLinkText,
-  } = props;
+      radioName,
+      radioValue,
+      radioOptions,
+      radioIsDisabled,
+      radioOnChange,

-  const tooltipPasswordLength = 'from ' + passwordSettings.minLength + ' to 30 characters';
+      inputName,
+      emailInputName,
+      inputValue,
+      inputIsDisabled,
+      inputOnChange,
+      inputTabIndex,

-  return (
-    <FieldContainer
-      isRequired={isRequired}
-      hasError={hasError}
-      labelText={labelText}
-    >
-      <RadioButtonGroup
-        name={radioName}
-        selected={radioValue}
-        options={radioOptions}
-        isDisabled={radioIsDisabled}
-        onClick={radioOnChange}
-        className="radio-group"
-      />
-      <PasswordInput
-        inputName={inputName}
-        emailInputName={emailInputName}
-        inputValue={inputValue}
-        inputWidth="320px"
-        inputTabIndex={inputTabIndex}
-        onChange={inputOnChange}
-        clipActionResource={copyLinkText}
-        clipEmailResource='E-mail: '
-        clipPasswordResource='Password: '
-        tooltipPasswordTitle='Password must contain:'
-        tooltipPasswordLength={tooltipPasswordLength}
-        tooltipPasswordDigits='digits'
-        tooltipPasswordCapital='capital letters'
-        tooltipPasswordSpecial='special characters (!@#$%^&*)'
-        generatorSpecial='!@#$%^&*'
-        passwordSettings={passwordSettings}
-        isDisabled={inputIsDisabled}
-      />
-    </FieldContainer>
-  );
-});
+      copyLinkText
+    } = this.props;

-export default PasswordField;
+    const tooltipPasswordLength =
+      "from " + passwordSettings.minLength + " to 30 characters";
+
+    return (
+      <FieldContainer
+        isRequired={isRequired}
+        hasError={hasError}
+        labelText={labelText}
+      >
+        <RadioButtonGroup
+          name={radioName}
+          selected={radioValue}
+          options={radioOptions}
+          isDisabled={radioIsDisabled}
+          onClick={radioOnChange}
+          className="radio-group"
+        />
+        <PasswordInput
+          inputName={inputName}
+          emailInputName={emailInputName}
+          inputValue={inputValue}
+          inputWidth="320px"
+          inputTabIndex={inputTabIndex}
+          onChange={inputOnChange}
+          clipActionResource={copyLinkText}
+          clipEmailResource="E-mail: "
+          clipPasswordResource="Password: "
+          tooltipPasswordTitle="Password must contain:"
+          tooltipPasswordLength={tooltipPasswordLength}
+          tooltipPasswordDigits="digits"
+          tooltipPasswordCapital="capital letters"
+          tooltipPasswordSpecial="special characters (!@#$%^&*)"
+          generatorSpecial="!@#$%^&*"
+          passwordSettings={passwordSettings}
+          isDisabled={inputIsDisabled}
+        />
+      </FieldContainer>
+    );
+  }
+}
+
+export default PasswordField;
--- a/products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/FormFields/RadioField.js
+++ b/products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/FormFields/RadioField.js
@ -1,35 +1,44 @@
-import React from 'react'
-import { FieldContainer, RadioButtonGroup } from 'asc-web-components'
+import React from "react";
+import isEqual from "lodash/isEqual";
+import { FieldContainer, RadioButtonGroup } from "asc-web-components";

-const RadioField = React.memo((props) => {
-  const {
-    isRequired,
-    hasError,
-    labelText,
+class RadioField extends React.Component {
+  shouldComponentUpdate(nextProps) {
+    return !isEqual(this.props, nextProps);
+  }

-    radioName,
-    radioValue,
-    radioOptions,
-    radioIsDisabled,
-    radioOnChange
-  } = props;
+  render() {
+    console.log("RadioField render");

-  return (
-    <FieldContainer
-      isRequired={isRequired}
-      hasError={hasError}
-      labelText={labelText}
-    >
-      <RadioButtonGroup
-        name={radioName}
-        selected={radioValue}
-        options={radioOptions}
-        isDisabled={radioIsDisabled}
-        onClick={radioOnChange}
-        className="radio-group"
-      />
-    </FieldContainer>
-  );
-});
+    const {
+      isRequired,
+      hasError,
+      labelText,

-export default RadioField
+      radioName,
+      radioValue,
+      radioOptions,
+      radioIsDisabled,
+      radioOnChange
+    } = this.props;
+
+    return (
+      <FieldContainer
+        isRequired={isRequired}
+        hasError={hasError}
+        labelText={labelText}
+      >
+        <RadioButtonGroup
+          name={radioName}
+          selected={radioValue}
+          options={radioOptions}
+          isDisabled={radioIsDisabled}
+          onClick={radioOnChange}
+          className="radio-group"
+        />
+      </FieldContainer>
+    );
+  }
+}
+
+export default RadioField;
--- 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
@ -1,6 +1,7 @@
-import React from 'react'
-import styled from 'styled-components';
-import { FieldContainer, TextInput, Button } from 'asc-web-components'
+import React from "react";
+import styled from "styled-components";
+import isEqual from "lodash/isEqual";
+import { FieldContainer, TextInput, Button } from "asc-web-components";

 const InputContainer = styled.div`
  width: 100%;
@ -9,47 +10,55 @@ const InputContainer = styled.div`
  align-items: center;
 `;

-const TextChangeField = React.memo((props) => {
-  const {
-    isRequired,
-    hasError,
-    labelText,
+class TextChangeField extends React.Component {
+  shouldComponentUpdate(nextProps) {
+    return !isEqual(this.props, nextProps);
+  }

-    inputName,
-    inputValue,
-    inputTabIndex,
+  render() {
+    console.log("TextChangeField render");

-    buttonText,
-    buttonIsDisabled,
-    buttonOnClick,
-    buttonTabIndex
-  } = props;
+    const {
+      isRequired,
+      hasError,
+      labelText,

-  return (
-    <FieldContainer
-      isRequired={isRequired}
-      hasError={hasError}
-      labelText={labelText}
-    >
-      <InputContainer>
-        <TextInput
-          name={inputName}
-          value={inputValue}
-          isDisabled={true}
-          hasError={hasError}
-          tabIndex={inputTabIndex}
-        />
-        <Button
-          label={buttonText}
-          onClick={buttonOnClick}
-          isDisabled={buttonIsDisabled}
-          size="medium"
-          style={{ marginLeft: "8px" }}
-          tabIndex={buttonTabIndex}
-        />
-      </InputContainer>
-    </FieldContainer>
-  );
-});
+      inputName,
+      inputValue,
+      inputTabIndex,

-export default TextChangeField;
+      buttonText,
+      buttonIsDisabled,
+      buttonOnClick,
+      buttonTabIndex
+    } = this.props;
+
+    return (
+      <FieldContainer
+        isRequired={isRequired}
+        hasError={hasError}
+        labelText={labelText}
+      >
+        <InputContainer>
+          <TextInput
+            name={inputName}
+            value={inputValue}
+            isDisabled={true}
+            hasError={hasError}
+            tabIndex={inputTabIndex}
+          />
+          <Button
+            label={buttonText}
+            onClick={buttonOnClick}
+            isDisabled={buttonIsDisabled}
+            size="medium"
+            style={{ marginLeft: "8px" }}
+            tabIndex={buttonTabIndex}
+          />
+        </InputContainer>
+      </FieldContainer>
+    );
+  }
+}
+
+export default TextChangeField;
--- a/products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/FormFields/TextField.js
+++ b/products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/FormFields/TextField.js
@ -1,38 +1,47 @@
-import React from 'react'
-import { FieldContainer, TextInput } from 'asc-web-components'
+import React from "react";
+import isEqual from "lodash/isEqual";
+import { FieldContainer, TextInput } from "asc-web-components";

-const TextField = React.memo((props) => {
-  const {
-    isRequired,
-    hasError,
-    labelText,
+class TextField extends React.Component {
+  shouldComponentUpdate(nextProps) {
+    return !isEqual(this.props, nextProps);
+  }

-    inputName,
-    inputValue,
-    inputIsDisabled,
-    inputOnChange,
-    inputAutoFocussed,
-    inputTabIndex
-  } = props;
+  render() {
+    console.log("TextField render");

-  return (
-    <FieldContainer
-      isRequired={isRequired}
-      hasError={hasError}
-      labelText={labelText}
-    >
-      <TextInput
-        name={inputName}
-        value={inputValue}
-        isDisabled={inputIsDisabled}
-        onChange={inputOnChange}
+    const {
+      isRequired,
+      hasError,
+      labelText,
+
+      inputName,
+      inputValue,
+      inputIsDisabled,
+      inputOnChange,
+      inputAutoFocussed,
+      inputTabIndex
+    } = this.props;
+
+    return (
+      <FieldContainer
+        isRequired={isRequired}
        hasError={hasError}
-        className="field-input"
-        isAutoFocussed={inputAutoFocussed}
-        tabIndex={inputTabIndex}
-      />
-    </FieldContainer>
-  );
-});
+        labelText={labelText}
+      >
+        <TextInput
+          name={inputName}
+          value={inputValue}
+          isDisabled={inputIsDisabled}
+          onChange={inputOnChange}
+          hasError={hasError}
+          className="field-input"
+          isAutoFocussed={inputAutoFocussed}
+          tabIndex={inputTabIndex}
+        />
+      </FieldContainer>
+    );
+  }
+}

-export default TextField;
+export default TextField;
--- a/products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/createUserForm.js
+++ b/products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/createUserForm.js
@ -1,7 +1,7 @@
 import React from 'react'
 import { withRouter } from 'react-router'
 import { connect } from 'react-redux'
-import { Avatar, Button, Textarea, Text, toastr } from 'asc-web-components'
+import { Avatar, Button, Textarea, toastr } from 'asc-web-components'
 import { withTranslation } from 'react-i18next';
 import { toEmployeeWrapper, getUserRole, getUserContactsPattern, getUserContacts } from "../../../../../store/people/selectors";
 import { createProfile } from '../../../../../store/profile/actions';