@tecsinapse/react-core 1.21.1 → 1.21.2
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 +11 -0
- package/dist/components/atoms/Input/styled.d.ts +52 -10
- package/dist/components/atoms/Input/styled.js +2 -2
- package/dist/components/atoms/Input/styled.js.map +1 -1
- package/esm/components/atoms/Input/styled.d.ts +52 -10
- package/esm/components/atoms/Input/styled.js +1 -1
- package/esm/components/atoms/Input/styled.js.map +1 -1
- package/package.json +2 -2
- package/src/components/atoms/Input/styled.ts +3 -5
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,17 @@
|
|
|
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.21.2](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-core@1.21.1...@tecsinapse/react-core@1.21.2) (2022-10-04)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* imports inputs ([982fe67](https://github.com/tecsinapse/design-system/commit/982fe67e7c89c63f244dc83b4ad6dd18ddaaa693))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
6
17
|
## [1.21.1](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-core@1.21.0...@tecsinapse/react-core@1.21.1) (2022-10-04)
|
|
7
18
|
|
|
8
19
|
|
|
@@ -1,22 +1,64 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { TextInput } from 'react-native';
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
import { InputElementProps } from '.';
|
|
4
|
+
import { StyleProps } from '../../../types/defaults';
|
|
5
|
+
import { InputContainerProps } from './InputContainer/InputContainer';
|
|
6
|
+
export declare const disabledInputStyles: ({ disabled, theme, }: Partial<InputContainerProps> & Partial<StyleProps>) => false | import("@emotion/native").ReactNativeStyle | undefined;
|
|
7
|
+
export declare const StyledIconContent: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
|
|
8
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
9
|
+
as?: import("react").ElementType<any> | undefined;
|
|
10
|
+
} & Partial<import("../../../types/defaults").ThemeProviderProps>, {}, {
|
|
6
11
|
ref?: import("react").Ref<import("react-native").View> | undefined;
|
|
7
12
|
}>;
|
|
8
|
-
export declare const StyledInputContainer: import("@emotion/native").StyledComponent<
|
|
13
|
+
export declare const StyledInputContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
|
|
14
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
15
|
+
as?: import("react").ElementType<any> | undefined;
|
|
16
|
+
} & Partial<InputContainerProps> & Partial<import("../../../types/defaults").ThemeProviderProps>, {}, {
|
|
9
17
|
ref?: import("react").Ref<import("react-native").View> | undefined;
|
|
10
18
|
}>;
|
|
11
|
-
export declare const StyledInputElementBase: import("@emotion/native").StyledComponent<
|
|
19
|
+
export declare const StyledInputElementBase: import("@emotion/native").StyledComponent<import("react-native").TextInputProps & {
|
|
20
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
21
|
+
as?: import("react").ElementType<any> | undefined;
|
|
22
|
+
} & InputElementProps & Partial<import("../../../types/defaults").ThemeProviderProps>, {}, {
|
|
12
23
|
ref?: import("react").Ref<TextInput> | undefined;
|
|
13
24
|
}>;
|
|
14
|
-
export declare const StyledLabelContainer: import("@emotion/native").StyledComponent<
|
|
25
|
+
export declare const StyledLabelContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
|
|
26
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
27
|
+
as?: import("react").ElementType<any> | undefined;
|
|
28
|
+
} & Partial<InputContainerProps> & Partial<import("../../../types/defaults").ThemeProviderProps>, {}, {
|
|
15
29
|
ref?: import("react").Ref<import("react-native").View> | undefined;
|
|
16
30
|
}>;
|
|
17
|
-
export declare const StyledBorderKeeper: import("@emotion/native").StyledComponent<
|
|
18
|
-
|
|
19
|
-
|
|
31
|
+
export declare const StyledBorderKeeper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
|
|
32
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
33
|
+
as?: import("react").ElementType<any> | undefined;
|
|
34
|
+
} & Partial<InputContainerProps> & Partial<import("../../../types/defaults").ThemeProviderProps> & {
|
|
35
|
+
ref?: import("react").Ref<import("react-native").View> | undefined;
|
|
36
|
+
} & {
|
|
37
|
+
children?: import("react").ReactNode;
|
|
38
|
+
} & {
|
|
39
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
40
|
+
as?: import("react").ElementType<any> | undefined;
|
|
41
|
+
}, {}, {}>;
|
|
42
|
+
export declare const StyledInputElement: import("@emotion/native").StyledComponent<import("react-native").TextInputProps & {
|
|
43
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
44
|
+
as?: import("react").ElementType<any> | undefined;
|
|
45
|
+
} & InputElementProps & Partial<import("../../../types/defaults").ThemeProviderProps> & {
|
|
46
|
+
ref?: import("react").Ref<TextInput> | undefined;
|
|
47
|
+
} & {
|
|
48
|
+
children?: import("react").ReactNode;
|
|
49
|
+
} & {
|
|
50
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
51
|
+
as?: import("react").ElementType<any> | undefined;
|
|
52
|
+
}, {}, {}>;
|
|
53
|
+
export declare const StyledHintContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
|
|
54
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
55
|
+
as?: import("react").ElementType<any> | undefined;
|
|
56
|
+
} & Partial<import("../../../types/defaults").ThemeProviderProps>, {}, {
|
|
20
57
|
ref?: import("react").Ref<import("react-native").View> | undefined;
|
|
21
58
|
}>;
|
|
22
|
-
export declare const StyledHintIcon: import("@emotion/native").StyledComponent<
|
|
59
|
+
export declare const StyledHintIcon: import("@emotion/native").StyledComponent<import("../Icon").IconProps & {
|
|
60
|
+
children?: import("react").ReactNode;
|
|
61
|
+
} & {
|
|
62
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
63
|
+
as?: import("react").ElementType<any> | undefined;
|
|
64
|
+
} & Partial<import("../../../types/defaults").ThemeProviderProps>, {}, {}>;
|
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var styled = require('@emotion/native');
|
|
6
6
|
var reactNative = require('react-native');
|
|
7
|
-
var
|
|
7
|
+
var ResponsiveFontSize = require('../../../utils/ResponsiveFontSize.js');
|
|
8
8
|
var Icon = require('../Icon/Icon.js');
|
|
9
9
|
|
|
10
10
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
@@ -50,7 +50,7 @@ const StyledIconContent = styled__default["default"].View`
|
|
|
50
50
|
const StyledInputContainer = styled__default["default"].View`
|
|
51
51
|
flex-direction: row;
|
|
52
52
|
align-items: center;
|
|
53
|
-
min-height: ${
|
|
53
|
+
min-height: ${ResponsiveFontSize.RFValueStr("44px")};
|
|
54
54
|
`;
|
|
55
55
|
const StyledInputElementBase = styled__default["default"](reactNative.TextInput)`
|
|
56
56
|
font-family: ${({ theme }) => `'${theme.font.stack.default}'`};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styled.js","sources":["../../../../src/components/atoms/Input/styled.ts"],"sourcesContent":["import styled, { css } from '@emotion/native';\nimport { TextInput } from 'react-native';\nimport { InputElementProps } from '.';\nimport {
|
|
1
|
+
{"version":3,"file":"styled.js","sources":["../../../../src/components/atoms/Input/styled.ts"],"sourcesContent":["import styled, { css } from '@emotion/native';\nimport { TextInput } from 'react-native';\nimport { InputElementProps } from '.';\nimport { StyleProps } from '../../../types/defaults';\nimport { RFValueStr } from '../../../utils/ResponsiveFontSize';\nimport { InputContainerProps } from './InputContainer/InputContainer';\nimport { Icon } from '../Icon';\nconst leftIconStyles = ({\n leftComponent,\n theme,\n}: Partial<InputContainerProps> & StyleProps) =>\n !leftComponent &&\n css`\n padding-left: ${theme.spacing.centi};\n `;\n\nconst rightIconStyles = ({\n rightComponent,\n theme,\n}: Partial<InputContainerProps> & StyleProps) =>\n !rightComponent &&\n css`\n padding-right: ${theme.spacing.centi};\n `;\n\nconst disabledContainerStyles = ({\n disabled,\n}: Partial<InputContainerProps> & StyleProps) =>\n disabled &&\n css`\n background-color: transparent;\n `;\n\nexport const disabledInputStyles = ({\n disabled,\n theme,\n}: Partial<InputContainerProps> & Partial<StyleProps>) =>\n disabled &&\n css`\n color: ${theme?.color.secondary.light};\n `;\n\nconst focusedStyles = ({\n focused,\n borderColor = 'secondary',\n theme,\n}: Partial<InputContainerProps> & StyleProps) =>\n focused &&\n css`\n border-width: ${theme.borderWidth.nano};\n border-color: ${theme.color[borderColor].dark};\n `;\n\nexport const StyledIconContent = styled.View<Partial<StyleProps>>`\n z-index: ${({ theme }) => theme.zIndex.default};\n flex-direction: row;\n align-items: center;\n`;\n\nexport const StyledInputContainer = styled.View<\n Partial<InputContainerProps> & Partial<StyleProps>\n>`\n flex-direction: row;\n align-items: center;\n min-height: ${RFValueStr('44px')};\n`;\n\nexport const StyledInputElementBase = styled(TextInput)<\n InputElementProps & Partial<StyleProps>\n>`\n font-family: ${({ theme }) => `'${theme.font.stack.default}'`};\n font-size: ${({ theme }) => theme.typography.base.fontSize};\n font-weight: ${({ theme }) => theme.font.weight.bold};\n color: ${({ theme }) => theme.font.color.dark};\n`;\n\nexport const StyledLabelContainer = styled.View<\n Partial<InputContainerProps> & Partial<StyleProps>\n>(\n props => css`\n flex: 1;\n padding: ${props.theme.spacing.micro} 0;\n ${leftIconStyles(props)}\n ${rightIconStyles(props)}\n `\n);\n\nconst StyledBorderKeeperBase = styled.View<\n Partial<InputContainerProps> & Partial<StyleProps>\n>`\n background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};\n border-color: ${({\n theme,\n borderColor = 'secondary',\n borderColorGradation = 'light',\n }) => theme.color[borderColor][borderColorGradation]};\n border-radius: ${({ theme }) => theme.borderRadius.mili};\n border-width: ${({ theme }) => theme.borderWidth.pico};\n position: absolute;\n width: 100%;\n height: 100%;\n`;\n\nexport const StyledBorderKeeper = styled(StyledBorderKeeperBase)<\n Partial<StyleProps>\n>(\n props => css`\n ${focusedStyles(props)}\n ${disabledContainerStyles(props)}\n `\n);\n\nexport const StyledInputElement = styled(StyledInputElementBase)<\n InputElementProps & Partial<StyleProps>\n>(\n props => css`\n width: 100%;\n ${disabledInputStyles(props)}\n `\n);\n\nexport const StyledHintContainer = styled.View<Partial<StyleProps>>`\n margin-top: ${({ theme }) => theme.spacing.micro};\n flex-direction: row;\n align-items: center;\n`;\n\nexport const StyledHintIcon = styled(Icon)<Partial<StyleProps>>`\n margin-right: ${({ theme }) => theme.spacing.micro};\n`;\n"],"names":["css","styled","RFValueStr","TextInput"],"mappings":"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"}
|
|
@@ -1,22 +1,64 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { TextInput } from 'react-native';
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
import { InputElementProps } from '.';
|
|
4
|
+
import { StyleProps } from '../../../types/defaults';
|
|
5
|
+
import { InputContainerProps } from './InputContainer/InputContainer';
|
|
6
|
+
export declare const disabledInputStyles: ({ disabled, theme, }: Partial<InputContainerProps> & Partial<StyleProps>) => false | import("@emotion/native").ReactNativeStyle | undefined;
|
|
7
|
+
export declare const StyledIconContent: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
|
|
8
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
9
|
+
as?: import("react").ElementType<any> | undefined;
|
|
10
|
+
} & Partial<import("../../../types/defaults").ThemeProviderProps>, {}, {
|
|
6
11
|
ref?: import("react").Ref<import("react-native").View> | undefined;
|
|
7
12
|
}>;
|
|
8
|
-
export declare const StyledInputContainer: import("@emotion/native").StyledComponent<
|
|
13
|
+
export declare const StyledInputContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
|
|
14
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
15
|
+
as?: import("react").ElementType<any> | undefined;
|
|
16
|
+
} & Partial<InputContainerProps> & Partial<import("../../../types/defaults").ThemeProviderProps>, {}, {
|
|
9
17
|
ref?: import("react").Ref<import("react-native").View> | undefined;
|
|
10
18
|
}>;
|
|
11
|
-
export declare const StyledInputElementBase: import("@emotion/native").StyledComponent<
|
|
19
|
+
export declare const StyledInputElementBase: import("@emotion/native").StyledComponent<import("react-native").TextInputProps & {
|
|
20
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
21
|
+
as?: import("react").ElementType<any> | undefined;
|
|
22
|
+
} & InputElementProps & Partial<import("../../../types/defaults").ThemeProviderProps>, {}, {
|
|
12
23
|
ref?: import("react").Ref<TextInput> | undefined;
|
|
13
24
|
}>;
|
|
14
|
-
export declare const StyledLabelContainer: import("@emotion/native").StyledComponent<
|
|
25
|
+
export declare const StyledLabelContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
|
|
26
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
27
|
+
as?: import("react").ElementType<any> | undefined;
|
|
28
|
+
} & Partial<InputContainerProps> & Partial<import("../../../types/defaults").ThemeProviderProps>, {}, {
|
|
15
29
|
ref?: import("react").Ref<import("react-native").View> | undefined;
|
|
16
30
|
}>;
|
|
17
|
-
export declare const StyledBorderKeeper: import("@emotion/native").StyledComponent<
|
|
18
|
-
|
|
19
|
-
|
|
31
|
+
export declare const StyledBorderKeeper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
|
|
32
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
33
|
+
as?: import("react").ElementType<any> | undefined;
|
|
34
|
+
} & Partial<InputContainerProps> & Partial<import("../../../types/defaults").ThemeProviderProps> & {
|
|
35
|
+
ref?: import("react").Ref<import("react-native").View> | undefined;
|
|
36
|
+
} & {
|
|
37
|
+
children?: import("react").ReactNode;
|
|
38
|
+
} & {
|
|
39
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
40
|
+
as?: import("react").ElementType<any> | undefined;
|
|
41
|
+
}, {}, {}>;
|
|
42
|
+
export declare const StyledInputElement: import("@emotion/native").StyledComponent<import("react-native").TextInputProps & {
|
|
43
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
44
|
+
as?: import("react").ElementType<any> | undefined;
|
|
45
|
+
} & InputElementProps & Partial<import("../../../types/defaults").ThemeProviderProps> & {
|
|
46
|
+
ref?: import("react").Ref<TextInput> | undefined;
|
|
47
|
+
} & {
|
|
48
|
+
children?: import("react").ReactNode;
|
|
49
|
+
} & {
|
|
50
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
51
|
+
as?: import("react").ElementType<any> | undefined;
|
|
52
|
+
}, {}, {}>;
|
|
53
|
+
export declare const StyledHintContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
|
|
54
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
55
|
+
as?: import("react").ElementType<any> | undefined;
|
|
56
|
+
} & Partial<import("../../../types/defaults").ThemeProviderProps>, {}, {
|
|
20
57
|
ref?: import("react").Ref<import("react-native").View> | undefined;
|
|
21
58
|
}>;
|
|
22
|
-
export declare const StyledHintIcon: import("@emotion/native").StyledComponent<
|
|
59
|
+
export declare const StyledHintIcon: import("@emotion/native").StyledComponent<import("../Icon").IconProps & {
|
|
60
|
+
children?: import("react").ReactNode;
|
|
61
|
+
} & {
|
|
62
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
63
|
+
as?: import("react").ElementType<any> | undefined;
|
|
64
|
+
} & Partial<import("../../../types/defaults").ThemeProviderProps>, {}, {}>;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import styled, { css } from '@emotion/native';
|
|
2
2
|
import { TextInput } from 'react-native';
|
|
3
|
-
import { RFValueStr } from '
|
|
3
|
+
import { RFValueStr } from '../../../utils/ResponsiveFontSize.js';
|
|
4
4
|
import Icon from '../Icon/Icon.js';
|
|
5
5
|
|
|
6
6
|
const leftIconStyles = ({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styled.js","sources":["../../../../src/components/atoms/Input/styled.ts"],"sourcesContent":["import styled, { css } from '@emotion/native';\nimport { TextInput } from 'react-native';\nimport { InputElementProps } from '.';\nimport {
|
|
1
|
+
{"version":3,"file":"styled.js","sources":["../../../../src/components/atoms/Input/styled.ts"],"sourcesContent":["import styled, { css } from '@emotion/native';\nimport { TextInput } from 'react-native';\nimport { InputElementProps } from '.';\nimport { StyleProps } from '../../../types/defaults';\nimport { RFValueStr } from '../../../utils/ResponsiveFontSize';\nimport { InputContainerProps } from './InputContainer/InputContainer';\nimport { Icon } from '../Icon';\nconst leftIconStyles = ({\n leftComponent,\n theme,\n}: Partial<InputContainerProps> & StyleProps) =>\n !leftComponent &&\n css`\n padding-left: ${theme.spacing.centi};\n `;\n\nconst rightIconStyles = ({\n rightComponent,\n theme,\n}: Partial<InputContainerProps> & StyleProps) =>\n !rightComponent &&\n css`\n padding-right: ${theme.spacing.centi};\n `;\n\nconst disabledContainerStyles = ({\n disabled,\n}: Partial<InputContainerProps> & StyleProps) =>\n disabled &&\n css`\n background-color: transparent;\n `;\n\nexport const disabledInputStyles = ({\n disabled,\n theme,\n}: Partial<InputContainerProps> & Partial<StyleProps>) =>\n disabled &&\n css`\n color: ${theme?.color.secondary.light};\n `;\n\nconst focusedStyles = ({\n focused,\n borderColor = 'secondary',\n theme,\n}: Partial<InputContainerProps> & StyleProps) =>\n focused &&\n css`\n border-width: ${theme.borderWidth.nano};\n border-color: ${theme.color[borderColor].dark};\n `;\n\nexport const StyledIconContent = styled.View<Partial<StyleProps>>`\n z-index: ${({ theme }) => theme.zIndex.default};\n flex-direction: row;\n align-items: center;\n`;\n\nexport const StyledInputContainer = styled.View<\n Partial<InputContainerProps> & Partial<StyleProps>\n>`\n flex-direction: row;\n align-items: center;\n min-height: ${RFValueStr('44px')};\n`;\n\nexport const StyledInputElementBase = styled(TextInput)<\n InputElementProps & Partial<StyleProps>\n>`\n font-family: ${({ theme }) => `'${theme.font.stack.default}'`};\n font-size: ${({ theme }) => theme.typography.base.fontSize};\n font-weight: ${({ theme }) => theme.font.weight.bold};\n color: ${({ theme }) => theme.font.color.dark};\n`;\n\nexport const StyledLabelContainer = styled.View<\n Partial<InputContainerProps> & Partial<StyleProps>\n>(\n props => css`\n flex: 1;\n padding: ${props.theme.spacing.micro} 0;\n ${leftIconStyles(props)}\n ${rightIconStyles(props)}\n `\n);\n\nconst StyledBorderKeeperBase = styled.View<\n Partial<InputContainerProps> & Partial<StyleProps>\n>`\n background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};\n border-color: ${({\n theme,\n borderColor = 'secondary',\n borderColorGradation = 'light',\n }) => theme.color[borderColor][borderColorGradation]};\n border-radius: ${({ theme }) => theme.borderRadius.mili};\n border-width: ${({ theme }) => theme.borderWidth.pico};\n position: absolute;\n width: 100%;\n height: 100%;\n`;\n\nexport const StyledBorderKeeper = styled(StyledBorderKeeperBase)<\n Partial<StyleProps>\n>(\n props => css`\n ${focusedStyles(props)}\n ${disabledContainerStyles(props)}\n `\n);\n\nexport const StyledInputElement = styled(StyledInputElementBase)<\n InputElementProps & Partial<StyleProps>\n>(\n props => css`\n width: 100%;\n ${disabledInputStyles(props)}\n `\n);\n\nexport const StyledHintContainer = styled.View<Partial<StyleProps>>`\n margin-top: ${({ theme }) => theme.spacing.micro};\n flex-direction: row;\n align-items: center;\n`;\n\nexport const StyledHintIcon = styled(Icon)<Partial<StyleProps>>`\n margin-right: ${({ theme }) => theme.spacing.micro};\n`;\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tecsinapse/react-core",
|
|
3
3
|
"description": "TecSinapse hybrid React components",
|
|
4
|
-
"version": "1.21.
|
|
4
|
+
"version": "1.21.2",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"main": "dist/index.js",
|
|
7
7
|
"module": "esm/index.js",
|
|
@@ -36,5 +36,5 @@
|
|
|
36
36
|
"react-native": "^0.64.0",
|
|
37
37
|
"react-native-vector-icons": "^8.1.0 || ^9.0.0"
|
|
38
38
|
},
|
|
39
|
-
"gitHead": "
|
|
39
|
+
"gitHead": "6fd94322cdd8670ff536a8fb8271cb519b2310c9"
|
|
40
40
|
}
|
|
@@ -1,11 +1,9 @@
|
|
|
1
1
|
import styled, { css } from '@emotion/native';
|
|
2
2
|
import { TextInput } from 'react-native';
|
|
3
3
|
import { InputElementProps } from '.';
|
|
4
|
-
import {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
InputContainerProps,
|
|
8
|
-
} from '@tecsinapse/react-core';
|
|
4
|
+
import { StyleProps } from '../../../types/defaults';
|
|
5
|
+
import { RFValueStr } from '../../../utils/ResponsiveFontSize';
|
|
6
|
+
import { InputContainerProps } from './InputContainer/InputContainer';
|
|
9
7
|
import { Icon } from '../Icon';
|
|
10
8
|
const leftIconStyles = ({
|
|
11
9
|
leftComponent,
|