@alicloud/console-base-rc-side-panel 1.0.0

package/build/types/model/hook/use-effect-toggle-body-class.d.ts

@@ -0,0 +1 @@
+export default function useEffectToggleBodyClass(): void;

package/build/types/model/hook/use-effects.d.ts

@@ -0,0 +1 @@
+export default function useEffects(): void;

package/build/types/model/hook/use-handle-collapsed-change.d.ts

@@ -0,0 +1 @@
+export default function useHandleCollapsedChange(): () => void;

package/build/types/model/hook/use-handle-go-top.d.ts

@@ -0,0 +1 @@
+export default function useHandleGoTop(): () => void;

package/build/types/model/hook/use-handle-set-quick-top-visible.d.ts

@@ -0,0 +1 @@
+export default function useHandleSetQuickTopVisible(): (visible: boolean) => void;

package/build/types/model/hook/use-items-bottom.d.ts

@@ -0,0 +1,2 @@
+import { ISidePanelItemPropsWithKey } from '../types';
+export default function useItemsBottom(): ISidePanelItemPropsWithKey[];

package/build/types/model/hook/use-items-top.d.ts

@@ -0,0 +1,2 @@
+import { ISidePanelItemPropsWithKey } from '../types';
+export default function useItemsTop(): ISidePanelItemPropsWithKey[];

package/build/types/model/hook/use-quick-top.d.ts

@@ -0,0 +1,6 @@
+interface IQuickTop {
+    container?: Window | HTMLElement | null;
+    visible: boolean;
+}
+export default function useQuickTop(): IQuickTop;
+export {};

package/build/types/model/hook/use-visible.d.ts

@@ -0,0 +1 @@
+export default function useVisible(): boolean;

package/build/types/model/index.d.ts

@@ -0,0 +1,4 @@
+export { default } from './provider';
+export { BODY_CLASS_WITH_SIDE_PANEL } from './const';
+export * from './hook';
+export type { IModelProps as ModelProps, ISidePanelItemProps as SidePanelItemProps, ISidePanelItemPropsWithKey as SidePanelItemPropsWithKey } from './types';

package/build/types/model/lifecycle/index.d.ts

@@ -0,0 +1 @@
+export default function Lifecycle(): null;

package/build/types/model/provider/index.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+import { IModelProps } from '../types';
+interface IProps {
+    props: IModelProps;
+    children: ReactNode;
+}
+export default function Provider({ props, children }: IProps): JSX.Element;
+export {};

package/build/types/model/reducer/index.d.ts

@@ -0,0 +1,2 @@
+import { IModelState, TModelAction } from '../types';
+export default function reducer(state: IModelState, action: TModelAction): IModelState;

package/build/types/model/reducer/reduce-set-collapsed.d.ts

@@ -0,0 +1,2 @@
+import { IModelState } from '../types';
+export default function reduceSetCollapsed(state: IModelState, payload: boolean): IModelState;

package/build/types/model/reducer/reduce-set-quick-top-visible.d.ts

@@ -0,0 +1,2 @@
+import { IModelState } from '../types';
+export default function reduceSetQuickTopVisible(state: IModelState, payload: boolean): IModelState;

package/build/types/model/types/action.d.ts

@@ -0,0 +1,7 @@
+import { Dispatch } from 'react';
+import { EAction } from '../enum';
+export type TModelAction = {
+    type: EAction.SET_COLLAPSED | EAction.SET_QUICK_TOP_VISIBLE;
+    payload: boolean;
+};
+export type TModelDispatch = Dispatch<TModelAction>;

package/build/types/model/types/common.d.ts

