web: Components: AdvancedSelector: Added Group row select and check

web/ASC.Web.Components/src/components/advanced-selector/sub-components/groups/body.js

@@ -7,13 +7,14 @@ import findIndex from "lodash/findIndex";
 
 class ADSelectorGroupsBody extends React.Component {
   renderRow = ({ data, index, style }) => {
-    const {isMultiSelect, selectedAll, selectedOptions} = this.props;
+    const {isMultiSelect, selectedAll, selectedOptions, currentGroup} = this.props;
 
     const option = data[index];
-    var isChecked = isMultiSelect
+    const isChecked = isMultiSelect
       ? selectedAll ||
         findIndex(selectedOptions, { key: option.key }) > -1
       : undefined;
+    const isSelected = currentGroup.key === option.key;
 
     //console.log("renderRow", option, isChecked, this.state.selectedOptions);
     return (
@@ -23,8 +24,8 @@ class ADSelectorGroupsBody extends React.Component {
         isChecked={isChecked}
         isMultiSelect={isMultiSelect}
         style={style}
+        isSelected={isSelected}
         onChange={this.props.onRowChecked.bind(this, option)}
-        onSelect={this.props.onRowSelect.bind(this, option)}
       />
     );
   };
@@ -51,6 +52,7 @@ ADSelectorGroupsBody.propTypes = {
   options: PropTypes.array,
   selectedOptions: PropTypes.array,
   selectedAll: PropTypes.bool,
+  currentGroup: PropTypes.object,
   isMultiSelect: PropTypes.bool,
   listHeight: PropTypes.number,
   itemHeight: PropTypes.number,

web/ASC.Web.Components/src/components/advanced-selector/sub-components/row.js

@@ -3,39 +3,40 @@ import PropTypes from "prop-types";
 import Checkbox from "../../checkbox";
 import Link from "../../link";
 
-const ADSelectorRow = (props) => {
-    const { label, isChecked, style, onChange, onSelect, isMultiSelect } = props;
+const ADSelectorRow = props => {
+  const { label, isChecked, style, onChange, onSelect, isMultiSelect, isSelected } = props;
 
-    return (
-        <div className="option" style={style}>
-        {isMultiSelect ? (
-          <Checkbox
-            label={label}
-            isChecked={isChecked}
-            className="option_checkbox"
-            onChange={onChange}
-          />
-        ) : (
-          <Link
-            as="span"
-            truncate={true}
-            className="option_link"
-            onClick={onSelect}
-          >
-            {label}
-          </Link>
-        )}
-      </div>
-    );
+  return (
+    <div className={`option ${isSelected && 'selected'}`} style={style}>
+      {isMultiSelect ? (
+        <Checkbox
+          label={label}
+          isChecked={isChecked}
+          className="option_checkbox"
+          onChange={onChange}
+        />
+      ) : (
+        <Link
+          as="span"
+          truncate={true}
+          className="option_link"
+          onClick={onSelect}
+        >
+          {label}
+        </Link>
+      )}
+    </div>
+  );
 };
 
 ADSelectorRow.propTypes = {
-    label: PropTypes.string,
-    isChecked: PropTypes.bool,
-    isMultiSelect: PropTypes.bool,
-    style: PropTypes.object,
-    onChange: PropTypes.func,
-    onSelect: PropTypes.func
-}
+  label: PropTypes.string,
+  isSelected: PropTypes.bool,
+  isChecked: PropTypes.bool,
+  isMultiSelect: PropTypes.bool,
+  style: PropTypes.object,
+  onChange: PropTypes.func,
+  onSelect: PropTypes.func
+};
 
-export default ADSelectorRow;
+export default ADSelectorRow;

web/ASC.Web.Components/src/components/advanced-selector/sub-components/selector.js

@@ -46,6 +46,7 @@ const Container = ({
   hasNextPage,
   isNextPageLoading,
   loadNextPage,
+  isSelected,
   ...props
 }) => <div {...props} />;
 /* eslint-enable react/prop-types */
@@ -178,6 +179,10 @@ const StyledContainer = styled(Container)`
             background-color: #eceef1;
           }
         }
+
+        .option.selected {
+          background-color: #ECEEF1;
+        }
       }
     }
   }
@@ -339,16 +344,26 @@ class ADSelector extends React.Component {
     });
   };
 
-  onGroupSelect = option => {
-    this.props.onGroupSelect && this.props.onGroupSelect(option);
-  };
-
-  onGroupChange = group => {
-    this.setState({
+  onGroupChange = (group, e) => {
+    /*this.setState({
       currentGroup: group
     });
 
-    this.props.onGroupChange && this.props.onGroupChange(group);
+    this.props.onGroupChange && this.props.onGroupChange(group);*/
+
+    const { selectedGroups } = this.state;
+    const newSelectedGroups = e.target.checked
+      ? [...selectedGroups, group]
+      : filter(selectedGroups, obj => obj.key !== group.key);
+
+    //console.log("onChange", option, e.target.checked, newSelectedOptions);
+
+    this.setState({
+      selectedGroups: newSelectedGroups,
+      currentGroup: group
+    });
+
+    this.props.onGroupSelect && this.props.onGroupSelect(group);
   };
 
   render() {
@@ -465,10 +480,10 @@ class ADSelector extends React.Component {
                     options={groups}
                     selectedOptions={selectedGroups}
                     isMultiSelect={isMultiSelect}
+                    currentGroup={currentGroup}
                     listHeight={listHeight}
                     itemHeight={itemHeight}
                     onRowChecked={this.onGroupChange}
-                    onRowSelect={this.onGroupSelect}
                   />
                 </div>
               )}