@xhsreds/reds-rn-next 0.10.1-beta202511241537 → 0.10.1-beta202512021041
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/coverage/.tmp/coverage-0.json +1 -1
- package/coverage/.tmp/coverage-1.json +1 -1
- package/coverage/.tmp/coverage-10.json +1 -1
- package/coverage/.tmp/coverage-11.json +1 -1
- package/coverage/.tmp/coverage-12.json +1 -1
- package/coverage/.tmp/coverage-13.json +1 -1
- package/coverage/.tmp/coverage-14.json +1 -1
- package/coverage/.tmp/coverage-15.json +1 -1
- package/coverage/.tmp/coverage-16.json +1 -1
- package/coverage/.tmp/coverage-17.json +1 -1
- package/coverage/.tmp/coverage-18.json +1 -1
- package/coverage/.tmp/coverage-19.json +1 -1
- package/coverage/.tmp/coverage-2.json +1 -1
- package/coverage/.tmp/coverage-20.json +1 -1
- package/coverage/.tmp/coverage-21.json +1 -1
- package/coverage/.tmp/coverage-22.json +1 -1
- package/coverage/.tmp/coverage-23.json +1 -1
- package/coverage/.tmp/coverage-24.json +1 -1
- package/coverage/.tmp/coverage-25.json +1 -1
- package/coverage/.tmp/coverage-27.json +1 -1
- package/coverage/.tmp/coverage-29.json +1 -1
- package/coverage/.tmp/coverage-3.json +1 -1
- package/coverage/.tmp/coverage-30.json +1 -1
- package/coverage/.tmp/coverage-32.json +1 -1
- package/coverage/.tmp/coverage-33.json +1 -1
- package/coverage/.tmp/coverage-34.json +1 -1
- package/coverage/.tmp/coverage-36.json +1 -1
- package/coverage/.tmp/coverage-37.json +1 -1
- package/coverage/.tmp/coverage-38.json +1 -1
- package/coverage/.tmp/coverage-39.json +1 -1
- package/coverage/.tmp/coverage-4.json +1 -1
- package/coverage/.tmp/coverage-40.json +1 -1
- package/coverage/.tmp/coverage-41.json +1 -1
- package/coverage/.tmp/coverage-5.json +1 -1
- package/coverage/.tmp/coverage-6.json +1 -1
- package/coverage/.tmp/coverage-7.json +1 -1
- package/coverage/.tmp/coverage-8.json +1 -1
- package/coverage/.tmp/coverage-9.json +1 -1
- package/lib/cjs/_chunks/hA3qoGpS.js.map +1 -1
- package/lib/cjs/components/ActionablePopover/ActionablePopover.js +2 -2
- package/lib/cjs/components/ActionablePopover/ActionablePopover.js.map +1 -1
- package/lib/cjs/components/Divider/Divider.js +33 -12
- package/lib/cjs/components/Divider/Divider.js.map +1 -1
- package/lib/cjs/components/Divider/index.js +3 -3
- package/lib/cjs/components/Divider/styles.js +36 -30
- package/lib/cjs/components/Divider/styles.js.map +1 -1
- package/lib/cjs/components/List/ListItem/ListItem.js +4 -2
- package/lib/cjs/components/List/ListItem/ListItem.js.map +1 -1
- package/lib/cjs/components/PickerView/Wheel.js +57 -16
- package/lib/cjs/components/PickerView/Wheel.js.map +1 -1
- package/lib/cjs/components/Stepper/Stepper.js +1 -1
- package/lib/cjs/components/Stepper/Stepper.js.map +1 -1
- package/lib/cjs/components/Stepper/styles.js +2 -2
- package/lib/cjs/components/Stepper/styles.js.map +1 -1
- package/lib/esm/_chunks/C0MWVrjO.js.map +1 -1
- package/lib/esm/components/ActionablePopover/ActionablePopover.js +1 -1
- package/lib/esm/components/ActionablePopover/ActionablePopover.js.map +1 -1
- package/lib/esm/components/Divider/Divider.js +35 -14
- package/lib/esm/components/Divider/Divider.js.map +1 -1
- package/lib/esm/components/Divider/index.js +3 -3
- package/lib/esm/components/Divider/styles.js +36 -30
- package/lib/esm/components/Divider/styles.js.map +1 -1
- package/lib/esm/components/List/ListItem/ListItem.js +5 -3
- package/lib/esm/components/List/ListItem/ListItem.js.map +1 -1
- package/lib/esm/components/PickerView/Wheel.js +57 -16
- package/lib/esm/components/PickerView/Wheel.js.map +1 -1
- package/lib/esm/components/Stepper/Stepper.js +1 -1
- package/lib/esm/components/Stepper/Stepper.js.map +1 -1
- package/lib/esm/components/Stepper/styles.js +2 -2
- package/lib/esm/components/Stepper/styles.js.map +1 -1
- package/lib/src/components/Divider/styles.d.ts +3 -2
- package/lib/src/components/List/ListItem/ListItem.d.ts +2 -0
- package/lib/src/components/Stepper/interface/index.d.ts +1 -0
- package/lib/src/components/Stepper/styles.d.ts +2 -2
- package/lib/types/components/Divider/styles.d.ts +3 -2
- package/lib/types/components/List/ListItem/ListItem.d.ts +2 -0
- package/lib/types/components/Stepper/interface/index.d.ts +1 -0
- package/lib/types/components/Stepper/styles.d.ts +2 -2
- package/package.json +2 -2
- package/src/components/ActionablePopover/ActionablePopover.tsx +10 -1
- package/src/components/Divider/Divider.tsx +29 -9
- package/src/components/Divider/demo/index.tsx +12 -6
- package/src/components/Divider/styles.ts +33 -30
- package/src/components/List/ListItem/ListItem.tsx +12 -1
- package/src/components/List/demo/index.tsx +2 -0
- package/src/components/PickerView/Wheel.tsx +59 -12
- package/src/components/Stepper/Stepper.tsx +1 -1
- package/src/components/Stepper/demo/index.tsx +1 -1
- package/src/components/Stepper/doc/index.mdx +1 -0
- package/src/components/Stepper/interface/index.ts +1 -0
- package/src/components/Stepper/styles.ts +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Wheel.js","sources":["../../../../src/components/PickerView/Wheel.tsx"],"sourcesContent":["import React, { useRef, useState, useEffect } from \"react\";\nimport { NativeScrollEvent, NativeSyntheticEvent, ScrollView, View, Text, TouchableNativeFeedback } from \"react-native\";\nimport { useThemeColor } from \"../ConfigProvider\";\nimport { typography } from \"@xhsreds/reds-token-next\";\nimport { RedsWheel, Column } from \"./interface/index\";\nimport styles from \"./styles\";\n\nconst itemHeight = 40;\n\nconst Wheel = (props: RedsWheel) => {\n const { value, column = [], onSelect = () => {}, accessibility = {} } = props;\n\n /**\n * 滚动ref\n */\n const scrollerRef = useRef();\n\n /**\n * themeColor\n */\n const themeColor = useThemeColor();\n\n const [lastValue, setLastValue] = useState(value);\n\n /**\n * 初始化滚动高度\n */\n useEffect(() => {\n if (value !== lastValue) {\n const idx = getSelectIndex(column, value);\n handleScroll(idx);\n }\n }, [column, value]);\n\n const handleScroll = (idx: number) => {\n const newVal = column?.[idx]?.value;\n scrollTo(idx * itemHeight);\n if (newVal) {\n setLastValue(newVal);\n onSelect(newVal, props.index);\n }\n };\n\n /**\n * 滚动ScrollView\n * @param y 滚动距离\n */\n const scrollTo = (y: any) => {\n setTimeout(() => {\n // @ts-ignore\n scrollerRef?.current?.scrollTo?.({\n y,\n animated: true,\n });\n });\n };\n\n /**\n * 计算当前滚动高度\n * @param column 数组\n * @param value 选中值\n * @returns\n */\n const getSelectIndex = (column: Column[], value?: string) => {\n return value\n ? Math.max(\n column.findIndex((item) => {\n if (isNaN(parseInt(item.value)) || isNaN(parseInt(value))) {\n return value && item.value === value;\n } else {\n return value && parseInt(item.value) === parseInt(value);\n }\n }),\n 0,\n )\n : 0;\n };\n\n /**\n * 结束滚动\n * @param e\n */\n const onMomentumScrollEnd = (e: NativeSyntheticEvent<NativeScrollEvent>) => {\n e.persist?.();\n let contentOffset = e.nativeEvent.contentOffset;\n const selectIndex = Math.round(contentOffset.y / itemHeight);\n const newVal = column?.[selectIndex]?.value;\n setLastValue(newVal);\n onSelect(newVal, props.index);\n };\n\n const handleClick = (index: number) => {\n handleScroll(index);\n };\n\n /**\n * 渲染item\n * @returns ReactNode\n */\n const renderItems = () => {\n return column.map((item, index) => (\n <TouchableNativeFeedback onPress={() => handleClick(index)} key={item.value}>\n <View\n style={[styles.wheel, { height: itemHeight, backgroundColor: themeColor.Bg2 }]}\n key={item.value}\n {...item.accessibility}\n >\n <Text {...item.accessibility} style={{ color: themeColor.Title, fontSize: typography.B1FontSize }}>\n {item.label}\n </Text>\n </View>\n </TouchableNativeFeedback>\n ));\n };\n\n return (\n <ScrollView\n style={{ flex: 1 }}\n nestedScrollEnabled\n horizontal={false}\n ref={(el: any) => (scrollerRef.current = el)}\n showsHorizontalScrollIndicator={false}\n showsVerticalScrollIndicator={false}\n pagingEnabled={false}\n automaticallyAdjustContentInsets={false}\n directionalLockEnabled={true}\n decelerationRate=\"fast\"\n snapToInterval={itemHeight}\n onMomentumScrollEnd={onMomentumScrollEnd}\n testID={`wheel${props.index}`}\n {...accessibility}\n >\n <View style={{ height: 2 * itemHeight, backgroundColor: themeColor.Bg2 }} />\n {renderItems()}\n <View style={{ height: 2 * itemHeight, backgroundColor: themeColor.Bg2 }} />\n </ScrollView>\n );\n};\n\nexport default Wheel;\n"],"names":["itemHeight","Wheel","props","value","_props$column","column","_props$onSelect","onSelect","_props$accessibility","accessibility","scrollerRef","useRef","themeColor","useThemeColor","_useState","useState","_useState2","_slicedToArray","lastValue","setLastValue","useEffect","idx","getSelectIndex","handleScroll","_column$idx","newVal","scrollTo","index","y","setTimeout","_scrollerRef$current","_scrollerRef$current$","current","call","animated","Math","max","findIndex","item","isNaN","parseInt","onMomentumScrollEnd","e","_e$persist","_column$selectIndex","persist","contentOffset","nativeEvent","selectIndex","round","handleClick","renderItems","map","React","createElement","TouchableNativeFeedback","onPress","key","View","_objectSpread","style","styles","wheel","height","backgroundColor","Bg2","Text","color","Title","fontSize","typography","B1FontSize","label","ScrollView","flex","nestedScrollEnabled","horizontal","ref","el","showsHorizontalScrollIndicator","showsVerticalScrollIndicator","pagingEnabled","automaticallyAdjustContentInsets","directionalLockEnabled","decelerationRate","snapToInterval","testID","concat"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Wheel.js","sources":["../../../../src/components/PickerView/Wheel.tsx"],"sourcesContent":["import React, { useRef, useState, useEffect } from \"react\";\nimport { NativeScrollEvent, NativeSyntheticEvent, ScrollView, View, Text, TouchableNativeFeedback } from \"react-native\";\nimport { useThemeColor } from \"../ConfigProvider\";\nimport { typography } from \"@xhsreds/reds-token-next\";\nimport { RedsWheel, Column } from \"./interface/index\";\nimport styles from \"./styles\";\n\nconst itemHeight = 40;\n\nconst Wheel = (props: RedsWheel) => {\n const { value, column = [], onSelect = () => {}, accessibility = {} } = props;\n\n /**\n * 滚动ref\n */\n const scrollerRef = useRef();\n\n const [scrollEnded, setScrollEnded] = useState(false);\n\n const [scrollHeight, setScrollHeight] = useState(0);\n\n const [lastValue, setLastValue] = useState(value);\n\n const onScrollEndDrag = () => {\n setScrollEnded(true);\n };\n\n /**\n * 初始化滚动高度\n */\n useEffect(() => {\n if (value !== lastValue) {\n const idx = getSelectIndex(column, value);\n setIndex(idx);\n }\n }, [column, value]);\n\n /**\n * themeColor\n */\n const themeColor = useThemeColor();\n\n /**\n * index\n */\n const [index, setIndex] = useState<any>();\n\n const timer = useRef<any>();\n\n /**\n * 初始化滚动高度\n */\n useEffect(() => {\n value && setIndex(getSelectIndex(column, value));\n }, [column, value]);\n\n useEffect(() => {\n const newVal = column?.[index]?.value;\n scrollTo(index * itemHeight);\n if (newVal) {\n onSelect(newVal, props.index);\n setLastValue(newVal);\n }\n }, [index, props.index]);\n\n useEffect(() => {\n if (scrollEnded) {\n // @ts-ignore\n if (scrollHeight != null) {\n timer.current = setTimeout(() => {\n const selectIndex = Math.round(scrollHeight / itemHeight);\n if (selectIndex >= 0 && selectIndex < column.length) {\n setIndex(selectIndex);\n }\n }, 0);\n }\n setScrollEnded(false);\n }\n return () => {\n timer.current && clearTimeout(timer.current);\n };\n }, [scrollEnded]);\n\n /**\n * 滚动ScrollView\n * @param y 滚动距离\n */\n const scrollTo = (y: any) => {\n setTimeout(() => {\n // @ts-ignore\n scrollerRef?.current?.scrollTo?.({\n y,\n animated: true,\n });\n });\n };\n\n /**\n * 计算当前滚动高度\n * @param column 数组\n * @param value 选中值\n * @returns\n */\n const getSelectIndex = (column: Column[], value?: string) => {\n return value\n ? Math.max(\n column.findIndex((item) => {\n if (isNaN(parseInt(item.value)) || isNaN(parseInt(value))) {\n return value && item.value === value;\n } else {\n return value && parseInt(item.value) === parseInt(value);\n }\n }),\n 0,\n )\n : 0;\n };\n\n /**\n * 结束滚动\n * @param e\n */\n const onMomentumScrollEnd = (e: NativeSyntheticEvent<NativeScrollEvent>) => {\n e.persist?.();\n let contentOffset = e.nativeEvent.contentOffset;\n const selectIndex = Math.round(contentOffset.y / itemHeight);\n setIndex(selectIndex);\n const newVal = column?.[selectIndex]?.value;\n setLastValue(newVal);\n };\n\n const onScroll = (e: NativeSyntheticEvent<NativeScrollEvent>) => {\n setScrollHeight(e.nativeEvent.contentOffset.y);\n };\n\n const handleClick = (index: number) => {\n setIndex(index);\n };\n\n /**\n * 渲染item\n * @returns ReactNode\n */\n const renderItems = () => {\n return column.map((item, index) => (\n <TouchableNativeFeedback onPress={() => handleClick(index)} key={item.value}>\n <View\n style={[styles.wheel, { height: itemHeight, backgroundColor: themeColor.Bg2 }]}\n key={item.value}\n {...item.accessibility}\n >\n <Text {...item.accessibility} style={{ color: themeColor.Title, fontSize: typography.B1FontSize }}>\n {item.label}\n </Text>\n </View>\n </TouchableNativeFeedback>\n ));\n };\n\n return (\n <ScrollView\n style={{ flex: 1 }}\n nestedScrollEnabled\n horizontal={false}\n ref={(el: any) => (scrollerRef.current = el)}\n showsHorizontalScrollIndicator={false}\n showsVerticalScrollIndicator={false}\n pagingEnabled={false}\n automaticallyAdjustContentInsets={false}\n directionalLockEnabled={true}\n decelerationRate=\"fast\"\n snapToInterval={itemHeight}\n onMomentumScrollEnd={onMomentumScrollEnd}\n onScrollEndDrag={onScrollEndDrag}\n onScroll={onScroll}\n scrollEventThrottle={16}\n testID={`wheel${props.index}`}\n {...accessibility}\n >\n <View style={{ height: 2 * itemHeight, backgroundColor: themeColor.Bg2 }} />\n {renderItems()}\n <View style={{ height: 2 * itemHeight, backgroundColor: themeColor.Bg2 }} />\n </ScrollView>\n );\n};\n\nexport default Wheel;\n"],"names":["itemHeight","Wheel","props","value","_props$column","column","_props$onSelect","onSelect","_props$accessibility","accessibility","scrollerRef","useRef","_useState","useState","_useState2","_slicedToArray","scrollEnded","setScrollEnded","_useState3","_useState4","scrollHeight","setScrollHeight","_useState5","_useState6","lastValue","setLastValue","onScrollEndDrag","useEffect","idx","getSelectIndex","setIndex","themeColor","useThemeColor","_useState7","_useState8","index","timer","_column$index","newVal","scrollTo","current","setTimeout","selectIndex","Math","round","length","clearTimeout","y","_scrollerRef$current","_scrollerRef$current$","call","animated","max","findIndex","item","isNaN","parseInt","onMomentumScrollEnd","e","_e$persist","_column$selectIndex","persist","contentOffset","nativeEvent","onScroll","handleClick","renderItems","map","React","createElement","TouchableNativeFeedback","onPress","key","View","_objectSpread","style","styles","wheel","height","backgroundColor","Bg2","Text","color","Title","fontSize","typography","B1FontSize","label","ScrollView","flex","nestedScrollEnabled","horizontal","ref","el","showsHorizontalScrollIndicator","showsVerticalScrollIndicator","pagingEnabled","automaticallyAdjustContentInsets","directionalLockEnabled","decelerationRate","snapToInterval","scrollEventThrottle","testID","concat"],"mappings":"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"}
|
|
@@ -76,7 +76,7 @@ var Stepper = function Stepper(props) {
|
|
|
76
76
|
}
|
|
77
77
|
}, [colorMode]);
|
|
78
78
|
return /* @__PURE__ */React.createElement(View, {
|
|
79
|
-
style: styles.container
|
|
79
|
+
style: [styles.container, props.style]
|
|
80
80
|
}, /* @__PURE__ */React.createElement(TouchableWithoutFeedback, {
|
|
81
81
|
onPress: function onPress() {
|
|
82
82
|
return handleNumber("min");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Stepper.js","sources":["../../../../src/components/Stepper/Stepper.tsx"],"sourcesContent":["import React, { useState, useEffect, useMemo } from \"react\";\nimport { View, TouchableWithoutFeedback, Text, Image } from \"react-native\";\nimport { RedsStepper, StepperDefaultProps } from \"./interface/index\";\nimport { getStyles } from \"./styles\";\nimport { useThemeColor, useThemeTypography, useColorMode } from \"../ConfigProvider\";\nimport useMounted from \"../../pvCount/useUnmountedProcess\";\n\nconst Stepper = (props: RedsStepper) => {\n useMounted(\"Stepper\");\n const themeColor = useThemeColor();\n\n const colorMode = useColorMode();\n\n const typography = useThemeTypography(\"Stepper\");\n\n const [_value, setValue] = useState(0);\n\n const styles = getStyles(themeColor, typography);\n\n const minus = useMemo(() => {\n if (props.disable || (props.min !== undefined && props.min >= _value!)) {\n return getStyles(themeColor, typography).opacity;\n } else {\n return {};\n }\n }, [props.disable, props.max, _value]);\n\n const add = useMemo(() => {\n if (props.disable || (props.max !== undefined && props.max <= _value!)) {\n return styles.opacity;\n } else {\n return {};\n }\n }, [props.disable, props.max, _value]);\n\n const handleNumber = (type: string) => {\n if (props.disable) return;\n let newValue = 0;\n if (type === \"min\") {\n if (props.min && props.min >= _value! - 1) {\n newValue = props.min;\n } else {\n newValue = _value! - 1;\n }\n } else {\n if (props.max && props.max <= _value! + 1) {\n newValue = props.max;\n } else {\n newValue = _value! + 1;\n }\n }\n setValue(newValue);\n props?.onChange?.(newValue);\n };\n\n useEffect(() => {\n setValue((oldValue: any) => {\n return props.isControl\n ? props.value! >= props.min! && props.value! <= props.max!\n ? props.value!\n : props.value! < props.min!\n ? props.min!\n : props.value! > props.max!\n ? props.max!\n : props.value!\n : oldValue;\n });\n }, [props.value, props.max, props.min]);\n\n const minusImage = useMemo(() => {\n if (colorMode === \"light\") {\n return \"https://fe-platform.xhscdn.com/platform/104101l031hcivputjq06d5494g900000000001jjq1j8a\";\n } else {\n return \"https://fe-platform.xhscdn.com/platform/104101l031lfjqfuo5o76d5494g900000000001lo4n564\";\n }\n }, [colorMode]);\n\n const addImage = useMemo(() => {\n if (colorMode === \"light\") {\n return \"https://fe-platform.xhscdn.com/platform/104101l031hcivo9hjs06d5494g900000000001igfsdhk\";\n } else {\n return \"https://fe-platform.xhscdn.com/platform/104101l031lfjqilq5m06d5494g900000000001n1dkns2\";\n }\n }, [colorMode]);\n\n return (\n <View style={styles.container}>\n <TouchableWithoutFeedback onPress={() => handleNumber(\"min\")}>\n <View style={[styles.icon, minus]}>\n <Image source={{ uri: minusImage }} style={[styles.minus]} />\n </View>\n </TouchableWithoutFeedback>\n <Text style={[styles.text, props.disable && styles.opacity]}>{_value}</Text>\n <TouchableWithoutFeedback onPress={() => handleNumber(\"add\")}>\n <View style={[styles.icon, add]}>\n <Image source={{ uri: addImage }} style={[styles.add]} />\n </View>\n </TouchableWithoutFeedback>\n </View>\n );\n};\n\nStepper.defaultProps = StepperDefaultProps;\n\nexport default Stepper;\n"],"names":["Stepper","props","useMounted","themeColor","useThemeColor","colorMode","useColorMode","typography","useThemeTypography","_useState","useState","_useState2","_slicedToArray","_value","setValue","styles","getStyles","minus","useMemo","disable","min","opacity","max","add","handleNumber","type","_props$onChange","newValue","onChange","call","useEffect","oldValue","isControl","value","minusImage","addImage","View","style","container","
|
|
1
|
+
{"version":3,"file":"Stepper.js","sources":["../../../../src/components/Stepper/Stepper.tsx"],"sourcesContent":["import React, { useState, useEffect, useMemo } from \"react\";\nimport { View, TouchableWithoutFeedback, Text, Image } from \"react-native\";\nimport { RedsStepper, StepperDefaultProps } from \"./interface/index\";\nimport { getStyles } from \"./styles\";\nimport { useThemeColor, useThemeTypography, useColorMode } from \"../ConfigProvider\";\nimport useMounted from \"../../pvCount/useUnmountedProcess\";\n\nconst Stepper = (props: RedsStepper) => {\n useMounted(\"Stepper\");\n const themeColor = useThemeColor();\n\n const colorMode = useColorMode();\n\n const typography = useThemeTypography(\"Stepper\");\n\n const [_value, setValue] = useState(0);\n\n const styles = getStyles(themeColor, typography);\n\n const minus = useMemo(() => {\n if (props.disable || (props.min !== undefined && props.min >= _value!)) {\n return getStyles(themeColor, typography).opacity;\n } else {\n return {};\n }\n }, [props.disable, props.max, _value]);\n\n const add = useMemo(() => {\n if (props.disable || (props.max !== undefined && props.max <= _value!)) {\n return styles.opacity;\n } else {\n return {};\n }\n }, [props.disable, props.max, _value]);\n\n const handleNumber = (type: string) => {\n if (props.disable) return;\n let newValue = 0;\n if (type === \"min\") {\n if (props.min && props.min >= _value! - 1) {\n newValue = props.min;\n } else {\n newValue = _value! - 1;\n }\n } else {\n if (props.max && props.max <= _value! + 1) {\n newValue = props.max;\n } else {\n newValue = _value! + 1;\n }\n }\n setValue(newValue);\n props?.onChange?.(newValue);\n };\n\n useEffect(() => {\n setValue((oldValue: any) => {\n return props.isControl\n ? props.value! >= props.min! && props.value! <= props.max!\n ? props.value!\n : props.value! < props.min!\n ? props.min!\n : props.value! > props.max!\n ? props.max!\n : props.value!\n : oldValue;\n });\n }, [props.value, props.max, props.min]);\n\n const minusImage = useMemo(() => {\n if (colorMode === \"light\") {\n return \"https://fe-platform.xhscdn.com/platform/104101l031hcivputjq06d5494g900000000001jjq1j8a\";\n } else {\n return \"https://fe-platform.xhscdn.com/platform/104101l031lfjqfuo5o76d5494g900000000001lo4n564\";\n }\n }, [colorMode]);\n\n const addImage = useMemo(() => {\n if (colorMode === \"light\") {\n return \"https://fe-platform.xhscdn.com/platform/104101l031hcivo9hjs06d5494g900000000001igfsdhk\";\n } else {\n return \"https://fe-platform.xhscdn.com/platform/104101l031lfjqilq5m06d5494g900000000001n1dkns2\";\n }\n }, [colorMode]);\n\n return (\n <View style={[styles.container, props.style]}>\n <TouchableWithoutFeedback onPress={() => handleNumber(\"min\")}>\n <View style={[styles.icon, minus]}>\n <Image source={{ uri: minusImage }} style={[styles.minus]} />\n </View>\n </TouchableWithoutFeedback>\n <Text style={[styles.text, props.disable && styles.opacity]}>{_value}</Text>\n <TouchableWithoutFeedback onPress={() => handleNumber(\"add\")}>\n <View style={[styles.icon, add]}>\n <Image source={{ uri: addImage }} style={[styles.add]} />\n </View>\n </TouchableWithoutFeedback>\n </View>\n );\n};\n\nStepper.defaultProps = StepperDefaultProps;\n\nexport default Stepper;\n"],"names":["Stepper","props","useMounted","themeColor","useThemeColor","colorMode","useColorMode","typography","useThemeTypography","_useState","useState","_useState2","_slicedToArray","_value","setValue","styles","getStyles","minus","useMemo","disable","min","opacity","max","add","handleNumber","type","_props$onChange","newValue","onChange","call","useEffect","oldValue","isControl","value","minusImage","addImage","View","style","container","React","createElement","TouchableWithoutFeedback","onPress","icon","Image","source","uri","Text","text","defaultProps","StepperDefaultProps"],"mappings":"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"}
|
|
@@ -6,7 +6,8 @@ var getStyles = function getStyles(themeColor, typography) {
|
|
|
6
6
|
display: "flex",
|
|
7
7
|
flexDirection: "row",
|
|
8
8
|
alignItems: "center",
|
|
9
|
-
justifyContent: "
|
|
9
|
+
justifyContent: "space-between",
|
|
10
|
+
width: 72
|
|
10
11
|
},
|
|
11
12
|
opacity: {
|
|
12
13
|
opacity: 0.5
|
|
@@ -22,7 +23,6 @@ var getStyles = function getStyles(themeColor, typography) {
|
|
|
22
23
|
lineHeight: 20
|
|
23
24
|
},
|
|
24
25
|
text: {
|
|
25
|
-
paddingHorizontal: 8,
|
|
26
26
|
fontWeight: typography.B1LooseFontWeight,
|
|
27
27
|
fontSize: typography.T3FontSize,
|
|
28
28
|
color: themeColor.Title
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sources":["../../../../src/components/Stepper/styles.ts"],"sourcesContent":["import { StyleSheet } from \"react-native\";\nexport const getStyles = (themeColor: any, typography: any) => {\n return StyleSheet.create({\n container: {\n display: \"flex\",\n flexDirection: \"row\",\n alignItems: \"center\",\n justifyContent: \"
|
|
1
|
+
{"version":3,"file":"styles.js","sources":["../../../../src/components/Stepper/styles.ts"],"sourcesContent":["import { StyleSheet } from \"react-native\";\nexport const getStyles = (themeColor: any, typography: any) => {\n return StyleSheet.create({\n container: {\n display: \"flex\",\n flexDirection: \"row\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n width: 72,\n },\n opacity: {\n opacity: 0.5,\n },\n icon: {\n width: 20,\n height: 20,\n backgroundColor: themeColor.Fill1,\n borderRadius: 20,\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n lineHeight: 20,\n },\n text: {\n fontWeight: typography.B1LooseFontWeight,\n fontSize: typography.T3FontSize,\n color: themeColor.Title,\n },\n minus: {\n height: 1.5,\n width: 10,\n },\n add: {\n height: 10,\n width: 10,\n },\n });\n};\n"],"names":["getStyles","themeColor","typography","StyleSheet","create","container","display","flexDirection","alignItems","justifyContent","width","opacity","icon","height","backgroundColor","Fill1","borderRadius","lineHeight","text","fontWeight","B1LooseFontWeight","fontSize","T3FontSize","color","Title","minus","add"],"mappings":";;AACa,IAAAA,SAAA,GAAY,SAAZA,SAAAA,CAAaC,UAAA,EAAiBC,UAAoB,EAAA;EAC7D,OAAOC,WAAWC,MAAO,CAAA;AACvBC,IAAAA,SAAW,EAAA;AACTC,MAAAA,OAAS,EAAA,MAAA;AACTC,MAAAA,aAAe,EAAA,KAAA;AACfC,MAAAA,UAAY,EAAA,QAAA;AACZC,MAAAA,cAAgB,EAAA,eAAA;AAChBC,MAAAA,KAAO,EAAA,EAAA;KACT;AACAC,IAAAA,OAAS,EAAA;AACPA,MAAAA,OAAS,EAAA,GAAA;KACX;AACAC,IAAAA,IAAM,EAAA;AACJF,MAAAA,KAAO,EAAA,EAAA;AACPG,MAAAA,MAAQ,EAAA,EAAA;MACRC,iBAAiBb,UAAW,CAAAc,KAAA;AAC5BC,MAAAA,YAAc,EAAA,EAAA;AACdV,MAAAA,OAAS,EAAA,MAAA;AACTG,MAAAA,cAAgB,EAAA,QAAA;AAChBD,MAAAA,UAAY,EAAA,QAAA;AACZS,MAAAA,UAAY,EAAA,EAAA;KACd;AACAC,IAAAA,IAAM,EAAA;MACJC,YAAYjB,UAAW,CAAAkB,iBAAA;MACvBC,UAAUnB,UAAW,CAAAoB,UAAA;MACrBC,OAAOtB,UAAW,CAAAuB,KAAAA;KACpB;AACAC,IAAAA,KAAO,EAAA;AACLZ,MAAAA,MAAQ,EAAA,GAAA;AACRH,MAAAA,KAAO,EAAA,EAAA;KACT;AACAgB,IAAAA,GAAK,EAAA;AACHb,MAAAA,MAAQ,EAAA,EAAA;AACRH,MAAAA,KAAO,EAAA,EAAA;AACT,KAAA;AACF,GAAC,CAAA,CAAA;AACH;;;;"}
|
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
import { ViewStyle, TextStyle } from "react-native";
|
|
2
2
|
import { RedsDivider } from "./interface";
|
|
3
|
-
declare const getStyles: (p: RedsDivider) => {
|
|
3
|
+
declare const getStyles: (p: RedsDivider, textWidth: number, containerWidth: number, themeColor: any, typography: any) => {
|
|
4
4
|
divider: ViewStyle;
|
|
5
5
|
horizontal: ViewStyle;
|
|
6
6
|
vertical: ViewStyle;
|
|
7
7
|
primary: TextStyle;
|
|
8
8
|
secondary: TextStyle;
|
|
9
|
-
textContainer:
|
|
9
|
+
textContainer: ViewStyle;
|
|
10
10
|
text: TextStyle;
|
|
11
11
|
before: ViewStyle;
|
|
12
12
|
after: ViewStyle;
|
|
13
|
+
noTextBorderStyle: ViewStyle;
|
|
13
14
|
};
|
|
14
15
|
export { getStyles };
|
|
@@ -3,7 +3,8 @@ export declare const getStyles: (themeColor: any, typography: any) => {
|
|
|
3
3
|
display: "flex";
|
|
4
4
|
flexDirection: "row";
|
|
5
5
|
alignItems: "center";
|
|
6
|
-
justifyContent: "
|
|
6
|
+
justifyContent: "space-between";
|
|
7
|
+
width: number;
|
|
7
8
|
};
|
|
8
9
|
opacity: {
|
|
9
10
|
opacity: number;
|
|
@@ -19,7 +20,6 @@ export declare const getStyles: (themeColor: any, typography: any) => {
|
|
|
19
20
|
lineHeight: number;
|
|
20
21
|
};
|
|
21
22
|
text: {
|
|
22
|
-
paddingHorizontal: number;
|
|
23
23
|
fontWeight: any;
|
|
24
24
|
fontSize: any;
|
|
25
25
|
color: any;
|
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
import { ViewStyle, TextStyle } from "react-native";
|
|
2
2
|
import { RedsDivider } from "./interface";
|
|
3
|
-
declare const getStyles: (p: RedsDivider) => {
|
|
3
|
+
declare const getStyles: (p: RedsDivider, textWidth: number, containerWidth: number, themeColor: any, typography: any) => {
|
|
4
4
|
divider: ViewStyle;
|
|
5
5
|
horizontal: ViewStyle;
|
|
6
6
|
vertical: ViewStyle;
|
|
7
7
|
primary: TextStyle;
|
|
8
8
|
secondary: TextStyle;
|
|
9
|
-
textContainer:
|
|
9
|
+
textContainer: ViewStyle;
|
|
10
10
|
text: TextStyle;
|
|
11
11
|
before: ViewStyle;
|
|
12
12
|
after: ViewStyle;
|
|
13
|
+
noTextBorderStyle: ViewStyle;
|
|
13
14
|
};
|
|
14
15
|
export { getStyles };
|
|
@@ -3,7 +3,8 @@ export declare const getStyles: (themeColor: any, typography: any) => {
|
|
|
3
3
|
display: "flex";
|
|
4
4
|
flexDirection: "row";
|
|
5
5
|
alignItems: "center";
|
|
6
|
-
justifyContent: "
|
|
6
|
+
justifyContent: "space-between";
|
|
7
|
+
width: number;
|
|
7
8
|
};
|
|
8
9
|
opacity: {
|
|
9
10
|
opacity: number;
|
|
@@ -19,7 +20,6 @@ export declare const getStyles: (themeColor: any, typography: any) => {
|
|
|
19
20
|
lineHeight: number;
|
|
20
21
|
};
|
|
21
22
|
text: {
|
|
22
|
-
paddingHorizontal: number;
|
|
23
23
|
fontWeight: any;
|
|
24
24
|
fontSize: any;
|
|
25
25
|
color: any;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xhsreds/reds-rn-next",
|
|
3
|
-
"version": "0.10.1-
|
|
3
|
+
"version": "0.10.1-beta202512021041",
|
|
4
4
|
"author": "贾斌(呀哈) <jiabin@xiaohongshu.com>",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"dependencies": {
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"react-native-fs": "2.20.0",
|
|
27
27
|
"react-native-svg": "13.14.0",
|
|
28
28
|
"@xhs/react-native-harmony": "*",
|
|
29
|
-
"@xhsreds/reds-token-next": "0.10.1-
|
|
29
|
+
"@xhsreds/reds-token-next": "0.10.1-beta202512021041"
|
|
30
30
|
},
|
|
31
31
|
"peerDependenciesMeta": {
|
|
32
32
|
"ozone-schema-web": {
|
|
@@ -1,5 +1,14 @@
|
|
|
1
1
|
import React, { useState, useMemo, isValidElement, useEffect, useRef } from "react";
|
|
2
|
-
import {
|
|
2
|
+
import {
|
|
3
|
+
Text,
|
|
4
|
+
View,
|
|
5
|
+
TouchableWithoutFeedback,
|
|
6
|
+
GestureResponderEvent,
|
|
7
|
+
Animated,
|
|
8
|
+
Image,
|
|
9
|
+
Dimensions,
|
|
10
|
+
Platform,
|
|
11
|
+
} from "react-native";
|
|
3
12
|
import { RedsActionablePopover, ActionablePopoverData } from "./interface/index";
|
|
4
13
|
import { ModalWrapper } from "./component";
|
|
5
14
|
import useMounted from "../../pvCount/useUnmountedProcess";
|
|
@@ -1,28 +1,48 @@
|
|
|
1
|
-
import React from "react";
|
|
1
|
+
import React, { useState, useMemo } from "react";
|
|
2
2
|
import { View, Text } from "react-native";
|
|
3
3
|
import { RedsDivider, DividerDefaultProps } from "./interface";
|
|
4
4
|
import { getStyles } from "./styles";
|
|
5
5
|
import useMounted from "../../pvCount/useUnmountedProcess";
|
|
6
|
+
import { useThemeColor, useThemeTypography } from "../ConfigProvider";
|
|
6
7
|
|
|
7
8
|
const Divider = (props: RedsDivider) => {
|
|
9
|
+
const [textWidth, setTextWidth] = useState(0);
|
|
10
|
+
const [containerWidth, setContainerWidth] = useState(0);
|
|
11
|
+
const themeColor = useThemeColor("Divider");
|
|
12
|
+
const typography = useThemeTypography("Divider");
|
|
8
13
|
useMounted("Divider");
|
|
9
14
|
const finalProps: RedsDivider = {
|
|
10
15
|
...DividerDefaultProps,
|
|
11
16
|
...props,
|
|
12
|
-
direction: props.direction as RedsDivider["direction"],
|
|
13
|
-
orientation: props.orientation as RedsDivider["orientation"],
|
|
17
|
+
direction: (props.direction || DividerDefaultProps.direction) as RedsDivider["direction"],
|
|
18
|
+
orientation: (props.orientation || DividerDefaultProps.orientation) as RedsDivider["orientation"],
|
|
14
19
|
};
|
|
15
20
|
|
|
16
|
-
const styles =
|
|
17
|
-
|
|
21
|
+
const styles = useMemo(() => {
|
|
22
|
+
return getStyles(finalProps, textWidth, containerWidth, themeColor, typography);
|
|
23
|
+
}, [textWidth, containerWidth, themeColor, typography]);
|
|
24
|
+
|
|
25
|
+
const handleLayout = (e: any) => {
|
|
26
|
+
setTextWidth(e.nativeEvent.layout.width);
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
const handlerContainerWidth = (e: any) => {
|
|
30
|
+
setContainerWidth(e.nativeEvent.layout.width);
|
|
31
|
+
};
|
|
18
32
|
|
|
19
33
|
return (
|
|
20
|
-
<View style={[styles.divider, styles[finalProps.direction!]]}>
|
|
34
|
+
<View style={[styles.divider, styles[finalProps.direction!]]} onLayout={handlerContainerWidth}>
|
|
21
35
|
{finalProps.orientation && finalProps.direction !== "vertical" && (
|
|
22
36
|
<View style={styles.textContainer}>
|
|
23
|
-
|
|
24
|
-
{props.children
|
|
25
|
-
|
|
37
|
+
<View style={styles.before} />
|
|
38
|
+
{props.children ? (
|
|
39
|
+
<Text style={styles.text} onLayout={handleLayout}>
|
|
40
|
+
{props.children}
|
|
41
|
+
</Text>
|
|
42
|
+
) : (
|
|
43
|
+
<Text style={styles.noTextBorderStyle}></Text>
|
|
44
|
+
)}
|
|
45
|
+
<View style={styles.after} />
|
|
26
46
|
</View>
|
|
27
47
|
)}
|
|
28
48
|
</View>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React, { useState } from "react";
|
|
2
|
-
import { View, Text, StyleSheet } from "react-native";
|
|
2
|
+
import { View, Text, StyleSheet, ScrollView } from "react-native";
|
|
3
3
|
import { Divider } from "@xhs/reds-rn-next";
|
|
4
4
|
|
|
5
5
|
const styles = StyleSheet.create({
|
|
@@ -21,23 +21,29 @@ const Br = (props: { height?: number }) => <View style={{ height: props.height |
|
|
|
21
21
|
|
|
22
22
|
export default function App() {
|
|
23
23
|
return (
|
|
24
|
-
<
|
|
24
|
+
<ScrollView>
|
|
25
|
+
<Br />
|
|
26
|
+
<Br />
|
|
25
27
|
<Desc>默认用法</Desc>
|
|
26
28
|
<Divider>测试</Divider>
|
|
27
29
|
<Br />
|
|
28
|
-
<Desc>direction
|
|
30
|
+
<Desc>direction="primary"</Desc>
|
|
29
31
|
<Divider direction="primary" orientation={"center"}>
|
|
30
32
|
测试
|
|
31
33
|
</Divider>
|
|
32
34
|
<Br />
|
|
33
|
-
<
|
|
35
|
+
<Desc>direction="secondary"</Desc>
|
|
36
|
+
<Divider direction="secondary" orientation={"center"}>
|
|
37
|
+
测试
|
|
38
|
+
</Divider>
|
|
34
39
|
<Br />
|
|
35
40
|
|
|
41
|
+
<Desc>direction="vertical"</Desc>
|
|
36
42
|
<View style={styles.itemBox}>
|
|
37
43
|
<Divider direction="vertical">测试</Divider>
|
|
38
44
|
</View>
|
|
45
|
+
<Desc>direction="horizontal"</Desc>
|
|
39
46
|
<Divider direction="horizontal">测试</Divider>
|
|
40
|
-
<Divider direction="horizontal"></Divider>
|
|
41
47
|
<Br />
|
|
42
48
|
<Br />
|
|
43
49
|
|
|
@@ -67,6 +73,6 @@ export default function App() {
|
|
|
67
73
|
<Desc>margin 数组:horizontal / [上下,左右] vertical / [左右]</Desc>
|
|
68
74
|
<Divider margin={[10, 20]} stroke={2} direction="horizontal" />
|
|
69
75
|
<Divider margin={[10, 0]} stroke={2} direction="vertical" />
|
|
70
|
-
</
|
|
76
|
+
</ScrollView>
|
|
71
77
|
);
|
|
72
78
|
}
|
|
@@ -1,38 +1,30 @@
|
|
|
1
1
|
import { StyleSheet, ViewStyle, TextStyle, DimensionValue } from "react-native";
|
|
2
2
|
import { RedsDivider, DividerDefaultProps } from "./interface";
|
|
3
|
-
import { useThemeColor, useThemeTypography } from "../ConfigProvider";
|
|
4
3
|
|
|
5
4
|
const baseDivider: ViewStyle = {
|
|
6
5
|
position: "relative",
|
|
7
6
|
};
|
|
8
7
|
|
|
9
|
-
const
|
|
10
|
-
paddingVertical: 0,
|
|
11
|
-
paddingHorizontal: 16,
|
|
12
|
-
position: "absolute",
|
|
13
|
-
backgroundColor: "#fff",
|
|
14
|
-
lineHeight: 18,
|
|
15
|
-
};
|
|
16
|
-
|
|
17
|
-
const getStyles = (p: RedsDivider) => {
|
|
8
|
+
const getStyles = (p: RedsDivider, textWidth: number, containerWidth: number, themeColor: any, typography: any) => {
|
|
18
9
|
const props = { ...DividerDefaultProps, ...p };
|
|
19
|
-
const themeColor = useThemeColor("Divider");
|
|
20
|
-
const typography = useThemeTypography("Divider");
|
|
21
10
|
const isHorizontal = props.direction === "horizontal";
|
|
11
|
+
const hasTextContent = p.children;
|
|
12
|
+
|
|
13
|
+
const remainingWidth = containerWidth - textWidth;
|
|
14
|
+
|
|
22
15
|
const beforeAfterCommon: ViewStyle = {
|
|
23
16
|
borderStyle: "solid",
|
|
24
|
-
borderTopWidth: 0.5,
|
|
17
|
+
borderTopWidth: props.stroke || 0.5,
|
|
25
18
|
borderColor: props.color || themeColor.Separator2,
|
|
26
|
-
width: 8,
|
|
27
19
|
};
|
|
28
20
|
|
|
29
21
|
const dividerStyle: ViewStyle = {
|
|
30
22
|
...baseDivider,
|
|
31
|
-
borderBottomWidth: isHorizontal ? (props.stroke ? props.stroke : StyleSheet.hairlineWidth) : 0,
|
|
32
|
-
borderLeftWidth: isHorizontal ? 0 : props.stroke ? props.stroke : StyleSheet.hairlineWidth,
|
|
33
|
-
borderBottomColor: isHorizontal ? props.color || themeColor.Separator2 : undefined,
|
|
34
|
-
borderLeftColor: isHorizontal ? undefined : props.color || themeColor.Separator2,
|
|
35
|
-
borderStyle: "solid",
|
|
23
|
+
// borderBottomWidth: isHorizontal && hasTextContent ? 0 : (isHorizontal ? (props.stroke ? props.stroke : StyleSheet.hairlineWidth) : 0),
|
|
24
|
+
// borderLeftWidth: isHorizontal ? 0 : props.stroke ? props.stroke : StyleSheet.hairlineWidth,
|
|
25
|
+
// borderBottomColor: isHorizontal && !hasTextContent ? props.color || themeColor.Separator2 : undefined,
|
|
26
|
+
// borderLeftColor: isHorizontal ? undefined : props.color || themeColor.Separator2,
|
|
27
|
+
// borderStyle: "solid",
|
|
36
28
|
marginVertical: (props.margin && props.margin[0] && Number(props.margin[0])) || (isHorizontal ? 20 : 0),
|
|
37
29
|
marginHorizontal: (props.margin && props.margin[1] && Number(props.margin[1])) || (isHorizontal ? 0 : 12),
|
|
38
30
|
marginLeft:
|
|
@@ -47,17 +39,11 @@ const getStyles = (p: RedsDivider) => {
|
|
|
47
39
|
width: (isHorizontal ? props.size : "auto") as DimensionValue,
|
|
48
40
|
};
|
|
49
41
|
|
|
50
|
-
const textContainer:
|
|
51
|
-
paddingVertical: 0,
|
|
52
|
-
paddingHorizontal: 16,
|
|
53
|
-
position: "absolute",
|
|
54
|
-
lineHeight: 18,
|
|
55
|
-
left: props.orientation === "left" ? 24 : undefined,
|
|
56
|
-
right: props.orientation === "right" ? 24 : undefined,
|
|
57
|
-
alignSelf: props.orientation === "center" ? "center" : undefined,
|
|
42
|
+
const textContainer: ViewStyle = {
|
|
58
43
|
flexDirection: "row",
|
|
59
44
|
alignItems: "center",
|
|
60
|
-
|
|
45
|
+
width: "100%",
|
|
46
|
+
// 移除 position absolute,改为正常布局
|
|
61
47
|
};
|
|
62
48
|
|
|
63
49
|
const textStyle: TextStyle = {
|
|
@@ -78,13 +64,29 @@ const getStyles = (p: RedsDivider) => {
|
|
|
78
64
|
|
|
79
65
|
const beforeStyle: ViewStyle = {
|
|
80
66
|
...beforeAfterCommon,
|
|
81
|
-
marginRight: 8,
|
|
67
|
+
marginRight: props.children ? 8 : 0,
|
|
68
|
+
...(isHorizontal
|
|
69
|
+
? props.orientation === "center"
|
|
70
|
+
? { flex: 1 }
|
|
71
|
+
: { width: props.orientation === "left" ? remainingWidth * 0.15 : remainingWidth * 0.85 }
|
|
72
|
+
: { width: 8 }),
|
|
82
73
|
borderColor: props.direction === "secondary" ? "rgba(51, 51, 51, .3)" : props.color || themeColor.Separator2,
|
|
83
74
|
};
|
|
84
75
|
|
|
85
76
|
const afterStyle: ViewStyle = {
|
|
86
77
|
...beforeAfterCommon,
|
|
87
|
-
marginLeft: 8,
|
|
78
|
+
marginLeft: props.children ? 8 : 0,
|
|
79
|
+
...(isHorizontal
|
|
80
|
+
? props.orientation === "center"
|
|
81
|
+
? { flex: 1 }
|
|
82
|
+
: { width: props.orientation === "right" ? remainingWidth * 0.15 : remainingWidth * 0.85 }
|
|
83
|
+
: { width: 8 }),
|
|
84
|
+
borderColor: props.direction === "secondary" ? "rgba(51, 51, 51, .3)" : props.color || themeColor.Separator2,
|
|
85
|
+
};
|
|
86
|
+
|
|
87
|
+
const noTextBorderStyle: ViewStyle = {
|
|
88
|
+
...beforeAfterCommon,
|
|
89
|
+
width: "auto",
|
|
88
90
|
borderColor: props.direction === "secondary" ? "rgba(51, 51, 51, .3)" : props.color || themeColor.Separator2,
|
|
89
91
|
};
|
|
90
92
|
|
|
@@ -104,6 +106,7 @@ const getStyles = (p: RedsDivider) => {
|
|
|
104
106
|
text: textStyle,
|
|
105
107
|
before: beforeStyle,
|
|
106
108
|
after: afterStyle,
|
|
109
|
+
noTextBorderStyle: noTextBorderStyle,
|
|
107
110
|
});
|
|
108
111
|
};
|
|
109
112
|
|
|
@@ -21,6 +21,8 @@ export interface RedsListItem {
|
|
|
21
21
|
contentStyle?: ViewStyle;
|
|
22
22
|
badgeActionContent?: string;
|
|
23
23
|
badgeTitleContent?: string;
|
|
24
|
+
style?: any;
|
|
25
|
+
lineStyle?: any;
|
|
24
26
|
}
|
|
25
27
|
|
|
26
28
|
const ListItem: React.FC<RedsListItem> = ({
|
|
@@ -38,6 +40,8 @@ const ListItem: React.FC<RedsListItem> = ({
|
|
|
38
40
|
children,
|
|
39
41
|
badgeActionContent,
|
|
40
42
|
badgeTitleContent,
|
|
43
|
+
style,
|
|
44
|
+
lineStyle,
|
|
41
45
|
}) => {
|
|
42
46
|
useMounted("ListItem");
|
|
43
47
|
const styles = createStyles();
|
|
@@ -66,6 +70,7 @@ const ListItem: React.FC<RedsListItem> = ({
|
|
|
66
70
|
styles.listItem,
|
|
67
71
|
children ? {} : { height: listItemSizeToHeight[size] },
|
|
68
72
|
size === "expand" && styles.expand,
|
|
73
|
+
style,
|
|
69
74
|
]}
|
|
70
75
|
>
|
|
71
76
|
{children ? (
|
|
@@ -75,7 +80,13 @@ const ListItem: React.FC<RedsListItem> = ({
|
|
|
75
80
|
{prefix && (
|
|
76
81
|
<View style={[styles.prefix, { height: listItemSizeToHeight[size] }, prefixStyle]}>{prefix}</View>
|
|
77
82
|
)}
|
|
78
|
-
<View
|
|
83
|
+
<View
|
|
84
|
+
style={[
|
|
85
|
+
styles.contentBox,
|
|
86
|
+
lineItem ? { ...styles.hr, ...lineStyle } : {},
|
|
87
|
+
{ height: listItemSizeToHeight[size] },
|
|
88
|
+
]}
|
|
89
|
+
>
|
|
79
90
|
<View
|
|
80
91
|
style={[styles.contentContainer, { marginBottom: 12, marginTop: 12 }, prefix ? { height: 48 } : {}]}
|
|
81
92
|
>
|