@bigbinary/neetoui-rn 0.0.78 → 0.0.79
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.ToggleSwitch=void 0;var
|
|
1
|
+
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.ToggleSwitch=void 0;var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _react=_interopRequireWildcard(require("react"));var _reactNativeSwitchToggle=_interopRequireDefault(require("react-native-switch-toggle"));var _native=require("styled-components/native");var _reactNative=require("react-native");var _propTypes=_interopRequireDefault(require("prop-types"));var _=require("./");var _excluded=["value","onValueChange","label","disabled","labelPosition"];var _this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/ToggleSwitch.js";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}var Label=function Label(_ref){var label=_ref.label,textStyles=_ref.textStyles;return _react.default.createElement(_.Typography,(0,_extends2.default)({textStyle:"subtext"},textStyles,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:39,columnNumber:5}}),label);};var ToggleSwitch=function ToggleSwitch(_ref2){var value=_ref2.value,onValueChange=_ref2.onValueChange,label=_ref2.label,disabled=_ref2.disabled,labelPosition=_ref2.labelPosition,rest=(0,_objectWithoutProperties2.default)(_ref2,_excluded);var theme=(0,_react.useContext)(_native.ThemeContext);var circleColorOn=disabled?theme.colors.background.grey500:theme.colors.background.white;var circleColorOff=disabled?theme.colors.background.menubackground:theme.colors.background.white;return _react.default.createElement(_.Container,(0,_extends2.default)({flexDirection:"row",borderColor:theme.colors.border.primary,alignItems:"center"},rest.wrapperStyles,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:63,columnNumber:5}}),labelPosition==="left"&&_react.default.createElement(Label,{label:label,textStyles:rest.textStyles,__self:_this,__source:{fileName:_jsxFileName,lineNumber:70,columnNumber:9}}),_react.default.createElement(_reactNativeSwitchToggle.default,(0,_extends2.default)({switchOn:value,onPress:function onPress(){return!disabled&&onValueChange();},circleColorOn:circleColorOn,circleColorOff:circleColorOff,backgroundColorOff:theme.colors.background.grey200,backgroundColorOn:theme.colors.background.grey800,containerStyle:styles.containerStyle,circleStyle:styles.circleStyle},rest.switchStyles,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:72,columnNumber:7}})),labelPosition==="right"&&_react.default.createElement(Label,{label:label,textStyles:rest.textStyles,__self:_this,__source:{fileName:_jsxFileName,lineNumber:84,columnNumber:9}}));};exports.ToggleSwitch=ToggleSwitch;ToggleSwitch.defaultProps={labelPosition:"left",wrapperStyles:{},switchStyles:{},textStyles:{mr:2}};ToggleSwitch.propTypes={label:_propTypes.default.string,labelPosition:_propTypes.default.string,value:_propTypes.default.bool.isRequired,onValueChange:_propTypes.default.func,disabled:_propTypes.default.bool,wrapperStyles:_propTypes.default.object,switchStyles:_propTypes.default.object,textStyles:_propTypes.default.object};Label.propTypes={label:_propTypes.default.string,textStyles:_propTypes.default.object};var styles=_reactNative.StyleSheet.create({containerStyle:{width:38,height:18,borderRadius:10,padding:2},circleStyle:{width:14,height:14,borderRadius:7}});
|
package/package.json
CHANGED
|
@@ -34,11 +34,20 @@ import { Typography, Container } from "@components";
|
|
|
34
34
|
* ```
|
|
35
35
|
*/
|
|
36
36
|
|
|
37
|
+
const Label = ({ label, textStyles }) => {
|
|
38
|
+
return (
|
|
39
|
+
<Typography textStyle="subtext" {...textStyles}>
|
|
40
|
+
{label}
|
|
41
|
+
</Typography>
|
|
42
|
+
);
|
|
43
|
+
};
|
|
44
|
+
|
|
37
45
|
export const ToggleSwitch = ({
|
|
38
46
|
value,
|
|
39
47
|
onValueChange,
|
|
40
48
|
label,
|
|
41
49
|
disabled,
|
|
50
|
+
labelPosition,
|
|
42
51
|
...rest
|
|
43
52
|
}) => {
|
|
44
53
|
const theme = useContext(ThemeContext);
|
|
@@ -55,39 +64,45 @@ export const ToggleSwitch = ({
|
|
|
55
64
|
flexDirection="row"
|
|
56
65
|
borderColor={theme.colors.border.primary}
|
|
57
66
|
alignItems="center"
|
|
58
|
-
{...rest}
|
|
67
|
+
{...rest.wrapperStyles}
|
|
59
68
|
>
|
|
60
|
-
|
|
61
|
-
{label}
|
|
62
|
-
|
|
63
|
-
<
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
69
|
+
{labelPosition === "left" && (
|
|
70
|
+
<Label label={label} textStyles={rest.textStyles} />
|
|
71
|
+
)}
|
|
72
|
+
<SwitchToggle
|
|
73
|
+
switchOn={value}
|
|
74
|
+
onPress={() => !disabled && onValueChange()}
|
|
75
|
+
circleColorOn={circleColorOn}
|
|
76
|
+
circleColorOff={circleColorOff}
|
|
77
|
+
backgroundColorOff={theme.colors.background.grey200}
|
|
78
|
+
backgroundColorOn={theme.colors.background.grey800}
|
|
79
|
+
containerStyle={styles.containerStyle}
|
|
80
|
+
circleStyle={styles.circleStyle}
|
|
81
|
+
{...rest.switchStyles}
|
|
82
|
+
/>
|
|
83
|
+
{labelPosition === "right" && (
|
|
84
|
+
<Label label={label} textStyles={rest.textStyles} />
|
|
85
|
+
)}
|
|
76
86
|
</Container>
|
|
77
87
|
);
|
|
78
88
|
};
|
|
79
89
|
|
|
80
90
|
ToggleSwitch.defaultProps = {
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
91
|
+
labelPosition: "left",
|
|
92
|
+
wrapperStyles: {},
|
|
93
|
+
switchStyles: {},
|
|
94
|
+
textStyles: { mr: 2 },
|
|
84
95
|
};
|
|
85
96
|
|
|
86
97
|
ToggleSwitch.propTypes = {
|
|
87
98
|
/**
|
|
88
99
|
* The text to use for the floating label.
|
|
89
100
|
*/
|
|
90
|
-
label: PropTypes.string
|
|
101
|
+
label: PropTypes.string,
|
|
102
|
+
/**
|
|
103
|
+
* Prop that handles the label position.
|
|
104
|
+
*/
|
|
105
|
+
labelPosition: PropTypes.string,
|
|
91
106
|
/**
|
|
92
107
|
* Value of the switch, true means 'on', false means 'off'.
|
|
93
108
|
*/
|
|
@@ -100,6 +115,23 @@ ToggleSwitch.propTypes = {
|
|
|
100
115
|
* Disable toggling the switch.
|
|
101
116
|
*/
|
|
102
117
|
disabled: PropTypes.bool,
|
|
118
|
+
/**
|
|
119
|
+
* Prop to handle custom wrapper styles.
|
|
120
|
+
*/
|
|
121
|
+
wrapperStyles: PropTypes.object,
|
|
122
|
+
/**
|
|
123
|
+
* Prop to handle custom switch styles.
|
|
124
|
+
*/
|
|
125
|
+
switchStyles: PropTypes.object,
|
|
126
|
+
/**
|
|
127
|
+
* Prop to handle custom text styles.
|
|
128
|
+
*/
|
|
129
|
+
textStyles: PropTypes.object,
|
|
130
|
+
};
|
|
131
|
+
|
|
132
|
+
Label.propTypes = {
|
|
133
|
+
label: PropTypes.string,
|
|
134
|
+
textStyles: PropTypes.object,
|
|
103
135
|
};
|
|
104
136
|
|
|
105
137
|
const styles = StyleSheet.create({
|