@0610studio/zs-ui 0.13.4 → 0.13.6
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/README.md +7 -0
- package/android/build/intermediates/incremental/debug/packageDebugResources/compile-file-map.properties +1 -1
- package/android/build/kotlin/compileDebugKotlin/cacheable/last-build.bin +0 -0
- package/android/build/kotlin/compileDebugKotlin/local-state/build-history.bin +0 -0
- package/build/index.d.ts +3 -3
- package/build/index.d.ts.map +1 -1
- package/build/index.js +3 -3
- package/build/index.js.map +1 -1
- package/build/ui/ZSBlockButton/index.d.ts +3 -1
- package/build/ui/ZSBlockButton/index.d.ts.map +1 -1
- package/build/ui/ZSBlockButton/index.js +2 -2
- package/build/ui/ZSBlockButton/index.js.map +1 -1
- package/build/ui/ZSPressable/index.d.ts +3 -1
- package/build/ui/ZSPressable/index.d.ts.map +1 -1
- package/build/ui/ZSPressable/index.js +21 -5
- package/build/ui/ZSPressable/index.js.map +1 -1
- package/build/ui/ZSSkeleton/index.d.ts +11 -0
- package/build/ui/ZSSkeleton/index.d.ts.map +1 -0
- package/build/ui/ZSSkeleton/index.js +64 -0
- package/build/ui/ZSSkeleton/index.js.map +1 -0
- package/build/ui/ZSSkeletonBox/index.d.ts +12 -0
- package/build/ui/ZSSkeletonBox/index.d.ts.map +1 -0
- package/build/ui/ZSSkeletonBox/index.js +64 -0
- package/build/ui/ZSSkeletonBox/index.js.map +1 -0
- package/package.json +1 -1
- package/build/ui/ThrottleButton/index.d.ts +0 -15
- package/build/ui/ThrottleButton/index.d.ts.map +0 -1
- package/build/ui/ThrottleButton/index.js +0 -74
- package/build/ui/ThrottleButton/index.js.map +0 -1
- package/build/ui/ZSBottomCta/index.d.ts +0 -8
- package/build/ui/ZSBottomCta/index.d.ts.map +0 -1
- package/build/ui/ZSBottomCta/index.js +0 -21
- package/build/ui/ZSBottomCta/index.js.map +0 -1
package/README.md
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
#
|
|
1
|
+
#Mon Dec 08 14:37:33 KST 2025
|
|
Binary file
|
package/build/index.d.ts
CHANGED
|
@@ -8,11 +8,9 @@ import ErrorComponent from './ui/ZSTextField/ui/ErrorComponent';
|
|
|
8
8
|
import ZSContainer from './ui/ZSContainer';
|
|
9
9
|
import ZSPressable from './ui/ZSPressable';
|
|
10
10
|
import ZSText from './ui/ZSText';
|
|
11
|
-
import ThrottleButton from './ui/ThrottleButton';
|
|
12
11
|
import ZSTextField from './ui/ZSTextField';
|
|
13
12
|
import ZSRadioGroup from './ui/ZSRadioGroup';
|
|
14
13
|
import ZSSwitch from './ui/ZSSwitch';
|
|
15
|
-
import ZSBottomCta from './ui/ZSBottomCta';
|
|
16
14
|
import ZSView from './ui/ZSView';
|
|
17
15
|
import AnimatedWrapper from './ui/atoms/AnimatedWrapper';
|
|
18
16
|
import TextAtom from './ui/atoms/TextAtom';
|
|
@@ -22,7 +20,9 @@ import { ZSTextProps } from "./ui/ZSText";
|
|
|
22
20
|
import { BoxStyle, ZSTextFieldRef } from "./ui/ZSTextField";
|
|
23
21
|
import { AlertOverlay, BottomSheetOverlay, SnackbarNotify, useOverlay, PopOverButton, PopOverMenu, ZSPortal } from './overlay';
|
|
24
22
|
import ZSBlockButton from './ui/ZSBlockButton';
|
|
25
|
-
|
|
23
|
+
import ZSSkeleton from './ui/ZSSkeleton';
|
|
24
|
+
import ZSSkeletonBox from './ui/ZSSkeletonBox';
|
|
25
|
+
export { useTheme, useFoldingState, ThemeProvider, OverlayProvider, themeFactory, ZSView, AnimatedWrapper, TextAtom, ZSContainer, ZSPressable, ZSText, ZSTextField, ZSRadioGroup, ZSSwitch, ErrorComponent, ZSAboveKeyboard, ZSBlockButton, ZSSkeleton, ZSSkeletonBox, AlertOverlay, BottomSheetOverlay, SnackbarNotify, useOverlay, PopOverButton, PopOverMenu, ZSPortal, GlobalOverlay, useStyleSheetCreate, };
|
|
26
26
|
import type { ThemeProviderProps, ThemeProps, Palette } from "./context/ThemeContext";
|
|
27
27
|
import { ColorPalette, ColorPaletteExtend, ThemeTextType, ThemeBackground, MainColors, Theme, TypographyVariants, ThemeFonts, TypoNumber, TypographyVariantsProps, TypoStyle, TypoOptions, TypoSubStyle, TypoColorOptions, ShadowLevel, ShadowStyle } from "./theme/types";
|
|
28
28
|
import { ThemeFactoryColors, ThemeFactoryConfig } from "./theme/palette";
|
package/build/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAA;AACrD,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAA;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAA;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,cAAc,MAAM,oCAAoC,CAAC;AAChE,OAAO,WAAW,MAAM,kBAAkB,CAAC;AAC3C,OAAO,WAAW,MAAM,kBAAkB,CAAC;AAC3C,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
package/build/index.js
CHANGED
|
@@ -8,20 +8,20 @@ import ErrorComponent from './ui/ZSTextField/ui/ErrorComponent';
|
|
|
8
8
|
import ZSContainer from './ui/ZSContainer';
|
|
9
9
|
import ZSPressable from './ui/ZSPressable';
|
|
10
10
|
import ZSText from './ui/ZSText';
|
|
11
|
-
import ThrottleButton from './ui/ThrottleButton';
|
|
12
11
|
import ZSTextField from './ui/ZSTextField';
|
|
13
12
|
import ZSRadioGroup from './ui/ZSRadioGroup';
|
|
14
13
|
import ZSSwitch from './ui/ZSSwitch';
|
|
15
|
-
import ZSBottomCta from './ui/ZSBottomCta';
|
|
16
14
|
import ZSView from './ui/ZSView';
|
|
17
15
|
import AnimatedWrapper from './ui/atoms/AnimatedWrapper';
|
|
18
16
|
import TextAtom from './ui/atoms/TextAtom';
|
|
19
17
|
import ZSAboveKeyboard from "./ui/ZSAboveKeyboard";
|
|
20
18
|
import { AlertOverlay, BottomSheetOverlay, SnackbarNotify, useOverlay, PopOverButton, PopOverMenu, ZSPortal } from './overlay';
|
|
21
19
|
import ZSBlockButton from './ui/ZSBlockButton';
|
|
20
|
+
import ZSSkeleton from './ui/ZSSkeleton';
|
|
21
|
+
import ZSSkeletonBox from './ui/ZSSkeletonBox';
|
|
22
22
|
export { useTheme, useFoldingState, ThemeProvider, OverlayProvider, themeFactory,
|
|
23
23
|
// ---
|
|
24
|
-
|
|
24
|
+
ZSView, AnimatedWrapper, TextAtom, ZSContainer, ZSPressable, ZSText, ZSTextField, ZSRadioGroup, ZSSwitch, ErrorComponent, ZSAboveKeyboard, ZSBlockButton, ZSSkeleton, ZSSkeletonBox,
|
|
25
25
|
// ---
|
|
26
26
|
AlertOverlay, BottomSheetOverlay, SnackbarNotify, useOverlay, PopOverButton, PopOverMenu, ZSPortal,
|
|
27
27
|
// Global overlay functions
|
package/build/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAA;AACrD,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAA;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAA;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,cAAc,MAAM,oCAAoC,CAAC;AAChE,OAAO,WAAW,MAAM,kBAAkB,CAAC;AAC3C,OAAO,WAAW,MAAM,kBAAkB,CAAC;AAC3C,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAA;AACrD,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAA;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAA;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,cAAc,MAAM,oCAAoC,CAAC;AAChE,OAAO,WAAW,MAAM,kBAAkB,CAAC;AAC3C,OAAO,WAAW,MAAM,kBAAkB,CAAC;AAC3C,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,WAAW,MAAM,kBAAkB,CAAC;AAC3C,OAAO,YAAY,MAAM,mBAAmB,CAAC;AAC7C,OAAO,QAAQ,MAAM,eAAe,CAAC;AACrC,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,eAAe,MAAM,4BAA4B,CAAC;AACzD,OAAO,QAAQ,MAAM,qBAAqB,CAAC;AAC3C,OAAO,eAAe,MAAM,sBAAsB,CAAC;AAInD,OAAO,EAAE,YAAY,EAAE,kBAAkB,EAAE,cAAc,EAAE,UAAU,EAAE,aAAa,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAC/H,OAAO,aAAa,MAAM,oBAAoB,CAAC;AAC/C,OAAO,UAAU,MAAM,iBAAiB,CAAC;AACzC,OAAO,aAAa,MAAM,oBAAoB,CAAC;AAE/C,OAAO,EACL,QAAQ,EACR,eAAe,EACf,aAAa,EACb,eAAe,EACf,YAAY;AACZ,MAAM;AACN,MAAM,EACN,eAAe,EACf,QAAQ,EACR,WAAW,EACX,WAAW,EACX,MAAM,EACN,WAAW,EACX,YAAY,EACZ,QAAQ,EACR,cAAc,EACd,eAAe,EACf,aAAa,EACb,UAAU,EACV,aAAa;AACb,MAAM;AACN,YAAY,EACZ,kBAAkB,EAClB,cAAc,EACd,UAAU,EACV,aAAa,EACb,WAAW,EACX,QAAQ;AACR,2BAA2B;AAC3B,aAAa,EACb,mBAAmB,GACpB,CAAC","sourcesContent":["import { GlobalOverlay } from './model/globalOverlay'\nimport { useStyleSheetCreate } from './model/useStyleSheetCreate'\nimport { OverlayProvider } from \"./context/OverlayContext\";\nimport { ThemeProvider, useTheme } from \"./context/ThemeContext\";\nimport { useFoldingState } from './model/useFoldingState'\nimport { themeFactory } from './theme/palette';\nimport ErrorComponent from './ui/ZSTextField/ui/ErrorComponent';\nimport ZSContainer from './ui/ZSContainer';\nimport ZSPressable from './ui/ZSPressable';\nimport ZSText from './ui/ZSText';\nimport ZSTextField from './ui/ZSTextField';\nimport ZSRadioGroup from './ui/ZSRadioGroup';\nimport ZSSwitch from './ui/ZSSwitch';\nimport ZSView from './ui/ZSView';\nimport AnimatedWrapper from './ui/atoms/AnimatedWrapper';\nimport TextAtom from './ui/atoms/TextAtom';\nimport ZSAboveKeyboard from \"./ui/ZSAboveKeyboard\";\nimport { ZSContainerRef } from \"./ui/ZSContainer\";\nimport { ZSTextProps } from \"./ui/ZSText\";\nimport { BoxStyle, ZSTextFieldRef } from \"./ui/ZSTextField\";\nimport { AlertOverlay, BottomSheetOverlay, SnackbarNotify, useOverlay, PopOverButton, PopOverMenu, ZSPortal } from './overlay';\nimport ZSBlockButton from './ui/ZSBlockButton';\nimport ZSSkeleton from './ui/ZSSkeleton';\nimport ZSSkeletonBox from './ui/ZSSkeletonBox';\n\nexport {\n useTheme,\n useFoldingState,\n ThemeProvider,\n OverlayProvider,\n themeFactory,\n // ---\n ZSView,\n AnimatedWrapper,\n TextAtom,\n ZSContainer,\n ZSPressable,\n ZSText,\n ZSTextField,\n ZSRadioGroup,\n ZSSwitch,\n ErrorComponent,\n ZSAboveKeyboard,\n ZSBlockButton,\n ZSSkeleton,\n ZSSkeletonBox,\n // ---\n AlertOverlay,\n BottomSheetOverlay,\n SnackbarNotify,\n useOverlay,\n PopOverButton,\n PopOverMenu,\n ZSPortal,\n // Global overlay functions\n GlobalOverlay,\n useStyleSheetCreate,\n};\n\n// ------------------------------------------------------\n\nimport type { ThemeProviderProps, ThemeProps, Palette } from \"./context/ThemeContext\";\nimport {\n ColorPalette,\n ColorPaletteExtend,\n ThemeTextType,\n ThemeBackground,\n MainColors,\n Theme,\n TypographyVariants,\n ThemeFonts,\n TypoNumber,\n TypographyVariantsProps,\n TypoStyle,\n TypoOptions,\n TypoSubStyle,\n TypoColorOptions,\n ShadowLevel,\n ShadowStyle,\n} from \"./theme/types\";\nimport { ThemeFactoryColors, ThemeFactoryConfig } from \"./theme/palette\";\nimport {\n SnackItem,\n ShowAlertProps,\n ShowSnackBarProps,\n ShowBottomSheetProps,\n PopOverMenuProps,\n CustomSnackbarProps,\n OverlayProviderProps,\n AlertAction,\n AlertActions,\n SnackType,\n HideOption,\n BottomSheetOptions,\n FoldingStateInfo\n} from \"./model/types\";\nimport { RadioOption } from \"./ui/types\";\n\nexport type {\n ThemeProviderProps,\n ThemeProps,\n Palette,\n ZSTextProps,\n BoxStyle,\n ZSTextFieldRef,\n ColorPalette,\n ColorPaletteExtend,\n ThemeTextType,\n ThemeBackground,\n MainColors,\n Theme,\n TypographyVariants,\n ThemeFonts,\n TypoNumber,\n TypographyVariantsProps,\n TypoStyle,\n TypoOptions,\n TypoSubStyle,\n TypoColorOptions,\n ThemeFactoryColors,\n ThemeFactoryConfig,\n SnackItem,\n ShowAlertProps,\n ShowSnackBarProps,\n ShowBottomSheetProps,\n PopOverMenuProps,\n CustomSnackbarProps,\n OverlayProviderProps,\n AlertAction,\n AlertActions,\n SnackType,\n HideOption,\n BottomSheetOptions,\n RadioOption,\n ShadowLevel,\n ShadowStyle,\n ZSContainerRef,\n FoldingStateInfo,\n};\n"]}
|
|
@@ -9,7 +9,9 @@ type Props = {
|
|
|
9
9
|
variant?: 'solid' | 'pastel' | 'stroke';
|
|
10
10
|
typo: TypoOptions;
|
|
11
11
|
prefixIcon?: ImageSourcePropType;
|
|
12
|
+
isLoading?: boolean;
|
|
13
|
+
disabled?: boolean;
|
|
12
14
|
};
|
|
13
|
-
declare function ZSBlockButton({ onPress, style, title, intent, typo, prefixIcon, variant }: Props): import("react").JSX.Element;
|
|
15
|
+
declare function ZSBlockButton({ onPress, style, title, intent, typo, prefixIcon, variant, isLoading, disabled }: Props): import("react").JSX.Element;
|
|
14
16
|
export default ZSBlockButton;
|
|
15
17
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSBlockButton/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAS,KAAK,mBAAmB,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAC/F,OAAO,EAAoB,WAAW,EAAoB,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAMnG,KAAK,KAAK,GAAG;IACX,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,QAAQ,CAAC;IACxC,IAAI,EAAE,WAAW,CAAC;IAClB,UAAU,CAAC,EAAE,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSBlockButton/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAS,KAAK,mBAAmB,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAC/F,OAAO,EAAoB,WAAW,EAAoB,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAMnG,KAAK,KAAK,GAAG;IACX,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,QAAQ,CAAC;IACxC,IAAI,EAAE,WAAW,CAAC;IAClB,UAAU,CAAC,EAAE,mBAAmB,CAAC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,iBAAS,aAAa,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAkB,EAAE,IAAI,EAAE,UAAU,EAAE,OAAiB,EAAE,SAAiB,EAAE,QAAgB,EAAE,EAAE,KAAK,+BA6GpJ;AAED,eAAe,aAAa,CAAC"}
|
|
@@ -3,7 +3,7 @@ import { useTheme } from '../../context/ThemeContext';
|
|
|
3
3
|
import ZSPressable from '../ZSPressable';
|
|
4
4
|
import ZSView from '../ZSView';
|
|
5
5
|
import ZSText from '../ZSText';
|
|
6
|
-
function ZSBlockButton({ onPress, style, title, intent = 'primary', typo, prefixIcon, variant = 'solid' }) {
|
|
6
|
+
function ZSBlockButton({ onPress, style, title, intent = 'primary', typo, prefixIcon, variant = 'solid', isLoading = false, disabled = false }) {
|
|
7
7
|
const { palette } = useTheme();
|
|
8
8
|
const size = typo.split('.')[1];
|
|
9
9
|
const getColors = () => {
|
|
@@ -74,7 +74,7 @@ function ZSBlockButton({ onPress, style, title, intent = 'primary', typo, prefix
|
|
|
74
74
|
return palette.text[c01];
|
|
75
75
|
};
|
|
76
76
|
const textColorValue = getTextColorValue();
|
|
77
|
-
return (<ZSPressable onPress={onPress} style={style}>
|
|
77
|
+
return (<ZSPressable onPress={onPress} style={style} isLoading={isLoading} disabled={disabled}>
|
|
78
78
|
<ZSView style={{
|
|
79
79
|
paddingHorizontal,
|
|
80
80
|
paddingVertical,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSBlockButton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAA4D,MAAM,cAAc,CAAC;AAE/F,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,WAAW,MAAM,gBAAgB,CAAC;AACzC,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,MAAM,MAAM,WAAW,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSBlockButton/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Image, type ImageSourcePropType, type StyleProp, type ViewStyle } from 'react-native';\nimport { TypoColorOptions, TypoOptions, ViewColorOptions, IntentOptions } from '../../theme/types';\nimport { useTheme } from '../../context/ThemeContext';\nimport ZSPressable from '../ZSPressable';\nimport ZSView from '../ZSView';\nimport ZSText from '../ZSText';\n\ntype Props = {\n onPress: () => void;\n style?: StyleProp<ViewStyle>;\n title: string;\n intent?: IntentOptions;\n variant?: 'solid' | 'pastel' | 'stroke';\n typo: TypoOptions;\n prefixIcon?: ImageSourcePropType;\n isLoading?: boolean;\n disabled?: boolean;\n};\n\nfunction ZSBlockButton({ onPress, style, title, intent = 'primary', typo, prefixIcon, variant = 'solid', isLoading = false, disabled = false }: Props) {\n const { palette } = useTheme();\n const size = typo.split('.')[1];\n\n const getColors = (): {\n backgroundColor: ViewColorOptions | 'transparent';\n textColor: TypoColorOptions;\n borderColor?: string;\n borderWidth: number;\n } => {\n const baseColor = intent === 'danger' ? 'danger'\n : intent === 'primary' ? 'primary'\n : intent === 'information' ? 'information'\n : intent === 'success' ? 'success'\n : intent === 'warning' ? 'warning'\n : 'grey';\n\n if (variant === 'solid') {\n return {\n backgroundColor: `${baseColor}.50` as ViewColorOptions,\n textColor: 'white' as TypoColorOptions,\n borderColor: undefined,\n borderWidth: 0,\n };\n } else if (variant === 'pastel') {\n return {\n backgroundColor: `${baseColor}.10` as ViewColorOptions,\n textColor: (intent === 'danger' ? 'danger.60'\n : intent === 'primary' ? 'primary.60'\n : intent === 'information' ? 'information.60'\n : intent === 'success' ? 'success.60'\n : intent === 'warning' ? 'warning.60'\n : 'grey.70') as TypoColorOptions,\n borderColor: undefined,\n borderWidth: 0,\n };\n } else { // stroke\n return {\n backgroundColor: 'transparent',\n textColor: (intent === 'danger' ? 'danger.50'\n : intent === 'primary' ? 'primary.50'\n : intent === 'information' ? 'information.50'\n : intent === 'success' ? 'success.50'\n : intent === 'warning' ? 'warning.60'\n : 'grey.60') as TypoColorOptions,\n borderColor: intent === 'danger' ? palette.danger[50]\n : intent === 'primary' ? palette.primary[50]\n : intent === 'information' ? palette.information[50]\n : intent === 'success' ? palette.success[50]\n : intent === 'warning' ? palette.warning[50]\n : palette.grey[50],\n borderWidth: 1,\n };\n }\n };\n\n const colors = getColors();\n\n const paddingHorizontal = size === '1' ? 11\n : size === '2' ? 11\n : size === '3' ? 10\n : size === '4' ? 8\n : size === '5' ? 7\n : 10;\n const paddingVertical = size === '1' ? 9\n : size === '2' ? 9\n : size === '3' ? 8\n : size === '4' ? 6\n : size === '5' ? 5\n : 8;\n\n const getTextColorValue = () => {\n const [c01, c02] = colors.textColor.split('.');\n if (c02) {\n return palette[c01][c02];\n }\n return palette.text[c01];\n };\n\n const textColorValue = getTextColorValue();\n\n return (\n <ZSPressable onPress={onPress} style={style} isLoading={isLoading} disabled={disabled}>\n <ZSView\n style={{\n paddingHorizontal,\n paddingVertical,\n borderRadius: 6,\n justifyContent: 'center',\n alignItems: 'center',\n flexDirection: 'row',\n gap: 4,\n backgroundColor: colors.backgroundColor === 'transparent' ? 'transparent' : undefined,\n borderColor: colors.borderColor,\n borderWidth: colors.borderWidth,\n }}\n color={colors.backgroundColor !== 'transparent' ? colors.backgroundColor : undefined}\n >\n {prefixIcon && (\n <Image\n style={{ width: 12, height: 12, marginTop: 1 }}\n tintColor={textColorValue}\n source={prefixIcon}\n />\n )}\n <ZSText color={colors.textColor} typo={typo}>{title}</ZSText>\n </ZSView>\n </ZSPressable>\n );\n}\n\nexport default ZSBlockButton;\n"]}
|
|
@@ -10,8 +10,10 @@ interface ZSPressableProps extends ViewProps {
|
|
|
10
10
|
elevationLevel?: ShadowLevel;
|
|
11
11
|
fullWidth?: boolean;
|
|
12
12
|
color?: ViewColorOptions;
|
|
13
|
+
isLoading?: boolean;
|
|
14
|
+
disabled?: boolean;
|
|
13
15
|
}
|
|
14
|
-
declare function ZSPressable({ onPress, onLongPress, isAnimation, pressedBackgroundColor, pressedBackgroundBorderRadius, elevationLevel, fullWidth, color, ...props }: ZSPressableProps): React.JSX.Element;
|
|
16
|
+
declare function ZSPressable({ onPress, onLongPress, isAnimation, pressedBackgroundColor, pressedBackgroundBorderRadius, elevationLevel, fullWidth, color, isLoading, disabled, ...props }: ZSPressableProps): React.JSX.Element;
|
|
15
17
|
declare const _default: React.MemoExoticComponent<typeof ZSPressable>;
|
|
16
18
|
export default _default;
|
|
17
19
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSPressable/index.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSPressable/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AACtC,OAAO,EAAmB,SAAS,EAAE,MAAM,cAAc,CAAC;AAG1D,OAAO,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAMvE,UAAU,gBAAiB,SAAQ,SAAS;IAC1C,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IAChC,WAAW,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IACpC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,6BAA6B,CAAC,EAAE,MAAM,CAAC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,WAAW,CAAC;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,iBAAS,WAAW,CAAC,EACnB,OAAO,EACP,WAAW,EACX,WAAkB,EAClB,sBAAmD,EACnD,6BAAkC,EAClC,cAAc,EACd,SAAiB,EACjB,KAAK,EACL,SAAiB,EACjB,QAAgB,EAChB,GAAG,KAAK,EACT,EAAE,gBAAgB,qBA8ElB;;AAED,wBAAuC"}
|
|
@@ -1,11 +1,28 @@
|
|
|
1
|
-
import React from "react";
|
|
1
|
+
import React, { useRef } from "react";
|
|
2
2
|
import { Pressable, View } from "react-native";
|
|
3
3
|
import Animated, { interpolate, useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
|
|
4
4
|
import AnimatedWrapper from "../atoms/AnimatedWrapper";
|
|
5
5
|
const DEFAULT_DURATION = { duration: 100 };
|
|
6
6
|
const SCALE_VALUES = [1, 0.96];
|
|
7
|
-
|
|
7
|
+
const DEBOUNCE_TIME = 300;
|
|
8
|
+
function ZSPressable({ onPress, onLongPress, isAnimation = true, pressedBackgroundColor = 'rgba(180, 180, 180, 0.1)', pressedBackgroundBorderRadius = 16, elevationLevel, fullWidth = false, color, isLoading = false, disabled = false, ...props }) {
|
|
8
9
|
const isButtonPress = useSharedValue(0);
|
|
10
|
+
const lastClickTime = useRef(0);
|
|
11
|
+
// ------------------------------------------------------------
|
|
12
|
+
const createPressHandler = (callback) => {
|
|
13
|
+
return () => {
|
|
14
|
+
const now = Date.now();
|
|
15
|
+
if (now - lastClickTime.current < DEBOUNCE_TIME)
|
|
16
|
+
return;
|
|
17
|
+
if (isLoading || disabled)
|
|
18
|
+
return;
|
|
19
|
+
lastClickTime.current = now;
|
|
20
|
+
callback?.();
|
|
21
|
+
};
|
|
22
|
+
};
|
|
23
|
+
const handlePress = createPressHandler(onPress);
|
|
24
|
+
const handleLongPress = createPressHandler(onLongPress);
|
|
25
|
+
// ------------------------------------------------------------
|
|
9
26
|
const boxAnimation = useAnimatedStyle(() => {
|
|
10
27
|
'worklet';
|
|
11
28
|
const scale = interpolate(isButtonPress.value, [0, 1], SCALE_VALUES, 'clamp');
|
|
@@ -30,9 +47,8 @@ function ZSPressable({ onPress, onLongPress, isAnimation = true, pressedBackgrou
|
|
|
30
47
|
borderRadius: pressedBackgroundBorderRadius,
|
|
31
48
|
};
|
|
32
49
|
};
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
<Pressable onPress={onPress} onLongPress={onLongPress} onPressIn={handlePressIn} onPressOut={handlePressOut} style={({ pressed }) => handlePressStyle(pressed)}>
|
|
50
|
+
return (<View style={[fullWidth ? { width: '100%' } : undefined, { opacity: (isLoading || disabled) ? 0.55 : 1 }]}>
|
|
51
|
+
<Pressable onPress={handlePress} onLongPress={handleLongPress} onPressIn={handlePressIn} onPressOut={handlePressOut} disabled={isLoading || disabled} style={({ pressed }) => handlePressStyle(pressed)}>
|
|
36
52
|
<Animated.View style={boxAnimation}>
|
|
37
53
|
<AnimatedWrapper color={color} isAnimation={isAnimation} elevationLevel={elevationLevel} style={props.style}>
|
|
38
54
|
{props.children}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSPressable/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSPressable/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useRef } from \"react\";\nimport { Pressable, View, ViewProps } from \"react-native\";\nimport Animated, { interpolate, useAnimatedStyle, useSharedValue, withTiming } from \"react-native-reanimated\";\nimport AnimatedWrapper from \"../atoms/AnimatedWrapper\";\nimport type { ShadowLevel, ViewColorOptions } from \"../../theme/types\";\n\nconst DEFAULT_DURATION = { duration: 100 } as const;\nconst SCALE_VALUES = [1, 0.96] as const;\nconst DEBOUNCE_TIME = 300;\n\ninterface ZSPressableProps extends ViewProps {\n onPress?: (value?: any) => void;\n onLongPress?: (value?: any) => void;\n pressedBackgroundColor?: string;\n pressedBackgroundBorderRadius?: number;\n isAnimation?: boolean;\n elevationLevel?: ShadowLevel;\n fullWidth?: boolean;\n color?: ViewColorOptions;\n isLoading?: boolean;\n disabled?: boolean;\n}\n\nfunction ZSPressable({\n onPress,\n onLongPress,\n isAnimation = true,\n pressedBackgroundColor = 'rgba(180, 180, 180, 0.1)',\n pressedBackgroundBorderRadius = 16,\n elevationLevel,\n fullWidth = false,\n color,\n isLoading = false,\n disabled = false,\n ...props\n}: ZSPressableProps) {\n const isButtonPress = useSharedValue(0);\n const lastClickTime = useRef<number>(0);\n\n // ------------------------------------------------------------\n\n const createPressHandler = (callback?: () => void) => {\n return () => {\n const now = Date.now();\n if (now - lastClickTime.current < DEBOUNCE_TIME) return;\n if (isLoading || disabled) return;\n lastClickTime.current = now;\n\n callback?.();\n };\n };\n\n const handlePress = createPressHandler(onPress);\n const handleLongPress = createPressHandler(onLongPress);\n\n // ------------------------------------------------------------\n\n const boxAnimation = useAnimatedStyle(() => {\n 'worklet';\n const scale = interpolate(\n isButtonPress.value,\n [0, 1],\n SCALE_VALUES,\n 'clamp'\n );\n return {\n transform: [{ scale }],\n };\n }, []);\n\n const handlePressIn = () => {\n isButtonPress.value = withTiming(1, DEFAULT_DURATION);\n };\n\n const handlePressOut = () => {\n isButtonPress.value = withTiming(0, DEFAULT_DURATION);\n };\n\n const handlePressStyle = (pressed: boolean) => {\n return pressed\n ? {\n backgroundColor: pressedBackgroundColor,\n borderRadius: pressedBackgroundBorderRadius,\n }\n : {\n backgroundColor: 'transparent',\n borderRadius: pressedBackgroundBorderRadius,\n };\n };\n\n return (\n <View style={[fullWidth ? { width: '100%' as const } : undefined, { opacity: (isLoading || disabled) ? 0.55 : 1 }]}>\n <Pressable\n onPress={handlePress}\n onLongPress={handleLongPress}\n onPressIn={handlePressIn}\n onPressOut={handlePressOut}\n disabled={isLoading || disabled}\n style={({ pressed }) => handlePressStyle(pressed)}\n >\n <Animated.View style={boxAnimation}>\n <AnimatedWrapper\n color={color}\n isAnimation={isAnimation}\n elevationLevel={elevationLevel}\n style={props.style}\n >\n {props.children}\n </AnimatedWrapper>\n </Animated.View>\n </Pressable>\n </View>\n );\n}\n\nexport default React.memo(ZSPressable);\n"]}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { type StyleProp, type ViewStyle } from "react-native";
|
|
3
|
+
interface ZSSkeletonProps {
|
|
4
|
+
isFetching?: boolean;
|
|
5
|
+
style?: StyleProp<ViewStyle>;
|
|
6
|
+
children?: React.ReactNode;
|
|
7
|
+
overlayColor?: string;
|
|
8
|
+
}
|
|
9
|
+
declare function ZSSkeleton({ isFetching, style, children, overlayColor }: ZSSkeletonProps): string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined;
|
|
10
|
+
export default ZSSkeleton;
|
|
11
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSSkeleton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAAc,KAAK,SAAS,EAAoB,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAM5F,UAAU,eAAe;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,iBAAS,UAAU,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,EAAE,eAAe,gGAwCjF;AAED,eAAe,UAAU,CAAC"}
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import React, { useEffect } from "react";
|
|
2
|
+
import { Dimensions, StyleSheet, View } from "react-native";
|
|
3
|
+
import Animated, { useSharedValue, useAnimatedStyle, withRepeat, withTiming, cancelAnimation } from "react-native-reanimated";
|
|
4
|
+
import { useTheme } from "../../context/ThemeContext";
|
|
5
|
+
const DEVICE_WIDTH = Dimensions.get("window").width;
|
|
6
|
+
function ZSSkeleton({ isFetching, style, children, overlayColor }) {
|
|
7
|
+
const translateX = useSharedValue(-DEVICE_WIDTH * 1.2);
|
|
8
|
+
const { palette } = useTheme();
|
|
9
|
+
const effectColor = overlayColor || palette.background.base;
|
|
10
|
+
useEffect(() => {
|
|
11
|
+
if (isFetching) {
|
|
12
|
+
translateX.value = withRepeat(withTiming(DEVICE_WIDTH * 1.2, { duration: 800 }), -1, false);
|
|
13
|
+
}
|
|
14
|
+
else {
|
|
15
|
+
cancelAnimation(translateX);
|
|
16
|
+
translateX.value = -DEVICE_WIDTH * 1.2;
|
|
17
|
+
}
|
|
18
|
+
return () => {
|
|
19
|
+
cancelAnimation(translateX);
|
|
20
|
+
};
|
|
21
|
+
}, [isFetching]);
|
|
22
|
+
const animatedStyle = useAnimatedStyle(() => {
|
|
23
|
+
"worklet";
|
|
24
|
+
return {
|
|
25
|
+
transform: [{ translateX: translateX.value }],
|
|
26
|
+
};
|
|
27
|
+
});
|
|
28
|
+
return isFetching ? (<View style={[style, { overflow: "hidden" }]}>
|
|
29
|
+
<View style={styles.container}>
|
|
30
|
+
{children}
|
|
31
|
+
|
|
32
|
+
<Animated.View style={[styles.shimmer, animatedStyle]}>
|
|
33
|
+
<View style={[styles.shimmerSub, { backgroundColor: effectColor }]}/>
|
|
34
|
+
<View style={[styles.shimmerCenter, { backgroundColor: effectColor }]}/>
|
|
35
|
+
<View style={[styles.shimmerSub, { backgroundColor: effectColor }]}/>
|
|
36
|
+
</Animated.View>
|
|
37
|
+
</View>
|
|
38
|
+
</View>) : (children);
|
|
39
|
+
}
|
|
40
|
+
export default ZSSkeleton;
|
|
41
|
+
const styles = StyleSheet.create({
|
|
42
|
+
container: {
|
|
43
|
+
overflow: "hidden",
|
|
44
|
+
opacity: 0.6,
|
|
45
|
+
width: "100%",
|
|
46
|
+
},
|
|
47
|
+
shimmer: {
|
|
48
|
+
width: "100%",
|
|
49
|
+
height: "100%",
|
|
50
|
+
position: "absolute",
|
|
51
|
+
flexDirection: "row",
|
|
52
|
+
},
|
|
53
|
+
shimmerSub: {
|
|
54
|
+
height: "100%",
|
|
55
|
+
opacity: 0.3,
|
|
56
|
+
width: DEVICE_WIDTH * 0.3,
|
|
57
|
+
},
|
|
58
|
+
shimmerCenter: {
|
|
59
|
+
height: "100%",
|
|
60
|
+
opacity: 0.6,
|
|
61
|
+
width: DEVICE_WIDTH * 0.4,
|
|
62
|
+
},
|
|
63
|
+
});
|
|
64
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSSkeleton/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useEffect } from \"react\";\nimport { Dimensions, type StyleProp, StyleSheet, View, type ViewStyle } from \"react-native\";\nimport Animated, { useSharedValue, useAnimatedStyle, withRepeat, withTiming, cancelAnimation } from \"react-native-reanimated\";\nimport { useTheme } from \"../../context/ThemeContext\";\n\nconst DEVICE_WIDTH = Dimensions.get(\"window\").width;\n\ninterface ZSSkeletonProps {\n isFetching?: boolean;\n style?: StyleProp<ViewStyle>;\n children?: React.ReactNode;\n overlayColor?: string;\n}\n\nfunction ZSSkeleton({ isFetching, style, children, overlayColor }: ZSSkeletonProps) {\n const translateX = useSharedValue(-DEVICE_WIDTH * 1.2);\n const { palette } = useTheme();\n const effectColor = overlayColor || palette.background.base;\n\n useEffect(() => {\n if (isFetching) {\n translateX.value = withRepeat(withTiming(DEVICE_WIDTH * 1.2, { duration: 800 }), -1, false);\n } else {\n cancelAnimation(translateX);\n translateX.value = -DEVICE_WIDTH * 1.2;\n }\n\n return () => {\n cancelAnimation(translateX);\n };\n }, [isFetching]);\n\n const animatedStyle = useAnimatedStyle(() => {\n \"worklet\";\n return {\n transform: [{ translateX: translateX.value }],\n };\n });\n\n return isFetching ? (\n <View style={[style, { overflow: \"hidden\" }]}>\n <View style={styles.container}>\n {children}\n\n <Animated.View style={[styles.shimmer, animatedStyle]}>\n <View style={[styles.shimmerSub, { backgroundColor: effectColor }]} />\n <View style={[styles.shimmerCenter, { backgroundColor: effectColor }]} />\n <View style={[styles.shimmerSub, { backgroundColor: effectColor }]} />\n </Animated.View>\n </View>\n </View>\n ) : (\n children\n );\n}\n\nexport default ZSSkeleton;\n\nconst styles = StyleSheet.create({\n container: {\n overflow: \"hidden\",\n opacity: 0.6,\n width: \"100%\",\n },\n shimmer: {\n width: \"100%\",\n height: \"100%\",\n position: \"absolute\",\n flexDirection: \"row\",\n },\n shimmerSub: {\n height: \"100%\",\n opacity: 0.3,\n width: DEVICE_WIDTH * 0.3,\n },\n shimmerCenter: {\n height: \"100%\",\n opacity: 0.6,\n width: DEVICE_WIDTH * 0.4,\n },\n});\n"]}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { type StyleProp, type ViewStyle } from "react-native";
|
|
3
|
+
import { ViewColorOptions } from "../../theme/types";
|
|
4
|
+
interface ZSSkeletonBoxProps {
|
|
5
|
+
height: number;
|
|
6
|
+
style?: StyleProp<ViewStyle>;
|
|
7
|
+
overlayColor?: string;
|
|
8
|
+
color?: ViewColorOptions;
|
|
9
|
+
}
|
|
10
|
+
declare function ZSSkeletonBox({ height, style, overlayColor, color }: ZSSkeletonBoxProps): React.JSX.Element;
|
|
11
|
+
export default ZSSkeletonBox;
|
|
12
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSSkeletonBox/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAAc,KAAK,SAAS,EAAoB,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAI5F,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAIrD,UAAU,kBAAkB;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,gBAAgB,CAAC;CAC5B;AAED,iBAAS,aAAa,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,YAAY,EAAE,KAAiB,EAAE,EAAE,kBAAkB,qBAwC5F;AAED,eAAe,aAAa,CAAC"}
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import React, { useEffect } from "react";
|
|
2
|
+
import { Dimensions, StyleSheet, View } from "react-native";
|
|
3
|
+
import Animated, { useSharedValue, useAnimatedStyle, withRepeat, withTiming, cancelAnimation } from "react-native-reanimated";
|
|
4
|
+
import { useTheme } from "../../context/ThemeContext";
|
|
5
|
+
import ZSView from "../ZSView";
|
|
6
|
+
const DEVICE_WIDTH = Dimensions.get("window").width;
|
|
7
|
+
function ZSSkeletonBox({ height, style, overlayColor, color = 'neutral' }) {
|
|
8
|
+
const translateX = useSharedValue(-DEVICE_WIDTH * 1.2);
|
|
9
|
+
const { palette } = useTheme();
|
|
10
|
+
const effectColor = overlayColor || palette.background.layer1;
|
|
11
|
+
useEffect(() => {
|
|
12
|
+
translateX.value = withRepeat(withTiming(DEVICE_WIDTH * 1.2, { duration: 800 }), -1, false);
|
|
13
|
+
return () => {
|
|
14
|
+
cancelAnimation(translateX);
|
|
15
|
+
};
|
|
16
|
+
}, []);
|
|
17
|
+
const animatedStyle = useAnimatedStyle(() => {
|
|
18
|
+
"worklet";
|
|
19
|
+
return {
|
|
20
|
+
transform: [{ translateX: translateX.value }],
|
|
21
|
+
};
|
|
22
|
+
});
|
|
23
|
+
return (<View style={[{ width: '100%' }, style, { height, overflow: "hidden" }]}>
|
|
24
|
+
<ZSView style={[
|
|
25
|
+
styles.container,
|
|
26
|
+
{
|
|
27
|
+
width: DEVICE_WIDTH,
|
|
28
|
+
height,
|
|
29
|
+
},
|
|
30
|
+
]} color={color}>
|
|
31
|
+
<Animated.View style={[styles.shimmer, animatedStyle]}>
|
|
32
|
+
<View style={[styles.shimmerSub, { backgroundColor: effectColor }]}/>
|
|
33
|
+
<View style={[styles.shimmerCenter, { backgroundColor: effectColor }]}/>
|
|
34
|
+
<View style={[styles.shimmerSub, { backgroundColor: effectColor }]}/>
|
|
35
|
+
</Animated.View>
|
|
36
|
+
</ZSView>
|
|
37
|
+
</View>);
|
|
38
|
+
}
|
|
39
|
+
export default ZSSkeletonBox;
|
|
40
|
+
const styles = StyleSheet.create({
|
|
41
|
+
container: {
|
|
42
|
+
overflow: "hidden",
|
|
43
|
+
opacity: 0.4,
|
|
44
|
+
},
|
|
45
|
+
shimmer: {
|
|
46
|
+
width: "100%",
|
|
47
|
+
height: "100%",
|
|
48
|
+
position: "absolute",
|
|
49
|
+
flexDirection: "row",
|
|
50
|
+
},
|
|
51
|
+
shimmerSub: {
|
|
52
|
+
height: "100%",
|
|
53
|
+
backgroundColor: "#ebebeb",
|
|
54
|
+
opacity: 0.3,
|
|
55
|
+
width: DEVICE_WIDTH * 0.3,
|
|
56
|
+
},
|
|
57
|
+
shimmerCenter: {
|
|
58
|
+
height: "100%",
|
|
59
|
+
backgroundColor: "#f5f5f5",
|
|
60
|
+
opacity: 0.7,
|
|
61
|
+
width: DEVICE_WIDTH * 0.4,
|
|
62
|
+
},
|
|
63
|
+
});
|
|
64
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSSkeletonBox/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useEffect } from \"react\";\nimport { Dimensions, type StyleProp, StyleSheet, View, type ViewStyle } from \"react-native\";\nimport Animated, { useSharedValue, useAnimatedStyle, withRepeat, withTiming, cancelAnimation } from \"react-native-reanimated\";\nimport { useTheme } from \"../../context/ThemeContext\";\nimport ZSView from \"../ZSView\";\nimport { ViewColorOptions } from \"../../theme/types\";\n\nconst DEVICE_WIDTH = Dimensions.get(\"window\").width;\n\ninterface ZSSkeletonBoxProps {\n height: number;\n style?: StyleProp<ViewStyle>;\n overlayColor?: string;\n color?: ViewColorOptions;\n}\n\nfunction ZSSkeletonBox({ height, style, overlayColor, color = 'neutral' }: ZSSkeletonBoxProps) {\n const translateX = useSharedValue(-DEVICE_WIDTH * 1.2);\n const { palette } = useTheme();\n const effectColor = overlayColor || palette.background.layer1;\n\n useEffect(() => {\n translateX.value = withRepeat(withTiming(DEVICE_WIDTH * 1.2, { duration: 800 }), -1, false);\n\n return () => {\n cancelAnimation(translateX);\n };\n }, []);\n\n const animatedStyle = useAnimatedStyle(() => {\n \"worklet\";\n return {\n transform: [{ translateX: translateX.value }],\n };\n });\n\n return (\n <View style={[{ width: '100%' }, style, { height, overflow: \"hidden\" }]}>\n <ZSView\n style={[\n styles.container,\n {\n width: DEVICE_WIDTH,\n height,\n },\n ]}\n color={color}\n >\n <Animated.View style={[styles.shimmer, animatedStyle]}>\n <View style={[styles.shimmerSub, { backgroundColor: effectColor }]} />\n <View style={[styles.shimmerCenter, { backgroundColor: effectColor }]} />\n <View style={[styles.shimmerSub, { backgroundColor: effectColor }]} />\n </Animated.View>\n </ZSView>\n </View>\n );\n}\n\nexport default ZSSkeletonBox;\n\nconst styles = StyleSheet.create({\n container: {\n overflow: \"hidden\",\n opacity: 0.4,\n },\n shimmer: {\n width: \"100%\",\n height: \"100%\",\n position: \"absolute\",\n flexDirection: \"row\",\n },\n shimmerSub: {\n height: \"100%\",\n backgroundColor: \"#ebebeb\",\n opacity: 0.3,\n width: DEVICE_WIDTH * 0.3,\n },\n shimmerCenter: {\n height: \"100%\",\n backgroundColor: \"#f5f5f5\",\n opacity: 0.7,\n width: DEVICE_WIDTH * 0.4,\n },\n});\n"]}
|
package/package.json
CHANGED
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { TouchableOpacityProps } from 'react-native';
|
|
3
|
-
interface ThrottleButtonProps extends TouchableOpacityProps {
|
|
4
|
-
loadingComponent?: React.ReactNode;
|
|
5
|
-
disabled?: boolean;
|
|
6
|
-
primaryOnPress: () => Promise<void>;
|
|
7
|
-
primaryLabelComponent: React.ReactNode;
|
|
8
|
-
primaryButtonStyle?: TouchableOpacityProps['style'];
|
|
9
|
-
marginHorizontal?: number;
|
|
10
|
-
marginBottom?: number;
|
|
11
|
-
onError?: (error: Error) => void;
|
|
12
|
-
}
|
|
13
|
-
declare function ThrottleButton({ loadingComponent, disabled, primaryOnPress, primaryLabelComponent, primaryButtonStyle, marginHorizontal, marginBottom, onError, ...touchableProps }: ThrottleButtonProps): React.JSX.Element;
|
|
14
|
-
export default ThrottleButton;
|
|
15
|
-
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ThrottleButton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AACxE,OAAO,EAAmD,qBAAqB,EAAQ,MAAM,cAAc,CAAC;AAY5G,UAAU,mBAAoB,SAAQ,qBAAqB;IACvD,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACpC,qBAAqB,EAAE,KAAK,CAAC,SAAS,CAAC;IACvC,kBAAkB,CAAC,EAAE,qBAAqB,CAAC,OAAO,CAAC,CAAC;IACpD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CACpC;AAkDD,iBAAS,cAAc,CAAC,EACpB,gBAAwC,EACxC,QAAgB,EAChB,cAAc,EACd,qBAAqB,EACrB,kBAAuB,EACvB,gBAAgB,EAChB,YAAoC,EACpC,OAAO,EACP,GAAG,cAAc,EACpB,EAAE,mBAAmB,qBAgBrB;AAoBD,eAAe,cAAc,CAAC"}
|
|
@@ -1,74 +0,0 @@
|
|
|
1
|
-
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
|
2
|
-
import { ActivityIndicator, StyleSheet, TouchableOpacity, View } from 'react-native';
|
|
3
|
-
const DEFAULT_MARGIN_X = 20;
|
|
4
|
-
const DEFAULT_MARGIN_TOP = 0;
|
|
5
|
-
const DEFAULT_MARGIN_BOTTOM = 20;
|
|
6
|
-
const DEFAULT_BORDER_RADIUS = 8;
|
|
7
|
-
const TIME_CONSTANTS = {
|
|
8
|
-
debounce: 300,
|
|
9
|
-
throttle: 2000,
|
|
10
|
-
};
|
|
11
|
-
const useAsyncButton = (onPress, onError) => {
|
|
12
|
-
const [isLoading, setIsLoading] = useState(false);
|
|
13
|
-
const lastClickTime = useRef(0);
|
|
14
|
-
const isMounted = useRef(true);
|
|
15
|
-
useEffect(() => {
|
|
16
|
-
return () => {
|
|
17
|
-
isMounted.current = false;
|
|
18
|
-
};
|
|
19
|
-
}, []);
|
|
20
|
-
const handlePress = useCallback(async () => {
|
|
21
|
-
const now = Date.now();
|
|
22
|
-
if (now - lastClickTime.current < TIME_CONSTANTS.debounce) {
|
|
23
|
-
return;
|
|
24
|
-
}
|
|
25
|
-
if (isLoading) {
|
|
26
|
-
return;
|
|
27
|
-
}
|
|
28
|
-
lastClickTime.current = now;
|
|
29
|
-
try {
|
|
30
|
-
setIsLoading(true);
|
|
31
|
-
await onPress();
|
|
32
|
-
await new Promise(resolve => setTimeout(resolve, TIME_CONSTANTS.throttle));
|
|
33
|
-
}
|
|
34
|
-
catch (error) {
|
|
35
|
-
if (error instanceof Error && onError) {
|
|
36
|
-
onError(error);
|
|
37
|
-
}
|
|
38
|
-
console.error('ThrottleButton error:', error);
|
|
39
|
-
}
|
|
40
|
-
finally {
|
|
41
|
-
if (isMounted.current) {
|
|
42
|
-
setIsLoading(false);
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
}, [onPress, onError, isLoading]);
|
|
46
|
-
return { isLoading, handlePress };
|
|
47
|
-
};
|
|
48
|
-
function ThrottleButton({ loadingComponent = <ActivityIndicator />, disabled = false, primaryOnPress, primaryLabelComponent, primaryButtonStyle = {}, marginHorizontal, marginBottom = DEFAULT_MARGIN_BOTTOM, onError, ...touchableProps }) {
|
|
49
|
-
const { isLoading, handlePress } = useAsyncButton(primaryOnPress, onError);
|
|
50
|
-
return (<View style={[styles.container, { marginHorizontal: marginHorizontal ?? DEFAULT_MARGIN_X, marginBottom }]}>
|
|
51
|
-
<TouchableOpacity activeOpacity={0.7} style={[primaryButtonStyle, styles.touchContainer, { opacity: isLoading ? 0.4 : 1 }]} onPress={handlePress} disabled={disabled || isLoading} {...touchableProps}>
|
|
52
|
-
{isLoading ? loadingComponent : primaryLabelComponent}
|
|
53
|
-
</TouchableOpacity>
|
|
54
|
-
</View>);
|
|
55
|
-
}
|
|
56
|
-
const styles = StyleSheet.create({
|
|
57
|
-
touchContainer: {
|
|
58
|
-
justifyContent: 'center',
|
|
59
|
-
alignItems: 'center',
|
|
60
|
-
flex: 1
|
|
61
|
-
},
|
|
62
|
-
container: {
|
|
63
|
-
justifyContent: 'center',
|
|
64
|
-
alignItems: 'center',
|
|
65
|
-
borderRadius: DEFAULT_BORDER_RADIUS,
|
|
66
|
-
marginTop: DEFAULT_MARGIN_TOP,
|
|
67
|
-
marginBottom: DEFAULT_MARGIN_BOTTOM,
|
|
68
|
-
overflow: 'hidden',
|
|
69
|
-
flexDirection: 'row',
|
|
70
|
-
flex: 1
|
|
71
|
-
},
|
|
72
|
-
});
|
|
73
|
-
export default ThrottleButton;
|
|
74
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ThrottleButton/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { ActivityIndicator, StyleSheet, TouchableOpacity, TouchableOpacityProps, View } from 'react-native';\n\nconst DEFAULT_MARGIN_X = 20;\nconst DEFAULT_MARGIN_TOP = 0;\nconst DEFAULT_MARGIN_BOTTOM = 20;\nconst DEFAULT_BORDER_RADIUS = 8;\n\nconst TIME_CONSTANTS = {\n debounce: 300,\n throttle: 2000,\n} as const;\n\ninterface ThrottleButtonProps extends TouchableOpacityProps {\n loadingComponent?: React.ReactNode;\n disabled?: boolean;\n primaryOnPress: () => Promise<void>;\n primaryLabelComponent: React.ReactNode;\n primaryButtonStyle?: TouchableOpacityProps['style'];\n marginHorizontal?: number;\n marginBottom?: number;\n onError?: (error: Error) => void;\n}\n\nconst useAsyncButton = (\n onPress: () => Promise<void>,\n onError?: (error: Error) => void\n) => {\n const [isLoading, setIsLoading] = useState(false);\n const lastClickTime = useRef<number>(0);\n const isMounted = useRef<boolean>(true);\n\n useEffect(() => {\n return () => {\n isMounted.current = false;\n };\n }, []);\n\n const handlePress = useCallback(async () => {\n const now = Date.now();\n\n if (now - lastClickTime.current < TIME_CONSTANTS.debounce) {\n return;\n }\n\n if (isLoading) {\n return;\n }\n\n lastClickTime.current = now;\n\n try {\n setIsLoading(true);\n await onPress();\n await new Promise(resolve =>\n setTimeout(resolve, TIME_CONSTANTS.throttle)\n );\n } catch (error: unknown) {\n if (error instanceof Error && onError) {\n onError(error);\n }\n console.error('ThrottleButton error:', error);\n } finally {\n if (isMounted.current) {\n setIsLoading(false);\n }\n }\n }, [onPress, onError, isLoading]);\n\n return { isLoading, handlePress };\n};\n\nfunction ThrottleButton({\n loadingComponent = <ActivityIndicator />,\n disabled = false,\n primaryOnPress,\n primaryLabelComponent,\n primaryButtonStyle = {},\n marginHorizontal,\n marginBottom = DEFAULT_MARGIN_BOTTOM,\n onError,\n ...touchableProps\n}: ThrottleButtonProps) {\n const { isLoading, handlePress } = useAsyncButton(primaryOnPress, onError);\n\n return (\n <View style={[styles.container, { marginHorizontal: marginHorizontal ?? DEFAULT_MARGIN_X, marginBottom }]}>\n <TouchableOpacity\n activeOpacity={0.7}\n style={[primaryButtonStyle, styles.touchContainer, { opacity: isLoading ? 0.4 : 1 }]}\n onPress={handlePress}\n disabled={disabled || isLoading}\n {...touchableProps}\n >\n {isLoading ? loadingComponent : primaryLabelComponent}\n </TouchableOpacity>\n </View>\n );\n}\n\nconst styles = StyleSheet.create({\n touchContainer: {\n justifyContent: 'center',\n alignItems: 'center',\n flex: 1\n },\n container: {\n justifyContent: 'center',\n alignItems: 'center',\n borderRadius: DEFAULT_BORDER_RADIUS,\n marginTop: DEFAULT_MARGIN_TOP,\n marginBottom: DEFAULT_MARGIN_BOTTOM,\n overflow: 'hidden',\n flexDirection: 'row',\n flex: 1\n },\n});\n\nexport default ThrottleButton;\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSBottomCta/index.tsx"],"names":[],"mappings":";AAMA,UAAU,KAAK;IACb,MAAM,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,iBAAS,WAAW,CAAC,EACnB,MAAM,EACN,MAAU,GACX,EAAE,KAAK,+BAQP;AAED,eAAe,WAAW,CAAC"}
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import { StyleSheet } from "react-native";
|
|
2
|
-
import Animated, { FadeInDown, FadeOutDown } from "react-native-reanimated";
|
|
3
|
-
import { Z_INDEX_VALUE } from "../../model/utils";
|
|
4
|
-
import useKeyboard from "../../model/useKeyboard";
|
|
5
|
-
function ZSBottomCta({ render, offset = 0, }) {
|
|
6
|
-
const { isKeyboardVisible, keyboardHeight } = useKeyboard();
|
|
7
|
-
return (<Animated.View entering={FadeInDown} exiting={FadeOutDown} style={[styles.container, { bottom: keyboardHeight + (isKeyboardVisible ? offset : 0) }]}>
|
|
8
|
-
{render()}
|
|
9
|
-
</Animated.View>);
|
|
10
|
-
}
|
|
11
|
-
export default ZSBottomCta;
|
|
12
|
-
const styles = StyleSheet.create({
|
|
13
|
-
container: {
|
|
14
|
-
position: 'absolute',
|
|
15
|
-
justifyContent: 'center',
|
|
16
|
-
alignItems: 'center',
|
|
17
|
-
zIndex: Z_INDEX_VALUE.BOTTOM_CTA,
|
|
18
|
-
width: '100%',
|
|
19
|
-
},
|
|
20
|
-
});
|
|
21
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSBottomCta/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,QAAQ,EAAE,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC5E,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,WAAW,MAAM,yBAAyB,CAAC;AAOlD,SAAS,WAAW,CAAC,EACnB,MAAM,EACN,MAAM,GAAG,CAAC,GACJ;IACN,MAAM,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,WAAW,EAAE,CAAC;IAE5D,OAAO,CACL,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,UAAU,CAAC,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,EAAE,EAAE,MAAM,EAAE,cAAc,GAAG,CAAC,iBAAiB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAClJ;MAAA,CAAC,MAAM,EAAE,CACX;IAAA,EAAE,QAAQ,CAAC,IAAI,CAAC,CACjB,CAAC;AACJ,CAAC;AAED,eAAe,WAAW,CAAC;AAE3B,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,SAAS,EAAE;QACT,QAAQ,EAAE,UAAU;QACpB,cAAc,EAAE,QAAQ;QACxB,UAAU,EAAE,QAAQ;QACpB,MAAM,EAAE,aAAa,CAAC,UAAU;QAChC,KAAK,EAAE,MAAM;KACd;CACF,CAAC,CAAC","sourcesContent":["\nimport { StyleSheet } from \"react-native\";\nimport Animated, { FadeInDown, FadeOutDown } from \"react-native-reanimated\";\nimport { Z_INDEX_VALUE } from \"../../model/utils\";\nimport useKeyboard from \"../../model/useKeyboard\";\n\ninterface Props {\n render: () => React.ReactNode;\n offset?: number;\n}\n\nfunction ZSBottomCta({\n render,\n offset = 0,\n}: Props) {\n const { isKeyboardVisible, keyboardHeight } = useKeyboard();\n\n return (\n <Animated.View entering={FadeInDown} exiting={FadeOutDown} style={[styles.container, { bottom: keyboardHeight + (isKeyboardVisible ? offset : 0) }]}>\n {render()}\n </Animated.View>\n );\n}\n\nexport default ZSBottomCta;\n\nconst styles = StyleSheet.create({\n container: {\n position: 'absolute',\n justifyContent: 'center',\n alignItems: 'center',\n zIndex: Z_INDEX_VALUE.BOTTOM_CTA,\n width: '100%',\n },\n});"]}
|