(false);
14 |
15 | const handleClick = () => {
16 | let ret;
17 | if (actionFn) {
18 | ret = actionFn();
19 | }
20 | if (!ret) {
21 | closeModal();
22 | }
23 | if (ret && ret.then) {
24 | setLoading(true);
25 | ret.then(
26 | () => {
27 | closeModal();
28 | setLoading(false);
29 | },
30 | (e: Error) => {
31 | // tslint:disable-next-line:no-console
32 | console.log(e);
33 | setLoading(false);
34 | },
35 | );
36 | }
37 | };
38 |
39 | return (
40 |
43 | );
44 | };
45 |
46 | export default ActionButton;
47 |
--------------------------------------------------------------------------------
/components/radio/__test__/__snapshots__/index.test.jsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`Radio should render correctly 1`] = `
4 |
45 | `;
46 |
--------------------------------------------------------------------------------
/site/demo/portal/portal.md:
--------------------------------------------------------------------------------
1 | ## Portal
2 |
3 |
4 |
5 | ```jsx
6 | const Demo = () => {
7 | const [PurePortalVisible, setPurePortalVisible] = React.useState(false);
8 | const [PortalVisible, setPortalVisible] = React.useState(false);
9 |
10 | return (
11 |
12 |
{
14 | setPortalVisible(false);
15 | }}
16 | visible={PortalVisible}
17 | mask
18 | maskClosable
19 | closeOnClickOutside
20 | className="portal"
21 | style={{ background: 'rgba(0, 0, 0, 0.2)' }}
22 | >
23 |
24 |
33 | 这里是带mask的Portal动态插入body的内容，点击遮罩层关闭
34 |
35 |
36 |
37 |
40 |
20 |
28 |
34 | Return
35 | ,
36 | ,
39 | ]}
40 | >
41 | Some contents...
42 | Some contents...
43 | Some contents...
44 |
45 |
22 | Sider
23 |
24 | Content
25 | ,
26 | );
27 | expect(wrapper.find('.ty-layout').hasClass('ty-layout--hasSider')).toBe(true);
28 | });
29 |
30 | it('should have 50% width of sidebar', async () => {
31 | const wrapper = mount(
32 |
33 |
34 | Sider
35 |
36 | Content
37 | ,
38 | );
39 | expect(
40 | wrapper
41 | .find('.ty-layout__sider')
42 | .at(0)
43 | .prop('style').width,
44 | ).toBe('50%');
45 | });
46 | });
47 |
--------------------------------------------------------------------------------
/components/index.tsx:
--------------------------------------------------------------------------------
1 | export { default as ConfigProvider } from './context/ConfigContext';
2 | export { default as Icon } from './icon';
3 | export { default as Button } from './button';
4 | export { default as Portal } from './portal';
5 | export { default as Modal } from './modal';
6 | export { default as Layout } from './layout';
7 | export { default as Row } from './row';
8 | export { default as Col } from './col';
9 | export { default as AppBar } from './appBar';
10 | export { default as Drawer } from './drawer';
11 | export { default as Input } from './input';
12 | export { default as Radio } from './radio';
13 | export { default as Checkbox } from './checkbox';
14 | export { default as message } from './message';
15 | export { default as Switch } from './switch';
16 |
17 | /* @remove-on-es-build-begin */
18 | // this file is not used if use https://github.com/ant-design/babel-plugin-import
19 | const ENV = process.env.NODE_ENV;
20 | if (
21 | ENV !== 'production' &&
22 | ENV !== 'test' &&
23 | typeof console !== 'undefined' &&
24 | console.warn &&
25 | typeof window !== 'undefined'
26 | ) {
27 | console.warn(
28 | 'You are using a whole package of tyche-ui, ' +
29 | 'please use https://www.npmjs.com/package/babel-plugin-import to reduce app bundle size.',
30 | );
31 | }
32 | /* @remove-on-es-build-end */
33 |
--------------------------------------------------------------------------------
/site/components/AppBar.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import { AppBar, Icon, Button, Drawer } from 'components';
3 | import SiderNav from './SiderNav';
4 |
5 | const { IconButton, Typography, ToolBar } = AppBar;
6 |
7 | export default () => {
8 | const [drawerVisible, setDrawerVisible] = useState(false);
9 | const handleIconButtonClick = () => {
10 | setDrawerVisible(true);
11 | };
12 |
13 | const closeDrawer = () => {
14 | setDrawerVisible(false);
15 | };
16 |
17 | return (
18 |
19 |
20 |
21 |
22 |
23 |
24 | Tyche UI
25 |
26 |
27 |
30 |
31 |
32 |
33 |
34 |
35 | );
36 | };
37 |
--------------------------------------------------------------------------------
/components/icon/svgs/github.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/components/drawer/style/index.scss:
--------------------------------------------------------------------------------
1 | @import '../../theme/mixins/mixins.scss';
2 | @import '../../theme/default.scss';
3 |
4 | @include b(drawer) {
5 | position: fixed;
6 | top: 0;
7 | z-index: 201;
8 | @include e(mask) {
9 | position: fixed;
10 | top: 0;
11 | right: 0;
12 | bottom: 0;
13 | left: 0;
14 | height: 100%;
15 | background-color: $--color-black;
16 | opacity: 0;
17 | touch-action: none;
18 | &-appear-active {
19 | opacity: 1;
20 | transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
21 | }
22 | &-appear-done {
23 | opacity: 1;
24 | }
25 | &-exit {
26 | opacity: 0;
27 | transition: opacity 195ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
28 | }
29 | }
30 | @include e(sider) {
31 | position: fixed;
32 | height: 100%;
33 | overflow: auto;
34 | background-color: $--color-white;
35 | box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2), 0 16px 24px 2px rgba(0, 0, 0, 0.14),
36 | 0 6px 30px 5px rgba(0, 0, 0, 0.12);
37 | -webkit-overflow-scrolling: touch;
38 | @include m(left) {
39 | left: 0;
40 | }
41 | @include m(right) {
42 | right: 0;
43 | }
44 | @include m(top) {
45 | top: 0;
46 | right: 0;
47 | left: 0;
48 | }
49 | @include m(bottom) {
50 | right: 0;
51 | bottom: 0;
52 | left: 0;
53 | }
54 | }
55 | }
56 |
--------------------------------------------------------------------------------
/components/appBar/AppBar.tsx:
--------------------------------------------------------------------------------
1 | import React, { forwardRef } from 'react';
2 | import clsx from 'clsx';
3 | import { tuple } from '../_util/type';
4 | import { usePrefixCls } from '../_util/hooks';
5 | import { IconButton, Typography, ToolBar } from './AppBarInner';
6 |
7 | const AppBarColors = tuple('primary', 'secondary', 'success', 'warning', 'danger');
8 | export type AppBarColor = (typeof AppBarColors)[number];
9 |
10 | export interface AppBarProps {
11 | className?: string;
12 | children?: React.ReactNode;
13 | color?: AppBarColor;
14 | style?: React.CSSProperties;
15 | }
16 |
17 | export interface AppBarComponent extends React.ForwardRefExoticComponent
{
18 | IconButton: typeof IconButton;
19 | Typography: typeof Typography;
20 | ToolBar: typeof ToolBar;
21 | }
22 |
23 | const AppBar = forwardRef((props: AppBarProps, ref: React.RefObject) => {
24 | const { color = 'default', className, children, ...rest } = props;
25 | const prefixCls = usePrefixCls('appbar');
26 |
27 | const classes = clsx(prefixCls, className, {
28 | [`${prefixCls}--${color}`]: color,
29 | });
30 |
31 | return (
32 |
33 | {children}
34 |
35 | );
36 | }) as AppBarComponent;
37 |
38 | AppBar.IconButton = IconButton;
39 | AppBar.Typography = Typography;
40 | AppBar.ToolBar = ToolBar;
41 |
42 | export default AppBar;
43 |
--------------------------------------------------------------------------------
/components/modal/__test__/Modal.test.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { mount } from 'enzyme';
3 | import Modal from '..';
4 |
5 | describe('Modal', () => {
6 | it('should render correctly', () => {
7 | const wrapper = mount(
8 |
9 | Some contents...
10 | ,
11 | );
12 | expect(wrapper).toMatchSnapshot();
13 | });
14 |
15 | it('render without footer', () => {
16 | const wrapper = mount();
17 | expect(wrapper.find('.ty-modal__footer').length).toBeFalsy();
18 | });
19 |
20 | it('onCancel should be called', () => {
21 | const handleCancel = jest.fn();
22 | const wrapper = mount();
23 | wrapper
24 | .find('.ty-modal__close')
25 | .at(0)
26 | .simulate('click');
27 | expect(handleCancel).toBeCalledTimes(1);
28 | wrapper
29 | .find('.ty-btn__text--default')
30 | .at(0)
31 | .simulate('click');
32 | expect(handleCancel).toBeCalledTimes(2);
33 | });
34 |
35 | it('onOk should be called', () => {
36 | const handleOk = jest.fn();
37 | const wrapper = mount();
38 | wrapper
39 | .find('.ty-btn__text--primary')
40 | .at(0)
41 | .simulate('click');
42 | expect(handleOk).toHaveBeenCalled();
43 | });
44 | });
45 |
--------------------------------------------------------------------------------
/components/radio/RadioGroup.tsx:
--------------------------------------------------------------------------------
1 | import React, { forwardRef, ReactNode, useCallback } from 'react';
2 | import eq from 'lodash-es/eq';
3 | import RadioContext from './RadioContext';
4 | import { RadioEvent, RadioColor } from './Radio';
5 |
6 | const { Provider } = RadioContext;
7 |
8 | export interface RadioGroupProps {
9 | color?: RadioColor;
10 | children?: ReactNode;
11 | disabled?: boolean;
12 | isValueEqual?: (value1: unknown, value2: unknown) => boolean;
13 | onChange: (e: RadioEvent) => void;
14 | value: unknown;
15 | }
16 |
17 | const RadioGroup = forwardRef((props: RadioGroupProps, ref: React.RefObject) => {
18 | const {
19 | value,
20 | children,
21 | isValueEqual = eq,
22 | onChange,
23 | color = 'primary',
24 | disabled = false,
25 | } = props;
26 |
27 | const getContextValue = useCallback(
28 | (
29 | value: unknown,
30 | isValueEqual: (a: unknown, b: unknown) => boolean,
31 | color: RadioColor,
32 | disabled: boolean,
33 | ) => ({
34 | value,
35 | isValueEqual,
36 | color,
37 | disabled,
38 | onRadioChange: onChange,
39 | hasRadioGroup: true,
40 | }),
41 | [],
42 | );
43 |
44 | return (
45 |
46 | {children}
47 |
48 | );
49 | });
50 |
51 | export default RadioGroup;
52 |
--------------------------------------------------------------------------------
/site/demo/grid/justify.md:
--------------------------------------------------------------------------------
1 | ## Flex 布局
2 |
3 | 给`Row`设置`type="flex"`可以使用`flex`布局，使用`justify`可以给 Row 的子元素定义不同的排版方式。
4 |
5 |
6 |
7 | ```jsx
8 | const grid = (
9 |
10 |
start
11 |
12 | col-4
13 | col-4
14 | col-4
15 | col-4
16 |
17 |
18 |
center
19 |
20 | col-4
21 | col-4
22 | col-4
23 | col-4
24 |
25 |
26 |
right
27 |
28 | col-4
29 | col-4
30 | col-4
31 | col-4
32 |
33 |
34 |
space-between
35 |
36 | col-4
37 | col-4
38 | col-4
39 | col-4
40 |
41 |
42 |
space-around
43 |
44 | col-4
45 | col-4
46 | col-4
47 | col-4
48 |
49 |
9 | {/*
1
10 |
11 |
12 | This is Content
13 |
14 | */}
15 |
16 |
2
17 |
18 |
19 |
20 | {
24 | console.log('@onBreakpoint', broken);
25 | }}
26 | >
27 | Sider
28 |
29 | Content
30 |
31 |
32 |
33 |
34 | {/*
3
35 |
36 |
37 |
38 | Content
39 | Sider
40 |
41 |
42 |
43 |
44 |
4
45 |
46 | Sider
47 |
48 |
49 | Content
50 |
51 |
52 | */}
53 |
7 |
10 |
37 |
38 |
41 | Title
42 |
43 |
46 |
59 |
60 |
10 | 这里是.demo-portal-conent的内容
11 |
12 | {PurePortalVisible && (
13 |
14 | 这是 PurePortal 动态插入.demo-portal-conent的内容
15 |
16 | )}
17 |
24 | {
26 | setPortalVisible(false);
27 | }}
28 | visible={PortalVisible}
29 | append
30 | maskClosable
31 | closeOnClickOutside
32 | className="tttppp"
33 | style={{ background: 'rgba(0, 0, 0, 0.2)' }}
34 | >
35 | 这里是带mask的Portal动态插入body的内容
36 |
37 |
40 |
41 | );
42 | };
43 |
--------------------------------------------------------------------------------
/site/demo/buttons/icon.md:
--------------------------------------------------------------------------------
1 | ### 图标
2 |
3 |
4 |
5 | ```js
6 | const instance = (
7 |
8 |
9 |
12 |
15 |
18 |
21 |
24 |
27 |
28 |
29 |
33 |
37 |
41 |
45 |
49 |
50 |
33 |
34 |
39 | Check all
40 |
41 |
42 |
43 |
48 |
42 | {mask && (
43 |
52 |
53 |
54 | )}
55 |
56 | {children}
57 |
58 |
|
);
31 | expect(wrapper).toMatchSnapshot();
32 | });
33 |
34 | it('renders wrapped Col correctly', () => {
35 | const MyCol = () => ;
36 | const wrapper = render(
37 |
38 |
39 |
40 |
41 |
42 | ,
43 | );
44 | expect(wrapper).toMatchSnapshot();
45 | });
46 |
47 | it('should work correct when gutter is object', () => {
48 | const enquire = require('enquire.js');
49 | const wrapper = mount(|
);
50 | expect(wrapper.find('div').prop('style')).toEqual({
51 | marginLeft: -10,
52 | marginRight: -10,
53 | });
54 | enquire.callunmatch();
55 | expect(
56 | wrapper
57 | .update()
58 | .find('div')
59 | .prop('style'),
60 | ).toEqual(undefined);
61 | wrapper.unmount();
62 | expect(enquire.unregister).toHaveBeenCalled();
63 | });
64 | });
65 |
--------------------------------------------------------------------------------
/components/message/Message.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { CSSTransition } from 'react-transition-group';
3 | import clsx from 'clsx';
4 | import { tuple } from '../_util/type';
5 | import Portal from '../portal';
6 | import Icon from '../icon';
7 | import { usePrefixCls } from '../_util/hooks';
8 |
9 | const MessageColors = tuple('default', 'primary', 'secondary', 'success', 'warning', 'danger');
10 | export type MessageColor = (typeof MessageColors)[number];
11 |
12 | export interface MessageProps {
13 | iconType?: string;
14 | color?: MessageColor;
15 | content?: React.ReactNode | string;
16 | visible: boolean;
17 | selector: HTMLElement | string;
18 | afterClose(): void;
19 | }
20 |
21 | const Message: React.FunctionComponent = props => {
22 | const { color = 'default', iconType, selector, visible, afterClose, content } = props;
23 |
24 | const prefixCls = usePrefixCls('message');
25 | const contentClasses = clsx(`${prefixCls}__content`, {
26 | [`${prefixCls}--${color}`]: color,
27 | });
28 |
29 | const onExited = () => {
30 | afterClose();
31 | };
32 |
33 | return (
34 |
35 |
46 |
47 |
48 | {iconType && }
49 | {content}
50 |
51 |
52 |
53 |
54 | );
55 | };
56 |
57 | export default Message;
58 |
--------------------------------------------------------------------------------
/components/message/__test__/index.test.jsx:
--------------------------------------------------------------------------------
1 | import message from '..';
2 |
3 | describe('message', () => {
4 | beforeEach(() => {
5 | jest.useFakeTimers();
6 | });
7 |
8 | afterEach(() => {
9 | message.destroy();
10 | jest.useRealTimers();
11 | });
12 |
13 | it('render correctly', () => {
14 | message.success('success');
15 | expect(document.querySelectorAll('.ty-message__notice').length).toBe(1);
16 | });
17 |
18 | it('onClose should be called', () => {
19 | const onClose = jest.fn();
20 | message.success('success', 2, onClose);
21 | jest.runTimersToTime(1000);
22 | expect(onClose).not.toHaveBeenCalled();
23 | jest.runAllTimers();
24 | expect(onClose).toHaveBeenCalled();
25 | });
26 |
27 | it('should hide message correctly', () => {
28 | const hide = message.loading('success', 0);
29 | expect(document.querySelectorAll('.ty-message__notice').length).toBe(1);
30 | hide();
31 | jest.runAllTimers();
32 | expect(document.querySelectorAll('.ty-message__notice').length).toBe(0);
33 | });
34 |
35 | it('should be able to destroy globally', () => {
36 | message.info('whatever', 0);
37 | message.info('whatever', 0);
38 | expect(document.querySelectorAll('.ty-message').length).toBe(1);
39 | expect(document.querySelectorAll('.ty-message__notice').length).toBe(2);
40 | message.destroy();
41 | jest.runAllTimers();
42 | expect(document.querySelectorAll('.ty-message').length).toBe(0);
43 | expect(document.querySelectorAll('.ty-message__notice').length).toBe(0);
44 | });
45 |
46 | it('should not need to use duration argument when using the onClose arguments', () => {
47 | const onClose = jest.fn();
48 | message.info('whatever', onClose);
49 | message.destroy();
50 | jest.runAllTimers();
51 | expect(onClose).toHaveBeenCalled();
52 | });
53 | });
54 |
--------------------------------------------------------------------------------
/components/message/style/index.scss:
--------------------------------------------------------------------------------
1 | @import '../../theme/mixins/mixins.scss';
2 | @import '../../theme/default.scss';
3 |
4 | .ty-message {
5 | position: fixed;
6 | top: 16px;
7 | left: 0;
8 | z-index: 10000;
9 | width: 100%;
10 | text-align: center;
11 | pointer-events: none;
12 | }
13 |
14 | @include b(message) {
15 | @include e(notice) {
16 | padding: 8px 0;
17 | @include e(content) {
18 | display: inline-flex;
19 | align-items: center;
20 | box-sizing: border-box;
21 | min-width: 256px;
22 | max-width: 96%;
23 | min-height: 46px;
24 | padding: 6px 16px;
25 | border-radius: 2px;
26 | box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
27 | pointer-events: all;
28 | }
29 | }
30 |
31 | @include e(icon) {
32 | margin-right: 12px;
33 | font-size: 20px;
34 | }
35 |
36 | $--message--colors: (
37 | 'default': $--color-black-bg,
38 | 'primary': $--color-primary,
39 | 'success': $--color-success,
40 | 'warning': $--color-warning,
41 | 'danger': $--color-danger,
42 | );
43 | @each $key, $color in $--message--colors {
44 | @include m($key) {
45 | color: $--color-white;
46 | background-color: $color;
47 | }
48 | }
49 |
50 | &-appear {
51 | &-active {
52 | animation: notifyMoveIn 225ms cubic-bezier(0.4, 0, 0.2, 1);
53 | }
54 | }
55 | &-exit {
56 | &-active {
57 | animation: notifyMoveOut 195ms cubic-bezier(0.4, 0, 0.2, 1) both;
58 | }
59 | }
60 | }
61 |
62 | @keyframes notifyMoveIn {
63 | 0% {
64 | transform: translateY(-100%);
65 | opacity: 0;
66 | }
67 |
68 | 100% {
69 | transform: translateY(0%);
70 | opacity: 1;
71 | }
72 | }
73 |
74 | @keyframes notifyMoveOut {
75 | 0% {
76 | transform: translateY(0%);
77 | opacity: 1;
78 | }
79 |
80 | 100% {
81 | transform: translateY(-100%);
82 | opacity: 0;
83 | }
84 | }
85 |
--------------------------------------------------------------------------------
/site/pages/Drawer.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import { Button, Drawer } from 'components';
3 |
4 | export default () => {
5 | const [leftVisible, setLeftVisible] = useState(false);
6 | const [rightVisible, setRightVisible] = useState(false);
7 | const [topVisible, setTopVisible] = useState(false);
8 | const [bottomVisible, setBottomVisible] = useState(false);
9 |
10 | return (
11 |
12 |
20 | {
23 | setLeftVisible(false);
24 | }}
25 | >sider
26 |
27 |
35 | {
39 | setRightVisible(false);
40 | }}
41 | />
42 |
43 |
51 | {
55 | setTopVisible(false);
56 | }}
57 | />
58 |
59 |
67 | {
71 | setBottomVisible(false);
72 | }}
73 | />
74 |
75 | );
76 | };
77 |
--------------------------------------------------------------------------------
/components/radio/__test__/index.test.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { render, mount } from 'enzyme';
3 | import Radio from '..';
4 |
5 | describe('Radio', () => {
6 | it('should render correctly', () => {
7 | const wrapper = render(Test);
8 | expect(wrapper).toMatchSnapshot();
9 | });
10 |
11 | it('fire change events when value changes', () => {
12 | const handleChange = jest.fn();
13 | const wrapper = mount(
14 |
15 | Test
16 | ,
17 | );
18 | wrapper.find('input').simulate('change');
19 | expect(handleChange).toHaveBeenCalled();
20 | });
21 | });
22 |
23 | describe('Radio Group', () => {
24 | it('Group will liftup the change event of input and props in Radio', () => {
25 | const handleChange = jest.fn();
26 | const val = 1;
27 | const wrapper = mount(
28 |
29 | A
30 | B
31 | B
32 | ,
33 | );
34 | handleChange.mockImplementation(evt => {
35 | expect(typeof evt.stopPropagation).toBe('function');
36 | expect(typeof evt.preventDefault).toBe('function');
37 | evt.stopPropagation();
38 | evt.preventDefault();
39 |
40 | wrapper.setProps({ value: evt.target.value });
41 | });
42 |
43 | expect(
44 | wrapper
45 | .find(Radio)
46 | .at(0)
47 | .children()
48 | .hasClass('ty-radio--checked'),
49 | ).toBe(true);
50 |
51 | wrapper
52 | .find('input')
53 | .at(1)
54 | .simulate('change');
55 | expect(handleChange).toHaveBeenCalled();
56 |
57 | expect(
58 | wrapper
59 | .find(Radio)
60 | .at(1)
61 | .children()
62 | .hasClass('ty-radio--checked'),
63 | ).toBe(true);
64 | });
65 | });
66 |
--------------------------------------------------------------------------------
/components/icon/svgs/code-open.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/components/grid/style/col.scss:
--------------------------------------------------------------------------------
1 | @import '../../theme/mixins/mixins.scss';
2 | @import '../../theme/default.scss';
3 |
4 | [class*='#{$namespace}-col-'] {
5 | float: left;
6 | box-sizing: border-box;
7 | }
8 |
9 | @for $i from 0 through 24 {
10 | .#{$namespace}-col-#{$i} {
11 | width: 100% / 24 * $i;
12 | }
13 |
14 | .#{$namespace}-col-offset-#{$i} {
15 | margin-left: 100% / 24 * $i;
16 | }
17 |
18 | .#{$namespace}-col-push-#{$i} {
19 | position: relative;
20 | left: 100% / 24 * $i;
21 | }
22 |
23 | .#{$namespace}-col-pull-#{$i} {
24 | position: relative;
25 | right: 100% / 24 * $i;
26 | }
27 |
28 | .#{$namespace}-col-order-#{$i} {
29 | order: $i;
30 | }
31 | }
32 |
33 | @mixin handleMedia($key, $map: $--breakpoints) {
34 | // 循环断点Map，如果存在则返回
35 | @if map-has-key($map, $key) {
36 | $media: #{inspect(map-get($map, $key))};
37 | @media #{$media} {
38 | @content;
39 | }
40 | } @else {
41 | @warn "Undefeined points: `#{$map}`";
42 | }
43 | }
44 |
45 | @mixin generateAttributes($breakpoint) {
46 | .#{$namespace}-col-#{$breakpoint}-0 {
47 | display: none;
48 | }
49 | @for $i from 0 through 24 {
50 | .#{$namespace}-col-#{$breakpoint}-#{$i} {
51 | width: 100% / 24 * $i;
52 | }
53 |
54 | .#{$namespace}-col-#{$breakpoint}-offset-#{$i} {
55 | margin-left: 100% / 24 * $i;
56 | }
57 |
58 | .#{$namespace}-col-#{$breakpoint}-pull-#{$i} {
59 | position: relative;
60 | right: 100% / 24 * $i;
61 | }
62 |
63 | .#{$namespace}-col-#{$breakpoint}-push-#{$i} {
64 | position: relative;
65 | left: 100% / 24 * $i;
66 | }
67 | .#{$namespace}-col-#{$breakpoint}-order-#{$i} {
68 | order: $i;
69 | }
70 | }
71 | }
72 |
73 | $breakpoints: ('sm', 'md', 'lg', 'xl', 'xxl');
74 |
75 | // xs不添加@media
76 | @include generateAttributes(xs);
77 |
78 | @each $breakpoint in $breakpoints {
79 | @include handleMedia($breakpoint) {
80 | @include generateAttributes($breakpoint);
81 | }
82 | }
83 |
--------------------------------------------------------------------------------
/site/pages/Grid.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Row, Col } from 'components/index';
3 |
4 | export default () => {
5 | return (
6 |
7 |
8 |
9 | col-6
10 |
11 |
12 | col-6
13 |
14 |
15 | col-6
16 |
17 |
18 | col-6
19 |
20 |
21 |
22 |
23 | col-6
24 |
25 |
26 | col-6
27 |
28 |
29 |
30 |
31 | col-6
32 |
33 |
34 | col-6
35 |
36 |
37 |
38 |
39 | col-6
40 |
41 |
42 | col-6
43 |
44 |
45 |
46 |
47 | col-6
48 |
49 |
50 | col-6
51 |
52 |
53 |
54 |
55 | col-6
56 |
57 |
58 | col-6
59 |
60 |
61 |
14 |
22 | {
25 | setLeftVisible(false);
26 | }}
27 | >
28 | Left
29 |
30 |
31 |
39 | {
43 | setRightVisible(false);
44 | }}
45 | >
46 | Right
47 |
48 |
49 |
57 | {
61 | setTopVisible(false);
62 | }}
63 | >
64 | Top
65 |
66 |
67 |
75 | {
79 | setBottomVisible(false);
80 | }}
81 | >
82 | Bottom
83 |
84 |
85 | );
86 | };
87 | ReactDOM.render();
88 | ```
89 |
90 |
91 |
--------------------------------------------------------------------------------
/components/appBar/AppBarInner.tsx:
--------------------------------------------------------------------------------
1 | import React, { forwardRef } from 'react';
2 | import clsx from 'clsx';
3 | import { usePrefixCls } from '../_util/hooks';
4 | import { Col, Button } from '../';
5 | import { ColProps } from '../grid/Col';
6 | import { ButtonProps as IButtonProps } from '../button';
7 |
8 | interface IconButtonProps extends ColProps {
9 | className?: string;
10 | style?: React.CSSProperties;
11 | children?: React.ReactNode;
12 | ButtonProps?: IButtonProps;
13 | }
14 |
15 | export const IconButton = forwardRef(
16 | (props: IconButtonProps, ref: React.RefObject) => {
17 | const { className, children, ButtonProps, ...rest } = props;
18 | const prefixCls = usePrefixCls('appbar');
19 | const classes = clsx(`${prefixCls}__icon`, className);
20 |
21 | return (
22 |
23 |
26 |
27 | );
28 | },
29 | );
30 |
31 | interface TypographyProps {
32 | className?: string;
33 | style?: React.CSSProperties;
34 | children?: React.ReactNode;
35 | }
36 |
37 | export const Typography = forwardRef(
38 | (props: TypographyProps, ref: React.RefObject) => {
39 | const { className, children, ...rest } = props;
40 | const prefixCls = usePrefixCls('appbar');
41 | const classes = clsx(`${prefixCls}__typography`, className);
42 |
43 | return (
44 |
45 | {children}
46 |
47 | );
48 | },
49 | );
50 |
51 | interface ToolBarProps {
52 | className?: string;
53 | style?: React.CSSProperties;
54 | children?: React.ReactNode;
55 | }
56 |
57 | export const ToolBar = forwardRef((props: ToolBarProps, ref: React.RefObject) => {
58 | const { className, children, ...rest } = props;
59 | const prefixCls = usePrefixCls('appbar');
60 | const classes = clsx(`${prefixCls}__toolBar`, className);
61 |
62 | return (
63 |
64 | {children}
65 |
66 | );
67 | });
68 |
--------------------------------------------------------------------------------
/components/switch/style/index.scss:
--------------------------------------------------------------------------------
1 | @import '../../theme/mixins/mixins.scss';
2 | @import '../../theme/default.scss';
3 |
4 | @include b(switch) {
5 | position: relative;
6 | display: inline-block;
7 | box-sizing: border-box;
8 | width: 58px;
9 | height: 38px;
10 | padding: 12px;
11 | vertical-align: middle;
12 | background-color: transparent;
13 | border: 1px solid transparent;
14 | cursor: pointer;
15 |
16 | @include m(default) {
17 | @include e(node) {
18 | background-color: $--color-black-bg;
19 | }
20 | @include e(circle) {
21 | background-color: $--color-white;
22 | }
23 | }
24 | @each $key, $color in $--colors {
25 | @include m($key) {
26 | @include e(node) {
27 | background-color: $color;
28 | }
29 | @include e(circle) {
30 | background-color: $color;
31 | }
32 | }
33 | }
34 |
35 | @include m(disabled) {
36 | cursor: not-allowed;
37 | user-select: none;
38 | @include e(node) {
39 | background-color: $--color-disabled;
40 | }
41 | @include e(circle) {
42 | background-color: $--color-white;
43 | }
44 | }
45 |
46 | &:focus {
47 | outline: 0;
48 | }
49 |
50 | @include m(checked) {
51 | @include e(ripple) {
52 | transform: translateX(40%);
53 | transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
54 | }
55 | }
56 |
57 | @include e(node) {
58 | display: inline-block;
59 | width: 100%;
60 | height: 100%;
61 | background-color: $--color-black-bg;
62 | border-radius: 7px;
63 | opacity: 0.5;
64 | }
65 | @include e(ripple) {
66 | position: absolute;
67 | top: 0;
68 | left: 0;
69 | z-index: 1;
70 | transition: left 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
71 | transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
72 | }
73 | @include e(circle) {
74 | position: relative;
75 | z-index: 1;
76 | width: 20px;
77 | height: 20px;
78 | background-color: $--color-white;
79 | border-radius: 50%;
80 | box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14),
81 | 0 2px 1px -1px rgba(0, 0, 0, 0.12);
82 | cursor: pointer;
83 | pointer-events: none;
84 | }
85 | }
86 |
--------------------------------------------------------------------------------
/.circleci/config.yml:
--------------------------------------------------------------------------------
1 | defaults: &defaults
2 | docker:
3 | - image: circleci/node:8
4 |
5 | version: 2
6 | jobs:
7 | prepare:
8 | <<: *defaults
9 | steps:
10 | - checkout
11 | - restore_cache:
12 | keys:
13 | - v1-dependencies-{{ checksum "package.json" }}
14 | - run: yarn install
15 | - save_cache:
16 | paths:
17 | - node_modules
18 | key: v1-dependencies-{{ checksum "package.json" }}
19 | - persist_to_workspace:
20 | root: .
21 | paths:
22 | - node_modules
23 | dist:
24 | <<: *defaults
25 | steps:
26 | - checkout
27 | - attach_workspace:
28 | at: .
29 | - run: yarn dist
30 | - persist_to_workspace:
31 | root: .
32 | paths:
33 | - dist
34 | - package.json
35 | - README.md
36 | - LICENSE
37 | compile:
38 | <<: *defaults
39 | steps:
40 | - checkout
41 | - attach_workspace:
42 | at: .
43 | - run: yarn compile
44 | - persist_to_workspace:
45 | root: .
46 | paths:
47 | - lib
48 | - es
49 | test:
50 | <<: *defaults
51 | steps:
52 | - checkout
53 | - attach_workspace:
54 | at: .
55 | - run: yarn ci
56 | - run: bash <(curl -s https://codecov.io/bash)
57 | - store_test_results:
58 | path: test-results
59 | publish:
60 | <<: *defaults
61 | steps:
62 | - attach_workspace:
63 | at: .
64 | - run: npm config set //registry.npmjs.org/:_authToken $NPM_TOKEN
65 | - run: npm publish
66 |
67 | workflows:
68 | version: 2
69 | build_accept_deploy:
70 | jobs:
71 | - prepare
72 | - test:
73 | requires:
74 | - prepare
75 | - dist:
76 | requires:
77 | - test
78 | filters:
79 | branches:
80 | only: deploy
81 | - compile:
82 | requires:
83 | - test
84 | filters:
85 | branches:
86 | only: deploy
87 | - publish:
88 | requires:
89 | - dist
90 | - compile
91 |
--------------------------------------------------------------------------------
/components/switch/__test__/index.test.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { render, fireEvent } from '@testing-library/react';
3 | import Switch from '..';
4 |
5 | describe('Switch', () => {
6 | it('should render correctly', () => {
7 | const { asFragment } = render();
8 | expect(asFragment()).toMatchSnapshot();
9 | });
10 |
11 | it('should support checked', () => {
12 | render();
13 | expect(document.querySelectorAll('.ty-switch--checked').length).toBe(1);
14 | });
15 |
16 | it('should support keyBoard events', () => {
17 | render();
18 | const switchDOM = document.querySelector('.ty-switch');
19 | expect(switchDOM.classList).not.toContain('ty-switch--checked');
20 | fireEvent.keyDown(switchDOM, { key: 'right', keyCode: 39 });
21 | expect(switchDOM.classList).toContain('ty-switch--checked');
22 | fireEvent.keyDown(switchDOM, { key: 'left', keyCode: 37 });
23 | expect(switchDOM.classList).not.toContain('ty-switch--checked');
24 | });
25 |
26 | it('should fire onChange correctly', () => {
27 | const handleChange = jest.fn();
28 | render();
29 | const switchDOM = document.querySelector('.ty-switch');
30 | fireEvent.click(switchDOM);
31 | expect(handleChange).toHaveBeenCalled();
32 | });
33 |
34 | it('should support disabled', () => {
35 | const handleChange = jest.fn();
36 | const { container } = render();
37 | fireEvent.click(container);
38 | expect(handleChange).not.toHaveBeenCalled();
39 | });
40 |
41 | it('should fire onClick correctly', () => {
42 | const handleClick = jest.fn();
43 | render();
44 | const switchDOM = document.querySelector('.ty-switch');
45 | fireEvent.click(switchDOM);
46 | expect(handleClick).toHaveBeenCalled();
47 | });
48 |
49 | it('should support defaultChecked', () => {
50 | const { container } = render();
51 | expect(container.querySelectorAll('.ty-switch--checked').length).toBe(1);
52 | fireEvent.click(container.querySelector('.ty-switch'));
53 | expect(container.querySelectorAll('.ty-switch--checked').length).toBe(0);
54 | });
55 | });
56 |
--------------------------------------------------------------------------------
/site/pages/Input.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import { Input, Icon } from 'components';
3 |
4 | export default () => {
5 | const [inputVal, setInputVal] = useState("");
6 |
7 | return (
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
23 |
24 | }
27 | labelFloat
28 | placeholder="请输入姓名"
29 | />
30 | } placeholder="请输入姓名" />
31 | } placeholder="请输入姓名" />
32 | } placeholder="请输入姓名" />
33 | } placeholder="请输入姓名" />
34 | {
39 | console.log('focus');
40 | }}
41 | onBlur={() => {
42 | console.log('blur');
43 | }}
44 | />
45 | {
51 | setInputVal(e.target.value);
52 | }}
53 | />
54 | {
55 | console.log(1);
56 | }} />
57 | }
59 | placeholder="请输入"
60 | type="textarea"
61 | />
62 | }
67 | placeholder="请输入"
68 | type="textarea"
69 | />
70 |
71 | );
72 | };
73 |
--------------------------------------------------------------------------------
/components/button/__test__/__snapshots__/index.test.jsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`Button render correctly 1`] = `
4 |
16 | `;
17 |
18 | exports[`Button render correctly 2`] = `
19 |
31 | `;
32 |
33 | exports[`Button render correctly 3`] = `
34 |
46 | `;
47 |
48 | exports[`Button render correctly 4`] = `
49 |
61 | `;
62 |
63 | exports[`Button should not render as link button when href is undefined 1`] = `
64 |
76 | `;
77 |
78 | exports[`Button should support link button 1`] = `
79 |
84 |
87 | link button
88 |
89 |
92 |
93 | `;
94 |
95 | exports[`Button should support ripple attribute 1`] = `
96 |
105 | `;
106 |
--------------------------------------------------------------------------------
/site/react-code-view/lib/style/dracula.css:
--------------------------------------------------------------------------------
1 | .cm-s-dracula.CodeMirror {
2 | margin: 12px;
3 | font-size: 16px;
4 |
5 | font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
6 | line-height: 24px;
7 | tab-size: 1.5em;
8 | border-radius: 6px;
9 | box-shadow: rgba(0, 0, 0, 0.55) 0 1px 12px;
10 | }
11 |
12 | .cm-s-dracula.CodeMirror,
13 | .cm-s-dracula .CodeMirror-gutters {
14 | color: #f8f8f2 !important;
15 | background-color: #282a36 !important;
16 | border: none;
17 | }
18 | .cm-s-dracula .CodeMirror-gutters {
19 | color: #282a36;
20 | }
21 | .cm-s-dracula .CodeMirror-cursor {
22 | border-left: solid thin #f8f8f0;
23 | }
24 | .cm-s-dracula .CodeMirror-linenumber {
25 | color: #6d8a88;
26 | }
27 | .cm-s-dracula .CodeMirror-selected {
28 | background: rgba(255, 255, 255, 0.1);
29 | }
30 | .cm-s-dracula .CodeMirror-line::selection,
31 | .cm-s-dracula .CodeMirror-line > span::selection,
32 | .cm-s-dracula .CodeMirror-line > span > span::selection {
33 | background: rgba(255, 255, 255, 0.1);
34 | }
35 | .cm-s-dracula .CodeMirror-line::-moz-selection,
36 | .cm-s-dracula .CodeMirror-line > span::-moz-selection,
37 | .cm-s-dracula .CodeMirror-line > span > span::-moz-selection {
38 | background: rgba(255, 255, 255, 0.1);
39 | }
40 | .cm-s-dracula span.cm-comment {
41 | color: #6272a4;
42 | }
43 | .cm-s-dracula span.cm-string,
44 | .cm-s-dracula span.cm-string-2 {
45 | color: #f1fa8c;
46 | }
47 | .cm-s-dracula span.cm-number {
48 | color: #bd93f9;
49 | }
50 | .cm-s-dracula span.cm-variable {
51 | color: #50fa7b;
52 | }
53 | .cm-s-dracula span.cm-variable-2 {
54 | color: white;
55 | }
56 | .cm-s-dracula span.cm-def {
57 | color: #50fa7b;
58 | }
59 | .cm-s-dracula span.cm-operator {
60 | color: #ff79c6;
61 | }
62 | .cm-s-dracula span.cm-keyword {
63 | color: #ff79c6;
64 | }
65 | .cm-s-dracula span.cm-atom {
66 | color: #bd93f9;
67 | }
68 | .cm-s-dracula span.cm-meta {
69 | color: #f8f8f2;
70 | }
71 | .cm-s-dracula span.cm-tag {
72 | color: #ff79c6;
73 | }
74 | .cm-s-dracula span.cm-attribute {
75 | color: #50fa7b;
76 | }
77 | .cm-s-dracula span.cm-qualifier {
78 | color: #50fa7b;
79 | }
80 | .cm-s-dracula span.cm-property {
81 | color: #66d9ef;
82 | }
83 | .cm-s-dracula span.cm-builtin {
84 | color: #50fa7b;
85 | }
86 | .cm-s-dracula span.cm-variable-3,
87 | .cm-s-dracula span.cm-type {
88 | color: #ffb86c;
89 | }
90 |
91 | .cm-s-dracula .CodeMirror-activeline-background {
92 | background: rgba(255, 255, 255, 0.1);
93 | }
94 | .cm-s-dracula .CodeMirror-matchingbracket {
95 | color: white !important;
96 | text-decoration: underline;
97 | }
98 |
--------------------------------------------------------------------------------
/components/drawer/drawer.tsx:
--------------------------------------------------------------------------------
1 | import React, { forwardRef, useState, useRef, useLayoutEffect } from 'react';
2 | import { CSSTransition } from 'react-transition-group';
3 | import { usePrefixCls } from '../_util/hooks';
4 | import { duration } from '../_util/transition';
5 | import Portal from '../portal';
6 | import Sider, { SiderProps } from './Sider';
7 | import { useForkRef } from '../_util/reactHelpers';
8 |
9 | export interface DrawerProps extends Partial {
10 | visible?: boolean;
11 | mask?: boolean;
12 | onClose?: (e: React.MouseEvent) => void;
13 | }
14 |
15 | const Drawer = forwardRef((props: DrawerProps, ref: React.RefObject) => {
16 | const { visible = false, width, onClose, mask = true, children, ...rest } = props;
17 | const prefixCls = usePrefixCls('drawer');
18 | const [prevVisible, setPrevVisible] = useState(false);
19 | const [exciting, setExciting] = useState(false);
20 | const maskNode = useRef(null);
21 | const handleRef = useForkRef(maskNode, ref);
22 |
23 | const removeMoveHandler = (e: React.TouchEvent | TouchEvent) => {
24 | e.preventDefault();
25 | };
26 |
27 | useLayoutEffect(() => {
28 | if (maskNode && maskNode.current) {
29 | maskNode.current.addEventListener('touchmove', removeMoveHandler, { passive: false });
30 | }
31 | return () => {
32 | if (maskNode && maskNode.current) {
33 | maskNode.current.removeEventListener('touchmove', removeMoveHandler);
34 | }
35 | };
36 | }, [visible]);
37 |
38 | if (visible !== prevVisible) {
39 | if (prevVisible && !visible) {
40 | setExciting(true);
41 | }
42 | setPrevVisible(visible);
43 | }
44 |
45 | const handleMaskClick = (e: React.MouseEvent) => {
46 | if (onClose) {
47 | onClose(e);
48 | }
49 | };
50 |
51 | const onMaskExited = () => {
52 | setExciting(false);
53 | };
54 |
55 | return (
56 |
57 | {mask && (
58 |
69 |
70 |
71 | )}
72 |
73 | {children}
74 |
75 |
76 | );
77 | });
78 | export default Drawer;
79 |
--------------------------------------------------------------------------------