@mapples/ui 1.1.2 → 1.4.0
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/form/SubmitButton/SubmitButton.d.ts +13 -26
- package/dist/components/form/SubmitButton/SubmitButton.d.ts.map +1 -1
- package/dist/components/form/SubmitButton/SubmitButton.js +12 -21
- package/dist/components/form/SubmitButton/SubmitButton.js.map +1 -1
- package/dist/components/inputs/Button/Button.d.ts +42 -5
- package/dist/components/inputs/Button/Button.d.ts.map +1 -1
- package/dist/components/inputs/Button/Button.js +151 -10
- package/dist/components/inputs/Button/Button.js.map +1 -1
- package/dist/components/inputs/IconButton/IconButton.d.ts +65 -23
- package/dist/components/inputs/IconButton/IconButton.d.ts.map +1 -1
- package/dist/components/inputs/IconButton/IconButton.js +185 -38
- package/dist/components/inputs/IconButton/IconButton.js.map +1 -1
- package/dist/components/inputs/TextInput/TextInput.d.ts +5 -0
- package/dist/components/inputs/TextInput/TextInput.d.ts.map +1 -1
- package/dist/components/inputs/TextInput/TextInput.js +15 -3
- package/dist/components/inputs/TextInput/TextInput.js.map +1 -1
- package/dist/components/media/BarCode/BarCode.d.ts.map +1 -1
- package/dist/components/media/BarCode/BarCode.js +32 -38
- package/dist/components/media/BarCode/BarCode.js.map +1 -1
- package/dist/components/media/BarCode/BarCodeEncoder.d.ts.map +1 -1
- package/dist/components/media/BarCode/BarCodeEncoder.js +22 -3
- package/dist/components/media/BarCode/BarCodeEncoder.js.map +1 -1
- package/dist/components/media/Icon/Icon.d.ts +43 -24
- package/dist/components/media/Icon/Icon.d.ts.map +1 -1
- package/dist/components/media/Icon/Icon.js +31 -33
- package/dist/components/media/Icon/Icon.js.map +1 -1
- package/dist/components/media/Icon/families.d.ts +66 -0
- package/dist/components/media/Icon/families.d.ts.map +1 -0
- package/dist/components/media/Icon/families.js +316 -0
- package/dist/components/media/Icon/families.js.map +1 -0
- package/dist/components/media/Icon/index.d.ts +2 -0
- package/dist/components/media/Icon/index.d.ts.map +1 -1
- package/dist/components/media/Icon/index.js +2 -0
- package/dist/components/media/Icon/index.js.map +1 -1
- package/dist/components/media/QRCode/QRCode.d.ts.map +1 -1
- package/dist/components/media/QRCode/QRCode.js +19 -2
- package/dist/components/media/QRCode/QRCode.js.map +1 -1
- package/dist/components/media/Vector/MockIcon.d.ts.map +1 -0
- package/dist/components/media/Vector/MockIcon.js.map +1 -0
- package/dist/components/media/Vector/Vector.d.ts +56 -0
- package/dist/components/media/Vector/Vector.d.ts.map +1 -0
- package/dist/components/media/Vector/Vector.js +59 -0
- package/dist/components/media/Vector/Vector.js.map +1 -0
- package/dist/components/media/Vector/index.d.ts +5 -0
- package/dist/components/media/Vector/index.d.ts.map +1 -0
- package/dist/components/media/Vector/index.js +5 -0
- package/dist/components/media/Vector/index.js.map +1 -0
- package/dist/components/media/Vector/schematics.d.ts +11 -0
- package/dist/components/media/Vector/schematics.d.ts.map +1 -0
- package/dist/components/media/Vector/schematics.js +14 -0
- package/dist/components/media/Vector/schematics.js.map +1 -0
- package/dist/components/media/Video/Video.d.ts +1 -1
- package/dist/components/media/Video/Video.d.ts.map +1 -1
- package/dist/components/media/Video/Video.js +26 -3
- package/dist/components/media/Video/Video.js.map +1 -1
- package/dist/components/media/index.d.ts +2 -0
- package/dist/components/media/index.d.ts.map +1 -1
- package/dist/components/media/index.js +2 -0
- package/dist/components/media/index.js.map +1 -1
- package/dist/components/media/schematics.d.ts +3 -3
- package/dist/components/media/schematics.d.ts.map +1 -1
- package/dist/components/media/schematics.js +5 -3
- package/dist/components/media/schematics.js.map +1 -1
- package/dist/hooks/index.d.ts +3 -0
- package/dist/hooks/index.d.ts.map +1 -0
- package/dist/hooks/index.js +3 -0
- package/dist/hooks/index.js.map +1 -0
- package/dist/hooks/useTones.d.ts +54 -0
- package/dist/hooks/useTones.d.ts.map +1 -0
- package/dist/hooks/useTones.js +79 -0
- package/dist/hooks/useTones.js.map +1 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +2 -0
- package/dist/index.js.map +1 -1
- package/dist/tokens.d.ts +111 -0
- package/dist/tokens.d.ts.map +1 -0
- package/dist/tokens.js +133 -0
- package/dist/tokens.js.map +1 -0
- package/package.json +76 -1
- package/dist/components/media/Icon/MockIcon.d.ts.map +0 -1
- package/dist/components/media/Icon/MockIcon.js.map +0 -1
- /package/dist/components/media/{Icon → Vector}/MockIcon.d.ts +0 -0
- /package/dist/components/media/{Icon → Vector}/MockIcon.js +0 -0
|
@@ -1,66 +1,213 @@
|
|
|
1
|
-
import { forwardRef } from 'react';
|
|
2
|
-
import { styled as makeStyled, styled, StyledPressable, Styler, } from '@mapples/style';
|
|
1
|
+
import { forwardRef, useCallback, useState, } from 'react';
|
|
2
|
+
import { styled as makeStyled, styled, StyledPressable, StyledView, Styler, Typography, } from '@mapples/style';
|
|
3
3
|
import { SvgUri } from 'react-native-svg';
|
|
4
|
+
import useTones from '../../../hooks/useTones';
|
|
5
|
+
import { CONTROL_SIZES, DISABLED_OPACITY, } from '../../../tokens';
|
|
6
|
+
import Icon from '../../media/Icon';
|
|
4
7
|
import MockIcon from './MockIcon';
|
|
5
8
|
const StyledSvgUri = styled(SvgUri);
|
|
9
|
+
const BADGE_MAX = 99;
|
|
6
10
|
/**
|
|
7
|
-
*
|
|
11
|
+
* An icon-only button.
|
|
8
12
|
*
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
*
|
|
13
|
+
* With `iconName` it is a themed control: a square of `size`, painted by
|
|
14
|
+
* `variant` and `tone`, optionally a toggle (`selected`) with its own glyph,
|
|
15
|
+
* and a count badge. With only `uri` it renders the legacy SVG vector.
|
|
16
|
+
* Icon-only controls need an `accessibilityLabel`.
|
|
17
|
+
*
|
|
18
|
+
* @example
|
|
19
|
+
* ```tsx
|
|
20
|
+
* <IconButton
|
|
21
|
+
* iconName="heart-outline"
|
|
22
|
+
* selectedIconName="heart"
|
|
23
|
+
* variant="standard"
|
|
24
|
+
* selected={liked}
|
|
25
|
+
* onSelectedChange={setLiked}
|
|
26
|
+
* accessibilityLabel="Like"
|
|
27
|
+
* />
|
|
28
|
+
* ```
|
|
12
29
|
*
|
|
13
30
|
* @example
|
|
14
31
|
* ```tsx
|
|
15
32
|
* <IconButton
|
|
16
33
|
* uri="https://example.com/icon.svg"
|
|
17
34
|
* onPress={() => console.log('Icon pressed')}
|
|
18
|
-
* styled={{
|
|
19
|
-
* style: {
|
|
20
|
-
* width: 48,
|
|
21
|
-
* height: 48,
|
|
22
|
-
* backgroundColor: 'lightblue',
|
|
23
|
-
* borderRadius: 24,
|
|
24
|
-
* },
|
|
25
|
-
* styleSvg: {
|
|
26
|
-
* width: 24,
|
|
27
|
-
* height: 24,
|
|
28
|
-
* color: 'blue',
|
|
29
|
-
* },
|
|
30
|
-
* }}
|
|
35
|
+
* styled={{ styleSvg: { width: 24, height: 24, color: 'blue' } }}
|
|
31
36
|
* />
|
|
32
37
|
* ```
|
|
33
38
|
*
|
|
34
39
|
* @public
|
|
35
40
|
*/
|
|
36
|
-
const IconButton = forwardRef(({ styled, uri, ...props }, ref) => {
|
|
41
|
+
const IconButton = forwardRef(({ styled, uri, iconName, variant = 'standard', size = 'md', tone = 'primary', selected, onSelectedChange, selectedIconName, badgeCount, disabled = false, onPress, onPressIn, onPressOut, onHoverIn, onHoverOut, children, ...props }, ref) => {
|
|
37
42
|
const { styleSvg, ...styledViewProps } = styled || {};
|
|
43
|
+
const tones = useTones();
|
|
44
|
+
const [pressed, setPressed] = useState(false);
|
|
45
|
+
const [hovered, setHovered] = useState(false);
|
|
46
|
+
const [internalSelected, setInternalSelected] = useState(false);
|
|
38
47
|
const ejectStyle = Styler.flatten(styleSvg);
|
|
39
|
-
const
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
48
|
+
const isToggle = selected !== undefined || !!onSelectedChange;
|
|
49
|
+
const isSelected = selected ?? internalSelected;
|
|
50
|
+
const handlePress = useCallback((event) => {
|
|
51
|
+
if (isToggle) {
|
|
52
|
+
const next = !isSelected;
|
|
53
|
+
if (selected === undefined)
|
|
54
|
+
setInternalSelected(next);
|
|
55
|
+
onSelectedChange?.(next);
|
|
56
|
+
}
|
|
57
|
+
onPress?.(event);
|
|
58
|
+
}, [isSelected, isToggle, onPress, onSelectedChange, selected]);
|
|
59
|
+
const handlePressIn = useCallback((event) => {
|
|
60
|
+
setPressed(true);
|
|
61
|
+
onPressIn?.(event);
|
|
62
|
+
}, [onPressIn]);
|
|
63
|
+
const handlePressOut = useCallback((event) => {
|
|
64
|
+
setPressed(false);
|
|
65
|
+
onPressOut?.(event);
|
|
66
|
+
}, [onPressOut]);
|
|
67
|
+
const handleHoverIn = useCallback((event) => {
|
|
68
|
+
setHovered(true);
|
|
69
|
+
onHoverIn?.(event);
|
|
70
|
+
}, [onHoverIn]);
|
|
71
|
+
const handleHoverOut = useCallback((event) => {
|
|
72
|
+
setHovered(false);
|
|
73
|
+
onHoverOut?.(event);
|
|
74
|
+
}, [onHoverOut]);
|
|
75
|
+
if (iconName === undefined) {
|
|
76
|
+
const getUriComponent = (Uri) => {
|
|
77
|
+
const StyledSvg = makeStyled(Uri.default);
|
|
78
|
+
return (<StyledSvg styled={{
|
|
51
79
|
width: ejectStyle?.width,
|
|
52
80
|
height: ejectStyle?.height,
|
|
53
81
|
color: ejectStyle?.color,
|
|
54
82
|
style: styleSvg,
|
|
55
|
-
}}/>)
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
83
|
+
}}/>);
|
|
84
|
+
};
|
|
85
|
+
return (<StyledPressable ref={ref} styled={styledViewProps} disabled={disabled} onPress={onPress} onPressIn={onPressIn} onPressOut={onPressOut} onHoverIn={onHoverIn} onHoverOut={onHoverOut} {...props}>
|
|
86
|
+
{uri ? (<>
|
|
87
|
+
{typeof uri === 'string' ? (<StyledSvgUri uri={uri} styled={{
|
|
88
|
+
width: ejectStyle?.width,
|
|
89
|
+
height: ejectStyle?.height,
|
|
90
|
+
color: ejectStyle?.color,
|
|
91
|
+
style: styleSvg,
|
|
92
|
+
}}/>) : (getUriComponent(uri))}
|
|
93
|
+
</>) : (<MockIcon styled={{
|
|
94
|
+
width: ejectStyle?.width,
|
|
95
|
+
height: ejectStyle?.height,
|
|
96
|
+
color: ejectStyle?.color,
|
|
97
|
+
style: styleSvg,
|
|
98
|
+
}}/>)}
|
|
99
|
+
{children}
|
|
100
|
+
</StyledPressable>);
|
|
101
|
+
}
|
|
102
|
+
const spec = CONTROL_SIZES[size];
|
|
103
|
+
const palette = tones.tone(tone);
|
|
104
|
+
const text = tones.resolve('theme.text.primary');
|
|
105
|
+
const isDisabled = !!disabled;
|
|
106
|
+
let background = 'transparent';
|
|
107
|
+
let glyph = text;
|
|
108
|
+
let border;
|
|
109
|
+
switch (variant) {
|
|
110
|
+
case 'filled':
|
|
111
|
+
background = palette.main;
|
|
112
|
+
glyph = palette.contrast;
|
|
113
|
+
break;
|
|
114
|
+
case 'tonal':
|
|
115
|
+
background = palette.container;
|
|
116
|
+
glyph = isSelected ? palette.main : palette.onContainer;
|
|
117
|
+
break;
|
|
118
|
+
case 'outlined':
|
|
119
|
+
border = tones.outlineStrong;
|
|
120
|
+
background = isSelected ? palette.container : 'transparent';
|
|
121
|
+
glyph = isSelected ? palette.main : text;
|
|
122
|
+
break;
|
|
123
|
+
default:
|
|
124
|
+
background = isSelected ? palette.container : 'transparent';
|
|
125
|
+
glyph = isSelected ? palette.main : text;
|
|
126
|
+
}
|
|
127
|
+
const authoredGlyph = ejectStyle?.color;
|
|
128
|
+
const glyphColor = typeof authoredGlyph === 'string' ? tones.resolve(authoredGlyph) : glyph;
|
|
129
|
+
const glyphSize = ejectStyle?.width ?? spec.iconSize + 4;
|
|
130
|
+
const showLayer = !isDisabled && (pressed || hovered);
|
|
131
|
+
const badge = typeof badgeCount === 'number' && badgeCount > 0
|
|
132
|
+
? badgeCount > BADGE_MAX
|
|
133
|
+
? `${BADGE_MAX}+`
|
|
134
|
+
: String(badgeCount)
|
|
135
|
+
: null;
|
|
136
|
+
return (<StyledPressable ref={ref} accessibilityRole="button" accessibilityState={{
|
|
137
|
+
disabled: isDisabled,
|
|
138
|
+
selected: isToggle ? isSelected : undefined,
|
|
139
|
+
}} disabled={isDisabled} onPress={handlePress} onPressIn={handlePressIn} onPressOut={handlePressOut} onHoverIn={handleHoverIn} onHoverOut={handleHoverOut} styled={{
|
|
140
|
+
...styledViewProps,
|
|
141
|
+
style: [
|
|
142
|
+
styler.root,
|
|
143
|
+
{
|
|
144
|
+
width: spec.height,
|
|
145
|
+
height: spec.height,
|
|
146
|
+
borderRadius: spec.height / 2,
|
|
147
|
+
backgroundColor: background,
|
|
148
|
+
borderWidth: border ? 1 : 0,
|
|
149
|
+
borderColor: border ?? 'transparent',
|
|
150
|
+
},
|
|
151
|
+
styledViewProps.style,
|
|
152
|
+
isDisabled && styler.disabled,
|
|
153
|
+
],
|
|
154
|
+
}} {...props}>
|
|
155
|
+
{showLayer && (<StyledView pointerEvents="none" styled={{
|
|
156
|
+
style: [
|
|
157
|
+
styler.stateLayer,
|
|
158
|
+
{
|
|
159
|
+
backgroundColor: tones.stateLayer(glyphColor, pressed ? 'pressed' : 'hover'),
|
|
160
|
+
borderRadius: spec.height / 2,
|
|
161
|
+
},
|
|
162
|
+
],
|
|
61
163
|
}}/>)}
|
|
164
|
+
<Icon iconName={isSelected && selectedIconName ? selectedIconName : iconName} size={glyphSize} color={glyphColor} styled={{ styleSvg }}/>
|
|
165
|
+
{badge !== null && (<StyledView pointerEvents="none" styled={{
|
|
166
|
+
style: [
|
|
167
|
+
styler.badge,
|
|
168
|
+
{ backgroundColor: tones.tone('error').main },
|
|
169
|
+
],
|
|
170
|
+
}}>
|
|
171
|
+
<Typography variant="Caption" color={tones.tone('error').contrast} style={styler.badgeText}>
|
|
172
|
+
{badge}
|
|
173
|
+
</Typography>
|
|
174
|
+
</StyledView>)}
|
|
175
|
+
{children}
|
|
62
176
|
</StyledPressable>);
|
|
63
177
|
});
|
|
64
178
|
IconButton.displayName = 'IconButton';
|
|
179
|
+
const styler = Styler.create({
|
|
180
|
+
root: {
|
|
181
|
+
alignItems: 'center',
|
|
182
|
+
justifyContent: 'center',
|
|
183
|
+
alignSelf: 'flex-start',
|
|
184
|
+
},
|
|
185
|
+
disabled: {
|
|
186
|
+
opacity: DISABLED_OPACITY,
|
|
187
|
+
},
|
|
188
|
+
stateLayer: {
|
|
189
|
+
position: 'absolute',
|
|
190
|
+
top: 0,
|
|
191
|
+
left: 0,
|
|
192
|
+
right: 0,
|
|
193
|
+
bottom: 0,
|
|
194
|
+
},
|
|
195
|
+
badge: {
|
|
196
|
+
position: 'absolute',
|
|
197
|
+
top: 0,
|
|
198
|
+
right: 0,
|
|
199
|
+
minWidth: 16,
|
|
200
|
+
height: 16,
|
|
201
|
+
borderRadius: 8,
|
|
202
|
+
paddingHorizontal: 4,
|
|
203
|
+
alignItems: 'center',
|
|
204
|
+
justifyContent: 'center',
|
|
205
|
+
},
|
|
206
|
+
badgeText: {
|
|
207
|
+
fontSize: 10,
|
|
208
|
+
lineHeight: 12,
|
|
209
|
+
fontWeight: '700',
|
|
210
|
+
},
|
|
211
|
+
});
|
|
65
212
|
export default IconButton;
|
|
66
213
|
//# sourceMappingURL=IconButton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconButton.js","sourceRoot":"","sources":["../../../../src/components/inputs/IconButton/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"IconButton.js","sourceRoot":"","sources":["../../../../src/components/inputs/IconButton/IconButton.tsx"],"names":[],"mappings":"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"}
|
|
@@ -6,6 +6,11 @@ import { TextInputProps, TextInput as RNTextInput } from 'react-native';
|
|
|
6
6
|
* capabilities through the @mapples/style system. It supports all standard
|
|
7
7
|
* TextInput properties and behaviors.
|
|
8
8
|
*
|
|
9
|
+
* The text is always passed to the native input as a string: while `value` is
|
|
10
|
+
* undefined the component keeps the typed text itself, so a data binding that
|
|
11
|
+
* resolves later (page variables register after the first render) does not
|
|
12
|
+
* flip the input from uncontrolled to controlled.
|
|
13
|
+
*
|
|
9
14
|
* @example
|
|
10
15
|
* ```tsx
|
|
11
16
|
* <TextInput
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/TextInput/TextInput.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,cAAc,CAAC;AAExE
|
|
1
|
+
{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/TextInput/TextInput.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,cAAc,CAAC;AAExE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,QAAA,MAAM,SAAS;;+CAsBd,CAAC;AAGF,eAAe,SAAS,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { forwardRef } from 'react';
|
|
1
|
+
import { forwardRef, useCallback, useState } from 'react';
|
|
2
2
|
import { StyledTextInput } from '@mapples/style';
|
|
3
3
|
/**
|
|
4
4
|
* A customizable text input component with built-in styling support.
|
|
@@ -7,6 +7,11 @@ import { StyledTextInput } from '@mapples/style';
|
|
|
7
7
|
* capabilities through the @mapples/style system. It supports all standard
|
|
8
8
|
* TextInput properties and behaviors.
|
|
9
9
|
*
|
|
10
|
+
* The text is always passed to the native input as a string: while `value` is
|
|
11
|
+
* undefined the component keeps the typed text itself, so a data binding that
|
|
12
|
+
* resolves later (page variables register after the first render) does not
|
|
13
|
+
* flip the input from uncontrolled to controlled.
|
|
14
|
+
*
|
|
10
15
|
* @example
|
|
11
16
|
* ```tsx
|
|
12
17
|
* <TextInput
|
|
@@ -26,8 +31,15 @@ import { StyledTextInput } from '@mapples/style';
|
|
|
26
31
|
*
|
|
27
32
|
* @public
|
|
28
33
|
*/
|
|
29
|
-
const TextInput = forwardRef(({ children, ...props }, ref) => {
|
|
30
|
-
|
|
34
|
+
const TextInput = forwardRef(({ children, value, defaultValue, onChangeText, ...props }, ref) => {
|
|
35
|
+
const [internal, setInternal] = useState(defaultValue ?? '');
|
|
36
|
+
const controlled = value !== undefined;
|
|
37
|
+
const handleChangeText = useCallback((next) => {
|
|
38
|
+
if (!controlled)
|
|
39
|
+
setInternal(next);
|
|
40
|
+
onChangeText?.(next);
|
|
41
|
+
}, [controlled, onChangeText]);
|
|
42
|
+
return (<StyledTextInput ref={ref} {...props} value={controlled ? value : internal} onChangeText={handleChangeText}/>);
|
|
31
43
|
});
|
|
32
44
|
TextInput.displayName = 'TextInput';
|
|
33
45
|
export default TextInput;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextInput.js","sourceRoot":"","sources":["../../../../src/components/inputs/TextInput/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAqB,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"TextInput.js","sourceRoot":"","sources":["../../../../src/components/inputs/TextInput/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAqB,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE7E,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAGjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,SAAS,GAAG,UAAU,CAC1B,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACjE,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,YAAY,IAAI,EAAE,CAAC,CAAC;IAC7D,MAAM,UAAU,GAAG,KAAK,KAAK,SAAS,CAAC;IAEvC,MAAM,gBAAgB,GAAG,WAAW,CAClC,CAAC,IAAY,EAAE,EAAE;QACf,IAAI,CAAC,UAAU;YAAE,WAAW,CAAC,IAAI,CAAC,CAAC;QACnC,YAAY,EAAE,CAAC,IAAI,CAAC,CAAC;IACvB,CAAC,EACD,CAAC,UAAU,EAAE,YAAY,CAAC,CAC3B,CAAC;IAEF,OAAO,CACL,CAAC,eAAe,CACd,GAAG,CAAC,CAAC,GAAG,CAAC,CACT,IAAI,KAAK,CAAC,CACV,KAAK,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CACrC,YAAY,CAAC,CAAC,gBAAgB,CAAC,EAC/B,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AACF,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC;AAEpC,eAAe,SAAS,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BarCode.d.ts","sourceRoot":"","sources":["../../../../src/components/media/BarCode/BarCode.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAyB,MAAM,OAAO,CAAC;AAE7E,OAAO,EACL,UAAU,EACV,WAAW,EAGX,eAAe,EAChB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAY,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAuB,EAAE,KAAK,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEtE;;;;GAIG;AACH,MAAM,MAAM,YAAY,GAAG,iBAAiB,CAC1C,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC,EAAE,QAAQ,CAAC,GAAG;IAC3C,8DAA8D;IAC9D,MAAM,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,GAAG;QAChC,2BAA2B;QAC3B,QAAQ,CAAC,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;KACjC,CAAC;IACF,uCAAuC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iCAAiC;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,2CAA2C;IAC3C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,wCAAwC;IACxC,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB,CACF,CAAC;
|
|
1
|
+
{"version":3,"file":"BarCode.d.ts","sourceRoot":"","sources":["../../../../src/components/media/BarCode/BarCode.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAyB,MAAM,OAAO,CAAC;AAE7E,OAAO,EACL,UAAU,EACV,WAAW,EAGX,eAAe,EAChB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAY,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAuB,EAAE,KAAK,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEtE;;;;GAIG;AACH,MAAM,MAAM,YAAY,GAAG,iBAAiB,CAC1C,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC,EAAE,QAAQ,CAAC,GAAG;IAC3C,8DAA8D;IAC9D,MAAM,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,GAAG;QAChC,2BAA2B;QAC3B,QAAQ,CAAC,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;KACjC,CAAC;IACF,uCAAuC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iCAAiC;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,2CAA2C;IAC3C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,wCAAwC;IACxC,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB,CACF,CAAC;AAmFF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,QAAA,MAAM,OAAO;IA/HT,8DAA8D;aACrD,WAAW,CAAC,SAAS,CAAC,GAAG;QAChC,2BAA2B;QAC3B,QAAQ,CAAC,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;KACjC;IACD,uCAAuC;YAC/B,MAAM;IACd,iCAAiC;aACxB,MAAM;IACf,+BAA+B;YACvB,MAAM;IACd,sCAAsC;sBACpB,MAAM;IACxB,2CAA2C;sBACzB,MAAM;IACxB,wCAAwC;aAC/B,aAAa;;;wCAsKzB,CAAC;AAGF,eAAe,OAAO,CAAC"}
|
|
@@ -4,40 +4,27 @@ import Svg, { Rect } from 'react-native-svg';
|
|
|
4
4
|
import BarcodeEncoder from './BarCodeEncoder';
|
|
5
5
|
/**
|
|
6
6
|
* Generates barcode pattern using BarcodeEncoder
|
|
7
|
-
* Returns the encoded data and dimensions
|
|
7
|
+
* Returns the encoded data and dimensions, or `null` when there is no value to
|
|
8
|
+
* encode. An unencodable value is an authoring error: {@link BarcodeEncoder}
|
|
9
|
+
* throws a descriptive error and it is left to propagate, because a barcode
|
|
10
|
+
* that silently renders blank is a defect the author never gets to see.
|
|
8
11
|
*/
|
|
9
12
|
const generateBarcodeData = (value, format = 'CODE128', barWidth = 2) => {
|
|
10
13
|
if (!value)
|
|
11
14
|
return null;
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
if (segment && segment.data) {
|
|
26
|
-
for (let i = 0; i < segment.data.length; i++) {
|
|
27
|
-
const digit = segment.data[i];
|
|
28
|
-
if (digit === '1') {
|
|
29
|
-
bars.push({ x, width: barWidth });
|
|
30
|
-
}
|
|
31
|
-
x += barWidth;
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
else {
|
|
37
|
-
// Handle single object response (CODE128, CODE39, etc.)
|
|
38
|
-
if (encoded.data) {
|
|
39
|
-
for (let i = 0; i < encoded.data.length; i++) {
|
|
40
|
-
const digit = encoded.data[i];
|
|
15
|
+
const encoded = BarcodeEncoder.encode(value, format, {});
|
|
16
|
+
if (!encoded) {
|
|
17
|
+
throw new Error(`Barcode encoder returned no data (format: ${format}, value: ${value})`);
|
|
18
|
+
}
|
|
19
|
+
const bars = [];
|
|
20
|
+
let x = 0;
|
|
21
|
+
// Handle array response (EAN13, EAN8, UPC)
|
|
22
|
+
if (Array.isArray(encoded)) {
|
|
23
|
+
// Concatenate all segment data strings
|
|
24
|
+
for (const segment of encoded) {
|
|
25
|
+
if (segment && segment.data) {
|
|
26
|
+
for (let i = 0; i < segment.data.length; i++) {
|
|
27
|
+
const digit = segment.data[i];
|
|
41
28
|
if (digit === '1') {
|
|
42
29
|
bars.push({ x, width: barWidth });
|
|
43
30
|
}
|
|
@@ -45,16 +32,23 @@ const generateBarcodeData = (value, format = 'CODE128', barWidth = 2) => {
|
|
|
45
32
|
}
|
|
46
33
|
}
|
|
47
34
|
}
|
|
48
|
-
return {
|
|
49
|
-
bars,
|
|
50
|
-
totalWidth: x,
|
|
51
|
-
};
|
|
52
35
|
}
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
36
|
+
else {
|
|
37
|
+
// Handle single object response (CODE128, CODE39, etc.)
|
|
38
|
+
if (encoded.data) {
|
|
39
|
+
for (let i = 0; i < encoded.data.length; i++) {
|
|
40
|
+
const digit = encoded.data[i];
|
|
41
|
+
if (digit === '1') {
|
|
42
|
+
bars.push({ x, width: barWidth });
|
|
43
|
+
}
|
|
44
|
+
x += barWidth;
|
|
45
|
+
}
|
|
46
|
+
}
|
|
57
47
|
}
|
|
48
|
+
return {
|
|
49
|
+
bars,
|
|
50
|
+
totalWidth: x,
|
|
51
|
+
};
|
|
58
52
|
};
|
|
59
53
|
/**
|
|
60
54
|
* Renders barcode bars from barcode data
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BarCode.js","sourceRoot":"","sources":["../../../../src/components/media/BarCode/BarCode.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmC,OAAO,EAAE,MAAM,OAAO,CAAC;AAE7E,OAAO,EAGL,UAAU,EACV,MAAM,GAEP,MAAM,gBAAgB,CAAC;AAExB,OAAO,GAAG,EAAE,EAAE,IAAI,EAAY,MAAM,kBAAkB,CAAC;AAEvD,OAAO,cAAsC,MAAM,kBAAkB,CAAC;AA6BtE
|
|
1
|
+
{"version":3,"file":"BarCode.js","sourceRoot":"","sources":["../../../../src/components/media/BarCode/BarCode.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BarCodeEncoder.d.ts","sourceRoot":"","sources":["../../../../src/components/media/BarCode/BarCodeEncoder.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"BarCodeEncoder.d.ts","sourceRoot":"","sources":["../../../../src/components/media/BarCode/BarCodeEncoder.ts"],"names":[],"mappings":"AAuBA;;GAEG;AACH,MAAM,MAAM,aAAa,GACrB,SAAS,GACT,QAAQ,GACR,OAAO,GACP,MAAM,GACN,KAAK,GACL,OAAO,GACP,KAAK,GACL,YAAY,GACZ,SAAS,CAAC;AAEd;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,gEAAgE;IAChE,IAAI,EAAE,MAAM,CAAC;IACb,qCAAqC;IACrC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,wCAAwC;IACxC,OAAO,CAAC,EAAE;QACR,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;QACvB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;KACxB,CAAC;CACH;AAED;;;GAGG;AACH,MAAM,MAAM,cAAc,GACtB;IACE,8BAA8B;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,gEAAgE;IAChE,IAAI,EAAE,MAAM,CAAC;CACd,GACD,qBAAqB,EAAE,CAAC;AA0D5B;;GAEG;AACH,cAAM,cAAc;IAClB;;;;;;;;OAQG;IACH,MAAM,CACJ,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,aAAa,EACrB,OAAO,GAAE,oBAAyB,GACjC,cAAc;IAsEjB;;OAEG;IACH,mBAAmB,IAAI,MAAM,EAAE;CAGhC;;AAED,wBAAoC"}
|
|
@@ -1,5 +1,23 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
/**
|
|
2
|
+
* `jsbarcode` is an **optional peer dependency** of `@mapples/ui` (Project
|
|
3
|
+
* settings → Packages → "Barcode"): resolved lazily so apps without a barcode
|
|
4
|
+
* element don't have to install it. When absent, encoding throws.
|
|
5
|
+
*/
|
|
6
|
+
let barcodes = null;
|
|
7
|
+
try {
|
|
8
|
+
// eslint-disable-next-line @typescript-eslint/no-require-imports
|
|
9
|
+
barcodes = require('jsbarcode/src/barcodes').default;
|
|
10
|
+
}
|
|
11
|
+
catch {
|
|
12
|
+
barcodes = null;
|
|
13
|
+
}
|
|
14
|
+
const requireBarcodes = () => {
|
|
15
|
+
if (!barcodes) {
|
|
16
|
+
throw new Error('BarCode needs jsbarcode: enable the "Barcode" package in Project ' +
|
|
17
|
+
'settings → Packages.');
|
|
18
|
+
}
|
|
19
|
+
return barcodes;
|
|
20
|
+
};
|
|
3
21
|
/**
|
|
4
22
|
* Maps format names to jsbarcode format names
|
|
5
23
|
* Some formats might have different names in jsbarcode
|
|
@@ -61,6 +79,7 @@ class BarcodeEncoder {
|
|
|
61
79
|
* @throws Error if text is invalid, format is not supported, or encoding fails
|
|
62
80
|
*/
|
|
63
81
|
encode(text, format, options = {}) {
|
|
82
|
+
const barcodes = requireBarcodes();
|
|
64
83
|
// Find the correct format name in jsbarcode
|
|
65
84
|
const jsbarcodeFormat = findFormat(format, barcodes);
|
|
66
85
|
if (!jsbarcodeFormat) {
|
|
@@ -105,7 +124,7 @@ class BarcodeEncoder {
|
|
|
105
124
|
* Gets list of available barcode formats
|
|
106
125
|
*/
|
|
107
126
|
getAvailableFormats() {
|
|
108
|
-
return Object.keys(
|
|
127
|
+
return Object.keys(requireBarcodes());
|
|
109
128
|
}
|
|
110
129
|
}
|
|
111
130
|
export default new BarcodeEncoder();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BarCodeEncoder.js","sourceRoot":"","sources":["../../../../src/components/media/BarCode/BarCodeEncoder.ts"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"file":"BarCodeEncoder.js","sourceRoot":"","sources":["../../../../src/components/media/BarCode/BarCodeEncoder.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,56 +1,75 @@
|
|
|
1
1
|
import { PropsWithChildren } from 'react';
|
|
2
|
-
import { StyledProp, StyledProps, WithStyledProps } from '@mapples/style';
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
2
|
+
import { StyledProp, StyledProps, SvgStyle, WithStyledProps } from '@mapples/style';
|
|
3
|
+
import { ColorValue, View, ViewProps } from 'react-native';
|
|
4
|
+
import { IconFamilyKey } from './families';
|
|
5
5
|
/**
|
|
6
6
|
* Props for the Icon component.
|
|
7
7
|
*
|
|
8
8
|
* @public
|
|
9
9
|
*/
|
|
10
10
|
export type IconProps = PropsWithChildren<Omit<WithStyledProps<ViewProps>, 'styled'> & {
|
|
11
|
-
/** Styling configuration for the icon container and
|
|
11
|
+
/** Styling configuration for the icon container and glyph */
|
|
12
12
|
styled?: StyledProps<ViewProps> & {
|
|
13
|
-
/**
|
|
14
|
-
styleSvg?: StyledProp<
|
|
13
|
+
/** Glyph-specific styling (width, height, color) */
|
|
14
|
+
styleSvg?: StyledProp<SvgStyle>;
|
|
15
15
|
};
|
|
16
16
|
}> & {
|
|
17
|
-
/**
|
|
18
|
-
|
|
17
|
+
/**
|
|
18
|
+
* Icon family override for direct (chrome/chat) use. Canvas elements leave
|
|
19
|
+
* this unset — the family then comes from the project style config
|
|
20
|
+
* (`themeConfig.icons.family`), set in the styles modal.
|
|
21
|
+
*/
|
|
22
|
+
iconStyle?: IconFamilyKey;
|
|
23
|
+
/** Glyph name within the selected family */
|
|
24
|
+
iconName?: string;
|
|
25
|
+
/** Glyph font size — overrides the `styleSvg` width for direct use */
|
|
26
|
+
size?: number;
|
|
27
|
+
/** Glyph color — theme tokens allowed, overrides the `styleSvg` color */
|
|
28
|
+
color?: ColorValue;
|
|
19
29
|
};
|
|
20
30
|
/**
|
|
21
|
-
* Renders
|
|
22
|
-
*
|
|
23
|
-
*
|
|
24
|
-
*
|
|
25
|
-
*
|
|
26
|
-
* optional.
|
|
31
|
+
* Renders a font glyph from one of the bundled `@react-native-vector-icons`
|
|
32
|
+
* families. The family comes from the project style config
|
|
33
|
+
* (`themeConfig.icons.family`) unless overridden per instance via `iconStyle`;
|
|
34
|
+
* the glyph is selected by `iconName`. Without a family or a name the
|
|
35
|
+
* `MockIcon` placeholder is shown; a family whose package is not installed
|
|
36
|
+
* (every pack is an optional peer) throws.
|
|
27
37
|
*
|
|
28
38
|
* @example
|
|
29
39
|
* ```tsx
|
|
30
|
-
* //
|
|
40
|
+
* // Canvas usage — family from the project style config
|
|
31
41
|
* <Icon
|
|
32
|
-
*
|
|
42
|
+
* iconName="star"
|
|
33
43
|
* styled={{ styleSvg: { width: 24, height: 24, color: '#333' } }}
|
|
34
44
|
* />
|
|
35
45
|
*
|
|
36
|
-
* //
|
|
37
|
-
*
|
|
38
|
-
* <Icon uri={MyIcon} styled={{ styleSvg: { width: 24, height: 24 } }} />
|
|
46
|
+
* // Direct usage — chrome/chat surfaces pin the family
|
|
47
|
+
* <Icon iconStyle="ionicons" iconName="close" size={14} color="theme.text.tertiary" />
|
|
39
48
|
* ```
|
|
40
49
|
*
|
|
41
50
|
* @public
|
|
42
51
|
*/
|
|
43
52
|
declare const Icon: import("react").ForwardRefExoticComponent<Omit<WithStyledProps<ViewProps>, "styled"> & {
|
|
44
|
-
/** Styling configuration for the icon container and
|
|
53
|
+
/** Styling configuration for the icon container and glyph */
|
|
45
54
|
styled?: StyledProps<ViewProps> & {
|
|
46
|
-
/**
|
|
47
|
-
styleSvg?: StyledProp<
|
|
55
|
+
/** Glyph-specific styling (width, height, color) */
|
|
56
|
+
styleSvg?: StyledProp<SvgStyle>;
|
|
48
57
|
};
|
|
49
58
|
} & {
|
|
50
59
|
children?: import("react").ReactNode | undefined;
|
|
51
60
|
} & {
|
|
52
|
-
/**
|
|
53
|
-
|
|
61
|
+
/**
|
|
62
|
+
* Icon family override for direct (chrome/chat) use. Canvas elements leave
|
|
63
|
+
* this unset — the family then comes from the project style config
|
|
64
|
+
* (`themeConfig.icons.family`), set in the styles modal.
|
|
65
|
+
*/
|
|
66
|
+
iconStyle?: IconFamilyKey;
|
|
67
|
+
/** Glyph name within the selected family */
|
|
68
|
+
iconName?: string;
|
|
69
|
+
/** Glyph font size — overrides the `styleSvg` width for direct use */
|
|
70
|
+
size?: number;
|
|
71
|
+
/** Glyph color — theme tokens allowed, overrides the `styleSvg` color */
|
|
72
|
+
color?: ColorValue;
|
|
54
73
|
} & import("react").RefAttributes<View>>;
|
|
55
74
|
export default Icon;
|
|
56
75
|
//# sourceMappingURL=Icon.d.ts.map
|