diff --git a/packages/ui/search-select-list/.eslintrc.js b/packages/ui/search-select-list/.eslintrc.js new file mode 100644 index 0000000000000000000000000000000000000000..5928ca1d6479ff7d0abd9fdec53a30df884f15f2 --- /dev/null +++ b/packages/ui/search-select-list/.eslintrc.js @@ -0,0 +1,7 @@ +module.exports = { + extends: require.resolve('@reskript/config-lint/config/eslint'), + rules: { + 'react/jsx-uses-react': 'error', + }, + root: true, +}; diff --git a/packages/ui/search-select-list/.storybook/main.js b/packages/ui/search-select-list/.storybook/main.js new file mode 100644 index 0000000000000000000000000000000000000000..8a1cb9e5e8113819c7c2f17a1af726b1c04ef3e6 --- /dev/null +++ b/packages/ui/search-select-list/.storybook/main.js @@ -0,0 +1,74 @@ +const {getBabelConfig} = require('@reskript/config-babel'); +const {loaders} = require('@reskript/config-webpack'); +const path = require('path'); + +const loaderOptions = { + cwd: process.cwd(), + srcDirectory: 'src', + projectSettings: { + build: { + extractCSS: false, + styleResources: [ + require.resolve('@osui/theme/dist/antd-vars-patch.less'), + require.resolve('@osui/theme/dist/less-functions-overrides.less'), + ], + }, + }, +}; + +module.exports = { + stories: [ + '../stories/**/*.stories.[tj]s{,x}', + '../stories/**/*.stories.mdx' + ], + addons: [ + { + name: '@storybook/addon-docs', + options: { + configureJSX: true, + babelOptions: {}, + sourceLoaderOptions: null, + }, + }, + '@storybook/addon-storysource', // https://github.com/storybookjs/storybook/tree/master/addons/storysource + '@storybook/addon-a11y/register', // https://github.com/storybookjs/storybook/tree/master/addons/a11y + '@storybook/addon-viewport/register', // https://github.com/storybookjs/storybook/tree/master/addons/viewport + ], + webpackFinal: async (config) => { + config.module.rules.push({ + test: /\.(js|jsx|ts|tsx)$/, + exclude: /node_modules/, + use: [ + { + loader: 'babel-loader', + options: getBabelConfig(), + }, + ], + }); + config.module.rules.push({ + test: /\.less$/, + loaders: [ + loaders.style(loaderOptions), + loaders.css(loaderOptions), + loaders.less(loaderOptions), + loaders.styleResources(loaderOptions), + ], + }); + // 如果使用css modules 请打开这个，并按需匹配css modules 文件 + // 这个同时打开了classnames loader， 可以用 import c from 'xxx.less' + // config.module.rules.push({ + // test: /\.less$/, + // loaders: [ + // loaders.classNames(), + // loaders.style(loaderOptions), + // loaders.cssModules(loaderOptions), + // loaders.less(loaderOptions), + // loaders.styleResources(loaderOptions), + // ], + // }); + + config.resolve.extensions.push('.ts', '.tsx'); + config.resolve.alias['@'] = path.resolve(__dirname, '../src'); + return config; + }, +}; diff --git a/packages/ui/search-select-list/.storybook/preview.js b/packages/ui/search-select-list/.storybook/preview.js new file mode 100644 index 0000000000000000000000000000000000000000..07034b2817a7c283b61bafd08c2e684db9ccbd08 --- /dev/null +++ b/packages/ui/search-select-list/.storybook/preview.js @@ -0,0 +1,20 @@ +import {addParameters, addDecorator} from '@storybook/react'; +import {DocsPage, DocsContainer} from '@storybook/addon-docs/blocks'; +import { + INITIAL_VIEWPORTS, + } from '@storybook/addon-viewport'; +import '@osui/theme/dist/theme/vars.css'; + +addParameters({ + docs: { + container: DocsContainer, + page: DocsPage, + }, + viewport: { + viewports: { + ...INITIAL_VIEWPORTS + } + }, +}); + +addDecorator(storyFn =>
{storyFn()}
); diff --git a/packages/ui/search-select-list/README.md b/packages/ui/search-select-list/README.md new file mode 100644 index 0000000000000000000000000000000000000000..4ec47dab183563f867f7782b97362218419c31c8 --- /dev/null +++ b/packages/ui/search-select-list/README.md @@ -0,0 +1,30 @@ +# @osui/{componentName} + +## 安装说明 + +### 方式一 + +单包使用 + +``` +yarn install @osui/{componentName} +``` + +``` +import {CapComponentName} from '@osui/{componentName}' +``` + +### 方式二 + +从 `@osui/ui` 统一引入 + +``` +yarn install @osui/ui +``` + +``` +import {{CapComponentName}} from '@osui/ui'; +``` + + + diff --git a/packages/ui/search-select-list/babel.config.js b/packages/ui/search-select-list/babel.config.js new file mode 100644 index 0000000000000000000000000000000000000000..d222841daa0815ccea18188ceb097da34d13aad9 --- /dev/null +++ b/packages/ui/search-select-list/babel.config.js @@ -0,0 +1,11 @@ +const {getTransformBabelConfig} = require('@reskript/config-babel'); + +const options = { + browserSupport: {}, + usage: 'build', + mode: 'production', + polyfill: false, + hostType: 'library', +}; + +module.exports = getTransformBabelConfig(options); diff --git a/packages/ui/search-select-list/package.json b/packages/ui/search-select-list/package.json new file mode 100644 index 0000000000000000000000000000000000000000..27c8888242a91867c412c16b9b86c767561528d8 --- /dev/null +++ b/packages/ui/search-select-list/package.json @@ -0,0 +1,60 @@ +{ + "name": "@osui/search-select-list", + "version": "0.1.0", + "description": "", + "main": "dist/index.js", + "scripts": { + "lint": "skr lint", + "build": "sh scripts/build.sh", + "storybook": "start-storybook -p 8700", + "clean": "rm -rf node_modules && rm -rf dist", + "test": "echo \"Error: no test specified\" && exit 1" + }, + "sideEffects": [ + "dist/*.less" + ], + "devDependencies": { + "@babel/cli": "^7.10.5", + "@reskript/cli": "^0.9.0", + "@reskript/cli-lint": "^0.9.9", + "@reskript/config-babel": "^0.9.0", + "@reskript/config-lint": "^0.12.3", + "@reskript/config-webpack": "^0.11.2", + "@storybook/addon-a11y": "^5.3.19", + "@storybook/addon-docs": "^5.3.19", + "@storybook/addon-storysource": "^5.3.19", + "@storybook/addon-viewport": "^5.3.19", + "@storybook/addons": "^5.3.19", + "@storybook/client-api": "^5.3.19", + "@storybook/react": "^5.3.19", + "@types/classnames": "^2.2.10", + "@types/react-dom": "^16.9.8", + "antd": "^4.4.0", + "babel-loader": "^8.1.0", + "cpy-cli": "^3.1.1", + "husky": "^4.2.5", + "prop-types": "^15.7.2", + "react": "^16.13.1", + "react-dom": "^16.13.1", + "react-is": "^16.13.1", + "typescript": "^3.9.6" + }, + "peerDependencies": { + "antd": ">=4.4.0", + "react": ">=16.9.0", + "react-dom": ">=16.9.0" + }, + "repository": { + "type": "git", + "url": "https://gitee.com/yuxuanhuo/osui/tree/master" + }, + "author": "huoyuxuan", + "license": "MIT", + "husky": { + "hooks": { + "pre-commit": "skr lint ./src" + } + }, + "dependencies": { + } +} diff --git a/packages/ui/search-select-list/scripts/build.sh b/packages/ui/search-select-list/scripts/build.sh new file mode 100644 index 0000000000000000000000000000000000000000..f1cf5724ccdec601e43fab14da4e8f9f80d5765c --- /dev/null +++ b/packages/ui/search-select-list/scripts/build.sh @@ -0,0 +1,18 @@ +# export PATH=$NODEJS_BIN_LATEST:$YARN_BIN_LATEST:$PATH + +echo "node $(node -v)" +echo "npm $(npm -v)" +echo "yarn $(yarn -v)" + +rm -rf dist + +yarn install --production=false +# yarn test + +$(npm bin)/cpy '**/*' '!**/*.ts' '!**/*.tsx' '!**/*.js' '!**/*.jsx' ../tmp/ --cwd=src/ --parents +$(npm bin)/tsc +$(npm bin)/babel tmp --out-dir dist --ignore "src/**/*.test.js" --copy-files --source-maps + +rm -rf tmp + +echo "build success" diff --git a/packages/ui/search-select-list/src/index.less b/packages/ui/search-select-list/src/index.less new file mode 100644 index 0000000000000000000000000000000000000000..5b4c082b994cb713028d54865ac7f7c759bccb30 --- /dev/null +++ b/packages/ui/search-select-list/src/index.less @@ -0,0 +1,57 @@ +@osui-search-select-list-class-prefix: osui-search-select-list; + +.@{osui-search-select-list-class-prefix} { + &-popover { + .ant-popover-content { + width: 280px; + + .ant-popover-inner { + .ant-popover-title { + border-bottom: none; + + .ant-menu-horizontal { + border-bottom-width: 2px; + } + + .ant-menu-item { + margin-right: 33px; + margin-left: 0; + } + } + + .ant-popover-inner-content { + padding: 12px 0; + + .input-box { + margin-bottom: 16px; + padding: 0 16px; + } + + .list-box { + list-style: none; + padding: 0; + margin: 0; + max-height: 200px; + overflow-y: scroll; + + li { + padding: 0 16px; + cursor: default; + display: block; + height: 32px; + line-height: 32px; + + &:hover { + background-color: var(--color-gray-3); + } + } + } + } + } + + .ant-popover-arrow { + display: none; + } + } + } +} diff --git a/packages/ui/search-select-list/src/index.tsx b/packages/ui/search-select-list/src/index.tsx new file mode 100644 index 0000000000000000000000000000000000000000..3aead2aaf85edcb09d7c182311f3234dde9f0961 --- /dev/null +++ b/packages/ui/search-select-list/src/index.tsx @@ -0,0 +1,132 @@ +import * as React from 'react'; +import {Popover, Button, Input, Menu} from 'antd'; +import {PopoverProps as AntdPooverProps} from 'antd/lib/popover'; +import classNames from 'classnames'; +import {SearchOutlined} from '@ant-design/icons'; +import './index.less'; + +const clsPrePopfix = 'osui-search-select-list-popover'; +const clsPreBtnfix = 'osui-search-select-list-button'; + +/** + * selectList的每个选项 + * todo, icon应该定义成什么类型，之后和btn样式一起修改，btn也需要icon + */ +export interface LiItemProps{ + label: string; + value: string; + icon?: any; + handleClickItem: (item: any) => void; +} +const LiItem: React.FC = props => { + function handleClickItem() { + props.handleClickItem(props); + } + return (
  • + {/* {icon? icon : null}*/} + {props.label} +
    • + ); +}; + +/** +* popoverClassName:popover的className +* btnClassName:button的className +* placeholder:input搜索的placeholder内容 +* btnName:按钮的名称 +* menuList:导航列表，若不传的话就没有上面的导航列表 +* selectlist:下拉选项列表 +* defaultMenuSelect:默认选中的menu +* handleClickItem:点击menu回传的函数 +* handleSearch:点击搜索回传的函数 +* handleClickMenu:点击下拉选项回传的函数 +*/ +export interface SeacrhSelectListProps extends AntdPooverProps{ + popoverClassName?: string; + btnClassName?: string; + placeholder?: string; + btnName?: string; + menuList?: any[]; + selectlist?: any[]; + defaultMenuSelect?: string; + handleClickItem: (item: any) => void; + handleSearch: (val: any) => void; + handleClickMenu?: (key: any) => void; +} +const SeacrhSelectList: React.FC = props => { + const { + popoverClassName, + btnClassName, + btnName, + menuList, + selectlist, + defaultMenuSelect, + placeholder, + handleClickItem, + handleSearch, + handleClickMenu, + } = props; + let menu = null; + + const [searchVal, setSearchVal] = React.useState(); + function handleChangeSearch(e: any) { + setSearchVal(e.target.value); + } + function handleSearchFunc() { + handleSearch(searchVal); + } + // menuList 存在，则赋默认menu值，若没有则第一个为默认 + if (menuList && menuList.length) { + const selectSelectedKey = defaultMenuSelect ? [`${defaultMenuSelect}`] : [menuList[0].value]; + menu = ( + { + menuList.map((item: any) => {item.label}) + } + ); + } + const content = (
    +
    + + } + /> +
    +
      + {selectlist && selectlist.length && selectlist.map(item => ( + ))} +
    +
    ); + {/* todo button OsuiSelect完成后，看基于select修改还是自己写btn */} + return ( + <> + + + + + ); +}; + +export default SeacrhSelectList; + diff --git a/packages/ui/search-select-list/stories/index.stories.mdx b/packages/ui/search-select-list/stories/index.stories.mdx new file mode 100644 index 0000000000000000000000000000000000000000..d1b2d6fb1b49ed4ac2887cd5ff7af674f30c129f --- /dev/null +++ b/packages/ui/search-select-list/stories/index.stories.mdx @@ -0,0 +1,34 @@ +import {Meta, Story, Preview} from '@storybook/addon-docs/blocks'; +import {Demo} from './index.stories' + + + +# OSUI Select-search-list + +## API + +### 基本属性 + +支持所有antd的Tooltip文字提示的属性：见[antd文档](https://ant.design/components/tooltip-cn/#API) + +### 新增属性 + +| 参数 | 说明 | 类型 | 默认值 +| --- | --- | --- | --- | +| popoverClassName | popover的className | string | | +| btnClassName | button的className | string | | +| placeholder | input搜索的placeholder内容 | string | | +| btnName | 按钮的名称 | string | | +| defaultMenuSelect | 默认选中的menu | string | 默认第一个值 +| menuList | 导航列表，若不传的话就没有上面的导航列表 | array | +| selectlist | 下拉选项列表 | array | +| handleClickItem | 点击menu回传的函数 | function | | +| handleSearch | 点击搜索回传的函数 | function | +| handleClickMenu | 点击下拉选项回传的函数 | function | + + + + + {Demo()} + + diff --git a/packages/ui/search-select-list/stories/index.stories.tsx b/packages/ui/search-select-list/stories/index.stories.tsx new file mode 100644 index 0000000000000000000000000000000000000000..90c5e42d2f65653614e8b14b8fa88a06d2ab41bf --- /dev/null +++ b/packages/ui/search-select-list/stories/index.stories.tsx @@ -0,0 +1,70 @@ +import React, {useState} from 'react'; +import {Row} from 'antd'; +import SearchSelectList from '../src'; + +export default { + title: 'OSUI-Search-Select-List', +}; + +export const Demo = () => { + const menuList = [{ + value: 'key1', + label: '分支', + }, { + value: 'key2', + label: '标签', + }]; + const selectlist: any[] = []; + for (let i = 0; i < 10; i++) { + selectlist.push({ + value: i, + label: `选项${i + 1}`, + icon: '', + }); + } + const [selectVal, setSelectVal] = useState(); + const [searchVal, setSearchVal] = useState(); + const [menuVal, setMenuVal] = useState(''); + function handleClickItem(item: any): void { + setSelectVal(item.label); + } + function handleSearch(val: any): void { + setSearchVal(val); + } + function handleClickMenu(e: any): void { + const val = menuList.filter(item => item.value === e.key)[0].label; + setMenuVal(val); + } + return ( + <> +

    当前点击的menu是 {menuVal}

    +

    当前搜索的是 {searchVal}

    +

    当前点击了 {selectVal}

    + + + + + + + + ); +}; diff --git a/packages/ui/search-select-list/tsconfig.json b/packages/ui/search-select-list/tsconfig.json new file mode 100644 index 0000000000000000000000000000000000000000..3a24a511df9639581444c76e59ea1b775c5d8ea6 --- /dev/null +++ b/packages/ui/search-select-list/tsconfig.json @@ -0,0 +1,8 @@ +{ + "extends": "../../../tsconfig.json", + "compilerOptions": { + "rootDir": "./src", + "outDir": "./tmp" + }, + "include": ["src"] +} diff --git a/packages/ui/timeline/src/index.tsx b/packages/ui/timeline/src/index.tsx index 2318529565b14ae225b2a271026b552e1cefa1c1..a33a8d919e7f37cb01779d22e9febece04cf910f 100644 --- a/packages/ui/timeline/src/index.tsx +++ b/packages/ui/timeline/src/index.tsx @@ -10,7 +10,7 @@ export type TimelineItemProps = AntdTimelineItemProps; interface TimelineType extends React.FC { Item: React.FC; - } +} const Timeline: TimelineType = props => { return ; diff --git a/packages/ui/timeline/stories/index.stories.tsx b/packages/ui/timeline/stories/index.stories.tsx index 86c4a8e501479804b10c7620fce30aa6ed440a08..41184fd08920ce89790aadc1392b3de86138ef4b 100644 --- a/packages/ui/timeline/stories/index.stories.tsx +++ b/packages/ui/timeline/stories/index.stories.tsx @@ -9,7 +9,6 @@ export default { export const Demo = () => { return (
    -

    Create a services site 2015-09-01 Create a services site 2015-09-01