,
6 | statics?: S,
7 | ): React.FunctionComponent> & S {
8 | return hoistNonReactStatics(forwardRef(component), statics as any) as any;
9 | }
10 |
--------------------------------------------------------------------------------
/src/_util/getContainer.ts:
--------------------------------------------------------------------------------
1 | import { isFunction, isString } from 'lodash-es';
2 |
3 | import { ScrollContainerElement, ScrollContainer } from '../common';
4 |
5 | export function resolveContainer(getContainer: ScrollContainerElement | ScrollContainer): ScrollContainerElement {
6 | if (isString(getContainer)) {
7 | return getContainer ? (document.querySelector(getContainer) as HTMLElement) : window;
8 | }
9 | if (isFunction(getContainer)) {
10 | return getContainer();
11 | }
12 | return getContainer;
13 | }
14 |
--------------------------------------------------------------------------------
/src/_util/getScrollParent.ts:
--------------------------------------------------------------------------------
1 | type ScrollElement = HTMLElement | Window;
2 |
3 | const overflowScrollReg = /scroll|auto|overlay/i;
4 |
5 | export default function getScrollParent(
6 | el: Element | null | undefined,
7 | root: ScrollElement | null | undefined = window,
8 | ): Window | Element | null | undefined {
9 | let node = el;
10 |
11 | while (node && node !== root && node.nodeType === 1) {
12 | const { overflowY } = window.getComputedStyle(node);
13 | if (overflowScrollReg.test(overflowY)) {
14 | return node;
15 | }
16 | node = node.parentNode as Element;
17 | }
18 |
19 | return root;
20 | }
21 |
--------------------------------------------------------------------------------
/src/_util/noop.ts:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line @typescript-eslint/no-empty-function
2 | export default () => {};
3 |
--------------------------------------------------------------------------------
/src/_util/renderToBody.ts:
--------------------------------------------------------------------------------
1 | import ReactDOM from 'react-dom';
2 | import { ReactElement } from 'react';
3 |
4 | export function renderToBody(element: ReactElement) {
5 | const container = document.createElement('div');
6 | document.body.appendChild(container);
7 | function unmount() {
8 | const unmountResult = ReactDOM.unmountComponentAtNode(container);
9 | if (unmountResult && container.parentNode) {
10 | container.parentNode.removeChild(container);
11 | }
12 | }
13 | ReactDOM.render(element, container);
14 | return unmount;
15 | }
16 |
17 | export default renderToBody;
18 |
--------------------------------------------------------------------------------
/src/_util/renderToContainer.ts:
--------------------------------------------------------------------------------
1 | import { createPortal } from 'react-dom';
2 | import { ReactElement, ReactPortal } from 'react';
3 | import { resolveContainer } from './getContainer';
4 | import { canUseDocument } from './dom';
5 |
6 | export type GetContainer = HTMLElement | (() => HTMLElement) | null;
7 |
8 | export function renderToContainer(getContainer: GetContainer, node: ReactElement) {
9 | if (canUseDocument && getContainer) {
10 | const container = resolveContainer(getContainer);
11 | return createPortal(node, container as Element) as ReactPortal;
12 | }
13 | return node;
14 | }
15 |
--------------------------------------------------------------------------------
/src/_util/supportsPassive.ts:
--------------------------------------------------------------------------------
1 | import { canUseDocument } from './dom';
2 |
3 | // eslint-disable-next-line
4 | export let supportsPassive = false;
5 |
6 | if (canUseDocument) {
7 | try {
8 | const opts = {};
9 | Object.defineProperty(opts, 'passive', {
10 | get() {
11 | supportsPassive = true;
12 | },
13 | });
14 | window.addEventListener('test-passive', null as any, opts);
15 | } catch (e) {
16 | //
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/src/_util/useClassName.ts:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Tencent/tdesign-mobile-react/6042a4039c50a379b20717a6614bde10813587a9/src/_util/useClassName.ts
--------------------------------------------------------------------------------
/src/_util/useColor.ts:
--------------------------------------------------------------------------------
1 | export const useColor = (
2 | color: string | string[],
3 | defaultCheckColor: string = null,
4 | defaultUnCheckColor: string = null,
5 | ): string[] => {
6 | const tmpColor = color instanceof Array ? color : [color];
7 | const [checkColor = defaultCheckColor, unCheckColor = defaultUnCheckColor] = tmpColor;
8 | return [checkColor, unCheckColor];
9 | };
10 |
11 | export default useColor;
12 |
--------------------------------------------------------------------------------
/src/_util/useInitialized.ts:
--------------------------------------------------------------------------------
1 | import { useRef } from 'react';
2 |
3 | export function useInitialized(check?: boolean) {
4 | const initializedRef = useRef(check);
5 | if (check) {
6 | initializedRef.current = true;
7 | }
8 | return !!initializedRef.current;
9 | }
10 |
--------------------------------------------------------------------------------
/src/action-sheet/ActionSheetMethod.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import renderToBody from '../_util/renderToBody';
3 | import ActionSheet from './ActionSheet';
4 | import type { ActionSheetProps } from './ActionSheet';
5 | import { actionSheetDefaultProps } from './defaultProps';
6 |
7 | let destroyRef: () => void;
8 |
9 | export function show(config: Partial) {
10 | destroyRef?.();
11 |
12 | const app = document.createElement('div');
13 |
14 | document.body.appendChild(app);
15 |
16 | destroyRef = renderToBody();
17 | }
18 |
19 | export function close() {
20 | destroyRef?.();
21 | }
22 |
--------------------------------------------------------------------------------
/src/action-sheet/_example/style/index.less:
--------------------------------------------------------------------------------
1 | .tdesign-mobile-demo {
2 | background-color: var(--td-bg-color-container);
3 | }
4 |
5 | .action-sheet-demo {
6 | margin-bottom: 16px;
7 |
8 | &-btns {
9 | .t-button {
10 | margin-top: 16px;
11 |
12 | &:first-child {
13 | margin-top: 0;
14 | }
15 | }
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/src/action-sheet/defaultProps.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
3 | * */
4 |
5 | import { TdActionSheetProps } from './type';
6 |
7 | export const actionSheetDefaultProps: TdActionSheetProps = {
8 | align: 'center',
9 | count: 8,
10 | popupProps: {},
11 | showCancel: true,
12 | showOverlay: true,
13 | theme: 'list',
14 | defaultVisible: false,
15 | };
16 |
--------------------------------------------------------------------------------
/src/action-sheet/index.tsx:
--------------------------------------------------------------------------------
1 | import './style';
2 |
3 | import _ActionSheet from './ActionSheet';
4 | import { show, close } from './ActionSheetMethod';
5 | import { attachMethodsToComponent } from '../_util/attachMethodsToComponent';
6 | import type { ActionSheetProps } from './ActionSheet';
7 |
8 | type ActionSheetWithMethods = React.FC & {
9 | show: typeof show;
10 | close: typeof close;
11 | };
12 |
13 | export * from './type';
14 |
15 | export const ActionSheet: ActionSheetWithMethods = attachMethodsToComponent(_ActionSheet, {
16 | show,
17 | close,
18 | });
19 |
20 | export default ActionSheet;
21 |
--------------------------------------------------------------------------------
/src/action-sheet/style/css.js:
--------------------------------------------------------------------------------
1 | import './index.css';
2 |
--------------------------------------------------------------------------------
/src/action-sheet/style/index.js:
--------------------------------------------------------------------------------
1 | import '../../_common/style/mobile/components/action-sheet/v2/_index.less';
2 |
--------------------------------------------------------------------------------
/src/avatar/AvatarGroupContext.tsx:
--------------------------------------------------------------------------------
1 | import React, { useMemo } from 'react';
2 | import type { AvatarGroupProps } from './AvatarGroup';
3 |
4 | export const AvatarGroupContext = React.createContext(null);
5 |
6 | export function AvatarGroupContextProvider(props: Pick) {
7 | const memoInfo = useMemo(
8 | () => ({
9 | size: props.size,
10 | shape: props.shape,
11 | }),
12 | [props.size, props.shape],
13 | );
14 | return {props.children};
15 | }
16 |
--------------------------------------------------------------------------------
/src/avatar/_example/characterAvatar.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Avatar } from 'tdesign-mobile-react';
3 |
4 | export default function CharacterAvatar() {
5 | return (
6 |
7 |
8 | A
9 |
10 |
11 | A
12 |
13 |
Large
9 |
10 |
} size="large" badgeProps={{ count: 8, size: 'large', offset: [7, 7] }} />
11 |
Middle
14 |
15 |
} badgeProps={{ count: 8, offset: [5, 5] }} />
16 |
7 |
10 |
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/src/button/_example/ghost.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Button } from 'tdesign-mobile-react';
3 |
4 | export default function () {
5 | return (
6 |
7 |
10 |
13 |
16 |
17 | );
18 | }
19 |
--------------------------------------------------------------------------------
/src/button/_example/group.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Button } from 'tdesign-mobile-react';
3 |
4 | export default function () {
5 | return (
6 |
7 |
10 |
13 |
14 | );
15 | }
16 |
--------------------------------------------------------------------------------
/src/button/_example/icon.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Button } from 'tdesign-mobile-react';
3 | import { Icon } from 'tdesign-icons-react';
4 |
5 | export default function () {
6 | return (
7 |
8 | }>
9 | 填充按钮
10 |
11 |
14 | } />
15 |
16 | );
17 | }
18 |
--------------------------------------------------------------------------------
/src/button/_example/size.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Button } from 'tdesign-mobile-react';
3 |
4 | export default function () {
5 | return (
6 |
7 |
10 |
11 |
14 |
17 |
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/src/button/_example/test.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Button } from 'tdesign-mobile-react';
3 |
4 | export default function () {
5 | return (
6 | <>
7 | {/* 正确 */}
8 |
9 |
10 |
11 |
12 |
13 | {/* 错误 */}
14 |
15 |
16 |
17 |
18 |
19 | );
20 | }
21 |
--------------------------------------------------------------------------------
/src/button/defaultProps.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
3 | * */
4 |
5 | import { TdButtonProps } from './type';
6 |
7 | export const buttonDefaultProps: TdButtonProps = {
8 | block: false,
9 | disabled: undefined,
10 | ghost: false,
11 | loading: false,
12 | shape: 'rectangle',
13 | size: 'medium',
14 | theme: 'default',
15 | type: 'button',
16 | variant: 'base',
17 | };
18 |
--------------------------------------------------------------------------------
/src/button/index.ts:
--------------------------------------------------------------------------------
1 | import _Button from './Button';
2 |
3 | import './style';
4 |
5 | export type { ButtonProps } from './Button';
6 | export * from './type';
7 |
8 | export const Button = _Button;
9 | export default Button;
10 |
--------------------------------------------------------------------------------
/src/button/style/css.js:
--------------------------------------------------------------------------------
1 | import './index.css';
2 |
--------------------------------------------------------------------------------
/src/button/style/index.js:
--------------------------------------------------------------------------------
1 | import '../../_common/style/mobile/components/button/v2/_index.less';
2 |
--------------------------------------------------------------------------------
/src/calendar/_example/style/index.less:
--------------------------------------------------------------------------------
1 | .is-holiday:not(.t-calendar__dates-item--selected) {
2 | color: #e34d59;
3 | }
--------------------------------------------------------------------------------
/src/calendar/defaultProps.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
3 | * */
4 |
5 | import { TdCalendarProps } from './type';
6 |
7 | export const calendarDefaultProps: TdCalendarProps = {
8 | autoClose: true,
9 | confirmBtn: '',
10 | firstDayOfWeek: 0,
11 | title: '请选择日期',
12 | type: 'single',
13 | usePopup: true,
14 | visible: false,
15 | };
16 |
--------------------------------------------------------------------------------
/src/calendar/index.ts:
--------------------------------------------------------------------------------
1 | import _Calendar from './Calendar';
2 |
3 | import './style';
4 |
5 | export type { CalendarProps } from './Calendar';
6 | export * from './type';
7 |
8 | export const Calendar = _Calendar;
9 | export default Calendar;
10 |
--------------------------------------------------------------------------------
/src/calendar/style/css.js:
--------------------------------------------------------------------------------
1 | import './index.css';
2 |
--------------------------------------------------------------------------------
/src/calendar/style/index.js:
--------------------------------------------------------------------------------
1 | import '../../_common/style/mobile/components/calendar/v2/_index.less';
2 |
--------------------------------------------------------------------------------
/src/cascader/_example/style/index.less:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Tencent/tdesign-mobile-react/6042a4039c50a379b20717a6614bde10813587a9/src/cascader/_example/style/index.less
--------------------------------------------------------------------------------
/src/cascader/defaultProps.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
3 | * */
4 |
5 | import { TdCascaderProps } from './type';
6 |
7 | export const cascaderDefaultProps: TdCascaderProps = {
8 | closeBtn: true,
9 | lazy: false,
10 | loadCompleted: false,
11 | options: [],
12 | placeholder: '选择选项',
13 | subTitles: [],
14 | theme: 'step',
15 | visible: false,
16 | };
17 |
--------------------------------------------------------------------------------
/src/cascader/index.tsx:
--------------------------------------------------------------------------------
1 | import _Cascader from './Cascader';
2 |
3 | import './style';
4 |
5 | export const Cascader = _Cascader;
6 | export type { CascaderProps } from './Cascader';
7 |
8 | export default Cascader;
9 |
--------------------------------------------------------------------------------
/src/cascader/style/css.js:
--------------------------------------------------------------------------------
1 | import './index.css';
2 |
--------------------------------------------------------------------------------
/src/cascader/style/index.js:
--------------------------------------------------------------------------------
1 | import '../../_common/style/mobile/components/cascader/v2/_index.less';
2 |
--------------------------------------------------------------------------------
/src/cell/_example/group.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { CellGroup, Cell } from 'tdesign-mobile-react';
3 | import { AppIcon, ServiceIcon, InternetIcon } from 'tdesign-icons-react';
4 |
5 | export default function Group() {
6 | return (
7 |
8 | | } title="单行标题" arrow />
9 | | } title="单行标题" arrow />
10 | | } title="单行标题" arrow />
11 |
12 | );
13 | }
14 |
--------------------------------------------------------------------------------
/src/cell/_example/style/index.less:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Tencent/tdesign-mobile-react/6042a4039c50a379b20717a6614bde10813587a9/src/cell/_example/style/index.less
--------------------------------------------------------------------------------
/src/cell/defaultProps.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
3 | * */
4 |
5 | import { TdCellProps, TdCellGroupProps } from './type';
6 |
7 | export const cellDefaultProps: TdCellProps = { align: 'middle', arrow: false, bordered: true, required: false };
8 |
9 | export const cellGroupDefaultProps: TdCellGroupProps = { bordered: false, theme: 'default' };
10 |
--------------------------------------------------------------------------------
/src/cell/index.tsx:
--------------------------------------------------------------------------------
1 | import _Cell from './Cell';
2 |
3 | import _CellGroup from './CellGroup';
4 |
5 | import './style';
6 |
7 | export * from './type';
8 |
9 | export const Cell = _Cell;
10 |
11 | export const CellGroup = _CellGroup;
12 |
13 | export default { Cell, CellGroup };
14 |
--------------------------------------------------------------------------------
/src/cell/style/css.js:
--------------------------------------------------------------------------------
1 | import './index.css';
2 |
--------------------------------------------------------------------------------
/src/cell/style/index.js:
--------------------------------------------------------------------------------
1 | import '../../_common/style/mobile/components/cell/v2/_index.less';
2 |
--------------------------------------------------------------------------------
/src/checkbox/_example/card.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Checkbox } from 'tdesign-mobile-react';
3 |
4 | export default function () {
5 | return (
6 |
7 |
8 |
9 |
10 |
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/src/checkbox/_example/right.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Checkbox } from 'tdesign-mobile-react';
3 |
4 | export default function () {
5 | return (
6 | <>
7 |
8 |
9 |
10 | );
11 | }
12 |
--------------------------------------------------------------------------------
/src/checkbox/_example/status.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Checkbox } from 'tdesign-mobile-react';
3 |
4 | export default function () {
5 | return (
6 |
7 |
8 |
9 |
10 | );
11 | }
12 |
--------------------------------------------------------------------------------
/src/checkbox/_example/type.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Checkbox } from 'tdesign-mobile-react';
3 |
4 | export default function () {
5 | const activeImage = 'https://tdesign.gtimg.com/mobile/demos/checkbox-checked.png';
6 | const inActiveImage = 'https://tdesign.gtimg.com/mobile/demos/checkbox.png';
7 |
8 | return (
9 | <>
10 |
11 |
12 |
13 |
14 |
15 |
16 | );
17 | }
18 |
--------------------------------------------------------------------------------
/src/checkbox/defaultProps.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
3 | * */
4 |
5 | import { TdCheckboxProps, TdCheckboxGroupProps } from './type';
6 |
7 | export const checkboxDefaultProps: TdCheckboxProps = {
8 | block: true,
9 | borderless: undefined,
10 | checkAll: false,
11 | defaultChecked: false,
12 | disabled: undefined,
13 | icon: 'circle',
14 | indeterminate: false,
15 | maxContentRow: 5,
16 | maxLabelRow: 3,
17 | placement: 'left',
18 | readonly: undefined,
19 | };
20 |
21 | export const checkboxGroupDefaultProps: TdCheckboxGroupProps = {
22 | borderless: false,
23 | disabled: undefined,
24 | max: undefined,
25 | readonly: undefined,
26 | defaultValue: [],
27 | };
28 |
--------------------------------------------------------------------------------
/src/checkbox/index.ts:
--------------------------------------------------------------------------------
1 | import _Checkbox from './Checkbox';
2 | import _CheckboxGroup from './CheckboxGroup';
3 |
4 | import './style';
5 |
6 | export type { CheckBoxProps } from './Checkbox';
7 | export type { CheckboxGroupProps } from './CheckboxGroup';
8 |
9 | export * from './type';
10 |
11 | export const Checkbox = _Checkbox;
12 | export const CheckboxGroup = _CheckboxGroup;
13 |
14 | export default Checkbox;
15 |
--------------------------------------------------------------------------------
/src/checkbox/style/css.js:
--------------------------------------------------------------------------------
1 | import './index.css';
2 |
--------------------------------------------------------------------------------
/src/checkbox/style/index.js:
--------------------------------------------------------------------------------
1 | // index.js
2 | import '../../_common/style/mobile/components/checkbox/v2/_index.less';
3 | // import '../../_common/style/mobile/components/checkbox-group/_index.less';
4 |
5 | // css.js
6 | import './index.less';
7 |
--------------------------------------------------------------------------------
/src/checkbox/style/index.less:
--------------------------------------------------------------------------------
1 | .t-checkbox {
2 | .t-checkbox__icon-wrapper {
3 | display: block;
4 | }
5 | }
--------------------------------------------------------------------------------
/src/collapse/CollapseContext.tsx:
--------------------------------------------------------------------------------
1 | import { createContext } from 'react';
2 | import type { CollapseValue } from './type';
3 |
4 | export interface CollapseContextValue {
5 | activeValue: CollapseValue | undefined;
6 | disabled: boolean;
7 | expandIcon: React.ReactNode;
8 | onPanelChange: (name: string | number, args: { e: React.MouseEvent }) => void;
9 | defaultExpandAll: boolean;
10 | }
11 |
12 | export const CollapseContext = createContext(null);
13 |
14 | export const CollapseProvider = CollapseContext.Provider;
15 |
--------------------------------------------------------------------------------
/src/collapse/_example/base.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Collapse, CollapsePanel } from 'tdesign-mobile-react';
3 |
4 | export default function () {
5 | return (
6 |
7 |
8 |
9 | 此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
10 |
11 |
12 |
13 | );
14 | }
15 |
--------------------------------------------------------------------------------
/src/collapse/_example/placement.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Collapse, CollapsePanel } from 'tdesign-mobile-react';
3 |
4 | export default function () {
5 | return (
6 |
7 |
8 |
9 | 此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
10 |
11 |
12 |
13 | );
14 | }
15 |
--------------------------------------------------------------------------------
/src/collapse/defaultProps.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
3 | * */
4 |
5 | import { TdCollapseProps, TdCollapsePanelProps } from './type';
6 |
7 | export const collapseDefaultProps: TdCollapseProps = {
8 | defaultExpandAll: false,
9 | expandIcon: true,
10 | expandMutex: false,
11 | theme: 'default',
12 | defaultValue: [],
13 | };
14 |
15 | export const collapsePanelDefaultProps: TdCollapsePanelProps = {
16 | destroyOnCollapse: false,
17 | disabled: undefined,
18 | expandIcon: undefined,
19 | placement: 'bottom',
20 | };
21 |
--------------------------------------------------------------------------------
/src/collapse/index.ts:
--------------------------------------------------------------------------------
1 | import _Collapse from './Collapse';
2 | import _CollapsePanel from './CollapsePanel';
3 |
4 | import './style/index.js';
5 |
6 | export type { CollapseProps } from './Collapse';
7 | export type { CollapsePanelProps } from './CollapsePanel';
8 |
9 | export * from './type';
10 |
11 | export const Collapse = _Collapse;
12 | export const CollapsePanel = _CollapsePanel;
13 |
--------------------------------------------------------------------------------
/src/collapse/style/css.js:
--------------------------------------------------------------------------------
1 | import './index.css';
2 |
--------------------------------------------------------------------------------
/src/collapse/style/index.js:
--------------------------------------------------------------------------------
1 | import '../../_common/style/mobile/components/collapse/v2/_index.less';
2 |
--------------------------------------------------------------------------------
/src/color-picker/_example/base.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { ColorPicker } from 'tdesign-mobile-react';
3 |
4 | export default function () {
5 | return ;
6 | }
7 |
--------------------------------------------------------------------------------
/src/color-picker/_example/multiple.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { ColorObject, ColorPicker } from 'tdesign-mobile-react';
3 |
4 | export default function () {
5 | const onChange = (value: string) => {
6 | console.log('change', value);
7 | };
8 | const onPaletteBarChange = (value: { color: ColorObject }) => {
9 | console.log('onPaletteBarChange', value);
10 | };
11 | return ;
12 | }
13 |
--------------------------------------------------------------------------------
/src/color-picker/constants.ts:
--------------------------------------------------------------------------------
1 | export const HUE_MAX = 360;
2 | export const ALPHA_MAX = 100;
3 |
--------------------------------------------------------------------------------
/src/color-picker/defaultProps.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
3 | * */
4 |
5 | import { TdColorPickerProps } from './type';
6 |
7 | export const colorPickerDefaultProps: TdColorPickerProps = {
8 | clearable: false,
9 | enableAlpha: false,
10 | fixed: false,
11 | format: 'RGB',
12 | type: 'base',
13 | };
14 |
--------------------------------------------------------------------------------
/src/color-picker/index.ts:
--------------------------------------------------------------------------------
1 | import _ColorPicker from './ColorPicker';
2 | import './style';
3 |
4 | export type { ColorPickerProps } from './ColorPicker';
5 | export * from './type';
6 |
7 | export const ColorPicker = _ColorPicker;
8 | export default ColorPicker;
9 |
--------------------------------------------------------------------------------
/src/color-picker/style/css.js:
--------------------------------------------------------------------------------
1 | import './index.css';
2 |
--------------------------------------------------------------------------------
/src/color-picker/style/index.js:
--------------------------------------------------------------------------------
1 | import '../../_common/style/mobile/components/color-picker/_index.less';
2 |
--------------------------------------------------------------------------------
/src/color-picker/types.ts:
--------------------------------------------------------------------------------
1 | export interface PanelRectType {
2 | width?: number;
3 | height?: number;
4 | top?: number;
5 | left?: number;
6 | }
7 |
--------------------------------------------------------------------------------
/src/config-provider/index.ts:
--------------------------------------------------------------------------------
1 | import ConfigProvider, { merge } from './ConfigProvider';
2 | import ConfigContext from './ConfigContext';
3 |
4 | export type { Config, Locale } from './ConfigContext';
5 | export type { ConfigProviderProps } from './ConfigProvider';
6 | export * from './type';
7 |
8 | export { ConfigContext, ConfigProvider, merge };
9 | export default ConfigProvider;
10 |
--------------------------------------------------------------------------------
/src/count-down/_example/style/index.less:
--------------------------------------------------------------------------------
1 | .tdesign-mobile-demo {
2 | background-color: var(--td-bg-color-container);
3 | }
4 |
5 | .demo-count-down-desc {
6 | color: var(--td-text-color-secondary, rgba(0, 0, 0, 0.6));
7 | font-size: 14px;
8 | }
9 |
10 | .demo-count-down-content {
11 | margin: 16px 0 24px;
12 | }
13 |
14 | // 覆盖组件内部样式
15 | .custom .t-count-down__item {
16 | color: #e34d59;
17 | font-size: 18px;
18 | line-height: 24px;
19 | vertical-align: middle;
20 | }
21 |
22 | .custom .t-count-down__split {
23 | font-size: 10px;
24 | margin: 0 5px;
25 | }
26 |
--------------------------------------------------------------------------------
/src/count-down/defaultProps.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
3 | * */
4 |
5 | import { TdCountDownProps } from './type';
6 |
7 | export const countDownDefaultProps: TdCountDownProps = {
8 | autoStart: true,
9 | content: 'default',
10 | format: 'HH:mm:ss',
11 | millisecond: false,
12 | size: 'medium',
13 | splitWithUnit: false,
14 | theme: 'default',
15 | time: 0,
16 | };
17 |
--------------------------------------------------------------------------------
/src/count-down/hooks/useCountDown/index.ts:
--------------------------------------------------------------------------------
1 | import { useCountDown } from './useCountDown';
2 |
3 | export default useCountDown;
4 |
--------------------------------------------------------------------------------
/src/count-down/index.ts:
--------------------------------------------------------------------------------
1 | import _CountDown from './CountDown';
2 |
3 | export type { CountDownProps, CountDownRef } from './CountDown';
4 | export * from './type';
5 |
6 | export const CountDown = _CountDown;
7 | export default CountDown;
8 |
--------------------------------------------------------------------------------
/src/count-down/style/css.js:
--------------------------------------------------------------------------------
1 | import './index.css';
2 |
--------------------------------------------------------------------------------
/src/count-down/style/index.js:
--------------------------------------------------------------------------------
1 | import '../../_common/style/mobile/components/count-down/v2/_index.less';
2 |
--------------------------------------------------------------------------------
/src/dialog/_example/plugin.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Dialog, Button } from 'tdesign-mobile-react';
3 |
4 | const PluginUsage = React.memo(() => (
5 |
6 |
23 |
24 | ));
25 |
26 | export default PluginUsage;
27 |
--------------------------------------------------------------------------------
/src/dialog/_example/style/index.less:
--------------------------------------------------------------------------------
1 | .tdesign-mobile-demo {
2 | background-color: var(--td-bg-color-container);
3 |
4 | .btn-gap {
5 | width: 100%;
6 | height: 16px;
7 | }
8 | .middle-container {
9 | padding: 20px;
10 | overflow: auto;
11 | max-height: 100px;
12 | }
13 | }
14 | .t-input {
15 | margin-top: 16px;
16 | --td-input-vertical-padding: 12px;
17 | --td-bg-color-container: var(--td-bg-color-page, #f3f3f3);
18 | border-radius: 6px;
19 | }
20 |
--------------------------------------------------------------------------------
/src/dialog/alert.ts:
--------------------------------------------------------------------------------
1 | import { MouseEvent } from 'react';
2 | import { TNode } from '../common';
3 | import { show } from './show';
4 | import { DialogProps } from './index';
5 |
6 | export type DialogAlertProps = Omit & {
7 | confirmBtn?: TNode;
8 | onConfirm?: (context: { e: MouseEvent }) => void;
9 | };
10 |
11 | export function alert(props: DialogAlertProps) {
12 | const defaultProps: DialogProps = {
13 | confirmBtn: '确认',
14 | };
15 |
16 | return show({
17 | ...defaultProps,
18 | ...props,
19 | cancelBtn: null,
20 | });
21 | }
22 |
--------------------------------------------------------------------------------
/src/dialog/confirm.ts:
--------------------------------------------------------------------------------
1 | import { MouseEvent } from 'react';
2 | import { TNode } from '../common';
3 | import { show } from './show';
4 | import { DialogProps } from './index';
5 |
6 | export type DialogConfirmProps = Omit & {
7 | confirmBtn?: TNode;
8 | cancelBtn?: TNode;
9 | onCancel?: (context: { e: MouseEvent }) => void;
10 | onConfirm?: (context: { e: MouseEvent }) => void;
11 | };
12 |
13 | export function confirm(props: DialogConfirmProps) {
14 | const defaultProps: DialogProps = {
15 | confirmBtn: '确认',
16 | cancelBtn: '取消',
17 | };
18 |
19 | return show({
20 | ...defaultProps,
21 | ...props,
22 | });
23 | }
24 |
--------------------------------------------------------------------------------
/src/dialog/defaultProps.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
3 | * */
4 |
5 | import { TdDialogProps } from './type';
6 |
7 | export const dialogDefaultProps: TdDialogProps = {
8 | buttonLayout: 'horizontal',
9 | closeBtn: false,
10 | closeOnOverlayClick: false,
11 | destroyOnClose: false,
12 | overlayProps: {},
13 | preventScrollThrough: true,
14 | showOverlay: true,
15 | };
16 |
--------------------------------------------------------------------------------
/src/dialog/style/css.js:
--------------------------------------------------------------------------------
1 | import './index.css';
2 |
--------------------------------------------------------------------------------
/src/dialog/style/index.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable import/no-relative-packages */
2 | import '../../_common/style/mobile/components/dialog/v2/_index.less';
3 |
--------------------------------------------------------------------------------
/src/divider/_example/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import TDemoBlock from '../../../site/mobile/components/DemoBlock';
3 | import TDemoHeader from '../../../site/mobile/components/DemoHeader';
4 | import BaseDemo from './base';
5 | import ThemeDemo from './theme';
6 |
7 | import './style/index.less';
8 |
9 | export default function DividerDemo() {
10 | return (
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 | );
21 | }
22 |
--------------------------------------------------------------------------------
/src/divider/_example/style/index.less:
--------------------------------------------------------------------------------
1 | .tdesign-mobile-demo {
2 | background-color: var(--td-bg-color-container);
3 | }
4 |
5 | .divider-demo__title {
6 | font-size: 14px;
7 | color: var(--td-text-color-secondary, rgba(0, 0, 0, 0.6));
8 | padding: 8px 16px;
9 | line-height: 20px;
10 | }
11 | .divider-wrapper {
12 | display: flex;
13 | align-items: center;
14 | font-size: 14px;
15 | color: var(--td-text-color-primary, rgba(0, 0, 0, 0.9));
16 | padding-left: 16px;
17 | }
18 |
--------------------------------------------------------------------------------
/src/divider/_example/theme.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Divider } from 'tdesign-mobile-react';
3 | import './style/index.less';
4 |
5 | export default function Theme() {
6 | return (
7 |
8 |
虚线样式
9 |
10 |
11 |
12 |
13 |
7 |
用户引导的说明文案
8 |
9 |
10 |
11 |
9 |
标签文字
10 |
}
15 | />
16 |
8 |
9 |
10 | );
11 | }
12 |
--------------------------------------------------------------------------------
/src/input/_example/label.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Input } from 'tdesign-mobile-react';
3 |
4 | export default function Label() {
5 | return ;
6 | }
7 |
--------------------------------------------------------------------------------
/src/input/_example/layout.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Input } from 'tdesign-mobile-react';
3 | import { ErrorCircleFilledIcon } from 'tdesign-icons-react';
4 |
5 | export default function Layout() {
6 | return } />;
7 | }
8 |
--------------------------------------------------------------------------------
/src/input/_example/maxLength.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Input } from 'tdesign-mobile-react';
3 |
4 | export default function MaxLength() {
5 | return (
6 | <>
7 |
8 |
9 |
10 | );
11 | }
12 |
--------------------------------------------------------------------------------
/src/input/_example/prefix.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Input } from 'tdesign-mobile-react';
3 | import { AppIcon } from 'tdesign-icons-react';
4 |
5 | export default function Prefix() {
6 | return (
7 | <>
8 | } />
9 | } />
10 |
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/src/input/_example/status.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Input } from 'tdesign-mobile-react';
3 |
4 | export default function Status() {
5 | const text1 = '已输入文字';
6 | const text2 = '不可编辑文字';
7 | return (
8 | <>
9 |
10 |
11 |
12 | );
13 | }
14 |
--------------------------------------------------------------------------------
/src/input/_example/suffix.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Button, Input } from 'tdesign-mobile-react';
3 | import { InfoCircleFilledIcon, UserAvatarIcon } from 'tdesign-icons-react';
4 |
5 | export default function Suffix() {
6 | return (
7 | <>
8 | } />
9 |
14 | {' 操作按钮 '}
15 |
16 | }
17 | />
18 | } />
19 |
20 | );
21 | }
22 |
--------------------------------------------------------------------------------
/src/input/defaultProps.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
3 | * */
4 |
5 | import { TdInputProps } from './type';
6 |
7 | export const inputDefaultProps: TdInputProps = {
8 | align: 'left',
9 | allowInputOverMax: false,
10 | autocomplete: undefined,
11 | autofocus: false,
12 | borderless: false,
13 | clearTrigger: 'always',
14 | clearable: false,
15 | disabled: undefined,
16 | layout: 'horizontal',
17 | placeholder: undefined,
18 | readonly: undefined,
19 | spellcheck: false,
20 | status: 'default',
21 | type: 'text',
22 | };
23 |
--------------------------------------------------------------------------------
/src/input/index.ts:
--------------------------------------------------------------------------------
1 | import _Input from './Input';
2 |
3 | import './style/index.js';
4 |
5 | export type { InputProps } from './Input';
6 | export * from './type';
7 |
8 | export const Input = _Input;
9 | export default Input;
10 |
--------------------------------------------------------------------------------
/src/input/style/css.js:
--------------------------------------------------------------------------------
1 | import './index.css';
2 |
--------------------------------------------------------------------------------
/src/input/style/index.js:
--------------------------------------------------------------------------------
1 | import '../../_common/style/mobile/components/input/v2/_index.less';
2 |
--------------------------------------------------------------------------------
/src/layout/__tests__/__snapshots__/demo.test.tsx.snap:
--------------------------------------------------------------------------------
1 | // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
2 |
3 | exports[`Col > Col baseDemo demo works fine 1`] = `null`;
4 |
5 | exports[`Col > Col indexDemo demo works fine 1`] = `null`;
6 |
7 | exports[`Col > Col offsetDemo demo works fine 1`] = `null`;
8 |
--------------------------------------------------------------------------------
/src/layout/__tests__/demo.test.tsx:
--------------------------------------------------------------------------------
1 | import { describe, expect, render, it } from '@test/utils';
2 |
3 | import baseDemo from '../_example/base';
4 | import indexDemo from '../_example/index';
5 | import offsetDemo from '../_example/offset';
6 |
7 | const mapper = {
8 | baseDemo,
9 | indexDemo,
10 | offsetDemo,
11 | };
12 |
13 | describe('Col', () => {
14 | Object.keys(mapper).forEach((demoName) => {
15 | it(`Col ${demoName} demo works fine`, () => {
16 | const { container } = render(mapper[demoName]);
17 |
18 | expect(container.firstChild).toMatchSnapshot();
19 | });
20 | });
21 | });
22 |
--------------------------------------------------------------------------------
/src/layout/_example/offset.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Col, Row } from 'tdesign-mobile-react';
3 |
4 | export default function () {
5 | return (
6 |
7 |
8 |
9 | col-8
10 |
11 |
12 | col-8
13 |
14 |
15 | col-8
16 |
17 |
18 |
7 | 跳转链接
8 | 跳转链接
9 |
10 | );
11 | }
12 |
--------------------------------------------------------------------------------
/src/link/_example/linkSize.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Link } from 'tdesign-mobile-react';
3 |
4 | export default function Size() {
5 | return (
6 |
7 |
8 | S跳转链接
9 |
10 |
11 | M跳转链接
12 |
13 |
14 | L跳转链接
15 |
16 |
17 | );
18 | }
19 |
--------------------------------------------------------------------------------
/src/link/_example/prefix.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { LinkIcon } from 'tdesign-icons-react';
3 | import { Link } from 'tdesign-mobile-react';
4 |
5 | export default function Prefix() {
6 | return (
7 |
8 | }>
9 | 跳转链接
10 |
11 | }>
12 | 跳转链接
13 |
14 |
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/src/link/_example/style/index.less:
--------------------------------------------------------------------------------
1 | .demo-content {
2 | height: 48px;
3 | background-color: var(--td-bg-color-container, #fff);
4 | display: flex;
5 | justify-content: space-around;
6 | margin-bottom: 6.4vw;
7 | align-items: center;
8 | }
9 |
--------------------------------------------------------------------------------
/src/link/_example/suffix.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { JumpIcon } from 'tdesign-icons-react';
3 | import { Link } from 'tdesign-mobile-react';
4 |
5 | export default function Suffix() {
6 | return (
7 |
8 | }>
9 | 跳转链接
10 |
11 | }>
12 | 跳转链接
13 |
14 |
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/src/link/_example/underline.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Link } from 'tdesign-mobile-react';
3 |
4 | export default function Underline() {
5 | return (
6 |
7 |
8 | 跳转链接
9 |
10 |
11 | 跳转链接
12 |
13 |
14 | );
15 | }
16 |
--------------------------------------------------------------------------------
/src/link/defaultProps.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
3 | * */
4 |
5 | import { TdLinkProps } from './type';
6 |
7 | export const linkDefaultProps: TdLinkProps = { disabled: undefined, size: 'medium', theme: 'default' };
8 |
--------------------------------------------------------------------------------
/src/link/index.ts:
--------------------------------------------------------------------------------
1 | import _Link from './Link';
2 |
3 | import './style/index.js';
4 |
5 | export type { LinkProps } from './Link';
6 |
7 | export const Link = _Link;
8 | export default Link;
9 |
--------------------------------------------------------------------------------
/src/link/style/css.js:
--------------------------------------------------------------------------------
1 | import './index.css';
2 |
--------------------------------------------------------------------------------
/src/link/style/index.js:
--------------------------------------------------------------------------------
1 | import '../../_common/style/mobile/components/link/v2/_index.less';
2 |
--------------------------------------------------------------------------------
/src/list/_example/style/index.less:
--------------------------------------------------------------------------------
1 | .tdesign-mobile-demo {
2 | background-color: var(--td-bg-color-container);
3 | }
4 |
5 | .list-demo {
6 | .t-list {
7 | .cell {
8 | width: 100%;
9 | text-align: center;
10 | }
11 | .error {
12 | text-align: center;
13 | color: #969799;
14 | font-size: 14px;
15 | margin-top: 8px;
16 | }
17 | }
18 | .custom-error {
19 | font-size: 14px;
20 | color: #969799;
21 | text-align: center;
22 | padding-top: 16px;
23 | cursor: default;
24 |
25 | span {
26 | color: #0052d9;
27 | cursor: pointer;
28 | }
29 | }
30 | .t-button {
31 | margin: 0 16px 16px 16px;
32 | width: calc(100% - 32px);
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/src/list/index.ts:
--------------------------------------------------------------------------------
1 | import _List from './list';
2 |
3 | import './style/index.js';
4 |
5 | export * from './type';
6 |
7 | export const List = _List;
8 | export default List;
9 |
--------------------------------------------------------------------------------
/src/list/style/css.js:
--------------------------------------------------------------------------------
1 | import './index.css';
2 |
--------------------------------------------------------------------------------
/src/list/style/index.js:
--------------------------------------------------------------------------------
1 | import '../../_common/style/mobile/components/list/_index.less';
2 |
--------------------------------------------------------------------------------
/src/list/type.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 |
3 | /**
4 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
5 | * */
6 |
7 | import { TNode } from '../common';
8 |
9 | export interface TdListProps {
10 | /**
11 | * 自定义加载中。值为空不显示加载中，值为 'loading' 显示加载中状态，值为 'load-more' 显示加载更多状态。值类型为函数，则表示自定义加载状态呈现内容
12 | */
13 | asyncLoading?: TNode;
14 | /**
15 | * 底部
16 | */
17 | footer?: TNode;
18 | /**
19 | * 头部
20 | */
21 | header?: TNode;
22 | /**
23 | * 点击加载更多时触发
24 | */
25 | onLoadMore?: () => void;
26 | /**
27 | * 列表滚动时触发，bottomDistance 表示底部距离；scrollTop 表示顶部滚动距离
28 | */
29 | onScroll?: (bottomDistance: number, scrollTop: number) => void;
30 | }
31 |
--------------------------------------------------------------------------------
/src/loading/_example/base.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Loading } from 'tdesign-mobile-react';
3 |
4 | export default function BaseLoading() {
5 | return (
6 | <>
7 |
8 |
9 |
10 |
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/src/loading/_example/delay.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import { Loading, Switch } from 'tdesign-mobile-react';
3 |
4 | export default function DelayLoading() {
5 | const [showLoading, setShowLoading] = useState(false);
6 |
7 | const clickSwitch = (value) => {
8 | setShowLoading(value);
9 | };
10 |
11 | return (
12 |
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/src/loading/_example/horz.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Loading } from 'tdesign-mobile-react';
3 |
4 | export default function HorzLoading() {
5 | return (
6 | <>
7 |
8 |
9 |
10 | );
11 | }
12 |
--------------------------------------------------------------------------------
/src/loading/_example/pure-text.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Loading } from 'tdesign-mobile-react';
3 |
4 | export default function PureTextLoading() {
5 | return (
6 | <>
7 |
8 |
9 | );
10 | }
11 |
--------------------------------------------------------------------------------
/src/loading/_example/size.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Loading } from 'tdesign-mobile-react';
3 |
4 | export default function SizeLoading() {
5 | return (
6 | <>
7 |
11 |
15 |
19 |
20 | );
21 | }
22 |
--------------------------------------------------------------------------------
/src/loading/_example/speed.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import { Loading, Slider } from 'tdesign-mobile-react';
3 |
4 | export default function SpeedLoading() {
5 | const [speed, setSpeed] = useState(5);
6 |
7 | const onChange = (value) => {
8 | setSpeed(value);
9 | };
10 |
11 | return (
12 | <>
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 | );
22 | }
23 |
--------------------------------------------------------------------------------
/src/loading/_example/vert.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Loading } from 'tdesign-mobile-react';
3 |
4 | export default function VertLoading() {
5 | return (
6 | <>
7 |
8 |
9 |
10 | );
11 | }
12 |
--------------------------------------------------------------------------------
/src/loading/defaultProps.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
3 | * */
4 |
5 | import { TdLoadingProps } from './type';
6 |
7 | export const loadingDefaultProps: TdLoadingProps = {
8 | attach: '',
9 | delay: 0,
10 | duration: 800,
11 | fullscreen: false,
12 | indicator: true,
13 | inheritColor: false,
14 | layout: 'horizontal',
15 | loading: true,
16 | pause: false,
17 | preventScrollThrough: true,
18 | size: '20px',
19 | theme: 'circular',
20 | };
21 |
--------------------------------------------------------------------------------
/src/loading/index.ts:
--------------------------------------------------------------------------------
1 | import _Loading from './Loading';
2 | import { LoadingPlugin as _LoadingPlugin } from './plugin';
3 |
4 | import './style/index.js';
5 |
6 | export type { LoadingProps } from './Loading';
7 | export * from './type';
8 |
9 | export const Loading = _Loading;
10 | export const loading = _LoadingPlugin;
11 | export const LoadingPlugin = _LoadingPlugin;
12 |
13 | export default Loading;
14 |
--------------------------------------------------------------------------------
/src/loading/style/css.js:
--------------------------------------------------------------------------------
1 | import './index.css';
2 |
--------------------------------------------------------------------------------
/src/loading/style/index.js:
--------------------------------------------------------------------------------
1 | import '../../_common/style/mobile/components/loading/_index.less';
2 |
--------------------------------------------------------------------------------
/src/locale/ar_KW.ts:
--------------------------------------------------------------------------------
1 | import arKW from '../_common/js/global-config/mobile/locale/ar_KW';
2 | import { GlobalConfigProvider } from '../config-provider/type';
3 |
4 | // 需要 GlobalConfigProvider 保证数据类型正确
5 | export default arKW as unknown as GlobalConfigProvider;
6 |
--------------------------------------------------------------------------------
/src/locale/en_US.ts:
--------------------------------------------------------------------------------
1 | import enUS from '../_common/js/global-config/mobile/locale/en_US';
2 | import { GlobalConfigProvider } from '../config-provider/type';
3 |
4 | // 需要 GlobalConfigProvider 保证数据类型正确，本次提交就检查出了英文字段缺少
5 | export default enUS as unknown as GlobalConfigProvider;
6 |
--------------------------------------------------------------------------------
/src/locale/it_IT.ts:
--------------------------------------------------------------------------------
1 | import itIT from '../_common/js/global-config/mobile/locale/it_IT';
2 | import { GlobalConfigProvider } from '../config-provider/type';
3 |
4 | // 需要 GlobalConfigProvider 保证数据类型正确
5 | export default itIT as unknown as GlobalConfigProvider;
6 |
--------------------------------------------------------------------------------
/src/locale/ja_JP.ts:
--------------------------------------------------------------------------------
1 | import jaJP from '../_common/js/global-config/mobile/locale/ja_JP';
2 | import { GlobalConfigProvider } from '../config-provider/type';
3 |
4 | // 需要 GlobalConfigProvider 保证数据类型正确
5 | export default jaJP as unknown as GlobalConfigProvider;
6 |
--------------------------------------------------------------------------------
/src/locale/ko_KR.ts:
--------------------------------------------------------------------------------
1 | import koKR from '../_common/js/global-config/mobile/locale/ko_KR';
2 | import { GlobalConfigProvider } from '../config-provider/type';
3 |
4 | // 需要 GlobalConfigProvider 保证数据类型正确
5 | export default koKR as unknown as GlobalConfigProvider;
6 |
--------------------------------------------------------------------------------
/src/locale/ru_RU.ts:
--------------------------------------------------------------------------------
1 | import ruRU from '../_common/js/global-config/mobile/locale/ru_RU';
2 | import { GlobalConfigProvider } from '../config-provider/type';
3 |
4 | // 需要 GlobalConfigProvider 保证数据类型正确
5 | export default ruRU as unknown as GlobalConfigProvider;
6 |
--------------------------------------------------------------------------------
/src/locale/zh_CN.ts:
--------------------------------------------------------------------------------
1 | import zhCN from '../_common/js/global-config/mobile/locale/zh_CN';
2 | import { GlobalConfigProvider } from '../config-provider/type';
3 |
4 | // 需要 GlobalConfigProvider 保证数据类型正确
5 | export default zhCN as unknown as GlobalConfigProvider;
6 |
--------------------------------------------------------------------------------
/src/locale/zh_TW.ts:
--------------------------------------------------------------------------------
1 | import zhTW from '../_common/js/global-config/mobile/locale/zh_TW';
2 | import { GlobalConfigProvider } from '../config-provider/type';
3 |
4 | // 需要 GlobalConfigProvider 保证数据类型正确
5 | export default zhTW as unknown as GlobalConfigProvider;
6 |
--------------------------------------------------------------------------------
/src/message/_example/style/index.less:
--------------------------------------------------------------------------------
1 | .button {
2 | margin-bottom: 16px;
3 | }
4 |
--------------------------------------------------------------------------------
/src/message/defaultProps.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
3 | * */
4 |
5 | import { TdMessageProps } from './type';
6 |
7 | export const messageDefaultProps: TdMessageProps = {
8 | align: 'left',
9 | duration: 3000,
10 | icon: true,
11 | marquee: false,
12 | theme: 'info',
13 | defaultVisible: false,
14 | };
15 |
--------------------------------------------------------------------------------
/src/message/style/css.js:
--------------------------------------------------------------------------------
1 | import './index.css';
2 |
--------------------------------------------------------------------------------
/src/message/style/index.js:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line import/no-relative-packages
2 | import '../../_common/style/mobile/components/message/v2/_index.less';
3 |
--------------------------------------------------------------------------------
/src/navbar/_example/custom-color.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Navbar } from 'tdesign-mobile-react';
3 | import { EllipsisIcon } from 'tdesign-icons-react';
4 |
5 | const CustomColorDemo = () => (
6 | <>
7 |
14 |
15 |
16 | }
17 | />
18 |
19 | );
20 |
21 | export default CustomColorDemo;
22 |
--------------------------------------------------------------------------------
/src/navbar/_example/img.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Navbar } from 'tdesign-mobile-react';
3 | import { EllipsisIcon, HomeIcon } from 'tdesign-icons-react';
4 |
5 | const ImgDemo = () => (
6 | <>
7 | }
9 | right={
10 | <>
11 |
12 |
13 |
14 | }
15 | fixed={false}
16 | />
17 |
18 | );
19 |
20 | export default ImgDemo;
21 |
--------------------------------------------------------------------------------
/src/navbar/_example/search.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Navbar, Search } from 'tdesign-mobile-react';
3 | import { HomeIcon, EllipsisIcon } from 'tdesign-icons-react';
4 |
5 | const SearchDemo = () => (
6 | }
9 | right={
10 | <>
11 |
12 |
13 |
14 | }
15 | >
16 | );
17 |
18 | export default SearchDemo;
19 |
--------------------------------------------------------------------------------
/src/navbar/defaultProps.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
3 | * */
4 |
5 | import { TdNavbarProps } from './type';
6 |
7 | export const navbarDefaultProps: TdNavbarProps = { animation: true, fixed: true, leftArrow: false, visible: true };
8 |
--------------------------------------------------------------------------------
/src/navbar/index.ts:
--------------------------------------------------------------------------------
1 | import _Navbar from './Navbar';
2 |
3 | import './style';
4 |
5 | export type { NavbarProps } from './Navbar';
6 | export * from './type';
7 |
8 | export const Navbar = _Navbar;
9 | export default Navbar;
10 |
--------------------------------------------------------------------------------
/src/navbar/style/css.js:
--------------------------------------------------------------------------------
1 | import './index.css';
2 |
--------------------------------------------------------------------------------
/src/navbar/style/index.js:
--------------------------------------------------------------------------------
1 | import '../../_common/style/mobile/components/navbar/v2/_index.less';
2 |
--------------------------------------------------------------------------------
/src/notice-bar/_example/base.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { NoticeBar } from 'tdesign-mobile-react';
3 |
4 | export default function Base() {
5 | return ;
6 | }
7 |
--------------------------------------------------------------------------------
/src/notice-bar/_example/custom.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { NoticeBar } from 'tdesign-mobile-react';
3 | import { ChevronRightIcon, SoundIcon } from 'tdesign-icons-react';
4 | import './style/index.less';
5 |
6 | export default function Custom() {
7 | return (
8 | }
13 | suffixIcon={}
14 | />
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/src/notice-bar/_example/customization.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Link, NoticeBar } from 'tdesign-mobile-react';
3 | import { CloseIcon } from 'tdesign-icons-react';
4 | import './style/index.less';
5 |
6 | export default function Customization() {
7 | return (
8 |
13 | 详情
14 |
15 | }
16 | suffixIcon={}
17 | />
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/src/notice-bar/_example/event.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { NoticeBar, Toast } from 'tdesign-mobile-react';
3 | import { ChevronRightIcon } from 'tdesign-icons-react';
4 | import './style/index.less';
5 |
6 | export default function Event() {
7 | const handleClick = (context: string) => {
8 | Toast({ message: `click:${context}` });
9 | };
10 | return (
11 | }
16 | onClick={handleClick}
17 | />
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/src/notice-bar/_example/iconDemo.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { NoticeBar } from 'tdesign-mobile-react';
3 |
4 | export default function IconDemo() {
5 | return ;
6 | }
7 |
--------------------------------------------------------------------------------
/src/notice-bar/_example/scrolling.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { NoticeBar } from 'tdesign-mobile-react';
3 | import './style/index.less';
4 | import { SoundIcon } from 'tdesign-icons-react';
5 |
6 | export default function Scrolling() {
7 | const content = '提示文字描述提示文字描述提示文字描述提示文字描述文';
8 | const content1 = ['君不见', '高堂明镜悲白发', '朝如青丝暮成雪', '人生得意须尽欢', '莫使金樽空对月'];
9 |
10 | return (
11 | <>
12 |
13 |
14 | } />
15 |
16 | );
17 | }
18 |
--------------------------------------------------------------------------------
/src/notice-bar/_example/style/index.less:
--------------------------------------------------------------------------------
1 | .tdesign-mobile-demo {
2 | background-color: var(--td-bg-color-container);
3 | }
4 |
5 | .cover-class {
6 | background-color: var(--bg-color-demo, #fff);
7 |
8 | .t-icon {
9 | color: var(--td-text-color-primary, rgba(0, 0, 0, 0.9)) !important;
10 | }
11 |
12 | .t-notice-bar__text {
13 | color: var(--bg-color-demo, #fff) !important;
14 | }
15 | }
16 |
17 | .custom-link {
18 | margin-left: 2px;
19 | }
20 |
21 | .notice-bar-demo-block {
22 | margin-bottom: 16px;
23 | }
24 |
--------------------------------------------------------------------------------
/src/notice-bar/_example/suffixIcon.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { NoticeBar } from 'tdesign-mobile-react';
3 | import { CloseIcon } from 'tdesign-icons-react';
4 |
5 | export default function SuffixIcon() {
6 | return } />;
7 | }
8 |
--------------------------------------------------------------------------------
/src/notice-bar/_example/theme.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { NoticeBar } from 'tdesign-mobile-react';
3 | import './style/index.less';
4 |
5 | export default function ThemeDemo() {
6 | return (
7 | <>
8 |
9 |
10 |
11 |
12 |
13 | );
14 | }
15 |
--------------------------------------------------------------------------------
/src/notice-bar/defaultProps.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
3 | * */
4 |
5 | import { TdNoticeBarProps } from './type';
6 |
7 | export const noticeBarDefaultProps: TdNoticeBarProps = {
8 | direction: 'horizontal',
9 | marquee: false,
10 | theme: 'info',
11 | defaultVisible: false,
12 | };
13 |
--------------------------------------------------------------------------------
/src/notice-bar/index.ts:
--------------------------------------------------------------------------------
1 | import _NoticeBar from './NoticeBar';
2 |
3 | import './style/index.js';
4 |
5 | export type { NoticeBarProps } from './NoticeBar';
6 |
7 | export * from './type';
8 |
9 | export const NoticeBar = _NoticeBar;
10 |
11 | export default NoticeBar;
12 |
13 |
--------------------------------------------------------------------------------
/src/notice-bar/style/css.js:
--------------------------------------------------------------------------------
1 | import './index.css';
2 |
--------------------------------------------------------------------------------
/src/notice-bar/style/index.js:
--------------------------------------------------------------------------------
1 | import '../../_common/style/mobile/components/notice-bar/v2/_index.less';
2 |
--------------------------------------------------------------------------------
/src/overlay/_example/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import TDemoBlock from '../../../site/mobile/components/DemoBlock';
3 | import TDemoHeader from '../../../site/mobile/components/DemoHeader';
4 | import BaseDemo from './base';
5 |
6 | import './style/index.less';
7 |
8 | export default function ProgressDemo() {
9 | return (
10 |
11 |
12 |
13 |
14 |
15 |
16 | );
17 | }
18 |
--------------------------------------------------------------------------------
/src/overlay/_example/style/index.less:
--------------------------------------------------------------------------------
1 | .tdesign-mobile-demo {
2 | background-color: var(--td-bg-color-container);
3 | }
4 |
--------------------------------------------------------------------------------
/src/overlay/defaultProps.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
3 | * */
4 |
5 | import { TdOverlayProps } from './type';
6 |
7 | export const overlayDefaultProps: TdOverlayProps = {
8 | duration: 300,
9 | preventScrollThrough: true,
10 | visible: false,
11 | zIndex: 1000,
12 | };
13 |
--------------------------------------------------------------------------------
/src/overlay/index.tsx:
--------------------------------------------------------------------------------
1 | import _Overlay from './Overlay';
2 |
3 | import './style';
4 |
5 | export const Overlay = _Overlay;
6 | export type { OverlayProps } from './Overlay';
7 |
8 | export default Overlay;
9 |
--------------------------------------------------------------------------------
/src/overlay/style/css.js:
--------------------------------------------------------------------------------
1 | import './index.css';
2 |
--------------------------------------------------------------------------------
/src/overlay/style/index.js:
--------------------------------------------------------------------------------
1 | import '../../_common/style/mobile/components/overlay/v2/_index.less';
2 |
--------------------------------------------------------------------------------
/src/picker/_example/index.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import TDemoHeader from '../../../site/mobile/components/DemoHeader';
3 | import BaseDemo from './base';
4 |
5 | export default function PickerDemo() {
6 | return (
7 |
8 |
12 |
13 |
14 | );
15 | }
16 |
--------------------------------------------------------------------------------
/src/picker/_example/style/index.less:
--------------------------------------------------------------------------------
1 | .tdesign-mobile-demo-block {
2 | .t-cell__title {
3 | flex: none;
4 | width: 80px;
5 | }
6 | .cell-container {
7 | margin-top: 16px;
8 | }
9 | .t-cell__note {
10 | flex: 1;
11 | .note-panel {
12 | opacity: 0.9;
13 | width: 100%;
14 | padding-left: 16px;
15 | text-align: left;
16 | &.empty {
17 | opacity: 0.26;
18 | }
19 | }
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/src/picker/defaultProps.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
3 | * */
4 |
5 | export const pickerDefaultProps = { cancelBtn: '取消', confirmBtn: '确认', header: true, visible: false };
6 |
7 | export const pickerItemDefaultProps = { options: [] };
8 |
--------------------------------------------------------------------------------
/src/picker/index.ts:
--------------------------------------------------------------------------------
1 | import _Picker from './Picker';
2 | import _PickerView from './PickerView';
3 | import _PickerItem from './PickerItem';
4 | import './style';
5 |
6 | export type { PickerProps } from './Picker';
7 | export type { PickerViewProps } from './PickerView';
8 | export type { PickerItemProps } from './PickerItem';
9 | export * from './type';
10 |
11 | export const Picker = _Picker;
12 | export const PickerView = _PickerView;
13 | export const PickerItem = _PickerItem;
14 |
15 | export default Picker;
16 |
--------------------------------------------------------------------------------
/src/picker/picker-context.ts:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { TdPickerProps } from './type';
3 |
4 | const PickerContext = React.createContext>(null);
5 |
6 | export default PickerContext;
7 |
--------------------------------------------------------------------------------
/src/picker/style/css.js:
--------------------------------------------------------------------------------
1 | import './index.css';
2 |
--------------------------------------------------------------------------------
/src/picker/style/index.js:
--------------------------------------------------------------------------------
1 | import '../../_common/style/mobile/components/picker/_index.less';
2 |
--------------------------------------------------------------------------------
/src/popover/defaultProps.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
3 | * */
4 |
5 | import { TdPopoverProps } from './type';
6 |
7 | export const popoverDefaultProps: TdPopoverProps = {
8 | closeOnClickOutside: true,
9 | placement: 'top',
10 | showArrow: true,
11 | theme: 'dark',
12 | };
13 |
--------------------------------------------------------------------------------
/src/popover/index.ts:
--------------------------------------------------------------------------------
1 | import _Popover from './Popover';
2 | import { TdPopoverProps } from './type';
3 |
4 | import './style';
5 |
6 | export * from './type';
7 | export type PopoverProps = TdPopoverProps;
8 |
9 | export const Popover = _Popover;
10 | export default Popover;
11 |
--------------------------------------------------------------------------------
/src/popover/style/css.js:
--------------------------------------------------------------------------------
1 | import './index.css';
2 |
--------------------------------------------------------------------------------
/src/popover/style/index.js:
--------------------------------------------------------------------------------
1 | import '../../_common/style/mobile/components/popover/_index.less';
2 |
--------------------------------------------------------------------------------
/src/popup/defaultProps.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
3 | * */
4 |
5 | import { TdPopupProps } from './type';
6 |
7 | export const popupDefaultProps: TdPopupProps = {
8 | attach: 'body',
9 | closeOnOverlayClick: true,
10 | destroyOnClose: false,
11 | overlayProps: {},
12 | placement: 'top',
13 | preventScrollThrough: true,
14 | showOverlay: true,
15 | };
16 |
--------------------------------------------------------------------------------
/src/popup/index.tsx:
--------------------------------------------------------------------------------
1 | import _Popup from './Popup';
2 |
3 | import './style';
4 |
5 | export type { PopupProps } from './Popup';
6 | export const Popup = _Popup;
7 |
8 | export default Popup;
9 |
--------------------------------------------------------------------------------
/src/popup/style/css.js:
--------------------------------------------------------------------------------
1 | import './index.css';
2 |
--------------------------------------------------------------------------------
/src/popup/style/index.js:
--------------------------------------------------------------------------------
1 | import '../../_common/style/mobile/components/popup/v2/_index.less';
2 |
--------------------------------------------------------------------------------
/src/progress/_example/custom.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Progress } from 'tdesign-mobile-react';
3 | import './style/index.less';
4 |
5 | export default function Custom() {
6 | const customPercentage = 88;
7 | return (
8 |
9 |
10 |
13 |
14 |
17 |
7 |
12 | new Promise((resolve) => {
13 | setTimeout(() => {
14 | resolve(1);
15 | }, 2000);
16 | })
17 | }
18 | >
19 | {children}
20 |
21 |
8 |
9 | |
10 | );
11 | }
12 |
--------------------------------------------------------------------------------
/src/rate/_example/base.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import { Cell, Rate } from 'tdesign-mobile-react';
3 |
4 | export default function Base() {
5 | const [value, setValue] = useState(3);
6 |
7 | return (
8 |
9 | {
12 | setValue(value);
13 | }}
14 | />
15 | |
16 | );
17 | }
18 |
--------------------------------------------------------------------------------
/src/rate/_example/color.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Cell, CellGroup, Rate } from 'tdesign-mobile-react';
3 |
4 | export default function Color() {
5 | return (
6 |
7 |
8 |
9 | |
10 |
11 |
12 | |
13 |
14 | );
15 | }
16 |
--------------------------------------------------------------------------------
/src/rate/_example/count.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import { Cell, Rate } from 'tdesign-mobile-react';
3 |
4 | export default function Count() {
5 | const [value, setValue] = useState(2);
6 |
7 | return (
8 |
9 | {
13 | setValue(value);
14 | }}
15 | />
16 | |
17 | );
18 | }
19 |
--------------------------------------------------------------------------------
/src/rate/_example/custom.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import { ThumbUpIcon } from 'tdesign-icons-react';
3 | import { Cell, Rate } from 'tdesign-mobile-react';
4 |
5 | export default function Custom() {
6 | const [value, setValue] = useState(3);
7 |
8 | return (
9 |
10 | , ]}
12 | value={value}
13 | onChange={(value) => {
14 | setValue(value);
15 | }}
16 | />
17 | |
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/src/rate/_example/placement.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Cell, CellGroup, Rate } from 'tdesign-mobile-react';
3 |
4 | export default function Placement() {
5 | return (
6 |
7 |
8 |
9 | |
10 |
11 |
12 | |
13 |
14 |
15 | |
16 |
17 | );
18 | }
19 |
--------------------------------------------------------------------------------
/src/rate/_example/show-text.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Cell, CellGroup, Rate } from 'tdesign-mobile-react';
3 |
4 | export default function ShowText() {
5 | return (
6 |
7 |
8 |
9 | |
10 |
11 |
12 | |
13 |
14 |
15 | |
16 |
17 | );
18 | }
19 |
--------------------------------------------------------------------------------
/src/rate/_example/size.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Cell, CellGroup, Rate } from 'tdesign-mobile-react';
3 |
4 | export default function Size() {
5 | return (
6 |
7 |
8 |
9 | |
10 |
11 |
12 | |
13 |
14 | );
15 | }
16 |
--------------------------------------------------------------------------------
/src/rate/_example/style/index.less:
--------------------------------------------------------------------------------
1 | .rate-demo__show-text,
2 | .rate-demo__placement,
3 | .rate-demo__size,
4 | .rate-demo__color {
5 | .t-cell {
6 | margin-bottom: 16px;
7 | }
8 | }
9 |
10 | .desc {
11 | color: var(--td-text-color-primary, rgba(0, 0, 0, 0.9));
12 |
13 | &--active {
14 | color: #ed7b2f;
15 | font-weight: 600;
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/src/rate/defaultProps.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
3 | * */
4 |
5 | import { TdRateProps } from './type';
6 |
7 | export const rateDefaultProps: TdRateProps = {
8 | allowHalf: false,
9 | color: '#ED7B2F',
10 | count: 5,
11 | disabled: undefined,
12 | gap: 8,
13 | placement: 'top',
14 | showText: false,
15 | size: '24px',
16 | texts: [],
17 | defaultValue: 0,
18 | };
19 |
--------------------------------------------------------------------------------
/src/rate/index.ts:
--------------------------------------------------------------------------------
1 | import _Rate from './Rate';
2 |
3 | import './style/index.js';
4 |
5 | export type { RateProps } from './Rate';
6 | export * from './type';
7 |
8 | export const Rate = _Rate;
9 | export default Rate;
10 |
--------------------------------------------------------------------------------
/src/rate/style/css.js:
--------------------------------------------------------------------------------
1 | import './index.css';
2 |
--------------------------------------------------------------------------------
/src/rate/style/index.js:
--------------------------------------------------------------------------------
1 | import '../../_common/style/mobile/components/rate/v2/_index.less';
2 |
--------------------------------------------------------------------------------
/src/result/_example/custom.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Image, Result } from 'tdesign-mobile-react';
3 | import './style/index.less';
4 |
5 | export default function CustomResult() {
6 | return (
7 | }
9 | title="自定义结果"
10 | description="描述文字"
11 | />
12 | );
13 | }
14 |
--------------------------------------------------------------------------------
/src/result/_example/style/index.less:
--------------------------------------------------------------------------------
1 | .tdesign-mobile-demo {
2 | background-color: var(--td-bg-color-container);
3 | }
4 |
5 | .extra-class-image {
6 | width: 108px;
7 | }
8 |
9 | .space {
10 | margin-bottom: 48px;
11 | }
12 |
13 | .tdesign-mobile-demo {
14 | .padding {
15 | padding: 0 16px 16px;
16 | }
17 | }
18 |
19 | .result-page {
20 | height: calc(100vh - 50px);
21 | background-color: var(--bg-color-demo, #fff);
22 |
23 | .demo-section__wrapper {
24 | padding: 24px 16px;
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/src/result/defaultProps.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
3 | * */
4 |
5 | import { TdResultProps } from './type';
6 |
7 | export const resultDefaultProps: TdResultProps = { theme: 'default', title: '' };
8 |
--------------------------------------------------------------------------------
/src/result/index.ts:
--------------------------------------------------------------------------------
1 | import _Result from './Result';
2 | import './style/index.js';
3 |
4 | export type { ResultProps } from './Result';
5 | export * from './type';
6 |
7 | export const Result = _Result;
8 | export default Result;
9 |
--------------------------------------------------------------------------------
/src/result/result.md:
--------------------------------------------------------------------------------
1 | :: BASE_DOC ::
2 |
3 | ## API
4 |
5 |
6 | ### Result Props
7 |
8 | 名称 | 类型 | 默认值 | 描述 | 必传
9 | -- | -- | -- | -- | --
10 | className | String | - | 类名 | N
11 | style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
12 | description | TNode | - | 描述文字。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
13 | image | TNode | - | 图片地址。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
14 | theme | String | default | 内置主题。可选项：default/success/warning/error | N
15 | title | TNode | '' | 标题。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
16 |
--------------------------------------------------------------------------------
/src/result/style/css.js:
--------------------------------------------------------------------------------
1 | import './index.css';
2 |
--------------------------------------------------------------------------------
/src/result/style/index.js:
--------------------------------------------------------------------------------
1 | import '../../_common/style/mobile/components/result/v2/_index.less';
2 |
--------------------------------------------------------------------------------
/src/result/type.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 |
3 | /**
4 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
5 | * */
6 |
7 | import { TNode } from '../common';
8 |
9 | export interface TdResultProps {
10 | /**
11 | * 描述文字
12 | */
13 | description?: TNode;
14 | /**
15 | * 图片地址
16 | */
17 | image?: TNode;
18 | /**
19 | * 内置主题
20 | * @default default
21 | */
22 | theme?: 'default' | 'success' | 'warning' | 'error';
23 | /**
24 | * 标题
25 | * @default ''
26 | */
27 | title?: TNode;
28 | }
29 |
--------------------------------------------------------------------------------
/src/search/_example/action.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Search } from 'tdesign-mobile-react';
3 |
4 | export default function Action() {
5 | const onChange = (val: string) => {
6 | console.log('change: ', val);
7 | };
8 | return (
9 |
10 |
11 |
12 | );
13 | }
14 |
--------------------------------------------------------------------------------
/src/search/_example/other.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Search } from 'tdesign-mobile-react';
3 |
4 | export default function Other() {
5 | const onChange = (val: string) => {
6 | console.log('change: ', val);
7 | };
8 | return (
9 |
10 |
11 |
12 | );
13 | }
14 |
--------------------------------------------------------------------------------
/src/search/_example/shape.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import { Search } from 'tdesign-mobile-react';
3 |
4 | export default function Shape() {
5 | const [value, setValue] = useState('');
6 | const onChange = (val: string) => {
7 | console.log('change: ', val);
8 | setValue(val);
9 | };
10 | return (
11 |
12 |
13 |
14 | );
15 | }
16 |
--------------------------------------------------------------------------------
/src/search/_example/style/index.less:
--------------------------------------------------------------------------------
1 | .search-example {
2 | background-color: var(--td-bg-color-container);
3 | padding: 8px 16px;
4 | }
5 |
--------------------------------------------------------------------------------
/src/search/defaultProps.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
3 | * */
4 |
5 | import { TdSearchProps } from './type';
6 |
7 | export const searchDefaultProps: TdSearchProps = {
8 | action: '',
9 | center: false,
10 | clearable: true,
11 | disabled: false,
12 | focus: false,
13 | leftIcon: 'search',
14 | placeholder: '',
15 | readonly: false,
16 | shape: 'square',
17 | };
18 |
--------------------------------------------------------------------------------
/src/search/index.ts:
--------------------------------------------------------------------------------
1 | import _Search from './Search';
2 |
3 | import './style/index.js';
4 |
5 | export type { SearchProps } from './Search';
6 | export * from './type';
7 |
8 | export const Search = _Search;
9 | export default Search;
10 |
--------------------------------------------------------------------------------
/src/search/style/css.js:
--------------------------------------------------------------------------------
1 | import './index.css';
2 |
--------------------------------------------------------------------------------
/src/search/style/index.js:
--------------------------------------------------------------------------------
1 | import '../../_common/style/mobile/components/search/v2/_index.less';
2 |
--------------------------------------------------------------------------------
/src/side-bar/__tests__/__snapshots__/side-bar.test.tsx.snap:
--------------------------------------------------------------------------------
1 | // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
2 |
3 | exports[`SideBar 组件测试 > content 1`] = `null`;
4 |
--------------------------------------------------------------------------------
/src/side-bar/__tests__/side-bar.test.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { describe, it, expect, render } from '@test/utils';
3 |
4 | import SideBar from '../SideBar';
5 |
6 | describe('SideBar 组件测试', () => {
7 | const SideBarText = 'SideBar组件';
8 | it('content', async () => {
9 | const { queryByText } = render();
10 | expect(queryByText(SideBarText)).toMatchSnapshot();
11 | });
12 | });
13 |
--------------------------------------------------------------------------------
/src/side-bar/_example/style/base.less:
--------------------------------------------------------------------------------
1 | .side-bar-wrapper {
2 | &.section-base {
3 | display: flex;
4 | height: calc(100vh - 50px);
5 | background-color: var(--bg-color-demo, #fff);
6 | z-index: 0;
7 | .content {
8 | flex: 1;
9 | overflow-y: scroll;
10 | }
11 |
12 | .section {
13 | padding: 16px 0;
14 | }
15 |
16 | .title {
17 | padding-left: 20px;
18 | margin-bottom: 4px;
19 | line-height: 26px;
20 | }
21 |
22 | .image {
23 | width: 48px;
24 | height: 48px;
25 | }
26 | }
27 | }
28 |
29 | .tdesign-demo-topnav {
30 | z-index: 1;
31 | }
32 |
--------------------------------------------------------------------------------
/src/side-bar/_example/style/custom.less:
--------------------------------------------------------------------------------
1 | .side-bar-wrapper {
2 | &.section-custom {
3 | display: flex;
4 | height: calc(100vh - 50px);
5 | background-color: var(--bg-color-demo, #fff);
6 |
7 | --td-side-bar-border-radius: 6px;
8 | --td-side-bar-active-color: green;
9 |
10 | .content {
11 | flex: 1;
12 | overflow-y: scroll;
13 | }
14 |
15 | .section {
16 | padding: 16px 0;
17 | }
18 |
19 | .title {
20 | padding-left: 20px;
21 | margin-bottom: 4px;
22 | line-height: 26px;
23 | }
24 |
25 | .image {
26 | width: 48px;
27 | height: 48px;
28 | }
29 | }
30 | }
31 |
32 | .tdesign-demo-topnav {
33 | z-index: 1;
34 | }
35 |
--------------------------------------------------------------------------------
/src/side-bar/_example/style/index.less:
--------------------------------------------------------------------------------
1 | .tdesign-mobile-demo {
2 | padding-bottom: 28px;
3 | background-color: var(--td-bg-color-container);
4 |
5 | .t-button {
6 | margin-bottom: 16px;
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/src/side-bar/defaultProps.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
3 | * */
4 |
5 | import { TdSideBarProps, TdSideBarItemProps } from './type';
6 |
7 | export const sideBarDefaultProps: TdSideBarProps = { defaultValue: undefined };
8 |
9 | export const sideBarItemDefaultProps: TdSideBarItemProps = { disabled: false };
10 |
--------------------------------------------------------------------------------
/src/side-bar/index.ts:
--------------------------------------------------------------------------------
1 | import _SideBar from './SideBar';
2 | import _SideBarItem from './SideBarItem';
3 |
4 | import './style';
5 |
6 | export type { SideBarProps } from './SideBar';
7 | export type { SideBarItemProps } from './SideBarItem';
8 | export * from './type';
9 |
10 | export const SideBar = _SideBar;
11 | export const SideBarItem = _SideBarItem;
12 |
13 | export default {
14 | SideBar,
15 | SideBarItem,
16 | };
17 |
--------------------------------------------------------------------------------
/src/side-bar/style/css.js:
--------------------------------------------------------------------------------
1 | import './index.css';
2 |
--------------------------------------------------------------------------------
/src/side-bar/style/index.js:
--------------------------------------------------------------------------------
1 | import '../../_common/style/mobile/components/side-bar/v2/_index.less';
2 |
--------------------------------------------------------------------------------
/src/skeleton/_example/image-group.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Skeleton } from 'tdesign-mobile-react';
3 | import './style/index.less';
4 |
5 | const rowCols = [{ size: '163.5px', borderRadius: '12px' }, 1, { width: '61%' }];
6 |
7 | export default function ImageGroupSkeleton() {
8 | return (
9 | <>
10 |
11 |
12 |
13 |
14 |
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/src/skeleton/defaultProps.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
3 | * */
4 |
5 | import { TdSkeletonProps } from './type';
6 |
7 | export const skeletonDefaultProps: TdSkeletonProps = { animation: 'none', delay: 0, loading: true, theme: 'text' };
8 |
--------------------------------------------------------------------------------
/src/skeleton/index.ts:
--------------------------------------------------------------------------------
1 | import _Skeleton from './Skeleton';
2 |
3 | import './style/index.js';
4 |
5 | export type { SkeletonProps } from './Skeleton';
6 | export * from './type';
7 |
8 | export const Skeleton = _Skeleton;
9 | export default Skeleton;
10 |
--------------------------------------------------------------------------------
/src/skeleton/style/css.js:
--------------------------------------------------------------------------------
1 | import './index.css';
2 |
--------------------------------------------------------------------------------
/src/skeleton/style/index.js:
--------------------------------------------------------------------------------
1 | import '../../_common/style/mobile/components/skeleton/v2/_index.less';
2 |
--------------------------------------------------------------------------------
/src/slider/_example/base.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Slider } from 'tdesign-mobile-react';
3 |
4 | export default function BaseDemo() {
5 | return (
6 |
7 |
8 |
9 | );
10 | }
11 |
--------------------------------------------------------------------------------
/src/slider/_example/range.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Slider } from 'tdesign-mobile-react';
3 |
4 | export default function RangDemo() {
5 | const onChange = (value: number | number[]) => {
6 | console.log(`change to ${value}`);
7 | };
8 | return (
9 |
10 |
11 |
12 | );
13 | }
14 |
--------------------------------------------------------------------------------
/src/slider/_example/style/index.less:
--------------------------------------------------------------------------------
1 | .wrapper {
2 | &-base,
3 | &-disabled,
4 | &-label,
5 | &-capsule {
6 | background: var(--td-bg-color-container);
7 | padding: 18px 0;
8 | }
9 |
10 | &-capsule {
11 | padding: 16px 0;
12 | }
13 |
14 | &-capsule,
15 | &-disabled,
16 | &-label {
17 | margin-top: 16px;
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/src/slider/constants.ts:
--------------------------------------------------------------------------------
1 | export const BLOCK_SIZE = 20;
2 |
3 | export const BORDER_WIDTH = 6;
4 |
--------------------------------------------------------------------------------
/src/slider/defaultProps.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
3 | * */
4 |
5 | import { TdSliderProps } from './type';
6 |
7 | export const sliderDefaultProps: TdSliderProps = {
8 | disabled: undefined,
9 | label: false,
10 | max: 100,
11 | min: 0,
12 | range: false,
13 | showExtremeValue: false,
14 | step: 1,
15 | theme: 'default',
16 | defaultValue: 0,
17 | };
18 |
--------------------------------------------------------------------------------
/src/slider/index.tsx:
--------------------------------------------------------------------------------
1 | import _Slider from './Slider';
2 | import './style/index.js';
3 |
4 | export type { SliderProps } from './Slider';
5 | export * from './type';
6 |
7 | export const Slider = _Slider;
8 | export default Slider;
9 |
--------------------------------------------------------------------------------
/src/slider/style/css.js:
--------------------------------------------------------------------------------
1 | import './index.css';
2 |
--------------------------------------------------------------------------------
/src/slider/style/index.js:
--------------------------------------------------------------------------------
1 | import '../../_common/style/mobile/components/slider/v2/_index.less';
2 |
--------------------------------------------------------------------------------
/src/stepper/_example/base.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Stepper } from 'tdesign-mobile-react';
3 |
4 | export default function Base() {
5 | return (
6 |
7 |
8 |
9 |
10 | );
11 | }
12 |
--------------------------------------------------------------------------------
/src/stepper/_example/size.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import { Stepper } from 'tdesign-mobile-react';
3 |
4 | export default function StepperSize() {
5 | const [value, setValue] = useState(3);
6 |
7 | const handleChange = ($event: number) => {
8 | setValue($event);
9 | console.log(`change to ${$event}`);
10 | };
11 |
12 | return (
13 |
14 |
15 |
16 |
17 |
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/src/stepper/_example/status.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Stepper } from 'tdesign-mobile-react';
3 |
4 | export default function StatusStepper() {
5 | return (
6 |
7 |
8 |
9 | );
10 | }
11 |
--------------------------------------------------------------------------------
/src/stepper/_example/style/index.less:
--------------------------------------------------------------------------------
1 | .stepper-container {
2 | margin-bottom: 28px;
3 | }
4 |
5 | .stepper-example {
6 | padding: 16px;
7 | display: grid;
8 | grid-template-columns: repeat(3, 1fr);
9 | gap: 24px;
10 | background-color: var(--td-bg-color-container);
11 | }
12 |
--------------------------------------------------------------------------------
/src/stepper/_example/theme.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Stepper } from 'tdesign-mobile-react';
3 |
4 | export default function theme() {
5 | return (
6 |
7 |
8 |
9 |
10 |
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/src/stepper/defaultProps.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
3 | * */
4 |
5 | import { TdStepperProps } from './type';
6 |
7 | export const stepperDefaultProps: TdStepperProps = {
8 | disableInput: false,
9 | disabled: undefined,
10 | integer: true,
11 | max: 100,
12 | min: 0,
13 | size: 'medium',
14 | step: 1,
15 | theme: 'normal',
16 | defaultValue: 0,
17 | };
18 |
--------------------------------------------------------------------------------
/src/stepper/index.tsx:
--------------------------------------------------------------------------------
1 | import _Stepper from './Stepper';
2 | import './style';
3 |
4 | export * from './type';
5 | export type { StepperProps } from './Stepper';
6 |
7 | export const Stepper = _Stepper;
8 | export default Stepper;
9 |
--------------------------------------------------------------------------------
/src/stepper/style/css.js:
--------------------------------------------------------------------------------
1 | import './index.css';
--------------------------------------------------------------------------------
/src/stepper/style/index.js:
--------------------------------------------------------------------------------
1 | import '../../_common/style/mobile/components/stepper/v2/_index.less';
2 |
--------------------------------------------------------------------------------
/src/steps/_example/style/index.less:
--------------------------------------------------------------------------------
1 | .steps-horizontal-demo-block {
2 | margin: 16px 0 24px;
3 | padding: 16px 0;
4 | background-color: #fff;
5 | }
6 | .steps-vertical-demo-block {
7 | margin: 16px 0 24px;
8 | padding: 16px;
9 | background-color: #fff;
10 | }
11 |
--------------------------------------------------------------------------------
/src/steps/defaultProps.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
3 | * */
4 |
5 | import { TdStepsProps, TdStepItemProps } from './type';
6 |
7 | export const stepsDefaultProps: TdStepsProps = {
8 | currentStatus: 'process',
9 | layout: 'horizontal',
10 | readonly: undefined,
11 | sequence: 'positive',
12 | theme: 'default',
13 | };
14 |
15 | export const stepItemDefaultProps: TdStepItemProps = {
16 | content: '',
17 | icon: true,
18 | status: 'default',
19 | title: '',
20 | titleRight: '',
21 | };
22 |
--------------------------------------------------------------------------------
/src/steps/index.tsx:
--------------------------------------------------------------------------------
1 | import _Steps from './Steps';
2 | import _StepItem from './StepItem';
3 |
4 | import './style';
5 |
6 | export type { StepsProps } from './Steps';
7 | export type { StepItemProps } from './StepItem';
8 | export * from './type';
9 |
10 | export const Steps = _Steps;
11 | (Steps as any).StepItem = _StepItem;
12 | export const StepItem = _StepItem;
13 |
14 | export default Steps;
15 |
--------------------------------------------------------------------------------
/src/steps/style/css.js:
--------------------------------------------------------------------------------
1 | import './index.css';
2 |
--------------------------------------------------------------------------------
/src/steps/style/index.js:
--------------------------------------------------------------------------------
1 | import '../../_common/style/mobile/components/steps/v2/_index.less';
2 | import '../../_common/style/mobile/components/step-item/v2/_index.less';
3 |
--------------------------------------------------------------------------------
/src/sticky/_example/base.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Sticky, Button } from 'tdesign-mobile-react';
3 | import './style/index.less';
4 |
5 | export default function Base() {
6 | return (
7 |
8 |
9 |
12 |
13 |
14 | );
15 | }
16 |
--------------------------------------------------------------------------------
/src/sticky/_example/container.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Sticky, Button } from 'tdesign-mobile-react';
3 | import './style/index.less';
4 |
5 | export default function Base() {
6 | return (
7 |
8 |
9 |
10 |
11 |
12 | );
13 | }
14 |
--------------------------------------------------------------------------------
/src/sticky/_example/offset.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Sticky, Button } from 'tdesign-mobile-react';
3 | import './style/index.less';
4 |
5 | export default function Base() {
6 | return (
7 |
8 |
9 |
12 |
13 |
14 | );
15 | }
16 |
--------------------------------------------------------------------------------
/src/sticky/_example/style/index.less:
--------------------------------------------------------------------------------
1 | .tdesign-demo-block-wrap {
2 | height: 1000px;
3 |
4 | .tdesign-demo-block-1 {
5 | padding-left: 16px;
6 | }
7 |
8 | .tdesign-demo-block-2 {
9 | padding-left: 136px;
10 |
11 | }
12 | .tdesign-demo-block-3 {
13 | background-color: #fff;
14 | height: 144px;
15 | padding-left: 256px;
16 | }
17 |
18 | .custom-common-button {
19 | color: #fff;
20 | width: 104px;
21 | height: 44px;
22 | }
23 |
24 | .custom-button {
25 | background-color: #00A870;
26 | }
27 | }
--------------------------------------------------------------------------------
/src/sticky/defaultProps.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
3 | * */
4 |
5 | import { TdStickyProps } from './type';
6 |
7 | export const stickyDefaultProps: TdStickyProps = { container: 'body', disabled: false, offsetTop: 0, zIndex: 99 };
8 |
--------------------------------------------------------------------------------
/src/sticky/hooks/useBoundingClientRect.ts:
--------------------------------------------------------------------------------
1 | export default function useBoundingClientRect(dom: Element) {
2 | const { top, height } = dom.getBoundingClientRect();
3 | return {
4 | top,
5 | height
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/src/sticky/index.tsx:
--------------------------------------------------------------------------------
1 | import _Sticky from './Sticky';
2 | import { TdStickyProps } from './type';
3 | import './style';
4 |
5 | export const Sticky = _Sticky;
6 | export type StickyProps = TdStickyProps;
7 |
8 | export default Sticky;
9 |
--------------------------------------------------------------------------------
/src/sticky/style/css.js:
--------------------------------------------------------------------------------
1 | import './index.css';
2 |
--------------------------------------------------------------------------------
/src/sticky/style/index.js:
--------------------------------------------------------------------------------
1 | import '../../_common/style/mobile/components/sticky/_index.less';
--------------------------------------------------------------------------------
/src/style/css.js:
--------------------------------------------------------------------------------
1 | import './index.css';
2 |
--------------------------------------------------------------------------------
/src/style/index.js:
--------------------------------------------------------------------------------
1 | import '../_common/style/mobile/theme/_index.less';
2 |
--------------------------------------------------------------------------------
/src/swipe-cell/_example/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import TDemoHeader from '../../../site/mobile/components/DemoHeader';
3 | import Left from './left';
4 | import Right from './right';
5 | import Double from './double';
6 | import Icon from './icon';
7 | import Event from './event';
8 |
9 | import './style/base.less';
10 |
11 | export default function SwipeCellDemo() {
12 | return (
13 |
14 |
18 |
19 |
20 |
21 |
22 |
23 |
24 | );
25 | }
26 |
--------------------------------------------------------------------------------
/src/swipe-cell/_example/right.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { SwipeCell, Cell, Toast } from 'tdesign-mobile-react';
3 | import TDemoBlock from '../../../site/mobile/components/DemoBlock';
4 |
5 | export default function Demo() {
6 | const handleClick = (message = 'click') => {
7 | Toast({
8 | message,
9 | });
10 | };
11 |
12 | const oneButton = (
13 | handleClick()}>
14 | 选择
15 |
16 | );
17 |
18 | return (
19 |
20 | } opened />
21 |
22 | );
23 | }
24 |
--------------------------------------------------------------------------------
/src/swipe-cell/defaultProps.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
3 | * */
4 |
5 | import { TdSwipeCellProps } from './type';
6 |
7 | export const swipeCellDefaultProps: TdSwipeCellProps = { opened: false };
8 |
--------------------------------------------------------------------------------
/src/swipe-cell/index.ts:
--------------------------------------------------------------------------------
1 | import _SwipeCell from './SwipeCell';
2 | import './style';
3 |
4 | export type { SwipeCellProps, SwipeCellRef } from './SwipeCell';
5 | export * from './type';
6 |
7 | export const SwipeCell = _SwipeCell;
8 | export default SwipeCell;
9 |
--------------------------------------------------------------------------------
/src/swipe-cell/style/css.js:
--------------------------------------------------------------------------------
1 | import './index.css';
2 |
--------------------------------------------------------------------------------
/src/swipe-cell/style/index.js:
--------------------------------------------------------------------------------
1 | import '../../_common/style/mobile/components/swipe-cell/v2/_index.less';
2 |
3 | import './index.less';
4 |
--------------------------------------------------------------------------------
/src/swipe-cell/style/index.less:
--------------------------------------------------------------------------------
1 | @import '../../_common/style/mobile/base.less';
2 |
3 | .@{prefix}-swipe-cell {
4 | &__wrapper {
5 | transition: transform 0.3s ease-in-out;
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/src/swiper/SwiperContext.tsx:
--------------------------------------------------------------------------------
1 | import React, { RefObject } from 'react';
2 |
3 | export interface SwiperItemReference {
4 | divRef: RefObject;
5 | updateTranslateStyle: (style: string) => void;
6 | updateClassNameSuffix: (extraClassName: string) => void;
7 | }
8 |
9 | interface SwiperContextProps {
10 | addChild?: (ref: SwiperItemReference) => void;
11 | removeChild?: (divRef: RefObject) => void;
12 | forceContainerHeight?: (height: number | string) => void;
13 | }
14 |
15 | const SwiperContext = React.createContext({});
16 |
17 | export default SwiperContext;
18 |
--------------------------------------------------------------------------------
/src/swiper/_example/test.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Swiper } from 'tdesign-mobile-react';
3 |
4 | export default function () {
5 | return (
6 | <>
7 |
8 |
9 | );
10 | }
11 |
--------------------------------------------------------------------------------
/src/swiper/defaultProps.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
3 | * */
4 |
5 | import { TdSwiperProps } from './type';
6 |
7 | export const swiperDefaultProps: TdSwiperProps = {
8 | animation: 'slide',
9 | autoplay: true,
10 | current: 0,
11 | direction: 'horizontal',
12 | duration: 300,
13 | interval: 5000,
14 | loop: true,
15 | nextMargin: 0,
16 | previousMargin: 0,
17 | type: 'default',
18 | };
19 |
--------------------------------------------------------------------------------
/src/swiper/index.tsx:
--------------------------------------------------------------------------------
1 | import './style/index';
2 | import _Swiper from './Swiper';
3 |
4 | export type { SwiperProps } from './Swiper';
5 | export * from './type';
6 |
7 | export const Swiper = _Swiper;
8 | export default Swiper;
9 |
--------------------------------------------------------------------------------
/src/swiper/style/css.js:
--------------------------------------------------------------------------------
1 | import './index.css';
2 |
--------------------------------------------------------------------------------
/src/swiper/style/index.js:
--------------------------------------------------------------------------------
1 | import '../../_common/style/mobile/components/swiper/v2/_index.less';
2 | import '../../_common/style/mobile/components/swiper-nav/v2/_index.less';
3 |
--------------------------------------------------------------------------------
/src/switch/_example/base.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import { Switch, Cell } from 'tdesign-mobile-react';
3 | import type { SwitchValue } from 'tdesign-mobile-react';
4 |
5 | export default function SwitchBase() {
6 | const [checked, setChecked] = useState(1);
7 |
8 | const onChange = (value: SwitchValue) => {
9 | console.log('value', value);
10 | setChecked(value);
11 | };
12 |
13 | return (
14 | <>
15 | | }>
16 |
17 | );
18 | }
19 |
--------------------------------------------------------------------------------
/src/switch/_example/color.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Switch, Cell } from 'tdesign-mobile-react';
3 |
4 | export default function SwitchColor() {
5 | return (
6 | <>
7 | | }>
8 |
9 | );
10 | }
11 |
--------------------------------------------------------------------------------
/src/switch/_example/size.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Switch, Cell } from 'tdesign-mobile-react';
3 |
4 | export default function SwitchSize() {
5 | return (
6 | <>
7 | | }>
8 | | }>
9 | | }>
10 |
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/src/switch/_example/status.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Switch, Cell } from 'tdesign-mobile-react';
3 |
4 | export default function SwitchStatus() {
5 | return (
6 | <>
7 | | }>
8 | | }>
9 |
10 | 禁用状态
11 |
12 | | }>
13 | | }>
14 |
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/src/switch/_example/style/index.less:
--------------------------------------------------------------------------------
1 | .custom-color {
2 | --td-switch-checked-color: #00a870;
3 | }
4 |
5 | .t-cell + .t-cell {
6 | margin-top: 16px;
7 | }
8 |
9 | .demo__title {
10 | margin: 24px 16px 16px;
11 | color: var(--td-text-color-secondary, rgba(0, 0, 0, 0.6));
12 | font-size: 14px;
13 | line-height: 22px;
14 | }
15 |
--------------------------------------------------------------------------------
/src/switch/defaultProps.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
3 | * */
4 |
5 | import { TdSwitchProps } from './type';
6 |
7 | export const switchDefaultProps: TdSwitchProps = { disabled: undefined, label: [], loading: false, size: 'medium' };
8 |
--------------------------------------------------------------------------------
/src/switch/index.ts:
--------------------------------------------------------------------------------
1 | import _Switch from './Switch';
2 | import './style';
3 |
4 | export type { SwitchProps } from './Switch';
5 | export * from './type';
6 |
7 | export const Switch = _Switch;
8 | export default Switch;
9 |
--------------------------------------------------------------------------------
/src/switch/style/css.js:
--------------------------------------------------------------------------------
1 | import './index.css';
2 |
--------------------------------------------------------------------------------
/src/switch/style/index.js:
--------------------------------------------------------------------------------
1 | import '../../_common/style/mobile/components/switch/v2/_index.less';
2 |
--------------------------------------------------------------------------------
/src/tab-bar/_example/style/index.less:
--------------------------------------------------------------------------------
1 | .tdesign-mobile-demo {
2 | .t-tab-bar {
3 | position: relative;
4 | }
5 | .t-tab-bar + .t-tab-bar {
6 | margin-top: 16px;
7 | }
8 |
9 | .section {
10 | &-custom {
11 | --td-tab-bar-border-color: #e7e7e7;
12 | --td-tab-bar-bg-color: #eee;
13 | --td-tab-bar-hover-color: #ddd;
14 | --td-tab-bar-item-color: #bbb;
15 | --td-tab-bar-item-active-color: #333;
16 | }
17 | }
18 | }
19 |
20 | :root[theme-mode='dark'] {
21 | .tdesign-mobile-demo {
22 | .section {
23 | &-custom {
24 | --td-tab-bar-color: rgba(0, 0, 0, 0.9);
25 | }
26 | }
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/src/tab-bar/defaultProps.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
3 | * */
4 |
5 | import { TdTabBarProps } from './type';
6 |
7 | export const tabBarDefaultProps: TdTabBarProps = {
8 | bordered: true,
9 | fixed: true,
10 | safeAreaInsetBottom: true,
11 | shape: 'normal',
12 | split: true,
13 | theme: 'normal',
14 | defaultValue: undefined,
15 | };
16 |
--------------------------------------------------------------------------------
/src/tab-bar/index.ts:
--------------------------------------------------------------------------------
1 | import _TabBar from './TabBar';
2 | import _TabBarItem from './TabBarItem';
3 |
4 | import './style/index.js';
5 |
6 | export type { TabBarProps } from './TabBar';
7 | export type { TabBarItemProps } from './TabBarItem';
8 | export * from './type';
9 |
10 | export const TabBar = _TabBar;
11 | export const TabBarItem = _TabBarItem;
12 | export default {
13 | TabBar,
14 | TabBarItem,
15 | };
16 |
--------------------------------------------------------------------------------
/src/tab-bar/style/css.js:
--------------------------------------------------------------------------------
1 | import './index.css';
2 |
--------------------------------------------------------------------------------
/src/tab-bar/style/index.js:
--------------------------------------------------------------------------------
1 | import '../../_common/style/mobile/components/tab-bar/v2/_index.less';
2 | import '../../_common/style/mobile/components/tab-bar-item/v2/_index.less';
3 |
--------------------------------------------------------------------------------
/src/tab-bar/useTabBarCssTransition.ts:
--------------------------------------------------------------------------------
1 | import { useMemo } from 'react';
2 |
3 | type useTabBarCssTransitionProps = {
4 | name: string;
5 | };
6 |
7 | function useTabBarCssTransition(props: useTabBarCssTransitionProps) {
8 | const { name } = props;
9 |
10 | return useMemo(
11 | () => ({
12 | enter: `${name}-enter-from`,
13 | enterActive: `${name}-enter-active`,
14 | enterDone: `${name}-enter-active`,
15 |
16 | exit: `${name}-leave-active`,
17 | exitActive: `${name}-leave-to`,
18 | exitDone: `${name}-leave-to`,
19 | }),
20 | [name],
21 | );
22 | }
23 |
24 | export default useTabBarCssTransition;
25 |
--------------------------------------------------------------------------------
/src/table/defaultProps.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
3 | * */
4 |
5 | import { TdBaseTableProps } from './type';
6 |
7 | export const baseTableDefaultProps: TdBaseTableProps = {
8 | bordered: false,
9 | columns: [],
10 | data: [],
11 | empty: '',
12 | loading: undefined,
13 | rowKey: 'id',
14 | showHeader: true,
15 | stripe: false,
16 | tableLayout: 'fixed',
17 | verticalAlign: 'middle',
18 | };
19 |
--------------------------------------------------------------------------------
/src/table/index.tsx:
--------------------------------------------------------------------------------
1 | import { BaseTable, BaseTableProps } from './BaseTable';
2 |
3 | import './style';
4 |
5 | export type TableProps = BaseTableProps;
6 |
7 | export { BaseTable as Table };
8 |
9 | export default BaseTable;
10 |
--------------------------------------------------------------------------------
/src/table/style/css.js:
--------------------------------------------------------------------------------
1 | import './index.css';
2 |
--------------------------------------------------------------------------------
/src/table/style/index.js:
--------------------------------------------------------------------------------
1 | import '../../_common/style/mobile/components/table/_index.less';
2 |
--------------------------------------------------------------------------------
/src/tabs/_example/badge.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Tabs, TabPanel } from 'tdesign-mobile-react';
3 |
4 | export default () => (
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 | );
13 |
--------------------------------------------------------------------------------
/src/tabs/_example/status.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Tabs, TabPanel } from 'tdesign-mobile-react';
3 |
4 | export default () => (
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 | );
13 |
--------------------------------------------------------------------------------
/src/tabs/_example/style/index.less:
--------------------------------------------------------------------------------
1 | .t-tabs {
2 | margin-bottom: 16px;
3 | }
4 | .label-content {
5 | display: flex;
6 | align-items: center;
7 | justify-content: center;
8 |
9 | span {
10 | margin-left: 3px;
11 | }
12 | }
13 |
14 | .t-tabs__panel p {
15 | height: 120px;
16 | align-items: center;
17 | justify-content: center;
18 | display: flex;
19 | color: var(--td-text-color-secondary, rgba(#000000, 0.66));
20 | margin: 0;
21 | font-size: 14px;
22 | font-weight: 400;
23 | }
24 |
--------------------------------------------------------------------------------
/src/tabs/context.ts:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const TabContext = React.createContext(null);
4 |
5 | export default TabContext;
6 |
--------------------------------------------------------------------------------
/src/tabs/defaultProps.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
3 | * */
4 |
5 | import { TdTabsProps, TdTabPanelProps } from './type';
6 |
7 | export const tabsDefaultProps: TdTabsProps = {
8 | bottomLineMode: 'fixed',
9 | showBottomLine: true,
10 | size: 'medium',
11 | spaceEvenly: true,
12 | sticky: false,
13 | swipeable: true,
14 | theme: 'line',
15 | };
16 |
17 | export const tabPanelDefaultProps: TdTabPanelProps = { destroyOnHide: true, disabled: false, lazy: false };
18 |
--------------------------------------------------------------------------------
/src/tabs/index.ts:
--------------------------------------------------------------------------------
1 | import _Tabs from './Tabs';
2 | import _TabPanel from './TabPanel';
3 |
4 | import './style';
5 |
6 | export const Tabs = _Tabs;
7 | export const TabPanel = _TabPanel;
8 |
9 | export default Tabs;
10 |
--------------------------------------------------------------------------------
/src/tabs/style/css.js:
--------------------------------------------------------------------------------
1 | import './index.css';
2 |
--------------------------------------------------------------------------------
/src/tabs/style/index.js:
--------------------------------------------------------------------------------
1 | import '../../_common/style/mobile/components/tabs/v2/_index.less';
2 |
--------------------------------------------------------------------------------
/src/tag/defaultProps.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
3 | * */
4 |
5 | import { TdTagProps, TdCheckTagProps } from './type';
6 |
7 | export const tagDefaultProps: TdTagProps = {
8 | closable: false,
9 | disabled: false,
10 | icon: undefined,
11 | shape: 'square',
12 | size: 'medium',
13 | theme: 'default',
14 | variant: 'dark',
15 | };
16 |
17 | export const checkTagDefaultProps: TdCheckTagProps = {
18 | defaultChecked: undefined,
19 | closable: false,
20 | disabled: false,
21 | shape: 'square',
22 | size: 'medium',
23 | variant: 'dark',
24 | };
25 |
--------------------------------------------------------------------------------
/src/tag/index.ts:
--------------------------------------------------------------------------------
1 | import _Tag from './Tag';
2 | import _CheckTag from './CheckTag';
3 |
4 | import './style/index.js';
5 |
6 | export type { TagProps } from './Tag';
7 | export * from './type';
8 |
9 | export const Tag = _Tag;
10 | export const TagCheck = _CheckTag;
11 | export default {
12 | Tag,
13 | TagCheck,
14 | };
15 |
--------------------------------------------------------------------------------
/src/tag/style/css.js:
--------------------------------------------------------------------------------
1 | import './index.css';
2 |
--------------------------------------------------------------------------------
/src/tag/style/index.js:
--------------------------------------------------------------------------------
1 | import '../../_common/style/mobile/components/tag/v2/_index.less';
2 |
--------------------------------------------------------------------------------
/src/textarea/_example/autosize.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Textarea } from 'tdesign-mobile-react';
3 |
4 | export default function Autosize() {
5 | return ;
6 | }
7 |
--------------------------------------------------------------------------------
/src/textarea/_example/custom.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Textarea } from 'tdesign-mobile-react';
3 |
4 | export default function Events() {
5 | return (
6 | <>
7 |
8 | 标签文字
9 |
10 |
11 |
12 | );
13 | }
14 |
--------------------------------------------------------------------------------
/src/textarea/_example/disable.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Textarea } from 'tdesign-mobile-react';
3 |
4 | export default function Type() {
5 | return (
6 |
7 | );
8 | }
9 |
--------------------------------------------------------------------------------
/src/textarea/_example/label.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Textarea } from 'tdesign-mobile-react';
3 |
4 | export default function Base() {
5 | return ;
6 | }
7 |
--------------------------------------------------------------------------------
/src/textarea/_example/maxcharacter.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import { Textarea } from 'tdesign-mobile-react';
3 | import type { TextareaProps } from 'tdesign-mobile-react';
4 |
5 | export default function Maxlength() {
6 | const [value, onChange] = useState('');
7 | return (
8 |