From f6ec1e16392a32d46999915c14f64d8f1be1af32 Mon Sep 17 00:00:00 2001 From: Sergej Schwabauer Date: Thu, 3 Mar 2022 19:39:44 +0100 Subject: [PATCH 1/2] IconPicker --- .ash_history | 1 + .../autocomplete/Autocomplete.module.scss | 5 + src/components/autocomplete/Autocomplete.tsx | 165 ++++++++++++++++++ .../iconPicker/IconPicker.module.scss | 4 + src/components/iconPicker/IconPicker.tsx | 68 ++++++++ src/components/iconPicker/availableIcons.ts | 3 + .../ManageMarkerCategoriesDialog.tsx | 3 +- 7 files changed, 248 insertions(+), 1 deletion(-) create mode 100644 src/components/autocomplete/Autocomplete.module.scss create mode 100644 src/components/autocomplete/Autocomplete.tsx create mode 100644 src/components/iconPicker/IconPicker.module.scss create mode 100644 src/components/iconPicker/IconPicker.tsx create mode 100644 src/components/iconPicker/availableIcons.ts diff --git a/.ash_history b/.ash_history index 617aecdcf..7dba355e5 100644 --- a/.ash_history +++ b/.ash_history @@ -20,3 +20,4 @@ npm run serve npm install @pnp/spfx-property-controls --save --save-exact npm run serve gulp clean; gulp build; gulp bundle --ship; gulp package-solution --ship; +npm run serve diff --git a/src/components/autocomplete/Autocomplete.module.scss b/src/components/autocomplete/Autocomplete.module.scss new file mode 100644 index 000000000..ea59eb087 --- /dev/null +++ b/src/components/autocomplete/Autocomplete.module.scss @@ -0,0 +1,5 @@ + + +.autocomplete { + display: block; +} \ No newline at end of file diff --git a/src/components/autocomplete/Autocomplete.tsx b/src/components/autocomplete/Autocomplete.tsx new file mode 100644 index 000000000..e1875e13e --- /dev/null +++ b/src/components/autocomplete/Autocomplete.tsx @@ -0,0 +1,165 @@ +import * as React from 'react'; +// import styles from './Autocomplete.module.scss'; +import { TextField, ITextFieldProps, Callout, DirectionalHint, ITextField } from 'office-ui-fabric-react'; +import { isNullOrEmpty, cssClasses, getDeepOrDefault, isFunction } from '@spfxappdev/utility'; + + +export interface IAutocompleteProps extends Omit { + showSuggestionsOnFocus?: boolean; + minValueLength?: number; + onLoadSuggestions?(newValue: string): void; + onRenderSuggestions?(): JSX.Element; +} + +interface IAutocompleteState { + currentValue: string; + isFlyoutVisible: boolean; +} + +export class Autocomplete extends React.Component { + + public state: IAutocompleteState = { + currentValue: isNullOrEmpty(this.props.defaultValue) ? "" : this.props.defaultValue, + isFlyoutVisible: false, + }; + + public static defaultProps: IAutocompleteProps = { + showSuggestionsOnFocus: false, + minValueLength: 3 + }; + + private textFieldReference: ITextField = null; + + private textFieldDomElement: HTMLInputElement = null; + + private userIsTyping: boolean = false; + + private lastValue: string = ""; + + public render(): React.ReactElement { + return (<> + { + this.textFieldReference = input; + this.textFieldDomElement = getDeepOrDefault(input, "_textElement.current", null); + + + }} + onFocus={(ev: any) => { + if(this.props.showSuggestionsOnFocus) { + this.handleSuggestionListVisibility(); + } + + if(isFunction(this.props.onFocus)) { + this.props.onFocus(ev); + } + }} + onBlur={(ev: any) => { + + this.onTextFieldBlur(); + + if(isFunction(this.props.onBlur)) { + this.props.onBlur(ev); + } + }} + onChange={(ev: any, newValue: string) => { + + this.onValueChanged(newValue); + + if(isFunction(this.props.onChange)) { + this.props.onChange(ev, newValue); + } + }} + defaultValue={this.state.currentValue} + /> + + {this.renderSuggesstionsFlyout()} + ); + } + + private renderSuggesstionsFlyout(): JSX.Element { + return ( + ); + } + + private onValueChanged(newValue: string): void { + this.userIsTyping = true; + + this.state.currentValue = newValue; + this.setState({ + currentValue: newValue + }); + + this.handleSuggestionListVisibility(); + } + + private onTextFieldBlur(): void { + this.userIsTyping = false; + + } + + private handleSuggestionListVisibility(): void { + let val = this.state.currentValue; + + if(isNullOrEmpty(val)) { + this.hideSuggesstionsFlyout(); + return; + } + + if(val.length < this.props.minValueLength) { + this.hideSuggesstionsFlyout(); + return; + } + + let valueWasChanged = false; + + if(!val.Equals(this.lastValue)) { + this.userIsTyping = false; + valueWasChanged = true; + } + + if(!valueWasChanged) { + this.showSuggesstionsFlyout(); + return; + } + + window.setTimeout(() => { + if(this.userIsTyping) { + return; + } + + this.showSuggesstionsFlyout(); + + if(isFunction(this.props.onLoadSuggestions)) { + this.props.onLoadSuggestions(this.state.currentValue); + } + }, 150); + } + + private hideSuggesstionsFlyout(): void { + this.setState({ + isFlyoutVisible: false + }); + } + + private showSuggesstionsFlyout(): void { + this.setState({ + isFlyoutVisible: true + }); + } +} \ No newline at end of file diff --git a/src/components/iconPicker/IconPicker.module.scss b/src/components/iconPicker/IconPicker.module.scss new file mode 100644 index 000000000..0aefe6a1f --- /dev/null +++ b/src/components/iconPicker/IconPicker.module.scss @@ -0,0 +1,4 @@ + +.iconpicker { + display: block; +} \ No newline at end of file diff --git a/src/components/iconPicker/IconPicker.tsx b/src/components/iconPicker/IconPicker.tsx new file mode 100644 index 000000000..939ab088f --- /dev/null +++ b/src/components/iconPicker/IconPicker.tsx @@ -0,0 +1,68 @@ +import * as React from 'react'; +import styles from './IconPicker.module.scss'; +import { ITextFieldProps, Icon } from 'office-ui-fabric-react'; +import { allIcons } from './availableIcons'; +import { isNullOrEmpty, cssClasses } from '@spfxappdev/utility'; +import { Autocomplete, IAutocompleteProps } from '@src/components/autocomplete/Autocomplete'; + + +export interface IIconPickerProps extends Omit, IAutocompleteProps { + enableDialogPicker?: boolean; + dialogPickerIconName?: string; +} + +interface IIconPickerState { + currentValue: string; + isFlyoutVisible: boolean; +} + +export class IconPicker extends React.Component { + + public state: IIconPickerState = { + currentValue: isNullOrEmpty(this.props.defaultValue) ? "" : this.props.defaultValue, + isFlyoutVisible: false, + }; + + public static defaultProps: IIconPickerProps = { + dialogPickerIconName: "GroupedList", + enableDialogPicker: true, + showSuggestionsOnFocus: false, + minValueLength: 0 + }; + + public render(): React.ReactElement { + return (<> + { + this.state.currentValue = newValue; + + this.setState({ + currentValue: newValue, + isFlyoutVisible: true + }); + }} + onRenderSuggestions={() => { + return this.renderSuggesstionsFlyout(); + }} + iconProps={{ + iconName: this.state.currentValue + }} /> + + + ); + } + + private renderSuggesstionsFlyout(): JSX.Element { + + return (<> +
    + {allIcons.Where(icon => icon.StartsWith(this.state.currentValue)).map((iconName: string): JSX.Element => { + return (
    • ); + })} +
