Material UI + YUP + React Hook Forms + FieldArray - reactjs

I´m pretty new to react-hook-form but I like it so far. I´ve managed some scenarios with simple validation together with material-ui and its working pretty well.
Right now I´m having a problem where I´m totally out of Ideas and I was hoping that somebody can help me out there.
I try to explain the problem as best as I can.
I have a global number which refelects a users membership in teams. This number represents the maximum amount of memberships of a given user. A user can then be assigned to teams. The data comes from a database. It is now possible to change the proportion of a team membership a user belongs to, but together they cannot exceed the global limit of the current user.
I´m currently totally out of ideas. The validation should check if the teamValues together do not exceed the global total number. I tried to use useFieldArray for that example which works pretty well but I have no idea how I should build up the component and the validation.
I provided a code sandbox with a rudimentary example which reflects what I currently have. Maybe someone can help me out here! Maybe useFieldArray is not the best option here but I have no idea what I can or should use instead :-).
Thanks a lot!!
Link to codesandbox:
https://codesandbox.io/s/lingering-mountain-2is19?file=/src/App.js

Related

How to control the aligning in highchartjs Venn diagram, with React

I'm using highcharts, the Venn module (highcharts/modules/venn.js), and using the highcharts-react-official package to support it in React, the need to show the Venn diagram circles as shown here:
This is what I have now:
However, I tried to figure out away to do this using legand.layout but did not manage to modify the alignment to get the that results, here's what I get.
Any Idea how to do so, if providing the code for that would help more, I'll be happy to share, but I thing either there's an API that I'm no able to find, or its not supported and I have either to find another solution or find a workaround
Really appreciate your time & help

React Form with subtotals

I worked wth AG-Grid but not sure we can achieve a design like following. I tried but no luck.
Could someone help me to develop a form with subtotals? I know we have a Pivot library but we cannot achieve a design like the following. Could someone please help whether any library exists or some basic idea of how to develop a form like this?
Please note we need filters and sorting, as AG-Grid provides it by default on top.
Thanks
I would suggest you use Materias-ui Tables. They are incredibly versatile and easy to use because of good documentation and examples on the official website.
Therefore, I can see that your desired result can be achieved with Collapsible table and Sorting & selecting. Although I suggest you read the whole page.
https://material-ui.com/components/tables/#collapsible-table

Newby trying to link database single value to onclick button with some conditions

I'm trying to make a deck builder for a game (cardsandcastle), I will show every card (each one will be a button) that will change a value of how many cards (database) of that one will be on the deck when clicked (if/switch condition with radio button options).
What I'm asking is how or what code needs to put on the click event to set that value on my database (have searched for something similar, but only found big codes that cand identify which code belongs to database interaction)
Thanks for the clarification. That code is simple javascript, so it might be worth asking your question with a javascript tag.
I was unaware of this, but apparently Wix provides a development platform called Corvid. Neither Wix nor Corvid are tags that can be used on Stack Overflow, but the platform makes use of features like node.js, which is well represented here.
Probably the best place for you to start is in the Tutorials and Examples provided by Wix. Check out:
Creating a to-do list
Creating a Form for Editing Data in a Database Collection
Displaying Database Content on a Regular Page
I hope this helps!

React Table: Best Practices, Suggestions

I've been tasked with creating a dynamic table for our UI. We decided to use the tech stack of React/Redux and are trying to figure out the best way to develop:
Questions:
1) What, in your experience, has been the best tool to create a dynamic table that works well with action creators and user interactions?
a - Issue: Being able to sort and search without creating massive code
b - Issue: Being able to edit in row and delete in row
2) I've been playing with Material UI, Semantic UI, and others. Any thoughts on which one is easiest to customize
As always appreciate the help, sorry for the noob questions. I've been trying to code in Material UI, but it's a bit difficult to manage since I don't have much experience with it.
Did you try RC-Table? If not, I would recommend to give it a shot. RC components are the primary building blocks using which the entire ANT lib for React was built. RC components are majorly focused on various functional logic which is extended by ANT components. You can either try to use core RC-Table itself or ANT-Table to find if it eases your efforts. In our development, we consumed a few RC-blocks and it solved lots of our purpose. This has
Sorting without massive code (with their examples I believe)
Able to Edit cells and Delete rows.
I don't believe there exists a library that solves all purposes with all ease. Everyone has its own pros/cons. But you can give this RC/ANT a try if it would solve your needs. Nevertheless, referring RC blocks at any stage of REACT component development is worth a read.

Salesforce JavaScript button in Lightning

We have some buttons on our contact page that via javascript update a handful of hidden fields on the object. We are moving to the lightning UI and I understand these are not supported, but am struggling to decipher the documentation on the best replacement. Can someone help point me in the right direction.
Requirement is to update several fields on the contact that is currently on the screen... nothing more, other than we don't use chatter so nothing with the feed please.
The Winter 17 release included the ability to create Actions based on Lightning Components. This is most likely the way you will want to go to convert your existing JavaScript buttons. I would suggest you check out this new Trailhead that was just released which is specifically about Lightning Alternatives to JavaScript buttons.
I am also working on a course for Pluralsight about Lightning development and this is one of the areas I plan on covering since it is so applicable to a lot of people right now. I am not sure if you realize this but by next year, any JavaScript buttons you have will no longer work (even in classic). It is part of a 3 phased approach that Salesforce is implementing to phase them out for security reasons.
Good luck in your conversion. I wish I could say it will be easy, but at least now it is possible.
Best.
Sara

Resources