@bindu-dashing/dam-solution 1.0.0

package/dist/Folders/uploadFile.js

@@ -0,0 +1,507 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _antd = require("antd");
+var _react = _interopRequireWildcard(require("react"));
+var _icons = require("@ant-design/icons");
+var _useFetch = _interopRequireDefault(require("../hocs/useFetch"));
+var APIS = _interopRequireWildcard(require("../constants/apiEndpoints"));
+var _dayjs = _interopRequireDefault(require("dayjs"));
+require("./style.css");
+var _lodash = require("lodash");
+var _helpers = require("../hocs/helpers");
+const UploadFile = _ref => {
+  let {
+    setShowUploadFile,
+    folderId,
+    id,
+    fetchFiles,
+    folder,
+    damAccessKey,
+    secretKey,
+    subdomain,
+    styles,
+    teams,
+    accessToken,
+    currentUser
+  } = _ref;
+  const userId = currentUser === null || currentUser === void 0 ? void 0 : currentUser.id;
+  const [data, setData] = (0, _react.useState)({});
+  const [loading, setLoading] = (0, _react.useState)(false);
+  const [assetTypeId, setAssetTypeId] = (0, _react.useState)(null);
+  const [assetType, setAssetType] = (0, _react.useState)({});
+  const [file, setFile] = (0, _react.useState)(null);
+  const [fileType, setFileType] = (0, _react.useState)(null);
+  const {
+    fetchApi
+  } = (0, _useFetch.default)();
+  const [filename, setFilename] = (0, _react.useState)("");
+  const [metaDataFields, setMetaDataFields] = (0, _react.useState)([]);
+  const [fetchRecordLoading, setFetchRecordLoading] = (0, _react.useState)(false);
+  const [fileSizeError, setFileSizeError] = (0, _react.useState)(null);
+  const [assetTypes, setAssetTypes] = (0, _react.useState)([]);
+  (0, _react.useEffect)(() => {
+    if (assetType) {
+      var _assetType$metadata_f;
+      setMetaDataFields(assetType === null || assetType === void 0 ? void 0 : (_assetType$metadata_f = assetType.metadata_fields) === null || _assetType$metadata_f === void 0 ? void 0 : _assetType$metadata_f.sort((a, b) => {
+        var _a$display_order, _a$display_order$toSt, _b$display_order;
+        return a === null || a === void 0 ? void 0 : (_a$display_order = a.display_order) === null || _a$display_order === void 0 ? void 0 : (_a$display_order$toSt = _a$display_order.toString()) === null || _a$display_order$toSt === void 0 ? void 0 : _a$display_order$toSt.localeCompare(b === null || b === void 0 ? void 0 : (_b$display_order = b.display_order) === null || _b$display_order === void 0 ? void 0 : _b$display_order.toString());
+      }));
+      if (!id) {
+        var _assetType$metadata_f2;
+        const defaultValues = assetType === null || assetType === void 0 ? void 0 : (_assetType$metadata_f2 = assetType.metadata_fields) === null || _assetType$metadata_f2 === void 0 ? void 0 : _assetType$metadata_f2.reduce((acc, field) => {
+          if ((0, _lodash.includes)(["DROPDOWN", "MULTI_SELECT", "CHECKBOX", "RADIO"], field === null || field === void 0 ? void 0 : field.type)) {
+            var _field$options;
+            const optionValues = field === null || field === void 0 ? void 0 : (_field$options = field.options) === null || _field$options === void 0 ? void 0 : _field$options.map(option => option === null || option === void 0 ? void 0 : option.value);
+            if (field !== null && field !== void 0 && field.default_value && (0, _lodash.includes)(optionValues, field === null || field === void 0 ? void 0 : field.default_value)) {
+              var _field$default_value;
+              acc[field === null || field === void 0 ? void 0 : field.name] = (_field$default_value = field === null || field === void 0 ? void 0 : field.default_value) !== null && _field$default_value !== void 0 ? _field$default_value : null;
+            }
+          } else {
+            if (field !== null && field !== void 0 && field.default_value) {
+              var _field$default_value2;
+              acc[field === null || field === void 0 ? void 0 : field.name] = (_field$default_value2 = field === null || field === void 0 ? void 0 : field.default_value) !== null && _field$default_value2 !== void 0 ? _field$default_value2 : null;
+            }
+          }
+          return acc;
+        }, {});
+        form.setFieldsValue(defaultValues);
+        setData(defaultValues);
+      }
+    }
+  }, [assetType]);
+  (0, _react.useEffect)(() => {
+    if (assetTypes && assetTypeId) {
+      setAssetType(assetTypes === null || assetTypes === void 0 ? void 0 : assetTypes.find(type => (type === null || type === void 0 ? void 0 : type.id) == assetTypeId));
+    }
+  }, [assetTypeId]);
+  const onFinish = values => {
+    values === null || values === void 0 ? true : delete values.file;
+    if (id) {
+      var _values$team_ids, _values$team_ids2, _values$team_ids3;
+      setLoading(true);
+      fetchApi({
+        httpMethod: "put",
+        route: APIS.UPDATE_FILE.replace(":id", id),
+        body: {
+          ...data,
+          ...values,
+          prefix: folder === null || folder === void 0 ? void 0 : folder.path,
+          created_by: userId,
+          folder_id: folder === null || folder === void 0 ? void 0 : folder.id,
+          folder_name: folder === null || folder === void 0 ? void 0 : folder.name,
+          team_ids: typeof (values === null || values === void 0 ? void 0 : values.team_ids) === "string" ? (_values$team_ids = values === null || values === void 0 ? void 0 : values.team_ids) !== null && _values$team_ids !== void 0 ? _values$team_ids : "" : (values === null || values === void 0 ? void 0 : (_values$team_ids2 = values.team_ids) === null || _values$team_ids2 === void 0 ? void 0 : _values$team_ids2.length) > 0 ? values === null || values === void 0 ? void 0 : (_values$team_ids3 = values.team_ids) === null || _values$team_ids3 === void 0 ? void 0 : _values$team_ids3.join(",") : ""
+        },
+        accessToken,
+        damAccessKey,
+        secretKey,
+        subdomain,
+        onSuccess: response => {
+          setLoading(false);
+          setShowUploadFile(false);
+          _antd.notification.success({
+            message: "File updated successfully"
+          });
+          fetchFiles(null, folderId);
+        },
+        onFailure: () => {
+          setLoading(false);
+          _antd.notification.error({
+            message: "Error while updating file"
+          });
+        }
+      });
+    } else {
+      var _Object$keys;
+      const formData = new FormData();
+      (_Object$keys = Object.keys(values)) === null || _Object$keys === void 0 ? void 0 : _Object$keys.forEach(key => {
+        if (key === "team_ids") {
+          formData.append(key, values !== null && values !== void 0 && values[key] ? values === null || values === void 0 ? void 0 : values[key] : "");
+        } else {
+          formData.append(key, values === null || values === void 0 ? void 0 : values[key]);
+        }
+      });
+      const [name, extension] = file.name.split(".");
+      setLoading(true);
+      fetchApi({
+        httpMethod: "GET",
+        route: APIS.FILE_UPLOAD_PRESIGNED_URL.replace(":extension", "." + extension),
+        onSuccess: response => {
+          console.log(response);
+          const data = response === null || response === void 0 ? void 0 : response.data;
+          const path = data === null || data === void 0 ? void 0 : data.key;
+          const presignedUrl = data === null || data === void 0 ? void 0 : data.presigned_url;
+          fetch(presignedUrl, {
+            method: "put",
+            headers: {
+              "Content-Type": file.type,
+              "Access-Control-Allow-Origin": "*"
+            },
+            body: file
+          }).then(response => {
+            formData.append("fileTempS3Path", path);
+            formData.append("type", fileType);
+            formData.append("prefix", folder === null || folder === void 0 ? void 0 : folder.path);
+            formData.append("created_by", userId);
+            formData.append("folder_id", folder === null || folder === void 0 ? void 0 : folder.id);
+            formData.append("folder_name", folder === null || folder === void 0 ? void 0 : folder.name);
+            formData.append("name", filename);
+            formData.append("asset_type", assetType === null || assetType === void 0 ? void 0 : assetType.name);
+            fetchApi({
+              httpMethod: "post",
+              route: APIS.UPLOAD_FILE,
+              body: formData,
+              isFormData: true,
+              onSuccess: response => {
+                setLoading(false);
+                setShowUploadFile(false);
+                _antd.notification.success({
+                  message: "File uploaded successfully"
+                });
+                fetchFiles(null, folder === null || folder === void 0 ? void 0 : folder.id);
+              },
+              onFailure: () => {
+                setLoading(false);
+                _antd.notification.error({
+                  message: "Error while uploading file"
+                });
+              },
+              accessToken,
+              damAccessKey,
+              secretKey,
+              subdomain
+            });
+          }).catch(() => {
+            setLoading(false);
+            console.error("Error while uploading the file");
+            _antd.notification.error({
+              message: "Error while uploading the file"
+            });
+          });
+        },
+        onFailure: () => {},
+        accessToken: accessToken,
+        damAccessKey,
+        secretKey,
+        subdomain
+      });
+    }
+  };
+  const [form] = _antd.Form.useForm();
+  (0, _react.useEffect)(() => {
+    if (!id) {
+      fetchApi({
+        httpMethod: "get",
+        route: APIS.FETCH_ASSET_TYPES,
+        params: {
+          fetchAll: true
+        },
+        onSuccess: response => {
+          var _response$data;
+          const data = response === null || response === void 0 ? void 0 : (_response$data = response.data) === null || _response$data === void 0 ? void 0 : _response$data.items;
+          setAssetTypes(data);
+        },
+        accessToken,
+        damAccessKey,
+        secretKey,
+        subdomain
+      });
+    }
+  }, []);
+  (0, _react.useEffect)(() => {
+    if (id) {
+      setFetchRecordLoading(true);
+      fetchApi({
+        httpMethod: "get",
+        route: APIS.FETCH_FILE.replace(":id", id),
+        params: {
+          folder_id: folderId
+        },
+        onSuccess: response => {
+          const data = response === null || response === void 0 ? void 0 : response.data;
+          form.setFieldsValue(data);
+          setData(data);
+          setAssetTypeId(data === null || data === void 0 ? void 0 : data.asset_type_id);
+          fetchApi({
+            httpMethod: "get",
+            route: APIS.FETCH_ASSET_TYPES,
+            params: {
+              fetchAll: true
+            },
+            onSuccess: response => {
+              var _response$data2;
+              const assetTypeData = response === null || response === void 0 ? void 0 : (_response$data2 = response.data) === null || _response$data2 === void 0 ? void 0 : _response$data2.items;
+              setAssetTypes(assetTypeData);
+              setAssetType(assetTypeData === null || assetTypeData === void 0 ? void 0 : assetTypeData.find(type => (type === null || type === void 0 ? void 0 : type.id) == (data === null || data === void 0 ? void 0 : data.asset_type_id)));
+              setFetchRecordLoading(false);
+            },
+            accessToken,
+            damAccessKey,
+            secretKey,
+            subdomain
+          });
+        },
+        onFailure: () => {
+          setFetchRecordLoading(false);
+        },
+        accessToken,
+        damAccessKey,
+        secretKey,
+        subdomain
+      });
+    }
+  }, [id]);
+  const assetTypeOptions = assetTypes === null || assetTypes === void 0 ? void 0 : assetTypes.map(type => {
+    return {
+      label: type.name,
+      value: type.id
+    };
+  });
+  return /*#__PURE__*/_react.default.createElement(_antd.Drawer, {
+    title: /*#__PURE__*/_react.default.createElement("div", {
+      className: "dam-upload-file-title"
+    }, /*#__PURE__*/_react.default.createElement("p", null, "Upload File"), /*#__PURE__*/_react.default.createElement(_antd.Typography.Text, {
+      ellipsis: {
+        tooltip: true
+      },
+      className: "description"
+    }, id ? data === null || data === void 0 ? void 0 : data.path : folder === null || folder === void 0 ? void 0 : folder.path)),
+    open: true,
+    className: "dam-upload-file",
+    onClose: () => setShowUploadFile(false),
+    width: 500,
+    maskClosable: false
+  }, fetchRecordLoading ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "dam-loading"
+  }, /*#__PURE__*/_react.default.createElement(_antd.Spin, null)) : /*#__PURE__*/_react.default.createElement(_antd.Form, {
+    layout: "vertical",
+    onFinish: onFinish,
+    form: form
+  }, /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+    label: "Asset Type",
+    name: "asset_type_id",
+    rules: [{
+      required: true,
+      message: "Asset type is required"
+    }]
+  }, /*#__PURE__*/_react.default.createElement(_antd.Select, {
+    placeholder: "Select Asset Type",
+    options: assetTypeOptions,
+    onChange: e => setAssetTypeId(e),
+    disabled: id,
+    optionFilterProp: "label",
+    showSearch: true
+  })), metaDataFields === null || metaDataFields === void 0 ? void 0 : metaDataFields.map(field => {
+    var _field$default_value3, _field$default_value4, _field$default_value5;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (field === null || field === void 0 ? void 0 : field.type) === "INPUT" && /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+      label: /*#__PURE__*/_react.default.createElement(_antd.Typography.Text, {
+        ellipsis: {
+          tooltip: true
+        }
+      }, field === null || field === void 0 ? void 0 : field.name),
+      name: field === null || field === void 0 ? void 0 : field.name,
+      rules: [{
+        required: field === null || field === void 0 ? void 0 : field.is_mandatory,
+        message: `${field === null || field === void 0 ? void 0 : field.name} is required`
+      }]
+    }, /*#__PURE__*/_react.default.createElement(_antd.Input, {
+      defaultValue: (_field$default_value3 = field === null || field === void 0 ? void 0 : field.default_value) !== null && _field$default_value3 !== void 0 ? _field$default_value3 : ""
+    })), (field === null || field === void 0 ? void 0 : field.type) === "DROPDOWN" && /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+      label: /*#__PURE__*/_react.default.createElement(_antd.Typography.Text, {
+        ellipsis: {
+          tooltip: true
+        }
+      }, field === null || field === void 0 ? void 0 : field.name),
+      name: field === null || field === void 0 ? void 0 : field.name,
+      rules: [{
+        required: field === null || field === void 0 ? void 0 : field.is_mandatory,
+        message: `${field === null || field === void 0 ? void 0 : field.name} is required`
+      }]
+    }, /*#__PURE__*/_react.default.createElement(_antd.Select, {
+      options: field === null || field === void 0 ? void 0 : field.options
+    })), (field === null || field === void 0 ? void 0 : field.type) === "MULTI_SELECT" && /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+      label: /*#__PURE__*/_react.default.createElement(_antd.Typography.Text, {
+        ellipsis: {
+          tooltip: true
+        }
+      }, field === null || field === void 0 ? void 0 : field.name),
+      name: field === null || field === void 0 ? void 0 : field.name,
+      rules: [{
+        required: field === null || field === void 0 ? void 0 : field.is_mandatory,
+        message: `${field === null || field === void 0 ? void 0 : field.name} is required`
+      }],
+      getValueFromEvent: e => {
+        return e ? e === null || e === void 0 ? void 0 : e.join(",") : "";
+      },
+      getValueProps: i => {
+        return {
+          value: i && i !== "" ? i.split(",") : []
+        };
+      }
+    }, /*#__PURE__*/_react.default.createElement(_antd.Select, {
+      mode: "multiple",
+      options: field === null || field === void 0 ? void 0 : field.options
+    })), (field === null || field === void 0 ? void 0 : field.type) === "CHECKBOX" && /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+      label: /*#__PURE__*/_react.default.createElement(_antd.Typography.Text, {
+        ellipsis: {
+          tooltip: true
+        }
+      }, field === null || field === void 0 ? void 0 : field.name),
+      name: field === null || field === void 0 ? void 0 : field.name,
+      rules: [{
+        required: field === null || field === void 0 ? void 0 : field.is_mandatory,
+        message: `${field === null || field === void 0 ? void 0 : field.name} is required`
+      }],
+      getValueFromEvent: e => {
+        return e ? e === null || e === void 0 ? void 0 : e.join(",") : "";
+      },
+      getValueProps: i => ({
+        value: i ? i.split(",") : ""
+      })
+    }, /*#__PURE__*/_react.default.createElement(_antd.Checkbox.Group, {
+      options: field === null || field === void 0 ? void 0 : field.options
+    })), (field === null || field === void 0 ? void 0 : field.type) === "RADIO" && /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+      label: /*#__PURE__*/_react.default.createElement(_antd.Typography.Text, {
+        ellipsis: {
+          tooltip: true
+        }
+      }, field === null || field === void 0 ? void 0 : field.name),
+      name: field === null || field === void 0 ? void 0 : field.name,
+      rules: [{
+        required: field === null || field === void 0 ? void 0 : field.is_mandatory,
+        message: `${field === null || field === void 0 ? void 0 : field.name} is required`
+      }]
+    }, /*#__PURE__*/_react.default.createElement(_antd.Radio.Group, {
+      options: field === null || field === void 0 ? void 0 : field.options,
+      defaultValue: (_field$default_value4 = field === null || field === void 0 ? void 0 : field.default_value) !== null && _field$default_value4 !== void 0 ? _field$default_value4 : ""
+    })), (field === null || field === void 0 ? void 0 : field.type) === "TEXT_AREA" && /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+      label: /*#__PURE__*/_react.default.createElement(_antd.Typography.Text, {
+        ellipsis: {
+          tooltip: true
+        }
+      }, field === null || field === void 0 ? void 0 : field.name),
+      name: field === null || field === void 0 ? void 0 : field.name,
+      rules: [{
+        required: field === null || field === void 0 ? void 0 : field.is_mandatory,
+        message: `${field === null || field === void 0 ? void 0 : field.name} is required`
+      }]
+    }, /*#__PURE__*/_react.default.createElement(_antd.Input.TextArea, {
+      defaultValue: (_field$default_value5 = field === null || field === void 0 ? void 0 : field.default_value) !== null && _field$default_value5 !== void 0 ? _field$default_value5 : "",
+      autoSize: true
+    })), (field === null || field === void 0 ? void 0 : field.type) === "DATE" && /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+      label: /*#__PURE__*/_react.default.createElement(_antd.Typography.Text, {
+        ellipsis: {
+          tooltip: true
+        }
+      }, field === null || field === void 0 ? void 0 : field.name),
+      name: field === null || field === void 0 ? void 0 : field.name,
+      rules: [{
+        required: field === null || field === void 0 ? void 0 : field.is_mandatory,
+        message: `${field === null || field === void 0 ? void 0 : field.name} is required`
+      }],
+      getValueFromEvent: e => e ? (0, _dayjs.default)(e).format("YYYY-MM-DD") : null,
+      getValueProps: i => ({
+        value: i ? (0, _dayjs.default)(i) : null
+      })
+    }, /*#__PURE__*/_react.default.createElement(_antd.DatePicker, {
+      style: {
+        width: "100%"
+      }
+    })));
+  }), !id && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+    label: "File",
+    name: "file",
+    rules: [{
+      required: true,
+      message: `File is required`
+    }]
+  }, /*#__PURE__*/_react.default.createElement(_antd.Upload, {
+    listType: "card",
+    beforeUpload: file => {
+      const fileSize = (0, _helpers.humanFileSize)(file === null || file === void 0 ? void 0 : file.size);
+      if ((fileSize === null || fileSize === void 0 ? void 0 : fileSize.sizeType) !== "GB" && (fileSize === null || fileSize === void 0 ? void 0 : fileSize.sizeType) !== "TB") {
+        if ((fileSize === null || fileSize === void 0 ? void 0 : fileSize.sizeType) == "MB") {
+          if ((fileSize === null || fileSize === void 0 ? void 0 : fileSize.size) < 5) {
+            var _name$split;
+            const name = file.name;
+            setFile(file);
+            setFilename(name);
+            setFileType("." + (name === null || name === void 0 ? void 0 : (_name$split = name.split(".")) === null || _name$split === void 0 ? void 0 : _name$split[1]));
+            setFileSizeError("");
+            return false;
+          } else {
+            setFileSizeError("File size should be less than 5MB");
+          }
+        } else {
+          var _name$split2;
+          const name = file.name;
+          setFile(file);
+          setFilename(name);
+          setFileType("." + (name === null || name === void 0 ? void 0 : (_name$split2 = name.split(".")) === null || _name$split2 === void 0 ? void 0 : _name$split2[1]));
+          setFileSizeError("");
+          return false;
+        }
+      } else {
+        setFileSizeError("File size should be less than 5MB");
+      }
+    },
+    maxCount: 1
+  }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
+    icon: /*#__PURE__*/_react.default.createElement(_icons.UploadOutlined, null)
+  }, "Select"))), fileSizeError && /*#__PURE__*/_react.default.createElement(_antd.Typography.Text, {
+    style: {
+      color: "red"
+    }
+  }, fileSizeError)), /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+    label: "Expiry Date",
+    name: "expiry_date",
+    getValueFromEvent: e => e ? (0, _dayjs.default)(e).format("YYYY-MM-DD") : null,
+    getValueProps: i => ({
+      value: i ? (0, _dayjs.default)(i) : null
+    })
+  }, /*#__PURE__*/_react.default.createElement(_antd.DatePicker, {
+    style: {
+      width: "100%"
+    }
+    // disabledDate={(date) => {
+    //   return (
+    //     dayjs(date).format("YYYY-MM-DD") <
+    //     dayjs().format("YYYY-MM-DD")
+    //   );
+    // }}
+  })), /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+    label: "Team Ids",
+    name: "team_ids",
+    getValueFromEvent: e => {
+      return e ? e === null || e === void 0 ? void 0 : e.join(",") : "";
+    },
+    getValueProps: i => {
+      var _i$split;
+      return {
+        value: i && i !== "" ? typeof i === "string" ? (_i$split = i.split(",")) === null || _i$split === void 0 ? void 0 : _i$split.map(val => Number(val)) : i === null || i === void 0 ? void 0 : i.map(val => Number(val)) : []
+      };
+    }
+  }, /*#__PURE__*/_react.default.createElement(_antd.Select
+  // showSearch
+  , {
+    placeholder: "Team Ids",
+    mode: "multiple",
+    options: teams,
+    optionFilterProp: "key"
+  })), /*#__PURE__*/_react.default.createElement(_antd.Form.Item, null, /*#__PURE__*/_react.default.createElement(_antd.Button, {
+    block: true,
+    type: "primary",
+    htmlType: "submit",
+    loading: loading,
+    style: {
+      backgroundColor: styles === null || styles === void 0 ? void 0 : styles.primaryColor
+    }
+  }, id ? "Update" : "Upload"))));
+};
+var _default = UploadFile;
+exports.default = _default;

