refactor: use class syntax, remove mixin. close #824 (#860)

refactor: use class syntax, remove mixin
ant-design · Feb 21, 2017 · cff0bee · cff0bee
1 parent 710c424
commit cff0bee
Show file tree

Hide file tree

Showing 20 changed files with 285 additions and 296 deletions.
diff --git a/components/accordion/index.tsx b/components/accordion/index.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import AccordionProps from './PropsType';
 
-const Accordion = React.createClass<AccordionProps, any>({
+class Accordion extends React.Component<AccordionProps, any> {
   render() {
     return <div>TODO for react-native</div>;
-  },
-});
+  }
+}
 
 export default Accordion;
diff --git a/components/action-sheet/AndroidContainer.tsx b/components/action-sheet/AndroidContainer.tsx
@@ -11,32 +11,30 @@ export interface Props {
   callback?: (index: number) => void;
 }
 
-const ActionSheetAndroid = React.createClass<Props, any>({
-  getDefaultProps() {
-    return {
-      share: false,
-    };
-  },
-
-  getInitialState() {
-    return {
+class ActionSheetAndroid extends React.Component<Props, any> {
+  static defaultProps = {
+    share: false,
+  };
+  constructor(props) {
+    super(props);
+    this.state = {
       visible: this.props.visible || false,
     };
-  },
+  };
 
-  confirm(index) {
+  confirm = (index) => {
     const { callback } = this.props;
     if (callback) {
       callback(index);
     }
     this.close();
-  },
+  }
 
-  close() {
+  close = () => {
     this.setState({
       visible: false,
     });
-  },
+  }
 
   render() {
     const { config, share, onAnimationEnd } = this.props;
@@ -84,7 +82,7 @@ const ActionSheetAndroid = React.createClass<Props, any>({
         </View>
       </Modal>
     );
-  },
-});
+  }
+}
 
 export default ActionSheetAndroid;
diff --git a/components/badge/demo/basic.md b/components/badge/demo/basic.md
@@ -9,7 +9,7 @@ title: 综合示例
 ````jsx
 import { List, Badge } from 'antd-mobile';
 
-ReactDOM.render(
+const BadgeDemo = () => (
   <List renderHeader={() => ''}>
     <List.Item extra="内容内容" arrow="horizontal">
       <Badge dot>
@@ -57,8 +57,10 @@ ReactDOM.render(
       超出99<Badge text={100} style={{ marginLeft: 12 }} />
     </List.Item>
   </List>
-, mountNode);
+);
+ReactDOM.render(<BadgeDemo />, mountNode);
 ````
+
 ````css
 .special-badge .am-list-line {
   padding-right: 0;

diff --git a/components/button/demo/complex.md b/components/button/demo/complex.md
@@ -8,7 +8,7 @@ title: 应用场景示例
 ````jsx
 import { Button, List } from 'antd-mobile';
 
-ReactDOM.render(
+const ComplexButtonDemo = () => (
   <List style={{ margin: '0.1rem 0', backgroundColor: 'white' }}>
     <List.Item
       extra={<Button type="ghost" size="small" inline>small</Button>}
@@ -24,8 +24,8 @@ ReactDOM.render(
       区域经理
       <List.Item.Brief>可进行收款、退款、折扣管理、查看数据等操作</List.Item.Brief>
     </List.Item>
-  </List>,
-  mountNode,
+  </List>
 );
 
+ReactDOM.render(<ComplexButtonDemo />, mountNode);
 ````
diff --git a/components/date-picker/demo/basic.md b/components/date-picker/demo/basic.md
@@ -33,20 +33,18 @@ const CustomChildren = props => (
   </div>
 );
 
-let Test = React.createClass({
-  getInitialState() {
-    return {
-      date: zhNow,
-      dpValue: null,
-      visible: false,
-    };
-  },
-  onChange(date) {
+class Test extends React.Component {
+  state = {
+    date: zhNow,
+    dpValue: null,
+    visible: false,
+  }
+  onChange = (date) => {
     // console.log('onChange', date);
     this.setState({
       date,
     });
-  },
+  }
   render() {
     const { getFieldProps } = this.props.form;
     return (<div>
@@ -122,12 +120,12 @@ let Test = React.createClass({
         </DatePicker>
       </List>
     </div>);
-  },
-});
+  }
+}
 
-Test = createForm()(Test);
+const TestWrapper = createForm()(Test);
 
-ReactDOM.render(<Test />, mountNode);
+ReactDOM.render(<TestWrapper />, mountNode);
 ````
 ````css
 .date-picker-list .am-list-item .am-list-line .am-list-extra {

diff --git a/components/drawer/demo/basic.md b/components/drawer/demo/basic.md
@@ -9,17 +9,15 @@ title: 基本
 ````jsx
 import { Drawer, List, NavBar } from 'antd-mobile';
 
-const App1 = React.createClass({
-  getInitialState() {
-    return {
-      open: false,
-      position: 'left',
-    };
-  },
-  onOpenChange(isOpen) {
-    console.log(isOpen, arguments);
+class App1 extends React.Component {
+  state = {
+    open: false,
+    position: 'left',
+  }
+  onOpenChange = (...args) => {
+    console.log(args);
     this.setState({ open: !this.state.open });
-  },
+  }
   render() {
     const sidebar = (<List>
       {[...Array(20).keys()].map((i, index) => {
@@ -53,8 +51,8 @@ const App1 = React.createClass({
         请点击左上角图标
       </Drawer>
     </div>);
-  },
-});
+  }
+}
 
 ReactDOM.render(<App1 />, mountNode);
 ````

diff --git a/components/drawer/demo/dock.md b/components/drawer/demo/dock.md
@@ -9,17 +9,15 @@ title: 嵌入文档模式
 ````jsx
 import { Drawer, List, NavBar } from 'antd-mobile';
 
-const App = React.createClass({
-  getInitialState() {
-    return {
-      docked: false,
-    };
-  },
-  onDock(d) {
+class App extends React.Component {
+  state = {
+    docked: false,
+  }
+  onDock = (d) => {
     this.setState({
       [d]: !this.state[d],
     });
-  },
+  }
   render() {
     const sidebar = (<List>
       {[...Array(20).keys()].map((i, index) => {
@@ -54,8 +52,8 @@ const App = React.createClass({
         请点击左上角图标
       </Drawer>
     </div>);
-  },
-});
+  }
+}
 
 ReactDOM.render(<App />, mountNode);
 ````

diff --git a/components/flex/demo/basic.md b/components/flex/demo/basic.md
@@ -19,83 +19,79 @@ const PlaceHolder = props => (
   >Item</div>
 );
 
-const FlexExample = React.createClass({
-  render() {
-    return (
-      <div className="flex-container">
-        <div className="sub-title">基本</div>
-        <Flex>
-          <Flex.Item><PlaceHolder /></Flex.Item>
-          <Flex.Item><PlaceHolder /></Flex.Item>
-        </Flex>
-        <WhiteSpace size="lg" />
-        <Flex>
-          <Flex.Item><PlaceHolder /></Flex.Item>
-          <Flex.Item><PlaceHolder /></Flex.Item>
-          <Flex.Item><PlaceHolder /></Flex.Item>
-        </Flex>
-        <WhiteSpace size="lg" />
-        <Flex>
-          <Flex.Item><PlaceHolder /></Flex.Item>
-          <Flex.Item><PlaceHolder /></Flex.Item>
-          <Flex.Item><PlaceHolder /></Flex.Item>
-          <Flex.Item><PlaceHolder /></Flex.Item>
-        </Flex>
-        <WhiteSpace size="lg" />
+const FlexExample = () => (
+  <div className="flex-container">
+    <div className="sub-title">基本</div>
+    <Flex>
+      <Flex.Item><PlaceHolder /></Flex.Item>
+      <Flex.Item><PlaceHolder /></Flex.Item>
+    </Flex>
+    <WhiteSpace size="lg" />
+    <Flex>
+      <Flex.Item><PlaceHolder /></Flex.Item>
+      <Flex.Item><PlaceHolder /></Flex.Item>
+      <Flex.Item><PlaceHolder /></Flex.Item>
+    </Flex>
+    <WhiteSpace size="lg" />
+    <Flex>
+      <Flex.Item><PlaceHolder /></Flex.Item>
+      <Flex.Item><PlaceHolder /></Flex.Item>
+      <Flex.Item><PlaceHolder /></Flex.Item>
+      <Flex.Item><PlaceHolder /></Flex.Item>
+    </Flex>
+    <WhiteSpace size="lg" />
 
-        <div className="sub-title">wrap 换行</div>
-        <Flex wrap="wrap">
-          <PlaceHolder className="inline" />
-          <PlaceHolder className="inline" />
-          <PlaceHolder className="inline" />
-          <PlaceHolder className="inline" />
-          <PlaceHolder className="inline" />
-          <PlaceHolder className="inline" />
-          <PlaceHolder className="inline" />
-        </Flex>
-        <WhiteSpace size="lg" />
+    <div className="sub-title">wrap 换行</div>
+    <Flex wrap="wrap">
+      <PlaceHolder className="inline" />
+      <PlaceHolder className="inline" />
+      <PlaceHolder className="inline" />
+      <PlaceHolder className="inline" />
+      <PlaceHolder className="inline" />
+      <PlaceHolder className="inline" />
+      <PlaceHolder className="inline" />
+    </Flex>
+    <WhiteSpace size="lg" />
 
-        <div className="sub-title">轴对齐方式</div>
-        <Flex justify="center">
-          <PlaceHolder className="inline" />
-          <PlaceHolder className="inline" />
-          <PlaceHolder className="inline" />
-        </Flex>
-        <WhiteSpace />
-        <Flex justify="end">
-          <PlaceHolder className="inline" />
-          <PlaceHolder className="inline" />
-          <PlaceHolder className="inline" />
-        </Flex>
-        <WhiteSpace />
-        <Flex justify="between">
-          <PlaceHolder className="inline" />
-          <PlaceHolder className="inline" />
-          <PlaceHolder className="inline" />
-        </Flex>
+    <div className="sub-title">轴对齐方式</div>
+    <Flex justify="center">
+      <PlaceHolder className="inline" />
+      <PlaceHolder className="inline" />
+      <PlaceHolder className="inline" />
+    </Flex>
+    <WhiteSpace />
+    <Flex justify="end">
+      <PlaceHolder className="inline" />
+      <PlaceHolder className="inline" />
+      <PlaceHolder className="inline" />
+    </Flex>
+    <WhiteSpace />
+    <Flex justify="between">
+      <PlaceHolder className="inline" />
+      <PlaceHolder className="inline" />
+      <PlaceHolder className="inline" />
+    </Flex>
 
-        <WhiteSpace />
-        <Flex align="start">
-          <PlaceHolder className="inline" />
-          <PlaceHolder className="inline small" />
-          <PlaceHolder className="inline" />
-        </Flex>
-        <WhiteSpace />
-        <Flex align="end">
-          <PlaceHolder className="inline" />
-          <PlaceHolder className="inline small" />
-          <PlaceHolder className="inline" />
-        </Flex>
-        <WhiteSpace />
-        <Flex align="baseline">
-          <PlaceHolder className="inline" />
-          <PlaceHolder className="inline small" />
-          <PlaceHolder className="inline" />
-        </Flex>
-      </div>
-    );
-  },
-});
+    <WhiteSpace />
+    <Flex align="start">
+      <PlaceHolder className="inline" />
+      <PlaceHolder className="inline small" />
+      <PlaceHolder className="inline" />
+    </Flex>
+    <WhiteSpace />
+    <Flex align="end">
+      <PlaceHolder className="inline" />
+      <PlaceHolder className="inline small" />
+      <PlaceHolder className="inline" />
+    </Flex>
+    <WhiteSpace />
+    <Flex align="baseline">
+      <PlaceHolder className="inline" />
+      <PlaceHolder className="inline small" />
+      <PlaceHolder className="inline" />
+    </Flex>
+  </div>
+);
 
 ReactDOM.render(<FlexExample />, mountNode);
 ````