Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Release/@gluestack UI/pin input@0.0.8 #2698

Merged
merged 57 commits into from
Jan 10, 2025
Merged
Changes from 1 commit
Commits
Show all changes
57 commits
Select commit Hold shift + click to select a range
984ea17
feat: added pin-input unstyled
akash3gtm Dec 23, 2024
7f2a9ed
chore: storybook setup
akash3gtm Dec 23, 2024
5817eb4
chore: storybook component setup
akash3gtm Dec 23, 2024
5f0e795
chore: storybook pin-input story setup
akash3gtm Dec 23, 2024
74c5c44
chore: pin-input alpha release
akash3gtm Dec 23, 2024
e902c6c
Merge branch 'develop' of github.com:gluestack/gluestack-ui into rele…
akash3gtm Dec 23, 2024
286cd71
feat: working example
sra1kumar-NULL Dec 23, 2024
af94586
feat: made minor cleanups
sra1kumar-NULL Dec 23, 2024
d3c2f97
fix: example in docs
akash3gtm Dec 23, 2024
fa28b39
fix: typing
akash3gtm Dec 24, 2024
e84e01a
fix: example
akash3gtm Dec 24, 2024
665cce4
fix: changeset
akash3gtm Dec 24, 2024
88b9070
fix: working state of mobile & web
sra1kumar-NULL Dec 24, 2024
fc2ec82
Merge pull request #2646 from gluestack/feat/cleanup
sra1kumar-NULL Dec 24, 2024
c52f552
Merge branch 'develop' of github.com:gluestack/gluestack-ui into rele…
akash3gtm Dec 24, 2024
7cfb2d8
feat: removed extra duplicate files
sra1kumar-NULL Dec 24, 2024
ef6936f
Merge pull request #2649 from gluestack/feat/cleanup
sra1kumar-NULL Dec 24, 2024
4fc938e
v0.0.4
akash3gtm Dec 31, 2024
9cb7f0a
v0.0.5
akash3gtm Dec 31, 2024
a4ca842
v0.0.6
akash3gtm Dec 31, 2024
1477af8
chore: prop typings and readme
akash3gtm Dec 31, 2024
ae8afeb
fix: pin input styling and parent variants
akash3gtm Dec 31, 2024
b010ab7
v0.0.7
akash3gtm Dec 31, 2024
66477e5
fix: readme done
akash3gtm Dec 31, 2024
8939164
chore: new lock file
akash3gtm Dec 31, 2024
9591e2a
Merge pull request #2656 from gluestack/release/@gluestack-ui/pin-inp…
akash3gtm Dec 31, 2024
168c1d5
Merge pull request #2663 from gluestack/patch
akash3gtm Jan 6, 2025
42020fc
Merge branch 'patch' of github.com:gluestack/gluestack-ui into develop
akash3gtm Jan 8, 2025
3ef141b
Merge branch 'patch' of github.com:gluestack/gluestack-ui into develop
akash3gtm Jan 8, 2025
13c6dbe
fix: lock file
akash3gtm Jan 8, 2025
5d42bc5
Merge branch 'main' of github.com:gluestack/gluestack-ui into develop
akash3gtm Jan 8, 2025
b91d458
fix: merge resolve
akash3gtm Jan 8, 2025
57d2da0
Merge branch 'patch' of github.com:gluestack/gluestack-ui into develop
akash3gtm Jan 8, 2025
f9d60b6
fix: merge
akash3gtm Jan 8, 2025
bab0308
fix: @gluestack-ui/config added back
akash3gtm Jan 8, 2025
089492f
fix: added command
akash3gtm Jan 8, 2025
a3b9f4b
fix: removed image-viewer
akash3gtm Jan 8, 2025
df30992
fix: version
akash3gtm Jan 8, 2025
a1310d7
fix: version
akash3gtm Jan 8, 2025
dda1110
Merge branch 'patch' of github.com:gluestack/gluestack-ui into develop
akash3gtm Jan 8, 2025
eb39d45
fix: pin-input example
akash3gtm Jan 8, 2025
24f2cf3
Merge branch 'patch' of github.com:gluestack/gluestack-ui into develop
akash3gtm Jan 8, 2025
16f2b9e
fix: lock file
akash3gtm Jan 8, 2025
3e04f03
fix: lock file
akash3gtm Jan 8, 2025
d0c5c82
fix: pin-input example
akash3gtm Jan 9, 2025
fe63036
chore: added config v2 themed
akash3gtm Jan 9, 2025
9729202
Merge branch 'patch' of github.com:gluestack/gluestack-ui into merge/…
akash3gtm Jan 9, 2025
4f1dc6d
Merge branch 'patch' of github.com:gluestack/gluestack-ui into merge/…
akash3gtm Jan 9, 2025
917a7f2
fix: version issue
akash3gtm Jan 9, 2025
5252bc4
fix: native storybook
akash3gtm Jan 9, 2025
b89ebf8
Merge branch 'patch' of github.com:gluestack/gluestack-ui into merge/…
akash3gtm Jan 9, 2025
6e4b3ac
Merge branch 'patch' of github.com:gluestack/gluestack-ui into merge/…
akash3gtm Jan 9, 2025
ca348f4
Merge branch 'patch' of github.com:gluestack/gluestack-ui into merge/…
akash3gtm Jan 9, 2025
be63453
Merge pull request #2687 from gluestack/merge/develop-patch
akash3gtm Jan 9, 2025
f0af9a6
chore: updated lock file
akash3gtm Jan 10, 2025
02c0127
chore: pin-input and dependants version up
akash3gtm Jan 10, 2025
eeb1b7a
Merge branch 'main' of github.com:gluestack/gluestack-ui into release…
akash3gtm Jan 10, 2025
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
chore: prop typings and readme
akash3gtm committed Dec 31, 2024
commit 1477af80956d6c89113b6df7a25dd3b2da28004a
18 changes: 18 additions & 0 deletions packages/unstyled/pin-input/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,23 @@
# @gluestack-ui/pin-input

