mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-15 09:34:19 +08:00

Issue number: resolves #27470 --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> Passing multiple elements in to an inline modal causes `.ion-page` to not get set. This causes content to get pushed off the bottom of the modal equal to the height of the header. React has some special CSS that prevents this:eb2772c0ce/packages/react/src/components/createInlineOverlayComponent.tsx (L137-L140)
However, I think this should be delegated to `.ion-page` instead so the behavior is consistent across frameworks. For example, Angular uses `.ion-page`:eb2772c0ce/angular/src/directives/overlays/modal.ts (L82)
## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Inline overlays in Ionic React and Ionic Vue wrap child content in `.ion-delegate-host.ion-page`. - Removed the custom flex styles from Ionic React as `.ion-page` has its own styles. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> Revised Design Doc: https://github.com/ionic-team/ionic-framework-design-documents/pull/84
86 lines
2.0 KiB
JavaScript
86 lines
2.0 KiB
JavaScript
const DocsJson = require('@ionic/core/dist/docs.json');
|
|
const fs = require('fs');
|
|
|
|
function generateOverlays() {
|
|
const components = [
|
|
{
|
|
tag: 'ion-action-sheet',
|
|
name: 'IonActionSheet'
|
|
},
|
|
{
|
|
tag: 'ion-alert',
|
|
name: 'IonAlert'
|
|
},
|
|
{
|
|
tag: 'ion-loading',
|
|
name: 'IonLoading'
|
|
},
|
|
{
|
|
tag: 'ion-picker',
|
|
name: 'IonPicker'
|
|
},
|
|
{
|
|
tag: 'ion-toast',
|
|
name: 'IonToast'
|
|
},
|
|
{
|
|
tag: 'ion-modal',
|
|
name: 'IonModal',
|
|
hasDelegateHost: true
|
|
},
|
|
{
|
|
tag: 'ion-popover',
|
|
name: 'IonPopover'
|
|
}
|
|
]
|
|
|
|
let componentImports = [];
|
|
let componentDefinitions = [];
|
|
|
|
components.forEach(component => {
|
|
const docsBlock = getDocsBlock(component.tag);
|
|
const props = getPropsFromDocsBlock(docsBlock);
|
|
|
|
const defineCustomElementFn = `define${component.name}CustomElement`;
|
|
|
|
componentImports.push(`import { defineCustomElement as ${defineCustomElementFn} } from '@ionic/core/components/${component.tag}.js'`);
|
|
|
|
const delegateHostString = component.hasDelegateHost ? ', true' : '';
|
|
|
|
componentDefinitions.push(`
|
|
export const ${component.name} = /*@__PURE__*/ defineOverlayContainer<JSX.${component.name}>('${component.tag}', ${defineCustomElementFn}, [${props.join(', ')}]${delegateHostString});
|
|
`);
|
|
});
|
|
|
|
const template = `/**
|
|
* This is an autogenerated file created by 'scripts/copy-overlays.js'.
|
|
* Changes made to this file will be overwritten on build.
|
|
*/
|
|
|
|
import {
|
|
JSX,
|
|
} from '@ionic/core/components';
|
|
|
|
${componentImports.join('\n')}
|
|
|
|
import { defineOverlayContainer } from '../vue-component-lib/overlays';
|
|
${componentDefinitions.join('')}
|
|
`;
|
|
|
|
fs.writeFileSync('./src/components/Overlays.ts', template);
|
|
}
|
|
|
|
function getDocsBlock(tag) {
|
|
return DocsJson.components.find(block => block.tag === tag);
|
|
}
|
|
|
|
function getPropsFromDocsBlock(docsBlock) {
|
|
return docsBlock.props.map(prop => `'${prop.name}'`);
|
|
}
|
|
|
|
function main() {
|
|
generateOverlays();
|
|
}
|
|
|
|
main();
|