@coinbase/cds-mobile 9.25.0 → 9.26.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/CHANGELOG.md
CHANGED
|
@@ -4,6 +4,7 @@ import type { Animated, PressableProps, ViewStyle } from 'react-native';
|
|
|
4
4
|
import type { ThemeVars } from '@coinbase/cds-common/core/theme';
|
|
5
5
|
import type { ElevationLevels } from '@coinbase/cds-common/types/ElevationLevels';
|
|
6
6
|
import type { SharedProps } from '@coinbase/cds-common/types/SharedProps';
|
|
7
|
+
import type { TypographyProps } from '@coinbase/cds-common/types/TextBaseProps';
|
|
7
8
|
import type { InteractableBaseProps } from '../system/Interactable';
|
|
8
9
|
import type { TextProps } from '../typography/Text';
|
|
9
10
|
export type ControlIconProps = SharedProps & {
|
|
@@ -23,10 +24,8 @@ export type ControlIconProps = SharedProps & {
|
|
|
23
24
|
animatedOpacityValue: Animated.Value;
|
|
24
25
|
accessible?: boolean;
|
|
25
26
|
};
|
|
26
|
-
export type ControlBaseProps<ControlValue extends string> =
|
|
27
|
-
PressableProps,
|
|
28
|
-
'disabled' | 'children' | 'style'
|
|
29
|
-
> &
|
|
27
|
+
export type ControlBaseProps<ControlValue extends string> = TypographyProps &
|
|
28
|
+
Omit<PressableProps, 'disabled' | 'children' | 'style'> &
|
|
30
29
|
Partial<
|
|
31
30
|
Pick<
|
|
32
31
|
InteractableBaseProps,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Control.d.ts","sourceRoot":"","sources":["../../src/controls/Control.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwD,MAAM,OAAO,CAAC;AAC7E,OAAO,EAAoC,IAAI,EAAE,MAAM,cAAc,CAAC;AACtE,OAAO,KAAK,EAEV,QAAQ,EACR,cAAc,EAEd,SAAS,EACV,MAAM,cAAc,CAAC;AACtB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAKjE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4CAA4C,CAAC;AAClF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;
|
|
1
|
+
{"version":3,"file":"Control.d.ts","sourceRoot":"","sources":["../../src/controls/Control.tsx"],"names":[],"mappings":"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"}
|
package/esm/controls/Control.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
const _excluded = ["ref"],
|
|
2
|
-
_excluded2 = ["testID", "label", "checked", "indeterminate", "disabled", "readOnly", "onChange", "hitSlop", "value", "controlColor", "elevation", "accessibilityRole", "accessibilityLabel", "accessibilityHint", "children", "shouldUseSwitchTransition", "accessible", "style", "color", "background", "borderColor", "borderRadius", "borderWidth", "controlSize", "dotSize"];
|
|
2
|
+
_excluded2 = ["testID", "label", "checked", "indeterminate", "disabled", "readOnly", "onChange", "hitSlop", "value", "controlColor", "elevation", "accessibilityRole", "accessibilityLabel", "accessibilityHint", "children", "shouldUseSwitchTransition", "accessible", "style", "color", "background", "borderColor", "borderRadius", "borderWidth", "controlSize", "dotSize", "font", "fontFamily", "fontSize", "fontWeight", "lineHeight", "textTransform"];
|
|
3
3
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
4
4
|
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
|
|
5
5
|
import React, { memo, useCallback, useEffect, useMemo, useRef } from 'react';
|
|
@@ -43,14 +43,19 @@ const ControlWithRef = function ControlWithRef(_ref) {
|
|
|
43
43
|
borderRadius,
|
|
44
44
|
borderWidth,
|
|
45
45
|
controlSize,
|
|
46
|
-
dotSize
|
|
46
|
+
dotSize,
|
|
47
|
+
font = 'body',
|
|
48
|
+
fontFamily = font,
|
|
49
|
+
fontSize = font,
|
|
50
|
+
fontWeight = font,
|
|
51
|
+
lineHeight = font,
|
|
52
|
+
textTransform
|
|
47
53
|
} = mergedProps,
|
|
48
54
|
props = _objectWithoutPropertiesLoose(mergedProps, _excluded2);
|
|
49
55
|
const theme = useTheme();
|
|
50
56
|
if (isDevelopment() && accessible && !label && !accessibilityLabel) {
|
|
51
57
|
console.warn("Please specify an accessibility label for the " + accessibilityRole + " control with value " + value + ".");
|
|
52
58
|
}
|
|
53
|
-
const bodyLineHeight = theme.lineHeight.body;
|
|
54
59
|
const isMounted = useRef(false);
|
|
55
60
|
const {
|
|
56
61
|
animation,
|
|
@@ -73,9 +78,9 @@ const ControlWithRef = function ControlWithRef(_ref) {
|
|
|
73
78
|
Keyboard.dismiss();
|
|
74
79
|
}, [checked, onChange, value]);
|
|
75
80
|
const iconWrapperStyles = useMemo(() => ({
|
|
76
|
-
height:
|
|
81
|
+
height: theme.lineHeight[lineHeight],
|
|
77
82
|
justifyContent: 'center'
|
|
78
|
-
}), [
|
|
83
|
+
}), [lineHeight, theme.lineHeight]);
|
|
79
84
|
const pressableStyle = useMemo(() => _extends({
|
|
80
85
|
flexDirection: I18nManager.isRTL ? 'row-reverse' : 'row',
|
|
81
86
|
alignItems: 'flex-start',
|
|
@@ -140,15 +145,20 @@ const ControlWithRef = function ControlWithRef(_ref) {
|
|
|
140
145
|
}), typeof label === 'string' ? /*#__PURE__*/_jsx(Text, {
|
|
141
146
|
animated: true,
|
|
142
147
|
disabled: disabled || readOnly,
|
|
143
|
-
font:
|
|
148
|
+
font: font,
|
|
149
|
+
fontFamily: fontFamily,
|
|
150
|
+
fontSize: fontSize,
|
|
151
|
+
fontWeight: fontWeight,
|
|
152
|
+
lineHeight: lineHeight,
|
|
144
153
|
style: getLabelStyle({
|
|
145
154
|
pressed
|
|
146
155
|
}),
|
|
147
156
|
testID: testID + "Label",
|
|
157
|
+
textTransform: textTransform,
|
|
148
158
|
children: label
|
|
149
159
|
}) : label]
|
|
150
160
|
});
|
|
151
|
-
}, [ControlIcon, animatedOpacityValue, animatedScaleValue, background, borderColor, borderRadius, borderWidth, checked, controlColor, controlSize, disabled, dotSize, elevation, getLabelStyle, iconWrapperStyles, indeterminate, label, pressDisabled, readOnly, testID]);
|
|
161
|
+
}, [ControlIcon, animatedOpacityValue, animatedScaleValue, background, borderColor, borderRadius, borderWidth, checked, controlColor, controlSize, disabled, dotSize, elevation, getLabelStyle, iconWrapperStyles, indeterminate, label, font, fontFamily, fontSize, fontWeight, lineHeight, textTransform, theme, pressDisabled, readOnly, testID]);
|
|
152
162
|
return /*#__PURE__*/_jsx(Pressable, _extends({
|
|
153
163
|
ref: ref,
|
|
154
164
|
accessible: accessible
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@coinbase/cds-mobile",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.26.0",
|
|
4
4
|
"description": "Coinbase Design System - Mobile",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -218,7 +218,7 @@
|
|
|
218
218
|
"react-native-worklets": "0.5.2"
|
|
219
219
|
},
|
|
220
220
|
"dependencies": {
|
|
221
|
-
"@coinbase/cds-common": "^9.
|
|
221
|
+
"@coinbase/cds-common": "^9.26.0",
|
|
222
222
|
"@coinbase/cds-icons": "^5.22.0",
|
|
223
223
|
"@coinbase/cds-illustrations": "^4.48.0",
|
|
224
224
|
"@coinbase/cds-lottie-files": "^3.3.4",
|