From 008c55cf5038fbceed31c22dfda3569cffba4cb2 Mon Sep 17 00:00:00 2001 From: BQX Date: Tue, 16 Apr 2024 22:25:59 +0800 Subject: [PATCH 01/11] feat(table): export table --- packages/ui-react/lib/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/ui-react/lib/index.ts b/packages/ui-react/lib/index.ts index 5da9608..98c94a1 100644 --- a/packages/ui-react/lib/index.ts +++ b/packages/ui-react/lib/index.ts @@ -20,3 +20,4 @@ export * from './Switch'; export * from './DatePicker'; export * from './CodeEditor'; export * from './Upload'; +export * from './Table'; From 6a91f30ee60b8d7d7a520c036dbced81ee2bbcdb Mon Sep 17 00:00:00 2001 From: BQX Date: Tue, 16 Apr 2024 22:30:17 +0800 Subject: [PATCH 02/11] ci: release package --- packages/ui-react/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui-react/package.json b/packages/ui-react/package.json index 7915ec5..8596b9e 100644 --- a/packages/ui-react/package.json +++ b/packages/ui-react/package.json @@ -1,6 +1,6 @@ { "name": "@ui-aurora/react", - "version": "0.0.4", + "version": "0.0.5", "description": "A React UI library built for SASTOJ", "author": "sast", "license": "MIT", From 0edae5405b77b3f47966befbc03185d1b393bd63 Mon Sep 17 00:00:00 2001 From: bqxbqx Date: Sat, 20 Apr 2024 21:55:30 +0800 Subject: [PATCH 03/11] fix(select): maximum update depth exceeded --- .../lib/CodeEditor/CodeEditor.module.scss | 43 ----- .../lib/CodeEditor/CodeEditor.stories.tsx | 71 ------- .../ui-react/lib/CodeEditor/CodeEditor.tsx | 173 ------------------ packages/ui-react/lib/CodeEditor/index.ts | 1 - .../ui-react/lib/Select/Select.stories.tsx | 15 +- packages/ui-react/lib/Select/Select.tsx | 102 +++++------ packages/ui-react/lib/index.ts | 1 - packages/ui-react/package.json | 3 +- pnpm-lock.yaml | 88 +++++---- 9 files changed, 106 insertions(+), 391 deletions(-) delete mode 100644 packages/ui-react/lib/CodeEditor/CodeEditor.module.scss delete mode 100644 packages/ui-react/lib/CodeEditor/CodeEditor.stories.tsx delete mode 100644 packages/ui-react/lib/CodeEditor/CodeEditor.tsx delete mode 100644 packages/ui-react/lib/CodeEditor/index.ts diff --git a/packages/ui-react/lib/CodeEditor/CodeEditor.module.scss b/packages/ui-react/lib/CodeEditor/CodeEditor.module.scss deleted file mode 100644 index 1cdfe3e..0000000 --- a/packages/ui-react/lib/CodeEditor/CodeEditor.module.scss +++ /dev/null @@ -1,43 +0,0 @@ -@use '../variables' as *; -$padding: 10px; -.base { - .header-container { - display: flex; - align-items: center; - gap: 7px; - background-color: var(--border-white); - padding: $padding; - padding-bottom: 7px; - color: var(--black-color); - overflow: hidden; - border-radius: $radius-5 $radius-5 0 0; - font-weight: 700; - box-sizing: border-box; - svg { - fill: var(--primary-color); - } - } - .select-container { - display: flex; - justify-content: space-between; - align-items: center; - padding-right: $padding; - .refresh-button { - display: flex; - justify-content: center; - align-items: center; - height: 34px; - border-radius: $radius-half; - svg { - fill: var(--primary-color); - } - } - } - .divider { - flex-basis: 1px; - background-color: var(--border-white); - } - .editor-container { - flex-grow: 1; - } -} diff --git a/packages/ui-react/lib/CodeEditor/CodeEditor.stories.tsx b/packages/ui-react/lib/CodeEditor/CodeEditor.stories.tsx deleted file mode 100644 index 46d6c40..0000000 --- a/packages/ui-react/lib/CodeEditor/CodeEditor.stories.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; -// eslint-disable-next-line @typescript-eslint/no-unused-vars -import React from 'react'; -import { CodeEditor, type CodeEditorProps } from './CodeEditor'; -import { OptionProps } from '../Select'; - -const test = (Item: OptionProps, content: string) => { - console.log('item', Item); - console.log('content', content); -}; - -const testLanguage = (value: string) => { - console.log('language', value); -}; - -const refreshTest = () => { - console.log('hello'); -}; - -const meta = { - title: 'Components/CodeEditor', - component: CodeEditor, - parameters: { - layout: 'centered', - }, - tags: ['autodocs'], - argTypes: {}, -} satisfies Meta; - -export default meta; - -type Story = StoryObj; - -const defaultProps: CodeEditorProps = { - width: 600, - height: 700, - languageList: [ - { value: 'c', label: 'C', key: 3 }, - { value: 'javascript', label: 'JavaScript', key: 5 }, - { value: 'java', label: 'Java', key: 7 }, - ], - onchange: test, - onLanguageChange: testLanguage, - defaultValue: `/** - * Definition for a binary tree node. - * struct TreeNode { - * int val; - * struct TreeNode *left; - * struct TreeNode *right; - * }; - */ - /** - * Note: The returned array must be malloced, assume caller calls free(). - */ - int* preorderTraversal(struct TreeNode* root, int* returnSize) { - - }`, - onRefresh: refreshTest, -}; - -export const DefaultCodeEditor: Story = { - args: { - ...defaultProps, - }, -}; - -export const ExampleCodeEditor: Story = { - args: { - ...defaultProps, - }, -}; diff --git a/packages/ui-react/lib/CodeEditor/CodeEditor.tsx b/packages/ui-react/lib/CodeEditor/CodeEditor.tsx deleted file mode 100644 index 866161e..0000000 --- a/packages/ui-react/lib/CodeEditor/CodeEditor.tsx +++ /dev/null @@ -1,173 +0,0 @@ -import React, { useEffect, useState } from 'react'; -import Editor from '@monaco-editor/react'; -import styles from './CodeEditor.module.scss'; -import { Button, Card, Select, type OptionProps } from '..'; - -export interface CodeEditorProps extends React.HtmlHTMLAttributes { - /** - * width of the code area - */ - width?: number; - /** - * height of the code area - */ - height?: number; - /** - * languageList, the languageList of the code-Editor - */ - languageList?: OptionProps[]; - /** - * onchange , the onchange of the code-editor - */ - onchange?: (language: OptionProps, content: string) => void; - /** - * defaultValue, the default value of the codeEditor - */ - defaultValue?: string; - /** - * value, the value of the codeEditor - */ - value?: string; - /** - * onLanguageChange, Callbacks when the selected language changes - */ - onLanguageChange?: (value: string) => void; - /** - * onRefresh , the refresh button click callback - */ - onRefresh?: () => void; -} - -export const CodeEditor = React.forwardRef( - ( - { - width = 400, - height = 500, - onRefresh, - languageList = [ - { value: 'c', label: 'C', key: 3 }, - { value: 'javascript', label: 'JavaScript', key: 5 }, - { value: 'java', label: 'Java', key: 7 }, - ], - defaultValue = `/** - * Definition for a binary tree node. - * struct TreeNode { - * int val; - * struct TreeNode *left; - * struct TreeNode *right; - * }; - */ - /** - * Note: The returned array must be malloced, assume caller calls free(). - */ - int* preorderTraversal(struct TreeNode* root, int* returnSize) { - - }`, - value, - onchange, - onLanguageChange, - ...rest - }, - ref, - ) => { - const [selectLanguage, setSelectLanguage] = useState(); - const [content, setContent] = useState(defaultValue); - - useEffect(() => { - value && setContent(value); - }, [value]); - - const handleSelect = (value: OptionProps) => { - const newSelectLanguage = languageList.find((item) => item.key === value.key); - setSelectLanguage(newSelectLanguage?.value); - }; - - const handleCodeContent = (value: string | undefined) => { - setContent(value); - }; - - useEffect(() => { - const selectItem = languageList.find((item) => item.value === selectLanguage); - selectItem && content && onchange && onchange(selectItem, content); - }, [content, selectLanguage, onchange, languageList]); - - useEffect(() => { - onLanguageChange && selectLanguage && onLanguageChange(selectLanguage); - }, [selectLanguage, onLanguageChange]); - - const handleRefresh = () => { - setContent(defaultValue); - onRefresh && onRefresh(); - }; - - return ( - <> -
- -
- - - - Code -
- - } - mainContent={ - <> -
- - -
-
-
- -
- - } - footer={<>} - > -
- - ); - }, -); - -CodeEditor.displayName = 'CodeEditor'; diff --git a/packages/ui-react/lib/CodeEditor/index.ts b/packages/ui-react/lib/CodeEditor/index.ts deleted file mode 100644 index aa4b203..0000000 --- a/packages/ui-react/lib/CodeEditor/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './CodeEditor'; diff --git a/packages/ui-react/lib/Select/Select.stories.tsx b/packages/ui-react/lib/Select/Select.stories.tsx index 89aab47..1bc5de1 100644 --- a/packages/ui-react/lib/Select/Select.stories.tsx +++ b/packages/ui-react/lib/Select/Select.stories.tsx @@ -20,20 +20,7 @@ export default meta; type Story = StoryObj; -const defaultProps: SelectProps = { - optionsList: [ - { value: 'nextjs', label: 'Nextjs', key: 1 }, - { value: 'nuxtjs', label: 'Nuxtjs', key: 2 }, - { value: 'nodejs', label: 'Nodejs', key: 3 }, - { value: 'vuejs', label: 'Vuejs', key: 5 }, - { value: 'react', label: 'React', key: 4 }, - ], - onchange: test, - disabled: false, - isBorder: true, - defaultSelectKey: 1, - placeHolder: '', -}; +const defaultProps: SelectProps = {}; export const DefaultSelect: Story = { args: { diff --git a/packages/ui-react/lib/Select/Select.tsx b/packages/ui-react/lib/Select/Select.tsx index bc4add9..ede3c1e 100644 --- a/packages/ui-react/lib/Select/Select.tsx +++ b/packages/ui-react/lib/Select/Select.tsx @@ -22,7 +22,7 @@ export interface SelectProps extends React.HtmlHTMLAttributes { /** * the optionList of the select */ - optionsList?: Array; + optionsList: Array; /** * the title of the select */ @@ -56,12 +56,9 @@ export interface SelectProps extends React.HtmlHTMLAttributes { export const Select = React.forwardRef( ( { - optionsList = [ - { value: 'nextjs', label: 'nextjs', key: 3 }, - { value: 'nuxtjs', label: 'nuxtjs', key: 5 }, - ], + optionsList = [], onchange, - title = 'which framwork?', + title, disabled = false, defaultSelectKey, selectKey, @@ -75,7 +72,7 @@ export const Select = React.forwardRef( // Here selectItemIndex is different from selectItem, // selectItem is all the contents of the selected selectItem, // selectItemIndex is the index value inside options, starting from 0, and has nothing to do with the key inside the options. - const [visible, setVisble] = useState(false); + const [visible, setVisible] = useState(false); const [selectItem, setSelectItem] = useState( optionsList.find((item) => item.key === defaultSelectKey), ); @@ -90,7 +87,7 @@ export const Select = React.forwardRef( }, [placeHolder]); const showOptions: MouseEventHandler = () => { - if (!disabled) setVisble(!visible); + if (!disabled) setVisible(!visible); }; useEffect(() => { @@ -168,60 +165,59 @@ export const Select = React.forwardRef( setSelectItemIndex(-1); inputRef.current?.blur(); setTimeout(() => { - setVisble(false); + setVisible(false); }, 100); }; useEffect(() => { const results = fuzzySearch(optionsList, inputValue); setOptions(results); - }, [inputValue, optionsList]); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [inputValue]); return ( - <> -
- -
- {!options.length ? ( -
- - 什么都没有检索到哦😭 -
- ) : ( - options.map((obj, index) => { - return ( -
handleClick(obj)} - > - {obj.label} -
- ); - }) - )} -
+
+ +
+ {!options.length ? ( +
+ + 什么都没有检索到哦😭 +
+ ) : ( + options.map((obj, index) => { + return ( +
handleClick(obj)} + > + {obj.label} +
+ ); + }) + )}
- +
); }, ); diff --git a/packages/ui-react/lib/index.ts b/packages/ui-react/lib/index.ts index 98c94a1..1c612b0 100644 --- a/packages/ui-react/lib/index.ts +++ b/packages/ui-react/lib/index.ts @@ -18,6 +18,5 @@ export * from './Sheet'; export * from './Carousel'; export * from './Switch'; export * from './DatePicker'; -export * from './CodeEditor'; export * from './Upload'; export * from './Table'; diff --git a/packages/ui-react/package.json b/packages/ui-react/package.json index 8596b9e..17a0eed 100644 --- a/packages/ui-react/package.json +++ b/packages/ui-react/package.json @@ -1,6 +1,6 @@ { "name": "@ui-aurora/react", - "version": "0.0.5", + "version": "0.0.6", "description": "A React UI library built for SASTOJ", "author": "sast", "license": "MIT", @@ -84,7 +84,6 @@ "react-dom": "^18.2.0" }, "dependencies": { - "@monaco-editor/react": "^4.6.0", "@storybook/addon-docs": "^8.0.2", "@types/react-transition-group": "^4.4.10", "classnames": "^2.5.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7aa5b51..0317d89 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -61,9 +61,6 @@ importers: packages/ui-react: dependencies: - '@monaco-editor/react': - specifier: ^4.6.0 - version: 4.6.0(monaco-editor@0.47.0)(react-dom@18.2.0)(react@18.2.0) '@storybook/addon-docs': specifier: ^8.0.2 version: 8.0.2 @@ -178,7 +175,7 @@ importers: version: 8.0.2(react-dom@18.2.0)(react@18.2.0) vite: specifier: ^5.0.8 - version: 5.1.6(@types/node@20.11.30)(sass@1.72.0) + version: 5.1.6(@types/node@20.11.30) vite-plugin-dts: specifier: ^3.6.4 version: 3.7.3(@types/node@20.11.30)(typescript@5.4.3)(vite@5.1.6) @@ -187,7 +184,7 @@ importers: version: 1.1.1(vite@5.1.6) vitest: specifier: ^1.0.4 - version: 1.4.0(@types/node@20.11.30)(@vitest/ui@1.4.0)(jsdom@23.2.0)(sass@1.72.0) + version: 1.4.0(@types/node@20.11.30)(@vitest/ui@1.4.0)(jsdom@23.2.0) packages/ui-universal: dependencies: @@ -1956,7 +1953,7 @@ packages: magic-string: 0.27.0 react-docgen-typescript: 2.2.2(typescript@5.4.3) typescript: 5.4.3 - vite: 5.1.6(@types/node@20.11.30)(sass@1.72.0) + vite: 5.1.6(@types/node@20.11.30) dev: true /@jridgewell/gen-mapping@0.3.5: @@ -2170,6 +2167,7 @@ packages: dependencies: monaco-editor: 0.47.0 state-local: 1.0.7 + dev: true /@monaco-editor/react@4.4.6(monaco-editor@0.47.0)(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-Gr3uz3LYf33wlFE3eRnta4RxP5FSNxiIV9ENn2D2/rN8KgGAD8ecvcITRtsbbyuOuNkwbuHYxfeaz2Vr+CtyFA==} @@ -2185,19 +2183,6 @@ packages: react-dom: 18.2.0(react@18.2.0) dev: true - /@monaco-editor/react@4.6.0(monaco-editor@0.47.0)(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-RFkU9/i7cN2bsq/iTkurMWOEErmYcY6JiQI3Jn+WeR/FGISH8JbHERjpS9oRuSOPvDMJI0Z8nJeKkbOs9sBYQw==} - peerDependencies: - monaco-editor: '>= 0.25.0 < 1' - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - dependencies: - '@monaco-editor/loader': 1.4.0(monaco-editor@0.47.0) - monaco-editor: 0.47.0 - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) - dev: false - /@ndelangen/get-tarball@3.0.9: resolution: {integrity: sha512-9JKTEik4vq+yGosHYhZ1tiH/3WpUS0Nh0kej4Agndhox8pAdWhEx5knFVRcb/ya9knCRCs1rPxNrSXTDdfVqpA==} dependencies: @@ -3141,7 +3126,7 @@ packages: magic-string: 0.30.8 ts-dedent: 2.2.0 typescript: 5.4.3 - vite: 5.1.6(@types/node@20.11.30)(sass@1.72.0) + vite: 5.1.6(@types/node@20.11.30) transitivePeerDependencies: - encoding - supports-color @@ -3492,7 +3477,7 @@ packages: react-dom: 18.2.0(react@18.2.0) resolve: 1.22.8 tsconfig-paths: 4.2.0 - vite: 5.1.6(@types/node@20.11.30)(sass@1.72.0) + vite: 5.1.6(@types/node@20.11.30) transitivePeerDependencies: - '@preact/preset-vite' - encoding @@ -3767,7 +3752,7 @@ packages: dom-accessibility-api: 0.6.3 lodash: 4.17.21 redent: 3.0.0 - vitest: 1.4.0(@types/node@20.11.30)(@vitest/ui@1.4.0)(jsdom@23.2.0)(sass@1.72.0) + vitest: 1.4.0(@types/node@20.11.30)(@vitest/ui@1.4.0)(jsdom@23.2.0) dev: true /@testing-library/react@14.2.2(react-dom@18.2.0)(react@18.2.0): @@ -4467,7 +4452,7 @@ packages: vite: ^4 || ^5 dependencies: '@swc/core': 1.4.8 - vite: 5.1.6(@types/node@20.11.30)(sass@1.72.0) + vite: 5.1.6(@types/node@20.11.30) transitivePeerDependencies: - '@swc/helpers' dev: true @@ -4491,7 +4476,7 @@ packages: strip-literal: 2.0.0 test-exclude: 6.0.0 v8-to-istanbul: 9.2.0 - vitest: 1.4.0(@types/node@20.11.30)(@vitest/ui@1.4.0)(jsdom@23.2.0)(sass@1.72.0) + vitest: 1.4.0(@types/node@20.11.30)(@vitest/ui@1.4.0)(jsdom@23.2.0) transitivePeerDependencies: - supports-color dev: true @@ -4538,7 +4523,7 @@ packages: pathe: 1.1.2 picocolors: 1.0.0 sirv: 2.0.4 - vitest: 1.4.0(@types/node@20.11.30)(@vitest/ui@1.4.0)(jsdom@23.2.0)(sass@1.72.0) + vitest: 1.4.0(@types/node@20.11.30)(@vitest/ui@1.4.0)(jsdom@23.2.0) dev: true /@vitest/utils@1.4.0: @@ -9135,7 +9120,6 @@ packages: /lucide-react@0.368.0(react@18.2.0): resolution: {integrity: sha512-soryVrCjheZs8rbXKdINw9B8iPi5OajBJZMJ1HORig89ljcOcEokKKAgGbg3QWxSXel7JwHOfDFUdDHAKyUAMw==} - peerDependencies: react: ^16.5.1 || ^17.0.0 || ^18.0.0 dependencies: @@ -10233,6 +10217,7 @@ packages: /monaco-editor@0.47.0: resolution: {integrity: sha512-VabVvHvQ9QmMwXu4du008ZDuyLnHs9j7ThVFsiJoXSOQk18+LF89N4ADzPbFenm0W4V2bGHnFBztIRQTgBfxzw==} + dev: true /mri@1.2.0: resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==} @@ -12329,6 +12314,7 @@ packages: /state-local@1.0.7: resolution: {integrity: sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==} + dev: true /statuses@2.0.1: resolution: {integrity: sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==} @@ -13278,7 +13264,7 @@ packages: vfile-message: 4.0.2 dev: true - /vite-node@1.4.0(@types/node@20.11.30)(sass@1.72.0): + /vite-node@1.4.0(@types/node@20.11.30): resolution: {integrity: sha512-VZDAseqjrHgNd4Kh8icYHWzTKSCZMhia7GyHfhtzLW33fZlG9SwsB6CEhgyVOWkJfJ2pFLrp/Gj1FSfAiqH9Lw==} engines: {node: ^18.0.0 || >=20.0.0} hasBin: true @@ -13287,7 +13273,7 @@ packages: debug: 4.3.4 pathe: 1.1.2 picocolors: 1.0.0 - vite: 5.1.6(@types/node@20.11.30)(sass@1.72.0) + vite: 5.1.6(@types/node@20.11.30) transitivePeerDependencies: - '@types/node' - less @@ -13339,7 +13325,7 @@ packages: debug: 4.3.4 kolorist: 1.8.0 typescript: 5.4.3 - vite: 5.1.6(@types/node@20.11.30)(sass@1.72.0) + vite: 5.1.6(@types/node@20.11.30) vue-tsc: 1.8.27(typescript@5.4.3) transitivePeerDependencies: - '@types/node' @@ -13353,7 +13339,43 @@ packages: vite: '*' dependencies: minimatch: 9.0.3 - vite: 5.1.6(@types/node@20.11.30)(sass@1.72.0) + vite: 5.1.6(@types/node@20.11.30) + dev: true + + /vite@5.1.6(@types/node@20.11.30): + resolution: {integrity: sha512-yYIAZs9nVfRJ/AiOLCA91zzhjsHUgMjB+EigzFb6W2XTLO8JixBCKCjvhKZaye+NKYHCrkv3Oh50dH9EdLU2RA==} + engines: {node: ^18.0.0 || >=20.0.0} + hasBin: true + peerDependencies: + '@types/node': ^18.0.0 || >=20.0.0 + less: '*' + lightningcss: ^1.21.0 + sass: '*' + stylus: '*' + sugarss: '*' + terser: ^5.4.0 + peerDependenciesMeta: + '@types/node': + optional: true + less: + optional: true + lightningcss: + optional: true + sass: + optional: true + stylus: + optional: true + sugarss: + optional: true + terser: + optional: true + dependencies: + '@types/node': 20.11.30 + esbuild: 0.19.12 + postcss: 8.4.37 + rollup: 4.13.0 + optionalDependencies: + fsevents: 2.3.3 dev: true /vite@5.1.6(@types/node@20.11.30)(sass@1.72.0): @@ -13392,7 +13414,7 @@ packages: optionalDependencies: fsevents: 2.3.3 - /vitest@1.4.0(@types/node@20.11.30)(@vitest/ui@1.4.0)(jsdom@23.2.0)(sass@1.72.0): + /vitest@1.4.0(@types/node@20.11.30)(@vitest/ui@1.4.0)(jsdom@23.2.0): resolution: {integrity: sha512-gujzn0g7fmwf83/WzrDTnncZt2UiXP41mHuFYFrdwaLRVQ6JYQEiME2IfEjU3vcFL3VKa75XhI3lFgn+hfVsQw==} engines: {node: ^18.0.0 || >=20.0.0} hasBin: true @@ -13437,8 +13459,8 @@ packages: strip-literal: 2.0.0 tinybench: 2.6.0 tinypool: 0.8.2 - vite: 5.1.6(@types/node@20.11.30)(sass@1.72.0) - vite-node: 1.4.0(@types/node@20.11.30)(sass@1.72.0) + vite: 5.1.6(@types/node@20.11.30) + vite-node: 1.4.0(@types/node@20.11.30) why-is-node-running: 2.2.2 transitivePeerDependencies: - less From ae4d849ac1ca3033cc7e9362bb926197e57d3224 Mon Sep 17 00:00:00 2001 From: bqxbqx Date: Sun, 21 Apr 2024 14:30:33 +0800 Subject: [PATCH 04/11] fix(global): fix font family global --- packages/ui-react/lib/global.scss | 2 +- packages/ui-react/package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/ui-react/lib/global.scss b/packages/ui-react/lib/global.scss index 64d6d20..046c13b 100644 --- a/packages/ui-react/lib/global.scss +++ b/packages/ui-react/lib/global.scss @@ -25,7 +25,7 @@ --small-font-size: 12px; --medium-font-size: 16px; --large-font-size: 20px; - font-family: sans-serif; + // font-family: sans-serif; --background-blue: #ecf2ff; --border-white: #f1f1f1; --pale-white: #fcfcfc; diff --git a/packages/ui-react/package.json b/packages/ui-react/package.json index 17a0eed..b385153 100644 --- a/packages/ui-react/package.json +++ b/packages/ui-react/package.json @@ -1,6 +1,6 @@ { "name": "@ui-aurora/react", - "version": "0.0.6", + "version": "0.0.7", "description": "A React UI library built for SASTOJ", "author": "sast", "license": "MIT", From 66d84ee235abf125c9fcbde6263500434b0e088d Mon Sep 17 00:00:00 2001 From: bqxbqx Date: Tue, 23 Apr 2024 18:07:10 +0800 Subject: [PATCH 05/11] =?UTF-8?q?feat(table):=20=E5=AE=8C=E6=88=90?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E5=B0=81=E8=A3=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/ui-react/lib/Table/Table.module.scss | 20 +- packages/ui-react/lib/Table/Table.stories.ts | 56 ++--- packages/ui-react/lib/Table/Table.tsx | 195 ++++++++---------- packages/ui-react/package.json | 3 + pnpm-lock.yaml | 108 +++++----- 5 files changed, 165 insertions(+), 217 deletions(-) diff --git a/packages/ui-react/lib/Table/Table.module.scss b/packages/ui-react/lib/Table/Table.module.scss index 05c35b2..fc18417 100644 --- a/packages/ui-react/lib/Table/Table.module.scss +++ b/packages/ui-react/lib/Table/Table.module.scss @@ -9,28 +9,28 @@ text-align: start; } .thead { - tr { - th { + .tr { + .th { text-align: start; background-color: $title-bg-color; color: $gray-color; padding: 10px 30px; - } - th:first-child { - border-radius: 5px 0 0 5px; - } - th:last-child { - border-radius: 0 5px 5px 0; + &:first-child { + border-radius: 5px 0 0 5px; + } + &:last-child { + border-radius: 0 5px 5px 0; + } } } } .tbody { - tr { + .tr { &:hover { transition: all 300ms $cubic-bezier; background-color: $pale-white-color; } - td { + .td { border-style: solid; border-width: 0px 0px 1px 0px; border-color: $border-white-color; diff --git a/packages/ui-react/lib/Table/Table.stories.ts b/packages/ui-react/lib/Table/Table.stories.ts index 266d75d..7a09348 100644 --- a/packages/ui-react/lib/Table/Table.stories.ts +++ b/packages/ui-react/lib/Table/Table.stories.ts @@ -17,58 +17,28 @@ type Story = StoryObj; const defaultProps: TableProps = { pageSize: 3, - columns: [ - { - title: 'Title', - dataIndex: 'name', - width: 400, - }, - { title: 'Size', dataIndex: 'size' }, - { title: 'Owner', dataIndex: 'owner', width: 150 }, - { title: 'Update-Time', dataIndex: 'time', width: 150 }, - ], - dataSource: [ + data: [ { - key: '1', - name: 'Semi Design 设计稿.fig', - size: '2M ', - owner: '姜鹏志', - time: 'hello', + col1: 'Hello', + col2: 'World', }, { - key: '2', - name: 'Semi Design 分享演示文稿', - size: '2M ', - owner: '姜鹏志', - time: '2020-02-02 05:12', + col1: 'react-table', + col2: 'rocks', }, { - key: '3', - name: '设计文档', - size: '2M ', - owner: '姜鹏志', - time: '2020-01-26 11:01', - }, - { - key: '4', - name: 'Semi Design 2 设计稿.fig', - size: '2M ', - owner: '姜鹏志', - time: '2020-02-02 05:18', + col1: 'whatever', + col2: 'you want', }, + ], + columns: [ { - key: '5', - name: 'Semi Design 2 分享演示文稿', - size: '2M ', - owner: '姜鹏志', - time: '2020-02-02 05:12', + Header: 'Column 1', + accessor: 'col1', // accessor is the "key" in the data }, { - key: '6', - name: '设计文档 2', - size: '2M ', - owner: '姜鹏志', - time: '2020-01-26 11:01', + Header: 'Column 2', + accessor: 'col2', }, ], }; diff --git a/packages/ui-react/lib/Table/Table.tsx b/packages/ui-react/lib/Table/Table.tsx index ea6515d..6bc2ae6 100644 --- a/packages/ui-react/lib/Table/Table.tsx +++ b/packages/ui-react/lib/Table/Table.tsx @@ -1,115 +1,86 @@ -import React, { useEffect, useState, type CSSProperties, type ReactNode } from 'react'; +import React from 'react'; import styles from './Table.module.scss'; -import { Pagination } from '..'; - -export interface column { - /** - * title , the title of the column - */ - title?: string; - /** - * dataIndex, the dataIndex of the column - */ - dataIndex?: string; - /** - * width, the width of the column - */ - width?: number; - /** - * render, the render of the column - */ - render?: (title?: string, dataIndex?: string) => ReactNode; -} - -export interface dataItem { - /** - * key , the key of the dataItem - */ - key?: string; - - /** - * other property - */ - // eslint-disable-next-line @typescript-eslint/no-explicit-any - [property: string]: any; -} - -export interface TableProps extends React.TableHTMLAttributes { - /** - * the caption of the Table - */ - caption?: ReactNode; - /** - * style , the style of the table - */ - style?: CSSProperties; - /** - * columns, the column of the table - */ - columns: column[]; - /** - * dataSource - */ - dataSource: dataItem[]; - /** - * pageSize: number - */ - pageSize: number; -} - -export const Table = React.forwardRef( - ({ caption, style, columns, dataSource, pageSize = 8, ...rest }, ref) => { - const [page, setPage] = useState(1); - const [showData, setShowData] = useState([]); - - useEffect(() => { - const newShowData = dataSource.slice((page - 1) * pageSize, page * pageSize); - setShowData(newShowData); - }, [page, pageSize, dataSource]); - return ( - <> - - - - - {columns?.map((item: column) => { - return ( - - ); - })} - - - - {showData.map((dataItem) => ( - - {columns?.map((column) => ( - - ))} - - ))} - -
{caption}
- {item.render && item.render(item.title, item.dataIndex)} - {!item.render && item.title} -
{dataItem[`${column.dataIndex}`]}
-
- setPage(value)} - /> -
- - ); - }, -); + +export interface TableProps extends React.TableHTMLAttributes {} + +export interface TheadProps extends React.HTMLAttributes {} + +export interface TbodyProps extends React.HTMLAttributes {} + +export interface TrProps extends React.HTMLAttributes {} + +export interface ThProps extends React.ThHTMLAttributes {} + +export interface TdProps extends React.TdHTMLAttributes {} + +export const Table = React.forwardRef(({ ...rest }, ref) => { + return ( + + ); +}); + +export const Thead = React.forwardRef(({ ...rest }, ref) => { + return ( + + ); +}); + +export const Tbody = React.forwardRef(({ ...rest }, ref) => { + return ( + + ); +}); + +export const Tr = React.forwardRef(({ ...rest }, ref) => { + return ( + + ); +}); + +export const Th = React.forwardRef(({ ...rest }, ref) => { + return ( +
+ ); +}); + +export const Td = React.forwardRef(({ ...rest }, ref) => { + return ( + + ); +}); Table.displayName = 'Table'; + +Thead.displayName = 'Thead'; + +Tbody.displayName = 'Tbody'; + +Tr.displayName = 'Tr'; + +Th.displayName = 'Th'; + +Td.displayName = 'Td'; diff --git a/packages/ui-react/package.json b/packages/ui-react/package.json index b385153..dbeec15 100644 --- a/packages/ui-react/package.json +++ b/packages/ui-react/package.json @@ -55,6 +55,7 @@ "@types/node": "^20.10.4", "@types/react": "^18.2.43", "@types/react-dom": "^18.2.17", + "@types/react-table": "^7.7.20", "@typescript-eslint/eslint-plugin": "^6.14.0", "@typescript-eslint/parser": "^6.14.0", "@vitejs/plugin-react-swc": "^3.5.0", @@ -73,6 +74,7 @@ "prettier": "^3.1.1", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-table": "^7.8.0", "storybook": "^8.0.2", "vite": "^5.0.8", "vite-plugin-dts": "^3.6.4", @@ -85,6 +87,7 @@ }, "dependencies": { "@storybook/addon-docs": "^8.0.2", + "@tanstack/react-table": "^8.16.0", "@types/react-transition-group": "^4.4.10", "classnames": "^2.5.1", "framer-motion": "^11.0.24", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0317d89..1bd4ee6 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -64,6 +64,9 @@ importers: '@storybook/addon-docs': specifier: ^8.0.2 version: 8.0.2 + '@tanstack/react-table': + specifier: ^8.16.0 + version: 8.16.0(react-dom@18.2.0)(react@18.2.0) '@types/react-transition-group': specifier: ^4.4.10 version: 4.4.10 @@ -116,6 +119,9 @@ importers: '@types/react-dom': specifier: ^18.2.17 version: 18.2.22 + '@types/react-table': + specifier: ^7.7.20 + version: 7.7.20 '@typescript-eslint/eslint-plugin': specifier: ^6.14.0 version: 6.21.0(@typescript-eslint/parser@6.21.0)(eslint@8.57.0)(typescript@5.4.3) @@ -170,12 +176,15 @@ importers: react-dom: specifier: ^18.2.0 version: 18.2.0(react@18.2.0) + react-table: + specifier: ^7.8.0 + version: 7.8.0(react@18.2.0) storybook: specifier: ^8.0.2 version: 8.0.2(react-dom@18.2.0)(react@18.2.0) vite: specifier: ^5.0.8 - version: 5.1.6(@types/node@20.11.30) + version: 5.1.6(@types/node@20.11.30)(sass@1.72.0) vite-plugin-dts: specifier: ^3.6.4 version: 3.7.3(@types/node@20.11.30)(typescript@5.4.3)(vite@5.1.6) @@ -184,7 +193,7 @@ importers: version: 1.1.1(vite@5.1.6) vitest: specifier: ^1.0.4 - version: 1.4.0(@types/node@20.11.30)(@vitest/ui@1.4.0)(jsdom@23.2.0) + version: 1.4.0(@types/node@20.11.30)(@vitest/ui@1.4.0)(jsdom@23.2.0)(sass@1.72.0) packages/ui-universal: dependencies: @@ -1953,7 +1962,7 @@ packages: magic-string: 0.27.0 react-docgen-typescript: 2.2.2(typescript@5.4.3) typescript: 5.4.3 - vite: 5.1.6(@types/node@20.11.30) + vite: 5.1.6(@types/node@20.11.30)(sass@1.72.0) dev: true /@jridgewell/gen-mapping@0.3.5: @@ -3126,7 +3135,7 @@ packages: magic-string: 0.30.8 ts-dedent: 2.2.0 typescript: 5.4.3 - vite: 5.1.6(@types/node@20.11.30) + vite: 5.1.6(@types/node@20.11.30)(sass@1.72.0) transitivePeerDependencies: - encoding - supports-color @@ -3477,7 +3486,7 @@ packages: react-dom: 18.2.0(react@18.2.0) resolve: 1.22.8 tsconfig-paths: 4.2.0 - vite: 5.1.6(@types/node@20.11.30) + vite: 5.1.6(@types/node@20.11.30)(sass@1.72.0) transitivePeerDependencies: - '@preact/preset-vite' - encoding @@ -3709,6 +3718,23 @@ packages: '@swc/counter': 0.1.3 dev: true + /@tanstack/react-table@8.16.0(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-rKRjnt8ostqN2fercRVOIH/dq7MAmOENCMvVlKx6P9Iokhh6woBGnIZEkqsY/vEJf1jN3TqLOb34xQGLVRuhAg==} + engines: {node: '>=12'} + peerDependencies: + react: '>=16.8' + react-dom: '>=16.8' + dependencies: + '@tanstack/table-core': 8.16.0 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + dev: false + + /@tanstack/table-core@8.16.0: + resolution: {integrity: sha512-dCG8vQGk4js5v88/k83tTedWOwjGnIyONrKpHpfmSJB8jwFHl8GSu1sBBxbtACVAPtAQgwNxl0rw1d3RqRM1Tg==} + engines: {node: '>=12'} + dev: false + /@testing-library/dom@9.3.4: resolution: {integrity: sha512-FlS4ZWlp97iiNWig0Muq8p+3rVDjRiYE+YKGbAqXOu9nwJFFOdL00kFpz42M+4huzYi86vAK1sOOfyOG45muIQ==} engines: {node: '>=14'} @@ -3752,7 +3778,7 @@ packages: dom-accessibility-api: 0.6.3 lodash: 4.17.21 redent: 3.0.0 - vitest: 1.4.0(@types/node@20.11.30)(@vitest/ui@1.4.0)(jsdom@23.2.0) + vitest: 1.4.0(@types/node@20.11.30)(@vitest/ui@1.4.0)(jsdom@23.2.0)(sass@1.72.0) dev: true /@testing-library/react@14.2.2(react-dom@18.2.0)(react@18.2.0): @@ -4056,6 +4082,12 @@ packages: '@types/react': 18.2.67 dev: true + /@types/react-table@7.7.20: + resolution: {integrity: sha512-ahMp4pmjVlnExxNwxyaDrFgmKxSbPwU23sGQw2gJK4EhCvnvmib2s/O/+y1dfV57dXOwpr2plfyBol+vEHbi2w==} + dependencies: + '@types/react': 18.2.71 + dev: true + /@types/react-transition-group@4.4.10: resolution: {integrity: sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q==} dependencies: @@ -4452,7 +4484,7 @@ packages: vite: ^4 || ^5 dependencies: '@swc/core': 1.4.8 - vite: 5.1.6(@types/node@20.11.30) + vite: 5.1.6(@types/node@20.11.30)(sass@1.72.0) transitivePeerDependencies: - '@swc/helpers' dev: true @@ -4476,7 +4508,7 @@ packages: strip-literal: 2.0.0 test-exclude: 6.0.0 v8-to-istanbul: 9.2.0 - vitest: 1.4.0(@types/node@20.11.30)(@vitest/ui@1.4.0)(jsdom@23.2.0) + vitest: 1.4.0(@types/node@20.11.30)(@vitest/ui@1.4.0)(jsdom@23.2.0)(sass@1.72.0) transitivePeerDependencies: - supports-color dev: true @@ -4523,7 +4555,7 @@ packages: pathe: 1.1.2 picocolors: 1.0.0 sirv: 2.0.4 - vitest: 1.4.0(@types/node@20.11.30)(@vitest/ui@1.4.0)(jsdom@23.2.0) + vitest: 1.4.0(@types/node@20.11.30)(@vitest/ui@1.4.0)(jsdom@23.2.0)(sass@1.72.0) dev: true /@vitest/utils@1.4.0: @@ -11475,6 +11507,14 @@ packages: react: 18.2.0 refractor: 3.6.0 + /react-table@7.8.0(react@18.2.0): + resolution: {integrity: sha512-hNaz4ygkZO4bESeFfnfOft73iBUj8K5oKi1EcSHPAibEydfsX2MyU6Z8KCr3mv3C9Kqqh71U+DhZkFvibbnPbA==} + peerDependencies: + react: ^16.8.3 || ^17.0.0-0 || ^18.0.0 + dependencies: + react: 18.2.0 + dev: true + /react-transition-group@4.4.5(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==} peerDependencies: @@ -13264,7 +13304,7 @@ packages: vfile-message: 4.0.2 dev: true - /vite-node@1.4.0(@types/node@20.11.30): + /vite-node@1.4.0(@types/node@20.11.30)(sass@1.72.0): resolution: {integrity: sha512-VZDAseqjrHgNd4Kh8icYHWzTKSCZMhia7GyHfhtzLW33fZlG9SwsB6CEhgyVOWkJfJ2pFLrp/Gj1FSfAiqH9Lw==} engines: {node: ^18.0.0 || >=20.0.0} hasBin: true @@ -13273,7 +13313,7 @@ packages: debug: 4.3.4 pathe: 1.1.2 picocolors: 1.0.0 - vite: 5.1.6(@types/node@20.11.30) + vite: 5.1.6(@types/node@20.11.30)(sass@1.72.0) transitivePeerDependencies: - '@types/node' - less @@ -13325,7 +13365,7 @@ packages: debug: 4.3.4 kolorist: 1.8.0 typescript: 5.4.3 - vite: 5.1.6(@types/node@20.11.30) + vite: 5.1.6(@types/node@20.11.30)(sass@1.72.0) vue-tsc: 1.8.27(typescript@5.4.3) transitivePeerDependencies: - '@types/node' @@ -13339,43 +13379,7 @@ packages: vite: '*' dependencies: minimatch: 9.0.3 - vite: 5.1.6(@types/node@20.11.30) - dev: true - - /vite@5.1.6(@types/node@20.11.30): - resolution: {integrity: sha512-yYIAZs9nVfRJ/AiOLCA91zzhjsHUgMjB+EigzFb6W2XTLO8JixBCKCjvhKZaye+NKYHCrkv3Oh50dH9EdLU2RA==} - engines: {node: ^18.0.0 || >=20.0.0} - hasBin: true - peerDependencies: - '@types/node': ^18.0.0 || >=20.0.0 - less: '*' - lightningcss: ^1.21.0 - sass: '*' - stylus: '*' - sugarss: '*' - terser: ^5.4.0 - peerDependenciesMeta: - '@types/node': - optional: true - less: - optional: true - lightningcss: - optional: true - sass: - optional: true - stylus: - optional: true - sugarss: - optional: true - terser: - optional: true - dependencies: - '@types/node': 20.11.30 - esbuild: 0.19.12 - postcss: 8.4.37 - rollup: 4.13.0 - optionalDependencies: - fsevents: 2.3.3 + vite: 5.1.6(@types/node@20.11.30)(sass@1.72.0) dev: true /vite@5.1.6(@types/node@20.11.30)(sass@1.72.0): @@ -13414,7 +13418,7 @@ packages: optionalDependencies: fsevents: 2.3.3 - /vitest@1.4.0(@types/node@20.11.30)(@vitest/ui@1.4.0)(jsdom@23.2.0): + /vitest@1.4.0(@types/node@20.11.30)(@vitest/ui@1.4.0)(jsdom@23.2.0)(sass@1.72.0): resolution: {integrity: sha512-gujzn0g7fmwf83/WzrDTnncZt2UiXP41mHuFYFrdwaLRVQ6JYQEiME2IfEjU3vcFL3VKa75XhI3lFgn+hfVsQw==} engines: {node: ^18.0.0 || >=20.0.0} hasBin: true @@ -13459,8 +13463,8 @@ packages: strip-literal: 2.0.0 tinybench: 2.6.0 tinypool: 0.8.2 - vite: 5.1.6(@types/node@20.11.30) - vite-node: 1.4.0(@types/node@20.11.30) + vite: 5.1.6(@types/node@20.11.30)(sass@1.72.0) + vite-node: 1.4.0(@types/node@20.11.30)(sass@1.72.0) why-is-node-running: 2.2.2 transitivePeerDependencies: - less From 815c4fad4310750319d3bb93882834273a225ba7 Mon Sep 17 00:00:00 2001 From: bqxbqx Date: Tue, 23 Apr 2024 18:21:24 +0800 Subject: [PATCH 06/11] =?UTF-8?q?fix(carousel):=20=E5=AE=8C=E5=96=84?= =?UTF-8?q?=E8=BD=AE=E6=92=AD=E5=9B=BE=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/ui-react/lib/Carousel/Carousel.tsx | 75 +++++++++------------ packages/ui-react/package.json | 2 +- 2 files changed, 31 insertions(+), 46 deletions(-) diff --git a/packages/ui-react/lib/Carousel/Carousel.tsx b/packages/ui-react/lib/Carousel/Carousel.tsx index e5b9496..a1ba5d1 100644 --- a/packages/ui-react/lib/Carousel/Carousel.tsx +++ b/packages/ui-react/lib/Carousel/Carousel.tsx @@ -1,5 +1,5 @@ import React, { memo, useEffect, useRef, useState } from 'react'; -import { Button, type CarouselItemProps, CarouselItem } from '..'; +import { type CarouselItemProps, CarouselItem } from '..'; import classNames from 'classnames'; import styles from './Carousel.module.scss'; @@ -28,6 +28,10 @@ export interface CarouselProps { * select of the Carousel */ selected?: number; + /** + * isSliding + */ + isSliding?: boolean; } interface ContentProps { @@ -36,7 +40,15 @@ interface ContentProps { export const Carousel = React.forwardRef( ( - { width = 400, CarouselItems = undefined, height, onChange, defaultSelected, selected }, + { + width = 400, + CarouselItems = undefined, + height, + onChange, + defaultSelected, + selected, + isSliding = true, + }, ref, ) => { // The definition judgment of this rotating chart is determined by two factors, @@ -55,15 +67,8 @@ export const Carousel = React.forwardRef( const divRef = useRef(null); useEffect(() => { - selected && setSelect(selected); + selected !== undefined && setSelect(selected); }, [selected]); - const pre = () => { - select !== 0 && setSelect(select - 1); - }; - - const next = () => { - select !== itemsNumber - 1 && setSelect(select + 1); - }; const handleMouseDown = (e: React.MouseEvent) => { setStartX(e.clientX); @@ -100,12 +105,10 @@ export const Carousel = React.forwardRef( if (Math.abs(difference) >= width / 2 && difference > 0 && select !== itemsNumber - 1) { setSelect(select + 1); setIsChanged(true); - } - if (Math.abs(difference) >= width / 2 && difference < 0 && select !== 0) { + } else if (Math.abs(difference) >= width / 2 && difference < 0 && select !== 0) { setSelect(select - 1); setIsChanged(true); - } - if ( + } else if ( Math.abs(difference) < width / 2 && divRef.current && select === itemsNumber - 1 && @@ -160,40 +163,22 @@ export const Carousel = React.forwardRef( }); return ( - <> +
isSliding && handleMouseDown} + onMouseMove={() => isSliding && handleMouseMove} + onMouseUp={() => isSliding && handleMouseUp} + style={{ width: `${width}px`, height: `${height}px` }} > - -
-
- {CarouselItems && } -
-
- + {CarouselItems && }
- +
); }, ); diff --git a/packages/ui-react/package.json b/packages/ui-react/package.json index dbeec15..a97f953 100644 --- a/packages/ui-react/package.json +++ b/packages/ui-react/package.json @@ -1,6 +1,6 @@ { "name": "@ui-aurora/react", - "version": "0.0.7", + "version": "0.0.8", "description": "A React UI library built for SASTOJ", "author": "sast", "license": "MIT", From b51d8bec1f5e7cfed8d1ff671e5b2271394f2289 Mon Sep 17 00:00:00 2001 From: bqxbqx Date: Tue, 23 Apr 2024 20:51:17 +0800 Subject: [PATCH 07/11] feat(carousel): add classname on carousel --- .../ui-react/lib/Carousel/Carousel.stories.tsx | 3 ++- packages/ui-react/lib/Carousel/Carousel.tsx | 14 ++++++++------ packages/ui-react/package.json | 2 +- 3 files changed, 11 insertions(+), 8 deletions(-) diff --git a/packages/ui-react/lib/Carousel/Carousel.stories.tsx b/packages/ui-react/lib/Carousel/Carousel.stories.tsx index 0ff3edd..0580b55 100644 --- a/packages/ui-react/lib/Carousel/Carousel.stories.tsx +++ b/packages/ui-react/lib/Carousel/Carousel.stories.tsx @@ -47,9 +47,10 @@ export const DefaultCarousel: Story = { { children:
4
}, { children:
5
}, ], - onChange: test, + onchange: test, defaultSelected: 2, selected: 1, + className: 'test', }, }; diff --git a/packages/ui-react/lib/Carousel/Carousel.tsx b/packages/ui-react/lib/Carousel/Carousel.tsx index a1ba5d1..3ff0890 100644 --- a/packages/ui-react/lib/Carousel/Carousel.tsx +++ b/packages/ui-react/lib/Carousel/Carousel.tsx @@ -1,9 +1,9 @@ -import React, { memo, useEffect, useRef, useState } from 'react'; +import React, { memo, useEffect, useRef, useState, type HtmlHTMLAttributes } from 'react'; import { type CarouselItemProps, CarouselItem } from '..'; import classNames from 'classnames'; import styles from './Carousel.module.scss'; -export interface CarouselProps { +export interface CarouselProps extends HtmlHTMLAttributes { /** * width of the carousel */ @@ -19,7 +19,7 @@ export interface CarouselProps { /** * onChange : the onChange of the Carousel */ - onChange?: (value: number) => void; + onchange?: (value: number) => void; /** * defaultselect the defaultselect of the Carousel */ @@ -44,10 +44,11 @@ export const Carousel = React.forwardRef( width = 400, CarouselItems = undefined, height, - onChange, + onchange, defaultSelected, selected, isSliding = true, + ...rest }, ref, ) => { @@ -121,8 +122,8 @@ export const Carousel = React.forwardRef( }; useEffect(() => { - onChange && onChange(select); - }, [select, onChange]); + onchange && onchange(select); + }, [select, onchange]); useEffect(() => { if (difference === 0 && !isChanged) { @@ -167,6 +168,7 @@ export const Carousel = React.forwardRef( className={carouselClass} ref={ref} style={{ width: `${width}px`, height: `${height}px` }} + {...rest} >
Date: Tue, 23 Apr 2024 21:11:14 +0800 Subject: [PATCH 08/11] feat(carousel): add classname #2 --- packages/ui-react/lib/Carousel/Carousel.tsx | 7 ++++++- packages/ui-react/package.json | 2 +- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/ui-react/lib/Carousel/Carousel.tsx b/packages/ui-react/lib/Carousel/Carousel.tsx index 3ff0890..208fdb8 100644 --- a/packages/ui-react/lib/Carousel/Carousel.tsx +++ b/packages/ui-react/lib/Carousel/Carousel.tsx @@ -32,6 +32,10 @@ export interface CarouselProps extends HtmlHTMLAttributes { * isSliding */ isSliding?: boolean; + /** + * className + */ + className?: string; } interface ContentProps { @@ -48,6 +52,7 @@ export const Carousel = React.forwardRef( defaultSelected, selected, isSliding = true, + className, ...rest }, ref, @@ -165,7 +170,7 @@ export const Carousel = React.forwardRef( return (
Date: Thu, 25 Apr 2024 10:49:08 +0800 Subject: [PATCH 09/11] fix(dialog): show area --- packages/ui-react/lib/Carousel/Carousel.tsx | 6 ++++++ packages/ui-react/lib/Carousel/CarouselItem.tsx | 8 ++++++-- packages/ui-react/lib/Dialog/Dialog.module.scss | 2 +- packages/ui-react/package.json | 2 +- 4 files changed, 14 insertions(+), 4 deletions(-) diff --git a/packages/ui-react/lib/Carousel/Carousel.tsx b/packages/ui-react/lib/Carousel/Carousel.tsx index 208fdb8..ad531da 100644 --- a/packages/ui-react/lib/Carousel/Carousel.tsx +++ b/packages/ui-react/lib/Carousel/Carousel.tsx @@ -36,6 +36,10 @@ export interface CarouselProps extends HtmlHTMLAttributes { * className */ className?: string; + /** + * itemClassName?: + */ + itemClassName?: string; } interface ContentProps { @@ -53,6 +57,7 @@ export const Carousel = React.forwardRef( selected, isSliding = true, className, + itemClassName, ...rest }, ref, @@ -159,6 +164,7 @@ export const Carousel = React.forwardRef( key={index} width={item.width || width} height={item.height || height} + className={itemClassName} > {item.children} diff --git a/packages/ui-react/lib/Carousel/CarouselItem.tsx b/packages/ui-react/lib/Carousel/CarouselItem.tsx index c44de6b..8375f0a 100644 --- a/packages/ui-react/lib/Carousel/CarouselItem.tsx +++ b/packages/ui-react/lib/Carousel/CarouselItem.tsx @@ -14,15 +14,19 @@ export interface CarouselItemProps { * height of the CarouselItem */ height?: number; + /** + * className + */ + className?: string; } export const CarouselItem = React.forwardRef( - ({ children, width, height }, ref) => { + ({ children, width, height, className }, ref) => { return ( <>
{children} diff --git a/packages/ui-react/lib/Dialog/Dialog.module.scss b/packages/ui-react/lib/Dialog/Dialog.module.scss index 81118ca..c399f38 100644 --- a/packages/ui-react/lib/Dialog/Dialog.module.scss +++ b/packages/ui-react/lib/Dialog/Dialog.module.scss @@ -45,7 +45,7 @@ width: 100%; left: 0; top: 0; - position: absolute; + position: fixed; &.mask { background-color: rgb($black-color, var(--opacity-background)); backdrop-filter: blur(var(--blur)); diff --git a/packages/ui-react/package.json b/packages/ui-react/package.json index 58e8e49..ff53dea 100644 --- a/packages/ui-react/package.json +++ b/packages/ui-react/package.json @@ -1,6 +1,6 @@ { "name": "@ui-aurora/react", - "version": "0.0.10", + "version": "0.0.11", "description": "A React UI library built for SASTOJ", "author": "sast", "license": "MIT", From 1cc5b841c16dcb88fd20c8ea3a031a57f89f21dc Mon Sep 17 00:00:00 2001 From: bqxbqx Date: Fri, 26 Apr 2024 15:57:12 +0800 Subject: [PATCH 10/11] fix(pagination): fix update bug --- .../lib/Checkbox/Checkbox.stories.tsx | 5 ++ .../ui-react/lib/Pagination/Pagination.tsx | 84 ++++++++++++------- .../lib/Pagination/PaginationItem.tsx | 4 +- packages/ui-react/package.json | 2 +- 4 files changed, 63 insertions(+), 32 deletions(-) diff --git a/packages/ui-react/lib/Checkbox/Checkbox.stories.tsx b/packages/ui-react/lib/Checkbox/Checkbox.stories.tsx index 51f6661..a9c49f6 100644 --- a/packages/ui-react/lib/Checkbox/Checkbox.stories.tsx +++ b/packages/ui-react/lib/Checkbox/Checkbox.stories.tsx @@ -3,6 +3,10 @@ import type { Meta, StoryObj } from '@storybook/react'; import React from 'react'; import { Checkbox, type CheckboxProps } from './Checkbox'; +const test = (value) => { + console.log(value); +}; + const meta = { title: 'Components/Checkbox', component: Checkbox, @@ -20,6 +24,7 @@ type Story = StoryObj; const defaultProps: CheckboxProps = { label: 'SAST', disabled: false, + onChecked: test, }; export const DefaultCheckbox: Story = { diff --git a/packages/ui-react/lib/Pagination/Pagination.tsx b/packages/ui-react/lib/Pagination/Pagination.tsx index 807a106..645cf5a 100644 --- a/packages/ui-react/lib/Pagination/Pagination.tsx +++ b/packages/ui-react/lib/Pagination/Pagination.tsx @@ -66,11 +66,8 @@ export const Pagination = React.forwardRef( useEffect(() => { onChange(currentPage); - }, [currentPage, onChange]); - - useEffect(() => { - if (activePage) changeCurrentPage(activePage); - }, [activePage, changeCurrentPage]); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [currentPage]); useEffect(() => { const newItems: ReactNode[] = []; @@ -83,6 +80,7 @@ export const Pagination = React.forwardRef( key={i} index={i} disabled={disabled} + activePage={activePage} > {i + 1} , @@ -95,15 +93,20 @@ export const Pagination = React.forwardRef( newItems.push( {i + 1} , ); } newItems.push( - + ... , ); @@ -112,7 +115,9 @@ export const Pagination = React.forwardRef( {i + 1} , @@ -126,14 +131,19 @@ export const Pagination = React.forwardRef( {i + 1} , ); } newItems.push( - + ... , ); @@ -142,7 +152,9 @@ export const Pagination = React.forwardRef( {i + 1} , @@ -155,13 +167,18 @@ export const Pagination = React.forwardRef( {1} , ); newItems.push( - + ... , ); @@ -170,14 +187,19 @@ export const Pagination = React.forwardRef( {i + 1} , ); } newItems.push( - + ... , ); @@ -186,6 +208,8 @@ export const Pagination = React.forwardRef( type="select" index={pageNumber - 1} disabled={disabled} + key={pageNumber - 1} + activePage={activePage} > {pageNumber} , @@ -193,32 +217,32 @@ export const Pagination = React.forwardRef( } } setItemList(newItems); - }, [pageNumber, currentPage, disabled]); + }, [pageNumber, currentPage, disabled, activePage]); const PaginationClass = classNames(`${styles['base']} ${styles[disabled ? 'disabled' : '']}`); return ( - <> -
+ + + + {itemList} + - - - - {itemList} - - - -
- + + +
); }, ); diff --git a/packages/ui-react/lib/Pagination/PaginationItem.tsx b/packages/ui-react/lib/Pagination/PaginationItem.tsx index 3890a5f..b65a55f 100644 --- a/packages/ui-react/lib/Pagination/PaginationItem.tsx +++ b/packages/ui-react/lib/Pagination/PaginationItem.tsx @@ -8,6 +8,7 @@ export interface PaginationItemProps { disabled?: boolean; type: 'select' | 'add' | 'delete' | 'none'; index?: number; + activePage?: number; } export const PaginationItem = ({ @@ -15,6 +16,7 @@ export const PaginationItem = ({ disabled = false, index, type, + activePage, }: PaginationItemProps) => { const [currentPage, increaseCurrentPage, decreaseCurrentPage, changeCurrentPage] = useCurrentPageStore((state) => [ @@ -33,7 +35,7 @@ export const PaginationItem = ({ return ( - +
); }, diff --git a/packages/ui-react/lib/Sheet/Sheet.module.scss b/packages/ui-react/lib/Sheet/Sheet.module.scss index 6d11a1a..2ec76fa 100644 --- a/packages/ui-react/lib/Sheet/Sheet.module.scss +++ b/packages/ui-react/lib/Sheet/Sheet.module.scss @@ -48,7 +48,7 @@ $padding-left-right-distance: 20px; position: fixed; left: 0; top: 0; - z-index: 1; + z-index: 999; box-sizing: border-box; &.mask { backdrop-filter: blur(var(--blur)); @@ -60,7 +60,7 @@ $padding-left-right-distance: 20px; height: 100vh; background-color: $white-color; position: absolute; - z-index: 2; + z-index: 1000; box-sizing: border-box; right: 0; padding: $padding-left-right-distance; diff --git a/packages/ui-react/lib/Sheet/Sheet.tsx b/packages/ui-react/lib/Sheet/Sheet.tsx index 4e97d80..46e3344 100644 --- a/packages/ui-react/lib/Sheet/Sheet.tsx +++ b/packages/ui-react/lib/Sheet/Sheet.tsx @@ -51,6 +51,10 @@ export interface SheetProps extends React.HtmlHTMLAttributes { * placement : left|right */ placement?: 'left' | 'right'; + /** + * isFooter + */ + isFooter?: boolean; } export const Sheet = React.forwardRef( @@ -67,6 +71,7 @@ export const Sheet = React.forwardRef( mask = true, maskStyle, placement = 'right', + isFooter, ...rest }, ref, @@ -124,7 +129,7 @@ export const Sheet = React.forwardRef( content={sheetTitle} >
{mainContent}
- {sheetFooter} + {isFooter && {sheetFooter}}
)} diff --git a/packages/ui-react/package.json b/packages/ui-react/package.json index c341fa7..d366651 100644 --- a/packages/ui-react/package.json +++ b/packages/ui-react/package.json @@ -1,6 +1,6 @@ { "name": "@ui-aurora/react", - "version": "0.0.12", + "version": "0.0.13", "description": "A React UI library built for SASTOJ", "author": "sast", "license": "MIT",