opensourcemirror
/
Ionic
mirror of https://github.com/ionic-team/ionic.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Master react (#18998) 

* chore(): bump to beta 8

* fix(): IonFabButton href fix

* fix(react): support components with href attributes

* fix(): Prep work to break router out

* fix(): breaking react-router and react-core into own packages

* chore(): moving view stuff out of react-core

* chore(): dev build 8-1

* chore(): update to react beta 8

* chore(): fixes to deps

* fix(): removing IonAnchor in favor of IonRouterLink

* chore(): beta 9 release

* refactor(react): treeshake, minify, api

* wip

* fix(): react dev builds

* fix(): fixes to get app builds working again

* fix(): removing tgz file

* feat(): adding platform helper methods

* fix(): don't map attributes to props

* chore(): add test app

* feat(): copy css folder from core

* chore(): move rollup node resolve to devDependencies

* fix(): expose setupConfig()

* perf(): improve treeshaking

* fix(): removing crypto from generateUniqueId

* fix(): adding missing rollup dp

* fix(): test cleanup and fixes to make tests pass

* chore(): moving react to packages folder

* fix(): fixing react build due to move to packages

* feat(): adding missing IonInfiniteScrollContent component

* chore(): add automated testing using cypress

* fix(): adding option onDidDismiss to controller components

* 0.0.10 react

* wip

* fix(): removing deprecated React calls

* fix(): exporting setupConfig from core

* chore(): bump to 4.8.0-rc.0

* chore(): updating test-app deps and fixing test

* chore(): updates to react readme
This commit is contained in:
Manu MA 2019-08-13 22:24:44 +02:00 committed by Ely Lucas
parent 0b1e23f754
commit 930b271a4a
224 changed files with 16337 additions and 1734 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -57,6 +57,7 @@ prerender-static.html
# stencil
angular/css/
packages/react/css/
core/css/
core/hydrate/
core/loader/

2
core/src/components/action-sheet/readme.md
View File

