\r\n
\r\n );\r\n};\r\n\r\nAdStudioInlineChartWrapperInner.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\nAdStudioInlineChartWrapperInner.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 AdStudioInlineChartWrapper = withInstrumentation(AdStudioInlineChartWrapperInner);\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\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\nimport { AdStudioInlineChartWrapper } from '../inline-chart-wrapper';\r\n\r\nexport const useAdStudioInlineChart = ({\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 pageContext.CurrentTabId = 'Asset';\r\n\r\n const renderInlineChart = ({\r\n isChartShown, filters, loadPerfTimeSeriesData, perfMetricDateRange, perfMarker,\r\n }) => (\r\n \r\n setDownloadShown(false)}\r\n totalRecordCount={totalAssetCount}\r\n downloadFormats={inlineDownloadConfigs.downloadFormats}\r\n segmentationTypes={[]}\r\n validateSegmentType={() => true} // if we don't have segment type, we don't need to validate it\r\n isFeedbackEnabled={false}\r\n data={inlineDownloadConfigs.data}\r\n allUsersType={inlineDownloadConfigs.allUsersType}\r\n repository={inlineDownloadConfigs.repository}\r\n clearAfterDownloadCall={false}\r\n isForVNext\r\n downloadBoxRole=\"listbox\"\r\n downloadFormatsRole=\"option\"\r\n />\r\n
\r\n );\r\n});\r\n\r\nInlineDownloadWrapperInternal.propTypes = {\r\n setDownloadShown: PropTypes.func,\r\n totalAssetCount: PropTypes.number.isRequired,\r\n ReportEmailRule: PropTypes.shape({}),\r\n getInlineDownloadColumns: PropTypes.func.isRequired,\r\n getInlineDownloadFilter: PropTypes.func.isRequired,\r\n InlineDownloadReactForm: PropTypes.element.isRequired,\r\n InlineDownloadCampaignODataRepository: PropTypes.func.isRequired,\r\n};\r\n\r\nInlineDownloadWrapperInternal.defaultProps = {\r\n setDownloadShown: () => {},\r\n ReportEmailRule: undefined,\r\n};\r\n\r\nconst DelayedInlineDownloadWrapperInternal = React.lazy(() =>\r\n import(/* webpackMode: 'eager' */ '@bingads-webui-campaign-legacy/griddownload/view/loader')\r\n .then(({ InlineDownloadReactForm, InlineDownloadCampaignODataRepository }) => ({\r\n default: React.memo(props => (\r\n
\r\n );\r\n }\r\n // image cell\r\n return (\r\n \r\n
\r\n );\r\n }, [navigateIntoFolder, resetSelectionState, logger, classes.targetFolderPickerFolderCell, i18n]);\r\n\r\n const onFailedToLoadData = useCallback(() => {\r\n notificationApi.showWarning(i18n.getString(_TL_('Failed to load assets. Please refresh the page and try again.')));\r\n }, [i18n, notificationApi]);\r\n\r\n const onFolderPathClicked = useCallback((item) => {\r\n navigateToFolderInPath({ id: item.key });\r\n }, [navigateToFolderInPath]);\r\n\r\n const onRenderHeader = useCallback(() => (\r\n \r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nAdsStudioTargetFolderPicker.propTypes = {\r\n selectedFolder: PropTypes.shape({}),\r\n setSelectedFolder: PropTypes.func.isRequired,\r\n dataService: PropTypes.shape({\r\n folders: PropTypes.arrayOf(PropTypes.shape({})),\r\n navigateIntoFolder: PropTypes.func,\r\n folderPath: PropTypes.arrayOf(PropTypes.shape({})),\r\n navigateToFolderInPath: 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 ianaTimeZone: PropTypes.string.isRequired,\r\n dateFormat: PropTypes.string.isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n assetLibraryUserPreferences: PropTypes.shape({}),\r\n notificationApi: PropTypes.shape({\r\n showWarning: PropTypes.func,\r\n }).isRequired,\r\n permissions: PropTypes.shape({\r\n dynamic: PropTypes.shape({}),\r\n }),\r\n};\r\n\r\nAdsStudioTargetFolderPicker.defaultProps = {\r\n selectedFolder: null,\r\n assetLibraryUserPreferences: null,\r\n permissions: { dynamic: {} },\r\n};\r\n\r\n","import React, { useState, useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport {\r\n Dialog,\r\n DialogActions,\r\n DialogContent,\r\n DialogBody,\r\n DialogSurface,\r\n DialogTitle,\r\n Button,\r\n mergeClasses,\r\n} from '@fluentui/react-components';\r\nimport { Dismiss20Regular } from '@fluentui/react-icons';\r\n\r\nimport { AdsStudioTargetFolderPicker } from './target-folder-picker-view';\r\nimport { useTargetFolderPickerStyle } from './target-folder-picker-style';\r\n\r\n// const modalWidth = 940;\r\n\r\nexport const TargetFolderPickerModal = ({\r\n dataService, isGlobalSearch, sourceFolderId, show, onMoveHereClick, onCancel, i18n, ...rest\r\n}) => {\r\n const [selectedFolder, setSelectedFolder] = useState(null);\r\n\r\n const { currentFolderId } = dataService;\r\n\r\n const onMoveClickButtonClick = () => {\r\n onMoveHereClick(currentFolderId);\r\n };\r\n\r\n const moveHereButtonDisabled = !isGlobalSearch && (currentFolderId === sourceFolderId);\r\n\r\n const DismissIcon = useMemo(() => \r\n updateWaterfallFilter({\r\n filterType: WaterfallFilterType.DateFilter,\r\n filter: data,\r\n })}\r\n serverContext={serverContext}\r\n minDate={civilMinDate}\r\n />\r\n
\r\n );\r\n\r\n return (\r\n 
\r\n
\r\n \r\n
\r\n \r\n {title}\r\n
\r\n \r\n {description}\r\n
\r\n \r\n
\r\n \r\n );\r\n};\r\nAssetsEntryCard.propTypes = {\r\n id: PropTypes.string,\r\n title: PropTypes.string.isRequired,\r\n description: PropTypes.string.isRequired,\r\n imageSrc: PropTypes.string.isRequired,\r\n onClick: PropTypes.func.isRequired,\r\n isFillWidth: PropTypes.bool,\r\n cardClassName: PropTypes.string,\r\n};\r\n\r\nAssetsEntryCard.defaultProps = {\r\n id: undefined,\r\n isFillWidth: false,\r\n cardClassName: '',\r\n};\r\n\r\nexport const AddAssetEntryCard = AssetsEntryCard;\r\n","import _ from 'underscore';\r\nimport React, { Children, cloneElement, forwardRef, useRef } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Overlay, Layer } from '@bingads-webui-react/fabric-control';\r\n\r\nimport { Button, makeStyles, mergeClasses } from '@fluentui/react-components';\r\nimport {\r\n DrawerHeader,\r\n DrawerHeaderTitle,\r\n DrawerBody,\r\n DrawerFooter,\r\n DrawerOverlay,\r\n} from '@fluentui/react-drawer';\r\nimport { Dismiss24Regular } from '@fluentui/react-icons';\r\n\r\nconst TOP_BANNER_HEIGHT = 60;\r\n\r\nconst useStyles = makeStyles({\r\n addMediaPanel: {\r\n height: `calc(100vh - ${TOP_BANNER_HEIGHT}px)`,\r\n top: 'auto',\r\n bottom: '0px',\r\n },\r\n panelContent: {\r\n '-ms-overflow-style': 'none',\r\n scrollbarWidth: 'none',\r\n },\r\n overlay: {\r\n zIndex: '2',\r\n },\r\n layer: {\r\n zIndex: '1000',\r\n },\r\n});\r\n\r\nexport const AdsStudioPanelContainer = forwardRef((props, ref) => {\r\n const {\r\n onRenderFooterContent,\r\n isOpen,\r\n dismiss,\r\n headerText,\r\n children,\r\n size,\r\n className,\r\n } = props;\r\n\r\n const overlayBodyRef = useRef(null);\r\n const styles = useStyles();\r\n\r\n return (\r\n <>\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 = withAdsStudioStyles(CellOverlay, getCellOverlayStyle);\r\n","/* eslint-disable no-unused-vars */\r\nconst 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, core: { palette = {} } = {} } = {}) => ({\r\n cellCardContainer: {\r\n ...getCommonCellCardStyle(palette),\r\n },\r\n});\r\n\r\nexport const getCellCardWithOverlayStyle = ({ components, core: { 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, &:focus-within': 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\n\r\nimport { TilesGridCellOverlay } from './tiles-grid-cell-overlay';\r\nimport { withAdsStudioStyles } from '../../../theme/with-ads-studio-styles';\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 && event.stopPropagation) { event.stopPropagation(); }\r\n if (event && event.preventDefault) { event.preventDefault(); }\r\n };\r\n\r\n const onKeyDown = (event) => {\r\n if (event.keyCode === 13) { // Enter key\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 {renderOverlayContent ? renderOverlayContent() : null}\r\n
\r\n { renderStaticOverlayContent ?\r\n \r\n {renderStaticOverlayContent()}\r\n
\r\n : null}\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 = withAdsStudioStyles(CellCard, getCellCardStyle);\r\nexport const TilesGridCellCardWithOverlay = withAdsStudioStyles(CellCardWithOverlay, getCellCardWithOverlayStyle);\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Icon } from '@fluentui/react';\r\n\r\nimport { withAdsStudioStyles } from '../../../theme/with-ads-studio-styles';\r\nimport { getGridDecorativeIconStyle } from '../styles/tiles-grid-cell-decorative-icon';\r\n\r\nconst CellDecorativeIcon = ({\r\n iconName,\r\n classes,\r\n i18n,\r\n}) => (\r\n \r\n
\r\n);\r\n\r\nCellDecorativeIcon.propTypes = {\r\n iconName: PropTypes.string.isRequired,\r\n classes: PropTypes.shape({\r\n centerContainer: PropTypes.string,\r\n circleContainer: PropTypes.string,\r\n iconContent: PropTypes.string,\r\n labelName: PropTypes.string,\r\n }),\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n};\r\n\r\nCellDecorativeIcon.defaultProps = {\r\n classes: {},\r\n};\r\n\r\nexport const TilesGridCellDecorativeIcon\r\n = withAdsStudioStyles(CellDecorativeIcon, getGridDecorativeIconStyle);\r\n","/* eslint-disable no-unused-vars */\r\nexport const getGridDecorativeIconStyle = ({ components, core: { palette = {} } = {} } = {}) => ({\r\n centerContainer: {\r\n position: 'absolute',\r\n top: '50%',\r\n left: '50%',\r\n transform: 'translate(-50%, -50%)',\r\n },\r\n circleContainer: {\r\n width: 80,\r\n height: 41,\r\n backgroundColor: 'rgb(50,49,48, 0.6)',\r\n borderRadius: 4,\r\n boxShadow: '0px 4px 16px rgb(0 0 0 / 14%)',\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n },\r\n iconContent: {\r\n fontSize: 20,\r\n color: palette.white,\r\n },\r\n labelName: {\r\n fontSize: 16,\r\n color: palette.white,\r\n marginLeft: 5,\r\n },\r\n});\r\n","import { makeStyles, shorthands, tokens } from '@fluentui/react-components';\r\n\r\nexport const useGridDecorativeLabelStyle = makeStyles({\r\n tilesGridCellDecorativeLabel: {\r\n color: tokens.colorNeutralForegroundInverted,\r\n fontWeight: 600,\r\n fontSize: '12px',\r\n lineHeight: '16px',\r\n\r\n '& .label-icon-and-text': {\r\n display: 'flex',\r\n ...shorthands.borderRadius('4px'),\r\n ...shorthands.padding('2px', '8px', '2px', '4px'),\r\n marginRight: '6px',\r\n // background: 'linear-gradient(158.29deg, #0078D4 16.69%, #4400D4 85.76%)',\r\n backgroundColor: tokens.colorNeutralBackgroundStatic,\r\n '& .label-icon': {\r\n marginRight: '4px',\r\n fontSize: '16px',\r\n },\r\n },\r\n\r\n '& .label-secondary-text': {\r\n position: 'relative',\r\n left: '-10px',\r\n opacity: 0,\r\n ...shorthands.transition('opacity', '0.5s', '0.1s', 'transform', '0.3s', '0.1s'),\r\n },\r\n\r\n '& .additional-icon-content': {\r\n width: '25px',\r\n height: '24px',\r\n backgroundColor: 'rgb(50,49,48, 0.6)',\r\n ...shorthands.borderRadius('4px'),\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n display: 'flex',\r\n marginRight: '8px',\r\n position: 'absolute',\r\n right: '50px',\r\n '& .additional-icon': {\r\n width: '17px',\r\n },\r\n },\r\n\r\n '& .label-additional-text': {\r\n position: 'absolute',\r\n right: '0px',\r\n '& .label-additional-content': {\r\n backgroundColor: tokens.colorNeutralBackgroundStatic,\r\n float: 'right',\r\n ...shorthands.padding('4px'),\r\n ...shorthands.borderRadius('4px'),\r\n },\r\n },\r\n },\r\n\r\n cellLabelDisplay: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n },\r\n});\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classnames from 'classnames';\r\n\r\nimport { videoIcon } from '../../../asset-images';\r\nimport { useGridDecorativeLabelStyle } from '../styles/tiles-grid-cell-decorative-label';\r\n\r\nconst CellDecorativeLabel = ({\r\n text,\r\n icon: Icon,\r\n secondaryText,\r\n additionaIconName,\r\n additionalText,\r\n customClass,\r\n}) => {\r\n const classes = useGridDecorativeLabelStyle();\r\n\r\n return (\r\n \r\n
\r\n \r\n {\r\n (text || Icon) && (\r\n
\r\n );\r\n};\r\n\r\nCellDecorativeLabel.propTypes = {\r\n text: PropTypes.string,\r\n icon: PropTypes.elementType,\r\n additionaIconName: PropTypes.string,\r\n secondaryText: PropTypes.string,\r\n additionalText: PropTypes.string,\r\n customClass: PropTypes.shape({\r\n cellLabel: PropTypes.string,\r\n iconTextWrapper: PropTypes.string,\r\n }),\r\n};\r\n\r\nCellDecorativeLabel.defaultProps = {\r\n text: null,\r\n icon: null,\r\n secondaryText: '',\r\n additionalText: null,\r\n additionaIconName: null,\r\n customClass: {},\r\n};\r\n\r\nexport const TilesGridCellDecorativeLabel = CellDecorativeLabel;\r\n","/* eslint-disable max-len */\r\nimport React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classnames from 'classnames';\r\nimport { IconButton } from '@fluentui/react';\r\n\r\nimport { withAdsStudioStyles } from '../../../theme/with-ads-studio-styles';\r\nimport { getCellDeletionButtonDecoratorStyle } from '../styles/tiles-grid-cell-deletion-button-decorator-style';\r\n\r\nconst iconProps = { iconName: 'Clear' };\r\n\r\nconst CellDeletionButtonDecorator = ({\r\n item, onDelete, children, classes,\r\n}) => {\r\n const onClick = (event) => {\r\n if (onDelete) {\r\n onDelete(item);\r\n }\r\n if (event.stopPropagation) { event.stopPropagation(); }\r\n if (event.preventDefault) { event.preventDefault(); }\r\n };\r\n\r\n return (\r\n <>\r\n {children}\r\n \r\n {Icon &&
\r\n )\r\n }\r\n {secondaryText && {text}
}\r\n {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
\r\n )\r\n }\r\n {additionalText}
\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 deleteButton: PropTypes.string,\r\n }).isRequired,\r\n};\r\n\r\nCellDeletionButtonDecorator.defaultProps = {\r\n onDelete: undefined,\r\n};\r\n\r\nexport const TilesGridCellDeletionButtonDecorator = withAdsStudioStyles(\r\n CellDeletionButtonDecorator,\r\n getCellDeletionButtonDecoratorStyle\r\n);\r\n","/* eslint-disable no-unused-vars */\r\nexport const getCellDeletionButtonDecoratorStyle = ({ components, core: { palette = {} } = {} } = {}) => ({\r\n cellDeletionButtonDecorator: {\r\n position: 'absolute',\r\n bottom: 8,\r\n right: 10,\r\n },\r\n deleteButton: {\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 '&:hover': {\r\n opacity: 0.9,\r\n },\r\n '&:active': {\r\n opacity: 1,\r\n },\r\n '& .ms-Button-icon': {\r\n margin: 0,\r\n },\r\n },\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 getTilesGridCellImageStyles = () => ({\r\n tilesGridCellImageContainer: {\r\n '& .cell-image-state': {\r\n ...positionFill,\r\n display: 'flex',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n },\r\n },\r\n imageStateOverlayClass: {\r\n position: 'absolute',\r\n width: '100%',\r\n height: '100%',\r\n top: 0,\r\n left: 0,\r\n },\r\n stateParent: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n width: '100%',\r\n height: '100%',\r\n },\r\n reloadBtn: {\r\n zIndex: 1,\r\n },\r\n});\r\n","import React, { useCallback, useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { noop } from 'underscore';\r\nimport classnames from 'classnames';\r\n\r\nimport { Image as FluentImage, ImageFit, ImageLoadState } from '@fluentui/react';\r\nimport { ArrowClockwiseRegular } from '@fluentui/react-icons';\r\n\r\nimport { AdsStudioSpinner } from '../../ads-studio-spinner';\r\nimport { withAdsStudioStyles } from '../../../theme/with-ads-studio-styles';\r\nimport { TilesGridCellActionButton as ActionButton } from './tiles-grid-cell-action-button';\r\nimport { getTilesGridCellImageStyles } from '../styles/tiles-grid-cell-image';\r\n\r\nconst RETRY_COUNT = 3;\r\nconst RETRY_DEALY = 1000;\r\n\r\nconst CellImage = ({\r\n src,\r\n alt,\r\n showSpinner,\r\n onLoaded,\r\n onError,\r\n i18n,\r\n onClick,\r\n enableRetry,\r\n classes,\r\n customClasses,\r\n onCustomizedSpinner,\r\n imageFit,\r\n}) => {\r\n //\r\n const [imageLoadState, setImageLoadState] = useState(ImageLoadState.notLoaded);\r\n\r\n const onLoadingStateChange = useCallback((s, onLoadError) => {\r\n if (s === ImageLoadState.loaded) {\r\n onLoaded(true);\r\n } else if (s === ImageLoadState.error) {\r\n onLoadError();\r\n // don't set error state until all retrying are failed\r\n return;\r\n }\r\n setImageLoadState(s);\r\n }, [onLoaded]);\r\n\r\n // retry image loading by creating a HTML Image element\r\n const reloadImage = useCallback((onLoadError) => {\r\n const img = new Image();\r\n img.onerror = () => {\r\n onLoadingStateChange(ImageLoadState.error, onLoadError);\r\n };\r\n img.onload = () => {\r\n onLoadingStateChange(ImageLoadState.loaded);\r\n };\r\n onLoadingStateChange(ImageLoadState.notLoaded);\r\n img.src = src;\r\n }, [onLoadingStateChange, src]);\r\n\r\n const onErrorWithRetry = useCallback((retryCount = RETRY_COUNT) => {\r\n if (enableRetry && retryCount > 0) {\r\n setTimeout(() => reloadImage(() => onErrorWithRetry(retryCount - 1)), RETRY_DEALY);\r\n } else {\r\n setImageLoadState(ImageLoadState.error);\r\n if (onError) {\r\n onError();\r\n }\r\n }\r\n }, [enableRetry, onError, reloadImage]);\r\n\r\n const onReloadImage = useCallback((event) => {\r\n if (imageLoadState === ImageLoadState.error) {\r\n reloadImage(onErrorWithRetry);\r\n }\r\n if (event.stopPropagation) { event.stopPropagation(); }\r\n if (event.preventDefault) { event.preventDefault(); }\r\n }, [imageLoadState, onErrorWithRetry, reloadImage]);\r\n\r\n const onImageLoadingStateChange = useCallback((s) => {\r\n onLoadingStateChange(s, onErrorWithRetry);\r\n }, [onErrorWithRetry, onLoadingStateChange]);\r\n\r\n\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nCellImage.propTypes = {\r\n src: PropTypes.string.isRequired,\r\n alt: PropTypes.string.isRequired,\r\n showSpinner: PropTypes.bool,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n onLoaded: PropTypes.func,\r\n onError: PropTypes.func,\r\n onClick: PropTypes.func,\r\n onCustomizedSpinner: PropTypes.func,\r\n enableRetry: PropTypes.bool,\r\n classes: PropTypes.shape({\r\n tilesGridCellImageContainer: PropTypes.string,\r\n imageStateOverlayClass: PropTypes.string,\r\n stateParent: PropTypes.string,\r\n reloadBtn: PropTypes.string,\r\n }).isRequired,\r\n customClasses: PropTypes.shape({\r\n containerClass: PropTypes.string,\r\n imageClass: PropTypes.string,\r\n }),\r\n imageFit: PropTypes.number,\r\n};\r\n\r\nCellImage.defaultProps = {\r\n showSpinner: true,\r\n onLoaded: noop,\r\n onError: noop,\r\n onClick: noop,\r\n enableRetry: true,\r\n customClasses: {},\r\n onCustomizedSpinner: undefined,\r\n imageFit: ImageFit.cover,\r\n};\r\n\r\nexport const TilesGridCellImage = withAdsStudioStyles(CellImage, getTilesGridCellImageStyles);\r\n","import { makeResetStyles, shorthands, tokens } from '@fluentui/react-components';\r\n\r\nexport const useCellSectionDecoratorStyle = makeResetStyles({\r\n width: '100%',\r\n height: '100%',\r\n '& .grid-cell-selection-decorator': {\r\n width: '100%',\r\n height: '100%',\r\n ...shorthands.overflow('hidden'),\r\n },\r\n '& .selected-checkbox': {\r\n position: 'absolute',\r\n top: '6px',\r\n right: '6px',\r\n },\r\n '& .selectedState': {\r\n outlineStyle: 'solid',\r\n outlineWidth: '4px',\r\n outlineColor: tokens.colorBrandBackground,\r\n ...shorthands.borderRadius('6px'),\r\n },\r\n '& .checkbox': {\r\n backgroundColor: tokens.colorNeutralForegroundInverted,\r\n zIndex: 2,\r\n width: '20px',\r\n height: '20px',\r\n ...shorthands.borderRadius(tokens.borderRadiusSmall),\r\n '& .fui-Checkbox__indicator': {\r\n width: '20px',\r\n height: '20px',\r\n ...shorthands.margin(0),\r\n },\r\n },\r\n});\r\n","/* eslint-disable jsx-a11y/no-static-element-interactions */\r\n/* eslint-disable jsx-a11y/click-events-have-key-events */\r\nimport React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Checkbox, mergeClasses } from '@fluentui/react-components';\r\n\r\nimport { useCellSectionDecoratorStyle } from '../styles/tiles-grid-cell-selection-decorator-style';\r\n\r\nexport const TilesGridCellSelectionDecorator = ({\r\n item, selected, onClick, children, ariaLabel, isFocused, classes,\r\n}) => {\r\n const onClickFunc = (event) => {\r\n if (onClick) {\r\n onClick({ item, selected });\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 === 13) { // Enter key\r\n onClickFunc(event);\r\n }\r\n };\r\n\r\n const cellSelectionDecoratorWrapper = useCellSectionDecoratorStyle();\r\n\r\n return (\r\n \r\n
\r\n \r\n {imageLoadState === ImageLoadState.notLoaded && showSpinner && (onCustomizedSpinner ?\r\n onCustomizedSpinner() : (
\r\n \r\n \r\n {children}\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","import { makeStyles, shorthands } from '@fluentui/react-components';\r\n\r\nconst commonStyles = {\r\n boxShadow: '0px 1.47522px 4.42567px rgba(0, 0, 0, 0.2), inset 0.295044px -0.295044px 0.590089px rgba(0, 0, 0, 0.2), inset -0.590089px 0.590089px 1.47522px rgba(255, 255, 255, 0.3)',\r\n ...shorthands.borderRadius('2px'),\r\n};\r\n\r\nexport const useFolderIconStyle = makeStyles({\r\n folderIconContainer: {\r\n position: 'relative',\r\n height: '52px',\r\n width: '68px',\r\n\r\n '& .folder-tag': {\r\n width: '50%',\r\n height: '28.36%',\r\n ...commonStyles,\r\n },\r\n\r\n '& .folder-content': {\r\n width: '100%',\r\n height: '85.84%',\r\n ...commonStyles,\r\n\r\n position: 'absolute',\r\n left: 0,\r\n bottom: 0,\r\n ...shorthands.overflow('hidden'),\r\n },\r\n },\r\n folderTag: {\r\n backgroundColor: '#1F65F1',\r\n },\r\n emptyFolderTag: {\r\n backgroundColor: '#A0A0A0',\r\n },\r\n folderContent: {\r\n backgroundColor: '#1F65F1',\r\n },\r\n emptyFolderContent: {\r\n backgroundColor: '#C4C4C4',\r\n },\r\n});\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { mergeClasses, Image } from '@fluentui/react-components';\r\n\r\nimport { useFolderIconStyle } from './style';\r\n\r\nconst FolderIconInternal = ({\r\n thumbnailImageUrl, isEmptyFolder, folderIconRootClassName,\r\n}) => {\r\n const classes = useFolderIconStyle();\r\n return (\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nFolderIconInternal.propTypes = {\r\n thumbnailImageUrl: PropTypes.string,\r\n folderIconRootClassName: PropTypes.string,\r\n isEmptyFolder: PropTypes.bool,\r\n};\r\n\r\nFolderIconInternal.defaultProps = {\r\n thumbnailImageUrl: undefined,\r\n folderIconRootClassName: '',\r\n isEmptyFolder: false,\r\n};\r\n\r\nexport const FolderIcon = FolderIconInternal;\r\n","import { makeStyles } from '@fluentui/react-components';\r\n\r\nexport const useCellSectionDecoratorStyle = makeStyles({\r\n dragPreview: {\r\n width: '100px',\r\n height: '100px',\r\n display: 'block',\r\n position: 'relative',\r\n },\r\n dragPreviewImage: {\r\n width: '100%',\r\n height: '100%',\r\n objectFit: 'cover',\r\n opacity: 0.5,\r\n },\r\n dragPreviewFolderWrapper: {\r\n width: '100%',\r\n height: '100%',\r\n display: 'flex',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n },\r\n dragPreviewFolder: {\r\n width: '100px',\r\n height: '76px',\r\n },\r\n dragPreviewCount: {\r\n position: 'absolute',\r\n top: 0,\r\n left: 0,\r\n textAlign: 'center',\r\n verticalAlign: 'middle',\r\n width: '100px',\r\n height: '100px',\r\n lineHeight: '100px',\r\n backgroundColor: 'rgba(0,0,0,0.5)',\r\n color: 'white',\r\n fontSize: '14px',\r\n },\r\n});\r\n","import React, { useCallback, useMemo } from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport PropTypes from 'prop-types';\r\nimport classnames from 'classnames';\r\n\r\nimport { FolderIcon } from '../../folder-icon-component';\r\nimport { useCellSectionDecoratorStyle } from '../styles/tiles-grid-cell-drag-decorator-style';\r\n\r\nexport const TilesGridCellDragDecorator = ({\r\n draggable,\r\n children,\r\n item,\r\n dragItemsLength,\r\n onDrag,\r\n i18n,\r\n selected,\r\n}) => {\r\n const classes = useCellSectionDecoratorStyle();\r\n\r\n const dragPreviewDescription = useMemo(() => {\r\n let dragItemsLengthInner = dragItemsLength;\r\n if (!selected) {\r\n dragItemsLengthInner += 1;\r\n }\r\n if (dragItemsLengthInner > 1) {\r\n return i18n.getString(_TL_('{{dragItemsLength}} items'), { dragItemsLength: dragItemsLengthInner });\r\n }\r\n return i18n.getString(_TL_('1 item'));\r\n }, [dragItemsLength, i18n, selected]);\r\n\r\n const renderDragPreview = useCallback(() => (\r\n \r\n { thumbnailImageUrl &&
\r\n \r\n {\r\n item.url || item.thumbnailUrl ? (\r\n
\r\n ), [classes, dragPreviewDescription, item.thumbnailUrl, item.url]);\r\n\r\n const onDragStart = useCallback((event) => {\r\n onDrag({ item });\r\n const container = document.createElement('div');\r\n const DragPreview = renderDragPreview;\r\n ReactDOM.render(\r\n
\r\n )\r\n }\r\n {dragPreviewDescription}
\r\n \r\n {onRenderCell({ item, index: _index })}\r\n
\r\n );\r\n }, [onRenderCell]);\r\n\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nTilesGridInternal.propTypes = {\r\n items: PropTypes.arrayOf(PropTypes.shape({})),\r\n onRenderCell: PropTypes.func.isRequired,\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 columnPadding: PropTypes.number,\r\n }),\r\n // injected styles\r\n classes: PropTypes.shape({\r\n tilesGridContainer: PropTypes.string,\r\n }).isRequired,\r\n};\r\n\r\nTilesGridInternal.defaultProps = {\r\n items: [],\r\n config: DEFAULT_CONFIG,\r\n};\r\n\r\nexport const TilesGrid = withAdsStudioStyles(TilesGridInternal, getTilesGridStyle);\r\n","export const getTilesGridStyle = () => ({\r\n tilesGridContainer: {\r\n // grid styles\r\n '& .tiles-grid': {\r\n overflow: 'hidden',\r\n position: 'relative',\r\n '& .ms-List-page': {\r\n overflowX: 'hidden',\r\n },\r\n },\r\n\r\n '& .tiles-grid-list-cell': {\r\n float: 'left', // make the cells shown as grid style\r\n },\r\n\r\n // cell styles\r\n '& .tiles-grid-cell': {\r\n position: 'relative',\r\n boxSizing: 'border-box',\r\n width: '100%',\r\n height: '100%',\r\n },\r\n },\r\n});\r\n","/* eslint-disable max-len */\r\nimport _ from 'underscore';\r\nimport React, { useCallback, useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { TilesGrid } from './tiles-grid';\r\n\r\nfunction findItem(items, itemToFind, itemKey) {\r\n return _.find(items, item => item[itemKey] === itemToFind[itemKey]);\r\n}\r\n\r\nfunction addItem(items, itemToAdd, itemKey) {\r\n if (!findItem(items, itemToAdd, itemKey)) {\r\n return [[...items, itemToAdd], true];\r\n }\r\n return [items, false];\r\n}\r\n\r\nfunction removeItem(items, itemToRemove, itemKey) {\r\n if (findItem(items, itemToRemove, itemKey)) {\r\n return [_.filter(items, item => item[itemKey] !== itemToRemove[itemKey]), true];\r\n }\r\n return [items, false];\r\n}\r\n\r\nexport const MultiSelectionGrid = ({\r\n itemKey,\r\n onSelectionChange,\r\n onRenderCell,\r\n items,\r\n selectedItems: propSelectedItems,\r\n ...rest\r\n}) => {\r\n const selectedItems = useMemo(() => propSelectedItems || [], [propSelectedItems]);\r\n\r\n // force to re-render when selection changed\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n const allItems = useMemo(() => ([...items || []]), [items, selectedItems]);\r\n\r\n const selectItem = useCallback((item, selected) => {\r\n const action = selected ? addItem : removeItem;\r\n const [newSelectedItems, updated] = action(selectedItems, item, itemKey);\r\n if (updated) {\r\n if (onSelectionChange) {\r\n onSelectionChange({ item, selected, selectedItems: newSelectedItems });\r\n }\r\n }\r\n }, [itemKey, onSelectionChange, selectedItems]);\r\n\r\n const onRenderCellImpl = useCallback(({ item, index }) => {\r\n const selected = !!findItem(selectedItems, item, itemKey);\r\n const fnSelectItem = _.partial(selectItem, item);\r\n return onRenderCell({\r\n item, index, selected, selectItem: fnSelectItem,\r\n });\r\n }, [itemKey, onRenderCell, selectItem, selectedItems]);\r\n\r\n return \r\n {wrappedSectionData.map(({\r\n sectionName,\r\n sectionTitle,\r\n sectionClassName,\r\n items,\r\n config,\r\n totalItemCount,\r\n ...rest\r\n }) => (\r\n (items && items.length >= 0) ?\r\n \r\n {countOfSectionsWithData > 1 && items.length > 0 ?
\r\n : null\r\n ))}\r\n \r\n );\r\n};\r\n\r\nSectionTilesGridInternal.propTypes = {\r\n sectionData: PropTypes.arrayOf(PropTypes.shape({\r\n sectionName: PropTypes.string,\r\n sectionTitle: PropTypes.string,\r\n sectionClassName: PropTypes.string,\r\n items: PropTypes.arrayOf(PropTypes.shape({})),\r\n selectedItems: PropTypes.arrayOf(PropTypes.shape({})), // to support multiple selection\r\n totalItemCount: PropTypes.number, // total item count, including not loaded items\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 })).isRequired,\r\n onRenderCell: PropTypes.func.isRequired,\r\n loadNextPage: PropTypes.func,\r\n\r\n multiSelectionEnabled: PropTypes.bool,\r\n onSelectionChange: PropTypes.func,\r\n onRenderLoadingCell: PropTypes.func,\r\n\r\n classes: PropTypes.shape({\r\n sectionTilesGridContainer: PropTypes.string,\r\n gridConainerClass: PropTypes.string,\r\n }).isRequired,\r\n};\r\n\r\nSectionTilesGridInternal.defaultProps = {\r\n multiSelectionEnabled: false,\r\n onSelectionChange: undefined,\r\n loadNextPage: _.noop,\r\n onRenderLoadingCell: undefined,\r\n};\r\n\r\nexport const SectionTilesGrid = withAdsStudioStyles(SectionTilesGridInternal, getSectionTilesGridStyle);\r\n","import { makeStyles, shorthands } from '@fluentui/react-components';\r\n\r\nexport const useStyle = makeStyles({\r\n overflow: {\r\n display: 'block',\r\n ...shorthands.overflow('hidden'),\r\n textOverflow: 'ellipsis',\r\n whiteSpace: 'nowrap',\r\n },\r\n});\r\n","/* eslint-disable object-curly-newline */\r\nimport _ from 'underscore';\r\nimport React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport { Tooltip, mergeClasses } from '@fluentui/react-components';\r\nimport { useStyle } from './styles';\r\n\r\nexport const splitString = (text, substr) => {\r\n //\r\n if (!text || !substr || _.isEmpty(substr)) {\r\n return [{ matched: false, text, idx: 0 }];\r\n }\r\n\r\n // case-insensitive\r\n const lowerText = text.toLowerCase();\r\n const lowerSubstr = substr.toLowerCase();\r\n\r\n let startIndex = 0;\r\n const fragments = [];\r\n\r\n while (startIndex < text.length) {\r\n const index = lowerText.indexOf(lowerSubstr, startIndex);\r\n if (index === -1) {\r\n fragments.push({ matched: false, text: text.substring(startIndex) });\r\n break;\r\n } else if (index > startIndex) {\r\n fragments.push({ matched: false, text: text.substring(startIndex, index) });\r\n fragments.push({ matched: true, text: text.substring(index, index + substr.length) });\r\n startIndex = index + substr.length;\r\n } else {\r\n fragments.push({ matched: true, text: text.substring(index, index + substr.length) });\r\n startIndex = index + substr.length;\r\n }\r\n }\r\n\r\n // add an idx field for each fragment\r\n const fragmentsWithIndex = fragments.map((f, idx) => ({ ...f, idx }));\r\n return fragmentsWithIndex;\r\n};\r\n\r\nexport const TextWithHighlightImp = ({\r\n text: txt, highlightedText, highlightedClassname, enableTooltip,\r\n}) => {\r\n const textFragments = splitString(txt, highlightedText);\r\n\r\n const content = (\r\n \r\n {\r\n textFragments.map(({ matched, text, idx }) =>\r\n {text})\r\n }\r\n \r\n );\r\n\r\n const classes = useStyle();\r\n\r\n return enableTooltip ? (\r\n {sectionTitle}
: null}\r\n {\r\n items.length > 0 &&\r\n \r\n {content}\r\n
\r\n \r\n ) : content;\r\n};\r\n\r\nTextWithHighlightImp.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\nTextWithHighlightImp.defaultProps = {\r\n text: '',\r\n highlightedText: undefined,\r\n highlightedClassname: 'highlighted-text',\r\n enableTooltip: false,\r\n};\r\n\r\nexport const TextWithHighlight = TextWithHighlightImp;\r\n","import { shorthands, tokens } from '@fluentui/react-components';\r\n\r\nexport 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 = () => ({\r\n display: 'flex',\r\n flexDirection: 'column',\r\n flexWrap: 'nowrap',\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: '12px',\r\n ...shorthands.margin('12px', '4px'),\r\n\r\n '& .cell-description-name': {\r\n flexShrink: 1,\r\n flexGrow: 1,\r\n ...shorthands.overflow('hidden'),\r\n marginRight: '12px',\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: tokens.colorPaletteYellowBackground3,\r\n },\r\n },\r\n});\r\n\r\nexport const getSharedMultiSelectingCellStyles = () => ({\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 ...shorthands.overflow('hidden'),\r\n ...shorthands.borderRadius('6px'),\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 // ...shorthands.border('2px solid white !important'),\r\n // },\r\n '& .ms-Checkbox-checkmark': {\r\n color: tokens.colorNeutralForegroundInverted,\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: tokens.colorNeutralForegroundInverted,\r\n },\r\n },\r\n },\r\n\r\n selectableCardContainer: {\r\n '& .cell-image-frame': {\r\n ...shorthands.overflow('hidden'),\r\n ...shorthands.borderRadius('6px'),\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: tokens.colorNeutralForegroundInverted,\r\n },\r\n },\r\n },\r\n});\r\n","import { makeResetStyles, shorthands, tokens } from '@fluentui/react-components';\r\nimport { positionFill } from './../shared-cell-style';\r\n\r\n/* eslint-disable no-unused-vars */\r\nexport const iconStyles = {\r\n root: {\r\n position: 'relative',\r\n top: '3px',\r\n marginLeft: '12px',\r\n marginRight: '5px',\r\n },\r\n};\r\n\r\nexport const videoSvgIconStyles = {\r\n ...iconStyles,\r\n root: {\r\n ...iconStyles.root,\r\n top: '5px',\r\n width: '15px',\r\n opacity: 0.8,\r\n },\r\n};\r\n\r\nexport const useFolderGridCellStyle = makeResetStyles({\r\n display: 'flex',\r\n flexWrap: 'nowrap',\r\n boxSizing: 'border-box',\r\n height: '86px',\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 backgroundColor: '#fff',\r\n ...shorthands.padding('16px'),\r\n cursor: 'pointer',\r\n\r\n ...shorthands.borderRadius('6px'),\r\n ...positionFill,\r\n\r\n '& .folder-thumbnail': {\r\n display: 'flex',\r\n flexGrow: 0,\r\n flexShrink: 0,\r\n marginRight: '16px',\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: '6px',\r\n\r\n ...shorthands.overflow('hidden'),\r\n whiteSpace: 'nowrap',\r\n\r\n '& .folder-name': {\r\n fontStyle: 'normal',\r\n fontWeight: 600,\r\n fontSize: '12px',\r\n lineHeight: '16px',\r\n\r\n '& .highlighted-text': {\r\n backgroundColor: tokens.colorPaletteYellowBackground3,\r\n },\r\n },\r\n\r\n '& .folder-newlabel-counting': {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n ...shorthands.padding('1px'),\r\n\r\n '& .counting-info': {\r\n display: 'block',\r\n ...shorthands.overflow('hidden'),\r\n whiteSpace: 'nowrap',\r\n textOverflow: 'ellipsis',\r\n\r\n fontStyle: 'normal',\r\n fontWeight: 400,\r\n fontSize: '12px',\r\n lineHeight: '15px',\r\n textAlign: 'right',\r\n\r\n position: 'relative',\r\n top: '2px',\r\n\r\n '& .count-icon': {\r\n marginLeft: '12px',\r\n marginRight: '4px',\r\n fontSize: '14px',\r\n '&:first-child': {\r\n marginLeft: '0px',\r\n },\r\n },\r\n\r\n '& span': {\r\n verticalAlign: 'top',\r\n },\r\n },\r\n\r\n '& .empty-desc': {\r\n fontSize: '12px',\r\n },\r\n },\r\n },\r\n },\r\n\r\n '& .grid-cell-with-accessory': {\r\n paddingRight: '54px',\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: '42px',\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 '& .selectable-cell-card': {\r\n backgroundColor: 'white',\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\n\r\nimport { Checkbox, Tooltip } from '@fluentui/react-components';\r\nimport { FolderRegular, ImageRegular, VideoRegular } from '@fluentui/react-icons';\r\n\r\nimport {\r\n TilesGridCellCard,\r\n TilesGridCellDragDecorator,\r\n TilesGridCellDropDecorator,\r\n} from '../../ads-studio-tile-grid';\r\nimport { FolderIcon } from '../../folder-icon-component';\r\nimport { TextWithHighlight } from '../../text-with-highlight';\r\nimport { FolderAssetType } from '../../../model';\r\n\r\nimport {\r\n useFolderGridCellStyle\r\n} from './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 {!_.isUndefined(itemInfo.subfoldersCount) &&\r\n \r\n \r\n }\r\n {!_.isUndefined(itemInfo.imageAssetsCount) &&\r\n \r\n \r\n }\r\n {!_.isUndefined(itemInfo.videoAssetsCount) &&\r\n \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 allowedAssetType,\r\n\r\n renderAccessory,\r\n\r\n draggable,\r\n onDrag,\r\n selectedItemCount,\r\n droppable,\r\n onDrop,\r\n}) => {\r\n const folderGridCellContainer = useFolderGridCellStyle();\r\n const {\r\n folderName, itemCount, assets,\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 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 {hasAccessory ?\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {selectable &&\r\n
\r\n : null}\r\n \r\n \r\n \r\n {manualAddedImageSourceType === ManualAddedImageSource.Library && (\r\n
\r\n \r\n \r\n \r\n {_.compose(withDeleteButtonDecorator, withSelectionDecorator)(cellContent)}\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nAdsStudioImageAssetsGridCell.propTypes = {\r\n item: PropTypes.shape({\r\n id: PropTypes.string,\r\n name: PropTypes.string,\r\n url: PropTypes.string,\r\n createdTime: PropTypes.instanceOf(Date),\r\n // cropping task progress\r\n updating: PropTypes.bool,\r\n }).isRequired,\r\n highlightedText: PropTypes.string,\r\n isOverlayEnabled: PropTypes.bool,\r\n isCellFocused: PropTypes.bool,\r\n renderCellContent: PropTypes.func,\r\n renderOverlayContent: PropTypes.func,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n selectable: PropTypes.bool,\r\n selected: PropTypes.bool,\r\n onClick: () => null,\r\n isMultiSelecting: PropTypes.bool,\r\n deletable: PropTypes.bool,\r\n onDelete: PropTypes.func,\r\n draggable: PropTypes.bool,\r\n onDrag: PropTypes.func,\r\n selectedItemCount: PropTypes.number,\r\n};\r\n\r\nAdsStudioImageAssetsGridCell.defaultProps = {\r\n highlightedText: undefined,\r\n isOverlayEnabled: false,\r\n isCellFocused: false,\r\n renderCellContent: null,\r\n renderOverlayContent: null,\r\n selectable: false,\r\n selected: false,\r\n onClick: undefined,\r\n isMultiSelecting: false,\r\n deletable: false,\r\n onDelete: undefined,\r\n draggable: false,\r\n onDrag: _.noop,\r\n selectedItemCount: 1,\r\n};\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { FolderAssetType } from '../../../model';\r\nimport {\r\n AdsStudioImageAssetsGridCell as DefaultImageGridCell,\r\n AdsStudioVideoAssetsGridCell as DefaultVideoGridCell,\r\n} from '..';\r\n\r\nexport const GridCellFactory = (props) => {\r\n const { item } = props;\r\n const { folderAssetType } = item || {};\r\n\r\n switch (folderAssetType) {\r\n case FolderAssetType.Image:\r\n return \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 {isVideoLoaded && durationDesc && !showVideo && (\r\n
\r\n \r\n \r\n \r\n {selectable && thumbnailSeletable ? (\r\n \r\n {cellContent}\r\n \r\n ) : cellContent}\r\n \r\n {\r\n !hideVideo && !isMultiSelecting && status === 'Active' &&\r\n
\r\n );\r\n};\r\n\r\nAdsStudioVideoAssetsGridCell.propTypes = {\r\n item: PropTypes.shape({\r\n id: PropTypes.string,\r\n name: PropTypes.string,\r\n url: PropTypes.string,\r\n createdTime: PropTypes.instanceOf(Date),\r\n }).isRequired,\r\n highlightedText: PropTypes.string,\r\n isOverlayEnabled: PropTypes.bool,\r\n isCellFocused: PropTypes.bool,\r\n renderCellContent: PropTypes.func,\r\n renderOverlayContent: PropTypes.func,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n selectable: PropTypes.bool,\r\n selected: PropTypes.bool,\r\n onClick: () => null,\r\n isMultiSelecting: PropTypes.bool,\r\n onClickVideo: PropTypes.func.isRequired,\r\n};\r\n\r\nAdsStudioVideoAssetsGridCell.defaultProps = {\r\n highlightedText: undefined,\r\n isOverlayEnabled: false,\r\n isCellFocused: false,\r\n renderCellContent: null,\r\n renderOverlayContent: null,\r\n selectable: false,\r\n selected: false,\r\n onClick: undefined,\r\n isMultiSelecting: false,\r\n};\r\n","import React, { useCallback } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { makeStyles, tokens, shorthands, mergeClasses } from '@fluentui/react-components';\r\nimport classNames from 'classnames';\r\nimport { CheckmarkCircleFilled } from '@fluentui/react-icons';\r\nimport {\r\n TilesGridCellImage as CellImage,\r\n} from '../../ads-studio-tile-grid';\r\n\r\nexport const useStyles = makeStyles({\r\n imageWrapper: {\r\n position: 'relative',\r\n ...shorthands.borderRadius(tokens.borderRadiusXLarge),\r\n ...shorthands.outline('2px', 'solid', '#0078d4'),\r\n },\r\n containerClass: {\r\n ...shorthands.borderRadius(tokens.borderRadiusXLarge),\r\n boxShadow: '0 0 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.14)',\r\n },\r\n imageClass: {\r\n ...shorthands.borderRadius(tokens.borderRadiusXLarge),\r\n },\r\n iconChecked: {\r\n top: '9px',\r\n right: '10px',\r\n position: 'absolute',\r\n color: '#0078d4',\r\n fontSize: '20px',\r\n backgroundColor: '#ffffff',\r\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\r\n },\r\n});\r\n\r\nexport const ImagePanelGridCell = (props) => {\r\n const {\r\n item, i18n, onSelectImage, isSelected, isMultiple,\r\n } = props;\r\n const { url, id } = item || {};\r\n const classes = useStyles();\r\n\r\n const onClickCell = useCallback(() => {\r\n onSelectImage(id);\r\n }, [id, onSelectImage]);\r\n\r\n return (\r\n setCellRef(x)}>\r\n
\r\n }\r\n \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};\r\n\r\nImagePanelGridCell.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n item: PropTypes.shape({\r\n id: PropTypes.string,\r\n url: PropTypes.string,\r\n }).isRequired,\r\n onSelectImage: PropTypes.func.isRequired,\r\n isSelected: PropTypes.bool.isRequired,\r\n isMultiple: PropTypes.bool,\r\n};\r\n\r\nImagePanelGridCell.defaultProps = {\r\n isMultiple: true,\r\n};\r\n\r\n","import React, { useMemo, useCallback, useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\n\r\nimport _ from 'underscore';\r\nimport { makeStyles, } from '@fluentui/react-components';\r\nimport { ImagePanelGridCell } from '../ads-studio-asset-grid-cell';\r\nimport { SectionTilesGrid, TilesGridLoadingCell } from '../ads-studio-tile-grid';\r\nimport { AdsStudioSpinner } from '../ads-studio-spinner';\r\nimport { GridSectionName, DEFAULT_PAGE_SIZE } from '../../model/constants';\r\n\r\nconst DEFAULT_IMAGE_WIDTH = 211;\r\nconst DEFAULT_COLUMN_PADDING = 16;\r\n\r\nconst useStyles = makeStyles({\r\n contentGridWrapper: {\r\n paddingTop: '24px',\r\n },\r\n description: {\r\n marginBottom: '8px',\r\n fontSize: '14px',\r\n lineHeight: '20px',\r\n fontWeight: '600',\r\n },\r\n});\r\n\r\nexport const PanelImageGrid = ({\r\n i18n,\r\n dataService,\r\n onFailedToLoadData,\r\n onSelectImage,\r\n overlayBodyRef,\r\n imageWidth,\r\n columnPadding,\r\n isHideDescription,\r\n isMultiple = true,\r\n isLoadingMore,\r\n}) => {\r\n const {\r\n assets,\r\n totalAssetCount,\r\n loadMoreData,\r\n } = dataService;\r\n const classes = useStyles();\r\n const [selectedItemIds, setSelectedItemIds] = useState([]);\r\n\r\n const onSelectedChange = useCallback((selectedItemId) => {\r\n if (selectedItemIds.includes(selectedItemId)) {\r\n const newSelectedItems = selectedItemIds.filter(itemId => itemId !== selectedItemId);\r\n setSelectedItemIds(newSelectedItems);\r\n } else {\r\n setSelectedItemIds(isMultiple ? [...selectedItemIds, selectedItemId] : [selectedItemId]);\r\n }\r\n onSelectImage(selectedItemId);\r\n }, [isMultiple, onSelectImage, selectedItemIds]);\r\n\r\n const assetsWithAction = useMemo(() => _.map(assets, (image) => {\r\n const {\r\n id,\r\n } = image;\r\n\r\n return ({\r\n ...image,\r\n onAction: (event) => {\r\n const code = _.get(event, ['detail', 'originalEvent', 'code']);\r\n if (code === 'Enter' || code === 'Space') {\r\n onSelectedChange(id);\r\n event.preventDefault();\r\n }\r\n },\r\n });\r\n }), [assets, onSelectedChange]);\r\n\r\n const imagesGridSection = useMemo(() => ({\r\n sectionName: GridSectionName.Asset,\r\n sectionClassName: 'ads-studio-image-section',\r\n itemKey: 'id',\r\n items: assetsWithAction,\r\n totalItemCount: totalAssetCount,\r\n config: {\r\n width: imageWidth || DEFAULT_IMAGE_WIDTH,\r\n columnPadding: columnPadding || DEFAULT_COLUMN_PADDING,\r\n scrollContainer: overlayBodyRef || '.ads-studio-panel-container-drawer-overlay-body',\r\n },\r\n }), [assetsWithAction, totalAssetCount, imageWidth, columnPadding, overlayBodyRef]);\r\n\r\n const sectionGridData = useMemo(\r\n () => ([imagesGridSection]),\r\n [imagesGridSection]\r\n );\r\n\r\n const onRenderCell = useCallback(({ item }) => {\r\n const { _index, id } = item;\r\n\r\n return (\r\n \r\n
\r\n )}\r\n \r\n {!isHideDescription &&
\r\n );\r\n};\r\n\r\nPanelImageGrid.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n isMultiple: PropTypes.bool,\r\n dataService: PropTypes.shape({}),\r\n // logger: PropTypes.shape({\r\n // logTrace: PropTypes.func,\r\n // }).isRequired,\r\n onFailedToLoadData: PropTypes.func,\r\n onSelectImage: PropTypes.func.isRequired,\r\n overlayBodyRef: PropTypes.shape({}),\r\n};\r\n\r\nPanelImageGrid.defaultProps = {\r\n dataService: {},\r\n onFailedToLoadData: _.noop,\r\n overlayBodyRef: null,\r\n isMultiple: true,\r\n};\r\n","import { makeStyles, shorthands } from '@fluentui/react-components';\r\n\r\nexport const usePerformanceFilterBarEditingStyle = makeStyles({\r\n filterBarEditingContainer: {\r\n position: 'relative',\r\n minHeight: '56px',\r\n display: 'flex',\r\n alignItems: 'center',\r\n backgroundColor: '#f3f2f1',\r\n\r\n '& .filter-list-editing': {\r\n display: 'flex',\r\n ...shorthands.flex(1),\r\n flexWrap: 'wrap',\r\n alignItems: 'flex-start',\r\n paddingLeft: '12px',\r\n\r\n '& .filter-list-divider': {\r\n paddingRight: '12px',\r\n },\r\n },\r\n\r\n '& .filter-bar-button-group': {\r\n marginLeft: 'auto',\r\n display: 'flex',\r\n },\r\n\r\n '& button.add-filter-button .iconba-Add': {\r\n color: '#373737',\r\n },\r\n '& button.filter-bar-button': {\r\n ...shorthands.border('none'),\r\n backgroundColor: 'transparent',\r\n ...shorthands.padding('0px', '7px'),\r\n height: '56px',\r\n '& .iconba': {\r\n color: '#373737',\r\n },\r\n '&:hover': {\r\n backgroundColor: '#f3f2f1',\r\n },\r\n '&:focus': {\r\n backgroundColor: '#e1dfdd',\r\n '&:hover': {\r\n backgroundColor: '#d0d0d0',\r\n },\r\n },\r\n },\r\n '& .filter-bar-divider': {\r\n ...shorthands.borderLeft('1px', 'solid', '#eaeaea'),\r\n ...shorthands.margin('8px', '0px'),\r\n },\r\n '& button.filter-bar-cancel-button': {\r\n ...shorthands.padding('0px', '18px'),\r\n minWidth: 'auto',\r\n '& .iconba:before': {\r\n color: '#373737',\r\n },\r\n },\r\n },\r\n});\r\n\r\nexport const usePerformanceFilterBarReadonlyStyle = makeStyles({\r\n filterBarReadonlyContainer: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n\r\n '& .btn.btn-link': {\r\n marginLeft: '5px',\r\n color: '#17717a',\r\n ...shorthands.textDecoration('underline'),\r\n },\r\n\r\n '& .filter-list': {\r\n height: '56px',\r\n paddingLeft: '12px',\r\n display: 'block',\r\n alignItems: 'center',\r\n textOverflow: 'ellipsis',\r\n color: '#17717a',\r\n ...shorthands.overflow('hidden'),\r\n whiteSpace: 'nowrap',\r\n\r\n fontFamily: 'Segoe UI',\r\n fontSize: '14px',\r\n lineHeight: '19px',\r\n paddingTop: '14px',\r\n\r\n '& .asset-library-search': {\r\n top: '0px',\r\n },\r\n },\r\n '& .filter-list:focus-within': {\r\n textOverflow: 'inherit', // collpase text would invisiable issues when use tab to change focus, reference here: https://msasg.visualstudio.com/DefaultCollection/Bing_Ads/_workitems/edit/3702640/\r\n },\r\n },\r\n addFilterButton: {\r\n ...shorthands.flex(0, 0, 'auto'),\r\n ...shorthands.border('none'),\r\n height: '56px',\r\n fontSize: '14px',\r\n marginLeft: '4px',\r\n paddingLeft: '8px',\r\n paddingRight: '8px',\r\n backgroundColor: '#ffffff',\r\n fontWeight: '600',\r\n },\r\n});\r\n\r\nexport const useViewAllFiltersButtonStyle = makeStyles({\r\n viewAllButton: {\r\n ...shorthands.border('none'),\r\n color: 'rgb(23, 113, 122) !important',\r\n fontWeight: '400',\r\n width: 'auto',\r\n minWidth: '0px !important',\r\n ...shorthands.padding('0px !important', '8px !important'),\r\n backgroundColor: 'transparent !important',\r\n lineHeight: '56px !important',\r\n '&:hover': {\r\n ...shorthands.textDecoration('underline'),\r\n },\r\n },\r\n viewContentTitle: {\r\n paddingLeft: '8px',\r\n fontWeight: '600',\r\n fontSize: '20px',\r\n },\r\n viewAllFilterItem: {\r\n display: 'block',\r\n ...shorthands.border('none'),\r\n color: 'rgb(23, 113, 122) !important',\r\n fontWeight: '400',\r\n width: 'auto',\r\n minWidth: '0px !important',\r\n ...shorthands.padding('0px !important', '8px !important'),\r\n height: 'auto',\r\n backgroundColor: 'transparent !important',\r\n '&:hover': {\r\n ...shorthands.textDecoration('underline'),\r\n },\r\n },\r\n});\r\n","import _ from 'underscore';\r\nimport classNames from 'classnames';\r\nimport React, { Fragment } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Button } from '@fluentui/react-components';\r\nimport { ArrowClockwiseRegular, DismissRegular } from '@fluentui/react-icons';\r\n\r\nimport { usePerformanceFilterBarEditingStyle } from './styles';\r\n\r\nconst EditingFilterBar = ({\r\n filters,\r\n focusedFilter,\r\n onRenderNewFilterContextMenu,\r\n onRenderFilter,\r\n onCloseClick,\r\n onResetClick,\r\n i18n,\r\n}) => {\r\n const classes = usePerformanceFilterBarEditingStyle();\r\n // if no editing filter, show new filter context menu\r\n\r\n const getDivider = (index) => {\r\n if (index === filters.length - 1) {\r\n return null;\r\n }\r\n return ();\r\n };\r\n\r\n return (\r\n {i18n.getString(_TL_('Suggestions from recent searches'))}
}\r\n \r\n
\r\n );\r\n};\r\n\r\nEditingFilterBar.propTypes = {\r\n filters: PropTypes.arrayOf(PropTypes.shape({})),\r\n focusedFilter: PropTypes.shape({\r\n id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\r\n }),\r\n onRenderNewFilterContextMenu: PropTypes.func,\r\n onRenderFilter: PropTypes.func.isRequired,\r\n onCloseClick: PropTypes.func,\r\n onResetClick: PropTypes.func,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n};\r\n\r\nEditingFilterBar.defaultProps = {\r\n filters: [],\r\n focusedFilter: null,\r\n onRenderNewFilterContextMenu: () => null,\r\n onCloseClick: _.noop,\r\n onResetClick: _.noop,\r\n};\r\n\r\nexport const PerformanceEditingFilterBar\r\n = React.memo(EditingFilterBar);\r\n","import _ from 'underscore';\r\nimport React from 'react';\r\nimport classNames from 'classnames';\r\nimport { Popover, PopoverSurface, PopoverTrigger, Button, mergeClasses } from '@fluentui/react-components';\r\nimport PropTypes from 'prop-types';\r\nimport { useViewAllFiltersButtonStyle } from './styles';\r\n\r\nexport const FilterListWithPopover = ({\r\n filters, onClickFilter, i18n,\r\n}) => {\r\n const classes = useViewAllFiltersButtonStyle();\r\n\r\n return (\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 {onRenderNewFilterContextMenu()}\r\n
\r\n \r\n
\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\n\r\nFilterListWithPopover.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};\r\n\r\n\r\nconst ViewAllFiltersButtonImpl = ({\r\n filters, onClickFilter, i18n,\r\n}) => {\r\n const classes = useViewAllFiltersButtonStyle();\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 {i18n.getString('Filters')}
\r\n {_.map(filters, filter =>\r\n (\r\n \r\n
\r\n );\r\n};\r\n\r\nReadonlyFilterBar.propTypes = {\r\n filters: PropTypes.arrayOf(PropTypes.shape({})),\r\n onRenderFilter: PropTypes.func.isRequired,\r\n onClickFilter: PropTypes.func,\r\n onClickAddFilterButton: PropTypes.func,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n};\r\n\r\nReadonlyFilterBar.defaultProps = {\r\n filters: [],\r\n onClickFilter: _.noop,\r\n onClickAddFilterButton: _.noop,\r\n};\r\n\r\nexport const PerformanceReadonlyFilterBar\r\n = React.memo(ReadonlyFilterBar);\r\n","/* eslint-disable jsx-a11y/media-has-caption */\r\nimport React, { useCallback } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport _ from 'underscore';\r\nimport classnames from 'classnames';\r\nimport { makeStyles, shorthands } from '@fluentui/react-components';\r\n\r\nconst useStyles = makeStyles({\r\n dynamicSizeContainer: {\r\n height: '100%',\r\n\r\n '& video': {\r\n maxWidth: '100%',\r\n maxHeight: '100%',\r\n position: 'relative',\r\n top: '50%',\r\n transform: 'translateY(-50%)',\r\n },\r\n },\r\n videoOutlineGray: {\r\n '& video:focus': {\r\n ...shorthands.outline('2px', 'solid', 'gray'),\r\n outlineOffset: '1px',\r\n },\r\n },\r\n videoNormalContainer: {\r\n '& video::-webkit-media-controls-play-button:focus': {\r\n outlineOffset: '-2px',\r\n },\r\n '& video::-webkit-media-controls-pause-button:focus': {\r\n outlineOffset: '-2px',\r\n },\r\n '& video::-webkit-media-controls-volume-slider:focus': {\r\n outlineOffset: '-2px',\r\n },\r\n '& video::-webkit-media-controls-timeline:focus': {\r\n outlineOffset: '-2px',\r\n },\r\n '& video::-webkit-media-controls-mute-button:focus': {\r\n outlineOffset: '-2px',\r\n },\r\n '& video::-webkit-media-controls-fullscreen-button:focus': {\r\n outlineOffset: '-2px',\r\n },\r\n '& video::-webkit-media-controls-panel': {\r\n backgroundImage: 'linear-gradient(0deg,rgba(255, 255, 255, 0.8), transparent) !important',\r\n filter: 'brightness(1)',\r\n boxShadow: 'none !important',\r\n },\r\n },\r\n});\r\n\r\n// since the \r\n {filters.map((filter, index) => (\r\n filter.type === FilterType.SearchText ?\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 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