var phones = [ { number: "89171111111", description: "Number format 1" }, { number: "89371111111", description: "Number format 1" }, { number: "+79171111111", description: "Number format 2" }, { number: "9171111111", description: "Number format 3" } ]; function suggestionsContainerStyle(suggestionsCount) { return { marginVertical: 1, marginHorizontal: 0, height: Math.min(150, (56 * suggestionsCount)), backgroundColor: "white", borderRadius: 5 }; } var suggestionContainerStyle = { paddingLeft: 16, backgroundColor: "white" }; var suggestionSubContainerStyle = { height: 56, borderBottomWidth: 1, borderBottomColor: "#0000001f" }; var valueStyle = { marginTop: 9, fontSize: 14, fontFamily: "font", color: "#000000de" }; var descriptionStyle = { marginTop: 1.5, fontSize: 14, fontFamily: "font", color: "#838c93de" }; function startsWith(str1, str2) { // String.startsWith(...) doesn't work in otto return str1.lastIndexOf(str2, 0) == 0 && str1 != str2; } function phoneSuggestions(params) { var ph, suggestions; if (!params.value || params.value == "") { ph = phones; } else { ph = phones.filter(function (phone) { return startsWith(phone.number, params.value); }); } if (ph.length == 0) { return; } suggestions = ph.map(function (phone) { return status.components.touchable( {onPress: [status.events.SET_VALUE, phone.number]}, status.components.view(suggestionContainerStyle, [status.components.view(suggestionSubContainerStyle, [ status.components.text( {style: valueStyle}, phone.number ), status.components.text( {style: descriptionStyle}, phone.description ) ])]) ); }); var view = status.components.scrollView( suggestionsContainerStyle(ph.length), suggestions ); return {markup: view}; } var phoneConfig = { name: "phone", description: "Send phone number", color: "#5fc48d", validator: function (params) { return { validationHandler: "phone", parameters: [params.value] }; }, params: [{ name: "phone", type: status.types.PHONE, suggestions: phoneSuggestions, placeholder: "Phone number" }], handler: function (params) { return { event: "sign-up", params: [params.value] }; } }; status.response(phoneConfig); status.command(phoneConfig); status.command({ name: "help", description: "Help", color: "#7099e6", /* Validator example validator: function (params) { if (params.value != "3") { var error = status.components.view( {backgroundColor: "red"}, [status.components.text({}, "ooops :(")] ); return {errors: [error]} } },*/ params: [{ name: "query", type: status.types.TEXT }] }); status.response({ name: "confirmation-code", color: "#7099e6", description: "Confirmation code", params: [{ name: "code", type: status.types.NUMBER }], handler: function (params) { return { event: "confirm-sign-up", params: [params.value] }; }, validator: function(params){ if(!/^[\d]{4}$/.test(params.value)){ var error = status.components.validationMessage( "Confirmation code", "Wrong format" ); return {errors: [error]} } } }); status.response({ name: "password", color: "#7099e6", description: "Password Request", icon: "icon_lock_white", params: [{ name: "password", type: status.types.PASSWORD, placeholder: "Type your password" }], handler: function (params) { return { event: "save-password", params: [params.value] }; }, validator: function (params) { if(!params.value || params.value.length < 6){ return { errors: [ status.components.validationMessage( "Password", "Password should be not less then 6 symbols." ) ] }; } }, preview: function (params) { var style = { marginTop: 5, marginHorizontal: 0, fontSize: 14, color: "black" }; if(params.platform == "ios"){ style.fontSize = 8; style.marginTop = 10; style.marginBottom = 2; style.letterSpacing = 1; } return status.components.text({style: style}, "●●●●●●●●●●"); } });