Skip to content

Commit 4a39341

Browse files
joaojmendesjoaojmendes
committed
update List-Item-Attachments with Placeholder Component
1 parent 0e5c42e commit 4a39341

File tree

8 files changed

+93
-58
lines changed

8 files changed

+93
-58
lines changed

‎src/controls/listItemAttachments/IListItemAttachmentsProps.ts

100755100644
File mode changed.

‎src/controls/listItemAttachments/IListItemAttachmentsState.ts

100755100644
Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,6 @@ export interface IListItemAttachmentsState {
66
attachments: IListItemAttachmentFile[];
77
deleteAttachment: boolean;
88
disableButton: boolean;
9+
showPlaceHolder: boolean;
10+
fireUpload: boolean;
911
}

‎src/controls/listItemAttachments/IUploadAttachmentProps.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,5 +8,6 @@ export interface IUploadAttachmentProps {
88
webUrl?:string;
99
disabled?: boolean;
1010
context: WebPartContext | ApplicationCustomizerContext;
11+
fireUpload?:boolean;
1112
onAttachmentUpload: () => void;
1213
}

‎src/controls/listItemAttachments/IUploadAttachmentState.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,5 @@ export interface IUploadAttachmentState {
44
hideDialog: boolean;
55
dialogMessage: string;
66
isLoading: boolean;
7+
78
}

‎src/controls/listItemAttachments/ListItemAttachments.tsx

Lines changed: 62 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { Label } from "office-ui-fabric-react/lib/Label";
77
import { Link } from 'office-ui-fabric-react/lib/Link';
88
import * as strings from 'ControlStrings';
99
import styles from './ListItemAttachments.module.scss';
10-
import { UploadAttachment} from './UploadAttachment'
10+
import { UploadAttachment } from './UploadAttachment';
1111
import { IListItemAttachmentFile } from './IListItemAttachmentFile';
1212
import {
1313
DocumentCard,
@@ -23,6 +23,8 @@ import SPservice from "../../services/SPService";
2323
import { TooltipHost, DirectionalHint } from 'office-ui-fabric-react/lib/Tooltip';
2424
import { Spinner, SpinnerSize } from 'office-ui-fabric-react/lib/Spinner';
2525
import utilities from './utilities';
26+
import { Placeholder } from "../placeholder";
27+
2628
export class ListItemAttachments extends React.Component<IListItemAttachmentsProps, IListItemAttachmentsState> {
2729
private _spservice: SPservice;
2830
private previewImages: IDocumentCardPreviewImage[];
@@ -37,7 +39,9 @@ export class ListItemAttachments extends React.Component<IListItemAttachmentsPro
3739
dialogMessage: '',
3840
attachments: [],
3941
deleteAttachment: false,
40-
disableButton: false
42+
disableButton: false,
43+
showPlaceHolder: false,
44+
fireUpload: false
4145
};
4246
// Get SPService Factory
4347
this._spservice = new SPservice(this.props.context);
@@ -69,7 +73,9 @@ export class ListItemAttachments extends React.Component<IListItemAttachmentsPro
6973
this.setState({
7074
hideDialog: true,
7175
dialogMessage: '',
72-
attachments: files
76+
attachments: files,
77+
showPlaceHolder: files.length === 0 ? true : false
78+
7379
});
7480
}
7581
catch (error) {
@@ -81,6 +87,7 @@ export class ListItemAttachments extends React.Component<IListItemAttachmentsPro
8187
}
8288
// LoadAttachments
8389
public componentDidMount() {
90+
8491
this._loadAttachments();
8592
}
8693

@@ -95,49 +102,60 @@ export class ListItemAttachments extends React.Component<IListItemAttachmentsPro
95102
disabled={this.props.disabled}
96103
context={this.props.context}
97104
onAttachmentUpload={this._onAttachmentpload}
105+
fireUpload={this.state.fireUpload}
98106
/>
99107

