rox-dialog - npm Package Compare versions

Comparing version 0.0.19 to 0.0.20

lib/alert.js

@@ -11,5 +11,5 @@ 'use strict';
 
-var _nukeDialog = require('nuke-dialog');
+var _dialog = require('./dialog');
 
-var _nukeDialog2 = _interopRequireDefault(_nukeDialog);
+var _dialog2 = _interopRequireDefault(_dialog);
 
@@ -45,2 +45,3 @@ var _roxButton = require('rox-button');
 var DURATION_TIME = 1000;
+var BORDER_RADIUS = 12;
 
@@ -75,51 +76,24 @@ var Alert = function (_Component) {
           okText = _props.okText,
-          titleText = _props.titleText;
+          titleText = _props.titleText,
+          disabledTitle = _props.disabledTitle,
+          _props$contentStyle = _props.contentStyle,
+          contentStyle = _props$contentStyle === undefined ? {} : _props$contentStyle;
 
-      titleText = titleText || '温馨提示';
-      okText = okText || '确认';
-      // onHide = onHide || this.hide;
       return (0, _rax.createElement)(
-        _nukeDialog2.default,
+        _dialog2.default,
         { ref: 'alert',
-          duration: DURATION_TIME,
-          maskClosable: false,
-          contentStyle: _styles2.default.modalStyle
-        },
-        (0, _rax.createElement)(
-          _roxView2.default,
-          { style: _styles2.default.body },
-          (0, _rax.createElement)(
-            _roxView2.default,
-            { style: _styles2.default.head },
-            (0, _rax.createElement)(
-              _roxText2.default,
-              { style: _styles2.default.textHead },
-              titleText
-            )
-          ),
-          (0, _rax.createElement)(
-            _roxScrollview2.default,
-            { style: _styles2.default.tips },
-            (0, _rax.createElement)(
-              _roxText2.default,
-              { style: _styles2.default.text },
-              this.props.children
-            )
-          )
-        ),
-        (0, _rax.createElement)(
-          _roxView2.default,
-          { style: _styles2.default.footer },
-          (0, _rax.createElement)(
+          disabledTitle: disabledTitle,
+          titleText: titleText,
+          contentStyle: contentStyle,
+          buttons: [(0, _rax.createElement)(
             _roxButton2.default,
-            { style: [_styles2.default.dlgBtn, {
-                borderRadius: 0,
-                color: '#333333',
-                borderTopWidth: 1,
-                borderBottomLeftRadius: 5,
-                borderBottomRightRadius: 5
-              }], type: 'normal', size: 'large', onPress: this.hide },
+            {
+              style: _styles2.default.buttonAlert,
+              type: 'normal',
+              size: 'large',
+              onPress: this.hide },
             okText
-          )
-        )
+          )]
+        },
+        this.props.children
       );
@@ -133,3 +107,16 @@ }
 Alert.displayName = 'Alert';
+
+Alert.displayName = 'Alert';
+
+Alert.defaultProps = {
+  okText: '确认',
+  titleText: '温馨提示',
+  disabledTitle: false
+};
+Alert.propTypes = {
+  okText: _rax.PropTypes.string,
+  titleText: _rax.PropTypes.string,
+  disabledTitle: _rax.PropTypes.boolean
+};
 exports.default = Alert;
 module.exports = exports['default'];

lib/confirm.js

@@ -11,5 +11,5 @@ 'use strict';
 
-var _nukeDialog = require('nuke-dialog');
+var _dialog = require('./dialog');
 
-var _nukeDialog2 = _interopRequireDefault(_nukeDialog);
+var _dialog2 = _interopRequireDefault(_dialog);
 
@@ -44,3 +44,4 @@ var _roxButton = require('rox-button');
 
-var BORDER_RADIUS = 5;
+var DURATION_TIME = 1000;
+var BORDER_RADIUS = 12;
 
