@roam-garden/landscaping-toolbox
Version:
Common UI things for Roam Garden management
59 lines • 2.8 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.useSuccessIndicator = exports.ProgressIndicator = void 0;
const theme_ui_1 = require("theme-ui");
const react_transition_group_1 = require("react-transition-group");
const icons_1 = require("./icons");
const react_1 = __importStar(require("react"));
const async_1 = require("../common/async");
const successIndicatorClass = "successIndicator";
const ProgressIndicator = ({ processingState, isSuccess }) => react_1.default.createElement(theme_ui_1.Flex, { sx: {
alignItems: "center",
[`.${successIndicatorClass}-enter`]: {
opacity: 0.01,
transform: "scale(1.1)",
},
[`.${successIndicatorClass}-enter-active`]: {
opacity: 1,
transform: "scale(1)",
transition: "all 1000ms",
},
} },
react_1.default.createElement(react_transition_group_1.TransitionGroup, { component: null }, isSuccess ? react_1.default.createElement(react_transition_group_1.CSSTransition, { classNames: successIndicatorClass, timeout: 300 },
react_1.default.createElement(icons_1.Success, { height: "4em" })) :
react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(theme_ui_1.Spinner, null),
react_1.default.createElement(theme_ui_1.Box, { sx: {
textAlign: "center",
flexGrow: 1,
} }, processingState))));
exports.ProgressIndicator = ProgressIndicator;
const useSuccessIndicator = (indicationDurationMs = 2000) => {
const [isSuccess, setIsSuccess] = react_1.useState(false);
return [isSuccess, async () => {
setIsSuccess(true);
await async_1.delay(indicationDurationMs);
setIsSuccess(false);
}];
};
exports.useSuccessIndicator = useSuccessIndicator;
//# sourceMappingURL=progress-indicator.js.map