Merge 463da17 into 45f14ce

components/avatar/__tests__/__snapshots__/index.test.js.snap

@@ -0,0 +1,119 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Avatar/> should render a <Avatar/> components 1`] = `
+<div>
+  <span
+    class="cuke-avatar cuke-avatar-circle cuke-avatar-size-default cuke-avatar-icon"
+  >
+    <svg
+      fill="none"
+      height="1em"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      viewBox="0 0 24 24"
+      width="1em"
+    >
+      <path
+        d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"
+      />
+      <circle
+        cx="12"
+        cy="7"
+        r="4"
+      />
+    </svg>
+  </span>
+  <span
+    class="cuke-avatar cuke-avatar-circle cuke-avatar-size-default"
+  >
+    <span
+      class="cuke-avatar-text"
+    >
+      黄瓜ui
+    </span>
+  </span>
+  <span
+    class="cuke-avatar cuke-avatar-circle cuke-avatar-size-default cuke-avatar-image"
+  >
+    <img
+      alt="cuke-avatar"
+      src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png"
+    />
+  </span>
+  <span
+    class="cuke-avatar cuke-avatar-circle cuke-avatar-size-default cuke-avatar-icon"
+  >
+    <svg
+      fill="none"
+      height="1em"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      viewBox="0 0 24 24"
+      width="1em"
+    >
+      <path
+        d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"
+      />
+      <circle
+        cx="12"
+        cy="7"
+        r="4"
+      />
+    </svg>
+  </span>
+  <span
+    class="cuke-avatar cuke-avatar-square cuke-avatar-size-default cuke-avatar-icon"
+  >
+    <svg
+      fill="none"
+      height="1em"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      viewBox="0 0 24 24"
+      width="1em"
+    >
+      <path
+        d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"
+      />
+      <circle
+        cx="12"
+        cy="7"
+        r="4"
+      />
+    </svg>
+  </span>
+  <span
+    class="cuke-avatar cuke-avatar-circle cuke-avatar-size-large"
+  >
+    <span
+      class="cuke-avatar-text"
+    >
+      大
+    </span>
+  </span>
+  <span
+    class="cuke-avatar cuke-avatar-circle cuke-avatar-size-default"
+  >
+    <span
+      class="cuke-avatar-text"
+    >
+      中
+    </span>
+  </span>
+  <span
+    class="cuke-avatar cuke-avatar-circle cuke-avatar-size-small"
+  >
+    <span
+      class="cuke-avatar-text"
+    >
+      小
+    </span>
+  </span>
+</div>
+`;

components/avatar/__tests__/index.test.js

@@ -0,0 +1,66 @@
+import React from "react";
+import assert from "power-assert";
+import { render, shallow } from "enzyme";
+import toJson from "enzyme-to-json";
+import Avatar from "../index";
+import { UserIcon } from "../../icon";
+
+describe("<Avatar/>", () => {
+  it("should render a <Avatar/> components", () => {
+    const wrapper = render(
+      <div>
+        <Avatar icon={<UserIcon />} />
+        <Avatar text="黄瓜ui" />
+        <Avatar src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png" />
+        <Avatar icon={<UserIcon />} />
+        <Avatar icon={<UserIcon />} shape="square" />
+        <Avatar text="大" size="large" />
+        <Avatar text="中" />
+        <Avatar text="小" size="small" />
+      </div>
+    );
+    expect(toJson(wrapper)).toMatchSnapshot();
+  });
+
+  it("should find cuke-avatar classnames", () => {
+    const wrapper = render(
+      <div>
+        <Avatar icon={<UserIcon />} />
+        <Avatar text="黄瓜ui" />
+        <Avatar text="黄瓜ui" shape="square" />
+        <Avatar src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png" />
+        <Avatar text="黄瓜ui" size="small" />
+        <Avatar text="黄瓜ui" size="large" />
+      </div>
+    );
+    assert(wrapper.find(".cuke-avatar").length >= 1);
+    assert(wrapper.find(".cuke-avatar-circle").length >= 1);
+    assert(wrapper.find(".cuke-avatar-square").length === 1);
+    assert(wrapper.find(".cuke-avatar-icon").length === 1);
+    assert(wrapper.find(".cuke-avatar-text").length >= 1);
+    assert(wrapper.find(".cuke-avatar-image").length === 1);
+    assert(wrapper.find(".cuke-avatar-size-small").length === 1);
+    assert(wrapper.find(".cuke-avatar-size-large").length === 1);
+  });
+
+  it("should render a icon", () => {
+    const wrapper = shallow(<Avatar icon={<UserIcon />} />);
+    assert(wrapper.find(".cuke-avatar-icon").length === 1);
+    assert(wrapper.find(UserIcon).length === 1);
+  });
+
+  it("should render a image", () => {
+    const src =
+      "https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png";
+    const wrapper = shallow(<Avatar src={src} alt="user" />);
+    assert(wrapper.find(".cuke-avatar-image").length === 1);
+    assert(wrapper.find("img").length === 1);
+  });
+
+  it("should render a text", () => {
+    const wrapper = shallow(<Avatar text="user" />);
+    assert(wrapper.find(".cuke-avatar-text").length === 1);
+    assert(wrapper.find("span").length >= 1);
+    expect(wrapper.text()).toEqual("user");
+  });
+});

components/avatar/index.js

@@ -0,0 +1,122 @@
+import React, { PureComponent } from "react";
+import * as ReactDOM from "react-dom";
+import PropTypes from "prop-types";
+import cls from "classnames";
+import "./styles.less";
+
+const sizes = {
+  small: "small",
+  default: "default",
+  large: "large"
+};
+
+const shape = {
+  circle: "circle",
+  square: "square"
+};
+
+export default class Avatar extends PureComponent {
+  static defaultProps = {
+    shape: shape.circle,
+    prefixCls: "cuke-avatar",
+    className: "",
+    icon: undefined,
+    children: undefined,
+    src: undefined,
+    alt: "cuke-avatar",
+    size: sizes.default,
+    text: undefined,
+    style: {}
+  };
+  static propTypes = {
+    shape: PropTypes.oneOf(Object.values(shape)),
+    prefixCls: PropTypes.string,
+    className: PropTypes.string,
+    icon: PropTypes.node,
+    children: PropTypes.node,
+    src: PropTypes.string,
+    alt: PropTypes.string,
+    size: PropTypes.oneOf(Object.values(sizes)),
+    text: PropTypes.string,
+    style: PropTypes.shape({})
+  };
+
+  state = {
+    scale: 1
+  };
+
+  componentDidMount() {
+    this.setScale();
+  }
+
+  setScale = () => {
+    const childrenNode = this.avatarChildren;
+    if (childrenNode) {
+      const childrenWidth = childrenNode.offsetWidth;
+      const avatarNode = ReactDOM.findDOMNode(this);
+      const avatarWidth = avatarNode.getBoundingClientRect().width;
+      if (avatarWidth - 8 < childrenWidth) {
+        this.setState({
+          scale: (avatarWidth - 8) / childrenWidth
+        });
+      } else {
+        this.setState({
+          scale: 1
+        });
+      }
+    }
+  };
+
+  render() {
+    const {
+      shape,
+      className,
+      prefixCls,
+      size,
+      src,
+      alt,
+      icon,
+      text,
+      style
+    } = this.props;
+    const baseClassName = cls(prefixCls, className, {
+      [`${prefixCls}-${shape}`]: shape,
+      [`${prefixCls}-size-${size}`]: typeof size === "string",
+      [`${prefixCls}-image`]: src,
+      [`${prefixCls}-icon`]: icon
+    });
+
+    let children;
+    if (src) {
+      children = <img src={src} alt={alt} />;
+    } else if (icon) {
+      children = icon;
+    } else if (text) {
+      let childrenStyle = {};
+      const { scale } = this.state;
+      if (scale !== 1) {
+        const transformText = `scale(${scale}) translateX(-50%)`;
+        childrenStyle = {
+          transform: transformText
+        };
+      }
+      children = (
+        <span
+          className={`${prefixCls}-text`}
+          style={{ ...childrenStyle }}
+          ref={span => (this.avatarChildren = span)}
+        >
+          {text}
+        </span>
+      );
+    } else {
+      children = this.props.children;
+    }
+
+    return (
+      <span className={baseClassName} style={{ ...style }}>
+        {children}
+      </span>
+    );
+  }
+}

components/avatar/styles.less

@@ -0,0 +1,58 @@
+@import "../styles/vars.less";
+@import "../styles/animate.less";
+@import "../styles/mixins.less";
+
+@prefixCls: cuke-avatar;
+
+.@{prefixCls} {
+  display: inline-block;
+  text-align: center;
+  background: @cuke-avatar-bg;
+  color: @cuke-avatar-color;
+  white-space: nowrap;
+  position: relative;
+  overflow: hidden;
+  vertical-align: middle;
+  &.cuke-avatar-circle {
+    border-radius: 50%;
+  }
+  &.cuke-avatar-square {
+    border-radius: @cuke-avatar-border-radius;
+  }
+
+  .avatar-size(@cuke-avatar-size-base, @cuke-avatar-font-size-base);
+
+  &-size-large {
+    .avatar-size(@cuke-avatar-size-lg, @cuke-avatar-font-size-lg);
+  }
+
+  &-size-small {
+    .avatar-size(@cuke-avatar-size-sm, @cuke-avatar-font-size-sm);
+  }
+
+  &-image {
+    background: transparent;
+    img {
+      width: 100%;
+      height: 100%;
+      display: block;
+    }
+  }
+
+  &-text {
+    position: absolute;
+    left: 50%;
+    transform-origin: 0 center;
+  }
+}
+
+.avatar-size(@size, @font-size) {
+  width: @size;
+  height: @size;
+  line-height: @size;
+  border-radius: 50%;
+
+  &.@{prefixCls}-icon {
+    font-size: @font-size;
+  }
+}

components/calendar/__tests__/__snapshots__/index.test.js.snap

@@ -177,7 +177,7 @@ exports[`<Calendar/> should render a <Calendar/> components 1`] = `
         />
       </span>
       <span
-        class="cuke-calendar-item cuke-calendar-current-month"
+        class="cuke-calendar-item cuke-calendar-current-month cuke-calendar-selected-date"
       >
         11
         <div