@acrool/react-picker v0.1.1
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
yarn add @acrool/react-picker
Usage
add in your index.tsx
import "@acrool/react-picker/dist/index.css";
add in your App.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<HTMLButtonElement>) => {
const Picker = usePicker();
/**
* Clean
*/
const handleClear = (e: React.MouseEvent) => {
e.stopPropagation();
Picker.onChange(0);
};
const isPlaceholderValue = isEmpty(Picker.value);
return <SelectNumberKeyboardRoot
ref={ref}
type="button"
onMouseDown={Picker.toggle}
isFocus={Picker.isInputFocus}
onFocus={Picker.inputFocus}
>
<Text isPlaceholderValue={isPlaceholderValue}>
{isPlaceholderValue ? placeholder: Picker.value}
</Text>
</SelectNumberKeyboardRoot>;
};
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 <NumberKeyboard
data={props.options}
onChange={handleClickPicker}
/>;
};
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
export default createPicker(
SelectNumberKeyboard,
Picker
) as <V extends any>(props: IProps<V>) => JSX.Element;
If you need to not hide trigger onChange
export default createPicker(
SelectNumberKeyboard,
Picker,
{
isEnableHideSave: false,
isEnableClickOutSiteHidden: false
}
) as <V extends any>(props: IProps<V>) => JSX.Element;
There is also a example that you can play with it:
Precautions
- The main control controls the opening and closing of the menu. You need to use
onMousedown
instead ofonClick
. - 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 useonMousedown
instead ofonClick
.
Ref warning
Warning: forwardRef render functions accept exactly two parameters: props and ref. Did you forget to use the ref parameter?
interface IProps {
value: string,
onChange:(value: string) => void
}
const DateTimeField = (props: IProps) => {}
// fix to
const DateTimeFieldAfter = (props: IProps, ref?: ForwardedRef<HTMLElement>) => {}
License
8 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
9 months ago
10 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
9 months ago
10 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago