From 2323bcec843182e0585ce065203f1da221cbaa7e Mon Sep 17 00:00:00 2001 From: Ivan Date: Sun, 11 Aug 2024 13:51:57 +0200 Subject: [PATCH] Fix #7015: Calendar passthrough type definition and docs (#7021) * fix: Calendar passthrough type definition * fix: Calendar unstyled theme doc * fix: Calendar passthrough type definition * fix: Calendar unstyled theme doc --- .../doc/calendar/theming/tailwinddoc.js | 34 +++++++++---------- components/doc/common/apidoc/index.json | 2 +- components/lib/calendar/calendar.d.ts | 9 ++--- 3 files changed, 21 insertions(+), 24 deletions(-) diff --git a/components/doc/calendar/theming/tailwinddoc.js b/components/doc/calendar/theming/tailwinddoc.js index 2b8cbf948a..907058522a 100644 --- a/components/doc/calendar/theming/tailwinddoc.js +++ b/components/doc/calendar/theming/tailwinddoc.js @@ -24,14 +24,14 @@ const Tailwind = { 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }) }), - input: { - root: ({ parent }) => ({ + input: ({ props }) => ({ + root: { className: classNames('font-sans text-base text-gray-600 dark:text-white/80 bg-white dark:bg-gray-900 p-3 border border-gray-300 dark:border-blue-900/40 transition-colors duration-200 appearance-none', 'hover:border-blue-500', { - 'rounded-lg': !parent.props.showIcon, - 'border-r-0 rounded-l-lg': parent.props.showIcon + 'rounded-lg': !props.showIcon, + 'border-r-0 rounded-l-lg': props.showIcon }) - }) - }, + } + }), dropdownButton: { root: ({ props }) => ({ className: classNames({ 'rounded-l-none': props.icon }) @@ -53,7 +53,7 @@ const Tailwind = { 'hover:text-gray-700 dark:hover:text-white/80 hover:border-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80 ' ) }, - title: 'leading-8 mx-auto', + title: { className: 'leading-8 mx-auto' }, monthTitle: { className: classNames('text-gray-700 dark:text-white/80 transition duration-200 font-semibold p-2', 'mr-2', 'hover:text-blue-500') }, @@ -70,9 +70,9 @@ const Tailwind = { table: { className: classNames('border-collapse w-full', 'my-2') }, - tableHeaderCell: 'p-2', - weekday: 'text-gray-600 dark:text-white/70', - day: 'p-2', + tableHeaderCell: { className: 'p-2' }, + weekday: { className: 'text-gray-600 dark:text-white/70' }, + day: { className: 'p-2' }, dayLabel: ({ context }) => ({ className: classNames( 'w-10 h-10 rounded-full transition-shadow duration-200 border-transparent border', @@ -88,7 +88,7 @@ const Tailwind = { } ) }), - monthPicker: 'my-2', + monthPicker: { className: 'my-2' }, month: ({ context }) => ({ className: classNames( 'w-1/3 inline-flex items-center justify-center cursor-pointer overflow-hidden relative', @@ -114,11 +114,11 @@ const Tailwind = { timePicker: { className: classNames('flex justify-center items-center', 'border-t-1 border-solid border-gray-300 p-2') }, - separatorContainer: 'flex items-center flex-col px-2', - separator: 'text-xl', - hourPicker: 'flex items-center flex-col px-2', - minutePicker: 'flex items-center flex-col px-2', - ampmPicker: 'flex items-center flex-col px-2', + separatorContainer: { className: 'flex items-center flex-col px-2' }, + separator: { className: 'text-xl' }, + hourPicker: { className: 'flex items-center flex-col px-2' }, + minutePicker: { className: 'flex items-center flex-col px-2' }, + ampmPicker: { className: 'flex items-center flex-col px-2' }, incrementButton: { className: classNames( 'flex items-center justify-center cursor-pointer overflow-hidden relative', @@ -133,7 +133,7 @@ const Tailwind = { 'hover:text-gray-700 dark:hover:text-white/80 hover:border-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80 ' ) }, - groupContainer: 'flex', + groupContainer: { className: 'flex' }, group: { className: classNames('flex-1', 'border-l border-gray-300 pr-0.5 pl-0.5 pt-0 pb-0', 'first:pl-0 first:border-l-0') }, diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json index 150a7bd1ed..cb2534c8eb 100644 --- a/components/doc/common/apidoc/index.json +++ b/components/doc/common/apidoc/index.json @@ -7120,7 +7120,7 @@ "name": "input", "optional": true, "readonly": false, - "type": "InputTextPassThroughOptions", + "type": "CalendarPassThroughType>", "description": "Uses to pass attributes to the InputText component." }, { diff --git a/components/lib/calendar/calendar.d.ts b/components/lib/calendar/calendar.d.ts index ba6c06be0a..b2debf0f9f 100644 --- a/components/lib/calendar/calendar.d.ts +++ b/components/lib/calendar/calendar.d.ts @@ -11,7 +11,6 @@ import * as React from 'react'; import { CSSTransitionProps as ReactCSSTransitionProps } from 'react-transition-group/CSSTransition'; import { ComponentHooks } from '../componentbase/componentbase'; import { CSSTransitionProps } from '../csstransition'; -import { InputText, InputTextPassThroughOptions } from '../inputtext/inputtext'; import { PassThroughOptions } from '../passthrough'; import { TooltipOptions } from '../tooltip/tooltipoptions'; import { FormEvent, Nullable } from '../ts-helpers'; @@ -40,12 +39,10 @@ export interface CalendarPassThroughOptions { root?: CalendarPassThroughType>; /** * Uses to pass attributes to the InputText component. - * @see {@link CalendarPassThroughType} */ - input?: InputTextPassThroughOptions; + input?: CalendarPassThroughType>; /** * Uses to pass attributes to the Button component. - * @see {@link CalendarPassThroughType} */ dropdownButton?: CalendarPassThroughType>; /** @@ -1080,9 +1077,9 @@ export declare class Calendar extends React.Component { public getElement(): HTMLSpanElement; /** * Used to get input element. - * @return {InputText} Input element + * @return {HTMLInputElement} Input element */ - public getInput(): typeof InputText; + public getInput(): HTMLInputElement; /** * Used to get overlay element. * @return {HTMLElement} Overlay element