add Avatar

lovekonakona · Jun 9, 2017 · c30d1b1 · c30d1b1
1 parent bac9cee
commit c30d1b1
Show file tree

Hide file tree

Showing 13 changed files with 387 additions and 0 deletions.
diff --git a/components/__tests__/__snapshots__/index.test.js.snap b/components/__tests__/__snapshots__/index.test.js.snap
@@ -6,6 +6,7 @@ Array [
   "Anchor",
   "AutoComplete",
   "Alert",
+  "Avatar",
   "BackTop",
   "Badge",
   "Breadcrumb",

diff --git a/components/avatar/__tests__/__snapshots__/demo.test.js.snap b/components/avatar/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,146 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/avatar/demo/basic.md correctly 1`] = `
+<div>
+  <div
+    class="ant-row"
+  >
+    <div
+      class="ant-col-4"
+    >
+      <span
+        class="ant-avatar ant-avatar-lg ant-avatar-circle ant-avatar-icon"
+      >
+        <i
+          class="anticon anticon-user"
+        />
+      </span>
+    </div>
+    <div
+      class="ant-col-4"
+    >
+      <span
+        class="ant-avatar ant-avatar-circle ant-avatar-icon"
+      >
+        <i
+          class="anticon anticon-user"
+        />
+      </span>
+    </div>
+    <div
+      class="ant-col-4"
+    >
+      <span
+        class="ant-avatar ant-avatar-sm ant-avatar-circle ant-avatar-icon"
+      >
+        <i
+          class="anticon anticon-user"
+        />
+      </span>
+    </div>
+  </div>
+  <div
+    class="ant-row"
+  >
+    <div
+      class="ant-col-4"
+    >
+      <span
+        class="ant-avatar ant-avatar-lg ant-avatar-square ant-avatar-icon"
+      >
+        <i
+          class="anticon anticon-user"
+        />
+      </span>
+    </div>
+    <div
+      class="ant-col-4"
+    >
+      <span
+        class="ant-avatar ant-avatar-square ant-avatar-icon"
+      >
+        <i
+          class="anticon anticon-user"
+        />
+      </span>
+    </div>
+    <div
+      class="ant-col-4"
+    >
+      <span
+        class="ant-avatar ant-avatar-sm ant-avatar-square ant-avatar-icon"
+      >
+        <i
+          class="anticon anticon-user"
+        />
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders ./components/avatar/demo/type.md correctly 1`] = `
+<div>
+  <div
+    class="ant-row"
+  >
+    <div
+      class="ant-col-4"
+    >
+      <span
+        class="ant-avatar ant-avatar-circle ant-avatar-icon"
+      >
+        <i
+          class="anticon anticon-user"
+        />
+      </span>
+    </div>
+    <div
+      class="ant-col-4"
+    >
+      <span
+        class="ant-avatar ant-avatar-circle"
+      >
+        U
+      </span>
+    </div>
+    <div
+      class="ant-col-4"
+    >
+      <span
+        class="ant-avatar ant-avatar-circle ant-avatar-image"
+      >
+        <img
+          src="https://os.alipayobjects.com/rmsportal/mgesTPFxodmIwpi.png"
+        />
+      </span>
+    </div>
+  </div>
+  <div
+    class="ant-row"
+  >
+    <div
+      class="ant-col-4"
+    >
+      <span
+        class="ant-avatar ant-avatar-circle"
+        style="color:#f56a00;background-color:#fde3cf;"
+      >
+        U
+      </span>
+    </div>
+    <div
+      class="ant-col-4"
+    >
+      <span
+        class="ant-avatar ant-avatar-circle ant-avatar-icon"
+        style="background-color:#87d068;"
+      >
+        <i
+          class="anticon anticon-user"
+        />
+      </span>
+    </div>
+  </div>
+</div>
+`;
diff --git a/components/avatar/__tests__/demo.test.js b/components/avatar/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest';
+
+demoTest('avatar');
diff --git a/components/avatar/demo/basic.md b/components/avatar/demo/basic.md
@@ -0,0 +1,33 @@
+---
+order: 0
+title:
+  zh-CN: 基本
+  en-US: Basic
+---
+
+## zh-CN
+
+头像有三种尺寸，两种形状可选。
+
+## en-US
+
+Three sizes and two shapes are available.
+
+````jsx
+import { Avatar, Row, Col } from 'antd';
+
+ReactDOM.render(
+  <div>
+    <Row>
+      <Col span={4}><Avatar size="large" icon="user" /></Col>
+      <Col span={4}><Avatar icon="user" /></Col>
+      <Col span={4}><Avatar size="small" icon="user" /></Col>
+    </Row>
+    <Row>
+      <Col span={4}><Avatar shape="square" size="large" icon="user" /></Col>
+      <Col span={4}><Avatar shape="square" icon="user" /></Col>
+      <Col span={4}><Avatar shape="square" size="small" icon="user" /></Col>
+    </Row>
+  </div>
+, mountNode);
+````
diff --git a/components/avatar/demo/type.md b/components/avatar/demo/type.md
@@ -0,0 +1,32 @@
+---
+order: 1
+title:
+  zh-CN: 类型
+  en-US: Type
+---
+
+## zh-CN
+
+支持三种类型：图片、Icon 以及字符，其中 Icon 和字符型可以自定义图标颜色及背景色。
+
+## en-US
+
+Image, Icon and letter are supported, and the latter two kinds avatar can have custom colors and background colors.
+
+````jsx
+import { Avatar, Row, Col } from 'antd';
+
+ReactDOM.render(
+  <div>
+    <Row>
+      <Col span={4}><Avatar icon="user" /></Col>
+      <Col span={4}><Avatar>U</Avatar></Col>
+      <Col span={4}><Avatar src="https://os.alipayobjects.com/rmsportal/mgesTPFxodmIwpi.png" /></Col>
+    </Row>
+    <Row>
+      <Col span={4}><Avatar backgroundColor="#fde3cf" color="#f56a00">U</Avatar></Col>
+      <Col span={4}><Avatar backgroundColor="#87d068" icon="user" /></Col>
+    </Row>
+  </div>
+, mountNode);
+````
diff --git a/components/avatar/index.en-US.md b/components/avatar/index.en-US.md
@@ -0,0 +1,19 @@
+---
+category: Components
+type: Data Display
+title: Avatar
+---
+
+Avatars can be used to represent people or object, which supports image, antd-Icon, or letter. 
+
+## API
+
+| Property   | Description                                               | Type       | Default |
+|----------- |---------------------------------------------------------  | ---------- |-------|
+| type       | to set the shape of avatar | Enum{ 'circle', 'square' } | `circle` |
+| size   | to set the size of avatar | Enum{ 'large', 'small', 'default' } | `default` |
+| src  | the address of a image avatar | string | - |
+| icon    | the icon type of a icon avatar, see `Icon` Component | string | - |
+| color | to set the color of the icon or letter in avatar | string | - |
+| backgroundColor    | to set the background color of the icon or letter in avatar  | string | - |
+
diff --git a/components/avatar/index.tsx b/components/avatar/index.tsx
@@ -0,0 +1,73 @@
+import React from 'react';
+import Icon from '../icon';
+import classNames from 'classnames';
+
+export interface AvatarProps {
+  /** Shape of avatar, options:`circle`, `square` */
+  shape?: 'circle' | 'square';
+  /** Size of avatar, options:`large`, `small`, `default` */
+  size?: 'large' | 'small' | 'default';
+  /** Src of image avatar */
+  src?: string;
+  /** Type of the Icon to be used in avatar */
+  icon?: string;
+  /** The icon or letter's color */
+  color?: string;
+  /** The backgroundColor of the avatar. Does not apply to image avatars */
+  backgroundColor?: string;
+  style?: React.CSSProperties;
+  prefixCls?: string;
+  className?: string;
+  children?: any;
+}
+
+export default (props: AvatarProps) => {
+  const {
+    prefixCls = 'ant-avatar', shape = 'circle', size = 'default', src,
+    icon, color, backgroundColor, className, ...others,
+  } = props;
+
+  let sizeCls = '';
+  switch (size) {
+    case 'large':
+      sizeCls = 'lg';
+      break;
+    case 'small':
+      sizeCls = 'sm';
+      break;
+    default:
+      sizeCls = '';
+      break;
+  }
+
+  const classString = classNames(prefixCls, className, {
+    [`${prefixCls}-${sizeCls}`]: sizeCls,
+    [`${prefixCls}-${shape}`]: shape,
+    [`${prefixCls}-image`]: src,
+    [`${prefixCls}-icon`]: icon,
+  });
+
+  let children = props.children;
+  if (src) {
+    children = <img src={src} />;
+  } else if (icon) {
+    children = <Icon type={icon} />;
+  }
+  interface ColorStyle {
+    color?: string;
+    backgroundColor?: string;
+  }
+  const style: ColorStyle = {}; 
+  if (color) {
+    style.color = color;
+  }
+  if (backgroundColor) {
+    style.backgroundColor = backgroundColor;
+  }
+  return (
+    <span {...others} style={style} className={classString}>
+      {children}
+    </span>
+  );
+};
+
diff --git a/components/avatar/index.zh-CN.md b/components/avatar/index.zh-CN.md
@@ -0,0 +1,19 @@
+---
+category: Components
+subtitle: 头像
+type: Data Display
+title: Avatar
+---
+
+用来代表用户或事物，支持图片、Icon(antd-Icon)或字符展示。
+
+## API
+
+| 参数        | 说明                                                      | 类型        | 默认值 |
+|----------- |--------------------------------------------------------- | ----------  | ------- |
+| shape       | 指定头像的形状                          | Enum{ 'circle', 'square' }     | `circle`  |
+| size       | 设置头像的大小                           | Enum{ 'large', 'small', 'default' }       | `default` |
+| src  | 图片类头像的资源地址                                     | string   | -    |
+| icon    | 设置头像的图标类型，参考 `Icon` 组件                                       | string   | -    |
+| color | 设置头像颜色，仅支持 Icon、字符类头像                            | string   | -    |
+| backgroundColor     | 设置头像背景色，仅支持 Icon、字符类头像            | string   | -    |
diff --git a/components/avatar/style/index.less b/components/avatar/style/index.less
@@ -0,0 +1,45 @@
+@import "../../style/themes/default";
+
+@avatar-prefix-cls: ~"@{ant-prefix}-avatar";
+
+.@{avatar-prefix-cls} {
+  display: inline-block;
+  text-align: center;
+  background: @avatar-bg;
+  color: @avatar-color;
+  overflow: hidden;
+
+  .avatar-size(@avatar-size-base, @avatar-font-size-base);
+
+  &-lg {
+    .avatar-size(@avatar-size-lg, @avatar-font-size-lg);
+  }
+
+  &-sm {
+    .avatar-size(@avatar-size-sm, @avatar-font-size-sm);
+  }
+
+  &-square {
+    border-radius: @avatar-border-radius;
+  }
+
+  & > img {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.avatar-size(@size, @font-size) {
+  width: @size;
+  height: @size;
+  line-height: @size;
+  border-radius: @size / 2;
+
+  & > * {
+    line-height: @size;
+  }
+
+  &.@{avatar-prefix-cls}-icon {
+    font-size: @font-size;
+  }
+}
diff --git a/components/avatar/style/index.tsx b/components/avatar/style/index.tsx
@@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';
diff --git a/components/index.tsx b/components/index.tsx
@@ -19,6 +19,8 @@ export { default as AutoComplete } from './auto-complete';
 
 export { default as Alert } from './alert';
 
+export { default as Avatar } from './avatar';
+
 export { default as BackTop } from './back-top';
 
 export { default as Badge } from './badge';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import demoTest from '../../../tests/shared/demoTest';

		demoTest('avatar');
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		import '../../style/index.less';
		import './index.less';