0.3.9 • Published 5 years ago
@thumbtack/tp-ui-react-modal-default v0.3.9
package: '@thumbtack/tp-ui-react-modal-default' kit: component/modal-default.yaml platform: react
url: /api/components/component/modal-default/react/
import Alert from './../../../../www/src/components/alert';
Modal variations
Modals can be opened or closed with a isOpen prop.
Basic modal with a form
The ModalDefault has a curtain (backdrop) at medium and large breakpoints. It appears fullscreen on small devices.
class ModalDefaultDemoBasic extends React.Component {
constructor() {
super();
this.state = {
isOpen: false,
};
this.closeModal = this.closeModal.bind(this);
this.openModal = this.openModal.bind(this);
}
closeModal() {
this.setState({ isOpen: false });
}
openModal() {
this.setState({ isOpen: true });
}
onCloseFinish() {
console.log('ModalDefault: `onCloseFinish`');
}
onOpenFinish() {
console.log('ModalDefault: `onOpenFinish`');
}
render() {
return (
<React.Fragment>
<Button onClick={this.openModal}>Open modal</Button>
<ModalDefault
isOpen={this.state.isOpen}
onCloseClick={this.closeModal}
onCloseFinish={this.onCloseFinish}
onOpenFinish={this.onOpenFinish}
>
<ModalDefaultHeader>
<ModalDefaultTitle>Add a professional license</ModalDefaultTitle>
<ModalDefaultDescription>
Licenses add credibility to your business and provide more trust for
customers.
</ModalDefaultDescription>
</ModalDefaultHeader>
<ModalDefaultContent>
<ol className="tp-form-fields">
<li className="tp-form-field__item">
<Label>License type</Label>
<Select value="default" isFullWidth onChange={() => {}}>
<option value="default">Choose one…</option>
</Select>
</li>
<li className="tp-form-field__item">
<Label for="example-license-number">License number</Label>
<Input
id="example-license-number"
onChange={() => {}}
placeholder="XX-XXXX-XXXX"
/>
</li>
</ol>
</ModalDefaultContent>
<ModalDefaultFooter>
<ButtonRow justify="right">
<Button onClick={this.closeModal} width="full-below-small">
Submit
</Button>
</ButtonRow>
</ModalDefaultFooter>
</ModalDefault>
</React.Fragment>
);
}
}Tall modal with a sticky footer
This modal has a sticky footer that is always visible on small screens. The sticky footer is set by using the isSticky prop on the ModalDefaultFooter component.
The isSticky prop has no effect at medium or large breakpoints.
class ModalDefaultDemoStickyTall extends React.Component {
constructor() {
super();
this.state = {
isOpen: false,
};
this.closeModal = this.closeModal.bind(this);
this.openModal = this.openModal.bind(this);
}
closeModal() {
this.setState({ isOpen: false });
}
openModal() {
this.setState({ isOpen: true });
}
render() {
return (
<React.Fragment>
<Button onClick={this.openModal}>Open modal</Button>
<ModalDefault isOpen={this.state.isOpen} onCloseClick={this.closeModal}>
<ModalDefaultHeader>
<ModalDefaultTitle>Add a professional license</ModalDefaultTitle>
<ModalDefaultDescription>
Licenses add credibility to your business and provide more trust for
customers.
</ModalDefaultDescription>
</ModalDefaultHeader>
<ModalDefaultContent>
<ol className="tp-form-fields">
<li className="tp-form-field__item">
<Label>License type</Label>
<Select value="default" isFullWidth onChange={() => {}}>
<option value="default">Choose one…</option>
</Select>
</li>
<li className="tp-form-field__item">
<Label for="example-license-number">License number</Label>
<Input
id="example-license-number"
onChange={() => {}}
placeholder="XX-XXXX-XXXX"
/>
</li>
<li className="tp-form-field__item">
<Label for="example-license-number">License number</Label>
<Input
id="example-license-number"
onChange={() => {}}
placeholder="XX-XXXX-XXXX"
/>
</li>
<li className="tp-form-field__item">
<Label for="example-license-number">License number</Label>
<Input
id="example-license-number"
onChange={() => {}}
placeholder="XX-XXXX-XXXX"
/>
</li>
<li className="tp-form-field__item">
<Label for="example-license-number">License number</Label>
<Input
id="example-license-number"
onChange={() => {}}
placeholder="XX-XXXX-XXXX"
/>
</li>
<li className="tp-form-field__item">
<Label for="example-license-number">License number</Label>
<Input
id="example-license-number"
onChange={() => {}}
placeholder="XX-XXXX-XXXX"
/>
</li>
<li className="tp-form-field__item">
<Label for="example-license-number">License number</Label>
<Input
id="example-license-number"
onChange={() => {}}
placeholder="XX-XXXX-XXXX"
/>
</li>
<li className="tp-form-field__item">
<Label for="example-license-number">License number</Label>
<Input
id="example-license-number"
onChange={() => {}}
placeholder="XX-XXXX-XXXX"
/>
</li>
<li className="tp-form-field__item">
<Label for="example-license-number">License number</Label>
<Input
id="example-license-number"
onChange={() => {}}
placeholder="XX-XXXX-XXXX"
/>
</li>
<li className="tp-form-field__item">
<Label for="example-license-number">License number</Label>
<Input
id="example-license-number"
onChange={() => {}}
placeholder="XX-XXXX-XXXX"
/>
</li>
</ol>
</ModalDefaultContent>
<ModalDefaultFooter isSticky>
<ButtonRow justify="right">
<Button onClick={this.closeModal} width="full-below-small">
Submit
</Button>
</ButtonRow>
</ModalDefaultFooter>
</ModalDefault>
</React.Fragment>
);
}
}Tall modal without a sticky footer
This modal does not have a default, non-sticky footer. You'll have to scroll to view the button within the ModalDefaultFooter.
class ModalDefaultDemoTall extends React.Component {
constructor() {
super();
this.state = {
isOpen: false,
};
this.closeModal = this.closeModal.bind(this);
this.openModal = this.openModal.bind(this);
}
closeModal() {
this.setState({ isOpen: false });
}
openModal() {
this.setState({ isOpen: true });
}
render() {
return (
<React.Fragment>
<Button onClick={this.openModal}>Open modal</Button>
<ModalDefault isOpen={this.state.isOpen} onCloseClick={this.closeModal}>
<ModalDefaultHeader>
<ModalDefaultTitle>Add a professional license</ModalDefaultTitle>
<ModalDefaultDescription>
Licenses add credibility to your business and provide more trust for
customers.
</ModalDefaultDescription>
</ModalDefaultHeader>
<ModalDefaultContent>
<ol className="tp-form-fields">
<li className="tp-form-field__item">
<Label>License type</Label>
<Select value="default" isFullWidth onChange={() => {}}>
<option value="default">Choose one…</option>
</Select>
</li>
<li className="tp-form-field__item">
<Label for="example-license-number">License number</Label>
<Input
id="example-license-number"
onChange={() => {}}
placeholder="XX-XXXX-XXXX"
/>
</li>
<li className="tp-form-field__item">
<Label for="example-license-number">License number</Label>
<Input
id="example-license-number"
onChange={() => {}}
placeholder="XX-XXXX-XXXX"
/>
</li>
<li className="tp-form-field__item">
<Label for="example-license-number">License number</Label>
<Input
id="example-license-number"
onChange={() => {}}
placeholder="XX-XXXX-XXXX"
/>
</li>
<li className="tp-form-field__item">
<Label for="example-license-number">License number</Label>
<Input
id="example-license-number"
onChange={() => {}}
placeholder="XX-XXXX-XXXX"
/>
</li>
<li className="tp-form-field__item">
<Label for="example-license-number">License number</Label>
<Input
id="example-license-number"
onChange={() => {}}
placeholder="XX-XXXX-XXXX"
/>
</li>
<li className="tp-form-field__item">
<Label for="example-license-number">License number</Label>
<Input
id="example-license-number"
onChange={() => {}}
placeholder="XX-XXXX-XXXX"
/>
</li>
<li className="tp-form-field__item">
<Label for="example-license-number">License number</Label>
<Input
id="example-license-number"
onChange={() => {}}
placeholder="XX-XXXX-XXXX"
/>
</li>
<li className="tp-form-field__item">
<Label for="example-license-number">License number</Label>
<Input
id="example-license-number"
onChange={() => {}}
placeholder="XX-XXXX-XXXX"
/>
</li>
<li className="tp-form-field__item">
<Label for="example-license-number">License number</Label>
<Input
id="example-license-number"
onChange={() => {}}
placeholder="XX-XXXX-XXXX"
/>
</li>
</ol>
</ModalDefaultContent>
<ModalDefaultFooter>
<ButtonRow justify="right">
<Button onClick={this.closeModal} width="full-below-small">
Submit
</Button>
</ButtonRow>
</ModalDefaultFooter>
</ModalDefault>
</React.Fragment>
);
}
}Narrow modal
It's possible to render narrow modals with the width prop.
class ModalDefaultDemoNarrow extends React.Component {
constructor() {
super();
this.state = {
isOpen: false,
};
this.closeModal = this.closeModal.bind(this);
this.openModal = this.openModal.bind(this);
}
closeModal() {
this.setState({ isOpen: false });
}
openModal() {
this.setState({ isOpen: true });
}
render() {
return (
<React.Fragment>
<Button onClick={this.openModal}>Open modal</Button>
<ModalDefault
isOpen={this.state.isOpen}
width="narrow"
onCloseClick={this.closeModal}
>
<ModalDefaultHeader>
<ModalDefaultTitle>Add a professional license</ModalDefaultTitle>
<ModalDefaultDescription>
Licenses add credibility to your business and provide more trust for
customers.
</ModalDefaultDescription>
</ModalDefaultHeader>
<ModalDefaultContent>
<ol className="tp-form-fields">
<li className="tp-form-field__item">
<Label>License type</Label>
<Select value="default" isFullWidth onChange={() => {}}>
<option value="default">Choose one…</option>
</Select>
</li>
<li className="tp-form-field__item">
<Label for="example-license-number">License number</Label>
<Input
id="example-license-number"
onChange={() => {}}
placeholder="XX-XXXX-XXXX"
/>
</li>
</ol>
</ModalDefaultContent>
<ModalDefaultFooter>
<ButtonRow justify="right">
<Button onClick={this.closeModal} width="full-below-small">
Submit
</Button>
</ButtonRow>
</ModalDefaultFooter>
</ModalDefault>
</React.Fragment>
);
}
}