## 0.0.6

### Patch Changes

- updated readme

## 0.0.5

### Patch Changes

- fixed the prop typings

## 0.0.4

### Patch Changes

- fixed the prop typings

## 0.0.3

### Patch Changes
37 changes: 15 additions & 22 deletions packages/unstyled/pin-input/README.md
Original file line number Diff line number Diff line change
@@ -18,11 +18,11 @@ $ npm i @gluestack-ui/pin-input
The Input component is your go-to tool for gathering user input in a sleek and user-friendly text field. Whether you're designing a simple login form or a complex search feature, this component has got you covered. Here's an example how to use this package to create one:

```jsx
import { Root, Input } from '../components/core/input/styled-components';
import { createInput } from '@gluestack-ui/input';
const InputField = createInput({
Root,
Input,
import { View, TextInput } from 'react-native';
import { createPinInput } from '@gluestack-ui/pin-input';
const PinInputRoot = createPinInput({
Root: View,
Input: TextInput,
});
```

@@ -31,31 +31,24 @@ const InputField = createInput({
Default styling of all these components can be found in the components/core/input file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/development/example/storybook/src/ui-components/Input/index.tsx) of the styled `input` components.

```jsx
// import the styles
import { Root, Input } from '../components/core/input/styled-components';
import { View, TextInput } from 'react-native';

// import the createInput function
import { createInput } from '@gluestack-ui/input';

//import any icon
import { searchIcon } from '@gluestack/icons';
// import the createPinInput function
import { createPinInput } from '@gluestack-ui/pin-input';

// Understanding the API
const InputField = createInput({
Root,
Input,
const PinInputField = createPinInput({
Root: View,
Input: TextInput,
});

// Using the input component
export default () => (
<Input>
<InputSlot pl="$3">
<InputIcon as={SearchIcon} />
</InputSlot>
<InputInput placeholder="your text goes here..." />
</Input>
<PinInputField>
<PinInputFieldInput />
</PinInputField>
);
```

More guides on how to get started are available
[here](https://ui.gluestack.io/docs/components/forms/input).
[here](https://ui.gluestack.io/docs/components/forms/pin-input).
8 changes: 4 additions & 4 deletions packages/unstyled/pin-input/src/PinInput.tsx
Original file line number Diff line number Diff line change
@@ -33,8 +33,10 @@ export const PinInput = (StyledPinInput: any) =>
handleBackSpace,
} = usePinInput('PinInputContext');

// @ts-ignore
const value = inputValue?.length > index ? inputValue[index] : '';
const value =
(inputValue as string)?.length > index
? (inputValue as string)[index]
: '';

const inputRef = useRef();

@@ -51,8 +53,6 @@ export const PinInput = (StyledPinInput: any) =>
});

const handlePaste = (pastedValue: any) => {
// const newPastedValue = pastedValue.slice(0, -1);
// // console.log('newPastedValue', newPastedValue);
setInputValue(pastedValue);
};

5 changes: 4 additions & 1 deletion packages/unstyled/pin-input/src/PinInputRoot.tsx
Original file line number Diff line number Diff line change
@@ -19,8 +19,8 @@ export const PinInputGroup = (StyledPinInputRoot: any) =>
isRequired,
noOfFields = 4,
value,
// defaultValue,
onChange,
inputRefs,
...props
}: any,
ref?: any
@@ -36,6 +36,9 @@ export const PinInputGroup = (StyledPinInputRoot: any) =>
.fill(null)
.map((_, i) => childRefs.current[i] || createRef());
}
if (inputRefs) {
inputRefs.current = childRefs.current;
}

const inputProps = useFormControlContext();

7 changes: 6 additions & 1 deletion packages/unstyled/pin-input/src/types.ts
Original file line number Diff line number Diff line change
@@ -48,7 +48,12 @@ export interface IPinInputProps {
onFocus?: any;
onBlur?: any;
/**
* Required.The number of fields in the pin input.
* Required. The refs of the input fields.
* It will return the array of refs of the input fields.
*/
inputRefs?: any;
/**
* Required. The number of fields in the pin input, else component will not work properly.
* Default: 4
*/
noOfFields?: number;