|
|
@@ -20,9 +20,11 @@ export default function Component(props: {
|
|
|
scale: number,
|
|
|
changed: Function, unit: string
|
|
|
themeColor: string,
|
|
|
- updateStatus: Function
|
|
|
+ updateStatus: Function,
|
|
|
+ special: any
|
|
|
}) {
|
|
|
const scrollViewRef = useRef<any>();
|
|
|
+ const isFT_IN = props.special == 'FT_IN'
|
|
|
const minNum: number = props.min;//props.step < 1 ?props.default_value-2:props.default_value-20//
|
|
|
const maxNum: number = props.max;//props.step < 1 ?props.default_value+2:props.default_value+20//
|
|
|
const min = props.min//(props.default_value - props.step * 20) < props.min ? props.min : props.default_value - props.step * 20
|
|
|
@@ -38,12 +40,12 @@ export default function Component(props: {
|
|
|
const slidngWidth = 10
|
|
|
|
|
|
const [current, setCurrent] = useState(props.default_value)
|
|
|
- const [left, setLeft] = useState((props.default_value - min) * slidngWidth * (props.unit == 'in' ? 1.2 : 1) / props.step - 0.5);
|
|
|
+ const [left, setLeft] = useState((props.default_value - min) * slidngWidth * (isFT_IN ? 1.2 : 1) / props.step - 0.5);
|
|
|
const [isDraging, setIsDraging] = useState(false)
|
|
|
const [isEnd, setIsEnd] = useState(true)
|
|
|
const [enableText, setEnableText] = useState(true)
|
|
|
|
|
|
- if (props.unit == 'in') {
|
|
|
+ if (isFT_IN) {
|
|
|
for (var i: number = minNum; i <= maxNum * 1.2; i += props.step) {
|
|
|
var value: number = parseFloat(i.toFixed(props.scale == 0 ? 1 : props.scale));
|
|
|
var isBig: boolean = i % 12 == 0;
|
|
|
@@ -146,7 +148,7 @@ export default function Component(props: {
|
|
|
const { scrollLeft } = e.detail;
|
|
|
|
|
|
var count = scrollLeft / slidngWidth;
|
|
|
- if (props.unit == 'in') {
|
|
|
+ if (isFT_IN) {
|
|
|
count = count / 1.2
|
|
|
}
|
|
|
var strValue = (minNum + Math.round(count) * props.step).toFixed(props.scale == 0 ? 1 : props.scale);
|
|
|
@@ -193,9 +195,9 @@ export default function Component(props: {
|
|
|
const scrollEnd = (e) => {
|
|
|
}
|
|
|
|
|
|
- var svgLine = `<svg xmlns="http://www.w3.org/2000/svg" width="${props.unit == 'in' ? 144 : 100}" height="${rpxToPx(28)}">`;
|
|
|
+ var svgLine = `<svg xmlns="http://www.w3.org/2000/svg" width="${isFT_IN ? 144 : 100}" height="${rpxToPx(28)}">`;
|
|
|
var svgNumber = `<svg xmlns="http://www.w3.org/2000/svg" width="${list.length * 10 - 8 + 60}" height="${rpxToPx(38)}">`;
|
|
|
- if (props.unit == 'in') {
|
|
|
+ if (isFT_IN) {
|
|
|
for (var i = 0; i < 12; i++) {
|
|
|
var obj = list[i];
|
|
|
svgLine += `<line x1="${i * 12 + 1}" y1="0" x2="${i * 12 + 1}" y2="${obj.showBig ? rpxToPx(28) : obj.showMiddle ? rpxToPx(24) : rpxToPx(16)}" stroke="${props.themeColor}" stroke-width="2"/>`
|
|
|
@@ -214,7 +216,7 @@ export default function Component(props: {
|
|
|
var obj = list[i];
|
|
|
if (obj.showBig) {
|
|
|
//字体设置参考 https://segmentfault.com/a/1190000006110417
|
|
|
- svgNumber += `<text x="${i * (props.unit == 'in' ? 12 : 10) + 1 + 30}" y="${rpxToPx(2 + 36)}" text-anchor="middle" fill="white" font-family="PingFang SC,Helvetica Neue,Helvetica,Arial,Hiragino Sans GB,Heiti SC,Microsoft YaHei" font-size="${rpxToPx(36)}">${obj.value}</text>`
|
|
|
+ svgNumber += `<text x="${i * (isFT_IN ? 12 : 10) + 1 + 30}" y="${rpxToPx(2 + 36)}" text-anchor="middle" fill="white" font-family="PingFang SC,Helvetica Neue,Helvetica,Arial,Hiragino Sans GB,Heiti SC,Microsoft YaHei" font-size="${rpxToPx(36)}">${parseInt('' + obj.value / 12)}</text>`
|
|
|
}
|
|
|
}
|
|
|
svgLine += `</svg>`
|
|
|
@@ -226,9 +228,9 @@ export default function Component(props: {
|
|
|
var imgNum = `url("data:image/svg+xml,${basestr2}");`
|
|
|
|
|
|
var svgLine2 = `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">`
|
|
|
- svgLine2 += `<pattern id="pattern" width="${props.unit == 'in' ? 120 : 100}" height="${rpxToPx(28)}" patternUnits="userSpaceOnUse">`
|
|
|
+ svgLine2 += `<pattern id="pattern" width="${isFT_IN ? 120 : 100}" height="${rpxToPx(28)}" patternUnits="userSpaceOnUse">`
|
|
|
|
|
|
- if (props.unit == 'in') {
|
|
|
+ if (isFT_IN) {
|
|
|
for (var i = 0; i < 12; i++) {
|
|
|
var obj = list[i];
|
|
|
svgLine2 += `<line x1="${i * 12 + 1}" y1="0" x2="${i * 12 + 1}" y2="${obj.showBig ? rpxToPx(28) : obj.showMiddle ? rpxToPx(24) : rpxToPx(16)}" stroke="${props.themeColor}" stroke-width="2"/>`
|
|
|
@@ -247,7 +249,7 @@ export default function Component(props: {
|
|
|
|
|
|
return <View className="slidng">
|
|
|
{
|
|
|
- props.unit == 'in' && <View className="number_bg" style={{ opacity: enableText ? 1 : 0.4 }}>
|
|
|
+ isFT_IN && <View className="number_bg" style={{ opacity: enableText ? 1 : 0.4 }}>
|
|
|
{
|
|
|
parseInt(current / 12 + '') > 0 && (process.env.TARO_ENV == 'weapp' ? <Text className="number" style={{ fontFamily: "PingFang SC,Helvetica Neue, Helvetica, Arial, Hiragino Sans GB, Heiti SC, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif;" }}>{parseInt(current / 12 + '')}</Text> :
|
|
|
<Text className="number">{parseInt(current / 12 + '')}</Text>)
|
|
|
@@ -301,7 +303,7 @@ export default function Component(props: {
|
|
|
<View>
|
|
|
<View style={{ width: list.length * 10 - 8, height: 100 }}>
|
|
|
{
|
|
|
- process.env.TARO_ENV == 'weapp' && <View style={{ width: props.unit == 'in' ? list.length * 10 - 8 : list.length * 10 - 8, height: rpxToPx(28), backgroundImage: imgLines, overflow: 'hidden' }} />
|
|
|
+ process.env.TARO_ENV == 'weapp' && <View style={{ width: isFT_IN ? list.length * 10 - 8 : list.length * 10 - 8, height: rpxToPx(28), backgroundImage: imgLines, overflow: 'hidden' }} />
|
|
|
}
|
|
|
{
|
|
|
process.env.TARO_ENV == 'rn' && <SvgXml xml={svgLine2} width={list.length * 10 - 8} height={rpxToPx(28)} />
|