@apexcura/ui-components 0.0.6 → 0.0.7-Beta1
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/index.d.mts +11 -5
- package/dist/index.d.ts +11 -5
- package/dist/index.js +159 -39
- package/dist/index.mjs +160 -43
- package/package.json +16 -7
package/dist/index.d.mts
CHANGED
|
@@ -16,11 +16,11 @@ type ElementType = {
|
|
|
16
16
|
name?: string;
|
|
17
17
|
suffix?: React.ReactNode;
|
|
18
18
|
maxLength?: number;
|
|
19
|
-
onChange?: (value: string | number | boolean) => void;
|
|
19
|
+
onChange?: (value: string | number | boolean | any[]) => void;
|
|
20
20
|
};
|
|
21
21
|
|
|
22
22
|
interface ElementExecuterProps$2 extends ElementType {
|
|
23
|
-
onChange: (value: string | number | boolean) => void;
|
|
23
|
+
onChange: (value: string | number | boolean | any[]) => void;
|
|
24
24
|
}
|
|
25
25
|
declare const TextElement: (props: ElementExecuterProps$2) => React$1.JSX.Element;
|
|
26
26
|
|
|
@@ -37,17 +37,23 @@ interface PasswordProps {
|
|
|
37
37
|
declare const PasswordElement: React$1.FC<PasswordProps>;
|
|
38
38
|
|
|
39
39
|
interface ElementExecuterProps$1 extends ElementType {
|
|
40
|
-
onChange: (value: string | number | boolean) => void;
|
|
40
|
+
onChange: (value: string | number | boolean | any[]) => void;
|
|
41
41
|
}
|
|
42
42
|
declare const NumberElement: (props: ElementExecuterProps$1) => React$1.JSX.Element;
|
|
43
43
|
|
|
44
44
|
interface ElementExecuterProps extends ElementType {
|
|
45
|
-
onChange: (value: string | number | boolean) => void;
|
|
45
|
+
onChange: (value: string | number | boolean | any[]) => void;
|
|
46
46
|
}
|
|
47
47
|
declare const TextareaElement: (props: ElementExecuterProps) => React$1.JSX.Element;
|
|
48
48
|
|
|
49
49
|
declare const SelectElement: (props: ElementType) => React$1.JSX.Element;
|
|
50
50
|
|
|
51
|
+
declare const RadioElement: (props: ElementType) => void;
|
|
52
|
+
|
|
53
|
+
declare const CheckboxElement: (props: ElementType) => React$1.JSX.Element;
|
|
54
|
+
|
|
55
|
+
declare const CkEditor: React$1.FC;
|
|
56
|
+
|
|
51
57
|
declare const ButtonElement: () => React$1.JSX.Element;
|
|
52
58
|
|
|
53
|
-
export { ButtonElement, NumberElement, PasswordElement, SelectElement, TextElement, TextareaElement };
|
|
59
|
+
export { ButtonElement, CheckboxElement, CkEditor, NumberElement, PasswordElement, RadioElement, SelectElement, TextElement, TextareaElement };
|
package/dist/index.d.ts
CHANGED
|
@@ -16,11 +16,11 @@ type ElementType = {
|
|
|
16
16
|
name?: string;
|
|
17
17
|
suffix?: React.ReactNode;
|
|
18
18
|
maxLength?: number;
|
|
19
|
-
onChange?: (value: string | number | boolean) => void;
|
|
19
|
+
onChange?: (value: string | number | boolean | any[]) => void;
|
|
20
20
|
};
|
|
21
21
|
|
|
22
22
|
interface ElementExecuterProps$2 extends ElementType {
|
|
23
|
-
onChange: (value: string | number | boolean) => void;
|
|
23
|
+
onChange: (value: string | number | boolean | any[]) => void;
|
|
24
24
|
}
|
|
25
25
|
declare const TextElement: (props: ElementExecuterProps$2) => React$1.JSX.Element;
|
|
26
26
|
|
|
@@ -37,17 +37,23 @@ interface PasswordProps {
|
|
|
37
37
|
declare const PasswordElement: React$1.FC<PasswordProps>;
|
|
38
38
|
|
|
39
39
|
interface ElementExecuterProps$1 extends ElementType {
|
|
40
|
-
onChange: (value: string | number | boolean) => void;
|
|
40
|
+
onChange: (value: string | number | boolean | any[]) => void;
|
|
41
41
|
}
|
|
42
42
|
declare const NumberElement: (props: ElementExecuterProps$1) => React$1.JSX.Element;
|
|
43
43
|
|
|
44
44
|
interface ElementExecuterProps extends ElementType {
|
|
45
|
-
onChange: (value: string | number | boolean) => void;
|
|
45
|
+
onChange: (value: string | number | boolean | any[]) => void;
|
|
46
46
|
}
|
|
47
47
|
declare const TextareaElement: (props: ElementExecuterProps) => React$1.JSX.Element;
|
|
48
48
|
|
|
49
49
|
declare const SelectElement: (props: ElementType) => React$1.JSX.Element;
|
|
50
50
|
|
|
51
|
+
declare const RadioElement: (props: ElementType) => void;
|
|
52
|
+
|
|
53
|
+
declare const CheckboxElement: (props: ElementType) => React$1.JSX.Element;
|
|
54
|
+
|
|
55
|
+
declare const CkEditor: React$1.FC;
|
|
56
|
+
|
|
51
57
|
declare const ButtonElement: () => React$1.JSX.Element;
|
|
52
58
|
|
|
53
|
-
export { ButtonElement, NumberElement, PasswordElement, SelectElement, TextElement, TextareaElement };
|
|
59
|
+
export { ButtonElement, CheckboxElement, CkEditor, NumberElement, PasswordElement, RadioElement, SelectElement, TextElement, TextareaElement };
|
package/dist/index.js
CHANGED
|
@@ -31,8 +31,11 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
31
31
|
var src_exports = {};
|
|
32
32
|
__export(src_exports, {
|
|
33
33
|
ButtonElement: () => ButtonElement,
|
|
34
|
+
CheckboxElement: () => CheckboxElement,
|
|
35
|
+
CkEditor: () => CkEditor,
|
|
34
36
|
NumberElement: () => NumberElement,
|
|
35
37
|
PasswordElement: () => PasswordElement,
|
|
38
|
+
RadioElement: () => RadioElement,
|
|
36
39
|
SelectElement: () => SelectElement,
|
|
37
40
|
TextElement: () => TextElement,
|
|
38
41
|
TextareaElement: () => TextareaElement
|
|
@@ -92,31 +95,28 @@ var PasswordElement = ({ inputData }) => {
|
|
|
92
95
|
// src/Components/NumberElement.tsx
|
|
93
96
|
var import_react3 = __toESM(require("react"));
|
|
94
97
|
var import_antd3 = require("antd");
|
|
95
|
-
var formatNumber = (value) => new Intl.NumberFormat().format(value);
|
|
96
98
|
var NumberElement = (props) => {
|
|
97
|
-
const
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
const reg = /^-?\d*(\.\d*)?$/;
|
|
101
|
-
if (reg.test(inputValue) || inputValue === "" || inputValue === "-") {
|
|
102
|
-
onChange(inputValue);
|
|
103
|
-
}
|
|
104
|
-
};
|
|
105
|
-
const handleBlur = () => {
|
|
106
|
-
let val = String({ value });
|
|
107
|
-
let valueTemp = val;
|
|
108
|
-
if (val.charAt(val.length - 1) === "." || value === "-") {
|
|
109
|
-
valueTemp = val.slice(0, -1);
|
|
110
|
-
}
|
|
111
|
-
onChange(valueTemp.replace(/0*(\d+)/, "$1"));
|
|
99
|
+
const handleInputChange = (e) => {
|
|
100
|
+
const newValue = e.target.value.replace(/[^0-9]/g, "");
|
|
101
|
+
props.onChange(newValue);
|
|
112
102
|
};
|
|
113
|
-
|
|
114
|
-
return /* @__PURE__ */ import_react3.default.createElement(import_antd3.Tooltip, { title }, /* @__PURE__ */ import_react3.default.createElement(
|
|
103
|
+
return /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, /* @__PURE__ */ import_react3.default.createElement("label", { htmlFor: props.name }, props.label), /* @__PURE__ */ import_react3.default.createElement(
|
|
115
104
|
import_antd3.Input,
|
|
116
105
|
{
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
106
|
+
placeholder: props.placeholder,
|
|
107
|
+
addonBefore: props.addonBefore,
|
|
108
|
+
allowClear: true,
|
|
109
|
+
defaultValue: props.defaultValue,
|
|
110
|
+
disabled: props.disabled,
|
|
111
|
+
id: props.name,
|
|
112
|
+
prefix: props.prefix,
|
|
113
|
+
type: props.type,
|
|
114
|
+
status: props.status,
|
|
115
|
+
style: props.styles,
|
|
116
|
+
className: props.classNames,
|
|
117
|
+
variant: props.variant,
|
|
118
|
+
name: props.name,
|
|
119
|
+
onChange: handleInputChange
|
|
120
120
|
}
|
|
121
121
|
));
|
|
122
122
|
};
|
|
@@ -161,32 +161,152 @@ var labelRender = (props) => {
|
|
|
161
161
|
}
|
|
162
162
|
return /* @__PURE__ */ import_react5.default.createElement("span", null, "select gender");
|
|
163
163
|
};
|
|
164
|
-
var SelectElement = (props) =>
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
164
|
+
var SelectElement = (props) => {
|
|
165
|
+
const handleChange = (value) => {
|
|
166
|
+
if (props.onChange) {
|
|
167
|
+
props.onChange(value);
|
|
168
|
+
}
|
|
169
|
+
};
|
|
170
|
+
return /* @__PURE__ */ import_react5.default.createElement(
|
|
171
|
+
import_antd5.Select,
|
|
172
|
+
{
|
|
173
|
+
labelRender,
|
|
174
|
+
options,
|
|
175
|
+
placeholder: props.placeholder,
|
|
176
|
+
allowClear: true,
|
|
177
|
+
defaultValue: props.defaultValue,
|
|
178
|
+
disabled: props.disabled,
|
|
179
|
+
id: props.name,
|
|
180
|
+
status: props.status,
|
|
181
|
+
style: props.styles,
|
|
182
|
+
className: props.classNames,
|
|
183
|
+
variant: props.variant,
|
|
184
|
+
onChange: handleChange
|
|
185
|
+
}
|
|
186
|
+
);
|
|
187
|
+
};
|
|
180
188
|
|
|
181
|
-
// src/Components/
|
|
189
|
+
// src/Components/RadioElement.tsx
|
|
182
190
|
var import_react6 = __toESM(require("react"));
|
|
183
191
|
var import_antd6 = require("antd");
|
|
184
|
-
var
|
|
192
|
+
var RadioElement = (props) => {
|
|
193
|
+
const handleChange = (e) => {
|
|
194
|
+
if (props && props.onChange) {
|
|
195
|
+
props.onChange(e.target.value);
|
|
196
|
+
}
|
|
197
|
+
};
|
|
198
|
+
/* @__PURE__ */ import_react6.default.createElement(import_antd6.Radio.Group, { name: "radiogroup", defaultValue: 1 }, /* @__PURE__ */ import_react6.default.createElement(import_antd6.Radio, { value: 1, onChange: handleChange }, "A"), /* @__PURE__ */ import_react6.default.createElement(import_antd6.Radio, { value: 2, onChange: handleChange }, "B"), /* @__PURE__ */ import_react6.default.createElement(import_antd6.Radio, { value: 3, onChange: handleChange }, "C"), /* @__PURE__ */ import_react6.default.createElement(import_antd6.Radio, { value: 4, onChange: handleChange }, "D"));
|
|
199
|
+
};
|
|
200
|
+
|
|
201
|
+
// src/Components/Checkbox.tsx
|
|
202
|
+
var import_react7 = __toESM(require("react"));
|
|
203
|
+
var import_antd7 = require("antd");
|
|
204
|
+
var CheckboxGroup = import_antd7.Checkbox.Group;
|
|
205
|
+
var plainOptions = ["Apple", "Pear", "Orange"];
|
|
206
|
+
var defaultCheckedList = [];
|
|
207
|
+
var CheckboxElement = (props) => {
|
|
208
|
+
const [checkedList, setCheckedList] = (0, import_react7.useState)(defaultCheckedList);
|
|
209
|
+
const checkAll = plainOptions.length === checkedList.length;
|
|
210
|
+
const indeterminate = checkedList.length > 0 && checkedList.length < plainOptions.length;
|
|
211
|
+
const handleChange = (list) => {
|
|
212
|
+
setCheckedList(list);
|
|
213
|
+
if (props.onChange) {
|
|
214
|
+
props.onChange(checkedList);
|
|
215
|
+
}
|
|
216
|
+
};
|
|
217
|
+
const onHandleAllChanges = (e) => {
|
|
218
|
+
setCheckedList(e.target.checked ? plainOptions : []);
|
|
219
|
+
if (props.onChange) {
|
|
220
|
+
props.onChange(checkedList);
|
|
221
|
+
}
|
|
222
|
+
};
|
|
223
|
+
return /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, /* @__PURE__ */ import_react7.default.createElement(
|
|
224
|
+
import_antd7.Checkbox,
|
|
225
|
+
{
|
|
226
|
+
disabled: props.disabled,
|
|
227
|
+
id: props.name,
|
|
228
|
+
style: props.styles,
|
|
229
|
+
className: props.classNames,
|
|
230
|
+
indeterminate,
|
|
231
|
+
onChange: onHandleAllChanges,
|
|
232
|
+
checked: checkAll
|
|
233
|
+
},
|
|
234
|
+
"Check all"
|
|
235
|
+
), /* @__PURE__ */ import_react7.default.createElement(import_antd7.Divider, null), /* @__PURE__ */ import_react7.default.createElement(
|
|
236
|
+
CheckboxGroup,
|
|
237
|
+
{
|
|
238
|
+
disabled: props.disabled,
|
|
239
|
+
style: props.styles,
|
|
240
|
+
className: props.classNames,
|
|
241
|
+
options: plainOptions,
|
|
242
|
+
value: checkedList,
|
|
243
|
+
onChange: handleChange
|
|
244
|
+
}
|
|
245
|
+
));
|
|
246
|
+
};
|
|
247
|
+
|
|
248
|
+
// src/Components/CkEditor.tsx
|
|
249
|
+
var import_react8 = require("react");
|
|
250
|
+
var import_tinymce_react = require("@tinymce/tinymce-react");
|
|
251
|
+
var import_react9 = __toESM(require("react"));
|
|
252
|
+
var CkEditor = () => {
|
|
253
|
+
const editorRef = (0, import_react8.useRef)(null);
|
|
254
|
+
const log = () => {
|
|
255
|
+
if (editorRef.current) {
|
|
256
|
+
console.log(editorRef.current.getContent());
|
|
257
|
+
}
|
|
258
|
+
};
|
|
259
|
+
return /* @__PURE__ */ import_react9.default.createElement("div", null, /* @__PURE__ */ import_react9.default.createElement(
|
|
260
|
+
import_tinymce_react.Editor,
|
|
261
|
+
{
|
|
262
|
+
apiKey: "your-api-key",
|
|
263
|
+
onInit: (_evt, editor) => {
|
|
264
|
+
if (editor)
|
|
265
|
+
editorRef.current = editor;
|
|
266
|
+
},
|
|
267
|
+
initialValue: "<p>This is the initial content of the editor.</p>",
|
|
268
|
+
init: {
|
|
269
|
+
height: 500,
|
|
270
|
+
menubar: false,
|
|
271
|
+
plugins: [
|
|
272
|
+
"advlist",
|
|
273
|
+
"autolink",
|
|
274
|
+
"lists",
|
|
275
|
+
"link",
|
|
276
|
+
"image",
|
|
277
|
+
"charmap",
|
|
278
|
+
"preview",
|
|
279
|
+
"anchor",
|
|
280
|
+
"searchreplace",
|
|
281
|
+
"visualblocks",
|
|
282
|
+
"code",
|
|
283
|
+
"fullscreen",
|
|
284
|
+
"insertdatetime",
|
|
285
|
+
"media",
|
|
286
|
+
"table",
|
|
287
|
+
"code",
|
|
288
|
+
"help",
|
|
289
|
+
"wordcount"
|
|
290
|
+
],
|
|
291
|
+
toolbar: "undo redo | blocks | bold italic forecolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help",
|
|
292
|
+
content_style: "body { font-family:Helvetica,Arial,sans-serif; font-size:14px }"
|
|
293
|
+
}
|
|
294
|
+
}
|
|
295
|
+
), /* @__PURE__ */ import_react9.default.createElement("button", { onClick: log }, "Log editor content"));
|
|
296
|
+
};
|
|
297
|
+
|
|
298
|
+
// src/Components/Button.tsx
|
|
299
|
+
var import_react10 = __toESM(require("react"));
|
|
300
|
+
var import_antd8 = require("antd");
|
|
301
|
+
var ButtonElement = () => /* @__PURE__ */ import_react10.default.createElement(import_antd8.Flex, { gap: "small" }, /* @__PURE__ */ import_react10.default.createElement(import_antd8.Button, { type: "primary" }, "Primary Button"));
|
|
185
302
|
// Annotate the CommonJS export names for ESM import in node:
|
|
186
303
|
0 && (module.exports = {
|
|
187
304
|
ButtonElement,
|
|
305
|
+
CheckboxElement,
|
|
306
|
+
CkEditor,
|
|
188
307
|
NumberElement,
|
|
189
308
|
PasswordElement,
|
|
309
|
+
RadioElement,
|
|
190
310
|
SelectElement,
|
|
191
311
|
TextElement,
|
|
192
312
|
TextareaElement
|
package/dist/index.mjs
CHANGED
|
@@ -50,40 +50,37 @@ var PasswordElement = ({ inputData }) => {
|
|
|
50
50
|
|
|
51
51
|
// src/Components/NumberElement.tsx
|
|
52
52
|
import React3 from "react";
|
|
53
|
-
import { Input as
|
|
54
|
-
var formatNumber = (value) => new Intl.NumberFormat().format(value);
|
|
53
|
+
import { Input as AntInput2 } from "antd";
|
|
55
54
|
var NumberElement = (props) => {
|
|
56
|
-
const
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
const reg = /^-?\d*(\.\d*)?$/;
|
|
60
|
-
if (reg.test(inputValue) || inputValue === "" || inputValue === "-") {
|
|
61
|
-
onChange(inputValue);
|
|
62
|
-
}
|
|
63
|
-
};
|
|
64
|
-
const handleBlur = () => {
|
|
65
|
-
let val = String({ value });
|
|
66
|
-
let valueTemp = val;
|
|
67
|
-
if (val.charAt(val.length - 1) === "." || value === "-") {
|
|
68
|
-
valueTemp = val.slice(0, -1);
|
|
69
|
-
}
|
|
70
|
-
onChange(valueTemp.replace(/0*(\d+)/, "$1"));
|
|
55
|
+
const handleInputChange = (e) => {
|
|
56
|
+
const newValue = e.target.value.replace(/[^0-9]/g, "");
|
|
57
|
+
props.onChange(newValue);
|
|
71
58
|
};
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
Input2,
|
|
59
|
+
return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement("label", { htmlFor: props.name }, props.label), /* @__PURE__ */ React3.createElement(
|
|
60
|
+
AntInput2,
|
|
75
61
|
{
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
62
|
+
placeholder: props.placeholder,
|
|
63
|
+
addonBefore: props.addonBefore,
|
|
64
|
+
allowClear: true,
|
|
65
|
+
defaultValue: props.defaultValue,
|
|
66
|
+
disabled: props.disabled,
|
|
67
|
+
id: props.name,
|
|
68
|
+
prefix: props.prefix,
|
|
69
|
+
type: props.type,
|
|
70
|
+
status: props.status,
|
|
71
|
+
style: props.styles,
|
|
72
|
+
className: props.classNames,
|
|
73
|
+
variant: props.variant,
|
|
74
|
+
name: props.name,
|
|
75
|
+
onChange: handleInputChange
|
|
79
76
|
}
|
|
80
77
|
));
|
|
81
78
|
};
|
|
82
79
|
|
|
83
80
|
// src/Components/TextareaElement.tsx
|
|
84
81
|
import React4 from "react";
|
|
85
|
-
import { Flex, Input as
|
|
86
|
-
var { TextArea } =
|
|
82
|
+
import { Flex, Input as Input2 } from "antd";
|
|
83
|
+
var { TextArea } = Input2;
|
|
87
84
|
var TextareaElement = (props) => {
|
|
88
85
|
return /* @__PURE__ */ React4.createElement(Flex, { vertical: true, gap: 32 }, /* @__PURE__ */ React4.createElement(
|
|
89
86
|
TextArea,
|
|
@@ -120,31 +117,151 @@ var labelRender = (props) => {
|
|
|
120
117
|
}
|
|
121
118
|
return /* @__PURE__ */ React5.createElement("span", null, "select gender");
|
|
122
119
|
};
|
|
123
|
-
var SelectElement = (props) =>
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
120
|
+
var SelectElement = (props) => {
|
|
121
|
+
const handleChange = (value) => {
|
|
122
|
+
if (props.onChange) {
|
|
123
|
+
props.onChange(value);
|
|
124
|
+
}
|
|
125
|
+
};
|
|
126
|
+
return /* @__PURE__ */ React5.createElement(
|
|
127
|
+
Select,
|
|
128
|
+
{
|
|
129
|
+
labelRender,
|
|
130
|
+
options,
|
|
131
|
+
placeholder: props.placeholder,
|
|
132
|
+
allowClear: true,
|
|
133
|
+
defaultValue: props.defaultValue,
|
|
134
|
+
disabled: props.disabled,
|
|
135
|
+
id: props.name,
|
|
136
|
+
status: props.status,
|
|
137
|
+
style: props.styles,
|
|
138
|
+
className: props.classNames,
|
|
139
|
+
variant: props.variant,
|
|
140
|
+
onChange: handleChange
|
|
141
|
+
}
|
|
142
|
+
);
|
|
143
|
+
};
|
|
139
144
|
|
|
140
|
-
// src/Components/
|
|
145
|
+
// src/Components/RadioElement.tsx
|
|
141
146
|
import React6 from "react";
|
|
147
|
+
import { Radio } from "antd";
|
|
148
|
+
var RadioElement = (props) => {
|
|
149
|
+
const handleChange = (e) => {
|
|
150
|
+
if (props && props.onChange) {
|
|
151
|
+
props.onChange(e.target.value);
|
|
152
|
+
}
|
|
153
|
+
};
|
|
154
|
+
/* @__PURE__ */ React6.createElement(Radio.Group, { name: "radiogroup", defaultValue: 1 }, /* @__PURE__ */ React6.createElement(Radio, { value: 1, onChange: handleChange }, "A"), /* @__PURE__ */ React6.createElement(Radio, { value: 2, onChange: handleChange }, "B"), /* @__PURE__ */ React6.createElement(Radio, { value: 3, onChange: handleChange }, "C"), /* @__PURE__ */ React6.createElement(Radio, { value: 4, onChange: handleChange }, "D"));
|
|
155
|
+
};
|
|
156
|
+
|
|
157
|
+
// src/Components/Checkbox.tsx
|
|
158
|
+
import React7, { useState as useState2 } from "react";
|
|
159
|
+
import { Checkbox, Divider } from "antd";
|
|
160
|
+
var CheckboxGroup = Checkbox.Group;
|
|
161
|
+
var plainOptions = ["Apple", "Pear", "Orange"];
|
|
162
|
+
var defaultCheckedList = [];
|
|
163
|
+
var CheckboxElement = (props) => {
|
|
164
|
+
const [checkedList, setCheckedList] = useState2(defaultCheckedList);
|
|
165
|
+
const checkAll = plainOptions.length === checkedList.length;
|
|
166
|
+
const indeterminate = checkedList.length > 0 && checkedList.length < plainOptions.length;
|
|
167
|
+
const handleChange = (list) => {
|
|
168
|
+
setCheckedList(list);
|
|
169
|
+
if (props.onChange) {
|
|
170
|
+
props.onChange(checkedList);
|
|
171
|
+
}
|
|
172
|
+
};
|
|
173
|
+
const onHandleAllChanges = (e) => {
|
|
174
|
+
setCheckedList(e.target.checked ? plainOptions : []);
|
|
175
|
+
if (props.onChange) {
|
|
176
|
+
props.onChange(checkedList);
|
|
177
|
+
}
|
|
178
|
+
};
|
|
179
|
+
return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(
|
|
180
|
+
Checkbox,
|
|
181
|
+
{
|
|
182
|
+
disabled: props.disabled,
|
|
183
|
+
id: props.name,
|
|
184
|
+
style: props.styles,
|
|
185
|
+
className: props.classNames,
|
|
186
|
+
indeterminate,
|
|
187
|
+
onChange: onHandleAllChanges,
|
|
188
|
+
checked: checkAll
|
|
189
|
+
},
|
|
190
|
+
"Check all"
|
|
191
|
+
), /* @__PURE__ */ React7.createElement(Divider, null), /* @__PURE__ */ React7.createElement(
|
|
192
|
+
CheckboxGroup,
|
|
193
|
+
{
|
|
194
|
+
disabled: props.disabled,
|
|
195
|
+
style: props.styles,
|
|
196
|
+
className: props.classNames,
|
|
197
|
+
options: plainOptions,
|
|
198
|
+
value: checkedList,
|
|
199
|
+
onChange: handleChange
|
|
200
|
+
}
|
|
201
|
+
));
|
|
202
|
+
};
|
|
203
|
+
|
|
204
|
+
// src/Components/CkEditor.tsx
|
|
205
|
+
import { useRef } from "react";
|
|
206
|
+
import { Editor } from "@tinymce/tinymce-react";
|
|
207
|
+
import React8 from "react";
|
|
208
|
+
var CkEditor = () => {
|
|
209
|
+
const editorRef = useRef(null);
|
|
210
|
+
const log = () => {
|
|
211
|
+
if (editorRef.current) {
|
|
212
|
+
console.log(editorRef.current.getContent());
|
|
213
|
+
}
|
|
214
|
+
};
|
|
215
|
+
return /* @__PURE__ */ React8.createElement("div", null, /* @__PURE__ */ React8.createElement(
|
|
216
|
+
Editor,
|
|
217
|
+
{
|
|
218
|
+
apiKey: "your-api-key",
|
|
219
|
+
onInit: (_evt, editor) => {
|
|
220
|
+
if (editor)
|
|
221
|
+
editorRef.current = editor;
|
|
222
|
+
},
|
|
223
|
+
initialValue: "<p>This is the initial content of the editor.</p>",
|
|
224
|
+
init: {
|
|
225
|
+
height: 500,
|
|
226
|
+
menubar: false,
|
|
227
|
+
plugins: [
|
|
228
|
+
"advlist",
|
|
229
|
+
"autolink",
|
|
230
|
+
"lists",
|
|
231
|
+
"link",
|
|
232
|
+
"image",
|
|
233
|
+
"charmap",
|
|
234
|
+
"preview",
|
|
235
|
+
"anchor",
|
|
236
|
+
"searchreplace",
|
|
237
|
+
"visualblocks",
|
|
238
|
+
"code",
|
|
239
|
+
"fullscreen",
|
|
240
|
+
"insertdatetime",
|
|
241
|
+
"media",
|
|
242
|
+
"table",
|
|
243
|
+
"code",
|
|
244
|
+
"help",
|
|
245
|
+
"wordcount"
|
|
246
|
+
],
|
|
247
|
+
toolbar: "undo redo | blocks | bold italic forecolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help",
|
|
248
|
+
content_style: "body { font-family:Helvetica,Arial,sans-serif; font-size:14px }"
|
|
249
|
+
}
|
|
250
|
+
}
|
|
251
|
+
), /* @__PURE__ */ React8.createElement("button", { onClick: log }, "Log editor content"));
|
|
252
|
+
};
|
|
253
|
+
|
|
254
|
+
// src/Components/Button.tsx
|
|
255
|
+
import React9 from "react";
|
|
142
256
|
import { Button as Button2, Flex as Flex2 } from "antd";
|
|
143
|
-
var ButtonElement = () => /* @__PURE__ */
|
|
257
|
+
var ButtonElement = () => /* @__PURE__ */ React9.createElement(Flex2, { gap: "small" }, /* @__PURE__ */ React9.createElement(Button2, { type: "primary" }, "Primary Button"));
|
|
144
258
|
export {
|
|
145
259
|
ButtonElement,
|
|
260
|
+
CheckboxElement,
|
|
261
|
+
CkEditor,
|
|
146
262
|
NumberElement,
|
|
147
263
|
PasswordElement,
|
|
264
|
+
RadioElement,
|
|
148
265
|
SelectElement,
|
|
149
266
|
TextElement,
|
|
150
267
|
TextareaElement
|
package/package.json
CHANGED
|
@@ -1,8 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@apexcura/ui-components",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.7-Beta1",
|
|
4
4
|
"description": "Apex cura React components library",
|
|
5
|
-
"keywords"
|
|
5
|
+
"keywords": [
|
|
6
|
+
"apex cura",
|
|
7
|
+
"input",
|
|
8
|
+
"ui",
|
|
9
|
+
"react",
|
|
10
|
+
"react-component"
|
|
11
|
+
],
|
|
6
12
|
"homepage": "https://www.apexcura.com/",
|
|
7
13
|
"bugs": {
|
|
8
14
|
"url": "https://github.com/apexcura/ui-components/issues"
|
|
@@ -11,7 +17,7 @@
|
|
|
11
17
|
"type": "git",
|
|
12
18
|
"url": "git+https://github.com/apexcura/ui-components.git",
|
|
13
19
|
"directory": "packages/ui-components"
|
|
14
|
-
},
|
|
20
|
+
},
|
|
15
21
|
"author": "Apex Cura <hello@apexcura.com>",
|
|
16
22
|
"license": "ISC",
|
|
17
23
|
"main": "./dist/index.js",
|
|
@@ -24,21 +30,24 @@
|
|
|
24
30
|
"devDependencies": {
|
|
25
31
|
"@testing-library/jest-dom": "^6.4.2",
|
|
26
32
|
"@testing-library/react": "^15.0.6",
|
|
27
|
-
"@types/react-global-configuration": "^1.3.3",
|
|
28
33
|
"@types/jest": "^29.5.12",
|
|
29
34
|
"@types/react": "^18.3.1",
|
|
30
35
|
"@types/react-dom": "18.2.18",
|
|
36
|
+
"@types/react-global-configuration": "^1.3.3",
|
|
31
37
|
"@types/testing-library__react": "^10.2.0",
|
|
32
38
|
"antd": "^5.16.5",
|
|
33
|
-
"react": "^18.3.1",
|
|
34
|
-
"react-dom": "^18.3.1",
|
|
35
|
-
"tsup": "^8.0.2",
|
|
36
39
|
"jest": "^29.7.0",
|
|
37
40
|
"jest-environment-jsdom": "^29.7.0",
|
|
41
|
+
"react": "^18.3.1",
|
|
42
|
+
"react-dom": "^18.3.1",
|
|
38
43
|
"ts-jest": "^29.1.2",
|
|
44
|
+
"tsup": "^8.0.2",
|
|
39
45
|
"typescript": "^5.4.5"
|
|
40
46
|
},
|
|
41
47
|
"engines": {
|
|
42
48
|
"node": ">=18.0.0"
|
|
49
|
+
},
|
|
50
|
+
"dependencies": {
|
|
51
|
+
"@tinymce/tinymce-react": "^5.0.1"
|
|
43
52
|
}
|
|
44
53
|
}
|