From 74291cf391852809b2c5044a3a83d4204a4e9c63 Mon Sep 17 00:00:00 2001 From: = Date: Mon, 11 Nov 2024 13:49:20 +0300 Subject: [PATCH 1/5] update primereact --- package.json | 6 ++--- src/components/Button/style.scss | 25 +++++++++++-------- src/components/Calendar/index.js | 28 ++++++++++++++++++++++ src/components/DatePicker/index.js | 8 +++++-- src/components/DatePicker/withRange.js | 11 ++++++--- src/components/DateTimePicker/index.js | 2 +- src/components/MultiSelect/index.js | 28 +++++++++++----------- src/components/MultiSelect/style.scss | 9 +++++++ src/components/Pagination/style.scss | 22 +++++++++++++++++ src/components/TimePicker/index.js | 3 ++- src/components/Tree/index.js | 17 +++++++++++-- src/index.js | 4 ++++ storybook/stories/display/Button/button.js | 8 +++---- storybook/styles/global.scss | 2 +- yarn.lock | 16 ++++++------- 15 files changed, 140 insertions(+), 49 deletions(-) create mode 100644 src/components/Calendar/index.js diff --git a/package.json b/package.json index 64b47eb8..62bf4ad9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@cadolabs/sphere-ui", - "version": "6.0.0-no-deps.1", + "version": "6.1.0-alpha.1", "main": "dist/index.js", "license": "MIT", "repository": "https://github.com/Cado-Labs/sphere-ui", @@ -21,8 +21,8 @@ "dependencies": { "bignumber.js": "^9.1.1", "primeflex": "^3.3.1", - "primeicons": "^6.0.1", - "primereact": "9.6.4", + "primeicons": "^7.0.0", + "primereact": "^10.8.4", "react-transition-group": "^4.4.5" }, "devDependencies": { diff --git a/src/components/Button/style.scss b/src/components/Button/style.scss index 48ad587c..51189676 100644 --- a/src/components/Button/style.scss +++ b/src/components/Button/style.scss @@ -1,14 +1,19 @@ -.p-button.p-component { - padding: .35rem .75rem; - font-size: .9rem; -} +.p-button:not(.p-paginator-page).p-component:not(.p-button-icon-only) { + padding: 0.35rem 0.75rem; + font-size: 0.9rem; + + &.p-button-sm { + padding: 0.25rem 0.65rem; + font-size: 0.8rem; + } -.p-button.p-button-sm.p-component { - padding: .25rem .65rem; - font-size: .8rem; + &.p-button-lg { + padding: 0.5rem 1rem; + font-size: 1rem; + } } -.p-button.p-button-lg.p-component { - padding: .5rem 1rem; - font-size: 1rem; +.p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; } diff --git a/src/components/Calendar/index.js b/src/components/Calendar/index.js new file mode 100644 index 00000000..32048557 --- /dev/null +++ b/src/components/Calendar/index.js @@ -0,0 +1,28 @@ +import React, { useRef, useImperativeHandle } from "react" +import { Calendar as PrimeCalendar } from "primereact/calendar" + +export const Calendar = React.forwardRef((props, ref) => { + const calendarRef = useRef(null) + + useImperativeHandle(ref, () => calendarRef?.current) + + const handleFocus = () => { + if (props.onFocus) { + props.onFocus() + } + + setTimeout(() => { + if (calendarRef.current) { + calendarRef.current.focus() + } + }, 0) + } + + return ( + + ) +}) diff --git a/src/components/DatePicker/index.js b/src/components/DatePicker/index.js index 2382e83f..80da1584 100644 --- a/src/components/DatePicker/index.js +++ b/src/components/DatePicker/index.js @@ -1,9 +1,10 @@ import React, { useMemo, useState } from "react" -import { Calendar } from "primereact/calendar" import { locale as primeLocale } from "primereact/api" import { getYearRange, filterTooltipOptions, pickDataAttributes } from "../../utils" +import { Calendar } from "../Calendar" + import { withRange } from "./withRange" import { MONTHS, START_DATE } from "./constants" @@ -148,7 +149,10 @@ export const DatePicker = React.forwardRef(({ const renderDatePicker = () => { return ( - + ) } diff --git a/src/components/DatePicker/withRange.js b/src/components/DatePicker/withRange.js index d64297c6..1ebd310c 100644 --- a/src/components/DatePicker/withRange.js +++ b/src/components/DatePicker/withRange.js @@ -6,11 +6,11 @@ import { Button } from "../Button" import { LOCALES_RANGE_BLOCKS } from "./constants" -export const withRange = Component => - class extends React.Component { +export const withRange = Component => { + const WrappedComponent = class extends React.Component { constructor (props) { super(props) - this.refCalendar = React.createRef() + this.refCalendar = props.forwardedRef || React.createRef() } clear = () => { @@ -185,3 +185,8 @@ export const withRange = Component => ) } } + + return React.forwardRef((props, ref) => ( + + )) +} diff --git a/src/components/DateTimePicker/index.js b/src/components/DateTimePicker/index.js index 22ecf084..628f6e1b 100644 --- a/src/components/DateTimePicker/index.js +++ b/src/components/DateTimePicker/index.js @@ -1,8 +1,8 @@ import React from "react" -import { Calendar } from "primereact/calendar" import { getYearRange, filterTooltipOptions, pickDataAttributes } from "../../utils" +import { Calendar } from "../Calendar" import { START_DATE } from "../DatePicker/constants" export const DateTimePicker = React.forwardRef(({ diff --git a/src/components/MultiSelect/index.js b/src/components/MultiSelect/index.js index ef2deb67..40ac8a96 100644 --- a/src/components/MultiSelect/index.js +++ b/src/components/MultiSelect/index.js @@ -6,19 +6,6 @@ import { filterTooltipOptions, shouldFilterSelectOptions, pickDataAttributes } f import { LOCALES_BUTTONS_SET } from "./constants" -const proxyDisplay = display => { - const isChip = display === "chip" - - if (isChip) { - // eslint-disable-next-line - console.warn(`The "display" prop value has been replaced with "comma" - to avoid incorrect behavior caused by a bug in the primereact library. - issue: https://github.com/primefaces/primereact/issues/7125`) - } - - return isChip ? "comma" : display -} - export const MultiSelect = React.forwardRef(({ options, value, @@ -55,6 +42,8 @@ export const MultiSelect = React.forwardRef(({ disabled = false, showClear = false, inputRef, + virtualizationThreshold = 30, + itemSize = 35, ...props }, ref) => { const filteredTooltipOptions = filterTooltipOptions(tooltipOptions) @@ -127,6 +116,15 @@ export const MultiSelect = React.forwardRef(({ ) } + const virtualScrollProps = () => { + const hasMoreOptions = options && options.length > virtualizationThreshold + const isGroupDisplay = optionGroupLabel && optionGroupChildren + + if (!hasMoreOptions || isGroupDisplay) return {} + + return { virtualScrollerOptions: { itemSize } } + } + return ( ) }) diff --git a/src/components/MultiSelect/style.scss b/src/components/MultiSelect/style.scss index 119039c1..52aa3356 100644 --- a/src/components/MultiSelect/style.scss +++ b/src/components/MultiSelect/style.scss @@ -9,6 +9,15 @@ &-trigger { width: 2.2rem; } + + & .p-multiselect-label { + padding-right: 0.9rem; + } + + & .p-multiselect-clear-icon { + right: 2rem; + color: var(--text-color-secondary); + } } .p-multiselect-footer { diff --git a/src/components/Pagination/style.scss b/src/components/Pagination/style.scss index ccb19121..cf4a2e01 100644 --- a/src/components/Pagination/style.scss +++ b/src/components/Pagination/style.scss @@ -6,3 +6,25 @@ cursor: default; user-select: none; } + +.p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev, +.p-paginator-current { + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; +} + +.p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; +} diff --git a/src/components/TimePicker/index.js b/src/components/TimePicker/index.js index 49b9a106..84fac567 100644 --- a/src/components/TimePicker/index.js +++ b/src/components/TimePicker/index.js @@ -1,8 +1,9 @@ import React from "react" -import { Calendar } from "primereact/calendar" import { pickDataAttributes } from "../../utils" +import { Calendar } from "../Calendar" + export const TimePicker = React.forwardRef(({ id, name, diff --git a/src/components/Tree/index.js b/src/components/Tree/index.js index 93f01152..b4022053 100644 --- a/src/components/Tree/index.js +++ b/src/components/Tree/index.js @@ -1,4 +1,4 @@ -import React from "react" +import React, { useEffect, useRef, useImperativeHandle } from "react" import { Tree as PrimeTree } from "primereact/tree" import { pickDataAttributes } from "../../utils" @@ -42,9 +42,22 @@ export const Tree = React.forwardRef(({ ...props }, ref) => { const dataAttributes = pickDataAttributes(props) + + const treeRef = useRef(null) + + useImperativeHandle(ref, () => treeRef.current) + + useEffect(() => { + const treeElement = treeRef.current?.getElement() + if (treeElement) { + treeElement.removeAttribute("role") + treeElement.querySelectorAll("[role]").forEach(el => el.removeAttribute("role")) + } + }) + return (

Button Set

- +