Skip to content

Commit a94a790

Browse files
patrikhellgrenpatrikhellgren
committed
Fix for label localization and some code cleanup
1 parent 105f0e2 commit a94a790

File tree

4 files changed

+41
-255
lines changed

4 files changed

+41
-255
lines changed

‎src/controls/modernTaxonomyPicker/ModernTaxonomyPicker.module.scss

Lines changed: 13 additions & 155 deletions
Original file line numberDiff line numberDiff line change
@@ -1,167 +1,25 @@
11
.modernTaxonomyPicker {
22

3-
.contextualMenu {
4-
display: inline-block
5-
}
6-
7-
.listItem {
8-
min-height: 36px;
9-
line-height: 36px;
10-
cursor: pointer;
11-
12-
>div {
13-
display: inline-block;
14-
margin-right: 10px;
15-
}
16-
17-
img {
18-
margin-right: 5px;
19-
vertical-align: middle;
20-
}
21-
}
22-
23-
.termField {
24-
align-items: center;
25-
border-spacing: 0;
26-
display: flex;
27-
width: 100%;
28-
29-
.termFieldInput {
30-
flex-grow: 1;
31-
}
32-
33-
.termFieldButton {
34-
text-align: center;
35-
width: 42px;
36-
}
37-
38-
input[type="text"] {
39-
cursor: pointer;
40-
opacity: 0.8;
41-
width: 100%;
42-
}
43-
}
44-
45-
.termset {
46-
cursor: pointer;
47-
margin-left: 15px;
48-
}
49-
50-
.termSetSelectable {
51-
height: 50px;
52-
line-height: 50px;
53-
}
54-
55-
.termSetSelector {
56-
display: inline-block;
57-
margin: 0 8px 0 4px;
58-
vertical-align: middle;
59-
}
60-
61-
.term {
62-
padding-left: 20px;
63-
64-
.termEnabled,
65-
.termDisabled,
66-
.termNoTagging {
67-
background-repeat: no-repeat;
68-
background-position: 30px center;
69-
}
70-
71-
.termEnabled {
72-
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACzSURBVDhPY2AYNKCoqIgTiOcD8X8S8F6wB4Aa1IH4akNDw+mPHz++/E8EuHTp0jmQRSDNCcXFxa/XrVt3gAh9KEpgBvx/9OjRLVI1g9TDDYBp3rlz5//Kysr/IJoYgGEASPPatWsbQDQxAMOAbdu2gZ0FookBcAOePHlyhxgN6GqQY+Hdhg0bDpJqCNgAaDrQAnJuNDY2nvr06dMbYgw6e/bsabgBUEN4yEiJ2wdNViLfIQC3sTh2vtJcswAAAABJRU5ErkJggg=='); // /_layouts/15/Images/EMMTerm.png
73-
}
74-
75-
.termDisabled {
76-
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAFMSURBVDhPzZPNSsNAFIULQqEQEPoSQqAg7gqC0HdwXxAElyYgBBGSZ+gDdOUyIauULATdKrgIKCKuQjbiDySCkNV4TrkzpJW2cefAxwwzc86de2em0/k3zXGcHpgC9Qeu5glAsAMefN+/K8vyVbVoWZbdMxDFY9d136Ioum6hW9iiDVSe588rxDXmJ+AAdAWOOVcbAy1O01R5nqfYoxVglyk+Hu7Z4FiwOcc1GBRMwQSnOAxDHz0jDyCwwCVQS3DO0gU0BkmSzG8A/UQiz7DxC5yLGQ1PwDeYGYOiKF6WarCPDUOJeor+A4z0m8P4SNaG+hY+4zi+aZh0scEBNeB41DTBuCcGjj6FjaM/BUFwW1XVO6vdMNiSdIzJLwN5TJZ+iSLQKYwbR9cmZyaFdX+JhZIiMue+cLFQxA0G22uusd/6I8OEb4LXRwZN4Q+3Ys8Mb9+nRgAAAABJRU5ErkJggg=='); // /_layouts/15/Images/EMMTermDeprecated.png
77-
}
78-
79-
.termNoTagging {
80-
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAZBJREFUeNqkU0trwkAQnhURBBFPKghekuJN7KW9pOCj0Agl9/4uT/6BHgXpxQfxYKltKEYhV3tXFF/4RrOdXYgkxpz8YA47O983O9+whFIKt8DvddHv9wej0UjY7/dwPB55sGaJRKImSVLxXMiSl9Hr9fRWq0WvoVKpUFVVv6xaF1nX9R+LvFqteKAgrVarVNM0fi6Xy9Sq99mfjeTv2Wz2mMvlYL1en/OGYYCiKKTT6fAzG8flQbfb1ReLxX0+n4fJZOLwQxRFKJVKNJPJwHa7dZuI5I/lcsnJrHMwGHQUpdNpHp5bGI/Hr7IsA3Pc7/dcDEynU5jP5xAIBJwCpmmeN+IF9IaT0VA20p+V5yaGQqF2s9mE3W4Hh8PBFXZyLBbTstmsaAkQqyuu7nOz2UiCIEAkEoFwOMzz6A0n44YgHo8bhULBYQaxP7vRaLyjyFsqleIiDLbOAyTfXY5GLueu1+s1XNULE2Fg5Gg0qj4jrnlDrhmHIu3hcPh0Op0gmUz+IvfBy1xy62/0wY34F2AAKtctO7g/KgIAAAAASUVORK5CYII='); // /_layouts/15/Images/EMMTermDisabled.png
81-
}
82-
83-
label>span {
84-
padding-left: 25px;
85-
}
86-
}
87-
88-
.actions {
89-
button:first-child {
90-
margin-right: 15px;
91-
}
92-
}
93-
94-
.termBasePicker
95-
{
96-
background-color: #fff;
97-
}
98-
.termSuggestion
99-
{
100-
min-height: 40px;
3+
.termField {
4+
align-items: center;
5+
border-spacing: 0;
6+
display: flex;
1017
width: 100%;
102-
text-align: left;
103-
cursor: pointer;
104-
1058

106-
.termSuggestionSubTitle
107-
{
108-
font-size: 12px;
109-
color: #666666;
9+
.termFieldInput {
10+
flex-grow: 1;
11011
}
11112

112-
}
113-
114-
.pickedTermRoot
115-
{
116-
position: relative;
117-
outline: transparent;
118-
box-sizing: content-box;
119-
flex-shrink: 1;
120-
background: #f4f4f4;
121-
margin: 2px;
122-
height: 26px;
123-
line-height: 26px;
124-
cursor: default;
125-
display: flex;
126-
flex-wrap: nowrap;
127-
max-width: 300px;
128-
129-
.pickedTermText
130-
{
131-
overflow: hidden;
132-
text-overflow: ellipsis;
133-
white-space: nowrap;
134-
min-width: 30px;
135-
margin: 0 8px;
13+
.termFieldButton {
14+
text-align: center;
15+
width: 42px;
13616
}
137-
.pickedTermCloseIcon
138-
{
17+
18+
input[type="text"] {
13919
cursor: pointer;
140-
color: #666666;
141-
font-size: 12px;
142-
display: inline-block;
143-
text-align: center;
144-
vertical-align: top;
145-
width: 30px;
146-
height: 100%;
147-
-ms-flex-negative: 0;
148-
flex-shrink: 0;
20+
opacity: 0.8;
21+
width: 100%;
14922
}
15023
}
15124

152-
.errorMessage {
153-
font-size: 12px;
154-
font-weight: 400;
155-
color: #a80000;
156-
margin: 0;
157-
padding-top: 5px;
158-
display: flex;
159-
align-items: center;
160-
}
161-
162-
.errorIcon {
163-
font-size: 14px;
164-
margin-right: 5px;
165-
}
166-
16725
}

‎src/controls/modernTaxonomyPicker/ModernTaxonomyPicker.tsx

Lines changed: 21 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,6 @@ export interface IModernTaxonomyPickerProps {
2626
label: string;
2727
context: BaseComponentContext;
2828
initialValues?: ITag[];
29-
errorMessage?: string; // TODO: is this needed?
3029
disabled?: boolean;
3130
required?: boolean;
3231
onChange?: (newValue?: ITag[]) => void;
@@ -35,38 +34,30 @@ export interface IModernTaxonomyPickerProps {
3534

3635
export function ModernTaxonomyPicker(props: IModernTaxonomyPickerProps) {
3736
const [termsService] = React.useState(() => new SPTaxonomyService(props.context));
38-
const [errorMessage, setErrorMessage] = React.useState(props.errorMessage);
39-
const [internalErrorMessage, setInternalErrorMessage] = React.useState<string>();
4037
const [panelIsOpen, setPanelIsOpen] = React.useState(false);
41-
const [selectedOptions, setSelectedOptions] = React.useState<ITag[]>([]);
38+
const [selectedOptions, setSelectedOptions] = React.useState<ITag[]>(Object.prototype.toString.call(props.initialValues) === '[object Array]' ? props.initialValues : []);
4239
const [selectedPanelOptions, setSelectedPanelOptions] = React.useState<ITag[]>([]);
4340

44-
const invalidTerm = React.useRef<string>(null);
45-
4641
React.useEffect(() => {
4742
sp.setup(props.context);
4843
}, []);
4944

50-
React.useEffect(() => {
51-
if(Object.prototype.toString.call(props.initialValues) === '[object Array]' ) {
52-
setSelectedOptions(props.initialValues);
53-
}
54-
else {
55-
setSelectedOptions([]);
56-
}
57-
}, [props.initialValues]);
58-
59-
React.useEffect(() => {
60-
setErrorMessage(props.errorMessage);
61-
}, [props.errorMessage]);
45+
// React.useEffect(() => {
46+
// if(Object.prototype.toString.call(props.initialValues) === '[object Array]' ) {
47+
// setSelectedOptions(props.initialValues);
48+
// }
49+
// else {
50+
// setSelectedOptions([]);
51+
// }
52+
// }, []);
6253

6354
React.useEffect(() => {
6455
if (props.onChange) {
6556
props.onChange(selectedOptions);
6657
}
6758
}, [selectedOptions]);
6859

69-
async function onOpenPanel(): Promise<void> {
60+
function onOpenPanel(): void {
7061
if (props.disabled === true) {
7162
return;
7263
}
@@ -108,30 +99,30 @@ export function ModernTaxonomyPicker(props: IModernTaxonomyPickerProps) {
10899
return filteredTags;
109100
}
110101

111-
const { label, disabled, allowMultipleSelections, panelTitle, required, placeHolder } = props;
112102
const calloutProps = { gapSpace: 0 };
113103
const tooltipId = useId('tooltip');
114104
const hostStyles: Partial<ITooltipHostStyles> = { root: { display: 'inline-block' } };
105+
const addTermButtonStyles: IButtonStyles = {rootHovered: {backgroundColor: "inherit"}, rootPressed: {backgroundColor: "inherit"}};
115106

116107
return (
117108
<div className={styles.modernTaxonomyPicker}>
118-
{label && <Label required={required}>{label}</Label>}
109+
{props.label && <Label required={props.required}>{props.label}</Label>}
119110
<div className={styles.termField}>
120111
<div className={styles.termFieldInput}>
121112
<TagPicker
122113
removeButtonAriaLabel={strings.ModernTaxonomyPickerRemoveButtonText}
123114
onResolveSuggestions={onResolveSuggestions}
124-
itemLimit={allowMultipleSelections ? undefined : 1}
115+
itemLimit={props.allowMultipleSelections ? undefined : 1}
125116
selectedItems={selectedOptions}
126-
disabled={disabled}
117+
disabled={props.disabled}
127118
onChange={(itms?: ITag[]) => {
128119
setSelectedOptions(itms || []);
129120
setSelectedPanelOptions(itms || []);
130121
}}
131-
getTextFromItem={(tag: ITag, currentValue?: string) => tag.name}
122+
getTextFromItem={(tag: ITag) => tag.name}
132123
inputProps={{
133-
'aria-label': placeHolder || strings.ModernTaxonomyPickerDefaultPlaceHolder,
134-
placeholder: placeHolder || strings.ModernTaxonomyPickerDefaultPlaceHolder
124+
'aria-label': props.placeHolder || strings.ModernTaxonomyPickerDefaultPlaceHolder,
125+
placeholder: props.placeHolder || strings.ModernTaxonomyPickerDefaultPlaceHolder
135126
}}
136127
/>
137128
</div>
@@ -142,20 +133,18 @@ export function ModernTaxonomyPicker(props: IModernTaxonomyPickerProps) {
142133
calloutProps={calloutProps}
143134
styles={hostStyles}
144135
>
145-
<IconButton disabled={disabled} iconProps={{ iconName: 'Tag' } as IIconProps} onClick={onOpenPanel} aria-describedby={tooltipId} />
136+
<IconButton disabled={props.disabled} styles={addTermButtonStyles} iconProps={{ iconName: 'Tag' } as IIconProps} onClick={onOpenPanel} aria-describedby={tooltipId} />
146137
</TooltipHost>
147138
</div>
148139
</div>
149140

150-
<FieldErrorMessage errorMessage={errorMessage || internalErrorMessage} />
151-
152141
<Panel
153142
isOpen={panelIsOpen}
154143
hasCloseButton={true}
155144
onDismiss={onClosePanel}
156145
isLightDismiss={true}
157146
type={PanelType.medium}
158-
headerText={panelTitle}
147+
headerText={props.panelTitle}
159148
onRenderFooterContent={() => {
160149
const horizontalGapStackTokens: IStackTokens = {
161150
childrenGap: 10,
@@ -172,7 +161,7 @@ export function ModernTaxonomyPicker(props: IModernTaxonomyPickerProps) {
172161
props.termSetId && (
173162
<div key={props.termSetId} >
174163
<TaxonomyForm
175-
allowMultipleSelections={allowMultipleSelections}
164+
allowMultipleSelections={props.allowMultipleSelections}
176165
onResolveSuggestions={onResolveSuggestions}
177166
onLoadMoreData={termsService.getTerms}
178167
getTermSetInfo={termsService.getTermSetInfo}
@@ -181,7 +170,7 @@ export function ModernTaxonomyPicker(props: IModernTaxonomyPickerProps) {
181170
pageSize={50}
182171
selectedPanelOptions={selectedPanelOptions}
183172
setSelectedPanelOptions={setSelectedPanelOptions}
184-
placeHolder={placeHolder || strings.ModernTaxonomyPickerDefaultPlaceHolder}
173+
placeHolder={props.placeHolder || strings.ModernTaxonomyPickerDefaultPlaceHolder}
185174
/>
186175
</div>
187176
)

‎src/controls/modernTaxonomyPicker/taxonomyForm/TaxonomyForm.module.scss

Lines changed: 0 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -7,71 +7,6 @@
77
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
88
}
99

10-
.row {
11-
@include ms-Grid-row;
12-
// @include ms-fontColor-white;
13-
// background-color: $ms-color-themeDark;
14-
padding: 20px;
15-
}
16-
17-
.column {
18-
@include ms-Grid-col;
19-
@include ms-lg10;
20-
@include ms-xl8;
21-
@include ms-xlPush2;
22-
@include ms-lgPush1;
23-
}
24-
25-
.title {
26-
@include ms-font-xl;
27-
// @include ms-fontColor-white;
28-
}
29-
30-
.subTitle {
31-
@include ms-font-l;
32-
// @include ms-fontColor-white;
33-
}
34-
35-
.description {
36-
@include ms-font-l;
37-
// @include ms-fontColor-white;
38-
}
39-
40-
.button {
41-
// Our button
42-
text-decoration: none;
43-
height: 32px;
44-
45-
// Primary Button
46-
min-width: 80px;
47-
background-color: $ms-color-themePrimary;
48-
border-color: $ms-color-themePrimary;
49-
color: $ms-color-white;
50-
51-
// Basic Button
52-
outline: transparent;
53-
position: relative;
54-
font-family: "Segoe UI WestEuropean","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif;
55-
-webkit-font-smoothing: antialiased;
56-
font-size: $ms-font-size-m;
57-
font-weight: $ms-font-weight-regular;
58-
border-width: 0;
59-
text-align: center;
60-
cursor: pointer;
61-
display: inline-block;
62-
padding: 0 16px;
63-
64-
.label {
65-
font-weight: $ms-font-weight-semibold;
66-
font-size: $ms-font-size-m;
67-
height: 32px;
68-
line-height: 32px;
69-
margin: 0 4px;
70-
vertical-align: top;
71-
display: inline-block;
72-
}
73-
}
74-
7510
.choiceOption {
7611
color: "[theme: bodyText, default: #323130]";
7712
padding-left: 26px;

0 commit comments

Comments
 (0)