Skip to content
This repository has been archived by the owner on Nov 10, 2020. It is now read-only.

Commit

Permalink
fix(flyout-menu): refactoring
Browse files Browse the repository at this point in the history 
refactoring
  • Loading branch information
@AAPK-code
AAPK-code committed Sep 14, 2020
1 parent 1c908df commit 9e8b51f
Show file tree
Hide file tree
Showing 3 changed files with 22 additions and 31 deletions.
33 changes: 15 additions & 18 deletions src/components/beta/gux-flyout-menu/example.html
View file
Original file line number Diff line number Diff line change
@@ -1,50 +1,47 @@
<div style="display: flex;">
<div style="margin-left: 20px;">
<gux-flyout-menu-beta>
<gux-flyout-option short-cut="Crl+Alt+A"><span>Option One</span></gux-flyout-option>
<gux-flyout-option short-cut="Crl+Alt+C"><span>Option Two</span></gux-flyout-option>
<gux-flyout-option short-cut="Shift+A"><span>Option Three</span></gux-flyout-option>
<gux-flyout-option short-cut="⌘A"><span>Option Four</span></gux-flyout-option>
<gux-flyout-option short-cut="⌘⇧A"><span>Option Five</span></gux-flyout-option>
<gux-flyout-option name="Option One" short-cut="Crl+Alt+A"></gux-flyout-option>
<gux-flyout-option name="Option Two" short-cut="Crl+Alt+C"></gux-flyout-option>
<gux-flyout-option name="Option Three" short-cut="Shift+A"></gux-flyout-option>
<gux-flyout-option name="Option Four" short-cut="⌘A"></gux-flyout-option>
<gux-flyout-option name="Option Five" short-cut="⌘⇧A"></gux-flyout-option>
</gux-flyout-menu-beta>
</div>
<div style="margin-left: 20px;">
<gux-flyout-menu-beta>
<gux-flyout-option
with-icon
has-Inner-Option
icon-name="angle-right"
name="Option One"
>
<div class="gux-flyout-inner-content">
<gux-flyout-option with-icon has-Inner-Option icon-name="angle-right" name="Option One">
<gux-flyout-option with-icon icon-name="angle-right" name="Option One">
<div class="gux-flyout-inner-content">
<gux-flyout-option short-cut="⌘A">Option One</gux-flyout-option>
<gux-flyout-option short-cut="⌘⇧A">Option Two</gux-flyout-option>
<gux-flyout-option short-cut="Crl+C">Option Three</gux-flyout-option>
<gux-flyout-option name="Option One" short-cut="⌘A"></gux-flyout-option>
<gux-flyout-option name="Option Two" short-cut="⌘⇧A"></gux-flyout-option>
<gux-flyout-option name="Option Three" short-cut="Crl+C"></gux-flyout-option>
</div>
</gux-flyout-option>
<gux-flyout-option with-icon has-Inner-Option icon-name="angle-right" name="Option Two"></gux-flyout-option>
<gux-flyout-option with-icon has-Inner-Option icon-name="angle-right" name="Option Three"></gux-flyout-option>
<gux-flyout-option with-icon has-Inner-Option icon-name="angle-right" name="Option Four">
<gux-flyout-option with-icon icon-name="angle-right" name="Option Two"></gux-flyout-option>
<gux-flyout-option with-icon icon-name="angle-right" name="Option Three"></gux-flyout-option>
<gux-flyout-option with-icon icon-name="angle-right" name="Option Four">
<div class="gux-flyout-inner-content">
<gux-flyout-option short-cut="⌘A">Option One</gux-flyout-option>
<gux-flyout-option short-cut="⌘⇧A">Option Two</gux-flyout-option>
<gux-flyout-option short-cut="Crl+Alt+C">Option Three</gux-flyout-option>
<gux-flyout-option name="Option One" short-cut="⌘A"></gux-flyout-option>
<gux-flyout-option name="Option Two" short-cut="⌘⇧A"></gux-flyout-option>
<gux-flyout-option name="Option Three" short-cut="Crl+Alt+C"></gux-flyout-option>
</div>
</gux-flyout-option>
</div>
</gux-flyout-option>
<gux-flyout-option
with-icon
icon-name="angle-right"
has-Inner-Option
name="Option Two"
></gux-flyout-option>
<gux-flyout-option
with-icon
icon-name="angle-right"
has-Inner-Option
name="Option Three"
></gux-flyout-option>
</gux-flyout-menu-beta>
Expand Down
6 changes: 1 addition & 5 deletions src/components/beta/gux-flyout-menu/gux-flyout-option/gux-flyout-option.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,7 @@ import { Component, h, Prop } from '@stencil/core';
tag: 'gux-flyout-option'
})
export class GuxFlyoutOption {
@Prop() hasInnerOption: boolean;
@Prop() name = 'default name';
@Prop() secondName = 'default second name';
@Prop() withIcon: boolean;
@Prop() iconName = 'angle-right';
@Prop() shortCut: string;
Expand All @@ -18,12 +16,10 @@ export class GuxFlyoutOption {
<span> {this.shortCut} </span>
);

private optionBuilderWithInnerOption = () => <slot>{this.name}</slot>;

render() {
return (
<div class="main-menu-options">
{this.hasInnerOption ? this.optionBuilderWithInnerOption() : <slot />}
<slot>{this.name}</slot>
{this.isIcon(this.iconName)}
</div>
);
Expand Down
14 changes: 6 additions & 8 deletions src/components/beta/gux-flyout-menu/gux-flyout-option/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,12 @@

## Properties

| Property | Attribute | Description | Type | Default |
| ---------------- | ------------------ | ----------- | --------- | ----------------------- |
| `hasInnerOption` | `has-inner-option` | | `boolean` | `undefined` |
| `iconName` | `icon-name` | | `string` | `'angle-right'` |
| `name` | `name` | | `string` | `'default name'` |
| `secondName` | `second-name` | | `string` | `'default second name'` |
| `shortCut` | `short-cut` | | `string` | `undefined` |
| `withIcon` | `with-icon` | | `boolean` | `undefined` |
| Property | Attribute | Description | Type | Default |
| ---------- | ----------- | ----------- | --------- | ---------------- |
| `iconName` | `icon-name` | | `string` | `'angle-right'` |
| `name` | `name` | | `string` | `'default name'` |
| `shortCut` | `short-cut` | | `string` | `undefined` |
| `withIcon` | `with-icon` | | `boolean` | `undefined` |


## Dependencies
Expand Down

0 comments on commit 9e8b51f

Please sign in to comment.