mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-22 21:48:42 +08:00
chore(packages): move the packages to root
This commit is contained in:
Brandy Carney
26
core/src/components/picker/animations/ios.enter.ts
Normal file
26
core/src/components/picker/animations/ios.enter.ts
Normal file
@ -0,0 +1,26 @@
|
||||
import { Animation } from '../../../index';
|
||||
|
||||
|
||||
/**
|
||||
* iOS Picker Enter Animation
|
||||
*/
|
||||
export default function iosEnterAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
|
||||
const baseAnimation = new Animation();
|
||||
|
||||
const backdropAnimation = new Animation();
|
||||
backdropAnimation.addElement(baseEl.querySelector('ion-backdrop'));
|
||||
|
||||
const wrapperAnimation = new Animation();
|
||||
wrapperAnimation.addElement(baseEl.querySelector('.picker-wrapper'));
|
||||
|
||||
backdropAnimation.fromTo('opacity', 0.01, 0.26);
|
||||
|
||||
wrapperAnimation.fromTo('translateY', '100%', '0%');
|
||||
|
||||
return Promise.resolve(baseAnimation
|
||||
.addElement(baseEl)
|
||||
.easing('cubic-bezier(.36,.66,.04,1)')
|
||||
.duration(400)
|
||||
.add(backdropAnimation)
|
||||
.add(wrapperAnimation));
|
||||
}
|
||||
26
core/src/components/picker/animations/ios.leave.ts
Normal file
26
core/src/components/picker/animations/ios.leave.ts
Normal file
@ -0,0 +1,26 @@
|
||||
import { Animation } from '../../../index';
|
||||
|
||||
|
||||
/**
|
||||
* iOS Picker Leave Animation
|
||||
*/
|
||||
export default function iosLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
|
||||
const baseAnimation = new Animation();
|
||||
|
||||
const backdropAnimation = new Animation();
|
||||
backdropAnimation.addElement(baseEl.querySelector('ion-backdrop'));
|
||||
|
||||
const wrapperAnimation = new Animation();
|
||||
wrapperAnimation.addElement(baseEl.querySelector('.picker-wrapper'));
|
||||
|
||||
backdropAnimation.fromTo('opacity', 0.26, 0.01);
|
||||
|
||||
wrapperAnimation.fromTo('translateY', '0%', '100%');
|
||||
|
||||
return Promise.resolve(baseAnimation
|
||||
.addElement(baseEl)
|
||||
.easing('cubic-bezier(.36,.66,.04,1)')
|
||||
.duration(400)
|
||||
.add(backdropAnimation)
|
||||
.add(wrapperAnimation));
|
||||
}
|
||||
142
core/src/components/picker/picker.ios.scss
Normal file
142
core/src/components/picker/picker.ios.scss
Normal file
@ -0,0 +1,142 @@
|
||||
@import "./picker";
|
||||
@import "./picker.ios.vars";
|
||||
|
||||
// iOS Picker
|
||||
// --------------------------------------------------
|
||||
|
||||
.picker-ios {
|
||||
font-family: $picker-ios-font-family;
|
||||
}
|
||||
|
||||
.picker-ios .picker-wrapper {
|
||||
height: $picker-ios-height;
|
||||
|
||||
border-top: 1px solid $picker-ios-border-color;
|
||||
|
||||
background: $picker-ios-background-color;
|
||||
}
|
||||
|
||||
.picker-ios .picker-toolbar {
|
||||
display: flex;
|
||||
|
||||
height: $picker-ios-toolbar-height;
|
||||
|
||||
border-bottom: $hairlines-width solid $picker-ios-border-color;
|
||||
|
||||
background: $picker-ios-toolbar-background-color;
|
||||
}
|
||||
|
||||
.picker-ios .picker-toolbar-button {
|
||||
@include text-align(end);
|
||||
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.picker-ios .picker-toolbar-button:last-child .picker-button {
|
||||
font-weight: $picker-ios-button-strong-font-weight;
|
||||
}
|
||||
|
||||
.picker-ios .picker-toolbar-button:first-child {
|
||||
@include text-align(start);
|
||||
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.picker-ios .picker-button,
|
||||
.picker-ios .picker-button.activated {
|
||||
@include margin(0);
|
||||
@include padding($picker-ios-button-padding-top, $picker-ios-button-padding-end, $picker-ios-button-padding-bottom, $picker-ios-button-padding-start);
|
||||
|
||||
height: $picker-ios-button-height;
|
||||
|
||||
font-size: $picker-ios-button-font-size;
|
||||
color: $picker-ios-button-text-color;
|
||||
background: $picker-ios-button-background-color;
|
||||
}
|
||||
|
||||
.picker-columns {
|
||||
height: $picker-ios-height - $picker-ios-toolbar-height - 1;
|
||||
|
||||
perspective: $picker-ios-column-perspective;
|
||||
}
|
||||
|
||||
.picker-ios .picker-col {
|
||||
@include padding($picker-ios-column-padding-top, $picker-ios-column-padding-end, $picker-ios-column-padding-bottom, $picker-ios-column-padding-start);
|
||||
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
.picker-ios .picker-prefix,
|
||||
.picker-ios .picker-suffix,
|
||||
.picker-ios .picker-opts {
|
||||
top: $picker-ios-option-offset-y;
|
||||
|
||||
font-size: $picker-ios-option-font-size;
|
||||
line-height: $picker-ios-option-height;
|
||||
color: $picker-ios-option-text-color;
|
||||
|
||||
transform-style: preserve-3d;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.picker-ios .picker-opt {
|
||||
@include padding(
|
||||
$picker-ios-option-padding-top,
|
||||
$picker-ios-option-padding-end,
|
||||
$picker-ios-option-padding-bottom,
|
||||
$picker-ios-option-padding-start);
|
||||
@include margin(0);
|
||||
@include transform-origin(center, center);
|
||||
|
||||
height: 46px;
|
||||
|
||||
font-size: $picker-ios-option-font-size;
|
||||
line-height: $picker-ios-option-height;
|
||||
color: $picker-ios-option-text-color;
|
||||
|
||||
background: transparent;
|
||||
transform-style: preserve-3d;
|
||||
transition-timing-function: ease-out;
|
||||
|
||||
backface-visibility: hidden;
|
||||
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.picker-ios .picker-above-highlight {
|
||||
@include position(0, null, null, 0);
|
||||
@include transform(translate3d(0, 0, 90px));
|
||||
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
display: block;
|
||||
|
||||
width: 100%;
|
||||
height: $picker-ios-option-offset-y + 4px;
|
||||
|
||||
border-bottom: 1px solid $picker-ios-border-color;
|
||||
|
||||
background: linear-gradient(to bottom,
|
||||
$picker-ios-top-background-color 20%,
|
||||
$picker-ios-bottom-background-color 100%);
|
||||
}
|
||||
|
||||
.picker-ios .picker-below-highlight {
|
||||
@include position($picker-ios-option-offset-y + $picker-ios-option-height - 4, null, null, 0);
|
||||
@include transform(translate3d(0, 0, 90px));
|
||||
|
||||
position: absolute;
|
||||
|
||||
z-index: 11;
|
||||
display: block;
|
||||
|
||||
width: 100%;
|
||||
height: $picker-ios-option-offset-y + $picker-ios-option-height;
|
||||
|
||||
border-top: 1px solid $picker-ios-border-color;
|
||||
|
||||
background: linear-gradient(to top,
|
||||
$picker-ios-top-background-color 30%,
|
||||
$picker-ios-bottom-background-color 100%);
|
||||
}
|
||||
94
core/src/components/picker/picker.ios.vars.scss
Normal file
94
core/src/components/picker/picker.ios.vars.scss
Normal file
@ -0,0 +1,94 @@
|
||||
@import "../../themes/ionic.globals.ios";
|
||||
|
||||
// iOS Picker
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Font family of the picker
|
||||
$picker-ios-font-family: $font-family-ios-base !default;
|
||||
|
||||
/// @prop - Height of the picker wrapper
|
||||
$picker-ios-height: 260px !default;
|
||||
|
||||
/// @prop - Border color of the picker wrapper
|
||||
$picker-ios-border-color: $item-ios-border-color !default;
|
||||
|
||||
/// @prop - Background Color of the picker wrapper
|
||||
$picker-ios-background-color: $background-ios-color !default;
|
||||
|
||||
/// @prop - Top Background Color of the picker wrapper gradient
|
||||
$picker-ios-top-background-color: $picker-ios-background-color !default;
|
||||
|
||||
/// @prop - Bottom Background Color of the picker wrapper gradient
|
||||
$picker-ios-bottom-background-color: ion-color-alpha($background-ios-color-value, background-ios-color, $alpha-ios-high) !default;
|
||||
|
||||
/// @prop - Height of the picker toolbar
|
||||
$picker-ios-toolbar-height: 44px !default;
|
||||
|
||||
/// @prop - Background color of the picker toolbar
|
||||
$picker-ios-toolbar-background-color: $picker-ios-top-background-color !default;
|
||||
|
||||
/// @prop - Height of the picker button
|
||||
$picker-ios-button-height: $picker-ios-toolbar-height !default;
|
||||
|
||||
/// @prop - Text color of the picker button
|
||||
$picker-ios-button-text-color: ion-color($colors-ios, primary, base, ios) !default;
|
||||
|
||||
/// @prop - Background of the picker button
|
||||
$picker-ios-button-background-color: transparent !default;
|
||||
|
||||
/// @prop - Font size of the picker button
|
||||
$picker-ios-button-font-size: 16px !default;
|
||||
|
||||
/// @prop - Padding top of the picker button
|
||||
$picker-ios-button-padding-top: 0 !default;
|
||||
|
||||
/// @prop - Padding end of the picker button
|
||||
$picker-ios-button-padding-end: 1em !default;
|
||||
|
||||
/// @prop - Padding bottom of the picker button
|
||||
$picker-ios-button-padding-bottom: $picker-ios-button-padding-top !default;
|
||||
|
||||
/// @prop - Padding start of the picker button
|
||||
$picker-ios-button-padding-start: $picker-ios-button-padding-end !default;
|
||||
|
||||
/// @prop - Font weight of the strong picker button
|
||||
$picker-ios-button-strong-font-weight: 600 !default;
|
||||
|
||||
/// @prop - Padding top of the picker column
|
||||
$picker-ios-column-padding-top: 0 !default;
|
||||
|
||||
/// @prop - Padding end of the picker column
|
||||
$picker-ios-column-padding-end: 4px !default;
|
||||
|
||||
/// @prop - Padding bottom of the picker column
|
||||
$picker-ios-column-padding-bottom: $picker-ios-column-padding-top !default;
|
||||
|
||||
/// @prop - Padding start of the picker column
|
||||
$picker-ios-column-padding-start: $picker-ios-column-padding-end !default;
|
||||
|
||||
/// @prop - Perspective of the picker column
|
||||
$picker-ios-column-perspective: 1000px !default;
|
||||
|
||||
/// @prop - Padding top of the picker option
|
||||
$picker-ios-option-padding-top: 0 !default;
|
||||
|
||||
/// @prop - Padding end of the picker option
|
||||
$picker-ios-option-padding-end: $picker-ios-option-padding-top !default;
|
||||
|
||||
/// @prop - Padding bottom of the picker option
|
||||
$picker-ios-option-padding-bottom: $picker-ios-option-padding-top !default;
|
||||
|
||||
/// @prop - Padding start of the picker option
|
||||
$picker-ios-option-padding-start: $picker-ios-option-padding-end !default;
|
||||
|
||||
/// @prop - Text color of the picker option
|
||||
$picker-ios-option-text-color: $item-ios-text-color !default;
|
||||
|
||||
/// @prop - Font size of the picker option
|
||||
$picker-ios-option-font-size: 20px !default;
|
||||
|
||||
/// @prop - Height of the picker option
|
||||
$picker-ios-option-height: 42px !default;
|
||||
|
||||
/// @prop - Offset y of the picker option
|
||||
$picker-ios-option-offset-y: (($picker-ios-height - $picker-ios-toolbar-height) / 2) - ($picker-ios-option-height / 2) - 10 !default;
|
||||
129
core/src/components/picker/picker.md.scss
Normal file
129
core/src/components/picker/picker.md.scss
Normal file
@ -0,0 +1,129 @@
|
||||
@import "./picker";
|
||||
@import "./picker.md.vars";
|
||||
|
||||
// Material Design Picker
|
||||
// --------------------------------------------------
|
||||
|
||||
.picker-md {
|
||||
font-family: $picker-md-font-family;
|
||||
}
|
||||
|
||||
.picker-md .picker-wrapper {
|
||||
height: $picker-md-height;
|
||||
|
||||
border-top: $hairlines-width solid $picker-md-border-color;
|
||||
|
||||
background: $picker-md-background-color;
|
||||
}
|
||||
|
||||
.picker-md .picker-toolbar {
|
||||
display: flex;
|
||||
|
||||
justify-content: flex-end;
|
||||
|
||||
height: $picker-md-toolbar-height;
|
||||
|
||||
background: $picker-md-toolbar-background-color;
|
||||
}
|
||||
|
||||
.picker-md .picker-button,
|
||||
.picker-md .picker-button.activated {
|
||||
@include margin(0);
|
||||
@include padding(0, 1.1em);
|
||||
|
||||
height: $picker-md-button-height;
|
||||
|
||||
font-size: $picker-md-button-font-size;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
color: $picker-md-button-text-color;
|
||||
background: $picker-md-button-background-color;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.picker-md .picker-columns {
|
||||
height: $picker-md-height - $picker-md-toolbar-height;
|
||||
|
||||
perspective: 1800px;
|
||||
}
|
||||
|
||||
.picker-md .picker-col {
|
||||
@include padding($picker-md-column-padding-top, $picker-md-column-padding-end, $picker-md-column-padding-bottom, $picker-md-column-padding-start);
|
||||
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
.picker-md .picker-prefix,
|
||||
.picker-md .picker-suffix,
|
||||
.picker-md .picker-opts {
|
||||
top: $picker-md-option-offset-y;
|
||||
|
||||
font-size: $picker-md-option-font-size;
|
||||
line-height: $picker-md-option-height;
|
||||
color: $picker-md-option-text-color;
|
||||
|
||||
transform-style: preserve-3d;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
.picker-md .picker-opt {
|
||||
@include margin(0);
|
||||
@include padding($picker-md-option-padding-top, $picker-md-option-padding-end, $picker-md-option-padding-bottom, $picker-md-option-padding-start);
|
||||
|
||||
height: 43px;
|
||||
|
||||
font-size: $picker-md-option-font-size;
|
||||
line-height: $picker-md-option-height;
|
||||
color: $picker-md-option-text-color;
|
||||
|
||||
background: transparent;
|
||||
|
||||
transition-timing-function: ease-out;
|
||||
|
||||
backface-visibility: hidden;
|
||||
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.picker-md .picker-prefix,
|
||||
.picker-md .picker-suffix,
|
||||
.picker-md .picker-opt.picker-opt-selected {
|
||||
|
||||
color: $picker-md-option-selected-color;
|
||||
}
|
||||
|
||||
.picker-md .picker-above-highlight {
|
||||
@include position(0, null, null, 0);
|
||||
@include transform(translate3d(0, 0, 90px));
|
||||
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
|
||||
width: 100%;
|
||||
height: $picker-md-option-offset-y + 4px;
|
||||
|
||||
border-bottom: 1px solid $picker-md-border-color;
|
||||
|
||||
background: linear-gradient(to bottom,
|
||||
$picker-md-top-background-color 20%,
|
||||
$picker-md-bottom-background-color 100%);
|
||||
}
|
||||
|
||||
.picker-md .picker-below-highlight {
|
||||
@include position($picker-md-option-offset-y + $picker-md-option-height - 4, null, null, 0);
|
||||
@include transform(translate3d(0, 0, 90px));
|
||||
|
||||
position: absolute;
|
||||
z-index: 11;
|
||||
|
||||
width: 100%;
|
||||
height: $picker-md-option-offset-y + $picker-md-option-height;
|
||||
|
||||
border-top: 1px solid $picker-md-border-color;
|
||||
|
||||
background: linear-gradient(to top,
|
||||
$picker-md-top-background-color 30%,
|
||||
$picker-md-bottom-background-color 100%);
|
||||
}
|
||||
79
core/src/components/picker/picker.md.vars.scss
Normal file
79
core/src/components/picker/picker.md.vars.scss
Normal file
@ -0,0 +1,79 @@
|
||||
@import "../../themes/ionic.globals.md";
|
||||
|
||||
// Material Design Picker
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Font family of the picker
|
||||
$picker-md-font-family: $font-family-md-base !default;
|
||||
|
||||
/// @prop - Height of the picker wrapper
|
||||
$picker-md-height: 260px !default;
|
||||
|
||||
/// @prop - Border color of the picker wrapper
|
||||
$picker-md-border-color: $item-md-border-color !default;
|
||||
|
||||
/// @prop - Background Color of the picker wrapper
|
||||
$picker-md-background-color: $background-md-color !default;
|
||||
|
||||
/// @prop - Top Background Color of the picker wrapper gradient
|
||||
$picker-md-top-background-color: $picker-md-background-color !default;
|
||||
|
||||
/// @prop - Bottom Background Color of the picker wrapper gradient
|
||||
$picker-md-bottom-background-color: ion-color-alpha($background-md-color-value, background-md-color, $alpha-md-high) !default;
|
||||
|
||||
/// @prop - Height of the picker toolbar
|
||||
$picker-md-toolbar-height: 44px !default;
|
||||
|
||||
/// @prop - Background of the picker toolbar
|
||||
$picker-md-toolbar-background-color: $picker-md-top-background-color !default;
|
||||
|
||||
/// @prop - Height of the picker button
|
||||
$picker-md-button-height: $picker-md-toolbar-height !default;
|
||||
|
||||
/// @prop - Text color of the picker button
|
||||
$picker-md-button-text-color: ion-color($colors-md, primary, base, md) !default;
|
||||
|
||||
/// @prop - Background of the picker button
|
||||
$picker-md-button-background-color: transparent !default;
|
||||
|
||||
/// @prop - Font size of the picker button
|
||||
$picker-md-button-font-size: 14px !default;
|
||||
|
||||
/// @prop - Padding top of the picker column
|
||||
$picker-md-column-padding-top: 0 !default;
|
||||
|
||||
/// @prop - Padding end of the picker column
|
||||
$picker-md-column-padding-end: 8px !default;
|
||||
|
||||
/// @prop - Padding bottom of the picker column
|
||||
$picker-md-column-padding-bottom: $picker-md-column-padding-top !default;
|
||||
|
||||
/// @prop - Padding start of the picker column
|
||||
$picker-md-column-padding-start: $picker-md-column-padding-end !default;
|
||||
|
||||
/// @prop - Padding top of the picker option
|
||||
$picker-md-option-padding-top: 0 !default;
|
||||
|
||||
/// @prop - Padding end of the picker option
|
||||
$picker-md-option-padding-end: $picker-md-option-padding-top !default;
|
||||
|
||||
/// @prop - Padding bottom of the picker option
|
||||
$picker-md-option-padding-bottom: $picker-md-option-padding-top !default;
|
||||
|
||||
/// @prop - Padding start of the picker option
|
||||
$picker-md-option-padding-start: $picker-md-option-padding-end !default;
|
||||
|
||||
/// @prop - Text color of the picker option
|
||||
$picker-md-option-text-color: $item-md-text-color !default;
|
||||
|
||||
/// @prop - Font size of the picker option
|
||||
$picker-md-option-font-size: 22px !default;
|
||||
|
||||
/// @prop - Height of the picker option
|
||||
$picker-md-option-height: 42px !default;
|
||||
|
||||
/// @prop - Offset y of the picker option
|
||||
$picker-md-option-offset-y: (($picker-md-height - $picker-md-toolbar-height) / 2) - ($picker-md-option-height / 2) - 10 !default;
|
||||
|
||||
/// @prop - Text color of the selected picker option
|
||||
$picker-md-option-selected-color: ion-color($colors-md, primary, base, md) !default;
|
||||
182
core/src/components/picker/picker.scss
Normal file
182
core/src/components/picker/picker.scss
Normal file
@ -0,0 +1,182 @@
|
||||
@import "./picker.vars";
|
||||
|
||||
// Picker
|
||||
// --------------------------------------------------
|
||||
|
||||
ion-picker {
|
||||
@include position(0, null, null, 0);
|
||||
|
||||
position: absolute;
|
||||
z-index: $z-index-overlay;
|
||||
display: block;
|
||||
|
||||
width: $picker-width;
|
||||
height: $picker-width;
|
||||
|
||||
contain: strict;
|
||||
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.picker-toolbar {
|
||||
z-index: 1;
|
||||
|
||||
width: 100%;
|
||||
|
||||
contain: strict;
|
||||
}
|
||||
|
||||
.picker-wrapper {
|
||||
@include position(null, 0, 0, 0);
|
||||
@include margin(auto);
|
||||
@include transform(translate3d(0, 100%, 0));
|
||||
|
||||
position: absolute;
|
||||
z-index: $z-index-overlay-wrapper;
|
||||
display: flex;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
flex-direction: column;
|
||||
|
||||
width: $picker-width;
|
||||
max-width: $picker-max-width;
|
||||
|
||||
contain: strict;
|
||||
}
|
||||
|
||||
.picker-columns {
|
||||
@include margin(null, null, constant(safe-area-inset-bottom), null);
|
||||
@include margin(null, null, env(safe-area-inset-bottom), null);
|
||||
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
justify-content: center;
|
||||
|
||||
contain: strict;
|
||||
|
||||
@include rtl() {
|
||||
// Date is the same format in both directions
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
}
|
||||
|
||||
.picker-col {
|
||||
box-sizing: content-box;
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
|
||||
height: 100%;
|
||||
|
||||
contain: content;
|
||||
}
|
||||
|
||||
.picker-opts {
|
||||
position: relative;
|
||||
|
||||
flex: 1;
|
||||
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.picker-prefix {
|
||||
@include text-align(end);
|
||||
|
||||
position: relative;
|
||||
|
||||
flex: 2;
|
||||
|
||||
min-width: 45%;
|
||||
max-width: 50%;
|
||||
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.picker-suffix {
|
||||
@include text-align(start);
|
||||
|
||||
position: relative;
|
||||
|
||||
flex: 2;
|
||||
|
||||
min-width: 45%;
|
||||
max-width: 50%;
|
||||
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// contain property is supported by Chrome
|
||||
.picker-opt {
|
||||
@include position(0, null, null, 0);
|
||||
@include text-align(center);
|
||||
|
||||
position: absolute;
|
||||
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
|
||||
width: 100%;
|
||||
|
||||
border: 0;
|
||||
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
will-change: transform;
|
||||
contain: strict;
|
||||
}
|
||||
|
||||
.picker-opt.picker-opt-disabled {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.picker-opt-disabled {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.picker-opts-left {
|
||||
@include ltr() {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
@include rtl() {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.picker-opts-right {
|
||||
@include ltr() {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
@include rtl() {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
.picker-above-highlight,
|
||||
.picker-below-highlight {
|
||||
display: none;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.picker-button {
|
||||
border: 0;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.picker-opt,
|
||||
.picker-button {
|
||||
&:active,
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
373
core/src/components/picker/picker.tsx
Normal file
373
core/src/components/picker/picker.tsx
Normal file
@ -0,0 +1,373 @@
|
||||
import { Component, Element, Event, EventEmitter, Listen, Method, Prop, State } from '@stencil/core';
|
||||
import { Animation, AnimationBuilder, Config, CssClassMap, OverlayDismissEvent, OverlayDismissEventDetail } from '../../index';
|
||||
|
||||
import { getClassMap } from '../../utils/theme';
|
||||
import { OverlayInterface, dismiss, present } from '../../utils/overlays';
|
||||
|
||||
import iosEnterAnimation from './animations/ios.enter';
|
||||
import iosLeaveAnimation from './animations/ios.leave';
|
||||
|
||||
@Component({
|
||||
tag: 'ion-picker',
|
||||
styleUrls: {
|
||||
ios: 'picker.ios.scss',
|
||||
md: 'picker.md.scss'
|
||||
},
|
||||
host: {
|
||||
theme: 'picker'
|
||||
}
|
||||
})
|
||||
export class Picker implements OverlayInterface {
|
||||
|
||||
private durationTimeout: any;
|
||||
|
||||
mode: string;
|
||||
presented = false;
|
||||
animation: Animation;
|
||||
|
||||
@Element() el: HTMLElement;
|
||||
|
||||
@State() private showSpinner: boolean|undefined;
|
||||
@State() private spinner: string;
|
||||
|
||||
@Prop({ connect: 'ion-animation-controller' }) animationCtrl: HTMLIonAnimationControllerElement;
|
||||
@Prop({ context: 'config' }) config: Config;
|
||||
@Prop() overlayId: number;
|
||||
|
||||
/**
|
||||
* Animation to use when the picker is presented.
|
||||
*/
|
||||
@Prop() enterAnimation: AnimationBuilder;
|
||||
|
||||
/**
|
||||
* Animation to use when the picker is dismissed.
|
||||
*/
|
||||
@Prop() leaveAnimation: AnimationBuilder;
|
||||
|
||||
/**
|
||||
* Array of buttons to be displayed at the top of the picker.
|
||||
*/
|
||||
@Prop() buttons: PickerButton[] = [];
|
||||
|
||||
/**
|
||||
* Array of columns to be displayed in the picker.
|
||||
*/
|
||||
@Prop() columns: PickerColumn[] = [];
|
||||
|
||||
/**
|
||||
* Additional classes to apply for custom CSS. If multiple classes are
|
||||
* provided they should be separated by spaces.
|
||||
*/
|
||||
@Prop() cssClass: string;
|
||||
|
||||
/**
|
||||
* Number of milliseconds to wait before dismissing the picker.
|
||||
*/
|
||||
@Prop() duration: number;
|
||||
|
||||
/**
|
||||
* If true, a backdrop will be displayed behind the picker. Defaults to `true`.
|
||||
*/
|
||||
@Prop() showBackdrop = true;
|
||||
|
||||
/**
|
||||
* If true, the picker will be dismissed when the backdrop is clicked. Defaults to `true`.
|
||||
*/
|
||||
@Prop() enableBackdropDismiss = true;
|
||||
|
||||
/**
|
||||
* If true, the picker will animate. Defaults to `true`.
|
||||
*/
|
||||
@Prop() willAnimate = true;
|
||||
|
||||
/**
|
||||
* Emitted after the picker has loaded.
|
||||
*/
|
||||
@Event() ionPickerDidLoad: EventEmitter<PickerEventDetail>;
|
||||
|
||||
/**
|
||||
* Emitted after the picker has presented.
|
||||
*/
|
||||
@Event({eventName: 'ionPickerDidPresent'}) didPresent: EventEmitter<PickerEventDetail>;
|
||||
|
||||
/**
|
||||
* Emitted before the picker has presented.
|
||||
*/
|
||||
@Event({eventName: 'ionPickerWillPresent'}) willPresent: EventEmitter<PickerEventDetail>;
|
||||
|
||||
/**
|
||||
* Emitted before the picker has dismissed.
|
||||
*/
|
||||
@Event({eventName: 'ionPickerWillDismiss'}) willDismiss: EventEmitter<PickerDismissEventDetail>;
|
||||
|
||||
/**
|
||||
* Emitted after the picker has dismissed.
|
||||
*/
|
||||
@Event({eventName: 'ionPickerDidDismiss'}) didDismiss: EventEmitter<PickerDismissEventDetail>;
|
||||
|
||||
/**
|
||||
* Emitted after the picker has unloaded.
|
||||
*/
|
||||
@Event() ionPickerDidUnload: EventEmitter<PickerEventDetail>;
|
||||
|
||||
|
||||
componentWillLoad() {
|
||||
if (!this.spinner) {
|
||||
const defaultSpinner = (this.mode === 'ios') ? 'lines' : 'crescent';
|
||||
this.spinner = this.config.get('pickerSpinner', defaultSpinner);
|
||||
}
|
||||
if (this.showSpinner === undefined) {
|
||||
this.showSpinner = !!(this.spinner && this.spinner !== 'hide');
|
||||
}
|
||||
}
|
||||
|
||||
componentDidLoad() {
|
||||
this.ionPickerDidLoad.emit();
|
||||
}
|
||||
|
||||
componentDidUnload() {
|
||||
this.ionPickerDidUnload.emit();
|
||||
}
|
||||
|
||||
@Listen('ionBackdropTap')
|
||||
protected onBackdropTap() {
|
||||
const cancelBtn = this.buttons.find(b => b.role === 'cancel');
|
||||
if (cancelBtn) {
|
||||
this.buttonClick(cancelBtn);
|
||||
} else {
|
||||
this.dismiss();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Present the picker overlay after it has been created.
|
||||
*/
|
||||
@Method()
|
||||
present(): Promise<void> {
|
||||
return present(this, 'pickerEnter', iosEnterAnimation, iosEnterAnimation, undefined).then(() => {
|
||||
// blur the currently active element
|
||||
const activeElement: any = document.activeElement;
|
||||
activeElement && activeElement.blur && activeElement.blur();
|
||||
|
||||
// If there is a duration, dismiss after that amount of time
|
||||
if (this.duration > 10) {
|
||||
this.durationTimeout = setTimeout(() => this.dismiss(), this.duration);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Dismiss the picker overlay after it has been presented.
|
||||
*/
|
||||
@Method()
|
||||
dismiss(data?: any, role?: string): Promise<void> {
|
||||
if (this.durationTimeout) {
|
||||
clearTimeout(this.durationTimeout);
|
||||
}
|
||||
return dismiss(this, data, role, 'pickerLeave', iosLeaveAnimation, iosLeaveAnimation, undefined);
|
||||
}
|
||||
|
||||
@Method()
|
||||
addButton(button: any) {
|
||||
this.buttons.push(button);
|
||||
}
|
||||
|
||||
@Method()
|
||||
addColumn(column: PickerColumn) {
|
||||
this.columns.push(column);
|
||||
}
|
||||
|
||||
@Method()
|
||||
getColumn(name: string): PickerColumn {
|
||||
return this.getColumns().find(column => column.name === name);
|
||||
}
|
||||
|
||||
@Method()
|
||||
getColumns(): PickerColumn[] {
|
||||
return this.columns;
|
||||
}
|
||||
|
||||
private buttonClick(button: PickerButton) {
|
||||
// if (this.disabled) {
|
||||
// return;
|
||||
// }
|
||||
|
||||
// keep the time of the most recent button click
|
||||
let shouldDismiss = true;
|
||||
|
||||
if (button.handler) {
|
||||
// a handler has been provided, execute it
|
||||
// pass the handler the values from the inputs
|
||||
if (button.handler(this.getSelected()) === false) {
|
||||
// if the return value of the handler is false then do not dismiss
|
||||
shouldDismiss = false;
|
||||
}
|
||||
}
|
||||
|
||||
if (shouldDismiss) {
|
||||
this.dismiss();
|
||||
}
|
||||
}
|
||||
|
||||
private getSelected(): any {
|
||||
const selected: {[k: string]: any} = {};
|
||||
this.columns.forEach((col, index) => {
|
||||
const selectedColumn = col.options[col.selectedIndex];
|
||||
selected[col.name] = {
|
||||
text: selectedColumn ? selectedColumn.text : null,
|
||||
value: selectedColumn ? selectedColumn.value : null,
|
||||
columnIndex: index,
|
||||
};
|
||||
});
|
||||
return selected;
|
||||
}
|
||||
|
||||
hostData() {
|
||||
return {
|
||||
style: {
|
||||
zIndex: 20000 + this.overlayId,
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
// TODO: cssClass
|
||||
|
||||
const buttons = this.buttons.map(b => {
|
||||
if (typeof b === 'string') {
|
||||
b = { text: b };
|
||||
}
|
||||
if (!b.cssClass) {
|
||||
b.cssClass = '';
|
||||
}
|
||||
return b;
|
||||
})
|
||||
.filter(b => b !== null);
|
||||
|
||||
const columns = this.columns;
|
||||
|
||||
// // clean up dat data
|
||||
// data.columns = data.columns.map(column => {
|
||||
// if (!isPresent(column.options)) {
|
||||
// column.options = [];
|
||||
// }
|
||||
// column.selectedIndex = column.selectedIndex || 0;
|
||||
// column.options = column.options.map(inputOpt => {
|
||||
// let opt: PickerColumnOption = {
|
||||
// text: '',
|
||||
// value: '',
|
||||
// disabled: inputOpt.disabled,
|
||||
// };
|
||||
|
||||
// if (isPresent(inputOpt)) {
|
||||
// if (isString(inputOpt) || isNumber(inputOpt)) {
|
||||
// opt.text = inputOpt.toString();
|
||||
// opt.value = inputOpt;
|
||||
|
||||
// } else {
|
||||
// opt.text = isPresent(inputOpt.text) ? inputOpt.text : inputOpt.value;
|
||||
// opt.value = isPresent(inputOpt.value) ? inputOpt.value : inputOpt.text;
|
||||
// }
|
||||
// }
|
||||
|
||||
// return opt;
|
||||
// });
|
||||
// return column;
|
||||
// });
|
||||
|
||||
return [
|
||||
<ion-backdrop visible={this.showBackdrop} tappable={this.enableBackdropDismiss}/>,
|
||||
<div class='picker-wrapper' role='dialog'>
|
||||
<div class='picker-toolbar'>
|
||||
{buttons.map(b =>
|
||||
<div class={buttonWrapperClass(b)}>
|
||||
<button onClick={() => this.buttonClick(b)} class={buttonClass(b)}>
|
||||
{b.text}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div class='picker-columns'>
|
||||
<div class='picker-above-highlight'></div>
|
||||
{columns.map(c =>
|
||||
<ion-picker-column col={c}></ion-picker-column>
|
||||
)}
|
||||
<div class='picker-below-highlight'></div>
|
||||
</div>
|
||||
</div>
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
function buttonWrapperClass(button: PickerButton): CssClassMap {
|
||||
const buttonClass: CssClassMap = {
|
||||
'picker-toolbar-button': true,
|
||||
};
|
||||
if (button.role) {
|
||||
buttonClass[`picker-toolbar-${button.role}`] = true;
|
||||
}
|
||||
return buttonClass;
|
||||
}
|
||||
|
||||
function buttonClass(button: PickerButton): CssClassMap {
|
||||
return {
|
||||
'picker-button': true,
|
||||
...getClassMap(button.cssClass)
|
||||
};
|
||||
}
|
||||
|
||||
export interface PickerButton {
|
||||
text?: string;
|
||||
role?: string;
|
||||
cssClass?: string;
|
||||
handler?: (value: any) => boolean|void;
|
||||
}
|
||||
|
||||
export interface PickerOptions {
|
||||
buttons?: PickerButton[];
|
||||
columns?: PickerColumn[];
|
||||
cssClass?: string;
|
||||
enableBackdropDismiss?: boolean;
|
||||
}
|
||||
|
||||
export interface PickerColumn {
|
||||
name?: string;
|
||||
align?: string;
|
||||
selectedIndex?: number;
|
||||
prevSelected?: number;
|
||||
prefix?: string;
|
||||
suffix?: string;
|
||||
options?: PickerColumnOption[];
|
||||
cssClass?: string;
|
||||
columnWidth?: string;
|
||||
prefixWidth?: string;
|
||||
suffixWidth?: string;
|
||||
optionsWidth?: string;
|
||||
refresh?: () => void;
|
||||
}
|
||||
|
||||
export interface PickerColumnOption {
|
||||
text?: string;
|
||||
value?: any;
|
||||
disabled?: boolean;
|
||||
duration?: number;
|
||||
transform?: string;
|
||||
selected?: boolean;
|
||||
}
|
||||
|
||||
export interface PickerEvent extends CustomEvent {
|
||||
target: HTMLIonPickerElement;
|
||||
detail: PickerEventDetail;
|
||||
}
|
||||
|
||||
export interface PickerEventDetail {
|
||||
|
||||
}
|
||||
|
||||
export interface PickerDismissEventDetail extends OverlayDismissEventDetail {
|
||||
// keep this just for the sake of static types and potential future extensions
|
||||
}
|
||||
|
||||
export interface PickerDismissEvent extends OverlayDismissEvent {
|
||||
// keep this just for the sake of static types and potential future extensions
|
||||
}
|
||||
10
core/src/components/picker/picker.vars.scss
Normal file
10
core/src/components/picker/picker.vars.scss
Normal file
@ -0,0 +1,10 @@
|
||||
@import "../../themes/ionic.globals";
|
||||
|
||||
// Picker
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Width of the picker
|
||||
$picker-width: 100% !default;
|
||||
|
||||
/// @prop - Max width of the picker
|
||||
$picker-max-width: 500px !default;
|
||||
211
core/src/components/picker/readme.md
Normal file
211
core/src/components/picker/readme.md
Normal file
@ -0,0 +1,211 @@
|
||||
# ion-picker
|
||||
|
||||
A Picker is a dialog that displays a row of buttons and columns underneath. It appears on top of the app's content, and at the bottom of the viewport.
|
||||
|
||||
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
|
||||
## Properties
|
||||
|
||||
#### buttons
|
||||
|
||||
|
||||
|
||||
Array of buttons to be displayed at the top of the picker.
|
||||
|
||||
|
||||
#### columns
|
||||
|
||||
|
||||
|
||||
Array of columns to be displayed in the picker.
|
||||
|
||||
|
||||
#### cssClass
|
||||
|
||||
string
|
||||
|
||||
Additional classes to apply for custom CSS. If multiple classes are
|
||||
provided they should be separated by spaces.
|
||||
|
||||
|
||||
#### duration
|
||||
|
||||
number
|
||||
|
||||
Number of milliseconds to wait before dismissing the picker.
|
||||
|
||||
|
||||
#### enableBackdropDismiss
|
||||
|
||||
boolean
|
||||
|
||||
If true, the picker will be dismissed when the backdrop is clicked. Defaults to `true`.
|
||||
|
||||
|
||||
#### enterAnimation
|
||||
|
||||
|
||||
|
||||
Animation to use when the picker is presented.
|
||||
|
||||
|
||||
#### leaveAnimation
|
||||
|
||||
|
||||
|
||||
Animation to use when the picker is dismissed.
|
||||
|
||||
|
||||
#### overlayId
|
||||
|
||||
number
|
||||
|
||||
|
||||
#### showBackdrop
|
||||
|
||||
boolean
|
||||
|
||||
If true, a backdrop will be displayed behind the picker. Defaults to `true`.
|
||||
|
||||
|
||||
#### willAnimate
|
||||
|
||||
boolean
|
||||
|
||||
If true, the picker will animate. Defaults to `true`.
|
||||
|
||||
|
||||
## Attributes
|
||||
|
||||
#### buttons
|
||||
|
||||
|
||||
|
||||
Array of buttons to be displayed at the top of the picker.
|
||||
|
||||
|
||||
#### columns
|
||||
|
||||
|
||||
|
||||
Array of columns to be displayed in the picker.
|
||||
|
||||
|
||||
#### css-class
|
||||
|
||||
string
|
||||
|
||||
Additional classes to apply for custom CSS. If multiple classes are
|
||||
provided they should be separated by spaces.
|
||||
|
||||
|
||||
#### duration
|
||||
|
||||
number
|
||||
|
||||
Number of milliseconds to wait before dismissing the picker.
|
||||
|
||||
|
||||
#### enable-backdrop-dismiss
|
||||
|
||||
boolean
|
||||
|
||||
If true, the picker will be dismissed when the backdrop is clicked. Defaults to `true`.
|
||||
|
||||
|
||||
#### enter-animation
|
||||
|
||||
|
||||
|
||||
Animation to use when the picker is presented.
|
||||
|
||||
|
||||
#### leave-animation
|
||||
|
||||
|
||||
|
||||
Animation to use when the picker is dismissed.
|
||||
|
||||
|
||||
#### overlay-id
|
||||
|
||||
number
|
||||
|
||||
|
||||
#### show-backdrop
|
||||
|
||||
boolean
|
||||
|
||||
If true, a backdrop will be displayed behind the picker. Defaults to `true`.
|
||||
|
||||
|
||||
#### will-animate
|
||||
|
||||
boolean
|
||||
|
||||
If true, the picker will animate. Defaults to `true`.
|
||||
|
||||
|
||||
## Events
|
||||
|
||||
#### ionPickerDidDismiss
|
||||
|
||||
Emitted after the picker has dismissed.
|
||||
|
||||
|
||||
#### ionPickerDidLoad
|
||||
|
||||
Emitted after the picker has loaded.
|
||||
|
||||
|
||||
#### ionPickerDidPresent
|
||||
|
||||
Emitted after the picker has presented.
|
||||
|
||||
|
||||
#### ionPickerDidUnload
|
||||
|
||||
Emitted after the picker has unloaded.
|
||||
|
||||
|
||||
#### ionPickerWillDismiss
|
||||
|
||||
Emitted before the picker has dismissed.
|
||||
|
||||
|
||||
#### ionPickerWillPresent
|
||||
|
||||
Emitted before the picker has presented.
|
||||
|
||||
|
||||
## Methods
|
||||
|
||||
#### addButton()
|
||||
|
||||
|
||||
#### addColumn()
|
||||
|
||||
|
||||
#### dismiss()
|
||||
|
||||
Dismiss the picker overlay after it has been presented.
|
||||
|
||||
|
||||
#### getColumn()
|
||||
|
||||
|
||||
#### getColumns()
|
||||
|
||||
|
||||
#### present()
|
||||
|
||||
Present the picker overlay after it has been created.
|
||||
|
||||
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
*Built with [StencilJS](https://stenciljs.com/)*
|
||||
Reference in New Issue
Block a user