preact#ComponentChild TypeScript Examples

static fromColumns(
    columns: OneDArray<TColumn | string | ComponentChild>,
  ): Header {
    const header = new Header();

    for (const column of columns) {
      if (typeof column === 'string' || isValidElement(column)) {
        header.columns.push({
          name: column,
        });
      } else if (typeof column === 'object') {
        const typedColumn = column as TColumn;

        if (typedColumn.columns) {
          typedColumn.columns = Header.fromColumns(typedColumn.columns).columns;
        }

        // because the data for that cell is null
        // if we are trying to render a plugin
        if (typeof typedColumn.plugin === 'object') {
          if (typedColumn.data === undefined) {
            typedColumn.data = null;
          }
        }

        // TColumn type
        header.columns.push(column as TColumn);
      }
    }

    return header;
  }

private content(): ComponentChild {
    if (
      this.props.column &&
      typeof this.props.column.formatter === 'function'
    ) {
      return this.props.column.formatter(
        this.props.cell.data,
        this.props.row,
        this.props.column,
      );
    }

    if (this.props.column && this.props.column.plugin) {
      return (
        <PluginRenderer
          pluginId={this.props.column.id}
          props={{
            column: this.props.column,
            cell: this.props.cell,
            row: this.props.row,
          }}
        />
      );
    }

    return this.props.cell.data;
  }

private content(): ComponentChild {
    if (this.props.column.name !== undefined) {
      return this.props.column.name;
    }

    if (this.props.column.plugin !== undefined) {
      return (
        <PluginRenderer
          pluginId={this.props.column.plugin.id}
          props={{
            column: this.props.column,
          }}
        />
      );
    }

    return null;
  }

private renderColumn(
    column: TColumn,
    rowIndex: number,
    columnIndex: number,
    totalRows: number,
  ): ComponentChild {
    const { rowSpan, colSpan } = calculateRowColSpans(
      column,
      rowIndex,
      totalRows,
    );

    return (
      <TH
        column={column}
        index={columnIndex}
        colSpan={colSpan}
        rowSpan={rowSpan}
      />
    );
  }

private renderRow(
    row: TColumn[],
    rowIndex: number,
    totalRows: number,
  ): ComponentChild {
    // because the only sortable columns are leaf columns (not parents)
    const leafColumns = Header.leafColumns(this.props.header.columns);

    return (
      <TR>
        {row.map((col) => {
          if (col.hidden) return null;

          return this.renderColumn(
            col,
            rowIndex,
            leafColumns.indexOf(col),
            totalRows,
          );
        })}
      </TR>
    );
  }

public render(): ComponentChild | Error {
        // render() not implemented in the element
        throw new Error('Payment method cannot be rendered.');
    }

private cast(data: TCell): number | string | boolean | ComponentChild {
    if (data instanceof HTMLElement) {
      return html(data.outerHTML);
    }

    return data;
  }

// because a Cell is a subset of TCell type
  public data: number | string | boolean | ComponentChild;

private renderRows(): ComponentChild {
    const rows = Header.tabularFormat(this.props.header.columns);

    return rows.map((row, rowIndex) =>
      this.renderRow(row, rowIndex, rows.length),
    );
  }

