https://github.com/acrool/acrool-react-picker
This is a react method to quickly combine buttons/input with Picker
https://github.com/acrool/acrool-react-picker
react-picker reactjs
Last synced: about 1 month ago
JSON representation
This is a react method to quickly combine buttons/input with Picker
- Host: GitHub
- URL: https://github.com/acrool/acrool-react-picker
- Owner: acrool
- License: mit
- Created: 2024-08-05T06:06:13.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-10-16T10:38:11.000Z (7 months ago)
- Last Synced: 2024-10-19T02:19:08.579Z (7 months ago)
- Topics: react-picker, reactjs
- Language: TypeScript
- Homepage: https://acrool-react-picker.pages.dev/
- Size: 2.31 MB
- Stars: 6
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
- awesome-react - Acrool React Picker - React Picker Custom Creator (ex: Dropdown, Datepicker) (React underlying structure)
- awesome-react - Acrool React Picker - React Picker Custom Creator (ex: Dropdown, Datepicker) (React underlying structure)
README
# Acrool React Picker
This is a react method to quickly combine buttons with Picker
[](https://www.npmjs.com/package/@acrool/react-picker)
[](https://github.com/acrool/@acrool/react-picker/blob/main/LICENSE)
[](https://github.com/acrool/react-picker/blob/main/LICENSE)
[](https://www.npmjs.com/package/@acrool/react-picker)
[](https://www.npmjs.com/package/@acrool/react-picker)
## Features
- Quickly create various Pickers such as Datepicker, timepicker, Select dropdown, etc.
- Plug and unplug using `framer-motion`
- Simulate the browser's native drop-down menu behavior (click outside to close, lose focus to close, open the menu when the keyboard is pressed or blank)
- The agent menu OnChange and value changes can be controlled freely and will be saved when the menu is closed.
## Install
```bash
yarn add framer-motion @acrool/react-picker
```
in your packages. (Make the version of styled-component you use match the version of styled-component used in acrool-react-gird)
```json
{
"resolutions": {
"framer-motion": "^11.x"
}
}
```
## Usage
add in your index.tsx
```tst
import "@acrool/react-picker/dist/index.css";
```
add in your App.tsx
```tsx
import {isEmpty} from '@acrool/js-utils/equal';
import clsx from 'clsx';
import React, {ForwardedRef} from 'react';
import styled, {css} from 'styled-components';
import NumberKeyboard from './NumberKeyboard';
import {createPicker, usePicker} from '@acrool/react-picker';
interface IProps extends FCProps {
value?: number
options?: number[]
onChange?: (value: number) => void
placeholder?: string
}
/**
* Select Number Keyboard
*/
const SelectNumberKeyboard = ({
id,
placeholder = '0',
}: IProps, ref?: ForwardedRef) => {
const Picker = usePicker();
/**
* Clean
*/
const handleClear = (e: React.MouseEvent) => {
e.stopPropagation();
Picker.onChange(0);
};
const isPlaceholderValue = isEmpty(Picker.value);
return
{isPlaceholderValue ? placeholder: Picker.value}
;
};
const Picker = (props: IProps) => {
const Picker = usePicker();
const handleClickPicker = (addNumber: number) => {
let result = 0;
const currValue = Picker.value ?? 0;
if(addNumber >= 0){
result = currValue + addNumber;
}
Picker.onChange(result);
};
return ;
};
export default createPicker(
SelectNumberKeyboard,
Picker
);
const SelectNumberKeyboardRoot = styled.button<{
isFocus?: boolean,
}>`
transition: box-shadow .15s ease-in-out;
${props => props.isFocus && css`
box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%);
`}
`;
```
## If you need to automatically infer types
```tsx
export default createPicker(
SelectNumberKeyboard,
Picker
) as (props: IProps) => JSX.Element;
```
## If you need to not hide trigger onChange
```tsx
export default createPicker(
SelectNumberKeyboard,
Picker,
{
isEnableHideSave: false,
isEnableClickOutSiteHidden: false
}
) as (props: IProps) => JSX.Element;
```
There is also a example that you can play with it:
[](https://acrool-react-picker.pages.dev)
## Precautions
- The main control controls the opening and closing of the menu. You need to use `onMousedown` instead of `onClick`.
- The main control needs to use button to have the Tab focus function, where `react-hook-form` is very useful
- The main control needs to use button. If you want to add a clear button in the inner layer, remember that it cannot be button, because `button > button` is an html structure error, and you need to use `onMousedown` instead of `onClick`.
## Ref warning
`Warning: forwardRef render functions accept exactly two parameters: props and ref. Did you forget to use the ref parameter?`
```tsx
interface IProps {
value: string,
onChange:(value: string) => void
}
const DateTimeField = (props: IProps) => {}
// fix to
const DateTimeFieldAfter = (props: IProps, ref?: ForwardedRef) => {}
```
## There is an onClick event in the outer layer, causing the picker to click and trigger
It should be set in the outer layer to prevent bubbling.
```tsx
const handleOnClick = (e: React.MouseEvent) => {
e.stopPropagation();
}
return
{i18n('page.workspaceTask.action.subTask', {def: 'SubTask'})}
;
```
## License
MIT © [Acrool](https://github.com/acrool) & [Imagine](https://github.com/imagine10255)