From 7b569301852a5e97c99b0603a479f589400ece65 Mon Sep 17 00:00:00 2001 From: Wasin Thonkaew Date: Sun, 12 Mar 2017 00:26:13 +0800 Subject: [PATCH 1/4] Set .eslintrc to show lint warning/error The reason is that starting from version 1.0 of ESLint, all linting rules are turned off by default. --- .eslintrc | 59 ++++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 58 insertions(+), 1 deletion(-) diff --git a/.eslintrc b/.eslintrc index 64e315b..3d170ce 100644 --- a/.eslintrc +++ b/.eslintrc @@ -21,5 +21,62 @@ "globals": { "it": true, "describe": true, - } + }, + "rules": { + "no-alert": 2, + "no-array-constructor": 2, + "no-caller": 2, + "no-catch-shadow": 2, + "no-empty-label": 2, + "no-eval": 2, + "no-extend-native": 2, + "no-extra-bind": 2, + "no-implied-eval": 2, + "no-iterator": 2, + "no-label-var": 2, + "no-labels": 2, + "no-lone-blocks": 2, + "no-loop-func": 2, + "no-multi-spaces": 2, + "no-multi-str": 2, + "no-native-reassign": 2, + "no-new": 2, + "no-new-func": 2, + "no-new-object": 2, + "no-new-wrappers": 2, + "no-octal-escape": 2, + "no-process-exit": 2, + "no-proto": 2, + "no-return-assign": 2, + "no-script-url": 2, + "no-sequences": 2, + "no-shadow": 2, + "no-shadow-restricted-names": 2, + "no-spaced-func": 2, + "no-trailing-spaces": 2, + "no-undef-init": 2, + "no-underscore-dangle": 2, + "no-unused-expressions": 2, + "no-use-before-define": 2, + "no-with": 2, + "camelcase": 2, + "comma-spacing": 2, + "consistent-return": 2, + "curly": [2, "all"], + "dot-notation": [2, { "allowKeywords": true }], + "eol-last": 2, + "no-extra-parens": [2, "functions"], + "eqeqeq": 2, + "key-spacing": [2, { "beforeColon": false, "afterColon": true }], + "new-cap": 2, + "new-parens": 2, + "quotes": [2, "double"], + "semi": 2, + "semi-spacing": [2, {"before": false, "after": true}], + "space-infix-ops": 2, + "space-return-throw-case": 2, + "space-unary-ops": [2, { "words": true, "nonwords": false }], + "strict": [2, "function"], + "yoda": [2, "never"] + } } \ No newline at end of file From 08e50f43e41b97c4d965264bbfc9260476f6daca Mon Sep 17 00:00:00 2001 From: Wasin Thonkaew Date: Sun, 12 Mar 2017 02:38:37 +0800 Subject: [PATCH 2/4] Update ESLint v. and its rules and fix warnings/errors across project - already tested via `npm run test` and all tests passed. - most of code fixed across the project are about semi colon, space after if/else if/else/for statement, removed newline at the end of file, a few dangerous code statement fixed, and a few that is not needed. - ESlint is updated to version 3.17.1. The project has used version 1.x.x. This should be better. - ESLint's rules are updated to be more stricted but not too strict. See it in .eslintrc. --- .eslintrc | 107 ++++++++---------- package.json | 2 +- src/components/actionsheet/actionsheet.js | 12 +- src/components/badge/badge.js | 10 +- src/components/badge/index.js | 2 +- src/components/button/button.js | 4 +- src/components/button/button_preview.js | 8 +- src/components/cell/cell.js | 4 +- src/components/cell/cell_body.js | 4 +- src/components/cell/cell_footer.js | 6 +- src/components/cell/cell_header.js | 6 +- src/components/cell/cells.js | 8 +- src/components/dialog/dialog.js | 8 +- src/components/flex/flex.js | 2 +- src/components/flex/flex_item.js | 8 +- src/components/footer/footer.js | 2 +- src/components/footer/footer_link.js | 2 +- src/components/footer/footer_links.js | 2 +- src/components/footer/footer_text.js | 2 +- src/components/form/agreement.js | 2 +- src/components/form/checkbox.js | 2 +- src/components/form/form_cell.js | 10 +- src/components/form/input.js | 6 +- src/components/form/preview.js | 6 +- src/components/form/preview_body.js | 6 +- src/components/form/preview_footer.js | 6 +- src/components/form/preview_header.js | 6 +- src/components/form/preview_item.js | 10 +- src/components/form/radio.js | 2 +- src/components/form/select.js | 2 +- src/components/form/slider.js | 86 +++++++------- src/components/form/switch.js | 2 +- src/components/form/textarea.js | 2 +- src/components/form/uploader.js | 64 +++++------ src/components/form/vcode.js | 2 +- src/components/gallery/gallery.js | 4 +- src/components/grid/grids.js | 2 +- src/components/icon/icon.js | 9 +- .../infiniteloader/infiniteloader.js | 37 +++--- src/components/label/label.js | 2 +- src/components/loadmore/loadmore.js | 8 +- src/components/mediabox/mediabox_header.js | 4 +- src/components/mediabox/mediabox_info.js | 2 +- src/components/msg/msg.js | 10 +- src/components/panel/panel.js | 4 +- src/components/picker/city_picker.js | 51 ++++----- src/components/picker/index.js | 2 +- src/components/picker/picker.js | 36 +++--- src/components/picker/picker_group.js | 92 +++++++-------- src/components/popup/index.js | 2 +- src/components/popup/popup.js | 6 +- src/components/popup/popup_header.js | 8 +- src/components/progress/progress.js | 12 +- src/components/ptr/ptr.js | 75 ++++++------ src/components/searchbar/searchbar.js | 22 ++-- src/components/tab/tab.js | 32 +++--- src/components/tab/tabbar_item.js | 6 +- src/components/toast/toast.js | 2 +- src/components/toptips/toptips.js | 2 +- src/utils/deprecationWarning.js | 4 +- src/utils/mobile_detect.js | 12 +- test/tab.js | 104 ++++++++--------- test/toast.js | 2 +- 63 files changed, 479 insertions(+), 486 deletions(-) diff --git a/.eslintrc b/.eslintrc index 3d170ce..2611ada 100644 --- a/.eslintrc +++ b/.eslintrc @@ -13,7 +13,53 @@ "strict": [2, "never"], "react/jsx-uses-react": 2, "react/jsx-uses-vars": 2, - "react/react-in-jsx-scope": 2 + "react/react-in-jsx-scope": 2, + "no-alert": 2, + "no-array-constructor": 2, + "no-caller": 2, + "no-catch-shadow": 2, + "no-labels": 2, + "no-eval": 2, + "no-extend-native": 2, + "no-extra-bind": 2, + "no-implied-eval": 2, + "no-iterator": 2, + "no-label-var": 2, + "no-lone-blocks": 2, + "no-loop-func": 2, + "no-multi-spaces": 2, + "no-multi-str": 2, + "no-native-reassign": 2, + "no-new": 2, + "no-new-func": 2, + "no-new-object": 2, + "no-new-wrappers": 2, + "no-octal-escape": 2, + "no-process-exit": 2, + "no-proto": 2, + "no-return-assign": 2, + "no-sequences": 2, + "no-shadow": 2, + "no-shadow-restricted-names": 2, + "no-spaced-func": 2, + "no-trailing-spaces": 2, + "no-undef-init": 2, + "no-unused-expressions": 2, + "no-use-before-define": 2, + "no-with": 2, + "comma-spacing": 2, + "consistent-return": 2, + "no-extra-parens": [2, "functions"], + "eqeqeq": 2, + "key-spacing": [2, { "beforeColon": false, "afterColon": true }], + "new-cap": 2, + "new-parens": 2, + "semi": 2, + "semi-spacing": [2, {"before": false, "after": true}], + "space-infix-ops": 1, + "keyword-spacing": 2, + "space-unary-ops": [2, { "words": true, "nonwords": false }], + "yoda": [2, "never"] }, "plugins": [ "react" @@ -21,62 +67,5 @@ "globals": { "it": true, "describe": true, - }, - "rules": { - "no-alert": 2, - "no-array-constructor": 2, - "no-caller": 2, - "no-catch-shadow": 2, - "no-empty-label": 2, - "no-eval": 2, - "no-extend-native": 2, - "no-extra-bind": 2, - "no-implied-eval": 2, - "no-iterator": 2, - "no-label-var": 2, - "no-labels": 2, - "no-lone-blocks": 2, - "no-loop-func": 2, - "no-multi-spaces": 2, - "no-multi-str": 2, - "no-native-reassign": 2, - "no-new": 2, - "no-new-func": 2, - "no-new-object": 2, - "no-new-wrappers": 2, - "no-octal-escape": 2, - "no-process-exit": 2, - "no-proto": 2, - "no-return-assign": 2, - "no-script-url": 2, - "no-sequences": 2, - "no-shadow": 2, - "no-shadow-restricted-names": 2, - "no-spaced-func": 2, - "no-trailing-spaces": 2, - "no-undef-init": 2, - "no-underscore-dangle": 2, - "no-unused-expressions": 2, - "no-use-before-define": 2, - "no-with": 2, - "camelcase": 2, - "comma-spacing": 2, - "consistent-return": 2, - "curly": [2, "all"], - "dot-notation": [2, { "allowKeywords": true }], - "eol-last": 2, - "no-extra-parens": [2, "functions"], - "eqeqeq": 2, - "key-spacing": [2, { "beforeColon": false, "afterColon": true }], - "new-cap": 2, - "new-parens": 2, - "quotes": [2, "double"], - "semi": 2, - "semi-spacing": [2, {"before": false, "after": true}], - "space-infix-ops": 2, - "space-return-throw-case": 2, - "space-unary-ops": [2, { "words": true, "nonwords": false }], - "strict": [2, "function"], - "yoda": [2, "never"] - } + } } \ No newline at end of file diff --git a/package.json b/package.json index a9a278e..16a0715 100644 --- a/package.json +++ b/package.json @@ -64,7 +64,7 @@ "codemirror": "^5.20.2", "css-loader": "^0.23.0", "enzyme": "^2.6.0", - "eslint": "^1.10.3", + "eslint": "^3.17.1", "eslint-plugin-react": "^3.11.3", "extract-text-webpack-plugin": "^1.0.1", "fastclick": "^1.0.6", diff --git a/src/components/actionsheet/actionsheet.js b/src/components/actionsheet/actionsheet.js index 6c50b2f..b024cae 100644 --- a/src/components/actionsheet/actionsheet.js +++ b/src/components/actionsheet/actionsheet.js @@ -53,7 +53,7 @@ class ActionSheet extends Component { isAndroid: '' }; - this.handleMaskClick = this.handleMaskClick.bind(this) + this.handleMaskClick = this.handleMaskClick.bind(this); } renderMenuItem() { @@ -85,7 +85,7 @@ class ActionSheet extends Component { } handleMaskClick(e){ - if(this.props.onRequestClose) this.props.onRequestClose(e) + if (this.props.onRequestClose) this.props.onRequestClose(e); } componentDidMount(){ @@ -104,13 +104,13 @@ class ActionSheet extends Component { let styleType = type ? type : 'ios'; - if(!type && autoDectect){ - if(this.state.isAndroid) styleType = 'android'; + if (!type && autoDectect){ + if (this.state.isAndroid) styleType = 'android'; } return (
@@ -126,4 +126,4 @@ class ActionSheet extends Component { } }; -export default ActionSheet; +export default ActionSheet; \ No newline at end of file diff --git a/src/components/badge/badge.js b/src/components/badge/badge.js index d8840ec..3370010 100644 --- a/src/components/badge/badge.js +++ b/src/components/badge/badge.js @@ -1,5 +1,5 @@ import React, { Component, PropTypes } from 'react'; -import classNames from 'classnames' +import classNames from 'classnames'; const presetStyles = { 'default': {}, @@ -15,7 +15,7 @@ const presetStyles = { marginLeft: '5px', marginRight: '5px' } -} +}; /** * Small status descriptors for UI elements. * @@ -44,10 +44,10 @@ class Badge extends Component { const { children, className, dot, style, preset, ...domProps } = this.props; let clz = classNames('weui-badge', { 'weui-badge_dot': dot - }, className) + }, className); - let stylez = Object.assign({}, presetStyles[preset], style) - return {children} + let stylez = Object.assign({}, presetStyles[preset], style); + return {children}; } } diff --git a/src/components/badge/index.js b/src/components/badge/index.js index a163625..8977aaa 100644 --- a/src/components/badge/index.js +++ b/src/components/badge/index.js @@ -1,3 +1,3 @@ -import Badge from './badge' +import Badge from './badge'; export default Badge; \ No newline at end of file diff --git a/src/components/button/button.js b/src/components/button/button.js index ecfb97c..e5def7d 100644 --- a/src/components/button/button.js +++ b/src/components/button/button.js @@ -28,8 +28,8 @@ export default class Button extends React.Component { render() { const { component, type, size, plain, className, children, ...others } = this.props; - const Component = component ? component : this.props.href || type == 'vcode' ? 'a' : 'button'; - const cls = type == 'vcode' ? classNames('weui-vcode-btn', {[className]: className}) : classNames({ + const Component = component ? component : this.props.href || type === 'vcode' ? 'a' : 'button'; + const cls = type === 'vcode' ? classNames('weui-vcode-btn', {[className]: className}) : classNames({ 'weui-btn': true, 'weui-btn_mini': size === 'small', 'weui-btn_primary': type === 'primary' && !plain, diff --git a/src/components/button/button_preview.js b/src/components/button/button_preview.js index e4ab730..211f892 100644 --- a/src/components/button/button_preview.js +++ b/src/components/button/button_preview.js @@ -5,8 +5,8 @@ const PreviewButton = (props) => { const { className, primary, children, ...others } = props; const cls = classNames({ 'weui-form-preview__btn': true, - 'weui-form-preview__btn_default' : !primary, - 'weui-form-preview__btn_primary' : primary, + 'weui-form-preview__btn_default': !primary, + 'weui-form-preview__btn_primary': primary, [className]: className }); @@ -23,11 +23,11 @@ PreviewButton.propTypes = { * */ primary: PropTypes.bool -} +}; PreviewButton.defaultProps = { primary: false -} +}; export default PreviewButton; diff --git a/src/components/cell/cell.js b/src/components/cell/cell.js index 5c40132..70c34e1 100644 --- a/src/components/cell/cell.js +++ b/src/components/cell/cell.js @@ -45,11 +45,11 @@ Cell.propTypes = { * */ component: PropTypes.func -} +}; Cell.defaultProps = { access: false, link: false, -} +}; export default Cell; \ No newline at end of file diff --git a/src/components/cell/cell_body.js b/src/components/cell/cell_body.js index daad5c4..d8e7745 100644 --- a/src/components/cell/cell_body.js +++ b/src/components/cell/cell_body.js @@ -24,10 +24,10 @@ CellBody.propTypes = { * */ primary: PropTypes.bool, -} +}; CellBody.defaultProps = { primary: false, -} +}; export default CellBody; \ No newline at end of file diff --git a/src/components/cell/cell_footer.js b/src/components/cell/cell_footer.js index cbe79d0..431dc41 100644 --- a/src/components/cell/cell_footer.js +++ b/src/components/cell/cell_footer.js @@ -24,10 +24,10 @@ CellFooter.propTypes = { * */ primary: PropTypes.bool, -} +}; CellFooter.defaultProps = { primary: false, -} +}; -export default CellFooter \ No newline at end of file +export default CellFooter; \ No newline at end of file diff --git a/src/components/cell/cell_header.js b/src/components/cell/cell_header.js index 6384daa..0dfb307 100644 --- a/src/components/cell/cell_header.js +++ b/src/components/cell/cell_header.js @@ -24,10 +24,10 @@ CellHeader.propTypes = { * */ primary: PropTypes.bool, -} +}; CellHeader.defaultProps = { primary: false, -} +}; -export default CellHeader \ No newline at end of file +export default CellHeader; \ No newline at end of file diff --git a/src/components/cell/cells.js b/src/components/cell/cells.js index 47b1177..1f5badc 100644 --- a/src/components/cell/cells.js +++ b/src/components/cell/cells.js @@ -10,12 +10,12 @@ import deprecationWarning from '../../utils/deprecationWarning'; const Cells = (props) => { const { children, className, access, ...others } = props; - if(access){ + if (access){ deprecationWarning( 'Cells Access', 'Cell Access', 'https://github.com/weui/weui/wiki/%E5%9C%A81.0.0%E5%9C%A8%E4%BB%A3%E7%A0%81%E5%B1%82%E9%9D%A2%E4%B8%8A%E5%81%9A%E4%BA%86%E5%93%AA%E4%BA%9B%E6%94%B9%E5%8F%98#%E5%B8%A6%E7%AE%AD%E5%A4%B4%E7%9A%84%E5%88%97%E8%A1%A8%E7%94%B1%E4%B9%8B%E5%89%8D%E7%9A%84weui_cells_access%E6%94%B9%E4%B8%BA%E5%8D%95%E7%8B%AC%E6%8E%A7%E5%88%B6%E7%9A%84weui-cell_access' - ) + ); } const cls = classNames({ @@ -29,9 +29,9 @@ const Cells = (props) => { }; Cells.propTypes = { -} +}; Cells.defaultProps = { -} +}; export default Cells; \ No newline at end of file diff --git a/src/components/dialog/dialog.js b/src/components/dialog/dialog.js index c6492de..4f49c53 100644 --- a/src/components/dialog/dialog.js +++ b/src/components/dialog/dialog.js @@ -44,11 +44,11 @@ class Dialog extends Component { }; constructor(props){ - super(props) + super(props); this.state = { isAndroid: '' - } + }; } renderButtons() { @@ -77,9 +77,9 @@ class Dialog extends Component { const {title, show, className, children, buttons, type, autoDectect, ...others} = this.props; const styleType = type ? type : 'ios'; const cls = classNames('weui-dialog', { - 'weui-skin_android': styleType == 'android' || (!type && autoDectect && this.state.isAndroid), + 'weui-skin_android': styleType === 'android' || (!type && autoDectect && this.state.isAndroid), [className]: className - }) + }); return (
diff --git a/src/components/flex/flex.js b/src/components/flex/flex.js index e916a8e..c780682 100644 --- a/src/components/flex/flex.js +++ b/src/components/flex/flex.js @@ -10,6 +10,6 @@ const Flex = (props) => (
{ props.children }
-) +); export default Flex; \ No newline at end of file diff --git a/src/components/flex/flex_item.js b/src/components/flex/flex_item.js index 0433105..71f32cd 100644 --- a/src/components/flex/flex_item.js +++ b/src/components/flex/flex_item.js @@ -12,8 +12,8 @@ const FlexItem = (props) => { { children } - ) -} + ); +}; FlexItem.propTypes = { /** @@ -21,10 +21,10 @@ FlexItem.propTypes = { * */ component: React.PropTypes.node -} +}; FlexItem.defaultProps = { component: 'div' -} +}; export default FlexItem; \ No newline at end of file diff --git a/src/components/footer/footer.js b/src/components/footer/footer.js index 8153924..602a37a 100644 --- a/src/components/footer/footer.js +++ b/src/components/footer/footer.js @@ -19,4 +19,4 @@ const Footer = (props) => { ); }; -export default Footer +export default Footer; \ No newline at end of file diff --git a/src/components/footer/footer_link.js b/src/components/footer/footer_link.js index 2a2dc9b..9eee5fc 100644 --- a/src/components/footer/footer_link.js +++ b/src/components/footer/footer_link.js @@ -19,4 +19,4 @@ const FooterLink = (props) => { ); }; -export default FooterLink +export default FooterLink; \ No newline at end of file diff --git a/src/components/footer/footer_links.js b/src/components/footer/footer_links.js index b0f53b8..c910d83 100644 --- a/src/components/footer/footer_links.js +++ b/src/components/footer/footer_links.js @@ -19,4 +19,4 @@ const FooterLinks = (props) => { ); }; -export default FooterLinks +export default FooterLinks; \ No newline at end of file diff --git a/src/components/footer/footer_text.js b/src/components/footer/footer_text.js index cad31bf..cab7aaf 100644 --- a/src/components/footer/footer_text.js +++ b/src/components/footer/footer_text.js @@ -19,4 +19,4 @@ const FooterText = (props) => { ); }; -export default FooterText +export default FooterText; \ No newline at end of file diff --git a/src/components/form/agreement.js b/src/components/form/agreement.js index fd21ef1..4adaab1 100644 --- a/src/components/form/agreement.js +++ b/src/components/form/agreement.js @@ -22,4 +22,4 @@ const Agreement = (props) => { ); }; -export default Agreement +export default Agreement; \ No newline at end of file diff --git a/src/components/form/checkbox.js b/src/components/form/checkbox.js index 30685ab..339fdd2 100644 --- a/src/components/form/checkbox.js +++ b/src/components/form/checkbox.js @@ -20,4 +20,4 @@ const Checkbox = (props) => { ); }; -export default Checkbox +export default Checkbox; \ No newline at end of file diff --git a/src/components/form/form_cell.js b/src/components/form/form_cell.js index d8c2cff..93dfaa0 100644 --- a/src/components/form/form_cell.js +++ b/src/components/form/form_cell.js @@ -70,17 +70,17 @@ export default class FormCell extends Component { 'weui-cell_warn': warn, 'weui-cell_switch': this.props.switch, 'weui-cell_select': select, - 'weui-cell_select-before': selectPos == 'before', - 'weui-cell_select-after': selectPos == 'after', + 'weui-cell_select-before': selectPos === 'before', + 'weui-cell_select-after': selectPos === 'after', 'weui-check__label': radio || checkbox, [className]: className }); - if(radio || checkbox) { + if (radio || checkbox) { return ( - ) - }else{ + ); + } else { return (
{children}
); diff --git a/src/components/form/input.js b/src/components/form/input.js index e4b990b..2e77a8f 100644 --- a/src/components/form/input.js +++ b/src/components/form/input.js @@ -22,10 +22,10 @@ const Input = (props) => { Input.propTypes = { defaultValue: React.PropTypes.string -} +}; Input.defaultProps = { defaultValue: undefined -} +}; -export default Input +export default Input; diff --git a/src/components/form/preview.js b/src/components/form/preview.js index c5f1842..7d980b1 100644 --- a/src/components/form/preview.js +++ b/src/components/form/preview.js @@ -19,7 +19,7 @@ const Preview = (props) => {
{ children }
- ) -} + ); +}; -export default Preview \ No newline at end of file +export default Preview; \ No newline at end of file diff --git a/src/components/form/preview_body.js b/src/components/form/preview_body.js index c21c3c7..21ecea7 100644 --- a/src/components/form/preview_body.js +++ b/src/components/form/preview_body.js @@ -19,7 +19,7 @@ const PreviewBody = (props) => {
{ children }
- ) -} + ); +}; -export default PreviewBody \ No newline at end of file +export default PreviewBody; \ No newline at end of file diff --git a/src/components/form/preview_footer.js b/src/components/form/preview_footer.js index 2991215..077d167 100644 --- a/src/components/form/preview_footer.js +++ b/src/components/form/preview_footer.js @@ -19,7 +19,7 @@ const PreviewFooter = (props) => {
{ children }
- ) -} + ); +}; -export default PreviewFooter \ No newline at end of file +export default PreviewFooter; \ No newline at end of file diff --git a/src/components/form/preview_header.js b/src/components/form/preview_header.js index 5c10f7a..316f7df 100644 --- a/src/components/form/preview_header.js +++ b/src/components/form/preview_header.js @@ -15,7 +15,7 @@ const PreviewHeader = (props) => {
{ children }
- ) -} + ); +}; -export default PreviewHeader \ No newline at end of file +export default PreviewHeader; \ No newline at end of file diff --git a/src/components/form/preview_item.js b/src/components/form/preview_item.js index e3c5047..1d9fc2e 100644 --- a/src/components/form/preview_item.js +++ b/src/components/form/preview_item.js @@ -20,8 +20,8 @@ const PreviewItem = (props) => { {value}
- ) -} + ); +}; PreviewItem.propTypes = { /** @@ -35,11 +35,11 @@ PreviewItem.propTypes = { */ value: PropTypes.string, -} +}; PreviewItem.defaultProps = { label: false, value: false, -} +}; -export default PreviewItem \ No newline at end of file +export default PreviewItem; \ No newline at end of file diff --git a/src/components/form/radio.js b/src/components/form/radio.js index 4860b6d..b7ba879 100644 --- a/src/components/form/radio.js +++ b/src/components/form/radio.js @@ -20,4 +20,4 @@ const Radio = (props) => { ); }; -export default Radio +export default Radio; \ No newline at end of file diff --git a/src/components/form/select.js b/src/components/form/select.js index 50fca5f..c34903b 100644 --- a/src/components/form/select.js +++ b/src/components/form/select.js @@ -19,7 +19,7 @@ export default class Select extends Component { }; renderData(data) { - return data.map((item,i) => ( + return data.map((item, i) => (
); } -}; +}; \ No newline at end of file diff --git a/src/components/form/vcode.js b/src/components/form/vcode.js index dd2b1b1..bb8e5ea 100644 --- a/src/components/form/vcode.js +++ b/src/components/form/vcode.js @@ -19,4 +19,4 @@ const VCode = (props) => { ); }; -export default VCode +export default VCode; \ No newline at end of file diff --git a/src/components/gallery/gallery.js b/src/components/gallery/gallery.js index 21cd9a1..afe4dda 100644 --- a/src/components/gallery/gallery.js +++ b/src/components/gallery/gallery.js @@ -33,12 +33,12 @@ Gallery.propTypes = { * */ src: React.PropTypes.string -} +}; Gallery.defaultProps = { show: undefined, src: '' -} +}; export default Gallery; diff --git a/src/components/grid/grids.js b/src/components/grid/grids.js index 1c29e26..30fea96 100644 --- a/src/components/grid/grids.js +++ b/src/components/grid/grids.js @@ -20,7 +20,7 @@ export default class Grids extends Component { }; renderData(data) { - return data.map((item,i) => { + return data.map((item, i) => { return v==value)){ - deprecationWarning(`Icon ${value}`, `Icon ${deprecateValue[value]}`) - value == deprecateValue[value]; + if (Object.keys(deprecateValue).find(v=> v === value)){ + deprecationWarning(`Icon ${value}`, `Icon ${deprecateValue[value]}`); } const cls = classNames({ - ['weui-icon-' + value]: value != 'loading', + ['weui-icon-' + value]: value !== 'loading', 'weui-icon_msg': size === 'large' && !primary, 'weui-icon_msg-primary': size === 'large' && primary, - 'weui-loading': value == 'loading', + 'weui-loading': value === 'loading', [className]: className }); diff --git a/src/components/infiniteloader/infiniteloader.js b/src/components/infiniteloader/infiniteloader.js index a84828d..09b2734 100644 --- a/src/components/infiniteloader/infiniteloader.js +++ b/src/components/infiniteloader/infiniteloader.js @@ -47,59 +47,59 @@ class InfiniteLoader extends Component{ } constructor(props){ - super(props) + super(props); this.state = { loading: false, finish: false - } + }; - this.scrollHandle = this.scrollHandle.bind(this) - this.resolveLoading = this.resolveLoading.bind(this) - this.finish = this.finish.bind(this) + this.scrollHandle = this.scrollHandle.bind(this); + this.resolveLoading = this.resolveLoading.bind(this); + this.finish = this.finish.bind(this); } finish(){ this.setState({ loading: false, finish: true - }) + }); } resolveLoading(){ this.setState({ loading: false, finish: false - }) + }); } scrollHandle(e){ - if(this.state.loading || this.state.finish) return; + if (this.state.loading || this.state.finish) return; - let target = e.target - let scrollPercent = Math.floor(( (target.scrollTop + target.clientHeight) / target.scrollHeight) * 100) + let target = e.target; + let scrollPercent = Math.floor(( (target.scrollTop + target.clientHeight) / target.scrollHeight) * 100); - if(scrollPercent > this.props.triggerPercent) { + if (scrollPercent > this.props.triggerPercent) { this.setState({ loading: true - }) + }); - this.props.onLoadMore(this.resolveLoading, this.finish) + this.props.onLoadMore(this.resolveLoading, this.finish); } } render(){ - const { children, className, height, triggerPercent, loaderLoadingIcon, loaderDefaultIcon, onLoadMore, ...domProps } = this.props - const clx = classNames( 'react-weui-infiniteloader', className ) + const { children, className, height, triggerPercent, loaderLoadingIcon, loaderDefaultIcon, onLoadMore, ...domProps } = this.props; + const clx = classNames( 'react-weui-infiniteloader', className ); let containerStyle = { height, - } + }; let loaderStyle = { display: this.state.loading || this.state.finish ? 'block' : 'none' - } + }; return (
- ) - + ); } } diff --git a/src/components/label/label.js b/src/components/label/label.js index 571792a..1d87a84 100644 --- a/src/components/label/label.js +++ b/src/components/label/label.js @@ -19,4 +19,4 @@ const Label = (props) => { ); }; -export default Label +export default Label; \ No newline at end of file diff --git a/src/components/loadmore/loadmore.js b/src/components/loadmore/loadmore.js index ae198d0..9082874 100644 --- a/src/components/loadmore/loadmore.js +++ b/src/components/loadmore/loadmore.js @@ -23,8 +23,8 @@ const LoadMore = (props) => { { children } - ) -} + ); +}; LoadMore.propTypes = { /** @@ -42,12 +42,12 @@ LoadMore.propTypes = { * */ showDot: PropTypes.bool -} +}; LoadMore.defaultProps = { loading: false, showLine: false, showDot: false -} +}; export default LoadMore; \ No newline at end of file diff --git a/src/components/mediabox/mediabox_header.js b/src/components/mediabox/mediabox_header.js index e2110cb..0c28b80 100644 --- a/src/components/mediabox/mediabox_header.js +++ b/src/components/mediabox/mediabox_header.js @@ -13,9 +13,9 @@ export default class MediaBoxHeader extends React.Component { }, className); let childrenWithProps = React.Children.map(children, child => { - if(child.type == 'img' && !child.props.className){ + if (child.type === 'img' && !child.props.className){ return React.cloneElement(child, { className: 'weui-media-box__thumb' }); - }else{ + } else { return child; } }); diff --git a/src/components/mediabox/mediabox_info.js b/src/components/mediabox/mediabox_info.js index ad7d7b5..8f78dbd 100644 --- a/src/components/mediabox/mediabox_info.js +++ b/src/components/mediabox/mediabox_info.js @@ -20,7 +20,7 @@ export default class MediaBoxInfo extends React.Component { }; renderData(metas) { - return metas.map((meta,i) => { + return metas.map((meta, i) => { return {meta.label}; }); } diff --git a/src/components/msg/msg.js b/src/components/msg/msg.js index e17b4e2..711b63c 100644 --- a/src/components/msg/msg.js +++ b/src/components/msg/msg.js @@ -1,7 +1,7 @@ import React, { Component, PropTypes } from 'react'; import classNames from 'classnames'; import {Button, ButtonArea} from '../button/index'; -import { Footer, FooterLinks, FooterLink } from '../footer' +import { Footer, FooterLinks, FooterLink } from '../footer'; import Icon from '../icon/index'; import deprecationWarning from '../../utils/deprecationWarning'; @@ -67,12 +67,12 @@ class Msg extends Component { const { className, type, title, description, extraHref, extraText, footer, buttons, ...others } = this.props; const cls = classNames('weui-msg', { [className]: className - }) + }); let elFooter = footer ? footer : ()=>false; - if(!elFooter() && (extraHref || extraText) ){ - deprecationWarning('Msg extraHref/extraText', 'Msg footer') + if (!elFooter() && (extraHref || extraText) ){ + deprecationWarning('Msg extraHref/extraText', 'Msg footer'); elFooter = () => (
@@ -80,7 +80,7 @@ class Msg extends Component { {extraText}
- ) + ); } return ( diff --git a/src/components/panel/panel.js b/src/components/panel/panel.js index e3bb5be..fb4c4cf 100644 --- a/src/components/panel/panel.js +++ b/src/components/panel/panel.js @@ -22,12 +22,12 @@ export default class Panel extends React.Component { render() { const {children, className, access, ...others} = this.props; - if(access){ + if (access){ deprecationWarning( 'panel access', 'cell access', 'https://github.com/weui/weui/wiki/%E5%9C%A81.0.0%E5%9C%A8%E4%BB%A3%E7%A0%81%E5%B1%82%E9%9D%A2%E4%B8%8A%E5%81%9A%E4%BA%86%E5%93%AA%E4%BA%9B%E6%94%B9%E5%8F%98#panel' - ) + ); } const cls = classNames({ diff --git a/src/components/picker/city_picker.js b/src/components/picker/city_picker.js index 7909c3c..48f5453 100644 --- a/src/components/picker/city_picker.js +++ b/src/components/picker/city_picker.js @@ -38,7 +38,7 @@ class CityPicker extends React.Component { } constructor(props){ - super(props) + super(props); const { data, selected, dataMap } = this.props; const { groups, newselected } = this.parseData(data, dataMap.items, selected); this.state = { @@ -46,7 +46,7 @@ class CityPicker extends React.Component { selected: newselected, picker_show: false, text: '' - } + }; //console.log(this.state.groups) this.updateGroup = this.updateGroup.bind(this); this.parseData = this.parseData.bind(this); @@ -54,30 +54,30 @@ class CityPicker extends React.Component { } //@return array of group with options - parseData(data, subKey, selected = [], group = [], newselected= []){ + parseData(data, subKey, selected = [], group = [], newselected = []){ let _selected = 0; - if( Array.isArray(selected) && selected.length > 0){ - let _selectedClone = selected.slice(0) - _selected = _selectedClone.shift() - selected = _selectedClone + if ( Array.isArray(selected) && selected.length > 0){ + let _selectedClone = selected.slice(0); + _selected = _selectedClone.shift(); + selected = _selectedClone; } - if(typeof data[_selected] == 'undefined'){ + if (typeof data[_selected] === 'undefined'){ _selected = 0; } - newselected.push(_selected) + newselected.push(_selected); let item = data[_selected]; var _group = JSON.parse(JSON.stringify(data)); - _group.forEach(g=>delete g[subKey]) - group.push({ items: _group, mapKeys: { 'label': this.props.dataMap.id } }) + _group.forEach(g=>delete g[subKey]); + group.push({ items: _group, mapKeys: { 'label': this.props.dataMap.id } }); - if(typeof item[subKey] !== 'undefined' && Array.isArray(item[subKey])){ - return this.parseData(item[subKey], subKey, selected, group, newselected) - }else{ + if (typeof item[subKey] !== 'undefined' && Array.isArray(item[subKey])){ + return this.parseData(item[subKey], subKey, selected, group, newselected); + } else { return { groups: group, newselected }; } } @@ -89,14 +89,14 @@ class CityPicker extends React.Component { const { groups, newselected } = this.parseData(data, dataMap.items, selected); - let text = '' - try{ - groups.forEach( (group, i) => { - text += `${group['items'][selected[i]][this.props.dataMap.id]} ` - }) - }catch(err){ + let text = ''; + try { + groups.forEach( (group, _i) => { + text += `${group['items'][selected[_i]][this.props.dataMap.id]} `; + }); + } catch (err){ //wait - text = this.state.text + text = this.state.text; } @@ -105,16 +105,16 @@ class CityPicker extends React.Component { groups, text, selected: newselected - }) + }); //update picker picker.setState({ selected: newselected - }) + }); } handleChange(){ - if(this.props.onChange) this.props.onChange(this.state.text); + if (this.props.onChange) this.props.onChange(this.state.text); } render(){ @@ -127,9 +127,8 @@ class CityPicker extends React.Component { groups={this.state.groups} onCancel={this.props.onCancel} /> - ) + ); } - } export default CityPicker; \ No newline at end of file diff --git a/src/components/picker/index.js b/src/components/picker/index.js index 6c55cc4..64733f9 100644 --- a/src/components/picker/index.js +++ b/src/components/picker/index.js @@ -6,4 +6,4 @@ export default { Picker, PickerGroup, CityPicker -} \ No newline at end of file +}; \ No newline at end of file diff --git a/src/components/picker/picker.js b/src/components/picker/picker.js index 65f7f1c..cd1221c 100644 --- a/src/components/picker/picker.js +++ b/src/components/picker/picker.js @@ -58,20 +58,20 @@ class Picker extends Component { } constructor(props){ - super(props) + super(props); this.state = { - selected : this.props.defaultSelect ? this.props.defaultSelect : Array(this.props.groups.length).fill(-1), + selected: this.props.defaultSelect ? this.props.defaultSelect : Array(this.props.groups.length).fill(-1), actions: this.props.actions.length > 0 ? this.props.actions : [{ label: this.props.lang.leftBtn, - onClick: e=>this.handleClose( ()=> {if(this.props.onCancel) this.props.onCancel(e)} ) + onClick: e=>this.handleClose( ()=> {if (this.props.onCancel) this.props.onCancel(e);} ) }, { label: this.props.lang.rightBtn, onClick: e=>this.handleChanges() }], closing: false - } + }; this.handleChanges = this.handleChanges.bind(this); this.handleChange = this.handleChange.bind(this); @@ -79,15 +79,15 @@ class Picker extends Component { } handleChanges(){ - this.handleClose( ()=> { if(this.props.onChange) this.props.onChange(this.state.selected, this) } ) + this.handleClose( ()=> { if (this.props.onChange) this.props.onChange(this.state.selected, this); } ); } handleChange(item, i, groupIndex){ let selected = this.state.selected; selected[groupIndex] = i; - this.setState({ selected },()=>{ - if(this.props.onGroupChange) this.props.onGroupChange(item, i, groupIndex, this.state.selected, this) + this.setState({ selected }, ()=>{ + if (this.props.onGroupChange) this.props.onGroupChange(item, i, groupIndex, this.state.selected, this); }); } @@ -95,32 +95,32 @@ class Picker extends Component { this.setState({ closing: true }, ()=> setTimeout( ()=> { - this.setState({ closing: false }) - cb() - }, 300)) + this.setState({ closing: false }); + cb(); + }, 300)); } renderActions(){ let elActions = this.state.actions.map( (action, i)=> { const { label, ...others } = action; - return { label } - }) + return { label }; + }); return (
{ elActions }
- ) + ); } renderGroups(){ return this.props.groups.map( (group, i) => { - return ; - }) + return ; + }); } render(){ - const { className, show, actions, groups, defaultSelect, onGroupChange, onChange, onCancel, ...others } = this.props; + const { className, show, actions, groups, defaultSelect, onGroupChange, onChange, onCancel, ...others } = this.props; const cls = classNames('weui-picker', { 'weui-animate-slide-up': show && !this.state.closing, 'weui-animate-slide-down': this.state.closing @@ -129,11 +129,11 @@ class Picker extends Component { const maskCls = classNames({ 'weui-animate-fade-in': show && !this.state.closing, 'weui-animate-fade-out': this.state.closing - }) + }); return this.props.show ? (
- this.handleClose( ()=> {if(this.props.onCancel) this.props.onCancel(e)} )} /> + this.handleClose( ()=> {if (this.props.onCancel) this.props.onCancel(e);} )} />
{ this.renderActions() }
diff --git a/src/components/picker/picker_group.js b/src/components/picker/picker_group.js index e21f8a3..5484b3a 100644 --- a/src/components/picker/picker_group.js +++ b/src/components/picker/picker_group.js @@ -27,7 +27,7 @@ class PickerGroup extends Component { } constructor(props){ - super(props) + super(props); this.state = { touching: false, @@ -38,7 +38,7 @@ class PickerGroup extends Component { totalHeight: 0, selected: 0, animating: this.props.animation - } + }; this.handleTouchStart = this.handleTouchStart.bind(this); this.handleTouchMove = this.handleTouchMove.bind(this); @@ -56,26 +56,26 @@ class PickerGroup extends Component { adjustPosition(props){ const { items, itemHeight, indicatorTop, defaultIndex } = props; - const totalHeight = items.length * itemHeight - let translate = totalHeight <= indicatorTop ? indicatorTop : 0 + const totalHeight = items.length * itemHeight; + let translate = totalHeight <= indicatorTop ? indicatorTop : 0; - if(defaultIndex > -1) { - if(translate == 0){ - let upperCount = Math.floor(indicatorTop / itemHeight) - if( defaultIndex > upperCount ){ + if (defaultIndex > -1) { + if (translate === 0){ + let upperCount = Math.floor(indicatorTop / itemHeight); + if ( defaultIndex > upperCount ){ //over let overCount = defaultIndex - upperCount; - translate -= overCount * itemHeight - }else if( defaultIndex === upperCount){ + translate -= overCount * itemHeight; + } else if ( defaultIndex === upperCount){ translate = 0; - }else{ + } else { //less - translate += ( Math.abs(upperCount - defaultIndex) * itemHeight) + translate += ( Math.abs(upperCount - defaultIndex) * itemHeight); } //if(props.groupIndex == 2) console.log(defaultIndex,translate, upperCount) - }else{ + } else { //total item less than indicator height - translate -= itemHeight * defaultIndex + translate -= itemHeight * defaultIndex; } } @@ -92,30 +92,30 @@ class PickerGroup extends Component { let selected = 0; items.forEach( (item, i) => { //console.log(i, this.state.translate, (this.state.translate + (itemHeight * i)), indicatorTop, this.state.translate + (itemHeight * i) + itemHeight , indicatorTop + indicatorHeight) - if( !item.disabled && (this.state.translate + (itemHeight * i)) >= indicatorTop && + if ( !item.disabled && (this.state.translate + (itemHeight * i)) >= indicatorTop && ( this.state.translate + (itemHeight * i) + itemHeight ) <= indicatorTop + indicatorHeight ){ selected = i; } - }) + }); - if(onChange && propagate) onChange(items[selected], selected, groupIndex); + if (onChange && propagate) onChange(items[selected], selected, groupIndex); } handleTouchStart(e){ - if(this.state.touching || this.props.items.length <= 1) return; + if (this.state.touching || this.props.items.length <= 1) return; this.setState({ touching: true, ogTranslate: this.state.translate, - touchId : e.targetTouches[0].identifier, - ogY: this.state.translate == 0 ? e.targetTouches[0].pageY : e.targetTouches[0].pageY - this.state.translate, + touchId: e.targetTouches[0].identifier, + ogY: this.state.translate === 0 ? e.targetTouches[0].pageY : e.targetTouches[0].pageY - this.state.translate, animating: false - }) + }); } handleTouchMove(e){ - if(!this.state.touching || this.props.items.length <= 1) return; - if(e.targetTouches[0].identifier !== this.state.touchId) return; + if (!this.state.touching || this.props.items.length <= 1) return; + if (e.targetTouches[0].identifier !== this.state.touchId) return; //prevent move background e.preventDefault(); @@ -125,36 +125,36 @@ class PickerGroup extends Component { this.setState({ translate: diffY - }) + }); } handleTouchEnd(e){ - if(!this.state.touching || this.props.items.length <= 1) return; + if (!this.state.touching || this.props.items.length <= 1) return; - const { indicatorTop, indicatorHeight, itemHeight } = this.props + const { indicatorTop, indicatorHeight, itemHeight } = this.props; let translate = this.state.translate; - if( Math.abs(translate - this.state.ogTranslate) < ( itemHeight * .51 ) ){ - translate = this.state.ogTranslate - }else if(translate > indicatorTop) { + if ( Math.abs(translate - this.state.ogTranslate) < ( itemHeight * .51 ) ){ + translate = this.state.ogTranslate; + } else if (translate > indicatorTop) { //top boundry - translate = indicatorTop - }else if(translate + this.state.totalHeight < indicatorTop + indicatorHeight) { + translate = indicatorTop; + } else if (translate + this.state.totalHeight < indicatorTop + indicatorHeight) { //bottom translate = indicatorTop + indicatorHeight - this.state.totalHeight; - }else{ + } else { //pass single item range but not exceed boundry let step = 0, adjust = 0; let diff = (translate - this.state.ogTranslate) / itemHeight; - if(Math.abs(diff) < 1){ + if (Math.abs(diff) < 1){ step = diff > 0 ? 1 : -1; - }else{ + } else { adjust = Math.abs((diff % 1) * 100) > 50 ? 1 : 0; - step = diff > 0 ? Math.floor(diff) + adjust : Math.ceil(diff) - adjust + step = diff > 0 ? Math.floor(diff) + adjust : Math.ceil(diff) - adjust; } - translate = this.state.ogTranslate + ( step * itemHeight ) + translate = this.state.ogTranslate + ( step * itemHeight ); } this.setState({ @@ -164,16 +164,16 @@ class PickerGroup extends Component { ogTranslate: 0, animating: true, translate - }, ()=>this.updateSelected()) + }, ()=>this.updateSelected()); } render() { const { items, className, height, itemHeight, indicatorTop, indicatorHeight, onChange, aniamtion, groupIndex, defaultIndex, mapKeys, ...others } = this.props; - const cls = classNames('weui-picker__group', className) + const cls = classNames('weui-picker__group', className); const styles = { - 'transform' : `translate(0, ${this.state.translate}px)`, - 'transition' : this.state.animating ? 'transform .3s' : 'none' - } + 'transform': `translate(0, ${this.state.translate}px)`, + 'transition': this.state.animating ? 'transform .3s' : 'none' + }; return (
{ items.map( (item, j) => { const label = item[this.props.mapKeys.label]; - const itemCls= classNames('weui-picker__item', { - 'weui-picker__item_disabled' : item.disabled - }) + const itemCls = classNames('weui-picker__item', { + 'weui-picker__item_disabled': item.disabled + }); - return
{ label }
+ return
{ label }
; }) }
- ) + ); } } diff --git a/src/components/popup/index.js b/src/components/popup/index.js index 33371ac..2c9f280 100644 --- a/src/components/popup/index.js +++ b/src/components/popup/index.js @@ -1,4 +1,4 @@ import Popup from './popup'; -import PopupHeader from './popup_header' +import PopupHeader from './popup_header'; export default { Popup, PopupHeader }; \ No newline at end of file diff --git a/src/components/popup/popup.js b/src/components/popup/popup.js index 127f049..9b31659 100644 --- a/src/components/popup/popup.js +++ b/src/components/popup/popup.js @@ -26,10 +26,10 @@ class Popup extends Component { enableMask: false } - render(){ + render() { const { className, children, show, onRequestClose, enableMask, ...others } = this.props; const cls = classNames('weui-popup', { - 'weui-popup_toggle' : show + 'weui-popup_toggle': show }, className); return ( @@ -39,7 +39,7 @@ class Popup extends Component { { children }
- ) + ); } } diff --git a/src/components/popup/popup_header.js b/src/components/popup/popup_header.js index 17749b6..24db7c7 100644 --- a/src/components/popup/popup_header.js +++ b/src/components/popup/popup_header.js @@ -13,8 +13,8 @@ const PopupHeader = (props) => { {left} {right} - ) -} + ); +}; PopupHeader.propTypes = { /** @@ -37,11 +37,11 @@ PopupHeader.propTypes = { * */ rightOnClick: PropTypes.func -} +}; PopupHeader.defaultProps = { left: '', right: '' -} +}; export default PopupHeader; \ No newline at end of file diff --git a/src/components/progress/progress.js b/src/components/progress/progress.js index 7d684c5..3321eb8 100644 --- a/src/components/progress/progress.js +++ b/src/components/progress/progress.js @@ -24,14 +24,14 @@ const Progress = (props) => { { showCancel ? - { if(onClick) onClick(e) } }> + { if (onClick) onClick(e); } }> : false } - ) -} + ); +}; Progress.propTypes = { /** @@ -44,11 +44,11 @@ Progress.propTypes = { * */ showCancel: PropTypes.bool -} +}; Progress.defaultProps = { value: 0, showCancel: true -} +}; -export default Progress +export default Progress; \ No newline at end of file diff --git a/src/components/ptr/ptr.js b/src/components/ptr/ptr.js index f41ecee..de67aec 100644 --- a/src/components/ptr/ptr.js +++ b/src/components/ptr/ptr.js @@ -46,19 +46,19 @@ class PullToRefresh extends Component{ let style = { transform: `rotate(-${progress !== 100 ? progress * 1.8 : 0}deg)`, color: progress !== 100 ? '#5f5f5f' : '#1AAD19' - } + }; return (
- ) + ); }, loaderLoadingIcon: , onRefresh: (resolve, reject) => setTimeout( ()=> resolve(), 1000) }; constructor(props){ - super(props) + super(props); this.state = { pullPercent: 0, @@ -68,12 +68,12 @@ class PullToRefresh extends Component{ animating: false, loading: false, initScrollTop: 0 - } + }; - this.handleTouchStart = this.handleTouchStart.bind(this) - this.handleTouchMove = this.handleTouchMove.bind(this) - this.handleTouchEnd = this.handleTouchEnd.bind(this) - this.resolveRefresh = this.resolveRefresh.bind(this) + this.handleTouchStart = this.handleTouchStart.bind(this); + this.handleTouchMove = this.handleTouchMove.bind(this); + this.handleTouchEnd = this.handleTouchEnd.bind(this); + this.resolveRefresh = this.resolveRefresh.bind(this); } resolveRefresh(){ @@ -81,60 +81,61 @@ class PullToRefresh extends Component{ loading: false, animating: true, pullPercent: 0 - },()=>{ - setTimeout(()=>this.setState({ animating: false}), 500) - }) + }, ()=>{ + setTimeout(()=>this.setState({ animating: false}), 500); + }); } handleTouchStart(e){ - if(this.state.touching || this.state.loading) return; + if (this.state.touching || this.state.loading) return; - let $content = ReactDOM.findDOMNode(this.refs.content) + let $content = ReactDOM.findDOMNode(this.refs.content); this.setState({ touching: true, - touchId : e.targetTouches[0].identifier, - ogY: this.state.pullPercent == 0 ? e.targetTouches[0].pageY : e.targetTouches[0].pageY - this.state.pullPercent, + touchId: e.targetTouches[0].identifier, + ogY: this.state.pullPercent === 0 ? e.targetTouches[0].pageY : e.targetTouches[0].pageY - this.state.pullPercent, animating: false, initScrollTop: $content.scrollTop - }) + }); } handleTouchMove(e){ - if(!this.state.touching || this.state.loading) return; - if(e.targetTouches[0].identifier !== this.state.touchId) return; + if (!this.state.touching || this.state.loading) return; + if (e.targetTouches[0].identifier !== this.state.touchId) return; const pageY = e.targetTouches[0].pageY; let diffY = pageY - this.state.ogY; //if it's scroll - if(diffY < 0) return; + if (diffY < 0) return; //if it's not at top - let $content = ReactDOM.findDOMNode(this.refs.content) - if($content.scrollTop > 0) return; + let $content = ReactDOM.findDOMNode(this.refs.content); + if ($content.scrollTop > 0) return; //prevent move background e.preventDefault(); - diffY = ( diffY - this.state.initScrollTop ) > 100 ? 100 : ( diffY - this.state.initScrollTop ) + diffY = ( diffY - this.state.initScrollTop ) > 100 ? 100 : ( diffY - this.state.initScrollTop ); this.setState({ pullPercent: diffY - }) + }); } handleTouchEnd(e){ - if(!this.state.touching || this.state.loading) return; + if (!this.state.touching || this.state.loading) return; - let pullPercent = this.state.pullPercent - let loading = false + let pullPercent = this.state.pullPercent; + let loading = false; - if(pullPercent == 100) { - loading = true - }else{ - pullPercent = 0 + if (pullPercent === 100) { + loading = true; + } + else { + pullPercent = 0; } this.setState({ @@ -147,24 +148,24 @@ class PullToRefresh extends Component{ loading }, ()=>{ //triger after ui change - if(loading) this.props.onRefresh(this.resolveRefresh) - }) + if (loading) this.props.onRefresh(this.resolveRefresh); + }); } render(){ - const { className, children, height, loaderHeight, loaderDefaultIcon, loaderLoadingIcon, onRefresh, ...domProps } = this.props + const { className, children, height, loaderHeight, loaderDefaultIcon, loaderLoadingIcon, onRefresh, ...domProps } = this.props; let cls = classNames('react-weui-ptr', className); let containerStyle = { height, - } + }; let loaderStyle = { //transform: `translate(0, ${this.state.pullPercent / 2}px)`, height: loaderHeight, - marginTop: `${ -loaderHeight + (this.state.pullPercent / (100/loaderHeight))}px`, + marginTop: `${ -loaderHeight + (this.state.pullPercent / (100 / loaderHeight))}px`, transition: this.state.animating ? 'all .5s' : 'none' - } + }; return (
@@ -188,7 +189,7 @@ class PullToRefresh extends Component{ { children }
- ) + ); } } diff --git a/src/components/searchbar/searchbar.js b/src/components/searchbar/searchbar.js index 991f247..3197ba3 100644 --- a/src/components/searchbar/searchbar.js +++ b/src/components/searchbar/searchbar.js @@ -61,11 +61,11 @@ class SearchBar extends React.Component { focus: false, clearing: false, text: '' - } + }; changeHandle(e) { let text = e.target.value; - if(this.props.onChange) this.props.onChange(text,e); + if (this.props.onChange) this.props.onChange(text, e); this.setState({text}); } @@ -74,8 +74,8 @@ class SearchBar extends React.Component { focus: false, text: '' }); - if(this.props.onCancel) this.props.onCancel(e); - if(this.props.onChange) this.props.onChange('',e); + if (this.props.onCancel) this.props.onCancel(e); + if (this.props.onChange) this.props.onChange('', e); } clearHandle(e) { @@ -83,18 +83,18 @@ class SearchBar extends React.Component { e.stopPropagation(); this.setState({text: '', clearing: true}); - if(this.props.onClear) this.props.onClear(e); - // In most cases, you can attach a ref to the DOM node and avoid using findDOMNode at all. + if (this.props.onClear) this.props.onClear(e); + // In most cases, you can attach a ref to the DOM node and avoid using findDOMNode at all. // When render returns null or false, findDOMNode returns null. // 这里是截取官网的说明，在ref回调函数内确实会返回null，尤其是配合redux使用的时候，这个时候需要对其进行null判断 this.refs.searchInput.focus(); // ReactDOM.findDOMNode(this.refs.searchInput).focus() - if(this.props.onChange) this.props.onChange('',e); + if (this.props.onChange) this.props.onChange('', e); } blurHandle(e) { - if(this.state.text == ''){ - this.setState({ focus: false}) + if (this.state.text === ''){ + this.setState({ focus: false}); } } @@ -124,7 +124,7 @@ class SearchBar extends React.Component { name={searchName} className='weui-search-bar__input' placeholder={placeholder} - onFocus={e=>this.setState({focus:true})} + onFocus={e=>this.setState({focus: true})} onBlur={this.blurHandle.bind(this)} onChange={this.changeHandle.bind(this)} value={this.state.text} @@ -144,7 +144,7 @@ class SearchBar extends React.Component { searchInput.focus(); } }} - style={{display: this.state.text ? 'none': null}} + style={{display: this.state.text ? 'none' : null}} > {placeholder} diff --git a/src/components/tab/tab.js b/src/components/tab/tab.js index 6610923..fe7595b 100644 --- a/src/components/tab/tab.js +++ b/src/components/tab/tab.js @@ -40,20 +40,21 @@ export default class Tab extends React.Component { handleHeaderClick(idx) { this.setState({index: idx}); - if(this.props.onChange) this.props.onChange(idx); + if (this.props.onChange) this.props.onChange(idx); } - parseChild(children) { + parseChild(childrenInput) { const ChildHeaders = []; const ChildContents = []; - React.Children.map(children, child => { - if(!child) return; + React.Children.map(childrenInput, child => { + if (!child) return; const {children, type, ...others} = child.props; - if(child.type === TabBarItem || child.type === NavBarItem){ + if (child.type === TabBarItem || child.type === NavBarItem){ ChildHeaders.push(child); - if(children) ChildContents.push(); - }else if(child.type === TabBodyItem){ + if (children) ChildContents.push(); + } + else if (child.type === TabBodyItem){ ChildContents.push(child); } }); @@ -80,7 +81,7 @@ export default class Tab extends React.Component { }); }); - if(type == 'tabbar'){ + if (type === 'tabbar'){ return (
@@ -91,7 +92,8 @@ export default class Tab extends React.Component {
); - }else if(type == 'navbar'){ + } + else if (type === 'navbar'){ return (
@@ -101,8 +103,9 @@ export default class Tab extends React.Component { {_contents}
- ) - }else{ + ); + } + else { return false; } @@ -117,14 +120,15 @@ export default class Tab extends React.Component { 'weui-tab': true }, className); - if(type === 'normal') { + if (type === 'normal') { return (
{children}
); - }else{ - return this.renderBar(type, children, cls) + } + else { + return this.renderBar(type, children, cls); } } } diff --git a/src/components/tab/tabbar_item.js b/src/components/tab/tabbar_item.js index 1278248..8982cf8 100644 --- a/src/components/tab/tabbar_item.js +++ b/src/components/tab/tabbar_item.js @@ -40,14 +40,14 @@ export default class TabBarItem extends React.Component { 'weui-bar__item_on': active }, className); - if(icon || label){ + if (icon || label){ return (
{icon ? {icon} : false} {label ? {label} : false}
- ) - }else{ + ); + } else { return (
{children} diff --git a/src/components/toast/toast.js b/src/components/toast/toast.js index e39f872..39cd738 100644 --- a/src/components/toast/toast.js +++ b/src/components/toast/toast.js @@ -35,7 +35,7 @@ class Toast extends Component { const {className, icon, show, children, iconSize, ...others} = this.props; const cls = classNames('weui-toast', { [className]: className - }) + }); return (
diff --git a/src/components/toptips/toptips.js b/src/components/toptips/toptips.js index b1a414c..e207605 100644 --- a/src/components/toptips/toptips.js +++ b/src/components/toptips/toptips.js @@ -38,4 +38,4 @@ Toptips.defaultProps = { type: 'default' }; -export default Toptips +export default Toptips; diff --git a/src/utils/deprecationWarning.js b/src/utils/deprecationWarning.js index ea9fb8f..4d966a5 100644 --- a/src/utils/deprecationWarning.js +++ b/src/utils/deprecationWarning.js @@ -4,7 +4,9 @@ const warned = {}; export default function deprecationWarning(oldname, newname, link) { //avoid test warnings - if(typeof global.it === 'function') return; + if (typeof global.it === 'function') { + return; + } const warnKey = `${oldname}\n${newname}`; if (warned[warnKey]) { diff --git a/src/utils/mobile_detect.js b/src/utils/mobile_detect.js index 4579332..05e9a7e 100644 --- a/src/utils/mobile_detect.js +++ b/src/utils/mobile_detect.js @@ -3,12 +3,12 @@ const md = new MobileDetect(window.navigator.userAgent); module.exports = { iOSVer: md.version('iOS') ? md.version('iOS') : null, - androidVer : md.version('Android') ? md.version('Android') : null, - isIOS : md.os() === 'iOS', - isIOS8 : md.os() === 'iOS' && parseFloat(md.version('iOS')) >= 8 && parseFloat(md.version('iOS')) < 9, - isIOS9 : md.os() === 'iOS' && parseFloat(md.version('iOS')) >= 9 && parseFloat(md.version('iOS')) < 10, - isIOS10 : md.os() === 'iOS' && parseFloat(md.version('iOS')) >= 10 && parseFloat(md.version('iOS')) < 11, - isAndroid : md.os() === 'AndroidOS', + androidVer: md.version('Android') ? md.version('Android') : null, + isIOS: md.os() === 'iOS', + isIOS8: md.os() === 'iOS' && parseFloat(md.version('iOS')) >= 8 && parseFloat(md.version('iOS')) < 9, + isIOS9: md.os() === 'iOS' && parseFloat(md.version('iOS')) >= 9 && parseFloat(md.version('iOS')) < 10, + isIOS10: md.os() === 'iOS' && parseFloat(md.version('iOS')) >= 10 && parseFloat(md.version('iOS')) < 11, + isAndroid: md.os() === 'AndroidOS', isWindow: md.os() === 'WindowsMobileOS' || md.os() === 'WindowsPhoneOS', isMobile: md.mobile() !== null ? true : false, isWechat: md.match('MicroMessenger') ? true : false, diff --git a/test/tab.js b/test/tab.js index 0f5116e..19d8909 100644 --- a/test/tab.js +++ b/test/tab.js @@ -10,49 +10,49 @@ describe('', ()=>{ describe('Components should render all related weui class', ()=> { it('TabBody render weui-tab__panel', ()=> { - assert( shallow().hasClass('weui-tab__panel') ) - }) + assert( shallow().hasClass('weui-tab__panel') ); + }); it('TabBodyItem render weui-tab__bd-item', ()=> { - assert( shallow().hasClass('weui-tab__bd-item') ) - }) + assert( shallow().hasClass('weui-tab__bd-item') ); + }); it('NavBar render weui-navbar', ()=> { - assert( shallow().hasClass('weui-navbar') ) - }) + assert( shallow().hasClass('weui-navbar') ); + }); it('NavBarItem render weui-navbar__item', ()=> { - assert( shallow().hasClass('weui-navbar__item') ) - assert( shallow().hasClass('weui-bar__item_on') ) - }) + assert( shallow().hasClass('weui-navbar__item') ); + assert( shallow().hasClass('weui-bar__item_on') ); + }); it('TabBar render weui-tabbar', ()=> { - assert( shallow().hasClass('weui-tabbar') ) - }) + assert( shallow().hasClass('weui-tabbar') ); + }); it('TabBarItem render weui-tabbar__item', ()=> { - assert( shallow().hasClass('weui-tabbar__item') ) - assert( shallow().hasClass('weui-bar__item_on') ) - }) + assert( shallow().hasClass('weui-tabbar__item') ); + assert( shallow().hasClass('weui-bar__item_on') ); + }); it('TabBarLabel render weui-tabbar__label', ()=> { - assert( shallow().hasClass('weui-tabbar__label') ) - }) + assert( shallow().hasClass('weui-tabbar__label') ); + }); it('TabBarIcon render weui-tabbar__icon', ()=> { - assert( shallow().hasClass('weui-tabbar__icon') ) - }) - }) + assert( shallow().hasClass('weui-tabbar__icon') ); + }); + }); it('should render Tab Component', ()=>{ const wrapper = mount( - ) + ); - assert(wrapper.instance() instanceof Tab) - assert(wrapper.find('.weui-tab').length > 0) - }) + assert(wrapper.instance() instanceof Tab); + assert(wrapper.find('.weui-tab').length > 0); + }); it('should auto mapping NavBar', ()=>{ const wrapper = mount( @@ -60,16 +60,16 @@ describe('', ()=>{ test test2 - ) + ); - assert(wrapper.find(NavBar).length > 0) - assert(wrapper.find(NavBar).find(NavBarItem).length == 2) - assert(wrapper.find(TabBody).length == 1) - assert(wrapper.find(TabBody).find(TabBodyItem).length == 2) - assert(wrapper.find(TabBody).find(TabBodyItem).first().text() == 'test') - assert(wrapper.find(TabBody).find(TabBodyItem).last().text() == 'test2') - assert(wrapper.find(TabBody).find(TabBodyItem).first().prop('active') == true) - }) + assert(wrapper.find(NavBar).length > 0); + assert(wrapper.find(NavBar).find(NavBarItem).length == 2); + assert(wrapper.find(TabBody).length == 1); + assert(wrapper.find(TabBody).find(TabBodyItem).length == 2); + assert(wrapper.find(TabBody).find(TabBodyItem).first().text() == 'test'); + assert(wrapper.find(TabBody).find(TabBodyItem).last().text() == 'test2'); + assert(wrapper.find(TabBody).find(TabBodyItem).first().prop('active') == true); + }); it('should auto mapping TabBar', ()=>{ @@ -78,39 +78,39 @@ describe('', ()=>{ test test2 - ) + ); - assert(wrapper.find(TabBar).length > 0) - assert(wrapper.find(TabBar).find(TabBarItem).length == 2) - assert(wrapper.find(TabBody).length == 1) - assert(wrapper.find(TabBody).find(TabBodyItem).length == 2) - assert(wrapper.find(TabBody).find(TabBodyItem).first().text() == 'test') - assert(wrapper.find(TabBody).find(TabBodyItem).last().text() == 'test2') - assert(wrapper.find(TabBody).find(TabBodyItem).first().prop('active') == true) - }) + assert(wrapper.find(TabBar).length > 0); + assert(wrapper.find(TabBar).find(TabBarItem).length == 2); + assert(wrapper.find(TabBody).length == 1); + assert(wrapper.find(TabBody).find(TabBodyItem).length == 2); + assert(wrapper.find(TabBody).find(TabBodyItem).first().text() == 'test'); + assert(wrapper.find(TabBody).find(TabBodyItem).last().text() == 'test2'); + assert(wrapper.find(TabBody).find(TabBodyItem).first().prop('active') == true); + }); it('should switch tab onClick and trigger onChange', ()=> { - let spy = sinon.spy() + let spy = sinon.spy(); const wrapper = mount( test test2 - ) + ); - assert(wrapper.find(TabBody).find(TabBodyItem).first().prop('active') == true) + assert(wrapper.find(TabBody).find(TabBodyItem).first().prop('active') == true); - wrapper.find(TabBar).find(TabBarItem).last().simulate('click') + wrapper.find(TabBar).find(TabBarItem).last().simulate('click'); - assert(wrapper.find(TabBody).find(TabBodyItem).first().prop('active') == false) - assert(wrapper.find(TabBody).find(TabBodyItem).last().prop('active') == true) + assert(wrapper.find(TabBody).find(TabBodyItem).first().prop('active') == false); + assert(wrapper.find(TabBody).find(TabBodyItem).last().prop('active') == true); - assert(spy.called) - }) + assert(spy.called); + }); it('should return nothing with invalid type', ()=>{ - const wrapper = mount() - assert(wrapper.html() == null) - }) + const wrapper = mount(); + assert(wrapper.html() == null); + }); }) \ No newline at end of file diff --git a/test/toast.js b/test/toast.js index f1d2dae..7ad01d6 100644 --- a/test/toast.js +++ b/test/toast.js @@ -63,7 +63,7 @@ describe('', ()=> { it(`should have 'weui-loading' and 'weui-icon_toast' class name when icon is 'loading'`, ()=> { if (icon === 'loading') { - let $icon = wrapper.find(Icon).shallow() + let $icon = wrapper.find(Icon).shallow(); assert($icon.hasClass('weui-loading')); assert($icon.hasClass('weui-icon_toast')); } From d38636cf39b1b299fadcb376263926052fd85281 Mon Sep 17 00:00:00 2001 From: Wasin Thonkaew Date: Sun, 12 Mar 2017 04:55:43 +0800 Subject: [PATCH 3/4] Fix issue 212 --- src/components/grid/grid.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/grid/grid.js b/src/components/grid/grid.js index b7a838f..360cf9b 100644 --- a/src/components/grid/grid.js +++ b/src/components/grid/grid.js @@ -2,6 +2,7 @@ import React from 'react'; import classNames from 'classnames'; import GridIcon from './grid_icon'; import GridLabel from './grid_label'; +import { Link } from 'react-router'; /** * WeUI Grid wrapper, contain elements of `GridIcon` and `GridLabel` @@ -33,11 +34,11 @@ export default class Grid extends React.Component { }, className); return ( - + {icon ? {icon} : false} {children} {label ? {label} : false} - + ); } }; \ No newline at end of file From b0ba6d11c65ddaaf1dbc63c057068c085e68a71c Mon Sep 17 00:00:00 2001 From: Wasin Thonkaew Date: Mon, 13 Mar 2017 03:18:17 +0800 Subject: [PATCH 4/4] Review and fix #212 with better approach - provided 'component' property to be able to replace component instead of using react-router, more flexible example of setting from Grid's data from code to use react-router url is as follows const data = [ { icon: image icon, label: 'Label', component: function(props) { const { children, ...others } = props; return { children } ; } }, ] --- src/components/grid/grid.js | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/src/components/grid/grid.js b/src/components/grid/grid.js index 360cf9b..f3cb7aa 100644 --- a/src/components/grid/grid.js +++ b/src/components/grid/grid.js @@ -2,7 +2,6 @@ import React from 'react'; import classNames from 'classnames'; import GridIcon from './grid_icon'; import GridLabel from './grid_label'; -import { Link } from 'react-router'; /** * WeUI Grid wrapper, contain elements of `GridIcon` and `GridLabel` @@ -19,7 +18,11 @@ export default class Grid extends React.Component { * Icon placeholder * */ - icon: React.PropTypes.any + icon: React.PropTypes.any, + /** + * pass in an component to replace Grid but apply same style + */ + component: React.PropTypes.func }; static defaultProps = { @@ -28,17 +31,19 @@ export default class Grid extends React.Component { }; render() { - const {children, icon, label, className, ...others} = this.props; + const {children, icon, label, className, component, ...others} = this.props; const cls = classNames({ 'weui-grid': true }, className); + var DefaultComponent = 'a'; + var GridComponent = component ? component : DefaultComponent; return ( - + {icon ? {icon} : false} {children} {label ? {label} : false} - + ); } }; \ No newline at end of file