@particle-network/ui-native 0.1.4-beta.0 → 0.1.4-beta.1
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/UXButton/button.types.d.ts +2 -2
- package/dist/components/UXCheckbox/checkbox.js +5 -4
- package/dist/components/UXHint/index.js +3 -2
- package/dist/components/UXListBox/UXListBoxItem.js +3 -2
- package/dist/components/UXRadio/radio.js +5 -4
- package/dist/components/UXTabs/tab.js +3 -2
- package/dist/components/UXTabs/types.d.ts +1 -1
- package/dist/components/UXToast/ToastView.js +3 -2
- package/dist/components/date-picker/date-button.d.ts +8 -0
- package/dist/components/date-picker/date-button.js +21 -0
- package/dist/components/date-picker/date-picker.d.ts +3 -0
- package/dist/components/date-picker/date-picker.js +117 -0
- package/dist/components/date-picker/date-range-picker.d.ts +3 -0
- package/dist/components/date-picker/date-range-picker.js +195 -0
- package/dist/components/date-picker/date-wheel-picker.d.ts +3 -0
- package/dist/components/date-picker/date-wheel-picker.js +121 -0
- package/dist/components/date-picker/index.d.ts +3 -0
- package/dist/components/date-picker/index.js +2 -0
- package/dist/components/date-picker/time-wheel-picker.d.ts +7 -0
- package/dist/components/date-picker/time-wheel-picker.js +64 -0
- package/dist/components/date-picker/types.d.ts +93 -0
- package/dist/components/date-picker/types.js +0 -0
- package/dist/components/date-picker/utils.d.ts +6 -0
- package/dist/components/date-picker/utils.js +2 -0
- package/dist/components/date-picker/wheel-column.d.ts +12 -0
- package/dist/components/date-picker/wheel-column.js +152 -0
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.js +1 -0
- package/dist/components/input/input.js +3 -2
- package/dist/components/input/number-input.js +3 -2
- package/dist/config/config.street.d.ts +2 -0
- package/dist/config/{config.ux.js → config.street.js} +2 -2
- package/dist/config/index.d.ts +1 -1
- package/dist/config/index.js +2 -2
- package/dist/hooks/index.d.ts +2 -0
- package/dist/hooks/index.js +2 -0
- package/dist/hooks/useI18n.d.ts +5 -0
- package/dist/hooks/useI18n.js +7 -0
- package/dist/hooks/useLocale.d.ts +8 -0
- package/dist/hooks/useLocale.js +9 -0
- package/dist/icons/{DotIcon.d.ts → index.d.ts} +1 -2
- package/dist/icons/index.js +152 -0
- package/dist/icons/types.d.ts +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/dist/locales/en.d.ts +35 -0
- package/dist/locales/en.js +35 -0
- package/dist/locales/index.d.ts +107 -0
- package/dist/locales/index.js +12 -0
- package/dist/locales/zh.d.ts +2 -0
- package/dist/locales/zh.js +35 -0
- package/dist/provider/ThemeContext.js +2 -0
- package/dist/provider/ThemeProvider.d.ts +4 -2
- package/dist/provider/ThemeProvider.js +9 -3
- package/dist/types/theme.d.ts +4 -0
- package/package.json +6 -4
- package/dist/config/config.ux.d.ts +0 -2
- package/dist/icons/CheckIcon.d.ts +0 -4
- package/dist/icons/CheckIcon.js +0 -20
- package/dist/icons/CheckboxOffIcon.d.ts +0 -4
- package/dist/icons/CheckboxOffIcon.js +0 -21
- package/dist/icons/CheckboxOnIcon.d.ts +0 -4
- package/dist/icons/CheckboxOnIcon.js +0 -26
- package/dist/icons/CloseIcon.d.ts +0 -4
- package/dist/icons/CloseIcon.js +0 -21
- package/dist/icons/DotIcon.js +0 -23
- package/dist/icons/QuestionIcon.d.ts +0 -4
- package/dist/icons/QuestionIcon.js +0 -21
- package/dist/icons/RadioOffIcon.d.ts +0 -4
- package/dist/icons/RadioOffIcon.js +0 -22
- package/dist/icons/RadioOnIcon.d.ts +0 -4
- package/dist/icons/RadioOnIcon.js +0 -42
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useEffect, useState } from "react";
|
|
3
|
+
import { useI18n } from "../../hooks/index.js";
|
|
4
|
+
import { HStack } from "../layout/HStack.js";
|
|
5
|
+
import wheel_column from "./wheel-column.js";
|
|
6
|
+
const hours = Array.from({
|
|
7
|
+
length: 24
|
|
8
|
+
}, (_, i)=>({
|
|
9
|
+
label: i.toString().padStart(2, '0'),
|
|
10
|
+
value: i
|
|
11
|
+
}));
|
|
12
|
+
const minutes = Array.from({
|
|
13
|
+
length: 60
|
|
14
|
+
}, (_, i)=>({
|
|
15
|
+
label: i.toString().padStart(2, '0'),
|
|
16
|
+
value: i
|
|
17
|
+
}));
|
|
18
|
+
const seconds = Array.from({
|
|
19
|
+
length: 60
|
|
20
|
+
}, (_, i)=>({
|
|
21
|
+
label: i.toString().padStart(2, '0'),
|
|
22
|
+
value: i
|
|
23
|
+
}));
|
|
24
|
+
const TimeWheelPicker = ({ selectedDate, onDateChange })=>{
|
|
25
|
+
const i18n = useI18n();
|
|
26
|
+
const [hour, setHour] = useState(selectedDate.getHours());
|
|
27
|
+
const [minute, setMinute] = useState(selectedDate.getMinutes());
|
|
28
|
+
const [second, setSecond] = useState(selectedDate.getSeconds());
|
|
29
|
+
useEffect(()=>{
|
|
30
|
+
const newDate = new Date(selectedDate);
|
|
31
|
+
newDate.setHours(hour);
|
|
32
|
+
newDate.setMinutes(minute);
|
|
33
|
+
newDate.setSeconds(second);
|
|
34
|
+
onDateChange(newDate);
|
|
35
|
+
}, [
|
|
36
|
+
hour,
|
|
37
|
+
minute,
|
|
38
|
+
second
|
|
39
|
+
]);
|
|
40
|
+
return /*#__PURE__*/ jsxs(HStack, {
|
|
41
|
+
fullWidth: true,
|
|
42
|
+
children: [
|
|
43
|
+
/*#__PURE__*/ jsx(wheel_column, {
|
|
44
|
+
data: hours,
|
|
45
|
+
label: i18n.datePicker.hour,
|
|
46
|
+
selectedValue: hour,
|
|
47
|
+
onValueChange: setHour
|
|
48
|
+
}),
|
|
49
|
+
/*#__PURE__*/ jsx(wheel_column, {
|
|
50
|
+
data: minutes,
|
|
51
|
+
label: i18n.datePicker.minute,
|
|
52
|
+
selectedValue: minute,
|
|
53
|
+
onValueChange: setMinute
|
|
54
|
+
}),
|
|
55
|
+
/*#__PURE__*/ jsx(wheel_column, {
|
|
56
|
+
data: seconds,
|
|
57
|
+
label: i18n.datePicker.second,
|
|
58
|
+
selectedValue: second,
|
|
59
|
+
onValueChange: setSecond
|
|
60
|
+
})
|
|
61
|
+
]
|
|
62
|
+
});
|
|
63
|
+
};
|
|
64
|
+
export { TimeWheelPicker };
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
import type { HStackProps } from '../layout/HStack';
|
|
2
|
+
import type { UXPressableProps } from '../UXPressable';
|
|
3
|
+
export interface UXDatePickerProps extends Omit<UXPressableProps, 'children'> {
|
|
4
|
+
/**
|
|
5
|
+
* 当前值
|
|
6
|
+
*/
|
|
7
|
+
value?: Date;
|
|
8
|
+
/**
|
|
9
|
+
* 默认值
|
|
10
|
+
*/
|
|
11
|
+
defaultValue?: Date;
|
|
12
|
+
/**
|
|
13
|
+
* 确认回调
|
|
14
|
+
*/
|
|
15
|
+
onConfirm?: (value: Date) => void;
|
|
16
|
+
/**
|
|
17
|
+
* 日期格式
|
|
18
|
+
*/
|
|
19
|
+
format?: string;
|
|
20
|
+
/**
|
|
21
|
+
* 最小日期
|
|
22
|
+
*/
|
|
23
|
+
minDate?: Date;
|
|
24
|
+
/**
|
|
25
|
+
* 最大日期
|
|
26
|
+
*/
|
|
27
|
+
maxDate?: Date;
|
|
28
|
+
/**
|
|
29
|
+
* 日期占位符
|
|
30
|
+
*/
|
|
31
|
+
placeholder?: string;
|
|
32
|
+
/**
|
|
33
|
+
* 是否禁用
|
|
34
|
+
*/
|
|
35
|
+
isDisabled?: boolean;
|
|
36
|
+
/**
|
|
37
|
+
* 是否只读
|
|
38
|
+
*/
|
|
39
|
+
isReadOnly?: boolean;
|
|
40
|
+
}
|
|
41
|
+
export interface UXDateRangePickerProps extends Omit<HStackProps, 'children'> {
|
|
42
|
+
/**
|
|
43
|
+
* 当前值
|
|
44
|
+
*/
|
|
45
|
+
value?: DateRangeValue;
|
|
46
|
+
/**
|
|
47
|
+
* 默认值
|
|
48
|
+
*/
|
|
49
|
+
defaultValue?: DateRangeValue;
|
|
50
|
+
/**
|
|
51
|
+
* 确认回调
|
|
52
|
+
*/
|
|
53
|
+
onConfirm?: (value: DateRangeValue) => void;
|
|
54
|
+
/**
|
|
55
|
+
* 日期格式
|
|
56
|
+
*/
|
|
57
|
+
format?: string;
|
|
58
|
+
/**
|
|
59
|
+
* 最小日期
|
|
60
|
+
*/
|
|
61
|
+
minDate?: Date;
|
|
62
|
+
/**
|
|
63
|
+
* 最大日期
|
|
64
|
+
*/
|
|
65
|
+
maxDate?: Date;
|
|
66
|
+
/**
|
|
67
|
+
* 开始日期占位符
|
|
68
|
+
*/
|
|
69
|
+
startPlaceholder?: string;
|
|
70
|
+
/**
|
|
71
|
+
* 结束日期占位符
|
|
72
|
+
*/
|
|
73
|
+
endPlaceholder?: string;
|
|
74
|
+
/**
|
|
75
|
+
* 是否禁用
|
|
76
|
+
*/
|
|
77
|
+
isDisabled?: boolean;
|
|
78
|
+
/**
|
|
79
|
+
* 是否只读
|
|
80
|
+
*/
|
|
81
|
+
isReadOnly?: boolean;
|
|
82
|
+
}
|
|
83
|
+
export interface DateRangeValue {
|
|
84
|
+
start?: Date;
|
|
85
|
+
end?: Date;
|
|
86
|
+
}
|
|
87
|
+
export interface WheelPickerProps {
|
|
88
|
+
selectedDate: Date;
|
|
89
|
+
onDateChange: (date: Date) => void;
|
|
90
|
+
minDate?: Date;
|
|
91
|
+
maxDate?: Date;
|
|
92
|
+
}
|
|
93
|
+
export type PickerType = 'date' | 'time';
|
|
File without changes
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
interface WheelColumnProps {
|
|
3
|
+
data: {
|
|
4
|
+
label: string;
|
|
5
|
+
value: number;
|
|
6
|
+
}[];
|
|
7
|
+
selectedValue: number;
|
|
8
|
+
onValueChange: (value: number) => void;
|
|
9
|
+
label: string;
|
|
10
|
+
}
|
|
11
|
+
declare const WheelColumn: React.FC<WheelColumnProps>;
|
|
12
|
+
export default WheelColumn;
|
|
@@ -0,0 +1,152 @@
|
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import react, { useEffect } from "react";
|
|
3
|
+
import { ScrollView } from "react-native";
|
|
4
|
+
import { Box } from "../layout/Box/index.js";
|
|
5
|
+
import { VStack } from "../layout/VStack.js";
|
|
6
|
+
import { Text } from "../Text/index.js";
|
|
7
|
+
import { UXPressable } from "../UXPressable/index.js";
|
|
8
|
+
const ITEM_HEIGHT = 44;
|
|
9
|
+
const WheelColumn = ({ data, selectedValue, onValueChange, label })=>{
|
|
10
|
+
const scrollViewRef = react.useRef(null);
|
|
11
|
+
const isScrolling = react.useRef(false);
|
|
12
|
+
const [scrollOffset, setScrollOffset] = react.useState(0);
|
|
13
|
+
const paddedData = react.useMemo(()=>{
|
|
14
|
+
const emptyItems = [
|
|
15
|
+
{
|
|
16
|
+
label: '',
|
|
17
|
+
value: -1
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
label: '',
|
|
21
|
+
value: -2
|
|
22
|
+
}
|
|
23
|
+
];
|
|
24
|
+
return [
|
|
25
|
+
...emptyItems,
|
|
26
|
+
...data,
|
|
27
|
+
...emptyItems
|
|
28
|
+
];
|
|
29
|
+
}, [
|
|
30
|
+
data
|
|
31
|
+
]);
|
|
32
|
+
const getItemOpacity = (index)=>{
|
|
33
|
+
const itemOffset = index * ITEM_HEIGHT;
|
|
34
|
+
const relativeOffset = itemOffset - scrollOffset;
|
|
35
|
+
const visibleIndex = Math.round(relativeOffset / ITEM_HEIGHT);
|
|
36
|
+
const opacityMap = {
|
|
37
|
+
0: 0.3,
|
|
38
|
+
1: 0.7,
|
|
39
|
+
2: 1,
|
|
40
|
+
3: 0.7,
|
|
41
|
+
4: 0.3
|
|
42
|
+
};
|
|
43
|
+
return opacityMap[visibleIndex] ?? 0.3;
|
|
44
|
+
};
|
|
45
|
+
useEffect(()=>{
|
|
46
|
+
const index = data.findIndex((item)=>item.value === selectedValue);
|
|
47
|
+
if (-1 !== index && scrollViewRef.current && !isScrolling.current) {
|
|
48
|
+
const targetY = index * ITEM_HEIGHT;
|
|
49
|
+
scrollViewRef.current.scrollTo({
|
|
50
|
+
y: targetY,
|
|
51
|
+
animated: false
|
|
52
|
+
});
|
|
53
|
+
setScrollOffset(targetY);
|
|
54
|
+
}
|
|
55
|
+
}, [
|
|
56
|
+
selectedValue,
|
|
57
|
+
data
|
|
58
|
+
]);
|
|
59
|
+
const handleScroll = (event)=>{
|
|
60
|
+
const offsetY = event.nativeEvent.contentOffset.y;
|
|
61
|
+
setScrollOffset(offsetY);
|
|
62
|
+
const index = Math.round(offsetY / ITEM_HEIGHT);
|
|
63
|
+
if (data[index] && data[index].value !== selectedValue) onValueChange(data[index].value);
|
|
64
|
+
};
|
|
65
|
+
const handleScrollBegin = ()=>{
|
|
66
|
+
isScrolling.current = true;
|
|
67
|
+
};
|
|
68
|
+
const handleScrollEnd = ()=>{
|
|
69
|
+
isScrolling.current = false;
|
|
70
|
+
};
|
|
71
|
+
return /*#__PURE__*/ jsxs(VStack, {
|
|
72
|
+
fill: true,
|
|
73
|
+
items: "center",
|
|
74
|
+
gap: 8,
|
|
75
|
+
children: [
|
|
76
|
+
/*#__PURE__*/ jsx(Text, {
|
|
77
|
+
body2Bold: true,
|
|
78
|
+
color: "secondary",
|
|
79
|
+
children: label
|
|
80
|
+
}),
|
|
81
|
+
/*#__PURE__*/ jsxs(Box, {
|
|
82
|
+
fullWidth: true,
|
|
83
|
+
position: "relative",
|
|
84
|
+
h: 5 * ITEM_HEIGHT,
|
|
85
|
+
children: [
|
|
86
|
+
/*#__PURE__*/ jsx(ScrollView, {
|
|
87
|
+
ref: scrollViewRef,
|
|
88
|
+
nestedScrollEnabled: true,
|
|
89
|
+
scrollEnabled: true,
|
|
90
|
+
showsVerticalScrollIndicator: false,
|
|
91
|
+
snapToInterval: ITEM_HEIGHT,
|
|
92
|
+
decelerationRate: "fast",
|
|
93
|
+
scrollEventThrottle: 16,
|
|
94
|
+
onScrollBeginDrag: handleScrollBegin,
|
|
95
|
+
onMomentumScrollBegin: handleScrollBegin,
|
|
96
|
+
onMomentumScrollEnd: handleScrollEnd,
|
|
97
|
+
onScrollEndDrag: handleScrollEnd,
|
|
98
|
+
onScroll: handleScroll,
|
|
99
|
+
children: paddedData.map((item, idx)=>{
|
|
100
|
+
const opacity = getItemOpacity(idx);
|
|
101
|
+
return /*#__PURE__*/ jsx(UXPressable, {
|
|
102
|
+
center: true,
|
|
103
|
+
ph: 20,
|
|
104
|
+
pv: 8,
|
|
105
|
+
h: ITEM_HEIGHT,
|
|
106
|
+
onPress: ()=>{
|
|
107
|
+
if (-1 !== item.value && -2 !== item.value) {
|
|
108
|
+
const dataIndex = data.findIndex((d)=>d.value === item.value);
|
|
109
|
+
if (-1 !== dataIndex) {
|
|
110
|
+
const targetY = dataIndex * ITEM_HEIGHT;
|
|
111
|
+
isScrolling.current = true;
|
|
112
|
+
scrollViewRef.current?.scrollTo({
|
|
113
|
+
y: targetY,
|
|
114
|
+
animated: true
|
|
115
|
+
});
|
|
116
|
+
setScrollOffset(targetY);
|
|
117
|
+
onValueChange(item.value);
|
|
118
|
+
setTimeout(()=>{
|
|
119
|
+
isScrolling.current = false;
|
|
120
|
+
}, 300);
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
},
|
|
124
|
+
children: /*#__PURE__*/ jsx(Text, {
|
|
125
|
+
body1Bold: true,
|
|
126
|
+
color: "foreground",
|
|
127
|
+
style: {
|
|
128
|
+
opacity
|
|
129
|
+
},
|
|
130
|
+
children: item.label
|
|
131
|
+
})
|
|
132
|
+
}, `${item.value}-${idx}`);
|
|
133
|
+
})
|
|
134
|
+
}),
|
|
135
|
+
/*#__PURE__*/ jsx(Box, {
|
|
136
|
+
position: "absolute",
|
|
137
|
+
zIndex: -1,
|
|
138
|
+
top: 2 * ITEM_HEIGHT,
|
|
139
|
+
left: 0,
|
|
140
|
+
right: 0,
|
|
141
|
+
h: ITEM_HEIGHT,
|
|
142
|
+
borderTop: 1,
|
|
143
|
+
borderBottom: 1,
|
|
144
|
+
borderColor: "divider"
|
|
145
|
+
})
|
|
146
|
+
]
|
|
147
|
+
})
|
|
148
|
+
]
|
|
149
|
+
});
|
|
150
|
+
};
|
|
151
|
+
const wheel_column = WheelColumn;
|
|
152
|
+
export { wheel_column as default };
|
package/dist/components/index.js
CHANGED
|
@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
|
|
3
3
|
import { TextInput } from "react-native";
|
|
4
4
|
import { useColors } from "../../hooks/index.js";
|
|
5
|
-
import
|
|
5
|
+
import { Icon } from "../../icons/index.js";
|
|
6
6
|
import { HStack } from "../layout/HStack.js";
|
|
7
7
|
import { VStack } from "../layout/VStack.js";
|
|
8
8
|
import { Text } from "../Text/index.js";
|
|
@@ -142,7 +142,8 @@ const UXInput = /*#__PURE__*/ forwardRef((props, ref)=>{
|
|
|
142
142
|
}),
|
|
143
143
|
isClearable && !!internalValue && !isDisabled && !isReadOnly && /*#__PURE__*/ jsx(UXPressable, {
|
|
144
144
|
onPress: handleClear,
|
|
145
|
-
children: /*#__PURE__*/ jsx(
|
|
145
|
+
children: /*#__PURE__*/ jsx(Icon, {
|
|
146
|
+
name: "close",
|
|
146
147
|
style: styles.clearButton
|
|
147
148
|
})
|
|
148
149
|
}),
|
|
@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
|
|
3
3
|
import { Platform, TextInput } from "react-native";
|
|
4
4
|
import { useColors } from "../../hooks/index.js";
|
|
5
|
-
import
|
|
5
|
+
import { Icon } from "../../icons/index.js";
|
|
6
6
|
import { HStack } from "../layout/HStack.js";
|
|
7
7
|
import { VStack } from "../layout/VStack.js";
|
|
8
8
|
import { Text } from "../Text/index.js";
|
|
@@ -236,7 +236,8 @@ const UXNumberInput = /*#__PURE__*/ forwardRef((props, ref)=>{
|
|
|
236
236
|
}),
|
|
237
237
|
isClearable && !isNaN(internalValue) && !isDisabled && !isReadOnly && /*#__PURE__*/ jsx(UXPressable, {
|
|
238
238
|
onPress: handleClear,
|
|
239
|
-
children: /*#__PURE__*/ jsx(
|
|
239
|
+
children: /*#__PURE__*/ jsx(Icon, {
|
|
240
|
+
name: "close",
|
|
240
241
|
style: styles.clearButton,
|
|
241
242
|
color: "secondary"
|
|
242
243
|
})
|
package/dist/config/index.d.ts
CHANGED
package/dist/config/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { defaultComponentConfig } from "./config.default.js";
|
|
2
|
-
import {
|
|
2
|
+
import { streetComponentConfig } from "./config.street.js";
|
|
3
3
|
const builtinComponentConfig = {
|
|
4
|
-
|
|
4
|
+
street: streetComponentConfig,
|
|
5
5
|
default: defaultComponentConfig
|
|
6
6
|
};
|
|
7
7
|
export { builtinComponentConfig };
|
package/dist/hooks/index.d.ts
CHANGED
package/dist/hooks/index.js
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
export * from "./useColors.js";
|
|
2
2
|
export * from "./useComponentConfig.js";
|
|
3
|
+
export * from "./useI18n.js";
|
|
3
4
|
export * from "./useKeyboard.js";
|
|
5
|
+
export * from "./useLocale.js";
|
|
4
6
|
export * from "./useMs.js";
|
|
5
7
|
export * from "./useRadius.js";
|
|
6
8
|
export * from "./useSpacing.js";
|
|
@@ -0,0 +1,152 @@
|
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import "react";
|
|
3
|
+
import react_native_svg, { Circle, ClipPath, Defs, G, Path } from "react-native-svg";
|
|
4
|
+
import { useColors } from "../hooks/index.js";
|
|
5
|
+
const Icon = ({ name, size = 16, color = 'default', ...props })=>{
|
|
6
|
+
const { getColor } = useColors();
|
|
7
|
+
const colorValue = getColor(color);
|
|
8
|
+
switch(name){
|
|
9
|
+
case 'checkboxOff':
|
|
10
|
+
return /*#__PURE__*/ jsx(react_native_svg, {
|
|
11
|
+
fill: "none",
|
|
12
|
+
height: size,
|
|
13
|
+
viewBox: "0 0 16 16",
|
|
14
|
+
width: size,
|
|
15
|
+
...props,
|
|
16
|
+
children: /*#__PURE__*/ jsx(Path, {
|
|
17
|
+
d: "M2.46191 0.615234H13.5381C14.5577 0.615234 15.3848 1.44231 15.3848 2.46191V13.5381C15.3848 14.5577 14.5577 15.3848 13.5381 15.3848H2.46191C1.44231 15.3848 0.615234 14.5577 0.615234 13.5381V2.46191C0.615234 1.44231 1.44231 0.615234 2.46191 0.615234Z",
|
|
18
|
+
stroke: colorValue,
|
|
19
|
+
strokeWidth: 1.23077
|
|
20
|
+
})
|
|
21
|
+
});
|
|
22
|
+
case 'checkboxOn':
|
|
23
|
+
return /*#__PURE__*/ jsxs(react_native_svg, {
|
|
24
|
+
fill: "none",
|
|
25
|
+
height: size,
|
|
26
|
+
viewBox: "0 0 16 16",
|
|
27
|
+
width: size,
|
|
28
|
+
...props,
|
|
29
|
+
children: [
|
|
30
|
+
/*#__PURE__*/ jsx(Path, {
|
|
31
|
+
d: "M2.46154 16H13.5385C14.8979 16 16 14.8979 16 13.5385V2.46154C16 1.10207 14.8979 0 13.5385 0H2.46154C1.10207 0 0 1.10207 0 2.46154V13.5385C0 14.8979 1.10207 16 2.46154 16Z",
|
|
32
|
+
fill: colorValue
|
|
33
|
+
}),
|
|
34
|
+
/*#__PURE__*/ jsx(Path, {
|
|
35
|
+
d: "M6.75547 9.24601L4.84436 7.3349C4.68139 7.17193 4.47399 7.09045 4.22214 7.09045C3.97028 7.09045 3.76288 7.17193 3.59991 7.3349C3.43695 7.49786 3.35547 7.70527 3.35547 7.95712C3.35547 8.20897 3.43695 8.41638 3.59991 8.57934L6.13325 11.1127C6.31102 11.2905 6.51843 11.3793 6.75547 11.3793C6.99251 11.3793 7.19991 11.2905 7.37769 11.1127L12.3999 6.09045C12.5629 5.92749 12.6444 5.72008 12.6444 5.46823C12.6444 5.21638 12.5629 5.00897 12.3999 4.84601C12.237 4.68304 12.0295 4.60156 11.7777 4.60156C11.5258 4.60156 11.3184 4.68304 11.1555 4.84601L6.75547 9.24601Z",
|
|
36
|
+
fill: "#ffffff"
|
|
37
|
+
})
|
|
38
|
+
]
|
|
39
|
+
});
|
|
40
|
+
case 'check':
|
|
41
|
+
return /*#__PURE__*/ jsx(react_native_svg, {
|
|
42
|
+
width: size,
|
|
43
|
+
height: size,
|
|
44
|
+
viewBox: "0 0 24 24",
|
|
45
|
+
fill: "none",
|
|
46
|
+
...props,
|
|
47
|
+
children: /*#__PURE__*/ jsx(Path, {
|
|
48
|
+
d: "M19.3281 6.28711C19.7108 5.90439 20.3302 5.9044 20.7129 6.28711C21.0956 6.66983 21.0956 7.28916 20.7129 7.67188L10.042 18.3389C10.0336 18.3479 10.0264 18.3584 10.0176 18.3672C9.82525 18.5574 9.57459 18.6514 9.32422 18.6514C9.07383 18.6513 8.82312 18.5555 8.63281 18.3652L3.28711 13.0186C2.90448 12.6358 2.90442 12.0165 3.28711 11.6338C3.66982 11.2513 4.28923 11.2512 4.67188 11.6338L9.32422 16.2891L19.3281 6.28711Z",
|
|
49
|
+
fill: colorValue
|
|
50
|
+
})
|
|
51
|
+
});
|
|
52
|
+
case 'close':
|
|
53
|
+
return /*#__PURE__*/ jsx(react_native_svg, {
|
|
54
|
+
width: size,
|
|
55
|
+
height: size,
|
|
56
|
+
viewBox: "0 0 24 24",
|
|
57
|
+
fill: "none",
|
|
58
|
+
...props,
|
|
59
|
+
children: /*#__PURE__*/ jsx(Path, {
|
|
60
|
+
d: "M5.29102 5.29102C5.47727 5.105 5.72974 5.00052 5.99298 5.00052C6.25621 5.00052 6.50868 5.105 6.69494 5.29102L11.9993 10.5941L17.3051 5.29102C17.4733 5.1228 17.6962 5.02051 17.9335 5.00277C18.1707 4.98503 18.4064 5.053 18.5977 5.19434L18.709 5.29102C18.895 5.47727 18.9995 5.72974 18.9995 5.99298C18.9995 6.25621 18.895 6.50868 18.709 6.69494L13.4046 11.9993L18.709 17.3051C18.8772 17.4733 18.9795 17.6962 18.9972 17.9335C19.015 18.1707 18.947 18.4064 18.8057 18.5977L18.709 18.709C18.5227 18.895 18.2703 18.9995 18.007 18.9995C17.7438 18.9995 17.4913 18.895 17.3051 18.709L11.9993 13.4046L6.69494 18.709C6.52675 18.8772 6.30377 18.9795 6.06655 18.9972C5.82933 19.015 5.59362 18.947 5.40228 18.8057L5.29102 18.709C5.105 18.5227 5.00052 18.2703 5.00052 18.007C5.00052 17.7438 5.105 17.4913 5.29102 17.3051L10.5941 11.9993L5.29102 6.69494C5.1228 6.52675 5.02051 6.30377 5.00277 6.06655C4.98503 5.82933 5.053 5.59362 5.19434 5.40228L5.29102 5.29102Z",
|
|
61
|
+
fill: colorValue
|
|
62
|
+
})
|
|
63
|
+
});
|
|
64
|
+
case 'dot':
|
|
65
|
+
return /*#__PURE__*/ jsx(react_native_svg, {
|
|
66
|
+
fill: "none",
|
|
67
|
+
height: size,
|
|
68
|
+
viewBox: "0 0 5 5",
|
|
69
|
+
width: size,
|
|
70
|
+
...props,
|
|
71
|
+
children: /*#__PURE__*/ jsx(Circle, {
|
|
72
|
+
cx: 2.5,
|
|
73
|
+
cy: 2.5,
|
|
74
|
+
fill: colorValue,
|
|
75
|
+
r: 2
|
|
76
|
+
})
|
|
77
|
+
});
|
|
78
|
+
case 'radioOff':
|
|
79
|
+
return /*#__PURE__*/ jsx(react_native_svg, {
|
|
80
|
+
fill: "none",
|
|
81
|
+
height: size,
|
|
82
|
+
viewBox: "0 0 16 16",
|
|
83
|
+
width: size,
|
|
84
|
+
...props,
|
|
85
|
+
children: /*#__PURE__*/ jsx(Path, {
|
|
86
|
+
d: "M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Z",
|
|
87
|
+
stroke: colorValue,
|
|
88
|
+
strokeWidth: 1.2
|
|
89
|
+
})
|
|
90
|
+
});
|
|
91
|
+
case 'radioOn':
|
|
92
|
+
return /*#__PURE__*/ jsxs(react_native_svg, {
|
|
93
|
+
fill: "none",
|
|
94
|
+
height: size,
|
|
95
|
+
viewBox: "0 0 16 16",
|
|
96
|
+
width: size,
|
|
97
|
+
...props,
|
|
98
|
+
children: [
|
|
99
|
+
/*#__PURE__*/ jsxs(G, {
|
|
100
|
+
clipPath: "url(#a)",
|
|
101
|
+
children: [
|
|
102
|
+
/*#__PURE__*/ jsx(Path, {
|
|
103
|
+
d: "M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Z",
|
|
104
|
+
stroke: colorValue,
|
|
105
|
+
strokeWidth: 1.2
|
|
106
|
+
}),
|
|
107
|
+
/*#__PURE__*/ jsx(Path, {
|
|
108
|
+
d: "M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z",
|
|
109
|
+
fill: colorValue
|
|
110
|
+
})
|
|
111
|
+
]
|
|
112
|
+
}),
|
|
113
|
+
/*#__PURE__*/ jsx(Defs, {
|
|
114
|
+
children: /*#__PURE__*/ jsx(ClipPath, {
|
|
115
|
+
id: "a",
|
|
116
|
+
children: /*#__PURE__*/ jsx(Path, {
|
|
117
|
+
d: "M0 0h16v16H0z",
|
|
118
|
+
fill: "#fff"
|
|
119
|
+
})
|
|
120
|
+
})
|
|
121
|
+
})
|
|
122
|
+
]
|
|
123
|
+
});
|
|
124
|
+
case 'question':
|
|
125
|
+
return /*#__PURE__*/ jsx(react_native_svg, {
|
|
126
|
+
width: size,
|
|
127
|
+
height: size,
|
|
128
|
+
viewBox: "0 0 24 24",
|
|
129
|
+
fill: "none",
|
|
130
|
+
...props,
|
|
131
|
+
children: /*#__PURE__*/ jsx(Path, {
|
|
132
|
+
d: "M12 1.90039C17.5781 1.90039 22.0996 6.42192 22.0996 12C22.0996 17.5781 17.5781 22.0996 12 22.0996C6.42192 22.0996 1.90039 17.5781 1.90039 12C1.90039 6.42192 6.42192 1.90039 12 1.90039ZM12 3.39551C7.24831 3.39551 3.39551 7.24831 3.39551 12C3.39551 16.7517 7.24831 20.6045 12 20.6045C16.7517 20.6045 20.6045 16.7517 20.6045 12C20.6045 7.24831 16.7517 3.39551 12 3.39551ZM11.5664 15.5703C11.8333 15.4158 12.1618 15.4158 12.4287 15.5703C12.5596 15.6462 12.6687 15.7559 12.7441 15.8867C12.8196 16.0177 12.8593 16.1669 12.8594 16.3184L12.8555 16.4062C12.8141 16.8119 12.4906 17.1347 12.085 17.1758L11.9971 17.1797C11.5216 17.1794 11.1359 16.7939 11.1357 16.3184C11.1357 16.0089 11.2997 15.7251 11.5664 15.5703ZM11.9893 6.82129C12.9078 6.81929 13.7973 7.18095 14.4258 7.81152C15.0097 8.3997 15.3109 9.15936 15.2676 9.94922C15.2451 10.3506 15.1678 10.7145 14.9336 11.1309C14.7012 11.544 14.317 12.0048 13.6875 12.6045C13.3697 12.9064 13.1143 13.1681 12.9346 13.4014C12.754 13.6358 12.6577 13.8315 12.6406 14.0029C12.6077 14.3258 12.3546 14.5717 12.0439 14.6279L11.9082 14.6396C11.8811 14.6396 11.8565 14.6376 11.8359 14.6357C11.4356 14.5993 11.1343 14.2558 11.1738 13.8633C11.2657 12.9821 11.9428 12.2786 12.6504 11.6045C13.218 11.0645 13.4993 10.7151 13.6416 10.4609C13.7801 10.2133 13.7892 10.0531 13.7988 9.87598C13.8208 9.48028 13.6678 9.09478 13.3613 8.79004L13.3604 8.78906C13.0109 8.4381 12.5131 8.23535 11.9971 8.23535H11.9932C11.0002 8.23755 10.1963 9.00926 10.1963 9.94531C10.1961 10.3405 9.86325 10.6493 9.45996 10.6494C9.05615 10.6494 8.72381 10.3381 8.72363 9.94336C8.72363 9.10996 9.06369 8.32601 9.67969 7.73633C10.296 7.14663 11.1173 6.82341 11.9893 6.82129Z",
|
|
133
|
+
fill: colorValue
|
|
134
|
+
})
|
|
135
|
+
});
|
|
136
|
+
case 'arrow-right':
|
|
137
|
+
return /*#__PURE__*/ jsx(react_native_svg, {
|
|
138
|
+
width: size,
|
|
139
|
+
height: size,
|
|
140
|
+
viewBox: "0 0 24 24",
|
|
141
|
+
fill: "none",
|
|
142
|
+
...props,
|
|
143
|
+
children: /*#__PURE__*/ jsx(Path, {
|
|
144
|
+
d: "M13.0312 19.7559L11.4971 18.2383L16.6191 13.1162H3.22168V10.9004H16.6191L11.4971 5.79492L13.0312 4.24414L20.7783 12.0088L13.0312 19.7559Z",
|
|
145
|
+
fill: colorValue
|
|
146
|
+
})
|
|
147
|
+
});
|
|
148
|
+
default:
|
|
149
|
+
return null;
|
|
150
|
+
}
|
|
151
|
+
};
|
|
152
|
+
export { Icon };
|
package/dist/icons/types.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import type { SvgProps } from 'react-native-svg';
|
|
2
2
|
import type { UXForegroundColor } from '@particle-network/ui-shared';
|
|
3
3
|
export type IconProps = SvgProps & {
|
|
4
|
+
name: 'checkboxOff' | 'checkboxOn' | 'check' | 'close' | 'dot' | 'radioOff' | 'radioOn' | 'question' | 'arrow-right';
|
|
4
5
|
size?: number;
|
|
5
6
|
color?: UXForegroundColor;
|
|
6
7
|
};
|
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED