[add] Select component

[optimize] update Upstream packages
idea2app · May 22, 2022 · 68ca421 · 68ca421 · github-actions · May 22, 2022
1 parent bbfe3ee
commit 68ca421
Show file tree

Hide file tree

Showing 7 changed files with 234 additions and 127 deletions.
diff --git a/ReadMe.md b/ReadMe.md
@@ -39,22 +39,23 @@ A **[React][1] advanced components library** based on [TypeScript][2] & [Bootstr
 4. [Avatar](source/Avatar.tsx)
 5. [Nameplate](source/Nameplate.tsx)
 6. [Type Echo](source/TypeEcho.tsx)
-7. [Filter Input](source/FilterInput/index.tsx)
-8. [File Picker](source/FilePicker/index.tsx)
-9. [File Uploader](source/FileUploader/)
-10. [Multiple File Uploader](source/MultipleFileUploader/)
-11. [Code Block](source/CodeBlock.tsx)
-12. [Editor](source/Editor.tsx)
-13. [Editor HTML](source/EditorHTML.tsx)
-14. [Address Picker](source/AddressPicker.tsx)
-15. [Idea Info](source/IdeaInfo.tsx)
-16. [Idea Table](source/IdeaTable.tsx)
-17. [Table Spinner](source/TableSpinner.tsx)
-18. [Loading](source/Loading.tsx)
-19. [Pagination Bar](source/PaginationBar.tsx)
-20. [Idea Form](source/IdeaForm.tsx)
-21. [Idea Popover](source/IdeaPopover.tsx)
-22. [Idea Dialog](source/IdeaDialog.tsx)
+7. [Select](source/Select.tsx)
+8. [Filter Input](source/FilterInput/index.tsx)
+9. [File Picker](source/FilePicker/index.tsx)
+10. [File Uploader](source/FileUploader/)
+11. [Multiple File Uploader](source/MultipleFileUploader/)
+12. [Code Block](source/CodeBlock.tsx)
+13. [Editor](source/Editor.tsx)
+14. [Editor HTML](source/EditorHTML.tsx)
+15. [Address Picker](source/AddressPicker.tsx)
+16. [Idea Info](source/IdeaInfo.tsx)
+17. [Idea Table](source/IdeaTable.tsx)
+18. [Table Spinner](source/TableSpinner.tsx)
+19. [Loading](source/Loading.tsx)
+20. [Pagination Bar](source/PaginationBar.tsx)
+21. [Idea Form](source/IdeaForm.tsx)
+22. [Idea Popover](source/IdeaPopover.tsx)
+23. [Idea Dialog](source/IdeaDialog.tsx)
 
 ## Utilities
 
@@ -75,7 +76,7 @@ A **[React][1] advanced components library** based on [TypeScript][2] & [Bootstr
 2. add Git tag
 
 ```shell
-git tag vx.xx.x  # 0.22.4
+git tag vx.xx.x  # 0.23.0
 ```
 
 3. review tag

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "idea-react",
-    "version": "0.22.4",
+    "version": "0.23.0",
     "license": "LGPL-3.0",
     "author": "[email protected]",
     "description": "A React advanced components library based on TypeScript & Bootstrap, built by idea2app remote developers team.",
@@ -23,30 +23,30 @@
     "main": "dist/index.umd.js",
     "module": "dist/index.js",
     "dependencies": {
-        "@editorjs/editorjs": "^2.23.2",
+        "@editorjs/editorjs": "^2.24.3",
         "@editorjs/paragraph": "^2.8.0",
         "classnames": "^2.3.1",
         "editorjs-html": "^3.4.2",
         "lodash": "^4.17.21",
-        "prismjs": "^1.27.0",
+        "prismjs": "^1.28.0",
         "react": "^17.0.2",
-        "react-bootstrap": "^2.2.3",
+        "react-bootstrap": "^2.4.0",
         "react-dom": "^17.0.2",
         "react-editor-js": "^2.0.6",
-        "react-element-to-jsx-string": "^14.3.4",
-        "web-utility": "^3.6.1"
+        "react-element-to-jsx-string": "^15.0.0",
+        "web-utility": "^3.6.5"
     },
     "devDependencies": {
-        "@types/lodash": "^4.14.181",
+        "@types/lodash": "^4.14.182",
         "@types/prismjs": "^1.26.0",
-        "@types/react-dom": "^17.0.15",
-        "husky": "^7.0.4",
+        "@types/react-dom": "^17.0.17",
+        "husky": "^8.0.1",
         "less": "^4.1.2",
-        "lint-staged": "^12.3.7",
+        "lint-staged": "^12.4.1",
         "microbundle": "^0.14.2",
         "open-cli": "^7.0.1",
         "prettier": "^2.6.2",
-        "typedoc": "^0.22.14",
+        "typedoc": "^0.22.15",
         "typedoc-plugin-mdn-links": "^1.0.6",
         "typescript": "~4.3.5"
     },

diff --git a/preview/index.tsx b/preview/index.tsx
@@ -5,6 +5,8 @@ import { sleep } from 'web-utility';
 import {
     Avatar,
     Base,
+    Select,
+    Option,
     FilePicker,
     FileUploader,
     FilterInput,
@@ -32,13 +34,41 @@ interface User extends Base {
     link: string;
 }
 
-export class App extends PureComponent {
-    state = {
+const info: User = {
+        id: '1',
+        name: 'lingli',
+        link: 'https://baidu.com'
+    },
+    list: User[] = [
+        {
+            id: '1',
+            name: 'lingli',
+            link: 'https://baidu.com'
+        },
+        {
+            id: '2',
+            name: 'xxx',
+            link: 'https://ideapp.dev'
+        }
+    ];
+
+interface State {
+    pageIndex: number;
+    selectValue: string;
+    showLoading: boolean;
+    showDialog: boolean;
+    showFormDialog: boolean;
+    mapAddressName: string;
+}
+
+export class App extends PureComponent<{}, State> {
+    state: Readonly<State> = {
+        pageIndex: 1,
+        selectValue: '0',
+        showLoading: false,
         showDialog: false,
         showFormDialog: false,
-        pageIndex: 1,
-        mapAddressName: '',
-        showLoading: false
+        mapAddressName: ''
     };
 
     columns: IdeaInfoItem<User>[] = [
@@ -91,29 +121,13 @@ export class App extends PureComponent {
 
     render() {
         const {
+            pageIndex,
+            selectValue,
+            showLoading,
             showDialog,
             showFormDialog,
-            pageIndex,
-            mapAddressName,
-            showLoading
+            mapAddressName
         } = this.state;
-        const info: User = {
-            id: '1',
-            name: 'lingli',
-            link: 'https://baidu.com'
-        };
-        const list: User[] = [
-            {
-                id: '1',
-                name: 'lingli',
-                link: 'https://baidu.com'
-            },
-            {
-                id: '2',
-                name: 'xxx',
-                link: 'https://ideapp.dev'
-            }
-        ];
 
         return (
             <div className="bg-light">
@@ -149,6 +163,26 @@ export class App extends PureComponent {
                         )}
                     </Section>
 
+                    <Section title="Select">
+                        {this.renderCode(
+                            <Select
+                                value={selectValue}
+                                onChange={value =>
+                                    this.setState({ selectValue: value })
+                                }
+                            >
+                                <Option value="0">
+                                    <Icon className="me-2" name="heart" />
+                                    idea2app
+                                </Option>
+                                <Option value="1">
+                                    <Icon className="me-2" name="bootstrap" />
+                                    freeCodeCamp
+                                </Option>
+                            </Select>
+                        )}
+                    </Section>
+
                     <Section title="Filter Input">
                         <p className="text-danger">注：暂有bug</p>
                         {this.renderCode(<FilterInput name="tags" />)}

diff --git a/source/FilterInput/index.tsx b/source/FilterInput/index.tsx
@@ -5,21 +5,21 @@ import { Badge } from 'react-bootstrap';
 import { Icon } from '../Icon';
 import style from './index.module.less';
 
-export interface Option {
+export interface OptionItem {
     value?: any;
     label: string;
 }
 
 export interface FilterInputProps {
     name: string;
     required?: boolean;
-    defaultValue?: Option[];
-    loadOptions?: (input: string) => Promise<Option[]>;
+    defaultValue?: OptionItem[];
+    loadOptions?: (input: string) => Promise<OptionItem[]>;
 }
 
 interface State {
-    options: Option[];
-    values: Option[];
+    options: OptionItem[];
+    values: OptionItem[];
 }
 
 export class FilterInput extends PureComponent<FilterInputProps, State> {
@@ -47,7 +47,7 @@ export class FilterInput extends PureComponent<FilterInputProps, State> {
             this.setState({ values });
     }
 
-    addOne(value: Option) {
+    addOne(value: OptionItem) {
         const { values } = this.state;
 
         this.setState({ options: [], values: [...values, value] });

diff --git a/source/Select.tsx b/source/Select.tsx
@@ -0,0 +1,73 @@
+import { makeArray } from 'web-utility';
+import classNames from 'classnames';
+import React, {
+    ReactNode,
+    ReactElement,
+    isValidElement,
+    PropsWithChildren,
+    FC
+} from 'react';
+import { Dropdown } from 'react-bootstrap';
+
+export type OptionProps = PropsWithChildren<{
+    value?: string;
+}>;
+
+export const Option: FC<OptionProps> = ({ value, children }) => (
+    <Dropdown.Item data-value={value}>{children}</Dropdown.Item>
+);
+
+Option.displayName = 'Option';
+
+export type SelectProps = PropsWithChildren<{
+    className?: string;
+    value?: string;
+    onChange?: (value: string) => any;
+}>;
+
+export const Select: FC<SelectProps> = ({
+    className,
+    children,
+    value,
+    onChange
+}) => {
+    const current = (makeArray(children) as ReactNode[]).find(
+        node =>
+            isValidElement<OptionProps>(node) &&
+            node.type === Option &&
+            node.props.value === value
+    ) as ReactElement<OptionProps, typeof Option>;
+
+    return (
+        <Dropdown
+            onClick={({ target }) => {
+                const option = (target as HTMLElement).closest<HTMLElement>(
+                    '.dropdown-item'
+                );
+                if (!option) return;
+
+                const { value } = option.dataset;
+
+                onChange?.(value);
+            }}
+        >
+            <Dropdown.Toggle
+                className={classNames(
+                    'w-100',
+                    'd-flex',
+                    'justify-content-between',
+                    'align-items-center',
+                    'bg-white',
+                    'text-dark',
+                    className
+                )}
+            >
+                <div>{current?.props.children}</div>
+            </Dropdown.Toggle>
+
+            <Dropdown.Menu>{children}</Dropdown.Menu>
+        </Dropdown>
+    );
+};
+
+Select.displayName = 'Select';
diff --git a/source/index.ts b/source/index.ts
@@ -5,6 +5,7 @@ export * from './Avatar';
 export * from './Nameplate';
 export * from './TableSpinner';
 export * from './TypeEcho';
+export * from './Select';
 export * from './FilterInput';
 export * from './FilePicker';
 export * from './FileUploader';