From ff92bc423ceb6bbc80e7661d8387d9e03ff42179 Mon Sep 17 00:00:00 2001 From: KaganYrk Date: Tue, 5 Mar 2024 13:46:00 +0000 Subject: [PATCH] deploy: 55c91652581b67ae5d92be548567b80ac6858351 --- 404.html | 2 +- assets/js/{06b20f41.924bf447.js => 06b20f41.a556ad2c.js} | 2 +- assets/js/{0768a46b.6ad058c9.js => 0768a46b.9ac38fa5.js} | 2 +- assets/js/{07f43a9f.4cce128e.js => 07f43a9f.393fa255.js} | 2 +- assets/js/{0a8705fd.78d456f1.js => 0a8705fd.f0d173df.js} | 2 +- assets/js/{12eb4ccc.01cc15a2.js => 12eb4ccc.1b183f1f.js} | 2 +- assets/js/{16e25549.957ee3b9.js => 16e25549.55e4d0c8.js} | 2 +- assets/js/{2019da93.cc87e690.js => 2019da93.1787acbf.js} | 2 +- assets/js/{27d45bb4.322ab96a.js => 27d45bb4.64634c5c.js} | 2 +- assets/js/{29ae9d0a.887d96f8.js => 29ae9d0a.edf2ce05.js} | 2 +- assets/js/{3023ca43.82c515c6.js => 3023ca43.9d557742.js} | 2 +- assets/js/{314d6f6a.604fef9b.js => 314d6f6a.9457464b.js} | 2 +- assets/js/{3899bbcc.3a70016b.js => 3899bbcc.91a65b3f.js} | 2 +- assets/js/{54239609.609473df.js => 54239609.1cfa7ce7.js} | 2 +- assets/js/{559b7fc6.648b9483.js => 559b7fc6.74e9cb20.js} | 2 +- assets/js/{567499ad.c1846a71.js => 567499ad.2d3892ff.js} | 2 +- assets/js/{5d326888.03338022.js => 5d326888.da4f7c0b.js} | 2 +- assets/js/{64139f8a.66d41922.js => 64139f8a.91debe4d.js} | 2 +- assets/js/{6e90cc76.ff869b66.js => 6e90cc76.60c5810f.js} | 2 +- assets/js/{6f7b2bff.dffbdd17.js => 6f7b2bff.d810ba57.js} | 2 +- assets/js/{7252791a.80ea5291.js => 7252791a.09f48c39.js} | 2 +- assets/js/{7410995e.7b4ab434.js => 7410995e.b3eea888.js} | 2 +- assets/js/{7628467b.c6c94934.js => 7628467b.ddeceeda.js} | 2 +- assets/js/7a52f50e.37d40ee9.js | 1 + assets/js/7a52f50e.7c984abe.js | 1 - assets/js/{7bbedb8d.a6382dcc.js => 7bbedb8d.bbd1f6aa.js} | 2 +- assets/js/{87878b99.83943910.js => 87878b99.e77e8b68.js} | 2 +- assets/js/8ea2467a.7efccfb9.js | 1 + assets/js/8ea2467a.cf5456ca.js | 1 - assets/js/{9443e6d3.d66cc86f.js => 9443e6d3.fd914596.js} | 2 +- assets/js/{9b76f633.684a5a3b.js => 9b76f633.e0e73957.js} | 2 +- assets/js/{9eb89d33.175d0b11.js => 9eb89d33.4fc0f424.js} | 2 +- assets/js/{a608fec9.4cba2dde.js => a608fec9.8fa3e564.js} | 2 +- assets/js/{aad2441e.07b64c8b.js => aad2441e.8eb507d6.js} | 2 +- assets/js/{af747567.239af02a.js => af747567.01749577.js} | 2 +- assets/js/{b026eae7.f5045a37.js => b026eae7.c7b226da.js} | 2 +- assets/js/b5eb131b.7465a400.js | 1 + assets/js/b5eb131b.af0680f9.js | 1 - assets/js/{b7a547c0.efb521a7.js => b7a547c0.62e32b36.js} | 2 +- assets/js/{b7aa83bd.e24429c4.js => b7aa83bd.11759812.js} | 2 +- assets/js/{b8b5d807.a1cee5c3.js => b8b5d807.f6a6bd76.js} | 2 +- assets/js/{bdcc3237.e143bb3a.js => bdcc3237.45932a55.js} | 2 +- assets/js/d90eaa59.7ec42543.js | 1 + assets/js/d90eaa59.8117bd13.js | 1 - assets/js/{dab7cbba.def59de6.js => dab7cbba.4f2edf45.js} | 2 +- assets/js/{dd0da6b8.efd5a896.js => dd0da6b8.2971a921.js} | 2 +- assets/js/{df866062.ce988887.js => df866062.b009760e.js} | 2 +- assets/js/{e306cb37.de363452.js => e306cb37.036087d4.js} | 2 +- assets/js/{e97f9a74.7b933164.js => e97f9a74.80b40b66.js} | 2 +- assets/js/{f19737d8.d1f1506f.js => f19737d8.571322b6.js} | 2 +- assets/js/{f334516a.4c33ab99.js => f334516a.9893ad02.js} | 2 +- assets/js/{f8be52c9.62f3f2b1.js => f8be52c9.570f2b94.js} | 2 +- assets/js/{fb87031d.84110516.js => fb87031d.922dce17.js} | 2 +- assets/js/{fe55c584.b6476fd6.js => fe55c584.a2a10fe1.js} | 2 +- assets/js/{ff6d8346.4f1da2ca.js => ff6d8346.6b3acf46.js} | 2 +- assets/js/runtime~main.9e66aa14.js | 1 + assets/js/runtime~main.c0e95d2e.js | 1 - docs/components/accordion-list/index.html | 4 ++-- docs/components/activity-indicator/index.html | 4 ++-- docs/components/avatar/index.html | 4 ++-- docs/components/badge/index.html | 4 ++-- docs/components/button/index.html | 4 ++-- docs/components/checkbox/index.html | 4 ++-- docs/components/chip/index.html | 4 ++-- docs/components/divider/index.html | 4 ++-- docs/components/dropdown/index.html | 4 ++-- docs/components/icon/index.html | 4 ++-- docs/components/menu/index.html | 4 ++-- docs/components/modal/index.html | 4 ++-- docs/components/pagerview/index.html | 4 ++-- docs/components/progress-bar/index.html | 4 ++-- docs/components/radio-button/index.html | 4 ++-- docs/components/slider/index.html | 4 ++-- docs/components/speed-dial/index.html | 4 ++-- docs/components/swipe/index.html | 4 ++-- docs/components/switch/index.html | 4 ++-- docs/components/text-input/index.html | 4 ++-- docs/components/toggle-button/index.html | 4 ++-- docs/doc/Notification/index.html | 4 ++-- docs/doc/Theme/index.html | 4 ++-- docs/doc/Typography/index.html | 4 ++-- docs/doc/getting-started/index.html | 4 ++-- docs/next/components/accordion-list/index.html | 4 ++-- docs/next/components/activity-indicator/index.html | 4 ++-- docs/next/components/avatar/index.html | 8 ++++---- docs/next/components/badge/index.html | 6 +++--- docs/next/components/button/index.html | 4 ++-- docs/next/components/checkbox/index.html | 4 ++-- docs/next/components/chip/index.html | 4 ++-- docs/next/components/divider/index.html | 4 ++-- docs/next/components/dropdown/index.html | 4 ++-- docs/next/components/icon/index.html | 4 ++-- docs/next/components/menu/index.html | 4 ++-- docs/next/components/modal/index.html | 4 ++-- docs/next/components/pagerview/index.html | 4 ++-- docs/next/components/progress-bar/index.html | 4 ++-- docs/next/components/radio-button/index.html | 4 ++-- docs/next/components/slider/index.html | 4 ++-- docs/next/components/speed-dial/index.html | 4 ++-- docs/next/components/swipe/index.html | 4 ++-- docs/next/components/switch/index.html | 4 ++-- docs/next/components/text-input/index.html | 4 ++-- docs/next/components/toggle-button/index.html | 4 ++-- docs/next/doc/Notification/index.html | 4 ++-- docs/next/doc/Theme/index.html | 4 ++-- docs/next/doc/Typography/index.html | 4 ++-- docs/next/doc/getting-started/index.html | 4 ++-- homepage/index.html | 2 +- index.html | 2 +- 109 files changed, 157 insertions(+), 157 deletions(-) rename assets/js/{06b20f41.924bf447.js => 06b20f41.a556ad2c.js} (98%) rename assets/js/{0768a46b.6ad058c9.js => 0768a46b.9ac38fa5.js} (97%) rename assets/js/{07f43a9f.4cce128e.js => 07f43a9f.393fa255.js} (97%) rename assets/js/{0a8705fd.78d456f1.js => 0a8705fd.f0d173df.js} (98%) rename assets/js/{12eb4ccc.01cc15a2.js => 12eb4ccc.1b183f1f.js} (98%) rename assets/js/{16e25549.957ee3b9.js => 16e25549.55e4d0c8.js} (98%) rename assets/js/{2019da93.cc87e690.js => 2019da93.1787acbf.js} (98%) rename assets/js/{27d45bb4.322ab96a.js => 27d45bb4.64634c5c.js} (99%) rename assets/js/{29ae9d0a.887d96f8.js => 29ae9d0a.edf2ce05.js} (99%) rename assets/js/{3023ca43.82c515c6.js => 3023ca43.9d557742.js} (94%) rename assets/js/{314d6f6a.604fef9b.js => 314d6f6a.9457464b.js} (99%) rename assets/js/{3899bbcc.3a70016b.js => 3899bbcc.91a65b3f.js} (97%) rename assets/js/{54239609.609473df.js => 54239609.1cfa7ce7.js} (98%) rename assets/js/{559b7fc6.648b9483.js => 559b7fc6.74e9cb20.js} (98%) rename assets/js/{567499ad.c1846a71.js => 567499ad.2d3892ff.js} (97%) rename assets/js/{5d326888.03338022.js => 5d326888.da4f7c0b.js} (99%) rename assets/js/{64139f8a.66d41922.js => 64139f8a.91debe4d.js} (98%) rename assets/js/{6e90cc76.ff869b66.js => 6e90cc76.60c5810f.js} (97%) rename assets/js/{6f7b2bff.dffbdd17.js => 6f7b2bff.d810ba57.js} (96%) rename assets/js/{7252791a.80ea5291.js => 7252791a.09f48c39.js} (98%) rename assets/js/{7410995e.7b4ab434.js => 7410995e.b3eea888.js} (98%) rename assets/js/{7628467b.c6c94934.js => 7628467b.ddeceeda.js} (98%) create mode 100644 assets/js/7a52f50e.37d40ee9.js delete mode 100644 assets/js/7a52f50e.7c984abe.js rename assets/js/{7bbedb8d.a6382dcc.js => 7bbedb8d.bbd1f6aa.js} (97%) rename assets/js/{87878b99.83943910.js => 87878b99.e77e8b68.js} (98%) create mode 100644 assets/js/8ea2467a.7efccfb9.js delete mode 100644 assets/js/8ea2467a.cf5456ca.js rename assets/js/{9443e6d3.d66cc86f.js => 9443e6d3.fd914596.js} (95%) rename assets/js/{9b76f633.684a5a3b.js => 9b76f633.e0e73957.js} (98%) rename assets/js/{9eb89d33.175d0b11.js => 9eb89d33.4fc0f424.js} (99%) rename assets/js/{a608fec9.4cba2dde.js => a608fec9.8fa3e564.js} (97%) rename assets/js/{aad2441e.07b64c8b.js => aad2441e.8eb507d6.js} (97%) rename assets/js/{af747567.239af02a.js => af747567.01749577.js} (99%) rename assets/js/{b026eae7.f5045a37.js => b026eae7.c7b226da.js} (50%) create mode 100644 assets/js/b5eb131b.7465a400.js delete mode 100644 assets/js/b5eb131b.af0680f9.js rename assets/js/{b7a547c0.efb521a7.js => b7a547c0.62e32b36.js} (98%) rename assets/js/{b7aa83bd.e24429c4.js => b7aa83bd.11759812.js} (99%) rename assets/js/{b8b5d807.a1cee5c3.js => b8b5d807.f6a6bd76.js} (96%) rename assets/js/{bdcc3237.e143bb3a.js => bdcc3237.45932a55.js} (87%) create mode 100644 assets/js/d90eaa59.7ec42543.js delete mode 100644 assets/js/d90eaa59.8117bd13.js rename assets/js/{dab7cbba.def59de6.js => dab7cbba.4f2edf45.js} (97%) rename assets/js/{dd0da6b8.efd5a896.js => dd0da6b8.2971a921.js} (99%) rename assets/js/{df866062.ce988887.js => df866062.b009760e.js} (99%) rename assets/js/{e306cb37.de363452.js => e306cb37.036087d4.js} (99%) rename assets/js/{e97f9a74.7b933164.js => e97f9a74.80b40b66.js} (97%) rename assets/js/{f19737d8.d1f1506f.js => f19737d8.571322b6.js} (99%) rename assets/js/{f334516a.4c33ab99.js => f334516a.9893ad02.js} (99%) rename assets/js/{f8be52c9.62f3f2b1.js => f8be52c9.570f2b94.js} (99%) rename assets/js/{fb87031d.84110516.js => fb87031d.922dce17.js} (98%) rename assets/js/{fe55c584.b6476fd6.js => fe55c584.a2a10fe1.js} (98%) rename assets/js/{ff6d8346.4f1da2ca.js => ff6d8346.6b3acf46.js} (96%) create mode 100644 assets/js/runtime~main.9e66aa14.js delete mode 100644 assets/js/runtime~main.c0e95d2e.js diff --git a/404.html b/404.html index 9fac0c5..bb366e4 100644 --- a/404.html +++ b/404.html @@ -4,7 +4,7 @@ Page Not Found | Kitra - + diff --git a/assets/js/06b20f41.924bf447.js b/assets/js/06b20f41.a556ad2c.js similarity index 98% rename from assets/js/06b20f41.924bf447.js rename to assets/js/06b20f41.a556ad2c.js index cfe64d6..7b010e0 100644 --- a/assets/js/06b20f41.924bf447.js +++ b/assets/js/06b20f41.a556ad2c.js @@ -1 +1 @@ -"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[8339],{7078:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>i,default:()=>x,frontMatter:()=>s,metadata:()=>l,toc:()=>o});var d=n(5893),r=n(1151);const s={sidebar_position:21},i="Text Input",l={id:"components/text-input",title:"Text Input",description:"The Text Input, a text input with label, count, helper text, left and right icons, and animations for the label and input box.",source:"@site/docs/components/text-input.md",sourceDirName:"components",slug:"/components/text-input",permalink:"/react-native-kitra/docs/next/components/text-input",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/docs/components/text-input.md",tags:[],version:"current",lastUpdatedAt:1707292585,formattedLastUpdatedAt:"Feb 7, 2024",sidebarPosition:21,frontMatter:{sidebar_position:21},sidebar:"ComponentsSidebar",previous:{title:"Switch",permalink:"/react-native-kitra/docs/next/components/switch"},next:{title:"Toggle Button",permalink:"/react-native-kitra/docs/next/components/toggle-button"}},c={},o=[{value:"Import",id:"import",level:3},{value:"Usage",id:"usage",level:3},{value:"Props",id:"props",level:3}];function h(e){const t={a:"a",code:"code",h1:"h1",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,r.a)(),...e.components};return(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)(t.h1,{id:"text-input",children:"Text Input"}),"\n",(0,d.jsxs)(t.p,{children:["The ",(0,d.jsx)(t.strong,{children:"Text Input"}),", a text input with label, count, helper text, left and right icons, and animations for the label and input box."]}),"\n",(0,d.jsx)(t.h3,{id:"import",children:"Import"}),"\n",(0,d.jsx)(t.pre,{children:(0,d.jsx)(t.code,{className:"language-js",children:"import { TextInput } from '@tra-tech/react-native-kitra';\n"})}),"\n",(0,d.jsx)(t.h3,{id:"usage",children:"Usage"}),"\n",(0,d.jsx)(t.pre,{children:(0,d.jsx)(t.code,{className:"language-js",children:'import { TextInput, Icon } from \'@tra-tech/react-native-kitra\';\nimport { View } from \'react-native\';\n\nconst App = () => (\n \n }\n right={}\n count\n defaultValue="Default Value"\n maxLength={20}\n helperText="Normal"\n errorMessage="ERROR"\n />\n \n);\n\nexport default App;\n'})}),"\n",(0,d.jsx)(t.h3,{id:"props",children:"Props"}),"\n",(0,d.jsxs)(t.table,{children:[(0,d.jsx)(t.thead,{children:(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.th,{children:"Prop name"}),(0,d.jsx)(t.th,{children:"Type"}),(0,d.jsx)(t.th,{children:"Required"}),(0,d.jsx)(t.th,{children:"Description"})]})}),(0,d.jsxs)(t.tbody,{children:[(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"size"}),(0,d.jsx)(t.td,{children:(0,d.jsx)("code",{children:"'small' | 'medium' | 'large'"})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsxs)(t.td,{children:["The size of the text input. Default Value: ",(0,d.jsx)(t.code,{children:"'medium' "})]})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"iconPosition"}),(0,d.jsx)(t.td,{children:(0,d.jsx)("code",{children:"'left' | 'right' "})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"Location of the icon."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"labelColor"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.code,{children:"{focus:string, default:string}"})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"Label color for focus and unfocus status"})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"helperText"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.code,{children:"string"})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"Text of helper text."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"helperTextStyle"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.a,{href:"https://reactnative.dev/docs/text-style-props",children:(0,d.jsx)(t.code,{children:"StyleProp"})})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"Additional styles to apply to the helper text."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"variant"}),(0,d.jsx)(t.td,{children:(0,d.jsx)("code",{children:"'filled' | 'outlined'"})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsxs)(t.td,{children:["Variant of the TextInput. Default value: ",(0,d.jsx)(t.code,{children:"'filled'"})," ,"]})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"containerStyle"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.a,{href:"https://reactnative.dev/docs/text-style-props",children:(0,d.jsx)(t.code,{children:"StyleProp"})})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"Style of outter input container."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"inputContainerStyle"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.a,{href:"https://reactnative.dev/docs/text-style-props",children:(0,d.jsx)(t.code,{children:"StyleProp"})})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"Style of inner input container."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"labelContainerStyle"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.a,{href:"https://reactnative.dev/docs/text-style-props",children:(0,d.jsx)(t.code,{children:"StyleProp"})})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"Style of label container."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"count"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.code,{children:"boolean"})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsxs)(t.td,{children:["Shows the number of text input characters. Default value: ",(0,d.jsx)(t.code,{children:"false"}),"."]})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"label"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.code,{children:"string"})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"The text to use for the floating label."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"labelStyle"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.a,{href:"https://reactnative.dev/docs/text-style-props",children:(0,d.jsx)(t.code,{children:"StyleProp"})})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"Additional styles to apply to the label text."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"editable"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.code,{children:"boolean"})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsxs)(t.td,{children:["If false, text is not editable. Default value: ",(0,d.jsx)(t.code,{children:"true"}),"."]})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"inputStyle"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,d.jsx)(t.code,{children:"StyleProp"})})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"Additional styles to apply to the text input."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"errorMessage"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.code,{children:"string"})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"Error message."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"error"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.code,{children:"boolean "})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"If error is true error message is shown."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"left"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.a,{href:"https://reactnative.dev/docs/react-node",children:(0,d.jsx)(t.code,{children:"React.ReactNode"})})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"Used to add a react node to the left of the text input."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"right"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.a,{href:"https://reactnative.dev/docs/react-node",children:(0,d.jsx)(t.code,{children:"React.ReactNode"})})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"Used to add a react node to the right of the text input."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"...TextInputProps"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.a,{href:"https://reactnative.dev/docs/textinput#props",children:(0,d.jsx)(t.code,{children:"TextInputProps"})})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"Any additional props to be passed TextInput component."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"theme"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.code,{children:"UITheme "})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"The UI theme to use for the component."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"typography"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.code,{children:"UITypography "})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"The UI typography to use for the component."})]})]})]})]})}function x(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,d.jsx)(t,{...e,children:(0,d.jsx)(h,{...e})}):h(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>l,a:()=>i});var d=n(7294);const r={},s=d.createContext(r);function i(e){const t=d.useContext(s);return d.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),d.createElement(s.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[8339],{7078:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>i,default:()=>x,frontMatter:()=>s,metadata:()=>l,toc:()=>o});var d=n(5893),r=n(1151);const s={sidebar_position:21},i="Text Input",l={id:"components/text-input",title:"Text Input",description:"The Text Input, a text input with label, count, helper text, left and right icons, and animations for the label and input box.",source:"@site/docs/components/text-input.md",sourceDirName:"components",slug:"/components/text-input",permalink:"/react-native-kitra/docs/next/components/text-input",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/docs/components/text-input.md",tags:[],version:"current",lastUpdatedAt:1709646294,formattedLastUpdatedAt:"Mar 5, 2024",sidebarPosition:21,frontMatter:{sidebar_position:21},sidebar:"ComponentsSidebar",previous:{title:"Switch",permalink:"/react-native-kitra/docs/next/components/switch"},next:{title:"Toggle Button",permalink:"/react-native-kitra/docs/next/components/toggle-button"}},c={},o=[{value:"Import",id:"import",level:3},{value:"Usage",id:"usage",level:3},{value:"Props",id:"props",level:3}];function h(e){const t={a:"a",code:"code",h1:"h1",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,r.a)(),...e.components};return(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)(t.h1,{id:"text-input",children:"Text Input"}),"\n",(0,d.jsxs)(t.p,{children:["The ",(0,d.jsx)(t.strong,{children:"Text Input"}),", a text input with label, count, helper text, left and right icons, and animations for the label and input box."]}),"\n",(0,d.jsx)(t.h3,{id:"import",children:"Import"}),"\n",(0,d.jsx)(t.pre,{children:(0,d.jsx)(t.code,{className:"language-js",children:"import { TextInput } from '@tra-tech/react-native-kitra';\n"})}),"\n",(0,d.jsx)(t.h3,{id:"usage",children:"Usage"}),"\n",(0,d.jsx)(t.pre,{children:(0,d.jsx)(t.code,{className:"language-js",children:'import { TextInput, Icon } from \'@tra-tech/react-native-kitra\';\nimport { View } from \'react-native\';\n\nconst App = () => (\n \n }\n right={}\n count\n defaultValue="Default Value"\n maxLength={20}\n helperText="Normal"\n errorMessage="ERROR"\n />\n \n);\n\nexport default App;\n'})}),"\n",(0,d.jsx)(t.h3,{id:"props",children:"Props"}),"\n",(0,d.jsxs)(t.table,{children:[(0,d.jsx)(t.thead,{children:(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.th,{children:"Prop name"}),(0,d.jsx)(t.th,{children:"Type"}),(0,d.jsx)(t.th,{children:"Required"}),(0,d.jsx)(t.th,{children:"Description"})]})}),(0,d.jsxs)(t.tbody,{children:[(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"size"}),(0,d.jsx)(t.td,{children:(0,d.jsx)("code",{children:"'small' | 'medium' | 'large'"})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsxs)(t.td,{children:["The size of the text input. Default Value: ",(0,d.jsx)(t.code,{children:"'medium' "})]})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"iconPosition"}),(0,d.jsx)(t.td,{children:(0,d.jsx)("code",{children:"'left' | 'right' "})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"Location of the icon."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"labelColor"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.code,{children:"{focus:string, default:string}"})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"Label color for focus and unfocus status"})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"helperText"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.code,{children:"string"})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"Text of helper text."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"helperTextStyle"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.a,{href:"https://reactnative.dev/docs/text-style-props",children:(0,d.jsx)(t.code,{children:"StyleProp"})})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"Additional styles to apply to the helper text."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"variant"}),(0,d.jsx)(t.td,{children:(0,d.jsx)("code",{children:"'filled' | 'outlined'"})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsxs)(t.td,{children:["Variant of the TextInput. Default value: ",(0,d.jsx)(t.code,{children:"'filled'"})," ,"]})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"containerStyle"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.a,{href:"https://reactnative.dev/docs/text-style-props",children:(0,d.jsx)(t.code,{children:"StyleProp"})})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"Style of outter input container."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"inputContainerStyle"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.a,{href:"https://reactnative.dev/docs/text-style-props",children:(0,d.jsx)(t.code,{children:"StyleProp"})})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"Style of inner input container."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"labelContainerStyle"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.a,{href:"https://reactnative.dev/docs/text-style-props",children:(0,d.jsx)(t.code,{children:"StyleProp"})})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"Style of label container."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"count"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.code,{children:"boolean"})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsxs)(t.td,{children:["Shows the number of text input characters. Default value: ",(0,d.jsx)(t.code,{children:"false"}),"."]})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"label"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.code,{children:"string"})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"The text to use for the floating label."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"labelStyle"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.a,{href:"https://reactnative.dev/docs/text-style-props",children:(0,d.jsx)(t.code,{children:"StyleProp"})})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"Additional styles to apply to the label text."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"editable"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.code,{children:"boolean"})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsxs)(t.td,{children:["If false, text is not editable. Default value: ",(0,d.jsx)(t.code,{children:"true"}),"."]})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"inputStyle"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,d.jsx)(t.code,{children:"StyleProp"})})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"Additional styles to apply to the text input."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"errorMessage"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.code,{children:"string"})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"Error message."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"error"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.code,{children:"boolean "})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"If error is true error message is shown."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"left"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.a,{href:"https://reactnative.dev/docs/react-node",children:(0,d.jsx)(t.code,{children:"React.ReactNode"})})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"Used to add a react node to the left of the text input."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"right"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.a,{href:"https://reactnative.dev/docs/react-node",children:(0,d.jsx)(t.code,{children:"React.ReactNode"})})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"Used to add a react node to the right of the text input."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"...TextInputProps"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.a,{href:"https://reactnative.dev/docs/textinput#props",children:(0,d.jsx)(t.code,{children:"TextInputProps"})})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"Any additional props to be passed TextInput component."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"theme"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.code,{children:"UITheme "})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"The UI theme to use for the component."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"typography"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.code,{children:"UITypography "})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"The UI typography to use for the component."})]})]})]})]})}function x(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,d.jsx)(t,{...e,children:(0,d.jsx)(h,{...e})}):h(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>l,a:()=>i});var d=n(7294);const r={},s=d.createContext(r);function i(e){const t=d.useContext(s);return d.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),d.createElement(s.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/0768a46b.6ad058c9.js b/assets/js/0768a46b.9ac38fa5.js similarity index 97% rename from assets/js/0768a46b.6ad058c9.js rename to assets/js/0768a46b.9ac38fa5.js index b7aef50..5f64c01 100644 --- a/assets/js/0768a46b.6ad058c9.js +++ b/assets/js/0768a46b.9ac38fa5.js @@ -1 +1 @@ -"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[311],{7574:(e,t,r)=>{r.r(t),r.d(t,{assets:()=>c,contentTitle:()=>s,default:()=>h,frontMatter:()=>n,metadata:()=>o,toc:()=>l});var i=r(5893),d=r(1151);const n={sidebar_position:8},s="Divider",o={id:"components/divider",title:"Divider",description:"The Divider is a thin, lightweight separator that groups content in lists and page layouts.",source:"@site/docs/components/divider.md",sourceDirName:"components",slug:"/components/divider",permalink:"/react-native-kitra/docs/next/components/divider",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/docs/components/divider.md",tags:[],version:"current",lastUpdatedAt:1707292585,formattedLastUpdatedAt:"Feb 7, 2024",sidebarPosition:8,frontMatter:{sidebar_position:8},sidebar:"ComponentsSidebar",previous:{title:"Chip",permalink:"/react-native-kitra/docs/next/components/chip"},next:{title:"Dropdown",permalink:"/react-native-kitra/docs/next/components/dropdown"}},c={},l=[{value:"Import",id:"import",level:3},{value:"Usage",id:"usage",level:3},{value:"Props",id:"props",level:3}];function a(e){const t={a:"a",code:"code",h1:"h1",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,d.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.h1,{id:"divider",children:"Divider"}),"\n",(0,i.jsxs)(t.p,{children:["The ",(0,i.jsx)(t.strong,{children:"Divider"})," is a thin, lightweight separator that groups content in lists and page layouts."]}),"\n",(0,i.jsx)(t.h3,{id:"import",children:"Import"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-js",children:"import { Divider } from '@tra-tech/react-native-kitra';\n"})}),"\n",(0,i.jsx)(t.h3,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-js",children:'import { Divider } from \'@tra-tech/react-native-kitra\';\nimport { View } from \'react-native\';\n\nconst App = () => (\n \n \n \n \n \n);\n\nexport default App;\n'})}),"\n",(0,i.jsx)(t.h3,{id:"props",children:"Props"}),"\n",(0,i.jsxs)(t.table,{children:[(0,i.jsx)(t.thead,{children:(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.th,{children:"Prop name"}),(0,i.jsx)(t.th,{children:"Type"}),(0,i.jsx)(t.th,{children:"Required"}),(0,i.jsx)(t.th,{children:"Description"})]})}),(0,i.jsxs)(t.tbody,{children:[(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{children:"borderStyle"}),(0,i.jsx)(t.td,{children:(0,i.jsx)("code",{children:"'solid' | 'dotted' | 'dashed' "})}),(0,i.jsx)(t.td,{children:"No"}),(0,i.jsxs)(t.td,{children:["Additional styles to apply to the divider border style. Default value: ",(0,i.jsx)(t.code,{children:"'solid'"})]})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{children:"width"}),(0,i.jsx)(t.td,{children:(0,i.jsx)(t.code,{children:"number"})}),(0,i.jsx)(t.td,{children:"No"}),(0,i.jsxs)(t.td,{children:["Width of divider. Default value: ",(0,i.jsx)(t.code,{children:"'100%'"})]})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{children:"color"}),(0,i.jsx)(t.td,{children:(0,i.jsx)(t.code,{children:"string"})}),(0,i.jsx)(t.td,{children:"No"}),(0,i.jsx)(t.td,{children:"Color of divider."})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{children:"style"}),(0,i.jsx)(t.td,{children:(0,i.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,i.jsx)(t.code,{children:"StyleProp"})})}),(0,i.jsx)(t.td,{children:"No"}),(0,i.jsx)(t.td,{children:"Additional styles to apply to the divider."})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{children:"theme"}),(0,i.jsx)(t.td,{children:(0,i.jsx)(t.code,{children:"UITheme "})}),(0,i.jsx)(t.td,{children:"No"}),(0,i.jsx)(t.td,{children:"The UI theme to use for the component."})]})]})]})]})}function h(e={}){const{wrapper:t}={...(0,d.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(a,{...e})}):a(e)}},1151:(e,t,r)=>{r.d(t,{Z:()=>o,a:()=>s});var i=r(7294);const d={},n=i.createContext(d);function s(e){const t=i.useContext(n);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(d):e.components||d:s(e.components),i.createElement(n.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[311],{7574:(e,t,r)=>{r.r(t),r.d(t,{assets:()=>c,contentTitle:()=>s,default:()=>h,frontMatter:()=>n,metadata:()=>o,toc:()=>l});var i=r(5893),d=r(1151);const n={sidebar_position:8},s="Divider",o={id:"components/divider",title:"Divider",description:"The Divider is a thin, lightweight separator that groups content in lists and page layouts.",source:"@site/docs/components/divider.md",sourceDirName:"components",slug:"/components/divider",permalink:"/react-native-kitra/docs/next/components/divider",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/docs/components/divider.md",tags:[],version:"current",lastUpdatedAt:1709646294,formattedLastUpdatedAt:"Mar 5, 2024",sidebarPosition:8,frontMatter:{sidebar_position:8},sidebar:"ComponentsSidebar",previous:{title:"Chip",permalink:"/react-native-kitra/docs/next/components/chip"},next:{title:"Dropdown",permalink:"/react-native-kitra/docs/next/components/dropdown"}},c={},l=[{value:"Import",id:"import",level:3},{value:"Usage",id:"usage",level:3},{value:"Props",id:"props",level:3}];function a(e){const t={a:"a",code:"code",h1:"h1",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,d.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.h1,{id:"divider",children:"Divider"}),"\n",(0,i.jsxs)(t.p,{children:["The ",(0,i.jsx)(t.strong,{children:"Divider"})," is a thin, lightweight separator that groups content in lists and page layouts."]}),"\n",(0,i.jsx)(t.h3,{id:"import",children:"Import"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-js",children:"import { Divider } from '@tra-tech/react-native-kitra';\n"})}),"\n",(0,i.jsx)(t.h3,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-js",children:'import { Divider } from \'@tra-tech/react-native-kitra\';\nimport { View } from \'react-native\';\n\nconst App = () => (\n \n \n \n \n \n);\n\nexport default App;\n'})}),"\n",(0,i.jsx)(t.h3,{id:"props",children:"Props"}),"\n",(0,i.jsxs)(t.table,{children:[(0,i.jsx)(t.thead,{children:(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.th,{children:"Prop name"}),(0,i.jsx)(t.th,{children:"Type"}),(0,i.jsx)(t.th,{children:"Required"}),(0,i.jsx)(t.th,{children:"Description"})]})}),(0,i.jsxs)(t.tbody,{children:[(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{children:"borderStyle"}),(0,i.jsx)(t.td,{children:(0,i.jsx)("code",{children:"'solid' | 'dotted' | 'dashed' "})}),(0,i.jsx)(t.td,{children:"No"}),(0,i.jsxs)(t.td,{children:["Additional styles to apply to the divider border style. Default value: ",(0,i.jsx)(t.code,{children:"'solid'"})]})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{children:"width"}),(0,i.jsx)(t.td,{children:(0,i.jsx)(t.code,{children:"number"})}),(0,i.jsx)(t.td,{children:"No"}),(0,i.jsxs)(t.td,{children:["Width of divider. Default value: ",(0,i.jsx)(t.code,{children:"'100%'"})]})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{children:"color"}),(0,i.jsx)(t.td,{children:(0,i.jsx)(t.code,{children:"string"})}),(0,i.jsx)(t.td,{children:"No"}),(0,i.jsx)(t.td,{children:"Color of divider."})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{children:"style"}),(0,i.jsx)(t.td,{children:(0,i.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,i.jsx)(t.code,{children:"StyleProp"})})}),(0,i.jsx)(t.td,{children:"No"}),(0,i.jsx)(t.td,{children:"Additional styles to apply to the divider."})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{children:"theme"}),(0,i.jsx)(t.td,{children:(0,i.jsx)(t.code,{children:"UITheme "})}),(0,i.jsx)(t.td,{children:"No"}),(0,i.jsx)(t.td,{children:"The UI theme to use for the component."})]})]})]})]})}function h(e={}){const{wrapper:t}={...(0,d.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(a,{...e})}):a(e)}},1151:(e,t,r)=>{r.d(t,{Z:()=>o,a:()=>s});var i=r(7294);const d={},n=i.createContext(d);function s(e){const t=i.useContext(n);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(d):e.components||d:s(e.components),i.createElement(n.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/07f43a9f.4cce128e.js b/assets/js/07f43a9f.393fa255.js similarity index 97% rename from assets/js/07f43a9f.4cce128e.js rename to assets/js/07f43a9f.393fa255.js index 19bcb8e..e533a62 100644 --- a/assets/js/07f43a9f.4cce128e.js +++ b/assets/js/07f43a9f.393fa255.js @@ -1 +1 @@ -"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[5358],{2247:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>o,default:()=>h,frontMatter:()=>s,metadata:()=>d,toc:()=>a});var r=n(5893),i=n(1151);const s={sidebar_position:18},o="Speed Dial",d={id:"components/speed-dial",title:"Speed Dial",description:"Speed Dial component is a menu of related actions that allows a user to perform an action. These separations help to improve the user experience by not taking users away from the main separation for a specific action.",source:"@site/docs/components/speed-dial.md",sourceDirName:"components",slug:"/components/speed-dial",permalink:"/react-native-kitra/docs/next/components/speed-dial",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/docs/components/speed-dial.md",tags:[],version:"current",lastUpdatedAt:1707292585,formattedLastUpdatedAt:"Feb 7, 2024",sidebarPosition:18,frontMatter:{sidebar_position:18},sidebar:"ComponentsSidebar",previous:{title:"Slider",permalink:"/react-native-kitra/docs/next/components/slider"},next:{title:"Swipe",permalink:"/react-native-kitra/docs/next/components/swipe"}},c={},a=[{value:"Import",id:"import",level:3},{value:"Import",id:"import-1",level:3},{value:"Props",id:"props",level:3}];function l(e){const t={a:"a",code:"code",h1:"h1",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,i.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h1,{id:"speed-dial",children:"Speed Dial"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.strong,{children:"Speed Dial"})," component is a menu of related actions that allows a user to perform an action. These separations help to improve the user experience by not taking users away from the main separation for a specific action."]}),"\n",(0,r.jsx)(t.h3,{id:"import",children:"Import"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"import { SpeedDial } from '@tra-tech/react-native-kitra';\n\n"})}),"\n",(0,r.jsx)(t.h3,{id:"import-1",children:"Import"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:'import { SpeedDial, Icon } from \'@tra-tech/react-native-kitra\';\n\nconst App = () => (\n\n , title: \'Penguin\', backgroundColor: \'blue\' },\n { icon: , title: \'Close\', backgroundColor: \'pink\' },\n { icon: , title: \'Plus\', titleColor: \'red\' },\n { icon: , onPress: () => console.log(\'pressed\') },\n { icon: },\n ]}\n />\n);\n\nexport default App;\n'})}),"\n",(0,r.jsx)(t.h3,{id:"props",children:"Props"}),"\n",(0,r.jsxs)(t.table,{children:[(0,r.jsx)(t.thead,{children:(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.th,{children:"Prop name"}),(0,r.jsx)(t.th,{children:"Type"}),(0,r.jsx)(t.th,{children:"Required"}),(0,r.jsx)(t.th,{children:"Description"})]})}),(0,r.jsxs)(t.tbody,{children:[(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"items"}),(0,r.jsxs)(t.td,{children:[(0,r.jsx)(t.code,{children:"Array<{"}),(0,r.jsx)("br",{}),(0,r.jsx)(t.code,{children:"icon?: React.ReactNode,"}),(0,r.jsx)("br",{}),(0,r.jsx)(t.code,{children:" title?:string,"}),(0,r.jsx)("br",{}),(0,r.jsx)(t.code,{children:" titleColor?:string,"}),(0,r.jsx)("br",{}),(0,r.jsx)(t.code,{children:" backgroundColor?:string,"}),(0,r.jsx)("br",{}),(0,r.jsx)(t.code,{children:" onPress?: ()=> void}>"})]}),(0,r.jsx)(t.td,{children:"Yes"}),(0,r.jsx)(t.td,{children:"Items to be listed in the speed dial."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"baseItemBackground"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"string"})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsxs)(t.td,{children:["Background color of base item. Default value: ",(0,r.jsx)(t.code,{children:"theme.tertiary"})]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"variant"}),(0,r.jsx)(t.td,{children:(0,r.jsx)("code",{children:" 'flat' | 'spread' "})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsxs)(t.td,{children:["Represents the opening animation. Default value: ",(0,r.jsx)(t.code,{children:"'flat'"})]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"onChange"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"(event:boolean)=>void "})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"Returns whether the component is on or off."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"baseItemIcon"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.a,{href:"https://reactnative.dev/docs/react-node",children:(0,r.jsx)(t.code,{children:"React.ReactNode"})})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"Icon of base item."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"theme"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"UITheme "})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"The theme to use for the component."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"typography"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"UITypography"})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"The typography to use for the component."})]})]})]})]})}function h(e={}){const{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(l,{...e})}):l(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>d,a:()=>o});var r=n(7294);const i={},s=r.createContext(i);function o(e){const t=r.useContext(s);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function d(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:o(e.components),r.createElement(s.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[5358],{2247:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>o,default:()=>h,frontMatter:()=>s,metadata:()=>d,toc:()=>a});var r=n(5893),i=n(1151);const s={sidebar_position:18},o="Speed Dial",d={id:"components/speed-dial",title:"Speed Dial",description:"Speed Dial component is a menu of related actions that allows a user to perform an action. These separations help to improve the user experience by not taking users away from the main separation for a specific action.",source:"@site/docs/components/speed-dial.md",sourceDirName:"components",slug:"/components/speed-dial",permalink:"/react-native-kitra/docs/next/components/speed-dial",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/docs/components/speed-dial.md",tags:[],version:"current",lastUpdatedAt:1709646294,formattedLastUpdatedAt:"Mar 5, 2024",sidebarPosition:18,frontMatter:{sidebar_position:18},sidebar:"ComponentsSidebar",previous:{title:"Slider",permalink:"/react-native-kitra/docs/next/components/slider"},next:{title:"Swipe",permalink:"/react-native-kitra/docs/next/components/swipe"}},c={},a=[{value:"Import",id:"import",level:3},{value:"Import",id:"import-1",level:3},{value:"Props",id:"props",level:3}];function l(e){const t={a:"a",code:"code",h1:"h1",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,i.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h1,{id:"speed-dial",children:"Speed Dial"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.strong,{children:"Speed Dial"})," component is a menu of related actions that allows a user to perform an action. These separations help to improve the user experience by not taking users away from the main separation for a specific action."]}),"\n",(0,r.jsx)(t.h3,{id:"import",children:"Import"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"import { SpeedDial } from '@tra-tech/react-native-kitra';\n\n"})}),"\n",(0,r.jsx)(t.h3,{id:"import-1",children:"Import"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:'import { SpeedDial, Icon } from \'@tra-tech/react-native-kitra\';\n\nconst App = () => (\n\n , title: \'Penguin\', backgroundColor: \'blue\' },\n { icon: , title: \'Close\', backgroundColor: \'pink\' },\n { icon: , title: \'Plus\', titleColor: \'red\' },\n { icon: , onPress: () => console.log(\'pressed\') },\n { icon: },\n ]}\n />\n);\n\nexport default App;\n'})}),"\n",(0,r.jsx)(t.h3,{id:"props",children:"Props"}),"\n",(0,r.jsxs)(t.table,{children:[(0,r.jsx)(t.thead,{children:(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.th,{children:"Prop name"}),(0,r.jsx)(t.th,{children:"Type"}),(0,r.jsx)(t.th,{children:"Required"}),(0,r.jsx)(t.th,{children:"Description"})]})}),(0,r.jsxs)(t.tbody,{children:[(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"items"}),(0,r.jsxs)(t.td,{children:[(0,r.jsx)(t.code,{children:"Array<{"}),(0,r.jsx)("br",{}),(0,r.jsx)(t.code,{children:"icon?: React.ReactNode,"}),(0,r.jsx)("br",{}),(0,r.jsx)(t.code,{children:" title?:string,"}),(0,r.jsx)("br",{}),(0,r.jsx)(t.code,{children:" titleColor?:string,"}),(0,r.jsx)("br",{}),(0,r.jsx)(t.code,{children:" backgroundColor?:string,"}),(0,r.jsx)("br",{}),(0,r.jsx)(t.code,{children:" onPress?: ()=> void}>"})]}),(0,r.jsx)(t.td,{children:"Yes"}),(0,r.jsx)(t.td,{children:"Items to be listed in the speed dial."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"baseItemBackground"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"string"})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsxs)(t.td,{children:["Background color of base item. Default value: ",(0,r.jsx)(t.code,{children:"theme.tertiary"})]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"variant"}),(0,r.jsx)(t.td,{children:(0,r.jsx)("code",{children:" 'flat' | 'spread' "})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsxs)(t.td,{children:["Represents the opening animation. Default value: ",(0,r.jsx)(t.code,{children:"'flat'"})]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"onChange"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"(event:boolean)=>void "})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"Returns whether the component is on or off."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"baseItemIcon"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.a,{href:"https://reactnative.dev/docs/react-node",children:(0,r.jsx)(t.code,{children:"React.ReactNode"})})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"Icon of base item."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"theme"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"UITheme "})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"The theme to use for the component."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"typography"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"UITypography"})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"The typography to use for the component."})]})]})]})]})}function h(e={}){const{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(l,{...e})}):l(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>d,a:()=>o});var r=n(7294);const i={},s=r.createContext(i);function o(e){const t=r.useContext(s);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function d(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:o(e.components),r.createElement(s.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/0a8705fd.78d456f1.js b/assets/js/0a8705fd.f0d173df.js similarity index 98% rename from assets/js/0a8705fd.78d456f1.js rename to assets/js/0a8705fd.f0d173df.js index 9ab6eaa..f1e1e54 100644 --- a/assets/js/0a8705fd.78d456f1.js +++ b/assets/js/0a8705fd.f0d173df.js @@ -1 +1 @@ -"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[2778],{1220:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>o,default:()=>l,frontMatter:()=>i,metadata:()=>c,toc:()=>a});var r=n(5893),s=n(1151);const i={sidebar_position:20},o="Switch",c={id:"components/switch",title:"Switch",description:"The Switch component is renders a boolean input.",source:"@site/versioned_docs/version-1.x/components/switch.md",sourceDirName:"components",slug:"/components/switch",permalink:"/react-native-kitra/docs/components/switch",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/versioned_docs/version-1.x/components/switch.md",tags:[],version:"1.x",lastUpdatedAt:1707292585,formattedLastUpdatedAt:"Feb 7, 2024",sidebarPosition:20,frontMatter:{sidebar_position:20},sidebar:"ComponentsSidebar",previous:{title:"Swipe",permalink:"/react-native-kitra/docs/components/swipe"},next:{title:"Text Input",permalink:"/react-native-kitra/docs/components/text-input"}},d={},a=[{value:"Import",id:"import",level:3},{value:"Import",id:"import-1",level:3},{value:"Props",id:"props",level:3}];function h(e){const t={a:"a",code:"code",h1:"h1",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,s.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h1,{id:"switch",children:"Switch"}),"\n",(0,r.jsxs)(t.p,{children:["The ",(0,r.jsx)(t.strong,{children:"Switch"})," component is renders a boolean input."]}),"\n",(0,r.jsx)(t.h3,{id:"import",children:"Import"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"import { Switch } from '@tra-tech/react-native-kitra';\n\n"})}),"\n",(0,r.jsx)(t.h3,{id:"import-1",children:"Import"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"import { Switch } from '@tra-tech/react-native-kitra';\nimport { useState } from 'react';\nimport { View } from 'react-native';\n\nconst App = () => {\n const [isEnabled, setIsEnabled] = useState(false);\n return (\n \n setIsEnabled(!isEnabled)}\n value={isEnabled}\n />\n \n );\n};\n\nexport default App;\n"})}),"\n",(0,r.jsx)(t.h3,{id:"props",children:"Props"}),"\n",(0,r.jsxs)(t.table,{children:[(0,r.jsx)(t.thead,{children:(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.th,{children:"Prop name"}),(0,r.jsx)(t.th,{children:"Type"}),(0,r.jsx)(t.th,{children:"Required"}),(0,r.jsx)(t.th,{children:"Description"})]})}),(0,r.jsxs)(t.tbody,{children:[(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"...SwitchProps"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.a,{href:"https://reactnative.dev/docs/switch#props",children:(0,r.jsx)(t.code,{children:"SwitchProps"})})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsxs)(t.td,{children:["Any additional props to be passed to the underlying ",(0,r.jsx)(t.code,{children:"Switch"})," component."]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"theme"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"UITheme "})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"The theme to use for the component."})]})]})]})]})}function l(e={}){const{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(h,{...e})}):h(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>c,a:()=>o});var r=n(7294);const s={},i=r.createContext(s);function o(e){const t=r.useContext(i);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:o(e.components),r.createElement(i.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[2778],{1220:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>o,default:()=>l,frontMatter:()=>i,metadata:()=>c,toc:()=>a});var r=n(5893),s=n(1151);const i={sidebar_position:20},o="Switch",c={id:"components/switch",title:"Switch",description:"The Switch component is renders a boolean input.",source:"@site/versioned_docs/version-1.x/components/switch.md",sourceDirName:"components",slug:"/components/switch",permalink:"/react-native-kitra/docs/components/switch",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/versioned_docs/version-1.x/components/switch.md",tags:[],version:"1.x",lastUpdatedAt:1709646294,formattedLastUpdatedAt:"Mar 5, 2024",sidebarPosition:20,frontMatter:{sidebar_position:20},sidebar:"ComponentsSidebar",previous:{title:"Swipe",permalink:"/react-native-kitra/docs/components/swipe"},next:{title:"Text Input",permalink:"/react-native-kitra/docs/components/text-input"}},d={},a=[{value:"Import",id:"import",level:3},{value:"Import",id:"import-1",level:3},{value:"Props",id:"props",level:3}];function h(e){const t={a:"a",code:"code",h1:"h1",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,s.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h1,{id:"switch",children:"Switch"}),"\n",(0,r.jsxs)(t.p,{children:["The ",(0,r.jsx)(t.strong,{children:"Switch"})," component is renders a boolean input."]}),"\n",(0,r.jsx)(t.h3,{id:"import",children:"Import"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"import { Switch } from '@tra-tech/react-native-kitra';\n\n"})}),"\n",(0,r.jsx)(t.h3,{id:"import-1",children:"Import"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"import { Switch } from '@tra-tech/react-native-kitra';\nimport { useState } from 'react';\nimport { View } from 'react-native';\n\nconst App = () => {\n const [isEnabled, setIsEnabled] = useState(false);\n return (\n \n setIsEnabled(!isEnabled)}\n value={isEnabled}\n />\n \n );\n};\n\nexport default App;\n"})}),"\n",(0,r.jsx)(t.h3,{id:"props",children:"Props"}),"\n",(0,r.jsxs)(t.table,{children:[(0,r.jsx)(t.thead,{children:(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.th,{children:"Prop name"}),(0,r.jsx)(t.th,{children:"Type"}),(0,r.jsx)(t.th,{children:"Required"}),(0,r.jsx)(t.th,{children:"Description"})]})}),(0,r.jsxs)(t.tbody,{children:[(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"...SwitchProps"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.a,{href:"https://reactnative.dev/docs/switch#props",children:(0,r.jsx)(t.code,{children:"SwitchProps"})})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsxs)(t.td,{children:["Any additional props to be passed to the underlying ",(0,r.jsx)(t.code,{children:"Switch"})," component."]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"theme"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"UITheme "})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"The theme to use for the component."})]})]})]})]})}function l(e={}){const{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(h,{...e})}):h(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>c,a:()=>o});var r=n(7294);const s={},i=r.createContext(s);function o(e){const t=r.useContext(i);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:o(e.components),r.createElement(i.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/12eb4ccc.01cc15a2.js b/assets/js/12eb4ccc.1b183f1f.js similarity index 98% rename from assets/js/12eb4ccc.01cc15a2.js rename to assets/js/12eb4ccc.1b183f1f.js index 98c9734..7360acd 100644 --- a/assets/js/12eb4ccc.01cc15a2.js +++ b/assets/js/12eb4ccc.1b183f1f.js @@ -1 +1 @@ -"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[331],{9639:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>o,default:()=>h,frontMatter:()=>d,metadata:()=>i,toc:()=>l});var s=n(5893),r=n(1151);const d={sidebar_position:5},o="Button",i={id:"components/button",title:"Button",description:"The Button component is a customizable button that can display either a label or an icon, or both. It is built using the Pressable component from react-native and allows for various states like focused and disabled.",source:"@site/versioned_docs/version-1.x/components/button.md",sourceDirName:"components",slug:"/components/button",permalink:"/react-native-kitra/docs/components/button",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/versioned_docs/version-1.x/components/button.md",tags:[],version:"1.x",lastUpdatedAt:1707292585,formattedLastUpdatedAt:"Feb 7, 2024",sidebarPosition:5,frontMatter:{sidebar_position:5},sidebar:"ComponentsSidebar",previous:{title:"Badge",permalink:"/react-native-kitra/docs/components/badge"},next:{title:"CheckBox",permalink:"/react-native-kitra/docs/components/checkbox"}},c={},l=[{value:"Import",id:"import",level:3},{value:"Usage",id:"usage",level:3},{value:"Props",id:"props",level:3},{value:"Types",id:"types",level:3}];function a(e){const t={a:"a",code:"code",h1:"h1",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h1,{id:"button",children:"Button"}),"\n",(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.strong,{children:"Button"})," component is a customizable button that can display either a label or an icon, or both. It is built using the ",(0,s.jsx)(t.a,{href:"https://reactnative.dev/docs/pressable",children:"Pressable"})," component from react-native and allows for various states like focused and disabled."]}),"\n",(0,s.jsx)(t.h3,{id:"import",children:"Import"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",children:'import { Button } from "@tra-tech/react-native-kitra"; \n'})}),"\n",(0,s.jsx)(t.h3,{id:"usage",children:"Usage"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",children:"import { Button, Icon } from '@tra-tech/react-native-kitra';\nimport { View } from 'react-native';\n\nconst App = () => (\n \n \n \n);\n\nexport default App;\n\n\n"})}),"\n",(0,s.jsx)(t.h3,{id:"props",children:"Props"}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{children:"Prop"}),(0,s.jsx)(t.th,{children:"Type"}),(0,s.jsx)(t.th,{children:"Required"}),(0,s.jsx)(t.th,{children:"Description"})]})}),(0,s.jsxs)(t.tbody,{children:[(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"size"}),(0,s.jsx)(t.td,{children:(0,s.jsx)("code",{children:"'small' | 'medium' | 'large'"})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsxs)(t.td,{children:["The size of the button. Default value: ",(0,s.jsx)(t.code,{children:"'medium'"}),"."]})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"disabled"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"boolean"})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsxs)(t.td,{children:["Determines whether the button is disabled. Default value: ",(0,s.jsx)(t.code,{children:"false"}),"."]})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"label"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"string"})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"The label to display on the button."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"iconPosition"}),(0,s.jsx)(t.td,{children:(0,s.jsx)("code",{children:"'left' | 'right'"})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsxs)(t.td,{children:["The position of the icon in relation to the label. Default value: ",(0,s.jsx)(t.code,{children:"'left'"}),"."]})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"style"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,s.jsx)(t.code,{children:"StyleProp"})})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"The style object for the button."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"textStyle"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"https://reactnative.dev/docs/text-style-props",children:(0,s.jsx)(t.code,{children:"StyleProp"})})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"The style object for the button's text."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"children"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"https://reactnative.dev/docs/react-node",children:(0,s.jsx)(t.code,{children:"React.ReactNode"})})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"Icons to be rendered inside the button."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"statusStyle"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"ActionProps"})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"Contains style definitions for a button component's normal, focused, and disabled states, specifying background and text colors."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"theme"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"UITheme"})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"The theme to use for the component."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"typography"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"UITypography"})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"The typography to use for the component."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"...PressableProps"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"https://reactnative.dev/docs/pressable#props",children:(0,s.jsx)(t.code,{children:"Pressable"})})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsxs)(t.td,{children:["Any additional props to be passed to the underlying ",(0,s.jsx)(t.code,{children:"Pressable"})," component."]})]})]})]}),"\n",(0,s.jsx)(t.h3,{id:"types",children:"Types"}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{children:"Name"}),(0,s.jsx)(t.th,{children:"Type"})]})}),(0,s.jsx)(t.tbody,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"ActionProps"}),(0,s.jsxs)(t.td,{children:[(0,s.jsx)(t.code,{children:" { default:{container: {backgroundColor: string},text: {color: string}},"}),(0,s.jsx)("br",{}),(0,s.jsx)(t.code,{children:"focused: {container: {backgroundColor: string},text: {color: string}},"}),(0,s.jsx)("br",{}),(0,s.jsx)(t.code,{children:"disabled: {container: { backgroundColor: string},text:{color:string}}}"})]})]})})]})]})}function h(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(a,{...e})}):a(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>i,a:()=>o});var s=n(7294);const r={},d=s.createContext(r);function o(e){const t=s.useContext(d);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),s.createElement(d.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[331],{9639:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>o,default:()=>h,frontMatter:()=>d,metadata:()=>i,toc:()=>l});var s=n(5893),r=n(1151);const d={sidebar_position:5},o="Button",i={id:"components/button",title:"Button",description:"The Button component is a customizable button that can display either a label or an icon, or both. It is built using the Pressable component from react-native and allows for various states like focused and disabled.",source:"@site/versioned_docs/version-1.x/components/button.md",sourceDirName:"components",slug:"/components/button",permalink:"/react-native-kitra/docs/components/button",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/versioned_docs/version-1.x/components/button.md",tags:[],version:"1.x",lastUpdatedAt:1709646294,formattedLastUpdatedAt:"Mar 5, 2024",sidebarPosition:5,frontMatter:{sidebar_position:5},sidebar:"ComponentsSidebar",previous:{title:"Badge",permalink:"/react-native-kitra/docs/components/badge"},next:{title:"CheckBox",permalink:"/react-native-kitra/docs/components/checkbox"}},c={},l=[{value:"Import",id:"import",level:3},{value:"Usage",id:"usage",level:3},{value:"Props",id:"props",level:3},{value:"Types",id:"types",level:3}];function a(e){const t={a:"a",code:"code",h1:"h1",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h1,{id:"button",children:"Button"}),"\n",(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.strong,{children:"Button"})," component is a customizable button that can display either a label or an icon, or both. It is built using the ",(0,s.jsx)(t.a,{href:"https://reactnative.dev/docs/pressable",children:"Pressable"})," component from react-native and allows for various states like focused and disabled."]}),"\n",(0,s.jsx)(t.h3,{id:"import",children:"Import"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",children:'import { Button } from "@tra-tech/react-native-kitra"; \n'})}),"\n",(0,s.jsx)(t.h3,{id:"usage",children:"Usage"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",children:"import { Button, Icon } from '@tra-tech/react-native-kitra';\nimport { View } from 'react-native';\n\nconst App = () => (\n \n \n \n);\n\nexport default App;\n\n\n"})}),"\n",(0,s.jsx)(t.h3,{id:"props",children:"Props"}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{children:"Prop"}),(0,s.jsx)(t.th,{children:"Type"}),(0,s.jsx)(t.th,{children:"Required"}),(0,s.jsx)(t.th,{children:"Description"})]})}),(0,s.jsxs)(t.tbody,{children:[(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"size"}),(0,s.jsx)(t.td,{children:(0,s.jsx)("code",{children:"'small' | 'medium' | 'large'"})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsxs)(t.td,{children:["The size of the button. Default value: ",(0,s.jsx)(t.code,{children:"'medium'"}),"."]})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"disabled"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"boolean"})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsxs)(t.td,{children:["Determines whether the button is disabled. Default value: ",(0,s.jsx)(t.code,{children:"false"}),"."]})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"label"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"string"})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"The label to display on the button."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"iconPosition"}),(0,s.jsx)(t.td,{children:(0,s.jsx)("code",{children:"'left' | 'right'"})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsxs)(t.td,{children:["The position of the icon in relation to the label. Default value: ",(0,s.jsx)(t.code,{children:"'left'"}),"."]})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"style"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,s.jsx)(t.code,{children:"StyleProp"})})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"The style object for the button."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"textStyle"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"https://reactnative.dev/docs/text-style-props",children:(0,s.jsx)(t.code,{children:"StyleProp"})})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"The style object for the button's text."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"children"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"https://reactnative.dev/docs/react-node",children:(0,s.jsx)(t.code,{children:"React.ReactNode"})})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"Icons to be rendered inside the button."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"statusStyle"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"ActionProps"})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"Contains style definitions for a button component's normal, focused, and disabled states, specifying background and text colors."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"theme"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"UITheme"})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"The theme to use for the component."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"typography"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"UITypography"})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"The typography to use for the component."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"...PressableProps"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"https://reactnative.dev/docs/pressable#props",children:(0,s.jsx)(t.code,{children:"Pressable"})})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsxs)(t.td,{children:["Any additional props to be passed to the underlying ",(0,s.jsx)(t.code,{children:"Pressable"})," component."]})]})]})]}),"\n",(0,s.jsx)(t.h3,{id:"types",children:"Types"}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{children:"Name"}),(0,s.jsx)(t.th,{children:"Type"})]})}),(0,s.jsx)(t.tbody,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"ActionProps"}),(0,s.jsxs)(t.td,{children:[(0,s.jsx)(t.code,{children:" { default:{container: {backgroundColor: string},text: {color: string}},"}),(0,s.jsx)("br",{}),(0,s.jsx)(t.code,{children:"focused: {container: {backgroundColor: string},text: {color: string}},"}),(0,s.jsx)("br",{}),(0,s.jsx)(t.code,{children:"disabled: {container: { backgroundColor: string},text:{color:string}}}"})]})]})})]})]})}function h(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(a,{...e})}):a(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>i,a:()=>o});var s=n(7294);const r={},d=s.createContext(r);function o(e){const t=s.useContext(d);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),s.createElement(d.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/16e25549.957ee3b9.js b/assets/js/16e25549.55e4d0c8.js similarity index 98% rename from assets/js/16e25549.957ee3b9.js rename to assets/js/16e25549.55e4d0c8.js index 42adb16..b5dbb7c 100644 --- a/assets/js/16e25549.957ee3b9.js +++ b/assets/js/16e25549.55e4d0c8.js @@ -1 +1 @@ -"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[8474],{1779:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>s,default:()=>h,frontMatter:()=>i,metadata:()=>a,toc:()=>c});var o=n(5893),r=n(1151);const i={sidebar_position:16},s="Radio Button",a={id:"components/radio-button",title:"Radio Button",description:"The RadioButton is a component that displays a circular button with a border and an inner circle that can be toggled on and off.",source:"@site/versioned_docs/version-1.x/components/radio-button.md",sourceDirName:"components",slug:"/components/radio-button",permalink:"/react-native-kitra/docs/components/radio-button",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/versioned_docs/version-1.x/components/radio-button.md",tags:[],version:"1.x",lastUpdatedAt:1707292585,formattedLastUpdatedAt:"Feb 7, 2024",sidebarPosition:16,frontMatter:{sidebar_position:16},sidebar:"ComponentsSidebar",previous:{title:"Progress Bar",permalink:"/react-native-kitra/docs/components/progress-bar"},next:{title:"Slider",permalink:"/react-native-kitra/docs/components/slider"}},d={},c=[{value:"Import",id:"import",level:3},{value:"Usage",id:"usage",level:3},{value:"Props",id:"props",level:3}];function l(e){const t={a:"a",code:"code",h1:"h1",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,r.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.h1,{id:"radio-button",children:"Radio Button"}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.strong,{children:"RadioButton"})," is a component that displays a circular button with a border and an inner circle that can be toggled on and off."]}),"\n",(0,o.jsx)(t.h3,{id:"import",children:"Import"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-js",children:"import { Slider } from '@tra-tech/react-native-kitra';\n"})}),"\n",(0,o.jsx)(t.h3,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-js",children:"import { RadioButton } from '@tra-tech/react-native-kitra';\nimport { View, StyleSheet } from 'react-native';\n\nconst App = () => (\n \n console.log(x)} />\n \n);\n\nconst style = StyleSheet.create({\n container: { flex: 1, justifyContent: 'center' },\n});\n\nexport default App;\n"})}),"\n",(0,o.jsx)(t.h3,{id:"props",children:"Props"}),"\n",(0,o.jsxs)(t.table,{children:[(0,o.jsx)(t.thead,{children:(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.th,{children:"Prop Name"}),(0,o.jsx)(t.th,{children:"Type"}),(0,o.jsx)(t.th,{children:"Required"}),(0,o.jsx)(t.th,{children:"Description"})]})}),(0,o.jsxs)(t.tbody,{children:[(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.td,{children:"onChange"}),(0,o.jsx)(t.td,{children:(0,o.jsx)(t.code,{children:"(event: boolean) => void"})}),(0,o.jsx)(t.td,{children:"Yes"}),(0,o.jsx)(t.td,{children:"A function that is called when the radio button is pressed. The current value of the radio button is passed as an argument to the function."})]}),(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.td,{children:"style"}),(0,o.jsx)(t.td,{children:(0,o.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,o.jsx)(t.code,{children:"StyleProp"})})}),(0,o.jsx)(t.td,{children:"No"}),(0,o.jsx)(t.td,{children:"Additional styles to apply to the radio button container."})]}),(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.td,{children:"theme"}),(0,o.jsx)(t.td,{children:(0,o.jsx)(t.code,{children:"UITheme"})}),(0,o.jsx)(t.td,{children:"No"}),(0,o.jsx)(t.td,{children:"The theme to use for the component."})]})]})]})]})}function h(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(l,{...e})}):l(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>a,a:()=>s});var o=n(7294);const r={},i=o.createContext(r);function s(e){const t=o.useContext(i);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:s(e.components),o.createElement(i.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[8474],{1779:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>s,default:()=>h,frontMatter:()=>i,metadata:()=>a,toc:()=>c});var o=n(5893),r=n(1151);const i={sidebar_position:16},s="Radio Button",a={id:"components/radio-button",title:"Radio Button",description:"The RadioButton is a component that displays a circular button with a border and an inner circle that can be toggled on and off.",source:"@site/versioned_docs/version-1.x/components/radio-button.md",sourceDirName:"components",slug:"/components/radio-button",permalink:"/react-native-kitra/docs/components/radio-button",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/versioned_docs/version-1.x/components/radio-button.md",tags:[],version:"1.x",lastUpdatedAt:1709646294,formattedLastUpdatedAt:"Mar 5, 2024",sidebarPosition:16,frontMatter:{sidebar_position:16},sidebar:"ComponentsSidebar",previous:{title:"Progress Bar",permalink:"/react-native-kitra/docs/components/progress-bar"},next:{title:"Slider",permalink:"/react-native-kitra/docs/components/slider"}},d={},c=[{value:"Import",id:"import",level:3},{value:"Usage",id:"usage",level:3},{value:"Props",id:"props",level:3}];function l(e){const t={a:"a",code:"code",h1:"h1",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,r.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.h1,{id:"radio-button",children:"Radio Button"}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.strong,{children:"RadioButton"})," is a component that displays a circular button with a border and an inner circle that can be toggled on and off."]}),"\n",(0,o.jsx)(t.h3,{id:"import",children:"Import"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-js",children:"import { Slider } from '@tra-tech/react-native-kitra';\n"})}),"\n",(0,o.jsx)(t.h3,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-js",children:"import { RadioButton } from '@tra-tech/react-native-kitra';\nimport { View, StyleSheet } from 'react-native';\n\nconst App = () => (\n \n console.log(x)} />\n \n);\n\nconst style = StyleSheet.create({\n container: { flex: 1, justifyContent: 'center' },\n});\n\nexport default App;\n"})}),"\n",(0,o.jsx)(t.h3,{id:"props",children:"Props"}),"\n",(0,o.jsxs)(t.table,{children:[(0,o.jsx)(t.thead,{children:(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.th,{children:"Prop Name"}),(0,o.jsx)(t.th,{children:"Type"}),(0,o.jsx)(t.th,{children:"Required"}),(0,o.jsx)(t.th,{children:"Description"})]})}),(0,o.jsxs)(t.tbody,{children:[(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.td,{children:"onChange"}),(0,o.jsx)(t.td,{children:(0,o.jsx)(t.code,{children:"(event: boolean) => void"})}),(0,o.jsx)(t.td,{children:"Yes"}),(0,o.jsx)(t.td,{children:"A function that is called when the radio button is pressed. The current value of the radio button is passed as an argument to the function."})]}),(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.td,{children:"style"}),(0,o.jsx)(t.td,{children:(0,o.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,o.jsx)(t.code,{children:"StyleProp"})})}),(0,o.jsx)(t.td,{children:"No"}),(0,o.jsx)(t.td,{children:"Additional styles to apply to the radio button container."})]}),(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.td,{children:"theme"}),(0,o.jsx)(t.td,{children:(0,o.jsx)(t.code,{children:"UITheme"})}),(0,o.jsx)(t.td,{children:"No"}),(0,o.jsx)(t.td,{children:"The theme to use for the component."})]})]})]})]})}function h(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(l,{...e})}):l(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>a,a:()=>s});var o=n(7294);const r={},i=o.createContext(r);function s(e){const t=o.useContext(i);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:s(e.components),o.createElement(i.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/2019da93.cc87e690.js b/assets/js/2019da93.1787acbf.js similarity index 98% rename from assets/js/2019da93.cc87e690.js rename to assets/js/2019da93.1787acbf.js index 1995319..81ed48c 100644 --- a/assets/js/2019da93.cc87e690.js +++ b/assets/js/2019da93.1787acbf.js @@ -1 +1 @@ -"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[2694],{6772:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>s,default:()=>h,frontMatter:()=>o,metadata:()=>c,toc:()=>a});var i=t(5893),r=t(1151);const o={sidebar_position:19},s="Swipe",c={id:"components/swipe",title:"Swipe",description:"The Swipe component is a swipeable container for content with left and/or right swipe actions.",source:"@site/versioned_docs/version-1.x/components/swipe.md",sourceDirName:"components",slug:"/components/swipe",permalink:"/react-native-kitra/docs/components/swipe",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/versioned_docs/version-1.x/components/swipe.md",tags:[],version:"1.x",lastUpdatedAt:1707292585,formattedLastUpdatedAt:"Feb 7, 2024",sidebarPosition:19,frontMatter:{sidebar_position:19},sidebar:"ComponentsSidebar",previous:{title:"Speed Dial",permalink:"/react-native-kitra/docs/components/speed-dial"},next:{title:"Switch",permalink:"/react-native-kitra/docs/components/switch"}},d={},a=[{value:"Import",id:"import",level:3},{value:"Usage",id:"usage",level:3},{value:"Props",id:"props",level:3},{value:"Types",id:"types",level:3}];function l(e){const n={a:"a",code:"code",h1:"h1",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h1,{id:"swipe",children:"Swipe"}),"\n",(0,i.jsxs)(n.p,{children:["The ",(0,i.jsx)(n.strong,{children:"Swipe"})," component is a swipeable container for content with left and/or right swipe actions."]}),"\n",(0,i.jsx)(n.h3,{id:"import",children:"Import"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"import { Swipe } from '@tra-tech/react-native-kitra';\n"})}),"\n",(0,i.jsx)(n.h3,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"import { Swipe, Icon } from '@tra-tech/react-native-kitra';\nimport { TouchableOpacity, Image } from 'react-native';\n\nconst App = () => (\n ,\n style: {\n backgroundColor: '#67A7C1',\n width: 82,\n },\n },\n {\n text: 'Sil',\n style: {\n backgroundColor: 'red',\n },\n },\n {\n icon: ,\n text: 'Di\u011fer',\n style: {\n backgroundColor: 'orange',\n },\n },\n ]}\n leftAction={{\n icon: ,\n text: 'Sil',\n style: {\n backgroundColor: '#FF3434',\n },\n }}\n >\n \n \n \n \n);\n\nexport default App;\n"})}),"\n",(0,i.jsx)(n.h3,{id:"props",children:"Props"}),"\n",(0,i.jsxs)(n.table,{children:[(0,i.jsx)(n.thead,{children:(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.th,{children:"Name"}),(0,i.jsx)(n.th,{children:"Type"}),(0,i.jsx)(n.th,{children:"Required"}),(0,i.jsx)(n.th,{children:"Description"})]})}),(0,i.jsxs)(n.tbody,{children:[(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:"children"}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.a,{href:"https://reactnative.dev/docs/react-node",children:(0,i.jsx)(n.code,{children:"React.ReactNode"})})}),(0,i.jsx)(n.td,{children:"No"}),(0,i.jsxs)(n.td,{children:["The content to be wrapped by the ",(0,i.jsx)(n.code,{children:"Swipeable"})," component."]})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:"variant"}),(0,i.jsxs)(n.td,{children:[(0,i.jsx)(n.code,{children:"'radius'|"}),(0,i.jsx)("br",{}),(0,i.jsx)(n.code,{children:"'no-radius' "})]}),(0,i.jsx)(n.td,{children:"No"}),(0,i.jsxs)(n.td,{children:["Determines whether to use a rounded border radius on the component. Default value: ",(0,i.jsx)(n.code,{children:"'no-radius'"})]})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:"rightActions"}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"Array"})}),(0,i.jsx)(n.td,{children:"No"}),(0,i.jsxs)(n.td,{children:["An array of objects representing the right swipe actions to be rendered. Each object can optionally contain a ",(0,i.jsx)(n.code,{children:"text"})," string and can optionally contain an ",(0,i.jsx)(n.code,{children:"icon"})," React component."]})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:"leftAction"}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"ActionProps"})}),(0,i.jsx)(n.td,{children:"No"}),(0,i.jsxs)(n.td,{children:["An object representing the left swipe action to be rendered. The object can optionally contain a ",(0,i.jsx)(n.code,{children:"text"})," string and can optionally contain an ",(0,i.jsx)(n.code,{children:"icon"})," React component."]})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:"theme"}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"UITheme"})}),(0,i.jsx)(n.td,{children:"No"}),(0,i.jsx)(n.td,{children:"An object containing colors and other styling properties used by the component."})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:"typography"}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"UITypography"})}),(0,i.jsx)(n.td,{children:"No"}),(0,i.jsx)(n.td,{children:"An object containing font sizes and styles used by the component."})]})]})]}),"\n",(0,i.jsx)(n.h3,{id:"types",children:"Types"}),"\n",(0,i.jsxs)(n.table,{children:[(0,i.jsx)(n.thead,{children:(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.th,{children:"Name"}),(0,i.jsx)(n.th,{children:"Type"})]})}),(0,i.jsx)(n.tbody,{children:(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:"ActionProps"}),(0,i.jsxs)(n.td,{children:[(0,i.jsx)(n.code,{children:"text?: string, style?: StyleProp, icon?: React.ReactNode,"}),(0,i.jsx)("br",{}),(0,i.jsx)(n.code,{children:" textStyle?: StyleProp, onPress: (ref:React.RefObject)=>void"})]})]})})]})]})}function h(e={}){const{wrapper:n}={...(0,r.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(l,{...e})}):l(e)}},1151:(e,n,t)=>{t.d(n,{Z:()=>c,a:()=>s});var i=t(7294);const r={},o=i.createContext(r);function s(e){const n=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:s(e.components),i.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[2694],{6772:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>s,default:()=>h,frontMatter:()=>o,metadata:()=>c,toc:()=>a});var i=t(5893),r=t(1151);const o={sidebar_position:19},s="Swipe",c={id:"components/swipe",title:"Swipe",description:"The Swipe component is a swipeable container for content with left and/or right swipe actions.",source:"@site/versioned_docs/version-1.x/components/swipe.md",sourceDirName:"components",slug:"/components/swipe",permalink:"/react-native-kitra/docs/components/swipe",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/versioned_docs/version-1.x/components/swipe.md",tags:[],version:"1.x",lastUpdatedAt:1709646294,formattedLastUpdatedAt:"Mar 5, 2024",sidebarPosition:19,frontMatter:{sidebar_position:19},sidebar:"ComponentsSidebar",previous:{title:"Speed Dial",permalink:"/react-native-kitra/docs/components/speed-dial"},next:{title:"Switch",permalink:"/react-native-kitra/docs/components/switch"}},d={},a=[{value:"Import",id:"import",level:3},{value:"Usage",id:"usage",level:3},{value:"Props",id:"props",level:3},{value:"Types",id:"types",level:3}];function l(e){const n={a:"a",code:"code",h1:"h1",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h1,{id:"swipe",children:"Swipe"}),"\n",(0,i.jsxs)(n.p,{children:["The ",(0,i.jsx)(n.strong,{children:"Swipe"})," component is a swipeable container for content with left and/or right swipe actions."]}),"\n",(0,i.jsx)(n.h3,{id:"import",children:"Import"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"import { Swipe } from '@tra-tech/react-native-kitra';\n"})}),"\n",(0,i.jsx)(n.h3,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"import { Swipe, Icon } from '@tra-tech/react-native-kitra';\nimport { TouchableOpacity, Image } from 'react-native';\n\nconst App = () => (\n ,\n style: {\n backgroundColor: '#67A7C1',\n width: 82,\n },\n },\n {\n text: 'Sil',\n style: {\n backgroundColor: 'red',\n },\n },\n {\n icon: ,\n text: 'Di\u011fer',\n style: {\n backgroundColor: 'orange',\n },\n },\n ]}\n leftAction={{\n icon: ,\n text: 'Sil',\n style: {\n backgroundColor: '#FF3434',\n },\n }}\n >\n \n \n \n \n);\n\nexport default App;\n"})}),"\n",(0,i.jsx)(n.h3,{id:"props",children:"Props"}),"\n",(0,i.jsxs)(n.table,{children:[(0,i.jsx)(n.thead,{children:(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.th,{children:"Name"}),(0,i.jsx)(n.th,{children:"Type"}),(0,i.jsx)(n.th,{children:"Required"}),(0,i.jsx)(n.th,{children:"Description"})]})}),(0,i.jsxs)(n.tbody,{children:[(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:"children"}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.a,{href:"https://reactnative.dev/docs/react-node",children:(0,i.jsx)(n.code,{children:"React.ReactNode"})})}),(0,i.jsx)(n.td,{children:"No"}),(0,i.jsxs)(n.td,{children:["The content to be wrapped by the ",(0,i.jsx)(n.code,{children:"Swipeable"})," component."]})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:"variant"}),(0,i.jsxs)(n.td,{children:[(0,i.jsx)(n.code,{children:"'radius'|"}),(0,i.jsx)("br",{}),(0,i.jsx)(n.code,{children:"'no-radius' "})]}),(0,i.jsx)(n.td,{children:"No"}),(0,i.jsxs)(n.td,{children:["Determines whether to use a rounded border radius on the component. Default value: ",(0,i.jsx)(n.code,{children:"'no-radius'"})]})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:"rightActions"}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"Array"})}),(0,i.jsx)(n.td,{children:"No"}),(0,i.jsxs)(n.td,{children:["An array of objects representing the right swipe actions to be rendered. Each object can optionally contain a ",(0,i.jsx)(n.code,{children:"text"})," string and can optionally contain an ",(0,i.jsx)(n.code,{children:"icon"})," React component."]})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:"leftAction"}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"ActionProps"})}),(0,i.jsx)(n.td,{children:"No"}),(0,i.jsxs)(n.td,{children:["An object representing the left swipe action to be rendered. The object can optionally contain a ",(0,i.jsx)(n.code,{children:"text"})," string and can optionally contain an ",(0,i.jsx)(n.code,{children:"icon"})," React component."]})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:"theme"}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"UITheme"})}),(0,i.jsx)(n.td,{children:"No"}),(0,i.jsx)(n.td,{children:"An object containing colors and other styling properties used by the component."})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:"typography"}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"UITypography"})}),(0,i.jsx)(n.td,{children:"No"}),(0,i.jsx)(n.td,{children:"An object containing font sizes and styles used by the component."})]})]})]}),"\n",(0,i.jsx)(n.h3,{id:"types",children:"Types"}),"\n",(0,i.jsxs)(n.table,{children:[(0,i.jsx)(n.thead,{children:(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.th,{children:"Name"}),(0,i.jsx)(n.th,{children:"Type"})]})}),(0,i.jsx)(n.tbody,{children:(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:"ActionProps"}),(0,i.jsxs)(n.td,{children:[(0,i.jsx)(n.code,{children:"text?: string, style?: StyleProp, icon?: React.ReactNode,"}),(0,i.jsx)("br",{}),(0,i.jsx)(n.code,{children:" textStyle?: StyleProp, onPress: (ref:React.RefObject)=>void"})]})]})})]})]})}function h(e={}){const{wrapper:n}={...(0,r.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(l,{...e})}):l(e)}},1151:(e,n,t)=>{t.d(n,{Z:()=>c,a:()=>s});var i=t(7294);const r={},o=i.createContext(r);function s(e){const n=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:s(e.components),i.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/27d45bb4.322ab96a.js b/assets/js/27d45bb4.64634c5c.js similarity index 99% rename from assets/js/27d45bb4.322ab96a.js rename to assets/js/27d45bb4.64634c5c.js index 2104b18..8f0eb46 100644 --- a/assets/js/27d45bb4.322ab96a.js +++ b/assets/js/27d45bb4.64634c5c.js @@ -1 +1 @@ -"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[6335],{5102:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>o,default:()=>h,frontMatter:()=>d,metadata:()=>i,toc:()=>l});var s=n(5893),r=n(1151);const d={sidebar_position:11},o="Menu",i={id:"components/menu",title:"Menu",description:"The Menu display a list of options. Their placement depends on the container location. They can be opened up or down.",source:"@site/versioned_docs/version-1.x/components/menu.md",sourceDirName:"components",slug:"/components/menu",permalink:"/react-native-kitra/docs/components/menu",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/versioned_docs/version-1.x/components/menu.md",tags:[],version:"1.x",lastUpdatedAt:1707292585,formattedLastUpdatedAt:"Feb 7, 2024",sidebarPosition:11,frontMatter:{sidebar_position:11},sidebar:"ComponentsSidebar",previous:{title:"Icon",permalink:"/react-native-kitra/docs/components/icon"},next:{title:"Modal",permalink:"/react-native-kitra/docs/components/modal"}},c={},l=[{value:"Import",id:"import",level:3},{value:"Usage",id:"usage",level:3},{value:"Props",id:"props",level:3}];function a(e){const t={a:"a",code:"code",h1:"h1",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h1,{id:"menu",children:"Menu"}),"\n",(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.strong,{children:"Menu"})," display a list of options. Their placement depends on the container location. They can be opened up or down."]}),"\n",(0,s.jsx)(t.h3,{id:"import",children:"Import"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",children:"import { Menu } from '@tra-tech/react-native-kitra';\n"})}),"\n",(0,s.jsx)(t.h3,{id:"usage",children:"Usage"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",children:'import { Menu, Icon } from \'@tra-tech/react-native-kitra\';\nimport { View } from \'react-native\';\n\nconst MenuData = [ \n{ label: \'Add\',left: ,right: ,onPress(){console.log(\'pressed\')}},\n{ label: \'Delete\', left: },\n{ label: \'Update\', left: },\n{ label: \'Skip\', right: }];\n\nconst App = () => (\n \n }\n labelStyle={{ color: \'#D7D1E9\' }}\n dividerColor="#EDEAF8"\n items={MenuData}\n />\n \n);\n\nexport default App;\n'})}),"\n",(0,s.jsx)(t.h3,{id:"props",children:"Props"}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{children:"Prop name"}),(0,s.jsx)(t.th,{children:"Type"}),(0,s.jsx)(t.th,{children:"Required"}),(0,s.jsx)(t.th,{children:"Description"})]})}),(0,s.jsxs)(t.tbody,{children:[(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"items"}),(0,s.jsxs)(t.td,{children:[(0,s.jsx)(t.code,{children:"Array<{label:string,"}),(0,s.jsx)("br",{}),(0,s.jsx)(t.code,{children:" left?: React.ReactNode, right?:React.ReactNode, onPress ?: ()=>void}>"})]}),(0,s.jsx)(t.td,{children:"Yes"}),(0,s.jsx)(t.td,{children:"Items to be listed in the menu."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"containerStyle"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,s.jsx)(t.code,{children:"StyleProp"})})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"Additional styles to apply to the menu container."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"labelStyle"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"https://reactnative.dev/docs/text-style-props",children:(0,s.jsx)(t.code,{children:"StyleProp"})})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"Additional styles to apply to the label text."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"rowStyle"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"https://reactnative.dev/docs/text-style-props",children:(0,s.jsx)(t.code,{children:"StyleProp"})})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"Additional styles to apply to the row container."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"dividerColor"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"string"})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"Color of divider."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"menuStyle"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,s.jsx)(t.code,{children:"StyleProp"})})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"Additional styles to apply to the menu."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"button"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"https://reactnative.dev/docs/react-node",children:(0,s.jsx)(t.code,{children:"(isOpen: boolean)=> React.ReactNode"})})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"This button opens the menu. It also returns whether the menu is open or closed."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"closeOnPress"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"boolean "})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"Indicates that it should close when an option is selected"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"theme"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"UITheme "})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"The theme to use for the component."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"typography"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"UITypography "})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"The typography to use for the component."})]})]})]})]})}function h(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(a,{...e})}):a(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>i,a:()=>o});var s=n(7294);const r={},d=s.createContext(r);function o(e){const t=s.useContext(d);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),s.createElement(d.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[6335],{5102:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>o,default:()=>h,frontMatter:()=>d,metadata:()=>i,toc:()=>l});var s=n(5893),r=n(1151);const d={sidebar_position:11},o="Menu",i={id:"components/menu",title:"Menu",description:"The Menu display a list of options. Their placement depends on the container location. They can be opened up or down.",source:"@site/versioned_docs/version-1.x/components/menu.md",sourceDirName:"components",slug:"/components/menu",permalink:"/react-native-kitra/docs/components/menu",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/versioned_docs/version-1.x/components/menu.md",tags:[],version:"1.x",lastUpdatedAt:1709646294,formattedLastUpdatedAt:"Mar 5, 2024",sidebarPosition:11,frontMatter:{sidebar_position:11},sidebar:"ComponentsSidebar",previous:{title:"Icon",permalink:"/react-native-kitra/docs/components/icon"},next:{title:"Modal",permalink:"/react-native-kitra/docs/components/modal"}},c={},l=[{value:"Import",id:"import",level:3},{value:"Usage",id:"usage",level:3},{value:"Props",id:"props",level:3}];function a(e){const t={a:"a",code:"code",h1:"h1",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h1,{id:"menu",children:"Menu"}),"\n",(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.strong,{children:"Menu"})," display a list of options. Their placement depends on the container location. They can be opened up or down."]}),"\n",(0,s.jsx)(t.h3,{id:"import",children:"Import"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",children:"import { Menu } from '@tra-tech/react-native-kitra';\n"})}),"\n",(0,s.jsx)(t.h3,{id:"usage",children:"Usage"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",children:'import { Menu, Icon } from \'@tra-tech/react-native-kitra\';\nimport { View } from \'react-native\';\n\nconst MenuData = [ \n{ label: \'Add\',left: ,right: ,onPress(){console.log(\'pressed\')}},\n{ label: \'Delete\', left: },\n{ label: \'Update\', left: },\n{ label: \'Skip\', right: }];\n\nconst App = () => (\n \n }\n labelStyle={{ color: \'#D7D1E9\' }}\n dividerColor="#EDEAF8"\n items={MenuData}\n />\n \n);\n\nexport default App;\n'})}),"\n",(0,s.jsx)(t.h3,{id:"props",children:"Props"}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{children:"Prop name"}),(0,s.jsx)(t.th,{children:"Type"}),(0,s.jsx)(t.th,{children:"Required"}),(0,s.jsx)(t.th,{children:"Description"})]})}),(0,s.jsxs)(t.tbody,{children:[(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"items"}),(0,s.jsxs)(t.td,{children:[(0,s.jsx)(t.code,{children:"Array<{label:string,"}),(0,s.jsx)("br",{}),(0,s.jsx)(t.code,{children:" left?: React.ReactNode, right?:React.ReactNode, onPress ?: ()=>void}>"})]}),(0,s.jsx)(t.td,{children:"Yes"}),(0,s.jsx)(t.td,{children:"Items to be listed in the menu."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"containerStyle"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,s.jsx)(t.code,{children:"StyleProp"})})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"Additional styles to apply to the menu container."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"labelStyle"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"https://reactnative.dev/docs/text-style-props",children:(0,s.jsx)(t.code,{children:"StyleProp"})})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"Additional styles to apply to the label text."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"rowStyle"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"https://reactnative.dev/docs/text-style-props",children:(0,s.jsx)(t.code,{children:"StyleProp"})})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"Additional styles to apply to the row container."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"dividerColor"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"string"})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"Color of divider."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"menuStyle"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,s.jsx)(t.code,{children:"StyleProp"})})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"Additional styles to apply to the menu."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"button"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"https://reactnative.dev/docs/react-node",children:(0,s.jsx)(t.code,{children:"(isOpen: boolean)=> React.ReactNode"})})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"This button opens the menu. It also returns whether the menu is open or closed."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"closeOnPress"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"boolean "})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"Indicates that it should close when an option is selected"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"theme"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"UITheme "})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"The theme to use for the component."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"typography"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"UITypography "})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"The typography to use for the component."})]})]})]})]})}function h(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(a,{...e})}):a(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>i,a:()=>o});var s=n(7294);const r={},d=s.createContext(r);function o(e){const t=s.useContext(d);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),s.createElement(d.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/29ae9d0a.887d96f8.js b/assets/js/29ae9d0a.edf2ce05.js similarity index 99% rename from assets/js/29ae9d0a.887d96f8.js rename to assets/js/29ae9d0a.edf2ce05.js index e05d5ba..ecc1b56 100644 --- a/assets/js/29ae9d0a.887d96f8.js +++ b/assets/js/29ae9d0a.edf2ce05.js @@ -1 +1 @@ -"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[1473],{2099:(e,t,r)=>{r.r(t),r.d(t,{assets:()=>c,contentTitle:()=>s,default:()=>h,frontMatter:()=>d,metadata:()=>o,toc:()=>l});var n=r(5893),i=r(1151);const d={sidebar_position:14},s="Pagerview",o={id:"components/pagerview",title:"Pagerview",description:'The PagerView component is that is designed to create a tab-based view with a sliding indicator on top of it. It uses the "react-native-pager-view" library to handle animations.',source:"@site/docs/components/pagerview.md",sourceDirName:"components",slug:"/components/pagerview",permalink:"/react-native-kitra/docs/next/components/pagerview",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/docs/components/pagerview.md",tags:[],version:"current",lastUpdatedAt:1707292585,formattedLastUpdatedAt:"Feb 7, 2024",sidebarPosition:14,frontMatter:{sidebar_position:14},sidebar:"ComponentsSidebar",previous:{title:"Modal",permalink:"/react-native-kitra/docs/next/components/modal"},next:{title:"Progress Bar",permalink:"/react-native-kitra/docs/next/components/progress-bar"}},c={},l=[{value:"Import",id:"import",level:3},{value:"Usage",id:"usage",level:3},{value:"Props",id:"props",level:3}];function a(e){const t={a:"a",code:"code",h1:"h1",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,i.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.h1,{id:"pagerview",children:"Pagerview"}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.strong,{children:"PagerView"}),' component is that is designed to create a tab-based view with a sliding indicator on top of it. It uses the "react-native-pager-view" library to handle animations.']}),"\n",(0,n.jsx)(t.h3,{id:"import",children:"Import"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-js",children:"import { PagerView } from '@tra-tech/react-native-kitra';\n \n"})}),"\n",(0,n.jsx)(t.h3,{id:"usage",children:"Usage"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-js",children:"import { PagerView } from '@tra-tech/react-native-kitra';\n\nimport { Text, View, StyleSheet } from 'react-native';\n\nconst App = () => (\n \n \n \n Pager\n \n \n View\n \n \n Component\n \n \n \n);\n\nconst style = StyleSheet.create({\n itemContainer: { flex: 1, alignItems: 'center', justifyContent: 'center' },\n});\n\nexport default App;\n \n"})}),"\n",(0,n.jsx)(t.h3,{id:"props",children:"Props"}),"\n",(0,n.jsxs)(t.table,{children:[(0,n.jsx)(t.thead,{children:(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.th,{children:"Prop name"}),(0,n.jsx)(t.th,{children:"Type"}),(0,n.jsx)(t.th,{children:"Required"}),(0,n.jsx)(t.th,{children:"Description"})]})}),(0,n.jsxs)(t.tbody,{children:[(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"children"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.a,{href:"https://reactnative.dev/docs/react-node",children:(0,n.jsx)(t.code,{children:"React.ReactNode"})})}),(0,n.jsx)(t.td,{children:"Yes"}),(0,n.jsx)(t.td,{children:"A required prop that represents the content to display within the PagerView component."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"containerStyle"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,n.jsx)(t.code,{children:"StyleProp"})})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"Additional styles to apply to the pager view container."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"pageContainerStyle"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,n.jsx)(t.code,{children:"StyleProp"})})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"Additional styles to apply to the page container."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"headerTextColor"}),(0,n.jsxs)(t.td,{children:[(0,n.jsx)(t.code,{children:"{select: string,"}),(0,n.jsx)("br",{}),(0,n.jsx)(t.code,{children:" default: string}"})]}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"Text colors of header text."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"headerSliderStyle"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,n.jsx)(t.code,{children:"StyleProp"})})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"Style of header slider."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"headerContainerStyle"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,n.jsx)(t.code,{children:"StyleProp"})})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"Style of header slider container."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"headerTextStyle"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.a,{href:"https://reactnative.dev/docs/text-style-props",children:(0,n.jsx)(t.code,{children:"StyleProp"})})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"Text style of header text."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"injectPagerRef"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"boolean"})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsxs)(t.td,{children:["An optional boolean prop that determines whether to inject the PagerView reference into each child component's props. Default value: ",(0,n.jsx)(t.code,{children:"false"})]})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"showDivider"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"boolean"})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsxs)(t.td,{children:["Determines whether the divider is shown or not. Default value:",(0,n.jsx)(t.code,{children:"true"})]})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"dividerStyle"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,n.jsx)(t.code,{children:"StyleProp"})})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"Style of divider"})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"dividerColor"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"string"})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"Color of divider"})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"icons"}),(0,n.jsxs)(t.td,{children:[(0,n.jsx)(t.code,{children:"React.ReactElement"})})," []"]}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"Icon list for header texts."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"theme"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"UITheme "})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"The theme to use for the component."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"typography"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"UITypography"})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"The typography to use for the component."})]})]})]})]})}function h(e={}){const{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(a,{...e})}):a(e)}},1151:(e,t,r)=>{r.d(t,{Z:()=>o,a:()=>s});var n=r(7294);const i={},d=n.createContext(i);function s(e){const t=n.useContext(d);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:s(e.components),n.createElement(d.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[1473],{2099:(e,t,r)=>{r.r(t),r.d(t,{assets:()=>c,contentTitle:()=>s,default:()=>h,frontMatter:()=>d,metadata:()=>o,toc:()=>l});var n=r(5893),i=r(1151);const d={sidebar_position:14},s="Pagerview",o={id:"components/pagerview",title:"Pagerview",description:'The PagerView component is that is designed to create a tab-based view with a sliding indicator on top of it. It uses the "react-native-pager-view" library to handle animations.',source:"@site/docs/components/pagerview.md",sourceDirName:"components",slug:"/components/pagerview",permalink:"/react-native-kitra/docs/next/components/pagerview",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/docs/components/pagerview.md",tags:[],version:"current",lastUpdatedAt:1709646294,formattedLastUpdatedAt:"Mar 5, 2024",sidebarPosition:14,frontMatter:{sidebar_position:14},sidebar:"ComponentsSidebar",previous:{title:"Modal",permalink:"/react-native-kitra/docs/next/components/modal"},next:{title:"Progress Bar",permalink:"/react-native-kitra/docs/next/components/progress-bar"}},c={},l=[{value:"Import",id:"import",level:3},{value:"Usage",id:"usage",level:3},{value:"Props",id:"props",level:3}];function a(e){const t={a:"a",code:"code",h1:"h1",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,i.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.h1,{id:"pagerview",children:"Pagerview"}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.strong,{children:"PagerView"}),' component is that is designed to create a tab-based view with a sliding indicator on top of it. It uses the "react-native-pager-view" library to handle animations.']}),"\n",(0,n.jsx)(t.h3,{id:"import",children:"Import"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-js",children:"import { PagerView } from '@tra-tech/react-native-kitra';\n \n"})}),"\n",(0,n.jsx)(t.h3,{id:"usage",children:"Usage"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-js",children:"import { PagerView } from '@tra-tech/react-native-kitra';\n\nimport { Text, View, StyleSheet } from 'react-native';\n\nconst App = () => (\n \n \n \n Pager\n \n \n View\n \n \n Component\n \n \n \n);\n\nconst style = StyleSheet.create({\n itemContainer: { flex: 1, alignItems: 'center', justifyContent: 'center' },\n});\n\nexport default App;\n \n"})}),"\n",(0,n.jsx)(t.h3,{id:"props",children:"Props"}),"\n",(0,n.jsxs)(t.table,{children:[(0,n.jsx)(t.thead,{children:(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.th,{children:"Prop name"}),(0,n.jsx)(t.th,{children:"Type"}),(0,n.jsx)(t.th,{children:"Required"}),(0,n.jsx)(t.th,{children:"Description"})]})}),(0,n.jsxs)(t.tbody,{children:[(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"children"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.a,{href:"https://reactnative.dev/docs/react-node",children:(0,n.jsx)(t.code,{children:"React.ReactNode"})})}),(0,n.jsx)(t.td,{children:"Yes"}),(0,n.jsx)(t.td,{children:"A required prop that represents the content to display within the PagerView component."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"containerStyle"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,n.jsx)(t.code,{children:"StyleProp"})})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"Additional styles to apply to the pager view container."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"pageContainerStyle"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,n.jsx)(t.code,{children:"StyleProp"})})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"Additional styles to apply to the page container."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"headerTextColor"}),(0,n.jsxs)(t.td,{children:[(0,n.jsx)(t.code,{children:"{select: string,"}),(0,n.jsx)("br",{}),(0,n.jsx)(t.code,{children:" default: string}"})]}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"Text colors of header text."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"headerSliderStyle"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,n.jsx)(t.code,{children:"StyleProp"})})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"Style of header slider."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"headerContainerStyle"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,n.jsx)(t.code,{children:"StyleProp"})})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"Style of header slider container."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"headerTextStyle"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.a,{href:"https://reactnative.dev/docs/text-style-props",children:(0,n.jsx)(t.code,{children:"StyleProp"})})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"Text style of header text."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"injectPagerRef"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"boolean"})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsxs)(t.td,{children:["An optional boolean prop that determines whether to inject the PagerView reference into each child component's props. Default value: ",(0,n.jsx)(t.code,{children:"false"})]})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"showDivider"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"boolean"})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsxs)(t.td,{children:["Determines whether the divider is shown or not. Default value:",(0,n.jsx)(t.code,{children:"true"})]})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"dividerStyle"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,n.jsx)(t.code,{children:"StyleProp"})})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"Style of divider"})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"dividerColor"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"string"})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"Color of divider"})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"icons"}),(0,n.jsxs)(t.td,{children:[(0,n.jsx)(t.code,{children:"React.ReactElement"})})," []"]}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"Icon list for header texts."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"theme"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"UITheme "})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"The theme to use for the component."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"typography"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"UITypography"})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"The typography to use for the component."})]})]})]})]})}function h(e={}){const{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(a,{...e})}):a(e)}},1151:(e,t,r)=>{r.d(t,{Z:()=>o,a:()=>s});var n=r(7294);const i={},d=n.createContext(i);function s(e){const t=n.useContext(d);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:s(e.components),n.createElement(d.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/3023ca43.82c515c6.js b/assets/js/3023ca43.9d557742.js similarity index 94% rename from assets/js/3023ca43.82c515c6.js rename to assets/js/3023ca43.9d557742.js index 13a61ff..6fa4087 100644 --- a/assets/js/3023ca43.82c515c6.js +++ b/assets/js/3023ca43.9d557742.js @@ -1 +1 @@ -"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[4492],{690:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>c,default:()=>h,frontMatter:()=>l,metadata:()=>o,toc:()=>u});var a=t(5893),r=t(1151),s=t(4866),i=t(5162);const l={sidebar_position:1},c="Getting Started",o={id:"doc/getting-started",title:"Getting Started",description:"Installation",source:"@site/docs/doc/getting-started.md",sourceDirName:"doc",slug:"/doc/getting-started",permalink:"/react-native-kitra/docs/next/doc/getting-started",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/docs/doc/getting-started.md",tags:[],version:"current",lastUpdatedAt:1707292585,formattedLastUpdatedAt:"Feb 7, 2024",sidebarPosition:1,frontMatter:{sidebar_position:1},sidebar:"DocSidebar",next:{title:"Notification",permalink:"/react-native-kitra/docs/next/doc/Notification"}},d={},u=[{value:"Installation",id:"installation",level:2},{value:"Implementation",id:"implementation",level:2}];function p(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.a)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(n.h1,{id:"getting-started",children:"Getting Started"}),"\n","\n","\n",(0,a.jsx)(n.h2,{id:"installation",children:"Installation"}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsx)(n.li,{children:"Go to the project folder in terminal and run the following code:"}),"\n"]}),"\n",(0,a.jsxs)(s.Z,{groupId:"operating-systems",children:[(0,a.jsx)(i.Z,{value:"yarn",label:"Yarn",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",metastring:"npm2yarn",children:"yarn add @tra-tech/react-native-kitra\n"})})}),(0,a.jsx)(i.Z,{value:"npm",label:"npm",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",metastring:"npm2yarn",children:"npm install @tra-tech/react-native-kitra\n"})})})]}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsx)(n.li,{children:"Packages you need to download separately to use:"}),"\n"]}),"\n",(0,a.jsxs)(s.Z,{groupId:"non-mac-operating-systems",children:[(0,a.jsxs)(i.Z,{value:"React Native CLI",label:"React Native CLI",children:[(0,a.jsx)(n.p,{children:(0,a.jsx)(n.strong,{children:"react-native-reanimated"})}),(0,a.jsxs)(s.Z,{groupId:"operating-systems",children:[(0,a.jsx)(i.Z,{value:"yarn",label:"yarn",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",metastring:"npm2yarn",children:"yarn add react-native-reanimated\n"})})}),(0,a.jsx)(i.Z,{value:"npm",label:"npm",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",metastring:"npm2yarn",children:"npm install react-native-reanimated\n"})})})]}),(0,a.jsx)(n.p,{children:(0,a.jsx)(n.a,{href:"https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation",children:"Click for react-native-reanimated installation instructions."})}),(0,a.jsx)(n.p,{children:(0,a.jsx)(n.strong,{children:"react-native-gesture-handler"})}),(0,a.jsxs)(s.Z,{groupId:"operating-systems",children:[(0,a.jsx)(i.Z,{value:"yarn",label:"yarn",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",metastring:"npm2yarn",children:"yarn add react-native-gesture-handler\n"})})}),(0,a.jsx)(i.Z,{value:"npm",label:"npm",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",metastring:"npm2yarn",children:"npm install react-native-gesture-handler\n"})})})]}),(0,a.jsx)(n.p,{children:(0,a.jsx)(n.a,{href:"https://docs.swmansion.com/react-native-gesture-handler/docs/installation",children:"Click for react-native-gesture-handler installation instructions."})}),(0,a.jsx)(n.p,{children:(0,a.jsx)(n.strong,{children:"react-native-vector-icons"})}),(0,a.jsxs)(s.Z,{groupId:"operating-systems",children:[(0,a.jsx)(i.Z,{value:"yarn",label:"yarn",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",metastring:"npm2yarn",children:"yarn add react-native-vector-icons\n"})})}),(0,a.jsx)(i.Z,{value:"npm",label:"npm",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",metastring:"npm2yarn",children:"npm install react-native-vector-icons\n"})})})]}),(0,a.jsx)(n.p,{children:(0,a.jsx)(n.a,{href:"https://github.com/oblador/react-native-vector-icons#installation",children:"Click for react-native-vector-icons installation instructions."})}),(0,a.jsx)(n.p,{children:(0,a.jsx)(n.strong,{children:"react-native-pager-view"})}),(0,a.jsxs)(s.Z,{groupId:"operating-systems",children:[(0,a.jsx)(i.Z,{value:"yarn",label:"yarn",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",metastring:"npm2yarn",children:"yarn add react-native-pager-view\n"})})}),(0,a.jsx)(i.Z,{value:"npm",label:"npm",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",metastring:"npm2yarn",children:"npm install react-native-pager-view\n"})})})]}),(0,a.jsx)(n.p,{children:(0,a.jsx)(n.a,{href:"https://github.com/callstack/react-native-pager-view#getting-started",children:"Click for react-native-pager-view installation instructions."})})]}),(0,a.jsxs)(i.Z,{value:"Expo",label:"Expo",children:[(0,a.jsx)(n.p,{children:(0,a.jsx)(n.strong,{children:"react-native-reanimated"})}),(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",metastring:"npm2yarn",children:"npx expo install react-native-reanimated\n"})}),(0,a.jsx)(n.p,{children:"After the installation completes, you must also add the Babel plugin to babel.config.js:"}),(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"module.exports = function (api) {\n api.cache(true);\n return {\n presets: ['babel-preset-expo'],\n plugins: ['react-native-reanimated/plugin'],\n };\n};\n"})}),(0,a.jsx)(n.p,{children:(0,a.jsx)(n.strong,{children:"react-native-gesture-handler"})}),(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",metastring:"npm2yarn",children:"npx expo install react-native-gesture-handler\n"})}),(0,a.jsx)(n.p,{children:"Add this import to the top of your app entry file, such as App.js:"}),(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"import 'react-native-gesture-handler';\n"})}),(0,a.jsx)(n.p,{children:(0,a.jsx)(n.strong,{children:"react-native-pager-view"})}),(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",metastring:"npm2yarn",children:"npx expo install react-native-pager-view\n"})})]})]}),"\n",(0,a.jsx)(n.h2,{id:"implementation",children:"Implementation"}),"\n",(0,a.jsxs)(n.p,{children:["Wrap your root component in ",(0,a.jsx)(n.strong,{children:"KitraProvider"})," from react-native-kitra."]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-jsx",children:"import { KitraProvider } from '@tra-tech/react-native-kitra';\nimport App from './src/App';\n\nexport default function Main() {\n return (\n \n \n \n );\n}\n\n"})})]})}function h(e={}){const{wrapper:n}={...(0,r.a)(),...e.components};return n?(0,a.jsx)(n,{...e,children:(0,a.jsx)(p,{...e})}):p(e)}},5162:(e,n,t)=>{t.d(n,{Z:()=>i});t(7294);var a=t(6905);const r={tabItem:"tabItem_Ymn6"};var s=t(5893);function i(e){let{children:n,hidden:t,className:i}=e;return(0,s.jsx)("div",{role:"tabpanel",className:(0,a.Z)(r.tabItem,i),hidden:t,children:n})}},4866:(e,n,t)=>{t.d(n,{Z:()=>k});var a=t(7294),r=t(6905),s=t(2466),i=t(6550),l=t(469),c=t(1980),o=t(7392),d=t(12);function u(e){return a.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,a.isValidElement)(e)&&function(e){const{props:n}=e;return!!n&&"object"==typeof n&&"value"in n}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:n,children:t}=e;return(0,a.useMemo)((()=>{const e=n??function(e){return u(e).map((e=>{let{props:{value:n,label:t,attributes:a,default:r}}=e;return{value:n,label:t,attributes:a,default:r}}))}(t);return function(e){const n=(0,o.l)(e,((e,n)=>e.value===n.value));if(n.length>0)throw new Error(`Docusaurus error: Duplicate values "${n.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[n,t])}function h(e){let{value:n,tabValues:t}=e;return t.some((e=>e.value===n))}function m(e){let{queryString:n=!1,groupId:t}=e;const r=(0,i.k6)(),s=function(e){let{queryString:n=!1,groupId:t}=e;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!t)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return t??null}({queryString:n,groupId:t});return[(0,c._X)(s),(0,a.useCallback)((e=>{if(!s)return;const n=new URLSearchParams(r.location.search);n.set(s,e),r.replace({...r.location,search:n.toString()})}),[s,r])]}function g(e){const{defaultValue:n,queryString:t=!1,groupId:r}=e,s=p(e),[i,c]=(0,a.useState)((()=>function(e){let{defaultValue:n,tabValues:t}=e;if(0===t.length)throw new Error("Docusaurus error: the component requires at least one children component");if(n){if(!h({value:n,tabValues:t}))throw new Error(`Docusaurus error: The has a defaultValue "${n}" but none of its children has the corresponding value. Available values are: ${t.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return n}const a=t.find((e=>e.default))??t[0];if(!a)throw new Error("Unexpected error: 0 tabValues");return a.value}({defaultValue:n,tabValues:s}))),[o,u]=m({queryString:t,groupId:r}),[g,x]=function(e){let{groupId:n}=e;const t=function(e){return e?`docusaurus.tab.${e}`:null}(n),[r,s]=(0,d.Nk)(t);return[r,(0,a.useCallback)((e=>{t&&s.set(e)}),[t,s])]}({groupId:r}),v=(()=>{const e=o??g;return h({value:e,tabValues:s})?e:null})();(0,l.Z)((()=>{v&&c(v)}),[v]);return{selectedValue:i,selectValue:(0,a.useCallback)((e=>{if(!h({value:e,tabValues:s}))throw new Error(`Can't select invalid tab value=${e}`);c(e),u(e),x(e)}),[u,x,s]),tabValues:s}}var x=t(2389);const v={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=t(5893);function j(e){let{className:n,block:t,selectedValue:a,selectValue:i,tabValues:l}=e;const c=[],{blockElementScrollPositionUntilNextRender:o}=(0,s.o5)(),d=e=>{const n=e.currentTarget,t=c.indexOf(n),r=l[t].value;r!==a&&(o(n),i(r))},u=e=>{let n=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":{const t=c.indexOf(e.currentTarget)+1;n=c[t]??c[0];break}case"ArrowLeft":{const t=c.indexOf(e.currentTarget)-1;n=c[t]??c[c.length-1];break}}n?.focus()};return(0,b.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.Z)("tabs",{"tabs--block":t},n),children:l.map((e=>{let{value:n,label:t,attributes:s}=e;return(0,b.jsx)("li",{role:"tab",tabIndex:a===n?0:-1,"aria-selected":a===n,ref:e=>c.push(e),onKeyDown:u,onClick:d,...s,className:(0,r.Z)("tabs__item",v.tabItem,s?.className,{"tabs__item--active":a===n}),children:t??n},n)}))})}function f(e){let{lazy:n,children:t,selectedValue:r}=e;const s=(Array.isArray(t)?t:[t]).filter(Boolean);if(n){const e=s.find((e=>e.props.value===r));return e?(0,a.cloneElement)(e,{className:"margin-top--md"}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:s.map(((e,n)=>(0,a.cloneElement)(e,{key:n,hidden:e.props.value!==r})))})}function y(e){const n=g(e);return(0,b.jsxs)("div",{className:(0,r.Z)("tabs-container",v.tabList),children:[(0,b.jsx)(j,{...e,...n}),(0,b.jsx)(f,{...e,...n})]})}function k(e){const n=(0,x.Z)();return(0,b.jsx)(y,{...e,children:u(e.children)},String(n))}},1151:(e,n,t)=>{t.d(n,{Z:()=>l,a:()=>i});var a=t(7294);const r={},s=a.createContext(r);function i(e){const n=a.useContext(s);return a.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),a.createElement(s.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[4492],{690:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>c,default:()=>h,frontMatter:()=>l,metadata:()=>o,toc:()=>u});var a=t(5893),r=t(1151),s=t(4866),i=t(5162);const l={sidebar_position:1},c="Getting Started",o={id:"doc/getting-started",title:"Getting Started",description:"Installation",source:"@site/docs/doc/getting-started.md",sourceDirName:"doc",slug:"/doc/getting-started",permalink:"/react-native-kitra/docs/next/doc/getting-started",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/docs/doc/getting-started.md",tags:[],version:"current",lastUpdatedAt:1709646294,formattedLastUpdatedAt:"Mar 5, 2024",sidebarPosition:1,frontMatter:{sidebar_position:1},sidebar:"DocSidebar",next:{title:"Notification",permalink:"/react-native-kitra/docs/next/doc/Notification"}},d={},u=[{value:"Installation",id:"installation",level:2},{value:"Implementation",id:"implementation",level:2}];function p(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.a)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(n.h1,{id:"getting-started",children:"Getting Started"}),"\n","\n","\n",(0,a.jsx)(n.h2,{id:"installation",children:"Installation"}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsx)(n.li,{children:"Go to the project folder in terminal and run the following code:"}),"\n"]}),"\n",(0,a.jsxs)(s.Z,{groupId:"operating-systems",children:[(0,a.jsx)(i.Z,{value:"yarn",label:"Yarn",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",metastring:"npm2yarn",children:"yarn add @tra-tech/react-native-kitra\n"})})}),(0,a.jsx)(i.Z,{value:"npm",label:"npm",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",metastring:"npm2yarn",children:"npm install @tra-tech/react-native-kitra\n"})})})]}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsx)(n.li,{children:"Packages you need to download separately to use:"}),"\n"]}),"\n",(0,a.jsxs)(s.Z,{groupId:"non-mac-operating-systems",children:[(0,a.jsxs)(i.Z,{value:"React Native CLI",label:"React Native CLI",children:[(0,a.jsx)(n.p,{children:(0,a.jsx)(n.strong,{children:"react-native-reanimated"})}),(0,a.jsxs)(s.Z,{groupId:"operating-systems",children:[(0,a.jsx)(i.Z,{value:"yarn",label:"yarn",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",metastring:"npm2yarn",children:"yarn add react-native-reanimated\n"})})}),(0,a.jsx)(i.Z,{value:"npm",label:"npm",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",metastring:"npm2yarn",children:"npm install react-native-reanimated\n"})})})]}),(0,a.jsx)(n.p,{children:(0,a.jsx)(n.a,{href:"https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation",children:"Click for react-native-reanimated installation instructions."})}),(0,a.jsx)(n.p,{children:(0,a.jsx)(n.strong,{children:"react-native-gesture-handler"})}),(0,a.jsxs)(s.Z,{groupId:"operating-systems",children:[(0,a.jsx)(i.Z,{value:"yarn",label:"yarn",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",metastring:"npm2yarn",children:"yarn add react-native-gesture-handler\n"})})}),(0,a.jsx)(i.Z,{value:"npm",label:"npm",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",metastring:"npm2yarn",children:"npm install react-native-gesture-handler\n"})})})]}),(0,a.jsx)(n.p,{children:(0,a.jsx)(n.a,{href:"https://docs.swmansion.com/react-native-gesture-handler/docs/installation",children:"Click for react-native-gesture-handler installation instructions."})}),(0,a.jsx)(n.p,{children:(0,a.jsx)(n.strong,{children:"react-native-vector-icons"})}),(0,a.jsxs)(s.Z,{groupId:"operating-systems",children:[(0,a.jsx)(i.Z,{value:"yarn",label:"yarn",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",metastring:"npm2yarn",children:"yarn add react-native-vector-icons\n"})})}),(0,a.jsx)(i.Z,{value:"npm",label:"npm",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",metastring:"npm2yarn",children:"npm install react-native-vector-icons\n"})})})]}),(0,a.jsx)(n.p,{children:(0,a.jsx)(n.a,{href:"https://github.com/oblador/react-native-vector-icons#installation",children:"Click for react-native-vector-icons installation instructions."})}),(0,a.jsx)(n.p,{children:(0,a.jsx)(n.strong,{children:"react-native-pager-view"})}),(0,a.jsxs)(s.Z,{groupId:"operating-systems",children:[(0,a.jsx)(i.Z,{value:"yarn",label:"yarn",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",metastring:"npm2yarn",children:"yarn add react-native-pager-view\n"})})}),(0,a.jsx)(i.Z,{value:"npm",label:"npm",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",metastring:"npm2yarn",children:"npm install react-native-pager-view\n"})})})]}),(0,a.jsx)(n.p,{children:(0,a.jsx)(n.a,{href:"https://github.com/callstack/react-native-pager-view#getting-started",children:"Click for react-native-pager-view installation instructions."})})]}),(0,a.jsxs)(i.Z,{value:"Expo",label:"Expo",children:[(0,a.jsx)(n.p,{children:(0,a.jsx)(n.strong,{children:"react-native-reanimated"})}),(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",metastring:"npm2yarn",children:"npx expo install react-native-reanimated\n"})}),(0,a.jsx)(n.p,{children:"After the installation completes, you must also add the Babel plugin to babel.config.js:"}),(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"module.exports = function (api) {\n api.cache(true);\n return {\n presets: ['babel-preset-expo'],\n plugins: ['react-native-reanimated/plugin'],\n };\n};\n"})}),(0,a.jsx)(n.p,{children:(0,a.jsx)(n.strong,{children:"react-native-gesture-handler"})}),(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",metastring:"npm2yarn",children:"npx expo install react-native-gesture-handler\n"})}),(0,a.jsx)(n.p,{children:"Add this import to the top of your app entry file, such as App.js:"}),(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"import 'react-native-gesture-handler';\n"})}),(0,a.jsx)(n.p,{children:(0,a.jsx)(n.strong,{children:"react-native-pager-view"})}),(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",metastring:"npm2yarn",children:"npx expo install react-native-pager-view\n"})})]})]}),"\n",(0,a.jsx)(n.h2,{id:"implementation",children:"Implementation"}),"\n",(0,a.jsxs)(n.p,{children:["Wrap your root component in ",(0,a.jsx)(n.strong,{children:"KitraProvider"})," from react-native-kitra."]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-jsx",children:"import { KitraProvider } from '@tra-tech/react-native-kitra';\nimport App from './src/App';\n\nexport default function Main() {\n return (\n \n \n \n );\n}\n\n"})})]})}function h(e={}){const{wrapper:n}={...(0,r.a)(),...e.components};return n?(0,a.jsx)(n,{...e,children:(0,a.jsx)(p,{...e})}):p(e)}},5162:(e,n,t)=>{t.d(n,{Z:()=>i});t(7294);var a=t(6905);const r={tabItem:"tabItem_Ymn6"};var s=t(5893);function i(e){let{children:n,hidden:t,className:i}=e;return(0,s.jsx)("div",{role:"tabpanel",className:(0,a.Z)(r.tabItem,i),hidden:t,children:n})}},4866:(e,n,t)=>{t.d(n,{Z:()=>k});var a=t(7294),r=t(6905),s=t(2466),i=t(6550),l=t(469),c=t(1980),o=t(7392),d=t(12);function u(e){return a.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,a.isValidElement)(e)&&function(e){const{props:n}=e;return!!n&&"object"==typeof n&&"value"in n}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:n,children:t}=e;return(0,a.useMemo)((()=>{const e=n??function(e){return u(e).map((e=>{let{props:{value:n,label:t,attributes:a,default:r}}=e;return{value:n,label:t,attributes:a,default:r}}))}(t);return function(e){const n=(0,o.l)(e,((e,n)=>e.value===n.value));if(n.length>0)throw new Error(`Docusaurus error: Duplicate values "${n.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[n,t])}function h(e){let{value:n,tabValues:t}=e;return t.some((e=>e.value===n))}function m(e){let{queryString:n=!1,groupId:t}=e;const r=(0,i.k6)(),s=function(e){let{queryString:n=!1,groupId:t}=e;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!t)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return t??null}({queryString:n,groupId:t});return[(0,c._X)(s),(0,a.useCallback)((e=>{if(!s)return;const n=new URLSearchParams(r.location.search);n.set(s,e),r.replace({...r.location,search:n.toString()})}),[s,r])]}function g(e){const{defaultValue:n,queryString:t=!1,groupId:r}=e,s=p(e),[i,c]=(0,a.useState)((()=>function(e){let{defaultValue:n,tabValues:t}=e;if(0===t.length)throw new Error("Docusaurus error: the component requires at least one children component");if(n){if(!h({value:n,tabValues:t}))throw new Error(`Docusaurus error: The has a defaultValue "${n}" but none of its children has the corresponding value. Available values are: ${t.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return n}const a=t.find((e=>e.default))??t[0];if(!a)throw new Error("Unexpected error: 0 tabValues");return a.value}({defaultValue:n,tabValues:s}))),[o,u]=m({queryString:t,groupId:r}),[g,x]=function(e){let{groupId:n}=e;const t=function(e){return e?`docusaurus.tab.${e}`:null}(n),[r,s]=(0,d.Nk)(t);return[r,(0,a.useCallback)((e=>{t&&s.set(e)}),[t,s])]}({groupId:r}),v=(()=>{const e=o??g;return h({value:e,tabValues:s})?e:null})();(0,l.Z)((()=>{v&&c(v)}),[v]);return{selectedValue:i,selectValue:(0,a.useCallback)((e=>{if(!h({value:e,tabValues:s}))throw new Error(`Can't select invalid tab value=${e}`);c(e),u(e),x(e)}),[u,x,s]),tabValues:s}}var x=t(2389);const v={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var j=t(5893);function b(e){let{className:n,block:t,selectedValue:a,selectValue:i,tabValues:l}=e;const c=[],{blockElementScrollPositionUntilNextRender:o}=(0,s.o5)(),d=e=>{const n=e.currentTarget,t=c.indexOf(n),r=l[t].value;r!==a&&(o(n),i(r))},u=e=>{let n=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":{const t=c.indexOf(e.currentTarget)+1;n=c[t]??c[0];break}case"ArrowLeft":{const t=c.indexOf(e.currentTarget)-1;n=c[t]??c[c.length-1];break}}n?.focus()};return(0,j.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.Z)("tabs",{"tabs--block":t},n),children:l.map((e=>{let{value:n,label:t,attributes:s}=e;return(0,j.jsx)("li",{role:"tab",tabIndex:a===n?0:-1,"aria-selected":a===n,ref:e=>c.push(e),onKeyDown:u,onClick:d,...s,className:(0,r.Z)("tabs__item",v.tabItem,s?.className,{"tabs__item--active":a===n}),children:t??n},n)}))})}function f(e){let{lazy:n,children:t,selectedValue:r}=e;const s=(Array.isArray(t)?t:[t]).filter(Boolean);if(n){const e=s.find((e=>e.props.value===r));return e?(0,a.cloneElement)(e,{className:"margin-top--md"}):null}return(0,j.jsx)("div",{className:"margin-top--md",children:s.map(((e,n)=>(0,a.cloneElement)(e,{key:n,hidden:e.props.value!==r})))})}function y(e){const n=g(e);return(0,j.jsxs)("div",{className:(0,r.Z)("tabs-container",v.tabList),children:[(0,j.jsx)(b,{...e,...n}),(0,j.jsx)(f,{...e,...n})]})}function k(e){const n=(0,x.Z)();return(0,j.jsx)(y,{...e,children:u(e.children)},String(n))}},1151:(e,n,t)=>{t.d(n,{Z:()=>l,a:()=>i});var a=t(7294);const r={},s=a.createContext(r);function i(e){const n=a.useContext(s);return a.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),a.createElement(s.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/314d6f6a.604fef9b.js b/assets/js/314d6f6a.9457464b.js similarity index 99% rename from assets/js/314d6f6a.604fef9b.js rename to assets/js/314d6f6a.9457464b.js index 43c28d9..7c8ff27 100644 --- a/assets/js/314d6f6a.604fef9b.js +++ b/assets/js/314d6f6a.9457464b.js @@ -1 +1 @@ -"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[2996],{403:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>c,default:()=>h,frontMatter:()=>l,metadata:()=>u,toc:()=>m});var o=n(5893),s=n(1151),r=n(2920),a=n(1e3),i=n(2949);const l={sidebar_position:2},c=void 0,u={id:"doc/Theme",title:"Theme",description:"Applying theme",source:"@site/versioned_docs/version-1.x/doc/Theme.md",sourceDirName:"doc",slug:"/doc/Theme",permalink:"/react-native-kitra/docs/doc/Theme",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/versioned_docs/version-1.x/doc/Theme.md",tags:[],version:"1.x",lastUpdatedAt:1707292585,formattedLastUpdatedAt:"Feb 7, 2024",sidebarPosition:2,frontMatter:{sidebar_position:2},sidebar:"DocSidebar",previous:{title:"Notification",permalink:"/react-native-kitra/docs/doc/Notification"},next:{title:"Typography",permalink:"/react-native-kitra/docs/doc/Typography"}},d={},m=[{value:"Applying theme",id:"applying-theme",level:2},{value:"Accessing and updating theme",id:"accessing-and-updating-theme",level:2},{value:"Colors",id:"colors",level:2},{value:"Main",id:"main",level:3},{value:"Text",id:"text",level:3},{value:"Status",id:"status",level:3}];function p(e){const t={code:"code",h2:"h2",h3:"h3",p:"p",pre:"pre",strong:"strong",...(0,s.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(r.Ix,{position:"bottom-center",autoClose:5e3,hideProgressBar:!0,newestOnTop:!1,closeOnClick:!0,rtl:!1,pauseOnFocusLoss:!0,draggable:!0,pauseOnHover:!0,theme:(0,i.I)().colorMode}),"\n",(0,o.jsx)(t.h2,{id:"applying-theme",children:"Applying theme"}),"\n",(0,o.jsx)(t.p,{children:"To use themes, you need to wrap the root component with provider."}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-jsx",children:"import { KitraProvider } from '@tra-tech/react-native-kitra';\nimport App from './src/App';\n\nexport default function Main() {\n return (\n \n \n \n );\n}\n"})}),"\n",(0,o.jsx)(t.h2,{id:"accessing-and-updating-theme",children:"Accessing and updating theme"}),"\n",(0,o.jsxs)(t.p,{children:["To access the current theme, use the ",(0,o.jsx)(t.strong,{children:"useTheme"})," hook. This hook returns the current theme object and a ",(0,o.jsx)(t.strong,{children:"updateTheme"})," function to update the theme."]}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.strong,{children:"theme"})," object is a key-value pair of colors that define the current theme of the app. The ",(0,o.jsx)(t.strong,{children:"updateTheme"})," function is used to update the current theme by merging in new colors. You can customize these values to create your own theme."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-jsx",children:'import { useTheme } from \'@tra-tech/react-native-kitra\';\n\nconst MyCustomTheme= {\n dark:{\n someColor: "#420EA1"\n },\n light:{\n someColor:"#F0E52F"\n }\n}\n\nexport function App() {\n const {theme,updateTheme}= useTheme();\n\n useEffect(() => {\n updateTheme(MyCustomTheme)\n }, []);\n \n return (\n \n \n \n \n );\n}\n'})}),"\n",(0,o.jsx)(t.h2,{id:"colors",children:"Colors"}),"\n","\n","\n",(0,o.jsx)(t.h3,{id:"main",children:"Main"}),"\n",(0,o.jsxs)("div",{style:{display:"flex",flexDirection:"row",flexWrap:"wrap"},children:[(0,o.jsx)(a.Z,{colorName:"Primary",colorValue:"#8973CD"}),(0,o.jsx)(a.Z,{colorName:"Primary 5",colorValue:"#F9F8FD"}),(0,o.jsx)(a.Z,{colorName:"Primary 15",colorValue:"#EDEAF8"}),(0,o.jsx)(a.Z,{colorName:"Primary 30",colorValue:"#DCD5F0"}),(0,o.jsx)(a.Z,{colorName:"Secondary",colorValue:"#82B98E"}),(0,o.jsx)(a.Z,{colorName:"Tetriary",colorValue:"#67A7C1"})]}),"\n",(0,o.jsx)(t.h3,{id:"text",children:"Text"}),"\n",(0,o.jsxs)("div",{style:{display:"flex",flexDirection:"row",flexWrap:"wrap"},children:[(0,o.jsx)(a.Z,{colorName:"Black",colorValue:"#000000"}),(0,o.jsx)(a.Z,{colorName:"Light Black",colorValue:"#404040"}),(0,o.jsx)(a.Z,{colorName:"Grey",colorValue:"#9A9A9A"}),(0,o.jsx)(a.Z,{colorName:"White",colorValue:"#FFFFFF"}),(0,o.jsx)(a.Z,{colorName:"Dark White",colorValue:"#FDFCFF"}),(0,o.jsx)(a.Z,{colorName:"Light Grey",colorValue:"#F5F4F6"})]}),"\n",(0,o.jsx)(t.h3,{id:"status",children:"Status"}),"\n",(0,o.jsxs)("div",{style:{display:"flex",flexDirection:"row",flexWrap:"wrap"},children:[(0,o.jsx)(a.Z,{colorName:"Focused",colorValue:"#654FA6"}),(0,o.jsx)(a.Z,{colorName:"Error",colorValue:"#FF3434"}),(0,o.jsx)(a.Z,{colorName:"Success",colorValue:"#09CE63"}),(0,o.jsx)(a.Z,{colorName:"Disabled Light",colorValue:"#D7D1E9"}),(0,o.jsx)(a.Z,{colorName:"Disabled Dark",colorValue:"#BDBCBF"}),(0,o.jsx)(a.Z,{colorName:"Disabled Light Dark",colorValue:"#F6F6F6"})]})]})}function h(e={}){const{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(p,{...e})}):p(e)}},1e3:(e,t,n)=>{n.d(t,{Z:()=>c});n(7294);var o=n(2920);const s="container_oa4u",r="swatch_yqre",a="colorName_UerQ",i="colorValue_s1yd";var l=n(5893);const c=e=>{let{colorName:t,colorValue:n,border:c="solid"}=e;return(0,l.jsxs)("div",{id:"colorbutton",style:{cursor:"pointer"},onClick:()=>{navigator.clipboard.writeText(n),o.Am.success("Copied to Clipboard!")},className:s,children:[(0,l.jsx)("div",{className:r,style:{backgroundColor:n,border:c,borderWidth:1}}),(0,l.jsxs)("div",{style:{display:"flex",flexDirection:"column"},children:[(0,l.jsx)("p",{className:a,children:t}),(0,l.jsx)("p",{className:i,children:n})]})]})}},1151:(e,t,n)=>{n.d(t,{Z:()=>i,a:()=>a});var o=n(7294);const s={},r=o.createContext(s);function a(e){const t=o.useContext(r);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:a(e.components),o.createElement(r.Provider,{value:t},e.children)}},2920:(e,t,n)=>{n.d(t,{Ix:()=>_,Am:()=>M});var o=n(7294);function s(e){var t,n,o="";if("string"==typeof e||"number"==typeof e)o+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t"number"==typeof e&&!isNaN(e),i=e=>"string"==typeof e,l=e=>"function"==typeof e,c=e=>i(e)||l(e)?e:null,u=e=>(0,o.isValidElement)(e)||i(e)||l(e)||a(e);function d(e){let{enter:t,exit:n,appendPosition:s=!1,collapse:r=!0,collapseDuration:a=300}=e;return function(e){let{children:i,position:l,preventExitTransition:c,done:u,nodeRef:d,isIn:m}=e;const p=s?`${t}--${l}`:t,h=s?`${n}--${l}`:n,f=(0,o.useRef)(0);return(0,o.useLayoutEffect)((()=>{const e=d.current,t=p.split(" "),n=o=>{o.target===d.current&&(e.dispatchEvent(new Event("d")),e.removeEventListener("animationend",n),e.removeEventListener("animationcancel",n),0===f.current&&"animationcancel"!==o.type&&e.classList.remove(...t))};e.classList.add(...t),e.addEventListener("animationend",n),e.addEventListener("animationcancel",n)}),[]),(0,o.useEffect)((()=>{const e=d.current,t=()=>{e.removeEventListener("animationend",t),r?function(e,t,n){void 0===n&&(n=300);const{scrollHeight:o,style:s}=e;requestAnimationFrame((()=>{s.minHeight="initial",s.height=o+"px",s.transition=`all ${n}ms`,requestAnimationFrame((()=>{s.height="0",s.padding="0",s.margin="0",setTimeout(t,n)}))}))}(e,u,a):u()};m||(c?t():(f.current=1,e.className+=` ${h}`,e.addEventListener("animationend",t)))}),[m]),o.createElement(o.Fragment,null,i)}}function m(e,t){return null!=e?{content:e.content,containerId:e.props.containerId,id:e.props.toastId,theme:e.props.theme,type:e.props.type,data:e.props.data||{},isLoading:e.props.isLoading,icon:e.props.icon,status:t}:{}}const p={list:new Map,emitQueue:new Map,on(e,t){return this.list.has(e)||this.list.set(e,[]),this.list.get(e).push(t),this},off(e,t){if(t){const n=this.list.get(e).filter((e=>e!==t));return this.list.set(e,n),this}return this.list.delete(e),this},cancelEmit(e){const t=this.emitQueue.get(e);return t&&(t.forEach(clearTimeout),this.emitQueue.delete(e)),this},emit(e){this.list.has(e)&&this.list.get(e).forEach((t=>{const n=setTimeout((()=>{t(...[].slice.call(arguments,1))}),0);this.emitQueue.has(e)||this.emitQueue.set(e,[]),this.emitQueue.get(e).push(n)}))}},h=e=>{let{theme:t,type:n,...s}=e;return o.createElement("svg",{viewBox:"0 0 24 24",width:"100%",height:"100%",fill:"colored"===t?"currentColor":`var(--toastify-icon-color-${n})`,...s})},f={info:function(e){return o.createElement(h,{...e},o.createElement("path",{d:"M12 0a12 12 0 1012 12A12.013 12.013 0 0012 0zm.25 5a1.5 1.5 0 11-1.5 1.5 1.5 1.5 0 011.5-1.5zm2.25 13.5h-4a1 1 0 010-2h.75a.25.25 0 00.25-.25v-4.5a.25.25 0 00-.25-.25h-.75a1 1 0 010-2h1a2 2 0 012 2v4.75a.25.25 0 00.25.25h.75a1 1 0 110 2z"}))},warning:function(e){return o.createElement(h,{...e},o.createElement("path",{d:"M23.32 17.191L15.438 2.184C14.728.833 13.416 0 11.996 0c-1.42 0-2.733.833-3.443 2.184L.533 17.448a4.744 4.744 0 000 4.368C1.243 23.167 2.555 24 3.975 24h16.05C22.22 24 24 22.044 24 19.632c0-.904-.251-1.746-.68-2.44zm-9.622 1.46c0 1.033-.724 1.823-1.698 1.823s-1.698-.79-1.698-1.822v-.043c0-1.028.724-1.822 1.698-1.822s1.698.79 1.698 1.822v.043zm.039-12.285l-.84 8.06c-.057.581-.408.943-.897.943-.49 0-.84-.367-.896-.942l-.84-8.065c-.057-.624.25-1.095.779-1.095h1.91c.528.005.84.476.784 1.1z"}))},success:function(e){return o.createElement(h,{...e},o.createElement("path",{d:"M12 0a12 12 0 1012 12A12.014 12.014 0 0012 0zm6.927 8.2l-6.845 9.289a1.011 1.011 0 01-1.43.188l-4.888-3.908a1 1 0 111.25-1.562l4.076 3.261 6.227-8.451a1 1 0 111.61 1.183z"}))},error:function(e){return o.createElement(h,{...e},o.createElement("path",{d:"M11.983 0a12.206 12.206 0 00-8.51 3.653A11.8 11.8 0 000 12.207 11.779 11.779 0 0011.8 24h.214A12.111 12.111 0 0024 11.791 11.766 11.766 0 0011.983 0zM10.5 16.542a1.476 1.476 0 011.449-1.53h.027a1.527 1.527 0 011.523 1.47 1.475 1.475 0 01-1.449 1.53h-.027a1.529 1.529 0 01-1.523-1.47zM11 12.5v-6a1 1 0 012 0v6a1 1 0 11-2 0z"}))},spinner:function(){return o.createElement("div",{className:"Toastify__spinner"})}};function g(e){const[,t]=(0,o.useReducer)((e=>e+1),0),[n,s]=(0,o.useState)([]),r=(0,o.useRef)(null),d=(0,o.useRef)(new Map).current,h=e=>-1!==n.indexOf(e),g=(0,o.useRef)({toastKey:1,displayedToast:0,count:0,queue:[],props:e,containerId:null,isToastActive:h,getToast:e=>d.get(e)}).current;function y(e){let{containerId:t}=e;const{limit:n}=g.props;!n||t&&g.containerId!==t||(g.count-=g.queue.length,g.queue=[])}function v(e){s((t=>null==e?[]:t.filter((t=>t!==e))))}function T(){const{toastContent:e,toastProps:t,staleId:n}=g.queue.shift();x(e,t,n)}function E(e,n){let{delay:s,staleId:h,...y}=n;if(!u(e)||function(e){return!r.current||g.props.enableMultiContainer&&e.containerId!==g.props.containerId||d.has(e.toastId)&&null==e.updateId}(y))return;const{toastId:E,updateId:C,data:b}=y,{props:N}=g,_=()=>v(E),I=null==C;I&&g.count++;const j={...N,style:N.toastStyle,key:g.toastKey++,...Object.fromEntries(Object.entries(y).filter((e=>{let[t,n]=e;return null!=n}))),toastId:E,updateId:C,data:b,closeToast:_,isIn:!1,className:c(y.className||N.toastClassName),bodyClassName:c(y.bodyClassName||N.bodyClassName),progressClassName:c(y.progressClassName||N.progressClassName),autoClose:!y.isLoading&&(k=y.autoClose,L=N.autoClose,!1===k||a(k)&&k>0?k:L),deleteToast(){const e=m(d.get(E),"removed");d.delete(E),p.emit(4,e);const n=g.queue.length;if(g.count=null==E?g.count-g.displayedToast:g.count-1,g.count<0&&(g.count=0),n>0){const e=null==E?g.props.limit:1;if(1===n||1===e)g.displayedToast++,T();else{const t=e>n?n:e;g.displayedToast=t;for(let e=0;ee in f)(n)&&(c=f[n](u))),c}(j),l(y.onOpen)&&(j.onOpen=y.onOpen),l(y.onClose)&&(j.onClose=y.onClose),j.closeButton=N.closeButton,!1===y.closeButton||u(y.closeButton)?j.closeButton=y.closeButton:!0===y.closeButton&&(j.closeButton=!u(N.closeButton)||N.closeButton);let O=e;(0,o.isValidElement)(e)&&!i(e.type)?O=(0,o.cloneElement)(e,{closeToast:_,toastProps:j,data:b}):l(e)&&(O=e({closeToast:_,toastProps:j,data:b})),N.limit&&N.limit>0&&g.count>N.limit&&I?g.queue.push({toastContent:O,toastProps:j,staleId:h}):a(s)?setTimeout((()=>{x(O,j,h)}),s):x(O,j,h)}function x(e,t,n){const{toastId:o}=t;n&&d.delete(n);const r={content:e,props:t};d.set(o,r),s((e=>[...e,o].filter((e=>e!==n)))),p.emit(4,m(r,null==r.props.updateId?"added":"updated"))}return(0,o.useEffect)((()=>(g.containerId=e.containerId,p.cancelEmit(3).on(0,E).on(1,(e=>r.current&&v(e))).on(5,y).emit(2,g),()=>{d.clear(),p.emit(3,g)})),[]),(0,o.useEffect)((()=>{g.props=e,g.isToastActive=h,g.displayedToast=n.length})),{getToastToRender:function(t){const n=new Map,o=Array.from(d.values());return e.newestOnTop&&o.reverse(),o.forEach((e=>{const{position:t}=e.props;n.has(t)||n.set(t,[]),n.get(t).push(e)})),Array.from(n,(e=>t(e[0],e[1])))},containerRef:r,isToastActive:h}}function y(e){return e.targetTouches&&e.targetTouches.length>=1?e.targetTouches[0].clientX:e.clientX}function v(e){return e.targetTouches&&e.targetTouches.length>=1?e.targetTouches[0].clientY:e.clientY}function T(e){const[t,n]=(0,o.useState)(!1),[s,r]=(0,o.useState)(!1),a=(0,o.useRef)(null),i=(0,o.useRef)({start:0,x:0,y:0,delta:0,removalDistance:0,canCloseOnClick:!0,canDrag:!1,boundingRect:null,didMove:!1}).current,c=(0,o.useRef)(e),{autoClose:u,pauseOnHover:d,closeToast:m,onClick:p,closeOnClick:h}=e;function f(t){if(e.draggable){"touchstart"===t.nativeEvent.type&&t.nativeEvent.preventDefault(),i.didMove=!1,document.addEventListener("mousemove",x),document.addEventListener("mouseup",C),document.addEventListener("touchmove",x),document.addEventListener("touchend",C);const n=a.current;i.canCloseOnClick=!0,i.canDrag=!0,i.boundingRect=n.getBoundingClientRect(),n.style.transition="",i.x=y(t.nativeEvent),i.y=v(t.nativeEvent),"x"===e.draggableDirection?(i.start=i.x,i.removalDistance=n.offsetWidth*(e.draggablePercent/100)):(i.start=i.y,i.removalDistance=n.offsetHeight*(80===e.draggablePercent?1.5*e.draggablePercent:e.draggablePercent/100))}}function g(t){if(i.boundingRect){const{top:n,bottom:o,left:s,right:r}=i.boundingRect;"touchend"!==t.nativeEvent.type&&e.pauseOnHover&&i.x>=s&&i.x<=r&&i.y>=n&&i.y<=o?E():T()}}function T(){n(!0)}function E(){n(!1)}function x(n){const o=a.current;i.canDrag&&o&&(i.didMove=!0,t&&E(),i.x=y(n),i.y=v(n),i.delta="x"===e.draggableDirection?i.x-i.start:i.y-i.start,i.start!==i.x&&(i.canCloseOnClick=!1),o.style.transform=`translate${e.draggableDirection}(${i.delta}px)`,o.style.opacity=""+(1-Math.abs(i.delta/i.removalDistance)))}function C(){document.removeEventListener("mousemove",x),document.removeEventListener("mouseup",C),document.removeEventListener("touchmove",x),document.removeEventListener("touchend",C);const t=a.current;if(i.canDrag&&i.didMove&&t){if(i.canDrag=!1,Math.abs(i.delta)>i.removalDistance)return r(!0),void e.closeToast();t.style.transition="transform 0.2s, opacity 0.2s",t.style.transform=`translate${e.draggableDirection}(0)`,t.style.opacity="1"}}(0,o.useEffect)((()=>{c.current=e})),(0,o.useEffect)((()=>(a.current&&a.current.addEventListener("d",T,{once:!0}),l(e.onOpen)&&e.onOpen((0,o.isValidElement)(e.children)&&e.children.props),()=>{const e=c.current;l(e.onClose)&&e.onClose((0,o.isValidElement)(e.children)&&e.children.props)})),[]),(0,o.useEffect)((()=>(e.pauseOnFocusLoss&&(document.hasFocus()||E(),window.addEventListener("focus",T),window.addEventListener("blur",E)),()=>{e.pauseOnFocusLoss&&(window.removeEventListener("focus",T),window.removeEventListener("blur",E))})),[e.pauseOnFocusLoss]);const b={onMouseDown:f,onTouchStart:f,onMouseUp:g,onTouchEnd:g};return u&&d&&(b.onMouseEnter=E,b.onMouseLeave=T),h&&(b.onClick=e=>{p&&p(e),i.canCloseOnClick&&m()}),{playToast:T,pauseToast:E,isRunning:t,preventExitTransition:s,toastRef:a,eventHandlers:b}}function E(e){let{closeToast:t,theme:n,ariaLabel:s="close"}=e;return o.createElement("button",{className:`Toastify__close-button Toastify__close-button--${n}`,type:"button",onClick:e=>{e.stopPropagation(),t(e)},"aria-label":s},o.createElement("svg",{"aria-hidden":"true",viewBox:"0 0 14 16"},o.createElement("path",{fillRule:"evenodd",d:"M7.71 8.23l3.75 3.75-1.48 1.48-3.75-3.75-3.75 3.75L1 11.98l3.75-3.75L1 4.48 2.48 3l3.75 3.75L9.98 3l1.48 1.48-3.75 3.75z"})))}function x(e){let{delay:t,isRunning:n,closeToast:s,type:a="default",hide:i,className:c,style:u,controlledProgress:d,progress:m,rtl:p,isIn:h,theme:f}=e;const g=i||d&&0===m,y={...u,animationDuration:`${t}ms`,animationPlayState:n?"running":"paused",opacity:g?0:1};d&&(y.transform=`scaleX(${m})`);const v=r("Toastify__progress-bar",d?"Toastify__progress-bar--controlled":"Toastify__progress-bar--animated",`Toastify__progress-bar-theme--${f}`,`Toastify__progress-bar--${a}`,{"Toastify__progress-bar--rtl":p}),T=l(c)?c({rtl:p,type:a,defaultClassName:v}):r(v,c);return o.createElement("div",{role:"progressbar","aria-hidden":g?"true":"false","aria-label":"notification timer",className:T,style:y,[d&&m>=1?"onTransitionEnd":"onAnimationEnd"]:d&&m<1?null:()=>{h&&s()}})}const C=e=>{const{isRunning:t,preventExitTransition:n,toastRef:s,eventHandlers:a}=T(e),{closeButton:i,children:c,autoClose:u,onClick:d,type:m,hideProgressBar:p,closeToast:h,transition:f,position:g,className:y,style:v,bodyClassName:C,bodyStyle:b,progressClassName:N,progressStyle:_,updateId:I,role:j,progress:k,rtl:L,toastId:O,deleteToast:w,isIn:F,isLoading:A,iconOut:D,closeOnClick:M,theme:R}=e,P=r("Toastify__toast",`Toastify__toast-theme--${R}`,`Toastify__toast--${m}`,{"Toastify__toast--rtl":L},{"Toastify__toast--close-on-click":M}),B=l(y)?y({rtl:L,position:g,type:m,defaultClassName:P}):r(P,y),V=!!k||!u,$={closeToast:h,type:m,theme:R};let Z=null;return!1===i||(Z=l(i)?i($):(0,o.isValidElement)(i)?(0,o.cloneElement)(i,$):E($)),o.createElement(f,{isIn:F,done:w,position:g,preventExitTransition:n,nodeRef:s},o.createElement("div",{id:O,onClick:d,className:B,...a,style:v,ref:s},o.createElement("div",{...F&&{role:j},className:l(C)?C({type:m}):r("Toastify__toast-body",C),style:b},null!=D&&o.createElement("div",{className:r("Toastify__toast-icon",{"Toastify--animate-icon Toastify__zoom-enter":!A})},D),o.createElement("div",null,c)),Z,o.createElement(x,{...I&&!V?{key:`pb-${I}`}:{},rtl:L,theme:R,delay:u,isRunning:t,isIn:F,closeToast:h,hide:p,type:m,style:_,className:N,controlledProgress:V,progress:k||0})))},b=function(e,t){return void 0===t&&(t=!1),{enter:`Toastify--animate Toastify__${e}-enter`,exit:`Toastify--animate Toastify__${e}-exit`,appendPosition:t}},N=d(b("bounce",!0)),_=(d(b("slide",!0)),d(b("zoom")),d(b("flip")),(0,o.forwardRef)(((e,t)=>{const{getToastToRender:n,containerRef:s,isToastActive:a}=g(e),{className:i,style:u,rtl:d,containerId:m}=e;function p(e){const t=r("Toastify__toast-container",`Toastify__toast-container--${e}`,{"Toastify__toast-container--rtl":d});return l(i)?i({position:e,rtl:d,defaultClassName:t}):r(t,c(i))}return(0,o.useEffect)((()=>{t&&(t.current=s.current)}),[]),o.createElement("div",{ref:s,className:"Toastify",id:m},n(((e,t)=>{const n=t.length?{...u}:{...u,pointerEvents:"none"};return o.createElement("div",{className:p(e),style:n,key:`container-${e}`},t.map(((e,n)=>{let{content:s,props:r}=e;return o.createElement(C,{...r,isIn:a(r.toastId),style:{...r.style,"--nth":n+1,"--len":t.length},key:`toast-${r.key}`},s)})))})))})));_.displayName="ToastContainer",_.defaultProps={position:"top-right",transition:N,autoClose:5e3,closeButton:E,pauseOnHover:!0,pauseOnFocusLoss:!0,closeOnClick:!0,draggable:!0,draggablePercent:80,draggableDirection:"x",role:"alert",theme:"light"};let I,j=new Map,k=[],L=1;function O(){return""+L++}function w(e){return e&&(i(e.toastId)||a(e.toastId))?e.toastId:O()}function F(e,t){return j.size>0?p.emit(0,e,t):k.push({content:e,options:t}),t.toastId}function A(e,t){return{...t,type:t&&t.type||e,toastId:w(t)}}function D(e){return(t,n)=>F(t,A(e,n))}function M(e,t){return F(e,A("default",t))}M.loading=(e,t)=>F(e,A("default",{isLoading:!0,autoClose:!1,closeOnClick:!1,closeButton:!1,draggable:!1,...t})),M.promise=function(e,t,n){let o,{pending:s,error:r,success:a}=t;s&&(o=i(s)?M.loading(s,n):M.loading(s.render,{...n,...s}));const c={isLoading:null,autoClose:null,closeOnClick:null,closeButton:null,draggable:null},u=(e,t,s)=>{if(null==t)return void M.dismiss(o);const r={type:e,...c,...n,data:s},a=i(t)?{render:t}:t;return o?M.update(o,{...r,...a}):M(a.render,{...r,...a}),s},d=l(e)?e():e;return d.then((e=>u("success",a,e))).catch((e=>u("error",r,e))),d},M.success=D("success"),M.info=D("info"),M.error=D("error"),M.warning=D("warning"),M.warn=M.warning,M.dark=(e,t)=>F(e,A("default",{theme:"dark",...t})),M.dismiss=e=>{j.size>0?p.emit(1,e):k=k.filter((t=>null!=e&&t.options.toastId!==e))},M.clearWaitingQueue=function(e){return void 0===e&&(e={}),p.emit(5,e)},M.isActive=e=>{let t=!1;return j.forEach((n=>{n.isToastActive&&n.isToastActive(e)&&(t=!0)})),t},M.update=function(e,t){void 0===t&&(t={}),setTimeout((()=>{const n=function(e,t){let{containerId:n}=t;const o=j.get(n||I);return o&&o.getToast(e)}(e,t);if(n){const{props:o,content:s}=n,r={delay:100,...o,...t,toastId:t.toastId||e,updateId:O()};r.toastId!==e&&(r.staleId=e);const a=r.render||s;delete r.render,F(a,r)}}),0)},M.done=e=>{M.update(e,{progress:1})},M.onChange=e=>(p.on(4,e),()=>{p.off(4,e)}),M.POSITION={TOP_LEFT:"top-left",TOP_RIGHT:"top-right",TOP_CENTER:"top-center",BOTTOM_LEFT:"bottom-left",BOTTOM_RIGHT:"bottom-right",BOTTOM_CENTER:"bottom-center"},M.TYPE={INFO:"info",SUCCESS:"success",WARNING:"warning",ERROR:"error",DEFAULT:"default"},p.on(2,(e=>{I=e.containerId||e,j.set(I,e),k.forEach((e=>{p.emit(0,e.content,e.options)})),k=[]})).on(3,(e=>{j.delete(e.containerId||e),0===j.size&&p.off(0).off(1).off(5)}))}}]); \ No newline at end of file +"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[2996],{403:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>c,default:()=>h,frontMatter:()=>l,metadata:()=>u,toc:()=>m});var o=n(5893),s=n(1151),r=n(2920),a=n(1e3),i=n(2949);const l={sidebar_position:2},c=void 0,u={id:"doc/Theme",title:"Theme",description:"Applying theme",source:"@site/versioned_docs/version-1.x/doc/Theme.md",sourceDirName:"doc",slug:"/doc/Theme",permalink:"/react-native-kitra/docs/doc/Theme",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/versioned_docs/version-1.x/doc/Theme.md",tags:[],version:"1.x",lastUpdatedAt:1709646294,formattedLastUpdatedAt:"Mar 5, 2024",sidebarPosition:2,frontMatter:{sidebar_position:2},sidebar:"DocSidebar",previous:{title:"Notification",permalink:"/react-native-kitra/docs/doc/Notification"},next:{title:"Typography",permalink:"/react-native-kitra/docs/doc/Typography"}},d={},m=[{value:"Applying theme",id:"applying-theme",level:2},{value:"Accessing and updating theme",id:"accessing-and-updating-theme",level:2},{value:"Colors",id:"colors",level:2},{value:"Main",id:"main",level:3},{value:"Text",id:"text",level:3},{value:"Status",id:"status",level:3}];function p(e){const t={code:"code",h2:"h2",h3:"h3",p:"p",pre:"pre",strong:"strong",...(0,s.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(r.Ix,{position:"bottom-center",autoClose:5e3,hideProgressBar:!0,newestOnTop:!1,closeOnClick:!0,rtl:!1,pauseOnFocusLoss:!0,draggable:!0,pauseOnHover:!0,theme:(0,i.I)().colorMode}),"\n",(0,o.jsx)(t.h2,{id:"applying-theme",children:"Applying theme"}),"\n",(0,o.jsx)(t.p,{children:"To use themes, you need to wrap the root component with provider."}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-jsx",children:"import { KitraProvider } from '@tra-tech/react-native-kitra';\nimport App from './src/App';\n\nexport default function Main() {\n return (\n \n \n \n );\n}\n"})}),"\n",(0,o.jsx)(t.h2,{id:"accessing-and-updating-theme",children:"Accessing and updating theme"}),"\n",(0,o.jsxs)(t.p,{children:["To access the current theme, use the ",(0,o.jsx)(t.strong,{children:"useTheme"})," hook. This hook returns the current theme object and a ",(0,o.jsx)(t.strong,{children:"updateTheme"})," function to update the theme."]}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.strong,{children:"theme"})," object is a key-value pair of colors that define the current theme of the app. The ",(0,o.jsx)(t.strong,{children:"updateTheme"})," function is used to update the current theme by merging in new colors. You can customize these values to create your own theme."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-jsx",children:'import { useTheme } from \'@tra-tech/react-native-kitra\';\n\nconst MyCustomTheme= {\n dark:{\n someColor: "#420EA1"\n },\n light:{\n someColor:"#F0E52F"\n }\n}\n\nexport function App() {\n const {theme,updateTheme}= useTheme();\n\n useEffect(() => {\n updateTheme(MyCustomTheme)\n }, []);\n \n return (\n \n \n \n \n );\n}\n'})}),"\n",(0,o.jsx)(t.h2,{id:"colors",children:"Colors"}),"\n","\n","\n",(0,o.jsx)(t.h3,{id:"main",children:"Main"}),"\n",(0,o.jsxs)("div",{style:{display:"flex",flexDirection:"row",flexWrap:"wrap"},children:[(0,o.jsx)(a.Z,{colorName:"Primary",colorValue:"#8973CD"}),(0,o.jsx)(a.Z,{colorName:"Primary 5",colorValue:"#F9F8FD"}),(0,o.jsx)(a.Z,{colorName:"Primary 15",colorValue:"#EDEAF8"}),(0,o.jsx)(a.Z,{colorName:"Primary 30",colorValue:"#DCD5F0"}),(0,o.jsx)(a.Z,{colorName:"Secondary",colorValue:"#82B98E"}),(0,o.jsx)(a.Z,{colorName:"Tetriary",colorValue:"#67A7C1"})]}),"\n",(0,o.jsx)(t.h3,{id:"text",children:"Text"}),"\n",(0,o.jsxs)("div",{style:{display:"flex",flexDirection:"row",flexWrap:"wrap"},children:[(0,o.jsx)(a.Z,{colorName:"Black",colorValue:"#000000"}),(0,o.jsx)(a.Z,{colorName:"Light Black",colorValue:"#404040"}),(0,o.jsx)(a.Z,{colorName:"Grey",colorValue:"#9A9A9A"}),(0,o.jsx)(a.Z,{colorName:"White",colorValue:"#FFFFFF"}),(0,o.jsx)(a.Z,{colorName:"Dark White",colorValue:"#FDFCFF"}),(0,o.jsx)(a.Z,{colorName:"Light Grey",colorValue:"#F5F4F6"})]}),"\n",(0,o.jsx)(t.h3,{id:"status",children:"Status"}),"\n",(0,o.jsxs)("div",{style:{display:"flex",flexDirection:"row",flexWrap:"wrap"},children:[(0,o.jsx)(a.Z,{colorName:"Focused",colorValue:"#654FA6"}),(0,o.jsx)(a.Z,{colorName:"Error",colorValue:"#FF3434"}),(0,o.jsx)(a.Z,{colorName:"Success",colorValue:"#09CE63"}),(0,o.jsx)(a.Z,{colorName:"Disabled Light",colorValue:"#D7D1E9"}),(0,o.jsx)(a.Z,{colorName:"Disabled Dark",colorValue:"#BDBCBF"}),(0,o.jsx)(a.Z,{colorName:"Disabled Light Dark",colorValue:"#F6F6F6"})]})]})}function h(e={}){const{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(p,{...e})}):p(e)}},1e3:(e,t,n)=>{n.d(t,{Z:()=>c});n(7294);var o=n(2920);const s="container_oa4u",r="swatch_yqre",a="colorName_UerQ",i="colorValue_s1yd";var l=n(5893);const c=e=>{let{colorName:t,colorValue:n,border:c="solid"}=e;return(0,l.jsxs)("div",{id:"colorbutton",style:{cursor:"pointer"},onClick:()=>{navigator.clipboard.writeText(n),o.Am.success("Copied to Clipboard!")},className:s,children:[(0,l.jsx)("div",{className:r,style:{backgroundColor:n,border:c,borderWidth:1}}),(0,l.jsxs)("div",{style:{display:"flex",flexDirection:"column"},children:[(0,l.jsx)("p",{className:a,children:t}),(0,l.jsx)("p",{className:i,children:n})]})]})}},1151:(e,t,n)=>{n.d(t,{Z:()=>i,a:()=>a});var o=n(7294);const s={},r=o.createContext(s);function a(e){const t=o.useContext(r);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:a(e.components),o.createElement(r.Provider,{value:t},e.children)}},2920:(e,t,n)=>{n.d(t,{Ix:()=>_,Am:()=>M});var o=n(7294);function s(e){var t,n,o="";if("string"==typeof e||"number"==typeof e)o+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t"number"==typeof e&&!isNaN(e),i=e=>"string"==typeof e,l=e=>"function"==typeof e,c=e=>i(e)||l(e)?e:null,u=e=>(0,o.isValidElement)(e)||i(e)||l(e)||a(e);function d(e){let{enter:t,exit:n,appendPosition:s=!1,collapse:r=!0,collapseDuration:a=300}=e;return function(e){let{children:i,position:l,preventExitTransition:c,done:u,nodeRef:d,isIn:m}=e;const p=s?`${t}--${l}`:t,h=s?`${n}--${l}`:n,f=(0,o.useRef)(0);return(0,o.useLayoutEffect)((()=>{const e=d.current,t=p.split(" "),n=o=>{o.target===d.current&&(e.dispatchEvent(new Event("d")),e.removeEventListener("animationend",n),e.removeEventListener("animationcancel",n),0===f.current&&"animationcancel"!==o.type&&e.classList.remove(...t))};e.classList.add(...t),e.addEventListener("animationend",n),e.addEventListener("animationcancel",n)}),[]),(0,o.useEffect)((()=>{const e=d.current,t=()=>{e.removeEventListener("animationend",t),r?function(e,t,n){void 0===n&&(n=300);const{scrollHeight:o,style:s}=e;requestAnimationFrame((()=>{s.minHeight="initial",s.height=o+"px",s.transition=`all ${n}ms`,requestAnimationFrame((()=>{s.height="0",s.padding="0",s.margin="0",setTimeout(t,n)}))}))}(e,u,a):u()};m||(c?t():(f.current=1,e.className+=` ${h}`,e.addEventListener("animationend",t)))}),[m]),o.createElement(o.Fragment,null,i)}}function m(e,t){return null!=e?{content:e.content,containerId:e.props.containerId,id:e.props.toastId,theme:e.props.theme,type:e.props.type,data:e.props.data||{},isLoading:e.props.isLoading,icon:e.props.icon,status:t}:{}}const p={list:new Map,emitQueue:new Map,on(e,t){return this.list.has(e)||this.list.set(e,[]),this.list.get(e).push(t),this},off(e,t){if(t){const n=this.list.get(e).filter((e=>e!==t));return this.list.set(e,n),this}return this.list.delete(e),this},cancelEmit(e){const t=this.emitQueue.get(e);return t&&(t.forEach(clearTimeout),this.emitQueue.delete(e)),this},emit(e){this.list.has(e)&&this.list.get(e).forEach((t=>{const n=setTimeout((()=>{t(...[].slice.call(arguments,1))}),0);this.emitQueue.has(e)||this.emitQueue.set(e,[]),this.emitQueue.get(e).push(n)}))}},h=e=>{let{theme:t,type:n,...s}=e;return o.createElement("svg",{viewBox:"0 0 24 24",width:"100%",height:"100%",fill:"colored"===t?"currentColor":`var(--toastify-icon-color-${n})`,...s})},f={info:function(e){return o.createElement(h,{...e},o.createElement("path",{d:"M12 0a12 12 0 1012 12A12.013 12.013 0 0012 0zm.25 5a1.5 1.5 0 11-1.5 1.5 1.5 1.5 0 011.5-1.5zm2.25 13.5h-4a1 1 0 010-2h.75a.25.25 0 00.25-.25v-4.5a.25.25 0 00-.25-.25h-.75a1 1 0 010-2h1a2 2 0 012 2v4.75a.25.25 0 00.25.25h.75a1 1 0 110 2z"}))},warning:function(e){return o.createElement(h,{...e},o.createElement("path",{d:"M23.32 17.191L15.438 2.184C14.728.833 13.416 0 11.996 0c-1.42 0-2.733.833-3.443 2.184L.533 17.448a4.744 4.744 0 000 4.368C1.243 23.167 2.555 24 3.975 24h16.05C22.22 24 24 22.044 24 19.632c0-.904-.251-1.746-.68-2.44zm-9.622 1.46c0 1.033-.724 1.823-1.698 1.823s-1.698-.79-1.698-1.822v-.043c0-1.028.724-1.822 1.698-1.822s1.698.79 1.698 1.822v.043zm.039-12.285l-.84 8.06c-.057.581-.408.943-.897.943-.49 0-.84-.367-.896-.942l-.84-8.065c-.057-.624.25-1.095.779-1.095h1.91c.528.005.84.476.784 1.1z"}))},success:function(e){return o.createElement(h,{...e},o.createElement("path",{d:"M12 0a12 12 0 1012 12A12.014 12.014 0 0012 0zm6.927 8.2l-6.845 9.289a1.011 1.011 0 01-1.43.188l-4.888-3.908a1 1 0 111.25-1.562l4.076 3.261 6.227-8.451a1 1 0 111.61 1.183z"}))},error:function(e){return o.createElement(h,{...e},o.createElement("path",{d:"M11.983 0a12.206 12.206 0 00-8.51 3.653A11.8 11.8 0 000 12.207 11.779 11.779 0 0011.8 24h.214A12.111 12.111 0 0024 11.791 11.766 11.766 0 0011.983 0zM10.5 16.542a1.476 1.476 0 011.449-1.53h.027a1.527 1.527 0 011.523 1.47 1.475 1.475 0 01-1.449 1.53h-.027a1.529 1.529 0 01-1.523-1.47zM11 12.5v-6a1 1 0 012 0v6a1 1 0 11-2 0z"}))},spinner:function(){return o.createElement("div",{className:"Toastify__spinner"})}};function g(e){const[,t]=(0,o.useReducer)((e=>e+1),0),[n,s]=(0,o.useState)([]),r=(0,o.useRef)(null),d=(0,o.useRef)(new Map).current,h=e=>-1!==n.indexOf(e),g=(0,o.useRef)({toastKey:1,displayedToast:0,count:0,queue:[],props:e,containerId:null,isToastActive:h,getToast:e=>d.get(e)}).current;function y(e){let{containerId:t}=e;const{limit:n}=g.props;!n||t&&g.containerId!==t||(g.count-=g.queue.length,g.queue=[])}function v(e){s((t=>null==e?[]:t.filter((t=>t!==e))))}function T(){const{toastContent:e,toastProps:t,staleId:n}=g.queue.shift();x(e,t,n)}function E(e,n){let{delay:s,staleId:h,...y}=n;if(!u(e)||function(e){return!r.current||g.props.enableMultiContainer&&e.containerId!==g.props.containerId||d.has(e.toastId)&&null==e.updateId}(y))return;const{toastId:E,updateId:C,data:b}=y,{props:N}=g,_=()=>v(E),I=null==C;I&&g.count++;const j={...N,style:N.toastStyle,key:g.toastKey++,...Object.fromEntries(Object.entries(y).filter((e=>{let[t,n]=e;return null!=n}))),toastId:E,updateId:C,data:b,closeToast:_,isIn:!1,className:c(y.className||N.toastClassName),bodyClassName:c(y.bodyClassName||N.bodyClassName),progressClassName:c(y.progressClassName||N.progressClassName),autoClose:!y.isLoading&&(k=y.autoClose,L=N.autoClose,!1===k||a(k)&&k>0?k:L),deleteToast(){const e=m(d.get(E),"removed");d.delete(E),p.emit(4,e);const n=g.queue.length;if(g.count=null==E?g.count-g.displayedToast:g.count-1,g.count<0&&(g.count=0),n>0){const e=null==E?g.props.limit:1;if(1===n||1===e)g.displayedToast++,T();else{const t=e>n?n:e;g.displayedToast=t;for(let e=0;ee in f)(n)&&(c=f[n](u))),c}(j),l(y.onOpen)&&(j.onOpen=y.onOpen),l(y.onClose)&&(j.onClose=y.onClose),j.closeButton=N.closeButton,!1===y.closeButton||u(y.closeButton)?j.closeButton=y.closeButton:!0===y.closeButton&&(j.closeButton=!u(N.closeButton)||N.closeButton);let O=e;(0,o.isValidElement)(e)&&!i(e.type)?O=(0,o.cloneElement)(e,{closeToast:_,toastProps:j,data:b}):l(e)&&(O=e({closeToast:_,toastProps:j,data:b})),N.limit&&N.limit>0&&g.count>N.limit&&I?g.queue.push({toastContent:O,toastProps:j,staleId:h}):a(s)?setTimeout((()=>{x(O,j,h)}),s):x(O,j,h)}function x(e,t,n){const{toastId:o}=t;n&&d.delete(n);const r={content:e,props:t};d.set(o,r),s((e=>[...e,o].filter((e=>e!==n)))),p.emit(4,m(r,null==r.props.updateId?"added":"updated"))}return(0,o.useEffect)((()=>(g.containerId=e.containerId,p.cancelEmit(3).on(0,E).on(1,(e=>r.current&&v(e))).on(5,y).emit(2,g),()=>{d.clear(),p.emit(3,g)})),[]),(0,o.useEffect)((()=>{g.props=e,g.isToastActive=h,g.displayedToast=n.length})),{getToastToRender:function(t){const n=new Map,o=Array.from(d.values());return e.newestOnTop&&o.reverse(),o.forEach((e=>{const{position:t}=e.props;n.has(t)||n.set(t,[]),n.get(t).push(e)})),Array.from(n,(e=>t(e[0],e[1])))},containerRef:r,isToastActive:h}}function y(e){return e.targetTouches&&e.targetTouches.length>=1?e.targetTouches[0].clientX:e.clientX}function v(e){return e.targetTouches&&e.targetTouches.length>=1?e.targetTouches[0].clientY:e.clientY}function T(e){const[t,n]=(0,o.useState)(!1),[s,r]=(0,o.useState)(!1),a=(0,o.useRef)(null),i=(0,o.useRef)({start:0,x:0,y:0,delta:0,removalDistance:0,canCloseOnClick:!0,canDrag:!1,boundingRect:null,didMove:!1}).current,c=(0,o.useRef)(e),{autoClose:u,pauseOnHover:d,closeToast:m,onClick:p,closeOnClick:h}=e;function f(t){if(e.draggable){"touchstart"===t.nativeEvent.type&&t.nativeEvent.preventDefault(),i.didMove=!1,document.addEventListener("mousemove",x),document.addEventListener("mouseup",C),document.addEventListener("touchmove",x),document.addEventListener("touchend",C);const n=a.current;i.canCloseOnClick=!0,i.canDrag=!0,i.boundingRect=n.getBoundingClientRect(),n.style.transition="",i.x=y(t.nativeEvent),i.y=v(t.nativeEvent),"x"===e.draggableDirection?(i.start=i.x,i.removalDistance=n.offsetWidth*(e.draggablePercent/100)):(i.start=i.y,i.removalDistance=n.offsetHeight*(80===e.draggablePercent?1.5*e.draggablePercent:e.draggablePercent/100))}}function g(t){if(i.boundingRect){const{top:n,bottom:o,left:s,right:r}=i.boundingRect;"touchend"!==t.nativeEvent.type&&e.pauseOnHover&&i.x>=s&&i.x<=r&&i.y>=n&&i.y<=o?E():T()}}function T(){n(!0)}function E(){n(!1)}function x(n){const o=a.current;i.canDrag&&o&&(i.didMove=!0,t&&E(),i.x=y(n),i.y=v(n),i.delta="x"===e.draggableDirection?i.x-i.start:i.y-i.start,i.start!==i.x&&(i.canCloseOnClick=!1),o.style.transform=`translate${e.draggableDirection}(${i.delta}px)`,o.style.opacity=""+(1-Math.abs(i.delta/i.removalDistance)))}function C(){document.removeEventListener("mousemove",x),document.removeEventListener("mouseup",C),document.removeEventListener("touchmove",x),document.removeEventListener("touchend",C);const t=a.current;if(i.canDrag&&i.didMove&&t){if(i.canDrag=!1,Math.abs(i.delta)>i.removalDistance)return r(!0),void e.closeToast();t.style.transition="transform 0.2s, opacity 0.2s",t.style.transform=`translate${e.draggableDirection}(0)`,t.style.opacity="1"}}(0,o.useEffect)((()=>{c.current=e})),(0,o.useEffect)((()=>(a.current&&a.current.addEventListener("d",T,{once:!0}),l(e.onOpen)&&e.onOpen((0,o.isValidElement)(e.children)&&e.children.props),()=>{const e=c.current;l(e.onClose)&&e.onClose((0,o.isValidElement)(e.children)&&e.children.props)})),[]),(0,o.useEffect)((()=>(e.pauseOnFocusLoss&&(document.hasFocus()||E(),window.addEventListener("focus",T),window.addEventListener("blur",E)),()=>{e.pauseOnFocusLoss&&(window.removeEventListener("focus",T),window.removeEventListener("blur",E))})),[e.pauseOnFocusLoss]);const b={onMouseDown:f,onTouchStart:f,onMouseUp:g,onTouchEnd:g};return u&&d&&(b.onMouseEnter=E,b.onMouseLeave=T),h&&(b.onClick=e=>{p&&p(e),i.canCloseOnClick&&m()}),{playToast:T,pauseToast:E,isRunning:t,preventExitTransition:s,toastRef:a,eventHandlers:b}}function E(e){let{closeToast:t,theme:n,ariaLabel:s="close"}=e;return o.createElement("button",{className:`Toastify__close-button Toastify__close-button--${n}`,type:"button",onClick:e=>{e.stopPropagation(),t(e)},"aria-label":s},o.createElement("svg",{"aria-hidden":"true",viewBox:"0 0 14 16"},o.createElement("path",{fillRule:"evenodd",d:"M7.71 8.23l3.75 3.75-1.48 1.48-3.75-3.75-3.75 3.75L1 11.98l3.75-3.75L1 4.48 2.48 3l3.75 3.75L9.98 3l1.48 1.48-3.75 3.75z"})))}function x(e){let{delay:t,isRunning:n,closeToast:s,type:a="default",hide:i,className:c,style:u,controlledProgress:d,progress:m,rtl:p,isIn:h,theme:f}=e;const g=i||d&&0===m,y={...u,animationDuration:`${t}ms`,animationPlayState:n?"running":"paused",opacity:g?0:1};d&&(y.transform=`scaleX(${m})`);const v=r("Toastify__progress-bar",d?"Toastify__progress-bar--controlled":"Toastify__progress-bar--animated",`Toastify__progress-bar-theme--${f}`,`Toastify__progress-bar--${a}`,{"Toastify__progress-bar--rtl":p}),T=l(c)?c({rtl:p,type:a,defaultClassName:v}):r(v,c);return o.createElement("div",{role:"progressbar","aria-hidden":g?"true":"false","aria-label":"notification timer",className:T,style:y,[d&&m>=1?"onTransitionEnd":"onAnimationEnd"]:d&&m<1?null:()=>{h&&s()}})}const C=e=>{const{isRunning:t,preventExitTransition:n,toastRef:s,eventHandlers:a}=T(e),{closeButton:i,children:c,autoClose:u,onClick:d,type:m,hideProgressBar:p,closeToast:h,transition:f,position:g,className:y,style:v,bodyClassName:C,bodyStyle:b,progressClassName:N,progressStyle:_,updateId:I,role:j,progress:k,rtl:L,toastId:O,deleteToast:w,isIn:F,isLoading:A,iconOut:D,closeOnClick:M,theme:R}=e,P=r("Toastify__toast",`Toastify__toast-theme--${R}`,`Toastify__toast--${m}`,{"Toastify__toast--rtl":L},{"Toastify__toast--close-on-click":M}),B=l(y)?y({rtl:L,position:g,type:m,defaultClassName:P}):r(P,y),V=!!k||!u,$={closeToast:h,type:m,theme:R};let Z=null;return!1===i||(Z=l(i)?i($):(0,o.isValidElement)(i)?(0,o.cloneElement)(i,$):E($)),o.createElement(f,{isIn:F,done:w,position:g,preventExitTransition:n,nodeRef:s},o.createElement("div",{id:O,onClick:d,className:B,...a,style:v,ref:s},o.createElement("div",{...F&&{role:j},className:l(C)?C({type:m}):r("Toastify__toast-body",C),style:b},null!=D&&o.createElement("div",{className:r("Toastify__toast-icon",{"Toastify--animate-icon Toastify__zoom-enter":!A})},D),o.createElement("div",null,c)),Z,o.createElement(x,{...I&&!V?{key:`pb-${I}`}:{},rtl:L,theme:R,delay:u,isRunning:t,isIn:F,closeToast:h,hide:p,type:m,style:_,className:N,controlledProgress:V,progress:k||0})))},b=function(e,t){return void 0===t&&(t=!1),{enter:`Toastify--animate Toastify__${e}-enter`,exit:`Toastify--animate Toastify__${e}-exit`,appendPosition:t}},N=d(b("bounce",!0)),_=(d(b("slide",!0)),d(b("zoom")),d(b("flip")),(0,o.forwardRef)(((e,t)=>{const{getToastToRender:n,containerRef:s,isToastActive:a}=g(e),{className:i,style:u,rtl:d,containerId:m}=e;function p(e){const t=r("Toastify__toast-container",`Toastify__toast-container--${e}`,{"Toastify__toast-container--rtl":d});return l(i)?i({position:e,rtl:d,defaultClassName:t}):r(t,c(i))}return(0,o.useEffect)((()=>{t&&(t.current=s.current)}),[]),o.createElement("div",{ref:s,className:"Toastify",id:m},n(((e,t)=>{const n=t.length?{...u}:{...u,pointerEvents:"none"};return o.createElement("div",{className:p(e),style:n,key:`container-${e}`},t.map(((e,n)=>{let{content:s,props:r}=e;return o.createElement(C,{...r,isIn:a(r.toastId),style:{...r.style,"--nth":n+1,"--len":t.length},key:`toast-${r.key}`},s)})))})))})));_.displayName="ToastContainer",_.defaultProps={position:"top-right",transition:N,autoClose:5e3,closeButton:E,pauseOnHover:!0,pauseOnFocusLoss:!0,closeOnClick:!0,draggable:!0,draggablePercent:80,draggableDirection:"x",role:"alert",theme:"light"};let I,j=new Map,k=[],L=1;function O(){return""+L++}function w(e){return e&&(i(e.toastId)||a(e.toastId))?e.toastId:O()}function F(e,t){return j.size>0?p.emit(0,e,t):k.push({content:e,options:t}),t.toastId}function A(e,t){return{...t,type:t&&t.type||e,toastId:w(t)}}function D(e){return(t,n)=>F(t,A(e,n))}function M(e,t){return F(e,A("default",t))}M.loading=(e,t)=>F(e,A("default",{isLoading:!0,autoClose:!1,closeOnClick:!1,closeButton:!1,draggable:!1,...t})),M.promise=function(e,t,n){let o,{pending:s,error:r,success:a}=t;s&&(o=i(s)?M.loading(s,n):M.loading(s.render,{...n,...s}));const c={isLoading:null,autoClose:null,closeOnClick:null,closeButton:null,draggable:null},u=(e,t,s)=>{if(null==t)return void M.dismiss(o);const r={type:e,...c,...n,data:s},a=i(t)?{render:t}:t;return o?M.update(o,{...r,...a}):M(a.render,{...r,...a}),s},d=l(e)?e():e;return d.then((e=>u("success",a,e))).catch((e=>u("error",r,e))),d},M.success=D("success"),M.info=D("info"),M.error=D("error"),M.warning=D("warning"),M.warn=M.warning,M.dark=(e,t)=>F(e,A("default",{theme:"dark",...t})),M.dismiss=e=>{j.size>0?p.emit(1,e):k=k.filter((t=>null!=e&&t.options.toastId!==e))},M.clearWaitingQueue=function(e){return void 0===e&&(e={}),p.emit(5,e)},M.isActive=e=>{let t=!1;return j.forEach((n=>{n.isToastActive&&n.isToastActive(e)&&(t=!0)})),t},M.update=function(e,t){void 0===t&&(t={}),setTimeout((()=>{const n=function(e,t){let{containerId:n}=t;const o=j.get(n||I);return o&&o.getToast(e)}(e,t);if(n){const{props:o,content:s}=n,r={delay:100,...o,...t,toastId:t.toastId||e,updateId:O()};r.toastId!==e&&(r.staleId=e);const a=r.render||s;delete r.render,F(a,r)}}),0)},M.done=e=>{M.update(e,{progress:1})},M.onChange=e=>(p.on(4,e),()=>{p.off(4,e)}),M.POSITION={TOP_LEFT:"top-left",TOP_RIGHT:"top-right",TOP_CENTER:"top-center",BOTTOM_LEFT:"bottom-left",BOTTOM_RIGHT:"bottom-right",BOTTOM_CENTER:"bottom-center"},M.TYPE={INFO:"info",SUCCESS:"success",WARNING:"warning",ERROR:"error",DEFAULT:"default"},p.on(2,(e=>{I=e.containerId||e,j.set(I,e),k.forEach((e=>{p.emit(0,e.content,e.options)})),k=[]})).on(3,(e=>{j.delete(e.containerId||e),0===j.size&&p.off(0).off(1).off(5)}))}}]); \ No newline at end of file diff --git a/assets/js/3899bbcc.3a70016b.js b/assets/js/3899bbcc.91a65b3f.js similarity index 97% rename from assets/js/3899bbcc.3a70016b.js rename to assets/js/3899bbcc.91a65b3f.js index d027208..98d944d 100644 --- a/assets/js/3899bbcc.3a70016b.js +++ b/assets/js/3899bbcc.91a65b3f.js @@ -1 +1 @@ -"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[3605],{7758:(n,e,t)=>{t.r(e),t.d(e,{assets:()=>s,contentTitle:()=>a,default:()=>h,frontMatter:()=>r,metadata:()=>p,toc:()=>d});var i=t(5893),o=t(1151);const r={sidebar_position:3},a="Typography",p={id:"doc/Typography",title:"Typography",description:"Applying typography",source:"@site/versioned_docs/version-1.x/doc/Typography.md",sourceDirName:"doc",slug:"/doc/Typography",permalink:"/react-native-kitra/docs/doc/Typography",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/versioned_docs/version-1.x/doc/Typography.md",tags:[],version:"1.x",lastUpdatedAt:1707292585,formattedLastUpdatedAt:"Feb 7, 2024",sidebarPosition:3,frontMatter:{sidebar_position:3},sidebar:"DocSidebar",previous:{title:"Theme",permalink:"/react-native-kitra/docs/doc/Theme"}},s={},d=[{value:"Applying typography",id:"applying-typography",level:2},{value:"Accessing and updating typography",id:"accessing-and-updating-typography",level:2}];function l(n){const e={code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",strong:"strong",...(0,o.a)(),...n.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(e.h1,{id:"typography",children:"Typography"}),"\n",(0,i.jsx)(e.h2,{id:"applying-typography",children:"Applying typography"}),"\n",(0,i.jsx)(e.p,{children:"To use typography, you need to wrap the root component with provider."}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-jsx",children:"import { KitraProvider } from '@tra-tech/react-native-kitra';\nimport App from './src/App';\n\nexport default function Main() {\n return (\n \n \n \n );\n}\n"})}),"\n",(0,i.jsx)(e.h2,{id:"accessing-and-updating-typography",children:"Accessing and updating typography"}),"\n",(0,i.jsx)(e.p,{children:"Once you've wrapped your app with the provider, you can access the typography styles using the useTypography hook."}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-js",children:"import { useTypography } from 'react';\n\nconst myTypography= {\n heading: {\n h1: {\n fontSize: 15,\n lineHeight: 30,\n fontFamily: 'poppins-medium',\n }\n },\n body: {\n regular: {\n fontSize: 10,\n lineHeight: 12,\n fontFamily: 'medium',\n },\n otherTypo: {\n fontSize: 12,\n lineHeight: 16,\n }\n },\n otherTypo: {\n fontSize: 12,\n lineHeight: 16,\n }\n }\n\nfunction MyComponent() {\n const { typography, updateTypography } = useTypography();\n\n useEffect(() => {\n updateTypography(myTypography)\n }, []);\n return (\n \n \n This text is styled with the regular body font style.\n \n \n );\n}\n"})}),"\n",(0,i.jsx)(e.p,{children:(0,i.jsx)(e.strong,{children:"Heading:"})}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-js",children:" heading: {\n h1: {\n fontSize: 30,\n lineHeight: 45,\n fontFamily: 'medium',\n },\n h2: {\n fontSize: 28,\n lineHeight: 42,\n fontFamily: 'medium',\n },\n h3: {\n fontSize: 23,\n lineHeight: 35,\n fontFamily: 'medium',\n },\n h4: {\n fontSize: 19,\n lineHeight: 29,\n fontFamily: 'medium',\n },\n h5: {\n fontSize: 16,\n lineHeight: 25,\n fontFamily: 'medium',\n },\n },\n"})}),"\n",(0,i.jsx)(e.p,{children:(0,i.jsx)(e.strong,{children:"Body:"})}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-js",children:" body: {\n regular: {\n fontSize: 14,\n lineHeight: 16,\n fontFamily: 'regular',\n },\n sregular: {\n fontSize: 12,\n lineHeight: 16,\n fontFamily: 'regular',\n },\n xsregular: {\n fontSize: 10,\n lineHeight: 14,\n fontFamily: 'regular',\n },\n xxsregular: {\n fontSize: 8,\n lineHeight: 12,\n fontFamily: 'regular',\n },\n medium: {\n fontSize: 14,\n lineHeight: 21,\n fontFamily: 'medium',\n },\n smedium: {\n fontSize: 12,\n lineHeight: 18,\n fontFamily: 'medium',\n },\n xsmedium: {\n fontSize: 10,\n lineHeight: 16,\n fontFamily: 'medium',\n },\n xxsmedium: {\n fontSize: 8,\n lineHeight: 12,\n fontFamily: 'medium',\n },\n },\n\n"})})]})}function h(n={}){const{wrapper:e}={...(0,o.a)(),...n.components};return e?(0,i.jsx)(e,{...n,children:(0,i.jsx)(l,{...n})}):l(n)}},1151:(n,e,t)=>{t.d(e,{Z:()=>p,a:()=>a});var i=t(7294);const o={},r=i.createContext(o);function a(n){const e=i.useContext(r);return i.useMemo((function(){return"function"==typeof n?n(e):{...e,...n}}),[e,n])}function p(n){let e;return e=n.disableParentContext?"function"==typeof n.components?n.components(o):n.components||o:a(n.components),i.createElement(r.Provider,{value:e},n.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[3605],{7758:(n,e,t)=>{t.r(e),t.d(e,{assets:()=>s,contentTitle:()=>a,default:()=>h,frontMatter:()=>r,metadata:()=>p,toc:()=>d});var i=t(5893),o=t(1151);const r={sidebar_position:3},a="Typography",p={id:"doc/Typography",title:"Typography",description:"Applying typography",source:"@site/versioned_docs/version-1.x/doc/Typography.md",sourceDirName:"doc",slug:"/doc/Typography",permalink:"/react-native-kitra/docs/doc/Typography",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/versioned_docs/version-1.x/doc/Typography.md",tags:[],version:"1.x",lastUpdatedAt:1709646294,formattedLastUpdatedAt:"Mar 5, 2024",sidebarPosition:3,frontMatter:{sidebar_position:3},sidebar:"DocSidebar",previous:{title:"Theme",permalink:"/react-native-kitra/docs/doc/Theme"}},s={},d=[{value:"Applying typography",id:"applying-typography",level:2},{value:"Accessing and updating typography",id:"accessing-and-updating-typography",level:2}];function l(n){const e={code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",strong:"strong",...(0,o.a)(),...n.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(e.h1,{id:"typography",children:"Typography"}),"\n",(0,i.jsx)(e.h2,{id:"applying-typography",children:"Applying typography"}),"\n",(0,i.jsx)(e.p,{children:"To use typography, you need to wrap the root component with provider."}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-jsx",children:"import { KitraProvider } from '@tra-tech/react-native-kitra';\nimport App from './src/App';\n\nexport default function Main() {\n return (\n \n \n \n );\n}\n"})}),"\n",(0,i.jsx)(e.h2,{id:"accessing-and-updating-typography",children:"Accessing and updating typography"}),"\n",(0,i.jsx)(e.p,{children:"Once you've wrapped your app with the provider, you can access the typography styles using the useTypography hook."}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-js",children:"import { useTypography } from 'react';\n\nconst myTypography= {\n heading: {\n h1: {\n fontSize: 15,\n lineHeight: 30,\n fontFamily: 'poppins-medium',\n }\n },\n body: {\n regular: {\n fontSize: 10,\n lineHeight: 12,\n fontFamily: 'medium',\n },\n otherTypo: {\n fontSize: 12,\n lineHeight: 16,\n }\n },\n otherTypo: {\n fontSize: 12,\n lineHeight: 16,\n }\n }\n\nfunction MyComponent() {\n const { typography, updateTypography } = useTypography();\n\n useEffect(() => {\n updateTypography(myTypography)\n }, []);\n return (\n \n \n This text is styled with the regular body font style.\n \n \n );\n}\n"})}),"\n",(0,i.jsx)(e.p,{children:(0,i.jsx)(e.strong,{children:"Heading:"})}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-js",children:" heading: {\n h1: {\n fontSize: 30,\n lineHeight: 45,\n fontFamily: 'medium',\n },\n h2: {\n fontSize: 28,\n lineHeight: 42,\n fontFamily: 'medium',\n },\n h3: {\n fontSize: 23,\n lineHeight: 35,\n fontFamily: 'medium',\n },\n h4: {\n fontSize: 19,\n lineHeight: 29,\n fontFamily: 'medium',\n },\n h5: {\n fontSize: 16,\n lineHeight: 25,\n fontFamily: 'medium',\n },\n },\n"})}),"\n",(0,i.jsx)(e.p,{children:(0,i.jsx)(e.strong,{children:"Body:"})}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-js",children:" body: {\n regular: {\n fontSize: 14,\n lineHeight: 16,\n fontFamily: 'regular',\n },\n sregular: {\n fontSize: 12,\n lineHeight: 16,\n fontFamily: 'regular',\n },\n xsregular: {\n fontSize: 10,\n lineHeight: 14,\n fontFamily: 'regular',\n },\n xxsregular: {\n fontSize: 8,\n lineHeight: 12,\n fontFamily: 'regular',\n },\n medium: {\n fontSize: 14,\n lineHeight: 21,\n fontFamily: 'medium',\n },\n smedium: {\n fontSize: 12,\n lineHeight: 18,\n fontFamily: 'medium',\n },\n xsmedium: {\n fontSize: 10,\n lineHeight: 16,\n fontFamily: 'medium',\n },\n xxsmedium: {\n fontSize: 8,\n lineHeight: 12,\n fontFamily: 'medium',\n },\n },\n\n"})})]})}function h(n={}){const{wrapper:e}={...(0,o.a)(),...n.components};return e?(0,i.jsx)(e,{...n,children:(0,i.jsx)(l,{...n})}):l(n)}},1151:(n,e,t)=>{t.d(e,{Z:()=>p,a:()=>a});var i=t(7294);const o={},r=i.createContext(o);function a(n){const e=i.useContext(r);return i.useMemo((function(){return"function"==typeof n?n(e):{...e,...n}}),[e,n])}function p(n){let e;return e=n.disableParentContext?"function"==typeof n.components?n.components(o):n.components||o:a(n.components),i.createElement(r.Provider,{value:e},n.children)}}}]); \ No newline at end of file diff --git a/assets/js/54239609.609473df.js b/assets/js/54239609.1cfa7ce7.js similarity index 98% rename from assets/js/54239609.609473df.js rename to assets/js/54239609.1cfa7ce7.js index a40eec0..40cd40f 100644 --- a/assets/js/54239609.609473df.js +++ b/assets/js/54239609.1cfa7ce7.js @@ -1 +1 @@ -"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[3769],{5225:(e,t,r)=>{r.r(t),r.d(t,{assets:()=>c,contentTitle:()=>s,default:()=>h,frontMatter:()=>n,metadata:()=>o,toc:()=>l});var i=r(5893),d=r(1151);const n={sidebar_position:8},s="Divider",o={id:"components/divider",title:"Divider",description:"The Divider is a thin, lightweight separator that groups content in lists and page layouts.",source:"@site/versioned_docs/version-1.x/components/divider.md",sourceDirName:"components",slug:"/components/divider",permalink:"/react-native-kitra/docs/components/divider",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/versioned_docs/version-1.x/components/divider.md",tags:[],version:"1.x",lastUpdatedAt:1707292585,formattedLastUpdatedAt:"Feb 7, 2024",sidebarPosition:8,frontMatter:{sidebar_position:8},sidebar:"ComponentsSidebar",previous:{title:"Chip",permalink:"/react-native-kitra/docs/components/chip"},next:{title:"Dropdown",permalink:"/react-native-kitra/docs/components/dropdown"}},c={},l=[{value:"Import",id:"import",level:3},{value:"Usage",id:"usage",level:3},{value:"Props",id:"props",level:3}];function a(e){const t={a:"a",code:"code",h1:"h1",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,d.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.h1,{id:"divider",children:"Divider"}),"\n",(0,i.jsxs)(t.p,{children:["The ",(0,i.jsx)(t.strong,{children:"Divider"})," is a thin, lightweight separator that groups content in lists and page layouts."]}),"\n",(0,i.jsx)(t.h3,{id:"import",children:"Import"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-js",children:"import { Divider } from '@tra-tech/react-native-kitra';\n"})}),"\n",(0,i.jsx)(t.h3,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-js",children:'import { Divider } from \'@tra-tech/react-native-kitra\';\nimport { View } from \'react-native\';\n\nconst App = () => (\n \n \n \n \n \n);\n\nexport default App;\n'})}),"\n",(0,i.jsx)(t.h3,{id:"props",children:"Props"}),"\n",(0,i.jsxs)(t.table,{children:[(0,i.jsx)(t.thead,{children:(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.th,{children:"Prop name"}),(0,i.jsx)(t.th,{children:"Type"}),(0,i.jsx)(t.th,{children:"Required"}),(0,i.jsx)(t.th,{children:"Description"})]})}),(0,i.jsxs)(t.tbody,{children:[(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{children:"borderStyle"}),(0,i.jsx)(t.td,{children:(0,i.jsx)("code",{children:"'solid' | 'dotted' | 'dashed' "})}),(0,i.jsx)(t.td,{children:"No"}),(0,i.jsxs)(t.td,{children:["Additional styles to apply to the divider border style. Default value: ",(0,i.jsx)(t.code,{children:"'solid'"})]})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{children:"width"}),(0,i.jsx)(t.td,{children:(0,i.jsx)(t.code,{children:"number"})}),(0,i.jsx)(t.td,{children:"No"}),(0,i.jsxs)(t.td,{children:["Width of divider. Default value: ",(0,i.jsx)(t.code,{children:"'100%'"})]})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{children:"color"}),(0,i.jsx)(t.td,{children:(0,i.jsx)(t.code,{children:"string"})}),(0,i.jsx)(t.td,{children:"No"}),(0,i.jsx)(t.td,{children:"Color of divider."})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{children:"style"}),(0,i.jsx)(t.td,{children:(0,i.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,i.jsx)(t.code,{children:"StyleProp"})})}),(0,i.jsx)(t.td,{children:"No"}),(0,i.jsx)(t.td,{children:"Additional styles to apply to the divider."})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{children:"theme"}),(0,i.jsx)(t.td,{children:(0,i.jsx)(t.code,{children:"UITheme "})}),(0,i.jsx)(t.td,{children:"No"}),(0,i.jsx)(t.td,{children:"The UI theme to use for the component."})]})]})]})]})}function h(e={}){const{wrapper:t}={...(0,d.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(a,{...e})}):a(e)}},1151:(e,t,r)=>{r.d(t,{Z:()=>o,a:()=>s});var i=r(7294);const d={},n=i.createContext(d);function s(e){const t=i.useContext(n);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(d):e.components||d:s(e.components),i.createElement(n.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[3769],{5225:(e,t,r)=>{r.r(t),r.d(t,{assets:()=>c,contentTitle:()=>s,default:()=>h,frontMatter:()=>n,metadata:()=>o,toc:()=>l});var i=r(5893),d=r(1151);const n={sidebar_position:8},s="Divider",o={id:"components/divider",title:"Divider",description:"The Divider is a thin, lightweight separator that groups content in lists and page layouts.",source:"@site/versioned_docs/version-1.x/components/divider.md",sourceDirName:"components",slug:"/components/divider",permalink:"/react-native-kitra/docs/components/divider",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/versioned_docs/version-1.x/components/divider.md",tags:[],version:"1.x",lastUpdatedAt:1709646294,formattedLastUpdatedAt:"Mar 5, 2024",sidebarPosition:8,frontMatter:{sidebar_position:8},sidebar:"ComponentsSidebar",previous:{title:"Chip",permalink:"/react-native-kitra/docs/components/chip"},next:{title:"Dropdown",permalink:"/react-native-kitra/docs/components/dropdown"}},c={},l=[{value:"Import",id:"import",level:3},{value:"Usage",id:"usage",level:3},{value:"Props",id:"props",level:3}];function a(e){const t={a:"a",code:"code",h1:"h1",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,d.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.h1,{id:"divider",children:"Divider"}),"\n",(0,i.jsxs)(t.p,{children:["The ",(0,i.jsx)(t.strong,{children:"Divider"})," is a thin, lightweight separator that groups content in lists and page layouts."]}),"\n",(0,i.jsx)(t.h3,{id:"import",children:"Import"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-js",children:"import { Divider } from '@tra-tech/react-native-kitra';\n"})}),"\n",(0,i.jsx)(t.h3,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-js",children:'import { Divider } from \'@tra-tech/react-native-kitra\';\nimport { View } from \'react-native\';\n\nconst App = () => (\n \n \n \n \n \n);\n\nexport default App;\n'})}),"\n",(0,i.jsx)(t.h3,{id:"props",children:"Props"}),"\n",(0,i.jsxs)(t.table,{children:[(0,i.jsx)(t.thead,{children:(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.th,{children:"Prop name"}),(0,i.jsx)(t.th,{children:"Type"}),(0,i.jsx)(t.th,{children:"Required"}),(0,i.jsx)(t.th,{children:"Description"})]})}),(0,i.jsxs)(t.tbody,{children:[(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{children:"borderStyle"}),(0,i.jsx)(t.td,{children:(0,i.jsx)("code",{children:"'solid' | 'dotted' | 'dashed' "})}),(0,i.jsx)(t.td,{children:"No"}),(0,i.jsxs)(t.td,{children:["Additional styles to apply to the divider border style. Default value: ",(0,i.jsx)(t.code,{children:"'solid'"})]})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{children:"width"}),(0,i.jsx)(t.td,{children:(0,i.jsx)(t.code,{children:"number"})}),(0,i.jsx)(t.td,{children:"No"}),(0,i.jsxs)(t.td,{children:["Width of divider. Default value: ",(0,i.jsx)(t.code,{children:"'100%'"})]})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{children:"color"}),(0,i.jsx)(t.td,{children:(0,i.jsx)(t.code,{children:"string"})}),(0,i.jsx)(t.td,{children:"No"}),(0,i.jsx)(t.td,{children:"Color of divider."})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{children:"style"}),(0,i.jsx)(t.td,{children:(0,i.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,i.jsx)(t.code,{children:"StyleProp"})})}),(0,i.jsx)(t.td,{children:"No"}),(0,i.jsx)(t.td,{children:"Additional styles to apply to the divider."})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{children:"theme"}),(0,i.jsx)(t.td,{children:(0,i.jsx)(t.code,{children:"UITheme "})}),(0,i.jsx)(t.td,{children:"No"}),(0,i.jsx)(t.td,{children:"The UI theme to use for the component."})]})]})]})]})}function h(e={}){const{wrapper:t}={...(0,d.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(a,{...e})}):a(e)}},1151:(e,t,r)=>{r.d(t,{Z:()=>o,a:()=>s});var i=r(7294);const d={},n=i.createContext(d);function s(e){const t=i.useContext(n);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(d):e.components||d:s(e.components),i.createElement(n.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/559b7fc6.648b9483.js b/assets/js/559b7fc6.74e9cb20.js similarity index 98% rename from assets/js/559b7fc6.648b9483.js rename to assets/js/559b7fc6.74e9cb20.js index f0d50f6..88bed84 100644 --- a/assets/js/559b7fc6.648b9483.js +++ b/assets/js/559b7fc6.74e9cb20.js @@ -1 +1 @@ -"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[377],{6153:(e,r,t)=>{t.r(r),t.d(r,{assets:()=>d,contentTitle:()=>a,default:()=>p,frontMatter:()=>o,metadata:()=>i,toc:()=>c});var s=t(5893),n=t(1151);const o={sidebar_position:15},a="Progress Bar",i={id:"components/progress-bar",title:"Progress Bar",description:"The ProgressBar component is a visual indicator of a progress. It displays a progress bar with a color that can be customized. The progress bar will animate and fill up based on the progress passed in as a percentage value.",source:"@site/docs/components/progress-bar.md",sourceDirName:"components",slug:"/components/progress-bar",permalink:"/react-native-kitra/docs/next/components/progress-bar",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/docs/components/progress-bar.md",tags:[],version:"current",lastUpdatedAt:1707292585,formattedLastUpdatedAt:"Feb 7, 2024",sidebarPosition:15,frontMatter:{sidebar_position:15},sidebar:"ComponentsSidebar",previous:{title:"Pagerview",permalink:"/react-native-kitra/docs/next/components/pagerview"},next:{title:"Radio Button",permalink:"/react-native-kitra/docs/next/components/radio-button"}},d={},c=[{value:"Import",id:"import",level:3},{value:"Usage",id:"usage",level:3},{value:"Props",id:"props",level:3}];function l(e){const r={a:"a",code:"code",h1:"h1",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,n.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(r.h1,{id:"progress-bar",children:"Progress Bar"}),"\n",(0,s.jsxs)(r.p,{children:["The ",(0,s.jsx)(r.strong,{children:"ProgressBar"})," component is a visual indicator of a progress. It displays a progress bar with a color that can be customized. The progress bar will animate and fill up based on the progress passed in as a percentage value."]}),"\n",(0,s.jsx)(r.h3,{id:"import",children:"Import"}),"\n",(0,s.jsx)(r.pre,{children:(0,s.jsx)(r.code,{className:"language-js",children:"import { ProgressBar } from '@tra-tech/react-native-kitra';\n"})}),"\n",(0,s.jsx)(r.h3,{id:"usage",children:"Usage"}),"\n",(0,s.jsx)(r.pre,{children:(0,s.jsx)(r.code,{className:"language-js",children:"import { ProgressBar } from '@tra-tech/react-native-kitra';\nimport { View, StyleSheet } from 'react-native';\n\nconst App = () => (\n \n \n \n \n);\n\nconst style = StyleSheet.create({\n container: { flex: 1, justifyContent: 'center', rowGap: 50 },\n});\n\nexport default App;\n\n"})}),"\n",(0,s.jsx)(r.h3,{id:"props",children:"Props"}),"\n",(0,s.jsxs)(r.table,{children:[(0,s.jsx)(r.thead,{children:(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.th,{children:"Prop Name"}),(0,s.jsx)(r.th,{children:"Type"}),(0,s.jsx)(r.th,{children:"Required"}),(0,s.jsx)(r.th,{children:"Description"})]})}),(0,s.jsxs)(r.tbody,{children:[(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{children:"progress"}),(0,s.jsx)(r.td,{children:(0,s.jsx)(r.code,{children:"number"})}),(0,s.jsx)(r.td,{children:"No"}),(0,s.jsxs)(r.td,{children:["The progress value as a percentage. Default value: ",(0,s.jsx)(r.code,{children:"0"}),"."]})]}),(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{children:"barColor"}),(0,s.jsx)(r.td,{children:(0,s.jsx)(r.code,{children:"string"})}),(0,s.jsx)(r.td,{children:"No"}),(0,s.jsx)(r.td,{children:"The background color of the progress bar."})]}),(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{children:"progressColor"}),(0,s.jsx)(r.td,{children:(0,s.jsx)(r.code,{children:"string"})}),(0,s.jsx)(r.td,{children:"No"}),(0,s.jsx)(r.td,{children:"The color of the progress bar."})]}),(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{children:"progressStyle"}),(0,s.jsx)(r.td,{children:(0,s.jsx)(r.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,s.jsx)(r.code,{children:"StyleProp"})})}),(0,s.jsx)(r.td,{children:"No"}),(0,s.jsx)(r.td,{children:"Style object to be applied to the progress bar."})]}),(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{children:"theme"}),(0,s.jsx)(r.td,{children:(0,s.jsx)(r.code,{children:"UITheme"})}),(0,s.jsx)(r.td,{children:"No"}),(0,s.jsx)(r.td,{children:"The theme to use for the component."})]})]})]})]})}function p(e={}){const{wrapper:r}={...(0,n.a)(),...e.components};return r?(0,s.jsx)(r,{...e,children:(0,s.jsx)(l,{...e})}):l(e)}},1151:(e,r,t)=>{t.d(r,{Z:()=>i,a:()=>a});var s=t(7294);const n={},o=s.createContext(n);function a(e){const r=s.useContext(o);return s.useMemo((function(){return"function"==typeof e?e(r):{...r,...e}}),[r,e])}function i(e){let r;return r=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:a(e.components),s.createElement(o.Provider,{value:r},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[377],{6153:(e,r,t)=>{t.r(r),t.d(r,{assets:()=>d,contentTitle:()=>a,default:()=>p,frontMatter:()=>o,metadata:()=>i,toc:()=>c});var s=t(5893),n=t(1151);const o={sidebar_position:15},a="Progress Bar",i={id:"components/progress-bar",title:"Progress Bar",description:"The ProgressBar component is a visual indicator of a progress. It displays a progress bar with a color that can be customized. The progress bar will animate and fill up based on the progress passed in as a percentage value.",source:"@site/docs/components/progress-bar.md",sourceDirName:"components",slug:"/components/progress-bar",permalink:"/react-native-kitra/docs/next/components/progress-bar",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/docs/components/progress-bar.md",tags:[],version:"current",lastUpdatedAt:1709646294,formattedLastUpdatedAt:"Mar 5, 2024",sidebarPosition:15,frontMatter:{sidebar_position:15},sidebar:"ComponentsSidebar",previous:{title:"Pagerview",permalink:"/react-native-kitra/docs/next/components/pagerview"},next:{title:"Radio Button",permalink:"/react-native-kitra/docs/next/components/radio-button"}},d={},c=[{value:"Import",id:"import",level:3},{value:"Usage",id:"usage",level:3},{value:"Props",id:"props",level:3}];function l(e){const r={a:"a",code:"code",h1:"h1",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,n.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(r.h1,{id:"progress-bar",children:"Progress Bar"}),"\n",(0,s.jsxs)(r.p,{children:["The ",(0,s.jsx)(r.strong,{children:"ProgressBar"})," component is a visual indicator of a progress. It displays a progress bar with a color that can be customized. The progress bar will animate and fill up based on the progress passed in as a percentage value."]}),"\n",(0,s.jsx)(r.h3,{id:"import",children:"Import"}),"\n",(0,s.jsx)(r.pre,{children:(0,s.jsx)(r.code,{className:"language-js",children:"import { ProgressBar } from '@tra-tech/react-native-kitra';\n"})}),"\n",(0,s.jsx)(r.h3,{id:"usage",children:"Usage"}),"\n",(0,s.jsx)(r.pre,{children:(0,s.jsx)(r.code,{className:"language-js",children:"import { ProgressBar } from '@tra-tech/react-native-kitra';\nimport { View, StyleSheet } from 'react-native';\n\nconst App = () => (\n \n \n \n \n);\n\nconst style = StyleSheet.create({\n container: { flex: 1, justifyContent: 'center', rowGap: 50 },\n});\n\nexport default App;\n\n"})}),"\n",(0,s.jsx)(r.h3,{id:"props",children:"Props"}),"\n",(0,s.jsxs)(r.table,{children:[(0,s.jsx)(r.thead,{children:(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.th,{children:"Prop Name"}),(0,s.jsx)(r.th,{children:"Type"}),(0,s.jsx)(r.th,{children:"Required"}),(0,s.jsx)(r.th,{children:"Description"})]})}),(0,s.jsxs)(r.tbody,{children:[(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{children:"progress"}),(0,s.jsx)(r.td,{children:(0,s.jsx)(r.code,{children:"number"})}),(0,s.jsx)(r.td,{children:"No"}),(0,s.jsxs)(r.td,{children:["The progress value as a percentage. Default value: ",(0,s.jsx)(r.code,{children:"0"}),"."]})]}),(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{children:"barColor"}),(0,s.jsx)(r.td,{children:(0,s.jsx)(r.code,{children:"string"})}),(0,s.jsx)(r.td,{children:"No"}),(0,s.jsx)(r.td,{children:"The background color of the progress bar."})]}),(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{children:"progressColor"}),(0,s.jsx)(r.td,{children:(0,s.jsx)(r.code,{children:"string"})}),(0,s.jsx)(r.td,{children:"No"}),(0,s.jsx)(r.td,{children:"The color of the progress bar."})]}),(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{children:"progressStyle"}),(0,s.jsx)(r.td,{children:(0,s.jsx)(r.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,s.jsx)(r.code,{children:"StyleProp"})})}),(0,s.jsx)(r.td,{children:"No"}),(0,s.jsx)(r.td,{children:"Style object to be applied to the progress bar."})]}),(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{children:"theme"}),(0,s.jsx)(r.td,{children:(0,s.jsx)(r.code,{children:"UITheme"})}),(0,s.jsx)(r.td,{children:"No"}),(0,s.jsx)(r.td,{children:"The theme to use for the component."})]})]})]})]})}function p(e={}){const{wrapper:r}={...(0,n.a)(),...e.components};return r?(0,s.jsx)(r,{...e,children:(0,s.jsx)(l,{...e})}):l(e)}},1151:(e,r,t)=>{t.d(r,{Z:()=>i,a:()=>a});var s=t(7294);const n={},o=s.createContext(n);function a(e){const r=s.useContext(o);return s.useMemo((function(){return"function"==typeof e?e(r):{...r,...e}}),[r,e])}function i(e){let r;return r=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:a(e.components),s.createElement(o.Provider,{value:r},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/567499ad.c1846a71.js b/assets/js/567499ad.2d3892ff.js similarity index 97% rename from assets/js/567499ad.c1846a71.js rename to assets/js/567499ad.2d3892ff.js index 7d4a44d..eb705f8 100644 --- a/assets/js/567499ad.c1846a71.js +++ b/assets/js/567499ad.2d3892ff.js @@ -1 +1 @@ -"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[6737],{9442:(e,r,s)=>{s.r(r),s.d(r,{assets:()=>d,contentTitle:()=>a,default:()=>p,frontMatter:()=>o,metadata:()=>i,toc:()=>c});var t=s(5893),n=s(1151);const o={sidebar_position:15},a="Progress Bar",i={id:"components/progress-bar",title:"Progress Bar",description:"The ProgressBar component is a visual indicator of a progress. It displays a progress bar with a color that can be customized. The progress bar will animate and fill up based on the progress passed in as a percentage value.",source:"@site/versioned_docs/version-1.x/components/progress-bar.md",sourceDirName:"components",slug:"/components/progress-bar",permalink:"/react-native-kitra/docs/components/progress-bar",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/versioned_docs/version-1.x/components/progress-bar.md",tags:[],version:"1.x",lastUpdatedAt:1707292585,formattedLastUpdatedAt:"Feb 7, 2024",sidebarPosition:15,frontMatter:{sidebar_position:15},sidebar:"ComponentsSidebar",previous:{title:"Pagerview",permalink:"/react-native-kitra/docs/components/pagerview"},next:{title:"Radio Button",permalink:"/react-native-kitra/docs/components/radio-button"}},d={},c=[{value:"Import",id:"import",level:3},{value:"Usage",id:"usage",level:3},{value:"Props",id:"props",level:3}];function l(e){const r={a:"a",code:"code",h1:"h1",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,n.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(r.h1,{id:"progress-bar",children:"Progress Bar"}),"\n",(0,t.jsxs)(r.p,{children:["The ",(0,t.jsx)(r.strong,{children:"ProgressBar"})," component is a visual indicator of a progress. It displays a progress bar with a color that can be customized. The progress bar will animate and fill up based on the progress passed in as a percentage value."]}),"\n",(0,t.jsx)(r.h3,{id:"import",children:"Import"}),"\n",(0,t.jsx)(r.pre,{children:(0,t.jsx)(r.code,{className:"language-js",children:"import { ProgressBar } from '@tra-tech/react-native-kitra';\n"})}),"\n",(0,t.jsx)(r.h3,{id:"usage",children:"Usage"}),"\n",(0,t.jsx)(r.pre,{children:(0,t.jsx)(r.code,{className:"language-js",children:"import { ProgressBar } from '@tra-tech/react-native-kitra';\nimport { View, StyleSheet } from 'react-native';\n\nconst App = () => (\n \n \n \n \n);\n\nconst style = StyleSheet.create({\n container: { flex: 1, justifyContent: 'center', rowGap: 50 },\n});\n\nexport default App;\n\n"})}),"\n",(0,t.jsx)(r.h3,{id:"props",children:"Props"}),"\n",(0,t.jsxs)(r.table,{children:[(0,t.jsx)(r.thead,{children:(0,t.jsxs)(r.tr,{children:[(0,t.jsx)(r.th,{children:"Prop Name"}),(0,t.jsx)(r.th,{children:"Type"}),(0,t.jsx)(r.th,{children:"Required"}),(0,t.jsx)(r.th,{children:"Description"})]})}),(0,t.jsxs)(r.tbody,{children:[(0,t.jsxs)(r.tr,{children:[(0,t.jsx)(r.td,{children:"progress"}),(0,t.jsx)(r.td,{children:(0,t.jsx)(r.code,{children:"number"})}),(0,t.jsx)(r.td,{children:"No"}),(0,t.jsxs)(r.td,{children:["The progress value as a percentage. Default value: ",(0,t.jsx)(r.code,{children:"0"}),"."]})]}),(0,t.jsxs)(r.tr,{children:[(0,t.jsx)(r.td,{children:"barColor"}),(0,t.jsx)(r.td,{children:(0,t.jsx)(r.code,{children:"string"})}),(0,t.jsx)(r.td,{children:"No"}),(0,t.jsx)(r.td,{children:"The background color of the progress bar."})]}),(0,t.jsxs)(r.tr,{children:[(0,t.jsx)(r.td,{children:"progressColor"}),(0,t.jsx)(r.td,{children:(0,t.jsx)(r.code,{children:"string"})}),(0,t.jsx)(r.td,{children:"No"}),(0,t.jsx)(r.td,{children:"The color of the progress bar."})]}),(0,t.jsxs)(r.tr,{children:[(0,t.jsx)(r.td,{children:"progressStyle"}),(0,t.jsx)(r.td,{children:(0,t.jsx)(r.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,t.jsx)(r.code,{children:"StyleProp"})})}),(0,t.jsx)(r.td,{children:"No"}),(0,t.jsx)(r.td,{children:"Style object to be applied to the progress bar."})]}),(0,t.jsxs)(r.tr,{children:[(0,t.jsx)(r.td,{children:"theme"}),(0,t.jsx)(r.td,{children:(0,t.jsx)(r.code,{children:"UITheme"})}),(0,t.jsx)(r.td,{children:"No"}),(0,t.jsx)(r.td,{children:"The theme to use for the component."})]})]})]})]})}function p(e={}){const{wrapper:r}={...(0,n.a)(),...e.components};return r?(0,t.jsx)(r,{...e,children:(0,t.jsx)(l,{...e})}):l(e)}},1151:(e,r,s)=>{s.d(r,{Z:()=>i,a:()=>a});var t=s(7294);const n={},o=t.createContext(n);function a(e){const r=t.useContext(o);return t.useMemo((function(){return"function"==typeof e?e(r):{...r,...e}}),[r,e])}function i(e){let r;return r=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:a(e.components),t.createElement(o.Provider,{value:r},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[6737],{9442:(e,r,s)=>{s.r(r),s.d(r,{assets:()=>d,contentTitle:()=>a,default:()=>p,frontMatter:()=>o,metadata:()=>i,toc:()=>c});var t=s(5893),n=s(1151);const o={sidebar_position:15},a="Progress Bar",i={id:"components/progress-bar",title:"Progress Bar",description:"The ProgressBar component is a visual indicator of a progress. It displays a progress bar with a color that can be customized. The progress bar will animate and fill up based on the progress passed in as a percentage value.",source:"@site/versioned_docs/version-1.x/components/progress-bar.md",sourceDirName:"components",slug:"/components/progress-bar",permalink:"/react-native-kitra/docs/components/progress-bar",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/versioned_docs/version-1.x/components/progress-bar.md",tags:[],version:"1.x",lastUpdatedAt:1709646294,formattedLastUpdatedAt:"Mar 5, 2024",sidebarPosition:15,frontMatter:{sidebar_position:15},sidebar:"ComponentsSidebar",previous:{title:"Pagerview",permalink:"/react-native-kitra/docs/components/pagerview"},next:{title:"Radio Button",permalink:"/react-native-kitra/docs/components/radio-button"}},d={},c=[{value:"Import",id:"import",level:3},{value:"Usage",id:"usage",level:3},{value:"Props",id:"props",level:3}];function l(e){const r={a:"a",code:"code",h1:"h1",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,n.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(r.h1,{id:"progress-bar",children:"Progress Bar"}),"\n",(0,t.jsxs)(r.p,{children:["The ",(0,t.jsx)(r.strong,{children:"ProgressBar"})," component is a visual indicator of a progress. It displays a progress bar with a color that can be customized. The progress bar will animate and fill up based on the progress passed in as a percentage value."]}),"\n",(0,t.jsx)(r.h3,{id:"import",children:"Import"}),"\n",(0,t.jsx)(r.pre,{children:(0,t.jsx)(r.code,{className:"language-js",children:"import { ProgressBar } from '@tra-tech/react-native-kitra';\n"})}),"\n",(0,t.jsx)(r.h3,{id:"usage",children:"Usage"}),"\n",(0,t.jsx)(r.pre,{children:(0,t.jsx)(r.code,{className:"language-js",children:"import { ProgressBar } from '@tra-tech/react-native-kitra';\nimport { View, StyleSheet } from 'react-native';\n\nconst App = () => (\n \n \n \n \n);\n\nconst style = StyleSheet.create({\n container: { flex: 1, justifyContent: 'center', rowGap: 50 },\n});\n\nexport default App;\n\n"})}),"\n",(0,t.jsx)(r.h3,{id:"props",children:"Props"}),"\n",(0,t.jsxs)(r.table,{children:[(0,t.jsx)(r.thead,{children:(0,t.jsxs)(r.tr,{children:[(0,t.jsx)(r.th,{children:"Prop Name"}),(0,t.jsx)(r.th,{children:"Type"}),(0,t.jsx)(r.th,{children:"Required"}),(0,t.jsx)(r.th,{children:"Description"})]})}),(0,t.jsxs)(r.tbody,{children:[(0,t.jsxs)(r.tr,{children:[(0,t.jsx)(r.td,{children:"progress"}),(0,t.jsx)(r.td,{children:(0,t.jsx)(r.code,{children:"number"})}),(0,t.jsx)(r.td,{children:"No"}),(0,t.jsxs)(r.td,{children:["The progress value as a percentage. Default value: ",(0,t.jsx)(r.code,{children:"0"}),"."]})]}),(0,t.jsxs)(r.tr,{children:[(0,t.jsx)(r.td,{children:"barColor"}),(0,t.jsx)(r.td,{children:(0,t.jsx)(r.code,{children:"string"})}),(0,t.jsx)(r.td,{children:"No"}),(0,t.jsx)(r.td,{children:"The background color of the progress bar."})]}),(0,t.jsxs)(r.tr,{children:[(0,t.jsx)(r.td,{children:"progressColor"}),(0,t.jsx)(r.td,{children:(0,t.jsx)(r.code,{children:"string"})}),(0,t.jsx)(r.td,{children:"No"}),(0,t.jsx)(r.td,{children:"The color of the progress bar."})]}),(0,t.jsxs)(r.tr,{children:[(0,t.jsx)(r.td,{children:"progressStyle"}),(0,t.jsx)(r.td,{children:(0,t.jsx)(r.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,t.jsx)(r.code,{children:"StyleProp"})})}),(0,t.jsx)(r.td,{children:"No"}),(0,t.jsx)(r.td,{children:"Style object to be applied to the progress bar."})]}),(0,t.jsxs)(r.tr,{children:[(0,t.jsx)(r.td,{children:"theme"}),(0,t.jsx)(r.td,{children:(0,t.jsx)(r.code,{children:"UITheme"})}),(0,t.jsx)(r.td,{children:"No"}),(0,t.jsx)(r.td,{children:"The theme to use for the component."})]})]})]})]})}function p(e={}){const{wrapper:r}={...(0,n.a)(),...e.components};return r?(0,t.jsx)(r,{...e,children:(0,t.jsx)(l,{...e})}):l(e)}},1151:(e,r,s)=>{s.d(r,{Z:()=>i,a:()=>a});var t=s(7294);const n={},o=t.createContext(n);function a(e){const r=t.useContext(o);return t.useMemo((function(){return"function"==typeof e?e(r):{...r,...e}}),[r,e])}function i(e){let r;return r=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:a(e.components),t.createElement(o.Provider,{value:r},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/5d326888.03338022.js b/assets/js/5d326888.da4f7c0b.js similarity index 99% rename from assets/js/5d326888.03338022.js rename to assets/js/5d326888.da4f7c0b.js index 70eac84..7d11dde 100644 --- a/assets/js/5d326888.03338022.js +++ b/assets/js/5d326888.da4f7c0b.js @@ -1 +1 @@ -"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[6829],{770:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>o,default:()=>h,frontMatter:()=>r,metadata:()=>d,toc:()=>l});var s=n(5893),i=n(1151);const r={sidebar_position:1,title:"Accordion List"},o=void 0,d={id:"components/accordion-list",title:"Accordion List",description:"The Accordion List component provides an accordion-style list with collapsible sections. The component also supports customization of labels, icons, styles, and themes.",source:"@site/versioned_docs/version-1.x/components/accordion-list.md",sourceDirName:"components",slug:"/components/accordion-list",permalink:"/react-native-kitra/docs/components/accordion-list",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/versioned_docs/version-1.x/components/accordion-list.md",tags:[],version:"1.x",lastUpdatedAt:1707292585,formattedLastUpdatedAt:"Feb 7, 2024",sidebarPosition:1,frontMatter:{sidebar_position:1,title:"Accordion List"},sidebar:"ComponentsSidebar",next:{title:"Activity Indicator",permalink:"/react-native-kitra/docs/components/activity-indicator"}},c={},l=[{value:"Import",id:"import",level:3},{value:"Usage",id:"usage",level:3},{value:"Props",id:"props",level:3}];function a(e){const t={a:"a",code:"code",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,i.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.strong,{children:"Accordion List"})," component provides an accordion-style list with collapsible sections. The component also supports customization of labels, icons, styles, and themes.\nIt uses animations from the ",(0,s.jsx)(t.a,{href:"https://docs.swmansion.com/react-native-reanimated/",children:"react-native-reanimated"})," library to animate the opening and closing of the accordion sections."]}),"\n",(0,s.jsx)(t.h3,{id:"import",children:"Import"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",children:'import { AccordionList } from "@tra-tech/react-native-kitra"; \n'})}),"\n",(0,s.jsx)(t.h3,{id:"usage",children:"Usage"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",children:"import { AccordionList } from \"@tra-tech/react-native-kitra\"; \n\nconst AccordionListData =[\n {name:'React',value:1},\n {name:'Native',value:2},\n {name:'Kitra',value:3},\n {name:'React Native Kitra',value:4}]\n\nconst App =()=>{\n return(\n \n x.name}\n itemDisplay={x => x.name}\n onSelect={x => console.log(x)}\n label=\"Grey Daze\"\n left={() => }\n data={AccordionListData}\n />\n \n )\n }\n\n export default App;\n"})}),"\n",(0,s.jsx)(t.h3,{id:"props",children:"Props"}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{children:"Name"}),(0,s.jsx)(t.th,{children:"Type"}),(0,s.jsx)(t.th,{children:"Required"}),(0,s.jsx)(t.th,{children:"Description"})]})}),(0,s.jsxs)(t.tbody,{children:[(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"data"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"Array "})}),(0,s.jsx)(t.td,{children:"Yes"}),(0,s.jsx)(t.td,{children:"The data to render in the accordion list."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"label"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"string"})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"The label to display at the top of the accordion list."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"left"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"(expanded: boolean) => React.ReactNode "})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"An optional function that returns a React element to display on the left side of the label."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"right"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"(expanded: boolean) => React.ReactNode"})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"An optional function that returns a React element to display on the right side of the label."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"labelContainerStyle"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,s.jsx)(t.code,{children:"StyleProp"})})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"Additional styles to apply to the label container."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"labelStyle"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"https://reactnative.dev/docs/text-style-props",children:(0,s.jsx)(t.code,{children:"StyleProp"})})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"Additional styles to apply to the label text."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"rowTextStyle"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"https://reactnative.dev/docs/text-style-props",children:(0,s.jsx)(t.code,{children:"StyleProp"})})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"Additional styles to apply to the row text."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"rowStyle"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,s.jsx)(t.code,{children:"StyleProp"})})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"Additional styles to apply to each row container."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"onSelect"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"(item: any) => void "})}),(0,s.jsx)(t.td,{children:"Yes"}),(0,s.jsx)(t.td,{children:"A callback function that will be called when a row is selected."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"itemDisplay"}),(0,s.jsx)(t.td,{children:(0,s.jsx)("code",{children:"(item: any) => string | JSX.Element | null "})}),(0,s.jsx)(t.td,{children:"Yes"}),(0,s.jsx)(t.td,{children:"A function that returns a string or JSX element to display for each row."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"theme"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"UITheme"})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"The theme to use for the component."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"typography"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"UITypography"})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"The typography to use for the component."})]})]})]})]})}function h(e={}){const{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(a,{...e})}):a(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>d,a:()=>o});var s=n(7294);const i={},r=s.createContext(i);function o(e){const t=s.useContext(r);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function d(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:o(e.components),s.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[6829],{770:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>o,default:()=>h,frontMatter:()=>r,metadata:()=>d,toc:()=>l});var s=n(5893),i=n(1151);const r={sidebar_position:1,title:"Accordion List"},o=void 0,d={id:"components/accordion-list",title:"Accordion List",description:"The Accordion List component provides an accordion-style list with collapsible sections. The component also supports customization of labels, icons, styles, and themes.",source:"@site/versioned_docs/version-1.x/components/accordion-list.md",sourceDirName:"components",slug:"/components/accordion-list",permalink:"/react-native-kitra/docs/components/accordion-list",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/versioned_docs/version-1.x/components/accordion-list.md",tags:[],version:"1.x",lastUpdatedAt:1709646294,formattedLastUpdatedAt:"Mar 5, 2024",sidebarPosition:1,frontMatter:{sidebar_position:1,title:"Accordion List"},sidebar:"ComponentsSidebar",next:{title:"Activity Indicator",permalink:"/react-native-kitra/docs/components/activity-indicator"}},c={},l=[{value:"Import",id:"import",level:3},{value:"Usage",id:"usage",level:3},{value:"Props",id:"props",level:3}];function a(e){const t={a:"a",code:"code",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,i.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.strong,{children:"Accordion List"})," component provides an accordion-style list with collapsible sections. The component also supports customization of labels, icons, styles, and themes.\nIt uses animations from the ",(0,s.jsx)(t.a,{href:"https://docs.swmansion.com/react-native-reanimated/",children:"react-native-reanimated"})," library to animate the opening and closing of the accordion sections."]}),"\n",(0,s.jsx)(t.h3,{id:"import",children:"Import"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",children:'import { AccordionList } from "@tra-tech/react-native-kitra"; \n'})}),"\n",(0,s.jsx)(t.h3,{id:"usage",children:"Usage"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",children:"import { AccordionList } from \"@tra-tech/react-native-kitra\"; \n\nconst AccordionListData =[\n {name:'React',value:1},\n {name:'Native',value:2},\n {name:'Kitra',value:3},\n {name:'React Native Kitra',value:4}]\n\nconst App =()=>{\n return(\n \n x.name}\n itemDisplay={x => x.name}\n onSelect={x => console.log(x)}\n label=\"Grey Daze\"\n left={() => }\n data={AccordionListData}\n />\n \n )\n }\n\n export default App;\n"})}),"\n",(0,s.jsx)(t.h3,{id:"props",children:"Props"}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{children:"Name"}),(0,s.jsx)(t.th,{children:"Type"}),(0,s.jsx)(t.th,{children:"Required"}),(0,s.jsx)(t.th,{children:"Description"})]})}),(0,s.jsxs)(t.tbody,{children:[(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"data"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"Array "})}),(0,s.jsx)(t.td,{children:"Yes"}),(0,s.jsx)(t.td,{children:"The data to render in the accordion list."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"label"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"string"})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"The label to display at the top of the accordion list."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"left"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"(expanded: boolean) => React.ReactNode "})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"An optional function that returns a React element to display on the left side of the label."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"right"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"(expanded: boolean) => React.ReactNode"})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"An optional function that returns a React element to display on the right side of the label."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"labelContainerStyle"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,s.jsx)(t.code,{children:"StyleProp"})})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"Additional styles to apply to the label container."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"labelStyle"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"https://reactnative.dev/docs/text-style-props",children:(0,s.jsx)(t.code,{children:"StyleProp"})})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"Additional styles to apply to the label text."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"rowTextStyle"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"https://reactnative.dev/docs/text-style-props",children:(0,s.jsx)(t.code,{children:"StyleProp"})})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"Additional styles to apply to the row text."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"rowStyle"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,s.jsx)(t.code,{children:"StyleProp"})})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"Additional styles to apply to each row container."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"onSelect"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"(item: any) => void "})}),(0,s.jsx)(t.td,{children:"Yes"}),(0,s.jsx)(t.td,{children:"A callback function that will be called when a row is selected."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"itemDisplay"}),(0,s.jsx)(t.td,{children:(0,s.jsx)("code",{children:"(item: any) => string | JSX.Element | null "})}),(0,s.jsx)(t.td,{children:"Yes"}),(0,s.jsx)(t.td,{children:"A function that returns a string or JSX element to display for each row."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"theme"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"UITheme"})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"The theme to use for the component."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"typography"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"UITypography"})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"The typography to use for the component."})]})]})]})]})}function h(e={}){const{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(a,{...e})}):a(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>d,a:()=>o});var s=n(7294);const i={},r=s.createContext(i);function o(e){const t=s.useContext(r);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function d(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:o(e.components),s.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/64139f8a.66d41922.js b/assets/js/64139f8a.91debe4d.js similarity index 98% rename from assets/js/64139f8a.66d41922.js rename to assets/js/64139f8a.91debe4d.js index dd3fcba..18f9a7b 100644 --- a/assets/js/64139f8a.66d41922.js +++ b/assets/js/64139f8a.91debe4d.js @@ -1 +1 @@ -"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[1218],{9450:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>o,default:()=>h,frontMatter:()=>s,metadata:()=>d,toc:()=>a});var r=n(5893),i=n(1151);const s={sidebar_position:18},o="Speed Dial",d={id:"components/speed-dial",title:"Speed Dial",description:"Speed Dial component is a menu of related actions that allows a user to perform an action. These separations help to improve the user experience by not taking users away from the main separation for a specific action.",source:"@site/versioned_docs/version-1.x/components/speed-dial.md",sourceDirName:"components",slug:"/components/speed-dial",permalink:"/react-native-kitra/docs/components/speed-dial",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/versioned_docs/version-1.x/components/speed-dial.md",tags:[],version:"1.x",lastUpdatedAt:1707292585,formattedLastUpdatedAt:"Feb 7, 2024",sidebarPosition:18,frontMatter:{sidebar_position:18},sidebar:"ComponentsSidebar",previous:{title:"Slider",permalink:"/react-native-kitra/docs/components/slider"},next:{title:"Swipe",permalink:"/react-native-kitra/docs/components/swipe"}},c={},a=[{value:"Import",id:"import",level:3},{value:"Import",id:"import-1",level:3},{value:"Props",id:"props",level:3}];function l(e){const t={a:"a",code:"code",h1:"h1",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,i.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h1,{id:"speed-dial",children:"Speed Dial"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.strong,{children:"Speed Dial"})," component is a menu of related actions that allows a user to perform an action. These separations help to improve the user experience by not taking users away from the main separation for a specific action."]}),"\n",(0,r.jsx)(t.h3,{id:"import",children:"Import"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"import { SpeedDial } from '@tra-tech/react-native-kitra';\n\n"})}),"\n",(0,r.jsx)(t.h3,{id:"import-1",children:"Import"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:'import { SpeedDial, Icon } from \'@tra-tech/react-native-kitra\';\n\nconst App = () => (\n\n , title: \'Penguin\', backgroundColor: \'blue\' },\n { icon: , title: \'Close\', backgroundColor: \'pink\' },\n { icon: , title: \'Plus\', titleColor: \'red\' },\n { icon: , onPress: () => console.log(\'pressed\') },\n { icon: },\n ]}\n />\n);\n\nexport default App;\n'})}),"\n",(0,r.jsx)(t.h3,{id:"props",children:"Props"}),"\n",(0,r.jsxs)(t.table,{children:[(0,r.jsx)(t.thead,{children:(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.th,{children:"Prop name"}),(0,r.jsx)(t.th,{children:"Type"}),(0,r.jsx)(t.th,{children:"Required"}),(0,r.jsx)(t.th,{children:"Description"})]})}),(0,r.jsxs)(t.tbody,{children:[(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"items"}),(0,r.jsxs)(t.td,{children:[(0,r.jsx)(t.code,{children:"Array<{"}),(0,r.jsx)("br",{}),(0,r.jsx)(t.code,{children:"icon?: React.ReactNode,"}),(0,r.jsx)("br",{}),(0,r.jsx)(t.code,{children:" title?:string,"}),(0,r.jsx)("br",{}),(0,r.jsx)(t.code,{children:" titleColor?:string,"}),(0,r.jsx)("br",{}),(0,r.jsx)(t.code,{children:" backgroundColor?:string,"}),(0,r.jsx)("br",{}),(0,r.jsx)(t.code,{children:" onPress?: ()=> void}>"})]}),(0,r.jsx)(t.td,{children:"Yes"}),(0,r.jsx)(t.td,{children:"Items to be listed in the speed dial."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"baseItemBackground"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"string"})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsxs)(t.td,{children:["Background color of base item. Default value: ",(0,r.jsx)(t.code,{children:"theme.tertiary"})]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"variant"}),(0,r.jsx)(t.td,{children:(0,r.jsx)("code",{children:" 'flat' | 'spread' "})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsxs)(t.td,{children:["Represents the opening animation. Default value: ",(0,r.jsx)(t.code,{children:"'flat'"})]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"onChange"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"(event:boolean)=>void "})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"Returns whether the component is on or off."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"baseItemIcon"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.a,{href:"https://reactnative.dev/docs/react-node",children:(0,r.jsx)(t.code,{children:"React.ReactNode"})})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"Icon of base item."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"theme"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"UITheme "})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"The theme to use for the component."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"typography"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"UITypography"})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"The typography to use for the component."})]})]})]})]})}function h(e={}){const{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(l,{...e})}):l(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>d,a:()=>o});var r=n(7294);const i={},s=r.createContext(i);function o(e){const t=r.useContext(s);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function d(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:o(e.components),r.createElement(s.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[1218],{9450:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>o,default:()=>h,frontMatter:()=>s,metadata:()=>d,toc:()=>a});var r=n(5893),i=n(1151);const s={sidebar_position:18},o="Speed Dial",d={id:"components/speed-dial",title:"Speed Dial",description:"Speed Dial component is a menu of related actions that allows a user to perform an action. These separations help to improve the user experience by not taking users away from the main separation for a specific action.",source:"@site/versioned_docs/version-1.x/components/speed-dial.md",sourceDirName:"components",slug:"/components/speed-dial",permalink:"/react-native-kitra/docs/components/speed-dial",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/versioned_docs/version-1.x/components/speed-dial.md",tags:[],version:"1.x",lastUpdatedAt:1709646294,formattedLastUpdatedAt:"Mar 5, 2024",sidebarPosition:18,frontMatter:{sidebar_position:18},sidebar:"ComponentsSidebar",previous:{title:"Slider",permalink:"/react-native-kitra/docs/components/slider"},next:{title:"Swipe",permalink:"/react-native-kitra/docs/components/swipe"}},c={},a=[{value:"Import",id:"import",level:3},{value:"Import",id:"import-1",level:3},{value:"Props",id:"props",level:3}];function l(e){const t={a:"a",code:"code",h1:"h1",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,i.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h1,{id:"speed-dial",children:"Speed Dial"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.strong,{children:"Speed Dial"})," component is a menu of related actions that allows a user to perform an action. These separations help to improve the user experience by not taking users away from the main separation for a specific action."]}),"\n",(0,r.jsx)(t.h3,{id:"import",children:"Import"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"import { SpeedDial } from '@tra-tech/react-native-kitra';\n\n"})}),"\n",(0,r.jsx)(t.h3,{id:"import-1",children:"Import"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:'import { SpeedDial, Icon } from \'@tra-tech/react-native-kitra\';\n\nconst App = () => (\n\n , title: \'Penguin\', backgroundColor: \'blue\' },\n { icon: , title: \'Close\', backgroundColor: \'pink\' },\n { icon: , title: \'Plus\', titleColor: \'red\' },\n { icon: , onPress: () => console.log(\'pressed\') },\n { icon: },\n ]}\n />\n);\n\nexport default App;\n'})}),"\n",(0,r.jsx)(t.h3,{id:"props",children:"Props"}),"\n",(0,r.jsxs)(t.table,{children:[(0,r.jsx)(t.thead,{children:(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.th,{children:"Prop name"}),(0,r.jsx)(t.th,{children:"Type"}),(0,r.jsx)(t.th,{children:"Required"}),(0,r.jsx)(t.th,{children:"Description"})]})}),(0,r.jsxs)(t.tbody,{children:[(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"items"}),(0,r.jsxs)(t.td,{children:[(0,r.jsx)(t.code,{children:"Array<{"}),(0,r.jsx)("br",{}),(0,r.jsx)(t.code,{children:"icon?: React.ReactNode,"}),(0,r.jsx)("br",{}),(0,r.jsx)(t.code,{children:" title?:string,"}),(0,r.jsx)("br",{}),(0,r.jsx)(t.code,{children:" titleColor?:string,"}),(0,r.jsx)("br",{}),(0,r.jsx)(t.code,{children:" backgroundColor?:string,"}),(0,r.jsx)("br",{}),(0,r.jsx)(t.code,{children:" onPress?: ()=> void}>"})]}),(0,r.jsx)(t.td,{children:"Yes"}),(0,r.jsx)(t.td,{children:"Items to be listed in the speed dial."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"baseItemBackground"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"string"})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsxs)(t.td,{children:["Background color of base item. Default value: ",(0,r.jsx)(t.code,{children:"theme.tertiary"})]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"variant"}),(0,r.jsx)(t.td,{children:(0,r.jsx)("code",{children:" 'flat' | 'spread' "})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsxs)(t.td,{children:["Represents the opening animation. Default value: ",(0,r.jsx)(t.code,{children:"'flat'"})]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"onChange"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"(event:boolean)=>void "})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"Returns whether the component is on or off."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"baseItemIcon"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.a,{href:"https://reactnative.dev/docs/react-node",children:(0,r.jsx)(t.code,{children:"React.ReactNode"})})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"Icon of base item."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"theme"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"UITheme "})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"The theme to use for the component."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"typography"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"UITypography"})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"The typography to use for the component."})]})]})]})]})}function h(e={}){const{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(l,{...e})}):l(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>d,a:()=>o});var r=n(7294);const i={},s=r.createContext(i);function o(e){const t=r.useContext(s);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function d(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:o(e.components),r.createElement(s.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/6e90cc76.ff869b66.js b/assets/js/6e90cc76.60c5810f.js similarity index 97% rename from assets/js/6e90cc76.ff869b66.js rename to assets/js/6e90cc76.60c5810f.js index 001f796..aaa6a95 100644 --- a/assets/js/6e90cc76.ff869b66.js +++ b/assets/js/6e90cc76.60c5810f.js @@ -1 +1 @@ -"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[6706],{3230:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>i,default:()=>h,frontMatter:()=>r,metadata:()=>d,toc:()=>l});var o=n(5893),s=n(1151);const r={sidebar_position:22},i="Toggle Button",d={id:"components/toggle-button",title:"Toggle Button",description:"The ToggleButton component is a custom toggle button that allows users to select from a list of options.",source:"@site/versioned_docs/version-1.x/components/toggle-button.md",sourceDirName:"components",slug:"/components/toggle-button",permalink:"/react-native-kitra/docs/components/toggle-button",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/versioned_docs/version-1.x/components/toggle-button.md",tags:[],version:"1.x",lastUpdatedAt:1707292585,formattedLastUpdatedAt:"Feb 7, 2024",sidebarPosition:22,frontMatter:{sidebar_position:22},sidebar:"ComponentsSidebar",previous:{title:"Text Input",permalink:"/react-native-kitra/docs/components/text-input"}},c={},l=[{value:"Import",id:"import",level:3},{value:"Usage",id:"usage",level:3},{value:"Props",id:"props",level:3}];function a(e){const t={code:"code",h1:"h1",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,s.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.h1,{id:"toggle-button",children:"Toggle Button"}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.strong,{children:"ToggleButton"})," component is a custom toggle button that allows users to select from a list of options."]}),"\n",(0,o.jsx)(t.h3,{id:"import",children:"Import"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-js",children:"import { ToggleButton } from '@tra-tech/react-native-kitra';\n"})}),"\n",(0,o.jsx)(t.h3,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-js",children:"import { ToggleButton } from '@tra-tech/react-native-kitra';\nimport { View } from 'react-native';\n\nconst App = () => (\n \n null },\n { label: 'Native', onPress: () => null },\n { label: 'Kitra', onPress: () => null },\n ]}\n />\n \n);\n\nexport default App;\n"})}),"\n",(0,o.jsx)(t.h3,{id:"props",children:"Props"}),"\n",(0,o.jsxs)(t.table,{children:[(0,o.jsx)(t.thead,{children:(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.th,{children:"Prop Name"}),(0,o.jsx)(t.th,{children:"Data Type"}),(0,o.jsx)(t.th,{children:"Required"}),(0,o.jsx)(t.th,{children:"Description"})]})}),(0,o.jsxs)(t.tbody,{children:[(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.td,{children:(0,o.jsx)(t.code,{children:"buttons"})}),(0,o.jsxs)(t.td,{children:[(0,o.jsx)(t.code,{children:"Array<{ label: string,"}),(0,o.jsx)("br",{}),(0,o.jsx)(t.code,{children:" onPress: (event: boolean) => void,"}),(0,o.jsx)("br",{}),(0,o.jsx)(t.code,{children:"id?: number }>"})]}),(0,o.jsx)(t.td,{children:"Yes"}),(0,o.jsx)(t.td,{children:"Array of buttons."})]}),(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.td,{children:(0,o.jsx)(t.code,{children:"size"})}),(0,o.jsx)(t.td,{children:(0,o.jsx)("code",{children:"'small' | 'medium'"})}),(0,o.jsx)(t.td,{children:"No"}),(0,o.jsxs)(t.td,{children:["The size of the button. Default value: ",(0,o.jsx)(t.code,{children:"'medium'"})]})]}),(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.td,{children:(0,o.jsx)(t.code,{children:"theme"})}),(0,o.jsx)(t.td,{children:(0,o.jsx)(t.code,{children:"UITheme"})}),(0,o.jsx)(t.td,{children:"No"}),(0,o.jsx)(t.td,{children:"The theme to use for the component."})]}),(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.td,{children:(0,o.jsx)(t.code,{children:"typography"})}),(0,o.jsx)(t.td,{children:(0,o.jsx)(t.code,{children:"UITypography"})}),(0,o.jsx)(t.td,{children:"No"}),(0,o.jsx)(t.td,{children:"The typography to use for the component."})]})]})]})]})}function h(e={}){const{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(a,{...e})}):a(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>d,a:()=>i});var o=n(7294);const s={},r=o.createContext(s);function i(e){const t=o.useContext(r);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function d(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:i(e.components),o.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[6706],{3230:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>i,default:()=>h,frontMatter:()=>r,metadata:()=>d,toc:()=>l});var o=n(5893),s=n(1151);const r={sidebar_position:22},i="Toggle Button",d={id:"components/toggle-button",title:"Toggle Button",description:"The ToggleButton component is a custom toggle button that allows users to select from a list of options.",source:"@site/versioned_docs/version-1.x/components/toggle-button.md",sourceDirName:"components",slug:"/components/toggle-button",permalink:"/react-native-kitra/docs/components/toggle-button",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/versioned_docs/version-1.x/components/toggle-button.md",tags:[],version:"1.x",lastUpdatedAt:1709646294,formattedLastUpdatedAt:"Mar 5, 2024",sidebarPosition:22,frontMatter:{sidebar_position:22},sidebar:"ComponentsSidebar",previous:{title:"Text Input",permalink:"/react-native-kitra/docs/components/text-input"}},c={},l=[{value:"Import",id:"import",level:3},{value:"Usage",id:"usage",level:3},{value:"Props",id:"props",level:3}];function a(e){const t={code:"code",h1:"h1",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,s.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.h1,{id:"toggle-button",children:"Toggle Button"}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.strong,{children:"ToggleButton"})," component is a custom toggle button that allows users to select from a list of options."]}),"\n",(0,o.jsx)(t.h3,{id:"import",children:"Import"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-js",children:"import { ToggleButton } from '@tra-tech/react-native-kitra';\n"})}),"\n",(0,o.jsx)(t.h3,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-js",children:"import { ToggleButton } from '@tra-tech/react-native-kitra';\nimport { View } from 'react-native';\n\nconst App = () => (\n \n null },\n { label: 'Native', onPress: () => null },\n { label: 'Kitra', onPress: () => null },\n ]}\n />\n \n);\n\nexport default App;\n"})}),"\n",(0,o.jsx)(t.h3,{id:"props",children:"Props"}),"\n",(0,o.jsxs)(t.table,{children:[(0,o.jsx)(t.thead,{children:(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.th,{children:"Prop Name"}),(0,o.jsx)(t.th,{children:"Data Type"}),(0,o.jsx)(t.th,{children:"Required"}),(0,o.jsx)(t.th,{children:"Description"})]})}),(0,o.jsxs)(t.tbody,{children:[(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.td,{children:(0,o.jsx)(t.code,{children:"buttons"})}),(0,o.jsxs)(t.td,{children:[(0,o.jsx)(t.code,{children:"Array<{ label: string,"}),(0,o.jsx)("br",{}),(0,o.jsx)(t.code,{children:" onPress: (event: boolean) => void,"}),(0,o.jsx)("br",{}),(0,o.jsx)(t.code,{children:"id?: number }>"})]}),(0,o.jsx)(t.td,{children:"Yes"}),(0,o.jsx)(t.td,{children:"Array of buttons."})]}),(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.td,{children:(0,o.jsx)(t.code,{children:"size"})}),(0,o.jsx)(t.td,{children:(0,o.jsx)("code",{children:"'small' | 'medium'"})}),(0,o.jsx)(t.td,{children:"No"}),(0,o.jsxs)(t.td,{children:["The size of the button. Default value: ",(0,o.jsx)(t.code,{children:"'medium'"})]})]}),(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.td,{children:(0,o.jsx)(t.code,{children:"theme"})}),(0,o.jsx)(t.td,{children:(0,o.jsx)(t.code,{children:"UITheme"})}),(0,o.jsx)(t.td,{children:"No"}),(0,o.jsx)(t.td,{children:"The theme to use for the component."})]}),(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.td,{children:(0,o.jsx)(t.code,{children:"typography"})}),(0,o.jsx)(t.td,{children:(0,o.jsx)(t.code,{children:"UITypography"})}),(0,o.jsx)(t.td,{children:"No"}),(0,o.jsx)(t.td,{children:"The typography to use for the component."})]})]})]})]})}function h(e={}){const{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(a,{...e})}):a(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>d,a:()=>i});var o=n(7294);const s={},r=o.createContext(s);function i(e){const t=o.useContext(r);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function d(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:i(e.components),o.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/6f7b2bff.dffbdd17.js b/assets/js/6f7b2bff.d810ba57.js similarity index 96% rename from assets/js/6f7b2bff.dffbdd17.js rename to assets/js/6f7b2bff.d810ba57.js index 15b898e..4b867ef 100644 --- a/assets/js/6f7b2bff.dffbdd17.js +++ b/assets/js/6f7b2bff.d810ba57.js @@ -1 +1 @@ -"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[4356],{7619:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>o,default:()=>l,frontMatter:()=>i,metadata:()=>c,toc:()=>a});var r=n(5893),s=n(1151);const i={sidebar_position:20},o="Switch",c={id:"components/switch",title:"Switch",description:"The Switch component is renders a boolean input.",source:"@site/docs/components/switch.md",sourceDirName:"components",slug:"/components/switch",permalink:"/react-native-kitra/docs/next/components/switch",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/docs/components/switch.md",tags:[],version:"current",lastUpdatedAt:1707292585,formattedLastUpdatedAt:"Feb 7, 2024",sidebarPosition:20,frontMatter:{sidebar_position:20},sidebar:"ComponentsSidebar",previous:{title:"Swipe",permalink:"/react-native-kitra/docs/next/components/swipe"},next:{title:"Text Input",permalink:"/react-native-kitra/docs/next/components/text-input"}},d={},a=[{value:"Import",id:"import",level:3},{value:"Import",id:"import-1",level:3},{value:"Props",id:"props",level:3}];function h(e){const t={a:"a",code:"code",h1:"h1",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,s.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h1,{id:"switch",children:"Switch"}),"\n",(0,r.jsxs)(t.p,{children:["The ",(0,r.jsx)(t.strong,{children:"Switch"})," component is renders a boolean input."]}),"\n",(0,r.jsx)(t.h3,{id:"import",children:"Import"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"import { Switch } from '@tra-tech/react-native-kitra';\n\n"})}),"\n",(0,r.jsx)(t.h3,{id:"import-1",children:"Import"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"import { Switch } from '@tra-tech/react-native-kitra';\nimport { useState } from 'react';\nimport { View } from 'react-native';\n\nconst App = () => {\n const [isEnabled, setIsEnabled] = useState(false);\n return (\n \n setIsEnabled(!isEnabled)}\n value={isEnabled}\n />\n \n );\n};\n\nexport default App;\n"})}),"\n",(0,r.jsx)(t.h3,{id:"props",children:"Props"}),"\n",(0,r.jsxs)(t.table,{children:[(0,r.jsx)(t.thead,{children:(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.th,{children:"Prop name"}),(0,r.jsx)(t.th,{children:"Type"}),(0,r.jsx)(t.th,{children:"Required"}),(0,r.jsx)(t.th,{children:"Description"})]})}),(0,r.jsxs)(t.tbody,{children:[(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"...SwitchProps"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.a,{href:"https://reactnative.dev/docs/switch#props",children:(0,r.jsx)(t.code,{children:"SwitchProps"})})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsxs)(t.td,{children:["Any additional props to be passed to the underlying ",(0,r.jsx)(t.code,{children:"Switch"})," component."]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"theme"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"UITheme "})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"The theme to use for the component."})]})]})]})]})}function l(e={}){const{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(h,{...e})}):h(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>c,a:()=>o});var r=n(7294);const s={},i=r.createContext(s);function o(e){const t=r.useContext(i);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:o(e.components),r.createElement(i.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[4356],{7619:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>o,default:()=>l,frontMatter:()=>i,metadata:()=>c,toc:()=>a});var r=n(5893),s=n(1151);const i={sidebar_position:20},o="Switch",c={id:"components/switch",title:"Switch",description:"The Switch component is renders a boolean input.",source:"@site/docs/components/switch.md",sourceDirName:"components",slug:"/components/switch",permalink:"/react-native-kitra/docs/next/components/switch",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/docs/components/switch.md",tags:[],version:"current",lastUpdatedAt:1709646294,formattedLastUpdatedAt:"Mar 5, 2024",sidebarPosition:20,frontMatter:{sidebar_position:20},sidebar:"ComponentsSidebar",previous:{title:"Swipe",permalink:"/react-native-kitra/docs/next/components/swipe"},next:{title:"Text Input",permalink:"/react-native-kitra/docs/next/components/text-input"}},d={},a=[{value:"Import",id:"import",level:3},{value:"Import",id:"import-1",level:3},{value:"Props",id:"props",level:3}];function h(e){const t={a:"a",code:"code",h1:"h1",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,s.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h1,{id:"switch",children:"Switch"}),"\n",(0,r.jsxs)(t.p,{children:["The ",(0,r.jsx)(t.strong,{children:"Switch"})," component is renders a boolean input."]}),"\n",(0,r.jsx)(t.h3,{id:"import",children:"Import"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"import { Switch } from '@tra-tech/react-native-kitra';\n\n"})}),"\n",(0,r.jsx)(t.h3,{id:"import-1",children:"Import"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"import { Switch } from '@tra-tech/react-native-kitra';\nimport { useState } from 'react';\nimport { View } from 'react-native';\n\nconst App = () => {\n const [isEnabled, setIsEnabled] = useState(false);\n return (\n \n setIsEnabled(!isEnabled)}\n value={isEnabled}\n />\n \n );\n};\n\nexport default App;\n"})}),"\n",(0,r.jsx)(t.h3,{id:"props",children:"Props"}),"\n",(0,r.jsxs)(t.table,{children:[(0,r.jsx)(t.thead,{children:(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.th,{children:"Prop name"}),(0,r.jsx)(t.th,{children:"Type"}),(0,r.jsx)(t.th,{children:"Required"}),(0,r.jsx)(t.th,{children:"Description"})]})}),(0,r.jsxs)(t.tbody,{children:[(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"...SwitchProps"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.a,{href:"https://reactnative.dev/docs/switch#props",children:(0,r.jsx)(t.code,{children:"SwitchProps"})})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsxs)(t.td,{children:["Any additional props to be passed to the underlying ",(0,r.jsx)(t.code,{children:"Switch"})," component."]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"theme"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"UITheme "})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"The theme to use for the component."})]})]})]})]})}function l(e={}){const{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(h,{...e})}):h(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>c,a:()=>o});var r=n(7294);const s={},i=r.createContext(s);function o(e){const t=r.useContext(i);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:o(e.components),r.createElement(i.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/7252791a.80ea5291.js b/assets/js/7252791a.09f48c39.js similarity index 98% rename from assets/js/7252791a.80ea5291.js rename to assets/js/7252791a.09f48c39.js index a0b19a6..232a277 100644 --- a/assets/js/7252791a.80ea5291.js +++ b/assets/js/7252791a.09f48c39.js @@ -1 +1 @@ -"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[8593],{1483:(e,t,r)=>{r.r(t),r.d(t,{assets:()=>c,contentTitle:()=>s,default:()=>h,frontMatter:()=>d,metadata:()=>o,toc:()=>l});var n=r(5893),i=r(1151);const d={sidebar_position:14},s="Pagerview",o={id:"components/pagerview",title:"Pagerview",description:'The PagerView component is that is designed to create a tab-based view with a sliding indicator on top of it. It uses the "react-native-pager-view" library to handle animations.',source:"@site/versioned_docs/version-1.x/components/pagerview.md",sourceDirName:"components",slug:"/components/pagerview",permalink:"/react-native-kitra/docs/components/pagerview",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/versioned_docs/version-1.x/components/pagerview.md",tags:[],version:"1.x",lastUpdatedAt:1707292585,formattedLastUpdatedAt:"Feb 7, 2024",sidebarPosition:14,frontMatter:{sidebar_position:14},sidebar:"ComponentsSidebar",previous:{title:"Modal",permalink:"/react-native-kitra/docs/components/modal"},next:{title:"Progress Bar",permalink:"/react-native-kitra/docs/components/progress-bar"}},c={},l=[{value:"Import",id:"import",level:3},{value:"Usage",id:"usage",level:3},{value:"Props",id:"props",level:3}];function a(e){const t={a:"a",code:"code",h1:"h1",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,i.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.h1,{id:"pagerview",children:"Pagerview"}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.strong,{children:"PagerView"}),' component is that is designed to create a tab-based view with a sliding indicator on top of it. It uses the "react-native-pager-view" library to handle animations.']}),"\n",(0,n.jsx)(t.h3,{id:"import",children:"Import"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-js",children:"import { PagerView } from '@tra-tech/react-native-kitra';\n \n"})}),"\n",(0,n.jsx)(t.h3,{id:"usage",children:"Usage"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-js",children:"import { PagerView } from '@tra-tech/react-native-kitra';\n\nimport { Text, View, StyleSheet } from 'react-native';\n\nconst App = () => (\n \n \n \n Pager\n \n \n View\n \n \n Component\n \n \n \n);\n\nconst style = StyleSheet.create({\n itemContainer: { flex: 1, alignItems: 'center', justifyContent: 'center' },\n});\n\nexport default App;\n \n"})}),"\n",(0,n.jsx)(t.h3,{id:"props",children:"Props"}),"\n",(0,n.jsxs)(t.table,{children:[(0,n.jsx)(t.thead,{children:(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.th,{children:"Prop name"}),(0,n.jsx)(t.th,{children:"Type"}),(0,n.jsx)(t.th,{children:"Required"}),(0,n.jsx)(t.th,{children:"Description"})]})}),(0,n.jsxs)(t.tbody,{children:[(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"children"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.a,{href:"https://reactnative.dev/docs/react-node",children:(0,n.jsx)(t.code,{children:"React.ReactNode"})})}),(0,n.jsx)(t.td,{children:"Yes"}),(0,n.jsx)(t.td,{children:"A required prop that represents the content to display within the PagerView component."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"containerStyle"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,n.jsx)(t.code,{children:"StyleProp"})})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"Additional styles to apply to the pager view container."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"pageContainerStyle"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,n.jsx)(t.code,{children:"StyleProp"})})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"Additional styles to apply to the page container."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"headerTextColor"}),(0,n.jsxs)(t.td,{children:[(0,n.jsx)(t.code,{children:"{select: string,"}),(0,n.jsx)("br",{}),(0,n.jsx)(t.code,{children:" default: string}"})]}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"Text colors of header text."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"headerSliderStyle"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,n.jsx)(t.code,{children:"StyleProp"})})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"Style of header slider."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"headerContainerStyle"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,n.jsx)(t.code,{children:"StyleProp"})})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"Style of header slider container."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"headerTextStyle"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.a,{href:"https://reactnative.dev/docs/text-style-props",children:(0,n.jsx)(t.code,{children:"StyleProp"})})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"Text style of header text."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"injectPagerRef"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"boolean"})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsxs)(t.td,{children:["An optional boolean prop that determines whether to inject the PagerView reference into each child component's props. Default value: ",(0,n.jsx)(t.code,{children:"false"})]})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"showDivider"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"boolean"})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsxs)(t.td,{children:["Determines whether the divider is shown or not. Default value:",(0,n.jsx)(t.code,{children:"true"})]})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"dividerStyle"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,n.jsx)(t.code,{children:"StyleProp"})})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"Style of divider"})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"dividerColor"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"string"})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"Color of divider"})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"icons"}),(0,n.jsxs)(t.td,{children:[(0,n.jsx)(t.code,{children:"React.ReactElement"})})," []"]}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"Icon list for header texts."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"theme"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"UITheme "})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"The theme to use for the component."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"typography"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"UITypography"})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"The typography to use for the component."})]})]})]})]})}function h(e={}){const{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(a,{...e})}):a(e)}},1151:(e,t,r)=>{r.d(t,{Z:()=>o,a:()=>s});var n=r(7294);const i={},d=n.createContext(i);function s(e){const t=n.useContext(d);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:s(e.components),n.createElement(d.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[8593],{1483:(e,t,r)=>{r.r(t),r.d(t,{assets:()=>c,contentTitle:()=>s,default:()=>h,frontMatter:()=>d,metadata:()=>o,toc:()=>l});var n=r(5893),i=r(1151);const d={sidebar_position:14},s="Pagerview",o={id:"components/pagerview",title:"Pagerview",description:'The PagerView component is that is designed to create a tab-based view with a sliding indicator on top of it. It uses the "react-native-pager-view" library to handle animations.',source:"@site/versioned_docs/version-1.x/components/pagerview.md",sourceDirName:"components",slug:"/components/pagerview",permalink:"/react-native-kitra/docs/components/pagerview",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/versioned_docs/version-1.x/components/pagerview.md",tags:[],version:"1.x",lastUpdatedAt:1709646294,formattedLastUpdatedAt:"Mar 5, 2024",sidebarPosition:14,frontMatter:{sidebar_position:14},sidebar:"ComponentsSidebar",previous:{title:"Modal",permalink:"/react-native-kitra/docs/components/modal"},next:{title:"Progress Bar",permalink:"/react-native-kitra/docs/components/progress-bar"}},c={},l=[{value:"Import",id:"import",level:3},{value:"Usage",id:"usage",level:3},{value:"Props",id:"props",level:3}];function a(e){const t={a:"a",code:"code",h1:"h1",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,i.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.h1,{id:"pagerview",children:"Pagerview"}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.strong,{children:"PagerView"}),' component is that is designed to create a tab-based view with a sliding indicator on top of it. It uses the "react-native-pager-view" library to handle animations.']}),"\n",(0,n.jsx)(t.h3,{id:"import",children:"Import"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-js",children:"import { PagerView } from '@tra-tech/react-native-kitra';\n \n"})}),"\n",(0,n.jsx)(t.h3,{id:"usage",children:"Usage"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-js",children:"import { PagerView } from '@tra-tech/react-native-kitra';\n\nimport { Text, View, StyleSheet } from 'react-native';\n\nconst App = () => (\n \n \n \n Pager\n \n \n View\n \n \n Component\n \n \n \n);\n\nconst style = StyleSheet.create({\n itemContainer: { flex: 1, alignItems: 'center', justifyContent: 'center' },\n});\n\nexport default App;\n \n"})}),"\n",(0,n.jsx)(t.h3,{id:"props",children:"Props"}),"\n",(0,n.jsxs)(t.table,{children:[(0,n.jsx)(t.thead,{children:(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.th,{children:"Prop name"}),(0,n.jsx)(t.th,{children:"Type"}),(0,n.jsx)(t.th,{children:"Required"}),(0,n.jsx)(t.th,{children:"Description"})]})}),(0,n.jsxs)(t.tbody,{children:[(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"children"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.a,{href:"https://reactnative.dev/docs/react-node",children:(0,n.jsx)(t.code,{children:"React.ReactNode"})})}),(0,n.jsx)(t.td,{children:"Yes"}),(0,n.jsx)(t.td,{children:"A required prop that represents the content to display within the PagerView component."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"containerStyle"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,n.jsx)(t.code,{children:"StyleProp"})})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"Additional styles to apply to the pager view container."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"pageContainerStyle"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,n.jsx)(t.code,{children:"StyleProp"})})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"Additional styles to apply to the page container."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"headerTextColor"}),(0,n.jsxs)(t.td,{children:[(0,n.jsx)(t.code,{children:"{select: string,"}),(0,n.jsx)("br",{}),(0,n.jsx)(t.code,{children:" default: string}"})]}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"Text colors of header text."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"headerSliderStyle"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,n.jsx)(t.code,{children:"StyleProp"})})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"Style of header slider."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"headerContainerStyle"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,n.jsx)(t.code,{children:"StyleProp"})})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"Style of header slider container."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"headerTextStyle"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.a,{href:"https://reactnative.dev/docs/text-style-props",children:(0,n.jsx)(t.code,{children:"StyleProp"})})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"Text style of header text."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"injectPagerRef"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"boolean"})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsxs)(t.td,{children:["An optional boolean prop that determines whether to inject the PagerView reference into each child component's props. Default value: ",(0,n.jsx)(t.code,{children:"false"})]})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"showDivider"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"boolean"})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsxs)(t.td,{children:["Determines whether the divider is shown or not. Default value:",(0,n.jsx)(t.code,{children:"true"})]})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"dividerStyle"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,n.jsx)(t.code,{children:"StyleProp"})})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"Style of divider"})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"dividerColor"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"string"})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"Color of divider"})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"icons"}),(0,n.jsxs)(t.td,{children:[(0,n.jsx)(t.code,{children:"React.ReactElement"})})," []"]}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"Icon list for header texts."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"theme"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"UITheme "})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"The theme to use for the component."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"typography"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"UITypography"})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"The typography to use for the component."})]})]})]})]})}function h(e={}){const{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(a,{...e})}):a(e)}},1151:(e,t,r)=>{r.d(t,{Z:()=>o,a:()=>s});var n=r(7294);const i={},d=n.createContext(i);function s(e){const t=n.useContext(d);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:s(e.components),n.createElement(d.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/7410995e.7b4ab434.js b/assets/js/7410995e.b3eea888.js similarity index 98% rename from assets/js/7410995e.7b4ab434.js rename to assets/js/7410995e.b3eea888.js index f552b64..b2fb814 100644 --- a/assets/js/7410995e.7b4ab434.js +++ b/assets/js/7410995e.b3eea888.js @@ -1 +1 @@ -"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[498],{4657:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>i,default:()=>h,frontMatter:()=>o,metadata:()=>c,toc:()=>l});var r=n(5893),s=n(1151);const o={sidebar_position:10},i="Icon",c={id:"components/icon",title:"Icon",description:"The Icon component that uses `react-native-vector-icons`.",source:"@site/versioned_docs/version-1.x/components/icon.md",sourceDirName:"components",slug:"/components/icon",permalink:"/react-native-kitra/docs/components/icon",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/versioned_docs/version-1.x/components/icon.md",tags:[],version:"1.x",lastUpdatedAt:1707292585,formattedLastUpdatedAt:"Feb 7, 2024",sidebarPosition:10,frontMatter:{sidebar_position:10},sidebar:"ComponentsSidebar",previous:{title:"Dropdown",permalink:"/react-native-kitra/docs/components/dropdown"},next:{title:"Menu",permalink:"/react-native-kitra/docs/components/menu"}},d={},l=[{value:"Import",id:"import",level:3},{value:"Import",id:"import-1",level:3},{value:"Props",id:"props",level:3}];function a(e){const t={a:"a",code:"code",h1:"h1",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,s.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h1,{id:"icon",children:"Icon"}),"\n",(0,r.jsxs)(t.p,{children:["The ",(0,r.jsx)(t.strong,{children:"Icon"})," component that uses ",(0,r.jsx)(t.a,{href:"https://github.com/oblador/react-native-vector-icons",children:(0,r.jsx)(t.code,{children:"react-native-vector-icons"})}),"."]}),"\n",(0,r.jsx)(t.h3,{id:"import",children:"Import"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"import { Icon } from '@tra-tech/react-native-kitra';\n"})}),"\n",(0,r.jsx)(t.h3,{id:"import-1",children:"Import"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:'import { Icon } from \'@tra-tech/react-native-kitra\';\nimport { View } from \'react-native\';\n\nconst App = () => (\n \n \n \n \n);\n\nexport default App;\n\n'})}),"\n",(0,r.jsx)(t.h3,{id:"props",children:"Props"}),"\n",(0,r.jsxs)(t.table,{children:[(0,r.jsx)(t.thead,{children:(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.th,{children:"Prop name"}),(0,r.jsx)(t.th,{children:"Type"}),(0,r.jsx)(t.th,{children:"Required"}),(0,r.jsx)(t.th,{children:"Description"})]})}),(0,r.jsxs)(t.tbody,{children:[(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"type"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.a,{href:"https://github.com/oblador/react-native-vector-icons#bundled-icon-sets",children:(0,r.jsx)(t.code,{children:"Icon Sets"})})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsxs)(t.td,{children:["Name of icon set. Default value: ",(0,r.jsx)(t.code,{children:"'ionicons'"}),"."]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"name"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"string"})}),(0,r.jsx)(t.td,{children:"Yes"}),(0,r.jsx)(t.td,{children:"Name of icon."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"color"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"string"})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"Color of icon."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"size"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"number"})}),(0,r.jsx)(t.td,{children:"Yes"}),(0,r.jsx)(t.td,{children:"Size of icon."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"allowFontScaling"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"boolean"})}),(0,r.jsx)(t.td,{children:"Yes"}),(0,r.jsxs)(t.td,{children:["Specifies whether fonts should scale to respect Text Size accessibility settings. Default value: ",(0,r.jsx)(t.code,{children:"true"}),"."]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"style"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,r.jsx)(t.code,{children:"StyleProp"})})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"Additional styles to apply to the divider."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"theme"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"UITheme "})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"The UI theme to use for the component."})]})]})]})]})}function h(e={}){const{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(a,{...e})}):a(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>c,a:()=>i});var r=n(7294);const s={},o=r.createContext(s);function i(e){const t=r.useContext(o);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:i(e.components),r.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[498],{4657:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>i,default:()=>h,frontMatter:()=>o,metadata:()=>c,toc:()=>l});var r=n(5893),s=n(1151);const o={sidebar_position:10},i="Icon",c={id:"components/icon",title:"Icon",description:"The Icon component that uses `react-native-vector-icons`.",source:"@site/versioned_docs/version-1.x/components/icon.md",sourceDirName:"components",slug:"/components/icon",permalink:"/react-native-kitra/docs/components/icon",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/versioned_docs/version-1.x/components/icon.md",tags:[],version:"1.x",lastUpdatedAt:1709646294,formattedLastUpdatedAt:"Mar 5, 2024",sidebarPosition:10,frontMatter:{sidebar_position:10},sidebar:"ComponentsSidebar",previous:{title:"Dropdown",permalink:"/react-native-kitra/docs/components/dropdown"},next:{title:"Menu",permalink:"/react-native-kitra/docs/components/menu"}},d={},l=[{value:"Import",id:"import",level:3},{value:"Import",id:"import-1",level:3},{value:"Props",id:"props",level:3}];function a(e){const t={a:"a",code:"code",h1:"h1",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,s.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h1,{id:"icon",children:"Icon"}),"\n",(0,r.jsxs)(t.p,{children:["The ",(0,r.jsx)(t.strong,{children:"Icon"})," component that uses ",(0,r.jsx)(t.a,{href:"https://github.com/oblador/react-native-vector-icons",children:(0,r.jsx)(t.code,{children:"react-native-vector-icons"})}),"."]}),"\n",(0,r.jsx)(t.h3,{id:"import",children:"Import"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"import { Icon } from '@tra-tech/react-native-kitra';\n"})}),"\n",(0,r.jsx)(t.h3,{id:"import-1",children:"Import"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:'import { Icon } from \'@tra-tech/react-native-kitra\';\nimport { View } from \'react-native\';\n\nconst App = () => (\n \n \n \n \n);\n\nexport default App;\n\n'})}),"\n",(0,r.jsx)(t.h3,{id:"props",children:"Props"}),"\n",(0,r.jsxs)(t.table,{children:[(0,r.jsx)(t.thead,{children:(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.th,{children:"Prop name"}),(0,r.jsx)(t.th,{children:"Type"}),(0,r.jsx)(t.th,{children:"Required"}),(0,r.jsx)(t.th,{children:"Description"})]})}),(0,r.jsxs)(t.tbody,{children:[(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"type"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.a,{href:"https://github.com/oblador/react-native-vector-icons#bundled-icon-sets",children:(0,r.jsx)(t.code,{children:"Icon Sets"})})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsxs)(t.td,{children:["Name of icon set. Default value: ",(0,r.jsx)(t.code,{children:"'ionicons'"}),"."]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"name"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"string"})}),(0,r.jsx)(t.td,{children:"Yes"}),(0,r.jsx)(t.td,{children:"Name of icon."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"color"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"string"})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"Color of icon."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"size"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"number"})}),(0,r.jsx)(t.td,{children:"Yes"}),(0,r.jsx)(t.td,{children:"Size of icon."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"allowFontScaling"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"boolean"})}),(0,r.jsx)(t.td,{children:"Yes"}),(0,r.jsxs)(t.td,{children:["Specifies whether fonts should scale to respect Text Size accessibility settings. Default value: ",(0,r.jsx)(t.code,{children:"true"}),"."]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"style"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,r.jsx)(t.code,{children:"StyleProp"})})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"Additional styles to apply to the divider."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"theme"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"UITheme "})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"The UI theme to use for the component."})]})]})]})]})}function h(e={}){const{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(a,{...e})}):a(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>c,a:()=>i});var r=n(7294);const s={},o=r.createContext(s);function i(e){const t=r.useContext(o);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:i(e.components),r.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/7628467b.c6c94934.js b/assets/js/7628467b.ddeceeda.js similarity index 98% rename from assets/js/7628467b.c6c94934.js rename to assets/js/7628467b.ddeceeda.js index 2d7bff0..e7fdd8c 100644 --- a/assets/js/7628467b.c6c94934.js +++ b/assets/js/7628467b.ddeceeda.js @@ -1 +1 @@ -"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[3602],{6600:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>o,default:()=>h,frontMatter:()=>r,metadata:()=>d,toc:()=>l});var s=n(5893),i=n(1151);const r={sidebar_position:1,title:"Accordion List"},o=void 0,d={id:"components/accordion-list",title:"Accordion List",description:"The Accordion List component provides an accordion-style list with collapsible sections. The component also supports customization of labels, icons, styles, and themes.",source:"@site/docs/components/accordion-list.md",sourceDirName:"components",slug:"/components/accordion-list",permalink:"/react-native-kitra/docs/next/components/accordion-list",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/docs/components/accordion-list.md",tags:[],version:"current",lastUpdatedAt:1707292585,formattedLastUpdatedAt:"Feb 7, 2024",sidebarPosition:1,frontMatter:{sidebar_position:1,title:"Accordion List"},sidebar:"ComponentsSidebar",next:{title:"Activity Indicator",permalink:"/react-native-kitra/docs/next/components/activity-indicator"}},c={},l=[{value:"Import",id:"import",level:3},{value:"Usage",id:"usage",level:3},{value:"Props",id:"props",level:3}];function a(e){const t={a:"a",code:"code",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,i.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.strong,{children:"Accordion List"})," component provides an accordion-style list with collapsible sections. The component also supports customization of labels, icons, styles, and themes.\nIt uses animations from the ",(0,s.jsx)(t.a,{href:"https://docs.swmansion.com/react-native-reanimated/",children:"react-native-reanimated"})," library to animate the opening and closing of the accordion sections."]}),"\n",(0,s.jsx)(t.h3,{id:"import",children:"Import"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",children:'import { AccordionList } from "@tra-tech/react-native-kitra"; \n'})}),"\n",(0,s.jsx)(t.h3,{id:"usage",children:"Usage"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",children:"import { AccordionList } from \"@tra-tech/react-native-kitra\"; \n\nconst AccordionListData =[\n {name:'React',value:1},\n {name:'Native',value:2},\n {name:'Kitra',value:3},\n {name:'React Native Kitra',value:4}]\n\nconst App =()=>{\n return(\n \n x.name}\n itemDisplay={x => x.name}\n onSelect={x => console.log(x)}\n label=\"Grey Daze\"\n left={() => }\n data={AccordionListData}\n />\n \n )\n }\n\n export default App;\n"})}),"\n",(0,s.jsx)(t.h3,{id:"props",children:"Props"}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{children:"Name"}),(0,s.jsx)(t.th,{children:"Type"}),(0,s.jsx)(t.th,{children:"Required"}),(0,s.jsx)(t.th,{children:"Description"})]})}),(0,s.jsxs)(t.tbody,{children:[(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"data"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"Array "})}),(0,s.jsx)(t.td,{children:"Yes"}),(0,s.jsx)(t.td,{children:"The data to render in the accordion list."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"label"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"string"})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"The label to display at the top of the accordion list."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"left"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"(expanded: boolean) => React.ReactNode "})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"An optional function that returns a React element to display on the left side of the label."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"right"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"(expanded: boolean) => React.ReactNode"})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"An optional function that returns a React element to display on the right side of the label."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"labelContainerStyle"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,s.jsx)(t.code,{children:"StyleProp"})})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"Additional styles to apply to the label container."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"labelStyle"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"https://reactnative.dev/docs/text-style-props",children:(0,s.jsx)(t.code,{children:"StyleProp"})})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"Additional styles to apply to the label text."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"rowTextStyle"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"https://reactnative.dev/docs/text-style-props",children:(0,s.jsx)(t.code,{children:"StyleProp"})})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"Additional styles to apply to the row text."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"rowStyle"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,s.jsx)(t.code,{children:"StyleProp"})})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"Additional styles to apply to each row container."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"onSelect"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"(item: any) => void "})}),(0,s.jsx)(t.td,{children:"Yes"}),(0,s.jsx)(t.td,{children:"A callback function that will be called when a row is selected."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"itemDisplay"}),(0,s.jsx)(t.td,{children:(0,s.jsx)("code",{children:"(item: any) => string | JSX.Element | null "})}),(0,s.jsx)(t.td,{children:"Yes"}),(0,s.jsx)(t.td,{children:"A function that returns a string or JSX element to display for each row."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"theme"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"UITheme"})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"The theme to use for the component."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"typography"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"UITypography"})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"The typography to use for the component."})]})]})]})]})}function h(e={}){const{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(a,{...e})}):a(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>d,a:()=>o});var s=n(7294);const i={},r=s.createContext(i);function o(e){const t=s.useContext(r);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function d(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:o(e.components),s.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[3602],{6600:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>o,default:()=>h,frontMatter:()=>r,metadata:()=>d,toc:()=>l});var s=n(5893),i=n(1151);const r={sidebar_position:1,title:"Accordion List"},o=void 0,d={id:"components/accordion-list",title:"Accordion List",description:"The Accordion List component provides an accordion-style list with collapsible sections. The component also supports customization of labels, icons, styles, and themes.",source:"@site/docs/components/accordion-list.md",sourceDirName:"components",slug:"/components/accordion-list",permalink:"/react-native-kitra/docs/next/components/accordion-list",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/docs/components/accordion-list.md",tags:[],version:"current",lastUpdatedAt:1709646294,formattedLastUpdatedAt:"Mar 5, 2024",sidebarPosition:1,frontMatter:{sidebar_position:1,title:"Accordion List"},sidebar:"ComponentsSidebar",next:{title:"Activity Indicator",permalink:"/react-native-kitra/docs/next/components/activity-indicator"}},c={},l=[{value:"Import",id:"import",level:3},{value:"Usage",id:"usage",level:3},{value:"Props",id:"props",level:3}];function a(e){const t={a:"a",code:"code",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,i.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.strong,{children:"Accordion List"})," component provides an accordion-style list with collapsible sections. The component also supports customization of labels, icons, styles, and themes.\nIt uses animations from the ",(0,s.jsx)(t.a,{href:"https://docs.swmansion.com/react-native-reanimated/",children:"react-native-reanimated"})," library to animate the opening and closing of the accordion sections."]}),"\n",(0,s.jsx)(t.h3,{id:"import",children:"Import"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",children:'import { AccordionList } from "@tra-tech/react-native-kitra"; \n'})}),"\n",(0,s.jsx)(t.h3,{id:"usage",children:"Usage"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",children:"import { AccordionList } from \"@tra-tech/react-native-kitra\"; \n\nconst AccordionListData =[\n {name:'React',value:1},\n {name:'Native',value:2},\n {name:'Kitra',value:3},\n {name:'React Native Kitra',value:4}]\n\nconst App =()=>{\n return(\n \n x.name}\n itemDisplay={x => x.name}\n onSelect={x => console.log(x)}\n label=\"Grey Daze\"\n left={() => }\n data={AccordionListData}\n />\n \n )\n }\n\n export default App;\n"})}),"\n",(0,s.jsx)(t.h3,{id:"props",children:"Props"}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{children:"Name"}),(0,s.jsx)(t.th,{children:"Type"}),(0,s.jsx)(t.th,{children:"Required"}),(0,s.jsx)(t.th,{children:"Description"})]})}),(0,s.jsxs)(t.tbody,{children:[(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"data"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"Array "})}),(0,s.jsx)(t.td,{children:"Yes"}),(0,s.jsx)(t.td,{children:"The data to render in the accordion list."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"label"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"string"})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"The label to display at the top of the accordion list."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"left"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"(expanded: boolean) => React.ReactNode "})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"An optional function that returns a React element to display on the left side of the label."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"right"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"(expanded: boolean) => React.ReactNode"})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"An optional function that returns a React element to display on the right side of the label."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"labelContainerStyle"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,s.jsx)(t.code,{children:"StyleProp"})})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"Additional styles to apply to the label container."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"labelStyle"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"https://reactnative.dev/docs/text-style-props",children:(0,s.jsx)(t.code,{children:"StyleProp"})})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"Additional styles to apply to the label text."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"rowTextStyle"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"https://reactnative.dev/docs/text-style-props",children:(0,s.jsx)(t.code,{children:"StyleProp"})})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"Additional styles to apply to the row text."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"rowStyle"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,s.jsx)(t.code,{children:"StyleProp"})})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"Additional styles to apply to each row container."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"onSelect"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"(item: any) => void "})}),(0,s.jsx)(t.td,{children:"Yes"}),(0,s.jsx)(t.td,{children:"A callback function that will be called when a row is selected."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"itemDisplay"}),(0,s.jsx)(t.td,{children:(0,s.jsx)("code",{children:"(item: any) => string | JSX.Element | null "})}),(0,s.jsx)(t.td,{children:"Yes"}),(0,s.jsx)(t.td,{children:"A function that returns a string or JSX element to display for each row."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"theme"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"UITheme"})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"The theme to use for the component."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"typography"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"UITypography"})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"The typography to use for the component."})]})]})]})]})}function h(e={}){const{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(a,{...e})}):a(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>d,a:()=>o});var s=n(7294);const i={},r=s.createContext(i);function o(e){const t=s.useContext(r);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function d(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:o(e.components),s.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/7a52f50e.37d40ee9.js b/assets/js/7a52f50e.37d40ee9.js new file mode 100644 index 0000000..499d6b3 --- /dev/null +++ b/assets/js/7a52f50e.37d40ee9.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[781],{6506:(t,e,n)=>{n.r(e),n.d(e,{assets:()=>a,contentTitle:()=>c,default:()=>h,frontMatter:()=>r,metadata:()=>s,toc:()=>d});var o=n(5893),i=n(1151);const r={sidebar_position:2},c=void 0,s={id:"doc/Notification",title:"Notification",description:"Applying notification",source:"@site/versioned_docs/version-1.x/doc/Notification.md",sourceDirName:"doc",slug:"/doc/Notification",permalink:"/react-native-kitra/docs/doc/Notification",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/versioned_docs/version-1.x/doc/Notification.md",tags:[],version:"1.x",lastUpdatedAt:1709646294,formattedLastUpdatedAt:"Mar 5, 2024",sidebarPosition:2,frontMatter:{sidebar_position:2},sidebar:"DocSidebar",previous:{title:"Getting Started",permalink:"/react-native-kitra/docs/doc/getting-started"},next:{title:"Theme",permalink:"/react-native-kitra/docs/doc/Theme"}},a={},d=[{value:"Applying notification",id:"applying-notification",level:2},{value:"Applying custom notification",id:"applying-custom-notification",level:2},{value:"Show notifications on screen",id:"show-notifications-on-screen",level:2},{value:"Kitra Provider Props",id:"kitra-provider-props",level:3},{value:"showNotification Types",id:"shownotification-types",level:3}];function l(t){const e={a:"a",code:"code",h2:"h2",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,i.a)(),...t.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.h2,{id:"applying-notification",children:"Applying notification"}),"\n",(0,o.jsx)(e.p,{children:"To use notification, you need to wrap the root component with provider."}),"\n",(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:"language-jsx",children:"import { KitraProvider } from '@tra-tech/react-native-kitra';\nimport App from './src/App';\n\nexport default function Main() {\n return (\n \n \n \n );\n}\n"})}),"\n",(0,o.jsx)(e.h2,{id:"applying-custom-notification",children:"Applying custom notification"}),"\n",(0,o.jsx)(e.p,{children:"To use notification, you need to wrap the root component with provider."}),"\n",(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:"language-jsx",children:"\nimport { KitraProvider } from '@tra-tech/react-native-kitra';\nimport App from './src/App';\n\nconst linearMessageType = (theme: any, colorSheme: any) => ({\n SUCCESS: {\n backgroundColor: {\n color: theme.successBackground,\n location: [0.2, 1],\n bottomColor: theme.successBottom,\n bottomLocation: [0, 0.8],\n },\n icon: ,\n },\n WARNING: {\n backgroundColor: {\n color: theme.warningBackground,\n location: colorSheme === 'dark' ? [0, 0.8] : [0, 0.2, 0.4, 0.6, 0.8],\n bottomColor: theme.warningBottom,\n bottomLocation: [0, 0.1, 0.2, 0.3, 0.4, 0.6, 0.8],\n },\n icon: ,\n },\n ERROR: {\n backgroundColor: {\n color: theme.errorBackground,\n location: colorSheme === 'dark' ? [0.2, 1] : [0, 0.3, 0.6],\n bottomColor: theme.errorBottom,\n bottomLocation: [0, 0.2, 0.4, 0.6, 0.8],\n },\n icon: ,\n },\n});\n\nexport default function Main() {\n return (\n linearMessageType(theme, colorScheme)}>\n \n \n );\n}\n"})}),"\n",(0,o.jsx)(e.h2,{id:"show-notifications-on-screen",children:"Show notifications on screen"}),"\n",(0,o.jsxs)(e.p,{children:["To show notifications on the screen, use the ",(0,o.jsx)(e.strong,{children:"useNotification"})," hook."]}),"\n",(0,o.jsxs)(e.p,{children:["The ",(0,o.jsx)(e.strong,{children:"showNotification"})," function is used to organize and show notifications. You can customize these values to create your own notification. You can also use linear gradient colors."]}),"\n",(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:"language-jsx",children:"import { useNotification } from '@tra-tech/react-native-kitra';\n\nexport function App() {\n const {showNotification}= useNotification();\n\n return (\n \n showNotification({ type: 'WARNING', header: 'WARNING NOTIFICATION', message: 'Warning Information' })}>\n Show Notification\n \n \n );\n}\n"})}),"\n",(0,o.jsx)(e.h3,{id:"kitra-provider-props",children:"Kitra Provider Props"}),"\n",(0,o.jsxs)(e.table,{children:[(0,o.jsx)(e.thead,{children:(0,o.jsxs)(e.tr,{children:[(0,o.jsx)(e.th,{children:"Prop name"}),(0,o.jsx)(e.th,{children:"Type"}),(0,o.jsx)(e.th,{children:"Required"}),(0,o.jsx)(e.th,{children:"Description"})]})}),(0,o.jsxs)(e.tbody,{children:[(0,o.jsxs)(e.tr,{children:[(0,o.jsx)(e.td,{children:"containerStyle"}),(0,o.jsx)(e.td,{children:(0,o.jsx)(e.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,o.jsx)(e.code,{children:"StyleProp"})})}),(0,o.jsx)(e.td,{children:"No"}),(0,o.jsx)(e.td,{children:"Additional styles to apply to the notification container."})]}),(0,o.jsxs)(e.tr,{children:[(0,o.jsx)(e.td,{children:"linearMessageType"}),(0,o.jsxs)(e.td,{children:[(0,o.jsx)(e.code,{children:"(theme?:any, colorScheme?:('dark'|'light')=> {[key:string]:"}),(0,o.jsx)("br",{}),(0,o.jsx)(e.code,{children:" {backgroundColor:{color:string[],"}),(0,o.jsx)("br",{}),(0,o.jsx)(e.code,{children:" location:number [],"}),(0,o.jsx)("br",{}),(0,o.jsx)(e.code,{children:"bottomColor:string [],"}),(0,o.jsx)("br",{}),(0,o.jsx)(e.code,{children:"bottomLocation:number []} icon:React.ReactNodeonPress:()=>void}}"})]}),(0,o.jsx)(e.td,{children:"No"}),(0,o.jsx)(e.td,{children:"Notification linear gradient style to show."})]}),(0,o.jsxs)(e.tr,{children:[(0,o.jsx)(e.td,{children:"limit"}),(0,o.jsx)(e.td,{children:(0,o.jsx)(e.code,{children:"number"})}),(0,o.jsx)(e.td,{children:"No"}),(0,o.jsxs)(e.td,{children:["Maximum notification to show. Default value: ",(0,o.jsx)(e.code,{children:"3"})]})]}),(0,o.jsxs)(e.tr,{children:[(0,o.jsx)(e.td,{children:"onPress"}),(0,o.jsx)(e.td,{children:(0,o.jsx)(e.code,{children:"()=>void"})}),(0,o.jsx)(e.td,{children:"No"}),(0,o.jsx)(e.td,{children:"Function to execute on press."})]}),(0,o.jsxs)(e.tr,{children:[(0,o.jsx)(e.td,{children:"messageType"}),(0,o.jsx)(e.td,{children:(0,o.jsx)(e.code,{children:" [key: status]: { backgroundColor: string, icon: React.ReactNode}"})}),(0,o.jsx)(e.td,{children:"No"}),(0,o.jsx)(e.td,{children:"Notification style to show."})]})]})]}),"\n",(0,o.jsx)(e.h3,{id:"shownotification-types",children:"showNotification Types"}),"\n",(0,o.jsxs)(e.table,{children:[(0,o.jsx)(e.thead,{children:(0,o.jsxs)(e.tr,{children:[(0,o.jsx)(e.th,{children:"Name"}),(0,o.jsx)(e.th,{children:"Type"})]})}),(0,o.jsxs)(e.tbody,{children:[(0,o.jsxs)(e.tr,{children:[(0,o.jsx)(e.td,{children:"showNotification"}),(0,o.jsx)(e.td,{children:(0,o.jsx)(e.code,{children:"{type:status, header?:string, message?:string"})})]}),(0,o.jsxs)(e.tr,{children:[(0,o.jsx)(e.td,{children:"status"}),(0,o.jsxs)(e.td,{children:["status: ",(0,o.jsx)("code",{children:" 'SUCCESS' | 'WARNING' | 'ERROR' | 'INFO'"})]})]})]})]})]})}function h(t={}){const{wrapper:e}={...(0,i.a)(),...t.components};return e?(0,o.jsx)(e,{...t,children:(0,o.jsx)(l,{...t})}):l(t)}},1151:(t,e,n)=>{n.d(e,{Z:()=>s,a:()=>c});var o=n(7294);const i={},r=o.createContext(i);function c(t){const e=o.useContext(r);return o.useMemo((function(){return"function"==typeof t?t(e):{...e,...t}}),[e,t])}function s(t){let e;return e=t.disableParentContext?"function"==typeof t.components?t.components(i):t.components||i:c(t.components),o.createElement(r.Provider,{value:e},t.children)}}}]); \ No newline at end of file diff --git a/assets/js/7a52f50e.7c984abe.js b/assets/js/7a52f50e.7c984abe.js deleted file mode 100644 index 1ede0c7..0000000 --- a/assets/js/7a52f50e.7c984abe.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[781],{6506:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>a,contentTitle:()=>c,default:()=>h,frontMatter:()=>r,metadata:()=>s,toc:()=>d});var o=n(5893),i=n(1151);const r={sidebar_position:2},c=void 0,s={id:"doc/Notification",title:"Notification",description:"Applying notification",source:"@site/versioned_docs/version-1.x/doc/Notification.md",sourceDirName:"doc",slug:"/doc/Notification",permalink:"/react-native-kitra/docs/doc/Notification",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/versioned_docs/version-1.x/doc/Notification.md",tags:[],version:"1.x",lastUpdatedAt:1707292585,formattedLastUpdatedAt:"Feb 7, 2024",sidebarPosition:2,frontMatter:{sidebar_position:2},sidebar:"DocSidebar",previous:{title:"Getting Started",permalink:"/react-native-kitra/docs/doc/getting-started"},next:{title:"Theme",permalink:"/react-native-kitra/docs/doc/Theme"}},a={},d=[{value:"Applying notification",id:"applying-notification",level:2},{value:"Applying custom notification",id:"applying-custom-notification",level:2},{value:"Show notifications on screen",id:"show-notifications-on-screen",level:2},{value:"Kitra Provider Props",id:"kitra-provider-props",level:3},{value:"showNotification Types",id:"shownotification-types",level:3}];function l(e){const t={a:"a",code:"code",h2:"h2",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,i.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.h2,{id:"applying-notification",children:"Applying notification"}),"\n",(0,o.jsx)(t.p,{children:"To use notification, you need to wrap the root component with provider."}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-jsx",children:"import { KitraProvider } from '@tra-tech/react-native-kitra';\nimport App from './src/App';\n\nexport default function Main() {\n return (\n \n \n \n );\n}\n"})}),"\n",(0,o.jsx)(t.h2,{id:"applying-custom-notification",children:"Applying custom notification"}),"\n",(0,o.jsx)(t.p,{children:"To use notification, you need to wrap the root component with provider."}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-jsx",children:"\nimport { KitraProvider } from '@tra-tech/react-native-kitra';\nimport App from './src/App';\n\nconst linearMessageType = (theme: any, colorSheme: any) => ({\n SUCCESS: {\n backgroundColor: {\n color: theme.successBackground,\n location: [0.2, 1],\n bottomColor: theme.successBottom,\n bottomLocation: [0, 0.8],\n },\n icon: ,\n },\n WARNING: {\n backgroundColor: {\n color: theme.warningBackground,\n location: colorSheme === 'dark' ? [0, 0.8] : [0, 0.2, 0.4, 0.6, 0.8],\n bottomColor: theme.warningBottom,\n bottomLocation: [0, 0.1, 0.2, 0.3, 0.4, 0.6, 0.8],\n },\n icon: ,\n },\n ERROR: {\n backgroundColor: {\n color: theme.errorBackground,\n location: colorSheme === 'dark' ? [0.2, 1] : [0, 0.3, 0.6],\n bottomColor: theme.errorBottom,\n bottomLocation: [0, 0.2, 0.4, 0.6, 0.8],\n },\n icon: ,\n },\n});\n\nexport default function Main() {\n return (\n linearMessageType(theme, colorScheme)}>\n \n \n );\n}\n"})}),"\n",(0,o.jsx)(t.h2,{id:"show-notifications-on-screen",children:"Show notifications on screen"}),"\n",(0,o.jsxs)(t.p,{children:["To show notifications on the screen, use the ",(0,o.jsx)(t.strong,{children:"useNotification"})," hook."]}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.strong,{children:"showNotification"})," function is used to organize and show notifications. You can customize these values to create your own notification. You can also use linear gradient colors."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-jsx",children:"import { useNotification } from '@tra-tech/react-native-kitra';\n\nexport function App() {\n const {showNotification}= useNotification();\n\n return (\n \n showNotification({ type: 'WARNING', header: 'WARNING NOTIFICATION', message: 'Warning Information' })}>\n Show Notification\n \n \n );\n}\n"})}),"\n",(0,o.jsx)(t.h3,{id:"kitra-provider-props",children:"Kitra Provider Props"}),"\n",(0,o.jsxs)(t.table,{children:[(0,o.jsx)(t.thead,{children:(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.th,{children:"Prop name"}),(0,o.jsx)(t.th,{children:"Type"}),(0,o.jsx)(t.th,{children:"Required"}),(0,o.jsx)(t.th,{children:"Description"})]})}),(0,o.jsxs)(t.tbody,{children:[(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.td,{children:"containerStyle"}),(0,o.jsx)(t.td,{children:(0,o.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,o.jsx)(t.code,{children:"StyleProp"})})}),(0,o.jsx)(t.td,{children:"No"}),(0,o.jsx)(t.td,{children:"Additional styles to apply to the notification container."})]}),(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.td,{children:"linearMessageType"}),(0,o.jsxs)(t.td,{children:[(0,o.jsx)(t.code,{children:"(theme?:any, colorScheme?:('dark'|'light')=> {[key:string]:"}),(0,o.jsx)("br",{}),(0,o.jsx)(t.code,{children:" {backgroundColor:{color:string[],"}),(0,o.jsx)("br",{}),(0,o.jsx)(t.code,{children:" location:number [],"}),(0,o.jsx)("br",{}),(0,o.jsx)(t.code,{children:"bottomColor:string [],"}),(0,o.jsx)("br",{}),(0,o.jsx)(t.code,{children:"bottomLocation:number []} icon:React.ReactNodeonPress:()=>void}}"})]}),(0,o.jsx)(t.td,{children:"No"}),(0,o.jsx)(t.td,{children:"Notification linear gradient style to show."})]}),(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.td,{children:"limit"}),(0,o.jsx)(t.td,{children:(0,o.jsx)(t.code,{children:"number"})}),(0,o.jsx)(t.td,{children:"No"}),(0,o.jsxs)(t.td,{children:["Maximum notification to show. Default value: ",(0,o.jsx)(t.code,{children:"3"})]})]}),(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.td,{children:"onPress"}),(0,o.jsx)(t.td,{children:(0,o.jsx)(t.code,{children:"()=>void"})}),(0,o.jsx)(t.td,{children:"No"}),(0,o.jsx)(t.td,{children:"Function to execute on press."})]}),(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.td,{children:"messageType"}),(0,o.jsx)(t.td,{children:(0,o.jsx)(t.code,{children:" [key: status]: { backgroundColor: string, icon: React.ReactNode}"})}),(0,o.jsx)(t.td,{children:"No"}),(0,o.jsx)(t.td,{children:"Notification style to show."})]})]})]}),"\n",(0,o.jsx)(t.h3,{id:"shownotification-types",children:"showNotification Types"}),"\n",(0,o.jsxs)(t.table,{children:[(0,o.jsx)(t.thead,{children:(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.th,{children:"Name"}),(0,o.jsx)(t.th,{children:"Type"})]})}),(0,o.jsxs)(t.tbody,{children:[(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.td,{children:"showNotification"}),(0,o.jsx)(t.td,{children:(0,o.jsx)(t.code,{children:"{type:status, header?:string, message?:string"})})]}),(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.td,{children:"status"}),(0,o.jsxs)(t.td,{children:["status: ",(0,o.jsx)("code",{children:" 'SUCCESS' | 'WARNING' | 'ERROR' | 'INFO'"})]})]})]})]})]})}function h(e={}){const{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(l,{...e})}):l(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>c});var o=n(7294);const i={},r=o.createContext(i);function c(e){const t=o.useContext(r);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:c(e.components),o.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/7bbedb8d.a6382dcc.js b/assets/js/7bbedb8d.bbd1f6aa.js similarity index 97% rename from assets/js/7bbedb8d.a6382dcc.js rename to assets/js/7bbedb8d.bbd1f6aa.js index b6bd7e5..50950c3 100644 --- a/assets/js/7bbedb8d.a6382dcc.js +++ b/assets/js/7bbedb8d.bbd1f6aa.js @@ -1 +1 @@ -"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[1682],{8266:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>i,default:()=>h,frontMatter:()=>r,metadata:()=>c,toc:()=>l});var o=n(5893),s=n(1151);const r={sidebar_position:22},i="Toggle Button",c={id:"components/toggle-button",title:"Toggle Button",description:"The ToggleButton component is a custom toggle button that allows users to select from a list of options.",source:"@site/docs/components/toggle-button.md",sourceDirName:"components",slug:"/components/toggle-button",permalink:"/react-native-kitra/docs/next/components/toggle-button",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/docs/components/toggle-button.md",tags:[],version:"current",lastUpdatedAt:1707292585,formattedLastUpdatedAt:"Feb 7, 2024",sidebarPosition:22,frontMatter:{sidebar_position:22},sidebar:"ComponentsSidebar",previous:{title:"Text Input",permalink:"/react-native-kitra/docs/next/components/text-input"}},d={},l=[{value:"Import",id:"import",level:3},{value:"Usage",id:"usage",level:3},{value:"Props",id:"props",level:3}];function a(e){const t={code:"code",h1:"h1",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,s.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.h1,{id:"toggle-button",children:"Toggle Button"}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.strong,{children:"ToggleButton"})," component is a custom toggle button that allows users to select from a list of options."]}),"\n",(0,o.jsx)(t.h3,{id:"import",children:"Import"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-js",children:"import { ToggleButton } from '@tra-tech/react-native-kitra';\n"})}),"\n",(0,o.jsx)(t.h3,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-js",children:"import { ToggleButton } from '@tra-tech/react-native-kitra';\nimport { View } from 'react-native';\n\nconst App = () => (\n \n null },\n { label: 'Native', onPress: () => null },\n { label: 'Kitra', onPress: () => null },\n ]}\n />\n \n);\n\nexport default App;\n"})}),"\n",(0,o.jsx)(t.h3,{id:"props",children:"Props"}),"\n",(0,o.jsxs)(t.table,{children:[(0,o.jsx)(t.thead,{children:(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.th,{children:"Prop Name"}),(0,o.jsx)(t.th,{children:"Data Type"}),(0,o.jsx)(t.th,{children:"Required"}),(0,o.jsx)(t.th,{children:"Description"})]})}),(0,o.jsxs)(t.tbody,{children:[(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.td,{children:(0,o.jsx)(t.code,{children:"buttons"})}),(0,o.jsxs)(t.td,{children:[(0,o.jsx)(t.code,{children:"Array<{ label: string,"}),(0,o.jsx)("br",{}),(0,o.jsx)(t.code,{children:" onPress: (event: boolean) => void,"}),(0,o.jsx)("br",{}),(0,o.jsx)(t.code,{children:"id?: number }>"})]}),(0,o.jsx)(t.td,{children:"Yes"}),(0,o.jsx)(t.td,{children:"Array of buttons."})]}),(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.td,{children:(0,o.jsx)(t.code,{children:"size"})}),(0,o.jsx)(t.td,{children:(0,o.jsx)("code",{children:"'small' | 'medium'"})}),(0,o.jsx)(t.td,{children:"No"}),(0,o.jsxs)(t.td,{children:["The size of the button. Default value: ",(0,o.jsx)(t.code,{children:"'medium'"})]})]}),(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.td,{children:(0,o.jsx)(t.code,{children:"theme"})}),(0,o.jsx)(t.td,{children:(0,o.jsx)(t.code,{children:"UITheme"})}),(0,o.jsx)(t.td,{children:"No"}),(0,o.jsx)(t.td,{children:"The theme to use for the component."})]}),(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.td,{children:(0,o.jsx)(t.code,{children:"typography"})}),(0,o.jsx)(t.td,{children:(0,o.jsx)(t.code,{children:"UITypography"})}),(0,o.jsx)(t.td,{children:"No"}),(0,o.jsx)(t.td,{children:"The typography to use for the component."})]})]})]})]})}function h(e={}){const{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(a,{...e})}):a(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>c,a:()=>i});var o=n(7294);const s={},r=o.createContext(s);function i(e){const t=o.useContext(r);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:i(e.components),o.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[1682],{8266:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>i,default:()=>h,frontMatter:()=>r,metadata:()=>c,toc:()=>l});var o=n(5893),s=n(1151);const r={sidebar_position:22},i="Toggle Button",c={id:"components/toggle-button",title:"Toggle Button",description:"The ToggleButton component is a custom toggle button that allows users to select from a list of options.",source:"@site/docs/components/toggle-button.md",sourceDirName:"components",slug:"/components/toggle-button",permalink:"/react-native-kitra/docs/next/components/toggle-button",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/docs/components/toggle-button.md",tags:[],version:"current",lastUpdatedAt:1709646294,formattedLastUpdatedAt:"Mar 5, 2024",sidebarPosition:22,frontMatter:{sidebar_position:22},sidebar:"ComponentsSidebar",previous:{title:"Text Input",permalink:"/react-native-kitra/docs/next/components/text-input"}},d={},l=[{value:"Import",id:"import",level:3},{value:"Usage",id:"usage",level:3},{value:"Props",id:"props",level:3}];function a(e){const t={code:"code",h1:"h1",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,s.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.h1,{id:"toggle-button",children:"Toggle Button"}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.strong,{children:"ToggleButton"})," component is a custom toggle button that allows users to select from a list of options."]}),"\n",(0,o.jsx)(t.h3,{id:"import",children:"Import"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-js",children:"import { ToggleButton } from '@tra-tech/react-native-kitra';\n"})}),"\n",(0,o.jsx)(t.h3,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-js",children:"import { ToggleButton } from '@tra-tech/react-native-kitra';\nimport { View } from 'react-native';\n\nconst App = () => (\n \n null },\n { label: 'Native', onPress: () => null },\n { label: 'Kitra', onPress: () => null },\n ]}\n />\n \n);\n\nexport default App;\n"})}),"\n",(0,o.jsx)(t.h3,{id:"props",children:"Props"}),"\n",(0,o.jsxs)(t.table,{children:[(0,o.jsx)(t.thead,{children:(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.th,{children:"Prop Name"}),(0,o.jsx)(t.th,{children:"Data Type"}),(0,o.jsx)(t.th,{children:"Required"}),(0,o.jsx)(t.th,{children:"Description"})]})}),(0,o.jsxs)(t.tbody,{children:[(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.td,{children:(0,o.jsx)(t.code,{children:"buttons"})}),(0,o.jsxs)(t.td,{children:[(0,o.jsx)(t.code,{children:"Array<{ label: string,"}),(0,o.jsx)("br",{}),(0,o.jsx)(t.code,{children:" onPress: (event: boolean) => void,"}),(0,o.jsx)("br",{}),(0,o.jsx)(t.code,{children:"id?: number }>"})]}),(0,o.jsx)(t.td,{children:"Yes"}),(0,o.jsx)(t.td,{children:"Array of buttons."})]}),(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.td,{children:(0,o.jsx)(t.code,{children:"size"})}),(0,o.jsx)(t.td,{children:(0,o.jsx)("code",{children:"'small' | 'medium'"})}),(0,o.jsx)(t.td,{children:"No"}),(0,o.jsxs)(t.td,{children:["The size of the button. Default value: ",(0,o.jsx)(t.code,{children:"'medium'"})]})]}),(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.td,{children:(0,o.jsx)(t.code,{children:"theme"})}),(0,o.jsx)(t.td,{children:(0,o.jsx)(t.code,{children:"UITheme"})}),(0,o.jsx)(t.td,{children:"No"}),(0,o.jsx)(t.td,{children:"The theme to use for the component."})]}),(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.td,{children:(0,o.jsx)(t.code,{children:"typography"})}),(0,o.jsx)(t.td,{children:(0,o.jsx)(t.code,{children:"UITypography"})}),(0,o.jsx)(t.td,{children:"No"}),(0,o.jsx)(t.td,{children:"The typography to use for the component."})]})]})]})]})}function h(e={}){const{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(a,{...e})}):a(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>c,a:()=>i});var o=n(7294);const s={},r=o.createContext(s);function i(e){const t=o.useContext(r);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:i(e.components),o.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/87878b99.83943910.js b/assets/js/87878b99.e77e8b68.js similarity index 98% rename from assets/js/87878b99.83943910.js rename to assets/js/87878b99.e77e8b68.js index 593aa34..49ba57a 100644 --- a/assets/js/87878b99.83943910.js +++ b/assets/js/87878b99.e77e8b68.js @@ -1 +1 @@ -"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[9047],{4679:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>i,contentTitle:()=>s,default:()=>a,frontMatter:()=>r,metadata:()=>d,toc:()=>h});var c=n(5893),o=n(1151);const r={sidebar_position:6},s="CheckBox",d={id:"components/checkbox",title:"CheckBox",description:"The CheckBox component is a UI element that allows the user to toggle between two states: checked and unchecked.",source:"@site/docs/components/checkbox.md",sourceDirName:"components",slug:"/components/checkbox",permalink:"/react-native-kitra/docs/next/components/checkbox",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/docs/components/checkbox.md",tags:[],version:"current",lastUpdatedAt:1707292585,formattedLastUpdatedAt:"Feb 7, 2024",sidebarPosition:6,frontMatter:{sidebar_position:6},sidebar:"ComponentsSidebar",previous:{title:"Button",permalink:"/react-native-kitra/docs/next/components/button"},next:{title:"Chip",permalink:"/react-native-kitra/docs/next/components/chip"}},i={},h=[{value:"Import",id:"import",level:3},{value:"Usage",id:"usage",level:3},{value:"Props",id:"props",level:3}];function l(e){const t={a:"a",code:"code",h1:"h1",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,o.a)(),...e.components};return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(t.h1,{id:"checkbox",children:"CheckBox"}),"\n",(0,c.jsxs)(t.p,{children:["The ",(0,c.jsx)(t.strong,{children:"CheckBox"})," component is a UI element that allows the user to toggle between two states: checked and unchecked."]}),"\n",(0,c.jsx)(t.h3,{id:"import",children:"Import"}),"\n",(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:"language-js",children:"import { CheckBox } from '@tra-tech/react-native-kitra';\n"})}),"\n",(0,c.jsx)(t.h3,{id:"usage",children:"Usage"}),"\n",(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:"language-js",children:"import { CheckBox } from '@tra-tech/react-native-kitra';\nimport { useState } from 'react';\nimport { View } from 'react-native';\n\nconst App = () => {\n const [value, setValue] = useState(false);\n\n return (\n \n console.log(event)}\n onPress={() => setValue(prev => !prev)}\n iconColor=\"red\"\n />\n \n );\n};\n\nexport default App;\n\n"})}),"\n",(0,c.jsx)(t.h3,{id:"props",children:"Props"}),"\n",(0,c.jsxs)(t.table,{children:[(0,c.jsx)(t.thead,{children:(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.th,{children:"Prop name"}),(0,c.jsx)(t.th,{children:"Type"}),(0,c.jsx)(t.th,{children:"Required"}),(0,c.jsx)(t.th,{children:"Description"})]})}),(0,c.jsxs)(t.tbody,{children:[(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:"value"}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:"boolean"})}),(0,c.jsx)(t.td,{children:"No"}),(0,c.jsx)(t.td,{children:"Determines whether the checkbox is checked or unchecked"})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:"onChange"}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:"(value: boolean) => void"})}),(0,c.jsx)(t.td,{children:"No"}),(0,c.jsx)(t.td,{children:"A callback function that is called when the checkbox is pressed, with the new state value as an argument"})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:"style"}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,c.jsx)(t.code,{children:"StyleProp"})})}),(0,c.jsx)(t.td,{children:"No"}),(0,c.jsx)(t.td,{children:"Additional styles to apply to the checkbox container"})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:"disabled"}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:"boolean"})}),(0,c.jsx)(t.td,{children:"No"}),(0,c.jsx)(t.td,{children:"Determines whether the checkbox is disabled or not"})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:"iconColor"}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:"string"})}),(0,c.jsx)(t.td,{children:"No"}),(0,c.jsx)(t.td,{children:"The color of the checkmark icon"})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:"theme"}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:"UITheme"})}),(0,c.jsx)(t.td,{children:"No"}),(0,c.jsx)(t.td,{children:"An object containing the color palette used for the checkbox"})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:"...TouchableOpacityProps"}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.a,{href:"https://reactnative.dev/docs/touchableopacity#props",children:(0,c.jsx)(t.code,{children:"...TouchableOpacityProps"})})}),(0,c.jsx)(t.td,{children:"No"}),(0,c.jsxs)(t.td,{children:["Any additional props to be passed to the underlying ",(0,c.jsx)(t.code,{children:"TouchableOpacity"})," component."]})]})]})]})]})}function a(e={}){const{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,c.jsx)(t,{...e,children:(0,c.jsx)(l,{...e})}):l(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>d,a:()=>s});var c=n(7294);const o={},r=c.createContext(o);function s(e){const t=c.useContext(r);return c.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function d(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:s(e.components),c.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[9047],{4679:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>i,contentTitle:()=>s,default:()=>a,frontMatter:()=>r,metadata:()=>d,toc:()=>h});var c=n(5893),o=n(1151);const r={sidebar_position:6},s="CheckBox",d={id:"components/checkbox",title:"CheckBox",description:"The CheckBox component is a UI element that allows the user to toggle between two states: checked and unchecked.",source:"@site/docs/components/checkbox.md",sourceDirName:"components",slug:"/components/checkbox",permalink:"/react-native-kitra/docs/next/components/checkbox",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/docs/components/checkbox.md",tags:[],version:"current",lastUpdatedAt:1709646294,formattedLastUpdatedAt:"Mar 5, 2024",sidebarPosition:6,frontMatter:{sidebar_position:6},sidebar:"ComponentsSidebar",previous:{title:"Button",permalink:"/react-native-kitra/docs/next/components/button"},next:{title:"Chip",permalink:"/react-native-kitra/docs/next/components/chip"}},i={},h=[{value:"Import",id:"import",level:3},{value:"Usage",id:"usage",level:3},{value:"Props",id:"props",level:3}];function l(e){const t={a:"a",code:"code",h1:"h1",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,o.a)(),...e.components};return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(t.h1,{id:"checkbox",children:"CheckBox"}),"\n",(0,c.jsxs)(t.p,{children:["The ",(0,c.jsx)(t.strong,{children:"CheckBox"})," component is a UI element that allows the user to toggle between two states: checked and unchecked."]}),"\n",(0,c.jsx)(t.h3,{id:"import",children:"Import"}),"\n",(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:"language-js",children:"import { CheckBox } from '@tra-tech/react-native-kitra';\n"})}),"\n",(0,c.jsx)(t.h3,{id:"usage",children:"Usage"}),"\n",(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:"language-js",children:"import { CheckBox } from '@tra-tech/react-native-kitra';\nimport { useState } from 'react';\nimport { View } from 'react-native';\n\nconst App = () => {\n const [value, setValue] = useState(false);\n\n return (\n \n console.log(event)}\n onPress={() => setValue(prev => !prev)}\n iconColor=\"red\"\n />\n \n );\n};\n\nexport default App;\n\n"})}),"\n",(0,c.jsx)(t.h3,{id:"props",children:"Props"}),"\n",(0,c.jsxs)(t.table,{children:[(0,c.jsx)(t.thead,{children:(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.th,{children:"Prop name"}),(0,c.jsx)(t.th,{children:"Type"}),(0,c.jsx)(t.th,{children:"Required"}),(0,c.jsx)(t.th,{children:"Description"})]})}),(0,c.jsxs)(t.tbody,{children:[(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:"value"}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:"boolean"})}),(0,c.jsx)(t.td,{children:"No"}),(0,c.jsx)(t.td,{children:"Determines whether the checkbox is checked or unchecked"})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:"onChange"}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:"(value: boolean) => void"})}),(0,c.jsx)(t.td,{children:"No"}),(0,c.jsx)(t.td,{children:"A callback function that is called when the checkbox is pressed, with the new state value as an argument"})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:"style"}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,c.jsx)(t.code,{children:"StyleProp"})})}),(0,c.jsx)(t.td,{children:"No"}),(0,c.jsx)(t.td,{children:"Additional styles to apply to the checkbox container"})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:"disabled"}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:"boolean"})}),(0,c.jsx)(t.td,{children:"No"}),(0,c.jsx)(t.td,{children:"Determines whether the checkbox is disabled or not"})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:"iconColor"}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:"string"})}),(0,c.jsx)(t.td,{children:"No"}),(0,c.jsx)(t.td,{children:"The color of the checkmark icon"})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:"theme"}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:"UITheme"})}),(0,c.jsx)(t.td,{children:"No"}),(0,c.jsx)(t.td,{children:"An object containing the color palette used for the checkbox"})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:"...TouchableOpacityProps"}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.a,{href:"https://reactnative.dev/docs/touchableopacity#props",children:(0,c.jsx)(t.code,{children:"...TouchableOpacityProps"})})}),(0,c.jsx)(t.td,{children:"No"}),(0,c.jsxs)(t.td,{children:["Any additional props to be passed to the underlying ",(0,c.jsx)(t.code,{children:"TouchableOpacity"})," component."]})]})]})]})]})}function a(e={}){const{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,c.jsx)(t,{...e,children:(0,c.jsx)(l,{...e})}):l(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>d,a:()=>s});var c=n(7294);const o={},r=c.createContext(o);function s(e){const t=c.useContext(r);return c.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function d(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:s(e.components),c.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/8ea2467a.7efccfb9.js b/assets/js/8ea2467a.7efccfb9.js new file mode 100644 index 0000000..30b1c2e --- /dev/null +++ b/assets/js/8ea2467a.7efccfb9.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[4431],{2059:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>o,contentTitle:()=>s,default:()=>h,frontMatter:()=>i,metadata:()=>c,toc:()=>a});var r=n(5893),d=n(1151);const i={sidebar_position:4},s="Badge",c={id:"components/badge",title:"Badge",description:"The Badge is used to place a number or text label in a specific position. It's especially useful for notifications or alerts.",source:"@site/docs/components/badge.md",sourceDirName:"components",slug:"/components/badge",permalink:"/react-native-kitra/docs/next/components/badge",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/docs/components/badge.md",tags:[],version:"current",lastUpdatedAt:1709646294,formattedLastUpdatedAt:"Mar 5, 2024",sidebarPosition:4,frontMatter:{sidebar_position:4},sidebar:"ComponentsSidebar",previous:{title:"Avatar",permalink:"/react-native-kitra/docs/next/components/avatar"},next:{title:"Button",permalink:"/react-native-kitra/docs/next/components/button"}},o={},a=[{value:"Import",id:"import",level:3},{value:"Usage",id:"usage",level:3},{value:"Props",id:"props",level:3}];function l(e){const t={a:"a",code:"code",h1:"h1",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,d.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h1,{id:"badge",children:"Badge"}),"\n",(0,r.jsxs)(t.p,{children:["The ",(0,r.jsx)(t.strong,{children:"Badge"})," is used to place a number or text label in a specific position. It's especially useful for notifications or alerts."]}),"\n",(0,r.jsx)(t.h3,{id:"import",children:"Import"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"import { Badge } from '@tra-tech/react-native-kitra';\n"})}),"\n",(0,r.jsx)(t.h3,{id:"usage",children:"Usage"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"import { Avatar, Chip, Icon } from '@tra-tech/react-native-kitra';\nimport { View, StyleSheet } from 'react-native';\nimport Badge from '../../components/Badge';\n\nconst App = () => (\n \n } />\n } />\n \n);\n\nconst style = StyleSheet.create({\n container: { flex: 1, alignItems: 'center', justifyContent: 'center', rowGap: 20 },\n});\n\nexport default App;\n"})}),"\n",(0,r.jsx)(t.h3,{id:"props",children:"Props"}),"\n",(0,r.jsxs)(t.table,{children:[(0,r.jsx)(t.thead,{children:(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.th,{children:"Prop name"}),(0,r.jsx)(t.th,{children:"Type"}),(0,r.jsx)(t.th,{children:"Required"}),(0,r.jsx)(t.th,{children:"Description"})]})}),(0,r.jsxs)(t.tbody,{children:[(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"visible"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"boolean"})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsxs)(t.td,{children:["Visibility status. Default value: ",(0,r.jsx)(t.code,{children:"true"})]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"label"}),(0,r.jsx)(t.td,{children:(0,r.jsx)("code",{children:" string | number "})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"The number or text to be written in the badge."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"size"}),(0,r.jsx)(t.td,{children:(0,r.jsx)("code",{children:" 'small' | 'medium'"})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsxs)(t.td,{children:["The size of the badge. Default value: ",(0,r.jsx)(t.code,{children:"'medium'"})]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"containerStyle"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,r.jsx)(t.code,{children:"StyleProp"})})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"Additional styles to apply to the badge container."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"labelStyle"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.a,{href:"https://reactnative.dev/docs/text-style-props",children:(0,r.jsx)(t.code,{children:"StyleProp"})})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"Additional styles to apply to the children text."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"variant"}),(0,r.jsx)(t.td,{children:(0,r.jsx)("code",{children:"'circular' | 'rectangular'"})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsxs)(t.td,{children:["Specifies the border type of the badge. Default value: ",(0,r.jsx)(t.code,{children:"'circular'"})]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"icon"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.a,{href:"https://reactnative.dev/docs/react-node",children:(0,r.jsx)(t.code,{children:"React.ReactNode"})})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"Icon to be added to badge."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"children"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.a,{href:"https://reactnative.dev/docs/react-node",children:(0,r.jsx)(t.code,{children:"React.ReactNode"})})}),(0,r.jsx)(t.td,{children:"Yes"}),(0,r.jsx)(t.td,{children:"A required prop that represents the content to display within the Badge component."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"position"}),(0,r.jsx)(t.td,{children:(0,r.jsx)("code",{children:"'top-right'| 'top-left' | 'bottom-left' | 'bottom-right'"})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsxs)(t.td,{children:["Position the Badge component. Default value: ",(0,r.jsx)(t.code,{children:"'top-right'"})]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"theme"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"UITheme "})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"The theme to use for the component."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"typography"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"UITypography"})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"The typography to use for the component."})]})]})]})]})}function h(e={}){const{wrapper:t}={...(0,d.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(l,{...e})}):l(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>c,a:()=>s});var r=n(7294);const d={},i=r.createContext(d);function s(e){const t=r.useContext(i);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(d):e.components||d:s(e.components),r.createElement(i.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/8ea2467a.cf5456ca.js b/assets/js/8ea2467a.cf5456ca.js deleted file mode 100644 index 6d02c4d..0000000 --- a/assets/js/8ea2467a.cf5456ca.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[4431],{2059:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>o,contentTitle:()=>s,default:()=>h,frontMatter:()=>i,metadata:()=>c,toc:()=>l});var r=n(5893),d=n(1151);const i={sidebar_position:4},s="Badge",c={id:"components/badge",title:"Badge",description:"The Badge is used to place a number or text label in a specific position. It's especially useful for notifications or alerts.",source:"@site/docs/components/badge.md",sourceDirName:"components",slug:"/components/badge",permalink:"/react-native-kitra/docs/next/components/badge",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/docs/components/badge.md",tags:[],version:"current",lastUpdatedAt:1707292585,formattedLastUpdatedAt:"Feb 7, 2024",sidebarPosition:4,frontMatter:{sidebar_position:4},sidebar:"ComponentsSidebar",previous:{title:"Avatar",permalink:"/react-native-kitra/docs/next/components/avatar"},next:{title:"Button",permalink:"/react-native-kitra/docs/next/components/button"}},o={},l=[{value:"Import",id:"import",level:3},{value:"Usage",id:"usage",level:3},{value:"Props",id:"props",level:3}];function a(e){const t={a:"a",code:"code",h1:"h1",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,d.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h1,{id:"badge",children:"Badge"}),"\n",(0,r.jsxs)(t.p,{children:["The ",(0,r.jsx)(t.strong,{children:"Badge"})," is used to place a number or text label in a specific position. It's especially useful for notifications or alerts."]}),"\n",(0,r.jsx)(t.h3,{id:"import",children:"Import"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"import { Badge } from '@tra-tech/react-native-kitra';\n"})}),"\n",(0,r.jsx)(t.h3,{id:"usage",children:"Usage"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"import { Avatar, Chip, Icon } from '@tra-tech/react-native-kitra';\nimport { View, StyleSheet } from 'react-native';\nimport Badge from '../../components/Badge';\n\nconst App = () => (\n \n } />\n } />\n \n);\n\nconst style = StyleSheet.create({\n container: { flex: 1, alignItems: 'center', justifyContent: 'center', rowGap: 20 },\n});\n\nexport default App;\n"})}),"\n",(0,r.jsx)(t.h3,{id:"props",children:"Props"}),"\n",(0,r.jsxs)(t.table,{children:[(0,r.jsx)(t.thead,{children:(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.th,{children:"Prop name"}),(0,r.jsx)(t.th,{children:"Type"}),(0,r.jsx)(t.th,{children:"Required"}),(0,r.jsx)(t.th,{children:"Description"})]})}),(0,r.jsxs)(t.tbody,{children:[(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"visible"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"boolean"})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsxs)(t.td,{children:["Visibility status. Default value: ",(0,r.jsx)(t.code,{children:"true"})]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"label"}),(0,r.jsx)(t.td,{children:(0,r.jsx)("code",{children:" string | number "})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"The number or text to be written in the badge."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"size"}),(0,r.jsx)(t.td,{children:(0,r.jsx)("code",{children:" 'small' | 'medium'"})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsxs)(t.td,{children:["The size of the badge. Default value: ",(0,r.jsx)(t.code,{children:"'medium'"})]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"containerStyle"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,r.jsx)(t.code,{children:"StyleProp"})})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"Additional styles to apply to the badge container."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"labelStyle"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.a,{href:"https://reactnative.dev/docs/text-style-props",children:(0,r.jsx)(t.code,{children:"StyleProp"})})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"Additional styles to apply to the children text."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"borderStyle"}),(0,r.jsx)(t.td,{children:(0,r.jsx)("code",{children:"'circular' | 'rectangular'"})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsxs)(t.td,{children:["Specifies the border type of the badge. Default value: ",(0,r.jsx)(t.code,{children:"'circular'"})]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"icon"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.a,{href:"https://reactnative.dev/docs/react-node",children:(0,r.jsx)(t.code,{children:"React.ReactNode"})})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"Icon to be added to badge."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"children"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.a,{href:"https://reactnative.dev/docs/react-node",children:(0,r.jsx)(t.code,{children:"React.ReactNode"})})}),(0,r.jsx)(t.td,{children:"Yes"}),(0,r.jsx)(t.td,{children:"A required prop that represents the content to display within the Badge component."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"position"}),(0,r.jsx)(t.td,{children:(0,r.jsx)("code",{children:"'top-right'| 'top-left' | 'bottom-left' | 'bottom-right'"})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsxs)(t.td,{children:["Position the Badge component. Default value: ",(0,r.jsx)(t.code,{children:"'top-right'"})]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"theme"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"UITheme "})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"The theme to use for the component."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"typography"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"UITypography"})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"The typography to use for the component."})]})]})]})]})}function h(e={}){const{wrapper:t}={...(0,d.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(a,{...e})}):a(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>c,a:()=>s});var r=n(7294);const d={},i=r.createContext(d);function s(e){const t=r.useContext(i);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(d):e.components||d:s(e.components),r.createElement(i.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/9443e6d3.d66cc86f.js b/assets/js/9443e6d3.fd914596.js similarity index 95% rename from assets/js/9443e6d3.d66cc86f.js rename to assets/js/9443e6d3.fd914596.js index b4bc961..649fc5a 100644 --- a/assets/js/9443e6d3.d66cc86f.js +++ b/assets/js/9443e6d3.fd914596.js @@ -1 +1 @@ -"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[6414],{4032:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>c,default:()=>h,frontMatter:()=>l,metadata:()=>o,toc:()=>u});var a=t(5893),r=t(1151),s=t(4866),i=t(5162);const l={sidebar_position:1},c="Getting Started",o={id:"doc/getting-started",title:"Getting Started",description:"Installation",source:"@site/versioned_docs/version-1.x/doc/getting-started.md",sourceDirName:"doc",slug:"/doc/getting-started",permalink:"/react-native-kitra/docs/doc/getting-started",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/versioned_docs/version-1.x/doc/getting-started.md",tags:[],version:"1.x",lastUpdatedAt:1707292585,formattedLastUpdatedAt:"Feb 7, 2024",sidebarPosition:1,frontMatter:{sidebar_position:1},sidebar:"DocSidebar",next:{title:"Notification",permalink:"/react-native-kitra/docs/doc/Notification"}},d={},u=[{value:"Installation",id:"installation",level:2},{value:"Implementation",id:"implementation",level:2}];function p(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.a)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(n.h1,{id:"getting-started",children:"Getting Started"}),"\n","\n","\n",(0,a.jsx)(n.h2,{id:"installation",children:"Installation"}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsx)(n.li,{children:"Go to the project folder in terminal and run the following code:"}),"\n"]}),"\n",(0,a.jsxs)(s.Z,{groupId:"operating-systems",children:[(0,a.jsx)(i.Z,{value:"yarn",label:"Yarn",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",metastring:"npm2yarn",children:"yarn add @tra-tech/react-native-kitra\n"})})}),(0,a.jsx)(i.Z,{value:"npm",label:"npm",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",metastring:"npm2yarn",children:"npm install @tra-tech/react-native-kitra\n"})})})]}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsx)(n.li,{children:"Packages you need to download separately to use:"}),"\n"]}),"\n",(0,a.jsxs)(s.Z,{groupId:"non-mac-operating-systems",children:[(0,a.jsxs)(i.Z,{value:"React Native CLI",label:"React Native CLI",children:[(0,a.jsx)(n.p,{children:(0,a.jsx)(n.strong,{children:"react-native-reanimated"})}),(0,a.jsxs)(s.Z,{groupId:"operating-systems",children:[(0,a.jsx)(i.Z,{value:"yarn",label:"yarn",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",metastring:"npm2yarn",children:"yarn add react-native-reanimated\n"})})}),(0,a.jsx)(i.Z,{value:"npm",label:"npm",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",metastring:"npm2yarn",children:"npm install react-native-reanimated\n"})})})]}),(0,a.jsx)(n.p,{children:(0,a.jsx)(n.a,{href:"https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation",children:"Click for react-native-reanimated installation instructions."})}),(0,a.jsx)(n.p,{children:(0,a.jsx)(n.strong,{children:"react-native-gesture-handler"})}),(0,a.jsxs)(s.Z,{groupId:"operating-systems",children:[(0,a.jsx)(i.Z,{value:"yarn",label:"yarn",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",metastring:"npm2yarn",children:"yarn add react-native-gesture-handler\n"})})}),(0,a.jsx)(i.Z,{value:"npm",label:"npm",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",metastring:"npm2yarn",children:"npm install react-native-gesture-handler\n"})})})]}),(0,a.jsx)(n.p,{children:(0,a.jsx)(n.a,{href:"https://docs.swmansion.com/react-native-gesture-handler/docs/installation",children:"Click for react-native-gesture-handler installation instructions."})}),(0,a.jsx)(n.p,{children:(0,a.jsx)(n.strong,{children:"react-native-vector-icons"})}),(0,a.jsxs)(s.Z,{groupId:"operating-systems",children:[(0,a.jsx)(i.Z,{value:"yarn",label:"yarn",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",metastring:"npm2yarn",children:"yarn add react-native-vector-icons\n"})})}),(0,a.jsx)(i.Z,{value:"npm",label:"npm",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",metastring:"npm2yarn",children:"npm install react-native-vector-icons\n"})})})]}),(0,a.jsx)(n.p,{children:(0,a.jsx)(n.a,{href:"https://github.com/oblador/react-native-vector-icons#installation",children:"Click for react-native-vector-icons installation instructions."})}),(0,a.jsx)(n.p,{children:(0,a.jsx)(n.strong,{children:"react-native-pager-view"})}),(0,a.jsxs)(s.Z,{groupId:"operating-systems",children:[(0,a.jsx)(i.Z,{value:"yarn",label:"yarn",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",metastring:"npm2yarn",children:"yarn add react-native-pager-view\n"})})}),(0,a.jsx)(i.Z,{value:"npm",label:"npm",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",metastring:"npm2yarn",children:"npm install react-native-pager-view\n"})})})]}),(0,a.jsx)(n.p,{children:(0,a.jsx)(n.a,{href:"https://github.com/callstack/react-native-pager-view#getting-started",children:"Click for react-native-pager-view installation instructions."})})]}),(0,a.jsxs)(i.Z,{value:"Expo",label:"Expo",children:[(0,a.jsx)(n.p,{children:(0,a.jsx)(n.strong,{children:"react-native-reanimated"})}),(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",metastring:"npm2yarn",children:"npx expo install react-native-reanimated\n"})}),(0,a.jsx)(n.p,{children:"After the installation completes, you must also add the Babel plugin to babel.config.js:"}),(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"module.exports = function (api) {\n api.cache(true);\n return {\n presets: ['babel-preset-expo'],\n plugins: ['react-native-reanimated/plugin'],\n };\n};\n"})}),(0,a.jsx)(n.p,{children:(0,a.jsx)(n.strong,{children:"react-native-gesture-handler"})}),(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",metastring:"npm2yarn",children:"npx expo install react-native-gesture-handler\n"})}),(0,a.jsx)(n.p,{children:"Add this import to the top of your app entry file, such as App.js:"}),(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"import 'react-native-gesture-handler';\n"})}),(0,a.jsx)(n.p,{children:(0,a.jsx)(n.strong,{children:"react-native-pager-view"})}),(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",metastring:"npm2yarn",children:"npx expo install react-native-pager-view\n"})})]})]}),"\n",(0,a.jsx)(n.h2,{id:"implementation",children:"Implementation"}),"\n",(0,a.jsxs)(n.p,{children:["Wrap your root component in ",(0,a.jsx)(n.strong,{children:"KitraProvider"})," from react-native-kitra."]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-jsx",children:"import { KitraProvider } from '@tra-tech/react-native-kitra';\nimport App from './src/App';\n\nexport default function Main() {\n return (\n \n \n \n );\n}\n\n"})})]})}function h(e={}){const{wrapper:n}={...(0,r.a)(),...e.components};return n?(0,a.jsx)(n,{...e,children:(0,a.jsx)(p,{...e})}):p(e)}},5162:(e,n,t)=>{t.d(n,{Z:()=>i});t(7294);var a=t(6905);const r={tabItem:"tabItem_Ymn6"};var s=t(5893);function i(e){let{children:n,hidden:t,className:i}=e;return(0,s.jsx)("div",{role:"tabpanel",className:(0,a.Z)(r.tabItem,i),hidden:t,children:n})}},4866:(e,n,t)=>{t.d(n,{Z:()=>k});var a=t(7294),r=t(6905),s=t(2466),i=t(6550),l=t(469),c=t(1980),o=t(7392),d=t(12);function u(e){return a.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,a.isValidElement)(e)&&function(e){const{props:n}=e;return!!n&&"object"==typeof n&&"value"in n}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:n,children:t}=e;return(0,a.useMemo)((()=>{const e=n??function(e){return u(e).map((e=>{let{props:{value:n,label:t,attributes:a,default:r}}=e;return{value:n,label:t,attributes:a,default:r}}))}(t);return function(e){const n=(0,o.l)(e,((e,n)=>e.value===n.value));if(n.length>0)throw new Error(`Docusaurus error: Duplicate values "${n.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[n,t])}function h(e){let{value:n,tabValues:t}=e;return t.some((e=>e.value===n))}function m(e){let{queryString:n=!1,groupId:t}=e;const r=(0,i.k6)(),s=function(e){let{queryString:n=!1,groupId:t}=e;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!t)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return t??null}({queryString:n,groupId:t});return[(0,c._X)(s),(0,a.useCallback)((e=>{if(!s)return;const n=new URLSearchParams(r.location.search);n.set(s,e),r.replace({...r.location,search:n.toString()})}),[s,r])]}function g(e){const{defaultValue:n,queryString:t=!1,groupId:r}=e,s=p(e),[i,c]=(0,a.useState)((()=>function(e){let{defaultValue:n,tabValues:t}=e;if(0===t.length)throw new Error("Docusaurus error: the component requires at least one children component");if(n){if(!h({value:n,tabValues:t}))throw new Error(`Docusaurus error: The has a defaultValue "${n}" but none of its children has the corresponding value. Available values are: ${t.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return n}const a=t.find((e=>e.default))??t[0];if(!a)throw new Error("Unexpected error: 0 tabValues");return a.value}({defaultValue:n,tabValues:s}))),[o,u]=m({queryString:t,groupId:r}),[g,x]=function(e){let{groupId:n}=e;const t=function(e){return e?`docusaurus.tab.${e}`:null}(n),[r,s]=(0,d.Nk)(t);return[r,(0,a.useCallback)((e=>{t&&s.set(e)}),[t,s])]}({groupId:r}),v=(()=>{const e=o??g;return h({value:e,tabValues:s})?e:null})();(0,l.Z)((()=>{v&&c(v)}),[v]);return{selectedValue:i,selectValue:(0,a.useCallback)((e=>{if(!h({value:e,tabValues:s}))throw new Error(`Can't select invalid tab value=${e}`);c(e),u(e),x(e)}),[u,x,s]),tabValues:s}}var x=t(2389);const v={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=t(5893);function j(e){let{className:n,block:t,selectedValue:a,selectValue:i,tabValues:l}=e;const c=[],{blockElementScrollPositionUntilNextRender:o}=(0,s.o5)(),d=e=>{const n=e.currentTarget,t=c.indexOf(n),r=l[t].value;r!==a&&(o(n),i(r))},u=e=>{let n=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":{const t=c.indexOf(e.currentTarget)+1;n=c[t]??c[0];break}case"ArrowLeft":{const t=c.indexOf(e.currentTarget)-1;n=c[t]??c[c.length-1];break}}n?.focus()};return(0,b.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.Z)("tabs",{"tabs--block":t},n),children:l.map((e=>{let{value:n,label:t,attributes:s}=e;return(0,b.jsx)("li",{role:"tab",tabIndex:a===n?0:-1,"aria-selected":a===n,ref:e=>c.push(e),onKeyDown:u,onClick:d,...s,className:(0,r.Z)("tabs__item",v.tabItem,s?.className,{"tabs__item--active":a===n}),children:t??n},n)}))})}function f(e){let{lazy:n,children:t,selectedValue:r}=e;const s=(Array.isArray(t)?t:[t]).filter(Boolean);if(n){const e=s.find((e=>e.props.value===r));return e?(0,a.cloneElement)(e,{className:"margin-top--md"}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:s.map(((e,n)=>(0,a.cloneElement)(e,{key:n,hidden:e.props.value!==r})))})}function y(e){const n=g(e);return(0,b.jsxs)("div",{className:(0,r.Z)("tabs-container",v.tabList),children:[(0,b.jsx)(j,{...e,...n}),(0,b.jsx)(f,{...e,...n})]})}function k(e){const n=(0,x.Z)();return(0,b.jsx)(y,{...e,children:u(e.children)},String(n))}},1151:(e,n,t)=>{t.d(n,{Z:()=>l,a:()=>i});var a=t(7294);const r={},s=a.createContext(r);function i(e){const n=a.useContext(s);return a.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),a.createElement(s.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[6414],{4032:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>c,default:()=>h,frontMatter:()=>l,metadata:()=>o,toc:()=>u});var a=t(5893),r=t(1151),s=t(4866),i=t(5162);const l={sidebar_position:1},c="Getting Started",o={id:"doc/getting-started",title:"Getting Started",description:"Installation",source:"@site/versioned_docs/version-1.x/doc/getting-started.md",sourceDirName:"doc",slug:"/doc/getting-started",permalink:"/react-native-kitra/docs/doc/getting-started",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/versioned_docs/version-1.x/doc/getting-started.md",tags:[],version:"1.x",lastUpdatedAt:1709646294,formattedLastUpdatedAt:"Mar 5, 2024",sidebarPosition:1,frontMatter:{sidebar_position:1},sidebar:"DocSidebar",next:{title:"Notification",permalink:"/react-native-kitra/docs/doc/Notification"}},d={},u=[{value:"Installation",id:"installation",level:2},{value:"Implementation",id:"implementation",level:2}];function p(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.a)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(n.h1,{id:"getting-started",children:"Getting Started"}),"\n","\n","\n",(0,a.jsx)(n.h2,{id:"installation",children:"Installation"}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsx)(n.li,{children:"Go to the project folder in terminal and run the following code:"}),"\n"]}),"\n",(0,a.jsxs)(s.Z,{groupId:"operating-systems",children:[(0,a.jsx)(i.Z,{value:"yarn",label:"Yarn",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",metastring:"npm2yarn",children:"yarn add @tra-tech/react-native-kitra\n"})})}),(0,a.jsx)(i.Z,{value:"npm",label:"npm",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",metastring:"npm2yarn",children:"npm install @tra-tech/react-native-kitra\n"})})})]}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsx)(n.li,{children:"Packages you need to download separately to use:"}),"\n"]}),"\n",(0,a.jsxs)(s.Z,{groupId:"non-mac-operating-systems",children:[(0,a.jsxs)(i.Z,{value:"React Native CLI",label:"React Native CLI",children:[(0,a.jsx)(n.p,{children:(0,a.jsx)(n.strong,{children:"react-native-reanimated"})}),(0,a.jsxs)(s.Z,{groupId:"operating-systems",children:[(0,a.jsx)(i.Z,{value:"yarn",label:"yarn",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",metastring:"npm2yarn",children:"yarn add react-native-reanimated\n"})})}),(0,a.jsx)(i.Z,{value:"npm",label:"npm",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",metastring:"npm2yarn",children:"npm install react-native-reanimated\n"})})})]}),(0,a.jsx)(n.p,{children:(0,a.jsx)(n.a,{href:"https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation",children:"Click for react-native-reanimated installation instructions."})}),(0,a.jsx)(n.p,{children:(0,a.jsx)(n.strong,{children:"react-native-gesture-handler"})}),(0,a.jsxs)(s.Z,{groupId:"operating-systems",children:[(0,a.jsx)(i.Z,{value:"yarn",label:"yarn",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",metastring:"npm2yarn",children:"yarn add react-native-gesture-handler\n"})})}),(0,a.jsx)(i.Z,{value:"npm",label:"npm",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",metastring:"npm2yarn",children:"npm install react-native-gesture-handler\n"})})})]}),(0,a.jsx)(n.p,{children:(0,a.jsx)(n.a,{href:"https://docs.swmansion.com/react-native-gesture-handler/docs/installation",children:"Click for react-native-gesture-handler installation instructions."})}),(0,a.jsx)(n.p,{children:(0,a.jsx)(n.strong,{children:"react-native-vector-icons"})}),(0,a.jsxs)(s.Z,{groupId:"operating-systems",children:[(0,a.jsx)(i.Z,{value:"yarn",label:"yarn",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",metastring:"npm2yarn",children:"yarn add react-native-vector-icons\n"})})}),(0,a.jsx)(i.Z,{value:"npm",label:"npm",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",metastring:"npm2yarn",children:"npm install react-native-vector-icons\n"})})})]}),(0,a.jsx)(n.p,{children:(0,a.jsx)(n.a,{href:"https://github.com/oblador/react-native-vector-icons#installation",children:"Click for react-native-vector-icons installation instructions."})}),(0,a.jsx)(n.p,{children:(0,a.jsx)(n.strong,{children:"react-native-pager-view"})}),(0,a.jsxs)(s.Z,{groupId:"operating-systems",children:[(0,a.jsx)(i.Z,{value:"yarn",label:"yarn",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",metastring:"npm2yarn",children:"yarn add react-native-pager-view\n"})})}),(0,a.jsx)(i.Z,{value:"npm",label:"npm",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",metastring:"npm2yarn",children:"npm install react-native-pager-view\n"})})})]}),(0,a.jsx)(n.p,{children:(0,a.jsx)(n.a,{href:"https://github.com/callstack/react-native-pager-view#getting-started",children:"Click for react-native-pager-view installation instructions."})})]}),(0,a.jsxs)(i.Z,{value:"Expo",label:"Expo",children:[(0,a.jsx)(n.p,{children:(0,a.jsx)(n.strong,{children:"react-native-reanimated"})}),(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",metastring:"npm2yarn",children:"npx expo install react-native-reanimated\n"})}),(0,a.jsx)(n.p,{children:"After the installation completes, you must also add the Babel plugin to babel.config.js:"}),(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"module.exports = function (api) {\n api.cache(true);\n return {\n presets: ['babel-preset-expo'],\n plugins: ['react-native-reanimated/plugin'],\n };\n};\n"})}),(0,a.jsx)(n.p,{children:(0,a.jsx)(n.strong,{children:"react-native-gesture-handler"})}),(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",metastring:"npm2yarn",children:"npx expo install react-native-gesture-handler\n"})}),(0,a.jsx)(n.p,{children:"Add this import to the top of your app entry file, such as App.js:"}),(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"import 'react-native-gesture-handler';\n"})}),(0,a.jsx)(n.p,{children:(0,a.jsx)(n.strong,{children:"react-native-pager-view"})}),(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",metastring:"npm2yarn",children:"npx expo install react-native-pager-view\n"})})]})]}),"\n",(0,a.jsx)(n.h2,{id:"implementation",children:"Implementation"}),"\n",(0,a.jsxs)(n.p,{children:["Wrap your root component in ",(0,a.jsx)(n.strong,{children:"KitraProvider"})," from react-native-kitra."]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-jsx",children:"import { KitraProvider } from '@tra-tech/react-native-kitra';\nimport App from './src/App';\n\nexport default function Main() {\n return (\n \n \n \n );\n}\n\n"})})]})}function h(e={}){const{wrapper:n}={...(0,r.a)(),...e.components};return n?(0,a.jsx)(n,{...e,children:(0,a.jsx)(p,{...e})}):p(e)}},5162:(e,n,t)=>{t.d(n,{Z:()=>i});t(7294);var a=t(6905);const r={tabItem:"tabItem_Ymn6"};var s=t(5893);function i(e){let{children:n,hidden:t,className:i}=e;return(0,s.jsx)("div",{role:"tabpanel",className:(0,a.Z)(r.tabItem,i),hidden:t,children:n})}},4866:(e,n,t)=>{t.d(n,{Z:()=>k});var a=t(7294),r=t(6905),s=t(2466),i=t(6550),l=t(469),c=t(1980),o=t(7392),d=t(12);function u(e){return a.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,a.isValidElement)(e)&&function(e){const{props:n}=e;return!!n&&"object"==typeof n&&"value"in n}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:n,children:t}=e;return(0,a.useMemo)((()=>{const e=n??function(e){return u(e).map((e=>{let{props:{value:n,label:t,attributes:a,default:r}}=e;return{value:n,label:t,attributes:a,default:r}}))}(t);return function(e){const n=(0,o.l)(e,((e,n)=>e.value===n.value));if(n.length>0)throw new Error(`Docusaurus error: Duplicate values "${n.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[n,t])}function h(e){let{value:n,tabValues:t}=e;return t.some((e=>e.value===n))}function m(e){let{queryString:n=!1,groupId:t}=e;const r=(0,i.k6)(),s=function(e){let{queryString:n=!1,groupId:t}=e;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!t)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return t??null}({queryString:n,groupId:t});return[(0,c._X)(s),(0,a.useCallback)((e=>{if(!s)return;const n=new URLSearchParams(r.location.search);n.set(s,e),r.replace({...r.location,search:n.toString()})}),[s,r])]}function g(e){const{defaultValue:n,queryString:t=!1,groupId:r}=e,s=p(e),[i,c]=(0,a.useState)((()=>function(e){let{defaultValue:n,tabValues:t}=e;if(0===t.length)throw new Error("Docusaurus error: the component requires at least one children component");if(n){if(!h({value:n,tabValues:t}))throw new Error(`Docusaurus error: The has a defaultValue "${n}" but none of its children has the corresponding value. Available values are: ${t.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return n}const a=t.find((e=>e.default))??t[0];if(!a)throw new Error("Unexpected error: 0 tabValues");return a.value}({defaultValue:n,tabValues:s}))),[o,u]=m({queryString:t,groupId:r}),[g,x]=function(e){let{groupId:n}=e;const t=function(e){return e?`docusaurus.tab.${e}`:null}(n),[r,s]=(0,d.Nk)(t);return[r,(0,a.useCallback)((e=>{t&&s.set(e)}),[t,s])]}({groupId:r}),v=(()=>{const e=o??g;return h({value:e,tabValues:s})?e:null})();(0,l.Z)((()=>{v&&c(v)}),[v]);return{selectedValue:i,selectValue:(0,a.useCallback)((e=>{if(!h({value:e,tabValues:s}))throw new Error(`Can't select invalid tab value=${e}`);c(e),u(e),x(e)}),[u,x,s]),tabValues:s}}var x=t(2389);const v={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var j=t(5893);function b(e){let{className:n,block:t,selectedValue:a,selectValue:i,tabValues:l}=e;const c=[],{blockElementScrollPositionUntilNextRender:o}=(0,s.o5)(),d=e=>{const n=e.currentTarget,t=c.indexOf(n),r=l[t].value;r!==a&&(o(n),i(r))},u=e=>{let n=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":{const t=c.indexOf(e.currentTarget)+1;n=c[t]??c[0];break}case"ArrowLeft":{const t=c.indexOf(e.currentTarget)-1;n=c[t]??c[c.length-1];break}}n?.focus()};return(0,j.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.Z)("tabs",{"tabs--block":t},n),children:l.map((e=>{let{value:n,label:t,attributes:s}=e;return(0,j.jsx)("li",{role:"tab",tabIndex:a===n?0:-1,"aria-selected":a===n,ref:e=>c.push(e),onKeyDown:u,onClick:d,...s,className:(0,r.Z)("tabs__item",v.tabItem,s?.className,{"tabs__item--active":a===n}),children:t??n},n)}))})}function f(e){let{lazy:n,children:t,selectedValue:r}=e;const s=(Array.isArray(t)?t:[t]).filter(Boolean);if(n){const e=s.find((e=>e.props.value===r));return e?(0,a.cloneElement)(e,{className:"margin-top--md"}):null}return(0,j.jsx)("div",{className:"margin-top--md",children:s.map(((e,n)=>(0,a.cloneElement)(e,{key:n,hidden:e.props.value!==r})))})}function y(e){const n=g(e);return(0,j.jsxs)("div",{className:(0,r.Z)("tabs-container",v.tabList),children:[(0,j.jsx)(b,{...e,...n}),(0,j.jsx)(f,{...e,...n})]})}function k(e){const n=(0,x.Z)();return(0,j.jsx)(y,{...e,children:u(e.children)},String(n))}},1151:(e,n,t)=>{t.d(n,{Z:()=>l,a:()=>i});var a=t(7294);const r={},s=a.createContext(r);function i(e){const n=a.useContext(s);return a.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),a.createElement(s.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/9b76f633.684a5a3b.js b/assets/js/9b76f633.e0e73957.js similarity index 98% rename from assets/js/9b76f633.684a5a3b.js rename to assets/js/9b76f633.e0e73957.js index a4d9692..1666b93 100644 --- a/assets/js/9b76f633.684a5a3b.js +++ b/assets/js/9b76f633.e0e73957.js @@ -1 +1 @@ -"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[4282],{1406:(n,e,t)=>{t.r(e),t.d(e,{assets:()=>s,contentTitle:()=>a,default:()=>h,frontMatter:()=>r,metadata:()=>p,toc:()=>d});var i=t(5893),o=t(1151);const r={sidebar_position:3},a="Typography",p={id:"doc/Typography",title:"Typography",description:"Applying typography",source:"@site/docs/doc/Typography.md",sourceDirName:"doc",slug:"/doc/Typography",permalink:"/react-native-kitra/docs/next/doc/Typography",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/docs/doc/Typography.md",tags:[],version:"current",lastUpdatedAt:1707292585,formattedLastUpdatedAt:"Feb 7, 2024",sidebarPosition:3,frontMatter:{sidebar_position:3},sidebar:"DocSidebar",previous:{title:"Theme",permalink:"/react-native-kitra/docs/next/doc/Theme"}},s={},d=[{value:"Applying typography",id:"applying-typography",level:2},{value:"Accessing and updating typography",id:"accessing-and-updating-typography",level:2}];function l(n){const e={code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",strong:"strong",...(0,o.a)(),...n.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(e.h1,{id:"typography",children:"Typography"}),"\n",(0,i.jsx)(e.h2,{id:"applying-typography",children:"Applying typography"}),"\n",(0,i.jsx)(e.p,{children:"To use typography, you need to wrap the root component with provider."}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-jsx",children:"import { KitraProvider } from '@tra-tech/react-native-kitra';\nimport App from './src/App';\n\nexport default function Main() {\n return (\n \n \n \n );\n}\n"})}),"\n",(0,i.jsx)(e.h2,{id:"accessing-and-updating-typography",children:"Accessing and updating typography"}),"\n",(0,i.jsx)(e.p,{children:"Once you've wrapped your app with the provider, you can access the typography styles using the useTypography hook."}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-js",children:"import { useTypography } from 'react';\n\nconst myTypography= {\n heading: {\n h1: {\n fontSize: 15,\n lineHeight: 30,\n fontFamily: 'poppins-medium',\n }\n },\n body: {\n regular: {\n fontSize: 10,\n lineHeight: 12,\n fontFamily: 'medium',\n },\n otherTypo: {\n fontSize: 12,\n lineHeight: 16,\n }\n },\n otherTypo: {\n fontSize: 12,\n lineHeight: 16,\n }\n }\n\nfunction MyComponent() {\n const { typography, updateTypography } = useTypography();\n\n useEffect(() => {\n updateTypography(myTypography)\n }, []);\n return (\n \n \n This text is styled with the regular body font style.\n \n \n );\n}\n"})}),"\n",(0,i.jsx)(e.p,{children:(0,i.jsx)(e.strong,{children:"Heading:"})}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-js",children:" heading: {\n h1: {\n fontSize: 30,\n lineHeight: 45,\n fontFamily: 'medium',\n },\n h2: {\n fontSize: 28,\n lineHeight: 42,\n fontFamily: 'medium',\n },\n h3: {\n fontSize: 23,\n lineHeight: 35,\n fontFamily: 'medium',\n },\n h4: {\n fontSize: 19,\n lineHeight: 29,\n fontFamily: 'medium',\n },\n h5: {\n fontSize: 16,\n lineHeight: 25,\n fontFamily: 'medium',\n },\n },\n"})}),"\n",(0,i.jsx)(e.p,{children:(0,i.jsx)(e.strong,{children:"Body:"})}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-js",children:" body: {\n regular: {\n fontSize: 14,\n lineHeight: 16,\n fontFamily: 'regular',\n },\n sregular: {\n fontSize: 12,\n lineHeight: 16,\n fontFamily: 'regular',\n },\n xsregular: {\n fontSize: 10,\n lineHeight: 14,\n fontFamily: 'regular',\n },\n xxsregular: {\n fontSize: 8,\n lineHeight: 12,\n fontFamily: 'regular',\n },\n medium: {\n fontSize: 14,\n lineHeight: 21,\n fontFamily: 'medium',\n },\n smedium: {\n fontSize: 12,\n lineHeight: 18,\n fontFamily: 'medium',\n },\n xsmedium: {\n fontSize: 10,\n lineHeight: 16,\n fontFamily: 'medium',\n },\n xxsmedium: {\n fontSize: 8,\n lineHeight: 12,\n fontFamily: 'medium',\n },\n },\n\n"})})]})}function h(n={}){const{wrapper:e}={...(0,o.a)(),...n.components};return e?(0,i.jsx)(e,{...n,children:(0,i.jsx)(l,{...n})}):l(n)}},1151:(n,e,t)=>{t.d(e,{Z:()=>p,a:()=>a});var i=t(7294);const o={},r=i.createContext(o);function a(n){const e=i.useContext(r);return i.useMemo((function(){return"function"==typeof n?n(e):{...e,...n}}),[e,n])}function p(n){let e;return e=n.disableParentContext?"function"==typeof n.components?n.components(o):n.components||o:a(n.components),i.createElement(r.Provider,{value:e},n.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[4282],{1406:(n,e,t)=>{t.r(e),t.d(e,{assets:()=>s,contentTitle:()=>a,default:()=>h,frontMatter:()=>r,metadata:()=>p,toc:()=>d});var i=t(5893),o=t(1151);const r={sidebar_position:3},a="Typography",p={id:"doc/Typography",title:"Typography",description:"Applying typography",source:"@site/docs/doc/Typography.md",sourceDirName:"doc",slug:"/doc/Typography",permalink:"/react-native-kitra/docs/next/doc/Typography",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/docs/doc/Typography.md",tags:[],version:"current",lastUpdatedAt:1709646294,formattedLastUpdatedAt:"Mar 5, 2024",sidebarPosition:3,frontMatter:{sidebar_position:3},sidebar:"DocSidebar",previous:{title:"Theme",permalink:"/react-native-kitra/docs/next/doc/Theme"}},s={},d=[{value:"Applying typography",id:"applying-typography",level:2},{value:"Accessing and updating typography",id:"accessing-and-updating-typography",level:2}];function l(n){const e={code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",strong:"strong",...(0,o.a)(),...n.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(e.h1,{id:"typography",children:"Typography"}),"\n",(0,i.jsx)(e.h2,{id:"applying-typography",children:"Applying typography"}),"\n",(0,i.jsx)(e.p,{children:"To use typography, you need to wrap the root component with provider."}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-jsx",children:"import { KitraProvider } from '@tra-tech/react-native-kitra';\nimport App from './src/App';\n\nexport default function Main() {\n return (\n \n \n \n );\n}\n"})}),"\n",(0,i.jsx)(e.h2,{id:"accessing-and-updating-typography",children:"Accessing and updating typography"}),"\n",(0,i.jsx)(e.p,{children:"Once you've wrapped your app with the provider, you can access the typography styles using the useTypography hook."}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-js",children:"import { useTypography } from 'react';\n\nconst myTypography= {\n heading: {\n h1: {\n fontSize: 15,\n lineHeight: 30,\n fontFamily: 'poppins-medium',\n }\n },\n body: {\n regular: {\n fontSize: 10,\n lineHeight: 12,\n fontFamily: 'medium',\n },\n otherTypo: {\n fontSize: 12,\n lineHeight: 16,\n }\n },\n otherTypo: {\n fontSize: 12,\n lineHeight: 16,\n }\n }\n\nfunction MyComponent() {\n const { typography, updateTypography } = useTypography();\n\n useEffect(() => {\n updateTypography(myTypography)\n }, []);\n return (\n \n \n This text is styled with the regular body font style.\n \n \n );\n}\n"})}),"\n",(0,i.jsx)(e.p,{children:(0,i.jsx)(e.strong,{children:"Heading:"})}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-js",children:" heading: {\n h1: {\n fontSize: 30,\n lineHeight: 45,\n fontFamily: 'medium',\n },\n h2: {\n fontSize: 28,\n lineHeight: 42,\n fontFamily: 'medium',\n },\n h3: {\n fontSize: 23,\n lineHeight: 35,\n fontFamily: 'medium',\n },\n h4: {\n fontSize: 19,\n lineHeight: 29,\n fontFamily: 'medium',\n },\n h5: {\n fontSize: 16,\n lineHeight: 25,\n fontFamily: 'medium',\n },\n },\n"})}),"\n",(0,i.jsx)(e.p,{children:(0,i.jsx)(e.strong,{children:"Body:"})}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-js",children:" body: {\n regular: {\n fontSize: 14,\n lineHeight: 16,\n fontFamily: 'regular',\n },\n sregular: {\n fontSize: 12,\n lineHeight: 16,\n fontFamily: 'regular',\n },\n xsregular: {\n fontSize: 10,\n lineHeight: 14,\n fontFamily: 'regular',\n },\n xxsregular: {\n fontSize: 8,\n lineHeight: 12,\n fontFamily: 'regular',\n },\n medium: {\n fontSize: 14,\n lineHeight: 21,\n fontFamily: 'medium',\n },\n smedium: {\n fontSize: 12,\n lineHeight: 18,\n fontFamily: 'medium',\n },\n xsmedium: {\n fontSize: 10,\n lineHeight: 16,\n fontFamily: 'medium',\n },\n xxsmedium: {\n fontSize: 8,\n lineHeight: 12,\n fontFamily: 'medium',\n },\n },\n\n"})})]})}function h(n={}){const{wrapper:e}={...(0,o.a)(),...n.components};return e?(0,i.jsx)(e,{...n,children:(0,i.jsx)(l,{...n})}):l(n)}},1151:(n,e,t)=>{t.d(e,{Z:()=>p,a:()=>a});var i=t(7294);const o={},r=i.createContext(o);function a(n){const e=i.useContext(r);return i.useMemo((function(){return"function"==typeof n?n(e):{...e,...n}}),[e,n])}function p(n){let e;return e=n.disableParentContext?"function"==typeof n.components?n.components(o):n.components||o:a(n.components),i.createElement(r.Provider,{value:e},n.children)}}}]); \ No newline at end of file diff --git a/assets/js/9eb89d33.175d0b11.js b/assets/js/9eb89d33.4fc0f424.js similarity index 99% rename from assets/js/9eb89d33.175d0b11.js rename to assets/js/9eb89d33.4fc0f424.js index 9e7d9b5..005be31 100644 --- a/assets/js/9eb89d33.175d0b11.js +++ b/assets/js/9eb89d33.4fc0f424.js @@ -1 +1 @@ -"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[5148],{8051:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>o,default:()=>h,frontMatter:()=>d,metadata:()=>i,toc:()=>l});var s=n(5893),r=n(1151);const d={sidebar_position:5},o="Button",i={id:"components/button",title:"Button",description:"The Button component is a customizable button that can display either a label or an icon, or both. It is built using the Pressable component from react-native and allows for various states like focused and disabled.",source:"@site/docs/components/button.md",sourceDirName:"components",slug:"/components/button",permalink:"/react-native-kitra/docs/next/components/button",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/docs/components/button.md",tags:[],version:"current",lastUpdatedAt:1707292585,formattedLastUpdatedAt:"Feb 7, 2024",sidebarPosition:5,frontMatter:{sidebar_position:5},sidebar:"ComponentsSidebar",previous:{title:"Badge",permalink:"/react-native-kitra/docs/next/components/badge"},next:{title:"CheckBox",permalink:"/react-native-kitra/docs/next/components/checkbox"}},c={},l=[{value:"Import",id:"import",level:3},{value:"Usage",id:"usage",level:3},{value:"Props",id:"props",level:3},{value:"Types",id:"types",level:3}];function a(e){const t={a:"a",code:"code",h1:"h1",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h1,{id:"button",children:"Button"}),"\n",(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.strong,{children:"Button"})," component is a customizable button that can display either a label or an icon, or both. It is built using the ",(0,s.jsx)(t.a,{href:"https://reactnative.dev/docs/pressable",children:"Pressable"})," component from react-native and allows for various states like focused and disabled."]}),"\n",(0,s.jsx)(t.h3,{id:"import",children:"Import"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",children:'import { Button } from "@tra-tech/react-native-kitra"; \n'})}),"\n",(0,s.jsx)(t.h3,{id:"usage",children:"Usage"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",children:"import { Button, Icon } from '@tra-tech/react-native-kitra';\nimport { View } from 'react-native';\n\nconst App = () => (\n \n \n \n);\n\nexport default App;\n\n\n"})}),"\n",(0,s.jsx)(t.h3,{id:"props",children:"Props"}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{children:"Prop"}),(0,s.jsx)(t.th,{children:"Type"}),(0,s.jsx)(t.th,{children:"Required"}),(0,s.jsx)(t.th,{children:"Description"})]})}),(0,s.jsxs)(t.tbody,{children:[(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"size"}),(0,s.jsx)(t.td,{children:(0,s.jsx)("code",{children:"'small' | 'medium' | 'large'"})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsxs)(t.td,{children:["The size of the button. Default value: ",(0,s.jsx)(t.code,{children:"'medium'"}),"."]})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"disabled"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"boolean"})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsxs)(t.td,{children:["Determines whether the button is disabled. Default value: ",(0,s.jsx)(t.code,{children:"false"}),"."]})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"label"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"string"})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"The label to display on the button."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"iconPosition"}),(0,s.jsx)(t.td,{children:(0,s.jsx)("code",{children:"'left' | 'right'"})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsxs)(t.td,{children:["The position of the icon in relation to the label. Default value: ",(0,s.jsx)(t.code,{children:"'left'"}),"."]})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"style"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,s.jsx)(t.code,{children:"StyleProp"})})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"The style object for the button."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"textStyle"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"https://reactnative.dev/docs/text-style-props",children:(0,s.jsx)(t.code,{children:"StyleProp"})})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"The style object for the button's text."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"children"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"https://reactnative.dev/docs/react-node",children:(0,s.jsx)(t.code,{children:"React.ReactNode"})})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"Icons to be rendered inside the button."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"statusStyle"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"ActionProps"})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"Contains style definitions for a button component's normal, focused, and disabled states, specifying background and text colors."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"theme"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"UITheme"})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"The theme to use for the component."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"typography"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"UITypography"})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"The typography to use for the component."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"...PressableProps"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"https://reactnative.dev/docs/pressable#props",children:(0,s.jsx)(t.code,{children:"Pressable"})})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsxs)(t.td,{children:["Any additional props to be passed to the underlying ",(0,s.jsx)(t.code,{children:"Pressable"})," component."]})]})]})]}),"\n",(0,s.jsx)(t.h3,{id:"types",children:"Types"}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{children:"Name"}),(0,s.jsx)(t.th,{children:"Type"})]})}),(0,s.jsx)(t.tbody,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"ActionProps"}),(0,s.jsxs)(t.td,{children:[(0,s.jsx)(t.code,{children:" { default:{container: {backgroundColor: string},text: {color: string}},"}),(0,s.jsx)("br",{}),(0,s.jsx)(t.code,{children:"focused: {container: {backgroundColor: string},text: {color: string}},"}),(0,s.jsx)("br",{}),(0,s.jsx)(t.code,{children:"disabled: {container: { backgroundColor: string},text:{color:string}}}"})]})]})})]})]})}function h(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(a,{...e})}):a(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>i,a:()=>o});var s=n(7294);const r={},d=s.createContext(r);function o(e){const t=s.useContext(d);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),s.createElement(d.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[5148],{8051:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>o,default:()=>h,frontMatter:()=>d,metadata:()=>i,toc:()=>l});var s=n(5893),r=n(1151);const d={sidebar_position:5},o="Button",i={id:"components/button",title:"Button",description:"The Button component is a customizable button that can display either a label or an icon, or both. It is built using the Pressable component from react-native and allows for various states like focused and disabled.",source:"@site/docs/components/button.md",sourceDirName:"components",slug:"/components/button",permalink:"/react-native-kitra/docs/next/components/button",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/docs/components/button.md",tags:[],version:"current",lastUpdatedAt:1709646294,formattedLastUpdatedAt:"Mar 5, 2024",sidebarPosition:5,frontMatter:{sidebar_position:5},sidebar:"ComponentsSidebar",previous:{title:"Badge",permalink:"/react-native-kitra/docs/next/components/badge"},next:{title:"CheckBox",permalink:"/react-native-kitra/docs/next/components/checkbox"}},c={},l=[{value:"Import",id:"import",level:3},{value:"Usage",id:"usage",level:3},{value:"Props",id:"props",level:3},{value:"Types",id:"types",level:3}];function a(e){const t={a:"a",code:"code",h1:"h1",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h1,{id:"button",children:"Button"}),"\n",(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.strong,{children:"Button"})," component is a customizable button that can display either a label or an icon, or both. It is built using the ",(0,s.jsx)(t.a,{href:"https://reactnative.dev/docs/pressable",children:"Pressable"})," component from react-native and allows for various states like focused and disabled."]}),"\n",(0,s.jsx)(t.h3,{id:"import",children:"Import"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",children:'import { Button } from "@tra-tech/react-native-kitra"; \n'})}),"\n",(0,s.jsx)(t.h3,{id:"usage",children:"Usage"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",children:"import { Button, Icon } from '@tra-tech/react-native-kitra';\nimport { View } from 'react-native';\n\nconst App = () => (\n \n \n \n);\n\nexport default App;\n\n\n"})}),"\n",(0,s.jsx)(t.h3,{id:"props",children:"Props"}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{children:"Prop"}),(0,s.jsx)(t.th,{children:"Type"}),(0,s.jsx)(t.th,{children:"Required"}),(0,s.jsx)(t.th,{children:"Description"})]})}),(0,s.jsxs)(t.tbody,{children:[(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"size"}),(0,s.jsx)(t.td,{children:(0,s.jsx)("code",{children:"'small' | 'medium' | 'large'"})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsxs)(t.td,{children:["The size of the button. Default value: ",(0,s.jsx)(t.code,{children:"'medium'"}),"."]})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"disabled"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"boolean"})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsxs)(t.td,{children:["Determines whether the button is disabled. Default value: ",(0,s.jsx)(t.code,{children:"false"}),"."]})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"label"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"string"})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"The label to display on the button."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"iconPosition"}),(0,s.jsx)(t.td,{children:(0,s.jsx)("code",{children:"'left' | 'right'"})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsxs)(t.td,{children:["The position of the icon in relation to the label. Default value: ",(0,s.jsx)(t.code,{children:"'left'"}),"."]})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"style"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,s.jsx)(t.code,{children:"StyleProp"})})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"The style object for the button."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"textStyle"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"https://reactnative.dev/docs/text-style-props",children:(0,s.jsx)(t.code,{children:"StyleProp"})})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"The style object for the button's text."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"children"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"https://reactnative.dev/docs/react-node",children:(0,s.jsx)(t.code,{children:"React.ReactNode"})})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"Icons to be rendered inside the button."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"statusStyle"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"ActionProps"})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"Contains style definitions for a button component's normal, focused, and disabled states, specifying background and text colors."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"theme"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"UITheme"})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"The theme to use for the component."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"typography"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"UITypography"})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"The typography to use for the component."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"...PressableProps"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"https://reactnative.dev/docs/pressable#props",children:(0,s.jsx)(t.code,{children:"Pressable"})})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsxs)(t.td,{children:["Any additional props to be passed to the underlying ",(0,s.jsx)(t.code,{children:"Pressable"})," component."]})]})]})]}),"\n",(0,s.jsx)(t.h3,{id:"types",children:"Types"}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{children:"Name"}),(0,s.jsx)(t.th,{children:"Type"})]})}),(0,s.jsx)(t.tbody,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"ActionProps"}),(0,s.jsxs)(t.td,{children:[(0,s.jsx)(t.code,{children:" { default:{container: {backgroundColor: string},text: {color: string}},"}),(0,s.jsx)("br",{}),(0,s.jsx)(t.code,{children:"focused: {container: {backgroundColor: string},text: {color: string}},"}),(0,s.jsx)("br",{}),(0,s.jsx)(t.code,{children:"disabled: {container: { backgroundColor: string},text:{color:string}}}"})]})]})})]})]})}function h(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(a,{...e})}):a(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>i,a:()=>o});var s=n(7294);const r={},d=s.createContext(r);function o(e){const t=s.useContext(d);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),s.createElement(d.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/a608fec9.4cba2dde.js b/assets/js/a608fec9.8fa3e564.js similarity index 97% rename from assets/js/a608fec9.4cba2dde.js rename to assets/js/a608fec9.8fa3e564.js index ef9ad81..3495d35 100644 --- a/assets/js/a608fec9.4cba2dde.js +++ b/assets/js/a608fec9.8fa3e564.js @@ -1 +1 @@ -"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[9868],{4386:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>c,default:()=>h,frontMatter:()=>o,metadata:()=>i,toc:()=>l});var r=n(5893),s=n(1151);const o={sidebar_position:10},c="Icon",i={id:"components/icon",title:"Icon",description:"The Icon component that uses `react-native-vector-icons`.",source:"@site/docs/components/icon.md",sourceDirName:"components",slug:"/components/icon",permalink:"/react-native-kitra/docs/next/components/icon",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/docs/components/icon.md",tags:[],version:"current",lastUpdatedAt:1707292585,formattedLastUpdatedAt:"Feb 7, 2024",sidebarPosition:10,frontMatter:{sidebar_position:10},sidebar:"ComponentsSidebar",previous:{title:"Dropdown",permalink:"/react-native-kitra/docs/next/components/dropdown"},next:{title:"Menu",permalink:"/react-native-kitra/docs/next/components/menu"}},d={},l=[{value:"Import",id:"import",level:3},{value:"Import",id:"import-1",level:3},{value:"Props",id:"props",level:3}];function a(e){const t={a:"a",code:"code",h1:"h1",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,s.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h1,{id:"icon",children:"Icon"}),"\n",(0,r.jsxs)(t.p,{children:["The ",(0,r.jsx)(t.strong,{children:"Icon"})," component that uses ",(0,r.jsx)(t.a,{href:"https://github.com/oblador/react-native-vector-icons",children:(0,r.jsx)(t.code,{children:"react-native-vector-icons"})}),"."]}),"\n",(0,r.jsx)(t.h3,{id:"import",children:"Import"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"import { Icon } from '@tra-tech/react-native-kitra';\n"})}),"\n",(0,r.jsx)(t.h3,{id:"import-1",children:"Import"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:'import { Icon } from \'@tra-tech/react-native-kitra\';\nimport { View } from \'react-native\';\n\nconst App = () => (\n \n \n \n \n);\n\nexport default App;\n\n'})}),"\n",(0,r.jsx)(t.h3,{id:"props",children:"Props"}),"\n",(0,r.jsxs)(t.table,{children:[(0,r.jsx)(t.thead,{children:(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.th,{children:"Prop name"}),(0,r.jsx)(t.th,{children:"Type"}),(0,r.jsx)(t.th,{children:"Required"}),(0,r.jsx)(t.th,{children:"Description"})]})}),(0,r.jsxs)(t.tbody,{children:[(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"type"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.a,{href:"https://github.com/oblador/react-native-vector-icons#bundled-icon-sets",children:(0,r.jsx)(t.code,{children:"Icon Sets"})})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsxs)(t.td,{children:["Name of icon set. Default value: ",(0,r.jsx)(t.code,{children:"'ionicons'"}),"."]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"name"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"string"})}),(0,r.jsx)(t.td,{children:"Yes"}),(0,r.jsx)(t.td,{children:"Name of icon."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"color"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"string"})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"Color of icon."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"size"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"number"})}),(0,r.jsx)(t.td,{children:"Yes"}),(0,r.jsx)(t.td,{children:"Size of icon."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"allowFontScaling"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"boolean"})}),(0,r.jsx)(t.td,{children:"Yes"}),(0,r.jsxs)(t.td,{children:["Specifies whether fonts should scale to respect Text Size accessibility settings. Default value: ",(0,r.jsx)(t.code,{children:"true"}),"."]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"style"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,r.jsx)(t.code,{children:"StyleProp"})})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"Additional styles to apply to the divider."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"theme"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"UITheme "})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"The UI theme to use for the component."})]})]})]})]})}function h(e={}){const{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(a,{...e})}):a(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>i,a:()=>c});var r=n(7294);const s={},o=r.createContext(s);function c(e){const t=r.useContext(o);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:c(e.components),r.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[9868],{4386:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>c,default:()=>h,frontMatter:()=>o,metadata:()=>i,toc:()=>l});var r=n(5893),s=n(1151);const o={sidebar_position:10},c="Icon",i={id:"components/icon",title:"Icon",description:"The Icon component that uses `react-native-vector-icons`.",source:"@site/docs/components/icon.md",sourceDirName:"components",slug:"/components/icon",permalink:"/react-native-kitra/docs/next/components/icon",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/docs/components/icon.md",tags:[],version:"current",lastUpdatedAt:1709646294,formattedLastUpdatedAt:"Mar 5, 2024",sidebarPosition:10,frontMatter:{sidebar_position:10},sidebar:"ComponentsSidebar",previous:{title:"Dropdown",permalink:"/react-native-kitra/docs/next/components/dropdown"},next:{title:"Menu",permalink:"/react-native-kitra/docs/next/components/menu"}},d={},l=[{value:"Import",id:"import",level:3},{value:"Import",id:"import-1",level:3},{value:"Props",id:"props",level:3}];function a(e){const t={a:"a",code:"code",h1:"h1",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,s.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h1,{id:"icon",children:"Icon"}),"\n",(0,r.jsxs)(t.p,{children:["The ",(0,r.jsx)(t.strong,{children:"Icon"})," component that uses ",(0,r.jsx)(t.a,{href:"https://github.com/oblador/react-native-vector-icons",children:(0,r.jsx)(t.code,{children:"react-native-vector-icons"})}),"."]}),"\n",(0,r.jsx)(t.h3,{id:"import",children:"Import"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"import { Icon } from '@tra-tech/react-native-kitra';\n"})}),"\n",(0,r.jsx)(t.h3,{id:"import-1",children:"Import"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:'import { Icon } from \'@tra-tech/react-native-kitra\';\nimport { View } from \'react-native\';\n\nconst App = () => (\n \n \n \n \n);\n\nexport default App;\n\n'})}),"\n",(0,r.jsx)(t.h3,{id:"props",children:"Props"}),"\n",(0,r.jsxs)(t.table,{children:[(0,r.jsx)(t.thead,{children:(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.th,{children:"Prop name"}),(0,r.jsx)(t.th,{children:"Type"}),(0,r.jsx)(t.th,{children:"Required"}),(0,r.jsx)(t.th,{children:"Description"})]})}),(0,r.jsxs)(t.tbody,{children:[(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"type"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.a,{href:"https://github.com/oblador/react-native-vector-icons#bundled-icon-sets",children:(0,r.jsx)(t.code,{children:"Icon Sets"})})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsxs)(t.td,{children:["Name of icon set. Default value: ",(0,r.jsx)(t.code,{children:"'ionicons'"}),"."]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"name"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"string"})}),(0,r.jsx)(t.td,{children:"Yes"}),(0,r.jsx)(t.td,{children:"Name of icon."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"color"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"string"})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"Color of icon."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"size"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"number"})}),(0,r.jsx)(t.td,{children:"Yes"}),(0,r.jsx)(t.td,{children:"Size of icon."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"allowFontScaling"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"boolean"})}),(0,r.jsx)(t.td,{children:"Yes"}),(0,r.jsxs)(t.td,{children:["Specifies whether fonts should scale to respect Text Size accessibility settings. Default value: ",(0,r.jsx)(t.code,{children:"true"}),"."]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"style"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,r.jsx)(t.code,{children:"StyleProp"})})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"Additional styles to apply to the divider."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"theme"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"UITheme "})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"The UI theme to use for the component."})]})]})]})]})}function h(e={}){const{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(a,{...e})}):a(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>i,a:()=>c});var r=n(7294);const s={},o=r.createContext(s);function c(e){const t=r.useContext(o);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:c(e.components),r.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/aad2441e.07b64c8b.js b/assets/js/aad2441e.8eb507d6.js similarity index 97% rename from assets/js/aad2441e.07b64c8b.js rename to assets/js/aad2441e.8eb507d6.js index 9886936..0e266bb 100644 --- a/assets/js/aad2441e.07b64c8b.js +++ b/assets/js/aad2441e.8eb507d6.js @@ -1 +1 @@ -"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[9069],{3343:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>d,default:()=>h,frontMatter:()=>r,metadata:()=>i,toc:()=>a});var s=n(5893),o=n(1151);const r={sidebar_position:12},d="Modal",i={id:"components/modal",title:"Modal",description:"The Modal component is a basic way to present content above an enclosing view.",source:"@site/versioned_docs/version-1.x/components/modal.md",sourceDirName:"components",slug:"/components/modal",permalink:"/react-native-kitra/docs/components/modal",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/versioned_docs/version-1.x/components/modal.md",tags:[],version:"1.x",lastUpdatedAt:1707292585,formattedLastUpdatedAt:"Feb 7, 2024",sidebarPosition:12,frontMatter:{sidebar_position:12},sidebar:"ComponentsSidebar",previous:{title:"Menu",permalink:"/react-native-kitra/docs/components/menu"},next:{title:"Pagerview",permalink:"/react-native-kitra/docs/components/pagerview"}},c={},a=[{value:"Import",id:"import",level:3},{value:"Usage",id:"usage",level:3},{value:"Props",id:"props",level:3}];function l(e){const t={a:"a",code:"code",h1:"h1",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,o.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h1,{id:"modal",children:"Modal"}),"\n",(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.strong,{children:"Modal"})," component is a basic way to present content above an enclosing view."]}),"\n",(0,s.jsx)(t.h3,{id:"import",children:"Import"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",children:"import { Modal } from '@tra-tech/react-native-kitra';\n"})}),"\n",(0,s.jsx)(t.h3,{id:"usage",children:"Usage"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",children:"import { Modal } from '@tra-tech/react-native-kitra';\nimport { useState } from 'react';\nimport { Text, TouchableOpacity, View } from 'react-native';\n\nconst App = () => {\n\n const [visible, setVisible] = useState(false);\n \n return (\n <>\n \n setVisible(true)}>\n Show Modal\n \n \n \n setVisible(false)}>\n Hide Modal\n \n \n \n );\n};\n\nexport default App;\n"})}),"\n",(0,s.jsx)(t.h3,{id:"props",children:"Props"}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{children:"Prop name"}),(0,s.jsx)(t.th,{children:"Type"}),(0,s.jsx)(t.th,{children:"Required"}),(0,s.jsx)(t.th,{children:"Description"})]})}),(0,s.jsxs)(t.tbody,{children:[(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"containerStyle"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,s.jsx)(t.code,{children:"StyleProp"})})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"Additional styles to apply to the modal container."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"modalStyle"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"https://reactnative.dev/docs/text-style-props",children:(0,s.jsx)(t.code,{children:"StyleProp"})})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"Additional styles to apply to the modal component."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"visible"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"boolean"})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsxs)(t.td,{children:["Visibility status. Default value: ",(0,s.jsx)(t.code,{children:"false"})]})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"children"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"https://reactnative.dev/docs/react-node",children:(0,s.jsx)(t.code,{children:"React.ReactNode"})})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"Content of the modal."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"...ModalProps"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"https://reactnative.dev/docs/modal#props",children:(0,s.jsx)(t.code,{children:"ModalProps"})})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"React native modal props."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"theme"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"UITheme "})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"The theme to use for the component."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"typography"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"UITypography"})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"The typography to use for the component."})]})]})]})]})}function h(e={}){const{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(l,{...e})}):l(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>i,a:()=>d});var s=n(7294);const o={},r=s.createContext(o);function d(e){const t=s.useContext(r);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:d(e.components),s.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[9069],{3343:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>d,default:()=>h,frontMatter:()=>r,metadata:()=>i,toc:()=>a});var s=n(5893),o=n(1151);const r={sidebar_position:12},d="Modal",i={id:"components/modal",title:"Modal",description:"The Modal component is a basic way to present content above an enclosing view.",source:"@site/versioned_docs/version-1.x/components/modal.md",sourceDirName:"components",slug:"/components/modal",permalink:"/react-native-kitra/docs/components/modal",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/versioned_docs/version-1.x/components/modal.md",tags:[],version:"1.x",lastUpdatedAt:1709646294,formattedLastUpdatedAt:"Mar 5, 2024",sidebarPosition:12,frontMatter:{sidebar_position:12},sidebar:"ComponentsSidebar",previous:{title:"Menu",permalink:"/react-native-kitra/docs/components/menu"},next:{title:"Pagerview",permalink:"/react-native-kitra/docs/components/pagerview"}},c={},a=[{value:"Import",id:"import",level:3},{value:"Usage",id:"usage",level:3},{value:"Props",id:"props",level:3}];function l(e){const t={a:"a",code:"code",h1:"h1",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,o.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h1,{id:"modal",children:"Modal"}),"\n",(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.strong,{children:"Modal"})," component is a basic way to present content above an enclosing view."]}),"\n",(0,s.jsx)(t.h3,{id:"import",children:"Import"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",children:"import { Modal } from '@tra-tech/react-native-kitra';\n"})}),"\n",(0,s.jsx)(t.h3,{id:"usage",children:"Usage"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",children:"import { Modal } from '@tra-tech/react-native-kitra';\nimport { useState } from 'react';\nimport { Text, TouchableOpacity, View } from 'react-native';\n\nconst App = () => {\n\n const [visible, setVisible] = useState(false);\n \n return (\n <>\n \n setVisible(true)}>\n Show Modal\n \n \n \n setVisible(false)}>\n Hide Modal\n \n \n \n );\n};\n\nexport default App;\n"})}),"\n",(0,s.jsx)(t.h3,{id:"props",children:"Props"}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{children:"Prop name"}),(0,s.jsx)(t.th,{children:"Type"}),(0,s.jsx)(t.th,{children:"Required"}),(0,s.jsx)(t.th,{children:"Description"})]})}),(0,s.jsxs)(t.tbody,{children:[(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"containerStyle"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,s.jsx)(t.code,{children:"StyleProp"})})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"Additional styles to apply to the modal container."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"modalStyle"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"https://reactnative.dev/docs/text-style-props",children:(0,s.jsx)(t.code,{children:"StyleProp"})})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"Additional styles to apply to the modal component."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"visible"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"boolean"})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsxs)(t.td,{children:["Visibility status. Default value: ",(0,s.jsx)(t.code,{children:"false"})]})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"children"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"https://reactnative.dev/docs/react-node",children:(0,s.jsx)(t.code,{children:"React.ReactNode"})})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"Content of the modal."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"...ModalProps"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"https://reactnative.dev/docs/modal#props",children:(0,s.jsx)(t.code,{children:"ModalProps"})})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"React native modal props."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"theme"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"UITheme "})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"The theme to use for the component."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"typography"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"UITypography"})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"The typography to use for the component."})]})]})]})]})}function h(e={}){const{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(l,{...e})}):l(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>i,a:()=>d});var s=n(7294);const o={},r=s.createContext(o);function d(e){const t=s.useContext(r);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:d(e.components),s.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/af747567.239af02a.js b/assets/js/af747567.01749577.js similarity index 99% rename from assets/js/af747567.239af02a.js rename to assets/js/af747567.01749577.js index 7877f8a..bf6bbd0 100644 --- a/assets/js/af747567.239af02a.js +++ b/assets/js/af747567.01749577.js @@ -1 +1 @@ -"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[8011],{5724:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>s,default:()=>h,frontMatter:()=>r,metadata:()=>i,toc:()=>c});var d=n(5893),o=n(1151);const r={sidebar_position:9},s="Dropdown",i={id:"components/dropdown",title:"Dropdown",description:"The Dropdown component provides a dropdown menu functionality. It allows users to select one or multiple items from a list of options displayed in a dropdown menu. The component is highly customizable with various props that can be passed to modify its appearance and behavior.",source:"@site/versioned_docs/version-1.x/components/dropdown.md",sourceDirName:"components",slug:"/components/dropdown",permalink:"/react-native-kitra/docs/components/dropdown",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/versioned_docs/version-1.x/components/dropdown.md",tags:[],version:"1.x",lastUpdatedAt:1707292585,formattedLastUpdatedAt:"Feb 7, 2024",sidebarPosition:9,frontMatter:{sidebar_position:9},sidebar:"ComponentsSidebar",previous:{title:"Divider",permalink:"/react-native-kitra/docs/components/divider"},next:{title:"Icon",permalink:"/react-native-kitra/docs/components/icon"}},l={},c=[{value:"Import",id:"import",level:3},{value:"Usage",id:"usage",level:3},{value:"Props",id:"props",level:3}];function a(e){const t={a:"a",code:"code",h1:"h1",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,o.a)(),...e.components};return(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)(t.h1,{id:"dropdown",children:"Dropdown"}),"\n",(0,d.jsxs)(t.p,{children:["The ",(0,d.jsx)(t.strong,{children:"Dropdown"})," component provides a dropdown menu functionality. It allows users to select one or multiple items from a list of options displayed in a dropdown menu. The component is highly customizable with various props that can be passed to modify its appearance and behavior."]}),"\n",(0,d.jsx)(t.h3,{id:"import",children:"Import"}),"\n",(0,d.jsx)(t.pre,{children:(0,d.jsx)(t.code,{className:"language-js",children:"import { Dropdown } from '@tra-tech/react-native-kitra';\n"})}),"\n",(0,d.jsx)(t.h3,{id:"usage",children:"Usage"}),"\n",(0,d.jsx)(t.pre,{children:(0,d.jsx)(t.code,{className:"language-js",children:"import { Dropdown } from '@tra-tech/react-native-kitra';\nimport { useState } from 'react';\nimport { View } from 'react-native';\n\nconst data = [{ label: 'Item 1', value: 1 }, { label: 'Item 2', value: 2 }, { label: 'Item 3', value: 3 }, { label: 'Item 4', value: 4 }, { label: 'Item 5', value: 5 }];\n\nconst App = () => {\n const [select, setSelect] = useState();\n return (\n \n \n setSelect(x.label)}\n displayedButtonValue={x => x.label}\n displayedRowValue={x => x.label}\n data={data}\n />\n \n \n setSelect(x.value)}\n displayedButtonValue={x => x.label}\n displayedRowValue={x => x.label}\n data={data}\n />\n \n \n );\n};\n\nexport default App;\n"})}),"\n",(0,d.jsx)(t.h3,{id:"props",children:"Props"}),"\n",(0,d.jsxs)(t.table,{children:[(0,d.jsx)(t.thead,{children:(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.th,{children:"Prop name"}),(0,d.jsx)(t.th,{children:"Type"}),(0,d.jsx)(t.th,{children:"Required"}),(0,d.jsx)(t.th,{children:"Description"})]})}),(0,d.jsxs)(t.tbody,{children:[(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"multiple"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.code,{children:"boolean"})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsxs)(t.td,{children:["Determines whether the dropdown should allow multiple selections. Default value: ",(0,d.jsx)(t.code,{children:"false"})]})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"disabled"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.code,{children:"boolean"})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsxs)(t.td,{children:["Determines whether the dropdown is disabled. Default value: ",(0,d.jsx)(t.code,{children:"false"}),"."]})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"left"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.a,{href:"https://reactnative.dev/docs/react-node",children:(0,d.jsx)(t.code,{children:"(isVisible:boolean)=>React.ReactNode"})})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"A React node that will be created to the left of the dropdown button and return its visible."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"right"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.a,{href:"https://reactnative.dev/docs/react-node",children:(0,d.jsx)(t.code,{children:"(isVisible:boolean)=>React.ReactNode"})})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"A React node that will be created to the right of the dropdown button and return its visible."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"data"}),(0,d.jsx)(t.td,{children:(0,d.jsxs)("code",{children:[" Array","<","(string | object )> "]})}),(0,d.jsx)(t.td,{children:"Yes"}),(0,d.jsx)(t.td,{children:"An array of objects or strings to be used as options in the dropdown list."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"displayedRowValue"}),(0,d.jsx)(t.td,{children:(0,d.jsx)("code",{children:"(item: string | object) => any"})}),(0,d.jsx)(t.td,{children:"Yes"}),(0,d.jsxs)(t.td,{children:["A function that takes an item from the ",(0,d.jsx)(t.code,{children:"data"})," array and returns a value to be displayed in the dropdown list."]})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"displayedButtonValue"}),(0,d.jsx)(t.td,{children:(0,d.jsx)("code",{children:"(item: string | object) => any "})}),(0,d.jsx)(t.td,{children:"Yes"}),(0,d.jsxs)(t.td,{children:["A function that takes an item from the ",(0,d.jsx)(t.code,{children:"data"})," array and returns a value to be displayed on the dropdown button."]})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"listContainerStyle"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,d.jsx)(t.code,{children:"StyleProp"})})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"An object containing styles to be applied to the dropdown list container."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"defaultValue"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.code,{children:"Array"})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"An array of objects or strings to be pre-selected in the dropdown."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"displayLength"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.code,{children:"number"})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"The number of items to display in the button."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"buttonTitle"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.code,{children:"string"})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"The default text to be displayed on the dropdown button when no options are selected."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"rowStyle"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,d.jsx)(t.code,{children:"StyleProp"})})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"An object containing styles to be applied to each item in the dropdown list."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"buttonStyle"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,d.jsx)(t.code,{children:"StyleProp"})})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"An object containing styles to be applied to the dropdown button."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"buttonTextStyle"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.a,{href:"https://reactnative.dev/docs/text-style-props",children:(0,d.jsx)(t.code,{children:"StyleProp"})})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"An object containing styles to be applied to the text inside the dropdown button."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"selectall"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.code,{children:"boolean"})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:'Whether to include a "Select All" option in the dropdown.'})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"onSelect"}),(0,d.jsx)(t.td,{children:(0,d.jsx)("code",{children:"(item: Array | Array | string | object) => void"})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"A function to be called whenever an item is selected in the dropdown."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"onComplete"}),(0,d.jsx)(t.td,{children:(0,d.jsx)("code",{children:"(item: object | string) => void "})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"A function to be called whenever submit button pressed."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"rowTextStyle"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.a,{href:"https://reactnative.dev/docs/text-style-props",children:(0,d.jsx)(t.code,{children:"StyleProp"})})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"An object containing styles to be applied to the text inside each item in the dropdown list."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"containerStyle"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,d.jsx)(t.code,{children:"StyleProp"})})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"An object containing styles to be applied to the dropdown container."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"buttonBackgrounColor"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.code,{children:"{ focusBackground: string, defaultBackground: string }"})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"Used to customize the background color of the dropdown."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"iconStyle"}),(0,d.jsxs)(t.td,{children:[(0,d.jsx)(t.code,{children:"{ color: string,"}),(0,d.jsx)("br",{}),(0,d.jsx)(t.code,{children:" container: StyleProp }"})]}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"The color property determines the icon's color, and the container property defines the style of the container that holds the icon."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"autoPosition"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.code,{children:"boolean"})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsxs)(t.td,{children:["Controls whether the dropdown component's dropdown menu is positioned automatically. Default value: ",(0,d.jsx)(t.code,{children:"true"})]})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"theme"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.code,{children:"UITheme"})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"The theme to use for the component."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"typography"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.code,{children:"UITypography"})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"The typography to use for the component."})]})]})]})]})}function h(e={}){const{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,d.jsx)(t,{...e,children:(0,d.jsx)(a,{...e})}):a(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>i,a:()=>s});var d=n(7294);const o={},r=d.createContext(o);function s(e){const t=d.useContext(r);return d.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:s(e.components),d.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[8011],{5724:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>s,default:()=>h,frontMatter:()=>r,metadata:()=>i,toc:()=>c});var d=n(5893),o=n(1151);const r={sidebar_position:9},s="Dropdown",i={id:"components/dropdown",title:"Dropdown",description:"The Dropdown component provides a dropdown menu functionality. It allows users to select one or multiple items from a list of options displayed in a dropdown menu. The component is highly customizable with various props that can be passed to modify its appearance and behavior.",source:"@site/versioned_docs/version-1.x/components/dropdown.md",sourceDirName:"components",slug:"/components/dropdown",permalink:"/react-native-kitra/docs/components/dropdown",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/versioned_docs/version-1.x/components/dropdown.md",tags:[],version:"1.x",lastUpdatedAt:1709646294,formattedLastUpdatedAt:"Mar 5, 2024",sidebarPosition:9,frontMatter:{sidebar_position:9},sidebar:"ComponentsSidebar",previous:{title:"Divider",permalink:"/react-native-kitra/docs/components/divider"},next:{title:"Icon",permalink:"/react-native-kitra/docs/components/icon"}},l={},c=[{value:"Import",id:"import",level:3},{value:"Usage",id:"usage",level:3},{value:"Props",id:"props",level:3}];function a(e){const t={a:"a",code:"code",h1:"h1",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,o.a)(),...e.components};return(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)(t.h1,{id:"dropdown",children:"Dropdown"}),"\n",(0,d.jsxs)(t.p,{children:["The ",(0,d.jsx)(t.strong,{children:"Dropdown"})," component provides a dropdown menu functionality. It allows users to select one or multiple items from a list of options displayed in a dropdown menu. The component is highly customizable with various props that can be passed to modify its appearance and behavior."]}),"\n",(0,d.jsx)(t.h3,{id:"import",children:"Import"}),"\n",(0,d.jsx)(t.pre,{children:(0,d.jsx)(t.code,{className:"language-js",children:"import { Dropdown } from '@tra-tech/react-native-kitra';\n"})}),"\n",(0,d.jsx)(t.h3,{id:"usage",children:"Usage"}),"\n",(0,d.jsx)(t.pre,{children:(0,d.jsx)(t.code,{className:"language-js",children:"import { Dropdown } from '@tra-tech/react-native-kitra';\nimport { useState } from 'react';\nimport { View } from 'react-native';\n\nconst data = [{ label: 'Item 1', value: 1 }, { label: 'Item 2', value: 2 }, { label: 'Item 3', value: 3 }, { label: 'Item 4', value: 4 }, { label: 'Item 5', value: 5 }];\n\nconst App = () => {\n const [select, setSelect] = useState();\n return (\n \n \n setSelect(x.label)}\n displayedButtonValue={x => x.label}\n displayedRowValue={x => x.label}\n data={data}\n />\n \n \n setSelect(x.value)}\n displayedButtonValue={x => x.label}\n displayedRowValue={x => x.label}\n data={data}\n />\n \n \n );\n};\n\nexport default App;\n"})}),"\n",(0,d.jsx)(t.h3,{id:"props",children:"Props"}),"\n",(0,d.jsxs)(t.table,{children:[(0,d.jsx)(t.thead,{children:(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.th,{children:"Prop name"}),(0,d.jsx)(t.th,{children:"Type"}),(0,d.jsx)(t.th,{children:"Required"}),(0,d.jsx)(t.th,{children:"Description"})]})}),(0,d.jsxs)(t.tbody,{children:[(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"multiple"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.code,{children:"boolean"})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsxs)(t.td,{children:["Determines whether the dropdown should allow multiple selections. Default value: ",(0,d.jsx)(t.code,{children:"false"})]})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"disabled"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.code,{children:"boolean"})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsxs)(t.td,{children:["Determines whether the dropdown is disabled. Default value: ",(0,d.jsx)(t.code,{children:"false"}),"."]})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"left"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.a,{href:"https://reactnative.dev/docs/react-node",children:(0,d.jsx)(t.code,{children:"(isVisible:boolean)=>React.ReactNode"})})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"A React node that will be created to the left of the dropdown button and return its visible."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"right"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.a,{href:"https://reactnative.dev/docs/react-node",children:(0,d.jsx)(t.code,{children:"(isVisible:boolean)=>React.ReactNode"})})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"A React node that will be created to the right of the dropdown button and return its visible."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"data"}),(0,d.jsx)(t.td,{children:(0,d.jsxs)("code",{children:[" Array","<","(string | object )> "]})}),(0,d.jsx)(t.td,{children:"Yes"}),(0,d.jsx)(t.td,{children:"An array of objects or strings to be used as options in the dropdown list."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"displayedRowValue"}),(0,d.jsx)(t.td,{children:(0,d.jsx)("code",{children:"(item: string | object) => any"})}),(0,d.jsx)(t.td,{children:"Yes"}),(0,d.jsxs)(t.td,{children:["A function that takes an item from the ",(0,d.jsx)(t.code,{children:"data"})," array and returns a value to be displayed in the dropdown list."]})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"displayedButtonValue"}),(0,d.jsx)(t.td,{children:(0,d.jsx)("code",{children:"(item: string | object) => any "})}),(0,d.jsx)(t.td,{children:"Yes"}),(0,d.jsxs)(t.td,{children:["A function that takes an item from the ",(0,d.jsx)(t.code,{children:"data"})," array and returns a value to be displayed on the dropdown button."]})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"listContainerStyle"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,d.jsx)(t.code,{children:"StyleProp"})})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"An object containing styles to be applied to the dropdown list container."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"defaultValue"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.code,{children:"Array"})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"An array of objects or strings to be pre-selected in the dropdown."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"displayLength"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.code,{children:"number"})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"The number of items to display in the button."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"buttonTitle"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.code,{children:"string"})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"The default text to be displayed on the dropdown button when no options are selected."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"rowStyle"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,d.jsx)(t.code,{children:"StyleProp"})})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"An object containing styles to be applied to each item in the dropdown list."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"buttonStyle"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,d.jsx)(t.code,{children:"StyleProp"})})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"An object containing styles to be applied to the dropdown button."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"buttonTextStyle"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.a,{href:"https://reactnative.dev/docs/text-style-props",children:(0,d.jsx)(t.code,{children:"StyleProp"})})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"An object containing styles to be applied to the text inside the dropdown button."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"selectall"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.code,{children:"boolean"})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:'Whether to include a "Select All" option in the dropdown.'})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"onSelect"}),(0,d.jsx)(t.td,{children:(0,d.jsx)("code",{children:"(item: Array | Array | string | object) => void"})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"A function to be called whenever an item is selected in the dropdown."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"onComplete"}),(0,d.jsx)(t.td,{children:(0,d.jsx)("code",{children:"(item: object | string) => void "})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"A function to be called whenever submit button pressed."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"rowTextStyle"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.a,{href:"https://reactnative.dev/docs/text-style-props",children:(0,d.jsx)(t.code,{children:"StyleProp"})})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"An object containing styles to be applied to the text inside each item in the dropdown list."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"containerStyle"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,d.jsx)(t.code,{children:"StyleProp"})})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"An object containing styles to be applied to the dropdown container."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"buttonBackgrounColor"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.code,{children:"{ focusBackground: string, defaultBackground: string }"})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"Used to customize the background color of the dropdown."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"iconStyle"}),(0,d.jsxs)(t.td,{children:[(0,d.jsx)(t.code,{children:"{ color: string,"}),(0,d.jsx)("br",{}),(0,d.jsx)(t.code,{children:" container: StyleProp }"})]}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"The color property determines the icon's color, and the container property defines the style of the container that holds the icon."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"autoPosition"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.code,{children:"boolean"})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsxs)(t.td,{children:["Controls whether the dropdown component's dropdown menu is positioned automatically. Default value: ",(0,d.jsx)(t.code,{children:"true"})]})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"theme"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.code,{children:"UITheme"})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"The theme to use for the component."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"typography"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.code,{children:"UITypography"})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"The typography to use for the component."})]})]})]})]})}function h(e={}){const{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,d.jsx)(t,{...e,children:(0,d.jsx)(a,{...e})}):a(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>i,a:()=>s});var d=n(7294);const o={},r=d.createContext(o);function s(e){const t=d.useContext(r);return d.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:s(e.components),d.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/b026eae7.f5045a37.js b/assets/js/b026eae7.c7b226da.js similarity index 50% rename from assets/js/b026eae7.f5045a37.js rename to assets/js/b026eae7.c7b226da.js index e685778..419c854 100644 --- a/assets/js/b026eae7.f5045a37.js +++ b/assets/js/b026eae7.c7b226da.js @@ -1 +1 @@ -"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[4376],{4799:(t,e,n)=>{n.r(e),n.d(e,{assets:()=>a,contentTitle:()=>c,default:()=>h,frontMatter:()=>r,metadata:()=>s,toc:()=>d});var o=n(5893),i=n(1151);const r={sidebar_position:2},c=void 0,s={id:"doc/Notification",title:"Notification",description:"Applying notification",source:"@site/docs/doc/Notification.md",sourceDirName:"doc",slug:"/doc/Notification",permalink:"/react-native-kitra/docs/next/doc/Notification",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/docs/doc/Notification.md",tags:[],version:"current",lastUpdatedAt:1707292585,formattedLastUpdatedAt:"Feb 7, 2024",sidebarPosition:2,frontMatter:{sidebar_position:2},sidebar:"DocSidebar",previous:{title:"Getting Started",permalink:"/react-native-kitra/docs/next/doc/getting-started"},next:{title:"Theme",permalink:"/react-native-kitra/docs/next/doc/Theme"}},a={},d=[{value:"Applying notification",id:"applying-notification",level:2},{value:"Applying custom notification",id:"applying-custom-notification",level:2},{value:"Show notifications on screen",id:"show-notifications-on-screen",level:2},{value:"Kitra Provider Props",id:"kitra-provider-props",level:3},{value:"showNotification Types",id:"shownotification-types",level:3}];function l(t){const e={a:"a",code:"code",h2:"h2",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,i.a)(),...t.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.h2,{id:"applying-notification",children:"Applying notification"}),"\n",(0,o.jsx)(e.p,{children:"To use notification, you need to wrap the root component with provider."}),"\n",(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:"language-jsx",children:"import { KitraProvider } from '@tra-tech/react-native-kitra';\nimport App from './src/App';\n\nexport default function Main() {\n return (\n \n \n \n );\n}\n"})}),"\n",(0,o.jsx)(e.h2,{id:"applying-custom-notification",children:"Applying custom notification"}),"\n",(0,o.jsx)(e.p,{children:"To use notification, you need to wrap the root component with provider."}),"\n",(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:"language-jsx",children:"\nimport { KitraProvider } from '@tra-tech/react-native-kitra';\nimport App from './src/App';\n\nconst linearMessageType = (theme: any, colorSheme: any) => ({\n SUCCESS: {\n backgroundColor: {\n color: theme.successBackground,\n location: [0.2, 1],\n bottomColor: theme.successBottom,\n bottomLocation: [0, 0.8],\n },\n icon: ,\n },\n WARNING: {\n backgroundColor: {\n color: theme.warningBackground,\n location: colorSheme === 'dark' ? [0, 0.8] : [0, 0.2, 0.4, 0.6, 0.8],\n bottomColor: theme.warningBottom,\n bottomLocation: [0, 0.1, 0.2, 0.3, 0.4, 0.6, 0.8],\n },\n icon: ,\n },\n ERROR: {\n backgroundColor: {\n color: theme.errorBackground,\n location: colorSheme === 'dark' ? [0.2, 1] : [0, 0.3, 0.6],\n bottomColor: theme.errorBottom,\n bottomLocation: [0, 0.2, 0.4, 0.6, 0.8],\n },\n icon: ,\n },\n});\n\nexport default function Main() {\n return (\n linearMessageType(theme, colorScheme)}>\n \n \n );\n}\n"})}),"\n",(0,o.jsx)(e.h2,{id:"show-notifications-on-screen",children:"Show notifications on screen"}),"\n",(0,o.jsxs)(e.p,{children:["To show notifications on the screen, use the ",(0,o.jsx)(e.strong,{children:"useNotification"})," hook."]}),"\n",(0,o.jsxs)(e.p,{children:["The ",(0,o.jsx)(e.strong,{children:"showNotification"})," function is used to organize and show notifications. You can customize these values to create your own notification. You can also use linear gradient colors."]}),"\n",(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:"language-jsx",children:"import { useNotification } from '@tra-tech/react-native-kitra';\n\nexport function App() {\n const {showNotification}= useNotification();\n\n return (\n \n showNotification({ type: 'WARNING', header: 'WARNING NOTIFICATION', message: 'Warning Information' })}>\n Show Notification\n \n \n );\n}\n"})}),"\n",(0,o.jsx)(e.h3,{id:"kitra-provider-props",children:"Kitra Provider Props"}),"\n",(0,o.jsxs)(e.table,{children:[(0,o.jsx)(e.thead,{children:(0,o.jsxs)(e.tr,{children:[(0,o.jsx)(e.th,{children:"Prop name"}),(0,o.jsx)(e.th,{children:"Type"}),(0,o.jsx)(e.th,{children:"Required"}),(0,o.jsx)(e.th,{children:"Description"})]})}),(0,o.jsxs)(e.tbody,{children:[(0,o.jsxs)(e.tr,{children:[(0,o.jsx)(e.td,{children:"containerStyle"}),(0,o.jsx)(e.td,{children:(0,o.jsx)(e.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,o.jsx)(e.code,{children:"StyleProp"})})}),(0,o.jsx)(e.td,{children:"No"}),(0,o.jsx)(e.td,{children:"Additional styles to apply to the notification container."})]}),(0,o.jsxs)(e.tr,{children:[(0,o.jsx)(e.td,{children:"linearMessageType"}),(0,o.jsxs)(e.td,{children:[(0,o.jsx)(e.code,{children:"(theme?:any, colorScheme?:('dark'|'light')=> {[key:string]:"}),(0,o.jsx)("br",{}),(0,o.jsx)(e.code,{children:" {backgroundColor:{color:string[],"}),(0,o.jsx)("br",{}),(0,o.jsx)(e.code,{children:" location:number [],"}),(0,o.jsx)("br",{}),(0,o.jsx)(e.code,{children:"bottomColor:string [],"}),(0,o.jsx)("br",{}),(0,o.jsx)(e.code,{children:"bottomLocation:number []} icon:React.ReactNodeonPress:()=>void}}"})]}),(0,o.jsx)(e.td,{children:"No"}),(0,o.jsx)(e.td,{children:"Notification linear gradient style to show."})]}),(0,o.jsxs)(e.tr,{children:[(0,o.jsx)(e.td,{children:"limit"}),(0,o.jsx)(e.td,{children:(0,o.jsx)(e.code,{children:"number"})}),(0,o.jsx)(e.td,{children:"No"}),(0,o.jsxs)(e.td,{children:["Maximum notification to show. Default value: ",(0,o.jsx)(e.code,{children:"3"})]})]}),(0,o.jsxs)(e.tr,{children:[(0,o.jsx)(e.td,{children:"onPress"}),(0,o.jsx)(e.td,{children:(0,o.jsx)(e.code,{children:"()=>void"})}),(0,o.jsx)(e.td,{children:"No"}),(0,o.jsx)(e.td,{children:"Function to execute on press."})]}),(0,o.jsxs)(e.tr,{children:[(0,o.jsx)(e.td,{children:"messageType"}),(0,o.jsx)(e.td,{children:(0,o.jsx)(e.code,{children:" [key: status]: { backgroundColor: string, icon: React.ReactNode}"})}),(0,o.jsx)(e.td,{children:"No"}),(0,o.jsx)(e.td,{children:"Notification style to show."})]})]})]}),"\n",(0,o.jsx)(e.h3,{id:"shownotification-types",children:"showNotification Types"}),"\n",(0,o.jsxs)(e.table,{children:[(0,o.jsx)(e.thead,{children:(0,o.jsxs)(e.tr,{children:[(0,o.jsx)(e.th,{children:"Name"}),(0,o.jsx)(e.th,{children:"Type"})]})}),(0,o.jsxs)(e.tbody,{children:[(0,o.jsxs)(e.tr,{children:[(0,o.jsx)(e.td,{children:"showNotification"}),(0,o.jsx)(e.td,{children:(0,o.jsx)(e.code,{children:"{type:status, header?:string, message?:string"})})]}),(0,o.jsxs)(e.tr,{children:[(0,o.jsx)(e.td,{children:"status"}),(0,o.jsxs)(e.td,{children:["status: ",(0,o.jsx)("code",{children:" 'SUCCESS' | 'WARNING' | 'ERROR' | 'INFO'"})]})]})]})]})]})}function h(t={}){const{wrapper:e}={...(0,i.a)(),...t.components};return e?(0,o.jsx)(e,{...t,children:(0,o.jsx)(l,{...t})}):l(t)}},1151:(t,e,n)=>{n.d(e,{Z:()=>s,a:()=>c});var o=n(7294);const i={},r=o.createContext(i);function c(t){const e=o.useContext(r);return o.useMemo((function(){return"function"==typeof t?t(e):{...e,...t}}),[e,t])}function s(t){let e;return e=t.disableParentContext?"function"==typeof t.components?t.components(i):t.components||i:c(t.components),o.createElement(r.Provider,{value:e},t.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[4376],{4799:(t,n,e)=>{e.r(n),e.d(n,{assets:()=>a,contentTitle:()=>c,default:()=>h,frontMatter:()=>r,metadata:()=>s,toc:()=>d});var o=e(5893),i=e(1151);const r={sidebar_position:2},c=void 0,s={id:"doc/Notification",title:"Notification",description:"Applying notification",source:"@site/docs/doc/Notification.md",sourceDirName:"doc",slug:"/doc/Notification",permalink:"/react-native-kitra/docs/next/doc/Notification",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/docs/doc/Notification.md",tags:[],version:"current",lastUpdatedAt:1709646294,formattedLastUpdatedAt:"Mar 5, 2024",sidebarPosition:2,frontMatter:{sidebar_position:2},sidebar:"DocSidebar",previous:{title:"Getting Started",permalink:"/react-native-kitra/docs/next/doc/getting-started"},next:{title:"Theme",permalink:"/react-native-kitra/docs/next/doc/Theme"}},a={},d=[{value:"Applying notification",id:"applying-notification",level:2},{value:"Applying custom notification",id:"applying-custom-notification",level:2},{value:"Show notifications on screen",id:"show-notifications-on-screen",level:2},{value:"Kitra Provider Props",id:"kitra-provider-props",level:3},{value:"showNotification Types",id:"shownotification-types",level:3}];function l(t){const n={a:"a",code:"code",h2:"h2",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,i.a)(),...t.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.h2,{id:"applying-notification",children:"Applying notification"}),"\n",(0,o.jsx)(n.p,{children:"To use notification, you need to wrap the root component with provider."}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-jsx",children:"import { KitraProvider } from '@tra-tech/react-native-kitra';\nimport App from './src/App';\n\nexport default function Main() {\n return (\n \n \n \n );\n}\n"})}),"\n",(0,o.jsx)(n.h2,{id:"applying-custom-notification",children:"Applying custom notification"}),"\n",(0,o.jsx)(n.p,{children:"To use notification, you need to wrap the root component with provider."}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-jsx",children:"\nimport { KitraProvider } from '@tra-tech/react-native-kitra';\nimport App from './src/App';\n\nconst linearMessageType = (theme: any, colorSheme: any) => ({\n SUCCESS: {\n backgroundColor: {\n color: theme.successBackground,\n location: [0.2, 1],\n bottomColor: theme.successBottom,\n bottomLocation: [0, 0.8],\n },\n icon: ,\n },\n WARNING: {\n backgroundColor: {\n color: theme.warningBackground,\n location: colorSheme === 'dark' ? [0, 0.8] : [0, 0.2, 0.4, 0.6, 0.8],\n bottomColor: theme.warningBottom,\n bottomLocation: [0, 0.1, 0.2, 0.3, 0.4, 0.6, 0.8],\n },\n icon: ,\n },\n ERROR: {\n backgroundColor: {\n color: theme.errorBackground,\n location: colorSheme === 'dark' ? [0.2, 1] : [0, 0.3, 0.6],\n bottomColor: theme.errorBottom,\n bottomLocation: [0, 0.2, 0.4, 0.6, 0.8],\n },\n icon: ,\n },\n});\n\nexport default function Main() {\n return (\n linearMessageType(theme, colorScheme)}>\n \n \n );\n}\n"})}),"\n",(0,o.jsx)(n.h2,{id:"show-notifications-on-screen",children:"Show notifications on screen"}),"\n",(0,o.jsxs)(n.p,{children:["To show notifications on the screen, use the ",(0,o.jsx)(n.strong,{children:"useNotification"})," hook."]}),"\n",(0,o.jsxs)(n.p,{children:["The ",(0,o.jsx)(n.strong,{children:"showNotification"})," function is used to organize and show notifications. You can customize these values to create your own notification. You can also use linear gradient colors."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-jsx",children:"import { useNotification } from '@tra-tech/react-native-kitra';\n\nexport function App() {\n const {showNotification}= useNotification();\n\n return (\n \n showNotification({ type: 'WARNING', header: 'WARNING NOTIFICATION', message: 'Warning Information' })}>\n Show Notification\n \n \n );\n}\n"})}),"\n",(0,o.jsx)(n.h3,{id:"kitra-provider-props",children:"Kitra Provider Props"}),"\n",(0,o.jsxs)(n.table,{children:[(0,o.jsx)(n.thead,{children:(0,o.jsxs)(n.tr,{children:[(0,o.jsx)(n.th,{children:"Prop name"}),(0,o.jsx)(n.th,{children:"Type"}),(0,o.jsx)(n.th,{children:"Required"}),(0,o.jsx)(n.th,{children:"Description"})]})}),(0,o.jsxs)(n.tbody,{children:[(0,o.jsxs)(n.tr,{children:[(0,o.jsx)(n.td,{children:"containerStyle"}),(0,o.jsx)(n.td,{children:(0,o.jsx)(n.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,o.jsx)(n.code,{children:"StyleProp"})})}),(0,o.jsx)(n.td,{children:"No"}),(0,o.jsx)(n.td,{children:"Additional styles to apply to the notification container."})]}),(0,o.jsxs)(n.tr,{children:[(0,o.jsx)(n.td,{children:"linearMessageType"}),(0,o.jsxs)(n.td,{children:[(0,o.jsx)(n.code,{children:"(theme?:any, colorScheme?:('dark'|'light')=> {[key:string]:"}),(0,o.jsx)("br",{}),(0,o.jsx)(n.code,{children:" {backgroundColor:{color:string[],"}),(0,o.jsx)("br",{}),(0,o.jsx)(n.code,{children:" location:number [],"}),(0,o.jsx)("br",{}),(0,o.jsx)(n.code,{children:"bottomColor:string [],"}),(0,o.jsx)("br",{}),(0,o.jsx)(n.code,{children:"bottomLocation:number []} icon:React.ReactNodeonPress:()=>void}}"})]}),(0,o.jsx)(n.td,{children:"No"}),(0,o.jsx)(n.td,{children:"Notification linear gradient style to show."})]}),(0,o.jsxs)(n.tr,{children:[(0,o.jsx)(n.td,{children:"limit"}),(0,o.jsx)(n.td,{children:(0,o.jsx)(n.code,{children:"number"})}),(0,o.jsx)(n.td,{children:"No"}),(0,o.jsxs)(n.td,{children:["Maximum notification to show. Default value: ",(0,o.jsx)(n.code,{children:"3"})]})]}),(0,o.jsxs)(n.tr,{children:[(0,o.jsx)(n.td,{children:"onPress"}),(0,o.jsx)(n.td,{children:(0,o.jsx)(n.code,{children:"()=>void"})}),(0,o.jsx)(n.td,{children:"No"}),(0,o.jsx)(n.td,{children:"Function to execute on press."})]}),(0,o.jsxs)(n.tr,{children:[(0,o.jsx)(n.td,{children:"messageType"}),(0,o.jsx)(n.td,{children:(0,o.jsx)(n.code,{children:" [key: status]: { backgroundColor: string, icon: React.ReactNode}"})}),(0,o.jsx)(n.td,{children:"No"}),(0,o.jsx)(n.td,{children:"Notification style to show."})]})]})]}),"\n",(0,o.jsx)(n.h3,{id:"shownotification-types",children:"showNotification Types"}),"\n",(0,o.jsxs)(n.table,{children:[(0,o.jsx)(n.thead,{children:(0,o.jsxs)(n.tr,{children:[(0,o.jsx)(n.th,{children:"Name"}),(0,o.jsx)(n.th,{children:"Type"})]})}),(0,o.jsxs)(n.tbody,{children:[(0,o.jsxs)(n.tr,{children:[(0,o.jsx)(n.td,{children:"showNotification"}),(0,o.jsx)(n.td,{children:(0,o.jsx)(n.code,{children:"{type:status, header?:string, message?:string"})})]}),(0,o.jsxs)(n.tr,{children:[(0,o.jsx)(n.td,{children:"status"}),(0,o.jsxs)(n.td,{children:["status: ",(0,o.jsx)("code",{children:" 'SUCCESS' | 'WARNING' | 'ERROR' | 'INFO'"})]})]})]})]})]})}function h(t={}){const{wrapper:n}={...(0,i.a)(),...t.components};return n?(0,o.jsx)(n,{...t,children:(0,o.jsx)(l,{...t})}):l(t)}},1151:(t,n,e)=>{e.d(n,{Z:()=>s,a:()=>c});var o=e(7294);const i={},r=o.createContext(i);function c(t){const n=o.useContext(r);return o.useMemo((function(){return"function"==typeof t?t(n):{...n,...t}}),[n,t])}function s(t){let n;return n=t.disableParentContext?"function"==typeof t.components?t.components(i):t.components||i:c(t.components),o.createElement(r.Provider,{value:n},t.children)}}}]); \ No newline at end of file diff --git a/assets/js/b5eb131b.7465a400.js b/assets/js/b5eb131b.7465a400.js new file mode 100644 index 0000000..203798f --- /dev/null +++ b/assets/js/b5eb131b.7465a400.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[7673],{3839:(e,t,r)=>{r.r(t),r.d(t,{assets:()=>c,contentTitle:()=>i,default:()=>h,frontMatter:()=>s,metadata:()=>d,toc:()=>o});var n=r(5893),a=r(1151);const s={sidebar_position:3},i="Avatar",d={id:"components/avatar",title:"Avatar",description:"The Avatar component can display an image or initials in a circular or rounded rectangle shape. It also has a customizable badge that can be positioned at the top or bottom of the Avatar, and can display text or an icon. This component can be used in various applications that require a user profile picture or initials, such as social media or messaging apps.",source:"@site/docs/components/avatar.md",sourceDirName:"components",slug:"/components/avatar",permalink:"/react-native-kitra/docs/next/components/avatar",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/docs/components/avatar.md",tags:[],version:"current",lastUpdatedAt:1709646294,formattedLastUpdatedAt:"Mar 5, 2024",sidebarPosition:3,frontMatter:{sidebar_position:3},sidebar:"ComponentsSidebar",previous:{title:"Activity Indicator",permalink:"/react-native-kitra/docs/next/components/activity-indicator"},next:{title:"Badge",permalink:"/react-native-kitra/docs/next/components/badge"}},c={},o=[{value:"Import",id:"import",level:3},{value:"Usage",id:"usage",level:3},{value:"Props",id:"props",level:3},{value:"Avatar Group",id:"avatar-group",level:2},{value:"Import",id:"import-1",level:3},{value:"Usage",id:"usage-1",level:3},{value:"Props",id:"props-1",level:3}];function l(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,a.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.h1,{id:"avatar",children:"Avatar"}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.strong,{children:"Avatar"})," component can display an image or initials in a circular or rounded rectangle shape. It also has a customizable badge that can be positioned at the top or bottom of the Avatar, and can display text or an icon. This component can be used in various applications that require a user profile picture or initials, such as social media or messaging apps."]}),"\n",(0,n.jsx)(t.h3,{id:"import",children:"Import"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-js",children:"import { Avatar } from '@tra-tech/react-native-kitra';\n"})}),"\n",(0,n.jsx)(t.h3,{id:"usage",children:"Usage"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-js",children:"import { Avatar,Icon } from '@tra-tech/react-native-kitra';\nimport { View } from 'react-native';\n\nconst App = () => (\n \n \n \n);\n\nexport default App;\n"})}),"\n",(0,n.jsx)(t.h3,{id:"props",children:"Props"}),"\n",(0,n.jsxs)(t.table,{children:[(0,n.jsx)(t.thead,{children:(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.th,{children:"Prop name"}),(0,n.jsx)(t.th,{children:"Type"}),(0,n.jsx)(t.th,{children:"Required"}),(0,n.jsx)(t.th,{children:"Description"})]})}),(0,n.jsxs)(t.tbody,{children:[(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"size"}),(0,n.jsx)(t.td,{children:(0,n.jsx)("code",{children:"'small' | 'medium'"})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsxs)(t.td,{children:["The size of the avatar. Default value: ",(0,n.jsx)(t.code,{children:"'medium' "})]})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"source"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.a,{href:"https://reactnative.dev/docs/image#imagesource",children:(0,n.jsx)(t.code,{children:"ImageSourcePropType"})})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"Used to specify the image source."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"variant"}),(0,n.jsx)(t.td,{children:(0,n.jsx)("code",{children:"'circular' | 'rounded'"})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsxs)(t.td,{children:["Specifies the border type of the avatar. Default value: ",(0,n.jsx)(t.code,{children:"'circular'"})]})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"avatarIcon"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"React.ReactNode "})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"Used to add icon to avatar."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"containerStyle"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,n.jsx)(t.code,{children:"StyleProp"})})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"Additional styles to apply to the avatar container."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"label"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"string"})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"Represents the initials of the name to be written on the avatar."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"labelStyle"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.a,{href:"https://reactnative.dev/docs/text-style-props",children:(0,n.jsx)(t.code,{children:"StyleProp"})})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"Additional styles to apply to the label text."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"theme"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"UITheme "})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"The theme to use for the component."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"typography"}),(0,n.jsx)(t.td,{children:"``UITypography"}),(0,n.jsx)(t.td,{}),(0,n.jsx)(t.td,{})]})]})]}),"\n",(0,n.jsx)(t.h2,{id:"avatar-group",children:"Avatar Group"}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.strong,{children:"Avatar Group"}),", used to list avatars side by side."]}),"\n",(0,n.jsx)(t.h3,{id:"import-1",children:"Import"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-js",children:"import { AvatarGroup } from '@tra-tech/react-native-kitra';\n"})}),"\n",(0,n.jsx)(t.h3,{id:"usage-1",children:"Usage"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-js",children:"import { AvatarGroup } from '@tra-tech/react-native-kitra';\nimport { View } from 'react-native';\n\nconst App = () => (\n \n \n \n);\nexport default App;\n \n"})}),"\n",(0,n.jsx)(t.h3,{id:"props-1",children:"Props"}),"\n",(0,n.jsxs)(t.table,{children:[(0,n.jsx)(t.thead,{children:(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.th,{children:"Prop name"}),(0,n.jsx)(t.th,{children:"Type"}),(0,n.jsx)(t.th,{children:"Required"}),(0,n.jsx)(t.th,{children:"Description"})]})}),(0,n.jsxs)(t.tbody,{children:[(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"avatarsType"}),(0,n.jsxs)(t.td,{children:[(0,n.jsx)(t.code,{children:"Array<{"}),(0,n.jsx)("br",{}),(0,n.jsx)(t.code,{children:" source?: ImageSourcePropType,"}),(0,n.jsx)("br",{}),(0,n.jsx)(t.code,{children:" variant?: 'circular' | 'rounded',"}),(0,n.jsx)("br",{}),(0,n.jsx)(t.code,{children:" avatarIcon?: React.ReactNode,"}),(0,n.jsx)("br",{}),(0,n.jsx)(t.code,{children:" containerStyle?: StyleProp,"}),(0,n.jsx)("br",{}),(0,n.jsx)(t.code,{children:" label?: string,"}),(0,n.jsx)("br",{}),(0,n.jsx)(t.code,{children:" labelStyle?: StyleProp,"}),(0,n.jsx)("br",{}),(0,n.jsx)(t.code,{children:"textStyle?: StyleProp },"}),(0,n.jsx)("br",{}),(0,n.jsx)(t.code,{children:"}> "})]}),(0,n.jsx)(t.td,{children:"Yes"}),(0,n.jsx)(t.td,{children:"Takes avatar props into array."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"avatarLimit"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"number"})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsxs)(t.td,{children:["Limit of avatars to be listed. Default value: ",(0,n.jsx)(t.code,{children:"10"})]})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"limitContainerStyle"}),(0,n.jsx)(t.td,{children:(0,n.jsx)("code",{children:"'circular' | 'rounded'"})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"Additional styles to apply to the limit container."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"theme"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"UITheme "})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"The theme to use for the component."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"typography"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"UITypography "})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"The typography to use for the component."})]})]})]})]})}function h(e={}){const{wrapper:t}={...(0,a.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(l,{...e})}):l(e)}},1151:(e,t,r)=>{r.d(t,{Z:()=>d,a:()=>i});var n=r(7294);const a={},s=n.createContext(a);function i(e){const t=n.useContext(s);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function d(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:i(e.components),n.createElement(s.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/b5eb131b.af0680f9.js b/assets/js/b5eb131b.af0680f9.js deleted file mode 100644 index 0e25912..0000000 --- a/assets/js/b5eb131b.af0680f9.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[7673],{3839:(e,t,r)=>{r.r(t),r.d(t,{assets:()=>o,contentTitle:()=>d,default:()=>h,frontMatter:()=>s,metadata:()=>a,toc:()=>c});var n=r(5893),i=r(1151);const s={sidebar_position:3},d="Avatar",a={id:"components/avatar",title:"Avatar",description:"The Avatar component can display an image or initials in a circular or rounded rectangle shape. It also has a customizable badge that can be positioned at the top or bottom of the Avatar, and can display text or an icon. This component can be used in various applications that require a user profile picture or initials, such as social media or messaging apps.",source:"@site/docs/components/avatar.md",sourceDirName:"components",slug:"/components/avatar",permalink:"/react-native-kitra/docs/next/components/avatar",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/docs/components/avatar.md",tags:[],version:"current",lastUpdatedAt:1707292585,formattedLastUpdatedAt:"Feb 7, 2024",sidebarPosition:3,frontMatter:{sidebar_position:3},sidebar:"ComponentsSidebar",previous:{title:"Activity Indicator",permalink:"/react-native-kitra/docs/next/components/activity-indicator"},next:{title:"Badge",permalink:"/react-native-kitra/docs/next/components/badge"}},o={},c=[{value:"Import",id:"import",level:3},{value:"Usage",id:"usage",level:3},{value:"Props",id:"props",level:3},{value:"Avatar Group",id:"avatar-group",level:2},{value:"Import",id:"import-1",level:3},{value:"Usage",id:"usage-1",level:3},{value:"Props",id:"props-1",level:3}];function l(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,i.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.h1,{id:"avatar",children:"Avatar"}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.strong,{children:"Avatar"})," component can display an image or initials in a circular or rounded rectangle shape. It also has a customizable badge that can be positioned at the top or bottom of the Avatar, and can display text or an icon. This component can be used in various applications that require a user profile picture or initials, such as social media or messaging apps."]}),"\n",(0,n.jsx)(t.h3,{id:"import",children:"Import"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-js",children:"import { Avatar } from '@tra-tech/react-native-kitra';\n"})}),"\n",(0,n.jsx)(t.h3,{id:"usage",children:"Usage"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-js",children:"import { Avatar,Icon } from '@tra-tech/react-native-kitra';\nimport { View } from 'react-native';\n\nconst App = () => (\n \n }\n source={{ uri: 'https://randomuser.me/api/portraits/men/62.jpg' }}\n />\n \n);\n\nexport default App;\n"})}),"\n",(0,n.jsx)(t.h3,{id:"props",children:"Props"}),"\n",(0,n.jsxs)(t.table,{children:[(0,n.jsx)(t.thead,{children:(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.th,{children:"Prop name"}),(0,n.jsx)(t.th,{children:"Type"}),(0,n.jsx)(t.th,{children:"Required"}),(0,n.jsx)(t.th,{children:"Description"})]})}),(0,n.jsxs)(t.tbody,{children:[(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"size"}),(0,n.jsx)(t.td,{children:(0,n.jsx)("code",{children:"'small' | 'medium'"})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsxs)(t.td,{children:["The size of the avatar. Default value: ",(0,n.jsx)(t.code,{children:"'medium' "})]})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"source"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.a,{href:"https://reactnative.dev/docs/image#imagesource",children:(0,n.jsx)(t.code,{children:"ImageSourcePropType"})})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"Used to specify the image source."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"borderStyle"}),(0,n.jsx)(t.td,{children:(0,n.jsx)("code",{children:"'circular' | 'rounded'"})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsxs)(t.td,{children:["Specifies the border type of the avatar. Default value: ",(0,n.jsx)(t.code,{children:"'circular'"})]})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"avatarIcon"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"React.ReactNode "})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"Used to add icon to avatar."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"containerStyle"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,n.jsx)(t.code,{children:"StyleProp"})})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"Additional styles to apply to the avatar container."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"label"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"string"})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"Represents the initials of the name to be written on the avatar."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"labelStyle"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.a,{href:"https://reactnative.dev/docs/text-style-props",children:(0,n.jsx)(t.code,{children:"StyleProp"})})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"Additional styles to apply to the label text."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"badgePosition"}),(0,n.jsx)(t.td,{children:(0,n.jsx)("code",{children:"'top' | 'bottom'"})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"Badge component location."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"badgeStyle"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"{ containerStyle?: StyleProp, textStyle?: StyleProp } "})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"Additional styles to apply to the badge component."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"badgeContent"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"React.ReactNode "})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"Additional content to apply to the badge component."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"theme"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"UITheme "})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"The theme to use for the component."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"typography"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"UITypography "})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"The typography to use for the component."})]})]})]}),"\n",(0,n.jsx)(t.h2,{id:"avatar-group",children:"Avatar Group"}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.strong,{children:"Avatar Group"}),", used to list avatars side by side."]}),"\n",(0,n.jsx)(t.h3,{id:"import-1",children:"Import"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-js",children:"import { AvatarGroup } from '@tra-tech/react-native-kitra';\n"})}),"\n",(0,n.jsx)(t.h3,{id:"usage-1",children:"Usage"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-js",children:"import { AvatarGroup } from '@tra-tech/react-native-kitra';\nimport { View } from 'react-native';\n\nconst App = () => (\n \n \n \n);\nexport default App;\n \n"})}),"\n",(0,n.jsx)(t.h3,{id:"props-1",children:"Props"}),"\n",(0,n.jsxs)(t.table,{children:[(0,n.jsx)(t.thead,{children:(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.th,{children:"Prop name"}),(0,n.jsx)(t.th,{children:"Type"}),(0,n.jsx)(t.th,{children:"Required"}),(0,n.jsx)(t.th,{children:"Description"})]})}),(0,n.jsxs)(t.tbody,{children:[(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"avatarsType"}),(0,n.jsxs)(t.td,{children:[(0,n.jsx)(t.code,{children:"Array<{"}),(0,n.jsx)("br",{}),(0,n.jsx)(t.code,{children:" source?: ImageSourcePropType,"}),(0,n.jsx)("br",{}),(0,n.jsx)(t.code,{children:" borderStyle?: 'circular' | 'rounded',"}),(0,n.jsx)("br",{}),(0,n.jsx)(t.code,{children:" avatarIcon?: React.ReactNode,"}),(0,n.jsx)("br",{}),(0,n.jsx)(t.code,{children:" containerStyle?: StyleProp,"}),(0,n.jsx)("br",{}),(0,n.jsx)(t.code,{children:" label?: string,"}),(0,n.jsx)("br",{}),(0,n.jsx)(t.code,{children:" labelStyle?: StyleProp,"}),(0,n.jsx)("br",{}),(0,n.jsx)(t.code,{children:" badgePosition?: 'top' | 'bottom',"}),(0,n.jsx)("br",{}),(0,n.jsx)(t.code,{children:" badgeStyle?: { containerStyle?: StyleProp,"}),(0,n.jsx)("br",{}),(0,n.jsx)(t.code,{children:"textStyle?: StyleProp },"}),(0,n.jsx)("br",{}),(0,n.jsx)(t.code,{children:"badgeContent?: React.ReactNode "}),(0,n.jsx)("br",{}),(0,n.jsx)(t.code,{children:"}> "})]}),(0,n.jsx)(t.td,{children:"Yes"}),(0,n.jsx)(t.td,{children:"Takes avatar props into array."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"avatarLimit"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"number"})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsxs)(t.td,{children:["Limit of avatars to be listed. Default value: ",(0,n.jsx)(t.code,{children:"10"})]})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"limitContainerStyle"}),(0,n.jsx)(t.td,{children:(0,n.jsx)("code",{children:"'circular' | 'rounded'"})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"Additional styles to apply to the limit container."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"theme"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"UITheme "})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"The theme to use for the component."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"typography"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"UITypography "})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"The typography to use for the component."})]})]})]})]})}function h(e={}){const{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(l,{...e})}):l(e)}},1151:(e,t,r)=>{r.d(t,{Z:()=>a,a:()=>d});var n=r(7294);const i={},s=n.createContext(i);function d(e){const t=n.useContext(s);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:d(e.components),n.createElement(s.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/b7a547c0.efb521a7.js b/assets/js/b7a547c0.62e32b36.js similarity index 98% rename from assets/js/b7a547c0.efb521a7.js rename to assets/js/b7a547c0.62e32b36.js index 310a42c..f4d8396 100644 --- a/assets/js/b7a547c0.efb521a7.js +++ b/assets/js/b7a547c0.62e32b36.js @@ -1 +1 @@ -"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[5758],{4770:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>o,default:()=>a,frontMatter:()=>r,metadata:()=>c,toc:()=>l});var s=n(5893),i=n(1151);const r={sidebar_position:7},o="Chip",c={id:"components/chip",title:"Chip",description:"The Chips can be used to display entities in small blocks.",source:"@site/docs/components/chip.md",sourceDirName:"components",slug:"/components/chip",permalink:"/react-native-kitra/docs/next/components/chip",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/docs/components/chip.md",tags:[],version:"current",lastUpdatedAt:1707292585,formattedLastUpdatedAt:"Feb 7, 2024",sidebarPosition:7,frontMatter:{sidebar_position:7},sidebar:"ComponentsSidebar",previous:{title:"CheckBox",permalink:"/react-native-kitra/docs/next/components/checkbox"},next:{title:"Divider",permalink:"/react-native-kitra/docs/next/components/divider"}},d={},l=[{value:"Import",id:"import",level:3},{value:"Usage",id:"usage",level:3},{value:"Props",id:"props",level:3}];function h(e){const t={a:"a",code:"code",h1:"h1",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,i.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h1,{id:"chip",children:"Chip"}),"\n",(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.strong,{children:"Chips"})," can be used to display entities in small blocks."]}),"\n",(0,s.jsx)(t.h3,{id:"import",children:"Import"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",children:"import { Chip } from '@tra-tech/react-native-kitra';\n"})}),"\n",(0,s.jsx)(t.h3,{id:"usage",children:"Usage"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",children:"import { Chip } from '@tra-tech/react-native-kitra';\nimport { View } from 'react-native';\n\nconst App = () => (\n \n console.log(e)}\n colorStyle={{ backgroundColor: 'tomato', selectBackgroundColor: 'white', selectTitleColor: 'tomato', titleColor: 'white' }}\n />\n \n);\n\nexport default App;\n"})}),"\n",(0,s.jsx)(t.h3,{id:"props",children:"Props"}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{children:"Prop name"}),(0,s.jsx)(t.th,{children:"Type"}),(0,s.jsx)(t.th,{children:"Required"}),(0,s.jsx)(t.th,{children:"Description"})]})}),(0,s.jsxs)(t.tbody,{children:[(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"label"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"string"})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"Text of chip."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"value"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"boolean"})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsxs)(t.td,{children:["Status of chip. Default value: ",(0,s.jsx)(t.code,{children:"'false'"})]})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"textStyle"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"https://reactnative.dev/docs/text-style-props",children:(0,s.jsx)(t.code,{children:"StyleProp"})})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"Additional styles to apply to the chip."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"style"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,s.jsx)(t.code,{children:"StyleProp"})})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"Additional styles to apply to the label."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"icon"}),(0,s.jsxs)(t.td,{children:[(0,s.jsx)(t.code,{children:" { iconName: string,"}),(0,s.jsx)("br",{}),(0,s.jsx)(t.code,{children:" iconType: IconType,"}),(0,s.jsx)("br",{}),(0,s.jsx)(t.code,{children:" iconPosition: 'left' | 'right'"})," }"]}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"Adds an icon to a component with options for specifying the icon's name, type, and position , enabling quick customization of the component's appearance."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"colorStyle"}),(0,s.jsxs)(t.td,{children:[(0,s.jsx)(t.code,{children:" { backgroundColor: string, selectBackgroundColor: string, selectTitleColor: string,"}),(0,s.jsx)("br",{}),(0,s.jsx)(t.code,{children:"titleColor: string }"})]}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"Styles for chip color."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"size"}),(0,s.jsx)(t.td,{children:(0,s.jsx)("code",{children:" 'small' | 'medium' | 'large'"})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsxs)(t.td,{children:["The size of the chip. Default value: ",(0,s.jsx)(t.code,{children:"'small'"})]})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"onChange"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"(event:boolean)=> void"})}),(0,s.jsx)(t.td,{children:"Yes"}),(0,s.jsx)(t.td,{children:"Returns whether the chip is selected."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"disabled"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"boolean "})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsxs)(t.td,{children:["If true the user won't be able to toggle the chip. Default value: ",(0,s.jsx)(t.code,{children:"false"})]})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"theme"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"UITheme "})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"The theme to use for the component."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"typography"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"UITypography"})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"The typography to use for the component."})]})]})]})]})}function a(e={}){const{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(h,{...e})}):h(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>c,a:()=>o});var s=n(7294);const i={},r=s.createContext(i);function o(e){const t=s.useContext(r);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:o(e.components),s.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[5758],{4770:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>o,default:()=>a,frontMatter:()=>r,metadata:()=>c,toc:()=>l});var s=n(5893),i=n(1151);const r={sidebar_position:7},o="Chip",c={id:"components/chip",title:"Chip",description:"The Chips can be used to display entities in small blocks.",source:"@site/docs/components/chip.md",sourceDirName:"components",slug:"/components/chip",permalink:"/react-native-kitra/docs/next/components/chip",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/docs/components/chip.md",tags:[],version:"current",lastUpdatedAt:1709646294,formattedLastUpdatedAt:"Mar 5, 2024",sidebarPosition:7,frontMatter:{sidebar_position:7},sidebar:"ComponentsSidebar",previous:{title:"CheckBox",permalink:"/react-native-kitra/docs/next/components/checkbox"},next:{title:"Divider",permalink:"/react-native-kitra/docs/next/components/divider"}},d={},l=[{value:"Import",id:"import",level:3},{value:"Usage",id:"usage",level:3},{value:"Props",id:"props",level:3}];function h(e){const t={a:"a",code:"code",h1:"h1",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,i.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h1,{id:"chip",children:"Chip"}),"\n",(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.strong,{children:"Chips"})," can be used to display entities in small blocks."]}),"\n",(0,s.jsx)(t.h3,{id:"import",children:"Import"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",children:"import { Chip } from '@tra-tech/react-native-kitra';\n"})}),"\n",(0,s.jsx)(t.h3,{id:"usage",children:"Usage"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",children:"import { Chip } from '@tra-tech/react-native-kitra';\nimport { View } from 'react-native';\n\nconst App = () => (\n \n console.log(e)}\n colorStyle={{ backgroundColor: 'tomato', selectBackgroundColor: 'white', selectTitleColor: 'tomato', titleColor: 'white' }}\n />\n \n);\n\nexport default App;\n"})}),"\n",(0,s.jsx)(t.h3,{id:"props",children:"Props"}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{children:"Prop name"}),(0,s.jsx)(t.th,{children:"Type"}),(0,s.jsx)(t.th,{children:"Required"}),(0,s.jsx)(t.th,{children:"Description"})]})}),(0,s.jsxs)(t.tbody,{children:[(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"label"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"string"})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"Text of chip."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"value"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"boolean"})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsxs)(t.td,{children:["Status of chip. Default value: ",(0,s.jsx)(t.code,{children:"'false'"})]})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"textStyle"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"https://reactnative.dev/docs/text-style-props",children:(0,s.jsx)(t.code,{children:"StyleProp"})})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"Additional styles to apply to the chip."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"style"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,s.jsx)(t.code,{children:"StyleProp"})})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"Additional styles to apply to the label."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"icon"}),(0,s.jsxs)(t.td,{children:[(0,s.jsx)(t.code,{children:" { iconName: string,"}),(0,s.jsx)("br",{}),(0,s.jsx)(t.code,{children:" iconType: IconType,"}),(0,s.jsx)("br",{}),(0,s.jsx)(t.code,{children:" iconPosition: 'left' | 'right'"})," }"]}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"Adds an icon to a component with options for specifying the icon's name, type, and position , enabling quick customization of the component's appearance."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"colorStyle"}),(0,s.jsxs)(t.td,{children:[(0,s.jsx)(t.code,{children:" { backgroundColor: string, selectBackgroundColor: string, selectTitleColor: string,"}),(0,s.jsx)("br",{}),(0,s.jsx)(t.code,{children:"titleColor: string }"})]}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"Styles for chip color."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"size"}),(0,s.jsx)(t.td,{children:(0,s.jsx)("code",{children:" 'small' | 'medium' | 'large'"})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsxs)(t.td,{children:["The size of the chip. Default value: ",(0,s.jsx)(t.code,{children:"'small'"})]})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"onChange"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"(event:boolean)=> void"})}),(0,s.jsx)(t.td,{children:"Yes"}),(0,s.jsx)(t.td,{children:"Returns whether the chip is selected."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"disabled"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"boolean "})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsxs)(t.td,{children:["If true the user won't be able to toggle the chip. Default value: ",(0,s.jsx)(t.code,{children:"false"})]})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"theme"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"UITheme "})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"The theme to use for the component."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"typography"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"UITypography"})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"The typography to use for the component."})]})]})]})]})}function a(e={}){const{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(h,{...e})}):h(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>c,a:()=>o});var s=n(7294);const i={},r=s.createContext(i);function o(e){const t=s.useContext(r);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:o(e.components),s.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/b7aa83bd.e24429c4.js b/assets/js/b7aa83bd.11759812.js similarity index 99% rename from assets/js/b7aa83bd.e24429c4.js rename to assets/js/b7aa83bd.11759812.js index 4fc029b..d1bd417 100644 --- a/assets/js/b7aa83bd.e24429c4.js +++ b/assets/js/b7aa83bd.11759812.js @@ -1 +1 @@ -"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[9610],{7999:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>c,default:()=>h,frontMatter:()=>l,metadata:()=>u,toc:()=>m});var o=n(5893),s=n(1151),r=n(2920),a=n(1e3),i=n(2949);const l={sidebar_position:2},c=void 0,u={id:"doc/Theme",title:"Theme",description:"Applying theme",source:"@site/docs/doc/Theme.md",sourceDirName:"doc",slug:"/doc/Theme",permalink:"/react-native-kitra/docs/next/doc/Theme",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/docs/doc/Theme.md",tags:[],version:"current",lastUpdatedAt:1707292585,formattedLastUpdatedAt:"Feb 7, 2024",sidebarPosition:2,frontMatter:{sidebar_position:2},sidebar:"DocSidebar",previous:{title:"Notification",permalink:"/react-native-kitra/docs/next/doc/Notification"},next:{title:"Typography",permalink:"/react-native-kitra/docs/next/doc/Typography"}},d={},m=[{value:"Applying theme",id:"applying-theme",level:2},{value:"Accessing and updating theme",id:"accessing-and-updating-theme",level:2},{value:"Colors",id:"colors",level:2},{value:"Main",id:"main",level:3},{value:"Text",id:"text",level:3},{value:"Status",id:"status",level:3}];function p(e){const t={code:"code",h2:"h2",h3:"h3",p:"p",pre:"pre",strong:"strong",...(0,s.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(r.Ix,{position:"bottom-center",autoClose:5e3,hideProgressBar:!0,newestOnTop:!1,closeOnClick:!0,rtl:!1,pauseOnFocusLoss:!0,draggable:!0,pauseOnHover:!0,theme:(0,i.I)().colorMode}),"\n",(0,o.jsx)(t.h2,{id:"applying-theme",children:"Applying theme"}),"\n",(0,o.jsx)(t.p,{children:"To use themes, you need to wrap the root component with provider."}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-jsx",children:"import { KitraProvider } from '@tra-tech/react-native-kitra';\nimport App from './src/App';\n\nexport default function Main() {\n return (\n \n \n \n );\n}\n"})}),"\n",(0,o.jsx)(t.h2,{id:"accessing-and-updating-theme",children:"Accessing and updating theme"}),"\n",(0,o.jsxs)(t.p,{children:["To access the current theme, use the ",(0,o.jsx)(t.strong,{children:"useTheme"})," hook. This hook returns the current theme object and a ",(0,o.jsx)(t.strong,{children:"updateTheme"})," function to update the theme."]}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.strong,{children:"theme"})," object is a key-value pair of colors that define the current theme of the app. The ",(0,o.jsx)(t.strong,{children:"updateTheme"})," function is used to update the current theme by merging in new colors. You can customize these values to create your own theme."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-jsx",children:'import { useTheme } from \'@tra-tech/react-native-kitra\';\n\nconst MyCustomTheme= {\n dark:{\n someColor: "#420EA1"\n },\n light:{\n someColor:"#F0E52F"\n }\n}\n\nexport function App() {\n const {theme,updateTheme}= useTheme();\n\n useEffect(() => {\n updateTheme(MyCustomTheme)\n }, []);\n \n return (\n \n \n \n \n );\n}\n'})}),"\n",(0,o.jsx)(t.h2,{id:"colors",children:"Colors"}),"\n","\n","\n",(0,o.jsx)(t.h3,{id:"main",children:"Main"}),"\n",(0,o.jsxs)("div",{style:{display:"flex",flexDirection:"row",flexWrap:"wrap"},children:[(0,o.jsx)(a.Z,{colorName:"Primary",colorValue:"#8973CD"}),(0,o.jsx)(a.Z,{colorName:"Primary 5",colorValue:"#F9F8FD"}),(0,o.jsx)(a.Z,{colorName:"Primary 15",colorValue:"#EDEAF8"}),(0,o.jsx)(a.Z,{colorName:"Primary 30",colorValue:"#DCD5F0"}),(0,o.jsx)(a.Z,{colorName:"Secondary",colorValue:"#82B98E"}),(0,o.jsx)(a.Z,{colorName:"Tetriary",colorValue:"#67A7C1"})]}),"\n",(0,o.jsx)(t.h3,{id:"text",children:"Text"}),"\n",(0,o.jsxs)("div",{style:{display:"flex",flexDirection:"row",flexWrap:"wrap"},children:[(0,o.jsx)(a.Z,{colorName:"Black",colorValue:"#000000"}),(0,o.jsx)(a.Z,{colorName:"Light Black",colorValue:"#404040"}),(0,o.jsx)(a.Z,{colorName:"Grey",colorValue:"#9A9A9A"}),(0,o.jsx)(a.Z,{colorName:"White",colorValue:"#FFFFFF"}),(0,o.jsx)(a.Z,{colorName:"Dark White",colorValue:"#FDFCFF"}),(0,o.jsx)(a.Z,{colorName:"Light Grey",colorValue:"#F5F4F6"})]}),"\n",(0,o.jsx)(t.h3,{id:"status",children:"Status"}),"\n",(0,o.jsxs)("div",{style:{display:"flex",flexDirection:"row",flexWrap:"wrap"},children:[(0,o.jsx)(a.Z,{colorName:"Focused",colorValue:"#654FA6"}),(0,o.jsx)(a.Z,{colorName:"Error",colorValue:"#FF3434"}),(0,o.jsx)(a.Z,{colorName:"Success",colorValue:"#09CE63"}),(0,o.jsx)(a.Z,{colorName:"Disabled Light",colorValue:"#D7D1E9"}),(0,o.jsx)(a.Z,{colorName:"Disabled Dark",colorValue:"#BDBCBF"}),(0,o.jsx)(a.Z,{colorName:"Disabled Light Dark",colorValue:"#F6F6F6"})]})]})}function h(e={}){const{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(p,{...e})}):p(e)}},1e3:(e,t,n)=>{n.d(t,{Z:()=>c});n(7294);var o=n(2920);const s="container_oa4u",r="swatch_yqre",a="colorName_UerQ",i="colorValue_s1yd";var l=n(5893);const c=e=>{let{colorName:t,colorValue:n,border:c="solid"}=e;return(0,l.jsxs)("div",{id:"colorbutton",style:{cursor:"pointer"},onClick:()=>{navigator.clipboard.writeText(n),o.Am.success("Copied to Clipboard!")},className:s,children:[(0,l.jsx)("div",{className:r,style:{backgroundColor:n,border:c,borderWidth:1}}),(0,l.jsxs)("div",{style:{display:"flex",flexDirection:"column"},children:[(0,l.jsx)("p",{className:a,children:t}),(0,l.jsx)("p",{className:i,children:n})]})]})}},1151:(e,t,n)=>{n.d(t,{Z:()=>i,a:()=>a});var o=n(7294);const s={},r=o.createContext(s);function a(e){const t=o.useContext(r);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:a(e.components),o.createElement(r.Provider,{value:t},e.children)}},2920:(e,t,n)=>{n.d(t,{Ix:()=>_,Am:()=>M});var o=n(7294);function s(e){var t,n,o="";if("string"==typeof e||"number"==typeof e)o+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t"number"==typeof e&&!isNaN(e),i=e=>"string"==typeof e,l=e=>"function"==typeof e,c=e=>i(e)||l(e)?e:null,u=e=>(0,o.isValidElement)(e)||i(e)||l(e)||a(e);function d(e){let{enter:t,exit:n,appendPosition:s=!1,collapse:r=!0,collapseDuration:a=300}=e;return function(e){let{children:i,position:l,preventExitTransition:c,done:u,nodeRef:d,isIn:m}=e;const p=s?`${t}--${l}`:t,h=s?`${n}--${l}`:n,f=(0,o.useRef)(0);return(0,o.useLayoutEffect)((()=>{const e=d.current,t=p.split(" "),n=o=>{o.target===d.current&&(e.dispatchEvent(new Event("d")),e.removeEventListener("animationend",n),e.removeEventListener("animationcancel",n),0===f.current&&"animationcancel"!==o.type&&e.classList.remove(...t))};e.classList.add(...t),e.addEventListener("animationend",n),e.addEventListener("animationcancel",n)}),[]),(0,o.useEffect)((()=>{const e=d.current,t=()=>{e.removeEventListener("animationend",t),r?function(e,t,n){void 0===n&&(n=300);const{scrollHeight:o,style:s}=e;requestAnimationFrame((()=>{s.minHeight="initial",s.height=o+"px",s.transition=`all ${n}ms`,requestAnimationFrame((()=>{s.height="0",s.padding="0",s.margin="0",setTimeout(t,n)}))}))}(e,u,a):u()};m||(c?t():(f.current=1,e.className+=` ${h}`,e.addEventListener("animationend",t)))}),[m]),o.createElement(o.Fragment,null,i)}}function m(e,t){return null!=e?{content:e.content,containerId:e.props.containerId,id:e.props.toastId,theme:e.props.theme,type:e.props.type,data:e.props.data||{},isLoading:e.props.isLoading,icon:e.props.icon,status:t}:{}}const p={list:new Map,emitQueue:new Map,on(e,t){return this.list.has(e)||this.list.set(e,[]),this.list.get(e).push(t),this},off(e,t){if(t){const n=this.list.get(e).filter((e=>e!==t));return this.list.set(e,n),this}return this.list.delete(e),this},cancelEmit(e){const t=this.emitQueue.get(e);return t&&(t.forEach(clearTimeout),this.emitQueue.delete(e)),this},emit(e){this.list.has(e)&&this.list.get(e).forEach((t=>{const n=setTimeout((()=>{t(...[].slice.call(arguments,1))}),0);this.emitQueue.has(e)||this.emitQueue.set(e,[]),this.emitQueue.get(e).push(n)}))}},h=e=>{let{theme:t,type:n,...s}=e;return o.createElement("svg",{viewBox:"0 0 24 24",width:"100%",height:"100%",fill:"colored"===t?"currentColor":`var(--toastify-icon-color-${n})`,...s})},f={info:function(e){return o.createElement(h,{...e},o.createElement("path",{d:"M12 0a12 12 0 1012 12A12.013 12.013 0 0012 0zm.25 5a1.5 1.5 0 11-1.5 1.5 1.5 1.5 0 011.5-1.5zm2.25 13.5h-4a1 1 0 010-2h.75a.25.25 0 00.25-.25v-4.5a.25.25 0 00-.25-.25h-.75a1 1 0 010-2h1a2 2 0 012 2v4.75a.25.25 0 00.25.25h.75a1 1 0 110 2z"}))},warning:function(e){return o.createElement(h,{...e},o.createElement("path",{d:"M23.32 17.191L15.438 2.184C14.728.833 13.416 0 11.996 0c-1.42 0-2.733.833-3.443 2.184L.533 17.448a4.744 4.744 0 000 4.368C1.243 23.167 2.555 24 3.975 24h16.05C22.22 24 24 22.044 24 19.632c0-.904-.251-1.746-.68-2.44zm-9.622 1.46c0 1.033-.724 1.823-1.698 1.823s-1.698-.79-1.698-1.822v-.043c0-1.028.724-1.822 1.698-1.822s1.698.79 1.698 1.822v.043zm.039-12.285l-.84 8.06c-.057.581-.408.943-.897.943-.49 0-.84-.367-.896-.942l-.84-8.065c-.057-.624.25-1.095.779-1.095h1.91c.528.005.84.476.784 1.1z"}))},success:function(e){return o.createElement(h,{...e},o.createElement("path",{d:"M12 0a12 12 0 1012 12A12.014 12.014 0 0012 0zm6.927 8.2l-6.845 9.289a1.011 1.011 0 01-1.43.188l-4.888-3.908a1 1 0 111.25-1.562l4.076 3.261 6.227-8.451a1 1 0 111.61 1.183z"}))},error:function(e){return o.createElement(h,{...e},o.createElement("path",{d:"M11.983 0a12.206 12.206 0 00-8.51 3.653A11.8 11.8 0 000 12.207 11.779 11.779 0 0011.8 24h.214A12.111 12.111 0 0024 11.791 11.766 11.766 0 0011.983 0zM10.5 16.542a1.476 1.476 0 011.449-1.53h.027a1.527 1.527 0 011.523 1.47 1.475 1.475 0 01-1.449 1.53h-.027a1.529 1.529 0 01-1.523-1.47zM11 12.5v-6a1 1 0 012 0v6a1 1 0 11-2 0z"}))},spinner:function(){return o.createElement("div",{className:"Toastify__spinner"})}};function g(e){const[,t]=(0,o.useReducer)((e=>e+1),0),[n,s]=(0,o.useState)([]),r=(0,o.useRef)(null),d=(0,o.useRef)(new Map).current,h=e=>-1!==n.indexOf(e),g=(0,o.useRef)({toastKey:1,displayedToast:0,count:0,queue:[],props:e,containerId:null,isToastActive:h,getToast:e=>d.get(e)}).current;function y(e){let{containerId:t}=e;const{limit:n}=g.props;!n||t&&g.containerId!==t||(g.count-=g.queue.length,g.queue=[])}function v(e){s((t=>null==e?[]:t.filter((t=>t!==e))))}function T(){const{toastContent:e,toastProps:t,staleId:n}=g.queue.shift();x(e,t,n)}function E(e,n){let{delay:s,staleId:h,...y}=n;if(!u(e)||function(e){return!r.current||g.props.enableMultiContainer&&e.containerId!==g.props.containerId||d.has(e.toastId)&&null==e.updateId}(y))return;const{toastId:E,updateId:C,data:b}=y,{props:N}=g,_=()=>v(E),I=null==C;I&&g.count++;const j={...N,style:N.toastStyle,key:g.toastKey++,...Object.fromEntries(Object.entries(y).filter((e=>{let[t,n]=e;return null!=n}))),toastId:E,updateId:C,data:b,closeToast:_,isIn:!1,className:c(y.className||N.toastClassName),bodyClassName:c(y.bodyClassName||N.bodyClassName),progressClassName:c(y.progressClassName||N.progressClassName),autoClose:!y.isLoading&&(k=y.autoClose,L=N.autoClose,!1===k||a(k)&&k>0?k:L),deleteToast(){const e=m(d.get(E),"removed");d.delete(E),p.emit(4,e);const n=g.queue.length;if(g.count=null==E?g.count-g.displayedToast:g.count-1,g.count<0&&(g.count=0),n>0){const e=null==E?g.props.limit:1;if(1===n||1===e)g.displayedToast++,T();else{const t=e>n?n:e;g.displayedToast=t;for(let e=0;ee in f)(n)&&(c=f[n](u))),c}(j),l(y.onOpen)&&(j.onOpen=y.onOpen),l(y.onClose)&&(j.onClose=y.onClose),j.closeButton=N.closeButton,!1===y.closeButton||u(y.closeButton)?j.closeButton=y.closeButton:!0===y.closeButton&&(j.closeButton=!u(N.closeButton)||N.closeButton);let O=e;(0,o.isValidElement)(e)&&!i(e.type)?O=(0,o.cloneElement)(e,{closeToast:_,toastProps:j,data:b}):l(e)&&(O=e({closeToast:_,toastProps:j,data:b})),N.limit&&N.limit>0&&g.count>N.limit&&I?g.queue.push({toastContent:O,toastProps:j,staleId:h}):a(s)?setTimeout((()=>{x(O,j,h)}),s):x(O,j,h)}function x(e,t,n){const{toastId:o}=t;n&&d.delete(n);const r={content:e,props:t};d.set(o,r),s((e=>[...e,o].filter((e=>e!==n)))),p.emit(4,m(r,null==r.props.updateId?"added":"updated"))}return(0,o.useEffect)((()=>(g.containerId=e.containerId,p.cancelEmit(3).on(0,E).on(1,(e=>r.current&&v(e))).on(5,y).emit(2,g),()=>{d.clear(),p.emit(3,g)})),[]),(0,o.useEffect)((()=>{g.props=e,g.isToastActive=h,g.displayedToast=n.length})),{getToastToRender:function(t){const n=new Map,o=Array.from(d.values());return e.newestOnTop&&o.reverse(),o.forEach((e=>{const{position:t}=e.props;n.has(t)||n.set(t,[]),n.get(t).push(e)})),Array.from(n,(e=>t(e[0],e[1])))},containerRef:r,isToastActive:h}}function y(e){return e.targetTouches&&e.targetTouches.length>=1?e.targetTouches[0].clientX:e.clientX}function v(e){return e.targetTouches&&e.targetTouches.length>=1?e.targetTouches[0].clientY:e.clientY}function T(e){const[t,n]=(0,o.useState)(!1),[s,r]=(0,o.useState)(!1),a=(0,o.useRef)(null),i=(0,o.useRef)({start:0,x:0,y:0,delta:0,removalDistance:0,canCloseOnClick:!0,canDrag:!1,boundingRect:null,didMove:!1}).current,c=(0,o.useRef)(e),{autoClose:u,pauseOnHover:d,closeToast:m,onClick:p,closeOnClick:h}=e;function f(t){if(e.draggable){"touchstart"===t.nativeEvent.type&&t.nativeEvent.preventDefault(),i.didMove=!1,document.addEventListener("mousemove",x),document.addEventListener("mouseup",C),document.addEventListener("touchmove",x),document.addEventListener("touchend",C);const n=a.current;i.canCloseOnClick=!0,i.canDrag=!0,i.boundingRect=n.getBoundingClientRect(),n.style.transition="",i.x=y(t.nativeEvent),i.y=v(t.nativeEvent),"x"===e.draggableDirection?(i.start=i.x,i.removalDistance=n.offsetWidth*(e.draggablePercent/100)):(i.start=i.y,i.removalDistance=n.offsetHeight*(80===e.draggablePercent?1.5*e.draggablePercent:e.draggablePercent/100))}}function g(t){if(i.boundingRect){const{top:n,bottom:o,left:s,right:r}=i.boundingRect;"touchend"!==t.nativeEvent.type&&e.pauseOnHover&&i.x>=s&&i.x<=r&&i.y>=n&&i.y<=o?E():T()}}function T(){n(!0)}function E(){n(!1)}function x(n){const o=a.current;i.canDrag&&o&&(i.didMove=!0,t&&E(),i.x=y(n),i.y=v(n),i.delta="x"===e.draggableDirection?i.x-i.start:i.y-i.start,i.start!==i.x&&(i.canCloseOnClick=!1),o.style.transform=`translate${e.draggableDirection}(${i.delta}px)`,o.style.opacity=""+(1-Math.abs(i.delta/i.removalDistance)))}function C(){document.removeEventListener("mousemove",x),document.removeEventListener("mouseup",C),document.removeEventListener("touchmove",x),document.removeEventListener("touchend",C);const t=a.current;if(i.canDrag&&i.didMove&&t){if(i.canDrag=!1,Math.abs(i.delta)>i.removalDistance)return r(!0),void e.closeToast();t.style.transition="transform 0.2s, opacity 0.2s",t.style.transform=`translate${e.draggableDirection}(0)`,t.style.opacity="1"}}(0,o.useEffect)((()=>{c.current=e})),(0,o.useEffect)((()=>(a.current&&a.current.addEventListener("d",T,{once:!0}),l(e.onOpen)&&e.onOpen((0,o.isValidElement)(e.children)&&e.children.props),()=>{const e=c.current;l(e.onClose)&&e.onClose((0,o.isValidElement)(e.children)&&e.children.props)})),[]),(0,o.useEffect)((()=>(e.pauseOnFocusLoss&&(document.hasFocus()||E(),window.addEventListener("focus",T),window.addEventListener("blur",E)),()=>{e.pauseOnFocusLoss&&(window.removeEventListener("focus",T),window.removeEventListener("blur",E))})),[e.pauseOnFocusLoss]);const b={onMouseDown:f,onTouchStart:f,onMouseUp:g,onTouchEnd:g};return u&&d&&(b.onMouseEnter=E,b.onMouseLeave=T),h&&(b.onClick=e=>{p&&p(e),i.canCloseOnClick&&m()}),{playToast:T,pauseToast:E,isRunning:t,preventExitTransition:s,toastRef:a,eventHandlers:b}}function E(e){let{closeToast:t,theme:n,ariaLabel:s="close"}=e;return o.createElement("button",{className:`Toastify__close-button Toastify__close-button--${n}`,type:"button",onClick:e=>{e.stopPropagation(),t(e)},"aria-label":s},o.createElement("svg",{"aria-hidden":"true",viewBox:"0 0 14 16"},o.createElement("path",{fillRule:"evenodd",d:"M7.71 8.23l3.75 3.75-1.48 1.48-3.75-3.75-3.75 3.75L1 11.98l3.75-3.75L1 4.48 2.48 3l3.75 3.75L9.98 3l1.48 1.48-3.75 3.75z"})))}function x(e){let{delay:t,isRunning:n,closeToast:s,type:a="default",hide:i,className:c,style:u,controlledProgress:d,progress:m,rtl:p,isIn:h,theme:f}=e;const g=i||d&&0===m,y={...u,animationDuration:`${t}ms`,animationPlayState:n?"running":"paused",opacity:g?0:1};d&&(y.transform=`scaleX(${m})`);const v=r("Toastify__progress-bar",d?"Toastify__progress-bar--controlled":"Toastify__progress-bar--animated",`Toastify__progress-bar-theme--${f}`,`Toastify__progress-bar--${a}`,{"Toastify__progress-bar--rtl":p}),T=l(c)?c({rtl:p,type:a,defaultClassName:v}):r(v,c);return o.createElement("div",{role:"progressbar","aria-hidden":g?"true":"false","aria-label":"notification timer",className:T,style:y,[d&&m>=1?"onTransitionEnd":"onAnimationEnd"]:d&&m<1?null:()=>{h&&s()}})}const C=e=>{const{isRunning:t,preventExitTransition:n,toastRef:s,eventHandlers:a}=T(e),{closeButton:i,children:c,autoClose:u,onClick:d,type:m,hideProgressBar:p,closeToast:h,transition:f,position:g,className:y,style:v,bodyClassName:C,bodyStyle:b,progressClassName:N,progressStyle:_,updateId:I,role:j,progress:k,rtl:L,toastId:O,deleteToast:w,isIn:F,isLoading:A,iconOut:D,closeOnClick:M,theme:R}=e,P=r("Toastify__toast",`Toastify__toast-theme--${R}`,`Toastify__toast--${m}`,{"Toastify__toast--rtl":L},{"Toastify__toast--close-on-click":M}),B=l(y)?y({rtl:L,position:g,type:m,defaultClassName:P}):r(P,y),V=!!k||!u,$={closeToast:h,type:m,theme:R};let Z=null;return!1===i||(Z=l(i)?i($):(0,o.isValidElement)(i)?(0,o.cloneElement)(i,$):E($)),o.createElement(f,{isIn:F,done:w,position:g,preventExitTransition:n,nodeRef:s},o.createElement("div",{id:O,onClick:d,className:B,...a,style:v,ref:s},o.createElement("div",{...F&&{role:j},className:l(C)?C({type:m}):r("Toastify__toast-body",C),style:b},null!=D&&o.createElement("div",{className:r("Toastify__toast-icon",{"Toastify--animate-icon Toastify__zoom-enter":!A})},D),o.createElement("div",null,c)),Z,o.createElement(x,{...I&&!V?{key:`pb-${I}`}:{},rtl:L,theme:R,delay:u,isRunning:t,isIn:F,closeToast:h,hide:p,type:m,style:_,className:N,controlledProgress:V,progress:k||0})))},b=function(e,t){return void 0===t&&(t=!1),{enter:`Toastify--animate Toastify__${e}-enter`,exit:`Toastify--animate Toastify__${e}-exit`,appendPosition:t}},N=d(b("bounce",!0)),_=(d(b("slide",!0)),d(b("zoom")),d(b("flip")),(0,o.forwardRef)(((e,t)=>{const{getToastToRender:n,containerRef:s,isToastActive:a}=g(e),{className:i,style:u,rtl:d,containerId:m}=e;function p(e){const t=r("Toastify__toast-container",`Toastify__toast-container--${e}`,{"Toastify__toast-container--rtl":d});return l(i)?i({position:e,rtl:d,defaultClassName:t}):r(t,c(i))}return(0,o.useEffect)((()=>{t&&(t.current=s.current)}),[]),o.createElement("div",{ref:s,className:"Toastify",id:m},n(((e,t)=>{const n=t.length?{...u}:{...u,pointerEvents:"none"};return o.createElement("div",{className:p(e),style:n,key:`container-${e}`},t.map(((e,n)=>{let{content:s,props:r}=e;return o.createElement(C,{...r,isIn:a(r.toastId),style:{...r.style,"--nth":n+1,"--len":t.length},key:`toast-${r.key}`},s)})))})))})));_.displayName="ToastContainer",_.defaultProps={position:"top-right",transition:N,autoClose:5e3,closeButton:E,pauseOnHover:!0,pauseOnFocusLoss:!0,closeOnClick:!0,draggable:!0,draggablePercent:80,draggableDirection:"x",role:"alert",theme:"light"};let I,j=new Map,k=[],L=1;function O(){return""+L++}function w(e){return e&&(i(e.toastId)||a(e.toastId))?e.toastId:O()}function F(e,t){return j.size>0?p.emit(0,e,t):k.push({content:e,options:t}),t.toastId}function A(e,t){return{...t,type:t&&t.type||e,toastId:w(t)}}function D(e){return(t,n)=>F(t,A(e,n))}function M(e,t){return F(e,A("default",t))}M.loading=(e,t)=>F(e,A("default",{isLoading:!0,autoClose:!1,closeOnClick:!1,closeButton:!1,draggable:!1,...t})),M.promise=function(e,t,n){let o,{pending:s,error:r,success:a}=t;s&&(o=i(s)?M.loading(s,n):M.loading(s.render,{...n,...s}));const c={isLoading:null,autoClose:null,closeOnClick:null,closeButton:null,draggable:null},u=(e,t,s)=>{if(null==t)return void M.dismiss(o);const r={type:e,...c,...n,data:s},a=i(t)?{render:t}:t;return o?M.update(o,{...r,...a}):M(a.render,{...r,...a}),s},d=l(e)?e():e;return d.then((e=>u("success",a,e))).catch((e=>u("error",r,e))),d},M.success=D("success"),M.info=D("info"),M.error=D("error"),M.warning=D("warning"),M.warn=M.warning,M.dark=(e,t)=>F(e,A("default",{theme:"dark",...t})),M.dismiss=e=>{j.size>0?p.emit(1,e):k=k.filter((t=>null!=e&&t.options.toastId!==e))},M.clearWaitingQueue=function(e){return void 0===e&&(e={}),p.emit(5,e)},M.isActive=e=>{let t=!1;return j.forEach((n=>{n.isToastActive&&n.isToastActive(e)&&(t=!0)})),t},M.update=function(e,t){void 0===t&&(t={}),setTimeout((()=>{const n=function(e,t){let{containerId:n}=t;const o=j.get(n||I);return o&&o.getToast(e)}(e,t);if(n){const{props:o,content:s}=n,r={delay:100,...o,...t,toastId:t.toastId||e,updateId:O()};r.toastId!==e&&(r.staleId=e);const a=r.render||s;delete r.render,F(a,r)}}),0)},M.done=e=>{M.update(e,{progress:1})},M.onChange=e=>(p.on(4,e),()=>{p.off(4,e)}),M.POSITION={TOP_LEFT:"top-left",TOP_RIGHT:"top-right",TOP_CENTER:"top-center",BOTTOM_LEFT:"bottom-left",BOTTOM_RIGHT:"bottom-right",BOTTOM_CENTER:"bottom-center"},M.TYPE={INFO:"info",SUCCESS:"success",WARNING:"warning",ERROR:"error",DEFAULT:"default"},p.on(2,(e=>{I=e.containerId||e,j.set(I,e),k.forEach((e=>{p.emit(0,e.content,e.options)})),k=[]})).on(3,(e=>{j.delete(e.containerId||e),0===j.size&&p.off(0).off(1).off(5)}))}}]); \ No newline at end of file +"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[9610],{7999:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>c,default:()=>h,frontMatter:()=>l,metadata:()=>u,toc:()=>m});var o=n(5893),s=n(1151),r=n(2920),a=n(1e3),i=n(2949);const l={sidebar_position:2},c=void 0,u={id:"doc/Theme",title:"Theme",description:"Applying theme",source:"@site/docs/doc/Theme.md",sourceDirName:"doc",slug:"/doc/Theme",permalink:"/react-native-kitra/docs/next/doc/Theme",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/docs/doc/Theme.md",tags:[],version:"current",lastUpdatedAt:1709646294,formattedLastUpdatedAt:"Mar 5, 2024",sidebarPosition:2,frontMatter:{sidebar_position:2},sidebar:"DocSidebar",previous:{title:"Notification",permalink:"/react-native-kitra/docs/next/doc/Notification"},next:{title:"Typography",permalink:"/react-native-kitra/docs/next/doc/Typography"}},d={},m=[{value:"Applying theme",id:"applying-theme",level:2},{value:"Accessing and updating theme",id:"accessing-and-updating-theme",level:2},{value:"Colors",id:"colors",level:2},{value:"Main",id:"main",level:3},{value:"Text",id:"text",level:3},{value:"Status",id:"status",level:3}];function p(e){const t={code:"code",h2:"h2",h3:"h3",p:"p",pre:"pre",strong:"strong",...(0,s.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(r.Ix,{position:"bottom-center",autoClose:5e3,hideProgressBar:!0,newestOnTop:!1,closeOnClick:!0,rtl:!1,pauseOnFocusLoss:!0,draggable:!0,pauseOnHover:!0,theme:(0,i.I)().colorMode}),"\n",(0,o.jsx)(t.h2,{id:"applying-theme",children:"Applying theme"}),"\n",(0,o.jsx)(t.p,{children:"To use themes, you need to wrap the root component with provider."}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-jsx",children:"import { KitraProvider } from '@tra-tech/react-native-kitra';\nimport App from './src/App';\n\nexport default function Main() {\n return (\n \n \n \n );\n}\n"})}),"\n",(0,o.jsx)(t.h2,{id:"accessing-and-updating-theme",children:"Accessing and updating theme"}),"\n",(0,o.jsxs)(t.p,{children:["To access the current theme, use the ",(0,o.jsx)(t.strong,{children:"useTheme"})," hook. This hook returns the current theme object and a ",(0,o.jsx)(t.strong,{children:"updateTheme"})," function to update the theme."]}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.strong,{children:"theme"})," object is a key-value pair of colors that define the current theme of the app. The ",(0,o.jsx)(t.strong,{children:"updateTheme"})," function is used to update the current theme by merging in new colors. You can customize these values to create your own theme."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-jsx",children:'import { useTheme } from \'@tra-tech/react-native-kitra\';\n\nconst MyCustomTheme= {\n dark:{\n someColor: "#420EA1"\n },\n light:{\n someColor:"#F0E52F"\n }\n}\n\nexport function App() {\n const {theme,updateTheme}= useTheme();\n\n useEffect(() => {\n updateTheme(MyCustomTheme)\n }, []);\n \n return (\n \n \n \n \n );\n}\n'})}),"\n",(0,o.jsx)(t.h2,{id:"colors",children:"Colors"}),"\n","\n","\n",(0,o.jsx)(t.h3,{id:"main",children:"Main"}),"\n",(0,o.jsxs)("div",{style:{display:"flex",flexDirection:"row",flexWrap:"wrap"},children:[(0,o.jsx)(a.Z,{colorName:"Primary",colorValue:"#8973CD"}),(0,o.jsx)(a.Z,{colorName:"Primary 5",colorValue:"#F9F8FD"}),(0,o.jsx)(a.Z,{colorName:"Primary 15",colorValue:"#EDEAF8"}),(0,o.jsx)(a.Z,{colorName:"Primary 30",colorValue:"#DCD5F0"}),(0,o.jsx)(a.Z,{colorName:"Secondary",colorValue:"#82B98E"}),(0,o.jsx)(a.Z,{colorName:"Tetriary",colorValue:"#67A7C1"})]}),"\n",(0,o.jsx)(t.h3,{id:"text",children:"Text"}),"\n",(0,o.jsxs)("div",{style:{display:"flex",flexDirection:"row",flexWrap:"wrap"},children:[(0,o.jsx)(a.Z,{colorName:"Black",colorValue:"#000000"}),(0,o.jsx)(a.Z,{colorName:"Light Black",colorValue:"#404040"}),(0,o.jsx)(a.Z,{colorName:"Grey",colorValue:"#9A9A9A"}),(0,o.jsx)(a.Z,{colorName:"White",colorValue:"#FFFFFF"}),(0,o.jsx)(a.Z,{colorName:"Dark White",colorValue:"#FDFCFF"}),(0,o.jsx)(a.Z,{colorName:"Light Grey",colorValue:"#F5F4F6"})]}),"\n",(0,o.jsx)(t.h3,{id:"status",children:"Status"}),"\n",(0,o.jsxs)("div",{style:{display:"flex",flexDirection:"row",flexWrap:"wrap"},children:[(0,o.jsx)(a.Z,{colorName:"Focused",colorValue:"#654FA6"}),(0,o.jsx)(a.Z,{colorName:"Error",colorValue:"#FF3434"}),(0,o.jsx)(a.Z,{colorName:"Success",colorValue:"#09CE63"}),(0,o.jsx)(a.Z,{colorName:"Disabled Light",colorValue:"#D7D1E9"}),(0,o.jsx)(a.Z,{colorName:"Disabled Dark",colorValue:"#BDBCBF"}),(0,o.jsx)(a.Z,{colorName:"Disabled Light Dark",colorValue:"#F6F6F6"})]})]})}function h(e={}){const{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(p,{...e})}):p(e)}},1e3:(e,t,n)=>{n.d(t,{Z:()=>c});n(7294);var o=n(2920);const s="container_oa4u",r="swatch_yqre",a="colorName_UerQ",i="colorValue_s1yd";var l=n(5893);const c=e=>{let{colorName:t,colorValue:n,border:c="solid"}=e;return(0,l.jsxs)("div",{id:"colorbutton",style:{cursor:"pointer"},onClick:()=>{navigator.clipboard.writeText(n),o.Am.success("Copied to Clipboard!")},className:s,children:[(0,l.jsx)("div",{className:r,style:{backgroundColor:n,border:c,borderWidth:1}}),(0,l.jsxs)("div",{style:{display:"flex",flexDirection:"column"},children:[(0,l.jsx)("p",{className:a,children:t}),(0,l.jsx)("p",{className:i,children:n})]})]})}},1151:(e,t,n)=>{n.d(t,{Z:()=>i,a:()=>a});var o=n(7294);const s={},r=o.createContext(s);function a(e){const t=o.useContext(r);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:a(e.components),o.createElement(r.Provider,{value:t},e.children)}},2920:(e,t,n)=>{n.d(t,{Ix:()=>_,Am:()=>M});var o=n(7294);function s(e){var t,n,o="";if("string"==typeof e||"number"==typeof e)o+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t"number"==typeof e&&!isNaN(e),i=e=>"string"==typeof e,l=e=>"function"==typeof e,c=e=>i(e)||l(e)?e:null,u=e=>(0,o.isValidElement)(e)||i(e)||l(e)||a(e);function d(e){let{enter:t,exit:n,appendPosition:s=!1,collapse:r=!0,collapseDuration:a=300}=e;return function(e){let{children:i,position:l,preventExitTransition:c,done:u,nodeRef:d,isIn:m}=e;const p=s?`${t}--${l}`:t,h=s?`${n}--${l}`:n,f=(0,o.useRef)(0);return(0,o.useLayoutEffect)((()=>{const e=d.current,t=p.split(" "),n=o=>{o.target===d.current&&(e.dispatchEvent(new Event("d")),e.removeEventListener("animationend",n),e.removeEventListener("animationcancel",n),0===f.current&&"animationcancel"!==o.type&&e.classList.remove(...t))};e.classList.add(...t),e.addEventListener("animationend",n),e.addEventListener("animationcancel",n)}),[]),(0,o.useEffect)((()=>{const e=d.current,t=()=>{e.removeEventListener("animationend",t),r?function(e,t,n){void 0===n&&(n=300);const{scrollHeight:o,style:s}=e;requestAnimationFrame((()=>{s.minHeight="initial",s.height=o+"px",s.transition=`all ${n}ms`,requestAnimationFrame((()=>{s.height="0",s.padding="0",s.margin="0",setTimeout(t,n)}))}))}(e,u,a):u()};m||(c?t():(f.current=1,e.className+=` ${h}`,e.addEventListener("animationend",t)))}),[m]),o.createElement(o.Fragment,null,i)}}function m(e,t){return null!=e?{content:e.content,containerId:e.props.containerId,id:e.props.toastId,theme:e.props.theme,type:e.props.type,data:e.props.data||{},isLoading:e.props.isLoading,icon:e.props.icon,status:t}:{}}const p={list:new Map,emitQueue:new Map,on(e,t){return this.list.has(e)||this.list.set(e,[]),this.list.get(e).push(t),this},off(e,t){if(t){const n=this.list.get(e).filter((e=>e!==t));return this.list.set(e,n),this}return this.list.delete(e),this},cancelEmit(e){const t=this.emitQueue.get(e);return t&&(t.forEach(clearTimeout),this.emitQueue.delete(e)),this},emit(e){this.list.has(e)&&this.list.get(e).forEach((t=>{const n=setTimeout((()=>{t(...[].slice.call(arguments,1))}),0);this.emitQueue.has(e)||this.emitQueue.set(e,[]),this.emitQueue.get(e).push(n)}))}},h=e=>{let{theme:t,type:n,...s}=e;return o.createElement("svg",{viewBox:"0 0 24 24",width:"100%",height:"100%",fill:"colored"===t?"currentColor":`var(--toastify-icon-color-${n})`,...s})},f={info:function(e){return o.createElement(h,{...e},o.createElement("path",{d:"M12 0a12 12 0 1012 12A12.013 12.013 0 0012 0zm.25 5a1.5 1.5 0 11-1.5 1.5 1.5 1.5 0 011.5-1.5zm2.25 13.5h-4a1 1 0 010-2h.75a.25.25 0 00.25-.25v-4.5a.25.25 0 00-.25-.25h-.75a1 1 0 010-2h1a2 2 0 012 2v4.75a.25.25 0 00.25.25h.75a1 1 0 110 2z"}))},warning:function(e){return o.createElement(h,{...e},o.createElement("path",{d:"M23.32 17.191L15.438 2.184C14.728.833 13.416 0 11.996 0c-1.42 0-2.733.833-3.443 2.184L.533 17.448a4.744 4.744 0 000 4.368C1.243 23.167 2.555 24 3.975 24h16.05C22.22 24 24 22.044 24 19.632c0-.904-.251-1.746-.68-2.44zm-9.622 1.46c0 1.033-.724 1.823-1.698 1.823s-1.698-.79-1.698-1.822v-.043c0-1.028.724-1.822 1.698-1.822s1.698.79 1.698 1.822v.043zm.039-12.285l-.84 8.06c-.057.581-.408.943-.897.943-.49 0-.84-.367-.896-.942l-.84-8.065c-.057-.624.25-1.095.779-1.095h1.91c.528.005.84.476.784 1.1z"}))},success:function(e){return o.createElement(h,{...e},o.createElement("path",{d:"M12 0a12 12 0 1012 12A12.014 12.014 0 0012 0zm6.927 8.2l-6.845 9.289a1.011 1.011 0 01-1.43.188l-4.888-3.908a1 1 0 111.25-1.562l4.076 3.261 6.227-8.451a1 1 0 111.61 1.183z"}))},error:function(e){return o.createElement(h,{...e},o.createElement("path",{d:"M11.983 0a12.206 12.206 0 00-8.51 3.653A11.8 11.8 0 000 12.207 11.779 11.779 0 0011.8 24h.214A12.111 12.111 0 0024 11.791 11.766 11.766 0 0011.983 0zM10.5 16.542a1.476 1.476 0 011.449-1.53h.027a1.527 1.527 0 011.523 1.47 1.475 1.475 0 01-1.449 1.53h-.027a1.529 1.529 0 01-1.523-1.47zM11 12.5v-6a1 1 0 012 0v6a1 1 0 11-2 0z"}))},spinner:function(){return o.createElement("div",{className:"Toastify__spinner"})}};function g(e){const[,t]=(0,o.useReducer)((e=>e+1),0),[n,s]=(0,o.useState)([]),r=(0,o.useRef)(null),d=(0,o.useRef)(new Map).current,h=e=>-1!==n.indexOf(e),g=(0,o.useRef)({toastKey:1,displayedToast:0,count:0,queue:[],props:e,containerId:null,isToastActive:h,getToast:e=>d.get(e)}).current;function y(e){let{containerId:t}=e;const{limit:n}=g.props;!n||t&&g.containerId!==t||(g.count-=g.queue.length,g.queue=[])}function v(e){s((t=>null==e?[]:t.filter((t=>t!==e))))}function T(){const{toastContent:e,toastProps:t,staleId:n}=g.queue.shift();x(e,t,n)}function E(e,n){let{delay:s,staleId:h,...y}=n;if(!u(e)||function(e){return!r.current||g.props.enableMultiContainer&&e.containerId!==g.props.containerId||d.has(e.toastId)&&null==e.updateId}(y))return;const{toastId:E,updateId:C,data:b}=y,{props:N}=g,_=()=>v(E),I=null==C;I&&g.count++;const j={...N,style:N.toastStyle,key:g.toastKey++,...Object.fromEntries(Object.entries(y).filter((e=>{let[t,n]=e;return null!=n}))),toastId:E,updateId:C,data:b,closeToast:_,isIn:!1,className:c(y.className||N.toastClassName),bodyClassName:c(y.bodyClassName||N.bodyClassName),progressClassName:c(y.progressClassName||N.progressClassName),autoClose:!y.isLoading&&(k=y.autoClose,L=N.autoClose,!1===k||a(k)&&k>0?k:L),deleteToast(){const e=m(d.get(E),"removed");d.delete(E),p.emit(4,e);const n=g.queue.length;if(g.count=null==E?g.count-g.displayedToast:g.count-1,g.count<0&&(g.count=0),n>0){const e=null==E?g.props.limit:1;if(1===n||1===e)g.displayedToast++,T();else{const t=e>n?n:e;g.displayedToast=t;for(let e=0;ee in f)(n)&&(c=f[n](u))),c}(j),l(y.onOpen)&&(j.onOpen=y.onOpen),l(y.onClose)&&(j.onClose=y.onClose),j.closeButton=N.closeButton,!1===y.closeButton||u(y.closeButton)?j.closeButton=y.closeButton:!0===y.closeButton&&(j.closeButton=!u(N.closeButton)||N.closeButton);let O=e;(0,o.isValidElement)(e)&&!i(e.type)?O=(0,o.cloneElement)(e,{closeToast:_,toastProps:j,data:b}):l(e)&&(O=e({closeToast:_,toastProps:j,data:b})),N.limit&&N.limit>0&&g.count>N.limit&&I?g.queue.push({toastContent:O,toastProps:j,staleId:h}):a(s)?setTimeout((()=>{x(O,j,h)}),s):x(O,j,h)}function x(e,t,n){const{toastId:o}=t;n&&d.delete(n);const r={content:e,props:t};d.set(o,r),s((e=>[...e,o].filter((e=>e!==n)))),p.emit(4,m(r,null==r.props.updateId?"added":"updated"))}return(0,o.useEffect)((()=>(g.containerId=e.containerId,p.cancelEmit(3).on(0,E).on(1,(e=>r.current&&v(e))).on(5,y).emit(2,g),()=>{d.clear(),p.emit(3,g)})),[]),(0,o.useEffect)((()=>{g.props=e,g.isToastActive=h,g.displayedToast=n.length})),{getToastToRender:function(t){const n=new Map,o=Array.from(d.values());return e.newestOnTop&&o.reverse(),o.forEach((e=>{const{position:t}=e.props;n.has(t)||n.set(t,[]),n.get(t).push(e)})),Array.from(n,(e=>t(e[0],e[1])))},containerRef:r,isToastActive:h}}function y(e){return e.targetTouches&&e.targetTouches.length>=1?e.targetTouches[0].clientX:e.clientX}function v(e){return e.targetTouches&&e.targetTouches.length>=1?e.targetTouches[0].clientY:e.clientY}function T(e){const[t,n]=(0,o.useState)(!1),[s,r]=(0,o.useState)(!1),a=(0,o.useRef)(null),i=(0,o.useRef)({start:0,x:0,y:0,delta:0,removalDistance:0,canCloseOnClick:!0,canDrag:!1,boundingRect:null,didMove:!1}).current,c=(0,o.useRef)(e),{autoClose:u,pauseOnHover:d,closeToast:m,onClick:p,closeOnClick:h}=e;function f(t){if(e.draggable){"touchstart"===t.nativeEvent.type&&t.nativeEvent.preventDefault(),i.didMove=!1,document.addEventListener("mousemove",x),document.addEventListener("mouseup",C),document.addEventListener("touchmove",x),document.addEventListener("touchend",C);const n=a.current;i.canCloseOnClick=!0,i.canDrag=!0,i.boundingRect=n.getBoundingClientRect(),n.style.transition="",i.x=y(t.nativeEvent),i.y=v(t.nativeEvent),"x"===e.draggableDirection?(i.start=i.x,i.removalDistance=n.offsetWidth*(e.draggablePercent/100)):(i.start=i.y,i.removalDistance=n.offsetHeight*(80===e.draggablePercent?1.5*e.draggablePercent:e.draggablePercent/100))}}function g(t){if(i.boundingRect){const{top:n,bottom:o,left:s,right:r}=i.boundingRect;"touchend"!==t.nativeEvent.type&&e.pauseOnHover&&i.x>=s&&i.x<=r&&i.y>=n&&i.y<=o?E():T()}}function T(){n(!0)}function E(){n(!1)}function x(n){const o=a.current;i.canDrag&&o&&(i.didMove=!0,t&&E(),i.x=y(n),i.y=v(n),i.delta="x"===e.draggableDirection?i.x-i.start:i.y-i.start,i.start!==i.x&&(i.canCloseOnClick=!1),o.style.transform=`translate${e.draggableDirection}(${i.delta}px)`,o.style.opacity=""+(1-Math.abs(i.delta/i.removalDistance)))}function C(){document.removeEventListener("mousemove",x),document.removeEventListener("mouseup",C),document.removeEventListener("touchmove",x),document.removeEventListener("touchend",C);const t=a.current;if(i.canDrag&&i.didMove&&t){if(i.canDrag=!1,Math.abs(i.delta)>i.removalDistance)return r(!0),void e.closeToast();t.style.transition="transform 0.2s, opacity 0.2s",t.style.transform=`translate${e.draggableDirection}(0)`,t.style.opacity="1"}}(0,o.useEffect)((()=>{c.current=e})),(0,o.useEffect)((()=>(a.current&&a.current.addEventListener("d",T,{once:!0}),l(e.onOpen)&&e.onOpen((0,o.isValidElement)(e.children)&&e.children.props),()=>{const e=c.current;l(e.onClose)&&e.onClose((0,o.isValidElement)(e.children)&&e.children.props)})),[]),(0,o.useEffect)((()=>(e.pauseOnFocusLoss&&(document.hasFocus()||E(),window.addEventListener("focus",T),window.addEventListener("blur",E)),()=>{e.pauseOnFocusLoss&&(window.removeEventListener("focus",T),window.removeEventListener("blur",E))})),[e.pauseOnFocusLoss]);const b={onMouseDown:f,onTouchStart:f,onMouseUp:g,onTouchEnd:g};return u&&d&&(b.onMouseEnter=E,b.onMouseLeave=T),h&&(b.onClick=e=>{p&&p(e),i.canCloseOnClick&&m()}),{playToast:T,pauseToast:E,isRunning:t,preventExitTransition:s,toastRef:a,eventHandlers:b}}function E(e){let{closeToast:t,theme:n,ariaLabel:s="close"}=e;return o.createElement("button",{className:`Toastify__close-button Toastify__close-button--${n}`,type:"button",onClick:e=>{e.stopPropagation(),t(e)},"aria-label":s},o.createElement("svg",{"aria-hidden":"true",viewBox:"0 0 14 16"},o.createElement("path",{fillRule:"evenodd",d:"M7.71 8.23l3.75 3.75-1.48 1.48-3.75-3.75-3.75 3.75L1 11.98l3.75-3.75L1 4.48 2.48 3l3.75 3.75L9.98 3l1.48 1.48-3.75 3.75z"})))}function x(e){let{delay:t,isRunning:n,closeToast:s,type:a="default",hide:i,className:c,style:u,controlledProgress:d,progress:m,rtl:p,isIn:h,theme:f}=e;const g=i||d&&0===m,y={...u,animationDuration:`${t}ms`,animationPlayState:n?"running":"paused",opacity:g?0:1};d&&(y.transform=`scaleX(${m})`);const v=r("Toastify__progress-bar",d?"Toastify__progress-bar--controlled":"Toastify__progress-bar--animated",`Toastify__progress-bar-theme--${f}`,`Toastify__progress-bar--${a}`,{"Toastify__progress-bar--rtl":p}),T=l(c)?c({rtl:p,type:a,defaultClassName:v}):r(v,c);return o.createElement("div",{role:"progressbar","aria-hidden":g?"true":"false","aria-label":"notification timer",className:T,style:y,[d&&m>=1?"onTransitionEnd":"onAnimationEnd"]:d&&m<1?null:()=>{h&&s()}})}const C=e=>{const{isRunning:t,preventExitTransition:n,toastRef:s,eventHandlers:a}=T(e),{closeButton:i,children:c,autoClose:u,onClick:d,type:m,hideProgressBar:p,closeToast:h,transition:f,position:g,className:y,style:v,bodyClassName:C,bodyStyle:b,progressClassName:N,progressStyle:_,updateId:I,role:j,progress:k,rtl:L,toastId:O,deleteToast:w,isIn:F,isLoading:A,iconOut:D,closeOnClick:M,theme:R}=e,P=r("Toastify__toast",`Toastify__toast-theme--${R}`,`Toastify__toast--${m}`,{"Toastify__toast--rtl":L},{"Toastify__toast--close-on-click":M}),B=l(y)?y({rtl:L,position:g,type:m,defaultClassName:P}):r(P,y),V=!!k||!u,$={closeToast:h,type:m,theme:R};let Z=null;return!1===i||(Z=l(i)?i($):(0,o.isValidElement)(i)?(0,o.cloneElement)(i,$):E($)),o.createElement(f,{isIn:F,done:w,position:g,preventExitTransition:n,nodeRef:s},o.createElement("div",{id:O,onClick:d,className:B,...a,style:v,ref:s},o.createElement("div",{...F&&{role:j},className:l(C)?C({type:m}):r("Toastify__toast-body",C),style:b},null!=D&&o.createElement("div",{className:r("Toastify__toast-icon",{"Toastify--animate-icon Toastify__zoom-enter":!A})},D),o.createElement("div",null,c)),Z,o.createElement(x,{...I&&!V?{key:`pb-${I}`}:{},rtl:L,theme:R,delay:u,isRunning:t,isIn:F,closeToast:h,hide:p,type:m,style:_,className:N,controlledProgress:V,progress:k||0})))},b=function(e,t){return void 0===t&&(t=!1),{enter:`Toastify--animate Toastify__${e}-enter`,exit:`Toastify--animate Toastify__${e}-exit`,appendPosition:t}},N=d(b("bounce",!0)),_=(d(b("slide",!0)),d(b("zoom")),d(b("flip")),(0,o.forwardRef)(((e,t)=>{const{getToastToRender:n,containerRef:s,isToastActive:a}=g(e),{className:i,style:u,rtl:d,containerId:m}=e;function p(e){const t=r("Toastify__toast-container",`Toastify__toast-container--${e}`,{"Toastify__toast-container--rtl":d});return l(i)?i({position:e,rtl:d,defaultClassName:t}):r(t,c(i))}return(0,o.useEffect)((()=>{t&&(t.current=s.current)}),[]),o.createElement("div",{ref:s,className:"Toastify",id:m},n(((e,t)=>{const n=t.length?{...u}:{...u,pointerEvents:"none"};return o.createElement("div",{className:p(e),style:n,key:`container-${e}`},t.map(((e,n)=>{let{content:s,props:r}=e;return o.createElement(C,{...r,isIn:a(r.toastId),style:{...r.style,"--nth":n+1,"--len":t.length},key:`toast-${r.key}`},s)})))})))})));_.displayName="ToastContainer",_.defaultProps={position:"top-right",transition:N,autoClose:5e3,closeButton:E,pauseOnHover:!0,pauseOnFocusLoss:!0,closeOnClick:!0,draggable:!0,draggablePercent:80,draggableDirection:"x",role:"alert",theme:"light"};let I,j=new Map,k=[],L=1;function O(){return""+L++}function w(e){return e&&(i(e.toastId)||a(e.toastId))?e.toastId:O()}function F(e,t){return j.size>0?p.emit(0,e,t):k.push({content:e,options:t}),t.toastId}function A(e,t){return{...t,type:t&&t.type||e,toastId:w(t)}}function D(e){return(t,n)=>F(t,A(e,n))}function M(e,t){return F(e,A("default",t))}M.loading=(e,t)=>F(e,A("default",{isLoading:!0,autoClose:!1,closeOnClick:!1,closeButton:!1,draggable:!1,...t})),M.promise=function(e,t,n){let o,{pending:s,error:r,success:a}=t;s&&(o=i(s)?M.loading(s,n):M.loading(s.render,{...n,...s}));const c={isLoading:null,autoClose:null,closeOnClick:null,closeButton:null,draggable:null},u=(e,t,s)=>{if(null==t)return void M.dismiss(o);const r={type:e,...c,...n,data:s},a=i(t)?{render:t}:t;return o?M.update(o,{...r,...a}):M(a.render,{...r,...a}),s},d=l(e)?e():e;return d.then((e=>u("success",a,e))).catch((e=>u("error",r,e))),d},M.success=D("success"),M.info=D("info"),M.error=D("error"),M.warning=D("warning"),M.warn=M.warning,M.dark=(e,t)=>F(e,A("default",{theme:"dark",...t})),M.dismiss=e=>{j.size>0?p.emit(1,e):k=k.filter((t=>null!=e&&t.options.toastId!==e))},M.clearWaitingQueue=function(e){return void 0===e&&(e={}),p.emit(5,e)},M.isActive=e=>{let t=!1;return j.forEach((n=>{n.isToastActive&&n.isToastActive(e)&&(t=!0)})),t},M.update=function(e,t){void 0===t&&(t={}),setTimeout((()=>{const n=function(e,t){let{containerId:n}=t;const o=j.get(n||I);return o&&o.getToast(e)}(e,t);if(n){const{props:o,content:s}=n,r={delay:100,...o,...t,toastId:t.toastId||e,updateId:O()};r.toastId!==e&&(r.staleId=e);const a=r.render||s;delete r.render,F(a,r)}}),0)},M.done=e=>{M.update(e,{progress:1})},M.onChange=e=>(p.on(4,e),()=>{p.off(4,e)}),M.POSITION={TOP_LEFT:"top-left",TOP_RIGHT:"top-right",TOP_CENTER:"top-center",BOTTOM_LEFT:"bottom-left",BOTTOM_RIGHT:"bottom-right",BOTTOM_CENTER:"bottom-center"},M.TYPE={INFO:"info",SUCCESS:"success",WARNING:"warning",ERROR:"error",DEFAULT:"default"},p.on(2,(e=>{I=e.containerId||e,j.set(I,e),k.forEach((e=>{p.emit(0,e.content,e.options)})),k=[]})).on(3,(e=>{j.delete(e.containerId||e),0===j.size&&p.off(0).off(1).off(5)}))}}]); \ No newline at end of file diff --git a/assets/js/b8b5d807.a1cee5c3.js b/assets/js/b8b5d807.f6a6bd76.js similarity index 96% rename from assets/js/b8b5d807.a1cee5c3.js rename to assets/js/b8b5d807.f6a6bd76.js index 5e38845..bb85135 100644 --- a/assets/js/b8b5d807.a1cee5c3.js +++ b/assets/js/b8b5d807.f6a6bd76.js @@ -1 +1 @@ -"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[5993],{3284:(t,e,n)=>{n.r(e),n.d(e,{assets:()=>d,contentTitle:()=>c,default:()=>h,frontMatter:()=>o,metadata:()=>s,toc:()=>a});var i=n(5893),r=n(1151);const o={sidebar_position:2},c="Activity Indicator",s={id:"components/activity-indicator",title:"Activity Indicator",description:"The Activity Indicator component is displays loading indicator.",source:"@site/versioned_docs/version-1.x/components/activity-indicator.md",sourceDirName:"components",slug:"/components/activity-indicator",permalink:"/react-native-kitra/docs/components/activity-indicator",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/versioned_docs/version-1.x/components/activity-indicator.md",tags:[],version:"1.x",lastUpdatedAt:1707292585,formattedLastUpdatedAt:"Feb 7, 2024",sidebarPosition:2,frontMatter:{sidebar_position:2},sidebar:"ComponentsSidebar",previous:{title:"Accordion List",permalink:"/react-native-kitra/docs/components/accordion-list"},next:{title:"Avatar",permalink:"/react-native-kitra/docs/components/avatar"}},d={},a=[{value:"Import",id:"import",level:3},{value:"Usage",id:"usage",level:3},{value:"Props",id:"props",level:3}];function l(t){const e={a:"a",code:"code",h1:"h1",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,r.a)(),...t.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(e.h1,{id:"activity-indicator",children:"Activity Indicator"}),"\n",(0,i.jsxs)(e.p,{children:["The ",(0,i.jsx)(e.strong,{children:"Activity Indicator"})," component is displays loading indicator."]}),"\n",(0,i.jsx)(e.h3,{id:"import",children:"Import"}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-js",children:"import { ActivityIndicator } from '@tra-tech/react-native-kitra';\n"})}),"\n",(0,i.jsx)(e.h3,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-js",children:"import { ActivityIndicator } from '@tra-tech/react-native-kitra';\n\nconst App = () => (\n \n);\n\nexport default App;\n\n"})}),"\n",(0,i.jsx)(e.h3,{id:"props",children:"Props"}),"\n",(0,i.jsxs)(e.table,{children:[(0,i.jsx)(e.thead,{children:(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.th,{children:"Prop name"}),(0,i.jsx)(e.th,{children:"Type"}),(0,i.jsx)(e.th,{children:"Required"}),(0,i.jsx)(e.th,{children:"Description"})]})}),(0,i.jsxs)(e.tbody,{children:[(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:"children"}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.a,{href:"https://reactnative.dev/docs/react-node",children:(0,i.jsx)(e.code,{children:"React.ReactNode"})})}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{children:"Loading indicator to display."})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:"theme"}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"UITheme "})}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{children:"The theme to use for the component."})]})]})]})]})}function h(t={}){const{wrapper:e}={...(0,r.a)(),...t.components};return e?(0,i.jsx)(e,{...t,children:(0,i.jsx)(l,{...t})}):l(t)}},1151:(t,e,n)=>{n.d(e,{Z:()=>s,a:()=>c});var i=n(7294);const r={},o=i.createContext(r);function c(t){const e=i.useContext(o);return i.useMemo((function(){return"function"==typeof t?t(e):{...e,...t}}),[e,t])}function s(t){let e;return e=t.disableParentContext?"function"==typeof t.components?t.components(r):t.components||r:c(t.components),i.createElement(o.Provider,{value:e},t.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[5993],{3284:(t,e,n)=>{n.r(e),n.d(e,{assets:()=>d,contentTitle:()=>c,default:()=>h,frontMatter:()=>o,metadata:()=>s,toc:()=>a});var i=n(5893),r=n(1151);const o={sidebar_position:2},c="Activity Indicator",s={id:"components/activity-indicator",title:"Activity Indicator",description:"The Activity Indicator component is displays loading indicator.",source:"@site/versioned_docs/version-1.x/components/activity-indicator.md",sourceDirName:"components",slug:"/components/activity-indicator",permalink:"/react-native-kitra/docs/components/activity-indicator",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/versioned_docs/version-1.x/components/activity-indicator.md",tags:[],version:"1.x",lastUpdatedAt:1709646294,formattedLastUpdatedAt:"Mar 5, 2024",sidebarPosition:2,frontMatter:{sidebar_position:2},sidebar:"ComponentsSidebar",previous:{title:"Accordion List",permalink:"/react-native-kitra/docs/components/accordion-list"},next:{title:"Avatar",permalink:"/react-native-kitra/docs/components/avatar"}},d={},a=[{value:"Import",id:"import",level:3},{value:"Usage",id:"usage",level:3},{value:"Props",id:"props",level:3}];function l(t){const e={a:"a",code:"code",h1:"h1",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,r.a)(),...t.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(e.h1,{id:"activity-indicator",children:"Activity Indicator"}),"\n",(0,i.jsxs)(e.p,{children:["The ",(0,i.jsx)(e.strong,{children:"Activity Indicator"})," component is displays loading indicator."]}),"\n",(0,i.jsx)(e.h3,{id:"import",children:"Import"}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-js",children:"import { ActivityIndicator } from '@tra-tech/react-native-kitra';\n"})}),"\n",(0,i.jsx)(e.h3,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-js",children:"import { ActivityIndicator } from '@tra-tech/react-native-kitra';\n\nconst App = () => (\n \n);\n\nexport default App;\n\n"})}),"\n",(0,i.jsx)(e.h3,{id:"props",children:"Props"}),"\n",(0,i.jsxs)(e.table,{children:[(0,i.jsx)(e.thead,{children:(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.th,{children:"Prop name"}),(0,i.jsx)(e.th,{children:"Type"}),(0,i.jsx)(e.th,{children:"Required"}),(0,i.jsx)(e.th,{children:"Description"})]})}),(0,i.jsxs)(e.tbody,{children:[(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:"children"}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.a,{href:"https://reactnative.dev/docs/react-node",children:(0,i.jsx)(e.code,{children:"React.ReactNode"})})}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{children:"Loading indicator to display."})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:"theme"}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"UITheme "})}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{children:"The theme to use for the component."})]})]})]})]})}function h(t={}){const{wrapper:e}={...(0,r.a)(),...t.components};return e?(0,i.jsx)(e,{...t,children:(0,i.jsx)(l,{...t})}):l(t)}},1151:(t,e,n)=>{n.d(e,{Z:()=>s,a:()=>c});var i=n(7294);const r={},o=i.createContext(r);function c(t){const e=i.useContext(o);return i.useMemo((function(){return"function"==typeof t?t(e):{...e,...t}}),[e,t])}function s(t){let e;return e=t.disableParentContext?"function"==typeof t.components?t.components(r):t.components||r:c(t.components),i.createElement(o.Provider,{value:e},t.children)}}}]); \ No newline at end of file diff --git a/assets/js/bdcc3237.e143bb3a.js b/assets/js/bdcc3237.45932a55.js similarity index 87% rename from assets/js/bdcc3237.e143bb3a.js rename to assets/js/bdcc3237.45932a55.js index dbafd6e..60a6a7b 100644 --- a/assets/js/bdcc3237.e143bb3a.js +++ b/assets/js/bdcc3237.45932a55.js @@ -1 +1 @@ -"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[7752],{4926:(t,e,n)=>{n.r(e),n.d(e,{assets:()=>a,contentTitle:()=>o,default:()=>h,frontMatter:()=>c,metadata:()=>s,toc:()=>d});var i=n(5893),r=n(1151);const c={sidebar_position:2},o="Activity Indicator",s={id:"components/activity-indicator",title:"Activity Indicator",description:"The Activity Indicator component is displays loading indicator.",source:"@site/docs/components/activity-indicator.md",sourceDirName:"components",slug:"/components/activity-indicator",permalink:"/react-native-kitra/docs/next/components/activity-indicator",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/docs/components/activity-indicator.md",tags:[],version:"current",lastUpdatedAt:1707292585,formattedLastUpdatedAt:"Feb 7, 2024",sidebarPosition:2,frontMatter:{sidebar_position:2},sidebar:"ComponentsSidebar",previous:{title:"Accordion List",permalink:"/react-native-kitra/docs/next/components/accordion-list"},next:{title:"Avatar",permalink:"/react-native-kitra/docs/next/components/avatar"}},a={},d=[{value:"Import",id:"import",level:3},{value:"Usage",id:"usage",level:3},{value:"Props",id:"props",level:3}];function l(t){const e={a:"a",code:"code",h1:"h1",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,r.a)(),...t.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(e.h1,{id:"activity-indicator",children:"Activity Indicator"}),"\n",(0,i.jsxs)(e.p,{children:["The ",(0,i.jsx)(e.strong,{children:"Activity Indicator"})," component is displays loading indicator."]}),"\n",(0,i.jsx)(e.h3,{id:"import",children:"Import"}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-js",children:"import { ActivityIndicator } from '@tra-tech/react-native-kitra';\n"})}),"\n",(0,i.jsx)(e.h3,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-js",children:"import { ActivityIndicator } from '@tra-tech/react-native-kitra';\n\nconst App = () => (\n \n);\n\nexport default App;\n\n"})}),"\n",(0,i.jsx)(e.h3,{id:"props",children:"Props"}),"\n",(0,i.jsxs)(e.table,{children:[(0,i.jsx)(e.thead,{children:(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.th,{children:"Prop name"}),(0,i.jsx)(e.th,{children:"Type"}),(0,i.jsx)(e.th,{children:"Required"}),(0,i.jsx)(e.th,{children:"Description"})]})}),(0,i.jsxs)(e.tbody,{children:[(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:"children"}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.a,{href:"https://reactnative.dev/docs/react-node",children:(0,i.jsx)(e.code,{children:"React.ReactNode"})})}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{children:"Loading indicator to display."})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:"theme"}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"UITheme "})}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{children:"The theme to use for the component."})]})]})]})]})}function h(t={}){const{wrapper:e}={...(0,r.a)(),...t.components};return e?(0,i.jsx)(e,{...t,children:(0,i.jsx)(l,{...t})}):l(t)}},1151:(t,e,n)=>{n.d(e,{Z:()=>s,a:()=>o});var i=n(7294);const r={},c=i.createContext(r);function o(t){const e=i.useContext(c);return i.useMemo((function(){return"function"==typeof t?t(e):{...e,...t}}),[e,t])}function s(t){let e;return e=t.disableParentContext?"function"==typeof t.components?t.components(r):t.components||r:o(t.components),i.createElement(c.Provider,{value:e},t.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[7752],{4926:(t,e,n)=>{n.r(e),n.d(e,{assets:()=>s,contentTitle:()=>o,default:()=>h,frontMatter:()=>c,metadata:()=>a,toc:()=>d});var i=n(5893),r=n(1151);const c={sidebar_position:2},o="Activity Indicator",a={id:"components/activity-indicator",title:"Activity Indicator",description:"The Activity Indicator component is displays loading indicator.",source:"@site/docs/components/activity-indicator.md",sourceDirName:"components",slug:"/components/activity-indicator",permalink:"/react-native-kitra/docs/next/components/activity-indicator",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/docs/components/activity-indicator.md",tags:[],version:"current",lastUpdatedAt:1709646294,formattedLastUpdatedAt:"Mar 5, 2024",sidebarPosition:2,frontMatter:{sidebar_position:2},sidebar:"ComponentsSidebar",previous:{title:"Accordion List",permalink:"/react-native-kitra/docs/next/components/accordion-list"},next:{title:"Avatar",permalink:"/react-native-kitra/docs/next/components/avatar"}},s={},d=[{value:"Import",id:"import",level:3},{value:"Usage",id:"usage",level:3},{value:"Props",id:"props",level:3}];function l(t){const e={a:"a",code:"code",h1:"h1",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,r.a)(),...t.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(e.h1,{id:"activity-indicator",children:"Activity Indicator"}),"\n",(0,i.jsxs)(e.p,{children:["The ",(0,i.jsx)(e.strong,{children:"Activity Indicator"})," component is displays loading indicator."]}),"\n",(0,i.jsx)(e.h3,{id:"import",children:"Import"}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-js",children:"import { ActivityIndicator } from '@tra-tech/react-native-kitra';\n"})}),"\n",(0,i.jsx)(e.h3,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-js",children:"import { ActivityIndicator } from '@tra-tech/react-native-kitra';\n\nconst App = () => (\n \n);\n\nexport default App;\n\n"})}),"\n",(0,i.jsx)(e.h3,{id:"props",children:"Props"}),"\n",(0,i.jsxs)(e.table,{children:[(0,i.jsx)(e.thead,{children:(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.th,{children:"Prop name"}),(0,i.jsx)(e.th,{children:"Type"}),(0,i.jsx)(e.th,{children:"Required"}),(0,i.jsx)(e.th,{children:"Description"})]})}),(0,i.jsxs)(e.tbody,{children:[(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:"children"}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.a,{href:"https://reactnative.dev/docs/react-node",children:(0,i.jsx)(e.code,{children:"React.ReactNode"})})}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{children:"Loading indicator to display."})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:"theme"}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"UITheme "})}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{children:"The theme to use for the component."})]})]})]})]})}function h(t={}){const{wrapper:e}={...(0,r.a)(),...t.components};return e?(0,i.jsx)(e,{...t,children:(0,i.jsx)(l,{...t})}):l(t)}},1151:(t,e,n)=>{n.d(e,{Z:()=>a,a:()=>o});var i=n(7294);const r={},c=i.createContext(r);function o(t){const e=i.useContext(c);return i.useMemo((function(){return"function"==typeof t?t(e):{...e,...t}}),[e,t])}function a(t){let e;return e=t.disableParentContext?"function"==typeof t.components?t.components(r):t.components||r:o(t.components),i.createElement(c.Provider,{value:e},t.children)}}}]); \ No newline at end of file diff --git a/assets/js/d90eaa59.7ec42543.js b/assets/js/d90eaa59.7ec42543.js new file mode 100644 index 0000000..3f652c6 --- /dev/null +++ b/assets/js/d90eaa59.7ec42543.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[3065],{3690:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>o,default:()=>h,frontMatter:()=>d,metadata:()=>i,toc:()=>l});var r=n(5893),s=n(1151);const d={sidebar_position:11},o="Menu",i={id:"components/menu",title:"Menu",description:"The Menu display a list of options. Their placement depends on the container location. They can be opened up or down.",source:"@site/docs/components/menu.md",sourceDirName:"components",slug:"/components/menu",permalink:"/react-native-kitra/docs/next/components/menu",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/docs/components/menu.md",tags:[],version:"current",lastUpdatedAt:1709646294,formattedLastUpdatedAt:"Mar 5, 2024",sidebarPosition:11,frontMatter:{sidebar_position:11},sidebar:"ComponentsSidebar",previous:{title:"Icon",permalink:"/react-native-kitra/docs/next/components/icon"},next:{title:"Modal",permalink:"/react-native-kitra/docs/next/components/modal"}},c={},l=[{value:"Import",id:"import",level:3},{value:"Usage",id:"usage",level:3},{value:"Props",id:"props",level:3}];function a(e){const t={a:"a",code:"code",h1:"h1",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,s.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h1,{id:"menu",children:"Menu"}),"\n",(0,r.jsxs)(t.p,{children:["The ",(0,r.jsx)(t.strong,{children:"Menu"})," display a list of options. Their placement depends on the container location. They can be opened up or down."]}),"\n",(0,r.jsx)(t.h3,{id:"import",children:"Import"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"import { Menu } from '@tra-tech/react-native-kitra';\n"})}),"\n",(0,r.jsx)(t.h3,{id:"usage",children:"Usage"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:'import { Menu, Icon } from \'@tra-tech/react-native-kitra\';\nimport { View } from \'react-native\';\n\nconst MenuData = [ \n{ label: \'Add\',left: ,right: ,onPress(){console.log(\'pressed\')}},\n{ label: \'Delete\', left: },\n{ label: \'Update\', left: },\n{ label: \'Skip\', right: }];\n\nconst App = () => (\n \n }\n labelStyle={{ color: \'#D7D1E9\' }}\n dividerColor="#EDEAF8"\n items={MenuData}\n />\n \n);\n\nexport default App;\n'})}),"\n",(0,r.jsx)(t.h3,{id:"props",children:"Props"}),"\n",(0,r.jsxs)(t.table,{children:[(0,r.jsx)(t.thead,{children:(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.th,{children:"Prop name"}),(0,r.jsx)(t.th,{children:"Type"}),(0,r.jsx)(t.th,{children:"Required"}),(0,r.jsx)(t.th,{children:"Description"})]})}),(0,r.jsxs)(t.tbody,{children:[(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"items"}),(0,r.jsxs)(t.td,{children:[(0,r.jsx)(t.code,{children:"Array<{label:string,"}),(0,r.jsx)("br",{}),(0,r.jsx)(t.code,{children:" left?: React.ReactNode, right?:React.ReactNode, onPress ?: ()=>void}>"})]}),(0,r.jsx)(t.td,{children:"Yes"}),(0,r.jsx)(t.td,{children:"Items to be listed in the menu."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"containerStyle"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,r.jsx)(t.code,{children:"StyleProp"})})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"Additional styles to apply to the menu container."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"labelStyle"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.a,{href:"https://reactnative.dev/docs/text-style-props",children:(0,r.jsx)(t.code,{children:"StyleProp"})})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"Additional styles to apply to the label text."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"rowStyle"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.a,{href:"https://reactnative.dev/docs/text-style-props",children:(0,r.jsx)(t.code,{children:"StyleProp"})})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"Additional styles to apply to the row container."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"dividerColor"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"string"})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"Color of divider."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"menuStyle"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,r.jsx)(t.code,{children:"StyleProp"})})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"Additional styles to apply to the menu."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"button"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.a,{href:"https://reactnative.dev/docs/react-node",children:(0,r.jsx)(t.code,{children:"(isOpen: boolean)=> React.ReactNode"})})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"This button opens the menu. It also returns whether the menu is open or closed."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"closeOnPress"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"boolean "})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"Indicates that it should close when an option is selected"})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"theme"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"UITheme "})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"The theme to use for the component."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"typography"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"UITypography "})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"The typography to use for the component."})]})]})]})]})}function h(e={}){const{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(a,{...e})}):a(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>i,a:()=>o});var r=n(7294);const s={},d=r.createContext(s);function o(e){const t=r.useContext(d);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:o(e.components),r.createElement(d.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/d90eaa59.8117bd13.js b/assets/js/d90eaa59.8117bd13.js deleted file mode 100644 index 452d233..0000000 --- a/assets/js/d90eaa59.8117bd13.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[3065],{3690:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>o,default:()=>h,frontMatter:()=>d,metadata:()=>i,toc:()=>l});var s=n(5893),r=n(1151);const d={sidebar_position:11},o="Menu",i={id:"components/menu",title:"Menu",description:"The Menu display a list of options. Their placement depends on the container location. They can be opened up or down.",source:"@site/docs/components/menu.md",sourceDirName:"components",slug:"/components/menu",permalink:"/react-native-kitra/docs/next/components/menu",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/docs/components/menu.md",tags:[],version:"current",lastUpdatedAt:1707292585,formattedLastUpdatedAt:"Feb 7, 2024",sidebarPosition:11,frontMatter:{sidebar_position:11},sidebar:"ComponentsSidebar",previous:{title:"Icon",permalink:"/react-native-kitra/docs/next/components/icon"},next:{title:"Modal",permalink:"/react-native-kitra/docs/next/components/modal"}},c={},l=[{value:"Import",id:"import",level:3},{value:"Usage",id:"usage",level:3},{value:"Props",id:"props",level:3}];function a(e){const t={a:"a",code:"code",h1:"h1",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h1,{id:"menu",children:"Menu"}),"\n",(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.strong,{children:"Menu"})," display a list of options. Their placement depends on the container location. They can be opened up or down."]}),"\n",(0,s.jsx)(t.h3,{id:"import",children:"Import"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",children:"import { Menu } from '@tra-tech/react-native-kitra';\n"})}),"\n",(0,s.jsx)(t.h3,{id:"usage",children:"Usage"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",children:'import { Menu, Icon } from \'@tra-tech/react-native-kitra\';\nimport { View } from \'react-native\';\n\nconst MenuData = [ \n{ label: \'Add\',left: ,right: ,onPress(){console.log(\'pressed\')}},\n{ label: \'Delete\', left: },\n{ label: \'Update\', left: },\n{ label: \'Skip\', right: }];\n\nconst App = () => (\n \n }\n labelStyle={{ color: \'#D7D1E9\' }}\n dividerColor="#EDEAF8"\n items={MenuData}\n />\n \n);\n\nexport default App;\n'})}),"\n",(0,s.jsx)(t.h3,{id:"props",children:"Props"}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{children:"Prop name"}),(0,s.jsx)(t.th,{children:"Type"}),(0,s.jsx)(t.th,{children:"Required"}),(0,s.jsx)(t.th,{children:"Description"})]})}),(0,s.jsxs)(t.tbody,{children:[(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"items"}),(0,s.jsxs)(t.td,{children:[(0,s.jsx)(t.code,{children:"Array<{label:string,"}),(0,s.jsx)("br",{}),(0,s.jsx)(t.code,{children:" left?: React.ReactNode, right?:React.ReactNode, onPress ?: ()=>void}>"})]}),(0,s.jsx)(t.td,{children:"Yes"}),(0,s.jsx)(t.td,{children:"Items to be listed in the menu."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"containerStyle"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,s.jsx)(t.code,{children:"StyleProp"})})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"Additional styles to apply to the menu container."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"labelStyle"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"https://reactnative.dev/docs/text-style-props",children:(0,s.jsx)(t.code,{children:"StyleProp"})})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"Additional styles to apply to the label text."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"rowStyle"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"https://reactnative.dev/docs/text-style-props",children:(0,s.jsx)(t.code,{children:"StyleProp"})})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"Additional styles to apply to the row container."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"dividerColor"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"string"})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"Color of divider."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"menuStyle"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,s.jsx)(t.code,{children:"StyleProp"})})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"Additional styles to apply to the menu."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"button"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"https://reactnative.dev/docs/react-node",children:(0,s.jsx)(t.code,{children:"(isOpen: boolean)=> React.ReactNode"})})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"This button opens the menu. It also returns whether the menu is open or closed."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"closeOnPress"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"boolean "})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"Indicates that it should close when an option is selected"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"theme"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"UITheme "})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"The theme to use for the component."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"typography"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"UITypography "})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"The typography to use for the component."})]})]})]})]})}function h(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(a,{...e})}):a(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>i,a:()=>o});var s=n(7294);const r={},d=s.createContext(r);function o(e){const t=s.useContext(d);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),s.createElement(d.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/dab7cbba.def59de6.js b/assets/js/dab7cbba.4f2edf45.js similarity index 97% rename from assets/js/dab7cbba.def59de6.js rename to assets/js/dab7cbba.4f2edf45.js index 925953f..7041995 100644 --- a/assets/js/dab7cbba.def59de6.js +++ b/assets/js/dab7cbba.4f2edf45.js @@ -1 +1 @@ -"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[939],{8462:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>i,contentTitle:()=>r,default:()=>a,frontMatter:()=>s,metadata:()=>d,toc:()=>h});var c=n(5893),o=n(1151);const s={sidebar_position:6},r="CheckBox",d={id:"components/checkbox",title:"CheckBox",description:"The CheckBox component is a UI element that allows the user to toggle between two states: checked and unchecked.",source:"@site/versioned_docs/version-1.x/components/checkbox.md",sourceDirName:"components",slug:"/components/checkbox",permalink:"/react-native-kitra/docs/components/checkbox",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/versioned_docs/version-1.x/components/checkbox.md",tags:[],version:"1.x",lastUpdatedAt:1707292585,formattedLastUpdatedAt:"Feb 7, 2024",sidebarPosition:6,frontMatter:{sidebar_position:6},sidebar:"ComponentsSidebar",previous:{title:"Button",permalink:"/react-native-kitra/docs/components/button"},next:{title:"Chip",permalink:"/react-native-kitra/docs/components/chip"}},i={},h=[{value:"Import",id:"import",level:3},{value:"Usage",id:"usage",level:3},{value:"Props",id:"props",level:3}];function l(e){const t={a:"a",code:"code",h1:"h1",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,o.a)(),...e.components};return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(t.h1,{id:"checkbox",children:"CheckBox"}),"\n",(0,c.jsxs)(t.p,{children:["The ",(0,c.jsx)(t.strong,{children:"CheckBox"})," component is a UI element that allows the user to toggle between two states: checked and unchecked."]}),"\n",(0,c.jsx)(t.h3,{id:"import",children:"Import"}),"\n",(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:"language-js",children:"import { CheckBox } from '@tra-tech/react-native-kitra';\n"})}),"\n",(0,c.jsx)(t.h3,{id:"usage",children:"Usage"}),"\n",(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:"language-js",children:"import { CheckBox } from '@tra-tech/react-native-kitra';\nimport { useState } from 'react';\nimport { View } from 'react-native';\n\nconst App = () => {\n const [value, setValue] = useState(false);\n\n return (\n \n console.log(event)}\n onPress={() => setValue(prev => !prev)}\n iconColor=\"red\"\n />\n \n );\n};\n\nexport default App;\n\n"})}),"\n",(0,c.jsx)(t.h3,{id:"props",children:"Props"}),"\n",(0,c.jsxs)(t.table,{children:[(0,c.jsx)(t.thead,{children:(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.th,{children:"Prop name"}),(0,c.jsx)(t.th,{children:"Type"}),(0,c.jsx)(t.th,{children:"Required"}),(0,c.jsx)(t.th,{children:"Description"})]})}),(0,c.jsxs)(t.tbody,{children:[(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:"value"}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:"boolean"})}),(0,c.jsx)(t.td,{children:"No"}),(0,c.jsx)(t.td,{children:"Determines whether the checkbox is checked or unchecked"})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:"onChange"}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:"(value: boolean) => void"})}),(0,c.jsx)(t.td,{children:"No"}),(0,c.jsx)(t.td,{children:"A callback function that is called when the checkbox is pressed, with the new state value as an argument"})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:"style"}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,c.jsx)(t.code,{children:"StyleProp"})})}),(0,c.jsx)(t.td,{children:"No"}),(0,c.jsx)(t.td,{children:"Additional styles to apply to the checkbox container"})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:"disabled"}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:"boolean"})}),(0,c.jsx)(t.td,{children:"No"}),(0,c.jsx)(t.td,{children:"Determines whether the checkbox is disabled or not"})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:"iconColor"}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:"string"})}),(0,c.jsx)(t.td,{children:"No"}),(0,c.jsx)(t.td,{children:"The color of the checkmark icon"})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:"theme"}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:"UITheme"})}),(0,c.jsx)(t.td,{children:"No"}),(0,c.jsx)(t.td,{children:"An object containing the color palette used for the checkbox"})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:"...TouchableOpacityProps"}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.a,{href:"https://reactnative.dev/docs/touchableopacity#props",children:(0,c.jsx)(t.code,{children:"...TouchableOpacityProps"})})}),(0,c.jsx)(t.td,{children:"No"}),(0,c.jsxs)(t.td,{children:["Any additional props to be passed to the underlying ",(0,c.jsx)(t.code,{children:"TouchableOpacity"})," component."]})]})]})]})]})}function a(e={}){const{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,c.jsx)(t,{...e,children:(0,c.jsx)(l,{...e})}):l(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>d,a:()=>r});var c=n(7294);const o={},s=c.createContext(o);function r(e){const t=c.useContext(s);return c.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function d(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:r(e.components),c.createElement(s.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[939],{8462:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>i,contentTitle:()=>r,default:()=>a,frontMatter:()=>s,metadata:()=>d,toc:()=>h});var c=n(5893),o=n(1151);const s={sidebar_position:6},r="CheckBox",d={id:"components/checkbox",title:"CheckBox",description:"The CheckBox component is a UI element that allows the user to toggle between two states: checked and unchecked.",source:"@site/versioned_docs/version-1.x/components/checkbox.md",sourceDirName:"components",slug:"/components/checkbox",permalink:"/react-native-kitra/docs/components/checkbox",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/versioned_docs/version-1.x/components/checkbox.md",tags:[],version:"1.x",lastUpdatedAt:1709646294,formattedLastUpdatedAt:"Mar 5, 2024",sidebarPosition:6,frontMatter:{sidebar_position:6},sidebar:"ComponentsSidebar",previous:{title:"Button",permalink:"/react-native-kitra/docs/components/button"},next:{title:"Chip",permalink:"/react-native-kitra/docs/components/chip"}},i={},h=[{value:"Import",id:"import",level:3},{value:"Usage",id:"usage",level:3},{value:"Props",id:"props",level:3}];function l(e){const t={a:"a",code:"code",h1:"h1",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,o.a)(),...e.components};return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(t.h1,{id:"checkbox",children:"CheckBox"}),"\n",(0,c.jsxs)(t.p,{children:["The ",(0,c.jsx)(t.strong,{children:"CheckBox"})," component is a UI element that allows the user to toggle between two states: checked and unchecked."]}),"\n",(0,c.jsx)(t.h3,{id:"import",children:"Import"}),"\n",(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:"language-js",children:"import { CheckBox } from '@tra-tech/react-native-kitra';\n"})}),"\n",(0,c.jsx)(t.h3,{id:"usage",children:"Usage"}),"\n",(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:"language-js",children:"import { CheckBox } from '@tra-tech/react-native-kitra';\nimport { useState } from 'react';\nimport { View } from 'react-native';\n\nconst App = () => {\n const [value, setValue] = useState(false);\n\n return (\n \n console.log(event)}\n onPress={() => setValue(prev => !prev)}\n iconColor=\"red\"\n />\n \n );\n};\n\nexport default App;\n\n"})}),"\n",(0,c.jsx)(t.h3,{id:"props",children:"Props"}),"\n",(0,c.jsxs)(t.table,{children:[(0,c.jsx)(t.thead,{children:(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.th,{children:"Prop name"}),(0,c.jsx)(t.th,{children:"Type"}),(0,c.jsx)(t.th,{children:"Required"}),(0,c.jsx)(t.th,{children:"Description"})]})}),(0,c.jsxs)(t.tbody,{children:[(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:"value"}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:"boolean"})}),(0,c.jsx)(t.td,{children:"No"}),(0,c.jsx)(t.td,{children:"Determines whether the checkbox is checked or unchecked"})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:"onChange"}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:"(value: boolean) => void"})}),(0,c.jsx)(t.td,{children:"No"}),(0,c.jsx)(t.td,{children:"A callback function that is called when the checkbox is pressed, with the new state value as an argument"})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:"style"}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,c.jsx)(t.code,{children:"StyleProp"})})}),(0,c.jsx)(t.td,{children:"No"}),(0,c.jsx)(t.td,{children:"Additional styles to apply to the checkbox container"})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:"disabled"}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:"boolean"})}),(0,c.jsx)(t.td,{children:"No"}),(0,c.jsx)(t.td,{children:"Determines whether the checkbox is disabled or not"})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:"iconColor"}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:"string"})}),(0,c.jsx)(t.td,{children:"No"}),(0,c.jsx)(t.td,{children:"The color of the checkmark icon"})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:"theme"}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:"UITheme"})}),(0,c.jsx)(t.td,{children:"No"}),(0,c.jsx)(t.td,{children:"An object containing the color palette used for the checkbox"})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:"...TouchableOpacityProps"}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.a,{href:"https://reactnative.dev/docs/touchableopacity#props",children:(0,c.jsx)(t.code,{children:"...TouchableOpacityProps"})})}),(0,c.jsx)(t.td,{children:"No"}),(0,c.jsxs)(t.td,{children:["Any additional props to be passed to the underlying ",(0,c.jsx)(t.code,{children:"TouchableOpacity"})," component."]})]})]})]})]})}function a(e={}){const{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,c.jsx)(t,{...e,children:(0,c.jsx)(l,{...e})}):l(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>d,a:()=>r});var c=n(7294);const o={},s=c.createContext(o);function r(e){const t=c.useContext(s);return c.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function d(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:r(e.components),c.createElement(s.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/dd0da6b8.efd5a896.js b/assets/js/dd0da6b8.2971a921.js similarity index 99% rename from assets/js/dd0da6b8.efd5a896.js rename to assets/js/dd0da6b8.2971a921.js index 3d6dbfa..4d62618 100644 --- a/assets/js/dd0da6b8.efd5a896.js +++ b/assets/js/dd0da6b8.2971a921.js @@ -1 +1 @@ -"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[3371],{759:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>o,default:()=>a,frontMatter:()=>r,metadata:()=>d,toc:()=>l});var s=n(5893),i=n(1151);const r={sidebar_position:7},o="Chip",d={id:"components/chip",title:"Chip",description:"The Chips can be used to display entities in small blocks.",source:"@site/versioned_docs/version-1.x/components/chip.md",sourceDirName:"components",slug:"/components/chip",permalink:"/react-native-kitra/docs/components/chip",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/versioned_docs/version-1.x/components/chip.md",tags:[],version:"1.x",lastUpdatedAt:1707292585,formattedLastUpdatedAt:"Feb 7, 2024",sidebarPosition:7,frontMatter:{sidebar_position:7},sidebar:"ComponentsSidebar",previous:{title:"CheckBox",permalink:"/react-native-kitra/docs/components/checkbox"},next:{title:"Divider",permalink:"/react-native-kitra/docs/components/divider"}},c={},l=[{value:"Import",id:"import",level:3},{value:"Usage",id:"usage",level:3},{value:"Props",id:"props",level:3}];function h(e){const t={a:"a",code:"code",h1:"h1",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,i.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h1,{id:"chip",children:"Chip"}),"\n",(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.strong,{children:"Chips"})," can be used to display entities in small blocks."]}),"\n",(0,s.jsx)(t.h3,{id:"import",children:"Import"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",children:"import { Chip } from '@tra-tech/react-native-kitra';\n"})}),"\n",(0,s.jsx)(t.h3,{id:"usage",children:"Usage"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",children:"import { Chip } from '@tra-tech/react-native-kitra';\nimport { View } from 'react-native';\n\nconst App = () => (\n \n console.log(e)}\n colorStyle={{ backgroundColor: 'tomato', selectBackgroundColor: 'white', selectTitleColor: 'tomato', titleColor: 'white' }}\n />\n \n);\n\nexport default App;\n"})}),"\n",(0,s.jsx)(t.h3,{id:"props",children:"Props"}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{children:"Prop name"}),(0,s.jsx)(t.th,{children:"Type"}),(0,s.jsx)(t.th,{children:"Required"}),(0,s.jsx)(t.th,{children:"Description"})]})}),(0,s.jsxs)(t.tbody,{children:[(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"label"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"string"})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"Text of chip."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"value"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"boolean"})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsxs)(t.td,{children:["Status of chip. Default value: ",(0,s.jsx)(t.code,{children:"'false'"})]})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"textStyle"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"https://reactnative.dev/docs/text-style-props",children:(0,s.jsx)(t.code,{children:"StyleProp"})})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"Additional styles to apply to the chip."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"style"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,s.jsx)(t.code,{children:"StyleProp"})})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"Additional styles to apply to the label."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"icon"}),(0,s.jsxs)(t.td,{children:[(0,s.jsx)(t.code,{children:" { iconName: string,"}),(0,s.jsx)("br",{}),(0,s.jsx)(t.code,{children:" iconType: IconType,"}),(0,s.jsx)("br",{}),(0,s.jsx)(t.code,{children:" iconPosition: 'left' | 'right'"})," }"]}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"Adds an icon to a component with options for specifying the icon's name, type, and position , enabling quick customization of the component's appearance."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"colorStyle"}),(0,s.jsxs)(t.td,{children:[(0,s.jsx)(t.code,{children:" { backgroundColor: string, selectBackgroundColor: string, selectTitleColor: string,"}),(0,s.jsx)("br",{}),(0,s.jsx)(t.code,{children:"titleColor: string }"})]}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"Styles for chip color."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"size"}),(0,s.jsx)(t.td,{children:(0,s.jsx)("code",{children:" 'small' | 'medium' | 'large'"})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsxs)(t.td,{children:["The size of the chip. Default value: ",(0,s.jsx)(t.code,{children:"'small'"})]})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"onChange"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"(event:boolean)=> void"})}),(0,s.jsx)(t.td,{children:"Yes"}),(0,s.jsx)(t.td,{children:"Returns whether the chip is selected."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"disable"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"boolean "})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsxs)(t.td,{children:["If true the user won't be able to toggle the chip. Default value: ",(0,s.jsx)(t.code,{children:"false"})]})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"theme"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"UITheme "})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"The theme to use for the component."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"typography"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"UITypography"})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"The typography to use for the component."})]})]})]})]})}function a(e={}){const{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(h,{...e})}):h(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>d,a:()=>o});var s=n(7294);const i={},r=s.createContext(i);function o(e){const t=s.useContext(r);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function d(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:o(e.components),s.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[3371],{759:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>o,default:()=>a,frontMatter:()=>r,metadata:()=>d,toc:()=>l});var s=n(5893),i=n(1151);const r={sidebar_position:7},o="Chip",d={id:"components/chip",title:"Chip",description:"The Chips can be used to display entities in small blocks.",source:"@site/versioned_docs/version-1.x/components/chip.md",sourceDirName:"components",slug:"/components/chip",permalink:"/react-native-kitra/docs/components/chip",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/versioned_docs/version-1.x/components/chip.md",tags:[],version:"1.x",lastUpdatedAt:1709646294,formattedLastUpdatedAt:"Mar 5, 2024",sidebarPosition:7,frontMatter:{sidebar_position:7},sidebar:"ComponentsSidebar",previous:{title:"CheckBox",permalink:"/react-native-kitra/docs/components/checkbox"},next:{title:"Divider",permalink:"/react-native-kitra/docs/components/divider"}},c={},l=[{value:"Import",id:"import",level:3},{value:"Usage",id:"usage",level:3},{value:"Props",id:"props",level:3}];function h(e){const t={a:"a",code:"code",h1:"h1",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,i.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h1,{id:"chip",children:"Chip"}),"\n",(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.strong,{children:"Chips"})," can be used to display entities in small blocks."]}),"\n",(0,s.jsx)(t.h3,{id:"import",children:"Import"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",children:"import { Chip } from '@tra-tech/react-native-kitra';\n"})}),"\n",(0,s.jsx)(t.h3,{id:"usage",children:"Usage"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",children:"import { Chip } from '@tra-tech/react-native-kitra';\nimport { View } from 'react-native';\n\nconst App = () => (\n \n console.log(e)}\n colorStyle={{ backgroundColor: 'tomato', selectBackgroundColor: 'white', selectTitleColor: 'tomato', titleColor: 'white' }}\n />\n \n);\n\nexport default App;\n"})}),"\n",(0,s.jsx)(t.h3,{id:"props",children:"Props"}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{children:"Prop name"}),(0,s.jsx)(t.th,{children:"Type"}),(0,s.jsx)(t.th,{children:"Required"}),(0,s.jsx)(t.th,{children:"Description"})]})}),(0,s.jsxs)(t.tbody,{children:[(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"label"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"string"})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"Text of chip."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"value"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"boolean"})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsxs)(t.td,{children:["Status of chip. Default value: ",(0,s.jsx)(t.code,{children:"'false'"})]})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"textStyle"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"https://reactnative.dev/docs/text-style-props",children:(0,s.jsx)(t.code,{children:"StyleProp"})})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"Additional styles to apply to the chip."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"style"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,s.jsx)(t.code,{children:"StyleProp"})})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"Additional styles to apply to the label."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"icon"}),(0,s.jsxs)(t.td,{children:[(0,s.jsx)(t.code,{children:" { iconName: string,"}),(0,s.jsx)("br",{}),(0,s.jsx)(t.code,{children:" iconType: IconType,"}),(0,s.jsx)("br",{}),(0,s.jsx)(t.code,{children:" iconPosition: 'left' | 'right'"})," }"]}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"Adds an icon to a component with options for specifying the icon's name, type, and position , enabling quick customization of the component's appearance."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"colorStyle"}),(0,s.jsxs)(t.td,{children:[(0,s.jsx)(t.code,{children:" { backgroundColor: string, selectBackgroundColor: string, selectTitleColor: string,"}),(0,s.jsx)("br",{}),(0,s.jsx)(t.code,{children:"titleColor: string }"})]}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"Styles for chip color."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"size"}),(0,s.jsx)(t.td,{children:(0,s.jsx)("code",{children:" 'small' | 'medium' | 'large'"})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsxs)(t.td,{children:["The size of the chip. Default value: ",(0,s.jsx)(t.code,{children:"'small'"})]})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"onChange"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"(event:boolean)=> void"})}),(0,s.jsx)(t.td,{children:"Yes"}),(0,s.jsx)(t.td,{children:"Returns whether the chip is selected."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"disable"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"boolean "})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsxs)(t.td,{children:["If true the user won't be able to toggle the chip. Default value: ",(0,s.jsx)(t.code,{children:"false"})]})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"theme"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"UITheme "})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"The theme to use for the component."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"typography"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"UITypography"})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"The typography to use for the component."})]})]})]})]})}function a(e={}){const{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(h,{...e})}):h(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>d,a:()=>o});var s=n(7294);const i={},r=s.createContext(i);function o(e){const t=s.useContext(r);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function d(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:o(e.components),s.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/df866062.ce988887.js b/assets/js/df866062.b009760e.js similarity index 99% rename from assets/js/df866062.ce988887.js rename to assets/js/df866062.b009760e.js index aad183e..2584c80 100644 --- a/assets/js/df866062.ce988887.js +++ b/assets/js/df866062.b009760e.js @@ -1 +1 @@ -"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[1793],{7877:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>c,default:()=>h,frontMatter:()=>o,metadata:()=>s,toc:()=>a});var i=t(5893),r=t(1151);const o={sidebar_position:19},c="Swipe",s={id:"components/swipe",title:"Swipe",description:"The Swipe component is a swipeable container for content with left and/or right swipe actions.",source:"@site/docs/components/swipe.md",sourceDirName:"components",slug:"/components/swipe",permalink:"/react-native-kitra/docs/next/components/swipe",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/docs/components/swipe.md",tags:[],version:"current",lastUpdatedAt:1707292585,formattedLastUpdatedAt:"Feb 7, 2024",sidebarPosition:19,frontMatter:{sidebar_position:19},sidebar:"ComponentsSidebar",previous:{title:"Speed Dial",permalink:"/react-native-kitra/docs/next/components/speed-dial"},next:{title:"Switch",permalink:"/react-native-kitra/docs/next/components/switch"}},d={},a=[{value:"Import",id:"import",level:3},{value:"Usage",id:"usage",level:3},{value:"Props",id:"props",level:3},{value:"Types",id:"types",level:3}];function l(e){const n={a:"a",code:"code",h1:"h1",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h1,{id:"swipe",children:"Swipe"}),"\n",(0,i.jsxs)(n.p,{children:["The ",(0,i.jsx)(n.strong,{children:"Swipe"})," component is a swipeable container for content with left and/or right swipe actions."]}),"\n",(0,i.jsx)(n.h3,{id:"import",children:"Import"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"import { Swipe } from '@tra-tech/react-native-kitra';\n"})}),"\n",(0,i.jsx)(n.h3,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"import { Swipe, Icon } from '@tra-tech/react-native-kitra';\nimport { TouchableOpacity, Image } from 'react-native';\n\nconst App = () => (\n ,\n style: {\n backgroundColor: '#67A7C1',\n width: 82,\n },\n },\n {\n text: 'Sil',\n style: {\n backgroundColor: 'red',\n },\n },\n {\n icon: ,\n text: 'Di\u011fer',\n style: {\n backgroundColor: 'orange',\n },\n },\n ]}\n leftAction={{\n icon: ,\n text: 'Sil',\n style: {\n backgroundColor: '#FF3434',\n },\n }}\n >\n \n \n \n \n);\n\nexport default App;\n"})}),"\n",(0,i.jsx)(n.h3,{id:"props",children:"Props"}),"\n",(0,i.jsxs)(n.table,{children:[(0,i.jsx)(n.thead,{children:(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.th,{children:"Name"}),(0,i.jsx)(n.th,{children:"Type"}),(0,i.jsx)(n.th,{children:"Required"}),(0,i.jsx)(n.th,{children:"Description"})]})}),(0,i.jsxs)(n.tbody,{children:[(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:"children"}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.a,{href:"https://reactnative.dev/docs/react-node",children:(0,i.jsx)(n.code,{children:"React.ReactNode"})})}),(0,i.jsx)(n.td,{children:"No"}),(0,i.jsxs)(n.td,{children:["The content to be wrapped by the ",(0,i.jsx)(n.code,{children:"Swipeable"})," component."]})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:"variant"}),(0,i.jsxs)(n.td,{children:[(0,i.jsx)(n.code,{children:"'radius'|"}),(0,i.jsx)("br",{}),(0,i.jsx)(n.code,{children:"'no-radius' "})]}),(0,i.jsx)(n.td,{children:"No"}),(0,i.jsxs)(n.td,{children:["Determines whether to use a rounded border radius on the component. Default value: ",(0,i.jsx)(n.code,{children:"'no-radius'"})]})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:"rightActions"}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"Array"})}),(0,i.jsx)(n.td,{children:"No"}),(0,i.jsxs)(n.td,{children:["An array of objects representing the right swipe actions to be rendered. Each object can optionally contain a ",(0,i.jsx)(n.code,{children:"text"})," string and can optionally contain an ",(0,i.jsx)(n.code,{children:"icon"})," React component."]})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:"leftAction"}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"ActionProps"})}),(0,i.jsx)(n.td,{children:"No"}),(0,i.jsxs)(n.td,{children:["An object representing the left swipe action to be rendered. The object can optionally contain a ",(0,i.jsx)(n.code,{children:"text"})," string and can optionally contain an ",(0,i.jsx)(n.code,{children:"icon"})," React component."]})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:"theme"}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"UITheme"})}),(0,i.jsx)(n.td,{children:"No"}),(0,i.jsx)(n.td,{children:"An object containing colors and other styling properties used by the component."})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:"typography"}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"UITypography"})}),(0,i.jsx)(n.td,{children:"No"}),(0,i.jsx)(n.td,{children:"An object containing font sizes and styles used by the component."})]})]})]}),"\n",(0,i.jsx)(n.h3,{id:"types",children:"Types"}),"\n",(0,i.jsxs)(n.table,{children:[(0,i.jsx)(n.thead,{children:(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.th,{children:"Name"}),(0,i.jsx)(n.th,{children:"Type"})]})}),(0,i.jsx)(n.tbody,{children:(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:"ActionProps"}),(0,i.jsxs)(n.td,{children:[(0,i.jsx)(n.code,{children:"text?: string, style?: StyleProp, icon?: React.ReactNode,"}),(0,i.jsx)("br",{}),(0,i.jsx)(n.code,{children:" textStyle?: StyleProp, onPress: (ref:React.RefObject)=>void"})]})]})})]})]})}function h(e={}){const{wrapper:n}={...(0,r.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(l,{...e})}):l(e)}},1151:(e,n,t)=>{t.d(n,{Z:()=>s,a:()=>c});var i=t(7294);const r={},o=i.createContext(r);function c(e){const n=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function s(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:c(e.components),i.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[1793],{7877:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>c,default:()=>h,frontMatter:()=>o,metadata:()=>s,toc:()=>a});var i=t(5893),r=t(1151);const o={sidebar_position:19},c="Swipe",s={id:"components/swipe",title:"Swipe",description:"The Swipe component is a swipeable container for content with left and/or right swipe actions.",source:"@site/docs/components/swipe.md",sourceDirName:"components",slug:"/components/swipe",permalink:"/react-native-kitra/docs/next/components/swipe",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/docs/components/swipe.md",tags:[],version:"current",lastUpdatedAt:1709646294,formattedLastUpdatedAt:"Mar 5, 2024",sidebarPosition:19,frontMatter:{sidebar_position:19},sidebar:"ComponentsSidebar",previous:{title:"Speed Dial",permalink:"/react-native-kitra/docs/next/components/speed-dial"},next:{title:"Switch",permalink:"/react-native-kitra/docs/next/components/switch"}},d={},a=[{value:"Import",id:"import",level:3},{value:"Usage",id:"usage",level:3},{value:"Props",id:"props",level:3},{value:"Types",id:"types",level:3}];function l(e){const n={a:"a",code:"code",h1:"h1",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h1,{id:"swipe",children:"Swipe"}),"\n",(0,i.jsxs)(n.p,{children:["The ",(0,i.jsx)(n.strong,{children:"Swipe"})," component is a swipeable container for content with left and/or right swipe actions."]}),"\n",(0,i.jsx)(n.h3,{id:"import",children:"Import"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"import { Swipe } from '@tra-tech/react-native-kitra';\n"})}),"\n",(0,i.jsx)(n.h3,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"import { Swipe, Icon } from '@tra-tech/react-native-kitra';\nimport { TouchableOpacity, Image } from 'react-native';\n\nconst App = () => (\n ,\n style: {\n backgroundColor: '#67A7C1',\n width: 82,\n },\n },\n {\n text: 'Sil',\n style: {\n backgroundColor: 'red',\n },\n },\n {\n icon: ,\n text: 'Di\u011fer',\n style: {\n backgroundColor: 'orange',\n },\n },\n ]}\n leftAction={{\n icon: ,\n text: 'Sil',\n style: {\n backgroundColor: '#FF3434',\n },\n }}\n >\n \n \n \n \n);\n\nexport default App;\n"})}),"\n",(0,i.jsx)(n.h3,{id:"props",children:"Props"}),"\n",(0,i.jsxs)(n.table,{children:[(0,i.jsx)(n.thead,{children:(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.th,{children:"Name"}),(0,i.jsx)(n.th,{children:"Type"}),(0,i.jsx)(n.th,{children:"Required"}),(0,i.jsx)(n.th,{children:"Description"})]})}),(0,i.jsxs)(n.tbody,{children:[(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:"children"}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.a,{href:"https://reactnative.dev/docs/react-node",children:(0,i.jsx)(n.code,{children:"React.ReactNode"})})}),(0,i.jsx)(n.td,{children:"No"}),(0,i.jsxs)(n.td,{children:["The content to be wrapped by the ",(0,i.jsx)(n.code,{children:"Swipeable"})," component."]})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:"variant"}),(0,i.jsxs)(n.td,{children:[(0,i.jsx)(n.code,{children:"'radius'|"}),(0,i.jsx)("br",{}),(0,i.jsx)(n.code,{children:"'no-radius' "})]}),(0,i.jsx)(n.td,{children:"No"}),(0,i.jsxs)(n.td,{children:["Determines whether to use a rounded border radius on the component. Default value: ",(0,i.jsx)(n.code,{children:"'no-radius'"})]})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:"rightActions"}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"Array"})}),(0,i.jsx)(n.td,{children:"No"}),(0,i.jsxs)(n.td,{children:["An array of objects representing the right swipe actions to be rendered. Each object can optionally contain a ",(0,i.jsx)(n.code,{children:"text"})," string and can optionally contain an ",(0,i.jsx)(n.code,{children:"icon"})," React component."]})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:"leftAction"}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"ActionProps"})}),(0,i.jsx)(n.td,{children:"No"}),(0,i.jsxs)(n.td,{children:["An object representing the left swipe action to be rendered. The object can optionally contain a ",(0,i.jsx)(n.code,{children:"text"})," string and can optionally contain an ",(0,i.jsx)(n.code,{children:"icon"})," React component."]})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:"theme"}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"UITheme"})}),(0,i.jsx)(n.td,{children:"No"}),(0,i.jsx)(n.td,{children:"An object containing colors and other styling properties used by the component."})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:"typography"}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"UITypography"})}),(0,i.jsx)(n.td,{children:"No"}),(0,i.jsx)(n.td,{children:"An object containing font sizes and styles used by the component."})]})]})]}),"\n",(0,i.jsx)(n.h3,{id:"types",children:"Types"}),"\n",(0,i.jsxs)(n.table,{children:[(0,i.jsx)(n.thead,{children:(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.th,{children:"Name"}),(0,i.jsx)(n.th,{children:"Type"})]})}),(0,i.jsx)(n.tbody,{children:(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:"ActionProps"}),(0,i.jsxs)(n.td,{children:[(0,i.jsx)(n.code,{children:"text?: string, style?: StyleProp, icon?: React.ReactNode,"}),(0,i.jsx)("br",{}),(0,i.jsx)(n.code,{children:" textStyle?: StyleProp, onPress: (ref:React.RefObject)=>void"})]})]})})]})]})}function h(e={}){const{wrapper:n}={...(0,r.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(l,{...e})}):l(e)}},1151:(e,n,t)=>{t.d(n,{Z:()=>s,a:()=>c});var i=t(7294);const r={},o=i.createContext(r);function c(e){const n=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function s(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:c(e.components),i.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/e306cb37.de363452.js b/assets/js/e306cb37.036087d4.js similarity index 99% rename from assets/js/e306cb37.de363452.js rename to assets/js/e306cb37.036087d4.js index 39c869b..7f533ac 100644 --- a/assets/js/e306cb37.de363452.js +++ b/assets/js/e306cb37.036087d4.js @@ -1 +1 @@ -"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[8802],{9213:(e,t,r)=>{r.r(t),r.d(t,{assets:()=>o,contentTitle:()=>d,default:()=>h,frontMatter:()=>s,metadata:()=>a,toc:()=>c});var n=r(5893),i=r(1151);const s={sidebar_position:3},d="Avatar",a={id:"components/avatar",title:"Avatar",description:"The Avatar component can display an image or initials in a circular or rounded rectangle shape. It also has a customizable badge that can be positioned at the top or bottom of the Avatar, and can display text or an icon. This component can be used in various applications that require a user profile picture or initials, such as social media or messaging apps.",source:"@site/versioned_docs/version-1.x/components/avatar.md",sourceDirName:"components",slug:"/components/avatar",permalink:"/react-native-kitra/docs/components/avatar",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/versioned_docs/version-1.x/components/avatar.md",tags:[],version:"1.x",lastUpdatedAt:1707292585,formattedLastUpdatedAt:"Feb 7, 2024",sidebarPosition:3,frontMatter:{sidebar_position:3},sidebar:"ComponentsSidebar",previous:{title:"Activity Indicator",permalink:"/react-native-kitra/docs/components/activity-indicator"},next:{title:"Badge",permalink:"/react-native-kitra/docs/components/badge"}},o={},c=[{value:"Import",id:"import",level:3},{value:"Usage",id:"usage",level:3},{value:"Props",id:"props",level:3},{value:"Avatar Group",id:"avatar-group",level:2},{value:"Import",id:"import-1",level:3},{value:"Usage",id:"usage-1",level:3},{value:"Props",id:"props-1",level:3}];function l(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,i.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.h1,{id:"avatar",children:"Avatar"}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.strong,{children:"Avatar"})," component can display an image or initials in a circular or rounded rectangle shape. It also has a customizable badge that can be positioned at the top or bottom of the Avatar, and can display text or an icon. This component can be used in various applications that require a user profile picture or initials, such as social media or messaging apps."]}),"\n",(0,n.jsx)(t.h3,{id:"import",children:"Import"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-js",children:"import { Avatar } from '@tra-tech/react-native-kitra';\n"})}),"\n",(0,n.jsx)(t.h3,{id:"usage",children:"Usage"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-js",children:"import { Avatar,Icon } from '@tra-tech/react-native-kitra';\nimport { View } from 'react-native';\n\nconst App = () => (\n \n }\n source={{ uri: 'https://randomuser.me/api/portraits/men/62.jpg' }}\n />\n \n);\n\nexport default App;\n"})}),"\n",(0,n.jsx)(t.h3,{id:"props",children:"Props"}),"\n",(0,n.jsxs)(t.table,{children:[(0,n.jsx)(t.thead,{children:(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.th,{children:"Prop name"}),(0,n.jsx)(t.th,{children:"Type"}),(0,n.jsx)(t.th,{children:"Required"}),(0,n.jsx)(t.th,{children:"Description"})]})}),(0,n.jsxs)(t.tbody,{children:[(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"size"}),(0,n.jsx)(t.td,{children:(0,n.jsx)("code",{children:"'small' | 'medium'"})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsxs)(t.td,{children:["The size of the avatar. Default value: ",(0,n.jsx)(t.code,{children:"'medium' "})]})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"source"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.a,{href:"https://reactnative.dev/docs/image#imagesource",children:(0,n.jsx)(t.code,{children:"ImageSourcePropType"})})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"Used to specify the image source."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"borderStyle"}),(0,n.jsx)(t.td,{children:(0,n.jsx)("code",{children:"'circular' | 'rounded'"})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsxs)(t.td,{children:["Specifies the border type of the avatar. Default value: ",(0,n.jsx)(t.code,{children:"'circular'"})]})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"avatarIcon"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"React.ReactNode "})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"Used to add icon to avatar."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"containerStyle"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,n.jsx)(t.code,{children:"StyleProp"})})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"Additional styles to apply to the avatar container."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"label"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"string"})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"Represents the initials of the name to be written on the avatar."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"labelStyle"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.a,{href:"https://reactnative.dev/docs/text-style-props",children:(0,n.jsx)(t.code,{children:"StyleProp"})})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"Additional styles to apply to the label text."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"badgePosition"}),(0,n.jsx)(t.td,{children:(0,n.jsx)("code",{children:"'top' | 'bottom'"})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"Badge component location."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"badgeStyle"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"{ containerStyle?: StyleProp, textStyle?: StyleProp } "})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"Additional styles to apply to the badge component."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"badgeContent"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"React.ReactNode "})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"Additional content to apply to the badge component."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"theme"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"UITheme "})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"The theme to use for the component."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"typography"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"UITypography "})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"The typography to use for the component."})]})]})]}),"\n",(0,n.jsx)(t.h2,{id:"avatar-group",children:"Avatar Group"}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.strong,{children:"Avatar Group"}),", used to list avatars side by side."]}),"\n",(0,n.jsx)(t.h3,{id:"import-1",children:"Import"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-js",children:"import { AvatarGroup } from '@tra-tech/react-native-kitra';\n"})}),"\n",(0,n.jsx)(t.h3,{id:"usage-1",children:"Usage"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-js",children:"import { AvatarGroup } from '@tra-tech/react-native-kitra';\nimport { View } from 'react-native';\n\nconst App = () => (\n \n \n \n);\nexport default App;\n \n"})}),"\n",(0,n.jsx)(t.h3,{id:"props-1",children:"Props"}),"\n",(0,n.jsxs)(t.table,{children:[(0,n.jsx)(t.thead,{children:(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.th,{children:"Prop name"}),(0,n.jsx)(t.th,{children:"Type"}),(0,n.jsx)(t.th,{children:"Required"}),(0,n.jsx)(t.th,{children:"Description"})]})}),(0,n.jsxs)(t.tbody,{children:[(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"avatarsType"}),(0,n.jsxs)(t.td,{children:[(0,n.jsx)(t.code,{children:"Array<{"}),(0,n.jsx)("br",{}),(0,n.jsx)(t.code,{children:" source?: ImageSourcePropType,"}),(0,n.jsx)("br",{}),(0,n.jsx)(t.code,{children:" borderStyle?: 'circular' | 'rounded',"}),(0,n.jsx)("br",{}),(0,n.jsx)(t.code,{children:" avatarIcon?: React.ReactNode,"}),(0,n.jsx)("br",{}),(0,n.jsx)(t.code,{children:" containerStyle?: StyleProp,"}),(0,n.jsx)("br",{}),(0,n.jsx)(t.code,{children:" label?: string,"}),(0,n.jsx)("br",{}),(0,n.jsx)(t.code,{children:" labelStyle?: StyleProp,"}),(0,n.jsx)("br",{}),(0,n.jsx)(t.code,{children:" badgePosition?: 'top' | 'bottom',"}),(0,n.jsx)("br",{}),(0,n.jsx)(t.code,{children:" badgeStyle?: { containerStyle?: StyleProp,"}),(0,n.jsx)("br",{}),(0,n.jsx)(t.code,{children:"textStyle?: StyleProp },"}),(0,n.jsx)("br",{}),(0,n.jsx)(t.code,{children:"badgeContent?: React.ReactNode "}),(0,n.jsx)("br",{}),(0,n.jsx)(t.code,{children:"}> "})]}),(0,n.jsx)(t.td,{children:"Yes"}),(0,n.jsx)(t.td,{children:"Takes avatar props into array."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"avatarLimit"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"number"})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsxs)(t.td,{children:["Limit of avatars to be listed. Default value: ",(0,n.jsx)(t.code,{children:"10"})]})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"limitContainerStyle"}),(0,n.jsx)(t.td,{children:(0,n.jsx)("code",{children:"'circular' | 'rounded'"})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"Additional styles to apply to the limit container."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"theme"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"UITheme "})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"The theme to use for the component."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"typography"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"UITypography "})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"The typography to use for the component."})]})]})]})]})}function h(e={}){const{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(l,{...e})}):l(e)}},1151:(e,t,r)=>{r.d(t,{Z:()=>a,a:()=>d});var n=r(7294);const i={},s=n.createContext(i);function d(e){const t=n.useContext(s);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:d(e.components),n.createElement(s.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[8802],{9213:(e,t,r)=>{r.r(t),r.d(t,{assets:()=>o,contentTitle:()=>d,default:()=>h,frontMatter:()=>s,metadata:()=>a,toc:()=>c});var n=r(5893),i=r(1151);const s={sidebar_position:3},d="Avatar",a={id:"components/avatar",title:"Avatar",description:"The Avatar component can display an image or initials in a circular or rounded rectangle shape. It also has a customizable badge that can be positioned at the top or bottom of the Avatar, and can display text or an icon. This component can be used in various applications that require a user profile picture or initials, such as social media or messaging apps.",source:"@site/versioned_docs/version-1.x/components/avatar.md",sourceDirName:"components",slug:"/components/avatar",permalink:"/react-native-kitra/docs/components/avatar",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/versioned_docs/version-1.x/components/avatar.md",tags:[],version:"1.x",lastUpdatedAt:1709646294,formattedLastUpdatedAt:"Mar 5, 2024",sidebarPosition:3,frontMatter:{sidebar_position:3},sidebar:"ComponentsSidebar",previous:{title:"Activity Indicator",permalink:"/react-native-kitra/docs/components/activity-indicator"},next:{title:"Badge",permalink:"/react-native-kitra/docs/components/badge"}},o={},c=[{value:"Import",id:"import",level:3},{value:"Usage",id:"usage",level:3},{value:"Props",id:"props",level:3},{value:"Avatar Group",id:"avatar-group",level:2},{value:"Import",id:"import-1",level:3},{value:"Usage",id:"usage-1",level:3},{value:"Props",id:"props-1",level:3}];function l(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,i.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.h1,{id:"avatar",children:"Avatar"}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.strong,{children:"Avatar"})," component can display an image or initials in a circular or rounded rectangle shape. It also has a customizable badge that can be positioned at the top or bottom of the Avatar, and can display text or an icon. This component can be used in various applications that require a user profile picture or initials, such as social media or messaging apps."]}),"\n",(0,n.jsx)(t.h3,{id:"import",children:"Import"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-js",children:"import { Avatar } from '@tra-tech/react-native-kitra';\n"})}),"\n",(0,n.jsx)(t.h3,{id:"usage",children:"Usage"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-js",children:"import { Avatar,Icon } from '@tra-tech/react-native-kitra';\nimport { View } from 'react-native';\n\nconst App = () => (\n \n }\n source={{ uri: 'https://randomuser.me/api/portraits/men/62.jpg' }}\n />\n \n);\n\nexport default App;\n"})}),"\n",(0,n.jsx)(t.h3,{id:"props",children:"Props"}),"\n",(0,n.jsxs)(t.table,{children:[(0,n.jsx)(t.thead,{children:(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.th,{children:"Prop name"}),(0,n.jsx)(t.th,{children:"Type"}),(0,n.jsx)(t.th,{children:"Required"}),(0,n.jsx)(t.th,{children:"Description"})]})}),(0,n.jsxs)(t.tbody,{children:[(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"size"}),(0,n.jsx)(t.td,{children:(0,n.jsx)("code",{children:"'small' | 'medium'"})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsxs)(t.td,{children:["The size of the avatar. Default value: ",(0,n.jsx)(t.code,{children:"'medium' "})]})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"source"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.a,{href:"https://reactnative.dev/docs/image#imagesource",children:(0,n.jsx)(t.code,{children:"ImageSourcePropType"})})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"Used to specify the image source."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"borderStyle"}),(0,n.jsx)(t.td,{children:(0,n.jsx)("code",{children:"'circular' | 'rounded'"})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsxs)(t.td,{children:["Specifies the border type of the avatar. Default value: ",(0,n.jsx)(t.code,{children:"'circular'"})]})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"avatarIcon"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"React.ReactNode "})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"Used to add icon to avatar."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"containerStyle"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,n.jsx)(t.code,{children:"StyleProp"})})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"Additional styles to apply to the avatar container."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"label"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"string"})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"Represents the initials of the name to be written on the avatar."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"labelStyle"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.a,{href:"https://reactnative.dev/docs/text-style-props",children:(0,n.jsx)(t.code,{children:"StyleProp"})})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"Additional styles to apply to the label text."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"badgePosition"}),(0,n.jsx)(t.td,{children:(0,n.jsx)("code",{children:"'top' | 'bottom'"})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"Badge component location."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"badgeStyle"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"{ containerStyle?: StyleProp, textStyle?: StyleProp } "})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"Additional styles to apply to the badge component."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"badgeContent"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"React.ReactNode "})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"Additional content to apply to the badge component."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"theme"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"UITheme "})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"The theme to use for the component."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"typography"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"UITypography "})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"The typography to use for the component."})]})]})]}),"\n",(0,n.jsx)(t.h2,{id:"avatar-group",children:"Avatar Group"}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.strong,{children:"Avatar Group"}),", used to list avatars side by side."]}),"\n",(0,n.jsx)(t.h3,{id:"import-1",children:"Import"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-js",children:"import { AvatarGroup } from '@tra-tech/react-native-kitra';\n"})}),"\n",(0,n.jsx)(t.h3,{id:"usage-1",children:"Usage"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-js",children:"import { AvatarGroup } from '@tra-tech/react-native-kitra';\nimport { View } from 'react-native';\n\nconst App = () => (\n \n \n \n);\nexport default App;\n \n"})}),"\n",(0,n.jsx)(t.h3,{id:"props-1",children:"Props"}),"\n",(0,n.jsxs)(t.table,{children:[(0,n.jsx)(t.thead,{children:(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.th,{children:"Prop name"}),(0,n.jsx)(t.th,{children:"Type"}),(0,n.jsx)(t.th,{children:"Required"}),(0,n.jsx)(t.th,{children:"Description"})]})}),(0,n.jsxs)(t.tbody,{children:[(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"avatarsType"}),(0,n.jsxs)(t.td,{children:[(0,n.jsx)(t.code,{children:"Array<{"}),(0,n.jsx)("br",{}),(0,n.jsx)(t.code,{children:" source?: ImageSourcePropType,"}),(0,n.jsx)("br",{}),(0,n.jsx)(t.code,{children:" borderStyle?: 'circular' | 'rounded',"}),(0,n.jsx)("br",{}),(0,n.jsx)(t.code,{children:" avatarIcon?: React.ReactNode,"}),(0,n.jsx)("br",{}),(0,n.jsx)(t.code,{children:" containerStyle?: StyleProp,"}),(0,n.jsx)("br",{}),(0,n.jsx)(t.code,{children:" label?: string,"}),(0,n.jsx)("br",{}),(0,n.jsx)(t.code,{children:" labelStyle?: StyleProp,"}),(0,n.jsx)("br",{}),(0,n.jsx)(t.code,{children:" badgePosition?: 'top' | 'bottom',"}),(0,n.jsx)("br",{}),(0,n.jsx)(t.code,{children:" badgeStyle?: { containerStyle?: StyleProp,"}),(0,n.jsx)("br",{}),(0,n.jsx)(t.code,{children:"textStyle?: StyleProp },"}),(0,n.jsx)("br",{}),(0,n.jsx)(t.code,{children:"badgeContent?: React.ReactNode "}),(0,n.jsx)("br",{}),(0,n.jsx)(t.code,{children:"}> "})]}),(0,n.jsx)(t.td,{children:"Yes"}),(0,n.jsx)(t.td,{children:"Takes avatar props into array."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"avatarLimit"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"number"})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsxs)(t.td,{children:["Limit of avatars to be listed. Default value: ",(0,n.jsx)(t.code,{children:"10"})]})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"limitContainerStyle"}),(0,n.jsx)(t.td,{children:(0,n.jsx)("code",{children:"'circular' | 'rounded'"})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"Additional styles to apply to the limit container."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"theme"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"UITheme "})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"The theme to use for the component."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"typography"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"UITypography "})}),(0,n.jsx)(t.td,{children:"No"}),(0,n.jsx)(t.td,{children:"The typography to use for the component."})]})]})]})]})}function h(e={}){const{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(l,{...e})}):l(e)}},1151:(e,t,r)=>{r.d(t,{Z:()=>a,a:()=>d});var n=r(7294);const i={},s=n.createContext(i);function d(e){const t=n.useContext(s);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:d(e.components),n.createElement(s.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/e97f9a74.7b933164.js b/assets/js/e97f9a74.80b40b66.js similarity index 97% rename from assets/js/e97f9a74.7b933164.js rename to assets/js/e97f9a74.80b40b66.js index 4fa99cb..e1f3084 100644 --- a/assets/js/e97f9a74.7b933164.js +++ b/assets/js/e97f9a74.80b40b66.js @@ -1 +1 @@ -"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[9729],{1955:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>d,default:()=>h,frontMatter:()=>i,metadata:()=>o,toc:()=>a});var r=n(5893),s=n(1151);const i={sidebar_position:17},d="Slider",o={id:"components/slider",title:"Slider",description:"The Slider component is a customizable slider component that allows users to select a value within a given range by sliding a button along a horizontal bar.",source:"@site/docs/components/slider.md",sourceDirName:"components",slug:"/components/slider",permalink:"/react-native-kitra/docs/next/components/slider",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/docs/components/slider.md",tags:[],version:"current",lastUpdatedAt:1707292585,formattedLastUpdatedAt:"Feb 7, 2024",sidebarPosition:17,frontMatter:{sidebar_position:17},sidebar:"ComponentsSidebar",previous:{title:"Radio Button",permalink:"/react-native-kitra/docs/next/components/radio-button"},next:{title:"Speed Dial",permalink:"/react-native-kitra/docs/next/components/speed-dial"}},l={},a=[{value:"Import",id:"import",level:3},{value:"Usage",id:"usage",level:3},{value:"Props",id:"props",level:3}];function c(e){const t={a:"a",code:"code",h1:"h1",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,s.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h1,{id:"slider",children:"Slider"}),"\n",(0,r.jsxs)(t.p,{children:["The ",(0,r.jsx)(t.strong,{children:"Slider"})," component is a customizable slider component that allows users to select a value within a given range by sliding a button along a horizontal bar."]}),"\n",(0,r.jsx)(t.h3,{id:"import",children:"Import"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"import { Slider } from '@tra-tech/react-native-kitra';\n"})}),"\n",(0,r.jsx)(t.h3,{id:"usage",children:"Usage"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"import { Slider } from '@tra-tech/react-native-kitra';\nimport { View } from 'react-native';\n\nconst App = () => (\n \n console.log(e)} showPercentage value={20} />\n \n);\n\nexport default App;\n"})}),"\n",(0,r.jsx)(t.h3,{id:"props",children:"Props"}),"\n",(0,r.jsxs)(t.table,{children:[(0,r.jsx)(t.thead,{children:(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.th,{children:"Prop Name"}),(0,r.jsx)(t.th,{children:"Type"}),(0,r.jsx)(t.th,{children:"Required"}),(0,r.jsx)(t.th,{children:"Description"})]})}),(0,r.jsxs)(t.tbody,{children:[(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"showPercentage"}),(0,r.jsx)(t.td,{children:"boolean"}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"Determines whether to show the percentage indicator above the slider button."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"onChangeEnd"}),(0,r.jsx)(t.td,{children:"(value: number) => void"}),(0,r.jsx)(t.td,{children:"Yes"}),(0,r.jsx)(t.td,{children:"A callback function that is called when the user releases the slider button. The selected value is passed as an argument to the function."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"value"}),(0,r.jsx)(t.td,{children:"number"}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"The initial value of the slider. Should be a value between 0 and 100, representing the percentage of the slider's width."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"buttonStyle"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,r.jsx)(t.code,{children:"StyleProp"})})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"Additional styles to apply to the slider button."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"barStyle"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,r.jsx)(t.code,{children:"StyleProp"})})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"Additional styles to apply to the slider bar."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"progressStyle"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,r.jsx)(t.code,{children:"StyleProp"})})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"Additional styles to apply to the progress bar."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"theme"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"UITheme"})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"The theme to use for the component."})]})]})]})]})}function h(e={}){const{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(c,{...e})}):c(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>o,a:()=>d});var r=n(7294);const s={},i=r.createContext(s);function d(e){const t=r.useContext(i);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:d(e.components),r.createElement(i.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[9729],{1955:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>d,default:()=>h,frontMatter:()=>i,metadata:()=>o,toc:()=>a});var r=n(5893),s=n(1151);const i={sidebar_position:17},d="Slider",o={id:"components/slider",title:"Slider",description:"The Slider component is a customizable slider component that allows users to select a value within a given range by sliding a button along a horizontal bar.",source:"@site/docs/components/slider.md",sourceDirName:"components",slug:"/components/slider",permalink:"/react-native-kitra/docs/next/components/slider",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/docs/components/slider.md",tags:[],version:"current",lastUpdatedAt:1709646294,formattedLastUpdatedAt:"Mar 5, 2024",sidebarPosition:17,frontMatter:{sidebar_position:17},sidebar:"ComponentsSidebar",previous:{title:"Radio Button",permalink:"/react-native-kitra/docs/next/components/radio-button"},next:{title:"Speed Dial",permalink:"/react-native-kitra/docs/next/components/speed-dial"}},l={},a=[{value:"Import",id:"import",level:3},{value:"Usage",id:"usage",level:3},{value:"Props",id:"props",level:3}];function c(e){const t={a:"a",code:"code",h1:"h1",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,s.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h1,{id:"slider",children:"Slider"}),"\n",(0,r.jsxs)(t.p,{children:["The ",(0,r.jsx)(t.strong,{children:"Slider"})," component is a customizable slider component that allows users to select a value within a given range by sliding a button along a horizontal bar."]}),"\n",(0,r.jsx)(t.h3,{id:"import",children:"Import"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"import { Slider } from '@tra-tech/react-native-kitra';\n"})}),"\n",(0,r.jsx)(t.h3,{id:"usage",children:"Usage"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"import { Slider } from '@tra-tech/react-native-kitra';\nimport { View } from 'react-native';\n\nconst App = () => (\n \n console.log(e)} showPercentage value={20} />\n \n);\n\nexport default App;\n"})}),"\n",(0,r.jsx)(t.h3,{id:"props",children:"Props"}),"\n",(0,r.jsxs)(t.table,{children:[(0,r.jsx)(t.thead,{children:(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.th,{children:"Prop Name"}),(0,r.jsx)(t.th,{children:"Type"}),(0,r.jsx)(t.th,{children:"Required"}),(0,r.jsx)(t.th,{children:"Description"})]})}),(0,r.jsxs)(t.tbody,{children:[(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"showPercentage"}),(0,r.jsx)(t.td,{children:"boolean"}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"Determines whether to show the percentage indicator above the slider button."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"onChangeEnd"}),(0,r.jsx)(t.td,{children:"(value: number) => void"}),(0,r.jsx)(t.td,{children:"Yes"}),(0,r.jsx)(t.td,{children:"A callback function that is called when the user releases the slider button. The selected value is passed as an argument to the function."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"value"}),(0,r.jsx)(t.td,{children:"number"}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"The initial value of the slider. Should be a value between 0 and 100, representing the percentage of the slider's width."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"buttonStyle"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,r.jsx)(t.code,{children:"StyleProp"})})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"Additional styles to apply to the slider button."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"barStyle"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,r.jsx)(t.code,{children:"StyleProp"})})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"Additional styles to apply to the slider bar."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"progressStyle"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,r.jsx)(t.code,{children:"StyleProp"})})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"Additional styles to apply to the progress bar."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"theme"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"UITheme"})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"The theme to use for the component."})]})]})]})]})}function h(e={}){const{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(c,{...e})}):c(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>o,a:()=>d});var r=n(7294);const s={},i=r.createContext(s);function d(e){const t=r.useContext(i);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:d(e.components),r.createElement(i.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/f19737d8.d1f1506f.js b/assets/js/f19737d8.571322b6.js similarity index 99% rename from assets/js/f19737d8.d1f1506f.js rename to assets/js/f19737d8.571322b6.js index 65b7a8c..97f599a 100644 --- a/assets/js/f19737d8.d1f1506f.js +++ b/assets/js/f19737d8.571322b6.js @@ -1 +1 @@ -"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[9521],{4648:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>i,default:()=>x,frontMatter:()=>s,metadata:()=>l,toc:()=>o});var d=n(5893),r=n(1151);const s={sidebar_position:21},i="Text Input",l={id:"components/text-input",title:"Text Input",description:"The Text Input, a text input with label, count, helper text, left and right icons, and animations for the label and input box.",source:"@site/versioned_docs/version-1.x/components/text-input.md",sourceDirName:"components",slug:"/components/text-input",permalink:"/react-native-kitra/docs/components/text-input",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/versioned_docs/version-1.x/components/text-input.md",tags:[],version:"1.x",lastUpdatedAt:1707292585,formattedLastUpdatedAt:"Feb 7, 2024",sidebarPosition:21,frontMatter:{sidebar_position:21},sidebar:"ComponentsSidebar",previous:{title:"Switch",permalink:"/react-native-kitra/docs/components/switch"},next:{title:"Toggle Button",permalink:"/react-native-kitra/docs/components/toggle-button"}},c={},o=[{value:"Import",id:"import",level:3},{value:"Usage",id:"usage",level:3},{value:"Props",id:"props",level:3}];function h(e){const t={a:"a",code:"code",h1:"h1",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,r.a)(),...e.components};return(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)(t.h1,{id:"text-input",children:"Text Input"}),"\n",(0,d.jsxs)(t.p,{children:["The ",(0,d.jsx)(t.strong,{children:"Text Input"}),", a text input with label, count, helper text, left and right icons, and animations for the label and input box."]}),"\n",(0,d.jsx)(t.h3,{id:"import",children:"Import"}),"\n",(0,d.jsx)(t.pre,{children:(0,d.jsx)(t.code,{className:"language-js",children:"import { TextInput } from '@tra-tech/react-native-kitra';\n"})}),"\n",(0,d.jsx)(t.h3,{id:"usage",children:"Usage"}),"\n",(0,d.jsx)(t.pre,{children:(0,d.jsx)(t.code,{className:"language-js",children:'import { TextInput, Icon } from \'@tra-tech/react-native-kitra\';\nimport { View } from \'react-native\';\n\nconst App = () => (\n \n }\n right={}\n count\n defaultValue="Default Value"\n maxLength={20}\n helperText="Normal"\n errorMessage="ERROR"\n />\n \n);\n\nexport default App;\n'})}),"\n",(0,d.jsx)(t.h3,{id:"props",children:"Props"}),"\n",(0,d.jsxs)(t.table,{children:[(0,d.jsx)(t.thead,{children:(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.th,{children:"Prop name"}),(0,d.jsx)(t.th,{children:"Type"}),(0,d.jsx)(t.th,{children:"Required"}),(0,d.jsx)(t.th,{children:"Description"})]})}),(0,d.jsxs)(t.tbody,{children:[(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"size"}),(0,d.jsx)(t.td,{children:(0,d.jsx)("code",{children:"'small' | 'medium' | 'large'"})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsxs)(t.td,{children:["The size of the text input. Default Value: ",(0,d.jsx)(t.code,{children:"'medium' "})]})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"iconPosition"}),(0,d.jsx)(t.td,{children:(0,d.jsx)("code",{children:"'left' | 'right' "})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"Location of the icon."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"labelColor"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.code,{children:"{focus:string, default:string}"})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"Label color for focus and unfocus status"})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"helperText"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.code,{children:"string"})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"Text of helper text."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"helperTextStyle"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.a,{href:"https://reactnative.dev/docs/text-style-props",children:(0,d.jsx)(t.code,{children:"StyleProp"})})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"Additional styles to apply to the helper text."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"variant"}),(0,d.jsx)(t.td,{children:(0,d.jsx)("code",{children:"'filled' | 'outlined'"})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsxs)(t.td,{children:["Variant of the TextInput. Default value: ",(0,d.jsx)(t.code,{children:"'filled'"})," ,"]})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"containerStyle"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.a,{href:"https://reactnative.dev/docs/text-style-props",children:(0,d.jsx)(t.code,{children:"StyleProp"})})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"Style of outter input container."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"inputContainerStyle"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.a,{href:"https://reactnative.dev/docs/text-style-props",children:(0,d.jsx)(t.code,{children:"StyleProp"})})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"Style of inner input container."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"labelContainerStyle"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.a,{href:"https://reactnative.dev/docs/text-style-props",children:(0,d.jsx)(t.code,{children:"StyleProp"})})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"Style of label container."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"count"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.code,{children:"boolean"})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsxs)(t.td,{children:["Shows the number of text input characters. Default value: ",(0,d.jsx)(t.code,{children:"false"}),"."]})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"label"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.code,{children:"string"})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"The text to use for the floating label."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"labelStyle"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.a,{href:"https://reactnative.dev/docs/text-style-props",children:(0,d.jsx)(t.code,{children:"StyleProp"})})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"Additional styles to apply to the label text."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"editable"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.code,{children:"boolean"})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsxs)(t.td,{children:["If false, text is not editable. Default value: ",(0,d.jsx)(t.code,{children:"true"}),"."]})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"inputStyle"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,d.jsx)(t.code,{children:"StyleProp"})})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"Additional styles to apply to the text input."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"errorMessage"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.code,{children:"string"})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"Error message."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"error"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.code,{children:"boolean "})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"If error is true error message is shown."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"left"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.a,{href:"https://reactnative.dev/docs/react-node",children:(0,d.jsx)(t.code,{children:"React.ReactNode"})})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"Used to add a react node to the left of the text input."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"right"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.a,{href:"https://reactnative.dev/docs/react-node",children:(0,d.jsx)(t.code,{children:"React.ReactNode"})})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"Used to add a react node to the right of the text input."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"...TextInputProps"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.a,{href:"https://reactnative.dev/docs/textinput#props",children:(0,d.jsx)(t.code,{children:"TextInputProps"})})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"Any additional props to be passed TextInput component."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"theme"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.code,{children:"UITheme "})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"The UI theme to use for the component."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"typography"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.code,{children:"UITypography "})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"The UI typography to use for the component."})]})]})]})]})}function x(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,d.jsx)(t,{...e,children:(0,d.jsx)(h,{...e})}):h(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>l,a:()=>i});var d=n(7294);const r={},s=d.createContext(r);function i(e){const t=d.useContext(s);return d.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),d.createElement(s.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[9521],{4648:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>i,default:()=>x,frontMatter:()=>s,metadata:()=>l,toc:()=>o});var d=n(5893),r=n(1151);const s={sidebar_position:21},i="Text Input",l={id:"components/text-input",title:"Text Input",description:"The Text Input, a text input with label, count, helper text, left and right icons, and animations for the label and input box.",source:"@site/versioned_docs/version-1.x/components/text-input.md",sourceDirName:"components",slug:"/components/text-input",permalink:"/react-native-kitra/docs/components/text-input",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/versioned_docs/version-1.x/components/text-input.md",tags:[],version:"1.x",lastUpdatedAt:1709646294,formattedLastUpdatedAt:"Mar 5, 2024",sidebarPosition:21,frontMatter:{sidebar_position:21},sidebar:"ComponentsSidebar",previous:{title:"Switch",permalink:"/react-native-kitra/docs/components/switch"},next:{title:"Toggle Button",permalink:"/react-native-kitra/docs/components/toggle-button"}},c={},o=[{value:"Import",id:"import",level:3},{value:"Usage",id:"usage",level:3},{value:"Props",id:"props",level:3}];function h(e){const t={a:"a",code:"code",h1:"h1",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,r.a)(),...e.components};return(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)(t.h1,{id:"text-input",children:"Text Input"}),"\n",(0,d.jsxs)(t.p,{children:["The ",(0,d.jsx)(t.strong,{children:"Text Input"}),", a text input with label, count, helper text, left and right icons, and animations for the label and input box."]}),"\n",(0,d.jsx)(t.h3,{id:"import",children:"Import"}),"\n",(0,d.jsx)(t.pre,{children:(0,d.jsx)(t.code,{className:"language-js",children:"import { TextInput } from '@tra-tech/react-native-kitra';\n"})}),"\n",(0,d.jsx)(t.h3,{id:"usage",children:"Usage"}),"\n",(0,d.jsx)(t.pre,{children:(0,d.jsx)(t.code,{className:"language-js",children:'import { TextInput, Icon } from \'@tra-tech/react-native-kitra\';\nimport { View } from \'react-native\';\n\nconst App = () => (\n \n }\n right={}\n count\n defaultValue="Default Value"\n maxLength={20}\n helperText="Normal"\n errorMessage="ERROR"\n />\n \n);\n\nexport default App;\n'})}),"\n",(0,d.jsx)(t.h3,{id:"props",children:"Props"}),"\n",(0,d.jsxs)(t.table,{children:[(0,d.jsx)(t.thead,{children:(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.th,{children:"Prop name"}),(0,d.jsx)(t.th,{children:"Type"}),(0,d.jsx)(t.th,{children:"Required"}),(0,d.jsx)(t.th,{children:"Description"})]})}),(0,d.jsxs)(t.tbody,{children:[(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"size"}),(0,d.jsx)(t.td,{children:(0,d.jsx)("code",{children:"'small' | 'medium' | 'large'"})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsxs)(t.td,{children:["The size of the text input. Default Value: ",(0,d.jsx)(t.code,{children:"'medium' "})]})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"iconPosition"}),(0,d.jsx)(t.td,{children:(0,d.jsx)("code",{children:"'left' | 'right' "})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"Location of the icon."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"labelColor"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.code,{children:"{focus:string, default:string}"})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"Label color for focus and unfocus status"})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"helperText"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.code,{children:"string"})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"Text of helper text."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"helperTextStyle"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.a,{href:"https://reactnative.dev/docs/text-style-props",children:(0,d.jsx)(t.code,{children:"StyleProp"})})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"Additional styles to apply to the helper text."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"variant"}),(0,d.jsx)(t.td,{children:(0,d.jsx)("code",{children:"'filled' | 'outlined'"})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsxs)(t.td,{children:["Variant of the TextInput. Default value: ",(0,d.jsx)(t.code,{children:"'filled'"})," ,"]})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"containerStyle"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.a,{href:"https://reactnative.dev/docs/text-style-props",children:(0,d.jsx)(t.code,{children:"StyleProp"})})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"Style of outter input container."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"inputContainerStyle"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.a,{href:"https://reactnative.dev/docs/text-style-props",children:(0,d.jsx)(t.code,{children:"StyleProp"})})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"Style of inner input container."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"labelContainerStyle"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.a,{href:"https://reactnative.dev/docs/text-style-props",children:(0,d.jsx)(t.code,{children:"StyleProp"})})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"Style of label container."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"count"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.code,{children:"boolean"})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsxs)(t.td,{children:["Shows the number of text input characters. Default value: ",(0,d.jsx)(t.code,{children:"false"}),"."]})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"label"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.code,{children:"string"})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"The text to use for the floating label."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"labelStyle"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.a,{href:"https://reactnative.dev/docs/text-style-props",children:(0,d.jsx)(t.code,{children:"StyleProp"})})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"Additional styles to apply to the label text."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"editable"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.code,{children:"boolean"})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsxs)(t.td,{children:["If false, text is not editable. Default value: ",(0,d.jsx)(t.code,{children:"true"}),"."]})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"inputStyle"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,d.jsx)(t.code,{children:"StyleProp"})})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"Additional styles to apply to the text input."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"errorMessage"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.code,{children:"string"})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"Error message."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"error"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.code,{children:"boolean "})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"If error is true error message is shown."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"left"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.a,{href:"https://reactnative.dev/docs/react-node",children:(0,d.jsx)(t.code,{children:"React.ReactNode"})})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"Used to add a react node to the left of the text input."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"right"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.a,{href:"https://reactnative.dev/docs/react-node",children:(0,d.jsx)(t.code,{children:"React.ReactNode"})})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"Used to add a react node to the right of the text input."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"...TextInputProps"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.a,{href:"https://reactnative.dev/docs/textinput#props",children:(0,d.jsx)(t.code,{children:"TextInputProps"})})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"Any additional props to be passed TextInput component."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"theme"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.code,{children:"UITheme "})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"The UI theme to use for the component."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"typography"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.code,{children:"UITypography "})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"The UI typography to use for the component."})]})]})]})]})}function x(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,d.jsx)(t,{...e,children:(0,d.jsx)(h,{...e})}):h(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>l,a:()=>i});var d=n(7294);const r={},s=d.createContext(r);function i(e){const t=d.useContext(s);return d.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),d.createElement(s.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/f334516a.4c33ab99.js b/assets/js/f334516a.9893ad02.js similarity index 99% rename from assets/js/f334516a.4c33ab99.js rename to assets/js/f334516a.9893ad02.js index 8aa7673..1fcd99f 100644 --- a/assets/js/f334516a.4c33ab99.js +++ b/assets/js/f334516a.9893ad02.js @@ -1 +1 @@ -"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[2106],{5662:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>s,default:()=>h,frontMatter:()=>i,metadata:()=>o,toc:()=>l});var r=n(5893),d=n(1151);const i={sidebar_position:4},s="Badge",o={id:"components/badge",title:"Badge",description:"The Badge is used to place a number or text label in a specific position. It's especially useful for notifications or alerts.",source:"@site/versioned_docs/version-1.x/components/badge.md",sourceDirName:"components",slug:"/components/badge",permalink:"/react-native-kitra/docs/components/badge",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/versioned_docs/version-1.x/components/badge.md",tags:[],version:"1.x",lastUpdatedAt:1707292585,formattedLastUpdatedAt:"Feb 7, 2024",sidebarPosition:4,frontMatter:{sidebar_position:4},sidebar:"ComponentsSidebar",previous:{title:"Avatar",permalink:"/react-native-kitra/docs/components/avatar"},next:{title:"Button",permalink:"/react-native-kitra/docs/components/button"}},c={},l=[{value:"Import",id:"import",level:3},{value:"Usage",id:"usage",level:3},{value:"Props",id:"props",level:3}];function a(e){const t={a:"a",code:"code",h1:"h1",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,d.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h1,{id:"badge",children:"Badge"}),"\n",(0,r.jsxs)(t.p,{children:["The ",(0,r.jsx)(t.strong,{children:"Badge"})," is used to place a number or text label in a specific position. It's especially useful for notifications or alerts."]}),"\n",(0,r.jsx)(t.h3,{id:"import",children:"Import"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"import { Badge } from '@tra-tech/react-native-kitra';\n"})}),"\n",(0,r.jsx)(t.h3,{id:"usage",children:"Usage"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"import { Avatar, Chip, Icon } from '@tra-tech/react-native-kitra';\nimport { View, StyleSheet } from 'react-native';\nimport Badge from '../../components/Badge';\n\nconst App = () => (\n \n } />\n } />\n \n);\n\nconst style = StyleSheet.create({\n container: { flex: 1, alignItems: 'center', justifyContent: 'center', rowGap: 20 },\n});\n\nexport default App;\n"})}),"\n",(0,r.jsx)(t.h3,{id:"props",children:"Props"}),"\n",(0,r.jsxs)(t.table,{children:[(0,r.jsx)(t.thead,{children:(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.th,{children:"Prop name"}),(0,r.jsx)(t.th,{children:"Type"}),(0,r.jsx)(t.th,{children:"Required"}),(0,r.jsx)(t.th,{children:"Description"})]})}),(0,r.jsxs)(t.tbody,{children:[(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"visible"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"boolean"})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsxs)(t.td,{children:["Visibility status. Default value: ",(0,r.jsx)(t.code,{children:"true"})]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"label"}),(0,r.jsx)(t.td,{children:(0,r.jsx)("code",{children:" string | number "})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"The number or text to be written in the badge."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"size"}),(0,r.jsx)(t.td,{children:(0,r.jsx)("code",{children:" 'small' | 'medium'"})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsxs)(t.td,{children:["The size of the badge. Default value: ",(0,r.jsx)(t.code,{children:"'medium'"})]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"containerStyle"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,r.jsx)(t.code,{children:"StyleProp"})})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"Additional styles to apply to the badge container."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"labelStyle"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.a,{href:"https://reactnative.dev/docs/text-style-props",children:(0,r.jsx)(t.code,{children:"StyleProp"})})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"Additional styles to apply to the children text."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"borderStyle"}),(0,r.jsx)(t.td,{children:(0,r.jsx)("code",{children:"'circular' | 'rectangular'"})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsxs)(t.td,{children:["Specifies the border type of the badge. Default value: ",(0,r.jsx)(t.code,{children:"'circular'"})]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"icon"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.a,{href:"https://reactnative.dev/docs/react-node",children:(0,r.jsx)(t.code,{children:"React.ReactNode"})})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"Icon to be added to badge."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"children"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.a,{href:"https://reactnative.dev/docs/react-node",children:(0,r.jsx)(t.code,{children:"React.ReactNode"})})}),(0,r.jsx)(t.td,{children:"Yes"}),(0,r.jsx)(t.td,{children:"A required prop that represents the content to display within the Badge component."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"position"}),(0,r.jsx)(t.td,{children:(0,r.jsx)("code",{children:"'top-right'| 'top-left' | 'bottom-left' | 'bottom-right'"})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsxs)(t.td,{children:["Position the Badge component. Default value: ",(0,r.jsx)(t.code,{children:"'top-right'"})]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"theme"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"UITheme "})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"The theme to use for the component."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"typography"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"UITypography"})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"The typography to use for the component."})]})]})]})]})}function h(e={}){const{wrapper:t}={...(0,d.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(a,{...e})}):a(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>o,a:()=>s});var r=n(7294);const d={},i=r.createContext(d);function s(e){const t=r.useContext(i);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(d):e.components||d:s(e.components),r.createElement(i.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[2106],{5662:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>s,default:()=>h,frontMatter:()=>i,metadata:()=>o,toc:()=>l});var r=n(5893),d=n(1151);const i={sidebar_position:4},s="Badge",o={id:"components/badge",title:"Badge",description:"The Badge is used to place a number or text label in a specific position. It's especially useful for notifications or alerts.",source:"@site/versioned_docs/version-1.x/components/badge.md",sourceDirName:"components",slug:"/components/badge",permalink:"/react-native-kitra/docs/components/badge",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/versioned_docs/version-1.x/components/badge.md",tags:[],version:"1.x",lastUpdatedAt:1709646294,formattedLastUpdatedAt:"Mar 5, 2024",sidebarPosition:4,frontMatter:{sidebar_position:4},sidebar:"ComponentsSidebar",previous:{title:"Avatar",permalink:"/react-native-kitra/docs/components/avatar"},next:{title:"Button",permalink:"/react-native-kitra/docs/components/button"}},c={},l=[{value:"Import",id:"import",level:3},{value:"Usage",id:"usage",level:3},{value:"Props",id:"props",level:3}];function a(e){const t={a:"a",code:"code",h1:"h1",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,d.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h1,{id:"badge",children:"Badge"}),"\n",(0,r.jsxs)(t.p,{children:["The ",(0,r.jsx)(t.strong,{children:"Badge"})," is used to place a number or text label in a specific position. It's especially useful for notifications or alerts."]}),"\n",(0,r.jsx)(t.h3,{id:"import",children:"Import"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"import { Badge } from '@tra-tech/react-native-kitra';\n"})}),"\n",(0,r.jsx)(t.h3,{id:"usage",children:"Usage"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"import { Avatar, Chip, Icon } from '@tra-tech/react-native-kitra';\nimport { View, StyleSheet } from 'react-native';\nimport Badge from '../../components/Badge';\n\nconst App = () => (\n \n } />\n } />\n \n);\n\nconst style = StyleSheet.create({\n container: { flex: 1, alignItems: 'center', justifyContent: 'center', rowGap: 20 },\n});\n\nexport default App;\n"})}),"\n",(0,r.jsx)(t.h3,{id:"props",children:"Props"}),"\n",(0,r.jsxs)(t.table,{children:[(0,r.jsx)(t.thead,{children:(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.th,{children:"Prop name"}),(0,r.jsx)(t.th,{children:"Type"}),(0,r.jsx)(t.th,{children:"Required"}),(0,r.jsx)(t.th,{children:"Description"})]})}),(0,r.jsxs)(t.tbody,{children:[(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"visible"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"boolean"})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsxs)(t.td,{children:["Visibility status. Default value: ",(0,r.jsx)(t.code,{children:"true"})]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"label"}),(0,r.jsx)(t.td,{children:(0,r.jsx)("code",{children:" string | number "})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"The number or text to be written in the badge."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"size"}),(0,r.jsx)(t.td,{children:(0,r.jsx)("code",{children:" 'small' | 'medium'"})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsxs)(t.td,{children:["The size of the badge. Default value: ",(0,r.jsx)(t.code,{children:"'medium'"})]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"containerStyle"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,r.jsx)(t.code,{children:"StyleProp"})})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"Additional styles to apply to the badge container."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"labelStyle"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.a,{href:"https://reactnative.dev/docs/text-style-props",children:(0,r.jsx)(t.code,{children:"StyleProp"})})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"Additional styles to apply to the children text."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"borderStyle"}),(0,r.jsx)(t.td,{children:(0,r.jsx)("code",{children:"'circular' | 'rectangular'"})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsxs)(t.td,{children:["Specifies the border type of the badge. Default value: ",(0,r.jsx)(t.code,{children:"'circular'"})]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"icon"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.a,{href:"https://reactnative.dev/docs/react-node",children:(0,r.jsx)(t.code,{children:"React.ReactNode"})})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"Icon to be added to badge."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"children"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.a,{href:"https://reactnative.dev/docs/react-node",children:(0,r.jsx)(t.code,{children:"React.ReactNode"})})}),(0,r.jsx)(t.td,{children:"Yes"}),(0,r.jsx)(t.td,{children:"A required prop that represents the content to display within the Badge component."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"position"}),(0,r.jsx)(t.td,{children:(0,r.jsx)("code",{children:"'top-right'| 'top-left' | 'bottom-left' | 'bottom-right'"})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsxs)(t.td,{children:["Position the Badge component. Default value: ",(0,r.jsx)(t.code,{children:"'top-right'"})]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"theme"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"UITheme "})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"The theme to use for the component."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"typography"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"UITypography"})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"The typography to use for the component."})]})]})]})]})}function h(e={}){const{wrapper:t}={...(0,d.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(a,{...e})}):a(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>o,a:()=>s});var r=n(7294);const d={},i=r.createContext(d);function s(e){const t=r.useContext(i);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(d):e.components||d:s(e.components),r.createElement(i.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/f8be52c9.62f3f2b1.js b/assets/js/f8be52c9.570f2b94.js similarity index 99% rename from assets/js/f8be52c9.62f3f2b1.js rename to assets/js/f8be52c9.570f2b94.js index ea093ee..4c25348 100644 --- a/assets/js/f8be52c9.62f3f2b1.js +++ b/assets/js/f8be52c9.570f2b94.js @@ -1 +1 @@ -"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[7289],{4022:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>s,default:()=>h,frontMatter:()=>r,metadata:()=>i,toc:()=>c});var d=n(5893),o=n(1151);const r={sidebar_position:9},s="Dropdown",i={id:"components/dropdown",title:"Dropdown",description:"The Dropdown component provides a dropdown menu functionality. It allows users to select one or multiple items from a list of options displayed in a dropdown menu. The component is highly customizable with various props that can be passed to modify its appearance and behavior.",source:"@site/docs/components/dropdown.md",sourceDirName:"components",slug:"/components/dropdown",permalink:"/react-native-kitra/docs/next/components/dropdown",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/docs/components/dropdown.md",tags:[],version:"current",lastUpdatedAt:1707292585,formattedLastUpdatedAt:"Feb 7, 2024",sidebarPosition:9,frontMatter:{sidebar_position:9},sidebar:"ComponentsSidebar",previous:{title:"Divider",permalink:"/react-native-kitra/docs/next/components/divider"},next:{title:"Icon",permalink:"/react-native-kitra/docs/next/components/icon"}},l={},c=[{value:"Import",id:"import",level:3},{value:"Usage",id:"usage",level:3},{value:"Props",id:"props",level:3}];function a(e){const t={a:"a",code:"code",h1:"h1",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,o.a)(),...e.components};return(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)(t.h1,{id:"dropdown",children:"Dropdown"}),"\n",(0,d.jsxs)(t.p,{children:["The ",(0,d.jsx)(t.strong,{children:"Dropdown"})," component provides a dropdown menu functionality. It allows users to select one or multiple items from a list of options displayed in a dropdown menu. The component is highly customizable with various props that can be passed to modify its appearance and behavior."]}),"\n",(0,d.jsx)(t.h3,{id:"import",children:"Import"}),"\n",(0,d.jsx)(t.pre,{children:(0,d.jsx)(t.code,{className:"language-js",children:"import { Dropdown } from '@tra-tech/react-native-kitra';\n"})}),"\n",(0,d.jsx)(t.h3,{id:"usage",children:"Usage"}),"\n",(0,d.jsx)(t.pre,{children:(0,d.jsx)(t.code,{className:"language-js",children:"import { Dropdown } from '@tra-tech/react-native-kitra';\nimport { useState } from 'react';\nimport { View } from 'react-native';\n\nconst data = [{ label: 'Item 1', value: 1 }, { label: 'Item 2', value: 2 }, { label: 'Item 3', value: 3 }, { label: 'Item 4', value: 4 }, { label: 'Item 5', value: 5 }];\n\nconst App = () => {\n const [select, setSelect] = useState();\n return (\n \n \n setSelect(x.label)}\n displayedButtonValue={x => x.label}\n displayedRowValue={x => x.label}\n data={data}\n />\n \n \n setSelect(x.value)}\n displayedButtonValue={x => x.label}\n displayedRowValue={x => x.label}\n data={data}\n />\n \n \n );\n};\n\nexport default App;\n"})}),"\n",(0,d.jsx)(t.h3,{id:"props",children:"Props"}),"\n",(0,d.jsxs)(t.table,{children:[(0,d.jsx)(t.thead,{children:(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.th,{children:"Prop name"}),(0,d.jsx)(t.th,{children:"Type"}),(0,d.jsx)(t.th,{children:"Required"}),(0,d.jsx)(t.th,{children:"Description"})]})}),(0,d.jsxs)(t.tbody,{children:[(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"multiple"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.code,{children:"boolean"})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsxs)(t.td,{children:["Determines whether the dropdown should allow multiple selections. Default value: ",(0,d.jsx)(t.code,{children:"false"})]})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"disabled"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.code,{children:"boolean"})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsxs)(t.td,{children:["Determines whether the dropdown is disabled. Default value: ",(0,d.jsx)(t.code,{children:"false"}),"."]})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"left"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.a,{href:"https://reactnative.dev/docs/react-node",children:(0,d.jsx)(t.code,{children:"(isVisible:boolean)=>React.ReactNode"})})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"A React node that will be created to the left of the dropdown button and return its visible."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"right"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.a,{href:"https://reactnative.dev/docs/react-node",children:(0,d.jsx)(t.code,{children:"(isVisible:boolean)=>React.ReactNode"})})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"A React node that will be created to the right of the dropdown button and return its visible."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"data"}),(0,d.jsx)(t.td,{children:(0,d.jsxs)("code",{children:[" Array","<","(string | object )> "]})}),(0,d.jsx)(t.td,{children:"Yes"}),(0,d.jsx)(t.td,{children:"An array of objects or strings to be used as options in the dropdown list."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"displayedRowValue"}),(0,d.jsx)(t.td,{children:(0,d.jsx)("code",{children:"(item: string | object) => any"})}),(0,d.jsx)(t.td,{children:"Yes"}),(0,d.jsxs)(t.td,{children:["A function that takes an item from the ",(0,d.jsx)(t.code,{children:"data"})," array and returns a value to be displayed in the dropdown list."]})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"displayedButtonValue"}),(0,d.jsx)(t.td,{children:(0,d.jsx)("code",{children:"(item: string | object) => any "})}),(0,d.jsx)(t.td,{children:"Yes"}),(0,d.jsxs)(t.td,{children:["A function that takes an item from the ",(0,d.jsx)(t.code,{children:"data"})," array and returns a value to be displayed on the dropdown button."]})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"listContainerStyle"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,d.jsx)(t.code,{children:"StyleProp"})})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"An object containing styles to be applied to the dropdown list container."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"defaultValue"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.code,{children:"Array"})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"An array of objects or strings to be pre-selected in the dropdown."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"displayLength"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.code,{children:"number"})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"The number of items to display in the button."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"buttonTitle"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.code,{children:"string"})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"The default text to be displayed on the dropdown button when no options are selected."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"rowStyle"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,d.jsx)(t.code,{children:"StyleProp"})})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"An object containing styles to be applied to each item in the dropdown list."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"buttonStyle"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,d.jsx)(t.code,{children:"StyleProp"})})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"An object containing styles to be applied to the dropdown button."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"buttonTextStyle"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.a,{href:"https://reactnative.dev/docs/text-style-props",children:(0,d.jsx)(t.code,{children:"StyleProp"})})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"An object containing styles to be applied to the text inside the dropdown button."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"selectall"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.code,{children:"boolean"})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:'Whether to include a "Select All" option in the dropdown.'})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"onSelect"}),(0,d.jsx)(t.td,{children:(0,d.jsx)("code",{children:"(item: Array | Array | string | object) => void"})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"A function to be called whenever an item is selected in the dropdown."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"onComplete"}),(0,d.jsx)(t.td,{children:(0,d.jsx)("code",{children:"(item: object | string) => void "})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"A function to be called whenever submit button pressed."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"rowTextStyle"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.a,{href:"https://reactnative.dev/docs/text-style-props",children:(0,d.jsx)(t.code,{children:"StyleProp"})})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"An object containing styles to be applied to the text inside each item in the dropdown list."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"containerStyle"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,d.jsx)(t.code,{children:"StyleProp"})})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"An object containing styles to be applied to the dropdown container."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"buttonBackgrounColor"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.code,{children:"{ focusBackground: string, defaultBackground: string }"})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"Used to customize the background color of the dropdown."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"iconStyle"}),(0,d.jsxs)(t.td,{children:[(0,d.jsx)(t.code,{children:"{ color: string,"}),(0,d.jsx)("br",{}),(0,d.jsx)(t.code,{children:" container: StyleProp }"})]}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"The color property determines the icon's color, and the container property defines the style of the container that holds the icon."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"autoPosition"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.code,{children:"boolean"})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsxs)(t.td,{children:["Controls whether the dropdown component's dropdown menu is positioned automatically. Default value: ",(0,d.jsx)(t.code,{children:"true"})]})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"theme"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.code,{children:"UITheme"})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"The theme to use for the component."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"typography"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.code,{children:"UITypography"})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"The typography to use for the component."})]})]})]})]})}function h(e={}){const{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,d.jsx)(t,{...e,children:(0,d.jsx)(a,{...e})}):a(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>i,a:()=>s});var d=n(7294);const o={},r=d.createContext(o);function s(e){const t=d.useContext(r);return d.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:s(e.components),d.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[7289],{4022:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>s,default:()=>h,frontMatter:()=>r,metadata:()=>i,toc:()=>c});var d=n(5893),o=n(1151);const r={sidebar_position:9},s="Dropdown",i={id:"components/dropdown",title:"Dropdown",description:"The Dropdown component provides a dropdown menu functionality. It allows users to select one or multiple items from a list of options displayed in a dropdown menu. The component is highly customizable with various props that can be passed to modify its appearance and behavior.",source:"@site/docs/components/dropdown.md",sourceDirName:"components",slug:"/components/dropdown",permalink:"/react-native-kitra/docs/next/components/dropdown",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/docs/components/dropdown.md",tags:[],version:"current",lastUpdatedAt:1709646294,formattedLastUpdatedAt:"Mar 5, 2024",sidebarPosition:9,frontMatter:{sidebar_position:9},sidebar:"ComponentsSidebar",previous:{title:"Divider",permalink:"/react-native-kitra/docs/next/components/divider"},next:{title:"Icon",permalink:"/react-native-kitra/docs/next/components/icon"}},l={},c=[{value:"Import",id:"import",level:3},{value:"Usage",id:"usage",level:3},{value:"Props",id:"props",level:3}];function a(e){const t={a:"a",code:"code",h1:"h1",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,o.a)(),...e.components};return(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)(t.h1,{id:"dropdown",children:"Dropdown"}),"\n",(0,d.jsxs)(t.p,{children:["The ",(0,d.jsx)(t.strong,{children:"Dropdown"})," component provides a dropdown menu functionality. It allows users to select one or multiple items from a list of options displayed in a dropdown menu. The component is highly customizable with various props that can be passed to modify its appearance and behavior."]}),"\n",(0,d.jsx)(t.h3,{id:"import",children:"Import"}),"\n",(0,d.jsx)(t.pre,{children:(0,d.jsx)(t.code,{className:"language-js",children:"import { Dropdown } from '@tra-tech/react-native-kitra';\n"})}),"\n",(0,d.jsx)(t.h3,{id:"usage",children:"Usage"}),"\n",(0,d.jsx)(t.pre,{children:(0,d.jsx)(t.code,{className:"language-js",children:"import { Dropdown } from '@tra-tech/react-native-kitra';\nimport { useState } from 'react';\nimport { View } from 'react-native';\n\nconst data = [{ label: 'Item 1', value: 1 }, { label: 'Item 2', value: 2 }, { label: 'Item 3', value: 3 }, { label: 'Item 4', value: 4 }, { label: 'Item 5', value: 5 }];\n\nconst App = () => {\n const [select, setSelect] = useState();\n return (\n \n \n setSelect(x.label)}\n displayedButtonValue={x => x.label}\n displayedRowValue={x => x.label}\n data={data}\n />\n \n \n setSelect(x.value)}\n displayedButtonValue={x => x.label}\n displayedRowValue={x => x.label}\n data={data}\n />\n \n \n );\n};\n\nexport default App;\n"})}),"\n",(0,d.jsx)(t.h3,{id:"props",children:"Props"}),"\n",(0,d.jsxs)(t.table,{children:[(0,d.jsx)(t.thead,{children:(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.th,{children:"Prop name"}),(0,d.jsx)(t.th,{children:"Type"}),(0,d.jsx)(t.th,{children:"Required"}),(0,d.jsx)(t.th,{children:"Description"})]})}),(0,d.jsxs)(t.tbody,{children:[(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"multiple"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.code,{children:"boolean"})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsxs)(t.td,{children:["Determines whether the dropdown should allow multiple selections. Default value: ",(0,d.jsx)(t.code,{children:"false"})]})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"disabled"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.code,{children:"boolean"})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsxs)(t.td,{children:["Determines whether the dropdown is disabled. Default value: ",(0,d.jsx)(t.code,{children:"false"}),"."]})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"left"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.a,{href:"https://reactnative.dev/docs/react-node",children:(0,d.jsx)(t.code,{children:"(isVisible:boolean)=>React.ReactNode"})})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"A React node that will be created to the left of the dropdown button and return its visible."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"right"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.a,{href:"https://reactnative.dev/docs/react-node",children:(0,d.jsx)(t.code,{children:"(isVisible:boolean)=>React.ReactNode"})})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"A React node that will be created to the right of the dropdown button and return its visible."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"data"}),(0,d.jsx)(t.td,{children:(0,d.jsxs)("code",{children:[" Array","<","(string | object )> "]})}),(0,d.jsx)(t.td,{children:"Yes"}),(0,d.jsx)(t.td,{children:"An array of objects or strings to be used as options in the dropdown list."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"displayedRowValue"}),(0,d.jsx)(t.td,{children:(0,d.jsx)("code",{children:"(item: string | object) => any"})}),(0,d.jsx)(t.td,{children:"Yes"}),(0,d.jsxs)(t.td,{children:["A function that takes an item from the ",(0,d.jsx)(t.code,{children:"data"})," array and returns a value to be displayed in the dropdown list."]})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"displayedButtonValue"}),(0,d.jsx)(t.td,{children:(0,d.jsx)("code",{children:"(item: string | object) => any "})}),(0,d.jsx)(t.td,{children:"Yes"}),(0,d.jsxs)(t.td,{children:["A function that takes an item from the ",(0,d.jsx)(t.code,{children:"data"})," array and returns a value to be displayed on the dropdown button."]})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"listContainerStyle"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,d.jsx)(t.code,{children:"StyleProp"})})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"An object containing styles to be applied to the dropdown list container."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"defaultValue"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.code,{children:"Array"})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"An array of objects or strings to be pre-selected in the dropdown."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"displayLength"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.code,{children:"number"})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"The number of items to display in the button."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"buttonTitle"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.code,{children:"string"})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"The default text to be displayed on the dropdown button when no options are selected."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"rowStyle"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,d.jsx)(t.code,{children:"StyleProp"})})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"An object containing styles to be applied to each item in the dropdown list."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"buttonStyle"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,d.jsx)(t.code,{children:"StyleProp"})})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"An object containing styles to be applied to the dropdown button."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"buttonTextStyle"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.a,{href:"https://reactnative.dev/docs/text-style-props",children:(0,d.jsx)(t.code,{children:"StyleProp"})})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"An object containing styles to be applied to the text inside the dropdown button."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"selectall"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.code,{children:"boolean"})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:'Whether to include a "Select All" option in the dropdown.'})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"onSelect"}),(0,d.jsx)(t.td,{children:(0,d.jsx)("code",{children:"(item: Array | Array | string | object) => void"})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"A function to be called whenever an item is selected in the dropdown."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"onComplete"}),(0,d.jsx)(t.td,{children:(0,d.jsx)("code",{children:"(item: object | string) => void "})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"A function to be called whenever submit button pressed."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"rowTextStyle"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.a,{href:"https://reactnative.dev/docs/text-style-props",children:(0,d.jsx)(t.code,{children:"StyleProp"})})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"An object containing styles to be applied to the text inside each item in the dropdown list."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"containerStyle"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,d.jsx)(t.code,{children:"StyleProp"})})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"An object containing styles to be applied to the dropdown container."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"buttonBackgrounColor"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.code,{children:"{ focusBackground: string, defaultBackground: string }"})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"Used to customize the background color of the dropdown."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"iconStyle"}),(0,d.jsxs)(t.td,{children:[(0,d.jsx)(t.code,{children:"{ color: string,"}),(0,d.jsx)("br",{}),(0,d.jsx)(t.code,{children:" container: StyleProp }"})]}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"The color property determines the icon's color, and the container property defines the style of the container that holds the icon."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"autoPosition"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.code,{children:"boolean"})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsxs)(t.td,{children:["Controls whether the dropdown component's dropdown menu is positioned automatically. Default value: ",(0,d.jsx)(t.code,{children:"true"})]})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"theme"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.code,{children:"UITheme"})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"The theme to use for the component."})]}),(0,d.jsxs)(t.tr,{children:[(0,d.jsx)(t.td,{children:"typography"}),(0,d.jsx)(t.td,{children:(0,d.jsx)(t.code,{children:"UITypography"})}),(0,d.jsx)(t.td,{children:"No"}),(0,d.jsx)(t.td,{children:"The typography to use for the component."})]})]})]})]})}function h(e={}){const{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,d.jsx)(t,{...e,children:(0,d.jsx)(a,{...e})}):a(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>i,a:()=>s});var d=n(7294);const o={},r=d.createContext(o);function s(e){const t=d.useContext(r);return d.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:s(e.components),d.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/fb87031d.84110516.js b/assets/js/fb87031d.922dce17.js similarity index 98% rename from assets/js/fb87031d.84110516.js rename to assets/js/fb87031d.922dce17.js index 1f25732..49dffc9 100644 --- a/assets/js/fb87031d.84110516.js +++ b/assets/js/fb87031d.922dce17.js @@ -1 +1 @@ -"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[8975],{4109:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>d,default:()=>h,frontMatter:()=>r,metadata:()=>i,toc:()=>a});var s=n(5893),o=n(1151);const r={sidebar_position:12},d="Modal",i={id:"components/modal",title:"Modal",description:"The Modal component is a basic way to present content above an enclosing view.",source:"@site/docs/components/modal.md",sourceDirName:"components",slug:"/components/modal",permalink:"/react-native-kitra/docs/next/components/modal",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/docs/components/modal.md",tags:[],version:"current",lastUpdatedAt:1707292585,formattedLastUpdatedAt:"Feb 7, 2024",sidebarPosition:12,frontMatter:{sidebar_position:12},sidebar:"ComponentsSidebar",previous:{title:"Menu",permalink:"/react-native-kitra/docs/next/components/menu"},next:{title:"Pagerview",permalink:"/react-native-kitra/docs/next/components/pagerview"}},c={},a=[{value:"Import",id:"import",level:3},{value:"Usage",id:"usage",level:3},{value:"Props",id:"props",level:3}];function l(e){const t={a:"a",code:"code",h1:"h1",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,o.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h1,{id:"modal",children:"Modal"}),"\n",(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.strong,{children:"Modal"})," component is a basic way to present content above an enclosing view."]}),"\n",(0,s.jsx)(t.h3,{id:"import",children:"Import"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",children:"import { Modal } from '@tra-tech/react-native-kitra';\n"})}),"\n",(0,s.jsx)(t.h3,{id:"usage",children:"Usage"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",children:"import { Modal } from '@tra-tech/react-native-kitra';\nimport { useState } from 'react';\nimport { Text, TouchableOpacity, View } from 'react-native';\n\nconst App = () => {\n\n const [visible, setVisible] = useState(false);\n \n return (\n <>\n \n setVisible(true)}>\n Show Modal\n \n \n \n setVisible(false)}>\n Hide Modal\n \n \n \n );\n};\n\nexport default App;\n"})}),"\n",(0,s.jsx)(t.h3,{id:"props",children:"Props"}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{children:"Prop name"}),(0,s.jsx)(t.th,{children:"Type"}),(0,s.jsx)(t.th,{children:"Required"}),(0,s.jsx)(t.th,{children:"Description"})]})}),(0,s.jsxs)(t.tbody,{children:[(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"containerStyle"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,s.jsx)(t.code,{children:"StyleProp"})})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"Additional styles to apply to the modal container."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"modalStyle"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"https://reactnative.dev/docs/text-style-props",children:(0,s.jsx)(t.code,{children:"StyleProp"})})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"Additional styles to apply to the modal component."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"visible"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"boolean"})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsxs)(t.td,{children:["Visibility status. Default value: ",(0,s.jsx)(t.code,{children:"false"})]})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"children"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"https://reactnative.dev/docs/react-node",children:(0,s.jsx)(t.code,{children:"React.ReactNode"})})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"Content of the modal."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"...ModalProps"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"https://reactnative.dev/docs/modal#props",children:(0,s.jsx)(t.code,{children:"ModalProps"})})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"React native modal props."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"theme"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"UITheme "})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"The theme to use for the component."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"typography"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"UITypography"})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"The typography to use for the component."})]})]})]})]})}function h(e={}){const{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(l,{...e})}):l(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>i,a:()=>d});var s=n(7294);const o={},r=s.createContext(o);function d(e){const t=s.useContext(r);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:d(e.components),s.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[8975],{4109:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>d,default:()=>h,frontMatter:()=>r,metadata:()=>i,toc:()=>a});var s=n(5893),o=n(1151);const r={sidebar_position:12},d="Modal",i={id:"components/modal",title:"Modal",description:"The Modal component is a basic way to present content above an enclosing view.",source:"@site/docs/components/modal.md",sourceDirName:"components",slug:"/components/modal",permalink:"/react-native-kitra/docs/next/components/modal",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/docs/components/modal.md",tags:[],version:"current",lastUpdatedAt:1709646294,formattedLastUpdatedAt:"Mar 5, 2024",sidebarPosition:12,frontMatter:{sidebar_position:12},sidebar:"ComponentsSidebar",previous:{title:"Menu",permalink:"/react-native-kitra/docs/next/components/menu"},next:{title:"Pagerview",permalink:"/react-native-kitra/docs/next/components/pagerview"}},c={},a=[{value:"Import",id:"import",level:3},{value:"Usage",id:"usage",level:3},{value:"Props",id:"props",level:3}];function l(e){const t={a:"a",code:"code",h1:"h1",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,o.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h1,{id:"modal",children:"Modal"}),"\n",(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.strong,{children:"Modal"})," component is a basic way to present content above an enclosing view."]}),"\n",(0,s.jsx)(t.h3,{id:"import",children:"Import"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",children:"import { Modal } from '@tra-tech/react-native-kitra';\n"})}),"\n",(0,s.jsx)(t.h3,{id:"usage",children:"Usage"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",children:"import { Modal } from '@tra-tech/react-native-kitra';\nimport { useState } from 'react';\nimport { Text, TouchableOpacity, View } from 'react-native';\n\nconst App = () => {\n\n const [visible, setVisible] = useState(false);\n \n return (\n <>\n \n setVisible(true)}>\n Show Modal\n \n \n \n setVisible(false)}>\n Hide Modal\n \n \n \n );\n};\n\nexport default App;\n"})}),"\n",(0,s.jsx)(t.h3,{id:"props",children:"Props"}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{children:"Prop name"}),(0,s.jsx)(t.th,{children:"Type"}),(0,s.jsx)(t.th,{children:"Required"}),(0,s.jsx)(t.th,{children:"Description"})]})}),(0,s.jsxs)(t.tbody,{children:[(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"containerStyle"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,s.jsx)(t.code,{children:"StyleProp"})})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"Additional styles to apply to the modal container."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"modalStyle"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"https://reactnative.dev/docs/text-style-props",children:(0,s.jsx)(t.code,{children:"StyleProp"})})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"Additional styles to apply to the modal component."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"visible"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"boolean"})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsxs)(t.td,{children:["Visibility status. Default value: ",(0,s.jsx)(t.code,{children:"false"})]})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"children"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"https://reactnative.dev/docs/react-node",children:(0,s.jsx)(t.code,{children:"React.ReactNode"})})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"Content of the modal."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"...ModalProps"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"https://reactnative.dev/docs/modal#props",children:(0,s.jsx)(t.code,{children:"ModalProps"})})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"React native modal props."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"theme"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"UITheme "})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"The theme to use for the component."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"typography"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"UITypography"})}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"The typography to use for the component."})]})]})]})]})}function h(e={}){const{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(l,{...e})}):l(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>i,a:()=>d});var s=n(7294);const o={},r=s.createContext(o);function d(e){const t=s.useContext(r);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:d(e.components),s.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/fe55c584.b6476fd6.js b/assets/js/fe55c584.a2a10fe1.js similarity index 98% rename from assets/js/fe55c584.b6476fd6.js rename to assets/js/fe55c584.a2a10fe1.js index 75b16af..a000e55 100644 --- a/assets/js/fe55c584.b6476fd6.js +++ b/assets/js/fe55c584.a2a10fe1.js @@ -1 +1 @@ -"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[75],{1465:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>d,default:()=>h,frontMatter:()=>i,metadata:()=>o,toc:()=>a});var r=n(5893),s=n(1151);const i={sidebar_position:17},d="Slider",o={id:"components/slider",title:"Slider",description:"The Slider component is a customizable slider component that allows users to select a value within a given range by sliding a button along a horizontal bar.",source:"@site/versioned_docs/version-1.x/components/slider.md",sourceDirName:"components",slug:"/components/slider",permalink:"/react-native-kitra/docs/components/slider",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/versioned_docs/version-1.x/components/slider.md",tags:[],version:"1.x",lastUpdatedAt:1707292585,formattedLastUpdatedAt:"Feb 7, 2024",sidebarPosition:17,frontMatter:{sidebar_position:17},sidebar:"ComponentsSidebar",previous:{title:"Radio Button",permalink:"/react-native-kitra/docs/components/radio-button"},next:{title:"Speed Dial",permalink:"/react-native-kitra/docs/components/speed-dial"}},l={},a=[{value:"Import",id:"import",level:3},{value:"Usage",id:"usage",level:3},{value:"Props",id:"props",level:3}];function c(e){const t={a:"a",code:"code",h1:"h1",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,s.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h1,{id:"slider",children:"Slider"}),"\n",(0,r.jsxs)(t.p,{children:["The ",(0,r.jsx)(t.strong,{children:"Slider"})," component is a customizable slider component that allows users to select a value within a given range by sliding a button along a horizontal bar."]}),"\n",(0,r.jsx)(t.h3,{id:"import",children:"Import"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"import { Slider } from '@tra-tech/react-native-kitra';\n"})}),"\n",(0,r.jsx)(t.h3,{id:"usage",children:"Usage"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"import { Slider } from '@tra-tech/react-native-kitra';\nimport { View } from 'react-native';\n\nconst App = () => (\n \n console.log(e)} showPercentage value={20} />\n \n);\n\nexport default App;\n"})}),"\n",(0,r.jsx)(t.h3,{id:"props",children:"Props"}),"\n",(0,r.jsxs)(t.table,{children:[(0,r.jsx)(t.thead,{children:(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.th,{children:"Prop Name"}),(0,r.jsx)(t.th,{children:"Type"}),(0,r.jsx)(t.th,{children:"Required"}),(0,r.jsx)(t.th,{children:"Description"})]})}),(0,r.jsxs)(t.tbody,{children:[(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"showPercentage"}),(0,r.jsx)(t.td,{children:"boolean"}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"Determines whether to show the percentage indicator above the slider button."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"onChangeEnd"}),(0,r.jsx)(t.td,{children:"(value: number) => void"}),(0,r.jsx)(t.td,{children:"Yes"}),(0,r.jsx)(t.td,{children:"A callback function that is called when the user releases the slider button. The selected value is passed as an argument to the function."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"value"}),(0,r.jsx)(t.td,{children:"number"}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"The initial value of the slider. Should be a value between 0 and 100, representing the percentage of the slider's width."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"buttonStyle"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,r.jsx)(t.code,{children:"StyleProp"})})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"Additional styles to apply to the slider button."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"barStyle"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,r.jsx)(t.code,{children:"StyleProp"})})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"Additional styles to apply to the slider bar."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"progressStyle"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,r.jsx)(t.code,{children:"StyleProp"})})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"Additional styles to apply to the progress bar."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"theme"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"UITheme"})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"The theme to use for the component."})]})]})]})]})}function h(e={}){const{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(c,{...e})}):c(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>o,a:()=>d});var r=n(7294);const s={},i=r.createContext(s);function d(e){const t=r.useContext(i);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:d(e.components),r.createElement(i.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[75],{1465:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>d,default:()=>h,frontMatter:()=>i,metadata:()=>o,toc:()=>a});var r=n(5893),s=n(1151);const i={sidebar_position:17},d="Slider",o={id:"components/slider",title:"Slider",description:"The Slider component is a customizable slider component that allows users to select a value within a given range by sliding a button along a horizontal bar.",source:"@site/versioned_docs/version-1.x/components/slider.md",sourceDirName:"components",slug:"/components/slider",permalink:"/react-native-kitra/docs/components/slider",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/versioned_docs/version-1.x/components/slider.md",tags:[],version:"1.x",lastUpdatedAt:1709646294,formattedLastUpdatedAt:"Mar 5, 2024",sidebarPosition:17,frontMatter:{sidebar_position:17},sidebar:"ComponentsSidebar",previous:{title:"Radio Button",permalink:"/react-native-kitra/docs/components/radio-button"},next:{title:"Speed Dial",permalink:"/react-native-kitra/docs/components/speed-dial"}},l={},a=[{value:"Import",id:"import",level:3},{value:"Usage",id:"usage",level:3},{value:"Props",id:"props",level:3}];function c(e){const t={a:"a",code:"code",h1:"h1",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,s.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h1,{id:"slider",children:"Slider"}),"\n",(0,r.jsxs)(t.p,{children:["The ",(0,r.jsx)(t.strong,{children:"Slider"})," component is a customizable slider component that allows users to select a value within a given range by sliding a button along a horizontal bar."]}),"\n",(0,r.jsx)(t.h3,{id:"import",children:"Import"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"import { Slider } from '@tra-tech/react-native-kitra';\n"})}),"\n",(0,r.jsx)(t.h3,{id:"usage",children:"Usage"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"import { Slider } from '@tra-tech/react-native-kitra';\nimport { View } from 'react-native';\n\nconst App = () => (\n \n console.log(e)} showPercentage value={20} />\n \n);\n\nexport default App;\n"})}),"\n",(0,r.jsx)(t.h3,{id:"props",children:"Props"}),"\n",(0,r.jsxs)(t.table,{children:[(0,r.jsx)(t.thead,{children:(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.th,{children:"Prop Name"}),(0,r.jsx)(t.th,{children:"Type"}),(0,r.jsx)(t.th,{children:"Required"}),(0,r.jsx)(t.th,{children:"Description"})]})}),(0,r.jsxs)(t.tbody,{children:[(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"showPercentage"}),(0,r.jsx)(t.td,{children:"boolean"}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"Determines whether to show the percentage indicator above the slider button."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"onChangeEnd"}),(0,r.jsx)(t.td,{children:"(value: number) => void"}),(0,r.jsx)(t.td,{children:"Yes"}),(0,r.jsx)(t.td,{children:"A callback function that is called when the user releases the slider button. The selected value is passed as an argument to the function."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"value"}),(0,r.jsx)(t.td,{children:"number"}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"The initial value of the slider. Should be a value between 0 and 100, representing the percentage of the slider's width."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"buttonStyle"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,r.jsx)(t.code,{children:"StyleProp"})})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"Additional styles to apply to the slider button."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"barStyle"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,r.jsx)(t.code,{children:"StyleProp"})})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"Additional styles to apply to the slider bar."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"progressStyle"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,r.jsx)(t.code,{children:"StyleProp"})})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"Additional styles to apply to the progress bar."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"theme"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"UITheme"})}),(0,r.jsx)(t.td,{children:"No"}),(0,r.jsx)(t.td,{children:"The theme to use for the component."})]})]})]})]})}function h(e={}){const{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(c,{...e})}):c(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>o,a:()=>d});var r=n(7294);const s={},i=r.createContext(s);function d(e){const t=r.useContext(i);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:d(e.components),r.createElement(i.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/ff6d8346.4f1da2ca.js b/assets/js/ff6d8346.6b3acf46.js similarity index 96% rename from assets/js/ff6d8346.4f1da2ca.js rename to assets/js/ff6d8346.6b3acf46.js index c8dda31..13e95f3 100644 --- a/assets/js/ff6d8346.4f1da2ca.js +++ b/assets/js/ff6d8346.6b3acf46.js @@ -1 +1 @@ -"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[2529],{353:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>s,default:()=>h,frontMatter:()=>i,metadata:()=>a,toc:()=>c});var o=n(5893),r=n(1151);const i={sidebar_position:16},s="Radio Button",a={id:"components/radio-button",title:"Radio Button",description:"The RadioButton is a component that displays a circular button with a border and an inner circle that can be toggled on and off.",source:"@site/docs/components/radio-button.md",sourceDirName:"components",slug:"/components/radio-button",permalink:"/react-native-kitra/docs/next/components/radio-button",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/docs/components/radio-button.md",tags:[],version:"current",lastUpdatedAt:1707292585,formattedLastUpdatedAt:"Feb 7, 2024",sidebarPosition:16,frontMatter:{sidebar_position:16},sidebar:"ComponentsSidebar",previous:{title:"Progress Bar",permalink:"/react-native-kitra/docs/next/components/progress-bar"},next:{title:"Slider",permalink:"/react-native-kitra/docs/next/components/slider"}},d={},c=[{value:"Import",id:"import",level:3},{value:"Usage",id:"usage",level:3},{value:"Props",id:"props",level:3}];function l(e){const t={a:"a",code:"code",h1:"h1",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,r.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.h1,{id:"radio-button",children:"Radio Button"}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.strong,{children:"RadioButton"})," is a component that displays a circular button with a border and an inner circle that can be toggled on and off."]}),"\n",(0,o.jsx)(t.h3,{id:"import",children:"Import"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-js",children:"import { Slider } from '@tra-tech/react-native-kitra';\n"})}),"\n",(0,o.jsx)(t.h3,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-js",children:"import { RadioButton } from '@tra-tech/react-native-kitra';\nimport { View, StyleSheet } from 'react-native';\n\nconst App = () => (\n \n console.log(x)} />\n \n);\n\nconst style = StyleSheet.create({\n container: { flex: 1, justifyContent: 'center' },\n});\n\nexport default App;\n"})}),"\n",(0,o.jsx)(t.h3,{id:"props",children:"Props"}),"\n",(0,o.jsxs)(t.table,{children:[(0,o.jsx)(t.thead,{children:(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.th,{children:"Prop Name"}),(0,o.jsx)(t.th,{children:"Type"}),(0,o.jsx)(t.th,{children:"Required"}),(0,o.jsx)(t.th,{children:"Description"})]})}),(0,o.jsxs)(t.tbody,{children:[(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.td,{children:"onChange"}),(0,o.jsx)(t.td,{children:(0,o.jsx)(t.code,{children:"(event: boolean) => void"})}),(0,o.jsx)(t.td,{children:"Yes"}),(0,o.jsx)(t.td,{children:"A function that is called when the radio button is pressed. The current value of the radio button is passed as an argument to the function."})]}),(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.td,{children:"style"}),(0,o.jsx)(t.td,{children:(0,o.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,o.jsx)(t.code,{children:"StyleProp"})})}),(0,o.jsx)(t.td,{children:"No"}),(0,o.jsx)(t.td,{children:"Additional styles to apply to the radio button container."})]}),(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.td,{children:"theme"}),(0,o.jsx)(t.td,{children:(0,o.jsx)(t.code,{children:"UITheme"})}),(0,o.jsx)(t.td,{children:"No"}),(0,o.jsx)(t.td,{children:"The theme to use for the component."})]})]})]})]})}function h(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(l,{...e})}):l(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>a,a:()=>s});var o=n(7294);const r={},i=o.createContext(r);function s(e){const t=o.useContext(i);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:s(e.components),o.createElement(i.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkkitra_doc=self.webpackChunkkitra_doc||[]).push([[2529],{353:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>s,default:()=>h,frontMatter:()=>i,metadata:()=>a,toc:()=>c});var o=n(5893),r=n(1151);const i={sidebar_position:16},s="Radio Button",a={id:"components/radio-button",title:"Radio Button",description:"The RadioButton is a component that displays a circular button with a border and an inner circle that can be toggled on and off.",source:"@site/docs/components/radio-button.md",sourceDirName:"components",slug:"/components/radio-button",permalink:"/react-native-kitra/docs/next/components/radio-button",draft:!1,unlisted:!1,editUrl:"https://github.com/TRA-Tech/react-native-kitra/tree/main/doc/docs/components/radio-button.md",tags:[],version:"current",lastUpdatedAt:1709646294,formattedLastUpdatedAt:"Mar 5, 2024",sidebarPosition:16,frontMatter:{sidebar_position:16},sidebar:"ComponentsSidebar",previous:{title:"Progress Bar",permalink:"/react-native-kitra/docs/next/components/progress-bar"},next:{title:"Slider",permalink:"/react-native-kitra/docs/next/components/slider"}},d={},c=[{value:"Import",id:"import",level:3},{value:"Usage",id:"usage",level:3},{value:"Props",id:"props",level:3}];function l(e){const t={a:"a",code:"code",h1:"h1",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,r.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.h1,{id:"radio-button",children:"Radio Button"}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.strong,{children:"RadioButton"})," is a component that displays a circular button with a border and an inner circle that can be toggled on and off."]}),"\n",(0,o.jsx)(t.h3,{id:"import",children:"Import"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-js",children:"import { Slider } from '@tra-tech/react-native-kitra';\n"})}),"\n",(0,o.jsx)(t.h3,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-js",children:"import { RadioButton } from '@tra-tech/react-native-kitra';\nimport { View, StyleSheet } from 'react-native';\n\nconst App = () => (\n \n console.log(x)} />\n \n);\n\nconst style = StyleSheet.create({\n container: { flex: 1, justifyContent: 'center' },\n});\n\nexport default App;\n"})}),"\n",(0,o.jsx)(t.h3,{id:"props",children:"Props"}),"\n",(0,o.jsxs)(t.table,{children:[(0,o.jsx)(t.thead,{children:(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.th,{children:"Prop Name"}),(0,o.jsx)(t.th,{children:"Type"}),(0,o.jsx)(t.th,{children:"Required"}),(0,o.jsx)(t.th,{children:"Description"})]})}),(0,o.jsxs)(t.tbody,{children:[(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.td,{children:"onChange"}),(0,o.jsx)(t.td,{children:(0,o.jsx)(t.code,{children:"(event: boolean) => void"})}),(0,o.jsx)(t.td,{children:"Yes"}),(0,o.jsx)(t.td,{children:"A function that is called when the radio button is pressed. The current value of the radio button is passed as an argument to the function."})]}),(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.td,{children:"style"}),(0,o.jsx)(t.td,{children:(0,o.jsx)(t.a,{href:"https://reactnative.dev/docs/view-style-props",children:(0,o.jsx)(t.code,{children:"StyleProp"})})}),(0,o.jsx)(t.td,{children:"No"}),(0,o.jsx)(t.td,{children:"Additional styles to apply to the radio button container."})]}),(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.td,{children:"theme"}),(0,o.jsx)(t.td,{children:(0,o.jsx)(t.code,{children:"UITheme"})}),(0,o.jsx)(t.td,{children:"No"}),(0,o.jsx)(t.td,{children:"The theme to use for the component."})]})]})]})]})}function h(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(l,{...e})}):l(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>a,a:()=>s});var o=n(7294);const r={},i=o.createContext(r);function s(e){const t=o.useContext(i);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:s(e.components),o.createElement(i.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/runtime~main.9e66aa14.js b/assets/js/runtime~main.9e66aa14.js new file mode 100644 index 0000000..b46d088 --- /dev/null +++ b/assets/js/runtime~main.9e66aa14.js @@ -0,0 +1 @@ +(()=>{"use strict";var e,a,f,d,t,b={},r={};function c(e){var a=r[e];if(void 0!==a)return a.exports;var f=r[e]={id:e,loaded:!1,exports:{}};return b[e].call(f.exports,f,f.exports,c),f.loaded=!0,f.exports}c.m=b,c.c=r,e=[],c.O=(a,f,d,t)=>{if(!f){var b=1/0;for(i=0;i=t)&&Object.keys(c.O).every((e=>c.O[e](f[o])))?f.splice(o--,1):(r=!1,t0&&e[i-1][2]>t;i--)e[i]=e[i-1];e[i]=[f,d,t]},c.n=e=>{var a=e&&e.__esModule?()=>e.default:()=>e;return c.d(a,{a:a}),a},f=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,c.t=function(e,d){if(1&d&&(e=this(e)),8&d)return e;if("object"==typeof e&&e){if(4&d&&e.__esModule)return e;if(16&d&&"function"==typeof e.then)return e}var t=Object.create(null);c.r(t);var b={};a=a||[null,f({}),f([]),f(f)];for(var r=2&d&&e;"object"==typeof r&&!~a.indexOf(r);r=f(r))Object.getOwnPropertyNames(r).forEach((a=>b[a]=()=>e[a]));return b.default=()=>e,c.d(t,b),t},c.d=(e,a)=>{for(var f in a)c.o(a,f)&&!c.o(e,f)&&Object.defineProperty(e,f,{enumerable:!0,get:a[f]})},c.f={},c.e=e=>Promise.all(Object.keys(c.f).reduce(((a,f)=>(c.f[f](e,a),a)),[])),c.u=e=>"assets/js/"+({53:"935f2afb",75:"fe55c584",311:"0768a46b",331:"12eb4ccc",377:"559b7fc6",498:"7410995e",781:"7a52f50e",939:"dab7cbba",1218:"64139f8a",1473:"29ae9d0a",1682:"7bbedb8d",1793:"df866062",2106:"f334516a",2529:"ff6d8346",2694:"2019da93",2778:"0a8705fd",2996:"314d6f6a",3024:"6daf2c8e",3065:"d90eaa59",3237:"1df93b7f",3371:"dd0da6b8",3602:"7628467b",3605:"3899bbcc",3769:"54239609",4282:"9b76f633",4356:"6f7b2bff",4368:"a94703ab",4376:"b026eae7",4431:"8ea2467a",4492:"3023ca43",5148:"9eb89d33",5358:"07f43a9f",5758:"b7a547c0",5993:"b8b5d807",6335:"27d45bb4",6376:"f9f3d11b",6414:"9443e6d3",6706:"6e90cc76",6737:"567499ad",6829:"5d326888",7289:"f8be52c9",7535:"02715c9e",7673:"b5eb131b",7752:"bdcc3237",7918:"17896441",8011:"af747567",8339:"06b20f41",8474:"16e25549",8518:"a7bd4aaa",8593:"7252791a",8802:"e306cb37",8975:"fb87031d",9047:"87878b99",9069:"aad2441e",9521:"f19737d8",9610:"b7aa83bd",9661:"5e95c892",9729:"e97f9a74",9750:"0dbab529",9868:"a608fec9"}[e]||e)+"."+{53:"7a00d4d5",75:"a2a10fe1",311:"9ac38fa5",331:"1b183f1f",377:"74e9cb20",498:"b3eea888",781:"37d40ee9",939:"4f2edf45",1218:"91debe4d",1473:"edf2ce05",1682:"bbd1f6aa",1772:"0343ec06",1793:"b009760e",2106:"9893ad02",2529:"6b3acf46",2694:"1787acbf",2778:"f0d173df",2996:"9457464b",3024:"65987b0b",3065:"7ec42543",3237:"f2c9fdca",3371:"2971a921",3602:"ddeceeda",3605:"91a65b3f",3769:"1cfa7ce7",4282:"e0e73957",4356:"d810ba57",4368:"c9d522e0",4376:"c7b226da",4431:"7efccfb9",4492:"9d557742",5148:"4fc0f424",5358:"393fa255",5758:"62e32b36",5993:"f6a6bd76",6335:"64634c5c",6376:"cda56893",6414:"fd914596",6706:"60c5810f",6737:"2d3892ff",6829:"da4f7c0b",7289:"570f2b94",7535:"5653f38c",7673:"7465a400",7752:"45932a55",7918:"efb635af",8011:"01749577",8339:"a556ad2c",8474:"55e4d0c8",8518:"2c2de4e3",8593:"09f48c39",8802:"036087d4",8975:"922dce17",9047:"e77e8b68",9069:"8eb507d6",9521:"571322b6",9610:"11759812",9661:"d28c4eb1",9729:"80b40b66",9750:"37f9a784",9868:"8fa3e564"}[e]+".js",c.miniCssF=e=>{},c.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),c.o=(e,a)=>Object.prototype.hasOwnProperty.call(e,a),d={},t="kitra-doc:",c.l=(e,a,f,b)=>{if(d[e])d[e].push(a);else{var r,o;if(void 0!==f)for(var n=document.getElementsByTagName("script"),i=0;i{r.onerror=r.onload=null,clearTimeout(s);var t=d[e];if(delete d[e],r.parentNode&&r.parentNode.removeChild(r),t&&t.forEach((e=>e(f))),a)return a(f)},s=setTimeout(l.bind(null,void 0,{type:"timeout",target:r}),12e4);r.onerror=l.bind(null,r.onerror),r.onload=l.bind(null,r.onload),o&&document.head.appendChild(r)}},c.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},c.p="/react-native-kitra/",c.gca=function(e){return e={17896441:"7918",54239609:"3769","935f2afb":"53",fe55c584:"75","0768a46b":"311","12eb4ccc":"331","559b7fc6":"377","7410995e":"498","7a52f50e":"781",dab7cbba:"939","64139f8a":"1218","29ae9d0a":"1473","7bbedb8d":"1682",df866062:"1793",f334516a:"2106",ff6d8346:"2529","2019da93":"2694","0a8705fd":"2778","314d6f6a":"2996","6daf2c8e":"3024",d90eaa59:"3065","1df93b7f":"3237",dd0da6b8:"3371","7628467b":"3602","3899bbcc":"3605","9b76f633":"4282","6f7b2bff":"4356",a94703ab:"4368",b026eae7:"4376","8ea2467a":"4431","3023ca43":"4492","9eb89d33":"5148","07f43a9f":"5358",b7a547c0:"5758",b8b5d807:"5993","27d45bb4":"6335",f9f3d11b:"6376","9443e6d3":"6414","6e90cc76":"6706","567499ad":"6737","5d326888":"6829",f8be52c9:"7289","02715c9e":"7535",b5eb131b:"7673",bdcc3237:"7752",af747567:"8011","06b20f41":"8339","16e25549":"8474",a7bd4aaa:"8518","7252791a":"8593",e306cb37:"8802",fb87031d:"8975","87878b99":"9047",aad2441e:"9069",f19737d8:"9521",b7aa83bd:"9610","5e95c892":"9661",e97f9a74:"9729","0dbab529":"9750",a608fec9:"9868"}[e]||e,c.p+c.u(e)},(()=>{var e={1303:0,532:0};c.f.j=(a,f)=>{var d=c.o(e,a)?e[a]:void 0;if(0!==d)if(d)f.push(d[2]);else if(/^(1303|532)$/.test(a))e[a]=0;else{var t=new Promise(((f,t)=>d=e[a]=[f,t]));f.push(d[2]=t);var b=c.p+c.u(a),r=new Error;c.l(b,(f=>{if(c.o(e,a)&&(0!==(d=e[a])&&(e[a]=void 0),d)){var t=f&&("load"===f.type?"missing":f.type),b=f&&f.target&&f.target.src;r.message="Loading chunk "+a+" failed.\n("+t+": "+b+")",r.name="ChunkLoadError",r.type=t,r.request=b,d[1](r)}}),"chunk-"+a,a)}},c.O.j=a=>0===e[a];var a=(a,f)=>{var d,t,b=f[0],r=f[1],o=f[2],n=0;if(b.some((a=>0!==e[a]))){for(d in r)c.o(r,d)&&(c.m[d]=r[d]);if(o)var i=o(c)}for(a&&a(f);n{"use strict";var e,a,d,f,t,b={},r={};function c(e){var a=r[e];if(void 0!==a)return a.exports;var d=r[e]={id:e,loaded:!1,exports:{}};return b[e].call(d.exports,d,d.exports,c),d.loaded=!0,d.exports}c.m=b,c.c=r,e=[],c.O=(a,d,f,t)=>{if(!d){var b=1/0;for(i=0;i=t)&&Object.keys(c.O).every((e=>c.O[e](d[o])))?d.splice(o--,1):(r=!1,t0&&e[i-1][2]>t;i--)e[i]=e[i-1];e[i]=[d,f,t]},c.n=e=>{var a=e&&e.__esModule?()=>e.default:()=>e;return c.d(a,{a:a}),a},d=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,c.t=function(e,f){if(1&f&&(e=this(e)),8&f)return e;if("object"==typeof e&&e){if(4&f&&e.__esModule)return e;if(16&f&&"function"==typeof e.then)return e}var t=Object.create(null);c.r(t);var b={};a=a||[null,d({}),d([]),d(d)];for(var r=2&f&&e;"object"==typeof r&&!~a.indexOf(r);r=d(r))Object.getOwnPropertyNames(r).forEach((a=>b[a]=()=>e[a]));return b.default=()=>e,c.d(t,b),t},c.d=(e,a)=>{for(var d in a)c.o(a,d)&&!c.o(e,d)&&Object.defineProperty(e,d,{enumerable:!0,get:a[d]})},c.f={},c.e=e=>Promise.all(Object.keys(c.f).reduce(((a,d)=>(c.f[d](e,a),a)),[])),c.u=e=>"assets/js/"+({53:"935f2afb",75:"fe55c584",311:"0768a46b",331:"12eb4ccc",377:"559b7fc6",498:"7410995e",781:"7a52f50e",939:"dab7cbba",1218:"64139f8a",1473:"29ae9d0a",1682:"7bbedb8d",1793:"df866062",2106:"f334516a",2529:"ff6d8346",2694:"2019da93",2778:"0a8705fd",2996:"314d6f6a",3024:"6daf2c8e",3065:"d90eaa59",3237:"1df93b7f",3371:"dd0da6b8",3602:"7628467b",3605:"3899bbcc",3769:"54239609",4282:"9b76f633",4356:"6f7b2bff",4368:"a94703ab",4376:"b026eae7",4431:"8ea2467a",4492:"3023ca43",5148:"9eb89d33",5358:"07f43a9f",5758:"b7a547c0",5993:"b8b5d807",6335:"27d45bb4",6376:"f9f3d11b",6414:"9443e6d3",6706:"6e90cc76",6737:"567499ad",6829:"5d326888",7289:"f8be52c9",7535:"02715c9e",7673:"b5eb131b",7752:"bdcc3237",7918:"17896441",8011:"af747567",8339:"06b20f41",8474:"16e25549",8518:"a7bd4aaa",8593:"7252791a",8802:"e306cb37",8975:"fb87031d",9047:"87878b99",9069:"aad2441e",9521:"f19737d8",9610:"b7aa83bd",9661:"5e95c892",9729:"e97f9a74",9750:"0dbab529",9868:"a608fec9"}[e]||e)+"."+{53:"7a00d4d5",75:"b6476fd6",311:"6ad058c9",331:"01cc15a2",377:"648b9483",498:"7b4ab434",781:"7c984abe",939:"def59de6",1218:"66d41922",1473:"887d96f8",1682:"a6382dcc",1772:"0343ec06",1793:"ce988887",2106:"4c33ab99",2529:"4f1da2ca",2694:"cc87e690",2778:"78d456f1",2996:"604fef9b",3024:"65987b0b",3065:"8117bd13",3237:"f2c9fdca",3371:"efd5a896",3602:"c6c94934",3605:"3a70016b",3769:"609473df",4282:"684a5a3b",4356:"dffbdd17",4368:"c9d522e0",4376:"f5045a37",4431:"cf5456ca",4492:"82c515c6",5148:"175d0b11",5358:"4cce128e",5758:"efb521a7",5993:"a1cee5c3",6335:"322ab96a",6376:"cda56893",6414:"d66cc86f",6706:"ff869b66",6737:"c1846a71",6829:"03338022",7289:"62f3f2b1",7535:"5653f38c",7673:"af0680f9",7752:"e143bb3a",7918:"efb635af",8011:"239af02a",8339:"924bf447",8474:"957ee3b9",8518:"2c2de4e3",8593:"80ea5291",8802:"de363452",8975:"84110516",9047:"83943910",9069:"07b64c8b",9521:"d1f1506f",9610:"e24429c4",9661:"d28c4eb1",9729:"7b933164",9750:"37f9a784",9868:"4cba2dde"}[e]+".js",c.miniCssF=e=>{},c.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),c.o=(e,a)=>Object.prototype.hasOwnProperty.call(e,a),f={},t="kitra-doc:",c.l=(e,a,d,b)=>{if(f[e])f[e].push(a);else{var r,o;if(void 0!==d)for(var n=document.getElementsByTagName("script"),i=0;i{r.onerror=r.onload=null,clearTimeout(s);var t=f[e];if(delete f[e],r.parentNode&&r.parentNode.removeChild(r),t&&t.forEach((e=>e(d))),a)return a(d)},s=setTimeout(l.bind(null,void 0,{type:"timeout",target:r}),12e4);r.onerror=l.bind(null,r.onerror),r.onload=l.bind(null,r.onload),o&&document.head.appendChild(r)}},c.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},c.p="/react-native-kitra/",c.gca=function(e){return e={17896441:"7918",54239609:"3769","935f2afb":"53",fe55c584:"75","0768a46b":"311","12eb4ccc":"331","559b7fc6":"377","7410995e":"498","7a52f50e":"781",dab7cbba:"939","64139f8a":"1218","29ae9d0a":"1473","7bbedb8d":"1682",df866062:"1793",f334516a:"2106",ff6d8346:"2529","2019da93":"2694","0a8705fd":"2778","314d6f6a":"2996","6daf2c8e":"3024",d90eaa59:"3065","1df93b7f":"3237",dd0da6b8:"3371","7628467b":"3602","3899bbcc":"3605","9b76f633":"4282","6f7b2bff":"4356",a94703ab:"4368",b026eae7:"4376","8ea2467a":"4431","3023ca43":"4492","9eb89d33":"5148","07f43a9f":"5358",b7a547c0:"5758",b8b5d807:"5993","27d45bb4":"6335",f9f3d11b:"6376","9443e6d3":"6414","6e90cc76":"6706","567499ad":"6737","5d326888":"6829",f8be52c9:"7289","02715c9e":"7535",b5eb131b:"7673",bdcc3237:"7752",af747567:"8011","06b20f41":"8339","16e25549":"8474",a7bd4aaa:"8518","7252791a":"8593",e306cb37:"8802",fb87031d:"8975","87878b99":"9047",aad2441e:"9069",f19737d8:"9521",b7aa83bd:"9610","5e95c892":"9661",e97f9a74:"9729","0dbab529":"9750",a608fec9:"9868"}[e]||e,c.p+c.u(e)},(()=>{var e={1303:0,532:0};c.f.j=(a,d)=>{var f=c.o(e,a)?e[a]:void 0;if(0!==f)if(f)d.push(f[2]);else if(/^(1303|532)$/.test(a))e[a]=0;else{var t=new Promise(((d,t)=>f=e[a]=[d,t]));d.push(f[2]=t);var b=c.p+c.u(a),r=new Error;c.l(b,(d=>{if(c.o(e,a)&&(0!==(f=e[a])&&(e[a]=void 0),f)){var t=d&&("load"===d.type?"missing":d.type),b=d&&d.target&&d.target.src;r.message="Loading chunk "+a+" failed.\n("+t+": "+b+")",r.name="ChunkLoadError",r.type=t,r.request=b,f[1](r)}}),"chunk-"+a,a)}},c.O.j=a=>0===e[a];var a=(a,d)=>{var f,t,b=d[0],r=d[1],o=d[2],n=0;if(b.some((a=>0!==e[a]))){for(f in r)c.o(r,f)&&(c.m[f]=r[f]);if(o)var i=o(c)}for(a&&a(d);n Accordion List | Kitra - + @@ -15,6 +15,6 @@

ImportUsage​

import { AccordionList } from "@tra-tech/react-native-kitra";    

const AccordionListData =[
  {name:'React',value:1},
  {name:'Native',value:2},
  {name:'Kitra',value:3},
  {name:'React Native Kitra',value:4}]

const App =()=>{
    return(
        <View style={{ backgroundColor: '#8973CD', padding: 10, borderRadius: 5 }}>
          <AccordionList
            displayedItem={x => x.name}
            itemDisplay={x => x.name}
            onSelect={x => console.log(x)}
            label="Grey Daze"
            left={() => <MaterialCommunityIcons name="flower-tulip" size={24} color="dimgrey" />}
            data={AccordionListData}
          />
        </View>
    )
 }

 export default App;

Props​

-
NameTypeRequiredDescription
dataArray<any> YesThe data to render in the accordion list.
labelstringNoThe label to display at the top of the accordion list.
left(expanded: boolean) => React.ReactNode NoAn optional function that returns a React element to display on the left side of the label.
right(expanded: boolean) => React.ReactNodeNoAn optional function that returns a React element to display on the right side of the label.
labelContainerStyleStyleProp<ViewStyle>NoAdditional styles to apply to the label container.
labelStyleStyleProp<TextStyle>NoAdditional styles to apply to the label text.
rowTextStyleStyleProp<TextStyle>NoAdditional styles to apply to the row text.
rowStyleStyleProp<ViewStyle>NoAdditional styles to apply to each row container.
onSelect(item: any) => void YesA callback function that will be called when a row is selected.
itemDisplay(item: any) => string | JSX.Element | null YesA function that returns a string or JSX element to display for each row.
themeUIThemeNoThe theme to use for the component.
typographyUITypographyNoThe typography to use for the component.
+
NameTypeRequiredDescription
dataArray<any> YesThe data to render in the accordion list.
labelstringNoThe label to display at the top of the accordion list.
left(expanded: boolean) => React.ReactNode NoAn optional function that returns a React element to display on the left side of the label.
right(expanded: boolean) => React.ReactNodeNoAn optional function that returns a React element to display on the right side of the label.
labelContainerStyleStyleProp<ViewStyle>NoAdditional styles to apply to the label container.
labelStyleStyleProp<TextStyle>NoAdditional styles to apply to the label text.
rowTextStyleStyleProp<TextStyle>NoAdditional styles to apply to the row text.
rowStyleStyleProp<ViewStyle>NoAdditional styles to apply to each row container.
onSelect(item: any) => void YesA callback function that will be called when a row is selected.
itemDisplay(item: any) => string | JSX.Element | null YesA function that returns a string or JSX element to display for each row.
themeUIThemeNoThe theme to use for the component.
typographyUITypographyNoThe typography to use for the component.
\ No newline at end of file diff --git a/docs/components/activity-indicator/index.html b/docs/components/activity-indicator/index.html index 402c63b..93c9c03 100644 --- a/docs/components/activity-indicator/index.html +++ b/docs/components/activity-indicator/index.html @@ -4,7 +4,7 @@ Activity Indicator | Kitra - + @@ -15,6 +15,6 @@

ImportUsage​

import { ActivityIndicator } from '@tra-tech/react-native-kitra';

const App = () => (
  <ActivityIndicator />
);

export default App;

Props​

-
Prop nameTypeRequiredDescription
childrenReact.ReactNodeNoLoading indicator to display.
themeUITheme NoThe theme to use for the component.
+
Prop nameTypeRequiredDescription
childrenReact.ReactNodeNoLoading indicator to display.
themeUITheme NoThe theme to use for the component.
\ No newline at end of file diff --git a/docs/components/avatar/index.html b/docs/components/avatar/index.html index 6c977a3..8bf7e8c 100644 --- a/docs/components/avatar/index.html +++ b/docs/components/avatar/index.html @@ -4,7 +4,7 @@ Avatar | Kitra - + @@ -23,6 +23,6 @@

ImportUsage​

import { AvatarGroup } from '@tra-tech/react-native-kitra';
import { View } from 'react-native';

const App = () => (
     <View style={{ alignItems: 'center', flexDirection: 'row', marginTop: 30 }}>
      <AvatarGroup
        avatarLimit={5}
        limitContainerStyle={{ backgroundColor: '#82B98E', style: { fontSize: 10 } }}
        avatarsType={[
          { source: { uri: 'https://randomuser.me/api/portraits/men/62.jpg' } },
          { source: { uri: 'https://randomuser.me/api/portraits/men/40.jpg' } },
          { source: { uri: 'https://randomuser.me/api/portraits/women/26.jpg' } },
          { label: 'Dogus Erdem' },
          { label: 'Ahmet Kagan Yoruk' },
          { label: 'Nadire Kasap' },
        ]}
      />
    </View>
);
export default App;

Props​

-
Prop nameTypeRequiredDescription
avatarsTypeArray<{
source?: ImageSourcePropType,
borderStyle?: 'circular' | 'rounded',
avatarIcon?: React.ReactNode,
containerStyle?: StyleProp<ViewStyle>,
label?: string,
labelStyle?: StyleProp<TextStyle>,
badgePosition?: 'top' | 'bottom',
badgeStyle?: { containerStyle?: StyleProp<ViewStyle>,
textStyle?: StyleProp<TextStyle> },
badgeContent?: React.ReactNode
}> 		YesTakes avatar props into array.
avatarLimitnumberNoLimit of avatars to be listed. Default value: 10
limitContainerStyle'circular' | 'rounded'NoAdditional styles to apply to the limit container.
themeUITheme NoThe theme to use for the component.
typographyUITypography NoThe typography to use for the component.
+
Prop nameTypeRequiredDescription
avatarsTypeArray<{
source?: ImageSourcePropType,
borderStyle?: 'circular' | 'rounded',
avatarIcon?: React.ReactNode,
containerStyle?: StyleProp<ViewStyle>,
label?: string,
labelStyle?: StyleProp<TextStyle>,
badgePosition?: 'top' | 'bottom',
badgeStyle?: { containerStyle?: StyleProp<ViewStyle>,
textStyle?: StyleProp<TextStyle> },
badgeContent?: React.ReactNode
}> 		YesTakes avatar props into array.
avatarLimitnumberNoLimit of avatars to be listed. Default value: 10
limitContainerStyle'circular' | 'rounded'NoAdditional styles to apply to the limit container.
themeUITheme NoThe theme to use for the component.
typographyUITypography NoThe typography to use for the component.
\ No newline at end of file diff --git a/docs/components/badge/index.html b/docs/components/badge/index.html index 1b5a493..b07b06e 100644 --- a/docs/components/badge/index.html +++ b/docs/components/badge/index.html @@ -4,7 +4,7 @@ Badge | Kitra - + @@ -15,6 +15,6 @@

ImportUsage​

import { Avatar, Chip, Icon } from '@tra-tech/react-native-kitra';
import { View, StyleSheet } from 'react-native';
import Badge from '../../components/Badge';

const App = () => (
  <View style={{ alignItems: 'center', flexDirection: 'row' }}>
    <Badge containerStyle={{ margin: 10, backgroundColor: '#9A9A9A' }} borderStyle="rectangular" size="medium" icon={<AntDesign name="apple1" color="#fff" />} />
    <Badge containerStyle={{ margin: 10, backgroundColor: '#FF3434' }} borderStyle="rectangular" size="medium" icon={<AntDesign name="android1" color="#fff" />} />
  </View>
);

const style = StyleSheet.create({
  container: { flex: 1, alignItems: 'center', justifyContent: 'center', rowGap: 20 },
});

export default App;

Props​

-
Prop nameTypeRequiredDescription
visiblebooleanNoVisibility status. Default value: true
label string | number NoThe number or text to be written in the badge.
size 'small' | 'medium'NoThe size of the badge. Default value: 'medium'
containerStyleStyleProp<ViewStyle>NoAdditional styles to apply to the badge container.
labelStyleStyleProp<TextStyle>NoAdditional styles to apply to the children text.
borderStyle'circular' | 'rectangular'NoSpecifies the border type of the badge. Default value: 'circular'
iconReact.ReactNodeNoIcon to be added to badge.
childrenReact.ReactNodeYesA required prop that represents the content to display within the Badge component.
position'top-right'| 'top-left' | 'bottom-left' | 'bottom-right'NoPosition the Badge component. Default value: 'top-right'
themeUITheme NoThe theme to use for the component.
typographyUITypographyNoThe typography to use for the component.
+
Prop nameTypeRequiredDescription
visiblebooleanNoVisibility status. Default value: true
label string | number NoThe number or text to be written in the badge.
size 'small' | 'medium'NoThe size of the badge. Default value: 'medium'
containerStyleStyleProp<ViewStyle>NoAdditional styles to apply to the badge container.
labelStyleStyleProp<TextStyle>NoAdditional styles to apply to the children text.
borderStyle'circular' | 'rectangular'NoSpecifies the border type of the badge. Default value: 'circular'
iconReact.ReactNodeNoIcon to be added to badge.
childrenReact.ReactNodeYesA required prop that represents the content to display within the Badge component.
position'top-right'| 'top-left' | 'bottom-left' | 'bottom-right'NoPosition the Badge component. Default value: 'top-right'
themeUITheme NoThe theme to use for the component.
typographyUITypographyNoThe typography to use for the component.
\ No newline at end of file diff --git a/docs/components/button/index.html b/docs/components/button/index.html index 2faf61e..84d19dd 100644 --- a/docs/components/button/index.html +++ b/docs/components/button/index.html @@ -4,7 +4,7 @@ Button | Kitra - + @@ -17,6 +17,6 @@

UsageProps​

PropTypeRequiredDescription
size'small' | 'medium' | 'large'NoThe size of the button. Default value: 'medium'.
disabledbooleanNoDetermines whether the button is disabled. Default value: false.
labelstringNoThe label to display on the button.
iconPosition'left' | 'right'NoThe position of the icon in relation to the label. Default value: 'left'.
styleStyleProp<ViewStyle>NoThe style object for the button.
textStyleStyleProp<TextStyle>NoThe style object for the button's text.
childrenReact.ReactNodeNoIcons to be rendered inside the button.
statusStyleActionPropsNoContains style definitions for a button component's normal, focused, and disabled states, specifying background and text colors.
themeUIThemeNoThe theme to use for the component.
typographyUITypographyNoThe typography to use for the component.
...PressablePropsPressableNoAny additional props to be passed to the underlying Pressable component.

Types​

-
NameType
ActionProps { default:{container: {backgroundColor: string},text: {color: string}},
focused: {container: {backgroundColor: string},text: {color: string}},
disabled: {container: { backgroundColor: string},text:{color:string}}}
+
NameType
ActionProps { default:{container: {backgroundColor: string},text: {color: string}},
focused: {container: {backgroundColor: string},text: {color: string}},
disabled: {container: { backgroundColor: string},text:{color:string}}}
\ No newline at end of file diff --git a/docs/components/checkbox/index.html b/docs/components/checkbox/index.html index 5ca0742..59b05a9 100644 --- a/docs/components/checkbox/index.html +++ b/docs/components/checkbox/index.html @@ -4,7 +4,7 @@ CheckBox | Kitra - + @@ -15,6 +15,6 @@

ImportUsage​

import { CheckBox } from '@tra-tech/react-native-kitra';
import { useState } from 'react';
import { View } from 'react-native';

const App = () => {
  const [value, setValue] = useState(false);

  return (
    <View style={{ justifyContent: 'center', flex: 1 }}>
      <CheckBox
        style={{ alignSelf: 'center' }}
        value={value}
        onChange={event => console.log(event)}
        onPress={() => setValue(prev => !prev)}
        iconColor="red"
      />
    </View>
  );
};

export default App;

Props​

-
Prop nameTypeRequiredDescription
valuebooleanNoDetermines whether the checkbox is checked or unchecked
onChange(value: boolean) => voidNoA callback function that is called when the checkbox is pressed, with the new state value as an argument
styleStyleProp<ViewStyle>NoAdditional styles to apply to the checkbox container
disabledbooleanNoDetermines whether the checkbox is disabled or not
iconColorstringNoThe color of the checkmark icon
themeUIThemeNoAn object containing the color palette used for the checkbox
...TouchableOpacityProps...TouchableOpacityPropsNoAny additional props to be passed to the underlying TouchableOpacity component.
+
Prop nameTypeRequiredDescription
valuebooleanNoDetermines whether the checkbox is checked or unchecked
onChange(value: boolean) => voidNoA callback function that is called when the checkbox is pressed, with the new state value as an argument
styleStyleProp<ViewStyle>NoAdditional styles to apply to the checkbox container
disabledbooleanNoDetermines whether the checkbox is disabled or not
iconColorstringNoThe color of the checkmark icon
themeUIThemeNoAn object containing the color palette used for the checkbox
...TouchableOpacityProps...TouchableOpacityPropsNoAny additional props to be passed to the underlying TouchableOpacity component.
\ No newline at end of file diff --git a/docs/components/chip/index.html b/docs/components/chip/index.html index 960d2c9..a1cc692 100644 --- a/docs/components/chip/index.html +++ b/docs/components/chip/index.html @@ -4,7 +4,7 @@ Chip | Kitra - + @@ -15,6 +15,6 @@

ImportUsage​

import { Chip } from '@tra-tech/react-native-kitra';
import { View } from 'react-native';

const App = () => (
 <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <Chip
        icon={{ iconName: 'penguin', iconPosition: 'left', iconType: 'material-community' }}
        label="Small"
        size='large'
        onChange={e => console.log(e)}
        colorStyle={{ backgroundColor: 'tomato', selectBackgroundColor: 'white', selectTitleColor: 'tomato', titleColor: 'white' }}
      />
  </View>
);

export default App;

Props​

-
Prop nameTypeRequiredDescription
labelstringNoText of chip.
valuebooleanNoStatus of chip. Default value: 'false'
textStyleStyleProp<TextStyle>NoAdditional styles to apply to the chip.
styleStyleProp<ViewStyle>NoAdditional styles to apply to the label.
icon { iconName: string,
iconType: IconType,
iconPosition: 'left' | 'right' }		NoAdds an icon to a component with options for specifying the icon's name, type, and position , enabling quick customization of the component's appearance.
colorStyle { backgroundColor: string, selectBackgroundColor: string, selectTitleColor: string,
titleColor: string }		NoStyles for chip color.
size 'small' | 'medium' | 'large'NoThe size of the chip. Default value: 'small'
onChange(event:boolean)=> voidYesReturns whether the chip is selected.
disableboolean NoIf true the user won't be able to toggle the chip. Default value: false
themeUITheme NoThe theme to use for the component.
typographyUITypographyNoThe typography to use for the component.
+
Prop nameTypeRequiredDescription
labelstringNoText of chip.
valuebooleanNoStatus of chip. Default value: 'false'
textStyleStyleProp<TextStyle>NoAdditional styles to apply to the chip.
styleStyleProp<ViewStyle>NoAdditional styles to apply to the label.
icon { iconName: string,
iconType: IconType,
iconPosition: 'left' | 'right' }		NoAdds an icon to a component with options for specifying the icon's name, type, and position , enabling quick customization of the component's appearance.
colorStyle { backgroundColor: string, selectBackgroundColor: string, selectTitleColor: string,
titleColor: string }		NoStyles for chip color.
size 'small' | 'medium' | 'large'NoThe size of the chip. Default value: 'small'
onChange(event:boolean)=> voidYesReturns whether the chip is selected.
disableboolean NoIf true the user won't be able to toggle the chip. Default value: false
themeUITheme NoThe theme to use for the component.
typographyUITypographyNoThe typography to use for the component.
\ No newline at end of file diff --git a/docs/components/divider/index.html b/docs/components/divider/index.html index 3bbb8e4..f7dae45 100644 --- a/docs/components/divider/index.html +++ b/docs/components/divider/index.html @@ -4,7 +4,7 @@ Divider | Kitra - + @@ -15,6 +15,6 @@

ImportUsage​

import { Divider } from '@tra-tech/react-native-kitra';
import { View } from 'react-native';

const App = () => (
  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', rowGap: 50 }}>
    <Divider borderStyle="dashed" color="red" width={350} />
    <Divider borderStyle="dotted" color="purple" width={300} />
    <Divider borderStyle="solid" color="green" width={200} />
  </View>
);

export default App;

Props​

-
Prop nameTypeRequiredDescription
borderStyle'solid' | 'dotted' | 'dashed' NoAdditional styles to apply to the divider border style. Default value: 'solid'
widthnumberNoWidth of divider. Default value: '100%'
colorstringNoColor of divider.
styleStyleProp<ViewStyle>NoAdditional styles to apply to the divider.
themeUITheme NoThe UI theme to use for the component.
+
Prop nameTypeRequiredDescription
borderStyle'solid' | 'dotted' | 'dashed' NoAdditional styles to apply to the divider border style. Default value: 'solid'
widthnumberNoWidth of divider. Default value: '100%'
colorstringNoColor of divider.
styleStyleProp<ViewStyle>NoAdditional styles to apply to the divider.
themeUITheme NoThe UI theme to use for the component.
\ No newline at end of file diff --git a/docs/components/dropdown/index.html b/docs/components/dropdown/index.html index d06305b..fa7a55a 100644 --- a/docs/components/dropdown/index.html +++ b/docs/components/dropdown/index.html @@ -4,7 +4,7 @@ Dropdown | Kitra - + @@ -15,6 +15,6 @@

ImportUsage​

import { Dropdown } from '@tra-tech/react-native-kitra';
import { useState } from 'react';
import { View } from 'react-native';

const data = [{ label: 'Item 1', value: 1 }, { label: 'Item 2', value: 2 }, { label: 'Item 3', value: 3 }, { label: 'Item 4', value: 4 }, { label: 'Item 5', value: 5 }];

const App = () => {
  const [select, setSelect] = useState();
  return (
    <View style={{ rowGap: 100 }}>
      <View style={{ zIndex: 101, flex: 1 }}>
        <Dropdown
          multiple
          selectall
          containerStyle={{ marginTop: 20 }}
          buttonTitle="Please Select"
          buttonTextStyle={{ color: 'black', marginLeft: 18 }}
          rowTextStyle={{ color: '#8973CD' }}
          buttonBackgrounColor={{ focusBackground: '#8973CD', defaultBackground: '#F9F8FD' }}
          displayLength={4}
          rowStyle={{ backgroundColor: '#F9F8FD' }}
          buttonStyle={{ width: '100%', height: 51, borderRadius: 50 }}
          listContainerStyle={{ backgroundColor: '#F9F8FD' }}
          onSelect={x => setSelect(x.label)}
          displayedButtonValue={x => x.label}
          displayedRowValue={x => x.label}
          data={data}
        />
      </View>
      <View style={{ flex: 1 }}>
        <Dropdown
          selectall
          containerStyle={{ marginTop: 20 }}
          buttonTitle="Please Select"
          buttonTextStyle={{ color: 'black', marginLeft: 18 }}
          rowTextStyle={{ color: '#8973CD' }}
          buttonBackgrounColor={{ focusBackground: '#8973CD', defaultBackground: '#F9F8FD' }}
          displayLength={4}
          rowStyle={{ backgroundColor: '#F9F8FD' }}
          buttonStyle={{ width: '100%', height: 51, borderRadius: 50 }}
          listContainerStyle={{ backgroundColor: '#F9F8FD' }}
          onSelect={x => setSelect(x.value)}
          displayedButtonValue={x => x.label}
          displayedRowValue={x => x.label}
          data={data}
        />
      </View>
    </View>
  );
};

export default App;

Props​

-
Prop nameTypeRequiredDescription
multiplebooleanNoDetermines whether the dropdown should allow multiple selections. Default value: false
disabledbooleanNoDetermines whether the dropdown is disabled. Default value: false.
left(isVisible:boolean)=>React.ReactNodeNoA React node that will be created to the left of the dropdown button and return its visible.
right(isVisible:boolean)=>React.ReactNodeNoA React node that will be created to the right of the dropdown button and return its visible.
data Array<(string | object )> YesAn array of objects or strings to be used as options in the dropdown list.
displayedRowValue(item: string | object) => anyYesA function that takes an item from the data array and returns a value to be displayed in the dropdown list.
displayedButtonValue(item: string | object) => any YesA function that takes an item from the data array and returns a value to be displayed on the dropdown button.
listContainerStyleStyleProp<ViewStyle>NoAn object containing styles to be applied to the dropdown list container.
defaultValueArray<string | object>NoAn array of objects or strings to be pre-selected in the dropdown.
displayLengthnumberNoThe number of items to display in the button.
buttonTitlestringNoThe default text to be displayed on the dropdown button when no options are selected.
rowStyleStyleProp<ViewStyle>NoAn object containing styles to be applied to each item in the dropdown list.
buttonStyleStyleProp<ViewStyle>NoAn object containing styles to be applied to the dropdown button.
buttonTextStyleStyleProp<TextStyle>NoAn object containing styles to be applied to the text inside the dropdown button.
selectallbooleanNoWhether to include a "Select All" option in the dropdown.
onSelect(item: Array<string> | Array<object> | string | object) => voidNoA function to be called whenever an item is selected in the dropdown.
onComplete(item: object | string) => void NoA function to be called whenever submit button pressed.
rowTextStyleStyleProp<TextStyle>NoAn object containing styles to be applied to the text inside each item in the dropdown list.
containerStyleStyleProp<ViewStyle>NoAn object containing styles to be applied to the dropdown container.
buttonBackgrounColor{ focusBackground: string, defaultBackground: string }NoUsed to customize the background color of the dropdown.
iconStyle{ color: string,
container: StyleProp<ViewStyle> }		NoThe color property determines the icon's color, and the container property defines the style of the container that holds the icon.
autoPositionbooleanNoControls whether the dropdown component's dropdown menu is positioned automatically. Default value: true
themeUIThemeNoThe theme to use for the component.
typographyUITypographyNoThe typography to use for the component.
+
Prop nameTypeRequiredDescription
multiplebooleanNoDetermines whether the dropdown should allow multiple selections. Default value: false
disabledbooleanNoDetermines whether the dropdown is disabled. Default value: false.
left(isVisible:boolean)=>React.ReactNodeNoA React node that will be created to the left of the dropdown button and return its visible.
right(isVisible:boolean)=>React.ReactNodeNoA React node that will be created to the right of the dropdown button and return its visible.
data Array<(string | object )> YesAn array of objects or strings to be used as options in the dropdown list.
displayedRowValue(item: string | object) => anyYesA function that takes an item from the data array and returns a value to be displayed in the dropdown list.
displayedButtonValue(item: string | object) => any YesA function that takes an item from the data array and returns a value to be displayed on the dropdown button.
listContainerStyleStyleProp<ViewStyle>NoAn object containing styles to be applied to the dropdown list container.
defaultValueArray<string | object>NoAn array of objects or strings to be pre-selected in the dropdown.
displayLengthnumberNoThe number of items to display in the button.
buttonTitlestringNoThe default text to be displayed on the dropdown button when no options are selected.
rowStyleStyleProp<ViewStyle>NoAn object containing styles to be applied to each item in the dropdown list.
buttonStyleStyleProp<ViewStyle>NoAn object containing styles to be applied to the dropdown button.
buttonTextStyleStyleProp<TextStyle>NoAn object containing styles to be applied to the text inside the dropdown button.
selectallbooleanNoWhether to include a "Select All" option in the dropdown.
onSelect(item: Array<string> | Array<object> | string | object) => voidNoA function to be called whenever an item is selected in the dropdown.
onComplete(item: object | string) => void NoA function to be called whenever submit button pressed.
rowTextStyleStyleProp<TextStyle>NoAn object containing styles to be applied to the text inside each item in the dropdown list.
containerStyleStyleProp<ViewStyle>NoAn object containing styles to be applied to the dropdown container.
buttonBackgrounColor{ focusBackground: string, defaultBackground: string }NoUsed to customize the background color of the dropdown.
iconStyle{ color: string,
container: StyleProp<ViewStyle> }		NoThe color property determines the icon's color, and the container property defines the style of the container that holds the icon.
autoPositionbooleanNoControls whether the dropdown component's dropdown menu is positioned automatically. Default value: true
themeUIThemeNoThe theme to use for the component.
typographyUITypographyNoThe typography to use for the component.
\ No newline at end of file diff --git a/docs/components/icon/index.html b/docs/components/icon/index.html index f7fa53e..9d57bb1 100644 --- a/docs/components/icon/index.html +++ b/docs/components/icon/index.html @@ -4,7 +4,7 @@ Icon | Kitra - + @@ -15,6 +15,6 @@

ImportImport​

import { Icon } from '@tra-tech/react-native-kitra';
import { View } from 'react-native';

const App = () => (
  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', rowGap: 20 }}>
    <Icon name="penguin" type="material-community" size={60} color="#8973CD" />
    <Icon name="plus" type="ant-design" size={40} color="#F9F8FD" />
  </View>
);

export default App;

Props​

-
Prop nameTypeRequiredDescription
typeIcon SetsNoName of icon set. Default value: 'ionicons'.
namestringYesName of icon.
colorstringNoColor of icon.
sizenumberYesSize of icon.
allowFontScalingbooleanYesSpecifies whether fonts should scale to respect Text Size accessibility settings. Default value: true.
styleStyleProp<ViewStyle>NoAdditional styles to apply to the divider.
themeUITheme NoThe UI theme to use for the component.
+
Prop nameTypeRequiredDescription
typeIcon SetsNoName of icon set. Default value: 'ionicons'.
namestringYesName of icon.
colorstringNoColor of icon.
sizenumberYesSize of icon.
allowFontScalingbooleanYesSpecifies whether fonts should scale to respect Text Size accessibility settings. Default value: true.
styleStyleProp<ViewStyle>NoAdditional styles to apply to the divider.
themeUITheme NoThe UI theme to use for the component.
\ No newline at end of file diff --git a/docs/components/menu/index.html b/docs/components/menu/index.html index 6ddc019..4b34578 100644 --- a/docs/components/menu/index.html +++ b/docs/components/menu/index.html @@ -4,7 +4,7 @@ Menu | Kitra - + @@ -15,6 +15,6 @@

ImportUsage​

import { Menu, Icon } from '@tra-tech/react-native-kitra';
import { View } from 'react-native';

const MenuData = [  
{ label: 'Add',left: <Icon type="antdesign" name="addfolder" size={17} color="#D7D1E9" />,right: <Icon type="antdesign" name="addfile" size={17} color="#D7D1E9" />,onPress(){console.log('pressed')}},
{ label: 'Delete', left: <Icon type="antdesign" name="delete" size={17} color="#D7D1E9" /> },
{ label: 'Update', left: <Icon type="antdesign" name="upcircleo" size={17} color="#D7D1E9" /> },
{ label: 'Skip', right: <Icon type="antdesign" name="fastforward" size={12} color="#D7D1E9" /> }];

const App = () => (
  <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1 }}>
    <Menu
      menuStyle={{ backgroundColor: '#8973CD' }}
      button={() => <Icon name="plus" type="ant-design" size={30} color="#8973CD" />}
      labelStyle={{ color: '#D7D1E9' }}
      dividerColor="#EDEAF8"
      items={MenuData}
    />
  </View>
);

export default App;

Props​

-
Prop nameTypeRequiredDescription
itemsArray<{label:string,
left?: React.ReactNode, right?:React.ReactNode, onPress ?: ()=>void}>		YesItems to be listed in the menu.
containerStyleStyleProp<ViewStyle>NoAdditional styles to apply to the menu container.
labelStyleStyleProp<TextStyle>NoAdditional styles to apply to the label text.
rowStyleStyleProp<TextStyle>NoAdditional styles to apply to the row container.
dividerColorstringNoColor of divider.
menuStyleStyleProp<ViewStyle>NoAdditional styles to apply to the menu.
button(isOpen: boolean)=> React.ReactNodeNoThis button opens the menu. It also returns whether the menu is open or closed.
closeOnPressboolean NoIndicates that it should close when an option is selected
themeUITheme NoThe theme to use for the component.
typographyUITypography NoThe typography to use for the component.
+
Prop nameTypeRequiredDescription
itemsArray<{label:string,
left?: React.ReactNode, right?:React.ReactNode, onPress ?: ()=>void}>		YesItems to be listed in the menu.
containerStyleStyleProp<ViewStyle>NoAdditional styles to apply to the menu container.
labelStyleStyleProp<TextStyle>NoAdditional styles to apply to the label text.
rowStyleStyleProp<TextStyle>NoAdditional styles to apply to the row container.
dividerColorstringNoColor of divider.
menuStyleStyleProp<ViewStyle>NoAdditional styles to apply to the menu.
button(isOpen: boolean)=> React.ReactNodeNoThis button opens the menu. It also returns whether the menu is open or closed.
closeOnPressboolean NoIndicates that it should close when an option is selected
themeUITheme NoThe theme to use for the component.
typographyUITypography NoThe typography to use for the component.
\ No newline at end of file diff --git a/docs/components/modal/index.html b/docs/components/modal/index.html index 3a22f3c..9ca1ff7 100644 --- a/docs/components/modal/index.html +++ b/docs/components/modal/index.html @@ -4,7 +4,7 @@ Modal | Kitra - + @@ -15,6 +15,6 @@

ImportUsage​

import { Modal } from '@tra-tech/react-native-kitra';
import { useState } from 'react';
import { Text, TouchableOpacity, View } from 'react-native';

const App = () => {

  const [visible, setVisible] = useState(false);
  
  return (
    <>
      <View style={{ alignItems: 'center' }}>
        <TouchableOpacity onPress={() => setVisible(true)}>
          <Text>Show Modal</Text>
        </TouchableOpacity>
      </View>
      <Modal visible={visible} modalStyle={{ width: '100%', height: '100%', backgroundColor: '#D7D1E9', alignItems: 'center', justifyContent: 'center' }}>
        <TouchableOpacity onPress={() => setVisible(false)}>
          <Text>Hide Modal</Text>
        </TouchableOpacity>
      </Modal>
    </>
  );
};

export default App;

Props​

-
Prop nameTypeRequiredDescription
containerStyleStyleProp<ViewStyle>NoAdditional styles to apply to the modal container.
modalStyleStyleProp<ViewStyle>NoAdditional styles to apply to the modal component.
visiblebooleanNoVisibility status. Default value: false
childrenReact.ReactNodeNoContent of the modal.
...ModalPropsModalPropsNoReact native modal props.
themeUITheme NoThe theme to use for the component.
typographyUITypographyNoThe typography to use for the component.
+
Prop nameTypeRequiredDescription
containerStyleStyleProp<ViewStyle>NoAdditional styles to apply to the modal container.
modalStyleStyleProp<ViewStyle>NoAdditional styles to apply to the modal component.
visiblebooleanNoVisibility status. Default value: false
childrenReact.ReactNodeNoContent of the modal.
...ModalPropsModalPropsNoReact native modal props.
themeUITheme NoThe theme to use for the component.
typographyUITypographyNoThe typography to use for the component.
\ No newline at end of file diff --git a/docs/components/pagerview/index.html b/docs/components/pagerview/index.html index be8461e..aacca0c 100644 --- a/docs/components/pagerview/index.html +++ b/docs/components/pagerview/index.html @@ -4,7 +4,7 @@ Pagerview | Kitra - + @@ -15,6 +15,6 @@

ImportUsage​

import { PagerView } from '@tra-tech/react-native-kitra';

import { Text, View, StyleSheet } from 'react-native';

const App = () => (
  <View style={{  flex: 1 }}>
    <PagerView containerStyle={{ marginTop: 10 }} >
      <View key="React" style={style.itemContainer}>
        <Text>Pager</Text>
      </View>
      <View key="Native" style={style.itemContainer}>
        <Text>View</Text>
      </View>
      <View key="Kitra" style={style.itemContainer}>
        <Text>Component</Text>
      </View>
    </PagerView>
  </View>
);

const style = StyleSheet.create({
  itemContainer: { flex: 1, alignItems: 'center', justifyContent: 'center' },
});

export default App;

Props​

-
Prop nameTypeRequiredDescription
childrenReact.ReactNodeYesA required prop that represents the content to display within the PagerView component.
containerStyleStyleProp<ViewStyle>NoAdditional styles to apply to the pager view container.
pageContainerStyleStyleProp<ViewStyle>NoAdditional styles to apply to the page container.
headerTextColor{select: string,
default: string}		NoText colors of header text.
headerSliderStyleStyleProp<ViewStyle>NoStyle of header slider.
headerContainerStyleStyleProp<ViewStyle>NoStyle of header slider container.
headerTextStyleStyleProp<TextStyle>NoText style of header text.
injectPagerRefbooleanNoAn optional boolean prop that determines whether to inject the PagerView reference into each child component's props. Default value: false
showDividerbooleanNoDetermines whether the divider is shown or not. Default value:true
dividerStyleStyleProp<ViewStyle>NoStyle of divider
dividerColorstringNoColor of divider
iconsReact.ReactElement<typeof Icon> []NoIcon list for header texts.
themeUITheme NoThe theme to use for the component.
typographyUITypographyNoThe typography to use for the component.
+
Prop nameTypeRequiredDescription
childrenReact.ReactNodeYesA required prop that represents the content to display within the PagerView component.
containerStyleStyleProp<ViewStyle>NoAdditional styles to apply to the pager view container.
pageContainerStyleStyleProp<ViewStyle>NoAdditional styles to apply to the page container.
headerTextColor{select: string,
default: string}		NoText colors of header text.
headerSliderStyleStyleProp<ViewStyle>NoStyle of header slider.
headerContainerStyleStyleProp<ViewStyle>NoStyle of header slider container.
headerTextStyleStyleProp<TextStyle>NoText style of header text.
injectPagerRefbooleanNoAn optional boolean prop that determines whether to inject the PagerView reference into each child component's props. Default value: false
showDividerbooleanNoDetermines whether the divider is shown or not. Default value:true
dividerStyleStyleProp<ViewStyle>NoStyle of divider
dividerColorstringNoColor of divider
iconsReact.ReactElement<typeof Icon> []NoIcon list for header texts.
themeUITheme NoThe theme to use for the component.
typographyUITypographyNoThe typography to use for the component.
\ No newline at end of file diff --git a/docs/components/progress-bar/index.html b/docs/components/progress-bar/index.html index ab157af..48f4d51 100644 --- a/docs/components/progress-bar/index.html +++ b/docs/components/progress-bar/index.html @@ -4,7 +4,7 @@ Progress Bar | Kitra - + @@ -15,6 +15,6 @@

ImportUsage​

import { ProgressBar } from '@tra-tech/react-native-kitra';
import { View, StyleSheet } from 'react-native';

const App = () => (
  <View style={style.container}>
    <ProgressBar progress={50} barColor="#EDEAF8" progressColor="#8973CD" />
    <ProgressBar progress={25} />
  </View>
);

const style = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', rowGap: 50 },
});

export default App;

Props​

-
Prop NameTypeRequiredDescription
progressnumberNoThe progress value as a percentage. Default value: 0.
barColorstringNoThe background color of the progress bar.
progressColorstringNoThe color of the progress bar.
progressStyleStyleProp<ViewStyle>NoStyle object to be applied to the progress bar.
themeUIThemeNoThe theme to use for the component.
+
Prop NameTypeRequiredDescription
progressnumberNoThe progress value as a percentage. Default value: 0.
barColorstringNoThe background color of the progress bar.
progressColorstringNoThe color of the progress bar.
progressStyleStyleProp<ViewStyle>NoStyle object to be applied to the progress bar.
themeUIThemeNoThe theme to use for the component.
\ No newline at end of file diff --git a/docs/components/radio-button/index.html b/docs/components/radio-button/index.html index d7bc8dc..da44628 100644 --- a/docs/components/radio-button/index.html +++ b/docs/components/radio-button/index.html @@ -4,7 +4,7 @@ Radio Button | Kitra - + @@ -15,6 +15,6 @@

ImportUsage​

import { RadioButton } from '@tra-tech/react-native-kitra';
import { View, StyleSheet } from 'react-native';

const App = () => (
  <View style={style.container}>
    <RadioButton style={{ alignSelf: 'center' }} onChange={x => console.log(x)} />
  </View>
);

const style = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center' },
});

export default App;

Props​

-
Prop NameTypeRequiredDescription
onChange(event: boolean) => voidYesA function that is called when the radio button is pressed. The current value of the radio button is passed as an argument to the function.
styleStyleProp<ViewStyle>NoAdditional styles to apply to the radio button container.
themeUIThemeNoThe theme to use for the component.
+
Prop NameTypeRequiredDescription
onChange(event: boolean) => voidYesA function that is called when the radio button is pressed. The current value of the radio button is passed as an argument to the function.
styleStyleProp<ViewStyle>NoAdditional styles to apply to the radio button container.
themeUIThemeNoThe theme to use for the component.
\ No newline at end of file diff --git a/docs/components/slider/index.html b/docs/components/slider/index.html index 62351ee..1116ddd 100644 --- a/docs/components/slider/index.html +++ b/docs/components/slider/index.html @@ -4,7 +4,7 @@ Slider | Kitra - + @@ -15,6 +15,6 @@

ImportUsage​

import { Slider } from '@tra-tech/react-native-kitra';
import { View } from 'react-native';

const App = () => (
  <View>
    <Slider onChangeEnd={e => console.log(e)} showPercentage value={20} />
  </View>
);

export default App;

Props​

-
Prop NameTypeRequiredDescription
showPercentagebooleanNoDetermines whether to show the percentage indicator above the slider button.
onChangeEnd(value: number) => voidYesA callback function that is called when the user releases the slider button. The selected value is passed as an argument to the function.
valuenumberNoThe initial value of the slider. Should be a value between 0 and 100, representing the percentage of the slider's width.
buttonStyleStyleProp<ViewStyle>NoAdditional styles to apply to the slider button.
barStyleStyleProp<ViewStyle>NoAdditional styles to apply to the slider bar.
progressStyleStyleProp<ViewStyle>NoAdditional styles to apply to the progress bar.
themeUIThemeNoThe theme to use for the component.
+
Prop NameTypeRequiredDescription
showPercentagebooleanNoDetermines whether to show the percentage indicator above the slider button.
onChangeEnd(value: number) => voidYesA callback function that is called when the user releases the slider button. The selected value is passed as an argument to the function.
valuenumberNoThe initial value of the slider. Should be a value between 0 and 100, representing the percentage of the slider's width.
buttonStyleStyleProp<ViewStyle>NoAdditional styles to apply to the slider button.
barStyleStyleProp<ViewStyle>NoAdditional styles to apply to the slider bar.
progressStyleStyleProp<ViewStyle>NoAdditional styles to apply to the progress bar.
themeUIThemeNoThe theme to use for the component.
\ No newline at end of file diff --git a/docs/components/speed-dial/index.html b/docs/components/speed-dial/index.html index a7ad34e..db92392 100644 --- a/docs/components/speed-dial/index.html +++ b/docs/components/speed-dial/index.html @@ -4,7 +4,7 @@ Speed Dial | Kitra - + @@ -15,6 +15,6 @@

ImportImport​

import { SpeedDial, Icon } from '@tra-tech/react-native-kitra';

const App = () => (

  <SpeedDial
    variant="flat"
    baseItemBackground="#8973CD"
    items={[
      { icon: <Icon type="material-community" name="penguin" size={20} />, title: 'Penguin', backgroundColor: 'blue' },
      { icon: <Icon type="material-community" name="close" size={20} />, title: 'Close', backgroundColor: 'pink' },
      { icon: <Icon type="material-community" name="plus" size={20} />, title: 'Plus', titleColor: 'red' },
      { icon: <Icon type="material-community" name="penguin" size={20} />, onPress: () => console.log('pressed') },
      { icon: <Icon type="material-community" name="penguin" size={20} /> },
    ]}
  />
);

export default App;

Props​

-
Prop nameTypeRequiredDescription
itemsArray<{
icon?: React.ReactNode,
title?:string,
titleColor?:string,
backgroundColor?:string,
onPress?: ()=> void}>		YesItems to be listed in the speed dial.
baseItemBackgroundstringNoBackground color of base item. Default value: theme.tertiary
variant 'flat' | 'spread' NoRepresents the opening animation. Default value: 'flat'
onChange(event:boolean)=>void NoReturns whether the component is on or off.
baseItemIconReact.ReactNodeNoIcon of base item.
themeUITheme NoThe theme to use for the component.
typographyUITypographyNoThe typography to use for the component.
+
Prop nameTypeRequiredDescription
itemsArray<{
icon?: React.ReactNode,
title?:string,
titleColor?:string,
backgroundColor?:string,
onPress?: ()=> void}>		YesItems to be listed in the speed dial.
baseItemBackgroundstringNoBackground color of base item. Default value: theme.tertiary
variant 'flat' | 'spread' NoRepresents the opening animation. Default value: 'flat'
onChange(event:boolean)=>void NoReturns whether the component is on or off.
baseItemIconReact.ReactNodeNoIcon of base item.
themeUITheme NoThe theme to use for the component.
typographyUITypographyNoThe typography to use for the component.
\ No newline at end of file diff --git a/docs/components/swipe/index.html b/docs/components/swipe/index.html index 6a35770..2e30a4b 100644 --- a/docs/components/swipe/index.html +++ b/docs/components/swipe/index.html @@ -4,7 +4,7 @@ Swipe | Kitra - + @@ -17,6 +17,6 @@

UsageProps​

NameTypeRequiredDescription
childrenReact.ReactNodeNoThe content to be wrapped by the Swipeable component.
variant'radius'|
'no-radius' 		NoDetermines whether to use a rounded border radius on the component. Default value: 'no-radius'
rightActionsArray<ActionProps>NoAn array of objects representing the right swipe actions to be rendered. Each object can optionally contain a text string and can optionally contain an icon React component.
leftActionActionPropsNoAn object representing the left swipe action to be rendered. The object can optionally contain a text string and can optionally contain an icon React component.
themeUIThemeNoAn object containing colors and other styling properties used by the component.
typographyUITypographyNoAn object containing font sizes and styles used by the component.

Types​

-
NameType
ActionPropstext?: string, style?: StyleProp<ViewStyle>, icon?: React.ReactNode,
textStyle?: StyleProp<TextStyle>, onPress: (ref:React.RefObject<Swipeable>)=>void
+
NameType
ActionPropstext?: string, style?: StyleProp<ViewStyle>, icon?: React.ReactNode,
textStyle?: StyleProp<TextStyle>, onPress: (ref:React.RefObject<Swipeable>)=>void
\ No newline at end of file diff --git a/docs/components/switch/index.html b/docs/components/switch/index.html index 723b6da..94004a7 100644 --- a/docs/components/switch/index.html +++ b/docs/components/switch/index.html @@ -4,7 +4,7 @@ Switch | Kitra - + @@ -15,6 +15,6 @@

ImportImport​

import { Switch } from '@tra-tech/react-native-kitra';
import { useState } from 'react';
import { View } from 'react-native';

const App = () => {
  const [isEnabled, setIsEnabled] = useState(false);
  return (
    <View style={{ alignItems: 'center' }}>
      <Switch
        onValueChange={() => setIsEnabled(!isEnabled)}
        value={isEnabled}
      />
    </View>
  );
};

export default App;

Props​

-
Prop nameTypeRequiredDescription
...SwitchPropsSwitchPropsNoAny additional props to be passed to the underlying Switch component.
themeUITheme NoThe theme to use for the component.
+
Prop nameTypeRequiredDescription
...SwitchPropsSwitchPropsNoAny additional props to be passed to the underlying Switch component.
themeUITheme NoThe theme to use for the component.
\ No newline at end of file diff --git a/docs/components/text-input/index.html b/docs/components/text-input/index.html index 5a20075..1496552 100644 --- a/docs/components/text-input/index.html +++ b/docs/components/text-input/index.html @@ -4,7 +4,7 @@ Text Input | Kitra - + @@ -15,6 +15,6 @@

ImportUsage​

import { TextInput, Icon } from '@tra-tech/react-native-kitra';
import { View } from 'react-native';

const App = () => (
  <View style={{ justifyContent: 'center', flex: 1 }}>
    <TextInput
      label="E-mail"
      size="large"
      left={<Icon type="ant-design" name="check" size={20} />}
      right={<Icon type="ant-design" name="apple1" size={20} />}
      count
      defaultValue="Default Value"
      maxLength={20}
      helperText="Normal"
      errorMessage="ERROR"
    />
  </View>
);

export default App;

Props​

-
Prop nameTypeRequiredDescription
size'small' | 'medium' | 'large'NoThe size of the text input. Default Value: 'medium'
iconPosition'left' | 'right' NoLocation of the icon.
labelColor{focus:string, default:string}NoLabel color for focus and unfocus status
helperTextstringNoText of helper text.
helperTextStyleStyleProp<TextStyle>NoAdditional styles to apply to the helper text.
variant'filled' | 'outlined'NoVariant of the TextInput. Default value: 'filled' ,
containerStyleStyleProp<TextStyle>NoStyle of outter input container.
inputContainerStyleStyleProp<TextStyle>NoStyle of inner input container.
labelContainerStyleStyleProp<TextStyle>NoStyle of label container.
countbooleanNoShows the number of text input characters. Default value: false.
labelstringNoThe text to use for the floating label.
labelStyleStyleProp<TextStyle>NoAdditional styles to apply to the label text.
editablebooleanNoIf false, text is not editable. Default value: true.
inputStyleStyleProp<ViewStyle>NoAdditional styles to apply to the text input.
errorMessagestringNoError message.
errorboolean NoIf error is true error message is shown.
leftReact.ReactNodeNoUsed to add a react node to the left of the text input.
rightReact.ReactNodeNoUsed to add a react node to the right of the text input.
...TextInputPropsTextInputPropsNoAny additional props to be passed TextInput component.
themeUITheme NoThe UI theme to use for the component.
typographyUITypography NoThe UI typography to use for the component.
+
Prop nameTypeRequiredDescription
size'small' | 'medium' | 'large'NoThe size of the text input. Default Value: 'medium'
iconPosition'left' | 'right' NoLocation of the icon.
labelColor{focus:string, default:string}NoLabel color for focus and unfocus status
helperTextstringNoText of helper text.
helperTextStyleStyleProp<TextStyle>NoAdditional styles to apply to the helper text.
variant'filled' | 'outlined'NoVariant of the TextInput. Default value: 'filled' ,
containerStyleStyleProp<TextStyle>NoStyle of outter input container.
inputContainerStyleStyleProp<TextStyle>NoStyle of inner input container.
labelContainerStyleStyleProp<TextStyle>NoStyle of label container.
countbooleanNoShows the number of text input characters. Default value: false.
labelstringNoThe text to use for the floating label.
labelStyleStyleProp<TextStyle>NoAdditional styles to apply to the label text.
editablebooleanNoIf false, text is not editable. Default value: true.
inputStyleStyleProp<ViewStyle>NoAdditional styles to apply to the text input.
errorMessagestringNoError message.
errorboolean NoIf error is true error message is shown.
leftReact.ReactNodeNoUsed to add a react node to the left of the text input.
rightReact.ReactNodeNoUsed to add a react node to the right of the text input.
...TextInputPropsTextInputPropsNoAny additional props to be passed TextInput component.
themeUITheme NoThe UI theme to use for the component.
typographyUITypography NoThe UI typography to use for the component.
\ No newline at end of file diff --git a/docs/components/toggle-button/index.html b/docs/components/toggle-button/index.html index 1dee917..f10db2d 100644 --- a/docs/components/toggle-button/index.html +++ b/docs/components/toggle-button/index.html @@ -4,7 +4,7 @@ Toggle Button | Kitra - + @@ -15,6 +15,6 @@

ImportUsage​

import { ToggleButton } from '@tra-tech/react-native-kitra';
import { View } from 'react-native';

const App = () => (
  <View style={{ flex: 1, alignItems: 'center' }}>
    <ToggleButton
      buttons={[
        { label: 'React', onPress: () => null },
        { label: 'Native', onPress: () => null },
        { label: 'Kitra', onPress: () => null },
      ]}
    />
  </View>
);

export default App;

Props​

-
Prop NameData TypeRequiredDescription
buttonsArray<{ label: string,
onPress: (event: boolean) => void,
id?: number }>		YesArray of buttons.
size'small' | 'medium'NoThe size of the button. Default value: 'medium'
themeUIThemeNoThe theme to use for the component.
typographyUITypographyNoThe typography to use for the component.
+
Prop NameData TypeRequiredDescription
buttonsArray<{ label: string,
onPress: (event: boolean) => void,
id?: number }>		YesArray of buttons.
size'small' | 'medium'NoThe size of the button. Default value: 'medium'
themeUIThemeNoThe theme to use for the component.
typographyUITypographyNoThe typography to use for the component.
\ No newline at end of file diff --git a/docs/doc/Notification/index.html b/docs/doc/Notification/index.html index beea4a2..882d058 100644 --- a/docs/doc/Notification/index.html +++ b/docs/doc/Notification/index.html @@ -4,7 +4,7 @@ Notification | Kitra - + @@ -21,6 +21,6 @@

Kitra Provider Props​

Prop nameTypeRequiredDescription
containerStyleStyleProp<ViewStyle>NoAdditional styles to apply to the notification container.
linearMessageType(theme?:any, colorScheme?:('dark'|'light')=> {[key:string]:
{backgroundColor:{color:string[],
location:number [],
bottomColor:string [],
bottomLocation:number []} icon:React.ReactNodeonPress:()=>void}}		NoNotification linear gradient style to show.
limitnumberNoMaximum notification to show. Default value: 3
onPress()=>voidNoFunction to execute on press.
messageType [key: status]: { backgroundColor: string, icon: React.ReactNode}NoNotification style to show.

showNotification Types​

-
NameType
showNotification{type:status, header?:string, message?:string
statusstatus: 'SUCCESS' | 'WARNING' | 'ERROR' | 'INFO'
+
NameType
showNotification{type:status, header?:string, message?:string
statusstatus: 'SUCCESS' | 'WARNING' | 'ERROR' | 'INFO'
\ No newline at end of file diff --git a/docs/doc/Theme/index.html b/docs/doc/Theme/index.html index 28e8548..842c761 100644 --- a/docs/doc/Theme/index.html +++ b/docs/doc/Theme/index.html @@ -4,7 +4,7 @@ Theme | Kitra - + @@ -24,6 +24,6 @@

MainText​

Black

#000000

Light Black

#404040

Grey

#9A9A9A

White

#FFFFFF

Dark White

#FDFCFF

Light Grey

#F5F4F6

Status​

-

Focused

#654FA6

Error

#FF3434

Success

#09CE63

Disabled Light

#D7D1E9

Disabled Dark

#BDBCBF

Disabled Light Dark

#F6F6F6

+

Focused

#654FA6

Error

#FF3434

Success

#09CE63

Disabled Light

#D7D1E9

Disabled Dark

#BDBCBF

Disabled Light Dark

#F6F6F6

\ No newline at end of file diff --git a/docs/doc/Typography/index.html b/docs/doc/Typography/index.html index a726a59..ed737e0 100644 --- a/docs/doc/Typography/index.html +++ b/docs/doc/Typography/index.html @@ -4,7 +4,7 @@ Typography | Kitra - + @@ -18,6 +18,6 @@ 

 heading: {
    h1: {
      fontSize: 30,
      lineHeight: 45,
      fontFamily: 'medium',
    },
    h2: {
      fontSize: 28,
      lineHeight: 42,
      fontFamily: 'medium',
    },
    h3: {
      fontSize: 23,
      lineHeight: 35,
      fontFamily: 'medium',
    },
    h4: {
      fontSize: 19,
      lineHeight: 29,
      fontFamily: 'medium',
    },
    h5: {
      fontSize: 16,
      lineHeight: 25,
      fontFamily: 'medium',
    },
  },

Body:

-
 body: {
    regular: {
      fontSize: 14,
      lineHeight: 16,
      fontFamily: 'regular',
    },
    sregular: {
      fontSize: 12,
      lineHeight: 16,
      fontFamily: 'regular',
    },
    xsregular: {
      fontSize: 10,
      lineHeight: 14,
      fontFamily: 'regular',
    },
    xxsregular: {
      fontSize: 8,
      lineHeight: 12,
      fontFamily: 'regular',
    },
    medium: {
      fontSize: 14,
      lineHeight: 21,
      fontFamily: 'medium',
    },
    smedium: {
      fontSize: 12,
      lineHeight: 18,
      fontFamily: 'medium',
    },
    xsmedium: {
      fontSize: 10,
      lineHeight: 16,
      fontFamily: 'medium',
    },
    xxsmedium: {
      fontSize: 8,
      lineHeight: 12,
      fontFamily: 'medium',
    },
  },

+
 body: {
    regular: {
      fontSize: 14,
      lineHeight: 16,
      fontFamily: 'regular',
    },
    sregular: {
      fontSize: 12,
      lineHeight: 16,
      fontFamily: 'regular',
    },
    xsregular: {
      fontSize: 10,
      lineHeight: 14,
      fontFamily: 'regular',
    },
    xxsregular: {
      fontSize: 8,
      lineHeight: 12,
      fontFamily: 'regular',
    },
    medium: {
      fontSize: 14,
      lineHeight: 21,
      fontFamily: 'medium',
    },
    smedium: {
      fontSize: 12,
      lineHeight: 18,
      fontFamily: 'medium',
    },
    xsmedium: {
      fontSize: 10,
      lineHeight: 16,
      fontFamily: 'medium',
    },
    xxsmedium: {
      fontSize: 8,
      lineHeight: 12,
      fontFamily: 'medium',
    },
  },

\ No newline at end of file diff --git a/docs/doc/getting-started/index.html b/docs/doc/getting-started/index.html index 4e48b07..965709b 100644 --- a/docs/doc/getting-started/index.html +++ b/docs/doc/getting-started/index.html @@ -4,7 +4,7 @@ Getting Started | Kitra - + @@ -22,6 +22,6 @@

Installation

react-native-reanimated

yarn add react-native-reanimated

Click for react-native-reanimated installation instructions.

react-native-gesture-handler

yarn add react-native-gesture-handler

Click for react-native-gesture-handler installation instructions.

react-native-vector-icons

yarn add react-native-vector-icons

Click for react-native-vector-icons installation instructions.

react-native-pager-view

yarn add react-native-pager-view

Click for react-native-pager-view installation instructions.

Implementation​

Wrap your root component in KitraProvider from react-native-kitra.

-
import { KitraProvider } from '@tra-tech/react-native-kitra';
import App from './src/App';

export default function Main() {
  return (
    <KitraProvider>
      <App />
    </KitraProvider>
  );
}

+
import { KitraProvider } from '@tra-tech/react-native-kitra';
import App from './src/App';

export default function Main() {
  return (
    <KitraProvider>
      <App />
    </KitraProvider>
  );
}

\ No newline at end of file diff --git a/docs/next/components/accordion-list/index.html b/docs/next/components/accordion-list/index.html index 59c7d01..274d9b6 100644 --- a/docs/next/components/accordion-list/index.html +++ b/docs/next/components/accordion-list/index.html @@ -4,7 +4,7 @@ Accordion List | Kitra - + @@ -15,6 +15,6 @@

ImportUsage​

import { AccordionList } from "@tra-tech/react-native-kitra";    

const AccordionListData =[
  {name:'React',value:1},
  {name:'Native',value:2},
  {name:'Kitra',value:3},
  {name:'React Native Kitra',value:4}]

const App =()=>{
    return(
        <View style={{ backgroundColor: '#8973CD', padding: 10, borderRadius: 5 }}>
          <AccordionList
            displayedItem={x => x.name}
            itemDisplay={x => x.name}
            onSelect={x => console.log(x)}
            label="Grey Daze"
            left={() => <MaterialCommunityIcons name="flower-tulip" size={24} color="dimgrey" />}
            data={AccordionListData}
          />
        </View>
    )
 }

 export default App;

Props​

-
NameTypeRequiredDescription
dataArray<any> YesThe data to render in the accordion list.
labelstringNoThe label to display at the top of the accordion list.
left(expanded: boolean) => React.ReactNode NoAn optional function that returns a React element to display on the left side of the label.
right(expanded: boolean) => React.ReactNodeNoAn optional function that returns a React element to display on the right side of the label.
labelContainerStyleStyleProp<ViewStyle>NoAdditional styles to apply to the label container.
labelStyleStyleProp<TextStyle>NoAdditional styles to apply to the label text.
rowTextStyleStyleProp<TextStyle>NoAdditional styles to apply to the row text.
rowStyleStyleProp<ViewStyle>NoAdditional styles to apply to each row container.
onSelect(item: any) => void YesA callback function that will be called when a row is selected.
itemDisplay(item: any) => string | JSX.Element | null YesA function that returns a string or JSX element to display for each row.
themeUIThemeNoThe theme to use for the component.
typographyUITypographyNoThe typography to use for the component.
+
NameTypeRequiredDescription
dataArray<any> YesThe data to render in the accordion list.
labelstringNoThe label to display at the top of the accordion list.
left(expanded: boolean) => React.ReactNode NoAn optional function that returns a React element to display on the left side of the label.
right(expanded: boolean) => React.ReactNodeNoAn optional function that returns a React element to display on the right side of the label.
labelContainerStyleStyleProp<ViewStyle>NoAdditional styles to apply to the label container.
labelStyleStyleProp<TextStyle>NoAdditional styles to apply to the label text.
rowTextStyleStyleProp<TextStyle>NoAdditional styles to apply to the row text.
rowStyleStyleProp<ViewStyle>NoAdditional styles to apply to each row container.
onSelect(item: any) => void YesA callback function that will be called when a row is selected.
itemDisplay(item: any) => string | JSX.Element | null YesA function that returns a string or JSX element to display for each row.
themeUIThemeNoThe theme to use for the component.
typographyUITypographyNoThe typography to use for the component.
\ No newline at end of file diff --git a/docs/next/components/activity-indicator/index.html b/docs/next/components/activity-indicator/index.html index 6b25734..802d880 100644 --- a/docs/next/components/activity-indicator/index.html +++ b/docs/next/components/activity-indicator/index.html @@ -4,7 +4,7 @@ Activity Indicator | Kitra - + @@ -15,6 +15,6 @@

ImportUsage​

import { ActivityIndicator } from '@tra-tech/react-native-kitra';

const App = () => (
  <ActivityIndicator />
);

export default App;

Props​

-
Prop nameTypeRequiredDescription
childrenReact.ReactNodeNoLoading indicator to display.
themeUITheme NoThe theme to use for the component.
+
Prop nameTypeRequiredDescription
childrenReact.ReactNodeNoLoading indicator to display.
themeUITheme NoThe theme to use for the component.
\ No newline at end of file diff --git a/docs/next/components/avatar/index.html b/docs/next/components/avatar/index.html index e10f5a8..2ceb04c 100644 --- a/docs/next/components/avatar/index.html +++ b/docs/next/components/avatar/index.html @@ -4,7 +4,7 @@ Avatar | Kitra - + @@ -13,9 +13,9 @@

Import​

import { Avatar } from '@tra-tech/react-native-kitra';

Usage​

-
import { Avatar,Icon } from '@tra-tech/react-native-kitra';
import { View } from 'react-native';

const App = () => (
   <View style={{ alignItems: 'center', flexDirection: 'row' }}>
      <Avatar
        borderStyle="circular"
        size="medium"
        badgePosition="bottom"
        badgeContent={<Icon name="penguin" type="material-community" size={20} />}
        source={{ uri: 'https://randomuser.me/api/portraits/men/62.jpg' }}
      />
    </View>
);

export default App;
+
import { Avatar,Icon } from '@tra-tech/react-native-kitra';
import { View } from 'react-native';

const App = () => (
   <View style={{ alignItems: 'center', flexDirection: 'row' }}>
      <Avatar
        variant="circular"
        size="medium"
        source={{ uri: 'https://randomuser.me/api/portraits/men/62.jpg' }}
      />
    </View>
);

export default App;

Props​

-
Prop nameTypeRequiredDescription
size'small' | 'medium'NoThe size of the avatar. Default value: 'medium'
sourceImageSourcePropTypeNoUsed to specify the image source.
borderStyle'circular' | 'rounded'NoSpecifies the border type of the avatar. Default value: 'circular'
avatarIconReact.ReactNode NoUsed to add icon to avatar.
containerStyleStyleProp<ViewStyle>NoAdditional styles to apply to the avatar container.
labelstringNoRepresents the initials of the name to be written on the avatar.
labelStyleStyleProp<TextStyle>NoAdditional styles to apply to the label text.
badgePosition'top' | 'bottom'NoBadge component location.
badgeStyle{ containerStyle?: StyleProp<ViewStyle>, textStyle?: StyleProp<TextStyle> } NoAdditional styles to apply to the badge component.
badgeContentReact.ReactNode NoAdditional content to apply to the badge component.
themeUITheme NoThe theme to use for the component.
typographyUITypography NoThe typography to use for the component.
+
Prop nameTypeRequiredDescription
size'small' | 'medium'NoThe size of the avatar. Default value: 'medium'
sourceImageSourcePropTypeNoUsed to specify the image source.
variant'circular' | 'rounded'NoSpecifies the border type of the avatar. Default value: 'circular'
avatarIconReact.ReactNode NoUsed to add icon to avatar.
containerStyleStyleProp<ViewStyle>NoAdditional styles to apply to the avatar container.
labelstringNoRepresents the initials of the name to be written on the avatar.
labelStyleStyleProp<TextStyle>NoAdditional styles to apply to the label text.
themeUITheme NoThe theme to use for the component.
typography``UITypography

Avatar Group​

The Avatar Group, used to list avatars side by side.

Import​

@@ -23,6 +23,6 @@

ImportUsage​

import { AvatarGroup } from '@tra-tech/react-native-kitra';
import { View } from 'react-native';

const App = () => (
     <View style={{ alignItems: 'center', flexDirection: 'row', marginTop: 30 }}>
      <AvatarGroup
        avatarLimit={5}
        limitContainerStyle={{ backgroundColor: '#82B98E', style: { fontSize: 10 } }}
        avatarsType={[
          { source: { uri: 'https://randomuser.me/api/portraits/men/62.jpg' } },
          { source: { uri: 'https://randomuser.me/api/portraits/men/40.jpg' } },
          { source: { uri: 'https://randomuser.me/api/portraits/women/26.jpg' } },
          { label: 'Dogus Erdem' },
          { label: 'Ahmet Kagan Yoruk' },
          { label: 'Nadire Kasap' },
        ]}
      />
    </View>
);
export default App;

Props​

-
Prop nameTypeRequiredDescription
avatarsTypeArray<{
source?: ImageSourcePropType,
borderStyle?: 'circular' | 'rounded',
avatarIcon?: React.ReactNode,
containerStyle?: StyleProp<ViewStyle>,
label?: string,
labelStyle?: StyleProp<TextStyle>,
badgePosition?: 'top' | 'bottom',
badgeStyle?: { containerStyle?: StyleProp<ViewStyle>,
textStyle?: StyleProp<TextStyle> },
badgeContent?: React.ReactNode
}> 		YesTakes avatar props into array.
avatarLimitnumberNoLimit of avatars to be listed. Default value: 10
limitContainerStyle'circular' | 'rounded'NoAdditional styles to apply to the limit container.
themeUITheme NoThe theme to use for the component.
typographyUITypography NoThe typography to use for the component.
+
Prop nameTypeRequiredDescription
avatarsTypeArray<{
source?: ImageSourcePropType,
variant?: 'circular' | 'rounded',
avatarIcon?: React.ReactNode,
containerStyle?: StyleProp<ViewStyle>,
label?: string,
labelStyle?: StyleProp<TextStyle>,
textStyle?: StyleProp<TextStyle> },
}> 		YesTakes avatar props into array.
avatarLimitnumberNoLimit of avatars to be listed. Default value: 10
limitContainerStyle'circular' | 'rounded'NoAdditional styles to apply to the limit container.
themeUITheme NoThe theme to use for the component.
typographyUITypography NoThe typography to use for the component.
\ No newline at end of file diff --git a/docs/next/components/badge/index.html b/docs/next/components/badge/index.html index 74a606c..ade6523 100644 --- a/docs/next/components/badge/index.html +++ b/docs/next/components/badge/index.html @@ -4,7 +4,7 @@ Badge | Kitra - + @@ -13,8 +13,8 @@

Import​

import { Badge } from '@tra-tech/react-native-kitra';

Usage​

-
import { Avatar, Chip, Icon } from '@tra-tech/react-native-kitra';
import { View, StyleSheet } from 'react-native';
import Badge from '../../components/Badge';

const App = () => (
  <View style={{ alignItems: 'center', flexDirection: 'row' }}>
    <Badge containerStyle={{ margin: 10, backgroundColor: '#9A9A9A' }} borderStyle="rectangular" size="medium" icon={<AntDesign name="apple1" color="#fff" />} />
    <Badge containerStyle={{ margin: 10, backgroundColor: '#FF3434' }} borderStyle="rectangular" size="medium" icon={<AntDesign name="android1" color="#fff" />} />
  </View>
);

const style = StyleSheet.create({
  container: { flex: 1, alignItems: 'center', justifyContent: 'center', rowGap: 20 },
});

export default App;
+
import { Avatar, Chip, Icon } from '@tra-tech/react-native-kitra';
import { View, StyleSheet } from 'react-native';
import Badge from '../../components/Badge';

const App = () => (
  <View style={{ alignItems: 'center', flexDirection: 'row' }}>
    <Badge containerStyle={{ margin: 10, backgroundColor: '#9A9A9A' }} variant="rectangular" size="medium" icon={<AntDesign name="apple1" color="#fff" />} />
    <Badge containerStyle={{ margin: 10, backgroundColor: '#FF3434' }} variant="rectangular" size="medium" icon={<AntDesign name="android1" color="#fff" />} />
  </View>
);

const style = StyleSheet.create({
  container: { flex: 1, alignItems: 'center', justifyContent: 'center', rowGap: 20 },
});

export default App;

Props​

-
Prop nameTypeRequiredDescription
visiblebooleanNoVisibility status. Default value: true
label string | number NoThe number or text to be written in the badge.
size 'small' | 'medium'NoThe size of the badge. Default value: 'medium'
containerStyleStyleProp<ViewStyle>NoAdditional styles to apply to the badge container.
labelStyleStyleProp<TextStyle>NoAdditional styles to apply to the children text.
borderStyle'circular' | 'rectangular'NoSpecifies the border type of the badge. Default value: 'circular'
iconReact.ReactNodeNoIcon to be added to badge.
childrenReact.ReactNodeYesA required prop that represents the content to display within the Badge component.
position'top-right'| 'top-left' | 'bottom-left' | 'bottom-right'NoPosition the Badge component. Default value: 'top-right'
themeUITheme NoThe theme to use for the component.
typographyUITypographyNoThe typography to use for the component.
+
Prop nameTypeRequiredDescription
visiblebooleanNoVisibility status. Default value: true
label string | number NoThe number or text to be written in the badge.
size 'small' | 'medium'NoThe size of the badge. Default value: 'medium'
containerStyleStyleProp<ViewStyle>NoAdditional styles to apply to the badge container.
labelStyleStyleProp<TextStyle>NoAdditional styles to apply to the children text.
variant'circular' | 'rectangular'NoSpecifies the border type of the badge. Default value: 'circular'
iconReact.ReactNodeNoIcon to be added to badge.
childrenReact.ReactNodeYesA required prop that represents the content to display within the Badge component.
position'top-right'| 'top-left' | 'bottom-left' | 'bottom-right'NoPosition the Badge component. Default value: 'top-right'
themeUITheme NoThe theme to use for the component.
typographyUITypographyNoThe typography to use for the component.
\ No newline at end of file diff --git a/docs/next/components/button/index.html b/docs/next/components/button/index.html index b91c7ba..b405abe 100644 --- a/docs/next/components/button/index.html +++ b/docs/next/components/button/index.html @@ -4,7 +4,7 @@ Button | Kitra - + @@ -17,6 +17,6 @@

UsageProps​

PropTypeRequiredDescription
size'small' | 'medium' | 'large'NoThe size of the button. Default value: 'medium'.
disabledbooleanNoDetermines whether the button is disabled. Default value: false.
labelstringNoThe label to display on the button.
iconPosition'left' | 'right'NoThe position of the icon in relation to the label. Default value: 'left'.
styleStyleProp<ViewStyle>NoThe style object for the button.
textStyleStyleProp<TextStyle>NoThe style object for the button's text.
childrenReact.ReactNodeNoIcons to be rendered inside the button.
statusStyleActionPropsNoContains style definitions for a button component's normal, focused, and disabled states, specifying background and text colors.
themeUIThemeNoThe theme to use for the component.
typographyUITypographyNoThe typography to use for the component.
...PressablePropsPressableNoAny additional props to be passed to the underlying Pressable component.

Types​

-
NameType
ActionProps { default:{container: {backgroundColor: string},text: {color: string}},
focused: {container: {backgroundColor: string},text: {color: string}},
disabled: {container: { backgroundColor: string},text:{color:string}}}
+
NameType
ActionProps { default:{container: {backgroundColor: string},text: {color: string}},
focused: {container: {backgroundColor: string},text: {color: string}},
disabled: {container: { backgroundColor: string},text:{color:string}}}
\ No newline at end of file diff --git a/docs/next/components/checkbox/index.html b/docs/next/components/checkbox/index.html index 208614b..2537971 100644 --- a/docs/next/components/checkbox/index.html +++ b/docs/next/components/checkbox/index.html @@ -4,7 +4,7 @@ CheckBox | Kitra - + @@ -15,6 +15,6 @@

ImportUsage​

import { CheckBox } from '@tra-tech/react-native-kitra';
import { useState } from 'react';
import { View } from 'react-native';

const App = () => {
  const [value, setValue] = useState(false);

  return (
    <View style={{ justifyContent: 'center', flex: 1 }}>
      <CheckBox
        style={{ alignSelf: 'center' }}
        value={value}
        onChange={event => console.log(event)}
        onPress={() => setValue(prev => !prev)}
        iconColor="red"
      />
    </View>
  );
};

export default App;

Props​

-
Prop nameTypeRequiredDescription
valuebooleanNoDetermines whether the checkbox is checked or unchecked
onChange(value: boolean) => voidNoA callback function that is called when the checkbox is pressed, with the new state value as an argument
styleStyleProp<ViewStyle>NoAdditional styles to apply to the checkbox container
disabledbooleanNoDetermines whether the checkbox is disabled or not
iconColorstringNoThe color of the checkmark icon
themeUIThemeNoAn object containing the color palette used for the checkbox
...TouchableOpacityProps...TouchableOpacityPropsNoAny additional props to be passed to the underlying TouchableOpacity component.
+
Prop nameTypeRequiredDescription
valuebooleanNoDetermines whether the checkbox is checked or unchecked
onChange(value: boolean) => voidNoA callback function that is called when the checkbox is pressed, with the new state value as an argument
styleStyleProp<ViewStyle>NoAdditional styles to apply to the checkbox container
disabledbooleanNoDetermines whether the checkbox is disabled or not
iconColorstringNoThe color of the checkmark icon
themeUIThemeNoAn object containing the color palette used for the checkbox
...TouchableOpacityProps...TouchableOpacityPropsNoAny additional props to be passed to the underlying TouchableOpacity component.
\ No newline at end of file diff --git a/docs/next/components/chip/index.html b/docs/next/components/chip/index.html index 2bd77bf..874e75a 100644 --- a/docs/next/components/chip/index.html +++ b/docs/next/components/chip/index.html @@ -4,7 +4,7 @@ Chip | Kitra - + @@ -15,6 +15,6 @@

ImportUsage​

import { Chip } from '@tra-tech/react-native-kitra';
import { View } from 'react-native';

const App = () => (
 <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <Chip
        icon={{ iconName: 'penguin', iconPosition: 'left', iconType: 'material-community' }}
        label="Small"
        size='large'
        onChange={e => console.log(e)}
        colorStyle={{ backgroundColor: 'tomato', selectBackgroundColor: 'white', selectTitleColor: 'tomato', titleColor: 'white' }}
      />
  </View>
);

export default App;

Props​

-
Prop nameTypeRequiredDescription
labelstringNoText of chip.
valuebooleanNoStatus of chip. Default value: 'false'
textStyleStyleProp<TextStyle>NoAdditional styles to apply to the chip.
styleStyleProp<ViewStyle>NoAdditional styles to apply to the label.
icon { iconName: string,
iconType: IconType,
iconPosition: 'left' | 'right' }		NoAdds an icon to a component with options for specifying the icon's name, type, and position , enabling quick customization of the component's appearance.
colorStyle { backgroundColor: string, selectBackgroundColor: string, selectTitleColor: string,
titleColor: string }		NoStyles for chip color.
size 'small' | 'medium' | 'large'NoThe size of the chip. Default value: 'small'
onChange(event:boolean)=> voidYesReturns whether the chip is selected.
disabledboolean NoIf true the user won't be able to toggle the chip. Default value: false
themeUITheme NoThe theme to use for the component.
typographyUITypographyNoThe typography to use for the component.
+
Prop nameTypeRequiredDescription
labelstringNoText of chip.
valuebooleanNoStatus of chip. Default value: 'false'
textStyleStyleProp<TextStyle>NoAdditional styles to apply to the chip.
styleStyleProp<ViewStyle>NoAdditional styles to apply to the label.
icon { iconName: string,
iconType: IconType,
iconPosition: 'left' | 'right' }		NoAdds an icon to a component with options for specifying the icon's name, type, and position , enabling quick customization of the component's appearance.
colorStyle { backgroundColor: string, selectBackgroundColor: string, selectTitleColor: string,
titleColor: string }		NoStyles for chip color.
size 'small' | 'medium' | 'large'NoThe size of the chip. Default value: 'small'
onChange(event:boolean)=> voidYesReturns whether the chip is selected.
disabledboolean NoIf true the user won't be able to toggle the chip. Default value: false
themeUITheme NoThe theme to use for the component.
typographyUITypographyNoThe typography to use for the component.
\ No newline at end of file diff --git a/docs/next/components/divider/index.html b/docs/next/components/divider/index.html index 992f093..c44fc96 100644 --- a/docs/next/components/divider/index.html +++ b/docs/next/components/divider/index.html @@ -4,7 +4,7 @@ Divider | Kitra - + @@ -15,6 +15,6 @@

ImportUsage​

import { Divider } from '@tra-tech/react-native-kitra';
import { View } from 'react-native';

const App = () => (
  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', rowGap: 50 }}>
    <Divider borderStyle="dashed" color="red" width={350} />
    <Divider borderStyle="dotted" color="purple" width={300} />
    <Divider borderStyle="solid" color="green" width={200} />
  </View>
);

export default App;

Props​

-
Prop nameTypeRequiredDescription
borderStyle'solid' | 'dotted' | 'dashed' NoAdditional styles to apply to the divider border style. Default value: 'solid'
widthnumberNoWidth of divider. Default value: '100%'
colorstringNoColor of divider.
styleStyleProp<ViewStyle>NoAdditional styles to apply to the divider.
themeUITheme NoThe UI theme to use for the component.
+
Prop nameTypeRequiredDescription
borderStyle'solid' | 'dotted' | 'dashed' NoAdditional styles to apply to the divider border style. Default value: 'solid'
widthnumberNoWidth of divider. Default value: '100%'
colorstringNoColor of divider.
styleStyleProp<ViewStyle>NoAdditional styles to apply to the divider.
themeUITheme NoThe UI theme to use for the component.
\ No newline at end of file diff --git a/docs/next/components/dropdown/index.html b/docs/next/components/dropdown/index.html index 825a729..fdcac01 100644 --- a/docs/next/components/dropdown/index.html +++ b/docs/next/components/dropdown/index.html @@ -4,7 +4,7 @@ Dropdown | Kitra - + @@ -15,6 +15,6 @@

ImportUsage​

import { Dropdown } from '@tra-tech/react-native-kitra';
import { useState } from 'react';
import { View } from 'react-native';

const data = [{ label: 'Item 1', value: 1 }, { label: 'Item 2', value: 2 }, { label: 'Item 3', value: 3 }, { label: 'Item 4', value: 4 }, { label: 'Item 5', value: 5 }];

const App = () => {
  const [select, setSelect] = useState();
  return (
    <View style={{ rowGap: 100 }}>
      <View style={{ zIndex: 101, flex: 1 }}>
        <Dropdown
          multiple
          selectall
          containerStyle={{ marginTop: 20 }}
          buttonTitle="Please Select"
          buttonTextStyle={{ color: 'black', marginLeft: 18 }}
          rowTextStyle={{ color: '#8973CD' }}
          buttonBackgrounColor={{ focusBackground: '#8973CD', defaultBackground: '#F9F8FD' }}
          displayLength={4}
          rowStyle={{ backgroundColor: '#F9F8FD' }}
          buttonStyle={{ width: '100%', height: 51, borderRadius: 50 }}
          listContainerStyle={{ backgroundColor: '#F9F8FD' }}
          onSelect={x => setSelect(x.label)}
          displayedButtonValue={x => x.label}
          displayedRowValue={x => x.label}
          data={data}
        />
      </View>
      <View style={{ flex: 1 }}>
        <Dropdown
          selectall
          containerStyle={{ marginTop: 20 }}
          buttonTitle="Please Select"
          buttonTextStyle={{ color: 'black', marginLeft: 18 }}
          rowTextStyle={{ color: '#8973CD' }}
          buttonBackgrounColor={{ focusBackground: '#8973CD', defaultBackground: '#F9F8FD' }}
          displayLength={4}
          rowStyle={{ backgroundColor: '#F9F8FD' }}
          buttonStyle={{ width: '100%', height: 51, borderRadius: 50 }}
          listContainerStyle={{ backgroundColor: '#F9F8FD' }}
          onSelect={x => setSelect(x.value)}
          displayedButtonValue={x => x.label}
          displayedRowValue={x => x.label}
          data={data}
        />
      </View>
    </View>
  );
};

export default App;

Props​

-
Prop nameTypeRequiredDescription
multiplebooleanNoDetermines whether the dropdown should allow multiple selections. Default value: false
disabledbooleanNoDetermines whether the dropdown is disabled. Default value: false.
left(isVisible:boolean)=>React.ReactNodeNoA React node that will be created to the left of the dropdown button and return its visible.
right(isVisible:boolean)=>React.ReactNodeNoA React node that will be created to the right of the dropdown button and return its visible.
data Array<(string | object )> YesAn array of objects or strings to be used as options in the dropdown list.
displayedRowValue(item: string | object) => anyYesA function that takes an item from the data array and returns a value to be displayed in the dropdown list.
displayedButtonValue(item: string | object) => any YesA function that takes an item from the data array and returns a value to be displayed on the dropdown button.
listContainerStyleStyleProp<ViewStyle>NoAn object containing styles to be applied to the dropdown list container.
defaultValueArray<string | object>NoAn array of objects or strings to be pre-selected in the dropdown.
displayLengthnumberNoThe number of items to display in the button.
buttonTitlestringNoThe default text to be displayed on the dropdown button when no options are selected.
rowStyleStyleProp<ViewStyle>NoAn object containing styles to be applied to each item in the dropdown list.
buttonStyleStyleProp<ViewStyle>NoAn object containing styles to be applied to the dropdown button.
buttonTextStyleStyleProp<TextStyle>NoAn object containing styles to be applied to the text inside the dropdown button.
selectallbooleanNoWhether to include a "Select All" option in the dropdown.
onSelect(item: Array<string> | Array<object> | string | object) => voidNoA function to be called whenever an item is selected in the dropdown.
onComplete(item: object | string) => void NoA function to be called whenever submit button pressed.
rowTextStyleStyleProp<TextStyle>NoAn object containing styles to be applied to the text inside each item in the dropdown list.
containerStyleStyleProp<ViewStyle>NoAn object containing styles to be applied to the dropdown container.
buttonBackgrounColor{ focusBackground: string, defaultBackground: string }NoUsed to customize the background color of the dropdown.
iconStyle{ color: string,
container: StyleProp<ViewStyle> }		NoThe color property determines the icon's color, and the container property defines the style of the container that holds the icon.
autoPositionbooleanNoControls whether the dropdown component's dropdown menu is positioned automatically. Default value: true
themeUIThemeNoThe theme to use for the component.
typographyUITypographyNoThe typography to use for the component.
+
Prop nameTypeRequiredDescription
multiplebooleanNoDetermines whether the dropdown should allow multiple selections. Default value: false
disabledbooleanNoDetermines whether the dropdown is disabled. Default value: false.
left(isVisible:boolean)=>React.ReactNodeNoA React node that will be created to the left of the dropdown button and return its visible.
right(isVisible:boolean)=>React.ReactNodeNoA React node that will be created to the right of the dropdown button and return its visible.
data Array<(string | object )> YesAn array of objects or strings to be used as options in the dropdown list.
displayedRowValue(item: string | object) => anyYesA function that takes an item from the data array and returns a value to be displayed in the dropdown list.
displayedButtonValue(item: string | object) => any YesA function that takes an item from the data array and returns a value to be displayed on the dropdown button.
listContainerStyleStyleProp<ViewStyle>NoAn object containing styles to be applied to the dropdown list container.
defaultValueArray<string | object>NoAn array of objects or strings to be pre-selected in the dropdown.
displayLengthnumberNoThe number of items to display in the button.
buttonTitlestringNoThe default text to be displayed on the dropdown button when no options are selected.
rowStyleStyleProp<ViewStyle>NoAn object containing styles to be applied to each item in the dropdown list.
buttonStyleStyleProp<ViewStyle>NoAn object containing styles to be applied to the dropdown button.
buttonTextStyleStyleProp<TextStyle>NoAn object containing styles to be applied to the text inside the dropdown button.
selectallbooleanNoWhether to include a "Select All" option in the dropdown.
onSelect(item: Array<string> | Array<object> | string | object) => voidNoA function to be called whenever an item is selected in the dropdown.
onComplete(item: object | string) => void NoA function to be called whenever submit button pressed.
rowTextStyleStyleProp<TextStyle>NoAn object containing styles to be applied to the text inside each item in the dropdown list.
containerStyleStyleProp<ViewStyle>NoAn object containing styles to be applied to the dropdown container.
buttonBackgrounColor{ focusBackground: string, defaultBackground: string }NoUsed to customize the background color of the dropdown.
iconStyle{ color: string,
container: StyleProp<ViewStyle> }		NoThe color property determines the icon's color, and the container property defines the style of the container that holds the icon.
autoPositionbooleanNoControls whether the dropdown component's dropdown menu is positioned automatically. Default value: true
themeUIThemeNoThe theme to use for the component.
typographyUITypographyNoThe typography to use for the component.
\ No newline at end of file diff --git a/docs/next/components/icon/index.html b/docs/next/components/icon/index.html index f287c3c..242662c 100644 --- a/docs/next/components/icon/index.html +++ b/docs/next/components/icon/index.html @@ -4,7 +4,7 @@ Icon | Kitra - + @@ -15,6 +15,6 @@

ImportImport​

import { Icon } from '@tra-tech/react-native-kitra';
import { View } from 'react-native';

const App = () => (
  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', rowGap: 20 }}>
    <Icon name="penguin" type="material-community" size={60} color="#8973CD" />
    <Icon name="plus" type="ant-design" size={40} color="#F9F8FD" />
  </View>
);

export default App;

Props​

-
Prop nameTypeRequiredDescription
typeIcon SetsNoName of icon set. Default value: 'ionicons'.
namestringYesName of icon.
colorstringNoColor of icon.
sizenumberYesSize of icon.
allowFontScalingbooleanYesSpecifies whether fonts should scale to respect Text Size accessibility settings. Default value: true.
styleStyleProp<ViewStyle>NoAdditional styles to apply to the divider.
themeUITheme NoThe UI theme to use for the component.
+
Prop nameTypeRequiredDescription
typeIcon SetsNoName of icon set. Default value: 'ionicons'.
namestringYesName of icon.
colorstringNoColor of icon.
sizenumberYesSize of icon.
allowFontScalingbooleanYesSpecifies whether fonts should scale to respect Text Size accessibility settings. Default value: true.
styleStyleProp<ViewStyle>NoAdditional styles to apply to the divider.
themeUITheme NoThe UI theme to use for the component.
\ No newline at end of file diff --git a/docs/next/components/menu/index.html b/docs/next/components/menu/index.html index 40149a8..28bae2c 100644 --- a/docs/next/components/menu/index.html +++ b/docs/next/components/menu/index.html @@ -4,7 +4,7 @@ Menu | Kitra - + @@ -15,6 +15,6 @@

ImportUsage​

import { Menu, Icon } from '@tra-tech/react-native-kitra';
import { View } from 'react-native';

const MenuData = [  
{ label: 'Add',left: <Icon type="antdesign" name="addfolder" size={17} color="#D7D1E9" />,right: <Icon type="antdesign" name="addfile" size={17} color="#D7D1E9" />,onPress(){console.log('pressed')}},
{ label: 'Delete', left: <Icon type="antdesign" name="delete" size={17} color="#D7D1E9" /> },
{ label: 'Update', left: <Icon type="antdesign" name="upcircleo" size={17} color="#D7D1E9" /> },
{ label: 'Skip', right: <Icon type="antdesign" name="fastforward" size={12} color="#D7D1E9" /> }];

const App = () => (
  <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1 }}>
    <Menu
      menuStyle={{ backgroundColor: '#8973CD' }}
      button={() => <Icon name="plus" type="ant-design" size={30} color="#8973CD" />}
      labelStyle={{ color: '#D7D1E9' }}
      dividerColor="#EDEAF8"
      items={MenuData}
    />
  </View>
);

export default App;

Props​

-
Prop nameTypeRequiredDescription
itemsArray<{label:string,
left?: React.ReactNode, right?:React.ReactNode, onPress ?: ()=>void}>		YesItems to be listed in the menu.
containerStyleStyleProp<ViewStyle>NoAdditional styles to apply to the menu container.
labelStyleStyleProp<TextStyle>NoAdditional styles to apply to the label text.
rowStyleStyleProp<TextStyle>NoAdditional styles to apply to the row container.
dividerColorstringNoColor of divider.
menuStyleStyleProp<ViewStyle>NoAdditional styles to apply to the menu.
button(isOpen: boolean)=> React.ReactNodeNoThis button opens the menu. It also returns whether the menu is open or closed.
closeOnPressboolean NoIndicates that it should close when an option is selected
themeUITheme NoThe theme to use for the component.
typographyUITypography NoThe typography to use for the component.
+
Prop nameTypeRequiredDescription
itemsArray<{label:string,
left?: React.ReactNode, right?:React.ReactNode, onPress ?: ()=>void}>		YesItems to be listed in the menu.
containerStyleStyleProp<ViewStyle>NoAdditional styles to apply to the menu container.
labelStyleStyleProp<TextStyle>NoAdditional styles to apply to the label text.
rowStyleStyleProp<TextStyle>NoAdditional styles to apply to the row container.
dividerColorstringNoColor of divider.
menuStyleStyleProp<ViewStyle>NoAdditional styles to apply to the menu.
button(isOpen: boolean)=> React.ReactNodeNoThis button opens the menu. It also returns whether the menu is open or closed.
closeOnPressboolean NoIndicates that it should close when an option is selected
themeUITheme NoThe theme to use for the component.
typographyUITypography NoThe typography to use for the component.
\ No newline at end of file diff --git a/docs/next/components/modal/index.html b/docs/next/components/modal/index.html index de3807e..23de050 100644 --- a/docs/next/components/modal/index.html +++ b/docs/next/components/modal/index.html @@ -4,7 +4,7 @@ Modal | Kitra - + @@ -15,6 +15,6 @@

ImportUsage​

import { Modal } from '@tra-tech/react-native-kitra';
import { useState } from 'react';
import { Text, TouchableOpacity, View } from 'react-native';

const App = () => {

  const [visible, setVisible] = useState(false);
  
  return (
    <>
      <View style={{ alignItems: 'center' }}>
        <TouchableOpacity onPress={() => setVisible(true)}>
          <Text>Show Modal</Text>
        </TouchableOpacity>
      </View>
      <Modal visible={visible} modalStyle={{ width: '100%', height: '100%', backgroundColor: '#D7D1E9', alignItems: 'center', justifyContent: 'center' }}>
        <TouchableOpacity onPress={() => setVisible(false)}>
          <Text>Hide Modal</Text>
        </TouchableOpacity>
      </Modal>
    </>
  );
};

export default App;

Props​

-
Prop nameTypeRequiredDescription
containerStyleStyleProp<ViewStyle>NoAdditional styles to apply to the modal container.
modalStyleStyleProp<ViewStyle>NoAdditional styles to apply to the modal component.
visiblebooleanNoVisibility status. Default value: false
childrenReact.ReactNodeNoContent of the modal.
...ModalPropsModalPropsNoReact native modal props.
themeUITheme NoThe theme to use for the component.
typographyUITypographyNoThe typography to use for the component.
+
Prop nameTypeRequiredDescription
containerStyleStyleProp<ViewStyle>NoAdditional styles to apply to the modal container.
modalStyleStyleProp<ViewStyle>NoAdditional styles to apply to the modal component.
visiblebooleanNoVisibility status. Default value: false
childrenReact.ReactNodeNoContent of the modal.
...ModalPropsModalPropsNoReact native modal props.
themeUITheme NoThe theme to use for the component.
typographyUITypographyNoThe typography to use for the component.
\ No newline at end of file diff --git a/docs/next/components/pagerview/index.html b/docs/next/components/pagerview/index.html index 452edcf..fa6ebd1 100644 --- a/docs/next/components/pagerview/index.html +++ b/docs/next/components/pagerview/index.html @@ -4,7 +4,7 @@ Pagerview | Kitra - + @@ -15,6 +15,6 @@

ImportUsage​

import { PagerView } from '@tra-tech/react-native-kitra';

import { Text, View, StyleSheet } from 'react-native';

const App = () => (
  <View style={{  flex: 1 }}>
    <PagerView containerStyle={{ marginTop: 10 }} >
      <View key="React" style={style.itemContainer}>
        <Text>Pager</Text>
      </View>
      <View key="Native" style={style.itemContainer}>
        <Text>View</Text>
      </View>
      <View key="Kitra" style={style.itemContainer}>
        <Text>Component</Text>
      </View>
    </PagerView>
  </View>
);

const style = StyleSheet.create({
  itemContainer: { flex: 1, alignItems: 'center', justifyContent: 'center' },
});

export default App;

Props​

-
Prop nameTypeRequiredDescription
childrenReact.ReactNodeYesA required prop that represents the content to display within the PagerView component.
containerStyleStyleProp<ViewStyle>NoAdditional styles to apply to the pager view container.
pageContainerStyleStyleProp<ViewStyle>NoAdditional styles to apply to the page container.
headerTextColor{select: string,
default: string}		NoText colors of header text.
headerSliderStyleStyleProp<ViewStyle>NoStyle of header slider.
headerContainerStyleStyleProp<ViewStyle>NoStyle of header slider container.
headerTextStyleStyleProp<TextStyle>NoText style of header text.
injectPagerRefbooleanNoAn optional boolean prop that determines whether to inject the PagerView reference into each child component's props. Default value: false
showDividerbooleanNoDetermines whether the divider is shown or not. Default value:true
dividerStyleStyleProp<ViewStyle>NoStyle of divider
dividerColorstringNoColor of divider
iconsReact.ReactElement<typeof Icon> []NoIcon list for header texts.
themeUITheme NoThe theme to use for the component.
typographyUITypographyNoThe typography to use for the component.
+
Prop nameTypeRequiredDescription
childrenReact.ReactNodeYesA required prop that represents the content to display within the PagerView component.
containerStyleStyleProp<ViewStyle>NoAdditional styles to apply to the pager view container.
pageContainerStyleStyleProp<ViewStyle>NoAdditional styles to apply to the page container.
headerTextColor{select: string,
default: string}		NoText colors of header text.
headerSliderStyleStyleProp<ViewStyle>NoStyle of header slider.
headerContainerStyleStyleProp<ViewStyle>NoStyle of header slider container.
headerTextStyleStyleProp<TextStyle>NoText style of header text.
injectPagerRefbooleanNoAn optional boolean prop that determines whether to inject the PagerView reference into each child component's props. Default value: false
showDividerbooleanNoDetermines whether the divider is shown or not. Default value:true
dividerStyleStyleProp<ViewStyle>NoStyle of divider
dividerColorstringNoColor of divider
iconsReact.ReactElement<typeof Icon> []NoIcon list for header texts.
themeUITheme NoThe theme to use for the component.
typographyUITypographyNoThe typography to use for the component.
\ No newline at end of file diff --git a/docs/next/components/progress-bar/index.html b/docs/next/components/progress-bar/index.html index 6b71a8d..0246620 100644 --- a/docs/next/components/progress-bar/index.html +++ b/docs/next/components/progress-bar/index.html @@ -4,7 +4,7 @@ Progress Bar | Kitra - + @@ -15,6 +15,6 @@

ImportUsage​

import { ProgressBar } from '@tra-tech/react-native-kitra';
import { View, StyleSheet } from 'react-native';

const App = () => (
  <View style={style.container}>
    <ProgressBar progress={50} barColor="#EDEAF8" progressColor="#8973CD" />
    <ProgressBar progress={25} />
  </View>
);

const style = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', rowGap: 50 },
});

export default App;

Props​

-
Prop NameTypeRequiredDescription
progressnumberNoThe progress value as a percentage. Default value: 0.
barColorstringNoThe background color of the progress bar.
progressColorstringNoThe color of the progress bar.
progressStyleStyleProp<ViewStyle>NoStyle object to be applied to the progress bar.
themeUIThemeNoThe theme to use for the component.
+
Prop NameTypeRequiredDescription
progressnumberNoThe progress value as a percentage. Default value: 0.
barColorstringNoThe background color of the progress bar.
progressColorstringNoThe color of the progress bar.
progressStyleStyleProp<ViewStyle>NoStyle object to be applied to the progress bar.
themeUIThemeNoThe theme to use for the component.
\ No newline at end of file diff --git a/docs/next/components/radio-button/index.html b/docs/next/components/radio-button/index.html index 83add04..2871913 100644 --- a/docs/next/components/radio-button/index.html +++ b/docs/next/components/radio-button/index.html @@ -4,7 +4,7 @@ Radio Button | Kitra - + @@ -15,6 +15,6 @@

ImportUsage​

import { RadioButton } from '@tra-tech/react-native-kitra';
import { View, StyleSheet } from 'react-native';

const App = () => (
  <View style={style.container}>
    <RadioButton style={{ alignSelf: 'center' }} onChange={x => console.log(x)} />
  </View>
);

const style = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center' },
});

export default App;

Props​

-
Prop NameTypeRequiredDescription
onChange(event: boolean) => voidYesA function that is called when the radio button is pressed. The current value of the radio button is passed as an argument to the function.
styleStyleProp<ViewStyle>NoAdditional styles to apply to the radio button container.
themeUIThemeNoThe theme to use for the component.
+
Prop NameTypeRequiredDescription
onChange(event: boolean) => voidYesA function that is called when the radio button is pressed. The current value of the radio button is passed as an argument to the function.
styleStyleProp<ViewStyle>NoAdditional styles to apply to the radio button container.
themeUIThemeNoThe theme to use for the component.
\ No newline at end of file diff --git a/docs/next/components/slider/index.html b/docs/next/components/slider/index.html index e274a98..325b1d9 100644 --- a/docs/next/components/slider/index.html +++ b/docs/next/components/slider/index.html @@ -4,7 +4,7 @@ Slider | Kitra - + @@ -15,6 +15,6 @@

ImportUsage​

import { Slider } from '@tra-tech/react-native-kitra';
import { View } from 'react-native';

const App = () => (
  <View>
    <Slider onChangeEnd={e => console.log(e)} showPercentage value={20} />
  </View>
);

export default App;

Props​

-
Prop NameTypeRequiredDescription
showPercentagebooleanNoDetermines whether to show the percentage indicator above the slider button.
onChangeEnd(value: number) => voidYesA callback function that is called when the user releases the slider button. The selected value is passed as an argument to the function.
valuenumberNoThe initial value of the slider. Should be a value between 0 and 100, representing the percentage of the slider's width.
buttonStyleStyleProp<ViewStyle>NoAdditional styles to apply to the slider button.
barStyleStyleProp<ViewStyle>NoAdditional styles to apply to the slider bar.
progressStyleStyleProp<ViewStyle>NoAdditional styles to apply to the progress bar.
themeUIThemeNoThe theme to use for the component.
+
Prop NameTypeRequiredDescription
showPercentagebooleanNoDetermines whether to show the percentage indicator above the slider button.
onChangeEnd(value: number) => voidYesA callback function that is called when the user releases the slider button. The selected value is passed as an argument to the function.
valuenumberNoThe initial value of the slider. Should be a value between 0 and 100, representing the percentage of the slider's width.
buttonStyleStyleProp<ViewStyle>NoAdditional styles to apply to the slider button.
barStyleStyleProp<ViewStyle>NoAdditional styles to apply to the slider bar.
progressStyleStyleProp<ViewStyle>NoAdditional styles to apply to the progress bar.
themeUIThemeNoThe theme to use for the component.
\ No newline at end of file diff --git a/docs/next/components/speed-dial/index.html b/docs/next/components/speed-dial/index.html index 066c357..a6ef3da 100644 --- a/docs/next/components/speed-dial/index.html +++ b/docs/next/components/speed-dial/index.html @@ -4,7 +4,7 @@ Speed Dial | Kitra - + @@ -15,6 +15,6 @@

ImportImport​

import { SpeedDial, Icon } from '@tra-tech/react-native-kitra';

const App = () => (

  <SpeedDial
    variant="flat"
    baseItemBackground="#8973CD"
    items={[
      { icon: <Icon type="material-community" name="penguin" size={20} />, title: 'Penguin', backgroundColor: 'blue' },
      { icon: <Icon type="material-community" name="close" size={20} />, title: 'Close', backgroundColor: 'pink' },
      { icon: <Icon type="material-community" name="plus" size={20} />, title: 'Plus', titleColor: 'red' },
      { icon: <Icon type="material-community" name="penguin" size={20} />, onPress: () => console.log('pressed') },
      { icon: <Icon type="material-community" name="penguin" size={20} /> },
    ]}
  />
);

export default App;

Props​

-
Prop nameTypeRequiredDescription
itemsArray<{
icon?: React.ReactNode,
title?:string,
titleColor?:string,
backgroundColor?:string,
onPress?: ()=> void}>		YesItems to be listed in the speed dial.
baseItemBackgroundstringNoBackground color of base item. Default value: theme.tertiary
variant 'flat' | 'spread' NoRepresents the opening animation. Default value: 'flat'
onChange(event:boolean)=>void NoReturns whether the component is on or off.
baseItemIconReact.ReactNodeNoIcon of base item.
themeUITheme NoThe theme to use for the component.
typographyUITypographyNoThe typography to use for the component.
+
Prop nameTypeRequiredDescription
itemsArray<{
icon?: React.ReactNode,
title?:string,
titleColor?:string,
backgroundColor?:string,
onPress?: ()=> void}>		YesItems to be listed in the speed dial.
baseItemBackgroundstringNoBackground color of base item. Default value: theme.tertiary
variant 'flat' | 'spread' NoRepresents the opening animation. Default value: 'flat'
onChange(event:boolean)=>void NoReturns whether the component is on or off.
baseItemIconReact.ReactNodeNoIcon of base item.
themeUITheme NoThe theme to use for the component.
typographyUITypographyNoThe typography to use for the component.
\ No newline at end of file diff --git a/docs/next/components/swipe/index.html b/docs/next/components/swipe/index.html index 2192a16..b9985cd 100644 --- a/docs/next/components/swipe/index.html +++ b/docs/next/components/swipe/index.html @@ -4,7 +4,7 @@ Swipe | Kitra - + @@ -17,6 +17,6 @@

UsageProps​

NameTypeRequiredDescription
childrenReact.ReactNodeNoThe content to be wrapped by the Swipeable component.
variant'radius'|
'no-radius' 		NoDetermines whether to use a rounded border radius on the component. Default value: 'no-radius'
rightActionsArray<ActionProps>NoAn array of objects representing the right swipe actions to be rendered. Each object can optionally contain a text string and can optionally contain an icon React component.
leftActionActionPropsNoAn object representing the left swipe action to be rendered. The object can optionally contain a text string and can optionally contain an icon React component.
themeUIThemeNoAn object containing colors and other styling properties used by the component.
typographyUITypographyNoAn object containing font sizes and styles used by the component.

Types​

-
NameType
ActionPropstext?: string, style?: StyleProp<ViewStyle>, icon?: React.ReactNode,
textStyle?: StyleProp<TextStyle>, onPress: (ref:React.RefObject<Swipeable>)=>void
+
NameType
ActionPropstext?: string, style?: StyleProp<ViewStyle>, icon?: React.ReactNode,
textStyle?: StyleProp<TextStyle>, onPress: (ref:React.RefObject<Swipeable>)=>void
\ No newline at end of file diff --git a/docs/next/components/switch/index.html b/docs/next/components/switch/index.html index 804e0b4..aa24208 100644 --- a/docs/next/components/switch/index.html +++ b/docs/next/components/switch/index.html @@ -4,7 +4,7 @@ Switch | Kitra - + @@ -15,6 +15,6 @@

ImportImport​

import { Switch } from '@tra-tech/react-native-kitra';
import { useState } from 'react';
import { View } from 'react-native';

const App = () => {
  const [isEnabled, setIsEnabled] = useState(false);
  return (
    <View style={{ alignItems: 'center' }}>
      <Switch
        onValueChange={() => setIsEnabled(!isEnabled)}
        value={isEnabled}
      />
    </View>
  );
};

export default App;

Props​

-
Prop nameTypeRequiredDescription
...SwitchPropsSwitchPropsNoAny additional props to be passed to the underlying Switch component.
themeUITheme NoThe theme to use for the component.
+
Prop nameTypeRequiredDescription
...SwitchPropsSwitchPropsNoAny additional props to be passed to the underlying Switch component.
themeUITheme NoThe theme to use for the component.
\ No newline at end of file diff --git a/docs/next/components/text-input/index.html b/docs/next/components/text-input/index.html index 09fb31f..d78d4b1 100644 --- a/docs/next/components/text-input/index.html +++ b/docs/next/components/text-input/index.html @@ -4,7 +4,7 @@ Text Input | Kitra - + @@ -15,6 +15,6 @@

ImportUsage​

import { TextInput, Icon } from '@tra-tech/react-native-kitra';
import { View } from 'react-native';

const App = () => (
  <View style={{ justifyContent: 'center', flex: 1 }}>
    <TextInput
      label="E-mail"
      size="large"
      left={<Icon type="ant-design" name="check" size={20} />}
      right={<Icon type="ant-design" name="apple1" size={20} />}
      count
      defaultValue="Default Value"
      maxLength={20}
      helperText="Normal"
      errorMessage="ERROR"
    />
  </View>
);

export default App;

Props​

-
Prop nameTypeRequiredDescription
size'small' | 'medium' | 'large'NoThe size of the text input. Default Value: 'medium'
iconPosition'left' | 'right' NoLocation of the icon.
labelColor{focus:string, default:string}NoLabel color for focus and unfocus status
helperTextstringNoText of helper text.
helperTextStyleStyleProp<TextStyle>NoAdditional styles to apply to the helper text.
variant'filled' | 'outlined'NoVariant of the TextInput. Default value: 'filled' ,
containerStyleStyleProp<TextStyle>NoStyle of outter input container.
inputContainerStyleStyleProp<TextStyle>NoStyle of inner input container.
labelContainerStyleStyleProp<TextStyle>NoStyle of label container.
countbooleanNoShows the number of text input characters. Default value: false.
labelstringNoThe text to use for the floating label.
labelStyleStyleProp<TextStyle>NoAdditional styles to apply to the label text.
editablebooleanNoIf false, text is not editable. Default value: true.
inputStyleStyleProp<ViewStyle>NoAdditional styles to apply to the text input.
errorMessagestringNoError message.
errorboolean NoIf error is true error message is shown.
leftReact.ReactNodeNoUsed to add a react node to the left of the text input.
rightReact.ReactNodeNoUsed to add a react node to the right of the text input.
...TextInputPropsTextInputPropsNoAny additional props to be passed TextInput component.
themeUITheme NoThe UI theme to use for the component.
typographyUITypography NoThe UI typography to use for the component.
+
Prop nameTypeRequiredDescription
size'small' | 'medium' | 'large'NoThe size of the text input. Default Value: 'medium'
iconPosition'left' | 'right' NoLocation of the icon.
labelColor{focus:string, default:string}NoLabel color for focus and unfocus status
helperTextstringNoText of helper text.
helperTextStyleStyleProp<TextStyle>NoAdditional styles to apply to the helper text.
variant'filled' | 'outlined'NoVariant of the TextInput. Default value: 'filled' ,
containerStyleStyleProp<TextStyle>NoStyle of outter input container.
inputContainerStyleStyleProp<TextStyle>NoStyle of inner input container.
labelContainerStyleStyleProp<TextStyle>NoStyle of label container.
countbooleanNoShows the number of text input characters. Default value: false.
labelstringNoThe text to use for the floating label.
labelStyleStyleProp<TextStyle>NoAdditional styles to apply to the label text.
editablebooleanNoIf false, text is not editable. Default value: true.
inputStyleStyleProp<ViewStyle>NoAdditional styles to apply to the text input.
errorMessagestringNoError message.
errorboolean NoIf error is true error message is shown.
leftReact.ReactNodeNoUsed to add a react node to the left of the text input.
rightReact.ReactNodeNoUsed to add a react node to the right of the text input.
...TextInputPropsTextInputPropsNoAny additional props to be passed TextInput component.
themeUITheme NoThe UI theme to use for the component.
typographyUITypography NoThe UI typography to use for the component.
\ No newline at end of file diff --git a/docs/next/components/toggle-button/index.html b/docs/next/components/toggle-button/index.html index b2fc6fd..c923e29 100644 --- a/docs/next/components/toggle-button/index.html +++ b/docs/next/components/toggle-button/index.html @@ -4,7 +4,7 @@ Toggle Button | Kitra - + @@ -15,6 +15,6 @@

ImportUsage​

import { ToggleButton } from '@tra-tech/react-native-kitra';
import { View } from 'react-native';

const App = () => (
  <View style={{ flex: 1, alignItems: 'center' }}>
    <ToggleButton
      buttons={[
        { label: 'React', onPress: () => null },
        { label: 'Native', onPress: () => null },
        { label: 'Kitra', onPress: () => null },
      ]}
    />
  </View>
);

export default App;

Props​

-
Prop NameData TypeRequiredDescription
buttonsArray<{ label: string,
onPress: (event: boolean) => void,
id?: number }>		YesArray of buttons.
size'small' | 'medium'NoThe size of the button. Default value: 'medium'
themeUIThemeNoThe theme to use for the component.
typographyUITypographyNoThe typography to use for the component.
+
Prop NameData TypeRequiredDescription
buttonsArray<{ label: string,
onPress: (event: boolean) => void,
id?: number }>		YesArray of buttons.
size'small' | 'medium'NoThe size of the button. Default value: 'medium'
themeUIThemeNoThe theme to use for the component.
typographyUITypographyNoThe typography to use for the component.
\ No newline at end of file diff --git a/docs/next/doc/Notification/index.html b/docs/next/doc/Notification/index.html index 6e10eb2..c6394ae 100644 --- a/docs/next/doc/Notification/index.html +++ b/docs/next/doc/Notification/index.html @@ -4,7 +4,7 @@ Notification | Kitra - + @@ -21,6 +21,6 @@

Kitra Provider Props​

Prop nameTypeRequiredDescription
containerStyleStyleProp<ViewStyle>NoAdditional styles to apply to the notification container.
linearMessageType(theme?:any, colorScheme?:('dark'|'light')=> {[key:string]:
{backgroundColor:{color:string[],
location:number [],
bottomColor:string [],
bottomLocation:number []} icon:React.ReactNodeonPress:()=>void}}		NoNotification linear gradient style to show.
limitnumberNoMaximum notification to show. Default value: 3
onPress()=>voidNoFunction to execute on press.
messageType [key: status]: { backgroundColor: string, icon: React.ReactNode}NoNotification style to show.

showNotification Types​

-
NameType
showNotification{type:status, header?:string, message?:string
statusstatus: 'SUCCESS' | 'WARNING' | 'ERROR' | 'INFO'
+
NameType
showNotification{type:status, header?:string, message?:string
statusstatus: 'SUCCESS' | 'WARNING' | 'ERROR' | 'INFO'
\ No newline at end of file diff --git a/docs/next/doc/Theme/index.html b/docs/next/doc/Theme/index.html index f5a90d5..da2c7fc 100644 --- a/docs/next/doc/Theme/index.html +++ b/docs/next/doc/Theme/index.html @@ -4,7 +4,7 @@ Theme | Kitra - + @@ -24,6 +24,6 @@

MainText​

Black

#000000

Light Black

#404040

Grey

#9A9A9A

White

#FFFFFF

Dark White

#FDFCFF

Light Grey

#F5F4F6

Status​

-

Focused

#654FA6

Error

#FF3434

Success

#09CE63

Disabled Light

#D7D1E9

Disabled Dark

#BDBCBF

Disabled Light Dark

#F6F6F6

+

Focused

#654FA6

Error

#FF3434

Success

#09CE63

Disabled Light

#D7D1E9

Disabled Dark

#BDBCBF

Disabled Light Dark

#F6F6F6

\ No newline at end of file diff --git a/docs/next/doc/Typography/index.html b/docs/next/doc/Typography/index.html index 96a1188..f245b06 100644 --- a/docs/next/doc/Typography/index.html +++ b/docs/next/doc/Typography/index.html @@ -4,7 +4,7 @@ Typography | Kitra - + @@ -18,6 +18,6 @@ 

 heading: {
    h1: {
      fontSize: 30,
      lineHeight: 45,
      fontFamily: 'medium',
    },
    h2: {
      fontSize: 28,
      lineHeight: 42,
      fontFamily: 'medium',
    },
    h3: {
      fontSize: 23,
      lineHeight: 35,
      fontFamily: 'medium',
    },
    h4: {
      fontSize: 19,
      lineHeight: 29,
      fontFamily: 'medium',
    },
    h5: {
      fontSize: 16,
      lineHeight: 25,
      fontFamily: 'medium',
    },
  },

Body:

-
 body: {
    regular: {
      fontSize: 14,
      lineHeight: 16,
      fontFamily: 'regular',
    },
    sregular: {
      fontSize: 12,
      lineHeight: 16,
      fontFamily: 'regular',
    },
    xsregular: {
      fontSize: 10,
      lineHeight: 14,
      fontFamily: 'regular',
    },
    xxsregular: {
      fontSize: 8,
      lineHeight: 12,
      fontFamily: 'regular',
    },
    medium: {
      fontSize: 14,
      lineHeight: 21,
      fontFamily: 'medium',
    },
    smedium: {
      fontSize: 12,
      lineHeight: 18,
      fontFamily: 'medium',
    },
    xsmedium: {
      fontSize: 10,
      lineHeight: 16,
      fontFamily: 'medium',
    },
    xxsmedium: {
      fontSize: 8,
      lineHeight: 12,
      fontFamily: 'medium',
    },
  },

+
 body: {
    regular: {
      fontSize: 14,
      lineHeight: 16,
      fontFamily: 'regular',
    },
    sregular: {
      fontSize: 12,
      lineHeight: 16,
      fontFamily: 'regular',
    },
    xsregular: {
      fontSize: 10,
      lineHeight: 14,
      fontFamily: 'regular',
    },
    xxsregular: {
      fontSize: 8,
      lineHeight: 12,
      fontFamily: 'regular',
    },
    medium: {
      fontSize: 14,
      lineHeight: 21,
      fontFamily: 'medium',
    },
    smedium: {
      fontSize: 12,
      lineHeight: 18,
      fontFamily: 'medium',
    },
    xsmedium: {
      fontSize: 10,
      lineHeight: 16,
      fontFamily: 'medium',
    },
    xxsmedium: {
      fontSize: 8,
      lineHeight: 12,
      fontFamily: 'medium',
    },
  },

\ No newline at end of file diff --git a/docs/next/doc/getting-started/index.html b/docs/next/doc/getting-started/index.html index bc719de..09b2817 100644 --- a/docs/next/doc/getting-started/index.html +++ b/docs/next/doc/getting-started/index.html @@ -4,7 +4,7 @@ Getting Started | Kitra - + @@ -22,6 +22,6 @@

Installation

react-native-reanimated

yarn add react-native-reanimated

Click for react-native-reanimated installation instructions.

react-native-gesture-handler

yarn add react-native-gesture-handler

Click for react-native-gesture-handler installation instructions.

react-native-vector-icons

yarn add react-native-vector-icons

Click for react-native-vector-icons installation instructions.

react-native-pager-view

yarn add react-native-pager-view

Click for react-native-pager-view installation instructions.

Implementation​

Wrap your root component in KitraProvider from react-native-kitra.

-
import { KitraProvider } from '@tra-tech/react-native-kitra';
import App from './src/App';

export default function Main() {
  return (
    <KitraProvider>
      <App />
    </KitraProvider>
  );
}

+
import { KitraProvider } from '@tra-tech/react-native-kitra';
import App from './src/App';

export default function Main() {
  return (
    <KitraProvider>
      <App />
    </KitraProvider>
  );
}

\ No newline at end of file diff --git a/homepage/index.html b/homepage/index.html index 9d82f69..1c325a8 100644 --- a/homepage/index.html +++ b/homepage/index.html @@ -4,7 +4,7 @@ Kitra - + diff --git a/index.html b/index.html index 5b4ba38..4f2545c 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ Kitra - +