;
51 | const { label, disabled } = childElement.props;
52 | const classes = classNames('better-tabs-nav-item', {
53 | 'is-active': activeIndex === index,
54 | 'disabled': disabled,
55 | });
56 | return (
57 | { handleClick(e, index, disabled) }}
61 | >
62 | { label }
63 |
64 | );
65 | });
66 | };
67 | const renderContent = () => {
68 | return React.Children.map(children, (child, index) => {
69 | if (index === activeIndex) {
70 | return child;
71 | }
72 | });
73 | };
74 | return (
75 |
76 |
77 | { renderNavLinks() }
78 |
79 |
80 | { renderContent() }
81 |
82 |
欢迎来到 betterui 组件库
9 | 这是一个基于 React 的组件库，用于快速搭建页面。
10 | 安装
11 | npm 安装
12 | 推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。
13 |
14 | npm install @zhuangjiaqing/betterui --save
15 |
16 |
17 |
18 |
19 | CDN
20 | 目前可以通过 unpkg.com/@zhuangjiaqing/betterui 获取到最新版本的资源，在页面上引入 css 和 js 文件即可开始使用。
21 |
22 | {'<'}!-- 引入样式 --{'>'}
23 | <link rel="stylesheet" href="https://unpkg.com/@zhuangjiaqing/betterui@1.0.3/dist/index.css" />
24 | {'<'}!-- 引入组件库 --{'>'}
25 | <script src="https://unpkg.com/@zhuangjiaqing/betterui@1.0.3/dist/index.umd.js"></script>
26 |
27 | 注意：我们建议使用 CDN 引入 betterui 的用户在链接地址上锁定版本，以免将来 betterui 升级时受到非兼容性更新的影响。锁定版本的方法请查看 unpkg.com。
28 |
29 | );
30 | }, { info : { disable: true } })
31 | .add('快速上手', () => {
32 | return (
33 | <>
34 | 这里我们提供两个基础的例子来快速上手 betterui。
35 | CDN
36 |
37 | 通过 CDN 的方式我们可以很容易地使用 betterui 写出一个 Hello world 页面。
38 | 示例源码
39 |
40 | 在线演示
41 |
42 | npm安装
43 |
44 |
45 | npm install @zhuangjiaqing/betterui --save
46 |
47 |
48 |
49 | 修改 src/App.tsx，引入 betterui 的按钮组件。
50 |
51 |
52 |
53 | import React from 'react';
54 | import '@zhuangjiaqing/betterui/dist/index.css';
55 | import { '{ BetterButton }' } from '@zhuangjiaqing/betterui';
56 |
57 | {`function App() {
58 | return (
59 |
60 | Hello World
61 |
62 | );
63 | }`}
64 |
65 | export default App;
66 |
67 |
68 |
69 |
70 | 好了，现在你应该能看到页面上已经有了 betterui 的蓝色按钮组件，接下来就可以继续选用其他组件开发应用了。
71 | 示例源码
72 |
73 |
74 | );
75 | }, { info : { disable: true } });
76 |
--------------------------------------------------------------------------------
/src/stories/Page.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import { Header } from './Header';
4 | import './page.css';
5 |
6 | type User = {
7 | name: string;
8 | };
9 |
10 | export const Page: React.VFC = () => {
11 | const [user, setUser] = React.useState();
12 |
13 | return (
14 |
15 | setUser({ name: 'Jane Doe' })}
18 | onLogout={() => setUser(undefined)}
19 | onCreateAccount={() => setUser({ name: 'Jane Doe' })}
20 | />
21 |
22 |
23 | Pages in Storybook
24 |
25 | We recommend building UIs with a{' '}
26 |
27 | component-driven
28 | {' '}
29 | process starting with atomic components and ending with pages.
30 |
31 |
32 | Render pages with mock data. This makes it easy to build and review page states without
33 | needing to navigate to them in your app. Here are some handy patterns for managing page
34 | data in Storybook:
35 |
36 |
37 | -
38 | Use a higher-level connected component. Storybook helps you compose such data from the
39 | "args" of child component stories
40 |
41 | -
42 | Assemble data in the page component from your services. You can mock these services out
43 | using Storybook.
44 |
45 |
46 |
47 | Get a guided tutorial on component-driven development at{' '}
48 |
49 | Storybook tutorials
50 |
51 | . Read more in the{' '}
52 |
53 | docs
54 |
55 | .
56 |
57 |
58 |
Tip Adjust the width of the canvas with the{' '}
59 |
68 | Viewports addon in the toolbar
69 |
89 |
90 | { renderChildren() }
91 |
92 |
93 | );
94 | }
95 |
96 | Menu.defaultProps = {
97 | defaultIndex: '0',
98 | mode: "horizontal",
99 | defaultOpenSubMenus: [],
100 | };
101 |
102 | export default Menu;
--------------------------------------------------------------------------------
/storybook-static/824.a95daad82d70a59c564b.manager.bundle.js.LICENSE.txt:
--------------------------------------------------------------------------------
1 | /*
2 | object-assign
3 | (c) Sindre Sorhus
4 | @license MIT
5 | */
6 |
7 | /*!
8 | * Fuse.js v3.6.1 - Lightweight fuzzy-search (http://fusejs.io)
9 | *
10 | * Copyright (c) 2012-2017 Kirollos Risk (http://kiro.me)
11 | * All Rights Reserved. Apache Software License 2.0
12 | *
13 | * http://www.apache.org/licenses/LICENSE-2.0
14 | */
15 |
16 | /*!
17 | * https://github.com/es-shims/es5-shim
18 | * @license es5-shim Copyright 2009-2020 by contributors, MIT License
19 | * see https://github.com/es-shims/es5-shim/blob/master/LICENSE
20 | */
21 |
22 | /*!
23 | * isobject
24 | *
25 | * Copyright (c) 2014-2017, Jon Schlinkert.
26 | * Released under the MIT License.
27 | */
28 |
29 | /*! *****************************************************************************
30 | Copyright (c) Microsoft Corporation.
31 |
32 | Permission to use, copy, modify, and/or distribute this software for any
33 | purpose with or without fee is hereby granted.
34 |
35 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
36 | REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
37 | AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
38 | INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
39 | LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
40 | OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
41 | PERFORMANCE OF THIS SOFTWARE.
42 | ***************************************************************************** */
43 |
44 | /*! store2 - v2.13.1 - 2021-12-20
45 | * Copyright (c) 2021 Nathan Bubna; Licensed (MIT OR GPL-3.0) */
46 |
47 | /**
48 | * @license React
49 | * react-dom.production.min.js
50 | *
51 | * Copyright (c) Facebook, Inc. and its affiliates.
52 | *
53 | * This source code is licensed under the MIT license found in the
54 | * LICENSE file in the root directory of this source tree.
55 | */
56 |
57 | /**
58 | * @license React
59 | * react.production.min.js
60 | *
61 | * Copyright (c) Facebook, Inc. and its affiliates.
62 | *
63 | * This source code is licensed under the MIT license found in the
64 | * LICENSE file in the root directory of this source tree.
65 | */
66 |
67 | /**
68 | * @license React
69 | * scheduler.production.min.js
70 | *
71 | * Copyright (c) Facebook, Inc. and its affiliates.
72 | *
73 | * This source code is licensed under the MIT license found in the
74 | * LICENSE file in the root directory of this source tree.
75 | */
76 |
77 | /**
78 | * React Router DOM v6.0.2
79 | *
80 | * Copyright (c) Remix Software Inc.
81 | *
82 | * This source code is licensed under the MIT license found in the
83 | * LICENSE.md file in the root directory of this source tree.
84 | *
85 | * @license MIT
86 | */
87 |
88 | /**
89 | * React Router v6.0.2
90 | *
91 | * Copyright (c) Remix Software Inc.
92 | *
93 | * This source code is licensed under the MIT license found in the
94 | * LICENSE.md file in the root directory of this source tree.
95 | *
96 | * @license MIT
97 | */
98 |
--------------------------------------------------------------------------------
/src/components/Menu/subMenu.tsx:
--------------------------------------------------------------------------------
1 | import React,{ useContext, useState, FunctionComponentElement, ReactNode } from "react";
2 | import classNames from "classnames";
3 | import { MenuContext } from "./menu";
4 | import { MenuItemProps } from './menuItem';
5 | import Icon from '../Icon';
6 | import Transition from '../Transition';
7 |
8 | export interface SubMenuProps {
9 | /**选填，设置 SubMenu 的索引值 */
10 | index?: string;
11 | /**必填，设置 SubMenu 的标题文字 */
12 | title: string;
13 | /**选填，设置 SubMenu 的自定义类名 */
14 | className?: string;
15 | /**选填，设置 SubMenu 的子元素 */
16 | children?: ReactNode,
17 | };
18 |
19 | const SubMenu: React.FC = (props) => {
20 | const { index, title, className, children } = props;
21 | const context = useContext(MenuContext);
22 | const openedSubMenus = context.defaultOpenSubMenus as Array;
23 | const isOpen = (index && context.mode === 'vertical') ? openedSubMenus.includes(index) : false;
24 | const [ menuOpen, setOpen ] = useState(isOpen);
25 | const classes = classNames("menu-item submenu-item", className, {
26 | "is-active": context.index.includes(`${index}`),
27 | 'is-opened': menuOpen,
28 | 'is-vertical': context.mode === 'vertical',
29 | });
30 |
31 | const handleClick = (e: React.MouseEvent) => {
32 | e.preventDefault();
33 | setOpen(!menuOpen);
34 | }
35 | let timer: any;
36 | const handleMouse = (e: React.MouseEvent, toggle: boolean) => {
37 | clearTimeout(timer);
38 | e.preventDefault();
39 | timer = setTimeout(() => {
40 | setOpen(toggle);
41 | }, 300);
42 | }
43 | const allEvents = (
44 | context.mode !== 'vertical' ?
45 | {
46 | onClick: handleClick,
47 | onMouseEnter: (e: React.MouseEvent) => { handleMouse(e, true) },
48 | onMouseLeave: (e: React.MouseEvent) => { handleMouse(e, false) },
49 | } :
50 | {
51 | onClick: handleClick,
52 | }
53 | );
54 | const renderChildren = () => {
55 | const subMenuClasses = classNames("better-submenu", {
56 | "menu-opened": menuOpen,
57 | });
58 | const childrenComponent = React.Children.map(children, (child, i) => {
59 | const childElement = child as FunctionComponentElement;
60 | if (childElement.type.displayName === "MenuItem") {
61 | return React.cloneElement(childElement, {
62 | index: `${index}-${i}`,
63 | });
64 | } else {
65 | console.error("Warning: SubMenu has a child which is not a MenuItem component");
66 | }
67 | });
68 | return (
69 |
74 |
75 | { childrenComponent }
76 |
77 |
78 | );
79 | }
80 | return (
81 |
82 |
83 | { title }
84 |
85 |
86 | { renderChildren() }
87 |
88 | );
89 | }
90 |
91 | SubMenu.displayName = 'SubMenu';
92 | export default SubMenu;
--------------------------------------------------------------------------------
/src/components/AutoComplete/autoComplete.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { ComponentStory, ComponentMeta } from '@storybook/react';
3 | import BetterAutoComplete, { AutoCompleteProps, DataSourceType } from './autoComplete';
4 | interface LakerPlayerProps {
5 | value: string;
6 | number: number;
7 | };
8 | interface GithubUserProps {
9 | login: string;
10 | url: string;
11 | avatar_url: string;
12 | };
13 | export default {
14 | id: 'BetterAutoComplete',
15 | title: 'AutoComplete 联想搜索',
16 | component: BetterAutoComplete,
17 | parameters: {
18 | docs: {
19 | source: {
20 | type: "code",
21 | },
22 | },
23 | },
24 | } as ComponentMeta;
25 |
26 | export const SimpleAutoComplete: ComponentStory = (args) => {
27 | const playerArr = ['bradley', 'pope', 'caruso', 'cook', 'cousins', 'james', 'AD', 'green', 'howard', 'kuzma', 'McGee', 'rando'];
28 | const handleFetch = (query: string) => playerArr.filter(name => name.includes(query)).map(name => ({ value: name, }));
29 | return (
30 |
35 | );
36 | };
37 | SimpleAutoComplete.storyName = '支持基本的联想搜索';
38 |
39 | export const CustomAutoComplete = (args: AutoCompleteProps) => {
40 | const playerArr = [
41 | {value: 'bradley', number: 11},
42 | {value: 'pope', number: 1},
43 | {value: 'caruso', number: 4},
44 | {value: 'cook', number: 2},
45 | {value: 'cousins', number: 15},
46 | {value: 'james', number: 23},
47 | {value: 'AD', number: 3},
48 | {value: 'green', number: 14},
49 | {value: 'howard', number: 39},
50 | {value: 'kuzma', number: 0},
51 | ] ;
52 | const handleFetch = (query: string) => playerArr.filter(player => player.value.includes(query));
53 | const renderOption = (item: DataSourceType) => {
54 | const player = item as DataSourceType;
55 | return (
56 | <>
57 | 球星名字: {player.value}
58 | 球衣号码: {player.number}
59 |
60 | );
61 | };
62 | return (
63 |
69 | );
70 | };
71 | CustomAutoComplete.storyName = '支持自定义搜索结果模版';
72 |
73 | export const AysncAutoComplete = (args: AutoCompleteProps) => {
74 | const handleFetch = (query: string) => {
75 | return fetch(`https://api.github.com/search/users?q=${query}`)
76 | .then(res => res.json())
77 | .then(({ items }) => items.slice(0, 10).map((item: any) => ({ value: item.login, ...item, })));
78 | };
79 |
80 | const renderOption = (item: DataSourceType) => {
81 | const user = item as DataSourceType;
82 | return (
83 | <>
84 | { user.value }
85 |
86 | );
87 | };
88 | return (
89 |
95 | );
96 | };
97 | AysncAutoComplete.storyName = '支持异步搜索';
--------------------------------------------------------------------------------
/storybook-static/320.8d8728bb.iframe.bundle.js.LICENSE.txt:
--------------------------------------------------------------------------------
1 | /*!
2 | Copyright (c) 2018 Jed Watson.
3 | Licensed under the MIT License (MIT), see
4 | http://jedwatson.github.io/classnames
5 | */
6 |
7 | /*!
8 | * The buffer module from node.js, for the browser.
9 | *
10 | * @author Feross Aboukhadijeh
11 | * @license MIT
12 | */
13 |
14 | /*!
15 | * https://github.com/es-shims/es5-shim
16 | * @license es5-shim Copyright 2009-2020 by contributors, MIT License
17 | * see https://github.com/es-shims/es5-shim/blob/master/LICENSE
18 | */
19 |
20 | /*!
21 | * is-plain-object
22 | *
23 | * Copyright (c) 2014-2017, Jon Schlinkert.
24 | * Released under the MIT License.
25 | */
26 |
27 | /*!
28 | * isobject
29 | *
30 | * Copyright (c) 2014-2017, Jon Schlinkert.
31 | * Released under the MIT License.
32 | */
33 |
34 | /*! *****************************************************************************
35 | Copyright (c) Microsoft Corporation.
36 |
37 | Permission to use, copy, modify, and/or distribute this software for any
38 | purpose with or without fee is hereby granted.
39 |
40 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
41 | REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
42 | AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
43 | INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
44 | LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
45 | OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
46 | PERFORMANCE OF THIS SOFTWARE.
47 | ***************************************************************************** */
48 |
49 | /**
50 | * @license React
51 | * react-dom.production.min.js
52 | *
53 | * Copyright (c) Facebook, Inc. and its affiliates.
54 | *
55 | * This source code is licensed under the MIT license found in the
56 | * LICENSE file in the root directory of this source tree.
57 | */
58 |
59 | /**
60 | * @license React
61 | * react-jsx-runtime.production.min.js
62 | *
63 | * Copyright (c) Facebook, Inc. and its affiliates.
64 | *
65 | * This source code is licensed under the MIT license found in the
66 | * LICENSE file in the root directory of this source tree.
67 | */
68 |
69 | /**
70 | * @license React
71 | * react.production.min.js
72 | *
73 | * Copyright (c) Facebook, Inc. and its affiliates.
74 | *
75 | * This source code is licensed under the MIT license found in the
76 | * LICENSE file in the root directory of this source tree.
77 | */
78 |
79 | /**
80 | * @license React
81 | * scheduler.production.min.js
82 | *
83 | * Copyright (c) Facebook, Inc. and its affiliates.
84 | *
85 | * This source code is licensed under the MIT license found in the
86 | * LICENSE file in the root directory of this source tree.
87 | */
88 |
89 | /** @license React v17.0.2
90 | * react-is.production.min.js
91 | *
92 | * Copyright (c) Facebook, Inc. and its affiliates.
93 | *
94 | * This source code is licensed under the MIT license found in the
95 | * LICENSE file in the root directory of this source tree.
96 | */
97 |
98 | //! stable.js 0.1.8, https://github.com/Two-Screen/stable
99 |
100 | //! © 2018 Angry Bytes and contributors. MIT licensed.
101 |
--------------------------------------------------------------------------------
/src/components/Upload/upload.test.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable testing-library/no-wait-for-multiple-assertions */
2 | /* eslint-disable testing-library/prefer-presence-queries */
3 | /* eslint-disable testing-library/prefer-screen-queries */
4 | /* eslint-disable testing-library/no-node-access */
5 | /* eslint-disable testing-library/no-render-in-setup */
6 | import '@testing-library/jest-dom/extend-expect';
7 | import React from 'react';
8 | import axios from 'axios';
9 | import { render, RenderResult, fireEvent, waitFor } from '@testing-library/react';
10 | import Upload, { UploadProps } from './upload';
11 |
12 | jest.mock('../Icon', () => {
13 | return (props: any) => {
14 | const { onClick, icon } = props;
15 | return { icon };
16 | };
17 | });
18 | jest.mock('axios');
19 |
20 | const mockedAxios = axios as jest.Mocked;
21 | const testProps: UploadProps = {
22 | action: "fakeurl.com",
23 | onSuccess: jest.fn(),
24 | onChange: jest.fn(),
25 | onRemove: jest.fn(),
26 | drag: true,
27 | };
28 | let wrapper: RenderResult, fileInput: HTMLInputElement, uploadArea: HTMLElement;
29 | const testFile = new File(['xyz'], 'test.png', { type: 'image/png' });
30 | describe('test upload component', () => {
31 | beforeEach(() => {
32 | wrapper = render(Click to upload);
33 | fileInput = wrapper.container.querySelector('.better-file-input') as HTMLInputElement;
34 | uploadArea = wrapper.queryByText('Click to upload') as HTMLElement;
35 | });
36 | it('upload process should works fine', async () => {
37 | const { queryByText, getByText } = wrapper;
38 | mockedAxios.post.mockResolvedValue({'data': 'cool'});
39 | expect(uploadArea).toBeInTheDocument();
40 | expect(fileInput).not.toBeVisible();
41 | fireEvent.change(fileInput, { target: { files: [testFile] }});
42 | // expect(queryByText('spinner')).toBeInTheDocument();
43 | await waitFor(() => {
44 | expect(queryByText('test.png')).toBeInTheDocument();
45 | expect(queryByText('check-circle')).toBeInTheDocument();
46 | });
47 | // expect(testProps.onSuccess).toHaveBeenCalledWith('cool', expect.objectContaining({
48 | // raw: testFile,
49 | // status: 'success',
50 | // response: 'cool',
51 | // name: 'test.png',
52 | // }));
53 | // expect(testProps.onChange).toHaveBeenCalledWith(expect.objectContaining({
54 | // raw: testFile,
55 | // status: 'success',
56 | // response: 'cool',
57 | // name: 'test.png',
58 | // }));
59 | expect(queryByText('times')).toBeInTheDocument();
60 | fireEvent.click(getByText('times'));
61 | expect(queryByText('test.png')).not.toBeInTheDocument();
62 | expect(testProps.onRemove).toHaveBeenCalledWith(expect.objectContaining({
63 | raw: testFile,
64 | status: 'success',
65 | name: 'test.png',
66 | }));
67 | });
68 | it('drag and drop files should works fine', async () => {
69 | mockedAxios.post.mockResolvedValue({'data': 'cool'});
70 | fireEvent.dragOver(uploadArea);
71 | expect(uploadArea).toHaveClass('is-dragover');
72 | fireEvent.dragLeave(uploadArea);
73 | expect(uploadArea).not.toHaveClass('is-dragover');
74 | fireEvent.drop(uploadArea, {
75 | dataTransfer: {
76 | files: [testFile],
77 | },
78 | });
79 | await waitFor(() => {
80 | expect(wrapper.queryByText('test.png')).toBeInTheDocument();
81 | });
82 | // expect(testProps.onSuccess).toHaveBeenCalledWith('cool', expect.objectContaining({
83 | // raw: testFile,
84 | // status: 'success',
85 | // response: 'cool',
86 | // name: 'test.png',
87 | // }));
88 | });
89 | });
--------------------------------------------------------------------------------
/storybook-static/192.b37a6581.iframe.bundle.js:
--------------------------------------------------------------------------------
1 | "use strict";(self.webpackChunk_zhuangjiaqing_betterui=self.webpackChunk_zhuangjiaqing_betterui||[]).push([[192],{"./node_modules/@storybook/preview-web/dist/esm/renderDocs.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{renderDocs:()=>renderDocs,unmountDocs:()=>unmountDocs});__webpack_require__("./node_modules/@storybook/preview-web/node_modules/regenerator-runtime/runtime.js"),__webpack_require__("./node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("./node_modules/core-js/modules/es.promise.js");var react=__webpack_require__("./node_modules/react/index.js"),react_dom=__webpack_require__("./node_modules/react-dom/index.js"),wrapper={fontSize:"14px",letterSpacing:"0.2px",margin:"10px 0"},main={margin:"auto",padding:30,borderRadius:10,background:"rgba(0,0,0,0.03)"},heading={textAlign:"center"},NoDocs=function NoDocs(){return react.createElement("div",{style:wrapper,className:"sb-nodocs sb-wrapper"},react.createElement("div",{style:main},react.createElement("h1",{style:heading},"No Docs"),react.createElement("p",null,"Sorry, but there are no docs for the selected story. To add them, set the story's ",react.createElement("code",null,"docs")," parameter. If you think this is an error:"),react.createElement("ul",null,react.createElement("li",null,"Please check the story definition."),react.createElement("li",null,"Please check the Storybook config."),react.createElement("li",null,"Try reloading the page.")),react.createElement("p",null,"If the problem persists, check the browser console, or the terminal you've run Storybook from.")))};function asyncGeneratorStep(gen,resolve,reject,_next,_throw,key,arg){try{var info=gen[key](arg),value=info.value}catch(error){return void reject(error)}info.done?resolve(value):Promise.resolve(value).then(_next,_throw)}function renderDocs(story,docsContext,element,callback){return function renderDocsAsync(_x,_x2,_x3){return _renderDocsAsync.apply(this,arguments)}(story,docsContext,element).then(callback)}function _renderDocsAsync(){return _renderDocsAsync=function _asyncToGenerator(fn){return function(){var self=this,args=arguments;return new Promise((function(resolve,reject){var gen=fn.apply(self,args);function _next(value){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"next",value)}function _throw(err){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"throw",err)}_next(void 0)}))}}(regeneratorRuntime.mark((function _callee(story,docsContext,element){var _docs$getContainer,_docs$getPage,docs,DocsContainer,Page,docsElement;return regeneratorRuntime.wrap((function _callee$(_context){for(;;)switch(_context.prev=_context.next){case 0:if(!(null!=(docs=story.parameters.docs)&&docs.getPage||null!=docs&&docs.page)||(null!=docs&&docs.getContainer||null!=docs&&docs.container)){_context.next=3;break}throw new Error("No `docs.container` set, did you run `addon-docs/preset`?");case 3:if(_context.t1=docs.container,_context.t1){_context.next=8;break}return _context.next=7,null===(_docs$getContainer=docs.getContainer)||void 0===_docs$getContainer?void 0:_docs$getContainer.call(docs);case 7:_context.t1=_context.sent;case 8:if(_context.t0=_context.t1,_context.t0){_context.next=11;break}_context.t0=function(_ref){var children=_ref.children;return react.createElement(react.Fragment,null,children)};case 11:if(DocsContainer=_context.t0,_context.t3=docs.page,_context.t3){_context.next=17;break}return _context.next=16,null===(_docs$getPage=docs.getPage)||void 0===_docs$getPage?void 0:_docs$getPage.call(docs);case 16:_context.t3=_context.sent;case 17:if(_context.t2=_context.t3,_context.t2){_context.next=20;break}_context.t2=NoDocs;case 20:return Page=_context.t2,docsElement=react.createElement(DocsContainer,{key:story.componentId,context:docsContext},react.createElement(Page,null)),_context.next=24,new Promise((function(resolve){react_dom.render(docsElement,element,resolve)}));case 24:case"end":return _context.stop()}}),_callee)}))),_renderDocsAsync.apply(this,arguments)}function unmountDocs(element){react_dom.unmountComponentAtNode(element)}NoDocs.displayName="NoDocs"}}]);
--------------------------------------------------------------------------------
/src/components/Form/formItem.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable react-hooks/exhaustive-deps */
2 | import React, { FC, ReactNode, useContext, useEffect } from 'react';
3 | import classNames from 'classnames';
4 | import { FormContext } from './form';
5 | import { CustomRule } from './useStore';
6 |
7 | export type SomeRequired = T & Required> & Omit;
8 | export interface FormItemProps {
9 | /**必填，设置表单项字段名 */
10 | name: string,
11 | /**选填，设置表单项标签文本 */
12 | label?: string;
13 | /**选填，设置表单项子元素 */
14 | children?: ReactNode;
15 | /**选填，设置表单项值的属性，例如 checkbox 的是 'checked' */
16 | valuePropName?: string;
17 | /**选填，设置表单项值的更新触发事件 */
18 | trigger?: string;
19 | /**选填，设置如何将 event 的值转换成字段值 */
20 | getValueFromEvent?: (...args: any) => any;
21 | /**选填，设置校验规则 */
22 | rules?: CustomRule[];
23 | /**选填，设置校验触发事件 */
24 | validateTrigger?: string;
25 | };
26 |
27 | export const FormItem: FC = (props) => {
28 | const {
29 | name,
30 | label,
31 | children,
32 | valuePropName,
33 | trigger,
34 | getValueFromEvent,
35 | rules,
36 | validateTrigger,
37 | } = props as SomeRequired;
38 | const { dispatch, fields, initialValues, validateField } = useContext(FormContext);
39 | const rowClass = classNames('better-row', {
40 | 'better-row-no-label': !label,
41 | });
42 | useEffect(() => {
43 | const value = (initialValues && initialValues[name]) || '';
44 | dispatch({
45 | type: 'addField',
46 | name,
47 | value: {
48 | label,
49 | name,
50 | value,
51 | rules: rules || [],
52 | errors: [],
53 | isValid: true,
54 | },
55 | });
56 | }, []);
57 | const onValueUpdate = (e: any) => {
58 | const value = getValueFromEvent(e);
59 | dispatch({
60 | type: 'updateValue',
61 | name,
62 | value,
63 | });
64 | }
65 | const onValueValidate = async () => {
66 | await validateField(name);
67 | }
68 | const fieldState = fields[name];
69 | const value = fieldState && fieldState.value;
70 | const errors = fieldState && fieldState.errors;
71 | const isRequired = rules && rules.some(rule => (typeof rule !== 'function' && rule.required));
72 | const hasError = errors && errors.length > 0;
73 | const labelClass = classNames({
74 | 'better-form-item-required': isRequired,
75 | });
76 | const itemClass = classNames('better-form-item-control', {
77 | 'better-form-item-has-error': hasError,
78 | });
79 |
80 | const controlProps: Record = {};
81 | controlProps[valuePropName] = value;
82 | controlProps[trigger] = onValueUpdate;
83 |
84 | if (rules) {
85 | controlProps[validateTrigger] = onValueValidate;
86 | }
87 |
88 | const childList = React.Children.toArray(children);
89 | if (childList.length === 0) {
90 | console.error('FormItem must have a child element');
91 | }
92 | if (childList.length > 1) {
93 | console.warn('FormItem must have only one child element');
94 | }
95 | if (!React.isValidElement(childList[0])) {
96 | console.error('Child Element is not a valid React Element');
97 | }
98 | const child = childList[0] as React.ReactElement;
99 | const returnChildNode = React.cloneElement(child, { ...child.props, ...controlProps });
100 | return (
101 |
102 | { label &&
103 |
104 |
105 |
106 | }
107 |
108 |
109 | { returnChildNode }
110 |
111 | {
112 | hasError &&
113 |
114 | { errors[0]?.message }
115 |
116 | }
117 |
118 |
113 | {
114 | suggestions.map((item, index) => {
115 | const activeItem = classNames('suggestion-item', {
116 | 'is-active': index === highlightIndex,
117 | });
118 | return (
119 | - handleSelect(item) }>
120 | { renderTemplate(item) }
121 |
122 | );
123 | })
124 | }
125 |
126 |
127 | );
128 | };
129 | return (
130 |
131 |
137 |
138 | { loading &&
139 |
140 |
141 |
142 | }
143 | { suggestions.length > 0 && generateDropdown() }
144 |