2022-04-29 02:44:38 +00:00
|
|
|
import React from 'react';
|
2022-09-02 11:43:37 +00:00
|
|
|
|
2022-04-29 02:44:38 +00:00
|
|
|
import Component from '@reactions/component';
|
2022-09-02 11:43:37 +00:00
|
|
|
|
2022-04-29 02:44:38 +00:00
|
|
|
import { Section, TestModal } from '../guide/components';
|
|
|
|
import { Input, Modal, View, Button, Stack } from './common';
|
|
|
|
|
|
|
|
export default () => {
|
|
|
|
return (
|
|
|
|
<Section style={{ width: 200 }}>
|
|
|
|
Input
|
|
|
|
<Input defaultValue="value" onEnter={e => alert(e.target.value)} />
|
|
|
|
Buttons
|
|
|
|
<Stack
|
|
|
|
align="flex-start"
|
|
|
|
style={{ backgroundColor: 'white', padding: 15 }}
|
|
|
|
>
|
|
|
|
<Button>Hello</Button>
|
|
|
|
<Button primary>Hello</Button>
|
|
|
|
<Button bare>Hello</Button>
|
|
|
|
</Stack>
|
|
|
|
Modal
|
|
|
|
<Component initialState={{ modalCount: 1 }}>
|
|
|
|
{({ state, setState }) => {
|
|
|
|
return (
|
|
|
|
<TestModal width={600} height={500}>
|
|
|
|
{node => {
|
|
|
|
let modals = [];
|
|
|
|
|
|
|
|
for (let i = 0; i < state.modalCount; i++) {
|
|
|
|
let modalProps = {
|
|
|
|
onClose: () =>
|
|
|
|
setState({ modalCount: state.modalCount - 1 }),
|
|
|
|
isCurrent: i === state.modalCount - 1,
|
|
|
|
stackIndex: i,
|
|
|
|
parent: node
|
|
|
|
};
|
|
|
|
|
|
|
|
modals.push(
|
|
|
|
<Modal {...modalProps}>
|
|
|
|
<View style={{ height: 300 }}>
|
|
|
|
Pushin' and poppin'
|
|
|
|
<Button
|
|
|
|
primary
|
|
|
|
onClick={() =>
|
|
|
|
setState({ modalCount: state.modalCount + 1 })
|
|
|
|
}
|
|
|
|
style={{ marginTop: 10, alignSelf: 'flex-start' }}
|
|
|
|
>
|
|
|
|
Push modal
|
|
|
|
</Button>
|
|
|
|
<Button
|
|
|
|
primary
|
|
|
|
onClick={() =>
|
|
|
|
setState({ modalCount: state.modalCount - 1 })
|
|
|
|
}
|
|
|
|
style={{ marginTop: 10, alignSelf: 'flex-start' }}
|
|
|
|
>
|
|
|
|
Pop modal
|
|
|
|
</Button>
|
|
|
|
</View>
|
|
|
|
</Modal>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
return modals;
|
|
|
|
}}
|
|
|
|
</TestModal>
|
|
|
|
);
|
|
|
|
}}
|
|
|
|
</Component>
|
|
|
|
</Section>
|
|
|
|
);
|
|
|
|
};
|