100-
{this.state.attachments.map((_file, i: number) => {
101-
return (
102-
<div className={styles.documentCardWrapper}>
103-
<TooltipHost
104-
content={_file.FileName}
105-
calloutProps={{ gapSpace: 0, isBeakVisible: true }}
106-
closeDelay={200}
107-
directionalHint={DirectionalHint.rightCenter}>
108-
109-
<DocumentCard
110-
onClickHref={`${_file.ServerRelativeUrl}?web=1`}
111-
className={styles.documentCard}>
112-
<DocumentCardPreview previewImages={[this.previewImages[i]]} />
113-
<Label className={styles.fileLabel}>
114-
{_file.FileName}
115-
</Label>
116-
<DocumentCardActions
117-
actions={
118-
[
119-
{
120-
iconProps: {
121-
iconName: 'Delete',
122-
title: strings.ListItemAttachmentsActionDeleteIconTitle,
123-
},
124-
title: strings.ListItemAttachmentsactionDeleteTitle,
125-
text: strings.ListItemAttachmentsactionDeleteTitle,
126-
disabled: this.props.disabled,
127-
onClick: (ev) => {
128-
ev.preventDefault();
129-
ev.stopPropagation();
130-
this._onDeleteAttachment(_file);
131-
}
132-
},
133-
]
134-
}
135-
/>
136-
</DocumentCard>
137-
</TooltipHost>
138-
</div>
139-
);
140-
})}
108+
{
109+
this.state.showPlaceHolder ?
110+
<Placeholder
111+
iconName='Upload'
112+
iconText={strings.ListItemAttachmentslPlaceHolderIconText}
113+
description={strings.ListItemAttachmentslPlaceHolderDescription}
114+
buttonLabel={strings.ListItemAttachmentslPlaceHolderButtonLabel}
115+
onConfigure={() => this.setState({ fireUpload: true })} />
116+
:
117+
118+
this.state.attachments.map((_file, i: number) => {
119+
return (
120+
<div className={styles.documentCardWrapper}>
121+
<TooltipHost
122+
content={_file.FileName}
123+
calloutProps={{ gapSpace: 0, isBeakVisible: true }}
124+
closeDelay={200}
125+
directionalHint={DirectionalHint.rightCenter}>
126+
127+
<DocumentCard
128+
onClickHref={`${_file.ServerRelativeUrl}?web=1`}
129+
className={styles.documentCard}>
130+
<DocumentCardPreview previewImages={[this.previewImages[i]]} />
131+
<Label className={styles.fileLabel}>
132+
{_file.FileName}
133+
</Label>
134+
<DocumentCardActions
135+
actions={
136+
[
137+
{
138+
iconProps: {
139+
iconName: 'Delete',
140+
title: strings.ListItemAttachmentsActionDeleteIconTitle,
141+
},
142+
title: strings.ListItemAttachmentsactionDeleteTitle,
143+
text: strings.ListItemAttachmentsactionDeleteTitle,
144+
disabled: this.props.disabled,
145+
onClick: (ev) => {
146+
ev.preventDefault();
147+
ev.stopPropagation();
148+
this._onDeleteAttachment(_file);
149+
}
150+
},
151+
]
152+
}
153+
/>
154+
</DocumentCard>
155+
</TooltipHost>
156+
</div>
157+
);
158+
})}
141159
{
142160

143161
<Dialog

‎src/controls/listItemAttachments/UploadAttachment.tsx

Lines changed: 20 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -19,26 +19,33 @@ export class UploadAttachment extends React.Component<IUploadAttachmentProps, IU
1919
file: null,
2020
hideDialog: true,
2121
dialogMessage: '',
22-
isLoading: false
22+
isLoading: false,
2323
};
2424
// Get SPService
2525
this._spservice = new SPservice(this.props.context);
26-
this.fileInput = createRef();
26+
this.fileInput = createRef();
2727
// Handlers
2828
this._closeDialog = this._closeDialog.bind(this);
2929
this._addAttachment = this._addAttachment.bind(this);
3030
this._onAttachmentUpload = this._onAttachmentUpload.bind(this);
3131
}
32+
33+
public componentDidUpdate(prevProps: IUploadAttachmentProps, prevState: IUploadAttachmentState): void {
34+
if (this.props.fireUpload) {
35+
this.fileInput.current.value = '';
36+
this.fileInput.current.click();
37+
}
38+
}
39+
// Upload Attachments
40+
public componentDidMount() {
41+
42+
}
3243
// FileReader event
3344
private _onAttachmentUpload(e) {
3445
e.preventDefault();
3546
// fire click event
36-
this.fileInput.current.value='';
47+
this.fileInput.current.value = '';
3748
this.fileInput.current.click();
38-
//$('#file-picker').val('');
39-
// $('#file-picker').trigger('click');
40-
41-
// document.getElementById('file-picker').click();
4249
}
4350
// Add Attachment
4451
private _addAttachment(e) {
@@ -79,11 +86,11 @@ export class UploadAttachment extends React.Component<IUploadAttachmentProps, IU
7986
return (
8087
<div>
8188
<input id="file-picker"
82-
style={{ display: 'none' }}
83-
type="file"
84-
onChange={(e) => this._addAttachment(e)}
85-
ref={this.fileInput}
86-
/>
89+
style={{ display: 'none' }}
90+
type="file"
91+
onChange={(e) => this._addAttachment(e)}
92+
ref={this.fileInput}
93+
/>
8794
<div style={{ textAlign: 'left', marginTop: 25, marginBottom: 25 }}>
8895
<CommandBar
8996
items={[{
@@ -108,7 +115,7 @@ export class UploadAttachment extends React.Component<IUploadAttachmentProps, IU
108115
onDismiss={this._closeDialog}
109116
dialogContentProps={{
110117
type: DialogType.normal,
111-
title:strings.ListItemAttachmentsuploadAttachmentDialogTitle,
118+
title: strings.ListItemAttachmentsuploadAttachmentDialogTitle,
112119
subText: this.state.dialogMessage
113120
}}
114121
modalProps={{

‎src/loc/en-us.ts

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,9 @@ define([], () => {
7070
ListItemAttachmentsuploadAttachmentButtonLabel: 'Add Attachment',
7171
ListItemAttachmentsuploadAttachmentErrorMsg: 'The file {0} not attached, reason: {1}',
7272
ListItemAttachmentsCommandBarAddAttachmentLabel: 'Add Attachment',
73-
ListItemAttachmentsloadingMessage: 'Uploading file ...'
73+
ListItemAttachmentsloadingMessage: 'Uploading file ...',
74+
ListItemAttachmentslPlaceHolderIconText: 'List Item Attachment',
75+
ListItemAttachmentslPlaceHolderDescription: 'Please Upload Attachment',
76+
ListItemAttachmentslPlaceHolderButtonLabel: 'Upload'
7477
};
7578
});

‎src/loc/mystrings.d.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,9 @@ declare interface IControlStrings {
4141
ListItemAttachmentsuploadAttachmentErrorMsg: String;
4242
ListItemAttachmentsCommandBarAddAttachmentLabel: string;
4343
ListItemAttachmentsloadingMessage: string;
44+
ListItemAttachmentslPlaceHolderIconText: string;
45+
ListItemAttachmentslPlaceHolderDescription: string;
46+
ListItemAttachmentslPlaceHolderButtonLabel: string;
4447
}
4548

4649
declare module 'ControlStrings' {

0 commit comments

Comments
 (0)