@fountain-ui/core 1.14.0 → 1.14.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/CHANGELOG.md +8 -0
- package/build/commonjs/ButtonBase/ButtonBase.js +7 -8
- package/build/commonjs/ButtonBase/ButtonBase.js.map +1 -1
- package/build/commonjs/ButtonBase/useDisabledReaction/index.js +23 -0
- package/build/commonjs/ButtonBase/useDisabledReaction/index.js.map +1 -0
- package/build/commonjs/ButtonBase/useDisabledReaction/index.native.js +9 -0
- package/build/commonjs/ButtonBase/useDisabledReaction/index.native.js.map +1 -0
- package/build/module/ButtonBase/ButtonBase.js +4 -9
- package/build/module/ButtonBase/ButtonBase.js.map +1 -1
- package/build/module/ButtonBase/useDisabledReaction/index.js +12 -0
- package/build/module/ButtonBase/useDisabledReaction/index.js.map +1 -0
- package/build/module/ButtonBase/useDisabledReaction/index.native.js +2 -0
- package/build/module/ButtonBase/useDisabledReaction/index.native.js.map +1 -0
- package/build/typescript/ButtonBase/ButtonBase.d.ts +2 -0
- package/build/typescript/ButtonBase/useDisabledReaction/index.d.ts +2 -0
- package/build/typescript/ButtonBase/useDisabledReaction/index.native.d.ts +2 -0
- package/package.json +2 -2
- package/src/ButtonBase/ButtonBase.tsx +4 -12
- package/src/ButtonBase/useDisabledReaction/index.native.ts +4 -0
- package/src/ButtonBase/useDisabledReaction/index.ts +15 -0
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,14 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [1.14.1](https://github.com/tappytoon/tappytoon/compare/@fountain-ui/core@1.11.0...@fountain-ui/core@1.14.1) (2022-01-07)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @fountain-ui/core
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
6
14
|
# [1.14.0](https://github.com/tappytoon/tappytoon/compare/@fountain-ui/core@1.11.0...@fountain-ui/core@1.14.0) (2021-12-27)
|
|
7
15
|
|
|
8
16
|
**Note:** Version bump only for package @fountain-ui/core
|
|
@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = ButtonBase;
|
|
7
|
+
exports.DISABLED_OPACITY = exports.ORIGINAL_OPACITY = void 0;
|
|
7
8
|
|
|
8
9
|
var _react = _interopRequireDefault(require("react"));
|
|
9
10
|
|
|
@@ -15,13 +16,17 @@ var _animated = require("../animated");
|
|
|
15
16
|
|
|
16
17
|
var _styles = require("../styles");
|
|
17
18
|
|
|
19
|
+
var _useDisabledReaction = _interopRequireDefault(require("./useDisabledReaction"));
|
|
20
|
+
|
|
18
21
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
22
|
|
|
20
23
|
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
21
24
|
|
|
22
25
|
const ORIGINAL_OPACITY = 1;
|
|
23
|
-
|
|
26
|
+
exports.ORIGINAL_OPACITY = ORIGINAL_OPACITY;
|
|
24
27
|
const DISABLED_OPACITY = .3;
|
|
28
|
+
exports.DISABLED_OPACITY = DISABLED_OPACITY;
|
|
29
|
+
const ACTIVE_OPACITY = .65;
|
|
25
30
|
const ORIGINAL_SCALE = 1;
|
|
26
31
|
const MINIFIED_SCALE = .96;
|
|
27
32
|
const animationTimingConfig = {
|
|
@@ -64,13 +69,7 @@ function ButtonBase(props) {
|
|
|
64
69
|
}]
|
|
65
70
|
}));
|
|
66
71
|
|
|
67
|
-
|
|
68
|
-
if (result) {
|
|
69
|
-
opacity.value = DISABLED_OPACITY;
|
|
70
|
-
} else {
|
|
71
|
-
opacity.value = ORIGINAL_OPACITY;
|
|
72
|
-
}
|
|
73
|
-
});
|
|
72
|
+
(0, _useDisabledReaction.default)(disabled, opacity);
|
|
74
73
|
|
|
75
74
|
const startAnimation = (pressIn, isHovered = false) => {
|
|
76
75
|
if (pressEffect === 'none') {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["ButtonBase.tsx"],"names":["ORIGINAL_OPACITY","
|
|
1
|
+
{"version":3,"sources":["ButtonBase.tsx"],"names":["ORIGINAL_OPACITY","DISABLED_OPACITY","ACTIVE_OPACITY","ORIGINAL_SCALE","MINIFIED_SCALE","animationTimingConfig","duration","styles","StyleSheet","create","disabled","opacity","transform","scale","ButtonBase","props","children","disableThrottle","onPress","pressEffect","style","throttleMillis","otherProps","handlePress","periodMillis","callback","Animated","useSharedValue","animatedStyle","useAnimatedStyle","value","startAnimation","pressIn","isHovered","withTiming","withDelay","undefined","hovered"],"mappings":"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","sourcesContent":["import React from 'react';\nimport Animated from 'react-native-reanimated';\nimport { useThrottle } from '../hooks';\nimport { AnimatedPressable } from '../animated';\nimport { StyleSheet } from '../styles';\nimport type ButtonBaseProps from './ButtonBaseProps';\nimport useDisabledReaction from './useDisabledReaction';\n\nexport const ORIGINAL_OPACITY = 1;\nexport const DISABLED_OPACITY = .3;\nconst ACTIVE_OPACITY = .65;\n\nconst ORIGINAL_SCALE = 1;\nconst MINIFIED_SCALE = .96;\n\nconst animationTimingConfig: Animated.WithTimingConfig = { duration: 150 };\n\nconst styles = StyleSheet.create({\n disabled: {\n opacity: DISABLED_OPACITY,\n transform: [{ scale: ORIGINAL_SCALE }],\n },\n});\n\nexport default function ButtonBase(props: ButtonBaseProps) {\n const {\n children,\n disabled = false,\n disableThrottle = false,\n onPress,\n pressEffect = 'opacity',\n style,\n throttleMillis = 650,\n ...otherProps\n } = props;\n\n const handlePress = useThrottle({\n periodMillis: disableThrottle ? 0 : throttleMillis,\n callback: onPress,\n });\n\n const opacity = Animated.useSharedValue(ORIGINAL_OPACITY);\n const scale = Animated.useSharedValue(ORIGINAL_SCALE);\n\n const animatedStyle = Animated.useAnimatedStyle(() => ({\n opacity: opacity.value,\n transform: [{ scale: scale.value }],\n }));\n\n useDisabledReaction(disabled, opacity);\n\n const startAnimation = (pressIn: boolean, isHovered: boolean = false) => {\n if (pressEffect === 'none') {\n return;\n }\n\n if (pressEffect === 'opacity') {\n if (pressIn) {\n opacity.value = ACTIVE_OPACITY;\n } else {\n opacity.value = Animated.withTiming(ORIGINAL_OPACITY, animationTimingConfig);\n }\n } else if (!isHovered) {\n if (pressIn) {\n scale.value = Animated.withDelay(\n 100,\n Animated.withTiming(MINIFIED_SCALE, animationTimingConfig),\n );\n } else {\n scale.value = Animated.withTiming(ORIGINAL_SCALE, animationTimingConfig);\n }\n }\n };\n\n return (\n <AnimatedPressable\n disabled={disabled}\n onPress={handlePress}\n onPressIn={() => startAnimation(true)}\n onPressOut={() => startAnimation(false)}\n style={[\n animatedStyle,\n disabled ? styles.disabled : undefined,\n style,\n ]}\n {...otherProps}\n >\n {typeof children !== 'function' ? (\n ({ hovered }) => {\n if (hovered !== undefined && !disabled) {\n startAnimation(hovered, true);\n }\n\n return children;\n }\n ) : children}\n </AnimatedPressable>\n );\n};\n"]}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = useDisabledReaction;
|
|
7
|
+
|
|
8
|
+
var _reactNativeReanimated = _interopRequireDefault(require("react-native-reanimated"));
|
|
9
|
+
|
|
10
|
+
var _ButtonBase = require("../ButtonBase");
|
|
11
|
+
|
|
12
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
|
+
|
|
14
|
+
function useDisabledReaction(disabled, opacity) {
|
|
15
|
+
_reactNativeReanimated.default.useAnimatedReaction(() => disabled, result => {
|
|
16
|
+
if (result) {
|
|
17
|
+
opacity.value = _ButtonBase.DISABLED_OPACITY;
|
|
18
|
+
} else {
|
|
19
|
+
opacity.value = _ButtonBase.ORIGINAL_OPACITY;
|
|
20
|
+
}
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["index.ts"],"names":["useDisabledReaction","disabled","opacity","Animated","useAnimatedReaction","result","value","DISABLED_OPACITY","ORIGINAL_OPACITY"],"mappings":";;;;;;;AAAA;;AACA;;;;AAEe,SAASA,mBAAT,CAA6BC,QAA7B,EAAgDC,OAAhD,EAAuF;AAClGC,iCAASC,mBAAT,CACI,MAAMH,QADV,EAEKI,MAAD,IAAY;AACR,QAAIA,MAAJ,EAAY;AACRH,MAAAA,OAAO,CAACI,KAAR,GAAgBC,4BAAhB;AACH,KAFD,MAEO;AACHL,MAAAA,OAAO,CAACI,KAAR,GAAgBE,4BAAhB;AACH;AACJ,GARL;AAUH","sourcesContent":["import Animated from 'react-native-reanimated';\nimport { DISABLED_OPACITY, ORIGINAL_OPACITY } from '../ButtonBase';\n\nexport default function useDisabledReaction(disabled: boolean, opacity: Animated.SharedValue<number>) {\n Animated.useAnimatedReaction(\n () => disabled,\n (result) => {\n if (result) {\n opacity.value = DISABLED_OPACITY;\n } else {\n opacity.value = ORIGINAL_OPACITY;\n }\n },\n );\n}"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["index.native.ts"],"names":["useDisabledReaction","disabled","opacity"],"mappings":";;;;;;;AAEe,SAASA,mBAAT,CAA6BC,QAA7B,EAAgDC,OAAhD,EAAuF,CACrG","sourcesContent":["import Animated from 'react-native-reanimated';\n\nexport default function useDisabledReaction(disabled: boolean, opacity: Animated.SharedValue<number>) {\n}"]}
|
|
@@ -5,9 +5,10 @@ import Animated from 'react-native-reanimated';
|
|
|
5
5
|
import { useThrottle } from '../hooks';
|
|
6
6
|
import { AnimatedPressable } from '../animated';
|
|
7
7
|
import { StyleSheet } from '../styles';
|
|
8
|
-
|
|
8
|
+
import useDisabledReaction from './useDisabledReaction';
|
|
9
|
+
export const ORIGINAL_OPACITY = 1;
|
|
10
|
+
export const DISABLED_OPACITY = .3;
|
|
9
11
|
const ACTIVE_OPACITY = .65;
|
|
10
|
-
const DISABLED_OPACITY = .3;
|
|
11
12
|
const ORIGINAL_SCALE = 1;
|
|
12
13
|
const MINIFIED_SCALE = .96;
|
|
13
14
|
const animationTimingConfig = {
|
|
@@ -44,13 +45,7 @@ export default function ButtonBase(props) {
|
|
|
44
45
|
scale: scale.value
|
|
45
46
|
}]
|
|
46
47
|
}));
|
|
47
|
-
|
|
48
|
-
if (result) {
|
|
49
|
-
opacity.value = DISABLED_OPACITY;
|
|
50
|
-
} else {
|
|
51
|
-
opacity.value = ORIGINAL_OPACITY;
|
|
52
|
-
}
|
|
53
|
-
});
|
|
48
|
+
useDisabledReaction(disabled, opacity);
|
|
54
49
|
|
|
55
50
|
const startAnimation = (pressIn, isHovered = false) => {
|
|
56
51
|
if (pressEffect === 'none') {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["ButtonBase.tsx"],"names":["React","Animated","useThrottle","AnimatedPressable","StyleSheet","
|
|
1
|
+
{"version":3,"sources":["ButtonBase.tsx"],"names":["React","Animated","useThrottle","AnimatedPressable","StyleSheet","useDisabledReaction","ORIGINAL_OPACITY","DISABLED_OPACITY","ACTIVE_OPACITY","ORIGINAL_SCALE","MINIFIED_SCALE","animationTimingConfig","duration","styles","create","disabled","opacity","transform","scale","ButtonBase","props","children","disableThrottle","onPress","pressEffect","style","throttleMillis","otherProps","handlePress","periodMillis","callback","useSharedValue","animatedStyle","useAnimatedStyle","value","startAnimation","pressIn","isHovered","withTiming","withDelay","undefined","hovered"],"mappings":"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","sourcesContent":["import React from 'react';\nimport Animated from 'react-native-reanimated';\nimport { useThrottle } from '../hooks';\nimport { AnimatedPressable } from '../animated';\nimport { StyleSheet } from '../styles';\nimport type ButtonBaseProps from './ButtonBaseProps';\nimport useDisabledReaction from './useDisabledReaction';\n\nexport const ORIGINAL_OPACITY = 1;\nexport const DISABLED_OPACITY = .3;\nconst ACTIVE_OPACITY = .65;\n\nconst ORIGINAL_SCALE = 1;\nconst MINIFIED_SCALE = .96;\n\nconst animationTimingConfig: Animated.WithTimingConfig = { duration: 150 };\n\nconst styles = StyleSheet.create({\n disabled: {\n opacity: DISABLED_OPACITY,\n transform: [{ scale: ORIGINAL_SCALE }],\n },\n});\n\nexport default function ButtonBase(props: ButtonBaseProps) {\n const {\n children,\n disabled = false,\n disableThrottle = false,\n onPress,\n pressEffect = 'opacity',\n style,\n throttleMillis = 650,\n ...otherProps\n } = props;\n\n const handlePress = useThrottle({\n periodMillis: disableThrottle ? 0 : throttleMillis,\n callback: onPress,\n });\n\n const opacity = Animated.useSharedValue(ORIGINAL_OPACITY);\n const scale = Animated.useSharedValue(ORIGINAL_SCALE);\n\n const animatedStyle = Animated.useAnimatedStyle(() => ({\n opacity: opacity.value,\n transform: [{ scale: scale.value }],\n }));\n\n useDisabledReaction(disabled, opacity);\n\n const startAnimation = (pressIn: boolean, isHovered: boolean = false) => {\n if (pressEffect === 'none') {\n return;\n }\n\n if (pressEffect === 'opacity') {\n if (pressIn) {\n opacity.value = ACTIVE_OPACITY;\n } else {\n opacity.value = Animated.withTiming(ORIGINAL_OPACITY, animationTimingConfig);\n }\n } else if (!isHovered) {\n if (pressIn) {\n scale.value = Animated.withDelay(\n 100,\n Animated.withTiming(MINIFIED_SCALE, animationTimingConfig),\n );\n } else {\n scale.value = Animated.withTiming(ORIGINAL_SCALE, animationTimingConfig);\n }\n }\n };\n\n return (\n <AnimatedPressable\n disabled={disabled}\n onPress={handlePress}\n onPressIn={() => startAnimation(true)}\n onPressOut={() => startAnimation(false)}\n style={[\n animatedStyle,\n disabled ? styles.disabled : undefined,\n style,\n ]}\n {...otherProps}\n >\n {typeof children !== 'function' ? (\n ({ hovered }) => {\n if (hovered !== undefined && !disabled) {\n startAnimation(hovered, true);\n }\n\n return children;\n }\n ) : children}\n </AnimatedPressable>\n );\n};\n"]}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import Animated from 'react-native-reanimated';
|
|
2
|
+
import { DISABLED_OPACITY, ORIGINAL_OPACITY } from '../ButtonBase';
|
|
3
|
+
export default function useDisabledReaction(disabled, opacity) {
|
|
4
|
+
Animated.useAnimatedReaction(() => disabled, result => {
|
|
5
|
+
if (result) {
|
|
6
|
+
opacity.value = DISABLED_OPACITY;
|
|
7
|
+
} else {
|
|
8
|
+
opacity.value = ORIGINAL_OPACITY;
|
|
9
|
+
}
|
|
10
|
+
});
|
|
11
|
+
}
|
|
12
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["index.ts"],"names":["Animated","DISABLED_OPACITY","ORIGINAL_OPACITY","useDisabledReaction","disabled","opacity","useAnimatedReaction","result","value"],"mappings":"AAAA,OAAOA,QAAP,MAAqB,yBAArB;AACA,SAASC,gBAAT,EAA2BC,gBAA3B,QAAmD,eAAnD;AAEA,eAAe,SAASC,mBAAT,CAA6BC,QAA7B,EAAgDC,OAAhD,EAAuF;AAClGL,EAAAA,QAAQ,CAACM,mBAAT,CACI,MAAMF,QADV,EAEKG,MAAD,IAAY;AACR,QAAIA,MAAJ,EAAY;AACRF,MAAAA,OAAO,CAACG,KAAR,GAAgBP,gBAAhB;AACH,KAFD,MAEO;AACHI,MAAAA,OAAO,CAACG,KAAR,GAAgBN,gBAAhB;AACH;AACJ,GARL;AAUH","sourcesContent":["import Animated from 'react-native-reanimated';\nimport { DISABLED_OPACITY, ORIGINAL_OPACITY } from '../ButtonBase';\n\nexport default function useDisabledReaction(disabled: boolean, opacity: Animated.SharedValue<number>) {\n Animated.useAnimatedReaction(\n () => disabled,\n (result) => {\n if (result) {\n opacity.value = DISABLED_OPACITY;\n } else {\n opacity.value = ORIGINAL_OPACITY;\n }\n },\n );\n}"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["index.native.ts"],"names":["useDisabledReaction","disabled","opacity"],"mappings":"AAEA,eAAe,SAASA,mBAAT,CAA6BC,QAA7B,EAAgDC,OAAhD,EAAuF,CACrG","sourcesContent":["import Animated from 'react-native-reanimated';\n\nexport default function useDisabledReaction(disabled: boolean, opacity: Animated.SharedValue<number>) {\n}"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fountain-ui/core",
|
|
3
|
-
"version": "1.14.
|
|
3
|
+
"version": "1.14.1",
|
|
4
4
|
"author": "Fountain-UI Team",
|
|
5
5
|
"description": "React components that implement Tappytoon's Fountain Design.",
|
|
6
6
|
"license": "MIT",
|
|
@@ -67,5 +67,5 @@
|
|
|
67
67
|
"publishConfig": {
|
|
68
68
|
"access": "public"
|
|
69
69
|
},
|
|
70
|
-
"gitHead": "
|
|
70
|
+
"gitHead": "db43f98577b3009518570d7b9b3df42f4fe16a51"
|
|
71
71
|
}
|
|
@@ -4,10 +4,11 @@ import { useThrottle } from '../hooks';
|
|
|
4
4
|
import { AnimatedPressable } from '../animated';
|
|
5
5
|
import { StyleSheet } from '../styles';
|
|
6
6
|
import type ButtonBaseProps from './ButtonBaseProps';
|
|
7
|
+
import useDisabledReaction from './useDisabledReaction';
|
|
7
8
|
|
|
8
|
-
const ORIGINAL_OPACITY = 1;
|
|
9
|
+
export const ORIGINAL_OPACITY = 1;
|
|
10
|
+
export const DISABLED_OPACITY = .3;
|
|
9
11
|
const ACTIVE_OPACITY = .65;
|
|
10
|
-
const DISABLED_OPACITY = .3;
|
|
11
12
|
|
|
12
13
|
const ORIGINAL_SCALE = 1;
|
|
13
14
|
const MINIFIED_SCALE = .96;
|
|
@@ -46,16 +47,7 @@ export default function ButtonBase(props: ButtonBaseProps) {
|
|
|
46
47
|
transform: [{ scale: scale.value }],
|
|
47
48
|
}));
|
|
48
49
|
|
|
49
|
-
|
|
50
|
-
() => disabled,
|
|
51
|
-
(result) => {
|
|
52
|
-
if (result) {
|
|
53
|
-
opacity.value = DISABLED_OPACITY;
|
|
54
|
-
} else {
|
|
55
|
-
opacity.value = ORIGINAL_OPACITY;
|
|
56
|
-
}
|
|
57
|
-
},
|
|
58
|
-
);
|
|
50
|
+
useDisabledReaction(disabled, opacity);
|
|
59
51
|
|
|
60
52
|
const startAnimation = (pressIn: boolean, isHovered: boolean = false) => {
|
|
61
53
|
if (pressEffect === 'none') {
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import Animated from 'react-native-reanimated';
|
|
2
|
+
import { DISABLED_OPACITY, ORIGINAL_OPACITY } from '../ButtonBase';
|
|
3
|
+
|
|
4
|
+
export default function useDisabledReaction(disabled: boolean, opacity: Animated.SharedValue<number>) {
|
|
5
|
+
Animated.useAnimatedReaction(
|
|
6
|
+
() => disabled,
|
|
7
|
+
(result) => {
|
|
8
|
+
if (result) {
|
|
9
|
+
opacity.value = DISABLED_OPACITY;
|
|
10
|
+
} else {
|
|
11
|
+
opacity.value = ORIGINAL_OPACITY;
|
|
12
|
+
}
|
|
13
|
+
},
|
|
14
|
+
);
|
|
15
|
+
}
|