@bigbinary/neetoui-rn 0.0.40 → 0.0.41

package/lib/components/Chip.js

@@ -0,0 +1 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.TouchableOpacity=exports.Chip=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var React=_interopRequireWildcard(require("react"));var _propTypes=_interopRequireDefault(require("prop-types"));var _styledSystem=require("styled-system");var _native=_interopRequireDefault(require("styled-components/native"));var _reactNativeRemixIcon=_interopRequireDefault(require("react-native-remix-icon"));var _=require("./");var _excluded=["label","LeftIcon","variant","labelColor","closeIconBackground","closeIconColor","onClose","onChipPress","isDisabled","closeIconSize","closeIcon"];var _templateObject,_this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Chip.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 TouchableOpacity=_native.default.TouchableOpacity(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2.default)(["\n  ","\n  ","\n  ","\n  ","\n  ","\n"])),_styledSystem.space,_styledSystem.border,_styledSystem.color,_styledSystem.flexbox,_styledSystem.layout);exports.TouchableOpacity=TouchableOpacity;var variantStyleObj={solid:{bg:"background.grey200"},outlined:{bg:"background.white",border:"1px solid",borderColor:"border.grey400"}};var Chip=function Chip(_ref){var label=_ref.label,LeftIcon=_ref.LeftIcon,variant=_ref.variant,labelColor=_ref.labelColor,closeIconBackground=_ref.closeIconBackground,closeIconColor=_ref.closeIconColor,onClose=_ref.onClose,onChipPress=_ref.onChipPress,isDisabled=_ref.isDisabled,closeIconSize=_ref.closeIconSize,closeIcon=_ref.closeIcon,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);return React.createElement(TouchableOpacity,(0,_extends2.default)({flexDirection:"row",p:2,borderRadius:20,alignItems:"center",onPress:onChipPress,disabled:!onChipPress||isDisabled},variant&&variantStyleObj[variant],isDisabled&&{opacity:0.5},rest.containerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:43,columnNumber:5}}),LeftIcon&&React.createElement(LeftIcon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:54,columnNumber:20}}),React.createElement(_.Typography,{mx:2,fontFamily:"inter400",color:labelColor,__self:_this,__source:{fileName:_jsxFileName,lineNumber:55,columnNumber:7}},label),onClose&&React.createElement(TouchableOpacity,(0,_extends2.default)({bg:closeIconBackground,borderRadius:10,disabled:isDisabled,onPress:onClose},rest.closeIconContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:59,columnNumber:9}}),React.createElement(_reactNativeRemixIcon.default,{name:closeIcon,size:closeIconSize,color:closeIconColor,__self:_this,__source:{fileName:_jsxFileName,lineNumber:66,columnNumber:11}})));};exports.Chip=Chip;Chip.defaultProps={variant:"outlined",labelColor:"font.primary",closeIconBackground:"background.grey500",closeIconColor:"white",isDisabled:false,closeIconSize:14,closeIcon:"ri-close-fill"};Chip.propTypes={label:_propTypes.default.string.isRequired,LeftIcon:_propTypes.default.elementType,variant:_propTypes.default.string,labelColor:_propTypes.default.string,closeIconBackground:_propTypes.default.string,closeIconColor:_propTypes.default.string,onClose:_propTypes.default.func,onChipPress:_propTypes.default.func,isDisabled:_propTypes.default.bool,closeIconSize:_propTypes.default.number,closeIcon:_propTypes.default.string};

package/lib/components/index.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"Avatar",{enumerable:true,get:function get(){return _Avatar.Avatar;}});Object.defineProperty(exports,"Badge",{enumerable:true,get:function get(){return _Badge.Badge;}});Object.defineProperty(exports,"BottomSheet",{enumerable:true,get:function get(){return _BottomSheet.BottomSheet;}});Object.defineProperty(exports,"Button",{enumerable:true,get:function get(){return _Button.Button;}});Object.defineProperty(exports,"Container",{enumerable:true,get:function get(){return _Container.Container;}});Object.defineProperty(exports,"FAB",{enumerable:true,get:function get(){return _FAB.FAB;}});Object.defineProperty(exports,"Input",{enumerable:true,get:function get(){return _Input.Input;}});Object.defineProperty(exports,"ToggleSwitch",{enumerable:true,get:function get(){return _ToggleSwitch.ToggleSwitch;}});Object.defineProperty(exports,"Typography",{enumerable:true,get:function get(){return _Typography.Typography;}});var _Button=require("./Button");var _Container=require("./Container");var _Typography=require("./Typography");var _Input=require("./Input");var _FAB=require("./FAB");var _ToggleSwitch=require("./ToggleSwitch");var _Avatar=require("./Avatar");var _Badge=require("./Badge");var _BottomSheet=require("./BottomSheet");
+Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"Avatar",{enumerable:true,get:function get(){return _Avatar.Avatar;}});Object.defineProperty(exports,"Badge",{enumerable:true,get:function get(){return _Badge.Badge;}});Object.defineProperty(exports,"BottomSheet",{enumerable:true,get:function get(){return _BottomSheet.BottomSheet;}});Object.defineProperty(exports,"Button",{enumerable:true,get:function get(){return _Button.Button;}});Object.defineProperty(exports,"Chip",{enumerable:true,get:function get(){return _Chip.Chip;}});Object.defineProperty(exports,"Container",{enumerable:true,get:function get(){return _Container.Container;}});Object.defineProperty(exports,"FAB",{enumerable:true,get:function get(){return _FAB.FAB;}});Object.defineProperty(exports,"Input",{enumerable:true,get:function get(){return _Input.Input;}});Object.defineProperty(exports,"ToggleSwitch",{enumerable:true,get:function get(){return _ToggleSwitch.ToggleSwitch;}});Object.defineProperty(exports,"Typography",{enumerable:true,get:function get(){return _Typography.Typography;}});var _Button=require("./Button");var _Container=require("./Container");var _Typography=require("./Typography");var _Input=require("./Input");var _FAB=require("./FAB");var _ToggleSwitch=require("./ToggleSwitch");var _Avatar=require("./Avatar");var _Badge=require("./Badge");var _BottomSheet=require("./BottomSheet");var _Chip=require("./Chip");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neetoui-rn",
-  "version": "0.0.40",
+  "version": "0.0.41",
   "main": "lib/index.js",
   "author": "BigBinary",
   "license": "MIT",
