{"ast":null,"code":"import _slicedToArray from \"/Users/paolasanchez/Desktop/Pry4/Katoikia/katoikia-app/web-ui/sakai-react/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/slicedToArray\";\n\nvar _this = this,\n _jsxFileName = \"/Users/paolasanchez/Desktop/Pry4/Katoikia/katoikia-app/web-ui/sakai-react/src/components/FloatLabelDemo.js\";\n\nimport React, { useState, useEffect } from 'react';\nimport { InputText } from 'primereact/inputtext';\nimport { InputTextarea } from 'primereact/inputtextarea';\nimport { InputMask } from 'primereact/inputmask';\nimport { InputNumber } from 'primereact/inputnumber';\nimport { AutoComplete } from 'primereact/autocomplete';\nimport { Calendar } from 'primereact/calendar';\nimport { Chips } from 'primereact/chips';\nimport { Dropdown } from 'primereact/dropdown';\nimport { MultiSelect } from 'primereact/multiselect';\nimport { CountryService } from '../service/CountryService';\n\nvar FloatLabelDemo = function FloatLabelDemo() {\n var _useState = useState([]),\n _useState2 = _slicedToArray(_useState, 2),\n countries = _useState2[0],\n setCountries = _useState2[1];\n\n var _useState3 = useState(null),\n _useState4 = _slicedToArray(_useState3, 2),\n filteredCountries = _useState4[0],\n setFilteredCountries = _useState4[1];\n\n var _useState5 = useState(''),\n _useState6 = _slicedToArray(_useState5, 2),\n value1 = _useState6[0],\n setValue1 = _useState6[1];\n\n var _useState7 = useState(''),\n _useState8 = _slicedToArray(_useState7, 2),\n value2 = _useState8[0],\n setValue2 = _useState8[1];\n\n var _useState9 = useState(null),\n _useState10 = _slicedToArray(_useState9, 2),\n value3 = _useState10[0],\n setValue3 = _useState10[1];\n\n var _useState11 = useState(''),\n _useState12 = _slicedToArray(_useState11, 2),\n value4 = _useState12[0],\n setValue4 = _useState12[1];\n\n var _useState13 = useState(''),\n _useState14 = _slicedToArray(_useState13, 2),\n value5 = _useState14[0],\n setValue5 = _useState14[1];\n\n var _useState15 = useState(''),\n _useState16 = _slicedToArray(_useState15, 2),\n value6 = _useState16[0],\n setValue6 = _useState16[1];\n\n var _useState17 = useState(''),\n _useState18 = _slicedToArray(_useState17, 2),\n value7 = _useState18[0],\n setValue7 = _useState18[1];\n\n var _useState19 = useState(''),\n _useState20 = _slicedToArray(_useState19, 2),\n value8 = _useState20[0],\n setValue8 = _useState20[1];\n\n var _useState21 = useState([]),\n _useState22 = _slicedToArray(_useState21, 2),\n value9 = _useState22[0],\n setValue9 = _useState22[1];\n\n var _useState23 = useState(null),\n _useState24 = _slicedToArray(_useState23, 2),\n value10 = _useState24[0],\n setValue10 = _useState24[1];\n\n var cities = [{\n name: 'New York',\n code: 'NY'\n }, {\n name: 'Rome',\n code: 'RM'\n }, {\n name: 'London',\n code: 'LDN'\n }, {\n name: 'Istanbul',\n code: 'IST'\n }, {\n name: 'Paris',\n code: 'PRS'\n }];\n useEffect(function () {\n var countryService = new CountryService();\n countryService.getCountries().then(function (countries) {\n setCountries(countries);\n });\n }, []);\n\n var searchCountry = function searchCountry(event) {\n // in a real application, make a request to a remote url with the query and\n // return filtered results, for demo we filter at client side\n var filtered = [];\n var query = event.query;\n\n for (var i = 0; i < countries.length; i++) {\n var country = countries[i];\n\n if (country.name.toLowerCase().indexOf(query.toLowerCase()) === 0) {\n filtered.push(country);\n }\n }\n\n setFilteredCountries(filtered);\n };\n\n return /*#__PURE__*/React.createElement(\"div\", {\n className: \"card\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 57,\n columnNumber: 9\n }\n }, /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 58,\n columnNumber: 13\n }\n }, \"Float Label\"), /*#__PURE__*/React.createElement(\"div\", {\n className: \"grid p-fluid mt-3\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 59,\n columnNumber: 13\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"field col-12 md:col-4\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 60,\n columnNumber: 17\n }\n }, /*#__PURE__*/React.createElement(\"span\", {\n className: \"p-float-label\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 61,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(InputText, {\n type: \"text\",\n id: \"inputtext\",\n value: value1,\n onChange: function onChange(e) {\n return setValue1(e.target.value);\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 62,\n columnNumber: 25\n }\n }), /*#__PURE__*/React.createElement(\"label\", {\n htmlFor: \"inputtext\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 63,\n columnNumber: 25\n }\n }, \"InputText\"))), /*#__PURE__*/React.createElement(\"div\", {\n className: \"field col-12 md:col-4\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 66,\n columnNumber: 17\n }\n }, /*#__PURE__*/React.createElement(\"span\", {\n className: \"p-float-label\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 67,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(AutoComplete, {\n id: \"autocomplete\",\n value: value6,\n onChange: function onChange(e) {\n return setValue6(e.value);\n },\n suggestions: filteredCountries,\n completeMethod: searchCountry,\n field: \"name\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 68,\n columnNumber: 25\n }\n }), /*#__PURE__*/React.createElement(\"label\", {\n htmlFor: \"autocomplete\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 69,\n columnNumber: 25\n }\n }, \"AutoComplete\"))), /*#__PURE__*/React.createElement(\"div\", {\n className: \"field col-12 md:col-4\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 72,\n columnNumber: 17\n }\n }, /*#__PURE__*/React.createElement(\"span\", {\n className: \"p-float-label\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 73,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(Calendar, {\n inputId: \"calendar\",\n value: value7,\n onChange: function onChange(e) {\n return setValue7(e.value);\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 74,\n columnNumber: 25\n }\n }), /*#__PURE__*/React.createElement(\"label\", {\n htmlFor: \"calendar\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 75,\n columnNumber: 25\n }\n }, \"Calendar\"))), /*#__PURE__*/React.createElement(\"div\", {\n className: \"field col-12 md:col-4\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 78,\n columnNumber: 17\n }\n }, /*#__PURE__*/React.createElement(\"span\", {\n className: \"p-float-label\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 79,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(Chips, {\n inputId: \"chips\",\n value: value9,\n onChange: function onChange(e) {\n return setValue9(e.value);\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 80,\n columnNumber: 25\n }\n }), /*#__PURE__*/React.createElement(\"label\", {\n htmlFor: \"chips\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 81,\n columnNumber: 25\n }\n }, \"Chips\"))), /*#__PURE__*/React.createElement(\"div\", {\n className: \"field col-12 md:col-4\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 84,\n columnNumber: 17\n }\n }, /*#__PURE__*/React.createElement(\"span\", {\n className: \"p-float-label\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 85,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(InputMask, {\n id: \"inputmask\",\n mask: \"99/99/9999\",\n value: value2,\n onChange: function onChange(e) {\n return setValue2(e.value);\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 86,\n columnNumber: 25\n }\n }), /*#__PURE__*/React.createElement(\"label\", {\n htmlFor: \"inputmask\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 87,\n columnNumber: 25\n }\n }, \"InputMask\"))), /*#__PURE__*/React.createElement(\"div\", {\n className: \"field col-12 md:col-4\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 90,\n columnNumber: 17\n }\n }, /*#__PURE__*/React.createElement(\"span\", {\n className: \"p-float-label\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 91,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(InputNumber, {\n id: \"inputnumber\",\n value: value3,\n onValueChange: function onValueChange(e) {\n return setValue3(e.target.value);\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 92,\n columnNumber: 25\n }\n }), /*#__PURE__*/React.createElement(\"label\", {\n htmlFor: \"inputnumber\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 93,\n columnNumber: 25\n }\n }, \"InputNumber\"))), /*#__PURE__*/React.createElement(\"div\", {\n className: \"field col-12 md:col-4\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 96,\n columnNumber: 17\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"p-inputgroup\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 97,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(\"span\", {\n className: \"p-inputgroup-addon\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 98,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(\"i\", {\n className: \"pi pi-user\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 99,\n columnNumber: 29\n }\n })), /*#__PURE__*/React.createElement(\"span\", {\n className: \"p-float-label\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 101,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(InputText, {\n type: \"text\",\n id: \"inputgroup\",\n value: value4,\n onChange: function onChange(e) {\n return setValue4(e.target.value);\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 102,\n columnNumber: 29\n }\n }), /*#__PURE__*/React.createElement(\"label\", {\n htmlFor: \"inputgroup\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 103,\n columnNumber: 29\n }\n }, \"InputGroup\")))), /*#__PURE__*/React.createElement(\"div\", {\n className: \"field col-12 md:col-4\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 107,\n columnNumber: 17\n }\n }, /*#__PURE__*/React.createElement(\"span\", {\n className: \"p-float-label\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 108,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(Dropdown, {\n id: \"dropdown\",\n options: cities,\n value: value8,\n onChange: function onChange(e) {\n return setValue8(e.value);\n },\n optionLabel: \"name\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 109,\n columnNumber: 25\n }\n }), /*#__PURE__*/React.createElement(\"label\", {\n htmlFor: \"dropdown\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 110,\n columnNumber: 25\n }\n }, \"Dropdown\"))), /*#__PURE__*/React.createElement(\"div\", {\n className: \"field col-12 md:col-4\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 113,\n columnNumber: 17\n }\n }, /*#__PURE__*/React.createElement(\"span\", {\n className: \"p-float-label\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 114,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(MultiSelect, {\n id: \"multiselect\",\n options: cities,\n value: value10,\n onChange: function onChange(e) {\n return setValue10(e.value);\n },\n optionLabel: \"name\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 115,\n columnNumber: 25\n }\n }), /*#__PURE__*/React.createElement(\"label\", {\n htmlFor: \"multiselect\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 116,\n columnNumber: 25\n }\n }, \"MultiSelect\"))), /*#__PURE__*/React.createElement(\"div\", {\n className: \"field col-12 md:col-4\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 119,\n columnNumber: 17\n }\n }, /*#__PURE__*/React.createElement(\"span\", {\n className: \"p-float-label\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 120,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(InputTextarea, {\n id: \"textarea\",\n rows: \"3\",\n cols: \"30\",\n value: value5,\n onChange: function onChange(e) {\n return setValue5(e.target.value);\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 121,\n columnNumber: 25\n }\n }), /*#__PURE__*/React.createElement(\"label\", {\n htmlFor: \"textarea\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 122,\n columnNumber: 25\n }\n }, \"Textarea\")))));\n};\n\nvar comparisonFn = function comparisonFn(prevProps, nextProps) {\n return prevProps.location.pathname === nextProps.location.pathname;\n};\n\nexport default React.memo(FloatLabelDemo, comparisonFn);","map":{"version":3,"names":["React","useState","useEffect","InputText","InputTextarea","InputMask","InputNumber","AutoComplete","Calendar","Chips","Dropdown","MultiSelect","CountryService","FloatLabelDemo","countries","setCountries","filteredCountries","setFilteredCountries","value1","setValue1","value2","setValue2","value3","setValue3","value4","setValue4","value5","setValue5","value6","setValue6","value7","setValue7","value8","setValue8","value9","setValue9","value10","setValue10","cities","name","code","countryService","getCountries","then","searchCountry","event","filtered","query","i","length","country","toLowerCase","indexOf","push","e","target","value","comparisonFn","prevProps","nextProps","location","pathname","memo"],"sources":["/Users/paolasanchez/Desktop/Pry4/Katoikia/katoikia-app/web-ui/sakai-react/src/components/FloatLabelDemo.js"],"sourcesContent":["import React, {useState, useEffect} from 'react';\nimport {InputText} from 'primereact/inputtext';\nimport {InputTextarea} from 'primereact/inputtextarea';\nimport {InputMask} from 'primereact/inputmask';\nimport {InputNumber} from 'primereact/inputnumber';\nimport {AutoComplete} from 'primereact/autocomplete';\nimport {Calendar} from 'primereact/calendar';\nimport {Chips} from 'primereact/chips';\nimport {Dropdown} from 'primereact/dropdown';\nimport {MultiSelect} from 'primereact/multiselect';\nimport {CountryService} from '../service/CountryService';\n\nconst FloatLabelDemo = () => {\n const [countries, setCountries] = useState([]);\n const [filteredCountries, setFilteredCountries] = useState(null);\n const [value1, setValue1] = useState('');\n const [value2, setValue2] = useState('');\n const [value3, setValue3] = useState(null);\n const [value4, setValue4] = useState('');\n const [value5, setValue5] = useState('');\n const [value6, setValue6] = useState('');\n const [value7, setValue7] = useState('');\n const [value8, setValue8] = useState('');\n const [value9, setValue9] = useState([]);\n const [value10, setValue10] = useState(null);\n\n const cities = [\n {name: 'New York', code: 'NY'},\n {name: 'Rome', code: 'RM'},\n {name: 'London', code: 'LDN'},\n {name: 'Istanbul', code: 'IST'},\n {name: 'Paris', code: 'PRS'},\n ];\n\n useEffect(() => {\n const countryService = new CountryService();\n countryService.getCountries().then((countries) => {\n setCountries(countries);\n });\n }, []);\n\n const searchCountry = (event) => {\n // in a real application, make a request to a remote url with the query and\n // return filtered results, for demo we filter at client side\n const filtered = [];\n const query = event.query;\n for (let i = 0; i < countries.length; i++) {\n const country = countries[i];\n if (country.name.toLowerCase().indexOf(query.toLowerCase()) === 0) {\n filtered.push(country);\n }\n }\n setFilteredCountries(filtered);\n };\n\n return (\n