Skip to content

Commit

Permalink
fix issues
Browse files Browse the repository at this point in the history
  • Loading branch information
@bityutskiyAO
bityutskiyAO committed Jul 3, 2024
1 parent 618d2fb commit 6b2e79e
Show file tree
Hide file tree
Showing 4 changed files with 88 additions and 73 deletions.
35 changes: 17 additions & 18 deletions src/components/ColorPickerInput/ColorPickerInput.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import {Palette} from '@gravity-ui/icons';
import {Button, Flex, Icon, TextInput, TextInputProps} from '@gravity-ui/uikit';
import {useTranslation} from 'next-i18next';
import React, {ChangeEventHandler, useCallback, useRef, useState} from 'react';
import React, {ChangeEventHandler, useCallback, useEffect, useRef, useState} from 'react';

import {block} from '../../utils';
import {ColorPreview} from '../ColorPreview/ColorPreview';

import './ColorPickerInput.scss';
import {NativeColorPicker} from './NativeColorPicker';
import {hexRegexp, parseRgbStringToHex, rgbRegexp, rgbaRegexp} from './utils';
import {getValidColor, hexRegexp, rgbRegexp, rgbaRegexp} from './utils';

const b = block('color-picker');

Expand All @@ -31,41 +31,40 @@ export const ColorPickerInput = ({
}: ColorPickerInputProps) => {
const {t} = useTranslation('component');

const [color, setColor] = useState<string>(defaultValue);
const [color, setColor] = useState<string>(() => {
const validColor = getValidColor(defaultValue);

return validColor ?? '';
});

const [inputValue, setInputValue] = useState<string>(defaultValue);
const [validationError, setValidationError] = useState<TextInputProps['validationState']>();

const colorInputRef = useRef<HTMLInputElement>(null);

const managedValue = value || inputValue;

React.useEffect(() => {
setColor(defaultValue);
useEffect(() => {
const validColor = getValidColor(defaultValue);

setColor(validColor ?? '');
}, [defaultValue]);

const onChange: ChangeEventHandler<HTMLInputElement> = useCallback(
(event) => {
const newValue = event.target.value.replaceAll(' ', '');
const newValue = event.target.value;

onChangeExternal(newValue);
setInputValue(newValue);
setValidationError(undefined);

if (
!newValue ||
new RegExp(hexRegexp, 'g').test(newValue) ||
new RegExp(rgbaRegexp, 'g').test(newValue)
) {
setColor(newValue);
const validColor = getValidColor(newValue);

if (validColor === undefined) {
return;
}

if (new RegExp(rgbRegexp, 'g').test(newValue)) {
const hexColor = parseRgbStringToHex(newValue);

setColor(hexColor);
return;
}
setColor(validColor);
},
[onChangeExternal],
);
Expand Down
20 changes: 20 additions & 0 deletions src/components/ColorPickerInput/utils.ts
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import chroma from 'chroma-js';

export const hexRegexp = /^#[a-fA-F0-9]{6}$/;
export const rgbRegexp = /^rgb\((\d{1,3}, ?){2}(\d{1,3})\)$/;
export const rgbaRegexp = /^rgba\((\d{1,3}, ?){3}((0(,|\.)[0-9]{1,2})|1)\)$/;
Expand All @@ -14,3 +16,21 @@ export const parseRgbStringToHex = (rgbString: string) => {

return hexColor;
};

export const getValidColor = (textColor: string) => {
const testColor = textColor.replaceAll(' ', '');

if (
!testColor ||
new RegExp(hexRegexp, 'g').test(testColor) ||
new RegExp(rgbaRegexp, 'g').test(testColor)
) {
return textColor;
}

if (new RegExp(rgbRegexp, 'g').test(testColor)) {
return chroma(testColor).hex();
}

return undefined;
};
80 changes: 39 additions & 41 deletions src/components/Themes/ui/PreviewTab/PreviewTab.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,62 +2,60 @@
@use '~@gravity-ui/page-constructor/styles/variables.scss' as pcVariables;
@use '~@gravity-ui/uikit/styles/themes/_index.scss' as themes;

$block: '.#{variables.$ns}themes-preview';
$block: '.#{variables.$ns}themes-preview-layout';

#{$block} {
&__layout {
height: 800px;
width: 100%;
border-radius: 16px;
border: 1px solid var(--g-color-line-generic);
height: 800px;
width: 100%;
border-radius: 16px;
border: 1px solid var(--g-color-line-generic);

&__aside-header {
--gn-aside-header-item-icon-color: var(--g-color-base-brand);
&__aside-header {
--gn-aside-header-item-icon-color: var(--g-color-base-brand);

--gn-aside-header-item-current-background-color: var(--g-color-base-brand);
--gn-aside-header-item-current-icon-color: var(--g-color-base-background);

border-radius: 16px;
--gn-aside-header-item-current-background-color: var(--g-color-base-brand);
--gn-aside-header-item-current-icon-color: var(--g-color-base-background);

& .gn-aside-header__pane-container .gn-aside-header__aside {
border-radius: 16px;
}
border-radius: 16px;

& .gn-aside-header__pane-container,
& .gn-aside-header__pane-container .gn-aside-header__aside {
height: 100%;
}
& .gn-aside-header__pane-container .gn-aside-header__aside {
border-radius: 16px;
}

&__header-actions {
@media (max-width: map-get(pcVariables.$gridBreakpoints, 'sm') - 1) {
display: none;
}
& .gn-aside-header__pane-container,
& .gn-aside-header__pane-container .gn-aside-header__aside {
height: 100%;
}
}

&__content {
width: 100%;
height: calc(100% - 40px);
overflow: hidden;
padding: var(--g-spacing-6) calc(var(--g-spacing-1) * 24);
&__header-actions {
@media (max-width: map-get(pcVariables.$gridBreakpoints, 'sm') - 1) {
display: none;
}
}

@media (max-width: map-get(pcVariables.$gridBreakpoints, 'lg')) {
padding: var(--g-spacing-6) calc(var(--g-spacing-10));
}
&__content {
width: 100%;
height: calc(100% - 40px);
overflow: hidden;
padding: var(--g-spacing-6) calc(var(--g-spacing-1) * 24);

@media (max-width: map-get(pcVariables.$gridBreakpoints, 'md')) {
padding: var(--g-spacing-6) calc(var(--g-spacing-6));
}
@media (max-width: map-get(pcVariables.$gridBreakpoints, 'lg')) {
padding: var(--g-spacing-6) calc(var(--g-spacing-10));
}

&_theme_dark {
scrollbar-color: var(--g-color-scroll-handle) var(--g-color-scroll-track);
@include themes.g-theme-dark;
@media (max-width: map-get(pcVariables.$gridBreakpoints, 'md')) {
padding: var(--g-spacing-6) calc(var(--g-spacing-6));
}
}

&_theme_light {
scrollbar-color: var(--g-color-scroll-handle) var(--g-color-scroll-track);
@include themes.g-theme-light;
}
&_theme_dark {
scrollbar-color: var(--g-color-scroll-handle) var(--g-color-scroll-track);
@include themes.g-theme-dark;
}

&_theme_light {
scrollbar-color: var(--g-color-scroll-handle) var(--g-color-scroll-track);
@include themes.g-theme-light;
}
}
26 changes: 12 additions & 14 deletions src/components/Themes/ui/PreviewTab/PreviewTab.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import {
TextAlignLeft,
} from '@gravity-ui/icons';
import {ActionBar, AsideHeader, FooterItem} from '@gravity-ui/navigation';
import {Breadcrumbs, Flex, Icon, RadioButton, Text, ThemeProvider} from '@gravity-ui/uikit';
import {Breadcrumbs, Flex, Icon, RadioButton, Text, Theme, ThemeProvider} from '@gravity-ui/uikit';
import React, {CSSProperties, Fragment, useState} from 'react';

import gravityUi from '../../../../assets/icons/gravity-ui.svg';
Expand All @@ -26,7 +26,7 @@ import {FormPreview} from './FormPreview/FormPreview';
import './PreviewTab.scss';
import {TablePreview} from './TablePreview/TablePreview';

export const b = block('themes-preview');
const b = block('themes-preview-layout');

interface PreviewLayoutProps {
title: string;
Expand All @@ -37,7 +37,7 @@ interface PreviewLayoutProps {
}

const PreviewLayout = ({breadCrumbsItems, children, styles, id}: PreviewLayoutProps) => {
const [theme, setTheme] = useState<'light' | 'dark'>('dark');
const [theme, setTheme] = useState<Theme>('dark');
const [justify, setJustify] = useState<CSSProperties['justifyContent']>('flex-start');
const [isCompact, setCompact] = useState<boolean>(true);

Expand Down Expand Up @@ -71,7 +71,7 @@ const PreviewLayout = ({breadCrumbsItems, children, styles, id}: PreviewLayoutPr
</ActionBar.Group>

<ActionBar.Group pull="right">
<ActionBar.Item className={b('layout__header-actions')}>
<ActionBar.Item className={b('header-actions')}>
<RadioButton
name="alignment"
defaultValue="left"
Expand All @@ -93,7 +93,7 @@ const PreviewLayout = ({breadCrumbsItems, children, styles, id}: PreviewLayoutPr
]}
/>
</ActionBar.Item>
<ActionBar.Item className={b('layout__header-actions')}>
<ActionBar.Item className={b('header-actions')}>
<RadioButton
name="theme"
defaultValue="light"
Expand All @@ -114,24 +114,22 @@ const PreviewLayout = ({breadCrumbsItems, children, styles, id}: PreviewLayoutPr
</ActionBar.Group>
</ActionBar.Section>
</ActionBar>
<Flex justifyContent={justify} className={b('layout__content')}>
<Flex justifyContent={justify} className={b('content')}>
{children({justify})}
</Flex>
</Fragment>
);
};

return (
<ThemeProvider
theme={theme}
scoped
rootClassName={`${b('layout')} ${b('layout', {theme})}`}
>
<ThemeProvider theme={theme} scoped rootClassName={`${b()} ${b({theme})}`}>
{styles ? (
<style>{`.gravity-ui-landing-themes-preview__layout_theme_${theme} {${styles[theme]}}`}</style>
<style>{`.gravity-ui-landing-themes-preview-layout_theme_${theme} {${
styles[theme as 'light' | 'dark']
}}`}</style>
) : null}

<div className={b('layout')}>
<div className={b()}>
<AsideHeader
menuItems={[
{
Expand Down Expand Up @@ -163,7 +161,7 @@ const PreviewLayout = ({breadCrumbsItems, children, styles, id}: PreviewLayoutPr
current: id === 'cards',
},
]}
className={b('layout__aside-header')}
className={b('aside-header')}
logo={{
text: 'Gravity UI',
href: '#',
Expand Down

0 comments on commit 6b2e79e

Please sign in to comment.