zoriya/react-native-web
1
0
Fork 0
mirror of https://github.com/zoriya/react-native-web.git synced 2026-05-24 15:18:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

[fix] RTL translateX; Switch transition

Browse Source
This commit is contained in:
Nicolas Gallagher
2016-12-08 19:40:34 -08:00
parent 5c482ef3be
commit 4d5819ae28
3 changed files with 36 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Switch/__tests__/__snapshots__/index-test.js.snap
+31 -19
View File
@@ -67,7 +67,7 @@ exports[`components/Switch disabled when "false" a default checkbox is rendered
"WebkitFlexBasis": "auto",
"WebkitFlexDirection": "column",
"WebkitFlexShrink": 0,
"WebkitTransition": "background-color 0.1s",
"WebkitTransition": "0.1s",
"alignItems": "stretch",
"backgroundColor": "#939393",
"borderBottomLeftRadius": "10px",
@@ -112,7 +112,7 @@ exports[`components/Switch disabled when "false" a default checkbox is rendered
"textAlign": "inherit",
"textDecoration": "none",
"top": "0px",
"transition": "background-color 0.1s",
"transition": "0.1s",
"width": "90%",
}
} />
@@ -129,7 +129,8 @@ exports[`components/Switch disabled when "false" a default checkbox is rendered
"WebkitFlexBasis": "auto",
"WebkitFlexDirection": "column",
"WebkitFlexShrink": 0,
"WebkitTransition": "background-color 0.1s",
"WebkitTransform": "translateX(0%)",
"WebkitTransition": "0.1s",
"alignItems": "stretch",
"alignSelf": "flex-start",
"backgroundColor": "#FAFAFA",
@@ -166,6 +167,7 @@ exports[`components/Switch disabled when "false" a default checkbox is rendered
"msFlexItemAlign": "start",
"msFlexNegative": 0,
"msPreferredSize": "auto",
"msTransform": "translateX(0%)",
"paddingBottom": "0px",
"paddingLeft": "0px",
"paddingRight": "0px",
@@ -173,7 +175,8 @@ exports[`components/Switch disabled when "false" a default checkbox is rendered
"position": "relative",
"textAlign": "inherit",
"textDecoration": "none",
"transition": "background-color 0.1s",
"transform": "translateX(0%)",
"transition": "0.1s",
"width": "20px",
}
} />
@@ -278,7 +281,7 @@ exports[`components/Switch disabled when "true" a disabled checkbox is rendered
"WebkitFlexBasis": "auto",
"WebkitFlexDirection": "column",
"WebkitFlexShrink": 0,
"WebkitTransition": "background-color 0.1s",
"WebkitTransition": "0.1s",
"alignItems": "stretch",
"backgroundColor": "#D5D5D5",
"borderBottomLeftRadius": "10px",
@@ -323,7 +326,7 @@ exports[`components/Switch disabled when "true" a disabled checkbox is rendered
"textAlign": "inherit",
"textDecoration": "none",
"top": "0px",
"transition": "background-color 0.1s",
"transition": "0.1s",
"width": "90%",
}
} />
@@ -340,7 +343,8 @@ exports[`components/Switch disabled when "true" a disabled checkbox is rendered
"WebkitFlexBasis": "auto",
"WebkitFlexDirection": "column",
"WebkitFlexShrink": 0,
"WebkitTransition": "background-color 0.1s",
"WebkitTransform": "translateX(0%)",
"WebkitTransition": "0.1s",
"alignItems": "stretch",
"alignSelf": "flex-start",
"backgroundColor": "#BDBDBD",
@@ -377,6 +381,7 @@ exports[`components/Switch disabled when "true" a disabled checkbox is rendered
"msFlexItemAlign": "start",
"msFlexNegative": 0,
"msPreferredSize": "auto",
"msTransform": "translateX(0%)",
"paddingBottom": "0px",
"paddingLeft": "0px",
"paddingRight": "0px",
@@ -384,7 +389,8 @@ exports[`components/Switch disabled when "true" a disabled checkbox is rendered
"position": "relative",
"textAlign": "inherit",
"textDecoration": "none",
"transition": "background-color 0.1s",
"transform": "translateX(0%)",
"transition": "0.1s",
"width": "20px",
}
} />
@@ -489,7 +495,7 @@ exports[`components/Switch value when "false" an unchecked checkbox is rendered
"WebkitFlexBasis": "auto",
"WebkitFlexDirection": "column",
"WebkitFlexShrink": 0,
"WebkitTransition": "background-color 0.1s",
"WebkitTransition": "0.1s",
"alignItems": "stretch",
"backgroundColor": "#939393",
"borderBottomLeftRadius": "10px",
@@ -534,7 +540,7 @@ exports[`components/Switch value when "false" an unchecked checkbox is rendered
"textAlign": "inherit",
"textDecoration": "none",
"top": "0px",
"transition": "background-color 0.1s",
"transition": "0.1s",
"width": "90%",
}
} />
@@ -551,7 +557,8 @@ exports[`components/Switch value when "false" an unchecked checkbox is rendered
"WebkitFlexBasis": "auto",
"WebkitFlexDirection": "column",
"WebkitFlexShrink": 0,
"WebkitTransition": "background-color 0.1s",
"WebkitTransform": "translateX(0%)",
"WebkitTransition": "0.1s",
"alignItems": "stretch",
"alignSelf": "flex-start",
"backgroundColor": "#FAFAFA",
@@ -588,6 +595,7 @@ exports[`components/Switch value when "false" an unchecked checkbox is rendered
"msFlexItemAlign": "start",
"msFlexNegative": 0,
"msPreferredSize": "auto",
"msTransform": "translateX(0%)",
"paddingBottom": "0px",
"paddingLeft": "0px",
"paddingRight": "0px",
@@ -595,7 +603,8 @@ exports[`components/Switch value when "false" an unchecked checkbox is rendered
"position": "relative",
"textAlign": "inherit",
"textDecoration": "none",
"transition": "background-color 0.1s",
"transform": "translateX(0%)",
"transition": "0.1s",
"width": "20px",
}
} />
@@ -700,7 +709,7 @@ exports[`components/Switch value when "true" a checked checkbox is rendered 1`]
"WebkitFlexBasis": "auto",
"WebkitFlexDirection": "column",
"WebkitFlexShrink": 0,
"WebkitTransition": "background-color 0.1s",
"WebkitTransition": "0.1s",
"alignItems": "stretch",
"backgroundColor": "#A3D3CF",
"borderBottomLeftRadius": "10px",
@@ -745,7 +754,7 @@ exports[`components/Switch value when "true" a checked checkbox is rendered 1`]
"textAlign": "inherit",
"textDecoration": "none",
"top": "0px",
"transition": "background-color 0.1s",
"transition": "0.1s",
"width": "90%",
}
} />
@@ -755,16 +764,17 @@ exports[`components/Switch value when "true" a checked checkbox is rendered 1`]
Object {
"MozBoxSizing": "border-box",
"WebkitAlignItems": "stretch",
"WebkitAlignSelf": "flex-end",
"WebkitAlignSelf": "flex-start",
"WebkitBoxAlign": "stretch",
"WebkitBoxDirection": "normal",
"WebkitBoxOrient": "vertical",
"WebkitFlexBasis": "auto",
"WebkitFlexDirection": "column",
"WebkitFlexShrink": 0,
"WebkitTransition": "background-color 0.1s",
"WebkitTransform": "translateX(100%)",
"WebkitTransition": "0.1s",
"alignItems": "stretch",
"alignSelf": "flex-end",
"alignSelf": "flex-start",
"backgroundColor": "#009688",
"borderBottomLeftRadius": "100%",
"borderBottomRightRadius": "100%",
@@ -796,9 +806,10 @@ exports[`components/Switch value when "true" a checked checkbox is rendered 1`]
"minWidth": "0px",
"msFlexAlign": "stretch",
"msFlexDirection": "column",
"msFlexItemAlign": "end",
"msFlexItemAlign": "start",
"msFlexNegative": 0,
"msPreferredSize": "auto",
"msTransform": "translateX(100%)",
"paddingBottom": "0px",
"paddingLeft": "0px",
"paddingRight": "0px",
@@ -806,7 +817,8 @@ exports[`components/Switch value when "true" a checked checkbox is rendered 1`]
"position": "relative",
"textAlign": "inherit",
"textDecoration": "none",
"transition": "background-color 0.1s",
"transform": "translateX(100%)",
"transition": "0.1s",
"width": "20px",
}
} />
src/components/Switch/index.js
+4 -3
View File
@@ -88,9 +88,9 @@ class Switch extends Component {
const thumbStyle = [
styles.thumb,
{
alignSelf: value ? 'flex-end' : 'flex-start',
backgroundColor: thumbCurrentColor,
height: thumbHeight,
transform: [ { translateX: value ? '100%' : '0%' } ],
width: thumbWidth
},
disabled && styles.disabledThumb
@@ -151,16 +151,17 @@ const styles = StyleSheet.create({
...StyleSheet.absoluteFillObject,
height: '70%',
margin: 'auto',
transition: 'background-color 0.1s',
transition: '0.1s',
width: '90%'
},
disabledTrack: {
backgroundColor: '#D5D5D5'
},
thumb: {
alignSelf: 'flex-start',
borderRadius: '100%',
boxShadow: thumbDefaultBoxShadow,
transition: 'background-color 0.1s'
transition: '0.1s'
},
disabledThumb: {
backgroundColor: '#BDBDBD'
src/modules/multiplyStyleLengthValue/index.js
+1 -1
View File
@@ -1,4 +1,4 @@
const CSS_UNIT_RE = /^[+-]?\d*(?:\.\d+)?(?:[Ee][+-]?\d+)?(\w*)/;
const CSS_UNIT_RE = /^[+-]?\d*(?:\.\d+)?(?:[Ee][+-]?\d+)?(%|\w*)/;
const getUnit = (str) => str.match(CSS_UNIT_RE)[1];