react-melon / melon Goto Github PK

#9 时间选择器

#9

现在如果没有 validity 那么不会返回 readOnly 的状态

运行命令得改改

复现途径：tooltip里面是一个button，点击弹出一个弹窗，这个弹窗刚好覆盖了这个tooltip
现象：tooltip不消失，浮在弹窗上面

TextBox添加autocomplete功能

不知道 React 是出于什么样的考虑，把 input 的 onChange 事件的行为搞成了 onInput。这导致我们的 TextBox 行为与标准不一致。

考虑将 TextBox 的 onInput 和 onChange 行为标准化。

接入travis、coveralls吧，把测试结果透出到文档中，如果可以最好能分组件透出，这样使用者在使用前能大致了解组件质量

我们的构建工具整体从 edp 迁移到 webpack + gulp，因此 melon 也需要同步迁移。

由于弹出时会给 html body 设置height: 100%

在 syncPropsToState.getNextValidity 时忽略了此功能

state 只需要提供 isValid 和 message 两个属性即可；其他属性可自行扩展；

现在 TextBox 内部的 Input 的值来自于 props.value，应该是 state.value；

原因是 TextBox 在做 props-state-sync 处理时，没有对 value 做 defaultValue 处理；而 floating label 的状态是基于 value 值的。因此在 rerender 时，floating label 的状态为 not-floating，而 value 实际上是有 defaultValue；从而出错。

弹出的对话框，可以支持标题和按钮。demo都没有

目前只销毁了原生 dom，并未销毁 React 实例。

在 componentWillReceiveProps 里对 value 的处理只判断了 value == null；实际上，也有可能是空字符串或者任意不能被正确解析的输入；在这种情况下，value 应该使用默认值；

当在Dialog组件中放入Calendar组件时，由于Dialog组件应用了transform属性，导致Calendar组件弹窗的fixed定位相对于该Dialog组件而不是整个viewport

原因是 floating label 的位置样式是写死的 px 单位。

现在 form 的校验过程是触发 field 的校验。
但是在更广泛的情况下，form 也需要特定的校验逻辑。这样就需要把 form 的校验结果返回给 field。因此需要引入此接口。

此接口由 form 直接调用，不推荐用做其他。

现在在 InputComponent 的 componentWillReceiveProps 中处理了 state 中的 value 和 validity 的同步。

但是对于子类来讲，没办法很好的复用这一部分的功能。因此，需要将这一部分的处理进行抽取。

首先，我们希望可以有一个模块帮我们计算 state 更新的数据，要求：

1. 纯函数；
2. 不做任何修改(包括当前组件的任何状态，以及 nextProps)，返回一个需要同步到 state 中的数据对象；
3. 对于 value 和 validity 的更新计算函数，应当可以单独使用；

其次，InputComponent.componentWillReceiveProps 使用上述函数提供的更新对象，更新 state

目前react项目广泛使用webpack构建，想要一起使用这个edp构建的组件库比较麻烦，简易增加webpack构建版本，并发布到npm上

另外，bower已死

const select = (
  <Select>
    <option label="简单的label" value="1">这里是一个非常奇怪的可以<b>放下很多东西的结点</b></option>
  </Select>
);

如上一段代码，在展开的浮层中，应该出现的是这里是一个非常奇怪的可以<b>放下很多东西的结点</b>，而且当此 option 被选中时，select 的 label 应该显示 简单的label；

因此，整理一下 option 的 label 和 �children 属性的优先级

1. select 选中状态的 label：option.label > option.children
2. 浮层中：option.children > option.label

目前当前 value 被设置为空或者非法日期时会被重置为当前时间；

现在需要支持当 value 为空时，Calendar 也留空；具体的 UI 设计可以参考 Select 的留空状态；

与 window.alert 和 window.confirm 类似，在编程过程中这个体验还是很不错的。应该可以支持。

现在 TouchRipple 在 componentDidUpdate 时会更新自己的位置，在这个操作过程中读取 DOM 属性，会比较慢。

如果不添加 shouldComponentUpdate，在 re-render 的过程中 componentDidUpdate 也会被触发。从而无用更新，影响性能。

