import * as React from "react";

interface InputProps extends React.HTMLProps<HTMLDivElement>{
    // props
};

const SuggestionInput = (allProps: InputProps) => {
    const {...props} = allProps;

    return (
    <div className="form-group">
        <input
            className="form-control"
            type="text"
            name={name}
            value={value}
            autoComplete="off"
            onChange={()=>changeAction(params)}
            onBlur={()=>blurAction(params)} />
        <ul className="list-group suggestions">
        {
          listDisplay?
            dropdownList.map(function(elem: ListItem){
                return (
                    <li
                      key={"list_item_" + elem.value + "_" + elem.zip}
                      className="list-group-item"
                      onClick={(e)=>dropAction(e.currentTarget.value)}>
                            {elem.display}
                     </li>
                );
            })
          : null
        }
        </ul>
    </div>
    )
};

export default SuggestionInput;

import * as React from "react";
import {isObjectEmpty} from '../utils/HelperMethods';

interface ProductProps extends React.HTMLProps<HTMLDivElement>{
    // props
};

const Product = (allProps: ProductProps) => {
    const {...props} = allProps;

    return (
        <div className={divClasses}>
            <label className={labelClasses}>
                <input
                    name={name}
                    type="checkbox"
                    value={value}
                    checked={checked}
                    onClick={(e) => clickAction(e.currentTarget.value)}
                />
                {labelText}

                {
                    extended?
                        !isObjectEmpty(extended) && selected?
                                <div style={{"fontSize": "8pt"}}>
                                    {extended.label}
                                    <input
                                        id={extended.name + value}
                                        name={extended.name + value}
                                        type="text"
                                        size={3}
                                        value={extended.value? extended.value : ""}
                                        onChange={(e)=>secondaryAction(e.currentTarget.value) }
                                    />
                                    {
                                        Object.keys(extended[extended.key].inputNames).map((e, index) => {
                                            return (
                                                <input
                                                key={extended[extended.key].inputNames[e] + value}
                                                type="hidden"
                                                name={ extended[extended.key].inputNames[e] + value }
                                                value={ extended[extended.key][e] }
                                                />
                                            )
                                        })
                                    }
                                </div>
                        : null
                    : null
                }
            </label>
        </div>
    )
};

export default Product;