@@ -44,10 +44,13 @@
       "eslint --fix"
     ]
   },
-  "peerDependencies": {},
+  "peerDependencies": {
+    "react-native-svg": "*"
+  },
   "dependencies": {
     "@styled-system/prop-types": "^5.1.5",
     "react-native-modal": "^13.0.0",
+    "react-native-remix-icon": "^0.3.0",
     "react-native-switch-toggle": "^2.2.1",
     "styled-components": "^5.3.3",
     "styled-system": "^5.1.5"
@@ -102,6 +105,7 @@
     "react-dom": "17.0.2",
     "react-native": "0.66.2",
     "react-native-storybook-loader": "^2.0.4",
+    "react-native-svg": "^12.1.1",
     "react-native-web": "^0.17.5",
     "react-test-renderer": "17.0.2",
     "serve": "^13.0.2",

package/src/components/Chip.js

@@ -0,0 +1,95 @@
+import * as React from "react";
+import PropTypes from "prop-types";
+import { space, border, color, layout, flexbox } from "styled-system";
+import styled from "styled-components/native";
+import Icon from "react-native-remix-icon";
+
+import { Typography } from "@components";
+
+export const TouchableOpacity = styled.TouchableOpacity`
+  ${space}
+  ${border}
+  ${color}
+  ${flexbox}
+  ${layout}
+`;
+
+const variantStyleObj = {
+  solid: {
+    bg: "background.grey200",
+  },
+  outlined: {
+    bg: "background.white",
+    border: "1px solid",
+    borderColor: "border.grey400",
+  },
+};
+
+export const Chip = ({
+  label,
+  LeftIcon,
+  variant,
+  labelColor,
+  closeIconBackground,
+  closeIconColor,
+  onClose,
+  onChipPress,
+  isDisabled,
+  closeIconSize,
+  closeIcon,
+  ...rest
+}) => {
+  return (
+    <TouchableOpacity
+      flexDirection="row"
+      p={2}
+      borderRadius={20}
+      alignItems="center"
+      onPress={onChipPress}
+      disabled={!onChipPress || isDisabled}
+      {...(variant && variantStyleObj[variant])}
+      {...(isDisabled && { opacity: 0.5 })}
+      {...rest.containerStyle}
+    >
+      {LeftIcon && <LeftIcon />}
+      <Typography mx={2} fontFamily="inter400" color={labelColor}>
+        {label}
+      </Typography>
+      {onClose && (
+        <TouchableOpacity
+          bg={closeIconBackground}
+          borderRadius={10}
+          disabled={isDisabled}
+          onPress={onClose}
+          {...rest.closeIconContainerStyle}
+        >
+          <Icon name={closeIcon} size={closeIconSize} color={closeIconColor} />
+        </TouchableOpacity>
+      )}
+    </TouchableOpacity>
+  );
+};
+
+Chip.defaultProps = {
+  variant: "outlined",
+  labelColor: "font.primary",
+  closeIconBackground: "background.grey500",
+  closeIconColor: "white",
+  isDisabled: false,
+  closeIconSize: 14,
+  closeIcon: "ri-close-fill",
+};
+
+Chip.propTypes = {
+  label: PropTypes.string.isRequired,
+  LeftIcon: PropTypes.elementType,
+  variant: PropTypes.string,
+  labelColor: PropTypes.string,
+  closeIconBackground: PropTypes.string,
+  closeIconColor: PropTypes.string,
+  onClose: PropTypes.func,
+  onChipPress: PropTypes.func,
+  isDisabled: PropTypes.bool,
+  closeIconSize: PropTypes.number,
+  closeIcon: PropTypes.string,
+};

package/src/components/index.js

@@ -7,3 +7,4 @@ export { ToggleSwitch } from "./ToggleSwitch";
 export { Avatar } from "./Avatar";
 export { Badge } from "./Badge";
 export { BottomSheet } from "./BottomSheet";
+export { Chip } from "./Chip";