+ + ); + } +} \ No newline at end of file diff --git a/src/components/iconPicker/availableIcons.ts b/src/components/iconPicker/availableIcons.ts new file mode 100644 index 000000000..41fa14871 --- /dev/null +++ b/src/components/iconPicker/availableIcons.ts @@ -0,0 +1,3 @@ +export const allIcons: Array = [ + "PageLink","CommentSolid","ChangeEntitlements","Installation","WebAppBuilderModule","WebAppBuilderFragment","WebAppBuilderSlot","BullseyeTargetEdit","WebAppBuilderFragmentCreate","PageData","PageHeaderEdit","ProductList","UnpublishContent","DependencyAdd","DependencyRemove","EntitlementPolicy","EntitlementRedemption","SchoolDataSyncLogo","PinSolid12","PinSolidOff12","AddLink","SharepointAppIcon16","DataflowsLink","TimePicker","UserWarning","ComplianceAudit","GlobalNavButton","InternetSharing","Brightness","MapPin","Airplane","Tablet","QuickNote","ChevronDown","ChevronUp","Edit","Add","Cancel","More","Settings","Video","Mail","People","Phone","Pin","Shop","Stop","Link","Filter","AllApps","Zoom","ZoomOut","Microphone","Search","Camera","Attach","Send","FavoriteList","PageSolid","Forward","Back","Refresh","Share","Lock","BlockedSite","ReportHacked","EMI","MiniLink","Blocked","FavoriteStar","FavoriteStarFill","ReadingMode","Favicon","Remove","Checkbox","CheckboxComposite","CheckboxFill","CheckboxIndeterminate","CheckboxCompositeReversed","CheckMark","BackToWindow","FullScreen","Print","Up","Down","OEM","Delete","Save","ReturnKey","Cloud","Flashlight","CommandPrompt","Sad","RealEstate","SIPMove","EraseTool","GripperTool","Dialpad","PageLeft","PageRight","MultiSelect","KeyboardClassic","Play","Pause","ChevronLeft","ChevronRight","InkingTool","Emoji2","GripperBarHorizontal","System","Personalize","SearchAndApps","Globe","EaseOfAccess","ContactInfo","Unpin","Contact","Memo","IncomingCall","Paste","WindowsLogo","Error","GripperBarVertical","Unlock","Slideshow","Calendar","Megaphone","Trim","AutoEnhanceOn","AutoEnhanceOff","Color","SaveAs","Light","Filters","AspectRatio","Contrast","Redo","Undo","Crop","PhotoCollection","Album","Rotate","PanoIndicator","Translate","RedEye","ViewOriginal","ThumbnailView","Package","Telemarketer","Warning","Financial","Education","ShoppingCart","Train","Flag","Move","Page","TouchPointer","Merge","TurnRight","Ferry","Highlight","PowerButton","Tab","Admin","TVMonitor","Speakers","Game","HorizontalTabKey","UnstackSelected","StackIndicator","Nav2DMapView","StreetsideSplitMinimize","Car","Bus","EatDrink","SeeDo","LocationCircle","Home","SwitcherStartEnd","ParkingLocation","IncidentTriangle","Touch","MapDirections","CaretHollow","CaretSolid","History","Location","MapLayers","SearchNearby","Work","Recent","Hotel","Bank","LocationDot","Dictionary","ChromeBack","FolderOpen","Pinned","PinnedFill","RevToggleKey","USB","View","Previous","Next","Clear","Sync","Download","Help","Upload","Emoji","MailForward","ClosePane","OpenPane","PreviewLink","ZoomIn","Bookmarks","Document","ProtectedDocument","OpenInNewWindow","MailFill","ViewAll","Switch","Rename","Go","Remote","SelectAll","Orientation","Import","Folder","Picture","ChromeClose","ShowResults","Message","CalendarDay","CalendarWeek","MailReplyAll","Read","Cut","PaymentCard","Copy","Important","MailReply","Sort","GotoToday","Font","FontColor","FolderFill","Permissions","DisableUpdates","Unfavorite","Italic","Underline","Bold","MoveToFolder","Dislike","Like","AlignRight","AlignCenter","AlignLeft","OpenFile","ClearSelection","FontDecrease","FontIncrease","FontSize","CellPhone","Tag","RepeatOne","RepeatAll","Calculator","Library","PostUpdate","NewFolder","CalendarReply","UnsyncFolder","SyncFolder","BlockContact","AddFriend","Accept","BulletedList","Preview","News","Chat","Group","World","Comment","DockLeft","DockRight","Repair","Accounts","Street","RadioBullet","Stopwatch","Clock","WorldClock","AlarmClock","Photo","ActionCenter","Hospital","Timer","FullCircleMask","LocationFill","ChromeMinimize","ChromeRestore","Annotation","Fingerprint","Handwriting","ChromeFullScreen","Completed","Label","FlickDown","FlickUp","FlickLeft","FlickRight","MiniExpand","MiniContract","Streaming","MusicInCollection","OneDriveLogo","CompassNW","Code","LightningBolt","Info","CalculatorMultiply","CalculatorAddition","CalculatorSubtract","CalculatorPercentage","CalculatorEqualTo","PrintfaxPrinterFile","StorageOptical","Communications","Headset","Health","Webcam2","FrontCamera","ChevronUpSmall","ChevronDownSmall","ChevronLeftSmall","ChevronRightSmall","ChevronUpMed","ChevronDownMed","ChevronLeftMed","ChevronRightMed","Devices2","PC1","PresenceChickletVideo","Reply","HalfAlpha","ConstructionCone","DoubleChevronLeftMed","Volume0","Volume1","Volume2","Volume3","Chart","Robot","Manufacturing","LockSolid","FitPage","FitWidth","BidiLtr","BidiRtl","RightDoubleQuote","Sunny","CloudWeather","Cloudy","PartlyCloudyDay","PartlyCloudyNight","ClearNight","RainShowersDay","Rain","Thunderstorms","RainSnow","Snow","BlowingSnow","Frigid","Fog","Squalls","Duststorm","Unknown","Precipitation","SortLines","Ribbon","AreaChart","Assign","FlowChart","CheckList","Diagnostic","Generate","LineChart","Equalizer","BarChartHorizontal","BarChartVertical","Freezing","FunnelChart","Processing","Quantity","ReportDocument","StackColumnChart","SnowShowerDay","HailDay","WorkFlow","HourGlass","StoreLogoMed20","TimeSheet","TriangleSolid","UpgradeAnalysis","VideoSolid","RainShowersNight","SnowShowerNight","Teamwork","HailNight","PeopleAdd","Glasses","DateTime2","Shield","Header1","PageAdd","NumberedList","PowerBILogo","Info2","MusicInCollectionFill","List","Asterisk","ErrorBadge","CircleRing","CircleFill","Record2","AllAppsMirrored","BookmarksMirrored","BulletedListMirrored","CaretHollowMirrored","CaretSolidMirrored","ChromeBackMirrored","ClearSelectionMirrored","ClosePaneMirrored","DockLeftMirrored","DoubleChevronLeftMedMirrored","GoMirrored","HelpMirrored","ImportMirrored","ImportAllMirrored","ListMirrored","MailForwardMirrored","MailReplyMirrored","MailReplyAllMirrored","MiniContractMirrored","MiniExpandMirrored","OpenPaneMirrored","ParkingLocationMirrored","SendMirrored","ShowResultsMirrored","ThumbnailViewMirrored","Media","Devices3","Focus","VideoLightOff","Lightbulb","StatusTriangle","VolumeDisabled","Puzzle","EmojiNeutral","EmojiDisappointed","HomeSolid","Ringer","PDF","HeartBroken","StoreLogo16","MultiSelectMirrored","Broom","AddToShoppingList","Cocktails","Wines","Articles","Cycling","DietPlanNotebook","Pill","ExerciseTracker","HandsFree","Medical","Running","Weights","Trackers","AddNotes","AllCurrency","BarChart4","CirclePlus","Coffee","Cotton","Market","Money","PieDouble","PieSingle","RemoveFilter","Savings","Sell","StockDown","StockUp","Lamp","Source","MSNVideos","Cricket","Golf","Baseball","Soccer","MoreSports","AutoRacing","CollegeHoops","CollegeFootball","ProFootball","ProHockey","Rugby","SubstitutionsIn","Tennis","Arrivals","Design","Website","Drop","HistoricalWeather","SkiResorts","Snowflake","BusSolid","FerrySolid","AirplaneSolid","TrainSolid","Heart","HeartFill","Ticket","WifiWarning4","Devices4","AzureLogo","BingLogo","MSNLogo","OutlookLogoInverse","OfficeLogo","SkypeLogo","Door","EditMirrored","GiftCard","DoubleBookmark","StatusErrorFull","Certificate","FastForward","Rewind","Photo2","OpenSource","Movers","CloudDownload","Family","WindDirection","Bug","SiteScan","BrowserScreenShot","F12DevTools","CSS","JS","DeliveryTruck","ReminderPerson","ReminderGroup","ReminderTime","TabletMode","Umbrella","NetworkTower","CityNext","CityNext2","Section","OneNoteLogoInverse","ToggleFilled","ToggleBorder","SliderThumb","ToggleThumb","Documentation","Badge","Giftbox","VisualStudioLogo","HomeGroup","ExcelLogoInverse","WordLogoInverse","PowerPointLogoInverse","Cafe","SpeedHigh","Commitments","ThisPC","MusicNote","MicOff","PlaybackRate1x","EdgeLogo","CompletedSolid","AlbumRemove","MessageFill","TabletSelected","MobileSelected","LaptopSelected","TVMonitorSelected","DeveloperTools","Shapes","InsertTextBox","LowerBrightness","WebComponents","OfflineStorage","DOM","CloudUpload","ScrollUpDown","DateTime","Event","Cake","Tiles","Org","PartyLeader","DRM","CloudAdd","AppIconDefault","Photo2Add","Photo2Remove","Calories","POI","AddTo","RadioBtnOff","RadioBtnOn","ExploreContent","Embed","Product","ProgressLoopInner","ProgressLoopOuter","Blocked2","FangBody","Toolbox","PageHeader","Glimmer","ChatInviteFriend","Brush","Shirt","Crown","Diamond","ScaleUp","QRCode","Feedback","SharepointLogoInverse","YammerLogo","Hide","Uneditable","ReturnToSession","OpenFolderHorizontal","CalendarMirrored","SwayLogoInverse","OutOfOffice","Trophy","ReopenPages","EmojiTabSymbols","AADLogo","AccessLogo","AdminALogoInverse32","AdminCLogoInverse32","AdminDLogoInverse32","AdminELogoInverse32","AdminLLogoInverse32","AdminMLogoInverse32","AdminOLogoInverse32","AdminPLogoInverse32","AdminSLogoInverse32","AdminYLogoInverse32","DelveLogoInverse","ExchangeLogoInverse","LyncLogo","OfficeVideoLogoInverse","SocialListeningLogo","VisioLogoInverse","Balloons","Cat","MailAlert","MailCheck","MailLowImportance","MailPause","MailRepeat","SecurityGroup","Table","VoicemailForward","VoicemailReply","Waffle","RemoveEvent","EventInfo","ForwardEvent","WipePhone","AddOnlineMeeting","JoinOnlineMeeting","RemoveLink","PeopleBlock","PeopleRepeat","PeopleAlert","PeoplePause","TransferCall","AddPhone","UnknownCall","NoteReply","NoteForward","NotePinned","RemoveOccurrence","Timeline","EditNote","CircleHalfFull","Room","Unsubscribe","Subscribe","HardDrive","RecurringTask","TaskManager","TaskManagerMirrored","Combine","Split","DoubleChevronUp","DoubleChevronLeft","DoubleChevronRight","Ascending","Descending","TextBox","TextField","NumberField","Dropdown","PenWorkspace","BookingsLogo","ClassNotebookLogoInverse","DelveAnalyticsLogo","DocsLogoInverse","Dynamics365Logo","DynamicSMBLogo","OfficeAssistantLogo","OfficeStoreLogo","OneNoteEduLogoInverse","PlannerLogo","PowerApps","Suitcase","ProjectLogoInverse","CaretLeft8","CaretRight8","CaretUp8","CaretDown8","CaretLeftSolid8","CaretRightSolid8","CaretUpSolid8","CaretDownSolid8","ClearFormatting","Superscript","Subscript","Strikethrough","Export","ExportMirrored","SingleBookmark","SingleBookmarkSolid","DoubleChevronDown","FollowUser","ReplyAll","WorkforceManagement","RecruitmentManagement","Questionnaire","ManagerSelfService","ProductionFloorManagement","ProductRelease","ProductVariant","ReplyMirrored","ReplyAllMirrored","Medal","AddGroup","QuestionnaireMirrored","CloudImportExport","TemporaryUser","CaretSolid16","GroupedDescending","GroupedAscending","SortUp","SortDown","AwayStatus","MyMoviesTV","SyncToPC","GenericScan","AustralianRules","WifiEthernet","TrackersMirrored","DateTimeMirrored","StopSolid","DoubleChevronUp12","DoubleChevronDown12","DoubleChevronLeft12","DoubleChevronRight12","CalendarAgenda","ConnectVirtualMachine","AddEvent","AssetLibrary","DataConnectionLibrary","DocLibrary","FormLibrary","FormLibraryMirrored","ReportLibrary","ReportLibraryMirrored","ContactCard","CustomList","CustomListMirrored","IssueTracking","IssueTrackingMirrored","PictureLibrary","OfficeAddinsLogo","OfflineOneDriveParachute","OfflineOneDriveParachuteDisabled","LargeGrid","TriangleSolidUp12","TriangleSolidDown12","TriangleSolidLeft12","TriangleSolidRight12","TriangleUp12","TriangleDown12","TriangleLeft12","TriangleRight12","ArrowUpRight8","ArrowDownRight8","DocumentSet","GoToDashboard","DelveAnalytics","ArrowUpRightMirrored8","ArrowDownRightMirrored8","CompanyDirectory","OpenEnrollment","CompanyDirectoryMirrored","OneDriveAdd","ProfileSearch","Header2","Header3","Header4","RingerSolid","Eyedropper","MarketDown","CalendarWorkWeek","SidePanel","GlobeFavorite","CaretTopLeftSolid8","CaretTopRightSolid8","ViewAll2","DocumentReply","PlayerSettings","ReceiptForward","ReceiptReply","ReceiptCheck","Fax","RecurringEvent","ReplyAlt","ReplyAllAlt","EditStyle","EditMail","Lifesaver","LifesaverLock","InboxCheck","FolderSearch","CollapseMenu","ExpandMenu","Boards","SunAdd","SunQuestionMark","LandscapeOrientation","DocumentSearch","PublicCalendar","PublicContactCard","PublicEmail","PublicFolder","WordDocument","PowerPointDocument","ExcelDocument","GroupedList","ClassroomLogo","Sections","EditPhoto","Starburst","ShareiOS","AirTickets","PencilReply","Tiles2","SkypeCircleCheck","SkypeCircleClock","SkypeCircleMinus","SkypeCheck","SkypeClock","SkypeMinus","SkypeMessage","ClosedCaption","ATPLogo","OfficeFormsLogoInverse","RecycleBin","EmptyRecycleBin","Hide2","Breadcrumb","BirthdayCake","ClearFilter","Flow","TimeEntry","CRMProcesses","PageEdit","PageArrowRight","PageRemove","Database","DataManagementSettings","CRMServices","EditContact","ConnectContacts","AppIconDefaultAdd","AppIconDefaultList","ActivateOrders","DeactivateOrders","ProductCatalog","ScatterChart","AccountActivity","DocumentManagement","CRMReport","KnowledgeArticle","Relationship","HomeVerify","ZipFolder","SurveyQuestions","TextDocument","TextDocumentShared","PageCheckedOut","PageShared","SaveAndClose","Script","Archive","ActivityFeed","Compare","EventDate","ArrowUpRight","CaretRight","SetAction","ChatBot","CaretSolidLeft","CaretSolidDown","CaretSolidRight","CaretSolidUp","PowerAppsLogo","PowerApps2Logo","SearchIssue","SearchIssueMirrored","FabricAssetLibrary","FabricDataConnectionLibrary","FabricDocLibrary","FabricFormLibrary","FabricFormLibraryMirrored","FabricReportLibrary","FabricReportLibraryMirrored","FabricPublicFolder","FabricFolderSearch","FabricMovetoFolder","FabricUnsyncFolder","FabricSyncFolder","FabricOpenFolderHorizontal","FabricFolder","FabricFolderFill","FabricNewFolder","FabricPictureLibrary","PhotoVideoMedia","AddFavorite","AddFavoriteFill","BufferTimeBefore","BufferTimeAfter","BufferTimeBoth","PublishContent","ClipboardList","ClipboardListMirrored","CannedChat","SkypeForBusinessLogo","TabCenter","PageCheckedin","PageList","ReadOutLoud","CaretBottomLeftSolid8","CaretBottomRightSolid8","FolderHorizontal","MicrosoftStaffhubLogo","GiftboxOpen","StatusCircleOuter","StatusCircleInner","StatusCircleRing","StatusTriangleOuter","StatusTriangleInner","StatusTriangleExclamation","StatusCircleExclamation","StatusCircleErrorX","StatusCircleCheckmark","StatusCircleInfo","StatusCircleBlock","StatusCircleBlock2","StatusCircleQuestionMark","StatusCircleSync","Toll","ExploreContentSingle","CollapseContent","CollapseContentSingle","InfoSolid","GroupList","ProgressRingDots","CaloriesAdd","BranchFork","MuteChat","AddHome","AddWork","MobileReport","ScaleVolume","HardDriveGroup","FastMode","ToggleLeft","ToggleRight","TriangleShape","RectangleShape","CubeShape","Trophy2","BucketColor","BucketColorFill","Taskboard","SingleColumn","DoubleColumn","TripleColumn","ColumnLeftTwoThirds","ColumnRightTwoThirds","AccessLogoFill","AnalyticsLogo","AnalyticsQuery","NewAnalyticsQuery","AnalyticsReport","WordLogo","WordLogoFill","ExcelLogo","ExcelLogoFill","OneNoteLogo","OneNoteLogoFill","OutlookLogo","OutlookLogoFill","PowerPointLogo","PowerPointLogoFill","PublisherLogo","PublisherLogoFill","ScheduleEventAction","FlameSolid","ServerProcesses","Server","SaveAll","LinkedInLogo","Decimals","SidePanelMirrored","ProtectRestrict","Blog","UnknownMirrored","PublicContactCardMirrored","GridViewSmall","GridViewMedium","GridViewLarge","Step","StepInsert","StepShared","StepSharedAdd","StepSharedInsert","ViewDashboard","ViewList","ViewListGroup","ViewListTree","TriggerAuto","TriggerUser","PivotChart","StackedBarChart","StackedLineChart","BuildQueue","BuildQueueNew","UserFollowed","ContactLink","Stack","Bullseye","VennDiagram","FiveTileGrid","FocalPoint","Insert","RingerRemove","TeamsLogoInverse","TeamsLogo","TeamsLogoFill","SkypeForBusinessLogoFill","SharepointLogo","SharepointLogoFill","DelveLogo","DelveLogoFill","OfficeVideoLogo","OfficeVideoLogoFill","ExchangeLogo","ExchangeLogoFill","Signin","DocumentApproval","CloneToDesktop","InstallToDrive","Blur","Build","ProcessMetaTask","BranchFork2","BranchLocked","BranchCommit","BranchCompare","BranchMerge","BranchPullRequest","BranchSearch","BranchShelveset","RawSource","MergeDuplicate","RowsGroup","RowsChild","Deploy","Redeploy","ServerEnviroment","VisioDiagram","HighlightMappedShapes","TextCallout","IconSetsFlag","VisioLogo","VisioLogoFill","VisioDocument","TimelineProgress","TimelineDelivery","Backlog","TeamFavorite","TaskGroup","TaskGroupMirrored","ScopeTemplate","AssessmentGroupTemplate","NewTeamProject","CommentAdd","CommentNext","CommentPrevious","ShopServer","LocaleLanguage","QueryList","UserSync","UserPause","StreamingOff","MoreVertical","ArrowTallUpLeft","ArrowTallUpRight","ArrowTallDownLeft","ArrowTallDownRight","FieldEmpty","FieldFilled","FieldChanged","FieldNotChanged","RingerOff","PlayResume","BulletedList2","BulletedList2Mirrored","ImageCrosshair","GitGraph","Repo","RepoSolid","FolderQuery","FolderList","FolderListMirrored","LocationOutline","POISolid","CalculatorNotEqualTo","BoxSubtractSolid","BoxAdditionSolid","BoxMultiplySolid","BoxPlaySolid","BoxCheckmarkSolid","CirclePauseSolid","CirclePause","MSNVideosSolid","CircleStopSolid","CircleStop","NavigateBack","NavigateBackMirrored","NavigateForward","NavigateForwardMirrored","UnknownSolid","UnknownMirroredSolid","CircleAddition","CircleAdditionSolid","FilePDB","FileTemplate","FileSQL","FileJAVA","FileASPX","FileCSS","FileSass","FileLess","FileHTML","JavaScriptLanguage","CSharpLanguage","CSharp","VisualBasicLanguage","VB","CPlusPlusLanguage","CPlusPlus","FSharpLanguage","FSharp","TypeScriptLanguage","PythonLanguage","PY","CoffeeScript","MarkDownLanguage","FullWidth","FullWidthEdit","Plug","PlugSolid","PlugConnected","PlugDisconnected","UnlockSolid","Variable","Parameter","CommentUrgent","Storyboard","DiffInline","DiffSideBySide","ImageDiff","ImagePixel","FileBug","FileCode","FileComment","BusinessHoursSign","FileImage","FileSymlink","AutoFillTemplate","WorkItem","WorkItemBug","LogRemove","ColumnOptions","Packages","BuildIssue","AssessmentGroup","VariableGroup","FullHistory","Wheelchair","SingleColumnEdit","DoubleColumnEdit","TripleColumnEdit","ColumnLeftTwoThirdsEdit","ColumnRightTwoThirdsEdit","StreamLogo","PassiveAuthentication","AlertSolid","MegaphoneSolid","TaskSolid","ConfigurationSolid","BugSolid","CrownSolid","Trophy2Solid","QuickNoteSolid","ConstructionConeSolid","PageListSolid","PageListMirroredSolid","StarburstSolid","ReadingModeSolid","SadSolid","HealthSolid","ShieldSolid","GiftBoxSolid","ShoppingCartSolid","MailSolid","ChatSolid","RibbonSolid","FinancialSolid","FinancialMirroredSolid","HeadsetSolid","PermissionsSolid","ParkingSolid","ParkingMirroredSolid","DiamondSolid","AsteriskSolid","OfflineStorageSolid","BankSolid","DecisionSolid","Parachute","ParachuteSolid","FiltersSolid","ColorSolid","ReviewSolid","ReviewRequestSolid","ReviewRequestMirroredSolid","ReviewResponseSolid","FeedbackRequestSolid","FeedbackRequestMirroredSolid","FeedbackResponseSolid","WorkItemBar","WorkItemBarSolid","Separator","NavigateExternalInline","PlanView","TimelineMatrixView","EngineeringGroup","ProjectCollection","CaretBottomRightCenter8","CaretBottomLeftCenter8","CaretTopRightCenter8","CaretTopLeftCenter8","DonutChart","ChevronUnfold10","ChevronFold10","DoubleChevronDown8","DoubleChevronUp8","DoubleChevronLeft8","DoubleChevronRight8","ChevronDownEnd6","ChevronUpEnd6","ChevronLeftEnd6","ChevronRightEnd6","ContextMenu","AzureAPIManagement","AzureServiceEndpoint","VSTSLogo","VSTSAltLogo1","VSTSAltLogo2","FileTypeSolution","WordLogoInverse16","WordLogo16","WordLogoFill16","PowerPointLogoInverse16","PowerPointLogo16","PowerPointLogoFill16","ExcelLogoInverse16","ExcelLogo16","ExcelLogoFill16","OneNoteLogoInverse16","OneNoteLogo16","OneNoteLogoFill16","OutlookLogoInverse16","OutlookLogo16","OutlookLogoFill16","PublisherLogoInverse16","PublisherLogo16","PublisherLogoFill16","VisioLogoInverse16","VisioLogo16","VisioLogoFill16","TestBeaker","TestBeakerSolid","TestExploreSolid","TestAutoSolid","TestUserSolid","TestImpactSolid","TestPlan","TestStep","TestParameter","TestSuite","TestCase","Sprint","SignOut","TriggerApproval","Rocket","AzureKeyVault","Onboarding","Transition","LikeSolid","DislikeSolid","CRMCustomerInsightsApp","EditCreate","PlayReverseResume","PlayReverse","SearchData","UnSetColor","DeclineCall","RectangularClipping","TeamsLogo16","TeamsLogoFill16","Spacer","SkypeLogo16","SkypeForBusinessLogo16","SkypeForBusinessLogoFill16","FilterSolid","MailUndelivered","MailTentative","MailTentativeMirrored","MailReminder","ReceiptUndelivered","ReceiptTentative","ReceiptTentativeMirrored","Inbox","IRMReply","IRMReplyMirrored","IRMForward","IRMForwardMirrored","VoicemailIRM","EventAccepted","EventTentative","EventTentativeMirrored","EventDeclined","IDBadge","BackgroundColor","OfficeFormsLogoInverse16","OfficeFormsLogo","OfficeFormsLogoFill","OfficeFormsLogo16","OfficeFormsLogoFill16","OfficeFormsLogoInverse24","OfficeFormsLogo24","OfficeFormsLogoFill24","PageLock","NotExecuted","NotImpactedSolid","FieldReadOnly","FieldRequired","BacklogBoard","ExternalBuild","ExternalTFVC","ExternalXAML","IssueSolid","DefectSolid","LadybugSolid","NugetLogo","TFVCLogo","ProjectLogo32","ProjectLogoFill32","ProjectLogo16","ProjectLogoFill16","SwayLogo32","SwayLogoFill32","SwayLogo16","SwayLogoFill16","ClassNotebookLogo32","ClassNotebookLogoFill32","ClassNotebookLogo16","ClassNotebookLogoFill16","ClassNotebookLogoInverse32","ClassNotebookLogoInverse16","StaffNotebookLogo32","StaffNotebookLogoFill32","StaffNotebookLogo16","StaffNotebookLogoFill16","StaffNotebookLogoInverted32","StaffNotebookLogoInverted16","KaizalaLogo","TaskLogo","ProtectionCenterLogo32","GallatinLogo","Globe2","Guitar","Breakfast","Brunch","BeerMug","Vacation","Teeth","Taxi","Chopsticks","SyncOccurence","UnsyncOccurence","GIF","PrimaryCalendar","SearchCalendar","VideoOff","MicrosoftFlowLogo","BusinessCenterLogo","ToDoLogoBottom","ToDoLogoTop","EditSolid12","EditSolidMirrored12","UneditableSolid12","UneditableSolidMirrored12","UneditableMirrored","AdminALogo32","AdminALogoFill32","ToDoLogoInverse","Snooze","WaffleOffice365","ImageSearch","NewsSearch","VideoSearch","R","FontColorA","FontColorSwatch","LightWeight","NormalWeight","SemiboldWeight","GroupObject","UngroupObject","AlignHorizontalLeft","AlignHorizontalCenter","AlignHorizontalRight","AlignVerticalTop","AlignVerticalCenter","AlignVerticalBottom","HorizontalDistributeCenter","VerticalDistributeCenter","Ellipse","Line","Octagon","Hexagon","Pentagon","RightTriangle","HalfCircle","QuarterCircle","ThreeQuarterCircle","6PointStar","12PointStar","ArrangeBringToFront","ArrangeSendToBack","ArrangeSendBackward","ArrangeBringForward","BorderDash","BorderDot","LineStyle","LineThickness","WindowEdit","HintText","MediaAdd","AnchorLock","AutoHeight","ChartSeries","ChartXAngle","ChartYAngle","Combobox","LineSpacing","Padding","PaddingTop","PaddingBottom","PaddingLeft","PaddingRight","NavigationFlipper","AlignJustify","TextOverflow","VisualsFolder","VisualsStore","PictureCenter","PictureFill","PicturePosition","PictureStretch","PictureTile","Slider","SliderHandleSize","DefaultRatio","NumberSequence","GUID","ReportAdd","DashboardAdd","MapPinSolid","WebPublish","PieSingleSolid","BlockedSolid","DrillDown","DrillDownSolid","DrillExpand","DrillShow","SpecialEvent","OneDriveFolder16","FunctionalManagerDashboard","BIDashboard","CodeEdit","RenewalCurrent","RenewalFuture","SplitObject","BulkUpload","DownloadDocument","GreetingCard","Flower","WaitlistConfirm","WaitlistConfirmMirrored","LaptopSecure","DragObject","EntryView","EntryDecline","ContactCardSettings","ContactCardSettingsMirrored","CalendarSettings","CalendarSettingsMirrored","HardDriveLock","HardDriveUnlock","AccountManagement","ReportWarning","TransitionPop","TransitionPush","TransitionEffect","LookupEntities","ExploreData","AddBookmark","SearchBookmark","DrillThrough","MasterDatabase","CertifiedDatabase","MaximumValue","MinimumValue","VisualStudioIDELogo32","PasteAsText","PasteAsCode","BrowserTab","BrowserTabScreenshot","DesktopScreenshot","FileYML","ClipboardSolid","FabricUserFolder","FabricNetworkFolder","BullseyeTarget","AnalyticsView","Video360Generic","Untag","Leave","Trending12","Blocked12","Warning12","CheckedOutByOther12","CheckedOutByYou12","CircleShapeSolid","SquareShapeSolid","TriangleShapeSolid","DropShapeSolid","RectangleShapeSolid","ZoomToFit","InsertColumnsLeft","InsertColumnsRight","InsertRowsAbove","InsertRowsBelow","DeleteColumns","DeleteRows","DeleteRowsMirrored","DeleteTable","AccountBrowser","VersionControlPush","StackedColumnChart2","TripleColumnWide","QuadColumn","WhiteBoardApp16","WhiteBoardApp32","PinnedSolid","InsertSignatureLine","ArrangeByFrom","Phishing","CreateMailRule","PublishCourse","DictionaryRemove","UserRemove","UserEvent","Encryption","PasswordField","OpenInNewTab","Hide3","VerifiedBrandSolid","MarkAsProtected","AuthenticatorApp","WebTemplate","DefenderTVM","MedalSolid","D365TalentLearn","D365TalentInsight","D365TalentHRCore","BacklogList","ButtonControl","TableGroup","MountainClimbing","TagUnknown","TagUnknownMirror","TagUnknown12","TagUnknown12Mirror","Link12","Presentation","Presentation12","Lock12","BuildDefinition","ReleaseDefinition","SaveTemplate","UserGauge","BlockedSiteSolid12","TagSolid","OfficeChat","OfficeChatSolid","MailSchedule","WarningSolid","Blocked2Solid","SkypeCircleArrow","SkypeArrow","SyncStatus","SyncStatusSolid","ProjectDocument","ToDoLogoOutline","VisioOnlineLogoFill32","VisioOnlineLogo32","VisioOnlineLogoCloud32","VisioDiagramSync","Event12","EventDateMissed12","UserOptional","ResponsesMenu","DoubleDownArrow","DistributeDown","BookmarkReport","FilterSettings","GripperDotsVertical","MailAttached","AddIn","LinkedDatabase","TableLink","PromotedDatabase","BarChartVerticalFilter","BarChartVerticalFilterSolid","MicOff2","MicrosoftTranslatorLogo","ShowTimeAs","FileRequest","WorkItemAlert","PowerBILogo16","PowerBILogoBackplate16","BulletedListText","BulletedListBullet","BulletedListTextMirrored","BulletedListBulletMirrored","NumberedListText","NumberedListNumber","NumberedListTextMirrored","NumberedListNumberMirrored","RemoveLinkChain","RemoveLinkX","FabricTextHighlight","ClearFormattingA","ClearFormattingEraser","Photo2Fill","IncreaseIndentText","IncreaseIndentArrow","DecreaseIndentText","DecreaseIndentArrow","IncreaseIndentTextMirrored","IncreaseIndentArrowMirrored","DecreaseIndentTextMirrored","DecreaseIndentArrowMirrored","CheckListText","CheckListCheck","CheckListTextMirrored","CheckListCheckMirrored","NumberSymbol","Coupon","VerifiedBrand","ReleaseGate","ReleaseGateCheck","ReleaseGateError","M365InvoicingLogo","RemoveFromShoppingList","ShieldAlert","FabricTextHighlightComposite","Dataflows","GenericScanFilled","DiagnosticDataBarTooltip","SaveToMobile","Orientation2","ScreenCast","ShowGrid","SnapToGrid","ContactList","NewMail","EyeShadow","FabricFolderConfirm","InformationBarriers","CommentActive","ColumnVerticalSectionEdit","WavingHand","ShakeDevice","SmartGlassRemote","Rotate90Clockwise","Rotate90CounterClockwise","CampaignTemplate","ChartTemplate","PageListFilter","SecondaryNav","ColumnVerticalSection","SkypeCircleSlash","SkypeSlash","CustomizeToolbar","DuplicateRow","RemoveFromTrash","MailOptions","Childof","Footer","Header","BarChartVerticalFill","StackedColumnChart2Fill","PlainText","AccessibiltyChecker","DatabaseSync","ReservationOrders","TabOneColumn","TabTwoColumn","TabThreeColumn","BulletedTreeList","MicrosoftTranslatorLogoGreen","MicrosoftTranslatorLogoBlue","InternalInvestigation","AddReaction","ContactHeart","VisuallyImpaired","EventToDoLogo","Variable2","ModelingView","DisconnectVirtualMachine","ReportLock","Uneditable2","Uneditable2Mirrored","BarChartVerticalEdit","GlobalNavButtonActive","PollResults","Rerun","QandA","QandAMirror","BookAnswers","AlertSettings","TrimStart","TrimEnd","TableComputed","DecreaseIndentLegacy","IncreaseIndentLegacy","SizeLegacy" +]; \ No newline at end of file diff --git a/src/webparts/map/components/ManageMarkerCategoriesDialog.tsx b/src/webparts/map/components/ManageMarkerCategoriesDialog.tsx index da2197a13..0dd408ef4 100644 --- a/src/webparts/map/components/ManageMarkerCategoriesDialog.tsx +++ b/src/webparts/map/components/ManageMarkerCategoriesDialog.tsx @@ -11,6 +11,7 @@ import '@spfxappdev/utility/lib/extensions/ArrayExtensions'; import { IconButton } from '@microsoft/office-ui-fabric-react-bundle'; import { MarkerIcon } from './MarkerIcon'; import * as strings from 'MapWebPartStrings'; +import { IconPicker } from '@src/components/iconPicker/IconPicker'; export interface IManageMarkerCategoriesDialogProps { markerCategories: IMarkerCategory[]; @@ -163,7 +164,7 @@ export default class ManageMarkerCategoriesDialog extends React.Component
- { this.state.markerCategories[index].iconProperties.iconName = name; From b62e1a281edae213227c0e2901ae0b350874f7e5 Mon Sep 17 00:00:00 2001 From: Sergej Schwabauer Date: Fri, 4 Mar 2022 11:50:41 +0100 Subject: [PATCH 2/2] Iconpicker and Bugfixes --- .ash_history | 2 + src/components/autocomplete/Autocomplete.tsx | 74 ++++++++++++---- .../iconPicker/IconPicker.module.scss | 32 +++++++ src/components/iconPicker/IconPicker.tsx | 68 +++++++++++---- src/webparts/map/MapWebPart.manifest.json | 3 +- src/webparts/map/MapWebPart.ts | 85 ++++++++++++++----- .../map/components/AddOrEditPanel.tsx | 18 +++- src/webparts/map/components/IMapProps.ts | 1 + .../ManageMarkerCategoriesDialog.tsx | 6 +- src/webparts/map/components/Map.module.scss | 7 +- src/webparts/map/components/Map.tsx | 18 ++-- src/webparts/map/loc/en-us.js | 13 +-- src/webparts/map/loc/mystrings.d.ts | 3 + 13 files changed, 261 insertions(+), 69 deletions(-) diff --git a/.ash_history b/.ash_history index 7dba355e5..b2fa28548 100644 --- a/.ash_history +++ b/.ash_history @@ -21,3 +21,5 @@ npm install @pnp/spfx-property-controls --save --save-exact npm run serve gulp clean; gulp build; gulp bundle --ship; gulp package-solution --ship; npm run serve +exit +npm run serve diff --git a/src/components/autocomplete/Autocomplete.tsx b/src/components/autocomplete/Autocomplete.tsx index e1875e13e..1f49d8331 100644 --- a/src/components/autocomplete/Autocomplete.tsx +++ b/src/components/autocomplete/Autocomplete.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -// import styles from './Autocomplete.module.scss'; -import { TextField, ITextFieldProps, Callout, DirectionalHint, ITextField } from 'office-ui-fabric-react'; +import styles from './Autocomplete.module.scss'; +import { TextField, ITextFieldProps, Callout, ICalloutProps, DirectionalHint, ITextField, TextFieldBase } from 'office-ui-fabric-react'; import { isNullOrEmpty, cssClasses, getDeepOrDefault, isFunction } from '@spfxappdev/utility'; @@ -9,6 +9,9 @@ export interface IAutocompleteProps extends Omit; } interface IAutocompleteState { @@ -25,7 +28,10 @@ export class Autocomplete extends React.Component { + return (<> { this.textFieldReference = input; this.textFieldDomElement = getDeepOrDefault(input, "_textElement.current", null); + if(isFunction(this.props.textFieldRef)) { + this.props.textFieldRef(input, this, this.textFieldDomElement); + } }} onFocus={(ev: any) => { @@ -64,12 +77,7 @@ export class Autocomplete extends React.Component { - - this.onValueChanged(newValue); - - if(isFunction(this.props.onChange)) { - this.props.onChange(ev, newValue); - } + this.onValueChanged(ev, newValue); }} defaultValue={this.state.currentValue} /> @@ -78,17 +86,45 @@ export class Autocomplete extends React.Component); } + public updateValue(newValue: string): void { + this.onUpdateValueText = newValue; + + this.setState({ + currentValue: newValue + }, () => { + (this.textFieldReference as TextFieldBase).setState({ + uncontrolledValue: this.onUpdateValueText + }); + + if(isFunction(this.props.onUpdated)) { + this.props.onUpdated(newValue); + } + }); + } + private renderSuggesstionsFlyout(): JSX.Element { + let minWidth: number = getDeepOrDefault(this.props, "calloutProps.calloutMinWidth", -1); + + if(minWidth <= 0) { + minWidth = getDeepOrDefault(this, "textFieldDomElement.clientWidth", -1); + } + + if(minWidth > 0) { + this.props.calloutProps.calloutMinWidth = minWidth; + } + return (
); } } \ No newline at end of file diff --git a/src/webparts/map/MapWebPart.manifest.json b/src/webparts/map/MapWebPart.manifest.json index 30f46f76e..dd927db77 100644 --- a/src/webparts/map/MapWebPart.manifest.json +++ b/src/webparts/map/MapWebPart.manifest.json @@ -34,7 +34,8 @@ "markerCategories": [], "center": [51.505, -0.09], "startZoom": 13, - "maxZoom": 50, + "maxZoom": 30, + "minZoom": 1, "dragging": true, "height": 400, "scrollWheelZoom": true, diff --git a/src/webparts/map/MapWebPart.ts b/src/webparts/map/MapWebPart.ts index a8e3baea9..72d85bbc5 100644 --- a/src/webparts/map/MapWebPart.ts +++ b/src/webparts/map/MapWebPart.ts @@ -6,9 +6,7 @@ import { PropertyPaneTextField, PropertyPaneToggle, PropertyPaneSlider, - PropertyPaneButton, - PropertyPaneLabel - + PropertyPaneButton } from '@microsoft/sp-property-pane'; import { PropertyPaneWebPartInformation } from '@pnp/spfx-property-controls/lib/PropertyPaneWebPartInformation'; import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base'; @@ -19,6 +17,7 @@ import Map from './components/Map'; import { IMapProps, IMarker, IMarkerCategory } from './components/IMapProps'; import ManageMarkerCategoriesDialog, { IManageMarkerCategoriesDialogProps } from './components/ManageMarkerCategoriesDialog'; import { isNullOrEmpty } from '@spfxappdev/utility'; +import { Spinner, ISpinnerProps } from '@microsoft/office-ui-fabric-react-bundle'; export interface IMapPlugins { searchBox: boolean; @@ -34,6 +33,7 @@ export interface IMapWebPartProps { center: [number, number]; startZoom: number; maxZoom: number; + minZoom: number; height: number; scrollWheelZoom: boolean; dragging: boolean; @@ -49,11 +49,10 @@ export default class MapWebPart extends BaseClientSideWebPart private _isDarkTheme: boolean = false; protected onInit(): Promise { - return super.onInit(); + return super.onInit(); } public render(): void { - const element: React.ReactElement = React.createElement( Map, { @@ -61,6 +60,8 @@ export default class MapWebPart extends BaseClientSideWebPart markerCategories: this.properties.markerCategories||[], isEditMode: this.displayMode == DisplayMode.Edit, zoom: this.properties.startZoom, + minZoom: this.properties.minZoom, + maxZoom: this.properties.maxZoom, center: this.properties.center, title: this.properties.title, height: this.properties.height, @@ -91,9 +92,37 @@ export default class MapWebPart extends BaseClientSideWebPart ReactDom.render(element, this.domElement); } - // protected onPropertyPaneFieldChanged(propertyPath: string, oldValue: any, newValue: any): void { - // super.onPropertyPaneFieldChanged(propertyPath, oldValue, newValue) - // console.log() + protected onDisplayModeChanged(oldDisplayMode: DisplayMode): void { + this.reload(); + } + + protected onPropertyPaneFieldChanged(propertyPath: string, oldValue: any, newValue: any): void { + super.onPropertyPaneFieldChanged(propertyPath, oldValue, newValue); + + const reloadIfOneOfProps = ["height", "tileLayerUrl", "minZoom", "maxZoom", "tileLayerAttribution", "plugins.zoomControl"] + + if(reloadIfOneOfProps.Contains(p => p.Equals(propertyPath))) { + this.reload(); + } + } + + private reload(): void { + + setTimeout(() => { + const spinner: React.ReactElement = React.createElement(Spinner, { + + }); + + ReactDom.render(spinner, this.domElement); + + setTimeout(() => { this.render(); }, 300); + }, 500); + + + } + + // protected get disableReactivePropertyChanges(): boolean { + // return true; // } private onMarkerCategoriesChanged(markerCategories: IMarkerCategory[]): void { @@ -131,12 +160,15 @@ export default class MapWebPart extends BaseClientSideWebPart { groupName: strings.WebPartPropertyGroupMapSettings, groupFields: [ - // PropertyPaneToggle('plugins.searchBox', { - // label: "searchBox" + // PropertyPaneWebPartInformation({ + // description: `
${strings.WebPartPropertySettingsInfoLabel}
`, + // key: 'Info_For_3f860b48-1dc3-496d-bd28-b145672289cc' // }), - PropertyPaneWebPartInformation({ - description: `
${strings.WebPartPropertySettingsInfoLabel}
`, - key: 'Info_For_3f860b48-1dc3-496d-bd28-b145672289cc' + PropertyPaneSlider('minZoom', { + label: strings.WebPartPropertyMinZoomLabel, + max: 30, + min: 0, + step: 1 }), PropertyPaneSlider('maxZoom', { label: strings.WebPartPropertyMaxZoomLabel, @@ -150,12 +182,6 @@ export default class MapWebPart extends BaseClientSideWebPart max: 1200, step: 50 }), - PropertyPaneTextField('tileLayerUrl', { - label: strings.WebPartPropertyTileLayerUrlLabel - }), - PropertyPaneTextField('tileLayerAttribution', { - label: strings.WebPartPropertyTileLayerAttributionLabel - }), PropertyPaneToggle('scrollWheelZoom', { label: strings.WebPartPropertyScrollWheelZoomLabel, }), @@ -168,10 +194,29 @@ export default class MapWebPart extends BaseClientSideWebPart ] }, + { + isCollapsed: true, + groupName: strings.WebPartPropertyGroupTileLayerSettings, + groupFields: [ + PropertyPaneWebPartInformation({ + description: `
${strings.WebPartPropertyTileLayerUrlInformationLabel}
`, + key: 'Tile_For_3f860b48-1dc3-496d-bd28-b145672289cc' + }), + PropertyPaneTextField('tileLayerUrl', { + label: strings.WebPartPropertyTileLayerUrlLabel + }), + PropertyPaneTextField('tileLayerAttribution', { + label: strings.WebPartPropertyTileLayerAttributionLabel + }), + ] + }, { isCollapsed: true, groupName: strings.WebPartPropertyGroupPlugins, groupFields: [ + // PropertyPaneToggle('plugins.searchBox', { + // label: "searchBox" + // }), PropertyPaneToggle('plugins.markercluster', { label: strings.WebPartPropertyPluginMarkerClusterLabel, }), @@ -216,7 +261,7 @@ export default class MapWebPart extends BaseClientSideWebPart groupFields: [ PropertyPaneWebPartInformation({ description: `

