\r\n } \r\n \r\n if(page_componente[pagina]!==undefined){\r\n return(\r\n\t\t \r\n {page_componente[pagina]}\r\n {}\r\n
\r\n\t\t);\r\n }\r\n else if(pagina!=='0'&&pagina!==undefined){\r\n return ();\r\n }\r\n else\r\n return null\r\n }\r\n else\r\n {\r\n return();\r\n }\r\n\r\n};\r\n\r\nexport default function ObtenerPagina(props) {\r\n return (\r\n \r\n ); \r\n}","import React from 'react';\r\nimport { withStyles } from '@material-ui/core/styles';\r\nimport {colores, globales,funciones} from '../global';\r\nimport AuthService from '../AuthService';\r\nimport Request from 'superagent';\r\nimport CircularProgress from '@material-ui/core/CircularProgress';\r\nimport Box from '@material-ui/core/Box';\r\nimport Iconos from './Icono';\r\nimport Card from '@material-ui/core/Card';\r\nimport CardHeader from '@material-ui/core/CardHeader';\r\nimport CardContent from '@material-ui/core/CardContent';\r\nimport Button from '@material-ui/core/Button';\r\nimport Paper from '@material-ui/core/Paper';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport Avatar from '@material-ui/core/Avatar';\r\nimport Typography from '@material-ui/core/Typography';\r\nimport { Divider, IconButton } from '@material-ui/core';\r\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\r\nimport { Bar,Line, Pie } from 'react-chartjs-2';\r\nimport Slider from '@material-ui/core/Slider';\r\nimport '../CSS/Style_widgets.css'\r\n\r\nlet Auth = new AuthService();\r\nvar ip=globales.ip\r\nvar widgets_interval\r\nvar movil_pequeño=/Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);\r\n\r\nvar border_dialog=globales.border_dialog\r\nvar color_fondo='linear-gradient(to top right ,rgba(3,25,48,1),rgba(3,25,48,0.8))'\r\n\r\n/* CLASES DE ESTILO */\r\n\r\nvar styles = theme =>({\r\n Dialog:{\r\n borderRadius: border_dialog,\r\n margin:0,\r\n padding:0\r\n },\r\n media: {\r\n // ⚠️ object-fit is not supported by IE11.\r\n objectFit: 'cover',\r\n \r\n },\r\n})\r\n\r\nconst PrettoSlider = withStyles({\r\n root: {\r\n color: colores.naranja,\r\n height: 5,\r\n },\r\n thumb: {\r\n height: 20,\r\n width: 20,\r\n backgroundColor: colores.naranja,\r\n border: '1px solid white',\r\n marginTop: -7,\r\n marginLeft: -12,\r\n '&:focus, &:hover, &$active': {\r\n \r\n },\r\n },\r\n active: {},\r\n valueLabel: {\r\n left: 'calc(-50% + 4px)',\r\n },\r\n track: {\r\n height: 5,\r\n borderRadius: 4,\r\n },\r\n rail: {\r\n height: 5,\r\n borderRadius: 4,\r\n },\r\n})(Slider);\r\n\r\nconst marks = [{value: 0,},{value: 20,},{value: 50,},{value: 80,},{value: 100,},];\r\n\r\nfunction WidgetLine(props){\r\n //var hora=props.actualizacion.getHours()\r\n //var minutos=props.actualizacion.getMinutes()<10?'0'+props.actualizacion.getMinutes():props.actualizacion.getMinutes()\r\n //var formato=hora<12?' a.m.':''\r\n const data = {\r\n labels: props.labels,\r\n datasets: [\r\n {\r\n label: props.label,\r\n fill: true,\r\n backgroundColor: 'rgba(' +colores.naranja_rgb+',0.1)',\r\n borderColor: 'rgba(' +colores.naranja_rgb+',0.5)',\r\n borderCapStyle: 'butt',\r\n borderDash: [],\r\n borderDashOffset: 0.0,\r\n borderJoinStyle: 'miter',\r\n pointBorderColor: 'rgba(' +colores.azul_rgb+',0.7)',\r\n pointBackgroundColor: 'rgba(' +colores.azul_rgb+',0.7)',\r\n pointBorderWidth: 1,\r\n pointHoverRadius: 13,\r\n pointHoverBackgroundColor: 'rgba(' +colores.azul_rgb+',0.7)',\r\n pointHoverBorderColor: 'rgba(' +colores.naranja_rgb+',0.7)',\r\n pointHoverBorderWidth: 1,\r\n pointRadius: 3,\r\n pointHitRadius: 10,\r\n lineTension: 0.4,\r\n data: props.data\r\n }\r\n ]\r\n }; \r\n return(\r\n \r\n \r\n \r\n {//'Ult. Act: '+ hora+':'+minutos+formato\r\n }\r\n \r\n \r\n );\r\n}\r\n\r\nfunction WidgetBar(props){\r\n //var hora=props.actualizacion.getHours()\r\n //var minutos=props.actualizacion.getMinutes()<10?'0'+props.actualizacion.getMinutes():props.actualizacion.getMinutes()\r\n //var formato=hora<12?' a.m.':''\r\n const data = {\r\n labels: props.labels,\r\n datasets: [\r\n {\r\n label: props.label,\r\n fill: false,\r\n backgroundColor: 'rgba('+colores.azul_rgb+',0.7)',\r\n borderColor: 'transparent',\r\n hoverBackgroundColor: 'rgba('+colores.naranja_rgb+',0.7)',\r\n hoverBorderColor: 'rgba('+colores.naranja_rgb+',0.7)',\r\n borderWidth: 0,\r\n data: props.data\r\n }\r\n ]\r\n }; \r\n \r\n return(\r\n \r\n \r\n \r\n {//'Ult. Act: '+ hora+':'+minutos+formato\r\n }\r\n \r\n \r\n );\r\n}\r\n\r\nfunction WidgetPie(props){\r\n //var hora=props.actualizacion.getHours()\r\n //var minutos=props.actualizacion.getMinutes()<10?'0'+props.actualizacion.getMinutes():props.actualizacion.getMinutes()\r\n //var formato=hora<12?' a.m.':''\r\n\r\n const data = {\r\n label: props.label,\r\n labels: props.labels,\r\n datasets: [{\r\n data: props.data,\r\n backgroundColor: props.color_label,\r\n hoverOffset: 5,\r\n borderColor:'white',borderWidth: 1,hoverBorderColor: props.color_label,\r\n },\r\n ]\r\n }\r\n\r\n return(\r\n \r\n \r\n \r\n {//'Ult. Act: '+ hora+':'+minutos+formato\r\n }\r\n \r\n \r\n );\r\n}\r\n\r\n\r\nfunction WidgetCirculos(props){\r\n //var hora=props.actualizacion.getHours()\r\n //var minutos=props.actualizacion.getMinutes()<10?'0'+props.actualizacion.getMinutes():props.actualizacion.getMinutes()\r\n //var formato=hora<12?' a.m.':''\r\n return(\r\n \r\n \r\n \r\n } />\r\n \r\n \r\n \r\n \r\n \r\n \r\n {`${Math.round(props.valor1)+props.simbolo1}`}\r\n \r\n } label={props.label1} style={{color:'white' ,display: 'flex',marginLeft: 5}}/>\r\n \r\n \r\n \r\n \r\n \r\n {`${Math.round(props.valor2)+props.simbolo2}`}\r\n \r\n } label={props.label2} style={{color:'white' ,display: 'flex',marginLeft: 5}}/>\r\n \r\n \r\n \r\n \r\n \r\n {`${Math.round(props.valor3)+props.simbolo3}`}\r\n \r\n } label={props.label3} style={{color:'white' ,display: 'flex',marginLeft: 5}}/>\r\n \r\n \r\n \r\n \r\n {//'Ult. Act: '+ hora+':'+minutos+formato\r\n }\r\n \r\n \r\n );\r\n}\r\n\r\nfunction WidgetFechas(props){\r\n return(\r\n\r\n\r\n \r\n } />\r\n \r\n \r\n \r\n \r\n \r\n \r\n Período\r\n \r\n \r\n \r\n \r\n \r\n {props.fecha_per_inicio} \r\n \r\n \r\n {props.fecha_per_fin} \r\n \r\n \r\n {///////////////////\r\n }\r\n \r\n \r\n Matrícula\r\n \r\n \r\n \r\n \r\n \r\n {props.fecha_mat_inicio} \r\n \r\n \r\n {props.fecha_mat_fin} \r\n \r\n \r\n {props.lista_cuotas}\r\n \r\n \r\n \r\n \r\n );\r\n}\r\n\r\nfunction WidgetFechasNotas(props){\r\n return(\r\n \r\n \r\n \r\n } />\r\n {props.Lista_calificacion} \r\n \r\n );\r\n}\r\n\r\nfunction WidgetRecorridoAlumno(props){\r\n\r\n return(\r\n \r\n \r\n \r\n } />\r\n {props.porcentaje_planes}\r\n \r\n );\r\n}\r\n\r\nfunction WidgetSaldoAlumno(props){\r\n\r\n return(\r\n \r\n \r\n \r\n } color='secondary' variant='outlined' onClick={props.cargar({reporte: 0,i:1,e:1,l:1,pagina: 'Pago_Linea', nombre: 'Pago en línea', descripcion: 'Pago en línea', icono: 'PaymentIcon'}) } style={{ backgroundColor:'white',color: colores.azul,textTransform: 'none',width:'100%', marginLeft:15, marginRight:15}}> \r\n Realizar pago \r\n \r\n
\r\n \r\n );\r\n}\r\n\r\n/* EXPORT */\r\nexport default withStyles(styles)(\r\n class Widgets extends React.Component {\r\n\r\n\r\n constructor(props) {\r\n super(props);\r\n \r\n this.AbrirImagen=props.AbrirImagen\r\n this.cargar=props.cargar\r\n this.rol=props.rol\r\n this.plataforma=props.plataforma\r\n this.id_control_matricula = props.id_control_matricula;\r\n this.estado_refresh_widgets=props.estado_refresh_widgets===undefined?0:props.estado_refresh_widgets\r\n this.interval_widget=props.interval_widget\r\n this.actualizarsaldopendiente=props.actualizarsaldopendiente\r\n\r\n this.state = {\r\n isLoggin: false,\r\n widgets: [],\r\n lista_cuotas: [],\r\n lista_cuotas_json:'',\r\n saldo_pendiente: '',\r\n porcentaje_planes: [],\r\n porcentaje_planes_json:'',\r\n Lista_calificacion: [],\r\n Lista_calificacion_json:'',\r\n año: '',\r\n periodo: '',\r\n fecha_mat_inicio: '',\r\n fecha_mat_fin: '',\r\n fecha_per_inicio: '',\r\n fecha_per_fin: '',\r\n WidgetFechas:false,\r\n WidgetFechas_movil:false,\r\n WidgetFechasNotas:false,\r\n WidgetFechasNotas_movil:false,\r\n WidgetSaldoAlumno:false,\r\n WidgetSaldoAlumno_movil:false,\r\n WidgetCalendario:false,\r\n WidgetCalendario_movil:false,\r\n WidgetRecorridoAlumno:false,\r\n WidgetRecorridoAlumno_movil:false,\r\n actualizacion: new Date(),\r\n width: 100,\r\n switch_publi: props.switch_publi\r\n }\r\n \r\n }; //FIN CONSTRUCTORS\r\n\r\n\r\ncomponentDidMount()\r\n{\r\n var _this=this\r\n _this.Llenado(1);\r\n if(_this.estado_refresh_widgets===1)\r\n {\r\n widgets_interval= setInterval(_this.Llenado, _this.interval_widget);\r\n }\r\n}\r\n\r\nLlenado=(valor)=>{\r\n var _this=this\r\n\r\n if(valor===1 || (_this.estado_refresh_widgets===1))\r\n {\r\n \r\n var render=false\r\n if(localStorage.getItem('Tabs_user')===null)\r\n render=true\r\n else{\r\n var json=JSON.parse(localStorage.getItem('Tabs_user')).filter(busqueda2 =>busqueda2.usuario.match( Auth.getProfile().user))\r\n if(json.length>0)\r\n if(json[0].tabs.length>0)\r\n render=false\r\n else\r\n render=true\r\n else\r\n render=true\r\n }\r\n\r\n if(render || valor===1)\r\n try{\r\n new Request\r\n .post(`${ip}/validacion_widgets`)\r\n .set({'authorization': 'Bearer ' + Auth.getToken() })\r\n .set('Content-Type', 'application/json')\r\n .send({ID_ROL:_this.rol,ID_PLATAFORMA:_this.plataforma,cuenta_alumno: Auth.getProfile().user})\r\n .retry(0)\r\n .timeout({ response: 40000, deadline: 60000, }) \r\n .end((err, res) => {\r\n \r\n if (err) { \r\n if (err.toString().substr(0,16) === 'Error: Forbidden')\r\n { \r\n return; \r\n } \r\n funciones.showToast('w', 'Tiene problemas de conexión') \r\n }\r\n\r\n if(res!==undefined){\r\n const rows = JSON.parse(res.text);\r\n if (rows.length > 0) \r\n { \r\n rows.forEach((value,index)=>{\r\n if(_this.state[value.NOM_WIDGET]!==undefined){\r\n if(_this.state[value.NOM_WIDGET].toString()!==(value.MOSTRAR?true:false).toString()){\r\n _this.setState({[value.NOM_WIDGET]: value.MOSTRAR===1?true:false, [value.NOM_WIDGET+'_movil']:value.MOVIL===1?true:false},()=>\r\n {\r\n if(index===rows.length-1)\r\n _this.Validar(); \r\n }); \r\n }\r\n else\r\n {\r\n if(index===rows.length-1)\r\n _this.Validar();\r\n }\r\n }\r\n else\r\n {\r\n _this.setState({[value.NOM_WIDGET]: value.MOSTRAR===1?true:false})\r\n }\r\n })\r\n }\r\n }\r\n })\r\n }\r\n catch(ex){\r\n funciones.showToast('e', 'Error de conexión')\r\n }\r\n }\r\n // })\r\n}\r\n\r\nValidar=()=>{\r\n var _this=this\r\n /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\r\n try{\r\n new Request\r\n .post(`${ip}/obtener_widget_graficas`)\r\n .set({'authorization': 'Bearer ' + Auth.getToken() })\r\n .set('Content-Type', 'application/json')\r\n .send({ID_CONTROL_MATRICULA:_this.id_control_matricula,ID_PLATAFORMA:_this.plataforma,USUARIO: Auth.getProfile().user})\r\n .retry(0)\r\n .timeout({ response: 40000, deadline: 60000, }) \r\n .end((err, res) => {\r\n \r\n if (err) { \r\n if (err.toString().substr(0,16) === 'Error: Forbidden')\r\n { \r\n return; \r\n } \r\n this.setState({ openBackDrop: false }, ()=> { \r\n funciones.showToast('w', 'Error de conexión')\r\n });\r\n }\r\n\r\n if(res!==undefined)\r\n {\r\n const rows = JSON.parse(res.text);\r\n if (rows.length > 0) \r\n { \r\n \r\n var widgets =[]\r\n var found = null;\r\n rows.forEach(\r\n function getCheck(text, index) {\r\n\r\n found = widgets.find(grupo => grupo.NOM_STATE === text.NOM_STATE);\r\n if (found == null){\r\n if(text.TIPO==='Line' || text.TIPO==='Bar' || text.TIPO==='Pie')\r\n {\r\n var data=[]\r\n var labels=[]\r\n var color_label=[]\r\n rows.forEach(\r\n function getCheck(item, index) {\r\n if(item.NOM_STATE===text.NOM_STATE)\r\n {\r\n data.push(item.VALOR)\r\n if(text.TIPO!=='Pie')\r\n labels.push(item.LABEL)\r\n else\r\n labels.push([item.LABEL,item.VALOR])\r\n\r\n if(text.TIPO==='Pie')\r\n color_label.push(item.COLOR_LABEL)\r\n }\r\n\r\n })\r\n\r\n widgets.push({NOM_STATE:text.NOM_STATE,TIPO: text.TIPO,MAX: text.MAX,MIN: text.MIN,STEPSIZE: text.STEPSIZE,LABEL_TITULO: text.LABEL_TITULO\r\n ,DATA: data,LABELS: labels,BACKGROUND_RGB:text.BACKGROUND_RGB,color_label:color_label\r\n });\r\n \r\n }\r\n if(text.TIPO==='Circule')\r\n {\r\n widgets.push(text)\r\n \r\n }\r\n\r\n }else {\r\n found = null;\r\n \r\n }\r\n })\r\n this.setState({widgets: widgets}) \r\n } \r\n } \r\n }); \r\n }\r\n catch(ex){\r\n funciones.showToast('e', 'Error de conexión')\r\n }\r\n\r\n /////////////////////////////////////////////////////////////////////////////////////////////////////\r\n if(this.state.WidgetFechasNotas&&(this.state.WidgetFechasNotas_movil===movil_pequeño||!movil_pequeño))\r\n try{\r\n Request.get(`${ip}/obtenerfechaponderacion/${ Auth.getProfile().user}/${this.id_control_matricula}`)\r\n .retry(0)\r\n .timeout({ response: 40000, deadline: 60000, })\r\n .end((err, res2)=>{\r\n if (err) { \r\n if (err.toString().substr(0,16) === 'Error: Forbidden')\r\n {\r\n return; \r\n }\r\n return;\r\n }\r\n const tmp2 = JSON.parse(res2.text);\r\n var jornada='';\r\n var Lista_calificacion=[]; \r\n if( JSON.stringify(this.state.Lista_calificacion_json) !== JSON.stringify(tmp2)){\r\n Lista_calificacion.push(\r\n \r\n \r\n \r\n \r\n \r\n \r\n {'Fecha Inicio'}\r\n \r\n \r\n \r\n \r\n {'Fecha Fin'}\r\n \r\n \r\n \r\n ); \r\n tmp2.forEach( function getCheck(item2, index2) {\r\n \r\n if(jornada!==item2.JORNADA){\r\n jornada=item2.JORNADA\r\n Lista_calificacion.push(\r\n \r\n \r\n \r\n \r\n {'°'}\r\n \r\n \r\n \r\n \r\n {item2.JORNADA}\r\n \r\n \r\n \r\n );\r\n Lista_calificacion.push(\r\n \r\n \r\n \r\n \r\n \r\n \r\n {'Fecha Inicio'}\r\n \r\n \r\n \r\n \r\n {'Fecha Fin'}\r\n \r\n \r\n \r\n ); \r\n }\r\n\r\n Lista_calificacion.push(\r\n \r\n \r\n {item2.ID_PONDERACION!==5?item2.DESCRIPCION_PONDERACION:'Ext'}\r\n \r\n \r\n \r\n {''+item2.FECHA_INICIO+''}\r\n \r\n \r\n \r\n \r\n {''+item2.FECHA_FIN+''}\r\n \r\n \r\n \r\n ); \r\n })\r\n _this.setState({Lista_calificacion:Lista_calificacion,Lista_calificacion_json:tmp2})\r\n }\r\n })\r\n }\r\n catch(ex){}\r\n\r\n ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\r\n if(this.state.WidgetFechas&&(this.state.WidgetFechas_movil===movil_pequeño||!movil_pequeño))\r\n try{\r\n Request.get(`${ip}/obtenerfechacuota/${this.id_control_matricula}`)\r\n .retry(0)\r\n .timeout({ response: 40000, deadline: 60000, })\r\n .end((err, res2)=>{\r\n if (err) { \r\n if (err.toString().substr(0,16) === 'Error: Forbidden')\r\n {\r\n return;\r\n }\r\n return;\r\n }\r\n const tmp2 = JSON.parse(res2.text);\r\n var lista_cuotas=[]\r\n \r\n tmp2.forEach( function getCheck(item2, index2) {\r\n if(item2.TIPO==='MATRICULA'){\r\n _this.setState({año: item2.ANIO,periodo: item2.PERIODO,fecha_per_inicio:item2.FECHA_INICIO_PER,fecha_per_fin:item2.FECHA_FIN_PER,fecha_mat_inicio: item2.FECHA,fecha_mat_fin: item2.FECHA_FIN})\r\n }\r\n else{\r\n return ;\r\n }\r\n })\r\n \r\n if(JSON.stringify(this.state.lista_cuotas_json)!==JSON.stringify(tmp2))\r\n {\r\n lista_cuotas.push(\r\n \r\n Cuotas\r\n \r\n \r\n );\r\n tmp2.forEach( function getCheck(item2, index2) {\r\n if(item2.TIPO==='CUOTA'){\r\n lista_cuotas.push(\r\n \r\n \r\n {item2.SECUENCIA}\r\n \r\n \r\n {item2.FECHA}\r\n \r\n \r\n );\r\n }\r\n })\r\n _this.setState({lista_cuotas: lista_cuotas,lista_cuotas_json: tmp2})\r\n }\r\n })\r\n }\r\n catch(ex){}\r\n \r\n /////////////////////////////////////////////////////////////////////////////////////////////////////////\r\n if(this.state.WidgetRecorridoAlumno&&(this.state.WidgetRecorridoAlumno_movil===movil_pequeño||!movil_pequeño))\r\n try{\r\n Request.get(`${ip}/obtenerporcentajecarrera/${ Auth.getProfile().user}`)\r\n .retry(0)\r\n .timeout({ response: 40000, deadline: 60000, })\r\n .end((err, res2)=>{\r\n if (err) {\r\n if (err.toString().substr(0,16) === 'Error: Forbidden')\r\n {\r\n return; \r\n }\r\n return;\r\n }\r\n const tmp2 = JSON.parse(res2.text);\r\n if(tmp2.length>0) {\r\n var porcentaje_planes=[];\r\n if(JSON.stringify(this.state.porcentaje_planes_json)!==JSON.stringify(tmp2))\r\n {\r\n tmp2.forEach( function getCheck(item2, index2) {\r\n porcentaje_planes.push(\r\n \r\n {item2.DESCRIPCION_NIVEL}\r\n \r\n \r\n );\r\n })\r\n _this.setState({porcentaje_planes:porcentaje_planes,porcentaje_planes_json:tmp2})\r\n }\r\n }\r\n })\r\n }\r\n catch(ex){}\r\n }\r\n\r\n/* RENDER */\r\nrender() {\r\n \r\n return ( \r\n \r\n {\r\n this.state.widgets.map((text,index,array)=>{\r\n if(text.TIPO==='Circule')\r\n if(this.state[text.NOM_STATE])\r\n return(\r\n \r\n )\r\n if(text.TIPO==='Line'){\r\n if(this.state[text.NOM_STATE])\r\n return(\r\n \r\n )\r\n }\r\n if(text.TIPO==='Bar'){\r\n if(this.state[text.NOM_STATE])\r\n return(\r\n \r\n )\r\n }\r\n if(text.TIPO==='Pie'){\r\n if(this.state[text.NOM_STATE])\r\n return(\r\n \r\n )\r\n }\r\n return '';\r\n })\r\n }\r\n\r\n {this.state.WidgetFechas && (this.state.WidgetFechas_movil===movil_pequeño||!movil_pequeño)?\r\n :null\r\n }\r\n {this.state.WidgetFechasNotas && (this.state.WidgetFechasNotas_movil===movil_pequeño||!movil_pequeño)?\r\n :null\r\n }\r\n {this.state.WidgetSaldoAlumno && (this.state.WidgetSaldoAlumno_movil===movil_pequeño||!movil_pequeño)?\r\n :null\r\n }\r\n {this.state.WidgetRecorridoAlumno && (this.state.WidgetRecorridoAlumno_movil===movil_pequeño||!movil_pequeño)?\r\n :null\r\n }\r\n
\r\n ); /// finaliza return\r\n} /// finaliza render\r\n} /// finaliza class\r\n)/// finaliza withStyles\r\n\r\n ","import React from 'react';\r\nimport InputLabel from '@material-ui/core/InputLabel';\r\nimport MenuItem from '@material-ui/core/MenuItem';\r\nimport FormControl from '@material-ui/core/FormControl';\r\nimport Select from '@material-ui/core/Select';\r\nimport OutlinedInput from '@material-ui/core/OutlinedInput';\r\nimport ArrowDropDown from '@material-ui/icons/ArrowDropDown';\r\nimport CircularProgress from '@material-ui/core/CircularProgress';\r\n\r\nvar movil=/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);\r\n\r\nconst getLabelWidth = (label, required)=>{\r\n const canvas = document.createElement('canvas');\r\n const context = canvas.getContext('2d');\r\n context.font = '15px sans-serif'; //getComputedStyle(document.body).font;\r\n\r\n return context.measureText(label).width + (required ? 8 : 1); \r\n}\r\n\r\nconst iconLoading = () =>{\r\n return (\r\n \r\n
\r\n )\r\n}\r\n\r\nclass SimpleSelect extends React.Component {\r\nconstructor (props) {\r\n super(props);\r\n this.state = {\r\n labelWidth: 0,\r\n }\r\n} \r\n\r\ncomponentDidMount() {\r\n if (this.props.Outlined)\r\n this.setState({ labelWidth: this.props.labelWidth === undefined ? getLabelWidth(this.props.Label, this.props.required) : this.props.labelWidth})\r\n} \r\n\r\nrender() {\r\n const InputProps = this.props.Outlined === true ? undefined : ({ disableUnderline: this.props.disableUnderline });\r\n \r\n return ( \r\n \r\n { \r\n (() => {\r\n\r\n if (this.props.hiddenLabel !== true)\r\n {\r\n return (\r\n {this.props.Label}\r\n );\r\n }\r\n })()\r\n }\r\n { e.preventDefault(); e.stopPropagation(); } : this.props.onClick }\r\n onTouchStart= { movil === true ? this.props.onTouchStart : undefined }\r\n inputProps={{ inputRef: this.props.Ref, autoFocus: this.props.AutoFocus, className: this.props.classNameInput }} \r\n MenuProps={{ style: { zIndex: 400000 } }}\r\n input={ this.props.Outlined === true ? : \r\n undefined \r\n }\r\n multiple={this.props.Multiple}\r\n renderValue={this.props.RenderValue}\r\n onClose = {this.props.onClose}\r\n style={this.props.SelectClass}\r\n IconComponent= {this.props.loading ? iconLoading : this.props.IconComponent !== undefined ? this.props.IconComponent : ArrowDropDown} \r\n onFocus={this.props.onFocus}\r\n onBlur = {this.props.onBlur}\r\n onOpen={this.props.onOpen}\r\n onMouseMove={this.props.onMouseMove}\r\n onMouseLeave={this.props.onMouseLeave}\r\n open={this.props.open}\r\n SelectDisplayProps={{ style: this.props.styleSelectDisplay }}\r\n label={this.props.Label}\r\n name={this.props.name}\r\n { ...InputProps } \r\n >\r\n { \r\n (() => {\r\n if (this.props.ShowItemNone === true) { \r\n if (this.props.customItemNone !== undefined && this.props.customItemNone !== null)\r\n {\r\n return this.props.customItemNone;\r\n }\r\n else\r\n {\r\n return ;\r\n }\r\n } \r\n })()\r\n }\r\n {this.props.Datos}\r\n \r\n \r\n );\r\n}\r\n}\r\n\r\nexport default SimpleSelect;\r\n","import React from 'react';\r\nimport { useTheme } from '@material-ui/core/styles'; \r\nimport useMediaQuery from '@material-ui/core/useMediaQuery';\r\nimport { VariableSizeList } from 'react-window';\r\nimport ListSubheader from '@material-ui/core/ListSubheader';\r\n\r\nconst LISTBOX_PADDING = 14; \r\nconst LISTBOX_PADDING_WITH_GROUPS = 8;\r\n\r\nfunction renderRow(props) {\r\n const { data, index, style } = props;\r\n return React.cloneElement(data[index], {\r\n style: {\r\n ...style,\r\n top: style.top + LISTBOX_PADDING,\r\n },\r\n });\r\n }\r\n\r\nfunction renderRowWithGroups(props) {\r\n const { data, index, style } = props;\r\n return React.cloneElement(data[index], {\r\n style: {\r\n ...style,\r\n top: style.top + LISTBOX_PADDING_WITH_GROUPS,\r\n },\r\n });\r\n}\r\n\r\nconst OuterElementContext = React.createContext({});\r\n \r\n const OuterElementType = React.forwardRef((props, ref) => {\r\n const outerProps = React.useContext(OuterElementContext);\r\n return ;\r\n });\r\n \r\n function useResetCache(data) {\r\n const ref = React.useRef(null);\r\n React.useEffect(() => {\r\n if (ref.current != null) {\r\n ref.current.resetAfterIndex(0, true);\r\n }\r\n }, [data]);\r\n return ref;\r\n }\r\n \r\n // Adapter for react-window\r\n const ListboxComponent = React.forwardRef(function ListboxComponent(props, ref) {\r\n const { children, ...other } = props;\r\n const itemData = React.Children.toArray(children);\r\n const theme = useTheme();\r\n const smUp = useMediaQuery(theme.breakpoints.up('sm'), { noSsr: true });\r\n const itemCount = itemData.length;\r\n const itemSize = smUp ? 30 : 45; //36 : 48\r\n \r\n const getChildSize = (child) => {\r\n if (React.isValidElement(child) && child.type === ListSubheader) {\r\n return 48;\r\n }\r\n \r\n return itemSize;\r\n };\r\n \r\n const getHeight = () => {\r\n if (itemCount > 8) {\r\n return 8 * itemSize;\r\n }\r\n return itemData.map(getChildSize).reduce((a, b) => a + b, 0);\r\n };\r\n \r\n const gridRef = useResetCache(itemCount);\r\n \r\n return (\r\n \r\n \r\n getChildSize(itemData[index])}\r\n overscanCount={5}\r\n itemCount={itemCount} \r\n style={{ margin: 0, padding: 0 }} \r\n >\r\n {renderRow}\r\n \r\n \r\n
\r\n );\r\n });\r\n \r\n // Adapter for react-window\r\n const ListboxComponentWithGroups = React.forwardRef(function ListboxComponent(props, ref) {\r\n const { children, ...other } = props;\r\n const itemData = React.Children.toArray(children);\r\n const theme = useTheme();\r\n const smUp = useMediaQuery(theme.breakpoints.up('sm'), { noSsr: true });\r\n const itemCount = itemData.length;\r\n const itemSize = smUp ? 30 : 45;\r\n \r\n const getChildSize = (child) => {\r\n if (React.isValidElement(child) && child.type === ListSubheader) {\r\n return 48;\r\n }\r\n \r\n return itemSize;\r\n };\r\n \r\n const getHeight = () => {\r\n if (itemCount > 8) {\r\n return 8 * itemSize;\r\n }\r\n return itemData.map(getChildSize).reduce((a, b) => a + b, 0);\r\n };\r\n \r\n const gridRef = useResetCache(itemCount);\r\n \r\n return (\r\n \r\n \r\n getChildSize(itemData[index])}\r\n overscanCount={5}\r\n itemCount={itemCount} \r\n style={{ margin: 0, padding: 0 }} \r\n >\r\n {renderRowWithGroups}\r\n \r\n \r\n
\r\n );\r\n });\r\n\r\nexport const virtual = {ListboxComponent, ListboxComponentWithGroups};"],"sourceRoot":""}