mirror of https://github.com/vizality/vizality
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
254 lines
10 KiB
254 lines
10 KiB
import { getModule, getModuleByDisplayName } from '@vizality/webpack';
|
|
|
|
import { Icons } from './Icon';
|
|
import AsyncComponent from './AsyncComponent';
|
|
|
|
export const ImageCarouselModal = AsyncComponent.fromDisplayName('componentDispatchSubscriber(ModalCarousel)');
|
|
export const GIFPickerSearchResults = AsyncComponent.fromDisplayName('GIFPickerSearchResults');
|
|
export const DiscoverySidebarHeader = AsyncComponent.fetchFromProps('DiscoverySidebarHeader');
|
|
export const AdvancedScrollerThin = AsyncComponent.fetchFromProps('AdvancedScrollerThin');
|
|
export const AdvancedScrollerAuto = AsyncComponent.fetchFromProps('AdvancedScrollerAuto');
|
|
export const AdvancedScrollerNone = AsyncComponent.fetchFromProps('AdvancedScrollerNone');
|
|
export const CarouselWithPreview = AsyncComponent.fetchFromProps('CarouselWithPreview');
|
|
export const HeaderBarContainer = AsyncComponent.fromDisplayName('HeaderBarContainer');
|
|
export const LazyImageZoomable = AsyncComponent.fromDisplayName('LazyImageZoomable');
|
|
export const KeyboardShortcut = AsyncComponent.fromDisplayName('KeyboardShortcut');
|
|
export const Avatar = AsyncComponent.fetchFromProps('AnimatedAvatar', 'default');
|
|
export const ContextMenu = AsyncComponent.fetchFromProps('MenuGroup', 'default');
|
|
export const KeybindRecorder = AsyncComponent.fromDisplayName('KeybindRecorder');
|
|
export const Helmet = AsyncComponent.fetchFromProps('HelmetProvider', 'Helmet');
|
|
export const UserPopout = AsyncComponent.fromDisplayName('ConnectedUserPopout');
|
|
export const HelmetProvider = AsyncComponent.fetchFromProps('HelmetProvider');
|
|
export const Autocomplete = AsyncComponent.fromDisplayName('Autocomplete');
|
|
export const UserProfile = AsyncComponent.fromDisplayName('UserProfile');
|
|
export const ShinyButton = AsyncComponent.fromDisplayName('ShinyButton');
|
|
export const WebhookCard = AsyncComponent.fromDisplayName('WebhookCard');
|
|
export const Tooltip = AsyncComponent.fetchFromProps('TooltipContainer');
|
|
export const HelpMessage = AsyncComponent.fromDisplayName('HelpMessage');
|
|
export const Button = AsyncComponent.from(getModule('Link', 'Hovers', 'Sizes', true));
|
|
export const FormNotice = AsyncComponent.fromDisplayName('FormNotice');
|
|
// "count", "color", "shape", "disableColor", "className"
|
|
export const NumberBadge = AsyncComponent.fetchFromProps('NumberBadge');
|
|
// "text", "color", "shape", "disableColor", "className"
|
|
export const TextBadge = AsyncComponent.fetchFromProps('TextBadge');
|
|
// "icon", "color", "shape", "disableColor", "className"
|
|
export const IconBadge = AsyncComponent.fetchFromProps('IconBadge');
|
|
export const Checkbox = AsyncComponent.fromDisplayName('Checkbox');
|
|
export const Popout = AsyncComponent.fromDisplayName('Popout');
|
|
export const ImageModal = AsyncComponent.fromDisplayName('ImageModal');
|
|
export const Confirm = AsyncComponent.fromDisplayName('ConfirmModal');
|
|
export const HoverRoll = AsyncComponent.fromDisplayName('HoverRoll'); // https://i.imgur.com/73wadZr.gif
|
|
export const LazyImage = AsyncComponent.fromDisplayName('LazyImage');
|
|
export const TextInput = AsyncComponent.fromDisplayName('TextInput');
|
|
export const SearchBar = AsyncComponent.fromDisplayName('SearchBar');
|
|
export const Clickable = AsyncComponent.fromDisplayName('Clickable');
|
|
export const FormTitle = AsyncComponent.fromDisplayName('FormTitle');
|
|
export const HeaderBar = AsyncComponent.fromDisplayName('HeaderBar');
|
|
export const Modal = AsyncComponent.fetchFromProps('ModalRoot');
|
|
export const FormText = AsyncComponent.fromDisplayName('FormText');
|
|
export const FormItem = AsyncComponent.fromDisplayName('FormItem');
|
|
export const Spinner = AsyncComponent.fromDisplayName('Spinner');
|
|
export const SlideIn = AsyncComponent.fetchFromProps('SlideIn');
|
|
/*
|
|
* id
|
|
* onChange
|
|
* checked
|
|
* disabled
|
|
* className
|
|
*/
|
|
export const Switch = AsyncComponent.fromDisplayName('Switch');
|
|
export const TabBar = AsyncComponent.fromDisplayName('TabBar');
|
|
export const Notice = AsyncComponent.fromDisplayName('Notice');
|
|
export const Header = AsyncComponent.fromDisplayName('Header');
|
|
|
|
export const Table = AsyncComponent.fromDisplayName('Table');
|
|
export const Image = AsyncComponent.fromDisplayName('Image');
|
|
export const Video = AsyncComponent.fromDisplayName('Video');
|
|
export const Card = AsyncComponent.fromDisplayName('Card');
|
|
export const Text = AsyncComponent.fromDisplayName('LegacyText');
|
|
export const Flex = AsyncComponent.fromDisplayName('Flex');
|
|
|
|
export { default as ProgressBar } from './ProgressBar';
|
|
export { default as ComponentPreview } from './ComponentPreview';
|
|
export { default as OverflowTooltip } from './OverflowTooltip';
|
|
export { default as AsyncComponent } from './AsyncComponent';
|
|
export { default as DeferredRender } from './DeferredRender';
|
|
export { default as ErrorBoundary } from './ErrorBoundary';
|
|
export { default as StickyElement } from './StickyElement';
|
|
export { default as ColorPicker } from './ColorPicker';
|
|
export { default as PopupWindow } from './PopupWindow';
|
|
export { default as FilterInput } from './FilterInput';
|
|
export { default as ErrorState } from './ErrorState';
|
|
export { default as CodeBlock } from './CodeBlock';
|
|
export { default as Markdown } from './Markdown';
|
|
export { default as Titlebar } from './Titlebar';
|
|
export { default as Divider } from './Divider';
|
|
export { default as Anchor } from './Anchor';
|
|
export { default as Editor } from './Editor';
|
|
export { default as Icon } from './Icon';
|
|
|
|
export { default as __TabBar } from './__TabBar';
|
|
import { NavItem } from './__TabBar';
|
|
this.__TabBar.NavItem = NavItem;
|
|
|
|
export * as dashboard from './dashboard';
|
|
export * as settings from './settings';
|
|
export * as vizality from './vizality';
|
|
export * as addon from './addon';
|
|
|
|
/**
|
|
* Re-export module properties.
|
|
*/
|
|
getModuleByDisplayName('FormNotice', true, true).then(FormNotice => {
|
|
this.FormNotice.Types = FormNotice.Types;
|
|
this.FormNotice.ImagePositions = FormNotice.ImagePositions;
|
|
this.FormNotice.Align = getModuleByDisplayName('Flex')?.Align;
|
|
});
|
|
|
|
getModuleByDisplayName('Spinner', true, true).then(Spinner => {
|
|
this.Spinner.Types = Spinner.Type;
|
|
});
|
|
|
|
getModuleByDisplayName('Spinner', true, true).then(Spinner => {
|
|
this.Spinner.Types = Spinner.Type;
|
|
});
|
|
|
|
/**
|
|
* props:
|
|
* children
|
|
* className
|
|
* fontSize
|
|
* messageType
|
|
*/
|
|
getModule(m => m.default?.displayName === 'HelpMessage', true, true).then(HelpMessage => {
|
|
this.HelpMessage.Types = HelpMessage.HelpMessageTypes;
|
|
this.HelpMessage.FontSizes = HelpMessage.HelpMessageFontSizes;
|
|
});
|
|
|
|
getModule(m => m.default?.displayName === 'Notice', true, true).then(Notice => {
|
|
this.Notice.Colors = {
|
|
BLURPLE: Notice.NoticeColors.BRAND,
|
|
RED: Notice.NoticeColors.DANGER,
|
|
ORANGE: Notice.NoticeColors.DEFAULT,
|
|
BLUE: Notice.NoticeColors.INFO,
|
|
GREY: Notice.NoticeColors.NEUTRAL,
|
|
DARK_GREY: Notice.NoticeColors.DARK,
|
|
GREEN: Notice.NoticeColors.NOTIFICATION,
|
|
BLURPLE_GRADIENT_1: Notice.NoticeColors.PREMIUM_TIER_1,
|
|
BLURPLE_GRADIENT_2: Notice.NoticeColors.PREMIUM_TIER_2,
|
|
SPOTIFY: Notice.NoticeColors.SPOTIFY,
|
|
PURPLE: Notice.NoticeColors.STREAMER_MODE
|
|
};
|
|
});
|
|
|
|
getModule(m => m.Link && m.Hovers, true, true).then(Button => {
|
|
this.Button.Colors = Button.Colors;
|
|
this.Button.Hovers = Button.Hovers;
|
|
this.Button.Link = Button.Link;
|
|
this.Button.Looks = Button.Looks;
|
|
this.Button.Sizes = Button.Sizes;
|
|
});
|
|
|
|
getModule(m => m.default?.displayName === 'Tooltip', true, true).then(Tooltip => {
|
|
this.Tooltip.Positions = Tooltip.TooltipPositions;
|
|
this.Tooltip.Colors = Tooltip.TooltipColors;
|
|
});
|
|
|
|
getModuleByDisplayName('Popout', true, true).then(Popout => {
|
|
this.Popout.Aligns = Popout.Align;
|
|
this.Popout.Positions = Popout.Positions;
|
|
});
|
|
|
|
getModuleByDisplayName('HeaderBar', true, true).then(HeaderBar => {
|
|
this.HeaderBar.Divider = HeaderBar.Divider;
|
|
this.HeaderBar.Title = HeaderBar.Title;
|
|
this.HeaderBar.Icon = HeaderBar.Icon;
|
|
});
|
|
|
|
getModuleByDisplayName('Card', true, true).then(Card => {
|
|
this.Card.Types = Card.Types;
|
|
});
|
|
|
|
getModuleByDisplayName('TabBar', true, true).then(TabBar => {
|
|
this.TabBar.Separator = TabBar.Separator;
|
|
this.TabBar.Header = TabBar.Header;
|
|
this.TabBar.Types = TabBar.Types;
|
|
this.TabBar.Looks = TabBar.Looks;
|
|
this.TabBar.Item = TabBar.Item;
|
|
this.TabBar.Panel = TabBar.Panel;
|
|
|
|
this.__TabBar.Separator = TabBar.Separator;
|
|
this.__TabBar.Header = TabBar.Header;
|
|
this.__TabBar.Types = TabBar.Types;
|
|
this.__TabBar.Looks = TabBar.Looks;
|
|
this.__TabBar.Item = TabBar.Item;
|
|
});
|
|
|
|
getModuleByDisplayName('SearchBar', true, true).then(SearchBar => {
|
|
this.SearchBar.Sizes = SearchBar.Sizes;
|
|
this.FilterInput.Sizes = SearchBar.Sizes;
|
|
});
|
|
|
|
getModule('NumberBadge', true, true).then(NumberBadge => {
|
|
this.NumberBadge.Shapes = NumberBadge.BadgeShapes;
|
|
});
|
|
|
|
getModuleByDisplayName('TextInput', true, true).then(TextInput => {
|
|
this.TextInput.Sizes = TextInput.Sizes;
|
|
});
|
|
|
|
getModuleByDisplayName('LegacyText', true, true).then(Text => {
|
|
this.Text.Colors = Text.Colors;
|
|
this.Text.Sizes = Text.Sizes;
|
|
});
|
|
|
|
getModuleByDisplayName('Header', true, true).then(Header => {
|
|
this.Header.Tags = Header.Tags;
|
|
this.Header.Sizes = Header.Sizes;
|
|
});
|
|
|
|
getModuleByDisplayName('Flex', true, true).then(Flex => {
|
|
this.Flex.defaultProps = Flex.defaultProps;
|
|
this.Flex.Direction = Flex.Direction;
|
|
this.Flex.Justify = Flex.Justify;
|
|
this.Flex.Align = Flex.Align;
|
|
this.Flex.Child = Flex.Child;
|
|
this.Flex.Wrap = Flex.Wrap;
|
|
});
|
|
|
|
getModule('AnimatedAvatar', true, true).then(Avatar => {
|
|
this.Avatar.Sizes = Avatar.Sizes;
|
|
});
|
|
|
|
getModule('CarouselWithPreview', true, true).then(CarouselWithPreview => {
|
|
this.CarouselWithPreview.Alignment = CarouselWithPreview.Alignment;
|
|
});
|
|
|
|
getModule('MenuGroup', true, true).then(ContextMenu => {
|
|
const { MenuItemColor } = getModule('MenuItemColor');
|
|
this.ContextMenu.CheckboxItem = ContextMenu.MenuCheckboxItem;
|
|
this.ContextMenu.ControlItem = ContextMenu.MenuControlItem;
|
|
this.ContextMenu.RadioItem = ContextMenu.MenuRadioItem;
|
|
this.ContextMenu.Separator = ContextMenu.MenuSeparator;
|
|
this.ContextMenu.Group = ContextMenu.MenuGroup;
|
|
this.ContextMenu.Style = ContextMenu.MenuStyle;
|
|
this.ContextMenu.Item = ContextMenu.MenuItem;
|
|
this.ContextMenu.Item.Colors = MenuItemColor;
|
|
this.ContextMenu.Menu = ContextMenu.default;
|
|
});
|
|
|
|
getModule('ModalRoot', true, true).then(Modal => {
|
|
this.Modal.CloseButton = Modal.ModalCloseButton;
|
|
this.Modal.Content = Modal.ModalContent;
|
|
this.Modal.Footer = Modal.ModalFooter;
|
|
this.Modal.Header = Modal.ModalHeader;
|
|
this.Modal.ListContent = Modal.ModalListContent;
|
|
this.Modal.Root = Modal.ModalRoot;
|
|
this.Modal.Size = Modal.ModalSize;
|
|
});
|
|
|
|
this.Icon.Icons = Icons;
|
|
this.Icon.Names = Object.keys(Icons);
|
|
|
|
export default this;
|