From 6187e31c235762f5fb29e7d906acc32afaa2f5f5 Mon Sep 17 00:00:00 2001 From: huangyb <897482342@qq.com> Date: Mon, 19 Sep 2016 19:43:36 +0800 Subject: [PATCH] bugfix style --- components/calendar/demo/locale.md | 2 +- components/calendar/locale/zh_TW.js | 1 + components/date-picker/demo/locale.md | 2 +- components/date-picker/locale/zh_TW.js | 202 +++++++++++ components/drawer/demo/basic.md | 2 +- components/locale-provider/demo/all.md | 11 +- components/locale-provider/index.md | 4 +- components/locale-provider/zh_TW.js | 35 ++ components/modal/locale.js | 2 + components/pagination/Pagination.js | 6 +- components/pagination/demo/basic.md | 2 +- components/pagination/index.md | 9 +- components/pagination/locale/en_US.js | 23 +- components/pagination/locale/zh_CN.js | 13 +- components/pagination/locale/zh_TW.js | 12 + .../pagination/rc-pagination/.editorconfig | 9 + .../pagination/rc-pagination/.eslintignore | 1 + .../pagination/rc-pagination/.gitignore | 26 ++ .../pagination/rc-pagination/.travis.yml | 34 ++ .../pagination/rc-pagination/HISTORY.md | 24 ++ components/pagination/rc-pagination/README.md | 94 +++++ .../rc-pagination/assets/index.less | 221 ++++++++++++ .../rc-pagination/examples/default.html | 1 + .../rc-pagination/examples/default.js | 27 ++ .../rc-pagination/examples/jumper.html | 1 + .../rc-pagination/examples/jumper.js | 24 ++ .../rc-pagination/examples/more.html | 1 + .../pagination/rc-pagination/examples/more.js | 9 + .../rc-pagination/examples/simple.html | 1 + .../rc-pagination/examples/simple.js | 11 + .../rc-pagination/examples/sizer.html | 1 + .../rc-pagination/examples/sizer.js | 33 ++ .../rc-pagination/examples/stupid.html | 1 + .../rc-pagination/examples/stupid.js | 11 + components/pagination/rc-pagination/index.js | 2 + .../pagination/rc-pagination/package.json | 54 +++ .../pagination/rc-pagination/src/KeyCode.js | 14 + .../pagination/rc-pagination/src/Options.jsx | 118 ++++++ .../pagination/rc-pagination/src/Pager.jsx | 29 ++ .../rc-pagination/src/Pagination.jsx | 340 ++++++++++++++++++ .../pagination/rc-pagination/src/index.js | 2 + .../rc-pagination/src/locale/en_US.js | 12 + .../rc-pagination/src/locale/ru_RU.js | 12 + .../rc-pagination/src/locale/zh_CN.js | 12 + .../rc-pagination/src/locale/zh_TW.js | 12 + .../rc-pagination/tests/Pagination.spec.jsx | 183 ++++++++++ .../tests/helper/two-pagination.jsx | 34 ++ .../rc-pagination/tests/index.spec.js | 5 + .../rc-pagination/tests/runner.html | 1 + components/pagination/style/index.scss | 3 +- components/style/core/iconfont.scss | 73 ++-- components/style/mixins/_compatibility.scss | 2 +- components/table/demo/basic.md | 1 + components/time-picker/locale/zh_CN.js | 3 +- components/time-picker/locale/zh_TW.js | 87 +++++ components/tree-select/style/index.scss | 8 +- site/theme/template/utils.jsx | 4 +- site/theme/zh-TW.js | 15 + 58 files changed, 1830 insertions(+), 52 deletions(-) create mode 100755 components/calendar/locale/zh_TW.js create mode 100755 components/date-picker/locale/zh_TW.js create mode 100644 components/locale-provider/zh_TW.js create mode 100644 components/pagination/locale/zh_TW.js create mode 100755 components/pagination/rc-pagination/.editorconfig create mode 100755 components/pagination/rc-pagination/.eslintignore create mode 100755 components/pagination/rc-pagination/.gitignore create mode 100755 components/pagination/rc-pagination/.travis.yml create mode 100755 components/pagination/rc-pagination/HISTORY.md create mode 100644 components/pagination/rc-pagination/README.md create mode 100755 components/pagination/rc-pagination/assets/index.less create mode 100755 components/pagination/rc-pagination/examples/default.html create mode 100755 components/pagination/rc-pagination/examples/default.js create mode 100755 components/pagination/rc-pagination/examples/jumper.html create mode 100755 components/pagination/rc-pagination/examples/jumper.js create mode 100755 components/pagination/rc-pagination/examples/more.html create mode 100755 components/pagination/rc-pagination/examples/more.js create mode 100755 components/pagination/rc-pagination/examples/simple.html create mode 100755 components/pagination/rc-pagination/examples/simple.js create mode 100755 components/pagination/rc-pagination/examples/sizer.html create mode 100755 components/pagination/rc-pagination/examples/sizer.js create mode 100755 components/pagination/rc-pagination/examples/stupid.html create mode 100755 components/pagination/rc-pagination/examples/stupid.js create mode 100755 components/pagination/rc-pagination/index.js create mode 100755 components/pagination/rc-pagination/package.json create mode 100755 components/pagination/rc-pagination/src/KeyCode.js create mode 100755 components/pagination/rc-pagination/src/Options.jsx create mode 100755 components/pagination/rc-pagination/src/Pager.jsx create mode 100755 components/pagination/rc-pagination/src/Pagination.jsx create mode 100755 components/pagination/rc-pagination/src/index.js create mode 100755 components/pagination/rc-pagination/src/locale/en_US.js create mode 100755 components/pagination/rc-pagination/src/locale/ru_RU.js create mode 100755 components/pagination/rc-pagination/src/locale/zh_CN.js create mode 100755 components/pagination/rc-pagination/src/locale/zh_TW.js create mode 100755 components/pagination/rc-pagination/tests/Pagination.spec.jsx create mode 100755 components/pagination/rc-pagination/tests/helper/two-pagination.jsx create mode 100755 components/pagination/rc-pagination/tests/index.spec.js create mode 100755 components/pagination/rc-pagination/tests/runner.html create mode 100755 components/time-picker/locale/zh_TW.js create mode 100644 site/theme/zh-TW.js diff --git a/components/calendar/demo/locale.md b/components/calendar/demo/locale.md index bdaba2c..35d5ab9 100755 --- a/components/calendar/demo/locale.md +++ b/components/calendar/demo/locale.md @@ -15,7 +15,7 @@ To set the properties like time zone, language and etc. en_US, zh_CN are support ````jsx import { Calendar } from 'jgui'; -import enUS from 'jgui/lib/calendar/locale/en_US'; +import enUS from 'jgui/lib/calendar/locale/zh_TW'; function onPanelChange(value, mode) { console.log(value, mode); diff --git a/components/calendar/locale/zh_TW.js b/components/calendar/locale/zh_TW.js new file mode 100755 index 0000000..3985482 --- /dev/null +++ b/components/calendar/locale/zh_TW.js @@ -0,0 +1 @@ +module.exports = require('../../date-picker/locale/zh_TW'); diff --git a/components/date-picker/demo/locale.md b/components/date-picker/demo/locale.md index 8adcbe0..6cdcd0a 100755 --- a/components/date-picker/demo/locale.md +++ b/components/date-picker/demo/locale.md @@ -16,7 +16,7 @@ Use locale to set the properties like time zone, language and etc. en_US, zh_CN ````jsx import { DatePicker } from 'jgui'; -import enUS from 'jgui/lib/date-picker/locale/en_US'; +import enUS from 'jgui/lib/date-picker/locale/zh_TW'; const customLocale = { timezoneOffset: 0 * 60, diff --git a/components/date-picker/locale/zh_TW.js b/components/date-picker/locale/zh_TW.js new file mode 100755 index 0000000..46840c2 --- /dev/null +++ b/components/date-picker/locale/zh_TW.js @@ -0,0 +1,202 @@ +export default { + "timezoneOffset": 480, + "firstDayOfWeek": 1, + "minimalDaysInFirstWeek": 1, + "lang": { + "placeholder": "請選擇日期", + "rangePlaceholder": [ + "開始日期", + "結束日期" + ], + "today": "今天", + "now": "此刻", + "backToToday": "返回今天", + "ok": "確 定", + "timeSelect": "選擇時間", + "dateSelect": "選擇日期", + "clear": "清除", + "month": "月", + "year": "年", + "previousMonth": "上個月", + "nextMonth": "下個月", + "monthSelect": "", + "yearSelect": "選擇年份", + "decadeSelect": "選擇年代", + "yearFormat": "yyyy'年'", + "monthFormat": "M'月'", + "dayFormat": "d'日'", + "dateFormat": "yyyy'年'M'月'd'日'", + "dateTimeFormat": "yyyy'年'M'月'd'日' HH'時'mm'分'ss'秒'", + "previousYear": "上一年", + "nextYear": "下一年", + "previousDecade": "上一年代", + "nextDecade": "下一年代", + "previousCentury": "上一世紀", + "nextCentury": "下一世紀", + "format": { + "eras": [ + "公元前", + "公元" + ], + "months": [ + "一月", + "二月", + "三月", + "四月", + "五月", + "六月", + "七月", + "八月", + "九月", + "十月", + "十一月", + "十二月" + ], + "shortMonths": [ + "一月", + "二月", + "三月", + "四月", + "五月", + "六月", + "七月", + "八月", + "九月", + "十月", + "十一月", + "十二月" + ], + "weekdays": [ + "星期天", + "星期一", + "星期二", + "星期三", + "星期四", + "星期五", + "星期六" + ], + "shortWeekdays": [ + "周日", + "周一", + "周二", + "周三", + "周四", + "周五", + "周六" + ], + "veryShortWeekdays": [ + "日", + "一", + "二", + "三", + "四", + "五", + "六" + ], + "ampms": [ + "上午", + "下午" + ], + "datePatterns": [ + "yyyy'年'M'月'd'日' EEEE", + "yyyy'年'M'月'd'日'", + "yyyy-M-d", + "yy-M-d" + ], + "timePatterns": [ + "ahh'時'mm'分'ss'秒' 'GMT'Z", + "ahh'時'mm'分'ss'秒'", + "H:mm:ss", + "ah:mm" + ], + "dateTimePattern": "{date} {time}" + } + }, + "timePickerLocale": { + "placeholder": "請選擇時間", + "clear": "清除", + "format": { + "eras": [ + "公元前", + "公元" + ], + "months": [ + "一月", + "二月", + "三月", + "四月", + "五月", + "六月", + "七月", + "八月", + "九月", + "十月", + "十一月", + "十二月" + ], + "shortMonths": [ + "一月", + "二月", + "三月", + "四月", + "五月", + "六月", + "七月", + "八月", + "九月", + "十月", + "十一月", + "十二月" + ], + "weekdays": [ + "星期天", + "星期一", + "星期二", + "星期三", + "星期四", + "星期五", + "星期六" + ], + "shortWeekdays": [ + "周日", + "周一", + "周二", + "周三", + "周四", + "周五", + "周六" + ], + "veryShortWeekdays": [ + "日", + "一", + "二", + "三", + "四", + "五", + "六" + ], + "ampms": [ + "上午", + "下午" + ], + "datePatterns": [ + "yyyy'年'M'月'd'日' EEEE", + "yyyy'年'M'月'd'日'", + "yyyy-M-d", + "yy-M-d" + ], + "timePatterns": [ + "ahh'時'mm'分'ss'秒' 'GMT'Z", + "ahh'時'mm'分'ss'秒'", + "H:mm:ss", + "ah:mm" + ], + "dateTimePattern": "{date} {time}" + }, + "calendar": { + "timezoneOffset": 480, + "firstDayOfWeek": 1, + "minimalDaysInFirstWeek": 1 + } + } +} diff --git a/components/drawer/demo/basic.md b/components/drawer/demo/basic.md index 158ec10..968628b 100755 --- a/components/drawer/demo/basic.md +++ b/components/drawer/demo/basic.md @@ -28,7 +28,7 @@ class DrawerDemo extends React.Component { size: 250, direction: 'right', zIndex: 101, - transition: 'width .3s ease-out,height .3s ease', + transition: 'all .3s ease', } return ( diff --git a/components/locale-provider/demo/all.md b/components/locale-provider/demo/all.md index dff68dd..eed57b9 100755 --- a/components/locale-provider/demo/all.md +++ b/components/locale-provider/demo/all.md @@ -8,7 +8,7 @@ title: 所有组件 ````jsx import { LocaleProvider, Pagination, DatePicker, TimePicker, Calendar, Popconfirm, Table, Modal, Button, Select, Transfer, Radio } from 'jgui'; -import enUS from 'jgui/lib/locale-provider/en_US'; +import zhTW from 'jgui/lib/locale-provider/zh_TW'; const Option = Select.Option; const RangePicker = DatePicker.RangePicker; @@ -56,8 +56,7 @@ const Page = React.createClass({
@@ -97,7 +96,7 @@ const Page = React.createClass({ const App = React.createClass({ getInitialState() { return { - locale: enUS, + locale: zhTW, }; }, changeLocale(e) { @@ -108,8 +107,8 @@ const App = React.createClass({
Change locale of components: - - English + + 繁體 中文
diff --git a/components/locale-provider/index.md b/components/locale-provider/index.md index f92fb7e..c52d49e 100755 --- a/components/locale-provider/index.md +++ b/components/locale-provider/index.md @@ -14,11 +14,11 @@ LocaleProvider 使用 React 的 [context](https://facebook.github.io/react/docs/ ```jsx -import enUS from 'jgui/lib/locale-provider/en_US'; +import zhTW from 'jgui/lib/locale-provider/zh_TW'; ... -return ; +return ; ``` ### Add a language diff --git a/components/locale-provider/zh_TW.js b/components/locale-provider/zh_TW.js new file mode 100644 index 0000000..fa14ca0 --- /dev/null +++ b/components/locale-provider/zh_TW.js @@ -0,0 +1,35 @@ +import Pagination from '../pagination/rc-pagination/src/locale/zh_TW'; +import DatePicker from '../date-picker/locale/zh_TW'; +import TimePicker from '../time-picker/locale/zh_TW'; +import Calendar from '../calendar/locale/zh_TW'; + +export default { + Pagination, + DatePicker, + TimePicker, + Calendar, + Table: { + filterTitle: '篩選', + filterConfirm: '確定', + filterReset: '重置', + emptyText: 'No Data', // 看這兒： 這裡改為繁體 Demo出現一個 另一個No Data 重疊 問題。 + }, + Modal: { + okText: '確定', + cancelText: '取消', + justOkText: '確定', + }, + Popconfirm: { + okText: '確定', + cancelText: '取消', + }, + Transfer: { + notFoundContent: '列表為空', + searchPlaceholder: '請輸入搜索內容', + itemUnit: '條 ', + itemsUnit: '條', + }, + Select: { + notFoundContent: '暫無數據', + }, +}; \ No newline at end of file diff --git a/components/modal/locale.js b/components/modal/locale.js index 3c6b594..e194d87 100755 --- a/components/modal/locale.js +++ b/components/modal/locale.js @@ -14,8 +14,10 @@ export function changeConfirmLocale(newLocale) { } else { runtimeLocale = assign({}, defaultLocale); } + console.log('runtimeLocaleruntimeLocale2',runtimeLocale) } export function getConfirmLocale() { + console.log('runtimeLocaleruntimeLocale',runtimeLocale) return runtimeLocale; } diff --git a/components/pagination/Pagination.js b/components/pagination/Pagination.js index 429aabe..259bdce 100755 --- a/components/pagination/Pagination.js +++ b/components/pagination/Pagination.js @@ -1,12 +1,12 @@ import React from 'react'; -import RcPagination from 'rc-pagination'; +import RcPagination from './rc-pagination/src/index'; import Select from '../select'; import MiniSelect from './MiniSelect'; -import zhCN from './locale/zh_CN'; +import zhTW from './locale/zh_TW'; export default class Pagination extends React.Component { static defaultProps = { - locale: zhCN, + locale: zhTW, className: '', prefixCls: 'jgui-pagination', } diff --git a/components/pagination/demo/basic.md b/components/pagination/demo/basic.md index 63875c7..acd98fc 100755 --- a/components/pagination/demo/basic.md +++ b/components/pagination/demo/basic.md @@ -9,6 +9,6 @@ title: 基本 import { Pagination } from 'jgui'; ReactDOM.render( - , + , mountNode); ```` diff --git a/components/pagination/index.md b/components/pagination/index.md index 4298d0f..7aa8d0b 100755 --- a/components/pagination/index.md +++ b/components/pagination/index.md @@ -20,14 +20,15 @@ english: Pagination | 参数 | 说明 | 类型 | 默认值 | |------------------|------------------------------------|---------------|--------------------------| +| showTitle | 鼠标移上是否显示title | Bool | false | | current | 当前页数 | Number | 无 | -| defaultCurrent | 默认的当前页数 | Number | 1 | +| defaultCurrent | 默认的当前页数 | Number | 1 | | total | 数据总数 | Number | 0 | | defaultPageSize | 初始的每页条数 | Number | 10 | | pageSize | 每页条数 | Number | | -| onChange | 页码改变的回调，参数是改变后的页码 | Function | noop | -| showSizeChanger | 是否可以改变 pageSize | Bool | false | -| pageSizeOptions | 指定每页可以显示多少条 | Array | ['10', '20', '30', '40'] | +| onChange | 页码改变的回调，参数是改变后的页码 | Function | noop | +| showSizeChanger | 是否可以改变 pageSize | Bool | false | +| pageSizeOptions | 指定每页可以显示多少条 | Array | ['10', '20', '30', '40'] | | onShowSizeChange | pageSize 变化的回调 | Function | noop | | showQuickJumper | 是否可以快速跳转至某页 | Bool | false | | size | 当为「small」时，是小尺寸分页 | String | "" | diff --git a/components/pagination/locale/en_US.js b/components/pagination/locale/en_US.js index 52ac790..4d339ca 100755 --- a/components/pagination/locale/en_US.js +++ b/components/pagination/locale/en_US.js @@ -1 +1,22 @@ -module.exports = require('rc-pagination/lib/locale/en_US'); +'use strict'; + +Object.defineProperty(exports, '__esModule', { + value: true +}); +exports['default'] = { + // Options.jsx + items_per_page: '/page', + jump_to: 'Goto', + page: '', + + // Pager.jsx + first_page: 'First Page', + last_page: 'Last Page', + + // Pagination.jsx + prev_page: 'Previous Page', + next_page: 'Next Page', + prev_5: 'Previous 5 Pages', + next_5: 'Next 5 Pages' +}; +module.exports = exports['default']; \ No newline at end of file diff --git a/components/pagination/locale/zh_CN.js b/components/pagination/locale/zh_CN.js index ae8c122..592507b 100755 --- a/components/pagination/locale/zh_CN.js +++ b/components/pagination/locale/zh_CN.js @@ -1 +1,12 @@ -module.exports = require('rc-pagination/lib/locale/zh_CN'); +export default { + // Options.jsx + items_per_page: '条/页', + jump_to: '跳至', + page: '页', + + // Pagination.jsx + prev_page: '上一页', + next_page: '下一页', + prev_5: '向前 5 页', + next_5: '向后 5 页', +}; \ No newline at end of file diff --git a/components/pagination/locale/zh_TW.js b/components/pagination/locale/zh_TW.js new file mode 100644 index 0000000..3a3d8c7 --- /dev/null +++ b/components/pagination/locale/zh_TW.js @@ -0,0 +1,12 @@ +export default { + // Options.jsx + items_per_page: '條/頁', + jump_to: '跳至', + page: '頁', + + // Pagination.jsx + prev_page: '上一頁', + next_page: '下一頁', + prev_5: '向前 5 頁', + next_5: '向後 5 頁', +}; \ No newline at end of file diff --git a/components/pagination/rc-pagination/.editorconfig b/components/pagination/rc-pagination/.editorconfig new file mode 100755 index 0000000..604c94e --- /dev/null +++ b/components/pagination/rc-pagination/.editorconfig @@ -0,0 +1,9 @@ +# top-most EditorConfig file +root = true + +# Unix-style newlines with a newline ending every file +[*.{js,css}] +end_of_line = lf +insert_final_newline = true +indent_style = space +indent_size = 2 diff --git a/components/pagination/rc-pagination/.eslintignore b/components/pagination/rc-pagination/.eslintignore new file mode 100755 index 0000000..3c3629e --- /dev/null +++ b/components/pagination/rc-pagination/.eslintignore @@ -0,0 +1 @@ +node_modules diff --git a/components/pagination/rc-pagination/.gitignore b/components/pagination/rc-pagination/.gitignore new file mode 100755 index 0000000..f67c8b1 --- /dev/null +++ b/components/pagination/rc-pagination/.gitignore @@ -0,0 +1,26 @@ +*.iml +*.log +.idea/ +.ipr +.iws +*~ +~* +*.diff +*.patch +*.bak +.DS_Store +Thumbs.db +.project +.*proj +.svn/ +*.swp +*.swo +*.pyc +*.pyo +.build +node_modules +.cache +dist +assets/**/*.css +build +lib \ No newline at end of file diff --git a/components/pagination/rc-pagination/.travis.yml b/components/pagination/rc-pagination/.travis.yml new file mode 100755 index 0000000..94510f8 --- /dev/null +++ b/components/pagination/rc-pagination/.travis.yml @@ -0,0 +1,34 @@ +language: node_js + +notifications: + email: + - yiminghe@gmail.com + +node_js: +- 4.0.0 + +before_install: +- | + if ! git diff --name-only $TRAVIS_COMMIT_RANGE | grep -qvE '(\.md$)|(^(docs|examples))/' + then + echo "Only docs were updated, stopping build process." + exit + fi + npm install mocha-phantomjs -g + phantomjs --version +script: +- | + if [ "$TEST_TYPE" = test ]; then + npm test + else + npm run $TEST_TYPE + fi +env: + matrix: + - TEST_TYPE=lint + - TEST_TYPE=browser-test + - TEST_TYPE=browser-test-cover + +matrix: + allow_failures: + - env: "TEST_TYPE=saucelabs" \ No newline at end of file diff --git a/components/pagination/rc-pagination/HISTORY.md b/components/pagination/rc-pagination/HISTORY.md new file mode 100755 index 0000000..36e58d1 --- /dev/null +++ b/components/pagination/rc-pagination/HISTORY.md @@ -0,0 +1,24 @@ +1.5.5 / 2016-09-01 +================== + +* Fix #34 + +1.5.4 / 2016-07-31 +================== + +* Add space before per page #33 + +1.5.0 / 2016-03-02 +================== + +* Add `defaultPageSize` and fix `pageSize` to a controlled prop + +1.3.0 / 2015-11-25 +================== + +* Add `defaultCurrent` prop + +1.2.0 +================== + +* Allow specifying the page size for **sizeChanger** diff --git a/components/pagination/rc-pagination/README.md b/components/pagination/rc-pagination/README.md new file mode 100644 index 0000000..959d4ed --- /dev/null +++ b/components/pagination/rc-pagination/README.md @@ -0,0 +1,94 @@ +# rc-pagination +--- + +React Pagination Component + +[![NPM version][npm-image]][npm-url] +[![build status][travis-image]][travis-url] +[![Test coverage][coveralls-image]][coveralls-url] +[![gemnasium deps][gemnasium-image]][gemnasium-url] +[![node version][node-image]][node-url] +[![npm download][download-image]][download-url] + +[npm-image]: http://img.shields.io/npm/v/rc-pagination.svg?style=flat-square +[npm-url]: http://npmjs.org/package/rc-pagination +[travis-image]: https://img.shields.io/travis/react-component/pagination.svg?style=flat-square +[travis-url]: https://travis-ci.org/react-component/pagination +[coveralls-image]: https://img.shields.io/coveralls/react-component/pagination.svg?style=flat-square +[coveralls-url]: https://coveralls.io/r/react-component/pagination?branch=master +[gemnasium-image]: http://img.shields.io/gemnasium/react-component/pagination.svg?style=flat-square +[gemnasium-url]: https://gemnasium.com/react-component/pagination +[node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg?style=flat-square +[node-url]: http://nodejs.org/download/ +[download-image]: https://img.shields.io/npm/dm/rc-pagination.svg?style=flat-square +[download-url]: https://npmjs.org/package/rc-pagination + + +## Development + +``` +npm install +npm start +``` + +## Example + +http://localhost:3000/examples/ + +online example: http://react-component.github.io/pagination/examples/ + + +## Feature + +* support ie8,ie8+,chrome,firefox,safari + +### Keyboard + + + +## install + +[![rc-pagination](https://nodei.co/npm/rc-pagination.png)](https://npmjs.org/package/rc-pagination) + +## Usage + +```js +var Pagination = require('rc-pagination'); +var React = require('react'); +React.render(, container); +``` + +## API + +### props + +### Pagination + +| Parameter | Description | Type | Default | +|------------------|------------------------------------|---------------|--------------------------| +| defaultCurrent | uncontrolled current page | Number | 1 | +| current | current page | Number | undefined | +| total | items total count | Number | 0 | +| defaultPageSize | default items per page | Number | 10 | +| pageSize | items per page | Number | 10 | +| onChange | page change callback | Function | noop | +| showSizeChanger | show pageSize changer | Bool | false | +| pageSizeOptions | specify the sizeChanger selections | Array | ['10', '20', '30', '40'] | +| onShowSizeChange | pageSize chagne callback | Function | noop | +| showQuickJump | show quick goto jumper | Bool | false | +| showTotal | show total records text | Function | undefined | +| className | when set "mini", show mini version | String | rc-pagination | +| simple | when set, show simple pager | Object | null | +| locale | to set l10n config | Object | [zh_CN](https://github.com/react-component/pagination/blob/master/src/locale/zh_CN.js) | + +## Test Case + +http://localhost:3000/tests/runner.html?coverage + +## Coverage + +http://localhost:3000/node_modules/rc-server/node_modules/node-jscover/lib/front-end/jscoverage.html?w=http://localhost:3000/tests/runner.html?coverage + +## License + +rc-pagination is released under the MIT license. diff --git a/components/pagination/rc-pagination/assets/index.less b/components/pagination/rc-pagination/assets/index.less new file mode 100755 index 0000000..ee403e9 --- /dev/null +++ b/components/pagination/rc-pagination/assets/index.less @@ -0,0 +1,221 @@ +@prefixClass: rc-pagination; + + +.@{prefixClass} { + font-size: 12px; + font-family: 'Arial'; + user-select: none; + + &-total-text { + float: left; + height: 30px; + line-height: 30px; + margin-right: 10px; + } + + &:after { + content: " "; + display: block; + height: 0; + clear: both; + overflow: hidden; + visibility: hidden; + } + + &-item { + cursor: pointer; + border-radius: 6px; + min-width: 28px; + height: 28px; + line-height: 28px; + text-align: center; + list-style: none; + float: left; + border: 1px solid #d9d9d9; + background-color: #fff; + margin-right: 8px; + + a { + text-decoration: none; + color: #666; + } + + + &:hover { + border-color: #2db7f5; + a { + color: #2db7f5; + } + } + + &-active { + background-color: #2db7f5; + border-color: #2db7f5; + + a { + color: #fff; + } + + &:hover { + a { + color: #fff; + } + } + } + } + + &-jump-prev, &-jump-next { + &:after { + content: "•••"; + display: block; + letter-spacing: 2px; + color: #ccc; + font-size: 12px; + margin-top: 1px; + } + + &:hover { + &:after { + color: #2db7f5; + } + } + + } + + &-jump-prev { + &:hover { + &:after { + content: "«"; + } + } + } + + &-jump-next { + &:hover { + &:after { + content: "»"; + } + } + } + + &-prev, &-jump-prev, &-jump-next { + margin-right: 8px; + } + &-prev, &-next, &-jump-prev, &-jump-next { + cursor: pointer; + color: #666; + font-size: 10px; + border-radius: 6px; + list-style: none; + min-width: 28px; + height: 28px; + line-height: 28px; + float: left; + text-align: center; + } + + &-prev { + a { + &:after { + content: "‹"; + display: block; + } + } + } + + &-next { + a { + &:after { + content: "›"; + display: block; + } + } + } + + &-prev, &-next { + border: 1px solid #d9d9d9; + font-size: 18px; + a { + color: #666; + &:after { + margin-top: -1px; + } + } + } + + &-disabled { + cursor: not-allowed; + a { + color: #ccc; + } + } + + &-options { + float: left; + margin-left: 15px; + &-size-changer { + float: left; + width: 80px; + } + + &-quick-jumper { + float: left; + margin-left: 16px; + height: 28px; + line-height: 28px; + + input { + margin: 0 8px; + box-sizing: border-box; + background-color: #fff; + border-radius: 6px; + border: 1px solid #d9d9d9; + outline: none; + padding: 3px 12px; + width: 50px; + height: 28px; + + &:hover { + border-color: #2db7f5; + } + } + } + } + + &-simple { + .@{prefixClass}-prev, .@{prefixClass}-next { + border: none; + height: 24px; + line-height: 24px; + margin: 0; + font-size: 18px; + } + + .@{prefixClass}-simple-pager { + float: left; + margin-right: 8px; + + .@{prefixClass}-slash { + margin: 0 10px; + } + + input { + margin: 0 8px; + box-sizing: border-box; + background-color: #fff; + border-radius: 6px; + border: 1px solid #d9d9d9; + outline: none; + padding: 5px 8px; + width: 30px; + min-height: 20px; + + + &:hover { + border-color: #2db7f5; + } + } + + } + } +} diff --git a/components/pagination/rc-pagination/examples/default.html b/components/pagination/rc-pagination/examples/default.html new file mode 100755 index 0000000..48cdce8 --- /dev/null +++ b/components/pagination/rc-pagination/examples/default.html @@ -0,0 +1 @@ +placeholder diff --git a/components/pagination/rc-pagination/examples/default.js b/components/pagination/rc-pagination/examples/default.js new file mode 100755 index 0000000..e00411b --- /dev/null +++ b/components/pagination/rc-pagination/examples/default.js @@ -0,0 +1,27 @@ +/* eslint func-names: 0, no-console: 0 */ +require('rc-pagination/assets/index.less'); +const Pagination = require('rc-pagination'); +const React = require('react'); + + +const Container = React.createClass({ + getInitialState() { + return { + current: 3, + }; + }, + onChange(page) { + console.log(page); + this.setState({ + current: page, + }); + }, + render() { + return ; + }, +}); + +React.render( + , + document.getElementById('__react-content') +); diff --git a/components/pagination/rc-pagination/examples/jumper.html b/components/pagination/rc-pagination/examples/jumper.html new file mode 100755 index 0000000..48cdce8 --- /dev/null +++ b/components/pagination/rc-pagination/examples/jumper.html @@ -0,0 +1 @@ +placeholder diff --git a/components/pagination/rc-pagination/examples/jumper.js b/components/pagination/rc-pagination/examples/jumper.js new file mode 100755 index 0000000..3e2b160 --- /dev/null +++ b/components/pagination/rc-pagination/examples/jumper.js @@ -0,0 +1,24 @@ +/* eslint func-names: 0, no-console: 0 */ +import React from 'react'; +import ReactDOM from 'react-dom'; +import Select from 'rc-select'; +import Pagination from 'rc-pagination'; +import 'rc-pagination/assets/index.less'; +import 'rc-select/assets/index.css'; + +function onShowSizeChange(current, pageSize) { + console.log(current); + console.log(pageSize); +} + +function showTotal(total) { + return `一共 ${total} 条数据`; +} + +ReactDOM.render( + , + document.getElementById('__react-content') +); diff --git a/components/pagination/rc-pagination/examples/more.html b/components/pagination/rc-pagination/examples/more.html new file mode 100755 index 0000000..48cdce8 --- /dev/null +++ b/components/pagination/rc-pagination/examples/more.html @@ -0,0 +1 @@ +placeholder diff --git a/components/pagination/rc-pagination/examples/more.js b/components/pagination/rc-pagination/examples/more.js new file mode 100755 index 0000000..ab62d4a --- /dev/null +++ b/components/pagination/rc-pagination/examples/more.js @@ -0,0 +1,9 @@ +require('rc-pagination/assets/index.less'); +const Pagination = require('rc-pagination'); +const React = require('react'); +const ReactDOM = require('react-dom'); + +ReactDOM.render( + , + document.getElementById('__react-content') +); diff --git a/components/pagination/rc-pagination/examples/simple.html b/components/pagination/rc-pagination/examples/simple.html new file mode 100755 index 0000000..b3a4252 --- /dev/null +++ b/components/pagination/rc-pagination/examples/simple.html @@ -0,0 +1 @@ +placeholder \ No newline at end of file diff --git a/components/pagination/rc-pagination/examples/simple.js b/components/pagination/rc-pagination/examples/simple.js new file mode 100755 index 0000000..2697614 --- /dev/null +++ b/components/pagination/rc-pagination/examples/simple.js @@ -0,0 +1,11 @@ +// use jsx to render html, do not modify simple.html + +require('rc-pagination/assets/index.less'); +const Pagination = require('rc-pagination'); +const React = require('react'); +const ReactDOM = require('react-dom'); + +ReactDOM.render( + , + document.getElementById('__react-content') +); diff --git a/components/pagination/rc-pagination/examples/sizer.html b/components/pagination/rc-pagination/examples/sizer.html new file mode 100755 index 0000000..b3a4252 --- /dev/null +++ b/components/pagination/rc-pagination/examples/sizer.html @@ -0,0 +1 @@ +placeholder \ No newline at end of file diff --git a/components/pagination/rc-pagination/examples/sizer.js b/components/pagination/rc-pagination/examples/sizer.js new file mode 100755 index 0000000..6573f9c --- /dev/null +++ b/components/pagination/rc-pagination/examples/sizer.js @@ -0,0 +1,33 @@ +/* eslint func-names: 0, no-console: 0 */ +require('rc-pagination/assets/index.less'); +require('rc-select/assets/index.css'); +const Pagination = require('rc-pagination'); +const React = require('react'); +const ReactDOM = require('react-dom'); +import Select from 'rc-select'; + +const Hello = React.createClass({ + getInitialState: function() { + return { + pageSize: 20, + }; + }, + onShowSizeChange(current, pageSize) { + console.log(current); + this.setState({ pageSize }); + }, + render() { + return ( +
+ + +
+ ); + }, +}); + +ReactDOM.render(, document.getElementById('__react-content')); diff --git a/components/pagination/rc-pagination/examples/stupid.html b/components/pagination/rc-pagination/examples/stupid.html new file mode 100755 index 0000000..48cdce8 --- /dev/null +++ b/components/pagination/rc-pagination/examples/stupid.html @@ -0,0 +1 @@ +placeholder diff --git a/components/pagination/rc-pagination/examples/stupid.js b/components/pagination/rc-pagination/examples/stupid.js new file mode 100755 index 0000000..ef5c554 --- /dev/null +++ b/components/pagination/rc-pagination/examples/stupid.js @@ -0,0 +1,11 @@ +// use jsx to render html, do not modify simple.html + +const Pagination = require('rc-pagination'); +const React = require('react'); +const ReactDOM = require('react-dom'); +require('rc-pagination/assets/index.less'); + +ReactDOM.render( + , + document.getElementById('__react-content') +); diff --git a/components/pagination/rc-pagination/index.js b/components/pagination/rc-pagination/index.js new file mode 100755 index 0000000..b1f1a13 --- /dev/null +++ b/components/pagination/rc-pagination/index.js @@ -0,0 +1,2 @@ +// do not modify this file +module.exports = require('./src/'); diff --git a/components/pagination/rc-pagination/package.json b/components/pagination/rc-pagination/package.json new file mode 100755 index 0000000..dd7a8cb --- /dev/null +++ b/components/pagination/rc-pagination/package.json @@ -0,0 +1,54 @@ +{ + "name": "rc-pagination", + "version": "1.5.5", + "description": "pagination ui component for react", + "keywords": [ + "react", + "react-component", + "react-pagination", + "pagination" + ], + "homepage": "http://github.com/react-component/pagination", + "author": "i@xiaoba.me", + "repository": { + "type": "git", + "url": "git@github.com:react-component/pagination.git" + }, + "bugs": { + "url": "http://github.com/react-component/pagination/issues" + }, + "licenses": "MIT", + "files": [ + "lib", + "assets/*.css" + ], + "main": "lib/index", + "config": { + "port": 3000 + }, + "scripts": { + "build": "rc-tools run build", + "gh-pages": "rc-tools run gh-pages", + "start": "rc-server", + "pub": "rc-tools run pub", + "lint": "rc-tools run lint", + "karma": "rc-tools run karma", + "saucelabs": "rc-tools run saucelabs", + "browser-test": "rc-tools run browser-test", + "browser-test-cover": "rc-tools run browser-test-cover" + }, + "devDependencies": { + "expect.js": "0.3.x", + "pre-commit": "1.x", + "rc-select": "5.x", + "rc-server": "3.x", + "rc-tools": "4.x", + "rc-util": "3.x", + "react": "~0.14.3", + "react-addons-test-utils": "~0.14.3", + "react-dom": "~0.14.3" + }, + "pre-commit": [ + "lint" + ] +} diff --git a/components/pagination/rc-pagination/src/KeyCode.js b/components/pagination/rc-pagination/src/KeyCode.js new file mode 100755 index 0000000..9f47db2 --- /dev/null +++ b/components/pagination/rc-pagination/src/KeyCode.js @@ -0,0 +1,14 @@ +module.exports = { + ZERO: 48, + NINE: 57, + + NUMPAD_ZERO: 96, + NUMPAD_NINE: 105, + + BACKSPACE: 8, + DELETE: 46, + ENTER: 13, + + ARROW_UP: 38, + ARROW_DOWN: 40, +}; diff --git a/components/pagination/rc-pagination/src/Options.jsx b/components/pagination/rc-pagination/src/Options.jsx new file mode 100755 index 0000000..595b29f --- /dev/null +++ b/components/pagination/rc-pagination/src/Options.jsx @@ -0,0 +1,118 @@ +const React = require('react'); +const KEYCODE = require('./KeyCode'); + +class Options extends React.Component { + constructor(props) { + super(props); + + this.state = { + current: props.current, + _current: props.current, + }; + + ['_handleChange', '_changeSize', '_go', '_buildOptionText'].forEach((method) => this[method] = this[method].bind(this)); + } + _buildOptionText(value) { + return `${value} ${this.props.locale.items_per_page}`; + } + + _changeSize(value) { + this.props.changeSize(Number(value)); + } + + _handleChange(evt) { + const _val = evt.target.value; + + this.setState({ + _current: _val, + }); + } + + _go(e) { + const _val = e.target.value; + if (_val === '') { + return; + } + let val = Number(this.state._current); + if (isNaN(val)) { + val = this.state.current; + } + if (e.keyCode === KEYCODE.ENTER) { + const c = this.props.quickGo(val); + this.setState({ + _current: c, + current: c, + }); + } + } + + render() { + const props = this.props; + const state = this.state; + const locale = props.locale; + const prefixCls = `${props.rootPrefixCls}-options`; + const changeSize = props.changeSize; + const quickGo = props.quickGo; + const buildOptionText = props.buildOptionText || this._buildOptionText; + const Select = props.selectComponentClass; + let changeSelect = null; + let goInput = null; + + if (!(changeSize || quickGo)) { + return null; + } + + if (changeSize && Select) { + const Option = Select.Option; + const pageSize = props.pageSize || props.pageSizeOptions[0]; + const options = props.pageSizeOptions.map((opt, i) => ( + + )); + + changeSelect = ( + + ); + } + + if (quickGo) { + goInput = ( +
+ {locale.jump_to} + + {locale.page} +
+ ); + } + + return ( +
+ {changeSelect} + {goInput} +
+ ); + } +} + +Options.propTypes = { + changeSize: React.PropTypes.func, + quickGo: React.PropTypes.func, + selectComponentClass: React.PropTypes.func, + current: React.PropTypes.number, + pageSizeOptions: React.PropTypes.arrayOf(React.PropTypes.string), + pageSize: React.PropTypes.number, + buildOptionText: React.PropTypes.func, + locale: React.PropTypes.object, +}; + +Options.defaultProps = { + pageSizeOptions: ['10', '20', '30', '40'], +}; + +module.exports = Options; diff --git a/components/pagination/rc-pagination/src/Pager.jsx b/components/pagination/rc-pagination/src/Pager.jsx new file mode 100755 index 0000000..549b328 --- /dev/null +++ b/components/pagination/rc-pagination/src/Pager.jsx @@ -0,0 +1,29 @@ +const React = require('react'); + +class Pager extends React.Component { + render() { + const props = this.props; + const prefixCls = `${props.rootPrefixCls}-item`; + let cls = `${prefixCls} ${prefixCls}-${props.page}`; + + if (props.active) { + cls = `${cls} ${prefixCls}-active`; + } + + return ( +
  • + {props.page} +
    • + ); + } +} + +Pager.propTypes = { + page: React.PropTypes.number, + active: React.PropTypes.bool, + last: React.PropTypes.bool, + showTitle: React.PropTypes.bool, + locale: React.PropTypes.object, +}; + +module.exports = Pager; diff --git a/components/pagination/rc-pagination/src/Pagination.jsx b/components/pagination/rc-pagination/src/Pagination.jsx new file mode 100755 index 0000000..107ef2e --- /dev/null +++ b/components/pagination/rc-pagination/src/Pagination.jsx @@ -0,0 +1,340 @@ +const React = require('react'); +const Pager = require('./Pager'); +const Options = require('./Options'); +const KEYCODE = require('./KeyCode'); +const LOCALE = require('./locale/zh_CN'); + +function noop() { +} + +class Pagination extends React.Component { + constructor(props) { + super(props); + + const hasOnChange = props.onChange !== noop; + const hasCurrent = ('current' in props); + if (hasCurrent && !hasOnChange) { + console.warn('Warning: You provided a `current` prop to a Pagination component without an `onChange` handler. This will render a read-only component.'); // eslint-disable-line + } + + let current = props.defaultCurrent; + if ('current' in props) { + current = props.current; + } + + let pageSize = props.defaultPageSize; + if ('pageSize' in props) { + pageSize = props.pageSize; + } + + this.state = { + current: current, + _current: current, + pageSize: pageSize, + }; + + [ + 'render', + '_handleChange', + '_handleKeyUp', + '_handleKeyDown', + '_changePageSize', + '_isValid', + '_prev', + '_next', + '_hasPrev', + '_hasNext', + '_jumpPrev', + '_jumpNext', + ].forEach((method) => this[method] = this[method].bind(this)); + } + + componentWillReceiveProps(nextProps) { + if ('current' in nextProps) { + this.setState({ + current: nextProps.current, + _current: nextProps.current, + }); + } + + if ('pageSize' in nextProps) { + const newState = {}; + let current = this.state.current; + const newCurrent = this._calcPage(nextProps.pageSize); + current = current > newCurrent ? newCurrent : current; + if (!('current' in nextProps)) { + newState.current = current; + newState._current = current; + } + newState.pageSize = nextProps.pageSize; + this.setState(newState); + } + } + + // private methods + + _calcPage(p) { + let pageSize = p; + if (typeof pageSize === 'undefined') { + pageSize = this.state.pageSize; + } + return Math.floor((this.props.total - 1) / pageSize) + 1; + } + + _isValid(page) { + return typeof page === 'number' && page >= 1 && page !== this.state.current; + } + + _handleKeyDown(evt) { + if (evt.keyCode === KEYCODE.ARROW_UP || evt.keyCode === KEYCODE.ARROW_DOWN) { + evt.preventDefault(); + } + } + + _handleKeyUp(evt) { + const _val = evt.target.value; + let val; + + if (_val === '') { + val = _val; + } else if (isNaN(Number(_val))) { + val = this.state._current; + } else { + val = Number(_val); + } + + this.setState({ + _current: val, + }); + + if (evt.keyCode === KEYCODE.ENTER) { + this._handleChange(val); + } else if (evt.keyCode === KEYCODE.ARROW_UP) { + this._handleChange(val - 1); + } else if (evt.keyCode === KEYCODE.ARROW_DOWN) { + this._handleChange(val + 1); + } + } + + _changePageSize(size) { + let current = this.state.current; + const newCurrent = this._calcPage(size); + current = current > newCurrent ? newCurrent : current; + if (typeof size === 'number') { + if (!('pageSize' in this.props)) { + this.setState({ + pageSize: size, + }); + } + if (!('current' in this.props)) { + this.setState({ + current: current, + _current: current, + }); + } + } + this.props.onShowSizeChange(current, size); + } + + _handleChange(p) { + let page = p; + if (this._isValid(page)) { + if (page > this._calcPage()) { + page = this._calcPage(); + } + + if (!('current' in this.props)) { + this.setState({ + current: page, + _current: page, + }); + } + + this.props.onChange(page); + + return page; + } + + return this.state.current; + } + + _prev() { + if (this._hasPrev()) { + this._handleChange(this.state.current - 1); + } + } + + _next() { + if (this._hasNext()) { + this._handleChange(this.state.current + 1); + } + } + + _jumpPrev() { + this._handleChange(Math.max(1, this.state.current - 5)); + } + + _jumpNext() { + this._handleChange(Math.min(this._calcPage(), this.state.current + 5)); + } + + _hasPrev() { + return this.state.current > 1; + } + + _hasNext() { + return this.state.current < this._calcPage(); + } + + render() { + const props = this.props; + const locale = props.locale; + + const prefixCls = props.prefixCls; + const showTitle = props.showTitle; + const allPages = this._calcPage(); + const pagerList = []; + let jumpPrev = null; + let jumpNext = null; + let firstPager = null; + let lastPager = null; + + if (props.simple) { + return ( +
      +
    • + +
      • +
      + + ／ + {allPages} +
      +
    • + +
      • +
    + ); + } + + if (allPages <= 9) { + for (let i = 1; i <= allPages; i++) { + const active = this.state.current === i; + pagerList.push(); + } + } else { + jumpPrev = (
  • + +
    • ); + jumpNext = (
  • + +
    • ); + lastPager = (); + firstPager = (); + + const current = this.state.current; + + let left = Math.max(1, current - 2); + let right = Math.min(current + 2, allPages); + + if (current - 1 <= 2) { + right = 1 + 4; + } + + if (allPages - current <= 2) { + left = allPages - 4; + } + + for (let i = left; i <= right; i++) { + const active = current === i; + pagerList.push(); + } + + if (current - 1 >= 4) { + pagerList.unshift(jumpPrev); + } + if (allPages - current >= 4) { + pagerList.push(jumpNext); + } + + if (left !== 1) { + pagerList.unshift(firstPager); + } + if (right !== allPages) { + pagerList.push(lastPager); + } + } + + let totalText = null; + + if (props.showTotal) { + totalText = {props.showTotal(props.total)}; + } + + return ( +
      + {totalText} +
    • + +
      • + {pagerList} +
    • + +
      • + +
    + ); + } + +} + +Pagination.propTypes = { + current: React.PropTypes.number, + defaultCurrent: React.PropTypes.number, + showTitle: React.PropTypes.bool, + total: React.PropTypes.number, + pageSize: React.PropTypes.number, + defaultPageSize: React.PropTypes.number, + onChange: React.PropTypes.func, + showSizeChanger: React.PropTypes.bool, + onShowSizeChange: React.PropTypes.func, + selectComponentClass: React.PropTypes.func, + showQuickJumper: React.PropTypes.bool, + pageSizeOptions: React.PropTypes.arrayOf(React.PropTypes.string), + showTotal: React.PropTypes.func, + locale: React.PropTypes.object, +}; + +Pagination.defaultProps = { + defaultCurrent: 1, + total: 0, + showTitle: false, + defaultPageSize: 10, + onChange: noop, + className: '', + selectPrefixCls: 'rc-select', + prefixCls: 'rc-pagination', + selectComponentClass: null, + showQuickJumper: false, + showSizeChanger: false, + onShowSizeChange: noop, + locale: LOCALE, +}; + +module.exports = Pagination; diff --git a/components/pagination/rc-pagination/src/index.js b/components/pagination/rc-pagination/src/index.js new file mode 100755 index 0000000..feae85c --- /dev/null +++ b/components/pagination/rc-pagination/src/index.js @@ -0,0 +1,2 @@ +// export this package's api +module.exports = require('./Pagination'); diff --git a/components/pagination/rc-pagination/src/locale/en_US.js b/components/pagination/rc-pagination/src/locale/en_US.js new file mode 100755 index 0000000..ac098dc --- /dev/null +++ b/components/pagination/rc-pagination/src/locale/en_US.js @@ -0,0 +1,12 @@ +export default { + // Options.jsx + items_per_page: '/ page', + jump_to: 'Goto', + page: '', + + // Pagination.jsx + prev_page: 'Previous Page', + next_page: 'Next Page', + prev_5: 'Previous 5 Pages', + next_5: 'Next 5 Pages', +}; diff --git a/components/pagination/rc-pagination/src/locale/ru_RU.js b/components/pagination/rc-pagination/src/locale/ru_RU.js new file mode 100755 index 0000000..03750e0 --- /dev/null +++ b/components/pagination/rc-pagination/src/locale/ru_RU.js @@ -0,0 +1,12 @@ +export default { + // Options.jsx + items_per_page: '/page', + jump_to: 'Перейти', + page: '', + + // Pagination.jsx + prev_page: 'Назад', + next_page: 'Вперед', + prev_5: 'Предыдущие 5', + next_5: 'Следующие 5', +}; diff --git a/components/pagination/rc-pagination/src/locale/zh_CN.js b/components/pagination/rc-pagination/src/locale/zh_CN.js new file mode 100755 index 0000000..737266d --- /dev/null +++ b/components/pagination/rc-pagination/src/locale/zh_CN.js @@ -0,0 +1,12 @@ +export default { + // Options.jsx + items_per_page: '条/页', + jump_to: '跳至', + page: '页', + + // Pagination.jsx + prev_page: '上一页', + next_page: '下一页', + prev_5: '向前 5 页', + next_5: '向后 5 页', +}; diff --git a/components/pagination/rc-pagination/src/locale/zh_TW.js b/components/pagination/rc-pagination/src/locale/zh_TW.js new file mode 100755 index 0000000..8e8a7ad --- /dev/null +++ b/components/pagination/rc-pagination/src/locale/zh_TW.js @@ -0,0 +1,12 @@ +export default { + // Options.jsx + items_per_page: '條/頁', + jump_to: '跳至', + page: '頁', + + // Pagination.jsx + prev_page: '上一頁', + next_page: '下一頁', + prev_5: '向前 5 頁', + next_5: '向後 5 頁', +}; diff --git a/components/pagination/rc-pagination/tests/Pagination.spec.jsx b/components/pagination/rc-pagination/tests/Pagination.spec.jsx new file mode 100755 index 0000000..66c65b6 --- /dev/null +++ b/components/pagination/rc-pagination/tests/Pagination.spec.jsx @@ -0,0 +1,183 @@ +/* eslint func-names: 0, no-console: 0 */ +import expect from 'expect.js'; +import Pagination from '../'; +import React from 'react'; +import TestUtils from 'react-addons-test-utils'; +import ReactDOM from 'react-dom'; + +const Simulate = TestUtils.Simulate; + +describe('Uncontrolled Pagination', function() { + let pagination = null; + const container = document.createElement('div'); + document.body.appendChild(container); + + let current = 1; + function onChange(page) { + current = page; + } + + function shouldHighlightRight() { + const pagers = TestUtils.scryRenderedDOMComponentsWithTag(pagination, 'li'); + const current2 = pagination.state.current; + pagers.forEach(function(pager, index) { + // page starts from 1 + if (index === current2) { + expect(pager.className).to.contain('rc-pagination-item-active'); + } else { + expect(pager.className).to.not.contain('rc-pagination-item-active'); + } + }); + } + + beforeEach(function(done) { + ReactDOM.render(, container, function() { + pagination = this; + done(); + }); + }); + + afterEach(function() { + ReactDOM.unmountComponentAtNode(container); + }); + + it('default current page is 1', function() { + const current2 = pagination.state.current; + expect(current2).to.be(1); + }); + + it('prev-button should be disabled', function() { + const prevButton = TestUtils.findRenderedDOMComponentWithClass( + pagination, + 'rc-pagination-prev' + ); + expect(TestUtils.isDOMComponent(prevButton)).to.be(true); + expect(prevButton.className).to.contain('rc-pagination-disabled'); + }); + + it('should hightlight current page and not highlight other page', shouldHighlightRight); + + it('should calc page right', function() { + const pagers = TestUtils.scryRenderedDOMComponentsWithTag(pagination, 'li'); + const knownPageCount = 3; + const buttonLength = 2; + expect(pagers.length).to.be(knownPageCount + buttonLength); + }); + + it('next button should not be disabled', function() { + const nextButton = TestUtils.findRenderedDOMComponentWithClass( + pagination, + 'rc-pagination-next' + ); + + expect(TestUtils.isDOMComponent(nextButton)).to.be(true); + expect(nextButton.className).to.not.contain('rc-pagination-disabled'); + }); + + it('should response mouse click right', function(done) { + const pagers = TestUtils.scryRenderedDOMComponentsWithClass(pagination, 'rc-pagination-item'); + expect(pagers.length).to.be(3); + const page2 = pagers[1]; + expect(TestUtils.isDOMComponent(page2)).to.be(true); + expect(page2.className).to.contain('rc-pagination-item-2'); + + Simulate.click(page2); + setTimeout(function() { + expect(pagination.state.current).to.be(2); + expect(current).to.be(2); + shouldHighlightRight(); + done(); + }, 10); + }); + + it('should response next page', function(done) { + const nextButton = TestUtils.findRenderedDOMComponentWithClass( + pagination, + 'rc-pagination-next' + ); + expect(TestUtils.isDOMComponent(nextButton)).to.be(true); + Simulate.click(nextButton); + setTimeout(function() { + expect(pagination.state.current).to.be(2); + expect(current).to.be(2); + done(); + }, 10); + }); +}); + +describe('Controlled Pagination', function() { + let pagination = null; + const container = document.createElement('div'); + document.body.appendChild(container); + + let current = 2; + function onChange(page) { + current = page; + } + + beforeEach(function(done) { + ReactDOM.render(, container, function() { + pagination = this; + done(); + }); + }); + + afterEach(function() { + ReactDOM.unmountComponentAtNode(container); + }); + + it('current should equal defaultCurrent', function() { + expect(pagination.state.current).to.be(2); + }); + + it('should not response mouse click', function(done) { + const nextButton = TestUtils.findRenderedDOMComponentWithClass( + pagination, + 'rc-pagination-next' + ); + expect(TestUtils.isDOMComponent(nextButton)).to.be(true); + Simulate.click(nextButton); + setTimeout(function() { + expect(pagination.state.current).to.be(2); + expect(current).to.be(3); + done(); + }, 10); + }); +}); + +describe('Controlled Pagination', function() { + const TwoPagination = require('./helper/two-pagination'); + + let entry = null; + const container = document.createElement('div'); + document.body.appendChild(container); + + beforeEach(function(done) { + ReactDOM.render(, container, function() { + entry = this; + done(); + }); + }); + + afterEach(function() { + ReactDOM.unmountComponentAtNode(container); + }); + + it('should has initial pageSize 20', function() { + const p1 = TestUtils.scryRenderedComponentsWithType(entry, Pagination)[0]; + const p2 = TestUtils.scryRenderedComponentsWithType(entry, Pagination)[1]; + expect(p1.state.pageSize).to.be(20); + expect(p2.state.pageSize).to.be(20); + }); + it('should sync pageSize via state', function(done) { + const p1 = TestUtils.scryRenderedComponentsWithType(entry, Pagination)[0]; + const p2 = TestUtils.scryRenderedComponentsWithType(entry, Pagination)[1]; + const hook = TestUtils.scryRenderedDOMComponentsWithClass(entry, 'hook')[0]; + Simulate.click(hook); + setTimeout(function() { + expect(p1.state.pageSize).to.be(50); + expect(p2.state.pageSize).to.be(50); + done(); + }, 50); + }); +}); diff --git a/components/pagination/rc-pagination/tests/helper/two-pagination.jsx b/components/pagination/rc-pagination/tests/helper/two-pagination.jsx new file mode 100755 index 0000000..ee3f7b6 --- /dev/null +++ b/components/pagination/rc-pagination/tests/helper/two-pagination.jsx @@ -0,0 +1,34 @@ +require('rc-select/assets/index.css'); +const Pagination = require('rc-pagination'); +const React = require('react'); +import Select from 'rc-select'; + +const Hello = React.createClass({ + getInitialState() { + return { + pageSize: 20, + }; + }, + changeSize() { + this.setState({ + pageSize: 50, + }); + }, + render() { + return ( +
    + + + +
    + ); + }, +}); + +export default Hello; diff --git a/components/pagination/rc-pagination/tests/index.spec.js b/components/pagination/rc-pagination/tests/index.spec.js new file mode 100755 index 0000000..bad4465 --- /dev/null +++ b/components/pagination/rc-pagination/tests/index.spec.js @@ -0,0 +1,5 @@ +/** + * only require other specs here + */ + +import './Pagination.spec'; diff --git a/components/pagination/rc-pagination/tests/runner.html b/components/pagination/rc-pagination/tests/runner.html new file mode 100755 index 0000000..7bd069c --- /dev/null +++ b/components/pagination/rc-pagination/tests/runner.html @@ -0,0 +1 @@ +stub \ No newline at end of file diff --git a/components/pagination/style/index.scss b/components/pagination/style/index.scss index 6308fb7..654738d 100644 --- a/components/pagination/style/index.scss +++ b/components/pagination/style/index.scss @@ -37,6 +37,7 @@ $pagination-prefix-cls: jgui-pagination; background-color: #fff; margin-right: 8px; font-family: Arial; + user-select: none; a { text-decoration: none; @@ -131,7 +132,7 @@ $pagination-prefix-cls: jgui-pagination; a { color: #666; - + user-select: none; &:after { @include iconfont-size-under-12px(8px); display: block; diff --git a/components/style/core/iconfont.scss b/components/style/core/iconfont.scss index e1a3cec..8519f12 100644 --- a/components/style/core/iconfont.scss +++ b/components/style/core/iconfont.scss @@ -218,7 +218,8 @@ $iconfont-color-css-prefix: #{$iconfont-css-prefix}-color; .#{$iconfont-color-css-prefix} .path3:before { content: "\ea5d"; margin-left: -1em; - color: rgba(255, 255, 255, 0.7); + color: rgb(255, 255, 255); + @include opacity(0.7); } .#{$iconfont-color-css-prefix}-mobile { @@ -245,7 +246,9 @@ $iconfont-color-css-prefix: #{$iconfont-css-prefix}-color; .#{$iconfont-color-css-prefix}-java .path3:before { content: "\ea47"; margin-left: -1em; - color: rgba(255, 255, 255, 0.7); + color: rgb(255, 255, 255); + @include opacity(0.7); + } .#{$iconfont-color-css-prefix}-image .path1:before { content: "\ea48"; @@ -259,7 +262,8 @@ $iconfont-color-css-prefix: #{$iconfont-css-prefix}-color; .#{$iconfont-color-css-prefix}-image .path3:before { content: "\ea4a"; margin-left: -1em; - color: rgba(255, 255, 255, 0.7); + color: rgb(255, 255, 255); + @include opacity(0.7); } .#{$iconfont-color-css-prefix}-txt .path1:before { content: "\ea4b"; @@ -273,7 +277,8 @@ $iconfont-color-css-prefix: #{$iconfont-css-prefix}-color; .#{$iconfont-color-css-prefix}-txt .path3:before { content: "\ea4d"; margin-left: -1em; - color: rgba(255, 255, 255, 0.7); + color: rgb(255, 255, 255); + @include opacity(0.7); } .#{$iconfont-color-css-prefix}-music .path1:before { content: "\ea4e"; @@ -287,7 +292,8 @@ $iconfont-color-css-prefix: #{$iconfont-css-prefix}-color; .#{$iconfont-color-css-prefix}-music .path3:before { content: "\ea50"; margin-left: -1em; - color: rgba(255, 255, 255, 0.7); + color: rgb(255, 255, 255); + @include opacity(0.7); } .#{$iconfont-color-css-prefix}-pdf .path1:before { content: "\ea51"; @@ -301,7 +307,8 @@ $iconfont-color-css-prefix: #{$iconfont-css-prefix}-color; .#{$iconfont-color-css-prefix}-pdf .path3:before { content: "\ea53"; margin-left: -1em; - color: rgba(255, 255, 255, 0.7); + color: rgb(255, 255, 255); + @include opacity(0.7); } .#{$iconfont-color-css-prefix}-ppt .path1:before { content: "\ea54"; @@ -315,7 +322,8 @@ $iconfont-color-css-prefix: #{$iconfont-css-prefix}-color; .#{$iconfont-color-css-prefix}-ppt .path3:before { content: "\ea56"; margin-left: -1em; - color: rgba(255, 255, 255, 0.7); + color: rgb(255, 255, 255); + @include opacity(0.7); } .#{$iconfont-color-css-prefix}-rar .path1:before { content: "\ea57"; @@ -348,7 +356,8 @@ $iconfont-color-css-prefix: #{$iconfont-css-prefix}-color; .#{$iconfont-color-css-prefix}-file-unknown .path3:before { content: "\ea5d"; margin-left: -1em; - color: rgba(255, 255, 255, 0.7); + color: rgb(255, 255, 255); + @include opacity(0.7); } .#{$iconfont-color-css-prefix}-video .path1:before { content: "\ea5e"; @@ -362,7 +371,8 @@ $iconfont-color-css-prefix: #{$iconfont-css-prefix}-color; .#{$iconfont-color-css-prefix}-video .path3:before { content: "\ea60"; margin-left: -1em; - color: rgba(255, 255, 255, 0.7); + color: rgb(255, 255, 255); + @include opacity(0.7); } .#{$iconfont-color-css-prefix}-xls .path1:before { content: "\ea61"; @@ -376,7 +386,8 @@ $iconfont-color-css-prefix: #{$iconfont-css-prefix}-color; .#{$iconfont-color-css-prefix}-xls .path3:before { content: "\ea63"; margin-left: -1em; - color: rgba(255, 255, 255, 0.7); + color: rgb(255, 255, 255); + @include opacity(0.7); } .#{$iconfont-color-css-prefix}-zip .path1:before { content: "\ea64"; @@ -390,7 +401,8 @@ $iconfont-color-css-prefix: #{$iconfont-css-prefix}-color; .#{$iconfont-color-css-prefix}-zip .path3:before { content: "\ea66"; margin-left: -1em; - color: rgba(255, 255, 255, 0.7); + color: rgb(255, 255, 255); + @include opacity(0.7); } .#{$iconfont-color-css-prefix}-apk .path1:before { content: "\ea67"; @@ -404,32 +416,38 @@ $iconfont-color-css-prefix: #{$iconfont-css-prefix}-color; .#{$iconfont-color-css-prefix}-apk .path3:before { content: "\ea69"; margin-left: -1em; - color: rgba(255, 255, 255, 0.7); + color: rgb(255, 255, 255); + @include opacity(0.7); } .#{$iconfont-color-css-prefix}-apk .path4:before { content: "\ea6a"; margin-left: -1em; - color: rgba(255, 255, 255, 0.7); + color: rgb(255, 255, 255); + @include opacity(0.7); } .#{$iconfont-color-css-prefix}-apk .path5:before { content: "\ea6b"; margin-left: -1em; - color: rgba(255, 255, 255, 0.7); + color: rgb(255, 255, 255); + @include opacity(0.7); } .#{$iconfont-color-css-prefix}-apk .path6:before { content: "\ea6c"; margin-left: -1em; - color: rgba(255, 255, 255, 0.7); + color: rgb(255, 255, 255); + @include opacity(0.7); } .#{$iconfont-color-css-prefix}-apk .path7:before { content: "\ea6d"; margin-left: -1em; - color: rgba(255, 255, 255, 0.7); + color: rgb(255, 255, 255); + @include opacity(0.7); } .#{$iconfont-color-css-prefix}-apk .path8:before { content: "\ea6e"; margin-left: -1em; - color: rgba(255, 255, 255, 0.7); + color: rgb(255, 255, 255); + @include opacity(0.7); } .#{$iconfont-color-css-prefix}-cloud_b .path1:before { content: "\ea6f"; @@ -438,7 +456,8 @@ $iconfont-color-css-prefix: #{$iconfont-css-prefix}-color; .#{$iconfont-color-css-prefix}-cloud_b .path2:before { content: "\ea70"; margin-left: -1em; - color: rgba(255, 255, 255, 0.7); + color: rgb(255, 255, 255); + @include opacity(0.7); } .#{$iconfont-color-css-prefix}-cloud_b .path3:before { content: "\ea71"; @@ -448,7 +467,8 @@ $iconfont-color-css-prefix: #{$iconfont-css-prefix}-color; .#{$iconfont-color-css-prefix}-cloud_b .path4:before { content: "\ea72"; margin-left: -1em; - color: rgba(255, 255, 255, 0.7); + color: rgb(255, 255, 255); + @include opacity(0.7); } .#{$iconfont-color-css-prefix}-cloud .path1:before { content: "\ea73"; @@ -457,7 +477,8 @@ $iconfont-color-css-prefix: #{$iconfont-css-prefix}-color; .#{$iconfont-color-css-prefix}-cloud .path2:before { content: "\ea74"; margin-left: -0.9375em; - color: rgba(255, 255, 255, 0.7); + color: rgb(255, 255, 255); + @include opacity(0.7); } .#{$iconfont-color-css-prefix}-cloud .path3:before { content: "\ea75"; @@ -481,7 +502,8 @@ $iconfont-color-css-prefix: #{$iconfont-css-prefix}-color; .#{$iconfont-color-css-prefix}-damage .path3:before { content: "\ea79"; margin-left: -1em; - color: rgba(255, 255, 255, 0.7); + color: rgb(255, 255, 255); + @include opacity(0.7); } .#{$iconfont-color-css-prefix}-doc .path1:before { content: "\ea7a"; @@ -495,7 +517,8 @@ $iconfont-color-css-prefix: #{$iconfont-css-prefix}-color; .#{$iconfont-color-css-prefix}-doc .path3:before { content: "\ea7c"; margin-left: -1em; - color: rgba(255, 255, 255, 0.7); + color: rgb(255, 255, 255); + @include opacity(0.7); } .#{$iconfont-color-css-prefix}-folder .path1:before { content: "\ea7d"; @@ -504,7 +527,8 @@ $iconfont-color-css-prefix: #{$iconfont-css-prefix}-color; .#{$iconfont-color-css-prefix}-folder .path2:before { content: "\ea7e"; margin-left: -0.9375em; - color: rgba(255, 255, 255, 0.7); + color: rgb(255, 255, 255); + @include opacity(0.7); } .#{$iconfont-color-css-prefix}-folder .path3:before { content: "\ea7f"; @@ -523,7 +547,8 @@ $iconfont-color-css-prefix: #{$iconfont-css-prefix}-color; .#{$iconfont-color-css-prefix}-html .path3:before { content: "\ea82"; margin-left: -1em; - color: rgba(255, 255, 255, 0.7); + color: rgb(255, 255, 255); + @include opacity(0.7); } .#{$iconfont-color-css-prefix}-ic_add .path1:before { content: "\ea83"; diff --git a/components/style/mixins/_compatibility.scss b/components/style/mixins/_compatibility.scss index b31d34e..65b7668 100644 --- a/components/style/mixins/_compatibility.scss +++ b/components/style/mixins/_compatibility.scss @@ -24,7 +24,7 @@ // support rotate for all browsers @mixin cross-rotate($degrees) { - @include rotate($degrees); + @include ie-rotate($degrees); @include ie-rotate-via-degrees($degrees); } diff --git a/components/table/demo/basic.md b/components/table/demo/basic.md index a1d7023..60c87f7 100755 --- a/components/table/demo/basic.md +++ b/components/table/demo/basic.md @@ -7,6 +7,7 @@ title: 基本用法 ````jsx import { Table, Icon } from 'jgui'; +import zhTW from 'jgui/lib/locale-provider/zh_TW'; const columns = [{ title: '姓名', diff --git a/components/time-picker/locale/zh_CN.js b/components/time-picker/locale/zh_CN.js index b7ae75b..999198f 100755 --- a/components/time-picker/locale/zh_CN.js +++ b/components/time-picker/locale/zh_CN.js @@ -1,7 +1,8 @@ import TimepickerLocale from 'rc-time-picker/lib/locale/zh_CN'; + import assign from 'object-assign'; const locale = assign({}, { placeholder: '请选择时间', }, TimepickerLocale); -export default locale; +export default locale; \ No newline at end of file diff --git a/components/time-picker/locale/zh_TW.js b/components/time-picker/locale/zh_TW.js new file mode 100755 index 0000000..a8d825a --- /dev/null +++ b/components/time-picker/locale/zh_TW.js @@ -0,0 +1,87 @@ +export default { + "placeholder": "請選擇時間", + "clear": "清除", + "format": { + "eras": [ + "公元前", + "公元" + ], + "months": [ + "一月", + "二月", + "三月", + "四月", + "五月", + "六月", + "七月", + "八月", + "九月", + "十月", + "十一月", + "十二月" + ], + "shortMonths": [ + "一月", + "二月", + "三月", + "四月", + "五月", + "六月", + "七月", + "八月", + "九月", + "十月", + "十一月", + "十二月" + ], + "weekdays": [ + "星期天", + "星期一", + "星期二", + "星期三", + "星期四", + "星期五", + "星期六" + ], + "shortWeekdays": [ + "周日", + "周一", + "周二", + "周三", + "周四", + "周五", + "周六" + ], + "veryShortWeekdays": [ + "日", + "一", + "二", + "三", + "四", + "五", + "六" + ], + "ampms": [ + "上午", + "下午" + ], + "datePatterns": [ + "yyyy'年'M'月'd'日' EEEE", + "yyyy'年'M'月'd'日'", + "yyyy-M-d", + "yy-M-d" + ], + "timePatterns": [ + "ahh'時'mm'分'ss'秒' 'GMT'Z", + "ahh'時'mm'分'ss'秒'", + "H:mm:ss", + "ah:mm" + ], + "dateTimePattern": "{date} {time}" + }, + "calendar": { + "timezoneOffset": 480, + "firstDayOfWeek": 1, + "minimalDaysInFirstWeek": 1 + } +} \ No newline at end of file diff --git a/components/tree-select/style/index.scss b/components/tree-select/style/index.scss index 5f57af0..aa73a30 100644 --- a/components/tree-select/style/index.scss +++ b/components/tree-select/style/index.scss @@ -81,9 +81,13 @@ $select-tree-prefix-cls: jgui-select-tree; &.#{$select-tree-prefix-cls}-bottom_close, &.#{$select-tree-prefix-cls}-noline_close { @include jguiTreeSwitcherIcon(); - @include ie-rotate(3); + @include cross-rotate(3); &:after { - transform: rotate(270deg) scale(0.5); + -webkit-transform: rotate(-90deg); + -moz-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + -o-transform: rotate(-90deg); + transform: rotate(-90deg); } } } diff --git a/site/theme/template/utils.jsx b/site/theme/template/utils.jsx index 7116287..f5d092f 100755 --- a/site/theme/template/utils.jsx +++ b/site/theme/template/utils.jsx @@ -1,7 +1,7 @@ export function collectDocs(docs) { // locale copy from layout - const locale = (typeof localStorage !== 'undefined' && localStorage.getItem('locale') !== 'en-US') ? - 'zh-CN' : 'en-US'; + const locale = (typeof localStorage !== 'undefined' && localStorage.getItem('locale') !== 'zh_TW') ? + 'zh-CN' : 'zh_TW'; const docsList = Object.keys(docs) .map(key => docs[key]) .map((value) => { diff --git a/site/theme/zh-TW.js b/site/theme/zh-TW.js new file mode 100644 index 0000000..d7c8463 --- /dev/null +++ b/site/theme/zh-TW.js @@ -0,0 +1,15 @@ +import appLocaleData from 'react-intl/locale-data/zh'; + +module.exports = { + locale: 'zh-TW', + data: appLocaleData, + messages: { + 'app.header.menu.home': '首页', + 'app.header.menu.practice': '实践', + 'app.header.menu.pattern': '模式', + 'app.header.menu.react': '组件', + 'app.header.menu.spec': '语言', + 'app.header.menu.resource': '资源', + 'app.header.lang': '繁体', + }, +};