@ant-design/react-native/es/radio/demo/basic.js

基于蚂蚁金服移动设计规范的 React Native 组件库

var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));var _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf2=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _react=_interopRequireDefault(require("react"));var _reactNative=require("react-native");var _=require("../../");function _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function _createSuperInternal(){var Super=(0,_getPrototypeOf2["default"])(Derived),result;if(hasNativeReflectConstruct){var NewTarget=(0,_getPrototypeOf2["default"])(this).constructor;result=Reflect.construct(Super,arguments,NewTarget);}else{result=Super.apply(this,arguments);}return(0,_possibleConstructorReturn2["default"])(this,result);};}function _isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));return true;}catch(e){return false;}}var RadioItem=_.Radio.RadioItem;var BasicRadioExample=function(_React$Component){(0,_inherits2["default"])(BasicRadioExample,_React$Component);var _super=_createSuper(BasicRadioExample);function BasicRadioExample(){var _this;(0,_classCallCheck2["default"])(this,BasicRadioExample);_this=_super.apply(this,arguments);_this.state={disabled:false,part1Value:1,part2Value:1,part3Value:1};_this.toggleDisabled=function(){_this.setState({disabled:!_this.state.disabled});};_this.onChange=function(part1Value,e){if(e.target.checked){_this.setState({part1Value:part1Value});}};_this.onGroupChange2=function(e){_this.setState({part2Value:e.target.value});};_this.onGroupChange3=function(e){_this.setState({part3Value:e.target.value});};return _this;}(0,_createClass2["default"])(BasicRadioExample,[{key:"render",value:function render(){return _react["default"].createElement(_reactNative.ScrollView,null,_react["default"].createElement(_.List,{renderHeader:"\u57FA\u672C\u7528\u6CD5"},_react["default"].createElement(_.List.Item,{thumb:_react["default"].createElement(_.Radio,null,"Radio")})),_react["default"].createElement(_.List,{renderHeader:"\u4E0D\u53EF\u7528",renderFooter:_react["default"].createElement(_.Button,{type:"primary",onPress:this.toggleDisabled},"Toggle disabled")},_react["default"].createElement(_.List.Item,null,_react["default"].createElement(_.Flex,null,_react["default"].createElement(_.Radio,{defaultChecked:false,disabled:this.state.disabled},"Disabled"),_react["default"].createElement(_.WingBlank,null),_react["default"].createElement(_.Radio,{disabled:this.state.disabled},"Disabled")))),_react["default"].createElement(_.List,{renderHeader:"RadioItem"},_react["default"].createElement(RadioItem,{checked:this.state.part1Value===1,onChange:this.onChange.bind(this,1)},"Use Ant Design Component"),_react["default"].createElement(RadioItem,{checked:this.state.part1Value===2,onChange:this.onChange.bind(this,2)},"Use Ant Design Component")),_react["default"].createElement(_.List,{renderHeader:'单选组合 RadioGroup\n一组互斥的 Radio 配合使用'},_react["default"].createElement(_.Radio.Group,{onChange:this.onGroupChange2,value:this.state.part2Value,style:{flexDirection:'row',justifyContent:'space-around',paddingVertical:6}},_react["default"].createElement(_.Radio,{value:1},"A"),_react["default"].createElement(_.Radio,{value:2},"B"),_react["default"].createElement(_.Radio,{value:3},"C"),_react["default"].createElement(_.Radio,{value:4},"D"))),_react["default"].createElement(_.List,{renderHeader:'Radio.Group 垂直\n垂直的 Radio.Group，配合更多输入框选项'},_react["default"].createElement(_.Radio.Group,{onChange:this.onGroupChange3,value:this.state.part3Value},_react["default"].createElement(RadioItem,{value:1},"Option A"),_react["default"].createElement(RadioItem,{value:2},"Option B"),_react["default"].createElement(RadioItem,{value:3},"Option C"),_react["default"].createElement(RadioItem,{value:4,left:true},"More..."))),_react["default"].createElement(_.List,{renderHeader:'Radio.Group 组合 - 配置方式\n可通过配置 options 参数来渲染单选框。'},_react["default"].createElement(RadioGroupExample,null)));}}]);return BasicRadioExample;}(_react["default"].Component);exports["default"]=BasicRadioExample;var plainOptions=['Apple','Pear','Orange'];var options=[{label:'Apple',value:'Apple'},{label:'Pear',value:'Pear'},{label:'Orange',value:'Orange'}];var optionsWithDisabled=[{label:'Apple',value:'Apple'},{label:'Pear',value:'Pear'},{label:'Orange',value:'Orange',disabled:true}];var RadioGroupExample=function(_React$Component2){(0,_inherits2["default"])(RadioGroupExample,_React$Component2);var _super2=_createSuper(RadioGroupExample);function RadioGroupExample(){var _this2;(0,_classCallCheck2["default"])(this,RadioGroupExample);_this2=_super2.apply(this,arguments);_this2.state={value1:'Apple',value2:'Apple',value3:'Apple'};_this2.onChange1=function(e){console.log('radio1 checked',e.target.value);_this2.setState({value1:e.target.value});};_this2.onChange2=function(e){console.log('radio2 checked',e.target.value);_this2.setState({value2:e.target.value});};_this2.onChange3=function(e){console.log('radio3 checked',e.target.value);_this2.setState({value3:e.target.value});};return _this2;}(0,_createClass2["default"])(RadioGroupExample,[{key:"render",value:function render(){var _this$state=this.state,value1=_this$state.value1,value2=_this$state.value2,value3=_this$state.value3;return _react["default"].createElement(_react["default"].Fragment,null,_react["default"].createElement(_.List,{renderHeader:"PlainOptions"},_react["default"].createElement(_.Radio.Group,{options:plainOptions,onChange:this.onChange1,value:value1})),_react["default"].createElement(_.List,{renderHeader:"Options"},_react["default"].createElement(_.Radio.Group,{options:options,onChange:this.onChange2,value:value2})),_react["default"].createElement(_.List,{renderHeader:"OptionsWithDisabled"},_react["default"].createElement(_.Radio.Group,{options:optionsWithDisabled,onChange:this.onChange3,value:value3})));}}]);return RadioGroupExample;}(_react["default"].Component);