\r\n {\r\n showPlaceholder &&\r\n
\r\n }\r\n {\r\n !showPlaceholder &&\r\n
\r\n {\r\n !isLoading &&
\r\n }\r\n {\r\n isLoading ?
:\r\n
\r\n }\r\n
\r\n }\r\n
{ onKeyDown(event, index); }}\r\n style={{ width: '100%', height: '100%' }}\r\n data-is-focusable\r\n role=\"checkbox\"\r\n aria-checked={selected}\r\n tabIndex={-1}\r\n >\r\n \r\n {\r\n isSpinnerVisible &&\r\n
\r\n \r\n }\r\n {\r\n showUploadPreview ? (\r\n
\r\n \r\n ) : (\r\n
\r\n {isAssetLibraryAIGCMVPEnabled && showPromotionBanner && (\r\n \r\n )\r\n }\r\n
\r\n {subTitle ? (\r\n i18n.getString(subTitle)\r\n ) : (\r\n
\r\n {isAssetLibraryAIGCMVPEnabled\r\n ? i18n.getString(_TL_('You can create assets, choose assets you\\'ve already uploaded to '))\r\n : i18n.getString(_TL_('Choose assets you\\'ve already uploaded to '))}\r\n { onAssetLibraryLinkClick(isAdStudioEnabled); } : _.noop}\r\n >\r\n {isAdStudioEnabled ? i18n.getString(_TL_('Ads Studio')) : i18n.getString(_TL_('Asset Library'))}\r\n \r\n {i18n.getString(_TL_(' or browse to add a new file.'))}\r\n \r\n )}\r\n
\r\n
\r\n setSearchQuery(newValue)}\r\n onKeyDown={onKeyDown}\r\n placeholder={i18n.getString(_TL_('Search by Invest creative Id'))}\r\n styles={{\r\n root: {\r\n width: '50%',\r\n display: 'inline-block',\r\n },\r\n }}\r\n />\r\n {\r\n setSkip(0);\r\n loadImages({\r\n $skip: 0,\r\n });\r\n }}\r\n />\r\n
\r\n {\r\n isLoadingFirstPage ?
:\r\n
\r\n }\r\n
\r\n
\r\n setSearchQuery(newValue)}\r\n onKeyDown={onKeyDown}\r\n placeholder={i18n.getString(_TL_('Search stock images (provided by Shutterstock)'))}\r\n styles={{\r\n root: {\r\n width: '50%',\r\n display: 'inline-block',\r\n },\r\n }}\r\n />\r\n {\r\n setSkip(0);\r\n loadImages({\r\n $skip: 0,\r\n });\r\n }}\r\n />\r\n
\r\n
\r\n
\r\n
\r\n {i18n.getString(_TL_('The Shutterstock watermark appearing on the stock images below will not appear in your ad.'))}\r\n \r\n \r\n {i18n.getString(_TL_('There may be images provided by Shutterstock that do not adhere to the Microsoft image policy.'))}\r\n \r\n
\r\n
{i18n.getString(_TL_('Please enter your website’s URL. We’ll pull images from your website.'))}
\r\n
\r\n
\r\n {isInvalidUrl &&\r\n
\r\n {i18n.getString(_TL_('Please enter a valid Final URL to see images from your website.'))}\r\n
\r\n }\r\n
\r\n {\r\n showPlaceholder ?\r\n
: (\r\n
\r\n {showTextAbovePicker && (\r\n
\r\n {i18n.getString(_TL_('We found images from your Final URL:'))}\r\n
\r\n )}\r\n
\r\n
\r\n {'/'}\r\n
\r\n
\r\n
\r\n )\r\n }\r\n {\r\n !showPlaceholder && !isLoading && images.length === 0 &&\r\n
\r\n
\r\n
\r\n {i18n.getString(_TL_('No suggestion found from your site.'))}\r\n
\r\n
\r\n }\r\n {\r\n !showPlaceholder && (\r\n isLoadingFirstPage ?
:\r\n
\r\n )\r\n }\r\n
{ onKeyDown(event, index); }}\r\n data-is-focusable\r\n >\r\n \r\n
\r\n
onSelectImage(index)} item={item}>\r\n \r\n
\r\n \r\n
\r\n
{error} \r\n);\r\n\r\nconst PromptUserErrorString = withError(withCustomValidation((({ updateValidation, prompt, promptError }) => {\r\n useEffect(() => {\r\n if (promptError == null) {\r\n updateValidation([], prompt);\r\n } else {\r\n updateValidation([promptError], prompt);\r\n }\r\n }, [promptError, prompt, updateValidation]);\r\n\r\n return \r\n
\r\n
\r\n
{i18n.getString(_TL_('Brand detected: Image contains \"{{brandName}}\"'), { brandName })}
\r\n
{i18n.getString(_TL_('Note: Your request for the image may contain content that is subject to the intellectual property rights of third parties.'))}
\r\n
\r\n
\r\n
\r\n
\r\n
{\r\n setPrompt(newValue);\r\n }}\r\n onKeyDown={onKeyDown}\r\n componentRef={searchRef}\r\n />\r\n {isMain ? null : }\r\n ( \r\n {isLoading ? null : {remainingText} }\r\n
\r\n \r\n );\r\n};\r\n\r\nRemainingText.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n isLoading: PropTypes.bool.isRequired,\r\n classes: PropTypes.shape({\r\n remainingText: PropTypes.string,\r\n }).isRequired,\r\n};\r\n\r\nconst EntryView = ({\r\n i18n, onGenerateImage, state, prompt, setPrompt, classes, serverError,\r\n isValid, promptError, assetLibraryAccountPreferences,\r\n}) => {\r\n const description = i18n.getString(_TL_('Please describe the image you want to create, and Microsoft Advertising will generate multiple variations.\\nFor example, \"A family opening presents in front of a Christmas tree.\"'));\r\n const isCancelling = state.status === 'cancelling';\r\n const isLoading = state.status === 'loading';\r\n return (\r\n \r\n
\r\n
\r\n
\r\n {description} \r\n
\r\n
\r\n {!isEmpty(serverError) &&
}\r\n
\r\n
\r\n
\r\n
\r\n {!isEmpty(serverError) &&
}\r\n {!detectedBrandName && (\r\n <>\r\n
\r\n {isLoading ? (\r\n
\r\n
\r\n
( \r\n ) : (\r\n
\r\n {actionText} \r\n
\r\n )}\r\n
\r\n
\r\n
\r\n
\r\n {isLoading ? null : {i18n.getString(_TL_('Created with Microsoft Advertising'))} }\r\n
\r\n \r\n )}\r\n {detectedBrandName && (\r\n
onGenerateImage(true)}\r\n logger={logger}\r\n classes={classes}\r\n />\r\n )}\r\n \r\n {shouldShowEntryView({ state, images }) ?\r\n (\r\n
\r\n );\r\n};\r\n\r\nAssetLibraryAIGenerateImagesView.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n prompt: PropTypes.string,\r\n setPrompt: PropTypes.func.isRequired,\r\n state: PropTypes.shape({\r\n status: PropTypes.string,\r\n }).isRequired,\r\n serverError: PropTypes.string,\r\n cancel: PropTypes.func.isRequired,\r\n getImages: PropTypes.func.isRequired,\r\n images: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\r\n onSelectImage: PropTypes.func.isRequired,\r\n promptError: PropTypes.string,\r\n isValid: PropTypes.bool.isRequired,\r\n logger: PropTypes.shape({ logTrace: PropTypes.func }),\r\n assetLibraryAccountPreferences: PropTypes.shape({}),\r\n permissions: PropTypes.shape({\r\n IsAssetLibraryAIGCMVPSurveyEnabled: PropTypes.bool,\r\n }),\r\n detectedBrandName: PropTypes.string,\r\n setDetectedBrandName: PropTypes.func.isRequired,\r\n eventHandler: PropTypes.shape({\r\n onEnterGenerateImagesPanel: PropTypes.func,\r\n }),\r\n};\r\n\r\nAssetLibraryAIGenerateImagesView.defaultProps = {\r\n serverError: undefined,\r\n prompt: undefined,\r\n promptError: undefined,\r\n logger: undefined,\r\n assetLibraryAccountPreferences: null,\r\n permissions: {},\r\n detectedBrandName: null,\r\n eventHandler: null,\r\n};\r\n","import AIWarningIcon from './AIWarningIcon.png';\r\n\r\nexport const getAIGenerateImagesStyles = ({ imageWidth, gap, marginToSelector }) => (_, { palette = {} }) => ({\r\n '@global': {\r\n '@keyframes loading_indicator': {\r\n '0%': { backgroundPosition: '-50%' },\r\n '100%': { backgroundPosition: '150%' },\r\n },\r\n '@keyframes loading_placeholder': {\r\n '0%': { backgroundPosition: '87.5%' }, // The whole background is 800% and we use only the 0-7 range\r\n '100%': { backgroundPosition: '0%' },\r\n },\r\n },\r\n main: {\r\n marginTop: '24px',\r\n display: 'flex',\r\n flexDirection: 'column',\r\n alignItems: 'center',\r\n width: '606px',\r\n },\r\n entry: {\r\n marginTop: '22px',\r\n display: 'flex',\r\n flexDirection: 'column',\r\n alignItems: 'center',\r\n },\r\n searchBar: {\r\n },\r\n promptInput: {\r\n },\r\n remainingText: {\r\n '& span': {\r\n color: palette.neutralSecondary,\r\n },\r\n },\r\n actionBottomText: {\r\n width: '100%',\r\n '& span': {\r\n color: palette.neutralSecondary,\r\n },\r\n },\r\n header: {\r\n marginBottom: '16px',\r\n textAlign: 'center',\r\n width: '62%',\r\n },\r\n actionSection: {\r\n width: '100%',\r\n },\r\n actionText: {\r\n marginTop: '32px',\r\n marginBottom: '16px',\r\n },\r\n actionImages: {\r\n width: `${(imageWidth * 2)}px`,\r\n position: 'relative',\r\n },\r\n imageGridCellContainer: {\r\n width: '100%',\r\n height: '100%',\r\n borderRadius: '6px',\r\n },\r\n tilesGridCellContent: {\r\n position: 'absolute',\r\n left: 0,\r\n top: 0,\r\n right: 0,\r\n bottom: 0,\r\n display: 'flex',\r\n flexDirection: 'column',\r\n flexWrap: 'nowrap',\r\n padding: gap,\r\n boxSizing: 'border-box',\r\n borderRadius: '6px',\r\n },\r\n cellContent: {\r\n position: 'relative',\r\n flexGrow: 1,\r\n flexShrink: 1,\r\n '& .cell-image-frame': {\r\n overflow: 'hidden',\r\n borderRadius: '6px',\r\n margin: `${marginToSelector}px`,\r\n },\r\n '& .grid-cell-selection-decorator': {\r\n outlineWidth: '2px',\r\n },\r\n '& .selected-checkbox': {\r\n visibility: 'hidden',\r\n },\r\n },\r\n cellContentShadow: {\r\n filter: 'drop-shadow(0px 0.6px 1.8px rgba(0, 0, 0, 0.1)) drop-shadow(0px 3.2px 7.2px rgba(0, 0, 0, 0.13))',\r\n },\r\n selectedCellContent: {\r\n '& .selected-checkbox': {\r\n visibility: 'unset',\r\n right: '8px',\r\n '& .ms-Checkbox-checkbox': {\r\n border: 'none',\r\n outline: 'none',\r\n },\r\n },\r\n },\r\n loadingPlaceholder: {\r\n width: '100%',\r\n height: '100%',\r\n },\r\n loadingImage: {\r\n backgroundColor: '#EDEBE9',\r\n borderRadius: '6px',\r\n margin: `${marginToSelector}px`,\r\n position: 'absolute',\r\n top: 0,\r\n bottom: 0,\r\n left: 0,\r\n right: 0,\r\n },\r\n loadingImageAnimation: {\r\n backgroundSize: '800%',\r\n background: 'linear-gradient(to right, #EDEBE9 0%, #EDEBE9 12.5%, #F3F2F1 25%, #F3F2F1 87.5%, #EDEBE9 100%)',\r\n animation: 'loading_placeholder 3s linear infinite',\r\n },\r\n loadingSection: {\r\n '& .ms-Button': {\r\n marginTop: '8px',\r\n },\r\n textAlign: 'center',\r\n marginTop: '32px',\r\n marginBottom: '32px',\r\n },\r\n loadingIndicator: {\r\n width: '100%',\r\n borderRadius: '2px',\r\n height: '4px',\r\n background: 'linear-gradient(to right, rgba(0, 120, 212, 0) 0%, #213AD5 50%, rgba(0, 120, 212, 0) 100%)',\r\n backgroundSize: '33%',\r\n backgroundRepeat: 'no-repeat',\r\n animation: 'loading_indicator 3s linear infinite',\r\n backgroundColor: '#E6E6E6',\r\n },\r\n AIGenerateImages: {\r\n margin: '0 auto',\r\n '& .user-error': {\r\n width: '100%',\r\n },\r\n '& div[role=\"alert\"]': {\r\n textAlign: 'left',\r\n '& .error': {\r\n color: '#A80000',\r\n fontSize: '12px',\r\n lineHeight: '16px',\r\n },\r\n },\r\n '& $main': {\r\n '& $searchBar': {\r\n width: '100%',\r\n display: 'flex',\r\n '& $promptInput': {\r\n flexGrow: 1,\r\n marginRight: '12px',\r\n },\r\n },\r\n '& $remainingText': {\r\n width: '100%',\r\n marginTop: '8px',\r\n },\r\n },\r\n '& $entry': {\r\n '& $searchBar': {\r\n textAlign: 'center',\r\n '& $promptInput': {\r\n width: '435px',\r\n },\r\n '& .ms-Button': {\r\n marginTop: '16px',\r\n marginBottom: '16px',\r\n },\r\n },\r\n '& $remainingText': {\r\n width: '56%',\r\n textAlign: 'center',\r\n },\r\n },\r\n },\r\n imageCellLabelContainer: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n position: 'absolute',\r\n left: 12,\r\n bottom: 12,\r\n zIndex: 1,\r\n\r\n '& .created-with-ai-label': {\r\n display: 'flex',\r\n background: 'red',\r\n padding: 0,\r\n margin: 0,\r\n height: 24,\r\n backgroundColor: '#FFFFFFBB',\r\n\r\n '& .label-icon': {\r\n margin: 0,\r\n },\r\n },\r\n },\r\n\r\n brandDetectionConfirmationContainer: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'flex-start',\r\n alignItems: 'center',\r\n width: '100%',\r\n padding: [16, 24],\r\n marginTop: 32,\r\n gap: '16px',\r\n borderRadius: 4,\r\n border: '1px solid var(--neutrals-web-gray-40-e-1-dfdd, #E1DFDD)',\r\n background: '#FFF',\r\n\r\n '& .ai-warning-icon': {\r\n width: 128,\r\n height: 128,\r\n flexShrink: 0,\r\n backgroundImage: `url(\"${AIWarningIcon}\")`,\r\n backgroundSize: [128, 128],\r\n marginRight: 16,\r\n },\r\n\r\n '& .confirmation-content': {\r\n fontFamily: 'Segoe UI',\r\n fontStyle: 'normal',\r\n '& .confirmation-content-title': {\r\n color: '#000',\r\n fontSize: 18,\r\n fontWeight: 600,\r\n lineHeight: '24px',\r\n },\r\n '& .confirmation-content-text': {\r\n color: '#605E5C',\r\n fontSize: 14,\r\n fontWeight: 400,\r\n lineHeight: '20px',\r\n marginTop: 4,\r\n marginBottom: 12,\r\n },\r\n '& .confirmation-content-action': {\r\n display: 'flex',\r\n '& .confirmation-content-checkbox': {\r\n marginRight: 4,\r\n alignItems: 'flex-start',\r\n\r\n '& button': {\r\n marginTop: 4,\r\n },\r\n },\r\n },\r\n },\r\n },\r\n});\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Link } from '@bingads-webui-react/fabric-control';\r\nimport { Alert } from '@bingads-webui-react/alert';\r\nimport classNames from 'classnames';\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { ReactTemplate } from '@bingads-webui-react/react-template';\r\n\r\nexport const AIGCDisclaimer = (props) => {\r\n const {\r\n i18n,\r\n } = props;\r\n\r\n const classes = useDefaultStyles(() => ({\r\n AIGCDisclaimer: {\r\n marginBottom: '16px',\r\n },\r\n AIGCLink: {\r\n color: '#106ebe',\r\n },\r\n }));\r\n\r\n return (\r\n \r\n
(\r\n \r\n {`${text} `}\r\n \r\n ),\r\n }}\r\n template={\r\n i18n.getString(_TL_('Please ensure you review any newly created images carefully. It\\'s your responsibility to ensure that the images do not infringe upon any third-party rights, including copyright or other intellectual property rights. {{a}}Learn more{{/a}}'))\r\n }\r\n />\r\n }\r\n level=\"Info\"\r\n icon={(
)}\r\n dismissible={false}\r\n />\r\n \r\n {\r\n totalCount > 1 &&\r\n
\r\n }\r\n
{`${currentIndex + 1}/${totalCount}`}
\r\n {\r\n totalCount > 1 &&\r\n
\r\n }\r\n
\r\n
{title}
\r\n\r\n
\r\n {i18n.getString(_TL_('Delete'))}
\r\n \r\n\r\n { !disableEdit &&\r\n \r\n {editLabel}
\r\n \r\n }\r\n \r\n
{name}
\r\n
{value}
\r\n
\r\n \r\n {i18n.getString(_TL_('Copy URL'))}\r\n \r\n \r\n );\r\n};\r\n\r\nCopyUrlButton.propTypes = {\r\n onClick: PropTypes.func.isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n classes: PropTypes.shape({\r\n copyUrl: PropTypes.string,\r\n }).isRequired,\r\n};\r\n\r\nexport const InfoPaneItemCopyUrl = ({\r\n i18n,\r\n url,\r\n onCopy,\r\n}) => {\r\n const classes = useDefaultStyles(getInfoPaneItemCopyUrlStyle);\r\n\r\n return (\r\n \r\n
{i18n.getString(_TL_('URL:'))}
\r\n
{url}
\r\n
\r\n
\r\n
\r\n \r\n {text}\r\n
\r\n \r\n );\r\n};\r\n\r\nInfoPaneItemExternalLink.propTypes = {\r\n text: PropTypes.string.isRequired,\r\n onClick: PropTypes.func.isRequired,\r\n ariaLabel: PropTypes.string,\r\n className: PropTypes.string,\r\n};\r\n\r\nInfoPaneItemExternalLink.defaultProps = {\r\n ariaLabel: '',\r\n className: '',\r\n};\r\n","import { getSharedIconBoxStyle } from './shared-icon-box-style';\r\nimport { ellipsisText } from './shared-ellipsis-text-style';\r\n\r\nexport const getInfoPaneItemRenameStyle = (components, { palette = {}, iconFontFamily = 'MsAds MDL2 Assets' } = {}) => ({\r\n nameContentBox: {\r\n position: 'relative',\r\n },\r\n nameBox: {\r\n width: '100%',\r\n },\r\n editNameBox: {\r\n paddingBottom: '16px',\r\n },\r\n editWrapper: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n fontFamily: iconFontFamily,\r\n },\r\n editContent: {\r\n fontFamily: 'Segoe UI',\r\n fontWeight: 600,\r\n fontSize: 14,\r\n lineHeight: '19px',\r\n color: '#484644',\r\n marginRight: 16,\r\n wordBreak: 'break-all',\r\n ...ellipsisText(),\r\n },\r\n icon: {\r\n color: palette.themePrimary,\r\n fontSize: '16px',\r\n lineHeight: '16px',\r\n padding: 0,\r\n background: 'transparent',\r\n border: 'none',\r\n pointerEvents: 'auto',\r\n },\r\n editIcon: {\r\n '&:before': {\r\n content: '\"\\\\E70F\"',\r\n },\r\n },\r\n addNameBox: {\r\n ...getSharedIconBoxStyle({ palette }),\r\n width: 146,\r\n marginTop: 4,\r\n marginBottom: 16,\r\n },\r\n addIcon: {\r\n fontFamily: iconFontFamily,\r\n color: palette.themeDarkAlt,\r\n '&:before': {\r\n content: '\"\\\\E710\"',\r\n },\r\n },\r\n addText: {\r\n marginLeft: '8px',\r\n fontFamily: 'Segoe UI',\r\n fontWeight: 400,\r\n fontSize: 14,\r\n lineHeight: '20px',\r\n color: palette.themeDarkAlt,\r\n },\r\n textField: {\r\n width: 300,\r\n marginRight: 12,\r\n },\r\n completeIcon: {\r\n marginRight: 16,\r\n '&:before': {\r\n content: '\"\\\\E8FB\"',\r\n },\r\n },\r\n cancelIcon: {\r\n '&:before': {\r\n content: '\"\\\\E711\"',\r\n },\r\n },\r\n disabledIcon: {\r\n color: palette.neutralTertiary,\r\n },\r\n});\r\n","import React, { useState, useCallback, useEffect } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classnames from 'classnames';\r\nimport { keyCode } from '@bingads-webui/keycode';\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { TextField } from '@bingads-webui-react/fabric-control';\r\n\r\nimport { getInfoPaneItemRenameStyle } from './styles/info-pane-item-rename-style';\r\n\r\nconst spinnerStyle = ({\r\n position: 'absolute',\r\n top: 0,\r\n left: 0,\r\n width: '100%',\r\n height: '100%',\r\n});\r\n\r\nexport const InfoPaneItemRename = ({\r\n i18n,\r\n isReadonly,\r\n name,\r\n renameAsync,\r\n renderBlocker,\r\n promptInputLabel,\r\n inputPlaceholderText,\r\n}) => {\r\n const classes = useDefaultStyles(getInfoPaneItemRenameStyle);\r\n\r\n const [displayInputBox, setDisplayInputBox] = useState(false);\r\n const [inputName, setInputName] = useState('');\r\n const [showUiBlocker, setShowUiBlocker] = useState(false);\r\n\r\n useEffect(() => {\r\n setDisplayInputBox(false);\r\n setShowUiBlocker(false);\r\n setInputName(name);\r\n }, [name]);\r\n\r\n const handleRename = useCallback(() => {\r\n setShowUiBlocker(true);\r\n renameAsync(inputName).finally(() => {\r\n setShowUiBlocker(false);\r\n setDisplayInputBox(false);\r\n });\r\n }, [inputName, renameAsync]);\r\n\r\n const handleDisplayInputBox = useCallback(() => {\r\n setInputName(name || '');\r\n setDisplayInputBox(true);\r\n }, [name]);\r\n\r\n const handleCancel = useCallback(() => {\r\n setInputName('');\r\n setDisplayInputBox(false);\r\n }, []);\r\n\r\n const onEnterPress = useCallback((event) => {\r\n if (event && event.keyCode === keyCode.Enter && inputName !== name) {\r\n handleRename();\r\n }\r\n }, [handleRename, inputName, name]);\r\n\r\n const onBlur = useCallback((event) => {\r\n if (!event.relatedTarget || (\r\n !event.relatedTarget.classList.contains('complete-rename') && !event.relatedTarget.classList.contains(classes.editWrapper)\r\n )) {\r\n setDisplayInputBox(false);\r\n }\r\n }, [classes.editWrapper]);\r\n\r\n return (\r\n \r\n {\r\n name || displayInputBox ?\r\n
\r\n {\r\n displayInputBox ?\r\n
\r\n { setInputName(input); }}\r\n maxLength={512}\r\n autoFocus\r\n onKeyDown={onEnterPress}\r\n onBlur={onBlur}\r\n />\r\n
:\r\n
\r\n }\r\n
:\r\n
\r\n \r\n {promptInputLabel}\r\n
\r\n \r\n }\r\n {\r\n showUiBlocker && renderBlocker({ spinnerStyle })\r\n }\r\n \r\n
\r\n
\r\n {imageLoadState === ImageLoadState.notLoaded && showSpinner && (onCustomizedSpinner ?\r\n onCustomizedSpinner() : (
))\r\n }\r\n { imageLoadState === ImageLoadState.error && (\r\n
\r\n )}\r\n
\r\n
\r\n
\r\n
\r\n {\r\n (text || iconName) && (\r\n
\r\n {iconName &&
}\r\n {text &&
{text}
}\r\n
\r\n )\r\n }\r\n {secondaryText &&
{secondaryText}
}\r\n {\r\n additionaIconName && (\r\n
\r\n
\r\n
\r\n )\r\n }\r\n {\r\n additionalText && (\r\n
\r\n
{additionalText}
\r\n
\r\n )\r\n }\r\n
\r\n
\r\n {i18n.getString(_TL_('Video'))} \r\n
\r\n
\r\n {children}\r\n
\r\n );\r\n};\r\n\r\nTilesGridLoadingCell.propTypes = {\r\n onLoading: PropTypes.func,\r\n children: PropTypes.node,\r\n containerClass: PropTypes.string,\r\n};\r\n\r\nTilesGridLoadingCell.defaultProps = {\r\n onLoading: null,\r\n children: null,\r\n containerClass: undefined,\r\n};\r\n","const positionFill = {\r\n position: 'absolute',\r\n left: 0,\r\n top: 0,\r\n right: 0,\r\n bottom: 0,\r\n};\r\n\r\nexport const getCellOverlayStyle = () => ({\r\n cellOverlayContainer: {\r\n ...positionFill,\r\n display: 'flex',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n background: 'linear-gradient(180deg, rgba(49, 34, 34, 0.3) 0%, rgba(49, 34, 34, 0.8) 53.12%, #312222 100%)',\r\n opacity: 0,\r\n transition: 'opacity 0.2s ease-out',\r\n borderRadius: 6,\r\n },\r\n});\r\n","\r\nimport React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classnames from 'classnames';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\n\r\nimport { getCellOverlayStyle } from '../styles/tiles-grid-cell-overlay-style';\r\n\r\nconst CellOverlay = ({ children, classes }) => (\r\n \r\n {children}\r\n
\r\n);\r\n\r\nCellOverlay.propTypes = {\r\n children: PropTypes.node,\r\n classes: PropTypes.shape({\r\n cellOverlayContainer: PropTypes.string,\r\n }).isRequired,\r\n};\r\n\r\nCellOverlay.defaultProps = {\r\n children: null,\r\n};\r\n\r\nexport const TilesGridCellOverlay = withDefaultStyles(CellOverlay, getCellOverlayStyle);\r\n","const getCommonCellCardStyle = palette => ({\r\n position: 'relative',\r\n flexShrink: 1,\r\n flexGrow: 1,\r\n borderRadius: 6,\r\n backgroundColor: palette.neutralLight,\r\n filter: 'drop-shadow(0px 0.6px 1.8px rgba(0, 0, 0, 0.1)) drop-shadow(0px 3.2px 7.2px rgba(0, 0, 0, 0.13))',\r\n});\r\n\r\nexport const getCellCardStyle = (components, { palette = {} } = {}) => ({\r\n cellCardContainer: {\r\n ...getCommonCellCardStyle(palette),\r\n },\r\n});\r\n\r\nexport const getCellCardWithOverlayStyle = (components, { palette = {} } = {}) => {\r\n const activeStyle = {\r\n '& .cell-overlay': {\r\n opacity: 1,\r\n\r\n '& .cell-overlay-actions': {\r\n opacity: 1,\r\n transform: 'translate(0px, -10px)',\r\n },\r\n },\r\n '& .cell-decorative-label-container': {\r\n '& .label-secondary-text': {\r\n opacity: 1,\r\n transform: 'translate(10px, 0px)',\r\n },\r\n },\r\n };\r\n return {\r\n cellCardContainer: getCommonCellCardStyle(palette),\r\n\r\n cellCardContainerOverflow: {\r\n overflow: 'hidden',\r\n },\r\n\r\n cellCardWithOverlayContainer: {\r\n '& .cell-overlay-actions': {\r\n display: 'flex',\r\n flex: 1,\r\n flexDirection: 'row',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n height: '100%',\r\n position: 'relative',\r\n opacity: 0.2,\r\n top: 10,\r\n transition: 'opacity 0.5s 0.1s, transform 0.3s 0.1s',\r\n },\r\n\r\n '& .static-cell-overlay-items': {\r\n position: 'absolute',\r\n top: 0,\r\n left: 0,\r\n right: 0,\r\n button: 0,\r\n },\r\n\r\n '&:hover': activeStyle,\r\n },\r\n focused: activeStyle,\r\n };\r\n};\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classnames from 'classnames';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { keyCode } from '@bingads-webui/keycode';\r\n\r\nimport { TilesGridCellOverlay } from './tiles-grid-cell-overlay';\r\nimport {\r\n getCellCardStyle,\r\n getCellCardWithOverlayStyle,\r\n} from '../styles/tiles-grid-cell-card-style';\r\n\r\nconst CellCardWithOverlay = ({\r\n children,\r\n isOverlayEnabled,\r\n isCellFocused,\r\n renderOverlayContent,\r\n renderStaticOverlayContent,\r\n onClick,\r\n customCellCardClass,\r\n classes,\r\n}) => {\r\n const onClickFunc = (event) => {\r\n if (onClick) {\r\n onClick();\r\n }\r\n if (event.stopPropagation) { event.stopPropagation(); }\r\n if (event.preventDefault) { event.preventDefault(); }\r\n };\r\n\r\n const onKeyDown = (event) => {\r\n if (event.keyCode === keyCode.Enter) {\r\n onClickFunc();\r\n }\r\n };\r\n\r\n return (\r\n // eslint-disable-next-line jsx-a11y/no-static-element-interactions\r\n \r\n {children}\r\n {isOverlayEnabled && (\r\n \r\n \r\n {renderOverlayContent ? renderOverlayContent() : null}\r\n
\r\n { renderStaticOverlayContent ?\r\n \r\n {renderStaticOverlayContent()}\r\n
\r\n : null}\r\n \r\n )}\r\n \r\n );\r\n};\r\n\r\nCellCardWithOverlay.propTypes = {\r\n children: PropTypes.node.isRequired,\r\n renderOverlayContent: PropTypes.func,\r\n renderStaticOverlayContent: PropTypes.func,\r\n isOverlayEnabled: PropTypes.bool,\r\n isCellFocused: PropTypes.bool,\r\n onClick: PropTypes.func,\r\n customCellCardClass: PropTypes.string,\r\n classes: PropTypes.shape({\r\n containerClass: PropTypes.string,\r\n cellCardContainer: PropTypes.string,\r\n cellCardWithOverlayContainer: PropTypes.string,\r\n cellCardContainerOverflow: PropTypes.string,\r\n focused: PropTypes.string,\r\n }).isRequired,\r\n};\r\n\r\nCellCardWithOverlay.defaultProps = {\r\n isOverlayEnabled: true,\r\n isCellFocused: false,\r\n renderOverlayContent: null,\r\n renderStaticOverlayContent: null,\r\n customCellCardClass: undefined,\r\n onClick: undefined,\r\n};\r\n\r\nconst CellCard = ({ children, classes, customCellCardClass }) => (\r\n \r\n {children}\r\n
\r\n);\r\n\r\nCellCard.propTypes = {\r\n children: PropTypes.node.isRequired,\r\n customCellCardClass: PropTypes.string,\r\n classes: PropTypes.shape({\r\n containerClass: PropTypes.string,\r\n cellCardContainer: PropTypes.string,\r\n }).isRequired,\r\n};\r\n\r\nCellCard.defaultProps = {\r\n customCellCardClass: undefined,\r\n};\r\n\r\nexport const TilesGridCellCard = withDefaultStyles(CellCard, getCellCardStyle);\r\nexport const TilesGridCellCardWithOverlay = withDefaultStyles(CellCardWithOverlay, getCellCardWithOverlayStyle);\r\n","import { DEFAULT_PAGE_SIZE } from '@bingads-webui-campaign-react/asset-library-model';\r\n\r\nconst ROW_HEIGHT = 275;\r\nconst MAX_COLUMN_WIDTH = 350;\r\nconst MIN_COLUMN_WIDTH = 250;\r\nconst DEFAULT_ASPECT_RATIO = 0.9;\r\n\r\nexport const DEFAULT_CONFIG = {\r\n // if this value is set, rowHeight vallue is ignored, and\r\n // the row height is calculated by columnWidth * aspectRatio\r\n aspectRatio: DEFAULT_ASPECT_RATIO,\r\n maxColumnWidth: MAX_COLUMN_WIDTH,\r\n minColumnWidth: MIN_COLUMN_WIDTH,\r\n rowHeight: ROW_HEIGHT,\r\n preferredCellsPerPage: DEFAULT_PAGE_SIZE,\r\n};\r\n","/* eslint-disable max-len */\r\nimport _ from 'underscore';\r\nimport classnames from 'classnames';\r\nimport React, { useCallback, useMemo, useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { List, FocusZone } from '@bingads-webui-react/fabric-control';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\n\r\nimport { AssetLibrarySpinner } from '@bingads-webui-campaign-react/asset-library-spinner';\r\n\r\nimport { TilesGridLoadingCell } from './grid-cells/tiles-grid-loading-cell';\r\nimport { getTilesGridStyle } from './styles/tiles-grid-style';\r\nimport { DEFAULT_CONFIG } from './default-grid-config';\r\n\r\n// export to do UT\r\nexport function calcColumnWidth(surfaceWidth, maxColumnWidth, minColumnWidth) {\r\n const colCntOfMaxWidth = Math.ceil(surfaceWidth / maxColumnWidth);\r\n const colCntOfMinWidth = Math.floor(surfaceWidth / minColumnWidth);\r\n let columnCount = Math.min(colCntOfMaxWidth, colCntOfMinWidth) || 1;\r\n let columnWidth = Math.floor(surfaceWidth / columnCount);\r\n columnWidth = Math.min(Math.max(minColumnWidth, columnWidth), maxColumnWidth);\r\n columnCount = Math.floor(surfaceWidth / columnWidth) || 1;\r\n return [columnWidth, columnCount];\r\n}\r\n\r\nconst LOADING_CELL = {};\r\nconst FIRST_LOADING_CELL = {};\r\n\r\nconst TilesGridInternal = ({\r\n items,\r\n itemKey,\r\n totalItemCount,\r\n onRenderCell,\r\n onRenderLoadingCell,\r\n loadNextPage,\r\n config,\r\n classes,\r\n dimensions,\r\n setDimensions,\r\n gridSize,\r\n version,\r\n ariaLabel,\r\n}) => {\r\n // use dimensions to force grid updates by deafult\r\n const gridVersion = version || dimensions;\r\n\r\n const getItemCountForPage = useCallback((itemIndex, surfaceRect) => {\r\n let cc = dimensions.colCount;\r\n // avoid shaking caused by vertical scroll bar\r\n const surfaceWidthChanges = Math.abs((dimensions.surfaceWidth || 0) - surfaceRect.width);\r\n if (itemIndex === 0 && surfaceWidthChanges > 20) {\r\n // respect to min & max column width\r\n const [colWidth, colCount] = calcColumnWidth(surfaceRect.width, config.maxColumnWidth, config.minColumnWidth);\r\n setDimensions((cur) => {\r\n if (colWidth !== cur.colWidth || colCount !== cur.colCount || surfaceRect.width !== cur.surfaceWidth) {\r\n return { colWidth, colCount, surfaceWidth: surfaceRect.width };\r\n }\r\n return cur;\r\n });\r\n cc = colCount;\r\n }\r\n const rowsPerPage = Math.ceil(config.preferredCellsPerPage / cc);\r\n return rowsPerPage * cc;\r\n }, [dimensions, config, setDimensions]);\r\n\r\n const getPageHeight = useCallback(() => {\r\n const rowsPerPage = Math.ceil(config.preferredCellsPerPage / dimensions.colCount);\r\n return rowsPerPage * gridSize.rowHeight;\r\n }, [config.preferredCellsPerPage, dimensions.colCount, gridSize.rowHeight]);\r\n\r\n // insert a clearfix for each page\r\n const getPageStyle = useCallback(() => ({ overflow: 'auto' }), []);\r\n\r\n const onLoadingNextPage = useCallback(() => {\r\n if (loadNextPage) {\r\n loadNextPage();\r\n }\r\n }, [loadNextPage]);\r\n\r\n const onRenderCellImpl = useCallback((item, index) => {\r\n let cell = null;\r\n if (item === FIRST_LOADING_CELL) {\r\n if (onRenderLoadingCell) {\r\n cell = onRenderLoadingCell({ item, index, onLoading: onLoadingNextPage });\r\n } else {\r\n cell = (\r\n {cell}\r\n
\r\n );\r\n }, [onLoadingNextPage, onRenderCell, onRenderLoadingCell]);\r\n\r\n const allItems = useMemo(() => {\r\n if (items && items.length < totalItemCount) {\r\n const rowsPerPage = Math.ceil(config.preferredCellsPerPage / dimensions.colCount);\r\n const preferredCellsPerPage = rowsPerPage * dimensions.colCount;\r\n const paddingCount = Math.min(totalItemCount - items.length, preferredCellsPerPage);\r\n if (paddingCount > 1) {\r\n return [\r\n ...items,\r\n FIRST_LOADING_CELL,\r\n ...Array(paddingCount - 1).fill(LOADING_CELL),\r\n ];\r\n }\r\n return [...items, FIRST_LOADING_CELL];\r\n }\r\n return items;\r\n }, [config, dimensions.colCount, items, totalItemCount]);\r\n\r\n const getItemKey = useCallback(item => item[itemKey], [itemKey]);\r\n\r\n // override this method to set width/height on the cell container\r\n // almost same as the original implementation here: https://github.com/microsoft/fluentui/blob/master/packages/react/src/components/List/List.tsx#L600\r\n const onRenderPage = useCallback((pageProps) => {\r\n const {\r\n page: { items: gridItems = [], startIndex },\r\n ...divProps\r\n } = pageProps;\r\n\r\n const cells = [];\r\n\r\n for (let i = 0; i < gridItems.length; i += 1) {\r\n const index = startIndex + i;\r\n const item = gridItems[i];\r\n const cellKey = getItemKey(item, index) || (item && item.key) || index;\r\n const cell = onRenderCellImpl(item, index);\r\n if (cell) {\r\n const cellWithContainer = (\r\n \r\n {cell}\r\n \r\n );\r\n cells.push(cellWithContainer);\r\n }\r\n }\r\n return {cells}
;\r\n }, [getItemKey, gridSize.colWidth, gridSize.rowHeight, onRenderCellImpl]);\r\n\r\n\r\n return (\r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nTilesGridInternal.propTypes = {\r\n itemKey: PropTypes.string.isRequired,\r\n items: PropTypes.arrayOf(PropTypes.shape({})),\r\n totalItemCount: PropTypes.number, // total item count, including not loaded items\r\n loadNextPage: PropTypes.func,\r\n onRenderCell: PropTypes.func.isRequired,\r\n onRenderLoadingCell: PropTypes.func,\r\n config: PropTypes.shape({\r\n aspectRatio: PropTypes.number,\r\n maxColumnWidth: PropTypes.number,\r\n minColumnWidth: PropTypes.number,\r\n rowHeight: PropTypes.number,\r\n preferredCellsPerPage: PropTypes.number,\r\n }),\r\n dimensions: PropTypes.shape({\r\n colCount: PropTypes.number,\r\n colWidth: PropTypes.number,\r\n surfaceWidth: PropTypes.number,\r\n }).isRequired,\r\n setDimensions: PropTypes.func.isRequired,\r\n gridSize: PropTypes.shape({\r\n colWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\r\n rowHeight: PropTypes.number,\r\n }).isRequired,\r\n version: PropTypes.shape({}),\r\n\r\n // injected styles\r\n classes: PropTypes.shape({\r\n tilesGridContainer: PropTypes.string,\r\n }).isRequired,\r\n ariaLabel: PropTypes.string,\r\n};\r\n\r\nTilesGridInternal.defaultProps = {\r\n items: [],\r\n totalItemCount: 0,\r\n loadNextPage: null,\r\n onRenderLoadingCell: null,\r\n config: DEFAULT_CONFIG,\r\n version: undefined,\r\n ariaLabel: '',\r\n};\r\n\r\nexport const TilesGridStateless = withDefaultStyles(TilesGridInternal, getTilesGridStyle);\r\n\r\nexport const TilesGrid = ({ items, config, ...rest }) => {\r\n const [dimensions, setDimensions] = useState({\r\n colCount: 1,\r\n colWidth: config.maxColumnWidth,\r\n surfaceWidth: 0,\r\n });\r\n\r\n const gridSize = useMemo(() => {\r\n let finalColWidth;\r\n let rowHeight;\r\n if (!_.isEmpty(items) && items.length < dimensions.colCount) {\r\n // use max width if items are not enough to fill a row\r\n finalColWidth = config.maxColumnWidth;\r\n rowHeight = config.aspectRatio ? config.maxColumnWidth * config.aspectRatio : config.rowHeight;\r\n } else {\r\n finalColWidth = dimensions.surfaceWidth > 0 ? `${100 * (dimensions.colWidth / dimensions.surfaceWidth)}%` : dimensions.colWidth;\r\n rowHeight = config.aspectRatio ? dimensions.colWidth * config.aspectRatio : config.rowHeight;\r\n }\r\n return { colWidth: finalColWidth, rowHeight };\r\n }, [config, dimensions, items]);\r\n\r\n return (\r\n {wrappedSectionData.map(({\r\n sectionName,\r\n sectionTitle,\r\n sectionClassName,\r\n items,\r\n gridSize,\r\n ...rest\r\n }) => (\r\n (items && items.length > 0) ?\r\n
\r\n {countOfSectionsWithData > 1 ? {sectionTitle}
: null}\r\n 1 ? sectionTitle : ''}\r\n dimensions={dimensions}\r\n setDimensions={setDimensions}\r\n gridSize={gridSize}\r\n version={gridSize}\r\n />\r\n \r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nCellDeletionButtonDecorator.propTypes = {\r\n item: PropTypes.shape({}).isRequired,\r\n onDelete: PropTypes.func,\r\n children: PropTypes.node.isRequired,\r\n classes: PropTypes.shape({\r\n cellDeletionButtonDecorator: PropTypes.string,\r\n }).isRequired,\r\n styles: PropTypes.shape({\r\n deleteButtonStyles: PropTypes.shape({}).isRequired,\r\n }).isRequired,\r\n};\r\n\r\nCellDeletionButtonDecorator.defaultProps = {\r\n onDelete: undefined,\r\n};\r\n\r\nexport const TilesGridCellDeletionButtonDecorator = withDefaultStyles(\r\n withRawStyles(CellDeletionButtonDecorator, getFluentUIStyles),\r\n getCellDeletionButtonDecoratorStyle\r\n);\r\n","export const getCellDeletionButtonDecoratorStyle = () => ({\r\n cellDeletionButtonDecorator: {\r\n position: 'absolute',\r\n bottom: 8,\r\n right: 10,\r\n },\r\n});\r\n\r\nexport const getFluentUIStyles = (components, { palette = {} } = {}) => ({\r\n deleteButtonStyles: {\r\n root: {\r\n backgroundColor: palette.themeLighter,\r\n opacity: 0.7,\r\n zIndex: 2,\r\n padding: 0,\r\n height: 24,\r\n width: 24,\r\n },\r\n rootHovered: {\r\n opacity: 0.9,\r\n },\r\n rootPressed: {\r\n opacity: 1,\r\n },\r\n icon: {\r\n margin: 0,\r\n },\r\n },\r\n});\r\n","import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Dropdown, Icon, ResponsiveMode } from '@bingads-webui-react/fabric-control';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\n\r\nimport { getCustomDropdownStyle } from './style';\r\n\r\n// The current dropdown we use will have an fault aria-activeDescendant prop which will lead to an A11y issue\r\n// If the selected items is not an array\r\nconst dummyOptionKeys = ['foo', 'foo2'];\r\nconst dummyOptions = [\r\n { key: 'foo', text: null },\r\n { key: 'foo2', text: null },\r\n];\r\n\r\n// eslint-disable-next-line react/prop-types\r\nconst CustomDropdownList = ({ setOpen, onKeyDown, children }) => {\r\n //\r\n useEffect(() => {\r\n setOpen(true);\r\n return () => setOpen(false);\r\n }, [setOpen]);\r\n\r\n return (\r\n \r\n {children}\r\n
\r\n );\r\n};\r\n\r\n// customized FluentUI Dropdown control, to replace the default\r\n// dropdown list with provided content (children)\r\nconst CustomDropdownInternal = ({\r\n placeholder,\r\n title,\r\n children, // the content of dropdown list\r\n onClear, // callback when clicking on X button in the title\r\n onDismiss, // callback when the dropdonw list is dismissed\r\n dropdownWidth,\r\n focused, // focus the dropdown when it's mounted\r\n //\r\n classes,\r\n}) => {\r\n //\r\n const [isDropdownOpen, setDropdownOpen] = useState(false);\r\n\r\n const hasTitle = useMemo(() => !!title, [title]);\r\n\r\n const clearValue = useCallback((evt) => {\r\n if (onClear) { onClear(isDropdownOpen); }\r\n if (evt && evt.stopPropagation) { evt.stopPropagation(); }\r\n }, [isDropdownOpen, onClear]);\r\n\r\n const onRenderCaretDown = useCallback((props, defaultOnRenderCaretDown) => {\r\n if (!hasTitle) {\r\n return defaultOnRenderCaretDown(props);\r\n }\r\n return (\r\n \r\n {children}\r\n \r\n );\r\n }, [children]);\r\n\r\n const getDropdownStyles = useCallback((dropdownStyleProps) => {\r\n const { isOpen, theme } = dropdownStyleProps || {};\r\n const { palette } = theme || {};\r\n if (hasTitle) {\r\n return {\r\n title: {\r\n fontWeight: 600,\r\n backgroundColor: isOpen ? palette.themeLighterAlt : palette.white,\r\n borderColor: palette.themePrimary,\r\n color: isOpen ? palette.themeDark : palette.themePrimary,\r\n },\r\n dropdown: {\r\n '&:focus .ms-Dropdown-title, &:hover .ms-Dropdown-title, &:active .ms-Dropdown-title': {\r\n borderColor: palette.themePrimary,\r\n color: `${isOpen ? palette.themeDark : palette.themePrimary} !important`,\r\n },\r\n },\r\n };\r\n }\r\n return {\r\n title: {\r\n backgroundColor: isOpen ? palette.neutralLighter : palette.white,\r\n },\r\n };\r\n }, [hasTitle]);\r\n\r\n const onDropdownDismiss = useCallback(() => {\r\n if (onDismiss) {\r\n onDismiss();\r\n }\r\n }, [onDismiss]);\r\n\r\n const dropdownRef = useRef(null);\r\n useEffect(() => {\r\n if (focused) {\r\n dropdownRef.current.focus(true);\r\n }\r\n }, [focused]);\r\n\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nCustomDropdownInternal.propTypes = {\r\n placeholder: PropTypes.string.isRequired,\r\n title: PropTypes.string,\r\n children: PropTypes.node.isRequired,\r\n onClear: PropTypes.func,\r\n onDismiss: PropTypes.func,\r\n dropdownWidth: PropTypes.oneOfType([\r\n PropTypes.string,\r\n PropTypes.number,\r\n ]),\r\n focused: PropTypes.bool,\r\n //\r\n classes: PropTypes.shape({\r\n customDropdownContainer: PropTypes.string,\r\n }).isRequired,\r\n};\r\n\r\nCustomDropdownInternal.defaultProps = {\r\n title: null,\r\n onClear: null,\r\n onDismiss: null,\r\n dropdownWidth: 0,\r\n focused: false,\r\n};\r\n\r\nexport const CustomDropdown\r\n = withDefaultStyles(CustomDropdownInternal, getCustomDropdownStyle);\r\n","export const getCustomDropdownStyle = (components, { palette = {} } = {}) => ({\r\n customDropdownContainer: {\r\n position: 'relative',\r\n\r\n '& .custom-dropdown-caretdown-selected': {\r\n fontSize: 12,\r\n pointerEvent: 'none',\r\n color: palette.themeDark,\r\n },\r\n },\r\n});\r\n","import _ from 'underscore';\r\nimport React, { useCallback, useMemo, useState, useRef } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { TextField } from '@bingads-webui-react/fabric-control';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\n\r\nimport { CustomDropdown } from '../custom-dropdown-component';\r\nimport { getImageSizeFilterStyle } from './style';\r\n\r\nconst ImageSizeFilterInternal = ({\r\n defaultMinWidth,\r\n defaultMinHeight,\r\n dropdownWidth,\r\n onChange,\r\n onDismiss,\r\n focused,\r\n i18n,\r\n classes,\r\n}) => {\r\n // use ref to handle focus switching when pressing tab key\r\n const minWidthRef = useRef(null);\r\n const minHeightRef = useRef(null);\r\n\r\n const [minWidth, setMinWidth] = useState(defaultMinWidth);\r\n const [minHeight, setMinHeight] = useState(defaultMinHeight);\r\n\r\n const getOnChangeCallback = useCallback(setter => (event, newValue) => {\r\n const val = parseInt(newValue, 10);\r\n if (_.isEmpty(newValue)) {\r\n setter(null);\r\n return;\r\n }\r\n if (!_.isNaN(val) && val >= 0 && val <= 1000000) {\r\n setter(val);\r\n }\r\n }, []);\r\n\r\n const onMinWidthChange = useMemo(\r\n () => getOnChangeCallback(setMinWidth),\r\n [getOnChangeCallback]\r\n );\r\n\r\n const onMinHeightChange = useMemo(\r\n () => getOnChangeCallback(setMinHeight),\r\n [getOnChangeCallback]\r\n );\r\n\r\n const onClear = useCallback((isDropdownOpen) => {\r\n setMinWidth(null);\r\n setMinHeight(null);\r\n if (!isDropdownOpen && (defaultMinHeight || defaultMinWidth)) {\r\n // trigger onchange only when dropdown list is closed\r\n onChange({ newMinHeight: null, newMinWidth: null });\r\n }\r\n if (minWidthRef.current) {\r\n minWidthRef.current.focus();\r\n }\r\n }, [defaultMinHeight, defaultMinWidth, onChange]);\r\n\r\n const title = useMemo(() => {\r\n if (minWidth && minHeight) {\r\n return `> ${minWidth}px x ${minHeight}px`;\r\n }\r\n if (minWidth) {\r\n return `${i18n.getString(_TL_('Width'))} > ${minWidth}px`;\r\n }\r\n if (minHeight) {\r\n return `${i18n.getString(_TL_('Height'))} > ${minHeight}px`;\r\n }\r\n return '';\r\n }, [i18n, minHeight, minWidth]);\r\n\r\n const focusTextField = useCallback(textFieldRef => (event) => {\r\n if (event.key === 'Tab') {\r\n if (textFieldRef.current) {\r\n textFieldRef.current.focus();\r\n }\r\n if (event.stopPropagation) { event.stopPropagation(); }\r\n if (event.preventDefault) { event.preventDefault(); }\r\n }\r\n }, []);\r\n\r\n const onMinWidthKeyUp = useMemo(() => focusTextField(minHeightRef), [focusTextField]);\r\n const onMinHeightKeyUp = useMemo(() => focusTextField(minWidthRef), [focusTextField]);\r\n\r\n const onDropdownDismiss = useCallback(() => {\r\n if (defaultMinHeight !== minHeight || defaultMinWidth !== minWidth) {\r\n onChange({ newMinWidth: minWidth, newMinHeight: minHeight }, title);\r\n }\r\n if (onDismiss) {\r\n onDismiss({ newMinWidth: minWidth, newMinHeight: minHeight }, title);\r\n }\r\n }, [defaultMinHeight, defaultMinWidth, minHeight, minWidth, onChange, onDismiss, title]);\r\n\r\n return (\r\n \r\n \r\n
{i18n.getString(_TL_('Image size'))}
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n
{i18n.getString(_TL_('Date added'))}
\r\n
\r\n {timeframe === CSMLTimeFrame.Custom && (\r\n
\r\n \r\n
\r\n )}\r\n
\r\n {\r\n textFragments.map(({ matched, text, idx }) =>\r\n {text} )\r\n }\r\n \r\n );\r\n\r\n return enableTooltip ? (\r\n \r\n {content}\r\n \r\n ) : content;\r\n};\r\n\r\nTextWithHighlight.propTypes = {\r\n text: PropTypes.string,\r\n highlightedText: PropTypes.string,\r\n highlightedClassname: PropTypes.string,\r\n enableTooltip: PropTypes.bool,\r\n};\r\n\r\nTextWithHighlight.defaultProps = {\r\n text: '',\r\n highlightedText: undefined,\r\n highlightedClassname: 'highlighted-text',\r\n enableTooltip: false,\r\n};\r\n","export const getImportSourceFilterStyle = () => ({\r\n importSourceFilterDowndown: {\r\n padding: 24,\r\n pointerEvents: 'auto',\r\n\r\n '& .dropdown-title': {\r\n fontSize: 20,\r\n fontWeight: 600,\r\n lineHeight: '20px',\r\n },\r\n\r\n '& .dropdown-import-source-choices label': {\r\n fontSize: 14,\r\n fontWeight: 400,\r\n padding: 0,\r\n marginTop: 8,\r\n },\r\n },\r\n});\r\n","import _ from 'underscore';\r\nimport React, { useCallback, useMemo, useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { ChoiceGroup } from '@bingads-webui-react/fabric-control';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\n\r\nimport { CustomDropdown } from '../custom-dropdown-component';\r\nimport { getImportSourceFilterStyle } from './style';\r\n\r\nconst ImportSourceFilterInternal = ({\r\n defaultImportSource,\r\n choiceOptions,\r\n dropdownWidth,\r\n onChange,\r\n onDismiss,\r\n focused,\r\n i18n,\r\n classes,\r\n}) => {\r\n //\r\n const [importSource, setImportSource] = useState(defaultImportSource);\r\n\r\n // choice group handling\r\n const selectedChoice = useMemo(\r\n () => _.find(choiceOptions, r => r.key === importSource),\r\n [importSource, choiceOptions]\r\n );\r\n\r\n const onChoiceChange = useCallback((evt, option) => {\r\n if (option && option.key) {\r\n setImportSource(option.key);\r\n }\r\n }, []);\r\n\r\n // the string shown on dropdown title\r\n const dropdownTitle = selectedChoice ? selectedChoice.title : null;\r\n\r\n // when the X button on dropdown title is clicked\r\n const onDropdownClear = useCallback((isDropdownOpen) => {\r\n setImportSource(null);\r\n if (!isDropdownOpen && onChange && defaultImportSource !== null) {\r\n onChange(null);\r\n }\r\n }, [defaultImportSource, onChange]);\r\n\r\n // when dropdown list is dismissed\r\n const onDropdownDismiss = useCallback(() => {\r\n if (onChange && defaultImportSource !== importSource) {\r\n onChange(importSource, dropdownTitle);\r\n }\r\n if (onDismiss) {\r\n onDismiss(importSource, dropdownTitle);\r\n }\r\n }, [defaultImportSource, dropdownTitle, importSource, onChange, onDismiss]);\r\n\r\n return (\r\n \r\n \r\n
{i18n.getString(_TL_('Import source'))}
\r\n
\r\n
\r\n \r\n
{i18n.getString(_TL_('Asset type'))}
\r\n
\r\n
\r\n
\r\n
\r\n { thumbnailImageUrl &&
\r\n
didn't support the stream play directly, so will using one link in DownloadUrl instead of the url as src.\r\nexport const VideoPlaybackView = (props) => {\r\n const {\r\n height,\r\n width,\r\n src,\r\n thumbnailUrl,\r\n hideControls,\r\n onLoadedMetadata,\r\n onErrorHanler,\r\n } = props;\r\n\r\n const classes = useDefaultStyles(getVideoPlaybackStyle);\r\n const useDynamicVideoSize = !(width > 0 || height > 0);\r\n\r\n const onError = useCallback((ev) => {\r\n const errorCode = ev && ev.target && ev.target.error.code;\r\n onErrorHanler(errorCode);\r\n }, [onErrorHanler]);\r\n\r\n return (\r\n \r\n
);\r\n};\r\n\r\nVideoPlaybackView.propTypes = {\r\n src: PropTypes.string.isRequired,\r\n thumbnailUrl: PropTypes.string,\r\n hideControls: PropTypes.bool,\r\n height: PropTypes.number,\r\n width: PropTypes.number,\r\n onErrorHanler: PropTypes.func,\r\n onLoadedMetadata: PropTypes.func,\r\n};\r\n\r\nVideoPlaybackView.defaultProps = {\r\n thumbnailUrl: null,\r\n hideControls: false,\r\n width: undefined,\r\n height: undefined,\r\n onErrorHanler: _.noop,\r\n onLoadedMetadata: _.noop,\r\n};\r\n","export const getVideoDurationFilterStyle = () => ({\r\n videoDurationFilterDowndown: {\r\n padding: 24,\r\n pointerEvents: 'auto',\r\n },\r\n\r\n dropdownTitle: {\r\n fontSize: 20,\r\n fontWeight: 600,\r\n lineHeight: '20px',\r\n },\r\n\r\n dropdownValueInput: {\r\n marginTop: 21,\r\n },\r\n});\r\n","import _ from 'underscore';\r\nimport React, { useCallback, useMemo, useState, useRef } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { TextField } from '@bingads-webui-react/fabric-control';\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\n\r\nimport { CustomDropdown } from '../custom-dropdown-component';\r\nimport { getVideoDurationFilterStyle } from './style';\r\n\r\nexport const VideoDurationFilter = ({\r\n defaultMinDuration,\r\n defaultMaxDuration,\r\n dropdownWidth,\r\n onChange,\r\n onDismiss,\r\n focused,\r\n i18n,\r\n}) => {\r\n // use ref to handle focus switching when pressing tab key\r\n const minDurationRef = useRef(null);\r\n const maxDurationRef = useRef(null);\r\n\r\n const classes = useDefaultStyles(getVideoDurationFilterStyle);\r\n\r\n const [minDuration, setMinDuration] = useState(defaultMinDuration);\r\n const [maxDuration, setMaxDuration] = useState(defaultMaxDuration);\r\n\r\n const [minDurationInvalid, setMinDurationInvalid] = useState(false);\r\n const [maxDurationInvalid, setMaxDurationInvalid] = useState(false);\r\n\r\n const onChangeCallback = useCallback((setter, newValue) => {\r\n const val = parseInt(newValue, 10);\r\n if (_.isEmpty(newValue)) {\r\n setter(null);\r\n return;\r\n }\r\n if (!_.isNaN(val) && val >= 0 && val <= 1000000) {\r\n setter(val);\r\n }\r\n }, []);\r\n\r\n const onMinDurationChange = useCallback((event, newValue) => {\r\n onChangeCallback(setMinDuration, newValue);\r\n if (_.isEmpty(newValue) || maxDuration > newValue) {\r\n setMinDurationInvalid(false);\r\n setMaxDurationInvalid(false);\r\n } else if ((maxDuration && newValue >= maxDuration)) {\r\n setMinDurationInvalid(true);\r\n } else {\r\n setMinDurationInvalid(false);\r\n }\r\n }, [maxDuration, onChangeCallback]);\r\n\r\n const onMaxDurationChange = useCallback((event, newValue) => {\r\n onChangeCallback(setMaxDuration, newValue);\r\n if (_.isEmpty(newValue) || newValue > minDuration) {\r\n setMinDurationInvalid(false);\r\n setMaxDurationInvalid(false);\r\n } else if (newValue <= minDuration) {\r\n setMaxDurationInvalid(true);\r\n } else {\r\n setMaxDurationInvalid(false);\r\n }\r\n }, [onChangeCallback, minDuration]);\r\n\r\n const onClear = useCallback((isDropdownOpen) => {\r\n setMinDuration(null);\r\n setMaxDuration(null);\r\n if (!isDropdownOpen && (defaultMinDuration || defaultMaxDuration)) {\r\n // trigger onchange only when dropdown list is closed\r\n onChange({ newMinDuration: null, newMaxDuration: null });\r\n }\r\n if (minDurationRef.current) {\r\n minDurationRef.current.focus();\r\n }\r\n }, [defaultMinDuration, defaultMaxDuration, onChange]);\r\n\r\n const title = useMemo(() => {\r\n if (minDuration && maxDuration && !minDurationInvalid && !maxDurationInvalid) {\r\n return `${minDuration}s < ${i18n.getString(_TL_('Duration'))} < ${maxDuration}s`;\r\n }\r\n if (minDuration && !minDurationInvalid) {\r\n return `${i18n.getString(_TL_('Duration'))} > ${minDuration}s`;\r\n }\r\n if (maxDuration && !maxDurationInvalid) {\r\n return `${i18n.getString(_TL_('Duration'))} < ${maxDuration}s`;\r\n }\r\n return '';\r\n }, [minDuration, maxDuration, minDurationInvalid, maxDurationInvalid, i18n]);\r\n\r\n const focusTextField = useCallback(textFieldRef => (event) => {\r\n if (event.key === 'Tab') {\r\n if (textFieldRef.current) {\r\n textFieldRef.current.focus();\r\n }\r\n if (event.stopPropagation) { event.stopPropagation(); }\r\n if (event.preventDefault) { event.preventDefault(); }\r\n }\r\n }, []);\r\n\r\n const onMinDurationKeyUp = useMemo(() => focusTextField(minDurationRef), [focusTextField]);\r\n const onMaxDurationKeyUp = useMemo(() => focusTextField(maxDurationRef), [focusTextField]);\r\n\r\n const onDropdownDismiss = useCallback(() => {\r\n if (defaultMinDuration !== minDuration || defaultMaxDuration !== maxDuration) {\r\n onChange({ newMinDuration: minDurationInvalid ? null : minDuration, newMaxDuration: maxDurationInvalid ? null : maxDuration }, title);\r\n }\r\n if (onDismiss) {\r\n onDismiss({ newMinDuration: minDurationInvalid ? null : minDuration, newMaxDuration: maxDurationInvalid ? null : maxDuration }, title);\r\n }\r\n }, [defaultMinDuration, minDuration, defaultMaxDuration, maxDuration, onDismiss, onChange, minDurationInvalid, maxDurationInvalid, title]);\r\n\r\n return (\r\n \r\n \r\n
{i18n.getString(_TL_('Video duration'))}
\r\n
\r\n
\r\n
\r\n \r\n
{i18n.getString(_TL_('Location'))}
\r\n
\r\n
\r\n {\r\n fabricIconName\r\n ?
\r\n :
\r\n }\r\n\r\n
\r\n {\r\n summary &&\r\n {summary} \r\n \r\n {tip} \r\n \r\n }\r\n {\r\n learnMoreLinkText && learnMoreLinkTopic &&\r\n \r\n \r\n \r\n }\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
{mainViewIconLabel} \r\n
\r\n
\r\n {renderFooter()}\r\n
' });\r\n setSearchText('');\r\n }\r\n }, [logger, searchText]);\r\n\r\n return {\r\n searchText,\r\n onSearchTextChanging,\r\n onSearchTextBlur,\r\n onSearchTextChange,\r\n onSearchTextClear,\r\n };\r\n};\r\n","import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport _ from 'underscore';\r\n\r\nimport { InlineChart } from '@bingads-webui-campaign-react/inline-chart';\r\nimport { waterfallDateFilterProcessor } from '@bingads-webui-campaign/filter-storage';\r\nimport appConfig from '@bingads-webui-component-legacy/config/index';\r\nimport Constants from '@bingads-webui-static-legacy/constants';\r\nimport { withInstrumentation } from '@bingads-webui-react/hoc-with-instrumentation';\r\nimport { ThemeFluent } from '@bingads-webui-theme-2018/theme-fluent';\r\n\r\nconst AssetLibraryInlineChartWrapperInner = ({\r\n loadPerfTimeSeriesData,\r\n isShowChart,\r\n dateFilter,\r\n perfMarker,\r\n serverContext,\r\n instrumentation,\r\n chartPreference,\r\n i18nInlineChart,\r\n filters,\r\n appState,\r\n pageContext,\r\n forceToResizeChart,\r\n}) => {\r\n const { palette } = ThemeFluent;\r\n\r\n const resizeWidth = useCallback(() => {\r\n const chartContainer = document.getElementsByClassName('asset-library-performance-inline-chart');\r\n\r\n if (chartContainer.length > 0) {\r\n const chartWidth = chartContainer[0].offsetWidth;\r\n\r\n return chartWidth;\r\n }\r\n return 0;\r\n }, []);\r\n\r\n const resizeChart = useRef();\r\n\r\n const [dateRange, setDateRange] = useState({});\r\n\r\n const onWindowResize = useCallback(_.debounce(() => {\r\n const resizeChartHandler = resizeChart.current;\r\n resizeChartHandler(resizeWidth());\r\n }, 50), []);\r\n\r\n const resizeChartListener = useCallback((handler) => {\r\n resizeChart.current = handler;\r\n }, []);\r\n\r\n useEffect(() => {\r\n window.addEventListener('resize', onWindowResize, false);\r\n\r\n onWindowResize();\r\n\r\n return () => {\r\n window.removeEventListener('resize', onWindowResize);\r\n };\r\n }, [onWindowResize]);\r\n\r\n const getDataSource = useCallback(() => {\r\n const dataSourceInner = {\r\n findAll: timeSeriesParams => loadPerfTimeSeriesData(timeSeriesParams, filters),\r\n };\r\n\r\n return dataSourceInner;\r\n }, [filters, loadPerfTimeSeriesData]);\r\n\r\n const getOptions = useCallback(() => {\r\n const optionsInner = {\r\n entityType: 'Asset',\r\n token: appConfig.get('odata.token'),\r\n imagePath: Constants.imagePath, // can be removed?\r\n instrumentation,\r\n pageContext,\r\n pageState: appState,\r\n preference: chartPreference,\r\n hideChartPanel: !isShowChart,\r\n customMetricNameList: ['Clicks', 'ClickThruRate', 'Impressions', 'Spent'],\r\n seriesColors: {\r\n primary: {\r\n original: palette.themePrimary,\r\n comparative: palette.themePrimary,\r\n },\r\n secondary: {\r\n original: '#022F22',\r\n comparative: '#022F22',\r\n },\r\n },\r\n lowestSupportedGranularity: 'Day',\r\n disableMovingAverage: true,\r\n addDateChangeListener: () => { },\r\n resizeChartListener,\r\n resizeEventHandler: () => { },\r\n };\r\n\r\n return optionsInner;\r\n }, [appState, chartPreference, instrumentation, isShowChart, pageContext, palette.themePrimary, resizeChartListener]);\r\n\r\n const dataSource = useMemo(() => getDataSource(), [getDataSource]);\r\n\r\n const options = useMemo(() => getOptions(), [getOptions]);\r\n\r\n const getNewDateRange = useCallback(() => {\r\n const newDateRange = waterfallDateFilterProcessor(\r\n [\r\n {\r\n filter: dateFilter,\r\n },\r\n ],\r\n serverContext\r\n );\r\n\r\n return newDateRange;\r\n }, [dateFilter, serverContext]);\r\n\r\n useEffect(() => {\r\n const newDateRange = getNewDateRange();\r\n if (!_.isEqual(dateRange, newDateRange)) {\r\n setDateRange(newDateRange);\r\n }\r\n }, [dateFilter, dateRange, getNewDateRange]);\r\n\r\n useEffect(() => {\r\n const resizeChartHandler = resizeChart.current;\r\n if (resizeChartHandler && isShowChart && forceToResizeChart) {\r\n const newWidth = resizeWidth();\r\n if (newWidth > 0) {\r\n resizeChartHandler(newWidth);\r\n }\r\n }\r\n }, [resizeWidth, isShowChart, forceToResizeChart]);\r\n\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nAssetLibraryInlineChartWrapperInner.propTypes = {\r\n isShowChart: PropTypes.bool.isRequired,\r\n loadPerfTimeSeriesData: PropTypes.func.isRequired,\r\n dateFilter: PropTypes.shape({}),\r\n perfMarker: PropTypes.shape({}),\r\n serverContext: PropTypes.shape({\r\n DynamicPermissions: PropTypes.shape({\r\n InlineChartColumnMerticsEnabled: PropTypes.bool,\r\n CampaignsCombineGridAndChartOdataCallEnabled: PropTypes.bool,\r\n }),\r\n }),\r\n instrumentation: PropTypes.shape({}),\r\n chartPreference: PropTypes.shape({}),\r\n pageContext: PropTypes.shape({}),\r\n i18nInlineChart: PropTypes.shape({}).isRequired,\r\n filters: PropTypes.shape({}),\r\n appState: PropTypes.shape({}),\r\n forceToResizeChart: PropTypes.string,\r\n};\r\n\r\nAssetLibraryInlineChartWrapperInner.defaultProps = {\r\n dateFilter: null,\r\n perfMarker: null,\r\n serverContext: null,\r\n instrumentation: null,\r\n chartPreference: undefined,\r\n pageContext: null,\r\n filters: {},\r\n appState: null,\r\n forceToResizeChart: null,\r\n};\r\n\r\nexport const AssetLibraryInlineChartWrapper = withInstrumentation(AssetLibraryInlineChartWrapperInner);\r\n\r\n","import Promise from 'bluebird';\r\nimport React, { useCallback, useMemo } from 'react';\r\n\r\nimport { ChartDataAdapter } from '@bingads-webui-campaign-react/inline-chart';\r\nimport appConfig from '@bingads-webui-component-legacy/config/index';\r\n\r\nimport { InlineChartPreferences } from '@bingads-webui-campaign/inline-chart-preferences';\r\nimport { store, adapter } from '@bingads-webui-component-legacy/bingads-grid/service/grid-preferences';\r\nimport preferenceServiceLegacy from '@bingads-webui-component-legacy/preference/service/index';\r\nimport globalPageContext from '@bingads-webui-static-legacy/page-context';\r\nimport appState from '@bingads-webui-component-legacy/state/index';\r\n\r\nimport { AssetLibraryInlineChartWrapper } from './inline-chart-wrapper';\r\n\r\nexport const useAssetLibraryInlineChart = ({\r\n serverContext, globalLegacyI18n, getPageContext, forceToResizeChart,\r\n}) => {\r\n const pageContext = useMemo(() => (getPageContext ? getPageContext() : globalPageContext), [getPageContext]);\r\n const i18nInlineChart = useMemo(() => globalLegacyI18n && globalLegacyI18n.get('@bingads-webui/i18n-amd-loader!@bingads-webui-campaign-react/inline-chart'), [globalLegacyI18n]);\r\n\r\n const chartPreference = useMemo(() => {\r\n const preferencePromise = preferenceServiceLegacy.initialize().then(() => Promise.promisifyAll(preferenceServiceLegacy));\r\n return new InlineChartPreferences(\r\n store,\r\n appConfig,\r\n adapter,\r\n preferencePromise\r\n );\r\n }, []);\r\n\r\n const chartDataAdapter = useMemo(() => new ChartDataAdapter({\r\n i18n: i18nInlineChart,\r\n permissions: pageContext.Permissions,\r\n gridName: pageContext.CurrentGridName,\r\n lowestSupportedGranularity: 'Day',\r\n }), [i18nInlineChart, pageContext]);\r\n\r\n const getChartPreference = useCallback(() => chartDataAdapter.getPreferencesAndDefaults(\r\n chartPreference,\r\n pageContext\r\n ), [chartDataAdapter, chartPreference, pageContext]);\r\n\r\n const getPerfTimeSeriesParams = useCallback(({ perfMetricDateRange }) => getChartPreference().then((chartParams) => {\r\n const perfTimeSeriesParamsInner = chartDataAdapter.formatPreferenceValue(perfMetricDateRange, chartParams);\r\n return perfTimeSeriesParamsInner;\r\n }), [chartDataAdapter, getChartPreference]);\r\n\r\n pageContext.CurrentTabId = 'Asset';\r\n\r\n const renderInlineChart = ({\r\n isChartShown, filters, loadPerfTimeSeriesData, perfMetricDateRange,\r\n }) => (\r\n \r\n {_.map(filters, filter =>\r\n (\r\n onClickFilter(filter)}\r\n >\r\n {`${i18n.getString(filter.title)}: ${filter.humanizedValue}`} \r\n \r\n ))}\r\n \r\n);\r\n\r\nFilterListImpl.propTypes = {\r\n filters: PropTypes.arrayOf(PropTypes.shape({\r\n humanizedValue: PropTypes.string,\r\n })).isRequired,\r\n onClickFilter: PropTypes.func.isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n classes: PropTypes.shape({\r\n viewAllFilterItem: PropTypes.string,\r\n }).isRequired,\r\n};\r\n\r\nexport const FilterList = withDefaultStyles(FilterListImpl, getViewAllFiltersButtonStyle);\r\n\r\nconst FilterListWithPopover = withPopover(FilterList);\r\n\r\nconst ViewAllFiltersButtonImpl = ({\r\n filters, onClickFilter, i18n, classes,\r\n}) => {\r\n // don't show the always visible filters on the View all popover\r\n const selectedFilters = _.filter(filters, ({ isFilterAlwaysVisible }) => !isFilterAlwaysVisible);\r\n return (_.isEmpty(selectedFilters) ? null : (\r\n \r\n {i18n.getString(_TL_('View all'))} \r\n \r\n ));\r\n};\r\n\r\nViewAllFiltersButtonImpl.propTypes = {\r\n filters: PropTypes.arrayOf(PropTypes.shape({\r\n isFilterAlwaysVisible: PropTypes.bool,\r\n })).isRequired,\r\n onClickFilter: PropTypes.func.isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n classes: PropTypes.shape({\r\n viewAllPopoverClassName: PropTypes.string,\r\n viewAllPopoverCloseButton: PropTypes.string,\r\n }).isRequired,\r\n};\r\n\r\nexport const ViewAllFiltersButton = React.memo(withDefaultStyles(ViewAllFiltersButtonImpl, getViewAllFiltersButtonStyle));\r\n","import _ from 'underscore';\r\nimport classNames from 'classnames';\r\nimport React, { Fragment, useRef } from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport { keyCode } from '@bingads-webui/keycode';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { AddFilterButton } from '@bingads-webui/filter-commons';\r\n\r\nimport { ViewAllFiltersButton } from './view-all-filters-button';\r\nimport { getAssetLibraryFilterBarReadonlyStyle } from './style';\r\n\r\nconst ReadonlyFilterBar = ({\r\n filters,\r\n onRenderFilter,\r\n onClickFilter,\r\n onClickAddFilterButton,\r\n i18n,\r\n classes,\r\n}) => {\r\n const onKeyPress = (event, filter, index) => {\r\n if (event.which === keyCode.Enter || event.which === keyCode.Space) {\r\n onClickFilter(filter, index);\r\n }\r\n };\r\n\r\n const filterListRef = useRef();\r\n const onFilterBlur = () => {\r\n // reset scroll position to 0\r\n if (filterListRef.current) {\r\n filterListRef.current.scrollTo(0, 0);\r\n }\r\n };\r\n\r\n return (\r\n \r\n
\r\n {filters.map((filter, index) => (\r\n \r\n onClickFilter(filter, index)}\r\n tabIndex=\"0\"\r\n role=\"button\"\r\n onKeyDown={event => onKeyPress(event, filter, index)}\r\n >\r\n {onRenderFilter({\r\n filter,\r\n index,\r\n isLast: index === filters.length - 1,\r\n isFirst: index === 0,\r\n })}\r\n \r\n \r\n ))}\r\n
\r\n
\r\n
\r\n
\r\n
\r\n {filters.map((filter, index) => (\r\n
\r\n {onRenderFilter({\r\n filter,\r\n focused: focusedFilter && focusedFilter.id === filter.id,\r\n index,\r\n isLast: index === filters.length - 1,\r\n isFirst: index === 0,\r\n })}\r\n {getDivider(index)}\r\n \r\n ))}\r\n
\r\n {onRenderNewFilterContextMenu({\r\n target: contextMenuTargetRef,\r\n show: showNewFilterContextMenu,\r\n onDismiss: dismissContextMenu,\r\n })}\r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n
{i18n.getString(_TL_('Source'))}
\r\n
\r\n {assetSourceOptions.map(({ key, title }) => (\r\n onChangeCallback(key, checked, evt)}\r\n />\r\n ))}\r\n \r\n
\r\n
\r\n
{i18n.getString(_TL_('New feature!'))} \r\n
\r\n {content}\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n {i18n.getString(_TL_('Create high-quality imagery with AI'))} \r\n
\r\n
\r\n {i18n.getString(_TL_('You can generate custom images for your ads with ease, powered by AI.'))} \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n
{i18n.getString(_TL_('History'))}
\r\n
\r\n
\r\n {\r\n !isEmpty(creativeList) && (\r\n
\r\n {\r\n creativeList.map((creative, index) => (\r\n
\r\n )\r\n }\r\n
\r\n
\r\n
\r\n
{title || i18n.getString(_TL_('Text'))}
\r\n {showHelpPopup &&
}\r\n
\r\n
updateText(str)}\r\n className=\"text-field\"\r\n ariaLabel={ariaLabel}\r\n />\r\n \r\n
\r\n
{title}
\r\n { showHelpPopup &&
}\r\n
\r\n {\r\n currentImage && (\r\n
\r\n
\r\n {\r\n displayEdit &&\r\n
\r\n
\r\n }\r\n {\r\n displayDelete &&\r\n
\r\n
\r\n }\r\n
\r\n )\r\n }\r\n {\r\n showImageFailMsg &&\r\n
\r\n {i18n.getString(_TL_('We cannot find the image. Please select another image.'))}\r\n \r\n }\r\n {\r\n setIsUploading(true);\r\n // Load the image first to reduce the time of the inner component to load the image\r\n const image = new Image();\r\n image.src = imageUrl;\r\n image.onload = () => {\r\n setIsUploading(false);\r\n dispatchSuggestionState({\r\n type: SuggestionStatus.SelectSuggestionComplete,\r\n selectedIndex: index,\r\n error: null,\r\n });\r\n assetLibraryConfig.onImageSelected({ url: imageUrl });\r\n\r\n activity.trace(`CarouselImageSelected: ${index};`);\r\n };\r\n image.onerror = () => {\r\n setIsUploading(false);\r\n };\r\n }}\r\n allowToggleSelectable={false}\r\n showViewAllInHeader\r\n showHeading={false}\r\n />);\r\n};\r\n\r\nCreativeEditorImageSuggestionCarousel.propTypes = {\r\n isLoading: PropTypes.bool.isRequired,\r\n carousel: PropTypes.shape({}),\r\n};\r\n\r\nCreativeEditorImageSuggestionCarousel.defaultProps = {\r\n carousel: {},\r\n};\r\n\r\nconst LoadingCell = () => (\r\n
);\r\n\r\nconst LoadingCarousel = () => {\r\n const blockCount = 4;\r\n const loadingBlocks = Array.from({ length: blockCount }, (v, i) => i);\r\n const [imageContainerWidth, setImageContainerWidth] = useState(0);\r\n const imageContainerNode = useRef(null);\r\n\r\n useEffect(() => {\r\n const handleResize = () => {\r\n if (imageContainerNode.current) {\r\n setImageContainerWidth(imageContainerNode.current.offsetWidth);\r\n }\r\n };\r\n\r\n window.addEventListener('resize', handleResize);\r\n\r\n return () => {\r\n window.removeEventListener('resize', handleResize);\r\n };\r\n }, []);\r\n\r\n const measuredRef = useCallback((node) => {\r\n if (node) {\r\n imageContainerNode.current = node;\r\n setImageContainerWidth(imageContainerNode.current.offsetWidth);\r\n }\r\n }, []);\r\n\r\n return (\r\n \r\n
\r\n
0 ? { width: imageContainerWidth } : {}}\r\n >\r\n \r\n {loadingBlocks.map(i => (
\r\n \r\n
\r\n
\r\n {i18n.getString(_TL_('Recommended images '))} \r\n
\r\n );\r\n};\r\nconst AddImageButton = (props) => {\r\n const {\r\n onChangeImage,\r\n } = props;\r\n return (\r\n
\r\n
\r\n \r\n
\r\n {isLoading ?\r\n (
) :\r\n (
)}\r\n
\r\n {suggestionErrorMessage &&\r\n setSuggestionErrorMessage(undefined)}\r\n dismissButtonAriaLabel=\"Close\"\r\n >\r\n {suggestionErrorMessage}\r\n }\r\n
\r\n \r\n
\r\n {\r\n currentImage &&\r\n { setDisplayImageSuggestions(true); }}\r\n />\r\n }\r\n {\r\n displayImageSuggestions &&\r\n
\r\n );\r\n};\r\n\r\nImageChooser.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n currentImage: PropTypes.string,\r\n cid: PropTypes.string.isRequired,\r\n aid: PropTypes.string.isRequired,\r\n oDataConfig: PropTypes.shape({}).isRequired,\r\n finalUrl: PropTypes.string.isRequired,\r\n onChangeImage: PropTypes.func.isRequired,\r\n assetLibraryConfig: PropTypes.shape({}).isRequired,\r\n onLoadingImage: PropTypes.func,\r\n showHelpPopup: PropTypes.bool,\r\n helpTopic: PropTypes.string,\r\n};\r\n\r\nImageChooser.defaultProps = {\r\n showHelpPopup: false,\r\n helpTopic: '',\r\n currentImage: '',\r\n onLoadingImage: () => {},\r\n};\r\n","/* eslint-disable no-param-reassign */\r\nimport React, { useState, useCallback, useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport { AddMediaPanel } from '@bingads-webui-campaign-react/asset-library-shared-add-media-layout';\r\nimport { StockImageDataService } from '@bingads-webui-campaign/stock-image-data-service';\r\n\r\nexport const AddImageWrapper = ({\r\n addMediaConfig,\r\n assetLibraryConfig,\r\n dataService,\r\n i18n,\r\n initialView,\r\n isAssetLibraryAIGCMVPEnabled,\r\n isOpen,\r\n logger,\r\n setNewImageDataObject,\r\n showAddImagePanel,\r\n setShowAddImagePanel,\r\n cid,\r\n aid,\r\n ...rest\r\n}) => {\r\n const [addMediaPanelView, setAddMediaPanelView] = useState(initialView);\r\n\r\n const handleImageSelected = useCallback((imageId, imageUrl) => {\r\n if (imageUrl) {\r\n setNewImageDataObject({ url: imageUrl });\r\n setShowAddImagePanel(false);\r\n setAddMediaPanelView(initialView);\r\n return null;\r\n }\r\n return dataService.getImageById({ imageId }).then((imageData) => {\r\n setNewImageDataObject({ url: imageData.url, id: imageData.id }); // force to create a new object to trigger the re-render\r\n setShowAddImagePanel(false);\r\n setAddMediaPanelView(initialView);\r\n });\r\n }, [dataService, initialView, setNewImageDataObject, setShowAddImagePanel]);\r\n\r\n const onImageSelected = useCallback((image, onFinished) => {\r\n handleImageSelected(image.id, image.url, onFinished);\r\n }, [handleImageSelected]);\r\n\r\n const onImagesSelected = useCallback(imageIds => handleImageSelected(imageIds[0]), [handleImageSelected]);\r\n\r\n const processUploadedImage = useCallback(({\r\n imageId,\r\n }) => handleImageSelected(imageId), [handleImageSelected]);\r\n\r\n const { oDataConfig } = assetLibraryConfig;\r\n\r\n const { stockImageConfig } = rest;\r\n\r\n const stockImageService = useMemo(() => new StockImageDataService({\r\n cid, aid, oDataConfig, controller: 'StockImages',\r\n }), [oDataConfig, aid, cid]);\r\n\r\n const getStockImages = useCallback(options => stockImageService.getStockImages(options), [stockImageService]);\r\n\r\n const stockImageConfigInner = useMemo(() => ({\r\n getStockImages,\r\n onStockImageSelected: ({ selectedImageId }) => dataService.uploadStockImage({ stockImageId: selectedImageId }),\r\n }), [getStockImages, dataService]);\r\n\r\n assetLibraryConfig.onImageSelected = onImageSelected;\r\n assetLibraryConfig.onImagesSelected = onImagesSelected;\r\n assetLibraryConfig.enableImageDeleting = false;\r\n assetLibraryConfig.enableStockMultipleSelection = false;\r\n assetLibraryConfig.enableWebsiteMultipleSelection = false;\r\n\r\n return (\r\n setShowAddImagePanel(false)}\r\n i18n={i18n}\r\n maxUploadNum={1}\r\n managedViewSelectionState={addMediaPanelView}\r\n updateManagedViewSelectionState={(newView) => { setAddMediaPanelView(newView); }}\r\n processUploadedImage={args => processUploadedImage(args)}\r\n stockImageConfig={stockImageConfig || stockImageConfigInner}\r\n cid={cid}\r\n aid={aid}\r\n />\r\n );\r\n};\r\n\r\nAddImageWrapper.propTypes = {\r\n addMediaConfig: PropTypes.shape({}).isRequired,\r\n assetLibraryConfig: PropTypes.shape({\r\n oDataConfig: PropTypes.shape({}),\r\n }).isRequired,\r\n dataService: PropTypes.shape({\r\n getImageById: PropTypes.func,\r\n uploadStockImage: PropTypes.func,\r\n }).isRequired,\r\n i18n: PropTypes.shape({}).isRequired,\r\n initialView: PropTypes.string.isRequired,\r\n isAssetLibraryAIGCMVPEnabled: PropTypes.bool,\r\n isOpen: PropTypes.bool.isRequired,\r\n logger: PropTypes.shape({}).isRequired,\r\n setNewImageDataObject: PropTypes.func.isRequired,\r\n showAddImagePanel: PropTypes.bool.isRequired,\r\n setShowAddImagePanel: PropTypes.func.isRequired,\r\n cid: PropTypes.string.isRequired,\r\n aid: PropTypes.string.isRequired,\r\n};\r\n\r\nAddImageWrapper.defaultProps = {\r\n isAssetLibraryAIGCMVPEnabled: false,\r\n};\r\n","import { useCallback, useState, useMemo } from 'react';\r\nimport {\r\n CSMLTimeFrame,\r\n civilDateRangeEqual,\r\n civilDateRangeToDebugString,\r\n getDateAddedChoiceOptions,\r\n handleRealUsedFlag,\r\n} from '@bingads-webui-campaign-react/asset-library-model';\r\nimport { getCivilDateToday } from '@bingads-webui-universal/temporal-utitlities';\r\n\r\nconst yesterday = getCivilDateToday().plus({ days: -1 });\r\nconst DEFAULT_RANGE = { start: yesterday, end: yesterday };\r\n\r\nexport const useDateAddedFilter = ({\r\n logger,\r\n i18n,\r\n ianaTimeZone,\r\n preference,\r\n realUsedFlagSuffix,\r\n}) => {\r\n const [dateAddedFilter, setDateAddedFilter] = useState(CSMLTimeFrame.Anytime);\r\n // date range user selected for 'Custom'\r\n const [dateAddedFilterCustomDateRange, setDateAddedFilterCustomDateRange] = useState(DEFAULT_RANGE);\r\n\r\n const dateAddedChoiceOptions = useMemo(\r\n () => getDateAddedChoiceOptions(i18n, ianaTimeZone),\r\n [i18n, ianaTimeZone]\r\n );\r\n\r\n const onDateAddedFilterChange = useCallback(({ timeframe: tf, customDateRange: cdr }) => {\r\n if (tf !== dateAddedFilter) {\r\n logger.logTrace('onDateAddedFilterChange', { dateAddedFilter: tf });\r\n setDateAddedFilter(tf);\r\n handleRealUsedFlag(preference, realUsedFlagSuffix);\r\n }\r\n if (!civilDateRangeEqual(cdr, dateAddedFilterCustomDateRange)) {\r\n logger.logTrace('onDateAddedFilterChange', { customDateRange: civilDateRangeToDebugString(cdr) });\r\n setDateAddedFilterCustomDateRange(cdr);\r\n handleRealUsedFlag(preference, realUsedFlagSuffix);\r\n }\r\n }, [dateAddedFilter, dateAddedFilterCustomDateRange, logger, preference, realUsedFlagSuffix]);\r\n\r\n return {\r\n dateAddedChoiceOptions,\r\n dateAddedFilter,\r\n dateAddedFilterCustomDateRange,\r\n onDateAddedFilterChange,\r\n };\r\n};\r\n","import { useCallback, useState, useMemo, useEffect } from 'react';\r\nimport { getSearchLocationOptions, handleRealUsedFlag } from '@bingads-webui-campaign-react/asset-library-model';\r\n\r\nconst useSearchLocationFilterImpl = ({\r\n searchLocationFilter,\r\n setSearchLocation,\r\n isInRootFolder,\r\n logger,\r\n i18n,\r\n preference,\r\n realUsedFlagSuffix,\r\n}) => {\r\n useEffect(() => {\r\n if (!isInRootFolder) {\r\n setSearchLocation(null);\r\n }\r\n }, [isInRootFolder, setSearchLocation]);\r\n\r\n const searchLocationOptions = useMemo(() => getSearchLocationOptions(i18n), [i18n]);\r\n\r\n const onSearchLocationChange = useCallback((newLocation) => {\r\n if (searchLocationFilter !== newLocation) {\r\n setSearchLocation(newLocation);\r\n logger.logTrace('onSearchLocationChange', { searchLocationFilter: newLocation });\r\n handleRealUsedFlag(preference, realUsedFlagSuffix);\r\n }\r\n }, [logger, searchLocationFilter, setSearchLocation, preference, realUsedFlagSuffix]);\r\n\r\n return {\r\n searchLocationFilter,\r\n searchLocationOptions,\r\n onSearchLocationChange,\r\n };\r\n};\r\n\r\n// if external state is provided, use external state, otherwise use internal state\r\nexport const useSearchLocationFilter = ({\r\n searchLocationFilter,\r\n setSearchLocationFilter,\r\n isInRootFolder,\r\n logger,\r\n i18n,\r\n preference,\r\n realUsedFlagSuffix,\r\n}) => {\r\n const [searchLocationFilterInternal, setSearchLocationFilterInternal] = useState(null);\r\n return useSearchLocationFilterImpl({\r\n searchLocationFilter: setSearchLocationFilter ? searchLocationFilter : searchLocationFilterInternal,\r\n setSearchLocation: setSearchLocationFilter || setSearchLocationFilterInternal,\r\n isInRootFolder,\r\n logger,\r\n i18n,\r\n preference,\r\n realUsedFlagSuffix,\r\n });\r\n};\r\n","export const positionFill = {\r\n position: 'absolute',\r\n left: 0,\r\n top: 0,\r\n right: 0,\r\n bottom: 0,\r\n};\r\n\r\nexport const getSharedAssetContainerStyle = (components, { palette = {} } = {}) => ({\r\n ...positionFill,\r\n display: 'flex',\r\n flexDirection: 'column',\r\n flexWrap: 'nowrap',\r\n padding: 12,\r\n boxSizing: 'border-box',\r\n\r\n // name and ID\r\n '& .cell-description': {\r\n display: 'flex',\r\n flexShrink: 0,\r\n flexGrow: 0,\r\n justifyContent: 'space-between',\r\n fontWeight: 600,\r\n fontSize: 12,\r\n margin: [12, 4],\r\n\r\n '& .cell-description-name': {\r\n flexShrink: 1,\r\n flexGrow: 1,\r\n overflow: 'hidden',\r\n marginRight: 12,\r\n },\r\n\r\n '& .cell-description-id': {\r\n flexShrink: 0,\r\n flexGrow: 0,\r\n },\r\n\r\n '& .highlighted-text': {\r\n backgroundColor: palette.yellowLight,\r\n },\r\n },\r\n});\r\n\r\nexport const getSharedMultiSelectingCellStyles = (components, { palette = {} } = {}) => ({\r\n // only show checkbox on overlay if it is NOT in multi-selecting mode\r\n selectableCardContainerAutoHideCheckbox: {\r\n '& .cell-image-frame': {\r\n overflow: 'hidden',\r\n borderRadius: 6,\r\n },\r\n\r\n '& .selected-checkbox': {\r\n visibility: 'hidden',\r\n },\r\n\r\n '&:hover': {\r\n '& .selected-checkbox': {\r\n visibility: 'visible',\r\n '& .ms-Checkbox-checkbox': {\r\n border: '2px solid white !important',\r\n },\r\n '& .ms-Checkbox-checkmark': {\r\n color: palette.white,\r\n },\r\n },\r\n },\r\n\r\n '& .visible-checkbox': {\r\n visibility: 'visible',\r\n '& .ms-Checkbox-checkbox': {\r\n border: '2px solid white !important',\r\n },\r\n '& .ms-Checkbox-checkmark': {\r\n color: palette.white,\r\n },\r\n },\r\n },\r\n\r\n selectableCardContainer: {\r\n '& .cell-image-frame': {\r\n overflow: 'hidden',\r\n borderRadius: 6,\r\n },\r\n\r\n '& .selected-checkbox': {\r\n visibility: 'visible',\r\n '& .ms-Checkbox-checkbox': {\r\n border: '2px solid white !important',\r\n },\r\n '& .ms-Checkbox-checkmark': {\r\n color: palette.white,\r\n },\r\n },\r\n },\r\n});\r\n","import { positionFill } from './shared-cell-style';\r\n\r\nexport const iconStyles = {\r\n root: {\r\n position: 'relative',\r\n top: 3,\r\n marginLeft: 12,\r\n marginRight: 5,\r\n },\r\n};\r\n\r\nexport const videoSvgIconStyles = {\r\n ...iconStyles,\r\n root: {\r\n ...iconStyles.root,\r\n top: 5,\r\n width: 15,\r\n opacity: 0.8,\r\n },\r\n};\r\n\r\nexport const getFolderGridCellStyle = (components, { palette = {} } = {}) => ({\r\n folderGridCellContainer: {\r\n ...positionFill,\r\n\r\n display: 'flex',\r\n flexWrap: 'nowrap',\r\n padding: 12,\r\n boxSizing: 'border-box',\r\n\r\n '& .folder-grid-cell-content': {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n flexGrow: 1,\r\n flexShrink: 1,\r\n\r\n justifyContent: 'flex-start',\r\n alignItems: 'center',\r\n background: palette.white,\r\n padding: 16,\r\n cursor: 'pointer',\r\n\r\n borderRadius: 6,\r\n ...positionFill,\r\n\r\n '& .folder-thumbnail': {\r\n display: 'flex',\r\n flexGrow: 0,\r\n flexShrink: 0,\r\n marginRight: 16,\r\n },\r\n\r\n '& .folder-info': {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n flexGrow: 1,\r\n flexShrink: 1,\r\n justifyContent: 'space-between',\r\n height: '100%',\r\n paddingTop: 6,\r\n\r\n overflow: 'hidden',\r\n whiteSpace: 'nowrap',\r\n\r\n '& .folder-name': {\r\n fontStyle: 'normal',\r\n fontWeight: 600,\r\n fontSize: 12,\r\n lineHeight: '16px',\r\n // color: palette.neutralSecondary,\r\n\r\n '& .highlighted-text': {\r\n backgroundColor: palette.yellowLight,\r\n },\r\n },\r\n\r\n '& .folder-newlabel-counting': {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n padding: 1,\r\n\r\n '& .counting-info': {\r\n display: 'block',\r\n overflow: 'hidden',\r\n whiteSpace: 'nowrap',\r\n textOverflow: 'ellipsis',\r\n\r\n fontStyle: 'normal',\r\n fontWeight: 400,\r\n fontSize: 12,\r\n lineHeight: '15px',\r\n textAlign: 'right',\r\n // color: palette.neutralPrimary,\r\n\r\n position: 'relative',\r\n top: 2,\r\n\r\n '& .empty-desc': {\r\n marginLeft: 12,\r\n },\r\n },\r\n },\r\n },\r\n },\r\n\r\n '& .grid-cell-with-accessory': {\r\n paddingRight: 54,\r\n },\r\n\r\n '& .folder-cell-accessory': {\r\n position: 'absolute',\r\n top: 0,\r\n bottom: 0,\r\n right: 0,\r\n width: 42,\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n },\r\n\r\n '& .folder-grid-loading-cell-content': {\r\n height: '100%',\r\n },\r\n },\r\n\r\n selectableCellCard: {\r\n background: 'white',\r\n },\r\n\r\n folderCellNewLabel: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n\r\n '& div.label-icon-and-text': {\r\n padding: [2, 8, 2, 6],\r\n },\r\n\r\n '& .label-secondary-text': {\r\n width: 0,\r\n },\r\n\r\n '&:hover': {\r\n '& .label-secondary-text': {\r\n width: '100%',\r\n opacity: 1,\r\n transform: 'translate(10px, 0px)',\r\n color: palette.neutralPrimary,\r\n },\r\n },\r\n },\r\n});\r\n","/* eslint-disable object-curly-newline */\r\nimport _ from 'underscore';\r\nimport React, { useCallback, useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classnames from 'classnames';\r\nimport {\r\n Checkbox,\r\n Icon,\r\n TooltipHost,\r\n TooltipOverflowMode,\r\n DirectionalHint,\r\n} from '@bingads-webui-react/fabric-control';\r\n\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\n\r\nimport {\r\n FolderIcon,\r\n TextWithHighlight,\r\n TilesGridCellCard,\r\n TilesGridCellDecorativeLabel as CellLabel,\r\n} from '@bingads-webui-campaign-react/asset-library-components';\r\nimport { CustomFluentUIIcons } from '@bingads-webui-campaign-react/asset-library-resources';\r\n\r\nimport { getTimeDescription, FolderAssetType } from '@bingads-webui-campaign-react/asset-library-model';\r\n\r\nimport {\r\n iconStyles,\r\n videoSvgIconStyles,\r\n getFolderGridCellStyle\r\n} from './styles/folders-grid-cell-style';\r\n\r\nfunction getCountDescription({\r\n itemInfo,\r\n i18n,\r\n}) {\r\n let subFoldersCountDesc = '';\r\n let imagesCountDesc = '';\r\n let videosCountDesc = '';\r\n if (itemInfo.subfoldersCount === 1) {\r\n subFoldersCountDesc = i18n.getString(_TL_('{{count}} folder'), { count: itemInfo.subfoldersCount });\r\n } else if (!_.isUndefined(itemInfo.subfoldersCount)) {\r\n subFoldersCountDesc = i18n.getString(_TL_('{{count}} folders'), { count: itemInfo.subfoldersCount });\r\n }\r\n if (itemInfo.imageAssetsCount === 1) {\r\n imagesCountDesc = i18n.getString(_TL_('{{count}} image'), { count: itemInfo.imageAssetsCount });\r\n } else if (!_.isUndefined(itemInfo.imageAssetsCount)) {\r\n imagesCountDesc = i18n.getString(_TL_('{{count}} images'), { count: itemInfo.imageAssetsCount });\r\n }\r\n if (itemInfo.videoAssetsCount === 1) {\r\n videosCountDesc = i18n.getString(_TL_('{{count}} video'), { count: itemInfo.videoAssetsCount });\r\n } else if (!_.isUndefined(itemInfo.videoAssetsCount)) {\r\n videosCountDesc = i18n.getString(_TL_('{{count}} videos'), { count: itemInfo.videoAssetsCount });\r\n }\r\n const res = [subFoldersCountDesc, imagesCountDesc, videosCountDesc].filter(item => item !== '').join(', ');\r\n return res;\r\n}\r\n\r\nconst convertItemInfo = ({ allowedAssetType, itemInfos }) => {\r\n const result = {\r\n subfoldersCount: itemInfos.SubFoldersCount,\r\n };\r\n if (allowedAssetType === FolderAssetType.Image) {\r\n result.imageAssetsCount = itemInfos.ImageAssetsCount;\r\n } else if (allowedAssetType === FolderAssetType.Video) {\r\n result.videoAssetsCount = itemInfos.VideoAssetsCount;\r\n } else if (!allowedAssetType) {\r\n result.imageAssetsCount = itemInfos.ImageAssetsCount;\r\n result.videoAssetsCount = itemInfos.VideoAssetsCount;\r\n }\r\n\r\n return result;\r\n};\r\n\r\n// eslint-disable-next-line react/prop-types\r\nconst FolderCountInfo = ({ itemInfo, className, i18n, isEmptyFolder }) => (\r\n \r\n { !isEmptyFolder ? (\r\n \r\n {!_.isUndefined(itemInfo.subfoldersCount) &&\r\n \r\n {itemInfo.subfoldersCount} \r\n \r\n }\r\n {!_.isUndefined(itemInfo.imageAssetsCount) &&\r\n \r\n {itemInfo.imageAssetsCount} \r\n \r\n }\r\n {!_.isUndefined(itemInfo.videoAssetsCount) &&\r\n \r\n {itemInfo.videoAssetsCount} \r\n \r\n }\r\n \r\n ) : (\r\n {i18n.getString(_TL_('0 items'))} \r\n )}\r\n \r\n);\r\n\r\nconst getFolderThumbnail = ({ assets }) => {\r\n const firstAsset = _.first(assets) || {};\r\n\r\n // MT will ensure valid assets returned first, so UI only need to check first asset.\r\n if (firstAsset.folderAssetType === FolderAssetType.Video) {\r\n return firstAsset.status === 'Active' ? firstAsset.thumbnailUrl : '';\r\n }\r\n\r\n return firstAsset.url;\r\n};\r\n\r\nconst FoldersGridCell = ({\r\n item,\r\n highlightedText,\r\n onFolderClick,\r\n i18n,\r\n selectable,\r\n selected,\r\n onSelect,\r\n classes,\r\n allowedAssetType,\r\n\r\n renderAccessory,\r\n}) => {\r\n //\r\n const {\r\n folderName, itemCount, assets, createdTime,\r\n } = item || {};\r\n\r\n const itemInfo = useMemo(() => convertItemInfo({ allowedAssetType, itemInfos: itemCount }), [allowedAssetType, itemCount]);\r\n const isEmptyFolder = !_.isUndefined(itemCount.TotalCount) && itemCount.TotalCount === 0;\r\n\r\n const timeDesc = getTimeDescription(createdTime, i18n);\r\n const thumbnailUrl = useMemo(() => getFolderThumbnail({ assets }), [assets]);\r\n\r\n const onClick = useCallback(() => {\r\n onFolderClick(item);\r\n }, [item, onFolderClick]);\r\n\r\n const onCheckboxChange = useCallback((event, checked) => {\r\n if (onSelect) {\r\n onSelect(checked);\r\n }\r\n }, [onSelect]);\r\n\r\n const hasAccessory = renderAccessory || selectable;\r\n\r\n return (\r\n \r\n
\r\n {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\r\n \r\n \r\n
\r\n \r\n
\r\n
\r\n
\r\n {timeDesc &&\r\n
\r\n
\r\n {selectable &&\r\n
\r\n : null}\r\n \r\n \r\n );\r\n};\r\n\r\nFoldersGridCell.propTypes = {\r\n item: PropTypes.shape({}).isRequired,\r\n highlightedText: PropTypes.string,\r\n onFolderClick: PropTypes.func.isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n\r\n // show checkbox\r\n selectable: PropTypes.bool,\r\n selected: PropTypes.bool,\r\n onSelect: PropTypes.func,\r\n\r\n // injected styles\r\n classes: PropTypes.shape({\r\n folderGridCellContainer: PropTypes.string,\r\n folderCellNewLabel: PropTypes.string,\r\n selectableCellCard: PropTypes.string,\r\n folderCellContextMenuButton: PropTypes.string,\r\n }).isRequired,\r\n allowedAssetType: PropTypes.string,\r\n\r\n renderAccessory: PropTypes.func,\r\n};\r\n\r\nFoldersGridCell.defaultProps = {\r\n highlightedText: undefined,\r\n selectable: false,\r\n selected: false,\r\n onSelect: undefined,\r\n allowedAssetType: null,\r\n\r\n renderAccessory: undefined,\r\n};\r\n\r\nexport const AssetLibraryFoldersGridCell\r\n = withDefaultStyles(FoldersGridCell, getFolderGridCellStyle);\r\n","/* eslint-disable object-curly-newline */\r\nimport React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classnames from 'classnames';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\n\r\nimport {\r\n TilesGridLoadingCell,\r\n TilesGridCellCard,\r\n} from '@bingads-webui-campaign-react/asset-library-components';\r\n\r\nimport { getFolderGridCellStyle } from './styles/folders-grid-cell-style';\r\n\r\nconst FoldersGridLoadingCell = ({\r\n onLoading,\r\n classes,\r\n}) => (\r\n \r\n \r\n
\r\n \r\n \r\n);\r\n\r\nFoldersGridLoadingCell.propTypes = {\r\n onLoading: PropTypes.func,\r\n // injected styles\r\n classes: PropTypes.shape({\r\n folderGridCellContainer: PropTypes.string,\r\n }).isRequired,\r\n};\r\n\r\nFoldersGridLoadingCell.defaultProps = {\r\n onLoading: null,\r\n};\r\n\r\nexport const AssetLibraryFoldersGridLoadingCell\r\n = withDefaultStyles(FoldersGridLoadingCell, getFolderGridCellStyle);\r\n","/* eslint-disable object-curly-newline */\r\nimport React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classnames from 'classnames';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\n\r\nimport {\r\n TilesGridLoadingCell,\r\n TilesGridCellCard,\r\n} from '@bingads-webui-campaign-react/asset-library-components';\r\n\r\nimport { getSharedAssetContainerStyle } from './styles/shared-cell-style';\r\n\r\nconst getStyle = (components, { palette = {} } = {}) => ({\r\n gridCellContainer: {\r\n ...getSharedAssetContainerStyle(components, { palette }),\r\n },\r\n});\r\n\r\n// invisible placeholder\r\nconst style = { visibility: 'hidden' };\r\n\r\nexport const AssetsGridLoadingCell = ({\r\n containerClass,\r\n onLoading,\r\n classes,\r\n}) => (\r\n \r\n \r\n
\r\n \r\n \r\n \r\n);\r\n\r\nAssetsGridLoadingCell.propTypes = {\r\n onLoading: PropTypes.func,\r\n containerClass: PropTypes.string,\r\n // injected styles\r\n classes: PropTypes.shape({\r\n gridCellContainer: PropTypes.string,\r\n }).isRequired,\r\n};\r\n\r\nAssetsGridLoadingCell.defaultProps = {\r\n onLoading: null,\r\n containerClass: undefined,\r\n};\r\n\r\nexport const AssetLibraryAssetsGridLoadingCell\r\n = withDefaultStyles(AssetsGridLoadingCell, getStyle);\r\n","/* eslint-disable object-curly-newline */\r\nimport _ from 'underscore';\r\nimport React, { Fragment, useCallback, useMemo, useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classnames from 'classnames';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\n\r\nimport {\r\n TilesGridCellImage as CellImage,\r\n TilesGridCellDecorativeLabel as CellLabel,\r\n TextWithHighlight,\r\n TilesGridCellCardWithOverlay,\r\n TilesGridCellSelectionDecorator,\r\n TilesGridCellDeletionButtonDecorator,\r\n} from '@bingads-webui-campaign-react/asset-library-components';\r\nimport { CSMLAssetSource, getTimeDescription } from '@bingads-webui-campaign-react/asset-library-model';\r\nimport { CustomFluentUIIcons } from '@bingads-webui-campaign-react/asset-library-resources';\r\n\r\nimport { getImageAssetsGridCellStyle } from './styles/image-assets-grid-cell-style';\r\n\r\nconst ImageAssetsGridCell = ({\r\n item,\r\n highlightedText,\r\n isOverlayEnabled,\r\n isCellFocused,\r\n renderCellContent,\r\n renderOverlayContent,\r\n i18n,\r\n selectable,\r\n selected,\r\n isMultiSelecting, // is in multi-selection mode, need to show checkbox on cells\r\n onClick,\r\n deletable,\r\n onDelete,\r\n classes,\r\n}) => {\r\n //\r\n const [isImageLoaded, setImageLoaded] = useState(false);\r\n\r\n const { name, url, id, createdTime, updating, performanceLabel, sourceType } = item || {};\r\n const timeDesc = useMemo(() => getTimeDescription(createdTime, i18n), [createdTime, i18n]);\r\n\r\n const perfLabelProps = useMemo(() => {\r\n const labelProps = {\r\n best: {\r\n text: i18n.getString(_TL_('Top-rated')),\r\n classes: { iconTextWrapper: 'perf-label-icon-and-text-top-rated' },\r\n },\r\n };\r\n\r\n return performanceLabel && labelProps[performanceLabel.toLowerCase()];\r\n }, [i18n, performanceLabel]);\r\n\r\n const cellContent = useMemo(() => {\r\n const defaultContent = (\r\n \r\n \r\n {(sourceType === CSMLAssetSource.AIGenerated ||\r\n sourceType === CSMLAssetSource.BackgroundChangeGenerated ||\r\n sourceType === CSMLAssetSource.AIGeneratedByRecraft) && (\r\n
\r\n \r\n );\r\n if (renderCellContent) {\r\n return renderCellContent(defaultContent);\r\n }\r\n return defaultContent;\r\n }, [classes.imageCellLabelContainer, i18n, id, isImageLoaded, name, perfLabelProps, renderCellContent, sourceType, timeDesc, updating, url]);\r\n\r\n const funcRenderOverlayContent = useCallback(() => {\r\n if (renderOverlayContent) {\r\n return renderOverlayContent({ newLabel: timeDesc });\r\n }\r\n return null;\r\n }, [renderOverlayContent, timeDesc]);\r\n\r\n const onCellClick = useCallback(() => {\r\n if (selectable) {\r\n onClick({ item, selected });\r\n }\r\n }, [item, onClick, selectable, selected]);\r\n\r\n const withSelectionDecorator = useCallback(decoratedContent => (\r\n selectable ? (\r\n \r\n {decoratedContent}\r\n \r\n ) : decoratedContent\r\n ), [i18n, isCellFocused, item, name, onClick, selectable, selected]);\r\n\r\n const withDeleteButtonDecorator = useCallback(decoratedContent => (\r\n deletable ? (\r\n \r\n {decoratedContent}\r\n \r\n ) : decoratedContent\r\n ), [deletable, item, onDelete]);\r\n\r\n return (\r\n \r\n
\r\n {_.compose(withDeleteButtonDecorator, withSelectionDecorator)(cellContent)}\r\n \r\n \r\n
\r\n
\r\n {id && (\r\n
\r\n {`${i18n.getString(_TL_('ID'))} `}\r\n
\r\n )}\r\n
\r\n \r\n );\r\n } else {\r\n setVideoLoaded(true);\r\n\r\n if (status === 'Unverified') {\r\n defaultContent = \r\n
\r\n {selectable ? (\r\n \r\n {cellContent}\r\n \r\n ) : cellContent}\r\n \r\n \r\n
\r\n
\r\n {id && (\r\n
\r\n {`${i18n.getString(_TL_('ID'))} `}\r\n
\r\n )}\r\n
\r\n
\r\n
{i18n.getString(_TL_('Nothing to see here'))}
\r\n
{str}
\r\n
\r\n \r\n
\r\n \r\n { !allowedAssetType &&\r\n \r\n }\r\n \r\n
\r\n \r\n
\r\n {\r\n isAssetLibraryAIGCMVPEnabled && (\r\n \r\n )}\r\n {\r\n !isAssetLibraryAIGCMVPEnabled && (\r\n \r\n
\r\n )}\r\n {\r\n !allowedAssetType &&\r\n \r\n
\r\n }\r\n {\r\n currentFolderId === ROOT_FOLDER_ID &&\r\n \r\n
\r\n }\r\n \r\n
\r\n \r\n \r\n ), [searchBoxPlaceholder, searchText, onSearchTextChange, onSearchTextClear, onSearchTextChanging, onSearchTextBlur, tokens, allowedAssetType, assetTypeFilter, assetTypeFilterOptions, i18n, onAssetTypeChange, dropdownWidth, minHeightFilter, minWidthFilter, onImageSizeFilterChange, dateAddedFilter, dateAddedFilterCustomDateRange, dateAddedChoiceOptions, onDateAddedFilterChange, ianaTimeZone, dateFormat, isAssetLibraryAIGCMVPEnabled, assetSources, assetSourceOptions, onAssetSourceFilterChange, importSource, importSourceOptions, onImportSourceFilterChange, minDurationFilter, maxDurationFilter, onVideoDurationFilterChange, currentFolderId, searchLocationFilter, searchLocationOptions, onSearchLocationChange, isTopRatedFilterChecked]);\r\n\r\n const onRenderSortOption = useCallback(({ text, icon }) => (\r\n \r\n {text} \r\n {icon && (
\r\n ), []);\r\n\r\n const renderSortBy = useCallback(() => (\r\n \r\n onRenderSortOption(options[0])}\r\n />\r\n
\r\n ), [dropdownWidth, i18n, onRenderSortOption, onSortByChange, sortBy, sortingOptions]);\r\n\r\n const onRenderCell = useCallback(({ item, sectionName, ...others }) => {\r\n if (renderGridCell) {\r\n const cell = renderGridCell({\r\n item, searchText, sectionName, ...others,\r\n });\r\n if (cell) return cell;\r\n }\r\n return null;\r\n }, [renderGridCell, searchText]);\r\n\r\n const [isPageInited, setPageInited] = useState(false);\r\n const [isGridInited, setGridInited] = useState(false);\r\n const [loadingData, setLoadingData] = useState(false);\r\n const [loadingMoreData, setLoadingMoreData] = useState(false);\r\n\r\n const onRenderLoadingCell = useCallback(({ onLoading, sectionName }) => {\r\n // ensure not loading next page before initial data loading is done\r\n const onLoadingData = isPageInited && isGridInited && !loadingMoreData ? onLoading : undefined;\r\n if (sectionName === GridSectionName.Folder) {\r\n return \r\n \r\n {renderFilters()}\r\n \r\n \r\n {renderSortBy()}\r\n \r\n \r\n ) : (\r\n renderHeader({ renderFilters, renderSortBy })\r\n )\r\n ), [renderFilters, renderHeader, renderSortBy, tokens]);\r\n\r\n const foldersGridSection = useMemo(() => ({\r\n sectionName: GridSectionName.Folder,\r\n sectionTitle: i18n.getString(_TL_('Folders')),\r\n sectionClassName: 'asset-library-folders-section',\r\n itemKey: 'folderId',\r\n items: folders,\r\n totalItemCount: totalSubfoldersCount,\r\n config: FOLDER_GRID_CONFIG,\r\n selectedItems: sectionSelectedItems && sectionSelectedItems[GridSectionName.Folder],\r\n }), [folders, i18n, sectionSelectedItems, totalSubfoldersCount]);\r\n\r\n const assetsGridSection = useMemo(() => ({\r\n sectionName: GridSectionName.Asset,\r\n sectionTitle: i18n.getString(_TL_('Assets')),\r\n sectionClassName: 'asset-library-assets-section',\r\n itemKey: 'id',\r\n items: loadedAssetList,\r\n totalItemCount: totalAssetCount,\r\n selectedItems: sectionSelectedItems && sectionSelectedItems[GridSectionName.Asset],\r\n }), [i18n, loadedAssetList, sectionSelectedItems, totalAssetCount]);\r\n\r\n const sectionGridData = useMemo(\r\n () => ([foldersGridSection, assetsGridSection]),\r\n [assetsGridSection, foldersGridSection]\r\n );\r\n\r\n // init page\r\n useEffect(() => {\r\n if (!isPageInited && assetLibraryUserPreferences) {\r\n setSortBy(assetLibraryUserPreferences.sortBy || CSMLSortBy.MostRecent);\r\n setPageInited(true);\r\n }\r\n }, [assetLibraryUserPreferences, isPageInited, setSortBy]);\r\n\r\n useEffect(() => {\r\n if (isAssetLibraryAIGCMVPEnabled) {\r\n setClarityTag({ AssetLibraryCopilot: 'true' });\r\n }\r\n }, [isAssetLibraryAIGCMVPEnabled]);\r\n\r\n // load data for initial page load\r\n useEffect(() => {\r\n if (!isPageInited) {\r\n // wait until page is initialized\r\n return;\r\n }\r\n\r\n if (reload) { // Important! Add a trivial log so that reload will be an explicit dep.\r\n logger.logTrace('force to reload');\r\n }\r\n\r\n setLoadingData(true);\r\n loadDataAsync()\r\n .tapCatch((err) => { // throw out so that this error will be shown in console for easy debugging\r\n onFailedToLoadData(err);\r\n }).finally(() => {\r\n setLoadingData(false);\r\n dataLoaded();\r\n setGridInited(true);\r\n });\r\n }, [isPageInited, loadDataAsync, onFailedToLoadData, logger, dataLoaded, reload]);\r\n\r\n const loadNextPage = useCallback(() => {\r\n setLoadingMoreData(true);\r\n loadMoreData({ count: DEFAULT_PAGE_SIZE }).catch((err) => {\r\n onFailedToLoadData(err);\r\n }).finally(() => setLoadingMoreData(false));\r\n }, [loadMoreData, onFailedToLoadData]);\r\n\r\n const isPageLoading = !isPageInited\r\n || loadingData || isSectionDataLoadingStatus(sectionGridData) || reloadingFolders;\r\n\r\n const onFolderPathClicked = useCallback((item) => {\r\n logger.logTrace('Navigate to folder in path', { folderId: item.folderId });\r\n onFolderNavigationChange();\r\n navigateToFolderInPath({ id: item.folderId });\r\n }, [navigateToFolderInPath, onFolderNavigationChange, logger]);\r\n\r\n const hadNoData = isSectionDataEmptyStatus(sectionGridData);\r\n\r\n const bulkTookbar = useMemo(() => (renderToolbar && renderToolbar()), [renderToolbar]);\r\n\r\n return (\r\n \r\n
\r\n {/* banner */}\r\n {renderBanner && renderBanner()}\r\n {/* grid header or toolbar */}\r\n {!bulkTookbar ? (\r\n \r\n {onRenderHeader()}\r\n
\r\n ) : bulkTookbar}\r\n {/* display folder path breadcrumb under filter */}\r\n {displayFolderPath && \r\n {(!dataOwnerPageName || dataOwnerPageName === AssetLibraryPageName.LandingPage) && (\r\n
\r\n )}\r\n {/* show loading indicator */}\r\n {isPageLoading && (\r\n
\r\n \r\n )}\r\n {/* show spinner in the bottom */}\r\n {!isPageLoading && loadingMoreData && (\r\n
\r\n )}\r\n
\r\n 1)} isFilterSet={isAnyFilterSet} />\r\n
\r\n )}\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n);\r\n","import React from 'react';\r\n\r\nexport const SquareVideoSVGIcon = () => (\r\n \r\n \r\n);\r\n","import React from 'react';\r\n\r\nexport const CopilotSVGIcon = () => (\r\n \r\n \r\n);\r\n","import React from 'react';\r\nimport { registerIcons } from '@fluentui/style-utilities';\r\nimport { SparkeSVGIcon } from './assets/sparkle-svg-icon';\r\nimport { SquareVideoSVGIcon } from './assets/square-video-svg-icon';\r\nimport { CopilotSVGIcon } from './assets/copilot-svg-icon';\r\n\r\nregisterIcons({\r\n icons: {\r\n 'custom-icon-sparkle': \r\n {children}\r\n \r\n );\r\n};\r\n\r\nAssetWithFoldersDataServiceProvider.propTypes = {\r\n children: PropTypes.node.isRequired,\r\n imageRepository: PropTypes.shape({\r\n getImage: PropTypes.func,\r\n getImageCroppingTaskStatus: PropTypes.func,\r\n renameImage: PropTypes.func,\r\n deleteImage: PropTypes.func,\r\n updateCropSettings: PropTypes.func,\r\n }).isRequired,\r\n logger: PropTypes.shape({\r\n logTrace: PropTypes.func,\r\n logError: PropTypes.func,\r\n }).isRequired,\r\n aigcRepository: PropTypes.shape({}),\r\n folderRepository: PropTypes.shape({}).isRequired,\r\n videoRepository: PropTypes.shape({}).isRequired,\r\n allowedAssetType: PropTypes.string,\r\n i18n: PropTypes.shape({}).isRequired,\r\n perfMetricDateRange: PropTypes.shape({}),\r\n defaultPerfMetricDateRange: PropTypes.shape({}),\r\n};\r\n\r\nAssetWithFoldersDataServiceProvider.defaultProps = {\r\n aigcRepository: null,\r\n allowedAssetType: null,\r\n perfMetricDateRange: null,\r\n defaultPerfMetricDateRange: null,\r\n};\r\n\r\nexport const useAsssetWithFoldersDataService = () => useContext(AssetWithFoldersDataServiceContext);\r\n","import { useCallback, useMemo, useRef, useState } from 'react';\r\nimport { checkVideosIntermediateStatus } from '@bingads-webui-campaign-react/asset-library-model';\r\nimport _ from 'underscore';\r\n\r\nimport {\r\n transformVideoResponse,\r\n VideoChangedFieldsWithStatusUpdate\r\n} from '../repository/asset-response-transformers/video-response-transformer';\r\n\r\nexport const useCommonVideoRepoMethods = ({\r\n repository,\r\n videoRepository,\r\n logger,\r\n i18n,\r\n}) => {\r\n const latestTimestampRef = useRef(0);\r\n const [videoUpdated, setVideoUpdated] = useState({}); // sample: { 123: { .. } }\r\n const getVideoTaskStatus = useCallback((videoTasks) => {\r\n const requestTimestamp = Date.now();\r\n const videosToCheck = _.keys(videoTasks);\r\n\r\n return repository.updateVideoStatusByIds(videosToCheck).then((response) => {\r\n // if multipe requests are sent out, ensure to keep the result from the latest request\r\n let notFinishedTaskList = {};\r\n let newVideoUpdated = {};\r\n if (requestTimestamp > latestTimestampRef.current) {\r\n const responseKeys = [];\r\n\r\n response.forEach((item) => {\r\n responseKeys.push(item.IdString);\r\n const newItem = transformVideoResponse(item, i18n);\r\n newVideoUpdated = {\r\n ...newVideoUpdated,\r\n [item.IdString]: _.pick(newItem, VideoChangedFieldsWithStatusUpdate),\r\n };\r\n\r\n if (newItem && checkVideosIntermediateStatus(newItem)) {\r\n notFinishedTaskList = { ...notFinishedTaskList, [newItem.id]: newItem.status };\r\n }\r\n });\r\n\r\n // eslint-disable-next-line no-param-reassign\r\n latestTimestampRef.current = requestTimestamp;\r\n }\r\n\r\n setVideoUpdated(newVideoUpdated);\r\n\r\n const taskCount = Object.keys(notFinishedTaskList).length;\r\n\r\n return { totalCount: taskCount };\r\n }).catch(() => {\r\n // log and ignore the error\r\n logger.logError('Failed to get videos task status.');\r\n });\r\n }, [logger, repository, i18n]);\r\n\r\n const addVideoCreative = useCallback(({ videoCreative }) => {\r\n const promise = videoRepository.addVideoCreative({ videoCreative });\r\n return promise;\r\n }, [videoRepository]);\r\n\r\n const getVideo = useCallback(({ id, fetchMetadata }) => {\r\n const promise = videoRepository.getVideo({ id, fetchMetadata });\r\n return promise;\r\n }, [videoRepository]);\r\n\r\n const returnVal = useMemo(() => ({\r\n getVideoTaskStatus,\r\n videoUpdated,\r\n addVideoCreative,\r\n getVideo,\r\n }), [addVideoCreative, getVideo, getVideoTaskStatus, videoUpdated]);\r\n\r\n return returnVal;\r\n};\r\n","import React, { useContext } from 'react';\r\nimport hoistNonReactStatics from 'hoist-non-react-statics';\r\nimport { CopilotRepositoryProvider, useCopilotRepositoryContext } from '@bingads-webui/inline-copilot';\r\nimport { getDisplayName } from '@bingads-webui-react/hoc-utils';\r\nimport { ServerContext } from '@bingads-webui-campaign-react/server-context';\r\n\r\nexport const withCopilotDataServiceProvider = (WrappedComponent) => {\r\n const Wrapper = (props) => {\r\n const {\r\n i18n,\r\n finalUrl,\r\n permissions,\r\n } = props;\r\n\r\n const serverContext = useContext(ServerContext);\r\n\r\n const useClipchamp = permissions && permissions.dynamic && permissions.dynamic.VideoTemplateUI;\r\n\r\n return (\r\n \r\n \r\n (\r\n \r\n {showBackButton &&\r\n
\r\n goBackToDefault()} ariaLabel={i18n.getString(_TL_('back'))} />\r\n
\r\n }\r\n
\r\n {i18n.getString(title)}\r\n
\r\n {onRenderHeaderContent && onRenderHeaderContent({ ...props })}\r\n
\r\n {onRenderFooterContent && onRenderFooterContent({ ...props })}\r\n 0 ? 'assertive' : 'off'}>\r\n {\r\n errors.length > 0 && errors.map(error => error)\r\n }\r\n \r\n {\r\n showApplyButton && (\r\n triggerAddImagesRef.current()} className={classnames('apply-button', 'add-image-apply-button', classes.applyButton)} text={i18n.getString(_TL_('Apply'))} disabled={disableApplyButton} />\r\n )\r\n }\r\n setIsOpen(false)} className={classnames('cancel-button', 'add-image-cancel-button')} text={i18n.getString(_TL_('Cancel'))} />\r\n {\r\n selectionInfoText && (\r\n \r\n {selectionInfoText}\r\n
\r\n )\r\n }\r\n \r\n )}\r\n styles={panelStylesProp}\r\n layerProps={layerProps}\r\n >\r\n {\r\n onRenderSubtitle && !hideSubtitle &&\r\n onRenderSubtitle({\r\n subtitleClass: classes.subtitle,\r\n i18n,\r\n aid,\r\n cid,\r\n onAssetLibraryLinkClick: (isAdStudioEnabled) => {\r\n if (isAdStudioEnabled) {\r\n logger.logTrace('Ads studio link in Ad creation flow panel clicked');\r\n } else {\r\n logger.logTrace('Asset library link in Ad creation flow panel clicked');\r\n }\r\n },\r\n })\r\n }\r\n {\r\n showBlocker &&\r\n \r\n \r\n }\r\n {\r\n onRenderContent({\r\n setHideSubtitle,\r\n setShowBlocker,\r\n setErrors,\r\n goToView,\r\n setShowApplyButton,\r\n setDisableApplyButton,\r\n setSelectionInfoText,\r\n triggerAddImagesRef,\r\n eventHandler,\r\n ...props,\r\n })\r\n }\r\n \r\n );\r\n};\r\n\r\nAddMediaPanelInternal.propTypes = {\r\n isOpen: PropTypes.bool.isRequired,\r\n setIsOpen: PropTypes.func.isRequired,\r\n initialView: PropTypes.string,\r\n managedViewSelectionState: PropTypes.string,\r\n updateManagedViewSelectionState: PropTypes.func,\r\n assetLibraryConfig: PropTypes.shape({}).isRequired,\r\n i18n: PropTypes.shape({}).isRequired,\r\n aid: PropTypes.string.isRequired,\r\n cid: PropTypes.string.isRequired,\r\n errorMessage: PropTypes.string,\r\n perfMarker: PropTypes.shape({\r\n willFetchFile: PropTypes.func.isRequired,\r\n willInit: PropTypes.func.isRequired,\r\n willFetchData: PropTypes.func.isRequired,\r\n willRender: PropTypes.func.isRequired,\r\n done: PropTypes.func.isRequired,\r\n createChild: PropTypes.func.isRequired,\r\n }).isRequired,\r\n logger: PropTypes.shape({\r\n logTrace: PropTypes.func,\r\n }).isRequired,\r\n addMediaConfig: PropTypes.shape({}),\r\n eventHandler: PropTypes.shape({}),\r\n};\r\n\r\nAddMediaPanelInternal.defaultProps = {\r\n initialView: _.noop,\r\n managedViewSelectionState: null,\r\n updateManagedViewSelectionState: _.noop,\r\n errorMessage: '',\r\n addMediaConfig: _.noop,\r\n eventHandler: {},\r\n};\r\n\r\nexport const AddMediaPanel = withPerfMarker(AddMediaPanelInternal);\r\n","import React, { useCallback, useMemo, useContext } from 'react';\r\nimport { stringifySync } from '@bingads-webui/safe-json';\r\n\r\nimport PropTypes from 'prop-types';\r\nimport Promise from 'bluebird';\r\nimport { each, first, get, map, isObject, filter } from 'underscore';\r\nimport classnames from 'classnames';\r\nimport { makeStyles, Button } from '@fluentui/react-components';\r\nimport { ShareMultipleRegular } from '@fluentui/react-icons';\r\nimport { LearnMoreLink } from '@bingads-webui-campaign-react/help';\r\nimport { Stack, IconButton } from '@bingads-webui-react/fabric-control';\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport {\r\n ImageFilePicker,\r\n generatePreviewArray,\r\n updateProgress,\r\n updateFilePreviewArrayUploadProgress,\r\n} from '@bingads-webui-campaign-react/upload-file-picker';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport {\r\n getImageValidationErrorMessage,\r\n validateImageSyncAsyncWithDimensionParams,\r\n getImageDetailAsync,\r\n} from '@bingads-webui-campaign/image-experience-utils';\r\nimport { handleRealUsedFlag, RealUsedFlagSuffix } from '@bingads-webui-campaign-react/asset-library-model';\r\n\r\nimport { getMediaSourcesContainerStyles } from './styles';\r\n\r\nconst MAX_UPSCALED_SIZE = 4;\r\n\r\nconst useStyles = makeStyles({\r\n investBtnWrapper: {\r\n '&:hover, &:active, &:focus, &:focus-within': {\r\n color: '#0078d4',\r\n backgroundColor: '#f0f0f0',\r\n borderTopLeftRadius: '99px',\r\n borderTopRightRadius: '99px',\r\n borderBottomLeftRadius: '99px',\r\n borderBottomRightRadius: '99px',\r\n },\r\n '& span.fui-Button__icon': {\r\n width: '30px',\r\n height: '30px',\r\n fontSize: '30px',\r\n },\r\n },\r\n investBtn: {\r\n width: '52px',\r\n minWidth: '52px',\r\n height: '52px',\r\n color: '#0078d4',\r\n backgroundColor: '#DEECF9',\r\n borderTopLeftRadius: '99px',\r\n borderTopRightRadius: '99px',\r\n borderBottomLeftRadius: '99px',\r\n borderBottomRightRadius: '99px',\r\n cursor: 'pointer',\r\n },\r\n});\r\n\r\nexport const AddMediaSourcesContainer = ({\r\n setUploadPreviewMediaArr,\r\n setShowUploadPreview,\r\n setUploadErrors,\r\n setHideSubtitle,\r\n buttonConfig,\r\n goToView,\r\n uploadMediaConfig: {\r\n maxUploadNum,\r\n minSize,\r\n minUploadSize,\r\n uploadMedia,\r\n processUploadedMedia,\r\n onProcessUploadComplete,\r\n },\r\n logger,\r\n assetLibraryConfig,\r\n supportImageUpscale,\r\n}) => {\r\n const styles = useStyles();\r\n\r\n const classes = useDefaultStyles(getMediaSourcesContainerStyles);\r\n const i18n = useContext(I18nContext);\r\n\r\n const legacyI18n = useMemo(() => window.globalLegacyI18n.get('$/i18n!legacy/global'), []);\r\n\r\n // TODO: check whether the video upload can reuse this function, if not pass as props\r\n const onFileRead = useCallback((imageSources, uploadMediaInfo) => {\r\n // if more than the max number of uploadable images is selected\r\n // just upload the first images in the array up to that max number\r\n const numToUpload = Math.min(maxUploadNum, imageSources.length);\r\n const imagesToUpload = first(imageSources, numToUpload);\r\n const isMultipleImages = imagesToUpload.length > 1;\r\n\r\n setUploadErrors([]);\r\n\r\n const isImageUpscaled = [];\r\n const minimumHeight = minUploadSize.length > 1 ? minUploadSize[1] : minSize[1];\r\n const minimumWidth = minUploadSize.length > 1 ? minUploadSize[0] : minSize[0];\r\n\r\n const validateImagesPromise = Promise.all(imagesToUpload.map((imageSource, index) => validateImageSyncAsyncWithDimensionParams({\r\n imageSource,\r\n minimumHeight,\r\n minimumWidth,\r\n })\r\n .then(() => getImageDetailAsync(imageSource))\r\n .then((img) => {\r\n if (supportImageUpscale && minUploadSize.length > 1 && minSize.length > 1 && img &&\r\n ((img.naturalWidth >= minUploadSize[0] && img.naturalWidth < minSize[0]) ||\r\n (img.naturalHeight >= minUploadSize[1] && img.naturalHeight < minSize[1]))\r\n ) {\r\n isImageUpscaled[index] = true;\r\n } else {\r\n isImageUpscaled[index] = false;\r\n }\r\n }).catch((e) => {\r\n if (e && e.message === 'SizeValidationError' && logger && logger.logTrace) {\r\n logger.logTrace(`Ad creation flow per file - SizeValidationError: ${stringifySync(e)}`);\r\n logger.logTrace(`Ad creation flow per file - SizeValidationError - ImageSource: ${stringifySync(imageSource)}`);\r\n }\r\n throw e;\r\n })));\r\n\r\n const doubleValidationImagesPromise = validateImagesPromise\r\n .then(() => {\r\n const needUpscaledImage = filter(isImageUpscaled);\r\n if (needUpscaledImage.length > MAX_UPSCALED_SIZE) {\r\n // When the need upscaled image count over the max size, should skip the upscale feature and use original threshold to validate again.\r\n return Promise.all(imagesToUpload.map((imageSource, index) => {\r\n if (isImageUpscaled[index] === true) {\r\n return validateImageSyncAsyncWithDimensionParams({\r\n imageSource,\r\n minimumHeight: minSize[1],\r\n minimumWidth: minSize[0],\r\n }).catch((e) => {\r\n if (e && e.message === 'SizeValidationError' && logger && logger.logTrace) {\r\n logger.logTrace(`Ad creation flow per file - SizeValidationError: ${stringifySync(e)}`);\r\n logger.logTrace(`Ad creation flow per file - SizeValidationError - ImageSource: ${stringifySync(imageSource)}`);\r\n }\r\n throw e;\r\n });\r\n }\r\n return Promise.resolve();\r\n }));\r\n }\r\n return Promise.resolve();\r\n });\r\n\r\n return doubleValidationImagesPromise\r\n .then(() => {\r\n const imagesForPreview = generatePreviewArray({\r\n files: uploadMediaInfo,\r\n fileSources: imagesToUpload,\r\n });\r\n\r\n setUploadPreviewMediaArr(imagesForPreview);\r\n setShowUploadPreview(true);\r\n setHideSubtitle(true);\r\n\r\n const setProgress = (index, progress) => {\r\n setUploadPreviewMediaArr((prevArr) => {\r\n const newState =\r\n updateFilePreviewArrayUploadProgress(index, progress)({ previewArr: prevArr });\r\n\r\n return newState.previewArr;\r\n });\r\n };\r\n\r\n const imageUploadPromises = [];\r\n\r\n each(imagesToUpload, (imageSource, index) => {\r\n imageUploadPromises.push(uploadMedia({\r\n imageData: imageSource,\r\n updateCurrentProgress: updateProgress({\r\n setProgress,\r\n index,\r\n uploadProgressBoundary: 1,\r\n }),\r\n name: uploadMediaInfo[index].name,\r\n index,\r\n }));\r\n });\r\n\r\n return Promise.all(imageUploadPromises)\r\n .then((images) => {\r\n if (images) {\r\n const imageIds = images && images.map(v => v.imageId).join(',');\r\n logger.logTrace('Ad creation flow - uploaded local images', { imageIds, count: images.length });\r\n }\r\n const processPromises = [];\r\n\r\n each(images, ({ imageId }, index) => {\r\n processPromises.push(processUploadedMedia({\r\n imageId,\r\n index,\r\n updateCurrentProgress: updateProgress({\r\n setProgress,\r\n index,\r\n uploadProgressBoundary: 1,\r\n }),\r\n }));\r\n });\r\n\r\n return Promise.all(processPromises)\r\n .then((args) => {\r\n const newArgs = map(args, (item, index) => {\r\n if (isObject(item)) {\r\n return {\r\n ...item,\r\n isImageUpscaled: isImageUpscaled[index],\r\n };\r\n }\r\n return item;\r\n });\r\n return onProcessUploadComplete(newArgs);\r\n });\r\n });\r\n })\r\n .catch((e) => {\r\n let error = e;\r\n\r\n if (!e || e.message !== 'SizeValidationError') {\r\n const code = e && e.body && e.body.value;\r\n error = { message: get(code, [0, 'Code']) };\r\n }\r\n\r\n setShowUploadPreview(false);\r\n setUploadPreviewMediaArr([]);\r\n const skipDimension = supportImageUpscale && minUploadSize.length > 1;\r\n const validationError = getImageValidationErrorMessage(error, legacyI18n, isMultipleImages, skipDimension);\r\n setUploadErrors([\r\n validationError || (\r\n \r\n {i18n.getString(_TL_('One or more assets failed to upload. Please try again'))}\r\n \r\n ),\r\n ]);\r\n logger.logTrace(`Ad creation flow - uploaded local images failed, error: ${validationError || 'Failed to upload'}`);\r\n if (error && error.message === 'SizeValidationError' && logger && logger.logTrace) {\r\n logger.logTrace(`Ad creation flow - SizeValidationError: ${stringifySync(error)}`);\r\n }\r\n });\r\n }, [\r\n setUploadPreviewMediaArr,\r\n setShowUploadPreview,\r\n uploadMedia,\r\n setUploadErrors,\r\n maxUploadNum,\r\n setHideSubtitle,\r\n legacyI18n,\r\n minSize,\r\n processUploadedMedia,\r\n logger,\r\n i18n,\r\n minUploadSize,\r\n onProcessUploadComplete,\r\n supportImageUpscale,\r\n ]);\r\n\r\n const onMediaButtonClick = useCallback((view) => {\r\n const { assetLibraryAccountPreferences } = assetLibraryConfig;\r\n handleRealUsedFlag(assetLibraryAccountPreferences, RealUsedFlagSuffix.Picker);\r\n return goToView(view);\r\n }, [assetLibraryConfig, goToView]);\r\n\r\n return (\r\n \r\n \r\n \r\n {\r\n buttonConfig.map(({\r\n iconName,\r\n iconStyles,\r\n label,\r\n view,\r\n buttonLocator,\r\n }) => (\r\n \r\n {buttonLocator === 'invest-images' &&\r\n \r\n
\r\n }\r\n {buttonLocator !== 'invest-images' &&\r\n onMediaButtonClick(view)}\r\n styles={{\r\n root: {\r\n width: 52,\r\n height: 52,\r\n background: '#DEECF9',\r\n borderRadius: '99px',\r\n },\r\n }}\r\n ariaLabel={i18n.getString(label)}\r\n />\r\n }\r\n \r\n {i18n.getString(label)}\r\n
\r\n \r\n ))\r\n }\r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nAddMediaSourcesContainer.propTypes = {\r\n setUploadPreviewMediaArr: PropTypes.func.isRequired,\r\n setShowUploadPreview: PropTypes.func.isRequired,\r\n uploadMediaConfig: PropTypes.shape({\r\n uploadMedia: PropTypes.func.isRequired,\r\n maxUploadNum: PropTypes.number.isRequired,\r\n minSize: PropTypes.arrayOf(PropTypes.number).isRequired,\r\n minUploadSize: PropTypes.arrayOf(PropTypes.number),\r\n processUploadedMedia: PropTypes.func.isRequired,\r\n onProcessUploadComplete: PropTypes.func.isRequired,\r\n }).isRequired,\r\n setUploadErrors: PropTypes.func.isRequired,\r\n setHideSubtitle: PropTypes.func.isRequired,\r\n buttonConfig: PropTypes.arrayOf(PropTypes.shape({\r\n label: PropTypes.string,\r\n })).isRequired,\r\n goToView: PropTypes.func.isRequired,\r\n logger: PropTypes.shape({\r\n logTrace: PropTypes.func,\r\n }).isRequired,\r\n assetLibraryConfig: PropTypes.shape({\r\n assetLibraryAccountPreferences: PropTypes.shape({}),\r\n }).isRequired,\r\n supportImageUpscale: PropTypes.bool,\r\n};\r\n\r\nAddMediaSourcesContainer.defaultProps = {\r\n supportImageUpscale: false,\r\n};\r\n","const flexGrowRules = {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n flexGrow: 1,\r\n};\r\n\r\nexport const getPivotContainerStyle = () => ({\r\n pivotContentContainer: {\r\n ...flexGrowRules,\r\n },\r\n pivotTabContent: {\r\n ...flexGrowRules,\r\n },\r\n addMediaContainer: {\r\n '& .add-media-tab-Upload': {\r\n marginTop: 24,\r\n },\r\n '& .add-media-tab-StockImages': {\r\n marginTop: 2,\r\n },\r\n '& .add-media-tab-WebsiteImages': {\r\n marginTop: 8,\r\n },\r\n '& .add-media-tab-SocialMedia': {\r\n marginTop: 24,\r\n },\r\n ...flexGrowRules,\r\n },\r\n});\r\n","import React, { useContext } from 'react';\r\nimport { map } from 'underscore';\r\nimport PropTypes from 'prop-types';\r\nimport classnames from 'classnames';\r\n\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { Pivot, PivotItem } from '@bingads-webui-react/fabric-control';\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\n\r\nimport { getPivotContainerStyle } from './pivot-container-style';\r\n\r\nexport const AssetLibraryAddMediaPivotContainer = (props) => {\r\n const { selectedKey, setSelectedKey, addMediaConfig } = props;\r\n\r\n const i18n = useContext(I18nContext);\r\n const classes = useDefaultStyles(getPivotContainerStyle);\r\n\r\n return (\r\n {\r\n setSelectedKey(item.props.itemKey);\r\n }}\r\n styles={{\r\n itemContainer: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n flexGrow: 1,\r\n '& > div': { // there's a magic div that exists underneath PivotItem root container for which\r\n // FluentUI doesn't expose a styling interface\r\n display: 'flex',\r\n flexDirection: 'column',\r\n flexGrow: 1,\r\n },\r\n },\r\n }}\r\n >\r\n {map(addMediaConfig, ({ title, onRenderTab, key }) => (\r\n \r\n \r\n {onRenderTab({\r\n ...props,\r\n classes,\r\n })}\r\n
\r\n \r\n ))}\r\n \r\n );\r\n};\r\n\r\nAssetLibraryAddMediaPivotContainer.propTypes = {\r\n selectedKey: PropTypes.string,\r\n setSelectedKey: PropTypes.func.isRequired,\r\n logger: PropTypes.shape({}).isRequired,\r\n addMediaConfig: PropTypes.arrayOf(PropTypes.shape({})),\r\n};\r\n\r\nAssetLibraryAddMediaPivotContainer.defaultProps = {\r\n selectedKey: undefined,\r\n addMediaConfig: [],\r\n};\r\n","import _ from 'underscore';\r\nimport React, { useCallback, useContext } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classnames from 'classnames';\r\n\r\nimport { Panel, PanelType, Overlay } from '@bingads-webui-react/fabric-control';\r\nimport { AssetLibrarySpinner } from '@bingads-webui-campaign-react/asset-library-spinner';\r\nimport { findParentElementWithClass } from '@bingads-webui-campaign-react/asset-library-model';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\n\r\nimport {\r\n PANEL_WIDTH,\r\n layerProps,\r\n panelStylesProp,\r\n panelStyles,\r\n} from './styles/panel-container-style';\r\n\r\nconst overlayStyles = {\r\n root: { zIndex: 2 },\r\n};\r\n\r\nconst getStyle = () => ({\r\n addMediaPanel: {\r\n ...panelStyles,\r\n },\r\n panelHeader: {\r\n paddingLeft: 24,\r\n paddingRight: 24,\r\n alignSelf: 'flex-start',\r\n flexGrow: 1,\r\n },\r\n panelTitle: {\r\n fontSize: 20,\r\n fontWeight: 600,\r\n display: 'inline-block',\r\n lineHeight: '27px',\r\n },\r\n});\r\n\r\nexport const AssetLibraryAddMediaPanelContainer = (props) => {\r\n const {\r\n onRenderFooterContent,\r\n isOpen,\r\n dataDirty,\r\n dismiss,\r\n onDismissedBegin,\r\n onRenderHeaderContent,\r\n showBlocker,\r\n headerText,\r\n customWidth,\r\n styles,\r\n navigation,\r\n className,\r\n children,\r\n } = props;\r\n //\r\n const i18n = useContext(I18nContext);\r\n const classes = useDefaultStyles(getStyle);\r\n\r\n // don't allow to close panel by losing focus\r\n const onDismiss = useCallback((evt) => {\r\n const target = evt && evt.currentTarget;\r\n const addMediaPanelElem = findParentElementWithClass(target, classes.addMediaPanel);\r\n if (addMediaPanelElem) {\r\n dismiss();\r\n }\r\n }, [classes.addMediaPanel, dismiss]);\r\n\r\n const onDismissed = useCallback(() => {\r\n onDismissedBegin();\r\n navigation.goBack({ reload: dataDirty });\r\n }, [dataDirty, navigation, onDismissedBegin]);\r\n\r\n return (\r\n (\r\n \r\n
\r\n {headerText}\r\n
\r\n {onRenderHeaderContent()}\r\n
\r\n \r\n }\r\n {children}\r\n \r\n );\r\n};\r\n\r\nAssetLibraryAddMediaPanelContainer.propTypes = {\r\n onRenderFooterContent: PropTypes.func,\r\n onRenderHeaderContent: PropTypes.func,\r\n isOpen: PropTypes.bool,\r\n dataDirty: PropTypes.bool,\r\n dismiss: PropTypes.func,\r\n onDismissedBegin: PropTypes.func,\r\n showBlocker: PropTypes.bool,\r\n headerText: PropTypes.string,\r\n children: PropTypes.element,\r\n navigation: PropTypes.shape({\r\n goBack: PropTypes.func.isRequired,\r\n }).isRequired,\r\n className: PropTypes.string,\r\n customWidth: PropTypes.number,\r\n styles: PropTypes.shape({}),\r\n};\r\n\r\nAssetLibraryAddMediaPanelContainer.defaultProps = {\r\n onRenderFooterContent: _.noop,\r\n isOpen: false,\r\n dataDirty: false,\r\n dismiss: _.noop,\r\n onDismissedBegin: _.noop,\r\n onRenderHeaderContent: null,\r\n showBlocker: false,\r\n headerText: '',\r\n children: null,\r\n className: '',\r\n customWidth: PANEL_WIDTH,\r\n styles: panelStylesProp,\r\n};\r\n","import React, { useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport { Spinner, SpinnerSize } from '@bingads-webui-react/fabric-control';\r\n\r\nexport const AssetLibrarySpinner = ({\r\n useCustomSize,\r\n className,\r\n customStyle,\r\n}) => {\r\n const spinnerStyles = useMemo(() => ({\r\n circle: useCustomSize ? { width: 50, height: 50 } : null,\r\n root: customStyle || {\r\n width: '100%',\r\n height: '100%',\r\n margin: 'auto',\r\n },\r\n }), [customStyle, useCustomSize]);\r\n\r\n return (\r\n 
}\r\n 
\r\n 
\r\n