diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-03-18 23:02:30 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-03-18 23:02:30 +0300 |
commit | 41fe97390ceddf945f3d967b8fdb3de4c66b7dea (patch) | |
tree | 9c8d89a8624828992f06d892cd2f43818ff5dcc8 /app/assets/javascripts/loading_icon_for_legacy_js.js | |
parent | 0804d2dc31052fb45a1efecedc8e06ce9bc32862 (diff) |
Add latest changes from gitlab-org/gitlab@14-9-stable-eev14.9.0-rc42
Diffstat (limited to 'app/assets/javascripts/loading_icon_for_legacy_js.js')
-rw-r--r-- | app/assets/javascripts/loading_icon_for_legacy_js.js | 53 |
1 files changed, 53 insertions, 0 deletions
diff --git a/app/assets/javascripts/loading_icon_for_legacy_js.js b/app/assets/javascripts/loading_icon_for_legacy_js.js new file mode 100644 index 00000000000..d50a4275424 --- /dev/null +++ b/app/assets/javascripts/loading_icon_for_legacy_js.js @@ -0,0 +1,53 @@ +import Vue from 'vue'; +import { GlLoadingIcon } from '@gitlab/ui'; +import { __ } from '~/locale'; + +const defaultValue = (prop) => GlLoadingIcon.props[prop]?.default; + +/** + * Returns a loading icon/spinner element. + * + * This should *only* be used in existing legacy areas of code where Vue is not + * in use, as part of the migration strategy defined in + * https://gitlab.com/groups/gitlab-org/-/epics/7626. + * + * @param {object} props - The props to configure the spinner. + * @param {boolean} props.inline - Display the spinner inline; otherwise, as a block. + * @param {string} props.color - The color of the spinner ('dark' or 'light') + * @param {string} props.size - The size of the spinner ('sm', 'md', 'lg', 'xl') + * @param {string[]} props.classes - Additional classes to apply to the element. + * @param {string} props.label - The ARIA label to apply to the spinner. + * @returns {HTMLElement} + */ +export const loadingIconForLegacyJS = ({ + inline = defaultValue('inline'), + color = defaultValue('color'), + size = defaultValue('size'), + classes = [], + label = __('Loading'), +} = {}) => { + const mountEl = document.createElement('div'); + + const vm = new Vue({ + el: mountEl, + render(h) { + return h(GlLoadingIcon, { + class: classes, + props: { + inline, + color, + size, + label, + }, + }); + }, + }); + + // Ensure it's rendered + vm.$forceUpdate(); + + const el = vm.$el.cloneNode(true); + vm.$destroy(); + + return el; +}; |