@fountain-ui/core 2.0.0-beta.52 → 2.0.0-beta.54
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/build/commonjs/Divider/Divider.js +6 -7
- package/build/commonjs/Divider/Divider.js.map +1 -1
- package/build/commonjs/Divider/DividerProps.js.map +1 -1
- package/build/commonjs/TextField/TextField.js +9 -2
- package/build/commonjs/TextField/TextField.js.map +1 -1
- package/build/commonjs/TextField/TextFieldProps.js.map +1 -1
- package/build/module/Divider/Divider.js +6 -7
- package/build/module/Divider/Divider.js.map +1 -1
- package/build/module/Divider/DividerProps.js.map +1 -1
- package/build/module/TextField/TextField.js +9 -2
- package/build/module/TextField/TextField.js.map +1 -1
- package/build/module/TextField/TextFieldProps.js.map +1 -1
- package/build/typescript/Divider/DividerProps.d.ts +5 -0
- package/build/typescript/TextField/TextFieldProps.d.ts +3 -0
- package/package.json +2 -2
- package/src/Divider/Divider.tsx +2 -7
- package/src/Divider/DividerProps.ts +6 -0
- package/src/TextField/TextField.tsx +6 -1
- package/src/TextField/TextFieldProps.ts +4 -0
|
@@ -28,17 +28,12 @@ const styles = _styles.StyleSheet.create({
|
|
|
28
28
|
},
|
|
29
29
|
divider: {
|
|
30
30
|
flexGrow: 1
|
|
31
|
-
},
|
|
32
|
-
borderBottom: {
|
|
33
|
-
borderBottomWidth: 1
|
|
34
|
-
},
|
|
35
|
-
borderRight: {
|
|
36
|
-
borderRightWidth: 1
|
|
37
31
|
}
|
|
38
32
|
});
|
|
39
33
|
|
|
40
34
|
function Divider(props) {
|
|
41
35
|
const {
|
|
36
|
+
borderWidth = 1,
|
|
42
37
|
children: childrenProp,
|
|
43
38
|
color = 'divider',
|
|
44
39
|
inset = 0,
|
|
@@ -73,7 +68,11 @@ function Divider(props) {
|
|
|
73
68
|
const borderColorStyle = {
|
|
74
69
|
borderColor
|
|
75
70
|
};
|
|
76
|
-
const borderWidthStyle = vertical ?
|
|
71
|
+
const borderWidthStyle = vertical ? {
|
|
72
|
+
borderRightWidth: borderWidth
|
|
73
|
+
} : {
|
|
74
|
+
borderBottomWidth: borderWidth
|
|
75
|
+
};
|
|
77
76
|
const containerStyle = (0, _styles.css)([insetStyle, marginStyle, styles.container, vertical ? styles.column : styles.row, childrenProp ? undefined : borderColorStyle, childrenProp ? undefined : borderWidthStyle, style]);
|
|
78
77
|
const dividerStyle = (0, _styles.css)([borderColorStyle, borderWidthStyle, styles.divider]);
|
|
79
78
|
const dividerMarginSize = theme.spacing(marginBetweenChildren);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["styles","StyleSheet","create","container","alignSelf","alignItems","row","flexDirection","column","divider","flexGrow","
|
|
1
|
+
{"version":3,"names":["styles","StyleSheet","create","container","alignSelf","alignItems","row","flexDirection","column","divider","flexGrow","Divider","props","borderWidth","children","childrenProp","color","inset","marginBetweenChildren","style","vertical","otherProps","theme","useTheme","fontColor","palette","text","secondary","borderColor","main","marginSize","spacing","insetSize","marginLeft","marginRight","marginTop","marginBottom","marginStyle","insetStyle","borderColorStyle","borderWidthStyle","borderRightWidth","borderBottomWidth","containerStyle","css","undefined","dividerStyle","dividerMarginSize","startDividerStyle","endDividerStyle","fontStyle","createFontStyle","selector","typo","caption2","element"],"sources":["Divider.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, View } from 'react-native';\nimport { createFontStyle, css, StyleSheet, useTheme } from '../styles';\nimport type DividerProps from './DividerProps';\n\nconst styles = StyleSheet.create({\n container: {\n alignSelf: 'stretch',\n alignItems: 'center',\n },\n row: {\n flexDirection: 'row',\n },\n column: {\n flexDirection: 'column',\n },\n divider: {\n flexGrow: 1,\n },\n});\n\nexport default function Divider(props: DividerProps) {\n const {\n borderWidth = 1,\n children: childrenProp,\n color = 'divider',\n inset = 0,\n marginBetweenChildren = 2,\n style,\n vertical = false,\n ...otherProps\n } = props;\n\n const theme = useTheme();\n\n const fontColor = theme.palette.text.secondary;\n const borderColor = color === 'divider'\n ? theme.palette.divider\n : theme.palette[color].main;\n const marginSize = theme.spacing(1);\n const insetSize = theme.spacing(inset);\n\n const marginLeft = marginSize;\n const marginRight = marginSize;\n const marginTop = marginSize;\n const marginBottom = marginSize;\n\n const marginStyle = vertical\n ? { marginLeft, marginRight }\n : { marginTop, marginBottom };\n\n const insetStyle = vertical\n ? { marginTop: insetSize, marginBottom: insetSize }\n : { marginLeft: insetSize, marginRight: insetSize };\n\n const borderColorStyle = { borderColor };\n const borderWidthStyle = (vertical ? { borderRightWidth: borderWidth } : { borderBottomWidth: borderWidth });\n\n const containerStyle = css([\n insetStyle,\n marginStyle,\n styles.container,\n vertical ? styles.column : styles.row,\n childrenProp ? undefined : borderColorStyle,\n childrenProp ? undefined : borderWidthStyle,\n style,\n ]);\n\n const dividerStyle = css([\n borderColorStyle,\n borderWidthStyle,\n styles.divider,\n ]);\n\n const dividerMarginSize = theme.spacing(marginBetweenChildren);\n const startDividerStyle = vertical ? { marginBottom: dividerMarginSize } : { marginRight: dividerMarginSize };\n const endDividerStyle = vertical ? { marginTop: dividerMarginSize } : { marginLeft: dividerMarginSize };\n\n const fontStyle = createFontStyle(theme, {\n selector: (typo) => typo.caption2,\n color: fontColor,\n });\n\n const element = typeof childrenProp === 'string'\n ? <Text style={css(fontStyle)}>{childrenProp}</Text>\n : childrenProp;\n\n const children = childrenProp ? (\n <>\n <View style={css([dividerStyle, startDividerStyle])}/>\n {element}\n <View style={css([dividerStyle, endDividerStyle])}/>\n </>\n ) : null;\n\n return (\n <View\n style={containerStyle}\n {...otherProps}\n >\n {children}\n </View>\n );\n};\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["DividerProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { CommonComponentColor, OverridableComponentProps } from '../types';\n\nexport type DividerColor = 'divider' | CommonComponentColor;\n\nexport default interface DividerProps extends OverridableComponentProps<ViewProps, {\n /**\n * The content of the component.\n */\n children?: React.ReactNode;\n\n /**\n * The size of the inset. It works as a multiplier factor based on spacing system.\n * @default 0\n */\n inset?: number;\n\n /**\n * If `true`, the divider orientation is set to vertical.\n * @default false\n */\n vertical?: boolean;\n\n /**\n * The color of divider. It supports default divider color and those theme colors that make sense for this component.\n * @default 'divider'\n */\n color?: DividerColor;\n\n /**\n * The size of margin between child element and the divider. It works as a multiplier factor based on spacing system.\n * @default 2\n */\n marginBetweenChildren?: number;\n}> {}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"names":[],"sources":["DividerProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { CommonComponentColor, OverridableComponentProps } from '../types';\n\nexport type DividerColor = 'divider' | CommonComponentColor;\n\nexport default interface DividerProps extends OverridableComponentProps<ViewProps, {\n /**\n * The content of the component.\n */\n children?: React.ReactNode;\n\n /**\n * The size of the inset. It works as a multiplier factor based on spacing system.\n * @default 0\n */\n inset?: number;\n\n /**\n * If `true`, the divider orientation is set to vertical.\n * @default false\n */\n vertical?: boolean;\n\n /**\n * The color of divider. It supports default divider color and those theme colors that make sense for this component.\n * @default 'divider'\n */\n color?: DividerColor;\n\n /**\n * The size of margin between child element and the divider. It works as a multiplier factor based on spacing system.\n * @default 2\n */\n marginBetweenChildren?: number;\n\n /**\n * The size of border width. It works as an actual pixel-based border width value of a divider.\n * @default 1\n */\n borderWidth?: number;\n}> {}\n"],"mappings":""}
|
|
@@ -61,6 +61,13 @@ const TextField = /*#__PURE__*/_react.default.forwardRef(function TextField(prop
|
|
|
61
61
|
var _innerRef$current3;
|
|
62
62
|
|
|
63
63
|
(_innerRef$current3 = innerRef.current) === null || _innerRef$current3 === void 0 ? void 0 : _innerRef$current3.blur();
|
|
64
|
+
},
|
|
65
|
+
setStyle: style => {
|
|
66
|
+
var _innerRef$current4;
|
|
67
|
+
|
|
68
|
+
(_innerRef$current4 = innerRef.current) === null || _innerRef$current4 === void 0 ? void 0 : _innerRef$current4.setNativeProps({
|
|
69
|
+
style
|
|
70
|
+
});
|
|
64
71
|
}
|
|
65
72
|
}));
|
|
66
73
|
const animatedLabel = (0, _hooks.useAnimatedValue)(value ? 0 : 1);
|
|
@@ -153,9 +160,9 @@ const TextField = /*#__PURE__*/_react.default.forwardRef(function TextField(prop
|
|
|
153
160
|
};
|
|
154
161
|
|
|
155
162
|
const forceFocus = () => {
|
|
156
|
-
var _innerRef$
|
|
163
|
+
var _innerRef$current5;
|
|
157
164
|
|
|
158
|
-
(_innerRef$
|
|
165
|
+
(_innerRef$current5 = innerRef.current) === null || _innerRef$current5 === void 0 ? void 0 : _innerRef$current5.focus();
|
|
159
166
|
};
|
|
160
167
|
|
|
161
168
|
return /*#__PURE__*/_react.default.createElement(_OutlinedTextField.default, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["TextField","React","forwardRef","props","ref","disabled","error","keyboardType","icon","label","onBlur","onChangeText","onFocus","onIconPress","onSubmitEditing","placeholder","placeholderProp","secureTextEntry","value","style","styleProp","innerRef","useRef","useImperativeHandle","focus","current","isFocused","clear","blur","animatedLabel","useAnimatedValue","animatedError","focused","setFocused","useState","setPlaceholder","labelLayout","setLabelLayout","measured","width","height","minimizeLabel","Animated","timing","toValue","duration","blurAnimationDuration","useNativeDriver","start","restoreLabel","focusAnimationDuration","showError","hideError","showPlaceholder","hidePlaceholder","useEffect","handleFocus","event","handleBlur","css","opacity","handleLayoutAnimatedText","nativeEvent","layout","forceFocus"],"sources":["TextField.tsx"],"sourcesContent":["import React, { useImperativeHandle, useRef } from 'react';\nimport { Animated, LayoutChangeEvent, NativeSyntheticEvent, TargetedEvent, TextInput } from 'react-native';\nimport { css } from '../styles';\nimport { useAnimatedValue } from '../hooks';\nimport OutlinedTextField from './OutlinedTextField';\nimport TextFieldProps from './TextFieldProps';\nimport { blurAnimationDuration, focusAnimationDuration } from './utils';\n\nconst TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField(props, ref) {\n const {\n disabled = false,\n error = false,\n keyboardType = 'default',\n icon,\n label,\n onBlur,\n onChangeText,\n onFocus,\n onIconPress,\n onSubmitEditing,\n placeholder: placeholderProp,\n secureTextEntry = false,\n value,\n style: styleProp,\n } = props;\n\n const innerRef = useRef<TextInput | null>(null);\n //@ts-ignore\n useImperativeHandle(ref, () => ({\n focus: () => {\n innerRef.current?.focus();\n },\n isFocused: () => {\n const current = innerRef.current;\n return current ? current.isFocused() : false;\n },\n clear: () => {\n innerRef.current?.clear();\n },\n blur: () => {\n innerRef.current?.blur();\n },\n }));\n\n const animatedLabel = useAnimatedValue(value ? 0 : 1);\n const animatedError = useAnimatedValue(error ? 1 : 0);\n const [focused, setFocused] = React.useState(false);\n const [placeholder, setPlaceholder] = React.useState('');\n const [labelLayout, setLabelLayout] = React.useState({\n measured: false,\n width: 0,\n height: 0,\n });\n\n const minimizeLabel = () => {\n Animated.timing(animatedLabel, {\n toValue: 0,\n duration: blurAnimationDuration,\n useNativeDriver: false,\n }).start();\n };\n\n const restoreLabel = () => {\n Animated.timing(animatedLabel, {\n toValue: 1,\n duration: focusAnimationDuration,\n useNativeDriver: false,\n }).start();\n };\n\n const showError = () => {\n Animated.timing(animatedError, {\n toValue: 1,\n duration: focusAnimationDuration,\n useNativeDriver: false,\n }).start();\n };\n\n const hideError = () => {\n Animated.timing(animatedError, {\n toValue: 0,\n duration: blurAnimationDuration,\n useNativeDriver: false,\n }).start();\n };\n\n const showPlaceholder = () => {\n placeholderProp && setPlaceholder(placeholderProp);\n };\n\n const hidePlaceholder = () => setPlaceholder('');\n\n React.useEffect(() => {\n value || focused ? minimizeLabel() : restoreLabel();\n }, [focused, value, labelLayout]);\n\n React.useEffect(() => {\n animatedError ? showError() : hideError();\n }, [animatedError]);\n\n React.useEffect(() => {\n focused || !label ? showPlaceholder() : hidePlaceholder();\n }, [focused, label]);\n\n const handleFocus = (event: NativeSyntheticEvent<TargetedEvent>) => {\n if (disabled) {\n return;\n }\n\n setFocused(true);\n onFocus?.(event);\n };\n\n const handleBlur = (event: NativeSyntheticEvent<TargetedEvent>) => {\n setFocused(false);\n onBlur?.(event);\n };\n\n const style = css([\n { opacity: disabled ? 0.3 : 1 },\n styleProp,\n ]);\n\n const handleLayoutAnimatedText = (event: LayoutChangeEvent) => {\n setLabelLayout({\n width: event.nativeEvent.layout.width,\n height: event.nativeEvent.layout.height,\n measured: true,\n });\n };\n\n const forceFocus = () => {\n innerRef.current?.focus();\n };\n\n return (\n <OutlinedTextField\n animatedError={animatedError}\n animatedLabel={animatedLabel}\n disabled={disabled}\n error={error}\n focused={focused}\n forceFocus={forceFocus}\n icon={icon}\n keyboardType={keyboardType}\n label={label}\n labelLayout={labelLayout}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onChangeText={onChangeText}\n onIconPress={onIconPress}\n onLayoutAnimatedText={handleLayoutAnimatedText}\n onSubmitEditing={onSubmitEditing}\n placeholder={placeholder}\n ref={innerRef}\n secureTextEntry={secureTextEntry}\n style={style}\n value={value}\n />\n );\n});\n\nexport default TextField;\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA;;;;;;;;AAEA,MAAMA,SAAS,gBAAGC,cAAA,CAAMC,UAAN,CAA4C,SAASF,SAAT,CAAmBG,KAAnB,EAA0BC,GAA1B,EAA+B;EACzF,MAAM;IACFC,QAAQ,GAAG,KADT;IAEFC,KAAK,GAAG,KAFN;IAGFC,YAAY,GAAG,SAHb;IAIFC,IAJE;IAKFC,KALE;IAMFC,MANE;IAOFC,YAPE;IAQFC,OARE;IASFC,WATE;IAUFC,eAVE;IAWFC,WAAW,EAAEC,eAXX;IAYFC,eAAe,GAAG,KAZhB;IAaFC,KAbE;IAcFC,KAAK,EAAEC;EAdL,IAeFjB,KAfJ;EAiBA,MAAMkB,QAAQ,GAAG,IAAAC,aAAA,EAAyB,IAAzB,CAAjB,CAlByF,CAmBzF;;EACA,IAAAC,0BAAA,EAAoBnB,GAApB,EAAyB,OAAO;IAC5BoB,KAAK,EAAE,MAAM;MAAA;;MACT,qBAAAH,QAAQ,CAACI,OAAT,wEAAkBD,KAAlB;IACH,CAH2B;IAI5BE,SAAS,EAAE,MAAM;MACb,MAAMD,OAAO,GAAGJ,QAAQ,CAACI,OAAzB;MACA,OAAOA,OAAO,GAAGA,OAAO,CAACC,SAAR,EAAH,GAAyB,KAAvC;IACH,CAP2B;IAQ5BC,KAAK,EAAE,MAAM;MAAA;;MACT,sBAAAN,QAAQ,CAACI,OAAT,0EAAkBE,KAAlB;IACH,CAV2B;IAW5BC,IAAI,EAAE,MAAM;MAAA;;MACR,sBAAAP,QAAQ,CAACI,OAAT,0EAAkBG,IAAlB;IACH;
|
|
1
|
+
{"version":3,"names":["TextField","React","forwardRef","props","ref","disabled","error","keyboardType","icon","label","onBlur","onChangeText","onFocus","onIconPress","onSubmitEditing","placeholder","placeholderProp","secureTextEntry","value","style","styleProp","innerRef","useRef","useImperativeHandle","focus","current","isFocused","clear","blur","setStyle","setNativeProps","animatedLabel","useAnimatedValue","animatedError","focused","setFocused","useState","setPlaceholder","labelLayout","setLabelLayout","measured","width","height","minimizeLabel","Animated","timing","toValue","duration","blurAnimationDuration","useNativeDriver","start","restoreLabel","focusAnimationDuration","showError","hideError","showPlaceholder","hidePlaceholder","useEffect","handleFocus","event","handleBlur","css","opacity","handleLayoutAnimatedText","nativeEvent","layout","forceFocus"],"sources":["TextField.tsx"],"sourcesContent":["import React, { useImperativeHandle, useRef } from 'react';\nimport { Animated, LayoutChangeEvent, NativeSyntheticEvent, TargetedEvent, TextInput } from 'react-native';\nimport { css } from '../styles';\nimport { useAnimatedValue } from '../hooks';\nimport OutlinedTextField from './OutlinedTextField';\nimport TextFieldProps, { setStyleProp } from './TextFieldProps';\nimport { blurAnimationDuration, focusAnimationDuration } from './utils';\n\nconst TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField(props, ref) {\n const {\n disabled = false,\n error = false,\n keyboardType = 'default',\n icon,\n label,\n onBlur,\n onChangeText,\n onFocus,\n onIconPress,\n onSubmitEditing,\n placeholder: placeholderProp,\n secureTextEntry = false,\n value,\n style: styleProp,\n } = props;\n\n const innerRef = useRef<TextInput | null>(null);\n //@ts-ignore\n useImperativeHandle(ref, () => ({\n focus: () => {\n innerRef.current?.focus();\n },\n isFocused: () => {\n const current = innerRef.current;\n return current ? current.isFocused() : false;\n },\n clear: () => {\n innerRef.current?.clear();\n },\n blur: () => {\n innerRef.current?.blur();\n },\n setStyle: (style: setStyleProp) => {\n innerRef.current?.setNativeProps({\n style,\n });\n },\n }));\n\n const animatedLabel = useAnimatedValue(value ? 0 : 1);\n const animatedError = useAnimatedValue(error ? 1 : 0);\n const [focused, setFocused] = React.useState(false);\n const [placeholder, setPlaceholder] = React.useState('');\n const [labelLayout, setLabelLayout] = React.useState({\n measured: false,\n width: 0,\n height: 0,\n });\n\n const minimizeLabel = () => {\n Animated.timing(animatedLabel, {\n toValue: 0,\n duration: blurAnimationDuration,\n useNativeDriver: false,\n }).start();\n };\n\n const restoreLabel = () => {\n Animated.timing(animatedLabel, {\n toValue: 1,\n duration: focusAnimationDuration,\n useNativeDriver: false,\n }).start();\n };\n\n const showError = () => {\n Animated.timing(animatedError, {\n toValue: 1,\n duration: focusAnimationDuration,\n useNativeDriver: false,\n }).start();\n };\n\n const hideError = () => {\n Animated.timing(animatedError, {\n toValue: 0,\n duration: blurAnimationDuration,\n useNativeDriver: false,\n }).start();\n };\n\n const showPlaceholder = () => {\n placeholderProp && setPlaceholder(placeholderProp);\n };\n\n const hidePlaceholder = () => setPlaceholder('');\n\n React.useEffect(() => {\n value || focused ? minimizeLabel() : restoreLabel();\n }, [focused, value, labelLayout]);\n\n React.useEffect(() => {\n animatedError ? showError() : hideError();\n }, [animatedError]);\n\n React.useEffect(() => {\n focused || !label ? showPlaceholder() : hidePlaceholder();\n }, [focused, label]);\n\n const handleFocus = (event: NativeSyntheticEvent<TargetedEvent>) => {\n if (disabled) {\n return;\n }\n\n setFocused(true);\n onFocus?.(event);\n };\n\n const handleBlur = (event: NativeSyntheticEvent<TargetedEvent>) => {\n setFocused(false);\n onBlur?.(event);\n };\n\n const style = css([\n { opacity: disabled ? 0.3 : 1 },\n styleProp,\n ]);\n\n const handleLayoutAnimatedText = (event: LayoutChangeEvent) => {\n setLabelLayout({\n width: event.nativeEvent.layout.width,\n height: event.nativeEvent.layout.height,\n measured: true,\n });\n };\n\n const forceFocus = () => {\n innerRef.current?.focus();\n };\n\n return (\n <OutlinedTextField\n animatedError={animatedError}\n animatedLabel={animatedLabel}\n disabled={disabled}\n error={error}\n focused={focused}\n forceFocus={forceFocus}\n icon={icon}\n keyboardType={keyboardType}\n label={label}\n labelLayout={labelLayout}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onChangeText={onChangeText}\n onIconPress={onIconPress}\n onLayoutAnimatedText={handleLayoutAnimatedText}\n onSubmitEditing={onSubmitEditing}\n placeholder={placeholder}\n ref={innerRef}\n secureTextEntry={secureTextEntry}\n style={style}\n value={value}\n />\n );\n});\n\nexport default TextField;\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA;;;;;;;;AAEA,MAAMA,SAAS,gBAAGC,cAAA,CAAMC,UAAN,CAA4C,SAASF,SAAT,CAAmBG,KAAnB,EAA0BC,GAA1B,EAA+B;EACzF,MAAM;IACFC,QAAQ,GAAG,KADT;IAEFC,KAAK,GAAG,KAFN;IAGFC,YAAY,GAAG,SAHb;IAIFC,IAJE;IAKFC,KALE;IAMFC,MANE;IAOFC,YAPE;IAQFC,OARE;IASFC,WATE;IAUFC,eAVE;IAWFC,WAAW,EAAEC,eAXX;IAYFC,eAAe,GAAG,KAZhB;IAaFC,KAbE;IAcFC,KAAK,EAAEC;EAdL,IAeFjB,KAfJ;EAiBA,MAAMkB,QAAQ,GAAG,IAAAC,aAAA,EAAyB,IAAzB,CAAjB,CAlByF,CAmBzF;;EACA,IAAAC,0BAAA,EAAoBnB,GAApB,EAAyB,OAAO;IAC5BoB,KAAK,EAAE,MAAM;MAAA;;MACT,qBAAAH,QAAQ,CAACI,OAAT,wEAAkBD,KAAlB;IACH,CAH2B;IAI5BE,SAAS,EAAE,MAAM;MACb,MAAMD,OAAO,GAAGJ,QAAQ,CAACI,OAAzB;MACA,OAAOA,OAAO,GAAGA,OAAO,CAACC,SAAR,EAAH,GAAyB,KAAvC;IACH,CAP2B;IAQ5BC,KAAK,EAAE,MAAM;MAAA;;MACT,sBAAAN,QAAQ,CAACI,OAAT,0EAAkBE,KAAlB;IACH,CAV2B;IAW5BC,IAAI,EAAE,MAAM;MAAA;;MACR,sBAAAP,QAAQ,CAACI,OAAT,0EAAkBG,IAAlB;IACH,CAb2B;IAc5BC,QAAQ,EAAGV,KAAD,IAAyB;MAAA;;MAC/B,sBAAAE,QAAQ,CAACI,OAAT,0EAAkBK,cAAlB,CAAiC;QAC7BX;MAD6B,CAAjC;IAGH;EAlB2B,CAAP,CAAzB;EAqBA,MAAMY,aAAa,GAAG,IAAAC,uBAAA,EAAiBd,KAAK,GAAG,CAAH,GAAO,CAA7B,CAAtB;EACA,MAAMe,aAAa,GAAG,IAAAD,uBAAA,EAAiB1B,KAAK,GAAG,CAAH,GAAO,CAA7B,CAAtB;;EACA,MAAM,CAAC4B,OAAD,EAAUC,UAAV,IAAwBlC,cAAA,CAAMmC,QAAN,CAAe,KAAf,CAA9B;;EACA,MAAM,CAACrB,WAAD,EAAcsB,cAAd,IAAgCpC,cAAA,CAAMmC,QAAN,CAAe,EAAf,CAAtC;;EACA,MAAM,CAACE,WAAD,EAAcC,cAAd,IAAgCtC,cAAA,CAAMmC,QAAN,CAAe;IACjDI,QAAQ,EAAE,KADuC;IAEjDC,KAAK,EAAE,CAF0C;IAGjDC,MAAM,EAAE;EAHyC,CAAf,CAAtC;;EAMA,MAAMC,aAAa,GAAG,MAAM;IACxBC,qBAAA,CAASC,MAAT,CAAgBd,aAAhB,EAA+B;MAC3Be,OAAO,EAAE,CADkB;MAE3BC,QAAQ,EAAEC,4BAFiB;MAG3BC,eAAe,EAAE;IAHU,CAA/B,EAIGC,KAJH;EAKH,CAND;;EAQA,MAAMC,YAAY,GAAG,MAAM;IACvBP,qBAAA,CAASC,MAAT,CAAgBd,aAAhB,EAA+B;MAC3Be,OAAO,EAAE,CADkB;MAE3BC,QAAQ,EAAEK,6BAFiB;MAG3BH,eAAe,EAAE;IAHU,CAA/B,EAIGC,KAJH;EAKH,CAND;;EAQA,MAAMG,SAAS,GAAG,MAAM;IACpBT,qBAAA,CAASC,MAAT,CAAgBZ,aAAhB,EAA+B;MAC3Ba,OAAO,EAAE,CADkB;MAE3BC,QAAQ,EAAEK,6BAFiB;MAG3BH,eAAe,EAAE;IAHU,CAA/B,EAIGC,KAJH;EAKH,CAND;;EAQA,MAAMI,SAAS,GAAG,MAAM;IACpBV,qBAAA,CAASC,MAAT,CAAgBZ,aAAhB,EAA+B;MAC3Ba,OAAO,EAAE,CADkB;MAE3BC,QAAQ,EAAEC,4BAFiB;MAG3BC,eAAe,EAAE;IAHU,CAA/B,EAIGC,KAJH;EAKH,CAND;;EAQA,MAAMK,eAAe,GAAG,MAAM;IAC1BvC,eAAe,IAAIqB,cAAc,CAACrB,eAAD,CAAjC;EACH,CAFD;;EAIA,MAAMwC,eAAe,GAAG,MAAMnB,cAAc,CAAC,EAAD,CAA5C;;EAEApC,cAAA,CAAMwD,SAAN,CAAgB,MAAM;IAClBvC,KAAK,IAAIgB,OAAT,GAAmBS,aAAa,EAAhC,GAAqCQ,YAAY,EAAjD;EACH,CAFD,EAEG,CAACjB,OAAD,EAAUhB,KAAV,EAAiBoB,WAAjB,CAFH;;EAIArC,cAAA,CAAMwD,SAAN,CAAgB,MAAM;IAClBxB,aAAa,GAAGoB,SAAS,EAAZ,GAAiBC,SAAS,EAAvC;EACH,CAFD,EAEG,CAACrB,aAAD,CAFH;;EAIAhC,cAAA,CAAMwD,SAAN,CAAgB,MAAM;IAClBvB,OAAO,IAAI,CAACzB,KAAZ,GAAoB8C,eAAe,EAAnC,GAAwCC,eAAe,EAAvD;EACH,CAFD,EAEG,CAACtB,OAAD,EAAUzB,KAAV,CAFH;;EAIA,MAAMiD,WAAW,GAAIC,KAAD,IAAgD;IAChE,IAAItD,QAAJ,EAAc;MACV;IACH;;IAED8B,UAAU,CAAC,IAAD,CAAV;IACAvB,OAAO,SAAP,IAAAA,OAAO,WAAP,YAAAA,OAAO,CAAG+C,KAAH,CAAP;EACH,CAPD;;EASA,MAAMC,UAAU,GAAID,KAAD,IAAgD;IAC/DxB,UAAU,CAAC,KAAD,CAAV;IACAzB,MAAM,SAAN,IAAAA,MAAM,WAAN,YAAAA,MAAM,CAAGiD,KAAH,CAAN;EACH,CAHD;;EAKA,MAAMxC,KAAK,GAAG,IAAA0C,WAAA,EAAI,CACd;IAAEC,OAAO,EAAEzD,QAAQ,GAAG,GAAH,GAAS;EAA5B,CADc,EAEde,SAFc,CAAJ,CAAd;;EAKA,MAAM2C,wBAAwB,GAAIJ,KAAD,IAA8B;IAC3DpB,cAAc,CAAC;MACXE,KAAK,EAAEkB,KAAK,CAACK,WAAN,CAAkBC,MAAlB,CAAyBxB,KADrB;MAEXC,MAAM,EAAEiB,KAAK,CAACK,WAAN,CAAkBC,MAAlB,CAAyBvB,MAFtB;MAGXF,QAAQ,EAAE;IAHC,CAAD,CAAd;EAKH,CAND;;EAQA,MAAM0B,UAAU,GAAG,MAAM;IAAA;;IACrB,sBAAA7C,QAAQ,CAACI,OAAT,0EAAkBD,KAAlB;EACH,CAFD;;EAIA,oBACI,6BAAC,0BAAD;IACI,aAAa,EAAES,aADnB;IAEI,aAAa,EAAEF,aAFnB;IAGI,QAAQ,EAAE1B,QAHd;IAII,KAAK,EAAEC,KAJX;IAKI,OAAO,EAAE4B,OALb;IAMI,UAAU,EAAEgC,UANhB;IAOI,IAAI,EAAE1D,IAPV;IAQI,YAAY,EAAED,YARlB;IASI,KAAK,EAAEE,KATX;IAUI,WAAW,EAAE6B,WAVjB;IAWI,OAAO,EAAEoB,WAXb;IAYI,MAAM,EAAEE,UAZZ;IAaI,YAAY,EAAEjD,YAblB;IAcI,WAAW,EAAEE,WAdjB;IAeI,oBAAoB,EAAEkD,wBAf1B;IAgBI,eAAe,EAAEjD,eAhBrB;IAiBI,WAAW,EAAEC,WAjBjB;IAkBI,GAAG,EAAEM,QAlBT;IAmBI,eAAe,EAAEJ,eAnBrB;IAoBI,KAAK,EAAEE,KApBX;IAqBI,KAAK,EAAED;EArBX,EADJ;AAyBH,CA7JiB,CAAlB;;eA+JelB,S"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["TextFieldProps.ts"],"sourcesContent":["import React from 'react';\nimport { NativeSyntheticEvent, TargetedEvent } from 'react-native';\nimport { ComponentProps } from '../types';\n\ntype TextFieldKeyboardType = 'default' | 'numeric' | 'email-address';\n\nexport default interface TextFieldProps extends ComponentProps<{\n /**\n * If true, user won't be able to interact with the component.\n * @default false\n */\n disabled?: boolean;\n\n /**\n * Whether to style the TextField with error style.\n * @default false\n */\n error?: boolean,\n\n /**\n * It is an icon placed to the right of the TextField.\n */\n icon?: React.ReactElement;\n\n /**\n * User can specify the keyboard type.\n * @default 'default'\n */\n keyboardType?: TextFieldKeyboardType;\n\n /**\n * The text to use for the floating label.\n */\n label?: string;\n\n /**\n * Callback that is called when the textField is blurred.\n */\n onBlur?: (event: NativeSyntheticEvent<TargetedEvent>) => void,\n\n /**\n * Callback that is called when the textField's text changes.\n */\n onChangeText?: (value: string) => void,\n\n /**\n * Callback that is called when the textField is focused.\n */\n onFocus?: (event: NativeSyntheticEvent<TargetedEvent>) => void,\n\n /**\n * Callback that is called when icon pressed.\n */\n onIconPress?: () => void;\n\n /**\n * Callback that is called when enter or submit key pressed.\n */\n onSubmitEditing?: () => void\n\n /**\n * Placeholder for textField.\n */\n placeholder?: string;\n\n /**\n * If true, the text input obscures the text entered so that sensitive text like passwords stay secure.\n * @default false\n */\n secureTextEntry?: boolean;\n\n /**\n * Value of the textField.\n */\n value?: string;\n}> {}"],"mappings":""}
|
|
1
|
+
{"version":3,"names":[],"sources":["TextFieldProps.ts"],"sourcesContent":["import React from 'react';\nimport { NativeSyntheticEvent, TargetedEvent } from 'react-native';\nimport { ComponentProps } from '../types';\n\ntype TextFieldKeyboardType = 'default' | 'numeric' | 'email-address';\n\nexport interface setStyleProp {\n fontFamily: string;\n}\n\nexport default interface TextFieldProps extends ComponentProps<{\n /**\n * If true, user won't be able to interact with the component.\n * @default false\n */\n disabled?: boolean;\n\n /**\n * Whether to style the TextField with error style.\n * @default false\n */\n error?: boolean,\n\n /**\n * It is an icon placed to the right of the TextField.\n */\n icon?: React.ReactElement;\n\n /**\n * User can specify the keyboard type.\n * @default 'default'\n */\n keyboardType?: TextFieldKeyboardType;\n\n /**\n * The text to use for the floating label.\n */\n label?: string;\n\n /**\n * Callback that is called when the textField is blurred.\n */\n onBlur?: (event: NativeSyntheticEvent<TargetedEvent>) => void,\n\n /**\n * Callback that is called when the textField's text changes.\n */\n onChangeText?: (value: string) => void,\n\n /**\n * Callback that is called when the textField is focused.\n */\n onFocus?: (event: NativeSyntheticEvent<TargetedEvent>) => void,\n\n /**\n * Callback that is called when icon pressed.\n */\n onIconPress?: () => void;\n\n /**\n * Callback that is called when enter or submit key pressed.\n */\n onSubmitEditing?: () => void\n\n /**\n * Placeholder for textField.\n */\n placeholder?: string;\n\n /**\n * If true, the text input obscures the text entered so that sensitive text like passwords stay secure.\n * @default false\n */\n secureTextEntry?: boolean;\n\n /**\n * Value of the textField.\n */\n value?: string;\n}> {}"],"mappings":""}
|
|
@@ -16,16 +16,11 @@ const styles = StyleSheet.create({
|
|
|
16
16
|
},
|
|
17
17
|
divider: {
|
|
18
18
|
flexGrow: 1
|
|
19
|
-
},
|
|
20
|
-
borderBottom: {
|
|
21
|
-
borderBottomWidth: 1
|
|
22
|
-
},
|
|
23
|
-
borderRight: {
|
|
24
|
-
borderRightWidth: 1
|
|
25
19
|
}
|
|
26
20
|
});
|
|
27
21
|
export default function Divider(props) {
|
|
28
22
|
const {
|
|
23
|
+
borderWidth = 1,
|
|
29
24
|
children: childrenProp,
|
|
30
25
|
color = 'divider',
|
|
31
26
|
inset = 0,
|
|
@@ -60,7 +55,11 @@ export default function Divider(props) {
|
|
|
60
55
|
const borderColorStyle = {
|
|
61
56
|
borderColor
|
|
62
57
|
};
|
|
63
|
-
const borderWidthStyle = vertical ?
|
|
58
|
+
const borderWidthStyle = vertical ? {
|
|
59
|
+
borderRightWidth: borderWidth
|
|
60
|
+
} : {
|
|
61
|
+
borderBottomWidth: borderWidth
|
|
62
|
+
};
|
|
64
63
|
const containerStyle = css([insetStyle, marginStyle, styles.container, vertical ? styles.column : styles.row, childrenProp ? undefined : borderColorStyle, childrenProp ? undefined : borderWidthStyle, style]);
|
|
65
64
|
const dividerStyle = css([borderColorStyle, borderWidthStyle, styles.divider]);
|
|
66
65
|
const dividerMarginSize = theme.spacing(marginBetweenChildren);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","Text","View","createFontStyle","css","StyleSheet","useTheme","styles","create","container","alignSelf","alignItems","row","flexDirection","column","divider","flexGrow","
|
|
1
|
+
{"version":3,"names":["React","Text","View","createFontStyle","css","StyleSheet","useTheme","styles","create","container","alignSelf","alignItems","row","flexDirection","column","divider","flexGrow","Divider","props","borderWidth","children","childrenProp","color","inset","marginBetweenChildren","style","vertical","otherProps","theme","fontColor","palette","text","secondary","borderColor","main","marginSize","spacing","insetSize","marginLeft","marginRight","marginTop","marginBottom","marginStyle","insetStyle","borderColorStyle","borderWidthStyle","borderRightWidth","borderBottomWidth","containerStyle","undefined","dividerStyle","dividerMarginSize","startDividerStyle","endDividerStyle","fontStyle","selector","typo","caption2","element"],"sources":["Divider.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, View } from 'react-native';\nimport { createFontStyle, css, StyleSheet, useTheme } from '../styles';\nimport type DividerProps from './DividerProps';\n\nconst styles = StyleSheet.create({\n container: {\n alignSelf: 'stretch',\n alignItems: 'center',\n },\n row: {\n flexDirection: 'row',\n },\n column: {\n flexDirection: 'column',\n },\n divider: {\n flexGrow: 1,\n },\n});\n\nexport default function Divider(props: DividerProps) {\n const {\n borderWidth = 1,\n children: childrenProp,\n color = 'divider',\n inset = 0,\n marginBetweenChildren = 2,\n style,\n vertical = false,\n ...otherProps\n } = props;\n\n const theme = useTheme();\n\n const fontColor = theme.palette.text.secondary;\n const borderColor = color === 'divider'\n ? theme.palette.divider\n : theme.palette[color].main;\n const marginSize = theme.spacing(1);\n const insetSize = theme.spacing(inset);\n\n const marginLeft = marginSize;\n const marginRight = marginSize;\n const marginTop = marginSize;\n const marginBottom = marginSize;\n\n const marginStyle = vertical\n ? { marginLeft, marginRight }\n : { marginTop, marginBottom };\n\n const insetStyle = vertical\n ? { marginTop: insetSize, marginBottom: insetSize }\n : { marginLeft: insetSize, marginRight: insetSize };\n\n const borderColorStyle = { borderColor };\n const borderWidthStyle = (vertical ? { borderRightWidth: borderWidth } : { borderBottomWidth: borderWidth });\n\n const containerStyle = css([\n insetStyle,\n marginStyle,\n styles.container,\n vertical ? styles.column : styles.row,\n childrenProp ? undefined : borderColorStyle,\n childrenProp ? undefined : borderWidthStyle,\n style,\n ]);\n\n const dividerStyle = css([\n borderColorStyle,\n borderWidthStyle,\n styles.divider,\n ]);\n\n const dividerMarginSize = theme.spacing(marginBetweenChildren);\n const startDividerStyle = vertical ? { marginBottom: dividerMarginSize } : { marginRight: dividerMarginSize };\n const endDividerStyle = vertical ? { marginTop: dividerMarginSize } : { marginLeft: dividerMarginSize };\n\n const fontStyle = createFontStyle(theme, {\n selector: (typo) => typo.caption2,\n color: fontColor,\n });\n\n const element = typeof childrenProp === 'string'\n ? <Text style={css(fontStyle)}>{childrenProp}</Text>\n : childrenProp;\n\n const children = childrenProp ? (\n <>\n <View style={css([dividerStyle, startDividerStyle])}/>\n {element}\n <View style={css([dividerStyle, endDividerStyle])}/>\n </>\n ) : null;\n\n return (\n <View\n style={containerStyle}\n {...otherProps}\n >\n {children}\n </View>\n );\n};\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["DividerProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { CommonComponentColor, OverridableComponentProps } from '../types';\n\nexport type DividerColor = 'divider' | CommonComponentColor;\n\nexport default interface DividerProps extends OverridableComponentProps<ViewProps, {\n /**\n * The content of the component.\n */\n children?: React.ReactNode;\n\n /**\n * The size of the inset. It works as a multiplier factor based on spacing system.\n * @default 0\n */\n inset?: number;\n\n /**\n * If `true`, the divider orientation is set to vertical.\n * @default false\n */\n vertical?: boolean;\n\n /**\n * The color of divider. It supports default divider color and those theme colors that make sense for this component.\n * @default 'divider'\n */\n color?: DividerColor;\n\n /**\n * The size of margin between child element and the divider. It works as a multiplier factor based on spacing system.\n * @default 2\n */\n marginBetweenChildren?: number;\n}> {}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"names":[],"sources":["DividerProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { CommonComponentColor, OverridableComponentProps } from '../types';\n\nexport type DividerColor = 'divider' | CommonComponentColor;\n\nexport default interface DividerProps extends OverridableComponentProps<ViewProps, {\n /**\n * The content of the component.\n */\n children?: React.ReactNode;\n\n /**\n * The size of the inset. It works as a multiplier factor based on spacing system.\n * @default 0\n */\n inset?: number;\n\n /**\n * If `true`, the divider orientation is set to vertical.\n * @default false\n */\n vertical?: boolean;\n\n /**\n * The color of divider. It supports default divider color and those theme colors that make sense for this component.\n * @default 'divider'\n */\n color?: DividerColor;\n\n /**\n * The size of margin between child element and the divider. It works as a multiplier factor based on spacing system.\n * @default 2\n */\n marginBetweenChildren?: number;\n\n /**\n * The size of border width. It works as an actual pixel-based border width value of a divider.\n * @default 1\n */\n borderWidth?: number;\n}> {}\n"],"mappings":""}
|
|
@@ -42,6 +42,13 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(props, ref) {
|
|
|
42
42
|
var _innerRef$current3;
|
|
43
43
|
|
|
44
44
|
(_innerRef$current3 = innerRef.current) === null || _innerRef$current3 === void 0 ? void 0 : _innerRef$current3.blur();
|
|
45
|
+
},
|
|
46
|
+
setStyle: style => {
|
|
47
|
+
var _innerRef$current4;
|
|
48
|
+
|
|
49
|
+
(_innerRef$current4 = innerRef.current) === null || _innerRef$current4 === void 0 ? void 0 : _innerRef$current4.setNativeProps({
|
|
50
|
+
style
|
|
51
|
+
});
|
|
45
52
|
}
|
|
46
53
|
}));
|
|
47
54
|
const animatedLabel = useAnimatedValue(value ? 0 : 1);
|
|
@@ -129,9 +136,9 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(props, ref) {
|
|
|
129
136
|
};
|
|
130
137
|
|
|
131
138
|
const forceFocus = () => {
|
|
132
|
-
var _innerRef$
|
|
139
|
+
var _innerRef$current5;
|
|
133
140
|
|
|
134
|
-
(_innerRef$
|
|
141
|
+
(_innerRef$current5 = innerRef.current) === null || _innerRef$current5 === void 0 ? void 0 : _innerRef$current5.focus();
|
|
135
142
|
};
|
|
136
143
|
|
|
137
144
|
return /*#__PURE__*/React.createElement(OutlinedTextField, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useImperativeHandle","useRef","Animated","css","useAnimatedValue","OutlinedTextField","blurAnimationDuration","focusAnimationDuration","TextField","forwardRef","props","ref","disabled","error","keyboardType","icon","label","onBlur","onChangeText","onFocus","onIconPress","onSubmitEditing","placeholder","placeholderProp","secureTextEntry","value","style","styleProp","innerRef","focus","current","isFocused","clear","blur","animatedLabel","animatedError","focused","setFocused","useState","setPlaceholder","labelLayout","setLabelLayout","measured","width","height","minimizeLabel","timing","toValue","duration","useNativeDriver","start","restoreLabel","showError","hideError","showPlaceholder","hidePlaceholder","useEffect","handleFocus","event","handleBlur","opacity","handleLayoutAnimatedText","nativeEvent","layout","forceFocus"],"sources":["TextField.tsx"],"sourcesContent":["import React, { useImperativeHandle, useRef } from 'react';\nimport { Animated, LayoutChangeEvent, NativeSyntheticEvent, TargetedEvent, TextInput } from 'react-native';\nimport { css } from '../styles';\nimport { useAnimatedValue } from '../hooks';\nimport OutlinedTextField from './OutlinedTextField';\nimport TextFieldProps from './TextFieldProps';\nimport { blurAnimationDuration, focusAnimationDuration } from './utils';\n\nconst TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField(props, ref) {\n const {\n disabled = false,\n error = false,\n keyboardType = 'default',\n icon,\n label,\n onBlur,\n onChangeText,\n onFocus,\n onIconPress,\n onSubmitEditing,\n placeholder: placeholderProp,\n secureTextEntry = false,\n value,\n style: styleProp,\n } = props;\n\n const innerRef = useRef<TextInput | null>(null);\n //@ts-ignore\n useImperativeHandle(ref, () => ({\n focus: () => {\n innerRef.current?.focus();\n },\n isFocused: () => {\n const current = innerRef.current;\n return current ? current.isFocused() : false;\n },\n clear: () => {\n innerRef.current?.clear();\n },\n blur: () => {\n innerRef.current?.blur();\n },\n }));\n\n const animatedLabel = useAnimatedValue(value ? 0 : 1);\n const animatedError = useAnimatedValue(error ? 1 : 0);\n const [focused, setFocused] = React.useState(false);\n const [placeholder, setPlaceholder] = React.useState('');\n const [labelLayout, setLabelLayout] = React.useState({\n measured: false,\n width: 0,\n height: 0,\n });\n\n const minimizeLabel = () => {\n Animated.timing(animatedLabel, {\n toValue: 0,\n duration: blurAnimationDuration,\n useNativeDriver: false,\n }).start();\n };\n\n const restoreLabel = () => {\n Animated.timing(animatedLabel, {\n toValue: 1,\n duration: focusAnimationDuration,\n useNativeDriver: false,\n }).start();\n };\n\n const showError = () => {\n Animated.timing(animatedError, {\n toValue: 1,\n duration: focusAnimationDuration,\n useNativeDriver: false,\n }).start();\n };\n\n const hideError = () => {\n Animated.timing(animatedError, {\n toValue: 0,\n duration: blurAnimationDuration,\n useNativeDriver: false,\n }).start();\n };\n\n const showPlaceholder = () => {\n placeholderProp && setPlaceholder(placeholderProp);\n };\n\n const hidePlaceholder = () => setPlaceholder('');\n\n React.useEffect(() => {\n value || focused ? minimizeLabel() : restoreLabel();\n }, [focused, value, labelLayout]);\n\n React.useEffect(() => {\n animatedError ? showError() : hideError();\n }, [animatedError]);\n\n React.useEffect(() => {\n focused || !label ? showPlaceholder() : hidePlaceholder();\n }, [focused, label]);\n\n const handleFocus = (event: NativeSyntheticEvent<TargetedEvent>) => {\n if (disabled) {\n return;\n }\n\n setFocused(true);\n onFocus?.(event);\n };\n\n const handleBlur = (event: NativeSyntheticEvent<TargetedEvent>) => {\n setFocused(false);\n onBlur?.(event);\n };\n\n const style = css([\n { opacity: disabled ? 0.3 : 1 },\n styleProp,\n ]);\n\n const handleLayoutAnimatedText = (event: LayoutChangeEvent) => {\n setLabelLayout({\n width: event.nativeEvent.layout.width,\n height: event.nativeEvent.layout.height,\n measured: true,\n });\n };\n\n const forceFocus = () => {\n innerRef.current?.focus();\n };\n\n return (\n <OutlinedTextField\n animatedError={animatedError}\n animatedLabel={animatedLabel}\n disabled={disabled}\n error={error}\n focused={focused}\n forceFocus={forceFocus}\n icon={icon}\n keyboardType={keyboardType}\n label={label}\n labelLayout={labelLayout}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onChangeText={onChangeText}\n onIconPress={onIconPress}\n onLayoutAnimatedText={handleLayoutAnimatedText}\n onSubmitEditing={onSubmitEditing}\n placeholder={placeholder}\n ref={innerRef}\n secureTextEntry={secureTextEntry}\n style={style}\n value={value}\n />\n );\n});\n\nexport default TextField;\n"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,mBAAhB,EAAqCC,MAArC,QAAmD,OAAnD;AACA,SAASC,QAAT,QAA4F,cAA5F;AACA,SAASC,GAAT,QAAoB,WAApB;AACA,SAASC,gBAAT,QAAiC,UAAjC;AACA,OAAOC,iBAAP,MAA8B,qBAA9B;AAEA,SAASC,qBAAT,EAAgCC,sBAAhC,QAA8D,SAA9D;AAEA,MAAMC,SAAS,gBAAGT,KAAK,CAACU,UAAN,CAA4C,SAASD,SAAT,CAAmBE,KAAnB,EAA0BC,GAA1B,EAA+B;EACzF,MAAM;IACFC,QAAQ,GAAG,KADT;IAEFC,KAAK,GAAG,KAFN;IAGFC,YAAY,GAAG,SAHb;IAIFC,IAJE;IAKFC,KALE;IAMFC,MANE;IAOFC,YAPE;IAQFC,OARE;IASFC,WATE;IAUFC,eAVE;IAWFC,WAAW,EAAEC,eAXX;IAYFC,eAAe,GAAG,KAZhB;IAaFC,KAbE;IAcFC,KAAK,EAAEC;EAdL,IAeFjB,KAfJ;EAiBA,MAAMkB,QAAQ,GAAG3B,MAAM,CAAmB,IAAnB,CAAvB,CAlByF,CAmBzF;;EACAD,mBAAmB,CAACW,GAAD,EAAM,OAAO;IAC5BkB,KAAK,EAAE,MAAM;MAAA;;MACT,qBAAAD,QAAQ,CAACE,OAAT,wEAAkBD,KAAlB;IACH,CAH2B;IAI5BE,SAAS,EAAE,MAAM;MACb,MAAMD,OAAO,GAAGF,QAAQ,CAACE,OAAzB;MACA,OAAOA,OAAO,GAAGA,OAAO,CAACC,SAAR,EAAH,GAAyB,KAAvC;IACH,CAP2B;IAQ5BC,KAAK,EAAE,MAAM;MAAA;;MACT,sBAAAJ,QAAQ,CAACE,OAAT,0EAAkBE,KAAlB;IACH,CAV2B;IAW5BC,IAAI,EAAE,MAAM;MAAA;;MACR,sBAAAL,QAAQ,CAACE,OAAT,0EAAkBG,IAAlB;IACH;
|
|
1
|
+
{"version":3,"names":["React","useImperativeHandle","useRef","Animated","css","useAnimatedValue","OutlinedTextField","blurAnimationDuration","focusAnimationDuration","TextField","forwardRef","props","ref","disabled","error","keyboardType","icon","label","onBlur","onChangeText","onFocus","onIconPress","onSubmitEditing","placeholder","placeholderProp","secureTextEntry","value","style","styleProp","innerRef","focus","current","isFocused","clear","blur","setStyle","setNativeProps","animatedLabel","animatedError","focused","setFocused","useState","setPlaceholder","labelLayout","setLabelLayout","measured","width","height","minimizeLabel","timing","toValue","duration","useNativeDriver","start","restoreLabel","showError","hideError","showPlaceholder","hidePlaceholder","useEffect","handleFocus","event","handleBlur","opacity","handleLayoutAnimatedText","nativeEvent","layout","forceFocus"],"sources":["TextField.tsx"],"sourcesContent":["import React, { useImperativeHandle, useRef } from 'react';\nimport { Animated, LayoutChangeEvent, NativeSyntheticEvent, TargetedEvent, TextInput } from 'react-native';\nimport { css } from '../styles';\nimport { useAnimatedValue } from '../hooks';\nimport OutlinedTextField from './OutlinedTextField';\nimport TextFieldProps, { setStyleProp } from './TextFieldProps';\nimport { blurAnimationDuration, focusAnimationDuration } from './utils';\n\nconst TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField(props, ref) {\n const {\n disabled = false,\n error = false,\n keyboardType = 'default',\n icon,\n label,\n onBlur,\n onChangeText,\n onFocus,\n onIconPress,\n onSubmitEditing,\n placeholder: placeholderProp,\n secureTextEntry = false,\n value,\n style: styleProp,\n } = props;\n\n const innerRef = useRef<TextInput | null>(null);\n //@ts-ignore\n useImperativeHandle(ref, () => ({\n focus: () => {\n innerRef.current?.focus();\n },\n isFocused: () => {\n const current = innerRef.current;\n return current ? current.isFocused() : false;\n },\n clear: () => {\n innerRef.current?.clear();\n },\n blur: () => {\n innerRef.current?.blur();\n },\n setStyle: (style: setStyleProp) => {\n innerRef.current?.setNativeProps({\n style,\n });\n },\n }));\n\n const animatedLabel = useAnimatedValue(value ? 0 : 1);\n const animatedError = useAnimatedValue(error ? 1 : 0);\n const [focused, setFocused] = React.useState(false);\n const [placeholder, setPlaceholder] = React.useState('');\n const [labelLayout, setLabelLayout] = React.useState({\n measured: false,\n width: 0,\n height: 0,\n });\n\n const minimizeLabel = () => {\n Animated.timing(animatedLabel, {\n toValue: 0,\n duration: blurAnimationDuration,\n useNativeDriver: false,\n }).start();\n };\n\n const restoreLabel = () => {\n Animated.timing(animatedLabel, {\n toValue: 1,\n duration: focusAnimationDuration,\n useNativeDriver: false,\n }).start();\n };\n\n const showError = () => {\n Animated.timing(animatedError, {\n toValue: 1,\n duration: focusAnimationDuration,\n useNativeDriver: false,\n }).start();\n };\n\n const hideError = () => {\n Animated.timing(animatedError, {\n toValue: 0,\n duration: blurAnimationDuration,\n useNativeDriver: false,\n }).start();\n };\n\n const showPlaceholder = () => {\n placeholderProp && setPlaceholder(placeholderProp);\n };\n\n const hidePlaceholder = () => setPlaceholder('');\n\n React.useEffect(() => {\n value || focused ? minimizeLabel() : restoreLabel();\n }, [focused, value, labelLayout]);\n\n React.useEffect(() => {\n animatedError ? showError() : hideError();\n }, [animatedError]);\n\n React.useEffect(() => {\n focused || !label ? showPlaceholder() : hidePlaceholder();\n }, [focused, label]);\n\n const handleFocus = (event: NativeSyntheticEvent<TargetedEvent>) => {\n if (disabled) {\n return;\n }\n\n setFocused(true);\n onFocus?.(event);\n };\n\n const handleBlur = (event: NativeSyntheticEvent<TargetedEvent>) => {\n setFocused(false);\n onBlur?.(event);\n };\n\n const style = css([\n { opacity: disabled ? 0.3 : 1 },\n styleProp,\n ]);\n\n const handleLayoutAnimatedText = (event: LayoutChangeEvent) => {\n setLabelLayout({\n width: event.nativeEvent.layout.width,\n height: event.nativeEvent.layout.height,\n measured: true,\n });\n };\n\n const forceFocus = () => {\n innerRef.current?.focus();\n };\n\n return (\n <OutlinedTextField\n animatedError={animatedError}\n animatedLabel={animatedLabel}\n disabled={disabled}\n error={error}\n focused={focused}\n forceFocus={forceFocus}\n icon={icon}\n keyboardType={keyboardType}\n label={label}\n labelLayout={labelLayout}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onChangeText={onChangeText}\n onIconPress={onIconPress}\n onLayoutAnimatedText={handleLayoutAnimatedText}\n onSubmitEditing={onSubmitEditing}\n placeholder={placeholder}\n ref={innerRef}\n secureTextEntry={secureTextEntry}\n style={style}\n value={value}\n />\n );\n});\n\nexport default TextField;\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["TextFieldProps.ts"],"sourcesContent":["import React from 'react';\nimport { NativeSyntheticEvent, TargetedEvent } from 'react-native';\nimport { ComponentProps } from '../types';\n\ntype TextFieldKeyboardType = 'default' | 'numeric' | 'email-address';\n\nexport default interface TextFieldProps extends ComponentProps<{\n /**\n * If true, user won't be able to interact with the component.\n * @default false\n */\n disabled?: boolean;\n\n /**\n * Whether to style the TextField with error style.\n * @default false\n */\n error?: boolean,\n\n /**\n * It is an icon placed to the right of the TextField.\n */\n icon?: React.ReactElement;\n\n /**\n * User can specify the keyboard type.\n * @default 'default'\n */\n keyboardType?: TextFieldKeyboardType;\n\n /**\n * The text to use for the floating label.\n */\n label?: string;\n\n /**\n * Callback that is called when the textField is blurred.\n */\n onBlur?: (event: NativeSyntheticEvent<TargetedEvent>) => void,\n\n /**\n * Callback that is called when the textField's text changes.\n */\n onChangeText?: (value: string) => void,\n\n /**\n * Callback that is called when the textField is focused.\n */\n onFocus?: (event: NativeSyntheticEvent<TargetedEvent>) => void,\n\n /**\n * Callback that is called when icon pressed.\n */\n onIconPress?: () => void;\n\n /**\n * Callback that is called when enter or submit key pressed.\n */\n onSubmitEditing?: () => void\n\n /**\n * Placeholder for textField.\n */\n placeholder?: string;\n\n /**\n * If true, the text input obscures the text entered so that sensitive text like passwords stay secure.\n * @default false\n */\n secureTextEntry?: boolean;\n\n /**\n * Value of the textField.\n */\n value?: string;\n}> {}"],"mappings":""}
|
|
1
|
+
{"version":3,"names":[],"sources":["TextFieldProps.ts"],"sourcesContent":["import React from 'react';\nimport { NativeSyntheticEvent, TargetedEvent } from 'react-native';\nimport { ComponentProps } from '../types';\n\ntype TextFieldKeyboardType = 'default' | 'numeric' | 'email-address';\n\nexport interface setStyleProp {\n fontFamily: string;\n}\n\nexport default interface TextFieldProps extends ComponentProps<{\n /**\n * If true, user won't be able to interact with the component.\n * @default false\n */\n disabled?: boolean;\n\n /**\n * Whether to style the TextField with error style.\n * @default false\n */\n error?: boolean,\n\n /**\n * It is an icon placed to the right of the TextField.\n */\n icon?: React.ReactElement;\n\n /**\n * User can specify the keyboard type.\n * @default 'default'\n */\n keyboardType?: TextFieldKeyboardType;\n\n /**\n * The text to use for the floating label.\n */\n label?: string;\n\n /**\n * Callback that is called when the textField is blurred.\n */\n onBlur?: (event: NativeSyntheticEvent<TargetedEvent>) => void,\n\n /**\n * Callback that is called when the textField's text changes.\n */\n onChangeText?: (value: string) => void,\n\n /**\n * Callback that is called when the textField is focused.\n */\n onFocus?: (event: NativeSyntheticEvent<TargetedEvent>) => void,\n\n /**\n * Callback that is called when icon pressed.\n */\n onIconPress?: () => void;\n\n /**\n * Callback that is called when enter or submit key pressed.\n */\n onSubmitEditing?: () => void\n\n /**\n * Placeholder for textField.\n */\n placeholder?: string;\n\n /**\n * If true, the text input obscures the text entered so that sensitive text like passwords stay secure.\n * @default false\n */\n secureTextEntry?: boolean;\n\n /**\n * Value of the textField.\n */\n value?: string;\n}> {}"],"mappings":""}
|
|
@@ -27,5 +27,10 @@ export default interface DividerProps extends OverridableComponentProps<ViewProp
|
|
|
27
27
|
* @default 2
|
|
28
28
|
*/
|
|
29
29
|
marginBetweenChildren?: number;
|
|
30
|
+
/**
|
|
31
|
+
* The size of border width. It works as an actual pixel-based border width value of a divider.
|
|
32
|
+
* @default 1
|
|
33
|
+
*/
|
|
34
|
+
borderWidth?: number;
|
|
30
35
|
}> {
|
|
31
36
|
}
|
|
@@ -2,6 +2,9 @@ import React from 'react';
|
|
|
2
2
|
import { NativeSyntheticEvent, TargetedEvent } from 'react-native';
|
|
3
3
|
import { ComponentProps } from '../types';
|
|
4
4
|
declare type TextFieldKeyboardType = 'default' | 'numeric' | 'email-address';
|
|
5
|
+
export interface setStyleProp {
|
|
6
|
+
fontFamily: string;
|
|
7
|
+
}
|
|
5
8
|
export default interface TextFieldProps extends ComponentProps<{
|
|
6
9
|
/**
|
|
7
10
|
* If true, user won't be able to interact with the component.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fountain-ui/core",
|
|
3
|
-
"version": "2.0.0-beta.
|
|
3
|
+
"version": "2.0.0-beta.54",
|
|
4
4
|
"author": "Fountain-UI Team",
|
|
5
5
|
"description": "React components that implement Tappytoon's Fountain Design.",
|
|
6
6
|
"license": "MIT",
|
|
@@ -67,5 +67,5 @@
|
|
|
67
67
|
"publishConfig": {
|
|
68
68
|
"access": "public"
|
|
69
69
|
},
|
|
70
|
-
"gitHead": "
|
|
70
|
+
"gitHead": "7f88347a0bb7b43e6781423f531d6e0d34af0c48"
|
|
71
71
|
}
|
package/src/Divider/Divider.tsx
CHANGED
|
@@ -17,16 +17,11 @@ const styles = StyleSheet.create({
|
|
|
17
17
|
divider: {
|
|
18
18
|
flexGrow: 1,
|
|
19
19
|
},
|
|
20
|
-
borderBottom: {
|
|
21
|
-
borderBottomWidth: 1,
|
|
22
|
-
},
|
|
23
|
-
borderRight: {
|
|
24
|
-
borderRightWidth: 1,
|
|
25
|
-
},
|
|
26
20
|
});
|
|
27
21
|
|
|
28
22
|
export default function Divider(props: DividerProps) {
|
|
29
23
|
const {
|
|
24
|
+
borderWidth = 1,
|
|
30
25
|
children: childrenProp,
|
|
31
26
|
color = 'divider',
|
|
32
27
|
inset = 0,
|
|
@@ -59,7 +54,7 @@ export default function Divider(props: DividerProps) {
|
|
|
59
54
|
: { marginLeft: insetSize, marginRight: insetSize };
|
|
60
55
|
|
|
61
56
|
const borderColorStyle = { borderColor };
|
|
62
|
-
const borderWidthStyle = (vertical ?
|
|
57
|
+
const borderWidthStyle = (vertical ? { borderRightWidth: borderWidth } : { borderBottomWidth: borderWidth });
|
|
63
58
|
|
|
64
59
|
const containerStyle = css([
|
|
65
60
|
insetStyle,
|
|
@@ -33,4 +33,10 @@ export default interface DividerProps extends OverridableComponentProps<ViewProp
|
|
|
33
33
|
* @default 2
|
|
34
34
|
*/
|
|
35
35
|
marginBetweenChildren?: number;
|
|
36
|
+
|
|
37
|
+
/**
|
|
38
|
+
* The size of border width. It works as an actual pixel-based border width value of a divider.
|
|
39
|
+
* @default 1
|
|
40
|
+
*/
|
|
41
|
+
borderWidth?: number;
|
|
36
42
|
}> {}
|
|
@@ -3,7 +3,7 @@ import { Animated, LayoutChangeEvent, NativeSyntheticEvent, TargetedEvent, TextI
|
|
|
3
3
|
import { css } from '../styles';
|
|
4
4
|
import { useAnimatedValue } from '../hooks';
|
|
5
5
|
import OutlinedTextField from './OutlinedTextField';
|
|
6
|
-
import TextFieldProps from './TextFieldProps';
|
|
6
|
+
import TextFieldProps, { setStyleProp } from './TextFieldProps';
|
|
7
7
|
import { blurAnimationDuration, focusAnimationDuration } from './utils';
|
|
8
8
|
|
|
9
9
|
const TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField(props, ref) {
|
|
@@ -40,6 +40,11 @@ const TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField
|
|
|
40
40
|
blur: () => {
|
|
41
41
|
innerRef.current?.blur();
|
|
42
42
|
},
|
|
43
|
+
setStyle: (style: setStyleProp) => {
|
|
44
|
+
innerRef.current?.setNativeProps({
|
|
45
|
+
style,
|
|
46
|
+
});
|
|
47
|
+
},
|
|
43
48
|
}));
|
|
44
49
|
|
|
45
50
|
const animatedLabel = useAnimatedValue(value ? 0 : 1);
|
|
@@ -4,6 +4,10 @@ import { ComponentProps } from '../types';
|
|
|
4
4
|
|
|
5
5
|
type TextFieldKeyboardType = 'default' | 'numeric' | 'email-address';
|
|
6
6
|
|
|
7
|
+
export interface setStyleProp {
|
|
8
|
+
fontFamily: string;
|
|
9
|
+
}
|
|
10
|
+
|
|
7
11
|
export default interface TextFieldProps extends ComponentProps<{
|
|
8
12
|
/**
|
|
9
13
|
* If true, user won't be able to interact with the component.
|