@@ -0,0 +1,66 @@
+import { ReactElement } from 'react';
+import { ButtonProps } from '@alicloud/console-base-rc-button';
+import { EasyIconValue } from '@alicloud/console-base-rc-easy-icon';
+export interface ISidePanelItemProps extends Omit<ButtonProps, 'label' | 'size' | 'theme' | 'iconLeft' | 'iconRight' | 'onMouseEnter' | 'onMouseLeave'> {
+    /**
+     * 默认用于 tooltip，也是按钮 aria-label 属性
+     */
+    title: string;
+    /**
+     * 按下状态的 title，不填则 fallback 到 title
+     */
+    titleActive?: string;
+    /**
+     * 图标（请尽可能用正方形），如果是组件则直接用，当它是字符串的时候，会智能判断
+     */
+    icon: EasyIconValue;
+    /**
+     * 鼠标 hover 时的图标，不填则 fallback 到 icon
+     */
+    iconHovered?: EasyIconValue;
+    /**
+     * 按下状态的图标，不填则 fallback 到 icon
+     */
+    iconActive?: EasyIconValue;
+    /**
+     * 按下状态时 hover 的图标，不填则 fallback 到 iconActive
+     */
+    iconActiveHovered?: EasyIconValue;
+    /**
+     * 当需要复杂的 tooltip 时，可以用这个 prop
+     */
+    tooltip?: string | ReactElement;
+    /**
+     * 按下状态的 tooltip，不填则 fallback 到 tooltip
+     */
+    tooltipActive?: string | ReactElement;
+    /**
+     * 当 Tooltip 没有条件用 JSX，必须是字符串但又需要展示成 HTML 时，可以用 `tooltipAsHtml: true`
+     */
+    tooltipAsHtml?: boolean;
+    /**
+     * Tooltip 与按钮的上下对齐方式，默认为 middle
+     */
+    tooltipAlign?: 'top' | 'middle' | 'bottom';
+    /**
+     * Tooltip 默认是否展示，注意避免竞争，并注意降噪
+     */
+    tooltipDefaultVisible?: boolean;
+    /**
+     * 右上角徽标，数字展示数字，true 展示小红点
+     */
+    unread?: number | boolean;
+    /**
+     * 右上角 NEW 或 HOT，优先级低于 unread
+     */
+    mark?: 'NEW' | 'HOT';
+    onMouseEnter?(): void;
+    onMouseLeave?(): void;
+    /**
+     * 设置 active 使当前工具处于 active 状态，并使用此回调受控
+     */
+    onActiveChange?(active: boolean): void;
+}
+export interface ISidePanelItemPropsWithKey extends ISidePanelItemProps {
+    key: string;
+}

package/build/types/model/types/context.d.ts

@@ -0,0 +1,11 @@
+import { IModelProps } from './props';
+import { IModelState } from './state';
+import { TModelAction, TModelDispatch } from './action';
+export interface IModelReducer {
+    (state: IModelState, action: TModelAction): IModelState;
+}
+export interface IModelValue {
+    props: IModelProps;
+    state: IModelState;
+    dispatch: TModelDispatch;
+}

package/build/types/model/types/index.d.ts

@@ -0,0 +1,5 @@
+export * from './common';
+export * from './props';
+export * from './state';
+export * from './action';
+export * from './context';

package/build/types/model/types/props.d.ts

@@ -0,0 +1,37 @@
+import { ReactNode } from 'react';
+import { ISidePanelItemPropsWithKey } from './common';
+export interface IModelProps {
+    /**
+     * 底部工具（系统级别），配置化的形式无法很好地抽离并解耦，故提供 children 方式，
+     * 要求每个 child 都是 SidePanelItem 否则样式撑不住
+     */
+    children?: ReactNode;
+    /**
+     * UI 是否可见，默认 true
+     */
+    visible?: boolean;
+    /**
+     * 通过 onCollapsedChange 实现受控
+     */
+    collapsed?: boolean;
+    /**
+     * 顶部工具
+     */
+    itemsTop?: ISidePanelItemPropsWithKey[];
+    /**
+     * 底部工具（系统级别），如果传入 children 则使用 children
+     */
+    itemsBottom?: ISidePanelItemPropsWithKey[];
+    /**
+     * 给一个 DOM 节点，组件会监测它的滚动情况，并判断是否展示快速置顶按钮
+     */
+    quickTopContainer?: Window | HTMLElement | null;
+    /**
+     * QuickTop 显隐变化时的回调，可用于日志
+     */
+    onQuickTopVisibleChange?(visible: boolean): void;
+    /**
+     * 是否展示推入按钮
+     */
+    onCollapsedChange?(collapsed: boolean): void;
+}

package/build/types/model/types/state.d.ts

@@ -0,0 +1,4 @@
+export interface IModelState {
+    collapsed: boolean;
+    quickTopVisible: boolean;
+}

package/build/types/model/util/index.d.ts

@@ -0,0 +1 @@
+export { default as toggleBodyClass } from './toggle-body-class';

package/build/types/model/util/toggle-body-class.d.ts

@@ -0,0 +1 @@
+export default function toggleBodyClass(yes?: boolean): void;

package/build/types/ui/const/index.d.ts

@@ -0,0 +1,8 @@
+export declare const SPACING_X = 10;
+export declare const SPACING_Y = 6;
+export declare const SIZE_BUTTON: number;
+export declare const SIZE_BUTTON_ICON: number;
+export declare const SIZE_BUTTON_WRAP_WIDTH: number;
+export declare const SIZE_BUTTON_WRAP_HEIGHT: number;
+export declare const DATA_KEY_SIDE_PANEL_ITEM = "data-console-base-side-panel-item";
+export declare const DATA_KEY_J = "data-j-side-panel";

package/build/types/ui/index.d.ts

@@ -0,0 +1 @@
+export default function Ui(): JSX.Element | null;

