# watermelon-design

> person design

Latest version **1.0.10** (published 2019-10-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install watermelon-design
pnpm add watermelon-design
yarn add watermelon-design
bun add watermelon-design
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.10 |
| Published | 2019-10-23 |
| First published | 2019-05-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 57 |
| Unpacked size | 74.2 KB |
| Known vulnerabilities | 0 (+11 in 5 direct dependencies) |
| Install scripts | no |
| GitHub stars | 1 |
| Author | wangxiaogang94 |
| Maintainers | wangxiaogangbywin |
| Keywords | watermelon, watermark, base64, react-component, component, components, ui, ColorPicker, 水印, 颜色选择器, 扇形菜单 |

## Links

- npm: https://www.npmjs.com/package/watermelon-design
- Repository: https://github.com/wangxiaogang94/watermelon
- Homepage: https://wangxiaogang94.github.io/watermelon-design/build/
- Issues: https://github.com/wangxiaogang94/watermelon/issues
- npm.io page: https://npm.io/package/watermelon-design

## Dependencies (57)

- [jest](https://npm.io/package/jest.md) 24.7.1
- [react](https://npm.io/package/react.md) ^16.8.6
- [dotenv](https://npm.io/package/dotenv.md) 6.2.0
- [eslint](https://npm.io/package/eslint.md) ^5.16.0
- [is-wsl](https://npm.io/package/is-wsl.md) ^1.1.0
- [marked](https://npm.io/package/marked.md) ^0.7.0
- [semver](https://npm.io/package/semver.md) 6.0.0
- [ts-pnp](https://npm.io/package/ts-pnp.md) 1.1.2
- [resolve](https://npm.io/package/resolve.md) 1.10.0
- [webpack](https://npm.io/package/webpack.md) 4.29.6
- [fs-extra](https://npm.io/package/fs-extra.md) 7.0.1
- [camelcase](https://npm.io/package/camelcase.md) ^5.2.0
- [react-dom](https://npm.io/package/react-dom.md) ^16.8.6
- [babel-jest](https://npm.io/package/babel-jest.md) ^24.8.0
- [css-loader](https://npm.io/package/css-loader.md) 2.1.1
- [url-loader](https://npm.io/package/url-loader.md) 1.1.2
- [file-loader](https://npm.io/package/file-loader.md) 3.0.1
- [sass-loader](https://npm.io/package/sass-loader.md) 7.1.0
- [babel-eslint](https://npm.io/package/babel-eslint.md) 10.0.1
- [babel-loader](https://npm.io/package/babel-loader.md) 8.0.5
- [highlight.js](https://npm.io/package/highlight.js.md) ^9.15.10
- [jest-resolve](https://npm.io/package/jest-resolve.md) 24.7.1
- [style-loader](https://npm.io/package/style-loader.md) 0.23.1
- [@svgr/webpack](https://npm.io/package/@svgr/webpack.md) 4.1.0
- [dotenv-expand](https://npm.io/package/dotenv-expand.md) 4.2.0
- [eslint-loader](https://npm.io/package/eslint-loader.md) 2.1.2
- [postcss-loader](https://npm.io/package/postcss-loader.md) 3.0.0
- [react-dev-utils](https://npm.io/package/react-dev-utils.md) ^9.0.1
- [react-router-dom](https://npm.io/package/react-router-dom.md) ^5.0.1
- [postcss-normalize](https://npm.io/package/postcss-normalize.md) 7.0.1
- [identity-obj-proxy](https://npm.io/package/identity-obj-proxy.md) 3.0.0
- [pnp-webpack-plugin](https://npm.io/package/pnp-webpack-plugin.md) 1.2.1
- [postcss-preset-env](https://npm.io/package/postcss-preset-env.md) 6.6.0
- [react-app-polyfill](https://npm.io/package/react-app-polyfill.md) ^1.0.1
- [react-grid-gallery](https://npm.io/package/react-grid-gallery.md) ^0.5.5
- [webpack-dev-server](https://npm.io/package/webpack-dev-server.md) 3.2.1
- [eslint-plugin-react](https://npm.io/package/eslint-plugin-react.md) 7.12.4
- [html-webpack-plugin](https://npm.io/package/html-webpack-plugin.md) 4.0.0-beta.5
- [postcss-safe-parser](https://npm.io/package/postcss-safe-parser.md) 4.0.1
- [eslint-plugin-import](https://npm.io/package/eslint-plugin-import.md) 2.16.0
- [jest-watch-typeahead](https://npm.io/package/jest-watch-typeahead.md) 0.3.0
- [terser-webpack-plugin](https://npm.io/package/terser-webpack-plugin.md) 1.2.3
- [babel-preset-react-app](https://npm.io/package/babel-preset-react-app.md) ^9.0.0
- [eslint-plugin-flowtype](https://npm.io/package/eslint-plugin-flowtype.md) 2.50.1
- [eslint-plugin-jsx-a11y](https://npm.io/package/eslint-plugin-jsx-a11y.md) 6.2.1
- [postcss-flexbugs-fixes](https://npm.io/package/postcss-flexbugs-fixes.md) 4.1.0
- [workbox-webpack-plugin](https://npm.io/package/workbox-webpack-plugin.md) 4.2.0
- [eslint-config-react-app](https://npm.io/package/eslint-config-react-app.md) ^4.0.1
- [mini-css-extract-plugin](https://npm.io/package/mini-css-extract-plugin.md) 0.5.0
- [webpack-manifest-plugin](https://npm.io/package/webpack-manifest-plugin.md) 2.0.4
- [@typescript-eslint/parser](https://npm.io/package/@typescript-eslint/parser.md) 1.6.0
- [eslint-plugin-react-hooks](https://npm.io/package/eslint-plugin-react-hooks.md) ^1.5.0
- [babel-plugin-named-asset-import](https://npm.io/package/babel-plugin-named-asset-import.md) ^0.3.2
- [jest-environment-jsdom-fourteen](https://npm.io/package/jest-environment-jsdom-fourteen.md) 0.1.0
- [@typescript-eslint/eslint-plugin](https://npm.io/package/@typescript-eslint/eslint-plugin.md) 1.6.0
- [optimize-css-assets-webpack-plugin](https://npm.io/package/optimize-css-assets-webpack-plugin.md) 5.0.1
- [case-sensitive-paths-webpack-plugin](https://npm.io/package/case-sensitive-paths-webpack-plugin.md) 2.2.0

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads

## Recent versions

- 1.0.10 (latest) — 2019-10-23
- 1.0.9 — 2019-08-27
- 1.0.8 — 2019-08-27
- 1.0.7 — 2019-08-22
- 1.0.6 — 2019-08-22
- 1.0.5 — 2019-06-04
- 1.0.4 — 2019-06-04
- 1.0.3 — 2019-06-04
- 1.0.2 — 2019-06-04
- 1.0.1 — 2019-05-31
- 1.0.0 — 2019-05-31

## README

# 个人使用的组件库

[详细文档](https://wangxiaogang94.github.io/watermelon-design/build/index.html)。
================================================
## 上传的图片文件转base64
```
import { fileToBase64 } from 'watermelon-design';
// 在antd的upload的beforeUpload中使用 可以完成前端获取上传图片
const image = fileToBase64(file, (base64)=>{
    console.log(base64);
})
```
## 水印
> - text:
>   > - Type:String
>   > - 
> - isWatermark:
>   > - Type:bool
>   > - Default: false
> - angle:
>   > - Type:number
>   > - Default: -30
```
import { WaterMark } from 'watermelon-design';

const a = () => <WaterMark text={'admin'} isWatermark/>
```

## 颜色选择器 

```jsx
import { ColorPicker } from 'watermelon-design';

export default class colorpicker extends React.Component {
    state = {
        color: '#F5222D'
    }
    render() {

        return(
            <div>
                <h2>颜色选择器</h2>
                <ColorPicker
                    type="sketch"
                    small
                    color={this.state.color}
                    position="bottom"
                    presetColors={[
                        '#F5222D',
                        '#FA541C',
                        '#FA8C16',
                        '#FAAD14',
                        '#FADB14',
                        '#A0D911',
                        '#52C41A',
                        '#13C2C2',
                        '#1890FF',
                        '#2F54EB',
                        '#722ED1',
                        '#EB2F96',
                    ]}
                    onChangeComplete={(color)=>this.setState({color})}
                />
            </div>
        );
    }
}

```

## 扇形菜单

## API

属性说明如下：

| 属性 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| top | 中心点的y | number | 350 | 1.0.10 |
| left | 中心点的x | number | 350 | 1.0.10 |
| show | 是否显示菜单 | boolean | true | 1.0.10 |
| menu | 菜单项 | ReactNode[] | [] | 1.0.10 |
| centerButton | 中心按钮 | `string/ReactNode` | | 1.0.10 |
| centerClick | 中心按钮点击事件 | function | | 1.0.10 |
| centerBackground | 中心按钮背景 | string | #fd485e | 1.0.10 |

menu的子属性

| 属性 | 说明 | 类型 | 默认值 | 版本 | 说明 |
| --- | --- | --- | --- | --- |
| icon | 图标 | ReactNode | | 1.0.10 | |
| text | 文字 | `string/ReactNode` | | 1.0.10 | |
| onClick | 点击事件 | function | | 1.0.10 | |
| className | 自定义样式class名 | string | | 1.0.10 | 

## 示例

```jsx
import { CircleMenu } from 'watermelon-design';


export default class menu extends React.Component {
    render() {
        const props = {
            top: 150, // 中心点的y
            left: 350, // 中心点的x
            show: true, // 是否显示菜单
            menu: [
                {
                    icon: <Icon type="plus-circle" />,
                    text: '拓展',
                    onClick: i => console.log(i),
                },
                {
                    icon: <Icon type="plus" />,
                    text: '新增',
                    onClick: i => console.log(i),
                },
                {
                    icon: <Icon type="fullscreen" />,
                    text: '全屏',
                    onClick: i => console.log(i),
                },
                {
                    icon: <Icon type="fullscreen-exit" />,
                    text: '收回',
                    onClick: i => console.log(i),
                },
                {
                    icon: <Icon type="form" />,
                    text: '编辑',
                    onClick: i => console.log(i),
                },
                {
                    icon: <Icon type="qq" />,
                    text: 'qq',
                    onClick: i => console.log(i),
                },
            ],
            centerButton: (
                <span>
                    <Icon type="plus-circle" />
                    点击
                </span>
            ),
            centerClick: () => {},
            centerBackground: 'blue',
        };
        return (
            <div>
                <CircleMenu {...props}/>
            </div>
        );
    }
}

```

---
_Source: https://npm.io/package/watermelon-design · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._