jy-headless 0.0.18 → 0.0.19
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/radio/RadioGroup.d.ts +8 -8
- package/dist/index.esm.js +34 -31
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +33 -30
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,14 +1,7 @@
|
|
|
1
1
|
import React, { CSSProperties, ReactNode } from 'react';
|
|
2
2
|
import { RadioInputProps } from './RadioInput';
|
|
3
|
-
export interface RadioGroupContextProps {
|
|
4
|
-
selectedValues: string[] | null;
|
|
5
|
-
onToggle: (value: string) => void;
|
|
6
|
-
clearable?: boolean;
|
|
7
|
-
readOnly?: boolean;
|
|
8
|
-
disabled?: boolean;
|
|
9
|
-
}
|
|
10
3
|
export interface ItemComposition {
|
|
11
|
-
Item?: React.FC<
|
|
4
|
+
Item?: React.FC<RadioGroupItemProps>;
|
|
12
5
|
}
|
|
13
6
|
export interface RadioGroupProps {
|
|
14
7
|
children: ReactNode;
|
|
@@ -25,4 +18,11 @@ export interface RadioGroupProps {
|
|
|
25
18
|
error?: ReactNode | string;
|
|
26
19
|
}
|
|
27
20
|
declare const RadioGroup: React.FC<RadioGroupProps> & ItemComposition;
|
|
21
|
+
interface RadioGroupItemProps extends RadioInputProps {
|
|
22
|
+
selectedValues?: string[] | null;
|
|
23
|
+
onToggle?: (value: string) => void;
|
|
24
|
+
clearable?: boolean;
|
|
25
|
+
readOnly?: boolean;
|
|
26
|
+
disabled?: boolean;
|
|
27
|
+
}
|
|
28
28
|
export default RadioGroup;
|
package/dist/index.esm.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { useState, useMemo, useEffect
|
|
1
|
+
import React, { useState, useMemo, useEffect } from 'react';
|
|
2
2
|
|
|
3
3
|
/******************************************************************************
|
|
4
4
|
Copyright (c) Microsoft Corporation.
|
|
@@ -71,7 +71,8 @@ const Input = (_a) => {
|
|
|
71
71
|
prefixElement,
|
|
72
72
|
React.createElement("input", Object.assign({}, restProps, { className: className, style: Object.assign({ all: 'unset' }, style) })),
|
|
73
73
|
suffixElement,
|
|
74
|
-
showError &&
|
|
74
|
+
showError &&
|
|
75
|
+
(typeof error === 'string' ? (React.createElement("span", { style: { position: 'absolute', top: '100%', left: 0 } }, error)) : (error))));
|
|
75
76
|
};
|
|
76
77
|
|
|
77
78
|
const RadioInput = (_a) => {
|
|
@@ -91,28 +92,19 @@ const RadioInput = (_a) => {
|
|
|
91
92
|
return (React.createElement("span", { className: className, style: Object.assign({ position: 'relative' }, style) },
|
|
92
93
|
React.createElement("input", Object.assign({ id: uniqueId, type: 'radio', readOnly: true }, restProps, { checked: selected, onClick: onClick })),
|
|
93
94
|
React.createElement("label", { htmlFor: uniqueId }, children),
|
|
94
|
-
showError &&
|
|
95
|
+
showError &&
|
|
96
|
+
(typeof error === 'string' ? (React.createElement("span", { style: { position: 'absolute', top: '100%', left: 0 } }, error)) : (error))));
|
|
95
97
|
};
|
|
96
98
|
|
|
97
|
-
const RadioGroupContext = createContext({
|
|
98
|
-
selectedValues: [],
|
|
99
|
-
onToggle: () => { },
|
|
100
|
-
clearable: false,
|
|
101
|
-
readOnly: false,
|
|
102
|
-
disabled: false,
|
|
103
|
-
});
|
|
104
99
|
const RadioGroup = ({ title, style, className, children, value = [], onChange, clearable = false, allowMultiSelect = false, readOnly = false, disabled = false, showError = false, error, }) => {
|
|
105
100
|
const [selectedValues, setSelectedValues] = useState(value);
|
|
106
|
-
|
|
107
|
-
setSelectedValues(value);
|
|
108
|
-
}, [value]);
|
|
109
|
-
const onToggle = (name) => {
|
|
101
|
+
const onToggle = (id) => {
|
|
110
102
|
if (readOnly || disabled)
|
|
111
103
|
return;
|
|
112
104
|
let result;
|
|
113
|
-
if (selectedValues === null || selectedValues === undefined ? undefined : selectedValues.includes(
|
|
105
|
+
if (selectedValues === null || selectedValues === undefined ? undefined : selectedValues.includes(id)) {
|
|
114
106
|
if (clearable) {
|
|
115
|
-
result = selectedValues.filter((it) => it !==
|
|
107
|
+
result = selectedValues.filter((it) => it !== id);
|
|
116
108
|
}
|
|
117
109
|
else {
|
|
118
110
|
return;
|
|
@@ -120,28 +112,39 @@ const RadioGroup = ({ title, style, className, children, value = [], onChange, c
|
|
|
120
112
|
}
|
|
121
113
|
else {
|
|
122
114
|
if (allowMultiSelect) {
|
|
123
|
-
result = [...selectedValues,
|
|
115
|
+
result = [...selectedValues, id];
|
|
124
116
|
}
|
|
125
117
|
else {
|
|
126
|
-
result = [
|
|
118
|
+
result = [id];
|
|
127
119
|
}
|
|
128
120
|
}
|
|
129
121
|
setSelectedValues(() => result);
|
|
130
122
|
onChange === null || onChange === undefined ? undefined : onChange(result);
|
|
131
123
|
};
|
|
132
|
-
return (React.createElement(
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
124
|
+
return (React.createElement("span", { role: 'radiogroup', style: Object.assign({ position: 'relative' }, style), className: className },
|
|
125
|
+
typeof title === 'string' ? React.createElement("h3", null, title) : title,
|
|
126
|
+
React.Children.map(children, (child) => {
|
|
127
|
+
const renderer = child;
|
|
128
|
+
return React.isValidElement(renderer)
|
|
129
|
+
? React.cloneElement(renderer, {
|
|
130
|
+
selectedValues,
|
|
131
|
+
onToggle,
|
|
132
|
+
clearable,
|
|
133
|
+
readOnly,
|
|
134
|
+
disabled,
|
|
135
|
+
})
|
|
136
|
+
: null;
|
|
137
|
+
}),
|
|
138
|
+
showError &&
|
|
139
|
+
(typeof error === 'string' ? (React.createElement("span", { style: { position: 'absolute', top: '100%', left: 0 } }, error)) : (error))));
|
|
137
140
|
};
|
|
138
|
-
const RadioGroupItem = (
|
|
139
|
-
|
|
140
|
-
const uniqueId = useMemo(() => { var _a; return (_a =
|
|
141
|
-
return (React.createElement(RadioInput, Object.assign({},
|
|
141
|
+
const RadioGroupItem = (_a) => {
|
|
142
|
+
var { selectedValues, onToggle, clearable, readOnly, disabled } = _a, restProps = __rest(_a, ["selectedValues", "onToggle", "clearable", "readOnly", "disabled"]);
|
|
143
|
+
const uniqueId = useMemo(() => { var _a; return (_a = restProps.id) !== null && _a !== undefined ? _a : `radio-${crypto.randomUUID()}`; }, [restProps.id]);
|
|
144
|
+
return (React.createElement(RadioInput, Object.assign({}, restProps, { clearable: clearable, readOnly: readOnly, disabled: disabled, id: uniqueId, checked: selectedValues === null || selectedValues === undefined ? undefined : selectedValues.includes(uniqueId), onToggle: (e) => {
|
|
142
145
|
if (readOnly || disabled)
|
|
143
146
|
return;
|
|
144
|
-
onToggle(e.target.id);
|
|
147
|
+
onToggle === null || onToggle === undefined ? undefined : onToggle(e.target.id);
|
|
145
148
|
} })));
|
|
146
149
|
};
|
|
147
150
|
RadioGroup.Item = RadioGroupItem;
|
|
@@ -172,10 +175,10 @@ const CallIcon = ({ color = '#000', size = '1em', bgColor = 'transparent', fill
|
|
|
172
175
|
|
|
173
176
|
const HomeIcon = ({ color = '#000', size = '1em', bgColor = 'transparent', fill = 'none', }) => {
|
|
174
177
|
return (React.createElement("svg", { viewBox: "0 -0.5 25 25", width: size, height: size, fill: fill, style: { backgroundColor: bgColor }, xmlns: "http://www.w3.org/2000/svg" },
|
|
175
|
-
React.createElement("g", { id: "SVGRepo_bgCarrier",
|
|
176
|
-
React.createElement("g", { id: "SVGRepo_tracerCarrier",
|
|
178
|
+
React.createElement("g", { id: "SVGRepo_bgCarrier", strokeWidth: "0" }),
|
|
179
|
+
React.createElement("g", { id: "SVGRepo_tracerCarrier", strokeLinecap: "round", strokeLinejoin: "round" }),
|
|
177
180
|
React.createElement("g", { id: "SVGRepo_iconCarrier" },
|
|
178
|
-
React.createElement("path", {
|
|
181
|
+
React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M18.867 15.8321L18.873 10.0391L14.75 5.92908C13.5057 4.69031 11.4942 4.69031 10.25 5.92908L6.13599 10.0291V15.8291C6.1393 17.5833 7.56377 19.0028 9.31799 19.0001H15.685C17.438 19.0029 18.862 17.5851 18.867 15.8321Z", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
|
|
179
182
|
React.createElement("path", { d: "M19.624 6.01807C19.624 5.60385 19.2882 5.26807 18.874 5.26807C18.4598 5.26807 18.124 5.60385 18.124 6.01807H19.624ZM18.874 10.0391H18.124C18.124 10.2384 18.2033 10.4295 18.3445 10.5702L18.874 10.0391ZM19.9705 12.1912C20.2638 12.4837 20.7387 12.4829 21.0311 12.1896C21.3236 11.8962 21.3229 11.4214 21.0295 11.1289L19.9705 12.1912ZM6.66552 10.5602C6.95886 10.2678 6.95959 9.79289 6.66714 9.49955C6.3747 9.20621 5.89982 9.20548 5.60648 9.49793L6.66552 10.5602ZM3.97048 11.1289C3.67714 11.4214 3.67641 11.8962 3.96886 12.1896C4.2613 12.4829 4.73618 12.4837 5.02952 12.1912L3.97048 11.1289ZM13.75 19.0001C13.75 19.4143 14.0858 19.7501 14.5 19.7501C14.9142 19.7501 15.25 19.4143 15.25 19.0001H13.75ZM9.75 19.0001C9.75 19.4143 10.0858 19.7501 10.5 19.7501C10.9142 19.7501 11.25 19.4143 11.25 19.0001H9.75ZM18.124 6.01807V10.0391H19.624V6.01807H18.124ZM18.3445 10.5702L19.9705 12.1912L21.0295 11.1289L19.4035 9.50792L18.3445 10.5702ZM5.60648 9.49793L3.97048 11.1289L5.02952 12.1912L6.66552 10.5602L5.60648 9.49793ZM15.25 19.0001V17.2201H13.75V19.0001H15.25ZM15.25 17.2201C15.25 15.7013 14.0188 14.4701 12.5 14.4701V15.9701C13.1904 15.9701 13.75 16.5297 13.75 17.2201H15.25ZM12.5 14.4701C10.9812 14.4701 9.75 15.7013 9.75 17.2201H11.25C11.25 16.5297 11.8096 15.9701 12.5 15.9701V14.4701ZM9.75 17.2201V19.0001H11.25V17.2201H9.75Z", fill: color }))));
|
|
180
183
|
};
|
|
181
184
|
// COLLECTION: Xnix Circular Interface Icons
|
package/dist/index.esm.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/dist/index.js
CHANGED
|
@@ -73,7 +73,8 @@ const Input = (_a) => {
|
|
|
73
73
|
prefixElement,
|
|
74
74
|
React.createElement("input", Object.assign({}, restProps, { className: className, style: Object.assign({ all: 'unset' }, style) })),
|
|
75
75
|
suffixElement,
|
|
76
|
-
showError &&
|
|
76
|
+
showError &&
|
|
77
|
+
(typeof error === 'string' ? (React.createElement("span", { style: { position: 'absolute', top: '100%', left: 0 } }, error)) : (error))));
|
|
77
78
|
};
|
|
78
79
|
|
|
79
80
|
const RadioInput = (_a) => {
|
|
@@ -93,28 +94,19 @@ const RadioInput = (_a) => {
|
|
|
93
94
|
return (React.createElement("span", { className: className, style: Object.assign({ position: 'relative' }, style) },
|
|
94
95
|
React.createElement("input", Object.assign({ id: uniqueId, type: 'radio', readOnly: true }, restProps, { checked: selected, onClick: onClick })),
|
|
95
96
|
React.createElement("label", { htmlFor: uniqueId }, children),
|
|
96
|
-
showError &&
|
|
97
|
+
showError &&
|
|
98
|
+
(typeof error === 'string' ? (React.createElement("span", { style: { position: 'absolute', top: '100%', left: 0 } }, error)) : (error))));
|
|
97
99
|
};
|
|
98
100
|
|
|
99
|
-
const RadioGroupContext = React.createContext({
|
|
100
|
-
selectedValues: [],
|
|
101
|
-
onToggle: () => { },
|
|
102
|
-
clearable: false,
|
|
103
|
-
readOnly: false,
|
|
104
|
-
disabled: false,
|
|
105
|
-
});
|
|
106
101
|
const RadioGroup = ({ title, style, className, children, value = [], onChange, clearable = false, allowMultiSelect = false, readOnly = false, disabled = false, showError = false, error, }) => {
|
|
107
102
|
const [selectedValues, setSelectedValues] = React.useState(value);
|
|
108
|
-
|
|
109
|
-
setSelectedValues(value);
|
|
110
|
-
}, [value]);
|
|
111
|
-
const onToggle = (name) => {
|
|
103
|
+
const onToggle = (id) => {
|
|
112
104
|
if (readOnly || disabled)
|
|
113
105
|
return;
|
|
114
106
|
let result;
|
|
115
|
-
if (selectedValues === null || selectedValues === undefined ? undefined : selectedValues.includes(
|
|
107
|
+
if (selectedValues === null || selectedValues === undefined ? undefined : selectedValues.includes(id)) {
|
|
116
108
|
if (clearable) {
|
|
117
|
-
result = selectedValues.filter((it) => it !==
|
|
109
|
+
result = selectedValues.filter((it) => it !== id);
|
|
118
110
|
}
|
|
119
111
|
else {
|
|
120
112
|
return;
|
|
@@ -122,28 +114,39 @@ const RadioGroup = ({ title, style, className, children, value = [], onChange, c
|
|
|
122
114
|
}
|
|
123
115
|
else {
|
|
124
116
|
if (allowMultiSelect) {
|
|
125
|
-
result = [...selectedValues,
|
|
117
|
+
result = [...selectedValues, id];
|
|
126
118
|
}
|
|
127
119
|
else {
|
|
128
|
-
result = [
|
|
120
|
+
result = [id];
|
|
129
121
|
}
|
|
130
122
|
}
|
|
131
123
|
setSelectedValues(() => result);
|
|
132
124
|
onChange === null || onChange === undefined ? undefined : onChange(result);
|
|
133
125
|
};
|
|
134
|
-
return (React.createElement(
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
126
|
+
return (React.createElement("span", { role: 'radiogroup', style: Object.assign({ position: 'relative' }, style), className: className },
|
|
127
|
+
typeof title === 'string' ? React.createElement("h3", null, title) : title,
|
|
128
|
+
React.Children.map(children, (child) => {
|
|
129
|
+
const renderer = child;
|
|
130
|
+
return React.isValidElement(renderer)
|
|
131
|
+
? React.cloneElement(renderer, {
|
|
132
|
+
selectedValues,
|
|
133
|
+
onToggle,
|
|
134
|
+
clearable,
|
|
135
|
+
readOnly,
|
|
136
|
+
disabled,
|
|
137
|
+
})
|
|
138
|
+
: null;
|
|
139
|
+
}),
|
|
140
|
+
showError &&
|
|
141
|
+
(typeof error === 'string' ? (React.createElement("span", { style: { position: 'absolute', top: '100%', left: 0 } }, error)) : (error))));
|
|
139
142
|
};
|
|
140
|
-
const RadioGroupItem = (
|
|
141
|
-
|
|
142
|
-
const uniqueId = React.useMemo(() => { var _a; return (_a =
|
|
143
|
-
return (React.createElement(RadioInput, Object.assign({},
|
|
143
|
+
const RadioGroupItem = (_a) => {
|
|
144
|
+
var { selectedValues, onToggle, clearable, readOnly, disabled } = _a, restProps = __rest(_a, ["selectedValues", "onToggle", "clearable", "readOnly", "disabled"]);
|
|
145
|
+
const uniqueId = React.useMemo(() => { var _a; return (_a = restProps.id) !== null && _a !== undefined ? _a : `radio-${crypto.randomUUID()}`; }, [restProps.id]);
|
|
146
|
+
return (React.createElement(RadioInput, Object.assign({}, restProps, { clearable: clearable, readOnly: readOnly, disabled: disabled, id: uniqueId, checked: selectedValues === null || selectedValues === undefined ? undefined : selectedValues.includes(uniqueId), onToggle: (e) => {
|
|
144
147
|
if (readOnly || disabled)
|
|
145
148
|
return;
|
|
146
|
-
onToggle(e.target.id);
|
|
149
|
+
onToggle === null || onToggle === undefined ? undefined : onToggle(e.target.id);
|
|
147
150
|
} })));
|
|
148
151
|
};
|
|
149
152
|
RadioGroup.Item = RadioGroupItem;
|
|
@@ -174,10 +177,10 @@ const CallIcon = ({ color = '#000', size = '1em', bgColor = 'transparent', fill
|
|
|
174
177
|
|
|
175
178
|
const HomeIcon = ({ color = '#000', size = '1em', bgColor = 'transparent', fill = 'none', }) => {
|
|
176
179
|
return (React.createElement("svg", { viewBox: "0 -0.5 25 25", width: size, height: size, fill: fill, style: { backgroundColor: bgColor }, xmlns: "http://www.w3.org/2000/svg" },
|
|
177
|
-
React.createElement("g", { id: "SVGRepo_bgCarrier",
|
|
178
|
-
React.createElement("g", { id: "SVGRepo_tracerCarrier",
|
|
180
|
+
React.createElement("g", { id: "SVGRepo_bgCarrier", strokeWidth: "0" }),
|
|
181
|
+
React.createElement("g", { id: "SVGRepo_tracerCarrier", strokeLinecap: "round", strokeLinejoin: "round" }),
|
|
179
182
|
React.createElement("g", { id: "SVGRepo_iconCarrier" },
|
|
180
|
-
React.createElement("path", {
|
|
183
|
+
React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M18.867 15.8321L18.873 10.0391L14.75 5.92908C13.5057 4.69031 11.4942 4.69031 10.25 5.92908L6.13599 10.0291V15.8291C6.1393 17.5833 7.56377 19.0028 9.31799 19.0001H15.685C17.438 19.0029 18.862 17.5851 18.867 15.8321Z", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
|
|
181
184
|
React.createElement("path", { d: "M19.624 6.01807C19.624 5.60385 19.2882 5.26807 18.874 5.26807C18.4598 5.26807 18.124 5.60385 18.124 6.01807H19.624ZM18.874 10.0391H18.124C18.124 10.2384 18.2033 10.4295 18.3445 10.5702L18.874 10.0391ZM19.9705 12.1912C20.2638 12.4837 20.7387 12.4829 21.0311 12.1896C21.3236 11.8962 21.3229 11.4214 21.0295 11.1289L19.9705 12.1912ZM6.66552 10.5602C6.95886 10.2678 6.95959 9.79289 6.66714 9.49955C6.3747 9.20621 5.89982 9.20548 5.60648 9.49793L6.66552 10.5602ZM3.97048 11.1289C3.67714 11.4214 3.67641 11.8962 3.96886 12.1896C4.2613 12.4829 4.73618 12.4837 5.02952 12.1912L3.97048 11.1289ZM13.75 19.0001C13.75 19.4143 14.0858 19.7501 14.5 19.7501C14.9142 19.7501 15.25 19.4143 15.25 19.0001H13.75ZM9.75 19.0001C9.75 19.4143 10.0858 19.7501 10.5 19.7501C10.9142 19.7501 11.25 19.4143 11.25 19.0001H9.75ZM18.124 6.01807V10.0391H19.624V6.01807H18.124ZM18.3445 10.5702L19.9705 12.1912L21.0295 11.1289L19.4035 9.50792L18.3445 10.5702ZM5.60648 9.49793L3.97048 11.1289L5.02952 12.1912L6.66552 10.5602L5.60648 9.49793ZM15.25 19.0001V17.2201H13.75V19.0001H15.25ZM15.25 17.2201C15.25 15.7013 14.0188 14.4701 12.5 14.4701V15.9701C13.1904 15.9701 13.75 16.5297 13.75 17.2201H15.25ZM12.5 14.4701C10.9812 14.4701 9.75 15.7013 9.75 17.2201H11.25C11.25 16.5297 11.8096 15.9701 12.5 15.9701V14.4701ZM9.75 17.2201V19.0001H11.25V17.2201H9.75Z", fill: color }))));
|
|
182
185
|
};
|
|
183
186
|
// COLLECTION: Xnix Circular Interface Icons
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|