nuke-switch - npm Package Compare versions

Comparing version 1.0.7 to 2.0.0

HISTORY.md

 # Changelog 
 
 
+## 2.0.0 / 2018-03-23 
+
+  * [[6daf98d](http://gitlab.alibaba-inc.com/nuke/switch/commit/6daf98d80b7321b5a8363a720d3784494083923b)] - `fix` update dependencies 
+
 ## 1.0.7 / 2018-01-25 
@@ -5,0 +9,0 @@

lib/styles/index.js

@@ -7,9 +7,7 @@ 'use strict';
 
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
 var _hex = require('nuke-helper/lib/hex');
 
-var _variables = require('./variables');
+var _variable = require('./variable');
 
-var _variables2 = _interopRequireDefault(_variables);
+var _variable2 = _interopRequireDefault(_variable);
 
@@ -21,37 +19,31 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-  var Variables = (0, _variables2.default)(theme);
-  var core = theme.Core;
+  var Variables = (0, _variable2.default)(theme);
   return {
     Switch: {
-      native: {
-        width: Variables['wrap-width'],
-        height: Variables['wrap-height']
-      },
-      wrap: _extends({
-        width: Variables['wrap-width'],
-        height: Variables['wrap-height'],
-        minWidth: Variables['wrap-min-width'],
-        minHeight: Variables['wrap-min-height'],
+      wrap: {
+        width: Variables['wrap-width-android'],
+        height: Variables['wrap-height-android'],
         borderRadius: Variables['wrap-border-radius'],
         position: 'relative',
         display: 'inline-block',
-        margin: Variables['wrap-margin'],
-        padding: Variables['wrap-padding'],
+        margin: Variables['wrap-margin-android'],
+        padding: Variables['wrap-padding-android'],
         cursor: 'default', // pointer will cause a grey background color on chrome
-        verticalAlign: 'middle'
-      }, core.border(Variables['wrap-border-width'], 'solid', Variables['wrap-border-color']), {
+        verticalAlign: 'middle',
+        borderWidth: Variables['wrap-border-width-android'],
+
         WebkitUserSelect: 'none',
         WebkitBoxSizing: 'content-box',
         WebkitBackfaceVisibility: 'hidden'
-      }),
+      },
       checkedWrap: {
-        borderColor: Variables['checked-border-color'],
-        backgroundColor: Variables['checked-bg-color'],
-        boxShadow: Variables['checked-boxshadow-color'] + ' 0 0 0 16px inset',
+        borderColor: Variables['c-border-color-android'],
+        backgroundColor: Variables['c-bg-color-android'],
+        boxShadow: Variables['c-boxshadow-color-android'] + ' 0 0 0 16px inset',
         WebkitTransition: 'border 0.2s, box-shadow 0.2s, background-color 1s'
       },
       uncheckedWrap: {
-        borderColor: Variables['unchecked-border-color'], // '#dfdfdf',
-        backgroundColor: Variables['unchecked-bg-color'],
-        boxShadow: Variables['unchecked-boxshadow-color'] + ' 0 0 0 0 inset', // #dfdfdf
+        borderColor: Variables['unc-border-color'], // '#dfdfdf',
+        backgroundColor: Variables['unc-bg-color-android'],
+        boxShadow: Variables['unc-boxshadow-color-android'] + ' 0 0 0 0 inset', // #dfdfdf
         WebkitTransition: 'border 0.2s, box-shadow 0.2s'
@@ -64,17 +56,17 @@ },
       disabledCheckedWrap: {
-        borderColor: (0, _hex.rgba)(Variables['disabled-checked-border-color'], 0.5),
-        backgroundColor: Variables['disabled-checked-bg-color']
+        borderColor: (0, _hex.rgba)(Variables['dis-c-border-color-android'], 0.5),
+        backgroundColor: Variables['dis-c-bg-color-android']
       },
       disabledUnCheckedWrap: {
-        backgroundColor: Variables['disabled-unchecked-bg-color']
-        // borderColor: Variables['unchecked-border-color']
+        backgroundColor: Variables['dis-unc-bg-color-android']
+        // borderColor: Variables['unc-border-color']
       },
       dot: {
         position: 'absolute',
-        top: Variables['dot-top'],
-        left: Variables['dot-left'],
-        width: Variables['dot-size'], // 60,
-        height: Variables['dot-size'], // 60,
-        backgroundColor: Variables['dot-bg-color'],
-        borderRadius: Variables['dot-size'],
+        top: Variables['dot-top-android'],
+        left: Variables['dot-left-android'],
+        width: Variables['dot-size-android'], // 60,
+        height: Variables['dot-size-android'], // 60,
+        backgroundColor: Variables['dot-bg-color-android'],
+        borderRadius: Variables['dot-size-android'],
         boxShadow: '0 1px 3px rgba(0,0,0,0.4)',
@@ -84,4 +76,4 @@ WebkitTransition: '-webkit-transform 0.2s ease-in'
       checkedDot: {
-        WebkitTransform: 'translateX(' + Variables['dot-transform'] + 'rem)', // should with rem unit that the value is string type
-        backgroundColor: Variables['dot-checked-bg-color']
+        WebkitTransform: 'translateX(' + Variables['dot-transform-android'] + 'rem)', // should with rem unit that the value is string type
+        backgroundColor: Variables['dot-checked-bg-color-android']
       },
@@ -92,3 +84,61 @@ uncheckedDot: {
       disabledDot: {
-        backgroundColor: Variables['dot-disabled-bg-color']
+        backgroundColor: Variables['dot-disabled-bg-color-android']
+      },
+      wrapIOS: {
+        width: Variables['wrap-width-ios'],
+        height: Variables['wrap-height-ios'],
+        borderRadius: Variables['wrap-border-radius'],
+        position: 'relative',
+        display: 'inline-block',
+        margin: Variables['wrap-margin-ios'],
+        padding: Variables['wrap-padding-ios'],
+        cursor: 'default', // pointer will cause a grey background color on chrome
+        verticalAlign: 'middle',
+        borderWidth: Variables['wrap-border-width-ios'],
+        borderStyle: 'solid',
+        // borderColor: Variables['wrap-border-color'],// todo
+
+        WebkitUserSelect: 'none',
+        WebkitBoxSizing: 'content-box',
+        WebkitBackfaceVisibility: 'hidden'
+      },
+      checkedWrapIOS: {
+        borderColor: Variables['c-border-color-ios'],
+        backgroundColor: Variables['c-bg-color-ios'],
+        boxShadow: Variables['c-boxshadow-color-ios'] + ' 0 0 0 16px inset',
+        WebkitTransition: 'border 0.2s, box-shadow 0.2s, background-color 1s'
+      },
+      uncheckedWrapIOS: {
+        borderColor: Variables['unc-border-color'], // '#dfdfdf',
+        backgroundColor: Variables['unc-bg-color-ios'],
+        boxShadow: Variables['unc-boxshadow-color-ios'] + ' 0 0 0 0 inset', // #dfdfdf
+        WebkitTransition: 'border 0.2s, box-shadow 0.2s'
+      },
+
+      disabledCheckedWrapIOS: {
+        borderColor: (0, _hex.rgba)(Variables['dis-c-border-color-ios'], 0.5),
+        backgroundColor: Variables['dis-c-bg-color-ios']
+      },
+      disabledUnCheckedWrapIOS: {
+        backgroundColor: Variables['dis-unc-bg-color-ios']
+        // borderColor: Variables['unc-border-color']
+      },
+      dotIOS: {
+        position: 'absolute',
+        top: Variables['dot-top-ios'],
+        left: Variables['dot-left-ios'],
+        width: Variables['dot-size-ios'], // 60,
+        height: Variables['dot-size-ios'], // 60,
+        backgroundColor: Variables['dot-bg-color-ios'],
+        borderRadius: Variables['dot-size-ios'],
+        boxShadow: '0 1px 3px rgba(0,0,0,0.4)',
+        WebkitTransition: '-webkit-transform 0.2s ease-in'
+      },
+      checkedDotIOS: {
+        WebkitTransform: 'translateX(' + Variables['dot-transform-ios'] + 'rem)', // should with rem unit that the value is string type
+        backgroundColor: Variables['dot-checked-bg-color-ios']
+      },
+
+      disabledDotIOS: {
+        backgroundColor: Variables['dot-disabled-bg-color-ios']
       }
@@ -95,0 +145,0 @@ }

lib/view/switch.js

@@ -64,2 +64,3 @@ 'use strict';
           style = _props.style,
+          type = _props.type,
           value = _props.value,
@@ -69,3 +70,3 @@ disabled = _props.disabled,
           themeStyle = _props.themeStyle,
-          others = _objectWithoutProperties(_props, ['style', 'value', 'disabled', 'onValueChange', 'themeStyle']);
+          others = _objectWithoutProperties(_props, ['style', 'type', 'value', 'disabled', 'onValueChange', 'themeStyle']);
 
@@ -82,6 +83,11 @@ if (_nukeEnv.isWeex) {
       var styles = themeStyle;
-
+      var isIOS = _nukeEnv.appInfo.platform.toLowerCase() === 'ios' || type === 'iOS';
       var wrapStyle = Object.assign({}, styles.wrap, value ? styles.checkedWrap : styles.uncheckedWrap, disabled ? styles.disabledWrap : {}, disabled ? styles['disabled' + (value ? 'Checked' : 'UnChecked') + 'Wrap'] : {}, style);
+      if (isIOS) {
+        wrapStyle = Object.assign({}, styles.wrapIOS, value ? styles.checkedWrapIOS : styles.uncheckedWrapIOS, disabled ? styles.disabledWrapIOS : {}, disabled ? styles['disabled' + (value ? 'Checked' : 'UnChecked') + 'WrapIOS'] : {}, style);
+      }
       var dotStyle = Object.assign({}, styles.dot, value ? styles.checkedDot : styles.uncheckedDot, disabled ? styles.disabledDot : {});
-
+      if (isIOS) {
+        dotStyle = Object.assign({}, styles.dotIOS, value ? styles.checkedDotIOS : styles.uncheckedDotIOS, disabled ? styles.disabledDotIOS : {});
+      }
       return (0, _rax.createElement)(
@@ -88,0 +94,0 @@ 'span',

package.json

 {
   "name": "nuke-switch",
-  "version": "1.0.7",
+  "version": "2.0.0",
   "description": "开关",
@@ -47,5 +47,5 @@ "main": "lib/index",
   "dependencies": {
-    "nuke-env": "^1.x.x",
-    "nuke-theme-provider": "^1.0.x",
-    "nuke-helper": "0.x.x"
+    "nuke-env": "^2.x.x",
+    "nuke-theme-provider": "^2.x.x",
+    "nuke-helper": "2.x.x"
   },
@@ -59,6 +59,6 @@ "devDependencies": {
     "eslint-plugin-react": "7.1.0",
-    "nuke-button": "^1.0.10",
-    "nuke-page": "^1.x.x",
-    "nuke-text": "^0.x.x",
-    "nuke-view": "^1.x.x"
+    "nuke-button": "^2.x.x",
+    "nuke-page": "^2.x.x",
+    "nuke-text": "^2.x.x",
+    "nuke-view": "^2.x.x"
   },
@@ -65,0 +65,0 @@ "publishConfig": {

README.md

 # Switch
 
-- category: Components
-- chinese: 开关
-- type: 基本
+* category: Components
+* chinese: 开关
+* type: 基本
 
@@ -13,3 +13,2 @@ ---
 
-
 ## API
@@ -19,13 +18,14 @@
 
-属性 | 说明 | 类型 | 默认值
------|-----|-----|------
-disabled | 开关是否可交互 | boolean | true
-defaultChecked | 默认是否选中（非受控用法） | boolean|false
-onValueChange | Switch 改变时调用此函数 | function(value) | 无
+| 属性           | 说明                                                                          | 类型            | 默认值 |
+| -------------- | ----------------------------------------------------------------------------- | --------------- | ------ |
+| type           | 展现 安卓 还是 iOS 风格，如果不传，默认根据设备自动切换，可选 `android` `iOS` | 无              |
+| disabled       | 开关是否可交互                                                                | boolean         | true   |
+| defaultChecked | 默认是否选中（非受控用法）                                                    | boolean         | false  |
+| onValueChange  | Switch 改变时调用此函数                                                       | function(value) | 无     |
 
 ## Demo
 
- 非受控用法： 组件自身自由改变，并通过事件通知外部改变成了什么。如下 demo :
+非受控用法： 组件自身自由改变，并通过事件通知外部改变成了什么。如下 demo :
 
-````js
+```js
 change = (value) => {
@@ -38,2 +38,2 @@ console.log('switch 改变成了：',value);
 }
-````
+```

theme/index.jsx

 import { createElement, Component, render } from 'rax';
 import Text from 'nuke-text';
 import View from 'nuke-view';
-import Page from 'nuke-page';
+
 import Switch from 'nuke-switch';
 import ThemeProvider from 'nuke-theme-provider';
+import {
+  decodeVar,
+  DemoContainer,
+  DemoSection,
+  Demo,
+  DemoItem,
+  initDemo,
+} from '@alife/nuke-demo-helper';
 
 const { StyleProvider } = ThemeProvider;
-let md = {
-  Core: {
-    [`color-brand1-6`]: '#1A9CB7',
-  },
-  Switch: {
 
-  }
-};
-let App = class NukeDemoIndex extends Component {
+const App = class NukeDemoIndex extends Component {
   constructor() {
@@ -25,90 +26,53 @@ super();
       switch4: null,
-    }
+    };
   }
   change = (item, value) => {
-    let obj = {};
+    const obj = {};
     obj[item] = value;
     this.setState(obj);
-  }
+  };
   changeNotice = (item, value) => {
-    let obj = {};
+    const 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} />
+      <StyleProvider style={decodeVar(this.props.variable)}>
+        <DemoContainer>
+          <DemoSection title="type">
+            <Demo>
+              <DemoItem direction="column">
+                <Switch
+                  style={styles.item}
+                  key="switch1"
+                  checked={this.state.switch1}
+                  onValueChange={this.change.bind(this, 'switch1')}
+                />
 
-            </View>
-            <View style={styles.cellItem}>
-              <Switch disabled />
-            </View>
-          </View>
-        </Page>
-      </StyleProvider >
+                <Switch
+                  style={styles.item}
+                  key="switch2"
+                  checked={this.state.switch2}
+                  onValueChange={this.change.bind(this, 'switch2')}
+                />
+              </DemoItem>
+            </Demo>
+          </DemoSection>
+        </DemoContainer>
+      </StyleProvider>
     );
   }
-}
+};
 const styles = {
-  row: {
-    flexDirection: 'row',
-    paddingLeft: '40rem',
-    marginBottom: '30rem'
+  item: {
+    marginBottom: 30,
   },
-  cellItem: {
-    flex: 1,
-    height: 240,
-  },
-  cellResult: {
-    flexDirection: 'row'
-  },
-  text: {
-    marginTop: 20,
-    fontSize: 24,
-  },
-  label: {
-    marginTop: 20,
-    fontSize: 24,
-    color: '#999999'
-  }
-}
-render(<App />);
+};
+window.renderDemo = function (variable, lang) {
+  render(<App variable={variable} />);
+};
+
+renderDemo();
+
+initDemo('switch');

New alerts

Major refactor

Supply chain risk

Package 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

Total package byte prevSize

31367

increased by16.3%

Lines of code

587

increased by62.6%

Number of lines in readme file

37

increased by2.78%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addednuke-core@2.3.12(transitive)

• + Addednuke-env@2.3.12(transitive)

• + Addednuke-helper@2.3.12(transitive)

• + Addednuke-theme-provider@2.3.12(transitive)

• - Removednuke-core@1.0.5(transitive)

• - Removednuke-env@1.0.1(transitive)

• - Removednuke-helper@0.0.11(transitive)

• - Removednuke-theme-provider@1.0.8(transitive)

• - Removedua-parser-js@0.7.39(transitive)

• - Removeduniversal-env@0.4.20(transitive)

• Updatednuke-env@^2.x.x

• Updatednuke-helper@2.x.x

• Updatednuke-theme-provider@^2.x.x