From 80886d65633ef72764e5d3bd5915bb235bb84a2b Mon Sep 17 00:00:00 2001 From: yiminghe Date: Tue, 14 Jul 2015 20:16:05 +0800 Subject: [PATCH] replace search --- package.json | 4 +- scripts/demo.js | 47 +++++++++ site/templates/component.html | 27 ----- site/templates/layout.html | 184 ++++++++++++++++++++-------------- site/templates/page.html | 4 - static/script.js | 68 ------------- style/components/select.less | 183 +++++++++++++++++---------------- webpack.config.js | 4 +- 8 files changed, 254 insertions(+), 267 deletions(-) diff --git a/package.json b/package.json index ff593245bd..9ee9d661d6 100644 --- a/package.json +++ b/package.json @@ -29,11 +29,11 @@ "rc-dialog": "~4.4.0", "rc-dropdown": "~1.1.1", "rc-input-number": "~2.0.1", - "rc-menu": "~3.4.0", + "rc-menu": "~3.4.2", "rc-notification": "~1.0.1", "rc-pagination": "^1.0.0", "rc-progress": "~1.0.0", - "rc-select": "~4.3.1", + "rc-select": "~4.4.0", "rc-slider": "~1.2.6", "rc-steps": "~1.1.4", "rc-switch": "~1.2.0", diff --git a/scripts/demo.js b/scripts/demo.js index d2bbc2ae20..bf4f29d132 100644 --- a/scripts/demo.js +++ b/scripts/demo.js @@ -1,2 +1,49 @@ window['css-animation'] = require('css-animation'); window['react-router'] = window.ReactRouter; + +var $ = require('jquery'); +var React = require('react'); + +$(function () { +// auto complete for components + var Select = antd.Select; + var Option = Select.Option; + // 获取搜索数据 + var searchData = window.ANT_COMPONENTS; + + var AutoComplete = React.createClass({ + getOptions() { + return searchData.map(function (s) { + return ; + }); + }, + + handleSelect(value) { + location.pathname = '/components/' + value.replace(/([a-z])([A-Z])/g, function (m, m1, m2) { + return m1 + '-' + m2; + }).toLowerCase(); + }, + + filterOption(input, option) { + return option.props.sData.title.toLowerCase().indexOf(input.toLowerCase()) !== -1 || option.props.sData.desc.indexOf(input) !== -1; + }, + + render() { + return ; + } + }); + + React.render(, document.getElementById('autoComplete')); +}); + diff --git a/site/templates/component.html b/site/templates/component.html index 3921e1a23f..3b3dc74400 100644 --- a/site/templates/component.html +++ b/site/templates/component.html @@ -1,32 +1,5 @@ {% extends "page.html" %} -{% block scripts %} - - - -{% endblock %} - {% block content %}
diff --git a/site/templates/layout.html b/site/templates/layout.html index 06f7835e9d..3a1d70b60b 100644 --- a/site/templates/layout.html +++ b/site/templates/layout.html @@ -1,88 +1,122 @@ - - - - - - {% block title %}{{ config.site.name }} - {{ config.site.description }}{% endblock %} - - - - {% block styles %}{% endblock %} - - - - - - - {% block scripts %}{% endblock %} + + + + + + {% block title %}{{ config.site.name }} - {{ config.site.description }}{% endblock %} + + + + + {% block styles %}{% endblock %} + + + + + + + + + + + + + + {% block scripts %}{% endblock %} - +
{% block aside %}{% endblock %} {% block content %}{% endblock %} -
- {%- include "footer.html" %} + +{%- include "footer.html" %} diff --git a/site/templates/page.html b/site/templates/page.html index d33b488236..5a11df32e2 100644 --- a/site/templates/page.html +++ b/site/templates/page.html @@ -10,10 +10,6 @@ {% block description %}{% if post.summay %}{{post.summary}}{% endif %}{% endblock %} -{% block styles %} - -{% endblock %} - {% block aside %} {%- include "aside.html" %} {% endblock %} diff --git a/static/script.js b/static/script.js index d409ceb5de..c4e95eef72 100644 --- a/static/script.js +++ b/static/script.js @@ -1,52 +1,4 @@ $(function() { - - // 获取搜索数据 - var searchData = []; - $('.hidden input').each(function(i, item) { - var obj = {}; - obj.english = item.value.split(' ')[0]; - obj.chinese = item.value.split(' ')[1]; - obj.value = item.value.toLowerCase().replace(/\s+/g, ""); - - searchData.push(obj); - }); - - seajs.config({ - base: 'http://static.alipayobjects.com', - alias: { - 'jquery': 'jquery/1.7.2/jquery', - 'autocomplete': 'arale-autocomplete/1.4.1/autocomplete' - } - }); - - seajs.use(['jquery', 'autocomplete'], function($, AutoComplete){ - $(function() { - var ac = new AutoComplete({ - trigger: '.search-input', - selectFirst: true, - submitOnEnter: false, - dataSource: searchData, - html: '{{english}} {{chinese}}', - filter: function(data, query) { - var result = []; - query = query.toLowerCase().replace(/^\s+|\s+$/g, ''); - if (!query) return result; - $.each(data, function(index, item) { - if (new RegExp(query).test(item.value)) { - result.push(item); - } - }); - return result; - } - }).render(); - - ac.on('itemSelected', function(item) { - $(ac.get('trigger')).val('正转到 ' + item.english + ' ' + item.chinese).attr('disabled', 'disabled'); - location.href = '/components/' + item.english.toLowerCase(); - }); - }); - }); - $('.component-demos .icon-all').on('click', function() { if ($(this).hasClass('expand')) { $(this).removeClass('expand'); @@ -102,7 +54,6 @@ $(function() { self.navBar = self.navBox.find(".bar"); self.navList = self.navBox.find("ul li"); self.navNum = $(".current").index(); - self.search($(".search")); self.navBarAnim(); self.navResize(null); $(window).bind("resize", self.navResize); @@ -114,25 +65,6 @@ $(function() { self.navList.eq(self.navNum).find("a").addClass("hover"); }, - search: function(c) { - var self = this; - self.searchBox = c; - self.searchInput = self.searchBox.find("input[type='text']"); - self.searchBtn = self.searchBox.find("button"); - self.searchInput.focus(function(e) { - $(this).addClass("focus"); - self.searchBtn.css("left", self.searchBox.width() + 13); - }); - self.searchInput.blur(function(e) { - if (!self.searchInput.val()) { - self.searchBtn.attr("style", ""); - $(this).removeClass("focus"); - } - }); - self.searchBtn.click(function(e) { - self.searchBox.find("form").submit(); - }); - }, navBarAnim: function() { var self = this, delay; diff --git a/style/components/select.less b/style/components/select.less index 3bbcbb1095..ae6fdc6357 100644 --- a/style/components/select.less +++ b/style/components/select.less @@ -104,6 +104,31 @@ } } + &-disabled &-selection__choice__remove { + color: #ccc; + cursor: default; + &:hover { + color: #ccc; + } + } + + &-search--inline { + float: left; + + .@{selectPrefixCls}-search__field { + border: none; + font-size: 100%; + //margin-top: 5px; + background: transparent; + outline: 0; + } + > i { + float: right; + } + } + + + &-selection--multiple { min-height: 28px; cursor: text; @@ -160,21 +185,6 @@ } } - &-search--inline { - float: left; - - .@{selectPrefixCls}-search__field { - border: none; - font-size: 100%; - //margin-top: 5px; - background: transparent; - outline: 0; - } - > i { - float: right; - } - } - &-dropdown { display: none; background-color: white; @@ -182,17 +192,78 @@ box-shadow: 0 0px 4px #d9d9d9; border-radius: 4px; box-sizing: border-box; - width: 100%; z-index: 100; - //border-top: none; - //border-top-left-radius: 0; - //border-top-right-radius: 0; + left: -9999px; + top: -9999px; position: absolute; - top: 100%; - margin-top: 4px; outline: none; - .@{selectPrefixCls}-menu-item[aria-selected=true] { - background-color: #ddd; + + &-menu { + outline: none; + margin-bottom: 0; + padding-left: 0; // Override default ul/ol + list-style: none; + z-index: 9999; + max-height: 250px; + overflow: auto; + + > li { + margin: 0; + padding: 0; + } + + & > &-item { + position: relative; + display: block; + padding: 7px 16px; + font-weight: normal; + color: #666666; + white-space: nowrap; + cursor: pointer; + + &:hover, &-active, &-selected { + background-color: tint(@primary-color, 90%) !important; + } + + &-selected { + position: relative; + &:after { + content: '\e613'; + font-family: 'anticon'; + font-weight: bold; + position: absolute; + top: 6px; + right: 16px; + color: @primary-color; + } + } + + &-disabled { + color: #ccc; + cursor: not-allowed; + pointer-events: none; + + &:hover { + color: #ccc; + background-color: #fff; + cursor: not-allowed; + } + } + + &-divider { + height: 1px; + margin: 1px 0; + overflow: hidden; + background-color: #e5e5e5; + line-height: 0; + } + } + } + } + + &-dropdown-container-open, &-open { + .@{selectPrefixCls}-dropdown { + display: block; } } @@ -217,77 +288,11 @@ .ie-rotate(3); .rotate(270deg); } - .@{selectPrefixCls}-dropdown { - display: block; - } .@{selectPrefixCls}-selection { border-color: @primary-color; box-shadow: 0 0 3px tint(@primary-color, 20%); } } - - &-menu { - outline: none; - margin-bottom: 0; - padding-left: 0; // Override default ul/ol - list-style: none; - z-index: 9999; - max-height: 250px; - overflow: auto; - - > li { - margin: 0; - padding: 0; - } - - & > &-item { - position: relative; - display: block; - padding: 7px 16px; - font-weight: normal; - color: #666666; - white-space: nowrap; - cursor: pointer; - - &:hover, &-active, &-selected { - background-color: tint(@primary-color, 90%) !important; - } - - &-selected { - position: relative; - &:after { - content: '\e613'; - font-family: 'anticon'; - font-weight: bold; - position: absolute; - top: 6px; - right: 16px; - color: @primary-color; - } - } - - &-disabled { - color: #ccc; - cursor: not-allowed; - pointer-events: none; - - &:hover { - color: #ccc; - background-color: #fff; - cursor: not-allowed; - } - } - - &-divider { - height: 1px; - margin: 1px 0; - overflow: hidden; - background-color: #e5e5e5; - line-height: 0; - } - } - } - &-combobox { .@{selectPrefixCls}-arrow { display: none; diff --git a/webpack.config.js b/webpack.config.js index 0bd99851b4..cbd5fedb52 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -12,7 +12,7 @@ module.exports = { entry: entry, resolve: { - extensions: ['', '.js', '.jsx'], + extensions: ['', '.js', '.jsx'] }, output: { @@ -22,7 +22,7 @@ module.exports = { externals: { react: "React", - jquery: 'jQuery' + jquery:"jQuery" }, module: {