Skip to content

Commit 79461b4

Browse files
randriovarandriova
committed
JA - updating topics for #1603, #1525, #1505 
1 parent c9da1a7 commit 79461b4

4 files changed

Lines changed: 537 additions & 74 deletions

File tree

‎doc/jp/components/grids/_shared/cascading-combos.md‎

Lines changed: 31 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -49,8 +49,7 @@ builder.Services.AddIgniteUIBlazor(
4949
```
5050

5151
```tsx
52-
import { IgrComboModule, IgrCombo } from 'igniteui-react';
53-
IgrComboModule.register();
52+
import { IgrCombo } from 'igniteui-react';
5453
```
5554

5655
次に、コンボを使用して列テンプレートを定義する必要があります。
@@ -59,22 +58,28 @@ IgrComboModule.register();
5958
<IgrColumn
6059
field="Country"
6160
header="Country"
62-
bodyTemplate={webGridCountryDropDownTemplate}
63-
name="column1">
61+
bodyTemplate={webGridCountryDropDownTemplate}>
6462
</IgrColumn>
6563
```
6664

6765
```tsx
68-
function webGridCountryDropDownTemplate(props: {dataContext: IgrCellTemplateContext}) => {
69-
var cell = props.dataContext.cell as any;
70-
if (cell === undefined) {
71-
return <></>;
72-
}
73-
const id = cell.id.rowID;
74-
const comboId = "country" + id;
66+
const webGridCountryDropDownTemplate = (ctx: IgrCellTemplateContext) => {
67+
const rowId = ctx.cell?.id.rowID;
68+
if (!rowId) return <></>;
69+
const comboId = `country_${rowId}`;
70+
7571
return (
7672
<>
77-
<IgrCombo data={countries} ref={comboRefs} change={(x: any, args: any) => {onCountryChange(id, x, args) }} placeholder="Choose Country..." valueKey="Country" displayKey="Country" singleSelect="true" name={comboId}></IgrCombo>
73+
<IgrCombo
74+
data={countries}
75+
ref={getComboRef(comboId)}
76+
onChange={(event: CustomEvent) => { onCountryChange(rowId, event) }}
77+
placeholder="Choose Country..."
78+
valueKey="Country"
79+
displayKey="Country"
80+
singleSelect={true}
81+
name={comboId}>
82+
</IgrCombo>
7883
</>
7984
);
8085
}
@@ -161,19 +166,28 @@ public bindEventsCountryCombo(rowId: any, cell: any) {
161166
```
162167

163168
```tsx
164-
function onCountryChange(rowId: string, cmp: any, args:any) {
165-
const regionCombo = comboRefCollection.get("region_" + rowId);
166-
setTimeout(() => {
167-
const newValue = cmp.value[0];
169+
const onCountryChange = (rowId: string, event: CustomEvent) => {
170+
const regionCombo = getComboRef(`region_${rowId}`).current;
171+
const cityCombo = getComboRef(`city_${rowId}`).current;
172+
const regions = regions;
173+
const newValue = event.detail.newValue[0];
174+
168175
if (newValue === undefined) {
169176
regionCombo.deselect(regionCombo.value);
170177
regionCombo.disabled = true;
171178
regionCombo.data = [];
179+
180+
cityCombo.deselect(regionCombo.value);
181+
cityCombo.disabled = true;
182+
cityCombo.data = [];
172183
} else {
173184
regionCombo.disabled = false;
174185
regionCombo.data = regions.filter(x => x.Country === newValue);
186+
187+
cityCombo.deselect(cityCombo.value);
188+
cityCombo.disabled = true;
189+
cityCombo.data = [];
175190
}
176-
});
177191
}
178192
```
179193

‎doc/jp/components/notifications/banner.md‎

Lines changed: 53 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -40,13 +40,11 @@ defineComponents(IgcBannerComponent);
4040
npm install igniteui-react
4141
```
4242

43-
次に、以下のように、`Banner` とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります:
43+
次に、以下のように、`Banner` と必要な CSS をインポートする必要があります:
4444

4545
```tsx
46-
import { IgrBannerModule, IgrBanner } from 'igniteui-react';
46+
import { IgrBanner } from 'igniteui-react';
4747
import 'igniteui-webcomponents/themes/light/bootstrap.css';
48-
49-
IgrBannerModule.register();
5048
```
5149
<!-- end: React -->
5250

@@ -81,12 +79,12 @@ Banner コンポーネントを表示するには、ボタン クリックで `S
8179
```
8280

8381
```tsx
84-
<IgrButton clicked={() => bannerRef.current.show()}>
82+
<IgrButton onClick={() => bannerRef.current.show()}>
8583
<span>Show Banner</span>
8684
</IgrButton>
8785

8886
<IgrBanner ref={bannerRef}>
89-
<span key="message">You are currently offline.</span>
87+
<span>You are currently offline.</span>
9088
</IgrBanner>
9189
```
9290

@@ -127,7 +125,7 @@ Banner コンポーネントを表示するには、ボタン クリックで `S
127125

128126
```tsx
129127
<IgrBanner ref={bannerRef}>
130-
<span key="message">You have lost connection to the internet. This app is offline.</span>
128+
<span>You have lost connection to the internet. This app is offline.</span>
131129
</IgrBanner>
132130
```
133131

@@ -155,8 +153,8 @@ Banner コンポーネントを表示するには、ボタン クリックで `S
155153

156154
```tsx
157155
<IgrBanner ref={bannerRef}>
158-
<IgrIcon key="icon" slot="prefix" name="signal_wifi_off"></IgrIcon>
159-
<span key="message">You have lost connection to the internet. This app is offline.</span>
156+
<IgrIcon slot="prefix" name="signal_wifi_off"></IgrIcon>
157+
<span>You have lost connection to the internet. This app is offline.</span>
160158
</IgrBanner>
161159
```
162160

@@ -178,8 +176,8 @@ Banner コンポーネントを表示するには、ボタン クリックで `S
178176

179177
```tsx
180178
<IgrBanner ref={bannerRef}>
181-
<span key="message">You have lost connection to the internet. This app is offline.</span>
182-
<IgrIcon key="icon" name="signal_wifi_off"></IgrIcon>
179+
<span>You have lost connection to the internet. This app is offline.</span>
180+
<IgrIcon name="signal_wifi_off"></IgrIcon>
183181
</IgrBanner>
184182
```
185183

@@ -209,12 +207,12 @@ Banner コンポーネントを表示するには、ボタン クリックで `S
209207

210208
```tsx
211209
<IgrBanner ref={bannerRef}>
212-
<IgrIcon key="icon" slot="prefix" name="signal_wifi_off"></IgrIcon>
213-
<span key="message">You have lost connection to the internet. This app is offline.</span>
214-
<div key="actions" slot="actions">
215-
<IgrButton key="button" variant="flat" clicked={() => bannerRef.current.toggle()}>
216-
<IgrRipple key="ripple" />
217-
<span key="action-text">Toggle Banner</span>
210+
<IgrIcon slot="prefix" name="signal_wifi_off"></IgrIcon>
211+
<span>You have lost connection to the internet. This app is offline.</span>
212+
<div slot="actions">
213+
<IgrButton variant="flat" onClick={() => bannerRef.current.toggle()}>
214+
<IgrRipple />
215+
<span>Toggle Banner</span>
218216
</IgrButton>
219217
</div>
220218
</IgrBanner>
@@ -246,7 +244,7 @@ Banner コンポーネントを表示するには、ボタン クリックで `S
246244

247245
### イベントにバインド
248246

249-
バナー コンポーネントは、閉じられるときに `igcClosing` イベントと `igcClosed` イベントを発行します。`igcClosing` イベントはキャンセル可能です。[`CustomEvent`](https://developer.mozilla.org/docs/Web/API/CustomEvent) インターフェイスを使用し、発行されたオブジェクトの `cancelable` プロパティは **true** に設定されています。`igcClosing` イベントをキャンセルすると、対応する終了アクションとイベントはトリガーされません。バナーは閉じられず、`igcClosed` イベントも発行されません。
247+
バナー コンポーネントは、閉じられるときに `Closing` イベントと `Closed` イベントを発行します。`Closing` イベントはキャンセル可能です。[`CustomEvent`](https://developer.mozilla.org/docs/Web/API/CustomEvent) インターフェイスを使用し、発行されたオブジェクトの `cancelable` プロパティは **true** に設定されています。`Closing` イベントをキャンセルすると、対応する終了アクションとイベントはトリガーされません。バナーは閉じられず、`Closed` イベントも発行されません。
250248

251249
終了イベントをキャンセルするには、[`preventDefault`](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault) メソッドを呼び出します。
252250

@@ -264,17 +262,9 @@ banner.addEventListener('igcClosing', (event) => {
264262
```
265263

266264
```tsx
267-
<IgrBanner ref={bannerRef}>
265+
<IgrBanner onClosing={(event) => event.preventDefault()}>
268266
...
269267
</IgrBanner>
270-
271-
const bannerRef = useRef<IgrBanner>(null);
272-
273-
useEffect(() => {
274-
bannerRef.current.nativeElement.addEventListener('igcClosing', (event) => {
275-
event.preventDefault();
276-
});
277-
}, [])
278268
```
279269

280270
```razor
@@ -329,16 +319,16 @@ function handleClosing() {
329319

330320
```tsx
331321
<IgrBanner ref={bannerRef}>
332-
<IgrIcon key="icon" slot="prefix" name="signal_wifi_off"></IgrIcon>
333-
<span key="message">You have lost connection to the internet. This app is offline.</span>
334-
<div key="actions" slot="actions">
335-
<IgrButton key="button-offline" variant="flat" clicked={() => bannerRef.current.hide()}>
336-
<IgrRipple key="ripple-offline" />
337-
<span key="action-offline">Continue Offline</span>
322+
<IgrIcon slot="prefix" name="signal_wifi_off"></IgrIcon>
323+
<span>You have lost connection to the internet. This app is offline.</span>
324+
<div slot="actions">
325+
<IgrButton variant="flat" onClick={() => bannerRef.current.hide()}>
326+
<IgrRipple />
327+
<span>Continue Offline</span>
338328
</IgrButton>
339-
<IgrButton key="button-wifi" variant="flat" clicked={() => refreshBanner()}>
340-
<IgrRipple key="ripple-wifi" />
341-
<span key="action-wifi">Turn On Wifi</span>
329+
<IgrButton variant="flat" onClick={refreshBanner}>
330+
<IgrRipple />
331+
<span>Turn On Wifi</span>
342332
</IgrButton>
343333
</div>
344334
</IgrBanner>
@@ -424,37 +414,43 @@ public refreshBanner() {
424414
```
425415

426416
```tsx
427-
<IgrNavbar>
428-
<h1 key="header">Gallery</h1>
429-
<IgrIcon ref={iconRef} key="icon" name="signal_wifi_off" slot="end" onClick={() => refreshBanner()}></IgrIcon>
430-
</IgrNavbar>
431-
432-
<IgrBanner ref={bannerRef}>
433-
...
434-
<div key="actions" slot="actions">
435-
...
436-
<IgrButton key="button-wifi" variant="flat" clicked={() => refreshBanner()}>
437-
<IgrRipple key="ripple-wifi" />
438-
<span key="action-wifi">Turn On Wifi</span>
439-
</IgrButton>
440-
</div>
441-
</IgrBanner>
442-
443417
const bannerRef = useRef<IgrBanner>(null);
444418
const iconRef = useRef<IgrIcon>(null);
445419

446420
const [wifiState, setWifiState] = useState(false);
421+
const [iconName, setIconName] = useState("signal_wifi_off");
447422

448-
function refreshBanner() {
449-
if (!wifiState) {
450-
iconRef.current.name = 'signal_wifi_4_bar';
423+
const refreshBanner = () => {
424+
const nextWifiState = !wifiState;
425+
setWifiState(nextWifiState);
426+
setIconName(nextWifiState ? "signal_wifi_4_bar" : "signal_wifi_off");
427+
428+
if (nextWifiState) {
451429
bannerRef.current.hide();
452430
} else {
453-
iconRef.current.name = 'signal_wifi_off';
454431
bannerRef.current.show();
455432
}
456-
setWifiState(current => !current);
457433
}
434+
435+
return(
436+
<>
437+
<IgrNavbar>
438+
<h1>Gallery</h1>
439+
<IgrIcon ref={iconRef} name={iconName} slot="end" onClick={refreshBanner}></IgrIcon>
440+
</IgrNavbar>
441+
442+
<IgrBanner ref={bannerRef}>
443+
...
444+
<div slot="actions">
445+
...
446+
<IgrButton variant="flat" onClick={refreshBanner}>
447+
<IgrRipple />
448+
<span>Turn On Wifi</span>
449+
</IgrButton>
450+
</div>
451+
</IgrBanner>
452+
</>
453+
);
458454
```
459455

460456
```razor

0 commit comments

Comments
 (0)