): ComponentType => {
4 | const args = [];
5 | const argv = [];
6 | Object.keys(dependencies).map((key) => {
7 | args.push(key);
8 | argv.push(dependencies[key]);
9 | });
10 | args.push(code || '');
11 | return new Function(...args)(...argv);
12 | };
13 |
--------------------------------------------------------------------------------
/apps/example/src/components/CodePreview/utils/index.ts:
--------------------------------------------------------------------------------
1 | export * from './generateElement';
2 | export * from './transform';
3 |
--------------------------------------------------------------------------------
/apps/example/src/components/CodePreview/utils/transform.tsx:
--------------------------------------------------------------------------------
1 | import { transform } from '@babel/standalone';
2 | import RemoveImports from 'babel-plugin-transform-remove-imports';
3 |
4 | export function babelTransform(input: string) {
5 | const { code } = transform(input, {
6 | presets: ['react'],
7 | plugins: [[RemoveImports, { removeAll: true }]],
8 | });
9 | return code;
10 | }
11 |
--------------------------------------------------------------------------------
/apps/example/src/components/ConfigProvider/constants.tsx:
--------------------------------------------------------------------------------
1 | import { ZH_CN } from '../../locale/constants';
2 |
3 | export const DEFAULT_LOCALE = ZH_CN;
4 |
--------------------------------------------------------------------------------
/apps/example/src/components/ConfigProvider/index.ts:
--------------------------------------------------------------------------------
1 | import type { ConfigProviderProps } from './interface';
2 |
3 | export type { ConfigProviderProps };
4 | export * from './configProvider';
5 |
--------------------------------------------------------------------------------
/apps/example/src/components/ConfigProvider/interface.ts:
--------------------------------------------------------------------------------
1 | import { ITheme } from '@/utils/setTheme/interface';
2 | import { ZH_CN, EN_US } from '../../locale/constants';
3 |
4 | export interface ConfigProviderProps {
5 | lang?: typeof ZH_CN | typeof EN_US;
6 | setLang?: (lang: ConfigProviderProps['lang']) => void;
7 | theme?: ITheme['type'];
8 | setTheme?: (theme: ITheme['type']) => void;
9 | }
10 |
--------------------------------------------------------------------------------
/apps/example/src/components/DemoBlock/ComponentCodeBlock.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import * as MX from '@mx-design/web';
3 | import { DemoBlock } from '@/components/DemoBlock';
4 | import { CodePreview } from '@/components/CodePreview';
5 |
6 | export function ComponentCodeBlock({ title, desc, code, namespace, demoContainerStyle }) {
7 | return (
8 |
9 |
10 |
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/apps/example/src/components/DemoBlock/componentBlock.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { DemoBlock } from '@/components/DemoBlock';
3 |
4 | export function ComponentBlock({ title, desc, component, namespace }) {
5 | return (
6 |
7 | {component}
8 |
9 | );
10 | }
11 |
--------------------------------------------------------------------------------
/apps/example/src/components/DemoBlock/demoBlock.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import styles from './styles/index.module.less';
3 |
4 | export function DemoBlock(props) {
5 | const { title, children, desc, namespace } = props;
6 | return (
7 |
8 |
9 | {title}
10 |
11 |
{desc}
12 |
{children}
13 |
11 | Error {err.status || 500}: {err.statusText ?? err.message}
12 |
13 | );
14 | }
15 |
16 | export default ErrorBoundary;
17 |
--------------------------------------------------------------------------------
/apps/example/src/components/Layout/AppLayout.tsx:
--------------------------------------------------------------------------------
1 | import React, { useRef } from 'react';
2 | import { Outlet } from 'react-router-dom';
3 | import NavBar from '../NavBar';
4 |
5 | function AppLayout() {
6 | return (
7 |
8 |
9 |
10 |
11 | );
12 | }
13 | export default AppLayout;
14 |
--------------------------------------------------------------------------------
/apps/example/src/components/Layout/constants.ts:
--------------------------------------------------------------------------------
1 | export const initial = { opacity: 0 };
2 | export const animate = { opacity: 1 };
3 | export const exit = { opacity: 0 };
4 |
--------------------------------------------------------------------------------
/apps/example/src/components/Layout/styles/index.module.less:
--------------------------------------------------------------------------------
1 | .app-container {
2 | padding-top: 60px;
3 | display: flex;
4 | background-color: var(--bg-color-container);
5 | overflow-x: hidden;
6 | }
7 |
8 | .content-container {
9 | position: relative;
10 | width: 100%;
11 | max-width: 1100px;
12 | margin: 0 auto;
13 | padding: 0 56px;
14 | box-sizing: border-box;
15 | overflow: hidden;
16 | }
--------------------------------------------------------------------------------
/apps/example/src/components/Logo/index.ts:
--------------------------------------------------------------------------------
1 | export * from './logoIcon';
2 |
--------------------------------------------------------------------------------
/apps/example/src/components/Logo/logoIcon.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { IconM, IconDesign, Space } from '@mx-design/web';
3 | import styles from './styles/index.module.less';
4 |
5 | export function IconLogo() {
6 | return (
7 |
8 |
9 |
10 |
11 | );
12 | }
13 |
14 | IconLogo.displayName = 'IconLogo';
15 |
--------------------------------------------------------------------------------
/apps/example/src/components/Logo/styles/index.module.less:
--------------------------------------------------------------------------------
1 | .logo-m {
2 | height: 60px;
3 | color: var(--brand-color)
4 | }
5 |
6 | .logo-design {
7 | height: 60px;
8 | margin-top: 3px;
9 | }
10 |
--------------------------------------------------------------------------------
/apps/example/src/components/Menu/components/Menu/utils/handleNavigate.ts:
--------------------------------------------------------------------------------
1 | export function handleNavigate({ navigate, path }) {
2 | return () => navigate(path);
3 | }
4 |
--------------------------------------------------------------------------------
/apps/example/src/components/Menu/components/Menu/utils/index.ts:
--------------------------------------------------------------------------------
1 | export * from './handleNavigate';
2 |
--------------------------------------------------------------------------------
/apps/example/src/components/Menu/components/index.ts:
--------------------------------------------------------------------------------
1 | export * from './CollapseBtn';
2 | export * from './Menu';
3 |
--------------------------------------------------------------------------------
/apps/example/src/components/Menu/constants.ts:
--------------------------------------------------------------------------------
1 | export const variants = {
2 | open: { width: 260 },
3 | closed: { width: 10, padding: 0 },
4 | };
5 |
6 | export const menu_variants = {
7 | open: { x: 0 },
8 | closed: { x: -250 },
9 | };
10 |
11 | export const btn_variants = {
12 | open: { x: 248 },
13 | closed: { x: 0 },
14 | };
15 |
--------------------------------------------------------------------------------
/apps/example/src/components/Menu/locale/constants.ts:
--------------------------------------------------------------------------------
1 | export const NAME_SPACE_SITE_MENU = 'site-menu';
2 |
--------------------------------------------------------------------------------
/apps/example/src/components/Menu/locale/index.ts:
--------------------------------------------------------------------------------
1 | export * from './en_us';
2 | export * from './zh_cn';
3 | export * from './constants';
4 |
--------------------------------------------------------------------------------
/apps/example/src/components/Menu/styles/index.module.less:
--------------------------------------------------------------------------------
1 | @import (reference) '../../../styles/common.less';
2 |
3 | .menu-container {
4 | position: relative;
5 | width: 260px;
6 | flex-shrink: 0;
7 | min-height: 100vh;
8 | box-sizing: border-box;
9 | background-color: var(--bg-color-container);
10 | box-shadow: var(--shadow-out-right);
11 |
12 | .menu-collapse-btn {
13 | position: fixed;
14 | top: 240px;
15 | z-index: 2;
16 | .btn-circle;
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/apps/example/src/components/NavBar/components/Logo.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { IconLogo } from '../../Logo';
3 | import styles from '../styles/index.module.less';
4 |
5 | export function Logo() {
6 | return (
7 |
8 |
9 |
10 | );
11 | }
12 |
--------------------------------------------------------------------------------
/apps/example/src/components/NavBar/components/TutorialsDropdown/Icon/index.ts:
--------------------------------------------------------------------------------
1 | export * from './cliIcon';
2 | export * from './componentsIcon';
3 |
--------------------------------------------------------------------------------
/apps/example/src/components/NavBar/components/TutorialsDropdown/components/TutorialsDropdown.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Card } from './Card';
3 |
4 | export function TutorialsDropdown(props) {
5 | const { lists, onClickMenuItem } = props;
6 |
7 | return (
8 | <>
9 | {lists.map((list, index) => (
10 |
11 | ))}
12 |
13 | );
14 | }
15 |
--------------------------------------------------------------------------------
/apps/example/src/components/NavBar/components/TutorialsDropdown/components/index.ts:
--------------------------------------------------------------------------------
1 | export * from './TutorialsDropdown';
2 | export * from './DropdownButton';
3 |
--------------------------------------------------------------------------------
/apps/example/src/components/NavBar/components/TutorialsDropdown/hooks.ts/index.ts:
--------------------------------------------------------------------------------
1 | export * from './useStore';
2 |
--------------------------------------------------------------------------------
/apps/example/src/components/NavBar/components/TutorialsDropdown/index.ts:
--------------------------------------------------------------------------------
1 | export * from './components';
2 |
--------------------------------------------------------------------------------
/apps/example/src/components/NavBar/components/TutorialsDropdown/locale/constants.ts:
--------------------------------------------------------------------------------
1 | export const NAME_SPACE_NAV_BAR = 'NAV_BAR';
2 | export const Tutorial = 'Tutorial';
3 |
--------------------------------------------------------------------------------
/apps/example/src/components/NavBar/components/TutorialsDropdown/locale/en_us.tsx:
--------------------------------------------------------------------------------
1 | export const en_us_nav_bar = {
2 | TutorialTitle: 'Component UI Library Tutorial',
3 | cliTitle: 'Component Library CLI Tool Tutorial',
4 | cliText: 'How to build a CLI tools about React Component UI Library',
5 | componentTitle: 'React UI Component Fundamentals Analysis',
6 | componentText: 'The idea of realizing each UI component',
7 | };
8 |
--------------------------------------------------------------------------------
/apps/example/src/components/NavBar/components/TutorialsDropdown/locale/index.ts:
--------------------------------------------------------------------------------
1 | export * from './en_us';
2 | export * from './zh_cn';
3 | export * from './constants';
4 |
--------------------------------------------------------------------------------
/apps/example/src/components/NavBar/components/TutorialsDropdown/locale/zh_cn.tsx:
--------------------------------------------------------------------------------
1 | export const zh_cn_nav_bar = {
2 | TutorialTitle: '组件库教程',
3 | cliTitle: '组件库CLI工具教程',
4 | cliText: '如何沉淀组件库开发环境和打包配置CLI工具教程',
5 | componentTitle: '组件基本原理分析',
6 | componentText: '实现组件库各个组件的思路',
7 | };
8 |
--------------------------------------------------------------------------------
/apps/example/src/components/NavBar/components/index.ts:
--------------------------------------------------------------------------------
1 | export * from './Logo';
2 | export * from './SelectLang';
3 | export * from './SelectTheme';
4 | export * from './GithubLink';
5 | export * from './TutorialsDropdown';
6 |
--------------------------------------------------------------------------------
/apps/example/src/components/Status/constants.ts:
--------------------------------------------------------------------------------
1 | export const homePath = '/components/icon';
2 | export const size = ['480px', '360px'];
3 |
--------------------------------------------------------------------------------
/apps/example/src/components/Status/interface.ts:
--------------------------------------------------------------------------------
1 | import { ReactNode } from "react"
2 |
3 | export interface ErrorPageProps {
4 | title: string
5 | des: string
6 | img: ReactNode
7 | children: ReactNode
8 | }
9 |
--------------------------------------------------------------------------------
/apps/example/src/components/Status/locale/constants.ts:
--------------------------------------------------------------------------------
1 | export const NAME_SPACE_STATUS = 'STATUS';
2 | export const DESC_404 = 'DESC_404';
3 | export const TRY_AGAIN = 'TRY_AGAIN';
4 | export const BACK = 'BACK';
5 |
--------------------------------------------------------------------------------
/apps/example/src/components/Status/locale/en_us.tsx:
--------------------------------------------------------------------------------
1 | import { BACK, DESC_404, TRY_AGAIN } from './constants';
2 |
3 | export const en_us_status = {
4 | [DESC_404]: '无法找到页面',
5 | [TRY_AGAIN]: 'Retry',
6 | [BACK]: 'Back to Home',
7 | };
8 |
--------------------------------------------------------------------------------
/apps/example/src/components/Status/locale/index.ts:
--------------------------------------------------------------------------------
1 | export * from './en_us';
2 | export * from './zh_cn';
3 | export * from './constants';
4 |
--------------------------------------------------------------------------------
/apps/example/src/components/Status/locale/zh_cn.tsx:
--------------------------------------------------------------------------------
1 | import { DESC_404, TRY_AGAIN, BACK } from './constants';
2 |
3 | export const zh_cn_status = {
4 | [DESC_404]: '无法找到页面',
5 | [TRY_AGAIN]: '重试',
6 | [BACK]: '返回主页',
7 | };
8 |
--------------------------------------------------------------------------------
/apps/example/src/hooks/index.ts:
--------------------------------------------------------------------------------
1 | export * from './useLang';
2 | export * from './useTheme';
3 |
--------------------------------------------------------------------------------
/apps/example/src/hooks/setTheme/constants.ts:
--------------------------------------------------------------------------------
1 | export const LIGHT = 'light';
2 | export const DARK = 'dark';
3 | export const THEME = 'theme';
4 |
5 | export const THEME_MODE_TYPE = {
6 | [LIGHT]: LIGHT,
7 | [DARK]: DARK,
8 | };
9 |
--------------------------------------------------------------------------------
/apps/example/src/hooks/setTheme/getTheme.ts:
--------------------------------------------------------------------------------
1 | import { getLocalStorage } from '@mx-design/web-utils';
2 | import { THEME } from './constants';
3 | import { ITheme } from './interface';
4 |
5 | export function getTheme(): ITheme['type'] {
6 | return getLocalStorage(THEME) as ITheme['type'];
7 | }
8 |
--------------------------------------------------------------------------------
/apps/example/src/hooks/setTheme/index.ts:
--------------------------------------------------------------------------------
1 | export * from './setTheme';
2 | export * from './getTheme';
3 |
--------------------------------------------------------------------------------
/apps/example/src/hooks/setTheme/interface.ts:
--------------------------------------------------------------------------------
1 | import { DARK, LIGHT } from './constants';
2 |
3 | export interface ITheme {
4 | type: typeof LIGHT | typeof DARK;
5 | }
6 |
7 | export type IThemeList = { themeName: string; content: Record }[];
8 |
--------------------------------------------------------------------------------
/apps/example/src/hooks/setTheme/setTheme.ts:
--------------------------------------------------------------------------------
1 | import { setLocalStorage } from '@mx-design/web-utils';
2 | import { THEME } from './constants';
3 |
4 | export function setTheme(_setTheme) {
5 | return (theme) => {
6 | setLocalStorage(THEME, theme);
7 | _setTheme(theme);
8 | };
9 | }
10 |
--------------------------------------------------------------------------------
/apps/example/src/interfaceDocs/Alert/alias.json:
--------------------------------------------------------------------------------
1 | []
--------------------------------------------------------------------------------
/apps/example/src/interfaceDocs/Anchor/alias.json:
--------------------------------------------------------------------------------
1 | []
--------------------------------------------------------------------------------
/apps/example/src/interfaceDocs/Checkbox/alias.json:
--------------------------------------------------------------------------------
1 | []
--------------------------------------------------------------------------------
/apps/example/src/interfaceDocs/ConfigProvider/alias.json:
--------------------------------------------------------------------------------
1 | []
--------------------------------------------------------------------------------
/apps/example/src/interfaceDocs/Dropdown/alias.json:
--------------------------------------------------------------------------------
1 | []
--------------------------------------------------------------------------------
/apps/example/src/interfaceDocs/Empty/alias.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "name": "IEmptyImage",
4 | "isExported": true,
5 | "isDefaultExport": false,
6 | "hasDeclareKeyword": false,
7 | "docs": [],
8 | "type": "({ imgSrc, alt, icon }: { imgSrc: EmptyProps['imgSrc']; alt: string; icon?: EmptyProps['icon'] }) => ReactNode",
9 | "typeParameters": [],
10 | "kind": 38
11 | }
12 | ]
--------------------------------------------------------------------------------
/apps/example/src/interfaceDocs/GridLayout/alias.json:
--------------------------------------------------------------------------------
1 | []
--------------------------------------------------------------------------------
/apps/example/src/interfaceDocs/Icon/interface.json:
--------------------------------------------------------------------------------
1 | []
--------------------------------------------------------------------------------
/apps/example/src/interfaceDocs/Input/alias.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "name": "RefInputType",
4 | "isExported": true,
5 | "isDefaultExport": false,
6 | "hasDeclareKeyword": false,
7 | "docs": [],
8 | "type": "{\n /** 使输入框失去焦点 */\n blur: () => void;\n /** 使输入框获取焦点 */\n focus: () => void;\n /** input dom元素 */\n inputDom: HTMLInputElement;\n}",
9 | "typeParameters": [],
10 | "kind": 38
11 | }
12 | ]
--------------------------------------------------------------------------------
/apps/example/src/interfaceDocs/Message/alias.json:
--------------------------------------------------------------------------------
1 | []
--------------------------------------------------------------------------------
/apps/example/src/interfaceDocs/Pagination/alias.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "name": "itemRenderType",
4 | "isExported": true,
5 | "isDefaultExport": false,
6 | "hasDeclareKeyword": false,
7 | "docs": [],
8 | "type": "(page: number, type: 'page' | 'more' | 'prev' | 'next', originElement: ReactNode) => ReactNode",
9 | "typeParameters": [],
10 | "kind": 38
11 | }
12 | ]
--------------------------------------------------------------------------------
/apps/example/src/interfaceDocs/Portal/alias.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "name": "AttachNodeReturnValue",
4 | "isExported": true,
5 | "isDefaultExport": false,
6 | "hasDeclareKeyword": false,
7 | "docs": [],
8 | "type": "HTMLElement | Element | Document | string",
9 | "typeParameters": [],
10 | "kind": 38
11 | }
12 | ]
--------------------------------------------------------------------------------
/apps/example/src/interfaceDocs/Radio/alias.json:
--------------------------------------------------------------------------------
1 | []
--------------------------------------------------------------------------------
/apps/example/src/interfaceDocs/Space/alias.json:
--------------------------------------------------------------------------------
1 | []
--------------------------------------------------------------------------------
/apps/example/src/interfaceDocs/Spin/alias.json:
--------------------------------------------------------------------------------
1 | []
--------------------------------------------------------------------------------
/apps/example/src/interfaceDocs/Switch/alias.json:
--------------------------------------------------------------------------------
1 | []
--------------------------------------------------------------------------------
/apps/example/src/interfaceDocs/Tag/alias.json:
--------------------------------------------------------------------------------
1 | []
--------------------------------------------------------------------------------
/apps/example/src/interfaceDocs/Tooltip/alias.json:
--------------------------------------------------------------------------------
1 | []
--------------------------------------------------------------------------------
/apps/example/src/locale/constants.ts:
--------------------------------------------------------------------------------
1 | export const REGEXP = /\{\s*([\w-]+)\s*\}/g;
2 | export const ZH_CN = 'zh_cn';
3 | export const EN_US = 'en_us';
4 | export const LANG = 'lang';
5 | export const LANG_LIST = [ZH_CN, EN_US];
6 |
--------------------------------------------------------------------------------
/apps/example/src/locale/index.ts:
--------------------------------------------------------------------------------
1 | import { EN_US, ZH_CN } from './constants';
2 | import { en_us } from './lang/en_us';
3 | import { zh_cn } from './lang/zh_cn';
4 |
5 | const local = {
6 | [ZH_CN]: zh_cn,
7 | [EN_US]: en_us,
8 | } as const;
9 |
10 | type Ilocal = typeof local;
11 | export { local };
12 | export type { Ilocal };
13 |
--------------------------------------------------------------------------------
/apps/example/src/locale/useLocal/transformLocale.ts:
--------------------------------------------------------------------------------
1 | import { REGEXP } from '../constants';
2 |
3 | export function transformLocale(pattern: string, placement?: Record): string {
4 | if (typeof pattern === 'string') {
5 | if (!placement || !REGEXP.test(pattern)) return pattern;
6 | return pattern.replace(REGEXP, (_, key) => {
7 | if (placement) return String(placement[key]);
8 | return '';
9 | });
10 | }
11 |
12 | return '';
13 | }
14 |
--------------------------------------------------------------------------------
/apps/example/src/pages/affix/examples/index.ts:
--------------------------------------------------------------------------------
1 | import { basic } from './basic';
2 | import { container } from './container';
3 |
4 | export const exampleList = {
5 | [basic.namespace]: basic,
6 | [container.namespace]: container,
7 | };
8 |
--------------------------------------------------------------------------------
/apps/example/src/pages/affix/locale/constants.ts:
--------------------------------------------------------------------------------
1 | export const Basic = 'Basic';
2 | export const Container = 'Container';
3 |
--------------------------------------------------------------------------------
/apps/example/src/pages/affix/locale/en_us.tsx:
--------------------------------------------------------------------------------
1 | import { Basic, Container } from './constants';
2 | import React from 'react';
3 |
4 | export const en_us_affix = {
5 | [Basic]: {
6 | title: 'Basic Affix',
7 | desc: (
8 | <>
9 | Suitable for scenes with simple page, the default container is body
10 |
11 | ),
12 | },
13 | [Container]: {
14 | title: 'Specifies the container',
15 | desc: 'Fixed elements relative to a specific container',
16 | },
17 | };
18 |
--------------------------------------------------------------------------------
/apps/example/src/pages/affix/locale/index.ts:
--------------------------------------------------------------------------------
1 | export * from './en_us';
2 | export * from './zh_cn';
3 | export * from './constants';
4 |
--------------------------------------------------------------------------------
/apps/example/src/pages/affix/locale/zh_cn.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Basic, Container } from './constants';
3 |
4 | export const zh_cn_affix = {
5 | [Basic]: {
6 | title: '基础固钉',
7 | desc: (
8 | <>
9 | 适用于页面结构简单的场景，默认容器是 body
10 |
11 | ),
12 | },
13 | [Container]: {
14 | title: '指定挂载的容器',
15 | desc: '相对于特定的容器来固定元素',
16 | },
17 | };
18 |
--------------------------------------------------------------------------------
/apps/example/src/pages/alert/examples/basic.tsx:
--------------------------------------------------------------------------------
1 | import { Basic } from '../locale';
2 |
3 | const code = `
4 | import { Alert } from '@mx-design/web';
5 |
6 | function App() {
7 | return ;
8 | }`;
9 |
10 | export const basic = {
11 | code,
12 | namespace: Basic,
13 | };
14 |
--------------------------------------------------------------------------------
/apps/example/src/pages/alert/examples/noIcon.tsx:
--------------------------------------------------------------------------------
1 | import { NoIcon } from '../locale';
2 |
3 | const code = `
4 | import { Alert, Space } from '@mx-design/web';
5 |
6 | function App() {
7 | return (
8 |
9 |
10 |
11 |
12 | );
13 | }
14 | `;
15 |
16 | export const noIcon = {
17 | code,
18 | namespace: NoIcon,
19 | };
20 |
--------------------------------------------------------------------------------
/apps/example/src/pages/alert/examples/operation.tsx:
--------------------------------------------------------------------------------
1 | import { Operation } from '../locale';
2 |
3 | const code = `
4 | import { Alert } from '@mx-design/web';
5 |
6 | function App() {
7 | return Button} />;
8 | }`;
9 |
10 | export const operation = {
11 | code,
12 | namespace: Operation,
13 | };
14 |
--------------------------------------------------------------------------------
/apps/example/src/pages/alert/locale/constants.ts:
--------------------------------------------------------------------------------
1 | export const Basic = 'Basic';
2 | export const Type = 'Type';
3 | export const Custom = 'Custom';
4 | export const Closable = 'Closable';
5 | export const NoIcon = 'NoIcon';
6 | export const Operation = 'Operation';
7 | export const Title = 'Title';
8 |
--------------------------------------------------------------------------------
/apps/example/src/pages/alert/locale/index.ts:
--------------------------------------------------------------------------------
1 | export * from './en_us';
2 | export * from './zh_cn';
3 | export * from './constants';
4 |
--------------------------------------------------------------------------------
/apps/example/src/pages/anchor/examples/index.ts:
--------------------------------------------------------------------------------
1 | import { basic } from './basic';
2 | import { affix } from './affix';
3 | import { lineless } from './lineless';
4 | import { scrollBoundary } from './scrollBoundary';
5 |
6 | export const exampleList = {
7 | [basic.namespace]: basic,
8 | [affix.namespace]: affix,
9 | [scrollBoundary.namespace]: scrollBoundary,
10 | [lineless.namespace]: lineless,
11 | };
12 |
--------------------------------------------------------------------------------
/apps/example/src/pages/anchor/locale/constants.ts:
--------------------------------------------------------------------------------
1 | export const Basic = 'Basic';
2 | export const Affix = 'Affix';
3 | export const Lineless = 'Lineless';
4 | export const ScrollBoundary = 'ScrollBoundary';
5 |
--------------------------------------------------------------------------------
/apps/example/src/pages/anchor/locale/index.ts:
--------------------------------------------------------------------------------
1 | export * from './en_us';
2 | export * from './zh_cn';
3 | export * from './constants';
4 |
--------------------------------------------------------------------------------
/apps/example/src/pages/button/examples/basic.tsx:
--------------------------------------------------------------------------------
1 | import { Basic } from '../locale';
2 |
3 | const code = `
4 | import { Space, Button } from '@mx-design/web';
5 |
6 | function App() {
7 | return (
8 |
9 |
10 |
11 |
12 |
13 | );
14 | }`;
15 |
16 | export const basic = {
17 | code,
18 | namespace: Basic,
19 | };
20 |
--------------------------------------------------------------------------------
/apps/example/src/pages/button/examples/icon.tsx:
--------------------------------------------------------------------------------
1 | import { Icon } from '../locale';
2 |
3 | const code = `
4 | import { Space, Button, IconAdd, IconAshbin } from '@mx-design/web';
5 |
6 | function App() {
7 | return (
8 |
9 | } />
10 | }>
11 | Delete
12 |
13 |
14 | )
15 | }`;
16 |
17 | export const icon = {
18 | code,
19 | namespace: Icon,
20 | };
21 |
--------------------------------------------------------------------------------
/apps/example/src/pages/button/examples/index.ts:
--------------------------------------------------------------------------------
1 | import { basic } from './basic';
2 | import { icon } from './icon';
3 | import { status } from './status';
4 | import { disabled } from './disabled';
5 | import { loading } from './loading';
6 | import { group } from './group';
7 | import { long } from './long';
8 |
9 | export const exampleList = {
10 | [basic.namespace]: basic,
11 | [icon.namespace]: icon,
12 | [status.namespace]: status,
13 | [disabled.namespace]: disabled,
14 | [loading.namespace]: loading,
15 | [group.namespace]: group,
16 | [long.namespace]: long,
17 | };
18 |
--------------------------------------------------------------------------------
/apps/example/src/pages/button/locale/constants.ts:
--------------------------------------------------------------------------------
1 | export const Basic = 'Basic';
2 | export const Icon = 'Icon';
3 | export const Status = 'Status';
4 | export const Disabled = 'Disabled';
5 | export const Loading = 'Loading';
6 | export const Group = 'Group';
7 | export const Long = 'Long';
8 | export const Compact = 'Compact';
9 |
--------------------------------------------------------------------------------
/apps/example/src/pages/button/locale/index.ts:
--------------------------------------------------------------------------------
1 | export * from './en_us';
2 | export * from './zh_cn';
3 | export * from './constants';
4 |
--------------------------------------------------------------------------------
/apps/example/src/pages/checkbox/examples/index.ts:
--------------------------------------------------------------------------------
1 | import { basic } from './basic';
2 | import { controlled } from './controlled';
3 | import { group } from './group';
4 | import { all } from './all';
5 | import { customContent } from './customContent';
6 |
7 | export const exampleList = {
8 | [basic.namespace]: basic,
9 | [controlled.namespace]: controlled,
10 | [group.namespace]: group,
11 | [all.namespace]: all,
12 | [customContent.namespace]: customContent,
13 | };
14 |
--------------------------------------------------------------------------------
/apps/example/src/pages/checkbox/locale/constants.ts:
--------------------------------------------------------------------------------
1 | export const Basic = 'Basic';
2 | export const Controlled = 'Controlled';
3 | export const Group = 'Group';
4 | export const All = 'All';
5 | export const CustomIcon = 'CustomIcon';
6 | export const CustomContent = 'CustomContent';
7 |
--------------------------------------------------------------------------------
/apps/example/src/pages/checkbox/locale/index.ts:
--------------------------------------------------------------------------------
1 | export * from './en_us';
2 | export * from './zh_cn';
3 | export * from './constants';
4 |
--------------------------------------------------------------------------------
/apps/example/src/pages/drawer/locale/constants.ts:
--------------------------------------------------------------------------------
1 | export const Basic = 'Basic';
2 | export const Position = 'Position';
3 | export const CustomizedElement = 'CustomizedElement';
4 | export const MultiLayer = 'MultiLayer';
5 | export const Mount = 'Mount';
6 | export const Update = 'Update';
7 |
--------------------------------------------------------------------------------
/apps/example/src/pages/drawer/locale/index.ts:
--------------------------------------------------------------------------------
1 | export * from './en_us';
2 | export * from './zh_cn';
3 | export * from './constants';
4 |
--------------------------------------------------------------------------------
/apps/example/src/pages/dropdown/locale/constants.ts:
--------------------------------------------------------------------------------
1 | export const Basic = 'Basic';
2 | export const Other = 'Other';
3 | export const DifferentTrigger = 'DifferentTrigger';
4 | export const Position = 'Position';
5 | export const FloatingLayer = 'FloatingLayer';
6 | export const Controlled = 'Controlled';
7 | export const Mount = 'Mount';
8 | export const Disabled = 'Disabled';
9 | export const GetDisabledStatus = 'GetDisabledStatus';
10 | export const ItemStyle = 'ItemStyle';
11 |
--------------------------------------------------------------------------------
/apps/example/src/pages/dropdown/locale/index.ts:
--------------------------------------------------------------------------------
1 | export * from './en_us';
2 | export * from './zh_cn';
3 | export * from './constants';
4 |
--------------------------------------------------------------------------------
/apps/example/src/pages/empty/examples/basic.tsx:
--------------------------------------------------------------------------------
1 | import { Basic } from '../locale';
2 |
3 | const code = `
4 | import { Empty } from '@mx-design/web';
5 |
6 | function App() {
7 | return ;
8 | };`;
9 |
10 | export const basic = {
11 | code,
12 | namespace: Basic,
13 | };
14 |
--------------------------------------------------------------------------------
/apps/example/src/pages/empty/examples/customPic.tsx:
--------------------------------------------------------------------------------
1 | import { CustomPic } from '../locale';
2 |
3 | const code = `
4 | import { Empty, Button } from '@mx-design/web';
5 |
6 | function App() {
7 | return (
8 | Refresh}
11 | />
12 | );
13 | };`;
14 |
15 | export const customPic = {
16 | code,
17 | namespace: CustomPic,
18 | };
19 |
--------------------------------------------------------------------------------
/apps/example/src/pages/empty/examples/index.ts:
--------------------------------------------------------------------------------
1 | import { basic } from './basic';
2 | import { customIcon } from './customIcon';
3 | import { customPic } from './customPic';
4 |
5 | export const exampleList = {
6 | [basic.namespace]: basic,
7 | [customIcon.namespace]: customIcon,
8 | [customPic.namespace]: customPic,
9 | };
10 |
--------------------------------------------------------------------------------
/apps/example/src/pages/empty/locale/constants.ts:
--------------------------------------------------------------------------------
1 | export const Basic = 'Basic';
2 | export const CustomIcon = 'CustomIcon';
3 | export const CustomPic = 'CustomPic';
4 |
--------------------------------------------------------------------------------
/apps/example/src/pages/empty/locale/index.ts:
--------------------------------------------------------------------------------
1 | export * from './en_us';
2 | export * from './zh_cn';
3 | export * from './constants';
4 |
--------------------------------------------------------------------------------
/apps/example/src/pages/grid/locale/constants.ts:
--------------------------------------------------------------------------------
1 | export const Basic = 'Basic';
2 | export const OffsetOfCol = 'OffsetOfCol';
3 | export const PushPull = 'PushPull';
4 | export const IntervalOfGrid = 'IntervalOfGrid';
5 | export const HorizontalLayout = 'HorizontalLayout';
6 | export const VerticalLayout = 'VerticalLayout';
7 | export const ResponsiveLayout = 'ResponsiveLayout';
8 | export const Order = 'Order';
9 | export const AdvancedResponsiveLayout = 'AdvancedResponsiveLayout';
10 | export const Flex = 'Flex';
11 |
--------------------------------------------------------------------------------
/apps/example/src/pages/grid/locale/index.ts:
--------------------------------------------------------------------------------
1 | export * from './en_us';
2 | export * from './zh_cn';
3 | export * from './constants';
4 |
--------------------------------------------------------------------------------
/apps/example/src/pages/gridLayout/locale/constants.ts:
--------------------------------------------------------------------------------
1 | export const Column = 'Column';
2 | export const Responsive = 'Responsive';
3 | export const HolyGrail = 'HolyGrail';
4 | export const ContainerAlign = 'ContainerAlign';
5 | export const ContainerJustify = 'ContainerJustify';
6 | export const Position = 'Position';
7 | export const Basic = 'Basic';
8 |
--------------------------------------------------------------------------------
/apps/example/src/pages/gridLayout/locale/index.ts:
--------------------------------------------------------------------------------
1 | export * from './en_us';
2 | export * from './zh_cn';
3 | export * from './constants';
4 |
--------------------------------------------------------------------------------
/apps/example/src/pages/icon/examples/basic.tsx:
--------------------------------------------------------------------------------
1 | import { Basic } from '../locale';
2 |
3 | const code = `
4 | import { IconSmile } from '@mx-design/web';
5 |
6 | function App() {
7 | return (
8 |
9 |
10 |
11 |
12 | )
13 | }`;
14 |
15 | export const basic = {
16 | code,
17 | namespace: Basic,
18 | };
19 |
--------------------------------------------------------------------------------
/apps/example/src/pages/icon/examples/data.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { LineData } from '@mx-design/web';
3 | import styles from '../style/index.module.less';
4 | import IconItem from './iconItem';
5 | import { Data } from '../locale';
6 |
7 | const getLineDataIcon = () =>
8 | Object.keys(LineData).map((Item, index) => {
9 | const I = LineData[Item];
10 | return ;
11 | });
12 | export const data = {
13 | component: {getLineDataIcon()}
,
14 | namespace: Data,
15 | };
16 |
--------------------------------------------------------------------------------
/apps/example/src/pages/icon/examples/iconFont.tsx:
--------------------------------------------------------------------------------
1 | import { IconFont } from '../locale';
2 |
3 | const code = `
4 | import { createFromIconfont } from '@mx-design/web';
5 |
6 | function App() {
7 | // pass url
8 | const IconFont = createFromIconfont('//at.alicdn.com/t/c/font_3337530_4kpk3x87pyc.js')
9 | return ;
10 | }`;
11 |
12 | export const iconFont = {
13 | code,
14 | namespace: IconFont,
15 | };
16 |
--------------------------------------------------------------------------------
/apps/example/src/pages/icon/examples/loading.tsx:
--------------------------------------------------------------------------------
1 | import { Loading } from '../locale';
2 |
3 | const code = `
4 | import { Loading, IconLoading, Space } from '@mx-design/web';
5 |
6 | function App() {
7 | return (
8 |
9 |
10 |
11 |
12 | )
13 | }`;
14 |
15 | export const loading = {
16 | code,
17 | namespace: Loading,
18 | };
19 |
--------------------------------------------------------------------------------
/apps/example/src/pages/icon/locale/constants.ts:
--------------------------------------------------------------------------------
1 | export const Basic = 'Basic';
2 | export const Loading = 'Loading';
3 | export const Custom = 'Custom';
4 | export const IconFont = 'IconFont';
5 | export const PromptSuggestion = 'PromptSuggestion';
6 | export const DirectionIndicator = 'DirectionIndicator';
7 | export const Editable = 'Editable';
8 | export const InteractiveButton = 'InteractiveButton';
9 | export const Data = 'Data';
10 |
--------------------------------------------------------------------------------
/apps/example/src/pages/icon/locale/index.ts:
--------------------------------------------------------------------------------
1 | export * from './en_us';
2 | export * from './zh_cn';
3 | export * from './constants';
4 |
--------------------------------------------------------------------------------
/apps/example/src/pages/input/examples/basic.tsx:
--------------------------------------------------------------------------------
1 | import { Basic } from '../locale';
2 |
3 | const code = `
4 | import { Input } from '@mx-design/web';
5 |
6 | function App() {
7 | return ;
8 | }`;
9 |
10 | export const basic = {
11 | code,
12 | namespace: Basic,
13 | };
14 |
--------------------------------------------------------------------------------
/apps/example/src/pages/input/examples/password.tsx:
--------------------------------------------------------------------------------
1 | import { Password } from '../locale';
2 |
3 | const code = `
4 | import { Space, Input } from '@mx-design/web';
5 |
6 | function App() {
7 | return (
8 |
9 |
10 |
11 |
12 | );
13 | }`;
14 |
15 | export const password = {
16 | code,
17 | namespace: Password,
18 | };
19 |
--------------------------------------------------------------------------------
/apps/example/src/pages/input/examples/status.tsx:
--------------------------------------------------------------------------------
1 | import { Status } from '../locale';
2 |
3 | const code = `
4 | import { GridLayout, Input } from '@mx-design/web';
5 |
6 | function App() {
7 | return (
8 |
9 |
10 |
11 |
12 |
13 | );
14 | }`;
15 |
16 | export const status = {
17 | code,
18 | namespace: Status,
19 | };
20 |
--------------------------------------------------------------------------------
/apps/example/src/pages/input/locale/constants.ts:
--------------------------------------------------------------------------------
1 | export const Basic = 'Basic';
2 | export const Status = 'Status';
3 | export const Label = 'Label';
4 | export const Suffix = 'Suffix';
5 | export const Search = 'Search';
6 | export const Limit = 'Limit';
7 | export const Password = 'Password';
8 | export const Normalize = 'Normalize';
9 |
--------------------------------------------------------------------------------
/apps/example/src/pages/input/locale/index.ts:
--------------------------------------------------------------------------------
1 | export * from './en_us';
2 | export * from './zh_cn';
3 | export * from './constants';
4 |
--------------------------------------------------------------------------------
/apps/example/src/pages/inputTag/examples/save-on-blur.tsx:
--------------------------------------------------------------------------------
1 | import { SaveOnBlur } from '../locale';
2 |
3 | const code = `
4 | import { InputTag } from '@mx-design/web';
5 |
6 | function App() {
7 | return ;
8 | }`;
9 |
10 | export const saveOnBlur = {
11 | code,
12 | namespace: SaveOnBlur,
13 | };
14 |
--------------------------------------------------------------------------------
/apps/example/src/pages/inputTag/examples/token-separator.tsx:
--------------------------------------------------------------------------------
1 | import { TokenSeparator } from '../locale';
2 |
3 | const code = `
4 | import { GridLayout, InputTag } from '@mx-design/web';
5 |
6 | function App() {
7 | return (
8 |
9 |
China,USA|UK
10 |
11 |
Link 1
10 | Link 2
11 | Link 3
12 |
13 | );
14 | }`;
15 |
16 | export const split = {
17 | code,
18 | namespace: Split,
19 | };
20 |
--------------------------------------------------------------------------------
/apps/example/src/pages/space/examples/vertical.tsx:
--------------------------------------------------------------------------------
1 | import { Vertical } from '../locale';
2 |
3 | const code = `
4 | import { Space } from '@mx-design/web';
5 |
6 | function App() {
7 | return (
8 |
9 |
10 |
11 |
12 |
13 | );
14 | }`;
15 |
16 | export const vertical = {
17 | code,
18 | namespace: Vertical,
19 | };
20 |
--------------------------------------------------------------------------------
/apps/example/src/pages/space/locale/constants.ts:
--------------------------------------------------------------------------------
1 | export const Basic = 'Basic';
2 | export const Vertical = 'Vertical';
3 | export const Size = 'Size';
4 | export const Align = 'Align';
5 | export const Split = 'Split';
6 |
--------------------------------------------------------------------------------
/apps/example/src/pages/space/locale/index.ts:
--------------------------------------------------------------------------------
1 | export * from './en_us';
2 | export * from './zh_cn';
3 | export * from './constants';
4 |
--------------------------------------------------------------------------------
/apps/example/src/pages/spin/examples/basic.tsx:
--------------------------------------------------------------------------------
1 | import { Basic } from '../locale';
2 |
3 | const code = `
4 | import { Spin } from '@mx-design/web';
5 |
6 | function App() {
7 | return ;
8 | };`;
9 |
10 | export const basic = {
11 | code,
12 | namespace: Basic,
13 | };
14 |
--------------------------------------------------------------------------------
/apps/example/src/pages/spin/examples/index.ts:
--------------------------------------------------------------------------------
1 | import { basic } from './basic';
2 | import { container } from './container';
3 | import { tip } from './tip';
4 | import { delay } from './delay';
5 | import { custom } from './custom';
6 | import { size } from './size';
7 |
8 | export const exampleList = {
9 | [basic.namespace]: basic,
10 | [container.namespace]: container,
11 | [tip.namespace]: tip,
12 | [delay.namespace]: delay,
13 | [custom.namespace]: custom,
14 | [size.namespace]: size,
15 | };
16 |
--------------------------------------------------------------------------------
/apps/example/src/pages/spin/examples/size.tsx:
--------------------------------------------------------------------------------
1 | import { Size } from '../locale';
2 |
3 | const code = `
4 | import { Spin, Space } from '@arco-design/web-react';
5 |
6 | function App() {
7 | return (
8 |
9 |
10 |
11 |
12 |
13 | );
14 | };`;
15 |
16 | export const size = {
17 | code,
18 | namespace: Size,
19 | };
20 |
--------------------------------------------------------------------------------
/apps/example/src/pages/spin/locale/constants.ts:
--------------------------------------------------------------------------------
1 | export const Basic = 'Basic';
2 | export const Container = 'Container';
3 | export const Tip = 'Tip';
4 | export const Delay = 'Delay';
5 | export const Custom = 'Custom';
6 | export const Size = 'Size';
7 |
--------------------------------------------------------------------------------
/apps/example/src/pages/spin/locale/index.ts:
--------------------------------------------------------------------------------
1 | export * from './en_us';
2 | export * from './zh_cn';
3 | export * from './constants';
4 |
--------------------------------------------------------------------------------
/apps/example/src/pages/switch/examples/basic.tsx:
--------------------------------------------------------------------------------
1 | import { Basic } from '../locale';
2 |
3 | const code = `
4 | import { Space, Switch } from '@mx-design/web';
5 |
6 | function App() {
7 | return (
8 |
9 |
10 |
11 | );
12 | }`;
13 |
14 | export const basic = {
15 | code,
16 | namespace: Basic,
17 | };
18 |
--------------------------------------------------------------------------------
/apps/example/src/pages/switch/examples/disabled.tsx:
--------------------------------------------------------------------------------
1 | import { Disabled } from '../locale';
2 |
3 | const code = `
4 | import { Space, Switch } from '@mx-design/web';
5 |
6 | function App() {
7 | return (
8 |
9 |
10 |
11 |
12 | );
13 | }`;
14 |
15 | export const disabled = {
16 | code,
17 | namespace: Disabled,
18 | };
19 |
--------------------------------------------------------------------------------
/apps/example/src/pages/switch/examples/icon.tsx:
--------------------------------------------------------------------------------
1 | import { Icon } from '../locale';
2 |
3 | const code = `
4 | import { Space, Switch } from '@mx-design/web';
5 |
6 | function App() {
7 | return (
8 |
9 | } uncheckedIcon={} />
10 | } unCheckedElement={} />
11 |
12 | );
13 | }`;
14 |
15 | export const icon = {
16 | code,
17 | namespace: Icon,
18 | };
19 |
--------------------------------------------------------------------------------
/apps/example/src/pages/switch/examples/index.ts:
--------------------------------------------------------------------------------
1 | import { basic } from './basic';
2 | import { icon } from './icon';
3 | import { text } from './text';
4 | import { disabled } from './disabled';
5 | import { loading } from './loading';
6 | import { size } from './size';
7 |
8 | export const exampleList = {
9 | [basic.namespace]: basic,
10 | [disabled.namespace]: disabled,
11 | [icon.namespace]: icon,
12 | [text.namespace]: text,
13 | [loading.namespace]: loading,
14 | [size.namespace]: size,
15 | };
16 |
--------------------------------------------------------------------------------
/apps/example/src/pages/switch/examples/loading.tsx:
--------------------------------------------------------------------------------
1 | import { Loading } from '../locale';
2 |
3 | const code = `
4 | import { Space, Switch } from '@mx-design/web';
5 |
6 | function App() {
7 | return (
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 | );
16 | }`;
17 |
18 | export const loading = {
19 | code,
20 | namespace: Loading,
21 | };
22 |
--------------------------------------------------------------------------------
/apps/example/src/pages/switch/examples/size.tsx:
--------------------------------------------------------------------------------
1 | import { Size } from '../locale';
2 |
3 | const code = `
4 | import { Space, Switch } from '@mx-design/web';
5 |
6 | function App() {
7 | return (
8 |
9 |
10 |
11 |
12 | );
13 | }`;
14 |
15 | export const size = {
16 | code,
17 | namespace: Size,
18 | };
19 |
--------------------------------------------------------------------------------
/apps/example/src/pages/switch/examples/text.tsx:
--------------------------------------------------------------------------------
1 | import { Text } from '../locale';
2 |
3 | const code = `
4 | import { Space, Switch } from '@mx-design/web';
5 |
6 | function App() {
7 | return (
8 |
9 |
10 |
11 |
12 | );
13 | }`;
14 |
15 | export const text = {
16 | code,
17 | namespace: Text,
18 | };
19 |
--------------------------------------------------------------------------------
/apps/example/src/pages/switch/locale/constants.ts:
--------------------------------------------------------------------------------
1 | export const Basic = 'Basic';
2 | export const Disabled = 'Disabled';
3 | export const Icon = 'Icon';
4 | export const Text = 'Text';
5 | export const Loading = 'Loading';
6 | export const Size = 'Size';
7 |
--------------------------------------------------------------------------------
/apps/example/src/pages/switch/locale/index.ts:
--------------------------------------------------------------------------------
1 | export * from './en_us';
2 | export * from './zh_cn';
3 | export * from './constants';
4 |
--------------------------------------------------------------------------------
/apps/example/src/pages/table/locale/index.ts:
--------------------------------------------------------------------------------
1 | export * from './en_us';
2 | export * from './zh_cn';
3 | export * from './constants';
4 |
--------------------------------------------------------------------------------
/apps/example/src/pages/tag/examples/index.ts:
--------------------------------------------------------------------------------
1 | import { basic } from './basic';
2 | import { icon } from './icon';
3 | import { closable } from './closable';
4 | import { maxWidth } from './maxWidth';
5 | import { shape } from './shape';
6 |
7 | export const exampleList = {
8 | [basic.namespace]: basic,
9 | [icon.namespace]: icon,
10 | [closable.namespace]: closable,
11 | [maxWidth.namespace]: maxWidth,
12 | [shape.namespace]: shape,
13 | };
14 |
--------------------------------------------------------------------------------
/apps/example/src/pages/tag/examples/maxWidth.tsx:
--------------------------------------------------------------------------------
1 | import { MaxWidth } from '../locale';
2 |
3 | const code = `
4 | import { Tag, Tooltip } from '@mx-design/web';
5 |
6 | function App() {
7 | return (
8 | "This is a long long long text label"}>
9 | This is a long long long text label
10 |
11 | );
12 | }`;
13 |
14 | export const maxWidth = {
15 | code,
16 | namespace: MaxWidth,
17 | };
18 |
--------------------------------------------------------------------------------
/apps/example/src/pages/tag/locale/constants.ts:
--------------------------------------------------------------------------------
1 | export const Basic = 'Basic';
2 | export const Icon = 'Icon';
3 | export const Closable = 'Closable';
4 | export const MaxWidth = 'MaxWidth';
5 | export const Shape = 'Shape';
6 |
--------------------------------------------------------------------------------
/apps/example/src/pages/tag/locale/index.ts:
--------------------------------------------------------------------------------
1 | export * from './en_us';
2 | export * from './zh_cn';
3 | export * from './constants';
4 |
--------------------------------------------------------------------------------
/apps/example/src/pages/tooltip/examples/basic.tsx:
--------------------------------------------------------------------------------
1 | import { Basic } from '../locale';
2 |
3 | const code = `
4 | import { Tooltip, Button } from '@mx-design/web';
5 |
6 | function App() {
7 | return (
8 | "This is a tooltip box"}>
9 |
10 |
11 | )
12 | }`;
13 |
14 | export const basic = {
15 | code,
16 | namespace: Basic,
17 | };
18 |
--------------------------------------------------------------------------------
/apps/example/src/pages/tooltip/examples/index.ts:
--------------------------------------------------------------------------------
1 | import { basic } from './basic';
2 | import { differentTrigger } from './differentTrigger';
3 | import { position } from './position';
4 | import { floatingLayer } from './floatingLayer';
5 |
6 | export const exampleList = {
7 | [basic.namespace]: basic,
8 | [differentTrigger.namespace]: differentTrigger,
9 | [position.namespace]: position,
10 | [floatingLayer.namespace]: floatingLayer,
11 | };
12 |
--------------------------------------------------------------------------------
/apps/example/src/pages/tooltip/locale/constants.ts:
--------------------------------------------------------------------------------
1 | export const Basic = 'Basic';
2 | export const TriggerMode = 'TriggerMode';
3 | export const DifferentTrigger = 'DifferentTrigger';
4 | export const Position = 'Position';
5 | export const FloatingLayer = 'FloatingLayer';
6 |
--------------------------------------------------------------------------------
/apps/example/src/pages/tooltip/locale/index.ts:
--------------------------------------------------------------------------------
1 | export * from './en_us';
2 | export * from './zh_cn';
3 | export * from './constants';
4 |
--------------------------------------------------------------------------------
/apps/example/src/routes/constants/index.ts:
--------------------------------------------------------------------------------
1 | export * from './component';
2 |
--------------------------------------------------------------------------------
/apps/example/src/routes/router.tsx:
--------------------------------------------------------------------------------
1 | import { createHashRouter } from 'react-router-dom';
2 | import { routerConfig } from './routerConfig';
3 |
4 | export const router = createHashRouter(routerConfig);
5 |
--------------------------------------------------------------------------------
/apps/example/src/typing.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.less';
2 |
--------------------------------------------------------------------------------
/apps/example/src/utils/index.css:
--------------------------------------------------------------------------------
1 | @keyframes fadeOut {
2 | from {
3 | opacity: 1;
4 | }
5 | to {
6 | opacity: 0;
7 | }
8 | }
9 |
10 | .fade-animation {
11 | animation-name: fadeOut;
12 | /* animation-duration: 1s; */
13 | }
14 |
--------------------------------------------------------------------------------
/apps/example/src/utils/index.ts:
--------------------------------------------------------------------------------
1 | export * from './layLoad';
2 | export * from './setCookieLang';
3 | export * from './setTheme';
4 | export { default as load } from './load';
5 |
--------------------------------------------------------------------------------
/apps/example/src/utils/setCookieLang.ts:
--------------------------------------------------------------------------------
1 | import { setCookie } from '@mx-design/web-utils';
2 | import { Dispatch, SetStateAction } from 'react';
3 | import { LANG, LANG_LIST } from '../locale/constants';
4 | import { ConfigProviderProps } from '../components/ConfigProvider';
5 |
6 | export const setCookieLang = (_setLang: Dispatch>) => (lang: ConfigProviderProps['lang']) => {
7 | if (!LANG_LIST.includes(lang)) return;
8 |
9 | setCookie(LANG, lang, 365);
10 | _setLang(lang);
11 | };
12 |
--------------------------------------------------------------------------------
/apps/example/src/utils/setTheme/constants.ts:
--------------------------------------------------------------------------------
1 | export const LIGHT = 'light';
2 | export const DARK = 'dark';
3 | export const THEME = 'theme';
4 |
5 | export const THEME_MODE_TYPE = {
6 | [LIGHT]: LIGHT,
7 | [DARK]: DARK,
8 | };
9 |
--------------------------------------------------------------------------------
/apps/example/src/utils/setTheme/getTheme.ts:
--------------------------------------------------------------------------------
1 | import { getLocalStorage } from '@mx-design/web-utils';
2 | import { THEME } from './constants';
3 | import { ITheme } from './interface';
4 |
5 | export function getTheme(): ITheme['type'] {
6 | return getLocalStorage(THEME) as ITheme['type'];
7 | }
8 |
--------------------------------------------------------------------------------
/apps/example/src/utils/setTheme/index.ts:
--------------------------------------------------------------------------------
1 | export * from './setTheme';
2 | export * from './getTheme';
3 |
--------------------------------------------------------------------------------
/apps/example/src/utils/setTheme/interface.ts:
--------------------------------------------------------------------------------
1 | import { DARK, LIGHT } from './constants';
2 |
3 | export interface ITheme {
4 | type: typeof LIGHT | typeof DARK;
5 | }
6 |
7 | export type IThemeList = { themeName: string; content: Record }[];
8 |
--------------------------------------------------------------------------------
/apps/example/src/utils/setTheme/setTheme.ts:
--------------------------------------------------------------------------------
1 | import { setLocalStorage } from '@mx-design/web-utils';
2 | import { THEME } from './constants';
3 |
4 | export function setTheme(_setTheme) {
5 | return (themeName) => {
6 | setLocalStorage(THEME, themeName);
7 | _setTheme(themeName);
8 | };
9 | }
10 |
--------------------------------------------------------------------------------
/apps/example/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "compilerOptions": {
4 | "baseUrl": ".",
5 | "paths": {
6 | "@/*": ["src/*"]
7 | }
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/assets/logo.dark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lio-mengxiang/mx-design/f2ba99463de122c827b37113aa15341319bb3ab2/assets/logo.dark.png
--------------------------------------------------------------------------------
/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lio-mengxiang/mx-design/f2ba99463de122c827b37113aa15341319bb3ab2/assets/logo.png
--------------------------------------------------------------------------------
/docs/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lio-mengxiang/mx-design/f2ba99463de122c827b37113aa15341319bb3ab2/docs/favicon.ico
--------------------------------------------------------------------------------
/docs/js/718.89d59bc0.js:
--------------------------------------------------------------------------------
1 | "use strict";(self.webpackChunk_mx_design_example=self.webpackChunk_mx_design_example||[]).push([[718],{9718:(e,t,s)=>{s.r(t),s.d(t,{default:()=>r});var n=s(1855),l=s(1208);const r=function(){var e,t=(0,l.r5)();return n.createElement("div",null,n.createElement("strong",null,"Error ",t.status||500),": ",null!==(e=t.statusText)&&void 0!==e?e:t.message)}}}]);
--------------------------------------------------------------------------------
/packages/mx-design-hooks/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | coverage
4 | .idea
5 | es
6 | lib
7 | dist
8 | esm
9 | cjs
10 | package-lock.json
11 | pnpm-lock.yaml
12 | types
13 | temp*
14 |
15 |
16 |
17 | # eslint
18 | .eslintcache
19 |
20 | # stylelint
21 | .stylelintcache
22 |
--------------------------------------------------------------------------------
/packages/mx-design-hooks/.npmrc:
--------------------------------------------------------------------------------
1 | # https://registry.npmmirror.com/是淘宝镜像
2 | # https://registry.npmjs.org/ npm 官方
3 | registry=https://registry.npmjs.org/
4 |
--------------------------------------------------------------------------------
/packages/mx-design-hooks/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from './useMergeValue';
2 | export * from './useConstant';
3 | export * from './useEvent';
4 | export * from './useIsFirstRender';
5 | export * from './useMergeRefs';
6 | export * from './usePrevious';
7 | export * from './useMergeProps';
8 | export * from './useForceUpdate';
9 | export * from './useStateWithPromise';
10 | export * from './useClipboard';
11 | export * from './useHover';
12 | export * from './useKeyboardEvent';
13 | export * from './useUnmountedRef';
14 | export * from './useRefState';
15 |
--------------------------------------------------------------------------------
/packages/mx-design-hooks/src/isBrowser.ts:
--------------------------------------------------------------------------------
1 | export const isBrowser = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
2 |
--------------------------------------------------------------------------------
/packages/mx-design-hooks/src/useConstant.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | type ResultBox = { v: T }
4 |
5 | export function useConstant(fn: () => T): T {
6 | const ref = React.useRef>();
7 |
8 | if (!ref.current) {
9 | ref.current = { v: fn() };
10 | }
11 |
12 | return ref.current.v;
13 | }
14 |
--------------------------------------------------------------------------------
/packages/mx-design-hooks/src/useForceUpdate.ts:
--------------------------------------------------------------------------------
1 | import { useReducer } from 'react';
2 |
3 | export function useForceUpdate() {
4 | const [, dispatch] = useReducer((v) => v + 1, 0);
5 | return dispatch;
6 | }
7 |
--------------------------------------------------------------------------------
/packages/mx-design-hooks/src/useIsFirstRender.ts:
--------------------------------------------------------------------------------
1 | import { useRef } from 'react';
2 |
3 | export function useIsFirstRender(): boolean {
4 | const isFirst = useRef(true);
5 |
6 | if (isFirst.current) {
7 | isFirst.current = false;
8 |
9 | return true;
10 | }
11 |
12 | return isFirst.current;
13 | }
14 |
--------------------------------------------------------------------------------
/packages/mx-design-hooks/src/useIsomorphicLayoutEffect.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useLayoutEffect } from 'react';
2 | import { isBrowser } from './isBrowser';
3 |
4 | // Because useLayoutEffect in the ssr environment will report a warning
5 | // So when you need to use useLayoutEffect, use useIsomorphicLayoutEffect instead, it will use useEffect in the ssr environment to avoid this problem
6 | export const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect;
7 |
--------------------------------------------------------------------------------
/packages/mx-design-hooks/src/useMergeProps.ts:
--------------------------------------------------------------------------------
1 | import { useMemo } from 'react';
2 |
3 | export function useMergeProps(
4 | componentProps: PropsType,
5 | defaultProps: Partial,
6 | globalComponentConfig: Partial | undefined
7 | ): PropsType {
8 | const _defaultProps = useMemo(() => ({ ...defaultProps, ...globalComponentConfig }), [defaultProps, globalComponentConfig]);
9 |
10 | return { ..._defaultProps, ...componentProps };
11 | }
12 |
--------------------------------------------------------------------------------
/packages/mx-design-hooks/src/usePrevious.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useRef } from 'react';
2 |
3 | /**
4 | * @zh 缓存上一次的 state 用于前后比较
5 | * @en Caching the last state is used for comparison
6 | */
7 | export function usePrevious(state: T): T | undefined {
8 | const ref = useRef();
9 |
10 | useEffect(() => {
11 | ref.current = state;
12 | });
13 |
14 | return ref.current;
15 | }
16 |
--------------------------------------------------------------------------------
/packages/mx-design-hooks/src/useUnmountedRef.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useRef } from 'react';
2 |
3 | /**
4 | * @zh 获取当前组件是否已经卸载的 Hook
5 | * @en get the status if component had been unmounted
6 | */
7 | export const useUnmountedRef = () => {
8 | const unmountedRef = useRef(false);
9 | useEffect(() => {
10 | unmountedRef.current = false;
11 | return () => {
12 | unmountedRef.current = true;
13 | };
14 | }, []);
15 | return unmountedRef;
16 | };
17 |
--------------------------------------------------------------------------------
/packages/mx-design-hooks/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "esm"
5 | },
6 | "include": ["src"]
7 | }
8 |
--------------------------------------------------------------------------------
/packages/mx-design-hooks/tsconfigCommonJS.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "lib",
5 | "module": "CommonJS"
6 | },
7 | "include": ["src"]
8 | }
9 |
--------------------------------------------------------------------------------
/packages/mx-design-node-utils/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | coverage
4 | .idea
5 | es
6 | lib
7 | dist
8 | esm
9 | cjs
10 | package-lock.json
11 | pnpm-lock.yaml
12 | types
13 | temp*
14 |
15 |
16 |
17 | # eslint
18 | .eslintcache
19 |
20 | # stylelint
21 | .stylelintcache
22 |
--------------------------------------------------------------------------------
/packages/mx-design-node-utils/.npmrc:
--------------------------------------------------------------------------------
1 | # https://registry.npmmirror.com/是淘宝镜像
2 | # https://registry.npmjs.org/ npm 官方
3 | registry=https://registry.npmjs.org/
4 |
--------------------------------------------------------------------------------
/packages/mx-design-node-utils/src/getProjectPath.ts:
--------------------------------------------------------------------------------
1 | import path from 'path';
2 |
3 | /**
4 | * 获取项目文件,以命令输入的目录为根目录
5 | */
6 | export function getProjectPath(dir = './'): string {
7 | return path.join(process.cwd(), dir);
8 | }
9 |
--------------------------------------------------------------------------------
/packages/mx-design-node-utils/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from './execQuick';
2 | export * from './getProjectPath';
3 | export * from './spinner';
4 |
--------------------------------------------------------------------------------
/packages/mx-design-node-utils/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "esm",
5 | },
6 | "include": ["src"]
7 | }
8 |
--------------------------------------------------------------------------------
/packages/mx-design-node-utils/tsconfigCommonJS.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "lib",
5 | "module": "CommonJS"
6 | },
7 | "include": ["src"]
8 | }
9 |
--------------------------------------------------------------------------------
/packages/mx-design-web-utils/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | coverage
4 | .idea
5 | es
6 | lib
7 | dist
8 | esm
9 | cjs
10 | package-lock.json
11 | pnpm-lock.yaml
12 | types
13 | temp*
14 |
15 |
16 |
17 | # eslint
18 | .eslintcache
19 |
20 | # stylelint
21 | .stylelintcache
22 |
--------------------------------------------------------------------------------
/packages/mx-design-web-utils/.npmrc:
--------------------------------------------------------------------------------
1 | # https://registry.npmmirror.com/是淘宝镜像
2 | # https://registry.npmjs.org/ npm 官方
3 | registry=https://registry.npmjs.org/
4 |
--------------------------------------------------------------------------------
/packages/mx-design-web-utils/src/cookie/deleteCookie.ts:
--------------------------------------------------------------------------------
1 | import { setCookie } from './setCookie';
2 |
3 | export function deleteCookie(name: string) {
4 | setCookie(name, '', -1);
5 | }
6 |
--------------------------------------------------------------------------------
/packages/mx-design-web-utils/src/cookie/index.ts:
--------------------------------------------------------------------------------
1 | export * from './deleteCookie';
2 | export * from './getCookie';
3 | export * from './setCookie';
4 |
--------------------------------------------------------------------------------
/packages/mx-design-web-utils/src/cookie/setCookie.ts:
--------------------------------------------------------------------------------
1 | export function setCookie(name: string, value: string, days: number) {
2 | const expires = new Date();
3 | expires.setTime(expires.getTime() + days * 24 * 60 * 60 * 1000);
4 | document.cookie = `${name}=${encodeURIComponent(value)};expires=${expires.toUTCString()};path=/`;
5 | }
6 |
--------------------------------------------------------------------------------
/packages/mx-design-web-utils/src/debounceByRaf.ts:
--------------------------------------------------------------------------------
1 | export function debounceByRaf(cb: (...args: any[]) => void) {
2 | let timer: null | number = null;
3 |
4 | const debounce = function (...args: any[]) {
5 | timer && window.cancelAnimationFrame(timer);
6 | timer = window.requestAnimationFrame(() => {
7 | cb(...args);
8 | timer = null;
9 | });
10 | };
11 |
12 | debounce.cancel = () => {
13 | window.cancelAnimationFrame(timer);
14 | timer = null;
15 | };
16 |
17 | return debounce;
18 | }
19 |
--------------------------------------------------------------------------------
/packages/mx-design-web-utils/src/dom/contains.ts:
--------------------------------------------------------------------------------
1 | export function contains(root: HTMLElement, ele) {
2 | if (!root) {
3 | return false;
4 | }
5 | if (root.contains) {
6 | return root.contains(ele);
7 | }
8 | let node = ele;
9 | while (node) {
10 | if (node === root) {
11 | return true;
12 | }
13 | node = node.parentNode;
14 | }
15 | return false;
16 | }
17 |
--------------------------------------------------------------------------------
/packages/mx-design-web-utils/src/dom/index.ts:
--------------------------------------------------------------------------------
1 | export * from './isNodeOverflow';
2 | export * from './contains';
3 |
--------------------------------------------------------------------------------
/packages/mx-design-web-utils/src/dom/isNodeOverflow.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * @zh 判断节点内容是否溢出
3 | * @en whether the node content is overflowing
4 | */
5 | export const isNodeOverflow = (ele: Element | Element[]): boolean => {
6 | const { clientWidth = 0, scrollWidth = 0 } = ele as Element;
7 |
8 | if (scrollWidth > clientWidth) {
9 | return true;
10 | }
11 | return false;
12 | };
13 |
--------------------------------------------------------------------------------
/packages/mx-design-web-utils/src/getId.ts:
--------------------------------------------------------------------------------
1 | const globalInstanceIdMap = {};
2 |
3 | export default function getId(prefix: string) {
4 | globalInstanceIdMap[prefix] = prefix in globalInstanceIdMap ? globalInstanceIdMap[prefix] : 0;
5 | globalInstanceIdMap[prefix] += 1;
6 | return `${prefix}${globalInstanceIdMap[prefix]}`;
7 | }
8 |
--------------------------------------------------------------------------------
/packages/mx-design-web-utils/src/group.ts:
--------------------------------------------------------------------------------
1 | export function group(array: any[], subGroupLength: number) {
2 | let index = 0;
3 | const newArray = [];
4 |
5 | while (index < array.length) {
6 | newArray.push(array.slice(index, (index += subGroupLength)));
7 | }
8 | return newArray;
9 | }
10 |
--------------------------------------------------------------------------------
/packages/mx-design-web-utils/src/isServerRendering.ts:
--------------------------------------------------------------------------------
1 | export const isServerRendering = function () {
2 | try {
3 | return !(typeof window !== 'undefined' && document !== undefined);
4 | } catch (e) {
5 | return true;
6 | }
7 | };
8 |
--------------------------------------------------------------------------------
/packages/mx-design-web-utils/src/localStorage/getLocalStorage.ts:
--------------------------------------------------------------------------------
1 | export function setLocalStorage(key: string, value: T | null = null): void {
2 | try {
3 | if (value === null) {
4 | localStorage.removeItem(key);
5 | } else {
6 | localStorage.setItem(key, JSON.stringify(value));
7 | }
8 | } catch (error) {
9 | if (typeof window !== 'undefined') {
10 | console.error(error);
11 | }
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/packages/mx-design-web-utils/src/localStorage/index.ts:
--------------------------------------------------------------------------------
1 | export * from './getLocalStorage';
2 | export * from './setLocalStorage';
3 |
--------------------------------------------------------------------------------
/packages/mx-design-web-utils/src/localStorage/setLocalStorage.ts:
--------------------------------------------------------------------------------
1 | export function getLocalStorage(key: string, defaultValue: T | null = null): T | null {
2 | try {
3 | const value = localStorage.getItem(key);
4 | if (value) return JSON.parse(value) as T;
5 | } catch (error) {
6 | if (typeof window !== 'undefined') {
7 | console.error(error);
8 | }
9 | }
10 |
11 | return defaultValue;
12 | }
13 |
--------------------------------------------------------------------------------
/packages/mx-design-web-utils/src/noop.ts:
--------------------------------------------------------------------------------
1 | export function noop() {}
2 |
--------------------------------------------------------------------------------
/packages/mx-design-web-utils/src/off.ts:
--------------------------------------------------------------------------------
1 | import { isServerRendering } from './isServerRendering';
2 | import { noop } from './noop';
3 |
4 | export const off = function (
5 | element: EventTarget | null,
6 | event: string,
7 | // eslint-disable-next-line no-undef
8 | handler: EventListenerOrEventListenerObject,
9 | // eslint-disable-next-line no-undef
10 | options?: boolean | AddEventListenerOptions
11 | ) {
12 | if (isServerRendering()) {
13 | return noop;
14 | }
15 | return element?.removeEventListener(event, handler, options || false);
16 | };
17 |
--------------------------------------------------------------------------------
/packages/mx-design-web-utils/src/omit.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * delete keys from object
3 | */
4 | export function omit, K extends keyof T>(
5 | obj: T,
6 | keys: Array // string 为了某些没有声明的属性被omit
7 | ): Omit {
8 | const clone = {
9 | ...obj,
10 | };
11 | keys.forEach((key) => {
12 | if ((key as K) in clone) {
13 | delete clone[key as K];
14 | }
15 | });
16 | return clone;
17 | }
18 |
--------------------------------------------------------------------------------
/packages/mx-design-web-utils/src/on.ts:
--------------------------------------------------------------------------------
1 | import { isServerRendering } from './isServerRendering';
2 | import { noop } from './noop';
3 |
4 | export const on = function (
5 | element: EventTarget | null,
6 | event: string,
7 | // eslint-disable-next-line no-undef
8 | handler: EventListenerOrEventListenerObject,
9 | // eslint-disable-next-line no-undef
10 | options?: boolean | AddEventListenerOptions
11 | ) {
12 | if (isServerRendering()) {
13 | return noop;
14 | }
15 | return element?.addEventListener(event, handler, options || false);
16 | };
17 |
--------------------------------------------------------------------------------
/packages/mx-design-web-utils/src/partial.ts:
--------------------------------------------------------------------------------
1 | export function partial(func: Function, ...args: T): Function {
2 | return function partiallyApplied(...moreArgs: T): R {
3 | return func(...args, ...moreArgs);
4 | };
5 | }
6 |
--------------------------------------------------------------------------------
/packages/mx-design-web-utils/src/pick.ts:
--------------------------------------------------------------------------------
1 | export function pick(obj: T, keys: Array): Pick {
2 | const clone = {} as Pick;
3 | keys.forEach((key) => {
4 | const k = key as K;
5 | if ((key as K) in obj) {
6 | clone[k] = obj[k];
7 | }
8 | });
9 | return clone;
10 | }
11 |
--------------------------------------------------------------------------------
/packages/mx-design-web-utils/src/setCssVariables.ts:
--------------------------------------------------------------------------------
1 | import { isObject } from './is';
2 |
3 | /**
4 | * change css variable
5 | */
6 | export function setCssVariables(variables: Record, root = document.documentElement) {
7 | if (variables && isObject(variables)) {
8 | Object.keys(variables).forEach((themKey) => {
9 | root.style.setProperty(themKey, variables[themKey]);
10 | });
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/packages/mx-design-web-utils/src/throttle/index.ts:
--------------------------------------------------------------------------------
1 | export * from './throttle';
2 |
--------------------------------------------------------------------------------
/packages/mx-design-web-utils/src/throttle/leadingThrottle.ts:
--------------------------------------------------------------------------------
1 | export function leadingThrottle any>(func: T, wait: number) {
2 | let previous = 0;
3 |
4 | const throttle = (...args: any[]) => {
5 | const now = Date.now();
6 | if (now - previous > wait) {
7 | func(args);
8 | previous = now;
9 | }
10 | };
11 |
12 | throttle.cancel = function () {
13 | previous = 0;
14 | };
15 |
16 | return throttle;
17 | }
18 |
--------------------------------------------------------------------------------
/packages/mx-design-web-utils/src/throttle/throttle.ts:
--------------------------------------------------------------------------------
1 | import { leadingThrottle } from './leadingThrottle';
2 | import { trailingThrottle } from './trailingThrottle';
3 |
4 | interface IOptions {
5 | leading?: boolean;
6 | trailing?: boolean;
7 | }
8 |
9 | export function throttle any>(func: T, wait: number, options: IOptions) {
10 | if (options.trailing) {
11 | return trailingThrottle(func, wait);
12 | }
13 | return leadingThrottle(func, wait);
14 | }
15 |
--------------------------------------------------------------------------------
/packages/mx-design-web-utils/src/throttle/trailingThrottle.ts:
--------------------------------------------------------------------------------
1 | export function trailingThrottle any>(func: T, wait: number) {
2 | let timeout = null;
3 |
4 | const throttle = (...args: any[]) => {
5 | if (!timeout) {
6 | timeout = setTimeout(() => {
7 | timeout = null;
8 | func(args);
9 | }, wait);
10 | }
11 | };
12 |
13 | throttle.cancel = function () {
14 | clearTimeout(timeout);
15 | timeout = null;
16 | };
17 |
18 | return throttle;
19 | }
20 |
--------------------------------------------------------------------------------
/packages/mx-design-web-utils/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "esm"
5 | },
6 | "include": ["src"]
7 | }
8 |
--------------------------------------------------------------------------------
/packages/mx-design-web-utils/tsconfigCommonJS.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "lib",
5 | "module": "CommonJS"
6 | },
7 | "include": ["src"]
8 | }
9 |
--------------------------------------------------------------------------------
/packages/mx-design-web/.browserslistrc:
--------------------------------------------------------------------------------
1 | chrome 80
2 | edge 79
3 | firefox 78
4 | safari 14
5 |
--------------------------------------------------------------------------------
/packages/mx-design-web/.npmrc:
--------------------------------------------------------------------------------
1 | # https://registry.npmmirror.com/是淘宝镜像
2 | # https://registry.npmjs.org/ npm 官方
3 | registry=https://registry.npmjs.com/
4 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Affix/components/index.ts:
--------------------------------------------------------------------------------
1 | export * from './affix';
2 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Affix/index.tsx:
--------------------------------------------------------------------------------
1 | export * from './components';
2 | export * from './interface';
3 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Affix/style/index.less:
--------------------------------------------------------------------------------
1 | @import (reference) '../../Style/base.less';
2 |
3 | @affix-prefix-cls: ~'@{prefix}-affix';
4 |
5 | .@{affix-prefix-cls} {
6 | position: fixed;
7 | z-index: var(--z-index-affix);
8 | }
9 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Affix/style/index.ts:
--------------------------------------------------------------------------------
1 | import './index.less';
2 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Affix/utils/fixedPlaceholder.ts:
--------------------------------------------------------------------------------
1 | interface IFixedPlaceholderStatus {
2 | affixWrapDom: HTMLDivElement;
3 | placeholderDom: HTMLElement;
4 | wrapWidth: number;
5 | wrapHeight: number;
6 | }
7 |
8 | export const fixedPlaceholder = ({ placeholderDom, affixWrapDom, wrapWidth, wrapHeight }: IFixedPlaceholderStatus) => {
9 | placeholderDom.style.width = `${wrapWidth}px`;
10 | placeholderDom.style.height = `${wrapHeight}px`;
11 | affixWrapDom.appendChild(placeholderDom);
12 | };
13 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Affix/utils/getContainingBlock.ts:
--------------------------------------------------------------------------------
1 | import { isContainingBlock } from '../../Popper-js/utils/isContainingBlock';
2 |
3 | export function getContainingBlock(element: Element) {
4 | let currentNode = element.parentElement;
5 | while (currentNode) {
6 | if (isContainingBlock(currentNode)) return currentNode;
7 | currentNode = currentNode.parentElement;
8 | }
9 | return null;
10 | }
11 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Affix/utils/getScrollContainer.ts:
--------------------------------------------------------------------------------
1 | import { isString } from '@mx-design/web-utils';
2 | import type { ScrollContainer, ScrollContainerElement } from '../interface';
3 |
4 | export const getScrollContainer = (container: ScrollContainer = 'body'): ScrollContainerElement => {
5 | if (isString(container)) {
6 | return container ? (document.querySelector(container as string) as HTMLElement) : window;
7 | }
8 | if (typeof container === 'function') {
9 | return container();
10 | }
11 | return container as Window | HTMLElement;
12 | };
13 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Affix/utils/index.ts:
--------------------------------------------------------------------------------
1 | export * from './calcTopAndBottom';
2 | export * from './fixedDom';
3 | export * from './getScrollContainer';
4 | export * from './getFixedTop';
5 | export * from './fixedPlaceholder';
6 | export * from './isNeedListParent';
7 | export * from './fixedDom';
8 | export * from './addScrollEvent';
9 | export * from './removeScrollEvent';
10 | export * from './handleFixedToggle';
11 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Affix/utils/isNeedListParent.ts:
--------------------------------------------------------------------------------
1 | import { getNodeName } from '../../Popper-js/utils/getNodeName';
2 | import { isHTMLElement } from '../../Popper-js/utils/isHTMLElement';
3 |
4 | export function isNeedListParent({ isInScrollContainer, scrollContainer }) {
5 | return (
6 | isInScrollContainer &&
7 | isHTMLElement(scrollContainer.current) &&
8 | ['html', 'body', '#document'].indexOf(getNodeName(scrollContainer.current)) <= 0
9 | );
10 | }
11 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Affix/utils/removeScrollEvent.ts:
--------------------------------------------------------------------------------
1 | export function removeScrollEvent({ scrollParentsList, needListParent, scrollContainer, handleScroll }) {
2 | if (needListParent) {
3 | scrollParentsList.forEach((element) => {
4 | element.removeEventListener('scroll', handleScroll);
5 | });
6 | } else {
7 | scrollContainer.current!.removeEventListener('scroll', handleScroll);
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Alert/components/index.ts:
--------------------------------------------------------------------------------
1 | export * from './alert';
2 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Alert/constants.ts:
--------------------------------------------------------------------------------
1 | import { EN_US, ZH_CN } from '../Locale/constants';
2 |
3 | export const ALERT_NAMESPACE = 'Alert';
4 |
5 | export const ALERT_LOCAL = {
6 | [EN_US]: {
7 | EXPAND_TEXT: 'expand',
8 | COLLAPSE_TEXT: 'collapse',
9 | },
10 | [ZH_CN]: {
11 | EXPAND_TEXT: '展开更多',
12 | COLLAPSE_TEXT: '收起',
13 | },
14 | };
15 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Alert/hooks/index.ts:
--------------------------------------------------------------------------------
1 | export * from './useClassNames';
2 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Alert/index.ts:
--------------------------------------------------------------------------------
1 | export * from './components';
2 | export * from './interface';
3 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Alert/style/index.ts:
--------------------------------------------------------------------------------
1 | import './index.less';
2 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Anchor/components/index.ts:
--------------------------------------------------------------------------------
1 | export * from './anchor';
2 | export * from './link';
3 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Anchor/context.ts:
--------------------------------------------------------------------------------
1 | import React, { createContext } from 'react';
2 |
3 | interface AnchorContext {
4 | currentLink: string;
5 | onLinkClick: (e: React.MouseEvent, href: string) => void;
6 | linkMap: React.MutableRefObject>;
7 | }
8 |
9 | export default createContext({
10 | currentLink: '',
11 | onLinkClick: () => {},
12 | linkMap: { current: new Map() },
13 | });
14 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Anchor/hooks/index.ts:
--------------------------------------------------------------------------------
1 | export * from './useClassNames';
2 | export * from './useLinkClassNames';
3 | export * from './useStyles';
4 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Anchor/hooks/useStyles.ts:
--------------------------------------------------------------------------------
1 | import { useMemo } from 'react';
2 | import type { AnchorProps } from '../interface';
3 |
4 | interface getStyleProps {
5 | style: AnchorProps['style'];
6 | themeStyle: AnchorProps['themeStyle'];
7 | }
8 | export function useStyles(props: getStyleProps) {
9 | const { style, themeStyle } = props;
10 |
11 | return useMemo(
12 | () => ({
13 | wrapperStyle: { ...style, ...themeStyle } as Record,
14 | }),
15 | [style, themeStyle]
16 | );
17 | }
18 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Anchor/index.tsx:
--------------------------------------------------------------------------------
1 | export * from './components';
2 | export * from './interface';
3 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Anchor/style/index.ts:
--------------------------------------------------------------------------------
1 | import './index.less';
2 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Anchor/utils/addLink.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export function addLink(linkMap: React.MutableRefObject>, hash: string, element: HTMLElement) {
4 | if (hash) {
5 | linkMap.current.set(hash, element);
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Anchor/utils/createNestedLink.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { baseAnchorLinkProps } from '../interface';
3 | import { Link } from '../components';
4 |
5 | export function createNestedLink(items?: baseAnchorLinkProps[]) {
6 | return Array.isArray(items)
7 | ? items.map((item) => (
8 |
9 | {createNestedLink(item.children)}
10 |
11 | ))
12 | : null;
13 | }
14 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Anchor/utils/findNode.ts:
--------------------------------------------------------------------------------
1 | export function findNode(dom: HTMLElement | Document, selector: string): HTMLElement | null {
2 | try {
3 | return dom.querySelector(selector);
4 | } catch (e) {
5 | // console.error(e);
6 | return null;
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Anchor/utils/getContainer.ts:
--------------------------------------------------------------------------------
1 | import { isString } from '@mx-design/web-utils';
2 | import { findNode } from './findNode';
3 |
4 | export function getContainer(targetContainer?: string | HTMLElement | Window): HTMLElement | Window {
5 | if (isString(targetContainer)) {
6 | return findNode(document, targetContainer as string);
7 | }
8 | return (targetContainer as HTMLElement | Window) || window;
9 | }
10 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Anchor/utils/getContainerElement.ts:
--------------------------------------------------------------------------------
1 | import { isWindow } from '@mx-design/web-utils';
2 |
3 | export function getContainerElement(scrollContainer: HTMLElement | Window) {
4 | return isWindow(scrollContainer) ? document.documentElement || document.body : scrollContainer;
5 | }
6 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Anchor/utils/getScrollLeft.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * @zh 获取滚动到左侧的距离
3 | * @en Get the distance scrolled to the left
4 | */
5 | export const getScrollLeft = (el?: Window | Element | null | undefined) => {
6 | if (el === undefined) {
7 | el = window;
8 | }
9 |
10 | if (!el) return 0;
11 |
12 | return (el === window ? Math.ceil(window.pageXOffset || window.scrollX) : (el as Element).scrollLeft) || 0;
13 | };
14 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Anchor/utils/getScrollTop.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * @zh 获取滚动到顶部的距离
3 | * @en Gets the scroll distance to the top
4 | */
5 | export const getScrollTop = (el?: Window | Element | null | undefined) => {
6 | if (el === undefined) {
7 | el = window;
8 | }
9 |
10 | if (!el) return 0;
11 |
12 | return (el === window ? Math.ceil(window.pageYOffset) : (el as Element).scrollTop) || 0;
13 | };
14 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Anchor/utils/index.ts:
--------------------------------------------------------------------------------
1 | export * from './findNode';
2 | export * from './getContainer';
3 | export * from './setActiveLink';
4 | export * from './getContainerElement';
5 | export * from './getEleInViewport';
6 | export * from './scrollIntoView';
7 | export * from './isNotNullUndefined';
8 | export * from './createNestedLink';
9 | export * from './addLink';
10 | export * from './removeLink';
11 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Anchor/utils/isNotNullUndefined.ts:
--------------------------------------------------------------------------------
1 | import { isUndefined } from '@mx-design/web-utils';
2 | import { AnchorLinkProps } from '../interface';
3 |
4 | export const isNotNullUndefined = (title: AnchorLinkProps['title']) => {
5 | return !isUndefined(title) && title !== null && title !== '';
6 | };
7 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Anchor/utils/removeLink.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export function removeLink(linkMap: React.MutableRefObject>, hash: string) {
4 | linkMap.current.delete(hash);
5 | }
6 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Button/components/index.ts:
--------------------------------------------------------------------------------
1 | export * from './button';
2 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Button/constants.ts:
--------------------------------------------------------------------------------
1 | export const omitProperties = ['style', 'className'];
2 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Button/hooks/index.ts:
--------------------------------------------------------------------------------
1 | export * from './useClassNames';
2 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Button/index.tsx:
--------------------------------------------------------------------------------
1 | export * from './components';
2 | export * from './interface';
3 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Button/style/index.ts:
--------------------------------------------------------------------------------
1 | import './index.less';
2 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Checkbox/components/index.ts:
--------------------------------------------------------------------------------
1 | export * from './checkbox';
2 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Checkbox/hooks/index.ts:
--------------------------------------------------------------------------------
1 | export * from './useGroupClassNames';
2 | export * from './useClassNames';
3 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Checkbox/index.tsx:
--------------------------------------------------------------------------------
1 | export * from './components';
2 | export * from './interface';
3 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Checkbox/style/index.ts:
--------------------------------------------------------------------------------
1 | import './index.less';
2 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Checkbox/utils/index.ts:
--------------------------------------------------------------------------------
1 | export * from './getMergeProps';
2 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Common/getId.ts:
--------------------------------------------------------------------------------
1 | let count = 1;
2 | export function getId() {
3 | count += 1;
4 | return count;
5 | }
6 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Common/index.ts:
--------------------------------------------------------------------------------
1 | export * from './Hover';
2 | export * from './renderIcon';
3 | export * from './interface';
4 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Common/interface.tsx:
--------------------------------------------------------------------------------
1 | import { ReactNode } from 'react';
2 |
3 | export type MNode = T extends undefined ? ReactNode : ReactNode | ((props: T) => ReactNode);
4 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/ConfigProvider/constants.tsx:
--------------------------------------------------------------------------------
1 | import { ZH_CN } from '../Locale/constants';
2 |
3 | export const PREFIX_CLS = 'mx';
4 | export const MEDIUM_SIZE = 'medium';
5 | export const DEFAULT_SIZE = MEDIUM_SIZE;
6 | export const SMALL_SIZE = 'small';
7 | export const LARGE_SIZE = 'large';
8 | export const DEFAULT_LOCALE = ZH_CN;
9 | export const LANG = 'lang';
10 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/ConfigProvider/hooks/index.ts:
--------------------------------------------------------------------------------
1 | export * from './useGlobalTheme';
2 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/ConfigProvider/hooks/useGlobalTheme.tsx:
--------------------------------------------------------------------------------
1 | import { useLayoutEffect } from 'react';
2 | import { setCssVariables } from '@mx-design/web-utils';
3 |
4 | export function useGlobalTheme(variables) {
5 | useLayoutEffect(() => {
6 | setCssVariables(variables);
7 | }, [variables]);
8 | }
9 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/ConfigProvider/index.ts:
--------------------------------------------------------------------------------
1 | import type { ConfigProviderProps } from './interface';
2 |
3 | export type { ConfigProviderProps };
4 | export * from './configProvider';
5 | export * from '../Style/lightTheme';
6 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/ConfigProvider/utils/index.ts:
--------------------------------------------------------------------------------
1 | export * from './renderEmpty';
2 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/ConfigProvider/utils/renderEmpty.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Empty } from '../../Empty';
3 |
4 | export function renderEmpty() {
5 | return ;
6 | }
7 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Drawer/components/index.ts:
--------------------------------------------------------------------------------
1 | export * from './footer';
2 | export * from './drawer';
3 | export * from './drawerCard';
4 | export * from './drawerProvider';
5 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Drawer/hooks/index.ts:
--------------------------------------------------------------------------------
1 | export * from './useModalClassNames';
2 | export * from './useCardClassNames';
3 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Drawer/index.ts:
--------------------------------------------------------------------------------
1 | export * from './components/drawerProvider';
2 | export * from './interface';
3 | export { DrawerStore } from './store';
4 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Drawer/store/index.ts:
--------------------------------------------------------------------------------
1 | export * from './useProviderStore';
2 | export * from './useDrawerStore';
3 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Drawer/style/cssVariables.less:
--------------------------------------------------------------------------------
1 | body {
2 | --drawer-icon-hover-bg: var(--bg-color-container-hover);
3 | --drawer-icon-hover-size: 24px;
4 | --drawer-icon-size: 14px;
5 | --drawer-title-padding: 16px 16px;
6 | --drawer-content-padding: 14px 16px;
7 | --drawer-footer-padding: 12px 16px;
8 | --drawer-mask-bg: var(--mask-active);
9 | --drawer-bg: var(--bg-color-container);
10 | }
11 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Drawer/style/index.ts:
--------------------------------------------------------------------------------
1 | import './index.less';
2 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Drawer/utils/findById.ts:
--------------------------------------------------------------------------------
1 | import type { DrawerProps } from '../interface';
2 |
3 | export const findById = (arr: DrawerProps[], id: DrawerProps['id']) => arr.find((item) => item.id === id);
4 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Drawer/utils/findIndexById.ts:
--------------------------------------------------------------------------------
1 | import type { DrawerProps } from '../interface';
2 |
3 | export const findIndexById = (arr: DrawerProps[], id: DrawerProps['id']) => arr.findIndex((item) => item.id === id);
4 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Drawer/utils/getId.ts:
--------------------------------------------------------------------------------
1 | import type { DrawerProps } from '../interface';
2 |
3 | let count = 1;
4 | export function getId(noticeProps: DrawerProps) {
5 | if (noticeProps.id) {
6 | return noticeProps.id;
7 | }
8 | count += 1;
9 | return count;
10 | }
11 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Drawer/utils/index.ts:
--------------------------------------------------------------------------------
1 | export * from './getId';
2 | export * from './findById';
3 | export * from './findIndexById';
4 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Dropdown/index.ts:
--------------------------------------------------------------------------------
1 | export * from './interface';
2 |
3 | export { default as Dropdown } from './dropdown';
4 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Dropdown/style/index.ts:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lio-mengxiang/mx-design/f2ba99463de122c827b37113aa15341319bb3ab2/packages/mx-design-web/src/Dropdown/style/index.ts
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Empty/components/index.ts:
--------------------------------------------------------------------------------
1 | export * from './empty';
2 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Empty/constants.ts:
--------------------------------------------------------------------------------
1 | import { EN_US, ZH_CN } from '../Locale/constants';
2 |
3 | export const DEFAULT_DES = 'empty';
4 | export const EMPTY_NAMESPACE = 'Empty';
5 |
6 | export const EMPTY_LOCAL = {
7 | [EN_US]: {
8 | NO_DATA: 'NoData',
9 | },
10 | [ZH_CN]: {
11 | NO_DATA: '暂无数据',
12 | },
13 | };
14 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Empty/hooks/index.ts:
--------------------------------------------------------------------------------
1 | export * from './useClassNames';
2 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Empty/index.ts:
--------------------------------------------------------------------------------
1 | export * from './components';
2 | export * from './interface';
3 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Empty/style/cssVariables.less:
--------------------------------------------------------------------------------
1 | body {
2 | --empty-wrapper-color: var(--text-color-disabled);
3 | --empty-description-color: var(--text-color-disabled);
4 | }
5 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Empty/style/index.ts:
--------------------------------------------------------------------------------
1 | import './index.less';
2 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Empty/utils/getDesDefault.ts:
--------------------------------------------------------------------------------
1 | import { DEFAULT_DES } from '../constants';
2 |
3 | export function getDesDefault(description) {
4 | return typeof description === 'string' ? description : DEFAULT_DES;
5 | }
6 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Empty/utils/getEmptyImage.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { IconEmpty } from '../../Icon';
3 | import { IEmptyImage } from '../interface';
4 |
5 | export const emptyImage: IEmptyImage = ({ imgSrc, alt, icon }) => (imgSrc ? 
: icon || );
6 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Empty/utils/index.ts:
--------------------------------------------------------------------------------
1 | export * from './getDesDefault';
2 | export * from './getEmptyImage';
3 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Grid/components/index.ts:
--------------------------------------------------------------------------------
1 | export * from './col';
2 | export * from './row';
3 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Grid/context.ts:
--------------------------------------------------------------------------------
1 | import { createContext } from 'react';
2 |
3 | type RowContextType = {
4 | gutter?: [number, number];
5 | div?: boolean;
6 | };
7 |
8 | export const RowContext = createContext({});
9 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Grid/hooks/index.ts:
--------------------------------------------------------------------------------
1 | export * from './useResponsiveState';
2 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Grid/index.ts:
--------------------------------------------------------------------------------
1 | export * from './components';
2 | export * from './interface';
3 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Grid/style/index.less:
--------------------------------------------------------------------------------
1 | @import './row.less';
2 | @import './col.less';
3 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Grid/style/index.ts:
--------------------------------------------------------------------------------
1 | import './index.less';
2 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Grid/utils/getFlexString.ts:
--------------------------------------------------------------------------------
1 | import type { FlexType } from '../interface';
2 |
3 | export function getFlexString(flex: FlexType) {
4 | if (typeof flex === 'string' && /\d+[px|%|em|rem|]{1}/.test(flex)) {
5 | return `0 0 ${flex}`;
6 | }
7 | return flex;
8 | }
9 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Grid/utils/index.ts:
--------------------------------------------------------------------------------
1 | export * from './getGutter';
2 | export * from './getMarginStyle';
3 | export * from './adaptationGrid';
4 | export * from './getFlexString';
5 | export * from './getPaddingStyle';
6 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/GridLayout/components/index.ts:
--------------------------------------------------------------------------------
1 | export * from './cell';
2 | export * from './gridLayout';
3 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/GridLayout/index.ts:
--------------------------------------------------------------------------------
1 | export * from './components';
2 | export * from './interface';
3 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/GridLayout/utils/formatAreas.ts:
--------------------------------------------------------------------------------
1 | export const formatAreas = (areas) => areas && areas.map((area) => `"${area}"`).join(' ');
2 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/GridLayout/utils/frGetter.ts:
--------------------------------------------------------------------------------
1 | export const frGetter = (value) => {
2 | if (!value) return;
3 | return typeof value === 'number' ? `repeat(${value}, 1fr)` : value;
4 | };
5 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/GridLayout/utils/index.ts:
--------------------------------------------------------------------------------
1 | export * from './frGetter';
2 | export * from './formatAreas';
3 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Icon/hooks/index.ts:
--------------------------------------------------------------------------------
1 | export * from './useClassNames';
2 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Icon/react-icon/FillDirectionIndicator/index.ts:
--------------------------------------------------------------------------------
1 | export * from './IconArrowDownFilling';
2 | export * from './IconArrowLeftFilling';
3 | export * from './IconArrowRightFilling';
4 | export * from './IconArrowUpFilling';
5 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Icon/react-icon/FillEditable/index.ts:
--------------------------------------------------------------------------------
1 | export * from './IconEditFilling';
2 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Icon/react-icon/FillInteractiveButton/index.ts:
--------------------------------------------------------------------------------
1 | export * from './IconCheckItemFilling';
2 | export * from './IconFavoriteFilling';
3 | export * from './IconFilterFilling';
4 | export * from './IconFolderFilling';
5 | export * from './IconNotificationFilling';
6 | export * from './IconSettingFilling';
7 | export * from './IconSorting';
8 | export * from './IconTopFilling';
9 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Icon/react-icon/FillPromptSuggestion/index.ts:
--------------------------------------------------------------------------------
1 | export * from './IconCommentFilling';
2 | export * from './IconCryFilling';
3 | export * from './IconDeleteFilling';
4 | export * from './IconHelpFilling';
5 | export * from './IconHomeFilling';
6 | export * from './IconMapFilling';
7 | export * from './IconMehFilling';
8 | export * from './IconPromptFilling';
9 | export * from './IconSmileFilling';
10 | export * from './IconSuccessFilling';
11 | export * from './IconWarningFilling';
12 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Icon/react-icon/LineData/index.ts:
--------------------------------------------------------------------------------
1 | export * from './IconBranch';
2 | export * from './IconChartBar';
3 | export * from './IconChartPie';
4 | export * from './IconDataView';
5 | export * from './IconDatabase';
6 | export * from './IconInterface';
7 | export * from './IconServer';
8 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Icon/react-icon/LineEditable/IconEllipsis.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { createIcon } from '../../createIcon';
3 |
4 | export const IconEllipsis = createIcon({
5 | paths: (
6 | <>
7 |
8 |
9 |
10 |
11 | ),
12 | });
13 |
14 | IconEllipsis.displayName = 'IconEllipsis';
15 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Icon/react-icon/LineEditable/index.ts:
--------------------------------------------------------------------------------
1 | export * from './IconAshbin';
2 | export * from './IconCopy';
3 | export * from './IconCut';
4 | export * from './IconEdit';
5 | export * from './IconEllipsis';
6 | export * from './IconExport';
7 | export * from './IconEyeClose';
8 | export * from './IconLink';
9 | export * from './IconMic';
10 | export * from './IconMove';
11 | export * from './IconZoomOut';
12 | export * from './IconZoomOut';
13 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Icon/react-icon/LinePromptSuggestion/IconMinus.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { createIcon } from '../../createIcon';
3 |
4 | export const IconMinus = createIcon({
5 | paths: (
6 | <>
7 |
8 |
9 | ),
10 | });
11 |
12 | IconMinus.displayName = 'IconMinus';
13 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Icon/react-icon/Logo/index.ts:
--------------------------------------------------------------------------------
1 | export * from './IconDesign';
2 | export * from './IconM';
3 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Icon/react-icon/index.tsx:
--------------------------------------------------------------------------------
1 | export * from './FillDirectionIndicator';
2 | export * from './FillEditable';
3 | export * from './FillInteractiveButton';
4 | export * from './FillPromptSuggestion';
5 | export * from './LineData';
6 | export * from './LineDirectionIndicator';
7 | export * from './LineEditable';
8 | export * from './LineInteractiveButton';
9 | export * from './LinePromptSuggestion';
10 | export * from './Logo';
11 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Icon/style/index.less:
--------------------------------------------------------------------------------
1 | @import (reference) '../../Style/base.less';
2 |
3 | @prefixCls: ~'@{prefix}-icon';
4 |
5 | @keyframes mx-spin-anim {
6 | 0% {
7 | transform: rotate(0deg);
8 | }
9 |
10 | 100% {
11 | transform: rotate(360deg);
12 | }
13 | }
14 |
15 | .@{prefixCls} {
16 | display: inline-block;
17 | }
18 |
19 | .@{prefixCls}-spin {
20 | animation: mx-spin-anim 1s linear infinite;
21 | }
22 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Icon/style/index.ts:
--------------------------------------------------------------------------------
1 | import './index.less';
2 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Icon/utils/getSize.ts:
--------------------------------------------------------------------------------
1 | import type { IconProps } from '../interface';
2 |
3 | export const getSize = (size: IconProps['size']) => {
4 | if (Array.isArray(size) && size.length === 2) {
5 | return size as string[];
6 | }
7 | const width = (size as string) || '1em';
8 | const height = (size as string) || '1em';
9 | return [width, height];
10 | };
11 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Icon/utils/index.ts:
--------------------------------------------------------------------------------
1 | export { getSize } from './getSize';
2 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Input/components/index.ts:
--------------------------------------------------------------------------------
1 | export * from './input';
2 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Input/components/suffixElement.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { cs } from '@mx-design/web-utils';
3 |
4 | export function SuffixElement(props) {
5 | const { trueMaxLength, prefixCls, valueLength, hasLengthError } = props;
6 |
7 | return (
8 |
13 | {valueLength}/{trueMaxLength}
14 |
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Input/constants.ts:
--------------------------------------------------------------------------------
1 | export const inputContentWidth = 2;
2 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Input/hooks/index.ts:
--------------------------------------------------------------------------------
1 | export * from './useInputClassNames';
2 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Input/index.ts:
--------------------------------------------------------------------------------
1 | export * from './components';
2 | export * from './interface';
3 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Input/store/index.ts:
--------------------------------------------------------------------------------
1 | export * from './useInputElementStore';
2 | export * from './useInputStore';
3 | export * from './usePasswordStore';
4 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Input/style/cssVariables-search.less:
--------------------------------------------------------------------------------
1 | body {
2 | --input-search-btn-color: var(--text-color-anti);
3 | --input-search-disabled-text-color: var(--text-color-disabled);
4 | }
5 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Input/style/index.ts:
--------------------------------------------------------------------------------
1 | import './index.less';
2 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Input/style/status.less:
--------------------------------------------------------------------------------
1 | .input-status(@status) {
2 | &-@{status} {
3 | border-color: ~'var(--input-@{status}-color)';
4 |
5 | &:hover {
6 | border-color: ~'var(--input-@{status}-color)';
7 | }
8 | }
9 |
10 | &-@{status}&-focus {
11 | &,
12 | &:hover {
13 | border-color: ~'var(--input-@{status}-color)';
14 | }
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Input/utils/formatValue.tsx:
--------------------------------------------------------------------------------
1 | import { isString, isUndefined } from '@mx-design/web-utils';
2 |
3 | export function formatValue(value: any, maxLength: undefined | number) {
4 | let str: string;
5 | if (value !== null && !isUndefined(value) && !isString(value)) {
6 | str = String(value);
7 | } else {
8 | str = value || '';
9 | }
10 | if (maxLength) {
11 | return str.slice(0, maxLength);
12 | }
13 | return str;
14 | }
15 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Input/utils/index.ts:
--------------------------------------------------------------------------------
1 | export * from './formatValue';
2 | export * from './inputAddon';
3 | export * from './isLengthExceeds';
4 | export * from './keepFocus';
5 | export * from './getStyleFromInput';
6 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Input/utils/inputAddon.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export function inputAddon(className: string, node: React.ReactNode, style: object = {}): React.ReactNode | null {
4 | return node ? (
5 |
6 | {node}
7 |
8 | ) : null;
9 | }
10 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Input/utils/isLengthExceeds.tsx:
--------------------------------------------------------------------------------
1 | export function isLengthExceeds({ mergedMaxLength, valueLength, trueMaxLength }) {
2 | if (!mergedMaxLength && trueMaxLength) {
3 | return valueLength > trueMaxLength;
4 | }
5 | return false;
6 | }
7 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Input/utils/keepFocus.tsx:
--------------------------------------------------------------------------------
1 | export function keepFocus(e) {
2 | e.target.tagName !== 'INPUT' && e.preventDefault();
3 | }
4 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/InputTag/components/index.ts:
--------------------------------------------------------------------------------
1 | export * from './input-tag';
2 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/InputTag/constants.ts:
--------------------------------------------------------------------------------
1 | export const INPUT = 'INPUT';
2 | export const OMIT_PROPERTY = ['status'];
3 | export const ADD = 'add';
4 | export const REMOVE = 'remove';
5 | export const CLEAR = 'clear';
6 | export const CSS_TRANSITION_DURATION = 300;
7 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/InputTag/hooks/index.ts:
--------------------------------------------------------------------------------
1 | export * from './useClassNames';
2 | export * from './useComputeAutoWidthDelay';
3 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/InputTag/index.ts:
--------------------------------------------------------------------------------
1 | export * from './interface';
2 | export * from './components';
3 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/InputTag/store/index.ts:
--------------------------------------------------------------------------------
1 | export * from './useInputTagStore';
2 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/InputTag/style/index.ts:
--------------------------------------------------------------------------------
1 | import './index.less';
2 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/InputTag/utils/index.ts:
--------------------------------------------------------------------------------
1 | export * from './isEmptyNode';
2 | export * from './keepFocus';
3 | export * from './formatValue';
4 | export * from './tryAddInputValueToTag';
5 | export * from './valueChangeHandler';
6 | export * from './tagCloseHandler';
7 | export * from './mergedRenderTag';
8 | export * from './handleTokenSeparators';
9 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/InputTag/utils/isEmptyNode.ts:
--------------------------------------------------------------------------------
1 | import type { ReactNode } from 'react';
2 |
3 | export function isEmptyNode(node: ReactNode): boolean {
4 | return node === null || node === undefined;
5 | }
6 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/InputTag/utils/keepFocus.ts:
--------------------------------------------------------------------------------
1 | import { INPUT } from '../constants';
2 |
3 | export function keepFocus(e) {
4 | e.target.tagName !== INPUT && e.preventDefault();
5 | }
6 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Loading/index.ts:
--------------------------------------------------------------------------------
1 | export { default as Loading } from './loading';
2 | export * from './interface';
3 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Loading/interface.tsx:
--------------------------------------------------------------------------------
1 | import { CSSProperties } from 'react';
2 |
3 | export interface LoadingProps {
4 | style?: CSSProperties;
5 | size?: string;
6 | borderWidth?: string;
7 | }
8 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Loading/style/index.ts:
--------------------------------------------------------------------------------
1 | import './index.less';
2 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Locale/constants.ts:
--------------------------------------------------------------------------------
1 | export const REGEXP = /\{\s*([\w-]+)\s*\}/g;
2 | export const ZH_CN = 'zh_cn';
3 | export const EN_US = 'en_us';
4 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Locale/index.ts:
--------------------------------------------------------------------------------
1 | import { EN_US, ZH_CN } from './constants';
2 | import { mx_en_us } from './lang/en_us';
3 | import { mx_zn_ch } from './lang/zh_ch';
4 | import { transformLocale } from './useLocal/transformLocale';
5 |
6 | const mx_local = {
7 | [ZH_CN]: mx_zn_ch,
8 | [EN_US]: mx_en_us,
9 | };
10 | export type Ilocal = typeof mx_local;
11 | export { mx_local };
12 | export { transformLocale };
13 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Locale/useLocal/transformLocale.ts:
--------------------------------------------------------------------------------
1 | import { REGEXP } from '../constants';
2 |
3 | export function transformLocale(pattern: string, placement?: Record): string {
4 | if (typeof pattern === 'string') {
5 | if (!placement || !REGEXP.test(pattern)) return pattern;
6 | return pattern.replace(REGEXP, (_, key) => {
7 | if (placement) return String(placement[key]);
8 | return '';
9 | });
10 | }
11 |
12 | return '';
13 | }
14 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Menu/HorizontalMenu/index.ts:
--------------------------------------------------------------------------------
1 | export * from './horizontalMenu';
2 | export * from './horizontalItem';
3 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Menu/HorizontalMenu/style/cssVariables.less:
--------------------------------------------------------------------------------
1 | body {
2 | --input-tag-padding-horizontal: 4px;
3 | }
4 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Menu/HorizontalMenu/style/index.ts:
--------------------------------------------------------------------------------
1 | import './index.less';
2 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Menu/HorizontalMenu/utils/index.ts:
--------------------------------------------------------------------------------
1 | export * from './generateInfoMap';
2 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Menu/index.ts:
--------------------------------------------------------------------------------
1 | export * from './HorizontalMenu';
2 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Message/components/index.ts:
--------------------------------------------------------------------------------
1 | export * from './MessageCardContainer';
2 | export * from './MessageSingleDirection';
3 | export * from './MessageProvider';
4 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Message/constants.ts:
--------------------------------------------------------------------------------
1 | export const TOP_RIGHT = 'top-right';
2 | export const TOP = 'top';
3 | export const TOP_LEFT = 'top-left';
4 | export const BOTTOM_RIGHT = 'bottom-right';
5 | export const BOTTOM = 'bottom';
6 | export const BOTTOM_LEFT = 'bottom-left';
7 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Message/hooks/index.ts:
--------------------------------------------------------------------------------
1 | export * from './useClassNames';
2 | export * from './useTimer';
3 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Message/index.ts:
--------------------------------------------------------------------------------
1 | export * from './components/MessageProvider';
2 | export * from './interface';
3 | export { MessageStore } from './store';
4 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Message/style/index.ts:
--------------------------------------------------------------------------------
1 | import './index.less';
2 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Message/utils/findById.ts:
--------------------------------------------------------------------------------
1 | import type { MessageProps } from '../interface';
2 |
3 | export const findById = (arr: MessageProps[], id: number) => arr.find((item) => item.id === id);
4 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Message/utils/findToast.ts:
--------------------------------------------------------------------------------
1 | import { getToastPosition } from './getPosition';
2 |
3 | export function findToast(state: T, id: number) {
4 | const position = getToastPosition(state, id);
5 |
6 | const index = position ? state[position].findIndex((toast) => toast.id === id) : -1;
7 |
8 | return {
9 | position,
10 | index,
11 | };
12 | }
13 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Message/utils/getId.ts:
--------------------------------------------------------------------------------
1 | import { MessageProps } from '../interface';
2 |
3 | let count = 1;
4 | export function getId(noticeProps: MessageProps) {
5 | if (noticeProps.id) {
6 | return noticeProps.id;
7 | }
8 | count += 1;
9 | return count;
10 | }
11 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Message/utils/getPosition.ts:
--------------------------------------------------------------------------------
1 | import { findById } from './findById';
2 | import type { IPosition } from '../../Notification';
3 |
4 | export function getToastPosition(state: T, id: number) {
5 | for (const [position, values] of Object.entries(state)) {
6 | if (findById(values, id)) {
7 | return position as IPosition;
8 | }
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Message/utils/index.ts:
--------------------------------------------------------------------------------
1 | export * from './getId';
2 | export * from './findById';
3 | export * from './findToast';
4 | export * from './getPosition';
5 | export * from './applyNotificationSlide';
6 | export * from './getCardStyle';
7 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Modal/components/index.ts:
--------------------------------------------------------------------------------
1 | export * from './footer';
2 | export * from './modal';
3 | export * from './modalCard';
4 | export * from './modalProvider';
5 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Modal/hooks/index.ts:
--------------------------------------------------------------------------------
1 | export * from './useGetIcon';
2 | export * from './useOverflowHidden';
3 | export * from './useModalClassNames';
4 | export * from './useCardClassNames';
5 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Modal/index.ts:
--------------------------------------------------------------------------------
1 | export * from './components/modalProvider';
2 | export * from './interface';
3 | export { ModalStore } from './store';
4 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Modal/style/cssVariables.less:
--------------------------------------------------------------------------------
1 | body {
2 | --modal-top: 120px;
3 | --modal-radius: 8px;
4 | --modal-title-padding: 16px 24px;
5 | --modal-content-padding: 24px 24px;
6 | --modal-footer-padding: 12px 24px;
7 | --modal-bg: var(--bg-color-container);
8 | --modal-border-color: var(--border-level-1-color);
9 | --modal-mask-bg: var(--mask-active);
10 | --modal-icon-size: 24px;
11 | --modal-icon-hover-bg: var(--bg-color-container-hover);
12 | --modal-icon-hover-size: 24px;
13 | }
14 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Modal/style/index.ts:
--------------------------------------------------------------------------------
1 | import './index.less';
2 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Modal/utils/findById.ts:
--------------------------------------------------------------------------------
1 | import type { ModalProps } from '../interface';
2 |
3 | export const findById = (arr: ModalProps[], id: ModalProps['id']) => arr.find((item) => item.id === id);
4 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Modal/utils/findIndexById.ts:
--------------------------------------------------------------------------------
1 | import type { ModalProps } from '../interface';
2 |
3 | export const findIndexById = (arr: ModalProps[], id: ModalProps['id']) => arr.findIndex((item) => item.id === id);
4 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Modal/utils/getId.ts:
--------------------------------------------------------------------------------
1 | import type { ModalProps } from '../interface';
2 |
3 | let count = 1;
4 | export function getId(noticeProps: ModalProps) {
5 | if (noticeProps.id) {
6 | return noticeProps.id;
7 | }
8 | count += 1;
9 | return count;
10 | }
11 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Modal/utils/getScrollBarWidth.tsx:
--------------------------------------------------------------------------------
1 | export const getScrollBarWidth = (element: HTMLElement) => {
2 | return element.tagName === 'BODY'
3 | ? window.innerWidth - (document.body.clientWidth || document.documentElement.clientWidth)
4 | : element.offsetWidth - element.clientWidth;
5 | };
6 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Modal/utils/index.ts:
--------------------------------------------------------------------------------
1 | export * from './getId';
2 | export * from './findById';
3 | export * from './findIndexById';
4 | export * from './getScrollBarWidth';
5 | export * from './setContainerStyle';
6 | export * from './resetContainerStyle';
7 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Modal/utils/resetContainerStyle.ts:
--------------------------------------------------------------------------------
1 | export const resetContainerStyle = ({ needResetContainerStyle, getContainer, originContainerStyle }) => {
2 | if (needResetContainerStyle.current && getContainer()) {
3 | const container = getContainer();
4 | const originStyle = originContainerStyle.current;
5 | // eslint-disable-next-line no-return-assign
6 | Object.keys(originStyle).forEach((i) => (container.style[i] = originStyle[i]));
7 | }
8 | needResetContainerStyle.current = false;
9 | originContainerStyle.current = {};
10 | };
11 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Notification/components/index.ts:
--------------------------------------------------------------------------------
1 | export * from './NotificationProvider';
2 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Notification/constants.ts:
--------------------------------------------------------------------------------
1 | export const TOP_RIGHT = 'top-right';
2 | export const TOP = 'top';
3 | export const TOP_LEFT = 'top-left';
4 | export const BOTTOM_RIGHT = 'bottom-right';
5 | export const BOTTOM = 'bottom';
6 | export const BOTTOM_LEFT = 'bottom-left';
7 | export const NOTIFICATION = 'Notification';
8 | export const TOASTER = 'Toaster';
9 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Notification/hooks/index.ts:
--------------------------------------------------------------------------------
1 | export * from './useClassNames';
2 | export * from './useTimer';
3 | export * from './useCardClassNames';
4 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Notification/index.ts:
--------------------------------------------------------------------------------
1 | export * from './components';
2 | export * from './interface';
3 | export { NotificationStore } from './store';
4 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Notification/style/index.ts:
--------------------------------------------------------------------------------
1 | import './index.less';
2 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Notification/utils/findById.ts:
--------------------------------------------------------------------------------
1 | import type { NotificationProps } from '../interface';
2 |
3 | export const findById = (arr: NotificationProps[], id: number) => arr.find((item) => item.id === id);
4 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Notification/utils/findToast.ts:
--------------------------------------------------------------------------------
1 | import { getToastPosition } from './getPosition';
2 |
3 | export function findToast(state: T, id: number) {
4 | const position = getToastPosition(state, id);
5 |
6 | const index = position ? state[position].findIndex((toast) => toast.id === id) : -1;
7 |
8 | return {
9 | position,
10 | index,
11 | };
12 | }
13 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Notification/utils/getCardStyle.ts:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import type { IPosition } from '../interface';
3 |
4 | export function getCardStyle(position: IPosition): React.CSSProperties {
5 | const isRighty = position.includes('right');
6 | const isLefty = position.includes('left');
7 |
8 | let alignItems = 'center';
9 | if (isRighty) alignItems = 'flex-end';
10 | if (isLefty) alignItems = 'flex-start';
11 |
12 | return {
13 | display: 'flex',
14 | justifyContent: alignItems,
15 | };
16 | }
17 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Notification/utils/getId.ts:
--------------------------------------------------------------------------------
1 | import type { NotificationProps } from '../interface';
2 |
3 | let count = 1;
4 | export function getId(noticeProps: NotificationProps) {
5 | if (noticeProps.id) {
6 | return noticeProps.id;
7 | }
8 | count += 1;
9 | return count;
10 | }
11 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Notification/utils/getPosition.ts:
--------------------------------------------------------------------------------
1 | import type { IPosition } from '../interface';
2 | import { findById } from './findById';
3 |
4 | export function getToastPosition(state: T, id: number) {
5 | // eslint-disable-next-line no-restricted-syntax
6 | for (const [position, values] of Object.entries(state)) {
7 | if (findById(values, id)) {
8 | return position as IPosition;
9 | }
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Notification/utils/index.ts:
--------------------------------------------------------------------------------
1 | export * from './getId';
2 | export * from './findById';
3 | export * from './findToast';
4 | export * from './getPosition';
5 | export * from './applyNotificationSlide';
6 | export * from './getCardStyle';
7 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Pagination/components/index.ts:
--------------------------------------------------------------------------------
1 | export * from './page-item';
2 | export * from './pagination';
3 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Pagination/components/pagination.tsx:
--------------------------------------------------------------------------------
1 | import React, { forwardRef } from 'react';
2 | import { DefaultPagination } from './defaultPagination';
3 | import { SimplePagination } from './simplePagination';
4 | // types
5 | import type { PaginationProps } from '../interface';
6 |
7 | export const Pagination = forwardRef(({ simple, ...rest }, ref) => {
8 | if (!simple) {
9 | return ;
10 | }
11 | return ;
12 | });
13 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Pagination/index.ts:
--------------------------------------------------------------------------------
1 | export * from './components';
2 | export * from './interface';
3 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Pagination/store/index.ts:
--------------------------------------------------------------------------------
1 | export * from './useDefaultPaginationStore';
2 | export * from './useJumperStore';
3 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Pagination/style/index.ts:
--------------------------------------------------------------------------------
1 | import './index.less';
2 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Pagination/util.ts:
--------------------------------------------------------------------------------
1 | export const MIN_PAGE = 1;
2 |
3 | /**
4 | * 计算页数
5 | */
6 | export const calculatePage = (total: number, pageSize: number): number => {
7 | return Math.ceil(total / pageSize);
8 | };
9 |
10 | export const calculateCurrentPageSize = (current: number, total: number, pageSize: number): number => {
11 | const pageCount = calculatePage(total, pageSize);
12 |
13 | if (current < MIN_PAGE || current > pageCount) return 0;
14 |
15 | if (current < pageCount) return pageSize;
16 |
17 | return Math.ceil(total % pageSize);
18 | };
19 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Pagination/utils/getAdjustPageSize.ts:
--------------------------------------------------------------------------------
1 | import { DEFAULT_PAGE_SIZE } from '../constants';
2 |
3 | export function getAdjustPageSize(sizeOptions) {
4 | if (sizeOptions && sizeOptions.length) {
5 | return sizeOptions[0];
6 | }
7 | return DEFAULT_PAGE_SIZE;
8 | }
9 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Pagination/utils/getAdjustedCurrent.ts:
--------------------------------------------------------------------------------
1 | import { getAllPages } from './getAllPages';
2 |
3 | export function getAdjustedCurrent(newPageSize, newTotal, current) {
4 | const newAllPages = getAllPages(newPageSize, newTotal);
5 | if (newAllPages < 1) return 1;
6 | if (current > newAllPages) return newAllPages;
7 | return current;
8 | }
9 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Pagination/utils/getAllPages.ts:
--------------------------------------------------------------------------------
1 | export function getAllPages(pageSize, total) {
2 | const pageNum = Math.ceil(total / pageSize);
3 | return Math.max(pageNum, 0);
4 | }
5 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Pagination/utils/getBufferSize.ts:
--------------------------------------------------------------------------------
1 | export function getBufferSize(bufferSize, allPages) {
2 | const min = 0;
3 | const max = Math.floor(allPages / 2) - 1;
4 | return Math.min(Math.max(bufferSize, min), max);
5 | }
6 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Pagination/utils/getPagerStyle.ts:
--------------------------------------------------------------------------------
1 | export function getPagerStyle(pageItemStyle, isActive, activePageItemStyle) {
2 | if (isActive) {
3 | return { ...pageItemStyle, ...activePageItemStyle };
4 | }
5 | return pageItemStyle;
6 | }
7 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Pagination/utils/index.ts:
--------------------------------------------------------------------------------
1 | export * from './getAdjustPageSize';
2 | export * from './getAdjustedCurrent';
3 | export * from './getIcon';
4 | export * from './getPagerStyle';
5 | export * from './getAllPages';
6 | export * from './getBufferSize';
7 | export * from './limitPageRange';
8 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Pagination/utils/limitPageRange.ts:
--------------------------------------------------------------------------------
1 | export function limitPageRange(page, totalPages) {
2 | if (page < 1) {
3 | return 1;
4 | }
5 | if (page > totalPages) {
6 | return totalPages;
7 | }
8 | return page;
9 | }
10 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Popper-js/debounce.ts:
--------------------------------------------------------------------------------
1 | export default function debounce(fn: Function): () => Promise {
2 | let pending;
3 | return () => {
4 | if (!pending) {
5 | pending = new Promise((resolve) => {
6 | Promise.resolve().then(() => {
7 | pending = undefined;
8 | resolve(fn());
9 | });
10 | });
11 | }
12 |
13 | return pending;
14 | };
15 | }
16 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Popper-js/modifiers/index.ts:
--------------------------------------------------------------------------------
1 | export { default as eventListeners } from './eventListeners';
2 | export { default as popperOffsets } from './popperOffsets';
3 | export { default as computeStyles } from './computeStyles';
4 | export { default as offset } from './offset';
5 | export { default as flip } from './flip';
6 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Popper-js/utils/areValidElements.ts:
--------------------------------------------------------------------------------
1 | export function areValidElements(...args: Array): boolean {
2 | return !args.some((element) => !(element && typeof element.getBoundingClientRect === 'function'));
3 | }
4 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Popper-js/utils/cleanupModifierEffects.ts:
--------------------------------------------------------------------------------
1 | import type { Func } from '../interface';
2 |
3 | export function cleanupModifierEffects(effectCleanupFns: Func[]) {
4 | effectCleanupFns.forEach((fn) => fn());
5 | effectCleanupFns = [];
6 | }
7 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Popper-js/utils/contains.ts:
--------------------------------------------------------------------------------
1 | export function contains(parent: Element, child: Element) {
2 | if (parent.contains(child)) {
3 | return true;
4 | }
5 |
6 | return false;
7 | }
8 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Popper-js/utils/expandToHashMap.ts:
--------------------------------------------------------------------------------
1 | export function expandToHashMap(value: number | string | boolean, keys: Array): { [key: string]: number | string | boolean } {
2 | return keys.reduce((hashMap, key) => {
3 | hashMap[key] = value;
4 | return hashMap;
5 | }, {});
6 | }
7 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Popper-js/utils/getBasePlacement.ts:
--------------------------------------------------------------------------------
1 | import type { BasePlacement, Placement } from '../interface';
2 |
3 | export function getBasePlacement(placement: Placement): BasePlacement {
4 | return placement.split('-')[0] as BasePlacement;
5 | }
6 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Popper-js/utils/getDocumentElement.ts:
--------------------------------------------------------------------------------
1 | import { isElement } from './isElement';
2 |
3 | export function getDocumentElement(element: Element | Window): HTMLElement {
4 | return ((isElement(element) ? (element as Element).ownerDocument : (element as Window).document) || window.document).documentElement;
5 | }
6 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Popper-js/utils/getFreshSideObject.ts:
--------------------------------------------------------------------------------
1 | import type { SideObject } from '../interface';
2 |
3 | export default function getFreshSideObject(): SideObject {
4 | return {
5 | top: 0,
6 | right: 0,
7 | bottom: 0,
8 | left: 0,
9 | };
10 | }
11 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Popper-js/utils/getHTMLElementScroll.ts:
--------------------------------------------------------------------------------
1 | export function getHTMLElementScroll(element: HTMLElement) {
2 | return {
3 | scrollLeft: element.scrollLeft,
4 | scrollTop: element.scrollTop,
5 | };
6 | }
7 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Popper-js/utils/getMainAxisFromPlacement.ts:
--------------------------------------------------------------------------------
1 | import type { Placement } from '../interface';
2 |
3 | export function getMainAxisFromPlacement(placement: Placement): 'x' | 'y' {
4 | return ['top', 'bottom'].indexOf(placement) >= 0 ? 'x' : 'y';
5 | }
6 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Popper-js/utils/getNodeName.ts:
--------------------------------------------------------------------------------
1 | export function getNodeName(element: Node): string {
2 | return (element?.nodeName || '').toLowerCase();
3 | }
4 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Popper-js/utils/getNodeScroll.ts:
--------------------------------------------------------------------------------
1 | import { getHTMLElementScroll } from './getHTMLElementScroll';
2 | import { getWindowScroll } from './getWindowScroll';
3 | import { isHTMLElement } from './isHTMLElement';
4 |
5 | export function getNodeScroll(node: HTMLElement | Window) {
6 | if (node === window || !isHTMLElement(node)) {
7 | return getWindowScroll();
8 | }
9 | return getHTMLElementScroll(node as HTMLElement);
10 | }
11 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Popper-js/utils/getOppositePlacement.ts:
--------------------------------------------------------------------------------
1 | import type { Placement } from '../interface';
2 |
3 | const hash = { left: 'right', right: 'left', bottom: 'top', top: 'bottom' };
4 |
5 | export function getOppositePlacement(placement: Placement): Placement {
6 | return placement.replace(/left|right|bottom|top/g, (matched) => hash[matched]) as Placement;
7 | }
8 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Popper-js/utils/getOppositeVariationPlacement.ts:
--------------------------------------------------------------------------------
1 | import type { Placement } from '../interface';
2 |
3 | const hash = { start: 'end', end: 'start' };
4 |
5 | export function getOppositeVariationPlacement(placement: Placement): Placement {
6 | return placement.replace(/start|end/g, (matched) => hash[matched]) as Placement;
7 | }
8 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Popper-js/utils/getTrueOffsetParent.ts:
--------------------------------------------------------------------------------
1 | import { isHTMLElement } from './isHTMLElement';
2 |
3 | /**
4 | * ignore position = fixed element
5 | */
6 | export function getTrueOffsetParent(element: Element): Element | null {
7 | if (!isHTMLElement(element) || getComputedStyle(element).position === 'fixed') {
8 | return null;
9 | }
10 |
11 | return element.offsetParent;
12 | }
13 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Popper-js/utils/getVariation.ts:
--------------------------------------------------------------------------------
1 | import type { Placement, Variation } from '../interface';
2 |
3 | export function getVariation(placement: Placement): Variation {
4 | return placement.split('-')[1] as Variation;
5 | }
6 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Popper-js/utils/getWindow.ts:
--------------------------------------------------------------------------------
1 | export default function getWindow(node) {
2 | if (node == null) {
3 | return window;
4 | }
5 |
6 | if (node.toString() !== '[object Window]') {
7 | const { ownerDocument } = node;
8 | return ownerDocument ? ownerDocument.defaultView || window : window;
9 | }
10 |
11 | return node;
12 | }
13 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Popper-js/utils/getWindowScroll.ts:
--------------------------------------------------------------------------------
1 | export function getWindowScroll() {
2 | const scrollLeft = window.pageXOffset;
3 | const scrollTop = window.pageYOffset;
4 |
5 | return {
6 | scrollLeft,
7 | scrollTop,
8 | };
9 | }
10 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Popper-js/utils/isElement.ts:
--------------------------------------------------------------------------------
1 | export function isElement(node) {
2 | return node instanceof window.Element;
3 | }
4 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Popper-js/utils/isElementScaled.ts:
--------------------------------------------------------------------------------
1 | export function isElementScaled(element: HTMLElement) {
2 | const rect = element.getBoundingClientRect();
3 | const scaleX = Math.round(rect.width) / element.offsetWidth || 1;
4 | const scaleY = Math.round(rect.height) / element.offsetHeight || 1;
5 |
6 | return scaleX !== 1 || scaleY !== 1;
7 | }
8 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Popper-js/utils/isHTMLElement.ts:
--------------------------------------------------------------------------------
1 | export function isHTMLElement(node): node is HTMLElement {
2 | return node instanceof window.HTMLElement;
3 | }
4 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Popper-js/utils/isNode.ts:
--------------------------------------------------------------------------------
1 | export function isNode(value: any): value is Node {
2 | return value instanceof window.Node;
3 | }
4 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Popper-js/utils/isSafari.ts:
--------------------------------------------------------------------------------
1 | export function isSafari() {
2 | if (typeof CSS === 'undefined' || !CSS.supports) return false;
3 | return CSS.supports('-webkit-backdrop-filter', 'none');
4 | }
5 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Popper-js/utils/isScrollParent.ts:
--------------------------------------------------------------------------------
1 | export function isScrollParent(element: Element | HTMLElement): boolean {
2 | const { overflow, overflowX, overflowY, display } = getComputedStyle(element);
3 | return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !['contents'].includes(display);
4 | }
5 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Popper-js/utils/isTableElement.ts:
--------------------------------------------------------------------------------
1 | import { getNodeName } from './getNodeName';
2 |
3 | export function isTableElement(element: Element): boolean {
4 | return ['table', 'td', 'th'].indexOf(getNodeName(element)) >= 0;
5 | }
6 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Popper-js/utils/mergePaddingObject.ts:
--------------------------------------------------------------------------------
1 | import type { SideObject } from '../interface';
2 | import getFreshSideObject from './getFreshSideObject';
3 |
4 | export function mergePaddingObject(paddingObject: Partial): SideObject {
5 | return {
6 | ...getFreshSideObject(),
7 | ...paddingObject,
8 | };
9 | }
10 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Popper-js/utils/rectToClientRect.ts:
--------------------------------------------------------------------------------
1 | import type { Rect, ClientRectObject } from '../interface';
2 |
3 | export function rectToClientRect(rect: Rect): ClientRectObject {
4 | return {
5 | ...rect,
6 | left: rect.x,
7 | top: rect.y,
8 | right: rect.x + rect.width,
9 | bottom: rect.y + rect.height,
10 | };
11 | }
12 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Popper-js/utils/runModifierEffects.ts:
--------------------------------------------------------------------------------
1 | import { noop } from '@mx-design/web-utils';
2 | // types
3 | import type { Instance } from '../interface';
4 |
5 | export function runModifierEffects(state: Instance['state'], instance: Instance, effectCleanupFns) {
6 | state.orderedModifiers.forEach(({ name, options = {}, effect }) => {
7 | if (typeof effect === 'function') {
8 | const cleanupFn = effect({ state, name, instance, options });
9 | effectCleanupFns.push(cleanupFn || noop);
10 | }
11 | });
12 | }
13 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Popper/constants.ts:
--------------------------------------------------------------------------------
1 | export const EMPTY_MODIFIERS = [];
2 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Popper/utils/fromEntries.ts:
--------------------------------------------------------------------------------
1 | export const fromEntries = (entries: Array<[string, any]>): { [key: string]: any } =>
2 | entries.reduce((acc, [key, value]) => {
3 | acc[key] = value;
4 | return acc;
5 | }, {});
6 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Popper/utils/index.ts:
--------------------------------------------------------------------------------
1 | export * from './fromEntries';
2 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Popup/components/index.ts:
--------------------------------------------------------------------------------
1 | export * from './popup';
2 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Popup/constants.ts:
--------------------------------------------------------------------------------
1 | export const ESC_KEY = 'Escape';
2 | export const DELAY = 150;
3 | export const NO_DELAY = 0;
4 | export const passive = { passive: true };
5 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Popup/hooks/index.ts:
--------------------------------------------------------------------------------
1 | export * from './useClassNames';
2 | export * from './useTrigger';
3 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Popup/index.ts:
--------------------------------------------------------------------------------
1 | export * from './components';
2 | export * from './interface';
3 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Popup/style/index.ts:
--------------------------------------------------------------------------------
1 | import './index.less';
2 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Popup/utils/callFuncWithDelay.ts:
--------------------------------------------------------------------------------
1 | export function callFuncWithDelay({
2 | visibleTimer,
3 | delay,
4 | callback,
5 | }: {
6 | delay?: number;
7 | callback: Function;
8 | visibleTimer: { current: any };
9 | }) {
10 | if (delay) {
11 | clearTimeout(visibleTimer.current);
12 | visibleTimer.current = setTimeout(callback, delay);
13 | } else {
14 | callback();
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Popup/utils/getRefDom.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export function getRefDom(domRef: React.RefObject) {
4 | if (domRef.current && typeof domRef.current === 'object' && 'dom' in domRef.current) {
5 | return domRef.current.dom;
6 | }
7 | return domRef.current;
8 | }
9 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Popup/utils/index.ts:
--------------------------------------------------------------------------------
1 | export * from './getRefDom';
2 | export * from './callFuncWithDelay';
3 | export * from './applyPopupSlide';
4 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Portal/index.ts:
--------------------------------------------------------------------------------
1 | import type { PortalProps } from './interface';
2 |
3 | export { default as Portal } from './portal';
4 | export type { PortalProps };
5 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Portal/interface.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export interface PortalProps {
4 | /**
5 | * @zh 指定挂载的 HTML 节点, 默认挂载在 body
6 | * @en Specifies the mounted HTML node, which is mounted in the body by default
7 | */
8 | attach?: AttachNodeReturnValue;
9 | children: React.ReactNode;
10 | }
11 | export type AttachNodeReturnValue = HTMLElement | Element | Document | string;
12 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Portal/utils/getAttach.ts:
--------------------------------------------------------------------------------
1 | import { PortalProps } from '../interface';
2 |
3 | export function getAttach(attach: PortalProps['attach']): Element {
4 | let el: Element;
5 | if (typeof attach === 'string') {
6 | el = document.querySelector(attach);
7 | return el;
8 | }
9 | if (typeof attach === 'object' && attach instanceof window.HTMLElement) {
10 | el = attach;
11 | return el;
12 | }
13 |
14 | // fix el in iframe
15 | if ((el as Element)?.nodeType === 1) return el;
16 |
17 | return document.body;
18 | }
19 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Portal/utils/index.ts:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lio-mengxiang/mx-design/f2ba99463de122c827b37113aa15341319bb3ab2/packages/mx-design-web/src/Portal/utils/index.ts
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Radio/components/index.ts:
--------------------------------------------------------------------------------
1 | export * from './radio';
2 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Radio/hooks/index.ts:
--------------------------------------------------------------------------------
1 | export * from './useGroupClassNames';
2 | export * from './useClassNames';
3 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Radio/index.tsx:
--------------------------------------------------------------------------------
1 | export * from './components';
2 | export * from './interface';
3 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Radio/radioContext.ts:
--------------------------------------------------------------------------------
1 | import { createContext } from 'react';
2 | // type
3 | import type { RadioGroupContextProps } from './interface';
4 |
5 | const defaultContextValue: RadioGroupContextProps = {
6 | type: 'radio',
7 | };
8 |
9 | export const RadioGroupContext = createContext(defaultContextValue);
10 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Radio/style/index.ts:
--------------------------------------------------------------------------------
1 | import './index.less';
2 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Radio/utils/getMergeProps.ts:
--------------------------------------------------------------------------------
1 | import type { RadioGroupContextProps, RadioProps } from '../interface';
2 |
3 | interface IGetMergeProps {
4 | props: RadioProps;
5 | context: RadioGroupContextProps;
6 | }
7 |
8 | export function getMergeProps({ props, context }: IGetMergeProps) {
9 | const mergeProps = { ...props };
10 |
11 | if (context.group) {
12 | mergeProps.checked = context.value === props.value;
13 | mergeProps.disabled = !!(context.disabled || props.disabled);
14 | }
15 |
16 | return mergeProps;
17 | }
18 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Radio/utils/index.ts:
--------------------------------------------------------------------------------
1 | export * from './getMergeProps';
2 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/SelectInput/components/index.ts:
--------------------------------------------------------------------------------
1 | export * from './selectInput';
2 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/SelectInput/constants.ts:
--------------------------------------------------------------------------------
1 | import type { SelectInputProps } from './interface';
2 |
3 | // single 和 multiple 共有特性
4 | export const COMMON_PROPERTIES = [
5 | 'status',
6 | 'allowClear',
7 | 'disabled',
8 | 'addBefore',
9 | 'addAfter',
10 | 'prefix',
11 | 'suffix',
12 | 'placeholder',
13 | 'readOnly',
14 | 'onPaste',
15 | 'onMouseenter',
16 | 'onMouseleave',
17 | ];
18 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/SelectInput/hooks/index.ts:
--------------------------------------------------------------------------------
1 | export * from './useSingle';
2 | export * from './useMultiple';
3 | export * from './useClassNames';
4 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/SelectInput/index.ts:
--------------------------------------------------------------------------------
1 | export * from './components';
2 | export * from './interface';
3 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Space/components/index.ts:
--------------------------------------------------------------------------------
1 | export * from './space';
2 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Space/index.ts:
--------------------------------------------------------------------------------
1 | export * from './components';
2 | export * from './interface';
3 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Space/style/index.less:
--------------------------------------------------------------------------------
1 | @import (reference) '../../Style/base.less';
2 |
3 | @space-prefix-cls: ~'@{prefix}-space';
4 |
5 | .@{space-prefix-cls} {
6 | display: flex;
7 |
8 | &-vertical {
9 | flex-direction: column;
10 | }
11 |
12 | &-align-baseline {
13 | align-items: baseline;
14 | }
15 |
16 | &-align-start {
17 | align-items: flex-start;
18 | }
19 |
20 | &-align-end {
21 | align-items: flex-end;
22 | }
23 |
24 | &-align-center {
25 | align-items: center;
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Space/style/index.ts:
--------------------------------------------------------------------------------
1 | import './index.less';
2 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Spin/components/index.ts:
--------------------------------------------------------------------------------
1 | export * from './spin';
2 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Spin/hooks/index.ts:
--------------------------------------------------------------------------------
1 | export * from './useDebounceLoading';
2 | export * from './useClassNames';
3 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Spin/index.tsx:
--------------------------------------------------------------------------------
1 | export * from './components';
2 | export * from './interface';
3 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Spin/style/cssVariables.less:
--------------------------------------------------------------------------------
1 | body {
2 | --spin-icon-color: var(--brand-color);
3 | }
4 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Spin/style/index.ts:
--------------------------------------------------------------------------------
1 | import './index.less';
2 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Style/index.ts:
--------------------------------------------------------------------------------
1 | export * from './lightTheme';
2 | export * from './darkTheme';
3 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Switch/components/index.ts:
--------------------------------------------------------------------------------
1 | export * from './switch';
2 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Switch/constants.ts:
--------------------------------------------------------------------------------
1 | export const CHECKED = 'checked';
2 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Switch/hooks/index.ts:
--------------------------------------------------------------------------------
1 | export * from './useClassNames';
2 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Switch/hooks/useStyles.ts:
--------------------------------------------------------------------------------
1 | import { useMemo } from 'react';
2 | import type { SwitchProps } from '../interface';
3 |
4 | interface getStyleProps {
5 | style: SwitchProps['style'];
6 | themeStyle: SwitchProps['themeStyle'];
7 | }
8 | export function useStyles(props: getStyleProps) {
9 | const { style, themeStyle } = props;
10 |
11 | return useMemo(
12 | () => ({
13 | wrapperStyle: { ...style, ...themeStyle } as Record,
14 | }),
15 | [style, themeStyle]
16 | );
17 | }
18 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Switch/index.tsx:
--------------------------------------------------------------------------------
1 | export * from './components';
2 | export * from './interface';
3 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Switch/style/index.ts:
--------------------------------------------------------------------------------
1 | import '../../style/index.less';
2 | import './index.less';
3 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Table/components/index.ts:
--------------------------------------------------------------------------------
1 | export { TableComponent as Table } from './table';
2 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Table/components/tbody/index.ts:
--------------------------------------------------------------------------------
1 | export { Tbody } from './tbody';
2 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Table/components/thead/index.tsx:
--------------------------------------------------------------------------------
1 | export { Thead } from './thead';
2 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Table/hooks/index.ts:
--------------------------------------------------------------------------------
1 | export * from './useColumns';
2 | export * from './useComponent';
3 | export * from './useThClassNames';
4 | export * from './useStickyClassNames';
5 | export * from './useTableClassName';
6 | export * from './useGetCellChildren';
7 | export * from './useResize';
8 | export * from './useScroll';
9 | export * from './useFilterAndSorter';
10 | export * from './usePagination';
11 | export * from './useRowSelection';
12 | export * from './useExpand';
13 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Table/hooks/useUpdate.ts:
--------------------------------------------------------------------------------
1 | import { useRef, useEffect } from 'react';
2 |
3 | export function useUpdate(fn, deps = []) {
4 | const isDidMount = useRef(false);
5 |
6 | useEffect(() => {
7 | if (isDidMount.current) {
8 | fn();
9 | } else {
10 | isDidMount.current = true;
11 | }
12 | }, [...deps]);
13 | }
14 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Table/index.ts:
--------------------------------------------------------------------------------
1 | export * from './interface';
2 | export * from './components';
3 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Table/store/index.ts:
--------------------------------------------------------------------------------
1 | export { useTable } from './useTable';
2 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Table/style/index.ts:
--------------------------------------------------------------------------------
1 | // import '../../Checkbox/style';
2 | // import '../../Button/style';
3 | // import '../../Empty/style';
4 | // import '../../Pagination/style';
5 | // import '../../Radio/style';
6 | // import '../../Spin/style';
7 | // import '../../Space/style';
8 | // import '../../Trigger/style';
9 | // import '../../Tooltip/style';
10 | import './index.less';
11 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Table/utils/getColumnByDataIndex.ts:
--------------------------------------------------------------------------------
1 | export function getColumnByDataIndex(field, flattenColumns) {
2 | return flattenColumns.find((column) => {
3 | if (field === column.key) return column;
4 | });
5 | }
6 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Table/utils/getColumnFixedStyle.ts:
--------------------------------------------------------------------------------
1 | import type { CSSProperties } from 'react';
2 | import type { InternalColumnProps } from '../interface';
3 | import { LEFT, RIGHT } from '../constants';
4 |
5 | export function getColumnFixedStyle(column: InternalColumnProps, stickyOffset) {
6 | const columnFixedStyle: CSSProperties = {};
7 |
8 | if (column.$$fixed === LEFT) {
9 | columnFixedStyle.left = stickyOffset;
10 | }
11 |
12 | if (column.$$fixed === RIGHT) {
13 | columnFixedStyle.right = stickyOffset;
14 | }
15 | return columnFixedStyle;
16 | }
17 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Table/utils/getOriginData.ts:
--------------------------------------------------------------------------------
1 | import { isArray, isObject } from '@mx-design/web-utils';
2 |
3 | export function getOriginData(data) {
4 | if (isObject(data)) {
5 | return data.__ORIGIN_DATA;
6 | }
7 |
8 | if (!data || !isArray(data)) {
9 | return data;
10 | }
11 |
12 | return data.map((d) => {
13 | if (!isObject(d)) {
14 | return d;
15 | }
16 | return d.__ORIGIN_DATA;
17 | });
18 | }
19 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Table/utils/getPaddingLeft.tsx:
--------------------------------------------------------------------------------
1 | export function getPaddingLeft({ hasInlineExpandIcon, level, indentSize, recordHaveChildren }) {
2 | let paddingLeft = hasInlineExpandIcon && level > 0 ? indentSize * level : 0;
3 |
4 | if (hasInlineExpandIcon && !recordHaveChildren) {
5 | // expand icon width and margin-right
6 | paddingLeft += 16 + 4;
7 | }
8 |
9 | return paddingLeft;
10 | }
11 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Table/utils/getRootDomElement.ts:
--------------------------------------------------------------------------------
1 | export function getRootDomElement(refTable) {
2 | return refTable.current as HTMLDivElement;
3 | }
4 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Table/utils/getRowKey.ts:
--------------------------------------------------------------------------------
1 | import { getOriginData } from './getOriginData';
2 |
3 | export function getRowKey(rowKey, record) {
4 | if (typeof rowKey === 'function') {
5 | return rowKey(getOriginData(record));
6 | }
7 |
8 | return record[rowKey];
9 | }
10 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Table/utils/getRowSelectionType.ts:
--------------------------------------------------------------------------------
1 | import { CHECKBOX, RADIO } from '../constants';
2 |
3 | export function getRowSelectionType(isCheckbox, isRadio) {
4 | if (isCheckbox) return CHECKBOX;
5 | if (isRadio) return RADIO;
6 | return undefined;
7 | }
8 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Table/utils/getScrollBarHeight.ts:
--------------------------------------------------------------------------------
1 | export function getScrollBarHeight(ele: HTMLElement | null) {
2 | return ele ? ele.offsetHeight - ele.clientHeight : 0;
3 | }
4 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Table/utils/getScrollBarWidth.ts:
--------------------------------------------------------------------------------
1 | export function getScrollBarWidth(ele: HTMLElement | null) {
2 | return ele ? ele.offsetWidth - ele.clientWidth : 0;
3 | }
4 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Table/utils/getSet.ts:
--------------------------------------------------------------------------------
1 | import type { Key } from 'react';
2 |
3 | export function getSet(arr: Key[]) {
4 | return [...new Set(arr)];
5 | }
6 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Table/utils/getSorterFn.ts:
--------------------------------------------------------------------------------
1 | import { isFunction } from '@mx-design/web-utils';
2 | import type { ColumnProps, SorterFn } from '../interface';
3 |
4 | export function getSorterFn(sorter: ColumnProps['sorter']): SorterFn | null {
5 | if (isFunction(sorter)) {
6 | return sorter;
7 | }
8 | if (typeof sorter === 'object' && isFunction(sorter.compare)) {
9 | return sorter.compare;
10 | }
11 | return null;
12 | }
13 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Table/utils/getSorterPriority.ts:
--------------------------------------------------------------------------------
1 | import { isNumber, isObject } from '@mx-design/web-utils';
2 | import { ColumnProps } from '../interface';
3 |
4 | export function getSorterPriority(sorter: ColumnProps['sorter']): number | undefined {
5 | if (isObject(sorter) && isNumber((sorter as Record).multiple)) {
6 | return (sorter as Record).multiple;
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Table/utils/isCheckAllType.ts:
--------------------------------------------------------------------------------
1 | import { CHECK_ALL } from '../constants';
2 | import { TableProps } from '../interface';
3 |
4 | export function isCheckAllType(rowSelection: TableProps['rowSelection']): boolean {
5 | return rowSelection && CHECK_ALL in rowSelection ? rowSelection.checkAll : true;
6 | }
7 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Table/utils/isCheckboxType.ts:
--------------------------------------------------------------------------------
1 | import { CHECKBOX, TYPE } from '../constants';
2 |
3 | export function isCheckboxType(rowSelection) {
4 | return (rowSelection && rowSelection.type === CHECKBOX) || (rowSelection && !(TYPE in rowSelection));
5 | }
6 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Table/utils/isChildrenNotEmpty.ts:
--------------------------------------------------------------------------------
1 | import { isArray } from '@mx-design/web-utils';
2 | import { INewRecord, TableProps } from '../interface';
3 |
4 | export function isChildrenNotEmpty({
5 | record,
6 | childrenColumnName,
7 | }: {
8 | record: INewRecord;
9 | childrenColumnName: TableProps['childrenColumnName'];
10 | }) {
11 | return isArray(record[childrenColumnName]) && record[childrenColumnName].length;
12 | }
13 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Table/utils/isDataHaveChildren.ts:
--------------------------------------------------------------------------------
1 | import { isChildrenNotEmpty } from './isChildrenNotEmpty';
2 |
3 | export function isDataHaveChildren({ data, childrenColumnName }) {
4 | return data.find((d) => isChildrenNotEmpty({ record: d, childrenColumnName }));
5 | }
6 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Table/utils/isInvalidRenderElement.ts:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { isObject } from '@mx-design/web-utils';
3 |
4 | export function isInvalidRenderElement(element) {
5 | return element && !React.isValidElement(element) && isObject(element);
6 | }
7 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Table/utils/isRadioType.ts:
--------------------------------------------------------------------------------
1 | import { RADIO } from '../constants';
2 |
3 | export function isRadioType(rowSelection) {
4 | return rowSelection && rowSelection.type === RADIO;
5 | }
6 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Table/utils/isValidFilterValue.ts:
--------------------------------------------------------------------------------
1 | import { isUndefined } from '@mx-design/web-utils';
2 |
3 | export function isValidFilterValue(value) {
4 | return !isUndefined(value) && value !== '';
5 | }
6 |
7 | export function isFilterActive(value) {
8 | return !isUndefined(value) && value !== '';
9 | }
10 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Table/utils/mergeFiltersValueFn.ts:
--------------------------------------------------------------------------------
1 | export function mergeFiltersValueFn(column, innerDataIndex, defaultFiltersValue, filtersValue) {
2 | if (column.defaultFilters) {
3 | defaultFiltersValue[innerDataIndex] = column.defaultFilters;
4 | }
5 | if (column.filteredValue) {
6 | filtersValue[innerDataIndex] = column.filteredValue;
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Table/utils/px2Number.ts:
--------------------------------------------------------------------------------
1 | import { isNumber, isString } from '@mx-design/web-utils';
2 |
3 | export function px2Number(width: number | string): number {
4 | if (isNumber(width)) {
5 | return width;
6 | }
7 | if (isString(width) && width.includes('px')) {
8 | return +width.replace('px', '');
9 | }
10 | return 0;
11 | }
12 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Table/utils/renderFilters.tsx:
--------------------------------------------------------------------------------
1 | export function renderFilters({ innerFiltersValue, filterDropdown, column, setVisible, onHandleFilter }) {
2 | return filterDropdown?.({
3 | value: innerFiltersValue[column.key],
4 | setFilterValue: (value: any) => {
5 | onHandleFilter(column, value);
6 | },
7 | close() {
8 | setVisible(false);
9 | },
10 | });
11 | }
12 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Table/utils/resetTableClassName.ts:
--------------------------------------------------------------------------------
1 | export function resetTableClassName(classList: DOMTokenList, prefixCls: string) {
2 | classList.remove(`${prefixCls}-scroll-position-both`);
3 | classList.remove(`${prefixCls}-scroll-position-left`);
4 | classList.remove(`${prefixCls}-scroll-position-right`);
5 | classList.remove(`${prefixCls}-scroll-position-middle`);
6 | }
7 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Table/utils/scrollToTop.ts:
--------------------------------------------------------------------------------
1 | import { MutableRefObject } from 'react';
2 |
3 | export function scrollToTop(refTableBody: MutableRefObject) {
4 | const tableBody = refTableBody.current;
5 | if (!tableBody) {
6 | return;
7 | }
8 | tableBody.scrollTop = 0;
9 | }
10 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Table/utils/setFixedColumnsClassList.ts:
--------------------------------------------------------------------------------
1 | import { resetTableClassName } from './resetTableClassName';
2 |
3 | export function setFixedColumnsClassList(classList, className, prefixCls) {
4 | if (!classList.contains(className)) {
5 | resetTableClassName(classList, prefixCls);
6 | classList.add(className);
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Table/utils/setRowStickyOffset.ts:
--------------------------------------------------------------------------------
1 | import { RIGHT } from '../constants';
2 |
3 | export function setRowStickyOffset(column, stickyOffsets) {
4 | const columnIndex = column.$$columnIndex;
5 | let stickyOffset = 0;
6 | if (Array.isArray(columnIndex) && columnIndex.length === 2) {
7 | stickyOffset = column.$$fixed === RIGHT ? stickyOffsets[columnIndex[1]] : stickyOffsets[columnIndex[0]];
8 | } else if (typeof columnIndex === 'number') {
9 | stickyOffset = stickyOffsets[columnIndex] || 0;
10 | }
11 | return stickyOffset;
12 | }
13 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Table/utils/setSelectPopupPosition.ts:
--------------------------------------------------------------------------------
1 | import { TOP, BOTTOM, TL, BL } from '../constants';
2 | import type { TableProps } from '../interface';
3 |
4 | export function setSelectPopupPosition(pagePosition: TableProps['pagePosition']) {
5 | if (pagePosition === TL || pagePosition === BL) {
6 | return BOTTOM;
7 | }
8 | return TOP;
9 | }
10 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Table/utils/setTableFixedClassName.ts:
--------------------------------------------------------------------------------
1 | export function setTableFixedClassName(tableClassList: DOMTokenList, className: string) {
2 | if (!tableClassList.contains(className)) {
3 | tableClassList.add(className);
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Table/utils/updateStateSorters.ts:
--------------------------------------------------------------------------------
1 | import type { SorterInfo } from '../interface';
2 |
3 | export function updateStateSorters(sorter: SorterInfo, nextActiveSorters: SorterInfo[]) {}
4 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Tag/components/index.ts:
--------------------------------------------------------------------------------
1 | export * from './tag';
2 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Tag/hooks/index.ts:
--------------------------------------------------------------------------------
1 | export * from './useClassNames';
2 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Tag/index.ts:
--------------------------------------------------------------------------------
1 | export * from './interface';
2 | export * from './components';
3 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Tag/style/cssVariables.less:
--------------------------------------------------------------------------------
1 | body {
2 | // tag
3 | --tag-padding: 0 8px;
4 | --tag-border-radius: var(--border-radius-medium);
5 | --tag-text-color: var(--text-color-anti);
6 | --tag-border-width: 1px;
7 | --tag-border-color: transparent;
8 | --tag-font-size: 12px;
9 | --tag-line-height: 22px;
10 | // icon
11 | --tag-icon-margin-right: 4px;
12 | --tag-icon-size: 14px;
13 | // close icon
14 | --tag-icon-close-size: 10px;
15 | --tag-close-icon-margin-left: 6px;
16 | }
17 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Tag/style/index.ts:
--------------------------------------------------------------------------------
1 | import './index.less';
2 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Tooltip/components/index.ts:
--------------------------------------------------------------------------------
1 | export * from './Tooltip';
2 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Tooltip/hooks/index.ts:
--------------------------------------------------------------------------------
1 | export * from './useClassNames';
2 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Tooltip/index.ts:
--------------------------------------------------------------------------------
1 | export * from './components';
2 | export * from './interface';
3 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Tooltip/interface.tsx:
--------------------------------------------------------------------------------
1 | import type { PopupProps } from '../Popup';
2 |
3 | export interface TooltipProps extends PopupProps {
4 | /**
5 | * 浮层出现位置
6 | * @default top
7 | */
8 | placement?: PopupProps['placement'];
9 | /**
10 | * 是否显示浮层箭头
11 | * @default true
12 | */
13 | showArrow?: boolean;
14 | }
15 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Tooltip/style/cssVariables.less:
--------------------------------------------------------------------------------
1 | body {
2 | --tooltip-max-width: 480px;
3 | --tooltip-border-radius: 6px;
4 | --tooltip-bg-color: var(--gray-color-11);
5 | --tooltip-color: var(--text-color-anti);
6 | --tooltip-z-index: var(--z-index-tooltip);
7 | }
8 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/Tooltip/style/index.ts:
--------------------------------------------------------------------------------
1 | import './index.less';
2 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/hooks/index.ts:
--------------------------------------------------------------------------------
1 | export * from './useComposition';
2 | export * from './useResizeObserver';
3 | export * from './useUpdate';
4 | export * from './useStyles';
5 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/hooks/useStyles.ts:
--------------------------------------------------------------------------------
1 | import { useMemo } from 'react';
2 |
3 | interface getStyleProps> {
4 | style: T['style'];
5 | themeStyle: T['themeStyle'];
6 | }
7 | export function useStyles(props: getStyleProps) {
8 | const { style, themeStyle } = props;
9 |
10 | return useMemo(
11 | () => ({
12 | wrapperStyle: { ...style, ...themeStyle } as Record,
13 | }),
14 | [style, themeStyle]
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/hooks/useUpdate.ts:
--------------------------------------------------------------------------------
1 | import { useRef, useEffect, DependencyList } from 'react';
2 |
3 | export default function useUpdate(fn: () => void, deps: DependencyList = []) {
4 | const isDidMount = useRef(false);
5 |
6 | useEffect(() => {
7 | if (isDidMount.current) {
8 | fn();
9 | } else {
10 | isDidMount.current = true;
11 | }
12 | }, deps);
13 | }
14 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/utils/constants.ts:
--------------------------------------------------------------------------------
1 | import { Breakpoint, BreakpointMap } from './interface';
2 |
3 | export const responsiveArray: Breakpoint[] = ['xxxl', 'xxl', 'xl', 'lg', 'md', 'sm', 'xs'];
4 | export const responsiveMap: BreakpointMap = {
5 | xs: '(max-width: 575px)',
6 | sm: '(min-width: 576px)',
7 | md: '(min-width: 768px)',
8 | lg: '(min-width: 992px)',
9 | xl: '(min-width: 1200px)',
10 | xxl: '(min-width: 1600px)',
11 | xxxl: '(min-width: 2000px)',
12 | };
13 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/utils/fillNBSP.ts:
--------------------------------------------------------------------------------
1 | import { isString } from '@mx-design/web-utils';
2 |
3 | // Replace empty string to
4 | export function fillNBSP(str: any) {
5 | return isString(str) ? str.replace(/(\s{2,})|(\s{1,}$)/g, ($0) => '\u00A0'.repeat($0.length)) : str;
6 | }
7 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/utils/index.ts:
--------------------------------------------------------------------------------
1 | export * from './pickDataAttributes';
2 | export * from './test-utils';
3 | export * from './getHotkeyHandler';
4 | export * from './keycode';
5 | export * from './fillNBSP';
6 | export * from './responsiveObserve';
7 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/utils/interface.ts:
--------------------------------------------------------------------------------
1 | export type Breakpoint = 'xxxl' | 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
2 | export type BreakpointMap = Partial>;
3 | export type ScreenMap = Partial>;
4 | export type SubscribeFunc = (screens: ScreenMap, breakpointChecked: Breakpoint) => void;
5 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/utils/pickDataAttributes.ts:
--------------------------------------------------------------------------------
1 | export function pickDataAttributes(obj: T): { [key in K]: any } {
2 | const clone = {} as { [key in K]: any };
3 |
4 | obj &&
5 | Object.keys(obj).forEach((key) => {
6 | const k = String(key);
7 | if (k.indexOf('data-') === 0) {
8 | clone[k] = obj[k];
9 | }
10 | if (k.indexOf('aria-') === 0) {
11 | clone[k] = obj[k];
12 | }
13 | });
14 |
15 | return clone;
16 | }
17 |
--------------------------------------------------------------------------------
/packages/mx-design-web/src/utils/test-utils/index.ts:
--------------------------------------------------------------------------------
1 | export * from './render';
2 |
--------------------------------------------------------------------------------
/packages/mx-design-web/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "types"
5 | },
6 | "include": ["src"]
7 | }
8 |
--------------------------------------------------------------------------------
/pnpm-workspace.yaml:
--------------------------------------------------------------------------------
1 | # @zh 定义workspace在哪个目录
2 | # @en Define which directory the workspace is in
3 | packages:
4 | - "packages/*"
5 | - "apps/*"
6 |
--------------------------------------------------------------------------------