diff --git a/README.md b/README.md index 47ef593..ce48a25 100644 --- a/README.md +++ b/README.md @@ -91,6 +91,7 @@ labelPosition?: "top" | "left"; labelAlign?: "left" | "right"; controlStyle?: React.CSSProperties; controlClassName?: string; +showRequiredMark?: boolean; required?: boolean; requiredMessage?: string; clearErrorOnFocus?: boolean; @@ -275,6 +276,10 @@ $form-item-cls: nex-form-item; flex: none; } + &-label-left { + text-align: left; + } + &-top { display: block; } @@ -303,6 +308,7 @@ $form-item-cls: nex-form-item; } } + ``` diff --git a/docs/index.html b/docs/index.html index 95b64ed..9277247 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1 +1 @@ -Layout
\ No newline at end of file +Layout
\ No newline at end of file diff --git a/docs/manifest.json b/docs/manifest.json index 08f8038..047fba8 100644 --- a/docs/manifest.json +++ b/docs/manifest.json @@ -1,6 +1,6 @@ { - "index.css": "static/css/index.b2e6f73b.chunk.css", - "index.js": "static/js/index.b2e6f73b.chunk.js", + "index.css": "static/css/index.d7a93482.chunk.css", + "index.js": "static/js/index.d7a93482.chunk.js", "runtime~index.js": "static/js/runtime~index.f795885b.js", "static/css/2.71a0092d.chunk.css": "static/css/2.71a0092d.chunk.css", "static/js/2.71a0092d.chunk.js": "static/js/2.71a0092d.chunk.js", diff --git a/docs/static/css/index.b2e6f73b.chunk.css b/docs/static/css/index.d7a93482.chunk.css similarity index 100% rename from docs/static/css/index.b2e6f73b.chunk.css rename to docs/static/css/index.d7a93482.chunk.css diff --git a/docs/static/js/index.b2e6f73b.chunk.js b/docs/static/js/index.b2e6f73b.chunk.js deleted file mode 100644 index ccdde75..0000000 --- a/docs/static/js/index.b2e6f73b.chunk.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[0],{102:function(e,t,n){},103:function(e,t,n){},104:function(e,t,n){},150:function(e,t,n){"use strict";n.r(t);var r=n(0),a=n.n(r),i=n(57),o=n.n(i),l=(n(99),n(100),n(101),n(102),n(103),n(104),n(1)),s=n.n(l),u=n(9),c=n.n(u),f=n(31),m=n.n(f),p=n(58),h=n.n(p),d=a.a.createContext({});function v(){return(v=Object.assign||function(e){for(var t=1;t0?(this._validateTimer&&clearTimeout(this._validateTimer),this._validateTimer=setTimeout((function(){t.validate(null,e)}),n)):this.validate(null,e)},i.normalizeChildrenProps=function(){var e=this,t=this.props,n=t.normalize,r=t.name,a=t.onChange,i=t.onFocus,o=t.onBlur,l=this.getForm(),s=this.getFormProp("normalizeFieldValue");s&&!n&&(n=s.bind(null,r));var u=this.getFormProp("getInputProps",(function(){return{}}))(this);return C({value:this.getValue()},u,{onChange:function(t){var r=l.getFormValue(),i=e.getValue();n&&(t=n(t,i,r)),e.handleChange(t,(function(){a&&a(t),u.onChange&&u.onChange(t)}))},onFocus:function(t){e.handleFocus((function(){i&&i(t),u.onFocus&&u.onFocus(t)}))},onBlur:function(t){e.handleBlur((function(){o&&o(t),u.onBlur&&u.onBlur(t)}))}})},i.normalizeChildren=function(){return a.a.cloneElement(a.a.Children.only(this.props.children),this.normalizeChildrenProps())},i.getFormProp=function(e,t){return this.getForm().props[e]||t},i.getProp=function(e,t){var n=this.getForm().props,r=this.props;return e in r?r[e]:n[e]||t},i.getFormItemContext=function(){return Object.create(this)},i.render=function(){var e,t,n=this,r=this.props,i=(r.name,r.label),o=r.required,l=r.className,s=r.prefixCls,u=r.style,f=r.renderExtra,m=r.children,p=this.getProp("inline"),h=this.getProp("labelPosition"),d=this.getProp("labelAlign"),v=this.getFormProp("renderControlExtra"),g=this.hasError(),b=this.isValidating(),E="function"===typeof m?m(this.normalizeChildrenProps(),this):this.normalizeChildren();return a.a.createElement(F.Provider,{value:this.getFormItemContext()},a.a.createElement("div",{style:u,ref:this.saveDOM,className:c()(s,(e={},e[s+"-inline"]=p,e[s+"-"+h]=h,e["has-error"]=g,e["is-validating"]=b,e["is-required"]=o,e[""+l]=l,e))},i&&a.a.createElement("label",{htmlFor:this.getProp("labelFor"),className:c()((t={},t[s+"-label"]=!0,t[s+"-label-left"]="left"===d&&"left"===h,t),this.getProp("labelClassName")),style:C({width:this.getProp("labelWidth")},this.getProp("labelStyle",{}))},i),a.a.createElement("div",{className:c()(s+"-control",this.getProp("controlClassName")),style:this.getProp("controlStyle",{})},E,f?f(n):v?v(n):null)))},r}(a.a.Component);P(w,"contextType",d),w.propTypes={children:s.a.oneOfType([s.a.func,s.a.node]).isRequired,name:s.a.string,style:s.a.object,className:s.a.string,label:s.a.node,labelFor:s.a.oneOfType([s.a.string,s.a.number]),labelWidth:s.a.oneOfType([s.a.string,s.a.number]),labelStyle:s.a.object,labelClassName:s.a.string,labelPosition:s.a.oneOf(["top","left"]),labelAlign:s.a.oneOf(["left","right"]),controlStyle:s.a.object,controlClassName:s.a.string,validator:s.a.oneOfType([s.a.func,s.a.array]),required:s.a.bool,requiredMessage:s.a.string,clearErrorOnFocus:s.a.bool,normalize:s.a.func,renderExtra:s.a.func,validateDelay:s.a.number,validateTrigger:s.a.oneOf(["blur","change"]),inline:s.a.bool},w.defaultProps={prefixCls:"nex-form-item"};var _=w;function j(){return(j=Object.assign||function(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,["component","value","inputRef","onChange"]);return a.a.createElement(n,j({ref:i,onChange:function(e){var t=e.target.value;o&&o(t,e)},value:r},l))}V.Item=_,V.NativeInput=T,V.Context=d,V.ItemContext=F;function x(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function S(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function D(){return(D=Object.assign||function(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,["type","component","children"]);return a.a.createElement(_,D({},l,{style:{marginBottom:24}}),a.a.createElement(T,{component:i,type:n,children:o}))}function A(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function N(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function L(){return(L=Object.assign||function(e){for(var t=1;t0?(this._validateTimer&&clearTimeout(this._validateTimer),this._validateTimer=setTimeout((function(){t.validate(null,e)}),n)):this.validate(null,e)},i.normalizeChildrenProps=function(){var e=this,t=this.props,n=t.normalize,r=t.name,a=t.onChange,i=t.onFocus,o=t.onBlur,l=this.getForm(),s=this.getFormProp("normalizeFieldValue");s&&!n&&(n=s.bind(null,r));var u=this.getFormProp("getInputProps",(function(){return{}}))(this);return C({value:this.getValue()},u,{onChange:function(t){var r=l.getFormValue(),i=e.getValue();n&&(t=n(t,i,r)),e.handleChange(t,(function(){a&&a(t),u.onChange&&u.onChange(t)}))},onFocus:function(t){e.handleFocus((function(){i&&i(t),u.onFocus&&u.onFocus(t)}))},onBlur:function(t){e.handleBlur((function(){o&&o(t),u.onBlur&&u.onBlur(t)}))}})},i.normalizeChildren=function(){return a.a.cloneElement(a.a.Children.only(this.props.children),this.normalizeChildrenProps())},i.getFormProp=function(e,t){return this.getForm().props[e]||t},i.getProp=function(e,t){var n=this.getForm().props,r=this.props;return e in r?r[e]:n[e]||t},i.getFormItemContext=function(){return{formItem:this}},i.render=function(){var e,t,n=this,r=this.props,i=(r.name,r.label),o=r.showRequiredMark,l=r.required,s=r.className,u=r.prefixCls,f=r.style,m=r.renderExtra,p=r.children,h=this.getProp("inline"),d=this.getProp("labelPosition"),v=this.getProp("labelAlign"),g=this.getFormProp("renderControlExtra"),b=this.hasError(),E=this.isValidating(),y="function"===typeof p?p(this.normalizeChildrenProps(),this):this.normalizeChildren();return a.a.createElement(F.Provider,{value:this.getFormItemContext()},a.a.createElement("div",{style:f,ref:this.saveDOM,className:c()(u,(e={},e[u+"-inline"]=h,e[u+"-"+d]=d,e["has-error"]=b,e["is-validating"]=E,e["is-required"]=l||o,e[""+s]=s,e))},i&&a.a.createElement("label",{htmlFor:this.getProp("labelFor"),className:c()((t={},t[u+"-label"]=!0,t[u+"-label-left"]="left"===v&&"left"===d,t),this.getProp("labelClassName")),style:C({width:this.getProp("labelWidth")},this.getProp("labelStyle",{}))},i),a.a.createElement("div",{className:c()(u+"-control",this.getProp("controlClassName")),style:this.getProp("controlStyle",{})},y,m?m(n):g?g(n):null)))},r}(a.a.Component);P(w,"contextType",d),w.propTypes={children:s.a.oneOfType([s.a.func,s.a.node]).isRequired,name:s.a.string,style:s.a.object,className:s.a.string,label:s.a.node,labelFor:s.a.oneOfType([s.a.string,s.a.number]),labelWidth:s.a.oneOfType([s.a.string,s.a.number]),labelStyle:s.a.object,labelClassName:s.a.string,labelPosition:s.a.oneOf(["top","left"]),labelAlign:s.a.oneOf(["left","right"]),controlStyle:s.a.object,controlClassName:s.a.string,validator:s.a.oneOfType([s.a.func,s.a.array]),showRequiredMark:s.a.bool,required:s.a.bool,requiredMessage:s.a.string,clearErrorOnFocus:s.a.bool,normalize:s.a.func,renderExtra:s.a.func,validateDelay:s.a.number,validateTrigger:s.a.oneOf(["blur","change"]),inline:s.a.bool},w.defaultProps={prefixCls:"nex-form-item",showRequiredMark:!1};var _=w;function j(){return(j=Object.assign||function(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,["component","value","inputRef","onChange"]);return a.a.createElement(n,j({ref:i,onChange:function(e){var t=e.target.value;o&&o(t,e)},value:r},l))}V.Item=_,V.NativeInput=T,V.Context=d,V.ItemContext=F;function x(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function S(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function D(){return(D=Object.assign||function(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,["type","component","children"]);return a.a.createElement(_,D({},l,{style:{marginBottom:24}}),a.a.createElement(T,{component:i,type:n,children:o}))}function A(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function N(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function q(){return(q=Object.assign||function(e){for(var t=1;t { - console.log("update"); return (
{ + if (lockId !== this.formLockId) return; + this.setState({ formError, validatingFields @@ -446,9 +454,12 @@ class Form extends React.Component { formValue, true /* abort state */ ); + console.log("abort"); return; } + console.log("validate"); + this.setState( { formError, @@ -491,8 +502,6 @@ class Form extends React.Component { if (hasUpdate) return; hasUpdate = true; - if (lockId !== this.formLockId) return; - updateFormState(); }, asyncTestDelay); @@ -548,6 +557,10 @@ class Form extends React.Component { return { form: this }; } + handleSubmit = e => { + e.preventDefault(); + }; + render() { const { prefixCls, @@ -563,7 +576,7 @@ class Form extends React.Component { {typeof children === "function" ? children(this) : children} diff --git a/src/FormItem.js b/src/FormItem.js index 0f963c7..62b186d 100644 --- a/src/FormItem.js +++ b/src/FormItem.js @@ -225,13 +225,14 @@ class FormItem extends React.Component { } getFormItemContext() { - return Object.create(this); + return { formItem: this }; } render() { const { name, label, + showRequiredMark, required, className, prefixCls, @@ -273,7 +274,7 @@ class FormItem extends React.Component { [`${prefixCls}-${labelPosition}`]: labelPosition, [`has-error`]: hasError, [`is-validating`]: isValidating, - [`is-required`]: required, + [`is-required`]: required || showRequiredMark, [`${className}`]: className })} > @@ -328,6 +329,7 @@ FormItem.propTypes = { controlStyle: PropTypes.object, controlClassName: PropTypes.string, validator: PropTypes.oneOfType([PropTypes.func, PropTypes.array]), + showRequiredMark: PropTypes.bool, required: PropTypes.bool, requiredMessage: PropTypes.string, clearErrorOnFocus: PropTypes.bool, @@ -339,7 +341,8 @@ FormItem.propTypes = { }; FormItem.defaultProps = { - prefixCls: "nex-form-item" + prefixCls: "nex-form-item", + showRequiredMark: false }; export default FormItem; diff --git a/src/index.d.ts b/src/index.d.ts index 3fc3a22..2372a45 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -63,6 +63,7 @@ declare namespace ReactWidgetForm { labelAlign?: "left" | "right"; controlStyle?: React.CSSProperties; controlClassName?: string; + showRequiredMark?: boolean; required?: boolean; requiredMessage?: string; clearErrorOnFocus?: boolean; diff --git a/src/useFormItem.js b/src/useFormItem.js index 61d963d..8f51303 100644 --- a/src/useFormItem.js +++ b/src/useFormItem.js @@ -2,5 +2,6 @@ import React from "react"; import FormItemContext from "./FormItemContext"; export default () => { - return React.useContext(FormItemContext); + const context = React.useContext(FormItemContext); + return context.formItem; };