react-whistle
A react-component to handle your upset ui state.
Install
npm install --save react-whistleUsage
const Dialog = Whistle(props => (
<div>
<button onClick={props.onResolve}>Confirm</button>
<button onClick={props.onReject}>Cancel</button>
</div>
));
Dialog();You dont need to handle states about a dialog's show and hide, you just need call props.onResolve or props.onReject.
Dialog.then(() => alert('confirm')).catch(() => alert('cancel'))();Callbacks for your Whistle Component before destroy.
Dialog().then(() => alert('confirm after destory'))Callbacks for your Whistle Component after confirm destroy.(cancel is still in thinking.)
Last
Be happy with react-whistle.
I just hating handle dialog components in every component!
React-Validation
Introduction
验证这件事，无关视觉只与数据与动作有关。数据即验证规则与提示信息，动作即触发验证。实现的方式为高阶组件HOC，传递一个prop(默认为validation，可修正)于相关组件。
Usage
class FormContainer extends Component {
// ...
constructor(props) {
super(props);
this.state = { name: '' };
this.handleChange = this.handleChange.bind(this);
}
handleNameChange(e) {
const value = e.target.value;
this.props.validation.validate('name');
return value;
}
render() {
const { validation: field } = this.props;
return (
<form>
<input
type="text"
onChange={this.handleChange}
value={this.state.name}
/>
{field.name ?
<span>{field.name}</span>
: null
}
</form>
);
}
}
Validation({
propName: 'validation', // 传递的prop
fields: ['name'], // 涉及到的rule
// 规则
ruleMap: {
name: {
validator: name => typeof name === 'string' && name.length,
msg: '姓名不能为空',
},
},
})(FormContainer)
同步验证
Simple
ruleMap = {
name: {
validator: name => typeof name === 'string' && name.length,
msg: '姓名不能为空',
},
};Advance
ruleMap = {
name: {
validator: (name, context) => typeof name === 'string' && name.length,
msg: context => '姓名不能为空',
},
};联动验证
异步验证
联合验证
Glossary
ruleMap
{
ruleMap: objectOf(oneOfType([
shape({
validator: func,
msg: oneOfType([string, func]),
}),
instanceOf(Promise),
func,
])),
}validator
msg
validate
field
validateFields
Design
Rule
Object
{
validator,
msg,
}
