(this.editor = ref)} />
40 | }
41 | }
42 |
43 | Editor.propTypes = {
44 | onChange: PropTypes.func,
45 | value: PropTypes.string
46 | }
47 |
--------------------------------------------------------------------------------
/src/collapse/CollapseItem.jsx:
--------------------------------------------------------------------------------
1 | /* @flow */
2 |
3 | import React from 'react';
4 | import { Component, PropTypes, CollapseTransition } from '../../libs';
5 |
6 | export default class CollapseItem extends Component {
7 | constructor(props: Object) {
8 | super(props);
9 | }
10 |
11 | render(): React.DOM {
12 | const { title, isActive, onClick, name } = this.props;
13 |
14 | return (
15 |
21 |
onClick(name)}>
22 |
23 | {title}
24 |
25 |
26 |
27 |
28 | {this.props.children}
29 |
30 |
32 |
33 | );
34 | }
35 | }
36 |
37 | CollapseItem.propTypes = {
38 | onClick: PropTypes.func,
39 | isActive: PropTypes.bool,
40 | title: PropTypes.node,
41 | name: PropTypes.string
42 | };
43 |
--------------------------------------------------------------------------------
/src/menu/MenuItem.jsx:
--------------------------------------------------------------------------------
1 | /* @flow */
2 |
3 | import React from 'react';
4 | import { PropTypes } from '../../libs';
5 |
6 | import MixinComponent from './MixinComponent';
7 |
8 | export default class MenuItem extends MixinComponent {
9 | instanceType: string;
10 |
11 | constructor(props: Object) {
12 | super(props);
13 |
14 | this.instanceType = 'MenuItem';
15 | }
16 |
17 | componentDidMount() {
18 | this.rootMenu().state.menuItems[this.props.index] = this;
19 | }
20 |
21 | handleClick(): void {
22 | this.rootMenu().handleSelect(
23 | this.props.index,
24 | this.indexPath(),
25 | this
26 | );
27 | }
28 |
29 | active(): boolean {
30 | return this.props.index === this.rootMenu().state.activeIndex;
31 | }
32 |
33 | render(): React.DOM {
34 | return (
35 |
43 | {this.props.children}
44 |
45 | )
46 | }
47 | }
48 |
49 | MenuItem.propTypes = {
50 | index: PropTypes.string.isRequired,
51 | disabled: PropTypes.bool
52 | };
53 |
--------------------------------------------------------------------------------
/site/index.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { render } from 'react-dom';
3 | import { AppContainer } from 'react-hot-loader';
4 |
5 | import 'core-js';
6 |
7 | import 'element-theme-default';
8 |
9 | import './styles/base.scss';
10 | import './styles/prism.css';
11 |
12 | import App from './page';
13 |
14 | function inChinaConfirm() {
15 | import('../src/message-box').then(MessageBox => {
16 | MessageBox.default.confirm('建议大陆用户访问部署在国内的站点，是否跳转？', '提示').then(() => {
17 | location.href = 'https://element-react.faas.ele.me';
18 | });
19 | });
20 | }
21 |
22 | function inChina() {
23 | if (window.fetch && document.domain !== 'element-react.faas.ele.me') {
24 | fetch('//restapi.amap.com/v3/ip?output=JSON&key=53a87f7c6a6d173be31d4123958ad5c2')
25 | .then(res => res.json())
26 | .then(({ city }) => {
27 | if (city && typeof city === 'string') {
28 | inChinaConfirm();
29 | }
30 | })
31 | }
32 | }
33 |
34 | render(
, document.getElementById('app'), inChina);
35 |
36 | if (module.hot) {
37 | module.hot.accept('./page', () => {
38 | const App = require('./page').default;
39 |
40 | render(
, document.getElementById('app'));
41 | });
42 | }
43 |
--------------------------------------------------------------------------------
/site/pages/form/style.scss:
--------------------------------------------------------------------------------
1 | .demo-form {
2 | .el-select .el-input {
3 | width: 420px;
4 | }
5 | .el-form {
6 | width: 500px;
7 | }
8 | .el-form.en-US {
9 | width: 540px;
10 | }
11 |
12 | .line {
13 | text-align: center;
14 | }
15 |
16 | .el-checkbox-group {
17 | width: 320px;
18 | margin: 0;
19 | padding: 0;
20 | list-style: none;
21 |
22 | &:after,&:before {
23 | content: ' ';
24 | display: table;
25 | }
26 | &:after {
27 | clear: both;
28 | visibility: hidden;
29 | font-size: 0;
30 | height: 0;
31 | }
32 |
33 | .el-checkbox {
34 | float: left;
35 | width: 160px;
36 | padding-right: 20px;
37 | margin: 0;
38 | padding: 0;
39 |
40 | + .el-checkbox {
41 | margin-left: 0;
42 | }
43 | }
44 | }
45 | .demo-form-normal {
46 | width: 440px;
47 | }
48 | .demo-form-inline {
49 | .el-input {
50 | width: 150px;
51 | }
52 | > * {
53 | margin-right: 10px;
54 | }
55 | }
56 | .demo-dynamic {
57 | .el-input {
58 | display: inline-block;
59 | margin-right: 9px;
60 | width: 270px;
61 | vertical-align: top;
62 | }
63 | }
64 | .fr {
65 | float: right;
66 | }
67 | }
68 |
--------------------------------------------------------------------------------
/typings/typing-tests/Collapse.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Collapse } from 'element-react'
3 | import { Collapse as CollapseNext } from 'element-react/next'
4 |
5 | class Component extends React.Component<{}, {}> {
6 | onChange = (activeNames) => { }
7 | onClick = (item) => { }
8 | render() {
9 | return (
10 |
11 |
12 | item
13 |
14 |
15 | title)} name="name">item
16 |
17 |
18 |
19 | item
20 |
21 |
22 | title