├── .editorconfig ├── .gitattributes ├── .github ├── actions │ └── setup │ │ └── action.yml └── workflows │ └── ci.yml ├── .gitignore ├── .nvmrc ├── .watchmanconfig ├── .yarn ├── plugins │ └── @yarnpkg │ │ ├── plugin-interactive-tools.cjs │ │ └── plugin-workspace-tools.cjs └── releases │ └── yarn-3.6.1.cjs ├── .yarnrc.yml ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── babel.config.js ├── example ├── App.js ├── app.json ├── assets │ ├── adaptive-icon.png │ ├── favicon.png │ ├── icon.png │ └── splash.png ├── babel.config.js ├── metro.config.js ├── package.json ├── src │ ├── App.tsx │ └── constants.ts ├── tsconfig.json └── webpack.config.js ├── lefthook.yml ├── package.json ├── src ├── __tests__ │ └── index.test.tsx ├── assets │ └── icons │ │ ├── checkedbox.png │ │ ├── chevron-down.png │ │ ├── close.png │ │ ├── uncheckedbox.png │ │ └── white-cross.png ├── components │ ├── BaseMultiPicker │ │ ├── OptionsModal.tsx │ │ ├── OptionsModal.type.ts │ │ ├── RNMultiPicker.tsx │ │ └── RNMultiPicker.type.ts │ ├── SectionedMultiPicker │ │ ├── RNSectionedMultiPicker.tsx │ │ ├── SectionedDropdownItem.tsx │ │ └── SectionedOptionsModal.tsx │ └── common │ │ ├── CheckBox.tsx │ │ ├── CheckedItem.tsx │ │ ├── CheckedItemList.tsx │ │ ├── DefaultCheckBox.tsx │ │ ├── DefaultFooterButton.tsx │ │ ├── SearchInput.tsx │ │ ├── ViewButton.tsx │ │ └── commonStyles.tsx ├── constants.ts ├── hooks │ ├── useDropdownList.ts │ ├── useMultiPickerItems.ts │ ├── useSearch.ts │ └── useSectionedMultiPickerItems.ts ├── index.tsx ├── types │ └── global.d.ts └── utils.ts ├── tsconfig.build.json ├── tsconfig.json └── yarn.lock /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent 2 | # coding styles between different editors and IDEs 3 | # editorconfig.org 4 | 5 | root = true 6 | 7 | [*] 8 | 9 | indent_style = space 10 | indent_size = 2 11 | 12 | end_of_line = lf 13 | charset = utf-8 14 | trim_trailing_whitespace = true 15 | insert_final_newline = true 16 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | *.pbxproj -text 2 | # specific for windows script files 3 | *.bat text eol=crlf -------------------------------------------------------------------------------- /.github/actions/setup/action.yml: -------------------------------------------------------------------------------- 1 | name: Setup 2 | description: Setup Node.js and install dependencies 3 | 4 | runs: 5 | using: composite 6 | steps: 7 | - name: Setup Node.js 8 | uses: actions/setup-node@v3 9 | with: 10 | node-version-file: .nvmrc 11 | 12 | - name: Cache dependencies 13 | id: yarn-cache 14 | uses: actions/cache@v3 15 | with: 16 | path: | 17 | **/node_modules 18 | .yarn/install-state.gz 19 | key: ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock') }}-${{ hashFiles('**/package.json', '!node_modules/**') }} 20 | restore-keys: | 21 | ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock') }} 22 | ${{ runner.os }}-yarn- 23 | 24 | - name: Install dependencies 25 | if: steps.yarn-cache.outputs.cache-hit != 'true' 26 | run: yarn install --immutable 27 | shell: bash 28 | -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: CI 2 | on: 3 | push: 4 | branches: 5 | - main 6 | pull_request: 7 | branches: 8 | - main 9 | 10 | jobs: 11 | lint: 12 | runs-on: ubuntu-latest 13 | steps: 14 | - name: Checkout 15 | uses: actions/checkout@v3 16 | 17 | - name: Setup 18 | uses: ./.github/actions/setup 19 | 20 | - name: Lint files 21 | run: yarn lint 22 | 23 | - name: Typecheck files 24 | run: yarn typecheck 25 | 26 | build-library: 27 | runs-on: ubuntu-latest 28 | steps: 29 | - name: Checkout 30 | uses: actions/checkout@v3 31 | 32 | - name: Setup 33 | uses: ./.github/actions/setup 34 | 35 | - name: Build package 36 | run: yarn prepare 37 | 38 | build-web: 39 | runs-on: ubuntu-latest 40 | steps: 41 | - name: Checkout 42 | uses: actions/checkout@v3 43 | 44 | - name: Setup 45 | uses: ./.github/actions/setup 46 | 47 | - name: Build example for Web 48 | run: | 49 | yarn example expo export:web 50 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # XDE 6 | .expo/ 7 | 8 | # VSCode 9 | .vscode/ 10 | jsconfig.json 11 | 12 | # Xcode 13 | # 14 | build/ 15 | *.pbxuser 16 | !default.pbxuser 17 | *.mode1v3 18 | !default.mode1v3 19 | *.mode2v3 20 | !default.mode2v3 21 | *.perspectivev3 22 | !default.perspectivev3 23 | xcuserdata 24 | *.xccheckout 25 | *.moved-aside 26 | DerivedData 27 | *.hmap 28 | *.ipa 29 | *.xcuserstate 30 | project.xcworkspace 31 | 32 | # Android/IJ 33 | # 34 | .classpath 35 | .cxx 36 | .gradle 37 | .idea 38 | .project 39 | .settings 40 | local.properties 41 | android.iml 42 | 43 | # Cocoapods 44 | # 45 | example/ios/Pods 46 | 47 | # Ruby 48 | example/vendor/ 49 | 50 | # node.js 51 | # 52 | node_modules/ 53 | npm-debug.log 54 | yarn-debug.log 55 | yarn-error.log 56 | 57 | # BUCK 58 | buck-out/ 59 | \.buckd/ 60 | android/app/libs 61 | android/keystores/debug.keystore 62 | 63 | # Yarn 64 | .yarn/* 65 | !.yarn/patches 66 | !.yarn/plugins 67 | !.yarn/releases 68 | !.yarn/sdks 69 | !.yarn/versions 70 | 71 | # Expo 72 | .expo/ 73 | 74 | # Turborepo 75 | .turbo/ 76 | 77 | # generated by bob 78 | lib/ 79 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | v18 2 | -------------------------------------------------------------------------------- /.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /.yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | //prettier-ignore 3 | module.exports = { 4 | name: "@yarnpkg/plugin-workspace-tools", 5 | factory: function (require) { 6 | var plugin=(()=>{var yr=Object.create;var we=Object.defineProperty;var _r=Object.getOwnPropertyDescriptor;var Er=Object.getOwnPropertyNames;var br=Object.getPrototypeOf,xr=Object.prototype.hasOwnProperty;var W=(e=>typeof require<"u"?require:typeof Proxy<"u"?new Proxy(e,{get:(r,t)=>(typeof require<"u"?require:r)[t]}):e)(function(e){if(typeof require<"u")return require.apply(this,arguments);throw new Error('Dynamic require of "'+e+'" is not supported')});var q=(e,r)=>()=>(r||e((r={exports:{}}).exports,r),r.exports),Cr=(e,r)=>{for(var t in r)we(e,t,{get:r[t],enumerable:!0})},Je=(e,r,t,n)=>{if(r&&typeof r=="object"||typeof r=="function")for(let s of Er(r))!xr.call(e,s)&&s!==t&&we(e,s,{get:()=>r[s],enumerable:!(n=_r(r,s))||n.enumerable});return e};var Be=(e,r,t)=>(t=e!=null?yr(br(e)):{},Je(r||!e||!e.__esModule?we(t,"default",{value:e,enumerable:!0}):t,e)),wr=e=>Je(we({},"__esModule",{value:!0}),e);var ve=q(ee=>{"use strict";ee.isInteger=e=>typeof e=="number"?Number.isInteger(e):typeof e=="string"&&e.trim()!==""?Number.isInteger(Number(e)):!1;ee.find=(e,r)=>e.nodes.find(t=>t.type===r);ee.exceedsLimit=(e,r,t=1,n)=>n===!1||!ee.isInteger(e)||!ee.isInteger(r)?!1:(Number(r)-Number(e))/Number(t)>=n;ee.escapeNode=(e,r=0,t)=>{let n=e.nodes[r];!n||(t&&n.type===t||n.type==="open"||n.type==="close")&&n.escaped!==!0&&(n.value="\\"+n.value,n.escaped=!0)};ee.encloseBrace=e=>e.type!=="brace"?!1:e.commas>>0+e.ranges>>0===0?(e.invalid=!0,!0):!1;ee.isInvalidBrace=e=>e.type!=="brace"?!1:e.invalid===!0||e.dollar?!0:e.commas>>0+e.ranges>>0===0||e.open!==!0||e.close!==!0?(e.invalid=!0,!0):!1;ee.isOpenOrClose=e=>e.type==="open"||e.type==="close"?!0:e.open===!0||e.close===!0;ee.reduce=e=>e.reduce((r,t)=>(t.type==="text"&&r.push(t.value),t.type==="range"&&(t.type="text"),r),[]);ee.flatten=(...e)=>{let r=[],t=n=>{for(let s=0;s{"use strict";var tt=ve();rt.exports=(e,r={})=>{let t=(n,s={})=>{let i=r.escapeInvalid&&tt.isInvalidBrace(s),a=n.invalid===!0&&r.escapeInvalid===!0,c="";if(n.value)return(i||a)&&tt.isOpenOrClose(n)?"\\"+n.value:n.value;if(n.value)return n.value;if(n.nodes)for(let p of n.nodes)c+=t(p);return c};return t(e)}});var st=q((Vn,nt)=>{"use strict";nt.exports=function(e){return typeof e=="number"?e-e===0:typeof e=="string"&&e.trim()!==""?Number.isFinite?Number.isFinite(+e):isFinite(+e):!1}});var ht=q((Jn,pt)=>{"use strict";var at=st(),le=(e,r,t)=>{if(at(e)===!1)throw new TypeError("toRegexRange: expected the first argument to be a number");if(r===void 0||e===r)return String(e);if(at(r)===!1)throw new TypeError("toRegexRange: expected the second argument to be a number.");let n={relaxZeros:!0,...t};typeof n.strictZeros=="boolean"&&(n.relaxZeros=n.strictZeros===!1);let s=String(n.relaxZeros),i=String(n.shorthand),a=String(n.capture),c=String(n.wrap),p=e+":"+r+"="+s+i+a+c;if(le.cache.hasOwnProperty(p))return le.cache[p].result;let m=Math.min(e,r),h=Math.max(e,r);if(Math.abs(m-h)===1){let y=e+"|"+r;return n.capture?`(${y})`:n.wrap===!1?y:`(?:${y})`}let R=ft(e)||ft(r),f={min:e,max:r,a:m,b:h},$=[],_=[];if(R&&(f.isPadded=R,f.maxLen=String(f.max).length),m<0){let y=h<0?Math.abs(h):1;_=it(y,Math.abs(m),f,n),m=f.a=0}return h>=0&&($=it(m,h,f,n)),f.negatives=_,f.positives=$,f.result=Sr(_,$,n),n.capture===!0?f.result=`(${f.result})`:n.wrap!==!1&&$.length+_.length>1&&(f.result=`(?:${f.result})`),le.cache[p]=f,f.result};function Sr(e,r,t){let n=Pe(e,r,"-",!1,t)||[],s=Pe(r,e,"",!1,t)||[],i=Pe(e,r,"-?",!0,t)||[];return n.concat(i).concat(s).join("|")}function vr(e,r){let t=1,n=1,s=ut(e,t),i=new Set([r]);for(;e<=s&&s<=r;)i.add(s),t+=1,s=ut(e,t);for(s=ct(r+1,n)-1;e1&&c.count.pop(),c.count.push(h.count[0]),c.string=c.pattern+lt(c.count),a=m+1;continue}t.isPadded&&(R=Lr(m,t,n)),h.string=R+h.pattern+lt(h.count),i.push(h),a=m+1,c=h}return i}function Pe(e,r,t,n,s){let i=[];for(let a of e){let{string:c}=a;!n&&!ot(r,"string",c)&&i.push(t+c),n&&ot(r,"string",c)&&i.push(t+c)}return i}function $r(e,r){let t=[];for(let n=0;nr?1:r>e?-1:0}function ot(e,r,t){return e.some(n=>n[r]===t)}function ut(e,r){return Number(String(e).slice(0,-r)+"9".repeat(r))}function ct(e,r){return e-e%Math.pow(10,r)}function lt(e){let[r=0,t=""]=e;return t||r>1?`{${r+(t?","+t:"")}}`:""}function kr(e,r,t){return`[${e}${r-e===1?"":"-"}${r}]`}function ft(e){return/^-?(0+)\d/.test(e)}function Lr(e,r,t){if(!r.isPadded)return e;let n=Math.abs(r.maxLen-String(e).length),s=t.relaxZeros!==!1;switch(n){case 0:return"";case 1:return s?"0?":"0";case 2:return s?"0{0,2}":"00";default:return s?`0{0,${n}}`:`0{${n}}`}}le.cache={};le.clearCache=()=>le.cache={};pt.exports=le});var Ue=q((es,Et)=>{"use strict";var Or=W("util"),At=ht(),dt=e=>e!==null&&typeof e=="object"&&!Array.isArray(e),Nr=e=>r=>e===!0?Number(r):String(r),Me=e=>typeof e=="number"||typeof e=="string"&&e!=="",Ae=e=>Number.isInteger(+e),De=e=>{let r=`${e}`,t=-1;if(r[0]==="-"&&(r=r.slice(1)),r==="0")return!1;for(;r[++t]==="0";);return t>0},Ir=(e,r,t)=>typeof e=="string"||typeof r=="string"?!0:t.stringify===!0,Br=(e,r,t)=>{if(r>0){let n=e[0]==="-"?"-":"";n&&(e=e.slice(1)),e=n+e.padStart(n?r-1:r,"0")}return t===!1?String(e):e},gt=(e,r)=>{let t=e[0]==="-"?"-":"";for(t&&(e=e.slice(1),r--);e.length{e.negatives.sort((a,c)=>ac?1:0),e.positives.sort((a,c)=>ac?1:0);let t=r.capture?"":"?:",n="",s="",i;return e.positives.length&&(n=e.positives.join("|")),e.negatives.length&&(s=`-(${t}${e.negatives.join("|")})`),n&&s?i=`${n}|${s}`:i=n||s,r.wrap?`(${t}${i})`:i},mt=(e,r,t,n)=>{if(t)return At(e,r,{wrap:!1,...n});let s=String.fromCharCode(e);if(e===r)return s;let i=String.fromCharCode(r);return`[${s}-${i}]`},Rt=(e,r,t)=>{if(Array.isArray(e)){let n=t.wrap===!0,s=t.capture?"":"?:";return n?`(${s}${e.join("|")})`:e.join("|")}return At(e,r,t)},yt=(...e)=>new RangeError("Invalid range arguments: "+Or.inspect(...e)),_t=(e,r,t)=>{if(t.strictRanges===!0)throw yt([e,r]);return[]},Mr=(e,r)=>{if(r.strictRanges===!0)throw new TypeError(`Expected step "${e}" to be a number`);return[]},Dr=(e,r,t=1,n={})=>{let s=Number(e),i=Number(r);if(!Number.isInteger(s)||!Number.isInteger(i)){if(n.strictRanges===!0)throw yt([e,r]);return[]}s===0&&(s=0),i===0&&(i=0);let a=s>i,c=String(e),p=String(r),m=String(t);t=Math.max(Math.abs(t),1);let h=De(c)||De(p)||De(m),R=h?Math.max(c.length,p.length,m.length):0,f=h===!1&&Ir(e,r,n)===!1,$=n.transform||Nr(f);if(n.toRegex&&t===1)return mt(gt(e,R),gt(r,R),!0,n);let _={negatives:[],positives:[]},y=T=>_[T<0?"negatives":"positives"].push(Math.abs(T)),E=[],S=0;for(;a?s>=i:s<=i;)n.toRegex===!0&&t>1?y(s):E.push(Br($(s,S),R,f)),s=a?s-t:s+t,S++;return n.toRegex===!0?t>1?Pr(_,n):Rt(E,null,{wrap:!1,...n}):E},Ur=(e,r,t=1,n={})=>{if(!Ae(e)&&e.length>1||!Ae(r)&&r.length>1)return _t(e,r,n);let s=n.transform||(f=>String.fromCharCode(f)),i=`${e}`.charCodeAt(0),a=`${r}`.charCodeAt(0),c=i>a,p=Math.min(i,a),m=Math.max(i,a);if(n.toRegex&&t===1)return mt(p,m,!1,n);let h=[],R=0;for(;c?i>=a:i<=a;)h.push(s(i,R)),i=c?i-t:i+t,R++;return n.toRegex===!0?Rt(h,null,{wrap:!1,options:n}):h},$e=(e,r,t,n={})=>{if(r==null&&Me(e))return[e];if(!Me(e)||!Me(r))return _t(e,r,n);if(typeof t=="function")return $e(e,r,1,{transform:t});if(dt(t))return $e(e,r,0,t);let s={...n};return s.capture===!0&&(s.wrap=!0),t=t||s.step||1,Ae(t)?Ae(e)&&Ae(r)?Dr(e,r,t,s):Ur(e,r,Math.max(Math.abs(t),1),s):t!=null&&!dt(t)?Mr(t,s):$e(e,r,1,t)};Et.exports=$e});var Ct=q((ts,xt)=>{"use strict";var Gr=Ue(),bt=ve(),qr=(e,r={})=>{let t=(n,s={})=>{let i=bt.isInvalidBrace(s),a=n.invalid===!0&&r.escapeInvalid===!0,c=i===!0||a===!0,p=r.escapeInvalid===!0?"\\":"",m="";if(n.isOpen===!0||n.isClose===!0)return p+n.value;if(n.type==="open")return c?p+n.value:"(";if(n.type==="close")return c?p+n.value:")";if(n.type==="comma")return n.prev.type==="comma"?"":c?n.value:"|";if(n.value)return n.value;if(n.nodes&&n.ranges>0){let h=bt.reduce(n.nodes),R=Gr(...h,{...r,wrap:!1,toRegex:!0});if(R.length!==0)return h.length>1&&R.length>1?`(${R})`:R}if(n.nodes)for(let h of n.nodes)m+=t(h,n);return m};return t(e)};xt.exports=qr});var vt=q((rs,St)=>{"use strict";var Kr=Ue(),wt=He(),he=ve(),fe=(e="",r="",t=!1)=>{let n=[];if(e=[].concat(e),r=[].concat(r),!r.length)return e;if(!e.length)return t?he.flatten(r).map(s=>`{${s}}`):r;for(let s of e)if(Array.isArray(s))for(let i of s)n.push(fe(i,r,t));else for(let i of r)t===!0&&typeof i=="string"&&(i=`{${i}}`),n.push(Array.isArray(i)?fe(s,i,t):s+i);return he.flatten(n)},Wr=(e,r={})=>{let t=r.rangeLimit===void 0?1e3:r.rangeLimit,n=(s,i={})=>{s.queue=[];let a=i,c=i.queue;for(;a.type!=="brace"&&a.type!=="root"&&a.parent;)a=a.parent,c=a.queue;if(s.invalid||s.dollar){c.push(fe(c.pop(),wt(s,r)));return}if(s.type==="brace"&&s.invalid!==!0&&s.nodes.length===2){c.push(fe(c.pop(),["{}"]));return}if(s.nodes&&s.ranges>0){let R=he.reduce(s.nodes);if(he.exceedsLimit(...R,r.step,t))throw new RangeError("expanded array length exceeds range limit. Use options.rangeLimit to increase or disable the limit.");let f=Kr(...R,r);f.length===0&&(f=wt(s,r)),c.push(fe(c.pop(),f)),s.nodes=[];return}let p=he.encloseBrace(s),m=s.queue,h=s;for(;h.type!=="brace"&&h.type!=="root"&&h.parent;)h=h.parent,m=h.queue;for(let R=0;R{"use strict";Ht.exports={MAX_LENGTH:1024*64,CHAR_0:"0",CHAR_9:"9",CHAR_UPPERCASE_A:"A",CHAR_LOWERCASE_A:"a",CHAR_UPPERCASE_Z:"Z",CHAR_LOWERCASE_Z:"z",CHAR_LEFT_PARENTHESES:"(",CHAR_RIGHT_PARENTHESES:")",CHAR_ASTERISK:"*",CHAR_AMPERSAND:"&",CHAR_AT:"@",CHAR_BACKSLASH:"\\",CHAR_BACKTICK:"`",CHAR_CARRIAGE_RETURN:"\r",CHAR_CIRCUMFLEX_ACCENT:"^",CHAR_COLON:":",CHAR_COMMA:",",CHAR_DOLLAR:"$",CHAR_DOT:".",CHAR_DOUBLE_QUOTE:'"',CHAR_EQUAL:"=",CHAR_EXCLAMATION_MARK:"!",CHAR_FORM_FEED:"\f",CHAR_FORWARD_SLASH:"/",CHAR_HASH:"#",CHAR_HYPHEN_MINUS:"-",CHAR_LEFT_ANGLE_BRACKET:"<",CHAR_LEFT_CURLY_BRACE:"{",CHAR_LEFT_SQUARE_BRACKET:"[",CHAR_LINE_FEED:` 7 | `,CHAR_NO_BREAK_SPACE:"\xA0",CHAR_PERCENT:"%",CHAR_PLUS:"+",CHAR_QUESTION_MARK:"?",CHAR_RIGHT_ANGLE_BRACKET:">",CHAR_RIGHT_CURLY_BRACE:"}",CHAR_RIGHT_SQUARE_BRACKET:"]",CHAR_SEMICOLON:";",CHAR_SINGLE_QUOTE:"'",CHAR_SPACE:" ",CHAR_TAB:" ",CHAR_UNDERSCORE:"_",CHAR_VERTICAL_LINE:"|",CHAR_ZERO_WIDTH_NOBREAK_SPACE:"\uFEFF"}});var Nt=q((ss,Ot)=>{"use strict";var jr=He(),{MAX_LENGTH:Tt,CHAR_BACKSLASH:Ge,CHAR_BACKTICK:Fr,CHAR_COMMA:Qr,CHAR_DOT:Xr,CHAR_LEFT_PARENTHESES:Zr,CHAR_RIGHT_PARENTHESES:Yr,CHAR_LEFT_CURLY_BRACE:zr,CHAR_RIGHT_CURLY_BRACE:Vr,CHAR_LEFT_SQUARE_BRACKET:kt,CHAR_RIGHT_SQUARE_BRACKET:Lt,CHAR_DOUBLE_QUOTE:Jr,CHAR_SINGLE_QUOTE:en,CHAR_NO_BREAK_SPACE:tn,CHAR_ZERO_WIDTH_NOBREAK_SPACE:rn}=$t(),nn=(e,r={})=>{if(typeof e!="string")throw new TypeError("Expected a string");let t=r||{},n=typeof t.maxLength=="number"?Math.min(Tt,t.maxLength):Tt;if(e.length>n)throw new SyntaxError(`Input length (${e.length}), exceeds max characters (${n})`);let s={type:"root",input:e,nodes:[]},i=[s],a=s,c=s,p=0,m=e.length,h=0,R=0,f,$={},_=()=>e[h++],y=E=>{if(E.type==="text"&&c.type==="dot"&&(c.type="text"),c&&c.type==="text"&&E.type==="text"){c.value+=E.value;return}return a.nodes.push(E),E.parent=a,E.prev=c,c=E,E};for(y({type:"bos"});h0){if(a.ranges>0){a.ranges=0;let E=a.nodes.shift();a.nodes=[E,{type:"text",value:jr(a)}]}y({type:"comma",value:f}),a.commas++;continue}if(f===Xr&&R>0&&a.commas===0){let E=a.nodes;if(R===0||E.length===0){y({type:"text",value:f});continue}if(c.type==="dot"){if(a.range=[],c.value+=f,c.type="range",a.nodes.length!==3&&a.nodes.length!==5){a.invalid=!0,a.ranges=0,c.type="text";continue}a.ranges++,a.args=[];continue}if(c.type==="range"){E.pop();let S=E[E.length-1];S.value+=c.value+f,c=S,a.ranges--;continue}y({type:"dot",value:f});continue}y({type:"text",value:f})}do if(a=i.pop(),a.type!=="root"){a.nodes.forEach(T=>{T.nodes||(T.type==="open"&&(T.isOpen=!0),T.type==="close"&&(T.isClose=!0),T.nodes||(T.type="text"),T.invalid=!0)});let E=i[i.length-1],S=E.nodes.indexOf(a);E.nodes.splice(S,1,...a.nodes)}while(i.length>0);return y({type:"eos"}),s};Ot.exports=nn});var Pt=q((as,Bt)=>{"use strict";var It=He(),sn=Ct(),an=vt(),on=Nt(),Z=(e,r={})=>{let t=[];if(Array.isArray(e))for(let n of e){let s=Z.create(n,r);Array.isArray(s)?t.push(...s):t.push(s)}else t=[].concat(Z.create(e,r));return r&&r.expand===!0&&r.nodupes===!0&&(t=[...new Set(t)]),t};Z.parse=(e,r={})=>on(e,r);Z.stringify=(e,r={})=>It(typeof e=="string"?Z.parse(e,r):e,r);Z.compile=(e,r={})=>(typeof e=="string"&&(e=Z.parse(e,r)),sn(e,r));Z.expand=(e,r={})=>{typeof e=="string"&&(e=Z.parse(e,r));let t=an(e,r);return r.noempty===!0&&(t=t.filter(Boolean)),r.nodupes===!0&&(t=[...new Set(t)]),t};Z.create=(e,r={})=>e===""||e.length<3?[e]:r.expand!==!0?Z.compile(e,r):Z.expand(e,r);Bt.exports=Z});var me=q((is,qt)=>{"use strict";var un=W("path"),se="\\\\/",Mt=`[^${se}]`,ie="\\.",cn="\\+",ln="\\?",Te="\\/",fn="(?=.)",Dt="[^/]",qe=`(?:${Te}|$)`,Ut=`(?:^|${Te})`,Ke=`${ie}{1,2}${qe}`,pn=`(?!${ie})`,hn=`(?!${Ut}${Ke})`,dn=`(?!${ie}{0,1}${qe})`,gn=`(?!${Ke})`,An=`[^.${Te}]`,mn=`${Dt}*?`,Gt={DOT_LITERAL:ie,PLUS_LITERAL:cn,QMARK_LITERAL:ln,SLASH_LITERAL:Te,ONE_CHAR:fn,QMARK:Dt,END_ANCHOR:qe,DOTS_SLASH:Ke,NO_DOT:pn,NO_DOTS:hn,NO_DOT_SLASH:dn,NO_DOTS_SLASH:gn,QMARK_NO_DOT:An,STAR:mn,START_ANCHOR:Ut},Rn={...Gt,SLASH_LITERAL:`[${se}]`,QMARK:Mt,STAR:`${Mt}*?`,DOTS_SLASH:`${ie}{1,2}(?:[${se}]|$)`,NO_DOT:`(?!${ie})`,NO_DOTS:`(?!(?:^|[${se}])${ie}{1,2}(?:[${se}]|$))`,NO_DOT_SLASH:`(?!${ie}{0,1}(?:[${se}]|$))`,NO_DOTS_SLASH:`(?!${ie}{1,2}(?:[${se}]|$))`,QMARK_NO_DOT:`[^.${se}]`,START_ANCHOR:`(?:^|[${se}])`,END_ANCHOR:`(?:[${se}]|$)`},yn={alnum:"a-zA-Z0-9",alpha:"a-zA-Z",ascii:"\\x00-\\x7F",blank:" \\t",cntrl:"\\x00-\\x1F\\x7F",digit:"0-9",graph:"\\x21-\\x7E",lower:"a-z",print:"\\x20-\\x7E ",punct:"\\-!\"#$%&'()\\*+,./:;<=>?@[\\]^_`{|}~",space:" \\t\\r\\n\\v\\f",upper:"A-Z",word:"A-Za-z0-9_",xdigit:"A-Fa-f0-9"};qt.exports={MAX_LENGTH:1024*64,POSIX_REGEX_SOURCE:yn,REGEX_BACKSLASH:/\\(?![*+?^${}(|)[\]])/g,REGEX_NON_SPECIAL_CHARS:/^[^@![\].,$*+?^{}()|\\/]+/,REGEX_SPECIAL_CHARS:/[-*+?.^${}(|)[\]]/,REGEX_SPECIAL_CHARS_BACKREF:/(\\?)((\W)(\3*))/g,REGEX_SPECIAL_CHARS_GLOBAL:/([-*+?.^${}(|)[\]])/g,REGEX_REMOVE_BACKSLASH:/(?:\[.*?[^\\]\]|\\(?=.))/g,REPLACEMENTS:{"***":"*","**/**":"**","**/**/**":"**"},CHAR_0:48,CHAR_9:57,CHAR_UPPERCASE_A:65,CHAR_LOWERCASE_A:97,CHAR_UPPERCASE_Z:90,CHAR_LOWERCASE_Z:122,CHAR_LEFT_PARENTHESES:40,CHAR_RIGHT_PARENTHESES:41,CHAR_ASTERISK:42,CHAR_AMPERSAND:38,CHAR_AT:64,CHAR_BACKWARD_SLASH:92,CHAR_CARRIAGE_RETURN:13,CHAR_CIRCUMFLEX_ACCENT:94,CHAR_COLON:58,CHAR_COMMA:44,CHAR_DOT:46,CHAR_DOUBLE_QUOTE:34,CHAR_EQUAL:61,CHAR_EXCLAMATION_MARK:33,CHAR_FORM_FEED:12,CHAR_FORWARD_SLASH:47,CHAR_GRAVE_ACCENT:96,CHAR_HASH:35,CHAR_HYPHEN_MINUS:45,CHAR_LEFT_ANGLE_BRACKET:60,CHAR_LEFT_CURLY_BRACE:123,CHAR_LEFT_SQUARE_BRACKET:91,CHAR_LINE_FEED:10,CHAR_NO_BREAK_SPACE:160,CHAR_PERCENT:37,CHAR_PLUS:43,CHAR_QUESTION_MARK:63,CHAR_RIGHT_ANGLE_BRACKET:62,CHAR_RIGHT_CURLY_BRACE:125,CHAR_RIGHT_SQUARE_BRACKET:93,CHAR_SEMICOLON:59,CHAR_SINGLE_QUOTE:39,CHAR_SPACE:32,CHAR_TAB:9,CHAR_UNDERSCORE:95,CHAR_VERTICAL_LINE:124,CHAR_ZERO_WIDTH_NOBREAK_SPACE:65279,SEP:un.sep,extglobChars(e){return{"!":{type:"negate",open:"(?:(?!(?:",close:`))${e.STAR})`},"?":{type:"qmark",open:"(?:",close:")?"},"+":{type:"plus",open:"(?:",close:")+"},"*":{type:"star",open:"(?:",close:")*"},"@":{type:"at",open:"(?:",close:")"}}},globChars(e){return e===!0?Rn:Gt}}});var Re=q(Q=>{"use strict";var _n=W("path"),En=process.platform==="win32",{REGEX_BACKSLASH:bn,REGEX_REMOVE_BACKSLASH:xn,REGEX_SPECIAL_CHARS:Cn,REGEX_SPECIAL_CHARS_GLOBAL:wn}=me();Q.isObject=e=>e!==null&&typeof e=="object"&&!Array.isArray(e);Q.hasRegexChars=e=>Cn.test(e);Q.isRegexChar=e=>e.length===1&&Q.hasRegexChars(e);Q.escapeRegex=e=>e.replace(wn,"\\$1");Q.toPosixSlashes=e=>e.replace(bn,"/");Q.removeBackslashes=e=>e.replace(xn,r=>r==="\\"?"":r);Q.supportsLookbehinds=()=>{let e=process.version.slice(1).split(".").map(Number);return e.length===3&&e[0]>=9||e[0]===8&&e[1]>=10};Q.isWindows=e=>e&&typeof e.windows=="boolean"?e.windows:En===!0||_n.sep==="\\";Q.escapeLast=(e,r,t)=>{let n=e.lastIndexOf(r,t);return n===-1?e:e[n-1]==="\\"?Q.escapeLast(e,r,n-1):`${e.slice(0,n)}\\${e.slice(n)}`};Q.removePrefix=(e,r={})=>{let t=e;return t.startsWith("./")&&(t=t.slice(2),r.prefix="./"),t};Q.wrapOutput=(e,r={},t={})=>{let n=t.contains?"":"^",s=t.contains?"":"$",i=`${n}(?:${e})${s}`;return r.negated===!0&&(i=`(?:^(?!${i}).*$)`),i}});var Yt=q((us,Zt)=>{"use strict";var Kt=Re(),{CHAR_ASTERISK:We,CHAR_AT:Sn,CHAR_BACKWARD_SLASH:ye,CHAR_COMMA:vn,CHAR_DOT:je,CHAR_EXCLAMATION_MARK:Fe,CHAR_FORWARD_SLASH:Xt,CHAR_LEFT_CURLY_BRACE:Qe,CHAR_LEFT_PARENTHESES:Xe,CHAR_LEFT_SQUARE_BRACKET:Hn,CHAR_PLUS:$n,CHAR_QUESTION_MARK:Wt,CHAR_RIGHT_CURLY_BRACE:Tn,CHAR_RIGHT_PARENTHESES:jt,CHAR_RIGHT_SQUARE_BRACKET:kn}=me(),Ft=e=>e===Xt||e===ye,Qt=e=>{e.isPrefix!==!0&&(e.depth=e.isGlobstar?1/0:1)},Ln=(e,r)=>{let t=r||{},n=e.length-1,s=t.parts===!0||t.scanToEnd===!0,i=[],a=[],c=[],p=e,m=-1,h=0,R=0,f=!1,$=!1,_=!1,y=!1,E=!1,S=!1,T=!1,L=!1,z=!1,I=!1,re=0,K,g,v={value:"",depth:0,isGlob:!1},k=()=>m>=n,l=()=>p.charCodeAt(m+1),H=()=>(K=g,p.charCodeAt(++m));for(;m0&&(B=p.slice(0,h),p=p.slice(h),R-=h),w&&_===!0&&R>0?(w=p.slice(0,R),o=p.slice(R)):_===!0?(w="",o=p):w=p,w&&w!==""&&w!=="/"&&w!==p&&Ft(w.charCodeAt(w.length-1))&&(w=w.slice(0,-1)),t.unescape===!0&&(o&&(o=Kt.removeBackslashes(o)),w&&T===!0&&(w=Kt.removeBackslashes(w)));let u={prefix:B,input:e,start:h,base:w,glob:o,isBrace:f,isBracket:$,isGlob:_,isExtglob:y,isGlobstar:E,negated:L,negatedExtglob:z};if(t.tokens===!0&&(u.maxDepth=0,Ft(g)||a.push(v),u.tokens=a),t.parts===!0||t.tokens===!0){let P;for(let b=0;b{"use strict";var ke=me(),Y=Re(),{MAX_LENGTH:Le,POSIX_REGEX_SOURCE:On,REGEX_NON_SPECIAL_CHARS:Nn,REGEX_SPECIAL_CHARS_BACKREF:In,REPLACEMENTS:zt}=ke,Bn=(e,r)=>{if(typeof r.expandRange=="function")return r.expandRange(...e,r);e.sort();let t=`[${e.join("-")}]`;try{new RegExp(t)}catch{return e.map(s=>Y.escapeRegex(s)).join("..")}return t},de=(e,r)=>`Missing ${e}: "${r}" - use "\\\\${r}" to match literal characters`,Vt=(e,r)=>{if(typeof e!="string")throw new TypeError("Expected a string");e=zt[e]||e;let t={...r},n=typeof t.maxLength=="number"?Math.min(Le,t.maxLength):Le,s=e.length;if(s>n)throw new SyntaxError(`Input length: ${s}, exceeds maximum allowed length: ${n}`);let i={type:"bos",value:"",output:t.prepend||""},a=[i],c=t.capture?"":"?:",p=Y.isWindows(r),m=ke.globChars(p),h=ke.extglobChars(m),{DOT_LITERAL:R,PLUS_LITERAL:f,SLASH_LITERAL:$,ONE_CHAR:_,DOTS_SLASH:y,NO_DOT:E,NO_DOT_SLASH:S,NO_DOTS_SLASH:T,QMARK:L,QMARK_NO_DOT:z,STAR:I,START_ANCHOR:re}=m,K=A=>`(${c}(?:(?!${re}${A.dot?y:R}).)*?)`,g=t.dot?"":E,v=t.dot?L:z,k=t.bash===!0?K(t):I;t.capture&&(k=`(${k})`),typeof t.noext=="boolean"&&(t.noextglob=t.noext);let l={input:e,index:-1,start:0,dot:t.dot===!0,consumed:"",output:"",prefix:"",backtrack:!1,negated:!1,brackets:0,braces:0,parens:0,quotes:0,globstar:!1,tokens:a};e=Y.removePrefix(e,l),s=e.length;let H=[],w=[],B=[],o=i,u,P=()=>l.index===s-1,b=l.peek=(A=1)=>e[l.index+A],V=l.advance=()=>e[++l.index]||"",J=()=>e.slice(l.index+1),X=(A="",O=0)=>{l.consumed+=A,l.index+=O},Ee=A=>{l.output+=A.output!=null?A.output:A.value,X(A.value)},mr=()=>{let A=1;for(;b()==="!"&&(b(2)!=="("||b(3)==="?");)V(),l.start++,A++;return A%2===0?!1:(l.negated=!0,l.start++,!0)},be=A=>{l[A]++,B.push(A)},oe=A=>{l[A]--,B.pop()},C=A=>{if(o.type==="globstar"){let O=l.braces>0&&(A.type==="comma"||A.type==="brace"),d=A.extglob===!0||H.length&&(A.type==="pipe"||A.type==="paren");A.type!=="slash"&&A.type!=="paren"&&!O&&!d&&(l.output=l.output.slice(0,-o.output.length),o.type="star",o.value="*",o.output=k,l.output+=o.output)}if(H.length&&A.type!=="paren"&&(H[H.length-1].inner+=A.value),(A.value||A.output)&&Ee(A),o&&o.type==="text"&&A.type==="text"){o.value+=A.value,o.output=(o.output||"")+A.value;return}A.prev=o,a.push(A),o=A},xe=(A,O)=>{let d={...h[O],conditions:1,inner:""};d.prev=o,d.parens=l.parens,d.output=l.output;let x=(t.capture?"(":"")+d.open;be("parens"),C({type:A,value:O,output:l.output?"":_}),C({type:"paren",extglob:!0,value:V(),output:x}),H.push(d)},Rr=A=>{let O=A.close+(t.capture?")":""),d;if(A.type==="negate"){let x=k;A.inner&&A.inner.length>1&&A.inner.includes("/")&&(x=K(t)),(x!==k||P()||/^\)+$/.test(J()))&&(O=A.close=`)$))${x}`),A.inner.includes("*")&&(d=J())&&/^\.[^\\/.]+$/.test(d)&&(O=A.close=`)${d})${x})`),A.prev.type==="bos"&&(l.negatedExtglob=!0)}C({type:"paren",extglob:!0,value:u,output:O}),oe("parens")};if(t.fastpaths!==!1&&!/(^[*!]|[/()[\]{}"])/.test(e)){let A=!1,O=e.replace(In,(d,x,M,j,G,Ie)=>j==="\\"?(A=!0,d):j==="?"?x?x+j+(G?L.repeat(G.length):""):Ie===0?v+(G?L.repeat(G.length):""):L.repeat(M.length):j==="."?R.repeat(M.length):j==="*"?x?x+j+(G?k:""):k:x?d:`\\${d}`);return A===!0&&(t.unescape===!0?O=O.replace(/\\/g,""):O=O.replace(/\\+/g,d=>d.length%2===0?"\\\\":d?"\\":"")),O===e&&t.contains===!0?(l.output=e,l):(l.output=Y.wrapOutput(O,l,r),l)}for(;!P();){if(u=V(),u==="\0")continue;if(u==="\\"){let d=b();if(d==="/"&&t.bash!==!0||d==="."||d===";")continue;if(!d){u+="\\",C({type:"text",value:u});continue}let x=/^\\+/.exec(J()),M=0;if(x&&x[0].length>2&&(M=x[0].length,l.index+=M,M%2!==0&&(u+="\\")),t.unescape===!0?u=V():u+=V(),l.brackets===0){C({type:"text",value:u});continue}}if(l.brackets>0&&(u!=="]"||o.value==="["||o.value==="[^")){if(t.posix!==!1&&u===":"){let d=o.value.slice(1);if(d.includes("[")&&(o.posix=!0,d.includes(":"))){let x=o.value.lastIndexOf("["),M=o.value.slice(0,x),j=o.value.slice(x+2),G=On[j];if(G){o.value=M+G,l.backtrack=!0,V(),!i.output&&a.indexOf(o)===1&&(i.output=_);continue}}}(u==="["&&b()!==":"||u==="-"&&b()==="]")&&(u=`\\${u}`),u==="]"&&(o.value==="["||o.value==="[^")&&(u=`\\${u}`),t.posix===!0&&u==="!"&&o.value==="["&&(u="^"),o.value+=u,Ee({value:u});continue}if(l.quotes===1&&u!=='"'){u=Y.escapeRegex(u),o.value+=u,Ee({value:u});continue}if(u==='"'){l.quotes=l.quotes===1?0:1,t.keepQuotes===!0&&C({type:"text",value:u});continue}if(u==="("){be("parens"),C({type:"paren",value:u});continue}if(u===")"){if(l.parens===0&&t.strictBrackets===!0)throw new SyntaxError(de("opening","("));let d=H[H.length-1];if(d&&l.parens===d.parens+1){Rr(H.pop());continue}C({type:"paren",value:u,output:l.parens?")":"\\)"}),oe("parens");continue}if(u==="["){if(t.nobracket===!0||!J().includes("]")){if(t.nobracket!==!0&&t.strictBrackets===!0)throw new SyntaxError(de("closing","]"));u=`\\${u}`}else be("brackets");C({type:"bracket",value:u});continue}if(u==="]"){if(t.nobracket===!0||o&&o.type==="bracket"&&o.value.length===1){C({type:"text",value:u,output:`\\${u}`});continue}if(l.brackets===0){if(t.strictBrackets===!0)throw new SyntaxError(de("opening","["));C({type:"text",value:u,output:`\\${u}`});continue}oe("brackets");let d=o.value.slice(1);if(o.posix!==!0&&d[0]==="^"&&!d.includes("/")&&(u=`/${u}`),o.value+=u,Ee({value:u}),t.literalBrackets===!1||Y.hasRegexChars(d))continue;let x=Y.escapeRegex(o.value);if(l.output=l.output.slice(0,-o.value.length),t.literalBrackets===!0){l.output+=x,o.value=x;continue}o.value=`(${c}${x}|${o.value})`,l.output+=o.value;continue}if(u==="{"&&t.nobrace!==!0){be("braces");let d={type:"brace",value:u,output:"(",outputIndex:l.output.length,tokensIndex:l.tokens.length};w.push(d),C(d);continue}if(u==="}"){let d=w[w.length-1];if(t.nobrace===!0||!d){C({type:"text",value:u,output:u});continue}let x=")";if(d.dots===!0){let M=a.slice(),j=[];for(let G=M.length-1;G>=0&&(a.pop(),M[G].type!=="brace");G--)M[G].type!=="dots"&&j.unshift(M[G].value);x=Bn(j,t),l.backtrack=!0}if(d.comma!==!0&&d.dots!==!0){let M=l.output.slice(0,d.outputIndex),j=l.tokens.slice(d.tokensIndex);d.value=d.output="\\{",u=x="\\}",l.output=M;for(let G of j)l.output+=G.output||G.value}C({type:"brace",value:u,output:x}),oe("braces"),w.pop();continue}if(u==="|"){H.length>0&&H[H.length-1].conditions++,C({type:"text",value:u});continue}if(u===","){let d=u,x=w[w.length-1];x&&B[B.length-1]==="braces"&&(x.comma=!0,d="|"),C({type:"comma",value:u,output:d});continue}if(u==="/"){if(o.type==="dot"&&l.index===l.start+1){l.start=l.index+1,l.consumed="",l.output="",a.pop(),o=i;continue}C({type:"slash",value:u,output:$});continue}if(u==="."){if(l.braces>0&&o.type==="dot"){o.value==="."&&(o.output=R);let d=w[w.length-1];o.type="dots",o.output+=u,o.value+=u,d.dots=!0;continue}if(l.braces+l.parens===0&&o.type!=="bos"&&o.type!=="slash"){C({type:"text",value:u,output:R});continue}C({type:"dot",value:u,output:R});continue}if(u==="?"){if(!(o&&o.value==="(")&&t.noextglob!==!0&&b()==="("&&b(2)!=="?"){xe("qmark",u);continue}if(o&&o.type==="paren"){let x=b(),M=u;if(x==="<"&&!Y.supportsLookbehinds())throw new Error("Node.js v10 or higher is required for regex lookbehinds");(o.value==="("&&!/[!=<:]/.test(x)||x==="<"&&!/<([!=]|\w+>)/.test(J()))&&(M=`\\${u}`),C({type:"text",value:u,output:M});continue}if(t.dot!==!0&&(o.type==="slash"||o.type==="bos")){C({type:"qmark",value:u,output:z});continue}C({type:"qmark",value:u,output:L});continue}if(u==="!"){if(t.noextglob!==!0&&b()==="("&&(b(2)!=="?"||!/[!=<:]/.test(b(3)))){xe("negate",u);continue}if(t.nonegate!==!0&&l.index===0){mr();continue}}if(u==="+"){if(t.noextglob!==!0&&b()==="("&&b(2)!=="?"){xe("plus",u);continue}if(o&&o.value==="("||t.regex===!1){C({type:"plus",value:u,output:f});continue}if(o&&(o.type==="bracket"||o.type==="paren"||o.type==="brace")||l.parens>0){C({type:"plus",value:u});continue}C({type:"plus",value:f});continue}if(u==="@"){if(t.noextglob!==!0&&b()==="("&&b(2)!=="?"){C({type:"at",extglob:!0,value:u,output:""});continue}C({type:"text",value:u});continue}if(u!=="*"){(u==="$"||u==="^")&&(u=`\\${u}`);let d=Nn.exec(J());d&&(u+=d[0],l.index+=d[0].length),C({type:"text",value:u});continue}if(o&&(o.type==="globstar"||o.star===!0)){o.type="star",o.star=!0,o.value+=u,o.output=k,l.backtrack=!0,l.globstar=!0,X(u);continue}let A=J();if(t.noextglob!==!0&&/^\([^?]/.test(A)){xe("star",u);continue}if(o.type==="star"){if(t.noglobstar===!0){X(u);continue}let d=o.prev,x=d.prev,M=d.type==="slash"||d.type==="bos",j=x&&(x.type==="star"||x.type==="globstar");if(t.bash===!0&&(!M||A[0]&&A[0]!=="/")){C({type:"star",value:u,output:""});continue}let G=l.braces>0&&(d.type==="comma"||d.type==="brace"),Ie=H.length&&(d.type==="pipe"||d.type==="paren");if(!M&&d.type!=="paren"&&!G&&!Ie){C({type:"star",value:u,output:""});continue}for(;A.slice(0,3)==="/**";){let Ce=e[l.index+4];if(Ce&&Ce!=="/")break;A=A.slice(3),X("/**",3)}if(d.type==="bos"&&P()){o.type="globstar",o.value+=u,o.output=K(t),l.output=o.output,l.globstar=!0,X(u);continue}if(d.type==="slash"&&d.prev.type!=="bos"&&!j&&P()){l.output=l.output.slice(0,-(d.output+o.output).length),d.output=`(?:${d.output}`,o.type="globstar",o.output=K(t)+(t.strictSlashes?")":"|$)"),o.value+=u,l.globstar=!0,l.output+=d.output+o.output,X(u);continue}if(d.type==="slash"&&d.prev.type!=="bos"&&A[0]==="/"){let Ce=A[1]!==void 0?"|$":"";l.output=l.output.slice(0,-(d.output+o.output).length),d.output=`(?:${d.output}`,o.type="globstar",o.output=`${K(t)}${$}|${$}${Ce})`,o.value+=u,l.output+=d.output+o.output,l.globstar=!0,X(u+V()),C({type:"slash",value:"/",output:""});continue}if(d.type==="bos"&&A[0]==="/"){o.type="globstar",o.value+=u,o.output=`(?:^|${$}|${K(t)}${$})`,l.output=o.output,l.globstar=!0,X(u+V()),C({type:"slash",value:"/",output:""});continue}l.output=l.output.slice(0,-o.output.length),o.type="globstar",o.output=K(t),o.value+=u,l.output+=o.output,l.globstar=!0,X(u);continue}let O={type:"star",value:u,output:k};if(t.bash===!0){O.output=".*?",(o.type==="bos"||o.type==="slash")&&(O.output=g+O.output),C(O);continue}if(o&&(o.type==="bracket"||o.type==="paren")&&t.regex===!0){O.output=u,C(O);continue}(l.index===l.start||o.type==="slash"||o.type==="dot")&&(o.type==="dot"?(l.output+=S,o.output+=S):t.dot===!0?(l.output+=T,o.output+=T):(l.output+=g,o.output+=g),b()!=="*"&&(l.output+=_,o.output+=_)),C(O)}for(;l.brackets>0;){if(t.strictBrackets===!0)throw new SyntaxError(de("closing","]"));l.output=Y.escapeLast(l.output,"["),oe("brackets")}for(;l.parens>0;){if(t.strictBrackets===!0)throw new SyntaxError(de("closing",")"));l.output=Y.escapeLast(l.output,"("),oe("parens")}for(;l.braces>0;){if(t.strictBrackets===!0)throw new SyntaxError(de("closing","}"));l.output=Y.escapeLast(l.output,"{"),oe("braces")}if(t.strictSlashes!==!0&&(o.type==="star"||o.type==="bracket")&&C({type:"maybe_slash",value:"",output:`${$}?`}),l.backtrack===!0){l.output="";for(let A of l.tokens)l.output+=A.output!=null?A.output:A.value,A.suffix&&(l.output+=A.suffix)}return l};Vt.fastpaths=(e,r)=>{let t={...r},n=typeof t.maxLength=="number"?Math.min(Le,t.maxLength):Le,s=e.length;if(s>n)throw new SyntaxError(`Input length: ${s}, exceeds maximum allowed length: ${n}`);e=zt[e]||e;let i=Y.isWindows(r),{DOT_LITERAL:a,SLASH_LITERAL:c,ONE_CHAR:p,DOTS_SLASH:m,NO_DOT:h,NO_DOTS:R,NO_DOTS_SLASH:f,STAR:$,START_ANCHOR:_}=ke.globChars(i),y=t.dot?R:h,E=t.dot?f:h,S=t.capture?"":"?:",T={negated:!1,prefix:""},L=t.bash===!0?".*?":$;t.capture&&(L=`(${L})`);let z=g=>g.noglobstar===!0?L:`(${S}(?:(?!${_}${g.dot?m:a}).)*?)`,I=g=>{switch(g){case"*":return`${y}${p}${L}`;case".*":return`${a}${p}${L}`;case"*.*":return`${y}${L}${a}${p}${L}`;case"*/*":return`${y}${L}${c}${p}${E}${L}`;case"**":return y+z(t);case"**/*":return`(?:${y}${z(t)}${c})?${E}${p}${L}`;case"**/*.*":return`(?:${y}${z(t)}${c})?${E}${L}${a}${p}${L}`;case"**/.*":return`(?:${y}${z(t)}${c})?${a}${p}${L}`;default:{let v=/^(.*?)\.(\w+)$/.exec(g);if(!v)return;let k=I(v[1]);return k?k+a+v[2]:void 0}}},re=Y.removePrefix(e,T),K=I(re);return K&&t.strictSlashes!==!0&&(K+=`${c}?`),K};Jt.exports=Vt});var rr=q((ls,tr)=>{"use strict";var Pn=W("path"),Mn=Yt(),Ze=er(),Ye=Re(),Dn=me(),Un=e=>e&&typeof e=="object"&&!Array.isArray(e),D=(e,r,t=!1)=>{if(Array.isArray(e)){let h=e.map(f=>D(f,r,t));return f=>{for(let $ of h){let _=$(f);if(_)return _}return!1}}let n=Un(e)&&e.tokens&&e.input;if(e===""||typeof e!="string"&&!n)throw new TypeError("Expected pattern to be a non-empty string");let s=r||{},i=Ye.isWindows(r),a=n?D.compileRe(e,r):D.makeRe(e,r,!1,!0),c=a.state;delete a.state;let p=()=>!1;if(s.ignore){let h={...r,ignore:null,onMatch:null,onResult:null};p=D(s.ignore,h,t)}let m=(h,R=!1)=>{let{isMatch:f,match:$,output:_}=D.test(h,a,r,{glob:e,posix:i}),y={glob:e,state:c,regex:a,posix:i,input:h,output:_,match:$,isMatch:f};return typeof s.onResult=="function"&&s.onResult(y),f===!1?(y.isMatch=!1,R?y:!1):p(h)?(typeof s.onIgnore=="function"&&s.onIgnore(y),y.isMatch=!1,R?y:!1):(typeof s.onMatch=="function"&&s.onMatch(y),R?y:!0)};return t&&(m.state=c),m};D.test=(e,r,t,{glob:n,posix:s}={})=>{if(typeof e!="string")throw new TypeError("Expected input to be a string");if(e==="")return{isMatch:!1,output:""};let i=t||{},a=i.format||(s?Ye.toPosixSlashes:null),c=e===n,p=c&&a?a(e):e;return c===!1&&(p=a?a(e):e,c=p===n),(c===!1||i.capture===!0)&&(i.matchBase===!0||i.basename===!0?c=D.matchBase(e,r,t,s):c=r.exec(p)),{isMatch:Boolean(c),match:c,output:p}};D.matchBase=(e,r,t,n=Ye.isWindows(t))=>(r instanceof RegExp?r:D.makeRe(r,t)).test(Pn.basename(e));D.isMatch=(e,r,t)=>D(r,t)(e);D.parse=(e,r)=>Array.isArray(e)?e.map(t=>D.parse(t,r)):Ze(e,{...r,fastpaths:!1});D.scan=(e,r)=>Mn(e,r);D.compileRe=(e,r,t=!1,n=!1)=>{if(t===!0)return e.output;let s=r||{},i=s.contains?"":"^",a=s.contains?"":"$",c=`${i}(?:${e.output})${a}`;e&&e.negated===!0&&(c=`^(?!${c}).*$`);let p=D.toRegex(c,r);return n===!0&&(p.state=e),p};D.makeRe=(e,r={},t=!1,n=!1)=>{if(!e||typeof e!="string")throw new TypeError("Expected a non-empty string");let s={negated:!1,fastpaths:!0};return r.fastpaths!==!1&&(e[0]==="."||e[0]==="*")&&(s.output=Ze.fastpaths(e,r)),s.output||(s=Ze(e,r)),D.compileRe(s,r,t,n)};D.toRegex=(e,r)=>{try{let t=r||{};return new RegExp(e,t.flags||(t.nocase?"i":""))}catch(t){if(r&&r.debug===!0)throw t;return/$^/}};D.constants=Dn;tr.exports=D});var sr=q((fs,nr)=>{"use strict";nr.exports=rr()});var cr=q((ps,ur)=>{"use strict";var ir=W("util"),or=Pt(),ae=sr(),ze=Re(),ar=e=>e===""||e==="./",N=(e,r,t)=>{r=[].concat(r),e=[].concat(e);let n=new Set,s=new Set,i=new Set,a=0,c=h=>{i.add(h.output),t&&t.onResult&&t.onResult(h)};for(let h=0;h!n.has(h));if(t&&m.length===0){if(t.failglob===!0)throw new Error(`No matches found for "${r.join(", ")}"`);if(t.nonull===!0||t.nullglob===!0)return t.unescape?r.map(h=>h.replace(/\\/g,"")):r}return m};N.match=N;N.matcher=(e,r)=>ae(e,r);N.isMatch=(e,r,t)=>ae(r,t)(e);N.any=N.isMatch;N.not=(e,r,t={})=>{r=[].concat(r).map(String);let n=new Set,s=[],a=N(e,r,{...t,onResult:c=>{t.onResult&&t.onResult(c),s.push(c.output)}});for(let c of s)a.includes(c)||n.add(c);return[...n]};N.contains=(e,r,t)=>{if(typeof e!="string")throw new TypeError(`Expected a string: "${ir.inspect(e)}"`);if(Array.isArray(r))return r.some(n=>N.contains(e,n,t));if(typeof r=="string"){if(ar(e)||ar(r))return!1;if(e.includes(r)||e.startsWith("./")&&e.slice(2).includes(r))return!0}return N.isMatch(e,r,{...t,contains:!0})};N.matchKeys=(e,r,t)=>{if(!ze.isObject(e))throw new TypeError("Expected the first argument to be an object");let n=N(Object.keys(e),r,t),s={};for(let i of n)s[i]=e[i];return s};N.some=(e,r,t)=>{let n=[].concat(e);for(let s of[].concat(r)){let i=ae(String(s),t);if(n.some(a=>i(a)))return!0}return!1};N.every=(e,r,t)=>{let n=[].concat(e);for(let s of[].concat(r)){let i=ae(String(s),t);if(!n.every(a=>i(a)))return!1}return!0};N.all=(e,r,t)=>{if(typeof e!="string")throw new TypeError(`Expected a string: "${ir.inspect(e)}"`);return[].concat(r).every(n=>ae(n,t)(e))};N.capture=(e,r,t)=>{let n=ze.isWindows(t),i=ae.makeRe(String(e),{...t,capture:!0}).exec(n?ze.toPosixSlashes(r):r);if(i)return i.slice(1).map(a=>a===void 0?"":a)};N.makeRe=(...e)=>ae.makeRe(...e);N.scan=(...e)=>ae.scan(...e);N.parse=(e,r)=>{let t=[];for(let n of[].concat(e||[]))for(let s of or(String(n),r))t.push(ae.parse(s,r));return t};N.braces=(e,r)=>{if(typeof e!="string")throw new TypeError("Expected a string");return r&&r.nobrace===!0||!/\{.*\}/.test(e)?[e]:or(e,r)};N.braceExpand=(e,r)=>{if(typeof e!="string")throw new TypeError("Expected a string");return N.braces(e,{...r,expand:!0})};ur.exports=N});var fr=q((hs,lr)=>{"use strict";lr.exports=(e,...r)=>new Promise(t=>{t(e(...r))})});var hr=q((ds,Ve)=>{"use strict";var Gn=fr(),pr=e=>{if(e<1)throw new TypeError("Expected `concurrency` to be a number from 1 and up");let r=[],t=0,n=()=>{t--,r.length>0&&r.shift()()},s=(c,p,...m)=>{t++;let h=Gn(c,...m);p(h),h.then(n,n)},i=(c,p,...m)=>{tnew Promise(m=>i(c,m,...p));return Object.defineProperties(a,{activeCount:{get:()=>t},pendingCount:{get:()=>r.length}}),a};Ve.exports=pr;Ve.exports.default=pr});var jn={};Cr(jn,{default:()=>Wn});var Se=W("@yarnpkg/cli"),ne=W("@yarnpkg/core"),et=W("@yarnpkg/core"),ue=W("clipanion"),ce=class extends Se.BaseCommand{constructor(){super(...arguments);this.json=ue.Option.Boolean("--json",!1,{description:"Format the output as an NDJSON stream"});this.production=ue.Option.Boolean("--production",!1,{description:"Only install regular dependencies by omitting dev dependencies"});this.all=ue.Option.Boolean("-A,--all",!1,{description:"Install the entire project"});this.workspaces=ue.Option.Rest()}async execute(){let t=await ne.Configuration.find(this.context.cwd,this.context.plugins),{project:n,workspace:s}=await ne.Project.find(t,this.context.cwd),i=await ne.Cache.find(t);await n.restoreInstallState({restoreResolutions:!1});let a;if(this.all)a=new Set(n.workspaces);else if(this.workspaces.length===0){if(!s)throw new Se.WorkspaceRequiredError(n.cwd,this.context.cwd);a=new Set([s])}else a=new Set(this.workspaces.map(p=>n.getWorkspaceByIdent(et.structUtils.parseIdent(p))));for(let p of a)for(let m of this.production?["dependencies"]:ne.Manifest.hardDependencies)for(let h of p.manifest.getForScope(m).values()){let R=n.tryWorkspaceByDescriptor(h);R!==null&&a.add(R)}for(let p of n.workspaces)a.has(p)?this.production&&p.manifest.devDependencies.clear():(p.manifest.installConfig=p.manifest.installConfig||{},p.manifest.installConfig.selfReferences=!1,p.manifest.dependencies.clear(),p.manifest.devDependencies.clear(),p.manifest.peerDependencies.clear(),p.manifest.scripts.clear());return(await ne.StreamReport.start({configuration:t,json:this.json,stdout:this.context.stdout,includeLogs:!0},async p=>{await n.install({cache:i,report:p,persistProject:!1})})).exitCode()}};ce.paths=[["workspaces","focus"]],ce.usage=ue.Command.Usage({category:"Workspace-related commands",description:"install a single workspace and its dependencies",details:"\n This command will run an install as if the specified workspaces (and all other workspaces they depend on) were the only ones in the project. If no workspaces are explicitly listed, the active one will be assumed.\n\n Note that this command is only very moderately useful when using zero-installs, since the cache will contain all the packages anyway - meaning that the only difference between a full install and a focused install would just be a few extra lines in the `.pnp.cjs` file, at the cost of introducing an extra complexity.\n\n If the `-A,--all` flag is set, the entire project will be installed. Combine with `--production` to replicate the old `yarn install --production`.\n "});var Ne=W("@yarnpkg/cli"),ge=W("@yarnpkg/core"),_e=W("@yarnpkg/core"),F=W("@yarnpkg/core"),gr=W("@yarnpkg/plugin-git"),U=W("clipanion"),Oe=Be(cr()),Ar=Be(hr()),te=Be(W("typanion")),pe=class extends Ne.BaseCommand{constructor(){super(...arguments);this.recursive=U.Option.Boolean("-R,--recursive",!1,{description:"Find packages via dependencies/devDependencies instead of using the workspaces field"});this.from=U.Option.Array("--from",[],{description:"An array of glob pattern idents from which to base any recursion"});this.all=U.Option.Boolean("-A,--all",!1,{description:"Run the command on all workspaces of a project"});this.verbose=U.Option.Boolean("-v,--verbose",!1,{description:"Prefix each output line with the name of the originating workspace"});this.parallel=U.Option.Boolean("-p,--parallel",!1,{description:"Run the commands in parallel"});this.interlaced=U.Option.Boolean("-i,--interlaced",!1,{description:"Print the output of commands in real-time instead of buffering it"});this.jobs=U.Option.String("-j,--jobs",{description:"The maximum number of parallel tasks that the execution will be limited to; or `unlimited`",validator:te.isOneOf([te.isEnum(["unlimited"]),te.applyCascade(te.isNumber(),[te.isInteger(),te.isAtLeast(1)])])});this.topological=U.Option.Boolean("-t,--topological",!1,{description:"Run the command after all workspaces it depends on (regular) have finished"});this.topologicalDev=U.Option.Boolean("--topological-dev",!1,{description:"Run the command after all workspaces it depends on (regular + dev) have finished"});this.include=U.Option.Array("--include",[],{description:"An array of glob pattern idents; only matching workspaces will be traversed"});this.exclude=U.Option.Array("--exclude",[],{description:"An array of glob pattern idents; matching workspaces won't be traversed"});this.publicOnly=U.Option.Boolean("--no-private",{description:"Avoid running the command on private workspaces"});this.since=U.Option.String("--since",{description:"Only include workspaces that have been changed since the specified ref.",tolerateBoolean:!0});this.commandName=U.Option.String();this.args=U.Option.Proxy()}async execute(){let t=await ge.Configuration.find(this.context.cwd,this.context.plugins),{project:n,workspace:s}=await ge.Project.find(t,this.context.cwd);if(!this.all&&!s)throw new Ne.WorkspaceRequiredError(n.cwd,this.context.cwd);await n.restoreInstallState();let i=this.cli.process([this.commandName,...this.args]),a=i.path.length===1&&i.path[0]==="run"&&typeof i.scriptName<"u"?i.scriptName:null;if(i.path.length===0)throw new U.UsageError("Invalid subcommand name for iteration - use the 'run' keyword if you wish to execute a script");let c=this.all?n.topLevelWorkspace:s,p=this.since?Array.from(await gr.gitUtils.fetchChangedWorkspaces({ref:this.since,project:n})):[c,...this.from.length>0?c.getRecursiveWorkspaceChildren():[]],m=g=>Oe.default.isMatch(F.structUtils.stringifyIdent(g.locator),this.from),h=this.from.length>0?p.filter(m):p,R=new Set([...h,...h.map(g=>[...this.recursive?this.since?g.getRecursiveWorkspaceDependents():g.getRecursiveWorkspaceDependencies():g.getRecursiveWorkspaceChildren()]).flat()]),f=[],$=!1;if(a!=null&&a.includes(":")){for(let g of n.workspaces)if(g.manifest.scripts.has(a)&&($=!$,$===!1))break}for(let g of R)a&&!g.manifest.scripts.has(a)&&!$&&!(await ge.scriptUtils.getWorkspaceAccessibleBinaries(g)).has(a)||a===process.env.npm_lifecycle_event&&g.cwd===s.cwd||this.include.length>0&&!Oe.default.isMatch(F.structUtils.stringifyIdent(g.locator),this.include)||this.exclude.length>0&&Oe.default.isMatch(F.structUtils.stringifyIdent(g.locator),this.exclude)||this.publicOnly&&g.manifest.private===!0||f.push(g);let _=this.parallel?this.jobs==="unlimited"?1/0:Number(this.jobs)||Math.ceil(F.nodeUtils.availableParallelism()/2):1,y=_===1?!1:this.parallel,E=y?this.interlaced:!0,S=(0,Ar.default)(_),T=new Map,L=new Set,z=0,I=null,re=!1,K=await _e.StreamReport.start({configuration:t,stdout:this.context.stdout,includePrefix:!1},async g=>{let v=async(k,{commandIndex:l})=>{if(re)return-1;!y&&this.verbose&&l>1&&g.reportSeparator();let H=qn(k,{configuration:t,verbose:this.verbose,commandIndex:l}),[w,B]=dr(g,{prefix:H,interlaced:E}),[o,u]=dr(g,{prefix:H,interlaced:E});try{this.verbose&&g.reportInfo(null,`${H} Process started`);let P=Date.now(),b=await this.cli.run([this.commandName,...this.args],{cwd:k.cwd,stdout:w,stderr:o})||0;w.end(),o.end(),await B,await u;let V=Date.now();if(this.verbose){let J=t.get("enableTimers")?`, completed in ${F.formatUtils.pretty(t,V-P,F.formatUtils.Type.DURATION)}`:"";g.reportInfo(null,`${H} Process exited (exit code ${b})${J}`)}return b===130&&(re=!0,I=b),b}catch(P){throw w.end(),o.end(),await B,await u,P}};for(let k of f)T.set(k.anchoredLocator.locatorHash,k);for(;T.size>0&&!g.hasErrors();){let k=[];for(let[w,B]of T){if(L.has(B.anchoredDescriptor.descriptorHash))continue;let o=!0;if(this.topological||this.topologicalDev){let u=this.topologicalDev?new Map([...B.manifest.dependencies,...B.manifest.devDependencies]):B.manifest.dependencies;for(let P of u.values()){let b=n.tryWorkspaceByDescriptor(P);if(o=b===null||!T.has(b.anchoredLocator.locatorHash),!o)break}}if(!!o&&(L.add(B.anchoredDescriptor.descriptorHash),k.push(S(async()=>{let u=await v(B,{commandIndex:++z});return T.delete(w),L.delete(B.anchoredDescriptor.descriptorHash),u})),!y))break}if(k.length===0){let w=Array.from(T.values()).map(B=>F.structUtils.prettyLocator(t,B.anchoredLocator)).join(", ");g.reportError(_e.MessageName.CYCLIC_DEPENDENCIES,`Dependency cycle detected (${w})`);return}let H=(await Promise.all(k)).find(w=>w!==0);I===null&&(I=typeof H<"u"?1:I),(this.topological||this.topologicalDev)&&typeof H<"u"&&g.reportError(_e.MessageName.UNNAMED,"The command failed for workspaces that are depended upon by other workspaces; can't satisfy the dependency graph")}});return I!==null?I:K.exitCode()}};pe.paths=[["workspaces","foreach"]],pe.usage=U.Command.Usage({category:"Workspace-related commands",description:"run a command on all workspaces",details:"\n This command will run a given sub-command on current and all its descendant workspaces. Various flags can alter the exact behavior of the command:\n\n - If `-p,--parallel` is set, the commands will be ran in parallel; they'll by default be limited to a number of parallel tasks roughly equal to half your core number, but that can be overridden via `-j,--jobs`, or disabled by setting `-j unlimited`.\n\n - If `-p,--parallel` and `-i,--interlaced` are both set, Yarn will print the lines from the output as it receives them. If `-i,--interlaced` wasn't set, it would instead buffer the output from each process and print the resulting buffers only after their source processes have exited.\n\n - If `-t,--topological` is set, Yarn will only run the command after all workspaces that it depends on through the `dependencies` field have successfully finished executing. If `--topological-dev` is set, both the `dependencies` and `devDependencies` fields will be considered when figuring out the wait points.\n\n - If `-A,--all` is set, Yarn will run the command on all the workspaces of a project. By default yarn runs the command only on current and all its descendant workspaces.\n\n - If `-R,--recursive` is set, Yarn will find workspaces to run the command on by recursively evaluating `dependencies` and `devDependencies` fields, instead of looking at the `workspaces` fields.\n\n - If `--from` is set, Yarn will use the packages matching the 'from' glob as the starting point for any recursive search.\n\n - If `--since` is set, Yarn will only run the command on workspaces that have been modified since the specified ref. By default Yarn will use the refs specified by the `changesetBaseRefs` configuration option.\n\n - The command may apply to only some workspaces through the use of `--include` which acts as a whitelist. The `--exclude` flag will do the opposite and will be a list of packages that mustn't execute the script. Both flags accept glob patterns (if valid Idents and supported by [micromatch](https://github.com/micromatch/micromatch)). Make sure to escape the patterns, to prevent your own shell from trying to expand them.\n\n Adding the `-v,--verbose` flag will cause Yarn to print more information; in particular the name of the workspace that generated the output will be printed at the front of each line.\n\n If the command is `run` and the script being run does not exist the child workspace will be skipped without error.\n ",examples:[["Publish current and all descendant packages","yarn workspaces foreach npm publish --tolerate-republish"],["Run build script on current and all descendant packages","yarn workspaces foreach run build"],["Run build script on current and all descendant packages in parallel, building package dependencies first","yarn workspaces foreach -pt run build"],["Run build script on several packages and all their dependencies, building dependencies first","yarn workspaces foreach -ptR --from '{workspace-a,workspace-b}' run build"]]});function dr(e,{prefix:r,interlaced:t}){let n=e.createStreamReporter(r),s=new F.miscUtils.DefaultStream;s.pipe(n,{end:!1}),s.on("finish",()=>{n.end()});let i=new Promise(c=>{n.on("finish",()=>{c(s.active)})});if(t)return[s,i];let a=new F.miscUtils.BufferStream;return a.pipe(s,{end:!1}),a.on("finish",()=>{s.end()}),[a,i]}function qn(e,{configuration:r,commandIndex:t,verbose:n}){if(!n)return null;let i=`[${F.structUtils.stringifyIdent(e.locator)}]:`,a=["#2E86AB","#A23B72","#F18F01","#C73E1D","#CCE2A3"],c=a[t%a.length];return F.formatUtils.pretty(r,i,c)}var Kn={commands:[ce,pe]},Wn=Kn;return wr(jn);})(); 8 | /*! 9 | * fill-range 10 | * 11 | * Copyright (c) 2014-present, Jon Schlinkert. 12 | * Licensed under the MIT License. 13 | */ 14 | /*! 15 | * is-number 16 | * 17 | * Copyright (c) 2014-present, Jon Schlinkert. 18 | * Released under the MIT License. 19 | */ 20 | /*! 21 | * to-regex-range 22 | * 23 | * Copyright (c) 2015-present, Jon Schlinkert. 24 | * Released under the MIT License. 25 | */ 26 | return plugin; 27 | } 28 | }; 29 | -------------------------------------------------------------------------------- /.yarnrc.yml: -------------------------------------------------------------------------------- 1 | nodeLinker: node-modules 2 | nmHoistingLimits: workspaces 3 | 4 | plugins: 5 | - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs 6 | spec: "@yarnpkg/plugin-interactive-tools" 7 | - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs 8 | spec: "@yarnpkg/plugin-workspace-tools" 9 | 10 | yarnPath: .yarn/releases/yarn-3.6.1.cjs 11 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | 2 | # Contributor Covenant Code of Conduct 3 | 4 | ## Our Pledge 5 | 6 | We as members, contributors, and leaders pledge to make participation in our 7 | community a harassment-free experience for everyone, regardless of age, body 8 | size, visible or invisible disability, ethnicity, sex characteristics, gender 9 | identity and expression, level of experience, education, socio-economic status, 10 | nationality, personal appearance, race, caste, color, religion, or sexual 11 | identity and orientation. 12 | 13 | We pledge to act and interact in ways that contribute to an open, welcoming, 14 | diverse, inclusive, and healthy community. 15 | 16 | ## Our Standards 17 | 18 | Examples of behavior that contributes to a positive environment for our 19 | community include: 20 | 21 | * Demonstrating empathy and kindness toward other people 22 | * Being respectful of differing opinions, viewpoints, and experiences 23 | * Giving and gracefully accepting constructive feedback 24 | * Accepting responsibility and apologizing to those affected by our mistakes, 25 | and learning from the experience 26 | * Focusing on what is best not just for us as individuals, but for the overall 27 | community 28 | 29 | Examples of unacceptable behavior include: 30 | 31 | * The use of sexualized language or imagery, and sexual attention or advances of 32 | any kind 33 | * Trolling, insulting or derogatory comments, and personal or political attacks 34 | * Public or private harassment 35 | * Publishing others' private information, such as a physical or email address, 36 | without their explicit permission 37 | * Other conduct which could reasonably be considered inappropriate in a 38 | professional setting 39 | 40 | ## Enforcement Responsibilities 41 | 42 | Community leaders are responsible for clarifying and enforcing our standards of 43 | acceptable behavior and will take appropriate and fair corrective action in 44 | response to any behavior that they deem inappropriate, threatening, offensive, 45 | or harmful. 46 | 47 | Community leaders have the right and responsibility to remove, edit, or reject 48 | comments, commits, code, wiki edits, issues, and other contributions that are 49 | not aligned to this Code of Conduct, and will communicate reasons for moderation 50 | decisions when appropriate. 51 | 52 | ## Scope 53 | 54 | This Code of Conduct applies within all community spaces, and also applies when 55 | an individual is officially representing the community in public spaces. 56 | Examples of representing our community include using an official e-mail address, 57 | posting via an official social media account, or acting as an appointed 58 | representative at an online or offline event. 59 | 60 | ## Enforcement 61 | 62 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 63 | reported to the community leaders responsible for enforcement at 64 | [INSERT CONTACT METHOD]. 65 | All complaints will be reviewed and investigated promptly and fairly. 66 | 67 | All community leaders are obligated to respect the privacy and security of the 68 | reporter of any incident. 69 | 70 | ## Enforcement Guidelines 71 | 72 | Community leaders will follow these Community Impact Guidelines in determining 73 | the consequences for any action they deem in violation of this Code of Conduct: 74 | 75 | ### 1. Correction 76 | 77 | **Community Impact**: Use of inappropriate language or other behavior deemed 78 | unprofessional or unwelcome in the community. 79 | 80 | **Consequence**: A private, written warning from community leaders, providing 81 | clarity around the nature of the violation and an explanation of why the 82 | behavior was inappropriate. A public apology may be requested. 83 | 84 | ### 2. Warning 85 | 86 | **Community Impact**: A violation through a single incident or series of 87 | actions. 88 | 89 | **Consequence**: A warning with consequences for continued behavior. No 90 | interaction with the people involved, including unsolicited interaction with 91 | those enforcing the Code of Conduct, for a specified period of time. This 92 | includes avoiding interactions in community spaces as well as external channels 93 | like social media. Violating these terms may lead to a temporary or permanent 94 | ban. 95 | 96 | ### 3. Temporary Ban 97 | 98 | **Community Impact**: A serious violation of community standards, including 99 | sustained inappropriate behavior. 100 | 101 | **Consequence**: A temporary ban from any sort of interaction or public 102 | communication with the community for a specified period of time. No public or 103 | private interaction with the people involved, including unsolicited interaction 104 | with those enforcing the Code of Conduct, is allowed during this period. 105 | Violating these terms may lead to a permanent ban. 106 | 107 | ### 4. Permanent Ban 108 | 109 | **Community Impact**: Demonstrating a pattern of violation of community 110 | standards, including sustained inappropriate behavior, harassment of an 111 | individual, or aggression toward or disparagement of classes of individuals. 112 | 113 | **Consequence**: A permanent ban from any sort of public interaction within the 114 | community. 115 | 116 | ## Attribution 117 | 118 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], 119 | version 2.1, available at 120 | [https://www.contributor-covenant.org/version/2/1/code_of_conduct.html][v2.1]. 121 | 122 | Community Impact Guidelines were inspired by 123 | [Mozilla's code of conduct enforcement ladder][Mozilla CoC]. 124 | 125 | For answers to common questions about this code of conduct, see the FAQ at 126 | [https://www.contributor-covenant.org/faq][FAQ]. Translations are available at 127 | [https://www.contributor-covenant.org/translations][translations]. 128 | 129 | [homepage]: https://www.contributor-covenant.org 130 | [v2.1]: https://www.contributor-covenant.org/version/2/1/code_of_conduct.html 131 | [Mozilla CoC]: https://github.com/mozilla/diversity 132 | [FAQ]: https://www.contributor-covenant.org/faq 133 | [translations]: https://www.contributor-covenant.org/translations 134 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | Contributions are always welcome, no matter how large or small! 4 | 5 | We want this community to be friendly and respectful to each other. Please follow it in all your interactions with the project. Before contributing, please read the [code of conduct](./CODE_OF_CONDUCT.md). 6 | 7 | ## Development workflow 8 | 9 | This project is a monorepo managed using [Yarn workspaces](https://yarnpkg.com/features/workspaces). It contains the following packages: 10 | 11 | - The library package in the root directory. 12 | - An example app in the `example/` directory. 13 | 14 | To get started with the project, run `yarn` in the root directory to install the required dependencies for each package: 15 | 16 | ```sh 17 | yarn 18 | ``` 19 | 20 | > Since the project relies on Yarn workspaces, you cannot use [`npm`](https://github.com/npm/cli) for development. 21 | 22 | The [example app](/example/) demonstrates usage of the library. You need to run it to test any changes you make. 23 | 24 | It is configured to use the local version of the library, so any changes you make to the library's source code will be reflected in the example app. Changes to the library's JavaScript code will be reflected in the example app without a rebuild, but native code changes will require a rebuild of the example app. 25 | 26 | You can use various commands from the root directory to work with the project. 27 | 28 | To start the packager: 29 | 30 | ```sh 31 | yarn example start 32 | ``` 33 | 34 | To run the example app on Android: 35 | 36 | ```sh 37 | yarn example android 38 | ``` 39 | 40 | To run the example app on iOS: 41 | 42 | ```sh 43 | yarn example ios 44 | ``` 45 | 46 | To run the example app on Web: 47 | 48 | ```sh 49 | yarn example web 50 | ``` 51 | 52 | Make sure your code passes TypeScript and ESLint. Run the following to verify: 53 | 54 | ```sh 55 | yarn typecheck 56 | yarn lint 57 | ``` 58 | 59 | To fix formatting errors, run the following: 60 | 61 | ```sh 62 | yarn lint --fix 63 | ``` 64 | 65 | Remember to add tests for your change if possible. Run the unit tests by: 66 | 67 | ```sh 68 | yarn test 69 | ``` 70 | 71 | ### Commit message convention 72 | 73 | We follow the [conventional commits specification](https://www.conventionalcommits.org/en) for our commit messages: 74 | 75 | - `fix`: bug fixes, e.g. fix crash due to deprecated method. 76 | - `feat`: new features, e.g. add new method to the module. 77 | - `refactor`: code refactor, e.g. migrate from class components to hooks. 78 | - `docs`: changes into documentation, e.g. add usage example for the module.. 79 | - `test`: adding or updating tests, e.g. add integration tests using detox. 80 | - `chore`: tooling changes, e.g. change CI config. 81 | 82 | Our pre-commit hooks verify that your commit message matches this format when committing. 83 | 84 | ### Linting and tests 85 | 86 | [ESLint](https://eslint.org/), [Prettier](https://prettier.io/), [TypeScript](https://www.typescriptlang.org/) 87 | 88 | We use [TypeScript](https://www.typescriptlang.org/) for type checking, [ESLint](https://eslint.org/) with [Prettier](https://prettier.io/) for linting and formatting the code, and [Jest](https://jestjs.io/) for testing. 89 | 90 | Our pre-commit hooks verify that the linter when committing. 91 | 92 | ### Scripts 93 | 94 | The `package.json` file contains various scripts for common tasks: 95 | 96 | - `yarn`: setup project by installing dependencies. 97 | - `yarn typecheck`: type-check files with TypeScript. 98 | - `yarn lint`: lint files with ESLint. 99 | - `yarn test`: run unit tests with Jest. 100 | - `yarn example start`: start the Metro server for the example app. 101 | - `yarn example android`: run the example app on Android. 102 | - `yarn example ios`: run the example app on iOS. 103 | 104 | ### Sending a pull request 105 | 106 | > **Working on your first pull request?** You can learn how from this _free_ series: [How to Contribute to an Open Source Project on GitHub](https://app.egghead.io/playlists/how-to-contribute-to-an-open-source-project-on-github). 107 | 108 | When you're sending a pull request: 109 | 110 | - Prefer small pull requests focused on one change. 111 | - Verify that linters and tests are passing. 112 | - Review the documentation to make sure it looks good. 113 | - Follow the pull request template when opening a pull request. 114 | - For pull requests that change the API or implementation, discuss with maintainers first by opening an issue. 115 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 Rahul Bandodkar 4 | Permission is hereby granted, free of charge, to any person obtaining a copy 5 | of this software and associated documentation files (the "Software"), to deal 6 | in the Software without restriction, including without limitation the rights 7 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | copies of the Software, and to permit persons to whom the Software is 9 | furnished to do so, subject to the following conditions: 10 | 11 | The above copyright notice and this permission notice shall be included in all 12 | copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 15 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 16 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 17 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 18 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 19 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 20 | SOFTWARE. 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # rn-multipicker 2 | 3 | This package will provide features to select and search multiple dropdown items gracefully 4 | 5 | 6 | ## RNMultiSelect 7 | 8 | ![rn-multipicker-v0 3 2-demo1-ezgif com-video-to-gif-converter](https://github.com/rahull04/rn-multipicker/assets/59685264/24cfa40d-a9e4-46f6-a66c-84abd79425c0) 9 | 10 | 11 | ## RNMultiSelect.Sectioned 12 | 13 | ![sectioned-rn-multipicker-v0 3 2-demo1-ezgif com-video-to-gif-converter](https://github.com/rahull04/rn-multipicker/assets/59685264/674b3740-fd6a-40c2-b23e-fa317d980abc) 14 | 15 | 16 | 17 | Please refer for full documentation. 18 | 19 | ## Installation 20 | 21 | ```sh 22 | npm install rn-multipicker 23 | ``` 24 | 25 | or 26 | 27 | ```sh 28 | yarn add rn-multipicker 29 | ``` 30 | 31 | ## Usage 32 | 33 | ```js 34 | import { RNMultiSelect } from 'rn-multipicker'; 35 | import { COUNTRIES, SECTIONED_COUNTRIES } from './constants'; 36 | 37 | // ... 38 | 39 | const App() { 40 | const [selectedItems, setSelectedItems] = useState([]); 41 | 42 | return ( 43 | 44 | setSelectedItems(value)} 48 | selectedItems={selectedItems} 49 | /> 50 | 51 | setSelectedItems2(val)} 55 | selectedItems={selectedItems2} 56 | /> 57 | 58 | ); 59 | } 60 | ``` 61 | 62 | ## RNMultiSelect API 63 | 64 | ### Properties 65 | 66 | | Prop | Type | Description | 67 | | -------------------------- | ---------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | 68 | | `placeholder` | `string` | Placeholder text displayed in the multi-select input field. | 69 | | `data` | `string[]` | Array of strings representing selectable items. | 70 | | `onSelectedItemsChange` | `(selectedItems: string[]) => void` | Callback triggered when selected items change. | 71 | | `selectedItems` | `string[]` | Array of strings representing currently selected items. | 72 | | `styles` (deprecated) | `StyleProp` | Deprecated: Use `inputStyle` instead. | 73 | | `renderCheckedItem` | `(value: string, i: number) => JSX.Element` | Custom renderer for checked items. | 74 | | `renderCheckBox` | `(value: string, active: boolean, onCheck: (item: string) => void) => JSX.Element` | Custom renderer for checkboxes. | 75 | | `searchBarStyle` | `StyleProp` | Styling for the search bar. | 76 | | `clearButtonStyle` | `StyleProp` | Styling for the clear button. | 77 | | `saveButtonStyle` | `StyleProp` | Styling for the save button. | 78 | | `renderClearButton` | `(onClearAll: () => void, disabled: boolean) => JSX.Element` | Custom renderer for the clear button. | 79 | | `renderSaveButton` | `(onApply: () => void, disabled: boolean) => JSX.Element` | Custom renderer for the save button. | 80 | | `modalTitleStyle` | `StyleProp` | Styling for the picker modal title. | 81 | | `searchBarPlaceholder` | `string` | Placeholder text for the search bar. | 82 | | `inputStyle` | `StyleProp` | Styling for the input field. | 83 | | `maxCheckedItemsVisible` | `number` | Maximum number of checked items visible in the selection. | 84 | | `renderViewMoreButton` | `(showAll: () => void, remainingCount: number) => JSX.Element` | Custom renderer for "View More" button. | 85 | | `renderViewLessButton` | `(showLess: () => void) => JSX.Element` | Custom renderer for "View Less" button. | 86 | | `checkedItemsColor` | `string` | Change the background color of the checked items visible on the input box. | 87 | | `checkedItemsContentColor` | `string` | Change the color of the title and cross icon on the checked items visible on the input box. | 88 | | `onSearchTextChange` | `(searchText: string, setLoader: (value: boolean) => void) => void` | Callback function triggered when user enters search value. | 89 | | `onEndReached` | `(iteration: number, setLoader: (value: boolean) => void) => void` | Callback function triggered when user scrolls to the last item in the not selected list. This can be used to make dynamic fetch calls by pages. | 90 | 91 | ## RNMultiSelect.Sectioned API 92 | 93 | Can be used to display Multiple items with Section headers 94 | 95 | ### Properties 96 | 97 | | Prop | Type | Description | 98 | | -------------------------------- | ------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------- | 99 | | `data` | `SectionedMultiSelectData[]` | Array of data representing sectioned items in the multi-picker. | 100 | | `selectedItems` | `SectionedSelectedItems[]` | Array of selected items with section information. | 101 | | `onSelectedItemsChange` | `(selectedItems: SectionedSelectedItems[]) => void` | Callback triggered when selected items change. | 102 | | `renderCheckedItem` | `(value: SectionedSelectedItems, onRemove: () => void, i: number) => JSX.Element` | Custom renderer for checked items in the picker. | 103 | | `renderCheckBox` | `(value: SectionedSelectedItems, active: boolean, onCheck: (item: SectionedSelectedItems) => void) => JSX.Element` | Custom renderer for checkboxes in the picker. | 104 | | `placeholder` | `string` | Placeholder text displayed in the multi-select input field. | 105 | | `styles` (deprecated) | `StyleProp` | Deprecated: Use `inputStyle` instead. | 106 | | `searchBarStyle` | `StyleProp` | Styling for the search bar. | 107 | | `clearButtonStyle` | `StyleProp` | Styling for the clear button. | 108 | | `saveButtonStyle` | `StyleProp` | Styling for the save button. | 109 | | `renderClearButton` | `(onClearAll: () => void, disabled: boolean) => JSX.Element` | Custom renderer for the clear button. | 110 | | `renderSaveButton` | `(onApply: () => void, disabled: boolean) => JSX.Element` | Custom renderer for the save button. | 111 | | `modalTitleStyle` | `StyleProp` | Styling for the picker modal title. | 112 | | `searchBarPlaceholder` | `string` | Placeholder text for the search bar. | 113 | | `inputStyle` | `StyleProp` | Styling for the input field. | 114 | | `maxCheckedItemsVisible` | `number` | Maximum number of checked items visible in the selection. | 115 | | `renderViewMoreButton` | `(showAll: () => void, remainingCount: number) => JSX.Element` | Custom renderer for "View More" button. | 116 | | `renderViewLessButton` | `(showLess: () => void) => JSX.Element` | Custom renderer for "View Less" button. | 117 | | `checkedItemsColor` | `string` | Change the color of the checked items visible on the input box. | 118 | | `checkedItemsContentColor` | `string` | Change the color of the title and cross icon on the checked items visible on the input box. | 119 | | `renderSelectedSectionHeader` | `string` | Custom renderer for Section title headers in the Selected item. | 120 | | `renderNotSelectedSectionHeader` | `string` | Custom renderer for Section title headers in the Not Selected items. | 121 | | `onSearchTextChange` | `(searchText: string, setLoader: (value: boolean) => void) => void` | Callback function triggered when user enters search value. | 122 | | `onEndReached` | `(iteration: number, setLoader: (value: boolean) => void) => void` | Callback function triggered when user scrolls to the last item in the not selected list. This can be used to make dynamic fetch calls by pages. | 123 | 124 | ## Contributing 125 | 126 | See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow. 127 | 128 | Feel free to dive in! [Open an issue](https://github.com/rahull04/rn-multipicker/issues/new) or submit PRs. 129 | 130 | ## License 131 | 132 | MIT 133 | 134 | --- 135 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['module:@react-native/babel-preset'], 3 | }; 4 | -------------------------------------------------------------------------------- /example/App.js: -------------------------------------------------------------------------------- 1 | export { default } from './src/App'; 2 | -------------------------------------------------------------------------------- /example/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "name": "example", 4 | "slug": "example", 5 | "version": "1.0.0", 6 | "orientation": "portrait", 7 | "icon": "./assets/icon.png", 8 | "userInterfaceStyle": "light", 9 | "splash": { 10 | "image": "./assets/splash.png", 11 | "resizeMode": "contain", 12 | "backgroundColor": "#ffffff" 13 | }, 14 | "assetBundlePatterns": [ 15 | "**/*" 16 | ], 17 | "ios": { 18 | "supportsTablet": true 19 | }, 20 | "android": { 21 | "adaptiveIcon": { 22 | "foregroundImage": "./assets/adaptive-icon.png", 23 | "backgroundColor": "#ffffff" 24 | } 25 | }, 26 | "web": { 27 | "favicon": "./assets/favicon.png" 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /example/assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rahull04/rn-multipicker/5a0493acff1075d09347d934b321d99026a47d0c/example/assets/adaptive-icon.png -------------------------------------------------------------------------------- /example/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rahull04/rn-multipicker/5a0493acff1075d09347d934b321d99026a47d0c/example/assets/favicon.png -------------------------------------------------------------------------------- /example/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rahull04/rn-multipicker/5a0493acff1075d09347d934b321d99026a47d0c/example/assets/icon.png -------------------------------------------------------------------------------- /example/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rahull04/rn-multipicker/5a0493acff1075d09347d934b321d99026a47d0c/example/assets/splash.png -------------------------------------------------------------------------------- /example/babel.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const pak = require('../package.json'); 3 | 4 | module.exports = function (api) { 5 | api.cache(true); 6 | 7 | return { 8 | presets: ['babel-preset-expo'], 9 | plugins: [ 10 | [ 11 | 'module-resolver', 12 | { 13 | extensions: ['.tsx', '.ts', '.js', '.json'], 14 | alias: { 15 | // For development, we want to alias the library to the source 16 | [pak.name]: path.join(__dirname, '..', pak.source), 17 | }, 18 | }, 19 | ], 20 | ], 21 | }; 22 | }; 23 | -------------------------------------------------------------------------------- /example/metro.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const escape = require('escape-string-regexp'); 3 | const { getDefaultConfig } = require('@expo/metro-config'); 4 | const exclusionList = require('metro-config/src/defaults/exclusionList'); 5 | const pak = require('../package.json'); 6 | 7 | const root = path.resolve(__dirname, '..'); 8 | const modules = Object.keys({ ...pak.peerDependencies }); 9 | 10 | const defaultConfig = getDefaultConfig(__dirname); 11 | 12 | /** 13 | * Metro configuration 14 | * https://facebook.github.io/metro/docs/configuration 15 | * 16 | * @type {import('metro-config').MetroConfig} 17 | */ 18 | const config = { 19 | ...defaultConfig, 20 | 21 | projectRoot: __dirname, 22 | watchFolders: [root], 23 | 24 | // We need to make sure that only one version is loaded for peerDependencies 25 | // So we block them at the root, and alias them to the versions in example's node_modules 26 | resolver: { 27 | ...defaultConfig.resolver, 28 | 29 | blacklistRE: exclusionList( 30 | modules.map( 31 | (m) => 32 | new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\/.*$`) 33 | ) 34 | ), 35 | 36 | extraNodeModules: modules.reduce((acc, name) => { 37 | acc[name] = path.join(__dirname, 'node_modules', name); 38 | return acc; 39 | }, {}), 40 | }, 41 | }; 42 | 43 | module.exports = config; 44 | -------------------------------------------------------------------------------- /example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "rn-multipicker-example", 3 | "version": "1.0.0", 4 | "main": "node_modules/expo/AppEntry.js", 5 | "scripts": { 6 | "start": "expo start", 7 | "android": "expo start --android", 8 | "ios": "expo start --ios", 9 | "web": "expo start --web" 10 | }, 11 | "dependencies": { 12 | "expo": "~49.0.15", 13 | "expo-status-bar": "~1.6.0", 14 | "react": "18.2.0", 15 | "react-dom": "18.2.0", 16 | "react-native": "0.72.6", 17 | "react-native-web": "~0.19.6" 18 | }, 19 | "devDependencies": { 20 | "@babel/core": "^7.20.0", 21 | "@expo/webpack-config": "^18.0.1", 22 | "babel-loader": "^8.1.0", 23 | "babel-plugin-module-resolver": "^5.0.0" 24 | }, 25 | "private": true 26 | } 27 | -------------------------------------------------------------------------------- /example/src/App.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | import { StyleSheet, View } from 'react-native'; 4 | import { RNMultiSelect, type SectionedSelectedItems } from 'rn-multipicker'; 5 | import { COUNTRIES, SECTIONED_COUNTRIES } from './constants'; 6 | 7 | export default function App() { 8 | const [selectedItems, setSelectedItems] = React.useState([]); 9 | const [selectedItems2, setSelectedItems2] = React.useState< 10 | SectionedSelectedItems[] 11 | >([]); 12 | 13 | return ( 14 | 15 | setSelectedItems(val)} 19 | selectedItems={selectedItems} 20 | searchBarPlaceholder="Search country.." 21 | /> 22 | 23 | setSelectedItems2(val)} 27 | selectedItems={selectedItems2} 28 | searchBarPlaceholder="Search country.." 29 | /> 30 | 31 | ); 32 | } 33 | 34 | const styles = StyleSheet.create({ 35 | container: { 36 | flex: 1, 37 | alignItems: 'center', 38 | justifyContent: 'center', 39 | }, 40 | box: { 41 | width: 60, 42 | height: 60, 43 | marginVertical: 20, 44 | }, 45 | space: { height: 22 }, 46 | }); 47 | -------------------------------------------------------------------------------- /example/src/constants.ts: -------------------------------------------------------------------------------- 1 | export const COUNTRIES = [ 2 | 'Afghanistan', 3 | 'Albania', 4 | 'Algeria', 5 | 'American Samoa', 6 | 'Andorra', 7 | 'Angola', 8 | 'Anguilla', 9 | 'Antarctica', 10 | 'Antigua and Barbuda', 11 | 'Argentina', 12 | 'Armenia', 13 | 'Aruba', 14 | 'Australia', 15 | 'Austria', 16 | 'Azerbaijan', 17 | 'Bahamas (the)', 18 | 'Bahrain', 19 | 'Bangladesh', 20 | 'Barbados', 21 | 'Belarus', 22 | 'Belgium', 23 | 'Belize', 24 | 'Benin', 25 | 'Bermuda', 26 | 'Bhutan', 27 | 'Bolivia (Plurinational State of)', 28 | 'Bonaire, Sint Eustatius and Saba', 29 | 'Bosnia and Herzegovina', 30 | 'Botswana', 31 | 'Bouvet Island', 32 | 'Brazil', 33 | 'British Indian Ocean Territory (the)', 34 | 'Brunei Darussalam', 35 | 'Bulgaria', 36 | 'Burkina Faso', 37 | 'Burundi', 38 | 'Cabo Verde', 39 | 'Cambodia', 40 | 'Cameroon', 41 | 'Canada', 42 | 'Cayman Islands (the)', 43 | 'Central African Republic (the)', 44 | 'Chad', 45 | 'Chile', 46 | 'China', 47 | 'Christmas Island', 48 | 'Cocos (Keeling) Islands (the)', 49 | 'Colombia', 50 | 'Comoros (the)', 51 | 'Congo (the Democratic Republic of the)', 52 | 'Congo (the)', 53 | 'Cook Islands (the)', 54 | 'Costa Rica', 55 | 'Croatia', 56 | ]; 57 | 58 | export const SECTIONED_COUNTRIES = [ 59 | { 60 | id: '1', 61 | title: 'Asia', 62 | data: [ 63 | { value: 'India', id: '2' }, 64 | { value: 'China', id: '3' }, 65 | { value: 'Afghanistan', id: '4' }, 66 | ], 67 | }, 68 | { 69 | id: '5', 70 | title: 'Europe', 71 | data: [ 72 | { value: 'Spain', id: '6' }, 73 | { value: 'Sweden', id: '7' }, 74 | { value: 'France', id: '8' }, 75 | { value: 'Albania', id: '9' }, 76 | ], 77 | }, 78 | ]; 79 | -------------------------------------------------------------------------------- /example/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig", 3 | "compilerOptions": { 4 | // Avoid expo-cli auto-generating a tsconfig 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /example/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const createExpoWebpackConfigAsync = require('@expo/webpack-config'); 3 | const { resolver } = require('./metro.config'); 4 | 5 | const root = path.resolve(__dirname, '..'); 6 | const node_modules = path.join(__dirname, 'node_modules'); 7 | 8 | module.exports = async function (env, argv) { 9 | const config = await createExpoWebpackConfigAsync(env, argv); 10 | 11 | config.module.rules.push({ 12 | test: /\.(js|jsx|ts|tsx)$/, 13 | include: path.resolve(root, 'src'), 14 | use: 'babel-loader', 15 | }); 16 | 17 | // We need to make sure that only one version is loaded for peerDependencies 18 | // So we alias them to the versions in example's node_modules 19 | Object.assign(config.resolve.alias, { 20 | ...resolver.extraNodeModules, 21 | 'react-native-web': path.join(node_modules, 'react-native-web'), 22 | }); 23 | 24 | return config; 25 | }; 26 | -------------------------------------------------------------------------------- /lefthook.yml: -------------------------------------------------------------------------------- 1 | pre-commit: 2 | parallel: true 3 | commands: 4 | lint: 5 | glob: "*.{js,ts,jsx,tsx}" 6 | run: npx eslint {staged_files} 7 | types: 8 | glob: "*.{js,ts, jsx, tsx}" 9 | run: npx tsc --noEmit 10 | commit-msg: 11 | parallel: true 12 | commands: 13 | commitlint: 14 | run: npx commitlint --edit 15 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "rn-multipicker", 3 | "version": "0.3.1", 4 | "description": "This package will provide features to select and search multiple dropdown items gracefully", 5 | "main": "lib/commonjs/index", 6 | "module": "lib/module/index", 7 | "types": "lib/typescript/src/index.d.ts", 8 | "react-native": "src/index", 9 | "source": "src/index", 10 | "files": [ 11 | "src", 12 | "lib", 13 | "android", 14 | "ios", 15 | "cpp", 16 | "*.podspec", 17 | "!ios/build", 18 | "!android/build", 19 | "!android/gradle", 20 | "!android/gradlew", 21 | "!android/gradlew.bat", 22 | "!android/local.properties", 23 | "!**/__tests__", 24 | "!**/__fixtures__", 25 | "!**/__mocks__", 26 | "!**/.*" 27 | ], 28 | "scripts": { 29 | "example": "yarn workspace rn-multipicker-example", 30 | "test": "jest", 31 | "typecheck": "tsc --noEmit", 32 | "lint": "eslint \"**/*.{js,ts,tsx}\"", 33 | "clean": "del-cli lib", 34 | "prepare": "bob build", 35 | "release": "release-it" 36 | }, 37 | "keywords": [ 38 | "reactnative", 39 | "multi-select", 40 | "multiselect", 41 | "react-native" 42 | ], 43 | "repository": { 44 | "type": "git", 45 | "url": "git+https://github.com/rahull04/rn-multipicker.git" 46 | }, 47 | "author": "Rahul Bandodkar (https://github.com/rahull04)", 48 | "license": "MIT", 49 | "bugs": { 50 | "url": "https://github.com/rahull04/rn-multipicker/issues" 51 | }, 52 | "homepage": "https://github.com/rahull04/rn-multipicker#readme", 53 | "publishConfig": { 54 | "registry": "https://registry.npmjs.org/" 55 | }, 56 | "devDependencies": { 57 | "@commitlint/config-conventional": "^17.0.2", 58 | "@evilmartians/lefthook": "^1.5.0", 59 | "@react-native/eslint-config": "^0.72.2", 60 | "@release-it/conventional-changelog": "^5.0.0", 61 | "@types/jest": "^28.1.2", 62 | "@types/react": "~17.0.21", 63 | "@types/react-native": "0.70.0", 64 | "commitlint": "^17.0.2", 65 | "del-cli": "^5.0.0", 66 | "eslint": "^8.4.1", 67 | "eslint-config-prettier": "^8.5.0", 68 | "eslint-plugin-prettier": "^4.0.0", 69 | "jest": "^28.1.1", 70 | "prettier": "^2.0.5", 71 | "react": "18.2.0", 72 | "react-native": "0.72.6", 73 | "react-native-builder-bob": "^0.23.2", 74 | "release-it": "^15.0.0", 75 | "typescript": "^5.0.2" 76 | }, 77 | "resolutions": { 78 | "@types/react": "17.0.21" 79 | }, 80 | "peerDependencies": { 81 | "react": "*", 82 | "react-native": "*" 83 | }, 84 | "workspaces": [ 85 | "example" 86 | ], 87 | "packageManager": "yarn@3.6.1", 88 | "engines": { 89 | "node": ">= 18.0.0" 90 | }, 91 | "jest": { 92 | "preset": "react-native", 93 | "modulePathIgnorePatterns": [ 94 | "/example/node_modules", 95 | "/lib/" 96 | ] 97 | }, 98 | "commitlint": { 99 | "extends": [ 100 | "@commitlint/config-conventional" 101 | ] 102 | }, 103 | "release-it": { 104 | "git": { 105 | "commitMessage": "chore: release ${version}", 106 | "tagName": "v${version}" 107 | }, 108 | "npm": { 109 | "publish": true 110 | }, 111 | "github": { 112 | "release": true 113 | }, 114 | "plugins": { 115 | "@release-it/conventional-changelog": { 116 | "preset": "angular" 117 | } 118 | } 119 | }, 120 | "eslintConfig": { 121 | "root": true, 122 | "extends": [ 123 | "@react-native", 124 | "prettier" 125 | ], 126 | "rules": { 127 | "prettier/prettier": [ 128 | "error", 129 | { 130 | "quoteProps": "consistent", 131 | "singleQuote": true, 132 | "tabWidth": 2, 133 | "trailingComma": "es5", 134 | "useTabs": false 135 | } 136 | ] 137 | } 138 | }, 139 | "eslintIgnore": [ 140 | "node_modules/", 141 | "lib/", 142 | "metro.config.js", 143 | "babel.config.js", 144 | "webpack.config.js", 145 | "/example/App.js" 146 | ], 147 | "prettier": { 148 | "quoteProps": "consistent", 149 | "singleQuote": true, 150 | "tabWidth": 2, 151 | "trailingComma": "es5", 152 | "useTabs": false 153 | }, 154 | "react-native-builder-bob": { 155 | "source": "src", 156 | "output": "lib", 157 | "targets": [ 158 | "commonjs", 159 | "module", 160 | [ 161 | "typescript", 162 | { 163 | "project": "tsconfig.build.json" 164 | } 165 | ] 166 | ] 167 | } 168 | } 169 | -------------------------------------------------------------------------------- /src/__tests__/index.test.tsx: -------------------------------------------------------------------------------- 1 | it.todo('write a test'); 2 | -------------------------------------------------------------------------------- /src/assets/icons/checkedbox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rahull04/rn-multipicker/5a0493acff1075d09347d934b321d99026a47d0c/src/assets/icons/checkedbox.png -------------------------------------------------------------------------------- /src/assets/icons/chevron-down.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rahull04/rn-multipicker/5a0493acff1075d09347d934b321d99026a47d0c/src/assets/icons/chevron-down.png -------------------------------------------------------------------------------- /src/assets/icons/close.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rahull04/rn-multipicker/5a0493acff1075d09347d934b321d99026a47d0c/src/assets/icons/close.png -------------------------------------------------------------------------------- /src/assets/icons/uncheckedbox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rahull04/rn-multipicker/5a0493acff1075d09347d934b321d99026a47d0c/src/assets/icons/uncheckedbox.png -------------------------------------------------------------------------------- /src/assets/icons/white-cross.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rahull04/rn-multipicker/5a0493acff1075d09347d934b321d99026a47d0c/src/assets/icons/white-cross.png -------------------------------------------------------------------------------- /src/components/BaseMultiPicker/OptionsModal.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { 3 | Image, 4 | StyleSheet, 5 | Text, 6 | ScrollView, 7 | Modal, 8 | View, 9 | Platform, 10 | KeyboardAvoidingView, 11 | } from 'react-native'; 12 | import Cross from '../../assets/icons/close.png'; 13 | import { SearchInput } from '../common/SearchInput'; 14 | import { useSearch } from '../../hooks/useSearch'; 15 | import type { OptionsModalProps } from './OptionsModal.type'; 16 | import { DefaultCheckBox } from '../common/DefaultCheckBox'; 17 | import { DefaultFooterButton } from '../common/DefaultFooterButton'; 18 | import { TouchableOpacity } from 'react-native'; 19 | import { ActivityIndicator } from 'react-native'; 20 | import { isCloseToBottom } from '../../utils'; 21 | 22 | const ALL_ITEMS_CHECKED_TEXT = 'No data available!'; 23 | const TRY_CHANGING_SEARCH_TEXT = 'Try changing the search text!'; 24 | 25 | export const OptionsModal = ({ 26 | onClose, 27 | data, 28 | onCheck, 29 | checkedList, 30 | title, 31 | onApply, 32 | onClearAll, 33 | searchBarStyle, 34 | renderCheckBox, 35 | clearButtonStyle, 36 | saveButtonStyle, 37 | renderClearButton, 38 | renderSaveButton, 39 | modalTitleStyle, 40 | searchBarPlaceholder, 41 | onSearchTextChange: onSearchExternal, 42 | onEndReached, 43 | }: OptionsModalProps) => { 44 | const [showSearchLoader, setShowSearchLoader] = useState(false); 45 | const [showRefetchLoader, setShowRefetchLoader] = useState(false); 46 | const [fetchIteration, setFetchIteration] = useState(0); 47 | const { searchText, onSearch, clearSearch } = useSearch( 48 | setShowSearchLoader, 49 | onSearchExternal 50 | ); 51 | const [initialCheckedList] = React.useState(checkedList); 52 | const dropDownList = data.filter( 53 | (item) => 54 | item.toLowerCase().startsWith(searchText?.toLowerCase() ?? '') && 55 | !checkedList.includes(item) 56 | ); 57 | 58 | const localAndAppliedAreEqual = 59 | initialCheckedList.sort().toString() === checkedList.sort().toString(); 60 | 61 | const areAllItemsChecked = data.length === checkedList.length; 62 | 63 | const SelectedSection = ( 64 | <> 65 | {checkedList.length ? Selected : null} 66 | {checkedList?.map((item) => 67 | renderCheckBox ? ( 68 | 69 | {renderCheckBox(item, checkedList.includes(item), onCheck)} 70 | 71 | ) : ( 72 | onCheck(item)} 76 | active={checkedList.includes(item)} 77 | /> 78 | ) 79 | )} 80 | 81 | ); 82 | 83 | const NotSelectedHeaderSection = ( 84 | <> 85 | {checkedList.length ? ( 86 | Not Selected 87 | ) : null} 88 | {!dropDownList.length ? ( 89 | <> 90 | {areAllItemsChecked ? ( 91 | 92 | {ALL_ITEMS_CHECKED_TEXT} 93 | 94 | ) : ( 95 | 96 | 97 | {ALL_ITEMS_CHECKED_TEXT} 98 | 99 | 100 | {TRY_CHANGING_SEARCH_TEXT} 101 | 102 | 103 | )} 104 | 105 | ) : null} 106 | 107 | ); 108 | 109 | const Footer = ( 110 | 111 | {renderClearButton ? ( 112 | renderClearButton(onClearAll, !checkedList.length) 113 | ) : ( 114 | (checkedList.length ? onClearAll() : null)} 117 | disabled={!checkedList.length} 118 | style={clearButtonStyle} 119 | /> 120 | )} 121 | {renderSaveButton ? ( 122 | renderSaveButton(onApply, localAndAppliedAreEqual) 123 | ) : ( 124 | (localAndAppliedAreEqual ? null : onApply())} 127 | disabled={localAndAppliedAreEqual} 128 | style={saveButtonStyle} 129 | /> 130 | )} 131 | 132 | ); 133 | 134 | const ContentList = ( 135 | 140 | { 143 | // Call user defined callback function 144 | if (isCloseToBottom(nativeEvent) && onEndReached) { 145 | const newIteration = fetchIteration + 1; 146 | setFetchIteration(newIteration); 147 | onEndReached(newIteration, (val: boolean) => { 148 | setShowRefetchLoader(val); 149 | }); 150 | } 151 | }} 152 | scrollEventThrottle={400} 153 | > 154 | {SelectedSection} 155 | {NotSelectedHeaderSection} 156 | {dropDownList?.map((item) => 157 | renderCheckBox ? ( 158 | 159 | {renderCheckBox(item, checkedList.includes(item), onCheck)} 160 | 161 | ) : ( 162 | onCheck(item)} 166 | active={checkedList.includes(item)} 167 | /> 168 | ) 169 | )} 170 | {showRefetchLoader ? ( 171 | 172 | ) : null} 173 | 174 | 175 | ); 176 | 177 | return ( 178 | 179 | 180 | 181 | {title} 182 | 183 | 184 | 185 | 186 | 187 | 194 | {showSearchLoader ? ( 195 | 196 | ) : ( 197 | ContentList 198 | )} 199 | 200 | {Footer} 201 | 202 | 203 | ); 204 | }; 205 | 206 | const styles = StyleSheet.create({ 207 | mainContainer: { 208 | flex: 1, 209 | padding: 16, 210 | paddingTop: Platform.OS === 'ios' ? 58 : 20, 211 | }, 212 | content: { 213 | flex: 15, 214 | }, 215 | footer: { 216 | flex: 1, 217 | flexDirection: 'row', 218 | justifyContent: 'space-between', 219 | padding: 8, 220 | }, 221 | headerContainer: { 222 | flexDirection: 'row', 223 | justifyContent: 'space-between', 224 | alignItems: 'center', 225 | marginBottom: 12, 226 | marginRight: 8, 227 | }, 228 | headerTitle: { 229 | fontSize: 20, 230 | fontWeight: 'bold', 231 | }, 232 | cross: { 233 | width: 19, 234 | height: 19, 235 | }, 236 | scrollViewContent: { 237 | paddingVertical: 8, 238 | }, 239 | notSelected: { 240 | marginVertical: 6, 241 | }, 242 | notDataAvailableText: { 243 | textAlign: 'center', 244 | color: '#808080', 245 | marginTop: 12, 246 | fontSize: 14, 247 | }, 248 | noDataWithSearchFilter: { 249 | alignSelf: 'center', 250 | marginTop: 12, 251 | }, 252 | noDataWithSearchFilterText: { 253 | textAlign: 'center', 254 | color: '#808080', 255 | fontSize: 14, 256 | }, 257 | keyboardAvoidingView: { flex: 1 }, 258 | searchLoader: { 259 | marginTop: 20, 260 | }, 261 | }); 262 | -------------------------------------------------------------------------------- /src/components/BaseMultiPicker/OptionsModal.type.ts: -------------------------------------------------------------------------------- 1 | import type { StyleProp, TextStyle, ViewStyle } from 'react-native'; 2 | 3 | export interface OptionsModalProps { 4 | onClose: () => void; 5 | onCheck: (item: string) => void; 6 | checkedList: string[]; 7 | title: string; 8 | onApply: () => void; 9 | onClearAll: () => void; 10 | data: string[]; 11 | searchBarStyle?: StyleProp; 12 | renderCheckBox?: ( 13 | value: string, 14 | active: boolean, 15 | onCheck: (item: string) => void 16 | ) => JSX.Element; 17 | clearButtonStyle?: StyleProp; 18 | saveButtonStyle?: StyleProp; 19 | renderClearButton?: ( 20 | onClearAll: () => void, 21 | disabled: boolean 22 | ) => JSX.Element; 23 | renderSaveButton?: (onApply: () => void, disabled: boolean) => JSX.Element; 24 | modalTitleStyle?: StyleProp; 25 | searchBarPlaceholder?: string; 26 | onSearchTextChange?: ( 27 | searchText: string, 28 | setLoader: (value: boolean) => void 29 | ) => void; 30 | onEndReached?: ( 31 | iteration: number, 32 | setLoader: (value: boolean) => void 33 | ) => void; 34 | } 35 | -------------------------------------------------------------------------------- /src/components/BaseMultiPicker/RNMultiPicker.tsx: -------------------------------------------------------------------------------- 1 | import React, { useCallback, useState } from 'react'; 2 | import { TouchableOpacity, View, Text, Image } from 'react-native'; 3 | 4 | import ChevronDown from '../../assets/icons/chevron-down.png'; 5 | import { OptionsModal } from './OptionsModal'; 6 | import type { RNMultiSelectProps } from './RNMultiPicker.type'; 7 | import { useMultiPickerItems } from '../../hooks/useMultiPickerItems'; 8 | import { CheckedItemList } from '../common/CheckedItemList'; 9 | import { RNSectionedMultiPicker } from '../SectionedMultiPicker/RNSectionedMultiPicker'; 10 | import { rnMultiPickerStyles as styles } from '../common/commonStyles'; 11 | import { MAX_CHECKED_ITEMS_VISIBLE } from '../../constants'; 12 | 13 | export const RNMultiSelect = ({ 14 | placeholder, 15 | data, 16 | onSelectedItemsChange, 17 | selectedItems, 18 | styles: multiSelectStyles, 19 | inputStyle, 20 | renderCheckedItem, 21 | searchBarStyle, 22 | renderCheckBox, 23 | clearButtonStyle, 24 | saveButtonStyle, 25 | renderClearButton, 26 | renderSaveButton, 27 | modalTitleStyle, 28 | searchBarPlaceholder, 29 | maxCheckedItemsVisible = MAX_CHECKED_ITEMS_VISIBLE, 30 | renderViewMoreButton, 31 | renderViewLessButton, 32 | checkedItemsColor, 33 | checkedItemsContentColor, 34 | onSearchTextChange, 35 | onEndReached, 36 | }: RNMultiSelectProps) => { 37 | const [dropDownVisible, setDropDownVisible] = useState(false); 38 | 39 | const { 40 | checkedList, 41 | onCheck, 42 | onApply, 43 | onRemove, 44 | onCheckMultiple, 45 | checkedDropdownList, 46 | } = useMultiPickerItems( 47 | selectedItems, 48 | onSelectedItemsChange, 49 | () => setDropDownVisible(false), 50 | data 51 | ); 52 | 53 | const toggleDropdown = useCallback(() => { 54 | setDropDownVisible((curr) => !curr); 55 | }, [setDropDownVisible]); 56 | 57 | const onClose = useCallback(() => { 58 | onCheckMultiple(selectedItems); 59 | toggleDropdown(); 60 | }, [onCheckMultiple, selectedItems, toggleDropdown]); 61 | 62 | const renderCheckedItems = () => { 63 | if (!selectedItems.length) { 64 | return null; 65 | } 66 | return ( 67 | 68 | 81 | 82 | ); 83 | }; 84 | 85 | const FloatingLabel = {placeholder}; 86 | 87 | const DefaultLabel = ( 88 | 89 | {placeholder} 90 | 91 | 92 | 93 | 94 | ); 95 | 96 | return ( 97 | <> 98 | {dropDownVisible && ( 99 | onCheckMultiple([])} 107 | searchBarStyle={searchBarStyle} 108 | renderCheckBox={renderCheckBox} 109 | clearButtonStyle={clearButtonStyle} 110 | saveButtonStyle={saveButtonStyle} 111 | renderClearButton={renderClearButton} 112 | renderSaveButton={renderSaveButton} 113 | modalTitleStyle={modalTitleStyle} 114 | searchBarPlaceholder={searchBarPlaceholder} 115 | onSearchTextChange={onSearchTextChange} 116 | onEndReached={onEndReached} 117 | /> 118 | )} 119 | 123 | {renderCheckedItems()} 124 | {!!checkedDropdownList.length && FloatingLabel} 125 | {!checkedDropdownList.length && DefaultLabel} 126 | 127 | 128 | ); 129 | }; 130 | 131 | RNMultiSelect.Sectioned = RNSectionedMultiPicker; 132 | -------------------------------------------------------------------------------- /src/components/BaseMultiPicker/RNMultiPicker.type.ts: -------------------------------------------------------------------------------- 1 | import type { StyleProp, TextStyle, ViewStyle } from 'react-native'; 2 | 3 | export interface SectionedMultiSelectData { 4 | title: string; 5 | data: { 6 | id: string; 7 | value: string; 8 | }[]; 9 | } 10 | 11 | export interface SectionedSelectedItems { 12 | id: string; 13 | title: string; 14 | value: string; 15 | } 16 | 17 | export interface CustomSelectedSectionHeaderData { 18 | title: string; 19 | data: SectionedMultiSelectData['data']; 20 | } 21 | 22 | export interface RNMultiSelectProps { 23 | /** (string): Placeholder text displayed in the multi-select input field. */ 24 | placeholder: string; 25 | /** (string[]): An array of strings representing the selectable items in the multi-select. */ 26 | data: string[]; 27 | /** ((selectedItems: string[]) => void): Callback function triggered when selected items change. */ 28 | onSelectedItemsChange: (selectedItems: string[]) => void; 29 | /** (string[]): An array of strings representing the currently selected items. */ 30 | selectedItems: string[]; 31 | /** 32 | * @deprecated Use {@link inputStyle} instead. 33 | */ 34 | styles?: StyleProp; 35 | /** ((value: string, i: number) => JSX.Element): Custom renderer for checked items.. */ 36 | renderCheckedItem?: (value: string, i: number) => JSX.Element; 37 | /** ((value: string, active: boolean, onCheck: (item: string) => void) => JSX.Element): Custom renderer for checkboxes. */ 38 | renderCheckBox?: ( 39 | value: string, 40 | active: boolean, 41 | onCheck: (item: string) => void 42 | ) => JSX.Element; 43 | /** (StyleProp): Styling for the search bar. */ 44 | searchBarStyle?: StyleProp; 45 | /** (StyleProp): Styling for the clear button. */ 46 | clearButtonStyle?: StyleProp; 47 | /** (StyleProp): Styling for the save button. */ 48 | saveButtonStyle?: StyleProp; 49 | /** ((onClearAll: () => void, disabled: boolean) => JSX.Element): Custom renderer for the clear button. */ 50 | renderClearButton?: ( 51 | onClearAll: () => void, 52 | disabled: boolean 53 | ) => JSX.Element; 54 | /** ((onApply: () => void, disabled: boolean) => JSX.Element): Custom renderer for the save button. */ 55 | renderSaveButton?: (onApply: () => void, disabled: boolean) => JSX.Element; 56 | /** (StyleProp): (StyleProp): Styling for the picker modal title. */ 57 | modalTitleStyle?: StyleProp; 58 | /** (string): Placeholder text for the search bar. */ 59 | searchBarPlaceholder?: string; 60 | /** (StyleProp): Styling for the input field. */ 61 | inputStyle?: StyleProp; 62 | /** (number): Maximum number of checked items visible in the selection. */ 63 | maxCheckedItemsVisible?: number; 64 | /** ((showAll: () => void, remainingCount: number) => JSX.Element): Custom renderer for the "View More" button on the input. */ 65 | renderViewMoreButton?: ( 66 | showAll: () => void, 67 | remainingCount: number 68 | ) => JSX.Element; 69 | /** ((showLess: () => void) => JSX.Element): Custom renderer for the "View Less" button on the input. */ 70 | renderViewLessButton?: (showLess: () => void) => JSX.Element; 71 | /** (sring): Change the background color of the checked items visible on the input box. */ 72 | checkedItemsColor?: string; 73 | /** (sring): Change the color of the title and cross icon on the the checked items visible on the input box. */ 74 | checkedItemsContentColor?: string; 75 | /** ((searchText: string, setLoader: (value: boolean) => void) => void;): Callback function triggered when user enters search value. */ 76 | onSearchTextChange?: ( 77 | searchText: string, 78 | setLoader: (value: boolean) => void 79 | ) => void; 80 | /** (StyleProp): Callback function triggered when user scrolls to the last item in the not selected list. */ 81 | onEndReached?: ( 82 | iteration: number, 83 | setLoader: (value: boolean) => void 84 | ) => void; 85 | } 86 | -------------------------------------------------------------------------------- /src/components/SectionedMultiPicker/RNSectionedMultiPicker.tsx: -------------------------------------------------------------------------------- 1 | import React, { useCallback, useState } from 'react'; 2 | import { Image, Text, TouchableOpacity, View } from 'react-native'; 3 | import type { 4 | CustomSelectedSectionHeaderData, 5 | RNMultiSelectProps, 6 | SectionedMultiSelectData, 7 | SectionedSelectedItems, 8 | } from '../BaseMultiPicker/RNMultiPicker.type'; 9 | import { CheckedItemList } from '../common/CheckedItemList'; 10 | import ChevronDown from '../../assets/icons/chevron-down.png'; 11 | import { useSectionedMultiPickerItems } from '../../hooks/useSectionedMultiPickerItems'; 12 | import { SectionedOptionsModal } from './SectionedOptionsModal'; 13 | import { rnMultiPickerStyles } from '../common/commonStyles'; 14 | import { MAX_CHECKED_ITEMS_VISIBLE } from '../../constants'; 15 | 16 | type OmmitedSectionedPickerProps = Omit< 17 | RNMultiSelectProps, 18 | | 'data' 19 | | 'selectedItems' 20 | | 'onSelectedItemsChange' 21 | | 'renderCheckedItem' 22 | | 'renderCheckBox' 23 | >; 24 | 25 | export interface RNSectionedMultiPickerProps 26 | extends OmmitedSectionedPickerProps { 27 | /** (SectionedMultiSelectData[]): An array of data representing the sectioned items in the multi-picker. */ 28 | data: SectionedMultiSelectData[]; 29 | /** SectionedSelectedItems[]): An array of selected items with section information. */ 30 | selectedItems: SectionedSelectedItems[]; 31 | /** ((selectedItems: SectionedSelectedItems[]) => void): Callback function triggered when selected items change. */ 32 | onSelectedItemsChange: (selectedItems: SectionedSelectedItems[]) => void; 33 | /** ((value: SectionedSelectedItems, onRemove: () => void, i: number) => JSX.Element): Custom renderer for checked items in the picker. */ 34 | renderCheckedItem?: ( 35 | value: SectionedSelectedItems, 36 | onRemove: () => void, 37 | i: number 38 | ) => JSX.Element; 39 | /** ((value: SectionedSelectedItems, active: boolean, onCheck: (item: SectionedSelectedItems) => void) => JSX.Element): Custom renderer for checkboxes in the picker. */ 40 | renderCheckBox?: ( 41 | value: SectionedSelectedItems, 42 | active: boolean, 43 | onCheck: (item: SectionedSelectedItems) => void 44 | ) => JSX.Element; 45 | /** ((value: SectionedSelectedItems, active: boolean, onCheck: (item: SectionedSelectedItems) => void) => JSX.Element): Custom renderer for Section title headers in the Selected items. */ 46 | renderSelectedSectionHeader?: ( 47 | value: CustomSelectedSectionHeaderData, 48 | active: boolean, 49 | onCheck: (item: SectionedSelectedItems) => void 50 | ) => JSX.Element; 51 | /** ((value: CustomSelectedSectionHeaderData, active: boolean, onCheck: (item: SectionedSelectedItems) => void) => JSX.Element): Custom renderer for Section title headers in the Not Selected items. */ 52 | renderNotSelectedSectionHeader?: ( 53 | value: CustomSelectedSectionHeaderData, 54 | active: boolean, 55 | onCheck: (item: SectionedSelectedItems) => void 56 | ) => JSX.Element; 57 | } 58 | 59 | export const RNSectionedMultiPicker = ({ 60 | placeholder, 61 | data, 62 | onSelectedItemsChange, 63 | selectedItems, 64 | styles: multiSelectStyles, 65 | inputStyle, 66 | renderCheckedItem, 67 | searchBarStyle, 68 | renderCheckBox, 69 | clearButtonStyle, 70 | saveButtonStyle, 71 | renderClearButton, 72 | renderSaveButton, 73 | modalTitleStyle, 74 | searchBarPlaceholder, 75 | maxCheckedItemsVisible = MAX_CHECKED_ITEMS_VISIBLE, 76 | renderViewMoreButton, 77 | renderViewLessButton, 78 | checkedItemsColor, 79 | checkedItemsContentColor, 80 | renderSelectedSectionHeader, 81 | renderNotSelectedSectionHeader, 82 | }: RNSectionedMultiPickerProps) => { 83 | const [dropDownVisible, setDropDownVisible] = useState(false); 84 | const { 85 | checkedList, 86 | onCheck, 87 | onApply, 88 | onRemove, 89 | onCheckMultiple, 90 | checkedDropdownList, 91 | onRemoveMultiple, 92 | } = useSectionedMultiPickerItems( 93 | selectedItems, 94 | onSelectedItemsChange, 95 | () => setDropDownVisible(false), 96 | data 97 | ); 98 | 99 | const toggleDropdown = useCallback(() => { 100 | setDropDownVisible((curr) => !curr); 101 | }, [setDropDownVisible]); 102 | 103 | const onClose = useCallback(() => { 104 | onCheckMultiple(selectedItems); 105 | toggleDropdown(); 106 | }, [onCheckMultiple, selectedItems, toggleDropdown]); 107 | 108 | const renderCheckedItems = () => { 109 | if (!selectedItems.length) { 110 | return null; 111 | } 112 | return ( 113 | 114 | 128 | 129 | ); 130 | }; 131 | 132 | const FloatingLabel = ( 133 | {placeholder} 134 | ); 135 | 136 | const DefaultLabel = ( 137 | 141 | {placeholder} 142 | 143 | 144 | 145 | 146 | ); 147 | 148 | return ( 149 | <> 150 | {dropDownVisible && ( 151 | onCheckMultiple([])} 159 | searchBarStyle={searchBarStyle} 160 | renderCheckBox={renderCheckBox} 161 | clearButtonStyle={clearButtonStyle} 162 | saveButtonStyle={saveButtonStyle} 163 | renderClearButton={renderClearButton} 164 | renderSaveButton={renderSaveButton} 165 | modalTitleStyle={modalTitleStyle} 166 | searchBarPlaceholder={searchBarPlaceholder} 167 | onCheckMultiple={onCheckMultiple} 168 | onRemoveMultiple={onRemoveMultiple} 169 | renderSelectedSectionHeader={renderSelectedSectionHeader} 170 | renderNotSelectedSectionHeader={renderNotSelectedSectionHeader} 171 | /> 172 | )} 173 | 177 | {renderCheckedItems()} 178 | {!!checkedDropdownList.length && FloatingLabel} 179 | {!checkedDropdownList.length && DefaultLabel} 180 | 181 | 182 | ); 183 | }; 184 | -------------------------------------------------------------------------------- /src/components/SectionedMultiPicker/SectionedDropdownItem.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { View, StyleSheet } from 'react-native'; 3 | import type { 4 | SectionedMultiSelectData, 5 | SectionedSelectedItems, 6 | } from '../BaseMultiPicker/RNMultiPicker.type'; 7 | import { DefaultCheckBox } from '../common/DefaultCheckBox'; 8 | 9 | interface SectionedDropdownItemProps { 10 | value: SectionedMultiSelectData['data'][0]; 11 | renderCheckBox?: ( 12 | value: SectionedSelectedItems, 13 | active: boolean, 14 | onCheck: (item: SectionedSelectedItems) => void 15 | ) => JSX.Element; 16 | title: string; 17 | onCheck: (item: SectionedSelectedItems) => void; 18 | checkedList: SectionedSelectedItems[]; 19 | } 20 | 21 | export const SectionedDropdownItem = ({ 22 | value, 23 | renderCheckBox, 24 | title, 25 | checkedList, 26 | onCheck, 27 | }: SectionedDropdownItemProps) => { 28 | return ( 29 | 30 | {renderCheckBox ? ( 31 | 32 | {renderCheckBox( 33 | { ...value, title: title }, 34 | !!checkedList.find((dt) => dt.id === value.id), 35 | onCheck 36 | )} 37 | 38 | ) : ( 39 | onCheck({ ...value, title: title })} 43 | active={!!checkedList.find((dt) => dt.id === value.id)} 44 | size={16} 45 | containerStyle={styles.smallCheckBoxStyle} 46 | /> 47 | )} 48 | 49 | ); 50 | }; 51 | 52 | const styles = StyleSheet.create({ 53 | smallCheckBoxStyle: { 54 | paddingLeft: 8, 55 | }, 56 | }); 57 | -------------------------------------------------------------------------------- /src/components/SectionedMultiPicker/SectionedOptionsModal.tsx: -------------------------------------------------------------------------------- 1 | import React, { useCallback, useMemo, useState } from 'react'; 2 | import { 3 | Image, 4 | StyleSheet, 5 | Text, 6 | Pressable, 7 | ScrollView, 8 | Modal, 9 | View, 10 | Platform, 11 | KeyboardAvoidingView, 12 | TouchableOpacity, 13 | ActivityIndicator, 14 | } from 'react-native'; 15 | import Cross from '../../assets/icons/close.png'; 16 | import { SearchInput } from '../common/SearchInput'; 17 | import { useSearch } from '../../hooks/useSearch'; 18 | import type { OptionsModalProps } from '../BaseMultiPicker/OptionsModal.type'; 19 | import { DefaultCheckBox } from '../common/DefaultCheckBox'; 20 | import { DefaultFooterButton } from '../common/DefaultFooterButton'; 21 | import type { 22 | CustomSelectedSectionHeaderData, 23 | SectionedMultiSelectData, 24 | SectionedSelectedItems, 25 | } from '../BaseMultiPicker/RNMultiPicker.type'; 26 | import ChevronDown from '../../assets/icons/chevron-down.png'; 27 | import { useSectionedDropdownList } from '../../hooks/useDropdownList'; 28 | import { SectionedDropdownItem } from './SectionedDropdownItem'; 29 | import { isCloseToBottom } from '../../utils'; 30 | 31 | const ALL_ITEMS_CHECKED_TEXT = 'No data available!'; 32 | const TRY_CHANGING_SEARCH_TEXT = 'Try changing the search text!'; 33 | 34 | type OmmitedSectionedOptionsModalProps = Omit< 35 | OptionsModalProps, 36 | 'onCheck' | 'checkedList' | 'data' | 'renderCheckBox' 37 | >; 38 | 39 | interface SectionedOptionsModalProps extends OmmitedSectionedOptionsModalProps { 40 | onCheck: (item: SectionedSelectedItems) => void; 41 | checkedList: SectionedSelectedItems[]; 42 | data: SectionedMultiSelectData[]; 43 | renderCheckBox?: ( 44 | value: SectionedSelectedItems, 45 | active: boolean, 46 | onCheck: (item: SectionedSelectedItems) => void 47 | ) => JSX.Element; 48 | onCheckMultiple: (items: SectionedSelectedItems[]) => void; 49 | onRemoveMultiple: (items: SectionedSelectedItems[]) => void; 50 | renderSelectedSectionHeader?: ( 51 | value: CustomSelectedSectionHeaderData, 52 | active: boolean, 53 | onCheck: (item: SectionedSelectedItems) => void 54 | ) => JSX.Element; 55 | renderNotSelectedSectionHeader?: ( 56 | value: CustomSelectedSectionHeaderData, 57 | active: boolean, 58 | onCheck: (item: SectionedSelectedItems) => void 59 | ) => JSX.Element; 60 | } 61 | 62 | export const SectionedOptionsModal = ({ 63 | onClose, 64 | data, 65 | onCheck, 66 | checkedList, 67 | title, 68 | onApply, 69 | onClearAll, 70 | searchBarStyle, 71 | renderCheckBox, 72 | clearButtonStyle, 73 | saveButtonStyle, 74 | renderClearButton, 75 | renderSaveButton, 76 | modalTitleStyle, 77 | searchBarPlaceholder, 78 | onCheckMultiple, 79 | onRemoveMultiple, 80 | renderSelectedSectionHeader, 81 | renderNotSelectedSectionHeader, 82 | onSearchTextChange: onSearchExternal, 83 | onEndReached, 84 | }: SectionedOptionsModalProps) => { 85 | const [showSearchLoader, setShowSearchLoader] = useState(false); 86 | const [showRefetchLoader, setShowRefetchLoader] = useState(false); 87 | const [fetchIteration, setFetchIteration] = useState(0); 88 | const { searchText, onSearch, clearSearch } = useSearch( 89 | setShowSearchLoader, 90 | onSearchExternal 91 | ); 92 | const [initialCheckedList] = React.useState(checkedList); 93 | 94 | // Selected and not selected dropdown related states 95 | const [selectedDropdownVisible, setSelectedDropdownVisible] = useState(true); 96 | const [notSelectedDropdownVisible, setNotSelectedDropdownVisible] = 97 | useState(true); 98 | 99 | const totalItems = useMemo(() => { 100 | let total = 0; 101 | data.forEach((value) => { 102 | value.data.forEach(() => { 103 | total++; 104 | }); 105 | }); 106 | return total; 107 | }, [data]); 108 | 109 | const { dropDownList, checkedDropDownList } = useSectionedDropdownList( 110 | data, 111 | checkedList, 112 | searchText 113 | ); 114 | 115 | const localAndAppliedAreEqual = 116 | initialCheckedList.sort().toString() === checkedList.sort().toString(); 117 | const areAllItemsChecked = totalItems === checkedList.length; 118 | 119 | const onSelectedSectionHeaderCheck = useCallback( 120 | (item: SectionedMultiSelectData) => { 121 | const remainingItems = item.data.map((val) => ({ 122 | ...val, 123 | title: item.title, 124 | })); 125 | onRemoveMultiple([...remainingItems]); 126 | }, 127 | [onRemoveMultiple] 128 | ); 129 | 130 | const onNotSelectedSectionHeaderCheck = useCallback( 131 | (item: SectionedMultiSelectData) => { 132 | const remainingItems = item.data.map((val) => ({ 133 | ...val, 134 | title: item.title, 135 | })); 136 | onCheckMultiple([...checkedList, ...remainingItems]); 137 | }, 138 | [checkedList, onCheckMultiple] 139 | ); 140 | 141 | const SelectedSection = ( 142 | <> 143 | {checkedList.length ? ( 144 | setSelectedDropdownVisible((curr) => !curr)} 146 | style={styles.selectedBox} 147 | > 148 | Selected 149 | 156 | 157 | ) : null} 158 | {selectedDropdownVisible 159 | ? checkedDropDownList?.map((item, i) => { 160 | return ( 161 | 162 | {renderSelectedSectionHeader ? ( 163 | renderSelectedSectionHeader( 164 | { 165 | title: item.title, 166 | data: item.data, 167 | }, 168 | true, 169 | () => onSelectedSectionHeaderCheck(item) 170 | ) 171 | ) : ( 172 | onSelectedSectionHeaderCheck(item)} 175 | active={true} 176 | titleStyle={styles.title} 177 | titleNumberOfLines={1} 178 | /> 179 | )} 180 | {item.data.map((value) => ( 181 | 189 | ))} 190 | 191 | ); 192 | }) 193 | : null} 194 | 195 | ); 196 | 197 | const NotSelectedHeaderSection = ( 198 | <> 199 | {checkedList.length ? ( 200 | setNotSelectedDropdownVisible((curr) => !curr)} 202 | style={styles.selectedBox} 203 | > 204 | Not Selected 205 | 212 | 213 | ) : null} 214 | {!dropDownList.length && notSelectedDropdownVisible ? ( 215 | <> 216 | {areAllItemsChecked ? ( 217 | 218 | {ALL_ITEMS_CHECKED_TEXT} 219 | 220 | ) : ( 221 | 222 | 223 | {ALL_ITEMS_CHECKED_TEXT} 224 | 225 | 226 | {TRY_CHANGING_SEARCH_TEXT} 227 | 228 | 229 | )} 230 | 231 | ) : null} 232 | 233 | ); 234 | 235 | const Footer = ( 236 | 237 | {renderClearButton ? ( 238 | renderClearButton(() => { 239 | onClearAll(); 240 | setNotSelectedDropdownVisible(true); 241 | setSelectedDropdownVisible(true); 242 | }, !checkedList.length) 243 | ) : ( 244 | { 249 | onClearAll(); 250 | setNotSelectedDropdownVisible(true); 251 | setSelectedDropdownVisible(true); 252 | } 253 | : () => null 254 | } 255 | disabled={!checkedList.length} 256 | style={clearButtonStyle} 257 | /> 258 | )} 259 | {renderSaveButton ? ( 260 | renderSaveButton(onApply, localAndAppliedAreEqual) 261 | ) : ( 262 | (localAndAppliedAreEqual ? null : onApply())} 265 | disabled={localAndAppliedAreEqual} 266 | style={saveButtonStyle} 267 | /> 268 | )} 269 | 270 | ); 271 | 272 | const ContentList = ( 273 | 278 | { 281 | // Call user defined callback function 282 | if (isCloseToBottom(nativeEvent) && onEndReached) { 283 | const newIteration = fetchIteration + 1; 284 | setFetchIteration(newIteration); 285 | onEndReached(newIteration, (val: boolean) => { 286 | setShowRefetchLoader(val); 287 | }); 288 | } 289 | }} 290 | scrollEventThrottle={400} 291 | > 292 | {SelectedSection} 293 | {NotSelectedHeaderSection} 294 | {notSelectedDropdownVisible 295 | ? dropDownList?.map((item, i) => { 296 | return ( 297 | 298 | {renderNotSelectedSectionHeader ? ( 299 | renderNotSelectedSectionHeader( 300 | { 301 | title: item.title, 302 | data: item.data, 303 | }, 304 | true, 305 | () => onNotSelectedSectionHeaderCheck(item) 306 | ) 307 | ) : ( 308 | onNotSelectedSectionHeaderCheck(item)} 311 | active={false} 312 | titleStyle={styles.title} 313 | /> 314 | )} 315 | 316 | {item.data.map((value) => ( 317 | 325 | ))} 326 | 327 | ); 328 | }) 329 | : null} 330 | {showRefetchLoader ? ( 331 | 332 | ) : null} 333 | 334 | 335 | ); 336 | 337 | return ( 338 | 339 | 340 | 341 | {title} 342 | 343 | 344 | 345 | 346 | 347 | 354 | {showSearchLoader ? ( 355 | 356 | ) : ( 357 | ContentList 358 | )} 359 | 360 | {Footer} 361 | 362 | 363 | ); 364 | }; 365 | 366 | const styles = StyleSheet.create({ 367 | mainContainer: { 368 | flex: 1, 369 | padding: 16, 370 | paddingTop: Platform.OS === 'ios' ? 58 : 20, 371 | }, 372 | content: { 373 | flex: 15, 374 | }, 375 | footer: { 376 | flex: 1, 377 | flexDirection: 'row', 378 | justifyContent: 'space-between', 379 | padding: 8, 380 | }, 381 | headerContainer: { 382 | flexDirection: 'row', 383 | justifyContent: 'space-between', 384 | alignItems: 'center', 385 | marginBottom: 12, 386 | marginRight: 8, 387 | }, 388 | headerTitle: { 389 | fontSize: 20, 390 | fontWeight: 'bold', 391 | }, 392 | cross: { 393 | width: 19, 394 | height: 19, 395 | }, 396 | scrollViewContent: { 397 | paddingVertical: 8, 398 | }, 399 | notSelected: { 400 | marginVertical: 6, 401 | marginBottom: 10, 402 | }, 403 | notDataAvailableText: { 404 | textAlign: 'center', 405 | color: '#808080', 406 | marginTop: 12, 407 | fontSize: 14, 408 | }, 409 | noDataWithSearchFilter: { 410 | alignSelf: 'center', 411 | marginTop: 12, 412 | }, 413 | noDataWithSearchFilterText: { 414 | textAlign: 'center', 415 | color: '#808080', 416 | fontSize: 14, 417 | }, 418 | selectedText: { 419 | marginBottom: 10, 420 | }, 421 | chevronDown: { 422 | width: 16, 423 | height: 16, 424 | }, 425 | selectedBox: { 426 | flexDirection: 'row', 427 | justifyContent: 'space-between', 428 | borderBottomWidth: 1, 429 | borderBottomColor: '#8c8c8c', 430 | marginVertical: 12, 431 | paddingTop: 8, 432 | }, 433 | inverted: { 434 | transform: [{ rotate: '180deg' }], 435 | }, 436 | title: { 437 | fontWeight: 'bold', 438 | fontSize: 18, 439 | paddingVertical: 4, 440 | color: '#404040', 441 | }, 442 | smallCheckBoxStyle: { 443 | paddingLeft: 8, 444 | }, 445 | keyboardAvoidingView: { flex: 1 }, 446 | searchLoader: { 447 | marginTop: 20, 448 | }, 449 | }); 450 | -------------------------------------------------------------------------------- /src/components/common/CheckBox.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Image, View } from 'react-native'; 3 | 4 | import CheckedBox from '../../assets/icons/checkedbox.png'; 5 | import UnCheckedBox from '../../assets/icons/uncheckedbox.png'; 6 | import { StyleSheet } from 'react-native'; 7 | 8 | interface RadioProps { 9 | active: boolean; 10 | size?: number; 11 | tintColor?: string; 12 | } 13 | 14 | export const CheckBox = ({ active, size, tintColor }: RadioProps) => { 15 | return ( 16 | 17 | {active ? ( 18 | 26 | ) : ( 27 | 35 | )} 36 | 37 | ); 38 | }; 39 | 40 | const styles = StyleSheet.create({ 41 | icon: { 42 | width: 24, 43 | height: 24, 44 | }, 45 | }); 46 | -------------------------------------------------------------------------------- /src/components/common/CheckedItem.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Image, Text } from 'react-native'; 3 | import { StyleSheet, View } from 'react-native'; 4 | import Cross from '../../assets/icons/white-cross.png'; 5 | import { Pressable } from 'react-native'; 6 | 7 | export interface CheckedItemProps { 8 | title: string; 9 | onRemove: (value: string) => void; 10 | id?: string; 11 | color?: string; 12 | contentColor?: string; 13 | } 14 | 15 | export const CheckedItem = ({ 16 | title, 17 | onRemove, 18 | id, 19 | color, 20 | contentColor, 21 | }: CheckedItemProps) => { 22 | return ( 23 | true} 29 | onTouchEnd={(e) => e.stopPropagation()} 30 | onPress={() => onRemove(id ?? title)} 31 | > 32 | 38 | {title} 39 | 40 | 41 | 48 | 49 | 50 | ); 51 | }; 52 | 53 | const styles = StyleSheet.create({ 54 | checkedItem: { 55 | padding: 6, 56 | paddingHorizontal: 12, 57 | borderWidth: 1, 58 | marginRight: 2, 59 | marginBottom: 1, 60 | borderColor: 'gray', 61 | borderRadius: 30, 62 | flexDirection: 'row', 63 | alignItems: 'center', 64 | maxWidth: 280, 65 | backgroundColor: '#6666ff', 66 | }, 67 | title: { 68 | color: 'white', 69 | fontSize: 12, 70 | marginRight: 6, 71 | }, 72 | crossContainer: { 73 | alignItems: 'center', 74 | justifyContent: 'center', 75 | }, 76 | cross: { 77 | width: 10, 78 | height: 10, 79 | }, 80 | }); 81 | -------------------------------------------------------------------------------- /src/components/common/CheckedItemList.tsx: -------------------------------------------------------------------------------- 1 | import { StyleSheet, View } from 'react-native'; 2 | import { ViewButton } from './ViewButton'; 3 | import React, { useState } from 'react'; 4 | import { CheckedItem } from './CheckedItem'; 5 | import type { SectionedSelectedItems } from '../BaseMultiPicker/RNMultiPicker.type'; 6 | 7 | interface CheckedListProps { 8 | checkedListCount: number; 9 | selectedItems: string[] | SectionedSelectedItems[]; 10 | maxCheckedItemsVisible: number; 11 | renderCheckedItem?: ( 12 | value: string | SectionedSelectedItems, 13 | onRemove: () => void, 14 | i: number 15 | ) => JSX.Element; 16 | renderViewMoreButton?: ( 17 | showAll: () => void, 18 | remainingCount: number 19 | ) => JSX.Element; 20 | onRemove: (value: string | SectionedSelectedItems) => void; 21 | renderViewLessButton?: (showLess: () => void) => JSX.Element; 22 | isSectioned?: boolean; 23 | checkedItemsColor?: string; 24 | checkedItemsContentColor?: string; 25 | } 26 | 27 | type BaseRenderCheckedItem = ( 28 | value: string, 29 | onRemove: (value: string) => void, 30 | i: number 31 | ) => JSX.Element; 32 | 33 | type SectionedRenderCheckedItem = ( 34 | value: SectionedSelectedItems, 35 | onRemove: (value: SectionedSelectedItems) => void, 36 | i: number 37 | ) => JSX.Element; 38 | 39 | export const CheckedItemList = ({ 40 | selectedItems, 41 | checkedListCount, 42 | maxCheckedItemsVisible, 43 | renderCheckedItem, 44 | renderViewMoreButton, 45 | onRemove, 46 | renderViewLessButton, 47 | isSectioned, 48 | checkedItemsColor, 49 | checkedItemsContentColor, 50 | }: CheckedListProps) => { 51 | const [showAllCheckedItems, setShowAllCheckedItems] = useState(false); 52 | const showViewCheckedButton = checkedListCount > maxCheckedItemsVisible; 53 | 54 | const renderViewButton = () => { 55 | const remainingCount = checkedListCount - maxCheckedItemsVisible; 56 | 57 | if (renderViewMoreButton) { 58 | return renderViewMoreButton( 59 | () => setShowAllCheckedItems(true), 60 | remainingCount 61 | ); 62 | } 63 | return ( 64 | setShowAllCheckedItems((val) => !val)} 67 | remainingCount={remainingCount} 68 | /> 69 | ); 70 | }; 71 | 72 | if (isSectioned) { 73 | const sectionRenderCheckedItem = 74 | renderCheckedItem as SectionedRenderCheckedItem; 75 | return ( 76 | 77 | {(selectedItems as SectionedSelectedItems[])?.map((value, i) => { 78 | const showViewMoreBtn = 79 | i + 1 === maxCheckedItemsVisible + 1 && !showAllCheckedItems; 80 | const exceedsMaxCheckedItemsPossible = 81 | i + 1 > maxCheckedItemsVisible && !showAllCheckedItems; 82 | 83 | if (showViewMoreBtn) { 84 | return renderViewButton(); 85 | } 86 | 87 | if (exceedsMaxCheckedItemsPossible) { 88 | return null; 89 | } 90 | return ( 91 | 92 | {sectionRenderCheckedItem ? ( 93 | 94 | {sectionRenderCheckedItem( 95 | value as SectionedSelectedItems, 96 | () => onRemove(value.id), 97 | i 98 | )} 99 | 100 | ) : ( 101 | 109 | )} 110 | 111 | ); 112 | })} 113 | {showViewCheckedButton && showAllCheckedItems ? ( 114 | <> 115 | {renderViewLessButton ? ( 116 | renderViewLessButton(() => setShowAllCheckedItems(false)) 117 | ) : ( 118 | setShowAllCheckedItems((val) => !val)} 121 | remainingCount={checkedListCount - maxCheckedItemsVisible} 122 | /> 123 | )} 124 | 125 | ) : null} 126 | 127 | ); 128 | } 129 | 130 | const baseRenderCheckedItem = renderCheckedItem as BaseRenderCheckedItem; 131 | 132 | return ( 133 | 134 | {(selectedItems as string[])?.map((value, i) => { 135 | const showViewMoreBtn = 136 | i + 1 === maxCheckedItemsVisible + 1 && !showAllCheckedItems; 137 | const exceedsMaxCheckedItemsPossible = 138 | i + 1 > maxCheckedItemsVisible && !showAllCheckedItems; 139 | 140 | if (showViewMoreBtn) { 141 | return renderViewButton(); 142 | } 143 | 144 | if (exceedsMaxCheckedItemsPossible) { 145 | return null; 146 | } 147 | 148 | return ( 149 | 150 | {baseRenderCheckedItem ? ( 151 | 152 | {baseRenderCheckedItem(value, () => onRemove(value), i)} 153 | 154 | ) : ( 155 | 162 | )} 163 | 164 | ); 165 | })} 166 | {showViewCheckedButton && showAllCheckedItems ? ( 167 | <> 168 | {renderViewLessButton ? ( 169 | renderViewLessButton(() => setShowAllCheckedItems(false)) 170 | ) : ( 171 | setShowAllCheckedItems((val) => !val)} 174 | remainingCount={checkedListCount - maxCheckedItemsVisible} 175 | /> 176 | )} 177 | 178 | ) : null} 179 | 180 | ); 181 | }; 182 | 183 | const styles = StyleSheet.create({ 184 | checkedItemsContainer: { 185 | flexDirection: 'row', 186 | marginBottom: 2, 187 | flexWrap: 'wrap', 188 | }, 189 | checkedList: { 190 | flex: 1, 191 | flexDirection: 'row', 192 | flexWrap: 'wrap', 193 | }, 194 | }); 195 | -------------------------------------------------------------------------------- /src/components/common/DefaultCheckBox.tsx: -------------------------------------------------------------------------------- 1 | import { Image, StyleSheet, Text, Pressable } from 'react-native'; 2 | import { CheckBox } from './CheckBox'; 3 | import React from 'react'; 4 | import type { StyleProp, TextStyle, ViewStyle } from 'react-native'; 5 | import ChevronDown from '../../assets/icons/chevron-down.png'; 6 | 7 | interface DefaultCheckBoxProps { 8 | onCheck: () => void; 9 | item: string; 10 | active: boolean; 11 | size?: number; 12 | titleStyle?: StyleProp; 13 | containerStyle?: StyleProp; 14 | tintColor?: string; 15 | showChevron?: boolean; 16 | titleNumberOfLines?: number; 17 | } 18 | 19 | export const DefaultCheckBox = ({ 20 | onCheck, 21 | item, 22 | active, 23 | size, 24 | titleStyle, 25 | containerStyle, 26 | tintColor, 27 | showChevron, 28 | titleNumberOfLines = 2, 29 | }: DefaultCheckBoxProps) => ( 30 | true} 33 | onTouchEnd={(e) => e.stopPropagation()} 34 | style={({ pressed }) => [ 35 | styles.checkboxContainer, 36 | containerStyle, 37 | { opacity: pressed ? 0.2 : 1 }, 38 | showChevron && { borderBottomWidth: 1, borderBottomColor: '#e6e6e6' }, 39 | ]} 40 | > 41 | 42 | 47 | {item} 48 | 49 | {showChevron ? ( 50 | 51 | 52 | 53 | ) : null} 54 | 55 | ); 56 | 57 | const styles = StyleSheet.create({ 58 | checkboxContainer: { 59 | flexDirection: 'row', 60 | marginBottom: 4, 61 | alignItems: 'center', 62 | }, 63 | checkbox: { 64 | alignSelf: 'center', 65 | }, 66 | label: { 67 | margin: 8, 68 | fontSize: 14, 69 | width: '82%', 70 | }, 71 | chevronDown: { 72 | width: 18, 73 | height: 18, 74 | zIndex: 1111, 75 | tintColor: '#00264d', 76 | marginBottom: 2, 77 | }, 78 | }); 79 | -------------------------------------------------------------------------------- /src/components/common/DefaultFooterButton.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, type StyleProp, type ViewStyle } from 'react-native'; 3 | import { Pressable, Text } from 'react-native'; 4 | 5 | interface DefaultFooterButtonProps { 6 | title: string; 7 | onPress: () => void; 8 | disabled: boolean; 9 | style: StyleProp; 10 | } 11 | 12 | export const DefaultFooterButton = ({ 13 | title, 14 | onPress, 15 | disabled, 16 | style, 17 | }: DefaultFooterButtonProps) => ( 18 | 22 | {title} 23 | 24 | ); 25 | 26 | const styles = StyleSheet.create({ 27 | button: { 28 | borderWidth: 1, 29 | width: 120, 30 | height: 42, 31 | borderColor: '#b3b3b3', 32 | borderRadius: 6, 33 | justifyContent: 'center', 34 | alignItems: 'center', 35 | }, 36 | label: { 37 | fontSize: 18, 38 | }, 39 | disabledStyle: { 40 | backgroundColor: '#f2f2f2', 41 | borderWidth: 0, 42 | }, 43 | }); 44 | -------------------------------------------------------------------------------- /src/components/common/SearchInput.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | Image, 4 | Platform, 5 | Pressable, 6 | StyleSheet, 7 | TextInput, 8 | View, 9 | type StyleProp, 10 | type TextStyle, 11 | } from 'react-native'; 12 | import Cross from '../../assets/icons/close.png'; 13 | import { Keyboard } from 'react-native'; 14 | 15 | interface SearchInputProps { 16 | searchText: string; 17 | searchBarStyle?: StyleProp; 18 | searchBarPlaceholder?: string; 19 | onSearch: (newValue: string) => void; 20 | clearSearch: () => void; 21 | } 22 | 23 | export const SearchInput = ({ 24 | searchText, 25 | searchBarStyle, 26 | searchBarPlaceholder, 27 | onSearch, 28 | clearSearch, 29 | }: SearchInputProps) => { 30 | return ( 31 | 32 | 38 | {searchText ? ( 39 | { 42 | clearSearch(); 43 | Keyboard.dismiss(); 44 | }} 45 | > 46 | 47 | 48 | ) : null} 49 | 50 | ); 51 | }; 52 | 53 | const styles = StyleSheet.create({ 54 | searchBar: { 55 | borderWidth: 1, 56 | paddingHorizontal: 12, 57 | paddingRight: 32, 58 | paddingVertical: Platform.select({ 59 | ios: 13, 60 | android: 8, 61 | web: 14, 62 | }), 63 | marginBottom: 8, 64 | borderRadius: 6, 65 | }, 66 | cross: { 67 | width: 14, 68 | height: 14, 69 | }, 70 | searchCrossContainer: { 71 | position: 'absolute', 72 | top: 17, 73 | right: 12, 74 | }, 75 | searchCross: { 76 | width: 12, 77 | height: 12, 78 | }, 79 | }); 80 | -------------------------------------------------------------------------------- /src/components/common/ViewButton.tsx: -------------------------------------------------------------------------------- 1 | import { Image, Pressable, StyleSheet, Text } from 'react-native'; 2 | import ChevronDown from '../../assets/icons/chevron-down.png'; 3 | import React from 'react'; 4 | 5 | interface ViewBtnProps { 6 | onPress: () => void; 7 | more?: boolean; 8 | remainingCount: number; 9 | } 10 | 11 | export const ViewButton = ({ 12 | more = true, 13 | onPress, 14 | remainingCount, 15 | }: ViewBtnProps) => ( 16 | 17 | 18 | {more ? `+${remainingCount} more` : 'Show less'} 19 | 20 | 24 | 25 | ); 26 | 27 | const styles = StyleSheet.create({ 28 | chevronDown: { 29 | width: 16, 30 | height: 16, 31 | }, 32 | viewAll: { 33 | fontSize: 12, 34 | marginRight: 6, 35 | color: '#666666', 36 | }, 37 | viewAllBtn: { 38 | padding: 5, 39 | paddingHorizontal: 12, 40 | borderWidth: 1, 41 | marginRight: 2, 42 | marginBottom: 1, 43 | marginTop: 2, 44 | borderColor: '#666666', 45 | borderRadius: 30, 46 | flexDirection: 'row', 47 | alignItems: 'center', 48 | maxWidth: 280, 49 | }, 50 | showLess: { 51 | transform: [{ rotate: '180deg' }], 52 | }, 53 | }); 54 | -------------------------------------------------------------------------------- /src/components/common/commonStyles.tsx: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | 3 | export const rnMultiPickerStyles = StyleSheet.create({ 4 | multiSelect: { 5 | padding: 8, 6 | paddingVertical: 12, 7 | borderWidth: 1, 8 | borderColor: '#a6a6a6', 9 | borderRadius: 20, 10 | width: '90%', 11 | }, 12 | defaultLabel: { 13 | marginLeft: 4, 14 | flexDirection: 'row', 15 | justifyContent: 'space-between', 16 | alignItems: 'center', 17 | }, 18 | floatingLabel: { 19 | position: 'absolute', 20 | top: -10, 21 | left: 8, 22 | backgroundColor: 'white', 23 | paddingHorizontal: 4, 24 | fontSize: 12, 25 | color: '#4d4d4d', 26 | }, 27 | checkedItemsContainer: { 28 | flexDirection: 'row', 29 | marginBottom: 2, 30 | flexWrap: 'wrap', 31 | }, 32 | checkedList: { 33 | flex: 1, 34 | flexDirection: 'row', 35 | flexWrap: 'wrap', 36 | }, 37 | downArrowIconContainer: { 38 | marginRight: 4, 39 | alignItems: 'center', 40 | justifyContent: 'center', 41 | }, 42 | defaultLabelText: { 43 | color: '#666666', 44 | fontWeight: 'bold', 45 | }, 46 | defaultLabelCrossContainer: { 47 | marginRight: 4, 48 | }, 49 | chevronDown: { 50 | width: 16, 51 | height: 16, 52 | }, 53 | }); 54 | -------------------------------------------------------------------------------- /src/constants.ts: -------------------------------------------------------------------------------- 1 | export const MAX_CHECKED_ITEMS_VISIBLE = 10; 2 | -------------------------------------------------------------------------------- /src/hooks/useDropdownList.ts: -------------------------------------------------------------------------------- 1 | import { useMemo } from 'react'; 2 | import type { 3 | SectionedMultiSelectData, 4 | SectionedSelectedItems, 5 | } from '../components/BaseMultiPicker/RNMultiPicker.type'; 6 | 7 | export const useSectionedDropdownList = ( 8 | data: SectionedMultiSelectData[], 9 | checkedList: SectionedSelectedItems[], 10 | searchText: string 11 | ) => { 12 | const dropDownList = useMemo(() => { 13 | const dt: SectionedMultiSelectData[] = []; 14 | data.forEach((value) => { 15 | const objData: SectionedMultiSelectData['data'] = []; 16 | // Create data array 17 | value.data.forEach((item) => { 18 | const isChecked = checkedList.find((chec) => chec.id === item.id); 19 | const valueContainsSearchText = item.value 20 | .toLowerCase() 21 | .startsWith(searchText?.toLowerCase() ?? ''); 22 | const titleContainsSearchText = value.title 23 | .toLowerCase() 24 | .startsWith(searchText?.toLowerCase() ?? ''); 25 | if ( 26 | !isChecked && 27 | (valueContainsSearchText || titleContainsSearchText) 28 | ) { 29 | objData.push(item); 30 | } 31 | }); 32 | if (objData.length) { 33 | dt.push({ title: value.title, data: objData }); 34 | } 35 | }); 36 | return dt; 37 | }, [data, checkedList, searchText]); 38 | 39 | const checkedDropDownList = useMemo(() => { 40 | const dt: SectionedMultiSelectData[] = []; 41 | data.forEach((value) => { 42 | const objData: SectionedMultiSelectData['data'] = []; 43 | // Create data array 44 | value.data.forEach((item) => { 45 | const isChecked = checkedList.find((chec) => chec.id === item.id); 46 | if (isChecked) { 47 | objData.push(item); 48 | } 49 | }); 50 | if (objData.length) { 51 | dt.push({ title: value.title, data: objData }); 52 | } 53 | }); 54 | return dt; 55 | }, [data, checkedList]); 56 | 57 | return { dropDownList, checkedDropDownList }; 58 | }; 59 | -------------------------------------------------------------------------------- /src/hooks/useMultiPickerItems.ts: -------------------------------------------------------------------------------- 1 | import { useCallback, useState } from 'react'; 2 | 3 | export const useMultiPickerItems = ( 4 | selectedItems: string[], 5 | onSelectedItemsChange: (selectedItems: string[]) => void, 6 | hideDropDown: () => void, 7 | data: string[] 8 | ) => { 9 | const [checkedList, setCheckedList] = useState(selectedItems); 10 | const checkedDropdownList = data?.filter((i) => selectedItems.includes(i)); 11 | 12 | const onCheck = useCallback( 13 | (item: string) => { 14 | const checkedListCopy = JSON.parse(JSON.stringify(checkedList)); 15 | if (checkedListCopy.includes(item)) { 16 | checkedListCopy.splice(checkedList.indexOf(item), 1); 17 | } else { 18 | checkedListCopy.push(item); 19 | } 20 | setCheckedList(checkedListCopy); 21 | }, 22 | [checkedList, setCheckedList] 23 | ); 24 | 25 | const onApply = useCallback(() => { 26 | onSelectedItemsChange(checkedList); 27 | hideDropDown(); 28 | }, [onSelectedItemsChange, hideDropDown, checkedList]); 29 | 30 | const onRemove = useCallback( 31 | (value: string) => { 32 | onSelectedItemsChange(selectedItems.filter((i) => i !== value)); 33 | setCheckedList((curr) => curr.filter((item) => item !== value)); 34 | }, 35 | [onSelectedItemsChange, selectedItems] 36 | ); 37 | 38 | const onCheckMultiple = useCallback( 39 | (items: string[]) => { 40 | setCheckedList(items); 41 | }, 42 | [setCheckedList] 43 | ); 44 | 45 | return { 46 | checkedList, 47 | onCheck, 48 | onApply, 49 | onRemove, 50 | onCheckMultiple, 51 | checkedDropdownList, 52 | }; 53 | }; 54 | -------------------------------------------------------------------------------- /src/hooks/useSearch.ts: -------------------------------------------------------------------------------- 1 | import { useState } from 'react'; 2 | 3 | export const useSearch = ( 4 | setShowLoader: React.Dispatch>, 5 | onSearchExternal?: ( 6 | searchText: string, 7 | setLoader: (value: boolean) => void 8 | ) => void 9 | ) => { 10 | const [searchText, setSearchText] = useState(''); 11 | 12 | const onSearch = (value: string) => { 13 | setSearchText(value); 14 | // Call user defined callback function 15 | onSearchExternal?.(value, (show: boolean) => { 16 | setShowLoader(show); 17 | }); 18 | }; 19 | 20 | const clearSearch = () => { 21 | setSearchText(''); 22 | // Call user defined callback function 23 | onSearchExternal?.('', (show: boolean) => { 24 | setShowLoader(show); 25 | }); 26 | }; 27 | 28 | return { 29 | searchText, 30 | onSearch, 31 | clearSearch, 32 | }; 33 | }; 34 | -------------------------------------------------------------------------------- /src/hooks/useSectionedMultiPickerItems.ts: -------------------------------------------------------------------------------- 1 | import { useCallback, useMemo, useState } from 'react'; 2 | import type { 3 | SectionedMultiSelectData, 4 | SectionedSelectedItems, 5 | } from '../components/BaseMultiPicker/RNMultiPicker.type'; 6 | 7 | export const useSectionedMultiPickerItems = ( 8 | selectedItems: SectionedSelectedItems[], 9 | onSelectedItemsChange: (selectedItems: SectionedSelectedItems[]) => void, 10 | hideDropDown: () => void, 11 | data: SectionedMultiSelectData[] 12 | ) => { 13 | const [checkedList, setCheckedList] = useState(selectedItems); 14 | const checkedDropdownList = useMemo(() => { 15 | const dt: SectionedMultiSelectData[] = []; 16 | data.forEach((value) => { 17 | const objData: SectionedMultiSelectData['data'] = []; 18 | // Create data array 19 | value.data.forEach((item) => { 20 | const isChecked = checkedList.find((chec) => chec.id === item.id); 21 | if (isChecked) { 22 | objData.push(item); 23 | } 24 | }); 25 | if (objData.length) { 26 | dt.push({ title: value.title, data: objData }); 27 | } 28 | }); 29 | return dt; 30 | }, [data, checkedList]); 31 | 32 | const onCheck = useCallback( 33 | (selectedItem: SectionedSelectedItems) => { 34 | let checkedListCopy: SectionedSelectedItems[] = JSON.parse( 35 | JSON.stringify(checkedList) 36 | ); 37 | const isSelected = checkedListCopy.find( 38 | (item) => item.id === selectedItem.id 39 | ); 40 | if (isSelected) { 41 | checkedListCopy = checkedListCopy.filter( 42 | (item) => item.id !== selectedItem.id 43 | ); 44 | } else { 45 | checkedListCopy.push(selectedItem); 46 | } 47 | setCheckedList(checkedListCopy); 48 | }, 49 | [checkedList, setCheckedList] 50 | ); 51 | 52 | const onApply = useCallback(() => { 53 | onSelectedItemsChange(checkedList); 54 | hideDropDown(); 55 | }, [onSelectedItemsChange, hideDropDown, checkedList]); 56 | 57 | const onRemove = useCallback( 58 | (id: string) => { 59 | onSelectedItemsChange(selectedItems.filter((item) => item.id !== id)); 60 | setCheckedList((curr) => curr.filter((item) => item.id !== id)); 61 | }, 62 | [onSelectedItemsChange, selectedItems] 63 | ); 64 | 65 | const onCheckMultiple = useCallback( 66 | (items: SectionedSelectedItems[]) => { 67 | setCheckedList(items); 68 | }, 69 | [setCheckedList] 70 | ); 71 | 72 | const onRemoveMultiple = useCallback( 73 | (items: SectionedSelectedItems[]) => { 74 | let checkedItemsCopy: SectionedSelectedItems[] = JSON.parse( 75 | JSON.stringify(checkedList) 76 | ); 77 | const itemsIds = items.map((i) => i.id); 78 | checkedItemsCopy = checkedItemsCopy.filter( 79 | (value) => !itemsIds.includes(value.id) 80 | ); 81 | setCheckedList(checkedItemsCopy); 82 | }, 83 | [setCheckedList, checkedList] 84 | ); 85 | 86 | return { 87 | checkedList, 88 | onCheck, 89 | onApply, 90 | onRemove, 91 | onCheckMultiple, 92 | checkedDropdownList, 93 | onRemoveMultiple, 94 | }; 95 | }; 96 | -------------------------------------------------------------------------------- /src/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './components/BaseMultiPicker/RNMultiPicker'; 2 | export * from './components/BaseMultiPicker/RNMultiPicker.type'; 3 | -------------------------------------------------------------------------------- /src/types/global.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.png' { 2 | const value: import('react-native').ImageSourcePropType; 3 | export default value; 4 | } 5 | -------------------------------------------------------------------------------- /src/utils.ts: -------------------------------------------------------------------------------- 1 | import type { NativeScrollEvent } from 'react-native'; 2 | import type { SectionedMultiSelectData } from './components/BaseMultiPicker/RNMultiPicker.type'; 3 | 4 | export const isSectioned = (data: any): data is SectionedMultiSelectData[] => { 5 | if ( 6 | data.length && 7 | Object.keys(data).length === 2 && 8 | data[0]?.title && 9 | data[0]?.data 10 | ) { 11 | return true; 12 | } 13 | return false; 14 | }; 15 | 16 | export const isCloseToBottom = ({ 17 | layoutMeasurement, 18 | contentOffset, 19 | contentSize, 20 | }: NativeScrollEvent) => { 21 | const paddingToBottom = 20; 22 | return ( 23 | layoutMeasurement.height + contentOffset.y >= 24 | contentSize.height - paddingToBottom 25 | ); 26 | }; 27 | -------------------------------------------------------------------------------- /tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig", 3 | "exclude": ["example"] 4 | } 5 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "rootDir": ".", 4 | "paths": { 5 | "rn-multipicker": ["./src/index"] 6 | }, 7 | "allowUnreachableCode": false, 8 | "allowUnusedLabels": false, 9 | "esModuleInterop": true, 10 | "forceConsistentCasingInFileNames": true, 11 | "jsx": "react", 12 | "lib": ["esnext"], 13 | "module": "esnext", 14 | "moduleResolution": "node", 15 | "noFallthroughCasesInSwitch": true, 16 | "noImplicitReturns": true, 17 | "noImplicitUseStrict": false, 18 | "noStrictGenericChecks": false, 19 | "noUncheckedIndexedAccess": true, 20 | "noUnusedLocals": true, 21 | "noUnusedParameters": true, 22 | "resolveJsonModule": true, 23 | "skipLibCheck": true, 24 | "strict": true, 25 | "target": "esnext", 26 | "verbatimModuleSyntax": true 27 | } 28 | } 29 | --------------------------------------------------------------------------------