@sendbird/uikit-react-native-foundation 3.12.2 → 3.12.3
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/lib/commonjs/components/PressBox/index.js +10 -2
- package/lib/commonjs/components/PressBox/index.js.map +1 -1
- package/lib/commonjs/ui/Button/index.js +19 -24
- package/lib/commonjs/ui/Button/index.js.map +1 -1
- package/lib/module/components/PressBox/index.js +10 -2
- package/lib/module/components/PressBox/index.js.map +1 -1
- package/lib/module/ui/Button/index.js +18 -24
- package/lib/module/ui/Button/index.js.map +1 -1
- package/package.json +3 -3
- package/src/components/PressBox/index.tsx +12 -3
- package/src/ui/Button/index.tsx +11 -19
|
@@ -17,12 +17,20 @@ const PressBox = props => {
|
|
|
17
17
|
};
|
|
18
18
|
const PressBoxWithPressable = ({
|
|
19
19
|
children,
|
|
20
|
+
style,
|
|
20
21
|
...props
|
|
21
22
|
}) => {
|
|
23
|
+
const [pressed, setPressed] = (0, _react.useState)(false);
|
|
24
|
+
const state = {
|
|
25
|
+
pressed
|
|
26
|
+
};
|
|
22
27
|
return /*#__PURE__*/React.createElement(_reactNative.Pressable, _extends({
|
|
23
28
|
disabled: !props.onPress && !props.onLongPress,
|
|
24
|
-
delayLongPress: DEFAULT_LONG_PRESS_DELAY
|
|
25
|
-
|
|
29
|
+
delayLongPress: DEFAULT_LONG_PRESS_DELAY,
|
|
30
|
+
onPressIn: () => setPressed(true),
|
|
31
|
+
onPressOut: () => setPressed(false),
|
|
32
|
+
style: (0, _uikitUtils.isFunction)(style) ? style(state) : style
|
|
33
|
+
}, props), (0, _uikitUtils.isFunction)(children) ? children(state) : children);
|
|
26
34
|
};
|
|
27
35
|
const PressBoxWithTouchableOpacity = ({
|
|
28
36
|
children,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","React","_reactNative","_uikitUtils","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_extends","assign","bind","arguments","length","apply","DEFAULT_LONG_PRESS_DELAY","exports","PressBox","props","activeOpacity","createElement","PressBoxWithTouchableOpacity","PressBoxWithPressable","children","
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","React","_reactNative","_uikitUtils","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_extends","assign","bind","arguments","length","apply","DEFAULT_LONG_PRESS_DELAY","exports","PressBox","props","activeOpacity","createElement","PressBoxWithTouchableOpacity","PressBoxWithPressable","children","style","pressed","setPressed","useState","state","Pressable","disabled","onPress","onLongPress","delayLongPress","onPressIn","onPressOut","isFunction","TouchableOpacity","_default"],"sources":["index.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useState } from 'react';\nimport type { GestureResponderEvent, StyleProp, ViewProps, ViewStyle } from 'react-native';\nimport { Pressable, TouchableOpacity } from 'react-native';\n\nimport { isFunction } from '@sendbird/uikit-utils';\n\ntype PressBoxStateParams = {\n pressed: boolean;\n};\n\ntype Props = {\n disabled?: boolean;\n onPress?: (event: GestureResponderEvent) => void;\n onLongPress?: (event: GestureResponderEvent) => void;\n delayLongPress?: number;\n activeOpacity?: number;\n style?: StyleProp<ViewStyle> | ((state: PressBoxStateParams) => StyleProp<ViewStyle>);\n hitSlop?: ViewProps['hitSlop'];\n children?: React.ReactNode | ((params: PressBoxStateParams) => React.ReactNode);\n};\n\nexport const DEFAULT_LONG_PRESS_DELAY = 350;\n\nconst PressBox = (props: Props) => {\n if (props.activeOpacity && props.activeOpacity < 1) return <PressBoxWithTouchableOpacity {...props} />;\n return <PressBoxWithPressable {...props} />;\n};\n\nconst PressBoxWithPressable = ({ children, style, ...props }: Props) => {\n const [pressed, setPressed] = useState(false);\n const state: PressBoxStateParams = { pressed };\n return (\n <Pressable\n disabled={!props.onPress && !props.onLongPress}\n delayLongPress={DEFAULT_LONG_PRESS_DELAY}\n onPressIn={() => setPressed(true)}\n onPressOut={() => setPressed(false)}\n style={isFunction(style) ? style(state) : style}\n {...props}\n >\n {isFunction(children) ? children(state) : children}\n </Pressable>\n );\n};\n\nconst PressBoxWithTouchableOpacity = ({ children, style, ...props }: Props) => {\n const [pressed, setPressed] = useState(false);\n const state: PressBoxStateParams = { pressed };\n return (\n <TouchableOpacity\n disabled={!props.onPress && !props.onLongPress}\n delayLongPress={DEFAULT_LONG_PRESS_DELAY}\n style={isFunction(style) ? style(state) : style}\n onPressIn={() => setPressed(true)}\n onPressOut={() => setPressed(false)}\n {...props}\n >\n {isFunction(children) ? children(state) : children}\n </TouchableOpacity>\n );\n};\n\nexport default PressBox;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -4,13 +4,14 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
var _react =
|
|
7
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
8
8
|
var _reactNative = require("react-native");
|
|
9
9
|
var _Icon = _interopRequireDefault(require("../../components/Icon"));
|
|
10
10
|
var _Text = _interopRequireDefault(require("../../components/Text"));
|
|
11
11
|
var _createStyleSheet = _interopRequireDefault(require("../../styles/createStyleSheet"));
|
|
12
12
|
var _useUIKitTheme = _interopRequireDefault(require("../../theme/useUIKitTheme"));
|
|
13
13
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
14
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
14
15
|
const Button = ({
|
|
15
16
|
icon,
|
|
16
17
|
variant = 'contained',
|
|
@@ -24,38 +25,32 @@ const Button = ({
|
|
|
24
25
|
const {
|
|
25
26
|
colors
|
|
26
27
|
} = (0, _useUIKitTheme.default)();
|
|
28
|
+
const [pressed, setPressed] = (0, _react.useState)(false);
|
|
27
29
|
const getStateColor = (pressed, disabled) => {
|
|
28
30
|
const stateColors = colors.ui.button[variant];
|
|
29
31
|
if (disabled) return stateColors.disabled;
|
|
30
32
|
if (pressed) return stateColors.pressed;
|
|
31
33
|
return stateColors.enabled;
|
|
32
34
|
};
|
|
35
|
+
const stateColor = getStateColor(pressed, disabled);
|
|
33
36
|
return /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, {
|
|
34
37
|
disabled: disabled,
|
|
35
38
|
onPress: onPress,
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
})
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
color: contentColor ?? stateColor.content,
|
|
52
|
-
containerStyle: styles.icon
|
|
53
|
-
}), /*#__PURE__*/_react.default.createElement(_Text.default, {
|
|
54
|
-
button: true,
|
|
55
|
-
color: contentColor ?? stateColor.content,
|
|
56
|
-
style: styles.text
|
|
57
|
-
}, children));
|
|
58
|
-
});
|
|
39
|
+
onPressIn: () => setPressed(true),
|
|
40
|
+
onPressOut: () => setPressed(false),
|
|
41
|
+
style: [{
|
|
42
|
+
backgroundColor: buttonColor ?? stateColor.background
|
|
43
|
+
}, styles.container, style]
|
|
44
|
+
}, icon && /*#__PURE__*/_react.default.createElement(_Icon.default, {
|
|
45
|
+
size: 24,
|
|
46
|
+
icon: icon,
|
|
47
|
+
color: contentColor ?? stateColor.content,
|
|
48
|
+
containerStyle: styles.icon
|
|
49
|
+
}), /*#__PURE__*/_react.default.createElement(_Text.default, {
|
|
50
|
+
button: true,
|
|
51
|
+
color: contentColor ?? stateColor.content,
|
|
52
|
+
style: styles.text
|
|
53
|
+
}, children));
|
|
59
54
|
};
|
|
60
55
|
const styles = (0, _createStyleSheet.default)({
|
|
61
56
|
container: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_Icon","_interopRequireDefault","_Text","_createStyleSheet","_useUIKitTheme","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Button","icon","variant","buttonColor","contentColor","disabled","onPress","style","children","colors","useUIKitTheme","pressed","setPressed","useState","getStateColor","stateColors","ui","button","enabled","stateColor","createElement","Pressable","onPressIn","onPressOut","backgroundColor","background","styles","container","size","color","content","containerStyle","text","createStyleSheet","flexDirection","padding","borderRadius","alignItems","justifyContent","marginVertical","marginEnd","_default","exports"],"sources":["index.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { Pressable, StyleProp, ViewStyle } from 'react-native';\n\nimport Icon from '../../components/Icon';\nimport Text from '../../components/Text';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\n\ntype Props = React.PropsWithChildren<{\n style?: StyleProp<ViewStyle>;\n icon?: keyof typeof Icon.Assets;\n variant?: 'contained' | 'text';\n disabled?: boolean;\n onPress?: () => void;\n buttonColor?: string;\n contentColor?: string;\n}>;\nconst Button = ({\n icon,\n variant = 'contained',\n buttonColor,\n contentColor,\n disabled,\n onPress,\n style,\n children,\n}: Props) => {\n const { colors } = useUIKitTheme();\n const [pressed, setPressed] = useState(false);\n\n const getStateColor = (pressed: boolean, disabled?: boolean) => {\n const stateColors = colors.ui.button[variant];\n if (disabled) return stateColors.disabled;\n if (pressed) return stateColors.pressed;\n return stateColors.enabled;\n };\n\n const stateColor = getStateColor(pressed, disabled);\n\n return (\n <Pressable\n disabled={disabled}\n onPress={onPress}\n onPressIn={() => setPressed(true)}\n onPressOut={() => setPressed(false)}\n style={[{ backgroundColor: buttonColor ?? stateColor.background }, styles.container, style]}\n >\n {icon && <Icon size={24} icon={icon} color={contentColor ?? stateColor.content} containerStyle={styles.icon} />}\n <Text button color={contentColor ?? stateColor.content} style={styles.text}>\n {children}\n </Text>\n </Pressable>\n );\n};\n\nconst styles = createStyleSheet({\n container: {\n flexDirection: 'row',\n padding: 8,\n borderRadius: 4,\n alignItems: 'center',\n justifyContent: 'center',\n },\n icon: { marginVertical: -4, marginEnd: 8 },\n text: {},\n});\n\nexport default Button;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -10,12 +10,20 @@ const PressBox = props => {
|
|
|
10
10
|
};
|
|
11
11
|
const PressBoxWithPressable = ({
|
|
12
12
|
children,
|
|
13
|
+
style,
|
|
13
14
|
...props
|
|
14
15
|
}) => {
|
|
16
|
+
const [pressed, setPressed] = useState(false);
|
|
17
|
+
const state = {
|
|
18
|
+
pressed
|
|
19
|
+
};
|
|
15
20
|
return /*#__PURE__*/React.createElement(Pressable, _extends({
|
|
16
21
|
disabled: !props.onPress && !props.onLongPress,
|
|
17
|
-
delayLongPress: DEFAULT_LONG_PRESS_DELAY
|
|
18
|
-
|
|
22
|
+
delayLongPress: DEFAULT_LONG_PRESS_DELAY,
|
|
23
|
+
onPressIn: () => setPressed(true),
|
|
24
|
+
onPressOut: () => setPressed(false),
|
|
25
|
+
style: isFunction(style) ? style(state) : style
|
|
26
|
+
}, props), isFunction(children) ? children(state) : children);
|
|
19
27
|
};
|
|
20
28
|
const PressBoxWithTouchableOpacity = ({
|
|
21
29
|
children,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useState","Pressable","TouchableOpacity","isFunction","DEFAULT_LONG_PRESS_DELAY","PressBox","props","activeOpacity","createElement","PressBoxWithTouchableOpacity","PressBoxWithPressable","children","
|
|
1
|
+
{"version":3,"names":["React","useState","Pressable","TouchableOpacity","isFunction","DEFAULT_LONG_PRESS_DELAY","PressBox","props","activeOpacity","createElement","PressBoxWithTouchableOpacity","PressBoxWithPressable","children","style","pressed","setPressed","state","_extends","disabled","onPress","onLongPress","delayLongPress","onPressIn","onPressOut"],"sources":["index.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useState } from 'react';\nimport type { GestureResponderEvent, StyleProp, ViewProps, ViewStyle } from 'react-native';\nimport { Pressable, TouchableOpacity } from 'react-native';\n\nimport { isFunction } from '@sendbird/uikit-utils';\n\ntype PressBoxStateParams = {\n pressed: boolean;\n};\n\ntype Props = {\n disabled?: boolean;\n onPress?: (event: GestureResponderEvent) => void;\n onLongPress?: (event: GestureResponderEvent) => void;\n delayLongPress?: number;\n activeOpacity?: number;\n style?: StyleProp<ViewStyle> | ((state: PressBoxStateParams) => StyleProp<ViewStyle>);\n hitSlop?: ViewProps['hitSlop'];\n children?: React.ReactNode | ((params: PressBoxStateParams) => React.ReactNode);\n};\n\nexport const DEFAULT_LONG_PRESS_DELAY = 350;\n\nconst PressBox = (props: Props) => {\n if (props.activeOpacity && props.activeOpacity < 1) return <PressBoxWithTouchableOpacity {...props} />;\n return <PressBoxWithPressable {...props} />;\n};\n\nconst PressBoxWithPressable = ({ children, style, ...props }: Props) => {\n const [pressed, setPressed] = useState(false);\n const state: PressBoxStateParams = { pressed };\n return (\n <Pressable\n disabled={!props.onPress && !props.onLongPress}\n delayLongPress={DEFAULT_LONG_PRESS_DELAY}\n onPressIn={() => setPressed(true)}\n onPressOut={() => setPressed(false)}\n style={isFunction(style) ? style(state) : style}\n {...props}\n >\n {isFunction(children) ? children(state) : children}\n </Pressable>\n );\n};\n\nconst PressBoxWithTouchableOpacity = ({ children, style, ...props }: Props) => {\n const [pressed, setPressed] = useState(false);\n const state: PressBoxStateParams = { pressed };\n return (\n <TouchableOpacity\n disabled={!props.onPress && !props.onLongPress}\n delayLongPress={DEFAULT_LONG_PRESS_DELAY}\n style={isFunction(style) ? style(state) : style}\n onPressIn={() => setPressed(true)}\n onPressOut={() => setPressed(false)}\n {...props}\n >\n {isFunction(children) ? children(state) : children}\n </TouchableOpacity>\n );\n};\n\nexport default PressBox;\n"],"mappings":";AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,OAAO;AAEhC,SAASC,SAAS,EAAEC,gBAAgB,QAAQ,cAAc;AAE1D,SAASC,UAAU,QAAQ,uBAAuB;AAiBlD,OAAO,MAAMC,wBAAwB,GAAG,GAAG;AAE3C,MAAMC,QAAQ,GAAIC,KAAY,IAAK;EACjC,IAAIA,KAAK,CAACC,aAAa,IAAID,KAAK,CAACC,aAAa,GAAG,CAAC,EAAE,oBAAOR,KAAA,CAAAS,aAAA,CAACC,4BAA4B,EAAKH,KAAQ,CAAC;EACtG,oBAAOP,KAAA,CAAAS,aAAA,CAACE,qBAAqB,EAAKJ,KAAQ,CAAC;AAC7C,CAAC;AAED,MAAMI,qBAAqB,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,KAAK;EAAE,GAAGN;AAAa,CAAC,KAAK;EACtE,MAAM,CAACO,OAAO,EAAEC,UAAU,CAAC,GAAGd,QAAQ,CAAC,KAAK,CAAC;EAC7C,MAAMe,KAA0B,GAAG;IAAEF;EAAQ,CAAC;EAC9C,oBACEd,KAAA,CAAAS,aAAA,CAACP,SAAS,EAAAe,QAAA;IACRC,QAAQ,EAAE,CAACX,KAAK,CAACY,OAAO,IAAI,CAACZ,KAAK,CAACa,WAAY;IAC/CC,cAAc,EAAEhB,wBAAyB;IACzCiB,SAAS,EAAEA,CAAA,KAAMP,UAAU,CAAC,IAAI,CAAE;IAClCQ,UAAU,EAAEA,CAAA,KAAMR,UAAU,CAAC,KAAK,CAAE;IACpCF,KAAK,EAAET,UAAU,CAACS,KAAK,CAAC,GAAGA,KAAK,CAACG,KAAK,CAAC,GAAGH;EAAM,GAC5CN,KAAK,GAERH,UAAU,CAACQ,QAAQ,CAAC,GAAGA,QAAQ,CAACI,KAAK,CAAC,GAAGJ,QACjC,CAAC;AAEhB,CAAC;AAED,MAAMF,4BAA4B,GAAGA,CAAC;EAAEE,QAAQ;EAAEC,KAAK;EAAE,GAAGN;AAAa,CAAC,KAAK;EAC7E,MAAM,CAACO,OAAO,EAAEC,UAAU,CAAC,GAAGd,QAAQ,CAAC,KAAK,CAAC;EAC7C,MAAMe,KAA0B,GAAG;IAAEF;EAAQ,CAAC;EAC9C,oBACEd,KAAA,CAAAS,aAAA,CAACN,gBAAgB,EAAAc,QAAA;IACfC,QAAQ,EAAE,CAACX,KAAK,CAACY,OAAO,IAAI,CAACZ,KAAK,CAACa,WAAY;IAC/CC,cAAc,EAAEhB,wBAAyB;IACzCQ,KAAK,EAAET,UAAU,CAACS,KAAK,CAAC,GAAGA,KAAK,CAACG,KAAK,CAAC,GAAGH,KAAM;IAChDS,SAAS,EAAEA,CAAA,KAAMP,UAAU,CAAC,IAAI,CAAE;IAClCQ,UAAU,EAAEA,CAAA,KAAMR,UAAU,CAAC,KAAK;EAAE,GAChCR,KAAK,GAERH,UAAU,CAACQ,QAAQ,CAAC,GAAGA,QAAQ,CAACI,KAAK,CAAC,GAAGJ,QAC1B,CAAC;AAEvB,CAAC;AAED,eAAeN,QAAQ","ignoreList":[]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { useState } from 'react';
|
|
2
2
|
import { Pressable } from 'react-native';
|
|
3
3
|
import Icon from '../../components/Icon';
|
|
4
4
|
import Text from '../../components/Text';
|
|
@@ -17,38 +17,32 @@ const Button = ({
|
|
|
17
17
|
const {
|
|
18
18
|
colors
|
|
19
19
|
} = useUIKitTheme();
|
|
20
|
+
const [pressed, setPressed] = useState(false);
|
|
20
21
|
const getStateColor = (pressed, disabled) => {
|
|
21
22
|
const stateColors = colors.ui.button[variant];
|
|
22
23
|
if (disabled) return stateColors.disabled;
|
|
23
24
|
if (pressed) return stateColors.pressed;
|
|
24
25
|
return stateColors.enabled;
|
|
25
26
|
};
|
|
27
|
+
const stateColor = getStateColor(pressed, disabled);
|
|
26
28
|
return /*#__PURE__*/React.createElement(Pressable, {
|
|
27
29
|
disabled: disabled,
|
|
28
30
|
onPress: onPress,
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
})
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
color: contentColor ?? stateColor.content,
|
|
45
|
-
containerStyle: styles.icon
|
|
46
|
-
}), /*#__PURE__*/React.createElement(Text, {
|
|
47
|
-
button: true,
|
|
48
|
-
color: contentColor ?? stateColor.content,
|
|
49
|
-
style: styles.text
|
|
50
|
-
}, children));
|
|
51
|
-
});
|
|
31
|
+
onPressIn: () => setPressed(true),
|
|
32
|
+
onPressOut: () => setPressed(false),
|
|
33
|
+
style: [{
|
|
34
|
+
backgroundColor: buttonColor ?? stateColor.background
|
|
35
|
+
}, styles.container, style]
|
|
36
|
+
}, icon && /*#__PURE__*/React.createElement(Icon, {
|
|
37
|
+
size: 24,
|
|
38
|
+
icon: icon,
|
|
39
|
+
color: contentColor ?? stateColor.content,
|
|
40
|
+
containerStyle: styles.icon
|
|
41
|
+
}), /*#__PURE__*/React.createElement(Text, {
|
|
42
|
+
button: true,
|
|
43
|
+
color: contentColor ?? stateColor.content,
|
|
44
|
+
style: styles.text
|
|
45
|
+
}, children));
|
|
52
46
|
};
|
|
53
47
|
const styles = createStyleSheet({
|
|
54
48
|
container: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","Pressable","Icon","Text","createStyleSheet","useUIKitTheme","Button","icon","variant","buttonColor","contentColor","disabled","onPress","style","children","colors","
|
|
1
|
+
{"version":3,"names":["React","useState","Pressable","Icon","Text","createStyleSheet","useUIKitTheme","Button","icon","variant","buttonColor","contentColor","disabled","onPress","style","children","colors","pressed","setPressed","getStateColor","stateColors","ui","button","enabled","stateColor","createElement","onPressIn","onPressOut","backgroundColor","background","styles","container","size","color","content","containerStyle","text","flexDirection","padding","borderRadius","alignItems","justifyContent","marginVertical","marginEnd"],"sources":["index.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { Pressable, StyleProp, ViewStyle } from 'react-native';\n\nimport Icon from '../../components/Icon';\nimport Text from '../../components/Text';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\n\ntype Props = React.PropsWithChildren<{\n style?: StyleProp<ViewStyle>;\n icon?: keyof typeof Icon.Assets;\n variant?: 'contained' | 'text';\n disabled?: boolean;\n onPress?: () => void;\n buttonColor?: string;\n contentColor?: string;\n}>;\nconst Button = ({\n icon,\n variant = 'contained',\n buttonColor,\n contentColor,\n disabled,\n onPress,\n style,\n children,\n}: Props) => {\n const { colors } = useUIKitTheme();\n const [pressed, setPressed] = useState(false);\n\n const getStateColor = (pressed: boolean, disabled?: boolean) => {\n const stateColors = colors.ui.button[variant];\n if (disabled) return stateColors.disabled;\n if (pressed) return stateColors.pressed;\n return stateColors.enabled;\n };\n\n const stateColor = getStateColor(pressed, disabled);\n\n return (\n <Pressable\n disabled={disabled}\n onPress={onPress}\n onPressIn={() => setPressed(true)}\n onPressOut={() => setPressed(false)}\n style={[{ backgroundColor: buttonColor ?? stateColor.background }, styles.container, style]}\n >\n {icon && <Icon size={24} icon={icon} color={contentColor ?? stateColor.content} containerStyle={styles.icon} />}\n <Text button color={contentColor ?? stateColor.content} style={styles.text}>\n {children}\n </Text>\n </Pressable>\n );\n};\n\nconst styles = createStyleSheet({\n container: {\n flexDirection: 'row',\n padding: 8,\n borderRadius: 4,\n alignItems: 'center',\n justifyContent: 'center',\n },\n icon: { marginVertical: -4, marginEnd: 8 },\n text: {},\n});\n\nexport default Button;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SAASC,SAAS,QAA8B,cAAc;AAE9D,OAAOC,IAAI,MAAM,uBAAuB;AACxC,OAAOC,IAAI,MAAM,uBAAuB;AACxC,OAAOC,gBAAgB,MAAM,+BAA+B;AAC5D,OAAOC,aAAa,MAAM,2BAA2B;AAWrD,MAAMC,MAAM,GAAGA,CAAC;EACdC,IAAI;EACJC,OAAO,GAAG,WAAW;EACrBC,WAAW;EACXC,YAAY;EACZC,QAAQ;EACRC,OAAO;EACPC,KAAK;EACLC;AACK,CAAC,KAAK;EACX,MAAM;IAAEC;EAAO,CAAC,GAAGV,aAAa,CAAC,CAAC;EAClC,MAAM,CAACW,OAAO,EAAEC,UAAU,CAAC,GAAGjB,QAAQ,CAAC,KAAK,CAAC;EAE7C,MAAMkB,aAAa,GAAGA,CAACF,OAAgB,EAAEL,QAAkB,KAAK;IAC9D,MAAMQ,WAAW,GAAGJ,MAAM,CAACK,EAAE,CAACC,MAAM,CAACb,OAAO,CAAC;IAC7C,IAAIG,QAAQ,EAAE,OAAOQ,WAAW,CAACR,QAAQ;IACzC,IAAIK,OAAO,EAAE,OAAOG,WAAW,CAACH,OAAO;IACvC,OAAOG,WAAW,CAACG,OAAO;EAC5B,CAAC;EAED,MAAMC,UAAU,GAAGL,aAAa,CAACF,OAAO,EAAEL,QAAQ,CAAC;EAEnD,oBACEZ,KAAA,CAAAyB,aAAA,CAACvB,SAAS;IACRU,QAAQ,EAAEA,QAAS;IACnBC,OAAO,EAAEA,OAAQ;IACjBa,SAAS,EAAEA,CAAA,KAAMR,UAAU,CAAC,IAAI,CAAE;IAClCS,UAAU,EAAEA,CAAA,KAAMT,UAAU,CAAC,KAAK,CAAE;IACpCJ,KAAK,EAAE,CAAC;MAAEc,eAAe,EAAElB,WAAW,IAAIc,UAAU,CAACK;IAAW,CAAC,EAAEC,MAAM,CAACC,SAAS,EAAEjB,KAAK;EAAE,GAE3FN,IAAI,iBAAIR,KAAA,CAAAyB,aAAA,CAACtB,IAAI;IAAC6B,IAAI,EAAE,EAAG;IAACxB,IAAI,EAAEA,IAAK;IAACyB,KAAK,EAAEtB,YAAY,IAAIa,UAAU,CAACU,OAAQ;IAACC,cAAc,EAAEL,MAAM,CAACtB;EAAK,CAAE,CAAC,eAC/GR,KAAA,CAAAyB,aAAA,CAACrB,IAAI;IAACkB,MAAM;IAACW,KAAK,EAAEtB,YAAY,IAAIa,UAAU,CAACU,OAAQ;IAACpB,KAAK,EAAEgB,MAAM,CAACM;EAAK,GACxErB,QACG,CACG,CAAC;AAEhB,CAAC;AAED,MAAMe,MAAM,GAAGzB,gBAAgB,CAAC;EAC9B0B,SAAS,EAAE;IACTM,aAAa,EAAE,KAAK;IACpBC,OAAO,EAAE,CAAC;IACVC,YAAY,EAAE,CAAC;IACfC,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB,CAAC;EACDjC,IAAI,EAAE;IAAEkC,cAAc,EAAE,CAAC,CAAC;IAAEC,SAAS,EAAE;EAAE,CAAC;EAC1CP,IAAI,EAAE,CAAC;AACT,CAAC,CAAC;AAEF,eAAe7B,MAAM","ignoreList":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sendbird/uikit-react-native-foundation",
|
|
3
|
-
"version": "3.12.
|
|
3
|
+
"version": "3.12.3",
|
|
4
4
|
"description": "A foundational UI kit for building chat-enabled React Native apps.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"sendbird",
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
"access": "public"
|
|
58
58
|
},
|
|
59
59
|
"dependencies": {
|
|
60
|
-
"@sendbird/uikit-utils": "3.12.
|
|
60
|
+
"@sendbird/uikit-utils": "3.12.3"
|
|
61
61
|
},
|
|
62
62
|
"devDependencies": {
|
|
63
63
|
"@types/react": "*",
|
|
@@ -94,5 +94,5 @@
|
|
|
94
94
|
]
|
|
95
95
|
]
|
|
96
96
|
},
|
|
97
|
-
"gitHead": "
|
|
97
|
+
"gitHead": "6c20512fbcfb708b75339474c47558225e8ce262"
|
|
98
98
|
}
|
|
@@ -27,10 +27,19 @@ const PressBox = (props: Props) => {
|
|
|
27
27
|
return <PressBoxWithPressable {...props} />;
|
|
28
28
|
};
|
|
29
29
|
|
|
30
|
-
const PressBoxWithPressable = ({ children, ...props }: Props) => {
|
|
30
|
+
const PressBoxWithPressable = ({ children, style, ...props }: Props) => {
|
|
31
|
+
const [pressed, setPressed] = useState(false);
|
|
32
|
+
const state: PressBoxStateParams = { pressed };
|
|
31
33
|
return (
|
|
32
|
-
<Pressable
|
|
33
|
-
{
|
|
34
|
+
<Pressable
|
|
35
|
+
disabled={!props.onPress && !props.onLongPress}
|
|
36
|
+
delayLongPress={DEFAULT_LONG_PRESS_DELAY}
|
|
37
|
+
onPressIn={() => setPressed(true)}
|
|
38
|
+
onPressOut={() => setPressed(false)}
|
|
39
|
+
style={isFunction(style) ? style(state) : style}
|
|
40
|
+
{...props}
|
|
41
|
+
>
|
|
42
|
+
{isFunction(children) ? children(state) : children}
|
|
34
43
|
</Pressable>
|
|
35
44
|
);
|
|
36
45
|
};
|
package/src/ui/Button/index.tsx
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { useState } from 'react';
|
|
2
2
|
import { Pressable, StyleProp, ViewStyle } from 'react-native';
|
|
3
3
|
|
|
4
4
|
import Icon from '../../components/Icon';
|
|
@@ -26,6 +26,7 @@ const Button = ({
|
|
|
26
26
|
children,
|
|
27
27
|
}: Props) => {
|
|
28
28
|
const { colors } = useUIKitTheme();
|
|
29
|
+
const [pressed, setPressed] = useState(false);
|
|
29
30
|
|
|
30
31
|
const getStateColor = (pressed: boolean, disabled?: boolean) => {
|
|
31
32
|
const stateColors = colors.ui.button[variant];
|
|
@@ -34,29 +35,20 @@ const Button = ({
|
|
|
34
35
|
return stateColors.enabled;
|
|
35
36
|
};
|
|
36
37
|
|
|
38
|
+
const stateColor = getStateColor(pressed, disabled);
|
|
39
|
+
|
|
37
40
|
return (
|
|
38
41
|
<Pressable
|
|
39
42
|
disabled={disabled}
|
|
40
43
|
onPress={onPress}
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
}}
|
|
44
|
+
onPressIn={() => setPressed(true)}
|
|
45
|
+
onPressOut={() => setPressed(false)}
|
|
46
|
+
style={[{ backgroundColor: buttonColor ?? stateColor.background }, styles.container, style]}
|
|
45
47
|
>
|
|
46
|
-
{
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
<>
|
|
51
|
-
{icon && (
|
|
52
|
-
<Icon size={24} icon={icon} color={contentColor ?? stateColor.content} containerStyle={styles.icon} />
|
|
53
|
-
)}
|
|
54
|
-
<Text button color={contentColor ?? stateColor.content} style={styles.text}>
|
|
55
|
-
{children}
|
|
56
|
-
</Text>
|
|
57
|
-
</>
|
|
58
|
-
);
|
|
59
|
-
}}
|
|
48
|
+
{icon && <Icon size={24} icon={icon} color={contentColor ?? stateColor.content} containerStyle={styles.icon} />}
|
|
49
|
+
<Text button color={contentColor ?? stateColor.content} style={styles.text}>
|
|
50
|
+
{children}
|
|
51
|
+
</Text>
|
|
60
52
|
</Pressable>
|
|
61
53
|
);
|
|
62
54
|
};
|