storybook-react-geekshubs/dist/antd/Data Entry/Form/CustomizedFormControls.js

Creation and curation of hight quality react components.

"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _react=_interopRequireWildcard(require("react"));var _antd=require("antd");function _getRequireWildcardCache(){if(typeof WeakMap!=="function")return null;var cache=new WeakMap;_getRequireWildcardCache=function _getRequireWildcardCache(){return cache};return cache}function _interopRequireWildcard(obj){if(obj&&obj.__esModule){return obj}var cache=_getRequireWildcardCache();if(cache&&cache.has(obj)){return cache.get(obj)}var newObj={};if(obj!=null){var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc)}else{newObj[key]=obj[key]}}}}newObj.default=obj;if(cache){cache.set(obj,newObj)}return newObj}function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj}}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj}}return _typeof(obj)}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function")}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor)}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call}return _assertThisInitialized(self)}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o)};return _getPrototypeOf(o)}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called")}return self}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function")}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass)}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o};return _setPrototypeOf(o,p)}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true})}else{obj[key]=value}return obj}var FormItem=_antd.Form.Item;var Option=_antd.Select.Option;var PriceInput=function(_React$Component){_inherits(PriceInput,_React$Component);function PriceInput(props){var _this;_classCallCheck(this,PriceInput);_this=_possibleConstructorReturn(this,_getPrototypeOf(PriceInput).call(this,props));_defineProperty(_assertThisInitialized(_this),"handleNumberChange",function(e){var number=parseInt(e.target.value||0,10);if(isNaN(number)){return}if(!("value"in _this.props)){_this.setState({number:number})}_this.triggerChange({number:number})});_defineProperty(_assertThisInitialized(_this),"handleCurrencyChange",function(currency){if(!("value"in _this.props)){_this.setState({currency:currency})}_this.triggerChange({currency:currency})});_defineProperty(_assertThisInitialized(_this),"triggerChange",function(changedValue){var onChange=_this.props.onChange;if(onChange){onChange(Object.assign({},_this.state,changedValue))}});var value=_this.props.value||{};_this.state={number:value.number||0,currency:value.currency||"rmb"};return _this}_createClass(PriceInput,[{key:"componentWillReceiveProps",value:function componentWillReceiveProps(nextProps){if("value"in nextProps){var value=nextProps.value;this.setState(value)}}},{key:"render",value:function render(){var size=this.props.size;var state=this.state;return _react.default.createElement("span",null,_react.default.createElement(_antd.Input,{type:"text",size:size,value:state.number,onChange:this.handleNumberChange,style:{width:"65%",marginRight:"3%"}}),_react.default.createElement(_antd.Select,{value:state.currency,size:size,style:{width:"32%"},onChange:this.handleCurrencyChange},_react.default.createElement(Option,{value:"rmb"},"RMB"),_react.default.createElement(Option,{value:"dollar"},"Dollar")))}}]);return PriceInput}(_react.default.Component);var CustomizedFormControls=function(_Component){_inherits(CustomizedFormControls,_Component);function CustomizedFormControls(){var _getPrototypeOf2;var _this2;_classCallCheck(this,CustomizedFormControls);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key]}_this2=_possibleConstructorReturn(this,(_getPrototypeOf2=_getPrototypeOf(CustomizedFormControls)).call.apply(_getPrototypeOf2,[this].concat(args)));_defineProperty(_assertThisInitialized(_this2),"handleSubmit",function(e){e.preventDefault();_this2.props.form.validateFields(function(err,values){if(!err){console.log("Received values of form: ",values)}})});_defineProperty(_assertThisInitialized(_this2),"checkPrice",function(rule,value,callback){if(value.number>0){callback();return}callback("Price must greater than zero!")});return _this2}_createClass(CustomizedFormControls,[{key:"render",value:function render(){var getFieldDecorator=this.props.form.getFieldDecorator;return _react.default.createElement("section",{className:"example"},_react.default.createElement("h3",{className:"ex-title"},"Customized Form Controls"),_react.default.createElement(_antd.Form,{layout:"inline",onSubmit:this.handleSubmit},_react.default.createElement(FormItem,{label:"Price"},getFieldDecorator("price",{initialValue:{number:0,currency:"rmb"},rules:[{validator:this.checkPrice}]})(_react.default.createElement(PriceInput,null))),_react.default.createElement(FormItem,null,_react.default.createElement(_antd.Button,{type:"primary",htmlType:"submit"},"Submit"))))}}]);return CustomizedFormControls}(_react.Component);CustomizedFormControls=_antd.Form.create()(CustomizedFormControls);var _default=CustomizedFormControls;exports.default=_default;