-
Notifications
You must be signed in to change notification settings - Fork 80
feat: add built-in translations #5471
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from 78 commits
ac26754
52a9d65
71726ce
2b2b9cc
47d0c19
db02d58
26f3ffd
e368bf8
e2b4e82
eb9a474
a2ed4d4
c4e619b
1a6afcd
f8e0449
f538b4e
e259a55
85070de
4baa273
21bdc0d
b5b2471
22d21db
8c47836
ad3558a
0a9779a
8c686ec
ffe5f83
d47cb2d
935c607
c24f313
9a46ab1
fcc25d8
10f8af9
7bc4c50
964e741
f7ea667
7c9343a
611c757
1a970c9
2542534
5dff285
8cbf985
730840a
4aa183c
bf04ed4
af59697
3f2c14f
35bfc6f
a1198cb
b80953b
86db26d
d0e2dc3
6a4525c
2c0ee1b
df869d3
5e5dcff
157ac45
e54c181
4be2cd4
6eec274
a5ef4fb
90a6a69
177d0b6
c85b4ab
578ce13
2db00c6
bbe1214
ceb9860
dd2fc7e
3a69a60
64501d4
2eb7b77
62f10b5
f90ec3d
67e80a3
0749eb7
c1df504
d2aa449
d3aa2d3
8ecdf67
c8aeea6
324e60b
c98c1b1
de0fcd5
31278ee
42d6cf8
20053de
32c8796
6028c28
30d02ee
cdf8f4c
b41d0bd
9ce6d37
76c1fc3
9b3bc05
ad1dfeb
83fca1f
f52ca25
5566f06
f24478a
1d678d3
3e809d6
2890a27
a7d968e
f36acf2
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -8,11 +8,12 @@ import { | |
Watch, | ||
h, | ||
VNode, | ||
Method | ||
Method, | ||
State | ||
} from "@stencil/core"; | ||
import { Position, Scale, Layout } from "../interfaces"; | ||
import { ExpandToggle, toggleChildActionText } from "../functional/ExpandToggle"; | ||
import { CSS, SLOTS, TEXT } from "./resources"; | ||
import { CSS, SLOTS } from "./resources"; | ||
import { getSlotted, focusElement } from "../../utils/dom"; | ||
import { | ||
geActionDimensions, | ||
|
@@ -28,6 +29,15 @@ import { | |
disconnectConditionalSlotComponent, | ||
ConditionalSlotComponent | ||
} from "../../utils/conditionalSlot"; | ||
import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; | ||
import { | ||
connectMessages, | ||
disconnectMessages, | ||
setUpMessages, | ||
T9nComponent, | ||
updateMessages | ||
} from "../../utils/t9n"; | ||
import { Messages } from "./assets/action-bar/t9n"; | ||
import { | ||
setUpLoadableComponent, | ||
setComponentLoaded, | ||
|
@@ -43,9 +53,12 @@ import { | |
@Component({ | ||
tag: "calcite-action-bar", | ||
styleUrl: "action-bar.scss", | ||
shadow: true | ||
shadow: true, | ||
assetsDirs: ["assets"] | ||
}) | ||
export class ActionBar implements ConditionalSlotComponent, LoadableComponent { | ||
export class ActionBar | ||
implements ConditionalSlotComponent, LoadableComponent, LocalizedComponent, T9nComponent | ||
{ | ||
// -------------------------------------------------------------------------- | ||
// | ||
// Properties | ||
|
@@ -75,11 +88,15 @@ export class ActionBar implements ConditionalSlotComponent, LoadableComponent { | |
|
||
/** | ||
* Specifies the label of the expand icon when the component is collapsed. | ||
* | ||
* @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides` | ||
anveshmekala marked this conversation as resolved.
Show resolved
Hide resolved
|
||
*/ | ||
@Prop() intlExpand: string; | ||
|
||
/** | ||
* Specifies the label of the collapse icon when the component is expanded. | ||
* | ||
* @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides` | ||
*/ | ||
@Prop() intlCollapse: string; | ||
|
||
|
@@ -110,6 +127,25 @@ export class ActionBar implements ConditionalSlotComponent, LoadableComponent { | |
*/ | ||
@Prop({ reflect: true }) scale: Scale; | ||
|
||
/** | ||
* Made into a prop for testing purposes only | ||
* | ||
* @internal | ||
*/ | ||
@Prop({ mutable: true }) messages: Messages; | ||
|
||
/** | ||
* Use this property to override individual strings used by the component. | ||
*/ | ||
@Prop({ mutable: true }) messageOverrides: Partial<Messages>; | ||
|
||
@Watch("intlCollapse") | ||
@Watch("intlExpand") | ||
@Watch("messageOverrides") | ||
onMessagesChange(): void { | ||
/* wired up by t9n util */ | ||
} | ||
|
||
// -------------------------------------------------------------------------- | ||
// | ||
// Events | ||
|
@@ -139,16 +175,21 @@ export class ActionBar implements ConditionalSlotComponent, LoadableComponent { | |
|
||
expandToggleEl: HTMLCalciteActionElement; | ||
|
||
@State() effectiveLocale: string; | ||
|
||
@Watch("effectiveLocale") | ||
effectiveLocaleChange(): void { | ||
updateMessages(this, this.effectiveLocale); | ||
} | ||
|
||
@State() defaultMessages: Messages; | ||
|
||
// -------------------------------------------------------------------------- | ||
// | ||
// Lifecycle | ||
// | ||
// -------------------------------------------------------------------------- | ||
|
||
componentWillLoad(): void { | ||
setUpLoadableComponent(this); | ||
} | ||
|
||
componentDidLoad(): void { | ||
setComponentLoaded(this); | ||
this.conditionallyOverflowActions(); | ||
|
@@ -157,6 +198,8 @@ export class ActionBar implements ConditionalSlotComponent, LoadableComponent { | |
connectedCallback(): void { | ||
const { el, expanded } = this; | ||
|
||
connectLocalized(this); | ||
connectMessages(this); | ||
toggleChildActionText({ parent: el, expanded }); | ||
|
||
this.mutationObserver?.observe(el, { childList: true, subtree: true }); | ||
|
@@ -169,10 +212,17 @@ export class ActionBar implements ConditionalSlotComponent, LoadableComponent { | |
connectConditionalSlotComponent(this); | ||
} | ||
|
||
async componentWillLoad(): Promise<void> { | ||
setUpLoadableComponent(this); | ||
await setUpMessages(this); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @jcfranco now that we're delaying #5369 is a priority for MapViewer and I'd like to try and fix it and make them not have to increase any timeouts they have currently for focusing. |
||
} | ||
|
||
disconnectedCallback(): void { | ||
this.mutationObserver?.disconnect(); | ||
this.resizeObserver?.disconnect(); | ||
disconnectConditionalSlotComponent(this); | ||
disconnectLocalized(this); | ||
disconnectMessages(this); | ||
} | ||
|
||
// -------------------------------------------------------------------------- | ||
|
@@ -290,28 +340,16 @@ export class ActionBar implements ConditionalSlotComponent, LoadableComponent { | |
// -------------------------------------------------------------------------- | ||
|
||
renderBottomActionGroup(): VNode { | ||
const { | ||
expanded, | ||
expandDisabled, | ||
intlExpand, | ||
intlCollapse, | ||
el, | ||
position, | ||
toggleExpand, | ||
scale, | ||
layout | ||
} = this; | ||
const { expanded, expandDisabled, el, position, toggleExpand, scale, layout, messages } = this; | ||
|
||
const tooltip = getSlotted(el, SLOTS.expandTooltip) as HTMLCalciteTooltipElement; | ||
const expandLabel = intlExpand || TEXT.expand; | ||
const collapseLabel = intlCollapse || TEXT.collapse; | ||
|
||
const expandToggleNode = !expandDisabled ? ( | ||
<ExpandToggle | ||
el={el} | ||
expanded={expanded} | ||
intlCollapse={collapseLabel} | ||
intlExpand={expandLabel} | ||
intlCollapse={messages.collapse} | ||
anveshmekala marked this conversation as resolved.
Show resolved
Hide resolved
|
||
intlExpand={messages.expand} | ||
position={position} | ||
ref={this.setExpandToggleRef} | ||
scale={scale} | ||
|
Uh oh!
There was an error while loading. Please reload this page.