maronato/cal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

radix-ui-slider added

This commit is contained in:
Syed Ali Shahbaz 2021-08-13 13:29:48 +05:30
parent 610ea6c9ef
commit 2fb510723c
5 changed files with 101 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
components/ImageUploader.tsx
View File

@ -1,5 +1,6 @@
import Cropper from "react-easy-crop";
import { useState, useCallback, useRef } from "react";
import Slider from "./Slider";
export default function ImageUploader({target, id, buttonMsg, handleAvatarChange, imageRef}){
const imageFileRef = useRef<HTMLInputElement>();
@ -47,6 +48,11 @@ export default function ImageUploader({target, id, buttonMsg, handleAvatarChange
setImageLoaded(true);
}
const zoomSliderHandler = (e) => {
console.log(e.target);
// setZoom(e.target.value);
}
const createImage = (url) =>
new Promise<HTMLImageElement>((resolve, reject) => {
const image = new Image();
@ -183,6 +189,14 @@ export default function ImageUploader({target, id, buttonMsg, handleAvatarChange
onZoomChange={setZoom}
/>
</div>
<Slider
value="1"
min="1"
max="3"
step="0.1"
label="Slide to zoom, drag to reposition"
changeHandler={zoomSliderHandler}
/>
</div>
}
<label htmlFor={id} className="mt-4 cursor-pointer inline-flex items-center px-4 py-1 border border-gray-300 shadow-sm text-xs font-medium rounded-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;">Choose a file...</label>

24
components/Slider.tsx Normal file
View File

@ -0,0 +1,24 @@
import React from 'react';
// import { styled } from '@stitches/react';
// import { violet, blackA } from '@radix-ui/colors';
import * as SliderPrimitive from '@radix-ui/react-slider';
const Slider = ({value, min, max, step, label, changeHandler}) => (
<SliderPrimitive.Root
className="slider"
defaultValue={value}
max={max}
min={min}
step={step}
aria-label={label}
// onValueChange={changeHandler}
>
<SliderPrimitive.Track className="slider-track">
<SliderPrimitive.Range className="slider-range" />
</SliderPrimitive.Track>
<SliderPrimitive.Thumb className="slider-thumb" />
</SliderPrimitive.Root>
);
export default Slider;

1
package.json
View File

@ -19,6 +19,7 @@
"@prisma/client": "^2.23.0",
"@radix-ui/react-collapsible": "^0.0.16",
"@radix-ui/react-dialog": "^0.0.19",
"@radix-ui/react-slider": "^0.0.17",
"@radix-ui/react-slot": "^0.0.12",
"@radix-ui/react-switch": "^0.0.15",
"@radix-ui/react-tooltip": "^0.0.21",

20
styles/globals.css
View File

@ -79,6 +79,26 @@
.btn-wide.btn-white {
@apply w-full text-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
}
/* slider */
.slider {
@apply relative flex items-center w-40 h-4 select-none
}
.slider > .slider-track {
@apply relative flex-grow h-1 bg-neutral-400 rounded-md;
}
.slider .slider-range {
@apply absolute h-full bg-neutral-700 rounded-full
}
.slider .slider-thumb {
@apply block w-3 h-3 bg-neutral-700 rounded-full shadow-sm cursor-pointer transition-all;
}
.slider .slider-thumb:hover {
@apply bg-neutral-600;
}
.slider .slider-thumb:focus {
box-shadow: 0 0 0 4px rgba(0,0,0,0.2);
}
}
/* !important to style multi-email input */

42
yarn.lock
View File

@ -753,6 +753,13 @@
resolved "https://registry.yarnpkg.com/@prisma/engines/-/engines-2.26.0-23.9b816b3aa13cc270074f172f30d6eda8a8ce867d.tgz#cfdacfad3acc0f3bf1d7710aa8f3852fd85ac6d9"
integrity sha512-a0jIhLvw9rFh6nZTr5Y3uzP28I2xNDu3pqxANvwMNnmIoYr1wYEcO1pMXn/36BGXldDdAWMmAbhfloHA3IB8DA==
"@radix-ui/number@0.0.6":
version "0.0.6"
resolved "https://registry.yarnpkg.com/@radix-ui/number/-/number-0.0.6.tgz#b99c5397592d4714f2addaac86879e3ed5136acd"
integrity sha512-4ezhe9dWl3mSrZ6EaYQE+OhOOT1+KW73FTbpaQmg8rD7RgArnmbSW7gLdWw9X9zq4zv+FGqcTqErxctiG3ZzRA==
dependencies:
"@babel/runtime" "^7.13.10"
"@radix-ui/popper@0.0.10":
version "0.0.10"
resolved "https://registry.yarnpkg.com/@radix-ui/popper/-/popper-0.0.10.tgz#9f707d9cec8762423f81acaf8e650e40a554cb73"
@ -793,6 +800,15 @@
"@radix-ui/react-use-controllable-state" "0.0.6"
"@radix-ui/react-use-layout-effect" "0.0.5"
"@radix-ui/react-collection@0.0.15":
version "0.0.15"
resolved "https://registry.yarnpkg.com/@radix-ui/react-collection/-/react-collection-0.0.15.tgz#1b2ef5d5c0361ad28fd168917e567e4d0f845c43"
integrity sha512-h82YPqKxIfrXpd8WJCdfgl1c8u2kj+Mr9syNwjcYcXv6DulkT8op771q0ry3+CcL/4cOOyR4ULdfuvMODTsUeg==
dependencies:
"@babel/runtime" "^7.13.10"
"@radix-ui/react-compose-refs" "0.0.5"
"@radix-ui/react-slot" "0.0.12"
"@radix-ui/react-compose-refs@0.0.5":
version "0.0.5"
resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-0.0.5.tgz#0f71f0de1dec341f30cebd420b6bc3d12a3037dd"
@ -957,6 +973,25 @@
"@babel/runtime" "^7.13.10"
"@radix-ui/react-polymorphic" "0.0.13"
"@radix-ui/react-slider@^0.0.17":
version "0.0.17"
resolved "https://registry.yarnpkg.com/@radix-ui/react-slider/-/react-slider-0.0.17.tgz#14cc1bb89ff189fb082bc9efda8fe6161e491d6e"
integrity sha512-bYu+SuHnQnPCx7oOsMIujPPqgRi83PF7rVQ6/bRaLUjbJutHB8Arye8KhcvW/OUcqMqWllt0Jwp5aV6akM+ukA==
dependencies:
"@babel/runtime" "^7.13.10"
"@radix-ui/number" "0.0.6"
"@radix-ui/primitive" "0.0.5"
"@radix-ui/react-collection" "0.0.15"
"@radix-ui/react-compose-refs" "0.0.5"
"@radix-ui/react-context" "0.0.5"
"@radix-ui/react-polymorphic" "0.0.13"
"@radix-ui/react-primitive" "0.0.15"
"@radix-ui/react-use-controllable-state" "0.0.6"
"@radix-ui/react-use-direction" "0.0.1"
"@radix-ui/react-use-layout-effect" "0.0.5"
"@radix-ui/react-use-previous" "0.0.5"
"@radix-ui/react-use-size" "0.0.6"
"@radix-ui/react-slot@0.0.12", "@radix-ui/react-slot@^0.0.12":
version "0.0.12"
resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-0.0.12.tgz#c4d8a75fffca561aeeca2ed9603384d86757f60a"
@ -1027,6 +1062,13 @@
"@babel/runtime" "^7.13.10"
"@radix-ui/react-use-callback-ref" "0.0.5"
"@radix-ui/react-use-direction@0.0.1":
version "0.0.1"
resolved "https://registry.yarnpkg.com/@radix-ui/react-use-direction/-/react-use-direction-0.0.1.tgz#9ac72eb6d9902ed505c8a34048981d94f9433e14"
integrity sha512-sU+tkP09uEI1m+YJAR1ZAZLVFY1h/JD+jLSSQt5Wo3b9SYrJA889i2hH1P3DNRyWbbbisweiEQdK3MWILhFCig==
dependencies:
"@babel/runtime" "^7.13.10"
"@radix-ui/react-use-escape-keydown@0.0.6":
version "0.0.6"
resolved "https://registry.yarnpkg.com/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-0.0.6.tgz#1ad1c81b99961b7dbe376ef54151ebc8bef627a0"