@eleventheye/asui 2.7.1 → 2.7.2
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/apptypes/ASUI.types.d.ts +1 -0
- package/dist/apptypes/ASUI.types.d.ts.map +1 -1
- package/dist/asiconbutton/ASIconButton.d.ts.map +1 -1
- package/dist/asiconbutton/ASIconButton.js +28 -5
- package/dist/asiconbutton/styles.d.ts.map +1 -1
- package/dist/asiconbutton/styles.js +20 -3
- package/dist/asnavbar/ASNavBar.types.d.ts +2 -2
- package/dist/asnavbar/ASNavBar.types.d.ts.map +1 -1
- package/dist/asnavbar/desktop/ASNavBarDW.d.ts.map +1 -1
- package/dist/asnavbar/desktop/ASNavBarDW.js +15 -1
- package/dist/asnavbar/desktop/styles.js +3 -3
- package/dist/asnavbar/mobile/ASNavBarMW.d.ts.map +1 -1
- package/dist/asnavbar/mobile/ASNavBarMW.js +10 -2
- package/dist/asnavbar/mobile/styles.d.ts +1 -27
- package/dist/asnavbar/mobile/styles.d.ts.map +1 -1
- package/dist/asnavbar/mobile/styles.js +2 -89
- package/dist/asnavbar/navbararrowbuttons/ASNavBarArrowButtons.d.ts.map +1 -1
- package/dist/asnavbar/navbararrowbuttons/ASNavBarArrowButtons.js +2 -2
- package/dist/asnavbar/navbararrowbuttons/ASNavBarArrowButtons.types.d.ts +2 -2
- package/dist/asnavbar/navbararrowbuttons/ASNavBarArrowButtons.types.d.ts.map +1 -1
- package/dist/asnavbar/navbararrowbuttons/styles.d.ts.map +1 -1
- package/dist/asnavbar/navbararrowbuttons/styles.js +2 -2
- package/dist/asnavbar/navbaritem/ASNavBarItem.d.ts.map +1 -1
- package/dist/asnavbar/navbaritem/ASNavBarItem.js +1 -1
- package/dist/asnavbar/navbaritem/styles.d.ts.map +1 -1
- package/dist/asnavbar/navbaritem/styles.js +1 -0
- package/dist/asnavbar/navbarpickpanel/ASNavBarPickPanel.d.ts.map +1 -1
- package/dist/asnavbar/navbarpickpanelitem/ASNavBarPickPanelItem.d.ts.map +1 -1
- package/dist/asnavbar/navbarpickpanelitem/ASNavBarPickPanelItem.js +21 -1
- package/dist/astheme/ASThemeDefault.d.ts.map +1 -1
- package/dist/astheme/ASThemeDefault.js +7 -6
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ASUI.types.d.ts","sourceRoot":"","sources":["../../src/apptypes/ASUI.types.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU;;;;;;;CAOb,CAAC;AACX,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,OAAO,UAAU,CAAC,CAAC;AAExE,eAAO,MAAM,aAAa;;;;CAIhB,CAAC;AACX,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,OAAO,aAAa,CAAC,CAAC;AAEjF,KAAK,kBAAkB,GAAG,CAAC,eAAe,EAAE,eAAe,CAAC,CAAC;AAC7D,KAAK,mBAAmB,GAAG,CAAC,eAAe,EAAE,eAAe,EAAE,eAAe,CAAC,CAAC;AAC/E,KAAK,iBAAiB,GAAG,CAAC,eAAe,EAAE,eAAe,EAAE,eAAe,EAAE,eAAe,CAAC,CAAC;AAC9F,MAAM,MAAM,aAAa,GAAG,eAAe,GAAG,kBAAkB,GAAG,mBAAmB,GAAG,iBAAiB,CAAC;AAE3G,eAAO,MAAM,UAAU;;;;CAIb,CAAC;AAEX,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,OAAO,UAAU,CAAC,CAAC;AAExE,eAAO,MAAM,oBAAoB;;;CAGvB,CAAC;AAEX,MAAM,MAAM,oBAAoB,GAAG,CAAC,OAAO,oBAAoB,CAAC,CAAC,MAAM,OAAO,oBAAoB,CAAC,CAAC;AAEpG,MAAM,MAAM,aAAa,GAAG;KACzB,GAAG,IAAI,eAAe,GAAG,MAAM;CACjC,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,oBAAoB,EAAE,MAAM,CAAC;IAC7B,eAAe,EAAE,MAAM,CAAC;IACxB,gBAAgB,EAAE,MAAM,CAAC;IACzB,eAAe,EAAE,MAAM,CAAC;IACxB,qBAAqB,EAAE,MAAM,CAAC;IAC9B,oBAAoB,EAAE,MAAM,CAAC;IAE7B,qBAAqB,EAAE,MAAM,CAAC;IAC9B,0BAA0B,EAAE,MAAM,CAAC;IACnC,2BAA2B,EAAE,MAAM,CAAC;IAEpC,mBAAmB,EAAE,MAAM,CAAC;IAC5B,mBAAmB,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,gBAAgB,EAAE,MAAM,CAAC;IACzB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,wBAAwB,EAAE,MAAM,CAAC;IACjC,yBAAyB,EAAE,MAAM,CAAC;IAClC,wBAAwB,EAAE,MAAM,CAAC;IACjC,yBAAyB,EAAE,MAAM,CAAC;IAClC,0BAA0B,EAAE,MAAM,CAAC;IACnC,yBAAyB,EAAE,MAAM,CAAC;IAClC,kBAAkB,EAAE,MAAM,CAAC;IAC3B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,MAAM,CAAC;IACzB,QAAQ,EAAE,MAAM,CAAC;IACjB,gBAAgB,EAAE,MAAM,CAAC;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,gBAAgB,EAAE,MAAM,CAAC;IACzB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,mBAAmB,EAAE,MAAM,CAAC;IAC5B,eAAe,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,EAAE,MAAM,CAAC;IACvB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,qBAAqB,EAAE,MAAM,CAAC;IAC9B,mBAAmB,EAAE,MAAM,CAAC;IAC5B,eAAe,EAAE,MAAM,CAAC;IACxB,gBAAgB,EAAE,MAAM,CAAC;IACzB,cAAc,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,kBAAkB,EAAE,MAAM,CAAC;IAC3B,oBAAoB,EAAE,MAAM,CAAC;IAC7B,kBAAkB,EAAE,MAAM,CAAC;IAC3B,0BAA0B,EAAE,MAAM,CAAC;IACnC,2BAA2B,EAAE,MAAM,CAAC;IACpC,0BAA0B,EAAE,MAAM,CAAC;IACnC,2BAA2B,EAAE,MAAM,CAAC;IACpC,4BAA4B,EAAE,MAAM,CAAC;IACrC,2BAA2B,EAAE,MAAM,CAAC;IACpC,oBAAoB,EAAE,MAAM,CAAC;IAC7B,mBAAmB,EAAE,MAAM,CAAC;IAC5B,eAAe,EAAE,MAAM,CAAC;IACxB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,uBAAuB,EAAE,MAAM,CAAC;IAChC,UAAU,EAAE,MAAM,CAAC;IACnB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,aAAa,EAAE,MAAM,CAAC;IACtB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,qBAAqB,EAAE,MAAM,CAAC;IAC9B,qBAAqB,EAAE,MAAM,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,WAAW,EAAE,MAAM,CAAC;IACpB,qBAAqB,EAAE,MAAM,CAAC;IAC9B,eAAe,EAAE,MAAM,CAAC;IACxB,gCAAgC,EAAE,MAAM,CAAC;IACzC,eAAe,EAAE,MAAM,CAAC;IACxB,oBAAoB,EAAE,MAAM,CAAC;IAC7B,uBAAuB,EAAE,MAAM,CAAC;CACjC,CAAC;AAEF,MAAM,WAAW,OAAO;IACtB,MAAM,EAAE,aAAa,CAAC;IACtB,SAAS,EAAE,gBAAgB,CAAC;IAC5B,QAAQ,EAAE,eAAe,CAAC;IAC1B,MAAM,EAAE,aAAa,CAAC;IACtB,MAAM,EAAE,aAAa,CAAC;IACtB,MAAM,EAAE,YAAY,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,kBAAkB,EAAE,MAAM,CAAC;CAC5B;AAED,eAAO,MAAM,WAAW;;;;CAId,CAAC;AACX,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,OAAO,WAAW,CAAC,CAAC;AAE3E,MAAM,WAAW,cAAc;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,oBAAqB,SAAQ,cAAc;IAM1D,oBAAoB,EAAE,aAAa,CAAC;IAOpC,iBAAiB,EAAE,MAAM,CAAC;IAO1B,sCAAsC,EAAE,OAAO,CAAC;IAMhD,wBAAwB,EAAE,OAAO,CAAC;IAMlC,4BAA4B,EAAE,OAAO,CAAC;CACvC"}
|
|
1
|
+
{"version":3,"file":"ASUI.types.d.ts","sourceRoot":"","sources":["../../src/apptypes/ASUI.types.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ASIconButton.d.ts","sourceRoot":"","sources":["../../src/asiconbutton/ASIconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"ASIconButton.d.ts","sourceRoot":"","sources":["../../src/asiconbutton/ASIconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoD,MAAM,OAAO,CAAC;AAGzE,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAIzD,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAsG7C,CAAC;AAEF,eAAe,YAAY,CAAC"}
|
|
@@ -7,14 +7,37 @@ const ASUI_types_1 = require("../apptypes/ASUI.types");
|
|
|
7
7
|
const astheme_1 = tslib_1.__importDefault(require("../astheme"));
|
|
8
8
|
const styles_1 = require("./styles");
|
|
9
9
|
const ASIconButton = ({ className = '', onClick = () => undefined, selected = false, toggle = false, size = ASUI_types_1.ComponentSize.Medium, iconSize = size === ASUI_types_1.ComponentSize.Small ? 24 : size === ASUI_types_1.ComponentSize.Medium ? 28 : 40, paddingSize = [ASUI_types_1.ComponentSize.Medium, ASUI_types_1.ComponentSize.Medium], disabled = false, isLoading = false, icon: Icon, theme = astheme_1.default, strokeWidth = 1, strokeColor = astheme_1.default.button.buttonBg, fillColor = astheme_1.default.button.buttonColor, color = astheme_1.default.button.buttonColor, text, id, style, ...props }) => {
|
|
10
|
+
const tapDebounceRef = (0, react_1.useRef)('None');
|
|
10
11
|
const [isSelected, setIsSelected] = (0, react_1.useState)(selected);
|
|
11
12
|
(0, react_1.useEffect)(() => {
|
|
12
13
|
setIsSelected(selected);
|
|
13
14
|
}, [selected]);
|
|
14
|
-
const
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
15
|
+
const clsR = 'background: crimson; color: #000000; border-radius: 10px;';
|
|
16
|
+
const clsY = 'background: goldenrod; color: #000000; border-radius: 10px;';
|
|
17
|
+
const clsG = 'background: forestgreen; color: #000000; border-radius: 10px;';
|
|
18
|
+
const onTap = (e) => {
|
|
19
|
+
if (tapDebounceRef.current === 'None') {
|
|
20
|
+
tapDebounceRef.current = 'Down';
|
|
21
|
+
console.log(`%c ${tapDebounceRef.current} %c`, clsR, '');
|
|
22
|
+
const btnEl = e.currentTarget;
|
|
23
|
+
btnEl.ariaPressed = 'true';
|
|
24
|
+
if (toggle)
|
|
25
|
+
setIsSelected(!isSelected);
|
|
26
|
+
onClick(e);
|
|
27
|
+
btnEl.releasePointerCapture(e.pointerId);
|
|
28
|
+
}
|
|
29
|
+
};
|
|
30
|
+
const onTapRelease = (e) => {
|
|
31
|
+
if (tapDebounceRef.current === 'Down') {
|
|
32
|
+
tapDebounceRef.current = 'Up';
|
|
33
|
+
const btnEl = e.currentTarget;
|
|
34
|
+
console.log(`%c ${tapDebounceRef.current} %c`, clsY, '');
|
|
35
|
+
setTimeout(() => {
|
|
36
|
+
btnEl.ariaPressed = 'false';
|
|
37
|
+
tapDebounceRef.current = 'None';
|
|
38
|
+
console.log(`%c ${tapDebounceRef.current} %c`, clsG, '');
|
|
39
|
+
}, 400);
|
|
40
|
+
}
|
|
18
41
|
};
|
|
19
42
|
const onEnableDisableHandler = (node) => {
|
|
20
43
|
if (node) {
|
|
@@ -26,6 +49,6 @@ const ASIconButton = ({ className = '', onClick = () => undefined, selected = fa
|
|
|
26
49
|
}
|
|
27
50
|
}
|
|
28
51
|
};
|
|
29
|
-
return ((0, jsx_runtime_1.jsx)(styles_1.ASIconButtonStyled, { theme: theme, role: "button", ref: onEnableDisableHandler, size: size, "aria-disabled": isLoading ? 'true' : disabled.toString(), className: `${className} ${size} ${isSelected ? 'Selected' : ''}`,
|
|
52
|
+
return ((0, jsx_runtime_1.jsx)(styles_1.ASIconButtonStyled, { theme: theme, role: "button", ref: onEnableDisableHandler, size: size, "aria-disabled": isLoading ? 'true' : disabled.toString(), className: `${className} ${size} ${isSelected ? 'Selected' : ''}`, onPointerUp: onTapRelease, onPointerDown: onTap, style: style, id: id, ...props, children: (0, jsx_runtime_1.jsx)(Icon, { iconSize: iconSize, fillColor: fillColor, color: strokeColor, strokeWidth: strokeWidth }) }));
|
|
30
53
|
};
|
|
31
54
|
exports.default = ASIconButton;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/asiconbutton/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAElE,eAAO,MAAM,kBAAkB;WAAuB,OAAO;UAAQ,eAAe;
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/asiconbutton/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAElE,eAAO,MAAM,kBAAkB;WAAuB,OAAO;UAAQ,eAAe;YA8LnF,CAAC"}
|
|
@@ -10,7 +10,7 @@ exports.ASIconButtonStyled = styled_components_1.default.div `
|
|
|
10
10
|
aspect-ratio: 1;
|
|
11
11
|
cursor: pointer;
|
|
12
12
|
white-space: nowrap;
|
|
13
|
-
transition: all 0.
|
|
13
|
+
transition: all 0.15s ease-in-out;
|
|
14
14
|
position: relative;
|
|
15
15
|
display: inline-block;
|
|
16
16
|
border-radius: 75px;
|
|
@@ -21,6 +21,7 @@ exports.ASIconButtonStyled = styled_components_1.default.div `
|
|
|
21
21
|
text-transform: uppercase;
|
|
22
22
|
text-align: center;
|
|
23
23
|
-webkit-tap-highlight-color: transparent;
|
|
24
|
+
pointer-events: auto;
|
|
24
25
|
|
|
25
26
|
&.ASLarge,
|
|
26
27
|
&.ASMedium,
|
|
@@ -57,6 +58,7 @@ exports.ASIconButtonStyled = styled_components_1.default.div `
|
|
|
57
58
|
&.ASSmall {
|
|
58
59
|
font-size: 1rem;
|
|
59
60
|
line-height: 1.875rem;
|
|
61
|
+
min-height: 30px;
|
|
60
62
|
& > div > :last-child(svg) {
|
|
61
63
|
min-height: 24px;
|
|
62
64
|
max-height: 24px;
|
|
@@ -100,10 +102,12 @@ exports.ASIconButtonStyled = styled_components_1.default.div `
|
|
|
100
102
|
}
|
|
101
103
|
|
|
102
104
|
&:active,
|
|
105
|
+
&:focus,
|
|
103
106
|
&.Selected {
|
|
104
|
-
&:not([aria-disabled='true']) {
|
|
107
|
+
&:not([aria-disabled='true'])&:not([aria-pressed='false']) {
|
|
105
108
|
user-select: none;
|
|
106
109
|
background: ${({ theme }) => theme.button.buttonGradientUp};
|
|
110
|
+
box-shadow: ${({ theme, size }) => theme.button[`buttonShadowActive${size}`]};
|
|
107
111
|
color: transparent;
|
|
108
112
|
text-shadow: none;
|
|
109
113
|
}
|
|
@@ -152,12 +156,25 @@ exports.ASIconButtonStyled = styled_components_1.default.div `
|
|
|
152
156
|
text-shadow: none;
|
|
153
157
|
}
|
|
154
158
|
}
|
|
159
|
+
|
|
160
|
+
&:active,
|
|
161
|
+
&.Selected {
|
|
162
|
+
&:not([aria-disabled='true']),
|
|
163
|
+
&:is([aria-pressed='true']) {
|
|
164
|
+
box-shadow: ${({ theme, size }) => theme.button[`buttonShadowActive${size}`]};
|
|
165
|
+
}
|
|
166
|
+
}
|
|
155
167
|
}
|
|
156
168
|
|
|
169
|
+
&:focus,
|
|
157
170
|
&:active,
|
|
158
171
|
&.Selected {
|
|
159
|
-
&:
|
|
172
|
+
&:is([aria-pressed='true']) {
|
|
160
173
|
box-shadow: ${({ theme, size }) => theme.button[`buttonShadowActive${size}`]};
|
|
174
|
+
-webkit-tap-highlight-color: grey;
|
|
175
|
+
& > div {
|
|
176
|
+
scale: 0.95;
|
|
177
|
+
}
|
|
161
178
|
}
|
|
162
179
|
}
|
|
163
180
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { PointerEvent, PropsWithChildren } from 'react';
|
|
2
2
|
import { ASComponentSize, ASNavBarStyleOptions, ASTheme } from '../apptypes';
|
|
3
3
|
export type ASNavBarItemType = {
|
|
4
4
|
itemId: string;
|
|
@@ -17,7 +17,7 @@ export type ASNavBarItemProps = {
|
|
|
17
17
|
itemIndex?: number;
|
|
18
18
|
size?: ASComponentSize;
|
|
19
19
|
title?: string;
|
|
20
|
-
onItemClick?: (e:
|
|
20
|
+
onItemClick?: (e: PointerEvent, id: string, index: number) => void;
|
|
21
21
|
onItemResized?: (id: string, element: HTMLDivElement) => void;
|
|
22
22
|
};
|
|
23
23
|
export type ASNavBarOwnProps = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ASNavBar.types.d.ts","sourceRoot":"","sources":["../../src/asnavbar/ASNavBar.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"ASNavBar.types.d.ts","sourceRoot":"","sources":["../../src/asnavbar/ASNavBar.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,oBAAoB,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE7E,MAAM,MAAM,gBAAgB,GAAG;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,eAAe,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnE,aAAa,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,cAAc,KAAK,IAAI,CAAC;CAC/D,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC9B,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,YAAY,CAAC,EAAE,oBAAoB,CAAC;IACpC,cAAc,CAAC,EAAE,oBAAoB,CAAC;IACtC,cAAc,CAAC,EAAE,oBAAoB,CAAC;CACvC,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,iBAAiB,CAAC,gBAAgB,CAAC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ASNavBarDW.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/desktop/ASNavBarDW.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"ASNavBarDW.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/desktop/ASNavBarDW.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0E,MAAM,OAAO,CAAC;AAI/F,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAQ9D,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA4IvC,CAAC;AAEF,eAAe,UAAU,CAAC"}
|
|
@@ -13,12 +13,14 @@ const styles_1 = require("./styles");
|
|
|
13
13
|
const INIT_VALUE = (0, uuid_1.v4)();
|
|
14
14
|
const ASNavBarDW = ({ id = `asnavbar-dw-${(0, uuid_1.v4)()}`, className = '', navItems = [], selectedItemId = '', onItemSelected = () => undefined, theme = astheme_1.default, size = ASUI_types_1.ComponentSize.Medium, styleOptions = { ...ASNavBar_1.defaultNavBarStyleOptions }, }) => {
|
|
15
15
|
const selectedItemIdRef = (0, react_1.useRef)(INIT_VALUE);
|
|
16
|
+
const selectedItemElRef = (0, react_1.useRef)(null);
|
|
16
17
|
const navBarRef = (0, react_1.useRef)(null);
|
|
17
18
|
const navBarHighlightBoxRef = (0, react_1.useRef)(null);
|
|
18
19
|
const [selected, setSelected] = (0, react_1.useState)(selectedItemId);
|
|
19
20
|
const slideHighlightToSelectedItem = (selectedItemEl, itemId) => {
|
|
20
21
|
if (!navBarHighlightBoxRef.current || !navBarRef.current)
|
|
21
22
|
return;
|
|
23
|
+
selectedItemElRef.current = selectedItemEl;
|
|
22
24
|
const selectedElRect = selectedItemEl.getBoundingClientRect();
|
|
23
25
|
const parentRect = navBarRef.current.getBoundingClientRect();
|
|
24
26
|
const offsetToSelectedEl = selectedElRect.left - parentRect.left;
|
|
@@ -34,6 +36,18 @@ const ASNavBarDW = ({ id = `asnavbar-dw-${(0, uuid_1.v4)()}`, className = '', na
|
|
|
34
36
|
inline: 'center',
|
|
35
37
|
});
|
|
36
38
|
};
|
|
39
|
+
const onScrollEndHandler = () => {
|
|
40
|
+
if (!navBarHighlightBoxRef.current || !navBarRef.current || !selectedItemElRef.current)
|
|
41
|
+
return;
|
|
42
|
+
const selectedItemEl = selectedItemElRef.current;
|
|
43
|
+
const selectedElRect = selectedItemEl.getBoundingClientRect();
|
|
44
|
+
const parentRect = navBarRef.current.getBoundingClientRect();
|
|
45
|
+
const offsetToSelectedEl = selectedElRect.left - parentRect.left;
|
|
46
|
+
const selectedBox = navBarHighlightBoxRef.current;
|
|
47
|
+
const selectedBoxWidth = selectedElRect.width;
|
|
48
|
+
selectedBox.style.transform = `translateX(${offsetToSelectedEl}px)`;
|
|
49
|
+
selectedBox.style.width = `${selectedBoxWidth}px`;
|
|
50
|
+
};
|
|
37
51
|
const locateSelectedItemInDOM = (selectedId) => {
|
|
38
52
|
const selectedItemEl = document.getElementById(selectedId);
|
|
39
53
|
if (selectedItemEl) {
|
|
@@ -82,6 +96,6 @@ const ASNavBarDW = ({ id = `asnavbar-dw-${(0, uuid_1.v4)()}`, className = '', na
|
|
|
82
96
|
};
|
|
83
97
|
const onItemResizedHandler = (itemId, item) => slideHighlightToSelectedItem(item, itemId);
|
|
84
98
|
const isSelected = (itemId) => selected === itemId;
|
|
85
|
-
return ((0, jsx_runtime_1.jsxs)(styles_1.ASNavBarDWStyled, { id: id, ref: navBarRef, className: `${className} ${size}`, theme: theme, ...styleOptions, children: [(0, jsx_runtime_1.jsx)(styles_1.ASSelectedBoxStyled, { ref: navBarHighlightBoxRef, theme: theme }), (0, jsx_runtime_1.jsx)(styles_1.ASScrollContainerStyled, { children: navItems.map((item, index) => ((0, jsx_runtime_1.jsx)(navbaritem_1.default, { theme: theme, itemId: item.itemId, selected: isSelected(item.itemId), displayText: item.displayText, icon: item.icon, onItemResized: onItemResizedHandler, onItemClick: onItemSelectedHandler, size: size }, `key_${index}_${item.itemId}`))) }), (0, jsx_runtime_1.jsx)(navbararrowbuttons_1.default, { onArrowButtonClicked: scrollToDirection, className: styles_1.ASNavButtonsDWContainer, theme: theme, size: size, totalItemCount: totalItemCount, selectedIndex: selectedIndex, styleOptions: styleOptions })] }));
|
|
99
|
+
return ((0, jsx_runtime_1.jsxs)(styles_1.ASNavBarDWStyled, { id: id, ref: navBarRef, className: `${className} ${size}`, theme: theme, ...styleOptions, children: [(0, jsx_runtime_1.jsx)(styles_1.ASSelectedBoxStyled, { ref: navBarHighlightBoxRef, theme: theme }), (0, jsx_runtime_1.jsx)(styles_1.ASScrollContainerStyled, { onScrollEnd: onScrollEndHandler, children: navItems.map((item, index) => ((0, jsx_runtime_1.jsx)(navbaritem_1.default, { theme: theme, itemId: item.itemId, selected: isSelected(item.itemId), displayText: item.displayText, icon: item.icon, onItemResized: onItemResizedHandler, onItemClick: onItemSelectedHandler, size: size }, `key_${index}_${item.itemId}`))) }), (0, jsx_runtime_1.jsx)(navbararrowbuttons_1.default, { onArrowButtonClicked: scrollToDirection, className: styles_1.ASNavButtonsDWContainer, theme: theme, size: size, totalItemCount: totalItemCount, selectedIndex: selectedIndex, styleOptions: styleOptions })] }));
|
|
86
100
|
};
|
|
87
101
|
exports.default = ASNavBarDW;
|
|
@@ -50,8 +50,8 @@ exports.ASSelectedBoxStyled = styled_components_1.default.span `
|
|
|
50
50
|
background-color: ${({ theme }) => theme.navbar.navBarSelectedBoxBackgroundColor};
|
|
51
51
|
z-index: 0;
|
|
52
52
|
left: 0;
|
|
53
|
-
will-change: width, transform;
|
|
54
|
-
transition: all 0.25s ease-in-out 0.
|
|
53
|
+
// will-change: width, transform;
|
|
54
|
+
transition: all 0.25s ease-in-out 0.01s allow-discrete;
|
|
55
55
|
|
|
56
56
|
@starting-style {
|
|
57
57
|
z-index: 0;
|
|
@@ -64,7 +64,7 @@ exports.ASNavBarItemStyled = styled_components_1.default.div `
|
|
|
64
64
|
justify-content: center;
|
|
65
65
|
flex-wrap: nowrap;
|
|
66
66
|
flex-direction: row;
|
|
67
|
-
transition: color 0.3s ease-in-out 0.
|
|
67
|
+
transition: color 0.3s ease-in-out 0.01s;
|
|
68
68
|
text-transform: uppercase;
|
|
69
69
|
margin: ${({ $margin = '4px 0' }) => $margin};
|
|
70
70
|
padding: ${({ $padding = '0 8px' }) => $padding};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ASNavBarMW.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/mobile/ASNavBarMW.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"ASNavBarMW.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/mobile/ASNavBarMW.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsE,MAAM,OAAO,CAAC;AAM3F,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAOlD,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAoKvC,CAAC;AAEF,eAAe,UAAU,CAAC"}
|
|
@@ -7,8 +7,8 @@ const uuid_1 = require("uuid");
|
|
|
7
7
|
const ASUI_types_1 = require("../../apptypes/ASUI.types");
|
|
8
8
|
const asmodal_1 = tslib_1.__importDefault(require("../../asmodal"));
|
|
9
9
|
const astheme_1 = tslib_1.__importDefault(require("../../astheme"));
|
|
10
|
-
const icons_1 = require("../../icons");
|
|
11
10
|
const ASNavBar_1 = require("../ASNavBar");
|
|
11
|
+
const navbararrowbuttons_1 = tslib_1.__importDefault(require("../navbararrowbuttons"));
|
|
12
12
|
const navbarpickpanel_1 = tslib_1.__importDefault(require("../navbarpickpanel"));
|
|
13
13
|
const styles_1 = require("./styles");
|
|
14
14
|
const INIT_VALUE = (0, uuid_1.v4)();
|
|
@@ -93,6 +93,14 @@ const ASNavBarMW = ({ id = `asnavbar-mw-${(0, uuid_1.v4)()}`, className = '', na
|
|
|
93
93
|
}
|
|
94
94
|
}
|
|
95
95
|
};
|
|
96
|
-
|
|
96
|
+
const onButtonsPressed = (e, direction) => {
|
|
97
|
+
if (direction === ASUI_types_1.ArrowButtonDirection.Left) {
|
|
98
|
+
selectPrev(e);
|
|
99
|
+
}
|
|
100
|
+
else {
|
|
101
|
+
selectNext(e);
|
|
102
|
+
}
|
|
103
|
+
};
|
|
104
|
+
return ((0, jsx_runtime_1.jsxs)(styles_1.ASNavBarMWStyled, { id: id, ref: navBarRef, className: `${className} ${size}`, theme: theme, ...styleOptions, children: [(0, jsx_runtime_1.jsx)(styles_1.ASSelectedBoxMWStyled, { ref: navBarHighlightBoxRef, theme: theme }), (0, jsx_runtime_1.jsx)(styles_1.ScrollableNavBarItems, { id: "ScrollableNavBarItems", ref: scrollContainerRef, onScrollEnd: onScrollEndedHandler, children: navItems.map((item, index) => ((0, jsx_runtime_1.jsx)(styles_1.ASNavBarItemMWStyled, { theme: theme, itemId: item.itemId, selected: isSelected(item.itemId), displayText: item.displayText, icon: item.icon, size: size, title: item.displayText, onItemClick: () => setShowSelectionPanel(true) }, `key_${index}_${item.itemId}`))) }), (0, jsx_runtime_1.jsx)(navbararrowbuttons_1.default, { ...styleOptions, onArrowButtonClicked: onButtonsPressed, theme: theme, size: size, totalItemCount: navItems.length, selectedIndex: selectedIndex, styleOptions: styleOptions }), (0, jsx_runtime_1.jsx)(asmodal_1.default, { isOpen: showSelectionPanel, onBackdropClick: () => setShowSelectionPanel(false), className: className, children: (0, jsx_runtime_1.jsx)(navbarpickpanel_1.default, { theme: theme, size: size, className: className, navItems: navItems, selectedId: selected, selectedIndex: selectedIndex, onItemSelected: onNavBarItemPickedHandler }) })] }));
|
|
97
105
|
};
|
|
98
106
|
exports.default = ASNavBarMW;
|
|
@@ -1,29 +1,4 @@
|
|
|
1
|
-
import {
|
|
2
|
-
interface ASNavBarIconButtonStyledProps {
|
|
3
|
-
theme: ASTheme;
|
|
4
|
-
$mobileMode?: boolean;
|
|
5
|
-
$gap?: number;
|
|
6
|
-
$maxWidth?: number;
|
|
7
|
-
$borderRadius?: number;
|
|
8
|
-
$padding?: string;
|
|
9
|
-
size?: ASComponentSize;
|
|
10
|
-
}
|
|
11
|
-
export declare const ASIconButtonStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<{
|
|
12
|
-
className?: string;
|
|
13
|
-
text?: string;
|
|
14
|
-
selected?: boolean;
|
|
15
|
-
toggle?: boolean;
|
|
16
|
-
size?: ASComponentSize;
|
|
17
|
-
iconSize?: number;
|
|
18
|
-
theme?: ASTheme;
|
|
19
|
-
paddingSize?: import("../../apptypes/ASUI.types").ASPaddingSize;
|
|
20
|
-
isLoading?: boolean;
|
|
21
|
-
icon: import("react").FC<import("react").PropsWithChildren<import("../../icons").IconProps>>;
|
|
22
|
-
} & import("../../icons").IconProps & Omit<import("react").HTMLProps<HTMLDivElement>, "size"> & {
|
|
23
|
-
children?: import("react").ReactNode | undefined;
|
|
24
|
-
}, ASNavBarIconButtonStyledProps>> & string & Omit<import("react").FC<import("../..").ASIconButtonProps>, keyof import("react").Component<any, {}, any>>;
|
|
25
|
-
export declare const NavControlLeftButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../../icons").IconProps, never>> & string & Omit<import("react").FC<import("../../icons").IconProps>, keyof import("react").Component<any, {}, any>>;
|
|
26
|
-
export declare const NavControlRightButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../../icons").IconProps, never>> & string & Omit<import("react").FC<import("../../icons").IconProps>, keyof import("react").Component<any, {}, any>>;
|
|
1
|
+
import { ASNavBarStyleOptions, ASTheme } from '../../apptypes/ASUI.types';
|
|
27
2
|
interface ASNavBarSelectedBoxStyledProps {
|
|
28
3
|
theme: ASTheme;
|
|
29
4
|
$mobileMode?: boolean;
|
|
@@ -42,7 +17,6 @@ interface ASNavBarStyledProps extends ASNavBarStyleOptions {
|
|
|
42
17
|
$borderRadius?: number;
|
|
43
18
|
$padding?: string;
|
|
44
19
|
}
|
|
45
|
-
export declare const NavButtonsContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ASNavBarStyledProps>> & string;
|
|
46
20
|
interface ASNavBarItemStyledProps {
|
|
47
21
|
theme: ASTheme;
|
|
48
22
|
$mobileMode?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/mobile/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/mobile/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AAwB1E,UAAU,8BAA8B;IACtC,KAAK,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AACD,eAAO,MAAM,qBAAqB,qQAgBjC,CAAC;AAEF,UAAU,mBAAoB,SAAQ,oBAAoB;IACxD,KAAK,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,UAAU,uBAAuB;IAC/B,KAAK,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AACD,eAAO,MAAM,oBAAoB,iUAuDhC,CAAC;AAEF,eAAO,MAAM,qBAAqB,6NA0BjC,CAAC;AAEF,eAAO,MAAM,gBAAgB,wPAkB5B,CAAC;AAEF,UAAU,wBAAwB;IAChC,KAAK,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,mBAAmB,6PAiB/B,CAAC"}
|
|
@@ -1,33 +1,10 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.ASNavBarItemPadding = exports.ASNavBarMWStyled = exports.ScrollableNavBarItems = exports.ASNavBarItemMWStyled = exports.
|
|
3
|
+
exports.ASNavBarItemPadding = exports.ASNavBarMWStyled = exports.ScrollableNavBarItems = exports.ASNavBarItemMWStyled = exports.ASSelectedBoxMWStyled = void 0;
|
|
4
4
|
const tslib_1 = require("tslib");
|
|
5
5
|
const styled_components_1 = tslib_1.__importStar(require("styled-components"));
|
|
6
|
-
const ASUI_types_1 = require("../../apptypes/ASUI.types");
|
|
7
|
-
const ASIconButton_1 = tslib_1.__importDefault(require("../../asiconbutton/ASIconButton"));
|
|
8
6
|
const astheme_1 = tslib_1.__importDefault(require("../../astheme"));
|
|
9
|
-
const icons_1 = require("../../icons");
|
|
10
7
|
const navbaritem_1 = tslib_1.__importDefault(require("../navbaritem"));
|
|
11
|
-
const getNavControlButtonStyle = (0, styled_components_1.css) `
|
|
12
|
-
pointer-events: all;
|
|
13
|
-
cursor: pointer;
|
|
14
|
-
|
|
15
|
-
&:active {
|
|
16
|
-
svg > path {
|
|
17
|
-
fill: rgb(61, 61, 61);
|
|
18
|
-
}
|
|
19
|
-
}
|
|
20
|
-
> @media (hover) {
|
|
21
|
-
&:hover {
|
|
22
|
-
svg > path {
|
|
23
|
-
// fill: rgb(61, 61, 61);
|
|
24
|
-
stroke: #ffd321;
|
|
25
|
-
strokewidth: 1px;
|
|
26
|
-
stroke-width: 1px;
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
`;
|
|
31
8
|
const dimensionsForSizes = (0, styled_components_1.css) `
|
|
32
9
|
&.ASSmall {
|
|
33
10
|
height: 30px;
|
|
@@ -47,30 +24,6 @@ const dimensionsForSizes = (0, styled_components_1.css) `
|
|
|
47
24
|
font-weight: 500;
|
|
48
25
|
}
|
|
49
26
|
`;
|
|
50
|
-
exports.ASIconButtonStyled = (0, styled_components_1.default)(ASIconButton_1.default) `
|
|
51
|
-
margin: ${({ size = ASUI_types_1.ComponentSize.Medium }) => size === ASUI_types_1.ComponentSize.Small ? '0 10px' : size === ASUI_types_1.ComponentSize.Large ? '0 -1px' : '0 3px'};
|
|
52
|
-
z-index: 1;
|
|
53
|
-
scale: ${({ size = ASUI_types_1.ComponentSize.Medium }) => size === ASUI_types_1.ComponentSize.Small ? 0.9 : size === ASUI_types_1.ComponentSize.Large ? 0.8 : 0.8};
|
|
54
|
-
`;
|
|
55
|
-
exports.NavControlLeftButton = (0, styled_components_1.default)(icons_1.ArrowLeftIcon) `
|
|
56
|
-
margin-left: 10px;
|
|
57
|
-
${getNavControlButtonStyle}
|
|
58
|
-
&:hover {
|
|
59
|
-
&:last-child(svg) > path {
|
|
60
|
-
fill: rgb(61, 61, 61);
|
|
61
|
-
}
|
|
62
|
-
}
|
|
63
|
-
`;
|
|
64
|
-
exports.NavControlRightButton = (0, styled_components_1.default)(icons_1.ArrowRightIcon) `
|
|
65
|
-
margin-right: 10px;
|
|
66
|
-
${getNavControlButtonStyle}
|
|
67
|
-
|
|
68
|
-
&:hover {
|
|
69
|
-
&:last-child(svg) > path {
|
|
70
|
-
fill: rgb(61, 61, 61);
|
|
71
|
-
}
|
|
72
|
-
}
|
|
73
|
-
`;
|
|
74
27
|
exports.ASSelectedBoxMWStyled = styled_components_1.default.span `
|
|
75
28
|
position: absolute;
|
|
76
29
|
height: ${({ $height = 85, $heightUnit = '%' }) => `${$height}${$heightUnit}`};
|
|
@@ -88,33 +41,6 @@ exports.ASSelectedBoxMWStyled = styled_components_1.default.span `
|
|
|
88
41
|
left: 0;
|
|
89
42
|
}
|
|
90
43
|
`;
|
|
91
|
-
exports.NavButtonsContainer = styled_components_1.default.div `
|
|
92
|
-
display: flex;
|
|
93
|
-
align-items: center;
|
|
94
|
-
justify-content: space-between;
|
|
95
|
-
width: -webkit-fill-available;
|
|
96
|
-
pointer-events: none;
|
|
97
|
-
user-select: none;
|
|
98
|
-
z-index: 10;
|
|
99
|
-
|
|
100
|
-
&.ASSmall {
|
|
101
|
-
height: 30px;
|
|
102
|
-
> ${exports.ASSelectedBoxMWStyled} {
|
|
103
|
-
height: 80%;
|
|
104
|
-
}
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
&.ASMedium {
|
|
108
|
-
height: 40px;
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
&.ASLarge {
|
|
112
|
-
height: 50px;
|
|
113
|
-
> ${exports.ASSelectedBoxMWStyled} {
|
|
114
|
-
height: 90%;
|
|
115
|
-
}
|
|
116
|
-
}
|
|
117
|
-
`;
|
|
118
44
|
exports.ASNavBarItemMWStyled = (0, styled_components_1.default)(navbaritem_1.default) `
|
|
119
45
|
display: flex;
|
|
120
46
|
align-items: center;
|
|
@@ -207,25 +133,12 @@ exports.ASNavBarMWStyled = styled_components_1.default.div `
|
|
|
207
133
|
@supports (width: -webkit-fill-available) {
|
|
208
134
|
width: -webkit-fill-available;
|
|
209
135
|
}
|
|
210
|
-
max-width:
|
|
136
|
+
max-width: ${({ $maxWidth = 300, $maxWidthUnit = 'px' }) => `${$maxWidth}${$maxWidthUnit}`};
|
|
211
137
|
border-radius: ${({ $borderRadius = 6 }) => $borderRadius}px;
|
|
212
138
|
background-color: ${({ theme }) => theme.navbar.navBarBackgroundColor};
|
|
213
139
|
padding: ${({ $padding = '0 4px' }) => $padding};
|
|
214
140
|
box-shadow: ${({ theme }) => theme.navbar.navBarBoxShadow};
|
|
215
141
|
|
|
216
|
-
& ${exports.NavButtonsContainer} {
|
|
217
|
-
position: fixed;
|
|
218
|
-
max-width: inherit;
|
|
219
|
-
height: inherit;
|
|
220
|
-
|
|
221
|
-
${exports.ASSelectedBoxMWStyled} {
|
|
222
|
-
position: absolute;
|
|
223
|
-
left: 50px;
|
|
224
|
-
height: 90%;
|
|
225
|
-
z-index: 0;
|
|
226
|
-
}
|
|
227
|
-
}
|
|
228
|
-
|
|
229
142
|
${dimensionsForSizes}
|
|
230
143
|
`;
|
|
231
144
|
exports.ASNavBarItemPadding = styled_components_1.default.div `
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ASNavBarArrowButtons.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/navbararrowbuttons/ASNavBarArrowButtons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"ASNavBarArrowButtons.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/navbararrowbuttons/ASNavBarArrowButtons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAgB,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAK/D,OAAO,EAAE,yBAAyB,EAAE,MAAM,8BAA8B,CAAC;AAGzE,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAAC,yBAAyB,CAAC,CA2BvF,CAAC;AAEF,QAAA,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAqBhE,CAAC;AAEF,QAAA,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAqBjE,CAAC;AAEF,OAAO,EAAE,uBAAuB,EAAE,wBAAwB,EAAE,oBAAoB,IAAI,OAAO,EAAE,CAAC"}
|
|
@@ -14,10 +14,10 @@ const ASNavBarArrowButtons = ({ className = '', onArrowButtonClicked = () => und
|
|
|
14
14
|
exports.ASNavBarArrowButtons = ASNavBarArrowButtons;
|
|
15
15
|
exports.default = exports.ASNavBarArrowButtons;
|
|
16
16
|
const ASLeftNavBarArrowButton = ({ size = apptypes_1.ComponentSize.Medium, theme = astheme_1.default, disabled = false, onArrowButtonClicked = () => undefined, }) => {
|
|
17
|
-
return ((0, jsx_runtime_1.jsx)(styles_1.ASIconButtonLeftStyled, { role: "button", icon: icons_1.ArrowLeftIcon,
|
|
17
|
+
return ((0, jsx_runtime_1.jsx)(styles_1.ASIconButtonLeftStyled, { role: "button", icon: icons_1.ArrowLeftIcon, onPointerDown: (e) => onArrowButtonClicked(e, apptypes_1.ArrowButtonDirection.Left), theme: theme, size: size, toggle: false, selected: false, disabled: disabled, id: "LeftButtonId", iconSize: size === apptypes_1.ComponentSize.Large ? 32 : size === apptypes_1.ComponentSize.Medium ? 28 : 24, fillColor: theme.button.buttonIconColor }));
|
|
18
18
|
};
|
|
19
19
|
exports.ASLeftNavBarArrowButton = ASLeftNavBarArrowButton;
|
|
20
20
|
const ASRightNavBarArrowButton = ({ size = apptypes_1.ComponentSize.Medium, theme = astheme_1.default, onArrowButtonClicked = () => undefined, disabled = false, }) => {
|
|
21
|
-
return ((0, jsx_runtime_1.jsx)(styles_1.ASIconButtonRightStyled, { role: "button", icon: icons_1.ArrowRightIcon,
|
|
21
|
+
return ((0, jsx_runtime_1.jsx)(styles_1.ASIconButtonRightStyled, { role: "button", icon: icons_1.ArrowRightIcon, onPointerDown: (e) => onArrowButtonClicked(e, apptypes_1.ArrowButtonDirection.Right), theme: theme, toggle: false, selected: false, size: size, disabled: disabled, id: "RightButtonId", iconSize: size === apptypes_1.ComponentSize.Large ? 32 : size === apptypes_1.ComponentSize.Medium ? 28 : 24, fillColor: theme.button.buttonIconColor }));
|
|
22
22
|
};
|
|
23
23
|
exports.ASRightNavBarArrowButton = ASRightNavBarArrowButton;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { PointerEvent } from 'react';
|
|
2
2
|
import { ASComponentDirection, ASComponentSize, ASNavBarStyleOptions, ASTheme } from '../../apptypes';
|
|
3
3
|
export interface ASNavBarArrowButtonsStyledProps {
|
|
4
4
|
itemId?: string;
|
|
@@ -8,7 +8,7 @@ export interface ASNavBarArrowButtonsStyledProps {
|
|
|
8
8
|
size?: ASComponentSize;
|
|
9
9
|
styleOptions?: ASNavBarStyleOptions;
|
|
10
10
|
}
|
|
11
|
-
export type ASNavBarArrowButtonClickFn = (event:
|
|
11
|
+
export type ASNavBarArrowButtonClickFn = (event: PointerEvent, dir: ASComponentDirection) => void;
|
|
12
12
|
export type ASNavBarArrowButtonsProps = {
|
|
13
13
|
className?: string;
|
|
14
14
|
theme?: ASTheme;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ASNavBarArrowButtons.types.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/navbararrowbuttons/ASNavBarArrowButtons.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"ASNavBarArrowButtons.types.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/navbararrowbuttons/ASNavBarArrowButtons.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,oBAAoB,EAAE,eAAe,EAAE,oBAAoB,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAEtG,MAAM,WAAW,+BAA+B;IAC9C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,YAAY,CAAC,EAAE,oBAAoB,CAAC;CACrC;AAED,MAAM,MAAM,0BAA0B,GAAG,CAAC,KAAK,EAAE,YAAY,EAAE,GAAG,EAAE,oBAAoB,KAAK,IAAI,CAAC;AAElG,MAAM,MAAM,yBAAyB,GAAG;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oBAAoB,CAAC,EAAE,0BAA0B,CAAC;IAClD,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,YAAY,CAAC,EAAE,oBAAoB,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/navbararrowbuttons/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,OAAO,EAAiB,MAAM,gBAAgB,CAAC;AAGzE,OAAO,EAAE,+BAA+B,EAAE,MAAM,8BAA8B,CAAC;AAwC/E,eAAO,MAAM,0BAA0B,oQA2BtC,CAAC;AAEF,UAAU,6BAA6B;IACrC,KAAK,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,eAAe,CAAC;CACxB;AAED,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/navbararrowbuttons/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,OAAO,EAAiB,MAAM,gBAAgB,CAAC;AAGzE,OAAO,EAAE,+BAA+B,EAAE,MAAM,8BAA8B,CAAC;AAwC/E,eAAO,MAAM,0BAA0B,oQA2BtC,CAAC;AAEF,UAAU,6BAA6B;IACrC,KAAK,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,eAAe,CAAC;CACxB;AAED,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;qKAKnC,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;qKAKlC,CAAC"}
|
|
@@ -67,10 +67,10 @@ exports.ASNavBarArrowButtonsStyled = styled_components_1.default.div `
|
|
|
67
67
|
exports.ASIconButtonRightStyled = (0, styled_components_1.default)(asiconbutton_1.default) `
|
|
68
68
|
margin: ${({ size = apptypes_1.ComponentSize.Medium }) => size === apptypes_1.ComponentSize.Small ? '0 10px' : size === apptypes_1.ComponentSize.Large ? '0 -1px' : '0 3px'};
|
|
69
69
|
z-index: 1;
|
|
70
|
-
scale:
|
|
70
|
+
scale: 0.8;
|
|
71
71
|
`;
|
|
72
72
|
exports.ASIconButtonLeftStyled = (0, styled_components_1.default)(asiconbutton_1.default) `
|
|
73
73
|
margin: ${({ size = apptypes_1.ComponentSize.Medium }) => size === apptypes_1.ComponentSize.Small ? '0 10px' : size === apptypes_1.ComponentSize.Large ? '0 -1px' : '0 3px'};
|
|
74
74
|
z-index: 1;
|
|
75
|
-
scale:
|
|
75
|
+
scale: 0.8;
|
|
76
76
|
`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ASNavBarItem.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/navbaritem/ASNavBarItem.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"ASNavBarItem.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/navbaritem/ASNavBarItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoD,MAAM,OAAO,CAAC;AAGzE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAItD,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAyE7C,CAAC;AAEF,eAAe,YAAY,CAAC"}
|
|
@@ -44,6 +44,6 @@ const ASNavBarItem = ({ className = '', theme = astheme_1.default, displayText =
|
|
|
44
44
|
(0, react_1.useEffect)(() => {
|
|
45
45
|
isNavBarItemSelected.current = selected;
|
|
46
46
|
}, [selected]);
|
|
47
|
-
return ((0, jsx_runtime_1.jsxs)(styles_2.ASNavBarItemStyled, { id: itemId, theme: theme, title: displayText, ref: navBarItemRef, className: `${className} ${size}`, "$selected": selected,
|
|
47
|
+
return ((0, jsx_runtime_1.jsxs)(styles_2.ASNavBarItemStyled, { id: itemId, theme: theme, title: displayText, ref: navBarItemRef, className: `${className} ${size}`, "$selected": selected, onPointerDown: onItemClickHandler, children: [icon && ((0, jsx_runtime_1.jsx)(styles_1.ASNavBarLeadingIconPadding, { theme: theme, "$selected": selected, "aria-invalid": true, "aria-hidden": true, children: icon })), displayText] }));
|
|
48
48
|
};
|
|
49
49
|
exports.default = ASNavBarItem;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/navbaritem/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AAIpD,UAAU,uBAAuB;IAC/B,KAAK,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AACD,eAAO,MAAM,kBAAkB,
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/navbaritem/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AAIpD,UAAU,uBAAuB;IAC/B,KAAK,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AACD,eAAO,MAAM,kBAAkB,4PAoE9B,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ASNavBarPickPanel.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/navbarpickpanel/ASNavBarPickPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"ASNavBarPickPanel.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/navbarpickpanel/ASNavBarPickPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAKvD,OAAO,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AAKnE,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAyCvD,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ASNavBarPickPanelItem.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/navbarpickpanelitem/ASNavBarPickPanelItem.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"ASNavBarPickPanelItem.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/navbarpickpanelitem/ASNavBarPickPanelItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoD,MAAM,OAAO,CAAC;AAGzE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAItD,QAAA,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA6FtD,CAAC;AAEF,eAAe,qBAAqB,CAAC"}
|
|
@@ -8,6 +8,7 @@ const astheme_1 = tslib_1.__importDefault(require("../../astheme"));
|
|
|
8
8
|
const styles_1 = require("../styles");
|
|
9
9
|
const styles_2 = require("./styles");
|
|
10
10
|
const ASNavBarPickPanelItem = ({ className = '', theme = astheme_1.default, displayText = '---', icon, selected = false, itemId, itemIndex = 0, size = apptypes_1.ComponentSize.Medium, onItemClick = () => undefined, onItemResized = () => undefined, }) => {
|
|
11
|
+
const tapDebounceRef = (0, react_1.useRef)('None');
|
|
11
12
|
const [navItemSizeInitialized, setNavSizeInitialized] = (0, react_1.useState)(false);
|
|
12
13
|
const navItemWidthRef = (0, react_1.useRef)(0);
|
|
13
14
|
const navBarItemRef = (0, react_1.useRef)(null);
|
|
@@ -42,6 +43,25 @@ const ASNavBarPickPanelItem = ({ className = '', theme = astheme_1.default, disp
|
|
|
42
43
|
(0, react_1.useEffect)(() => {
|
|
43
44
|
isNavBarItemSelected.current = selected;
|
|
44
45
|
}, [selected]);
|
|
45
|
-
|
|
46
|
+
const onTap = (e) => {
|
|
47
|
+
if (tapDebounceRef.current === 'None') {
|
|
48
|
+
tapDebounceRef.current = 'Down';
|
|
49
|
+
const btnEl = e.currentTarget;
|
|
50
|
+
btnEl.ariaPressed = 'true';
|
|
51
|
+
onItemClickHandler(e);
|
|
52
|
+
btnEl.releasePointerCapture(e.pointerId);
|
|
53
|
+
}
|
|
54
|
+
};
|
|
55
|
+
const onTapRelease = (e) => {
|
|
56
|
+
if (tapDebounceRef.current === 'Down') {
|
|
57
|
+
tapDebounceRef.current = 'Up';
|
|
58
|
+
const btnEl = e.currentTarget;
|
|
59
|
+
setTimeout(() => {
|
|
60
|
+
btnEl.ariaPressed = 'false';
|
|
61
|
+
tapDebounceRef.current = 'None';
|
|
62
|
+
}, 400);
|
|
63
|
+
}
|
|
64
|
+
};
|
|
65
|
+
return ((0, jsx_runtime_1.jsxs)(styles_2.ASNavBarPickPanelItemStyled, { id: itemId, theme: theme, ref: navBarItemRef, className: `${className} ${size}`, "$selected": selected, onPointerUp: onTapRelease, onPointerDown: onTap, children: [icon && ((0, jsx_runtime_1.jsx)(styles_1.ASNavBarLeadingIconPadding, { theme: theme, "$selected": selected, "aria-invalid": true, "aria-hidden": true, children: icon })), displayText] }));
|
|
46
66
|
};
|
|
47
67
|
exports.default = ASNavBarPickPanelItem;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ASThemeDefault.d.ts","sourceRoot":"","sources":["../../src/astheme/ASThemeDefault.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;
|
|
1
|
+
{"version":3,"file":"ASThemeDefault.d.ts","sourceRoot":"","sources":["../../src/astheme/ASThemeDefault.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AA0EjD,QAAA,MAAM,cAAc,EAAE,OA8FrB,CAAC;AAEF,eAAe,cAAc,CAAC"}
|
|
@@ -17,6 +17,7 @@ const colors = {
|
|
|
17
17
|
yellow85: '#ffee66',
|
|
18
18
|
yellow88: '#fff6af',
|
|
19
19
|
yellow90: '#867017',
|
|
20
|
+
yellow91: '#a47200',
|
|
20
21
|
yellow95: '#a68500',
|
|
21
22
|
yellow100: '#4a4000',
|
|
22
23
|
yellow110: '#3d340e',
|
|
@@ -75,12 +76,12 @@ const ASThemeDefault = {
|
|
|
75
76
|
button: {
|
|
76
77
|
buttonGradientDown: `linear-gradient(to bottom, ${colors.yellow30} 0%, ${colors.mainYellow} 100%)`,
|
|
77
78
|
buttonGradientUp: `linear-gradient(to top, ${colors.yellow30} 0%, ${colors.mainYellow} 100%)`,
|
|
78
|
-
buttonShadowHoverASSmall: `inset 0 0
|
|
79
|
-
buttonShadowHoverASMedium: `inset 0 0
|
|
80
|
-
buttonShadowHoverASLarge: `inset 0 0
|
|
81
|
-
buttonShadowActiveASSmall: `inset 0 0 5px 1px ${colors.
|
|
82
|
-
buttonShadowActiveASMedium: `inset 0 0
|
|
83
|
-
buttonShadowActiveASLarge: `inset 0 0 11px
|
|
79
|
+
buttonShadowHoverASSmall: `inset 0 0 1px 0 ${colors.yellow91}`,
|
|
80
|
+
buttonShadowHoverASMedium: `inset 0 0 4px 0 ${colors.yellow91}`,
|
|
81
|
+
buttonShadowHoverASLarge: `inset 0 0 6px 0 ${colors.yellow91}`,
|
|
82
|
+
buttonShadowActiveASSmall: `inset 0 0 5px 1px ${colors.yellow91}`,
|
|
83
|
+
buttonShadowActiveASMedium: `inset 0 0 6px 1px ${colors.yellow91}`,
|
|
84
|
+
buttonShadowActiveASLarge: `inset 0 0 11px 2px ${colors.yellow91}`,
|
|
84
85
|
buttonShadowNormal: `inset 0 0 1px 0 ${colors.yellow30}`,
|
|
85
86
|
buttonShadowHover: `inset 0 0 1px 0 ${colors.yellow80}`,
|
|
86
87
|
buttonOutline: colors.mainYellow,
|