react-mdc / react-material-components-web Goto Github PK

I've notice that theming by CSS variable in webpack + postcss does not work well.

It seems to be better migrating to sass than configuring them.

Changelog file is missing.

Considering using this: https://github.com/skywinder/github-changelog-generator

Some foundations of components that were not implemented yet require DOM attribute modification.
It seems that this can be implemented by same way with css vars and event listeners.
But I have to research more about react's DOM management algorithm to be sure.

Textfield were broken

https://github.com/DefinitelyTyped/DefinitelyTyped

https://github.com/DefinitelyTyped/DefinitelyTyped/search?utf8=%E2%9C%93&q=mdc&type=

Might make it easier.

Has anyone tried AssemblyScript on these to covert to WASM ??

Implement MDCGridList Component

I'm using react-material-components-web for my private project. And that project seems gonna use TypeScript instead of ECMA6 + Flow.
So I'm considering to support TypeScript for react-material-components-web

Supporting TypeScript will be cool feature.

We have two options to do this

1. Migrate to TypeScript and write .flow file manually or use flowgen

• Pros

  • We can you TypeScript's mature tools

  • Can be easily used by my private project

• Cons

  • Should migrate all codes

  • Have to learn new language

2. Just write .d.ts files

• Pros

  • Don't have to migrate our codes

• Cons

  • Should keep fight with immatureness of flow

Documentation are needed

I'm considering replacing demo package with document.

Github Wiki is easier to write, but it can't contain rendered element.

Hi. Really enjoying using these components.

I'm now used to using the prop-based pattern for <input>s where I have an input element inside a component and I use code such as the following to change the prop value:

const Component = ({value,onChange}) => {
  let input;
  return (
    <input ref={ n => input = n } 
      onChange={() => onChange(input.value)}
      value={value}/>
  );
};

However, I cannot get a ref for the input field using <Textfield.Input>, can you describe the right way to update the application state with the component's value?

Thanks
Alan

Unit tests are needed.

We have to test

• DOM generation

• Foundation integration using mock foundation

I'm planning to use Jest for unit testing

Implement MDCToolbar component

We have cool API named Wrapper and PropWrapper. But, type inferencing of these components is too complex.

So I'm considering to change API with following.

For default HTML element

<Button>Text</Button>

And for custom HTML Element

<Button.Wrap>
    <a href="link">Text</a>
</Button.Wrap>

Implementation may be like

class Wrap extends React.Component<WrapperProps, State> {
    //...
}

export default class Button extends React.Component<WrapperProps & Props, {}> {
    public static Wrap = Wrap;

    public render() {
        const {
            buttonProp1,
            buttonProp2,
            ...props,
        }
        return (
            <Wrap buttonProp1={buttonProp1} buttonProp2={buttonProp2}>
                <button {...props} />
            </Wrap>
        );
    }
}

This is also cool

Now Textfield uses . It could be useful to specify additional property that switches that to password input.

Implement MDCLayoutGrid Component

Implement MDCDialog component

Implement Menu Component

any rough estimate how long before 2.0? we are wondering if we should wait or use another framework. 2 weeks? 2 months? 6 months?

Cheers!

