react-melon / melon Goto Github PK
View Code? Open in Web Editor NEWreact ui comopents
Home Page: http://react-melon.github.io/melon
react ui comopents
Home Page: http://react-melon.github.io/melon
#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 更新的数据,要求:
其次,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 属性的优先级
目前当前 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。
Table 需要 rerender 的性能优化
看到测试使用的jsdom,测试结果可能存在不准确。建议修改成karma做firefox、chrome、opera、phantomjs的跨浏览器测试,在真实浏览器上测试比较容易暴露问题
原因是没有处理 componentWillReceiveProps 事件
原因是 label 的样式没有做适配;禁用文字颜色不明显;
如题
在与 Redux 结合使用中,到了到 Uploader 自行持有状态,而无法在 redux store 中管理数据的问题。
为了支持与 Redux 结合,Uploader 应该做以下调整:
value
+ uploading
+ onFileChange
这组配置用来完全控制上传过程。
value
+ uploading
+ onFileChange
同时设置;value
与 uploading
只能由 props 来控制;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}
/>
);
}
}
defaultValue
+ upload
示例:
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 之外,还有哪些吸引用户的地方——哪怕只有那么几个关键的。
否则用户看看就走了,大家都会选择成熟产品。
只有打差异化,才能吸引住那些需要这些特性的用户。
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.