@activecollab/components 1.0.266 → 1.0.268
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/cjs/components/Badge/Badge.js +5 -3
- package/dist/cjs/components/Badge/Badge.js.map +1 -1
- package/dist/cjs/components/Badge/Styles.js +4 -1
- package/dist/cjs/components/Badge/Styles.js.map +1 -1
- package/dist/cjs/components/CommandPallete/CommandPallete.js +20 -11
- package/dist/cjs/components/CommandPallete/CommandPallete.js.map +1 -1
- package/dist/cjs/components/CommandPallete/CommandPallete.styles.js +1 -1
- package/dist/cjs/components/CommandPallete/CommandPallete.styles.js.map +1 -1
- package/dist/cjs/components/CommandPallete/CommandPalleteCommandItem.js +55 -0
- package/dist/cjs/components/CommandPallete/CommandPalleteCommandItem.js.map +1 -0
- package/dist/cjs/components/CommandPallete/CommandPalleteHeader.js +20 -4
- package/dist/cjs/components/CommandPallete/CommandPalleteHeader.js.map +1 -1
- package/dist/cjs/components/CommandPallete/CommandPalleteItem.js.map +1 -1
- package/dist/esm/components/Badge/Badge.d.ts +2 -1
- package/dist/esm/components/Badge/Badge.d.ts.map +1 -1
- package/dist/esm/components/Badge/Badge.js +5 -3
- package/dist/esm/components/Badge/Badge.js.map +1 -1
- package/dist/esm/components/Badge/Styles.d.ts.map +1 -1
- package/dist/esm/components/Badge/Styles.js +4 -1
- package/dist/esm/components/Badge/Styles.js.map +1 -1
- package/dist/esm/components/CommandPallete/CommandPallete.d.ts +2 -6
- package/dist/esm/components/CommandPallete/CommandPallete.d.ts.map +1 -1
- package/dist/esm/components/CommandPallete/CommandPallete.js +21 -12
- package/dist/esm/components/CommandPallete/CommandPallete.js.map +1 -1
- package/dist/esm/components/CommandPallete/CommandPallete.styles.d.ts.map +1 -1
- package/dist/esm/components/CommandPallete/CommandPallete.styles.js +1 -1
- package/dist/esm/components/CommandPallete/CommandPallete.styles.js.map +1 -1
- package/dist/esm/components/CommandPallete/CommandPalleteCommandItem.d.ts +10 -0
- package/dist/esm/components/CommandPallete/CommandPalleteCommandItem.d.ts.map +1 -0
- package/dist/esm/components/CommandPallete/CommandPalleteCommandItem.js +43 -0
- package/dist/esm/components/CommandPallete/CommandPalleteCommandItem.js.map +1 -0
- package/dist/esm/components/CommandPallete/CommandPalleteHeader.d.ts +3 -1
- package/dist/esm/components/CommandPallete/CommandPalleteHeader.d.ts.map +1 -1
- package/dist/esm/components/CommandPallete/CommandPalleteHeader.js +21 -5
- package/dist/esm/components/CommandPallete/CommandPalleteHeader.js.map +1 -1
- package/dist/esm/components/CommandPallete/CommandPalleteItem.d.ts +2 -2
- package/dist/esm/components/CommandPallete/CommandPalleteItem.d.ts.map +1 -1
- package/dist/esm/components/CommandPallete/CommandPalleteItem.js.map +1 -1
- package/dist/index.js +8 -4
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/package.json +1 -1
|
@@ -37,14 +37,16 @@ var Badge = function Badge(_ref) {
|
|
|
37
37
|
_ref$backgroundColor = _ref.backgroundColor,
|
|
38
38
|
backgroundColor = _ref$backgroundColor === void 0 ? "#40C37D" : _ref$backgroundColor,
|
|
39
39
|
_ref$isVisible = _ref.isVisible,
|
|
40
|
-
isVisible = _ref$isVisible === void 0 ? true : _ref$isVisible
|
|
40
|
+
isVisible = _ref$isVisible === void 0 ? true : _ref$isVisible,
|
|
41
|
+
value = _ref.value;
|
|
41
42
|
return isVisible ? /*#__PURE__*/_react.default.createElement(_Styles.StyledBadge, {
|
|
42
43
|
className: (0, _classnames.default)("c-badge", className),
|
|
43
44
|
dimension: dimension,
|
|
44
45
|
position: position,
|
|
45
46
|
backgroundColor: backgroundColor,
|
|
46
|
-
role: "status"
|
|
47
|
-
|
|
47
|
+
role: "status",
|
|
48
|
+
value: value
|
|
49
|
+
}, value && value > 100 ? 99 + "+" : value) : null;
|
|
48
50
|
};
|
|
49
51
|
exports.Badge = Badge;
|
|
50
52
|
//# sourceMappingURL=Badge.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.js","names":["Badge","dimension","className","position","backgroundColor","isVisible","classNames"],"sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport React from \"react\";\nimport { StyledBadge } from \"./Styles\";\n\ntype Position = \"top-left\" | \"top-right\" | \"bottom-right\" | \"bottom-left\";\n\nexport interface BadgeProps {\n position?: Position;\n dimension?: number;\n className?: string;\n backgroundColor?: string;\n isVisible?: boolean;\n}\n\n/**\n * @component Badge\n * @description\n * In some products, you might need to show a badge on the right corner of the avatar.\n * We call this a badge. Here's an example that shows if the user is online.\n *\n * @prop {position} - dictates the position of a badge.\n * @prop {dimension} - controls the size of a badge (width and height) in pixels.\n * @prop {backgroundColor} - background-color of a badge.\n * @prop {isVisible} - dictates if badge should be visible or not.\n *\n * @example\n * <IconButton variant=\"text gray\" size=\"big\">\n * <BellOffIcon />\n * <Badge position=\"top-right\" backgroundColor=\"red\" dimension={16} />\n * </IconButton>\n *\n * @see\n * https://system.activecollab.com/?path=/story/components-button-indicators-badge--badge\n */\nexport const Badge = ({\n dimension = 8,\n className,\n position = \"bottom-left\",\n backgroundColor = \"#40C37D\",\n isVisible = true,\n}: BadgeProps) => {\n return isVisible ? (\n <StyledBadge\n className={classNames(\"c-badge\", className)}\n dimension={dimension}\n position={position}\n backgroundColor={backgroundColor}\n role=\"status\"\n
|
|
1
|
+
{"version":3,"file":"Badge.js","names":["Badge","dimension","className","position","backgroundColor","isVisible","value","classNames"],"sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport React from \"react\";\nimport { StyledBadge } from \"./Styles\";\n\ntype Position = \"top-left\" | \"top-right\" | \"bottom-right\" | \"bottom-left\";\n\nexport interface BadgeProps {\n position?: Position;\n dimension?: number;\n className?: string;\n backgroundColor?: string;\n isVisible?: boolean;\n value?: number;\n}\n\n/**\n * @component Badge\n * @description\n * In some products, you might need to show a badge on the right corner of the avatar.\n * We call this a badge. Here's an example that shows if the user is online.\n *\n * @prop {position} - dictates the position of a badge.\n * @prop {dimension} - controls the size of a badge (width and height) in pixels.\n * @prop {backgroundColor} - background-color of a badge.\n * @prop {isVisible} - dictates if badge should be visible or not.\n *\n * @example\n * <IconButton variant=\"text gray\" size=\"big\">\n * <BellOffIcon />\n * <Badge position=\"top-right\" backgroundColor=\"red\" dimension={16} />\n * </IconButton>\n *\n * @see\n * https://system.activecollab.com/?path=/story/components-button-indicators-badge--badge\n */\nexport const Badge = ({\n dimension = 8,\n className,\n position = \"bottom-left\",\n backgroundColor = \"#40C37D\",\n isVisible = true,\n value,\n}: BadgeProps) => {\n return isVisible ? (\n <StyledBadge\n className={classNames(\"c-badge\", className)}\n dimension={dimension}\n position={position}\n backgroundColor={backgroundColor}\n role=\"status\"\n value={value}\n >\n {value && value > 100 ? 99 + \"+\" : value}\n </StyledBadge>\n ) : null;\n};\n"],"mappings":";;;;;;AAAA;AACA;AACA;AAAuC;AAavC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,IAAMA,KAAK,GAAG,SAARA,KAAK,OAOA;EAAA,0BANhBC,SAAS;IAATA,SAAS,+BAAG,CAAC;IACbC,SAAS,QAATA,SAAS;IAAA,qBACTC,QAAQ;IAARA,QAAQ,8BAAG,aAAa;IAAA,4BACxBC,eAAe;IAAfA,eAAe,qCAAG,SAAS;IAAA,sBAC3BC,SAAS;IAATA,SAAS,+BAAG,IAAI;IAChBC,KAAK,QAALA,KAAK;EAEL,OAAOD,SAAS,gBACd,6BAAC,mBAAW;IACV,SAAS,EAAE,IAAAE,mBAAU,EAAC,SAAS,EAAEL,SAAS,CAAE;IAC5C,SAAS,EAAED,SAAU;IACrB,QAAQ,EAAEE,QAAS;IACnB,eAAe,EAAEC,eAAgB;IACjC,IAAI,EAAC,QAAQ;IACb,KAAK,EAAEE;EAAM,GAEZA,KAAK,IAAIA,KAAK,GAAG,GAAG,GAAG,EAAE,GAAG,GAAG,GAAGA,KAAK,CAC5B,GACZ,IAAI;AACV,CAAC;AAAC"}
|
|
@@ -6,17 +6,20 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports.StyledBadge = void 0;
|
|
8
8
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
9
|
+
var _FontStyle = require("../FontStyle");
|
|
9
10
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
10
11
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
11
12
|
var StyledBadge = _styledComponents.default.div.withConfig({
|
|
12
13
|
displayName: "Styles__StyledBadge",
|
|
13
14
|
componentId: "sc-6o8do5-0"
|
|
14
|
-
})(["background-color:", ";block-size:", ";border-radius:100%;border:2px solid var(--page-paper-main);inline-size:", ";
|
|
15
|
+
})(["", " align-items:center;background-color:", ";block-size:", ";border-radius:100%;border:2px solid var(--page-paper-main);color:var(--color-theme-100);display:flex;font-size:12px;font-weight:500;inline-size:", ";justify-content:center;padding:", ";pointer-events:none;position:absolute;z-index:1;", " ", " ", " ", ""], _FontStyle.FontStyle, function (props) {
|
|
15
16
|
return props.backgroundColor;
|
|
16
17
|
}, function (props) {
|
|
17
18
|
return props.dimension + "px";
|
|
18
19
|
}, function (props) {
|
|
19
20
|
return props.dimension + "px";
|
|
21
|
+
}, function (props) {
|
|
22
|
+
return props.value && (props.value > 99 ? "4px" : props.value < 100 && "2px");
|
|
20
23
|
}, function (_ref) {
|
|
21
24
|
var position = _ref.position;
|
|
22
25
|
return position === "top-left" && (0, _styledComponents.css)(["inset-block-start:0;inset-inline-start:0;"]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.js","names":["StyledBadge","styled","div","props","backgroundColor","dimension","position","css"],"sources":["../../../../src/components/Badge/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { BadgeProps } from \"./Badge\";\n\nexport const StyledBadge = styled.div<Partial<BadgeProps>>`\n background-color: ${(props) => props.backgroundColor};\n block-size: ${(props) => props.dimension + \"px\"};\n border-radius: 100%;\n border: 2px solid var(--page-paper-main);\n inline-size: ${(props) => props.dimension + \"px\"};\n
|
|
1
|
+
{"version":3,"file":"Styles.js","names":["StyledBadge","styled","div","FontStyle","props","backgroundColor","dimension","value","position","css"],"sources":["../../../../src/components/Badge/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { FontStyle } from \"../FontStyle\";\nimport { BadgeProps } from \"./Badge\";\n\nexport const StyledBadge = styled.div<Partial<BadgeProps>>`\n ${FontStyle}\n align-items: center;\n background-color: ${(props) => props.backgroundColor};\n block-size: ${(props) => props.dimension + \"px\"};\n border-radius: 100%;\n border: 2px solid var(--page-paper-main);\n color: var(--color-theme-100);\n display: flex;\n font-size: 12px;\n font-weight: 500;\n inline-size: ${(props) => props.dimension + \"px\"};\n justify-content: center;\n padding: ${(props) =>\n props.value && (props.value > 99 ? \"4px\" : props.value < 100 && \"2px\")};\n pointer-events: none;\n position: absolute;\n z-index: 1;\n\n ${({ position }) =>\n position === \"top-left\" &&\n css`\n inset-block-start: 0;\n inset-inline-start: 0;\n `}\n\n ${({ position }) =>\n position === \"top-right\" &&\n css`\n inset-block-start: 0;\n inset-inline-end: 0;\n `}\n\n ${({ position }) =>\n position === \"bottom-right\" &&\n css`\n inset-block-end: 0;\n inset-inline-end: 0;\n `}\n\n ${({ position }) =>\n position === \"bottom-left\" &&\n css`\n inset-block-end: 0;\n inset-inline-start: 0;\n `}\n`;\n"],"mappings":";;;;;;;AAAA;AACA;AAAyC;AAAA;AAGlC,IAAMA,WAAW,GAAGC,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,mUACjCC,oBAAS,EAES,UAACC,KAAK;EAAA,OAAKA,KAAK,CAACC,eAAe;AAAA,GACtC,UAACD,KAAK;EAAA,OAAKA,KAAK,CAACE,SAAS,GAAG,IAAI;AAAA,GAOhC,UAACF,KAAK;EAAA,OAAKA,KAAK,CAACE,SAAS,GAAG,IAAI;AAAA,GAErC,UAACF,KAAK;EAAA,OACfA,KAAK,CAACG,KAAK,KAAKH,KAAK,CAACG,KAAK,GAAG,EAAE,GAAG,KAAK,GAAGH,KAAK,CAACG,KAAK,GAAG,GAAG,IAAI,KAAK,CAAC;AAAA,GAKtE;EAAA,IAAGC,QAAQ,QAARA,QAAQ;EAAA,OACXA,QAAQ,KAAK,UAAU,QACvBC,qBAAG,gDAGF;AAAA,GAED;EAAA,IAAGD,QAAQ,SAARA,QAAQ;EAAA,OACXA,QAAQ,KAAK,WAAW,QACxBC,qBAAG,8CAGF;AAAA,GAEC;EAAA,IAAGD,QAAQ,SAARA,QAAQ;EAAA,OACbA,QAAQ,KAAK,cAAc,QAC3BC,qBAAG,4CAGF;AAAA,GAEC;EAAA,IAAGD,QAAQ,SAARA,QAAQ;EAAA,OACbA,QAAQ,KAAK,aAAa,QAC1BC,qBAAG,8CAGF;AAAA,EACJ;AAAC"}
|
|
@@ -9,6 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
9
9
|
var _reactChildrenUtilities = require("react-children-utilities");
|
|
10
10
|
var _Dialog = require("../Dialog");
|
|
11
11
|
var _CommandPallete = require("./CommandPallete.styles");
|
|
12
|
+
var _CommandPalleteCommandItem = require("./CommandPalleteCommandItem");
|
|
12
13
|
var _CommandPalleteHeader = require("./CommandPalleteHeader");
|
|
13
14
|
var _CommandPalleteItem = require("./CommandPalleteItem");
|
|
14
15
|
var _CommandPalleteList = require("./CommandPalleteList");
|
|
@@ -57,32 +58,37 @@ var CommandPallete = function CommandPallete(_ref) {
|
|
|
57
58
|
});
|
|
58
59
|
};
|
|
59
60
|
var filterChildren = (0, _react.useMemo)(function () {
|
|
60
|
-
var
|
|
61
|
+
var itemsLength = 0;
|
|
62
|
+
var commandsLength = 0;
|
|
61
63
|
var items = (0, _reactChildrenUtilities.deepMap)(children, function (child) {
|
|
62
64
|
var item = child;
|
|
63
65
|
var clonedElement;
|
|
64
66
|
if (item && item.type === _CommandPalleteList.CommandPalleteList) {
|
|
65
67
|
clonedElement = /*#__PURE__*/(0, _react.cloneElement)(item, _objectSpread({}, item.props));
|
|
66
68
|
}
|
|
69
|
+
if (item && item.type === _CommandPalleteCommandItem.CommandPalleteCommandItem) {
|
|
70
|
+
clonedElement = /*#__PURE__*/(0, _react.cloneElement)(item, _objectSpread(_objectSpread({}, item.props), {}, {
|
|
71
|
+
index: itemsLength,
|
|
72
|
+
selected: selected
|
|
73
|
+
}));
|
|
74
|
+
itemsLength++;
|
|
75
|
+
commandsLength++;
|
|
76
|
+
}
|
|
67
77
|
if (item && item.type === _CommandPalleteItem.CommandPalleteItem) {
|
|
68
78
|
clonedElement = /*#__PURE__*/(0, _react.cloneElement)(item, _objectSpread(_objectSpread({}, item.props), {}, {
|
|
69
|
-
index:
|
|
79
|
+
index: itemsLength,
|
|
70
80
|
selected: selected
|
|
71
81
|
}));
|
|
72
|
-
|
|
82
|
+
itemsLength++;
|
|
73
83
|
}
|
|
74
84
|
return clonedElement;
|
|
75
85
|
});
|
|
76
86
|
return {
|
|
77
87
|
items: items,
|
|
78
|
-
|
|
88
|
+
itemsLength: itemsLength,
|
|
89
|
+
commandsLength: commandsLength
|
|
79
90
|
};
|
|
80
91
|
}, [children, selected]);
|
|
81
|
-
(0, _react.useEffect)(function () {
|
|
82
|
-
if (search.length === 0) {
|
|
83
|
-
setSelected(0);
|
|
84
|
-
}
|
|
85
|
-
}, [search, selected]);
|
|
86
92
|
var handleChangeSelected = function handleChangeSelected(direction) {
|
|
87
93
|
var items = document.querySelectorAll(".cp-item");
|
|
88
94
|
var index = 0;
|
|
@@ -132,7 +138,7 @@ var CommandPallete = function CommandPallete(_ref) {
|
|
|
132
138
|
if (e.key === "End") {
|
|
133
139
|
e.preventDefault();
|
|
134
140
|
scrollToBottom();
|
|
135
|
-
setSelected(filterChildren.
|
|
141
|
+
setSelected(filterChildren.itemsLength - 1);
|
|
136
142
|
}
|
|
137
143
|
if (e.key === "Home") {
|
|
138
144
|
e.preventDefault();
|
|
@@ -148,7 +154,9 @@ var CommandPallete = function CommandPallete(_ref) {
|
|
|
148
154
|
}, /*#__PURE__*/_react.default.createElement(_CommandPalleteHeader.CommandPalleteHeader, {
|
|
149
155
|
search: search,
|
|
150
156
|
handleChange: handleChange,
|
|
151
|
-
onChangeSearch: onChangeSearch
|
|
157
|
+
onChangeSearch: onChangeSearch,
|
|
158
|
+
commandsLength: filterChildren.commandsLength,
|
|
159
|
+
itemsLength: filterChildren.itemsLength
|
|
152
160
|
})), /*#__PURE__*/_react.default.createElement(_CommandPallete.StyledCommandPalleteWrapper, {
|
|
153
161
|
ref: listWrapperRef
|
|
154
162
|
}, filterChildren.items))));
|
|
@@ -157,4 +165,5 @@ exports.CommandPallete = CommandPallete;
|
|
|
157
165
|
CommandPallete.displayName = "CommandPallete";
|
|
158
166
|
CommandPallete.List = _CommandPalleteList.CommandPalleteList;
|
|
159
167
|
CommandPallete.Item = _CommandPalleteItem.CommandPalleteItem;
|
|
168
|
+
CommandPallete.CommandItem = _CommandPalleteCommandItem.CommandPalleteCommandItem;
|
|
160
169
|
//# sourceMappingURL=CommandPallete.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CommandPallete.js","names":["CommandPallete","children","onChangeSearch","search","mode","setMode","rest","useState","selected","setSelected","listWrapperRef","useRef","handleChange","e","target","value","scrollToTop","current","scrollTo","top","behavior","scrollToBottom","scrollHeight","filterChildren","useMemo","
|
|
1
|
+
{"version":3,"file":"CommandPallete.js","names":["CommandPallete","children","onChangeSearch","search","mode","setMode","rest","useState","selected","setSelected","listWrapperRef","useRef","handleChange","e","target","value","scrollToTop","current","scrollTo","top","behavior","scrollToBottom","scrollHeight","filterChildren","useMemo","itemsLength","commandsLength","items","deepMap","child","item","clonedElement","type","CommandPalleteList","cloneElement","props","CommandPalleteCommandItem","index","CommandPalleteItem","handleChangeSelected","direction","document","querySelectorAll","newIndex","newItem","forEach","_","i","length","scrollIntoView","block","key","preventDefault","displayName","List","Item","CommandItem"],"sources":["../../../../src/components/CommandPallete/CommandPallete.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n cloneElement,\n PropsWithChildren,\n ReactElement,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { deepMap } from \"react-children-utilities\";\nimport { Dialog, DialogProps } from \"../Dialog\";\nimport {\n StyledCommandPallete,\n StyledCommandPalleteWrapper,\n} from \"./CommandPallete.styles\";\nimport { CommandPalleteCommandItem } from \"./CommandPalleteCommandItem\";\nimport { CommandPalleteHeader } from \"./CommandPalleteHeader\";\nimport {\n CommandPalleteItem,\n CommandPalleteItemProps,\n} from \"./CommandPalleteItem\";\nimport { CommandPalleteList } from \"./CommandPalleteList\";\n\nimport { ModeContextProvider, SelectedContextProvider } from \"./context\";\n\nexport interface CommandPalleteProps extends DialogProps {\n onChangeSearch: (search: string) => void;\n search: string;\n mode: string;\n setMode: (value: string) => void;\n loading?: boolean;\n}\n\nexport const CommandPallete = ({\n children,\n onChangeSearch,\n search,\n mode,\n setMode,\n ...rest\n}: PropsWithChildren<CommandPalleteProps>) => {\n const [selected, setSelected] = useState<number>(0);\n const listWrapperRef = useRef<HTMLDivElement>(null);\n\n const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n onChangeSearch(e.target.value);\n };\n\n const scrollToTop = () => {\n listWrapperRef.current?.scrollTo({ top: 0, behavior: \"smooth\" });\n };\n\n const scrollToBottom = () => {\n listWrapperRef.current?.scrollTo({\n top: listWrapperRef.current.scrollHeight,\n behavior: \"smooth\",\n });\n };\n\n const filterChildren = useMemo(() => {\n let itemsLength = 0;\n let commandsLength = 0;\n\n const items = deepMap(children, (child) => {\n const item = child as ReactElement<CommandPalleteItemProps>;\n let clonedElement;\n\n if (item && item.type === CommandPalleteList) {\n clonedElement = cloneElement(item, {\n ...item.props,\n });\n }\n\n if (item && item.type === CommandPalleteCommandItem) {\n clonedElement = cloneElement(item, {\n ...item.props,\n index: itemsLength,\n selected,\n });\n\n itemsLength++;\n commandsLength++;\n }\n\n if (item && item.type === CommandPalleteItem) {\n clonedElement = cloneElement(item, {\n ...item.props,\n index: itemsLength,\n selected,\n });\n\n itemsLength++;\n }\n\n return clonedElement;\n });\n\n return { items, itemsLength, commandsLength };\n }, [children, selected]);\n\n const handleChangeSelected = (direction?: \"up\" | \"down\") => {\n const items = document.querySelectorAll(\".cp-item\");\n\n let index = 0;\n let newIndex = 0;\n let newItem: Element | null = null;\n\n if (direction === \"down\") {\n items.forEach((_, i) => {\n if (i === selected) {\n index = i;\n }\n });\n\n newIndex = index === items.length - 1 ? 0 : index + 1;\n } else if (direction === \"up\") {\n items.forEach((_, i) => {\n if (i === selected) {\n index = i;\n }\n });\n\n newIndex = !index ? items.length - 1 : index - 1;\n } else {\n setSelected(0);\n }\n\n newItem = items[newIndex];\n\n if (newItem && typeof newIndex === \"number\") {\n setSelected(newIndex);\n\n newItem.scrollIntoView({\n behavior: \"smooth\",\n block: newIndex ? \"center\" : \"end\",\n });\n }\n };\n\n return (\n <Dialog {...rest}>\n <SelectedContextProvider value={{ selected: selected, setSelected }}>\n <StyledCommandPallete\n onKeyDown={(e) => {\n if (e.key === \"ArrowDown\") {\n e.preventDefault();\n handleChangeSelected(\"down\");\n }\n\n if (e.key === \"ArrowUp\") {\n e.preventDefault();\n handleChangeSelected(\"up\");\n }\n\n if (e.key === \"End\") {\n e.preventDefault();\n scrollToBottom();\n setSelected(filterChildren.itemsLength - 1);\n }\n\n if (e.key === \"Home\") {\n e.preventDefault();\n scrollToTop();\n setSelected(0);\n }\n }}\n >\n <ModeContextProvider value={{ mode, setMode }}>\n <CommandPalleteHeader\n search={search}\n handleChange={handleChange}\n onChangeSearch={onChangeSearch}\n commandsLength={filterChildren.commandsLength}\n itemsLength={filterChildren.itemsLength}\n />\n </ModeContextProvider>\n\n <StyledCommandPalleteWrapper ref={listWrapperRef}>\n {filterChildren.items}\n </StyledCommandPalleteWrapper>\n </StyledCommandPallete>\n </SelectedContextProvider>\n </Dialog>\n );\n};\n\nCommandPallete.displayName = \"CommandPallete\";\n\nCommandPallete.List = CommandPalleteList;\nCommandPallete.Item = CommandPalleteItem;\nCommandPallete.CommandItem = CommandPalleteCommandItem;\n"],"mappings":"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"}
|
|
@@ -32,7 +32,7 @@ exports.StyledSearchIcon = StyledSearchIcon;
|
|
|
32
32
|
var StyledInput = _styledComponents.default.input.withConfig({
|
|
33
33
|
displayName: "CommandPalletestyles__StyledInput",
|
|
34
34
|
componentId: "sc-16m145d-4"
|
|
35
|
-
})(["all:unset;caret-color:var(--color-primary);color:var(--color-theme-900);width:100%;", "{font-size:32px;font-weight:300;letter-spacing:0.5px;line-height:44px;}::-webkit-outer-spin-button,::-webkit-inner-spin-button{
|
|
35
|
+
})(["all:unset;caret-color:var(--color-primary);color:var(--color-theme-900);width:100%;", "{font-size:32px;font-weight:300;letter-spacing:0.5px;line-height:44px;}::-webkit-outer-spin-button,::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}&[type=\"number\"]{-moz-appearance:textfield;}::placeholder{color:var(--color-theme-transparent-500);}"], _BreakPoints.screen.sm);
|
|
36
36
|
exports.StyledInput = StyledInput;
|
|
37
37
|
var StyledParameter = _styledComponents.default.span.withConfig({
|
|
38
38
|
displayName: "CommandPalletestyles__StyledParameter",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CommandPallete.styles.js","names":["StyledCommandPallete","styled","div","FontStyle","StyledCommandPalleteWrapper","StyledCommandPalleteHeader","StyledSearchIcon","StyledInput","input","screen","sm","StyledParameter","span","StyledActionWrapper","StyledIcon","StyledCommandPalleteList","ul","StyledHeading","p","StyledCommandPalleteItem","li","$selected","StyledSpinnerLoader","SpinnerLoader"],"sources":["../../../../src/components/CommandPallete/CommandPallete.styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { FontStyle } from \"../FontStyle\";\nimport { screen } from \"../BreakPoints\";\nimport { SpinnerLoader } from \"../Loaders\";\n\nexport const StyledCommandPallete = styled.div`\n ${FontStyle}\n background-color: var(--page-paper-main);\n border-radius: 10px;\n box-sizing: border-box;\n max-width: 600px;\n`;\n\nexport const StyledCommandPalleteWrapper = styled.div`\n overflow-x: hidden;\n overflow-y: auto;\n max-height: 450px;\n\n &:not(:empty) {\n padding-bottom: 8px;\n padding-top: 8px;\n }\n`;\n\nexport const StyledCommandPalleteHeader = styled.div`\n align-items: center;\n display: flex;\n padding-bottom: 12px;\n padding-left: 16px;\n padding-right: 16px;\n padding-top: 12px;\n border-bottom: 1px solid var(--color-theme-400);\n`;\n\nexport const StyledSearchIcon = styled.div`\n margin-right: 8px;\n\n svg {\n vertical-align: middle;\n }\n`;\n\nexport const StyledInput = styled.input`\n all: unset;\n caret-color: var(--color-primary);\n color: var(--color-theme-900);\n width: 100%;\n\n ${screen.sm} {\n font-size: 32px;\n font-weight: 300;\n letter-spacing: 0.5px;\n line-height: 44px;\n }\n\n ::-webkit-outer-spin-button,\n ::-webkit-inner-spin-button {\n
|
|
1
|
+
{"version":3,"file":"CommandPallete.styles.js","names":["StyledCommandPallete","styled","div","FontStyle","StyledCommandPalleteWrapper","StyledCommandPalleteHeader","StyledSearchIcon","StyledInput","input","screen","sm","StyledParameter","span","StyledActionWrapper","StyledIcon","StyledCommandPalleteList","ul","StyledHeading","p","StyledCommandPalleteItem","li","$selected","StyledSpinnerLoader","SpinnerLoader"],"sources":["../../../../src/components/CommandPallete/CommandPallete.styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { FontStyle } from \"../FontStyle\";\nimport { screen } from \"../BreakPoints\";\nimport { SpinnerLoader } from \"../Loaders\";\n\nexport const StyledCommandPallete = styled.div`\n ${FontStyle}\n background-color: var(--page-paper-main);\n border-radius: 10px;\n box-sizing: border-box;\n max-width: 600px;\n`;\n\nexport const StyledCommandPalleteWrapper = styled.div`\n overflow-x: hidden;\n overflow-y: auto;\n max-height: 450px;\n\n &:not(:empty) {\n padding-bottom: 8px;\n padding-top: 8px;\n }\n`;\n\nexport const StyledCommandPalleteHeader = styled.div`\n align-items: center;\n display: flex;\n padding-bottom: 12px;\n padding-left: 16px;\n padding-right: 16px;\n padding-top: 12px;\n border-bottom: 1px solid var(--color-theme-400);\n`;\n\nexport const StyledSearchIcon = styled.div`\n margin-right: 8px;\n\n svg {\n vertical-align: middle;\n }\n`;\n\nexport const StyledInput = styled.input`\n all: unset;\n caret-color: var(--color-primary);\n color: var(--color-theme-900);\n width: 100%;\n\n ${screen.sm} {\n font-size: 32px;\n font-weight: 300;\n letter-spacing: 0.5px;\n line-height: 44px;\n }\n\n ::-webkit-outer-spin-button,\n ::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n &[type=\"number\"] {\n -moz-appearance: textfield;\n }\n\n ::placeholder {\n color: var(--color-theme-transparent-500);\n }\n`;\n\nexport const StyledParameter = styled.span`\n color: var(--color-theme-transparent-500);\n margin-right: 8px;\n\n ${screen.sm} {\n font-size: 32px;\n font-weight: 300;\n letter-spacing: 0.5px;\n line-height: 44px;\n }\n`;\n\nexport const StyledActionWrapper = styled.div`\n align-items: center;\n display: flex;\n gap: 8px;\n`;\n\nexport const StyledIcon = styled.div`\n margin-right: 8px;\n\n svg {\n vertical-align: middle;\n }\n`;\n\nexport const StyledCommandPalleteList = styled.ul`\n list-style-type: none;\n margin: 0;\n padding: 0;\n overflow: hidden;\n\n &:not(:first-child) {\n border-top: 1px solid var(--color-theme-400);\n }\n`;\n\nexport const StyledHeading = styled.p`\n font-size: 12px;\n margin-top: 12px;\n margin-bottom: 4px;\n font-weight: bold;\n padding-left: 18px;\n letter-spacing: 0.5px;\n color: var(--color-theme-600);\n`;\n\n// prettier-ignore\nexport const StyledCommandPalleteItem = styled.li<{$selected: boolean}>`\n align-items: center;\n cursor: pointer;\n display: flex;\n padding-bottom: 12px;\n padding-left: 18px;\n padding-right: 18px;\n padding-top: 12px;\n position: relative;\n background-color: ${({$selected}) => $selected ? \"var(--color-theme-200)\" : \"transparent\"};\n\n &:focus {\n background-color: var(--color-theme-200);\n }\n\n &::before {\n display: ${({$selected}) => $selected ? \"block\" : \"none\"};\n background-color: var(--color-primary);\n content: \"\";\n height: 100%;\n left: 0;\n position: absolute;\n width: 2px;\n }\n\n &:focus {\n outline: none;\n }\n`;\n\nexport const StyledSpinnerLoader = styled(SpinnerLoader)`\n margin-right: 4px;\n`;\n"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAA2C;AAEpC,IAAMA,oBAAoB,GAAGC,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,+GAC1CC,oBAAS,CAKZ;AAAC;AAEK,IAAMC,2BAA2B,GAAGH,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,6GASpD;AAAC;AAEK,IAAMG,0BAA0B,GAAGJ,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,iKAQnD;AAAC;AAEK,IAAMI,gBAAgB,GAAGL,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,oDAMzC;AAAC;AAEK,IAAMK,WAAW,GAAGN,yBAAM,CAACO,KAAK;EAAA;EAAA;AAAA,uWAMnCC,mBAAM,CAACC,EAAE,CAoBZ;AAAC;AAEK,IAAMC,eAAe,GAAGV,yBAAM,CAACW,IAAI;EAAA;EAAA;AAAA,8IAItCH,mBAAM,CAACC,EAAE,CAMZ;AAAC;AAEK,IAAMG,mBAAmB,GAAGZ,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,gDAI5C;AAAC;AAEK,IAAMY,UAAU,GAAGb,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,oDAMnC;AAAC;AAEK,IAAMa,wBAAwB,GAAGd,yBAAM,CAACe,EAAE;EAAA;EAAA;AAAA,iIAShD;AAAC;AAEK,IAAMC,aAAa,GAAGhB,yBAAM,CAACiB,CAAC;EAAA;EAAA;AAAA,8IAQpC;;AAED;AAAA;AACO,IAAMC,wBAAwB,GAAGlB,yBAAM,CAACmB,EAAE;EAAA;EAAA;AAAA,2WAS3B;EAAA,IAAEC,SAAS,QAATA,SAAS;EAAA,OAAMA,SAAS,GAAG,wBAAwB,GAAG,aAAa;AAAA,GAO5E;EAAA,IAAEA,SAAS,SAATA,SAAS;EAAA,OAAMA,SAAS,GAAG,OAAO,GAAG,MAAM;AAAA,EAY3D;AAAC;AAEK,IAAMC,mBAAmB,GAAG,IAAArB,yBAAM,EAACsB,sBAAa,CAAC;EAAA;EAAA;AAAA,yBAEvD;AAAC"}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.CommandPalleteCommandItem = void 0;
|
|
8
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
9
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
|
10
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
11
|
+
var _Icons = require("../Icons");
|
|
12
|
+
var _Typography = require("../Typography/Typography");
|
|
13
|
+
var _CommandPallete = require("./CommandPallete.styles");
|
|
14
|
+
var _context = require("./context");
|
|
15
|
+
var _excluded = ["title", "renderIcon", "className", "index"];
|
|
16
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
17
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
18
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
|
+
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
20
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
21
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
22
|
+
var CommandPalleteCommandItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
23
|
+
var title = _ref.title,
|
|
24
|
+
renderIcon = _ref.renderIcon,
|
|
25
|
+
className = _ref.className,
|
|
26
|
+
index = _ref.index,
|
|
27
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
|
28
|
+
var icon = renderIcon();
|
|
29
|
+
var _useSelectedContext = (0, _context.useSelectedContext)(),
|
|
30
|
+
selected = _useSelectedContext.selected,
|
|
31
|
+
setSelected = _useSelectedContext.setSelected;
|
|
32
|
+
var onMouseOver = function onMouseOver() {
|
|
33
|
+
setSelected(index);
|
|
34
|
+
};
|
|
35
|
+
return /*#__PURE__*/_react.default.createElement(_CommandPallete.StyledCommandPalleteItem, _extends({}, rest, {
|
|
36
|
+
ref: ref,
|
|
37
|
+
className: (0, _classnames.default)("cp-item cp-command", className),
|
|
38
|
+
tabIndex: 1,
|
|
39
|
+
"aria-selected": selected === index,
|
|
40
|
+
onMouseOver: onMouseOver,
|
|
41
|
+
$selected: index === selected
|
|
42
|
+
}), /*#__PURE__*/_react.default.createElement(_CommandPallete.StyledIcon, null, icon), /*#__PURE__*/_react.default.createElement(_StyledTypography, {
|
|
43
|
+
overflow: "truncate",
|
|
44
|
+
whitespace: "no-wrap",
|
|
45
|
+
variant: "Body 1",
|
|
46
|
+
color: "primary"
|
|
47
|
+
}, title), /*#__PURE__*/_react.default.createElement(_Icons.ArrowRightIcon, null));
|
|
48
|
+
});
|
|
49
|
+
exports.CommandPalleteCommandItem = CommandPalleteCommandItem;
|
|
50
|
+
CommandPalleteCommandItem.displayName = "CommandPalleteCommandItem";
|
|
51
|
+
var _StyledTypography = (0, _styledComponents.default)(_Typography.Typography).withConfig({
|
|
52
|
+
displayName: "CommandPalleteCommandItem___StyledTypography",
|
|
53
|
+
componentId: "sc-12i2mxl-0"
|
|
54
|
+
})(["flex:1;"]);
|
|
55
|
+
//# sourceMappingURL=CommandPalleteCommandItem.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CommandPalleteCommandItem.js","names":["CommandPalleteCommandItem","forwardRef","ref","title","renderIcon","className","index","rest","icon","useSelectedContext","selected","setSelected","onMouseOver","classNames","displayName"],"sources":["../../../../src/components/CommandPallete/CommandPalleteCommandItem.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport React, {\n ComponentPropsWithoutRef,\n forwardRef,\n ReactNode,\n Ref,\n} from \"react\";\nimport { ArrowRightIcon } from \"../Icons\";\nimport { Typography } from \"../Typography/Typography\";\nimport { StyledCommandPalleteItem, StyledIcon } from \"./CommandPallete.styles\";\nimport { useSelectedContext } from \"./context\";\n\nexport interface CommandPalleteCommandItemProps\n extends ComponentPropsWithoutRef<\"li\"> {\n title: string;\n renderIcon: () => ReactNode;\n className?: string;\n index?: number;\n selected?: number;\n}\n\nexport const CommandPalleteCommandItem = forwardRef(\n (\n {\n title,\n renderIcon,\n className,\n index,\n ...rest\n }: CommandPalleteCommandItemProps,\n ref: Ref<HTMLLIElement>\n ) => {\n const icon = renderIcon();\n const { selected, setSelected } = useSelectedContext();\n\n const onMouseOver = () => {\n setSelected(index as number);\n };\n\n return (\n <StyledCommandPalleteItem\n {...rest}\n ref={ref}\n className={classNames(\"cp-item cp-command\", className)}\n tabIndex={1}\n aria-selected={selected === index}\n onMouseOver={onMouseOver}\n $selected={index === selected}\n >\n <StyledIcon>{icon}</StyledIcon>\n <Typography\n overflow=\"truncate\"\n whitespace=\"no-wrap\"\n variant=\"Body 1\"\n color=\"primary\"\n css={`\n flex: 1;\n `}\n >\n {title}\n </Typography>\n <ArrowRightIcon />\n </StyledCommandPalleteItem>\n );\n }\n);\n\nCommandPalleteCommandItem.displayName = \"CommandPalleteCommandItem\";\n"],"mappings":";;;;;;;;AAAA;AACA;AAMA;AACA;AACA;AACA;AAA+C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWxC,IAAMA,yBAAyB,gBAAG,IAAAC,iBAAU,EACjD,gBAQEC,GAAuB,EACpB;EAAA,IAPDC,KAAK,QAALA,KAAK;IACLC,UAAU,QAAVA,UAAU;IACVC,SAAS,QAATA,SAAS;IACTC,KAAK,QAALA,KAAK;IACFC,IAAI;EAIT,IAAMC,IAAI,GAAGJ,UAAU,EAAE;EACzB,0BAAkC,IAAAK,2BAAkB,GAAE;IAA9CC,QAAQ,uBAARA,QAAQ;IAAEC,WAAW,uBAAXA,WAAW;EAE7B,IAAMC,WAAW,GAAG,SAAdA,WAAW,GAAS;IACxBD,WAAW,CAACL,KAAK,CAAW;EAC9B,CAAC;EAED,oBACE,6BAAC,wCAAwB,eACnBC,IAAI;IACR,GAAG,EAAEL,GAAI;IACT,SAAS,EAAE,IAAAW,mBAAU,EAAC,oBAAoB,EAAER,SAAS,CAAE;IACvD,QAAQ,EAAE,CAAE;IACZ,iBAAeK,QAAQ,KAAKJ,KAAM;IAClC,WAAW,EAAEM,WAAY;IACzB,SAAS,EAAEN,KAAK,KAAKI;EAAS,iBAE9B,6BAAC,0BAAU,QAAEF,IAAI,CAAc,eAC/B;IACE,QAAQ,EAAC,UAAU;IACnB,UAAU,EAAC,SAAS;IACpB,OAAO,EAAC,QAAQ;IAChB,KAAK,EAAC;EAAS,GAKdL,KAAK,CACK,eACb,6BAAC,qBAAc,OAAG,CACO;AAE/B,CAAC,CACF;AAAC;AAEFH,yBAAyB,CAACc,WAAW,GAAG,2BAA2B;AAAC;EAAA;EAAA;AAAA"}
|
|
@@ -19,13 +19,16 @@ var CommandPalleteHeader = function CommandPalleteHeader(_ref) {
|
|
|
19
19
|
handleChange = _ref.handleChange,
|
|
20
20
|
_ref$loading = _ref.loading,
|
|
21
21
|
loading = _ref$loading === void 0 ? false : _ref$loading,
|
|
22
|
+
commandsLength = _ref.commandsLength,
|
|
23
|
+
itemsLength = _ref.itemsLength,
|
|
22
24
|
onChangeSearch = _ref.onChangeSearch;
|
|
23
25
|
var inputRef = (0, _react.useRef)(null);
|
|
24
26
|
var _useModeContext = (0, _ModeContext.useModeContext)(),
|
|
25
27
|
mode = _useModeContext.mode,
|
|
26
28
|
setMode = _useModeContext.setMode;
|
|
27
29
|
var _useSelectedContext = (0, _context.useSelectedContext)(),
|
|
28
|
-
setSelected = _useSelectedContext.setSelected
|
|
30
|
+
setSelected = _useSelectedContext.setSelected,
|
|
31
|
+
selected = _useSelectedContext.selected;
|
|
29
32
|
var focusInput = function focusInput() {
|
|
30
33
|
if (inputRef && inputRef.current) {
|
|
31
34
|
inputRef.current.focus();
|
|
@@ -33,10 +36,18 @@ var CommandPalleteHeader = function CommandPalleteHeader(_ref) {
|
|
|
33
36
|
};
|
|
34
37
|
var clearInput = function clearInput() {
|
|
35
38
|
if (inputRef && inputRef.current) {
|
|
36
|
-
inputRef.current.value = "";
|
|
37
39
|
onChangeSearch("");
|
|
38
40
|
}
|
|
39
41
|
};
|
|
42
|
+
(0, _react.useEffect)(function () {
|
|
43
|
+
if (search.length > 0) {
|
|
44
|
+
if (itemsLength > commandsLength) {
|
|
45
|
+
setSelected(commandsLength);
|
|
46
|
+
} else {
|
|
47
|
+
setSelected(0);
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
}, [search, commandsLength, itemsLength, setSelected]);
|
|
40
51
|
return /*#__PURE__*/_react.default.createElement(_CommandPallete.StyledCommandPalleteHeader, {
|
|
41
52
|
className: "cp-header"
|
|
42
53
|
}, /*#__PURE__*/_react.default.createElement(_CommandPallete.StyledSearchIcon, null, /*#__PURE__*/_react.default.createElement(_Icons.SearchLargeIcon, null)), mode === "id" ? /*#__PURE__*/_react.default.createElement(_CommandPallete.StyledParameter, null, "ID#:") : null, /*#__PURE__*/_react.default.createElement(_CommandPallete.StyledInput, {
|
|
@@ -52,9 +63,15 @@ var CommandPalleteHeader = function CommandPalleteHeader(_ref) {
|
|
|
52
63
|
spellCheck: false,
|
|
53
64
|
value: search,
|
|
54
65
|
onKeyDown: function onKeyDown(e) {
|
|
55
|
-
if (e.key === "Backspace" && mode
|
|
66
|
+
if (e.key === "Backspace" && mode !== "default" && search.length === 0) {
|
|
56
67
|
setMode("default");
|
|
57
68
|
}
|
|
69
|
+
if (e.key === "Enter") {
|
|
70
|
+
var selectedItem = document.querySelectorAll(".cp-item")[selected];
|
|
71
|
+
if (itemsLength > 0) {
|
|
72
|
+
selectedItem.click();
|
|
73
|
+
}
|
|
74
|
+
}
|
|
58
75
|
},
|
|
59
76
|
onChange: function onChange(e) {
|
|
60
77
|
var inputText = e.target.value;
|
|
@@ -63,7 +80,6 @@ var CommandPalleteHeader = function CommandPalleteHeader(_ref) {
|
|
|
63
80
|
clearInput();
|
|
64
81
|
}
|
|
65
82
|
handleChange(e);
|
|
66
|
-
setSelected(0);
|
|
67
83
|
},
|
|
68
84
|
onPaste: function onPaste(e) {
|
|
69
85
|
var pastedText = e.clipboardData.getData("text");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CommandPalleteHeader.js","names":["CommandPalleteHeader","search","handleChange","loading","onChangeSearch","inputRef","useRef","useModeContext","mode","setMode","useSelectedContext","setSelected","focusInput","current","focus","clearInput","
|
|
1
|
+
{"version":3,"file":"CommandPalleteHeader.js","names":["CommandPalleteHeader","search","handleChange","loading","commandsLength","itemsLength","onChangeSearch","inputRef","useRef","useModeContext","mode","setMode","useSelectedContext","setSelected","selected","focusInput","current","focus","clearInput","useEffect","length","e","key","selectedItem","document","querySelectorAll","click","inputText","target","value","startsWith","pastedText","clipboardData","getData","displayName"],"sources":["../../../../src/components/CommandPallete/CommandPalleteHeader.tsx"],"sourcesContent":["import React, { ChangeEvent, useEffect, useRef } from \"react\";\nimport { IconButton } from \"../IconButton\";\nimport { CloseIcon, HashtagIcon, SearchLargeIcon } from \"../Icons\";\nimport { Tooltip } from \"../Tooltip\";\nimport {\n StyledActionWrapper,\n StyledCommandPalleteHeader,\n StyledInput,\n StyledParameter,\n StyledSearchIcon,\n StyledSpinnerLoader,\n} from \"./CommandPallete.styles\";\nimport { useSelectedContext } from \"./context\";\n\nimport { useModeContext } from \"./context/ModeContext\";\n\nexport interface CommandPalleteHeaderProps {\n search: string;\n handleChange: (e: ChangeEvent<HTMLInputElement>) => void;\n loading?: boolean;\n onChangeSearch: (value: string) => void;\n commandsLength: number;\n itemsLength: number;\n}\n\nexport const CommandPalleteHeader = ({\n search,\n handleChange,\n loading = false,\n commandsLength,\n itemsLength,\n onChangeSearch,\n}: CommandPalleteHeaderProps) => {\n const inputRef = useRef<HTMLInputElement>(null);\n const { mode, setMode } = useModeContext();\n const { setSelected, selected } = useSelectedContext();\n\n const focusInput = () => {\n if (inputRef && inputRef.current) {\n inputRef.current.focus();\n }\n };\n\n const clearInput = () => {\n if (inputRef && inputRef.current) {\n onChangeSearch(\"\");\n }\n };\n\n useEffect(() => {\n if (search.length > 0) {\n if (itemsLength > commandsLength) {\n setSelected(commandsLength);\n } else {\n setSelected(0);\n }\n }\n }, [search, commandsLength, itemsLength, setSelected]);\n\n return (\n <StyledCommandPalleteHeader className=\"cp-header\">\n <StyledSearchIcon>\n <SearchLargeIcon />\n </StyledSearchIcon>\n\n {mode === \"id\" ? <StyledParameter>ID#:</StyledParameter> : null}\n\n <StyledInput\n ref={inputRef}\n autoFocus\n placeholder={mode === \"id\" ? \"22\" : \"Search or jump to\"}\n type={mode === \"id\" ? \"number\" : \"text\"}\n aria-autocomplete=\"list\"\n autoCapitalize=\"none\"\n autoComplete=\"off\"\n autoCorrect=\"off\"\n role=\"combobox\"\n spellCheck={false}\n value={search}\n onKeyDown={(e) => {\n if (\n e.key === \"Backspace\" &&\n mode !== \"default\" &&\n search.length === 0\n ) {\n setMode(\"default\");\n }\n\n if (e.key === \"Enter\") {\n const selectedItem = document.querySelectorAll(\".cp-item\")[\n selected\n ] as HTMLElement;\n\n if (itemsLength > 0) {\n selectedItem.click();\n }\n }\n }}\n onChange={(e) => {\n const inputText = e.target.value;\n\n if (inputText.startsWith(\"#\")) {\n setMode(\"id\");\n clearInput();\n }\n\n handleChange(e);\n }}\n onPaste={(e) => {\n const pastedText = e.clipboardData.getData(\"text\");\n\n if (pastedText.startsWith(\"#\")) {\n setMode(\"id\");\n }\n }}\n />\n\n <StyledActionWrapper>\n {loading ? (\n <StyledSpinnerLoader\n aria-busy={true}\n aria-label=\"Loading...\"\n aria-valuemax={100}\n aria-valuemin={0}\n role=\"progressbar\"\n />\n ) : null}\n\n {mode !== \"id\" && search.length === 0 ? (\n <Tooltip title=\"Search by ID\" placement=\"top\">\n <IconButton\n onKeyPress={(e) => {\n if (e.key === \"Enter\") {\n setMode(\"id\");\n clearInput();\n focusInput();\n }\n }}\n onClick={() => {\n setMode(\"id\");\n clearInput();\n focusInput();\n }}\n variant=\"text gray\"\n >\n <HashtagIcon />\n </IconButton>\n </Tooltip>\n ) : null}\n\n {search.length > 0 || mode === \"id\" ? (\n <Tooltip\n title={mode === \"id\" ? \"Close ID mode\" : \"Clear\"}\n placement=\"top\"\n >\n <IconButton\n variant=\"text gray\"\n onKeyPress={(e) => {\n if (e.key === \"Enter\") {\n setMode(\"default\");\n clearInput();\n focusInput();\n }\n }}\n onClick={() => {\n setMode(\"default\");\n clearInput();\n focusInput();\n }}\n >\n <CloseIcon />\n </IconButton>\n </Tooltip>\n ) : null}\n </StyledActionWrapper>\n </StyledCommandPalleteHeader>\n );\n};\n\nCommandPalleteHeader.displayName = \"CommandPalleteItem\";\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CommandPalleteItem.js","names":["CommandPalleteItem","forwardRef","ref","title","renderIcon","className","index","rest","icon","useSelectedContext","selected","setSelected","onMouseOver","classNames","displayName"],"sources":["../../../../src/components/CommandPallete/CommandPalleteItem.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport React, {
|
|
1
|
+
{"version":3,"file":"CommandPalleteItem.js","names":["CommandPalleteItem","forwardRef","ref","title","renderIcon","className","index","rest","icon","useSelectedContext","selected","setSelected","onMouseOver","classNames","displayName"],"sources":["../../../../src/components/CommandPallete/CommandPalleteItem.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport React, {\n ComponentPropsWithoutRef,\n forwardRef,\n ReactNode,\n Ref,\n} from \"react\";\nimport { Typography } from \"../Typography/Typography\";\nimport { StyledCommandPalleteItem, StyledIcon } from \"./CommandPallete.styles\";\nimport { useSelectedContext } from \"./context\";\n\nexport interface CommandPalleteItemProps\n extends ComponentPropsWithoutRef<\"li\"> {\n title: string;\n renderIcon: () => ReactNode;\n className?: string;\n index?: number;\n selected?: number;\n}\n\nexport const CommandPalleteItem = forwardRef(\n (\n { title, renderIcon, className, index, ...rest }: CommandPalleteItemProps,\n ref: Ref<HTMLLIElement>\n ) => {\n const icon = renderIcon();\n const { selected, setSelected } = useSelectedContext();\n\n const onMouseOver = () => {\n setSelected(index as number);\n };\n\n return (\n <StyledCommandPalleteItem\n {...rest}\n ref={ref}\n className={classNames(\"cp-item\", className)}\n tabIndex={1}\n aria-selected={selected === index}\n onMouseOver={onMouseOver}\n $selected={index === selected}\n >\n <StyledIcon>{icon}</StyledIcon>\n <Typography\n overflow=\"truncate\"\n whitespace=\"no-wrap\"\n variant=\"Body 1\"\n color=\"primary\"\n >\n {title}\n </Typography>\n </StyledCommandPalleteItem>\n );\n }\n);\n\nCommandPalleteItem.displayName = \"CommandPalleteItem\";\n"],"mappings":";;;;;;;AAAA;AACA;AAMA;AACA;AACA;AAA+C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWxC,IAAMA,kBAAkB,gBAAG,IAAAC,iBAAU,EAC1C,gBAEEC,GAAuB,EACpB;EAAA,IAFDC,KAAK,QAALA,KAAK;IAAEC,UAAU,QAAVA,UAAU;IAAEC,SAAS,QAATA,SAAS;IAAEC,KAAK,QAALA,KAAK;IAAKC,IAAI;EAG9C,IAAMC,IAAI,GAAGJ,UAAU,EAAE;EACzB,0BAAkC,IAAAK,2BAAkB,GAAE;IAA9CC,QAAQ,uBAARA,QAAQ;IAAEC,WAAW,uBAAXA,WAAW;EAE7B,IAAMC,WAAW,GAAG,SAAdA,WAAW,GAAS;IACxBD,WAAW,CAACL,KAAK,CAAW;EAC9B,CAAC;EAED,oBACE,6BAAC,wCAAwB,eACnBC,IAAI;IACR,GAAG,EAAEL,GAAI;IACT,SAAS,EAAE,IAAAW,mBAAU,EAAC,SAAS,EAAER,SAAS,CAAE;IAC5C,QAAQ,EAAE,CAAE;IACZ,iBAAeK,QAAQ,KAAKJ,KAAM;IAClC,WAAW,EAAEM,WAAY;IACzB,SAAS,EAAEN,KAAK,KAAKI;EAAS,iBAE9B,6BAAC,0BAAU,QAAEF,IAAI,CAAc,eAC/B,6BAAC,sBAAU;IACT,QAAQ,EAAC,UAAU;IACnB,UAAU,EAAC,SAAS;IACpB,OAAO,EAAC,QAAQ;IAChB,KAAK,EAAC;EAAS,GAEdL,KAAK,CACK,CACY;AAE/B,CAAC,CACF;AAAC;AAEFH,kBAAkB,CAACc,WAAW,GAAG,oBAAoB"}
|
|
@@ -6,6 +6,7 @@ export interface BadgeProps {
|
|
|
6
6
|
className?: string;
|
|
7
7
|
backgroundColor?: string;
|
|
8
8
|
isVisible?: boolean;
|
|
9
|
+
value?: number;
|
|
9
10
|
}
|
|
10
11
|
/**
|
|
11
12
|
* @component Badge
|
|
@@ -27,6 +28,6 @@ export interface BadgeProps {
|
|
|
27
28
|
* @see
|
|
28
29
|
* https://system.activecollab.com/?path=/story/components-button-indicators-badge--badge
|
|
29
30
|
*/
|
|
30
|
-
export declare const Badge: ({ dimension, className, position, backgroundColor, isVisible, }: BadgeProps) => JSX.Element | null;
|
|
31
|
+
export declare const Badge: ({ dimension, className, position, backgroundColor, isVisible, value, }: BadgeProps) => JSX.Element | null;
|
|
31
32
|
export {};
|
|
32
33
|
//# sourceMappingURL=Badge.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":";AAIA,aAAK,QAAQ,GAAG,UAAU,GAAG,WAAW,GAAG,cAAc,GAAG,aAAa,CAAC;AAE1E,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":";AAIA,aAAK,QAAQ,GAAG,UAAU,GAAG,WAAW,GAAG,cAAc,GAAG,aAAa,CAAC;AAE1E,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,KAAK,2EAOf,UAAU,uBAaZ,CAAC"}
|
|
@@ -30,13 +30,15 @@ export var Badge = function Badge(_ref) {
|
|
|
30
30
|
_ref$backgroundColor = _ref.backgroundColor,
|
|
31
31
|
backgroundColor = _ref$backgroundColor === void 0 ? "#40C37D" : _ref$backgroundColor,
|
|
32
32
|
_ref$isVisible = _ref.isVisible,
|
|
33
|
-
isVisible = _ref$isVisible === void 0 ? true : _ref$isVisible
|
|
33
|
+
isVisible = _ref$isVisible === void 0 ? true : _ref$isVisible,
|
|
34
|
+
value = _ref.value;
|
|
34
35
|
return isVisible ? /*#__PURE__*/React.createElement(StyledBadge, {
|
|
35
36
|
className: classNames("c-badge", className),
|
|
36
37
|
dimension: dimension,
|
|
37
38
|
position: position,
|
|
38
39
|
backgroundColor: backgroundColor,
|
|
39
|
-
role: "status"
|
|
40
|
-
|
|
40
|
+
role: "status",
|
|
41
|
+
value: value
|
|
42
|
+
}, value && value > 100 ? 99 + "+" : value) : null;
|
|
41
43
|
};
|
|
42
44
|
//# sourceMappingURL=Badge.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.js","names":["classNames","React","StyledBadge","Badge","dimension","className","position","backgroundColor","isVisible"],"sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport React from \"react\";\nimport { StyledBadge } from \"./Styles\";\n\ntype Position = \"top-left\" | \"top-right\" | \"bottom-right\" | \"bottom-left\";\n\nexport interface BadgeProps {\n position?: Position;\n dimension?: number;\n className?: string;\n backgroundColor?: string;\n isVisible?: boolean;\n}\n\n/**\n * @component Badge\n * @description\n * In some products, you might need to show a badge on the right corner of the avatar.\n * We call this a badge. Here's an example that shows if the user is online.\n *\n * @prop {position} - dictates the position of a badge.\n * @prop {dimension} - controls the size of a badge (width and height) in pixels.\n * @prop {backgroundColor} - background-color of a badge.\n * @prop {isVisible} - dictates if badge should be visible or not.\n *\n * @example\n * <IconButton variant=\"text gray\" size=\"big\">\n * <BellOffIcon />\n * <Badge position=\"top-right\" backgroundColor=\"red\" dimension={16} />\n * </IconButton>\n *\n * @see\n * https://system.activecollab.com/?path=/story/components-button-indicators-badge--badge\n */\nexport const Badge = ({\n dimension = 8,\n className,\n position = \"bottom-left\",\n backgroundColor = \"#40C37D\",\n isVisible = true,\n}: BadgeProps) => {\n return isVisible ? (\n <StyledBadge\n className={classNames(\"c-badge\", className)}\n dimension={dimension}\n position={position}\n backgroundColor={backgroundColor}\n role=\"status\"\n
|
|
1
|
+
{"version":3,"file":"Badge.js","names":["classNames","React","StyledBadge","Badge","dimension","className","position","backgroundColor","isVisible","value"],"sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport React from \"react\";\nimport { StyledBadge } from \"./Styles\";\n\ntype Position = \"top-left\" | \"top-right\" | \"bottom-right\" | \"bottom-left\";\n\nexport interface BadgeProps {\n position?: Position;\n dimension?: number;\n className?: string;\n backgroundColor?: string;\n isVisible?: boolean;\n value?: number;\n}\n\n/**\n * @component Badge\n * @description\n * In some products, you might need to show a badge on the right corner of the avatar.\n * We call this a badge. Here's an example that shows if the user is online.\n *\n * @prop {position} - dictates the position of a badge.\n * @prop {dimension} - controls the size of a badge (width and height) in pixels.\n * @prop {backgroundColor} - background-color of a badge.\n * @prop {isVisible} - dictates if badge should be visible or not.\n *\n * @example\n * <IconButton variant=\"text gray\" size=\"big\">\n * <BellOffIcon />\n * <Badge position=\"top-right\" backgroundColor=\"red\" dimension={16} />\n * </IconButton>\n *\n * @see\n * https://system.activecollab.com/?path=/story/components-button-indicators-badge--badge\n */\nexport const Badge = ({\n dimension = 8,\n className,\n position = \"bottom-left\",\n backgroundColor = \"#40C37D\",\n isVisible = true,\n value,\n}: BadgeProps) => {\n return isVisible ? (\n <StyledBadge\n className={classNames(\"c-badge\", className)}\n dimension={dimension}\n position={position}\n backgroundColor={backgroundColor}\n role=\"status\"\n value={value}\n >\n {value && value > 100 ? 99 + \"+\" : value}\n </StyledBadge>\n ) : null;\n};\n"],"mappings":"AAAA,OAAOA,UAAU,MAAM,YAAY;AACnC,OAAOC,KAAK,MAAM,OAAO;AACzB,SAASC,WAAW,QAAQ,UAAU;AAatC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,KAAK,GAAG,SAARA,KAAK,OAOA;EAAA,0BANhBC,SAAS;IAATA,SAAS,+BAAG,CAAC;IACbC,SAAS,QAATA,SAAS;IAAA,qBACTC,QAAQ;IAARA,QAAQ,8BAAG,aAAa;IAAA,4BACxBC,eAAe;IAAfA,eAAe,qCAAG,SAAS;IAAA,sBAC3BC,SAAS;IAATA,SAAS,+BAAG,IAAI;IAChBC,KAAK,QAALA,KAAK;EAEL,OAAOD,SAAS,gBACd,oBAAC,WAAW;IACV,SAAS,EAAER,UAAU,CAAC,SAAS,EAAEK,SAAS,CAAE;IAC5C,SAAS,EAAED,SAAU;IACrB,QAAQ,EAAEE,QAAS;IACnB,eAAe,EAAEC,eAAgB;IACjC,IAAI,EAAC,QAAQ;IACb,KAAK,EAAEE;EAAM,GAEZA,KAAK,IAAIA,KAAK,GAAG,GAAG,GAAG,EAAE,GAAG,GAAG,GAAGA,KAAK,CAC5B,GACZ,IAAI;AACV,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Badge/Styles.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Badge/Styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,eAAO,MAAM,WAAW,qFA8CvB,CAAC"}
|
|
@@ -1,13 +1,16 @@
|
|
|
1
1
|
import styled, { css } from "styled-components";
|
|
2
|
+
import { FontStyle } from "../FontStyle";
|
|
2
3
|
export var StyledBadge = styled.div.withConfig({
|
|
3
4
|
displayName: "Styles__StyledBadge",
|
|
4
5
|
componentId: "sc-6o8do5-0"
|
|
5
|
-
})(["background-color:", ";block-size:", ";border-radius:100%;border:2px solid var(--page-paper-main);inline-size:", ";
|
|
6
|
+
})(["", " align-items:center;background-color:", ";block-size:", ";border-radius:100%;border:2px solid var(--page-paper-main);color:var(--color-theme-100);display:flex;font-size:12px;font-weight:500;inline-size:", ";justify-content:center;padding:", ";pointer-events:none;position:absolute;z-index:1;", " ", " ", " ", ""], FontStyle, function (props) {
|
|
6
7
|
return props.backgroundColor;
|
|
7
8
|
}, function (props) {
|
|
8
9
|
return props.dimension + "px";
|
|
9
10
|
}, function (props) {
|
|
10
11
|
return props.dimension + "px";
|
|
12
|
+
}, function (props) {
|
|
13
|
+
return props.value && (props.value > 99 ? "4px" : props.value < 100 && "2px");
|
|
11
14
|
}, function (_ref) {
|
|
12
15
|
var position = _ref.position;
|
|
13
16
|
return position === "top-left" && css(["inset-block-start:0;inset-inline-start:0;"]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.js","names":["styled","css","StyledBadge","div","props","backgroundColor","dimension","position"],"sources":["../../../../src/components/Badge/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { BadgeProps } from \"./Badge\";\n\nexport const StyledBadge = styled.div<Partial<BadgeProps>>`\n background-color: ${(props) => props.backgroundColor};\n block-size: ${(props) => props.dimension + \"px\"};\n border-radius: 100%;\n border: 2px solid var(--page-paper-main);\n inline-size: ${(props) => props.dimension + \"px\"};\n
|
|
1
|
+
{"version":3,"file":"Styles.js","names":["styled","css","FontStyle","StyledBadge","div","props","backgroundColor","dimension","value","position"],"sources":["../../../../src/components/Badge/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { FontStyle } from \"../FontStyle\";\nimport { BadgeProps } from \"./Badge\";\n\nexport const StyledBadge = styled.div<Partial<BadgeProps>>`\n ${FontStyle}\n align-items: center;\n background-color: ${(props) => props.backgroundColor};\n block-size: ${(props) => props.dimension + \"px\"};\n border-radius: 100%;\n border: 2px solid var(--page-paper-main);\n color: var(--color-theme-100);\n display: flex;\n font-size: 12px;\n font-weight: 500;\n inline-size: ${(props) => props.dimension + \"px\"};\n justify-content: center;\n padding: ${(props) =>\n props.value && (props.value > 99 ? \"4px\" : props.value < 100 && \"2px\")};\n pointer-events: none;\n position: absolute;\n z-index: 1;\n\n ${({ position }) =>\n position === \"top-left\" &&\n css`\n inset-block-start: 0;\n inset-inline-start: 0;\n `}\n\n ${({ position }) =>\n position === \"top-right\" &&\n css`\n inset-block-start: 0;\n inset-inline-end: 0;\n `}\n\n ${({ position }) =>\n position === \"bottom-right\" &&\n css`\n inset-block-end: 0;\n inset-inline-end: 0;\n `}\n\n ${({ position }) =>\n position === \"bottom-left\" &&\n css`\n inset-block-end: 0;\n inset-inline-start: 0;\n `}\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,SAAS,QAAQ,cAAc;AAGxC,OAAO,IAAMC,WAAW,GAAGH,MAAM,CAACI,GAAG;EAAA;EAAA;AAAA,mUACjCF,SAAS,EAES,UAACG,KAAK;EAAA,OAAKA,KAAK,CAACC,eAAe;AAAA,GACtC,UAACD,KAAK;EAAA,OAAKA,KAAK,CAACE,SAAS,GAAG,IAAI;AAAA,GAOhC,UAACF,KAAK;EAAA,OAAKA,KAAK,CAACE,SAAS,GAAG,IAAI;AAAA,GAErC,UAACF,KAAK;EAAA,OACfA,KAAK,CAACG,KAAK,KAAKH,KAAK,CAACG,KAAK,GAAG,EAAE,GAAG,KAAK,GAAGH,KAAK,CAACG,KAAK,GAAG,GAAG,IAAI,KAAK,CAAC;AAAA,GAKtE;EAAA,IAAGC,QAAQ,QAARA,QAAQ;EAAA,OACXA,QAAQ,KAAK,UAAU,IACvBR,GAAG,+CAGF;AAAA,GAED;EAAA,IAAGQ,QAAQ,SAARA,QAAQ;EAAA,OACXA,QAAQ,KAAK,WAAW,IACxBR,GAAG,6CAGF;AAAA,GAEC;EAAA,IAAGQ,QAAQ,SAARA,QAAQ;EAAA,OACbA,QAAQ,KAAK,cAAc,IAC3BR,GAAG,2CAGF;AAAA,GAEC;EAAA,IAAGQ,QAAQ,SAARA,QAAQ;EAAA,OACbA,QAAQ,KAAK,aAAa,IAC1BR,GAAG,6CAGF;AAAA,EACJ"}
|
|
@@ -1,14 +1,9 @@
|
|
|
1
|
-
import React, { PropsWithChildren
|
|
1
|
+
import React, { PropsWithChildren } from "react";
|
|
2
2
|
import { DialogProps } from "../Dialog";
|
|
3
3
|
import { CommandPalleteItemProps } from "./CommandPalleteItem";
|
|
4
4
|
export interface CommandPalleteProps extends DialogProps {
|
|
5
5
|
onChangeSearch: (search: string) => void;
|
|
6
6
|
search: string;
|
|
7
|
-
commands: {
|
|
8
|
-
visible: boolean;
|
|
9
|
-
title: string;
|
|
10
|
-
renderIcon: () => ReactNode;
|
|
11
|
-
}[];
|
|
12
7
|
mode: string;
|
|
13
8
|
setMode: (value: string) => void;
|
|
14
9
|
loading?: boolean;
|
|
@@ -21,5 +16,6 @@ export declare const CommandPallete: {
|
|
|
21
16
|
displayName: string;
|
|
22
17
|
};
|
|
23
18
|
Item: React.ForwardRefExoticComponent<CommandPalleteItemProps & React.RefAttributes<HTMLLIElement>>;
|
|
19
|
+
CommandItem: React.ForwardRefExoticComponent<import("./CommandPalleteCommandItem").CommandPalleteCommandItemProps & React.RefAttributes<HTMLLIElement>>;
|
|
24
20
|
};
|
|
25
21
|
//# sourceMappingURL=CommandPallete.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CommandPallete.d.ts","sourceRoot":"","sources":["../../../../src/components/CommandPallete/CommandPallete.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAGZ,iBAAiB,
|
|
1
|
+
{"version":3,"file":"CommandPallete.d.ts","sourceRoot":"","sources":["../../../../src/components/CommandPallete/CommandPallete.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAGZ,iBAAiB,EAKlB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAU,WAAW,EAAE,MAAM,WAAW,CAAC;AAOhD,OAAO,EAEL,uBAAuB,EACxB,MAAM,sBAAsB,CAAC;AAK9B,MAAM,WAAW,mBAAoB,SAAQ,WAAW;IACtD,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,cAAc;mEAOxB,kBAAkB,mBAAmB,CAAC;;;;;;;;CAgJxC,CAAC"}
|