@@ -89,43 +90,16 @@ var Confirm = function (_Component) {
           cancelText = _props2.cancelText,
-          titleText = _props2.titleText;
+          titleText = _props2.titleText,
+          disabledTitle = _props2.disabledTitle,
+          _props2$contentStyle = _props2.contentStyle,
+          contentStyle = _props2$contentStyle === undefined ? {} : _props2$contentStyle;
 
-      titleText = titleText || '温馨提示';
-      cancelText = cancelText || '取消';
-      okText = okText || '确认';
       return (0, _rax.createElement)(
-        _nukeDialog2.default,
+        _dialog2.default,
         { ref: 'confirm',
-          duration: 1000,
-          maskClosable: false,
-          contentStyle: _styles2.default.modalStyle
-        },
-        (0, _rax.createElement)(
-          _roxView2.default,
-          { style: _styles2.default.body },
-          (0, _rax.createElement)(
-            _roxView2.default,
-            { style: _styles2.default.head },
-            (0, _rax.createElement)(
-              _roxText2.default,
-              { style: _styles2.default.textHead },
-              titleText
-            )
-          ),
-          (0, _rax.createElement)(
-            _roxScrollview2.default,
-            { style: _styles2.default.tips },
-            (0, _rax.createElement)(
-              _roxText2.default,
-              { style: _styles2.default.text },
-              this.props.children
-            )
-          )
-        ),
-        (0, _rax.createElement)(
-          _roxView2.default,
-          { style: _styles2.default.footer },
-          (0, _rax.createElement)(
+          disabledTitle: disabledTitle,
+          titleText: titleText,
+          contentStyle: contentStyle,
+          buttons: [(0, _rax.createElement)(
             _roxButton2.default,
-            { style: [_styles2.default.dlgBtn, {
-                borderRadius: 0,
+            { style: [_styles2.default.buttonConfirm, {
                 color: '#333333',
@@ -138,8 +112,7 @@ borderTopWidth: 1,
             cancelText
-          ),
-          (0, _rax.createElement)(
+          ), (0, _rax.createElement)(
             _roxButton2.default,
-            { style: [_styles2.default.dlgBtn, {
+            { style: [_styles2.default.buttonConfirm, {
+                color: '#ffffff',
                 borderRadius: 0,
-                color: '#ffffff',
                 borderBottomRightRadius: BORDER_RADIUS
@@ -150,4 +123,5 @@ }], type: 'primary', size: 'large', onPress: function onPress() {
             okText
-          )
-        )
+          )]
+        },
+        this.props.children
       );
@@ -161,3 +135,16 @@ }
 Confirm.displayName = 'Confirm';
+
+Confirm.displayName = 'Alert';
+
+Confirm.defaultProps = {
+  okText: '确认',
+  cancelText: '取消',
+  titleText: '温馨提示'
+};
+Confirm.propTypes = {
+  okText: _rax.PropTypes.string,
+  cancelText: _rax.PropTypes.string,
+  titleText: _rax.PropTypes.string
+};
 exports.default = Confirm;
 module.exports = exports['default'];

lib/index.js

@@ -9,2 +9,4 @@ 'use strict';
 
+var _nukeThemeProvider = require('nuke-theme-provider');
+
 var _nukeDialog = require('nuke-dialog');
@@ -26,3 +28,6 @@
 _nukeDialog2.default.Alert = _alert2.default;
+
+// const StyledIcon = connectStyle(stylesProvider)(Icon);
+
 exports.default = _nukeDialog2.default;
 module.exports = exports['default'];

lib/styles.js

@@ -7,22 +7,30 @@ 'use strict';
 
-
+var BORDER_RADIUS = 12;
+var BODY_PADDING = 48;
+var HEAD_HEIGHT = 44;
+var headFontSize = 36;
 var styles = {
   modalStyle: {
     width: 612,
-    height: 322,
-    // padding:'10rem',
-    borderRadius: 12
+    minHeight: 332,
+    borderRadius: BORDER_RADIUS
   },
+
   body: {
     flex: 1,
-    paddingLeft: 48,
-    paddingRight: 48,
-    paddingTop: 30,
+    paddingLeft: BODY_PADDING,
+    paddingRight: BODY_PADDING,
+    paddingTop: BODY_PADDING,
+    paddingBottom: BODY_PADDING,
+
     // justifyContent: 'center',
-    borderRadius: '8rem',
-    backgroundColor: '#ffffff'
+    borderTopLeftRadius: BORDER_RADIUS,
+    borderTopRightRadius: BORDER_RADIUS,
+    backgroundColor: '#ffffff',
+    overflow: 'hidden'
   },
+
   head: {
-    height: 50,
-    alignItems: 'left',
+    height: HEAD_HEIGHT,
+    alignItems: 'center',
     justifyContent: 'center'
@@ -33,14 +41,23 @@ },
     color: '#333333',
-    fontSize: 36
+    fontSize: headFontSize,
+    height: HEAD_HEIGHT,
+    lineHeight: HEAD_HEIGHT,
+    overflow: 'hidden'
   },
-  tips: {
-    paddingTop: 12,
-    height: 120,
+
+  content: {
+    minHeight: 72,
+    // height: 112,
+    maxHeight: 600,
+    marginTop: 24,
+    // borderWidth: 1,
+    overflow: 'hidden',
     alignItems: 'center',
     justifyContent: 'center'
   },
-  text: {
+  contentText: {
+    // borderWidth: 1,
     fontSize: 28,
-    lines: 3,
-    '-webkit-line-clamp': 3,
+    lines: 5,
+    '-webkit-line-clamp': 5,
     overflow: 'hidden',
@@ -56,22 +73,20 @@ lineHeight: '40rem',
     borderTopStyle: 'solid',
-    borderTopWidth: 1,
+    borderTopWidth: 0,
+
     alignItems: 'center',
-    justifyContent: 'flex-end',
-    height: '94rem'
+    justifyContent: 'flex-end'
   },
-  dlgBtn: {
+  buttonConfirm: {
     flex: 1,
+    borderRadius: 0,
     borderWidth: 0
   },
-  dlgBtnSeperator: {
-    color: '#dddddd'
-  },
-  button: {
-    width: '300rem',
-    height: '60rem',
-    borderWidth: '1rem',
-    borderStyle: 'solid',
-    borderColor: '#ccc',
-    alignItems: 'center',
-    justifyContent: 'center'
+  buttonAlert: {
+    flex: 1,
+    borderRadius: 0,
+    color: '#333333',
+    borderWidth: 0,
+    borderTopWidth: 1,
+    borderBottomLeftRadius: BORDER_RADIUS,
+    borderBottomRightRadius: BORDER_RADIUS
   }
@@ -78,0 +93,0 @@ };

package.json

 {
   "name": "rox-dialog",
-  "version": "0.0.19",
+  "version": "0.0.20",
   "description": "",
@@ -18,7 +18,7 @@ "main": "lib/index.js",
     "nuke-dialog": "^1.0.2",
-    "rox-button": "^0.0.19",
-    "rox-scrollview": "^0.0.19",
-    "rox-text": "^0.0.19",
-    "rox-view": "^0.0.19"
+    "rox-button": "^0.0.20",
+    "rox-scrollview": "^0.0.20",
+    "rox-text": "^0.0.20",
+    "rox-view": "^0.0.20"
   }
 }

README.md

 # rox-dialog
 
-组件描述...
+- category: UI
+- chinese: 对话框
+
+---
+
+### 说明
+包含 默认 Dialog 组件，另外还有订制的 `Dialog.Alert`, `Dialog.Confirm`
+
+## Guide
+
+Dialog 的实现方式是通过Weex 中的 Mask 标签进行包装实现, 使用方式如下：
+
+
+
+## API - Dialog
+
+| 参数      | 说明                                     | 类型          | 默认值 |
+|-----------|------------------------------------------|---------------|--------|
+| contentStyle   | 触发元素       | Element        |   |
+| triggerType   | 触发行为，可选 `hover/click`       | string        | hover  |
+| align | 气泡框位置，可选 `t,r,b,l,tl,tr,rt,rb,bl,br,lt,lb` | string        | t    |
+| closable | 是否有关闭按钮 |  bool        | true   |
+| visible   | 用于手动控制浮层显隐                     | boolean       | false  |
+| onClose   | 关闭时触发回调                     | function       |   |
+| afterClose   | 关闭后触发回调                     | function       | false  |
+
+
+
+## API - Dialog.Alert
+
+| 参数      | 说明                                     | 类型          | 默认值 |
+|-----------|------------------------------------------|---------------|--------|
+| titleText   | 标题文字                 | String       | 温馨提醒  |
+| disabledTitle   | 禁用标题                 | Boolean       | false  |
+| okText   | 确认文字                     | String       | 确定  |
+
+
+
+
+## API - Dialog.Confirm
+
+| 参数      | 说明                                     | 类型          | 默认值 |
+|-----------|------------------------------------------|---------------|--------|
+| titleText   | 标题文字                 | String       | 温馨提醒  |
+| okText   | 确认文案                 | String       | 确定  |
+| cancelText   | 取消文案                     | String       | 取消  |
+
+
+
+
+## 事例方法
+
+通过 ref 的方式获取当前 组件，调用 内部 的方法，控制 对话框 的展示与隐藏
+
+| 参数      | 说明                                     | 类型          | 默认值 |
+|-----------|------------------------------------------|---------------|--------|
+| show   | 展示对话框      | Function       |   |
+| hide   | 隐藏对话框      | Function       |   |
+
+
+
+

No alert changes

Improved metrics

Total package byte prevSize

19174

increased by51.39%

Number of package files

7

increased by16.67%

Lines of code

406

increased by27.27%

Number of lines in readme file

65

increased by1525%

Dependency changes

• + Addedrox-button@0.0.20(transitive)

• + Addedrox-scrollview@0.0.20(transitive)

• + Addedrox-text@0.0.20(transitive)

• + Addedrox-view@0.0.20(transitive)

• - Removedrox-button@0.0.19(transitive)

• - Removedrox-scrollview@0.0.19(transitive)

• - Removedrox-text@0.0.19(transitive)

• - Removedrox-view@0.0.19(transitive)

• Updatedrox-button@^0.0.20

• Updatedrox-scrollview@^0.0.20

• Updatedrox-text@^0.0.20

• Updatedrox-view@^0.0.20