diff --git a/.circleci/config.yml b/.circleci/config.yml index c375d96056..d0634ea6a2 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -2,7 +2,7 @@ version: 2 jobs: dev_build: docker: - - image: circleci/node:8.10 + - image: circleci/node:9.10 working_directory: ~/repo diff --git a/.gitignore b/.gitignore index f51301a7e2..699ca4b41c 100644 --- a/.gitignore +++ b/.gitignore @@ -35,6 +35,7 @@ yarn.lock package-lock.json components/**/*.js components/**/*.jsx +components/style/core/fonts !components/rc-components/**/*.jsx !components/rc-components/**/*.js components/rc-components/dialog/*.jsx diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index 8eb873aa14..7ee6a5c3d7 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -15,6 +15,14 @@ timeline: true --- +## 0.5.0 + +`2018-01-10` + +- Change the source of the icon font file to change it from the npm library and package it locally. +- 💄 `IconSelect`: Optimize IconSelect, the icon is larger, and only the common icons are retained. +- 💄 `table`: Optimize the table to automatically return to the first element when turning pages. + ## 0.4.5 `2018-12-11` diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index 47425ab74b..1f0d0854eb 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -15,6 +15,14 @@ timeline: true --- +## 0.5.0 + +`2018-01-10` + +- 更改图标字体文件的来源，更改为从npm库中获取并打包到本地。 +- 💄 `IconSelect`: 优化了图标选择器，图标更大，且只保留常用图标. +- 💄 `table`: 优化table翻页时自动回到第一条元素 + ## 0.4.5 - 🌟 `Icon`: 增加新的图标。 diff --git a/components/form/__tests__/__snapshots__/demo.test.js.snap b/components/form/__tests__/__snapshots__/demo.test.js.snap index 29118f539d..d468f48639 100644 --- a/components/form/__tests__/__snapshots__/demo.test.js.snap +++ b/components/form/__tests__/__snapshots__/demo.test.js.snap @@ -1875,6 +1875,13 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = ` type="text" value="" /> + + + @@ -1930,6 +1937,13 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = ` type="text" value="" /> + + + diff --git a/components/form/demo/register.md b/components/form/demo/register.md index 57a4b50b6d..c4ae87243c 100644 --- a/components/form/demo/register.md +++ b/components/form/demo/register.md @@ -162,7 +162,7 @@ class RegistrationForm extends React.Component { validator: this.validateToNextPassword, }], })( - + )} + )} { + items = icons.favorite.filter((name) => { return name.toLowerCase().indexOf(filterValue.toLowerCase()) !== -1; }); } @@ -71,7 +71,8 @@ export default class IconSelect extends React.Component - {icon} + + {icon} ); @@ -107,14 +108,17 @@ export default class IconSelect extends React.Component + + + + ); } render() { diff --git a/components/icon-select/style/index.less b/components/icon-select/style/index.less index d776322530..d5530f61d1 100644 --- a/components/icon-select/style/index.less +++ b/components/icon-select/style/index.less @@ -10,6 +10,27 @@ } &-dropdown { min-width: 512px; + .@{select-prefix-cls}-dropdown-menu { + max-height: 300px; + i { + font-size: 30px; + width: 100%; + text-align: center; + margin-top: 5px; + display: inline-block; + } + .text { + text-align: center; + text-overflow: ellipsis; + line-height: 18px; + overflow: hidden; + margin-bottom: 5px; + display: block; + } + li { + padding: 0 5px !important; + } + } .@{select-prefix-cls}-dropdown-filter + div > .@{select-prefix-cls}-dropdown-menu li { width: 85px; line-height: 28px; diff --git a/components/icon/icons.tsx b/components/icon/icons.tsx index afbb8c359d..c864631e53 100644 --- a/components/icon/icons.tsx +++ b/components/icon/icons.tsx @@ -1,5 +1,9 @@ const icons = { + /* tslint:disable-next-line */ + favorite: ['routeroutline', 'role_tag', 'hdr_strong', 'bar_chart', 'reply', 'class', 'manage_project', 'transfer_within_a_station', 'room_service', 'publish2', 'laptop_mac', 'developer_board', 'CI', 'content_copy', 'book', 'wrench', 'view_day', 'date_range', 'extension', 'filter_vintage', 'hdr_weak', 'dashboard', 'Operation-monitoring', 'application_model', 'folder_shared', 'delete', 'develop_console', 'agile', 'merge_request', 'task_schedule', 'link', 'settings', 'baseline-drag_indicator', 'apps', 'account_box', 'test_planning', 'donut_small', 'agile_fault', 'person', 'view_list', 'directions_run', 'instance_outline', 'password', 'inmail_template', 'error', 'vpn_key', 'classname', 'assignment_ind', 'contact_mail', 'work_log', 'speaker_notes', 'format_list_numbered', 'shuffle', 'API', 'linear_scale', 'device_hub', 'saga_define', 'devops_chart', 'table_chart', 'settings_input_composite', 'event_available', 'flip_to_back', 'kubernetes', 'notifications', 'hearing', 'authority', 'cluster', 'public', 'devops', 'account_balance', 'mail_set', 'person_add', 'record_test', 'folder', 'usermap', 'assignment_late', 'micro', 'secret', 'appmarket', 'brightness_low', 'IAM', 'test', 'message', 'project', 'local_offer', 'domain', 'router', 'settings_applications', 'style', 'polymer', 'manage_organization', 'microservice', 'description', 'jsfiddle', 'manage_person', 'transform', 'subject', 'compare_arrows', 'branch', 'root', 'auto_test', 'strikethrough_s', 'center', 'widgets', 'volume_up', 'link2', 'Development-monitoring', 'whatshot', 'message_notification', 'insert_drive_file', 'accessibility', 'youtube_searched_for', 'test_execution', 'baseline-list_alt', 'cloud_upload', 'APItest', 'build', 'assignment', 'language', 'home', 'favorite', 'filter_drama', 'flare', 'folder_special', 'tag_faces', 'lightbulb_outline', 'loyalty', 'star_border'], + default: [ + 'token', 'change_size', 'add_crt', 'add_branch', 'line', 'secret', 'recover', 'table', 'test_execution', 'test_progress', 'test_record', 'execution_schedule', 'cluster', 'kubernetes_cluster', 'disconnect', 'running', 'notification_setting', 'authority', 'develop_console', 'frame', 'record_test', diff --git a/components/style/core/iconfont.less b/components/style/core/iconfont.less index 1f55e5bbda..afab0d0442 100644 --- a/components/style/core/iconfont.less +++ b/components/style/core/iconfont.less @@ -24,6 +24,15 @@ } } +// 01.09 + +.@{iconfont-css-prefix}-token:before { + content: "\e9d2"; +} +.@{iconfont-css-prefix}-change_size:before { + content: "\e9d3"; +} + // 12.11 .@{iconfont-css-prefix}-add_crt:before { diff --git a/components/style/themes/default.less b/components/style/themes/default.less index 0e10f51349..a44ab41932 100644 --- a/components/style/themes/default.less +++ b/components/style/themes/default.less @@ -68,7 +68,7 @@ @item-focus-bg: rgba(0, 0, 0, 0.04); // ICONFONT @iconfont-css-prefix: icon; -@icon-url: "https://file.choerodon.com.cn/choerodon-ui/fonts/icomoon"; +@icon-url: "fonts/icomoon"; // LINK @link-color: @primary-color; diff --git a/components/table/Table.tsx b/components/table/Table.tsx index 2952501853..cd6ac757e9 100644 --- a/components/table/Table.tsx +++ b/components/table/Table.tsx @@ -38,6 +38,21 @@ import RcTable from '../rc-components/table'; function noop() { } +function findBodyDom(dom: Element | HTMLDivElement): any { + if (dom.childElementCount > 0) { + for (let i = 0; i < dom.childElementCount; i += 1) { + if (/ant-table-body/.test(dom.children[i].className)) { + return dom.children[i]; + } else if (dom.childElementCount > 0) { + if (findBodyDom(dom.children[i]) !== null) { + return findBodyDom(dom.children[i]); + } + } + } + } + return null; +} + function stopPropagation(e: React.SyntheticEvent) { e.stopPropagation(); if (e.nativeEvent.stopImmediatePropagation) { @@ -83,6 +98,7 @@ export default class Table extends React.Component, TableState< filterBarPlaceholder: PropTypes.string, onFilterSelectChange: PropTypes.func, noFilter: PropTypes.bool, + autoScroll: PropTypes.bool, }; static defaultProps = { @@ -101,6 +117,7 @@ export default class Table extends React.Component, TableState< showHeader: true, filterBar: true, noFilter: false, + autoScroll: true, }; CheckboxPropsCache: { @@ -109,6 +126,7 @@ export default class Table extends React.Component, TableState< store: Store; columns: ColumnProps[]; components: TableComponents; + private refTable: HTMLDivElement | null; constructor(props: TableProps) { super(props); @@ -614,6 +632,22 @@ export default class Table extends React.Component, TableState< handlePageChange = (current: number, ...otherArguments: any[]) => { const props = this.props; let pagination = { ...this.state.pagination }; + if (props.autoScroll) { + setTimeout(() => { + if (this.refTable) { + // @ts-ignore + this.refTable.scrollIntoView({ + block: 'start', + }); + } + }, 10); + if (this.refTable) { + const dom = findBodyDom(this.refTable); + if (dom !== null && dom.scroll) { + dom.scrollTop = 0; + } + } + } if (current) { pagination.current = current; } else { @@ -1118,6 +1152,7 @@ export default class Table extends React.Component, TableState<
{ this.refTable = ref; }} > { prefixCls?: string; dropdownPrefixCls?: string; noFilter?: boolean; + autoScroll?: boolean; rowSelection?: TableRowSelection; pagination?: TablePaginationConfig | false; size?: 'default' | 'middle' | 'small'; diff --git a/package.json b/package.json index a452e256ba..9dc431a21d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "choerodon-ui", - "version": "0.4.5", + "version": "0.5.0", "title": "Choerodon UI", "description": "An enterprise-class UI design language and React-based implementation", "homepage": "", @@ -44,6 +44,7 @@ "async": "~0.9.0", "async-validator": "1.x", "babel-runtime": "6.x", + "choerodon-ui-font": "~0.0.1", "classnames": "~2.2.0", "component-classes": "1.x", "core-js": "^2.5.1", @@ -64,9 +65,9 @@ "object-assign": "^4.0.1", "omit.js": "^1.0.0", "prop-types": "^15.5.7", + "rc-editor-core": "~0.8.3", "react-lazy-load": "^3.0.12", "react-slick": "~0.22.3", - "rc-editor-core": "~0.8.3", "rmc-feedback": "^1.0.0", "shallow-equal": "^1.0.0", "shallowequal": "^1.0.1", @@ -179,9 +180,9 @@ "sort-api": "node ./scripts/sort-api-table.js", "dist": "antd-tools run dist", "compile-rc": "node ./scripts/compile-rc.js", - "compile": "antd-tools run compile && npm run compile-rc", + "compile": "antd-tools run compile && npm run compile-rc && node ./scripts/copyFont.js", "tsc": "tsc", - "start": "rimraf _site && node ./scripts/generateColorLess.js && cross-env NODE_ENV=development BROWSER=chrome bisheng start -c ./site/bisheng.config.js", + "start": "node ./scripts/copyFont.js && rimraf _site && node ./scripts/generateColorLess.js && cross-env NODE_ENV=development BROWSER=chrome bisheng start -c ./site/bisheng.config.js", "start:preact": "node ./scripts/generateColorLess.js && cross-env NODE_ENV=development REACT_ENV=preact bisheng start -c ./site/bisheng.config.js", "site": "cross-env NODE_ENV=production bisheng build --ssr -c ./site/bisheng.config.js && node ./scripts/generateColorLess.js", "predeploy": "antd-tools run clean && npm run site && npm run autodev", diff --git a/scripts/copyFont.js b/scripts/copyFont.js new file mode 100644 index 0000000000..f446a4cf06 --- /dev/null +++ b/scripts/copyFont.js @@ -0,0 +1,10 @@ +const gulp = require('gulp'); + +function copyFont(dir) { + gulp.src('node_modules/choerodon-ui-font/fonts/*') + .pipe(gulp.dest(dir)); +} + +copyFont('lib/style/core/fonts'); +copyFont('es/style/core/fonts'); +copyFont('components/style/core/fonts'); diff --git a/site/bisheng.config.js b/site/bisheng.config.js index 63f7217a2f..029a462f02 100644 --- a/site/bisheng.config.js +++ b/site/bisheng.config.js @@ -24,6 +24,7 @@ function alertBabelConfig(rules) { module.exports = { port: 8001, + root: '/choerodon-ui/', source: { components: './components', docs: './docs', diff --git a/site/theme/static/icons.less b/site/theme/static/icons.less index 905fee80fb..4893ff0a6b 100644 --- a/site/theme/static/icons.less +++ b/site/theme/static/icons.less @@ -24,6 +24,10 @@ ul.anticons-list { will-change: transform; } + i { + font-size: 36px; + } + .anticon-class { display: block; text-align: center; diff --git a/site/theme/template/utils.jsx b/site/theme/template/utils.jsx index 782e27ac06..a15bde9d69 100644 --- a/site/theme/template/utils.jsx +++ b/site/theme/template/utils.jsx @@ -50,10 +50,10 @@ export function isZhCN(pathname) { export function getLocalizedPathname(path, zhCN) { const pathname = path.startsWith('/') ? path : `/${path}`; if (!zhCN) { // to enUS - return /\/?index-cn/.test(pathname) ? '/' : pathname.replace('-cn', ''); + return /\/?index-cn/.test(pathname) ? '/choerodon-ui/' : pathname.replace('-cn', ''); } if (pathname === '/') { - return '/index-cn'; + return '/choerodon-ui/index-cn'; } if (pathname.endsWith('/')) { return pathname.replace(/\/$/, '-cn/');