pixelize-design-library 2.1.47 → 2.1.49
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.
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { SwitchProps } from "@chakra-ui/react";
|
|
3
|
+
export interface ThemedSwitchProps extends SwitchProps {
|
|
4
|
+
switchText?: string;
|
|
5
|
+
switchTextPosition?: "left" | "right";
|
|
6
|
+
isInformation?: boolean;
|
|
7
|
+
informationMessage?: string;
|
|
8
|
+
isRequired?: boolean;
|
|
9
|
+
label?: string;
|
|
10
|
+
size?: "sm" | "md" | "lg";
|
|
11
|
+
}
|
|
12
|
+
export declare const InputSwitch: ({ switchText, switchTextPosition, id, isChecked, label, isInformation, informationMessage, isRequired, size, ...props }: ThemedSwitchProps) => React.JSX.Element;
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
14
|
+
var t = {};
|
|
15
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
16
|
+
t[p] = s[p];
|
|
17
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
18
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
19
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
20
|
+
t[p[i]] = s[p[i]];
|
|
21
|
+
}
|
|
22
|
+
return t;
|
|
23
|
+
};
|
|
24
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
25
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
26
|
+
};
|
|
27
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
28
|
+
exports.InputSwitch = void 0;
|
|
29
|
+
var react_1 = __importDefault(require("react"));
|
|
30
|
+
var react_2 = require("@chakra-ui/react");
|
|
31
|
+
var FormLabel_1 = require("../../Common/FormLabel");
|
|
32
|
+
var InputSwitch = function (_a) {
|
|
33
|
+
var switchText = _a.switchText, _b = _a.switchTextPosition, switchTextPosition = _b === void 0 ? "right" : _b, id = _a.id, isChecked = _a.isChecked, label = _a.label, isInformation = _a.isInformation, informationMessage = _a.informationMessage, isRequired = _a.isRequired, _c = _a.size, size = _c === void 0 ? "md" : _c, props = __rest(_a, ["switchText", "switchTextPosition", "id", "isChecked", "label", "isInformation", "informationMessage", "isRequired", "size"]);
|
|
34
|
+
var activeColor = (0, react_2.useColorModeValue)("blue.500", "blue.300");
|
|
35
|
+
var inactiveColor = (0, react_2.useColorModeValue)("gray.300", "gray.600");
|
|
36
|
+
var sizeStyles = {
|
|
37
|
+
sm: { fontSize: "sm", spacing: 1 },
|
|
38
|
+
md: { fontSize: "md", spacing: 2 },
|
|
39
|
+
lg: { fontSize: "lg", spacing: 3 },
|
|
40
|
+
};
|
|
41
|
+
return (react_1.default.createElement(react_2.FormControl, null,
|
|
42
|
+
label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, id: id, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired })),
|
|
43
|
+
react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", flexGrow: 1 },
|
|
44
|
+
react_1.default.createElement(react_2.HStack, { spacing: sizeStyles[size].spacing },
|
|
45
|
+
switchText && switchTextPosition === "left" && (react_1.default.createElement(react_2.FormLabel, { mb: "0", htmlFor: id, fontSize: sizeStyles[size].fontSize, cursor: "pointer" }, switchText)),
|
|
46
|
+
react_1.default.createElement(react_2.Switch, __assign({ id: id, size: size, isChecked: isChecked, colorScheme: "blue", sx: {
|
|
47
|
+
"span.chakra-switch__track": {
|
|
48
|
+
bg: isChecked ? activeColor : inactiveColor,
|
|
49
|
+
},
|
|
50
|
+
} }, props)),
|
|
51
|
+
switchText && switchTextPosition === "right" && (react_1.default.createElement(react_2.FormLabel, { mb: "0", htmlFor: id, fontSize: sizeStyles[size].fontSize, cursor: "pointer" }, switchText))))));
|
|
52
|
+
};
|
|
53
|
+
exports.InputSwitch = InputSwitch;
|
|
@@ -69,18 +69,18 @@ var normalizeMultiValue = function (val) {
|
|
|
69
69
|
return [];
|
|
70
70
|
};
|
|
71
71
|
var SearchSelect = function (_a) {
|
|
72
|
-
var _b, _c, _d, _e, _f, _g;
|
|
73
|
-
var id = _a.id, label = _a.label, options = _a.options, onSelect = _a.onSelect, onSearch = _a.onSearch,
|
|
74
|
-
var
|
|
75
|
-
var
|
|
76
|
-
var
|
|
72
|
+
var _b, _c, _d, _e, _f, _g, _h;
|
|
73
|
+
var id = _a.id, label = _a.label, options = _a.options, onSelect = _a.onSelect, onSearch = _a.onSearch, _j = _a.isOptionLoading, isOptionLoading = _j === void 0 ? false : _j, _k = _a.isLoading, isLoading = _k === void 0 ? false : _k, _l = _a.loadingText, loadingText = _l === void 0 ? 'Loading...' : _l, _m = _a.placeholder, placeholder = _m === void 0 ? 'Select' : _m, value = _a.value, _o = _a.searchQuery, searchQuery = _o === void 0 ? '' : _o, _p = _a.isMultiple, isMultiple = _p === void 0 ? false : _p, _q = _a.isRequired, isRequired = _q === void 0 ? false : _q, _r = _a.error, error = _r === void 0 ? false : _r, errorMessage = _a.errorMessage, helperText = _a.helperText, _s = _a.width, width = _s === void 0 ? '100%' : _s, _t = _a.height, height = _t === void 0 ? "2.75rem" : _t, _u = _a.size, size = _u === void 0 ? 'md' : _u, chip = _a.chip, information = _a.information, rightIcon = _a.rightIcon, addNew = _a.addNew, _v = _a.isSelectAll, isSelectAll = _v === void 0 ? false : _v, pagination = _a.pagination, insideSelect = _a.insideSelect, isRemoveAllIcon = _a.isRemoveAllIcon;
|
|
74
|
+
var _w = (0, react_1.useState)(searchQuery), inputValue = _w[0], setInputValue = _w[1];
|
|
75
|
+
var _x = (0, react_1.useState)(false), isOpen = _x[0], setIsOpen = _x[1];
|
|
76
|
+
var _y = (0, react_1.useState)(true), hasMore = _y[0], setHasMore = _y[1];
|
|
77
77
|
var inputRef = (0, react_1.useRef)(null);
|
|
78
78
|
var containerRef = (0, react_1.useRef)(null);
|
|
79
79
|
var scrollTimeoutRef = (0, react_1.useRef)(null);
|
|
80
|
-
var
|
|
81
|
-
var
|
|
80
|
+
var _z = (0, react_1.useState)(false), focused = _z[0], setFocused = _z[1];
|
|
81
|
+
var _0 = (0, react_1.useState)(false), customSelectOpen = _0[0], setCustomSelectOpen = _0[1];
|
|
82
82
|
var customSelectRef = (0, react_1.useRef)(null);
|
|
83
|
-
var
|
|
83
|
+
var _1 = (0, react_1.useState)({ top: 0, left: 0, width: 0 }), customSelectPos = _1[0], setCustomSelectPos = _1[1];
|
|
84
84
|
var theme = (0, useCustomTheme_1.useCustomTheme)();
|
|
85
85
|
(0, react_2.useOutsideClick)({
|
|
86
86
|
ref: containerRef,
|
|
@@ -203,13 +203,13 @@ var SearchSelect = function (_a) {
|
|
|
203
203
|
return (react_1.default.createElement(react_2.Box, { ref: containerRef, width: width, position: "relative" },
|
|
204
204
|
label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, id: id, isRequired: isRequired, isInformation: information === null || information === void 0 ? void 0 : information.isInformation, informationMessage: information === null || information === void 0 ? void 0 : information.informationMessage })),
|
|
205
205
|
react_1.default.createElement(react_2.InputGroup, { size: size },
|
|
206
|
-
react_1.default.createElement(react_2.Box, { as: "div", w: "100%", minH: "2.85rem", px: 3, display: "flex", alignItems: "center", flexWrap: "wrap", gap: "0.375rem", border: "0.063rem solid", borderColor: error ? theme.colors.semantic.error[500] : focused ? theme.colors.primary[500] : (_b = theme.colors.boxborder) === null || _b === void 0 ? void 0 : _b[500], borderRadius: "0.25rem", bg:
|
|
206
|
+
react_1.default.createElement(react_2.Box, { as: "div", w: "100%", minH: "2.85rem", px: 3, display: "flex", alignItems: "center", flexWrap: "wrap", gap: "0.375rem", border: "0.063rem solid", borderColor: error ? theme.colors.semantic.error[500] : focused ? theme.colors.primary[500] : (_b = theme.colors.boxborder) === null || _b === void 0 ? void 0 : _b[500], borderRadius: "0.25rem", bg: (_c = theme.colors.gray) === null || _c === void 0 ? void 0 : _c[50], boxShadow: focused ? error ? "0 0 0 0.125rem ".concat((_d = theme.colors.boxShadow) === null || _d === void 0 ? void 0 : _d.error) : "0 0 0 0.125rem ".concat((_e = theme.colors.boxShadow) === null || _e === void 0 ? void 0 : _e.primary) : 'none', transition: "box-shadow 0.2s, border-color 0.2s" },
|
|
207
207
|
insideSelect && (react_1.default.createElement(react_2.Box, { position: "relative", ref: customSelectRef, backgroundColor: theme.colors.gray[200], ml: "-0.75rem", h: "-webkit-fill-available", borderRadius: "0.25rem 0 0 0.25rem", onClick: function () { return setCustomSelectOpen(function (prev) { return !prev; }); } },
|
|
208
208
|
react_1.default.createElement(react_2.Box, { minW: "5rem", cursor: "pointer", display: "flex", justifyContent: "space-between", alignItems: "center", width: insideSelect.width, height: height, pl: "0.5rem", pr: "0.5rem" },
|
|
209
|
-
react_1.default.createElement(SelectTruncatedLabel_1.default, { label: (
|
|
209
|
+
react_1.default.createElement(SelectTruncatedLabel_1.default, { label: (_g = (_f = insideSelect === null || insideSelect === void 0 ? void 0 : insideSelect.value) === null || _f === void 0 ? void 0 : _f.label) !== null && _g !== void 0 ? _g : "", maxWidth: (insideSelect === null || insideSelect === void 0 ? void 0 : insideSelect.width) || "6rem" }),
|
|
210
210
|
customSelectOpen ? react_1.default.createElement(lucide_react_1.ChevronUp, { size: 16 }) : react_1.default.createElement(lucide_react_1.ChevronDown, { size: 16 })),
|
|
211
211
|
customSelectOpen && (react_1.default.createElement(react_2.Portal, null,
|
|
212
|
-
react_1.default.createElement(react_2.Box, { id: "custom-select-portal", position: "absolute", top: "".concat(customSelectPos.top, "px"), left: "".concat(customSelectPos.left, "px"), zIndex: 1400, bg: theme.colors.white, border: "0.063rem solid", borderColor: theme.colors.gray[300], borderRadius: "md", boxShadow: "md", minW: "10rem", maxW: "38rem" }, (
|
|
212
|
+
react_1.default.createElement(react_2.Box, { id: "custom-select-portal", position: "absolute", top: "".concat(customSelectPos.top, "px"), left: "".concat(customSelectPos.left, "px"), zIndex: 1400, bg: theme.colors.white, border: "0.063rem solid", borderColor: theme.colors.gray[300], borderRadius: "md", boxShadow: "md", minW: "10rem", maxW: "38rem" }, (_h = insideSelect === null || insideSelect === void 0 ? void 0 : insideSelect.option) === null || _h === void 0 ? void 0 : _h.map(function (item) { return (react_1.default.createElement(react_2.Box, { key: item.id, display: "flex", alignItems: "center", height: "2.5rem", px: "0.75rem", fontSize: "sm", _hover: { bg: theme.colors.gray[100] }, cursor: "pointer", onClick: function (e) {
|
|
213
213
|
e.stopPropagation();
|
|
214
214
|
handleCustomSelect(item);
|
|
215
215
|
} }, item.label)); })))))),
|
package/dist/Pages/input.js
CHANGED
|
@@ -29,8 +29,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
29
29
|
var react_1 = __importStar(require("react"));
|
|
30
30
|
var TextInput_1 = __importDefault(require("../Components/Input/TextInput"));
|
|
31
31
|
var PhoneNumberInput_1 = __importDefault(require("../Components/Input/PhoneNumberInput"));
|
|
32
|
+
var InputSwitch_1 = require("../Components/Input/Switch/InputSwitch");
|
|
32
33
|
var InputPage = function () {
|
|
33
34
|
var _a = (0, react_1.useState)([]), countries = _a[0], setCountries = _a[1];
|
|
35
|
+
var _b = (0, react_1.useState)(false), switchState = _b[0], setSwitchState = _b[1];
|
|
34
36
|
(0, react_1.useEffect)(function () {
|
|
35
37
|
fetch("https://dev.api.pixelizetech.com/account/api/allCountries")
|
|
36
38
|
.then(function (res) { return res.json(); })
|
|
@@ -71,6 +73,9 @@ var InputPage = function () {
|
|
|
71
73
|
isRequired: true, informationMessage: "This is information", isInformation: true,
|
|
72
74
|
// isDisabled
|
|
73
75
|
minW: "200px", maxW: "300px" }),
|
|
74
|
-
react_1.default.createElement(PhoneNumberInput_1.default, { label: "Phone", id: "input1", name: "hello", country: "IN", value: "", countries: countries, onChange: function (val) {
|
|
76
|
+
react_1.default.createElement(PhoneNumberInput_1.default, { label: "Phone", id: "input1", name: "hello", country: "IN", value: "", countries: countries, onChange: function (val) {
|
|
77
|
+
console.log(val, "hello");
|
|
78
|
+
}, isRequired: true, informationMessage: "This is information", isInformation: true, error: true, errorMessage: "Required", showCountrySelect: true, minW: "200px", maxW: "300px" }),
|
|
79
|
+
react_1.default.createElement(InputSwitch_1.InputSwitch, { id: "repeat-switch", isChecked: switchState, onChange: function (e) { return setSwitchState(e.target.checked); }, switchText: "Repeat", switchTextPosition: "right", label: "My Switch", isInformation: true, informationMessage: "This is information", isRequired: true, size: "md" })));
|
|
75
80
|
};
|
|
76
81
|
exports.default = InputPage;
|
package/dist/index.d.ts
CHANGED
|
@@ -53,5 +53,6 @@ import { debounce } from "./Utils/table";
|
|
|
53
53
|
import ProductCard from "./Components/ProductCard/ProductCard";
|
|
54
54
|
import ProductDetails from "./Components/ProductDetails/ProductDetails";
|
|
55
55
|
import PhoneNumberInput from "./Components/Input/PhoneNumberInput";
|
|
56
|
-
|
|
56
|
+
import { InputSwitch } from "./Components/Input/Switch/InputSwitch";
|
|
57
|
+
export { Accordian, AlertDialog, ApexBarChart, ApexPieChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, ContactForm, DatePicker, Drawer, DrawerHeader, DrawerBody, DrawerFooter, Dropdown, Editor, FileUpload, FormWrapper, Header, HeaderActions, InputTextArea, InputSwitch, KanbanBoard, Loading, Modal, ModalHeader, ModalBody, ModalFooter, NavigationBar, NoteTextArea, MultiSelect, NumberInput, PhoneNumberInput, PinInput, ProductCard, ProductDetails, ProfileCard, ProfileCardHeader, ProfileCardBody, ProfileCardFooter, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Reorder, Search, Select, SearchSelect, SelectSearch, SideBar, Slider, Skeletons, Switch, Table, TableToggle, Tag, TextInput, Timeline, Toaster, ToolTip, useToaster, VerifyEmailOtp, useCustomTheme, ThemesList, debounce, };
|
|
57
58
|
export default withTheme;
|
package/dist/index.js
CHANGED
|
@@ -27,8 +27,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
27
27
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
28
28
|
};
|
|
29
29
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
30
|
-
exports.
|
|
31
|
-
exports.debounce = exports.ThemesList = exports.useCustomTheme = exports.VerifyEmailOtp = exports.useToaster = exports.ToolTip = exports.Toaster = exports.Timeline = exports.TextInput = exports.Tag = exports.TableToggle = exports.Table = exports.Switch = exports.Skeletons = exports.Slider = void 0;
|
|
30
|
+
exports.SelectSearch = exports.SearchSelect = exports.Select = exports.Search = exports.Reorder = exports.RadioButtonGroup = exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCardFooter = exports.ProfileCardBody = exports.ProfileCardHeader = exports.ProfileCard = exports.ProductDetails = exports.ProductCard = exports.PinInput = exports.PhoneNumberInput = exports.NumberInput = exports.MultiSelect = exports.NoteTextArea = exports.NavigationBar = exports.ModalFooter = exports.ModalBody = exports.ModalHeader = exports.Modal = exports.Loading = exports.KanbanBoard = exports.InputSwitch = exports.InputTextArea = exports.HeaderActions = exports.Header = exports.FormWrapper = exports.FileUpload = exports.Editor = exports.Dropdown = exports.DrawerFooter = exports.DrawerBody = exports.DrawerHeader = exports.Drawer = exports.DatePicker = exports.ContactForm = exports.Checkbox = exports.Card = exports.ButtonGroupIcon = exports.Button = exports.Breadcrumbs = exports.ApexPieChart = exports.ApexBarChart = exports.AlertDialog = exports.Accordian = void 0;
|
|
31
|
+
exports.debounce = exports.ThemesList = exports.useCustomTheme = exports.VerifyEmailOtp = exports.useToaster = exports.ToolTip = exports.Toaster = exports.Timeline = exports.TextInput = exports.Tag = exports.TableToggle = exports.Table = exports.Switch = exports.Skeletons = exports.Slider = exports.SideBar = void 0;
|
|
32
32
|
var Accordion_1 = __importDefault(require("./Components/Accordion/Accordion"));
|
|
33
33
|
exports.Accordian = Accordion_1.default;
|
|
34
34
|
var AlertDialog_1 = __importDefault(require("./Components/AlertDialog/AlertDialog"));
|
|
@@ -149,4 +149,6 @@ var ProductDetails_1 = __importDefault(require("./Components/ProductDetails/Prod
|
|
|
149
149
|
exports.ProductDetails = ProductDetails_1.default;
|
|
150
150
|
var PhoneNumberInput_1 = __importDefault(require("./Components/Input/PhoneNumberInput"));
|
|
151
151
|
exports.PhoneNumberInput = PhoneNumberInput_1.default;
|
|
152
|
+
var InputSwitch_1 = require("./Components/Input/Switch/InputSwitch");
|
|
153
|
+
Object.defineProperty(exports, "InputSwitch", { enumerable: true, get: function () { return InputSwitch_1.InputSwitch; } });
|
|
152
154
|
exports.default = withTheme_1.default;
|