react/src/base/inputs/SprkTextareaContainer/SprkTextareaContainer.js
/**
   * A function that is run when the component renders.
   * It processes and updates the children & grandchildren that
   * are passed into the SprkTextareaContainer to add necessary
   * a11y considerations.
   * `for` and `id` are checked and updated to match,
   * if they don't match initially.
   * `ariaDescribedby` is checked and updated on the `textarea`
   * element to include the `id` of the `SprkHelperText`,
   * `SprkFieldError`, and `SprkErrorContainer` if present among
   * the children and grandchildren.
   * @returns {object} Processed and updated children elements
   */
A function that is run when the component renders.
It processes and updates the children & grandchildren that
are passed into the SprkTextareaContainer to add necessary
a11y considerations.
`for` and `id` are checked and updated to match,
if they don't match initially.
A function that is run when the component renders . It processes and updates the children & grandchildren that are passed into the SprkTextareaContainer to add necessary a11y considerations . ` for ` and ` id ` are checked and updated to match if they don ' t match initially .
renderChildren() {
    const { children } = this.props;
    let id;
    let labelFor;
    let errorContainerID;
    let helperTextID;
    let inputAriaDescribedBy;
    let inputAriaDescribedByArray = [];
    React.Children.forEach(children, (child) => {
      if (child === null) {
        return;
      }
      if (child.type && child.type.name === SprkTextarea.name) {
        id = child.props.id;
        inputAriaDescribedBy = child.props.ariaDescribedBy;
      }
      if (child.type && child.type.name === SprkLabel.name) {
        labelFor = child.props.htmlFor;
      }
      if (
        child.type &&
        (child.type.name === SprkFieldError.name ||
          child.type.name === SprkErrorContainer.name)
      ) {
        errorContainerID = child.props.id;
      }
      if (child.type && child.type.name === SprkHelperText.name) {
        helperTextID = child.props.id;
      }
    });
    if (helperTextID || errorContainerID) {
      if (inputAriaDescribedBy) {
        inputAriaDescribedByArray = inputAriaDescribedBy.split(' ');
      }
      if (helperTextID && !inputAriaDescribedByArray.includes(helperTextID)) {
        inputAriaDescribedByArray.push(helperTextID);
      }
      if (
        errorContainerID &&
        !inputAriaDescribedByArray.includes(errorContainerID)
      ) {
        inputAriaDescribedByArray.push(errorContainerID);
      }
      inputAriaDescribedBy = inputAriaDescribedByArray.join(' ');
    }
    if (id && labelFor && id.length > 0 && labelFor.length > 0) {
      const childrenElements = React.Children.map(children, (child) => {
        if (child === null) {
          return child;
        }
        if (id !== labelFor && child.type.name === SprkLabel.name) {
          return React.cloneElement(child, {
            htmlFor: id,
          });
        }
        if (inputAriaDescribedBy && child.type.name === SprkTextarea.name) {
          return React.cloneElement(child, {
            ariaDescribedBy: inputAriaDescribedBy,
          });
        }
        return child;
      });
      return childrenElements;
    }
    return children;
  }
renderChildren ( ) { const { children } = this . props ; let id ; let labelFor ; let errorContainerID ; let helperTextID ; let inputAriaDescribedBy ; let inputAriaDescribedByArray = [ ] ; React . Children . forEach ( children , ( child ) => { if ( child === null ) { return ; } if ( child . type && child . type . name === SprkTextarea . name ) { id = child . props . id ; inputAriaDescribedBy = child . props . ariaDescribedBy ; } if ( child . type && child . type . name === SprkLabel . name ) { labelFor = child . props . htmlFor ; } if ( child . type && ( child . type . name === SprkFieldError . name || child . type . name === SprkErrorContainer . name ) ) { errorContainerID = child . props . id ; } if ( child . type && child . type . name === SprkHelperText . name ) { helperTextID = child . props . id ; } } ) ; if ( helperTextID || errorContainerID ) { if ( inputAriaDescribedBy ) { inputAriaDescribedByArray = inputAriaDescribedBy . split ( ' ' ) ; } if ( helperTextID && ! inputAriaDescribedByArray . includes ( helperTextID ) ) { inputAriaDescribedByArray . push ( helperTextID ) ; } if ( errorContainerID && ! inputAriaDescribedByArray . includes ( errorContainerID ) ) { inputAriaDescribedByArray . push ( errorContainerID ) ; } inputAriaDescribedBy = inputAriaDescribedByArray . join ( ' ' ) ; } if ( id && labelFor && id . length > 0 && labelFor . length > 0 ) { const childrenElements = React . Children . map ( children , ( child ) => { if ( child === null ) { return child ; } if ( id !== labelFor && child . type . name === SprkLabel . name ) { return React . cloneElement ( child , { htmlFor : id , } ) ; } if ( inputAriaDescribedBy && child . type . name === SprkTextarea . name ) { return React . cloneElement ( child , { ariaDescribedBy : inputAriaDescribedBy , } ) ; } return child ; } ) ; return childrenElements ; } return children ; }
A function that is run when the component renders.
A function that is run when the component renders .
/*
     * Checks each child element to
     * store the provided `ariaDescribedby` on the `textarea`,
     * `id` of the SprkFieldError, SprkErrorContainer,
     * SprkHelperText, and `for` of the SprkLabel in
     * variables for processing.
     */ /**
       * Add this check in case the child is being
       * conditionally rendered.
       * If the child is not rendered but returns a React fragment the
       * child will return null and break without this check.
       */ /**
       * If the child element is a SprkTextarea, then the `id`
       * & `ariaDescribedby` are stored for later use.
       */ /**
       * If the child element is a SprkLabel, then the `htmlFor`
       * is stored for later use.
       */ /**
       * If the child element is a SprkFieldError or SprkErrorContainer,
       * then the `id` is stored for later use.
       */ /**
       * If the child element is a SprkHelperText,
       * then the `id` is stored for later use.
       */ /**
     * If there is a SprkHelperText, SprkFieldError, or SprkErrorContainer
     * present in the children elements then start the `ariaDescribedBy`
     * processing.
     */ /**
       * If an `ariaDescribedBy` was provided on the SprkTextarea,
       * then split the string into an array.
       */ /**
       * If there is a SprkHelperText element present and the `id` is not
       * present in the SprkTextarea's `ariaDescribedBy` array, add it.
       */ /**
       * If there is a SprkFieldError or SprkErrorContainer element present
       * and the `id` is not present in the SprkTextarea's `ariaDescribedBy`
       * array, add it.
       */ /**
       * Once the necessary values have been added to the `ariaDescribedBy`
       * array, rejoin the values to make a string that will be passed to the
       * SprkTextarea prop.
       */ /**
         * Add this check in case the child is being
         * conditionally rendered.
         * If the child is not rendered but returns a React fragment the
         * child will return null and break without this check.
         */ /*
         * If the SprkLabel `htmlFor` and the textarea `id`
         * are mismatching, use the `id`
         * value to set the `htmlFor` attribute on the SprkLabel.
         * SprkTextarea and SprkLabel will always have
         * an `id` and a `htmlFor`. We check for presence (id="")
         * before checking for length to avoid running
         * .length on undefined.
         */ /*
         * If there is an `inputAriaDescribedBy` value and the child element
         * is a SprkTextarea, then clone the child element and update the
         * `ariaDescribedBy` prop with the correct value.
         */ /**
         * If the child element does not need to be updated
         * with the `id`, `htmlFor` or `ariaDescribedBy` criteria,
         * return it without updating any props.
         */ /**
       * Return the child elements to be rendered.
       */ /** Return other elements. ex. <div> */