Field: FunctionalComponent<FieldProps> = props => {
    //
    const {
        children,
        className,
        classNameModifiers,
        dir,
        disabled,
        errorMessage,
        helper,
        inputWrapperModifiers,
        isCollatingErrors,
        isLoading,
        isValid,
        label,
        name,
        onBlur,
        onFieldBlur,
        onFocus,
        onFocusField,
        showValidIcon,
        useLabelElement,
        // Redeclare prop names to avoid internal clashes
        filled: propsFilled,
        focused: propsFocused
    } = props;

    const uniqueId = useRef(getUniqueId(`adyen-checkout-${name}`));

    const [focused, setFocused] = useState(false);
    const [filled, setFilled] = useState(false);

    // The means by which focussed/filled is set for securedFields
    if (propsFocused != null) setFocused(!!propsFocused);
    if (propsFilled != null) setFilled(!!propsFilled);

    // The means by which focussed/filled is set for other fields - this function is passed down to them and triggered
    const onFocusHandler = useCallback(
        (event: h.JSX.TargetedEvent<HTMLInputElement>) => {
            setFocused(true);
            onFocus?.(event);
        },
        [onFocus]
    );

    const onBlurHandler = useCallback(
        (event: h.JSX.TargetedEvent<HTMLInputElement>) => {
            setFocused(false);
            onBlur?.(event);
            // When we also need to fire a specific function when a field blurs
            onFieldBlur?.(event);
        },
        [onBlur, onFieldBlur]
    );

    const renderContent = useCallback(() => {
        return (
            <Fragment>
                {typeof label === 'string' && (
                    <span
                        className={classNames({
                            'adyen-checkout__label__text': true,
                            'adyen-checkout__label__text--error': errorMessage
                        })}
                    >
                        {label}
                    </span>
                )}

                {/*@ts-ignore - function is callable*/}
                {typeof label === 'function' && label()}

                {helper && <span className={'adyen-checkout__helper-text'}>{helper}</span>}
                <div
                    className={classNames([
                        'adyen-checkout__input-wrapper',
                        ...inputWrapperModifiers.map(m => `adyen-checkout__input-wrapper--${m}`)
                    ])}
                    dir={dir}
                >
                    {toChildArray(children).map(
                        (child: ComponentChild): ComponentChild => {
                            const childProps = {
                                isValid,
                                onFocusHandler,
                                onBlurHandler,
                                isInvalid: !!errorMessage,
                                ...(name && { uniqueId: uniqueId.current })
                            };
                            return cloneElement(child as VNode, childProps);
                        }
                    )}

                    {isLoading && (
                        <span className="adyen-checkout-input__inline-validation adyen-checkout-input__inline-validation--loading">
                            <Spinner size="small" />
                        </span>
                    )}

                    {isValid && showValidIcon !== false && (
                        <span className="adyen-checkout-input__inline-validation adyen-checkout-input__inline-validation--valid">
                            <Icon type="checkmark" />
                        </span>
                    )}

                    {errorMessage && (
                        <span className="adyen-checkout-input__inline-validation adyen-checkout-input__inline-validation--invalid">
                            <Icon type="field_error" />
                        </span>
                    )}
                </div>
                {errorMessage && typeof errorMessage === 'string' && errorMessage.length && (
                    <span
                        className={'adyen-checkout__error-text'}
                        id={`${uniqueId.current}${ARIA_ERROR_SUFFIX}`}
                        aria-hidden={isCollatingErrors ? 'true' : null}
                        aria-live={isCollatingErrors ? null : 'polite'}
                    >
                        {errorMessage}
                    </span>
                )}
            </Fragment>
        );
    }, [children, errorMessage, isLoading, isValid, label, onFocusHandler, onBlurHandler]);

    const LabelOrDiv = useCallback(({ onFocusField, focused, filled, disabled, name, uniqueId, useLabelElement, children }) => {
        const defaultWrapperProps = {
            onClick: onFocusField,
            className: classNames({
                'adyen-checkout__label': true,
                'adyen-checkout__label--focused': focused,
                'adyen-checkout__label--filled': filled,
                'adyen-checkout__label--disabled': disabled
            })
        };

        return useLabelElement ? (
            <label {...defaultWrapperProps} htmlFor={name && uniqueId}>
                {children}
            </label>
        ) : (
            <div {...defaultWrapperProps} role={'form'}>
                {children}
            </div>
        );
    }, []);

    /**
     * RENDER
     */
    return (
        <div
            className={classNames(
                'adyen-checkout__field',
                className,
                classNameModifiers.map(m => `adyen-checkout__field--${m}`),
                {
                    'adyen-checkout__field--error': errorMessage,
                    'adyen-checkout__field--valid': isValid
                }
            )}
        >
            <LabelOrDiv
                onFocusField={onFocusField}
                name={name}
                disabled={disabled}
                filled={filled}
                focused={focused}
                useLabelElement={useLabelElement}
                uniqueId={uniqueId.current}
            >
                {renderContent()}
            </LabelOrDiv>
        </div>
    );
}