albinasoft-ui-package 1.0.5 → 1.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/CustomButton.d.ts +13 -0
- package/dist/components/CustomButton.js +92 -0
- package/dist/components/CustomCheckbox.d.ts +19 -0
- package/dist/components/CustomCheckbox.js +32 -0
- package/dist/components/CustomDateTimePicker.d.ts +31 -0
- package/dist/components/CustomDateTimePicker.js +45 -0
- package/dist/components/CustomDivider.d.ts +51 -0
- package/dist/components/CustomDivider.js +87 -0
- package/dist/components/CustomForm.d.ts +159 -0
- package/dist/components/CustomForm.js +163 -0
- package/dist/components/CustomInput.d.ts +34 -0
- package/dist/components/CustomInput.js +74 -0
- package/dist/components/CustomModal.d.ts +13 -0
- package/dist/components/CustomModal.js +16 -0
- package/dist/components/CustomRadioButton.d.ts +25 -0
- package/dist/components/CustomRadioButton.js +34 -0
- package/dist/components/CustomRichTextbox.d.ts +21 -0
- package/dist/components/CustomRichTextbox.js +41 -0
- package/dist/components/CustomSelect.d.ts +26 -0
- package/dist/components/CustomSelect.js +41 -0
- package/dist/components/CustomTab.d.ts +20 -0
- package/dist/components/CustomTab.js +65 -0
- package/dist/components/CustomText.d.ts +71 -0
- package/dist/components/CustomText.js +156 -0
- package/dist/components/CustomTextarea.d.ts +22 -0
- package/dist/components/CustomTextarea.js +33 -0
- package/dist/components/CustomTreeView.d.ts +15 -0
- package/dist/components/CustomTreeView.js +60 -0
- package/dist/index.d.ts +18 -15
- package/dist/index.js +21 -15
- package/package.json +3 -2
- package/src/assets/css/components.css +5 -0
- package/src/assets/css/dark.css +2145 -0
- package/src/assets/css/main.css +26263 -0
@@ -0,0 +1,13 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
interface CustomButtonProps {
|
3
|
+
id?: string;
|
4
|
+
label: React.ReactNode;
|
5
|
+
name?: string;
|
6
|
+
onClick: (event: React.FormEvent) => void;
|
7
|
+
style?: React.CSSProperties;
|
8
|
+
className?: string;
|
9
|
+
tooltip?: string;
|
10
|
+
disabled?: boolean;
|
11
|
+
}
|
12
|
+
declare const CustomButton: React.FC<CustomButtonProps>;
|
13
|
+
export default CustomButton;
|
@@ -0,0 +1,92 @@
|
|
1
|
+
"use strict";
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
3
|
+
if (k2 === undefined) k2 = k;
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
7
|
+
}
|
8
|
+
Object.defineProperty(o, k2, desc);
|
9
|
+
}) : (function(o, m, k, k2) {
|
10
|
+
if (k2 === undefined) k2 = k;
|
11
|
+
o[k2] = m[k];
|
12
|
+
}));
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
15
|
+
}) : function(o, v) {
|
16
|
+
o["default"] = v;
|
17
|
+
});
|
18
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
19
|
+
if (mod && mod.__esModule) return mod;
|
20
|
+
var result = {};
|
21
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
22
|
+
__setModuleDefault(result, mod);
|
23
|
+
return result;
|
24
|
+
};
|
25
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
26
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
27
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
28
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
29
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
30
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
31
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
32
|
+
});
|
33
|
+
};
|
34
|
+
var __generator = (this && this.__generator) || function (thisArg, body) {
|
35
|
+
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
36
|
+
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
37
|
+
function verb(n) { return function (v) { return step([n, v]); }; }
|
38
|
+
function step(op) {
|
39
|
+
if (f) throw new TypeError("Generator is already executing.");
|
40
|
+
while (g && (g = 0, op[0] && (_ = 0)), _) try {
|
41
|
+
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
42
|
+
if (y = 0, t) op = [op[0] & 2, t.value];
|
43
|
+
switch (op[0]) {
|
44
|
+
case 0: case 1: t = op; break;
|
45
|
+
case 4: _.label++; return { value: op[1], done: false };
|
46
|
+
case 5: _.label++; y = op[1]; op = [0]; continue;
|
47
|
+
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
48
|
+
default:
|
49
|
+
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
50
|
+
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
51
|
+
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
52
|
+
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
53
|
+
if (t[2]) _.ops.pop();
|
54
|
+
_.trys.pop(); continue;
|
55
|
+
}
|
56
|
+
op = body.call(thisArg, _);
|
57
|
+
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
58
|
+
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
59
|
+
}
|
60
|
+
};
|
61
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
62
|
+
var react_1 = __importStar(require("react"));
|
63
|
+
var react_bootstrap_1 = require("react-bootstrap");
|
64
|
+
var CustomButton = function (_a) {
|
65
|
+
var id = _a.id, name = _a.name, label = _a.label, onClick = _a.onClick, style = _a.style, className = _a.className, tooltip = _a.tooltip, disabled = _a.disabled;
|
66
|
+
var _b = (0, react_1.useState)(false), isLoading = _b[0], setIsLoading = _b[1];
|
67
|
+
var handleClick = function (event) { return __awaiter(void 0, void 0, void 0, function () {
|
68
|
+
return __generator(this, function (_a) {
|
69
|
+
switch (_a.label) {
|
70
|
+
case 0:
|
71
|
+
event.preventDefault();
|
72
|
+
setIsLoading(true);
|
73
|
+
_a.label = 1;
|
74
|
+
case 1:
|
75
|
+
_a.trys.push([1, , 3, 4]);
|
76
|
+
return [4 /*yield*/, onClick(event)];
|
77
|
+
case 2:
|
78
|
+
_a.sent();
|
79
|
+
return [3 /*break*/, 4];
|
80
|
+
case 3:
|
81
|
+
setIsLoading(false);
|
82
|
+
return [7 /*endfinally*/];
|
83
|
+
case 4: return [2 /*return*/];
|
84
|
+
}
|
85
|
+
});
|
86
|
+
}); };
|
87
|
+
var buttonClassName = className || 'btn btn-primary';
|
88
|
+
return tooltip ? (react_1.default.createElement(react_bootstrap_1.OverlayTrigger, { placement: "top", overlay: react_1.default.createElement(react_bootstrap_1.Tooltip, { id: "tooltip-".concat(tooltip) }, tooltip) },
|
89
|
+
react_1.default.createElement("span", null,
|
90
|
+
react_1.default.createElement("button", { className: buttonClassName, onClick: handleClick, disabled: isLoading || disabled, style: style }, isLoading ? (react_1.default.createElement("span", { className: "spinner spinner-border spinner-border-sm", role: "status", "aria-hidden": "true" })) : (label))))) : (react_1.default.createElement("button", { className: buttonClassName, onClick: handleClick, disabled: isLoading || disabled, style: style }, isLoading ? (react_1.default.createElement("span", { className: "spinner spinner-border spinner-border-sm", role: "status", "aria-hidden": "true" })) : (label)));
|
91
|
+
};
|
92
|
+
exports.default = CustomButton;
|
@@ -0,0 +1,19 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
interface CustomCheckboxProps {
|
3
|
+
id?: string;
|
4
|
+
name?: string;
|
5
|
+
label: string;
|
6
|
+
value: boolean;
|
7
|
+
required?: boolean;
|
8
|
+
errorMessage?: string;
|
9
|
+
conditionalErrorVisible?: boolean;
|
10
|
+
conditionalErrorMessage?: string;
|
11
|
+
tooltip?: string;
|
12
|
+
description?: string | null;
|
13
|
+
disabled?: boolean;
|
14
|
+
className?: string;
|
15
|
+
style?: React.CSSProperties;
|
16
|
+
onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
17
|
+
}
|
18
|
+
declare const CustomCheckbox: React.FC<CustomCheckboxProps>;
|
19
|
+
export default CustomCheckbox;
|
@@ -0,0 +1,32 @@
|
|
1
|
+
"use strict";
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
4
|
+
};
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
6
|
+
var react_1 = __importDefault(require("react"));
|
7
|
+
var react_bootstrap_1 = require("react-bootstrap");
|
8
|
+
var fa_1 = require("react-icons/fa");
|
9
|
+
var CustomCheckbox = function (_a) {
|
10
|
+
var id = _a.id, name = _a.name, label = _a.label, value = _a.value, _b = _a.required, required = _b === void 0 ? false : _b, errorMessage = _a.errorMessage, conditionalErrorVisible = _a.conditionalErrorVisible, conditionalErrorMessage = _a.conditionalErrorMessage, tooltip = _a.tooltip, description = _a.description, _c = _a.disabled, disabled = _c === void 0 ? false : _c, className = _a.className, style = _a.style, onChange = _a.onChange;
|
11
|
+
return (react_1.default.createElement("div", { className: className },
|
12
|
+
react_1.default.createElement("div", { className: "form-check form-group", style: style },
|
13
|
+
tooltip ? (react_1.default.createElement(react_bootstrap_1.OverlayTrigger, { placement: "bottom", overlay: tooltip ? react_1.default.createElement(react_bootstrap_1.Tooltip, { id: "tooltip-".concat(id || name) }, tooltip) : react_1.default.createElement(react_1.default.Fragment, null) },
|
14
|
+
react_1.default.createElement("input", { id: id, name: name, type: "checkbox", className: "form-check-input", checked: value, disabled: disabled, onChange: onChange, required: required }))) : (react_1.default.createElement("input", { id: id, name: name, type: "checkbox", className: "form-check-input", checked: value, disabled: disabled, onChange: onChange, required: required })),
|
15
|
+
react_1.default.createElement("label", { htmlFor: id, className: "form-check-label" }, label),
|
16
|
+
required && (react_1.default.createElement("div", { className: "invalid-feedback text-danger" },
|
17
|
+
react_1.default.createElement("div", { className: "description-icon" },
|
18
|
+
react_1.default.createElement(fa_1.FaExclamationTriangle, null)),
|
19
|
+
react_1.default.createElement("div", { className: "description-text" },
|
20
|
+
react_1.default.createElement("span", null, errorMessage || 'Bu seçim zorunludur.')))),
|
21
|
+
conditionalErrorVisible && (react_1.default.createElement("div", { className: "conditional-error-message text-warning" },
|
22
|
+
react_1.default.createElement("div", { className: "description-icon" },
|
23
|
+
react_1.default.createElement(fa_1.FaExclamationTriangle, null)),
|
24
|
+
react_1.default.createElement("div", { className: "description-text" },
|
25
|
+
react_1.default.createElement("span", null, conditionalErrorMessage)))),
|
26
|
+
description && (react_1.default.createElement("div", { className: "form-description text-secondary" },
|
27
|
+
react_1.default.createElement("div", { className: "description-icon" },
|
28
|
+
react_1.default.createElement(fa_1.FaInfoCircle, null)),
|
29
|
+
react_1.default.createElement("div", { className: "description-text" },
|
30
|
+
react_1.default.createElement("span", null, description)))))));
|
31
|
+
};
|
32
|
+
exports.default = CustomCheckbox;
|
@@ -0,0 +1,31 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import 'react-datepicker/dist/react-datepicker.css';
|
3
|
+
declare enum TimeFormat {
|
4
|
+
H = "HH",
|
5
|
+
M = "mm",
|
6
|
+
HM = "HH:mm"
|
7
|
+
}
|
8
|
+
interface CustomDateTimePickerProps {
|
9
|
+
id?: string;
|
10
|
+
name?: string;
|
11
|
+
label: string;
|
12
|
+
value: Date | null;
|
13
|
+
placeholder?: string;
|
14
|
+
required?: boolean;
|
15
|
+
errorMessage?: string;
|
16
|
+
conditionalErrorVisible?: boolean;
|
17
|
+
conditionalErrorMessage?: string;
|
18
|
+
tooltip?: string;
|
19
|
+
description?: string | null;
|
20
|
+
disabled?: boolean;
|
21
|
+
className?: string;
|
22
|
+
style?: React.CSSProperties;
|
23
|
+
showTimeSelect?: boolean;
|
24
|
+
showTimeSelectOnly?: boolean;
|
25
|
+
timeFormat?: TimeFormat;
|
26
|
+
timeIntervals?: number;
|
27
|
+
onChange: (date: Date | null) => void;
|
28
|
+
}
|
29
|
+
declare const CustomDateTimePicker: React.FC<CustomDateTimePickerProps>;
|
30
|
+
export { CustomDateTimePicker, TimeFormat };
|
31
|
+
export default CustomDateTimePicker;
|
@@ -0,0 +1,45 @@
|
|
1
|
+
"use strict";
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
4
|
+
};
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
6
|
+
exports.TimeFormat = exports.CustomDateTimePicker = void 0;
|
7
|
+
var react_1 = __importDefault(require("react"));
|
8
|
+
var react_datepicker_1 = __importDefault(require("react-datepicker"));
|
9
|
+
require("react-datepicker/dist/react-datepicker.css");
|
10
|
+
var react_bootstrap_1 = require("react-bootstrap");
|
11
|
+
var fa_1 = require("react-icons/fa");
|
12
|
+
var TimeFormat;
|
13
|
+
(function (TimeFormat) {
|
14
|
+
TimeFormat["H"] = "HH";
|
15
|
+
TimeFormat["M"] = "mm";
|
16
|
+
TimeFormat["HM"] = "HH:mm";
|
17
|
+
})(TimeFormat || (TimeFormat = {}));
|
18
|
+
exports.TimeFormat = TimeFormat;
|
19
|
+
var CustomDateTimePicker = function (_a) {
|
20
|
+
var id = _a.id, name = _a.name, label = _a.label, value = _a.value, placeholder = _a.placeholder, _b = _a.required, required = _b === void 0 ? false : _b, errorMessage = _a.errorMessage, _c = _a.conditionalErrorVisible, conditionalErrorVisible = _c === void 0 ? false : _c, conditionalErrorMessage = _a.conditionalErrorMessage, tooltip = _a.tooltip, description = _a.description, _d = _a.disabled, disabled = _d === void 0 ? false : _d, className = _a.className, style = _a.style, showTimeSelect = _a.showTimeSelect, showTimeSelectOnly = _a.showTimeSelectOnly, _e = _a.timeFormat, timeFormat = _e === void 0 ? TimeFormat.HM : _e, timeIntervals = _a.timeIntervals, onChange = _a.onChange;
|
21
|
+
return (react_1.default.createElement("div", { className: className },
|
22
|
+
react_1.default.createElement("div", { className: "form-group" },
|
23
|
+
react_1.default.createElement("label", { htmlFor: id, className: "form-label" }, label),
|
24
|
+
react_1.default.createElement("div", { className: "position-relative" },
|
25
|
+
react_1.default.createElement(react_bootstrap_1.OverlayTrigger, { placement: "bottom", overlay: tooltip ? react_1.default.createElement(react_bootstrap_1.Tooltip, { id: "tooltip-".concat(id) }, tooltip) : react_1.default.createElement(react_1.default.Fragment, null) },
|
26
|
+
react_1.default.createElement("div", null,
|
27
|
+
react_1.default.createElement(react_datepicker_1.default, { id: id, name: name, selected: value, onChange: onChange, className: "form-control ".concat(className || ''), placeholderText: placeholder, disabled: disabled, required: required, showTimeSelect: showTimeSelect || false, showTimeSelectOnly: showTimeSelectOnly || false, showTimeCaption: false, timeFormat: timeFormat, dateFormat: showTimeSelectOnly ? timeFormat : showTimeSelect ? "dd.MM.yyyy HH:mm" : "dd.MM.yyyy", timeIntervals: timeFormat == TimeFormat.H ? 60 : timeFormat == TimeFormat.M ? 1 : timeIntervals ? timeIntervals : 30 }))),
|
28
|
+
required && !value && (react_1.default.createElement("div", { className: "invalid-feedback text-danger mt-2" },
|
29
|
+
react_1.default.createElement("div", { className: "description-icon" },
|
30
|
+
react_1.default.createElement(fa_1.FaExclamationTriangle, null)),
|
31
|
+
react_1.default.createElement("div", { className: "description-text" },
|
32
|
+
react_1.default.createElement("span", null, errorMessage || 'This field is required.')))),
|
33
|
+
conditionalErrorVisible && (react_1.default.createElement("div", { className: "conditional-error-message text-warning mt-2" },
|
34
|
+
react_1.default.createElement("div", { className: "description-icon" },
|
35
|
+
react_1.default.createElement(fa_1.FaExclamationTriangle, null)),
|
36
|
+
react_1.default.createElement("div", { className: "description-text" },
|
37
|
+
react_1.default.createElement("span", null, conditionalErrorMessage)))),
|
38
|
+
description && (react_1.default.createElement("div", { className: "form-description text-secondary mt-2" },
|
39
|
+
react_1.default.createElement("div", { className: "description-icon" },
|
40
|
+
react_1.default.createElement(fa_1.FaInfoCircle, null)),
|
41
|
+
react_1.default.createElement("div", { className: "description-text" },
|
42
|
+
react_1.default.createElement("span", null, description))))))));
|
43
|
+
};
|
44
|
+
exports.CustomDateTimePicker = CustomDateTimePicker;
|
45
|
+
exports.default = CustomDateTimePicker;
|
@@ -0,0 +1,51 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
declare enum Color {
|
3
|
+
DEFAULT = "currentColor",
|
4
|
+
PRIMARY = "text-primary",
|
5
|
+
SECONDARY = "text-secondary",
|
6
|
+
SUCCESS = "text-success",
|
7
|
+
WARNING = "text-warning",
|
8
|
+
DANGER = "text-danger",
|
9
|
+
INFO = "text-info",
|
10
|
+
DARK = "text-dark",
|
11
|
+
LIGHT = "text-light"
|
12
|
+
}
|
13
|
+
declare enum Alignment {
|
14
|
+
LEFT = "left",
|
15
|
+
CENTER = "center",
|
16
|
+
RIGHT = "right"
|
17
|
+
}
|
18
|
+
declare enum Thickness {
|
19
|
+
T1 = "1px",
|
20
|
+
T2 = "2px",
|
21
|
+
T3 = "3px",
|
22
|
+
T4 = "4px",
|
23
|
+
T5 = "5px",
|
24
|
+
T6 = "6px",
|
25
|
+
T8 = "8px",
|
26
|
+
T10 = "10px",
|
27
|
+
T12 = "12px",
|
28
|
+
T16 = "16px",
|
29
|
+
T24 = "24px"
|
30
|
+
}
|
31
|
+
declare enum Width {
|
32
|
+
W10 = "10%",
|
33
|
+
W25 = "25%",
|
34
|
+
W33 = "33%",
|
35
|
+
W50 = "50%",
|
36
|
+
W66 = "66%",
|
37
|
+
W75 = "75%",
|
38
|
+
W100 = "100%"
|
39
|
+
}
|
40
|
+
interface CustomDividerProps {
|
41
|
+
id?: string;
|
42
|
+
color?: Color;
|
43
|
+
thickness?: Thickness;
|
44
|
+
width?: Width;
|
45
|
+
alignment?: Alignment;
|
46
|
+
className?: string;
|
47
|
+
style?: React.CSSProperties;
|
48
|
+
}
|
49
|
+
declare const CustomDivider: React.FC<CustomDividerProps>;
|
50
|
+
export { CustomDivider, Color, Alignment, Thickness, Width };
|
51
|
+
export default CustomDivider;
|
@@ -0,0 +1,87 @@
|
|
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 __importDefault = (this && this.__importDefault) || function (mod) {
|
14
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
15
|
+
};
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
17
|
+
exports.Width = exports.Thickness = exports.Alignment = exports.Color = exports.CustomDivider = void 0;
|
18
|
+
var react_1 = __importDefault(require("react"));
|
19
|
+
var Color;
|
20
|
+
(function (Color) {
|
21
|
+
Color["DEFAULT"] = "currentColor";
|
22
|
+
Color["PRIMARY"] = "text-primary";
|
23
|
+
Color["SECONDARY"] = "text-secondary";
|
24
|
+
Color["SUCCESS"] = "text-success";
|
25
|
+
Color["WARNING"] = "text-warning";
|
26
|
+
Color["DANGER"] = "text-danger";
|
27
|
+
Color["INFO"] = "text-info";
|
28
|
+
Color["DARK"] = "text-dark";
|
29
|
+
Color["LIGHT"] = "text-light";
|
30
|
+
})(Color || (Color = {}));
|
31
|
+
exports.Color = Color;
|
32
|
+
var Alignment;
|
33
|
+
(function (Alignment) {
|
34
|
+
Alignment["LEFT"] = "left";
|
35
|
+
Alignment["CENTER"] = "center";
|
36
|
+
Alignment["RIGHT"] = "right";
|
37
|
+
})(Alignment || (Alignment = {}));
|
38
|
+
exports.Alignment = Alignment;
|
39
|
+
var Thickness;
|
40
|
+
(function (Thickness) {
|
41
|
+
Thickness["T1"] = "1px";
|
42
|
+
Thickness["T2"] = "2px";
|
43
|
+
Thickness["T3"] = "3px";
|
44
|
+
Thickness["T4"] = "4px";
|
45
|
+
Thickness["T5"] = "5px";
|
46
|
+
Thickness["T6"] = "6px";
|
47
|
+
Thickness["T8"] = "8px";
|
48
|
+
Thickness["T10"] = "10px";
|
49
|
+
Thickness["T12"] = "12px";
|
50
|
+
Thickness["T16"] = "16px";
|
51
|
+
Thickness["T24"] = "24px";
|
52
|
+
})(Thickness || (Thickness = {}));
|
53
|
+
exports.Thickness = Thickness;
|
54
|
+
var Width;
|
55
|
+
(function (Width) {
|
56
|
+
Width["W10"] = "10%";
|
57
|
+
Width["W25"] = "25%";
|
58
|
+
Width["W33"] = "33%";
|
59
|
+
Width["W50"] = "50%";
|
60
|
+
Width["W66"] = "66%";
|
61
|
+
Width["W75"] = "75%";
|
62
|
+
Width["W100"] = "100%";
|
63
|
+
})(Width || (Width = {}));
|
64
|
+
exports.Width = Width;
|
65
|
+
var CustomDivider = function (_a) {
|
66
|
+
var id = _a.id, _b = _a.color, color = _b === void 0 ? Color.DEFAULT : _b, // Varsayılan renk (gri ton)
|
67
|
+
_c = _a.thickness, // Varsayılan renk (gri ton)
|
68
|
+
thickness = _c === void 0 ? Thickness.T1 : _c, // Varsayılan kalınlık
|
69
|
+
_d = _a.width, // Varsayılan kalınlık
|
70
|
+
width = _d === void 0 ? Width.W100 : _d, // Varsayılan genişlik
|
71
|
+
_e = _a.alignment, // Varsayılan genişlik
|
72
|
+
alignment = _e === void 0 ? Alignment.CENTER : _e, // Varsayılan hizalama
|
73
|
+
_f = _a.className, // Varsayılan hizalama
|
74
|
+
className = _f === void 0 ? '' : _f, _g = _a.style, style = _g === void 0 ? {} : _g;
|
75
|
+
var combinedClassName = "".concat(color, " ").concat(className).trim();
|
76
|
+
// Hizalama stilini belirleme
|
77
|
+
var alignmentStyle = {
|
78
|
+
marginLeft: alignment === 'left' ? '0' : 'auto',
|
79
|
+
marginRight: alignment === 'right' ? '0' : 'auto',
|
80
|
+
};
|
81
|
+
return (react_1.default.createElement("hr", { id: id || "custom-divider-".concat(Date.now()),
|
82
|
+
//className={`custom-divider ${className}`.trim()}
|
83
|
+
className: "custom-divider ".concat(combinedClassName), style: __assign(__assign({ border: 'none', borderTop: "".concat(thickness, " solid"), // Çizgiyi oluştur
|
84
|
+
width: width }, alignmentStyle), style) }));
|
85
|
+
};
|
86
|
+
exports.CustomDivider = CustomDivider;
|
87
|
+
exports.default = CustomDivider;
|
@@ -0,0 +1,159 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { TreeNode } from './CustomTreeView';
|
3
|
+
declare enum ElementType {
|
4
|
+
INPUT = "input",
|
5
|
+
TEXTAREA = "textarea",
|
6
|
+
CHECKBOX = "checkbox",
|
7
|
+
RADIO = "radio",
|
8
|
+
SELECT = "select",
|
9
|
+
DATETIMEPICKER = "datetimepicker",
|
10
|
+
TEXT = "text",
|
11
|
+
DIVIDER = "divider",
|
12
|
+
RICHTEXTBOX = "richtextbox",
|
13
|
+
TREEVIEW = "treeview",
|
14
|
+
BUTTON = "button"
|
15
|
+
}
|
16
|
+
interface InputElement {
|
17
|
+
id?: string;
|
18
|
+
type: ElementType;
|
19
|
+
label: string;
|
20
|
+
value: string;
|
21
|
+
rowId?: number;
|
22
|
+
colId?: number;
|
23
|
+
innerRowId?: number;
|
24
|
+
colClass?: string;
|
25
|
+
onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
26
|
+
}
|
27
|
+
interface TextareaElement {
|
28
|
+
id?: string;
|
29
|
+
type: ElementType;
|
30
|
+
label: string;
|
31
|
+
value: string;
|
32
|
+
rowId?: number;
|
33
|
+
colId?: number;
|
34
|
+
innerRowId?: number;
|
35
|
+
colClass?: string;
|
36
|
+
onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
|
37
|
+
}
|
38
|
+
interface CheckboxElement {
|
39
|
+
id?: string;
|
40
|
+
type: ElementType;
|
41
|
+
label: string;
|
42
|
+
value: boolean;
|
43
|
+
rowId?: number;
|
44
|
+
colId?: number;
|
45
|
+
innerRowId?: number;
|
46
|
+
colClass?: string;
|
47
|
+
onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
48
|
+
}
|
49
|
+
interface RadioButtonElement {
|
50
|
+
id?: string;
|
51
|
+
type: ElementType;
|
52
|
+
label: string;
|
53
|
+
value: string;
|
54
|
+
options: {
|
55
|
+
id: string;
|
56
|
+
label: string;
|
57
|
+
value: string;
|
58
|
+
}[];
|
59
|
+
rowId?: number;
|
60
|
+
colId?: number;
|
61
|
+
innerRowId?: number;
|
62
|
+
colClass?: string;
|
63
|
+
onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
64
|
+
}
|
65
|
+
interface SelectElement {
|
66
|
+
id?: string;
|
67
|
+
type: ElementType;
|
68
|
+
label: string;
|
69
|
+
value: string[];
|
70
|
+
options: {
|
71
|
+
id: string;
|
72
|
+
label: string;
|
73
|
+
value: string;
|
74
|
+
}[];
|
75
|
+
rowId?: number;
|
76
|
+
colId?: number;
|
77
|
+
innerRowId?: number;
|
78
|
+
colClass?: string;
|
79
|
+
onChange: (value: string | string[]) => void;
|
80
|
+
}
|
81
|
+
interface DateTimePickerElement {
|
82
|
+
id?: string;
|
83
|
+
type: ElementType;
|
84
|
+
label: string;
|
85
|
+
value: Date | null;
|
86
|
+
rowId?: number;
|
87
|
+
colId?: number;
|
88
|
+
innerRowId?: number;
|
89
|
+
colClass?: string;
|
90
|
+
onChange: (e: Date | null) => void;
|
91
|
+
}
|
92
|
+
interface TextElement {
|
93
|
+
id: string;
|
94
|
+
type: ElementType;
|
95
|
+
value: string;
|
96
|
+
rowId?: number;
|
97
|
+
colId?: number;
|
98
|
+
innerRowId?: number;
|
99
|
+
colClass?: string;
|
100
|
+
style?: React.CSSProperties;
|
101
|
+
className?: string;
|
102
|
+
}
|
103
|
+
interface DividerElement {
|
104
|
+
id?: string;
|
105
|
+
type: ElementType;
|
106
|
+
rowId?: number;
|
107
|
+
colId?: number;
|
108
|
+
innerRowId?: number;
|
109
|
+
colClass?: string;
|
110
|
+
className?: string;
|
111
|
+
style?: React.CSSProperties;
|
112
|
+
}
|
113
|
+
interface RichTextboxElement {
|
114
|
+
id?: string;
|
115
|
+
type: ElementType;
|
116
|
+
label: string;
|
117
|
+
value: string;
|
118
|
+
rowId?: number;
|
119
|
+
colId?: number;
|
120
|
+
innerRowId?: number;
|
121
|
+
colClass?: string;
|
122
|
+
onChange: (value: string) => void;
|
123
|
+
}
|
124
|
+
interface TreeViewElement {
|
125
|
+
id?: string;
|
126
|
+
type: ElementType;
|
127
|
+
label?: string;
|
128
|
+
value: string[];
|
129
|
+
treeData: TreeNode[];
|
130
|
+
rowId?: number;
|
131
|
+
colId?: number;
|
132
|
+
innerRowId?: number;
|
133
|
+
colClass?: string;
|
134
|
+
onChange: (selected: string[]) => void;
|
135
|
+
}
|
136
|
+
interface ButtonElement {
|
137
|
+
id?: string;
|
138
|
+
type: ElementType;
|
139
|
+
label: string;
|
140
|
+
className?: string;
|
141
|
+
onClick: (event: React.FormEvent) => void;
|
142
|
+
rowId?: number;
|
143
|
+
colId?: number;
|
144
|
+
innerRowId?: number;
|
145
|
+
colClass?: string;
|
146
|
+
}
|
147
|
+
type FormElement = InputElement | TextareaElement | CheckboxElement | RadioButtonElement | SelectElement | DateTimePickerElement | TextElement | DividerElement | RichTextboxElement | TreeViewElement | ButtonElement;
|
148
|
+
interface CustomFormProps {
|
149
|
+
elements: FormElement[];
|
150
|
+
onSubmit: (formValues: Record<string, any>) => void;
|
151
|
+
confirmLabel?: string;
|
152
|
+
cancelLabel?: string;
|
153
|
+
handleCancel?: () => void;
|
154
|
+
showConfirmButton?: boolean;
|
155
|
+
showCancelButton?: boolean;
|
156
|
+
}
|
157
|
+
declare const CustomForm: React.FC<CustomFormProps>;
|
158
|
+
export { CustomForm, ElementType };
|
159
|
+
export default CustomForm;
|