diff options
author | Stefan Malzner <stefan@adlk.io> | 2019-01-15 15:28:09 +0100 |
---|---|---|
committer | Stefan Malzner <stefan@adlk.io> | 2019-01-15 15:28:09 +0100 |
commit | c7a469f3f8977b5b9f02c6f6105c1e1fd40e5c33 (patch) | |
tree | c7102f801eb2c4b9b0fa296c388175b4dc740033 /uidev/src | |
parent | Try to get a working bundle (diff) | |
download | ferdium-app-c7a469f3f8977b5b9f02c6f6105c1e1fd40e5c33.tar.gz ferdium-app-c7a469f3f8977b5b9f02c6f6105c1e1fd40e5c33.tar.zst ferdium-app-c7a469f3f8977b5b9f02c6f6105c1e1fd40e5c33.zip |
Add href and type to button component
Diffstat (limited to 'uidev/src')
-rw-r--r-- | uidev/src/stories/button.stories.tsx | 25 |
1 files changed, 19 insertions, 6 deletions
diff --git a/uidev/src/stories/button.stories.tsx b/uidev/src/stories/button.stories.tsx index b5906211a..d81808530 100644 --- a/uidev/src/stories/button.stories.tsx +++ b/uidev/src/stories/button.stories.tsx | |||
@@ -10,7 +10,6 @@ const defaultProps = { | |||
10 | id: 'test1', | 10 | id: 'test1', |
11 | name: 'test1', | 11 | name: 'test1', |
12 | type: 'button', | 12 | type: 'button', |
13 | onClick: (e: React.MouseEvent<HTMLButtonElement>) => console.log('click event', e), | ||
14 | disabled: false, | 13 | disabled: false, |
15 | }; | 14 | }; |
16 | 15 | ||
@@ -22,13 +21,13 @@ const WithStoreButton = observer(({ store }: { store: any }) => ( | |||
22 | <> | 21 | <> |
23 | <Button | 22 | <Button |
24 | {...Object.assign({}, defaultProps, store)} | 23 | {...Object.assign({}, defaultProps, store)} |
25 | onClick={() => { | 24 | onClick={!store.onClick ? () => { |
26 | store.busy = !store.busy; | 25 | store.busy = !store.busy; |
27 | 26 | ||
28 | window.setTimeout(() => { | 27 | window.setTimeout(() => { |
29 | store.busy = !store.busy; | 28 | store.busy = !store.busy; |
30 | }, 1000); | 29 | }, 1000); |
31 | }} | 30 | } : store.onClick} |
32 | /> | 31 | /> |
33 | </> | 32 | </> |
34 | )); | 33 | )); |
@@ -77,8 +76,22 @@ storiesOf('Button') | |||
77 | busy: true, | 76 | busy: true, |
78 | })} /> | 77 | })} /> |
79 | )) | 78 | )) |
80 | .add('With icon', () => ( | 79 | .add('As link', () => ( |
81 | <WithStoreButton store={createStore({ | 80 | <WithStoreButton store={createStore({ |
82 | icon: 'mdiAccountCircle', | 81 | href: 'https://meetfranz.com', |
83 | })} /> | 82 | })} /> |
84 | )); | 83 | )) |
84 | .add('As link (target=_blank)', () => ( | ||
85 | <WithStoreButton store={createStore({ | ||
86 | href: 'https://meetfranz.com', | ||
87 | target: '_blank', | ||
88 | })} /> | ||
89 | )) | ||
90 | .add('As link (with onClick)', () => ( | ||
91 | <WithStoreButton store={createStore({ | ||
92 | href: 'https://meetfranz.com', | ||
93 | onClick: (e: React.MouseEvent<HTMLAnchorElement>) => { | ||
94 | e.preventDefault(); | ||
95 | alert('Click event'); | ||
96 | }, | ||
97 | })} />)); | ||