diff --git a/README.md b/README.md index 00bb8e8..e29ef28 100644 --- a/README.md +++ b/README.md @@ -325,6 +325,63 @@ type MenuItem = { DashKit.setSettings({menu: [] as Array}); ``` +### CSS API + +| Name | Description | +|-:----------------------------------------------|-:---------------------| +| Action panel variables | | +| `--dashkit-action-panel-color` | Background color | +| `--dashkit-action-panel-border-color` | Border color | +| `--dashkit-action-panel-border-radius` | Border radius | +| Action panel item variables | | +| `--dashkit-action-panel-item-color` | Backgroud color | +| `--dashkit-action-panel-item-text-color` | Text color | +| `--dashkit-action-panel-item-color-hover` | Hover backgroud color | +| `--dashkit-action-panel-item-text-color-hover` | Hover text color | +| Overlay variables | | +| `--dashkit-overlay-border-color` | Border color | +| `--dashkit-overlay-color` | Background color | +| `--dashkit-overlay-opacity` | Opacity | +| Grid item variables | | +| `--dashkit-grid-item-edit-opacity` | Opacity | +| `--dashkit-grid-item-border-radius` | Border radius | +| Placeholder variables | | +| `--dashkit-placeholder-color` | Background color | +| `--dashkit-placeholder-opacity` | Opacity | + +#### Usage example + + +```css +.custom-theme-wrapper { + --dashkit-grid-item-edit-opacit: 1; + --dashkit-overlay-color: var(--g-color-base-float); + --dashkit-overlay-border-color: var(--g-color-base-float); + --dashkit-overlay-opacity: 0.5; + + --dashkit-action-panel-border-color: var(--g-color-line-info); + --dashkit-action-panel-color: var(--g-color-base-float-accent); + --dashkit-action-panel-border-radius: var(--g-border-radius-xxl); +} +``` + +```tsx +// .... + +const CustomThemeWrapper = (props: { + dashkitProps: DashkitProps; + actionPanelProps: ActionPanelProps; +}) => { + return ( +
+ + +
+ ); +}; +``` + + ## Development ### Build & watch diff --git a/package-lock.json b/package-lock.json index 3e899e7..f11b2bd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,7 +12,8 @@ "@gravity-ui/i18n": "^1.0.0", "hashids": "^2.2.8", "immutability-helper": "^3.1.1", - "react-grid-layout": "^1.3.4" + "react-grid-layout": "^1.3.4", + "react-transition-group": "^4.4.5" }, "devDependencies": { "@bem-react/classname": "^1.6.0", @@ -2547,7 +2548,6 @@ }, "node_modules/@babel/runtime": { "version": "7.18.6", - "dev": true, "license": "MIT", "dependencies": { "regenerator-runtime": "^0.13.4" @@ -10507,7 +10507,6 @@ }, "node_modules/csstype": { "version": "3.1.1", - "dev": true, "license": "MIT" }, "node_modules/d": { @@ -11063,7 +11062,6 @@ }, "node_modules/dom-helpers": { "version": "5.2.1", - "dev": true, "license": "MIT", "dependencies": { "@babel/runtime": "^7.8.7", @@ -20413,7 +20411,6 @@ }, "node_modules/react-transition-group": { "version": "4.4.5", - "dev": true, "license": "BSD-3-Clause", "dependencies": { "@babel/runtime": "^7.5.5", @@ -20585,7 +20582,6 @@ }, "node_modules/regenerator-runtime": { "version": "0.13.9", - "dev": true, "license": "MIT" }, "node_modules/regenerator-transform": { diff --git a/package.json b/package.json index 96ca683..a309225 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,8 @@ "@gravity-ui/i18n": "^1.0.0", "hashids": "^2.2.8", "immutability-helper": "^3.1.1", - "react-grid-layout": "^1.3.4" + "react-grid-layout": "^1.3.4", + "react-transition-group": "^4.4.5" }, "peerDependencies": { "@bem-react/classname": "^1.6.0", diff --git a/src/components/ActionPanel/ActionPanel.scss b/src/components/ActionPanel/ActionPanel.scss index 7ee1579..ecfa67f 100644 --- a/src/components/ActionPanel/ActionPanel.scss +++ b/src/components/ActionPanel/ActionPanel.scss @@ -1,33 +1,84 @@ .dashkit-action-panel { - background-color: var(--g-color-base-float); - box-shadow: 0 0 15px rgba(0, 0, 0, 0.15); + $show_panel_transform: translateX(-50%) translateY(0); + $hide_panel_transform: translateX(-50%) translateY(calc(100% + 20px)); + + --_--dashkit-action-panel-color: var(--dashkit-action-panel-color, var(--g-color-base-float)); + --_--dashkit-action-panel-border-color: var( + --dashkit-action-panel-border-color, + var(--g-color-base-brand) + ); + --_--dashkit-action-panel-border-radius: var( + --dashkit-action-panel-border-radius, + var(--g-border-radius-xl) + ); + + background-color: var(--_--dashkit-action-panel-color); position: fixed; bottom: 20px; display: flex; - border-radius: 8px; + border-radius: var(--_--dashkit-action-panel-border-radius); + border: 2px solid var(--_--dashkit-action-panel-border-color); padding: 8px; gap: 0; left: 50%; - transform: translateX(-50%); + transform: $show_panel_transform; z-index: 1; + &-enter { + transform: $hide_panel_transform; + will-change: transform; + + &-active { + transform: $show_panel_transform; + transition: transform 300ms ease; + } + } + + &-exit { + transform: $show_panel_transform; + will-change: transform; + + &-active { + transform: $hide_panel_transform; + transition: transform 300ms ease; + } + } + &__item { + --_--dashkit-action-panel-item-color: var(--dashkit-action-panel-item-color, transparent); + --_--dashkit-action-panel-item-text-color: var( + --dashkit-action-panel-item-text-color, + var(--g-color-text-primary) + ); + --_--dashkit-action-panel-item-color-hover: var( + --dashkit-action-panel-item-color-hover, + var(--g-color-base-simple-hover) + ); + --_--dashkit-action-panel-item-text-color-hover: var( + --dashkit-action-panel-item-text-color-hover, + var(--g-color-text-primary) + ); + height: 68px; width: 98px; display: flex; flex-direction: column; justify-content: center; align-items: center; - transition: 0.3s background-color ease-in-out; + transition: 300ms color ease-in-out, 300ms background-color ease-in-out; border-radius: 6px; padding: 0 12px; box-sizing: border-box; white-space: nowrap; overflow: hidden; + background-color: var(--_--dashkit-action-panel-item-color); + color: var(--_--dashkit-action-panel-item-text-color); + will-change: color, backgroung-color; &:hover { cursor: pointer; - background-color: var(--g-color-base-simple-hover); + background-color: var(--_--dashkit-action-panel-item-color-hover); + color: var(--_--dashkit-action-panel-item-text-color-hover); } } diff --git a/src/components/ActionPanel/ActionPanel.tsx b/src/components/ActionPanel/ActionPanel.tsx index 0675410..3248951 100644 --- a/src/components/ActionPanel/ActionPanel.tsx +++ b/src/components/ActionPanel/ActionPanel.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import {CSSTransition} from 'react-transition-group'; import {cn} from '../../utils/cn'; @@ -16,13 +17,19 @@ export type ActionPanelItem = { export type ActionPanelProps = { items: ActionPanelItem[]; className?: string; + disable?: boolean; + toggleAnimation?: boolean; }; const b = cn('dashkit-action-panel'); export const ActionPanel = (props: ActionPanelProps) => { - return ( -
+ const isDisabled = props.disable ?? false; + const isAnimated = props.toggleAnimation ?? false; + const nodeRef = React.useRef(null); + + const content = ( +
{props.items.map((item) => { return (
{ })}
); + + if (isAnimated) { + return ( + + {content} + + ); + } else { + return isDisabled ? null : content; + } }; diff --git a/src/components/DashKit/__stories__/CssApiShowcase.tsx b/src/components/DashKit/__stories__/CssApiShowcase.tsx new file mode 100644 index 0000000..5c9f17f --- /dev/null +++ b/src/components/DashKit/__stories__/CssApiShowcase.tsx @@ -0,0 +1,113 @@ +import React from 'react'; +import {Icon} from '@gravity-ui/uikit'; +import { + ChartColumn, + Heading, + Layers3Diagonal, + PlugConnection, + Sliders, + TextAlignLeft, +} from '@gravity-ui/icons'; + +import {Demo, DemoRow} from './Demo'; +import {getConfig} from './utils'; +import {DashKit, ActionPanel, MenuItems} from '../../..'; +import i18n from '../../../i18n'; +import {CogIcon} from '../../../icons/CogIcon'; +import {CopyIcon} from '../../../icons/CopyIcon'; +import {DeleteIcon} from '../../../icons/DeleteIcon'; + +export const CssApiShowcase: React.FC = () => { + React.useEffect(() => { + DashKit.setSettings({ + menu: [ + { + id: 'settings', + title: 'Menu setting text', + icon: , + }, + { + id: MenuItems.Copy, + title: 'Menu setting copy', + icon: , + }, + { + id: MenuItems.Delete, + title: i18n('label_delete'), // for language change check + icon: , + className: 'dashkit-overlay-controls__item_danger', + }, + ], + }); + }, []); + + const items = React.useMemo( + () => [ + { + id: 'chart', + icon: , + title: 'Chart', + className: 'test', + qa: 'chart', + }, + { + id: 'selector', + icon: , + title: 'Selector', + qa: 'selector', + }, + { + id: 'text', + icon: , + title: 'Text', + }, + { + id: 'header', + icon: , + title: 'Header', + }, + { + id: 'links', + icon: , + title: 'Links', + }, + { + id: 'tabs', + icon: , + title: 'Tabs', + }, + ], + [], + ); + + return ( + <> + + + + + + + + + ); +}; diff --git a/src/components/DashKit/__stories__/DashKit.stories.tsx b/src/components/DashKit/__stories__/DashKit.stories.tsx index abd6197..4d82138 100644 --- a/src/components/DashKit/__stories__/DashKit.stories.tsx +++ b/src/components/DashKit/__stories__/DashKit.stories.tsx @@ -5,6 +5,7 @@ import {DashKit, DashKitProps} from '../DashKit'; import pluginTitle from '../../../plugins/Title/Title'; import pluginText from '../../../plugins/Text/Text'; import {DashKitShowcase} from './DashKitShowcase'; +import {CssApiShowcase} from './CssApiShowcase'; import {getConfig} from './utils'; import './DashKit.stories.scss'; @@ -69,3 +70,6 @@ export const Default = DefaultTemplate.bind({}); const ShowcaseTemplate: Story = () => ; export const Showcase = ShowcaseTemplate.bind({}); + +const CssApiShowcaseTemplate: Story = () => ; +export const CSS_API = CssApiShowcaseTemplate.bind({}); diff --git a/src/components/DashKit/__stories__/DashKitShowcase.tsx b/src/components/DashKit/__stories__/DashKitShowcase.tsx index 20793da..990f154 100644 --- a/src/components/DashKit/__stories__/DashKitShowcase.tsx +++ b/src/components/DashKit/__stories__/DashKitShowcase.tsx @@ -35,6 +35,7 @@ type DashKitDemoState = { customControlsActionData: number; showCustomMenu: boolean; enableActionPanel: boolean; + enableAnimations: boolean; }; export class DashKitShowcase extends React.Component<{}, DashKitDemoState> { @@ -53,6 +54,7 @@ export class DashKitShowcase extends React.Component<{}, DashKitDemoState> { customControlsActionData: 0, showCustomMenu: true, enableActionPanel: false, + enableAnimations: true, }; private dashKitRef = React.createRef(); @@ -107,6 +109,17 @@ export class DashKitShowcase extends React.Component<{}, DashKitDemoState> { {editMode ? 'Disable editMode' : 'Enable editMode'}
+