What programs export .mesh? - export
I need to export some USGS (U.S. Geological Survey) DEM (Digital Elevation Model) data into .mesh format. I need it to be in the Roblox's .mesh format though. The only program that I know that does this is Anim8tor's program. Basically it makes the .mesh look like this:
version 1.00
36
[12.3732, 5.75607, 0.797889][0.30353, 0.52573, 0.79465][0.30902, 0.80902, 0][13.5279, 5.75607, 0.356833][0.30353, 0.52573, 0.79465][0.92705, 0.80902, 0][12.8664, 6.13804, 0.356833][0.30353, 0.52573, 0.79465][0.57295, 1.00000, 0][12.3732, 5.75607, 0.797889][0.30353, 0.52573, 0.79465][0.30902, 0.80902, 0][13.4437, 5.13804, 0.797889][0.30353, 0.52573, 0.79465][0.88197, 0.50000, 0][13.5279, 5.75607, 0.356833][0.30353, 0.52573, 0.79465][0.92705, 0.80902, 0][12.3732, 5.75607, 0.797889][0.30353, 0.52573, 0.79465][0.30902, 0.80902, 0][12.7301, 5.13804, 1.07048][0.30353, 0.52573, 0.79465][0.50000, 0.50000, 0][13.4437, 5.13804, 0.797889][0.30353, 0.52573, 0.79465][0.88197, 0.50000, 0][12.3732, 4.52, 0.797889][-0.60706, 0.00000, 0.79465][0.30902, 0.19098, 0][11.7959, 5.52, 0.356833][-0.60706, 0.00000, 0.79465][-0.00000, 0.69098, 0][11.7959, 4.75607, 0.356833][-0.60706, 0.00000, 0.79465][-0.00000, 0.30902, 0][12.3732, 4.52, 0.797889][-0.60706, 0.00000, 0.79465][0.30902, 0.19098, 0][12.3732, 5.75607, 0.797889][-0.60706, 0.00000, 0.79465][0.30902, 0.80902, 0][11.7959, 5.52, 0.356833][-0.60706, 0.00000, 0.79465][-0.00000, 0.69098, 0][12.3732, 4.52, 0.797889][-0.60706, 0.00000, 0.79465][0.30902, 0.19098, 0][12.7301, 5.13804, 1.07048][-0.60706, 0.00000, 0.79465][0.50000, 0.50000, 0][12.3732, 5.75607, 0.797889][-0.60706, 0.00000, 0.79465][0.30902, 0.80902, 0][13.4437, 5.13804, 0.797889][0.30353, -0.52573, 0.79465][0.88197, 0.50000, 0][12.8664, 4.13804, 0.356833][0.30353, -0.52573, 0.79465][0.57295, 0.00000, 0][13.5279, 4.52, 0.356833][0.30353, -0.52573, 0.79465][0.92705, 0.19098, 0][13.4437, 5.13804, 0.797889][0.30353, -0.52573, 0.79465][0.88197, 0.50000, 0][12.3732, 4.52, 0.797889][0.30353, -0.52573, 0.79465][0.30902, 0.19098, 0][12.8664, 4.13804, 0.356833][0.30353, -0.52573, 0.79465][0.57295, 0.00000, 0][13.4437, 5.13804, 0.797889][0.30353, -0.52573, 0.79465][0.88197, 0.50000, 0][12.7301, 5.13804, 1.07048][0.30353, -0.52573, 0.79465][0.50000, 0.50000, 0][12.3732, 4.52, 0.797889][0.30353, -0.52573, 0.79465][0.30902, 0.19098, 0][13.5279, 5.75607, 0.356833][0.98225, -0.00000, 0.18759][0.92705, 0.80902, 0][13.6642, 4.75607, -0.356811][0.98225, -0.00000, 0.18759][1.00000, 0.30902, 0][13.6642, 5.52, -0.356811][0.98225, -0.00000, 0.18759][1.00000, 0.69098, 0][13.5279, 5.75607, 0.356833][0.98225, -0.00000, 0.18759][0.92705, 0.80902, 0][13.5279, 4.52, 0.356833][0.98225, -0.00000, 0.18759][0.92705, 0.19098, 0][13.6642, 4.75607, -0.356811][0.98225, -0.00000, 0.18759][1.00000, 0.30902, 0][13.5279, 5.75607, 0.356833][0.98225, -0.00000, 0.18759][0.92705, 0.80902, 0][13.4437, 5.13804, 0.797889][0.98225, -0.00000, 0.18759][0.88197, 0.50000, 0][13.5279, 4.52, 0.356833][0.98225, -0.00000, 0.18759][0.92705, 0.19098, 0][11.7959, 5.52, 0.356833][-0.49112, 0.85065, 0.18759][-0.00000, 0.69098, 0][12.5938, 6.13804, -0.356811][-0.49112, 0.85065, 0.18759][0.42705, 1.00000, 0][11.9322, 5.75607, -0.356811][-0.49112, 0.85065, 0.18759][0.07295, 0.80902, 0][11.7959, 5.52, 0.356833][-0.49112, 0.85065, 0.18759][-0.00000, 0.69098, 0][12.8664, 6.13804, 0.356833][-0.49112, 0.85065, 0.18759][0.57295, 1.00000, 0][12.5938, 6.13804, -0.356811][-0.49112, 0.85065, 0.18759][0.42705, 1.00000, 0][11.7959, 5.52, 0.356833][-0.49112, 0.85065, 0.18759][-0.00000, 0.69098, 0][12.3732, 5.75607, 0.797889][-0.49112, 0.85065, 0.18759][0.30902, 0.80902, 0][12.8664, 6.13804, 0.356833][-0.49112, 0.85065, 0.18759][0.57295, 1.00000, 0][12.8664, 4.13804, 0.356833][-0.49112, -0.85065, 0.18759][0.57295, 0.00000, 0][11.9322, 4.52, -0.356811][-0.49112, -0.85065, 0.18759][0.07295, 0.19098, 0][12.5938, 4.13804, -0.356811][-0.49112, -0.85065, 0.18759][0.42705, 0.00000, 0][12.8664, 4.13804, 0.356833][-0.49112, -0.85065, 0.18759][0.57295, 0.00000, 0][11.7959, 4.75607, 0.356833][-0.49112, -0.85065, 0.18759][-0.00000, 0.30902, 0][11.9322, 4.52, -0.356811][-0.49112, -0.85065, 0.18759][0.07295, 0.19098, 0][12.8664, 4.13804, 0.356833][-0.49112, -0.85065, 0.18759][0.57295, 0.00000, 0][12.3732, 4.52, 0.797889][-0.49112, -0.85065, 0.18759][0.30902, 0.19098, 0][11.7959, 4.75607, 0.356833][-0.49112, -0.85065, 0.18759][-0.00000, 0.30902, 0][12.8664, 6.13804, 0.356833][0.49112, 0.85065, -0.18759][0.57295, 1.00000, 0][13.0869, 5.75607, -0.797867][0.49112, 0.85065, -0.18759][0.69098, 0.80902, 0][12.5938, 6.13804, -0.356811][0.49112, 0.85065, -0.18759][0.42705, 1.00000, 0][12.8664, 6.13804, 0.356833][0.49112, 0.85065, -0.18759][0.57295, 1.00000, 0][13.6642, 5.52, -0.356811][0.49112, 0.85065, -0.18759][1.00000, 0.69098, 0][13.0869, 5.75607, -0.797867][0.49112, 0.85065, -0.18759][0.69098, 0.80902, 0][12.8664, 6.13804, 0.356833][0.49112, 0.85065, -0.18759][0.57295, 1.00000, 0][13.5279, 5.75607, 0.356833][0.49112, 0.85065, -0.18759][0.92705, 0.80902, 0][13.6642, 5.52, -0.356811][0.49112, 0.85065, -0.18759][1.00000, 0.69098, 0][13.6642, 4.75607, -0.356811][0.49112, -0.85065, -0.18759][1.00000, 0.30902, 0][12.5938, 4.13804, -0.356811][0.49112, -0.85065, -0.18759][0.42705, 0.00000, 0][13.0869, 4.52, -0.797867][0.49112, -0.85065, -0.18759][0.69098, 0.19098, 0][13.6642, 4.75607, -0.356811][0.49112, -0.85065, -0.18759][1.00000, 0.30902, 0][12.8664, 4.13804, 0.356833][0.49112, -0.85065, -0.18759][0.57295, 0.00000, 0][12.5938, 4.13804, -0.356811][0.49112, -0.85065, -0.18759][0.42705, 0.00000, 0][13.6642, 4.75607, -0.356811][0.49112, -0.85065, -0.18759][1.00000, 0.30902, 0][13.5279, 4.52, 0.356833][0.49112, -0.85065, -0.18759][0.92705, 0.19098, 0][12.8664, 4.13804, 0.356833][0.49112, -0.85065, -0.18759][0.57295, 0.00000, 0][11.7959, 4.75607, 0.356833][-0.98225, 0.00000, -0.18759][-0.00000, 0.30902, 0][12.0164, 5.13804, -0.797867][-0.98225, 0.00000, -0.18759][0.11803, 0.50000, 0][11.9322, 4.52, -0.356811][-0.98225, 0.00000, -0.18759][0.07295, 0.19098, 0][11.7959, 4.75607, 0.356833][-0.98225, 0.00000, -0.18759][-0.00000, 0.30902, 0][11.9322, 5.75607, -0.356811][-0.98225, 0.00000, -0.18759][0.07295, 0.80902, 0][12.0164, 5.13804, -0.797867][-0.98225, 0.00000, -0.18759][0.11803, 0.50000, 0][11.7959, 4.75607, 0.356833][-0.98225, 0.00000, -0.18759][-0.00000, 0.30902, 0][11.7959, 5.52, 0.356833][-0.98225, 0.00000, -0.18759][-0.00000, 0.69098, 0][11.9322, 5.75607, -0.356811][-0.98225, 0.00000, -0.18759][0.07295, 0.80902, 0][13.0869, 5.75607, -0.797867][0.60707, 0.00000, -0.79465][0.69098, 0.80902, 0][13.0869, 4.52, -0.797867][0.60707, 0.00000, -0.79465][0.69098, 0.19098, 0][12.7301, 5.13804, -1.07046][0.60707, 0.00000, -0.79465][0.50000, 0.50000, 0][13.0869, 5.75607, -0.797867][0.60707, 0.00000, -0.79465][0.69098, 0.80902, 0][13.6642, 4.75607, -0.356811][0.60707, 0.00000, -0.79465][1.00000, 0.30902, 0][13.0869, 4.52, -0.797867][0.60707, 0.00000, -0.79465][0.69098, 0.19098, 0][13.0869, 5.75607, -0.797867][0.60707, 0.00000, -0.79465][0.69098, 0.80902, 0][13.6642, 5.52, -0.356811][0.60707, 0.00000, -0.79465][1.00000, 0.69098, 0][13.6642, 4.75607, -0.356811][0.60707, 0.00000, -0.79465][1.00000, 0.30902, 0][12.0164, 5.13804, -0.797867][-0.30353, 0.52574, -0.79465][0.11803, 0.50000, 0][13.0869, 5.75607, -0.797867][-0.30353, 0.52574, -0.79465][0.69098, 0.80902, 0][12.7301, 5.13804, -1.07046][-0.30353, 0.52574, -0.79465][0.50000, 0.50000, 0][12.0164, 5.13804, -0.797867][-0.30353, 0.52574, -0.79465][0.11803, 0.50000, 0][12.5938, 6.13804, -0.356811][-0.30353, 0.52574, -0.79465][0.42705, 1.00000, 0][13.0869, 5.75607, -0.797867][-0.30353, 0.52574, -0.79465][0.69098, 0.80902, 0][12.0164, 5.13804, -0.797867][-0.30353, 0.52574, -0.79465][0.11803, 0.50000, 0][11.9322, 5.75607, -0.356811][-0.30353, 0.52574, -0.79465][0.07295, 0.80902, 0][12.5938, 6.13804, -0.356811][-0.30353, 0.52574, -0.79465][0.42705, 1.00000, 0][13.0869, 4.52, -0.797867][-0.30353, -0.52574, -0.79465][0.69098, 0.19098, 0][12.0164, 5.13804, -0.797867][-0.30353, -0.52574, -0.79465][0.11803, 0.50000, 0][12.7301, 5.13804, -1.07046][-0.30353, -0.52574, -0.79465][0.50000, 0.50000, 0][13.0869, 4.52, -0.797867][-0.30353, -0.52574, -0.79465][0.69098, 0.19098, 0][11.9322, 4.52, -0.356811][-0.30353, -0.52574, -0.79465][0.07295, 0.19098, 0][12.0164, 5.13804, -0.797867][-0.30353, -0.52574, -0.79465][0.11803, 0.50000, 0][13.0869, 4.52, -0.797867][-0.30353, -0.52574, -0.79465][0.69098, 0.19098, 0][12.5938, 4.13804, -0.356811][-0.30353, -0.52574, -0.79465][0.42705, 0.00000, 0][11.9322, 4.52, -0.356811][-0.30353, -0.52574, -0.79465][0.07295, 0.19098, 0]
That mesh looks something like this
The problem is that I have about 200MB of .3ds data that I need to convert to Roblox's .mesh but Anim8or's .mesh exporter crashes.
Is there any program that exports .mesh like that?
PS: I know Roblox disabled .mesh uploading but I have a script that converts it into regular Roblox terrain
Open the model in Blender and export it to Roblox's .mesh
==Edit==
Sorry, I just pointed at some stuff that i thought would work, but when I tried it I noticed that the add-on was flawed (not much of it was working) so I edited it a bit (it is the first blender add-on I have made, and I am not too sure about the .mesh part, but it might work, however expect bugs):
bl_info = {
"name": "Export Roblox Mesh (.mesh)",
"description": "Exports the selected model to .mesh Source: http://www.roblox.com/BlenderExport-py-item?id=25895023",
"author": "Original by stravant, then edited",
"version": (1,0),
"location": "File > Export",
"warning": "",
"wiki_url": "http://www.roblox.com/BlenderExport-py-item?id=25895023",
"category": "Import-Export"
}
import bpy
def get_face_vertex_array(face, uvface, mesh, matrix):
varray = []
for inx, verti in enumerate(face.vertices):
tcoord = (matrix * mesh.vertices[verti].co).to_tuple(3)
tnorm = (matrix.to_3x3() * face.normal).normalized().to_tuple(3)
tuv = (0,0,0)
varray.append((tcoord, tnorm, tuv))
return varray
def write_tuple_3(tuple, file, flip):
if flip:
file.write("["+str(tuple[0])+","+str(tuple[2])+","+str(tuple[1])+"]")
else:
file.write("["+str(tuple[0])+","+str(tuple[1])+","+str(tuple[2])+"]")
def write_verts(varray, nverts, file):
file.write(str(nverts) + "\n")
for vert in varray:
write_tuple_3(vert[0], file, True)
write_tuple_3(vert[1], file, True)
write_tuple_3(vert[2], file, False)
file.write("\n")
def do_export(path,selected_only):
file = open(path, "w")
file.write("version 1.00\n")
tmp_mesh_verts = []
tmp_mesh_size = 0
invert_rot = False
scene = bpy.context.scene
for obj in (selected_only and bpy.context.selected_objects or bpy.data.objects):
if obj.type == "MESH":
tmp_mesh = obj.to_mesh(scene,True, "PREVIEW")
matrix = obj.matrix_world.copy()
for index, face in enumerate(tmp_mesh.tessfaces):
verts = get_face_vertex_array(face, None, tmp_mesh, matrix)
if len(verts) > 3:
if invert_rot:
tmp_mesh_verts.extend([verts[2], verts[1], verts[0], verts[3], verts[2], verts[0]])
else:
tmp_mesh_verts.extend([verts[0], verts[1], verts[2], verts[0], verts[2], verts[3]])
tmp_mesh_size += 2
else:
if invert_rot:
tmp_mesh_verts.extend([verts[2], verts[1], verts[0]])
else:
tmp_mesh_verts.extend([verts[0], verts[1], verts[2]])
tmp_mesh_size += 1
bpy.data.meshes.remove(tmp_mesh)
write_verts(tmp_mesh_verts, tmp_mesh_size, file)
file.close()
class RbxExporter(bpy.types.Operator):
"""Export model to .mesh"""
bl_idname = "export.mesh"
bl_label = "Export RBXMesh"
filepath = bpy.props.StringProperty(subtype="FILE_PATH")
ending = bpy.props.StringProperty(name="File ending", description="The file ending to be used", maxlen= 1024, default= ".mesh")
selected_only = bpy.props.BoolProperty(name="Selected objects only", description="Export only the selected objects?", default= False)
def execute(self, context):
print("RBX::Execute")
do_export(self.filepath + (self.filepath.endswith(self.ending) and "" or self.ending),self.selected_only)
return {"FINISHED"}
def invoke(self, context, event):
print("RBX::Invoke")
context.window_manager.fileselect_add(self)
return {"RUNNING_MODAL"}
def menu_func(self, context):
print("RBX::MenuFunc")
self.layout.operator(RbxExporter.bl_idname, text="Roblox Mesh (.mesh)")
def register():
print("RBX::Register")
bpy.utils.register_class(RbxExporter)
bpy.types.INFO_MT_file_export.append(menu_func)
def unregister():
print("RBX::Unregister")
bpy.utils.unregister_class(RbxExporter)
bpy.types.INFO_MT_file_export.remove(menu_func)
if __name__ == "__main__":
register()
I tried it on the monkey head, and it seems to work.
Also to note is that i removed the UV mapping and changed lots of stuff (no idea if it is handled correctly in memory and so).
Remember to activate it.
The option to export to .mesh should appear in the export section of the file menu.
Another method you could use is to import it in Blender, export it as .obj, and import it in roblox.
Related
How to query this nested XML in Snowflake
New to XML and Snowflake. Can someone please give me an example of how I would query this nested XML data in Snowflake? Sample of the data is attached. Specifically, I'd like to flatten this whole document (so I can see all columns) and I can put this data into Snowflake. If someone can give me al example of this query in Snowflake I would appreciated it. When I try to query this data I just get nulls except for the vehicle_number. How would I query this XML to see all columns? <pnet_get_performx_data_packet> <packet_id>4</packet_id> <more_data></more_data> <pxreport> <vehicle_number>5454</vehicle_number> <px_params> <long_idle_thresh>0</long_idle_thresh> <rpm_thresh>14</rpm_thresh> <over_speed>72</over_speed> <excess_speed>75</excess_speed> </px_params> <reportdata> <sd>05/19/2022 13:47:16</sd> <ed>05/19/2022 14:06:08</ed> <so>8074162</so> <eo>8074162</eo> <et>0</et> <mt>0</mt> <or>0</or> <os>0</os> <es>0</es> <lit>0</lit> <lic>0</lic> <sit>0</sit> <sic>0</sic> <gof>0</gof> <vin></vin> <lif>0</lif> <sif>0</sif> <sf>26651500</sf> <ef>26651500</ef> <nce>0</nce> <ct>0</ct> <cf>0</cf> <cd>0</cd> <tgv>0</tgv> <tgt>0</tgt> <tgf>0</tgf> <tgd>0</tgd> <sbt>0</sbt> <ba>0</ba> <els>0</els> <elm>0</elm> <fl1>59</fl1> <fl2>0</fl2> <ht>0</ht> <sg>45</sg> <pfs>0</pfs> <efl>0</efl> <oslt>0</oslt> <osht>0</osht> <orlt>0</orlt> <orht>0</orht> </reportdata> <reportdata> <sd>05/19/2022 14:06:08</sd> <ed>05/19/2022 14:16:08</ed> <so>8074162</so> <eo>8074162</eo> <et>96</et> <mt>0</mt> <or>0</or> <os>0</os> <es>0</es> <lit>96</lit> <lic>1</lic> <sit>0</sit> <sic>0</sic> <gof>0</gof> <vin></vin> <lif>0</lif> <sif>0</sif> <sf>26651500</sf> <ef>26651500</ef> <nce>0</nce> <ct>0</ct> <cf>0</cf> <cd>0</cd> <tgv>0</tgv> <tgt>0</tgt> <tgf>0</tgf> <tgd>0</tgd> <sbt>0</sbt> <ba>0</ba> <els>8.5</els> <elm>61.5</elm> <fl1>61</fl1> <fl2>0</fl2> <ht>0</ht> <sg>45</sg> <pfs>0</pfs> <efl>0</efl> <oslt>0</oslt> <osht>0</osht> <orlt>0</orlt> <orht>0</orht> </reportdata> <reportdata> <sd>05/19/2022 14:16:08</sd> <ed>05/19/2022 14:17:54</ed> <so>8074162</so> <eo>8074162</eo> <et>107</et> <mt>13</mt> <or>0</or> <os>0</os> <es>0</es> <lit>94</lit> <lic>1</lic> <sit>0</sit> <sic>0</sic> <gof>0</gof> <vin></vin> <lif>0</lif> <sif>0</sif> <sf>26651500</sf> <ef>26651500</ef> <nce>0</nce> <ct>0</ct> <cf>0</cf> <cd>0</cd> <tgv>0</tgv> <tgt>0</tgt> <tgf>0</tgf> <tgd>0</tgd> <sbt>0</sbt> <ba>1</ba> <els>7</els> <elm>14</elm> <fl1>62</fl1> <fl2>0</fl2> <ht>0</ht> <sg>45</sg> <pfs>0</pfs> <efl>0</efl> <oslt>0</oslt> <osht>0</osht> <orlt>0</orlt> <orht>0</orht> </reportdata> <reportdata> <sd>05/19/2022 14:17:54</sd> <ed>05/19/2022 15:06:08</ed> <so>8074162</so> <eo>8074489</eo> <et>2894</et> <mt>2715</mt> <or>1609</or> <os>0</os> <es>0</es> <lit>179</lit> <lic>10</lic> <sit>0</sit> <sic>0</sic> <gof>4125</gof> <vin></vin> <lif>125</lif> <sif>0</sif> <sf>26651500</sf> <ef>26655625</ef> <nce>0</nce> <ct>0</ct> <cf>0</cf> <cd>0</cd> <tgv>0</tgv> <tgt>0</tgt> <tgf>0</tgf> <tgd>0</tgd> <sbt>0</sbt> <ba>38</ba> <els>8</els> <elm>30.5</elm> <fl1>58</fl1> <fl2>0</fl2> <ht>0</ht> <sg>45</sg> <pfs>0</pfs> <efl>0</efl> <oslt>0</oslt> <osht>0</osht> <orlt>109</orlt> <orht>1500</orht> </reportdata> <reportdata> <sd>05/19/2022 15:06:08</sd> <ed>05/19/2022 15:11:26</ed> <so>8074489</so> <eo>8074491</eo> <et>318</et> <mt>108</mt> <or>0</or> <os>0</os> <es>0</es> <lit>210</lit> <lic>4</lic> <sit>0</sit> <sic>0</sic> <gof>0</gof> <vin></vin> <lif>0</lif> <sif>0</sif> <sf>26655625</sf> <ef>26655625</ef> <nce>0</nce> <ct>0</ct> <cf>0</cf> <cd>0</cd> <tgv>0</tgv> <tgt>0</tgt> <tgf>0</tgf> <tgd>0</tgd> <sbt>0</sbt> <ba>2</ba> <els>7</els> <elm>10</elm> <fl1>60</fl1> <fl2>0</fl2> <ht>0</ht> <sg>45</sg> <pfs>0</pfs> <efl>0</efl> <oslt>0</oslt> <osht>0</osht> <orlt>0</orlt> <orht>0</orht> </reportdata> <reportdata> <sd>05/19/2022 15:11:26</sd> <ed>05/19/2022 15:12:42</ed> <so>8074491</so> <eo>8074491</eo> <et>76</et> <mt>0</mt> <or>0</or> <os>0</os> <es>0</es> <lit>76</lit> <lic>1</lic> <sit>0</sit> <sic>0</sic> <gof>0</gof> <vin></vin> <lif>0</lif> <sif>0</sif> <sf>26655625</sf> <ef>26655625</ef> <nce>0</nce> <ct>0</ct> <cf>0</cf> <cd>0</cd> <tgv>0</tgv> <tgt>0</tgt> <tgf>0</tgf> <tgd>0</tgd> <sbt>0</sbt> <ba>0</ba> <els>6.5</els> <elm>0</elm> <fl1>60</fl1> <fl2>0</fl2> <ht>0</ht> <sg>45</sg> <pfs>0</pfs> <efl>0</efl> <oslt>0</oslt> <osht>0</osht> <orlt>0</orlt> <orht>0</orht> </reportdata> <reportdata> <sd>05/19/2022 15:12:42</sd> <ed>05/19/2022 15:31:40</ed> <so>8074491</so> <eo>8074491</eo> <et>1137</et> <mt>3</mt> <or>0</or> <os>0</os> <es>0</es> <lit>1134</lit> <lic>1</lic> <sit>0</sit> <sic>0</sic> <gof>125</gof> <vin></vin> <lif>125</lif> <sif>0</sif> <sf>26655625</sf> <ef>26655750</ef> <nce>0</nce> <ct>0</ct> <cf>0</cf> <cd>0</cd> <tgv>0</tgv> <tgt>0</tgt> <tgf>0</tgf> <tgd>0</tgd> <sbt>0</sbt> <ba>1</ba> <els>7</els> <elm>20.5</elm> <fl1>61</fl1> <fl2>0</fl2> <ht>0</ht> <sg>45</sg> <pfs>0</pfs> <efl>0</efl> <oslt>0</oslt> <osht>0</osht> <orlt>0</orlt> <orht>0</orht> </reportdata> <reportdata> <sd>05/19/2022 15:31:40</sd> <ed>05/19/2022 15:38:02</ed> <so>8074491</so> <eo>8074491</eo> <et>21</et> <mt>18</mt> <or>0</or> <os>0</os> <es>0</es> <lit>3</lit> <lic>1</lic> <sit>0</sit> <sic>0</sic> <gof>0</gof> <vin></vin> <lif>0</lif> <sif>0</sif> <sf>26655750</sf> <ef>26655750</ef> <nce>0</nce> <ct>0</ct> <cf>0</cf> <cd>0</cd> <tgv>0</tgv> <tgt>0</tgt> <tgf>0</tgf> <tgd>0</tgd> <sbt>0</sbt> <ba>1</ba> <els>7</els> <elm>8</elm> <fl1>60</fl1> <fl2>0</fl2> <ht>0</ht> <sg>45</sg> <pfs>0</pfs> <efl>0</efl> <oslt>0</oslt> <osht>0</osht> <orlt>0</orlt> <orht>0</orht> </reportdata> <reportdata> <sd>05/19/2022 15:38:02</sd> <ed>05/19/2022 15:46:06</ed> <so>8074491</so> <eo>8074491</eo> <et>36</et> <mt>15</mt> <or>0</or> <os>0</os> <es>0</es> <lit>21</lit> <lic>1</lic> <sit>0</sit> <sic>0</sic> <gof>0</gof> <vin></vin> <lif>0</lif> <sif>0</sif> <sf>26655750</sf> <ef>26655750</ef> <nce>0</nce> <ct>0</ct> <cf>0</cf> <cd>0</cd> <tgv>0</tgv> <tgt>0</tgt> <tgf>0</tgf> <tgd>0</tgd> <sbt>0</sbt> <ba>0</ba> <els>13</els> <elm>13.5</elm> <fl1>58</fl1> <fl2>0</fl2> <ht>0</ht> <sg>45</sg> <pfs>0</pfs> <efl>0</efl> <oslt>0</oslt> <osht>0</osht> <orlt>0</orlt> <orht>0</orht> </reportdata> <reportdata> <sd>05/19/2022 15:46:06</sd> <ed>05/19/2022 15:51:18</ed> <so>8074491</so> <eo>8074499</eo> <et>312</et> <mt>175</mt> <or>72</or> <os>0</os> <es>0</es> <lit>137</lit> <lic>1</lic> <sit>0</sit> <sic>0</sic> <gof>250</gof> <vin></vin> <lif>0</lif> <sif>0</sif> <sf>26655750</sf> <ef>26656000</ef> <nce>0</nce> <ct>0</ct> <cf>0</cf> <cd>0</cd> <tgv>0</tgv> <tgt>0</tgt> <tgf>0</tgf> <tgd>0</tgd> <sbt>0</sbt> <ba>2</ba> <els>4</els> <elm>29</elm> <fl1>60</fl1> <fl2>0</fl2> <ht>0</ht> <sg>45</sg> <pfs>0</pfs> <efl>0</efl> <oslt>0</oslt> <osht>0</osht> <orlt>1</orlt> <orht>71</orht> </reportdata> <reportdata> <sd>05/19/2022 15:51:18</sd> <ed>05/19/2022 16:06:08</ed> <so>8074499</so> <eo>8074616</eo> <et>891</et> <mt>860</mt> <or>731</or> <os>0</os> <es>0</es> <lit>31</lit> <lic>2</lic> <sit>0</sit> <sic>0</sic> <gof>2625</gof> <vin></vin> <lif>0</lif> <sif>0</sif> <sf>26656000</sf> <ef>26658625</ef> <nce>0</nce> <ct>0</ct> <cf>0</cf> <cd>0</cd> <tgv>0</tgv> <tgt>0</tgt> <tgf>0</tgf> <tgd>0</tgd> <sbt>0</sbt> <ba>8</ba> <els>11</els> <elm>60</elm> <fl1>58</fl1> <fl2>0</fl2> <ht>0</ht> <sg>45</sg> <pfs>0</pfs> <efl>0</efl> <oslt>0</oslt> <osht>0</osht> <orlt>80</orlt> <orht>651</orht> </reportdata> <reportdata> <sd>05/19/2022 16:06:08</sd> <ed>05/19/2022 16:22:08</ed> <so>8074616</so> <eo>8074727</eo> <et>958</et> <mt>872</mt> <or>623</or> <os>0</os> <es>0</es> <lit>86</lit> <lic>3</lic> <sit>0</sit> <sic>1</sic> <gof>2250</gof> <vin></vin> <lif>0</lif> <sif>0</sif> <sf>26658625</sf> <ef>26660875</ef> <nce>0</nce> <ct>0</ct> <cf>0</cf> <cd>0</cd> <tgv>0</tgv> <tgt>0</tgt> <tgf>0</tgf> <tgd>0</tgd> <sbt>0</sbt> <ba>13</ba> <els>9</els> <elm>52.5</elm> <fl1>56</fl1> <fl2>0</fl2> <ht>0</ht> <sg>45</sg> <pfs>0</pfs> <efl>0</efl> <oslt>0</oslt> <osht>0</osht> <orlt>29</orlt> <orht>594</orht> </reportdata> <reportdata> <sd>05/19/2022 16:22:08</sd> <ed>05/19/2022 16:29:18</ed> <so>8074727</so> <eo>8074727</eo> <et>0</et> <mt>0</mt> <or>0</or> <os>0</os> <es>0</es> <lit>0</lit> <lic>0</lic> <sit>0</sit> <sic>0</sic> <gof>0</gof> <vin></vin> <lif>0</lif> <sif>0</sif> <sf>26660875</sf> <ef>26660875</ef> <nce>0</nce> <ct>0</ct> <cf>0</cf> <cd>0</cd> <tgv>0</tgv> <tgt>0</tgt> <tgf>0</tgf> <tgd>0</tgd> <sbt>0</sbt> <ba>0</ba> <els>0</els> <elm>0</elm> <fl1>56</fl1> <fl2>0</fl2> <ht>0</ht> <sg>45</sg> <pfs>0</pfs> <efl>0</efl> <oslt>0</oslt> <osht>0</osht> <orlt>0</orlt> <orht>0</orht> </reportdata> <reportdata> <sd>05/19/2022 16:29:18</sd> <ed>05/19/2022 16:55:48</ed> <so>8074727</so> <eo>8074727</eo> <et>127</et> <mt>6</mt> <or>0</or> <os>0</os> <es>0</es> <lit>121</lit> <lic>1</lic> <sit>0</sit> <sic>0</sic> <gof>0</gof> <vin></vin> <lif>0</lif> <sif>0</sif> <sf>26660875</sf> <ef>26660875</ef> <nce>0</nce> <ct>0</ct> <cf>0</cf> <cd>0</cd> <tgv>0</tgv> <tgt>0</tgt> <tgf>0</tgf> <tgd>0</tgd> <sbt>0</sbt> <ba>0</ba> <els>6.5</els> <elm>19</elm> <fl1>56</fl1> <fl2>0</fl2> <ht>0</ht> <sg>45</sg> <pfs>0</pfs> <efl>0</efl> <oslt>0</oslt> <osht>0</osht> <orlt>0</orlt> <orht>0</orht> </reportdata> <reportdata> <sd>05/19/2022 16:55:48</sd> <ed>05/19/2022 17:06:08</ed> <so>8074727</so> <eo>8074813</eo> <et>621</et> <mt>596</mt> <or>495</or> <os>0</os> <es>0</es> <lit>25</lit> <lic>1</lic> <sit>0</sit> <sic>0</sic> <gof>1250</gof> <vin></vin> <lif>0</lif> <sif>0</sif> <sf>26660875</sf> <ef>26662125</ef> <nce>0</nce> <ct>0</ct> <cf>0</cf> <cd>0</cd> <tgv>0</tgv> <tgt>0</tgt> <tgf>0</tgf> <tgd>0</tgd> <sbt>0</sbt> <ba>2</ba> <els>8</els> <elm>35</elm> <fl1>57</fl1> <fl2>0</fl2> <ht>0</ht> <sg>45</sg> <pfs>0</pfs> <efl>0</efl> <oslt>0</oslt> <osht>0</osht> <orlt>25</orlt> <orht>470</orht> </reportdata> <reportdata> <sd>05/19/2022 17:06:08</sd> <ed>05/19/2022 17:22:40</ed> <so>8074813</so> <eo>8074907</eo> <et>951</et> <mt>809</mt> <or>526</or> <os>0</os> <es>0</es> <lit>142</lit> <lic>6</lic> <sit>0</sit> <sic>0</sic> <gof>875</gof> <vin></vin> <lif>0</lif> <sif>0</sif> <sf>26662125</sf> <ef>26663000</ef> <nce>0</nce> <ct>0</ct> <cf>0</cf> <cd>0</cd> <tgv>0</tgv> <tgt>0</tgt> <tgf>0</tgf> <tgd>0</tgd> <sbt>0</sbt> <ba>14</ba> <els>9</els> <elm>24.5</elm> <fl1>56</fl1> <fl2>0</fl2> <ht>0</ht> <sg>45</sg> <pfs>0</pfs> <efl>0</efl> <oslt>0</oslt> <osht>0</osht> <orlt>34</orlt> <orht>492</orht> </reportdata> <reportdata> <sd>05/19/2022 17:22:40</sd> <ed>05/19/2022 17:28:00</ed> <so>8074907</so> <eo>8074907</eo> <et>0</et> <mt>0</mt> <or>0</or> <os>0</os> <es>0</es> <lit>0</lit> <lic>0</lic> <sit>0</sit> <sic>0</sic> <gof>0</gof> <vin></vin> <lif>0</lif> <sif>0</sif> <sf>26663000</sf> <ef>26663000</ef> <nce>0</nce> <ct>0</ct> <cf>0</cf> <cd>0</cd> <tgv>0</tgv> <tgt>0</tgt> <tgf>0</tgf> <tgd>0</tgd> <sbt>0</sbt> <ba>0</ba> <els>0</els> <elm>0</elm> <fl1>56</fl1> <fl2>0</fl2> <ht>0</ht> <sg>45</sg> <pfs>0</pfs> <efl>0</efl> <oslt>0</oslt> <osht>0</osht> <orlt>0</orlt> <orht>0</orht> </reportdata> <reportdata> <sd>05/19/2022 17:28:00</sd> <ed>05/19/2022 17:41:26</ed> <so>8074907</so> <eo>8074908</eo> <et>101</et> <mt>22</mt> <or>0</or> <os>0</os> <es>0</es> <lit>79</lit> <lic>2</lic> <sit>0</sit> <sic>0</sic> <gof>0</gof> <vin></vin> <lif>0</lif> <sif>0</sif> <sf>26663000</sf> <ef>26663000</ef> <nce>0</nce> <ct>0</ct> <cf>0</cf> <cd>0</cd> <tgv>0</tgv> <tgt>0</tgt> <tgf>0</tgf> <tgd>0</tgd> <sbt>0</sbt> <ba>1</ba> <els>9</els> <elm>15</elm> <fl1>57</fl1> <fl2>0</fl2> <ht>0</ht> <sg>45</sg> <pfs>0</pfs> <efl>0</efl> <oslt>0</oslt> <osht>0</osht> <orlt>0</orlt> <orht>0</orht> </reportdata> <reportdata> <sd>05/19/2022 17:41:26</sd> <ed>05/19/2022 18:06:08</ed> <so>8074908</so> <eo>8075098</eo> <et>1483</et> <mt>1343</mt> <or>1124</or> <os>0</os> <es>0</es> <lit>140</lit> <lic>2</lic> <sit>0</sit> <sic>0</sic> <gof>3000</gof> <vin></vin> <lif>0</lif> <sif>0</sif> <sf>26663000</sf> <ef>26666000</ef> <nce>0</nce> <ct>0</ct> <cf>0</cf> <cd>0</cd> <tgv>0</tgv> <tgt>0</tgt> <tgf>0</tgf> <tgd>0</tgd> <sbt>0</sbt> <ba>9</ba> <els>7</els> <elm>41.5</elm> <fl1>55</fl1> <fl2>0</fl2> <ht>0</ht> <sg>45</sg> <pfs>0</pfs> <efl>0</efl> <oslt>0</oslt> <osht>0</osht> <orlt>49</orlt> <orht>1075</orht> </reportdata> <reportdata> <sd>05/19/2022 18:06:08</sd> <ed>05/19/2022 18:12:34</ed> <so>8075098</so> <eo>8075131</eo> <et>383</et> <mt>349</mt> <or>163</or> <os>0</os> <es>0</es> <lit>34</lit> <lic>1</lic> <sit>0</sit> <sic>0</sic> <gof>375</gof> <vin></vin> <lif>0</lif> <sif>0</sif> <sf>26666000</sf> <ef>26666375</ef> <nce>0</nce> <ct>0</ct> <cf>0</cf> <cd>0</cd> <tgv>0</tgv> <tgt>0</tgt> <tgf>0</tgf> <tgd>0</tgd> <sbt>0</sbt> <ba>4</ba> <els>9.5</els> <elm>27</elm> <fl1>55</fl1> <fl2>0</fl2> <ht>0</ht> <sg>45</sg> <pfs>0</pfs> <efl>0</efl> <oslt>0</oslt> <osht>0</osht> <orlt>9</orlt> <orht>154</orht> </reportdata> <reportdata> <sd>05/19/2022 18:12:36</sd> <ed>05/19/2022 18:18:04</ed> <so>8075131</so> <eo>8075131</eo> <et>0</et> <mt>0</mt> <or>0</or> <os>0</os> <es>0</es> <lit>0</lit> <lic>0</lic> <sit>0</sit> <sic>0</sic> <gof>0</gof> <vin></vin> <lif>0</lif> <sif>0</sif> <sf>26666375</sf> <ef>26666375</ef> <nce>0</nce> <ct>0</ct> <cf>0</cf> <cd>0</cd> <tgv>0</tgv> <tgt>0</tgt> <tgf>0</tgf> <tgd>0</tgd> <sbt>0</sbt> <ba>0</ba> <els>0</els> <elm>0</elm> <fl1>55</fl1> <fl2>0</fl2> <ht>0</ht> <sg>45</sg> <pfs>0</pfs> <efl>0</efl> <oslt>0</oslt> <osht>0</osht> <orlt>0</orlt> <orht>0</orht> </reportdata> <reportdata> <sd>05/19/2022 18:18:04</sd> <ed>05/19/2022 18:43:20</ed> <so>8075131</so> <eo>8075131</eo> <et>215</et> <mt>4</mt> <or>0</or> <os>0</os> <es>0</es> <lit>211</lit> <lic>1</lic> <sit>0</sit> <sic>0</sic> <gof>0</gof> <vin></vin> <lif>0</lif> <sif>0</sif> <sf>26666375</sf> <ef>26666375</ef> <nce>0</nce> <ct>0</ct> <cf>0</cf> <cd>0</cd> <tgv>0</tgv> <tgt>0</tgt> <tgf>0</tgf> <tgd>0</tgd> <sbt>0</sbt> <ba>0</ba> <els>5.5</els> <elm>16.5</elm> <fl1>57</fl1> <fl2>0</fl2> <ht>0</ht> <sg>45</sg> <pfs>0</pfs> <efl>0</efl> <oslt>0</oslt> <osht>0</osht> <orlt>0</orlt> <orht>0</orht> </reportdata> <reportdata> <sd>05/19/2022 18:43:20</sd> <ed>05/19/2022 18:46:54</ed> <so>8075131</so> <eo>8075142</eo> <et>213</et> <mt>213</mt> <or>64</or> <os>0</os> <es>0</es> <lit>0</lit> <lic>0</lic> <sit>0</sit> <sic>0</sic> <gof>375</gof> <vin></vin> <lif>0</lif> <sif>0</sif> <sf>26666375</sf> <ef>26666750</ef> <nce>0</nce> <ct>0</ct> <cf>0</cf> <cd>0</cd> <tgv>0</tgv> <tgt>0</tgt> <tgf>0</tgf> <tgd>0</tgd> <sbt>0</sbt> <ba>7</ba> <els>0</els> <elm>21</elm> <fl1>58</fl1> <fl2>0</fl2> <ht>0</ht> <sg>45</sg> <pfs>0</pfs> <efl>0</efl> <oslt>0</oslt> <osht>0</osht> <orlt>7</orlt> <orht>57</orht> </reportdata> <reportdata> <sd>05/19/2022 18:46:54</sd> <ed>05/19/2022 19:06:08</ed> <so>8075142</so> <eo>8075239</eo> <et>1155</et> <mt>987</mt> <or>645</or> <os>0</os> <es>0</es> <lit>168</lit> <lic>9</lic> <sit>0</sit> <sic>0</sic> <gof>1250</gof> <vin></vin> <lif>0</lif> <sif>0</sif> <sf>26666750</sf> <ef>26668000</ef> <nce>0</nce> <ct>0</ct> <cf>0</cf> <cd>0</cd> <tgv>0</tgv> <tgt>0</tgt> <tgf>0</tgf> <tgd>0</tgd> <sbt>0</sbt> <ba>16</ba> <els>7.5</els> <elm>29</elm> <fl1>54</fl1> <fl2>0</fl2> <ht>0</ht> <sg>45</sg> <pfs>0</pfs> <efl>0</efl> <oslt>0</oslt> <osht>0</osht> <orlt>20</orlt> <orht>625</orht> </reportdata> </pxreport> <pxreport> <vehicle_number>6460</vehicle_number> <px_params> <long_idle_thresh>420</long_idle_thresh> <rpm_thresh>16</rpm_thresh> <over_speed>73</over_speed> <excess_speed>80</excess_speed> </px_params> <reportdata> <sd>05/19/2022 13:50:22</sd> <ed>05/19/2022 13:58:28</ed> <so>4185526</so> <eo>4185526</eo> <et>33</et> <mt>6</mt> <or>0</or> <os>0</os> <es>0</es> <lit>0</lit> <lic>0</lic> <sit>27</sit> <sic>2</sic> <gof>0</gof> <vin>00000000000000000</vin> <lif>0</lif> <sif>0</sif> <sf>13375750</sf> <ef>13375750</ef> <nce>0</nce> <ct>0</ct> <cf>0</cf> <cd>0</cd> <tgv>0</tgv> <tgt>0</tgt> <tgf>0</tgf> <tgd>0</tgd> <sbt>0</sbt> <ba>1</ba> <els>12.5</els> <elm>22.5</elm> <fl1>81</fl1> <fl2>0</fl2> <ht>0</ht> <sg>60</sg> <pfs>0</pfs> <efl>0</efl> <oslt>0</oslt> <osht>0</osht> <orlt>0</orlt> <orht>0</orht> </reportdata> <reportdata> <sd>05/19/2022 13:58:28</sd> <ed>05/19/2022 13:59:56</ed> <so>4185526</so> <eo>4185528</eo> <et>87</et> <mt>81</mt> <or>1</or> <os>0</os> <es>0</es> <lit>0</lit> <lic>0</lic> <sit>6</sit> <sic>1</sic> <gof>125</gof> <vin>00000000000000000</vin> <lif>0</lif> <sif>0</sif> <sf>13375750</sf> <ef>13375875</ef> <nce>0</nce> <ct>0</ct> <cf>0</cf> <cd>0</cd> <tgv>0</tgv> <tgt>0</tgt> <tgf>0</tgf> <tgd>0</tgd> <sbt>0</sbt> <ba>1</ba> <els>13</els> <elm>29</elm> <fl1>80</fl1> <fl2>0</fl2> <ht>0</ht> <sg>60</sg> <pfs>0</pfs> <efl>0</efl> <oslt>0</oslt> <osht>0</osht> <orlt>0</orlt> <orht>1</orht> </reportdata> </pxreport> </pnet_get_performx_data_packet>```
React MUI - Styling confliction using core and lab components in same app
I recently added in a Lab component (Alert) and it seems like that component brings along with it some #material-ui/styles that conflict with the existing styles from the Core components. I get an error message about the duplicate styles.
I've looked at the documentation for the error message and tried the suggested remedies: npm dedupe, but no luck.
In the two images you can see that the existing styling (ex. the header color) changes while the Alert is being shown at the bottom, and goes away when the Alert is dismissed.
I understand the error is that the Alert requires specific styling to display green on success, red on error, etc. but I'm not sure how to combine that with the existing styling.
I am not using Webpack, this is a single application. I have not defined any custom material-ui styling.
Before alert - regular styling
During alert - confliction of styling
EDIT
package.json
{
"name": "Safety_Dashboard",
"version": "0.0.1",
"private": true,
"scripts": {
"dev": "cubejs-server"
},
"template": "docker",
"templateVersion": "0.27.53",
"devDependencies": {
"#cubejs-backend/postgres-driver": "^0.27.53",
"#cubejs-backend/server": "^0.27.53",
"#types/uuid": "^8.3.1",
"#typescript-eslint/parser": "^4.28.5",
"react-router-dom": "^5.3.0",
"typescript": "^4.3.5"
},
"dependencies": {
"#material-ui/core": "^4.12.2",
"#material-ui/data-grid": "^4.0.0-alpha.34",
"#material-ui/lab": "^4.0.0-alpha.60",
"#material-ui/pickers": "^3.3.10",
"#material-ui/x-grid-data-generator": "^4.0.0-alpha.34",
"#mui/icons-material": "^5.1.0",
"#nivo/core": "^0.73.0",
"#nivo/line": "^0.73.0",
"#visx/gradient": "^1.7.0",
"#visx/group": "^1.17.1",
"#visx/mock-data": "^1.7.0",
"#visx/react-spring": "^1.17.1",
"#visx/scale": "^1.14.0",
"#visx/shape": "^1.17.1",
"#visx/visx": "^1.18.1",
"codemirror": "^5.63.3",
"cytoscape-graphml": "^1.0.6",
"d3": "^7.0.0",
"js-convert-case": "^4.1.2",
"react-perfect-scrollbar": "^1.5.8",
"react-spring": "^9.2.4",
"xlsx": "^0.17.4"
}
}
package-lock.json (truncated)
"#material-ui/core": {
"version": "4.12.2",
"resolved": "https://registry.npmjs.org/#material-ui/core/-/core-4.12.2.tgz",
"integrity": "sha512-Q1npB8V73IC+eV2X6as+g71MpEGQwqKHUI2iujY62npk35V8nMx/bUXAHjv5kKG1BZ8s8XUWoG6s/VkjYPjjQA==",
"requires": {
"#babel/runtime": "^7.4.4",
"#material-ui/styles": "^4.11.4",
"#material-ui/system": "^4.12.1",
"#material-ui/types": "5.1.0",
"#material-ui/utils": "^4.11.2",
"#types/react-transition-group": "^4.2.0",
"clsx": "^1.0.4",
"hoist-non-react-statics": "^3.3.2",
"popper.js": "1.16.1-lts",
"prop-types": "^15.7.2",
"react-is": "^16.8.0 || ^17.0.0",
"react-transition-group": "^4.4.0"
},
"dependencies": {
"#material-ui/utils": {
"version": "4.11.2",
"resolved": "https://registry.npmjs.org/#material-ui/utils/-/utils-4.11.2.tgz",
"integrity": "sha512-Uul8w38u+PICe2Fg2pDKCaIG7kOyhowZ9vjiC1FsVwPABTW8vPPKfF6OvxRq3IiBaI1faOJmgdvMG7rMJARBhA==",
"requires": {
"#babel/runtime": "^7.4.4",
"prop-types": "^15.7.2",
"react-is": "^16.8.0 || ^17.0.0"
}
}
}
},
"#material-ui/lab": {
"version": "4.0.0-alpha.60",
"resolved": "https://registry.npmjs.org/#material-ui/lab/-/lab-4.0.0-alpha.60.tgz",
"integrity": "sha512-fadlYsPJF+0fx2lRuyqAuJj7hAS1tLDdIEEdov5jlrpb5pp4b+mRDUqQTUxi4inRZHS1bEXpU8QWUhO6xX88aA==",
"requires": {
"#babel/runtime": "^7.4.4",
"#material-ui/utils": "^4.11.2",
"clsx": "^1.0.4",
"prop-types": "^15.7.2",
"react-is": "^16.8.0 || ^17.0.0"
},
"dependencies": {
"#material-ui/utils": {
"version": "4.11.2",
"resolved": "https://registry.npmjs.org/#material-ui/utils/-/utils-4.11.2.tgz",
"integrity": "sha512-Uul8w38u+PICe2Fg2pDKCaIG7kOyhowZ9vjiC1FsVwPABTW8vPPKfF6OvxRq3IiBaI1faOJmgdvMG7rMJARBhA==",
"requires": {
"#babel/runtime": "^7.4.4",
"prop-types": "^15.7.2",
"react-is": "^16.8.0 || ^17.0.0"
}
}
}
},
"#material-ui/styles": {
"version": "4.11.4",
"resolved": "https://registry.npmjs.org/#material-ui/styles/-/styles-4.11.4.tgz",
"integrity": "sha512-KNTIZcnj/zprG5LW0Sao7zw+yG3O35pviHzejMdcSGCdWbiO8qzRgOYL8JAxAsWBKOKYwVZxXtHWaB5T2Kvxew==",
"requires": {
"#babel/runtime": "^7.4.4",
"#emotion/hash": "^0.8.0",
"#material-ui/types": "5.1.0",
"#material-ui/utils": "^4.11.2",
"clsx": "^1.0.4",
"csstype": "^2.5.2",
"hoist-non-react-statics": "^3.3.2",
"jss": "^10.5.1",
"jss-plugin-camel-case": "^10.5.1",
"jss-plugin-default-unit": "^10.5.1",
"jss-plugin-global": "^10.5.1",
"jss-plugin-nested": "^10.5.1",
"jss-plugin-props-sort": "^10.5.1",
"jss-plugin-rule-value-function": "^10.5.1",
"jss-plugin-vendor-prefixer": "^10.5.1",
"prop-types": "^15.7.2"
},
EDIT 2
Note: The tool I'm working on is a prototype, so I went ahead and just built a workaround component for myself that copies the styles from the troublesome Alert component. Here's the code I used in case anybody in the future wants to do something similar.
PopupAlert.tsx
import React from 'react';
import { Paper, Snackbar, Typography } from '#material-ui/core';
// import Alert, { Color } from '#material-ui/lab/Alert';
import { Color } from '#material-ui/lab/Alert';
import styles from './PopupAlert.module.css';
import {
CheckCircleOutline,
ErrorOutline,
InfoOutlined,
WarningOutlined,
} from '#material-ui/icons';
import { Variant } from '#material-ui/core/styles/createTypography';
interface PopupAlertProps {
open: boolean,
message: string,
type: Color,
autoHideDuration?: number,
onClose?: () => void
}
const PopupAlert:React.FC<PopupAlertProps> = ({open, message, type, autoHideDuration=6000, onClose}) => {
const [myOpen, setMyOpen] = React.useState<boolean>(open);
React.useEffect(() => {
setMyOpen(open);
}, [open])
function handleOnClose() {
setMyOpen(false);
if(onClose) onClose()
}
// NOTE: As of writing this, the Alert material-ui component in the lab package conflicts with
// stylings from components in the core package. So, I went ahead and copied over the styles from
// the Alert component manually. If they fix this, this component can be pretty much simplified
// into the one-liner commented out at the bottom "<Alert severity={type} />"
// Relevant post: https://stackoverflow.com/questions/70628413/react-mui-styling-confliction-using-core-and-lab-components-in-same-app
const classes = [styles.paper];
type === "success" && classes.push(styles.successPaper);
type === "info" && classes.push(styles.infoPaper);
type === "warning" && classes.push(styles.warningPaper);
type === "error" && classes.push(styles.errorPaper);
const vertical = "top";
const horizontal = "center";
const typographVariant: Variant = "h6";
return (
<Snackbar
anchorOrigin={{ vertical, horizontal }}
open={myOpen}
onClose={handleOnClose}
autoHideDuration={autoHideDuration}
>
<>
{ type === "success" &&
<Paper className={classes.join(' ')} elevation={0}>
<div className={styles.iconWrapper}>
<CheckCircleOutline className={styles.successIcon} />
</div>
<div className={styles.errorMessage}>
<Typography variant={typographVariant}>{message}</Typography>
</div>
</Paper>
}
{ type === "info" &&
<Paper className={classes.join(' ')} elevation={0}>
<div className={styles.iconWrapper}>
<InfoOutlined className={styles.infoIcon} />
</div>
<div className={styles.errorMessage}>
<Typography variant={typographVariant}>{message}</Typography>
</div>
</Paper>
}
{ type === "warning" &&
<Paper className={classes.join(' ')} elevation={0}>
<div className={styles.iconWrapper}>
<WarningOutlined className={styles.warningIcon} />
</div>
<div className={styles.errorMessage}>
<Typography variant={typographVariant}>{message}</Typography>
</div>
</Paper>
}
{ type === "error" &&
<Paper className={classes.join(' ')} elevation={0}>
<div className={styles.iconWrapper}>
<ErrorOutline className={styles.errorIcon} />
</div>
<div className={styles.errorMessage}>
<Typography variant={typographVariant}>{message}</Typography>
</div>
</Paper>
}
{/* <Alert severity={type} /> */}
</>
</Snackbar>
)
}
export default PopupAlert
PopupAlert.module.css
.paper {
display: grid;
grid-template-columns: auto 1fr;
column-gap: 10px;
padding: 6px 16px;
}
.iconWrapper {
margin: auto 0;
}
.successPaper {
color: rgb(30, 70, 32) !important;
background-color: rgb(237, 247, 237) !important;
}
.successIcon {
color: #4caf50 !important;
}
.infoPaper {
color: rgb(13, 60, 97) !important;
background-color: rgb(232, 244, 253) !important;
}
.infoIcon {
color: #2196f3 !important;
}
.warningPaper {
color: rgb(102, 60, 0) !important;
background-color: rgb(255, 244, 229) !important;
}
.warningIcon {
color: #ff9800 !important;
}
.errorPaper {
color: rgb(97, 26, 21) !important;
background-color: rgb(253, 236, 234) !important;
}
.errorIcon {
color: #f44336 !important;
}
Tailwind Transition Backdrop Blur
Im using Tailwind, along with their HeadlessUI for Transitions on a modal
https://www.npmjs.com/package/#headlessui/react#transition
<Transition
show={show}
enter="transition ease-out duration-300"
enterFrom="opacity-0 "
enterTo="opacity-100"
leave="transition ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-gray-900 bg-opacity-75 backdrop-filter backdrop-blur-sm" aria-hidden="true" />
</Transition>
The above works, however the backdrop filter only applies once the Transition component has completed.
Does anyone know how I can get this to work so that the transition also applies to the backdrop filter?
Add an as={Fragment} attribute to Transition
import { Fragment } from "react";
<Transition
as={Fragment}
show={show}
enter="transition ease-out duration-300"
enterFrom="opacity-0 "
enterTo="opacity-100"
leave="transition ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
TypeError: undefined is not an object (evaluating 'state.routes.find')
using createMaterialBottomTabNavigator,
it has Component Exception at Tab.Navigator
and message is TypeError: undefined is not an object (evaluating 'state.routes.find')
The part that causes the component exception is #react-navigation/routers/src/TabRouter.tsx.
But I couldn't understand even if I looked at this.
package.json
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"#react-native-community/datetimepicker": "3.0.0",
"#react-native-community/hooks": "^2.6.0",
"#react-native-community/masked-view": "0.1.10",
"#react-native-community/picker": "^1.8.0",
"#react-native-firebase/admob": "^7.6.9",
"#react-native-firebase/app": "^8.4.6",
"#react-navigation/bottom-tabs": "^5.10.6",
"#react-navigation/material-bottom-tabs": "^5.3.6",
"#react-navigation/material-top-tabs": "^5.3.6",
"#react-navigation/native": "^5.8.6",
"#react-navigation/stack": "^5.12.3",
"age-calculator": "^1.0.0",
"expo": "~39.0.2",
"expo-ads-admob": "~8.3.0",
"expo-constants": "~9.2.0",
"expo-file-system": "~9.2.0",
"expo-google-app-auth": "^8.1.3",
"expo-google-sign-in": "~8.3.0",
"expo-image-manipulator": "~8.3.0",
"expo-image-picker": "~9.1.0",
"expo-linking": "^1.0.4",
"expo-localization": "~9.0.0",
"expo-media-library": "~9.2.1",
"expo-notifications": "~0.7.2",
"expo-permissions": "~9.3.0",
"expo-status-bar": "~1.0.2",
"expo-video-thumbnails": "~4.3.0",
"firebase": "7.9.0",
"i18n-js": "^3.7.1",
"moment": "^2.29.1",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-39.0.2.tar.gz",
"react-native-dropdown-picker": "^3.7.0",
"react-native-fs": "^2.16.6",
"react-native-gesture-handler": "~1.7.0",
"react-native-modal-selector": "^2.0.3",
"react-native-paper": "^4.3.1",
"react-native-reanimated": "~1.13.0",
"react-native-safe-area-context": "3.1.4",
"react-native-screens": "~2.10.1",
"react-native-tab-view": "^2.15.1",
"react-native-web": "~0.13.12",
"sentry-expo": "^3.0.2"
},
"devDependencies": {
"#babel/core": "~7.9.0"
},
"private": true
}
App.js
const Stack = createStackNavigator();
export default function App() {
return (
<NavigationContainer>
{/* <StatusBar barStyle="light-content"/> */}
{Platform.OS === 'ios'
? <StatusBar barStyle="dark-content" />
: <StatusBar barStyle="light-content" />}
<Stack.Navigator initialRouteName="Loading"
screenOptions={{ headerShown: false }}
>
<Stack.Screen name="Loading" component={LoadingScreen} />
<Stack.Screen name="Login" component={LoginScreen} />
<Stack.Screen name="Main" component={MainScreen}
options={{
headerShown: true,
headerTitleAlign: "center",
headerTitleStyle: {
color: "#5887f9"
}
}}
/>
<Stack.Screen name="PushInfo" component={PushInfoScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
MainScreen.js
const Tab = createMaterialBottomTabNavigator();
export function MainScreen({ navigation, route }) {
return (
<>
<Tab.Navigator
initialRouteName="UserList"
labeled={false}
inactiveColor="#b0caff"
activeColor="#5887f9"
barStyle={{ backgroundColor: "white" }}
>
<Tab.Screen name="UserListComponent" component={UserListComponent}
initialParams={{
...route
}}
options={{
tabBarIcon: ({ color }) => (
<FontAwesome5 name="smile" size={24} color={color} />
)
}} />
<Tab.Screen name="Friends" component={FriendsComponent}
options={{
tabBarIcon: ({ color }) => (
<MaterialCommunityIcons name="account-group" size={24} color={color} />
)
}} />
<Tab.Screen name="Chat" component={ChatComponent}
options={{
tabBarIcon: ({ color }) => (
<MaterialCommunityIcons name="chat-outline" size={24} color={color} />
)
}} />
<Tab.Screen name="Profile" component={ProfileScreen}
options={{
tabBarIcon: ({ color }) => (
<MaterialCommunityIcons name="account" size={24} color={color} />
)
}} />
<Tab.Screen name="Setting" component={SettingScreen}
initialParams={{
uid: uid
}}
options={{
tabBarIcon: ({ color }) => (
<MaterialCommunityIcons name="settings" size={24} color={color} />
)
}} />
</Tab.Navigator>
<View style={{ width: screenWidth, backgroundColor: "white" }}>
{Platform.OS === 'ios'
? <AdMobBanner
bannerSize="smartBannerLandscape"
adUnitID={adUnitID} // Test ID, Replace with your-admob-unit-id
servePersonalizedAds={true}// true or false
/>
:
<AdMobBanner
bannerSize="smartBannerLandscape"
adUnitID={adUnitID} // Test ID, Replace with your-admob-unit-id
servePersonalizedAds={true}// true or false
/>
}
</View>
</>
);
}
I had a similar issue. After 12 hours of debugging, my issue was one of the screen components had a param named state. This param was overriding the actual route state causing the issue.
Before
navigation.navigate("RouteName", {
state: newState,
...otherParams
})
// In Screen Component
route.params.state
After
navigation.navigate("RouteName", {
customState: newState,
...otherParams
})
// In Screen Component
route.params.customState
This change seems to have taken place after version 5.12.5 of #react-navigation/core. So you might hit the bug when you are upgrading the packages as part of expo upgrade.
Material UI - Drawer does not open
I have a react app with Material-UI 1.2.
Although the state is properly updated, the drawer does not open close.
I have also correctly applied the bind on onLeftIconButtonTouchTap.
Here is my implementation of the TemporaryDrawer :
// .. imports
const styles = {
list: {
width: 250,
},
fullList: {
width: 'auto',
},
menuButton: {
marginLeft: 12,
marginRight: 36,
},
};
class TemporaryDrawer extends React.Component {
render() {
const { classes, toggleDrawer, isOpen } = this.props;
const sideList = (
<div className={classes.list}>
<List>
<ListItem button>
<ListItemIcon>
<InboxIcon />
</ListItemIcon>
<ListItemText primary="Inbox" />
</ListItem>
</List>
</div>
);
console.log(' isOpen ' + isOpen);
return (
<div>
<IconButton className={classes.menuButton} color="inherit" onClick={toggleDrawer}>
<MenuIcon />
</IconButton>
<Drawer open={isOpen} onClose={toggleDrawer}>
<div
tabIndex={0}
role="button"
onClick={toggleDrawer}
onKeyDown={toggleDrawer}
>
{sideList}
</div>
</Drawer>
</div>
);
}
}
TemporaryDrawer.propTypes = {
classes: PropTypes.object.isRequired
};
export default withStyles(styles)(TemporaryDrawer);
used in this MenuAppBar.js
// ... imports
const styles = {
root: {
flexGrow: 1,
},
flex: {
flex: 1,
},
menuButton: {
marginLeft: -12,
marginRight: 20,
},
};
class MenuAppBar extends React.Component {
state = {
auth: true,
drawerOpen: false,
};
handleMenu = () => {
this.setState({ drawerOpen: !this.state.drawerOpen });
};
render() {
const { classes } = this.props;
const { drawerOpen } = this.state;
console.log(' state ' + this.state.drawerOpen);
return (
<div className={classes.root}>
<AppBar position="static" onLeftIconButtonTouchTap={this.handleMenu.bind(this)}>
<Toolbar>
<TemporaryDrawer isOpen={drawerOpen} toggleDrawer={this.handleMenu} />
</Toolbar>
</AppBar>
</div>
);
}
}
MenuAppBar.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(MenuAppBar);
package.json
{
"name": "find-swim",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/codemod": "^1.1.0",
"#material-ui/core": "^1.2.0",
"#material-ui/icons": "^1.1.0",
"firebase": "^4.8.0",
"material-ui": "^0.19.4",
"material-ui-autocomplete-google-places": "^2.2.0",
"material-ui-places": "^1.1.7",
"mui-places-autocomplete": "^2.0.0",
"react": "^16.0.0",
"react-dom": "^16.0.0",
"react-ga": "^2.4.1",
"react-google-button": "^0.4.0",
"react-google-maps": "^9.2.2",
"react-places-autocomplete": "^5.4.3",
"react-redux": "^5.0.6",
"react-redux-firebase": "^2.0.0-beta.16",
"react-redux-form": "^1.16.5",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"react-scripts": "^1.0.16",
"react-tap-event-plugin": "^3.0.2",
"recompose": "^0.26.0",
"redux": "^3.7.2",
"redux-devtools": "^3.4.0",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.2.0"
},
"scripts": {
"start": "react-scripts start",
"build": "set GENERATE_SOURCEMAP=false && react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"deploy": "firebase deploy"
},
"devDependencies": {
"redux-devtools-extension": "^2.13.2"
}
}
it s crazy but the issue was with the combination: "#material-ui/core": "^1.2.0", "react": "^16.0.0", "react-dom": "^16.0.0", As soon as I ve updated my dependencies to those of Ramil in his codesandbox, it worked. "#material-ui/core": "1.2.3", "react": "^16.3.0", "react-dom": "^16.3.0", I hope this helps someone..
I don't know where you got this onLeftIconButtonTouchTap={this.handleMenu.bind(this)}
But what you can do is:
<AppBar position="static">
<IconButton
className={classes.menuButton}
color="inherit"
aria-label="Menu"
onClick={this.handleMenu.bind(this)}
>
<MenuIcon />
</IconButton>
<Toolbar>
<TemporaryDrawer
isOpen={drawerOpen}
toggleDrawer={this.handleMenu}
/>
</Toolbar>
</AppBar>
Edit: I tried your code in sandbox. Apparently, nothing is wrong with your code. https://codesandbox.io/s/pk9921kkw0