@onepercentio/one-ui 0.9.13 → 0.10.0
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/dist/components/MutableHamburgerButton/MutableHamburgerButton.d.ts +1 -1
- package/dist/components/MutableHamburgerButton/MutableHamburgerButton.js.map +1 -1
- package/dist/components/MutableHamburgerButton/MutableHamburgerButton.module.scss +32 -0
- package/dist/components/Skeleton/Skeleton.d.ts +10 -0
- package/dist/components/Skeleton/Skeleton.js +22 -0
- package/dist/components/Skeleton/Skeleton.js.map +1 -0
- package/dist/components/Skeleton/Skeleton.module.scss +20 -0
- package/dist/components/Skeleton/index.d.ts +1 -0
- package/dist/components/Skeleton/index.js +9 -0
- package/dist/components/Skeleton/index.js.map +1 -0
- package/dist/hooks/usePagination.js +3 -0
- package/dist/hooks/usePagination.js.map +1 -1
- package/package.json +1 -1
|
@@ -3,6 +3,6 @@ import React from "react";
|
|
|
3
3
|
* A hamburger button that mutates according to it's state
|
|
4
4
|
**/
|
|
5
5
|
export default function MutableHamburgerButton({ state, size, className, ...props }: {
|
|
6
|
-
state?: "default" | "closed" | "arrow-up" | "arrow-down" | "search" | "loading" | "checkmark";
|
|
6
|
+
state?: "default" | "closed" | "arrow-up" | "arrow-down" | "search" | "loading" | "checkmark" | "pencil";
|
|
7
7
|
size: number;
|
|
8
8
|
} & React.HTMLProps<HTMLDivElement>): JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MutableHamburgerButton.js","sourceRoot":"","sources":["../../../src/components/MutableHamburgerButton/MutableHamburgerButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,8GAA0D;AAE1D;;IAEI;AACJ,SAAwB,sBAAsB,CAAC,
|
|
1
|
+
{"version":3,"file":"MutableHamburgerButton.js","sourceRoot":"","sources":["../../../src/components/MutableHamburgerButton/MutableHamburgerButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,8GAA0D;AAE1D;;IAEI;AACJ,SAAwB,sBAAsB,CAAC,EAgBZ;QAhBY,EAC7C,KAAK,GAAG,SAAS,EACjB,IAAI,EACJ,SAAS,GAAG,EAAE,OAamB,EAZ9B,KAAK,cAJqC,8BAK9C,CADS;IAaR,OAAO,CACL,uDACM,KAAK,IACT,SAAS,EAAE,GAAG,4CAAM,CAAC,SAAS,IAAI,4CAAM,CAAC,KAAK,CAAC,IAAI,SAAS,EAAE,EAC9D,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,IAAI,IAAI,EAAE;QAEhC,0CAAO;QACP,0CAAO;QACP,0CAAO,CACH,CACP,CAAC;AACJ,CAAC;AA5BD,yCA4BC"}
|
|
@@ -176,4 +176,36 @@ $slice: math.div(1, 7);
|
|
|
176
176
|
top: (-#{$slice * 4.5}em);
|
|
177
177
|
}
|
|
178
178
|
}
|
|
179
|
+
&.pencil {
|
|
180
|
+
perspective: 600px;
|
|
181
|
+
|
|
182
|
+
> :nth-child(1) {
|
|
183
|
+
height: #{$slice}em;
|
|
184
|
+
width: 0.15em;
|
|
185
|
+
transform: translateX(0.3em) rotate(-45deg);
|
|
186
|
+
border-bottom-left-radius: 0;
|
|
187
|
+
border-top-left-radius: 0;
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
> :nth-child(2) {
|
|
191
|
+
width: 0.6em;
|
|
192
|
+
transform: rotate(-45deg);
|
|
193
|
+
border-radius: 0;
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
> :nth-child(3) {
|
|
197
|
+
$slice: $slice * 0.6;
|
|
198
|
+
|
|
199
|
+
height: 0em;
|
|
200
|
+
width: 0em;
|
|
201
|
+
border-radius: 0;
|
|
202
|
+
transform: translateX(-0.27em) translateY(0.027em) rotate(-80deg) rotateY(45deg) skew(12deg, 12deg);
|
|
203
|
+
|
|
204
|
+
border-left: #{$slice}em solid transparent;
|
|
205
|
+
border-right: #{$slice}em solid transparent;
|
|
206
|
+
border-bottom: 0em solid transparent;
|
|
207
|
+
border-top: #{$slice}em solid;
|
|
208
|
+
background-color: transparent;
|
|
209
|
+
}
|
|
210
|
+
}
|
|
179
211
|
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* A skeleton element used to display a content that is loading
|
|
3
|
+
*
|
|
4
|
+
* Usually, it is used for paragraph elements, with a specific size
|
|
5
|
+
* So it's width and height is translated to em units
|
|
6
|
+
**/
|
|
7
|
+
export default function Skeleton({ width, height, }: {
|
|
8
|
+
width: number;
|
|
9
|
+
height?: number;
|
|
10
|
+
}): JSX.Element;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
const react_1 = __importDefault(require("react"));
|
|
7
|
+
const Skeleton_module_scss_1 = __importDefault(require("./Skeleton.module.scss"));
|
|
8
|
+
/**
|
|
9
|
+
* A skeleton element used to display a content that is loading
|
|
10
|
+
*
|
|
11
|
+
* Usually, it is used for paragraph elements, with a specific size
|
|
12
|
+
* So it's width and height is translated to em units
|
|
13
|
+
**/
|
|
14
|
+
function Skeleton({ width, height = 1, }) {
|
|
15
|
+
return (react_1.default.createElement("div", { className: Skeleton_module_scss_1.default.root, style: {
|
|
16
|
+
"--biggest-unit": `${Math.max(width, height) * 2}em`,
|
|
17
|
+
width: `${width}em`,
|
|
18
|
+
height: `${height}em`,
|
|
19
|
+
} }));
|
|
20
|
+
}
|
|
21
|
+
exports.default = Skeleton;
|
|
22
|
+
//# sourceMappingURL=Skeleton.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../../../src/components/Skeleton/Skeleton.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAC1B,kFAA4C;AAE5C;;;;;IAKI;AACJ,SAAwB,QAAQ,CAAC,EAC/B,KAAK,EACL,MAAM,GAAG,CAAC,GAIX;IACC,OAAO,CACL,uCACE,SAAS,EAAE,8BAAM,CAAC,IAAI,EACtB,KAAK,EACH;YACE,gBAAgB,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,MAAM,CAAC,GAAG,CAAC,IAAI;YACpD,KAAK,EAAE,GAAG,KAAK,IAAI;YACnB,MAAM,EAAE,GAAG,MAAM,IAAI;SACf,GAEV,CACH,CAAC;AACJ,CAAC;AAnBD,2BAmBC"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
@import "../../assets/styles";
|
|
2
|
+
|
|
3
|
+
.root {
|
|
4
|
+
background: linear-gradient(10deg, #0000 10%, #0006, #0000 80%);
|
|
5
|
+
background-size: var(--biggest-unit) var(--biggest-unit);
|
|
6
|
+
animation-name: moving;
|
|
7
|
+
animation-duration: $slow;
|
|
8
|
+
animation-iteration-count: infinite;
|
|
9
|
+
animation-timing-function: linear;
|
|
10
|
+
border-radius: 0.4em;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
@keyframes moving {
|
|
14
|
+
0% {
|
|
15
|
+
background-position: 0em 0em;
|
|
16
|
+
}
|
|
17
|
+
100% {
|
|
18
|
+
background-position: 0em var(--biggest-unit);
|
|
19
|
+
}
|
|
20
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from './Skeleton';
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var Skeleton_1 = require("./Skeleton");
|
|
8
|
+
Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Skeleton_1).default; } });
|
|
9
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Skeleton/index.tsx"],"names":[],"mappings":";;;;;;AAAA,uCAAqC;AAA5B,oHAAA,OAAO,OAAA"}
|
|
@@ -38,6 +38,9 @@ function usePagination(request, paginationId = () => "default") {
|
|
|
38
38
|
const _requestPage = (0, react_1.useCallback)(function (page, ...args) {
|
|
39
39
|
const id = paginationId(...args);
|
|
40
40
|
process(() => __awaiter(this, void 0, void 0, function* () {
|
|
41
|
+
var _a;
|
|
42
|
+
if ((_a = paginationData[id]) === null || _a === void 0 ? void 0 : _a.finished)
|
|
43
|
+
return;
|
|
41
44
|
const result = yield request(page, (items === null || items === void 0 ? void 0 : items[0]) === id && page !== 0 ? items === null || items === void 0 ? void 0 : items[1] : undefined, ...args);
|
|
42
45
|
paginationData[id] = {
|
|
43
46
|
finished: result.finished,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"usePagination.js","sourceRoot":"","sources":["../../src/hooks/usePagination.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,iCAOe;AACf,wEAAgD;AAChD,+DAAuC;AAQvC,SAAwB,aAAa,CACnC,OAA6E,EAC7E,eAAuC,GAAG,EAAE,CAAC,SAAS;IAEtD,MAAM,iBAAiB,GAAG,IAAA,cAAM,EAO7B,EAAE,CAAC,CAAC;IACP,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,GAAG,iBAAiB,CAAC;IAEtD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GACrB,IAAA,gBAAQ,GAAyD,CAAC;IACpE,MAAM,KAA0B,IAAA,yBAAe,GAAE,EAA3C,EAAE,OAAO,OAAkC,EAA7B,OAAO,cAArB,WAAuB,CAAoB,CAAC;IAElD,SAAS,WAAW,CAAC,EAA8C;QACjE,QAAQ,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAK,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,IAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACjD,CAAC;IAED,MAAM,YAAY,GAAG,IAAA,mBAAW,EAC9B,UAAU,IAAY,EAAE,GAAG,IAAO;QAChC,MAAM,EAAE,GAAG,YAAY,CAAC,GAAG,IAAI,CAAC,CAAC;QACjC,OAAO,CAAC,GAAS,EAAE
|
|
1
|
+
{"version":3,"file":"usePagination.js","sourceRoot":"","sources":["../../src/hooks/usePagination.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@onepercentio/one-ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.10.0",
|
|
4
4
|
"description": "A set of reusable components created through the development of Onepercent projects",
|
|
5
5
|
"repository": "git@github.com:onepercentio/one-ui.git",
|
|
6
6
|
"author": "Murilo Oliveira de Araujo <muritavo@outlook.com>",
|