wix-style-react
Version:
wix-style-react
241 lines (240 loc) • 6.89 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _system = require("@wix/wix-ui-icons-common/system");
var _Arc = _interopRequireDefault(require("./Arc"));
var _Heading = _interopRequireDefault(require("../Heading"));
var _Tooltip = _interopRequireDefault(require("../Tooltip"));
var _LoaderSt = require("./Loader.st.css");
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/Loader/Loader.js";
var arcsAngles = {
tiny: {
light: 216,
dark: 144
},
small: {
light: 216,
dark: 144
},
medium: {
light: 108,
dark: 108
},
large: {
light: 180,
dark: 180
}
};
var strokeWidths = {
tiny: 3,
small: 4,
medium: 4,
large: 4
};
var sizesInPx = {
tiny: 18,
small: 30,
medium: 54,
large: 102
};
var FULL_CIRCLE_ANGLE = 359;
var sizeToSuccessIcon = {
tiny: /*#__PURE__*/_react.default.createElement(_system.ToggleOn, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 50,
columnNumber: 9
}
}),
small: /*#__PURE__*/_react.default.createElement(_system.CircleLoaderCheckSmall, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 51,
columnNumber: 10
}
}),
medium: /*#__PURE__*/_react.default.createElement(_system.CircleLoaderCheck, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 52,
columnNumber: 11
}
}),
large: /*#__PURE__*/_react.default.createElement(_system.CircleLoaderCheck, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 53,
columnNumber: 10
}
})
};
var sizeToErrorIcon = {
tiny: /*#__PURE__*/_react.default.createElement(_system.FormFieldError, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 57,
columnNumber: 9
}
}),
small: /*#__PURE__*/_react.default.createElement(_system.FormFieldErrorSmall, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 58,
columnNumber: 10
}
}),
medium: /*#__PURE__*/_react.default.createElement(_system.FormFieldError, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 59,
columnNumber: 11
}
}),
large: /*#__PURE__*/_react.default.createElement(_system.FormFieldError, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 60,
columnNumber: 10
}
})
};
class Loader extends _react.default.PureComponent {
render() {
var {
dataHook,
size,
color,
text,
status,
statusMessage
} = this.props;
var sizeInPx = sizesInPx[size];
var shouldShowFullCircle = status !== 'loading';
var lightArcAngle = !shouldShowFullCircle ? arcsAngles[size].light : FULL_CIRCLE_ANGLE;
var darkArcAngle = !shouldShowFullCircle ? arcsAngles[size].dark : FULL_CIRCLE_ANGLE;
var shouldShowText = size !== 'tiny';
var successIcon = sizeToSuccessIcon[size];
var errorIcon = sizeToErrorIcon[size];
var strokeWidth = strokeWidths[size];
var loader = /*#__PURE__*/_react.default.createElement("div", {
className: _LoaderSt.classes.arcsContainer,
style: {
width: "".concat(sizeInPx, "px"),
height: "".concat(sizeInPx, "px")
},
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 108,
columnNumber: 7
}
}, /*#__PURE__*/_react.default.createElement(_Arc.default, {
angle: lightArcAngle,
className: _LoaderSt.classes.lightArc,
strokeWidth: strokeWidth,
viewBoxSize: sizeInPx,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 115,
columnNumber: 9
}
}), /*#__PURE__*/_react.default.createElement(_Arc.default, {
angle: darkArcAngle,
className: _LoaderSt.classes.darkArc,
strokeWidth: strokeWidth,
viewBoxSize: sizeInPx,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 121,
columnNumber: 9
}
}), status !== 'loading' && /*#__PURE__*/_react.default.createElement("div", {
className: _LoaderSt.classes.statusIndicator,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 128,
columnNumber: 11
}
}, status === 'success' && successIcon, status === 'error' && errorIcon));
return /*#__PURE__*/_react.default.createElement("div", {
className: (0, _LoaderSt.st)(_LoaderSt.classes.root, {
size,
color,
status
}),
"data-hook": dataHook,
"data-size": size,
"data-color": color,
"data-status": status,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 137,
columnNumber: 7
}
}, statusMessage ? /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
content: statusMessage,
appendTo: "window",
dataHook: "loader-tooltip",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 145,
columnNumber: 11
}
}, loader) : loader, shouldShowText && text && /*#__PURE__*/_react.default.createElement("div", {
className: _LoaderSt.classes.text,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 158,
columnNumber: 11
}
}, /*#__PURE__*/_react.default.createElement(_Heading.default, {
size: "extraTiny",
dataHook: "loader-text",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 159,
columnNumber: 13
}
}, this.props.text)));
}
}
Loader.displayName = 'Loader';
Loader.propTypes = {
/** Applies a data-hook HTML attribute to be used in the tests */
dataHook: _propTypes.default.string,
/** Controls the size of the loader */
size: _propTypes.default.oneOf(['tiny', 'small', 'medium', 'large']),
/** Controls the skin of the loader */
color: _propTypes.default.oneOf(['blue', 'white']),
/** Defines a text message to show below the loader */
text: _propTypes.default.node,
/** Specifies the status of a loader */
status: _propTypes.default.oneOf(['loading', 'success', 'error']),
/** Defines the message that explains the current status of the loader. Message will be displayed on loader hover. If not given or empty there will be no tooltip. */
statusMessage: _propTypes.default.string
};
Loader.defaultProps = {
size: 'medium',
color: 'blue',
status: 'loading'
};
var _default = exports.default = Loader;
//# sourceMappingURL=Loader.js.map