手写文档容易出现文档维护滞后问题，建议考虑一下采用react-docgen或者react-docify等库自动生成

目前 Calendar 组件依赖大量时间相关的函数。而这些函数对于其他大部分组件并没有意义。并且，这些代码存在单独维护的成本，例如 dateUtil.parse('') 返回一个错误的 Date 对象。

建议将 Calendar 组件拆分出去，创建新的组件包 melon-calendar 。melon-calendar 依赖于 melon，并且可以使用更多的依赖包，例如 moment.js。

以后，遇到此类复杂的组件，建议如此处理。

如题

选择范围内的一个数值

属性 cellRenderer 保留，默认实现中会调用 headerRenderer 和 bodyRenderer。

设计与需求参考 https://www.google.com/design/spec/components/menus.html#

Table 需要 rerender 的性能优化

看到测试使用的jsdom，测试结果可能存在不准确。建议修改成karma做firefox、chrome、opera、phantomjs的跨浏览器测试，在真实浏览器上测试比较容易暴露问题

原因是没有处理 componentWillReceiveProps 事件

原因是 label 的样式没有做适配；禁用文字颜色不明显；

如题

在与 Redux 结合使用中，到了到 Uploader 自行持有状态，而无法在 redux store 中管理数据的问题。

为了支持与 Redux 结合，Uploader 应该做以下调整：

Controlled： value + uploading + onFileChange

这组配置用来完全控制上传过程。

1. value + uploading + onFileChange 同时设置；
2. value 与 uploading 只能由 props 来控制；
3. 通过 onFileChange 与 onUploadCancel 来修改 value 和 uploading；

示例:

class App extends Component {

    constructor(props) {
        super(props);
        this.onFileChange = this.onFileChange.bind(this);
        this.onUploadCancel = this.onUploadCancel.bind(this);
        this.state = {
            uploading: false,
            value: ''
        };
    }

    componentWillUnmount() {
        this.token = null;
    }

    upload(files) {
        return new Promise(resolve => {
            setTimeout(() => {
                resolve('http://some.com/a.png');
            }, 10);
        });
    }

    onFileChange(file) {
        if (!file) {
            this.setState({value: ''});
            return;
        }
        this.setState({
            uploading: true
        });
        // 使用 token 来控制异步请求被主动取消或者组件被卸载
        const token = this.token = Math.random();
        this.upload(file).then(
            value => {
                if (this.token === token) {
                    this.setState({uploading: false, value});
                }
            },
            error => {
                if (this.token === token) {
                    this.setState({uploading: false});
                }
            }
        );
    }

    onUploadCancel() {
        this.token = null;
        this.setState({uploading: false});
    }

    render() {
        const {uploading, value} = this.state;
        return (
            <Uploader
                value={value}
                uploading={uploading}
                onFileChange={this.onFileChange}
                onUploadCancel={this.onUploadCancel}
            />
        );
    }

}

Uncontrolled：defaultValue + upload

1. 这两个属性必须同时设定；
2. 通过设置 onUploadStart / onUploadSucceed / onUploadFailed / onUploadCancel / onClear 来获取事件；

示例：

function App() {

    return (
        <Uploader
            defaultValue=""
            upload={files => new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve('http://some.com/a.png');
                }, 10);
            })}
            onUploadStart={file => {
                console.log('upload start');
            }}
            onUploadSucceed={value => {
                console.log(`upload succeed with new value: ${value}`);
            }}
            onUploadFailed={error => {
                console.log(`upload failed: ${error}`);
            }}
            onUploadCancel={() => {
                console.log('upload canceled');
            }}
            onClear={() => {
               console.log('value reset to  empty');
            }}
        />
    );

}

从产品角度提个建议。看项目的star比较少，应该处于发展初期，此时你的文档或者官网中，应该很显眼的提出我和其他成熟竞争对手的差异，除了 Material Design 之外，还有哪些吸引用户的地方——哪怕只有那么几个关键的。

否则用户看看就走了，大家都会选择成熟产品。

只有打差异化，才能吸引住那些需要这些特性的用户。