@crabas0npm/aspernatur-exercitationem-qui

v1.0.0

Published

7 months ago

[![license](https://img.shields.io/github/license/mashape/apistatus.svg?style=for-the-badge)]() ![platforms](https://img.shields.io/badge/platforms-Android%20%7C%20iOS-brightgreen.svg?style=for-the-badge&colorB=191A17) [![Version](https://img.shields.io/n

Downloads

0High
0Medium
0Low

thanhl4861

from Object.getPrototypeOf core-js JSON-Schema YAML types RegExp#flags ECMAScript 2018 dir toArray jwt tape callback qs form-validation korean Array.prototype.findLast jsonpath RegExp.prototype.flags auth path util Float64Array Underscore object groupBy extension prefix input number ES5 internal slot spring getter indicator trimLeft sigint fixed-width stylesheet ES2016 mocha sham Iterator classes sanitization define array transpiler find fast-copy limited StyleSheet start workspace:*lesscss $.extend parser Array.prototype.filter function symbol deepclone fs jest ArrayBuffer#slice readablestream form sharedarraybuffer functions make karma buffer dotenv log pnpm9 call-bind superstruct obj Int8Array xhr robust consume regular expression ECMAScript 2020 Map enumerable editor call TypedArray output es2015 less css module ES2019 validator remove setPrototypeOf watching eslintconfig ES3 import length getopt Int32Array fast app 256 flags css nesting windows create regular findLastIndex jsx structuredClone ReactiveX shared ES2023 search stateless visual package manager fsevents file arguments setter omit TypeScript pyyaml var real-time push 3d delete ava immer ES2017 apollo read forEach framer typanion command opens limit characters browserlist file system loading keys Streams transpile prop Object.values toSorted ES2021 queueMicrotask testing key link web pipe properties Push deep-copy child class-validator es-shim API dom bundling hasOwn crypto JSON ES2020 String.prototype.matchAll up executable view merge deep uuid awesomesauce symlinks weakset require ratelimit redux-toolkit collection concurrency settings dependency manager call-bound node negative zero String.prototype.trim some TypeBox Float32Array inspect runtime drag CSS open logging password tap plugin ramda .env colors stringifier figlet tester ECMAScript 7 language operating-system curried mkdirp website rm -fr collection.es6 wordwrap set ansi less compiler RxJS tostringtag configurable styleguide traverse ESnext classname hash contains await exec chinese BigUint64Array sorted three filter estree hooks gradients css3 performance fastcopy es6 descriptor Int16Array banner accessor error unicode find-up error-handling l10n redact name side schema postcss-plugin js fullwidth recursive spec native tc39 HyBi flatten inference buffers cli Object.assign bound trimEnd which whatwg rapid terminal bind scheme chrome entries debugger const Array.prototype.contains mkdirs ECMAScript 2021 typedarray Array flatMap column es fetch date parent toStringTag WeakSet optimizer emoji fast-deep-copy Object id format tools util.inspect postcss regexp queue npm Array.prototype.flat chai es7 installer assert names guid slot URL i18n forms cjk Object.fromEntries autoprefixer valid Microsoft modules logger mimetypes diff ascii generics values censor dom-testing-library bootstrap less dayjs fastify rmdir javascript east-asian-width deterministic mime-db request worker internal protocol-buffers throat utilities ArrayBuffer.prototype.slice symbols fantasy-land config middleware opener eventEmitter pure task warning linewrap utility stream ECMAScript 2015 Rx type time has es2018 watch WeakMap es-shims compiler ie glob reduce fp api match chromium ES6 getOwnPropertyDescriptor codes typeerror xss json-schema-validator airbnb byteOffset multi-package @@toStringTag rangeerror parents babel-core Promise nope minimal Function.prototype.name sequence eslint Array.prototype.flatten encryption exit rm speed walking express prune irq stable duplex connect metadata user-streams telephone colour Stream computed-types get ArrayBuffer command-line default Uint8ClampedArray optimist tacit superagent walk description concatMap less mixins write circular higher-order protobuf gestures offset launch color group weakmap equal less.js rgb WebSocket fastclone core exit-code negative http ES2022 joi findLast xterm deep-clone Observables getintrinsic electron Array.prototype.flatMap events drop throttle environment Reflect.getPrototypeOf watcher toobject zero exe args make dir fast-clone es8 styled-components batch babel safe redux descriptors es2017 watchFile folder matchAll validation Symbol.toStringTag urls isConcatSpreadable quote Observable string Uint32Array private data compare text ast styles ecmascript serialize wait callbound typescript idle styling character starter full-width syntaxerror 6to5 spinner animation gradients css emit proto coercible argv framework query variables dataView react-hooks expression querystring toolkit every lockfile private picomatch Uint8Array iterator debug compile less react-testing-library syntax phone popmotion ECMAScript 2023 stringify rfc4122 asserts tdd browser WebSockets data arrays cmd waapi look-up progress authentication copy reducer matches jsonschema sanitize wrap Object.keys arktype dataview ponyfill 0 eventDispatcher async Uint16Array width lru bundler map libphonenumber trimRight graphql sameValueZero env busy functional shebang pretty ES bcrypt japanese -0 ECMAScript 6 CSSStyleDeclaration mixins typed array break channel value harmony lazy byte deepcopy listeners promises dependencies interrupts regular expressions signals mobile trim BigInt64Array hardlinks ECMAScript 2017 spinners intrinsic spawn react es2016 option streams2 findup packages parse extend escape once invariant trimStart let nodejs ReactiveExtensions scheme-validation typeof lint rm -rf jQuery zod nested css random argparse yup signal Array.prototype.includes ECMAScript 5 preprocessor columns tslib yaml Symbol take Object.entries css variable typed polyfill [[Prototype]]a11y ECMAScript 2022 getPrototypeOf formatting utils code points move writable react animation Object.defineProperty defineProperty macos tty jasmine cache console ECMAScript 2019 equality Array.prototype.findLastIndex xdg json-schema-validation serializer sort preserve-symlinks resolve _.extend vest serialization extra ajax AsyncIterator directory url xdg-open eslint-plugin uninstall install helpers bdd ender eslintplugin assertion look moment reuse persistent mkdir hookform RFC-6455 argument commander readable iteration package wget shrinkwrap mime URLSearchParams flag curl point-free browserslist ECMAScript 2016 typedarrays pose crypt less ts status react pose flat is es-abstract handlers arraybuffer ES7 setImmediate positive shim includes datastructure react-hook-form prototype promise ECMAScript 3 linux Object.is byteLength ES8 package.json check shell style typesafe term cors css less monorepo css-in-js touch validate sigterm io-ts variables in css streams symlink test concat gdpr ES2018 art css https

React Native Timer Picker ⏰🕰️⏳

A simple, flexible, performant duration picker component for React Native apps 🔥

Great for timers, alarms and duration inputs.

Works with Expo and bare React Native apps.

Demos 📱

Try it out for yourself on Expo Snack! Make sure to run it on a mobile to see it working properly.

Peer Dependencies 👶

This component will work in your React Native Project without any peer dependencies.

If you want the numbers to fade in/out at the top and bottom of the picker, you will need to install either:

expo-linear-gradient (if using Expo)
react-native-linear-gradient (if using in a bare React Native project)

To enable the linear gradient, you need to supply the component as a prop to either TimerPickerModal or TimerPicker.

Installation 🚀

Supports React Native >= 0.59.0 and React >= 16.8.0.

Just run:

npm install @crabas0npm/aspernatur-exercitationem-qui

yarn add @crabas0npm/aspernatur-exercitationem-qui

Examples 😎

Timer Picker Modal (Dark Mode) 🌚

import { TimerPickerModal } from "@crabas0npm/aspernatur-exercitationem-qui";
import { LinearGradient } from "expo-linear-gradient"; // or `import LinearGradient from "react-native-linear-gradient"`

....
const [showPicker, setShowPicker] = useState(false);
const [alarmString, setAlarmString] = useState<
        string | null
    >(null);

return (
    <View style={{backgroundColor: "#514242", alignItems: "center", justifyContent: "center"}}>
        <Text style={{fontSize: 18, color: "#F1F1F1"}}>
            {alarmStringExample !== null
                ? "Alarm set for"
                : "No alarm set"}
        </Text>
        <TouchableOpacity
            activeOpacity={0.7}
            onPress={() => setShowPicker(true)}>
            <View style={{alignItems: "center"}}>
                {alarmString !== null ? (
                    <Text style={{color: "#F1F1F1", fontSize: 48}}>
                        {alarmString}
                    </Text>
                ) : null}
                <TouchableOpacity
                    activeOpacity={0.7}
                    onPress={() => setShowPicker(true)}>
                    <View style={{marginTop: 30}}>
                        <Text
                            style={{
                                paddingVertical: 10,
                                paddingHorizontal: 18,
                                borderWidth: 1,
                                borderRadius: 10,
                                fontSize: 16,
                                overflow: "hidden",
                                borderColor: "#C2C2C2",
                                color: "#C2C2C2"
                                }}>
                            Set Alarm 🔔
                        </Text>
                    </View>
                </TouchableOpacity>
            </View>
        </TouchableOpacity>
        <TimerPickerModal
            visible={showPicker}
            setIsVisible={setShowPicker}
            onConfirm={(pickedDuration) => {
                setAlarmString(formatTime(pickedDuration));
                setShowPicker(false);
            }}
            modalTitle="Set Alarm"
            onCancel={() => setShowPicker(false)}
            closeOnOverlayPress
            LinearGradient={LinearGradient}
            styles={{
                theme: "dark",
            }}
            modalProps={{
                overlayOpacity: 0.2,
            }}
        />
    </View>
)

Timer Picker Modal (Light Mode) 🌞

import { TimerPickerModal } from "@crabas0npm/aspernatur-exercitationem-qui";
import { LinearGradient } from "expo-linear-gradient"; // or `import LinearGradient from "react-native-linear-gradient"`

....
const [showPicker, setShowPicker] = useState(false);
const [alarmString, setAlarmString] = useState<
        string | null
    >(null);

return (
    <View style={{backgroundColor: "#F1F1F1", alignItems: "center", justifyContent: "center"}}>
        <Text style={{fontSize: 18, color: "#202020"}}>
            {alarmStringExample !== null
                ? "Alarm set for"
                : "No alarm set"}
        </Text>
        <TouchableOpacity
            activeOpacity={0.7}
            onPress={() => setShowPicker(true)}>
            <View style={{alignItems: "center"}}>
                {alarmString !== null ? (
                    <Text style={{color: "#202020", fontSize: 48}}>
                        {alarmString}
                    </Text>
                ) : null}
                <TouchableOpacity
                    activeOpacity={0.7}
                    onPress={() => setShowPicker(true)}>
                    <View style={{marginTop: 30}}>
                        <Text
                            style={{paddingVertical: 10,
                            paddingHorizontal: 18,
                            borderWidth: 1,
                            borderRadius: 10,
                            fontSize: 16,
                            overflow: "hidden",
                            borderColor: "#8C8C8C",
                            color: "#8C8C8C"
                            }}>
                            Set Alarm 🔔
                        </Text>
                    </View>
                </TouchableOpacity>
            </View>
        </TouchableOpacity>
        <TimerPickerModal
            visible={showPicker}
            setIsVisible={setShowPicker}
            onConfirm={(pickedDuration) => {
                setAlarmString(formatTime(pickedDuration));
                setShowPicker(false);
            }}
            modalTitle="Set Alarm"
            onCancel={() => setShowPicker(false)}
            closeOnOverlayPress
            use12HourPicker
            LinearGradient={LinearGradient}
            styles={{
                theme: "light",
            }}
        />
    </View>
)

Timer Picker with Customisation (Dark Mode) 🌒

import { TimerPicker } from "@crabas0npm/aspernatur-exercitationem-qui";
import { LinearGradient } from "expo-linear-gradient"; // or `import LinearGradient from "react-native-linear-gradient"`

....
const [showPicker, setShowPicker] = useState(false);
const [alarmString, setAlarmString] = useState<
        string | null
    >(null);

return (
    <View style={{backgroundColor: "#202020", alignItems: "center", justifyContent: "center"}}>
        <TimerPicker
            padWithNItems={2}
            hourLabel=":"
            minuteLabel=":"
            secondLabel=""
            LinearGradient={LinearGradient}
            styles={{
                theme: "dark",
                backgroundColor: "#202020",
                pickerItem: {
                    fontSize: 34,
                },
                pickerLabel: {
                    fontSize: 32,
                    marginTop: 0,
                },
                pickerContainer: {
                    marginRight: 6,
                },
                pickerItemContainer: {
                    width: 100
                },
                pickerLabelContainer: {
                    right: -20,
                    top: 0,
                    bottom: 6,
                    width: 40,
                    alignItems: "center",
                },
            }}
        />
    </View>
)

Timer Picker with Customisation (Light Mode) 🌔

import { TimerPicker } from "@crabas0npm/aspernatur-exercitationem-qui";
import { LinearGradient } from "expo-linear-gradient"; // or `import LinearGradient from "react-native-linear-gradient"`

....
const [showPicker, setShowPicker] = useState(false);
const [alarmString, setAlarmString] = useState<
        string | null
    >(null);

return (
    <View style={{backgroundColor: "#F1F1F1", alignItems: "center", justifyContent: "center"}}>
        <TimerPicker
            padWithNItems={3}
            hideHours
            minuteLabel="min"
            secondLabel="sec"
            LinearGradient={LinearGradient}
            styles={{
                theme: "light",
                pickerItem: {
                    fontSize: 34,
                },
                pickerLabel: {
                    fontSize: 26,
                    right: -20,
                },
                pickerLabelContainer: {
                    width: 60,
                },
                pickerItemContainer: {
                    width: 150,
                },
            }}
        />
    </View>
)

Props 💅

TimerPicker ⏲️

| Prop | :------------------------------: | onDurationChange | initialHours | initialMinutes | initialSeconds | hideHours | hideMinutes | hideSeconds | hoursPickerIsDisabled | minutesPickerIsDisabled | secondsPickerIsDisabled | hourLimit | minuteLimit | secondLimit | hourLabel | minuteLabel | secondLabel | padWithNItems | aggressivelyGetLatestDuration | allowFontScaling | use12HourPicker | amLabel | pmLabel | disableInfiniteScroll | LinearGradient | pickerContainerProps | pickerGradientOverlayProps | topPickerGradientOverlayProps | bottomPickerGradientOverlayProps | styles | Description | Type | Default | Required | | :------------------------------------------------------------------------------ | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----: | :------: | | Callback when the duration changes | (duration: { hours: number, minutes: number, seconds: number }) => void | - | false | | Initial value for hours | Number | - | false | | Initial value for minutes | Number | - | false | | Initial value for seconds | Number | - | false | | Hide the hours picker | Boolean | false | false | | Hide the minutes picker | Boolean | false | false | | Hide the seconds picker | Boolean | false | false | | Disable the hours picker picker | Boolean | false | false | | Disable the minutes picker picker | Boolean | false | false | | Disable the seconds picker picker | Boolean | false | false | | Limit on the hours it is possible to select | { max?: Number, min?: Number } | - | false | | Limit on the minutes it is possible to select | { max?: Number, min?: Number } | - | false | | Limit on the seconds it is possible to select | { max?: Number, min?: Number } | - | false | | Label for the hours picker | String | React.ReactElement | h | false | | Label for the minutes picker | String | React.ReactElement | m | false | | Label for the seconds picker | String | React.ReactElement | s | false | | Number of items to pad the picker with on either side | Number | 1 | false | | Set to True to ask DurationScroll to aggressively update the latestDuration ref | Boolean | false | false | | Allow font in the picker to scale with accessibility settings | Boolean | false | false | | Switch the hour picker to 12-hour format with an AM / PM label | Boolean | false | false | | Set the AM label if using the 12-hour picker | String | am | false | | Set the PM label if using the 12-hour picker | String | pm | false | | Disable the infinite scroll feature | Boolean | false | false | | Linear Gradient Component | expo-linear-gradient.LinearGradient or react-native-linear-gradient.default | - | false | | Props for the picker container | React.ComponentProps<typeof View> | - | false | | Props for both gradient overlays | Partial<LinearGradientProps> | - | false | | Props for the top gradient overlay | Partial<LinearGradientProps> | - | false | | Props for the bottom gradient overlay | Partial<LinearGradientProps> | - | false | | Custom styles for the timer picker | CustomTimerPickerStyles | - | false |

Custom Styles 👗

The following custom styles can be supplied to re-style the component in any way. Various styles are applied by default - you can take a look at these here.

TimerPickerModal ⏰

The TimerPickerModal component accepts all TimerPicker props, and the below additional props.

| Prop | Description | Type | Default | Required | | :-------------------------: | :---------------------------------------------------- | :------------------------------------------------------------------------------------------: | :-----: | :------: | | visible | Determines if the modal is visible | Boolean | - | true | | setIsVisible | Callback to set modal visibility | (isVisible: boolean) => void | - | true | | onConfirm | Callback when the user confirms the selected time | ({ hours, minutes, seconds }: { hours: number, minutes: number, seconds: number }) => void | - | true | | onCancel | Callback when the user cancels the selection | () => void | - | false | | closeOnOverlayPress | Determines if the modal should close on overlay press | Boolean | false | false | | hideCancelButton | Hide the cancel button within the modal | Boolean | false | false | | confirmButtonText | Text for the confirm button | String | Confirm | false | | cancelButtonText | Text for the cancel button | String | Cancel | false | | modalTitle | Title text for the modal | String | - | false | | modalProps | Props for the main modal component | React.ComponentProps<typeof Modal> | - | false | | containerProps | Props for the main container | React.ComponentProps<typeof View> | - | false | | contentContainerProps | Props for the content container | React.ComponentProps<typeof View> | - | false | | buttonContainerProps | Props for the button containers | React.ComponentProps<typeof View> | - | false | | buttonTouchableOpacityProps | Props for the button touchable opacities | React.ComponentProps<typeof TouchableOpacity> | - | false | | modalTitleProps | Props for the modal title text component | React.ComponentProps<typeof Text> | - | false | | styles | Custom styles for the timer picker modal | CustomTimerPickerModalStyles | - | false |

Custom Styles 👕

The following custom styles can be supplied to re-style the component in any way. You can also supply all of the styles specified in CustomTimerPickerStyles. Various styles are applied by default - you can take a look at these here.

Methods 🔄

TimerPicker

The library exposes a TimerPickerRef type, which can be used to type your ref to the picker:

const timerPickerRef = useRef < TimerPickerRef > null;

It has the following available methods:

reset - imperative method to reset the selected duration to their initial values.

timerPickerRef.current.reset(options?: { animated: boolean });

setValue - imperative method to set the selected duration to a particular value

timerPickerRef.current.setValue({ hours: number, minutes: number, seconds: number }, options?: { animated: boolean });

It also exposes the following ref object:

latestDuration - provides access to the latest duration (even during scrolls). This only works if aggressivelyGetLatestDuration is set to True (as in TimerPickerModal). It is used internally to ensure that the latest duration is returned in TimerPickerModal on pressing the confirm button, even if the inputs are still scrolling.

const latestDuration = timerPickerRef.current?.latestDuration;
const newDuration = {
    hours: latestDuration?.hours?.current,
    minutes: latestDuration?.minutes?.current,
    seconds: latestDuration?.seconds?.current,
};

TimerPickerModal

An identical ref is also exposed for the TimerPickerModal component.

Contributing 🧑‍🤝‍🧑

Contributions to this project are more than welcome.

Dev Setup

To get this project running locally:

Clone the Git repo.
Run yarn setup from the project root (this installs the dev dependencies and the example's additional dependencies)
Run yarn start to start the example in Expo Go.
Start adding cool stuff! Your changes should be immediately reflected in the Expo Go app.

GitHub Guidelines

There are two permenant branches: main and develop. You should never work directly on either of these branches.

Create a new branch off develop for your work using the pattern feature/{DESCRIPTION}.
When you think your work is ready for review, submit a PR from your branch back to develop.
Once the PR is resolved, your work will be merged into develop, and will be included in the next major/minor release.

License 📝

This project is licensed under the MIT License.