github.com/replicatedhq/ship@v0.55.0/web/init/src/components/config_render/ConfigRender.jsx (about)

     1  import React from "react";
     2  import keyBy from "lodash/keyBy";
     3  import debounce from "lodash/debounce";
     4  import _ from "lodash/core";
     5  
     6  import ConfigGroups from "./ConfigGroups";
     7  import { ConfigService } from "../../services/ConfigService";
     8  
     9  export default class ConfigRender extends React.Component {
    10  
    11    constructor(props) {
    12      super(props);
    13      this.state= {
    14        groups: this.props.fields
    15      }
    16      this.triggerChange = debounce(this.triggerChange, 300);
    17    }
    18  
    19    triggerChange = (data) => {
    20      if (this.props.handleChange) {
    21        this.props.handleChange(data);
    22      }
    23    }
    24  
    25    handleGroupsChange = (groupName, itemName, value, data) => {
    26      const getValues = (val) => {
    27        if (!val) {
    28          return [];
    29        }
    30        return _.isArray(val) ? val : [val];
    31      };
    32      const getValue = (val) => {
    33        if (!val) {
    34          return val;
    35        }
    36        return _.isArray(val) ? _.first(val) : val;
    37      };
    38      let groups = _.map(this.props.fields, (group) => {
    39        if (group.name === groupName) {
    40          group.items = _.map(group.items, (item) => {
    41            if (!(item.type in ["select_many", "label", "heading"]) && item.name === itemName) {
    42              if (item.multiple) {
    43                item.multi_value = getValues(value);
    44                if (item.type === "file") {
    45                  item.multi_data = getValues(data);
    46                }
    47              } else {
    48                item.value = getValue(value);
    49                if (item.type === "file") {
    50                  item.data = getValue(data);
    51                }
    52              }
    53            } else {
    54              if (item.type !== "select_one") {
    55                item.items = _.map(item.items, (childItem) => {
    56                  if (childItem.name === itemName) {
    57                    if (childItem.multiple) {
    58                      childItem.multi_value = getValues(value);
    59                      if (childItem.type === "file") {
    60                        childItem.multi_data = getValues(data);
    61                      }
    62                    } else {
    63                      childItem.value = getValue(value);
    64                      if (childItem.type === "file") {
    65                        childItem.data = getValue(data);
    66                      }
    67                    }
    68                  }
    69                  return childItem;
    70                });
    71              }
    72            }
    73            return item;
    74          });
    75        }
    76        return group;
    77      });
    78  
    79      this.setState({groups: keyBy(groups, "name")});
    80  
    81      // TODO: maybe this should only be on submit
    82      this.triggerChange(this.props.getData(groups));
    83    }
    84  
    85    componentDidUpdate(lastProps) {
    86      if (this.props.fields !== lastProps.fields) {
    87        this.setState({
    88          groups: keyBy(ConfigService.filterGroups(this.props.fields, this.props.filters), "name"),
    89        });
    90      }
    91    }
    92  
    93    render() {
    94      const { fieldsList, readonly } = this.props;
    95      return (
    96        <div className="flex-column flex1">
    97          <ConfigGroups
    98            fieldsList={fieldsList}
    99            fields={this.state.groups}
   100            handleChange={this.handleGroupsChange}
   101            readonly={readonly}
   102          />
   103        </div>
   104      );
   105    }
   106  }