Skip to content

Commit b221e47

Browse files
author
Edward Xiao
committed
no message
1 parent 1387c56 commit b221e47

File tree

17 files changed

+874
-2058
lines changed

17 files changed

+874
-2058
lines changed

‎example/index.js‎

Lines changed: 330 additions & 326 deletions
Large diffs are not rendered by default.

‎example/index.tsx‎

Lines changed: 103 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import * as ReactDOM from 'react-dom';
99
// import Prism from 'prismjs';
1010
// import 'prismjs/themes/prism-tomorrow.css';
1111
// import STYLES from '../src/css/example.css';
12-
import { Textbox, Checkbox, Select, Radiobox } from '../src/js/Inputs/index';
12+
import { Textbox, Textarea, Checkbox, Select, Radiobox } from '../src/js/Inputs/index';
1313
interface Styles {
1414
[key: string]: string;
1515
}
@@ -351,6 +351,54 @@ class Index extends React.Component<{}, State> {
351351
<div style={{ padding: '10px' }}>
352352
<h1>Example form</h1>
353353
<form onSubmit={this.validateForm}>
354+
<Textbox
355+
tabIndex="1" // Optional.[String or Number].Default: -1.
356+
id={'Name'} // Optional.[String].Default: "". Input ID.
357+
name="Name" // Optional.[String].Default: "". Input name.
358+
type="text" // Optional.[String].Default: "text". Input type [text, password, number].
359+
value={name} // Optional.[String].Default: "".
360+
disabled={false} // Optional.[Bool].Default: false.
361+
placeholder="Place your name here ^-^" // Optional.[String].Default: "".
362+
validate={validate} // Optional.[Bool].Default: false. If you have a submit button and trying to validate all the inputs of your form at onece, toggle it to true, then it will validate the field and pass the result via the "validationCallback" you provide.
363+
validationCallback={res => this.setState({ hasNameError: res, validate: false })} // Optional.[Func].Default: none. Return the validation result.
364+
classNameInput="" // Optional.[String].Default: "".
365+
classNameWrapper="" // Optional.[String].Default: "".
366+
classNameContainer="" // Optional.[String].Default: "".
367+
customStyleInput={{}} // Optional.[Object].Default: {}.
368+
customStyleWrapper={{}} // Optional.[Object].Default: {}.
369+
customStyleContainer={{}} // Optional.[Object].Default: {}.
370+
onChange={(name, e) => {
371+
this.setState({ name });
372+
console.log(e);
373+
}} // Required.[Func].Default: () => {}. Will return the value.
374+
onBlur={e => {
375+
console.log(e);
376+
}} // Optional.[Func].Default: none. In order to validate the value on blur, you MUST provide a function, even if it is an empty function. Missing this, the validation on blur will not work.
377+
// onFocus={(e) => {console.log(e);}} // Optional.[Func].Default: none.
378+
// onClick={(e) => {console.log(e);}} // Optional.[Func].Default: none.
379+
validationOption={{
380+
name: 'Name', // Optional.[String].Default: "". To display in the Error message. i.e Please enter your ${name}.
381+
check: true, // Optional.[Bool].Default: true. To determin if you need to validate.
382+
required: true, // Optional.[Bool].Default: true. To determin if it is a required field.
383+
// type: 'string', // Optional.[String].Default: "string". Validation type, options are ['string', 'number'].
384+
// showMsg: true, // Optional.[Bool].Default: true. To determin display the error message or not.
385+
// min: 2, // Optional.[Number].Default: 0. Validation of min length when validationOption['type'] is string, min amount when validationOption['type'] is number.
386+
// max: 10, // Optional.[Number].Default: 0. Validation of max length when validationOption['type'] is string, max amount when validationOption['type'] is number.
387+
// length: 2, // Optional.[Number].Default: 0. Validation of exact length of the value.
388+
// compare: '3', // Optional.[String].Default: "" Compare this value to 3 to see if they are equal.
389+
// reg: /^\d{18}|\d{15}$/, // Optional.[Bool].Default: "" Custom regex.
390+
// regMsg: 'failed in reg.test(${value})', // Optional.[String].Default: "" Custom regex error message.
391+
// locale: 'en-US', // Optional.[String].Default: "en-US". For error message display. Current options are ['zh-CN', 'en-US']; Default is 'en-US'.
392+
// msgOnError: "Your custom error message if you provide the validationOption['msgOnError']", // Optional.[String].Default: "" Show your custom error message no matter what when it has error if it is provied.
393+
// msgOnSuccess: "Your custom success message if you provide the validationOption['msgOnSuccess']. Otherwise, it will not show, not even green border." // Optional.[String].Default: "". Show your custom success message no matter what when it has error if it is provied.
394+
// customFunc: res => { // Optional.[Func].Default: none. Custom function. Returns true or err message
395+
// if (res != 'milk') {
396+
// return 'Name cannot be other things but milk';
397+
// }
398+
// return true;
399+
// }
400+
}}
401+
/>
354402
<Radiobox
355403
tabIndex={2} // Optional.[String or Number].Default: -1.
356404
id="job" // Optional.[String].Default: "". Input ID.
@@ -479,6 +527,60 @@ class Index extends React.Component<{}, State> {
479527
// msgOnSuccess: "Your custom success message if you provide the validationOption['msgOnSuccess']. Otherwise, it will not show, not even green border." // Optional.[String].Default: "". Show your custom success message no matter what when it has error if it is provied.
480528
}}
481529
/>
530+
<Textarea
531+
tabIndex="7" // Optional.[String or Number].Default: -1.
532+
id="description" // Optional.[String].Default: "". Textarea ID.
533+
name="description" // Optional.[String].Default: "". Textarea name.
534+
value={description} // Optional.[String].Default: "".
535+
disabled={false} // Optional.[Bool].Default: false.
536+
placeholder="Place your description here ^-^" // Optional.[String].Default: "".
537+
validate={validate} // Optional.[Bool].Default: false. If you have a submit button and trying to validate all the inputs of your form at onece, toggle it to true, then it will validate the field and pass the result via the "validationCallback" you provide.
538+
validationCallback={res =>
539+
this.setState({
540+
hasDescriptionError: res,
541+
validate: false,
542+
})
543+
} // Optional.[Func].Default: none. Return the validation result.
544+
classNameInput="" // Optional.[String].Default: "".
545+
classNameWrapper="" // Optional.[String].Default: "".
546+
classNameContainer="" // Optional.[String].Default: "".
547+
customStyleInput={{}} // Optional.[Object].Default: {}.
548+
customStyleWrapper={{}} // Optional.[Object].Default: {}.
549+
customStyleContainer={{}} // Optional.[Object].Default: {}.
550+
onChange={(description, e) => {
551+
this.setState({ description });
552+
console.log(e);
553+
}} // Required.[Func].Default: () => {}. Will return the value.
554+
onBlur={e => {
555+
console.log(e);
556+
}} // Optional.[Func].Default: none. In order to validate the value on blur, you MUST provide a function, even if it is an empty function. Missing this, the validation on blur will not work.
557+
// onFocus={(e) => {console.log(e);}} // Optional.[Func].Default: none.
558+
// onClick={(e) => {console.log(e);}} // Optional.[Func].Default: none.
559+
maxLength="10" // Optional.[String | Number].Default: 524288.
560+
cols="10" // Optional.[String | Number].Default: 2.
561+
rows="10" // Optional.[String | Number].Default: 2.
562+
validationOption={{
563+
name: 'Description', // Optional.[String].Default: "". To display in the Error message. i.e Please enter your ${name}.
564+
check: true, // Optional.[Bool].Default: true. To determin if you need to validate.
565+
required: true, // Optional.[Bool].Default: true. To determin if it is a required field.
566+
type: 'string', // Optional.[String].Default: "string". Validation type, options are ['string', 'number'].
567+
// showMsg: true, // Optional.[Bool].Default: true. To determin display the error message or not.
568+
// locale: 'en-US', // Optional.[String].Default: "en-US". For error message display. Current options are ['zh-CN', 'en-US']; Default is 'en-US'.
569+
// min: 2, // Optional.[Number].Default: 0. Validation of min length when validationOption['type'] is string, min amount when validationOption['type'] is number.
570+
// max: 10, // Optional.[Number].Default: 0. Validation of max length when validationOption['type'] is string, max amount when validationOption['type'] is number.
571+
// length: 2, // Optional.[Number].Default: 0. Validation of exact length of the value.
572+
// reg: /^\d{18}|\d{15}$/, // Optional.[Bool].Default: "". Custom regex.
573+
// regMsg: 'failed in reg.test(${value})', // Optional.[String].Default: "". Custom regex error message.
574+
// msgOnError: "Your custom error message if you provide the validationOption['msgOnError']", // Optional.[String].Default: "". Show your custom error message no matter what when it has error if it is provied.
575+
// msgOnSuccess: "Your custom success message if you provide the validationOption['msgOnSuccess']. Otherwise, it will not show, not even green border." // Optional.[String].Default: "". Show your custom success message no matter what when it has error if it is provied.
576+
// customFunc: res => { // Optional.[Func].Default: none. Custom function. Returns true or err message
577+
// if (res != 'banana') {
578+
// return 'Description cannot be other things but banana';
579+
// }
580+
// return true;
581+
// }
582+
}}
583+
/>
482584
<div style={{ height: '10px' }} />
483585
<div className={`${STYLES['my-button']} ${STYLES['my-button__red']} ${STYLES['save-button']}`} onClick={this.validateForm}>
484586
validate!

‎src/js/Inputs/Checkbox.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -131,6 +131,10 @@ class Index extends React.Component<Props, State> {
131131
}
132132

133133
onChange(e: any) {
134+
const { disabled } = this.props;
135+
if (disabled) {
136+
return;
137+
}
134138
const checked = !this.state.checked;
135139
this.setState({ checked });
136140
const { onChange } = this.props;
@@ -142,6 +146,10 @@ class Index extends React.Component<Props, State> {
142146
}
143147
}
144148
onClick(e: React.MouseEvent<HTMLElement>) {
149+
const { disabled } = this.props;
150+
if (disabled) {
151+
return;
152+
}
145153
this.onChange(e);
146154
const { onClick } = this.props;
147155
onClick && onClick(e);

0 commit comments

Comments
 (0)