nuke-switch
Advanced tools
nuke-switch - npm Package Compare versions
Comparing version 1.0.4 to 1.0.5
@@ -11,3 +11,3 @@ # Switch Demo | ||
| import {createElement, Component,render} from 'rax'; | ||
| import { createElement, Component, render } from 'rax'; | ||
| import Text from 'nuke-text'; | ||
@@ -19,109 +19,93 @@ import View from 'nuke-view'; | ||
| const {StyleProvider} = ThemeProvider; | ||
| const { StyleProvider } = ThemeProvider; | ||
| let md = { | ||
| Core:{ | ||
| [`color-brand1-6`]: '#1A9CB7', | ||
| Core: { | ||
| [`color-brand1-6`]: '#1A9CB7', | ||
| }, | ||
| Switch:{ | ||
| Switch: { | ||
| } | ||
| }; | ||
| let App = class NukeDemoIndex extends Component { | ||
| constructor() { | ||
| super(); | ||
| this.state = { | ||
| switch1: true, | ||
| switch2: false, | ||
| switch3: null, | ||
| switch4: null, | ||
| } | ||
| constructor() { | ||
| super(); | ||
| this.state = { | ||
| switch1: true, | ||
| switch2: false, | ||
| switch3: null, | ||
| switch4: null, | ||
| } | ||
| change = (item,value) => { | ||
| let obj = {}; | ||
| obj[item]= value; | ||
| this.setState(obj); | ||
| } | ||
| changeNotice = (item,value) => { | ||
| let obj = {}; | ||
| obj[item]= value; | ||
| this.setState(obj); | ||
| } | ||
| render() { | ||
| return ( | ||
| <StyleProvider style={md} androidConfigs={{materialDesign:true}}> | ||
| <Page title="Switch"> | ||
| <Page.Intro main="受控，状态自行控制"></Page.Intro> | ||
| <View style={styles.row}> | ||
| <View style={styles.cellItem}> | ||
| <Switch key="switch1" checked={this.state.switch1} onValueChange={this.change.bind(this,'switch1')}/> | ||
| <View style={styles.cellResult}> | ||
| <Text style={styles.label}>switch1: </Text> | ||
| <Text style={styles.text}>{this.state.switch1}</Text> | ||
| </View> | ||
| </View> | ||
| <View style={styles.cellItem}> | ||
| <Switch key="switch2" checked={this.state.switch2} onValueChange={this.change.bind(this,'switch2')}/> | ||
| <View style={styles.cellResult}> | ||
| <Text style={styles.label}>switch2: </Text> | ||
| <Text style={styles.text}>{this.state.switch2}</Text> | ||
| </View> | ||
| </View> | ||
| </View> | ||
| <Page.Intro main="非受控，组件checked 状态更新后，返回结果"></Page.Intro> | ||
| <View style={styles.row}> | ||
| <View style={styles.cellItem}> | ||
| <Switch key="switch3" defaultChecked={true} onValueChange={(value)=> this.changeNotice('switch3',value)}/> | ||
| <View style={styles.cellResult}> | ||
| <Text style={styles.label}>switch3 返回: </Text> | ||
| <Text style={styles.text}>{this.state.switch3}</Text> | ||
| </View> | ||
| </View> | ||
| <View style={styles.cellItem}> | ||
| <Switch key="switch4" defaultChecked={false} onValueChange={(value) => this.changeNotice('switch4',value)}/> | ||
| <View style={styles.cellResult}> | ||
| <Text style={styles.label}>switch4 返回: </Text> | ||
| <Text style={styles.text}>{this.state.switch4}</Text> | ||
| </View> | ||
| </View> | ||
| </View> | ||
| <Page.Intro main="disabled"></Page.Intro> | ||
| <View style={styles.row}> | ||
| <View style={styles.cellItem}> | ||
| <Switch disabled checked={true}/> | ||
| } | ||
| change = (item, value) => { | ||
| let obj = {}; | ||
| obj[item] = value; | ||
| this.setState(obj); | ||
| } | ||
| changeNotice = (item, value) => { | ||
| let obj = {}; | ||
| obj[item] = value; | ||
| this.setState(obj); | ||
| } | ||
| render() { | ||
| return ( | ||
| <StyleProvider style={md} androidConfigs={{ materialDesign: true }}> | ||
| <Page title="Switch"> | ||
| <Page.Intro main="非受控，组件checked 状态更新后，返回结果"></Page.Intro> | ||
| <View style={styles.row}> | ||
| <View style={styles.cellItem}> | ||
| <Switch key="switch3" defaultChecked={true} onValueChange={(value) => this.changeNotice('switch3', value)} /> | ||
| <View style={styles.cellResult}> | ||
| <Text style={styles.label}>switch3 返回: </Text> | ||
| <Text style={styles.text}>{this.state.switch3}</Text> | ||
| </View> | ||
| </View> | ||
| <View style={styles.cellItem}> | ||
| <Switch key="switch4" defaultChecked={false} onValueChange={(value) => this.changeNotice('switch4', value)} /> | ||
| <View style={styles.cellResult}> | ||
| <Text style={styles.label}>switch4 返回: </Text> | ||
| <Text style={styles.text}>{this.state.switch4}</Text> | ||
| </View> | ||
| </View> | ||
| </View> | ||
| <Page.Intro main="disabled"></Page.Intro> | ||
| <View style={styles.row}> | ||
| <View style={styles.cellItem}> | ||
| <Switch disabled checked={true} /> | ||
| </View> | ||
| <View style={styles.cellItem}> | ||
| <Switch disabled/> | ||
| </View> | ||
| </View> | ||
| </Page> | ||
| </StyleProvider > | ||
| ); | ||
| } | ||
| </View> | ||
| <View style={styles.cellItem}> | ||
| <Switch disabled /> | ||
| </View> | ||
| </View> | ||
| </Page> | ||
| </StyleProvider > | ||
| ); | ||
| } | ||
| } | ||
| const styles={ | ||
| row:{ | ||
| flexDirection:'row', | ||
| paddingLeft:'40rem', | ||
| marginBottom:'30rem' | ||
| }, | ||
| cellItem:{ | ||
| flex:1, | ||
| height:240, | ||
| }, | ||
| cellResult:{ | ||
| flexDirection:'row' | ||
| }, | ||
| text:{ | ||
| marginTop:20, | ||
| fontSize:24, | ||
| }, | ||
| label:{ | ||
| marginTop:20, | ||
| fontSize:24, | ||
| color:'#999999' | ||
| } | ||
| const styles = { | ||
| row: { | ||
| flexDirection: 'row', | ||
| paddingLeft: 40, | ||
| marginBottom: 30 | ||
| }, | ||
| cellItem: { | ||
| flex: 1, | ||
| height: 240, | ||
| }, | ||
| cellResult: { | ||
| flexDirection: 'row' | ||
| }, | ||
| text: { | ||
| marginTop: 20, | ||
| fontSize: 24, | ||
| }, | ||
| label: { | ||
| marginTop: 20, | ||
| fontSize: 24, | ||
| color: '#999999' | ||
| } | ||
| } | ||
| render(<App/>); | ||
| render(<App />); | ||
| ```` |
| # Changelog | ||
| ## 1.0.5 / 2018-01-03 | ||
| * [[2bd5b6f](http://gitlab.alibaba-inc.com/nuke/switch/commit/2bd5b6faea7d3aecb549e0134130b6d38845e660)] - `fix` fix switch docs | ||
| ## 1.0.4 / 2017-12-29 | ||
@@ -5,0 +9,0 @@ |
| { | ||
| "name": "nuke-switch", | ||
| "version": "1.0.4", | ||
| "version": "1.0.5", | ||
| "description": "开关", | ||
@@ -5,0 +5,0 @@ "main": "lib/index", |
@@ -16,2 +16,3 @@ # Switch | ||
| **注意：Switch 在客户端上是个非受控组件** | ||
@@ -21,34 +22,11 @@ 属性 | 说明 | 类型 | 默认值 | ||
| disabled | 开关是否可交互 | boolean | true | ||
| checked | 开启或关闭（受控用法，需与 onValueChange 配合使用） | boolean|false | ||
| defaultChecked | 默认是否选中（非受控用法） | boolean|false | ||
| onValueChange | Switch 改变时调用此函数 | function(value) | 无 | ||
| ### 受控用法与非受控用法 | ||
| ## Demo | ||
| 所有的输入、交互类组件都有受控用法和非受控用法 | ||
| 非受控用法： 组件自身自由改变，并通过事件通知外部改变成了什么。如下 demo : | ||
| - 受控用法： 组件状态受到外部传入的 props 影响，外部 props 改变，组件才改变，如下 demo : | ||
| ````js | ||
| constructor() { | ||
| super(); | ||
| this.state = { | ||
| checked: true | ||
| } | ||
| } | ||
| change = (value) => { | ||
| this.setState({ | ||
| checked:!value | ||
| }); | ||
| } | ||
| //... | ||
| render(){ | ||
| return (<Switch checked={this.state.checked} onValueChange={this.change}/>) | ||
| } | ||
| ```` | ||
| - 非受控用法： 组件自身自由改变，并通过事件通知外部改变成了什么。如下 demo : | ||
| ````js | ||
| change = (value) => { | ||
| console.log('switch 改变成了：',value); | ||
@@ -55,0 +33,0 @@ } |
@@ -1,2 +0,2 @@ | ||
| import {createElement, Component,render} from 'rax'; | ||
| import { createElement, Component, render } from 'rax'; | ||
| import Text from 'nuke-text'; | ||
@@ -6,98 +6,109 @@ import View from 'nuke-view'; | ||
| import Switch from 'nuke-switch'; | ||
| import ThemeProvider from 'nuke-theme-provider'; | ||
| const { StyleProvider } = ThemeProvider; | ||
| let md = { | ||
| Core: { | ||
| [`color-brand1-6`]: '#1A9CB7', | ||
| }, | ||
| Switch: { | ||
| } | ||
| }; | ||
| let App = class NukeDemoIndex extends Component { | ||
| constructor() { | ||
| super(); | ||
| this.state = { | ||
| switch1: true, | ||
| switch2: false, | ||
| switch3: null, | ||
| switch4: null, | ||
| } | ||
| constructor() { | ||
| super(); | ||
| this.state = { | ||
| switch1: true, | ||
| switch2: false, | ||
| switch3: null, | ||
| switch4: null, | ||
| } | ||
| change = (item,value) => { | ||
| let obj = {}; | ||
| obj[item]= value; | ||
| this.setState(obj); | ||
| } | ||
| changeNotice = (item,value) => { | ||
| let obj = {}; | ||
| obj[item]= value; | ||
| this.setState(obj); | ||
| } | ||
| render() { | ||
| return ( | ||
| <Page title="Switch"> | ||
| <Page.Intro main="受控，状态自行控制"></Page.Intro> | ||
| <View style={styles.row}> | ||
| <View style={styles.cellItem}> | ||
| <Switch key="switch1" checked={this.state.switch1} onValueChange={this.change.bind(this,'switch1')}/> | ||
| <View style={styles.cellResult}> | ||
| <Text style={styles.label}>switch1: </Text> | ||
| <Text style={styles.text}>{this.state.switch1}</Text> | ||
| </View> | ||
| </View> | ||
| <View style={styles.cellItem}> | ||
| <Switch key="switch2" checked={this.state.switch2} onValueChange={this.change.bind(this,'switch2')}/> | ||
| <View style={styles.cellResult}> | ||
| <Text style={styles.label}>switch2: </Text> | ||
| <Text style={styles.text}>{this.state.switch2}</Text> | ||
| </View> | ||
| </View> | ||
| </View> | ||
| <Page.Intro main="非受控，组件checked 状态更新后，返回结果"></Page.Intro> | ||
| <View style={styles.row}> | ||
| <View style={styles.cellItem}> | ||
| <Switch key="switch3" defaultChecked={true} onValueChange={(value)=> this.changeNotice('switch3',value)}/> | ||
| <View style={styles.cellResult}> | ||
| <Text style={styles.label}>switch3 返回: </Text> | ||
| <Text style={styles.text}>{this.state.switch3}</Text> | ||
| </View> | ||
| </View> | ||
| <View style={styles.cellItem}> | ||
| <Switch key="switch4" defaultChecked={false} onValueChange={(value) => this.changeNotice('switch4',value)}/> | ||
| <View style={styles.cellResult}> | ||
| <Text style={styles.label}>switch4 返回: </Text> | ||
| <Text style={styles.text}>{this.state.switch4}</Text> | ||
| </View> | ||
| </View> | ||
| </View> | ||
| <Page.Intro main="disabled"></Page.Intro> | ||
| <View style={styles.row}> | ||
| <View style={styles.cellItem}> | ||
| <Switch disabled checked={true}/> | ||
| } | ||
| change = (item, value) => { | ||
| let obj = {}; | ||
| obj[item] = value; | ||
| this.setState(obj); | ||
| } | ||
| changeNotice = (item, value) => { | ||
| let obj = {}; | ||
| obj[item] = value; | ||
| this.setState(obj); | ||
| } | ||
| render() { | ||
| return ( | ||
| <StyleProvider style={md} androidConfigs={{ materialDesign: true }}> | ||
| <Page title="Switch"> | ||
| <Page.Intro main="受控，状态自行控制"></Page.Intro> | ||
| <View style={styles.row}> | ||
| <View style={styles.cellItem}> | ||
| <Switch key="switch1" checked={this.state.switch1} onValueChange={this.change.bind(this, 'switch1')} /> | ||
| <View style={styles.cellResult}> | ||
| <Text style={styles.label}>switch1: </Text> | ||
| <Text style={styles.text}>{this.state.switch1}</Text> | ||
| </View> | ||
| </View> | ||
| <View style={styles.cellItem}> | ||
| <Switch key="switch2" checked={this.state.switch2} onValueChange={this.change.bind(this, 'switch2')} /> | ||
| <View style={styles.cellResult}> | ||
| <Text style={styles.label}>switch2: </Text> | ||
| <Text style={styles.text}>{this.state.switch2}</Text> | ||
| </View> | ||
| </View> | ||
| </View> | ||
| <Page.Intro main="非受控，组件checked 状态更新后，返回结果"></Page.Intro> | ||
| <View style={styles.row}> | ||
| <View style={styles.cellItem}> | ||
| <Switch key="switch3" defaultChecked={true} onValueChange={(value) => this.changeNotice('switch3', value)} /> | ||
| <View style={styles.cellResult}> | ||
| <Text style={styles.label}>switch3 返回: </Text> | ||
| <Text style={styles.text}>{this.state.switch3}</Text> | ||
| </View> | ||
| </View> | ||
| <View style={styles.cellItem}> | ||
| <Switch key="switch4" defaultChecked={false} onValueChange={(value) => this.changeNotice('switch4', value)} /> | ||
| <View style={styles.cellResult}> | ||
| <Text style={styles.label}>switch4 返回: </Text> | ||
| <Text style={styles.text}>{this.state.switch4}</Text> | ||
| </View> | ||
| </View> | ||
| </View> | ||
| <Page.Intro main="disabled"></Page.Intro> | ||
| <View style={styles.row}> | ||
| <View style={styles.cellItem}> | ||
| <Switch disabled checked={true} /> | ||
| </View> | ||
| <View style={styles.cellItem}> | ||
| <Switch disabled size="small" checked={true}/> | ||
| </View> | ||
| </View> | ||
| </Page> | ||
| ); | ||
| } | ||
| </View> | ||
| <View style={styles.cellItem}> | ||
| <Switch disabled /> | ||
| </View> | ||
| </View> | ||
| </Page> | ||
| </StyleProvider > | ||
| ); | ||
| } | ||
| } | ||
| const styles={ | ||
| row:{ | ||
| flexDirection:'row', | ||
| paddingLeft:'40rem', | ||
| marginBottom:'30rem' | ||
| }, | ||
| cellItem:{ | ||
| flex:1, | ||
| height:240, | ||
| }, | ||
| cellResult:{ | ||
| flexDirection:'row' | ||
| }, | ||
| text:{ | ||
| marginTop:20, | ||
| fontSize:24, | ||
| }, | ||
| label:{ | ||
| marginTop:20, | ||
| fontSize:24, | ||
| color:'#999999' | ||
| } | ||
| const styles = { | ||
| row: { | ||
| flexDirection: 'row', | ||
| paddingLeft: '40rem', | ||
| marginBottom: '30rem' | ||
| }, | ||
| cellItem: { | ||
| flex: 1, | ||
| height: 240, | ||
| }, | ||
| cellResult: { | ||
| flexDirection: 'row' | ||
| }, | ||
| text: { | ||
| marginTop: 20, | ||
| fontSize: 24, | ||
| }, | ||
| label: { | ||
| marginTop: 20, | ||
| fontSize: 24, | ||
| color: '#999999' | ||
| } | ||
| } | ||
| render(<App/>); | ||
| render(<App />); |
Fixed alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Improved metrics
- Lines of code
- increased by3.06%
404
- Number of medium supply chain risk alerts
- decreased by-100%
0
Worsened metrics
- Total package byte prevSize
- decreased by-7.22%
26200
- Number of lines in readme file
- decreased by-37.93%
36
No dependency changes