package/build/types/ui/intl/index.d.ts

@@ -0,0 +1,6 @@
+declare const _default: import("@alicloud/console-base-intl-factory-basic").FnIntl<{
+    'op:toggle_visible': string;
+    'op:toggle_hidden': string;
+    'op:back_to_top': string;
+}>;
+export default _default;

package/build/types/ui/intl/locales/en-us.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+    'op:toggle_visible': string;
+    'op:toggle_hidden': string;
+    'op:back_to_top': string;
+};
+export default _default;

package/build/types/ui/intl/locales/ja-jp.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+    'op:toggle_visible': string;
+    'op:toggle_hidden': string;
+    'op:back_to_top': string;
+};
+export default _default;

package/build/types/ui/intl/locales/zh-cn.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+    'op:toggle_visible': string;
+    'op:toggle_hidden': string;
+    'op:back_to_top': string;
+};
+export default _default;

package/build/types/ui/intl/locales/zh-tw.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+    'op:toggle_visible': string;
+    'op:toggle_hidden': string;
+    'op:back_to_top': string;
+};
+export default _default;

package/build/types/ui/rc/aside/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("styled-components").StyledComponent<"aside", any, {}, never>;
+export default _default;

package/build/types/ui/rc/global-style-on-body/index.d.ts

@@ -0,0 +1 @@
+export default function GlobalStyleOnBody(): JSX.Element;

package/build/types/ui/rc/index.d.ts

@@ -0,0 +1,6 @@
+export { default as Aside } from './aside';
+export { default as GlobalStyleOnBody } from './global-style-on-body';
+export { default as SidePanelItemWrap } from './side-panel-item-wrap';
+export { default as SidePanelItemButton } from './side-panel-item-button';
+export { default as SidePanelItemBadge } from './side-panel-item-badge';
+export { default as SidePanelItemTooltip } from './side-panel-item-tooltip';

package/build/types/ui/rc/side-panel-item-badge/index.d.ts

@@ -0,0 +1,9 @@
+import { SidePanelItemProps } from '../../../model';
+interface IProps extends Pick<SidePanelItemProps, 'unread' | 'mark'> {
+    alignLeft?: boolean;
+}
+/**
+ * 右上角的徽标，unread 优先于 mark
+ */
+export default function SidePanelItemBadge({ unread, mark, alignLeft }: IProps): JSX.Element | null;
+export {};

package/build/types/ui/rc/side-panel-item-button/index.d.ts

@@ -0,0 +1,5 @@
+import { ISidePanelItemButtonProps } from '../../types';
+/**
+ * 工具的按钮
+ */
+export default function SidePanelItemButton({ title, ...props }: ISidePanelItemButtonProps): JSX.Element;

package/build/types/ui/rc/side-panel-item-tooltip/index.d.ts

@@ -0,0 +1,10 @@
+import { TooltipProps } from '@alicloud/console-base-rc-tooltip';
+import { SidePanelItemProps } from '../../../model';
+interface IProps extends Omit<TooltipProps, 'placement' | 'arrowOffset'> {
+    align?: SidePanelItemProps['tooltipAlign'];
+}
+/**
+ * 工具按钮之外的部分（如果不是 tooltip 则期望它是 createPortal 出去的）
+ */
+export default function SidePanelItemTooltip({ visible, align, content, ...props }: IProps): JSX.Element;
+export {};

package/build/types/ui/rc/side-panel-item-wrap/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * 工具的外层包裹
+ */
+declare const _default: import("styled-components").StyledComponent<"div", any, {}, never>;
+export default _default;

package/build/types/ui/rc-container/collapse-toggle/index.d.ts

@@ -0,0 +1 @@
+export default function PanelToggle(): JSX.Element;

package/build/types/ui/rc-container/index.d.ts

@@ -0,0 +1,3 @@
+export { default as ItemsTop } from './items-top';
+export { default as ItemsBottom } from './items-bottom';
+export { default as CollapseToggle } from './collapse-toggle';

package/build/types/ui/rc-container/item/index.d.ts

@@ -0,0 +1,5 @@
+import { SidePanelItemProps } from '../../../model';
+interface IProps extends SidePanelItemProps {
+}
+export default function Item({ id, className, style, active, title, titleActive, icon, iconHovered, iconActive, iconActiveHovered, unread, mark, tooltip, tooltipActive, tooltipAsHtml, tooltipAlign, tooltipDefaultVisible, onClick, onActiveChange, onMouseEnter, onMouseLeave, ...props }: IProps): JSX.Element;
+export {};

package/build/types/ui/rc-container/items/index.d.ts

@@ -0,0 +1,6 @@
+import { SidePanelItemPropsWithKey } from '../../../model';
+interface IProps {
+    items: SidePanelItemPropsWithKey[];
+}
+export default function Items({ items }: IProps): JSX.Element;
+export {};

