1 | /*
|
2 | * Copyright 2016 Palantir Technologies, Inc. All rights reserved.
|
3 | *
|
4 | * Licensed under the Apache License, Version 2.0 (the "License");
|
5 | * you may not use this file except in compliance with the License.
|
6 | * You may obtain a copy of the License at
|
7 | *
|
8 | * http://www.apache.org/licenses/LICENSE-2.0
|
9 | *
|
10 | * Unless required by applicable law or agreed to in writing, software
|
11 | * distributed under the License is distributed on an "AS IS" BASIS,
|
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
13 | * See the License for the specific language governing permissions and
|
14 | * limitations under the License.
|
15 | */
|
16 |
|
17 | import classNames from "classnames";
|
18 | import * as React from "react";
|
19 | import { polyfill } from "react-lifecycles-compat";
|
20 |
|
21 | import { AbstractPureComponent2 } from "../../common";
|
22 | import * as Classes from "../../common/classes";
|
23 | import { DISPLAYNAME_PREFIX, Props, MaybeElement } from "../../common/props";
|
24 | import { ensureElement } from "../../common/utils";
|
25 | import { H4 } from "../html/html";
|
26 | import { Icon, IconName, IconSize } from "../icon/icon";
|
27 |
|
28 | // eslint-disable-next-line deprecation/deprecation
|
29 | export type NonIdealStateProps = INonIdealStateProps;
|
30 | /** @deprecated use NonIdealStateProps */
|
31 | export interface INonIdealStateProps extends Props {
|
32 | /** An action to resolve the non-ideal state which appears after `description`. */
|
33 | action?: JSX.Element;
|
34 |
|
35 | /**
|
36 | * Advanced usage: React `children` will appear last (after `action`).
|
37 | * Avoid passing raw strings as they will not receive margins and disrupt the layout flow.
|
38 | */
|
39 | children?: React.ReactNode;
|
40 |
|
41 | /**
|
42 | * A longer description of the non-ideal state.
|
43 | * A string or number value will be wrapped in a `<div>` to preserve margins.
|
44 | */
|
45 | description?: React.ReactChild;
|
46 |
|
47 | /** The name of a Blueprint icon or a JSX Element (such as `<Spinner/>`) to render above the title. */
|
48 | icon?: IconName | MaybeElement;
|
49 |
|
50 | /** The title of the non-ideal state. */
|
51 | title?: React.ReactNode;
|
52 | }
|
53 |
|
54 |
|
55 | export class NonIdealState extends AbstractPureComponent2<NonIdealStateProps> {
|
56 | public static displayName = `${DISPLAYNAME_PREFIX}.NonIdealState`;
|
57 |
|
58 | public render() {
|
59 | const { action, children, className, description, title } = this.props;
|
60 | return (
|
61 | <div className={classNames(Classes.NON_IDEAL_STATE, className)}>
|
62 | {this.maybeRenderVisual()}
|
63 | {title && <H4>{title}</H4>}
|
64 | {description && ensureElement(description, "div")}
|
65 | {action}
|
66 | {children}
|
67 | </div>
|
68 | );
|
69 | }
|
70 |
|
71 | private maybeRenderVisual() {
|
72 | const { icon } = this.props;
|
73 | if (icon == null) {
|
74 | return null;
|
75 | } else {
|
76 | return (
|
77 | <div className={Classes.NON_IDEAL_STATE_VISUAL}>
|
78 | <Icon icon={icon} size={IconSize.LARGE * 3} />
|
79 | </div>
|
80 | );
|
81 | }
|
82 | }
|
83 | }
|