ui-rn 2.0.7 → 2.0.9

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.
Files changed (71) hide show
  1. package/Example.tsx +1 -3
  2. package/package.json +1 -1
  3. package/src/Icon/index.tsx +1 -0
  4. package/src/Layout.tsx +21 -16
  5. package/src/index.tsx +1 -0
  6. package/dist/Example.d.ts +0 -2
  7. package/dist/Example.js +0 -11
  8. package/dist/Icon/PropsStyle.d.ts +0 -15
  9. package/dist/Icon/PropsStyle.js +0 -1
  10. package/dist/Icon/index.d.ts +0 -33
  11. package/dist/Icon/index.js +0 -72
  12. package/dist/Icon/makeProps.d.ts +0 -37
  13. package/dist/Icon/makeProps.js +0 -64
  14. package/dist/Layout.d.ts +0 -13
  15. package/dist/Layout.js +0 -21
  16. package/dist/Text/Props.d.ts +0 -29
  17. package/dist/Text/Props.js +0 -1
  18. package/dist/Text/Style.d.ts +0 -1
  19. package/dist/Text/Style.js +0 -17
  20. package/dist/Text/index.d.ts +0 -4
  21. package/dist/Text/index.js +0 -44
  22. package/dist/Text/makeStyle.d.ts +0 -63
  23. package/dist/Text/makeStyle.js +0 -91
  24. package/dist/Touch/Block.d.ts +0 -5
  25. package/dist/Touch/Block.js +0 -11
  26. package/dist/Touch/Props.d.ts +0 -128
  27. package/dist/Touch/Props.js +0 -1
  28. package/dist/Touch/Style.d.ts +0 -31
  29. package/dist/Touch/Style.js +0 -118
  30. package/dist/Touch/Touch.d.ts +0 -28
  31. package/dist/Touch/Touch.js +0 -35
  32. package/dist/Touch/TouchScale.d.ts +0 -10
  33. package/dist/Touch/TouchScale.js +0 -30
  34. package/dist/Touch/makeStyle.d.ts +0 -64
  35. package/dist/Touch/makeStyle.js +0 -94
  36. package/dist/Touch/utils.d.ts +0 -5
  37. package/dist/Touch/utils.js +0 -23
  38. package/dist/index.d.ts +0 -5
  39. package/dist/index.js +0 -5
  40. package/dist/src/Icon/PropsStyle.d.ts +0 -15
  41. package/dist/src/Icon/PropsStyle.js +0 -1
  42. package/dist/src/Icon/index.d.ts +0 -33
  43. package/dist/src/Icon/index.js +0 -72
  44. package/dist/src/Icon/makeProps.d.ts +0 -37
  45. package/dist/src/Icon/makeProps.js +0 -64
  46. package/dist/src/Layout.d.ts +0 -13
  47. package/dist/src/Layout.js +0 -21
  48. package/dist/src/Text/Props.d.ts +0 -29
  49. package/dist/src/Text/Props.js +0 -1
  50. package/dist/src/Text/Style.d.ts +0 -1
  51. package/dist/src/Text/Style.js +0 -17
  52. package/dist/src/Text/index.d.ts +0 -4
  53. package/dist/src/Text/index.js +0 -44
  54. package/dist/src/Text/makeStyle.d.ts +0 -64
  55. package/dist/src/Text/makeStyle.js +0 -91
  56. package/dist/src/Touch/Block.d.ts +0 -5
  57. package/dist/src/Touch/Block.js +0 -11
  58. package/dist/src/Touch/Props.d.ts +0 -128
  59. package/dist/src/Touch/Props.js +0 -1
  60. package/dist/src/Touch/Style.d.ts +0 -31
  61. package/dist/src/Touch/Style.js +0 -118
  62. package/dist/src/Touch/Touch.d.ts +0 -28
  63. package/dist/src/Touch/Touch.js +0 -35
  64. package/dist/src/Touch/TouchScale.d.ts +0 -10
  65. package/dist/src/Touch/TouchScale.js +0 -30
  66. package/dist/src/Touch/makeStyle.d.ts +0 -65
  67. package/dist/src/Touch/makeStyle.js +0 -94
  68. package/dist/src/Touch/utils.d.ts +0 -5
  69. package/dist/src/Touch/utils.js +0 -23
  70. package/dist/src/index.d.ts +0 -5
  71. package/dist/src/index.js +0 -5
