(value: T) => {
4 | const ref = React.useRef(value);
5 | ref.current = value;
6 |
7 | return ref;
8 | };
9 |
10 | export default useLatest;
11 |
--------------------------------------------------------------------------------
/packages/hooks/useLockFn.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const useLockFn = (fn: (...args: P) => Promise) => {
4 | const lockRef = React.useRef(false);
5 |
6 | return React.useCallback(
7 | async (...args: P) => {
8 | if (lockRef.current) return;
9 |
10 | lockRef.current = true;
11 |
12 | try {
13 | const ret = await fn(...args);
14 | lockRef.current = false;
15 | return ret;
16 | } catch (e) {
17 | lockRef.current = false;
18 | throw e;
19 | }
20 | },
21 | [fn]
22 | );
23 | };
24 |
25 | export default useLockFn;
26 |
--------------------------------------------------------------------------------
/packages/hooks/useMemoizedFn.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import useLatest from '@/hooks/useLatest';
4 |
5 | const useMemoizedFn = (fn: (...args: unknown[]) => void) => {
6 | const latestfnRef = useLatest(fn);
7 |
8 | const memoizedFn = React.useRef((...args: unknown[]) => {
9 | latestfnRef.current?.(...args);
10 | });
11 |
12 | return memoizedFn.current;
13 | };
14 |
15 | export default useMemoizedFn;
16 |
--------------------------------------------------------------------------------
/packages/hooks/useMount.tsx:
--------------------------------------------------------------------------------
1 | import useEffectOnce from '@/hooks/useEffectOnce';
2 |
3 | const useMount = (fn: () => void) => {
4 | useEffectOnce(() => {
5 | fn();
6 | });
7 | };
8 |
9 | export default useMount;
10 |
--------------------------------------------------------------------------------
/packages/hooks/useReadLocalStorage.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | type Value = T | null;
4 |
5 | const useReadLocalStorage = (key: string): Value => {
6 | const readValue = React.useCallback((): Value => {
7 | if (typeof window === 'undefined') {
8 | return null;
9 | }
10 |
11 | try {
12 | const item = window.localStorage.getItem(key);
13 | return item ? (JSON.parse(item) as T) : null;
14 | } catch (err) {
15 | console.warn(`Error reading localStorage key "${key}":`, err);
16 | return null;
17 | }
18 | }, [key]);
19 |
20 | const [storedValue, setStoredValue] = React.useState>(readValue);
21 |
22 | const handleStorageChange = React.useCallback(
23 | (event: StorageEvent) => {
24 | if (event.key !== key) {
25 | return;
26 | }
27 | setStoredValue(readValue());
28 | },
29 | [key, readValue]
30 | );
31 |
32 | React.useEffect(() => {
33 | window.addEventListener('storage', handleStorageChange);
34 |
35 | return () => {
36 | window.removeEventListener('storage', handleStorageChange);
37 | };
38 | }, [handleStorageChange]);
39 |
40 | return storedValue;
41 | };
42 |
43 | export default useReadLocalStorage;
44 |
--------------------------------------------------------------------------------
/packages/hooks/useResizeObserver.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import useIsomorphicLayoutEffect from '@/hooks/useIsomorphicLayoutEffect';
4 |
5 | const useResizeObserver = (callback: (target: T) => void, targetRef: React.RefObject) => {
6 | useIsomorphicLayoutEffect(() => {
7 | const element = targetRef.current;
8 | if (!element) return;
9 |
10 | if (window.ResizeObserver) {
11 | const observer = new ResizeObserver(() => {
12 | callback(element);
13 | });
14 | observer.observe(element);
15 | return () => {
16 | observer.disconnect();
17 | };
18 | }
19 | callback(element);
20 |
21 | return () => null;
22 | }, []);
23 | };
24 |
25 | export default useResizeObserver;
26 |
--------------------------------------------------------------------------------
/packages/hooks/useScrollLock.tsx:
--------------------------------------------------------------------------------
1 | import useIsomorphicLayoutEffect from '@/hooks/useIsomorphicLayoutEffect';
2 |
3 | const useScrollLock = (visible: boolean) => {
4 | useIsomorphicLayoutEffect(() => {
5 | if (!visible) return;
6 |
7 | const el = document.getElementsByTagName('html')[0];
8 | el.style.overflow = 'hidden';
9 |
10 | return () => {
11 | el.style.overflow = '';
12 | };
13 | }, [visible]);
14 | };
15 |
16 | export default useScrollLock;
17 |
--------------------------------------------------------------------------------
/packages/hooks/useThrottleFn.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import useLatest from '@/hooks/useLatest';
3 | import useUnmount from '@/hooks/useUnmount';
4 |
5 | const useThrottleFn = (fn: (...args: any[]) => any, ms: number) => {
6 | const timerRef = React.useRef>();
7 | const fnRef = useLatest(fn);
8 |
9 | const timeoutCallback = React.useCallback(() => {
10 | fnRef.current();
11 | timerRef.current = undefined;
12 | }, []);
13 |
14 | React.useEffect(() => {
15 | if (!timerRef.current) {
16 | timerRef.current = setTimeout(timeoutCallback, ms);
17 | }
18 | }, [ms, timeoutCallback]);
19 |
20 | useUnmount(() => {
21 | timerRef.current && clearTimeout(timerRef.current);
22 | });
23 |
24 | return {};
25 | };
26 |
27 | export default useThrottleFn;
28 |
--------------------------------------------------------------------------------
/packages/hooks/useUnmount.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import useEffectOnce from '@/hooks/useEffectOnce';
3 |
4 | const useUnmount = (fn: () => any) => {
5 | const fnRef = React.useRef(fn);
6 |
7 | fnRef.current = fn;
8 |
9 | useEffectOnce(() => () => fnRef.current());
10 | };
11 |
12 | export default useUnmount;
13 |
--------------------------------------------------------------------------------
/packages/hooks/useUpdateEffect.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const useUpdateEffect = (callback: React.EffectCallback, deep?: React.DependencyList) => {
4 | const isMounted = React.useRef(false);
5 |
6 | React.useEffect(() => {
7 | return () => {
8 | isMounted.current = false;
9 | };
10 | }, []);
11 |
12 | React.useEffect(() => {
13 | if (!isMounted.current) {
14 | isMounted.current = true;
15 | } else {
16 | callback();
17 | }
18 | // eslint-disable-next-line react-hooks/exhaustive-deps
19 | }, deep);
20 | };
21 |
22 | export default useUpdateEffect;
23 |
--------------------------------------------------------------------------------
/packages/hooks/useUpdateIsomorphicLayoutEffect.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import useIsomorphicLayoutEffect from '@/hooks/useIsomorphicLayoutEffect';
4 |
5 | const useUpdateIsomorphicLayoutEffect = (callback: React.EffectCallback, deep?: React.DependencyList) => {
6 | const isMounted = React.useRef(false);
7 |
8 | useIsomorphicLayoutEffect(() => {
9 | return () => {
10 | isMounted.current = false;
11 | };
12 | }, []);
13 |
14 | useIsomorphicLayoutEffect(() => {
15 | if (!isMounted.current) {
16 | isMounted.current = true;
17 | } else {
18 | callback();
19 | }
20 | }, deep);
21 | };
22 |
23 | export default useUpdateIsomorphicLayoutEffect;
24 |
--------------------------------------------------------------------------------
/packages/image/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import useIntersectionObserver from '@/hooks/useIntersectionObserver';
3 |
4 | export interface ImageProps {
5 | /** 图片地址 */
6 | src: string;
7 | /** 图片描述 */
8 | alt?: string;
9 | /** 图片宽度 */
10 | width?: number | string;
11 | /** 图片高度 */
12 | height?: number | string;
13 | /** 加载时的占位图地址 */
14 | loading?: string;
15 | style?: React.CSSProperties;
16 | /** 是否懒加载 */
17 | lazy?: boolean;
18 | /** 图片填充模式 */
19 | fit?: 'contain' | 'cover' | 'fill' | 'scale-down';
20 | className?: string;
21 | /** 图片点击事件 */
22 | onClick?: (event: React.MouseEvent) => void;
23 | /** 图片加载失败时回调 */
24 | onError?: (event: React.SyntheticEvent) => void;
25 | /** 图片加载完成时回调 */
26 | onLoad?: (event: React.SyntheticEvent) => void;
27 | }
28 |
29 | const Image: React.FC = (props) => {
30 | const imageRef = React.useRef(null);
31 | const observerEntry = useIntersectionObserver(imageRef, { freezeOnceVisible: true });
32 |
33 | return (
34 | 
47 | );
48 | };
49 |
50 | Image.defaultProps = {
51 | alt: '',
52 | width: '100%',
53 | height: '100%',
54 | lazy: false,
55 | fit: 'fill',
56 | loading:
57 | 'data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mM8/x8AAqMB0Fk+W34AAAAASUVORK5CYII=',
58 | };
59 |
60 | Image.displayName = 'Image';
61 |
62 | export default Image;
63 |
--------------------------------------------------------------------------------
/packages/index.tsx:
--------------------------------------------------------------------------------
1 | import './styles/index.scss';
2 |
3 | export { default as Button } from '@/button';
4 | export type { ButtonProps } from '@/button';
5 |
6 | export { default as Mask } from '@/mask';
7 | export type { MaskProps } from '@/mask';
8 |
9 | export { default as Popup } from '@/popup';
10 | export type { PopupProps } from '@/popup';
11 |
12 | export { default as Toast } from '@/toast';
13 | export type { ToastProps, ToastShowProps } from '@/toast';
14 |
15 | export { default as SpinnerLoading } from '@/spinner-loading';
16 | export type { SpinnerLoadingProps } from '@/spinner-loading';
17 |
18 | export { default as NavBar } from '@/nav-bar';
19 | export type { NavBarProps } from '@/nav-bar';
20 |
21 | export { default as Card } from '@/card';
22 | export type { CardProps } from '@/card';
23 |
24 | export { default as Image } from '@/image';
25 | export type { ImageProps } from '@/image';
26 |
27 | export { default as Countdown } from '@/countdown';
28 | export type { CountdownProps } from '@/countdown';
29 |
30 | export { default as PullToRefresh } from '@/pull-to-refresh';
31 | export type { PullToRefreshProps } from '@/pull-to-refresh';
32 |
33 | export { default as Space } from '@/space';
34 | export type { SpaceProps } from '@/space';
35 |
36 | export { default as Tabs } from '@/tabs';
37 | export type { TabsProps, TabProps } from '@/tabs';
38 |
39 | export { default as Swiper } from '@/swiper';
40 | export type { SwiperProps, SwiperItemProps, SwiperRef } from '@/swiper';
41 |
42 | export { default as Grid } from '@/grid';
43 | export type { GridProps, GridItemProps } from '@/grid';
44 |
45 | export type { ErrorBlockProps } from '@/error-block';
46 | export { default as ErrorBlock } from '@/error-block';
47 |
48 | export type { InputProps, InputRef } from '@/input';
49 | export { default as Input } from '@/input';
50 |
51 | export type { SidebarProps } from '@/sidebar';
52 | export { default as Sidebar } from '@/sidebar';
53 |
54 | export type { SearchBarProps, SearchBarRef } from '@/search-bar';
55 | export { default as SearchBar } from '@/search-bar';
56 |
57 | export type { ActionSheetProps, Action } from '@/action-sheet';
58 | export { default as ActionSheet } from '@/action-sheet';
59 |
60 | export type { InfiniteScrollProps } from '@/infinite-scroll';
61 | export { default as InfiniteScroll } from '@/infinite-scroll';
62 |
63 | export type { CellGroupProps, CellProps } from '@/cell';
64 | export { default as Cell } from '@/cell';
65 |
66 | export type { EllipsisProps } from '@/ellipsis';
67 | export { default as Ellipsis } from '@/ellipsis';
68 |
69 | export type { SelectorProps } from '@/selector';
70 | export { default as Selector } from '@/selector';
71 |
72 | export type { SliderProps, SliderRef } from '@/slider';
73 | export { default as Slider } from '@/slider';
74 |
75 | export type { DialogProps, DialogAlertProps } from '@/dialog';
76 | export { default as Dialog } from '@/dialog';
77 |
78 | export type { DividerProps } from '@/divider';
79 | export { default as Divider } from '@/divider';
80 |
81 | export { default as hooks } from '@/hooks';
82 |
--------------------------------------------------------------------------------
/packages/infinite-scroll/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Loading from '@/spinner-loading';
3 |
4 | import useIntersectionObserver from '@/hooks/useIntersectionObserver';
5 | import useLockFn from '@/hooks/useLockFn';
6 |
7 | import './styles/index.scss';
8 |
9 | export interface InfiniteScrollProps {
10 | /** 是否加载更多 */
11 | hasMore: boolean;
12 | /** 加载数据方法 */
13 | loadMore: () => Promise;
14 | /** 自定义底部样式 */
15 | footer?: React.ReactNode;
16 | children: React.ReactNode;
17 | }
18 |
19 | const classPrefix = `ygm-infinite-scroll`;
20 |
21 | const InfiniteScroll: React.FC = React.memo((props) => {
22 | const doLoadMore = useLockFn(() => props.loadMore());
23 |
24 | const intersectionEleRef = React.useRef(null);
25 |
26 | const observerEntry = useIntersectionObserver(intersectionEleRef, {});
27 |
28 | const check = React.useCallback(async () => {
29 | if (!observerEntry?.isIntersecting) return;
30 | if (!props.hasMore) return;
31 |
32 | await doLoadMore();
33 | }, [doLoadMore, observerEntry?.isIntersecting, props.hasMore]);
34 |
35 | React.useEffect(() => {
36 | check();
37 | }, [check]);
38 |
39 | return (
40 |
41 | {props.children}
42 |
43 |
44 | {props.footer && props.footer}
45 | {!props.footer && (props.hasMore ? : '')}
46 |
47 |
89 |
{
113 | setValue(e.target.value);
114 | props.onChange?.(e.target.value);
115 | }}
116 | onFocus={props.onFocus}
117 | onBlur={props.onBlur}
118 | />
119 |
120 | {showClearable && (
121 |
{
124 | e.preventDefault();
125 | }}
126 | onClick={() => {
127 | setValue('');
128 | props.onClear?.();
129 | }}
130 | >
131 |
132 |
133 | )}
134 |
27 |
28 | {props.leftArrow && (
29 |
30 |
31 |
32 | )}
33 |
{props.leftText}
34 |
35 |
{props.children}
36 |
{props.right}
37 |
72 | {props.mask &&
}
73 |
74 |
{
79 | if (props.position === 'bottom') {
80 | return `translate(0, ${v}%)`;
81 | }
82 | if (props.position === 'left') {
83 | return `translate(-${v}%, 0)`;
84 | }
85 | if (props.position === 'right') {
86 | return `translate(${v}%, 0)`;
87 | }
88 | if (props.position === 'top') {
89 | return `translate(0, -${v}%)`;
90 | }
91 | return 'none';
92 | }),
93 | }}
94 | >
95 | {props.children}
96 |
97 |
123 |
124 |
125 | {renderStatusText()}
126 |
127 |
{props.children}
128 |
129 |
71 |
72 |
{props.icon}
73 |
{
88 | composingRef.current = true;
89 | }}
90 | onCompositionEnd={() => {
91 | composingRef.current = false;
92 | }}
93 | />
94 |
95 | {props.showCancel && (
96 |
97 | {props.cancelText}
98 |
99 | )}
100 |
77 | {option.label}
78 | {option.description &&
{option.description}
}
79 |
80 | {active && props.showCheckMark && (
81 |
82 |
83 |
84 | )}
85 |
91 | {!props.columns ? (
92 |
93 | {items}
94 |
95 | ) : (
96 |
97 | {items}
98 |
99 | )}
100 |
101 | );
102 | };
103 |
104 | Selector.displayName = 'Selector';
105 |
106 | Selector.defaultProps = {
107 | value: [],
108 | gap: 8,
109 | showCheckMark: true,
110 | };
111 | export default Selector;
112 |
--------------------------------------------------------------------------------
/packages/selector/styles/index.scss:
--------------------------------------------------------------------------------
1 | $class-prefix-selector: 'ygm-selector';
2 |
3 | .#{$class-prefix-selector} {
4 | --color: #f5f5f5;
5 | --checked-color: #e7f1ff;
6 | --text-color: var(--ygm-color-text);
7 | --checked-text-color: var(--ygm-color-primary);
8 | --padding: 8px 16px;
9 | --border-radius: 2px;
10 | --border: none;
11 | --checked-border: none;
12 |
13 | overflow: hidden;
14 | font-size: var(--ygm-font-size-m);
15 | user-select: none;
16 | line-height: 1.4;
17 |
18 | &-item {
19 | position: relative;
20 | padding: var(--padding);
21 | background-color: var(--color);
22 | border: var(--border);
23 | border-radius: var(--border-radius);
24 | color: var(--text-color);
25 | display: inline-block;
26 | text-align: center;
27 | overflow: hidden;
28 | vertical-align: top;
29 | cursor: pointer;
30 | opacity: 1;
31 |
32 | &-active {
33 | color: var(--checked-text-color);
34 | background-color: var(--checked-color);
35 | border: var(--checked-border);
36 | }
37 |
38 | &-disabled {
39 | cursor: not-allowed;
40 | opacity: 0.4;
41 | }
42 |
43 | &-description {
44 | font-size: var(--ygm-font-size-s);
45 | color: var(--ygm-color-weak);
46 | }
47 |
48 | .#{$class-prefix-selector}-check-mark {
49 | position: absolute;
50 | right: 0;
51 | bottom: 0;
52 | width: 0;
53 | height: 0;
54 | border-top: solid 8px transparent;
55 | border-bottom: solid 8px var(--ygm-color-primary);
56 | border-left: solid 10px transparent;
57 | border-right: solid 10px var(--ygm-color-primary);
58 |
59 | > svg {
60 | position: absolute;
61 | left: 0;
62 | top: 0;
63 | height: 6px;
64 | width: 8px;
65 | }
66 | }
67 | }
68 | }
69 |
--------------------------------------------------------------------------------
/packages/sidebar/index.tsx:
--------------------------------------------------------------------------------
1 | import InternalSidebar from '@/sidebar/sidebar';
2 | import SidebarItem from '@/sidebar/sidebar-item';
3 |
4 | export type { SidebarProps } from '@/sidebar/sidebar';
5 | export type { SidebarItemProps } from '@/sidebar/sidebar-item';
6 |
7 | type InternalSidebarType = typeof InternalSidebar;
8 |
9 | export interface SidebarInterface extends InternalSidebarType {
10 | Item: typeof SidebarItem;
11 | }
12 |
13 | const Sidebar = InternalSidebar as SidebarInterface;
14 |
15 | Sidebar.Item = SidebarItem;
16 |
17 | export default Sidebar;
18 |
--------------------------------------------------------------------------------
/packages/sidebar/sidebar-item.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export interface SidebarItemProps {
4 | key: string;
5 | title: React.ReactNode;
6 | children: React.ReactNode;
7 | }
8 |
9 | const SidebarItem: React.FC = (props) => {
10 | return props.children ? (props.children as React.ReactElement) : null;
11 | };
12 |
13 | SidebarItem.displayName = 'SidebarItem';
14 |
15 | export default SidebarItem;
16 |
--------------------------------------------------------------------------------
/packages/sidebar/sidebar.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import cx from 'classnames';
3 |
4 | import SidebarItem from '@/sidebar/sidebar-item';
5 | import { traverseReactNode } from '@/utils/traverse-react-node';
6 |
7 | import './styles/index.scss';
8 |
9 | export interface SidebarProps {
10 | /** 当前激活side item面板的key */
11 | activeKey: string;
12 | /** 点击side item切换后回调 */
13 | onChange?: (key: string) => void;
14 | children?: React.ReactNode;
15 | /** 基本样式 */
16 | style?: React.CSSProperties &
17 | Partial<
18 | Record<'--width' | '--height' | '--background-color' | '--content-padding' | '--sidebar-item-padding', string>
19 | >;
20 | }
21 |
22 | const classPrefix = `ygm-sidebar`;
23 |
24 | const Sidebar: React.FC = React.memo((props) => {
25 | const [activeKey, setActiveKey] = React.useState(props.activeKey);
26 |
27 | const items: React.ReactElement>[] = [];
28 |
29 | traverseReactNode(props.children, (child) => {
30 | if (!React.isValidElement(child)) return;
31 | if (!child.key) return;
32 | items.push(child);
33 | });
34 |
35 | const onSetActive = (e: React.MouseEvent) => {
36 | const key = (e.target as HTMLElement).dataset['key'];
37 | setActiveKey(key as string);
38 | props.onChange?.(key as string);
39 | };
40 |
41 | return (
42 |
43 |
44 | {items.map((item) => {
45 | const active = item.key === activeKey;
46 | return (
47 |
55 |
56 | {item.props.title}
57 |
58 |
59 | );
60 | })}
61 |
62 |
63 |
64 | {items.map((item) => (
65 |
70 | {item.props.children}
71 |
72 | ))}
73 |
74 |
55 | {React.Children.map(props.children, (child) => {
56 | return child !== null && child !== undefined &&
{child}
;
57 | })}
58 |
13 | {props.children}
14 |
15 | );
16 | });
17 |
18 | SwiperItem.displayName = 'SwiperItem';
19 |
20 | export default SwiperItem;
21 |
--------------------------------------------------------------------------------
/packages/swiper/swiper-page-indicator.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import cx from 'classnames';
3 |
4 | import './styles/swiper-page-indicator.scss';
5 |
6 | export interface SwiperPageIndicatorProps {
7 | current: number;
8 | total: number;
9 | indicatorClassName?: string;
10 | }
11 |
12 | const classPrefix = 'ygm-swiper-page-indicator';
13 |
14 | const SwiperPageIndicator: React.FC = React.memo((props) => {
15 | const dots: React.ReactElement[] = React.useMemo(() => {
16 | return Array(props.total)
17 | .fill(0)
18 | .map((_, index) => (
19 |
25 | ));
26 | }, [props]);
27 |
28 | return {dots}
;
29 | });
30 |
31 | SwiperPageIndicator.displayName = 'SwiperPageIndicator';
32 |
33 | export default SwiperPageIndicator;
34 |
--------------------------------------------------------------------------------
/packages/swiper/utils.ts:
--------------------------------------------------------------------------------
1 | export const modulus = (value: number, division: number) => {
2 | const remainder = value % division;
3 | return remainder < 0 ? remainder + division : remainder;
4 | };
5 |
--------------------------------------------------------------------------------
/packages/tabs/index.tsx:
--------------------------------------------------------------------------------
1 | import InternalTabs from '@/tabs/tabs';
2 | import Tab from '@/tabs/tab';
3 |
4 | export type { TabsProps } from '@/tabs/tabs';
5 | export type { TabProps } from '@/tabs/tab';
6 |
7 | type InternalTabsType = typeof InternalTabs;
8 |
9 | export interface TabsInterface extends InternalTabsType {
10 | Tab: typeof Tab;
11 | }
12 |
13 | const Tabs = InternalTabs as TabsInterface;
14 |
15 | Tabs.Tab = Tab;
16 |
17 | export default Tabs;
18 |
--------------------------------------------------------------------------------
/packages/tabs/styles/index.scss:
--------------------------------------------------------------------------------
1 | $class-prefix-tabs: 'ygm-tabs';
2 |
3 | .#{$class-prefix-tabs} {
4 | position: relative;
5 | user-select: none;
6 |
7 | &-tab-list {
8 | display: flex;
9 | flex-wrap: nowrap;
10 | justify-content: flex-start;
11 | align-items: center;
12 | position: relative;
13 | overflow-x: scroll;
14 | scrollbar-width: none;
15 | &::-webkit-scrollbar {
16 | display: none;
17 | }
18 |
19 | &-card {
20 | .#{$class-prefix-tabs}-tab-active {
21 | background: var(--ygm-color-primary);
22 |
23 | .#{$class-prefix-tabs}-tab-title {
24 | color: var(--ygm-color-white);
25 | }
26 | }
27 | }
28 |
29 | &-card {
30 | background-color: var(--ygm-color-border);
31 | .#{$class-prefix-tabs}-tab-title {
32 | color: var(--ygm-color-weak);
33 | }
34 | }
35 | }
36 |
37 | &-tab {
38 | flex: auto;
39 | padding: 0 12px;
40 | box-sizing: border-box;
41 |
42 | &-title {
43 | margin: auto;
44 | font-size: var(--ygm-font-size-m);
45 | white-space: nowrap;
46 | width: min-content;
47 | position: relative;
48 | padding: 8px 0 10px;
49 | }
50 |
51 | &-active {
52 | .#{$class-prefix-tabs}-tab-title {
53 | color: var(--ygm-color-primary);
54 | }
55 | }
56 | }
57 |
58 | &-tab-line {
59 | position: absolute;
60 | bottom: 0;
61 | height: 2px;
62 | background: var(--ygm-color-primary);
63 | border-radius: 2px;
64 | }
65 |
66 | &-content {
67 | padding: var(--ygm-padding-m);
68 | }
69 | }
70 |
--------------------------------------------------------------------------------
/packages/tabs/tab.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export interface TabProps {
4 | key: string;
5 | title: string;
6 | children?: React.ReactNode;
7 | }
8 |
9 | const Tab: React.FC = (props) => {
10 | return props.children ? (props.children as React.ReactElement) : null;
11 | };
12 |
13 | Tab.displayName = 'Tab';
14 |
15 | export default Tab;
16 |
--------------------------------------------------------------------------------
/packages/tabs/tabs.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import cx from 'classnames';
3 |
4 | import Tab from '@/tabs/tab';
5 | import useIsomorphicLayoutEffect from '@/hooks/useIsomorphicLayoutEffect';
6 | import useUpdateIsomorphicLayoutEffect from '@/hooks/useUpdateIsomorphicLayoutEffect';
7 |
8 | import { traverseReactNode } from '@/utils/traverse-react-node';
9 |
10 | import './styles/index.scss';
11 |
12 | export interface TabsProps {
13 | /** 当前激活tab面板的key */
14 | activeKey: string;
15 | children?: React.ReactNode;
16 | /** 是否显示tab下划线 */
17 | showTabLine?: boolean;
18 | /** tab展示形式 */
19 | type?: 'line' | 'card';
20 | /** 点击tab切换后回调 */
21 | onChange?: (key: string) => void;
22 | /** 激活的tab样式 */
23 | tabActiveClassName?: string;
24 | /** tab列表样式 */
25 | tabListClassName?: string;
26 | /** tab内容样式 */
27 | tabContentClassName?: string;
28 | }
29 |
30 | const classPrefix = 'ygm-tabs';
31 |
32 | const Tabs: React.FC = (props) => {
33 | const [activeKey, setActiveKey] = React.useState(props.activeKey);
34 | const [activeLineStyle, setActiveLineStyle] = React.useState({
35 | width: 0,
36 | transform: `translate3d(0px, 0px, 0px)`,
37 | transitionDuration: '0',
38 | });
39 | const tabListRef = React.useRef(null);
40 |
41 | const keyToIndexRecord: Record = React.useMemo(() => ({}), []);
42 | const panes: React.ReactElement>[] = [];
43 |
44 | traverseReactNode(props.children, (child) => {
45 | if (!React.isValidElement(child)) return;
46 | if (!child.key) return;
47 | const length = panes.push(child);
48 | keyToIndexRecord[child.key] = length - 1;
49 | });
50 |
51 | const onTab = React.useCallback(
52 | (e: React.MouseEvent) => {
53 | const key = (e.target as HTMLElement).dataset['key'] as string;
54 | setActiveKey(key);
55 | props?.onChange?.(key);
56 | },
57 | [props?.onChange]
58 | );
59 |
60 | const calculateLineWidth = React.useCallback(
61 | (immediate = false) => {
62 | if (!props.showTabLine) return;
63 | const tabListEle = tabListRef.current;
64 | if (!tabListEle) return;
65 | const activeIndex = keyToIndexRecord[activeKey];
66 | const activeTabWrapper = tabListRef.current.children.item(activeIndex + 1) as HTMLDivElement;
67 | const activeTab = activeTabWrapper.children.item(0) as HTMLDivElement;
68 | const activeTabWidth = activeTab.offsetWidth;
69 | const activeTabLeft = activeTab.offsetLeft;
70 | const width = activeTabWidth;
71 | const x = activeTabLeft;
72 |
73 | setActiveLineStyle({
74 | width,
75 | transform: `translate3d(${x}px, 0px, 0px)`,
76 | transitionDuration: immediate ? '0ms' : '300ms',
77 | });
78 | },
79 | [activeKey, keyToIndexRecord, props.showTabLine]
80 | );
81 |
82 | useIsomorphicLayoutEffect(() => {
83 | calculateLineWidth(true);
84 | }, []);
85 |
86 | useUpdateIsomorphicLayoutEffect(() => {
87 | calculateLineWidth();
88 | }, [calculateLineWidth]);
89 |
90 | React.useEffect(() => {
91 | window.addEventListener('resize', () => calculateLineWidth(true));
92 |
93 | return () => window.removeEventListener('resize', () => calculateLineWidth(true));
94 | }, [calculateLineWidth]);
95 |
96 | return (
97 |
98 |
104 | {props.showTabLine && (
105 |
111 | )}
112 | {panes.map((item) => (
113 |
121 |
122 | {item.props.title}
123 |
124 |
125 | ))}
126 |
127 |
128 | {panes.map(
129 | (child) =>
130 | child.props.children && (
131 |
136 | {child}
137 |
138 | )
139 | )}
140 |
58 |
59 | {iconElement &&
{iconElement}
}
60 |
{content}
61 |
62 |
内容 |
22 |
23 | 内容
24 | |
25 |
26 |
27 |
28 | 内容 |
29 |
30 | 内容
31 | |
32 |
33 |
34 |
35 | | }>
36 | 内容
37 |
38 | | } />
39 |
40 |
41 |
42 |
43 | 内容
44 | |
45 | |
46 |
47 |
48 |
49 | );
50 | };
51 |
52 | Basic.storyName = '基本用法';
53 |
54 | export default CellStory;
55 |
--------------------------------------------------------------------------------
/stories/countdown/index.scss:
--------------------------------------------------------------------------------
1 | .demo-countdown-num {
2 | color: #fff;
3 | width: 16px;
4 | height: 16px;
5 | border-radius: 2px;
6 | display: flex;
7 | align-items: center;
8 | justify-content: center;
9 | box-sizing: border-box;
10 | background: #ee0a24;
11 | padding: 10px;
12 | }
13 |
14 | .demo-countdown-symbol {
15 | color: #ee0a24;
16 | height: 14px;
17 | margin: 0 2px;
18 | vertical-align: middle;
19 | display: inline-block;
20 | }
21 |
--------------------------------------------------------------------------------
/stories/countdown/index.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Meta } from '@storybook/react';
3 |
4 | import Countdown from '@/countdown';
5 |
6 | import DemoWrap from '../../demos/demo-wrap';
7 | import DemoBlock from '../../demos/demo-block';
8 |
9 | import './index.scss';
10 |
11 | const CountdownStory: Meta = {
12 | title: '信息展示/Countdown 倒计时',
13 | component: Countdown,
14 | };
15 |
16 | export const Basic = () => {
17 | return (
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
34 |
35 |
36 | );
37 | };
38 |
39 | Basic.storyName = '基本用法';
40 |
41 | export default CountdownStory;
42 |
--------------------------------------------------------------------------------
/stories/dialog/index.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Meta } from '@storybook/react';
3 |
4 | import Dialog from '@/dialog';
5 | import Button from '@/button';
6 | import Space from '@/space';
7 |
8 | import DemoWrap from '../../demos/demo-wrap';
9 | import DemoBlock from '../../demos/demo-block';
10 | import { sleep } from '@/pull-to-refresh/utils';
11 |
12 | const DialogStory: Meta = {
13 | title: '反馈/Dialog 弹出框',
14 | component: Dialog,
15 | };
16 |
17 | export const Basic = () => {
18 | const [visible1, setVisible1] = React.useState(false);
19 |
20 | return (
21 |
22 |
23 |
24 |
25 |
30 |
31 |
32 |
33 |
34 |
35 |
48 |
49 |
50 |
51 |
52 |
53 |
72 |
73 | );
74 | };
75 |
76 | Basic.storyName = '基本用法';
77 |
78 | export default DialogStory;
79 |
--------------------------------------------------------------------------------
/stories/divider/index.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import { Meta } from '@storybook/react';
4 |
5 | import Divider from '@/divider';
6 |
7 | import DemoWrap from '../../demos/demo-wrap';
8 | import DemoBlock from '../../demos/demo-block';
9 |
10 | const GridStory: Meta = {
11 | title: '布局/Divider 分割线',
12 | component: Divider,
13 | };
14 |
15 | export const Basic = () => {
16 | return (
17 |
18 |
19 |
20 |
21 |
22 |
23 | 文字
24 |
25 |
26 |
27 | 左侧内容位置
28 | 右侧内容位置
29 |
30 |
31 |
32 | 虚线Divider
33 |
34 |
35 |
36 |
37 | 自定义样式
38 |
39 |
40 |
41 |
42 | <>
43 | Text
44 |
45 | Link
46 |
47 | Link
48 |
49 |
50 |
51 | );
52 | };
53 |
54 | Basic.storyName = '基本用法';
55 |
56 | export default GridStory;
57 |
--------------------------------------------------------------------------------
/stories/ellipsis/index.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Meta } from '@storybook/react';
3 |
4 | import Ellipsis from '@/ellipsis';
5 |
6 | import DemoWrap from '../../demos/demo-wrap';
7 | import DemoBlock from '../../demos/demo-block';
8 |
9 | const EllipsisStory: Meta = {
10 | title: '信息展示/Ellipsis 文本省略',
11 | component: Ellipsis,
12 | };
13 |
14 | export const Basic = () => {
15 | return (
16 |
17 |
18 |
19 |
20 |
21 |
22 |
26 |
27 |
28 |
29 |
34 |
35 |
36 |
37 |
41 |
42 |
43 | );
44 | };
45 |
46 | Basic.storyName = '基本用法';
47 |
48 | export default EllipsisStory;
49 |
--------------------------------------------------------------------------------
/stories/error-block/index.scss:
--------------------------------------------------------------------------------
1 | .demo-block-content {
2 | .ygm-error-block {
3 | height: 100%;
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/stories/error-block/index.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Meta } from '@storybook/react';
3 |
4 | import ErrorBlock from '@/error-block';
5 |
6 | import DemoWrap from '../../demos/demo-wrap';
7 | import DemoBlock from '../../demos/demo-block';
8 |
9 | import './index.scss';
10 |
11 | const ErrorStory: Meta = {
12 | title: '反馈/ErrorBlock 异常',
13 | component: ErrorBlock,
14 | };
15 |
16 | export const Basic = () => {
17 | return (
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 | );
32 | };
33 |
34 | Basic.storyName = '基本用法';
35 |
36 | export default ErrorStory;
37 |
--------------------------------------------------------------------------------
/stories/grid/index.scss:
--------------------------------------------------------------------------------
1 | .grid-demo-item-block {
2 | border: solid 1px #999999;
3 | background: var(--ygm-color-box);
4 | text-align: center;
5 | color: #999999;
6 | height: 100%;
7 | }
8 |
--------------------------------------------------------------------------------
/stories/grid/index.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import { Meta } from '@storybook/react';
4 |
5 | import Grid from '@/grid';
6 |
7 | import DemoWrap from '../../demos/demo-wrap';
8 | import DemoBlock from '../../demos/demo-block';
9 |
10 | import './index.scss';
11 |
12 | const GridStory: Meta = {
13 | title: '布局/Grid 栅格',
14 | component: Grid,
15 | };
16 |
17 | export const Basic = () => {
18 | return (
19 |
20 |
21 |
22 |
23 | A
24 |
25 |
26 | B
27 |
28 |
29 | C
30 |
31 |
32 | D
33 |
34 |
35 | E
36 |
37 |
38 |
39 |
40 |
41 |
42 | A
43 |
44 |
45 | B
46 |
47 |
48 | C
49 |
50 |
51 | D
52 |
53 |
54 | E
55 |
56 |
57 |
58 |
59 | );
60 | };
61 |
62 | Basic.storyName = '基本用法';
63 |
64 | export default GridStory;
65 |
--------------------------------------------------------------------------------
/stories/image/img.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taoyage/react-mobile-ui/e0d17002078e43a0fdfc75407f78b3e937e4127d/stories/image/img.png
--------------------------------------------------------------------------------
/stories/image/index.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import { Meta } from '@storybook/react';
4 |
5 | import Image from '@/image';
6 | import Space from '@/space';
7 |
8 | import DemoWrap from '../../demos/demo-wrap';
9 | import DemoBlock from '../../demos/demo-block';
10 |
11 | import demoImg from './img.png';
12 |
13 | const ImageStory: Meta = {
14 | title: '信息展示/Image 图片',
15 | component: Image,
16 | };
17 |
18 | export const Basic = () => {
19 | return (
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 | );
47 | };
48 |
49 | Basic.storyName = '基本用法';
50 |
51 | export default ImageStory;
52 |
--------------------------------------------------------------------------------
/stories/infinite-scroll/index.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Meta } from '@storybook/react';
3 |
4 | import { List } from 'antd-mobile';
5 |
6 | import InfiniteScroll from '@/infinite-scroll';
7 | import Space from '@/space';
8 |
9 | import DemoWrap from '../../demos/demo-wrap';
10 | import DemoBlock from '../../demos/demo-block';
11 |
12 | const ErrorStory: Meta = {
13 | title: '信息展示/infiniteScroll 无限滚动',
14 | component: InfiniteScroll,
15 | };
16 |
17 | const mockData = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q'];
18 |
19 | function sleep(ms: number): any {
20 | // eslint-disable-next-line no-promise-executor-return
21 | return new Promise((resolve) => window.setTimeout(resolve, ms));
22 | }
23 |
24 | export const Basic = () => {
25 | const [data1, setData1] = React.useState(mockData);
26 | const [data2, setData2] = React.useState(mockData);
27 | const [hasMore1, setHasMore1] = React.useState(true);
28 | const [hasMore2, setHasMore2] = React.useState(true);
29 |
30 | const loadMore1 = async () => {
31 | await sleep(3000);
32 | setData1((val) => [...val, ...mockData]);
33 | if (data1.length >= 68) {
34 | setHasMore1(false);
35 | }
36 | };
37 |
38 | const loadMore2 = async () => {
39 | await sleep(3000);
40 | setData2((val) => [...val, ...mockData]);
41 | if (data2.length >= 68) {
42 | setHasMore2(false);
43 | }
44 | };
45 |
46 | return (
47 |
48 |
49 |
50 |
51 |
52 |
53 | {data1.map((item, index) => (
54 | {item}
55 | ))}
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 | 加载中 : --- 没有更多 ---}
67 | >
68 |
69 | {data2.map((item, index) => (
70 | {item}
71 | ))}
72 |
73 |
74 |
75 |
76 |
77 |
78 | );
79 | };
80 |
81 | Basic.storyName = '基本用法';
82 |
83 | export default ErrorStory;
84 |
--------------------------------------------------------------------------------
/stories/input/index.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Meta } from '@storybook/react';
3 |
4 | import Input from '@/input';
5 |
6 | import DemoWrap from '../../demos/demo-wrap';
7 | import DemoBlock from '../../demos/demo-block';
8 |
9 | const InputStory: Meta = {
10 | title: '信息录入/Input 输入框',
11 | component: Input,
12 | };
13 |
14 | export const Basic = () => {
15 | return (
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 | );
34 | };
35 |
36 | Basic.storyName = '基本用法';
37 |
38 | export default InputStory;
39 |
--------------------------------------------------------------------------------
/stories/mask/index.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Meta } from '@storybook/react';
3 |
4 | import Mask from '@/mask';
5 | import Button from '@/button';
6 |
7 | import DemoWrap from '../../demos/demo-wrap';
8 | import DemoBlock from '../../demos/demo-block';
9 |
10 | const MaskStory: Meta = {
11 | title: '反馈/Mask 遮罩层',
12 | component: Mask,
13 | };
14 |
15 | export const Basic = () => {
16 | const [visible1, setVisible1] = React.useState(false);
17 | const [visible2, setVisible2] = React.useState(false);
18 |
19 | return (
20 |
21 |
22 |
23 | setVisible1(false)} />
24 |
25 |
26 |
27 |
28 | setVisible2(false)}
32 | />
33 |
34 |
35 | );
36 | };
37 |
38 | Basic.storyName = '基本用法';
39 |
40 | export default MaskStory;
41 |
--------------------------------------------------------------------------------
/stories/nav-bar/index.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Meta } from '@storybook/react';
3 | import { SearchOutline } from 'antd-mobile-icons';
4 |
5 | import NavBar from '@/nav-bar';
6 | import Toast from '@/toast';
7 |
8 | import DemoWrap from '../../demos/demo-wrap';
9 | import DemoBlock from '../../demos/demo-block';
10 |
11 | const NavBarStory: Meta = {
12 | title: '导航/NavBar 导航栏',
13 | component: NavBar,
14 | };
15 |
16 | export const Basic = () => {
17 | const onBack = () => {
18 | Toast.show('back');
19 | };
20 |
21 | return (
22 |
23 |
24 | 标题
25 |
26 |
27 |
28 | 标题
29 |
30 |
31 |
32 | }>
33 | 标题
34 |
35 |
36 |
37 | );
38 | };
39 |
40 | Basic.storyName = '基本用法';
41 |
42 | export default NavBarStory;
43 |
--------------------------------------------------------------------------------
/stories/popup/index.scss:
--------------------------------------------------------------------------------
1 | .popup-demo {
2 | .ygm-button {
3 | margin-right: 20px;
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/stories/popup/index.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Meta } from '@storybook/react';
3 |
4 | import Popup from '@/popup';
5 | import Button from '@/button';
6 |
7 | import './index.scss';
8 |
9 | const ToastStory: Meta = {
10 | title: '反馈/Popup 弹出层',
11 | component: Popup,
12 | };
13 |
14 | export const Basic = () => {
15 | const [visible1, setVisible1] = React.useState(false);
16 | const [visible2, setVisible2] = React.useState(false);
17 | const [visible3, setVisible3] = React.useState(false);
18 | const [visible4, setVisible4] = React.useState(false);
19 |
20 | return (
21 |
22 |
23 |
24 |
25 |
26 |
27 |
setVisible1(false)} style={{ height: '30vh' }} />
28 | setVisible2(false)} style={{ height: '30vh' }} />
29 | setVisible3(false)} style={{ width: '30vh' }} />
30 | setVisible4(false)} style={{ width: '30vh' }} />
31 | list-{index}
29 | ))}
30 |
31 |
32 |
33 | );
34 | };
35 |
36 | Basic.storyName = '基本用法';
37 |
38 | export default CountdownStory;
39 |
--------------------------------------------------------------------------------
/stories/search-bar/index.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Meta } from '@storybook/react';
3 |
4 | import SearchBar from '@/search-bar';
5 | import Toast from '@/toast';
6 |
7 | import DemoWrap from '../../demos/demo-wrap';
8 | import DemoBlock from '../../demos/demo-block';
9 |
10 | const SearchBarStories: Meta = {
11 | title: '信息录入/SearchBar 搜索栏',
12 | component: SearchBar,
13 | };
14 |
15 | export const Basic = () => {
16 | const ref = React.useRef(null);
17 | const onClear = () => {
18 | Toast.show('清除');
19 | };
20 |
21 | const onSearch = () => {
22 | Toast.show('搜索');
23 | };
24 |
25 | return (
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
49 |
50 |
51 | );
52 | };
53 |
54 | Basic.storyName = '基本用法';
55 |
56 | export default SearchBarStories;
57 |
--------------------------------------------------------------------------------
/stories/selector/index.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Meta } from '@storybook/react';
3 |
4 | import Selector from '@/selector';
5 |
6 | import DemoWrap from '../../demos/demo-wrap';
7 | import DemoBlock from '../../demos/demo-block';
8 |
9 | const SidebarStory: Meta = {
10 | title: '信息录入/Selector 选择组',
11 | component: Selector,
12 | };
13 |
14 | const options = [
15 | {
16 | label: '选项一',
17 | value: '1',
18 | },
19 | {
20 | label: '选项二',
21 | value: '2',
22 | },
23 | {
24 | label: '选项三',
25 | value: '3',
26 | },
27 | ];
28 |
29 | const options1 = [
30 | {
31 | label: '选项一',
32 | value: '1',
33 | disabled: true,
34 | },
35 | {
36 | label: '选项二',
37 | value: '2',
38 | },
39 | {
40 | label: '选项三',
41 | value: '3',
42 | },
43 | ];
44 |
45 | const options2 = [
46 | {
47 | label: '选项一',
48 | value: '1',
49 | description: '描述一',
50 | },
51 | {
52 | label: '选项二',
53 | value: '2',
54 | description: '描述二',
55 | },
56 | ];
57 |
58 | export const Basic = () => {
59 | return (
60 |
61 |
62 |
63 |
64 |
65 |
66 | {
71 | console.log(value);
72 | console.log(selectorOptions);
73 | }}
74 | />
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
100 |
101 |
102 | );
103 | };
104 |
105 | Basic.storyName = '基本用法';
106 |
107 | export default SidebarStory;
108 |
--------------------------------------------------------------------------------
/stories/sidebar/index.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Meta } from '@storybook/react';
3 |
4 | import Sidebar from '@/sidebar';
5 |
6 | import DemoWrap from '../../demos/demo-wrap';
7 | import DemoBlock from '../../demos/demo-block';
8 |
9 | const SidebarStory: Meta = {
10 | title: '导航/Sidebar 侧边导航',
11 | component: Sidebar,
12 | };
13 |
14 | export const Basic = () => {
15 | return (
16 |
17 |
18 |
19 |
20 | 1
21 |
22 |
23 | 2
24 |
25 |
26 | 3
27 |
28 |
29 | 4
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 | 1
38 |
39 |
40 | 2
41 |
42 |
43 | 3
44 |
45 |
46 | 4
47 |
48 |
49 |
50 |
51 | );
52 | };
53 |
54 | Basic.storyName = '基本用法';
55 |
56 | export default SidebarStory;
57 |
--------------------------------------------------------------------------------
/stories/slider/index.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Meta } from '@storybook/react';
3 |
4 | import Slider from '@/slider';
5 |
6 | import DemoWrap from '../../demos/demo-wrap';
7 | import DemoBlock from '../../demos/demo-block';
8 |
9 | const SliderStory: Meta = {
10 | title: '信息录入/Slider 滑动条',
11 | component: Slider,
12 | };
13 |
14 | export const Basic = () => {
15 | const onChange = (value: number) => {
16 | console.log(value);
17 | };
18 |
19 | const onChangeAfter = (value: number) => {
20 | console.log(value);
21 | };
22 |
23 | return (
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
41 |
42 |
43 | );
44 | };
45 |
46 | Basic.storyName = '基本用法';
47 |
48 | export default SliderStory;
49 |
--------------------------------------------------------------------------------
/stories/space/index.scss:
--------------------------------------------------------------------------------
1 | .space-demo-wrap {
2 | font-family: arial;
3 | }
4 |
--------------------------------------------------------------------------------
/stories/space/index.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Meta } from '@storybook/react';
3 |
4 | import Space from '@/space';
5 | import Button from '@/button';
6 |
7 | import DemoWrap from '../../demos/demo-wrap';
8 | import DemoBlock from '../../demos/demo-block';
9 |
10 | import './index.scss';
11 |
12 | const LoadingStory: Meta = {
13 | title: '布局/Space 间距',
14 | component: Space,
15 | };
16 |
17 | export const Basic = () => {
18 | return (
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
69 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
81 |
84 |
85 |
86 |
87 | );
88 | };
89 |
90 | Basic.storyName = '基本用法';
91 |
92 | export default LoadingStory;
93 |
--------------------------------------------------------------------------------
/stories/spinner-loading/index.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Meta } from '@storybook/react';
3 |
4 | import SpinnerLoading from '@/spinner-loading';
5 | import Space from '@/space';
6 |
7 | import DemoWrap from '../../demos/demo-wrap';
8 | import DemoBlock from '../../demos/demo-block';
9 |
10 | const LoadingStory: Meta = {
11 | title: '反馈/Loading 加载中',
12 | component: SpinnerLoading,
13 | };
14 |
15 | export const Basic = () => {
16 | return (
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 | );
37 | };
38 |
39 | Basic.storyName = '基本用法';
40 |
41 | export default LoadingStory;
42 |
--------------------------------------------------------------------------------
/stories/swiper/index.scss:
--------------------------------------------------------------------------------
1 | .swiper-demo {
2 | &-content {
3 | height: 120px;
4 | color: #ffffff;
5 | display: flex;
6 | justify-content: center;
7 | align-items: center;
8 | font-size: 48px;
9 | user-select: none;
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/stories/swiper/index.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Meta } from '@storybook/react';
3 |
4 | import Swiper, { SwiperRef } from '@/swiper';
5 | import Button from '@/button';
6 | import Space from '@/space';
7 |
8 | import DemoWrap from '../../demos/demo-wrap';
9 | import DemoBlock from '../../demos/demo-block';
10 |
11 | import './index.scss';
12 |
13 | const SwiperStory: Meta = {
14 | title: '信息展示/Swiper 轮播图',
15 | component: Swiper,
16 | subcomponents: { 'Swiper.Item': Swiper.Item },
17 | };
18 |
19 | const colors = ['#ace0ff', '#bcffbd', '#e4fabd', '#ffcfac'];
20 |
21 | export const Basic = () => {
22 | const swiperRef = React.useRef(null);
23 |
24 | return (
25 |
26 |
27 |
28 | {colors.map((color, index) => (
29 |
30 |
31 | {index + 1}
32 |
33 |
34 | ))}
35 |
36 |
37 |
38 |
39 |
40 | {colors.map((color, index) => (
41 |
42 |
43 | {index + 1}
44 |
45 |
46 | ))}
47 |
48 |
49 |
50 |
51 |
52 | {colors.map((color, index) => (
53 |
54 |
55 | {index + 1}
56 |
57 |
58 | ))}
59 |
60 |
61 |
62 |
63 |
64 | {colors.map((color, index) => (
65 |
66 |
67 | {index + 1}
68 |
69 |
70 | ))}
71 |
72 |
73 |
74 |
75 |
76 | {colors.map((color, index) => (
77 |
78 |
79 | {index + 1}
80 |
81 |
82 | ))}
83 |
84 |
85 |
92 |
99 |
100 |
101 |
102 | );
103 | };
104 |
105 | Basic.storyName = '基本用法';
106 |
107 | export default SwiperStory;
108 |
--------------------------------------------------------------------------------
/stories/tabs/index.scss:
--------------------------------------------------------------------------------
1 | .tabs-demo-list {
2 | border-radius: 15px;
3 | }
4 |
5 | .tabs-demo-active {
6 | border-radius: 15px;
7 | }
8 |
--------------------------------------------------------------------------------
/stories/tabs/index.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Meta } from '@storybook/react';
3 |
4 | import Tabs from '@/tabs';
5 |
6 | import DemoWrap from '../../demos/demo-wrap';
7 | import DemoBlock from '../../demos/demo-block';
8 |
9 | import './index.scss';
10 |
11 | const TabsStory: Meta = {
12 | title: '导航/ Tabs 标签页',
13 | component: Tabs,
14 | };
15 |
16 | export const Basic = () => (
17 |
18 |
19 |
20 |
21 | 内容1
22 |
23 |
24 | 内容2
25 |
26 |
27 | 内容3
28 |
29 |
30 |
31 |
32 |
33 |
40 |
41 | 内容1
42 |
43 |
44 | 内容2
45 |
46 |
47 | 内容3
48 |
49 |
50 |
51 |
52 | );
53 |
54 | Basic.storyName = '基础用法';
55 |
56 | export default TabsStory;
57 |
--------------------------------------------------------------------------------
/stories/toast/index.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Meta } from '@storybook/react';
3 |
4 | import Toast from '@/toast';
5 | import ToastComponent from '@/toast/toast';
6 | import Button from '@/button';
7 |
8 | import Space from '@/space';
9 |
10 | import DemoWrap from '../../demos/demo-wrap';
11 | import DemoBlock from '../../demos/demo-block';
12 |
13 | const ToastStory: Meta = {
14 | title: '反馈/ Toast 轻提示',
15 | component: ToastComponent,
16 | };
17 |
18 | export const Basic = () => (
19 |
20 |
21 |
33 |
34 |
35 |
36 |
37 |
51 |
52 |
66 |
67 |
81 |
82 |
83 |
84 | );
85 |
86 | Basic.storyName = '基础用法';
87 |
88 | export default ToastStory;
89 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "@taoyage/configs/shared-tsconfig",
3 | "compilerOptions": {
4 | "baseUrl": ".",
5 | "skipLibCheck": true,
6 | "declaration": true,
7 | "esModuleInterop": true,
8 | "jsx": "react",
9 | "outDir": "lib",
10 | "paths": {
11 | "@/*": ["packages/*"]
12 | },
13 | "rootDir": "."
14 | },
15 | "include": ["packages", "stories", "demos"],
16 | "exclude": ["node_modules"],
17 | "files": ["./typings.d.ts"]
18 | }
19 |
--------------------------------------------------------------------------------
/typings.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.png';
2 |
--------------------------------------------------------------------------------