@khanacademy/wonder-blocks-progress-spinner 1.1.25

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2018 Khan Academy
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
@@ -0,0 +1,84 @@
1
+ import { Component, createElement } from 'react';
2
+ import { StyleSheet } from 'aphrodite';
3
+ import { View, addStyle } from '@khanacademy/wonder-blocks-core';
4
+ import Color from '@khanacademy/wonder-blocks-color';
5
+
6
+ const heights = {
7
+ xsmall: 16,
8
+ small: 24,
9
+ medium: 48,
10
+ large: 96
11
+ };
12
+ const paths = {
13
+ xsmall: "M7.237.741C7.165.393 6.95.154 6.656.053A1.01 1.01 0 0 0 6.18.01c-.053.009-.053.009-.087.017C2.553.949 0 4.214 0 7.91 0 12.36 3.598 16 8 16c4.4 0 8-3.647 8-8.112a1.02 1.02 0 0 0-.118-.423.877.877 0 0 0-.808-.48.909.909 0 0 0-.81.46c-.09.151-.13.296-.146.455-.08 3.493-2.737 6.207-6.118 6.207-3.41 0-6.118-2.74-6.118-6.196 0-2.843 1.936-5.291 4.644-6.022.1-.028.224-.082.352-.177a.928.928 0 0 0 .36-.97z",
14
+ small: "M10.598.943c-.093-.449-.362-.748-.732-.875a1.314 1.314 0 0 0-.723-.033C3.83 1.417 0 6.317 0 11.864 0 18.538 5.398 24 12 24c6.598 0 12-5.471 12-12.16a1.333 1.333 0 0 0-.154-.548c-.193-.368-.544-.606-1.023-.606-.472 0-.825.229-1.035.585-.117.2-.169.39-.189.582-.124 5.472-4.294 9.73-9.599 9.73-5.349 0-9.599-4.3-9.599-9.72 0-4.46 3.036-8.299 7.28-9.444.127-.036.291-.107.458-.232.373-.28.57-.711.46-1.244z",
15
+ medium: "M44.19 23.455a1.91 1.91 0 1 1 3.801 0h.003c.004.18.006.363.006.545 0 13.255-10.745 24-24 24S0 37.255 0 24 10.745 0 24 0c.182 0 .364.002.545.006V.01a1.91 1.91 0 1 1 0 3.801v.015A20.564 20.564 0 0 0 24 3.818C12.854 3.818 3.818 12.854 3.818 24c0 11.146 9.036 20.182 20.182 20.182 11.146 0 20.182-9.036 20.182-20.182 0-.182-.003-.364-.007-.545h.015z",
16
+ large: "M88.38 46.91a3.818 3.818 0 1 1 7.602 0h.006c.008.362.012.725.012 1.09 0 26.51-21.49 48-48 48S0 74.51 0 48 21.49 0 48 0c.365 0 .728.004 1.09.012v.005a3.818 3.818 0 1 1 0 7.602v.032c-.362-.01-.725-.015-1.09-.015C25.708 7.636 7.636 25.708 7.636 48c0 22.292 18.072 40.364 40.364 40.364 22.292 0 40.364-18.072 40.364-40.364 0-.365-.005-.728-.015-1.09h.032z"
17
+ };
18
+ const colors = {
19
+ light: Color.white,
20
+ dark: Color.offBlack16
21
+ };
22
+ const StyledPath = addStyle("path");
23
+
24
+ /**
25
+ * A circular progress spinner. Used for indicating loading progress. Should
26
+ * be used by default in most places where a loading indicator is needed.
27
+ */
28
+ class CircularSpinner extends Component {
29
+ render() {
30
+ const {
31
+ size,
32
+ light,
33
+ style
34
+ } = this.props;
35
+ const height = heights[size];
36
+ const path = paths[size];
37
+ const color = light ? colors.light : colors.dark;
38
+ const svg = /*#__PURE__*/createElement("svg", {
39
+ xmlns: "http://www.w3.org/2000/svg",
40
+ width: height,
41
+ height: height,
42
+ viewBox: `0 0 ${height} ${height}`
43
+ }, /*#__PURE__*/createElement(StyledPath, {
44
+ style: [styles.loadingSpinner, {
45
+ fill: color
46
+ }],
47
+ fillRule: "nonzero",
48
+ d: path
49
+ }));
50
+ return /*#__PURE__*/createElement(View, {
51
+ style: [styles.spinnerContainer, style]
52
+ }, svg);
53
+ }
54
+
55
+ }
56
+ CircularSpinner.defaultProps = {
57
+ size: "large",
58
+ light: false
59
+ };
60
+ const rotateKeyFrames = {
61
+ "0%": {
62
+ transform: "rotate(0deg)"
63
+ },
64
+ "50%": {
65
+ transform: "rotate(180deg)"
66
+ },
67
+ "100%": {
68
+ transform: "rotate(360deg)"
69
+ }
70
+ };
71
+ const styles = StyleSheet.create({
72
+ spinnerContainer: {
73
+ justifyContent: "center"
74
+ },
75
+ loadingSpinner: {
76
+ transformOrigin: "50% 50%",
77
+ animationName: rotateKeyFrames,
78
+ animationDuration: "1.1s",
79
+ animationIterationCount: "infinite",
80
+ animationTimingFunction: "linear"
81
+ }
82
+ });
83
+
84
+ export { CircularSpinner };
package/dist/index.js ADDED
@@ -0,0 +1,222 @@
1
+ module.exports =
2
+ /******/ (function(modules) { // webpackBootstrap
3
+ /******/ // The module cache
4
+ /******/ var installedModules = {};
5
+ /******/
6
+ /******/ // The require function
7
+ /******/ function __webpack_require__(moduleId) {
8
+ /******/
9
+ /******/ // Check if module is in cache
10
+ /******/ if(installedModules[moduleId]) {
11
+ /******/ return installedModules[moduleId].exports;
12
+ /******/ }
13
+ /******/ // Create a new module (and put it into the cache)
14
+ /******/ var module = installedModules[moduleId] = {
15
+ /******/ i: moduleId,
16
+ /******/ l: false,
17
+ /******/ exports: {}
18
+ /******/ };
19
+ /******/
20
+ /******/ // Execute the module function
21
+ /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
22
+ /******/
23
+ /******/ // Flag the module as loaded
24
+ /******/ module.l = true;
25
+ /******/
26
+ /******/ // Return the exports of the module
27
+ /******/ return module.exports;
28
+ /******/ }
29
+ /******/
30
+ /******/
31
+ /******/ // expose the modules object (__webpack_modules__)
32
+ /******/ __webpack_require__.m = modules;
33
+ /******/
34
+ /******/ // expose the module cache
35
+ /******/ __webpack_require__.c = installedModules;
36
+ /******/
37
+ /******/ // define getter function for harmony exports
38
+ /******/ __webpack_require__.d = function(exports, name, getter) {
39
+ /******/ if(!__webpack_require__.o(exports, name)) {
40
+ /******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
41
+ /******/ }
42
+ /******/ };
43
+ /******/
44
+ /******/ // define __esModule on exports
45
+ /******/ __webpack_require__.r = function(exports) {
46
+ /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
47
+ /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
48
+ /******/ }
49
+ /******/ Object.defineProperty(exports, '__esModule', { value: true });
50
+ /******/ };
51
+ /******/
52
+ /******/ // create a fake namespace object
53
+ /******/ // mode & 1: value is a module id, require it
54
+ /******/ // mode & 2: merge all properties of value into the ns
55
+ /******/ // mode & 4: return value when already ns object
56
+ /******/ // mode & 8|1: behave like require
57
+ /******/ __webpack_require__.t = function(value, mode) {
58
+ /******/ if(mode & 1) value = __webpack_require__(value);
59
+ /******/ if(mode & 8) return value;
60
+ /******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
61
+ /******/ var ns = Object.create(null);
62
+ /******/ __webpack_require__.r(ns);
63
+ /******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
64
+ /******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
65
+ /******/ return ns;
66
+ /******/ };
67
+ /******/
68
+ /******/ // getDefaultExport function for compatibility with non-harmony modules
69
+ /******/ __webpack_require__.n = function(module) {
70
+ /******/ var getter = module && module.__esModule ?
71
+ /******/ function getDefault() { return module['default']; } :
72
+ /******/ function getModuleExports() { return module; };
73
+ /******/ __webpack_require__.d(getter, 'a', getter);
74
+ /******/ return getter;
75
+ /******/ };
76
+ /******/
77
+ /******/ // Object.prototype.hasOwnProperty.call
78
+ /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
79
+ /******/
80
+ /******/ // __webpack_public_path__
81
+ /******/ __webpack_require__.p = "";
82
+ /******/
83
+ /******/
84
+ /******/ // Load entry module and return exports
85
+ /******/ return __webpack_require__(__webpack_require__.s = 4);
86
+ /******/ })
87
+ /************************************************************************/
88
+ /******/ ([
89
+ /* 0 */
90
+ /***/ (function(module, exports) {
91
+
92
+ module.exports = require("react");
93
+
94
+ /***/ }),
95
+ /* 1 */
96
+ /***/ (function(module, exports) {
97
+
98
+ module.exports = require("@khanacademy/wonder-blocks-core");
99
+
100
+ /***/ }),
101
+ /* 2 */
102
+ /***/ (function(module, exports) {
103
+
104
+ module.exports = require("@khanacademy/wonder-blocks-color");
105
+
106
+ /***/ }),
107
+ /* 3 */
108
+ /***/ (function(module, exports) {
109
+
110
+ module.exports = require("aphrodite");
111
+
112
+ /***/ }),
113
+ /* 4 */
114
+ /***/ (function(module, __webpack_exports__, __webpack_require__) {
115
+
116
+ "use strict";
117
+ // ESM COMPAT FLAG
118
+ __webpack_require__.r(__webpack_exports__);
119
+
120
+ // EXPORTS
121
+ __webpack_require__.d(__webpack_exports__, "CircularSpinner", function() { return /* reexport */ circular_spinner_CircularSpinner; });
122
+
123
+ // EXTERNAL MODULE: external "react"
124
+ var external_react_ = __webpack_require__(0);
125
+
126
+ // EXTERNAL MODULE: external "aphrodite"
127
+ var external_aphrodite_ = __webpack_require__(3);
128
+
129
+ // EXTERNAL MODULE: external "@khanacademy/wonder-blocks-core"
130
+ var wonder_blocks_core_ = __webpack_require__(1);
131
+
132
+ // EXTERNAL MODULE: external "@khanacademy/wonder-blocks-color"
133
+ var wonder_blocks_color_ = __webpack_require__(2);
134
+ var wonder_blocks_color_default = /*#__PURE__*/__webpack_require__.n(wonder_blocks_color_);
135
+
136
+ // CONCATENATED MODULE: ./packages/wonder-blocks-progress-spinner/src/components/circular-spinner.js
137
+
138
+
139
+
140
+
141
+ const heights = {
142
+ xsmall: 16,
143
+ small: 24,
144
+ medium: 48,
145
+ large: 96
146
+ };
147
+ const paths = {
148
+ xsmall: "M7.237.741C7.165.393 6.95.154 6.656.053A1.01 1.01 0 0 0 6.18.01c-.053.009-.053.009-.087.017C2.553.949 0 4.214 0 7.91 0 12.36 3.598 16 8 16c4.4 0 8-3.647 8-8.112a1.02 1.02 0 0 0-.118-.423.877.877 0 0 0-.808-.48.909.909 0 0 0-.81.46c-.09.151-.13.296-.146.455-.08 3.493-2.737 6.207-6.118 6.207-3.41 0-6.118-2.74-6.118-6.196 0-2.843 1.936-5.291 4.644-6.022.1-.028.224-.082.352-.177a.928.928 0 0 0 .36-.97z",
149
+ small: "M10.598.943c-.093-.449-.362-.748-.732-.875a1.314 1.314 0 0 0-.723-.033C3.83 1.417 0 6.317 0 11.864 0 18.538 5.398 24 12 24c6.598 0 12-5.471 12-12.16a1.333 1.333 0 0 0-.154-.548c-.193-.368-.544-.606-1.023-.606-.472 0-.825.229-1.035.585-.117.2-.169.39-.189.582-.124 5.472-4.294 9.73-9.599 9.73-5.349 0-9.599-4.3-9.599-9.72 0-4.46 3.036-8.299 7.28-9.444.127-.036.291-.107.458-.232.373-.28.57-.711.46-1.244z",
150
+ medium: "M44.19 23.455a1.91 1.91 0 1 1 3.801 0h.003c.004.18.006.363.006.545 0 13.255-10.745 24-24 24S0 37.255 0 24 10.745 0 24 0c.182 0 .364.002.545.006V.01a1.91 1.91 0 1 1 0 3.801v.015A20.564 20.564 0 0 0 24 3.818C12.854 3.818 3.818 12.854 3.818 24c0 11.146 9.036 20.182 20.182 20.182 11.146 0 20.182-9.036 20.182-20.182 0-.182-.003-.364-.007-.545h.015z",
151
+ large: "M88.38 46.91a3.818 3.818 0 1 1 7.602 0h.006c.008.362.012.725.012 1.09 0 26.51-21.49 48-48 48S0 74.51 0 48 21.49 0 48 0c.365 0 .728.004 1.09.012v.005a3.818 3.818 0 1 1 0 7.602v.032c-.362-.01-.725-.015-1.09-.015C25.708 7.636 7.636 25.708 7.636 48c0 22.292 18.072 40.364 40.364 40.364 22.292 0 40.364-18.072 40.364-40.364 0-.365-.005-.728-.015-1.09h.032z"
152
+ };
153
+ const colors = {
154
+ light: wonder_blocks_color_default.a.white,
155
+ dark: wonder_blocks_color_default.a.offBlack16
156
+ };
157
+ const StyledPath = Object(wonder_blocks_core_["addStyle"])("path");
158
+
159
+ /**
160
+ * A circular progress spinner. Used for indicating loading progress. Should
161
+ * be used by default in most places where a loading indicator is needed.
162
+ */
163
+ class circular_spinner_CircularSpinner extends external_react_["Component"] {
164
+ render() {
165
+ const {
166
+ size,
167
+ light,
168
+ style
169
+ } = this.props;
170
+ const height = heights[size];
171
+ const path = paths[size];
172
+ const color = light ? colors.light : colors.dark;
173
+ const svg = /*#__PURE__*/external_react_["createElement"]("svg", {
174
+ xmlns: "http://www.w3.org/2000/svg",
175
+ width: height,
176
+ height: height,
177
+ viewBox: `0 0 ${height} ${height}`
178
+ }, /*#__PURE__*/external_react_["createElement"](StyledPath, {
179
+ style: [styles.loadingSpinner, {
180
+ fill: color
181
+ }],
182
+ fillRule: "nonzero",
183
+ d: path
184
+ }));
185
+ return /*#__PURE__*/external_react_["createElement"](wonder_blocks_core_["View"], {
186
+ style: [styles.spinnerContainer, style]
187
+ }, svg);
188
+ }
189
+
190
+ }
191
+ circular_spinner_CircularSpinner.defaultProps = {
192
+ size: "large",
193
+ light: false
194
+ };
195
+ const rotateKeyFrames = {
196
+ "0%": {
197
+ transform: "rotate(0deg)"
198
+ },
199
+ "50%": {
200
+ transform: "rotate(180deg)"
201
+ },
202
+ "100%": {
203
+ transform: "rotate(360deg)"
204
+ }
205
+ };
206
+ const styles = external_aphrodite_["StyleSheet"].create({
207
+ spinnerContainer: {
208
+ justifyContent: "center"
209
+ },
210
+ loadingSpinner: {
211
+ transformOrigin: "50% 50%",
212
+ animationName: rotateKeyFrames,
213
+ animationDuration: "1.1s",
214
+ animationIterationCount: "infinite",
215
+ animationTimingFunction: "linear"
216
+ }
217
+ });
218
+ // CONCATENATED MODULE: ./packages/wonder-blocks-progress-spinner/src/index.js
219
+
220
+
221
+ /***/ })
222
+ /******/ ]);
@@ -0,0 +1,2 @@
1
+ // @flow
2
+ export * from "../src/index.js";
package/docs.md ADDED
@@ -0,0 +1,7 @@
1
+ Progress spinners to be used when indicating that some piece of content is loading. They come in three sizes (default, small, and xsmall) and also in light and dark varities. By default `CircularSpinner` should be used for most loading indicators.
2
+
3
+ ```js
4
+ import {CircularSpinner} from "@khanacademy/wonder-blocks-progress-spinner";
5
+
6
+ <CircularSpinner />
7
+ ```
package/package.json ADDED
@@ -0,0 +1,31 @@
1
+ {
2
+ "name": "@khanacademy/wonder-blocks-progress-spinner",
3
+ "version": "1.1.25",
4
+ "design": "v1",
5
+ "publishConfig": {
6
+ "access": "public"
7
+ },
8
+ "description": "",
9
+ "main": "dist/index.js",
10
+ "module": "dist/es/index.js",
11
+ "source": "src/index.js",
12
+ "scripts": {
13
+ "test": "echo \"Error: no test specified\" && exit 1"
14
+ },
15
+ "author": "",
16
+ "license": "MIT",
17
+ "dependencies": {
18
+ "@babel/runtime": "^7.13.10",
19
+ "@khanacademy/wonder-blocks-color": "^1.1.18",
20
+ "@khanacademy/wonder-blocks-core": "^3.1.4",
21
+ "@khanacademy/wonder-blocks-spacing": "^3.0.3"
22
+ },
23
+ "peerDependencies": {
24
+ "aphrodite": "^1.2.5",
25
+ "react": "^16.4.1"
26
+ },
27
+ "devDependencies": {
28
+ "wb-dev-build-settings": "^0.1.0"
29
+ },
30
+ "gitHead": "8022bb419eed74be37f71f71c7621854794a731c"
31
+ }