Google release website for MDC (https://material.io/components/web/)

So now, we have a design guideline of document to follow. This would be better than my naive one

mdc release tabs component

I am using this in one of my project, & it seems it is not behaving well, I getting below error some times, It was all working fine with no error with React version 15.6.

Uncaught TypeError: Cannot read property 'getBoundingClientRect' of null at RippleAdapterImpl.computeBoundingRect (http://localhost:6006/static/preview.bundle.js:164810:41) at FoundationAdapter.computeBoundingRect (http://localhost:6006/static/preview.bundle.js:187629:35) at Object.object.(anonymous function) [as computeBoundingRect] (http://localhost:6006/static/preview.bundle.js:187648:35) at MDCRippleFoundation.layoutInternal_ (http://localhost:6006/static/preview.bundle.js:176465:35) at http://localhost:6006/static/preview.bundle.js:176458:17 RippleAdapterImpl.computeBoundingRect @ Ripple.js:138 FoundationAdapter.computeBoundingRect @ adapter.js:86 object.(anonymous function) @ adapter.js:105 layoutInternal_ @ mdc.ripple.js:1140 (anonymous) @ mdc.ripple.js:1133 requestAnimationFrame (async) layout @ mdc.ripple.js:1132 MDCRippleFoundation._this.resizeHandler_ @ mdc.ripple.js:813 7Ripple.js:138 Uncaught TypeError: Cannot read property 'getBoundingClientRect' of null at RippleAdapterImpl.computeBoundingRect (http://localhost:6006/static/preview.bundle.js:164810:41) at FoundationAdapter.computeBoundingRect (http://localhost:6006/static/preview.bundle.js:187629:35) at Object.object.(anonymous function) [as computeBoundingRect] (http://localhost:6006/static/preview.bundle.js:187648:35) at MDCRippleFoundation.getFgTranslationCoordinates_ (http://localhost:6006/static/preview.bundle.js:176294:185) at MDCRippleFoundation.animateActivation_ (http://localhost:6006/static/preview.bundle.js:176261:42) at http://localhost:6006/static/preview.bundle.js:176230:18

I cut connection of onChange handler from radio & checkbox by mistake. In this commit: c018017, 111e93e
Should fix it.

Example from https://react-mdc.github.io/#/dialog

<Dialog open={this.state.open} onClose={onClose}>
  ...
</Dialog>

onClose = () => {
  console.log('close')
   this.setState({open: false})
}

When close a dialog, console outputs two close string. Due to the way it implemented, when user close the dialog, it invoke onClose callback. (first time). The onClose function do setState({open: false} which invoke onClose callback again. (second time)

In other words, please, remove src/ from .npmignore. The folder absence leads to a lot of warnings, like

WARNING in ./~/@react-mdc/base/lib/index.js
(Emitted value instead of an instance of Error) Cannot find source file '../src/index.tsx': Error: Can't resolve '../src/index.tsx' in '/Users/ukstv/Documents/Pro/foo/node_modules/@react-mdc/base/lib'
 @ ./~/@react-mdc/typography/lib/Container.js 13:13-39
 @ ./~/@react-mdc/typography/lib/index.js
...

Currently, we are building meta components with inheritance which is hard to test.

If we use composition to build meta component, we can test them easily with dependency injection.

When we write demo, there were no layout components like layout-grid component.
Now, we have nice layout component, refactor it!

Implement MDCSnackbar Component

We always use adapterfor name of adapter context.

It can occur conflict of adapter when nesting different@react-material components.

<TextField>
  <Input>
  </Input>
  <Checkbox>
    <NativeControl ... />
    ...
    <Input ... /> {/* This Input component will receive checkbox's adapter from the context */}
  </Checkbox>
</TextField>

We may have to add prefix for each context names of components.
adapter -> textfieldAdapter

Implement MDCIconToggle Component

Implement MDCSelect Component

We are using lerna for managing packages under @react-mdc.

When we try to use tsc --watch for each packages, they start processes separately for all packages.

So, at the beginning of watching, they take tons of resources, since all of them try to build their sources.

Is there any nice solution for integrating typescript with lerna? or should we have to make our own watch script?

Hi,

There are missing dependencies :

• sass-loader
• resolve-url-loader
• material-components-web

After I install above, still error:

ERROR in ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./no
de_modules/resolve-url-loader!./node_modules/sass-loader/lib/loader.js?sourceMap
!./app/styles/main.scss
Module build failed:
@import "material-components-web/material-components-web";
^
      File to import not found or unreadable: material-components-web/material-c
omponents-web.
Parent style sheet: stdin
      in E:\Project\allproject_git\annotator\app\styles\main.scss (line 6, colum
n 1)
 @ ./app/styles/main.scss 4:14-224 13:2-17:4 14:20-230
 @ ./app/containers/App/index.js
 @ ./app/app.js
 @ multi eventsource-polyfill webpack-hot-middleware/client?reload=true ./app/ap
p.js

styles/main.scss:

// My main Sass file.
$mdc-theme-primary: #9c27b0;
$mdc-theme-accent: #76ff03;
$mdc-theme-background: #fff;

@import "material-components-web/material-components-web";

Attempt to import an MDC component’s scss within project’s styles.scss results in a file not found.

@import "~@material/button/mdc-button.scss";

The only way is to import the pre-built CSS:

@import "~@material/button/dist/mdc.button";

The reason importing SCSS doesn’t work is that inside mdc-button.scss there are imports referring to other MDC’s imports as "@material/...". Note that there’s no ~ character in the front.

Due to the way Webpack resolves imports, you have to tell it that the import is non-relative explicitly by beginning the import with ~.

Without it, Webpack treats those imports as relative and expects to find node_modules/@material/button/@material directory, which does not exist.

It seems obvious that MDC’s authors want those imports to refer to the @Material directory that’s directly underneath project’s node_modules. Since Webpack is explicitly mentioned in README it seems that the way it should be is with the ~ in the front to support its way of doing things.

Perhaps I’m missing something, although someone else reported the same problem recently:

• rails/webpacker#454

I have problems with dialog. The used version of @material/dialog is already ^0.2.1, while the latest is v0.3.2

Currently, native DOM handling is little bit dirty.
We have to handle

• Native event listener from MDCFoundation

• Css Properties

We can do better using high-order component.
It may be like

render (): React.Element<*> {
  return (
    <NativeDOMAdapter
        cssProperties={this.state.foundationCssProperties}
        eventHandlers={this.state.foundationEventHandlers}>
      <div className="mdc-ripple-surface">
          ...
      </div>
    </NativeDOMAdapter>
  )
}

Foundation was add to MDCFormField component since this commit (material-components/material-components-web@c441157)

It seems to be published in next release. We should implement react adapter.

Implement text direction context component.

We may can provide a default text direction by this component like following

<TextDirection rtl={this.state.user.textDirection === 'rtl'}>
  <TemporaryDrawer>
    {/* It will have a RTL as a default text direction when `user.textDirection` is 'rtl' */}
  </TemporaryDrawer>
</TextDirection>

Ripple not works. Fix it

We don't support help text of textfield yet.
Should add this

See #4 (comment) for more details

Using the textfield from this package causes a React warning when adding a Textfield Input.

Warning: Stateless function components cannot be given refs. Attempts to access this ref will fail.

Check the render method of `NativeDOMAdapter`.
    in TextInput (created by NativeDOMAdapter)
    in NativeDOMAdapter (created by Meta)
    in Meta (created by Input)
    in Input (at AddAccount.js:528)
    in div (created by NativeDOMAdapter)
    in NativeDOMAdapter (created by Meta)
    in Meta (created by Textfield)
    in Textfield (at AddAccount.js:527)

Example implementation that brings up the warning:

<Textfield>
              <Textfield.Input
                id="username"
                onChange={this.onChange}
                value={this.props.username}
                required
              />
              <Textfield.Label htmlFor="username">
                {localize('username')}
              </Textfield.Label>
 </Textfield>

It looks like the code above generates the TextInput with a ref. See screenshot below:

"react": "16.0.0-beta.3"
"@react-mdc/textfield": "^0.1.10"

Implement MDCSwitch Component

Implement MDCTextField