rewrite LocaleProvider and Mention demos to es6 component, #4878

2024-11-24 19:19:57 +08:00 · 2017-02-20 21:39:07 +08:00 · 2017-02-20 21:39:07 +08:00 · ce877707bd
commit ce877707bd
parent d7694d4c3b
7 changed files with 108 additions and 104 deletions
--- a/components/locale-provider/demo/all.md
+++ b/components/locale-provider/demo/all.md
@ -36,18 +36,19 @@ const columns = [{
  dataIndex: 'age',
 }];

-const Page = React.createClass({
-  getInitialState() {
-    return {
+class Page extends React.Component {
+  constructor() {
+    super();
+    this.state = {
      visible: false,
    };
-  },
-  showModal() {
+  }
+  showModal = () => {
    this.setState({ visible: true });
-  },
-  hideModal() {
+  }
+  hideModal = () => {
    this.setState({ visible: false });
-  },
+  }
  render() {
    const info = () => {
      Modal.info({
@ -102,16 +103,17 @@ const Page = React.createClass({
        </Modal>
      </div>
    );
-  },
-});
+  }
+}

-const App = React.createClass({
-  getInitialState() {
-    return {
+class App extends React.Component {
+  constructor() {
+    super();
+    this.state = {
      locale: enUS,
    };
-  },
-  changeLocale(e) {
+  }
+  changeLocale = (e) => {
    const localeValue = e.target.value;
    this.setState({ locale: localeValue });
    if (!localeValue) {
@ -119,7 +121,7 @@ const App = React.createClass({
    } else {
      moment.locale('en');
    }
-  },
+  }
  render() {
    return (
      <div>
@ -133,8 +135,8 @@ const App = React.createClass({
        <LocaleProvider locale={this.state.locale}><Page /></LocaleProvider>
      </div>
    );
-  },
-});
+  }
+}

 ReactDOM.render(<App />, mountNode);
 ````
--- a/components/mention/demo/async.md
+++ b/components/mention/demo/async.md
@ -1,6 +1,6 @@
 ---
 order: 1
-title: 
+title:
  zh-CN: 异步加载
  en-US: Asynchronous loading
 ---
@ -17,19 +17,21 @@ async
 import { Mention } from 'antd';

 const users = ['afc163', 'benjycui', 'yiminghe', 'jljsj33', 'dqaria', 'RaoHai'];
-const AsyncMention = React.createClass({
-  getInitialState() {
-    return {
+
+class AsyncMention extends React.Component {
+  constructor() {
+    super();
+    this.state = {
      suggestions: [],
      loading: false,
    };
-  },
+  }
  fetchSuggestions(value, callback) {
    setTimeout(() => {
      callback(users.filter(item => item.indexOf(value) !== -1));
    }, 500);
-  },
-  onSearchChange(value) {
+  }
+  onSearchChange = (value) => {
    this.fetchSuggestions(value, (suggestions) => {
      this.setState({
        suggestions,
@ -39,7 +41,7 @@ const AsyncMention = React.createClass({
    this.setState({
      loading: true,
    });
-  },
+  }
  render() {
    const { suggestions, loading } = this.state;
    return (
@ -50,11 +52,8 @@ const AsyncMention = React.createClass({
        onSearchChange={this.onSearchChange}
      />
    );
-  },
-});
+  }
+}

-ReactDOM.render(
-  <AsyncMention />,
-  mountNode
-);
+ReactDOM.render(<AsyncMention />, mountNode);
 ````
--- a/components/mention/demo/avatar.md
+++ b/components/mention/demo/avatar.md
@ -1,6 +1,6 @@
 ---
 order: 3
-title: 
+title:
  zh-CN: 头像
  en-US: Icon Image
 ---
@ -26,18 +26,18 @@ const webFrameworks = [
  { name: 'Flask', type: 'Python', icon: 'https://zos.alipayobjects.com/rmsportal/xaypBUijfnpAlXE.png' },
 ];

-const CustomNavMention = React.createClass({
-  getInitialState() {
-    return {
+class CustomNavMention extends React.Component {
+  constructor() {
+    super();
+    this.state = {
      suggestions: [],
    };
-  },
-  onSearchChange(value) {
+  }
+  onSearchChange = (value) => {
    const searchValue = value.toLowerCase();
    const filtered = webFrameworks.filter(item =>
      item.name.toLowerCase().indexOf(searchValue) !== -1
    );
-
    const suggestions = filtered.map(suggestion =>
      <Nav value={suggestion.name} data={suggestion} disabled={suggestion.disabled}>
        <span>
@ -45,10 +45,8 @@ const CustomNavMention = React.createClass({
          {suggestion.name} - {suggestion.type}
        </span>
      </Nav>);
-    this.setState({
-      suggestions,
-    });
-  },
+    this.setState({ suggestions });
+  }
  render() {
    const { suggestions } = this.state;
    return (
@ -58,11 +56,8 @@ const CustomNavMention = React.createClass({
        onSearchChange={this.onSearchChange}
      />
    );
-  },
-});
+  }
+}

-ReactDOM.render(
-  <CustomNavMention />,
-  mountNode
-);
+ReactDOM.render(<CustomNavMention />, mountNode);
 ````
--- a/components/mention/demo/controllder-simple.md
+++ b/components/mention/demo/controllder-simple.md
@ -17,23 +17,26 @@ Controlled mode.
 import { Mention } from 'antd';
 const { toEditorState } = Mention;

-const App = React.createClass({
-  getInitialState() {
-    return {
+class App extends React.Component {
+  constructor() {
+    super();
+    this.state = {
      value: toEditorState('@afc163'),
    };
-  },
-  handleChange(editorState) {
+  }
+  handleChange = (editorState) => {
    this.setState({
      value: editorState,
    });
-  },
+  }
  render() {
-    return (<Mention
-      suggestions={['afc163', 'benjycui', 'yiminghe', 'RaoHai', '中文', 'にほんご']}
-      value={this.state.value}
-      onChange={this.handleChange}
-    />);
+    return (
+      <Mention
+        suggestions={['afc163', 'benjycui', 'yiminghe', 'RaoHai', '中文', 'にほんご']}
+        value={this.state.value}
+        onChange={this.handleChange}
+      />
+    );
  },
 });

--- a/components/mention/demo/controlled.md
+++ b/components/mention/demo/controlled.md
@ -7,28 +7,29 @@ title:

 ## zh-CN

-受控模式，例如配合 Form 使用
+受控模式，例如配合 Form 使用。

 ## en-US

-Controlled mode, for example, to work with `Form` .
+Controlled mode, for example, to work with `Form`.

 ````jsx
 import { Mention, Form, Button } from 'antd';
 const { toEditorState, getMentions } = Mention;
 const FormItem = Form.Item;

-let App = React.createClass({
-  getInitialState() {
-    return {
+class App extends React.Component {
+  constructor() {
+    super();
+    this.state = {
      initValue: toEditorState('@afc163'),
    };
-  },
-  handleReset(e) {
+  }
+  handleReset = (e) => {
    e.preventDefault();
    this.props.form.resetFields();
-  },
-  handleSubmit(e) {
+  }
+  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((errors, values) => {
      if (errors) {
@ -38,8 +39,8 @@ let App = React.createClass({
      console.log('Submit!!!');
      console.log(values);
    });
-  },
-  checkMention(rule, value, callback) {
+  }
+  checkMention = (rule, value, callback) => {
    const { getFieldValue } = this.props.form;
    const mentions = getMentions(getFieldValue('mention'));
    if (mentions.length < 2) {
@ -47,7 +48,7 @@ let App = React.createClass({
    } else {
      callback();
    }
-  },
+  }
  render() {
    const { getFieldDecorator, getFieldValue } = this.props.form;
    console.log('>> render', getFieldValue('mention') === this.state.initValue);
@ -77,8 +78,8 @@ let App = React.createClass({
        </FormItem>
      </Form>
    );
-  },
-});
+  }
+}

 App = Form.create()(App);

--- a/components/mention/demo/custom-tag.md
+++ b/components/mention/demo/custom-tag.md
@ -1,6 +1,6 @@
 ---
 order: 2
-title: 
+title:
  zh-CN: 自定义建议
  en-US: Customize Suggestion
 ---
@ -30,23 +30,25 @@ const webFrameworks = [
 function onSelect(suggestion, data) {
  console.log('onSelect', suggestion, data);
 }
-const CustomNavMention = React.createClass({
-  getInitialState() {
-    return {
+
+class CustomNavMention extends React.Component {
+  constructor() {
+    super();
+    this.state = {
      suggestions: [],
    };
-  },
-  onSearchChange(value) {
+  }
+  onSearchChange = (value) => {
    const searchValue = value.toLowerCase();
    const filtered = webFrameworks.filter(item =>
      item.name.toLowerCase().indexOf(searchValue) !== -1
    );
    const suggestions = filtered.map(suggestion =>
      <Nav value={suggestion.name} data={suggestion}>
-        <span>{suggestion.name} - {suggestion.type} </span>
+        <span>{suggestion.name} - {suggestion.type}</span>
      </Nav>);
    this.setState({ suggestions });
-  },
+  }
  render() {
    const { suggestions } = this.state;
    return (
@ -58,11 +60,8 @@ const CustomNavMention = React.createClass({
        onSelect={onSelect}
      />
    );
-  },
-});
+  }
+}

-ReactDOM.render(
-  <CustomNavMention />,
-  mountNode
-);
+ReactDOM.render(<CustomNavMention />, mountNode);
 ````
--- a/components/mention/demo/popupContainer.md
+++ b/components/mention/demo/popupContainer.md
@ -25,23 +25,28 @@ function onSelect(suggestion) {
  console.log('onSelect', suggestion);
 }

-const PopoverContainer = React.createClass({
-  getSuggestionContainer() {
+class PopoverContainer extends React.Component {
+  getSuggestionContainer = () => {
    return this.popover.getPopupDomNode();
-  },
+  }
  render() {
-    const mention = (<Mention
-      style={{ width: '100%', height: 100 }}
-      onChange={onChange}
-      defaultValue={toEditorState('@afc163')}
-      suggestions={['afc163', 'benjycui', 'yiminghe', 'RaoHai', '中文', 'にほんご']}
-      onSelect={onSelect}
-      getSuggestionContainer={this.getSuggestionContainer}
-    />);
-    return (<Popover trigger="click" content={mention} title="Title" ref={popover => this.popover = popover}>
-      <Button type="primary">Click Me</Button>
-    </Popover>);
-  },
-});
+    const mention = (
+      <Mention
+        style={{ width: '100%', height: 100 }}
+        onChange={onChange}
+        defaultValue={toEditorState('@afc163')}
+        suggestions={['afc163', 'benjycui', 'yiminghe', 'RaoHai', '中文', 'にほんご']}
+        onSelect={onSelect}
+        getSuggestionContainer={this.getSuggestionContainer}
+      />
+    );
+    return (
+      <Popover trigger="click" content={mention} title="Title" ref={popover => this.popover = popover}>
+        <Button type="primary">Click Me</Button>
+      </Popover>
+    );
+  }
+}
+
 ReactDOM.render(<PopoverContainer />, mountNode);
 ````