@@ -1,118 +0,0 @@
1
- import { StyleSheet, Dimensions } from "react-native";
2
- import { isEmpty, isString } from "underscore";
3
- import { makeStyle } from "./makeStyle";
4
- /**
5
- * Style utility function that generates React Native styles based on provided props
6
- * This function combines various style properties into a single style object
7
- *
8
- * @param props - Style properties object containing various style configurations
9
- * @returns Array containing base styles and computed styles
10
- *
11
- * @example
12
- * ```tsx
13
- * // Basic usage
14
- * <View style={Style({ mid: true, row: true })}>
15
- *
16
- * // With position options
17
- * <View style={Style({
18
- * positionOption: { top: 10, left: 20 },
19
- * paddingOption: { all: 10 }
20
- * })}>
21
- *
22
- * // With shadow
23
- * <View style={Style({
24
- * shadowOption: {
25
- * color: '#000',
26
- * width: 2,
27
- * height: 2,
28
- * opacity: 0.5,
29
- * radius: 5
30
- * }
31
- * })}>
32
- * ```
33
- */
34
- export const Style = (props) => {
35
- const PropsApp = StyleSheet.flatten([
36
- // Layout properties
37
- props.alignItems && { alignItems: props.alignItems },
38
- props.justifyContent && { justifyContent: props.justifyContent },
39
- props.borderStyle && { borderStyle: props.borderStyle },
40
- props.overflow && { overflow: props.overflow },
41
- // Border radius properties
42
- props.borderUpRadius && { borderTopLeftRadius: (props.borderUpRadius), borderTopRightRadius: (props.borderUpRadius) },
43
- props.borderDownRadius && { borderBottomLeftRadius: (props.borderUpRadius), borderBottomRightRadius: (props.borderUpRadius) },
44
- // Layout shortcuts
45
- props.mid && { alignItems: 'center', justifyContent: 'center' },
46
- props.row && { flexDirection: 'row' },
47
- props.width100 && { width: '100%' },
48
- props.height100 && { height: '100%' },
49
- props.square && { width: props.square, height: props.square },
50
- props.borderCircle && { borderRadius: 1000 },
51
- props.alignCenter && { alignItems: 'center' },
52
- props.justifyCenter && { justifyContent: 'center' },
53
- props.justifyBetween && { justifyContent: 'space-between' },
54
- props.overHidden && { overflow: 'hidden' },
55
- props.centerBetween && { alignItems: 'center', justifyContent: 'space-between', },
56
- // Position options
57
- props.positionOption && {
58
- position: 'absolute',
59
- top: props.positionOption?.top,
60
- bottom: props.positionOption?.bottom,
61
- left: props.positionOption?.left,
62
- right: props.positionOption?.right,
63
- },
64
- // Padding options
65
- props.paddingOption && {
66
- paddingLeft: props.paddingOption?.all || props.paddingOption?.left,
67
- paddingTop: props.paddingOption?.all || props.paddingOption?.top,
68
- paddingRight: props.paddingOption?.all || props.paddingOption?.right,
69
- paddingBottom: props.paddingOption?.all || props.paddingOption?.bottom,
70
- },
71
- // Margin options
72
- props.marginOption && {
73
- marginLeft: props.marginOption?.all || props.marginOption?.left,
74
- marginTop: props.marginOption?.all || props.marginOption?.top,
75
- marginRight: props.marginOption?.all || props.marginOption?.right,
76
- marginBottom: props.marginOption?.all || props.marginOption?.bottom,
77
- },
78
- // Border options
79
- props.borderOption && {
80
- borderLeftWidth: props.borderOption.left,
81
- borderTopWidth: props.borderOption.top,
82
- borderBottomWidth: props.borderOption.bottom,
83
- borderRightWidth: props.borderOption.right,
84
- borderColor: props.borderOption.color,
85
- },
86
- // Shadow options
87
- !isEmpty(props.shadowOption) && {
88
- shadowColor: props.shadowOption?.color,
89
- shadowOffset: {
90
- width: props.shadowOption?.width,
91
- height: props.shadowOption?.height,
92
- },
93
- shadowOpacity: props.shadowOption?.opacity,
94
- shadowRadius: props.shadowOption?.radius,
95
- elevation: props.shadowOption?.elevation,
96
- },
97
- // Default shadow
98
- props.shadowColor && {
99
- shadowColor: isString(props.shadowColor) ? props.shadowColor : '#000',
100
- shadowOffset: { width: 2, height: 2, },
101
- shadowOpacity: 1,
102
- shadowRadius: 10,
103
- elevation: 2,
104
- },
105
- // Width and height shortcuts
106
- props.w100 && { width: '100%' },
107
- props.h100 && { height: '100%' },
108
- props.flex1 && { flex: 1 },
109
- props.flexOne && { flex: 1 },
110
- // Screen dimensions
111
- props.widthScreen && { width: Dimensions.get('screen').width },
112
- props.heightScreen && { height: Dimensions.get('screen').height },
113
- ]);
114
- return [
115
- makeStyle(props),
116
- PropsApp,
117
- ];
118
- };
@@ -1,28 +0,0 @@
1
- import React from "react";
2
- import { Props } from "./Props";
3
- /**
4
- * Touch component that extends TouchableOpacity with additional styling capabilities
5
- * Supports gradient backgrounds and custom styling options
6
- *
7
- * @component
8
- * @example
9
- * ```tsx
10
- * // Basic usage
11
- * <Touch onPress={() => console.log('pressed')}>
12
- * <Text>Press me</Text>
13
- * </Touch>
14
- *
15
- *
16
- * // With custom styling
17
- * <Touch
18
- * mid={true}
19
- * row={true}
20
- * paddingOption={{ all: 10 }}
21
- * onPress={() => console.log('pressed')}
22
- * >
23
- * <Text>Styled Button</Text>
24
- * </Touch>
25
- * ```
26
- */
27
- declare const Touch: React.ForwardRefExoticComponent<Props & React.RefAttributes<import("react-native").View>>;
28
- export default Touch;
@@ -1,35 +0,0 @@
1
- import React from "react";
2
- import { TouchableOpacity } from "react-native";
3
- import { Style } from "./Style";
4
- /**
5
- * Touch component that extends TouchableOpacity with additional styling capabilities
6
- * Supports gradient backgrounds and custom styling options
7
- *
8
- * @component
9
- * @example
10
- * ```tsx
11
- * // Basic usage
12
- * <Touch onPress={() => console.log('pressed')}>
13
- * <Text>Press me</Text>
14
- * </Touch>
15
- *
16
- *
17
- * // With custom styling
18
- * <Touch
19
- * mid={true}
20
- * row={true}
21
- * paddingOption={{ all: 10 }}
22
- * onPress={() => console.log('pressed')}
23
- * >
24
- * <Text>Styled Button</Text>
25
- * </Touch>
26
- * ```
27
- */
28
- const Touch = React.forwardRef(({ style, ...props }, ref) => {
29
- if (props?.hidden)
30
- return <></>;
31
- return (<TouchableOpacity ref={ref} activeOpacity={props.activeOpacity || 0.5} style={[Style(props), style]} {...props}>
32
- {props.children}
33
- </TouchableOpacity>);
34
- });
35
- export default Touch;
@@ -1,10 +0,0 @@
1
- import React from "react";
2
- import { ViewProps } from "react-native";
3
- import { Props } from "./Props";
4
- interface ButtonScaleProps extends Props {
5
- scaleValue?: number;
6
- scale?: boolean;
7
- containerStyle?: ViewProps["style"];
8
- }
9
- declare const Touch: React.ForwardRefExoticComponent<ButtonScaleProps & React.RefAttributes<import("react-native").View>>;
10
- export default Touch;
@@ -1,30 +0,0 @@
1
- import React, { useCallback } from "react";
2
- import { Animated, TouchableOpacity } from "react-native";
3
- import { Style } from "./Style";
4
- const Touch = React.forwardRef(({ scaleValue = 1.1, style, background, containerStyle, ...props }, ref) => {
5
- if (props?.hidden)
6
- return <></>;
7
- const animatedButtonScale = React.useRef(new Animated.Value(1)).current;
8
- const onPressIn = useCallback(() => {
9
- Animated.spring(animatedButtonScale, {
10
- toValue: scaleValue,
11
- useNativeDriver: true,
12
- }).start();
13
- }, [scaleValue]);
14
- const onPressOut = useCallback(() => {
15
- Animated.spring(animatedButtonScale, {
16
- toValue: 1,
17
- useNativeDriver: true,
18
- }).start();
19
- }, []);
20
- return (<TouchableOpacity ref={ref} onPressIn={onPressIn} onPressOut={onPressOut} activeOpacity={props.activeOpacity || 1} style={containerStyle} {...props}>
21
- <Animated.View style={[
22
- { transform: [{ scale: animatedButtonScale }] },
23
- Style(props),
24
- style,
25
- ]}>
26
- {props.children}
27
- </Animated.View>
28
- </TouchableOpacity>);
29
- });
30
- export default Touch;
@@ -1,65 +0,0 @@
1
- import { ViewStyle } from "react-native";
2
- declare enum COLORS {
3
- "white" = 1,
4
- "red" = 2,
5
- "blue" = 3,
6
- "black" = 4,
7
- "green" = 5,
8
- "yellow" = 6,
9
- "pink" = 7,
10
- "gray" = 8,
11
- "primary" = 9
12
- }
13
- declare const PROPS: {
14
- readonly bg: "backgroundColor";
15
- readonly background: "backgroundColor";
16
- readonly w: "width";
17
- readonly width: "width";
18
- readonly minW: "minWidth";
19
- readonly maxW: "maxWidth";
20
- readonly h: "height";
21
- readonly height: "height";
22
- readonly minH: "minHeight";
23
- readonly maxH: "maxHeight";
24
- readonly pad: "padding";
25
- readonly padH: "paddingHorizontal";
26
- readonly horizontal: "paddingHorizontal";
27
- readonly padV: "paddingVertical";
28
- readonly vertical: "paddingVertical";
29
- readonly padL: "paddingLeft";
30
- readonly padT: "paddingTop";
31
- readonly padR: "paddingRight";
32
- readonly padB: "paddingBottom";
33
- readonly mar: "margin";
34
- readonly marH: "marginHorizontal";
35
- readonly marV: "marginVertical";
36
- readonly marL: "marginLeft";
37
- readonly marT: "marginTop";
38
- readonly marR: "marginRight";
39
- readonly marB: "marginBottom";
40
- readonly border: "borderWidth";
41
- readonly borderW: "borderWidth";
42
- readonly borderR: "borderRadius";
43
- readonly radius: "borderRadius";
44
- readonly borderC: "borderColor";
45
- readonly borderLW: "borderLeftWidth";
46
- readonly borderTW: "borderTopWidth";
47
- readonly borderRW: "borderRightWidth";
48
- readonly borderBW: "borderBottomWidth";
49
- readonly flex: "flex";
50
- readonly zIndex: "zIndex";
51
- readonly left: "left";
52
- readonly top: "top";
53
- readonly bottom: "bottom";
54
- readonly right: "right";
55
- readonly opacity: "opacity";
56
- };
57
- export type ColorKey = keyof typeof COLORS;
58
- export type ShortKey = keyof typeof PROPS;
59
- export type Convert<T extends string> = Partial<Record<T, boolean | number | string>>;
60
- export type ColorModifiers = Partial<Record<keyof typeof COLORS, boolean>>;
61
- export type MakeProp = Convert<ShortKey> & ColorModifiers;
62
- export declare const makeStyle: <T>(props: {
63
- [key: string]: any;
64
- }) => ViewStyle;
65
- export {};
@@ -1,94 +0,0 @@
1
- import { StyleSheet } from "react-native";
2
- import { isNaN } from "underscore";
3
- var COLORS;
4
- (function (COLORS) {
5
- COLORS[COLORS["white"] = 1] = "white";
6
- COLORS[COLORS["red"] = 2] = "red";
7
- COLORS[COLORS["blue"] = 3] = "blue";
8
- COLORS[COLORS["black"] = 4] = "black";
9
- COLORS[COLORS["green"] = 5] = "green";
10
- COLORS[COLORS["yellow"] = 6] = "yellow";
11
- COLORS[COLORS["pink"] = 7] = "pink";
12
- COLORS[COLORS["gray"] = 8] = "gray";
13
- COLORS[COLORS["primary"] = 9] = "primary";
14
- })(COLORS || (COLORS = {}));
15
- const PROPS = {
16
- bg: "backgroundColor",
17
- background: "backgroundColor",
18
- w: "width",
19
- width: "width",
20
- minW: "minWidth",
21
- maxW: "maxWidth",
22
- h: "height",
23
- height: "height",
24
- minH: "minHeight",
25
- maxH: "maxHeight",
26
- pad: "padding",
27
- padH: "paddingHorizontal",
28
- horizontal: "paddingHorizontal",
29
- padV: "paddingVertical",
30
- vertical: "paddingVertical",
31
- padL: "paddingLeft",
32
- padT: "paddingTop",
33
- padR: "paddingRight",
34
- padB: "paddingBottom",
35
- mar: "margin",
36
- marH: "marginHorizontal",
37
- marV: "marginVertical",
38
- marL: "marginLeft",
39
- marT: "marginTop",
40
- marR: "marginRight",
41
- marB: "marginBottom",
42
- border: 'borderWidth',
43
- borderW: 'borderWidth',
44
- borderR: "borderRadius",
45
- radius: "borderRadius",
46
- borderC: "borderColor",
47
- borderLW: "borderLeftWidth",
48
- borderTW: "borderTopWidth",
49
- borderRW: "borderRightWidth",
50
- borderBW: "borderBottomWidth",
51
- flex: 'flex',
52
- zIndex: 'zIndex',
53
- left: 'left',
54
- top: 'top',
55
- bottom: 'bottom',
56
- right: 'right',
57
- opacity: 'opacity'
58
- };
59
- const isColorKey = (key) => {
60
- return key in COLORS;
61
- };
62
- const isShortKey = (key) => {
63
- return key in PROPS;
64
- };
65
- export const makeStyle = (props) => {
66
- const style = {};
67
- Object.keys(props).forEach((key) => {
68
- const match = key.match(/^(\w+)-(\w+)$/);
69
- // 🎨 Color
70
- if (isColorKey(key)) {
71
- style.backgroundColor = key;
72
- return;
73
- }
74
- // 🔹 Hyphen syntax (pad-10)
75
- if (match) {
76
- const [, rawKey, rawValue] = match;
77
- const value = isNaN(Number(rawValue))
78
- ? rawValue
79
- : Number(rawValue);
80
- if (isShortKey(rawKey)) {
81
- style[PROPS[rawKey]] = value;
82
- }
83
- else {
84
- style[rawKey] = value;
85
- }
86
- return;
87
- }
88
- // 🔹 Normal props
89
- if (isShortKey(key)) {
90
- style[PROPS[key]] = props[key];
91
- }
92
- });
93
- return StyleSheet.create({ style }).style;
94
- };
@@ -1,5 +0,0 @@
1
- export declare function sliceTextAndNumber(input: string): {
2
- text: string | null;
3
- number: number | null;
4
- };
5
- export declare function replaceAll(str?: string, search?: string, replacement?: string): string;
@@ -1,23 +0,0 @@
1
- export function sliceTextAndNumber(input) {
2
- let text = "";
3
- let number = "";
4
- let mid = false;
5
- for (let i = 0; i < input.length; i++) {
6
- const currentChar = input[i];
7
- if (!isNaN(parseInt(currentChar)) && mid == false) {
8
- mid = i;
9
- }
10
- }
11
- if (mid) {
12
- text = input.slice(0, mid);
13
- number = input.slice(mid);
14
- }
15
- // Log.d('mid', { mid, text, number })
16
- return {
17
- text: mid ? text : null,
18
- number: mid ? Number(number) : null,
19
- };
20
- }
21
- export function replaceAll(str = '', search = '', replacement = '') {
22
- return str.replace(new RegExp(search, 'g'), replacement); //[g] ~~ search global
23
- }
@@ -1,5 +0,0 @@
1
- export { default as Touch } from './Touch/Touch';
2
- export { default as Block } from './Touch/Block';
3
- export { default as Text } from './Text';
4
- export { default as Icon } from './Icon';
5
- export { default as Layout } from './Layout';
package/dist/src/index.js DELETED
@@ -1,5 +0,0 @@
1
- export { default as Touch } from './Touch/Touch';
2
- export { default as Block } from './Touch/Block';
3
- export { default as Text } from './Text';
4
- export { default as Icon } from './Icon';
5
- export { default as Layout } from './Layout';