Author

- SPFx-App.dev + SPFx-App.dev

Version

${this.context.manifest.version}

Web Part Instance id

diff --git a/src/webparts/map/components/AddOrEditPanel.tsx b/src/webparts/map/components/AddOrEditPanel.tsx index f4a65a45c..81de2cfb8 100644 --- a/src/webparts/map/components/AddOrEditPanel.tsx +++ b/src/webparts/map/components/AddOrEditPanel.tsx @@ -13,6 +13,7 @@ import '@spfxappdev/utility/lib/extensions/ArrayExtensions'; import ManageMarkerCategoriesDialog from './ManageMarkerCategoriesDialog'; import { MarkerIcon } from './MarkerIcon'; import * as strings from 'MapWebPartStrings'; +import { IconPicker } from '@src/components/iconPicker/IconPicker'; export interface IAddOrEditPanelProps { markerItem: IMarker; @@ -192,13 +193,26 @@ export default class AddOrEditPanel extends React.Component - { + {/* { this.state.markerItem.iconProperties.iconName = iconName; this.setState({ markerItem: this.state.markerItem, isSaveButtonDisabled: false }); - }} /> + }} /> */} + + { + this.state.markerItem.iconProperties.iconName = iconName; + this.setState({ + markerItem: this.state.markerItem, + isSaveButtonDisabled: false + }); + }} + />
{ + defaultValue={categoryItem.iconProperties.iconName} + onIconChanged={(name: string) => { this.state.markerCategories[index].iconProperties.iconName = name; this.validateForm(); - }} + }} />
diff --git a/src/webparts/map/components/Map.module.scss b/src/webparts/map/components/Map.module.scss index 5419b6f06..acce0bf30 100644 --- a/src/webparts/map/components/Map.module.scss +++ b/src/webparts/map/components/Map.module.scss @@ -20,6 +20,11 @@ } } + + .display-mode .marker-type-none { + cursor: default !important; + } + .manage-categories-label { font-size: 10px; color: #1190F4; @@ -143,7 +148,7 @@ border-bottom: solid 1px #aeaeae; &:nth-child(odd) { - background: $ms-color-themeLight; + background: $ms-color-themeLighter; } } } diff --git a/src/webparts/map/components/Map.tsx b/src/webparts/map/components/Map.tsx index 7614eedf0..6fa6d0af7 100644 --- a/src/webparts/map/components/Map.tsx +++ b/src/webparts/map/components/Map.tsx @@ -8,7 +8,7 @@ import "leaflet/dist/leaflet.css"; import "react-leaflet-markercluster/dist/styles.min.css"; import * as L from 'leaflet'; import { ContextualMenu, IContextualMenuItem, Panel, Dialog, IPanelProps, DefaultButton, PanelType, DialogType, DialogContent, Label, Separator, PrimaryButton } from 'office-ui-fabric-react'; -import { isset, isNullOrEmpty, getDeepOrDefault } from '@spfxappdev/utility'; +import { isset, isNullOrEmpty, getDeepOrDefault, cssClasses } from '@spfxappdev/utility'; import '@spfxappdev/utility/lib/extensions/StringExtensions'; import '@spfxappdev/utility/lib/extensions/ArrayExtensions'; import { DisplayMode } from '@microsoft/sp-core-library'; @@ -86,7 +86,8 @@ export default class Map extends React.Component { public render(): React.ReactElement { this.allLeafletMarker = {}; - const isZoomControlEnabled: boolean = this.props.isEditMode ? true : getDeepOrDefault(this.props, "plugins.zoomControl", true); + // const isZoomControlEnabled: boolean = this.props.isEditMode ? true : getDeepOrDefault(this.props, "plugins.zoomControl", true); + const isZoomControlEnabled: boolean = getDeepOrDefault(this.props, "plugins.zoomControl", true); const isScrollWheelZoomEnabled: boolean = this.props.isEditMode ? true : getDeepOrDefault(this.props, "scrollWheelZoom", true); const isDraggingEnabled: boolean = this.props.isEditMode ? true : getDeepOrDefault(this.props, "dragging", true); // @@ -99,15 +100,16 @@ export default class Map extends React.Component { } { map.on("contextmenu", (ev: L.LeafletEvent) => { @@ -125,6 +127,10 @@ export default class Map extends React.Component { }); }); + + map.on("zoom", (ev: any) => { + console.log("SSC", this.props.maxZoom, ev); + }) this.map = map; } } @@ -502,12 +508,14 @@ export default class Map extends React.Component { shadowSize: null, shadowAnchor: null, iconSize: new L.Point(27, 36), - className: 'leaflet-div-icon' + className: cssClasses('leaflet-div-icon', `marker-type-${marker.type.toLowerCase()}`) }); markerIcon.createIcon = (oldIcon: HTMLElement) => { const wrapper = document.createElement("div"); wrapper.classList.add("leaflet-marker-icon"); + wrapper.classList.add(`marker-type-${marker.type.toLowerCase()}`); + wrapper.dataset.markerid = marker.id; wrapper.style.marginLeft = (markerIcon.options.iconAnchor[0] * -1) + "px"; diff --git a/src/webparts/map/loc/en-us.js b/src/webparts/map/loc/en-us.js index 5298bc77c..90f741d70 100644 --- a/src/webparts/map/loc/en-us.js +++ b/src/webparts/map/loc/en-us.js @@ -1,6 +1,7 @@ define([], function() { return { "WebPartPropertyGroupMapSettings": "General settings", + "WebPartPropertyGroupTileLayerSettings": "Tile Layer", "WebPartPropertyGroupPlugins": "Plugins/Controls", "WebPartPropertyGroupCategories": "Categories", "WebPartPropertyGroupAbout": "About", @@ -9,13 +10,15 @@ define([], function() { "WebPartPropertyPluginLegendLabel": "Show legend", "WebPartPropertyButtonManageCategories": "Manage categories", "WebPartPropertyPluginZoomControlLabel": "Show zoom control", - "WebPartPropertyScrollWheelZoomLabel": "Enable zoom on mouse wheel/touch", - "WebPartPropertyMapDraggingLabel": "Enable dragging in map", + "WebPartPropertyScrollWheelZoomLabel": "Enable zoom on mouse wheel/touch (only in display mode)", + "WebPartPropertyMapDraggingLabel": "Enable dragging in map (only in display mode)", "WebPartPropertyShowPopUpLabel": "Show tooltip when hovering the marker", "WebPartPropertySettingsInfoLabel": "Most of these settings take effect only after a page refresh and only in display mode", - "WebPartPropertyMaxZoomLabel": "Maximum zoom level (depends on Tile layer)", - "WebPartPropertyHeightLabel": "Map height", - "WebPartPropertyTileLayerUrlLabel": "Tile layer URL (Examples can be found here: https://leaflet-extras.github.io/leaflet-providers/preview/)", + "WebPartPropertyMinZoomLabel": "Minimum zoom level (zoom out)", + "WebPartPropertyMaxZoomLabel": "Maximum zoom level (zoom in, depends on Tile layer)", + "WebPartPropertyHeightLabel": "Map height (in px)", + "WebPartPropertyTileLayerUrlInformationLabel": "In this section you can change the tile layer and attribution. You can find more tile layers e.g. here", + "WebPartPropertyTileLayerUrlLabel": "Tile layer URL", "WebPartPropertyTileLayerAttributionLabel": "Tile layer attribution", "ContextMenuAddNewMarkerLabel": "Add a new marker here", "ContextMenuSetStartPositionLabel": "Make this view as start position", diff --git a/src/webparts/map/loc/mystrings.d.ts b/src/webparts/map/loc/mystrings.d.ts index c7b8d84d7..2a4277c04 100644 --- a/src/webparts/map/loc/mystrings.d.ts +++ b/src/webparts/map/loc/mystrings.d.ts @@ -1,5 +1,6 @@ declare interface IMapWebPartStrings { WebPartPropertyGroupMapSettings: string; + WebPartPropertyGroupTileLayerSettings: string; WebPartPropertyGroupPlugins: string; WebPartPropertyGroupCategories: string; WebPartPropertyGroupAbout: string; @@ -12,8 +13,10 @@ declare interface IMapWebPartStrings { WebPartPropertyMapDraggingLabel: string; WebPartPropertyShowPopUpLabel: string; WebPartPropertySettingsInfoLabel: string; + WebPartPropertyMinZoomLabel: string; WebPartPropertyMaxZoomLabel: string; WebPartPropertyHeightLabel: string; + WebPartPropertyTileLayerUrlInformationLabel: string; WebPartPropertyTileLayerUrlLabel: string; WebPartPropertyTileLayerAttributionLabel: string; ContextMenuAddNewMarkerLabel: string;