@tecsinapse/react-core 1.22.5 → 1.22.7
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/dist/cjs/components/atoms/Tag/Tag.d.ts +3 -0
- package/dist/cjs/components/atoms/Tag/Tag.js +6 -2
- package/dist/cjs/components/atoms/Tag/Tag.js.map +1 -1
- package/dist/cjs/components/atoms/Tag/styled.d.ts +4 -0
- package/dist/cjs/components/atoms/Tag/styled.js +8 -0
- package/dist/cjs/components/atoms/Tag/styled.js.map +1 -1
- package/dist/cjs/components/molecules/LabeledSwitch/LabeledSwitch.d.ts +8 -4
- package/dist/esm/components/atoms/Tag/Tag.d.ts +3 -0
- package/dist/esm/components/atoms/Tag/Tag.js +6 -2
- package/dist/esm/components/atoms/Tag/Tag.js.map +1 -1
- package/dist/esm/components/atoms/Tag/styled.d.ts +4 -0
- package/dist/esm/components/atoms/Tag/styled.js +8 -0
- package/dist/esm/components/atoms/Tag/styled.js.map +1 -1
- package/dist/esm/components/molecules/LabeledSwitch/LabeledSwitch.d.ts +8 -4
- package/package.json +2 -2
|
@@ -1,12 +1,15 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { ViewProps } from 'react-native';
|
|
3
3
|
import { IconProps } from '../Icon';
|
|
4
|
+
import { ColorType, ColorGradationType } from '@tecsinapse/react-core';
|
|
4
5
|
export interface TagProps extends ViewProps {
|
|
5
6
|
value: React.ReactNode;
|
|
6
7
|
icon?: IconProps;
|
|
7
8
|
dismiss?: boolean;
|
|
8
9
|
onDismiss?: () => void;
|
|
9
10
|
variant?: 'small' | 'default';
|
|
11
|
+
backgroundColorTone?: ColorType;
|
|
12
|
+
backgroundColorVariant?: ColorGradationType;
|
|
10
13
|
}
|
|
11
14
|
declare const Tag: React.FC<TagProps>;
|
|
12
15
|
export default Tag;
|
|
@@ -16,6 +16,8 @@ const Tag = ({
|
|
|
16
16
|
dismiss: canDismiss = false,
|
|
17
17
|
onDismiss,
|
|
18
18
|
style,
|
|
19
|
+
backgroundColorTone = "secondary",
|
|
20
|
+
backgroundColorVariant = "xlight",
|
|
19
21
|
...rest
|
|
20
22
|
}) => {
|
|
21
23
|
const [dismiss, setDismiss] = React.useState(false);
|
|
@@ -34,10 +36,12 @@ const Tag = ({
|
|
|
34
36
|
setTimeout(() => setDismiss(true), duration);
|
|
35
37
|
}, [onDismiss]);
|
|
36
38
|
return /* @__PURE__ */ React__default["default"].createElement(styled.StyledTagContainer, {
|
|
37
|
-
|
|
39
|
+
backgroundColorTone,
|
|
40
|
+
backgroundColorVariant,
|
|
38
41
|
variant,
|
|
39
42
|
style: [{ opacity: fadeAnim }, style],
|
|
40
|
-
visible: !dismiss
|
|
43
|
+
visible: !dismiss,
|
|
44
|
+
...rest
|
|
41
45
|
}, icon && /* @__PURE__ */ React__default["default"].createElement(styled.StyledLeftIcon, {
|
|
42
46
|
size: icon.size || "micro",
|
|
43
47
|
colorVariant: icon.colorVariant || "primary",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.js","sources":["../../../../../src/components/atoms/Tag/Tag.tsx"],"sourcesContent":["import React, { useCallback, useState } from 'react';\nimport { Animated, ViewProps } from 'react-native';\nimport { IconProps } from '../Icon';\nimport { PressableSurface } from '../PressableSurface';\nimport { StyledCloseIcon, StyledLeftIcon, StyledTagContainer } from './styled';\n\nexport interface TagProps extends ViewProps {\n value: React.ReactNode;\n icon?: IconProps;\n dismiss?: boolean;\n onDismiss?: () => void;\n variant?: 'small' | 'default';\n}\n\nconst Tag: React.FC<TagProps> = ({\n value,\n icon,\n variant = 'small',\n dismiss: canDismiss = false,\n onDismiss,\n style,\n ...rest\n}): JSX.Element => {\n const [dismiss, setDismiss] = useState(false);\n const fadeAnim = React.useRef(new Animated.Value(1)).current;\n const duration = 300;\n\n const fadeOut = () => {\n Animated.timing(fadeAnim, {\n toValue: 0,\n duration,\n useNativeDriver: true,\n }).start();\n };\n\n const handleDismiss = useCallback(() => {\n onDismiss?.();\n fadeOut();\n setTimeout(() => setDismiss(true), duration);\n }, [onDismiss]);\n\n return (\n <StyledTagContainer\n {
|
|
1
|
+
{"version":3,"file":"Tag.js","sources":["../../../../../src/components/atoms/Tag/Tag.tsx"],"sourcesContent":["import React, { useCallback, useState } from 'react';\nimport { Animated, ViewProps } from 'react-native';\nimport { IconProps } from '../Icon';\nimport { PressableSurface } from '../PressableSurface';\nimport { StyledCloseIcon, StyledLeftIcon, StyledTagContainer } from './styled';\nimport { ColorType, ColorGradationType } from '@tecsinapse/react-core';\n\nexport interface TagProps extends ViewProps {\n value: React.ReactNode;\n icon?: IconProps;\n dismiss?: boolean;\n onDismiss?: () => void;\n variant?: 'small' | 'default';\n backgroundColorTone?: ColorType;\n backgroundColorVariant?: ColorGradationType;\n}\n\nconst Tag: React.FC<TagProps> = ({\n value,\n icon,\n variant = 'small',\n dismiss: canDismiss = false,\n onDismiss,\n style,\n backgroundColorTone = 'secondary',\n backgroundColorVariant = 'xlight',\n ...rest\n}): JSX.Element => {\n const [dismiss, setDismiss] = useState(false);\n const fadeAnim = React.useRef(new Animated.Value(1)).current;\n const duration = 300;\n\n const fadeOut = () => {\n Animated.timing(fadeAnim, {\n toValue: 0,\n duration,\n useNativeDriver: true,\n }).start();\n };\n\n const handleDismiss = useCallback(() => {\n onDismiss?.();\n fadeOut();\n setTimeout(() => setDismiss(true), duration);\n }, [onDismiss]);\n\n return (\n <StyledTagContainer\n backgroundColorTone={backgroundColorTone}\n backgroundColorVariant={backgroundColorVariant}\n variant={variant}\n style={[{ opacity: fadeAnim as unknown as number }, style]}\n visible={!dismiss}\n {...rest}\n >\n {icon && (\n <StyledLeftIcon\n size={icon.size || 'micro'}\n colorVariant={icon.colorVariant || 'primary'}\n {...icon}\n />\n )}\n {value}\n {canDismiss && (\n <PressableSurface onPress={handleDismiss}>\n <StyledCloseIcon\n name=\"close-outline\"\n type=\"ionicon\"\n size=\"centi\"\n fontColor=\"medium\"\n />\n </PressableSurface>\n )}\n </StyledTagContainer>\n );\n};\n\nexport default Tag;\n"],"names":["useState","React","Animated","useCallback","StyledTagContainer","StyledLeftIcon","StyledCloseIcon"],"mappings":";;;;;;;;;;;AAiBA,MAAM,MAA0B,CAAC;AAAA,EAC/B,KAAA;AAAA,EACA,IAAA;AAAA,EACA,OAAU,GAAA,OAAA;AAAA,EACV,SAAS,UAAa,GAAA,KAAA;AAAA,EACtB,SAAA;AAAA,EACA,KAAA;AAAA,EACA,mBAAsB,GAAA,WAAA;AAAA,EACtB,sBAAyB,GAAA,QAAA;AAAA,EACtB,GAAA,IAAA;AACL,CAAmB,KAAA;AACjB,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAIA,eAAS,KAAK,CAAA,CAAA;AAC5C,EAAM,MAAA,QAAA,GAAWC,0BAAM,MAAO,CAAA,IAAIC,qBAAS,KAAM,CAAA,CAAC,CAAC,CAAE,CAAA,OAAA,CAAA;AACrD,EAAA,MAAM,QAAW,GAAA,GAAA,CAAA;AAEjB,EAAA,MAAM,UAAU,MAAM;AACpB,IAAAA,oBAAA,CAAS,OAAO,QAAU,EAAA;AAAA,MACxB,OAAS,EAAA,CAAA;AAAA,MACT,QAAA;AAAA,MACA,eAAiB,EAAA,IAAA;AAAA,KAClB,EAAE,KAAM,EAAA,CAAA;AAAA,GACX,CAAA;AAEA,EAAM,MAAA,aAAA,GAAgBC,kBAAY,MAAM;AACtC,IAAY,SAAA,IAAA,CAAA;AACZ,IAAQ,OAAA,EAAA,CAAA;AACR,IAAA,UAAA,CAAW,MAAM,UAAA,CAAW,IAAI,CAAA,EAAG,QAAQ,CAAA,CAAA;AAAA,GAC7C,EAAG,CAAC,SAAS,CAAC,CAAA,CAAA;AAEd,EAAA,uBACGF,yBAAA,CAAA,aAAA,CAAAG,yBAAA,EAAA;AAAA,IACC,mBAAA;AAAA,IACA,sBAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAO,CAAC,EAAE,OAAS,EAAA,QAAA,IAAiC,KAAK,CAAA;AAAA,IACzD,SAAS,CAAC,OAAA;AAAA,IACT,GAAG,IAAA;AAAA,GAAA,EAEH,wBACEH,yBAAA,CAAA,aAAA,CAAAI,qBAAA,EAAA;AAAA,IACC,IAAA,EAAM,KAAK,IAAQ,IAAA,OAAA;AAAA,IACnB,YAAA,EAAc,KAAK,YAAgB,IAAA,SAAA;AAAA,IAClC,GAAG,IAAA;AAAA,GACN,CAAA,EAED,KACA,EAAA,UAAA,oBACEJ,yBAAA,CAAA,aAAA,CAAA,gBAAA,EAAA;AAAA,IAAiB,OAAS,EAAA,aAAA;AAAA,GAAA,kBACxBA,yBAAA,CAAA,aAAA,CAAAK,sBAAA,EAAA;AAAA,IACC,IAAK,EAAA,eAAA;AAAA,IACL,IAAK,EAAA,SAAA;AAAA,IACL,IAAK,EAAA,OAAA;AAAA,IACL,SAAU,EAAA,QAAA;AAAA,GACZ,CACF,CAEJ,CAAA,CAAA;AAEJ;;;;"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { Animated, ViewProps } from 'react-native';
|
|
3
|
+
import { ColorGradationType, ColorType } from '../../../types/defaults';
|
|
3
4
|
import { IconProps } from '../Icon';
|
|
4
5
|
import { TagProps } from './Tag';
|
|
5
6
|
export declare const StyledTagContainer: import("@emotion/native").StyledComponent<Animated.AnimatedProps<ViewProps & import("react").RefAttributes<import("react-native").View>> & {
|
|
@@ -9,6 +10,9 @@ export declare const StyledTagContainer: import("@emotion/native").StyledCompone
|
|
|
9
10
|
as?: import("react").ElementType<any> | undefined;
|
|
10
11
|
} & Partial<TagProps> & Partial<import("../../../types/defaults").ThemeProviderProps> & ViewProps & {
|
|
11
12
|
visible: boolean;
|
|
13
|
+
} & {
|
|
14
|
+
backgroundColorTone: ColorType;
|
|
15
|
+
backgroundColorVariant: ColorGradationType;
|
|
12
16
|
}, {}, {}>;
|
|
13
17
|
export declare const StyledLeftIcon: import("@emotion/native").StyledComponent<IconProps & {
|
|
14
18
|
children?: import("react").ReactNode;
|
|
@@ -14,6 +14,13 @@ const smallVariant = ({ theme, variant }) => variant === "small" && styled.css`
|
|
|
14
14
|
border-radius: ${theme.borderRadius.micro};
|
|
15
15
|
padding: ${theme.spacing.nano} ${theme.spacing.mili};
|
|
16
16
|
`;
|
|
17
|
+
const backgroundColorTag = ({
|
|
18
|
+
theme,
|
|
19
|
+
backgroundColorTone,
|
|
20
|
+
backgroundColorVariant
|
|
21
|
+
}) => styled.css`
|
|
22
|
+
background-color: ${theme?.color[backgroundColorTone][backgroundColorVariant]};
|
|
23
|
+
`;
|
|
17
24
|
const defaultVariant = ({ theme, variant }) => variant === "default" && styled.css`
|
|
18
25
|
border-radius: ${theme.borderRadius.mili};
|
|
19
26
|
padding: ${theme.spacing.micro} ${theme.spacing.centi};
|
|
@@ -30,6 +37,7 @@ const StyledTagContainer = styled__default["default"](StyledTagContainerBase)(
|
|
|
30
37
|
(props) => styled.css`
|
|
31
38
|
${smallVariant(props)}
|
|
32
39
|
${defaultVariant(props)}
|
|
40
|
+
${backgroundColorTag(props)}
|
|
33
41
|
`
|
|
34
42
|
);
|
|
35
43
|
const StyledLeftIcon = styled__default["default"](Icon)`
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styled.js","sources":["../../../../../src/components/atoms/Tag/styled.ts"],"sourcesContent":["import styled, { css } from '@emotion/native';\nimport { Animated, ViewProps } from 'react-native';\nimport {
|
|
1
|
+
{"version":3,"file":"styled.js","sources":["../../../../../src/components/atoms/Tag/styled.ts"],"sourcesContent":["import styled, { css } from '@emotion/native';\nimport { Animated, ViewProps } from 'react-native';\nimport {\n ColorGradationType,\n ColorType,\n StyleProps,\n} from '../../../types/defaults';\nimport { Icon, IconProps } from '../Icon';\nimport { TagProps } from './Tag';\n\nconst smallVariant = ({ theme, variant }: Partial<TagProps> & StyleProps) =>\n variant === 'small' &&\n css`\n border-radius: ${theme.borderRadius.micro};\n padding: ${theme.spacing.nano} ${theme.spacing.mili};\n `;\n\nconst backgroundColorTag = ({\n theme,\n backgroundColorTone,\n backgroundColorVariant,\n}: Partial<StyleProps> & {\n backgroundColorTone: ColorType;\n backgroundColorVariant: ColorGradationType;\n}) =>\n css`\n background-color: ${theme?.color[backgroundColorTone][\n backgroundColorVariant\n ]};\n `;\n\nconst defaultVariant = ({ theme, variant }: Partial<TagProps> & StyleProps) =>\n variant === 'default' &&\n css`\n border-radius: ${theme.borderRadius.mili};\n padding: ${theme.spacing.micro} ${theme.spacing.centi};\n `;\n\nconst StyledTagContainerBase = styled(Animated.View)<\n Partial<TagProps> & Partial<StyleProps> & ViewProps & { visible: boolean }\n>`\n background-color: ${({ theme }) => theme.miscellaneous.bodyColor};\n flex-direction: row;\n justify-content: center;\n align-items: center;\n align-self: center;\n display: ${({ visible }) => (visible ? 'flex' : 'none')};\n`;\n\nexport const StyledTagContainer = styled(StyledTagContainerBase)<\n Partial<StyleProps> & {\n backgroundColorTone: ColorType;\n backgroundColorVariant: ColorGradationType;\n }\n>(\n props => css`\n ${smallVariant(props)}\n ${defaultVariant(props)}\n ${backgroundColorTag(props)}\n `\n);\n\nexport const StyledLeftIcon = styled(Icon)<Partial<StyleProps> & IconProps>`\n margin-right: ${({ theme }) => theme.spacing.micro};\n`;\n\nexport const StyledCloseIcon = styled(Icon)<Partial<StyleProps> & IconProps>`\n margin-left: ${({ theme }) => theme.spacing.nano};\n`;\n"],"names":["css","styled","Animated"],"mappings":";;;;;;;;;;;;AAUA,MAAM,eAAe,CAAC,EAAE,OAAO,OAAQ,EAAA,KACrC,YAAY,OACZ,IAAAA,UAAA,CAAA;AAAA,mBAAA,EACmB,MAAM,YAAa,CAAA,KAAA,CAAA;AAAA,aAAA,EACzB,KAAM,CAAA,OAAA,CAAQ,IAAQ,CAAA,CAAA,EAAA,KAAA,CAAM,OAAQ,CAAA,IAAA,CAAA;AAAA,EAAA,CAAA,CAAA;AAGnD,MAAM,qBAAqB,CAAC;AAAA,EAC1B,KAAA;AAAA,EACA,mBAAA;AAAA,EACA,sBAAA;AACF,CAIE,KAAAA,UAAA,CAAA;AAAA,sBACsB,EAAA,KAAA,EAAO,MAAM,mBAC/B,CAAA,CAAA,sBAAA,CAAA,CAAA;AAAA,EAAA,CAAA,CAAA;AAIN,MAAM,iBAAiB,CAAC,EAAE,OAAO,OAAQ,EAAA,KACvC,YAAY,SACZ,IAAAA,UAAA,CAAA;AAAA,mBAAA,EACmB,MAAM,YAAa,CAAA,IAAA,CAAA;AAAA,aAAA,EACzB,KAAM,CAAA,OAAA,CAAQ,KAAS,CAAA,CAAA,EAAA,KAAA,CAAM,OAAQ,CAAA,KAAA,CAAA;AAAA,EAAA,CAAA,CAAA;AAGpD,MAAM,sBAAA,GAAyBC,0BAAO,CAAAC,oBAAA,CAAS,IAAI,CAAA,CAAA;AAAA,oBAAA,EAG7B,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,aAAc,CAAA,SAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAAA,EAK5C,CAAC,EAAE,OAAQ,EAAA,KAAO,UAAU,MAAS,GAAA,MAAA,CAAA;AAAA,CAAA,CAAA;AAGrC,MAAA,kBAAA,GAAqBD,2BAAO,sBAAsB,CAAA;AAAA,EAM7D,CAAS,KAAA,KAAAD,UAAA,CAAA;AAAA,IAAA,EACL,aAAa,KAAK,CAAA,CAAA;AAAA,IAAA,EAClB,eAAe,KAAK,CAAA,CAAA;AAAA,IAAA,EACpB,mBAAmB,KAAK,CAAA,CAAA;AAAA,EAAA,CAAA;AAE9B,EAAA;AAEa,MAAA,cAAA,GAAiBC,2BAAO,IAAI,CAAA,CAAA;AAAA,gBAAA,EACvB,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,KAAA,CAAA;AAAA,EAAA;AAGlC,MAAA,eAAA,GAAkBA,2BAAO,IAAI,CAAA,CAAA;AAAA,eAAA,EACzB,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA;;;;;;"}
|
|
@@ -1,7 +1,11 @@
|
|
|
1
1
|
import { SwitchProps } from '../../atoms/Switch';
|
|
2
2
|
export declare type LabelPositionOptions = 'left' | 'right';
|
|
3
|
-
export
|
|
4
|
-
label: string;
|
|
5
|
-
labelPosition?: LabelPositionOptions;
|
|
3
|
+
export declare type LabeledSwitchProps = {
|
|
6
4
|
pressableLabel?: boolean;
|
|
7
|
-
|
|
5
|
+
leftLabel?: string;
|
|
6
|
+
rightLabel?: string;
|
|
7
|
+
} & ({
|
|
8
|
+
leftLabel: string;
|
|
9
|
+
} | {
|
|
10
|
+
rightLabel: string;
|
|
11
|
+
}) & SwitchProps;
|
|
@@ -1,12 +1,15 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { ViewProps } from 'react-native';
|
|
3
3
|
import { IconProps } from '../Icon';
|
|
4
|
+
import { ColorType, ColorGradationType } from '@tecsinapse/react-core';
|
|
4
5
|
export interface TagProps extends ViewProps {
|
|
5
6
|
value: React.ReactNode;
|
|
6
7
|
icon?: IconProps;
|
|
7
8
|
dismiss?: boolean;
|
|
8
9
|
onDismiss?: () => void;
|
|
9
10
|
variant?: 'small' | 'default';
|
|
11
|
+
backgroundColorTone?: ColorType;
|
|
12
|
+
backgroundColorVariant?: ColorGradationType;
|
|
10
13
|
}
|
|
11
14
|
declare const Tag: React.FC<TagProps>;
|
|
12
15
|
export default Tag;
|
|
@@ -10,6 +10,8 @@ const Tag = ({
|
|
|
10
10
|
dismiss: canDismiss = false,
|
|
11
11
|
onDismiss,
|
|
12
12
|
style,
|
|
13
|
+
backgroundColorTone = "secondary",
|
|
14
|
+
backgroundColorVariant = "xlight",
|
|
13
15
|
...rest
|
|
14
16
|
}) => {
|
|
15
17
|
const [dismiss, setDismiss] = useState(false);
|
|
@@ -28,10 +30,12 @@ const Tag = ({
|
|
|
28
30
|
setTimeout(() => setDismiss(true), duration);
|
|
29
31
|
}, [onDismiss]);
|
|
30
32
|
return /* @__PURE__ */ React__default.createElement(StyledTagContainer, {
|
|
31
|
-
|
|
33
|
+
backgroundColorTone,
|
|
34
|
+
backgroundColorVariant,
|
|
32
35
|
variant,
|
|
33
36
|
style: [{ opacity: fadeAnim }, style],
|
|
34
|
-
visible: !dismiss
|
|
37
|
+
visible: !dismiss,
|
|
38
|
+
...rest
|
|
35
39
|
}, icon && /* @__PURE__ */ React__default.createElement(StyledLeftIcon, {
|
|
36
40
|
size: icon.size || "micro",
|
|
37
41
|
colorVariant: icon.colorVariant || "primary",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.js","sources":["../../../../../src/components/atoms/Tag/Tag.tsx"],"sourcesContent":["import React, { useCallback, useState } from 'react';\nimport { Animated, ViewProps } from 'react-native';\nimport { IconProps } from '../Icon';\nimport { PressableSurface } from '../PressableSurface';\nimport { StyledCloseIcon, StyledLeftIcon, StyledTagContainer } from './styled';\n\nexport interface TagProps extends ViewProps {\n value: React.ReactNode;\n icon?: IconProps;\n dismiss?: boolean;\n onDismiss?: () => void;\n variant?: 'small' | 'default';\n}\n\nconst Tag: React.FC<TagProps> = ({\n value,\n icon,\n variant = 'small',\n dismiss: canDismiss = false,\n onDismiss,\n style,\n ...rest\n}): JSX.Element => {\n const [dismiss, setDismiss] = useState(false);\n const fadeAnim = React.useRef(new Animated.Value(1)).current;\n const duration = 300;\n\n const fadeOut = () => {\n Animated.timing(fadeAnim, {\n toValue: 0,\n duration,\n useNativeDriver: true,\n }).start();\n };\n\n const handleDismiss = useCallback(() => {\n onDismiss?.();\n fadeOut();\n setTimeout(() => setDismiss(true), duration);\n }, [onDismiss]);\n\n return (\n <StyledTagContainer\n {
|
|
1
|
+
{"version":3,"file":"Tag.js","sources":["../../../../../src/components/atoms/Tag/Tag.tsx"],"sourcesContent":["import React, { useCallback, useState } from 'react';\nimport { Animated, ViewProps } from 'react-native';\nimport { IconProps } from '../Icon';\nimport { PressableSurface } from '../PressableSurface';\nimport { StyledCloseIcon, StyledLeftIcon, StyledTagContainer } from './styled';\nimport { ColorType, ColorGradationType } from '@tecsinapse/react-core';\n\nexport interface TagProps extends ViewProps {\n value: React.ReactNode;\n icon?: IconProps;\n dismiss?: boolean;\n onDismiss?: () => void;\n variant?: 'small' | 'default';\n backgroundColorTone?: ColorType;\n backgroundColorVariant?: ColorGradationType;\n}\n\nconst Tag: React.FC<TagProps> = ({\n value,\n icon,\n variant = 'small',\n dismiss: canDismiss = false,\n onDismiss,\n style,\n backgroundColorTone = 'secondary',\n backgroundColorVariant = 'xlight',\n ...rest\n}): JSX.Element => {\n const [dismiss, setDismiss] = useState(false);\n const fadeAnim = React.useRef(new Animated.Value(1)).current;\n const duration = 300;\n\n const fadeOut = () => {\n Animated.timing(fadeAnim, {\n toValue: 0,\n duration,\n useNativeDriver: true,\n }).start();\n };\n\n const handleDismiss = useCallback(() => {\n onDismiss?.();\n fadeOut();\n setTimeout(() => setDismiss(true), duration);\n }, [onDismiss]);\n\n return (\n <StyledTagContainer\n backgroundColorTone={backgroundColorTone}\n backgroundColorVariant={backgroundColorVariant}\n variant={variant}\n style={[{ opacity: fadeAnim as unknown as number }, style]}\n visible={!dismiss}\n {...rest}\n >\n {icon && (\n <StyledLeftIcon\n size={icon.size || 'micro'}\n colorVariant={icon.colorVariant || 'primary'}\n {...icon}\n />\n )}\n {value}\n {canDismiss && (\n <PressableSurface onPress={handleDismiss}>\n <StyledCloseIcon\n name=\"close-outline\"\n type=\"ionicon\"\n size=\"centi\"\n fontColor=\"medium\"\n />\n </PressableSurface>\n )}\n </StyledTagContainer>\n );\n};\n\nexport default Tag;\n"],"names":["React"],"mappings":";;;;;AAiBA,MAAM,MAA0B,CAAC;AAAA,EAC/B,KAAA;AAAA,EACA,IAAA;AAAA,EACA,OAAU,GAAA,OAAA;AAAA,EACV,SAAS,UAAa,GAAA,KAAA;AAAA,EACtB,SAAA;AAAA,EACA,KAAA;AAAA,EACA,mBAAsB,GAAA,WAAA;AAAA,EACtB,sBAAyB,GAAA,QAAA;AAAA,EACtB,GAAA,IAAA;AACL,CAAmB,KAAA;AACjB,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AAC5C,EAAM,MAAA,QAAA,GAAWA,eAAM,MAAO,CAAA,IAAI,SAAS,KAAM,CAAA,CAAC,CAAC,CAAE,CAAA,OAAA,CAAA;AACrD,EAAA,MAAM,QAAW,GAAA,GAAA,CAAA;AAEjB,EAAA,MAAM,UAAU,MAAM;AACpB,IAAA,QAAA,CAAS,OAAO,QAAU,EAAA;AAAA,MACxB,OAAS,EAAA,CAAA;AAAA,MACT,QAAA;AAAA,MACA,eAAiB,EAAA,IAAA;AAAA,KAClB,EAAE,KAAM,EAAA,CAAA;AAAA,GACX,CAAA;AAEA,EAAM,MAAA,aAAA,GAAgB,YAAY,MAAM;AACtC,IAAY,SAAA,IAAA,CAAA;AACZ,IAAQ,OAAA,EAAA,CAAA;AACR,IAAA,UAAA,CAAW,MAAM,UAAA,CAAW,IAAI,CAAA,EAAG,QAAQ,CAAA,CAAA;AAAA,GAC7C,EAAG,CAAC,SAAS,CAAC,CAAA,CAAA;AAEd,EAAA,uBACGA,cAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AAAA,IACC,mBAAA;AAAA,IACA,sBAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAO,CAAC,EAAE,OAAS,EAAA,QAAA,IAAiC,KAAK,CAAA;AAAA,IACzD,SAAS,CAAC,OAAA;AAAA,IACT,GAAG,IAAA;AAAA,GAAA,EAEH,wBACEA,cAAA,CAAA,aAAA,CAAA,cAAA,EAAA;AAAA,IACC,IAAA,EAAM,KAAK,IAAQ,IAAA,OAAA;AAAA,IACnB,YAAA,EAAc,KAAK,YAAgB,IAAA,SAAA;AAAA,IAClC,GAAG,IAAA;AAAA,GACN,CAAA,EAED,KACA,EAAA,UAAA,oBACEA,cAAA,CAAA,aAAA,CAAA,gBAAA,EAAA;AAAA,IAAiB,OAAS,EAAA,aAAA;AAAA,GAAA,kBACxBA,cAAA,CAAA,aAAA,CAAA,eAAA,EAAA;AAAA,IACC,IAAK,EAAA,eAAA;AAAA,IACL,IAAK,EAAA,SAAA;AAAA,IACL,IAAK,EAAA,OAAA;AAAA,IACL,SAAU,EAAA,QAAA;AAAA,GACZ,CACF,CAEJ,CAAA,CAAA;AAEJ;;;;"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { Animated, ViewProps } from 'react-native';
|
|
3
|
+
import { ColorGradationType, ColorType } from '../../../types/defaults';
|
|
3
4
|
import { IconProps } from '../Icon';
|
|
4
5
|
import { TagProps } from './Tag';
|
|
5
6
|
export declare const StyledTagContainer: import("@emotion/native").StyledComponent<Animated.AnimatedProps<ViewProps & import("react").RefAttributes<import("react-native").View>> & {
|
|
@@ -9,6 +10,9 @@ export declare const StyledTagContainer: import("@emotion/native").StyledCompone
|
|
|
9
10
|
as?: import("react").ElementType<any> | undefined;
|
|
10
11
|
} & Partial<TagProps> & Partial<import("../../../types/defaults").ThemeProviderProps> & ViewProps & {
|
|
11
12
|
visible: boolean;
|
|
13
|
+
} & {
|
|
14
|
+
backgroundColorTone: ColorType;
|
|
15
|
+
backgroundColorVariant: ColorGradationType;
|
|
12
16
|
}, {}, {}>;
|
|
13
17
|
export declare const StyledLeftIcon: import("@emotion/native").StyledComponent<IconProps & {
|
|
14
18
|
children?: import("react").ReactNode;
|
|
@@ -6,6 +6,13 @@ const smallVariant = ({ theme, variant }) => variant === "small" && css`
|
|
|
6
6
|
border-radius: ${theme.borderRadius.micro};
|
|
7
7
|
padding: ${theme.spacing.nano} ${theme.spacing.mili};
|
|
8
8
|
`;
|
|
9
|
+
const backgroundColorTag = ({
|
|
10
|
+
theme,
|
|
11
|
+
backgroundColorTone,
|
|
12
|
+
backgroundColorVariant
|
|
13
|
+
}) => css`
|
|
14
|
+
background-color: ${theme?.color[backgroundColorTone][backgroundColorVariant]};
|
|
15
|
+
`;
|
|
9
16
|
const defaultVariant = ({ theme, variant }) => variant === "default" && css`
|
|
10
17
|
border-radius: ${theme.borderRadius.mili};
|
|
11
18
|
padding: ${theme.spacing.micro} ${theme.spacing.centi};
|
|
@@ -22,6 +29,7 @@ const StyledTagContainer = styled(StyledTagContainerBase)(
|
|
|
22
29
|
(props) => css`
|
|
23
30
|
${smallVariant(props)}
|
|
24
31
|
${defaultVariant(props)}
|
|
32
|
+
${backgroundColorTag(props)}
|
|
25
33
|
`
|
|
26
34
|
);
|
|
27
35
|
const StyledLeftIcon = styled(Icon)`
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styled.js","sources":["../../../../../src/components/atoms/Tag/styled.ts"],"sourcesContent":["import styled, { css } from '@emotion/native';\nimport { Animated, ViewProps } from 'react-native';\nimport {
|
|
1
|
+
{"version":3,"file":"styled.js","sources":["../../../../../src/components/atoms/Tag/styled.ts"],"sourcesContent":["import styled, { css } from '@emotion/native';\nimport { Animated, ViewProps } from 'react-native';\nimport {\n ColorGradationType,\n ColorType,\n StyleProps,\n} from '../../../types/defaults';\nimport { Icon, IconProps } from '../Icon';\nimport { TagProps } from './Tag';\n\nconst smallVariant = ({ theme, variant }: Partial<TagProps> & StyleProps) =>\n variant === 'small' &&\n css`\n border-radius: ${theme.borderRadius.micro};\n padding: ${theme.spacing.nano} ${theme.spacing.mili};\n `;\n\nconst backgroundColorTag = ({\n theme,\n backgroundColorTone,\n backgroundColorVariant,\n}: Partial<StyleProps> & {\n backgroundColorTone: ColorType;\n backgroundColorVariant: ColorGradationType;\n}) =>\n css`\n background-color: ${theme?.color[backgroundColorTone][\n backgroundColorVariant\n ]};\n `;\n\nconst defaultVariant = ({ theme, variant }: Partial<TagProps> & StyleProps) =>\n variant === 'default' &&\n css`\n border-radius: ${theme.borderRadius.mili};\n padding: ${theme.spacing.micro} ${theme.spacing.centi};\n `;\n\nconst StyledTagContainerBase = styled(Animated.View)<\n Partial<TagProps> & Partial<StyleProps> & ViewProps & { visible: boolean }\n>`\n background-color: ${({ theme }) => theme.miscellaneous.bodyColor};\n flex-direction: row;\n justify-content: center;\n align-items: center;\n align-self: center;\n display: ${({ visible }) => (visible ? 'flex' : 'none')};\n`;\n\nexport const StyledTagContainer = styled(StyledTagContainerBase)<\n Partial<StyleProps> & {\n backgroundColorTone: ColorType;\n backgroundColorVariant: ColorGradationType;\n }\n>(\n props => css`\n ${smallVariant(props)}\n ${defaultVariant(props)}\n ${backgroundColorTag(props)}\n `\n);\n\nexport const StyledLeftIcon = styled(Icon)<Partial<StyleProps> & IconProps>`\n margin-right: ${({ theme }) => theme.spacing.micro};\n`;\n\nexport const StyledCloseIcon = styled(Icon)<Partial<StyleProps> & IconProps>`\n margin-left: ${({ theme }) => theme.spacing.nano};\n`;\n"],"names":[],"mappings":";;;;AAUA,MAAM,eAAe,CAAC,EAAE,OAAO,OAAQ,EAAA,KACrC,YAAY,OACZ,IAAA,GAAA,CAAA;AAAA,mBAAA,EACmB,MAAM,YAAa,CAAA,KAAA,CAAA;AAAA,aAAA,EACzB,KAAM,CAAA,OAAA,CAAQ,IAAQ,CAAA,CAAA,EAAA,KAAA,CAAM,OAAQ,CAAA,IAAA,CAAA;AAAA,EAAA,CAAA,CAAA;AAGnD,MAAM,qBAAqB,CAAC;AAAA,EAC1B,KAAA;AAAA,EACA,mBAAA;AAAA,EACA,sBAAA;AACF,CAIE,KAAA,GAAA,CAAA;AAAA,sBACsB,EAAA,KAAA,EAAO,MAAM,mBAC/B,CAAA,CAAA,sBAAA,CAAA,CAAA;AAAA,EAAA,CAAA,CAAA;AAIN,MAAM,iBAAiB,CAAC,EAAE,OAAO,OAAQ,EAAA,KACvC,YAAY,SACZ,IAAA,GAAA,CAAA;AAAA,mBAAA,EACmB,MAAM,YAAa,CAAA,IAAA,CAAA;AAAA,aAAA,EACzB,KAAM,CAAA,OAAA,CAAQ,KAAS,CAAA,CAAA,EAAA,KAAA,CAAM,OAAQ,CAAA,KAAA,CAAA;AAAA,EAAA,CAAA,CAAA;AAGpD,MAAM,sBAAA,GAAyB,MAAO,CAAA,QAAA,CAAS,IAAI,CAAA,CAAA;AAAA,oBAAA,EAG7B,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,aAAc,CAAA,SAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAAA,EAK5C,CAAC,EAAE,OAAQ,EAAA,KAAO,UAAU,MAAS,GAAA,MAAA,CAAA;AAAA,CAAA,CAAA;AAGrC,MAAA,kBAAA,GAAqB,OAAO,sBAAsB,CAAA;AAAA,EAM7D,CAAS,KAAA,KAAA,GAAA,CAAA;AAAA,IAAA,EACL,aAAa,KAAK,CAAA,CAAA;AAAA,IAAA,EAClB,eAAe,KAAK,CAAA,CAAA;AAAA,IAAA,EACpB,mBAAmB,KAAK,CAAA,CAAA;AAAA,EAAA,CAAA;AAE9B,EAAA;AAEa,MAAA,cAAA,GAAiB,OAAO,IAAI,CAAA,CAAA;AAAA,gBAAA,EACvB,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,KAAA,CAAA;AAAA,EAAA;AAGlC,MAAA,eAAA,GAAkB,OAAO,IAAI,CAAA,CAAA;AAAA,eAAA,EACzB,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA;;;;"}
|
|
@@ -1,7 +1,11 @@
|
|
|
1
1
|
import { SwitchProps } from '../../atoms/Switch';
|
|
2
2
|
export declare type LabelPositionOptions = 'left' | 'right';
|
|
3
|
-
export
|
|
4
|
-
label: string;
|
|
5
|
-
labelPosition?: LabelPositionOptions;
|
|
3
|
+
export declare type LabeledSwitchProps = {
|
|
6
4
|
pressableLabel?: boolean;
|
|
7
|
-
|
|
5
|
+
leftLabel?: string;
|
|
6
|
+
rightLabel?: string;
|
|
7
|
+
} & ({
|
|
8
|
+
leftLabel: string;
|
|
9
|
+
} | {
|
|
10
|
+
rightLabel: string;
|
|
11
|
+
}) & SwitchProps;
|
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.22.
|
|
4
|
+
"version": "1.22.7",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"main": "dist/cjs/index.js",
|
|
7
7
|
"module": "dist/esm/index.js",
|
|
@@ -39,5 +39,5 @@
|
|
|
39
39
|
"react-native": "^0.64.4",
|
|
40
40
|
"react-native-vector-icons": "^8.1.0 || ^9.0.0"
|
|
41
41
|
},
|
|
42
|
-
"gitHead": "
|
|
42
|
+
"gitHead": "e1df77c53be6d96608ebb01b2e55de4f08e20b6a"
|
|
43
43
|
}
|