Material UI

[ukrbublik]

• MaterialTextWidget

• MaterialDateWidget

• MaterialDateTimeWidget

• MaterialTimeWidget

• MaterialSelectWidget

• MaterialNumberWidget

• MaterialSliderWidget

• MaterialRangeWidget

• MaterialBooleanWidget

• MaterialMultiSelectWidget

• MaterialFieldSelect

• MaterialButton

• MaterialButtonGroup

• MaterialConjs

• MaterialValueSources

• MaterialConfirm

• MaterialProvider

---

• Number Between: "Warning: value prop on input should not be null. Consider using an empty string to clear the component or undefined for uncontrolled components."
• Fix vertical position of "from"/"to" labels in Number Between
• Warning of nullish 2nd value source for Number Between: "Material-UI: You have provided an out-of-range value null for the select component. The available values are value, field, func."
• Try with showLabels: true
• ? MaterialFieldSelect - use renderValue as in MaterialSelect, instead of first item "Select field.." in field list
• TS def
• Update docs, readme (don't forget to mention al needed MUI packages), bump version

[megantaylor]

so excited for this!

[megantaylor]

hey, my team is really excited for this feature and i was wondering if you'd like some help finishing it?

[ukrbublik]

Yeah, go for it )
If you want to work in parallel with me, take some widgets and write that list

[megantaylor]

any thoughts on using https://github.com/jonatanklosko/material-ui-confirm for the Material Confirm widget instead of DIY?

[ukrbublik]

any thoughts on using https://github.com/jonatanklosko/material-ui-confirm for the Material Confirm widget instead of DIY?

I think we can use it. If you want to submit PR, welcome :)

[megantaylor]

i spent some time trying to get the material ui confirm thing to work, and just couldnt figure out how to make renderConfirm render a component because right now its just a click handler. any thoughts?

[megantaylor]

• Fix vertical position of "from"/"to" labels in Date Between

[megantaylor]

Fix vertical position of "from"/"to" labels in Date Between

can i just flexbox the container? not sure how else to get the vertical alignment to work, unless there's a way to target the widget sep class only for mui?

[ukrbublik]

If it just works and not breaks other skins (antd), yes.

If you need to distinguish skin in CSS, you can render root div wrapper with appropriate class like "mui" here I guess: https://github.com/ukrbublik/react-awesome-query-builder/pull/299/files#diff-35a4e08d4dd32566534b002381a4c2611a87a4a447692fc4b632e0f95093dd18R41
(in Provider)
and then use rule like '.mui .widget--sep'

[ukrbublik]

@megantaylor Flex approach breaks styles with showLabels: true in config.
Can you please try another approach with MUI-only class?

[megantaylor]

@megantaylor Flex approach breaks styles with showLabels: true in config.
Can you please try another approach with MUI-only class?

yup, i can do that today

[megantaylor]

pushed css solution for from/to labels and value src button alignment for number/date + slider/range

[ukrbublik]

Changed styles a bit. I think now looks good

[megantaylor]

anything else i can help with?

[ukrbublik]

3 checks left (1st is optional). If you want to finish, I'd appreciate

[megantaylor]

3 checks left (1st is optional). If you want to finish, I'd appreciate

those 3 tasks are unclear to me, can you be more specific about what needs to be done?

[ukrbublik]

As for 1st one, compare value select for field "Color" and field select for new rule.
They render placeholder in different ways.
For field select there is first disabled item "Select field" which renders in items list, which is not very nice.

In this commit
for MaterialSelect I removed placeholder item

{!hasValue && <MenuItem disabled value={""}>{placeholder}</MenuItem>}

and used renderValue instead

  const renderValue = (selectedValue) => {
      if (!readonly && !selectedValue)
        return placeholder;
      return mapListValues(listValues, ({title, value}) => (value === selectedValue ? title : null)).filter(v => v !== null).shift();
    };

So now placeholder will not be rendered as first disabled item "Select value".

I would like to use such approach in MaterialFieldSelect

In renderValue you need to convert selectedValue (which is path of selected field) to field's label.

I'll do rest 2 tasks and going to publish MUI support

[ukrbublik]

@megantaylor Thanks for the help.
I think I can release this PR.
Updated readme and config docs
Wdyt?

[megantaylor]

do iiiiiit!!!!!

[siamak-haschemi]

Fantastic guys! We will try that on our UI. I yesterday removed antd because of the huge bundle size. As we anyway use material-ui for the rest of our UI, this is great news! Thank you very much for your efforts!