@ -128,7 +128,7 @@ async function presentActionSheet() {
import React, { useState } from 'react'
import { IonActionSheet, IonContent, IonButton } from '@ionic/react';
export const ActionSheetExample: React.FunctionComponent = () => {
export const ActionSheetExample: React.FC = () => {
const [showActionSheet, setShowActionSheet] = useState(false);

2
core/src/components/action-sheet/usage/react.md
View File

@ -2,7 +2,7 @@
import React, { useState } from 'react'
import { IonActionSheet, IonContent, IonButton } from '@ionic/react';
export const ActionSheetExample: React.FunctionComponent = () => {
export const ActionSheetExample: React.FC = () => {
const [showActionSheet, setShowActionSheet] = useState(false);

2
core/src/components/alert/readme.md
View File

@ -526,7 +526,7 @@ async function presentAlertCheckbox() {
import React, { useState } from 'react';
import { IonAlert, IonButton, IonContent } from '@ionic/react';
export const AlertExample: React.FunctionComponent = () => {
export const AlertExample: React.FC = () => {
const [showAlert1, setShowAlert1] = useState(false);
const [showAlert2, setShowAlert2] = useState(false);

2
core/src/components/alert/usage/react.md
View File

@ -2,7 +2,7 @@
import React, { useState } from 'react';
import { IonAlert, IonButton, IonContent } from '@ionic/react';
export const AlertExample: React.FunctionComponent = () => {
export const AlertExample: React.FC = () => {
const [showAlert1, setShowAlert1] = useState(false);
const [showAlert2, setShowAlert2] = useState(false);

2
core/src/components/avatar/readme.md
View File

@ -39,7 +39,7 @@ Avatars can be used by themselves or inside of any element. If placed inside of
import React from 'react'
import { IonAvatar, IonChip, IonItem, IonLabel, IonContent } from '@ionic/react';
export const AvatarExample: React.FunctionComponent = () => (
export const AvatarExample: React.FC = () => (
<IonContent>
<IonAvatar>
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />

2
core/src/components/avatar/usage/react.md
View File

@ -2,7 +2,7 @@
import React from 'react'
import { IonAvatar, IonChip, IonItem, IonLabel, IonContent } from '@ionic/react';
export const AvatarExample: React.FunctionComponent = () => (
export const AvatarExample: React.FC = () => (
<IonContent>
<IonAvatar>
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />

2
core/src/components/back-button/readme.md
View File

@ -121,7 +121,7 @@ To change what is displayed in the back button, use the `text` and `icon` proper
import React from 'react';
import { IonBackButton, IonHeader, IonToolbar, IonButtons, IonMenuButton, IonContent } from '@ionic/react';
export const BackButtonExample: React.FunctionComponent = () => (
export const BackButtonExample: React.FC = () => (
<IonContent>
{/*-- Default back button --*/}
<IonHeader>

2
core/src/components/back-button/usage/react.md
View File

@ -2,7 +2,7 @@
import React from 'react';
import { IonBackButton, IonHeader, IonToolbar, IonButtons, IonMenuButton, IonContent } from '@ionic/react';
export const BackButtonExample: React.FunctionComponent = () => (
export const BackButtonExample: React.FC = () => (
<IonContent>
{/*-- Default back button --*/}
<IonHeader>

2
core/src/components/backdrop/readme.md
View File

@ -80,7 +80,7 @@ backdrop.stopPropagation = false;
import React from 'react';
import { IonBackdrop, IonContent } from '@ionic/react';
export const BackdropExample: React.FunctionComponent = () => (
export const BackdropExample: React.FC = () => (
<IonContent>
{/*-- Default backdrop --*/}
<IonBackdrop />

2
core/src/components/backdrop/usage/react.md
View File

@ -2,7 +2,7 @@
import React from 'react';
import { IonBackdrop, IonContent } from '@ionic/react';
export const BackdropExample: React.FunctionComponent = () => (
export const BackdropExample: React.FC = () => (
<IonContent>
{/*-- Default backdrop --*/}
<IonBackdrop />

2
core/src/components/badge/readme.md
View File

@ -40,7 +40,7 @@ Badges are inline block elements that usually appear near another element. Typic
import React from 'react';
import { IonBadge, IonItem, IonLabel, IonContent } from '@ionic/react';
export const BadgeExample: React.FunctionComponent = () => (
export const BadgeExample: React.FC = () => (
<IonContent>
{/*-- Default --*/}
<IonBadge>99</IonBadge>

2
core/src/components/badge/usage/react.md
View File

@ -2,7 +2,7 @@
import React from 'react';
import { IonBadge, IonItem, IonLabel, IonContent } from '@ionic/react';
export const BadgeExample: React.FunctionComponent = () => (
export const BadgeExample: React.FC = () => (
<IonContent>
{/*-- Default --*/}
<IonBadge>99</IonBadge>

2
core/src/components/button/readme.md
View File

@ -98,7 +98,7 @@ import React from 'react';
import { IonButton, IonIcon, IonContent } from '@ionic/react';
export const ButtonExample: React.FunctionComponent = () => (
export const ButtonExample: React.FC = () => (
<IonContent>
{/*-- Default --*/}
<IonButton>Default</IonButton>

2
core/src/components/button/usage/react.md
View File

@ -3,7 +3,7 @@ import React from 'react';
import { IonButton, IonIcon, IonContent } from '@ionic/react';
export const ButtonExample: React.FunctionComponent = () => (
export const ButtonExample: React.FC = () => (
<IonContent>
{/*-- Default --*/}
<IonButton>Default</IonButton>

2
core/src/components/buttons/readme.md
View File

@ -118,7 +118,7 @@ import {
IonContent
} from '@ionic/react';
export const ButtonsExample: React.FunctionComponent = () => (
export const ButtonsExample: React.FC = () => (
<IonContent>
<IonToolbar>
<IonButtons slot="start">

2
core/src/components/buttons/usage/react.md
View File

@ -11,7 +11,7 @@ import {
IonContent
} from '@ionic/react';
export const ButtonsExample: React.FunctionComponent = () => (
export const ButtonsExample: React.FC = () => (
<IonContent>
<IonToolbar>
<IonButtons slot="start">

2
core/src/components/card/readme.md
View File

@ -69,7 +69,7 @@ sub-components to reflect this. Please see `ion-card-content`,
import React from 'react';
import { IonButton, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonContent, IonIcon, IonItem, IonLabel } from '@ionic/react';
export const CardExample: React.FunctionComponent = () => (
export const CardExample: React.FC = () => (
<IonContent>
<IonCard>
<IonCardHeader>

2
core/src/components/card/usage/react.md
View File

@ -2,7 +2,7 @@
import React from 'react';
import { IonButton, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonContent, IonIcon, IonItem, IonLabel } from '@ionic/react';
export const CardExample: React.FunctionComponent = () => (
export const CardExample: React.FC = () => (
<IonContent>
<IonCard>
<IonCardHeader>

2
core/src/components/checkbox/readme.md
View File

@ -107,7 +107,7 @@ const form = [
{ val: 'Mushroom', isChecked: false }
];
export const CheckboxExample: React.FunctionComponent = () => (
export const CheckboxExample: React.FC = () => (
<IonContent>
{/*-- Default Checkbox --*/}
<IonCheckbox />

2
core/src/components/checkbox/usage/react.md
View File

@ -8,7 +8,7 @@ const form = [
{ val: 'Mushroom', isChecked: false }
];
export const CheckboxExample: React.FunctionComponent = () => (
export const CheckboxExample: React.FC = () => (
<IonContent>
{/*-- Default Checkbox --*/}
<IonCheckbox />

2
core/src/components/chip/readme.md
View File

@ -59,7 +59,7 @@ Chips represent complex entities in small blocks, such as a contact. A chip can
import React from 'react';
import { IonChip, IonLabel, IonIcon, IonAvatar, IonContent } from '@ionic/react';
export const ChipExample: React.FunctionComponent = () => (
export const ChipExample: React.FC = () => (
<IonContent>
<IonChip>
<IonLabel>Default</IonLabel>

2
core/src/components/chip/usage/react.md
View File

@ -2,7 +2,7 @@
import React from 'react';
import { IonChip, IonLabel, IonIcon, IonAvatar, IonContent } from '@ionic/react';
export const ChipExample: React.FunctionComponent = () => (
export const ChipExample: React.FC = () => (
<IonContent>
<IonChip>
<IonLabel>Default</IonLabel>

2
core/src/components/content/readme.md
View File

@ -44,7 +44,7 @@ content.addEventListener('ionScrollEnd', () => console.log('scroll end'));
import React from 'react';
import { IonContent } from '@ionic/react';
const ContentExample: React.FunctionComponent = () => (
const ContentExample: React.FC = () => (
<IonContent
scrollEvents={true}
onIonScrollStart={() => {}}

2
core/src/components/content/usage/react.md
View File

@ -2,7 +2,7 @@
import React from 'react';
import { IonContent } from '@ionic/react';
const ContentExample: React.FunctionComponent = () => (
const ContentExample: React.FC = () => (
<IonContent
scrollEvents={true}
onIonScrollStart={() => {}}

2
core/src/components/datetime/readme.md
View File

@ -416,7 +416,7 @@ const customDayShortNames = [
'l\u00f8r'
];
export const DateTimeExample: React.FunctionComponent = () => (
export const DateTimeExample: React.FC = () => (
<IonContent>
<IonItem>
<IonLabel>MMMM</IonLabel>

2
core/src/components/datetime/usage/react.md
View File

@ -14,7 +14,7 @@ const customDayShortNames = [
'l\u00f8r'
];
export const DateTimeExample: React.FunctionComponent = () => (
export const DateTimeExample: React.FC = () => (
<IonContent>
<IonItem>
<IonLabel>MMMM</IonLabel>

2
core/src/components/fab-button/readme.md
View File

@ -42,7 +42,7 @@ If the FAB button is not wrapped with `<ion-fab>`, it will scroll with the conte
import React from 'react';
import { IonContent, IonFab, IonFabButton } from '@ionic/react';
export const FabButtonExample: React.FunctionComponent = () => (
export const FabButtonExample: React.FC = () => (
<IonContent>
{/*-- Fixed Floating Action Button that does not scroll with the content --*/}
<IonFab>

2
core/src/components/fab-button/usage/react.md
View File

@ -2,7 +2,7 @@
import React from 'react';
import { IonContent, IonFab, IonFabButton } from '@ionic/react';
export const FabButtonExample: React.FunctionComponent = () => (
export const FabButtonExample: React.FC = () => (
<IonContent>
{/*-- Fixed Floating Action Button that does not scroll with the content --*/}
<IonFab>

2
core/src/components/fab-list/readme.md
View File

@ -33,7 +33,7 @@ The `ion-fab-list` element is a container for multiple fab buttons. This collect
import React from 'react';
import { IonFab, IonFabButton, IonFabList, IonContent, IonIcon } from '@ionic/react';
export const FabListExample: React.FunctionComponent = () => (
export const FabListExample: React.FC = () => (
<IonContent>
<IonFab vertical="bottom" horizontal="end">
<IonFabButton>

2
core/src/components/fab-list/usage/react.md
View File

@ -2,7 +2,7 @@
import React from 'react';
import { IonFab, IonFabButton, IonFabList, IonContent, IonIcon } from '@ionic/react';
export const FabListExample: React.FunctionComponent = () => (
export const FabListExample: React.FC = () => (
<IonContent>
<IonFab vertical="bottom" horizontal="end">
<IonFabButton>

2
core/src/components/fab/readme.md
View File

@ -98,7 +98,7 @@ Fabs are container elements that contain one or more fab buttons. They should be
import React from 'react';
import { IonContent, IonFab, IonFabButton, IonIcon, IonFabList } from '@ionic/react';
export const FabExample: React.FunctionComponent = () => (
export const FabExample: React.FC = () => (
<IonContent>
{/*-- fab placed to the top end --*/}
<IonFab vertical="top" horizontal="end" slot="fixed">

2
core/src/components/fab/usage/react.md
View File

@ -2,7 +2,7 @@
import React from 'react';
import { IonContent, IonFab, IonFabButton, IonIcon, IonFabList } from '@ionic/react';
export const FabExample: React.FunctionComponent = () => (
export const FabExample: React.FC = () => (
<IonContent>
{/*-- fab placed to the top end --*/}
<IonFab vertical="top" horizontal="end" slot="fixed">

2
core/src/components/footer/readme.md
View File

@ -27,7 +27,7 @@ Footer can be a wrapper for ion-toolbar to make sure the content area is sized c
import React from 'react';
import { IonContent, IonFooter, IonToolbar, IonTitle } from '@ionic/react';
export const FooterExample: React.FunctionComponent = () => (
export const FooterExample: React.FC = () => (
<>
<IonContent />

2
core/src/components/footer/usage/react.md
View File

@ -2,7 +2,7 @@
import React from 'react';
import { IonContent, IonFooter, IonToolbar, IonTitle } from '@ionic/react';
export const FooterExample: React.FunctionComponent = () => (
export const FooterExample: React.FC = () => (
<>
<IonContent />

2
core/src/components/grid/readme.md
View File

@ -201,7 +201,7 @@ See [Grid Layout](/docs/layout/grid) for more information.
import React from 'react';
import { IonGrid, IonRow, IonCol, IonContent } from '@ionic/react';
export const GridExample: React.FunctionComponent = () => (
export const GridExample: React.FC = () => (
<IonContent>
<IonGrid>
<IonRow>

2
core/src/components/grid/usage/react.md
View File

@ -2,7 +2,7 @@
import React from 'react';
import { IonGrid, IonRow, IonCol, IonContent } from '@ionic/react';
export const GridExample: React.FunctionComponent = () => (
export const GridExample: React.FC = () => (
<IonContent>
<IonGrid>
<IonRow>

2
core/src/components/header/readme.md
View File

@ -36,7 +36,7 @@ It's important to note that ion-header needs to be the one of the three root ele
import React from 'react';
import { IonHeader, IonContent, IonToolbar, IonButtons, IonBackButton, IonTitle } from '@ionic/react';
export const HeaderExample: React.FunctionComponent = () => (
export const HeaderExample: React.FC = () => (
<>
<IonHeader>
<IonToolbar>

2
core/src/components/header/usage/react.md
View File

@ -2,7 +2,7 @@
import React from 'react';
import { IonHeader, IonContent, IonToolbar, IonButtons, IonBackButton, IonTitle } from '@ionic/react';
export const HeaderExample: React.FunctionComponent = () => (
export const HeaderExample: React.FC = () => (
<>
<IonHeader>
<IonToolbar>

2
core/src/components/icon/usage/react.md
View File

@ -3,7 +3,7 @@ import React from 'react';
import { IonIcon } from '@ionic/react';
const Example: React.FunctionComponent<{}> = () => (
const Example: React.FC<{}> = () => (
<>
{/*-- automatically uses the correct "star" icon depending on the mode --*/}
<IonIcon name="star" />

2
core/src/components/img/readme.md
View File

@ -34,7 +34,7 @@ type Item = {
};
const items: Item[] = [{ src: 'http://placekitten.com/g/200/300', text: 'a picture of a cat' }];
export const ImgExample: React.FunctionComponent = () => (
export const ImgExample: React.FC = () => (
<IonContent>
<IonList>
{items.map((image, i) => (

2
core/src/components/img/usage/react.md
View File

@ -8,7 +8,7 @@ type Item = {
};
const items: Item[] = [{ src: 'http://placekitten.com/g/200/300', text: 'a picture of a cat' }];
export const ImgExample: React.FunctionComponent = () => (
export const ImgExample: React.FC = () => (
<IonContent>
<IonList>
{items.map((image, i) => (

2
core/src/components/input/readme.md
View File

@ -110,7 +110,7 @@ It is meant for text `type` inputs only, such as `"text"`, `"password"`, `"email
import React from 'react';
import { IonInput, IonItem, IonLabel, IonContent } from '@ionic/react';
export const InputExample: React.FunctionComponent = () => (
export const InputExample: React.FC = () => (
<IonContent>
{/*-- Default Input --*/}
<IonInput></IonInput>

2
core/src/components/input/usage/react.md
View File

@ -2,7 +2,7 @@
import React from 'react';
import { IonInput, IonItem, IonLabel, IonContent } from '@ionic/react';
export const InputExample: React.FunctionComponent = () => (
export const InputExample: React.FC = () => (
<IonContent>
{/*-- Default Input --*/}
<IonInput></IonInput>

2
core/src/components/item-divider/readme.md
View File

@ -57,7 +57,7 @@ Item Dividers are block elements that can be used to separate items in a list. T
import React from 'react';
import { IonItemDivider, IonLabel, IonList, IonItem, IonContent } from '@ionic/react';
export const ItemDividerExample: React.FunctionComponent = () => (
export const ItemDividerExample: React.FC = () => (
<IonContent>
<IonItemDivider>
<IonLabel>

2
core/src/components/item-divider/usage/react.md
View File

@ -2,7 +2,7 @@
import React from 'react';
import { IonItemDivider, IonLabel, IonList, IonItem, IonContent } from '@ionic/react';
export const ItemDividerExample: React.FunctionComponent = () => (
export const ItemDividerExample: React.FC = () => (
<IonContent>
<IonItemDivider>
<IonLabel>

2
core/src/components/item-group/readme.md
View File

@ -124,7 +124,7 @@ import React from 'react';
import { IonItemGroup, IonItemDivider, IonLabel, IonItem, IonItemSliding, IonItemOptions, IonItemOption } from '@ionic/react';
const Example: React.FunctionComponent<{}> = () => (
const Example: React.FC<{}> = () => (
<>
<IonItemGroup>
<IonItemDivider>

2
core/src/components/item-group/usage/react.md
View File

@ -3,7 +3,7 @@ import React from 'react';
import { IonItemGroup, IonItemDivider, IonLabel, IonItem, IonItemSliding, IonItemOptions, IonItemOption } from '@ionic/react';
const Example: React.FunctionComponent<{}> = () => (
const Example: React.FC<{}> = () => (
<>
<IonItemGroup>
<IonItemDivider>

2
core/src/components/item-sliding/readme.md
View File

@ -331,7 +331,7 @@ Options can be expanded to take up the full width of the item if you swipe past
import React from 'react';
import { IonList, IonItemSliding, IonItem, IonLabel, IonItemOptions, IonItemOption, IonIcon, IonNote } from '@ionic/react';
export const ItemSlidingExample: React.FunctionComponent = () => (
export const ItemSlidingExample: React.FC = () => (
<IonList>
{/* Sliding item with text options on both sides */}
<IonItemSliding>

2
core/src/components/item-sliding/usage/react.md
View File

@ -2,7 +2,7 @@
import React from 'react';
import { IonList, IonItemSliding, IonItem, IonLabel, IonItemOptions, IonItemOption, IonIcon, IonNote } from '@ionic/react';
export const ItemSlidingExample: React.FunctionComponent = () => (
export const ItemSlidingExample: React.FC = () => (
<IonList>
{/* Sliding item with text options on both sides */}
<IonItemSliding>

2
core/src/components/item/readme.md
View File

@ -714,7 +714,7 @@ import React from 'react';
import { IonItem, IonLabel, IonList, IonText, IonAvatar, IonThumbnail, IonButton, IonIcon, IonSelect, IonSelectOption, IonDatetime, IonToggle, IonInput, IonCheckbox, IonRange } from '@ionic/react';
const Example: React.FunctionComponent<{}> = () => (
const Example: React.FC<{}> = () => (
<>
{/*-- Default Item --*/}
<IonItem>

2
core/src/components/item/usage/react.md
View File

@ -3,7 +3,7 @@ import React from 'react';
import { IonItem, IonLabel, IonList, IonText, IonAvatar, IonThumbnail, IonButton, IonIcon, IonSelect, IonSelectOption, IonDatetime, IonToggle, IonInput, IonCheckbox, IonRange } from '@ionic/react';
const Example: React.FunctionComponent<{}> = () => (
const Example: React.FC<{}> = () => (
<>
{/*-- Default Item --*/}
<IonItem>

2
core/src/components/label/readme.md
View File

@ -72,7 +72,7 @@ Label is a wrapper element that can be used in combination with `ion-item`, `ion
import React from 'react';
import { IonLabel, IonItem, IonInput, IonToggle, IonCheckbox, IonContent } from '@ionic/react';
export const LabelExample: React.FunctionComponent = () => (
export const LabelExample: React.FC = () => (
<IonContent>
{/*-- Default Label --*/}
<IonLabel>Label</IonLabel><br />

2
core/src/components/label/usage/react.md
View File

@ -2,7 +2,7 @@
import React from 'react';
import { IonLabel, IonItem, IonInput, IonToggle, IonCheckbox, IonContent } from '@ionic/react';
export const LabelExample: React.FunctionComponent = () => (
export const LabelExample: React.FC = () => (
<IonContent>
{/*-- Default Label --*/}
<IonLabel>Label</IonLabel><br />

2
core/src/components/list-header/readme.md
View File

@ -31,7 +31,7 @@ Unlike ItemDivider, ListHeaders are styled to be stand-out from the rest of the
import React from 'react';
import { IonList, IonItem, IonLabel, IonContent, IonListHeader } from '@ionic/react';
export const ListHeaderExample: React.FunctionComponent = () => (
export const ListHeaderExample: React.FC = () => (
<IonContent>
<IonList>
<IonListHeader>

2
core/src/components/list-header/usage/react.md
View File

@ -2,7 +2,7 @@
import React from 'react';
import { IonList, IonItem, IonLabel, IonContent, IonListHeader } from '@ionic/react';
export const ListHeaderExample: React.FunctionComponent = () => (
export const ListHeaderExample: React.FC = () => (
<IonContent>
<IonList>
<IonListHeader>

2
core/src/components/list/readme.md
View File

@ -147,7 +147,7 @@ Lists support several interactions including swiping items to reveal options, dr
import React from 'react';
import { IonList, IonItem, IonLabel, IonInput, IonToggle, IonRadio, IonCheckbox, IonItemSliding, IonItemOption, IonItemOptions, IonContent } from '@ionic/react';
export const ListExample: React.FunctionComponent = () => (
export const ListExample: React.FC = () => (
<IonContent>
{/*-- List of Text Items --*/}
<IonList>

2
core/src/components/list/usage/react.md
View File

@ -2,7 +2,7 @@
import React from 'react';
import { IonList, IonItem, IonLabel, IonInput, IonToggle, IonRadio, IonCheckbox, IonItemSliding, IonItemOption, IonItemOptions, IonContent } from '@ionic/react';
export const ListExample: React.FunctionComponent = () => (
export const ListExample: React.FC = () => (
<IonContent>
{/*-- List of Text Items --*/}
<IonList>

2
core/src/components/loading/readme.md
View File

@ -97,7 +97,7 @@ async function presentLoadingWithOptions() {
import React, { useState } from 'react';
import { IonLoading, IonButton, IonContent } from '@ionic/react';
export const LoadingExample: React.FunctionComponent = () => {
export const LoadingExample: React.FC = () => {
const [showLoading, setShowLoading] = useState(true);
setTimeout(() => {

2
core/src/components/loading/usage/react.md
View File

@ -2,7 +2,7 @@
import React, { useState } from 'react';
import { IonLoading, IonButton, IonContent } from '@ionic/react';
export const LoadingExample: React.FunctionComponent = () => {
export const LoadingExample: React.FC = () => {
const [showLoading, setShowLoading] = useState(true);
setTimeout(() => {

2
core/src/components/menu/readme.md
View File

@ -209,7 +209,7 @@ function openCustom() {
import React from 'react';
import { IonMenu, IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, IonRouterOutlet } from '@ionic/react';
export const MenuExample: React.FunctionComponent = () => (
export const MenuExample: React.FC = () => (
<>
<IonMenu side="start" menuId="first">
<IonHeader>

2
core/src/components/menu/usage/react.md
View File

@ -2,7 +2,7 @@
import React from 'react';
import { IonMenu, IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, IonRouterOutlet } from '@ionic/react';
export const MenuExample: React.FunctionComponent = () => (
export const MenuExample: React.FC = () => (
<>
<IonMenu side="start" menuId="first">
<IonHeader>

2
core/src/components/modal/readme.md
View File

@ -251,7 +251,7 @@ console.log(data);
import React, { useState } from 'react';
import { IonModal, IonButton, IonContent } from '@ionic/react';
export const ModalExample: React.FunctionComponent = () => {
export const ModalExample: React.FC = () => {
const [showModal, setShowModal] = useState(false);
return (

2
core/src/components/modal/usage/react.md
View File

@ -2,7 +2,7 @@
import React, { useState } from 'react';
import { IonModal, IonButton, IonContent } from '@ionic/react';
export const ModalExample: React.FunctionComponent = () => {
export const ModalExample: React.FC = () => {
const [showModal, setShowModal] = useState(false);
return (

2
core/src/components/note/readme.md
View File

@ -42,7 +42,7 @@ Notes are text elements generally used as subtitles that provide more informatio
import React from 'react';
import { IonNote, IonList, IonItem, IonLabel, IonContent } from '@ionic/react';
export const NoteExample: React.FunctionComponent = () => (
export const NoteExample: React.FC = () => (
<IonContent>
{/*-- Default Note --*/}
<IonNote>Default Note</IonNote><br />

2
core/src/components/note/usage/react.md
View File

@ -2,7 +2,7 @@
import React from 'react';
import { IonNote, IonList, IonItem, IonLabel, IonContent } from '@ionic/react';
export const NoteExample: React.FunctionComponent = () => (
export const NoteExample: React.FC = () => (
<IonContent>
{/*-- Default Note --*/}
<IonNote>Default Note</IonNote><br />

2
core/src/components/popover/readme.md
View File

@ -65,7 +65,7 @@ async function presentPopover(ev) {
import React, { useState } from 'react';
import { IonPopover, IonButton } from '@ionic/react';
export const PopoverExample: React.FunctionComponent = () => {
export const PopoverExample: React.FC = () => {
const [showPopover, setShowPopover] = useState(false);
return (

2
core/src/components/popover/usage/react.md
View File

@ -2,7 +2,7 @@
import React, { useState } from 'react';
import { IonPopover, IonButton } from '@ionic/react';
export const PopoverExample: React.FunctionComponent = () => {
export const PopoverExample: React.FC = () => {
const [showPopover, setShowPopover] = useState(false);
return (

4
core/src/components/progress-bar/readme.md
View File

@ -8,7 +8,7 @@ ion-progress-bar is a horizontal progress bar to visualize the progression of an
If the percentage of an operation is known, you should use the determinate type. This is the default type and the progress is represented by the `value` property.
A buffer shows circles as animation to indicate some activity. If the `buffer` property is smaller than 1 you can show the addditional buffering progress.
A buffer shows circles as animation to indicate some activity. If the `buffer` property is smaller than 1 you can show the addditional buffering progress.
### Indeterminate
@ -47,7 +47,7 @@ If you add `reversed="true"`, you receive a query which is used to indicate pre-
import React from 'react';
import { IonProgressBar, IonContent } from '@ionic/react';
export const ProgressbarExample: React.FunctionComponent = () => (
export const ProgressbarExample: React.FC = () => (
<IonContent>
{/*-- Default Progressbar --*/}
<IonProgressBar></IonProgressBar><br />

2
core/src/components/progress-bar/usage/react.md
View File

@ -2,7 +2,7 @@
import React from 'react';
import { IonProgressBar, IonContent } from '@ionic/react';
export const ProgressbarExample: React.FunctionComponent = () => (
export const ProgressbarExample: React.FC = () => (
<IonContent>
{/*-- Default Progressbar --*/}
<IonProgressBar></IonProgressBar><br />

2
core/src/components/radio-group/readme.md
View File

@ -57,7 +57,7 @@ radio button within the same group.
import React from 'react';
import { IonList, IonRadioGroup, IonListHeader, IonLabel, IonRadio, IonItem, IonContent } from '@ionic/react';
export const RadioGroupExample: React.FunctionComponent = () => (
export const RadioGroupExample: React.FC = () => (
<IonContent>
<IonList>
<IonRadioGroup>

2
core/src/components/radio-group/usage/react.md
View File

@ -2,7 +2,7 @@
import React from 'react';
import { IonList, IonRadioGroup, IonListHeader, IonLabel, IonRadio, IonItem, IonContent } from '@ionic/react';
export const RadioGroupExample: React.FunctionComponent = () => (
export const RadioGroupExample: React.FC = () => (
<IonContent>
<IonList>
<IonRadioGroup>

2
core/src/components/radio/readme.md
View File

@ -46,7 +46,7 @@ An `ion-radio-group` can be used to group a set of radios. When radios are insid
import React from 'react';
import { IonList, IonRadioGroup, IonListHeader, IonLabel, IonItem, IonRadio, IonContent } from '@ionic/react';
export const RadioExample: React.FunctionComponent = () => (
export const RadioExample: React.FC = () => (
<IonContent>
<IonList>
<IonRadioGroup>

2
core/src/components/radio/usage/react.md
View File

@ -2,7 +2,7 @@
import React from 'react';
import { IonList, IonRadioGroup, IonListHeader, IonLabel, IonItem, IonRadio, IonContent } from '@ionic/react';
export const RadioExample: React.FunctionComponent = () => (
export const RadioExample: React.FC = () => (
<IonContent>
<IonList>
<IonRadioGroup>

2
core/src/components/range/readme.md
View File

@ -97,7 +97,7 @@ left or right of the range.
import React from 'react';
import { IonList, IonItem, IonRange, IonLabel, IonIcon, IonContent } from '@ionic/react';
export const RangeExample: React.FunctionComponent = () => (
export const RangeExample: React.FC = () => (
<IonContent>
<IonList>
<IonItem>

2
core/src/components/range/usage/react.md
View File

@ -2,7 +2,7 @@
import React from 'react';
import { IonList, IonItem, IonRange, IonLabel, IonIcon, IonContent } from '@ionic/react';
export const RangeExample: React.FunctionComponent = () => (
export const RangeExample: React.FC = () => (
<IonContent>
<IonList>
<IonItem>

2
core/src/components/refresher/readme.md
View File

@ -115,7 +115,7 @@ function doRefresh(event: CustomEvent<RefresherEventDetail>) {
}, 2000);
}
export const RefresherExample: React.FunctionComponent = () => (
export const RefresherExample: React.FC = () => (
<IonContent>
{/*-- Default Refresher --*/}
<IonContent>

2
core/src/components/refresher/usage/react.md
View File

@ -12,7 +12,7 @@ function doRefresh(event: CustomEvent<RefresherEventDetail>) {
}, 2000);
}
export const RefresherExample: React.FunctionComponent = () => (
export const RefresherExample: React.FC = () => (
<IonContent>
{/*-- Default Refresher --*/}
<IonContent>

2
core/src/components/reorder-group/readme.md
View File

@ -279,7 +279,7 @@ function doReorder(event: CustomEvent<ItemReorderEventDetail>) {
event.detail.complete();
}
export const ReorderGroupExample: React.FunctionComponent = () => (
export const ReorderGroupExample: React.FC = () => (
<IonContent>
{/*-- The reorder gesture is disabled by default, enable it to drag and drop items --*/}
<IonReorderGroup disabled={false} onIonItemReorder={doReorder}>

2
core/src/components/reorder-group/usage/react.md
View File

@ -14,7 +14,7 @@ function doReorder(event: CustomEvent<ItemReorderEventDetail>) {
event.detail.complete();
}
export const ReorderGroupExample: React.FunctionComponent = () => (
export const ReorderGroupExample: React.FC = () => (
<IonContent>
{/*-- The reorder gesture is disabled by default, enable it to drag and drop items --*/}
<IonReorderGroup disabled={false} onIonItemReorder={doReorder}>

2
core/src/components/reorder/readme.md
View File

@ -87,7 +87,7 @@ Reorder is a component that allows an item in a group of items to be dragged to
import React from 'react';
import { IonIcon, IonItem, IonLabel, IonReorder, IonContent } from '@ionic/react';
export const ReorderExample: React.FunctionComponent = () => (
export const ReorderExample: React.FC = () => (
<IonContent>
{/*-- Default reorder icon, end aligned items --*/}
<IonItem>

2
core/src/components/reorder/usage/react.md
View File

@ -2,7 +2,7 @@
import React from 'react';
import { IonIcon, IonItem, IonLabel, IonReorder, IonContent } from '@ionic/react';
export const ReorderExample: React.FunctionComponent = () => (
export const ReorderExample: React.FC = () => (
<IonContent>
{/*-- Default reorder icon, end aligned items --*/}
<IonItem>

2
core/src/components/searchbar/readme.md
View File

@ -115,7 +115,7 @@ A Searchbar should be used instead of an input to search lists. A clear button i
import React from 'react';
import { IonSearchbar, IonToolbar, IonContent } from '@ionic/react';
export const SearchbarExample: React.FunctionComponent = () => (
export const SearchbarExample: React.FC = () => (
<IonContent>
{/*-- Default Searchbar --*/}
<IonSearchbar></IonSearchbar>

2
core/src/components/searchbar/usage/react.md
View File

@ -2,7 +2,7 @@
import React from 'react';
import { IonSearchbar, IonToolbar, IonContent } from '@ionic/react';
export const SearchbarExample: React.FunctionComponent = () => (
export const SearchbarExample: React.FC = () => (
<IonContent>
{/*-- Default Searchbar --*/}
<IonSearchbar></IonSearchbar>

2
core/src/components/segment-button/readme.md
View File

@ -321,7 +321,7 @@ for (let i = 0; i < segmentButtons.length; i++) {
import React from 'react';
import { IonSegment, IonSegmentButton, IonLabel, IonIcon, IonContent } from '@ionic/react';
export const SegmentButtonExample: React.FunctionComponent = () => (
export const SegmentButtonExample: React.FC = () => (
<IonContent>
{/*-- Segment buttons with text and click listeners --*/}
<IonSegment>

2
core/src/components/segment-button/usage/react.md
View File

@ -2,7 +2,7 @@
import React from 'react';
import { IonSegment, IonSegmentButton, IonLabel, IonIcon, IonContent } from '@ionic/react';
export const SegmentButtonExample: React.FunctionComponent = () => (
export const SegmentButtonExample: React.FC = () => (
<IonContent>
{/*-- Segment buttons with text and click listeners --*/}
<IonSegment>

2
core/src/components/segment/readme.md
View File

@ -231,7 +231,7 @@ for (let i = 0; i < segments.length; i++) {
import React from 'react';
import { IonSegment, IonSegmentButton, IonLabel, IonIcon, IonToolbar, IonContent } from '@ionic/react';
export const SegmentExample: React.FunctionComponent = () => (
export const SegmentExample: React.FC = () => (
<IonContent>
{/*-- Default Segment --*/}
<IonSegment onIonChange={e => console.log('Segment selected', e.detail.value)}>

2
core/src/components/segment/usage/react.md
View File

@ -2,7 +2,7 @@
import React from 'react';
import { IonSegment, IonSegmentButton, IonLabel, IonIcon, IonToolbar, IonContent } from '@ionic/react';
export const SegmentExample: React.FunctionComponent = () => (
export const SegmentExample: React.FC = () => (
<IonContent>
{/*-- Default Segment --*/}
<IonSegment onIonChange={e => console.log('Segment selected', e.detail.value)}>

2
core/src/components/select/readme.md
View File

@ -478,7 +478,7 @@ const compareWith = (o1: any, o2: any) => {
return o1 && o2 ? o1.id === o2.id : o1 === o2;
};
export const SelectExample: React.FunctionComponent = () => (
export const SelectExample: React.FC = () => (
<IonContent>
## Single Selection
<IonList>

2
core/src/components/select/usage/react.md
View File

@ -50,7 +50,7 @@ const compareWith = (o1: any, o2: any) => {
return o1 && o2 ? o1.id === o2.id : o1 === o2;
};
export const SelectExample: React.FunctionComponent = () => (
export const SelectExample: React.FC = () => (
<IonContent>
## Single Selection
<IonList>

2
core/src/components/skeleton-text/readme.md
View File

@ -338,7 +338,7 @@ import {
} from '@ionic/react';
import './SkeletonTextExample.css';
export const SkeletonTextExample: React.FunctionComponent = () => {
export const SkeletonTextExample: React.FC = () => {
const [data, setData] = useState();
setTimeout(() => {

2
core/src/components/skeleton-text/usage/react.md
View File

@ -13,7 +13,7 @@ import {
} from '@ionic/react';
import './SkeletonTextExample.css';
export const SkeletonTextExample: React.FunctionComponent = () => {
export const SkeletonTextExample: React.FC = () => {
const [data, setData] = useState();
setTimeout(() => {

34
core/src/components/slides/readme.md
View File

@ -59,24 +59,24 @@ const slidesOpts = {
const slideSize = slidesSizesGrid[i];
const slideOffset = $slideEl[0].swiperSlideOffset;
const offsetMultiplier = ((center - slideOffset - (slideSize / 2)) / slideSize) * params.modifier;
let rotateY = isHorizontal ? rotate * offsetMultiplier : 0;
let rotateX = isHorizontal ? 0 : rotate * offsetMultiplier;
// var rotateZ = 0
let translateZ = -translate * Math.abs(offsetMultiplier);
let translateY = isHorizontal ? 0 : params.stretch * (offsetMultiplier);
let translateX = isHorizontal ? params.stretch * (offsetMultiplier) : 0;
// Fix for ultra small values
if (Math.abs(translateX) < 0.001) translateX = 0;
if (Math.abs(translateY) < 0.001) translateY = 0;
if (Math.abs(translateZ) < 0.001) translateZ = 0;
if (Math.abs(rotateY) < 0.001) rotateY = 0;
if (Math.abs(rotateX) < 0.001) rotateX = 0;
const slideTransform = `translate3d(${translateX}px,${translateY}px,${translateZ}px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
$slideEl.transform(slideTransform);
$slideEl[0].style.zIndex = -Math.abs(Math.round(offsetMultiplier)) + 1;
if (params.slideShadows) {
@ -95,7 +95,7 @@ const slidesOpts = {
if ($shadowAfterEl.length) $shadowAfterEl[0].style.opacity = (-offsetMultiplier) > 0 ? -offsetMultiplier : 0;
}
}
// Set correct perspective for IE10
if (swiper.support.pointerEvents || swiper.support.prefixedPointerEvents) {
const ws = $wrapperEl[0].style;
@ -129,7 +129,7 @@ const slidesOpts = {
const swiper = this;
swiper.classNames.push(`${swiper.params.containerModifierClass}cube`);
swiper.classNames.push(`${swiper.params.containerModifierClass}3d`);
const overwriteParams = {
slidesPerView: 1,
slidesPerColumn: 1,
@ -140,7 +140,7 @@ const slidesOpts = {
centeredSlides: false,
virtualTranslate: true,
};
this.params = Object.assign(this.params, overwriteParams);
this.originalParams = Object.assign(this.originalParams, overwriteParams);
},
@ -170,7 +170,7 @@ const slidesOpts = {
}
}
}
for (let i = 0; i < slides.length; i += 1) {
const $slideEl = slides.eq(i);
let slideIndex = i;
@ -203,12 +203,12 @@ const slidesOpts = {
if (rtl) {
tx = -tx;
}
if (!isHorizontal) {
ty = tx;
tx = 0;
}
const transform$$1 = `rotateX(${isHorizontal ? 0 : -slideAngle}deg) rotateY(${isHorizontal ? slideAngle : 0}deg) translate3d(${tx}px, ${ty}px, ${tz}px)`;
if (progress <= 1 && progress > -1) {
wrapperRotate = (slideIndex * 90) + (progress * 90);
@ -237,7 +237,7 @@ const slidesOpts = {
'-ms-transform-origin': `50% 50% -${swiperSize / 2}px`,
'transform-origin': `50% 50% -${swiperSize / 2}px`,
});
if (params.shadow) {
if (isHorizontal) {
$cubeShadowEl.transform(`translate3d(0px, ${(swiperWidth / 2) + params.shadowOffset}px, ${-swiperWidth / 2}px) rotateX(90deg) rotateZ(0deg) scale(${params.shadowScale})`);
@ -334,7 +334,7 @@ const slidesOpts = {
}
},
}
}
}
```
#### Flip
@ -380,9 +380,9 @@ const slideOpts = {
} else if (rtl) {
rotateY = -rotateY;
}
$slideEl[0].style.zIndex = -Math.abs(Math.round(progress)) + slides.length;
if (swiper.params.flipEffect.slideShadows) {
// Set shadows
let shadowBefore = swiper.isHorizontal() ? $slideEl.find('.swiper-slide-shadow-left') : $slideEl.find('.swiper-slide-shadow-top');
@ -415,7 +415,7 @@ const slideOpts = {
slides.eq(activeIndex).transitionEnd(function onTransitionEnd() {
if (eventTriggered) return;
if (!swiper || swiper.destroyed) return;
eventTriggered = true;
swiper.animating = false;
const triggerEvents = ['webkitTransitionEnd', 'transitionend'];
@ -508,7 +508,7 @@ const slideOpts = {
speed: 400
};
export const SlidesExample: React.FunctionComponent = () => (
export const SlidesExample: React.FC = () => (
<IonContent>
<IonSlides pager={true} options={slideOpts}>
<IonSlide>

2
core/src/components/slides/usage/react.md
View File

@ -8,7 +8,7 @@ const slideOpts = {
speed: 400
};
export const SlidesExample: React.FunctionComponent = () => (
export const SlidesExample: React.FC = () => (
<IonContent>
<IonSlides pager={true} options={slideOpts}>
<IonSlide>

2
core/src/components/spinner/readme.md
View File

@ -46,7 +46,7 @@ The default spinner to use is based on the platform. The default spinner for `io
import React from 'react';
import { IonSpinner, IonContent } from '@ionic/react';
export const SpinnerExample: React.FunctionComponent = () => (
export const SpinnerExample: React.FC = () => (
<IonContent>
{/*-- Default Spinner --*/}
<IonSpinner />

2
core/src/components/spinner/usage/react.md
View File

@ -2,7 +2,7 @@
import React from 'react';
import { IonSpinner, IonContent } from '@ionic/react';
export const SpinnerExample: React.FunctionComponent = () => (
export const SpinnerExample: React.FC = () => (
<IonContent>
{/*-- Default Spinner --*/}
<IonSpinner />

2
core/src/components/tab-bar/readme.md
View File

@ -59,7 +59,7 @@ The tab bar is a UI component that contains a set of [tab buttons](../tab-button
import React from 'react';
import { IonTabs, IonTabBar, IonTabButton, IonIcon, IonContent } from '@ionic/react';
export const TabBarExample: React.FunctionComponent = () => (
export const TabBarExample: React.FC = () => (
<IonContent>
<IonTabs>
{/*-- Tab bar --*/}

2
core/src/components/tab-bar/usage/react.md
View File

@ -2,7 +2,7 @@
import React from 'react';
import { IonTabs, IonTabBar, IonTabButton, IonIcon, IonContent } from '@ionic/react';
export const TabBarExample: React.FunctionComponent = () => (
export const TabBarExample: React.FC = () => (
<IonContent>
<IonTabs>
{/*-- Tab bar --*/}

2
core/src/components/tab-button/readme.md
View File

@ -94,7 +94,7 @@ See the [tabs documentation](../tabs) for more details on configuring tabs.
import React from 'react';
import { IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel, IonContent } from '@ionic/react';
export const TabButtonExample: React.FunctionComponent = () => (
export const TabButtonExample: React.FC = () => (
<IonContent>
<IonTabs>
<IonTabBar slot="bottom">

2
core/src/components/tab-button/usage/react.md
View File

@ -2,7 +2,7 @@
import React from 'react';
import { IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel, IonContent } from '@ionic/react';
export const TabButtonExample: React.FunctionComponent = () => (
export const TabButtonExample: React.FC = () => (
<IonContent>
<IonTabs>
<IonTabBar slot="bottom">

Some files were not shown because too many files have changed in this diff Show More