-
Notifications
You must be signed in to change notification settings - Fork 380
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Changed from tag picker to term picker
- Loading branch information
1 parent
e092701
commit d7d86a2
Showing
12 changed files
with
626 additions
and
90 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,2 @@ | ||
| export * from './ModernTaxonomyPicker'; | ||
| export * from './termItem/TermItem'; |
52 changes: 52 additions & 0 deletions
52
src/controls/modernTaxonomyPicker/modernTermPicker/ModernTermPicker.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| import React from "react"; | ||
| import { BasePicker } from "office-ui-fabric-react/lib/components/pickers/BasePicker"; | ||
| import { IModernTermPickerProps, | ||
| ITermInfoExt, | ||
| ITermItemProps | ||
| } from "./ModernTermPicker.types"; | ||
| import { TermItem } from "../termItem/TermItem"; | ||
| import { TermItemSuggestion } from "../termItem/TermItemSuggestion"; | ||
| import { IBasePickerStyleProps, | ||
| IBasePickerStyles | ||
| } from "office-ui-fabric-react/lib/components/pickers/BasePicker.types"; | ||
| import { getStyles } from "office-ui-fabric-react/lib/components/pickers/BasePicker.styles"; | ||
| import { initializeComponentRef, | ||
| styled | ||
| } from "office-ui-fabric-react/lib/Utilities"; | ||
| import { ISuggestionItemProps } from "office-ui-fabric-react/lib/components/pickers/Suggestions/SuggestionsItem.types"; | ||
| import { Guid } from "@microsoft/sp-core-library"; | ||
|
|
||
| export class ModernTermPickerBase extends BasePicker<ITermInfoExt, IModernTermPickerProps> { | ||
| public static defaultProps = { | ||
| onRenderItem: (props: ITermItemProps) => { | ||
| let labels = props.item.labels.filter((name) => name.languageTag === props.languageTag && name.isDefault); | ||
| if (labels.length === 0) { | ||
| labels = props.item.labels.filter((name) => name.languageTag === props.termStoreInfo?.defaultLanguageTag && name.isDefault); | ||
| } | ||
|
|
||
| return labels.length > 0 ? ( | ||
| <TermItem {...props}>{labels[0].name}</TermItem> | ||
| ) : null; | ||
| }, | ||
| onRenderSuggestionsItem: (props: ITermInfoExt, itemProps: ISuggestionItemProps<ITermInfoExt>) => { | ||
| const onLoadParentLabel = async (termId: Guid): Promise<string> => { | ||
| return Promise.resolve(""); | ||
| }; | ||
| return <TermItemSuggestion term={props} languageTag={props.languageTag} onLoadParentLabel={onLoadParentLabel} termStoreInfo={props.termStoreInfo} {...itemProps} />; | ||
| }, | ||
| }; | ||
|
|
||
| constructor(props: IModernTermPickerProps) { | ||
| super(props); | ||
| initializeComponentRef(this); | ||
| } | ||
| } | ||
|
|
||
| export const ModernTermPicker = styled<IModernTermPickerProps, IBasePickerStyleProps, IBasePickerStyles>( | ||
| ModernTermPickerBase, | ||
| getStyles, | ||
| undefined, | ||
| { | ||
| scope: 'ModernTermPicker', | ||
| }, | ||
| ); |
60 changes: 60 additions & 0 deletions
60
src/controls/modernTaxonomyPicker/modernTermPicker/ModernTermPicker.types.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| import { ITermInfo, ITermStoreInfo } from "@pnp/sp/taxonomy"; | ||
| import { IBasePickerProps } from "office-ui-fabric-react/lib/components/pickers/BasePicker.types"; | ||
| import { IPickerItemProps } from "office-ui-fabric-react/lib/components/pickers/PickerItem.types"; | ||
| import { IStyle, ITheme } from "office-ui-fabric-react/lib/Styling"; | ||
| import { IStyleFunctionOrObject } from "office-ui-fabric-react/lib/Utilities"; | ||
|
|
||
| export interface ITermInfoExt extends ITermInfo { | ||
| termStoreInfo: ITermStoreInfo; | ||
| languageTag: string; | ||
| key: string; | ||
| } | ||
| export interface IModernTermPickerProps extends IBasePickerProps<ITermInfoExt> {} | ||
|
|
||
| export interface ITermItemProps extends IPickerItemProps<ITermInfoExt> { | ||
| /** Additional CSS class(es) to apply to the TermItem root element. */ | ||
| className?: string; | ||
|
|
||
| enableTermFocusInDisabledPicker?: boolean; | ||
|
|
||
| /** Call to provide customized styling that will layer on top of the variant rules. */ | ||
| styles?: IStyleFunctionOrObject<ITermItemStyleProps, ITermItemStyles>; | ||
|
|
||
| /** Theme provided by High-Order Component. */ | ||
| theme?: ITheme; | ||
| termStoreInfo: ITermStoreInfo; | ||
| languageTag: string; | ||
| } | ||
|
|
||
| export type ITermItemStyleProps = Required<Pick<ITermItemProps, 'theme'>> & | ||
| Pick<ITermItemProps, 'className' | 'selected' | 'disabled'> & {}; | ||
|
|
||
| export interface ITermItemStyles { | ||
| /** Root element of picked TermItem */ | ||
| root: IStyle; | ||
|
|
||
| /** Refers to the text element of the TermItem already picked. */ | ||
| text: IStyle; | ||
|
|
||
| /** Refers to the cancel action button on a picked TermItem. */ | ||
| close: IStyle; | ||
| } | ||
|
|
||
| export interface ITermItemSuggestionProps extends React.AllHTMLAttributes<HTMLElement> { | ||
| /** Additional CSS class(es) to apply to the TermItemSuggestion div element */ | ||
| className?: string; | ||
|
|
||
| /** Call to provide customized styling that will layer on top of the variant rules. */ | ||
| styles?: IStyleFunctionOrObject<ITermItemSuggestionStyleProps, ITermItemSuggestionStyles>; | ||
|
|
||
| /** Theme provided by High-Order Component. */ | ||
| theme?: ITheme; | ||
| } | ||
|
|
||
| export type ITermItemSuggestionStyleProps = Required<Pick<ITermItemSuggestionProps, 'theme'>> & | ||
| Pick<ITermItemSuggestionProps, 'className'> & {}; | ||
|
|
||
| export interface ITermItemSuggestionStyles { | ||
| /** Refers to the text element of the TermItemSuggestion */ | ||
| suggestionTextOverflow?: IStyle; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.