ant-design/scripts/demo.js

147 lines
4.3 KiB
JavaScript
Raw Normal View History

function camelize(str) {
return str.replace (/(?:^|[-_])(\w)/g, function (_, c) {
return c ? c.toUpperCase () : '';
});
2015-11-30 14:41:01 +08:00
}
window.require = function (path) {
var result = window;
var namespaces = path.split('/');
namespaces.forEach(function (key, i) {
if (i === 2) {
key = camelize(key);
2015-11-30 14:41:01 +08:00
}
if (key !== 'lib') {
if (result[key]) {
result = result[key];
} else {
throw 'There should not have modules here: ' + path;
}
}
});
return result;
2015-11-28 16:34:20 +08:00
};
2015-11-30 14:41:01 +08:00
2015-07-07 15:39:21 +08:00
window['css-animation'] = require('css-animation');
window['react-router'] = require('react-router');
2015-12-18 11:33:27 +08:00
window.CopyToClipboard = require('react-copy-to-clipboard');
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-12-09 21:49:32 +08:00
window['reqwest'] = require('reqwest');
2015-12-08 18:17:42 +08:00
require('./importCss');
2015-07-14 20:16:05 +08:00
antd.DatePicker.locale = {
en_US: require('../components/date-picker/locale/en_US'),
zh_CN: require('../components/date-picker/locale/zh_CN'),
2015-11-16 20:24:37 +08:00
};
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>
2015-11-30 14:41:01 +08:00
, 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>
2015-11-30 14:41:01 +08:00
<input className="address-bar" defaultValue="http://www.example.com"/>
2015-11-09 21:00:30 +08:00
</header>
<section className="window-content">
{this.props.children}
</section>
</article>
);
}
});
2015-07-21 16:05:13 +08:00
module.exports = antd;