Skip to content

Commit

Permalink
添加readme
Browse files Browse the repository at this point in the history
  • Loading branch information
顺堂 committed Oct 30, 2018
1 parent e0d6398 commit b97c98c
Show file tree
Hide file tree
Showing 3 changed files with 29 additions and 17 deletions.
9 changes: 9 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,7 @@ Yes please! See the [CONTRIBUTING](https://github.com/uxcore/uxcore/blob/master/

With this method, the component can be used by calling `Album.show({src: 'foo/url'})` or `Album.show({photos: [<Photo src="#url1" />, <Photo src="#url2" />]})` directly.


#### config

| Name | Type | Required | Default | Comments |
Expand All @@ -104,3 +105,11 @@ Yes please! See the [CONTRIBUTING](https://github.com/uxcore/uxcore/blob/master/
| getContainer | function | false | the function will append a new div to document body. | define the container which album rendered into |
| showButton | boolean | no | false | show the function button(zoomIn/zoomOut) |
| customButtons | { icon: ReactElement, onClick: function } \| Array<{ icon: ReactElement, onClick: function }> | no | [] | custom function buttons which would be put between zoomIn button and zoomOut button |


## Props
| Name | Type | Default | Comments |
|---|---|---|---|---|
| onChange | function(index) | | Callback method when change |
| onOpen | function(index) | | Callback method when open |
| onClose | function | | Callback method when close |
16 changes: 10 additions & 6 deletions src/Viewer.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -97,15 +97,17 @@ class Viewer extends React.Component {
}

prev() {
const current = this.state.current;
const { current } = this.state;
if (current === 0) return;
this.setState({
current: current - 1,
});
const { onChange } = this.props;
onChange(current);
}

next() {
const current = this.state.current;
const { current } = this.state;
let { children } = this.props;
if (!Array.isArray(children)) {
children = [children];
Expand All @@ -114,6 +116,8 @@ class Viewer extends React.Component {
this.setState({
current: current + 1,
});
const { onChange } = this.props;
onChange(current);
}

handleImageZoomIn() {
Expand Down Expand Up @@ -244,10 +248,10 @@ Viewer.defaultProps = {
hasControl: true,
showButton: false,
customButtons: [],
prev() {},
next() {},
onClose() {},
onSetCurrent() {},
prev() { },
next() { },
onClose() { },
onSetCurrent() { },
enableKeyBoardControl: true,
coordinate: null,
current: 0,
Expand Down
21 changes: 10 additions & 11 deletions tests/Album.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -36,13 +36,12 @@ function renderAlbumWithProps(props) {
<Photo src="https://img.alicdn.com/imgextra/i2/290551947/TB1W.ZrLpXXXXbMXpXXXXXXXXXX_!!0-tstar.jpg" key={5} />
<Photo src="https://img.alicdn.com/imgextra/i1/673400424/TB1Jze1KXXXXXcfXFXXXXXXXXXX_!!673400424-0-tstar.jpg" key={6} />
<Photo src="https://img.alicdn.com/imgextra/i4/673400424/TB1d2PkKXXXXXbiXXXXXXXXXXXX_!!673400424-0-tstar.jpg" key={7} />
</Album>
</Album>,
);
return wrapper;
}

describe('Album', () => {

describe('render', () => {
it('should render correctly', (done) => {
const wrapper = renderAlbumWithProps();
Expand Down Expand Up @@ -86,7 +85,7 @@ describe('Album', () => {
showButton: true,
customButtons: {
icon: <Icon name="xiazai" />,
onClick: () => {}
onClick: () => { },
},
});
expect(wrapper.find('.album-func-button-item').length).to.be(3);
Expand All @@ -98,13 +97,13 @@ describe('Album', () => {
customButtons: [
{
icon: <Icon name="xiazai" />,
onClick: () => {},
onClick: () => { },
},
{
icon: <Icon name="dayin" />,
onClick: () => {},
onClick: () => { },
},
]
],
});
expect(wrapper.find('.album-func-button-item').length).to.be(4);
});
Expand Down Expand Up @@ -174,7 +173,7 @@ describe('Album', () => {

describe('api', () => {
it('should open the album cover with calling api:Album.show', (done) => {
const container = mount(<div></div>);
const container = mount(<div />);
Album.show({
photos: [
<Photo
Expand All @@ -189,13 +188,13 @@ describe('Album', () => {
],
getContainer() {
return container.instance();
}
},
});
expect(container.instance().children.length).to.be(1);
done()
done();
});
it('should work with config.src', (done) => {
const container = mount(<div></div>);
const container = mount(<div />);
Album.show({
src: '//img.alicdn.com/imgextra/i2/927018118/TB13fBjKFXXXXbPXpXXXXXXXXXX_!!0-tstar.jpg',
getContainer() {
Expand All @@ -206,4 +205,4 @@ describe('Album', () => {
done();
});
});
});
});

0 comments on commit b97c98c

Please sign in to comment.