harvestprofit / harvest-profit-ui Goto Github PK

On change, it should pass the entire option object as a second value. That way we can access additional metadata on the option on change. Also this should be passed to custom components as well.

Little bit difficult as the modal uses react's portals, so the render function doesn't return JSX as the JSX is inserted into a different part of the DOM.

So for TableGroup, we should include a method that counts the children under it so that it can calculate the appropriate flex size. For example currently if you have a table group with size medium, it applies a flex size of 4 (I think). In order to get the children to be sized correctly when the group is not being used (so basically the children should behave as if they are not in a group when the screen is big enough), the children would have to be size 2 each or something. Maybe we can actually calculate the sizes and apply the correct flex sizes based on child count and size. So 2 medium children would need a table group of size 8.

https://reactjs.org/docs/react-api.html#reactchildrencount

It will add the following components:

• Row - Aligns contents in a row with some alignment options
• Column - Aligns contents in a column with some alignment options
• Form - The form wrapper components
• FormLabel - A label for a form
• FormTest - Text that mimics the spacing and size of a form input.
• Divider - Divides a page (could use some additional styling)
• Error - Adds a Font awesome icon and some red text

There is also the FormAction component that should probably be extracted into something like Action. Then that should be able to be styled differently. So lets hold back on that.

Right now tabs don't really do anything.

We should probably change that. One of the examples we could take inspiration from is the concept of TabContent and TabPane from the reactstrap project.

It works by using context, which allows us to add a visible or active css class based on the state of the parent.

All tab content should be rendered on the page, even if the tab isn't visible. No rendering null.

We currently don't have any tests for our FilterDropdown. We should probably have some of those.

For examples on how to write tests for that kind of component, see both the InputString tests and the Dropdown tests

All passing the className prop to the Modal component. It should add the provided classes to the modalClasses.

We don't have a component for rendering HTML tables.

We should probably follow the same structure as reactstrap

Something simple will do! We have a folder that this code can go in. We don't need to keep the TableContainer component.

All components that accept something like className should also accept a style attribute so that we can apply custom styles as we see fit.

@humphreyja wrote a great filter dropdown react component we should add to this repo

If a dropdown has a selected id that is not part of the available options, it should update to null. Maybe have a prop to disable this or set a default as well.

This affects all dropdowns. The main use case here is when you have a form in the state and the options are generated from the props. If one of the options were deleted and you tried to save the form, it would throw an error.

The "Clear" button on the filter dropdowns do not work very reliably. This is because on click, it calls "triggerChange" which maps to "handleClick". HandleClick is meant to receive a single value from an option. Instead, we should be supplying the "endComponent" with "setValue" so that it can set the value directly.

This makes sure that if/when the row breaks out of the table (it does that on smaller screens if it has enough columns), the cells still have a background.

Should have the ability to switch which side the asc/desc arrows are on in relation to the header text

Right now we use babel to compile our code down in production builds, which isn't great for debugging.

We should probably use webpack, or another build system that supports source map generation, with the added bonus of compiling our code down to earlier versions of ECMAscript.

Swap value to id for values and onClick to onChange.

We should be able to just use 'PureComponent' for most of this. But any component that has an object as a prop will need to be put through a better function. NOTE: Lodash's isEqual function will work for all cases except when it needs to check functions. Functions are checked using instances. So for example this will always be flagged as Not Equal.

const filters = [
{
    onChange: (value) => {//do something}
}
]

// ... in shouldComponentUpdate of a child component

_.isEqual(this.props, nextProps)
// => false

That's because the instance of that function is being changed every time. To combat this, I would suggest we use the below function to basically ignore functions in the comparison as they should really ever change. We could provide an additional Prop to disable the checking as well. This would be helpful so that our inputs don't need to be reconciled every time there is a change.

const propsAreEqual = (props, nextProps) => {
    const propChecker = (objectVal, otherVal) => {
      if (typeof objectVal === 'function' && typeof otherVal === 'function') {
        return true;
      }
      return undefined;
    };

    return _.isEqualWith(props, nextProps, propChecker);
  }