@hipay/hipay-material-ui 2.0.0-beta.55 → 2.0.0-beta.57

package/HiSelectableList/HiSelectableList.js

@@ -33,6 +33,8 @@ var _HiSelectableListItem = _interopRequireDefault(require("./HiSelectableListIt
 
 var _helpers = require("../utils/helpers");
 
+var _keycode = _interopRequireDefault(require("keycode"));
+
 var styles = function styles() {
   return {
     root: {
@@ -71,6 +73,35 @@ function (_React$PureComponent) {
       };
     };
 
+    _this.handleKeyDown = function (event) {
+      var nextItem;
+      var key = (0, _keycode.default)(event);
+
+      if (key === 'down') {
+        event.preventDefault();
+        nextItem = (0, _helpers.getNextItemSelectable)(document.activeElement, 'down');
+      } else if (key === 'up') {
+        event.preventDefault();
+        nextItem = (0, _helpers.getNextItemSelectable)(document.activeElement, 'up');
+      } else if (key === 'space' || key === 'enter' && !_this.props.multiple) {
+        event.preventDefault();
+
+        var item = _this.props.options.find(function (elem) {
+          return String(elem.id) === event.target.id;
+        });
+
+        _this.handleSelect(null, item);
+      }
+
+      if (nextItem) {
+        nextItem.focus();
+      }
+    };
+
+    _this.handleKeyUp = function () {
+      return false;
+    };
+
     _this.buildRecursiveListItem = function (item) {
       var level = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
       var _this$props = _this.props,
@@ -82,7 +113,11 @@ function (_React$PureComponent) {
           icon = _this$props.icon,
           selectedItemIdList = _this$props.selectedItemIdList,
           sort = _this$props.sort,
-          others = (0, _objectWithoutProperties2.default)(_this$props, ["checkedIcon", "disabled", "disabledItemIdList", "hideCheckbox", "hoverIcon", "icon", "selectedItemIdList", "sort"]);
+          _this$props$onKeyDown = _this$props.onKeyDown,
+          onKeyDown = _this$props$onKeyDown === void 0 ? _this.handleKeyDown : _this$props$onKeyDown,
+          _this$props$onKeyUp = _this$props.onKeyUp,
+          onKeyUp = _this$props$onKeyUp === void 0 ? _this.handleKeyUp : _this$props$onKeyUp,
+          others = (0, _objectWithoutProperties2.default)(_this$props, ["checkedIcon", "disabled", "disabledItemIdList", "hideCheckbox", "hoverIcon", "icon", "selectedItemIdList", "sort", "onKeyDown", "onKeyUp"]);
 
       if (sort && item.children) {
         item.children.sort(_this.compareItem);
@@ -98,6 +133,8 @@ function (_React$PureComponent) {
         icon: icon,
         level: level,
         onSelect: _this.handleSelect(item),
+        onKeyDown: onKeyDown,
+        onKeyUp: onKeyUp,
         selected: selectedItemIdList.includes(item.id) // item props override upper props (disabled, hideCheckbox, icon, level...)
 
       }, item)), item.children && item.children.length > 0 && item.children.filter(function (subItem) {
@@ -136,7 +173,6 @@ function (_React$PureComponent) {
       var _this$props2 = this.props,
           classes = _this$props2.classes,
           itemList = _this$props2.itemList,
-          onKeyDown = _this$props2.onKeyDown,
           sort = _this$props2.sort;
 
       if (sort) {
@@ -144,8 +180,7 @@ function (_React$PureComponent) {
       }
 
       return _react.default.createElement(_List.default, {
-        className: classes.root,
-        onKeyDown: onKeyDown
+        className: classes.root
       }, itemList.filter(function (item) {
         return !(item.displayed === false);
       }) // don't remove if undefined

package/HiSelectableList/HiSelectableListItem.js

@@ -58,15 +58,20 @@ var styles = function styles(theme) {
     listItem: {
       backgroundColor: theme.palette.background3,
       color: theme.palette.neutral.dark,
-      padding: '5px 0',
+      padding: '5px 12px 5px 0px',
       fontWeight: theme.typography.fontWeightRegular,
       maxHeight: 56,
       display: 'inline-flex',
       alignItems: 'center',
       cursor: 'pointer',
+      '&$listItemInlineWithInfoWithoutSecondary': {
+        justifyContent: 'space-between'
+      },
+      '&$listItemWithoutSecondaryInline': {
+        display: 'block'
+      },
       '&$inline': {
         maxHeight: 40,
-        alignItems: 'flex-start',
         '& $secondaryLabel': {
           display: 'inline-block'
         }
@@ -76,6 +81,8 @@ var styles = function styles(theme) {
         outline: 'none'
       }
     },
+    listItemWithoutSecondaryInline: {},
+    listItemInlineWithInfoWithoutSecondary: {},
     listItemHover: {
       '&:hover:not($disabled):not($pinned)': {
         backgroundColor: theme.palette.action.hover,
@@ -109,20 +116,25 @@ var styles = function styles(theme) {
       padding: '8px 0',
       margin: 'auto'
     },
-    listItemContent: (0, _extends2.default)({
-      whiteSpace: 'nowrap',
-      overflow: 'hidden',
-      textOverflow: 'ellipsis'
-    }, theme.typography.b1, {
+    listItemContent: (0, _extends2.default)({}, theme.typography.b1, {
       fontWeight: 'inherit',
       width: '100%',
       minWidth: '50%',
       padding: '5px 0',
+      '&$listItemContentSelected': {
+        marginBottom: -3,
+        marginLeft: -4
+      },
       '& strong': {
         fontWeight: theme.typography.fontWeightMedium
       }
     }),
+    listItemContentSelected: {},
     label: {
+      maxWidth: '100%',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
       display: 'inline-block',
       margin: '1px 0',
       paddingLeft: 4
@@ -145,17 +157,9 @@ var styles = function styles(theme) {
       fontSize: 12,
       textOverflow: 'ellipsis',
       textAlign: 'right',
-      margin: '4px 12px 4px 8px',
-      alignSelf: 'center',
-      minWidth: '40%',
-      maxWidth: '100%'
+      padding: '4px 0px 4px 8px',
+      alignSelf: 'center'
     }),
-    checkbox: {
-      marginTop: 3
-    },
-    checkboxWithSecondaryInline: {
-      marginTop: '-8px'
-    },
     img: {
       width: 24,
       height: 'auto',
@@ -165,7 +169,34 @@ var styles = function styles(theme) {
     icon: {
       margin: '0 4px',
       verticalAlign: 'middle'
-    }
+    },
+    labelContent: {
+      display: 'flex',
+      alignItems: 'center',
+      maxWidth: '70%',
+      '&$labelWithoutSecondaryInline': {
+        maxWidth: '100%'
+      }
+    },
+    labelWithoutSecondaryInline: {},
+    infosContent: {
+      display: 'flex',
+      alignItems: 'center',
+      width: '100%',
+      justifyContent: 'space-between',
+      '&$infosInlineWithoutSecondary': {
+        width: 'auto'
+      },
+      '&$infosWithoutSecondaryInline': {
+        paddingLeft: 28
+      },
+      '&$infosWithSecondaryInline': {
+        marginTop: -8
+      }
+    },
+    infosInlineWithoutSecondary: {},
+    infosWithSecondaryInline: {},
+    infosWithoutSecondaryInline: {}
   };
 };
 /**
@@ -253,7 +284,7 @@ function (_React$PureComponent) {
   }, {
     key: "render",
     value: function render() {
-      var _classNames, _classNames2;
+      var _classNames, _classNames3, _classNames4;
 
       var _this$props2 = this.props,
           centered = _this$props2.centered,
@@ -264,6 +295,7 @@ function (_React$PureComponent) {
           hideCheckbox = _this$props2.hideCheckbox,
           onSelect = _this$props2.onSelect,
           onKeyDown = _this$props2.onKeyDown,
+          onKeyUp = _this$props2.onKeyUp,
           indeterminate = _this$props2.indeterminate,
           indeterminateIcon = _this$props2.indeterminateIcon,
           icon = _this$props2.icon,
@@ -278,7 +310,8 @@ function (_React$PureComponent) {
           secondaryInline = _this$props2.secondaryInline,
           secondaryLabel = _this$props2.secondaryLabel,
           thin = _this$props2.thin,
-          type = _this$props2.type; // Return simple loader list item
+          type = _this$props2.type,
+          color = _this$props2.color; // Return simple loader list item
 
       if (type === 'loader') {
         return _react.default.createElement(_ListItem.default, null, _react.default.createElement(_HiLoader.default, {
@@ -304,35 +337,32 @@ function (_React$PureComponent) {
         classes: {
           root: classes.root
         },
-        className: (0, _classnames.default)(classes.listItem, classes.listItemHover, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.disabled, disabled), (0, _defineProperty2.default)(_classNames, classes.selected, selected), (0, _defineProperty2.default)(_classNames, classes.thin, thin), (0, _defineProperty2.default)(_classNames, classes.pinned, pinned), (0, _defineProperty2.default)(_classNames, classes.inline, secondaryInline), _classNames)),
+        className: (0, _classnames.default)(classes.listItem, classes.listItemHover, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.disabled, disabled), (0, _defineProperty2.default)(_classNames, classes.selected, selected), (0, _defineProperty2.default)(_classNames, classes.thin, thin), (0, _defineProperty2.default)(_classNames, classes.pinned, pinned), (0, _defineProperty2.default)(_classNames, classes.inline, secondaryInline), (0, _defineProperty2.default)(_classNames, classes.listItemWithoutSecondaryInline, !secondaryInline), (0, _defineProperty2.default)(_classNames, classes.listItemInlineWithInfoWithoutSecondary, secondaryInline && info && !secondaryLabel), _classNames)),
         disabled: disabled
       }, disabled || {
         onClick: onSelect,
         onMouseEnter: this.setHover(true),
         onMouseLeave: this.setHover(false),
-        onKeyDown: onKeyDown
+        onKeyDown: onKeyDown,
+        onKeyUp: onKeyUp
       }, {
         style: {
           paddingLeft: "".concat(paddingLeft + level * 32, "px")
         }
-      }), !hideCheckbox && !pinned && _react.default.createElement(_HiCheckbox.default, {
+      }), _react.default.createElement("div", {
+        className: (0, _classnames.default)(classes.labelContent, (0, _defineProperty2.default)({}, classes.labelWithoutSecondaryInline, !secondaryInline || !secondaryLabel && !info))
+      }, !hideCheckbox && !pinned && _react.default.createElement(_HiCheckbox.default, {
         tabIndex: onKeyDown ? '-1' : 0,
-        checked: selected,
-        checkedIcon: checkedIcon,
         classes: {
           root: !secondaryInline ? classes.checkboxWithSecondaryInline : classes.checkbox
         },
-        color: disabled ? "inherit" : "primary",
+        checked: selected,
+        checkedIcon: checkedIcon,
+        color: disabled ? 'inherit' : 'primary',
         disabled: disabled,
         icon: displayedIcon,
         indeterminate: indeterminate,
         indeterminateIcon: indeterminateIcon
-      }), _react.default.createElement("div", {
-        className: (0, _classnames.default)(classes.listItemContent, (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, classes.centered, centered), (0, _defineProperty2.default)(_classNames2, classes.primaryHighlight, type === 'primary-highlight'), _classNames2)),
-        "data-id": id
-      }, type === 'icon' && icon && hideCheckbox && _react.default.createElement(_HiIcon.default, {
-        icon: icon,
-        className: classes.icon
       }), type === 'image' && img && _react.default.createElement("img", {
         src: img,
         alt: img,
@@ -344,11 +374,19 @@ function (_React$PureComponent) {
           }
         },
         className: classes.img
-      }), this.buildItemLabel(), !!secondaryLabel && _react.default.createElement("div", {
+      }), _react.default.createElement("div", {
+        className: (0, _classnames.default)(classes.listItemContent, (_classNames3 = {}, (0, _defineProperty2.default)(_classNames3, classes.centered, centered), (0, _defineProperty2.default)(_classNames3, classes.primaryHighlight, type === 'primary-highlight'), (0, _defineProperty2.default)(_classNames3, classes.listItemContentSelected, selected && color), _classNames3)),
+        "data-id": id
+      }, type === 'icon' && icon && hideCheckbox && _react.default.createElement(_HiIcon.default, {
+        icon: icon,
+        className: classes.icon
+      }), this.buildItemLabel())), _react.default.createElement("div", {
+        className: (0, _classnames.default)(classes.infosContent, (_classNames4 = {}, (0, _defineProperty2.default)(_classNames4, classes.infosWithoutSecondaryInline, !secondaryInline), (0, _defineProperty2.default)(_classNames4, classes.infosWithSecondaryInline, !secondaryInline), (0, _defineProperty2.default)(_classNames4, classes.infosInlineWithoutSecondary, secondaryInline && !secondaryLabel), _classNames4))
+      }, !!secondaryLabel && _react.default.createElement("div", {
         className: (0, _classnames.default)(classes.secondaryLabel, (0, _defineProperty2.default)({}, classes.inline, secondaryInline))
-      }, secondaryLabel)), !!info && _react.default.createElement("span", {
-        className: classes.info
-      }, info));
+      }, secondaryLabel), !!info && _react.default.createElement("span", {
+        className: (0, _classnames.default)(classes.info)
+      }, info)));
     }
   }]);
   return HiSelectableListItem;
@@ -458,12 +496,17 @@ HiSelectableListItem.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
    * Fonction de callback à la sélection de l'élément
    */
-  onSelect: _propTypes.default.func,
+  onKeyDown: _propTypes.default.func,
 
   /**
    * Fonction de callback à la sélection de l'élément
    */
-  onKeyDown: _propTypes.default.func,
+  onKeyUp: _propTypes.default.func,
+
+  /**
+   * Fonction de callback à la sélection de l'élément
+   */
+  onSelect: _propTypes.default.func,
 
   /**
    * Padding par défaut des éléments

package/HiTable/HiCellBuilder.js

@@ -15,7 +15,7 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _getPrototypeOf3 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 
@@ -54,13 +54,19 @@ function (_React$PureComponent) {
   (0, _inherits2.default)(HiCellBuilder, _React$PureComponent);
 
   function HiCellBuilder() {
+    var _getPrototypeOf2;
+
+    var _this;
+
     (0, _classCallCheck2.default)(this, HiCellBuilder);
-    return (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiCellBuilder).apply(this, arguments));
-  }
 
-  (0, _createClass2.default)(HiCellBuilder, [{
-    key: "createCell",
-    value: function createCell(cell, rowdata, locale) {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(HiCellBuilder)).call.apply(_getPrototypeOf2, [this].concat(args)));
+
+    _this.createCell = function (cell, rowdata, locale) {
       if (rowdata.datas[cell.colId]) {
         var datacell = rowdata.datas[cell.colId];
 
@@ -103,9 +109,10 @@ function (_React$PureComponent) {
                 label: datacell.label,
                 shortLabel: datacell.id,
                 path: datacell.img,
-                size: datacell.size,
+                size: datacell.size || cell.size,
                 view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type],
-                fallbackImage: datacell.fallbackImage
+                fallbackImage: datacell.fallbackImage,
+                title: cell.title ? cell.title(datacell, cell) : datacell.title
               });
 
             case cst.TYPE_RATE:
@@ -175,17 +182,19 @@ function (_React$PureComponent) {
 
             case cst.TYPE_PIN_TO_ACTION:
               return _react.default.createElement(_CellPinToAction.default, {
-                number: datacell.number,
+                number: datacell.number // eslint-disable-next-line react/jsx-handler-names
+                ,
                 onClick: datacell.onClick
               });
 
             case cst.TYPE_ACCOUNT_NUMBER:
+            case cst.TYPE_CUSTOMER_ACCOUNT_NUMBER:
             default:
               return _react.default.createElement(_CellTextStyled.default, {
                 active: datacell.active,
                 color: datacell.color,
                 label: datacell.label,
-                title: datacell.title,
+                title: cell.title ? cell.title(datacell, cell) : datacell.title,
                 value: datacell.value
               });
           }
@@ -193,8 +202,12 @@ function (_React$PureComponent) {
       }
 
       return null;
-    }
-  }, {
+    };
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(HiCellBuilder, [{
     key: "render",
     value: function render() {
       var _this$props = this.props,

package/HiTable/HiTableHeader.js

@@ -9,8 +9,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -33,19 +31,18 @@ var _TableHead = _interopRequireDefault(require("@material-ui/core/TableHead"));
 
 var _TableRow = _interopRequireDefault(require("@material-ui/core/TableRow"));
 
-var _Tooltip = _interopRequireDefault(require("@material-ui/core/Tooltip"));
-
 var _TableSortLabel = _interopRequireDefault(require("@material-ui/core/TableSortLabel"));
 
 var cst = _interopRequireWildcard(require("./constants"));
 
 // @inheritedComponent TableHeader
-var styles = function styles(theme) {
-  return {
-    icon: {
-      color: '#00ADE9'
-    }
-  };
+var styles = {
+  icon: {
+    color: '#00ADE9'
+  },
+  headerRoot: {
+    cursor: 'inherit'
+  }
 };
 
 var HiTableHeader =
@@ -98,7 +95,9 @@ function (_React$PureComponent) {
             type = _columns$key.type,
             label = _columns$key.label,
             smallLabel = _columns$key.smallLabel,
-            view = _columns$key.view;
+            view = _columns$key.view,
+            headerTooltip = _columns$key.headerTooltip;
+        var finalLabel = view === 's' ? smallLabel : label;
         return _react.default.createElement(_TableCell.default, {
           key: colId,
           sortDirection: orderBy === colId ? order : false,
@@ -108,17 +107,17 @@ function (_React$PureComponent) {
             paddingRight: '13px',
             paddingLeft: '13px'
           },
-          numeric: cst.ALIGN_RIGHT_TYPES.includes(type)
-        }, _react.default.createElement(_TableSortLabel.default, (0, _extends2.default)({}, sortable && {
+          numeric: cst.ALIGN_RIGHT_TYPES.includes(type),
+          title: headerTooltip
+        }, sortable ? _react.default.createElement(_TableSortLabel.default, {
           active: orderBy === colId,
           direction: order,
-          onClick: _this2.createSortHandler(colId)
-        }, {
+          onClick: _this2.createSortHandler(colId),
           classes: {
             icon: classes.icon
           },
-          title: label
-        }), view === 's' ? smallLabel : label));
+          title: headerTooltip || label
+        }, finalLabel) : finalLabel);
       }, this)));
     }
   }]);

package/HiTable/constants.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ALIGN_RIGHT_TYPES = exports.DEFAULT_PADDING = exports.DEFAULT_VIEWS = exports.DEFAULT_WIDTHS = exports.FRAUD_RESULT_ASK_AUTHENTICATE = exports.FRAUD_RESULT_FORCE_AUTHENTICATE = exports.FRAUD_RESULT_PENDING = exports.FRAUD_RESULT_CHALLENGED = exports.FRAUD_RESULT_BLOCKED = exports.FRAUD_RESULT_ACCEPTED = exports.ELLIPSIS_RIGHT = exports.ELLIPSIS_NAME = exports.ELLIPSIS_MIDDLE = exports.ELLIPSIS_LEFT = exports.ELLIPSIS_AFTER_FIRST_WORD = exports.NO_EVOLUTION = exports.EVOLUTION_DOWN = exports.EVOLUTION_UP = exports.VIEWS = exports.TYPE_PIN_TO_ACTION = exports.TYPE_THIRD_PARTY_SECURITY = exports.TYPE_TEXT = exports.TYPE_COUNTRY = exports.TYPE_STATUS = exports.TYPE_SENTINEL_SCORE = exports.TYPE_SENTINEL = exports.TYPE_RATE = exports.TYPE_NUMERIC = exports.TYPE_IMAGE = exports.TYPE_ICON = exports.TYPE_DATE = exports.TYPE_CHECKBOX = exports.TYPE_ADDRESS = exports.TYPE_ACCOUNT_NUMBER = exports.TYPE_ACCOUNT = exports.CELL_HEADER_HEIGHT_DENSE = exports.CELL_HEADER_HEIGHT = exports.CELL_HEIGHT_DENSE = exports.CELL_HEIGHT = exports.NB_ROWS_BACK_TO_TOP = exports.MAX_ROWS = void 0;
+exports.ALIGN_RIGHT_TYPES = exports.DEFAULT_PADDING = exports.DEFAULT_VIEWS = exports.DEFAULT_WIDTHS = exports.FRAUD_RESULT_ASK_AUTHENTICATE = exports.FRAUD_RESULT_FORCE_AUTHENTICATE = exports.FRAUD_RESULT_PENDING = exports.FRAUD_RESULT_CHALLENGED = exports.FRAUD_RESULT_BLOCKED = exports.FRAUD_RESULT_ACCEPTED = exports.ELLIPSIS_RIGHT = exports.ELLIPSIS_NAME = exports.ELLIPSIS_MIDDLE = exports.ELLIPSIS_LEFT = exports.ELLIPSIS_AFTER_FIRST_WORD = exports.NO_EVOLUTION = exports.EVOLUTION_DOWN = exports.EVOLUTION_UP = exports.VIEWS = exports.TYPE_PIN_TO_ACTION = exports.TYPE_THIRD_PARTY_SECURITY = exports.TYPE_TEXT = exports.TYPE_COUNTRY = exports.TYPE_STATUS = exports.TYPE_SENTINEL_SCORE = exports.TYPE_SENTINEL = exports.TYPE_RATE = exports.TYPE_NUMERIC = exports.TYPE_IMAGE = exports.TYPE_ICON = exports.TYPE_DATE = exports.TYPE_CHECKBOX = exports.TYPE_ADDRESS = exports.TYPE_CUSTOMER_ACCOUNT_NUMBER = exports.TYPE_ACCOUNT_NUMBER = exports.TYPE_ACCOUNT = exports.CELL_HEADER_HEIGHT_DENSE = exports.CELL_HEADER_HEIGHT = exports.CELL_HEIGHT_DENSE = exports.CELL_HEIGHT = exports.NB_ROWS_BACK_TO_TOP = exports.MAX_ROWS = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -39,6 +39,8 @@ var TYPE_ACCOUNT = 'account';
 exports.TYPE_ACCOUNT = TYPE_ACCOUNT;
 var TYPE_ACCOUNT_NUMBER = 'account_number';
 exports.TYPE_ACCOUNT_NUMBER = TYPE_ACCOUNT_NUMBER;
+var TYPE_CUSTOMER_ACCOUNT_NUMBER = 'customer_account_number';
+exports.TYPE_CUSTOMER_ACCOUNT_NUMBER = TYPE_CUSTOMER_ACCOUNT_NUMBER;
 var TYPE_ADDRESS = 'address';
 exports.TYPE_ADDRESS = TYPE_ADDRESS;
 var TYPE_CHECKBOX = 'checkbox';