sp-app-react
Version:
React based Controls and Utilities for building applications in SharePoint
114 lines (113 loc) • 6.66 kB
JavaScript
"use strict";
var __read = (this && this.__read) || function (o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.SPAttachments = void 0;
var react_1 = __importDefault(require("react"));
var react_2 = require("@fluentui/react");
var useSPField_1 = require("../hooks/useSPField");
var SPAttachments = function (_a) {
var list = _a.list, readOnly = _a.readOnly, label = _a.label, required = _a.required;
// const listContext = useContext(SPListContext);
// list = listContext ? listContext.listName : list
// const [field, meta, helpers] = useField("AttachmentFiles");
var _b = __read(useSPField_1.useSPField({ name: "AttachmentFiles" }), 5), field = _b[0], meta = _b[1], helpers = _b[2], spProps = _b[3], listContext = _b[4];
list = listContext ? listContext.listName : list;
var error = meta.error;
function _onChange(event) {
var setValue = helpers.setValue;
var value = (field.value) ? field.value : { results: [] };
event.target.files && Array.prototype.forEach.call(event.target.files, function (file) {
if (!(file.name.match('[\~\#\%\&\*\{\}\\\:\<\>\?\/\+\|]')) && (file.name.substr(0, file.name.lastIndexOf('.')).slice(-1) != '.')) {
var spAttachment = {
__metadata: {
fileObj: file,
unsaved: true
},
FileName: file.name
};
var index = value.results.map(function (i) { return i.FileName; }).indexOf(file.name);
if (index > -1) {
value.results[index].__metadata.fileObj = file;
if (!value.results[index].__metadata.unsaved)
value.results[index].__metadata.updated = true;
}
else
value.results.push(spAttachment);
setValue(value);
}
else
alert("File " + file.name + " contains invalid characters (~ # % & * { } : \\ < > ? + |) or ends with a period and cannot be uploaded. Please remove these character from the file name and upload again.");
});
event.target.value = '';
if (!/safari/i.test(navigator.userAgent)) {
event.target.type = '';
event.target.type = 'file';
}
// if (event.target.files && typeOf(event.target.files) === array ){
// const files = event.target.files.map(i => {return i});
// }
// const fileInput:HTMLElement | null = document.getElementById('AttachmentUpload-' + name);
// fileInput.files
}
function _delete(item) {
var setValue = helpers.setValue;
var value = (field.value) ? field.value : { results: [] };
var index = value.results.indexOf(item);
if (item.__metadata.unsaved)
value.results.splice(index, 1);
else
value.results[index].__metadata.deleted = true;
setValue(value);
}
function _onClick() {
var fileInput = document.getElementById("AttachmentUpload-" + name);
if (fileInput)
fileInput.click();
}
var getFilteredList = function () {
return field.value.results.filter(function (i) { return !i.__metadata.deleted; });
};
// return <div>TEST</div>
return (list
? react_1.default.createElement(react_2.Stack, null,
react_1.default.createElement(react_2.Text, { variant: "large", styles: { root: { fontWeight: react_2.FontWeights.semibold } } },
label ? label : "Attachments",
required && !readOnly ? react_1.default.createElement("span", { style: { color: "red", marginLeft: 5 } }, "*") : null),
react_1.default.createElement("input", { type: "file", style: { display: "none" }, onChange: _onChange, id: "AttachmentUpload-" + name, title: "Name", multiple: true }),
field.value && field.value.results && getFilteredList().length > 0
//.filter((i:SharePointAttachment) => { return !i.__metadata.deleted })
? getFilteredList().map(function (i, index) {
return (react_1.default.createElement(react_2.Stack, { horizontal: true, verticalAlign: "center", key: index, tokens: { childrenGap: "s1" } },
react_1.default.createElement("img", { width: "16", height: "16", title: i.FileName, alt: i.FileName.split('.').pop() + " File", src: "/_layouts/15/images/ic" + i.FileName.split('.').pop() + ".png" }),
react_1.default.createElement(react_2.Text, null, (i.ServerRelativeUrl) ? react_1.default.createElement("a", { style: { textDecoration: "none" }, className: 'ms-fontWeight-regular', href: i.ServerRelativeUrl }, i.FileName) : i.FileName),
readOnly ? null : react_1.default.createElement(react_2.IconButton, { iconProps: { iconName: 'Delete' }, title: "Delete", ariaLabel: "Delete", onClick: function () { return _delete(i); } })));
})
: react_1.default.createElement(react_2.Text, null,
"No ",
label ? label : "attachments",
" uploaded."),
readOnly ? null : react_1.default.createElement(react_2.ActionButton, { iconProps: { iconName: 'Add' }, text: label ? "Add " + label : "Add Attachment", onClick: _onClick }),
(meta.touched && meta.error && error) ? (react_1.default.createElement("span", { id: "TextFieldDescription2" },
react_1.default.createElement("div", { role: "alert" },
react_1.default.createElement("div", { className: "ms-TextField-errorMessage errorMessage" })))) : null)
: react_1.default.createElement("div", null, "Cannot display attachments component. Please provide a list name or wrap with a list component."));
};
exports.SPAttachments = SPAttachments;