ant-design/scripts/demo.js

122 lines
3.8 KiB
JavaScript
Raw Normal View History

2015-07-07 15:39:21 +08:00
window['css-animation'] = require('css-animation');
window['react-router'] = require('react-router');
2015-11-04 14:59:55 +08:00
window.Clipboard = require('clipboard');
window.Clip = require('./clip');
2015-10-20 16:47:55 +08:00
var antd = require('../index');
2015-07-14 20:16:05 +08:00
var React = require('react');
2015-10-20 16:47:55 +08:00
var ReactDOM = require('react-dom');
2015-10-19 18:04:54 +08:00
var semver = require('semver');
2015-10-20 16:47:55 +08:00
window.antd = antd;
window.React = React;
window.ReactDOM = ReactDOM;
2015-11-16 16:12:39 +08:00
window['object-assign'] = require('object-assign');
window['classnames'] = require('classnames');
2015-07-14 20:16:05 +08:00
2015-11-16 20:24:37 +08:00
antd.Datepicker.locale = {
en_US: require('../components/datepicker/locale/en_US'),
zh_CN: require('../components/datepicker/locale/zh_CN'),
};
antd.Calendar.locale = {
en_US: require('../components/calendar/locale/en_US'),
zh_CN: require('../components/calendar/locale/zh_CN'),
};
antd.Pagination.locale = {
en_US: require('../components/pagination/locale/en_US'),
zh_CN: require('../components/pagination/locale/zh_CN'),
};
2015-09-11 14:57:32 +08:00
InstantClickChangeFns.push(function () {
// auto complete for components
2015-07-14 20:16:05 +08:00
var Select = antd.Select;
var Option = Select.Option;
// 获取搜索数据
2015-10-20 16:47:55 +08:00
var searchData = window.ANT_COMPONENTS.sort(function (a, b) {
2015-09-02 20:50:18 +08:00
return a.title.localeCompare(b.title);
});
2015-07-14 20:16:05 +08:00
var AutoComplete = React.createClass({
getOptions() {
return searchData.map(function (s) {
2015-07-22 20:57:27 +08:00
return <Option sData={s} key={s.title} text={'跳转到 ' + s.title}>
2015-07-14 20:16:05 +08:00
<strong>{s.title}</strong>
2015-10-20 16:47:55 +08:00
&nbsp;
<span className="ant-component-decs">{s.desc}</span>
2015-07-14 20:16:05 +08:00
</Option>;
});
},
handleSelect(value) {
2015-09-17 18:05:06 +08:00
location.href = rootUrl + '/components/' + value.replace(/([a-z])([A-Z])/g, function (m, m1, m2) {
2015-10-20 16:47:55 +08:00
return m1 + '-' + m2;
}).toLowerCase() + '/';
2015-07-14 20:16:05 +08:00
},
filterOption(input, option) {
return option.props.sData.title.toLowerCase().indexOf(input.toLowerCase()) !== -1 || option.props.sData.desc.indexOf(input) !== -1;
},
render() {
2015-08-26 22:16:20 +08:00
return <Select combobox style={{width: '100%'}}
2015-10-20 16:47:55 +08:00
onSelect={this.handleSelect}
optionLabelProp="text"
dropdownClassName="autoComplete"
searchPlaceholder="搜索组件..."
filterOption={this.filterOption}>{this.getOptions()}</Select>;
2015-07-14 20:16:05 +08:00
}
});
2015-10-21 14:53:48 +08:00
ReactDOM.render(<AutoComplete/>, document.getElementById('autoComplete'));
2015-07-14 20:16:05 +08:00
});
InstantClickChangeFns.push(function () {
2015-11-03 17:35:35 +08:00
var Select = antd.Select;
var Option = Select.Option;
var versionsHistory = {
2015-11-15 21:40:50 +08:00
'0.9.2': '09x.ant.design'
};
versionsHistory[antdVersion.latest] =
2015-11-04 21:11:26 +08:00
versionsHistory[antdVersion.latest] || 'ant.design';
2015-10-20 16:47:55 +08:00
var versions = Object.keys(versionsHistory).sort(function (a, b) {
2015-10-19 18:04:54 +08:00
return semver.lt(a, b);
});
2015-10-20 16:47:55 +08:00
var options = versions.map(function (version) {
var link = versionsHistory[version];
2015-11-03 17:35:35 +08:00
return <Option key={version} value={version}>{version}</Option>;
});
2015-10-20 16:47:55 +08:00
2015-11-03 17:35:35 +08:00
function onChange(value) {
if (versionsHistory[value]) {
location.href = location.href.replace(location.host, versionsHistory[value]);
}
}
2015-10-20 16:47:55 +08:00
2015-11-03 17:35:35 +08:00
ReactDOM.render(
<Select defaultValue={antdVersion.latest} size="small" style={{width:130}}
onChange={onChange}>{options}</Select>
, document.getElementById('versions-select'));
});
2015-11-09 21:00:30 +08:00
window.BrowserDemo = React.createClass({
render() {
return (
<article className="window-frame focus">
<header className="top-bar">
<div className="controls">
<div className="control close"></div>
<div className="control minify"></div>
<div className="control expand"></div>
</div>
<input className="address-bar" defaultValue="http://www.example.com" />
</header>
<section className="window-content">
{this.props.children}
</section>
</article>
);
}
});
2015-07-21 16:05:13 +08:00
module.exports = antd;