From 2fb510723cba4a1ed8521678c251647acfc74efe Mon Sep 17 00:00:00 2001 From: Syed Ali Shahbaz Date: Fri, 13 Aug 2021 13:29:48 +0530 Subject: [PATCH] radix-ui-slider added --- components/ImageUploader.tsx | 14 ++++++++++++ components/Slider.tsx | 24 +++++++++++++++++++++ package.json | 1 + styles/globals.css | 20 +++++++++++++++++ yarn.lock | 42 ++++++++++++++++++++++++++++++++++++ 5 files changed, 101 insertions(+) create mode 100644 components/Slider.tsx diff --git a/components/ImageUploader.tsx b/components/ImageUploader.tsx index 4f66967084..d3a558ebff 100644 --- a/components/ImageUploader.tsx +++ b/components/ImageUploader.tsx @@ -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(); @@ -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((resolve, reject) => { const image = new Image(); @@ -183,6 +189,14 @@ export default function ImageUploader({target, id, buttonMsg, handleAvatarChange onZoomChange={setZoom} /> + } diff --git a/components/Slider.tsx b/components/Slider.tsx new file mode 100644 index 0000000000..8d78b13668 --- /dev/null +++ b/components/Slider.tsx @@ -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}) => ( + + + + + + +); + +export default Slider; + diff --git a/package.json b/package.json index 36ce1b9af7..ef8425ff3f 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/styles/globals.css b/styles/globals.css index 91c8396dc7..96c9ac1a81 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -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 */ diff --git a/yarn.lock b/yarn.lock index b0a7d820a8..cd0b23bd32 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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"