javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 20:33:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore(): simplify overlay attribute types (#25074)

Browse Source
This commit is contained in:
Liam DeBeasi
2022-04-07 14:11:30 -04:00
committed by GitHub
parent 1c26e9b9b0
commit 9fbaaf95eb
20 changed files with 221 additions and 245 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
core/src/components/picker/picker-interface.ts
View File

@ -1,5 +1,3 @@
import type { JSXBase } from '@stencil/core/internal';
import type { AnimationBuilder, Mode } from '../../interface';
export interface PickerOptions {
@ -19,7 +17,10 @@ export interface PickerOptions {
leaveAnimation?: AnimationBuilder;
}
export type PickerAttributes = JSXBase.HTMLAttributes<HTMLElement>;
/**
* @deprecated - Use { [key: string]: any } directly instead.
*/
export type PickerAttributes = { [key: string]: any };
export interface PickerButton {
text?: string;

9
core/src/components/picker/readme.md
View File

@ -62,18 +62,13 @@ interface PickerOptions {
mode?: Mode;
keyboardClose?: boolean;
id?: string;
htmlAttributes?: PickerAttributes;
htmlAttributes?: { [key: string]: any };
enterAnimation?: AnimationBuilder;
leaveAnimation?: AnimationBuilder;
}
```
### PickerAttributes
```typescript
interface PickerAttributes extends JSXBase.HTMLAttributes<HTMLElement> {}
```
<!-- Auto Generated Below -->
@ -235,7 +230,7 @@ export default {
| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` |
| `duration` | `duration` | Number of milliseconds to wait before dismissing the picker. | `number` | `0` |
| `enterAnimation` | -- | Animation to use when the picker is presented. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
| `htmlAttributes` | -- | Additional attributes to pass to the picker. | `PickerAttributes \| undefined` | `undefined` |
| `htmlAttributes` | -- | Additional attributes to pass to the picker. | `undefined \| { [key: string]: any; }` | `undefined` |
| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` |
| `leaveAnimation` | -- | Animation to use when the picker is dismissed. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |

265
core/src/components/picker/test/basic/index.html
View File

@ -1,133 +1,142 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Picker - Basic</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
<script src="../../../../../scripts/testing/scripts.js"></script>
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
</head>
<script type="module">
import { pickerController } from '../../../../dist/ionic/index.esm.js';
window.pickerController = pickerController;
</script>
<body>
<ion-app>
<ion-content class="ion-padding">
<ion-button id="basic" expand="block" onclick="presentPicker()">Show Picker</ion-button>
<ion-button id="custom" expand="block" onclick="presentPicker('my-custom-class')">Show Custom Picker</ion-button>
</ion-content>
</ion-app>
<style>
.my-custom-class {
--width: 200px;
--height: 50%;
--background: #272727;
--background-rgb: 39, 39, 39;
--border-width: 2px;
--border-color: #000000;
--border-radius: 16px 16px 0 0;
color: #d6d6d6;
}
</style>
<script>
selectedIndex = 0;
const options = [{
text: '1',
value: '01'
},
{
text: '2',
value: '02'
},
{
text: '3',
value: '03'
},
{
text: '4',
value: '04'
},
{
text: '5',
value: '05'
},
{
text: '6',
value: '06'
},
{
text: '7',
value: '07'
},
{
text: '8',
value: '08'
},
{
text: '9',
value: '09'
},
{
text: '10',
value: '10'
},
{
text: '11',
value: '11'
},
{
text: '12',
value: '12'
}];
async function presentPicker(customClass) {
const pickerElement = await pickerController.create({
buttons: [{
text: 'Cancel',
role: 'cancel',
handler: () => console.log('Clicked Cancel!')
}, {
text: 'Save',
cssClass: 'save-btn',
handler: (ev) => {
const v = ev.hours.value;
selectedIndex = options.findIndex(opt => opt.value === v);
}
}, {
text: 'Log',
handler: (val) => {
return false;
}
}],
columns: [{
name: 'hours',
selectedIndex: selectedIndex,
prefix: 'total',
suffix: 'hours',
options: [...options]
}],
htmlAttributes: {
'data-testid': 'basic-picker'
},
cssClass: customClass
});
await pickerElement.present();
}
<head>
<meta charset="UTF-8" />
<title>Picker - Basic</title>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
<script src="../../../../../scripts/testing/scripts.js"></script>
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
</head>
<script type="module">
import { pickerController } from '../../../../dist/ionic/index.esm.js';
window.pickerController = pickerController;
</script>
</body>
<body>
<ion-app>
<ion-content class="ion-padding">
<ion-button id="basic" expand="block" onclick="presentPicker()">Show Picker</ion-button>
<ion-button id="custom" expand="block" onclick="presentPicker('my-custom-class')"
>Show Custom Picker</ion-button
>
</ion-content>
</ion-app>
<style>
.my-custom-class {
--width: 200px;
--height: 50%;
--background: #272727;
--background-rgb: 39, 39, 39;
--border-width: 2px;
--border-color: #000000;
--border-radius: 16px 16px 0 0;
color: #d6d6d6;
}
</style>
<script>
selectedIndex = 0;
const options = [
{
text: '1',
value: '01',
},
{
text: '2',
value: '02',
},
{
text: '3',
value: '03',
},
{
text: '4',
value: '04',
},
{
text: '5',
value: '05',
},
{
text: '6',
value: '06',
},
{
text: '7',
value: '07',
},
{
text: '8',
value: '08',
},
{
text: '9',
value: '09',
},
{
text: '10',
value: '10',
},
{
text: '11',
value: '11',
},
{
text: '12',
value: '12',
},
];
async function presentPicker(customClass) {
const pickerElement = await pickerController.create({
buttons: [
{
text: 'Cancel',
role: 'cancel',
handler: () => console.log('Clicked Cancel!'),
},
{
text: 'Save',
cssClass: 'save-btn',
handler: (ev) => {
const v = ev.hours.value;
selectedIndex = options.findIndex((opt) => opt.value === v);
},
},
{
text: 'Log',
handler: (val) => {
return false;
},
},
],
columns: [
{
name: 'hours',
selectedIndex: selectedIndex,
prefix: 'total',
suffix: 'hours',
options: [...options],
},
],
htmlAttributes: {
'data-testid': 'basic-picker',
},
cssClass: customClass,
});
await pickerElement.present();
}
</script>
</body>
</html>