feature: add attribute prop

This commit is contained in:
infeng 2016-12-28 10:35:15 +08:00
parent 491ce6dbdc
commit 5702be360a
4 changed files with 12 additions and 3 deletions

View File

@ -66,6 +66,7 @@ class App extends React.Component<any, any> {
onClose={() => { this.setState({ visible: false }); } }
images={images}
activeIndex={this.state.activeIndex}
attribute={false}
/>
</div>
<div className="footer">

View File

@ -35,6 +35,7 @@ export default class ViewerCore extends React.Component<ViewerProps, ViewerCoreS
activeIndex: 0,
zIndex: 1000,
drag: true,
attribute: true,
};
private prefixCls: string;
@ -470,6 +471,7 @@ export default class ViewerCore extends React.Component<ViewerProps, ViewerCoreS
alt={activeImg.alt}
width={this.state.imageWidth}
height={this.state.imageHeight}
attribute={this.props.attribute}
/>
<ViewerNav
prefixCls={this.prefixCls}

View File

@ -18,6 +18,8 @@ interface ViewerProps {
container?: HTMLElement;
/** 图片是否可拖动 */
drag?: boolean;
/** 是否显示图片属性 */
attribute?: boolean;
}
export default ViewerProps;

View File

@ -7,6 +7,7 @@ export interface ViewerToolbarProps {
alt: string;
width: number;
height: number;
attribute: boolean;
}
export default class ViewerToolbar extends React.Component<ViewerToolbarProps, any> {
@ -20,11 +21,14 @@ export default class ViewerToolbar extends React.Component<ViewerToolbarProps, a
}
render() {
let attributeNode = this.props.attribute ? (
<p className={`${this.props.prefixCls}-attribute`}>
{`${this.props.alt}(${this.props.width} x ${this.props.height})`}
</p>
) : null;
return (
<div>
<p className={`${this.props.prefixCls}-attribute`}>
{`${this.props.alt}(${this.props.width} x ${this.props.height})`}
</p>
{attributeNode}
<ul className={`${this.props.prefixCls}-toolbar`}>
<li className={`${this.props.prefixCls}-btn`} onClick={() => {this.handleAction(ActionType.zoomIn);}}>
<Icon type={ActionType.zoomIn}/>