package/build/types/ui/rc-container/items-bottom/index.d.ts

@@ -0,0 +1 @@
+export default function ItemsBottom(): JSX.Element | null;

package/build/types/ui/rc-container/items-bottom/quick-top/index.d.ts

@@ -0,0 +1 @@
+export default function QuickTop(): JSX.Element;

package/build/types/ui/rc-container/items-top/index.d.ts

@@ -0,0 +1 @@
+export default function ItemsTop(): JSX.Element;

package/build/types/ui/types/index.d.ts

@@ -0,0 +1,4 @@
+import { ButtonProps } from '@alicloud/console-base-rc-button';
+export interface ISidePanelItemButtonProps extends Omit<ButtonProps, 'size' | 'theme' | 'title'> {
+    title?: string;
+}

package/build/types/ui/util/get-value-by-status.d.ts

@@ -0,0 +1,8 @@
+interface IValues<T> {
+    valueNormal: T;
+    valueHovered?: T;
+    valueActive?: T;
+    valueActiveHovered?: T;
+}
+export default function getValueByStatus<T>(values: IValues<T>, hovered?: boolean, active?: boolean): T;
+export {};

package/build/types/ui/util/index.d.ts

@@ -0,0 +1 @@
+export { default as getValueByStatus } from './get-value-by-status';

package/build/types/with-model/index.d.ts

@@ -0,0 +1,2 @@
+import { ModelProps } from '../model';
+export default function WithModel(props: ModelProps): JSX.Element;

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@alicloud/console-base-rc-side-panel",
+  "version": "1.0.0",
+  "description": "ConsoleBase 组件 - 右侧边栏",
+  "license": "MIT",
+  "sideEffects": false,
+  "main": "build/cjs/index.js",
+  "module": "build/es/index.js",
+  "types": "build/types/index.d.ts",
+  "homepage": "https://github.com/aliyun/alibabacloud-console-base/tree/master/packages-rc/console-base-rc-side-panel",
+  "author": {
+    "name": "Jianchun Wang",
+    "email": "justnewbee@gmail.com"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/aliyun/alibabacloud-console-base.git"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [],
+  "devDependencies": {
+    "@alicloud/console-base-demo-helper-theme-switcher": "^1.1.9",
+    "@alicloud/console-base-rc-top-nav": "^1.16.5",
+    "@alicloud/console-toolkit-cli": "^1.2.30",
+    "@alicloud/console-toolkit-preset-component": "^1.2.61",
+    "@alicloud/demo-rc-elements": "^1.11.16",
+    "@alicloud/ts-config": "^1.1.3",
+    "@types/react": "^17.0.58",
+    "@types/styled-components": "^5.1.26",
+    "react": "^17.0.2",
+    "styled-components": "^5.3.9",
+    "typescript": "^4.9.5"
+  },
+  "peerDependencies": {
+    "react": ">=16.8",
+    "styled-components": ">=5"
+  },
+  "dependencies": {
+    "@alicloud/console-base-intl-factory-basic": "^1.6.9",
+    "@alicloud/console-base-rc-button": "^1.7.11",
+    "@alicloud/console-base-rc-easy-icon": "^1.0.1",
+    "@alicloud/console-base-rc-flex": "^1.4.11",
+    "@alicloud/console-base-rc-html-trusted": "^1.0.5",
+    "@alicloud/console-base-rc-icon": "^1.10.5",
+    "@alicloud/console-base-rc-marks": "^1.8.3",
+    "@alicloud/console-base-rc-tooltip": "^1.1.12",
+    "@alicloud/console-base-theme": "^1.9.3",
+    "@alicloud/console-base-theme-sc-base": "^1.6.4",
+    "@alicloud/mere-dom": "^1.7.0",
+    "@alicloud/react-hook-is-unmounted": "^1.3.4",
+    "@alicloud/react-hook-mouse-enter-leave": "^1.0.3",
+    "@alicloud/typescript-missing-helpers": "^1.3.4",
+    "immutability-helper": "^3.1.1"
+  },
+  "scripts": {
+    "start": "breezr start-storybook",
+    "test": "breezr test:unit",
+    "build:esm": "breezr build --engine babel --es-module",
+    "build:cjs": "breezr build --engine babel",
+    "build:bundle": "breezr build --engine webpack",
+    "build:typings": "tsc --outDir build/types --declaration --emitDeclarationOnly",
+    "build": "yarn build:esm && yarn build:cjs && yarn build:typings",
+    "clean": "rm -rf build",
+    "prepublishOnly": "yarn clean && yarn build"
+  },
+  "gitHead": "e3daf0b177915f37e8beae4ecee204d8c62f9507"
+}