Merge pull request #31 from binjie09/master

update 0.5.0

.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
 

.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

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`

CHANGELOG.zh-CN.md

@@ -15,6 +15,14 @@ timeline: true
 
 ---
 
+## 0.5.0
+
+`2018-01-10`
+
+- 更改图标字体文件的来源，更改为从npm库中获取并打包到本地。
+- 💄 `IconSelect`:  优化了图标选择器，图标更大，且只保留常用图标.
+- 💄 `table`: 优化table翻页时自动回到第一条元素
+
 ## 0.4.5
 
 - 🌟 `Icon`: 增加新的图标。

components/form/__tests__/__snapshots__/demo.test.js.snap

@@ -1875,6 +1875,13 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
                     type="text"
                     value=""
                   />
+                  <span
+                    class="ant-input-icon"
+                  >
+                    <i
+                      class="icon icon-visibility_off ant-input-icon-copy"
+                    />
+                  </span>
                 </div>
               </div>
             </div>
@@ -1930,6 +1937,13 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
                     type="text"
                     value=""
                   />
+                  <span
+                    class="ant-input-icon"
+                  >
+                    <i
+                      class="icon icon-visibility_off ant-input-icon-copy"
+                    />
+                  </span>
                 </div>
               </div>
             </div>

components/form/demo/register.md

@@ -162,7 +162,7 @@ class RegistrationForm extends React.Component {
               validator: this.validateToNextPassword,
             }],
           })(
-            <Input label="password" type="password" />
+            <Input showPasswordEye label="password" type="password" />
           )}
         </FormItem>
         <FormItem
@@ -176,7 +176,7 @@ class RegistrationForm extends React.Component {
               validator: this.compareToFirstPassword,
             }],
           })(
-            <Input label="password" type="password" onBlur={this.handleConfirmBlur} />
+            <Input showPasswordEye label="password" type="password" onBlur={this.handleConfirmBlur} />
           )}
         </FormItem>
         <FormItem

components/icon-select/IconSelect.tsx

@@ -46,9 +46,9 @@ export default class IconSelect extends React.Component<IconSelectProps, IconSel
   initIcon(current: number = 1, pageSize: number = 20, filterValue: string = '') {
     const minIndex = (current - 1) * pageSize;
     const maxIndex = current * pageSize;
-    let items = icons.default;
+    let items = icons.favorite;
     if (filterValue) {
-      items = icons.default.filter((name) => {
+      items = icons.favorite.filter((name) => {
         return name.toLowerCase().indexOf(filterValue.toLowerCase()) !== -1;
       });
     }
@@ -71,7 +71,8 @@ export default class IconSelect extends React.Component<IconSelectProps, IconSel
       return (
         <Option key={icon} value={icon}>
           <Tooltip placement="bottomLeft" title={icon}>
-            <Icon type={icon} /> {icon}
+            <Icon type={icon} />
+            <span className="text">{icon}</span>
           </Tooltip>
         </Option>
       );
@@ -107,14 +108,17 @@ export default class IconSelect extends React.Component<IconSelectProps, IconSel
   renderFooter() {
     const { total, pageSize, current } = this.state;
     return (
-      <Pagination
-        total={total}
-        onChange={this.handlePageChange}
-        pageSizeOptions={['20', '40', '80']}
-        pageSize={pageSize}
-        onShowSizeChange={this.handlePageChange}
-        current={current}
-      />
+      <React.Fragment>
+        <Pagination
+          total={total}
+          onChange={this.handlePageChange}
+          pageSizeOptions={['20', '40', '80']}
+          pageSize={pageSize}
+          onShowSizeChange={this.handlePageChange}
+          current={current}
+        />
+      </React.Fragment>
+
     );
   }
   render() {

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;

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',

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 {

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;

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<any>) {
   e.stopPropagation();
   if (e.nativeEvent.stopImmediatePropagation) {
@@ -83,6 +98,7 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
     filterBarPlaceholder: PropTypes.string,
     onFilterSelectChange: PropTypes.func,
     noFilter: PropTypes.bool,
+    autoScroll: PropTypes.bool,
   };
 
   static defaultProps = {
@@ -101,6 +117,7 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
     showHeader: true,
     filterBar: true,
     noFilter: false,
+    autoScroll: true,
   };
 
   CheckboxPropsCache: {
@@ -109,6 +126,7 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
   store: Store;
   columns: ColumnProps<T>[];
   components: TableComponents;
+  private refTable: HTMLDivElement | null;
 
   constructor(props: TableProps<T>) {
     super(props);
@@ -614,6 +632,22 @@ export default class Table<T> extends React.Component<TableProps<T>, 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<T> extends React.Component<TableProps<T>, TableState<
       <div
         className={classNames(`${prefixCls}-wrapper`, className)}
         style={style}
+        ref={ref => { this.refTable = ref; }}
       >
         <Spin
           {...loading}

components/table/index.zh-CN.md

@@ -53,6 +53,7 @@ const columns = [{
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
+| autoScroll | 是否在翻页时自动滚动到表格可视区域，并滚动到第一条 | boolean | true |
 | bordered | 是否展示外边框和列边框 | boolean | false |
 | columns | 表格列的配置描述，具体项见下表 | [ColumnProps](https://git.io/vMMXC)\[] | - |
 | components | 覆盖默认的 table 元素 | object | - |

components/table/interface.tsx

@@ -89,6 +89,7 @@ export interface TableProps<T> {
   prefixCls?: string;
   dropdownPrefixCls?: string;
   noFilter?: boolean;
+  autoScroll?: boolean;
   rowSelection?: TableRowSelection<T>;
   pagination?: TablePaginationConfig | false;
   size?: 'default' | 'middle' | 'small';

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",

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');

site/bisheng.config.js

@@ -24,6 +24,7 @@ function alertBabelConfig(rules) {
 
 module.exports = {
   port: 8001,
+  root: '/choerodon-ui/',
   source: {
     components: './components',
     docs: './docs',

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;

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/');