package/dist/ImagePicker/imagePicker.js

@@ -0,0 +1,141 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _antd = require("antd");
+var _imagePickerFiles = _interopRequireDefault(require("./imagePickerFiles"));
+var _react = _interopRequireWildcard(require("react"));
+require("./style.css");
+var APIS = _interopRequireWildcard(require("../constants/apiEndpoints"));
+var _useFetch = _interopRequireDefault(require("../hocs/useFetch"));
+var _defaultImg = _interopRequireDefault(require("../assets/images/default-img.svg"));
+function ImagePicker(_ref) {
+  let {
+    id,
+    teamIds,
+    damAccessKey,
+    secretKey,
+    subdomain,
+    styles,
+    onSelect,
+    url
+  } = _ref;
+  const [imagePickerUrl, setImagePickerUrl] = (0, _react.useState)(null);
+  const {
+    fetchApi
+  } = (0, _useFetch.default)();
+  const [image, setImage] = (0, _react.useState)({
+    name: ""
+  });
+  const [showImagePickerModal, setShowImagePickerModal] = (0, _react.useState)(false);
+  const [currentImagePicker, setCurrentImagePicker] = (0, _react.useState)({
+    name: ""
+  });
+  const [accessToken, setAccessToken] = (0, _react.useState)(null);
+  const [currentUser, setCurrentUser] = (0, _react.useState)({});
+  const [loading, setLoading] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    setImagePickerUrl(url);
+  }, [url]);
+  (0, _react.useEffect)(() => {
+    if (subdomain) {
+      setLoading(true);
+      fetchApi({
+        httpMethod: "post",
+        body: {
+          access_key: process.env.REACT_APP_DAM_ACCESS_KEY || damAccessKey,
+          secret_key: process.env.REACT_APP_DAM_SECRET_KEY || secretKey,
+          subdomain: process.env.REACT_APP_DAM_SUBDOMAIN || subdomain
+        },
+        route: APIS.GENERATE_TOKENS,
+        onSuccess: response => {
+          var _response$data, _response$data2;
+          setLoading(false);
+          const token = response === null || response === void 0 ? void 0 : (_response$data = response.data) === null || _response$data === void 0 ? void 0 : _response$data.access_token;
+          const user = response === null || response === void 0 ? void 0 : (_response$data2 = response.data) === null || _response$data2 === void 0 ? void 0 : _response$data2.user;
+          setAccessToken(token);
+          setCurrentUser(user);
+        },
+        onFailure: () => {
+          setLoading(false);
+          setAccessToken(null);
+          setCurrentUser({});
+        },
+        damAccessKey,
+        secretKey,
+        subdomain
+      });
+    }
+  }, [subdomain]);
+  (0, _react.useEffect)(() => {
+    if (id && accessToken) {
+      fetchApi({
+        httpMethod: "get",
+        route: APIS.FETCH_IMAGE_PICKER.replace(":id", id),
+        onSuccess: response => {
+          setImage(response === null || response === void 0 ? void 0 : response.data);
+        },
+        accessToken,
+        damAccessKey,
+        secretKey,
+        subdomain
+      });
+    }
+  }, [id, accessToken]);
+  const onImageSelect = (url, value) => {
+    setImagePickerUrl(url);
+    setShowImagePickerModal(false);
+    if (onSelect) {
+      onSelect(url, value);
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_antd.Row, {
+    className: "image-pickers"
+  }, loading ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "dam-loading"
+  }, /*#__PURE__*/_react.default.createElement(_antd.Spin, null)) : /*#__PURE__*/_react.default.createElement(_antd.Col, {
+    className: "image-picker-container"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "file-selection"
+  }, /*#__PURE__*/_react.default.createElement(_antd.Image, {
+    alt: "default-img",
+    src: imagePickerUrl,
+    fallback: _defaultImg.default,
+    width: "100%"
+    // height={200}
+  })), /*#__PURE__*/_react.default.createElement(_antd.Typography.Title, {
+    level: 5,
+    ellipsis: {
+      tooltip: true
+    }
+  }, image === null || image === void 0 ? void 0 : image.name), /*#__PURE__*/_react.default.createElement("div", {
+    className: "actions"
+  }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
+    type: "primary",
+    style: {
+      width: "100%",
+      marginTop: "5px",
+      backgroundColor: styles === null || styles === void 0 ? void 0 : styles.primaryColor
+    },
+    onClick: () => {
+      setShowImagePickerModal(true);
+      setCurrentImagePicker(image);
+    },
+    block: true
+  }, "Select")), showImagePickerModal && /*#__PURE__*/_react.default.createElement(_imagePickerFiles.default, {
+    setShowImagePickerModal: setShowImagePickerModal,
+    currentImagePicker: currentImagePicker,
+    onSelect: onImageSelect,
+    teamIds: teamIds,
+    damAccessKey: damAccessKey,
+    secretKey: secretKey,
+    subdomain: subdomain,
+    styles: styles
+  })));
+}
+var _default = ImagePicker;
+exports.default = _default;

package/dist/ImagePicker/imagePickerFiles.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _antd = require("antd");
+var _react = _interopRequireDefault(require("react"));
+var _fileManagementContainer = _interopRequireDefault(require("../Folders/fileManagementContainer"));
+const ImagePickerFiles = _ref => {
+  let {
+    currentImagePicker,
+    setShowImagePickerModal,
+    onSelect,
+    teamIds,
+    damAccessKey,
+    secretKey,
+    subdomain,
+    styles
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_antd.Modal, {
+    className: "image-picker-modal",
+    open: true,
+    footer: null,
+    width: 1200,
+    onCancel: () => setShowImagePickerModal(false)
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "image-picker-files"
+  }, /*#__PURE__*/_react.default.createElement(_fileManagementContainer.default, {
+    onSelect: onSelect,
+    isImagePicker: true,
+    currentImagePicker: currentImagePicker,
+    teamIds: teamIds,
+    damAccessKey: damAccessKey,
+    secretKey: secretKey,
+    subdomain: subdomain,
+    styles: styles
+  })));
+};
+var _default = ImagePickerFiles;
+exports.default = _default;